dashboard-shell-shell 1.0.111 → 1.0.113

package/components/nav/NamespaceFilter.vue

@@ -921,6 +921,7 @@ export default {
       display: flex;
       > i {
         padding-right: 5px;
+        font-size: 10px;
       }
     }
 
@@ -932,6 +933,8 @@ export default {
 
     .ns-filter-input {
       height: 24px;
+      border: 1px solid #d7d7d7;
+      padding: 0px 5px;
     }
 
     .ns-filter-clear {
@@ -946,7 +949,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 +970,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 +1013,7 @@ export default {
           &.ns-selected:not(:hover) {
             .ns-item {
               > * {
-                color: var(--primary);
+                /* color: var(--primary); */
               }
             }
 
@@ -1062,7 +1066,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 +1074,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 +1114,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)"
@@ -136,7 +148,7 @@ export default {
           class="label"
           :class="{'no-icon': !type.icon}"
         />
-        <span
+        <!-- <span
           v-if="showFavorite || namespaceIcon || showCount"
           class="count"
         >
@@ -154,7 +166,7 @@ export default {
             v-if="showCount"
             data-testid="type-count"
           >{{ count }}</span>
-        </span>
+        </span> -->
       </a>
     </li>
   </router-link>
@@ -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() => {

package/components/templates/blank.vue

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

package/components/templates/default.vue

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

package/components/templates/home.vue

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

package/components/templates/plain.vue

@@ -8,6 +8,8 @@ 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';
@@ -26,6 +28,8 @@ export default {
     PromptModal,
     FixedBanner,
     GrowlManager,
+    ModalManager,
+    SlideInPanelManager,
     AwsComplianceBanner,
     AzureWarning,
     Inactivity
@@ -68,7 +72,10 @@ export default {
       :class="{'dashboard-padding-left': showTopLevelMenu}"
     >
       <Header :simple="true" />
-      <main class="main-layout">
+      <main
+        class="main-layout"
+        :aria-label="t('layouts.plain')"
+      >
         <IndentedPanel class="pt-20">
           <router-view
             :key="$route.path"
@@ -78,6 +85,7 @@ export default {
         <ActionMenu />
         <PromptRemove />
         <PromptModal />
+        <ModalManager />
         <AssignTo />
         <button
           v-if="themeShortcut"
@@ -96,6 +104,7 @@ 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.00000000111",
+  "version": "1.0.00000000113",
   "engines": {
     "node": ">=20.0.0"
   },

package/rancher-components/Banner/Banner.vue

@@ -125,7 +125,8 @@ $icon-size: 24px;
 
 .banner {
   display: flex;
-  margin: 15px 0;
+  /* margin: 15px 0; */
+  margin: 0px 0px 20px 0px;
   position: relative;
   width: 100%;
   color: var(--body-text);
@@ -165,9 +166,9 @@ $icon-size: 24px;
   }
 
   &__content {
-    padding: 10px;
+    padding: 9px 10px; 
     transition: all 0.2s ease;
-    line-height: 20px;
+    line-height: 12px;
     width: 100%;
     border-left: solid $left-border-size transparent;
     display: flex;
@@ -189,7 +190,8 @@ $icon-size: 24px;
     }
 
     .info & {
-      background: var(--info-banner-bg);
+      /* background: var(--info-banner-bg); */
+      background: #f2f2f2;
       border-color: var(--info);
     }
 

package/rancher-components/Card/Card.vue

@@ -89,7 +89,7 @@ export default defineComponent({
           {{ title }}
         </slot>
       </div>
-      <hr>
+      <!-- <hr role="none"> -->
       <div
         class="card-body"
         data-testid="card-body-slot"
@@ -124,9 +124,9 @@ export default defineComponent({
   border-radius: var(--border-radius);
   display: flex;
   flex-basis: 40%;
-  margin: 10px;
+  /* margin: 10px; */
   min-height: 100px;
-  padding: 10px;
+  padding: 24px;
   box-shadow: 0 0 20px var(--shadow);
   &:not(.top) {
     align-items: top;
@@ -143,14 +143,16 @@ export default defineComponent({
     justify-content: center;
    }
    & .card-actions {
-     align-self: end;
+     /* align-self: end; */
      display: flex;
+     justify-content: flex-end;
      padding-top: 20px;
    }
    & .card-title {
     align-items: center;
     display: flex;
     width: 100%;
+    margin-bottom: 15px;
      h5 {
        margin: 0;
      }

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -124,10 +124,23 @@ export default defineComponent({
       type:    String,
       default: undefined
     },
+
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'checkbox'
+    },
   },
 
   emits: ['update:value'],
 
+  data() {
+    return { describedById: `described-by-${ generateRandomAlphaString(12) }` };
+  },
+
   computed: {
     /**
      * Determines if the checkbox is disabled.
@@ -270,6 +283,7 @@ export default defineComponent({
         :aria-label="replacementLabel"
         :aria-checked="!!value"
         :aria-labelledby="labelKey || label ? idForLabel : undefined"
+        :aria-describedby="descriptionKey || description ? describedById : undefined"
         role="checkbox"
       />
       <span
@@ -293,6 +307,7 @@ export default defineComponent({
             v-clean-tooltip="{content: t(tooltipKey), triggers: ['hover', 'touch', 'focus']}"
             v-stripped-aria-label="t(tooltipKey)"
             class="checkbox-info icon icon-info icon-lg"
+            :data-testid="componentTestid + '-info-icon'"
             :tabindex="isDisabled ? -1 : 0"
           />
           <i
@@ -300,6 +315,7 @@ export default defineComponent({
             v-clean-tooltip="{content: tooltip, triggers: ['hover', 'touch', 'focus']}"
             v-stripped-aria-label="tooltip"
             class="checkbox-info icon icon-info icon-lg"
+            :data-testid="componentTestid + '-info-icon'"
             :tabindex="isDisabled ? -1 : 0"
           />
         </slot>
@@ -311,10 +327,13 @@ export default defineComponent({
     >
       <t
         v-if="descriptionKey"
+        :id="describedById"
         :k="descriptionKey"
       />
       <template v-else-if="description">
-        {{ description }}
+        <p :id="describedById">
+          {{ description }}
+        </p>
       </template>
     </div>
     <div class="checkbox-outer-container-extra">