Fix switch cluster icon behaviour (#17396)

* fix switch cluster icon behaviour

* comment

* update routeComboActive

* update routeComboActive to cover special case

* fix test

---------

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

Author: momesgin

shell/components/nav/TopLevelMenu.vue

@@ -98,6 +98,17 @@ export default {
       return count?.summary.count;
     },
 
+    routeComboActive() {
+      if (!this.routeCombo) {
+        return false;
+      }
+
+      const ready = [...this.appBar.pinFiltered, ...this.appBar.clustersFiltered].filter((c) => c.ready);
+      const readyCount = ready.length;
+
+      return readyCount > 1 || (readyCount === 1 && this.clusterId !== ready[0].id);
+    },
+
     // New
     search() {
       return (this.clusterFilter || '').toLowerCase();
@@ -386,7 +397,7 @@ export default {
     },
 
     clusterMenuClick(ev, cluster) {
-      if (this.routeCombo) {
+      if (this.routeComboActive) {
         ev.preventDefault();
 
         if (this.isCurrRouteClusterExplorer && this.productFromRoute === this.currentProduct?.name) {
@@ -446,7 +457,7 @@ export default {
         content = this.shown ? null : contentText;
 
       // if key combo is pressed, then we update the tooltip as well
-      } else if (this.routeCombo &&
+      } else if (this.routeComboActive &&
         typeof item === 'object' &&
         !Array.isArray(item) &&
         item !== null &&
@@ -706,7 +717,7 @@ export default {
                     <ClusterIconMenu
                       v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
-                      :route-combo="routeCombo"
+                      :route-combo="routeComboActive"
                       class="rancher-provider-icon"
                     />
                     <div
@@ -785,7 +796,7 @@ export default {
                     <ClusterIconMenu
                       v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
-                      :route-combo="routeCombo"
+                      :route-combo="routeComboActive"
                       class="rancher-provider-icon"
                     />
                     <div

shell/components/nav/__tests__/TopLevelMenu.test.ts

@@ -713,4 +713,128 @@ describe('topLevelMenu', () => {
       expect(wrapper.vm.mgmtClusters).toStrictEqual([]);
     });
   });
+
+  describe('computed properties', () => {
+    describe('routeComboActive', () => {
+      it('should be true when routeCombo is true and there are multiple ready clusters', async() => {
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route: {},
+              $store: {
+                ...generateStore([
+                  {
+                    nameDisplay: 'cluster1',
+                    id:          'an-id1',
+                    mgmt:        { id: 'an-id1' },
+                    isReady:     true
+                  },
+                  {
+                    nameDisplay: 'cluster2',
+                    id:          'an-id2',
+                    mgmt:        { id: 'an-id2' },
+                    isReady:     true
+                  }
+                ])
+              }
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+        await wrapper.setData({ routeCombo: true });
+
+        expect(wrapper.vm.routeComboActive).toBe(true);
+      });
+
+      it('should be false when routeCombo is false', async() => {
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route: {},
+              $store: {
+                ...generateStore([
+                  {
+                    nameDisplay: 'cluster1',
+                    id:          'an-id1',
+                    mgmt:        { id: 'an-id1' },
+                    isReady:     true
+                  },
+                  {
+                    nameDisplay: 'cluster2',
+                    id:          'an-id2',
+                    mgmt:        { id: 'an-id2' },
+                    isReady:     true
+                  }
+                ])
+              }
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+        await wrapper.setData({ routeCombo: false });
+
+        expect(wrapper.vm.routeComboActive).toBe(false);
+      });
+
+      it('should be false when there is only one ready cluster and it is the current cluster', async() => {
+        const store = generateStore([
+          {
+            nameDisplay: 'cluster1',
+            id:          'an-id1',
+            mgmt:        { id: 'an-id1' },
+            isReady:     true
+          }
+        ]);
+
+        store.getters.clusterId = 'an-id1' as any;
+
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route: {},
+              $store: store
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+        await wrapper.setData({ routeCombo: true });
+
+        expect(wrapper.vm.routeComboActive).toBe(false);
+      });
+
+      it('should be true when there is only one ready cluster but it is not the current cluster', async() => {
+        const store = generateStore([
+          {
+            nameDisplay: 'cluster1',
+            id:          'an-id1',
+            mgmt:        { id: 'an-id1' },
+            isReady:     true
+          }
+        ]);
+
+        store.getters.clusterId = 'some-other-cluster-id' as any;
+
+        const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+          global: {
+            mocks: {
+              $route: {},
+              $store: store
+            },
+            stubs: ['BrandImage', 'router-link'],
+          }
+        });
+
+        await waitForIt();
+        await wrapper.setData({ routeCombo: true });
+
+        expect(wrapper.vm.routeComboActive).toBe(true);
+      });
+    });
+  });
 });