@rancher/shell 0.3.26 → 0.3.28

package/rancher-components/Banner/Banner.vue

@@ -27,13 +27,6 @@ export default Vue.extend({
       type:    String,
       default: null
     },
-    /**
-     * Add icon for the banner
-     */
-    icon: {
-      type:    String,
-      default: null
-    },
     /**
      * Toggles the banner's close button.
      */
@@ -65,137 +58,31 @@ export default Vue.extend({
     class="banner"
     :class="{
       [color]: true,
+      closable,
+      stacked
     }"
   >
-    <div
-      v-if="icon"
-      class="banner__icon"
-      data-testid="banner-icon"
-    >
-      <i
-        class="icon icon-2x"
-        :class="icon"
-      />
-    </div>
-    <div
-      class="banner__content"
-      data-testid="banner-content"
-      :class="{
-        closable,
-        stacked,
-        icon
-      }"
-    >
-      <slot>
-        <t
-          v-if="labelKey"
-          :k="labelKey"
-          :raw="true"
-        />
-        <span v-else-if="messageLabel">{{ messageLabel }}</span>
-        <span
-          v-else
-          v-clean-html="nlToBr(label)"
-        />
-      </slot>
-      <div
-        v-if="closable"
-        class="banner__content__closer"
-        @click="$emit('close')"
-      >
-        <i
-          data-testid="banner-close"
-          class="icon icon-close closer-icon"
-        />
-      </div>
+    <slot>
+      <t v-if="labelKey" :k="labelKey" :raw="true" />
+      <span v-else-if="messageLabel">{{ messageLabel }}</span>
+      <span v-else v-html="nlToBr(label)" />
+    </slot>
+    <div v-if="closable" class="closer" @click="$emit('close')">
+      <i class="icon icon-2x icon-close closer-icon" />
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-$left-border-size: 4px;
-$icon-size: 24px;
-
-.banner {
-  display: flex;
-  margin: 15px 0;
-  position: relative;
-  width: 100%;
-  color: var(--body-text);
-
-  &__icon {
-    width: $icon-size * 2;
-    flex-grow: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-sizing: content-box;
-
-    .primary & {
-      background: var(--primary);
-    }
-
-    .secondary & {
-      background: var(--default);
-    }
-
-    .success & {
-      background: var(--success);
-    }
+  $left-border-size: 4px;
 
-    .info & {
-      background: var(--info);
-    }
-
-    .warning & {
-      background: var(--warning);
-    }
-
-    .error & {
-      background: var(--error);
-      color: var(--primary-text);
-    }
-  }
-
-  &__content {
+  .banner {
     padding: 10px;
+    margin: 15px 0;
+    width: 100%;
     transition: all 0.2s ease;
+    position: relative;
     line-height: 20px;
-    width: 100%;
-    border-left: solid $left-border-size transparent;
-    display: flex;
-    gap: 3px;
-
-    .primary & {
-      background: var(--primary);
-      border-color: var(--primary);
-    }
-
-    .secondary & {
-      background: var(--default-banner-bg);
-      border-color: var(--default);
-    }
-
-    .success & {
-      background: var(--success-banner-bg);
-      border-color: var(--success);
-    }
-
-    .info & {
-      background: var(--info-banner-bg);
-      border-color: var(--info);
-    }
-
-    .warning & {
-      background: var(--warning-banner-bg);
-      border-color: var(--warning);
-    }
-
-    .error & {
-      background: var(--error-banner-bg);
-      border-color: var(--error);
-      color: var(--error);
-    }
 
     &.stacked {
       padding: 0 10px;
@@ -210,10 +97,10 @@ $icon-size: 24px;
     }
 
     &.closable {
-      padding-right: $icon-size * 2;
+      padding-right: 40px;
     }
 
-    &__closer {
+    .closer {
       display: flex;
       align-items: center;
 
@@ -222,11 +109,12 @@ $icon-size: 24px;
       top: 0;
       right: 0;
       bottom: 0;
-      width: $icon-size;
-      line-height: $icon-size;
+      width: 40px;
+      line-height: 42px;
       text-align: center;
 
       .closer-icon {
+        font-size: 22px;
         opacity: 0.7;
 
         &:hover {
@@ -236,9 +124,40 @@ $icon-size: 24px;
       }
     }
 
-    &.icon {
-      border-left: none;
+    &.primary {
+      background: var(--primary);
+      border-left: solid $left-border-size var(--primary);
+      color: var(--body-text);
+    }
+
+    &.secondary {
+      background: var(--default-banner-bg);
+      border-left: solid $left-border-size var(--default);
+      color: var(--body-text);
+    }
+
+    &.success {
+      background: var(--success-banner-bg);
+      border-left: solid $left-border-size var(--success);
+      color: var(--body-text);
+    }
+
+    &.info {
+      background: var(--info-banner-bg);
+      border-left: solid $left-border-size var(--info);
+      color: var(--body-text);
+    }
+
+    &.warning {
+      background: var(--warning-banner-bg);
+      border-left: solid $left-border-size var(--warning);
+      color: var(--body-text);
+    }
+
+    &.error {
+      background: var(--error-banner-bg);
+      border-left: solid $left-border-size var(--error);
+      color: var(--error);
     }
   }
-}
 </style>

package/rancher-components/Card/Card.vue

@@ -49,45 +49,28 @@ export default Vue.extend({
     sticky: {
       type:    Boolean,
       default: false,
-    },
+    },    
   }
 });
 </script>
 
 <template>
-  <div
-    class="card-container"
-    :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}"
-    data-testid="card"
-  >
+  <div class="card-container" :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}">
     <div class="card-wrap">
-      <div
-        class="card-title"
-        data-testid="card-title-slot"
-      >
+      <div class="card-title">
         <slot name="title">
           {{ title }}
         </slot>
       </div>
-      <hr>
-      <div
-        class="card-body"
-        data-testid="card-body-slot"
-      >
+      <hr />
+      <div class="card-body">
         <slot name="body">
           {{ content }}
         </slot>
       </div>
-      <div
-        v-if="showActions"
-        class="card-actions"
-        data-testid="card-actions-slot"
-      >
+      <div v-if="showActions" class="card-actions">
         <slot name="actions">
-          <button
-            class="btn role-primary"
-            @click="buttonAction"
-          >
+          <button class="btn role-primary" @click="buttonAction">
             {{ buttonText }}
           </button>
         </slot>

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

@@ -1,13 +1,7 @@
-import { shallowMount, Wrapper } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import { Checkbox } from './index';
 
-describe('checkbox.vue', () => {
-  const event = {
-    target:          { tagName: 'input', href: null },
-    stopPropagation: () => { },
-    preventDefault:  () => { }
-  } as unknown as MouseEvent;
-
+describe('Checkbox.vue', () => {
   it('is unchecked by default', () => {
     const wrapper = shallowMount(Checkbox);
     const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
@@ -22,7 +16,7 @@ describe('checkbox.vue', () => {
     expect(cbInput.checked).toBe(true);
   });
 
-  it('updates from false to true when props change', async() => {
+  it('updates from false to true when props change', async () => {
     const wrapper = shallowMount(Checkbox);
     const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
 
@@ -33,36 +27,51 @@ describe('checkbox.vue', () => {
     expect(cbInput.checked).toBe(true);
   });
 
-  it('emits an input event with a true value', async() => {
-    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = shallowMount(Checkbox);
+  it('emits an input event with a true value', async () => {
+    const wrapper = shallowMount(Checkbox);
+    const event = {
+      target: { tagName: 'input', href: null },
+      stopPropagation: () => { },
+      preventDefault: () => { }
+    };
 
-    wrapper.vm.clicked(event);
+    (wrapper.vm as any).clicked(event);
     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 custom valueWhenTrue', async() => {
+  it('emits an input event with a custom valueWhenTrue', async () => {
     const valueWhenTrue = 'BIG IF TRUE';
+    const event = {
+      target: { tagName: 'input', href: null },
+      stopPropagation: () => { },
+      preventDefault: () => { }
+    };
 
-    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = shallowMount(Checkbox, { propsData: { value: false, valueWhenTrue } });
+    const wrapper = shallowMount(Checkbox, { propsData: { value: false, valueWhenTrue } });
 
-    wrapper.vm.clicked(event);
+    (wrapper.vm as any).clicked(event);
     await wrapper.vm.$nextTick();
 
     expect(wrapper.emitted().input?.length).toBe(1);
     expect(wrapper.emitted().input?.[0][0]).toBe(valueWhenTrue);
   });
 
-  it('updates from valueWhenTrue to falsy', async() => {
+  it('updates from valueWhenTrue to falsy', async () => {
     const valueWhenTrue = 'REAL HUGE IF FALSE';
+    const event = {
+      target: { tagName: 'input', href: null },
+      stopPropagation: () => { },
+      preventDefault: () => { }
+    };
 
-    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = shallowMount(Checkbox, { propsData: { value: valueWhenTrue, valueWhenTrue } });
+    const wrapper = shallowMount(Checkbox, { propsData: { value: valueWhenTrue, valueWhenTrue } });
 
-    wrapper.vm.clicked(event);
+    (wrapper.vm as any).clicked(event);
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.emitted().input?.[0][0]).toBeNull();
-  });
+    expect(wrapper.emitted().input?.[0][0]).toBe(null);
+  })
 });

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">