Merge pull request #17475 from rancher/gha-portpr-25312186428-1

[backport v2.14.2] Fix window manager

Author: torchiaf

shell/components/nav/WindowManager/index.vue

@@ -36,7 +36,7 @@ const props = defineProps({
 
 const { loadComponent } = useComponentsMount();
 
-const { isPanelEnabled } = usePanelsHandler({ layout: props.layout, positions: props.positions });
+const { isPanelEnabled } = usePanelsHandler(props);
 const { tabs } = useTabsHandler();
 </script>
 
@@ -66,6 +66,7 @@ const { tabs } = useTabsHandler();
         :active="true"
         :height="tab.containerHeight"
         :width="tab.containerWidth"
+        :layout="layout"
         v-bind="tab.attrs"
       />
     </keep-alive>

shell/components/templates/default.vue

@@ -9,7 +9,6 @@ import ActionMenu from '@shell/components/ActionMenu';
 import GrowlManager from '@shell/components/GrowlManager';
 import ModalManager from '@shell/components/ModalManager';
 import SlideInPanelManager from '@shell/components/SlideInPanelManager';
-import WindowManager from '@shell/components/nav/WindowManager';
 import PromptRemove from '@shell/components/PromptRemove';
 import PromptRestore from '@shell/components/PromptRestore';
 import PromptModal from '@shell/components/PromptModal';
@@ -39,7 +38,6 @@ export default {
     GrowlManager,
     ModalManager,
     SlideInPanelManager,
-    WindowManager,
     FixedBanner,
     AwsComplianceBanner,
     Inactivity,
@@ -48,10 +46,11 @@ export default {
 
   mixins: [PageHeaderActions, Brand, BrowserTabVisibility],
 
+  inject: ['notifyWmContainerReady'],
+
   // Note - This will not run on route change
   data() {
     return {
-      layout:           Layout.default,
       noLocaleShortcut: process.env.dev || false,
       wantNavSync:      false,
     };
@@ -104,6 +103,10 @@ export default {
     },
   },
 
+  mounted() {
+    this.notifyWmContainerReady(Layout.default);
+  },
+
   methods: {
 
     handlePageAction(action) {
@@ -219,7 +222,12 @@ export default {
           class="outlet"
         />
       </main>
-      <WindowManager :layout="layout" />
+      <!-- Teleport target for WindowManager (unique per layout) -->
+      <!-- display: contents makes child panels become grid items of the parent grid -->
+      <div
+        id="wm-container-default"
+        style="display: contents;"
+      />
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />

shell/components/templates/home.vue

@@ -11,7 +11,6 @@ import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import Inactivity from '@shell/components/Inactivity';
 import { mapState, mapGetters } from 'vuex';
 import PromptModal from '@shell/components/PromptModal';
-import WindowManager from '@shell/components/nav/WindowManager';
 import { Layout } from '@shell/types/window-manager';
 
 export default {
@@ -25,14 +24,14 @@ export default {
     AwsComplianceBanner,
     Inactivity,
     PromptModal,
-    WindowManager
   },
 
   mixins: [Brand, BrowserTabVisibility],
 
+  inject: ['notifyWmContainerReady'],
+
   data() {
     return {
-      layout:           Layout.home,
       // Assume home pages have routes where the name is the key to use for string lookup
       name:             this.$route.name,
       noLocaleShortcut: process.env.dev || false,
@@ -45,6 +44,10 @@ export default {
     ...mapGetters(['showTopLevelMenu']),
   },
 
+  mounted() {
+    this.notifyWmContainerReady(Layout.home);
+  },
+
   methods: {
     toggleTheme() {
       this.$store.dispatch('prefs/toggleTheme');
@@ -82,7 +85,12 @@ export default {
           class="outlet"
         />
       </main>
-      <WindowManager :layout="layout" />
+      <!-- Teleport target for WindowManager (unique per layout) -->
+      <!-- display: contents makes child panels become grid items of the parent grid -->
+      <div
+        id="wm-container-home"
+        style="display: contents;"
+      />
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
@@ -125,27 +133,6 @@ export default {
     }
   }
 
-  .wm {
-    grid-area: wm;
-    overflow-y: hidden;
-    z-index: z-index('windowsManager');
-    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;
-  }
-
   MAIN {
     grid-area: main;
     overflow: auto;

shell/components/templates/plain.vue

@@ -14,7 +14,6 @@ import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import Inactivity from '@shell/components/Inactivity';
 import { mapGetters } from 'vuex';
 import PromptModal from '@shell/components/PromptModal';
-import WindowManager from '@shell/components/nav/WindowManager';
 import { Layout } from '@shell/types/window-manager';
 
 export default {
@@ -31,17 +30,17 @@ export default {
     SlideInPanelManager,
     AwsComplianceBanner,
     Inactivity,
-    WindowManager
   },
 
   mixins: [Brand, BrowserTabVisibility],
 
+  inject: ['notifyWmContainerReady'],
+
   data() {
     return {
       // Assume home pages have routes where the name is the key to use for string lookup
       name:             this.$route.name,
-      noLocaleShortcut: process.env.dev || false,
-      layout:           Layout.plain,
+      noLocaleShortcut: process.env.dev || false
     };
   },
 
@@ -50,6 +49,10 @@ export default {
     ...mapGetters(['showTopLevelMenu']),
   },
 
+  mounted() {
+    this.notifyWmContainerReady(Layout.plain);
+  },
+
   methods: {
     toggleTheme() {
       this.$store.dispatch('prefs/toggleTheme');
@@ -98,7 +101,12 @@ export default {
           @shortkey="toggleNoneLocale()"
         />
       </main>
-      <WindowManager :layout="layout" />
+      <!-- Teleport target for WindowManager (unique per layout) -->
+      <!-- display: contents makes child panels become grid items of the parent grid -->
+      <div
+        id="wm-container-plain"
+        style="display: contents;"
+      />
     </div>
 
     <FixedBanner :footer="true" />
@@ -130,27 +138,6 @@ export default {
     }
   }
 
-  .wm {
-    grid-area: wm;
-    overflow-y: hidden;
-    z-index: z-index('windowsManager');
-    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;
-  }
-
   MAIN {
     grid-area: main;
     overflow: auto;

shell/initialize/App.vue

@@ -1,10 +1,16 @@
 <script>
 import GlobalLoading from '@shell/components/nav/GlobalLoading.vue';
+import WindowManager from '@shell/components/nav/WindowManager';
 
 import '@shell/assets/styles/app.scss';
 
 export default {
-  data: () => ({ isOnline: true }),
+  data() {
+    return {
+      isOnline:      true,
+      currentLayout: null,
+    };
+  },
 
   created() {
     // add to window so we can listen when ready
@@ -36,6 +42,14 @@ export default {
     this.$loading = this.$refs.loading;
   },
 
+  provide() {
+    return {
+      notifyWmContainerReady: (layout) => {
+        this.currentLayout = layout;
+      }
+    };
+  },
+
   computed: {
     isOffline() {
       return !this.isOnline;
@@ -55,7 +69,10 @@ export default {
     },
   },
 
-  components: { GlobalLoading }
+  components: {
+    GlobalLoading,
+    WindowManager,
+  }
 };
 </script>
 <template>
@@ -65,6 +82,16 @@ export default {
       id="__layout"
     >
       <router-view />
+      <!--
+        WindowManager is teleported into each template's wm-container
+        This keeps a single instance that never re-mounts while appearing in each template
+      -->
+      <Teleport
+        v-if="currentLayout"
+        :to="`#wm-container-${currentLayout}`"
+      >
+        <WindowManager :layout="currentLayout" />
+      </Teleport>
     </div>
   </div>
 </template>