Window Manager enhancements #15464

torchiaf · 2025-09-17T17:09:49Z

Summary

Technical notes summary

It adds the multiple side windows and tabs dragging support.

Areas or cases that should be tested

Usage

  this.$store.dispatch('wm/open', {
    id:         `kubectl-console-id`,
    label:      'Kubectl',
    icon:       'terminal',
    component:  'KubectlShell',
    attrs:      {},
    position:   'right',
    layouts:    ['default', 'home'], // the layouts where we want to show the side windows 
    showHeader: true, // Header can be disabled
  }, { root: true });
  
  // tabs dragging and default pin can be locked by position 
  this.$store.commit('wm/setLockedPositions', ['right', 'bottom', 'left']);

Areas which could experience regressions

Screenshot/Video

Screencast.from.2025-10-06.09-58-04.webm

Checklist

The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
The PR has a Milestone
The PR template has been filled out
The PR has been self reviewed
The PR has a reviewer assigned
The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes
The PR has been reviewed in terms of Accessibility

torchiaf · 2025-09-23T15:35:33Z

shell/components/nav/SecondarySideWindow.vue

@@ -0,0 +1,291 @@
+<script lang="ts" setup>


Core changes are here. It adds the new side window

torchiaf · 2025-09-23T15:36:06Z

shell/config/store.js

      '../store/type-map.js',
      '../store/uiplugins.ts',
-      '../store/wm.js',
+      '../store/wm/index.js',


Core changes are here. It adds the new wm/secondary store.

torchiaf · 2025-09-23T15:37:08Z

shell/utils/dynamic-importer.js


 export function resolveWindowComponent(key) {
-  return require.resolve(`@shell/components/nav/WindowManager/${ key }`);
+  return require.resolve(`@shell/components/Console/${ key }`);


Decoupling Kubectl components from Primary window

I'd suggest using Window rather than Console - this is the auto-import of Vue components that can be shown in the window manager, I don't think its specifically console.

shell/components/DraggableZone.vue

shell/components/nav/SecondarySideWindow.vue

rak-phillip

I left another round of comments. One thing to note with regards to accessibility - we will need to ensure that focus is set to an element within the secondary panel when it is opened.

shell/components/nav/Header.vue

shell/components/nav/SecondarySideWindow.vue

rak-phillip · 2025-09-30T21:55:20Z

shell/components/nav/SecondarySideWindow.vue

+  // This should work at tab level, not global
+  // if (!!component.value || componentName.value === name) {
+  //   _warn(`component is already loaded`, name, extensionId);
+
+  //   return;
+  // }


nit: remove commented code

nwmac · 2025-10-01T11:10:23Z

I think we could do this with less change.

My thoughts on what we should do:

Have the notion of Horizontal and Vertical panels, managed by a window manager.
Horizontal panel is pinned to the bottom of the browser window, Vertical is pinned to the right-hand side
The API for opening a window with the window manager takes an optional arg of which panel to open in - by default, it will open in the bottom, horizontal panel.
(future) Windows can be moved between the horizontal and vertical panels

Not sure about renaming 'wm' to 'console' - I think the term 'console' is perhaps to specific.

nwmac · 2025-10-01T11:14:14Z

shell/models/management.cattle.io.cluster.js

    this.$dispatch('wm/open', {
      id:        `kubectl-${ this.id }`,
-      label:     this.$rootGetters['i18n/t']('wm.kubectlShell.title', { name: this.nameDisplay }),
+      label:     this.$rootGetters['i18n/t']('console.kubectlShell.title', { name: this.nameDisplay }),


I think keeping wm is fine - rather than console.

nwmac · 2025-10-01T11:14:52Z

shell/components/templates/default.vue

        @dragend="$refs.draggableZone.onDragEnd($event)"
      >
-        <WindowManager @draggable="draggable=$event" />
+        <PrimarySideWindow @draggable="draggable=$event" />


I'd suggest naming HorizontalWindowManager

nwmac · 2025-10-01T11:14:59Z

shell/components/templates/default.vue

-        <WindowManager @draggable="draggable=$event" />
+        <PrimarySideWindow @draggable="draggable=$event" />
      </div>
+      <SecondarySideWindow />


I'd suggest naming VerticalWindowManager

nwmac · 2025-10-01T11:16:01Z

Also, I'd be okay with disabling the window dragging for now (if that helps keep this simpler) and bringing it back when we re-factor to a cleaner single window manager.

- Decouple PrimarySideWindow from Console components - code refactoring - use Composition APIs - Extensions API - handle async enabling actions - Improve PrimarySideWindow resize - Add grab cursor to primary window Signed-off-by: Francesco Torchia <[email protected]>

torchiaf · 2025-10-06T07:52:28Z

@nwmac @rak-phillip I decided to re-implement the WindowManager functionality to fully support multiple windows and tabs dragging.
I also updated the description with new enhancements notes, please take a look.

rak-phillip

There is a distinct change in behavior now. The previous implementation would allow dragging all tabs together to pin the entire group - this allowed for inactive tabs to be a drag target.

The new implementation allows individual tabs to be pinned to different areas, but only the active tab can be dragged.

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

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

rak-phillip · 2025-10-21T22:02:24Z

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

+      }
+      height = Math.min(height, 3 * windowHeight / 4);
+
+      setDimensions({ height });


Getters should be side-effect free. Both getters for width and height will commit a mutation. Perhaps, it would be better to initialize dimensions using the mounted hook or some other mechanism.

I agree, this is mostly legacy code and it needs to be cleaned up.
However, the logic there is a bit complex, so I would leave this kind of refactoring for later to avoid the risk of breaking the set-dimensions behavior, if you are fine with that.

Yes, let's create a new issue so we can follow up and address in a separate PR. This will also help to manage the scope of this change as well.

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

shell/store/wm.ts

Signed-off-by: Francesco Torchia <[email protected]>

rak-phillip

LGTM - The dragging functionality looks good and I think it's an overall improvement, especially with regards to flexibility.

torchiaf requested review from nwmac and rak-phillip September 17, 2025 17:09

rancher-ui-project-bot bot assigned torchiaf Sep 17, 2025

torchiaf mentioned this pull request Sep 17, 2025

Add Config page, routing and Chat action button rancher/rancher-ai-ui#2

Merged

torchiaf force-pushed the extensions-window-manager-api branch 2 times, most recently from 57e26e2 to 6705638 Compare September 19, 2025 14:58

torchiaf marked this pull request as ready for review September 23, 2025 14:32

torchiaf added this to the v2.13.0 milestone Sep 23, 2025

torchiaf force-pushed the extensions-window-manager-api branch from 00ef10e to 43968c5 Compare September 23, 2025 15:00

torchiaf commented Sep 23, 2025

View reviewed changes

rak-phillip reviewed Sep 23, 2025

View reviewed changes

torchiaf requested a review from rak-phillip September 26, 2025 08:31

torchiaf mentioned this pull request Sep 26, 2025

Implement Chat rancher/rancher-ai-ui#4

Closed

rak-phillip reviewed Sep 30, 2025

View reviewed changes

nwmac reviewed Oct 1, 2025

View reviewed changes

torchiaf force-pushed the extensions-window-manager-api branch from cd44c23 to 3b9ee62 Compare October 2, 2025 10:17

torchiaf added 6 commits October 6, 2025 09:37

Add layouts options

28e0d38

Support showHeader option

e4be63c

Fix dimensions handler

e024c67

Support lock windows option

5ff0d0b

Fix switch tabs and code refactoring

3e33d8e

torchiaf force-pushed the extensions-window-manager-api branch from 34dc648 to 3e33d8e Compare October 6, 2025 07:46

torchiaf requested review from nwmac and rak-phillip October 6, 2025 08:00

torchiaf changed the title ~~Secondary side panel~~ Window Manager enhancements Oct 6, 2025

torchiaf force-pushed the extensions-window-manager-api branch 3 times, most recently from 60b7150 to ac9f77c Compare October 6, 2025 11:33

Add window-manager type def

7d17f89

torchiaf force-pushed the extensions-window-manager-api branch from ac9f77c to 7d17f89 Compare October 6, 2025 11:46

rak-phillip reviewed Oct 21, 2025

View reviewed changes

Document Window Manager system

dbd4ca5

Signed-off-by: Francesco Torchia <[email protected]>

torchiaf requested a review from rak-phillip October 23, 2025 10:16

rak-phillip approved these changes Oct 23, 2025

View reviewed changes

torchiaf merged commit 3f81db4 into rancher:master Oct 24, 2025
36 checks passed

Window Manager enhancements #15464

Window Manager enhancements #15464

Uh oh!

Conversation

torchiaf commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Technical notes summary

Areas or cases that should be tested

Areas which could experience regressions

Screenshot/Video

Checklist

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rak-phillip left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nwmac commented Oct 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nwmac commented Oct 1, 2025

Uh oh!

torchiaf commented Oct 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rak-phillip left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

rak-phillip left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

torchiaf commented Sep 17, 2025 •

edited

Loading

nwmac commented Oct 1, 2025 •

edited

Loading

torchiaf commented Oct 6, 2025 •

edited

Loading