@rancher/shell 3.0.5-rc.1 → 3.0.5-rc.3

package/components/SortableTable/paging.js

@@ -49,6 +49,21 @@ export default {
       return this.$store.getters['i18n/t'](this.pagingLabel, opt);
     },
 
+    perPage() {
+      let out = this.rowsPerPage || 0;
+
+      if ( out <= 0 ) {
+        out = parseInt(this.$store.getters['prefs/get'](ROWS_PER_PAGE), 10) || 0;
+      }
+
+      // This should ideally never happen, but the preference value could be invalid, so return something...
+      if ( out <= 0 ) {
+        out = 10;
+      }
+
+      return out;
+    },
+
     pagedRows() {
       if (this.externalPaginationEnabled) {
         return this.rows;
@@ -61,9 +76,7 @@ export default {
   },
 
   data() {
-    const perPage = this.getPerPage();
-
-    return { page: 1, perPage };
+    return { page: 1 };
   },
 
   watch: {
@@ -89,22 +102,6 @@ export default {
   },
 
   methods: {
-    getPerPage() {
-      // perPage can not change while the list is displayed
-      let out = this.rowsPerPage || 0;
-
-      if ( out <= 0 ) {
-        out = parseInt(this.$store.getters['prefs/get'](ROWS_PER_PAGE), 10) || 0;
-      }
-
-      // This should ideally never happen, but the preference value could be invalid, so return something...
-      if ( out <= 0 ) {
-        out = 10;
-      }
-
-      return out;
-    },
-
     setPage(num) {
       if (this.page === num) {
         return;

package/components/SortableTable/selection.js

@@ -340,17 +340,6 @@ export default {
       if ( !isSelected ) {
         this.update([node], this.selectedRows.slice());
       }
-
-      let resources = this.selectedRows;
-
-      if ( this.mangleActionResources ) {
-        resources = await this.mangleActionResources(resources);
-      }
-
-      this.$store.commit(`action-menu/show`, {
-        resources,
-        event: e,
-      });
     },
 
     keySelectRow(row, more = false) {
@@ -542,7 +531,7 @@ export default {
     },
 
     clearSelection() {
-      this.update([], this.selectedRows);
+      this.update([], [...this.selectedRows]);
     },
 
   }

package/components/Tabbed/index.vue

@@ -61,6 +61,11 @@ export default {
     tabsOnly: {
       type:    Boolean,
       default: false,
+    },
+
+    resource: {
+      type:    Object,
+      default: () => {}
     }
   },
 
@@ -355,6 +360,7 @@ export default {
       >
         <component
           :is="tab.component"
+          :resource="resource"
         />
       </Tab>
     </div>

package/components/Wizard.vue

@@ -426,7 +426,7 @@ export default {
         </div>
         <div
           id="wizard-footer-controls"
-          class="controls-row pt-20"
+          class="controls-row"
         >
           <slot
             name="cancel"
@@ -674,7 +674,7 @@ $spacer: 10px;
 // We have to account for the absolute position of the .controls-row
 .footer-error {
   margin-top: -40px;
-  margin-bottom: 70px;
+  margin-bottom: calc($footer-height + 10px);
 }
 
   .controls-row {

package/components/__tests__/AsyncButton.test.ts

@@ -145,4 +145,43 @@ describe('component: AsyncButton', () => {
     expect(spyDone).toHaveBeenCalledWith('cancelled');
     expect(wrapper.vm.phase).toBe(ASYNC_BUTTON_STATES.ACTION);
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', () => {
+    const mockExists = jest.fn().mockReturnValue(true);
+    const mockT = jest.fn().mockReturnValue('some-string');
+    const ariaLabel = 'some-aria-label';
+    const ariaLabelledBy = 'some-aria-labelledby';
+
+    const wrapper: VueWrapper<InstanceType<typeof AsyncButton>> = mount(AsyncButton, {
+      props:  { icon: 'some-icon', disabled: true },
+      attrs:  { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy },
+      global: {
+        mocks: {
+          $store: {
+            getters: {
+              'i18n/exists': mockExists,
+              'i18n/t':      mockT
+            }
+          },
+        }
+      },
+    });
+
+    const item = wrapper.find('button');
+
+    const itemRole = item.attributes('role');
+    const itemAriaLabel = item.attributes('aria-label');
+    const itemAriaLabelledBy = item.attributes('aria-labelledby');
+    const itemAriaDisabled = item.attributes('aria-disabled');
+
+    // let's check some attributes passing...
+    expect(itemAriaLabel).toBe(ariaLabel);
+    expect(itemAriaLabelledBy).toBe(ariaLabelledBy);
+
+    // rest of the checks
+    expect(itemRole).toBe('button');
+    expect(itemAriaDisabled).toBe('true');
+    expect(item.find('span[data-testid="async-btn-display-label"]').attributes('id')).toBe(wrapper.vm.describedbyId);
+    expect(item.find('i').attributes('alt')).toBeDefined();
+  });
 });

package/components/__tests__/CruResource.test.ts

@@ -68,6 +68,69 @@ describe('component: CruResource', () => {
     expect(node.text()).toContain(errors[1]);
   });
 
+  it.each([
+    ['error', 'error'],
+    [{
+      code: 'ActionNotAvailable', status: 500, message: 'error'
+    }, 'errors.actionNotAvailable'],
+    [{
+      status: 422, fieldName: 'Name', code: 'NotUnique', message: 'error'
+    }, 'errors.failedInApi.withName.withCodeExplanation.withMessageDetail'],
+    [{
+      status: 422, fieldName: 'Name', code: 'NotUnique'
+    }, 'errors.failedInApi.withName.withCodeExplanation.withoutMessageDetail'],
+    [{
+      status: 422, fieldName: 'Name', code: 'Brr', message: 'error'
+    }, 'errors.failedInApi.withName.withMessageDetail'],
+    [{
+      status: 422, fieldName: 'Name', code: 'Brr'
+    }, 'errors.failedInApi.withName.withoutAnythingElse'],
+    [{
+      status: 422, code: 'NotUnique', message: 'error'
+    }, 'errors.failedInApi.withoutName.withMessageDetail.withCodeExplanation'],
+    [{ status: 422, message: 'error' }, 'errors.failedInApi.withoutName.withMessageDetail.withoutCodeExplanation'],
+    [{ status: 422, code: 'NotUnique' }, 'errors.failedInApi.withoutName.withCode.withCodeExplanation'],
+    [{ status: 422, code: 'Brr' }, 'errors.failedInApi.withoutName.withCode.withoutCodeExplanation'],
+    [{ status: 422 }, 'errors.failedInApi.withoutAnything'],
+    [{ status: 404, message: 'message' }, 'errors.notFound.withoutUrl'],
+    [{
+      status: 404, message: 'message', opt: { url: 'test' }
+    }, 'errors.notFound.withUrl'],
+    [{ status: 500, message: 'message' }, 'errors.messageOrDetail'],
+    [{
+      status: 500, message: 'message', detail: 'detail'
+    }, 'errors.messageAndDetail'],
+    [{ status: 500, detail: 'detail' }, 'errors.messageOrDetail'],
+  ])('should display correct error', (err, res) => {
+    const wrapper = mount(CruResource, {
+      props: {
+        canYaml:  false,
+        mode:     _EDIT,
+        resource: {},
+        errors:   [err]
+      },
+      global: {
+        mocks: {
+          $store: {
+            getters: {
+              currentStore:              () => 'current_store',
+              'current_store/schemaFor': jest.fn(),
+              'current_store/all':       jest.fn(),
+              'i18n/t':                  (text: string) => text,
+              'i18n/exists':             jest.fn(),
+            },
+            dispatch: jest.fn(),
+          },
+          $route:  { query: { AS: _YAML } },
+          $router: { applyQuery: jest.fn() },
+        },
+      }
+    });
+    const node = wrapper.find('#cru-errors');
+
+    expect(node.text()).toContain(res);
+  });
+
   it('should prevent default events on keypress Enter', async() => {
     const event = { preventDefault: jest.fn() };
     const wrapper = mount(CruResource, {

package/components/__tests__/ModalManager.spec.ts

@@ -0,0 +1,176 @@
+import { mount } from '@vue/test-utils';
+import { createStore, Store } from 'vuex';
+import { nextTick } from 'vue';
+
+import ModalManager from '@shell/components/ModalManager.vue';
+
+interface ModalManagerMethods {
+  registerBackgroundClosing(fn: Function): void;
+  close(): void;
+}
+
+const MockComponent = {
+  template: '<div data-testid="modal-manager-component">Mock Content</div>',
+  props:    ['someProp', 'resources', 'registerBackgroundClosing']
+};
+
+describe('modalManager.vue with Teleport', () => {
+  let store: Store<any>;
+  let getters: Record<string, () => any>;
+  let modalsDiv: HTMLDivElement;
+
+  beforeEach(() => {
+    // Create the teleport target container
+    modalsDiv = document.createElement('div');
+    modalsDiv.setAttribute('id', 'modals');
+    document.body.appendChild(modalsDiv);
+
+    getters = {
+      'modal/isOpen':              () => true,
+      'modal/component':           () => MockComponent,
+      'modal/componentProps':      () => ({ someProp: 'testValue' }),
+      'modal/resources':           () => ({ data: 'mockData' }),
+      'modal/closeOnClickOutside': () => true,
+      'modal/modalWidth':          () => '500px'
+    };
+
+    store = createStore({
+      getters,
+      mutations: { 'modal/closeModal': jest.fn() }
+    });
+  });
+
+  afterEach(() => {
+    // Clean up the teleport container after each test
+    document.body.removeChild(modalsDiv);
+  });
+
+  const factory = () => {
+    return mount(ModalManager, {
+      attachTo: document.body, // attach so Teleport can work properly
+      global:   {
+        plugins: [store],
+        stubs:   {
+          AppModal: {
+            name:     'AppModal',
+            template: `<div data-testid="app-modal" @close="$emit('close')" :style="{ '--prompt-modal-width': width }"><slot /></div>`,
+            props:    ['clickToClose', 'width']
+          }
+        }
+      }
+    });
+  };
+
+  it('renders the AppModal and dynamic component when modal is open', async() => {
+    factory();
+
+    await nextTick();
+
+    // Because Teleport moves content out of the normal wrapper,
+    // we query the document for the teleported elements.
+    const appModal = document.querySelector('[data-testid="app-modal"]');
+    const dynamicComponent = document.querySelector('[data-testid="modal-manager-component"]');
+
+    expect(appModal).toBeTruthy();
+    expect(dynamicComponent).toBeTruthy();
+    expect(appModal?.getAttribute('style')).toContain('--prompt-modal-width: 500px');
+
+    // We assume the mock component is rendered correctly if its markup is found.
+  });
+
+  it('does not render the AppModal when modal is closed', async() => {
+    getters['modal/isOpen'] = () => false;
+    store = createStore({
+      getters,
+      mutations: { 'modal/closeModal': jest.fn() }
+    });
+    factory();
+    await nextTick();
+
+    const appModal = document.querySelector('[data-testid="app-modal"]');
+
+    expect(appModal).toBeNull();
+  });
+
+  it('does not render the AppModal when dynamic component is null', async() => {
+    getters['modal/component'] = () => null;
+    store = createStore({
+      getters,
+      mutations: { 'modal/closeModal': jest.fn() }
+    });
+    factory();
+    await nextTick();
+
+    const appModal = document.querySelector('[data-testid="app-modal"]');
+
+    expect(appModal).toBeNull();
+  });
+
+  it('calls store commit when close is triggered', async() => {
+    const closeModalMutation = jest.fn();
+
+    getters['modal/isOpen'] = () => true;
+    store = createStore({
+      getters,
+      mutations: { 'modal/closeModal': closeModalMutation }
+    });
+    const wrapper = factory();
+
+    await nextTick();
+
+    const appModalWrapper = wrapper.findComponent({ name: 'AppModal' });
+
+    appModalWrapper.vm.$emit('close');
+    await nextTick();
+
+    expect(closeModalMutation).toHaveBeenCalledWith({}, undefined);
+  });
+
+  it('calls registered background closing function on close', async() => {
+    const closeModalMutation = jest.fn();
+
+    getters['modal/isOpen'] = () => true;
+    store = createStore({
+      getters,
+      mutations: { 'modal/closeModal': closeModalMutation }
+    });
+    const wrapper = factory();
+
+    await nextTick();
+
+    const backgroundFn = jest.fn();
+
+    (wrapper.vm as unknown as ModalManagerMethods).registerBackgroundClosing(backgroundFn);
+    await nextTick();
+
+    const appModalWrapper = wrapper.findComponent({ name: 'AppModal' });
+
+    appModalWrapper.vm.$emit('close');
+    await nextTick();
+
+    expect(backgroundFn).toHaveBeenCalledWith();
+    expect(closeModalMutation).toHaveBeenCalledWith({}, undefined);
+  });
+
+  it('does nothing if modal is already closed when close is triggered', async() => {
+    const closeModalMutation = jest.fn();
+
+    getters['modal/isOpen'] = () => false;
+    store = createStore({
+      getters,
+      mutations: { 'modal/closeModal': closeModalMutation }
+    });
+    const wrapper = factory();
+
+    await nextTick();
+
+    const modalManager = wrapper.vm as unknown as ModalManagerMethods;
+    const spy = jest.spyOn(modalManager, 'close');
+
+    modalManager.close();
+    await nextTick();
+
+    expect(spy).toHaveBeenCalledWith();
+    expect(closeModalMutation).not.toHaveBeenCalled();
+  });
+});

package/components/__tests__/PromptModal.test.ts

@@ -0,0 +1,146 @@
+import { mount } from '@vue/test-utils';
+import PromptModal from '@shell/components/PromptModal.vue';
+
+import GenericPrompt from '@shell/dialog/GenericPrompt.vue';
+import AddClusterMemberDialog from '@shell/dialog/AddClusterMemberDialog.vue';
+import AddCustomBadgeDialog from '@shell/dialog/AddCustomBadgeDialog.vue';
+import AddonConfigConfirmationDialog from '@shell/dialog/AddonConfigConfirmationDialog.vue';
+import AddProjectMemberDialog from '@shell/dialog/AddProjectMemberDialog.vue';
+import DeactivateDriverDialog from '@shell/dialog/DeactivateDriverDialog.vue';
+import DiagnosticTimingsDialog from '@shell/dialog/DiagnosticTimingsDialog.vue';
+import DrainNode from '@shell/dialog/DrainNode.vue';
+import ForceMachineRemoveDialog from '@shell/dialog/ForceMachineRemoveDialog.vue';
+import GitRepoForceUpdateDialog from '@shell/dialog/GitRepoForceUpdateDialog.vue';
+import RollbackWorkloadDialog from '@shell/dialog/RollbackWorkloadDialog.vue';
+import RotateCertificatesDialog from '@shell/dialog/RotateCertificatesDialog.vue';
+import RotateEncryptionKeyDialog from '@shell/dialog/RotateEncryptionKeyDialog.vue';
+import ScaleMachineDownDialog from '@shell/dialog/ScaleMachineDownDialog.vue';
+import ScalePoolDownDialog from '@shell/dialog/ScalePoolDownDialog.vue';
+import SloDialog from '@shell/dialog/SloDialog.vue';
+
+import DisableAuthProviderDialog from '@shell/dialog/DisableAuthProviderDialog.vue';
+import WechatDialog from '@shell/dialog/WechatDialog.vue';
+import DeveloperLoadExtensionDialog from '@shell/dialog/DeveloperLoadExtensionDialog.vue';
+import AddExtensionReposDialog from '@shell/dialog/AddExtensionReposDialog.vue';
+import InstallExtensionDialog from '@shell/dialog/InstallExtensionDialog.vue';
+import UninstallExtensionDialog from '@shell/dialog/UninstallExtensionDialog.vue';
+import KnownHostsEditDialog from '@shell/dialog/KnownHostsEditDialog.vue';
+import ImportDialog from '@shell/dialog/ImportDialog.vue';
+import SearchDialog from '@shell/dialog/SearchDialog.vue';
+import ChangePasswordDialog from '@shell/dialog/ChangePasswordDialog.vue';
+import AssignToDialog from '@shell/dialog/AssignToDialog.vue';
+import FeatureFlagListDialog from '@shell/dialog/FeatureFlagListDialog.vue';
+import MoveNamespaceDialog from '@shell/dialog/MoveNamespaceDialog.vue';
+import ExtensionCatalogInstallDialog from '@shell/dialog/ExtensionCatalogInstallDialog.vue';
+import ExtensionCatalogUninstallDialog from '@shell/dialog/ExtensionCatalogUninstallDialog.vue';
+
+import { createStore } from 'vuex';
+
+jest.mock('@shell/utils/clipboard', () => {
+  return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
+});
+
+function generateStore(component: any):any {
+  return createStore({
+    modules: { // promptModal
+      'action-menu': {
+        namespaced: true,
+        state:      {
+          modalData: {
+            closeOnClickOutside: true,
+            resources:           [{ cluster: { isRke2: true, machines: [] } }], // ScaleMachineDownDialog
+            componentProps:      {
+              drivers:             [], // DeactivateDriverDialog
+              driverType:          'kontainerDrivers', // DeactivateDriverDialog
+              downloadData:        () => jest.fn(), // DiagnosticTimingsDialog
+              gatherResponseTimes: () => jest.fn(), // DiagnosticTimingsDialog
+              kubeNodes:           [{}], // DrainNode
+              repositories:        [], // GitRepoForceUpdateDialog
+              workload:            { metadata: {}, kind: '' }, // RollbackWorkloadDialog
+              catalog:             {}
+            },
+          },
+
+        },
+      },
+    },
+    getters: {
+      'type-map/importDialog': () => () => component, // promptModal
+      'i18n/exists':           () => jest.fn(), // promptModal
+      'i18n/t':                () => jest.fn(), // general usage
+      'rancher/schemaFor':     () => jest.fn(), // general usage
+      'prefs/get':             () => jest.fn(), // ScalePoolDownDialog
+      'type-map/allTypes':     () => jest.fn(), // SearchDialog
+      'type-map/labelFor':     () => jest.fn(), // ScaleMachineDownDialog
+      'type-map/getTree':      () => jest.fn().mockReturnValue([]), // SearchDialog
+      'cluster/all':           () => jest.fn(), // SearchDialog
+      currentProduct:          () => { // SearchDialog
+        return { inStore: 'cluster' };
+      },
+      currentCluster: () => { // general usage
+        'local';
+      },
+    }
+  });
+}
+
+describe('component: PromptModal', () => {
+  it.each([
+    // current prompt modals at time of coding
+    ['GenericPrompt', GenericPrompt],
+    ['AddClusterMemberDialog', AddClusterMemberDialog],
+    ['AddonConfigConfirmationDialog', AddonConfigConfirmationDialog],
+    ['AddProjectMemberDialog', AddProjectMemberDialog],
+    ['DeactivateDriverDialog', DeactivateDriverDialog],
+    ['DiagnosticTimingsDialog', DiagnosticTimingsDialog],
+    ['DrainNode', DrainNode],
+    ['ForceMachineRemoveDialog', ForceMachineRemoveDialog],
+    ['GitRepoForceUpdateDialog', GitRepoForceUpdateDialog],
+    ['RollbackWorkloadDialog', RollbackWorkloadDialog],
+    ['RotateCertificatesDialog', RotateCertificatesDialog],
+    ['RotateEncryptionKeyDialog', RotateEncryptionKeyDialog],
+    ['SloDialog', SloDialog],
+    ['AddCustomBadgeDialog', AddCustomBadgeDialog],
+    ['ScaleMachineDownDialog', ScaleMachineDownDialog],
+    ['ScalePoolDownDialog', ScalePoolDownDialog],
+    // new modals created/moved
+    ['DisableAuthProviderDialog', DisableAuthProviderDialog],
+    ['WechatDialog', WechatDialog],
+    ['DeveloperLoadExtensionDialog', DeveloperLoadExtensionDialog],
+    ['AddExtensionReposDialog', AddExtensionReposDialog],
+    ['InstallExtensionDialog', InstallExtensionDialog],
+    ['UninstallExtensionDialog', UninstallExtensionDialog],
+    ['KnownHostsEditDialog', KnownHostsEditDialog],
+    ['ImportDialog', ImportDialog],
+    ['SearchDialog', SearchDialog],
+    ['ChangePasswordDialog', ChangePasswordDialog],
+    ['AssignToDialog', AssignToDialog],
+    ['FeatureFlagListDialog', FeatureFlagListDialog],
+    ['MoveNamespaceDialog', MoveNamespaceDialog],
+    ['ExtensionCatalogInstallDialog', ExtensionCatalogInstallDialog],
+    ['ExtensionCatalogUninstallDialog', ExtensionCatalogUninstallDialog],
+  ])('prompt Modal should render modal %p', (modalName, component) => {
+    // mock structuredClone
+    window.structuredClone = (arg) => JSON.parse(JSON.stringify(arg));
+
+    document.body.innerHTML = '<div id="modals"></div>';
+    const wrapper = mount(PromptModal,
+      {
+        attachTo: document.body,
+        data() {
+          return { opened: true }; // this controls modal content visibility
+        },
+        global: {
+          mocks: {
+            $store:      generateStore(component),
+            $fetchState: {}
+          },
+          stubs: { transition: false }
+        }
+      }
+    );
+
+    expect(wrapper.vm.opened).toBe(true);
+    expect(wrapper.findComponent(component as any).exists()).toBe(true);
+  });
+});