@rancher/shell 3.0.5-rc.5 → 3.0.5-rc.7

package/components/ResourceList/Masthead.vue

@@ -157,6 +157,12 @@ export default {
     },
 
     _createButtonlabel() {
+      const overrideLabel = this.$store.getters['type-map/optionsFor'](this.resource).listCreateButtonLabelKey;
+
+      if (overrideLabel) {
+        return this.t(overrideLabel);
+      }
+
       return this.createButtonLabel || this.t('resourceList.head.create');
     },
   }

package/components/ResourceList/index.vue

@@ -100,6 +100,7 @@ export default {
 
     return {
       schema,
+      overrideInStore:                  undefined,
       hasListComponent,
       showMasthead:                     showMasthead === undefined ? true : showMasthead,
       resource,

package/components/ResourceTable.vue

@@ -217,11 +217,16 @@ export default {
       default: null, // Default comes from the user preference
     },
 
+    overrideInStore: {
+      type:    String,
+      default: undefined,
+    },
+
   },
 
   data() {
     // Confirm which store we're in, if schema isn't available we're probably showing a list with different types
-    const inStore = this.schema?.id ? this.$store.getters['currentStore'](this.schema.id) : undefined;
+    const inStore = this.overrideInStore || (this.schema?.id ? this.$store.getters['currentStore'](this.schema.id) : undefined);
 
     return {
       inStore,

package/components/ResourceYaml.vue

@@ -73,6 +73,11 @@ export default {
       default: true
     },
 
+    showErrors: {
+      type:    Boolean,
+      default: true
+    },
+
     applyHooks: {
       type:    Function,
       default: null,
@@ -229,7 +234,7 @@ export default {
         }
 
         try {
-          await this.value.saveYaml(yaml);
+          await this.value.saveYaml(yaml, this.initialYaml);
         } catch (err) {
           return onError.call(this, err);
         }
@@ -289,6 +294,13 @@ export default {
       }
     },
 
+    refresh() {
+      this.$refs.yamleditor.refresh();
+    },
+
+    closeError(index) {
+      this.errors = (this.errors || []).filter((_, i) => i !== index);
+    },
   }
 };
 </script>
@@ -318,7 +330,8 @@ export default {
         class="footer"
         :class="{ 'edit': !isView }"
         :mode="mode"
-        :errors="errors"
+        :errors="showErrors ? errors : []"
+        @close-error="closeError"
         @save="save"
         @done="done"
       >

package/components/RichTranslation.vue

@@ -0,0 +1,106 @@
+<script lang="ts">
+import { defineComponent, h, VNode } from 'vue';
+import { useStore } from 'vuex';
+import { purifyHTML } from '@shell/plugins/clean-html';
+
+const ALLOWED_TAGS = ['b', 'i', 'span', 'a']; // Add more as needed
+
+/**
+ * A component for rendering translated strings with embedded HTML and custom Vue components.
+ *
+ * This component allows you to use a single translation key for a message that contains
+ * both standard HTML tags (like <b>, <i>, etc.) and custom Vue components (like <router-link>).
+ *
+ * @example
+ * // In your translation file (e.g., en-us.yaml):
+ * my:
+ *   translation:
+ *     key: 'This is a <b>bold</b> statement with a <customLink>link</customLink>.'
+ *
+ * // In your Vue component:
+ * <RichTranslation k="my.translation.key">
+ *   <template #customLink="{ content }">
+ *     <router-link to="{ name: 'some-path' }">{{ content }}</router-link>
+ *   </template>
+ * </RichTranslation>
+ */
+export default defineComponent({
+  name:  'RichTranslation',
+  props: {
+    /**
+     * The translation key for the message.
+     */
+    k: {
+      type:     String,
+      required: true,
+    },
+    /**
+     * The HTML tag to use for the root element.
+     */
+    tag: {
+      type:    String,
+      default: 'span'
+    },
+  },
+  setup(props, { slots }) {
+    const store = useStore();
+
+    return () => {
+    // Get the raw translation string, without any processing.
+      const rawStr = store.getters['i18n/t'](props.k, {}, true);
+
+      if (!rawStr || typeof rawStr !== 'string') {
+        return h(props.tag, {}, [rawStr]);
+      }
+
+      // This regex splits the string by the custom tags, keeping the tags in the resulting array.
+      const regex = /<([a-zA-Z0-9]+)>(.*?)<\/\1>|<([a-zA-Z0-9]+)\/>/g;
+      const children: (VNode | string)[] = [];
+      let lastIndex = 0;
+      let match;
+
+      // Iterate over all matches of the regex.
+      while ((match = regex.exec(rawStr)) !== null) {
+        // Add the text before the current match as a plain text node.
+        if (match.index > lastIndex) {
+          children.push(h('span', { innerHTML: purifyHTML(rawStr.substring(lastIndex, match.index)) }));
+        }
+
+        const enclosingTagName = match[1]; // Captures the tag name for enclosing tags (e.g., 'customLink' from <customLink>...</customLink>)
+        const selfClosingTagName = match[3]; // Captures the tag name for self-closing tags (e.g., 'anotherTag' from <anotherTag/>)
+        const tagName = enclosingTagName || selfClosingTagName;
+
+        if (tagName) {
+          const content = enclosingTagName ? match[2] : '';
+
+          if (slots[tagName]) {
+            // If a slot is provided for this tag, render the slot with the content.
+            children.push(slots[tagName]({ content: purifyHTML(content) }));
+          } else if (ALLOWED_TAGS.includes(tagName.toLowerCase())) {
+            // If it's an allowed HTML tag, render it directly.
+            if (content) {
+              children.push(h(tagName, { innerHTML: purifyHTML(content, { ALLOWED_TAGS }) }));
+            } else {
+              children.push(h(tagName));
+            }
+          } else {
+            // Otherwise, render the tag and its content as plain HTML.
+            children.push(h('span', { innerHTML: purifyHTML(match[0]) }));
+          }
+        }
+
+        // Update the last index to continue searching after the current match
+        lastIndex = regex.lastIndex;
+      }
+
+      // Add any remaining text after the last match.
+      if (lastIndex < rawStr.length) {
+        children.push(h('span', { innerHTML: purifyHTML(rawStr.substring(lastIndex)) }));
+      }
+
+      // Render the root element with the processed children.
+      return h(props.tag, {}, children);
+    };
+  }
+});
+</script>

package/components/SlideInPanelManager.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
-import { computed, watch } 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;
 
@@ -15,6 +17,11 @@ 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;
 
@@ -25,13 +32,23 @@ 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(
   /**
@@ -75,15 +92,33 @@ watch(
 );
 
 watch(
-  () => (store as any).$router?.currentRoute,
-  () => {
-    if (isOpen?.value && currentProps?.value.closeOnRouteChange !== false) {
+  () => 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();
+    }
+
+    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');
 }
@@ -102,7 +137,7 @@ function closePanel() {
         :class="{ 'slide-in-glass-open': isOpen }"
         @click="closePanel"
       />
-      <div
+      <aside
         class="slide-in"
         :class="{ 'slide-in-open': isOpen }"
         :style="{
@@ -110,7 +145,6 @@ function closePanel() {
           right: panelRight,
           top: panelTop,
           height: panelHeight,
-          ['z-index']: panelZIndex
         }"
       >
         <div
@@ -136,7 +170,7 @@ function closePanel() {
             class="dynamic-panel-content"
           />
         </div>
-      </div>
+      </aside>
     </div>
   </Teleport>
 </template>
@@ -149,11 +183,11 @@ function closePanel() {
   left: 0;
   height: 100vh;
   width: 100vw;
+  z-index: z-index('slide-in');
 }
 .slide-in-glass-open {
-  background-color: var(--body-bg);
+  background: var(--overlay-bg);
   display: block;
-  opacity: 0.5;
 }
 
 .slide-in {
@@ -164,6 +198,7 @@ function closePanel() {
   transition: right 0.5s ease;
   border-left: 1px solid var(--border);
   background-color: var(--body-bg);
+  z-index: calc(z-index('slide-in') + 1);
 }
 
 .slide-in-open {

package/components/SortableTable/index.vue

@@ -130,7 +130,7 @@ export default {
     },
     groupSort: {
       // Field to order groups by, defaults to groupBy
-      type:    Array,
+      type:    String,
       default: null
     },
 

package/components/SortableTable/selection.js

@@ -344,7 +344,6 @@ export default {
         return;
       }
 
-      e.preventDefault();
       e.stopPropagation();
 
       this.prevNode = node;

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/Tabbed/index.vue

@@ -66,6 +66,11 @@ export default {
     resource: {
       type:    Object,
       default: () => {}
+    },
+
+    showExtensionTabs: {
+      type:    Boolean,
+      default: true,
     }
   },
 
@@ -92,7 +97,7 @@ export default {
   },
 
   data() {
-    const extensionTabs = getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams) || [];
+    const extensionTabs = this.showExtensionTabs ? getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams) || [] : [];
 
     const parsedExtTabs = extensionTabs.map((item) => {
       return {
@@ -145,17 +150,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 +162,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 +180,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 +280,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 +317,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 +327,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

@@ -361,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"
@@ -376,7 +376,7 @@ export default {
                       </span>
                     </span>
                   </li>
-                  <div
+                  <li
                     v-if="idx!==visibleSteps.length-1"
                     :key="step.name"
                     class="divider"
@@ -397,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}"
             >