dashboard-shell-shell 1.0.112 → 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.00000000112",
+  "version": "1.0.00000000113",
   "engines": {
     "node": ">=20.0.0"
   },

package/store/type-map.js

@@ -107,6 +107,7 @@
 //                               graphConfig: undefined   -- Use this to pass along the graph configuration
 //                               notFilterNamespace:  undefined -- Define namespaces that do not need to be filtered
 //                               localOnly: False -- Hide this type from the nav/search bar on downstream clusters
+//                               custom: any - Custom options for a given type
 //                           }
 // )
 // ignoreGroup(group):        Never show group or any types in it
@@ -508,6 +509,12 @@ export const getters = {
       return state.basicTypes?.[product]?.[schemaId];
     };
   },
+  
+  groupsForVirTypes(state) {
+    return (product, name) => {
+      return state.virtualTypes?.[product].find(item => item.name === name)?.icon;
+    };
+  },
 
   optionsFor(state, getters, rootState, rootGetters) {
     const def = {
@@ -524,6 +531,7 @@ export const getters = {
       depaginate:             false,
       customRoute:            undefined,
       resourceEditMasthead:   true,
+      custom:                 {},
     };
 
     return (schemaOrType, pagination) => {
@@ -657,7 +665,18 @@ export const getters = {
 
         const label = typeObj.labelKey ? rootGetters['i18n/t'](typeObj.labelKey) || typeObj.label : typeObj.label;
 
-        const labelDisplay = highlightLabel(label, count, typeObj.schema);
+        const virtual = !!typeObj.virtual;
+        let icon = typeObj.icon;
+
+        if ( (!virtual || typeObj.isSpoofed ) && !icon ) {
+          if ( namespaced ) {
+            icon = 'folder';
+          } else {
+            icon = 'globe';
+          }
+        }
+
+        const labelDisplay = highlightLabel(label,icon, count, typeObj.schema);
 
         if ( !labelDisplay ) {
           // Search happens in highlight and returns null if not found
@@ -765,7 +784,7 @@ export const getters = {
         return group;
       }
 
-      function highlightLabel(original, count, schema) {
+      function highlightLabel(original, icon, count, schema) {
         let label = escapeHtml(original);
 
         if ( searchRegex ) {
@@ -789,6 +808,12 @@ export const getters = {
           }
         }
 
+        if ( icon ) {
+          console.log(icon)
+          label = `<i class="icon icon-fw icon-${ icon }"></i>${ label }`;
+          console.log(label)
+        }
+
         return label;
       }
     };
@@ -1729,6 +1754,8 @@ export const mutations = {
     let obj = { ...options, match };
 
     if ( idx >= 0 ) {
+      // Merge the custom data object - multiple configures will update existing rather than overwrite
+      obj.custom = Object.assign(state.typeOptions[idx].custom || {}, obj.custom || {});
       obj = Object.assign(state.typeOptions[idx], obj);
       state.typeOptions.splice(idx, 1, obj);
     } else {

package/utils/error.js

@@ -1,5 +1,7 @@
 import { isArray } from '@shell/utils/array';
 
+import translations from './errorTranslate.json';
+
 export class ClusterNotFoundError extends Error {
   static NAME = 'ClusterNotFoundError'
 
@@ -48,7 +50,7 @@ export class ApiError extends Error {
 
 export function stringify(err) {
   let str;
-
+  console.log('00043', err);
   if ( typeof err === 'string' ) {
     str = err;
   } else if ( err && typeof err === 'object' ) {
@@ -60,7 +62,7 @@ export function stringify(err) {
           const data = JSON.parse(str).data;
 
           if (data) {
-            return data;
+            return translateError(data);
           }
         } catch {}
       }
@@ -84,24 +86,30 @@ export function stringify(err) {
     str = JSON.stringify(err);
   }
 
-  return str;
+  return translateError(str);
 }
 
 export function exceptionToErrorsArray(err) {
+  console.log('00055', err);
   if ( err?.response?.data ) {
     const body = err.response.data;
 
     if ( body && body.message ) {
-      return [body.message];
+      return [translateError(body.message)];
     } else {
-      return [err];
+      return [translateError(err)];
     }
   } else if (err.status && err.message) {
-    return [err.message];
+    return [translateError(err.message)];
   } else if ( isArray(err) ) {
-    return err;
+    let arr = []
+    for (let index = 0; index < err.length; index++) {
+      arr[index] = translateError(err[index])
+    }
+
+    return [...new Set(arr)];
   } else {
-    return [err];
+    return [translateError(err)];
   }
 }
 
@@ -129,3 +137,17 @@ export const normalizeError = (err) => {
     statusCode: (err.statusCode || err.status || (err.response && err.response.status) || 500)
   };
 };
+export function translateError(error) {
+  const originError = error;
+  error = error.toLowerCase();
+  console.log('00044', error);
+
+  // Apply translations from JSON
+  for (const translation of translations.translations) {
+    if (error.includes(translation.pattern)) {
+      error = error.replace(new RegExp(translation.pattern, 'g'), translation.replacement);
+    }
+  }
+
+  return error;
+}