@rancher/shell 3.0.7 → 3.0.8-rc.10

package/components/nav/Header.vue

@@ -67,18 +67,19 @@ export default {
     const shellShortcut = '(Ctrl+`)';
 
     return {
-      authInfo:               {},
-      show:                   false,
-      showTooltip:            false,
-      isUserMenuOpen:         false,
-      isPageActionMenuOpen:   false,
-      kubeConfigCopying:      false,
+      authInfo:                {},
+      show:                    false,
+      showTooltip:             false,
+      isUserMenuOpen:          false,
+      isPageActionMenuOpen:    false,
+      kubeConfigCopying:       false,
       searchShortcut,
       shellShortcut,
       LOGGED_OUT,
-      navHeaderRight:         null,
-      extensionHeaderActions: getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, this.$route),
-      ctx:                    this
+      navHeaderRight:          null,
+      extensionHeaderActions:  getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, this.$route),
+      extensionActionsEnabled: {},
+      ctx:                     this
     };
   },
 
@@ -96,7 +97,6 @@ export default {
       'isSingleProduct',
       'isRancherInHarvester',
       'showTopLevelMenu',
-      'isMultiCluster',
       'showWorkspaceSwitcher'
     ]),
 
@@ -252,6 +252,7 @@ export default {
       handler(neu) {
         if (neu) {
           this.extensionHeaderActions = getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, neu);
+          this.updateExtensionActionsEnabled();
 
           this.navHeaderRight = this.$plugin?.getDynamic('component', 'NavHeaderRight');
         }
@@ -368,7 +369,7 @@ export default {
       });
     },
 
-    handleExtensionAction(action, event) {
+    async handleExtensionAction(action, event) {
       const fn = action.invoke;
       const opts = {
         event,
@@ -377,7 +378,7 @@ export default {
         product: this.currentProduct.name,
         cluster: this.currentCluster,
       };
-      const enabled = action.enabled ? action.enabled.apply(this, [this.ctx]) : true;
+      const enabled = await this.isActionEnabled(action);
 
       if (fn && enabled) {
         fn.apply(this, [opts, [], { $route: this.$route }]);
@@ -393,7 +394,25 @@ export default {
       }
 
       return null;
-    }
+    },
+
+    async updateExtensionActionsEnabled() {
+      for (const [i, action] of this.extensionHeaderActions.entries()) {
+        this.extensionActionsEnabled[i] = await this.isActionEnabled(action);
+      }
+    },
+
+    async isActionEnabled(action) {
+      if (action.enabled === undefined) {
+        return true;
+      }
+
+      if (typeof action.enabled === 'function') {
+        return await action.enabled(this.ctx);
+      }
+
+      return action.enabled;
+    },
   }
 };
 </script>
@@ -404,7 +423,7 @@ export default {
     data-testid="header"
   >
     <div>
-      <TopLevelMenu v-if="isRancherInHarvester || isMultiCluster || !isSingleProduct" />
+      <TopLevelMenu v-if="showTopLevelMenu" />
     </div>
 
     <div
@@ -475,7 +494,7 @@ export default {
             :alt="t('branding.logos.label')"
           />
           <div
-            v-if="!currentCluster"
+            v-if="!currentCluster && !$route.path.startsWith('/c/')"
             class="simple-title"
           >
             <BrandImage
@@ -642,7 +661,7 @@ export default {
           :key="`${action.label}${i}`"
           v-clean-tooltip="handleExtensionTooltip(action)"
           v-shortkey="action.shortcutKey"
-          :disabled="action.enabled ? !action.enabled(ctx) : false"
+          :disabled="!extensionActionsEnabled[i]"
           type="button"
           class="btn header-btn role-tertiary"
           :data-testid="`extension-header-action-${ action.labelKey || action.label }`"
@@ -837,11 +856,13 @@ export default {
 
     .product-name {
       font-size: 16px;
+      font-family: var(--title-font-family, unset); // Use the var if set, otherwise unset and use the font defined by the parent
     }
 
     .side-menu-logo {
       align-items: center;
       display: flex;
+      height: 55px;
       margin-right: 8px;
       max-width: 200px;
       padding: 12px 0;

package/components/nav/NamespaceFilter.vue

@@ -673,9 +673,16 @@ export default {
     },
 
     removeOption(ns, event) {
-      this.selectOption(ns);
       event.preventDefault();
       event.stopPropagation();
+
+      this.selectOption(ns);
+
+      if (event.type !== 'keydown' || this.value.length !== 0) {
+        return;
+      }
+
+      this.$refs.namespaceFilterInput.focus();
     },
 
     defaultOption() {
@@ -782,6 +789,7 @@ export default {
             ghost
             class="ns-chip-button"
             :data-testid="`namespaces-values-close-${j}`"
+            :aria-label="t('namespaceFilter.removeNamespace', { name: ns.label })"
             @click="removeOption(ns, $event)"
             @keydown.enter.space.stop="removeOption(ns, $event)"
             @mousedown="handleValueMouseDown(ns, $event)"
@@ -951,6 +959,10 @@ export default {
     display: inline-block;
     border-radius: var(--border-radius);
 
+    &:focus, &.focused {
+      @include focus-outline;
+    }
+
     .ns-glass {
       top: 0;
       bottom: 0;

package/components/nav/NotificationCenter/index.vue

@@ -13,7 +13,8 @@ import {
 } from '@components/RcDropdown';
 
 const store = useStore();
-const allNotifications = computed(() => store.getters['notifications/all']);
+// We don't want any hidden notifications showing in the notification center (these are shown elsewhere, e.g. home page dynamic content announcements)
+const allNotifications = computed(() => store.getters['notifications/visible']);
 const unreadLevelClass = computed(() => {
   return store.getters['notifications/unreadCount'] === 0 ? '' : 'unread';
 });

package/components/nav/TopLevelMenu.helper.ts

@@ -28,6 +28,7 @@ interface UpdateArgs {
   searchTerm: string,
   pinnedIds: string[],
   unPinnedMax?: number,
+  forceWatch?: boolean
 }
 
 type MgmtCluster = {
@@ -192,9 +193,12 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     this.clustersOthersWrapper = new PaginationWrapper({
       $store,
       id:       'tlm-unpinned-clusters',
-      onChange: async() => {
+      onChange: async({ forceWatch }) => {
         if (this.args) {
-          await this.update(this.args);
+          await this.update({
+            ...this.args,
+            forceWatch
+          });
         }
       },
       enabledFor: {
@@ -210,9 +214,12 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     this.provClusterWrapper = new PaginationWrapper({
       $store,
       id:       'tlm-prov-clusters',
-      onChange: async() => {
+      onChange: async({ forceWatch }) => {
         if (this.args) {
-          await this.update(this.args);
+          await this.update({
+            ...this.args,
+            forceWatch
+          });
         }
       },
       enabledFor: {
@@ -244,7 +251,7 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
       pinned: MgmtCluster[],
       notPinned: MgmtCluster[]
     } = await allHash(promises) as any;
-    const provClusters = await this.updateProvCluster(res.notPinned, res.pinned);
+    const provClusters = await this.updateProvCluster(res.notPinned, res.pinned, args.forceWatch || false);
     const provClustersByMgmtId = provClusters.reduce((res: { [mgmtId: string]: ProvCluster}, provCluster: ProvCluster) => {
       if (provCluster.mgmtClusterId) {
         res[provCluster.mgmtClusterId] = provCluster;
@@ -340,6 +347,7 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     }
 
     return this.clustersPinnedWrapper.request({
+      forceWatch: args.forceWatch,
       pagination: {
         filters: this.constructParams({
           pinnedIds:     args.pinnedIds,
@@ -357,6 +365,7 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
    */
   private async updateOthers(args: UpdateArgs): Promise<MgmtCluster[]> {
     return this.clustersOthersWrapper.request({
+      forceWatch: args.forceWatch,
       pagination: {
         filters: this.constructParams({
           searchTerm:        args.searchTerm,
@@ -375,8 +384,9 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
   /**
    * Find all provisioning clusters associated with the displayed mgmt clusters
    */
-  private async updateProvCluster(notPinned: MgmtCluster[], pinned: MgmtCluster[]): Promise<ProvCluster[]> {
+  private async updateProvCluster(notPinned: MgmtCluster[], pinned: MgmtCluster[], forceWatch: boolean): Promise<ProvCluster[]> {
     return this.provClusterWrapper.request({
+      forceWatch,
       pagination: {
         filters: [
           PaginationParamFilter.createMultipleFields(

package/components/nav/TopLevelMenu.vue

@@ -975,6 +975,8 @@ export default {
   $option-height: $icon-size + $option-padding + $option-padding;
 
   .side-menu {
+    font-family: var(--title-font-family, unset); // Use the var if set, otherwise unset and use the font defined by the parent
+
     .menu {
       position: absolute;
       width: $app-bar-collapsed-width;
@@ -1086,7 +1088,7 @@ export default {
         align-items: center;
         cursor: pointer;
         display: flex;
-        color: var(--link);
+        color: var(--on-tertiary, var(--link));
         font-size: 14px;
         height: $option-height;
         white-space: nowrap;
@@ -1177,7 +1179,7 @@ export default {
         .rancher-provider-icon,
         svg {
           margin-right: 16px;
-          fill: var(--link);
+          fill: var(--on-tertiary, var(--link));
         }
 
         .top-menu-icon {

package/components/{DraggableZone.vue → nav/WindowManager/PinArea.vue}

@@ -1,105 +1,71 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapState } from 'vuex';
+<script setup lang="ts">
+import { onMounted } from 'vue';
 import { BOTTOM, CENTER, LEFT, RIGHT } from '@shell/utils/position';
-
-type Zone = null | typeof CENTER | typeof RIGHT | typeof BOTTOM | typeof LEFT;
-
-export interface Drag {
-  active: boolean;
-  zone: Zone;
-}
-
-interface Data {
-  drag: Drag;
-}
-
-export default defineComponent({
-  data(): Data {
-    return {
-      drag: {
-        active: false,
-        zone:   CENTER,
-      },
-    };
-  },
-
-  computed: {
-
-    ...mapState('wm', ['userPin']),
-
-    pin: {
-      get(): Zone {
-        return this.userPin;
-      },
-
-      set(pin: Zone) {
-        if (pin === CENTER) {
-          return;
-        }
-        window.localStorage.setItem('wm-pin', pin as string);
-        this.$store.commit('wm/setUserPin', pin);
-      },
-    },
-
-  },
-
-  methods: {
-
-    onDragStart() {
-      this.drag.active = true;
-    },
-
-    onDragOver(event: DragEvent, zone: Zone) {
-      this.drag.zone = zone;
-      if (zone !== CENTER) {
-        event.preventDefault();
-      }
-    },
-
-    onDragEnd() {
-      this.pin = this.drag.zone;
-      this.drag = {
-        active: false,
-        zone:   CENTER,
-      };
-    },
-
-  }
+import useDragHandler from './composables/useDragHandler';
+import { Z_INDEX } from './constants';
+
+/**
+ * This component is responsible for rendering the pin area used during tab dragging.
+ *
+ * Behavior:
+ * - Enable drag areas for each position (left, right, bottom, center) when dragging is active.
+ * - Highlights the area where the tab can be pinned.
+ * - Uses z-index variables to ensure proper layering of drag areas.
+ */
+
+const {
+  dragOverPositionsActive, pin, pinArea, lockedPositions, onDragPositionOver
+} = useDragHandler();
+
+onMounted(() => {
+  Object.keys(Z_INDEX).forEach((key) => {
+    document.documentElement.style.setProperty(
+      `--drag-area-${ key.toLowerCase().replaceAll('_', '-') }-z-index`, (Z_INDEX as any)[key].toString()
+    );
+  });
 });
 </script>
 
 <template>
-  <div v-if="drag.active">
+  <div
+    v-if="dragOverPositionsActive"
+    class="pin-area-container"
+  >
     <span
-      v-if="drag.zone != pin"
+      v-if="pinArea != pin"
       class="pin-effect-area"
-      :class="drag.zone"
+      :class="pinArea"
     />
     <span
       class="drag-area center"
-      @dragover="onDragOver($event, 'center')"
+      @dragover="onDragPositionOver($event, CENTER)"
     />
     <span
+      v-if="!lockedPositions.includes(RIGHT)"
       class="drag-area right"
-      @dragover="onDragOver($event, 'right')"
+      @dragover="onDragPositionOver($event, RIGHT)"
     />
     <span
-      class="drag-area bottom"
-      @dragover="onDragOver($event, 'bottom')"
+      v-if="!lockedPositions.includes(LEFT)"
+      class="drag-area left"
+      @dragover="onDragPositionOver($event, LEFT)"
     />
     <span
-      class="drag-area left"
-      @dragover="onDragOver($event, 'left')"
+      v-if="!lockedPositions.includes(BOTTOM)"
+      class="drag-area bottom"
+      @dragover="onDragPositionOver($event, BOTTOM)"
     />
   </div>
 </template>
 
 <style lang='scss' scoped>
+  .pin-area-container {
+    display: contents;
+  }
 
   .pin-effect-area {
     position: absolute;
-    z-index: 997;
+    z-index: var(--drag-area-pin-effect-z-index);
     width: 0;
     height: 0;
     border-style: hidden;
@@ -142,10 +108,8 @@ export default defineComponent({
     }
   }
 
-  // ToDo make height and width as input variable
   .drag-area {
     position: absolute;
-    z-index: 999;
     width: 0;
     height: 0;
     opacity: 0;
@@ -155,7 +119,7 @@ export default defineComponent({
       right: 0;
       width: 100%;
       height: 100%;
-      z-index: 998;
+      z-index: var(--drag-area-center-z-index);
     }
 
     &.right {
@@ -163,6 +127,7 @@ export default defineComponent({
       right: 0;
       width: 300px;
       height: 100%;
+      z-index: var(--drag-area-right-z-index);
     }
 
     &.left {
@@ -170,12 +135,14 @@ export default defineComponent({
       left: 0;
       width: 300px;
       height: 100%;
+      z-index: var(--drag-area-left-z-index);
     }
 
     &.bottom {
       bottom: 0;
       height: 270px;
       width: 100%;
+      z-index: var(--drag-area-bottom-z-index);
     }
   }
 </style>

package/components/nav/WindowManager/composables/useComponentsMount.ts

@@ -0,0 +1,70 @@
+import {
+  ref,
+  markRaw,
+} from 'vue';
+import { useStore } from 'vuex';
+
+const warn = (msg: string, ...args: any[]) => {
+  console.warn(`[wm] ${ msg } ${ args?.reduce((acc, v) => `${ acc } '${ v }'`, '') }`); /* eslint-disable-line no-console */
+};
+
+/**
+ * This composable is responsible for loading the tabs body components.
+ *
+ * - It supports loading components from Rancher extensions as well as from the TypeMap (defined in shell/components/Window directory).
+ * - The component is cached after the first load to optimize performance.
+ *
+ * Loading a component from extension:
+ *
+ *   // Register the component in the extension index file:
+ *   plugin.register('component', 'TestComponent', defineAsyncComponent(() => import('./pages/TestComponent.vue')));
+ *
+ *   // Use the component in a tab by specifying its name and extensionId:
+ *   store.dispatch('wm/open', {
+ *     id:            PRODUCT_NAME,
+ *     extensionId:   PRODUCT_NAME,
+ *     label:         'Label',
+ *     component:     'TestComponent',
+ *     position:      'bottom',
+ *     layouts:       [
+ *       Layout.default,
+ *       Layout.home
+ *     ],
+ *     showHeader: false,
+ *   }, { root: true });
+ *
+ */
+
+export default () => {
+  const store = useStore();
+
+  const components = ref<any>({});
+
+  function loadComponent(tab: { component?: string, extensionId?: string }) {
+    const { component: name, extensionId } = tab || {};
+
+    if (!name) {
+      warn('component name not provided');
+
+      return null;
+    }
+
+    if (!components.value[name]) {
+      if (!!extensionId) {
+        warn(`loading component from extension`, name, extensionId);
+        components.value[name] = markRaw((store as any).$extension?.getDynamic('component', name));
+      } else if (store.getters['type-map/hasCustomWindowComponent'](name)) {
+        warn(`loading component from TypeMap`, name);
+        components.value[name] = markRaw(store.getters['type-map/importWindowComponent'](name));
+      }
+    }
+
+    if (!components.value[name]) {
+      warn(`component not found for`, name);
+    }
+
+    return components.value[name];
+  }
+
+  return { loadComponent };
+};

package/components/nav/WindowManager/composables/useDimensionsHandler.ts

@@ -0,0 +1,105 @@
+import { computed } from 'vue';
+import debounce from 'lodash/debounce';
+import { useStore } from 'vuex';
+import { BOTTOM, LEFT, RIGHT } from '@shell/utils/position';
+import { Position } from '@shell/types/window-manager';
+import { CSS_KEY } from '../constants';
+
+/**
+ * This composable is responsible for handling the dimensions of the window manager panels.
+ */
+export default (props: { position: Position }) => {
+  const store = useStore();
+
+  const height = computed({
+    get() {
+      const panelHeight = store.state.wm.panelHeight[props.position];
+
+      if (panelHeight) {
+        return panelHeight;
+      }
+
+      const windowHeight = window.innerHeight;
+      let height = panelHeight ? parseInt(panelHeight, 10) : 0;
+
+      if ( !height ) {
+        height = Math.round(windowHeight / 2);
+      }
+      height = Math.min(height, 3 * windowHeight / 4);
+
+      setDimensions({ height });
+
+      return height;
+    },
+
+    set(height) {
+      setDimensions({ height });
+    },
+  });
+
+  const width = computed({
+    get() {
+      const panelWidth = store.state.wm.panelWidth[props.position];
+
+      if (panelWidth) {
+        return panelWidth;
+      }
+
+      const windowWidth = window.innerWidth;
+      let width = panelWidth ? parseInt(panelWidth, 10) : 0;
+
+      if (!width) {
+        width = Math.round(windowWidth / 8);
+      }
+      width = Math.min(width, 3 * windowWidth / 4);
+
+      setDimensions({ width });
+
+      return width;
+    },
+    set(width) {
+      setDimensions({ width });
+    }
+  });
+
+  function openPanel(position: Position) {
+    setCssVariable(position, position === BOTTOM ? height.value : width.value);
+  }
+
+  function closePanel(position: Position) {
+    setCssVariable(position, 0);
+  }
+
+  function setDimensions(args: { width?: number, height?: number } = {}) {
+    const h = Number(args.height || height.value) || 0;
+    const w = Number(args.width || width.value) || 0;
+
+    switch (props.position) {
+    case RIGHT:
+    case LEFT:
+      setCssVariable(props.position, w);
+      debouncedSetPanelWidth(props.position, w);
+      break;
+    case BOTTOM:
+      setCssVariable(BOTTOM, h);
+      debouncedSetPanelHeight(props.position, h);
+      break;
+    }
+  }
+
+  const debouncedSetPanelWidth = debounce((position, width) => {
+    store.commit('wm/setPanelWidth', { position, width });
+  }, 250);
+
+  const debouncedSetPanelHeight = debounce((position, height) => {
+    store.commit('wm/setPanelHeight', { position, height });
+  }, 250);
+
+  function setCssVariable(position: Position, value: number) {
+    document.documentElement.style.setProperty(CSS_KEY[position as keyof typeof CSS_KEY], `${ value }px`);
+  }
+
+  return {
+    width, height, setDimensions, openPanel, closePanel,
+  };
+};