@rancher/shell 3.0.8-rc.1 → 3.0.8-rc.2

package/assets/styles/global/_layout.scss

@@ -71,6 +71,13 @@ HEADER {
   flex: 1 1 auto;
   min-height: 0px;
 
+  grid-template-areas:
+    "header  header  header  header"
+    "wm-vl    nav     main   wm-vr"
+    "wm-vl    wm       wm    wm-vr";
+  grid-template-rows: var(--header-height) auto var(--wm-height, 0px);
+  grid-template-columns: var(--wm-vl-width, 0px) var(--nav-width) auto var(--wm-vr-width, 0px);
+
   &.dashboard-padding-left {
     padding-left: $app-bar-collapsed-width;
 
@@ -79,31 +86,6 @@ HEADER {
     }
   }
 
-  &.pin-right {
-    grid-template-areas:
-      "header  header  header"
-      "nav      main     wm";
-    grid-template-rows: var(--header-height) auto;
-    grid-template-columns: var(--nav-width) auto var(--wm-width, 0px);
-  }
-
-  &.pin-bottom {
-    grid-template-areas:
-      "header  header"
-      "nav       main"
-      "wm         wm";
-    grid-template-rows: var(--header-height) auto var(--wm-height, 0px);
-    grid-template-columns: var(--nav-width) auto;
-  }
-
-  &.pin-left {
-    grid-template-areas:
-      "header  header  header"
-      "wm       nav     main";
-    grid-template-rows: var(--header-height) auto;
-    grid-template-columns: var(--wm-width, 0px) var(--nav-width) auto;
-  }
-
   >HEADER {
     grid-area: header;
   }
@@ -120,6 +102,20 @@ HEADER {
   position: relative;
 }
 
+.wm-vr {
+  grid-area: wm-vr;
+  overflow-y: hidden;
+  z-index: z-index('windowsManager');
+  position: relative;
+}
+
+.wm-vl {
+  grid-area: wm-vl;
+  overflow-y: hidden;
+  z-index: z-index('windowsManager');
+  position: relative;
+}
+
 .localeSelector {
   :deep(.v-popper__inner) {
     padding: 50px 0;
@@ -153,14 +149,4 @@ HEADER {
   }
 }
 
-.drag-start {
-  z-index: 1000;
-  opacity: 0.5;
-  transition: opacity .3s ease;
-}
-
-.drag-end {
-  opacity: 1;
-}
-
 // !END

package/assets/translations/en-us.yaml

@@ -370,9 +370,7 @@ layouts:
   unauthenticated: unauthenticated layout
   logout: logout layout
   verify: verify layout
-
-windowmanager:
-  closeTab: Close tab {tabId}
+  
 about:
   title: About
   versions:
@@ -5226,6 +5224,8 @@ plugins:
     third-party: This Extension is provided by a Third-Party
     built-in: This Extension is built-in
     image: This Extension Image has been loaded manually
+  tooltips:
+    installing: Installing...
   error:
     title: Error loading extension
     message: Could not load extension code
@@ -7078,7 +7078,15 @@ wizard:
   install: Install
   upgrade: Upgrade
   downgrade: Downgrade
+
+sideWindow:
+  secondary:
+    resize: Resize secondary window
+
 wm:
+  resize: Resize Window - use arrow keys {arrow1} and {arrow2} to resize with keyboard
+  tabIcon: Window tab icon
+  closeTab: Close tab - {tabId}
   connection:
     connected: Connected
     connecting: Connecting…
@@ -7115,9 +7123,6 @@ wm:
     timestamps: Show Timestamps
     wrap: Wrap Lines
   containerShell:
-    resizeShellWindow: Resize Shell window - use arrow keys {arrow1} and {arrow2} to resize with keyboard
-    tabIcon: Shell tab icon
-    closeShellTab: Close Shell tab - {tab}
     escapeText: Press Shift+Escape to blur from terminal
     clear: Clear
     containerName: "Container: {label}"

package/components/EmberPage.vue

@@ -8,7 +8,7 @@ import { findEmberPage, clearEmberInactiveTimer, startEmberInactiveTimer, EMBER_
 
 const EMBER_FRAME_HIDE_CLASS = 'ember-iframe-hidden';
 const PAGE_CHECK_TIMEOUT = 30000;
-const WINDOW_MANAGER = 'windowmanager';
+const WINDOW_MANAGER = 'horizontal-window-manager';
 
 // Pages that we should intercept when loaded in the IFRAME and instead
 // navigate to a page in Cluster Dashboard

package/components/Resource/Detail/CopyToClipboard.vue

@@ -5,7 +5,7 @@ import { ref } from 'vue';
 import { useStore } from 'vuex';
 
 export interface Props {
-    value: string;
+  value: string;
 }
 
 const props = defineProps<Props>();

package/components/Resource/Detail/TitleBar/__tests__/index.test.ts

@@ -3,8 +3,6 @@ import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import { createStore } from 'vuex';
 
-jest.mock(`@shell/assets/images/icons/document.svg`, () => `@shell/assets/images/icons/document.svg`);
-
 describe('component: TitleBar/index', () => {
   const resourceTypeLabel = 'RESOURCE_TYPE_LABEL';
   const resourceTo = 'RESOURCE_TO';

package/components/Resource/Detail/TitleBar/index.vue

@@ -32,8 +32,6 @@ export interface TitleBarProps {
   actionMenuResource?: any;
   onShowConfiguration?: (returnFocusSelector: string) => void;
 }
-
-const showConfigurationIcon = require(`@shell/assets/images/icons/document.svg`);
 </script>
 
 <script setup lang="ts">
@@ -84,6 +82,7 @@ watch(
         </span>
         <BadgeState
           v-if="badge"
+          v-ui-context="{ store: store, icon: 'icon-folder', hookable: true, value: resource, tag: '__details-state', description: 'Details' }"
           class="badge-state"
           :color="badge.color"
           :label="badge.label"
@@ -99,11 +98,10 @@ watch(
           :aria-label="i18n.t('component.resource.detail.titleBar.ariaLabel.showConfiguration', { resource: resourceName })"
           @click="() => emit('show-configuration', showConfigurationReturnFocusSelector)"
         >
-          <img
-            :src="showConfigurationIcon"
-            class="mmr-3"
+          <i
+            class="icon icon-document"
             aria-hidden="true"
-          >
+          />
           {{ i18n.t('component.resource.detail.titleBar.showConfiguration') }}
         </RcButton>
         <ActionMenu
@@ -139,6 +137,12 @@ watch(
     position: relative;
   }
 
+  .icon-document {
+    width: 15px;
+    font-size: 16px;
+    margin-right: 10px;
+  }
+
   .show-configuration {
     margin-left: 16px;
   }

package/components/ResourceDetail/index.vue

@@ -430,6 +430,7 @@ export default {
     :is="showComponent"
     v-else-if="isFullPageOverride"
     v-model:value="value"
+    v-ui-context="{ icon: 'icon-folder', value: value.name, tag: value.kind?.toLowerCase(), description: value.kind }"
     v-bind="$data"
     :done-params="doneParams"
     :done-route="doneRoute"
@@ -446,6 +447,7 @@ export default {
   <div v-else>
     <Masthead
       v-if="showMasthead"
+      v-ui-context="{ icon: 'icon-folder', value: liveModel.name, tag: liveModel.kind?.toLowerCase(), description: liveModel.kind }"
       :resource="resourceType"
       :value="liveModel"
       :mode="mode"
@@ -499,6 +501,7 @@ export default {
       v-else
       ref="comp"
       v-model:value="value"
+      v-ui-context="{ icon: 'icon-folder', value: value.name, tag: value.kind?.toLowerCase(), description: value.kind }"
       v-bind="$data"
       :done-params="doneParams"
       :done-route="doneRoute"

package/components/SortableTable/index.vue

@@ -1474,6 +1474,7 @@ export default {
                     <td
                       v-show="!hasAdvancedFiltering || (hasAdvancedFiltering && col.col.isColVisible)"
                       :key="col.col.name"
+                      v-ui-context="col.col.name === 'state' ? { icon: 'icon-folder', hookable: true, value: row.row, tag: '__sortable-table-row', description: 'Row' } : undefined"
                       :data-title="col.col.label"
                       :data-testid="`sortable-cell-${ i }-${ j }`"
                       :align="col.col.align || 'left'"

package/components/{nav/WindowManager → Window}/ContainerLogs.vue

@@ -10,7 +10,7 @@ import AsyncButton from '@shell/components/AsyncButton';
 import Select from '@shell/components/form/Select';
 import VirtualList from 'vue3-virtual-scroll-list';
 import LogItem from '@shell/components/LogItem';
-import ContainerLogsActions from '@shell/components/nav/WindowManager/ContainerLogsActions.vue';
+import ContainerLogsActions from '@shell/components/Window/ContainerLogsActions.vue';
 import { shallowRef } from 'vue';
 import { useStore } from 'vuex';
 import { debounce } from 'lodash';

package/components/{nav/WindowManager → Window}/ContainerLogsActions.vue

@@ -49,6 +49,7 @@ defineEmits([
       <rc-dropdown-item-select
         :model-value="range"
         :options="rangeOptions"
+        :label="t('wm.containerLogs.range.label')"
         @select="$emit('toggleRange', $event)"
       />
       <rc-dropdown-item-checkbox

package/components/{nav/WindowManager → Window}/__tests__/ContainerLogs.test.ts

@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
-import ContainerLogs from '@shell/components/nav/WindowManager/ContainerLogs.vue';
+import ContainerLogs from '@shell/components/Window/ContainerLogs.vue';
 import { base64Encode } from '@shell/utils/crypto';
 import { Buffer } from 'buffer';
 import { addEventListener } from '@shell/utils/socket';

package/components/{nav/WindowManager → Window}/__tests__/ContainerShell.test.ts

@@ -1,9 +1,9 @@
 import { flushPromises, mount, Wrapper } from '@vue/test-utils';
-import ContainerShell from '@shell/components/nav/WindowManager/ContainerShell.vue';
+import ContainerShell from '@shell/components/Window/ContainerShell.vue';
 import Socket, {
   addEventListener, EVENT_CONNECTED, EVENT_CONNECTING, EVENT_DISCONNECTED, EVENT_MESSAGE, EVENT_CONNECT_ERROR
 } from '@shell/utils/socket';
-import Window from '@shell/components/nav/WindowManager/Window.vue';
+import Window from '@shell/components/Window/Window.vue';
 
 jest.mock('@shell/utils/socket');
 jest.mock('@shell/utils/crypto', () => {

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 }`"

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