@rancher/shell 3.0.7 → 3.0.8-rc.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>

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/__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');
+  });
+});