dashboard-shell-shell 1.0.113 → 1.0.115

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)"
@@ -189,7 +177,6 @@ export default {
     {{ type }}?
   </li>
 </template>
-
 <style lang="scss" scoped>
   .ns-and-icon {
     margin-right: 4px;

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.00000000115",
   "engines": {
     "node": ">=20.0.0"
   },

package/public/index.html

@@ -48,11 +48,11 @@
 
         .initial-load-spinner {
             animation: initial-load-animate 1s infinite linear;
-            background-color: var(--loading-bg-color);
+            background-color: transparent;
             box-sizing: border-box;
-            border: 5px solid #008ACF;
+            border: 5px solid #1890FF;
             border-radius: 50%;
-            border-top-color: #00B2E2;
+            border-top-color: transparent;
             display: inline-block;
             height: 80px;
             margin: 0 auto;

package/components/ActionDropdownShell.vue

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { RcDropdown, RcDropdownTrigger, RcDropdownItem } from '@components/RcDropdown';
-type HiddenAction = {
-  action: string;
-  enabled: boolean;
-  icon: string;
-  label: string;
-  bulkable: boolean;
-  bulkAction: string;
-  allEnabled: boolean;
-  anyEnabled: boolean;
-}
-
-defineProps<{
-  disabled: boolean,
-  hiddenActions: HiddenAction[],
-  actionTooltip: unknown,
-}>();
-
-const emit = defineEmits(['click', 'mouseover', 'mouseleave']);
-
-const applyTableAction = (act: HiddenAction, args: unknown, event: Event) => {
-  emit('click', act, args, event);
-};
-
-const setBulkActionOfInterest = (act: HiddenAction | null, event: 'mouseover' | 'mouseleave' = 'mouseover') => {
-  emit(event, act);
-};
-</script>
-
-<template>
-  <rc-dropdown
-    :distance="14"
-    placement="bottom"
-  >
-    <rc-dropdown-trigger
-      class="bulk-actions-dropdown"
-      :disabled="disabled"
-    >
-      <template #before>
-        <i class="icon icon-gear" />
-      </template>
-      <span>{{ t('sortableTable.bulkActions.collapsed.label') }}</span>
-      <template #after>
-        <i class="ml-10 icon icon-chevron-down" />
-      </template>
-    </rc-dropdown-trigger>
-    <template #dropdownCollection>
-      <rc-dropdown-item
-        v-for="(act, i) in hiddenActions"
-        :key="i"
-        v-clean-tooltip="{
-          content: actionTooltip,
-          placement: 'right'
-        }"
-        :disabled="!act.enabled"
-        @click="applyTableAction(act, null, $event)"
-        @mouseover="setBulkActionOfInterest(act)"
-        @mouseleave="setBulkActionOfInterest(null, 'mouseleave')"
-      >
-        <template #before>
-          <i
-            v-if="act.icon"
-            :class="act.icon"
-          />
-        </template>
-        <span v-clean-html="act.label" />
-      </rc-dropdown-item>
-    </template>
-  </rc-dropdown>
-</template>

package/components/DotState.vue

@@ -1,84 +0,0 @@
-<script lang="ts">
-import Vue, { PropType, defineComponent } from 'vue';
-import { mapGetters } from 'vuex';
-
-interface Dot {
-  stateBackground: string;
-  stateDisplay: string;
-}
-
-export default defineComponent({
-
-  name: 'DotState',
-
-  props:      {
-    value: {
-      type:    Object as PropType<Dot>,
-      default: null
-    },
-    color: {
-      type:    String,
-      default: null
-    },
-    label: {
-      type:    String,
-      default: null
-    }
-  },
-  
-  computed: {
-    ...mapGetters({ t: 'i18n/t' }),
-    bg(): string | null {
-      return this.value?.stateBackground || this.color;
-    },
-
-    msg(): string | null {
-      let text = this.value?.stateDisplay || this.label;
-      let zhText = this.t(`stateLabel.${ text }`)
-      return zhText ? zhText : text
-    }
-    
-  }
-});
-</script>
-
-<template>
-  <div style="display: flex;flex-direction: row;align-items: center;">
-    <div :class="{ [bg]: true }"></div>
-    <span style="margin-left: 5px;">{{ msg }}</span>
-    
-  </div>
-  
-</template>
-<style lang="scss" scoped>
-  .bg-error {
-    width: 10px; /* 圆点的宽度 */
-    height: 10px; /* 圆点的高度 */
-    background-color: #DD0C17; /* 圆点的颜色 */
-    border-radius: 50%; /* 设置为圆形 */
-  }
-  .bg-darker {
-    width: 10px; /* 圆点的宽度 */
-    height: 10px; /* 圆点的高度 */
-    background-color: #DD0C17; /* 圆点的颜色 */
-    border-radius: 50%; /* 设置为圆形 */
-  }
-  .bg-success {
-    width: 10px; /* 圆点的宽度 */
-    height: 10px; /* 圆点的高度 */
-    background-color: #95F204 !important; /* 圆点的颜色 */
-    border-radius: 50%; /* 设置为圆形 */
-  }
-  .bg-warning {
-    width: 10px; /* 圆点的宽度 */
-    height: 10px; /* 圆点的高度 */
-    background-color: #DAC342; /* 圆点的颜色 */
-    border-radius: 50%; /* 设置为圆形 */
-  }
-  .bg-info {
-    width: 10px; /* 圆点的宽度 */
-    height: 10px; /* 圆点的高度 */
-    background-color: #1890FF; /* 圆点的颜色 */
-    border-radius: 50%; /* 设置为圆形 */
-  }
-</style>

package/components/ModalManager.vue

@@ -1,55 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-import { useStore } from 'vuex';
-
-import AppModal from '@shell/components/AppModal.vue';
-
-const store = useStore();
-
-const isOpen = computed(() => store.getters['modal/isOpen']);
-const component = computed(() => store.getters['modal/component']);
-const componentProps = computed(() => store.getters['modal/componentProps']);
-const resources = computed(() => store.getters['modal/resources']);
-const closeOnClickOutside = computed(() => store.getters['modal/closeOnClickOutside']);
-const modalWidth = computed(() => store.getters['modal/modalWidth']);
-// const modalSticky = computed(() => store.getters['modal/modalSticky']); // TODO: Implement sticky modals
-
-const backgroundClosing = ref<Function | null>(null);
-
-function close() {
-  if (!isOpen.value) return;
-
-  if (backgroundClosing.value) {
-    backgroundClosing.value();
-  }
-
-  store.commit('modal/closeModal');
-}
-
-function registerBackgroundClosing(fn: Function) {
-  backgroundClosing.value = fn;
-}
-</script>
-
-<template>
-  <Teleport to="#modals">
-    <app-modal
-      v-if="isOpen && component"
-      :click-to-close="closeOnClickOutside"
-      :width="modalWidth"
-      :style="{ '--prompt-modal-width': modalWidth }"
-      :trigger-focus-trap="true"
-      tabindex="0"
-      @close="close"
-    >
-      <component
-        :is="component"
-        v-bind="componentProps || {}"
-        data-testid="modal-manager-component"
-        :resources="resources"
-        :register-background-closing="registerBackgroundClosing"
-        @close="close"
-      />
-    </app-modal>
-  </Teleport>
-</template>