@rancher/shell 0.5.3 → 2.0.0

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

@@ -1,167 +1,362 @@
-import { mount, RouterLinkStub } from '@vue/test-utils';
+import { shallowMount, RouterLinkStub, createLocalVue } from '@vue/test-utils';
 import Type from '@shell/components/nav/Type.vue';
+import { createChildRenderingRouterLinkStub } from '@shell/utils/unit-tests/ChildRenderingRouterLinkStub';
+import { TYPE_MODES } from '@shell/store/type-map';
 
-// Mandatory to mock vue-router in this test
-jest.mock('vue-router');
-
-// Configuration text
-const className = 'router-link-active';
+// Configuration
+const activeClass = 'router-link-active';
+const exactActiveClass = 'router-link-exact-active';
+const rootClass = 'root';
+const favoriteClass = 'favorite';
 
 describe('component: Type', () => {
-  describe('should not use highlight class', () => {
-    it('given no hash', () => {
-      const wrapper = mount(Type, {
-        propsData: { type: { route: 'something else' } },
-        stubs:     { nLink: RouterLinkStub },
-        mocks:     {
-          $route:  { path: 'whatever' },
-          $router: { resolve: () => ({ route: { path: 'whatever' } }) },
-          $store:  {
-            getters: {
-              currentStore:    () => 'cluster',
-              'cluster/count': () => 1,
-            }
-          }
-        },
+  describe('testing router-link type', () => {
+    const localVue = createLocalVue();
+
+    localVue.directive('cleanHtml', (identity) => identity);
+
+    const defaultRouteTypeProp = {
+      name:  'route-type',
+      route: 'route',
+      exact: true,
+      mode:  TYPE_MODES.FAVORITE
+    };
+
+    const defaultCount = 1;
+    const storeMock = {
+      getters: {
+        currentStore:    () => 'cluster',
+        'cluster/count': () => defaultCount,
+      }
+    };
+
+    describe('should pass props correctly', () => {
+      it('should forward Type props to router-link', () => {
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: defaultRouteTypeProp },
+          stubs:     { routerLink: RouterLinkStub },
+        });
+
+        const linkStub = wrapper.findComponent(RouterLinkStub);
+
+        expect(linkStub.props().to).toBe(defaultRouteTypeProp.route);
+        expect(linkStub.props().exact).toBe(defaultRouteTypeProp.exact);
       });
 
-      const highlight = wrapper.find(`.${ className }`);
+      it('should use router-link-slot href prop', () => {
+        const fakeHref = 'fake-href';
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: defaultRouteTypeProp },
+          stubs:     { routerLink: createChildRenderingRouterLinkStub({ href: fakeHref }) },
+          mocks:     { $store: storeMock }
+        });
+
+        const elementWithSelector = wrapper.find(`a[href='${ fakeHref }']`);
 
-      expect(highlight.exists()).toBe(false);
+        expect(elementWithSelector.exists()).toBe(true);
+      });
+
+      it('should use router-link-slot navigate prop', () => {
+        const navigate = jest.fn();
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: defaultRouteTypeProp },
+          stubs:     { routerLink: createChildRenderingRouterLinkStub({ isActive: true, navigate }) },
+          mocks:     { $store: storeMock }
+        });
+
+        const elementWithSelector = wrapper.find(`.${ activeClass }`);
+
+        elementWithSelector.trigger('click');
+
+        expect(navigate).toHaveBeenCalledTimes(1);
+      });
     });
 
-    it('given no path', () => {
-      const wrapper = mount(Type, {
-        propsData: { type: { route: 'something else' } },
-        stubs:     { nLink: RouterLinkStub },
-        mocks:     {
-          $route:  { hash: 'whatever' },
-          $router: { resolve: () => ({ route: { path: 'whatever' } }) },
-          $store:  {
-            getters: {
-              currentStore:    () => 'cluster',
-              'cluster/count': () => 1,
-            }
-          }
-        },
+    describe('should not use classes if preconditions are not met', () => {
+      it('should not use active class if the link is not active', () => {
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: defaultRouteTypeProp },
+          stubs:     { routerLink: createChildRenderingRouterLinkStub({ isActive: false }) },
+          mocks:     { $store: storeMock }
+        });
+
+        const elementWithSelector = wrapper.find(`.${ activeClass }`);
+
+        expect(elementWithSelector.exists()).toBe(false);
       });
 
-      const highlight = wrapper.find(`.${ className }`);
+      it('should not use exact active class if the link is not active', () => {
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: defaultRouteTypeProp },
+          stubs:     { routerLink: createChildRenderingRouterLinkStub({ isExactActive: false }) },
+          mocks:     { $store: storeMock }
+        });
+
+        const elementWithSelector = wrapper.find(`.${ exactActiveClass }`);
 
-      expect(highlight.exists()).toBe(false);
+        expect(elementWithSelector.exists()).toBe(false);
+      });
+
+      it('should not use root class if the isRoot prop is false', () => {
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: defaultRouteTypeProp, isRoot: false },
+          stubs:     { routerLink: createChildRenderingRouterLinkStub() },
+          mocks:     { $store: storeMock }
+        });
+
+        const elementWithSelector = wrapper.find(`.${ rootClass }`);
+
+        expect(elementWithSelector.exists()).toBe(false);
+      });
     });
 
-    it('given no matching values', () => {
-      const wrapper = mount(Type, {
-        propsData: { type: {} },
-        stubs:     { nLink: RouterLinkStub },
-        mocks:     {
-          $route: {
-            hash: 'hash',
-            path: 'path',
-          },
-          $router: { resolve: () => ({ route: { path: 'whatever' } }) },
-        },
+    describe('should use classes if preconditions are met', () => {
+      it('should use active class if the link is active', () => {
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: defaultRouteTypeProp },
+          stubs:     { routerLink: createChildRenderingRouterLinkStub({ isActive: true }) },
+          mocks:     { $store: storeMock }
+        });
+
+        const elementWithSelector = wrapper.find(`.${ activeClass }`);
+
+        expect(elementWithSelector.exists()).toBe(true);
+      });
+
+      it('should use exact active class if the link is active', () => {
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: defaultRouteTypeProp },
+          stubs:     { routerLink: createChildRenderingRouterLinkStub({ isExactActive: true }) },
+          mocks:     { $store: storeMock }
+        });
+
+        const elementWithSelector = wrapper.find(`.${ exactActiveClass }`);
+
+        expect(elementWithSelector.exists()).toBe(true);
+      });
+
+      it('should use root class if the isRoot prop is true', () => {
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: defaultRouteTypeProp, isRoot: true },
+          stubs:     { routerLink: createChildRenderingRouterLinkStub() },
+          mocks:     { $store: storeMock }
+        });
+
+        const elementWithSelector = wrapper.find(`.${ rootClass }`);
+
+        expect(elementWithSelector.exists()).toBe(true);
       });
 
-      const highlight = wrapper.find(`.${ className }`);
+      it('should show depth-0 class if depth prop is not defined', () => {
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: defaultRouteTypeProp },
+          stubs:     { routerLink: createChildRenderingRouterLinkStub() },
+          mocks:     { $store: storeMock }
+        });
+
+        const elementWithSelector = wrapper.find(`.depth-0`);
+
+        expect(elementWithSelector.exists()).toBe(true);
+      });
+
+      it('should show depth-1 class if depth prop is defined as 1', () => {
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: defaultRouteTypeProp, depth: 1 },
+          stubs:     { routerLink: createChildRenderingRouterLinkStub() },
+          mocks:     { $store: storeMock }
+        });
+
+        const elementWithSelector = wrapper.find(`.depth-1`);
 
-      expect(highlight.exists()).toBe(false);
+        expect(elementWithSelector.exists()).toBe(true);
+      });
     });
 
-    it('given navigation path is bigger than current page route path', () => {
-      const wrapper = mount(Type, {
-        propsData: { type: { route: 'not empty' } },
-        stubs:     { nLink: RouterLinkStub },
-        mocks:     {
-          $route: {
-            hash: 'not empty',
-            path: 'whatever',
+    describe('should handle the favorite icon appropriately', () => {
+      it('should show favorite icon if mouse is over and type is favorite', async() => {
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: defaultRouteTypeProp },
+          stubs:     {
+            routerLink: createChildRenderingRouterLinkStub(),
+            Favorite:   { template: `<div class=${ favoriteClass } />` }
           },
-          $router: { resolve: () => ({ route: { path: 'many/parts' } }) },
-          $store:  {
-            getters: {
-              currentStore:    () => 'cluster',
-              'cluster/count': () => 1,
-            }
-          }
-        },
+          mocks: { $store: storeMock }
+        });
+
+        const aElement = wrapper.find(`a`);
+
+        aElement.trigger('mouseenter');
+        await wrapper.vm.$nextTick();
+
+        const favoriteElement = wrapper.find(`.${ favoriteClass }`);
+
+        expect(favoriteElement.exists()).toBe(true);
       });
 
-      const highlight = wrapper.find(`.${ className }`);
+      it('should not show favorite icon if mouse is not over and type is favorite', async() => {
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: defaultRouteTypeProp },
+          stubs:     {
+            routerLink: createChildRenderingRouterLinkStub(),
+            Favorite:   { template: `<div class=${ favoriteClass } />` }
+          },
+          mocks: { $store: storeMock }
+        });
+
+        const favoriteElement = wrapper.find(`.${ favoriteClass }`);
+
+        expect(favoriteElement.exists()).toBe(false);
+      });
 
-      expect(highlight.exists()).toBe(false);
+      it('should not show favorite icon if mouse is over and type is not favorite', async() => {
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: { ...defaultRouteTypeProp, mode: null } },
+          stubs:     {
+            routerLink: createChildRenderingRouterLinkStub(),
+            Favorite:   { template: `<div class=${ favoriteClass } />` }
+          },
+          mocks: { $store: storeMock }
+        });
+
+        const aElement = wrapper.find(`a`);
+
+        aElement.trigger('mouseenter');
+        await wrapper.vm.$nextTick();
+
+        const favoriteElement = wrapper.find(`.${ favoriteClass }`);
+
+        expect(favoriteElement.exists()).toBe(false);
+      });
     });
 
-    it.each([
-      // URL with fragments like anchors
-      [
-        '/c/c-m-hzqf4tqt/explorer/members#project-membership',
-        '/c/c-m-hzqf4tqt/explorer/members'
-      ],
-      // Similar paths
-      [
-        '/c/c-m-hzqf4tqt/fleet/fleet.cattle.io.bundlenamespacemapping',
-        '/c/c-m-hzqf4tqt/fleet/fleet.cattle.io.bundle'
-      ],
-      // paths with same parts, e.g. parents
-      [
-        '/c/c-m-hzqf4tqt/fleet',
-        '/c/c-m-hzqf4tqt/fleet/management.cattle.io.fleetworkspace'
-      ],
-    ])('given different current path %p and menu path %p', (currentPath, menuPath) => {
-      const wrapper = mount(Type, {
-        propsData: { type: { route: 'not empty' } },
-        stubs:     { nLink: RouterLinkStub },
-        mocks:     {
-          $route: {
-            hash: 'not empty',
-            path: currentPath,
+    describe('should handle count appropriately', () => {
+      it('should show count if on type', async() => {
+        const count = 2;
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: { ...defaultRouteTypeProp, count } },
+          stubs:     {
+            routerLink: createChildRenderingRouterLinkStub(),
+            Favorite:   { template: `<div class=${ favoriteClass } />` }
+          },
+          mocks: { $store: storeMock }
+        });
+
+        const typeCount = wrapper.find(`span[data-testid="type-count"]`);
+
+        expect(Number.parseInt(typeCount.text())).toBe(count);
+      });
+
+      it('should show count if in store', async() => {
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: defaultRouteTypeProp },
+          stubs:     {
+            routerLink: createChildRenderingRouterLinkStub(),
+            Favorite:   { template: `<div class=${ favoriteClass } />` }
           },
-          $router: { resolve: () => ({ route: { path: menuPath } }) },
-          $store:  {
-            getters: {
-              currentStore:    () => 'cluster',
-              'cluster/count': () => 1,
+          mocks: { $store: storeMock }
+        });
+
+        const typeCount = wrapper.find(`span[data-testid="type-count"]`);
+
+        expect(Number.parseInt(typeCount.text())).toBe(defaultCount);
+      });
+
+      it('should not show count if not in type or store', async() => {
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: defaultRouteTypeProp },
+          stubs:     {
+            routerLink: createChildRenderingRouterLinkStub(),
+            Favorite:   { template: `<div class=${ favoriteClass } />` }
+          },
+          mocks: {
+
+            $store: {
+              getters: {
+                currentStore:    () => 'cluster',
+                'cluster/count': () => null,
+              }
             }
           }
-        },
+        });
+
+        const typeCount = wrapper.find(`span[data-testid="type-count"]`);
+
+        expect(typeCount.exists()).toBe(false);
+      });
+    });
+
+    describe('should handle namespace appropriately', () => {
+      it('should show namespace if on type', async() => {
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: { ...defaultRouteTypeProp, namespaced: true } },
+          stubs:     {
+            routerLink: createChildRenderingRouterLinkStub(),
+            Favorite:   { template: `<div class=${ favoriteClass } />` }
+          },
+          mocks: { $store: storeMock }
+        });
+
+        const namespaced = wrapper.find(`i[data-testid="type-namespaced"]`);
+
+        expect(namespaced.exists()).toBe(true);
       });
 
-      const highlight = wrapper.find(`.${ className }`);
+      it('should not show namespace if not on type', async() => {
+        const wrapper = shallowMount(Type as any, {
+          localVue,
+          propsData: { type: { ...defaultRouteTypeProp, namespaced: false } },
+          stubs:     {
+            routerLink: createChildRenderingRouterLinkStub(),
+            Favorite:   { template: `<div class=${ favoriteClass } />` }
+          },
+          mocks: { $store: storeMock }
+        });
+
+        const namespaced = wrapper.find(`i[data-testid="type-namespaced"]`);
 
-      expect(highlight.exists()).toBe(false);
+        expect(namespaced.exists()).toBe(false);
+      });
     });
   });
 
-  describe('should use highlight class', () => {
-    it.each([
-      [
-        'same',
-        'same'
-      ],
-    ])('given same current path %p and menu path %p (on first load)', (currentPath, menuPath) => {
-      const wrapper = mount(Type, {
-        propsData: { type: { route: 'not empty' } },
-        stubs:     { nLink: RouterLinkStub },
-        mocks:     {
-          $route: {
-            hash: 'not empty',
-            path: currentPath,
-          },
-          $router: { resolve: () => ({ route: { path: menuPath } }) },
-          $store:  {
-            getters: {
-              currentStore:    () => 'cluster',
-              'cluster/count': () => 1,
-            }
-          }
+  describe('testing link type', () => {
+    it('should show the link type element if link is present on type with the specified label and target', () => {
+      const defaultLinkTypeProp = {
+        link:   'link-type-link',
+        label:  'link-type-label',
+        target: 'link-type-target'
+      };
+
+      const wrapper = shallowMount(Type as any, {
+        propsData: { type: defaultLinkTypeProp },
+        stubs:     {
+          routerLink: createChildRenderingRouterLinkStub(),
+          Favorite:   { template: `<div class=${ favoriteClass } />` }
         },
       });
 
-      const highlight = wrapper.find(`.${ className }`);
+      const link = wrapper.find(`li[data-testid="link-type"]`);
 
-      expect(highlight.exists()).toBe(true);
+      expect(link.text()).toBe(defaultLinkTypeProp.label);
+      expect(link.find('a').attributes('target')).toBe(defaultLinkTypeProp.target);
     });
   });
 });

package/components/nuxt/nuxt-child.js

@@ -30,13 +30,8 @@ export default {
 
     const listeners = {}
     
-    // Add triggerScroll event on beforeEnter (fix #1376)
     const beforeEnter = listeners.beforeEnter
     listeners.beforeEnter = (el) => {
-      // Ensure to trigger scroll event after calling scrollBehavior
-      window.$nuxt.$nextTick(() => {
-        window.$nuxt.$emit('triggerScroll')
-      })
       if (beforeEnter) {
         return beforeEnter.call(_parent, el)
       }

package/components/nuxt/nuxt-error.vue

@@ -8,7 +8,7 @@
       <div class="title">{{ message }}</div>
       <p v-if="statusCode === 404" class="description">
         <a v-if="typeof $route === 'undefined'" class="error-link" href="/"></a>
-        <NuxtLink v-else class="error-link" to="/">Back to the home page</NuxtLink>
+        <router-link v-else class="error-link" to="/">Back to the home page</router-link>
       </p>
 
       <p class="description" v-else>An error occurred while rendering the page. Check developer tools console for details.</p>

package/components/nuxt/nuxt-link.client.js

@@ -1,98 +1,16 @@
-import Vue from 'vue'
-
-const requestIdleCallback = window.requestIdleCallback ||
-  function (cb) {
-    const start = Date.now()
-    return setTimeout(function () {
-      cb({
-        didTimeout: false,
-        timeRemaining: () => Math.max(0, 50 - (Date.now() - start))
-      })
-    }, 1)
-  }
-
-const cancelIdleCallback = window.cancelIdleCallback || function (id) {
-  clearTimeout(id)
-}
-
-const observer = window.IntersectionObserver && new window.IntersectionObserver((entries) => {
-  entries.forEach(({ intersectionRatio, target: link }) => {
-    if (intersectionRatio <= 0 || !link.__prefetch) {
-      return
-    }
-    link.__prefetch()
-  })
-})
-
-export default {
-  name: 'NuxtLink',
-  extends: Vue.component('RouterLink'),
-  props: {
-    prefetch: {
-      type: Boolean,
-      default: false
-    },
-    noPrefetch: {
-      type: Boolean,
-      default: false
-    }
-  },
-  mounted () {
-    if (this.prefetch && !this.noPrefetch) {
-      this.handleId = requestIdleCallback(this.observe, { timeout: 2e3 })
-    }
-  },
-  beforeDestroy () {
-    cancelIdleCallback(this.handleId)
-
-    if (this.__observed) {
-      observer.unobserve(this.$el)
-      delete this.$el.__prefetch
-    }
-  },
-  methods: {
-    observe () {
-      // If no IntersectionObserver, avoid prefetching
-      if (!observer) {
-        return
-      }
-      // Add to observer
-      if (this.shouldPrefetch()) {
-        this.$el.__prefetch = this.prefetchLink.bind(this)
-        observer.observe(this.$el)
-        this.__observed = true
-      }
-    },
-    shouldPrefetch () {
-      return this.getPrefetchComponents().length > 0
-    },
-    canPrefetch () {
-      const conn = navigator.connection
-      const hasBadConnection = this.$nuxt.isOffline || (conn && ((conn.effectiveType || '').includes('2g') || conn.saveData))
-
-      return !hasBadConnection
-    },
-    getPrefetchComponents () {
-      const ref = this.$router.resolve(this.to, this.$route, this.append)
-      const Components = ref.resolved.matched.map(r => r.components.default)
-
-      return Components.filter(Component => typeof Component === 'function' && !Component.options && !Component.__prefetched)
-    },
-    prefetchLink () {
-      if (!this.canPrefetch()) {
-        return
-      }
-      // Stop observing this link (in case of internet connection changes)
-      observer.unobserve(this.$el)
-      const Components = this.getPrefetchComponents()
-
-      for (const Component of Components) {
-        const componentOrPromise = Component()
-        if (componentOrPromise instanceof Promise) {
-          componentOrPromise.catch(() => {})
-        }
-        Component.__prefetched = true
-      }
+// TODO: #9541 Remove for Vue 3 migration
+/**
+ * Prints a deprecation warning for any extensions that might be using NuxtLink
+ * @param {string} aliasName The alias that will print the deprecation warning
+ * @returns Functional component that prints a deprecation warning and renders a
+ * `router-link` instead
+ */
+export const nuxtLinkAlias = (aliasName) => {
+  return {
+    functional: true,
+    render(createElement, context) {
+      console.warn(`${aliasName} is deprecated in Rancher Dashboard. Use 'router-link' instead.`);
+      return createElement('router-link', context.data, context.children);
     }
   }
 }

package/components/templates/default.vue

@@ -24,7 +24,7 @@ import isEqual from 'lodash/isEqual';
 import { markSeenReleaseNotes } from '@shell/utils/version';
 import PageHeaderActions from '@shell/mixins/page-actions';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
-import { getClusterFromRoute, getProductFromRoute } from '@shell/middleware/authenticated';
+import { getClusterFromRoute, getProductFromRoute } from '@shell/utils/router';
 import { BOTTOM } from '@shell/utils/position';
 import SideNav from '@shell/components/SideNav';
 import { BLANK_CLUSTER } from '@shell/store/store-types.js';
@@ -70,7 +70,7 @@ export default {
 
   computed: {
     ...mapState(['managementReady', 'clusterReady']),
-    ...mapGetters(['clusterId', 'currentProduct', 'isRancherInHarvester', 'showTopLevelMenu']),
+    ...mapGetters(['clusterId', 'currentProduct', 'rootProduct', 'isRancherInHarvester', 'showTopLevelMenu']),
 
     afterLoginRoute: mapPref(AFTER_LOGIN_ROUTE),
 
@@ -78,7 +78,7 @@ export default {
 
     pageActions() {
       const pageActions = [];
-      const product = this.currentProduct;
+      const product = this.rootProduct;
 
       if ( !product ) {
         return [];