@rancher/shell 3.0.8-rc.9 → 3.0.8

package/components/nav/Group.vue

@@ -1,5 +1,6 @@
 <script>
 import Type from '@shell/components/nav/Type';
+import { filterLocationValidParams } from '@shell/utils/router';
 export default {
   name: 'Group',
 
@@ -41,6 +42,11 @@ export default {
     fixedOpen: {
       type:    Boolean,
       default: false,
+    },
+
+    highlightRoute: {
+      type:    Boolean,
+      default: true,
     }
   },
 
@@ -73,7 +79,8 @@ export default {
         const overviewRoute = grp?.route;
 
         if (overviewRoute && grp.overview) {
-          const route = this.$router.resolve(overviewRoute || {});
+          const validRoute = filterLocationValidParams(this.$router, overviewRoute || {});
+          const route = this.$router.resolve(validRoute);
 
           return this.$route.fullPath.split('#')[0] === route?.fullPath;
         }
@@ -89,6 +96,10 @@ export default {
       set(v) {
         this.expanded = v;
       }
+    },
+
+    headerRoute() {
+      return filterLocationValidParams(this.$router, this.group.children[0].route);
     }
   },
 
@@ -134,7 +145,9 @@ export default {
         const route = item.route;
 
         if (route) {
-          this.$router.replace(route);
+          const validRoute = filterLocationValidParams(this.$router, route);
+
+          this.$router.replace(validRoute);
         } else if (item) {
           this.routeToFirstChild(item);
         }
@@ -143,7 +156,9 @@ export default {
 
     routeToFirstChild(item) {
       if (item.children.length && item.children[0].route) {
-        this.$router.replace(item.children[0].route);
+        const validRoute = filterLocationValidParams(this.$router, item.children[0].route);
+
+        this.$router.replace(validRoute);
       }
     },
 
@@ -191,7 +206,8 @@ export default {
           const matchesNavLevel = navLevels.filter((param) => !this.$route.params[param] || this.$route.params[param] !== item.route.params[param]).length === 0;
           const withoutHash = this.$route.hash ? this.$route.fullPath.slice(0, this.$route.fullPath.indexOf(this.$route.hash)) : this.$route.fullPath;
           const withoutQuery = withoutHash.split('?')[0];
-          const itemFullPath = this.$router.resolve(item.route).fullPath;
+          const validItemRoute = filterLocationValidParams(this.$router, item.route);
+          const itemFullPath = this.$router.resolve(validItemRoute).fullPath;
 
           if (matchesNavLevel || itemFullPath === withoutQuery) {
             return true;
@@ -233,7 +249,7 @@ export default {
 <template>
   <div
     class="accordion"
-    :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren, 'group-highlight': isGroupActive }"
+    :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren, 'group-highlight': highlightRoute && isGroupActive }"
   >
     <div
       v-if="showHeader || (!onlyHasOverview && canCollapse)"
@@ -242,7 +258,7 @@ export default {
       <div
         v-if="showHeader"
         class="header"
-        :class="{'active': isOverview, 'noHover': !canCollapse || fixedOpen}"
+        :class="{'active': highlightRoute && isOverview, 'noHover': !canCollapse || fixedOpen}"
         role="button"
         :tabindex="fixedOpen ? -1 : 0"
         :aria-label="group.labelDisplay || group.label || ''"
@@ -253,7 +269,7 @@ export default {
         <slot name="header">
           <router-link
             v-if="hasOverview"
-            :to="group.children[0].route"
+            :to="headerRoute"
             :exact="group.children[0].exact"
             :tabindex="-1"
           >
@@ -311,6 +327,7 @@ export default {
             :can-collapse="canCollapse"
             :group="child"
             :fixed-open="fixedOpen"
+            :highlight-route="highlightRoute"
             @selected="groupSelected($event)"
             @expand="expandGroup($event)"
             @close="close($event)"
@@ -322,6 +339,7 @@ export default {
           :is-root="depth == 0 && !showHeader"
           :type="child"
           :depth="depth"
+          :highlight-route="highlightRoute"
           @selected="selectType($event)"
         />
       </template>

package/components/nav/Header.vue

@@ -254,7 +254,7 @@ export default {
           this.extensionHeaderActions = getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, neu);
           this.updateExtensionActionsEnabled();
 
-          this.navHeaderRight = this.$plugin?.getDynamic('component', 'NavHeaderRight');
+          this.navHeaderRight = this.$extension?.getDynamic('component', 'NavHeaderRight');
         }
       },
       immediate: true,

package/components/nav/NamespaceFilter.vue

@@ -841,6 +841,7 @@ export default {
             tabindex="0"
             class="ns-filter-input"
             :aria-label="t('namespaceFilter.input')"
+            @mousedown.stop
             @click="focusFilter"
             @keydown="inputKeyHandler($event)"
           >

package/components/nav/Type.vue

@@ -3,6 +3,7 @@ import Favorite from '@shell/components/nav/Favorite';
 import { TYPE_MODES } from '@shell/store/type-map';
 
 import TabTitle from '@shell/components/TabTitle';
+import { filterLocationValidParams } from '@shell/utils/router';
 
 const showFavoritesFor = [TYPE_MODES.FAVORITE, TYPE_MODES.USED];
 
@@ -27,6 +28,11 @@ export default {
       type:    Number,
       default: 0,
     },
+
+    highlightRoute: {
+      type:    Boolean,
+      default: true,
+    },
   },
 
   data() {
@@ -57,7 +63,7 @@ export default {
     },
 
     isActive() {
-      const typeFullPath = this.$router.resolve(this.type.route)?.fullPath.toLowerCase();
+      const typeFullPath = this.$router.resolve(this.typeRoute)?.fullPath.toLowerCase();
       const pageFullPath = this.$route.fullPath?.toLowerCase().split('#')[0]; // Ignore the shebang when comparing routes
       const routeMetaNav = this.$route.meta?.nav;
 
@@ -88,6 +94,10 @@ export default {
       }
 
       return typeFullPath === pageFullPath;
+    },
+
+    typeRoute() {
+      return filterLocationValidParams(this.$router, this.type.route);
     }
 
   },
@@ -100,7 +110,8 @@ export default {
     selectType() {
       // Prevent issues if custom NavLink is used #5047
       if (this.type?.route) {
-        const typePath = this.$router.resolve(this.type.route)?.fullPath;
+        const validRoute = filterLocationValidParams(this.$router, this.type.route);
+        const typePath = this.$router.resolve(validRoute)?.fullPath;
 
         if (typePath !== this.$route.fullPath) {
           this.$emit('selected');
@@ -117,16 +128,16 @@ export default {
     :key="type.name"
     v-slot="{ href, navigate,isExactActive }"
     custom
-    :to="type.route"
+    :to="typeRoute"
   >
     <li
       class="child nav-type"
-      :class="{'root': isRoot, [`depth-${depth}`]: true, 'router-link-active': isActive, 'router-link-exact-active': isExactActive}"
+      :class="{'root': isRoot, [`depth-${depth}`]: true, 'router-link-active': highlightRoute && isActive, 'router-link-exact-active': highlightRoute && isExactActive}"
       @click="navigate"
       @keypress.enter="navigate"
     >
       <TabTitle
-        v-if="isExactActive"
+        v-if="highlightRoute && isExactActive"
         :show-child="false"
       >
         {{ type.labelKey ? t(type.labelKey) : (type.labelDisplay || type.label) }}
@@ -136,7 +147,7 @@ export default {
         :aria-label="type.labelKey ? t(type.labelKey) : (type.labelDisplay || type.label)"
         :href="href"
         class="type-link"
-        :aria-current="isActive ? 'page' : undefined"
+        :aria-current="highlightRoute && isActive ? 'page' : undefined"
         @click="selectType(); navigate($event);"
         @mouseenter="setNear(true)"
         @mouseleave="setNear(false)"

package/components/nav/WindowManager/panels/TabBodyContainer.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup>
-import { onMounted, defineProps, defineEmits } from 'vue';
+import { onMounted } from 'vue';
 
 /**
  * This component serves as a container for the body of a tab within a window manager panel.

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

@@ -250,6 +250,65 @@ describe('component: Type', () => {
       });
     });
 
+    describe('should respect highlightRoute prop', () => {
+      it('should not use active class when highlightRoute is false even if route is active', () => {
+        const wrapper = shallowMount(Type as any, {
+          props: { type: defaultRouteTypeProp, highlightRoute: false },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: {
+              $store: storeMock, $router: routerMock, $route: routeMock
+            },
+            stubs: { routerLink: createChildRenderingRouterLinkStub() },
+          },
+        });
+
+        const elementWithSelector = wrapper.find(`.${ activeClass }`);
+
+        expect(elementWithSelector.exists()).toBe(false);
+      });
+
+      it('should not use exact active class when highlightRoute is false even if route is exact active', () => {
+        const wrapper = shallowMount(Type as any, {
+          props: { type: defaultRouteTypeProp, highlightRoute: false },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: {
+              $store: storeMock, $router: routerMock, $route: routeMock
+            },
+            stubs: { routerLink: createChildRenderingRouterLinkStub({ isExactActive: true }) },
+          },
+        });
+
+        const elementWithSelector = wrapper.find(`.${ exactActiveClass }`);
+
+        expect(elementWithSelector.exists()).toBe(false);
+      });
+
+      it('should use active class when highlightRoute is true (default) and route is active', () => {
+        const wrapper = shallowMount(Type as any, {
+          props: { type: defaultRouteTypeProp, highlightRoute: true },
+
+          global: {
+            directives: { cleanHtml: (identity) => identity },
+
+            mocks: {
+              $store: storeMock, $router: routerMock, $route: routeMock
+            },
+            stubs: { routerLink: createChildRenderingRouterLinkStub() },
+          },
+        });
+
+        const elementWithSelector = wrapper.find(`.${ activeClass }`);
+
+        expect(elementWithSelector.exists()).toBe(true);
+      });
+    });
+
     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, {

package/composables/cruResource.ts

@@ -0,0 +1,27 @@
+import { inject, provide } from 'vue';
+const IS_IN_RESOURCE_EDIT_PAGE_KEY = 'isInResourceEditKey';
+const IS_IN_RESOURCE_CREATE_PAGE_KEY = 'isInResourceCreateKey';
+
+/**
+ * Used to determine if the current component was instantiated as an ancestor of a CruResource EDIT page.
+ * @returns true if the component is an ancestor of CruResource EDIT page, otherwise false
+ */
+export function useIsInResourceEditPage() {
+  return inject(IS_IN_RESOURCE_EDIT_PAGE_KEY, false);
+}
+
+/**
+ * Used to determine if the current component was instantiated as an ancestor of a CruResource CREATE page.
+ * @returns true if the component is an ancestor of CruResource CREATE page, otherwise false
+ */
+export function useIsInResourceCreatePage() {
+  return inject(IS_IN_RESOURCE_CREATE_PAGE_KEY, false);
+}
+
+export function useResourceEditPageProvider() {
+  provide(IS_IN_RESOURCE_EDIT_PAGE_KEY, true);
+}
+
+export function useResourceCreatePageProvider() {
+  provide(IS_IN_RESOURCE_CREATE_PAGE_KEY, true);
+}

package/composables/focusTrap.ts

@@ -57,8 +57,10 @@ export function useWatcherBasedSetupFocusTrapWithDestroyIncluded(watchVar:any, f
 
         focusTrapInstance = createFocusTrap(focusEl, opts);
 
+        const activate = () => focusTrapInstance.activate();
+
         nextTick(() => {
-          focusTrapInstance.activate();
+          setTimeout(activate, 0);
         });
       });
     } else if (!neu && focusTrapInstance && Object.keys(focusTrapInstance).length && !useUnmountHook) {

package/composables/resourceDetail.ts

@@ -0,0 +1,15 @@
+import { inject, provide } from 'vue';
+
+const IS_IN_RESOURCE_DETAIL_PAGE_KEY = 'isInResourceDetailKey';
+
+/**
+ * Used to determine if the current component was instantiated as an ancestor of a ResourceDetail.
+ * @returns true if the component is an ancestor of ResourceDetail, otherwise false
+ */
+export function useIsInResourceDetailPage() {
+  return inject(IS_IN_RESOURCE_DETAIL_PAGE_KEY, false);
+}
+
+export function useResourceDetailPageProvider() {
+  provide(IS_IN_RESOURCE_DETAIL_PAGE_KEY, true);
+}

package/composables/useLabeledFormElement.ts

@@ -1,5 +1,6 @@
 import {
-  ref, computed, ComputedRef, Ref, defineEmits
+  ref, computed, ComputedRef, Ref,
+  EmitFn
 } from 'vue';
 import { _VIEW, _EDIT } from '@shell/config/query-params';
 
@@ -72,9 +73,7 @@ export const labeledFormElementProps = {
   }
 };
 
-const labeledFormElementEmits = defineEmits(['update:validation']);
-
-export const useLabeledFormElement = (props: LabeledFormElementProps, emit: typeof labeledFormElementEmits): UseLabeledFormElement => {
+export const useLabeledFormElement = (props: LabeledFormElementProps, emit: EmitFn<['update:validation']>): UseLabeledFormElement => {
   const raised = ref(props.mode === _VIEW || !!`${ props.value }`);
   const focused = ref(false);
   const blurred = ref<number | null>(null);

package/config/product/fleet.js

@@ -34,7 +34,7 @@ export function init(store) {
     showWorkspaceSwitcher: true,
     to:                    {
       name:   'c-cluster-fleet',
-      params: { resource: FLEET.DASHBOARD, cluster: BLANK_CLUSTER }
+      params: { cluster: BLANK_CLUSTER }
     },
   });
 

package/config/router/navigation-guards/clusters.js

@@ -30,12 +30,12 @@ export async function loadClusters(to, from, next, { store }) {
     const oldPkg = getPackageFromRoute(from);
     const oldProduct = getProductFromRoute(from);
 
-    // TODO: Replace all references to store.$plugin.
+    // TODO: Replace all references to store.$extension.
     //       Unfortunately the initialization code has circular dependencies between creating
     //       the router and creating the store that will need to be untangled before this can be tackled.
 
     // Leave an old pkg where we weren't before?
-    const oldPkgPlugin = oldPkg ? Object.values(store.$plugin.getPlugins()).find((p) => p.name === oldPkg) : null;
+    const oldPkgPlugin = oldPkg ? Object.values(store.$extension.getPlugins()).find((p) => p.name === oldPkg) : null;
 
     if (oldPkg && oldPkg !== pkg ) {
       // Execute anything optional the plugin wants to. For example resetting it's store to remove data
@@ -53,7 +53,7 @@ export async function loadClusters(to, from, next, { store }) {
     ];
 
     // Entering a new package where we weren't before?
-    const newPkgPlugin = pkg ? Object.values(store.$plugin.getPlugins()).find((p) => p.name === pkg) : null;
+    const newPkgPlugin = pkg ? Object.values(store.$extension.getPlugins()).find((p) => p.name === pkg) : null;
 
     // Note - We can't block on oldPkg !== newPkg because on a fresh load the `from` route equals the `to` route
     if (pkg && (oldPkg !== pkg || from.fullPath === to.fullPath)) {

package/config/router/navigation-guards/products.js

@@ -9,7 +9,7 @@ export async function loadProducts(to, from, next, { store }) {
   // GC should be notified of route change before any find/get request is made that might be used for that page
   store.dispatch('gcRouteChanged', to);
 
-  await applyProducts(store, store.$plugin);
+  await applyProducts(store, store.$extension);
   setProduct(store, to);
   next();
 }

package/config/router/routes.js

@@ -1,5 +1,4 @@
 import { NAME as APPS } from '@shell/config/product/apps';
-import { NAME as EXPLORER } from '@shell/config/product/explorer';
 import { NAME as MANAGER } from '@shell/config/product/manager';
 import {
   CAPI, MANAGEMENT, BACKUP_RESTORE, COMPLIANCE, VIRTUAL_TYPES
@@ -184,10 +183,7 @@ export default [
         redirect(to) {
           return {
             name:   'c-cluster-explorer',
-            params: {
-              ...(to?.params || {}),
-              product: EXPLORER,
-            }
+            params: { ...(to?.params || {}) }
           };
         }
       },