@rancher/shell 3.0.6 → 3.0.8-rc.1

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>

package/components/fleet/__tests__/FleetConfigMapSelector.test.ts

@@ -0,0 +1,125 @@
+import { shallowMount } from '@vue/test-utils';
+import { _EDIT } from '@shell/config/query-params';
+import FleetConfigMapSelector from '@shell/components/fleet/FleetConfigMapSelector.vue';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect.vue';
+
+describe('fleetConfigMapSelector.vue', () => {
+  const defaultProps = {
+    value:     {},
+    namespace: 'fleet-default',
+    inStore:   'management',
+    mode:      _EDIT,
+    label:     'Config Map',
+  };
+
+  const global = {
+    stubs: { ResourceLabeledSelect },
+    mocks: {
+      $fetchState: { pending: false },
+      $store:      { getters: { 'management/all': () => [] } },
+    },
+  };
+
+  it('should emit update:value when update is called', async() => {
+    const wrapper = shallowMount(FleetConfigMapSelector, {
+      props: defaultProps,
+      global,
+    });
+
+    const vm = wrapper.vm as any;
+
+    await vm.update('cm1');
+
+    expect(wrapper.emitted('update:value')).toBeTruthy();
+    expect(wrapper.emitted('update:value')?.[0]).toStrictEqual(['cm1']);
+  });
+
+  it('should correctly map configMaps', () => {
+    const wrapper = shallowMount(FleetConfigMapSelector, {
+      props: defaultProps,
+      global
+    });
+
+    const configMapsList = [
+      {
+        id: '1', name: 'cm1', namespace: 'fleet-default'
+      },
+      { name: 'cm2', namespace: 'fleet-default' }
+    ];
+
+    const vm = wrapper.vm as any;
+    const result = vm.mapConfigMaps(configMapsList);
+
+    expect(result).toStrictEqual([
+      { label: 'cm1', value: 'cm1' },
+      { name: 'cm2', namespace: 'fleet-default' }
+    ]);
+  });
+
+  it('should return correct filter options from paginatePageOptions', () => {
+    const wrapper = shallowMount(FleetConfigMapSelector, {
+      props: defaultProps,
+      global
+    });
+
+    const opts = { opts: { filter: 'test' } };
+
+    const vm = wrapper.vm as any;
+    const result = vm.paginatePageOptions(opts);
+
+    expect(result.filters).toHaveLength(2);
+    expect(result.groupByNamespace).toStrictEqual(false);
+    expect(result.classify).toStrictEqual(true);
+    expect(result.sort).toStrictEqual([{ asc: true, field: 'metadata.name' }]);
+  });
+
+  it('should correctly filter and map configMaps in allConfigMapsSettings.updateResources', () => {
+    const wrapper = shallowMount(FleetConfigMapSelector, {
+      props: defaultProps,
+      global
+    });
+
+    const configMapsList = [
+      {
+        id: '1', name: 'cm1', namespace: 'fleet-default'
+      },
+      {
+        id: '2', name: 'cm2', namespace: 'other'
+      }
+    ];
+
+    const vm = wrapper.vm as any;
+
+    const result = vm.allConfigMapsSettings.updateResources(configMapsList);
+
+    expect(result).toStrictEqual([{ label: 'cm1', value: 'cm1' }]);
+    expect(vm.configMaps).toStrictEqual([{
+      id: '1', name: 'cm1', namespace: 'fleet-default'
+    }]);
+  });
+
+  it('should correctly map configMaps in paginateConfigMapsSetting.updateResources', () => {
+    const wrapper = shallowMount(FleetConfigMapSelector, {
+      props: defaultProps,
+      global
+    });
+
+    const configMapsList = [
+      {
+        id: '1', name: 'cm1', namespace: 'fleet-default'
+      },
+      {
+        id: '2', name: 'cm2', namespace: 'fleet-default'
+      }
+    ];
+
+    const vm = wrapper.vm as any;
+    const result = vm.paginateConfigMapsSetting.updateResources(configMapsList);
+
+    expect(result).toStrictEqual([
+      { label: 'cm1', value: 'cm1' },
+      { label: 'cm2', value: 'cm2' }
+    ]);
+    expect(vm.configMaps).toStrictEqual(configMapsList);
+  });
+});

package/components/fleet/__tests__/FleetSecretSelector.test.ts

@@ -0,0 +1,82 @@
+import { shallowMount } from '@vue/test-utils';
+import FleetSecretSelector from '@shell/components/fleet/FleetSecretSelector.vue';
+import { _EDIT } from '@shell/config/query-params';
+
+describe('component: FleetSecretSelector.vue', () => {
+  const secretsMock = [
+    {
+      id: '1', name: 'secret1', namespace: 'fleet-default', _type: 'Opaque'
+    },
+    {
+      id: '2', name: 'secret2', namespace: 'fleet-default', _type: 'Opaque'
+    },
+    {
+      id: '3', name: 'secret3', namespace: 'other', _type: 'Opaque'
+    },
+  ];
+
+  const props = {
+    value:     {},
+    namespace: 'fleet-default',
+    inStore:   'management',
+    mode:      _EDIT,
+  };
+
+  const global = { mocks: { $fetchState: { pending: false, error: false } } };
+
+  it('should emit update:value when update is called', async() => {
+    const wrapper = shallowMount(FleetSecretSelector, { props, global });
+
+    await (wrapper.vm as any).update('secret1');
+
+    expect(wrapper.emitted('update:value')).toBeTruthy();
+    expect(wrapper.emitted('update:value')?.[0]).toStrictEqual(['secret1']);
+  });
+
+  it('should correctly map secrets', () => {
+    const wrapper = shallowMount(FleetSecretSelector, { props, global });
+    const mapped = (wrapper.vm as any).mapSecrets(secretsMock);
+
+    expect(mapped).toStrictEqual([
+      { label: 'secret1', value: 'secret1' },
+      { label: 'secret2', value: 'secret2' },
+      { label: 'secret3', value: 'secret3' }
+    ]);
+  });
+
+  it('should filter and sort secrets by namespace and type', () => {
+    const wrapper = shallowMount(FleetSecretSelector, { props, global });
+
+    const result = (wrapper.vm as any).allSecretsSettings.updateResources(secretsMock);
+
+    expect(result).toStrictEqual([
+      { label: 'secret1', value: 'secret1' },
+      { label: 'secret2', value: 'secret2' }
+    ]);
+    expect((wrapper.vm as any).secrets).toStrictEqual([
+      {
+        id: '1', name: 'secret1', namespace: 'fleet-default', _type: 'Opaque'
+      },
+      {
+        id: '2', name: 'secret2', namespace: 'fleet-default', _type: 'Opaque'
+      }
+    ]);
+  });
+
+  it('should return correct filter structure from paginatePageOptions', () => {
+    const wrapper = shallowMount(FleetSecretSelector, { props, global });
+
+    const opts = { opts: { filter: 'secret' } };
+    const result = (wrapper.vm as any).paginatePageOptions(opts);
+
+    expect(result.filters).toStrictEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ fields: expect.arrayContaining([expect.objectContaining({ field: 'metadata.name' })]) }),
+        expect.objectContaining({ fields: expect.arrayContaining([expect.objectContaining({ field: 'metadata.namespace' })]) }),
+        expect.objectContaining({ fields: expect.arrayContaining([expect.objectContaining({ field: 'metadata.fields.1' })]) }),
+      ])
+    );
+
+    expect(result.sort).toStrictEqual([{ asc: true, field: 'metadata.name' }]);
+  });
+});

package/components/form/FileImageSelector.vue

@@ -7,7 +7,8 @@ export default {
   emits: ['update:value', 'error'],
 
   components: { FileSelector, LazyImage },
-  props:      {
+
+  props: {
     value: {
       type:    String,
       default: null,
@@ -36,12 +37,20 @@ export default {
     accept: {
       type:    String,
       default: 'image/*'
-    }
+    },
+
+    class: {
+      type:    [String, Array],
+      default: 'role-primary',
+    },
   },
   computed: {
     isView() {
       return this.mode === _VIEW;
-    }
+    },
+    customClass() {
+      return [...(Array.isArray(this.class) ? this.class : [this.class])];
+    },
   },
   methods: {
     /**
@@ -62,7 +71,7 @@ export default {
   <FileSelector
     v-if="!value && !isView"
     :value="value"
-    class="btn role-primary"
+    :class="customClass"
     :mode="mode"
     :read-as-data-url="true"
     :byte-limit="byteLimit"

package/components/form/FileSelector.vue

@@ -67,12 +67,21 @@ export default {
       default: '*'
     },
 
+    class: {
+      type:    [String, Array],
+      default: () => [],
+    }
+
   },
 
   computed: {
     isView() {
       return this.mode === _VIEW;
-    }
+    },
+
+    customClass() {
+      return ['file-selector', 'btn', ...(Array.isArray(this.class) ? this.class : [this.class])];
+    },
   },
 
   methods: {
@@ -151,7 +160,7 @@ export default {
     :aria-label="label"
     type="button"
     role="button"
-    class="file-selector btn"
+    :class="customClass"
     data-testid="file-selector__uploader-button"
     @click="selectFile"
   >

package/components/form/ResourceLabeledSelect.vue

@@ -163,6 +163,7 @@ export default defineComponent({
     :loading="$fetchState.pending"
     :options="allOfType"
     :paginate="paginateType"
+    :multiple="$attrs.multiple || false"
     @update:value="$emit('update:value', $event)"
   />
 </template>

package/components/form/ResourceTabs/index.vue

@@ -7,14 +7,14 @@ import Tabbed from '@shell/components/Tabbed';
 import Tab from '@shell/components/Tabbed/Tab';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import Conditions from '@shell/components/form/Conditions';
-import { EVENT } from '@shell/config/types';
+import { EVENT, NAMESPACE } from '@shell/config/types';
 import PaginatedResourceTable from '@shell/components/PaginatedResourceTable.vue';
 import { _VIEW } from '@shell/config/query-params';
 import RelatedResources from '@shell/components/RelatedResources';
 import { isConditionReadyAndWaiting } from '@shell/plugins/dashboard-store/resource-class';
 import { PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { MESSAGE, REASON } from '@shell/config/table-headers';
-import { STEVE_EVENT_LAST_SEEN, STEVE_EVENT_TYPE, STEVE_NAME_COL } from '@shell/config/pagination-table-headers';
+import { STEVE_EVENT_FIRST_SEEN, STEVE_EVENT_LAST_SEEN, STEVE_EVENT_TYPE, STEVE_NAME_COL } from '@shell/config/pagination-table-headers';
 import { headerFromSchemaColString } from '@shell/store/type-map.utils';
 import { useIndicateUseCounts } from '@shell/components/form/ResourceTabs/composable';
 
@@ -93,7 +93,7 @@ export default {
       headerFromSchemaColString('Subobject', eventSchema, this.$store.getters, true),
       headerFromSchemaColString('Source', eventSchema, this.$store.getters, true),
       MESSAGE,
-      headerFromSchemaColString('First Seen', eventSchema, this.$store.getters, true),
+      STEVE_EVENT_FIRST_SEEN,
       headerFromSchemaColString('Count', eventSchema, this.$store.getters, true),
       STEVE_NAME_COL,
     ] : [];
@@ -119,6 +119,9 @@ export default {
   },
 
   computed: {
+    isNamespace() {
+      return this.value?.type === NAMESPACE;
+    },
     showEvents() {
       return this.isView && this.needEvents && this.eventSchema;
     },
@@ -190,7 +193,9 @@ export default {
      * Filter out hidden repos from list of all repos
      */
     filterEventsLocal(rows) {
-      return rows.filter((event) => event.involvedObject?.uid === this.value?.metadata?.uid);
+      return rows.filter((event) => {
+        return this.isNamespace ? event.metadata?.namespace === this.value?.metadata?.name : event.involvedObject?.uid === this.value?.metadata?.uid;
+      });
     },
 
     /**
@@ -204,27 +209,22 @@ export default {
         pagination.filters = [];
       }
 
-      const field = `involvedObject.uid`;
-
-      // of type PaginationParamFilter
-      let existing = null;
-
-      for (let i = 0; i < pagination.filters.length; i++) {
-        const filter = pagination.filters[i];
+      // Determine the field and value based on type
+      const field = this.isNamespace ? 'metadata.namespace' : 'involvedObject.uid';
+      const value = this.isNamespace ? this.value.metadata.name : this.value.metadata.uid;
 
-        if (!!filter.fields.find((f) => f.field === field)) {
-          existing = filter;
-          break;
-        }
-      }
+      // Check if a filter for this field already exists
+      const existing = pagination.filters.find((f) => f.fields.some((ff) => ff.field === field));
 
+      // Create the required filter
       const required = PaginationParamFilter.createSingleField({
         field,
         exact:  true,
-        value:  this.value.metadata.uid,
+        value,
         equals: true
       });
 
+      // Merge or add the filter
       if (!!existing) {
         Object.assign(existing, required);
       } else {
@@ -260,10 +260,16 @@ export default {
 
     <Tab
       v-if="showEvents"
-      label-key="resourceTabs.events.tab"
+      :label="isNamespace ? t('resourceTabs.events.namespaceTab') : t('resourceTabs.events.tab')"
       name="events"
       :weight="-2"
     >
+      <!-- Caption for namespace pages -->
+      <div
+        v-if="isNamespace"
+        v-clean-html="t('resourceTabs.events.namespaceCaption', { namespace: value.metadata.name }, true)"
+        class="tab-caption"
+      />
       <!-- namespaced: false given we don't want the default handling of namespaced resource (apply header filter)  -->
       <PaginatedResourceTable
         :schema="eventSchema"
@@ -318,4 +324,17 @@ export default {
     }
   }
 }
+/* Caption for namespace events tab */
+.tab-caption {
+  align-items: center;
+  font-size: 16px;
+  margin-bottom: 24px;
+
+  .namespace-name {
+    display: inline;
+    font-weight: bold;
+    margin-right: 0 4px;
+    white-space: nowrap;
+  }
+}
 </style>

package/components/form/SecretSelector.vue

@@ -61,7 +61,7 @@ export default {
     },
     inStore: {
       type:    String,
-      default: 'cluster',
+      default: undefined,
     }
   },
 
@@ -129,6 +129,10 @@ export default {
       }));
     },
 
+    validInStore() {
+      return this.inStore || this.$store.getters['currentStore']() || 'cluster';
+    },
+
     isView() {
       return this.mode === _VIEW;
     },
@@ -221,7 +225,7 @@ export default {
         :label="secretNameLabel"
         :mode="mode"
         :resource-type="SECRET"
-        :in-store="inStore"
+        :in-store="validInStore"
         :paginated-resource-settings="paginateSecretsSetting"
         :all-resources-settings="allSecretsSettings"
       />

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

@@ -0,0 +1,90 @@
+import { shallowMount } from '@vue/test-utils';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import { RESOURCE_LABEL_SELECT_MODE } from '@shell/types/components/resourceLabeledSelect';
+
+const mockStore = {
+  getters: {
+    currentStore:                jest.fn().mockReturnValue('cluster'),
+    'cluster/paginationEnabled': jest.fn().mockReturnValue(true),
+    'cluster/all':               jest.fn().mockReturnValue([{ id: 'foo', name: 'Foo' }]),
+  },
+  dispatch: jest.fn().mockResolvedValue(undefined),
+};
+
+const requiredSetup = () => {
+  return {
+    global: {
+      components: { LabeledSelect },
+      mocks:      { $store: mockStore, $fetchState: {} }
+    }
+  };
+};
+
+describe('component: ResourceLabeledSelect.vue', () => {
+  it('should render LabeledSelect', async() => {
+    const wrapper = shallowMount(ResourceLabeledSelect, {
+      ...requiredSetup(),
+      props: { resourceType: 'testResource' }
+    });
+
+    expect(wrapper.findComponent(LabeledSelect).exists()).toBe(true);
+  });
+
+  it('should call paginateType with overrideRequest if provided', async() => {
+    const overrideRequest = jest.fn().mockResolvedValue({ page: [{ id: 'bar', name: 'Bar' }], total: 1 });
+    const wrapper = shallowMount(ResourceLabeledSelect, {
+      ...requiredSetup(),
+      props: {
+        resourceType:              'testResource',
+        paginateMode:              RESOURCE_LABEL_SELECT_MODE.DYNAMIC,
+        paginatedResourceSettings: { overrideRequest }
+      }
+    });
+
+    const result = await wrapper.vm.paginateType({
+      filter:      'bar',
+      page:        1,
+      pageSize:    10,
+      pageContent: [],
+      resetPage:   false
+    });
+
+    expect(overrideRequest).toHaveBeenCalledWith({
+      filter:      'bar',
+      page:        1,
+      pageSize:    10,
+      pageContent: [],
+      resetPage:   false
+    });
+    expect(result.page[0].name).toBe('Bar');
+  });
+
+  it('should emit update:value when LabeledSelect emits update:value', async() => {
+    const wrapper = shallowMount(ResourceLabeledSelect, {
+      ...requiredSetup(),
+      props: { resourceType: 'testResource' }
+    });
+
+    wrapper.findComponent(LabeledSelect).vm.$emit('update:value', 'baz');
+
+    expect(wrapper.emitted('update:value')).toBeTruthy();
+    expect(wrapper.emitted('update:value')?.[0]).toStrictEqual(['baz']);
+  });
+
+  it('should pass correct props and attrs to LabeledSelect', async() => {
+    const wrapper = shallowMount(ResourceLabeledSelect, {
+      ...requiredSetup(),
+      props: {
+        resourceType:         'testResource',
+        allResourcesSettings: { labelSelectOptions: { placeholder: 'Select a resource' } }
+      },
+      attrs: { multiple: true }
+    });
+
+    const labeledSelect = wrapper.findComponent(LabeledSelect);
+
+    expect(labeledSelect.attributes('placeholder')).toBe('Select a resource');
+    expect(labeledSelect.attributes('multiple')).toBe('true');
+  });
+});