@rancher/shell 0.5.3 → 2.0.0

package/components/nav/Type.vue

@@ -2,11 +2,13 @@
 import Favorite from '@shell/components/nav/Favorite';
 import { TYPE_MODES } from '@shell/store/type-map';
 
+import TabTitle from '@shell/components/TabTitle';
+
 const showFavoritesFor = [TYPE_MODES.FAVORITE, TYPE_MODES.USED];
 
 export default {
 
-  components: { Favorite },
+  components: { Favorite, TabTitle },
 
   props: {
     type: {
@@ -26,71 +28,16 @@ export default {
   },
 
   data() {
-    return {
-      near:     false,
-      over:     false,
-      menuPath: this.type.route ? this.$router.resolve(this.type.route)?.route?.path : undefined,
-    };
+    return { near: false };
   },
 
   computed: {
-    isCurrent() {
-      // This is required to avoid scenarios where fragments break vue routers location matching
-      // For example, the following fails
-      // Curruent Path /c/c-m-hzqf4tqt/explorer/members#project-membership
-      // Menu Path /c/c-m-hzqf4tqt/explorer/members
-      // vue-router exact-path="true" fixes this (https://v3.router.vuejs.org/api/#exact-path),
-      // but fails when the the current path is a child (for instance a resource detail page)
-
-      // Scenarios to consider
-      // - Fragement world
-      //   Curruent Path /c/c-m-hzqf4tqt/explorer/members#project-membership
-      //   Menu Path /c/c-m-hzqf4tqt/explorer/members
-      // - Similar current paths
-      //   /c/c-m-hzqf4tqt/fleet/fleet.cattle.io.bundlenamespacemapping
-      //   /c/c-m-hzqf4tqt/fleet/fleet.cattle.io.bundle
-      // - Other menu items that appear in current menu item
-      //   /c/c-m-hzqf4tqt/fleet
-      //   /c/c-m-hzqf4tqt/fleet/management.cattle.io.fleetworkspace
-
-      // If there's no hash the n-link will determine it's linkActiveClass correctly, so avoid this faff
-      const invalidHash = !this.$route.hash;
-      // Lets be super safe
-      const invalidProps = !this.menuPath || !this.$route.path;
-
-      if (invalidHash || invalidProps) {
-        return false;
-      }
-
-      // We're kind of, but in a fixing way, copying n-link --> vue-router link see vue-router/src/components/link.js & vue-router/src/util/route.js
-      // We're only going to compare the path and ignore query and fragment
-
-      if (this.type.exact) {
-        return this.$route.path === this.menuPath;
-      }
-
-      const currentPath = this.$route.path.split('/');
-      const menuPath = this.menuPath.split('/');
-
-      if (menuPath.length > currentPath.length) {
-        return false;
-      }
-
-      for (let i = 0; i < menuPath.length; i++) {
-        if (menuPath[i] !== currentPath[i]) {
-          return false;
-        }
-      }
-
-      return true;
-    },
-
     showFavorite() {
       return ( this.type.mode && this.near && showFavoritesFor.includes(this.type.mode) );
     },
 
     showCount() {
-      return this.count !== undefined;
+      return this.count !== undefined && this.count !== null;
     },
 
     namespaceIcon() {
@@ -114,14 +61,6 @@ export default {
       this.near = val;
     },
 
-    setOver(val) {
-      this.over = val;
-    },
-
-    removeFavorite() {
-      this.$store.dispatch('type-map/removeFavorite', this.type.name);
-    },
-
     selectType() {
       // Prevent issues if custom NavLink is used #5047
       if (this.type?.route) {
@@ -137,57 +76,74 @@ export default {
 </script>
 
 <template>
-  <n-link
+  <router-link
     v-if="type.route"
     :key="type.name"
+    v-slot="{ href, navigate, isActive, isExactActive }"
+    custom
     :to="type.route"
-    tag="li"
-    class="child nav-type"
-    :class="{'root': isRoot, [`depth-${depth}`]: true, 'router-link-active': isCurrent}"
     :exact="type.exact"
+    :exact-path="type['exact-path']"
   >
-    <a
-      @click="selectType"
-      @mouseenter="setNear(true)"
-      @mouseleave="setNear(false)"
+    <li
+      class="child nav-type"
+      :class="{'root': isRoot, [`depth-${depth}`]: true, 'router-link-active': isActive, 'router-link-exact-active': isExactActive}"
+      @click="navigate"
+      @keypress.enter="navigate"
     >
-      <span
-        v-if="type.labelKey"
-        class="label"
-      ><t :k="type.labelKey" /></span>
-      <span
-        v-else
-        v-clean-html="type.labelDisplay || type.label"
-        class="label"
-        :class="{'no-icon': !type.icon}"
-      />
-      <span
-        v-if="showFavorite || showCount"
-        class="count"
+      <TabTitle
+        v-if="isExactActive"
+        :show-child="false"
       >
-        <Favorite
-          v-if="showFavorite"
-          :resource="type.name"
-        />
-        <i
-          v-if="namespaceIcon"
-          class="icon icon-namespace namespaced"
+        {{ type.labelKey ? t(type.labelKey) : (type.labelDisplay || type.label) }}
+      </TabTitle>
+      <a
+        :href="href"
+        @click="selectType(); navigate($event);"
+        @mouseenter="setNear(true)"
+        @mouseleave="setNear(false)"
+      >
+        <span
+          v-if="type.labelKey"
+          class="label"
+        ><t :k="type.labelKey" /></span>
+        <span
+          v-else
+          v-clean-html="type.labelDisplay || type.label"
+          class="label"
+          :class="{'no-icon': !type.icon}"
         />
-        {{ count }}
-      </span>
-    </a>
-  </n-link>
+        <span
+          v-if="showFavorite || namespaceIcon || showCount"
+          class="count"
+        >
+          <Favorite
+            v-if="showFavorite"
+            :resource="type.name"
+          />
+          <i
+            v-if="namespaceIcon"
+            class="icon icon-namespace"
+            :class="{'ns-and-icon': showCount}"
+            data-testid="type-namespaced"
+          />
+          <span
+            v-if="showCount"
+            data-testid="type-count"
+          >{{ count }}</span>
+        </span>
+      </a>
+    </li>
+  </router-link>
   <li
     v-else-if="type.link"
     class="child nav-type"
+    data-testid="link-type"
   >
     <a
       :href="type.link"
       :target="type.target"
       rel="noopener noreferrer nofollow"
-      @click="selectType"
-      @mouseenter="setNear(true)"
-      @mouseleave="setNear(false)"
     >
       <span class="label">{{ type.label }}&nbsp;<i class="icon icon-external-link" /></span>
     </a>
@@ -198,7 +154,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  .namespaced {
+  .ns-and-icon {
     margin-right: 4px;
   }
 

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

@@ -25,7 +25,7 @@ describe('topLevelMenu', () => {
           },
         },
       },
-      stubs: ['BrandImage', 'nuxt-link']
+      stubs: ['BrandImage', 'router-link']
     });
 
     const cluster = wrapper.find('[data-testid="top-level-menu-cluster-0"]');
@@ -33,6 +33,367 @@ describe('topLevelMenu', () => {
     expect(cluster.exists()).toBe(true);
   });
 
+  it('should show local cluster always on top of the list of clusters (unpinned and ready clusters)', async() => {
+    const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+      data: () => {
+        return { hasProvCluster: true, showPinClusters: true };
+      },
+      mocks: {
+        $store: {
+          getters: {
+            // these objs are doubling as a prov clusters
+            // from which the "description" field comes from
+            // This is triggered by the "hasProvCluster" above
+            // (check all "management/all" getters on the component code)
+            'management/all': () => [
+              {
+                name:        'x32-cwf5-name',
+                id:          'x32-cwf5-id',
+                mgmt:        { id: 'an-id1' },
+                nameDisplay: 'c-cluster',
+                isReady:     true
+              },
+              {
+                name:        'x33-cwf5-name',
+                id:          'x33-cwf5-id',
+                mgmt:        { id: 'an-id2' },
+                nameDisplay: 'a-cluster',
+                isReady:     true
+              },
+              {
+                name:        'x34-cwf5-name',
+                id:          'x34-cwf5-id',
+                mgmt:        { id: 'an-id3' },
+                nameDisplay: 'b-cluster',
+                isReady:     true
+              },
+              {
+                name:        'local-name',
+                id:          'local',
+                mgmt:        { id: 'an-id4' },
+                nameDisplay: 'local',
+                isReady:     true
+              },
+            ],
+            ...defaultStore
+          },
+        },
+      },
+      stubs: ['BrandImage', 'router-link']
+    });
+
+    expect(wrapper.find('[data-testid="top-level-menu-cluster-0"] .cluster-name p').text()).toStrictEqual('local');
+    expect(wrapper.find('[data-testid="top-level-menu-cluster-1"] .cluster-name p').text()).toStrictEqual('a-cluster');
+    expect(wrapper.find('[data-testid="top-level-menu-cluster-2"] .cluster-name p').text()).toStrictEqual('b-cluster');
+    expect(wrapper.find('[data-testid="top-level-menu-cluster-3"] .cluster-name p').text()).toStrictEqual('c-cluster');
+  });
+
+  it('should show local cluster always on top of the list of clusters (unpinned and mix ready/unready clusters)', async() => {
+    const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+      data: () => {
+        return { hasProvCluster: true, showPinClusters: true };
+      },
+      mocks: {
+        $store: {
+          getters: {
+            // these objs are doubling as a prov clusters
+            // from which the "description" field comes from
+            // This is triggered by the "hasProvCluster" above
+            // (check all "management/all" getters on the component code)
+            'management/all': () => [
+              {
+                name:        'x32-cwf5-name',
+                id:          'x32-cwf5-id',
+                mgmt:        { id: 'an-id1' },
+                nameDisplay: 'c-cluster',
+                isReady:     true
+              },
+              {
+                name:        'x33-cwf5-name',
+                id:          'x33-cwf5-id',
+                mgmt:        { id: 'an-id2' },
+                nameDisplay: 'a-cluster',
+                isReady:     false
+              },
+              {
+                name:        'x34-cwf5-name',
+                id:          'x34-cwf5-id',
+                mgmt:        { id: 'an-id3' },
+                nameDisplay: 'b-cluster',
+                isReady:     true
+              },
+              {
+                name:        'local-name',
+                id:          'local',
+                mgmt:        { id: 'an-id4' },
+                nameDisplay: 'local',
+                isReady:     true
+              },
+            ],
+            ...defaultStore
+          },
+        },
+      },
+      stubs: ['BrandImage', 'router-link']
+    });
+
+    expect(wrapper.find('[data-testid="top-level-menu-cluster-0"] .cluster-name p').text()).toStrictEqual('local');
+    expect(wrapper.find('[data-testid="top-level-menu-cluster-1"] .cluster-name p').text()).toStrictEqual('b-cluster');
+    expect(wrapper.find('[data-testid="top-level-menu-cluster-2"] .cluster-name p').text()).toStrictEqual('c-cluster');
+    expect(wrapper.find('[data-testid="top-level-menu-cluster-3"] .cluster-name p').text()).toStrictEqual('a-cluster');
+  });
+
+  it('should show local cluster always on top of the list of clusters (pinned and ready clusters)', async() => {
+    const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+      data: () => {
+        return { hasProvCluster: true, showPinClusters: true };
+      },
+      mocks: {
+        $store: {
+          getters: {
+            // these objs are doubling as a prov clusters
+            // from which the "description" field comes from
+            // This is triggered by the "hasProvCluster" above
+            // (check all "management/all" getters on the component code)
+            'management/all': () => [
+              {
+                name:        'x32-cwf5-name',
+                id:          'x32-cwf5-id',
+                mgmt:        { id: 'an-id1' },
+                nameDisplay: 'c-cluster',
+                isReady:     true,
+                pinned:      true
+              },
+              {
+                name:        'x33-cwf5-name',
+                id:          'x33-cwf5-id',
+                mgmt:        { id: 'an-id2' },
+                nameDisplay: 'a-cluster',
+                isReady:     true,
+                pinned:      true
+              },
+              {
+                name:        'x34-cwf5-name',
+                id:          'x34-cwf5-id',
+                mgmt:        { id: 'an-id3' },
+                nameDisplay: 'b-cluster',
+                isReady:     true,
+                pinned:      true
+              },
+              {
+                name:        'local-name',
+                id:          'local',
+                mgmt:        { id: 'an-id4' },
+                nameDisplay: 'local',
+                isReady:     true,
+                pinned:      true
+              },
+            ],
+            ...defaultStore
+          },
+        },
+      },
+      stubs: ['BrandImage', 'router-link']
+    });
+
+    expect(wrapper.find('[data-testid="pinned-ready-cluster-0"] .cluster-name p').text()).toStrictEqual('local');
+    expect(wrapper.find('[data-testid="pinned-ready-cluster-1"] .cluster-name p').text()).toStrictEqual('a-cluster');
+    expect(wrapper.find('[data-testid="pinned-ready-cluster-2"] .cluster-name p').text()).toStrictEqual('b-cluster');
+    expect(wrapper.find('[data-testid="pinned-ready-cluster-3"] .cluster-name p').text()).toStrictEqual('c-cluster');
+  });
+
+  it('should show local cluster always on top of the list of clusters (pinned and mix ready/unready clusters)', async() => {
+    const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+      data: () => {
+        return { hasProvCluster: true, showPinClusters: true };
+      },
+      mocks: {
+        $store: {
+          getters: {
+            // these objs are doubling as a prov clusters
+            // from which the "description" field comes from
+            // This is triggered by the "hasProvCluster" above
+            // (check all "management/all" getters on the component code)
+            'management/all': () => [
+              {
+                name:        'x32-cwf5-name',
+                id:          'x32-cwf5-id',
+                mgmt:        { id: 'an-id1' },
+                nameDisplay: 'c-cluster',
+                isReady:     true,
+                pinned:      true
+              },
+              {
+                name:        'x33-cwf5-name',
+                id:          'x33-cwf5-id',
+                mgmt:        { id: 'an-id2' },
+                nameDisplay: 'a-cluster',
+                isReady:     true,
+                pinned:      true
+              },
+              {
+                name:        'x34-cwf5-name',
+                id:          'x34-cwf5-id',
+                mgmt:        { id: 'an-id3' },
+                nameDisplay: 'b-cluster',
+                isReady:     false,
+                pinned:      true
+              },
+              {
+                name:        'local-name',
+                id:          'local',
+                mgmt:        { id: 'an-id4' },
+                nameDisplay: 'local',
+                isReady:     true,
+                pinned:      true
+              },
+            ],
+            ...defaultStore
+          },
+        },
+      },
+      stubs: ['BrandImage', 'router-link']
+    });
+
+    expect(wrapper.find('[data-testid="pinned-ready-cluster-0"] .cluster-name p').text()).toStrictEqual('local');
+    expect(wrapper.find('[data-testid="pinned-ready-cluster-1"] .cluster-name p').text()).toStrictEqual('a-cluster');
+    expect(wrapper.find('[data-testid="pinned-ready-cluster-2"] .cluster-name p').text()).toStrictEqual('c-cluster');
+    expect(wrapper.find('[data-testid="pinned-ready-cluster-3"] .cluster-name p').text()).toStrictEqual('b-cluster');
+  });
+
+  it('should show description if it is available on the prov cluster', async() => {
+    const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+      data: () => {
+        return { hasProvCluster: true, showPinClusters: true };
+      },
+      mocks: {
+        $store: {
+          getters: {
+            // these objs are doubling as a prov clusters
+            // from which the "description" field comes from
+            // This is triggered by the "hasProvCluster" above
+            // (check all "management/all" getters on the component code)
+            // https://github.com/rancher/dashboard/issues/10441
+            'management/all': () => [
+              // pinned ready cluster
+              {
+                name:        'whatever',
+                id:          'an-id1',
+                mgmt:        { id: 'an-id1' },
+                description: 'some-description1',
+                nameDisplay: 'some-label',
+                isReady:     true,
+                pinned:      true
+              },
+              // pinned NOT ready cluster
+              {
+                name:        'whatever',
+                id:          'an-id2',
+                mgmt:        { id: 'an-id2' },
+                description: 'some-description2',
+                nameDisplay: 'some-label',
+                pinned:      true
+              },
+              // unpinned ready cluster
+              {
+                name:        'whatever',
+                id:          'an-id3',
+                mgmt:        { id: 'an-id3' },
+                description: 'some-description3',
+                nameDisplay: 'some-label',
+                isReady:     true
+              },
+              // unpinned NOT ready cluster
+              {
+                name:        'whatever',
+                id:          'an-id4',
+                mgmt:        { id: 'an-id4' },
+                description: 'some-description4',
+                nameDisplay: 'some-label'
+              },
+            ],
+            ...defaultStore
+          },
+        },
+      },
+      stubs: ['BrandImage', 'router-link']
+    });
+
+    const description1 = wrapper.find('[data-testid="pinned-menu-cluster-an-id1"] .description');
+    const description2 = wrapper.find('[data-testid="pinned-menu-cluster-disabled-an-id2"] .description');
+    const description3 = wrapper.find('[data-testid="menu-cluster-an-id3"] .description');
+    const description4 = wrapper.find('[data-testid="menu-cluster-disabled-an-id4"] .description');
+
+    expect(description1.text()).toStrictEqual('some-description1');
+    expect(description2.text()).toStrictEqual('some-description2');
+    expect(description3.text()).toStrictEqual('some-description3');
+    expect(description4.text()).toStrictEqual('some-description4');
+  });
+
+  it('should show description if it is available on the mgmt cluster (relevant for RKE1/ember world)', async() => {
+    const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
+      data: () => {
+        return { hasProvCluster: false, showPinClusters: true };
+      },
+      mocks: {
+        $store: {
+          getters: {
+            // "hasProvCluster" as false will make this getter
+            // a mgmt cluster only return, therefore covering the
+            // scenario where descriptions come from RKE1/ember world clusters
+            // https://github.com/rancher/dashboard/issues/10441
+            'management/all': () => [
+              // pinned ready cluster
+              {
+                name:        'whatever',
+                id:          'an-id1',
+                description: 'some-description1',
+                nameDisplay: 'some-label',
+                isReady:     true,
+                pinned:      true
+              },
+              // pinned NOT ready cluster
+              {
+                name:        'whatever',
+                id:          'an-id2',
+                description: 'some-description2',
+                nameDisplay: 'some-label',
+                pinned:      true
+              },
+              // unpinned ready cluster
+              {
+                name:        'whatever',
+                id:          'an-id3',
+                description: 'some-description3',
+                nameDisplay: 'some-label',
+                isReady:     true
+              },
+              // unpinned NOT ready cluster
+              {
+                name:        'whatever',
+                id:          'an-id4',
+                description: 'some-description4',
+                nameDisplay: 'some-label'
+              },
+            ],
+            ...defaultStore
+          },
+        },
+      },
+      stubs: ['BrandImage', 'router-link']
+    });
+
+    const description1 = wrapper.find('[data-testid="pinned-menu-cluster-an-id1"] .description');
+    const description2 = wrapper.find('[data-testid="pinned-menu-cluster-disabled-an-id2"] .description');
+    const description3 = wrapper.find('[data-testid="menu-cluster-an-id3"] .description');
+    const description4 = wrapper.find('[data-testid="menu-cluster-disabled-an-id4"] .description');
+
+    expect(description1.text()).toStrictEqual('some-description1');
+    expect(description2.text()).toStrictEqual('some-description2');
+    expect(description3.text()).toStrictEqual('some-description3');
+    expect(description4.text()).toStrictEqual('some-description4');
+  });
+
   it('should not "crash" the component if the structure of banner settings is in an old format', () => {
     const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
       mocks: {
@@ -56,12 +417,12 @@ describe('topLevelMenu', () => {
           },
         },
       },
-      stubs: ['BrandImage', 'nuxt-link']
+      stubs: ['BrandImage', 'router-link']
     });
 
-    expect(wrapper.vm.globalBannerSettings).toStrictEqual({
-      headerFont: '2em',
-      footerFont: '2em'
+    expect(wrapper.vm.sideMenuStyle).toStrictEqual({
+      marginBottom: '2em',
+      marginTop:    '2em'
     });
   });
 
@@ -78,7 +439,7 @@ describe('topLevelMenu', () => {
               },
             },
           },
-          stubs: ['BrandImage', 'nuxt-link']
+          stubs: ['BrandImage', 'router-link']
         });
 
         const noResults = wrapper.find('[data-testid="top-level-menu-no-results"]');
@@ -97,7 +458,7 @@ describe('topLevelMenu', () => {
               },
             },
           },
-          stubs: ['BrandImage', 'nuxt-link']
+          stubs: ['BrandImage', 'router-link']
         });
 
         const noResults = wrapper.find('[data-testid="top-level-menu-no-results"]');
@@ -119,7 +480,7 @@ describe('topLevelMenu', () => {
               },
             },
           },
-          stubs: ['BrandImage', 'nuxt-link']
+          stubs: ['BrandImage', 'router-link']
         });
 
         const noResults = wrapper.find('[data-testid="top-level-menu-no-results"]');
@@ -140,7 +501,7 @@ describe('topLevelMenu', () => {
               },
             },
           },
-          stubs: ['BrandImage', 'nuxt-link']
+          stubs: ['BrandImage', 'router-link']
         });
 
         const noResults = wrapper.find('[data-testid="top-level-menu-no-results"]');