@rancher/shell 3.0.8-rc.8 → 3.0.8

package/components/form/ResourceTabs/composable.ts

@@ -39,10 +39,10 @@ export const useTabCountWatcher = () => {
 
 export const useTabCountUpdater = () => {
   const tabKey = randomStr();
-  const updateCount = inject<UpdateCountFn>(UPDATE_COUNT_PROVIDER_KEY);
+  const updateCount = inject<UpdateCountFn>(UPDATE_COUNT_PROVIDER_KEY, () => { });
 
   const updateTabCount = (count: number | undefined) => {
-    updateCount?.(tabKey, count);
+    updateCount(tabKey, count);
   };
 
   const clearTabCount = () => updateTabCount(undefined);

package/components/form/ResourceTabs/index.vue

@@ -101,7 +101,6 @@ export default {
     return {
       eventSchema,
       EVENT,
-      selectedTab:    this.defaultTab,
       inStore,
       showConditions: false,
       paginationHeaders
@@ -245,7 +244,6 @@ export default {
     :default-tab="defaultTab"
     :resource="value"
     :use-hash="useHash"
-    @changed="tabChange"
   >
     <slot />
     <Tab

package/components/form/__tests__/NameNsDescription.test.ts

@@ -87,6 +87,48 @@ describe('component: NameNsDescription', () => {
     expect(wrapper.emitted().isNamespaceNew?.[0][0]).toBe(true);
   });
 
+  it('should set the namespace using the namespaceKey prop', () => {
+    const namespaceName = 'custom-namespace';
+    const store = createStore({
+      getters: {
+        allowedNamespaces:   () => () => ({ [namespaceName]: true }),
+        currentStore:        () => () => 'cluster',
+        'cluster/schemaFor': () => jest.fn()
+      }
+    });
+
+    const wrapper = mount(NameNsDescription, {
+      props: {
+        value: {
+          setAnnotation: jest.fn(),
+          metadata:      {},
+          value:         { metadata: { namespace: namespaceName } }
+        },
+        mode:         'create',
+        namespaceKey: 'value.metadata.namespace',
+      },
+      global: {
+        provide: { store },
+        mocks:   {
+          $store: {
+            dispatch: jest.fn(),
+            getters:  {
+              namespaces:                         jest.fn(),
+              'customizations/getPreviewCluster': {
+                ready:   true,
+                isLocal: false,
+                badge:   {},
+              },
+              'i18n/t': jest.fn(),
+            },
+          },
+        },
+      },
+    });
+
+    expect((wrapper.vm as any).namespace).toBe(namespaceName);
+  });
+
   it('renders the name input with the expected value', () => {
     const namespaceName = 'test';
     const store = createStore({

package/components/formatter/InternalExternalIP.vue

@@ -108,10 +108,13 @@ export default {
     >
       <template #default>
         <RcStatusBadge
-          v-clean-tooltip="tooltipContent"
+          v-clean-tooltip="{content: tooltipContent, triggers: ['hover', 'focus']}"
+          :aria-label="t('generic.plusMore', {n: remainingIpCount})"
+          tabindex="0"
           status="info"
           data-testid="plus-more"
           @click.stop
+          @keyup.enter.space="$refs.dropdown.show()"
         >
           {{ t('generic.plusMore', {n: remainingIpCount}) }}
         </RcStatusBadge>

package/components/formatter/LinkName.vue

@@ -41,6 +41,11 @@ export default {
         product:   this.product || EXPLORER,
       };
 
+      // Having an undefined param can yield a console warning like [Vue Router warn]: Discarded invalid param(s) "namespace" when navigating
+      if (!params.namespace) {
+        delete params.namespace;
+      }
+
       return { name, params };
     },
 

package/components/formatter/__tests__/InternalExternalIP.test.ts

@@ -24,7 +24,7 @@ describe('component: InternalExternalIP', () => {
         components: { 'v-dropdown': { name: 'v-dropdown', template: '<div><slot /><slot name="popper" /></div>' } },
         directives: {
           'clean-tooltip': (el, binding) => {
-            el.setAttribute('v-clean-tooltip', binding.value);
+            el.setAttribute('v-clean-tooltip', binding.value.content);
           }
         },
         mocks: { $store: { getters: mockGetters } }

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/components/templates/standalone.vue

@@ -3,7 +3,7 @@
 </template>
 
 <style lang="scss">
-body, #__nuxt, #__layout {
+body, #__root, #__layout {
   height: 100%;
 }
 </style>

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/useI18n.ts

@@ -11,7 +11,16 @@ let store: Store<any> | null = null;
  * @returns A translated string or the raw value if the raw parameter is set to true.
  */
 const t = (key: string, args?: unknown, raw?: boolean): string => {
-  return stringFor(store, key, args, raw);
+  if (!store) {
+    if (!!process.env.dev) {
+      // eslint-disable-next-line no-console
+      console.warn('useI18n: store not available');
+    }
+
+    return key;
+  }
+
+  return stringFor(store, key, args as any, raw);
 };
 
 export type I18n = { t: typeof t };

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);