@rancher/shell 3.0.7 → 3.0.8-rc.10

package/components/__tests__/PopoverCard.test.ts

@@ -0,0 +1,204 @@
+
+import { mount } from '@vue/test-utils';
+import PopoverCard from '@shell/components/PopoverCard.vue';
+
+const mockFocusTrap = jest.fn();
+
+jest.mock('@shell/composables/focusTrap', () => ({
+  ...jest.requireActual('@shell/composables/focusTrap'), // Keep DEFAULT_FOCUS_TRAP_OPTS
+  useWatcherBasedSetupFocusTrapWithDestroyIncluded: (...args: any[]) => mockFocusTrap(...args),
+}));
+
+const VDropdownStub = {
+  props:    ['shown'],
+  template: `
+    <div>
+      <slot />
+      <div v-if="shown">
+        <slot name="popper" />
+      </div>
+    </div>
+  `,
+};
+
+describe('component: PopoverCard.vue', () => {
+  const createWrapper = (props = {}, slots = {}) => {
+    return mount(PopoverCard, {
+      props: {
+        cardTitle: 'Test Title',
+        ...props,
+      },
+      slots,
+      global: {
+        stubs: {
+          VDropdown: VDropdownStub,
+          Card:      {
+            template: `
+              <div>
+                <slot name="heading-action" />
+                <slot />
+              </div>
+            `,
+          },
+          RcButton: { template: '<button><slot /></button>' },
+        },
+      }
+    });
+  };
+
+  beforeEach(() => {
+    mockFocusTrap.mockClear();
+  });
+
+  describe('props', () => {
+    it('should use default props', () => {
+      const wrapper = createWrapper();
+      const button = wrapper.find('button');
+
+      expect(button.attributes('aria-label')).toBe('Show more');
+    });
+
+    it('should accept and render custom props', () => {
+      const props = {
+        cardTitle:            'My Custom Title',
+        showPopoverAriaLabel: 'Click for details'
+      };
+      const wrapper = createWrapper(props);
+      const button = wrapper.find('button');
+
+      expect(button.attributes('aria-label')).toBe(props.showPopoverAriaLabel);
+      // Note: cardTitle is passed to the Card component inside the popper,
+      // which is only rendered when the popover is shown.
+    });
+  });
+
+  describe('popover Visibility', () => {
+    it('should not be visible initially', () => {
+      const wrapper = createWrapper();
+
+      expect(wrapper.find('[id="popover-card"]').exists()).toBe(false);
+    });
+
+    it('should show on mouseenter and hide on mouseleave', async() => {
+      const wrapper = createWrapper();
+      const target = wrapper.find('.popover-card-target');
+
+      await target.trigger('mouseenter');
+      expect(wrapper.vm.showPopover).toBe(true);
+
+      const root = wrapper.find('.popover-card-base');
+
+      await root.trigger('mouseleave');
+      expect(wrapper.vm.showPopover).toBe(false);
+    });
+
+    it('should show on button click', async() => {
+      const wrapper = createWrapper();
+      const button = wrapper.find('button');
+
+      await button.trigger('click');
+      expect(wrapper.vm.showPopover).toBe(true);
+      expect(wrapper.vm.focusOpen).toBe(true);
+    });
+
+    it('should hide on Escape keydown', async() => {
+      const wrapper = createWrapper();
+
+      // Open it first
+      await wrapper.find('button').trigger('click');
+      expect(wrapper.vm.showPopover).toBe(true);
+      expect(wrapper.vm.focusOpen).toBe(true);
+
+      // Trigger escape
+      const root = wrapper.find('.popover-card-base');
+
+      await root.trigger('keydown.escape');
+
+      expect(wrapper.vm.showPopover).toBe(false);
+      expect(wrapper.vm.focusOpen).toBe(false);
+    });
+  });
+
+  describe('focus Trap', () => {
+    it('should NOT setup focus trap on mouseenter', async() => {
+      const wrapper = createWrapper();
+      const target = wrapper.find('.popover-card-target');
+
+      await target.trigger('mouseenter');
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.focusOpen).toBe(false);
+      expect(mockFocusTrap).not.toHaveBeenCalled();
+    });
+
+    it('should setup focus trap when opened via click', async() => {
+      const wrapper = createWrapper({ fallbackFocus: '#my-fallback' });
+      const button = wrapper.find('button');
+
+      await button.trigger('click');
+      await wrapper.vm.$nextTick(); // Let watcher for `card` run
+
+      expect(wrapper.vm.focusOpen).toBe(true);
+      expect(mockFocusTrap).toHaveBeenCalledTimes(1);
+
+      // Check arguments passed to the composable
+      const focusTrapOptions = mockFocusTrap.mock.calls[0][2];
+
+      expect(focusTrapOptions.fallbackFocus).toBe('#my-fallback');
+      expect(focusTrapOptions.setReturnFocus()).toBe('.focus-button');
+    });
+  });
+
+  describe('slots', () => {
+    it('should render the default slot content', () => {
+      const wrapper = createWrapper({}, { default: '<span class="default-slot-content">Hello</span>' });
+
+      expect(wrapper.find('.default-slot-content').exists()).toBe(true);
+      expect(wrapper.find('.default-slot-content').text()).toBe('Hello');
+    });
+
+    it('should render the card-body slot content', async() => {
+      const wrapper = createWrapper({}, { 'card-body': '<div class="card-body-content">Card Body</div>' });
+
+      // Open popover to render the slot
+      await wrapper.find('button').trigger('click');
+
+      expect(wrapper.find('.card-body-content').exists()).toBe(true);
+      expect(wrapper.find('.card-body-content').text()).toBe('Card Body');
+    });
+
+    it('should pass a close function to the heading-action slot', async() => {
+      const wrapper = createWrapper({}, {
+        'heading-action': `
+          <template #heading-action="{ close }">
+            <button class="close-button" @click="close">Close</button>
+          </template>
+        `
+      });
+
+      // Open popover
+      await wrapper.find('button').trigger('click');
+      expect(wrapper.vm.showPopover).toBe(true);
+      expect(wrapper.vm.focusOpen).toBe(true);
+
+      // Click the button that uses the `close` slot prop
+      await wrapper.find('.close-button').trigger('click');
+
+      // Due to the bug, this should be true, not false
+      expect(wrapper.vm.showPopover).toBe(false);
+      expect(wrapper.vm.focusOpen).toBe(false);
+    });
+
+    it('should allow overriding the entire card via the card slot', async() => {
+      const wrapper = createWrapper({}, { card: '<div class="custom-card">My Custom Card</div>' });
+
+      // Open popover
+      await wrapper.find('button').trigger('click');
+
+      expect(wrapper.find('.custom-card').exists()).toBe(true);
+      expect(wrapper.find('.custom-card').text()).toBe('My Custom Card');
+      // The default Card component should not be rendered
+      expect(wrapper.find('[id="popover-card"]').exists()).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);
       }
     },
@@ -196,7 +209,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/fleet/FleetConfigMapSelector.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { _EDIT } from '@shell/config/query-params';
+import { CONFIG_MAP } from '@shell/config/types';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect.vue';
+
+interface ConfigMap {
+  id?: string;
+  name: string;
+  namespace: string;
+}
+
+const props = defineProps({
+  value: {
+    type:     Object,
+    required: true,
+  },
+  namespace: {
+    type:     String,
+    required: true,
+  },
+  inStore: {
+    type:    String,
+    default: 'management',
+  },
+  mode: {
+    type:    String,
+    default: _EDIT
+  },
+  label: {
+    type:    String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:value']);
+
+const configMaps = ref<ConfigMap[]>([]);
+
+const allConfigMapsSettings = {
+  updateResources: (configMapsList: ConfigMap[]) => {
+    const allConfigMapsInNamespace = configMapsList.filter((configMap) => configMap.namespace === props.namespace);
+    const mappedConfigMaps = mapConfigMaps(allConfigMapsInNamespace.sort((a, b) => a.name.localeCompare(b.name)));
+
+    configMaps.value = allConfigMapsInNamespace;
+
+    return mappedConfigMaps;
+  }
+};
+
+const paginateConfigMapsSetting = {
+  requestSettings: paginatePageOptions,
+  updateResources: (configMapsList: ConfigMap[]) => {
+    const mappedConfigMaps = mapConfigMaps(configMapsList);
+
+    configMaps.value = configMapsList;
+
+    return mappedConfigMaps;
+  }
+};
+
+function mapConfigMaps(configMapsList: ConfigMap[]) {
+  return configMapsList.reduce<{ label: string; value: string }[]>((res, c) => {
+    if (c.id) {
+      res.push({ label: c.name, value: c.name });
+    } else {
+      res.push(c as any);
+    }
+
+    return res;
+  }, []);
+}
+
+function paginatePageOptions(opts: any) {
+  const { opts: { filter } } = opts;
+
+  const filters = !!filter ? [PaginationParamFilter.createSingleField({
+    field: 'metadata.name', value: filter, exact: false, equals: true
+  })] : [];
+
+  filters.push(
+    PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: props.namespace }),
+  );
+
+  return {
+    ...opts,
+    filters,
+    groupByNamespace: false,
+    classify:         true,
+    sort:             [{ asc: true, field: 'metadata.name' }],
+  };
+}
+
+function update(value: any) {
+  emit('update:value', value);
+}
+</script>
+
+<template>
+  <ResourceLabeledSelect
+    :key="namespace"
+    :value="value"
+    :label="label || t('fleet.configMaps.label')"
+    :mode="mode"
+    :resource-type="CONFIG_MAP"
+    :loading="$fetchState.pending"
+    :in-store="inStore"
+    :paginated-resource-settings="paginateConfigMapsSetting"
+    :all-resources-settings="allConfigMapsSettings"
+    :multiple="true"
+    @update:value="update"
+  />
+</template>
+
+<style lang="scss" scoped>
+</style>

package/components/fleet/FleetSecretSelector.vue

@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+import { ref, computed, defineProps, defineEmits } from 'vue';
+import { _EDIT } from '@shell/config/query-params';
+import { TYPES } from '@shell/models/secret';
+import { SECRET } from '@shell/config/types';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect.vue';
+
+interface Secret {
+  id?: string;
+  name: string;
+  namespace: string;
+  _type: string;
+}
+
+const props = defineProps({
+  value: {
+    type:     Object,
+    required: true,
+  },
+  namespace: {
+    type:     String,
+    required: true,
+  },
+  inStore: {
+    type:    String,
+    default: 'management',
+  },
+  mode: {
+    type:    String,
+    default: _EDIT
+  },
+  label: {
+    type:    String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:value']);
+
+const types = computed<string[]>(() => Object.values(TYPES));
+
+const secrets = ref<Secret[]>([]);
+
+const allSecretsSettings = {
+  updateResources: (secretsList: Secret[]) => {
+    const allSecretsInNamespace = secretsList.filter((secret) => types.value.includes(secret._type) && secret.namespace === props.namespace);
+    const mappedSecrets = mapSecrets(allSecretsInNamespace.sort((a, b) => a.name.localeCompare(b.name)));
+
+    secrets.value = allSecretsInNamespace;
+
+    return mappedSecrets;
+  }
+};
+
+const paginateSecretsSetting = {
+  requestSettings: paginatePageOptions,
+  updateResources: (secretsList: Secret[]) => {
+    const mappedSecrets = mapSecrets(secretsList);
+
+    secrets.value = secretsList;
+
+    return mappedSecrets;
+  }
+};
+
+function mapSecrets(secretsList: Secret[]) {
+  return secretsList.reduce<{ label: string; value: string }[]>((res, s) => {
+    if (s.id) {
+      res.push({ label: s.name, value: s.name });
+    } else {
+      res.push(s as any);
+    }
+
+    return res;
+  }, []);
+}
+
+function update(value: any) {
+  emit('update:value', value);
+}
+
+function paginatePageOptions(opts: any) {
+  const { opts: { filter } } = opts;
+
+  const filters = !!filter ? [PaginationParamFilter.createSingleField({
+    field: 'metadata.name', value: filter, exact: false, equals: true
+  })] : [];
+
+  filters.push(
+    PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: props.namespace }),
+    PaginationParamFilter.createMultipleFields(types.value.map((t) => ({
+      field:  'metadata.fields.1',
+      equals: true,
+      exact:  true,
+      value:  t
+    })))
+  );
+
+  return {
+    ...opts,
+    filters,
+    groupByNamespace: false,
+    classify:         true,
+    sort:             [{ asc: true, field: 'metadata.name' }],
+  };
+}
+</script>
+
+<template>
+  <ResourceLabeledSelect
+    :key="namespace"
+    :value="value"
+    :label="label || t('fleet.secrets.label')"
+    :mode="mode"
+    :resource-type="SECRET"
+    :loading="$fetchState.pending"
+    :in-store="inStore"
+    :paginated-resource-settings="paginateSecretsSetting"
+    :all-resources-settings="allSecretsSettings"
+    :multiple="true"
+    @update:value="update"
+  />
+</template>
+
+<style lang="scss" scoped>
+</style>