@rancher/shell 3.0.4 → 3.0.5-rc.2

package/components/SortableTable/index.vue

@@ -1,8 +1,7 @@
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, useStore } from 'vuex';
 import { defineAsyncComponent, ref, onMounted, onBeforeUnmount } from 'vue';
 import day from 'dayjs';
-import semver from 'semver';
 import isEmpty from 'lodash/isEmpty';
 import { dasherize, ucFirst } from '@shell/utils/string';
 import { get, clone } from '@shell/utils/object';
@@ -25,7 +24,8 @@ import { getParent } from '@shell/utils/dom';
 import { FORMATTERS } from '@shell/components/SortableTable/sortable-config';
 import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
-import { getVersionInfo } from '@shell/utils/version';
+import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
+import ActionDropdownShell from '@shell/components/ActionDropdownShell.vue';
 
 // Uncomment for table performance debugging
 // import tableDebug from './debug';
@@ -62,6 +62,7 @@ export default {
     LabeledSelect,
     ButtonMultiAction,
     ActionMenu,
+    ActionDropdownShell,
   },
   mixins: [
     filtering,
@@ -546,7 +547,13 @@ export default {
       table.value.removeEventListener('keyup', handleEnterKey);
     });
 
-    return { table };
+    const store = useStore();
+    const { featureDropdownMenu } = useRuntimeFlag(store);
+
+    return {
+      table,
+      featureDropdownMenu,
+    };
   },
 
   created() {
@@ -768,12 +775,6 @@ export default {
 
       return rows;
     },
-
-    featureDropdownMenu() {
-      const { fullVersion } = getVersionInfo(this.$store);
-
-      return semver.gte(semver.coerce(fullVersion).version, '2.11.0');
-    }
   },
 
   methods: {
@@ -1104,47 +1105,59 @@ export default {
                 />
                 <span v-clean-html="act.label" />
               </button>
-              <ActionDropdown
-                :class="bulkActionsDropdownClass"
-                class="bulk-actions-dropdown"
-                :disable-button="!selectedRows.length"
-                size="sm"
-              >
-                <template #button-content>
-                  <button
-                    ref="actionDropDown"
-                    class="btn bg-primary mr-0"
-                    :disabled="!selectedRows.length"
-                  >
-                    <i class="icon icon-gear" />
-                    <span>{{ t('sortableTable.bulkActions.collapsed.label') }}</span>
-                    <i class="ml-10 icon icon-chevron-down" />
-                  </button>
-                </template>
-                <template #popover-content>
-                  <ul class="list-unstyled menu">
-                    <li
-                      v-for="(act, i) in hiddenActions"
-                      :key="i"
-                      v-close-popper
-                      v-clean-tooltip="{
-                        content: actionTooltip,
-                        placement: 'right'
-                      }"
-                      :class="{ disabled: !act.enabled }"
-                      @click="applyTableAction(act, null, $event)"
-                      @mouseover="setBulkActionOfInterest(act)"
-                      @mouseleave="setBulkActionOfInterest(null)"
+              <template v-if="featureDropdownMenu">
+                <ActionDropdownShell
+                  :disabled="!selectedRows.length"
+                  :hidden-actions="hiddenActions"
+                  :action-tooltip="actionTooltip"
+                  @click="applyTableAction"
+                  @mouseover="setBulkActionOfInterest"
+                  @mouseleave="setBulkActionOfInterest"
+                />
+              </template>
+              <template v-else>
+                <ActionDropdown
+                  :class="bulkActionsDropdownClass"
+                  class="bulk-actions-dropdown"
+                  :disable-button="!selectedRows.length"
+                  size="sm"
+                >
+                  <template #button-content>
+                    <button
+                      ref="actionDropDown"
+                      class="btn bg-primary mr-0"
+                      :disabled="!selectedRows.length"
                     >
-                      <i
-                        v-if="act.icon"
-                        :class="act.icon"
-                      />
-                      <span v-clean-html="act.label" />
-                    </li>
-                  </ul>
-                </template>
-              </ActionDropdown>
+                      <i class="icon icon-gear" />
+                      <span>{{ t('sortableTable.bulkActions.collapsed.label') }}</span>
+                      <i class="ml-10 icon icon-chevron-down" />
+                    </button>
+                  </template>
+                  <template #popover-content>
+                    <ul class="list-unstyled menu">
+                      <li
+                        v-for="(act, i) in hiddenActions"
+                        :key="i"
+                        v-close-popper
+                        v-clean-tooltip="{
+                          content: actionTooltip,
+                          placement: 'right'
+                        }"
+                        :class="{ disabled: !act.enabled }"
+                        @click="applyTableAction(act, null, $event)"
+                        @mouseover="setBulkActionOfInterest(act)"
+                        @mouseleave="setBulkActionOfInterest(null)"
+                      >
+                        <i
+                          v-if="act.icon"
+                          :class="act.icon"
+                        />
+                        <span v-clean-html="act.label" />
+                      </li>
+                    </ul>
+                  </template>
+                </ActionDropdown>
+              </template>
               <label
                 v-if="selectedRowsText"
                 :class="bulkActionAvailabilityClass"
@@ -1457,9 +1470,9 @@ export default {
                           :value="col.value"
                           :row="row.row"
                           :col="col.col"
+                          :get-custom-detail-link="getCustomDetailLink"
                           v-bind="col.col.formatterOpts"
                           :row-key="row.key"
-                          :get-custom-detail-link="getCustomDetailLink"
                         />
                         <component
                           :is="col.component"

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) {

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

@@ -42,7 +42,7 @@ describe('component: AsyncButton', () => {
     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', () => {
+  it('click on async button should emit click with a proper state of waiting, appear disabled and spinning ::: CB true', () => {
     jest.useFakeTimers();
 
     const wrapper: VueWrapper<InstanceType<typeof AsyncButton>> = mount(AsyncButton, {
@@ -65,7 +65,7 @@ describe('component: AsyncButton', () => {
     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);
+    expect(wrapper.vm.appearsDisabled).toBe(true);
     // testing cb function has been emitted
     expect(typeof wrapper.emitted('click')![0][0]).toBe('function');
 

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,148 @@
+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 SaveAsRKETemplateDialog from '@shell/dialog/SaveAsRKETemplateDialog.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],
+    ['SaveAsRKETemplateDialog', SaveAsRKETemplateDialog],
+    ['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);
+  });
+});