dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-logTest.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

@@ -3,6 +3,10 @@ import { NORMAN } from '@shell/config/types';
 
 export default {
   props: {
+    userLogo: {
+      type:    Boolean,
+      default: false,
+    },
     value: {
       type:     String,
       required: true,
@@ -16,7 +20,15 @@ export default {
     showLabels: {
       type:    Boolean,
       default: false,
-    }
+    },
+    isShowPass: {
+      type:    Boolean,
+      default: false,
+    },
+    userLogoSize: {
+      type:    Number,
+      default: 20,
+    },
   },
 
   async fetch() {
@@ -86,9 +98,10 @@ export default {
     </template>
 
     <template v-else-if="principal">
-      <div class="avatar">
+      <div v-if="userLogo" :style="userLogoSize === 79 ? { width: '287px' } : {}" class="avatar">
         <img
-          :src="principal.avatarSrc"
+          :style="{ width: userLogoSize + 'px', height: userLogoSize + 'px', marginRight: '10px' }"
+          src="@shell/assets/images/user.png"
           :class="{'round': principal.roundAvatar}"
           :alt="t('principal.alt.avatar')"
         >
@@ -98,11 +111,19 @@ export default {
         class="name"
       >
         <table>
-          <tbody>
-            <tr><th>{{ t('principal.name') }}: </th><td>{{ principal.name || principal.loginName }}</td></tr>
-            <tr><th>{{ t('principal.loginName') }}: </th><td>{{ principal.loginName }}</td></tr>
-            <tr><th>{{ t('principal.type') }}: </th><td>{{ principal.displayType }}</td></tr>
-          </tbody>
+          <tr class="mb-10">
+            <td>{{ t('principal.name') }}: </td><td>{{ principal.name || principal.loginName }}</td>
+          </tr>
+          <tr class="mb-10">
+            <td>{{ t('principal.loginName') }}: </td><td>{{ principal.loginName }}</td>
+          </tr>
+          <tr
+            v-if="isShowPass"
+            class="mb-10"
+          >
+            <td>修改密码: </td><td>****** <slot name="edit" /></td>
+          </tr>
+          <tr><td>{{ t('principal.type') }}: </td><td>{{ principal.displayType }}</td></tr>
         </table>
       </div>
       <template v-else>
@@ -154,16 +175,15 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  $size: 20px;
+  $size: 24px;
 
   .principal {
     display: grid;
     grid-template-areas:
       "avatar name"
       "avatar description";
-    grid-template-columns: $size auto;
+    grid-template-columns: min-content auto;
     // grid-template-rows: auto math.div($size, 2);
-    column-gap: 10px;
 
     th {
       text-align: left;
@@ -172,24 +192,35 @@ export default {
     }
 
     &.showLabels {
-      grid-template-areas:
+      /* grid-template-areas:
         "avatar name";
       grid-template-columns: 60px auto;
       grid-template-rows: 60px;
-      column-gap: 0;
+      column-gap: 0; */
+      display: flex;
+      column-gap:0;
       .name {
+        display: flex;
         line-height: unset;
       }
-
+      table tr {
+        display: block;
+      }
       table tr td:not(:first-of-type) {
         padding-left: 10px;
       }
+      table tr td:not(:last-of-type) {
+        width: 100px;
+      }
     }
 
     .avatar {
-      grid-area: avatar;
-      text-align: center;
-      
+      /* grid-area: avatar;
+      text-align: center; */
+      // width: 287px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
       DIV.empty {
         border: 1px solid var(--border);
@@ -208,13 +239,13 @@ export default {
 
     .name {
       grid-area: name;
-      line-height: math.div($size, 2);
+      line-height: 16px;
       overflow-wrap: anywhere;
     }
 
     .description {
       grid-area: description;
-      line-height: math.div($size, 2);
+      line-height: 16px;
     }
   }
 </style>