@rancher/shell 3.0.3 → 3.0.5-rc.1

package/components/form/ValueFromResource.vue

@@ -4,6 +4,7 @@ import { get } from '@shell/utils/object';
 import { _VIEW } from '@shell/config/query-params';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { LabeledInput } from '@components/Form/LabeledInput';
+import { ref, toRef, watch } from 'vue';
 
 export default {
   emits: ['update:value', 'remove'],
@@ -44,84 +45,164 @@ export default {
   },
 
   data() {
-    const typeOpts = [
-      { value: 'simple', label: 'Key/Value Pair' },
-      { value: 'resourceFieldRef', label: 'Resource' },
-      { value: 'configMapKeyRef', label: 'ConfigMap Key' },
-      { value: 'secretKeyRef', label: 'Secret key' },
-      { value: 'fieldRef', label: 'Pod Field' },
-      { value: 'secretRef', label: 'Secret' },
-      { value: 'configMapRef', label: 'ConfigMap' },
-    ];
-
-    const resourceKeyOpts = ['limits.cpu', 'limits.ephemeral-storage', 'limits.memory', 'requests.cpu', 'requests.ephemeral-storage', 'requests.memory'];
-    let type;
-
-    if (this.value.secretRef) {
-      type = 'secretRef';
-    } else if (this.value.configMapRef) {
-      type = 'configMapRef';
-    } else if (this.value.value) {
-      type = 'simple';
-    } else if (this.value.valueFrom) {
-      type = Object.keys((this.value.valueFrom))[0] || 'simple';
+    return {
+      typeOpts: [
+        { value: 'simple', label: 'Key/Value Pair' },
+        { value: 'resourceFieldRef', label: 'Resource' },
+        { value: 'configMapKeyRef', label: 'ConfigMap Key' },
+        { value: 'secretKeyRef', label: 'Secret key' },
+        { value: 'fieldRef', label: 'Pod Field' },
+        { value: 'secretRef', label: 'Secret' },
+        { value: 'configMapRef', label: 'ConfigMap' },
+      ],
+      secrets:         this.allSecrets,
+      resourceKeyOpts: ['limits.cpu', 'limits.ephemeral-storage', 'limits.memory', 'requests.cpu', 'requests.ephemeral-storage', 'requests.memory'],
+    };
+  },
+
+  setup(props, { emit }) {
+    const type = ref(null);
+
+    if (props.value.secretRef) {
+      type.value = 'secretRef';
+    } else if (props.value.configMapRef) {
+      type.value = 'configMapRef';
+    } else if (props.value.value) {
+      type.value = 'simple';
+    } else if (props.value.valueFrom) {
+      type.value = Object.keys((props.value.valueFrom))[0] || 'simple';
     }
 
-    let refName;
-    let name;
-    let fieldPath;
-    let referenced;
-    let key;
-    let valStr;
-    const keys = [];
+    const refName = ref('');
+    const name = ref('');
+    const fieldPath = ref('');
+    const referenced = ref(null);
+    const key = ref(null);
+    const valStr = ref('');
+    const keys = ref([]);
 
-    switch (type) {
+    switch (type.value) {
     case 'resourceFieldRef':
-      name = this.value.name;
-      refName = this.value.valueFrom[type].containerName;
-      key = this.value.valueFrom[type].resource || '';
+      name.value = toRef(props.value.name);
+      refName.value = toRef(props.value.valueFrom[type.value].containerName);
+      key.value = props.value.valueFrom[type.value].resource || '';
       break;
     case 'configMapKeyRef':
-      name = this.value.name;
-      key = this.value.valueFrom[type].key || '';
-      refName = this.value.valueFrom[type].name;
-      referenced = this.allConfigMaps.filter((resource) => {
-        return resource.metadata.name === refName;
+      name.value = toRef(props.value.name);
+      key.value = props.value.valueFrom[type.value].key || '';
+      refName.value = toRef(props.value.valueFrom[type.value].name);
+      referenced.value = props.allConfigMaps.filter((resource) => {
+        return resource.metadata.name === refName.value;
       })[0];
-      if (referenced && referenced.data) {
-        keys.push(...Object.keys(referenced.data));
+      if (referenced.value && referenced.value.data) {
+        keys.value.push(...Object.keys(referenced.value.data));
       }
       break;
     case 'secretRef':
     case 'configMapRef':
-      name = this.value.prefix;
-      refName = this.value[type].name;
+      name.value = toRef(props.value.prefix);
+      refName.value = toRef(props.value[type.value].name);
       break;
     case 'secretKeyRef':
-      name = this.value.name;
-      key = this.value.valueFrom[type].key || '';
-      refName = this.value.valueFrom[type].name;
-      referenced = this.allSecrets.filter((resource) => {
-        return resource.metadata.name === refName;
+      name.value = toRef(props.value.name);
+      key.value = props.value.valueFrom[type.value].key || '';
+      refName.value = toRef(props.value.valueFrom[type.value].name);
+      referenced.value = props.allSecrets.filter((resource) => {
+        return resource.metadata.name === refName.value;
       })[0];
-      if (referenced && referenced.data) {
-        keys.push(...Object.keys(referenced.data));
+      if (referenced.value && referenced.value.data) {
+        keys.value.push(...Object.keys(referenced.value.data));
       }
       break;
     case 'fieldRef':
-      fieldPath = get(this.value.valueFrom, `${ type }.fieldPath`) || '';
-      name = this.value.name;
+      fieldPath.value = get(props.value.valueFrom, `${ type.value }.fieldPath`) || '';
+      name.value = toRef(props.value.name);
       break;
     default:
-      name = this.value.name;
-      valStr = this.value.value;
+      name.value = toRef(props.value.name);
+      valStr.value = toRef(props.value.value);
       break;
     }
 
+    referenced.value = refName.value;
+
+    const updateRow = () => {
+      if (!name.value?.length && !refName.value?.length) {
+        if (type.value !== 'fieldRef') {
+          emit('update:value', null);
+
+          return;
+        }
+      }
+      let out = { name: name.value || refName.value };
+
+      switch (type.value) {
+      case 'configMapKeyRef':
+      case 'secretKeyRef':
+        out.valueFrom = {
+          [type.value]: {
+            key: key.value, name: refName.value, optional: false
+          }
+        };
+        break;
+      case 'resourceFieldRef':
+        out.valueFrom = {
+          [type.value]: {
+            containerName: refName.value, divisor: 1, resource: key.value
+          }
+        };
+        break;
+      case 'fieldRef':
+        if (!fieldPath.value || !fieldPath.value.length) {
+          out = null; break;
+        }
+        out.valueFrom = { [type.value]: { apiVersion: 'v1', fieldPath: fieldPath.value } };
+        break;
+      case 'simple':
+        out.value = valStr.value;
+        break;
+      default:
+        delete out.name;
+        out.prefix = name.value;
+        out[type.value] = { name: refName.value, optional: false };
+      }
+      emit('update:value', out);
+    };
+
+    watch(type, () => {
+      referenced.value = null;
+      key.value = '';
+      refName.value = '';
+      keys.value = [];
+      key.value = '';
+      valStr.value = '';
+      fieldPath.value = '';
+    });
+
+    watch(referenced, (neu, old) => {
+      if (neu) {
+        if ((neu.type === SECRET || neu.type === CONFIG_MAP) && neu.data) {
+          keys.value = Object.keys(neu.data);
+        }
+        refName.value = neu?.metadata?.name;
+      }
+      updateRow();
+    });
+
     return {
-      typeOpts, type, refName, referenced: refName, secrets: this.allSecrets, keys, key, fieldPath, name, resourceKeyOpts, valStr
+      type,
+      refName,
+      referenced,
+      keys,
+      key,
+      fieldPath,
+      name,
+      valStr,
+      updateRow,
+      get,
     };
   },
+
   computed: {
     isView() {
       return this.mode === _VIEW;
@@ -189,74 +270,6 @@ export default {
       return ['resourceFieldRef', 'configMapKeyRef', 'secretKeyRef'].includes(this.type);
     },
   },
-
-  watch: {
-    type() {
-      this.referenced = null;
-      this.key = '';
-      this.refName = '';
-      this.keys = [];
-      this.key = '';
-      this.valStr = '';
-      this.fieldPath = '';
-    },
-
-    referenced(neu, old) {
-      if (neu) {
-        if ((neu.type === SECRET || neu.type === CONFIG_MAP) && neu.data) {
-          this.keys = Object.keys(neu.data);
-        }
-        this.refName = neu?.metadata?.name;
-      }
-      this.updateRow();
-    },
-  },
-
-  methods: {
-    updateRow() {
-      if (!this.name?.length && !this.refName?.length) {
-        if (this.type !== 'fieldRef') {
-          this.$emit('update:value', null);
-
-          return;
-        }
-      }
-      let out = { name: this.name || this.refName };
-
-      switch (this.type) {
-      case 'configMapKeyRef':
-      case 'secretKeyRef':
-        out.valueFrom = {
-          [this.type]: {
-            key: this.key, name: this.refName, optional: false
-          }
-        };
-        break;
-      case 'resourceFieldRef':
-        out.valueFrom = {
-          [this.type]: {
-            containerName: this.refName, divisor: 1, resource: this.key
-          }
-        };
-        break;
-      case 'fieldRef':
-        if (!this.fieldPath || !this.fieldPath.length) {
-          out = null; break;
-        }
-        out.valueFrom = { [this.type]: { apiVersion: 'v1', fieldPath: this.fieldPath } };
-        break;
-      case 'simple':
-        out.value = this.valStr;
-        break;
-      default:
-        delete out.name;
-        out.prefix = this.name;
-        out[this.type] = { name: this.refName, optional: false };
-      }
-      this.$emit('update:value', out);
-    },
-    get
-  }
 };
 </script>
 

package/components/form/WorkloadPorts.vue

@@ -44,25 +44,9 @@ export default {
   },
 
   data() {
-    const rows = clone(this.value || []).map((row) => {
-      row._showHost = false;
-      row._serviceType = row._serviceType || '';
-      row._name = row.name ? `${ row.name }` : `${ row.containerPort }${ row.protocol.toLowerCase() }${ row.hostPort || row._listeningPort || '' }`;
-      if (row.hostPort || row.hostIP) {
-        row._showHost = true;
-      }
-
-      row._ipam = '';
-
-      return row;
-    });
-
-    // show host port column if existing port data has any host ports defined
-    const showHostPorts = !!rows.some((row) => !!row.hostPort);
-
     return {
-      rows,
-      showHostPorts,
+      rows:                [],
+      showHostPorts:       false,
       workloadPortOptions: ['TCP', 'UDP']
     };
   },
@@ -168,6 +152,22 @@ export default {
   },
 
   created() {
+    const rows = clone(this.value || []).map((row) => {
+      row._showHost = false;
+      row._serviceType = row._serviceType || '';
+      row._name = row.name ? `${ row.name }` : `${ row.containerPort }${ row.protocol.toLowerCase() }${ row.hostPort || row._listeningPort || '' }`;
+      if (row.hostPort || row.hostIP) {
+        row._showHost = true;
+      }
+
+      row._ipam = '';
+
+      return row;
+    });
+
+    this.rows = rows;
+    // show host port column if existing port data has any host ports defined
+    this.showHostPorts = !!rows.some((row) => !!row.hostPort);
     this.queueUpdate = debounce(this.update, 500);
     this.rows.map((row) => {
       this.setServiceType(row);

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

@@ -4,6 +4,8 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { ExtendedVue, Vue } from 'vue/types/vue';
 import { DefaultProps } from 'vue/types/options';
 
+jest.mock('lodash/debounce', () => jest.fn((fn) => fn));
+
 describe('the ArrayList', () => {
   it('is empty', () => {
     const wrapper = mount(ArrayList, {
@@ -62,6 +64,7 @@ describe('the ArrayList', () => {
 
     expect(wrapper.find('[data-testid="remove-item-2"]').exists()).toBe(false);
     expect((wrapper.emitted('remove')![0][0] as any).row.value).toStrictEqual('string 1');
+    expect(wrapper.vm.rows).toStrictEqual([{ value: 'string 0' }, { value: 'string 2' }]);
     expect(wrapper.emitted('update:value')![0][0]).toStrictEqual(['string 0', 'string 2']);
   });
 

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

@@ -6,9 +6,9 @@ import { nextTick } from 'vue';
 describe('component: MatchExpressions', () => {
   it('should display all the inputs', () => {
     const wrapper = mount(MatchExpressions, {
-      props: { mode: _CREATE },
-      data:  () => ({
-        rules: [
+      props: {
+        mode:  _CREATE,
+        value: [
           {
             id:       '123',
             key:      '123',
@@ -16,7 +16,7 @@ describe('component: MatchExpressions', () => {
             values:   '123'
           }
         ]
-      })
+      },
     });
 
     const inputWraps = wrapper.findAll('[data-testid^=input-match-expression-]');
@@ -29,9 +29,9 @@ describe('component: MatchExpressions', () => {
     'values',
   ])('should emit an update on %p input', async(field) => {
     const wrapper = mount(MatchExpressions, {
-      props: { mode: _CREATE },
-      data:  () => ({
-        rules: [
+      props: {
+        mode:  _CREATE,
+        value: [
           {
             id:       '123',
             key:      '123',
@@ -39,7 +39,7 @@ describe('component: MatchExpressions', () => {
             values:   '123'
           }
         ]
-      })
+      },
     });
     const input = wrapper.find(`[data-testid="input-match-expression-${ field }-0"]`).find('input');
     const newValue = 123;
@@ -54,9 +54,9 @@ describe('component: MatchExpressions', () => {
     'operator',
   ])('should emit an update on %p selection change', async(field) => {
     const wrapper = mount(MatchExpressions, {
-      props: { mode: _CREATE },
-      data:  () => ({
-        rules: [
+      props: {
+        mode:  _CREATE,
+        value: [
           {
             id:       '123',
             key:      '123',
@@ -64,7 +64,7 @@ describe('component: MatchExpressions', () => {
             values:   '123'
           }
         ]
-      })
+      },
     });
 
     const select = wrapper.find(`[data-testid="input-match-expression-${ field }-0"]`);

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

@@ -1,10 +1,18 @@
 import { mount } from '@vue/test-utils';
 import NameNsDescription from '@shell/components/form/NameNsDescription.vue';
+import { createStore } from 'vuex';
 
 describe('component: NameNsDescription', () => {
   // Accessing to computed value due code complexity
   it('should map namespaces to options', () => {
     const namespaceName = 'test';
+    const store = createStore({
+      getters: {
+        allowedNamespaces:   () => () => ({ [namespaceName]: true }),
+        currentStore:        () => () => 'cluster',
+        'cluster/schemaFor': () => jest.fn()
+      }
+    });
     const result = [
       {
         label: namespaceName,
@@ -13,20 +21,21 @@ describe('component: NameNsDescription', () => {
     ];
     const wrapper = mount(NameNsDescription, {
       props: {
-        value:   {},
+        value: {
+          setAnnotation: jest.fn(),
+          metadata:      {}
+        },
         mode:    'create',
         cluster: {},
       },
       global: {
-        mocks: {
+        provide: { store },
+        mocks:   {
           $store: {
             dispatch: jest.fn(),
             getters:  {
-              namespaces:          jest.fn(),
-              allowedNamespaces:   () => ({ [namespaceName]: true }),
-              currentStore:        () => 'cluster',
-              'cluster/schemaFor': jest.fn(),
-              'i18n/t':            jest.fn(),
+              namespaces: jest.fn(),
+              'i18n/t':   jest.fn(),
             },
           },
         },
@@ -38,27 +47,35 @@ describe('component: NameNsDescription', () => {
 
   it('should emit in case of new namespace', () => {
     const namespaceName = 'test';
+    const store = createStore({
+      getters: {
+        allowedNamespaces:   () => () => ({ [namespaceName]: true }),
+        currentStore:        () => () => 'cluster',
+        'cluster/schemaFor': () => jest.fn()
+      }
+    });
     const newNamespaceName = 'bananas';
     const wrapper = mount(NameNsDescription, {
       props: {
-        value: { metadata: {} },
-        mode:  'create',
+        value: {
+          setAnnotation: jest.fn(),
+          metadata:      {}
+        },
+        mode: 'create',
       },
       global: {
-        mocks: {
+        provide: { store },
+        mocks:   {
           $store: {
             dispatch: jest.fn(),
             getters:  {
               namespaces:                         jest.fn(),
-              allowedNamespaces:                  () => ({ [namespaceName]: true }),
               'customizations/getPreviewCluster': {
                 ready:   true,
                 isLocal: false,
                 badge:   {},
               },
-              currentStore:        () => 'cluster',
-              'cluster/schemaFor': jest.fn(),
-              'i18n/t':            jest.fn(),
+              'i18n/t': jest.fn(),
             },
           },
         },
@@ -69,4 +86,88 @@ describe('component: NameNsDescription', () => {
 
     expect(wrapper.emitted().isNamespaceNew?.[0][0]).toBe(true);
   });
+
+  it('renders the name input with the expected value', () => {
+    const namespaceName = 'test';
+    const store = createStore({
+      getters: {
+        allowedNamespaces:   () => () => ({ [namespaceName]: true }),
+        currentStore:        () => () => 'cluster',
+        'cluster/schemaFor': () => jest.fn()
+      }
+    });
+    const wrapper = mount(NameNsDescription, {
+      props: {
+        value: {
+          setAnnotation: jest.fn(),
+          metadata:      { name: 'Default' }
+        },
+        mode: 'create',
+      },
+      global: {
+        provide: { store },
+        mocks:   {
+          $store: {
+            dispatch: jest.fn(),
+            getters:  {
+              namespaces:                         jest.fn(),
+              'customizations/getPreviewCluster': {
+                ready:   true,
+                isLocal: false,
+                badge:   {},
+              },
+              'i18n/t': jest.fn(),
+            },
+          },
+        },
+      },
+    });
+
+    const nameInput = wrapper.find('[data-testid="NameNsDescriptionNameInput"]');
+
+    expect(nameInput.element.value).toBe('Default');
+  });
+
+  it('sets the name using the nameKey prop', () => {
+    const namespaceName = 'test';
+    const store = createStore({
+      getters: {
+        allowedNamespaces:   () => () => ({ [namespaceName]: true }),
+        currentStore:        () => () => 'cluster',
+        'cluster/schemaFor': () => jest.fn()
+      }
+    });
+    const wrapper = mount(NameNsDescription, {
+      props: {
+        value: {
+          setAnnotation: jest.fn(),
+          metadata:      {},
+          spec:          { displayName: 'Default' }
+        },
+        mode:    'create',
+        nameKey: 'spec.displayName'
+      },
+      global: {
+        provide: { store },
+        mocks:   {
+          $store: {
+            dispatch: jest.fn(),
+            getters:  {
+              namespaces:                         jest.fn(),
+              'customizations/getPreviewCluster': {
+                ready:   true,
+                isLocal: false,
+                badge:   {},
+              },
+              'i18n/t': jest.fn(),
+            },
+          },
+        },
+      },
+    });
+
+    const nameInput = wrapper.find('[data-testid="NameNsDescriptionNameInput"]');
+
+    expect(nameInput.element.value).toBe('Default');
+  });
 });

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

@@ -6,18 +6,20 @@ import { DefaultProps } from 'vue/types/options';
 
 describe('component: Probe', () => {
   describe.each([
-    ['HTTPS', ['port', 'path']],
-    ['tcp', ['socket']],
-    ['exec', ['command']],
-  ])('given kind %p', (kind, extraFields) => {
+    [{ httpGet: { scheme: 'https' } }, ['port', 'path']],
+    [{ tcpSocket: {} }, ['socket']],
+    [{ exec: {} }, ['command']],
+  ])('given kind %p', (value, extraFields) => {
     it.each([
       ...extraFields,
       'successThreshold',
       'failureThreshold',
     ])('should emit an update on %p input', (field) => {
       const wrapper = mount(Probe as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
-        props: { mode: _EDIT },
-        data:  () => ({ kind })
+        props: {
+          mode: _EDIT,
+          value,
+        },
       });
       const input = wrapper.find(`[data-testid="input-probe-${ field }"]`).find('input');
       const newValue = 123;
@@ -33,8 +35,10 @@ describe('component: Probe', () => {
       'timeoutSeconds',
     ])('should emit an update on %p input and blur', (field) => {
       const wrapper = mount(Probe as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
-        props: { mode: _EDIT },
-        data:  () => ({ kind })
+        props: {
+          mode: _EDIT,
+          value
+        },
       });
       const input = wrapper.find(`[data-testid="input-probe-${ field }"]`).find('input');
       const newValue = 123;

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

@@ -2,6 +2,17 @@ import { mount } from '@vue/test-utils';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import SSHKnownHosts from '@shell/components/form/SSHKnownHosts/index.vue';
 
+jest.mock('focus-trap', () => {
+  return {
+    createFocusTrap: jest.fn().mockImplementation(() => {
+      return {
+        activate:   jest.fn(),
+        deactivate: jest.fn(),
+      };
+    }),
+  };
+});
+
 describe('component: SSHKnownHosts', () => {
   it.each([
     ['0 entities', '', 0],