dashboard-shell-shell 1.0.10000011122 → 3.0.5-test.1

package/components/ResourceTable.vue

@@ -8,6 +8,9 @@ import { NAMESPACE, AGE } from '@shell/config/table-headers';
 import { findBy } from '@shell/utils/array';
 import { ExtensionPoint, TableColumnLocation } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
+import { ToggleSwitch } from '@components/Form/ToggleSwitch';
+import ResourceTableWatch from '@shell/mixins/resource-table-watch';
+import paginationUtils from '@shell/utils/pagination-utils';
 
 // Default group-by in the case the group stored in the preference does not apply
 const DEFAULT_GROUP = 'namespace';
@@ -43,9 +46,21 @@ export default {
 
   emits: ['clickedActionButton'],
 
-  components: { ButtonGroup, SortableTable },
+  components: {
+    ButtonGroup, SortableTable, ToggleSwitch
+  },
+
+  mixins: [
+    ResourceTableWatch
+  ],
 
   props: {
+    searchPlaceholder: {
+      // search框内的输入提示
+      type:    String,
+      default: '名称'
+    },
+    
     schema: {
       type:    Object,
       default: null,
@@ -207,16 +222,17 @@ export default {
       type:    Number,
       default: null, // Default comes from the user preference
     },
-    searchPlaceholder: {
-      // search框内的输入提示
+
+    overrideInStore: {
       type:    String,
-      default: '名称'
+      default: undefined,
     },
+
   },
 
   data() {
     // Confirm which store we're in, if schema isn't available we're probably showing a list with different types
-    const inStore = this.schema?.id ? this.$store.getters['currentStore'](this.schema.id) : undefined;
+    const inStore = this.overrideInStore || (this.schema?.id ? this.$store.getters['currentStore'](this.schema.id) : undefined);
 
     return {
       inStore,
@@ -226,7 +242,8 @@ export default {
        * Primary purpose is to directly connect an iteration of `rows` with a sortGeneration string. This avoids
        * reactivity issues where `rows` hasn't yet changed but something like workspaces has (stale values stored against fresh key)
        */
-      sortGeneration: undefined
+      sortGeneration:               undefined,
+      listAutoRefreshToggleEnabled: paginationUtils.listAutoRefreshToggleEnabled({ rootGetters: this.$store.getters }),
     };
   },
 
@@ -242,10 +259,15 @@ export default {
         }
       },
       immediate: true
-    }
+    },
+
   },
 
   computed: {
+    actionsWidth() {
+      return this.$store.getters['type-map/actionsWidth'] // 从 getter 里拿
+    },
+
     options() {
       return this.$store.getters[`type-map/optionsFor`](this.schema, this.externalPaginationEnabled);
     },
@@ -433,8 +455,6 @@ export default {
         return this._group;
       },
       set(value) {
-        console.log('_group:===='+value);
-        
         this._group = value;
       }
     },
@@ -445,12 +465,13 @@ export default {
         const customGroupable = !!this.options?.listGroups?.length;
 
         // sshkey去掉分组按钮
-      if(this.parsedPagingParams.singularLabel === 'SSH Key' || this.parsedPagingParams.singularLabel === '负载均衡器'){
-        return false
-      }
+        if(this.parsedPagingParams.singularLabel === 'SSH Key' || this.parsedPagingParams.singularLabel === '负载均衡器'){
+          return false
+        }
 
         return namespaceGroupable || customGroupable || this.groupOptions?.length;
       }
+
       return this.groupable || false;
     },
 
@@ -538,7 +559,6 @@ export default {
         pluralLabel:   this.$store.getters['type-map/labelFor'](this.schema, 99),
       };
     },
-
   },
 
   methods: {
@@ -599,8 +619,9 @@ export default {
       if (event.key === 'Enter') {
         this.keyAction('detail');
       }
-    }
-  },
+    },
+
+  }
 };
 </script>
 
@@ -641,6 +662,11 @@ export default {
     @group-value-change="group = $event"
     @enter="handleEnterKeyPress"
   >
+
+    <template #search-main-button>
+      <div :style="{ width: actionsWidth + 'px' }"></div>
+    </template>
+
     <template
       v-if="showGrouping && _groupOptions.length > 1"
       #header-middle
@@ -658,7 +684,24 @@ export default {
       v-if="showGrouping"
       #header-right
     >
-      <slot name="header-right" />
+      <slot
+        name="header-right"
+      />
+    </template>
+
+    <template
+      v-if="externalPaginationEnabled"
+      #watch-controls
+    >
+      <!-- See https://github.com/rancher/dashboard/issues/14359 -->
+      <ToggleSwitch
+        v-if="listAutoRefreshToggleEnabled"
+        class="auto-update"
+        :value="watching"
+        name="label-system-toggle"
+        :on-label="t('resourceTable.autoRefresh.label')"
+        @update:value="toggleWatch"
+      />
     </template>
 
     <template #group-by="{group: thisGroup}">
@@ -706,3 +749,9 @@ export default {
     </template>
   </SortableTable>
 </template>
+
+<style lang="scss" scoped>
+.auto-update {
+  min-width: 150px; height: 40px
+}
+</style>

package/components/ResourceYaml.vue

@@ -73,6 +73,11 @@ export default {
       default: true
     },
 
+    showErrors: {
+      type:    Boolean,
+      default: true
+    },
+
     applyHooks: {
       type:    Function,
       default: null,
@@ -229,7 +234,7 @@ export default {
         }
 
         try {
-          await this.value.saveYaml(yaml);
+          await this.value.saveYaml(yaml, this.initialYaml);
         } catch (err) {
           return onError.call(this, err);
         }
@@ -289,6 +294,13 @@ export default {
       }
     },
 
+    refresh() {
+      this.$refs.yamleditor.refresh();
+    },
+
+    closeError(index) {
+      this.errors = (this.errors || []).filter((_, i) => i !== index);
+    },
   }
 };
 </script>
@@ -318,7 +330,8 @@ export default {
         class="footer"
         :class="{ 'edit': !isView }"
         :mode="mode"
-        :errors="errors"
+        :errors="showErrors ? errors : []"
+        @close-error="closeError"
         @save="save"
         @done="done"
       >

package/components/RichTranslation.vue

@@ -0,0 +1,106 @@
+<script lang="ts">
+import { defineComponent, h, VNode } from 'vue';
+import { useStore } from 'vuex';
+import { purifyHTML } from '@shell/plugins/clean-html';
+
+const ALLOWED_TAGS = ['b', 'i', 'span', 'a']; // Add more as needed
+
+/**
+ * A component for rendering translated strings with embedded HTML and custom Vue components.
+ *
+ * This component allows you to use a single translation key for a message that contains
+ * both standard HTML tags (like <b>, <i>, etc.) and custom Vue components (like <router-link>).
+ *
+ * @example
+ * // In your translation file (e.g., en-us.yaml):
+ * my:
+ *   translation:
+ *     key: 'This is a <b>bold</b> statement with a <customLink>link</customLink>.'
+ *
+ * // In your Vue component:
+ * <RichTranslation k="my.translation.key">
+ *   <template #customLink="{ content }">
+ *     <router-link to="{ name: 'some-path' }">{{ content }}</router-link>
+ *   </template>
+ * </RichTranslation>
+ */
+export default defineComponent({
+  name:  'RichTranslation',
+  props: {
+    /**
+     * The translation key for the message.
+     */
+    k: {
+      type:     String,
+      required: true,
+    },
+    /**
+     * The HTML tag to use for the root element.
+     */
+    tag: {
+      type:    String,
+      default: 'span'
+    },
+  },
+  setup(props, { slots }) {
+    const store = useStore();
+
+    return () => {
+    // Get the raw translation string, without any processing.
+      const rawStr = store.getters['i18n/t'](props.k, {}, true);
+
+      if (!rawStr || typeof rawStr !== 'string') {
+        return h(props.tag, {}, [rawStr]);
+      }
+
+      // This regex splits the string by the custom tags, keeping the tags in the resulting array.
+      const regex = /<([a-zA-Z0-9]+)>(.*?)<\/\1>|<([a-zA-Z0-9]+)\/>/g;
+      const children: (VNode | string)[] = [];
+      let lastIndex = 0;
+      let match;
+
+      // Iterate over all matches of the regex.
+      while ((match = regex.exec(rawStr)) !== null) {
+        // Add the text before the current match as a plain text node.
+        if (match.index > lastIndex) {
+          children.push(h('span', { innerHTML: purifyHTML(rawStr.substring(lastIndex, match.index)) }));
+        }
+
+        const enclosingTagName = match[1]; // Captures the tag name for enclosing tags (e.g., 'customLink' from <customLink>...</customLink>)
+        const selfClosingTagName = match[3]; // Captures the tag name for self-closing tags (e.g., 'anotherTag' from <anotherTag/>)
+        const tagName = enclosingTagName || selfClosingTagName;
+
+        if (tagName) {
+          const content = enclosingTagName ? match[2] : '';
+
+          if (slots[tagName]) {
+            // If a slot is provided for this tag, render the slot with the content.
+            children.push(slots[tagName]({ content: purifyHTML(content) }));
+          } else if (ALLOWED_TAGS.includes(tagName.toLowerCase())) {
+            // If it's an allowed HTML tag, render it directly.
+            if (content) {
+              children.push(h(tagName, { innerHTML: purifyHTML(content, { ALLOWED_TAGS }) }));
+            } else {
+              children.push(h(tagName));
+            }
+          } else {
+            // Otherwise, render the tag and its content as plain HTML.
+            children.push(h('span', { innerHTML: purifyHTML(match[0]) }));
+          }
+        }
+
+        // Update the last index to continue searching after the current match
+        lastIndex = regex.lastIndex;
+      }
+
+      // Add any remaining text after the last match.
+      if (lastIndex < rawStr.length) {
+        children.push(h('span', { innerHTML: purifyHTML(rawStr.substring(lastIndex)) }));
+      }
+
+      // Render the root element with the processed children.
+      return h(props.tag, {}, children);
+    };
+  }
+});
+</script>

package/components/SideNav.vue

@@ -21,6 +21,8 @@ import { NAME as NAVLINKS } from '@shell/config/product/navlinks';
 import Group from '@shell/components/nav/Group';
 import LocaleSelector from '@shell/components/LocaleSelector';
 import { cloud2harvesterhci, harvester2cloud } from '@shell/utils/router';
+import { NORMAN } from '@shell/config/types';
+
 
 export default {
   name:       'SideNav',
@@ -113,10 +115,14 @@ export default {
 
   computed: {
     ...mapState(['managementReady', 'clusterReady']),
-    ...mapGetters(['isStandaloneHarvester', 'productId', 'clusterId', 'currentProduct', 'rootProduct', 'isSingleProduct', 'namespaceMode', 'isExplorer', 'isVirtualCluster']),
+    ...mapGetters(['isStandaloneHarvester', 'productId', 'clusterId', 'currentProduct', 'rootProduct', 'currentCluster', 'isSingleProduct', 'namespaceMode', 'isExplorer', 'isVirtualCluster']),
     ...mapGetters({ locale: 'i18n/selectedLocaleLabel', hasMultipleLocales: 'i18n/hasMultipleLocales' }),
     ...mapGetters('type-map', ['activeProducts']),
 
+    principal() {
+      return this.$store.getters['rancher/byId'](NORMAN.PRINCIPAL, this.$store.getters['auth/principalId']) || {};
+    },
+
     favoriteTypes: mapPref(FAVORITE_TYPES),
 
     supportLink() {
@@ -185,6 +191,12 @@ export default {
     allNavLinksIds() {
       return this.allNavLinks.map((a) => a.id);
     },
+
+    prod() {
+      const name = this.rootProduct.name;
+
+      return this.$store.getters['i18n/withFallback'](`product."${ name }"`, null, ucFirst(name));
+    },
   },
 
   methods: {
@@ -232,9 +244,32 @@ export default {
 
       replaceWith(this.groups, ...sortBy(out, ['weight:desc', 'label']));
 
+      // if (this.principal.loginName !== 'admin') {
+      //   // 递归过滤函数（根据 label）
+      //   this.groups = this.filterMenus(this.groups);
+      // }
+      
+
       this.gettingGroups = false;
     },
 
+    // filterMenus(menus) {
+    //   return menus
+    //     .filter(item => item.label !== 'RBAC') // 过滤掉顶层 RBAC
+    //     .map(item => {
+    //       let newItem = { ...item };
+    //       if (newItem.children) {
+    //         // 过滤掉 children 里的 "资源大盘"
+    //         newItem.children = newItem.children.filter(
+    //           child => child.label !== '资源大盘'
+    //         );
+    //         // 递归处理剩下的 children
+    //         newItem.children = filterMenus(newItem.children);
+    //       }
+    //       return newItem;
+    //     });
+    // },
+
     getProductsGroups(out, loadProducts, namespaceMode, productMap) {
       const clusterId = this.$store.getters['clusterId'];
       const currentType = this.$route.params.resource || '';
@@ -400,56 +435,58 @@ export default {
     role="navigation"
     :aria-label="t('nav.ariaLabel.sideNav')"
   >
-  <div class="side-all-title">
-          控制台
-  </div>
+    <div class="side-all-title">
+      {{ prod == 'Cloud' && currentCluster ? '控制台' : prod }}
+    </div>
+
     <!-- Actual nav -->
     <div class="nav">
       <template
-        v-for="(g) in groups"
-        :key="g.name"
+      v-for="(g) in groups"
+      :key="g.name"
       >
-        <Group
-          ref="groups"
-          id-prefix=""
-          class="package"
-          :group="g"
-          :can-collapse="!g.isRoot"
-          :show-header="!g.isRoot"
-          @selected="groupSelected($event)"
-          @expand="groupSelected($event)"
-        />
+        <template v-if="principal.loginName && principal.loginName !== 'admin' && g.label === 'RBAC'">
+        </template>
+        <template v-else>
+          <Group
+            ref="groups"
+            id-prefix=""
+            class="package"
+            :group="g"
+            :can-collapse="!g.isRoot"
+            :show-header="!g.isRoot"
+            @selected="groupSelected($event)"
+            @expand="groupSelected($event)"
+          />
+        </template>
       </template>
     </div>
     <!-- SideNav footer area (seems to be tied to harvester) -->
     <!-- <div
       v-if="showProductFooter"
       class="footer"
-    > -->
-      <!-- support link -->
-      <!-- <router-link
+    >
+      <router-link
         :to="supportLink"
         class="pull-right"
         role="link"
         :aria-label="t('nav.support', {hasSupport: true})"
       >
         {{ t('nav.support', {hasSupport: true}) }}
-      </router-link> -->
-      <!-- version number -->
-      <!-- <span
+      </router-link>
+      <span
         v-clean-tooltip="{content: displayVersion, placement: 'top'}"
         class="clip version text-muted"
       >
         {{ displayVersion }}
-      </span> -->
+      </span>
 
-      <!-- locale selector -->
-      <!-- <LocaleSelector
+      <LocaleSelector
         v-if="isSingleProduct && hasMultipleLocales && !isStandaloneHarvester"
         mode="login"
         :show-icon="false"
-      /> -->
-    <!-- </div> -->
+      />
+    </div> -->
     <!-- SideNav footer alternative -->
     <!-- <div
       v-else
@@ -479,6 +516,7 @@ export default {
 <style lang="scss" scoped>
   .side-nav {
     display: flex;
+    z-index: 10;
     flex-direction: column;
     .nav {
       flex: 1;
@@ -498,9 +536,8 @@ export default {
 
       A { padding-left: 0; }
     }
-    :deep() A{
+    :deep() A:not(.menuRouterLink){
       height: 50px;
-      background-color: #fff;
     }
 
     .tools {

package/components/SlideInPanelManager.vue

@@ -1,15 +1,27 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, onBeforeUnmount, watch } from 'vue';
 import { useStore } from 'vuex';
+import {
+  DEFAULT_FOCUS_TRAP_OPTS,
+  useWatcherBasedSetupFocusTrapWithDestroyIncluded
+} from '@shell/composables/focusTrap';
+import { isEqual } from 'lodash';
+import { useRouter } from 'vue-router';
 
 const HEADER_HEIGHT = 55;
 
 const store = useStore();
 const isOpen = computed(() => store.getters['slideInPanel/isOpen']);
+const isClosing = computed(() => store.getters['slideInPanel/isClosing']);
 const currentComponent = computed(() => store.getters['slideInPanel/component']);
 const currentProps = computed(() => store.getters['slideInPanel/componentProps']);
 
 const panelTop = computed(() => {
+  // Some components like the ResourceDetailDrawer are designed to take up the full height of the viewport so we want to be able to specify the top.
+  if (currentProps?.value?.top) {
+    return currentProps?.value?.top;
+  }
+
   const banner = document.getElementById('banner-header');
   let height = HEADER_HEIGHT;
 
@@ -20,11 +32,92 @@ const panelTop = computed(() => {
   return `${ height }px`;
 });
 
-const panelHeight = computed(() => `calc(100vh - ${ panelTop?.value })`);
+// Some components like the ResourceDetailDrawer are designed to take up the full height of the viewport so we want to be able to specify the height.
+const panelHeight = computed(() => (currentProps?.value?.height) ? (currentProps?.value?.height) : `calc(100vh - ${ panelTop?.value })`);
 const panelWidth = computed(() => currentProps?.value?.width || '33%');
 const panelRight = computed(() => (isOpen?.value ? '0' : `-${ panelWidth?.value }`));
 
-const panelTitle = computed(() => currentProps?.value?.title || 'Details');
+const showHeader = computed(() => currentProps?.value?.showHeader ?? true);
+const panelTitle = showHeader.value ? computed(() => currentProps?.value?.title || 'Details') : null;
+const closeOnRouteChange = computed(() => {
+  const propsCloseOnRouteChange = currentProps?.value.closeOnRouteChange;
+
+  if (!propsCloseOnRouteChange) {
+    return ['name', 'params', 'hash', 'query'];
+  }
+
+  return propsCloseOnRouteChange;
+});
+const router = useRouter();
+
+watch(
+  /**
+   * trigger focus trap
+   */
+  () => currentProps?.value?.triggerFocusTrap,
+  (neu) => {
+    if (neu) {
+      const opts = {
+        ...DEFAULT_FOCUS_TRAP_OPTS,
+        /**
+         * will return focus to the first iterable node of this container select
+         */
+        setReturnFocus: () => {
+          const returnFocusSelector = currentProps?.value?.returnFocusSelector;
+
+          if (returnFocusSelector && !document.querySelector(returnFocusSelector)) {
+            console.warn('SlideInPanelManager: cannot find elem with "returnFocusSelector", returning focus to main view'); // eslint-disable-line no-console
+
+            return '.dashboard-root';
+          }
+
+          return returnFocusSelector || '.dashboard-root';
+        }
+      };
+
+      useWatcherBasedSetupFocusTrapWithDestroyIncluded(
+        () => {
+          if (currentProps?.value?.focusTrapWatcherBasedVariable) {
+            return currentProps.value.focusTrapWatcherBasedVariable;
+          }
+
+          return isOpen?.value && !isClosing?.value;
+        },
+        '#slide-in-panel-manager',
+        opts,
+        false
+      );
+    }
+  }
+);
+
+watch(
+  () => router?.currentRoute?.value,
+  (newValue, oldValue) => {
+    if (!isOpen?.value) {
+      return;
+    }
+
+    if (closeOnRouteChange.value.includes('name') && !isEqual(newValue?.name, oldValue?.name)) {
+      closePanel();
+    }
+
+    if (closeOnRouteChange.value.includes('params') && !isEqual(newValue?.params, oldValue?.params)) {
+      closePanel();
+    }
+
+    if (closeOnRouteChange.value.includes('hash') && !isEqual(newValue?.hash, oldValue?.hash)) {
+      closePanel();
+    }
+
+    if (closeOnRouteChange.value.includes('query') && !isEqual(newValue?.query, oldValue?.query)) {
+      closePanel();
+    }
+  },
+  { deep: true }
+);
+
+onBeforeUnmount(closePanel);
 
 function closePanel() {
   store.commit('slideInPanel/close');
@@ -33,7 +126,10 @@ function closePanel() {
 
 <template>
   <Teleport to="#slides">
-    <div id="slide-in-panel-manager">
+    <div
+      id="slide-in-panel-manager"
+      @keydown.escape="closePanel"
+    >
       <div
         v-show="isOpen"
         data-testid="slide-in-glass"
@@ -41,20 +137,27 @@ function closePanel() {
         :class="{ 'slide-in-glass-open': isOpen }"
         @click="closePanel"
       />
-      <div
+      <aside
         class="slide-in"
         :class="{ 'slide-in-open': isOpen }"
-        :style="{ width: panelWidth, right: panelRight, top: panelTop, height: panelHeight }"
+        :style="{
+          width: panelWidth,
+          right: panelRight,
+          top: panelTop,
+          height: panelHeight,
+        }"
       >
-        <div class="header">
+        <div
+          v-if="showHeader"
+          class="header"
+        >
           <div class="title">
             {{ panelTitle }}
           </div>
           <i
             class="icon icon-close"
             data-testid="slide-in-close"
-            :trigger-focus-trap="true"
-            tabindex="0"
+            :tabindex="isOpen ? 0 : -1"
             @click="closePanel"
           />
         </div>
@@ -67,7 +170,7 @@ function closePanel() {
             class="dynamic-panel-content"
           />
         </div>
-      </div>
+      </aside>
     </div>
   </Teleport>
 </template>
@@ -80,12 +183,11 @@ function closePanel() {
   left: 0;
   height: 100vh;
   width: 100vw;
+  z-index: z-index('slide-in');
 }
 .slide-in-glass-open {
-  background-color: var(--body-bg);
+  background: var(--overlay-bg);
   display: block;
-  opacity: 0.5;
-  z-index: 1000;
 }
 
 .slide-in {
@@ -93,10 +195,10 @@ function closePanel() {
   flex-direction: column;
   position: fixed;
   top: 0;
-  z-index: 2000;
   transition: right 0.5s ease;
   border-left: 1px solid var(--border);
   background-color: var(--body-bg);
+  z-index: calc(z-index('slide-in') + 1);
 }
 
 .slide-in-open {