dashboard-shell-shell 1.0.113 → 1.0.114

package/components/nav/Header.vue

@@ -81,8 +81,7 @@ export default {
       extensionHeaderActions: getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, this.$route),
       ctx:                    this,
       showImportModal:        false,
-      showSearchModal:        false,
-      userIcon:               require('~shell/assets/images/logo.png'),
+      showSearchModal:        false
     };
   },
 
@@ -405,7 +404,7 @@ export default {
       <TopLevelMenu v-if="isRancherInHarvester || isMultiCluster || !isSingleProduct" />
     </div>
 
-    <!-- <div
+    <div
       class="menu-spacer"
       :class="{'isSingleProduct': isSingleProduct }"
     >
@@ -524,20 +523,8 @@ export default {
           :alt="t('branding.logos.label')"
         />
       </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">
@@ -709,23 +696,20 @@ 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 }}
@@ -737,13 +721,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'})"
@@ -776,7 +760,6 @@ 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;
@@ -894,7 +877,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 {
@@ -907,7 +890,7 @@ export default {
       }
 
       > .top {
-        padding-top: 10px;
+        padding-top: 6px;
 
         INPUT[type='search']::placeholder,
         .vs__open-indicator,
@@ -1027,7 +1010,7 @@ export default {
 
       > .user {
         outline: none;
-        /* width: var(--header-height); */
+        width: var(--header-height);
 
         .v-popper {
           display: flex;
@@ -1041,10 +1024,6 @@ export default {
         .user-image {
           display: flex;
           align-items: center;
-          &:hover{
-            color: var(--primary);
-          }
-
         }
 
         &:focus {
@@ -1173,10 +1152,5 @@ export default {
       }
     }
   }
-  .login-name{
-    font-size: 14px;
-    margin-left: 5px;
-    margin-top: 5px;
-    line-height: 20px;
-  }
+
 </style>

package/components/nav/Jump.vue

@@ -71,12 +71,6 @@ export default {
 
 <template>
   <div>
-    <p
-      id="describe-filter-resource-search"
-      hidden
-    >
-      {{ t('nav.resourceSearch.filteringDescription') }}
-    </p>
     <input
       ref="input"
       v-model="value"
@@ -84,7 +78,6 @@ 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

@@ -921,7 +921,6 @@ export default {
       display: flex;
       > i {
         padding-right: 5px;
-        font-size: 10px;
       }
     }
 
@@ -933,8 +932,6 @@ export default {
 
     .ns-filter-input {
       height: 24px;
-      border: 1px solid #d7d7d7;
-      padding: 0px 5px;
     }
 
     .ns-filter-clear {
@@ -949,8 +946,7 @@ export default {
 
     .ns-dropdown-menu {
       background-color: var(--header-bg);
-      /* border: 1px solid var(--primary-border); */
-      border: 1px solid #d7d7d7;;
+      border: 1px solid var(--primary-border);
       border-bottom-left-radius: var(--border-radius);
       border-bottom-right-radius: var(--border-radius);
       color: var(--header-btn-text);
@@ -970,10 +966,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 {
@@ -1013,7 +1009,7 @@ export default {
           &.ns-selected:not(:hover) {
             .ns-item {
               > * {
-                /* color: var(--primary); */
+                color: var(--primary);
               }
             }
 
@@ -1066,7 +1062,7 @@ export default {
       border-radius: var(--border-radius);
       color: var(--header-btn-text);
       cursor: pointer;
-      height: 32px;
+      height: 40px;
       padding: 0 10px;
       position: relative;
       z-index: z-index('dropdownOverlay');
@@ -1074,8 +1070,7 @@ export default {
       &.ns-open {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
-        /* border-color: var(--primary-border); */
-        border-color: #d7d7d7;
+        border-color: var(--primary-border);
       }
 
       > .ns-values {
@@ -1114,13 +1109,12 @@ 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}"
-    role="button"
+    aria-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,6 +14,7 @@ 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';
@@ -81,6 +82,15 @@ 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;
     },
@@ -430,7 +440,8 @@ export default {
 
       return {
         content,
-        placement: 'right',
+        placement:     'right',
+        popperOptions: { modifiers: { preventOverflow: { enabled: false }, hide: { enabled: false } } },
         popperClass
       };
     },
@@ -472,6 +483,7 @@ 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')"
@@ -698,7 +710,7 @@ export default {
                   v-if="clustersFiltered.length > 0"
                   class="category-title"
                 >
-                  <hr role="none">
+                  <hr>
                 </div>
               </div>
 
@@ -812,7 +824,7 @@ export default {
               <div
                 class="category-title"
               >
-                <hr role="none">
+                <hr>
                 <span>
                   {{ t('nav.categories.multiCluster') }}
                 </span>
@@ -845,7 +857,7 @@ export default {
               <div
                 class="category-title"
               >
-                <hr role="none">
+                <hr>
                 <span>
                   {{ t('nav.categories.configuration') }}
                 </span>
@@ -990,7 +1002,7 @@ export default {
       }
     }
 
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0px;
     bottom: 0;

package/components/nav/Type.vue

@@ -58,18 +58,7 @@ export default {
 
     isActive() {
       const typeFullPath = this.$router.resolve(this.type.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;
-        }
-      }
+      const pageFullPath = this.$route.fullPath?.toLowerCase();
 
       if ( !this.type.exact) {
         const typeSplit = typeFullPath.split('/');
@@ -133,7 +122,6 @@ 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)"
@@ -148,7 +136,7 @@ export default {
           class="label"
           :class="{'no-icon': !type.icon}"
         />
-        <!-- <span
+        <span
           v-if="showFavorite || namespaceIcon || showCount"
           class="count"
         >
@@ -166,7 +154,7 @@ export default {
             v-if="showCount"
             data-testid="type-count"
           >{{ count }}</span>
-        </span> -->
+        </span>
       </a>
     </li>
   </router-link>
@@ -211,7 +199,6 @@ export default {
     .label {
       align-items: center;
       grid-area: label;
-      display: flex;
       overflow: hidden;
       text-overflow: ellipsis;
 
@@ -219,13 +206,13 @@ export default {
         padding-left: 3px;
       }
 
-      ::v-deep .highlight {
+      :deep() .highlight {
         background: var(--diff-ins-bg);
         color: var(--body-text);
         padding: 2px;
       }
 
-      ::v-deep .icon {
+      :deep() .icon {
         position: relative;
         color: var(--muted);
       }
@@ -238,24 +225,20 @@ export default {
       grid-column-gap: 5px;
       font-size: 14px;
       line-height: 24px;
-      /* padding: 7.5px 7px 7.5px 10px; */
-      padding: 0px 16px 0px 40px;
-      height: 50px;
+      padding: 7.5px 7px 7.5px 10px;
       margin: 0 0 0 -3px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       color: var(--body-text);
+      height: 33px;
 
       &:hover {
-        background: var(--nav-active);
-        color: var(--nav-hover-color);
-        /* background: var(--nav-hover); */
+        background: var(--nav-hover);
         text-decoration: none;
 
-        ::v-deep .icon {
-          /* color: var(--body-text); */
-          color: var(--nav-hover-color);
+        :deep() .icon {
+          color: var(--body-text);
         }
       }
     }
@@ -264,26 +247,46 @@ 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 {
-        font-size: 13px;
-        padding: 5.5px 7px 5.5px 10px;
+        padding-left: 16px;
       }
 
-      ::v-deep .label I {
+      :deep() .label I {
         padding-right: 2px;
       }
     }
+
+    &.nav-type:is(.depth-1) {
+      A {
+        font-size: 13px;
+        padding-left: 23px;
+      }
+    }
+
+    &.nav-type:not(.depth-0):not(.depth-1) {
+      A {
+        padding-left: 14px;
+      }
+    }
   }
 
 </style>

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

@@ -1,4 +1,5 @@
 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';
@@ -428,6 +429,45 @@ 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() => {

package/components/templates/blank.vue

@@ -9,10 +9,7 @@ export default {
 </script>
 
 <template>
-  <main
-    class="main-layout"
-    :aria-label="t('layouts.blank')"
-  >
+  <main class="main-layout">
     <router-view :key="$route.path" />
 
     <Inactivity />

package/components/templates/default.vue

@@ -7,8 +7,6 @@ import {
 } from '@shell/store/prefs';
 import ActionMenu from '@shell/components/ActionMenu';
 import GrowlManager from '@shell/components/GrowlManager';
-import ModalManager from '@shell/components/ModalManager';
-import SlideInPanelManager from '@shell/components/SlideInPanelManager';
 import WindowManager from '@shell/components/nav/WindowManager';
 import PromptRemove from '@shell/components/PromptRemove';
 import PromptRestore from '@shell/components/PromptRestore';
@@ -41,8 +39,6 @@ export default {
     Header,
     ActionMenu,
     GrowlManager,
-    ModalManager,
-    SlideInPanelManager,
     WindowManager,
     FixedBanner,
     AwsComplianceBanner,
@@ -202,7 +198,6 @@ export default {
       <main
         v-if="clusterAndRouteReady"
         class="main-layout"
-        :aria-label="t('layouts.default')"
       >
         <router-view
           :key="$route.path"
@@ -213,7 +208,6 @@ export default {
         <PromptRestore />
         <AssignTo />
         <PromptModal />
-        <ModalManager />
         <button
           v-if="noLocaleShortcut"
           v-shortkey.once="['shift','l']"
@@ -241,7 +235,6 @@ export default {
       <main
         v-else-if="unmatchedRoute"
         class="main-layout"
-        :aria-label="t('layouts.default')"
       >
         <router-view
           :key="$route.path"
@@ -264,7 +257,6 @@ export default {
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
-    <SlideInPanelManager />
     <Inactivity />
     <DraggableZone ref="draggableZone" />
   </div>

package/components/templates/home.vue

@@ -3,8 +3,6 @@ import Header from '@shell/components/nav/Header';
 import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
 import GrowlManager from '@shell/components/GrowlManager';
-import ModalManager from '@shell/components/ModalManager';
-import SlideInPanelManager from '@shell/components/SlideInPanelManager';
 import { mapPref, THEME_SHORTCUT } from '@shell/store/prefs';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
@@ -19,8 +17,6 @@ export default {
     Header,
     FixedBanner,
     GrowlManager,
-    ModalManager,
-    SlideInPanelManager,
     AzureWarning,
     AwsComplianceBanner,
     Inactivity,
@@ -62,7 +58,6 @@ export default {
     <AwsComplianceBanner />
     <AzureWarning />
     <PromptModal />
-    <ModalManager />
     <div
       class="dashboard-content"
       :class="{'dashboard-padding-left': showTopLevelMenu}"
@@ -72,10 +67,7 @@ export default {
         :simple="true"
       />
 
-      <main
-        class="main-layout"
-        :aria-label="t('layouts.home')"
-      >
+      <main class="main-layout">
         <router-view
           :key="$route.path"
           class="outlet"
@@ -84,7 +76,6 @@ export default {
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
-    <SlideInPanelManager />
     <button
       v-if="themeShortcut"
       v-shortkey.once="['shift','t']"

package/components/templates/plain.vue

@@ -8,8 +8,6 @@ import IndentedPanel from '@shell/components/IndentedPanel';
 import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
 import GrowlManager from '@shell/components/GrowlManager';
-import ModalManager from '@shell/components/ModalManager';
-import SlideInPanelManager from '@shell/components/SlideInPanelManager';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
@@ -28,8 +26,6 @@ export default {
     PromptModal,
     FixedBanner,
     GrowlManager,
-    ModalManager,
-    SlideInPanelManager,
     AwsComplianceBanner,
     AzureWarning,
     Inactivity
@@ -72,10 +68,7 @@ export default {
       :class="{'dashboard-padding-left': showTopLevelMenu}"
     >
       <Header :simple="true" />
-      <main
-        class="main-layout"
-        :aria-label="t('layouts.plain')"
-      >
+      <main class="main-layout">
         <IndentedPanel class="pt-20">
           <router-view
             :key="$route.path"
@@ -85,7 +78,6 @@ export default {
         <ActionMenu />
         <PromptRemove />
         <PromptModal />
-        <ModalManager />
         <AssignTo />
         <button
           v-if="themeShortcut"
@@ -104,7 +96,6 @@ export default {
 
     <FixedBanner :footer="true" />
     <GrowlManager />
-    <SlideInPanelManager />
     <Inactivity />
   </div>
 </template>

package/package.json

@@ -5,7 +5,7 @@
   "license": "Apache-2.0",
   "author": "SUSE",
   "private": false,
-  "version": "1.0.00000000113",
+  "version": "1.0.00000000114",
   "engines": {
     "node": ">=20.0.0"
   },