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

package/pages/explorer/resource/detail/secret.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import DetailPage from '@shell/components/Resource/Detail/Page.vue';
+import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
+import { useDefaultTitleBarProps } from '@shell/components/Resource/Detail/TitleBar/composables';
+import Metadata from '@shell/components/Resource/Detail/Metadata/index.vue';
+import { MANAGEMENT, SECRET } from '@shell/config/types';
+import { useFetchResourceWithId, useResourceIdentifiers } from '@shell/composables/resources';
+import ResourceTabs from '@shell/components/form/ResourceTabs/index.vue';
+import SecretDataTab from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/index.vue';
+import KnownHostsTab from '@shell/components/Resource/Detail/ResourceTabs/KnownHostsTab/index.vue';
+import { useGetKnownHostsTabProps } from '@shell/components/Resource/Detail/ResourceTabs/KnownHostsTab/composables';
+import { useSecretDataTabDefaultProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/composeables';
+import { useSecretIdentifyingInformation } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/composable';
+import { useStore } from 'vuex';
+import { useBasicMetadata } from '@shell/components/Resource/Detail/Metadata/composables';
+
+export interface Props {
+  isProjectSecret?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), { isProjectSecret: false });
+const store = useStore();
+const { id, schema } = useResourceIdentifiers(SECRET);
+const inStore = props.isProjectSecret ? 'management' : 'cluster';
+const secret = await useFetchResourceWithId(SECRET, id, inStore);
+
+if (props.isProjectSecret) {
+  await store.dispatch('management/find', { id: secret.projectId, type: MANAGEMENT.PROJECT });
+}
+const titleBarProps = useDefaultTitleBarProps(secret);
+const identifyingInformation = useSecretIdentifyingInformation(secret, props.isProjectSecret);
+const metaDataProps = useBasicMetadata(secret);
+const knownHostsTabProps = useGetKnownHostsTabProps(secret);
+const secretDataTabProps = useSecretDataTabDefaultProps(secret);
+
+</script>
+<template>
+  <DetailPage>
+    <template #top-area>
+      <TitleBar v-bind="titleBarProps" />
+      <Metadata
+        class="mmt-6"
+        v-bind="metaDataProps"
+        :identifyingInformation="identifyingInformation"
+      />
+    </template>
+    <template #bottom-area>
+      <ResourceTabs
+        :value="secret"
+        :schema="schema"
+      >
+        <SecretDataTab
+          v-bind="secretDataTabProps"
+          :weight="1"
+        />
+        <KnownHostsTab
+          v-if="knownHostsTabProps"
+          v-bind="knownHostsTabProps"
+          :weight="0"
+        />
+      </ResourceTabs>
+    </template>
+  </DetailPage>
+</template>

package/pages/home.vue

@@ -1,7 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { mapPref, AFTER_LOGIN_ROUTE, READ_WHATS_NEW, HIDE_HOME_PAGE_CARDS } from '@shell/store/prefs';
-import { Banner } from '@components/Banner';
+import { mapPref, AFTER_LOGIN_ROUTE, HIDE_HOME_PAGE_CARDS } from '@shell/store/prefs';
 import BannerGraphic from '@shell/components/BannerGraphic.vue';
 import IndentedPanel from '@shell/components/IndentedPanel.vue';
 import PaginatedResourceTable from '@shell/components/PaginatedResourceTable.vue';
@@ -14,7 +13,7 @@ import { NAME as MANAGER } from '@shell/config/product/manager';
 import { STATE } from '@shell/config/table-headers';
 import { MODE, _IMPORT } from '@shell/config/query-params';
 import { createMemoryFormat, formatSi, parseSi, createMemoryValues } from '@shell/utils/units';
-import { getVersionInfo, readReleaseNotes, markReadReleaseNotes, markSeenReleaseNotes } from '@shell/utils/version';
+import { markSeenReleaseNotes } from '@shell/utils/version';
 import PageHeaderActions from '@shell/mixins/page-actions';
 import { getVendor } from '@shell/config/private-label';
 import { mapFeature, MULTI_CLUSTER } from '@shell/store/features';
@@ -36,7 +35,6 @@ export default defineComponent({
   name:       'Home',
   layout:     'home',
   components: {
-    Banner,
     BannerGraphic,
     IndentedPanel,
     PaginatedResourceTable,
@@ -64,9 +62,13 @@ export default defineComponent({
       query: { [MODE]: _IMPORT }
     };
 
+    const topLevelPermissions = sessionStorage.getItem('TOPLEVELPERMISSIONS') || ''
+
+    const topLevelPermissionsVis = topLevelPermissions && topLevelPermissions === 'superadmin'
+
     return {
+      topLevelPermissionsVis,
       HIDE_HOME_PAGE_CARDS,
-      fullVersion: getVersionInfo(this.$store).fullVersion,
       // Page actions don't change on the Home Page
       pageActions: [
         {
@@ -213,7 +215,7 @@ export default defineComponent({
 
   computed: {
     ...mapState(['managementReady']),
-    ...mapGetters(['currentCluster', 'defaultClusterId', 'releaseNotesUrl']),
+    ...mapGetters(['currentCluster', 'defaultClusterId']),
     mcm: mapFeature(MULTI_CLUSTER),
 
     canCreateCluster() {
@@ -223,18 +225,16 @@ export default defineComponent({
     afterLoginRoute: mapPref(AFTER_LOGIN_ROUTE),
     homePageCards:   mapPref(HIDE_HOME_PAGE_CARDS),
 
-    readWhatsNewAlready() {
-      return readReleaseNotes(this.$store);
-    },
-
-    showSetLoginBanner() {
-      return this.homePageCards?.setLoginPage;
-    },
   },
 
   async created() {
     // Update last visited on load
     await this.$store.dispatch('prefs/setLastVisited', { name: 'home' });
+
+    // We mark the release notes as seen still - the user has visited the home page, which will show the
+    // notification centre containing the release notes notification
+    // If we do not, then if they set the landing page, that won't work unless the release notes are marked read
+    // otherwise we always take them to the home page to see the release notes
     markSeenReleaseNotes(this.$store);
   },
 
@@ -410,23 +410,12 @@ export default defineComponent({
       return `${ memValues.useful }/${ memValues.total } ${ memValues.units }`;
     },
 
-    showWhatsNew() {
-      // Update the value, so that the message goes away
-      markReadReleaseNotes(this.$store);
-    },
-
-    showUserPrefs() {
-      this.$router.push({ name: 'prefs' });
-    },
-
     async resetCards() {
       const value = this.$store.getters['prefs/get'](HIDE_HOME_PAGE_CARDS) || {};
 
       delete value.setLoginPage;
 
       await this.$store.dispatch('prefs/set', { key: HIDE_HOME_PAGE_CARDS, value });
-
-      await this.$store.dispatch('prefs/set', { key: READ_WHATS_NEW, value: '' });
     },
 
     async toggleBanner() {
@@ -441,21 +430,6 @@ export default defineComponent({
       await this.$store.dispatch('prefs/set', { key: HIDE_HOME_PAGE_CARDS, value });
     },
 
-    async closeSetLoginBanner(retry = 0) {
-      let value = this.$store.getters['prefs/get'](HIDE_HOME_PAGE_CARDS);
-
-      if (value === true || value === false || value.length > 0) {
-        value = {};
-      }
-      value.setLoginPage = true;
-
-      const res = await this.$store.dispatch('prefs/set', { key: HIDE_HOME_PAGE_CARDS, value });
-
-      if (retry === 0 && res?.type === 'error' && res?.status === 500) {
-        await this.closeSetLoginBanner(retry + 1);
-      }
-    },
-
     /**
      * Filter out hidden clusters from list of all clusters
      */
@@ -504,81 +478,50 @@ export default defineComponent({
 </script>
 
 <template>
+   <!-- 当 managementReady 为 true 时才显示首页内容 -->
   <div
     v-if="managementReady"
     class="home-page"
   >
+
+    <!-- 页签标题组件，不显示子页面标题和面包屑 -->
     <TabTitle
       :show-child="false"
       :breadcrumb="false"
     >
+
+      <!-- 页面标题：{vendor} - 首页 -->
       {{ `${vendor} - ${t('landing.homepage')}` }}
     </TabTitle>
-    <BannerGraphic
+
+    <!-- 首页欢迎横幅 -->
+    <!-- <BannerGraphic
+      v-if="topLevelPermissionsVis"
       :small="true"
       :title="t('landing.welcomeToRancher', {vendor})"
       :pref="HIDE_HOME_PAGE_CARDS"
       pref-key="welcomeBanner"
       data-testid="home-banner-graphic"
-    />
+    /> -->
     <IndentedPanel class="mt-20 mb-20">
-      <div
-        v-if="!readWhatsNewAlready"
-        class="row"
-      >
-        <div class="col span-12">
-          <Banner
-            data-testid="changelog-banner"
-            color="info whats-new"
-          >
-            <div>
-              {{ t('landing.seeWhatsNew', { version: CURRENT_RANCHER_VERSION }) }}
-            </div>
-            <a
-              class="hand banner-link"
-              :href="releaseNotesUrl"
-              role="link"
-              target="_blank"
-              rel="noopener noreferrer nofollow"
-              :aria-label="t('landing.whatsNewLink', { version: CURRENT_RANCHER_VERSION })"
-              @click.stop="showWhatsNew"
-              @keyup.stop.enter="showWhatsNew"
-            ><span v-clean-html="t('landing.whatsNewLink', { version: CURRENT_RANCHER_VERSION })" /></a>
-          </Banner>
-        </div>
-      </div>
+
+       <!-- 主面板布局 -->
       <div class="row home-panels">
         <div class="col main-panel">
-          <div
-            v-if="!showSetLoginBanner"
-            class="mb-10 row"
-          >
-            <div class="col span-12">
-              <Banner
-                color="set-login-page mt-0"
-                data-testid="set-login-page-banner"
-                :closable="true"
-                @close="closeSetLoginBanner()"
-              >
-                <div>
-                  {{ t('landing.landingPrefs.title') }}
-                </div>
-                <a
-                  class="hand mr-20"
-                  tabindex="0"
-                  :aria-label="t('landing.landingPrefs.userPrefs')"
-                  @click.prevent.stop="showUserPrefs"
-                  @keyup.prevent.stop.enter="showUserPrefs"
-                  @keyup.prevent.stop.space="showUserPrefs"
-                ><span v-clean-html="t('landing.landingPrefs.userPrefs')" /></a>
-              </Banner>
-            </div>
-          </div>
+          <h2 class="mb-20">
+            {{ t('landing.clusters.title') }}
+          </h2>
+
+          <!-- 集群列表面板 -->
           <div class="row panel">
+
+            <!-- 如果是多集群模式（mcm = multi-cluster management） -->
             <div
               v-if="mcm"
               class="col span-12"
             >
+
+              <!-- 分页资源表格 -->
               <PaginatedResourceTable
                 v-if="provClusterSchema"
                 :schema="provClusterSchema"
@@ -598,27 +541,17 @@ export default defineComponent({
                 :fetchSecondaryResources="fetchSecondaryResources"
                 :fetchPageSecondaryResources="fetchPageSecondaryResources"
               >
-                <template #header-left>
-                  <div class="row table-heading">
-                    <h2 class="mb-0">
-                      {{ t('landing.clusters.title') }}
-                    </h2>
-                    <BadgeState
-                      v-if="clusterCount"
-                      :label="clusterCount.toString()"
-                      color="role-tertiary ml-20 mr-20"
-                    />
-                  </div>
-                </template>
+
+                <!-- 表头中间：管理、导入、创建按钮 -->
                 <template
                   v-if="canCreateCluster || !!provClusterSchema"
-                  #header-middle
+                  #header-right
                 >
                   <div class="table-heading">
                     <router-link
                       v-if="!!provClusterSchema"
                       :to="manageLocation"
-                      class="btn btn-sm role-secondary"
+                      class="btn btn-sm role-primary"
                       data-testid="cluster-management-manage-button"
                       role="button"
                       :aria-label="t('cluster.manageAction')"
@@ -650,6 +583,8 @@ export default defineComponent({
                     </router-link>
                   </div>
                 </template>
+
+                <!-- 列渲染：集群名称 -->
                 <template #col:name="{row}">
                   <td class="col-name">
                     <div class="list-cluster-name">
@@ -657,6 +592,8 @@ export default defineComponent({
                         v-if="row.mgmt"
                         class="cluster-name"
                       >
+
+                        <!-- 如果集群就绪且无错误，跳转到集群 Explorer 页面 -->
                         <router-link
                           v-if="row.mgmt.isReady && !row.hasError"
                           :to="{ name: 'c-cluster-explorer', params: { cluster: row.mgmt.id }}"
@@ -665,6 +602,8 @@ export default defineComponent({
                         >
                           {{ row.nameDisplay }}
                         </router-link>
+
+                        <!-- 否则只显示名称 -->
                         <span v-else>{{ row.nameDisplay }}</span>
                         <i
                           v-if="row.unavailableMachines"
@@ -672,6 +611,8 @@ export default defineComponent({
                           class="conditions-alert-icon icon-alert icon"
                         />
                       </p>
+
+                      <!-- 集群描述 -->
                       <p
                         v-if="row.description"
                         class="cluster-description"
@@ -681,6 +622,8 @@ export default defineComponent({
                     </div>
                   </td>
                 </template>
+
+                <!-- 列渲染：Kubernetes 版本 + 架构 -->
                 <template #col:kubernetesVersion="{row}">
                   <td class="col-name">
                     <span>
@@ -694,6 +637,8 @@ export default defineComponent({
                     </div>
                   </td>
                 </template>
+
+                <!-- 列渲染：CPU 核数 -->
                 <template #col:cpu="{row}">
                   <td v-if="row.mgmt && cpuAllocatable(row.mgmt)">
                     {{ `${cpuAllocatable(row.mgmt)} ${t('landing.clusters.cores', {count:cpuAllocatable(row.mgmt) })}` }}
@@ -702,6 +647,8 @@ export default defineComponent({
                     &mdash;
                   </td>
                 </template>
+
+                <!-- 列渲染：内存 -->
                 <template #col:memory="{row}">
                   <td v-if="row.mgmt && memoryAllocatable(row.mgmt) && !memoryAllocatable(row.mgmt).match(/^0 [a-zA-z]/)">
                     {{ memoryAllocatable(row.mgmt) }}
@@ -710,16 +657,20 @@ export default defineComponent({
                     &mdash;
                   </td>
                 </template>
-                <!-- <template #cell:explorer="{row}">
+
+                <!-- 列渲染：探索按钮 -->
+                <template #cell:explorer="{row}">
                   <router-link v-if="row && row.isReady" class="btn btn-sm role-primary" :to="{name: 'c-cluster', params: {cluster: row.id}}">
                     {{ t('landing.clusters.explore') }}
                   </router-link>
                   <button v-else :disabled="true" class="btn btn-sm role-primary">
                     {{ t('landing.clusters.explore') }}
                   </button>
-                </template> -->
+                </template>
               </PaginatedResourceTable>
             </div>
+
+            <!-- 单集群模式 -->
             <div
               v-else
               class="col span-12"
@@ -728,7 +679,8 @@ export default defineComponent({
             </div>
           </div>
         </div>
-        <CommunityLinks class="col span-3 side-panel" />
+        <!-- 右侧社区链接面板 -->
+        <!-- <CommunityLinks class="col span-3 side-panel" /> -->
       </div>
     </IndentedPanel>
   </div>
@@ -776,7 +728,7 @@ export default defineComponent({
     height: 39px;
 
     & > a {
-      margin-left: 10px;
+      margin-right: 10px;
     }
   }
   .panel:not(:first-child) {

package/pages/prefs.vue

@@ -18,7 +18,6 @@ import { addObject } from '@shell/utils/array';
 import LocaleSelector from '@shell/components/LocaleSelector';
 import TabTitle from '@shell/components/TabTitle';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
-import { harvester2cloud } from '@shell/utils/router'
 
 export default {
   components: {
@@ -191,11 +190,13 @@ export default {
     <!-- Language -->
     <div
       v-if="hasMultipleLocales && !isHarvester"
-      class="mt-10 mb-10"
+      class="mb-20 p-20 pb-0"
+      style="border: 1px solid var(--nav-border);"
     >
       <h4
         id="prefs-language"
         v-t="'prefs.language'"
+        class="pb-20"
       />
       <div class="row">
         <div class="col span-4">
@@ -207,36 +208,35 @@ export default {
       </div>
     </div>
     <!-- Theme -->
-    <div class="mt-10 mb-10">
-      <h4 v-t="'prefs.theme.label'" />
+    <div class="mb-20 p-20" style="border: 1px solid var(--nav-border);">
+      <h4 v-t="'prefs.theme.label'" class="mb-20" />
       <ButtonGroup
         v-model:value="theme"
         data-testid="prefs__themeOptions"
         :options="themeOptions"
       />
-      <div class="mt-10">
+      <!-- <div class="mt-10">
         <t
           k="prefs.theme.autoDetail"
           :pm="pm"
           :am="am"
         />
-      </div>
+      </div> -->
     </div>
     <!-- Login landing page -->
     <div
       v-if="!isSingleProduct"
-      class="mt-10 mb-10"
+      class="mb-20 p-20"
+      style="border: 1px solid var(--nav-border);"
     >
-      <hr role="none">
-      <h4 v-t="'prefs.landing.label'" />
+      <h4 v-t="'prefs.landing.label'" class="mb-20" />
       <LandingPagePreference
         data-testid="prefs__landingPagePreference"
       />
     </div>
     <!-- Display Settings -->
-    <div class="mt-10 mb-10">
-      <hr role="none">
-      <h4 v-t="'prefs.displaySettings.title'" />
+    <div class="mb-20 p-20" style="border: 1px solid var(--nav-border);">
+      <h4 v-t="'prefs.displaySettings.title'" class="mb-20" />
       <p class="set-landing-leadin">
         {{ t('prefs.displaySettings.detail', {}, raw=true) }}
       </p>
@@ -277,10 +277,10 @@ export default {
     <!-- Confirmation setting -->
     <div
       v-if="!isSingleProduct"
-      class="col adv-features mt-10 mb-10"
+      class="col adv-features mb-20 p-20"
+      style="border: 1px solid var(--nav-border);"
     >
-      <hr role="none">
-      <h4 v-t="'prefs.confirmationSetting.title'" />
+      <h4 v-t="'prefs.confirmationSetting.title'" class="mb-20" />
       <Checkbox
         v-model:value="scalingDownPrompt"
         data-testid="prefs__scalingDownPrompt"
@@ -289,9 +289,8 @@ export default {
       />
     </div>
     <!-- Advanced Features -->
-    <div class="col adv-features mt-10 mb-10">
-      <hr role="none">
-      <h4 v-t="'prefs.advFeatures.title'" />
+    <div class="col adv-features mb-20 p-20" style="border: 1px solid var(--nav-border);">
+      <h4 v-t="'prefs.advFeatures.title'" class="mb-20" />
       <Checkbox
         v-model:value="viewInApi"
         data-testid="prefs__viewInApi"
@@ -332,9 +331,8 @@ export default {
       </template>
     </div>
     <!-- YAML editor key mapping -->
-    <div class="col mt-10 mb-10">
-      <hr role="none">
-      <h4 v-t="'prefs.keymap.label'" />
+    <div class="col mb-20 p-20" style="border: 1px solid var(--nav-border);">
+      <h4 v-t="'prefs.keymap.label'" class="mb-20" />
       <ButtonGroup
         v-model:value="keymap"
         data-testid="prefs__keymapOptions"
@@ -344,10 +342,10 @@ export default {
     <!-- Helm Charts -->
     <div
       v-if="!isSingleProduct"
-      class="col mt-10 mb-40"
+      class="col mb-40 p-20"
+      style="border: 1px solid var(--nav-border);"
     >
-      <hr role="none">
-      <h4 v-t="'prefs.helm.label'" />
+      <h4 v-t="'prefs.helm.label'" class="mb-20" />
       <ButtonGroup
         v-model:value="showPreRelease"
         data-testid="prefs__helmOptions"
@@ -366,4 +364,7 @@ export default {
     max-width: 80vw;
     color: var(--input-label);
   }
+  h4{
+    font-size: 14px;
+  }
 </style>

package/pages/support/index.vue

@@ -2,13 +2,13 @@
 import BannerGraphic from '@shell/components/BannerGraphic';
 import IndentedPanel from '@shell/components/IndentedPanel';
 import CommunityLinks from '@shell/components/CommunityLinks';
-import { CATALOG, MANAGEMENT } from '@shell/config/types';
+import { MANAGEMENT } from '@shell/config/types';
 import { getVendor } from '@shell/config/private-label';
 import { SETTING } from '@shell/config/settings';
 import { addParam } from '@shell/utils/url';
 import { isRancherPrime } from '@shell/config/version';
-import { hasCspAdapter } from '@shell/mixins/brand';
 import TabTitle from '@shell/components/TabTitle';
+import CspAdapterUtils from '@shell/utils/cspAdaptor';
 
 export default {
 
@@ -42,9 +42,7 @@ export default {
       return setting;
     };
 
-    if ( this.$store.getters['management/canList'](CATALOG.APP) ) {
-      this.apps = await this.$store.dispatch('management/findAll', { type: CATALOG.APP });
-    }
+    this.apps = await CspAdapterUtils.fetchCspAdaptorApp(this.$store);
     this.brandSetting = await fetchOrCreateSetting(SETTING.BRAND, '');
     this.serverUrlSetting = await fetchOrCreateSetting(SETTING.SERVER_URL, '');
     this.uiIssuesSetting = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.ISSUES });
@@ -75,7 +73,7 @@ export default {
 
   computed: {
     cspAdapter() {
-      return hasCspAdapter(this.apps);
+      return CspAdapterUtils.hasCspAdapter({ $store: this.$store, apps: this.apps });
     },
 
     hasSupport() {

package/plugins/clean-html.js

@@ -2,6 +2,7 @@ import DOMPurify from 'dompurify';
 import { uniq } from '@shell/utils/array';
 
 const ALLOWED_TAGS = [
+  'center',
   'code',
   'li',
   'a',
@@ -13,6 +14,7 @@ const ALLOWED_TAGS = [
   'span',
   'div',
   'i',
+  'img',
   'em',
   'strong',
   'h1',

package/plugins/dashboard-store/__tests__/actions.test.ts

@@ -175,7 +175,9 @@ describe('dashboard-store: actions', () => {
         haveSelector:   jest.fn(() => false),
         matching:       jest.fn(() => 'getters.all'),
         urlFor:         jest.fn(() => 'getters.urlFor'),
-        urlOptions:     jest.fn(() => 'getters.urlOptions')
+        urlOptions:     jest.fn(() => 'getters.urlOptions'),
+        haveAll:        jest.fn(() => false),
+        all:            jest.fn(() => []),
       };
       const rootGetters = { 'type-map/optionsFor': jest.fn() };
 
@@ -207,6 +209,7 @@ describe('dashboard-store: actions', () => {
             null,
             {
               ...genericOpt,
+              isCollection:  true,
               depaginate:    undefined,
               labelSelector: genericSelector,
               url:           'getters.urlFor',