@rancher/shell 0.1.0 → 0.1.1

package/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/base.vue

@@ -1,6 +1,6 @@
 <script>
 import InputOrDisplay from '@shell/components/InputOrDisplay';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
 import { clone } from '@shell/utils/object';
@@ -129,27 +129,6 @@ export default {
   },
 
   watch: {
-    'value.networkName': {
-      handler(neu) {
-        if (neu === MANAGEMENT_NETWORK) {
-          this.value.isPod = true;
-          this.value.macAddress = '';
-        } else {
-          this.value.isPod = false;
-        }
-
-        this.$set(this, 'isMasquerade', this.value.isPod);
-
-        if (this.value.isPod) {
-          this.value.type = 'masquerade';
-        } else {
-          this.value.type = 'bridge';
-        }
-
-        this.update();
-      }
-    },
-
     rows: {
       handler(neu) {
         const hasManagementNetwork = !!neu.some(N => N.isPod);
@@ -162,6 +141,27 @@ export default {
   },
 
   methods: {
+    /**
+     * Patch k8s value based on type of network
+     */
+    updateNetworkName(neu) {
+      if (neu === MANAGEMENT_NETWORK) {
+        this.value.isPod = true;
+        this.value.macAddress = '';
+      } else {
+        this.value.isPod = false;
+      }
+
+      this.$set(this, 'isMasquerade', this.value.isPod);
+
+      if (this.value.isPod) {
+        this.value.type = 'masquerade';
+      } else {
+        this.value.type = 'bridge';
+      }
+      this.update();
+    },
+
     update() {
       this.$emit('update');
     }
@@ -170,16 +170,37 @@ export default {
 </script>
 
 <template>
-  <div @input="update">
+  <div>
     <div class="row mb-20">
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.fields.name')" :value="value.name" :mode="mode">
-          <LabeledInput v-model="value.name" :label="t('harvester.fields.name')" required :mode="mode" :disabled="isDisabled" />
+      <div
+        data-testid="input-hen-name"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.name')"
+          :value="value.name"
+          :mode="mode"
+        >
+          <LabeledInput
+            v-model="value.name"
+            :label="t('harvester.fields.name')"
+            required
+            :mode="mode"
+            :disabled="isDisabled"
+            @input="update"
+          />
         </InputOrDisplay>
       </div>
 
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.fields.model')" :value="value.model" :mode="mode">
+      <div
+        data-testid="input-hen-model"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.model')"
+          :value="value.model"
+          :mode="mode"
+        >
           <LabeledSelect
             v-model="value.model"
             :label="t('harvester.fields.model')"
@@ -194,8 +215,15 @@ export default {
     </div>
 
     <div class="row" :class="{'mb-20': !isMasquerade}">
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.fields.network')" :value="value.networkName" :mode="mode">
+      <div
+        data-testid="input-hen-networkName"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.network')"
+          :value="value.networkName"
+          :mode="mode"
+        >
           <LabeledSelect
             v-model="value.networkName"
             :label="t('harvester.fields.network')"
@@ -203,13 +231,20 @@ export default {
             :mode="mode"
             required
             :disabled="isDisabled"
-            @input="update"
+            @input="updateNetworkName"
           />
         </InputOrDisplay>
       </div>
 
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.fields.type')" :value="value.type" :mode="mode">
+      <div
+        data-testid="input-hen-type"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.type')"
+          :value="value.type"
+          :mode="mode"
+        >
           <LabeledSelect
             v-model="value.type"
             :label="t('harvester.fields.type')"
@@ -223,15 +258,23 @@ export default {
     </div>
 
     <div v-if="!isMasquerade" class="row">
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.fields.macAddress')" :value="value.macAddress" :mode="mode">
+      <div
+        data-testid="input-hen-macAddress"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.macAddress')"
+          :value="value.macAddress"
+          :mode="mode"
+        >
           <LabeledInput
             v-model="value.macAddress"
             label-key="harvester.fields.macAddress"
             :mode="mode"
             :tooltip="t('harvester.virtualMachine.volume.macTip')"
+            @input="update"
           />
-        </inputordisplay>
+        </InputOrDisplay>
       </div>
     </div>
   </div>

package/edit/kubevirt.io.virtualmachine/VirtualMachineReserved.vue

@@ -0,0 +1,54 @@
+<script>
+import UnitInput from '@shell/components/form/UnitInput';
+
+export default {
+  name:       'HarvesterReserved',
+  components: { UnitInput },
+
+  props:      {
+    reservedMemory: {
+      type:    String,
+      default: null
+    },
+    mode: {
+      type:      String,
+      default:  'create',
+    },
+  },
+
+  data() {
+    return { memory: this.reservedMemory };
+  },
+
+  watch: {
+    reservedMemory(memory) {
+      this.memory = memory;
+    },
+  },
+
+  methods: {
+    change() {
+      const { memory } = this;
+
+      this.$emit('updateReserved', { memory });
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="row mb-20">
+    <div class="col span-6">
+      <UnitInput
+        v-model="memory"
+        v-int-number
+        :label="t('harvester.virtualMachine.input.reservedMemory')"
+        :mode="mode"
+        :input-exponent="2"
+        :increment="1024"
+        :output-modifier="true"
+        @input="change"
+      />
+    </div>
+  </div>
+</template>

package/edit/kubevirt.io.virtualmachine/VirtualMachineSSHKey.vue

@@ -2,7 +2,7 @@
 import { mapGetters } from 'vuex';
 import { randomStr } from '@shell/utils/string';
 
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import ModalWithCard from '@shell/components/ModalWithCard';
 

package/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue

@@ -1,10 +1,10 @@
 <script>
 import draggable from 'vuedraggable';
 import InfoBox from '@shell/components/InfoBox';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import BadgeStateFormatter from '@shell/components/formatter/BadgeStateFormatter';
 import UnitInput from '@shell/components/form/UnitInput';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import ModalWithCard from '@shell/components/ModalWithCard';
 
@@ -328,7 +328,6 @@ export default {
       <button
         type="button"
         class="btn btn-sm bg-primary mb-10"
-        :disabled="rows.length === 0"
         @click="addVolume(SOURCE_TYPE.CONTAINER)"
       >
         {{ t('harvester.virtualMachine.volume.addContainer') }}

package/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/__tests__/HarvesterEditContainer.test.ts

@@ -0,0 +1,40 @@
+import { mount } from '@vue/test-utils';
+import HarvesterEditContainer from '@shell/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/container.vue';
+import { _EDIT } from '@shell/config/query-params';
+
+describe('component: HarvesterEditContainer', () => {
+  it('should display all the inputs', () => {
+    const wrapper = mount(HarvesterEditContainer, { propsData: { mode: _EDIT, value: {} } });
+
+    const inputWraps = wrapper.findAll('[data-testid^=input-hec-]');
+
+    expect(inputWraps).toHaveLength(4);
+  });
+
+  it.each([
+    'name',
+    'container',
+  ])('should emit an update on %p input', (field) => {
+    const wrapper = mount(HarvesterEditContainer, { propsData: { mode: _EDIT, value: {} } });
+    const input = wrapper.find(`[data-testid="input-hec-${ field }"]`).find('input');
+    const newValue = 123;
+
+    input.setValue(newValue);
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+
+  it.each([
+    'type',
+    'bus',
+  ])('should emit an update on %p selection change', async(field) => {
+    const wrapper = mount(HarvesterEditContainer, { propsData: { mode: _EDIT, value: {} } });
+    const select = wrapper.find(`[data-testid="input-hec-${ field }"]`);
+
+    select.find('button').trigger('click');
+    await wrapper.trigger('keydown.down');
+    await wrapper.trigger('keydown.enter');
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+});

package/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/__tests__/HarvesterEditExisting.test.ts

@@ -0,0 +1,102 @@
+import { mount } from '@vue/test-utils';
+import HarvesterEditExisting from '@shell/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/existing.vue';
+import { _EDIT } from '@shell/config/query-params';
+
+describe('component: HarvesterEditExisting', () => {
+  it('should display all the inputs', () => {
+    const wrapper = mount(HarvesterEditExisting, {
+      propsData: {
+        mode: _EDIT, value: {}, rows: []
+      },
+      mocks:      {
+        $store: {
+          getters: {
+            'harvester/all': () => [],
+            'i18n/t':        jest.fn()
+          }
+        }
+      }
+    });
+
+    const inputWraps = wrapper.findAll('[data-testid^=input-hee-]');
+
+    expect(inputWraps).toHaveLength(5);
+  });
+
+  it.each([
+    'name',
+  ])('should emit an update on %p input', (field) => {
+    const wrapper = mount(HarvesterEditExisting, {
+      propsData: {
+        mode: _EDIT, value: {}, rows: []
+      },
+      mocks:      {
+        $store: {
+          getters: {
+            'harvester/all': () => [],
+            'i18n/t':        jest.fn()
+          }
+        }
+      }
+    });
+    const input = wrapper.find(`[data-testid="input-hee-${ field }"]`).find('input');
+    const newValue = 123;
+
+    input.setValue(newValue);
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+
+  // TODO: #6179: Restore this test when the input is allowed to edit
+  it.skip.each([
+    'size',
+  ])('should emit an update on %p input and blur', (field) => {
+    const wrapper = mount(HarvesterEditExisting, {
+      propsData: {
+        mode: _EDIT, value: {}, rows: []
+      },
+      mocks:      {
+        $store: {
+          getters: {
+            'harvester/all': () => [],
+            'i18n/t':        jest.fn()
+          }
+        }
+      }
+    });
+    const input = wrapper.find(`[data-testid="input-hee-${ field }"]`).find('input');
+    const newValue = 123;
+
+    input.setValue(newValue);
+    input.trigger('blur');
+
+    expect(wrapper.emitted('input')).toHaveLength(1);
+  });
+
+  it.each([
+    'type',
+    'volumeName',
+    // 'bus',  // disabled
+  ])('should emit an update on %p selection change', async(field) => {
+    const wrapper = mount(HarvesterEditExisting, {
+      propsData: {
+        mode: _EDIT, value: {}, rows: []
+      },
+      mocks:      {
+        $store: {
+          getters: {
+            'harvester/all': () => [],
+            'i18n/t':        jest.fn()
+          }
+        }
+      }
+    });
+    const select = wrapper.find(`[data-testid="input-hee-${ field }"]`);
+
+    select.find('button').trigger('click');
+    await wrapper.trigger('keydown.down');
+    await wrapper.trigger('keydown.enter');
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+});

package/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/__tests__/HarvesterEditVMImage.test.ts

@@ -0,0 +1,117 @@
+import { mount } from '@vue/test-utils';
+import HarvesterEditVMImage from '@shell/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/vmImage.vue';
+import { _CREATE } from '@shell/config/query-params';
+
+describe('component: HarvesterEditVMImage', () => {
+  it('should display all the inputs', () => {
+    const wrapper = mount(HarvesterEditVMImage, {
+      propsData: {
+        mode:             _CREATE,
+        isVirtualType:    false,
+        newCreateId:      '123',
+        validateRequired: true,
+        idx:              1
+      },
+      mocks:     {
+        $store:    {
+          getters: {
+            'harvester/all': jest.fn(),
+            'i18n/t':        jest.fn(),
+          }
+        },
+      }
+    });
+
+    const inputWraps = wrapper.findAll('[data-testid^=input-hevi-]');
+
+    expect(inputWraps).toHaveLength(5);
+  });
+
+  it.each([
+    'name',
+  ])('should emit an update on %p input', (field) => {
+    const wrapper = mount(HarvesterEditVMImage, {
+      propsData: {
+        mode:             _CREATE,
+        isVirtualType:    false,
+        newCreateId:      '123',
+        validateRequired: true,
+        idx:              1
+      },
+      mocks:     {
+        $store:    {
+          getters: {
+            'harvester/all': jest.fn(),
+            'i18n/t':        jest.fn(),
+          }
+        },
+      }
+    });
+    const input = wrapper.find(`[data-testid="input-hevi-${ field }"]`).find('input');
+    const newValue = 123;
+
+    input.setValue(newValue);
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+
+  it.each([
+    'size',
+  ])('should emit an update on %p input blur', (field) => {
+    const wrapper = mount(HarvesterEditVMImage, {
+      propsData: {
+        mode:             _CREATE,
+        isVirtualType:    false,
+        newCreateId:      '123',
+        validateRequired: true,
+        idx:              1
+      },
+      mocks:     {
+        $store:    {
+          getters: {
+            'harvester/all': jest.fn(),
+            'i18n/t':        jest.fn(),
+          }
+        },
+      }
+    });
+    const input = wrapper.find(`[data-testid="input-hevi-${ field }"]`).find('input');
+    const newValue = 123;
+
+    input.setValue(newValue);
+    input.trigger('blur');
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+
+  it.each([
+    'type',
+    'image',
+    'bus',
+  ])('should emit an update on %p selection change', async(field) => {
+    const wrapper = mount(HarvesterEditVMImage, {
+      propsData: {
+        mode:             _CREATE,
+        isVirtualType:    false,
+        newCreateId:      '123',
+        validateRequired: true,
+        idx:              1
+      },
+      mocks:     {
+        $store:    {
+          getters: {
+            'harvester/all': jest.fn(),
+            'i18n/t':        jest.fn(),
+          }
+        },
+      }
+    });
+    const select = wrapper.find(`[data-testid="input-hevi-${ field }"]`);
+
+    select.find('button').trigger('click');
+    await wrapper.trigger('keydown.down');
+    await wrapper.trigger('keydown.enter');
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+});

package/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/__tests__/HarvesterEditVolume.test.ts

@@ -0,0 +1,74 @@
+import { mount } from '@vue/test-utils';
+import HarvesterEditVolume from '@shell/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/volume.vue';
+import { _EDIT } from '@shell/config/query-params';
+
+describe('component: HarvesterEditVolume', () => {
+  it('should display all the inputs', () => {
+    const wrapper = mount(HarvesterEditVolume, {
+      propsData:  { validateRequired: true },
+      mocks:     {
+        $store:    {
+          getters: {
+            'harvester/all': jest.fn(),
+            'i18n/t':                  jest.fn(),
+            'i18n/exists':             jest.fn(),
+          }
+        },
+      }
+    });
+
+    const inputWraps = wrapper.findAll('[data-testid^=input-hev-]');
+
+    expect(inputWraps).toHaveLength(4);
+  });
+
+  it.each([
+    'name',
+    'size',
+  ])('should emit an update on %p input blur', (field) => {
+    const wrapper = mount(HarvesterEditVolume, {
+      propsData:  { mode: _EDIT, validateRequired: true },
+      mocks:     {
+        $store:    {
+          getters: {
+            'harvester/all': jest.fn(),
+            'i18n/t':                  jest.fn(),
+            'i18n/exists':             jest.fn(),
+          }
+        },
+      }
+    });
+    const input = wrapper.find(`[data-testid="input-hev-${ field }"]`).find('input');
+    const newValue = 123;
+
+    input.setValue(newValue);
+    input.trigger('blur');
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+
+  it.each([
+    'type',
+    'bus'
+  ])('should emit an update on %p selection change', async(field) => {
+    const wrapper = mount(HarvesterEditVolume, {
+      propsData:  { mode: _EDIT, validateRequired: true },
+      mocks:     {
+        $store:    {
+          getters: {
+            'harvester/all': jest.fn(),
+            'i18n/t':                  jest.fn(),
+            'i18n/exists':             jest.fn(),
+          }
+        },
+      }
+    });
+    const select = wrapper.find(`[data-testid="input-hev-${ field }"]`);
+
+    select.find('button').trigger('click');
+    await wrapper.trigger('keydown.down');
+    await wrapper.trigger('keydown.enter');
+
+    expect(wrapper.emitted('update')).toHaveLength(1);
+  });
+});

package/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/container.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import InputOrDisplay from '@shell/components/InputOrDisplay';
 import { VOLUME_TYPE, InterfaceOption } from '@shell/config/harvester-map';
@@ -47,16 +47,36 @@ export default {
 </script>
 
 <template>
-  <div @input="update">
+  <div>
     <div class="row mb-20">
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.fields.name')" :value="value.name" :mode="mode">
-          <LabeledInput v-model="value.name" :label="t('harvester.fields.name')" required :mode="mode" />
+      <div
+        data-testid="input-hec-name"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.name')"
+          :value="value.name"
+          :mode="mode"
+        >
+          <LabeledInput
+            v-model="value.name"
+            :label="t('harvester.fields.name')"
+            required
+            :mode="mode"
+            @input="update"
+          />
         </InputOrDisplay>
       </div>
 
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.fields.type')" :value="value.type" :mode="mode">
+      <div
+        data-testid="input-hec-type"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.type')"
+          :value="value.type"
+          :mode="mode"
+        >
           <LabeledSelect
             v-model="value.type"
             :label="t('harvester.fields.type')"
@@ -70,15 +90,41 @@ export default {
     </div>
 
     <div class="row mb-20">
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.virtualMachine.volume.dockerImage')" :value="value.container" :mode="mode">
-          <LabeledInput v-model="value.container" :label="t('harvester.virtualMachine.volume.dockerImage')" :mode="mode" required @input="update" />
+      <div
+        data-testid="input-hec-container"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.virtualMachine.volume.dockerImage')"
+          :value="value.container"
+          :mode="mode"
+        >
+          <LabeledInput
+            v-model="value.container"
+            :label="t('harvester.virtualMachine.volume.dockerImage')"
+            :mode="mode"
+            required
+            @input="update"
+          />
         </InputOrDisplay>
       </div>
 
-      <div class="col span-3">
-        <InputOrDisplay :name="t('harvester.virtualMachine.volume.bus')" :value="value.bus" :mode="mode">
-          <LabeledSelect v-model="value.bus" :label="t('harvester.virtualMachine.volume.bus')" :options="InterfaceOption" :mode="mode" @input="update" />
+      <div
+        data-testid="input-hec-bus"
+        class="col span-3"
+      >
+        <InputOrDisplay
+          :name="t('harvester.virtualMachine.volume.bus')"
+          :value="value.bus"
+          :mode="mode"
+        >
+          <LabeledSelect
+            v-model="value.bus"
+            :label="t('harvester.virtualMachine.volume.bus')"
+            :options="InterfaceOption"
+            :mode="mode"
+            @input="update"
+          />
         </InputOrDisplay>
       </div>
     </div>