@rancher/shell 0.1.0 → 0.1.1

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

@@ -0,0 +1,63 @@
+import { mount } from '@vue/test-utils';
+import Command from '@shell/components/form/Command.vue';
+import { _EDIT } from '@shell/config/query-params';
+
+describe('component: Command', () => {
+  it('should display all the inputs', () => {
+    const wrapper = mount(Command, {
+      propsData: { mode: _EDIT },
+      data:      () => ({ stdin: true })
+    });
+
+    const inputWraps = wrapper.findAll('[data-testid^=input-command-]');
+
+    expect(inputWraps).toHaveLength(5);
+  });
+
+  it.each([
+    'command',
+    'args',
+    'workingDir',
+  ])('should emit an update on %p input', (field) => {
+    const wrapper = mount(Command, { propsData: { mode: _EDIT } });
+    const input = wrapper.find(`[data-testid="input-command-${ field }"]`).find('input');
+    const newValue = 123;
+
+    input.setValue(newValue);
+
+    expect(wrapper.emitted('input')).toHaveLength(1);
+  });
+
+  it.each([
+    'tty',
+  ])('should emit an update on %p checkbox change', (field) => {
+    const wrapper = mount(Command, {
+      propsData: { mode: _EDIT },
+      data:      () => ({ stdin: true })
+    });
+    const checkboxLabel = wrapper
+      .find(`[data-testid="input-command-${ field }"]`)
+      .find('label');
+
+    checkboxLabel.trigger('click');
+
+    expect(wrapper.emitted('input')).toHaveLength(1);
+  });
+
+  it.each([
+    'stdin',
+  ])('should emit an update on %p selection change', async(field) => {
+    const wrapper = mount(Command, {
+      propsData: { mode: _EDIT },
+      data:      () => ({ stdin: true })
+    });
+    const select = wrapper.find(`[data-testid="input-command-${ field }"]`);
+
+    select.find('button').trigger('click');
+    await wrapper.trigger('keydown.down');
+    await wrapper.trigger('keydown.enter');
+
+    expect(wrapper.emitted('input')).toHaveLength(1);
+  });
+});
+//

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

@@ -0,0 +1,56 @@
+import { mount } from '@vue/test-utils';
+import Error from '@shell/components/form/Error.vue';
+
+type Rule = (val?: string) => undefined | string;
+
+describe('component: Error', () => {
+  it('should not display any error text if no test functions provided', () => {
+    const value = 'testValue';
+    const rules: Rule[] = [];
+
+    const wrapper = mount(Error, { propsData: { value, rules } });
+
+    const element = wrapper.find('[data-testid="error-span"]');
+
+    expect(element.exists()).toStrictEqual(false);
+  });
+  it('should not display any error text if provided test returns undefined', () => {
+    const value = 'testValue';
+    const rules: Rule[] = [() => undefined, () => undefined];
+
+    const wrapper = mount(Error, { propsData: { value, rules } });
+
+    const element = wrapper.find('[data-testid="error-span"]');
+
+    expect(element.exists()).toStrictEqual(false);
+  });
+  it('should properly pass the component value property to test function', () => {
+    const value = 'testValue';
+    const rules: Rule[] = [val => val];
+
+    const wrapper = mount(Error, { propsData: { value, rules } });
+    const element = wrapper.find('[data-testid="error-span"]');
+
+    expect(element.text()).toBe('testValue');
+  });
+  it('should display error text if provided test return string', () => {
+    const value = 'testValue';
+    const rules: Rule[] = [() => 'testError', () => undefined];
+
+    const wrapper = mount(Error, { propsData: { value, rules } });
+
+    const element = wrapper.find('[data-testid="error-span"]');
+
+    expect(element.text()).toBe('testError');
+  });
+  it('should properly concatenate error text if more than one error returned', () => {
+    const value = 'testValue';
+    const rules: Rule[] = [() => 'testError1', () => 'testError2'];
+
+    const wrapper = mount(Error, { propsData: { value, rules } });
+
+    const element = wrapper.find('[data-testid="error-span"]');
+
+    expect(element.text()).toBe('testError1, testError2');
+  });
+});

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

@@ -0,0 +1,79 @@
+import { mount } from '@vue/test-utils';
+import MatchExpressions from '@shell/components/form/MatchExpressions.vue';
+import { _CREATE } from '@shell/config/query-params';
+import Vue from 'vue';
+
+describe('component: MatchExpressions', () => {
+  it('should display all the inputs', () => {
+    const wrapper = mount(MatchExpressions, {
+      propsData: { mode: _CREATE },
+      data:      () => ({
+        rules: [
+          {
+            id:       '123',
+            key:      '123',
+            operator: 'anything',
+            values:   '123'
+          }
+        ]
+      })
+    });
+
+    const inputWraps = wrapper.findAll('[data-testid^=input-match-expression-]');
+
+    expect(inputWraps).toHaveLength(3);
+  });
+
+  it.each([
+    'key',
+    'values',
+  ])('should emit an update on %p input', async(field) => {
+    const wrapper = mount(MatchExpressions, {
+      propsData: { mode: _CREATE },
+      data:      () => ({
+        rules: [
+          {
+            id:       '123',
+            key:      '123',
+            operator: 'anything',
+            values:   '123'
+          }
+        ]
+      })
+    });
+    const input = wrapper.find(`[data-testid="input-match-expression-${ field }-0"]`).find('input');
+    const newValue = 123;
+
+    input.setValue(newValue);
+    await Vue.nextTick();
+
+    expect(wrapper.emitted('input')).toHaveLength(1);
+  });
+
+  it.each([
+    'operator',
+  ])('should emit an update on %p selection change', async(field) => {
+    const wrapper = mount(MatchExpressions, {
+      propsData: { mode: _CREATE },
+      data:      () => ({
+        rules: [
+          {
+            id:       '123',
+            key:      '123',
+            operator: 'anything',
+            values:   '123'
+          }
+        ]
+      })
+    });
+
+    const select = wrapper.find(`[data-testid="input-match-expression-${ field }-0"]`);
+
+    select.find('button').trigger('click');
+    await wrapper.trigger('keydown.down');
+    await wrapper.trigger('keydown.enter');
+
+    // TODO: #6167: Fix issue with Select emitting 2 times
+    expect(wrapper.emitted('input')).toHaveLength(2);
+  });
+});

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

@@ -0,0 +1,62 @@
+import { mount } from '@vue/test-utils';
+import Probe from '@shell/components/form/Probe.vue';
+import { _EDIT } from '@shell/config/query-params';
+import { ExtendedVue, Vue } from 'vue/types/vue';
+import { DefaultProps } from 'vue/types/options';
+
+describe('component: Probe', () => {
+  describe.each([
+    ['HTTPS', ['port', 'path']],
+    ['tcp', ['socket']],
+    ['exec', ['command']],
+  ])('given kind %p', (kind, extraFields) => {
+    it.each([
+      ...extraFields,
+      'successThreshold',
+      'failureThreshold',
+    ])('should emit an update on %p input', (field) => {
+      const wrapper = mount(Probe as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+        propsData: { mode: _EDIT },
+        data:      () => ({ kind })
+      });
+      const input = wrapper.find(`[data-testid="input-probe-${ field }"]`).find('input');
+      const newValue = 123;
+
+      input.setValue(newValue);
+
+      expect(wrapper.emitted('input')).toHaveLength(1);
+    });
+
+    it.each([
+      'periodSeconds',
+      'initialDelaySeconds',
+      'timeoutSeconds',
+    ])('should emit an update on %p input and blur', (field) => {
+      const wrapper = mount(Probe as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+        propsData: { mode: _EDIT },
+        data:      () => ({ kind })
+      });
+      const input = wrapper.find(`[data-testid="input-probe-${ field }"]`).find('input');
+      const newValue = 123;
+
+      input.setValue(newValue);
+      input.trigger('blur');
+
+      expect(wrapper.emitted('input')).toHaveLength(1);
+    });
+  });
+
+  it.each([
+    'kind',
+  ])('should emit an update on %p selection change', async(field) => {
+    const wrapper = mount(Probe as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { propsData: { mode: _EDIT } });
+
+    const select = wrapper.find(`[data-testid="input-probe-${ field }"]`);
+
+    select.find('button').trigger('click');
+    await wrapper.trigger('keydown.down');
+    await wrapper.trigger('keydown.enter');
+
+    expect(wrapper.emitted('input')).toHaveLength(2);
+  });
+});

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

@@ -0,0 +1,55 @@
+import { mount } from '@vue/test-utils';
+import Security from '@shell/components/form/Security.vue';
+import { _EDIT } from '@shell/config/query-params';
+
+describe('component: Security', () => {
+  it('should display all the inputs', () => {
+    const wrapper = mount(Security, { propsData: { mode: _EDIT } });
+
+    const inputWraps = wrapper.findAll('[data-testid^=input-security-]');
+
+    expect(inputWraps).toHaveLength(7);
+  });
+
+  it.each([
+    'runAsUser',
+  ])('should emit an update on %p input', (field) => {
+    const wrapper = mount(Security, { propsData: { mode: _EDIT } });
+    const input = wrapper.find(`[data-testid="input-security-${ field }"]`).find('input');
+    const newValue = 123;
+
+    input.setValue(newValue);
+
+    expect(wrapper.emitted('input')).toHaveLength(1);
+  });
+
+  it.each([
+    'privileged',
+    'allowPrivilegeEscalation',
+    'runasNonRoot',
+    'readOnlyRootFilesystem',
+  ])('should emit an update on %p radio option change', (field) => {
+    const wrapper = mount(Security, { propsData: { mode: _EDIT } });
+    const radioOption = wrapper
+      .find(`[data-testid="input-security-${ field }"]`)
+      .find('label');
+
+    radioOption.trigger('click');
+
+    expect(wrapper.emitted('input')).toHaveLength(1);
+  });
+
+  it.each([
+    'add',
+    'drop',
+  ])('should emit an update on %p selection change', async(field) => {
+    const wrapper = mount(Security, { propsData: { mode: _EDIT } });
+    const select = wrapper.find(`[data-testid="input-security-${ field }"]`);
+
+    select.find('button').trigger('click');
+    await wrapper.trigger('keydown.down');
+    await wrapper.trigger('keydown.enter');
+
+    expect(wrapper.emitted('input')).toHaveLength(1);
+  });
+});

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

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { UNITS } from '@shell/utils/units';
 import UnitInput from '@shell/components/form/UnitInput.vue';
-import LabeledInput from '@shell/components/form/LabeledInput.vue';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 
 describe('component: UnitInput', () => {
   it('should renders', () => {
@@ -16,8 +16,9 @@ describe('component: UnitInput', () => {
 
     await input.setValue(2);
     await input.setValue(4);
+    input.trigger('blur');
 
-    expect(wrapper.emitted('input')).toHaveLength(2);
+    expect(wrapper.emitted('input')).toHaveLength(1);
   });
 
   it.each([
@@ -27,7 +28,6 @@ describe('component: UnitInput', () => {
     const wrapper = mount(UnitInput, {
       propsData: {
         value: 1,
-        delay: 0,
         mode
       }
     });
@@ -41,7 +41,7 @@ describe('component: UnitInput', () => {
     ['2G', '2000000000'],
     ['3', '3'],
   ])('should parse values with SI modifier %p and return %p', (value, expected) => {
-    const wrapper = mount(UnitInput, { propsData: { value, delay: 0 } });
+    const wrapper = mount(UnitInput, { propsData: { value } });
     const label = wrapper.findComponent(LabeledInput);
 
     expect(label.props('value')).toBe(expected);
@@ -55,7 +55,6 @@ describe('component: UnitInput', () => {
         value: 1,
         inputExponent,
         baseUnit,
-        delay: 0
       }
     });
     const expectedUnits = `${ UNITS[inputExponent] }${ baseUnit }`;
@@ -71,13 +70,14 @@ describe('component: UnitInput', () => {
   ])('should (%p) force use of SI modifier and return %p', async(outputModifier, expected) => {
     const wrapper = mount(UnitInput, {
       propsData: {
-        value: 1, inputExponent: 3, outputModifier: !outputModifier, delay: 0
+        value: 1, inputExponent: 3, outputModifier: !outputModifier
       }
     });
     const inputWrapper = wrapper.find('input');
 
     await wrapper.setProps({ outputModifier });
     await inputWrapper.setValue(3);
+    inputWrapper.trigger('blur');
 
     expect(wrapper.emitted('input')![0][0]).toBe(expected);
   });
@@ -89,11 +89,12 @@ describe('component: UnitInput', () => {
         value:          1,
         inputExponent,
         outputModifier: true,
-        delay:          0
       }
     });
+    const input = wrapper.find('input');
 
-    await wrapper.find('input').setValue(2);
+    await input.setValue(2);
+    input.trigger('blur');
 
     expect(wrapper.emitted('input')![0][0]).toContain(UNITS[inputExponent]);
   });
@@ -104,7 +105,7 @@ describe('component: UnitInput', () => {
   ])('based on increment %p and exponent M, it should use binary modifier and return unit %p', (increment, expected) => {
     const wrapper = mount(UnitInput, {
       propsData: {
-        value: 1, inputExponent: 2, increment, delay: 0
+        value: 1, inputExponent: 2, increment
       }
     });
 
@@ -117,11 +118,14 @@ describe('component: UnitInput', () => {
   ])('should force emission of value type as %p', (outputAs) => {
     const wrapper = mount(UnitInput, {
       propsData: {
-        value: 1, inputExponent: 3, outputAs, delay: 0
+        value: 1, inputExponent: 3, outputAs
       }
     });
 
-    wrapper.find('input').setValue(2);
+    const input = wrapper.find('input');
+
+    input.setValue(2);
+    input.trigger('blur');
 
     expect(typeof wrapper.emitted('input')![0][0]).toBe(outputAs);
   });
@@ -132,7 +136,7 @@ describe('component: UnitInput', () => {
   ])('should appended base unit %p value to SI modifier and return %p', (baseUnit, expected) => {
     const wrapper = mount(UnitInput, {
       propsData: {
-        value: 1, baseUnit, inputExponent: 2, delay: 0
+        value: 1, baseUnit, inputExponent: 2
       }
     });
     const addonText = wrapper.find('.addon').text();
@@ -142,25 +146,26 @@ describe('component: UnitInput', () => {
 
   it('should display suffix outside of the value', () => {
     const suffix = 'seconds';
-    const wrapper = mount(UnitInput, {
-      propsData: {
-        value: 1, suffix, delay: 0
-      }
-    });
+    const wrapper = mount(UnitInput, { propsData: { value: 1, suffix } });
     const addonText = wrapper.find('.addon').text();
 
-    wrapper.find('input').setValue(1);
+    const input = wrapper.find('input');
+
+    input.setValue(1);
+    input.trigger('blur');
 
     expect(addonText).toBe(suffix);
     expect(wrapper.emitted('input')![0][0]).not.toContain(suffix);
   });
 
   it('should format value to a valid integer', () => {
-    const wrapper = mount(UnitInput, { propsData: { delay: 0 } });
+    const wrapper = mount(UnitInput);
     const value = '096';
     const expectation = 96;
+    const input = wrapper.find('input');
 
-    wrapper.find('input').setValue(value);
+    input.setValue(value);
+    input.trigger('blur');
 
     expect(wrapper.emitted('input')![0][0]).toBe(expectation);
   });
@@ -169,11 +174,14 @@ describe('component: UnitInput', () => {
     const value = 5096;
     const delay = 1;
     const wrapper = mount(UnitInput, { propsData: { delay } });
+    const input = wrapper.find('input');
 
     jest.useFakeTimers();
-    wrapper.find('input').setValue('4096');
-    wrapper.find('input').setValue('096');
-    wrapper.find('input').setValue(value);
+
+    input.setValue('4096');
+    input.setValue('096');
+    input.setValue(value);
+    input.trigger('blur');
     jest.advanceTimersByTime(delay);
     jest.useRealTimers();
 

package/components/formatter/BadgeStateFormatter.vue

@@ -1,5 +1,5 @@
 <script>
-import BadgeState from '@shell/components/BadgeState';
+import { BadgeState } from '@components/BadgeState';
 import { colorForState, stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
 export default {
   components: { BadgeState },

package/components/formatter/Capitalize.vue

@@ -4,6 +4,10 @@ export default {
     value: {
       type:    String,
       default: ''
+    },
+    col: {
+      type:    Object,
+      default: () => {}
     }
   },
   computed: {
@@ -17,5 +21,8 @@ export default {
 <template>
   <span>
     {{ capitalized }}
+    <template v-if="!capitalized && col.dashIfEmpty">
+      <span class="text-muted">&mdash;</span>
+    </template>
   </span>
 </template>

package/components/formatter/ClusterLink.vue

@@ -58,7 +58,7 @@ export default {
 
 </script>
 <template>
-  <span>
+  <span class="cluster-link">
     <n-link v-if="to" :to="to">
       {{ value }}
     </n-link>
@@ -72,9 +72,13 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+  .cluster-link {
+    display: flex;
+    align-items: center;
+  }
   .conditions-alert-icon {
     color: var(--error);
-    padding-left: 2px;
+    margin-left: 4px;
   }
   ::v-deep {
     .labeled-tooltip, .status-icon {

package/components/formatter/ClusterProvider.vue

@@ -0,0 +1,36 @@
+<script>
+export default {
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+  },
+  data(props) {
+    return {
+      // The isImported getter on the provisioning cluster
+      // model doesn't work for imported K3s clusters, in
+      // which case it returns 'k3s' instead of 'imported.'
+      // This is the workaround.
+      isImported: props.row.mgmt?.providerForEmberParam === 'import'
+    };
+  }
+};
+</script>
+
+<template>
+  <div>
+    <template v-if="row.machineProvider">
+      {{ row.machineProviderDisplay }}
+    </template>
+    <template v-else-if="row.isCustom">
+      {{ t('cluster.provider.custom') }}
+    </template>
+    <template v-else-if="isImported">
+      {{ t('cluster.provider.imported') }}
+    </template>
+    <div class="text-muted">
+      {{ row.provisionerDisplay }}
+    </div>
+  </div>
+</template>

package/components/formatter/DelayedValue.vue

@@ -0,0 +1,43 @@
+<script>
+export default {
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+    col: {
+      type:     Object,
+      required: true
+    },
+  },
+
+  data() {
+    return { loading: true };
+  },
+
+  computed: {
+    value() {
+      return this.col.value(this.row);
+    }
+  },
+
+  methods:  {
+    startDelayedLoading() {
+      this.loading = false;
+    }
+  }
+};
+</script>
+
+<template>
+  <i v-if="loading" class="icon icon-spinner delayed-loader" />
+  <span v-else>{{ value }}</span>
+</template>
+
+<style lang="scss" scoped>
+  .delayed-loader {
+    font-size: 16px;
+    height: 16px;
+    width: 16px;
+  }
+</style>

package/components/formatter/Endpoints.vue

@@ -82,11 +82,11 @@ export default {
 
 <template>
   <span>
-    <template v-for="endpoint in parsed">
+    <template v-for="(endpoint, index) in parsed">
       <span v-if="endpoint.display" :key="endpoint.display" class="block">{{ endpoint.display }}</span>
       <a
         v-else
-        :key="endpoint.link"
+        :key="index + endpoint.link"
         class="block"
         :href="endpoint.link"
         target="_blank"

package/components/formatter/HarvesterDiskState.vue

@@ -1,5 +1,5 @@
 <script>
-import BadgeState from '@shell/components/BadgeState';
+import { BadgeState } from '@components/BadgeState';
 import { stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
 
 const ACTIVE = 'healthy';