@rancher/shell 0.3.21 → 0.3.23

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -2,11 +2,8 @@
 import Vue, { PropType } from 'vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { addObject, removeObject } from '@shell/utils/array';
-import cloneDeep from 'lodash/cloneDeep';
 
 export default Vue.extend({
-  name: 'Checkbox',
-
   props: {
     /**
      * The checkbox value.
@@ -49,8 +46,8 @@ export default Vue.extend({
     },
 
     /**
-     * Display an indeterminate state. Useful for cases where a checkbox might
-     * be the parent to child checkboxes, and we need to show that a subset of
+     * Display an indeterminate state. Useful for cases where a checkbox might 
+     * be the parent to child checkboxes, and we need to show that a subset of 
      * children are checked.
      */
     indeterminate: {
@@ -113,22 +110,22 @@ export default Vue.extend({
     primary: {
       type:    Boolean,
       default: false
-    },
+    },    
   },
 
   computed: {
     /**
      * Determines if the checkbox is disabled.
-     * @returns boolean: True when the disabled prop is true or when mode is
+     * @returns boolean: True when the disabled prop is true or when mode is 
      * View.
      */
     isDisabled(): boolean {
       return (this.disabled || this.mode === _VIEW);
     },
     /**
-     * Determines if the checkbox is checked when using custom values or
+     * Determines if the checkbox is checked when using custom values or 
      * multiple values.
-     * @returns boolean: True when at least one value is true in a collection or
+     * @returns boolean: True when at least one value is true in a collection or 
      * when value matches `this.valueWhenTrue`.
      */
     isChecked(): boolean {
@@ -165,15 +162,13 @@ export default Vue.extend({
       const click = new CustomEvent('click', customEvent);
 
       // Flip the value
-      const value = cloneDeep(this.value);
-
-      if (this.isMulti(value)) {
+      if (this.isMulti(this.value)) {
         if (this.isChecked) {
-          removeObject(value, this.valueWhenTrue);
+          removeObject(this.value, this.valueWhenTrue);
         } else {
-          addObject(value, this.valueWhenTrue);
+          addObject(this.value, this.valueWhenTrue);
         }
-        this.$emit('input', value);
+        this.$emit('input', this.value);
       } else if (this.isString(this.valueWhenTrue)) {
         if (this.isChecked) {
           this.$emit('input', null);
@@ -181,7 +176,7 @@ export default Vue.extend({
           this.$emit('input', this.valueWhenTrue);
         }
       } else {
-        this.$emit('input', !value);
+        this.$emit('input', !this.value);
         this.$el.dispatchEvent(click);
       }
     },
@@ -202,17 +197,14 @@ export default Vue.extend({
      * @param value A collection of values for the checkbox.
      */
     findTrueValues(value: boolean[]): boolean {
-      return value.find((v) => v === this.valueWhenTrue) || false;
+      return value.find(v => v === this.valueWhenTrue) || false;
     }
   }
 });
 </script>
 
 <template>
-  <div
-    class="checkbox-outer-container"
-    data-checkbox-ctrl
-  >
+  <div class="checkbox-outer-container" data-checkbox-ctrl>
     <label
       class="checkbox-container"
       :class="{ 'disabled': isDisabled}"
@@ -222,13 +214,14 @@ export default Vue.extend({
       @click="clicked($event)"
     >
       <input
+        v-model="value"
         :checked="isChecked"
         :value="valueWhenTrue"
         type="checkbox"
         :tabindex="-1"
         :name="id"
         @click.stop.prevent
-      >
+      />
       <span
         class="checkbox-custom"
         :class="{indeterminate: indeterminate}"
@@ -243,33 +236,15 @@ export default Vue.extend({
         :class="{ 'checkbox-primary': primary }"
       >
         <slot name="label">
-          <t
-            v-if="labelKey"
-            :k="labelKey"
-            :raw="true"
-          />
+          <t v-if="labelKey" :k="labelKey" :raw="true" />
           <template v-else-if="label">{{ label }}</template>
-          <i
-            v-if="tooltipKey"
-            v-clean-tooltip="t(tooltipKey)"
-            class="checkbox-info icon icon-info icon-lg"
-          />
-          <i
-            v-else-if="tooltip"
-            v-clean-tooltip="tooltip"
-            class="checkbox-info icon icon-info icon-lg"
-          />
+          <i v-if="tooltipKey" v-tooltip="t(tooltipKey)" class="checkbox-info icon icon-info icon-lg" />
+          <i v-else-if="tooltip" v-tooltip="tooltip" class="checkbox-info icon icon-info icon-lg" />
         </slot>
       </span>
     </label>
-    <div
-      v-if="descriptionKey || description"
-      class="checkbox-outer-container-description"
-    >
-      <t
-        v-if="descriptionKey"
-        :k="descriptionKey"
-      />
+    <div v-if="descriptionKey || description" class="checkbox-outer-container-description">
+      <t v-if="descriptionKey" :k="descriptionKey" />
       <template v-else-if="description">
         {{ description }}
       </template>

package/rancher-components/Form/LabeledInput/LabeledInput.test.ts

@@ -6,9 +6,15 @@ describe('component: LabeledInput', () => {
   it('should emit input only once', () => {
     const value = '2';
     const delay = 1;
-    const wrapper = mount(LabeledInput, {
+    const wrapper = mount(LabeledInput, { 
       propsData: { delay },
-      mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } }
+      mocks:      {
+        $store: {
+          getters: {
+            'i18n/t': jest.fn()
+          }
+        }
+      }
     });
 
     jest.useFakeTimers();

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -27,7 +27,7 @@ export default (
 
     /**
      * The status class of the Labeled Input and tooltip.
-     * @values info, success, warning, error
+     * @values info, success, warning, error 
      */
     status: {
       type:    String,
@@ -59,7 +59,7 @@ export default (
     },
 
     /**
-     * Disables the password manager prompt to save the contents of the Labeled
+     * Disables the password manager prompt to save the contents of the Labeled 
      * Input.
      */
     ignorePasswordManagers: {
@@ -124,7 +124,7 @@ export default (
 
     tooltipValue(): string | undefined {
       if (this.hasTooltip) {
-        return this.tooltipKey ? this.t(this.tooltipKey) : this.tooltip;
+        return this.tooltipKey ? this.t(this.tooltipKey) : this.tooltip
       }
 
       return undefined;
@@ -207,7 +207,7 @@ export default (
     },
 
     /**
-     * Emit on input with delay. Note: Arrow function is avoided due context
+     * Emit on input with delay. Note: Arrow function is avoided due context 
      * binding.
      */
     delayInput(value: string): void {
@@ -223,7 +223,7 @@ export default (
     },
 
     /**
-     * Handles the behavior of the Labeled Input when blurred and emits the blur
+     * Handles the behavior of the Labeled Input when blurred and emits the blur 
      * event.
      * @see labeled-form-element.ts mixin for onBlurLabeled()
      */
@@ -253,16 +253,10 @@ export default (
   >
     <slot name="label">
       <label v-if="hasLabel">
-        <t
-          v-if="labelKey"
-          :k="labelKey"
-        />
+        <t v-if="labelKey" :k="labelKey" />
         <template v-else-if="label">{{ label }}</template>
 
-        <span
-          v-if="requiredField"
-          class="required"
-        >*</span>
+        <span v-if="requiredField" class="required">*</span>
       </label>
     </slot>
 
@@ -299,7 +293,7 @@ export default (
         @input="onInput($event.target.value)"
         @focus="onFocus"
         @blur="onBlur"
-      >
+      />
     </slot>
 
     <slot name="suffix" />
@@ -314,14 +308,8 @@ export default (
       :hover="hoverTooltip"
       :value="validationMessage"
     />
-    <label
-      v-if="cronHint"
-      class="cron-label"
-    >{{ cronHint }}</label>
-    <label
-      v-if="subLabel"
-      class="sub-label"
-    >{{ subLabel }}</label>
+    <label v-if="cronHint" class="cron-label">{{ cronHint }}</label>
+    <label v-if="subLabel" class="sub-label">{{ subLabel }}</label>
   </div>
 </template>
 <style scoped lang="scss">

package/rancher-components/Form/Radio/RadioButton.vue

@@ -12,25 +12,25 @@ export default Vue.extend({
       default: ''
     },
 
-    /**
+    /** 
      * The value for this option.
-     */
+     */ 
     val: {
       required:  true,
-      validator: () => true
+      validator: x => true
     },
 
-    /**
+    /** 
      * The selected value.
-     */
+     */ 
     value: {
       required:  true,
-      validator: () => true
+      validator: x => true
     },
 
     /**
      * The label shown next to the radio.
-     */
+     */ 
     label: {
       type:    String,
       default: ''
@@ -96,10 +96,6 @@ export default Vue.extend({
     hasDescriptionSlot(): boolean {
       return !!this.$slots.description;
     },
-
-    hasLabelSlot(): boolean {
-      return !!this.$slots.label || !!this.$scopedSlots.label;
-    }
   },
 
   watch: {
@@ -142,7 +138,7 @@ export default Vue.extend({
       type="radio"
       :tabindex="-1"
       @click.stop.prevent
-    >
+    />
     <span
       ref="custom"
       :class="[ isDisabled ? 'text-muted' : '', 'radio-custom']"
@@ -153,28 +149,15 @@ export default Vue.extend({
     />
     <div class="labeling">
       <label
+        v-if="label"
         :class="[ muteLabel ? 'text-muted' : '', 'radio-label', 'm-0']"
         :for="name"
+        v-html="label"
       >
-        <slot
-          v-if="hasLabelSlot"
-          name="label"
-        >
-          <!-- slot content -->
-        </slot>
-        <span
-          v-else-if="label"
-          v-clean-html="label"
-        />
+        <slot name="label">{{ label }}</slot>
       </label>
-      <div
-        v-if="descriptionKey || description"
-        class="radio-button-outer-container-description"
-      >
-        <t
-          v-if="descriptionKey"
-          :k="descriptionKey"
-        />
+      <div v-if="descriptionKey || description" class="radio-button-outer-container-description">
+        <t v-if="descriptionKey" :k="descriptionKey" />
         <template v-else-if="description">
           {{ description }}
         </template>

package/rancher-components/Form/Radio/RadioGroup.vue

@@ -28,7 +28,7 @@ export default Vue.extend({
     },
 
     /**
-     * If options are just values, then labels can be a corresponding display
+     * If options are just values, then labels can be a corresponding display 
      * value.
      */
     labels: {
@@ -152,7 +152,7 @@ export default Vue.extend({
      */
     clickNext(direction: number): void {
       const opts = this.normalizedOptions;
-      const selected = opts.find((x) => x.value === this.value);
+      const selected = opts.find(x => x.value === this.value);
       let newIndex = (selected ? opts.indexOf(selected) : -1) + direction;
 
       if (newIndex >= opts.length) {
@@ -169,29 +169,15 @@ export default Vue.extend({
 
 <template>
   <div>
-    <div
-      v-if="label || labelKey || tooltip || tooltipKey || $slots.label"
-      class="radio-group label"
-    >
+    <div v-if="label || labelKey || tooltip || tooltipKey || $slots.label" class="radio-group label">
       <slot name="label">
         <h3>
-          <t
-            v-if="labelKey"
-            :k="labelKey"
-          />
+          <t v-if="labelKey" :k="labelKey" />
           <template v-else-if="label">
             {{ label }}
           </template>
-          <i
-            v-if="tooltipKey"
-            v-clean-tooltip="t(tooltipKey)"
-            class="icon icon-info icon-lg"
-          />
-          <i
-            v-else-if="tooltip"
-            v-clean-tooltip="tooltip"
-            class="icon icon-info icon-lg"
-          />
+          <i v-if="tooltipKey" v-tooltip="t(tooltipKey)" class="icon icon-info icon-lg" />
+          <i v-else-if="tooltip" v-tooltip="tooltip" class="icon icon-info icon-lg" />
         </h3>
       </slot>
     </div>
@@ -206,12 +192,7 @@ export default Vue.extend({
         v-for="(option, i) in normalizedOptions"
         :key="name+'-'+i"
       >
-        <slot
-          :listeners="$listeners"
-          :option="option"
-          :is-disabled="isDisabled"
-          :name="i"
-        >
+        <slot :listeners="$listeners" :option="option" :name="i">
           <RadioButton
             :key="name+'-'+i"
             :name="name"

package/rancher-components/Form/TextArea/TextAreaAutoGrow.vue

@@ -24,14 +24,14 @@ export default Vue.extend({
     },
 
     /**
-     * Sets the Minimum height for Text Area. Prevents the height from becoming
+     * Sets the Minimum height for Text Area. Prevents the height from becoming 
      * smaller than the value specified in minHeight.
      */
     minHeight: {
       type:    Number,
       default: 25
     },
-
+    
     /**
      * Sets the maximum height for Text Area. Prevents the height from becoming
      * larger than the value specified in maxHeight.
@@ -50,7 +50,7 @@ export default Vue.extend({
     },
 
     /**
-     * Specifies whether Text Area is subject to spell checking by the
+     * Specifies whether Text Area is subject to spell checking by the 
      * underlying browser/OS.
      */
     spellcheck: {
@@ -83,7 +83,7 @@ export default Vue.extend({
     },
 
     /**
-     * Sets the height to one-line for SSR pageload so that it's already right
+     * Sets the height to one-line for SSR pageload so that it's already right 
      * (unless the input is long)
      */
     style(): string {
@@ -112,7 +112,7 @@ export default Vue.extend({
   },
 
   methods: {
-    /**
+    /** 
      * Emits the input event and resizes the Text Area.
     */
     onInput(val: string): void {
@@ -128,7 +128,7 @@ export default Vue.extend({
     },
 
     /**
-     * Sets the overflowY and height of the Text Area based on the content
+     * Sets the overflowY and height of the Text Area based on the content 
      * entered (calculated via scroll height).
      */
     autoSize(): void {
@@ -155,7 +155,6 @@ export default Vue.extend({
 <template>
   <textarea
     ref="ta"
-    data-testid="text-area-auto-grow"
     :disabled="isDisabled"
     :style="style"
     :placeholder="placeholder"

package/rancher-components/Form/ToggleSwitch/ToggleSwitch.test.ts

@@ -1,11 +1,11 @@
-import { shallowMount, Wrapper } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import { ToggleSwitch } from './index';
 
-describe('toggleSwitch.vue', () => {
+describe('ToggleSwitch.vue', () => {
   it('renders falsy by default', () => {
     const wrapper = shallowMount(ToggleSwitch);
 
-    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
+    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement
 
     expect(toggleInput.checked).toBeFalsy();
   });
@@ -13,58 +13,71 @@ describe('toggleSwitch.vue', () => {
   it('renders a true value', () => {
     const wrapper = shallowMount(
       ToggleSwitch,
-      { propsData: { value: true } });
+      {
+        propsData: {
+          value: true
+        }
+      });
 
-    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
+    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement
 
     expect(toggleInput.checked).toBe(true);
   });
 
-  it('updates from falsy to truthy when props change', async() => {
+  it('updates from falsy to truthy when props change', async () => {
     const wrapper = shallowMount(ToggleSwitch);
-
-    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
+  
+    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement
 
     expect(toggleInput.checked).toBe(false);
 
     await wrapper.setProps({ value: true });
-
+  
     expect(toggleInput.checked).toBe(true);
   });
 
-  it('emits an input event with a true value', async() => {
-    const wrapper: Wrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(ToggleSwitch);
+  it('emits an input event with a true value', async () => {
+    const wrapper = shallowMount(ToggleSwitch);
 
-    wrapper.vm.toggle(true);
+    (wrapper.vm as any).toggle(true);
 
     await wrapper.vm.$nextTick();
 
     expect(wrapper.emitted().input?.length).toBe(1);
     expect(wrapper.emitted().input?.[0][0]).toBe(true);
+
   });
 
-  it('emits an input event with a false value', async() => {
-    const wrapper: Wrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(
+  it('emits an input event with a false value', async () => {
+    const wrapper = shallowMount(
       ToggleSwitch,
-      { propsData: { value: true } }
+      {
+        propsData: {
+          value: true
+        }
+      }
     );
 
-    wrapper.vm.toggle(false);
+    (wrapper.vm as any).toggle(false);
 
     await wrapper.vm.$nextTick();
 
     expect(wrapper.emitted().input?.length).toBe(1);
     expect(wrapper.emitted().input?.[0][0]).toBe(false);
-  });
+  })
 
-  it('emits an input event with a custom onValue', async() => {
+  it('emits an input event with a custom onValue', async () => {
     const onValue = 'THE TRUTH';
 
-    const wrapper: Wrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(
+    const wrapper = shallowMount(
       ToggleSwitch,
-      { propsData: { onValue } });
+      {
+        propsData: {
+          onValue,
+        }
+      });
 
-    wrapper.vm.toggle(true);
+    (wrapper.vm as any).toggle(true);
 
     await wrapper.vm.$nextTick();
 
@@ -72,10 +85,10 @@ describe('toggleSwitch.vue', () => {
     expect(wrapper.emitted().input?.[0][0]).toBe(onValue);
   });
 
-  it('emits an input event with a custom offValue', async() => {
+  it('emits an input event with a custom offValue', async () => {
     const offValue = 'NOT THE TRUTH';
 
-    const wrapper: Wrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(
+    const wrapper = shallowMount(
       ToggleSwitch,
       {
         propsData: {
@@ -84,11 +97,11 @@ describe('toggleSwitch.vue', () => {
         }
       });
 
-    wrapper.vm.toggle(false);
+    (wrapper.vm as any).toggle(false);
 
     await wrapper.vm.$nextTick();
 
     expect(wrapper.emitted().input?.length).toBe(1);
     expect(wrapper.emitted().input?.[0][0]).toBe(offValue);
-  });
+  })
 });

package/rancher-components/Form/ToggleSwitch/ToggleSwitch.vue

@@ -31,6 +31,13 @@ export default Vue.extend({
     return { state: false as boolean | string | number };
   },
 
+  methods: {
+    toggle(neu: boolean | string | number) {
+      this.state = neu === null ? !this.state : neu;
+      this.$emit('input', this.state ? this.onValue : this.offValue);
+    }
+  },
+
   watch: {
     value: {
       handler() {
@@ -38,37 +45,18 @@ export default Vue.extend({
       },
       immediate: true
     }
-  },
-
-  methods: {
-    toggle(neu: boolean | string | number) {
-      this.state = neu === null ? !this.state : neu;
-      this.$emit('input', this.state ? this.onValue : this.offValue);
-    }
   }
 });
 </script>
 
 <template>
   <span class="toggle-container">
-    <span
-      class="label no-select hand"
-      :class="{ active: !state}"
-      @click="toggle(false)"
-    >{{ offLabel }}</span>
+    <span class="label no-select hand" :class="{ active: !state}" @click="toggle(false)">{{ offLabel }}</span>
     <label class="switch hand">
-      <input
-        type="checkbox"
-        :checked="state"
-        @input="toggle(null)"
-      >
-      <span class="slider round" />
+      <input type="checkbox" :checked="state" @input="toggle(null)">
+      <span class="slider round"></span>
     </label>
-    <span
-      class="label no-select hand"
-      :class="{ active: state}"
-      @click="toggle(true)"
-    >{{ onLabel }}</span>
+    <span class="label no-select hand" :class="{ active: state}" @click="toggle(true)">{{ onLabel }}</span>
   </span>
 </template>