@rancher/shell 3.0.8-rc.10 → 3.0.8-rc.13

package/components/Tabbed/index.vue

@@ -7,6 +7,10 @@ import findIndex from 'lodash/findIndex';
 import { ExtensionPoint, TabLocation } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import Tab from '@shell/components/Tabbed/Tab';
+import { ref } from 'vue';
+import { useIsInResourceDetailDrawer } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
+import { useIsInResourceDetailPage } from '@shell/composables/resourceDetail';
+import { useIsInResourceCreatePage, useIsInResourceEditPage } from '@shell/composables/cruResource';
 
 export default {
   name: 'Tabbed',
@@ -105,7 +109,14 @@ export default {
   },
 
   data() {
-    const extensionTabs = this.showExtensionTabs ? getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams) || [] : [];
+    const location = this.getInitialTabLocation();
+    let extensionTabs = this.showExtensionTabs ? getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, location, this.$route, this, this.extensionParams) || [] : [];
+    const legacyExtensionTabs = this.showExtensionTabs ? getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams) || [] : [];
+
+    if (!extensionTabs.length) {
+      // Support legacy tabs for RESOURCE_DETAIL location
+      extensionTabs = legacyExtensionTabs;
+    }
 
     const parsedExtTabs = extensionTabs.map((item) => {
       return {
@@ -130,7 +141,18 @@ export default {
     // hide tabs based on tab count IF flag is active
     hideTabs() {
       return this.hideSingleTab && this.sortedTabs.length === 1;
-    }
+    },
+  },
+
+  setup() {
+    const isInResourceDetailDrawer = ref(useIsInResourceDetailDrawer());
+    const isInResourceDetailPage = ref(useIsInResourceDetailPage());
+    const isInResourceEditPage = ref(useIsInResourceEditPage());
+    const isInResourceCreatePage = ref(useIsInResourceCreatePage());
+
+    return {
+      isInResourceDetailDrawer, isInResourceDetailPage, isInResourceEditPage, isInResourceCreatePage
+    };
   },
 
   watch: {
@@ -166,6 +188,19 @@ export default {
   },
 
   methods: {
+    getInitialTabLocation() {
+      if (this.isInResourceEditPage) {
+        return TabLocation.RESOURCE_EDIT_PAGE;
+      } else if (this.isInResourceDetailDrawer) {
+        return TabLocation.RESOURCE_SHOW_CONFIGURATION;
+      } else if (this.isInResourceDetailPage) {
+        return TabLocation.RESOURCE_DETAIL_PAGE;
+      } else if (this.isInResourceCreatePage) {
+        return TabLocation.RESOURCE_CREATE_PAGE;
+      } else {
+        return TabLocation.ALL;
+      }
+    },
     hasIcon(tab) {
       return tab.displayAlertIcon || (tab.error && !tab.active);
     },

package/components/auth/login/ldap.vue

@@ -34,9 +34,9 @@ export default {
         });
 
         await loadPlugins({
-          app:     this.$store.app,
-          store:   this.$store,
-          $plugin: this.$store.$plugin
+          app:        this.$store.app,
+          store:      this.$store,
+          $extension: this.$store.$extension,
         });
 
         buttonCb(true);

package/components/form/NodeScheduling.vue

@@ -181,7 +181,7 @@ export default {
         :options="selectNodeOptions"
         :mode="mode"
         :data-testid="'node-scheduling-selectNode'"
-        @input="update"
+        @update:value="update"
       />
     </div>
     <template v-if="selectNode === 'nodeSelector'">
@@ -205,7 +205,7 @@ export default {
         v-model:value="nodeAffinity"
         :mode="mode"
         :data-testid="'node-scheduling-nodeAffinity'"
-        @input="update"
+        @update:value="update"
       />
     </template>
   </div>

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/nav/Group.vue

@@ -41,6 +41,11 @@ export default {
     fixedOpen: {
       type:    Boolean,
       default: false,
+    },
+
+    highlightRoute: {
+      type:    Boolean,
+      default: true,
     }
   },
 
@@ -233,7 +238,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 +247,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 || ''"
@@ -311,6 +316,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 +328,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/Type.vue

@@ -27,6 +27,11 @@ export default {
       type:    Number,
       default: 0,
     },
+
+    highlightRoute: {
+      type:    Boolean,
+      default: true,
+    },
   },
 
   data() {
@@ -121,12 +126,12 @@ export default {
   >
     <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 +141,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/__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/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();
 }