@rancher/shell 3.0.5-rc.3 → 3.0.5-rc.6

package/components/SlideInPanelManager.vue

@@ -1,15 +1,27 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, onBeforeUnmount, watch } from 'vue';
 import { useStore } from 'vuex';
+import {
+  DEFAULT_FOCUS_TRAP_OPTS,
+  useWatcherBasedSetupFocusTrapWithDestroyIncluded
+} from '@shell/composables/focusTrap';
+import { isEqual } from 'lodash';
+import { useRouter } from 'vue-router';
 
 const HEADER_HEIGHT = 55;
 
 const store = useStore();
 const isOpen = computed(() => store.getters['slideInPanel/isOpen']);
+const isClosing = computed(() => store.getters['slideInPanel/isClosing']);
 const currentComponent = computed(() => store.getters['slideInPanel/component']);
 const currentProps = computed(() => store.getters['slideInPanel/componentProps']);
 
 const panelTop = computed(() => {
+  // Some components like the ResourceDetailDrawer are designed to take up the full height of the viewport so we want to be able to specify the top.
+  if (currentProps?.value?.top) {
+    return currentProps?.value?.top;
+  }
+
   const banner = document.getElementById('banner-header');
   let height = HEADER_HEIGHT;
 
@@ -20,11 +32,93 @@ const panelTop = computed(() => {
   return `${ height }px`;
 });
 
-const panelHeight = computed(() => `calc(100vh - ${ panelTop?.value })`);
+// Some components like the ResourceDetailDrawer are designed to take up the full height of the viewport so we want to be able to specify the height.
+const panelHeight = computed(() => (currentProps?.value?.height) ? (currentProps?.value?.height) : `calc(100vh - ${ panelTop?.value })`);
 const panelWidth = computed(() => currentProps?.value?.width || '33%');
 const panelRight = computed(() => (isOpen?.value ? '0' : `-${ panelWidth?.value }`));
+const panelZIndex = computed(() => `${ (isOpen?.value ? 1 : 2) * (currentProps?.value?.zIndex ?? 1000) }`);
+
+const showHeader = computed(() => currentProps?.value?.showHeader ?? true);
+const panelTitle = showHeader.value ? computed(() => currentProps?.value?.title || 'Details') : null;
+const closeOnRouteChange = computed(() => {
+  const propsCloseOnRouteChange = currentProps?.value.closeOnRouteChange;
+
+  if (!propsCloseOnRouteChange) {
+    return ['name', 'params', 'hash', 'query'];
+  }
+
+  return propsCloseOnRouteChange;
+});
+const router = useRouter();
+
+watch(
+  /**
+   * trigger focus trap
+   */
+  () => currentProps?.value?.triggerFocusTrap,
+  (neu) => {
+    if (neu) {
+      const opts = {
+        ...DEFAULT_FOCUS_TRAP_OPTS,
+        /**
+         * will return focus to the first iterable node of this container select
+         */
+        setReturnFocus: () => {
+          const returnFocusSelector = currentProps?.value?.returnFocusSelector;
+
+          if (returnFocusSelector && !document.querySelector(returnFocusSelector)) {
+            console.warn('SlideInPanelManager: cannot find elem with "returnFocusSelector", returning focus to main view'); // eslint-disable-line no-console
+
+            return '.dashboard-root';
+          }
+
+          return returnFocusSelector || '.dashboard-root';
+        }
+      };
+
+      useWatcherBasedSetupFocusTrapWithDestroyIncluded(
+        () => {
+          if (currentProps?.value?.focusTrapWatcherBasedVariable) {
+            return currentProps.value.focusTrapWatcherBasedVariable;
+          }
+
+          return isOpen?.value && !isClosing?.value;
+        },
+        '#slide-in-panel-manager',
+        opts,
+        false
+      );
+    }
+  }
+);
+
+watch(
+  () => router?.currentRoute?.value,
+  (newValue, oldValue) => {
+    if (!isOpen?.value) {
+      return;
+    }
+
+    if (closeOnRouteChange.value.includes('name') && !isEqual(newValue?.name, oldValue?.name)) {
+      closePanel();
+    }
+
+    if (closeOnRouteChange.value.includes('params') && !isEqual(newValue?.params, oldValue?.params)) {
+      closePanel();
+    }
 
-const panelTitle = computed(() => currentProps?.value?.title || 'Details');
+    if (closeOnRouteChange.value.includes('hash') && !isEqual(newValue?.hash, oldValue?.hash)) {
+      closePanel();
+    }
+
+    if (closeOnRouteChange.value.includes('query') && !isEqual(newValue?.query, oldValue?.query)) {
+      closePanel();
+    }
+  },
+  { deep: true }
+);
+
+onBeforeUnmount(closePanel);
 
 function closePanel() {
   store.commit('slideInPanel/close');
@@ -33,20 +127,35 @@ function closePanel() {
 
 <template>
   <Teleport to="#slides">
-    <div id="slide-in-panel-manager">
+    <div
+      id="slide-in-panel-manager"
+      @keydown.escape="closePanel"
+    >
       <div
         v-show="isOpen"
         data-testid="slide-in-glass"
         class="slide-in-glass"
         :class="{ 'slide-in-glass-open': isOpen }"
+        :style="{
+          ['z-index']: panelZIndex
+        }"
         @click="closePanel"
       />
-      <div
+      <aside
         class="slide-in"
         :class="{ 'slide-in-open': isOpen }"
-        :style="{ width: panelWidth, right: panelRight, top: panelTop, height: panelHeight }"
+        :style="{
+          width: panelWidth,
+          right: panelRight,
+          top: panelTop,
+          height: panelHeight,
+          ['z-index']: panelZIndex
+        }"
       >
-        <div class="header">
+        <div
+          v-if="showHeader"
+          class="header"
+        >
           <div class="title">
             {{ panelTitle }}
           </div>
@@ -66,7 +175,7 @@ function closePanel() {
             class="dynamic-panel-content"
           />
         </div>
-      </div>
+      </aside>
     </div>
   </Teleport>
 </template>
@@ -84,7 +193,6 @@ function closePanel() {
   background-color: var(--body-bg);
   display: block;
   opacity: 0.5;
-  z-index: 1000;
 }
 
 .slide-in {
@@ -92,7 +200,6 @@ function closePanel() {
   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);

package/components/SortableTable/index.vue

@@ -64,6 +64,7 @@ export default {
     ActionMenu,
     ActionDropdownShell,
   },
+
   mixins: [
     filtering,
     sorting,
@@ -378,8 +379,17 @@ export default {
     manualRefreshButtonSize: {
       type:    String,
       default: ''
-    }
+    },
 
+    /**
+     * Usually the manual refresh button is controlled via isTooManyItemsToAutoUpdate
+     *
+     * However this is singular on page. In some places there's more than one...
+     */
+    hideManualRefreshButton: {
+      type:    Boolean,
+      default: false
+    }
   },
 
   data() {
@@ -1196,9 +1206,10 @@ export default {
               <div class="bg" />
             </li>
           </ul>
+          <slot name="watch-controls" />
           <slot name="header-right" />
           <AsyncButton
-            v-if="isTooManyItemsToAutoUpdate"
+            v-if="!hideManualRefreshButton && isTooManyItemsToAutoUpdate"
             mode="manual-refresh"
             :size="manualRefreshButtonSize"
             :current-phase="refreshButtonPhase"

package/components/SortableTable/selection.js

@@ -127,25 +127,38 @@ export default {
   },
 
   watch: {
-    // On page change
+    /**
+     * Handle changes to the page (SSP enabled)
+     */
+    externalPaginationResult() {
+      // Handle changes to the page (SSP enabled)
+      this.pageChanged(this.pagedRows);
+    },
+
+    /**
+     * Handle changes to the page (SSP disabled)
+     */
     pagedRows() {
-      // When the table contents changes:
-      // - Remove items that are in the selection but no longer in the table.
+      this.pageChanged(this.pagedRows);
+    }
+  },
 
-      const content = this.pagedRows;
+  methods: {
+    /**
+     * Remove items that are in the selection but no longer in the table.
+     */
+    pageChanged(page) {
       const toRemove = [];
 
       for (const node of this.selectedRows) {
-        if (!content.includes(node) ) {
+        if (!page.includes(node) ) {
           toRemove.push(node);
         }
       }
 
       this.update([], toRemove);
-    }
-  },
+    },
 
-  methods: {
     onToggleAll(value) {
       if ( value ) {
         this.update(this.pagedRows, []);

package/components/StateDot/index.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { StateColor, stateColorCssVar } from '@shell/utils/style';
+import { computed } from 'vue';
+
+interface Props {
+    color: StateColor;
+    size?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), { size: '8px' });
+const backgroundColor = computed(() => stateColorCssVar(props.color));
+</script>
+
+<template>
+  <span class="state-dot" />
+</template>
+
+<style lang="scss" scoped>
+.state-dot {
+    display: inline-block;
+
+    width: v-bind('props.size');
+    height: v-bind('props.size');
+
+    border-radius: 50%;
+    background-color: v-bind('backgroundColor');
+}
+</style>

package/components/StatusBadge.vue

@@ -19,11 +19,13 @@ const STATUS = {
   }
 };
 
+export interface Props {
+  status?: 'success' | 'warning' | 'info' | 'error',
+  label?: string
+}
+
 withDefaults(
-  defineProps<{
-    status?: 'success' | 'warning' | 'info' | 'error',
-    label?: string
-  }>(),
+  defineProps<Props>(),
   {
     status: 'success',
     label:  '',

package/components/SubtleLink.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { RouterLink, RouteLocationRaw } from 'vue-router';
+
+export interface Props {
+  to: RouteLocationRaw;
+}
+
+const { to } = defineProps<Props>();
+</script>
+
+<template>
+  <RouterLink
+    class="subtle-link"
+    :to="to"
+  >
+    <slot name="default" />
+  </RouterLink>
+</template>
+
+<style lang="scss" scoped>
+.subtle-link {
+    text-decoration: underline;
+    color: var(--body-text);
+}
+</style>

package/components/Tabbed/index.vue

@@ -145,17 +145,10 @@ export default {
         this.select(activeTab.name);
       }
     },
-  },
-
-  mounted() {
-    if ( this.useHash ) {
-      window.addEventListener('hashchange', this.hashChange);
-    }
-  },
-
-  unmounted() {
-    if ( this.useHash ) {
-      window.removeEventListener('hashchange', this.hashChange);
+    '$route.hash'() {
+      if ( this.useHash ) {
+        this.hashChange();
+      }
     }
   },
 
@@ -164,7 +157,7 @@ export default {
       return tab.displayAlertIcon || (tab.error && !tab.active);
     },
     hashChange() {
-      if (!this.scrollOnChange) {
+      if (this.scrollOnChange) {
         const scrollable = document.getElementsByTagName('main')[0];
 
         if (scrollable) {
@@ -182,8 +175,9 @@ export default {
     select(name/* , event */) {
       const { sortedTabs } = this;
 
-      const selected = this.find(name);
-      const hashName = `#${ name }`;
+      const cleanName = name.replace('#', '');
+      const selected = this.find(cleanName);
+      const hashName = `#${ cleanName }`;
 
       if ( !selected || selected.disabled) {
         return;
@@ -281,7 +275,7 @@ export default {
       >
         <a
           :data-testid="`btn-${tab.name}`"
-          :aria-controls="'#' + tab.name"
+          :aria-controls="tab.name"
           :aria-selected="tab.active"
           :aria-label="tab.labelDisplay || ''"
           role="tab"
@@ -318,6 +312,7 @@ export default {
             type="button"
             class="btn bg-transparent"
             data-testid="tab-list-add"
+            :aria-label="t('tabs.addItem')"
             @click="tabAddClicked"
           >
             <i class="icon icon-plus" />
@@ -327,6 +322,7 @@ export default {
             class="btn bg-transparent"
             :disabled="!sortedTabs.length"
             data-testid="tab-list-remove"
+            :aria-label="t('tabs.removeItem')"
             @click="tabRemoveClicked"
           >
             <i class="icon icon-minus" />

package/components/Wizard.vue

@@ -1,5 +1,5 @@
 <script>
-
+import { _CREATE, _VIEW } from '@shell/config/query-params';
 import AsyncButton from '@shell/components/AsyncButton';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
@@ -56,6 +56,11 @@ export default {
       required: true
     },
 
+    mode: {
+      type:    String,
+      default: _CREATE
+    },
+
     // Initial step to show when Wizard loads.
     initStepIndex: {
       type:    Number,
@@ -121,6 +126,11 @@ export default {
   },
 
   computed: {
+
+    isView() {
+      return this.mode === _VIEW;
+    },
+
     errorStrings() {
       return ( this.errors || [] ).map((x) => stringify(x));
     },
@@ -351,7 +361,7 @@ export default {
                     role="presentation"
                   >
                     <span
-                      :aria-controls="'step' + idx+1"
+                      :aria-controls="'step-container-' + step.name"
                       :aria-selected="step.name === activeStep.name"
                       role="tab"
                       class="controls"
@@ -366,7 +376,7 @@ export default {
                       </span>
                     </span>
                   </li>
-                  <div
+                  <li
                     v-if="idx!==visibleSteps.length-1"
                     :key="step.name"
                     class="divider"
@@ -387,7 +397,9 @@ export default {
           >
             <div
               v-if="step.name === activeStep.name || step.hidden"
+              :id="'step-container-' + step.name"
               :key="step.name"
+              role="tabpanel"
               class="step-container__step"
               :class="{'hide': step.name !== activeStep.name && step.hidden}"
             >
@@ -461,6 +473,7 @@ export default {
               :finish="finish"
             >
               <AsyncButton
+                v-if="!isView"
                 :disabled="!activeStep.ready"
                 :mode="finishMode"
                 @click="finish"

package/components/YamlEditor.vue

@@ -203,7 +203,7 @@ export default {
 
     updateValue(value) {
       this.curValue = value;
-      this.$refs.cm.updateValue(value);
+      this.$refs.cm?.updateValue(value);
     }
   }
 };