@rancher/shell 0.5.3 → 2.0.0

package/components/SortableTable/paging.js

@@ -2,27 +2,45 @@ import { ROWS_PER_PAGE } from '@shell/store/prefs';
 
 export default {
   computed: {
+    totalRows() {
+      if (this.externalPaginationEnabled) {
+        return this.externalPaginationResult?.count || 0;
+      }
+
+      return this.filteredRows.length;
+    },
+
     indexFrom() {
       return Math.max(0, 1 + this.perPage * (this.page - 1));
     },
 
     indexTo() {
-      return Math.min(this.filteredRows.length, this.indexFrom + this.perPage - 1);
+      return Math.min(this.totalRows, this.indexFrom + this.perPage - 1);
     },
 
     totalPages() {
-      return Math.ceil(this.filteredRows.length / this.perPage );
+      return Math.ceil(this.totalRows / this.perPage );
     },
 
     showPaging() {
-      return !this.loading && this.paging && this.totalPages > 1;
+      if (!this.paging) {
+        return false;
+      }
+
+      const havePages = this.totalPages > 1;
+
+      if (this.altLoading) {
+        return havePages;
+      }
+
+      return !this.loading && havePages;
     },
 
     pagingDisplay() {
       const opt = {
         ...(this.pagingParams || {}),
 
-        count: this.filteredRows.length,
+        count: this.totalRows,
         pages: this.totalPages,
         from:  this.indexFrom,
         to:    this.indexTo,
@@ -32,7 +50,9 @@ export default {
     },
 
     pagedRows() {
-      if ( this.paging ) {
+      if (this.externalPaginationEnabled) {
+        return this.rows;
+      } else if ( this.paging ) {
         return this.filteredRows.slice(this.indexFrom - 1, this.indexTo);
       } else {
         return this.filteredRows;
@@ -51,12 +71,21 @@ export default {
       // Go to the last page if we end up "past" the last page because the table changed
 
       const from = this.indexFrom;
-      const last = this.filteredRows.length;
+      const last = this.totalRows;
 
       if ( this.totalPages > 0 && this.page > 1 && from > last ) {
         this.setPage(this.totalPages);
       }
-    }
+    },
+
+    page() {
+      this.debouncedPaginationChanged();
+    },
+
+    perPage() {
+      this.debouncedPaginationChanged();
+    },
+
   },
 
   methods: {

package/components/SortableTable/selection.js

@@ -46,9 +46,10 @@ export default {
     // NOTE: The logic here could be simplified and made more performant
     bulkActionsForSelection() {
       let disableAll = false;
+
       // pagedRows is all rows in the current page
       const all = this.pagedRows;
-      const allRows = this.arrangedRows;
+      const allRows = this.arrangedRows || all;
       let selected = this.selectedRows;
 
       // Nothing is selected

package/components/SortableTable/sorting.js

@@ -1,5 +1,12 @@
 import { sortBy } from '@shell/utils/sort';
-import { addObject } from '@shell/utils/array';
+import { uniq } from '@shell/utils/array';
+
+/**
+ * Always sort by something, this is the best guess on properties
+ *
+ * Can be overriden
+ */
+const DEFAULT_MANDATORY_SORT = ['nameSort', 'id'];
 
 export default {
   computed: {
@@ -21,15 +28,15 @@ export default {
         fromColumn = [fromColumn];
       }
 
-      const out = [...fromGroup, ...fromColumn];
-
-      addObject(out, 'nameSort');
-      addObject(out, 'id');
-
-      return out;
+      // return the sorting based on grouping, user selection and fallback
+      return uniq([...fromGroup, ...fromColumn].concat(...(this.mandatorySort || DEFAULT_MANDATORY_SORT)));
     },
 
     arrangedRows() {
+      if (this.externalPaginationEnabled) {
+        return;
+      }
+
       let key;
 
       if ( this.sortGenerationFn ) {
@@ -101,4 +108,14 @@ export default {
       this.setPage(1);
     },
   },
+
+  watch: {
+    sortFields() {
+      this.debouncedPaginationChanged();
+    },
+
+    descending() {
+      this.debouncedPaginationChanged();
+    }
+  }
 };

package/components/TabTitle.vue

@@ -0,0 +1,84 @@
+<script>
+import { mapGetters } from 'vuex';
+import { updatePageTitle } from '@shell/utils/title';
+import { getVendor } from '@shell/config/private-label';
+
+export default {
+  props: {
+    /**
+     * Include can be 'full', 'vendor-only' or false
+     *   'full': Show's the entire breadcrumb include vendor, product and cluster
+     *   'vendor-only': Show only the vendor name in the breadcrumb i.e. 'Rancher > "child"'
+     *   false: Don't include any part of the breadcrumb
+     */
+    breadcrumb: {
+      type:    [String, Boolean],
+      default: 'full',
+      validator(value) {
+        return ['full', 'vendor-only'].includes(value) || value === false;
+      }
+    },
+    includeVendor: {
+      type:    Boolean,
+      default: true
+    },
+    showChild: {
+      type:    Boolean,
+      default: true
+    }
+  },
+  computed: { ...mapGetters(['isExplorer', 'currentCluster', 'currentProduct']) },
+
+  methods: {
+    // This isn't a computed prop because it would trigger a recompute when the $slots changed
+    computeTitle() {
+      if (!this.$slots.default || this.$slots.default.length !== 1 || this.$slots.default[0].tag || (typeof this.$slots.default[0].text !== 'string')) {
+        console.error('The <TabTitle> component only supports text as the child.'); // eslint-disable-line no-console
+
+        return [];
+      }
+
+      const breadcrumb = [this.$slots.default[0].text.trim()];
+
+      if (this.breadcrumb === 'full') {
+        if (this.currentCluster && (this.isExplorer || this.currentCluster.isHarvester ) ) {
+          breadcrumb.unshift(this.currentCluster.nameDisplay);
+        } else if (this.currentProduct?.name) {
+          const productName = this.$store.getters['i18n/withFallback'](`product.${ this.currentProduct.name }`, null, null);
+
+          if (productName) {
+            breadcrumb.unshift(productName);
+          }
+        }
+      }
+
+      if (this.includeVendor && ['full', 'vendor-only'].includes(this.breadcrumb)) {
+        breadcrumb.unshift(getVendor());
+      }
+
+      return breadcrumb;
+    },
+    updatePageTitle() {
+      updatePageTitle(...this.computeTitle());
+    }
+  },
+
+  created() {
+    this.updatePageTitle();
+  },
+
+  // Using the render function instead of <template> because <template><slot /></template> will yield a compiler error since
+  // <slot /> is not allowed to be a root node of a <template> and I don't want to wrap the child to avoid affecting existing styling
+  render() {
+    if (this.$slots.default) {
+      this.$slots.default.forEach((e) => {
+        e.text = (e.text || '').trim();
+      });
+    }
+
+    this.updatePageTitle();
+
+    return this.showChild ? this.$slots.default : null;
+  }
+};
+</script>

package/components/Tabbed/index.vue

@@ -233,7 +233,10 @@ export default {
 </script>
 
 <template>
-  <div :class="{'side-tabs': !!sideTabs, 'tabs-only': tabsOnly }">
+  <div
+    :class="{'side-tabs': !!sideTabs, 'tabs-only': tabsOnly }"
+    data-testid="tabbed"
+  >
     <ul
       v-if="!hideTabs"
       ref="tablist"
@@ -291,6 +294,7 @@ export default {
           <button
             type="button"
             class="btn bg-transparent"
+            data-testid="tab-list-add"
             @click="tabAddClicked"
           >
             <i class="icon icon-plus" />
@@ -299,6 +303,7 @@ export default {
             type="button"
             class="btn bg-transparent"
             :disabled="!sortedTabs.length"
+            data-testid="tab-list-remove"
             @click="tabRemoveClicked"
           >
             <i class="icon icon-minus" />

package/components/TableDataUserIcon.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { ucFirst } from '@shell/utils/string';
+
+const props = defineProps<{
+  userState: string,
+  isActive: boolean
+}>();
+
+const iconClass = computed(() => {
+  const userIcon = `icon-user-${ props.isActive ? 'check' : 'xmark' }`;
+  const iconColor = `icon-color-${ props.isActive ? 'green' : 'red' }`;
+
+  return {
+    icon:        true,
+    'icon-lg':   true,
+    [userIcon]:  true,
+    [iconColor]: true,
+  };
+});
+</script>
+
+<template>
+  <div class="icon-center">
+    <i
+      v-tooltip="ucFirst(userState)"
+      :class="iconClass"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .icon-center {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  .icon-color-green {
+    color: var(--success);
+  }
+
+  .icon-color-red {
+    color: var(--error);
+  }
+</style>

package/components/TypeDescription.vue

@@ -25,6 +25,7 @@ export default {
       if (this.resource === CATALOG.CLUSTER_REPO) {
         key = !this.currentCluster || this.currentCluster.isLocal ? 'typeDescription."catalog.cattle.io.clusterrepo.local"' : 'typeDescription."catalog.cattle.io.clusterrepo"';
       } else {
+        // i18n-uses typeDescription.*
         key = `typeDescription."${ this.resource }"`;
       }
 

package/components/Wizard.vue

@@ -18,6 +18,7 @@ Wizard will emit these events:
     finish
 */
 
+// i18n-uses wizard.next, wizard.edit, wizard.create, wizard.view, wizard.finish
 export default {
   name: 'Wizard',
 

package/components/__tests__/AppModal.test.ts

@@ -0,0 +1,98 @@
+/* eslint-disable jest/no-hooks */
+import { shallowMount, Wrapper } from '@vue/test-utils';
+import AppModal from '@shell/components/AppModal.vue';
+
+let wrapper: Wrapper<InstanceType<typeof AppModal>>;
+
+describe('appModal', () => {
+  beforeEach(() => {
+    wrapper = shallowMount(AppModal, {
+      propsData: {
+        clickToClose: true,
+        width:        600,
+      },
+      slots: { default: '<div class="content">Modal content</div>' }
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders modal content', () => {
+    expect(wrapper.find('.content').exists()).toBeTruthy();
+  });
+
+  it('emits close event when clicked outside', async() => {
+    const overlay = wrapper.find('.modal-overlay');
+
+    await overlay.trigger('click');
+    expect(wrapper.emitted('close')).toBeTruthy();
+  });
+
+  it('emits close event when escape key is pressed', async() => {
+    document.dispatchEvent(new KeyboardEvent('keydown', {
+      key:     'Escape',
+      keyCode: 27,
+    }));
+    expect(wrapper.emitted('close')).toBeTruthy();
+  });
+
+  it('does not emit close event when clickToClose is false', async() => {
+    await wrapper.setProps({ clickToClose: false });
+    const overlay = wrapper.find('.modal-overlay');
+
+    await overlay.trigger('click');
+    expect(wrapper.emitted('close')).toBeFalsy();
+
+    document.dispatchEvent(new KeyboardEvent('keydown', {
+      key:     'Escape',
+      keyCode: 27,
+    }));
+
+    expect(wrapper.emitted('close')).toBeFalsy();
+  });
+
+  it('sets a width for the modal container', async() => {
+    const container = wrapper.find('.modal-container');
+
+    expect(container.exists()).toBeTruthy();
+    expect(wrapper.find('.modal-container').element.style.width).toBe('600px');
+  });
+
+  it('sets a percentage width for the modal container', async() => {
+    await wrapper.setProps({ width: '50%' });
+    const container = wrapper.find('.modal-container');
+
+    expect(container.exists()).toBeTruthy();
+    expect(wrapper.find('.modal-container').element.style.width).toBe('50%');
+  });
+
+  it('does not generate validation errors when setting a pixel width', async() => {
+    const consoleErrorSpy = jest.spyOn(console, 'error');
+
+    consoleErrorSpy.mockImplementation(() => {});
+
+    await wrapper.setProps({ width: '200px' });
+    const container = wrapper.find('.modal-container');
+
+    expect(container.exists()).toBeTruthy();
+    expect(wrapper.find('.modal-container').element.style.width).toBe('200px');
+
+    expect(consoleErrorSpy).not.toHaveBeenCalled();
+  });
+
+  it('generates validation errors with an invalid string for width', async() => {
+    const consoleErrorSpy = jest.spyOn(console, 'error');
+
+    consoleErrorSpy.mockImplementation(() => {});
+
+    await wrapper.setProps({ width: 'FAIL' });
+    const container = wrapper.find('.modal-container');
+
+    expect(container.exists()).toBeTruthy();
+    expect(wrapper.find('.modal-container').element.style.width).toBe('600px');
+
+    expect(consoleErrorSpy).toHaveBeenCalledTimes(1);
+  });
+});

package/components/__tests__/AsyncButton.test.ts

@@ -1,6 +1,5 @@
 import { mount, Wrapper } from '@vue/test-utils';
 import AsyncButton, { ASYNC_BUTTON_STATES } from '@shell/components/AsyncButton.vue';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: AsyncButton', () => {
   it('should render appropriately with default config', () => {
@@ -8,8 +7,7 @@ describe('component: AsyncButton', () => {
     const mockT = jest.fn().mockReturnValue('some-string');
 
     const wrapper: Wrapper<InstanceType<typeof AsyncButton> & { [key: string]: any }> = mount(AsyncButton, {
-      directives: { cleanHtmlDirective },
-      mocks:      {
+      mocks: {
         $store: {
           getters: {
             'i18n/exists': mockExists,

package/components/__tests__/BackLink.test.ts

@@ -14,7 +14,7 @@ describe('component: BackLink', () => {
 
     const wrapper = shallowMount(BackLink, {
       propsData: { link: linkRoute },
-      stubs:     { NuxtLink: RouterLinkStub }
+      stubs:     { 'router-link': RouterLinkStub }
     });
 
     const link = wrapper.findComponent(RouterLinkStub);

package/components/__tests__/ButtonGroup.test.ts

@@ -22,8 +22,7 @@ describe('component: ButtonGroup', () => {
       propsData: {
         options,
         value: 'val1'
-      },
-      directives: { 'trim-whitespace': jest.fn() },
+      }
     });
 
     const firstBtn = wrapper.find('[data-testid="button-group-child-0"]');
@@ -68,8 +67,7 @@ describe('component: ButtonGroup', () => {
         inactiveClass: 'bg-some-inactive-class',
         iconSize:      'xxxxl',
         value:         'val1'
-      },
-      directives: { 'trim-whitespace': jest.fn() },
+      }
     });
 
     const firstBtn = wrapper.find('[data-testid="button-group-child-0"]');
@@ -110,8 +108,7 @@ describe('component: ButtonGroup', () => {
       propsData: {
         options,
         value: 'val1'
-      },
-      directives: { 'trim-whitespace': jest.fn() },
+      }
     });
 
     const firstBtn = wrapper.find('[data-testid="button-group-child-0"]');

package/components/__tests__/Carousel.test.ts

@@ -0,0 +1,43 @@
+import { mount } from '@vue/test-utils';
+import Carousel from '@shell/components/Carousel.vue';
+
+describe('component: Carousel', () => {
+  it('should render component with the correct data applied', async() => {
+    const sliders = [
+      {
+        key:              'key-0',
+        repoName:         'some-repo-name-0',
+        chartNameDisplay: 'chart-name-display-0',
+        chartDescription: 'chart-description-0'
+      },
+      {
+        key:              'key-1',
+        repoName:         'some-repo-name-1',
+        chartNameDisplay: 'chart-name-display-1',
+        chartDescription: 'chart-description-1'
+      },
+      {
+        key:              'key-2',
+        repoName:         'some-repo-name-2',
+        chartNameDisplay: 'chart-name-display-2',
+        chartDescription: 'chart-description-2'
+      },
+      {
+        key:              'key-3',
+        repoName:         'some-repo-name-3',
+        chartNameDisplay: 'chart-name-display-3',
+        chartDescription: 'chart-description-3'
+      }
+    ];
+
+    const wrapper = mount(Carousel, {
+      propsData: { sliders },
+      mocks:     { $store: { getters: { clusterId: () => 'some-cluster-id' } } }
+    });
+
+    // testing https://github.com/rancher/dashboard/issues/9975
+    sliders.forEach((slider, index) => {
+      expect(wrapper.find(`#slide${ index } h1`).text()).toContain(slider.chartNameDisplay);
+    });
+  });
+});

package/components/__tests__/Certificates.test.ts

@@ -0,0 +1,29 @@
+import { shallowMount } from '@vue/test-utils';
+import Certificates from '@shell/components/Certificates.vue';
+import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+
+describe('component: Certificates', () => {
+  it("show correct 'expiring' banner", async() => {
+    const wrapper = shallowMount(Certificates, {
+      data() {
+        return {
+          schema: {},
+          certs:  [{ certState: STATES_ENUM.EXPIRING }]
+        };
+      },
+      mocks: {
+        $fetchState: { pending: false },
+        $store:      {
+          getters: {
+            'i18n/t':            (l: string) => { },
+            'cluster/schemaFor': () => ({ })
+          }
+        }
+      },
+    });
+
+    const expiringBanner = wrapper.find('[data-testid="cert-expiring-banner"]');
+
+    expect(expiringBanner.exists()).toBe(true);
+  });
+});

package/components/__tests__/{CodeMirror.spec.ts → CodeMirror.test.ts}

@@ -59,22 +59,10 @@ describe('component: CodeMirror.vue', () => {
       await wrapper.vm.$nextTick();
 
       const keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
-      const closeIcon = keyMapBox.find('.icon');
-
-      expect(keyMapBox.element.textContent).toContain('Vim');
-      expect(closeIcon.element).toBeUndefined();
-    });
-
-    it(`should show keyMap close icon on mouse over`, async() => {
-      await wrapper.vm.$nextTick();
-
-      const keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
-
-      keyMapBox.trigger('mouseover');
-      await wrapper.vm.$nextTick();
-
-      const closeIcon = keyMapBox.find('.icon');
+      const keyboardIcon = keyMapBox.find('.keymap-indicator');
+      const closeIcon = keyMapBox.find('.icon-close');
 
+      expect(keyboardIcon.element).toBeDefined();
       expect(closeIcon.element).toBeDefined();
     });
 
@@ -83,10 +71,10 @@ describe('component: CodeMirror.vue', () => {
 
       let keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
 
-      keyMapBox.trigger('mouseover');
+      keyMapBox.trigger('mouseenter');
       await wrapper.vm.$nextTick();
 
-      const closeIcon = keyMapBox.find('.icon');
+      const closeIcon = keyMapBox.find('.icon-close');
 
       closeIcon.element.click();
       await wrapper.vm.$nextTick();

package/components/__tests__/CruResource.test.ts

@@ -1,7 +1,6 @@
 import { mount } from '@vue/test-utils';
 import CruResource from '@shell/components/CruResource.vue';
 import { _EDIT, _YAML } from '@shell/config/query-params';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 
 describe('component: CruResource', () => {
@@ -20,7 +19,8 @@ describe('component: CruResource', () => {
             'current_store/all':       jest.fn(),
             'i18n/t':                  jest.fn(),
             'i18n/exists':             jest.fn(),
-          }
+          },
+          dispatch: jest.fn(),
         },
         $route:  { query: { AS: _YAML } },
         $router: { applyQuery: jest.fn() },
@@ -35,8 +35,7 @@ describe('component: CruResource', () => {
   it('should display multiple errors', () => {
     const errors = ['mistake!', 'BiG MiStAke11'];
     const wrapper = mount(CruResource, {
-      directives: { cleanHtmlDirective },
-      propsData:  {
+      propsData: {
         canYaml:  false,
         mode:     _EDIT,
         resource: {},
@@ -54,7 +53,8 @@ describe('component: CruResource', () => {
             'current_store/all':       jest.fn(),
             'i18n/t':                  jest.fn(),
             'i18n/exists':             jest.fn(),
-          }
+          },
+          dispatch: jest.fn(),
         },
         $route:  { query: { AS: _YAML } },
         $router: { applyQuery: jest.fn() },
@@ -87,7 +87,8 @@ describe('component: CruResource', () => {
             'current_store/all':       jest.fn(),
             'i18n/t':                  jest.fn(),
             'i18n/exists':             jest.fn(),
-          }
+          },
+          dispatch: jest.fn(),
         },
         $route:  { query: { AS: _YAML } },
         $router: { applyQuery: jest.fn() },
@@ -105,8 +106,7 @@ describe('component: CruResource', () => {
   it('should not prevent default events on keypress Enter', async() => {
     const event = { preventDefault: jest.fn() };
     const wrapper = mount(CruResource, {
-      directives: { cleanHtmlDirective },
-      propsData:  {
+      propsData: {
         canYaml:            false,
         mode:               _EDIT,
         resource:           {},
@@ -126,7 +126,8 @@ describe('component: CruResource', () => {
             'current_store/all':       jest.fn(),
             'i18n/t':                  jest.fn(),
             'i18n/exists':             jest.fn(),
-          }
+          },
+          dispatch: jest.fn(),
         },
         $route:  { query: { AS: _YAML } },
         $router: { applyQuery: jest.fn() },