@rancher/shell 3.0.7 → 3.0.8-rc.10

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

package/components/formatter/Autoscaler.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import PopoverCard from '@shell/components/PopoverCard.vue';
+import { computed } from 'vue';
+import RcButton from '@components/RcButton/RcButton.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+import AutoscalerCard from '@shell/components/AutoscalerCard.vue';
+
+export interface Props {
+  value: string | boolean;
+  row: any;
+}
+
+export interface Detail {
+  label: string;
+  value?: string | { component: any; props: any };
+}
+
+const props = withDefaults(defineProps<Props>(), { value: true });
+const store = useStore();
+const i18n = useI18n(store);
+
+const checked = computed(() => props.value === true || props.value === 'true');
+const actionIcon = computed(() => props.row.isAutoscalerPaused ? 'icon-play' : 'icon-pause');
+const actionText = computed(() => props.row.isAutoscalerPaused ? i18n.t('autoscaler.card.resume') : i18n.t('autoscaler.card.pause'));
+const stopPropagation = (event: Event) => {
+  // This is to prevent click events from getting to the table row which ends up selecting the row
+  event.stopPropagation();
+};
+</script>
+
+<template>
+  <span
+    v-if="checked"
+    class="autoscaler"
+    @click="stopPropagation"
+  >
+    <PopoverCard
+      :card-title="i18n.t('autoscaler.card.title')"
+      fallback-focus=".autoscaler .action"
+    >
+      <i class="icon icon-checkmark" />
+      <template
+        v-if="props.row.canExplore"
+        #heading-action="{close}"
+      >
+        <RcButton
+          v-if="row.canPauseResumeAutoscaler"
+          secondary
+          small
+          class="action"
+          @click="() => {props.row.toggleAutoscalerRunner(); close()}"
+        >
+          <i :class="`icon ${actionIcon} icon-sm`" />
+          {{ actionText }}
+        </RcButton>
+      </template>
+      <template #card-body>
+        <AutoscalerCard :value="props.row" />
+      </template>
+    </PopoverCard>
+  </span>
+  <span
+    v-else
+    class="text-muted autoscaler"
+  >
+    &mdash;
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.autoscaler {
+  &:deep() {
+    .heading {
+      height: 24px;
+
+      .title {
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 24px;
+      }
+    }
+
+    button.btn.action {
+      line-height: 15px;
+      font-size: 12px;
+      height: 24px;
+      min-height: initial;
+      padding: 0 8px;
+
+      i {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+</style>