@rancher/shell 3.0.7 → 3.0.8-rc.2

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
     };
   },
 
@@ -252,6 +253,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 +370,7 @@ export default {
       });
     },
 
-    handleExtensionAction(action, event) {
+    async handleExtensionAction(action, event) {
       const fn = action.invoke;
       const opts = {
         event,
@@ -377,7 +379,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 +395,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>
@@ -642,7 +662,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 }`"
@@ -842,6 +862,7 @@ export default {
     .side-menu-logo {
       align-items: center;
       display: flex;
+      height: 55px;
       margin-right: 8px;
       max-width: 200px;
       padding: 12px 0;

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,
+  };
+};

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

@@ -0,0 +1,99 @@
+import { useStore } from 'vuex';
+import { Position, Tab } from '@shell/types/window-manager';
+import { computed, ref } from 'vue';
+import { CENTER } from '@shell/utils/position';
+
+/**
+ * This composable is responsible for handling the drag-and-drop behavior of tabs within the window manager.
+ *
+ * dragOverPositionsActive: A reactive reference indicating whether a drag operation is currently over the position areas.
+ * pinArea: A reactive reference representing the current position area being hovered over during a drag operation.
+ *
+ * Both of these references are shared across all instances of this composable (used by Horizontal and Vertical Panels)
+ * to maintain consistent drag-and-drop state.
+ */
+
+const dragOverPositionsActive = ref(false);
+const pinArea = ref(CENTER as Position);
+
+export default (props?: { position: Position }) => {
+  const store = useStore();
+
+  const lockedPositions = computed(() => (store.state.wm.lockedPositions || []) as Position[]);
+  const lockedPosition = computed(() => props?.position ? lockedPositions.value.includes(props.position) : false);
+
+  const pin = computed({
+    get(): Position {
+      return store.state.wm.userPin;
+    },
+    set(pin: Position) {
+      if (pin !== CENTER) {
+        store.commit('wm/setUserPin', pin);
+      }
+    },
+  });
+
+  const dragOverTabBarActive = ref(false);
+
+  function onDragPositionStart(value: { event: DragEvent, tab: Tab }) {
+    value.event.dataTransfer?.setData('application/json', JSON.stringify({
+      position: value.tab.position,
+      tabId:    value.tab.id
+    }));
+    dragOverPositionsActive.value = true;
+    dragOverTabBarActive.value = true;
+  }
+
+  function onDragPositionOver(event: DragEvent, position: Position) {
+    pinArea.value = position;
+    if (position !== CENTER) {
+      event.preventDefault();
+    }
+  }
+
+  function onDragPositionEnd(value: { event: DragEvent, tab: Tab }) {
+    pin.value = pinArea.value;
+    if (pinArea.value !== CENTER) {
+      store.commit('wm/switchTab', { tabId: value.tab.id, targetPosition: pinArea.value });
+    }
+    dragOverPositionsActive.value = false;
+    pinArea.value = CENTER;
+  }
+
+  function onTabBarDragOver(event: DragEvent) {
+    dragOverTabBarActive.value = true;
+    event.preventDefault();
+  }
+
+  function onTabBarDragLeave() {
+    dragOverTabBarActive.value = false;
+  }
+
+  function onTabBarDrop(event: DragEvent) {
+    dragOverTabBarActive.value = false;
+    const data = event.dataTransfer?.getData('application/json');
+
+    if (data) {
+      const { tabId } = JSON.parse(data);
+
+      store.commit('wm/switchTab', { tabId, targetPosition: props?.position });
+    } else {
+      console.warn('No data found in drag event'); // eslint-disable-line no-console
+    }
+  }
+
+  return {
+    dragOverPositionsActive,
+    dragOverTabBarActive,
+    pinArea,
+    pin,
+    lockedPositions,
+    lockedPosition,
+    onTabBarDragOver,
+    onTabBarDragLeave,
+    onTabBarDrop,
+    onDragPositionStart,
+    onDragPositionOver,
+    onDragPositionEnd
+  };
+};

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

@@ -0,0 +1,72 @@
+import { computed, onMounted, onBeforeUnmount } from 'vue';
+import { useStore } from 'vuex';
+import { Position, Tab } from '@shell/types/window-manager';
+import useResizeHandler from '../composables/useResizeHandler';
+import useDimensionsHandler from '../composables/useDimensionsHandler';
+import useDragHandler from '../composables/useDragHandler';
+import useTabsHandler from '../composables/useTabsHandler';
+
+/**
+ * This composable is responsible for managing the state and behavior of the window manager panel.
+ */
+export default (props: { position: Position }) => {
+  const store = useStore();
+
+  const tabs = computed(() => store.getters['wm/tabs'].filter((t: Tab) => t.position === props.position));
+
+  const isTabsHeaderEnabled = computed(() => tabs.value.every((t: Tab) => t.showHeader));
+
+  const {
+    activeTab, setTabActive, onTabReady, onTabClose, onPanelClose
+  } = useTabsHandler();
+
+  const {
+    height, width, setDimensions, openPanel, closePanel
+  } = useDimensionsHandler({ position: props.position });
+
+  const {
+    mouseResizeYStart, keyboardResizeY, mouseResizeXStart, keyboardResizeX
+  } = useResizeHandler({ position: props.position, setDimensions });
+
+  const {
+    dragOverPositionsActive,
+    dragOverTabBarActive,
+    onTabBarDragOver,
+    onTabBarDragLeave,
+    onTabBarDrop,
+    onDragPositionStart,
+    onDragPositionEnd,
+    lockedPosition
+  } = useDragHandler({ position: props.position });
+
+  onMounted(() => openPanel(props.position));
+
+  onBeforeUnmount(() => {
+    closePanel(props.position);
+    onPanelClose(props.position);
+  });
+
+  return {
+    tabs,
+    activeTab,
+    isTabsHeaderEnabled,
+    height,
+    width,
+    dragOverPositionsActive,
+    dragOverTabBarActive,
+    setTabActive,
+    onTabReady,
+    onTabClose,
+    onPanelClose,
+    mouseResizeXStart,
+    mouseResizeYStart,
+    keyboardResizeX,
+    keyboardResizeY,
+    onTabBarDragOver,
+    onTabBarDragLeave,
+    onTabBarDrop,
+    onDragPositionStart,
+    onDragPositionEnd,
+    lockedPosition
+  };
+};

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

@@ -0,0 +1,14 @@
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import { Layout, Position, Tab } from '@shell/types/window-manager';
+
+export default (props?: { positions: Position[], layout: Layout }) => {
+  const store = useStore();
+
+  const isPanelEnabled = computed(() => (props?.positions || []).reduce((acc, pos) => ({
+    ...acc,
+    [pos]: store.state.wm.open[pos] && !store.state.wm.tabs.find((t: Tab) => !t.layouts.includes(props?.layout || Layout.default) && t.position === pos),
+  }), {} as Record<Position, boolean>));
+
+  return { isPanelEnabled };
+};