@rancher/shell 0.2.5 → 0.3.1

package/components/SortableTable/THead.vue

@@ -52,8 +52,8 @@ export default {
       required: true,
     },
     checkWidth: {
-      type:     Number,
-      default:  30,
+      type:    Number,
+      default: 30,
     },
     rowActionsWidth: {
       type:     Number,
@@ -191,6 +191,16 @@ export default {
         value
       });
     },
+
+    tooltip(col) {
+      if (!col.tooltip) {
+        return null;
+      }
+
+      const exists = this.$store.getters['i18n/exists'];
+
+      return exists(col.tooltip) ? this.t(col.tooltip) : col.tooltip;
+    },
   }
 
 };
@@ -230,7 +240,7 @@ export default {
         >
           <span
             v-if="col.sort"
-            v-tooltip="col.tooltip"
+            v-tooltip="tooltip(col)"
           >
             <span v-html="labelFor(col)" />
             <i
@@ -252,7 +262,7 @@ export default {
           </span>
           <span
             v-else
-            v-tooltip="col.tooltip"
+            v-tooltip="tooltip(col)"
           >{{ labelFor(col) }}</span>
         </div>
       </th>
@@ -405,8 +415,12 @@ export default {
       color: var(--body-text);
 
       .table-header-container {
-        display: flex;
-        align-items: center;
+        display: inherit;
+
+        > span {
+          display: flex;
+          align-items: center;
+        }
 
         &.not-filterable {
           margin-top: -2px;

package/components/SortableTable/actions.js

@@ -13,6 +13,8 @@ export default {
       bulkActionAvailabilityClass: 'action-availability',
 
       hiddenActions: [],
+
+      updateHiddenBulkActions: debounce(this.protectedUpdateHiddenBulkActions, 10)
     };
   },
 
@@ -79,7 +81,7 @@ export default {
     /**
      * Determine if any actions wrap over to a new line, if so group them into a dropdown instead
      */
-    updateHiddenBulkActions: debounce(function() {
+    protectedUpdateHiddenBulkActions() {
       if (!this.$refs.container) {
         return;
       }
@@ -146,6 +148,6 @@ export default {
       if (!showActionsDropdown) {
         actionsDropdown.style.display = 'none';
       }
-    }, 10)
+    }
   }
 };

package/components/SortableTable/index.vue

@@ -89,7 +89,7 @@ export default {
     },
     keyField: {
       // Field that is unique for each row.
-      type:     String,
+      type:    String,
       default: '_key',
     },
 
@@ -304,6 +304,13 @@ export default {
     useQueryParamsForSimpleFiltering: {
       type:    Boolean,
       default: false
+    },
+    /**
+     * Manaul force the update of live and delayed cells. Change this number to kick off the update
+     */
+    forceUpdateLiveAndDelayed: {
+      type:    Number,
+      default: 0
     }
   },
 
@@ -318,12 +325,12 @@ export default {
     }
 
     return {
-      currentPhase:        ASYNC_BUTTON_STATES.WAITING,
-      expanded:            {},
+      currentPhase:     ASYNC_BUTTON_STATES.WAITING,
+      expanded:         {},
       searchQuery,
       eventualSearchQuery,
-      actionOfInterest:    null,
-      loadingDelay:        false,
+      actionOfInterest: null,
+      loadingDelay:     false,
     };
   },
 
@@ -389,6 +396,9 @@ export default {
     page(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
+    forceUpdateLiveAndDelayed(neu, old) {
+      this.watcherUpdateLiveAndDelayed(neu, old);
+    },
 
     // Ensure we update live and delayed columns on first load
     initalLoad: {
@@ -401,16 +411,14 @@ export default {
       immediate: true
     },
 
-    isManualRefreshLoading: {
+    // this is the flag that indicates that manual refresh data has been loaded
+    // and we should update the deferred cols
+    manualRefreshLoadingFinished: {
       handler(neu, old) {
-        this.currentPhase = neu ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION;
-
-        // setTimeout is needed so that this is pushed further back on the JS computing queue
-        // because nextTick isn't enough to capture the DOM update for the manual refresh only scenario
-        if (old && !neu) {
-          this.manualRefreshTimer = setTimeout(() => {
-            this.watcherUpdateLiveAndDelayed(neu, old);
-          }, 1000);
+        // this is merely to update the manual refresh button status
+        this.currentPhase = !neu ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION;
+        if (neu && neu !== old) {
+          this.$nextTick(() => this.updateLiveAndDelayed());
         }
       },
       immediate: true
@@ -432,6 +440,10 @@ export default {
       return !!(!this.loading && !this._didinit && this.rows?.length);
     },
 
+    manualRefreshLoadingFinished() {
+      return !!(!this.loading && this._didinit && this.rows?.length && !this.isManualRefreshLoading);
+    },
+
     fullColspan() {
       let span = 0;
 
@@ -525,10 +537,10 @@ export default {
 
     classObject() {
       return {
-        'top-divider':     this.topDivider,
-        'body-dividers':   this.bodyDividers,
-        'overflow-y':      this.overflowY,
-        'overflow-x':      this.overflowX,
+        'top-divider':   this.topDivider,
+        'body-dividers': this.bodyDividers,
+        'overflow-y':    this.overflowY,
+        'overflow-x':    this.overflowX,
       };
     },
 
@@ -1530,7 +1542,6 @@ export default {
     .actions.role-multi-action {
       background-color: transparent;
       border: none;
-      font-size: 18px;
       &:hover, &:focus {
         background-color: var(--accent-btn);
         box-shadow: none;

package/components/SortableTable/selection.js

@@ -547,14 +547,14 @@ function _add(map, act, incrementCounts = true) {
     obj.allEnabled = false;
   }
 
-  if ( act.enabled === false ) {
+  if ( !act.enabled ) {
     obj.allEnabled = false;
   } else {
     obj.anyEnabled = true;
   }
 
   if ( incrementCounts ) {
-    obj.available = (obj.available || 0) + (act.enabled === false ? 0 : 1 );
+    obj.available = (obj.available || 0) + (!act.enabled ? 0 : 1 );
     obj.total = (obj.total || 0) + 1;
   }
 

package/components/Tabbed/index.vue

@@ -92,12 +92,12 @@ export default {
     sortedTabs(tabs) {
       const {
         defaultTab,
-        useHash,
-        $route: { hash }
+        useHash
       } = this;
       const activeTab = tabs.find(t => t.active);
 
-      const windowHash = hash.slice(1);
+      const hash = useHash ? this.$route.hash : undefined;
+      const windowHash = useHash ? hash.slice(1) : undefined;
       const windowHashTabMatch = tabs.find(t => t.name === windowHash && !t.active);
       const firstTab = head(tabs) || null;
 
@@ -148,11 +148,7 @@ export default {
     },
 
     select(name/* , event */) {
-      const {
-        sortedTabs,
-        $route: { hash: routeHash },
-        $router: { currentRoute },
-      } = this;
+      const { sortedTabs } = this;
 
       const selected = this.find(name);
       const hashName = `#${ name }`;
@@ -160,13 +156,22 @@ export default {
       if ( !selected || selected.disabled) {
         return;
       }
+      /**
+       * Exclude logic with URL anchor (hash) for projects without routing logic (vue-router)
+       */
+      if ( this.useHash ) {
+        const {
+          $route: { hash: routeHash },
+          $router: { currentRoute },
+        } = this;
 
-      if (this.useHash && routeHash !== hashName) {
-        const kurrentRoute = { ...currentRoute };
+        if (this.useHash && routeHash !== hashName) {
+          const kurrentRoute = { ...currentRoute };
 
-        kurrentRoute.hash = hashName;
+          kurrentRoute.hash = hashName;
 
-        this.$router.replace(kurrentRoute);
+          this.$router.replace(kurrentRoute);
+        }
       }
 
       for ( const tab of sortedTabs ) {
@@ -251,7 +256,7 @@ export default {
           <i
             v-if="hasIcon(tab)"
             v-tooltip="t('validation.tab')"
-            class="conditions-alert-icon icon-error icon-lg"
+            class="conditions-alert-icon icon-error"
           />
         </a>
       </li>
@@ -274,7 +279,7 @@ export default {
             class="btn bg-transparent"
             @click="tabAddClicked"
           >
-            <i class="icon icon-plus icon-lg" />
+            <i class="icon icon-plus" />
           </button>
           <button
             type="button"
@@ -282,7 +287,7 @@ export default {
             :disabled="!sortedTabs.length"
             @click="tabRemoveClicked"
           >
-            <i class="icon icon-minus icon-lg" />
+            <i class="icon icon-minus" />
           </button>
         </li>
       </ul>

package/components/TableSparkLine.vue

@@ -11,7 +11,7 @@ export default {
       type:    Number,
       default: 20
     },
-    inputDatum:  {
+    inputDatum: {
       type:    Number,
       default: 0
     },

package/components/TypeDescription.vue

@@ -8,7 +8,7 @@ import { CATALOG } from '@shell/config/types';
 export default {
   components: { Banner },
 
-  props:      {
+  props: {
     resource: {
       type:     String,
       required: true

package/components/Wizard.vue

@@ -27,7 +27,7 @@ export default {
     Loading,
   },
 
-  props:      {
+  props: {
     /*
   steps need: {
     name: String - this will be the slot name

package/components/YamlEditor.vue

@@ -19,8 +19,8 @@ export default {
   },
   props: {
     editorMode: {
-      type:      String,
-      default:  EDITOR_MODES.EDIT_CODE,
+      type:    String,
+      default: EDITOR_MODES.EDIT_CODE,
       validator(value) {
         return Object.values(EDITOR_MODES).includes(value);
       }
@@ -42,13 +42,13 @@ export default {
     },
 
     value: {
-      type:     [String, Object],
-      default:  '',
+      type:    [String, Object],
+      default: '',
     },
 
     hidePreviewButtons: {
-      type:     Boolean,
-      default:  false,
+      type:    Boolean,
+      default: false,
     },
 
     /**

package/components/__tests__/ApplicationCard.test.ts

@@ -0,0 +1,27 @@
+import { mount } from '@vue/test-utils';
+import ApplicationCard from '@shell/components/cards/ApplicationCard.vue';
+
+describe('component: ApplicationCard', () => {
+  const wrapper = mount(ApplicationCard, {
+    slots: {
+      cardIcon:   '<i class="icon icon-fw icon-epinio"></i>',
+      'top-left': '<h1>Routes</h1> <ul><li> <a target="_blank" rel="noopener noreferrer nofollow"> route1 </a> </li> <li><a target="_blank" rel="noopener noreferrer nofollow"> route1 </a></li> </ul>',
+    }
+  });
+
+  it.each([
+    'cardIcon',
+    'top-left',
+    'top-right',
+    'resourcesCount',
+  ])('should have a populated %p slot', (slot) => {
+    const content = '<div>text</div>';
+    const ele = mount(ApplicationCard, { slots: { [slot]: content } });
+
+    expect(ele.find(`[data-testid="${ slot }-section`).find('div').html()).toContain(content);
+  });
+
+  it('should have card-icon slot with an icon', () => {
+    expect(wrapper.find('[data-testid="cardIcon-section"]').find('i').classes()).toContain('icon-epinio');
+  });
+});

package/components/__tests__/AsyncButton.test.ts

@@ -0,0 +1,140 @@
+import { mount, Wrapper } from '@vue/test-utils';
+import AsyncButton, { ASYNC_BUTTON_STATES } from '@shell/components/AsyncButton.vue';
+
+describe('component: AsyncButton', () => {
+  it('should render appropriately with default config', () => {
+    const mockExists = jest.fn().mockReturnValue(true);
+    const mockT = jest.fn().mockReturnValue('some-string');
+
+    const wrapper: Wrapper<InstanceType<typeof AsyncButton> & { [key: string]: any }> = mount(AsyncButton, {
+      mocks: {
+        $store: {
+          getters: {
+            'i18n/exists': mockExists,
+            'i18n/t':      mockT
+          }
+        }
+      }
+    });
+
+    const button = wrapper.find('button');
+    const icon = wrapper.find('i');
+    const span = wrapper.find('span');
+
+    expect(wrapper.props().currentPhase).toBe(ASYNC_BUTTON_STATES.ACTION);
+
+    expect(button.exists()).toBe(true);
+    expect(button.classes()).toContain('btn');
+    expect(button.classes()).toContain('role-primary');
+    expect(button.props().name).toBeNull();
+    expect(button.props().type).toBe('button');
+    expect(button.props().disabled).toBe(false);
+    expect(button.props().tabIndex).toBeNull();
+    // we are mocking the getters, so it's to expect to find an icon
+    expect(icon.exists()).toBe(true);
+    expect(icon.classes()).toContain('icon');
+    expect(icon.classes()).toContain('icon-lg');
+    expect(icon.classes()).toContain('icon-some-string');
+    // we are mocking the getters, so it's to expect to find a label
+    expect(span.exists()).toBe(true);
+    expect(span.text()).toBe('some-string');
+  });
+
+  it('click on async button should emit click with a proper state of waiting, disabled and spinning ::: CB true', () => {
+    jest.useFakeTimers();
+
+    const wrapper: Wrapper<InstanceType<typeof AsyncButton> & { [key: string]: any }> = mount(AsyncButton, {
+      mocks: {
+        $store: {
+          getters: {
+            'i18n/exists': jest.fn(),
+            'i18n/t':      jest.fn()
+          }
+        }
+      }
+    });
+
+    const spyDone = jest.spyOn(wrapper.vm, 'done');
+
+    wrapper.find('button').trigger('click');
+
+    expect(wrapper.emitted('click')).toHaveLength(1);
+    expect(wrapper.vm.phase).toBe(ASYNC_BUTTON_STATES.WAITING);
+    expect(wrapper.vm.isSpinning).toBe(true);
+    expect(wrapper.vm.isDisabled).toBe(true);
+    // testing cb function has been emitted
+    expect(typeof wrapper.emitted('click')![0][0]).toBe('function');
+
+    // trigger the cb function so that we test state changes on AsyncButton
+    wrapper.emitted('click')![0][0](true);
+
+    expect(spyDone).toHaveBeenCalledWith(true);
+    expect(wrapper.vm.phase).toBe(ASYNC_BUTTON_STATES.SUCCESS);
+
+    // wait for button delay to be completed
+    jest.runAllTimers();
+
+    expect(wrapper.vm.phase).toBe(ASYNC_BUTTON_STATES.ACTION);
+  });
+
+  it('click on async button should emit click and update state properly ::: CB false', () => {
+    jest.useFakeTimers();
+
+    const wrapper: Wrapper<InstanceType<typeof AsyncButton> & { [key: string]: any }> = mount(AsyncButton, {
+      mocks: {
+        $store: {
+          getters: {
+            'i18n/exists': jest.fn(),
+            'i18n/t':      jest.fn()
+          }
+        }
+      }
+    });
+
+    const spyDone = jest.spyOn(wrapper.vm, 'done');
+
+    wrapper.find('button').trigger('click');
+
+    expect(wrapper.emitted('click')).toHaveLength(1);
+    // testing cb function has been emitted
+    expect(typeof wrapper.emitted('click')![0][0]).toBe('function');
+
+    // trigger the cb function so that we test state changes on AsyncButton
+    wrapper.emitted('click')![0][0](false);
+
+    expect(spyDone).toHaveBeenCalledWith(false);
+    expect(wrapper.vm.phase).toBe(ASYNC_BUTTON_STATES.ERROR);
+
+    // wait for button delay to be completed
+    jest.runAllTimers();
+
+    expect(wrapper.vm.phase).toBe(ASYNC_BUTTON_STATES.ACTION);
+  });
+
+  it('click on async button should emit click and update state properly ::: CB "cancelled"', () => {
+    const wrapper: Wrapper<InstanceType<typeof AsyncButton> & { [key: string]: any }> = mount(AsyncButton, {
+      mocks: {
+        $store: {
+          getters: {
+            'i18n/exists': jest.fn(),
+            'i18n/t':      jest.fn()
+          }
+        }
+      }
+    });
+
+    const spyDone = jest.spyOn(wrapper.vm, 'done');
+
+    wrapper.find('button').trigger('click');
+
+    expect(wrapper.emitted('click')).toHaveLength(1);
+    // testing cb function has been emitted
+    expect(typeof wrapper.emitted('click')![0][0]).toBe('function');
+
+    // trigger the cb function so that we test state changes on AsyncButton
+    wrapper.emitted('click')![0][0]('cancelled');
+
+    expect(spyDone).toHaveBeenCalledWith('cancelled');
+    expect(wrapper.vm.phase).toBe(ASYNC_BUTTON_STATES.ACTION);
+  });
+});

package/components/__tests__/BackLink.test.ts

@@ -0,0 +1,33 @@
+import { shallowMount, RouterLinkStub } from '@vue/test-utils';
+import BackLink from '@shell/components/BackLink.vue';
+
+describe('component: BackLink', () => {
+  it('should render component with the correct data applied', () => {
+    const linkRoute = {
+      name:   'some-route-name',
+      params: { param1: 'paramval1' },
+      query:  {
+        query1: 'queryval1',
+        query2: 'queryval2'
+      }
+    };
+
+    const wrapper = shallowMount(BackLink, {
+      propsData: { link: linkRoute },
+      stubs:     { NuxtLink: RouterLinkStub }
+    });
+
+    const link = wrapper.findComponent(RouterLinkStub);
+    const icon = wrapper.find('i');
+
+    expect(link.exists()).toBe(true);
+    // assertion regarding the text will have to be pointed to whatever t() returns on the test
+    expect(link.text()).toBe('%generic.back%');
+    expect(link.classes()).toContain('back-link');
+    expect(link.props().to).toBe(linkRoute);
+
+    expect(icon.exists()).toBe(true);
+    expect(icon.classes()).toContain('icon');
+    expect(icon.classes()).toContain('icon-chevron-left');
+  });
+});

package/components/__tests__/ButtonGroup.test.ts

@@ -0,0 +1,124 @@
+import { shallowMount } from '@vue/test-utils';
+import ButtonGroup from '@shell/components/ButtonGroup.vue';
+
+describe('component: ButtonGroup', () => {
+  it('should render component with the default props correctly', () => {
+    const options = [
+      {
+        label: 'label1',
+        value: 'val1'
+      },
+      {
+        label: 'label2',
+        value: 'val2'
+      },
+      {
+        label: 'label3',
+        value: 'val3'
+      },
+    ];
+
+    const wrapper = shallowMount(ButtonGroup, {
+      propsData: {
+        options,
+        value: 'val1'
+      },
+      directives: { 'trim-whitespace': jest.fn() },
+    });
+
+    const firstBtn = wrapper.find('[data-testid="button-group-child-0"]');
+    const firstBtnLabel = wrapper.find('[data-testid="button-group-child-0"] span');
+    const secondBtn = wrapper.find('[data-testid="button-group-child-1"]');
+    const secondBtnLabel = wrapper.find('[data-testid="button-group-child-1"] span');
+    const thirdBtn = wrapper.find('[data-testid="button-group-child-2"]');
+
+    expect(wrapper.findAll('button')).toHaveLength(3);
+    expect(firstBtn.exists()).toBe(true);
+    expect(firstBtn.attributes().type).toBe('button');
+    expect(firstBtn.classes()).toContain('btn');
+    expect(firstBtn.classes()).toContain('bg-primary');
+    expect(secondBtn.classes()).toContain('bg-disabled');
+    expect(thirdBtn.classes()).toContain('bg-disabled');
+
+    expect(firstBtnLabel.text()).toBe('label1');
+    expect(secondBtnLabel.text()).toBe('label2');
+  });
+
+  it('should render component with icon correctly', () => {
+    const options = [
+      {
+        label: 'label1',
+        value: 'val1',
+        icon:  'some-icon'
+      },
+      {
+        label: 'label2',
+        value: 'val2'
+      },
+      {
+        label: 'label3',
+        value: 'val3'
+      },
+    ];
+
+    const wrapper = shallowMount(ButtonGroup, {
+      propsData: {
+        options,
+        activeClass:   'bg-another-active-class',
+        inactiveClass: 'bg-some-inactive-class',
+        iconSize:      'xxxxl',
+        value:         'val1'
+      },
+      directives: { 'trim-whitespace': jest.fn() },
+    });
+
+    const firstBtn = wrapper.find('[data-testid="button-group-child-0"]');
+    const firstBtnIcon = wrapper.find('[data-testid="button-group-child-0"] i');
+    const firstBtnLabel = wrapper.find('[data-testid="button-group-child-0"] span');
+    const secondBtn = wrapper.find('[data-testid="button-group-child-1"]');
+
+    expect(wrapper.findAll('button')).toHaveLength(3);
+
+    expect(firstBtn.classes()).toContain('bg-another-active-class');
+    expect(secondBtn.classes()).toContain('bg-some-inactive-class');
+
+    expect(firstBtnLabel.exists()).toBe(true);
+    expect(firstBtnIcon.exists()).toBe(true);
+
+    expect(firstBtnIcon.classes()).toContain('icon');
+    expect(firstBtnIcon.classes()).toContain('some-icon');
+    expect(firstBtnIcon.classes()).toContain('icon-xxxxl');
+  });
+
+  it('clicking on button should emit event "input"', () => {
+    const options = [
+      {
+        label: 'label1',
+        value: 'val1'
+      },
+      {
+        label: 'label2',
+        value: 'val2'
+      },
+      {
+        label: 'label3',
+        value: 'val3'
+      },
+    ];
+
+    const wrapper = shallowMount(ButtonGroup, {
+      propsData: {
+        options,
+        value: 'val1'
+      },
+      directives: { 'trim-whitespace': jest.fn() },
+    });
+
+    const firstBtn = wrapper.find('[data-testid="button-group-child-0"]');
+
+    firstBtn.trigger('click');
+
+    expect(wrapper.emitted('input')).toHaveLength(1);
+    expect(wrapper.emitted('input')![0][0]).toBe('val1');
+  });
+});