@rancher/shell 0.3.0 → 0.3.1

package/components/ResourceList/index.vue

@@ -4,13 +4,18 @@ import Loading from '@shell/components/Loading';
 import Masthead from './Masthead';
 import ResourceLoadingIndicator from './ResourceLoadingIndicator';
 import ResourceFetch from '@shell/mixins/resource-fetch';
+import IconMessage from '@shell/components/IconMessage.vue';
+import { ResourceListComponentName } from './resource-list.config';
 
 export default {
+  name: ResourceListComponentName,
+
   components: {
     Loading,
     ResourceTable,
     Masthead,
-    ResourceLoadingIndicator
+    ResourceLoadingIndicator,
+    IconMessage
   },
   mixins: [ResourceFetch],
 
@@ -28,19 +33,16 @@ export default {
       default: false
     },
   },
+
   async fetch() {
     const store = this.$store;
     const resource = this.resource;
 
-    let hasFetch = false;
-
-    const inStore = store.getters['currentStore'](resource);
-
-    const schema = store.getters[`${ inStore }/schemaFor`](resource);
+    const schema = this.schema;
 
     if ( this.hasListComponent ) {
       // If you provide your own list then call its asyncData
-      const importer = store.getters['type-map/importList'](resource);
+      const importer = this.listComponent;
       const component = (await importer())?.default;
 
       if ( component?.typeDisplay ) {
@@ -49,7 +51,7 @@ export default {
 
       // If your list page has a fetch then it's responsible for populating rows itself
       if ( component?.fetch ) {
-        hasFetch = true;
+        this.hasFetch = true;
       }
 
       // If the custom component supports it, ask it what resources it loads, so we can
@@ -62,14 +64,17 @@ export default {
       }
     }
 
-    if ( !hasFetch ) {
+    if ( !this.hasFetch ) {
       if ( !schema ) {
         store.dispatch('loadingError', new Error(`Type ${ resource } not found, unable to display list`));
 
         return;
       }
 
-      await this.$fetchType(resource);
+      // See comment for `namespaceFilterRequired` watcher, skip fetch if we don't have a valid NS
+      if (!this.namespaceFilterRequired) {
+        await this.$fetchType(resource);
+      }
     }
   },
 
@@ -91,6 +96,8 @@ export default {
       hasListComponent,
       showMasthead:                     showMasthead === undefined ? true : showMasthead,
       resource,
+      loadResources:                    [resource], // List of resources that will be loaded, this could be many (`Workloads`)
+      hasFetch:                         false,
       // manual refresh
       manualRefreshInit:                false,
       watch:                            false,
@@ -98,7 +105,6 @@ export default {
       // Provided by fetch later
       customTypeDisplay:                null,
       // incremental loading
-      loadResources:                    [resource],
       loadIndeterminate:                false,
       // query param for simple filtering
       useQueryParamsForSimpleFiltering: true
@@ -124,6 +130,23 @@ export default {
     }
   },
 
+  watch: {
+    /**
+     * When a NS filter is required and the user selects a different one, kick off a new set of API requests
+     *
+     * ResourceList has two modes
+     * 1) ResourceList component handles API request to fetch resources
+     * 2) Custom list component handles API request to fetch resources
+     *
+     * This covers case 1
+     */
+    namespaceFilter(neu) {
+      if (neu && !this.hasFetch) {
+        this.$fetchType(this.resource);
+      }
+    }
+  },
+
   created() {
     let listComponent = false;
 
@@ -140,7 +163,20 @@ export default {
 </script>
 
 <template>
-  <div>
+  <IconMessage
+    v-if="namespaceFilterRequired"
+    :vertical="true"
+    :subtle="false"
+    icon="icon-filter_alt"
+  >
+    <template #message>
+      <span
+        class="filter"
+        v-html="t('resourceList.nsFiltering', { resource: $store.getters['type-map/labelFor'](schema, 2) || customTypeDisplay }, true)"
+      />
+    </template>
+  </IconMessage>
+  <div v-else>
     <Masthead
       v-if="showMasthead"
       :type-display="customTypeDisplay"
@@ -149,6 +185,7 @@ export default {
       :show-incremental-loading-indicator="showIncrementalLoadingIndicator"
       :load-resources="loadResources"
       :load-indeterminate="loadIndeterminate"
+      :load-namespace="namespaceFilter"
     >
       <template slot="extraActions">
         <slot name="extraActions" />
@@ -173,6 +210,7 @@ export default {
       :adv-filter-hide-labels-as-cols="advFilterHideLabelsAsCols"
       :adv-filter-prevent-filtering-labels="advFilterPreventFilteringLabels"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
     />
   </div>
 </template>
@@ -185,6 +223,9 @@ export default {
       position: relative;
       margin: 0 0 20px 0;
     }
+    .filter{
+      line-height: 45px;
+    }
     .right-action {
       position: absolute;
       top: 10px;

package/components/ResourceList/resource-list.config.js

@@ -0,0 +1,7 @@
+/**
+ * Component name of the `ResourceList`
+ *
+ * This needs to be a in separate file to avoid circular dependency of
+ * index.vue --> resource-fetch mixin --> resource-fetch-namespaced mixin --> index.vue
+ */
+export const ResourceListComponentName = 'ResourceList';

package/components/ResourceTable.vue

@@ -140,9 +140,30 @@ 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
     }
   },
 
+  mounted() {
+    /**
+     * v-shortkey prevents the event's propagation:
+     * https://github.com/fgr-araujo/vue-shortkey/blob/55d802ea305cadcc2ea970b55a3b8b86c7b44c05/src/index.js#L156-L157
+     *
+     * 'Enter' key press is handled via event listener in order to allow the event propagation
+     */
+    window.addEventListener('keyup', this.handleEnterKeyPress);
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('keyup', this.handleEnterKeyPress);
+  },
+
   data() {
     const options = this.$store.getters[`type-map/optionsFor`](this.schema);
     const listGroups = options?.listGroups || [];
@@ -232,11 +253,16 @@ export default {
         return [];
       }
 
+      const haveAllNamespace = this.$store.getters['haveAllNamespace'];
+
       return this.rows.filter((row) => {
         if (this.currentProduct?.hideSystemResources && this.isNamespaced) {
           return !!includedNamespaces[row.metadata.namespace] && !row.isSystemResource;
         } else if (!this.isNamespaced) {
           return true;
+        } else if (haveAllNamespace) {
+          // `rows` only contains resource from a single namespace
+          return true;
         } else {
           return !!includedNamespaces[row.metadata.namespace];
         }
@@ -375,8 +401,11 @@ export default {
 
     handleActionButtonClick(event) {
       this.$emit('clickedActionButton', event);
-    }
+    },
 
+    handleEnterKeyPress(event) {
+      this.keyAction('detail');
+    }
   }
 };
 </script>
@@ -406,6 +435,7 @@ export default {
     key-field="_key"
     :sort-generation-fn="safeSortGenerationFn"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+    :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
     @clickedActionButton="handleActionButtonClick"
     @group-value-change="group = $event"
     v-on="$listeners"
@@ -447,11 +477,6 @@ export default {
     </template>
 
     <template #shortkeys>
-      <button
-        v-shortkey.once="['enter']"
-        class="hide detail"
-        @shortkey="keyAction('detail')"
-      />
       <button
         v-shortkey.once="['e']"
         class="hide"

package/components/SimpleBox.vue

@@ -74,7 +74,7 @@ export default {
   justify-content: center;
   padding: 2px;
   > i {
-    font-size: 20px;
+    font-size: 14px;
     opacity: 0.5;
   }
   &:hover {

package/components/SortableTable/THead.vue

@@ -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,11 +415,11 @@ export default {
       color: var(--body-text);
 
       .table-header-container {
-        display: flex;
-        align-items: center;
+        display: inherit;
 
         > span {
-          display: contents;
+          display: flex;
+          align-items: center;
         }
 
         &.not-filterable {

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