@rancher/shell 3.0.8-rc.9 → 3.0.8

package/components/Resource/Detail/ResourcePopover/index.vue

@@ -31,6 +31,10 @@ const fetch = useFetch(async() => {
   return r;
 });
 
+const stateBackground = computed(() => {
+  return fetch.value.data?.stateSimpleColor || 'unknown';
+});
+
 const resourceTypeLabel = computed(() => {
   if (!fetch.value.data) {
     return '';
@@ -67,7 +71,7 @@ const actionInvoked = () => {
       >
         <RcStatusIndicator
           shape="disc"
-          :status="fetch.data?.stateBackground || 'unknown'"
+          :status="stateBackground"
         />
         <router-link
           :to="props.detailLocation || fetch.data.detailLocation || '#'"

package/components/ResourceDetail/Masthead/latest.vue

@@ -42,27 +42,29 @@ const store = useStore();
 </script>
 
 <template>
-  <TitleBar v-bind="titleBarProps" />
-  <Banner
-    v-if="bannerProps"
-    v-ui-context="{
-      store: store,
-      icon: 'icon-info',
-      hookable: true,
-      value: {
-        bannerProps,
-        resource: uiCtxResource
-      },
-      tag: '__details-state-banner',
-      description: 'Status Message'
-    }"
-    class="new state-banner"
-    v-bind="bannerProps"
-  />
-  <Metadata
-    v-bind="metadataProps"
-    class="mmt-4"
-  />
+  <div>
+    <TitleBar v-bind="titleBarProps" />
+    <Banner
+      v-if="bannerProps"
+      v-ui-context="{
+        store: store,
+        icon: 'icon-info',
+        hookable: true,
+        value: {
+          bannerProps,
+          resource: uiCtxResource
+        },
+        tag: '__details-state-banner',
+        description: 'Status Message'
+      }"
+      class="new state-banner"
+      v-bind="bannerProps"
+    />
+    <Metadata
+      v-bind="metadataProps"
+      class="mmt-4"
+    />
+  </div>
 </template>
 
 <style lang="scss" scoped>

package/components/ResourceDetail/index.vue

@@ -14,6 +14,7 @@ import { clone, diff } from '@shell/utils/object';
 import IconMessage from '@shell/components/IconMessage';
 import { stringify } from '@shell/utils/error';
 import { Banner } from '@components/Banner';
+import { useResourceDetailPageProvider } from '@shell/composables/resourceDetail';
 
 function modeFor(route) {
   if ( route.query?.mode === _IMPORT ) {
@@ -116,6 +117,7 @@ export default {
 
     if ( mode === _VIEW && hasCustomDetail && (!requested || requested === _DETAIL) ) {
       as = _DETAIL;
+      useResourceDetailPageProvider();
     } else if ( hasCustomEdit && (!requested || requested === _CONFIG) ) {
       as = _CONFIG;
     } else {
@@ -351,6 +353,7 @@ export default {
 
   methods: {
     stringify,
+
     setSubtype(subtype) {
       this.resourceSubtype = subtype;
     },

package/components/ResourceTable.vue

@@ -6,7 +6,7 @@ import ButtonGroup from '@shell/components/ButtonGroup';
 import SortableTable from '@shell/components/SortableTable';
 import { NAMESPACE, AGE } from '@shell/config/table-headers';
 import { findBy } from '@shell/utils/array';
-import { ExtensionPoint, TableColumnLocation } from '@shell/core/types';
+import { ExtensionPoint, TableColumnLocation, TableLocation } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import { ToggleSwitch } from '@components/Form/ToggleSwitch';
 import ResourceTableWatch from '@shell/mixins/resource-table-watch';
@@ -316,29 +316,10 @@ export default {
 
       // add custom table columns provided by the extensions ExtensionPoint.TABLE_COL hook
       // gate it so that we prevent errors on older versions of dashboard
-      if (this.$store.$plugin?.getUIConfig) {
+      if (this.$store.$extension?.getUIConfig) {
         // { column: TableColumn, paginationColumn: PaginationTableColumn }[]
         const extensionCols = getApplicableExtensionEnhancements(this, ExtensionPoint.TABLE_COL, TableColumnLocation.RESOURCE, this.$route);
 
-        // Try and insert the columns before the Age column
-        let insertPosition = headers.length;
-
-        if (headers.length > 0) {
-          const ageColIndex = headers.findIndex((h) => h.name === AGE.name);
-
-          if (ageColIndex >= 0) {
-            insertPosition = ageColIndex;
-          } else {
-            // we've found some labels with ' ', which isn't necessarily empty (explore action/button)
-            // if we are to add cols, let's push them before these so that the UI doesn't look weird
-            const lastViableColIndex = headers.findIndex((h) => (!h.label || !h.label?.trim()) && (!h.labelKey || !h.labelKey?.trim()));
-
-            if (lastViableColIndex >= 0) {
-              insertPosition = lastViableColIndex;
-            }
-          }
-        }
-
         // adding extension defined cols to the correct header config
         extensionCols.forEach((config) => {
           let { column: col, paginationColumn } = config;
@@ -377,6 +358,37 @@ export default {
           if (!col.value && col.getValue) {
             col.value = col.getValue;
           }
+
+          // Establish a valid header position for the new table column
+          let insertPosition = headers.length;
+
+          if (headers.length > 0) {
+            const ageColIndex = headers.findIndex((h) => h.name === AGE.name);
+
+            if (ageColIndex >= 0) {
+              // we will allow for the table col to be added right after the AGE col
+              // but that will be the limit
+              insertPosition = ageColIndex + 1;
+            } else {
+              // we've found some labels with ' ', which isn't necessarily empty (explore action/button)
+              // if we are to add cols, let's push them before these so that the UI doesn't look weird
+              const lastViableColIndex = headers.findIndex((h) => (!h.label || !h.label?.trim()) && (!h.labelKey || !h.labelKey?.trim()));
+
+              if (lastViableColIndex >= 0) {
+                insertPosition = lastViableColIndex;
+              }
+            }
+          }
+
+          // apply table col ordering if it's present on the new table col config
+          if (col.weight) {
+            if (col.weight < 0) {
+              insertPosition = 0;
+            } else if (col.weight < insertPosition) {
+              insertPosition = col.weight;
+            }
+          }
+
           headers.splice(insertPosition, 0, col);
         });
       }
@@ -414,6 +426,16 @@ export default {
       return headers;
     },
 
+    _applicableExtensionTableHooks() {
+      if (this.$store.$plugin?.getUIConfig) {
+        const extensionTableHooks = getApplicableExtensionEnhancements(this, ExtensionPoint.TABLE, TableLocation.RESOURCE, this.$route);
+
+        return extensionTableHooks;
+      }
+
+      return [];
+    },
+
     /**
      * Take rows and filter out entries given the namespace filter
      */
@@ -640,6 +662,16 @@ export default {
       }
     },
 
+    // this is where we handle the callbacks to the TABLE extension hooks
+    handleSortableTableInteraction(arg) {
+      if (this._applicableExtensionTableHooks?.length) {
+        this._applicableExtensionTableHooks.forEach((item) => {
+          if (item.tableHook) {
+            item.tableHook(arg);
+          }
+        });
+      }
+    }
   }
 };
 </script>
@@ -679,6 +711,7 @@ export default {
     @clickedActionButton="handleActionButtonClick"
     @group-value-change="group = $event"
     @enter="handleEnterKeyPress"
+    @sortable-table-interaction="handleSortableTableInteraction"
   >
     <template
       v-if="showGrouping && _groupOptions.length > 1"

package/components/SlideInPanelManager.vue

@@ -57,17 +57,22 @@ watch(
   /**
    * trigger focus trap
    */
-  () => currentProps?.value?.triggerFocusTrap,
-  (neu) => {
-    if (neu) {
-      const opts = {
+  () => isOpen?.value,
+  (neu, old) => {
+    if (neu && neu !== old) {
+      const opts:any = {
         ...DEFAULT_FOCUS_TRAP_OPTS,
+        // putting the initial focus on the first element that is not conditionally displayed
+        initialFocus: slideInPanelManagerClose.value
+      };
+
+      const returnFocusSelector = currentProps?.value?.returnFocusSelector;
+
+      if (returnFocusSelector) {
         /**
          * will return focus to the first iterable node of this container select
          */
-        setReturnFocus: () => {
-          const returnFocusSelector = currentProps?.value?.returnFocusSelector;
-
+        opts.setReturnFocus = () => {
           if (returnFocusSelector && !document.querySelector(returnFocusSelector)) {
             console.warn('SlideInPanelManager: cannot find elem with "returnFocusSelector", returning focus to main view'); // eslint-disable-line no-console
 
@@ -75,10 +80,8 @@ watch(
           }
 
           return returnFocusSelector || '.dashboard-root';
-        },
-        // putting the initial focus on the first element that is not conditionally displayed
-        initialFocus: slideInPanelManagerClose.value
-      };
+        };
+      }
 
       useWatcherBasedSetupFocusTrapWithDestroyIncluded(
         () => {
@@ -166,6 +169,8 @@ function closePanel() {
             data-testid="slide-in-close"
             :tabindex="isOpen ? 0 : -1"
             @click="closePanel"
+            @keypress.enter="closePanel"
+            @keyup.space="closePanel"
           />
         </div>
         <div class="main-panel">

package/components/SortableTable/THead.vue

@@ -31,7 +31,8 @@ export default {
     },
     descending: {
       type:     Boolean,
-      required: true
+      required: false,
+      default:  false
     },
     hasAdvancedFiltering: {
       type:     Boolean,

package/components/SortableTable/index.vue

@@ -52,7 +52,8 @@ export default {
     'group-value-change',
     'selection',
     'rowClick',
-    'enter'
+    'enter',
+    'sortable-table-interaction',
   ],
 
   components: {
@@ -765,7 +766,7 @@ export default {
                 needRef = true;
               } else {
                 // Check if we have a formatter from a plugin
-                const pluginFormatter = this.$plugin?.getDynamic('formatters', c.formatter);
+                const pluginFormatter = this.$extension?.getDynamic('formatters', c.formatter);
 
                 if (pluginFormatter) {
                   component = defineAsyncComponent(pluginFormatter);
@@ -1058,6 +1059,23 @@ export default {
     },
 
     paginationChanged() {
+      // event used for extensions TABLE hooks
+      this.$emit('sortable-table-interaction', {
+        pagination: {
+          page:    this.page,
+          perPage: this.perPage,
+        },
+        filtering: {
+          searchFields: this.searchFields,
+          searchQuery:  this.searchQuery
+        },
+        sorting: {
+          sort:       this.sortFields,
+          sortBy:     this.sortBy,
+          descending: this.descending
+        }
+      });
+
       if (!this.externalPaginationEnabled) {
         return;
       }

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.OTHER;
+      }
+    },
     hasIcon(tab) {
       return tab.displayAlertIcon || (tab.error && !tab.active);
     },

package/components/__tests__/NamespaceFilter.test.ts

@@ -244,4 +244,53 @@ describe('component: NamespaceFilter', () => {
 
     it.todo('should generate the options based on the Rancher resources');
   });
+
+  describe('given filter input text selection', () => {
+    it('should allow text selection by stopping mousedown propagation', async() => {
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          filtered: () => [],
+          options:  () => [],
+          value:    () => [],
+        },
+        global: {
+          mocks: {
+            t:           (key: string) => key,
+            $store:      { getters: { 'i18n/t': () => '', namespaceFilterMode: () => undefined } },
+            $fetchState: { pending: false }
+          },
+          directives: {
+            'clean-tooltip': () => {},
+            shortkey:        () => {},
+          },
+          stubs: { RcButton: { template: '<button><slot /></button>' } },
+        }
+      });
+
+      // Open the dropdown to reveal the filter input
+      const dropdown = wrapper.find('[data-testid="namespaces-dropdown"]');
+
+      await dropdown.trigger('click');
+
+      // Find the filter input
+      const filterInput = wrapper.find('.ns-filter-input');
+
+      expect(filterInput.exists()).toBe(true);
+
+      // Trigger mousedown on the filter input and capture the event
+      const mousedownEvent = new MouseEvent('mousedown', {
+        bubbles:    true,
+        cancelable: true
+      });
+      const stopPropagationSpy = jest.spyOn(mousedownEvent, 'stopPropagation');
+
+      filterInput.element.dispatchEvent(mousedownEvent);
+
+      // Verify stopPropagation was called (which allows text selection)
+      expect(stopPropagationSpy).toHaveBeenCalledWith();
+
+      // Verify the default was NOT prevented (text selection should work)
+      expect(mousedownEvent.defaultPrevented).toBe(false);
+    });
+  });
 });

package/components/auth/SelectPrincipal.vue

@@ -175,6 +175,10 @@ export default {
         if ( this.searchStr === str ) {
           // If not, they've already typed something else
           this.options = res.map((x) => x.id);
+          // display the search results if the dropdown has been closed
+          if (this.options.length) {
+            this.$refs['labeled-select'].isOpen = true;
+          }
         }
       } catch (e) {
         this.options = [];

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/fleet/FleetSecretSelector.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed, defineProps, defineEmits } from 'vue';
+import { ref, computed } from 'vue';
 import { _EDIT } from '@shell/config/query-params';
 import { TYPES } from '@shell/models/secret';
 import { SECRET } from '@shell/config/types';

package/components/form/KeyValue.vue

@@ -693,7 +693,7 @@ export default {
               :aria-colindex="1"
               :class="{
                 'labeled-input-key': keyErrors[row.key],
-                'v-popper--has-tooltip': keyErrors[row.key],
+                'has-clean-tooltip': keyErrors[row.key],
               }"
             >
               <slot

package/components/form/NameNsDescription.vue

@@ -305,7 +305,7 @@ export default {
         namespace.value = toRef(props.forceNamespace);
         updateNamespace(namespace);
       } else if (props.namespaceKey) {
-        namespace.value = get(v, props.namespaceKey);
+        namespace.value = get(v.value, props.namespaceKey);
       } else {
         namespace.value = metadata?.namespace;
       }

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/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/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 };
     },