dashboard-shell-shell 1.0.122 → 1.0.1000000081

package/components/nav/Header.vue

@@ -81,7 +81,8 @@ export default {
       extensionHeaderActions: getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, this.$route),
       ctx:                    this,
       showImportModal:        false,
-      showSearchModal:        false
+      showSearchModal:        false,
+      userIcon:               require('~shell/assets/images/logo.png'),
     };
   },
 
@@ -404,7 +405,7 @@ export default {
       <TopLevelMenu v-if="isRancherInHarvester || isMultiCluster || !isSingleProduct" />
     </div>
 
-    <div
+    <!-- <div
       class="menu-spacer"
       :class="{'isSingleProduct': isSingleProduct }"
     >
@@ -523,8 +524,20 @@ export default {
           :alt="t('branding.logos.label')"
         />
       </div>
-    </div>
+    </div> -->
 
+      <!-- logo -->
+      <div class="menu-spacer">
+      <router-link
+        v-if="isSingleProduct && !isRancherInHarvester"
+        :to="singleProductLogoRoute"
+      >
+        <img
+          :src="userIcon"
+        >
+      </router-link>
+    </div>
+    <!-- 中间 -->
     <div class="spacer" />
 
     <div class="rd-header-right">
@@ -696,20 +709,23 @@ export default {
             data-testid="nav_header_showUserMenu"
             :aria-label="t('nav.userMenu.button.label')"
           >
-            <img
+            <!-- <img
               v-if="principal && principal.avatarSrc"
               :src="principal.avatarSrc"
               :class="{'avatar-round': principal.roundAvatar}"
               width="36"
               height="36"
+              :alt="t('nav.alt.userAvatar')"
             >
             <i
               v-else
               class="icon icon-user icon-3x avatar"
-            />
+            /> -->
+            <i class="icon icon-usericon" />
+            <span class="login-name">{{ principal.loginName }}</span>
           </rc-dropdown-trigger>
           <template #dropdownCollection>
-            <template v-if="authEnabled">
+            <!-- <template v-if="authEnabled">
               <div class="user-info">
                 <div class="user-name">
                   <i class="icon icon-lg icon-user" /> {{ principal.loginName }}
@@ -721,13 +737,13 @@ export default {
                 </div>
               </div>
               <rc-dropdown-separator />
-            </template>
-            <rc-dropdown-item
+            </template> -->
+            <!-- <rc-dropdown-item
               v-if="showPreferencesLink"
               @click="$router.push({ name: 'prefs'})"
             >
               {{ t('nav.userMenu.preferences') }}
-            </rc-dropdown-item>
+            </rc-dropdown-item> -->
             <rc-dropdown-item
               v-if="showAccountAndApiKeyLink"
               @click="$router.push({ name: 'account'})"
@@ -760,6 +776,7 @@ export default {
   HEADER {
     display: flex;
     z-index: z-index('mainHeader');
+    box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.12);
 
     > .spacer {
       flex: 1;
@@ -877,7 +894,7 @@ export default {
 
     > * {
       background-color: var(--header-bg);
-      border-bottom: var(--header-border-size) solid var(--header-border);
+      /* border-bottom: var(--header-border-size) solid var(--header-border); */
     }
 
     .rd-header-right {
@@ -890,7 +907,7 @@ export default {
       }
 
       > .top {
-        padding-top: 6px;
+        padding-top: 10px;
 
         INPUT[type='search']::placeholder,
         .vs__open-indicator,
@@ -1010,7 +1027,7 @@ export default {
 
       > .user {
         outline: none;
-        width: var(--header-height);
+        /* width: var(--header-height); */
 
         .v-popper {
           display: flex;
@@ -1024,6 +1041,10 @@ export default {
         .user-image {
           display: flex;
           align-items: center;
+          &:hover{
+            color: var(--primary);
+          }
+
         }
 
         &:focus {
@@ -1152,5 +1173,10 @@ export default {
       }
     }
   }
-
+  .login-name{
+    font-size: 14px;
+    margin-left: 5px;
+    margin-top: 5px;
+    line-height: 20px;
+  }
 </style>

package/components/nav/Jump.vue

@@ -71,6 +71,12 @@ export default {
 
 <template>
   <div>
+    <p
+      id="describe-filter-resource-search"
+      hidden
+    >
+      {{ t('nav.resourceSearch.filteringDescription') }}
+    </p>
     <input
       ref="input"
       v-model="value"
@@ -78,6 +84,7 @@ export default {
       class="search"
       role="textbox"
       :aria-label="t('nav.resourceSearch.label')"
+      aria-describedby="describe-filter-resource-search"
       @keyup.esc="$emit('closeSearch')"
     >
     <div class="results">

package/components/nav/NamespaceFilter.vue

@@ -20,6 +20,7 @@ import { KEY } from '@shell/utils/platform';
 import pAndNFiltering from '@shell/plugins/steve/projectAndNamespaceFiltering.utils';
 import { SETTING } from '@shell/config/settings';
 import paginationUtils from '@shell/utils/pagination-utils';
+import { harvesterhci2cloud, cloud2harvesterhci } from '@shell/utils/router'
 
 const forcedNamespaceValidTypes = [NAMESPACE_FILTER_KINDS.DIVIDER, NAMESPACE_FILTER_KINDS.PROJECT, NAMESPACE_FILTER_KINDS.NAMESPACE];
 
@@ -143,7 +144,10 @@ export default {
       const inStore = this.$store.getters['currentStore'](NAMESPACE);
 
       const params = { ...this.$route.params };
-      const resource = params.resource;
+      let resource = params.resource;
+      if (params.resource) {
+        resource = cloud2harvesterhci(resource)
+      }
 
       // Sometimes, different pages may have different namespaces to filter
       const notFilterNamespaces = this.$store.getters[`type-map/optionsFor`](resource).notFilterNamespace || [];
@@ -752,7 +756,7 @@ export default {
           :data-testid="`namespaces-value-${j}`"
           class="ns-value"
         >
-          <div>{{ ns.label }}</div>
+          <div>{{ ns.label.replace('harvester', 'cloud') }}</div>
           <!-- block user from removing the last selection if ns forced filtering is on -->
           <i
             v-if="!namespaceFilterMode || value.length > 1"
@@ -863,7 +867,7 @@ export default {
               v-if="opt.kind === NAMESPACE_FILTER_KINDS.NAMESPACE"
               class="icon icon-folder"
             />
-            <div>{{ opt.label }}</div>
+            <div>{{ opt.label.replace('harvester', 'cloud') }}</div>
             <i
               v-if="opt.selected"
               class="icon icon-checkmark"
@@ -921,6 +925,7 @@ export default {
       display: flex;
       > i {
         padding-right: 5px;
+        font-size: 10px;
       }
     }
 
@@ -932,6 +937,8 @@ export default {
 
     .ns-filter-input {
       height: 24px;
+      border: 1px solid #d7d7d7;
+      padding: 0px 5px;
     }
 
     .ns-filter-clear {
@@ -946,7 +953,8 @@ export default {
 
     .ns-dropdown-menu {
       background-color: var(--header-bg);
-      border: 1px solid var(--primary-border);
+      /* border: 1px solid var(--primary-border); */
+      border: 1px solid #d7d7d7;;
       border-bottom-left-radius: var(--border-radius);
       border-bottom-right-radius: var(--border-radius);
       color: var(--header-btn-text);
@@ -966,10 +974,10 @@ export default {
       }
 
       .ns-divider {
-        border-top: 1px solid var(--border);
+        /* border-top: 1px solid var(--border); */
         cursor: default;
-        margin-top: 10px;
-        padding-bottom: 10px;
+        /* margin-top: 10px; */
+        /* padding-bottom: 10px; */
       }
 
       .ns-option {
@@ -1009,7 +1017,7 @@ export default {
           &.ns-selected:not(:hover) {
             .ns-item {
               > * {
-                color: var(--primary);
+                /* color: var(--primary); */
               }
             }
 
@@ -1062,7 +1070,7 @@ export default {
       border-radius: var(--border-radius);
       color: var(--header-btn-text);
       cursor: pointer;
-      height: 40px;
+      height: 32px;
       padding: 0 10px;
       position: relative;
       z-index: z-index('dropdownOverlay');
@@ -1070,7 +1078,8 @@ export default {
       &.ns-open {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
-        border-color: var(--primary-border);
+        /* border-color: var(--primary-border); */
+        border-color: #d7d7d7;
       }
 
       > .ns-values {
@@ -1109,12 +1118,13 @@ export default {
           border-radius: 5px;
           color: var(--tag-text);
           display: flex;
-          line-height: 20px;
+          /* line-height: 20px; */
           padding: 2px 5px;
           white-space: nowrap;
 
           > i {
             margin-left: 5px;
+            font-size: 8px;
 
             &:hover {
               color: var(--primary);

package/components/nav/Pinned.vue

@@ -36,7 +36,7 @@ export default {
     :aria-checked="!!pinned"
     class="pin icon"
     :class="{'icon-pin-outlined': !pinned, 'icon-pin': pinned}"
-    aria-role="button"
+    role="button"
     :aria-label="t('nav.ariaLabel.pinCluster', { cluster: cluster.label })"
     @click.stop.prevent="toggle"
     @keydown.enter.prevent="toggle"

package/components/nav/TopLevelMenu.vue

@@ -14,7 +14,6 @@ import { SETTING } from '@shell/config/settings';
 import { getProductFromRoute } from '@shell/utils/router';
 import { isRancherPrime } from '@shell/config/version';
 import Pinned from '@shell/components/nav/Pinned';
-import { getGlobalBannerFontSizes } from '@shell/utils/banners';
 import { TopLevelMenuHelperPagination, TopLevelMenuHelperLegacy } from '@shell/components/nav/TopLevelMenu.helper';
 import { debounce } from 'lodash';
 import { sameContents } from '@shell/utils/array';
@@ -82,15 +81,6 @@ export default {
       return this.$store.getters['prefs/get'](PINNED_CLUSTERS);
     },
 
-    sideMenuStyle() {
-      const globalBannerSettings = getGlobalBannerFontSizes(this.$store);
-
-      return {
-        marginBottom: globalBannerSettings?.footerFont,
-        marginTop:    globalBannerSettings?.headerFont
-      };
-    },
-
     showClusterSearch() {
       return this.allClustersCount > this.maxClustersToShow;
     },
@@ -440,8 +430,7 @@ export default {
 
       return {
         content,
-        placement:     'right',
-        popperOptions: { modifiers: { preventOverflow: { enabled: false }, hide: { enabled: false } } },
+        placement: 'right',
         popperClass
       };
     },
@@ -483,7 +472,6 @@ export default {
         data-testid="side-menu"
         class="side-menu"
         :class="{'menu-open': shown, 'menu-close':!shown}"
-        :style="sideMenuStyle"
         tabindex="-1"
         role="navigation"
         :aria-label="t('nav.ariaLabel.topLevelMenu')"
@@ -710,7 +698,7 @@ export default {
                   v-if="clustersFiltered.length > 0"
                   class="category-title"
                 >
-                  <hr>
+                  <hr role="none">
                 </div>
               </div>
 
@@ -824,7 +812,7 @@ export default {
               <div
                 class="category-title"
               >
-                <hr>
+                <hr role="none">
                 <span>
                   {{ t('nav.categories.multiCluster') }}
                 </span>
@@ -857,7 +845,7 @@ export default {
               <div
                 class="category-title"
               >
-                <hr>
+                <hr role="none">
                 <span>
                   {{ t('nav.categories.configuration') }}
                 </span>
@@ -1002,7 +990,7 @@ export default {
       }
     }
 
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0px;
     bottom: 0;

package/components/nav/Type.vue

@@ -58,7 +58,18 @@ export default {
 
     isActive() {
       const typeFullPath = this.$router.resolve(this.type.route)?.fullPath.toLowerCase();
-      const pageFullPath = this.$route.fullPath?.toLowerCase();
+      const pageFullPath = this.$route.fullPath?.toLowerCase().split('#')[0]; // Ignore the shebang when comparing routes
+      const routeMetaNav = this.$route.meta?.nav;
+
+      // 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);
+
+        if (navPath === typeFullPath) {
+          return true;
+        }
+      }
 
       if ( !this.type.exact) {
         const typeSplit = typeFullPath.split('/');
@@ -122,6 +133,7 @@ export default {
         :aria-label="type.labelKey ? t(type.labelKey) : (type.labelDisplay || type.label)"
         :href="href"
         class="type-link"
+        :aria-current="isActive ? 'page' : undefined"
         @click="selectType(); navigate($event);"
         @mouseenter="setNear(true)"
         @mouseleave="setNear(false)"
@@ -199,6 +211,7 @@ export default {
     .label {
       align-items: center;
       grid-area: label;
+      display: flex;
       overflow: hidden;
       text-overflow: ellipsis;
 
@@ -206,13 +219,13 @@ export default {
         padding-left: 3px;
       }
 
-      :deep() .highlight {
+      ::v-deep .highlight {
         background: var(--diff-ins-bg);
         color: var(--body-text);
         padding: 2px;
       }
 
-      :deep() .icon {
+      ::v-deep .icon {
         position: relative;
         color: var(--muted);
       }
@@ -225,20 +238,24 @@ export default {
       grid-column-gap: 5px;
       font-size: 14px;
       line-height: 24px;
-      padding: 7.5px 7px 7.5px 10px;
+      /* padding: 7.5px 7px 7.5px 10px; */
+      padding: 0px 16px 0px 40px;
+      height: 50px;
       margin: 0 0 0 -3px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       color: var(--body-text);
-      height: 33px;
 
       &:hover {
-        background: var(--nav-hover);
+        background: var(--nav-active);
+        color: var(--nav-hover-color);
+        /* background: var(--nav-hover); */
         text-decoration: none;
 
-        :deep() .icon {
-          color: var(--body-text);
+        ::v-deep .icon {
+          /* color: var(--body-text); */
+          color: var(--nav-hover-color);
         }
       }
     }
@@ -247,44 +264,24 @@ export default {
       grid-area: favorite;
       font-size: 12px;
       position: relative;
-      vertical-align: middle;
-      margin-right: 4px;
     }
 
     .count {
+      grid-area: count;
       font-size: 12px;
+      text-align: right;
       justify-items: center;
       padding-right: 4px;
-      display: flex;
-      align-items: center;
-    }
-
-    &.nav-type.nav-link {
-      a .label {
-        display: flex;
-      }
     }
 
     &.nav-type:not(.depth-0) {
-      A {
-        padding-left: 16px;
-      }
-
-      :deep() .label I {
-        padding-right: 2px;
-      }
-    }
-
-    &.nav-type:is(.depth-1) {
       A {
         font-size: 13px;
-        padding-left: 23px;
+        padding: 5.5px 7px 5.5px 10px;
       }
-    }
 
-    &.nav-type:not(.depth-0):not(.depth-1) {
-      A {
-        padding-left: 14px;
+      ::v-deep .label I {
+        padding-right: 2px;
       }
     }
   }

package/components/nav/__tests__/TopLevelMenu.test.ts

@@ -1,5 +1,4 @@
 import TopLevelMenu from '@shell/components/nav/TopLevelMenu.vue';
-import { SETTING } from '@shell/config/settings';
 import { mount, Wrapper } from '@vue/test-utils';
 import { CAPI, COUNT, MANAGEMENT } from '@shell/config/types';
 import { PINNED_CLUSTERS } from '@shell/store/prefs';
@@ -429,45 +428,6 @@ describe('topLevelMenu', () => {
     expect(description4.text()).toStrictEqual('some-description4');
   });
 
-  it('should not "crash" the component if the structure of banner settings is in an old format', async() => {
-    const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
-      global: {
-        mocks: {
-          $route: {},
-          $store: {
-            ...generateStore(
-              [{ name: 'whatever' }],
-              [
-                // object based on https://github.com/rancher/dashboard/issues/10140#issuecomment-1883252402
-                {
-                  id:    SETTING.BANNERS,
-                  value: JSON.stringify({
-                    banner: {
-                      color:      '#78c9cf',
-                      background: '#27292e',
-                      text:       'Hello World!'
-                    },
-                    showHeader: 'true',
-                    showFooter: 'true'
-                  })
-                }
-              ]
-            ),
-          }
-        },
-
-        stubs: ['BrandImage', 'router-link'],
-      },
-    });
-
-    await waitForIt();
-
-    expect(wrapper.vm.sideMenuStyle).toStrictEqual({
-      marginBottom: '2em',
-      marginTop:    '2em'
-    });
-  });
-
   describe('searching a term', () => {
     describe('should displays a no results message if have clusters but', () => {
       it('given no matching clusters', async() => {