@rancher/shell 3.0.7 → 3.0.8-rc.2

package/components/nav/WindowManager/panels/HorizontalPanel.vue

@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { BOTTOM } from '@shell/utils/position';
+import { Position } from '@shell/types/window-manager';
+import TabBodyContainer from './TabBodyContainer.vue';
+import usePanelHandler from '../composables/usePanelHandler';
+
+const props = defineProps({
+  position: {
+    type:    String as PropType<Position>,
+    default: BOTTOM,
+  },
+});
+
+const {
+  tabs,
+  activeTab,
+  isTabsHeaderEnabled,
+  dragOverPositionsActive,
+  dragOverTabBarActive,
+  setTabActive,
+  onTabReady,
+  onTabClose,
+  mouseResizeYStart,
+  keyboardResizeY,
+  onTabBarDragOver,
+  onTabBarDragLeave,
+  onTabBarDrop,
+  onDragPositionStart,
+  onDragPositionEnd,
+  lockedPosition,
+} = usePanelHandler({ position: props.position });
+</script>
+
+<template>
+  <div
+    id="horizontal-window-manager"
+    data-testid="horizontal-window-manager"
+    class="horizontal-window-manager wm"
+    :class="{
+      'drag-start': dragOverPositionsActive,
+      'drag-end': !dragOverPositionsActive,
+      'tabs-header-enabled': isTabsHeaderEnabled,
+    }"
+  >
+    <div
+      v-if="isTabsHeaderEnabled"
+      :class="['tabs', { 'tab-bar-highlight': dragOverTabBarActive }]"
+      role="tablist"
+      @dragover="onTabBarDragOver"
+      @dragleave="onTabBarDragLeave"
+      @drop="onTabBarDrop"
+    >
+      <div
+        v-for="(tab, i) in tabs"
+        :key="i"
+        class="tab"
+        :class="{
+          'active': tab.id === activeTab[props.position],
+          'draggable': !lockedPosition,
+        }"
+        :draggable="tab.id === activeTab[props.position] && !lockedPosition"
+        role="tab"
+        :aria-selected="tab.id === activeTab[props.position]"
+        :aria-label="tab.label"
+        :aria-controls="`panel-${tab.id}`"
+        tabindex="0"
+        @click="setTabActive({ position: props.position, id: tab.id })"
+        @keyup.enter.space="setTabActive({ position: props.position, id: tab.id })"
+        @dragstart="onDragPositionStart({ event: $event, tab })"
+        @dragend="onDragPositionEnd({ event: $event, tab })"
+      >
+        <i
+          v-if="tab.icon"
+          class="icon"
+          :class="{
+            ['icon-'+ tab.icon]: true,
+          }"
+          :alt="t('wm.tabIcon')"
+        />
+        <span
+          class="tab-label"
+        >
+          {{ tab.label }}
+        </span>
+        <i
+          data-testid="wm-tab-close-button"
+          class="closer icon icon-x wm-closer-button"
+          :alt="t('wm.closeTab', { tabId: tab.label })"
+          tabindex="0"
+          :aria-label="t('wm.closeTab', { tabId: tab.id })"
+          @click.stop="onTabClose(tab.id)"
+          @keyup.enter.space.stop="onTabClose(tab.id)"
+        />
+      </div>
+      <div
+        class="resizer resizer-y"
+        role="button"
+        tabindex="0"
+        :aria-label="t('wm.resize', {arrow1: 'up', arrow2: 'down'})"
+        aria-expanded="true"
+        @mousedown.prevent.stop="mouseResizeYStart($event)"
+        @touchstart.prevent.stop="mouseResizeYStart($event)"
+        @keyup.up.prevent.stop="keyboardResizeY(true)"
+        @keyup.down.prevent.stop="keyboardResizeY(false)"
+      >
+        <i
+          class="icon icon-sort"
+          :alt="t('wm.resize', {arrow1: 'up', arrow2: 'down'})"
+        />
+      </div>
+    </div>
+    <TabBodyContainer
+      v-for="tab in tabs"
+      v-show="tab.id === activeTab[props.position]"
+      :id="tab.id"
+      :key="`${ props.position }-${ tab.id }`"
+      :position="props.position"
+      @ready="onTabReady({ tab, containerId: $event })"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .horizontal-window-manager {
+    display: grid;
+    // z-index: var(--drag-area-wm-z-index);
+
+    grid-template-areas:
+      "body";
+    grid-template-rows: auto;
+
+    &.tabs-header-enabled {
+      grid-template-areas:
+        "tabs"
+        "body";
+
+      grid-template-rows: var(--wm-tab-height) auto;
+    }
+
+    &.vm {
+      height: var(--wm-height, 0);
+    }
+
+    .tabs, .body {
+      max-width: 100%;
+    }
+
+    .tabs {
+      grid-area: tabs;
+      background-color: var(--wm-tabs-bg);
+      border-top: 1px solid var(--wm-border);
+      border-bottom: 1px solid var(--wm-border);
+
+      display: flex;
+      align-content: stretch;
+
+      .tab {
+        cursor: pointer;
+        user-select: none;
+        border-top: 1px solid var(--wm-border);
+        border-right: 1px solid var(--wm-border);
+        border-left: 1px solid var(--wm-border);
+        padding: 5px 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin: 0;
+        display: flex;
+        min-width: 0;
+
+        .tab-label {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        &.active {
+          position: relative;
+          background-color: var(--wm-body-bg);
+          outline: 1px solid var(--wm-body-bg);
+          z-index: 1;
+        }
+
+        &.draggable {
+          cursor: grab;
+        }
+
+        &:focus-visible {
+          @include focus-outline;
+          outline-offset: -3px;
+        }
+
+        .closer {
+          margin-left: 5px;
+          border: 1px solid var(--body-text);
+          border-radius: var(--border-radius);
+          line-height: 12px;
+          font-size: 10px;
+          width: 14px;
+          align-self: center;
+          display: flex;
+          justify-content: center;
+          cursor: pointer;
+
+          &:hover {
+            border-color: var(--link-border);
+            color: var(--link-border);
+          }
+
+          &:focus-visible {
+            @include focus-outline;
+            outline-offset: 1px;
+          }
+        }
+      }
+
+      .resizer {
+        width: var(--wm-tab-height);
+        padding: 0 5px;
+        margin: 0 0 0 1px;
+        text-align: center;
+        border-left: 1px solid var(--wm-border);
+        border-right: 1px solid var(--wm-border);
+        line-height: var(--wm-tab-height);
+        height: calc(var(--wm-tab-height) + 1px);
+        flex-grow: 0;
+
+        &:hover {
+          background-color: var(--wm-closer-hover-bg);
+        }
+      }
+
+      .resizer-y {
+        cursor: ns-resize;
+      }
+    }
+
+    .body {
+      grid-area: body;
+      background-color: var(--wm-body-bg);
+      display: none;
+      overflow: hidden;
+
+      &.active {
+        display: block;
+        height: 100%;
+      }
+    }
+  }
+
+  .drag-start {
+    z-index: var(--drag-area-wm-z-index);
+    opacity: 0.5;
+    transition: opacity .3s ease;
+  }
+
+  .drag-end {
+    opacity: 1;
+  }
+
+  .tab-bar-highlight {
+    transition: height .5s ease;
+    background-image: linear-gradient(to top, var(--drag-over-inner-bg), var(--drag-over-outer-bg));
+    border-style: dashed hidden hidden hidden;
+  }
+</style>

package/components/nav/WindowManager/panels/TabBodyContainer.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    :id="contentId"
+    class="body active teleport-target"
+    role="tabpanel"
+  />
+</template>
+
+<script setup>
+import { onMounted, defineProps, defineEmits } from 'vue';
+
+/**
+ * This component serves as a container for the body of a tab within a window manager panel.
+ *
+ * Props:
+ * - id: The unique identifier for the tab.
+ * - position: The position of the panel (e.g., left, right, bottom).
+ *
+ * Behavior:
+ * - On mounting, it emits a 'ready' event with the generated content ID for the tab body.
+ *   This is necessary for teleporting the tab content to the correct location in the DOM, ONLY when the body container DIV is mounted.
+ */
+const props = defineProps({
+  id: {
+    type:     String,
+    required: true
+  },
+  position: {
+    type:     String,
+    required: true
+  }
+});
+
+const emit = defineEmits(['ready']);
+
+const contentId = `wm-panel-body-${ props.position }-${ props.id.replace(/[^a-zA-Z0-9_-]/g, '-') }`;
+
+onMounted(() => emit('ready', contentId));
+</script>

package/components/nav/WindowManager/panels/VerticalPanel.vue

@@ -0,0 +1,308 @@
+<script setup lang="ts">
+import { RIGHT, LEFT } from '@shell/utils/position';
+import { PropType } from 'vue';
+import { Position } from '@shell/types/window-manager';
+import TabBodyContainer from './TabBodyContainer.vue';
+import usePanelHandler from '../composables/usePanelHandler';
+
+const props = defineProps({
+  position: {
+    type:    String as PropType<Position>,
+    default: RIGHT,
+  },
+});
+
+const {
+  tabs,
+  activeTab,
+  isTabsHeaderEnabled,
+  dragOverPositionsActive,
+  dragOverTabBarActive,
+  setTabActive,
+  onTabReady,
+  onTabClose,
+  mouseResizeXStart,
+  keyboardResizeX,
+  lockedPosition,
+  onTabBarDragOver,
+  onTabBarDragLeave,
+  onTabBarDrop,
+  onDragPositionStart,
+  onDragPositionEnd,
+} = usePanelHandler({ position: props.position });
+</script>
+
+<template>
+  <div
+    id="vertical-window-manager"
+    data-testid="vertical-window-manager"
+    class="vertical-window-manager"
+    :class="{
+      'wm-vr': props.position === RIGHT,
+      'wm-vl': props.position === LEFT,
+      'drag-start': dragOverPositionsActive,
+      'drag-end': !dragOverPositionsActive,
+      'tabs-header-enabled': isTabsHeaderEnabled,
+    }"
+  >
+    <div
+      v-if="isTabsHeaderEnabled"
+      :class="[
+        'tabs',
+        {
+          'tab-bar-highlight': dragOverTabBarActive,
+          'resizer-left': props.position === LEFT,
+        }
+      ]"
+      role="tablist"
+      @dragover="onTabBarDragOver"
+      @dragleave="onTabBarDragLeave"
+      @drop="onTabBarDrop"
+    >
+      <div
+        v-if="props.position === RIGHT"
+        class="resizer resizer-x"
+        role="button"
+        tabindex="0"
+        :aria-label="t('wm.resize', {arrow1: 'left', arrow2: 'right'})"
+        aria-expanded="true"
+        @mousedown.prevent.stop="mouseResizeXStart($event)"
+        @touchstart.prevent.stop="mouseResizeXStart($event)"
+        @keyup.left.prevent.stop="keyboardResizeX(true)"
+        @keyup.right.prevent.stop="keyboardResizeX(false)"
+      >
+        <i
+          class="icon icon-code"
+          :alt="t('wm.resize', {arrow1: 'left', arrow2: 'right'})"
+        />
+      </div>
+      <div
+        v-for="(tab, i) in tabs"
+        :key="i"
+        class="tab"
+        :class="{
+          'active': tab.id === activeTab[props.position],
+          'draggable': !lockedPosition,
+        }"
+        :draggable="tab.id === activeTab[props.position] && !lockedPosition"
+        role="tab"
+        :aria-selected="tab.id === activeTab[props.position]"
+        :aria-label="tab.label"
+        :aria-controls="`panel-${tab.id}`"
+        tabindex="0"
+        @click="setTabActive({ position: props.position, id: tab.id })"
+        @keyup.enter.space="setTabActive({ position: props.position, id: tab.id })"
+        @dragstart="onDragPositionStart({ event: $event, tab })"
+        @dragend="onDragPositionEnd({ event: $event, tab })"
+      >
+        <i
+          v-if="tab.icon"
+          class="icon"
+          :class="{
+            ['icon-'+ tab.icon]: true,
+          }"
+          :alt="t('wm.tabIcon')"
+        />
+        <span
+          class="tab-label"
+        >
+          {{ tab.label }}
+        </span>
+        <i
+          data-testid="wm-tab-close-button"
+          class="closer icon icon-x wm-closer-button"
+          :alt="t('wm.closeTab', { tabId: tab.label })"
+          tabindex="0"
+          :aria-label="t('wm.closeTab', { tabId: tab.id })"
+          @click.stop="onTabClose(tab.id)"
+          @keyup.enter.space.stop="onTabClose(tab.id)"
+        />
+      </div>
+      <div
+        v-if="props.position === LEFT"
+        class="resizer resizer-x resizer-align-right"
+        role="button"
+        tabindex="0"
+        :aria-label="t('wm.resize', {arrow1: 'left', arrow2: 'right'})"
+        aria-expanded="true"
+        @mousedown.prevent.stop="mouseResizeXStart($event)"
+        @touchstart.prevent.stop="mouseResizeXStart($event)"
+        @keyup.left.prevent.stop="keyboardResizeX(true)"
+        @keyup.right.prevent.stop="keyboardResizeX(false)"
+      >
+        <i
+          class="icon icon-code"
+          :alt="t('wm.resize', {arrow1: 'left', arrow2: 'right'})"
+        />
+      </div>
+    </div>
+    <TabBodyContainer
+      v-for="tab in tabs"
+      v-show="tab.id === activeTab[props.position]"
+      :id="tab.id"
+      :key="`${ props.position }-${ tab.id }`"
+      :position="props.position"
+      @ready="onTabReady({ tab, containerId: $event })"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .vertical-window-manager {
+    display: grid;
+    // z-index: var(--drag-area-wm-z-index);
+
+    grid-template-areas:
+      "body";
+    grid-template-rows: auto;
+
+    &.tabs-header-enabled {
+      grid-template-areas:
+        "tabs"
+        "body";
+
+      grid-template-rows: var(--wm-tab-height) auto;
+    }
+
+    &.wm-vr {
+      width: var(--wm-vr-width, 0);
+      border-left: var(--nav-border-size) solid var(--nav-border);
+    }
+
+    &.wm-vl {
+      width: var(--wm-vl-width, 0);
+      border-right: var(--nav-border-size) solid var(--nav-border);
+    }
+
+    .tabs, .body {
+      max-width: 100%;
+    }
+
+    .tabs {
+      grid-area: tabs;
+      background-color: var(--wm-tabs-bg);
+      border-top: 1px solid var(--wm-border);
+      border-bottom: 1px solid var(--wm-border);
+
+      display: flex;
+      align-content: stretch;
+
+      .tab {
+        cursor: pointer;
+        user-select: none;
+        border-top: 1px solid var(--wm-border);
+        border-right: 1px solid var(--wm-border);
+        border-left: 1px solid var(--wm-border);
+        padding: 5px 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin: 0;
+        display: flex;
+        min-width: 0;
+
+        .tab-label {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        &.active {
+          position: relative;
+          background-color: var(--wm-body-bg);
+          outline: 1px solid var(--wm-body-bg);
+          z-index: 1;
+        }
+
+        &.draggable {
+          cursor: grab;
+        }
+
+        &:focus-visible {
+          @include focus-outline;
+          outline-offset: -3px;
+        }
+
+        .closer {
+          margin-left: 5px;
+          border: 1px solid var(--body-text);
+          border-radius: var(--border-radius);
+          line-height: 12px;
+          font-size: 10px;
+          width: 14px;
+          align-self: center;
+          display: flex;
+          justify-content: center;
+          cursor: pointer;
+
+          &:hover {
+            border-color: var(--link-border);
+            color: var(--link-border);
+          }
+
+          &:focus-visible {
+            @include focus-outline;
+            outline-offset: 1px;
+          }
+        }
+      }
+
+      .resizer {
+        width: var(--wm-tab-height);
+        padding: 0 5px;
+        margin: 0 0 0 1px;
+        text-align: center;
+        border-left: 1px solid var(--wm-border);
+        border-right: 1px solid var(--wm-border);
+        line-height: var(--wm-tab-height);
+        height: calc(var(--wm-tab-height) + 1px);
+        flex-grow: 0;
+
+        &:hover {
+          background-color: var(--wm-closer-hover-bg);
+        }
+      }
+
+      .resizer-x {
+        cursor: col-resize;
+      }
+
+      .resizer-align-right {
+        margin-left: auto;
+      }
+
+      &.resizer-left {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+    }
+
+    .body {
+      grid-area: body;
+      background-color: var(--wm-body-bg);
+      display: none;
+      overflow: hidden;
+
+      &.active {
+        display: block;
+        height: 100%;
+      }
+    }
+  }
+
+  .drag-start {
+    z-index: var(--drag-area-wm-z-index);
+    opacity: 0.5;
+    transition: opacity .3s ease;
+  }
+
+  .drag-end {
+    opacity: 1;
+  }
+
+  .tab-bar-highlight {
+    transition: height .5s ease;
+    background-image: linear-gradient(to top, var(--drag-over-inner-bg), var(--drag-over-outer-bg));
+    border-style: dashed hidden hidden hidden;
+  }
+
+</style>

package/components/templates/default.vue

@@ -19,14 +19,13 @@ import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
-import DraggableZone from '@shell/components/DraggableZone';
 import { MANAGEMENT } from '@shell/config/types';
 import { markSeenReleaseNotes } from '@shell/utils/version';
 import PageHeaderActions from '@shell/mixins/page-actions';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import { getClusterFromRoute, getProductFromRoute } from '@shell/utils/router';
-import { BOTTOM } from '@shell/utils/position';
 import SideNav from '@shell/components/SideNav';
+import { Layout } from '@shell/types/window-manager';
 
 const SET_LOGIN_ACTION = 'set-as-login';
 
@@ -45,7 +44,6 @@ export default {
     FixedBanner,
     AwsComplianceBanner,
     AzureWarning,
-    DraggableZone,
     Inactivity,
     SideNav,
   },
@@ -55,11 +53,9 @@ export default {
   // Note - This will not run on route change
   data() {
     return {
+      layout:           Layout.default,
       noLocaleShortcut: process.env.dev || false,
       wantNavSync:      false,
-      unwatchPin:       undefined,
-      wmPin:            null,
-      draggable:        false,
     };
   },
 
@@ -108,25 +104,6 @@ export default {
       return this.clusterReady &&
         this.clusterId === getClusterFromRoute(this.$route) && routeReady;
     },
-
-    pinClass() {
-      return `pin-${ this.wmPin }`;
-    },
-
-  },
-
-  mounted() {
-    this.wmPin = window.localStorage.getItem('wm-pin') || BOTTOM;
-
-    // two-way binding this.wmPin <-> draggableZone.pin
-    this.$refs.draggableZone.pin = this.wmPin;
-    this.unwatchPin = this.$watch('$refs.draggableZone.pin', (pin) => {
-      this.wmPin = pin;
-    });
-  },
-
-  unmounted() {
-    this.unwatchPin();
   },
 
   methods: {
@@ -190,7 +167,7 @@ export default {
     <div
       v-if="managementReady"
       class="dashboard-content"
-      :class="{[pinClass]: true, 'dashboard-padding-left': showTopLevelMenu}"
+      :class="{'dashboard-padding-left': showTopLevelMenu}"
     >
       <Header />
       <SideNav
@@ -245,24 +222,11 @@ export default {
           class="outlet"
         />
       </main>
-      <div
-        v-if="$refs.draggableZone"
-        class="wm"
-        :class="{
-          'drag-end': !$refs.draggableZone.drag.active,
-          'drag-start': $refs.draggableZone.drag.active,
-        }"
-        :draggable="draggable"
-        @dragstart="$refs.draggableZone.onDragStart($event)"
-        @dragend="$refs.draggableZone.onDragEnd($event)"
-      >
-        <WindowManager @draggable="draggable=$event" />
-      </div>
+      <WindowManager :layout="layout" />
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
     <SlideInPanelManager />
     <Inactivity />
-    <DraggableZone ref="draggableZone" />
   </div>
 </template>