dashboard-shell-shell 1.0.113 → 1.0.114

package/components/form/Tolerations.vue

@@ -29,10 +29,6 @@ export default {
   },
 
   data() {
-    return { rules: [] };
-  },
-
-  created() {
     const rules = [];
 
     // on creation in agent configuration, the backend "eats"
@@ -53,7 +49,7 @@ export default {
       });
     }
 
-    this.rules = rules;
+    return { rules };
   },
 
   computed: {

package/components/form/UnitInput.vue

@@ -206,7 +206,7 @@ export default {
       }
 
       if (this.outputModifier) {
-        out = out === null ? null : `${ parseInt(inputValue) }${ this.unit }`;
+        out = out === null ? null : `${ inputValue }${ this.unit }`;
       } else if ( this.outputAs === 'string' ) {
         out = out === null ? '' : `${ inputValue }`;
       } else if (out) {
@@ -235,7 +235,7 @@ export default {
     :required="required"
     :placeholder="placeholder"
     :hide-arrows="hideArrows"
-    @update:value="update"
+    @change="update($event.target.value)"
     @blur="update($event.target.value)"
   >
     <template #suffix>

package/components/form/ValueFromResource.vue

@@ -4,7 +4,6 @@ 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, watch } from 'vue';
 
 export default {
   emits: ['update:value', 'remove'],
@@ -45,164 +44,84 @@ export default {
   },
 
   data() {
-    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';
+    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';
     }
 
-    const refName = ref('');
-    const name = ref('');
-    const fieldPath = ref('');
-    const referenced = ref(null);
-    const key = ref(null);
-    const valStr = ref('');
-    const keys = ref([]);
+    let refName;
+    let name;
+    let fieldPath;
+    let referenced;
+    let key;
+    let valStr;
+    const keys = [];
 
-    switch (type.value) {
+    switch (type) {
     case 'resourceFieldRef':
-      name.value = props.value.name;
-      refName.value = props.value.valueFrom[type.value].containerName;
-      key.value = props.value.valueFrom[type.value].resource || '';
+      name = this.value.name;
+      refName = this.value.valueFrom[type].containerName;
+      key = this.value.valueFrom[type].resource || '';
       break;
     case 'configMapKeyRef':
-      name.value = props.value.name;
-      key.value = props.value.valueFrom[type.value].key || '';
-      refName.value = props.value.valueFrom[type.value].name;
-      referenced.value = props.allConfigMaps.filter((resource) => {
-        return resource.metadata.name === refName.value;
+      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;
       })[0];
-      if (referenced.value && referenced.value.data) {
-        keys.value.push(...Object.keys(referenced.value.data));
+      if (referenced && referenced.data) {
+        keys.push(...Object.keys(referenced.data));
       }
       break;
     case 'secretRef':
     case 'configMapRef':
-      name.value = props.value.prefix;
-      refName.value = props.value[type.value].name;
+      name = this.value.prefix;
+      refName = this.value[type].name;
       break;
     case 'secretKeyRef':
-      name.value = props.value.name;
-      key.value = props.value.valueFrom[type.value].key || '';
-      refName.value = props.value.valueFrom[type.value].name;
-      referenced.value = props.allSecrets.filter((resource) => {
-        return resource.metadata.name === refName.value;
+      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;
       })[0];
-      if (referenced.value && referenced.value.data) {
-        keys.value.push(...Object.keys(referenced.value.data));
+      if (referenced && referenced.data) {
+        keys.push(...Object.keys(referenced.data));
       }
       break;
     case 'fieldRef':
-      fieldPath.value = get(props.value.valueFrom, `${ type.value }.fieldPath`) || '';
-      name.value = props.value.name;
+      fieldPath = get(this.value.valueFrom, `${ type }.fieldPath`) || '';
+      name = this.value.name;
       break;
     default:
-      name.value = props.value.name;
-      valStr.value = props.value.value;
+      name = this.value.name;
+      valStr = this.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 {
-      type,
-      refName,
-      referenced,
-      keys,
-      key,
-      fieldPath,
-      name,
-      valStr,
-      updateRow,
-      get,
+      typeOpts, type, refName, referenced: refName, secrets: this.allSecrets, keys, key, fieldPath, name, resourceKeyOpts, valStr
     };
   },
-
   computed: {
     isView() {
       return this.mode === _VIEW;
@@ -270,6 +189,74 @@ 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,9 +44,25 @@ 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:       false,
+      rows,
+      showHostPorts,
       workloadPortOptions: ['TCP', 'UDP']
     };
   },
@@ -152,22 +168,6 @@ 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,8 +4,6 @@ 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, {
@@ -58,13 +56,12 @@ describe('the ArrayList', () => {
     });
 
     jest.useFakeTimers();
-    await (wrapper.get('[data-testid="array-list-remove-item-1"]').element as HTMLElement).click();
+    await (wrapper.get('[data-testid="remove-item-1"]').element as HTMLElement).click();
     jest.advanceTimersByTime(50);
     jest.useRealTimers();
 
-    expect(wrapper.find('[data-testid="array-list-remove-item-2"]').exists()).toBe(false);
+    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,
-        value: [
+      props: { mode: _CREATE },
+      data:  () => ({
+        rules: [
           {
             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,
-        value: [
+      props: { mode: _CREATE },
+      data:  () => ({
+        rules: [
           {
             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,
-        value: [
+      props: { mode: _CREATE },
+      data:  () => ({
+        rules: [
           {
             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,18 +1,10 @@
 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,
@@ -21,21 +13,20 @@ describe('component: NameNsDescription', () => {
     ];
     const wrapper = mount(NameNsDescription, {
       props: {
-        value: {
-          setAnnotation: jest.fn(),
-          metadata:      {}
-        },
+        value:   {},
         mode:    'create',
         cluster: {},
       },
       global: {
-        provide: { store },
-        mocks:   {
+        mocks: {
           $store: {
             dispatch: jest.fn(),
             getters:  {
-              namespaces: jest.fn(),
-              'i18n/t':   jest.fn(),
+              namespaces:          jest.fn(),
+              allowedNamespaces:   () => ({ [namespaceName]: true }),
+              currentStore:        () => 'cluster',
+              'cluster/schemaFor': jest.fn(),
+              'i18n/t':            jest.fn(),
             },
           },
         },
@@ -47,35 +38,27 @@ 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: {
-          setAnnotation: jest.fn(),
-          metadata:      {}
-        },
-        mode: 'create',
+        value: { metadata: {} },
+        mode:  'create',
       },
       global: {
-        provide: { store },
-        mocks:   {
+        mocks: {
           $store: {
             dispatch: jest.fn(),
             getters:  {
               namespaces:                         jest.fn(),
+              allowedNamespaces:                  () => ({ [namespaceName]: true }),
               'customizations/getPreviewCluster': {
                 ready:   true,
                 isLocal: false,
                 badge:   {},
               },
-              'i18n/t': jest.fn(),
+              currentStore:        () => 'cluster',
+              'cluster/schemaFor': jest.fn(),
+              'i18n/t':            jest.fn(),
             },
           },
         },
@@ -86,88 +69,4 @@ 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');
-  });
 });