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

package/components/ResourceDetail/{Masthead.vue → Masthead/legacy.vue}

@@ -17,7 +17,6 @@ import TabTitle from '@shell/components/TabTitle';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
 import { useStore } from 'vuex';
-import { harvesterhci2cloud, cloud2harvesterhci } from '@shell/utils/router'
 
 // i18n-uses resourceDetail.header.*
 
@@ -419,14 +418,14 @@ export default {
     demoDisplay() {
       const product = this.$store.getters['productId'];
 
-      const resources = this.location?.params?.resource || ''
+      const resources = this.location?.params?.resource || this.$route.params?.resource || ''
 
       const productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], resources);
 
       if (productId === undefined) {
         return '';
       }
-      const parts = productId.split('::');
+      const parts = productId?.split('::') || [];
       const newString = 'root';
 
       if (!parts?.includes(newString)) {
@@ -442,9 +441,10 @@ export default {
     menuIcon() {
       const product = this.$store.getters['productId'];
 
-      const resources = this.location?.params?.resource || ''
+      const resources = this.location?.params?.resource || this.$route.params?.resource || ''
 
-      return this.$store.getters['type-map/groupsForVirTypes'](product, resources);
+
+      return this.$store.getters['type-map/groupsForVirTypes'](product, resources) || 'default menuIcon';
     },
 
     location() {
@@ -492,192 +492,263 @@ export default {
 </script>
 
 <template>
-
-  <!-- 顶部区域的容器 -->
   <div class="masthead">
     <div class="title">
-
-      <!-- 面包屑导航（创建 API 密钥时不显示） -->
-      <!-- <div
+      <!-- 创建api密钥不需要面包屑 -->
+      <div
         v-if="!(parentRouteOverride === 'account' && resource=== 'token')"
         class="excram-list"
       >
-
-        遍历 demoDisplay 生成面包屑路径
         <span
           v-for="(item,index) in demoDisplay"
           :key="index"
         >
-          <span v-if="item">{{ item }}</span>
-          <span v-if="item">/</span>
+          <span>{{ item }}</span>
+          <span>/</span>
         </span>
-
-        最后一个面包屑显示当前操作（查看/编辑/创建）+ 父资源名称
         <span class="excram-last-name">
-          {{ (realMode === 'view'? '查看': realMode === 'edit' ? '编辑':'创建') + parent.displayName }}
+          {{ (realMode === 'view'? '查看': realMode === 'edit' ? '编辑':'创建') + parent?.displayName }}
         </span>
-      </div> -->
-
-      <header>
-        <div class="title">
-          <div class="primaryheader">
-            <span class="primary-title">
-                
-                <!-- 图标区 -->
-                <span v-if="menuIcon && !(parentRouteOverride === 'account' && resource=== 'token')" class="detailIcon-span">
-                  <!-- 如果是账户 API token，则显示图片，否则显示 icon -->
-                  <img
-                    v-if="parentRouteOverride === 'account' && resource=== 'token'"
-                    :src="Svg"
-                    style="margin-top: 4px; margin-left: 5px;"
-                  >
-                  <i
-                    v-else
-                    :class="'icon-'+ menuIcon + ' detailIcon'"
-                  />
-                </span>
-
-                <!-- 资源标题（创建时只显示“创建+名称”，否则显示“名称:”） -->
-                <span class="detailIcon-span-title">{{ realMode=== 'create'? '创建': '' }}{{ parent.displayName }}{{ realMode=== 'create'? '': '名称:' }}</span>
-                
-                <!-- 如果不是创建模式，显示操作描述 -->
-                <span v-if="realMode !== 'create'">
-
-                  <!-- 如果有覆盖方法，优先显示覆盖内容 -->
-                  <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
-                  
-                  <!-- 否则用 t 组件国际化显示 -->
-                  <t
-                    v-else
-                    :k="'resourceDetail.header.' + realMode"
-                    :subtype="resourceSubtype"
-                    :name="displayName"
-                    :escapehtml="false"
-                  />
-                </span>
-
-                <!-- 状态点（DotState 组件） -->
-                <DotState
-                  v-if="!isCreate && parent.showState"
-                  class="masthead-state"
-                  :value="value"
-                />
-
-                <!-- Istio 注入状态 -->
-                <span
-                  v-if="!isCreate && value.injectionEnabled"
-                  class="masthead-istio"
+      </div>
+    <header>
+      <div class="title">
+        <div class="primaryheader">
+          <span class="primary-title">
+              <!-- <nuxt-link
+                v-if="location"
+                :to="location"
+              >
+                {{ parent.displayName }}:
+              </nuxt-link> -->
+              <span class="detailIcon-span">
+                <img
+                  v-if="parentRouteOverride === 'account' && resource=== 'token'"
+                  :src="Svg"
+                  style="margin-top: 4px; margin-left: 5px;"
                 >
-                  <i
-                    v-clean-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
-                    class="icon icon-sm icon-istio"
-                  />
-                </span>
+                <i
+                  v-else
+                  :class="'icon-'+ menuIcon + ' detailIcon'"
+                />
               </span>
-
-              <!-- 如果有返回路径，显示分隔符和“返回”链接 -->
+              <span class="detailIcon-span-title">{{ realMode=== 'create'? '创建': '' }}{{ parent?.displayName }}{{ realMode=== 'create'? '': '名称:' }}</span>
+              <span v-if="realMode !== 'create'">
+                <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
+                <t
+                  v-else
+                  :k="'resourceDetail.header.' + realMode"
+                  :subtype="resourceSubtype"
+                  :name="displayName"
+                  :escapehtml="false"
+                />
+              </span>
+              <DotState
+                v-if="!isCreate && parent.showState"
+                class="masthead-state"
+                :value="value"
+              />
               <span
-                v-if="location"
-                class="valid"
-              >|</span>
-              <router-link
-                v-if="location"
-                :to="location"
+                v-if="!isCreate && value.injectionEnabled"
+                class="masthead-istio"
               >
-                返回
-              </router-link>
-          </div>
+                <i
+                  v-clean-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
+                  class="icon icon-sm icon-istio"
+                />
+              </span>
+            </span>
+            <span
+              v-if="location"
+              class="valid"
+            >|</span>
+            <router-link
+              v-if="location"
+              :to="location"
+            >
+              返回
+            </router-link>
+          <!-- <h1>
+            <TabTitle
+              v-if="isCreate"
+              :showChild="false"
+            >
+              {{ parent.displayName }}
+            </TabTitle>
+            <TabTitle
+              v-else
+              :showChild="false"
+            >
+              {{ displayName }}
+            </TabTitle>
+            <router-link
+              v-if="location"
+              :to="location"
+              role="link"
+              class="masthead-resource-list-link"
+              :aria-label="parent.displayName"
+            >
+              {{ parent.displayName }}:
+            </router-link>
+            <span v-else>{{ parent.displayName }}:</span>
+            <span v-if="value?.detailPageHeaderActionOverride && value?.detailPageHeaderActionOverride(realMode)">{{ value?.detailPageHeaderActionOverride(realMode) }}</span>
+            <t
+              v-else
+              class="masthead-resource-title"
+              :k="'resourceDetail.header.' + realMode"
+              :subtype="resourceSubtype"
+              :name="displayName"
+              :escapehtml="false"
+            />
+            <BadgeState
+              v-if="!isCreate && parent.showState"
+              class="masthead-state"
+              :value="value"
+            />
+            <span
+              v-if="!isCreate && value.injectionEnabled"
+              class="masthead-istio"
+            >
+              <i
+                v-clean-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
+                class="icon icon-sm icon-istio"
+              />
+            </span>
+            <a
+              v-if="dev && !!resourceExternalLink"
+              v-clean-tooltip="t(resourceExternalLink.tipsKey || 'generic.resourceExternalLinkTips')"
+              class="resource-external"
+              rel="nofollow noopener noreferrer"
+              target="_blank"
+              :href="resourceExternalLink.url"
+            >
+              <i class="icon icon-external-link" />
+            </a>
+          </h1> -->
         </div>
-
-        <!-- 右侧操作按钮区域（支持通过 slot 覆盖） -->
-        <slot name="right">
-          <div class="actions-container align-start" style="padding-right: 15px;">
-            <div class="actions">
-
-              <!-- 详情模式下的主操作按钮 -->
+        <!-- <div
+          v-if="!isCreate"
+          class="subheader"
+        >
+          <span v-if="isNamespace && project">{{ t("resourceDetail.masthead.project") }}: <router-link :to="project.detailLocation">{{ project.nameDisplay }}</router-link></span>
+          <span v-else-if="isWorkspace">{{ t("resourceDetail.masthead.workspace") }}: <router-link :to="workspaceLocation">{{ namespace }}</router-link></span>
+          <span v-else-if="namespace && !hasMultipleNamespaces">
+            {{ t("resourceDetail.masthead.namespace") }}:
+            <router-link
+              v-if="!hideNamespaceLocation"
+              :to="namespaceLocation"
+              data-testid="masthead-subheader-namespace"
+            >
+              {{ namespace }}
+            </router-link>
+            <span v-else>
+              {{ namespace }}
+            </span>
+          </span>
+          <span v-if="parent.showAge">
+            {{ t("resourceDetail.masthead.age") }}:
+            <LiveDate
+              class="live-date"
+              :value="value.creationTimestamp"
+            />
+          </span>
+          <span
+            v-if="value.showCreatedBy"
+            data-testid="masthead-subheader-createdBy"
+          >
+            {{ t("resourceDetail.masthead.createdBy") }}:
+            <router-link
+              v-if="value.createdBy.location"
+              :to="value.createdBy.location"
+              data-testid="masthead-subheader-createdBy-link"
+            >
+              {{ value.createdBy.displayName }}
+            </router-link>
+            <span
+              v-else
+              data-testid="masthead-subheader-createdBy_plain-text"
+            >
+              {{ value.createdBy.displayName }}
+            </span>
+          </span>
+          <span v-if="value.showPodRestarts">{{ t("resourceDetail.masthead.restartCount") }}:<span class="live-data"> {{ value.restartCount }}</span></span>
+        </div> -->
+      </div>
+      <slot name="right">
+        <div class="actions-container align-start">
+          <div class="actions">
+            <button
+              v-if="detailsAction && currentView === DETAIL_VIEW && isView"
+              type="button"
+              class="btn role-primary actions mr-10"
+              :disabled="!detailsAction.enabled"
+              @click="invokeDetailsAction"
+            >
+              {{ detailsAction.label }}
+            </button>
+            <ButtonGroup
+              v-if="showSensitiveToggle"
+              :value="!!hideSensitiveData"
+              icon-size="lg"
+              :options="sensitiveOptions"
+              class="mr-10"
+              @update:value="toggleSensitiveData"
+            />
+
+            <ButtonGroup
+              v-if="viewOptions && isView"
+              v-model:value="currentView"
+              :options="viewOptions"
+              class="mr-10"
+            />
+
+            <template v-if="featureDropdownMenu">
+              <ActionMenu
+                v-if="isView"
+                button-role="multiAction"
+                button-size="compact"
+                :resource="value"
+                data-testid="masthead-action-menu"
+              />
+            </template>
+            <template v-else>
               <button
-                v-if="detailsAction && currentView === DETAIL_VIEW && isView && isManuallyHide"
+                v-if="isView"
+                ref="actions"
+                data-testid="masthead-action-menu"
+                aria-haspopup="true"
                 type="button"
-                class="btn role-primary actions mr-10"
-                :disabled="!detailsAction.enabled"
-                @click="invokeDetailsAction"
+                class="btn role-multi-action actions"
+                @click="showActions"
               >
-                {{ detailsAction.label }}
+                <i class="icon icon-actions" />
               </button>
-
-              <!-- 敏感信息显示/隐藏切换 -->
-              <ButtonGroup
-                v-if="showSensitiveToggle"
-                :value="!!hideSensitiveData"
-                icon-size="lg"
-                :options="sensitiveOptions"
-                class="mr-10"
-                @update:value="toggleSensitiveData"
-              />
-
-              <!-- 视图切换按钮 -->
-              <ButtonGroup
-                v-if="viewOptions && isView"
-                v-model:value="currentView"
-                :options="viewOptions"
-                class="mr-10"
-              />
-
-              <!-- 功能菜单：优先使用 ActionMenu 组件 -->
-              <template v-if="featureDropdownMenu">
-                <ActionMenu
-                  v-if="isView"
-                  button-role="multiAction"
-                  button-size="compact"
-                  :resource="value"
-                  data-testid="masthead-action-menu"
-                />
-              </template>
-
-              <!-- 如果没有 featureDropdownMenu，则使用普通的多操作按钮 -->
-              <template v-else>
-                <button
-                  v-if="isView"
-                  ref="actions"
-                  data-testid="masthead-action-menu"
-                  aria-haspopup="true"
-                  type="button"
-                  class="btn role-multi-action actions"
-                  @click="showActions"
-                >
-                  <i class="icon icon-actions" />
-                </button>
-              </template>
-            </div>
+            </template>
           </div>
-        </slot>
-      </header>
-
-      <!-- 扩展区域 -->
-      <ExtensionPanel
-        :resource="value"
-        :type="extensionType"
-        :location="extensionLocation"
-      />
-
-      <!-- 顶部状态 Banner -->
-      <Banner
-        v-if="banner && isView && !parent.hideBanner"
-        class="state-banner mb-10"
-        :color="banner.color"
-        :label="banner.message == 'Waiting for API to be available' ? '等待 API 可用' : banner.message"
-      />
-
-      <!-- 管理警告 Banner -->
-      <Banner
-        v-if="managedWarning.show"
-        color="warning"
-        class="mb-20"
-        :label="t('resourceDetail.masthead.managedWarning', managedWarning)"
-      />
-
-      <!-- 内容插槽 -->
-      <slot />
+        </div>
+      </slot>
+    </header>
+
+    <!-- Extension area -->
+    <ExtensionPanel
+      :resource="value"
+      :type="extensionType"
+      :location="extensionLocation"
+    />
+
+    <Banner
+      v-if="banner && isView && !parent.hideBanner"
+      class="state-banner mb-10"
+      :color="banner.color"
+      :label="banner.message"
+    />
+    <Banner
+      v-if="managedWarning.show"
+      color="warning"
+      class="mb-20"
+      :label="t('resourceDetail.masthead.managedWarning', managedWarning)"
+    />
+
+    <slot />
     </div>
   </div>
 </template>

package/components/ResourceDetail/__tests__/index.test.ts

@@ -0,0 +1,135 @@
+import { mount } from '@vue/test-utils';
+import ResourceDetail from '@shell/components/ResourceDetail/index.vue';
+import { _EDIT, _VIEW, LEGACY, MODE } from '@shell/config/query-params';
+import * as pageEnabled from '@shell/composables/useIsNewDetailPageEnabled';
+import flushPromises from 'flush-promises';
+import { computed } from 'vue';
+
+const mockQuery: any = {};
+const mockParams: any = {};
+
+jest.mock('@shell/components/ResourceDetail/legacy.vue', () => ({
+  template: '<div class="legacy">Legacy</div>',
+  name:     'Legacy',
+  props:    ['flexContent', 'componentTestId', 'storeOverride', 'resourceOverride', 'parentRouteOverride', 'errorsMap']
+}));
+
+jest.mock('@shell/components/Loading.vue', () => ({
+  template: '<div class="loading">Loading</div>',
+  name:     'Loading'
+}));
+
+jest.mock('@shell/pages/explorer/resource/detail/configmap.vue', () => ({
+  template: '<div class="configmap">configmap</div>',
+  name:     'configmap',
+}));
+
+jest.mock('vue-router', () => ({
+  useRoute: () => ({
+    query:  mockQuery,
+    params: mockParams
+  })
+}));
+
+jest.mock('@shell/composables/useIsNewDetailPageEnabled');
+
+describe('component: ResourceDetail/index', () => {
+  const resourceName = 'configmap';
+  const useIsNewDetailPageEnabledSpy = jest.spyOn(pageEnabled, 'useIsNewDetailPageEnabled');
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render legacy component with default props if useIsNewDetailPageEnabledSpy is false', async() => {
+    mockParams.resource = resourceName;
+    mockQuery[MODE] = _VIEW;
+
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => false));
+
+    const wrapper = mount(ResourceDetail, { });
+    const legacyComponent = wrapper.findComponent<any>({ name: 'Legacy' });
+
+    expect(legacyComponent.props('flexContent')).toStrictEqual(false);
+    expect(legacyComponent.props('componentTestId')).toStrictEqual('resource-details');
+    expect(legacyComponent.props('storeOverride')).toBeUndefined();
+    expect(legacyComponent.props('resourceOverride')).toBeUndefined();
+    expect(legacyComponent.props('parentRouteOverride')).toBeUndefined();
+    expect(legacyComponent.props('errorsMap')).toBeUndefined();
+    expect(useIsNewDetailPageEnabledSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render legacy component with default props if useIsNewDetailPageEnabledSpy is false but resourceName has not been added to our mapping', async() => {
+    mockParams.resource = 'notMapped';
+    mockQuery[MODE] = _VIEW;
+
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => false));
+
+    const wrapper = mount(ResourceDetail, {});
+    const legacyComponent = wrapper.findComponent<any>({ name: 'Legacy' });
+
+    expect(legacyComponent.exists()).toBeTruthy();
+    expect(useIsNewDetailPageEnabledSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render legacy component with default props if useIsNewDetailPageEnabledSpy is false but mode is not VIEW', async() => {
+    mockParams.resource = resourceName;
+    mockQuery[MODE] = _EDIT;
+
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => false));
+
+    const wrapper = mount(ResourceDetail, {});
+    const legacyComponent = wrapper.findComponent<any>({ name: 'Legacy' });
+
+    expect(legacyComponent.exists()).toBeTruthy();
+    expect(useIsNewDetailPageEnabledSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render legacy component while forwarding props', async() => {
+    mockParams.resource = resourceName;
+    mockQuery[MODE] = _VIEW;
+
+    const flexContent = true;
+    const componentTestId = 'componentTestId';
+    const storeOverride = 'storeOverride';
+    const resourceOverride = 'resourceOverride';
+    const parentRouteOverride = 'parentRouteOverride';
+    const errorsMap = { error: 'test' };
+
+    const wrapper = mount(ResourceDetail, {
+      props: {
+        flexContent,
+        componentTestId,
+        storeOverride,
+        resourceOverride,
+        parentRouteOverride,
+        errorsMap,
+      }
+    });
+    const legacyComponent = wrapper.findComponent<any>({ name: 'Legacy' });
+
+    expect(legacyComponent.props('flexContent')).toStrictEqual(flexContent);
+    expect(legacyComponent.props('componentTestId')).toStrictEqual(componentTestId);
+    expect(legacyComponent.props('storeOverride')).toStrictEqual(storeOverride);
+    expect(legacyComponent.props('resourceOverride')).toStrictEqual(resourceOverride);
+    expect(legacyComponent.props('parentRouteOverride')).toStrictEqual(parentRouteOverride);
+    expect(legacyComponent.props('errorsMap')).toStrictEqual(errorsMap);
+  });
+
+  it('should render new component if useIsNewDetailPageEnabledSpy is true', async() => {
+    mockParams.resource = resourceName;
+    mockParams.id = 'ID';
+    mockQuery[MODE] = _VIEW;
+    mockQuery[LEGACY] = 'false';
+
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => true));
+
+    const wrapper = mount(ResourceDetail);
+
+    await flushPromises();
+    const configmapComponent = wrapper.findComponent<any>({ name: 'configmap' });
+
+    expect(configmapComponent.exists()).toBeTruthy();
+    expect(useIsNewDetailPageEnabledSpy).toHaveBeenCalledTimes(1);
+  });
+});