@rancher/shell 3.0.4 → 3.0.5-rc.2

package/components/PromptModal.vue

@@ -13,12 +13,15 @@ export default {
   components: { AppModal },
 
   data() {
-    return { opened: false, backgroundClosing: null };
+    return {
+      opened:            false,
+      backgroundClosing: null,
+      componentRendered: false
+    };
   },
 
   computed: {
     ...mapState('action-menu', ['showModal', 'modalData']),
-
     resources() {
       let resources = this.modalData?.resources;
 
@@ -28,11 +31,28 @@ export default {
 
       return resources || [];
     },
-
+    testId() {
+      return this.modalData?.testId || 'prompt-modal-generic-testid';
+    },
+    returnFocusSelector() {
+      return this.modalData?.returnFocusSelector || undefined;
+    },
+    returnFocusFirstIterableNodeSelector() {
+      return this.modalData?.returnFocusFirstIterableNodeSelector || undefined;
+    },
     modalWidth() {
       // property set from workload.js to overwrite modal default width of 600px, with fallback value as well
       return this.modalData?.modalWidth || '600px';
     },
+    customClass() {
+      return this.modalData?.customClass || undefined;
+    },
+    styles() {
+      return this.modalData?.styles || undefined;
+    },
+    height() {
+      return this.modalData?.height || undefined;
+    },
     component() {
       // Looks for a dialog component by looking up in plugins and @shell/dialog/${name}.
       return this.$store.getters['type-map/importDialog'](this.modalData?.component);
@@ -48,27 +68,36 @@ export default {
     },
     closeOnClickOutside() {
       return this.modalData?.closeOnClickOutside;
+    },
+    modalName() {
+      return this.modalData?.modalName;
     }
   },
 
   watch: {
     showModal(show) {
       this.opened = show;
-    },
+    }
   },
 
   methods: {
-    close() {
+    onSlotComponentMounted() {
+      // variable for the watcher based focus-trap
+      // so that we know when the component is rendered
+      this.componentRendered = true;
+    },
+    close(data) {
       if (!this.opened) {
         return;
       }
 
       this.errors = [];
-      this.$store.commit('action-menu/togglePromptModal');
+      this.$store.commit('action-menu/togglePromptModal', data);
       if (this.backgroundClosing) {
         this.backgroundClosing();
       }
 
+      this.componentRendered = false;
       this.opened = false;
     },
 
@@ -83,16 +112,26 @@ export default {
 <template>
   <app-modal
     v-if="opened && component"
+    :name="modalName"
     :click-to-close="closeOnClickOutside"
     :width="modalWidth"
-    @close="close()"
+    :data-testid="testId"
+    :custom-class="customClass"
+    :styles="styles"
+    :height="height"
+    :trigger-focus-trap="true"
+    :return-focus-selector="returnFocusSelector"
+    :return-focus-first-iterable-node-selector="returnFocusFirstIterableNodeSelector"
+    :focus-trap-watcher-based-variable="componentRendered"
+    @close="close"
   >
     <component
       v-bind="modalData.componentProps || {}"
       :is="component"
       :resources="resources"
       :register-background-closing="registerBackgroundClosing"
-      @close="close()"
+      @vue:mounted="onSlotComponentMounted"
+      @close="close"
     />
   </app-modal>
 </template>

package/components/PromptRemove.vue

@@ -339,6 +339,7 @@ export default {
     :width="400"
     height="auto"
     styles="max-height: 100vh;"
+    :trigger-focus-trap="true"
     @close="close"
   >
     <Card

package/components/PromptRestore.vue

@@ -213,6 +213,7 @@ export default {
     styles="background-color: var(--nav-bg); border-radius: var(--border-radius); max-height: 100vh;"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
     @close="close"
   >
     <Card

package/components/ResourceCancelModal.vue

@@ -56,6 +56,7 @@ export default {
     name="cancel-modal"
     :width="440"
     height="auto"
+    :trigger-focus-trap="true"
     @close="cancelCancel"
   >
     <div class="header">

package/components/ResourceDetail/Masthead.vue

@@ -13,6 +13,9 @@ import {
 import { ExtensionPoint, PanelLocation } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel';
 import TabTitle from '@shell/components/TabTitle';
+import ActionMenu from '@shell/components/ActionMenuShell.vue';
+import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
+import { useStore } from 'vuex';
 
 // i18n-uses resourceDetail.header.*
 
@@ -26,7 +29,12 @@ export default {
   name: 'MastheadResourceDetail',
 
   components: {
-    BadgeState, Banner, ButtonGroup, ExtensionPanel, TabTitle
+    BadgeState,
+    Banner,
+    ButtonGroup,
+    ExtensionPanel,
+    TabTitle,
+    ActionMenu,
   },
   props: {
     value: {
@@ -92,6 +100,13 @@ export default {
     }
   },
 
+  setup() {
+    const store = useStore();
+    const { featureDropdownMenu } = useRuntimeFlag(store);
+
+    return { featureDropdownMenu };
+  },
+
   data() {
     return {
       DETAIL_VIEW:       _DETAIL,
@@ -561,17 +576,28 @@ export default {
               class="mr-10"
             />
 
-            <button
-              v-if="isView"
-              ref="actions"
-              data-testid="masthead-action-menu"
-              aria-haspopup="true"
-              type="button"
-              class="btn role-multi-action actions"
-              @click="showActions"
-            >
-              <i class="icon icon-actions" />
-            </button>
+            <template v-if="featureDropdownMenu">
+              <ActionMenu
+                v-if="isView"
+                button-role="multiAction"
+                button-size="compact"
+                :resource="value"
+                data-testid="masthead-action-menu"
+              />
+            </template>
+            <template v-else>
+              <button
+                v-if="isView"
+                ref="actions"
+                data-testid="masthead-action-menu"
+                aria-haspopup="true"
+                type="button"
+                class="btn role-multi-action actions"
+                @click="showActions"
+              >
+                <i class="icon icon-actions" />
+              </button>
+            </template>
           </div>
         </div>
       </slot>

package/components/ResourceDetail/__tests__/Masthead.test.ts

@@ -1,6 +1,7 @@
 import { mount, RouterLinkStub } from '@vue/test-utils';
 import { _VIEW } from '@shell/config/query-params';
 import Masthead from '@shell/components/ResourceDetail/Masthead.vue';
+import { createStore } from 'vuex';
 
 const mockedStore = () => {
   return {
@@ -17,12 +18,15 @@ const mockedStore = () => {
 };
 
 const requiredSetup = () => {
+  const store = createStore({ getters: { 'management/byId': () => jest.fn() } });
+
   return {
     stubs: {
       'router-link': RouterLinkStub,
       LiveDate:      true
     },
-    mocks: { $store: mockedStore() }
+    provide: { store },
+    mocks:   { $store: mockedStore() }
   };
 };
 

package/components/ResourceDetail/index.vue

@@ -384,18 +384,7 @@ export default {
   },
 
   created() {
-    // eslint-disable-next-line prefer-const
-    const id = this.$route.params.id;
-    const resource = this.resourceOverride || this.$route.params.resource;
-    const options = this.$store.getters[`type-map/optionsFor`](resource);
-
-    const detailResource = options.resourceDetail || options.resource || resource;
-    const editResource = options.resourceEdit || options.resource || resource;
-
-    // FIXME: These aren't right... signature is (rawType, subType).. not (rawType, resourceId)
-    // Remove id? How does subtype get in (cluster/node)
-    this.detailComponent = this.$store.getters['type-map/importDetail'](detailResource, id);
-    this.editComponent = this.$store.getters['type-map/importEdit'](editResource, id);
+    this.configureResource();
   },
 
   methods: {
@@ -414,6 +403,51 @@ export default {
     closeError(index) {
       this.errors = this.errors.filter((_, i) => i !== index);
     },
+    /**
+     * Initializes the resource components based on the provided user and
+     * resource override.
+     *
+     * Configures the detail and edit components for a resource based on the
+     * user's ID and the specified resource.
+     *
+     * @param {Object} user - The user object containing user-specific
+     * information.
+     * @param {string|null} resourceOverride - An optional resource override
+     * string. If not provided, the method will use the default resource from
+     * the route parameters or the instance's resourceOverride property.
+     */
+    configureResource(userId = '', resourceOverride = null) {
+      const id = userId || this.$route.params.id;
+      const resource = resourceOverride || this.resourceOverride || this.$route.params.resource;
+      const options = this.$store.getters[`type-map/optionsFor`](resource);
+
+      const detailResource = options.resourceDetail || options.resource || resource;
+      const editResource = options.resourceEdit || options.resource || resource;
+
+      // FIXME: These aren't right... signature is (rawType, subType).. not (rawType, resourceId)
+      // Remove id? How does subtype get in (cluster/node)
+      this.detailComponent = this.$store.getters['type-map/importDetail'](detailResource, id);
+      this.editComponent = this.$store.getters['type-map/importEdit'](editResource, id);
+    },
+    /**
+     * Sets the mode and initializes the resource components.
+     *
+     * This method sets the mode of the component and configures the resource
+     * components based on the provided user and resource.
+     *
+     * @param {Object} payload - An object containing the mode, user, and
+     * resource properties.
+     * @param {string} payload.mode - The mode to set.
+     * @param {Object} payload.user - The user object containing user-specific
+     * information.
+     * @param {string} payload.resource - The resource string to use for
+     * initialization.
+     */
+    setMode({ mode, userId, resource }) {
+      this.mode = mode;
+      this.value.id = userId;
+      this.configureResource(userId, resource);
+    }
   }
 };
 </script>
@@ -491,6 +525,7 @@ export default {
       :real-mode="realMode"
       :class="{'flex-content': flexContent}"
       @update:value="$emit('input', $event)"
+      @update:mode="setMode"
       @set-subtype="setSubtype"
     />
 

package/components/ResourceTable.vue

@@ -77,11 +77,6 @@ export default {
       default: null,
     },
 
-    groupBy: {
-      type:    String,
-      default: null
-    },
-
     namespaced: {
       type:    Boolean,
       default: null, // Automatic from schema
@@ -117,11 +112,35 @@ export default {
       default: true,
     },
 
+    /**
+     * Field to group rows by, row[groupBy] must be something that can be a map key
+     */
+    groupBy: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Override any product based group options
+     */
+    groupOptions: {
+      type:    Array,
+      default: null
+    },
+
     groupable: {
       type:    Boolean,
       default: null, // Null: auto based on namespaced and type custom groupings
     },
 
+    /**
+     * If the current preference for group isn't applicable, or not set, use this instead
+     */
+    groupDefault: {
+      type:    String,
+      default: DEFAULT_GROUP,
+    },
+
     groupTooltip: {
       type:    String,
       default: 'resourceTable.groupBy.namespace',
@@ -189,10 +208,6 @@ export default {
       default: null, // Default comes from the user preference
     },
 
-    hideGroupingControls: {
-      type:    Boolean,
-      default: false
-    }
   },
 
   data() {
@@ -328,8 +343,18 @@ export default {
       // If we are grouping by a custom group, it may specify that we hide a specific column
       const custom = this._listGroupMapped?.[this.group];
 
+      let hideColumn;
+
       if (custom?.hideColumn) {
-        const idx = headers.findIndex((header) => header.name === custom.hideColumn);
+        hideColumn = custom.hideColumn;
+      } else {
+        const componentCustom = this.groupOptions?.find((go) => go.value === this.group);
+
+        hideColumn = componentCustom?.hideColumn;
+      }
+
+      if (hideColumn) {
+        const idx = headers.findIndex((header) => header.name === hideColumn);
 
         if ( idx >= 0 ) {
           headers.splice(idx, 1);
@@ -388,17 +413,17 @@ export default {
     group: {
       get() {
         // Check group is valid
-        const exists = this.groupOptions.find((g) => g.value === this._group);
+        const exists = this._groupOptions.find((g) => g.value === this._group);
 
         if (!exists) {
           // Attempt to find the default option in available options...
           // if not use the first value in the options collection...
           // and if not that just fall back to the default
-          if (this.groupOptions.find((g) => g.value === DEFAULT_GROUP)) {
-            return DEFAULT_GROUP;
+          if (this._groupOptions.find((g) => g.value === this.groupDefault)) {
+            return this.groupDefault;
           }
 
-          return this.groupOptions[0]?.value || DEFAULT_GROUP;
+          return this._groupOptions[0]?.value || this.groupDefault || DEFAULT_GROUP;
         }
 
         return this._group;
@@ -413,7 +438,7 @@ export default {
         const namespaceGroupable = this.$store.getters['isMultipleNamespaces'] && this.isNamespaced;
         const customGroupable = !!this.options?.listGroups?.length;
 
-        return namespaceGroupable || customGroupable;
+        return namespaceGroupable || customGroupable || this.groupOptions?.length;
       }
 
       return this.groupable || false;
@@ -442,10 +467,20 @@ export default {
         return custom.field;
       }
 
+      const componentCustom = this.groupOptions?.find((go) => go.value === this.group);
+
+      if (componentCustom?.field) {
+        return componentCustom.field;
+      }
+
       return null;
     },
 
-    groupOptions() {
+    _groupOptions() {
+      if (this.groupOptions) {
+        return this.groupOptions;
+      }
+
       // Ignore the defaults below, we have an override set of groups
       // REPLACE (instead of SUPPLEMENT) defaults with listGroups (given listGroupsWillOverride is true)
       if (this.options?.listGroupsWillOverride && !!this.options?.listGroups?.length) {
@@ -569,7 +604,7 @@ export default {
     :alt-loading="altLoading"
     :group-by="computedGroupBy"
     :group="group"
-    :group-options="groupOptions"
+    :group-options="_groupOptions"
     :search="search"
     :paging="true"
     :paging-params="parsedPagingParams"
@@ -596,14 +631,14 @@ export default {
     @enter="handleEnterKeyPress"
   >
     <template
-      v-if="!hideGroupingControls && showGrouping"
+      v-if="showGrouping && _groupOptions.length > 1"
       #header-middle
     >
       <slot name="more-header-middle" />
 
       <ButtonGroup
         v-model:value="group"
-        :options="groupOptions"
+        :options="_groupOptions"
       />
     </template>
 

package/components/SideNav.vue

@@ -394,7 +394,11 @@ export default {
 </script>
 
 <template>
-  <nav class="side-nav">
+  <nav
+    class="side-nav"
+    role="navigation"
+    :aria-label="t('nav.ariaLabel.sideNav')"
+  >
     <!-- Actual nav -->
     <div class="nav">
       <template

package/components/SlideInPanelManager.vue

@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+const HEADER_HEIGHT = 55;
+
+const store = useStore();
+const isOpen = computed(() => store.getters['slideInPanel/isOpen']);
+const currentComponent = computed(() => store.getters['slideInPanel/component']);
+const currentProps = computed(() => store.getters['slideInPanel/componentProps']);
+
+const panelTop = computed(() => {
+  const banner = document.getElementById('banner-header');
+  let height = HEADER_HEIGHT;
+
+  if (banner) {
+    height += banner.clientHeight;
+  }
+
+  return `${ height }px`;
+});
+
+const panelHeight = computed(() => `calc(100vh - ${ panelTop?.value })`);
+const panelWidth = computed(() => currentProps?.value?.width || '33%');
+const panelRight = computed(() => (isOpen?.value ? '0' : `-${ panelWidth?.value }`));
+
+const panelTitle = computed(() => currentProps?.value?.title || 'Details');
+
+function closePanel() {
+  store.commit('slideInPanel/close');
+}
+</script>
+
+<template>
+  <Teleport to="#slides">
+    <div id="slide-in-panel-manager">
+      <div
+        v-show="isOpen"
+        data-testid="slide-in-glass"
+        class="slide-in-glass"
+        :class="{ 'slide-in-glass-open': isOpen }"
+        @click="closePanel"
+      />
+      <div
+        class="slide-in"
+        :class="{ 'slide-in-open': isOpen }"
+        :style="{ width: panelWidth, right: panelRight, top: panelTop, height: panelHeight }"
+      >
+        <div class="header">
+          <div class="title">
+            {{ panelTitle }}
+          </div>
+          <i
+            class="icon icon-close"
+            data-testid="slide-in-close"
+            :trigger-focus-trap="true"
+            tabindex="0"
+            @click="closePanel"
+          />
+        </div>
+        <div class="main-panel">
+          <component
+            :is="currentComponent"
+            v-if="isOpen || currentComponent"
+            v-bind="currentProps"
+            data-testid="slide-in-panel-component"
+            class="dynamic-panel-content"
+          />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style lang="scss" scoped>
+.slide-in-glass {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+}
+.slide-in-glass-open {
+  background-color: var(--body-bg);
+  display: block;
+  opacity: 0.5;
+  z-index: 1000;
+}
+
+.slide-in {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  z-index: 2000;
+  transition: right 0.5s ease;
+  border-left: 1px solid var(--border);
+  background-color: var(--body-bg);
+}
+
+.slide-in-open {
+  right: 0;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  border-bottom: 1px solid var(--border);
+
+  .title {
+    flex: 1;
+    font-weight: bold;
+  }
+
+  .icon-close {
+    cursor: pointer;
+  }
+}
+
+.main-panel {
+  padding: 10px;
+  overflow: auto;
+}
+</style>

package/components/SortableTable/THead.vue

@@ -259,10 +259,13 @@ export default {
             v-clean-tooltip="tooltip(col)"
             class="content"
           >
-            <span v-clean-html="labelFor(col)" />
+            <span
+              v-clean-html="labelFor(col)"
+              class="text-no-break"
+            />
             <span
               v-if="col.subLabel"
-              class="text-muted"
+              class="text-muted text-no-break"
             >
               {{ col.subLabel }}
             </span>

package/components/SortableTable/actions.js

@@ -1,7 +1,7 @@
 import debounce from 'lodash/debounce';
 
 // Use a visible display type to reduce flickering
-const displayType = 'inline-block';
+const displayType = 'inline-flex';
 
 export default {