@rancher/shell 0.3.0 → 0.3.2

package/components/SortableTable/index.vue

@@ -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
     }
   },
 
@@ -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;
 
@@ -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

@@ -504,7 +504,7 @@ export default {
     },
 
     applyTableAction(action, args, event) {
-      const opts = { alt: event && isAlternate(event) };
+      const opts = { alt: event && isAlternate(event), event };
 
       // Go through the table selection and filter out those actions that can't run the chosen action
       const executableSelection = this.selectedRows.filter((row) => {
@@ -513,7 +513,7 @@ export default {
         return matchingResourceAction?.enabled;
       });
 
-      _execute(executableSelection, action, args, opts);
+      _execute(executableSelection, action, args, opts, this);
 
       this.actionOfInterest = null;
     },
@@ -575,8 +575,20 @@ function _filter(map, disableAll = false) {
   return out;
 }
 
-function _execute(resources, action, args, opts = {}) {
+function _execute(resources, action, args, opts = {}, ctx) {
   args = args || [];
+
+  // New pattern for extensions - always call invoke
+  if (action.invoke) {
+    const actionOpts = {
+      action,
+      event: opts.event,
+      isAlt: !!opts.alt,
+    };
+
+    return action.invoke.apply(ctx, [actionOpts, resources || [], args]);
+  }
+
   if ( resources.length > 1 && action.bulkAction && !opts.alt ) {
     const fn = resources[0][action.bulkAction];
 

package/components/Tabbed/Tab.vue

@@ -99,7 +99,7 @@ export default {
       class="tab-header"
     >
       <h2>
-        {{ label }}
+        {{ labelDisplay }}
         <i
           v-if="tooltip"
           v-tooltip="tooltip"

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/__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');
+  });
+});

package/components/__tests__/ClusterBadge.test.ts

@@ -0,0 +1,32 @@
+import { shallowMount } from '@vue/test-utils';
+import ClusterBadge from '@shell/components/ClusterBadge.vue';
+
+describe('component: ClusterBadge', () => {
+  it('should render component with the correct data applied', () => {
+    const clusterProp = {
+      badge: {
+        color:     'red',
+        textColor: 'blue',
+        text:      'some-text',
+      }
+    };
+
+    const wrapper = shallowMount(ClusterBadge, { propsData: { cluster: clusterProp } });
+
+    const elem = wrapper.find('div');
+
+    expect(elem.classes()).toContain('cluster-badge');
+    expect(elem.attributes().style).toBe('background-color: red; color: blue;');
+    expect(elem.text()).toBe('some-text');
+  });
+
+  it('should NOT render component if there is no badge property in object', () => {
+    const clusterProp = {};
+
+    const wrapper = shallowMount(ClusterBadge, { propsData: { cluster: clusterProp } });
+
+    const elem = wrapper.find('div');
+
+    expect(elem.exists()).toBe(false);
+  });
+});

package/components/__tests__/CollapsibleCard.test.ts

@@ -0,0 +1,64 @@
+import { shallowMount } from '@vue/test-utils';
+import CollapsibleCard from '@shell/components/CollapsibleCard.vue';
+
+describe('component: CollapsibleCard', () => {
+  it('should render component with the correct data applied', () => {
+    const wrapper = shallowMount(CollapsibleCard, {
+      propsData: { title: 'some-card-title' },
+      slots:     {
+        'header-right': '<p>some stuff for header</p>',
+        content:        '<p>some content</p>'
+      }
+    });
+
+    const cardWrapper = wrapper.find('.collapsible-card');
+    const cardHeader = wrapper.find('.collapsible-card-header');
+    const cardBody = wrapper.find('.collapsible-card-body');
+
+    expect(cardWrapper.exists()).toBe(true);
+
+    expect(cardHeader.exists()).toBe(true);
+    expect(cardHeader.find('h2 span').text()).toBe('some-card-title');
+    expect(cardHeader.find('p').exists()).toBe(true);
+    expect(cardHeader.find('p').text()).toBe('some stuff for header');
+    expect(cardHeader.find('i').exists()).toBe(true);
+    expect(cardHeader.find('i').classes()).toContain('icon-chevron-up');
+
+    expect(cardBody.exists()).toBe(true);
+    expect(cardBody.find('p').exists()).toBe(true);
+    expect(cardBody.find('p').text()).toBe('some content');
+  });
+
+  it('clicking on card header should emit event', () => {
+    const wrapper = shallowMount(CollapsibleCard, {
+      propsData: { title: 'some-card-title' },
+      slots:     {
+        'header-right': '<p>some stuff for header</p>',
+        content:        '<p>some content</p>'
+      }
+    });
+
+    const cardHeader = wrapper.find('.collapsible-card-header');
+
+    cardHeader.trigger('click');
+
+    expect(wrapper.emitted('toggleCollapse')).toHaveLength(1);
+    expect(wrapper.emitted('toggleCollapse')![0][0]).toBe(true);
+  });
+
+  it('clicking on card title should emit event', () => {
+    const wrapper = shallowMount(CollapsibleCard, {
+      propsData: { title: 'some-card-title', isTitleClickable: true },
+      slots:     {
+        'header-right': '<p>some stuff for header</p>',
+        content:        '<p>some content</p>'
+      }
+    });
+
+    const cardHeaderTitle = wrapper.find('.collapsible-card-header h2 span');
+
+    cardHeaderTitle.trigger('click');
+
+    expect(wrapper.emitted('titleClick')).toHaveLength(1);
+  });
+});

package/components/__tests__/ConsumptionGauge.test.ts

@@ -0,0 +1,88 @@
+import { mount } from '@vue/test-utils';
+import ConsumptionGauge from '@shell/components/ConsumptionGauge.vue';
+import PercentageBar from '@shell/components/PercentageBar.vue';
+
+describe('component: ConsumptionGauge', () => {
+  it('should render component with the correct data applied', () => {
+    const colorStops = {
+      0: '--success', 30: '--warning', 70: '--error'
+    };
+
+    const wrapper = mount(ConsumptionGauge, {
+      propsData: {
+        resourceName: 'some-resource-name',
+        capacity:     1000,
+        used:         200,
+        units:        'cores',
+        colorStops
+      },
+    });
+
+    const mainWrapper = wrapper.find('.consumption-gauge');
+    const title = wrapper.find('.consumption-gauge h3');
+    const usedSpan = wrapper.find('.consumption-gauge .numbers span:nth-child(1)');
+    const percentageSpan = wrapper.find('.consumption-gauge .percentage');
+    const percentageBar = wrapper.findComponent(PercentageBar);
+
+    expect(mainWrapper.exists()).toBe(true);
+    expect(title.exists()).toBe(true);
+    expect(title.text()).toBe('some-resource-name');
+    expect(usedSpan.exists()).toBe(true);
+    // check translation key as for translation are not applied
+    expect(usedSpan.text()).toBe('%node.detail.glance.consumptionGauge.used%');
+
+    expect(percentageSpan.exists()).toBe(true);
+    expect(percentageSpan.text()).toContain('20%');
+
+    // checking PercentageBar component render
+    expect(percentageBar.exists()).toBe(true);
+    expect(percentageBar.props().value).toBe(20);
+    expect(percentageBar.props().colorStops).toBe(colorStops);
+  });
+
+  it('usedAsResourceName should render secondary title instead of main h3 title', () => {
+    const colorStops = {
+      0: '--success', 30: '--warning', 70: '--error'
+    };
+
+    const wrapper = mount(ConsumptionGauge, {
+      propsData: {
+        resourceName:       'some-resource-name',
+        capacity:           1000,
+        used:               200,
+        units:              'cores',
+        colorStops,
+        usedAsResourceName: true
+      }
+    });
+
+    const mainTitle = wrapper.find('.consumption-gauge h3');
+    const slotTitle = wrapper.find('.consumption-gauge h4');
+
+    expect(mainTitle.exists()).toBe(false);
+    expect(slotTitle.exists()).toBe(true);
+    expect(slotTitle.text()).toBe('some-resource-name');
+  });
+
+  it('passing slot TITLE should render correctly', () => {
+    const colorStops = {
+      0: '--success', 30: '--warning', 70: '--error'
+    };
+
+    const wrapper = mount(ConsumptionGauge, {
+      propsData: {
+        resourceName: 'some-resource-name',
+        capacity:     1000,
+        used:         200,
+        units:        'cores',
+        colorStops
+      },
+      slots: { title: '<p class="slot-class">another title</p>' }
+    });
+
+    const slotElem = wrapper.find('.consumption-gauge .slot-class');
+
+    expect(slotElem.exists()).toBe(true);
+    expect(slotElem.text()).toBe('another title');
+  });
+});