respect selected version when performing install as new instance + styling (#17433)

Co-authored-by: Mo Mesgin <mmesgin@Mos-M2-MacBook-Pro.local>

Author: momesgin

shell/mixins/chart.js

@@ -386,8 +386,8 @@ export default {
         // Use those values to check for a catalog app resource.
         // If found, set the form to edit mode. If not, set the
         // form to create mode.
-        // This is a hard blocker - installing a new instance is NOT allowed.
 
+        // This is a hard blocker - installing a new instance is NOT allowed.
         this.canInstallNew = false;
 
         try {
@@ -410,11 +410,10 @@ export default {
         if ( targetNamespace && targetName ) {
           // If the app name and namespace values are not provided in the
           // query, fall back on target values defined in the Helm chart itself.
-
           // Ask to install a special chart with fixed namespace/name
           // or edit it if there's an existing install.
-          // This is a hard blocker - installing a new instance is NOT allowed.
 
+          // This is a hard blocker - installing a new instance is NOT allowed.
           this.canInstallNew = false;
 
           try {

shell/pages/c/_cluster/apps/charts/__tests__/chart.test.ts

@@ -361,4 +361,40 @@ describe('page: Chart Detail', () => {
       openSpy.mockRestore();
     });
   });
+
+  describe('methods: installNewInstance', () => {
+    it('should navigate to install page with correct query parameters', () => {
+      const mockRouterPush = jest.fn();
+      const thisContext = {
+        $router: { push: mockRouterPush },
+        $route:  { params: { cluster: 'local' } },
+        $store:  { getters: { productId: 'explorer' } },
+        query:   {
+          repoType:    'cluster',
+          repoName:    'rancher-charts',
+          chartName:   'my-chart',
+          versionName: '1.2.3',
+          deprecated:  'false'
+        }
+      };
+
+      (Chart.methods!.installNewInstance as () => void).call(thisContext);
+
+      expect(mockRouterPush).toHaveBeenCalledWith({
+        name:   'c-cluster-apps-charts-install',
+        params: {
+          cluster: 'local',
+          product: 'explorer',
+        },
+        query: {
+          'repo-type':    'cluster',
+          repo:           'rancher-charts',
+          chart:          'my-chart',
+          version:        '1.2.3',
+          deprecated:     'false',
+          'new-instance': null
+        }
+      });
+    });
+  });
 });

shell/pages/c/_cluster/apps/charts/chart.vue

@@ -306,6 +306,7 @@ export default {
           [REPO_TYPE]:        this.query.repoType,
           [REPO]:             this.query.repoName,
           [CHART]:            this.query.chartName,
+          [VERSION]:          this.query.versionName,
           [DEPRECATED]:       this.query.deprecated,
           [NEW_APP_INSTANCE]: _FLAGGED,
         }
@@ -834,7 +835,7 @@ export default {
       display: flex;
       align-items: flex-start;
       flex-shrink: 0;
-      gap: 8px;
+      gap: 16px;
 
       .installed-apps-selector {
         width: 340px;