@rancher/shell 0.3.15 → 0.3.17

package/plugins/plugin.js

@@ -12,9 +12,17 @@ export default async function(context) {
   // Provide a mechanism to load the UI without the plugins loaded - in case there is a problem
   let loadPlugins = true;
 
-  if (context.route?.path.endsWith('/safeMode')) {
+  const queryKeys = Object.keys(context.route?.query || {}).map((q) => q.toLowerCase());
+
+  if (queryKeys.includes('safemode')) {
     loadPlugins = false;
     console.warn('Safe Mode - plugins will not be loaded'); // eslint-disable-line no-console
+    setTimeout(() => {
+      context.store.dispatch('growl/success', {
+        title:   context.store.getters['i18n/t']('plugins.safeMode.title'),
+        message: context.store.getters['i18n/t']('plugins.safeMode.message')
+      }, { root: true });
+    }, 1000);
   }
 
   if (loadPlugins) {

package/plugins/steve/actions.js

@@ -128,6 +128,10 @@ export default {
 
         finishDeferred(key, 'resolve', out);
 
+        if (opt.method === 'post' || opt.method === 'put') {
+          handleValidationWarnings(res);
+        }
+
         return out;
       });
     }
@@ -192,6 +196,24 @@ export default {
 
       return Promise.reject(out);
     }
+
+    function handleValidationWarnings(res) {
+      const warnings = (res.headers?.warning || '').split(',');
+
+      if (!warnings.length || !warnings[0]) {
+        return;
+      }
+
+      const message = warnings.reduce((message, warning) => {
+        return `${ message }\n${ warning.trim() }`;
+      }, `Validation Warnings for ${ opt.url }\n`);
+
+      if (process.env.dev) {
+        console.warn(`${ message }\n\n`, res.data); // eslint-disable-line no-console
+      } else {
+        console.debug(message); // eslint-disable-line no-console
+      }
+    }
   },
 
   promptMove({ commit, state }, resources) {

package/rancher-components/BadgeState/BadgeState.vue

@@ -60,7 +60,11 @@ export default Vue.extend({
 
 <template>
   <span :class="{'badge-state': true, [bg]: true}">
-    <i v-if="icon" class="icon" :class="{[icon]: true, 'mr-5': !!msg}" />{{ msg }}
+    <i
+      v-if="icon"
+      class="icon"
+      :class="{[icon]: true, 'mr-5': !!msg}"
+    />{{ msg }}
   </span>
 </template>
 

package/rancher-components/Banner/Banner.test.ts

@@ -1,13 +1,63 @@
 import { mount } from '@vue/test-utils';
 import { Banner } from './index';
+import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: Banner', () => {
   it('should display text based on label', () => {
     const label = 'test';
-    const wrapper = mount(Banner, { propsData: { label } });
+    const wrapper = mount(
+      Banner,
+      {
+        directives: { cleanHtmlDirective },
+        propsData:  { label }
+      });
 
     const element = wrapper.find('span').element;
 
     expect(element.textContent).toBe(label);
   });
+
+  it('should display an icon', () => {
+    const icon = 'my-icon';
+    const wrapper = mount(Banner, { propsData: { icon } });
+
+    const element = wrapper.find(`.${ icon }`).element;
+
+    expect(element.classList).toContain(icon);
+  });
+
+  it('should not display an icon', () => {
+    const wrapper = mount(Banner);
+
+    const element = wrapper.find(`[data-testid="banner-icon"]`).element;
+
+    expect(element).not.toBeDefined();
+  });
+
+  it('should emit close event', () => {
+    const wrapper = mount(Banner, { propsData: { closable: true } });
+    const element = wrapper.find(`[data-testid="banner-close"]`).element;
+
+    element.click();
+
+    expect(wrapper.emitted('close')).toHaveLength(1);
+  });
+
+  it('should add the right color', () => {
+    const color = 'red';
+    const wrapper = mount(Banner, { propsData: { color } });
+
+    const element = wrapper.element;
+
+    expect(element.classList).toContain(color);
+  });
+
+  it('should stack the banner messages', () => {
+    const stacked = true;
+    const wrapper = mount(Banner, { propsData: { stacked } });
+
+    const element = wrapper.find(`[data-testid="banner-content"]`).element;
+
+    expect(element.classList).toContain('stacked');
+  });
 });

package/rancher-components/Banner/Banner.vue

@@ -27,6 +27,13 @@ export default Vue.extend({
       type:    String,
       default: null
     },
+    /**
+     * Add icon for the banner
+     */
+    icon: {
+      type:    String,
+      default: null
+    },
     /**
      * Toggles the banner's close button.
      */
@@ -58,31 +65,137 @@ export default Vue.extend({
     class="banner"
     :class="{
       [color]: true,
-      closable,
-      stacked
     }"
   >
-    <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
+      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>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-  $left-border-size: 4px;
+$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);
+    }
 
-  .banner {
+    .info & {
+      background: var(--info);
+    }
+
+    .warning & {
+      background: var(--warning);
+    }
+
+    .error & {
+      background: var(--error);
+      color: var(--primary-text);
+    }
+  }
+
+  &__content {
     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;
@@ -97,10 +210,10 @@ export default Vue.extend({
     }
 
     &.closable {
-      padding-right: 40px;
+      padding-right: $icon-size * 2;
     }
 
-    .closer {
+    &__closer {
       display: flex;
       align-items: center;
 
@@ -109,12 +222,11 @@ export default Vue.extend({
       top: 0;
       right: 0;
       bottom: 0;
-      width: 40px;
-      line-height: 42px;
+      width: $icon-size;
+      line-height: $icon-size;
       text-align: center;
 
       .closer-icon {
-        font-size: 22px;
         opacity: 0.7;
 
         &:hover {
@@ -124,40 +236,9 @@ export default Vue.extend({
       }
     }
 
-    &.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);
+    &.icon {
+      border-left: none;
     }
   }
+}
 </style>

package/rancher-components/Card/Card.vue

@@ -49,28 +49,45 @@ export default Vue.extend({
     sticky: {
       type:    Boolean,
       default: false,
-    },    
+    },
   }
 });
 </script>
 
 <template>
-  <div class="card-container" :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}">
+  <div
+    class="card-container"
+    :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}"
+    data-testid="card"
+  >
     <div class="card-wrap">
-      <div class="card-title">
+      <div
+        class="card-title"
+        data-testid="card-title-slot"
+      >
         <slot name="title">
           {{ title }}
         </slot>
       </div>
-      <hr />
-      <div class="card-body">
+      <hr>
+      <div
+        class="card-body"
+        data-testid="card-body-slot"
+      >
         <slot name="body">
           {{ content }}
         </slot>
       </div>
-      <div v-if="showActions" class="card-actions">
+      <div
+        v-if="showActions"
+        class="card-actions"
+        data-testid="card-actions-slot"
+      >
         <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,7 +1,13 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, Wrapper } from '@vue/test-utils';
 import { Checkbox } from './index';
 
-describe('Checkbox.vue', () => {
+describe('checkbox.vue', () => {
+  const event = {
+    target:          { tagName: 'input', href: null },
+    stopPropagation: () => { },
+    preventDefault:  () => { }
+  } as unknown as MouseEvent;
+
   it('is unchecked by default', () => {
     const wrapper = shallowMount(Checkbox);
     const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
@@ -16,7 +22,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;
 
@@ -27,51 +33,36 @@ describe('Checkbox.vue', () => {
     expect(cbInput.checked).toBe(true);
   });
 
-  it('emits an input event with a true value', async () => {
-    const wrapper = shallowMount(Checkbox);
-    const event = {
-      target: { tagName: 'input', href: null },
-      stopPropagation: () => { },
-      preventDefault: () => { }
-    };
+  it('emits an input event with a true value', async() => {
+    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = shallowMount(Checkbox);
 
-    (wrapper.vm as any).clicked(event);
+    wrapper.vm.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 = shallowMount(Checkbox, { propsData: { value: false, valueWhenTrue } });
+    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = shallowMount(Checkbox, { propsData: { value: false, valueWhenTrue } });
 
-    (wrapper.vm as any).clicked(event);
+    wrapper.vm.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 = shallowMount(Checkbox, { propsData: { value: valueWhenTrue, valueWhenTrue } });
+    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = shallowMount(Checkbox, { propsData: { value: valueWhenTrue, valueWhenTrue } });
 
-    (wrapper.vm as any).clicked(event);
+    wrapper.vm.clicked(event);
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.emitted().input?.[0][0]).toBe(null);
-  })
+    expect(wrapper.emitted().input?.[0][0]).toBeNull();
+  });
 });

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

@@ -2,8 +2,11 @@
 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.
@@ -46,8 +49,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: {
@@ -110,22 +113,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 {
@@ -162,13 +165,15 @@ export default Vue.extend({
       const click = new CustomEvent('click', customEvent);
 
       // Flip the value
-      if (this.isMulti(this.value)) {
+      const value = cloneDeep(this.value);
+
+      if (this.isMulti(value)) {
         if (this.isChecked) {
-          removeObject(this.value, this.valueWhenTrue);
+          removeObject(value, this.valueWhenTrue);
         } else {
-          addObject(this.value, this.valueWhenTrue);
+          addObject(value, this.valueWhenTrue);
         }
-        this.$emit('input', this.value);
+        this.$emit('input', value);
       } else if (this.isString(this.valueWhenTrue)) {
         if (this.isChecked) {
           this.$emit('input', null);
@@ -176,7 +181,7 @@ export default Vue.extend({
           this.$emit('input', this.valueWhenTrue);
         }
       } else {
-        this.$emit('input', !this.value);
+        this.$emit('input', !value);
         this.$el.dispatchEvent(click);
       }
     },
@@ -197,14 +202,17 @@ 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}"
@@ -214,14 +222,13 @@ 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}"
@@ -236,15 +243,33 @@ 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-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" />
+          <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"
+          />
         </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,15 +6,9 @@ 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();