dashboard-shell-shell 1.0.10000011122 → 1.6.0-alpha.1

package/components/nav/Type.vue

@@ -3,6 +3,7 @@ import Favorite from '@shell/components/nav/Favorite';
 import { TYPE_MODES } from '@shell/store/type-map';
 
 import TabTitle from '@shell/components/TabTitle';
+import { menuRouteMap } from '@shell/config/menuRouteMap';
 
 const showFavoritesFor = [TYPE_MODES.FAVORITE, TYPE_MODES.USED];
 
@@ -61,10 +62,20 @@ export default {
       const pageFullPath = this.$route.fullPath?.toLowerCase().split('#')[0]; // Ignore the shebang when comparing routes
       const routeMetaNav = this.$route.meta?.nav;
 
+      const resource = this.$route?.params?.resource || ''
+
+      // 菜单选中动态映射逻辑
+      if (menuRouteMap[this.type.name] && menuRouteMap[this.type.name].includes(resource)) {
+        return true;
+      }
+
       // If the route explicitly declares the nav path that should be highlighted, then use that
       if (routeMetaNav) {
         const cluster = this.$route.params?.cluster;
-        const navPath = routeMetaNav.replace(':cluster', cluster);
+        const product = this.$route.params?.product;
+        const navPath = routeMetaNav
+          .replace(':cluster', cluster)
+          .replace(':product', product);
 
         if (navPath === typeFullPath) {
           return true;
@@ -109,6 +120,7 @@ export default {
 </script>
 
 <template>
+  <!-- 当 type 有 route 时，渲染一个 Vue Router 自定义链接 -->
   <router-link
     v-if="type.route"
     :key="type.name"
@@ -116,52 +128,68 @@ export default {
     custom
     :to="type.route"
   >
+
+    <!-- 导航项容器 -->
     <li
       class="child nav-type"
       :class="{'root': isRoot, [`depth-${depth}`]: true, 'router-link-active': isActive, 'router-link-exact-active': isExactActive}"
       @click="navigate"
       @keypress.enter="navigate"
     >
+
+      <!-- 如果是精确匹配激活状态，则显示 TabTitle 组件 -->
       <TabTitle
         v-if="isExactActive"
         :show-child="false"
       >
         {{ type.labelKey ? t(type.labelKey) : (type.labelDisplay || type.label) }}
       </TabTitle>
+
+      <!-- 链接主体 -->
       <a
         role="link"
         :aria-label="type.labelKey ? t(type.labelKey) : (type.labelDisplay || type.label)"
-        :href="href"
+        :href="href.replace(/harvester/g, 'cloud')"
         class="type-link"
         :aria-current="isActive ? 'page' : undefined"
         @click="selectType(); navigate($event);"
         @mouseenter="setNear(true)"
         @mouseleave="setNear(false)"
       >
+        <!-- 文本标签：优先使用多语言 key -->
         <span
           v-if="type.labelKey"
           class="label"
         ><t :k="type.labelKey" /></span>
-        <span
-          v-else
-          v-clean-html="type.labelDisplay || type.label"
-          class="label"
-          :class="{'no-icon': !type.icon}"
-        />
+
+        <!-- 没有 labelKey 时，直接使用 HTML 文本 -->
+         <div v-else style="display: flex; align-items: center;" class="labelKey_menu">
+          <i v-if="!type.labelDisplay || (type.labelDisplay && type.labelDisplay.indexOf('</i>') === -1)" class="icon icon-fw icon-globe" style="color: var(--muted);width: 32px;text-align: left;"></i>
+           <span
+             v-clean-html="type.labelDisplay || type.label"
+             class="label"
+             :class="{'no-icon': !type.icon}"
+           />
+         </div>
+
+        <!-- 右侧附加信息（收藏按钮 / 命名空间图标 / 计数） -->
         <!-- <span
           v-if="showFavorite || namespaceIcon || showCount"
           class="count"
         >
+
           <Favorite
             v-if="showFavorite"
             :resource="type.name"
           />
+
           <i
             v-if="namespaceIcon"
             class="icon icon-namespace"
             :class="{'ns-and-icon': showCount}"
             data-testid="type-namespaced"
           />
+
           <span
             v-if="showCount"
             data-testid="type-count"
@@ -170,6 +198,8 @@ export default {
       </a>
     </li>
   </router-link>
+
+  <!-- 当 type 没有 route 但有外部 link 时 -->
   <li
     v-else-if="type.link"
     class="child nav-type nav-link"
@@ -177,7 +207,7 @@ export default {
   >
     <a
       role="link"
-      :href="type.link"
+      :href="type.link.replace(/harvester/g, 'cloud')"
       :target="type.target"
       rel="noopener noreferrer nofollow"
       :aria-label="type.label"
@@ -185,6 +215,8 @@ export default {
       <span class="label">{{ type.label }}&nbsp;<i class="icon icon-external-link" /></span>
     </a>
   </li>
+
+  <!-- 兜底情况：既没有 route，也没有 link -->
   <li v-else>
     {{ type }}?
   </li>
@@ -234,12 +266,12 @@ export default {
     A {
       display: grid;
       grid-template-areas: "label count";
-      grid-template-columns: auto auto;
+      grid-template-columns: auto 20px;
       grid-column-gap: 5px;
       font-size: 14px;
       line-height: 24px;
       /* padding: 7.5px 7px 7.5px 10px; */
-      padding: 0px 16px 0px 40px;
+      padding: 0px 16px 0px 30px;
       height: 50px;
       margin: 0 0 0 -3px;
       overflow: hidden;
@@ -248,7 +280,7 @@ export default {
       color: var(--body-text);
 
       &:hover {
-        background: var(--nav-active);
+        background: var(--nav-active) !important;
         color: var(--nav-hover-color);
         /* background: var(--nav-hover); */
         text-decoration: none;
@@ -271,13 +303,13 @@ export default {
       font-size: 12px;
       text-align: right;
       justify-items: center;
-      padding-right: 4px;
+      line-height: 50px;
     }
 
     &.nav-type:not(.depth-0) {
       A {
         font-size: 13px;
-        padding: 5.5px 7px 5.5px 10px;
+        padding: 5.5px 7px 5.5px 40px;
       }
 
       ::v-deep .label I {
@@ -286,4 +318,20 @@ export default {
     }
   }
 
+.labelKey_menu{
+  display: flex;
+  align-items: center;
+}
+.labelKey_menu:hover{
+  i{
+    color: var(--nav-hover-color) !important;
+  }
+}
+.router-link-active{
+  .labelKey_menu{
+    i{
+      color: var(--nav-hover-color) !important;
+    }
+  }
+}
 </style>

package/components/nav/WindowManager/ContainerLogs.vue

@@ -10,8 +10,11 @@ import AsyncButton from '@shell/components/AsyncButton';
 import Select from '@shell/components/form/Select';
 import VirtualList from 'vue3-virtual-scroll-list';
 import LogItem from '@shell/components/LogItem';
+import ContainerLogsActions from '@shell/components/nav/WindowManager/ContainerLogsActions.vue';
 import { shallowRef } from 'vue';
+import { useStore } from 'vuex';
 import { debounce } from 'lodash';
+import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
 
 import { escapeRegex } from '@shell/utils/string';
 import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
@@ -91,6 +94,7 @@ export default {
     Checkbox,
     AsyncButton,
     VirtualList,
+    ContainerLogsActions,
   },
 
   props: {
@@ -130,6 +134,13 @@ export default {
     }
   },
 
+  setup() {
+    const store = useStore();
+    const { featureDropdownMenu } = useRuntimeFlag(store);
+
+    return { featureDropdownMenu };
+  },
+
   data() {
     return {
       container:           this.initialContainer || this.pod?.defaultContainerName,
@@ -145,7 +156,8 @@ export default {
       lines:               [],
       now:                 new Date(),
       logItem:             shallowRef(LogItem),
-      isContainerMenuOpen: false
+      isContainerMenuOpen: false,
+      range:               '',
     };
   },
 
@@ -636,72 +648,85 @@ export default {
         </div>
 
         <div class="log-action log-action-group ml-5">
-          <div
-            role="menu"
-            tabindex="0"
-            :aria-label="t('wm.containerLogs.logActionMenu')"
-            @click="openContainerMenu"
-            @blur.capture="closeContainerMenu"
-            @keyup.enter="openContainerMenu"
-            @keyup.space="openContainerMenu"
-          >
-            <v-dropdown
-              :triggers="[]"
-              :shown="isContainerMenuOpen"
-              placement="top"
-              popperClass="containerLogsDropdown"
-              :autoHide="false"
-              :flip="false"
-              :container="false"
-              @focus.capture="openContainerMenu"
+          <template v-if="featureDropdownMenu">
+            <ContainerLogsActions
+              :range="range"
+              :range-options="rangeOptions"
+              :wrap="wrap"
+              :timestamps="timestamps"
+              @toggle-range="toggleRange"
+              @toggle-wrap="toggleWrap"
+              @toggle-timestamps="toggleTimestamps"
+            />
+          </template>
+          <template v-else>
+            <div
+              role="menu"
+              tabindex="0"
+              :aria-label="t('wm.containerLogs.logActionMenu')"
+              @click="openContainerMenu"
+              @blur.capture="closeContainerMenu"
+              @keyup.enter="openContainerMenu"
+              @keyup.space="openContainerMenu"
             >
-              <button
-                class="btn role-primary btn-cog"
-                role="button"
-                :aria-label="t('wm.containerLogs.options')"
+              <v-dropdown
+                :triggers="[]"
+                :shown="isContainerMenuOpen"
+                placement="top"
+                popperClass="containerLogsDropdown"
+                :autoHide="false"
+                :flip="false"
+                :container="false"
+                @focus.capture="openContainerMenu"
               >
-                <i
-                  class="icon icon-gear"
-                  :alt="t('wm.containerLogs.options')"
-                />
-                <i
-                  class="icon icon-chevron-up"
-                  :alt="t('wm.containerLogs.expand')"
-                />
-              </button>
-
-              <template #popper>
-                <div class="filter-popup">
-                  <LabeledSelect
-                    v-model:value="range"
-                    class="range"
-                    :label="t('wm.containerLogs.range.label')"
-                    :options="rangeOptions"
-                    :clearable="false"
-                    placement="top"
-                    role="menuitem"
-                    @update:value="toggleRange($event)"
+                <button
+                  class="btn role-primary btn-cog"
+                  role="button"
+                  :aria-label="t('wm.containerLogs.options')"
+                >
+                  <i
+                    class="icon icon-gear"
+                    :alt="t('wm.containerLogs.options')"
                   />
-                  <div>
-                    <Checkbox
-                      :label="t('wm.containerLogs.wrap')"
-                      :value="wrap"
-                      role="menuitem"
-                      @update:value="toggleWrap"
-                    />
-                  </div>
-                  <div>
-                    <Checkbox
-                      :label="t('wm.containerLogs.timestamps')"
-                      :value="timestamps"
+                  <i
+                    class="icon icon-chevron-up"
+                    :alt="t('wm.containerLogs.expand')"
+                  />
+                </button>
+
+                <template #popper>
+                  <div class="filter-popup">
+                    <LabeledSelect
+                      v-model:value="range"
+                      class="range"
+                      :label="t('wm.containerLogs.range.label')"
+                      :options="rangeOptions"
+                      :clearable="false"
+                      placement="top"
                       role="menuitem"
-                      @update:value="toggleTimestamps"
+                      @update:value="toggleRange($event)"
                     />
+                    <div>
+                      <Checkbox
+                        :label="t('wm.containerLogs.wrap')"
+                        :value="wrap"
+                        role="menuitem"
+                        @update:value="toggleWrap"
+                      />
+                    </div>
+                    <div>
+                      <Checkbox
+                        :label="t('wm.containerLogs.timestamps')"
+                        :value="timestamps"
+                        role="menuitem"
+                        @update:value="toggleTimestamps"
+                      />
+                    </div>
                   </div>
-                </div>
-              </template>
-            </v-dropdown>
-          </div>
+                </template>
+              </v-dropdown>
+            </div>
+          </template>
         </div>
 
         <div class="log-action log-action-group ml-5">
@@ -874,4 +899,5 @@ export default {
       }
     }
   }
+
 </style>

package/components/nav/WindowManager/ContainerLogsActions.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import {
+  RcDropdown,
+  RcDropdownTrigger,
+  RcDropdownItemCheckbox,
+  RcDropdownItemSelect,
+} from '@components/RcDropdown';
+
+defineProps({
+  range: {
+    type:    String,
+    default: '',
+  },
+  rangeOptions: {
+    type: Array,
+    default() {
+      return [];
+    },
+  },
+  wrap:       Boolean,
+  timestamps: Boolean,
+});
+
+defineEmits([
+  'toggleRange',
+  'toggleWrap',
+  'toggleTimestamps',
+]);
+
+</script>
+
+<template>
+  <rc-dropdown>
+    <rc-dropdown-trigger
+      class="condensed"
+    >
+      <i
+        class="icon icon-gear"
+        :alt="t('wm.containerLogs.options')"
+      />
+      <template #after>
+        <i
+          class="icon icon-chevron-up"
+          :alt="t('wm.containerLogs.expand')"
+        />
+      </template>
+    </rc-dropdown-trigger>
+    <template #dropdownCollection>
+      <rc-dropdown-item-select
+        :model-value="range"
+        :options="rangeOptions"
+        @select="$emit('toggleRange', $event)"
+      />
+      <rc-dropdown-item-checkbox
+        :model-value="wrap"
+        @click="$emit('toggleWrap', $event)"
+      >
+        {{ t('wm.containerLogs.wrap') }}
+      </rc-dropdown-item-checkbox>
+      <rc-dropdown-item-checkbox
+        :model-value="timestamps"
+        @click="$emit('toggleTimestamps', $event)"
+      >
+        {{ t('wm.containerLogs.timestamps') }}
+      </rc-dropdown-item-checkbox>
+    </template>
+  </rc-dropdown>
+</template>
+
+<style lang="scss" scoped>
+  .condensed {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    min-height: 30px;
+  }
+</style>

package/components/nav/WindowManager/index.vue

@@ -326,6 +326,7 @@ export default {
 
 <template>
   <div
+    v-if="open"
     id="windowmanager"
     data-testid="windowmanager"
     class="windowmanager"
@@ -427,9 +428,9 @@ export default {
       </div>
     </div>
     <div
-      v-for="(tab, i) in tabs"
+      v-for="tab in tabs"
       :id="`panel-${tab.id}`"
-      :key="i"
+      :key="tab.id"
       class="body"
       :class="{'active': tab.id === active}"
       draggable="false"

package/components/templates/default.vue

@@ -13,7 +13,6 @@ import WindowManager from '@shell/components/nav/WindowManager';
 import PromptRemove from '@shell/components/PromptRemove';
 import PromptRestore from '@shell/components/PromptRestore';
 import PromptModal from '@shell/components/PromptModal';
-import AssignTo from '@shell/components/AssignTo';
 import Header from '@shell/components/nav/Header';
 import Inactivity from '@shell/components/Inactivity';
 import Brand from '@shell/mixins/brand';
@@ -36,7 +35,6 @@ export default {
   components: {
     PromptRemove,
     PromptRestore,
-    AssignTo,
     PromptModal,
     Header,
     ActionMenu,
@@ -211,7 +209,6 @@ export default {
         <ActionMenu />
         <PromptRemove />
         <PromptRestore />
-        <AssignTo />
         <PromptModal />
         <ModalManager />
         <button

package/components/templates/plain.vue

@@ -3,7 +3,6 @@ import { mapPref, THEME_SHORTCUT } from '@shell/store/prefs';
 import ActionMenu from '@shell/components/ActionMenu';
 import Header from '@shell/components/nav/Header';
 import PromptRemove from '@shell/components/PromptRemove';
-import AssignTo from '@shell/components/AssignTo';
 import IndentedPanel from '@shell/components/IndentedPanel';
 import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
@@ -21,7 +20,6 @@ export default {
 
   components: {
     ActionMenu,
-    AssignTo,
     Header,
     IndentedPanel,
     PromptRemove,
@@ -86,7 +84,6 @@ export default {
         <PromptRemove />
         <PromptModal />
         <ModalManager />
-        <AssignTo />
         <button
           v-if="themeShortcut"
           v-shortkey.once="['shift','t']"

package/composables/drawer.ts

@@ -0,0 +1,26 @@
+import { Component } from 'vue';
+import { useStore } from 'vuex';
+
+export const useDrawer = () => {
+  const store = useStore();
+
+  const open = (component: Component, returnFocusSelector: string, options?: Record<string, any>) => {
+    store.commit('slideInPanel/open', {
+      component,
+      componentProps: {
+        ...(options || {}),
+        triggerFocusTrap: true,
+        returnFocusSelector
+      }
+    });
+  };
+
+  const close = () => {
+    store.commit('slideInPanel/close');
+  };
+
+  return {
+    open,
+    close
+  };
+};

package/composables/focusTrap.ts

@@ -61,14 +61,14 @@ export function useWatcherBasedSetupFocusTrapWithDestroyIncluded(watchVar:any, f
           focusTrapInstance.activate();
         });
       });
-    } else if (!neu && Object.keys(focusTrapInstance).length && !useUnmountHook) {
+    } else if (!neu && focusTrapInstance && Object.keys(focusTrapInstance).length && !useUnmountHook) {
       focusTrapInstance.deactivate();
     }
-  });
+  }, { immediate: true });
 
   if (useUnmountHook) {
     onBeforeUnmount(() => {
-      if (Object.keys(focusTrapInstance).length) {
+      if (focusTrapInstance && Object.keys(focusTrapInstance).length) {
         focusTrapInstance.deactivate();
       }
     });

package/composables/resources.test.ts

@@ -0,0 +1,63 @@
+import { useResourceIdentifiers, useFetchResourceWithId } from '@shell/composables/resources';
+
+const mockStore: any = {
+  getters:  { 'cluster/schemaFor': jest.fn(() => ({ id: 'test-schema' })) },
+  dispatch: jest.fn()
+};
+const mockRoute: any = {
+  params: {
+    cluster:   'test-cluster',
+    namespace: 'test-namespace',
+    id:        'test-id',
+  },
+};
+
+jest.mock('vuex', () => ({ useStore: () => mockStore }));
+jest.mock('vue-router', () => ({ useRoute: () => mockRoute }));
+
+describe('resources', () => {
+  describe('useResourceIdentifiers', () => {
+    it('should return the correct value for a route with a namespace', async() => {
+      const { clusterId, id, schema } = useResourceIdentifiers('test-type');
+
+      expect(clusterId).toBe('test-cluster');
+      expect(id).toBe('test-namespace/test-id');
+      expect(schema).toStrictEqual({ id: 'test-schema' });
+    });
+
+    it('should return the correct value for a route without a namespace', async() => {
+      mockRoute.params.namespace = undefined;
+      const { clusterId, id, schema } = useResourceIdentifiers('test-type');
+
+      expect(clusterId).toBe('test-cluster');
+      expect(id).toBe('test-id');
+      expect(schema).toStrictEqual({ id: 'test-schema' });
+    });
+  });
+
+  describe('useFetchResourceWithId', () => {
+    it('should return the correct value given the correct arguments are passed to the dispatch method', async() => {
+      mockStore.dispatch.mockImplementation(() => Promise.resolve({ id: 'test-resource' }));
+      const resource = await useFetchResourceWithId('test-type', 'test-id');
+
+      expect(mockStore.dispatch).toHaveBeenCalledWith('cluster/find', { type: 'test-type', id: 'test-id' });
+      expect(resource).toStrictEqual({ id: 'test-resource' });
+    });
+
+    it('should dispatch a loadingError if a 404 occurs', async() => {
+      // eslint-disable-next-line prefer-promise-reject-errors
+      mockStore.dispatch.mockImplementationOnce(() => Promise.reject({ status: 404 }));
+      await useFetchResourceWithId('test-type', 'test-id');
+
+      expect(mockStore.dispatch).toHaveBeenCalledWith('loadingError', new Error('nav.failWhale.resourceIdNotFound-{"resource":"test-type","fqid":"test-id"}'));
+    });
+
+    it('should dispatch a loadingError if a 403 occurs', async() => {
+      // eslint-disable-next-line prefer-promise-reject-errors
+      mockStore.dispatch.mockImplementationOnce(() => Promise.reject({ status: 403 }));
+      await useFetchResourceWithId('test-type', 'test-id');
+
+      expect(mockStore.dispatch).toHaveBeenCalledWith('loadingError', new Error('nav.failWhale.resourceIdNotFound-{"resource":"test-type","fqid":"test-id"}'));
+    });
+  });
+});