@rancher/shell 3.0.8-rc.8 → 3.0.8

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/__tests__/index.test.ts

@@ -0,0 +1,86 @@
+import { mount, VueWrapper } from '@vue/test-utils';
+import Tabbed from '@shell/components/Tabbed/index.vue';
+import Tab from '@shell/components/Tabbed/Tab.vue';
+
+jest.mock('@shell/components/form/ResourceTabs/composable', () => ({ useTabCountWatcher: () => ({}) }));
+
+const mockT = (key: string) => key;
+
+const defaultGlobalMountOptions = {
+  components: { Tab },
+  mocks:      {
+    $router: {
+      replace:      jest.fn(),
+      currentRoute: { _value: { hash: '' } }
+    },
+    $route: { hash: '' },
+    t:      mockT,
+    store:  { getters: { 'i18n/t': mockT } }
+  }
+};
+
+describe('component: Tabbed', () => {
+  const findTabNav = (wrapper: VueWrapper<any>) => wrapper.find('[data-testid="tabbed-block"]');
+
+  it('should display tab navigation for a single tab when hideSingleTab is false (default)', async() => {
+    const wrapper = mount(Tabbed, {
+      slots:  { default: { components: { Tab }, template: '<Tab name="tab1" label="Tab 1" />' } },
+      global: { ...defaultGlobalMountOptions },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(findTabNav(wrapper).exists()).toBe(true);
+  });
+
+  it('should display tab navigation for multiple tabs when hideSingleTab is false (default)', async() => {
+    const wrapper = mount(Tabbed, {
+      slots: {
+        default: {
+          components: { Tab },
+          template:   `
+            <Tab name="tab1" label="Tab 1" />
+            <Tab name="tab2" label="Tab 2" />
+          `,
+        },
+      },
+      global: { ...defaultGlobalMountOptions },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(findTabNav(wrapper).exists()).toBe(true);
+  });
+
+  it('should NOT display tab navigation for a single tab when hideSingleTab is true', async() => {
+    const wrapper = mount(Tabbed, {
+      props:  { hideSingleTab: true },
+      slots:  { default: { components: { Tab }, template: '<Tab name="tab1" label="Tab 1" />' } },
+      global: { ...defaultGlobalMountOptions },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(findTabNav(wrapper).exists()).toBe(false);
+  });
+
+  it('should display tab navigation for multiple tabs when hideSingleTab is true', async() => {
+    const wrapper = mount(Tabbed, {
+      props: { hideSingleTab: true },
+      slots: {
+        default: {
+          components: { Tab },
+          template:   `
+            <Tab name="tab1" label="Tab 1" />
+            <Tab name="tab2" label="Tab 2" />
+          `,
+        },
+      },
+      global: { ...defaultGlobalMountOptions },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(findTabNav(wrapper).exists()).toBe(true);
+  });
+});

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

@@ -56,11 +56,13 @@ export default {
 
   data() {
     return {
-      principals:     null,
-      searchStr:      '',
-      options:        [],
-      newValue:       '',
-      tooltipContent: null,
+      principals:        null,
+      searchStr:         '',
+      options:           [],
+      newValue:          '',
+      tooltipContent:    null,
+      hasSearchTooShort: false,
+      minSearchLength:   2,
     };
   },
 
@@ -133,9 +135,20 @@ export default {
       this.searchStr = str;
 
       if ( str ) {
+        // Backend requires minimum 2 characters for search
+        if (str.length < this.minSearchLength) {
+          this.hasSearchTooShort = true;
+          this.options = [];
+          loading(false);
+
+          return;
+        }
+
+        this.hasSearchTooShort = false;
         loading(true);
         this.debouncedSearch(str, loading);
       } else {
+        this.hasSearchTooShort = false;
         this.search(null, loading);
       }
     },
@@ -162,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 = [];
@@ -196,7 +213,12 @@ export default {
     @on-close="setTooltipContent()"
   >
     <template v-slot:no-options="{ searching }">
-      <template v-if="searching">
+      <template v-if="hasSearchTooShort">
+        <span class="search-slot">
+          {{ t('cluster.memberRoles.addClusterMember.minCharacters', { count: minSearchLength }) }}
+        </span>
+      </template>
+      <template v-else-if="searching">
         <span class="search-slot">
           {{ t('cluster.memberRoles.addClusterMember.noResults') }}
         </span>

package/components/auth/__tests__/SelectPrincipal.test.ts

@@ -0,0 +1,119 @@
+import { shallowMount, type VueWrapper } from '@vue/test-utils';
+import SelectPrincipal from '@shell/components/auth/SelectPrincipal.vue';
+
+describe('component: SelectPrincipal', () => {
+  const mockStore = { dispatch: jest.fn().mockResolvedValue([]) };
+
+  const defaultMountOptions = {
+    global: {
+      mocks: {
+        $fetchState: { pending: false },
+        $store:      mockStore,
+        t:           (key: string, opts?: any) => opts?.count ? `${ key } ${ opts.count }` : key,
+      },
+      stubs: {
+        LabeledSelect: {
+          template: '<div class="labeled-select-stub"><slot name="no-options" :searching="searching" /></div>',
+          props:    ['options', 'searchable', 'filterable'],
+          data() {
+            return { searching: false };
+          }
+        },
+        Principal: true,
+      },
+    },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockStore.dispatch.mockResolvedValue([]);
+  });
+
+  describe('onSearch', () => {
+    it('should set hasSearchTooShort to true when search string is less than minSearchLength', async() => {
+      const wrapper: VueWrapper<any> = shallowMount(SelectPrincipal, defaultMountOptions);
+
+      // Set principals to an empty array to avoid null errors
+      wrapper.vm.principals = [];
+      await wrapper.vm.$nextTick();
+
+      const loadingFn = jest.fn();
+
+      wrapper.vm.onSearch('a', loadingFn);
+
+      expect(wrapper.vm.hasSearchTooShort).toBe(true);
+      expect(wrapper.vm.options).toStrictEqual([]);
+      expect(loadingFn).toHaveBeenCalledWith(false);
+    });
+
+    it('should set hasSearchTooShort to false when search string meets minSearchLength', async() => {
+      const wrapper: VueWrapper<any> = shallowMount(SelectPrincipal, defaultMountOptions);
+
+      wrapper.vm.principals = [];
+      await wrapper.vm.$nextTick();
+
+      const loadingFn = jest.fn();
+
+      wrapper.vm.onSearch('ab', loadingFn);
+
+      expect(wrapper.vm.hasSearchTooShort).toBe(false);
+      expect(loadingFn).toHaveBeenCalledWith(true);
+    });
+
+    it('should set hasSearchTooShort to false when search string is empty', async() => {
+      const wrapper: VueWrapper<any> = shallowMount(SelectPrincipal, defaultMountOptions);
+
+      wrapper.vm.principals = [];
+      await wrapper.vm.$nextTick();
+
+      // First set hasSearchTooShort to true
+      wrapper.vm.hasSearchTooShort = true;
+
+      const loadingFn = jest.fn();
+
+      wrapper.vm.onSearch('', loadingFn);
+
+      expect(wrapper.vm.hasSearchTooShort).toBe(false);
+    });
+
+    it('should not call debouncedSearch when search string is too short', async() => {
+      const wrapper: VueWrapper<any> = shallowMount(SelectPrincipal, defaultMountOptions);
+
+      wrapper.vm.principals = [];
+      await wrapper.vm.$nextTick();
+
+      // Spy on the debounced search
+      const debouncedSearchSpy = jest.spyOn(wrapper.vm, 'debouncedSearch');
+      const loadingFn = jest.fn();
+
+      wrapper.vm.onSearch('x', loadingFn);
+
+      expect(debouncedSearchSpy).not.toHaveBeenCalled();
+    });
+
+    it('should call debouncedSearch when search string meets minimum length', async() => {
+      const wrapper: VueWrapper<any> = shallowMount(SelectPrincipal, defaultMountOptions);
+
+      wrapper.vm.principals = [];
+      await wrapper.vm.$nextTick();
+
+      const debouncedSearchSpy = jest.spyOn(wrapper.vm, 'debouncedSearch');
+      const loadingFn = jest.fn();
+
+      wrapper.vm.onSearch('xy', loadingFn);
+
+      expect(debouncedSearchSpy).toHaveBeenCalledWith('xy', loadingFn);
+    });
+  });
+
+  describe('minSearchLength', () => {
+    it('should have a default minSearchLength of 2', async() => {
+      const wrapper: VueWrapper<any> = shallowMount(SelectPrincipal, defaultMountOptions);
+
+      wrapper.vm.principals = [];
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.minSearchLength).toBe(2);
+    });
+  });
+});

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>