dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-test.2

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

package/components/__tests__/PromptRestore.test.ts

@@ -4,7 +4,7 @@ import PromptRestore from '@shell/components/PromptRestore.vue';
 import { createStore } from 'vuex';
 import { ExtendedVue, Vue } from 'vue/types/vue';
 import { DefaultProps } from 'vue/types/options';
-import { CAPI, NORMAN } from '@shell/config/types';
+import { CAPI } from '@shell/config/types';
 import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 
 const RKE2_CLUSTER_NAME = 'rke2_cluster_name';
@@ -33,32 +33,6 @@ const RKE2_FAILED_SNAPSHOT = {
   name:         'rke2_name_3'
 };
 
-const RKE1_CLUSTER_NAME = 'rke1_cluster_name';
-const RKE1_SUCCESSFUL_SNAPSHOT_1 = {
-  clusterId: RKE1_CLUSTER_NAME,
-  type:      NORMAN.ETCD_BACKUP,
-  state:     STATES_ENUM.ACTIVE,
-  created:   'Thu Jul 30 2023 11:11:39',
-  id:        'rke1_id_1',
-  name:      'rke1_name_1'
-};
-const RKE1_SUCCESSFUL_SNAPSHOT_2 = {
-  clusterId: RKE1_CLUSTER_NAME,
-  type:      NORMAN.ETCD_BACKUP,
-  state:     STATES_ENUM.ACTIVE,
-  created:   'Thu Jul 30 2022 11:11:39',
-  id:        'rke1_id_2',
-  name:      'rke1_name_2'
-};
-const RKE1_WITH_ERROR_SNAPSHOT = {
-  clusterId: RKE1_CLUSTER_NAME,
-  type:      NORMAN.ETCD_BACKUP,
-  state:     STATES_ENUM.ERROR,
-  created:   'Thu Jul 30 2021 11:11:39',
-  id:        'rke1_id_3',
-  name:      'rke1_name_3'
-};
-
 describe('component: PromptRestore', () => {
   const rke2TestCases = [
     [[], 0],
@@ -98,42 +72,4 @@ describe('component: PromptRestore', () => {
 
     expect(wrapper.vm.clusterSnapshots).toHaveLength(expected);
   });
-
-  const rke1TestCases = [
-    [[], 0],
-    [[RKE1_WITH_ERROR_SNAPSHOT], 0],
-    [[RKE1_SUCCESSFUL_SNAPSHOT_1], 1],
-    [[RKE1_SUCCESSFUL_SNAPSHOT_1, RKE1_SUCCESSFUL_SNAPSHOT_2], 2],
-    [[RKE1_WITH_ERROR_SNAPSHOT, RKE1_SUCCESSFUL_SNAPSHOT_1, RKE1_SUCCESSFUL_SNAPSHOT_2], 2]
-  ];
-
-  it.each(rke1TestCases)('should list RKE1 snapshots properly', async(snapShots, expected) => {
-    const store = createStore({
-      modules: {
-        'action-menu': {
-          namespaced: true,
-          state:      {
-            showPromptRestore: true,
-            toRestore:         [{
-              type:     CAPI.RANCHER_CLUSTER,
-              metadata: { name: RKE1_CLUSTER_NAME },
-              snapShots
-            }]
-          },
-        },
-      },
-      getters: { 'i18n/t': () => jest.fn(), 'prefs/get': () => jest.fn() },
-      actions: { 'rancher/findAll': jest.fn().mockResolvedValue(snapShots) }
-    });
-
-    const wrapper = shallowMount(
-      PromptRestore as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>,
-      { global: { mocks: { $store: store } } }
-    );
-
-    await wrapper.vm.fetchSnapshots();
-    await nextTick();
-
-    expect(wrapper.vm.clusterSnapshots).toHaveLength(expected);
-  });
 });

package/components/__tests__/RichTranslation.test.ts

@@ -0,0 +1,115 @@
+import { mount } from '@vue/test-utils';
+import RichTranslation from '../RichTranslation.vue';
+import { createStore } from 'vuex';
+import { h } from 'vue';
+
+// Mock the i18n store getter
+const mockI18nStore = createStore({
+  getters: {
+    'i18n/t': () => (key: string, args: any, noMarkup: boolean) => {
+      const translations: Record<string, string> = {
+        'test.simple':   'Hello World',
+        'test.html':     'This is <b>bold</b> and <i>italic</i>.',
+        'test.custom':   'This has a <customLink>link</customLink> and <anotherTag/>.',
+        'test.mixed':    'Text before <tag1>content1</tag1> text in middle <tag2/> text after.',
+        'test.noString': 123,
+      };
+
+      return translations[key] || key;
+    },
+  },
+});
+
+describe('richTranslation', () => {
+  it('renders a simple translation correctly', () => {
+    const wrapper = mount(RichTranslation, {
+      props:  { k: 'test.simple' },
+      global: { plugins: [mockI18nStore] },
+    });
+
+    expect(wrapper.text()).toBe('Hello World');
+    expect(wrapper.html()).toContain('<span>Hello World</span>');
+  });
+
+  it('renders HTML tags correctly', () => {
+    const wrapper = mount(RichTranslation, {
+      props:  { k: 'test.html' },
+      global: { plugins: [mockI18nStore] },
+    });
+
+    expect(wrapper.html()).toContain('<span><span>This is </span><b>bold</b><span> and </span><i>italic</i><span>.</span></span>');
+    expect(wrapper.find('b').exists()).toBe(true);
+    expect(wrapper.find('i').exists()).toBe(true);
+  });
+
+  it('renders custom components via slots (enclosing tag)', () => {
+    const wrapper = mount(RichTranslation, {
+      props:  { k: 'test.custom' },
+      slots:  { customLink: ({ content }: { content: string }) => h('a', { href: '/test' }, content) },
+      global: { plugins: [mockI18nStore] },
+    });
+
+    expect(wrapper.html()).toContain('<a href="/test">link</a>');
+    expect(wrapper.find('a').text()).toBe('link');
+  });
+
+  it('renders custom components via slots (self-closing tag)', () => {
+    const wrapper = mount(RichTranslation, {
+      props:  { k: 'test.custom' },
+      slots:  { anotherTag: () => h('span', { class: 'self-closed' }, 'Self-closed content') },
+      global: { plugins: [mockI18nStore] },
+    });
+
+    expect(wrapper.html()).toContain('<span class="self-closed">Self-closed content</span>');
+    expect(wrapper.find('.self-closed').text()).toBe('Self-closed content');
+  });
+
+  it('handles mixed content with multiple custom components', () => {
+    const wrapper = mount(RichTranslation, {
+      props: { k: 'test.mixed' },
+      slots: {
+        tag1: ({ content }: { content: string }) => h('strong', {}, content),
+        tag2: () => h('em', {}, 'emphasized'),
+      },
+      global: { plugins: [mockI18nStore] },
+    });
+
+    expect(wrapper.html()).toContain('<span>Text before </span><strong>content1</strong><span> text in middle </span><em>emphasized</em><span> text after.</span>');
+    expect(wrapper.find('strong').text()).toBe('content1');
+    expect(wrapper.find('em').text()).toBe('emphasized');
+  });
+
+  it('renders correctly when translation is not a string', () => {
+    const wrapper = mount(RichTranslation, {
+      props:  { k: 'test.noString' },
+      global: { plugins: [mockI18nStore] },
+    });
+
+    expect(wrapper.text()).toBe('123');
+    expect(wrapper.html()).toContain('<span>123</span>');
+  });
+
+  it('uses the specified root tag', () => {
+    const wrapper = mount(RichTranslation, {
+      props: {
+        k:   'test.simple',
+        tag: 'div',
+      },
+      global: { plugins: [mockI18nStore] },
+    });
+
+    expect(wrapper.html()).toContain('<div><span>Hello World</span></div>');
+    expect(wrapper.find('div').exists()).toBe(true);
+    expect(wrapper.find('span').exists()).toBe(true); // Inner span for content
+  });
+
+  it('falls back to raw tag content if slot is not provided for enclosing tag', () => {
+    const wrapper = mount(RichTranslation, {
+      props:  { k: 'test.custom' }, // Contains <customLink> and <anotherTag/>
+      // No slots provided
+      global: { plugins: [mockI18nStore] },
+    });
+
+    expect(wrapper.find('a').exists()).toBe(false); // Should not render as <a>
+  });
+});

package/components/auth/AuthBanner.vue

@@ -1,13 +1,9 @@
 
 <script>
 import { Banner } from '@components/Banner';
-import DisableAuthProviderModal from '@shell/components/DisableAuthProviderModal';
 
 export default {
-  components: {
-    Banner,
-    DisableAuthProviderModal
-  },
+  components: { Banner },
 
   props: {
     tArgs: {
@@ -35,7 +31,18 @@ export default {
 
   methods: {
     showDisableModal() {
-      this.$refs.disableAuthProviderModal.show();
+      this.$store.dispatch('management/promptModal', {
+        component:      'DisableAuthProviderDialog',
+        customClass:    'remove-modal',
+        modalWidth:     '400',
+        height:         'auto',
+        styles:         'max-height: 100vh;',
+        componentProps: {
+          disableCb: () => {
+            this.disable();
+          }
+        }
+      });
     }
   },
 };
@@ -78,11 +85,6 @@ export default {
       v-if="$slots.footer"
       name="footer"
     />
-
-    <DisableAuthProviderModal
-      ref="disableAuthProviderModal"
-      @disable="disable"
-    />
   </div>
 </template>
 
@@ -96,9 +98,8 @@ export default {
 }
 
 .values {
-  tr td:not(:first-of-type) {
-    padding-left: 10px;
-  }
+  border-spacing: 8px 8px;  // Add spacing between columns and rows
+  margin-left: -8px; // Move the table back to the left, to compensate for the spacing from above on the left-hand column
 }
 
 </style>

package/components/auth/Principal.vue

@@ -189,7 +189,6 @@ export default {
     .avatar {
       grid-area: avatar;
       text-align: center;
-      
 
       DIV.empty {
         border: 1px solid var(--border);

package/components/auth/RoleDetailEdit.vue

@@ -18,6 +18,7 @@ import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 
 import { SUBTYPE_MAPPING, VERBS } from '@shell/models/management.cattle.io.roletemplate';
 import Loading from '@shell/components/Loading';
+import Banner from '@components/Banner/Banner.vue';
 
 const GLOBAL = SUBTYPE_MAPPING.GLOBAL.key;
 const CLUSTER = SUBTYPE_MAPPING.CLUSTER.key;
@@ -64,7 +65,8 @@ export default {
     SortableTable,
     Loading,
     Error,
-    LabeledInput
+    LabeledInput,
+    Banner,
   },
 
   mixins: [CreateEditView, FormValidation],
@@ -497,7 +499,8 @@ export default {
           index:           i,
           apiGroups:       rule.apiGroups || [''],
           resources:       rule.resources || [],
-          nonResourceURLs: rule.nonResourceURLs || []
+          nonResourceURLs: rule.nonResourceURLs || [],
+          verbs:           rule.verbs,
         };
 
         VERBS.forEach((verb) => {
@@ -531,6 +534,13 @@ export default {
 
       return res;
     },
+
+    showPsaWarning(grant) {
+      return this.value.subtype === NAMESPACE &&
+        grant.verbs?.includes('updatepsa') &&
+        grant.resources?.includes('projects') &&
+        grant.apiGroups?.includes('management.cattle.io');
+    }
   }
 };
 </script>
@@ -565,9 +575,28 @@ export default {
         :table-actions="false"
         :row-actions="false"
         :search="false"
-      />
+        :sub-rows="true"
+      >
+        <template #sub-row="{row, fullColspan, onRowMouseEnter, onRowMouseLeave}">
+          <tr
 
-      <!-- 继承的规则列表 -->
+            class="sub-row"
+            @mouseenter="onRowMouseEnter"
+            @mouseleave="onRowMouseLeave"
+          >
+            <td
+              v-if="showPsaWarning(row)"
+              :colspan="fullColspan"
+            >
+              <Banner
+                style="margin: 0px"
+                label-key="rbac.roletemplate.tabs.grantResources.psaWarning"
+                color="warning"
+              />
+            </td>
+          </tr>
+        </template>
+      </SortableTable>
       <div
         v-for="(inherited, index) of inheritedRules"
         :key="index"
@@ -772,6 +801,17 @@ export default {
                 </div>
               </div>
             </template>
+            <template #value-sub-row="{row}">
+              <div
+                v-if="showPsaWarning(row.value)"
+                class="mr-20"
+              >
+                <Banner
+                  label-key="rbac.roletemplate.tabs.grantResources.psaWarning"
+                  color="warning"
+                />
+              </div>
+            </template>
           </ArrayList>
         </Tab>
 

package/components/auth/login/ldap.vue

@@ -54,7 +54,7 @@ export default {
 </script>
 
 <template>
-  <form>
+  <form @submit.prevent>
     <template v-if="open">
       <div class="span-6 offset-3">
         <div class="mb-20">
@@ -69,7 +69,7 @@ export default {
             v-model:value="password"
             type="password"
             :label="t('login.password')"
-            autocomplete="password"
+            autocomplete="current-password"
           />
         </div>
       </div>

package/components/auth/login/oidc.vue

@@ -6,7 +6,12 @@ export default {
 
   computed: {
     uniqueDisplayName() {
-      return this.t('model.authConfig.description.oidc');
+      switch (this.name) {
+      case 'cognito':
+        return this.t('model.authConfig.description.cognito');
+      default:
+        return this.t('model.authConfig.description.oidc');
+      }
     },
   },