@rancher/shell 0.3.0 → 0.3.1

package/rancher-components/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,42 +65,135 @@ 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)"
+    <div
+      v-if="icon"
+      class="banner__icon"
+      data-testid="banner-icon"
+    >
+      <i
+        class="icon icon-2x"
+        :class="icon"
       />
-    </slot>
+    </div>
     <div
-      v-if="closable"
-      class="closer"
-      @click="$emit('close')"
+      class="banner__content"
+      data-testid="banner-content"
+      :class="{
+        closable,
+        stacked,
+        icon
+      }"
     >
-      <i class="icon icon-2x icon-close closer-icon" />
+      <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="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%;
+
+  &__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);
+    }
 
-  .banner {
+    .success & {
+      background: var(--success);
+    }
+
+    .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;
+
+    .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;
@@ -108,10 +208,10 @@ export default Vue.extend({
     }
 
     &.closable {
-      padding-right: 40px;
+      padding-right: $icon-size * 2;
     }
 
-    .closer {
+    &__closer {
       display: flex;
       align-items: center;
 
@@ -120,12 +220,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 {
@@ -135,40 +234,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/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', () => {
+  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;
@@ -28,14 +34,9 @@ describe('Checkbox.vue', () => {
   });
 
   it('emits an input event with a true value', async() => {
-    const wrapper = shallowMount(Checkbox);
-    const event = {
-      target:          { tagName: 'input', href: null },
-      stopPropagation: () => { },
-      preventDefault:  () => { }
-    };
+    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);
@@ -44,15 +45,10 @@ describe('Checkbox.vue', () => {
 
   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);
@@ -61,15 +57,10 @@ describe('Checkbox.vue', () => {
 
   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);

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

@@ -2,6 +2,7 @@
 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({
   props: {
@@ -162,13 +163,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 +179,7 @@ export default Vue.extend({
           this.$emit('input', this.valueWhenTrue);
         }
       } else {
-        this.$emit('input', !this.value);
+        this.$emit('input', !value);
         this.$el.dispatchEvent(click);
       }
     },
@@ -217,7 +220,6 @@ export default Vue.extend({
       @click="clicked($event)"
     >
       <input
-        v-model="value"
         :checked="isChecked"
         :value="valueWhenTrue"
         type="checkbox"

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

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, Wrapper } from '@vue/test-utils';
 import { ToggleSwitch } from './index';
 
 describe('ToggleSwitch.vue', () => {
@@ -33,9 +33,9 @@ describe('ToggleSwitch.vue', () => {
   });
 
   it('emits an input event with a true value', async() => {
-    const wrapper = shallowMount(ToggleSwitch);
+    const wrapper: Wrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(ToggleSwitch);
 
-    (wrapper.vm as any).toggle(true);
+    wrapper.vm.toggle(true);
 
     await wrapper.vm.$nextTick();
 
@@ -44,12 +44,12 @@ describe('ToggleSwitch.vue', () => {
   });
 
   it('emits an input event with a false value', async() => {
-    const wrapper = shallowMount(
+    const wrapper: Wrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(
       ToggleSwitch,
       { propsData: { value: true } }
     );
 
-    (wrapper.vm as any).toggle(false);
+    wrapper.vm.toggle(false);
 
     await wrapper.vm.$nextTick();
 
@@ -60,11 +60,11 @@ describe('ToggleSwitch.vue', () => {
   it('emits an input event with a custom onValue', async() => {
     const onValue = 'THE TRUTH';
 
-    const wrapper = shallowMount(
+    const wrapper: Wrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(
       ToggleSwitch,
       { propsData: { onValue } });
 
-    (wrapper.vm as any).toggle(true);
+    wrapper.vm.toggle(true);
 
     await wrapper.vm.$nextTick();
 
@@ -75,7 +75,7 @@ describe('ToggleSwitch.vue', () => {
   it('emits an input event with a custom offValue', async() => {
     const offValue = 'NOT THE TRUTH';
 
-    const wrapper = shallowMount(
+    const wrapper: Wrapper<InstanceType<typeof ToggleSwitch>> = shallowMount(
       ToggleSwitch,
       {
         propsData: {
@@ -84,7 +84,7 @@ describe('ToggleSwitch.vue', () => {
         }
       });
 
-    (wrapper.vm as any).toggle(false);
+    wrapper.vm.toggle(false);
 
     await wrapper.vm.$nextTick();
 

package/rancher-components/components/LabeledTooltip/LabeledTooltip.vue

@@ -84,7 +84,6 @@ export default Vue.extend({
         position:  absolute;
         right: 30px;
         top: $input-padding-lg;
-        font-size: 20px;
         z-index: z-index(hoverOverContent);
      }
 

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

@@ -2,7 +2,7 @@ import { mount, Wrapper } from '@vue/test-utils';
 import { StringList } from './index';
 
 describe('StringList.vue', () => {
-  let wrapper: Wrapper<Vue>;
+  let wrapper: Wrapper<InstanceType<typeof StringList>>;
 
   beforeEach(() => {
     wrapper = mount(StringList, { propsData: { items: [] } });
@@ -124,7 +124,7 @@ describe('StringList.vue', () => {
       await inputField.setValue('F');
       await wrapper.vm.$nextTick();
 
-      const emitted = (wrapper.emitted('type:item') as any)[0][0][0];
+      const emitted = (wrapper.emitted('type:item') || [])[0][0][0];
 
       expect(emitted).toBe('F');
     });
@@ -240,7 +240,7 @@ describe('StringList.vue', () => {
 
         await wrapper.vm.$nextTick();
 
-        const itemsCount = (wrapper.emitted('change') as any)[0][0].length;
+        const itemsCount = (wrapper.emitted('change') || [])[0][0].length;
 
         expect(itemsCount).toBe(0);
       });
@@ -296,7 +296,7 @@ describe('StringList.vue', () => {
       await inputField.trigger('keydown.enter');
       await wrapper.vm.$nextTick();
 
-      const emitted = (wrapper.emitted('change') as any)[0][0][0];
+      const emitted = (wrapper.emitted('change') || [])[0][0][0];
 
       expect(emitted).toBe(validItem.trim());
     });
@@ -317,7 +317,7 @@ describe('StringList.vue', () => {
       await inputField.trigger('keydown.enter');
       await wrapper.vm.$nextTick();
 
-      const emitted = (wrapper.emitted('change') as any)[0][0][0];
+      const emitted = (wrapper.emitted('change') || [])[0][0][0];
 
       expect(emitted).toBe(validItem.trim());
     });
@@ -453,7 +453,7 @@ describe('StringList.vue', () => {
 
       await inputField.setValue('test');
 
-      const isDuplicate = (wrapper.emitted('errors') as any)[0][0].duplicate;
+      const isDuplicate = (wrapper.emitted('errors') || [])[0][0].duplicate;
 
       expect(isDuplicate).toBe(true);
     });
@@ -475,7 +475,7 @@ describe('StringList.vue', () => {
       // it is not duplicate, reset duplicate error -> emit false
       await inputField.setValue('test-1');
 
-      const isDuplicate = (wrapper.emitted('errors') as any)[0][0].duplicate;
+      const isDuplicate = (wrapper.emitted('errors') || [])[0][0].duplicate;
 
       expect(isDuplicate).toBe(false);
     });

package/rancher-components/components/StringList/StringList.vue

@@ -189,37 +189,42 @@ export default Vue.extend({
         return;
       }
       if (this.editedItem) {
+        this.deleteAndSelectNext(this.editedItem);
         this.toggleEditMode(false);
 
         return;
       }
       if (this.selected) {
-        const index = findStringIndex(this.items, this.selected, false);
+        this.deleteAndSelectNext(this.selected);
+      }
+    },
 
-        if (index !== -1) {
-          /**
-           * Select the next item in the list when an item is to be deleted.
-           */
-          const item = (this.items[index + 1] || this.items[index - 1]);
+    deleteAndSelectNext(currItem: string) {
+      const index = findStringIndex(this.items, currItem, false);
 
-          this.onSelect(item);
-          this.setFocus(item);
+      if (index !== -1) {
+        /**
+         * Select the next item in the list.
+         */
+        const item = (this.items[index + 1] || this.items[index - 1]);
 
-          this.deleteItem(this.items[index]);
-        }
+        this.onSelect(item);
+        this.setFocus(item);
+
+        this.deleteItem(this.items[index]);
       }
     },
 
     setFocus(refId: string) {
-      this.$nextTick(() => this.getElemByRef(refId)?.focus());
+      this.$nextTick(() => (this.getElemByRef(refId) as Vue & HTMLElement)?.focus());
     },
 
     /**
      * Move scrollbar when the selected item is over the top or bottom side of the box
      */
     moveScrollbar(arrow: Arrow, value?: number) {
-      const box = this.getElemByRef(BOX);
-      const item = this.getElemByRef(this.selected || '');
+      const box = this.getElemByRef(BOX) as HTMLElement;
+      const item = this.getElemByRef(this.selected || '') as HTMLElement;
 
       if (box && item && item.className.includes(CLASS.item)) {
         const boxRect = box.getClientRects()[0];
@@ -248,7 +253,7 @@ export default Vue.extend({
     },
 
     toggleErrorClass(refId: string, val: boolean) {
-      const input = this.getElemByRef(refId)?.$el;
+      const input = (this.getElemByRef(refId) as Vue)?.$el;
 
       if (input) {
         if (val) {
@@ -306,7 +311,7 @@ export default Vue.extend({
     getElemByRef(id: string) {
       const ref = this.$refs[id];
 
-      return (Array.isArray(ref) ? ref[0] : ref) as any;
+      return Array.isArray(ref) ? ref[0] : ref;
     },
 
     /**
@@ -527,6 +532,7 @@ export default Vue.extend({
         width: auto;
         user-select: none;
         overflow: hidden;
+        white-space: no-wrap;
         text-overflow: ellipsis;
         padding-top: 1px;
       }

package/scripts/test-plugins-build.sh

@@ -78,11 +78,19 @@ rm -rf ${BASE_DIR}/pkg/test-pkg
 sed -i.bak -e "s/\"version\": \"[0-9]*.[0-9]*.[0-9]*\",/\"version\": \"7.7.7\",/g" ${SHELL_DIR}/package.json
 rm ${SHELL_DIR}/package.json.bak
 
+# Same as above for Rancher Components
+# We might have bumped the version number but its not published yet, so this will fail
+sed -i.bak -e "s/\"version\": \"[0-9]*.[0-9]*.[0-9]*\",/\"version\": \"7.7.7\",/g" ${BASE_DIR}/pkg/rancher-components/package.json
+
 # Publish shell
 echo "Publishing shell packages to local registry"
 yarn install
 ${SHELL_DIR}/scripts/publish-shell.sh
 
+# Publish rancher components
+yarn build:lib
+yarn publish:lib
+
 if [ "${SKIP_STANDALONE}" == "false" ]; then
   DIR=$(mktemp -d)
   pushd $DIR > /dev/null

package/static/loading-indicator.html

@@ -13,7 +13,7 @@
 
 .initial-load-spinner {
   animation: initial-load-animate 1s infinite linear;
-  background-color: #fff;
+  background-color: transparent;
   box-sizing: border-box;
   border: 5px solid #008ACF;
   border-radius: 50%;