Window Manager enhancements

cypress/e2e/po/components/kubectl.po.ts

@@ -3,7 +3,7 @@ import jsyaml from 'js-yaml';
 
 export default class Kubectl extends ComponentPo {
   constructor() {
-    super('#windowmanager');
+    super('#horizontal-window-manager');
   }
 
   readonly kubeCommand: string = 'kubectl'

cypress/e2e/po/components/shell.po.ts

@@ -2,7 +2,7 @@ import ComponentPo from '@/cypress/e2e/po/components/component.po';
 
 export default class Shell extends ComponentPo {
   constructor() {
-    super('#windowmanager');
+    super('#horizontal-window-manager');
   }
 
   openTerminal() {

docusaurus/docs/internal/code-base-works/api-resources-and-schemas.md

@@ -55,7 +55,7 @@ And then a bunch of others:
 | index       | The root store, manages things like which cluster you're connected to and what namespaces should be shown        |
 | prefs       | User preferences                                                                                                 |
 | type-map    | Meta-information about all the k8s types that are available to the current user and how they should be displayed |
-| wm          | "Window manager" at the bottom of the screen for things like container shells and logs.                          |
+| wm          | "Window manager" to handle Primary and Secondary side windows.                                                   |
 
 
 Store objects are accessed in different ways, below are common ways they are referenced by models and components

docusaurus/docs/internal/code-base-works/directory-structure.md

@@ -57,9 +57,6 @@ Components in the PromptRemove folder are used to customize the removal prompt f
 ## l10n
 Extension translation strings are merged with those already present in `shell/assets/translations`. Translation strings with duplicate keys of those present in the relevant shell translation file will overwrite those shell translation strings _across the app_: be mindful if adding translation strings that are not explicitly scoped to your extension. Read more about translations [here](./on-screen-text-and-translations.md)
 
-## windowComponents
-Components in this folder can be used within `WindowManager` component, which relies on the `wm` vuex store.
-
 ## The rest
 The rest of the top level directories are mostly Nuxt directories that you can read about [here](https://nuxtjs.org/docs/directory-structure/nuxt). 
 

pkg/rancher-components/src/components/RcDropdown/RcDropdownItemSelect.vue

@@ -22,6 +22,10 @@ defineProps({
       return [];
     }
   },
+  label: {
+    type:    String,
+    default: ''
+  }
 });
 const emits = defineEmits(['click', 'select']);
 
@@ -55,7 +59,7 @@ const focusMenuItem = () => {
     <LabeledSelect
       ref="menuItemSelect"
       :value="modelValue"
-      :label="t('wm.containerLogs.range.label')"
+      :label="label"
       :options="options"
       :clearable="false"
       placement="top"

shell/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

shell/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:
@@ -6999,7 +6997,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…
@@ -7036,9 +7042,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}"

shell/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

shell/components/nav/WindowManager/ContainerLogs.vue → shell/components/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';

shell/components/nav/WindowManager/ContainerLogsActions.vue → shell/components/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

shell/components/nav/WindowManager/__tests__/ContainerLogs.test.ts → shell/components/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';

shell/components/nav/WindowManager/__tests__/ContainerShell.test.ts → shell/components/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', () => {

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