@rancher/shell 0.3.19 → 0.3.21

package/assets/translations/en-us.yaml

@@ -3041,6 +3041,7 @@ login:
     noResponse: "No response received"
   error: An error occurred logging in. Please try again.
   clientError: Invalid username or password. Please try again.
+  specificError: 'An error occurred logging in: {msg}'
   useLocal: Use a local user
   loginWithProvider: Log in with {provider}
   username: Username
@@ -3441,7 +3442,7 @@ namespace:
   workloads: Workloads
   label: Namespace
   selectNamespace: Select Namespace
-  createNamespace: Create a New Namespace
+  createNamespace: Create a new Namespace
   selectOrCreate: Select or Create a Namespace
   resourceStates:
       success: 'Active'
@@ -5633,6 +5634,8 @@ validation:
     logdna:
       apiKey: Required an "Api Key" to be set.
   invalidCron: Invalid cron schedule
+  invalidCidr: "Invalid CIDR"
+  invalidIP: "Invalid IP"
   k8s:
     name: Must consist of lower case alphanumeric characters or '-', and must start and end with an alphanumeric character (e.g. 'my-name', or '123-abc').
     identifier:

package/components/PromptModal.vue

@@ -42,6 +42,9 @@ export default {
       const isSticky = !!this.modalData?.modalSticky;
 
       return !isSticky ? '' : 'display: flex; flex-direction: column; ';
+    },
+    closeOnClickOutside() {
+      return this.modalData?.closeOnClickOutside;
     }
   },
 
@@ -85,6 +88,7 @@ export default {
     :styles="`background-color: var(--nav-bg); border-radius: var(--border-radius); ${stickyProps} max-height: 95vh; ${cssProps}`"
     height="auto"
     :scrollable="true"
+    :click-to-close="closeOnClickOutside"
     @closed="close()"
   >
     <component

package/components/Questions/Array.vue

@@ -19,11 +19,11 @@ export default {
     <div class="col span-6">
       <ArrayList
         :key="question.variable"
-        v-model="value[question.variable]"
+        v-model="value"
         :title="question.label"
         :mode="mode"
-        :protip="false"
         :disabled="disabled"
+        :protip="displayTooltip"
         @input="update"
       />
     </div>

package/components/Questions/Boolean.vue

@@ -9,18 +9,24 @@ export default {
 </script>
 
 <template>
-  <div class="row">
+  <div
+    :data-testid="`boolean-row-${question.variable}`"
+    class="row"
+  >
     <div class="col span-6">
       <Checkbox
         :mode="mode"
         :label="displayLabel"
         :value="value"
         :disabled="disabled"
+        :tooltip="displayTooltip"
+        :data-testid="`boolean-input-${question.variable}`"
         @input="$emit('input', $event)"
       />
     </div>
     <div
       v-if="showDescription"
+      :data-testid="`boolean-description-${question.variable}`"
       class="col span-6 mt-10"
     >
       {{ displayDescription }}

package/components/Questions/CloudCredential.vue

@@ -39,6 +39,7 @@ export default {
         :placeholder="question.description"
         :required="question.required"
         :value="value"
+        :tooltip="displayTooltip"
         @input="!$fetchState.pending && $emit('input', $event)"
       />
     </div>

package/components/Questions/Enum.vue

@@ -4,7 +4,23 @@ import Question from './Question';
 
 export default {
   components: { LabeledSelect },
-  mixins:     [Question]
+  mixins:     [Question],
+  computed:   {
+    options() {
+      const options = this.question.options;
+
+      if (Array.isArray(options)) {
+        return options;
+      }
+
+      return Object.entries(options).map(([key, value]) => {
+        return {
+          value: key,
+          label: value,
+        };
+      });
+    }
+  }
 };
 </script>
 
@@ -14,11 +30,14 @@ export default {
       <LabeledSelect
         :mode="mode"
         :label="displayLabel"
-        :options="question.options"
+        :options="options"
         :placeholder="question.description"
         :required="question.required"
+        :multiple="question.multiple"
         :value="value"
         :disabled="disabled"
+        :tooltip="displayTooltip"
+        :searchable="question.searchable"
         @input="$emit('input', $event)"
       />
     </div>

package/components/Questions/Float.vue

@@ -2,8 +2,6 @@
 import { LabeledInput } from '@components/Form/LabeledInput';
 import Question from './Question';
 
-//  @TODO valid_chars, invalid_chars
-
 export default {
   components: { LabeledInput },
   mixins:     [Question]
@@ -11,7 +9,10 @@ export default {
 </script>
 
 <template>
-  <div class="row">
+  <div
+    :data-testid="`float-row-${question.variable}`"
+    class="row"
+  >
     <div class="col span-6">
       <LabeledInput
         type="text"
@@ -21,11 +22,15 @@ export default {
         :required="question.required"
         :value="value"
         :disabled="disabled"
+        :tooltip="displayTooltip"
+        :rules="rules"
+        :data-testid="`float-input-${question.variable}`"
         @input="val = parseFloat($event); if ( !isNaN(val) ) { $emit('input', val) }"
       />
     </div>
     <div
       v-if="showDescription"
+      :data-testid="`float-description-${question.variable}`"
       class="col span-6 mt-10"
     >
       {{ question.description }}

package/components/Questions/Int.vue

@@ -2,8 +2,6 @@
 import { LabeledInput } from '@components/Form/LabeledInput';
 import Question from './Question';
 
-//  @TODO valid_chars, invalid_chars
-
 export default {
   components: { LabeledInput },
   mixins:     [Question]
@@ -11,7 +9,10 @@ export default {
 </script>
 
 <template>
-  <div class="row">
+  <div
+    :data-testid="`int-row-${question.variable}`"
+    class="row"
+  >
     <div class="col span-6">
       <LabeledInput
         type="text"
@@ -21,11 +22,15 @@ export default {
         :required="question.required"
         :value="value"
         :disabled="disabled"
+        :tooltip="displayTooltip"
+        :rules="rules"
+        :data-testid="`int-input-${question.variable}`"
         @input="val = parseInt($event, 10); if ( !isNaN(val) ) { $emit('input', val) }"
       />
     </div>
     <div
       v-if="showDescription"
+      :data-testid="`int-description-${question.variable}`"
       class="col span-6 mt-10"
     >
       {{ displayDescription }}

package/components/Questions/Question.js

@@ -1,4 +1,7 @@
 import { _EDIT } from '@shell/config/query-params';
+import { validateChars, validateHostname, validateLength } from '@shell/utils/validators';
+import { cronSchedule } from '@shell/utils/validators/cron-schedule';
+import { isValidCIDR, isValidIP } from '@shell/utils/validators/cidr';
 
 export default {
   props: {
@@ -57,6 +60,75 @@ export default {
 
       return this.$store.getters['i18n/withFallback'](`charts.${ this.chartName }."${ variable }".description`, null, this.question?.description);
     },
+
+    displayTooltip() {
+      if (!this.question?.tooltip) {
+        return null;
+      }
+      const variable = this.question?.variable;
+
+      return this.$store.getters['i18n/withFallback'](`charts.${ this.chartName }."${ variable }".tooltip`, null, this.question?.tooltip);
+    },
+
+    rules() {
+      return [
+        (val) => {
+          let errors = [];
+
+          errors = validateChars(
+            val,
+            {
+              validChars:   this.question.valid_chars,
+              invalidChars: this.question.invalid_chars
+            },
+            this.displayLabel,
+            this.$store.getters,
+            errors,
+          );
+
+          errors = validateLength(
+            val,
+            {
+              minLength: this.question?.min_length,
+              maxLenght: this.question?.max_length,
+              min:       this.question?.min,
+              max:       this.question?.max,
+            },
+            this.displayLabel,
+            this.$store.getters,
+            errors,
+          );
+
+          if (this.question.type === 'hostname') {
+            errors = validateHostname(
+              val,
+              this.displayLabel,
+              this.$store.getters,
+              {},
+              errors,
+            );
+          }
+
+          if (this.question.type === 'cron') {
+            cronSchedule(
+              val,
+              this.$store.getters,
+              errors,
+            );
+          }
+
+          if (this.question.type === 'cidr' && !isValidCIDR(val)) {
+            errors.push(this.$store.getters['i18n/t']('validation.invalidCidr'));
+          }
+
+          if (this.question.type === 'ipaddr' && !isValidIP(val)) {
+            errors.push(this.$store.getters['i18n/t']('validation.invalidIP'));
+          }
+
+          return errors;
+        }
+      ];
+    }
   },
 
   created() {

package/components/Questions/QuestionMap.vue

@@ -29,11 +29,12 @@ export default {
       <div class="col span-12 mt-10">
         <KeyValue
           :key="question.variable"
-          v-model="value[question.variable]"
+          v-model="value"
           :title="question.label"
           :mode="mode"
           :protip="false"
           :disabled="disabled"
+          :title-protip="displayTooltip"
           @input="update"
         />
       </div>

package/components/Questions/Radio.vue

@@ -0,0 +1,33 @@
+<script>
+import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
+import Question from './Question';
+
+export default {
+  components: { RadioGroup },
+  mixins:     [Question]
+};
+</script>
+
+<template>
+  <div class="row">
+    <div class="col span-6">
+      <RadioGroup
+        name="question.variable"
+        :mode="mode"
+        :labels="Array.isArray(question.options) ? question.options : Object.values(question.options)"
+        :options="Array.isArray(question.options) ? question.options : Object.keys(question.options)"
+        :value="value"
+        :disabled="disabled"
+        :label="displayLabel"
+        :tooltip="displayTooltip"
+        @input="$emit('input', $event)"
+      />
+    </div>
+    <div
+      v-if="showDescription"
+      class="col span-6 mt-10"
+    >
+      {{ displayDescription }}
+    </div>
+  </div>
+</template>

package/components/Questions/Reference.vue

@@ -96,6 +96,7 @@ export default {
         :placeholder="question.description"
         :required="question.required"
         :value="value"
+        :tooltip="displayTooltip"
         @input="!$fetchState.pending && $emit('input', $event)"
       />
     </div>
@@ -118,6 +119,7 @@ export default {
         :placeholder="question.description"
         :required="question.required"
         :value="value"
+        :tooltip="displayTooltip"
         @input="!$fetchState.pending && $emit('input', $event)"
       />
     </div>

package/components/Questions/String.vue

@@ -2,8 +2,6 @@
 import { LabeledInput } from '@components/Form/LabeledInput';
 import Question from './Question';
 
-//  @TODO valid_chars, invalid_chars
-
 export default {
   components: { LabeledInput },
   mixins:     [Question],
@@ -21,7 +19,10 @@ export default {
 </script>
 
 <template>
-  <div class="row">
+  <div
+    :data-testid="`string-row-${question.variable}`"
+    class="row"
+  >
     <div class="col span-6">
       <LabeledInput
         :mode="mode"
@@ -31,11 +32,15 @@ export default {
         :required="question.required"
         :value="value"
         :disabled="disabled"
+        :tooltip="displayTooltip"
+        :rules="rules"
+        :data-testid="`string-input-${question.variable}`"
         @input="$emit('input', $event)"
       />
     </div>
     <div
       v-if="showDescription"
+      :data-testid="`string-description-${question.variable}`"
       class="col span-6 mt-10"
     >
       {{ displayDescription }}

package/components/Questions/Yaml.vue

@@ -0,0 +1,46 @@
+<script>
+import YamlEditor from '@shell/components/YamlEditor';
+import Question from './Question';
+import { _VIEW } from '@shell/config/query-params';
+
+export default {
+  components: { YamlEditor },
+  mixins:     [Question],
+  data() {
+    return { VIEW: _VIEW };
+  }
+};
+</script>
+
+<template>
+  <div
+    :data-testid="`yaml-row-${question.variable}`"
+    class="row"
+  >
+    <div class="col span-6">
+      <h3>
+        {{ displayLabel }}
+        <i
+          v-if="displayTooltip"
+          v-clean-tooltip="displayTooltip"
+          class="icon icon-info icon-lg"
+        />
+      </h3>
+      <YamlEditor
+        class="yaml-editor mb-6"
+        :editor-mode="mode === VIEW ? 'VIEW_CODE' : 'EDIT_CODE'"
+        :disabled="disabled"
+        :value="value"
+        :data-testid="`yaml-input-${question.variable}`"
+        @input="$emit('input', $event)"
+      />
+    </div>
+    <div
+      v-if="showDescription"
+      :data-testid="`yaml-description-${question.variable}`"
+      class="col span-6 mt-10"
+    >
+      {{ displayDescription }}
+    </div>
+  </div>
+</template>

package/components/Questions/__tests__/Boolean.test.ts

@@ -0,0 +1,123 @@
+import Questions from '@shell/components/Questions';
+import { mount } from '@vue/test-utils';
+import { _EDIT } from '@shell/config/query-params';
+const defaultStubs = {
+  Tab:    true,
+  Tabbed: true,
+};
+const defaultGetters = {
+  currentStore:           () => 'current_store',
+  'management/schemaFor': jest.fn(),
+  'current_store/all':    jest.fn(),
+  'i18n/t':               jest.fn(),
+  'i18n/withFallback':    jest.fn((key, args, fallback) => fallback),
+};
+
+describe('the Boolean Component', () => {
+  it('input field is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable: 'var_name',
+          type:     'boolean',
+          label:    '',
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="boolean-input-var_name"] input[type=checkbox]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const descriptionFields = wrapper.findAll('[data-testid="boolean-description-var_name"]');
+
+    expect(descriptionFields).toHaveLength(0);
+
+    const labelFields = wrapper.findAll('[data-testid="boolean-row-var_name"] label');
+
+    expect(labelFields).toHaveLength(1);
+    expect(labelFields.at(0).text()).toBe('var_name');
+  });
+
+  it('description is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable:    'var_name',
+          type:        'boolean',
+          description: 'test description'
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="boolean-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const descriptionFields = wrapper.findAll('[data-testid="boolean-description-var_name"]');
+
+    expect(descriptionFields).toHaveLength(1);
+    expect(descriptionFields.at(0).text()).toBe('test description');
+  });
+
+  it('label is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable: 'var_name',
+          type:     'boolean',
+          label:    'test label'
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="boolean-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const labelFields = wrapper.findAll('[data-testid="boolean-row-var_name"] label');
+
+    expect(labelFields).toHaveLength(1);
+    expect(labelFields.at(0).text()).toBe('test label');
+  });
+
+  it('tooltip is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable: 'var_name',
+          type:     'boolean',
+          tooltip:  'test tooltip'
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="boolean-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const labelFields = wrapper.findAll('[data-testid="boolean-row-var_name"] .checkbox-info');
+
+    expect(labelFields).toHaveLength(1);
+  });
+});

package/components/Questions/__tests__/Float.test.ts

@@ -0,0 +1,123 @@
+import Questions from '@shell/components/Questions';
+import { mount } from '@vue/test-utils';
+import { _EDIT } from '@shell/config/query-params';
+const defaultStubs = {
+  Tab:    true,
+  Tabbed: true,
+};
+const defaultGetters = {
+  currentStore:           () => 'current_store',
+  'management/schemaFor': jest.fn(),
+  'current_store/all':    jest.fn(),
+  'i18n/t':               jest.fn(),
+  'i18n/withFallback':    jest.fn((key, args, fallback) => fallback),
+};
+
+describe('the float Component', () => {
+  it('input field is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable: 'var_name',
+          type:     'float',
+          label:    '',
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="float-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const descriptionFields = wrapper.findAll('[data-testid="float-description-var_name"]');
+
+    expect(descriptionFields).toHaveLength(0);
+
+    const labelFields = wrapper.findAll('[data-testid="float-row-var_name"] label');
+
+    expect(labelFields).toHaveLength(1);
+    expect(labelFields.at(0).text()).toBe('var_name');
+  });
+
+  it('description is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable:    'var_name',
+          type:        'float',
+          description: 'test description'
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="float-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const descriptionFields = wrapper.findAll('[data-testid="float-description-var_name"]');
+
+    expect(descriptionFields).toHaveLength(1);
+    expect(descriptionFields.at(0).text()).toBe('test description');
+  });
+
+  it('label is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable: 'var_name',
+          type:     'float',
+          label:    'test label'
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="float-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const labelFields = wrapper.findAll('[data-testid="float-row-var_name"] label');
+
+    expect(labelFields).toHaveLength(1);
+    expect(labelFields.at(0).text()).toBe('test label');
+  });
+
+  it('tooltip is present', () => {
+    const wrapper = mount(Questions, {
+      propsData: {
+        value:           {},
+        targetNamespace: 'test',
+        source:          [{
+          variable: 'var_name',
+          type:     'float',
+          tooltip:  'test tooltip'
+        }],
+        mode: _EDIT
+      },
+      mocks: { $store: { getters: defaultGetters } },
+      stubs: defaultStubs,
+    });
+
+    const inputFields = wrapper.findAll('[data-testid="float-input-var_name"]');
+
+    expect(inputFields).toHaveLength(1);
+
+    const labelFields = wrapper.findAll('[data-testid="float-row-var_name"] .labeled-tooltip');
+
+    expect(labelFields).toHaveLength(1);
+  });
+});