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

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,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, watch } from 'vue';
+import { computed, onBeforeUnmount, watch, useTemplateRef } from 'vue';
 import { useStore } from 'vuex';
 import {
   DEFAULT_FOCUS_TRAP_OPTS,
@@ -10,6 +10,9 @@ import { useRouter } from 'vue-router';
 
 const HEADER_HEIGHT = 55;
 
+const slideInPanelManager = useTemplateRef('SlideInPanelManager');
+const slideInPanelManagerClose = useTemplateRef('SlideInPanelManagerClose');
+
 const store = useStore();
 const isOpen = computed(() => store.getters['slideInPanel/isOpen']);
 const isClosing = computed(() => store.getters['slideInPanel/isClosing']);
@@ -36,7 +39,6 @@ const panelTop = computed(() => {
 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;
@@ -73,7 +75,9 @@ watch(
           }
 
           return returnFocusSelector || '.dashboard-root';
-        }
+        },
+        // putting the initial focus on the first element that is not conditionally displayed
+        initialFocus: slideInPanelManagerClose.value
       };
 
       useWatcherBasedSetupFocusTrapWithDestroyIncluded(
@@ -84,7 +88,7 @@ watch(
 
           return isOpen?.value && !isClosing?.value;
         },
-        '#slide-in-panel-manager',
+        slideInPanelManager.value as HTMLElement,
         opts,
         false
       );
@@ -129,6 +133,7 @@ function closePanel() {
   <Teleport to="#slides">
     <div
       id="slide-in-panel-manager"
+      ref="SlideInPanelManager"
       @keydown.escape="closePanel"
     >
       <div
@@ -136,9 +141,6 @@ function closePanel() {
         data-testid="slide-in-glass"
         class="slide-in-glass"
         :class="{ 'slide-in-glass-open': isOpen }"
-        :style="{
-          ['z-index']: panelZIndex
-        }"
         @click="closePanel"
       />
       <aside
@@ -149,7 +151,6 @@ function closePanel() {
           right: panelRight,
           top: panelTop,
           height: panelHeight,
-          ['z-index']: panelZIndex
         }"
       >
         <div
@@ -160,6 +161,7 @@ function closePanel() {
             {{ panelTitle }}
           </div>
           <i
+            ref="SlideInPanelManagerClose"
             class="icon icon-close"
             data-testid="slide-in-close"
             :tabindex="isOpen ? 0 : -1"
@@ -188,11 +190,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 {
@@ -203,6 +205,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

@@ -3,7 +3,7 @@ import { mapGetters, useStore } from 'vuex';
 import { defineAsyncComponent, ref, onMounted, onBeforeUnmount } from 'vue';
 import day from 'dayjs';
 import isEmpty from 'lodash/isEmpty';
-import { dasherize, ucFirst } from '@shell/utils/string';
+import { dasherize, ucFirst, randomStr } from '@shell/utils/string';
 import { get, clone } from '@shell/utils/object';
 import { removeObject } from '@shell/utils/array';
 import { Checkbox } from '@components/Form/Checkbox';
@@ -130,7 +130,7 @@ export default {
     },
     groupSort: {
       // Field to order groups by, defaults to groupBy
-      type:    Array,
+      type:    String,
       default: null
     },
 
@@ -735,7 +735,7 @@ export default {
         grp.rows.forEach((row) => {
           const rowData = {
             row,
-            key:                        this.get(row, this.keyField),
+            key:                        this.get(row, this.keyField) ?? randomStr(),
             showSubRow:                 this.showSubRow(row, this.keyField),
             canRunBulkActionOfInterest: this.canRunBulkActionOfInterest(row),
             columns:                    []
@@ -1038,7 +1038,7 @@ export default {
     handleActionButtonClick(i, event) {
       // Each row in the table gets its own ref with
       // a number based on its index. If you are using
-      // an ActionMenu that doen't have a dependency on Vuex,
+      // an ActionMenu that doesn't have a dependency on Vuex,
       // these refs are useful because you can reuse the
       // same ActionMenu component on a page with many different
       // target elements in a list,
@@ -1398,7 +1398,7 @@ export default {
         </slot>
         <template
           v-for="(row, i) in groupedRows.rows"
-          :key="i"
+          :key="row.key"
         >
           <slot
             name="main-row"

package/components/SortableTable/selection.js

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

package/components/Tabbed/index.vue

@@ -66,6 +66,19 @@ export default {
     resource: {
       type:    Object,
       default: () => {}
+    },
+
+    showExtensionTabs: {
+      type:    Boolean,
+      default: true,
+    },
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'tabbed'
     }
   },
 
@@ -92,7 +105,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 {
@@ -248,8 +261,12 @@ export default {
 
 <template>
   <div
-    :class="{'side-tabs': !!sideTabs, 'tabs-only': tabsOnly }"
-    data-testid="tabbed"
+    class="tabbed-container"
+    :class="{
+      'side-tabs': !!sideTabs,
+      'tabs-only': tabsOnly
+    }"
+    :data-testid="componentTestid"
   >
     <ul
       v-if="!hideTabs"
@@ -257,7 +274,7 @@ export default {
       role="tablist"
       class="tabs"
       :class="{'clearfix':!sideTabs, 'vertical': sideTabs, 'horizontal': !sideTabs}"
-      data-testid="tabbed-block"
+      :data-testid="`${componentTestid}-block`"
       tabindex="0"
       @keydown.right.prevent="selectNext(1)"
       @keydown.left.prevent="selectNext(-1)"
@@ -364,6 +381,10 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+.tabbed-container {
+  min-width: fit-content;
+}
+
 .tabs {
   list-style-type: none;
   margin: 0;
@@ -536,6 +557,7 @@ export default {
       list-style: none;
       padding: 0;
       margin-top: auto;
+      z-index: z-index('default');
 
       li {
         display: flex;
@@ -545,16 +567,25 @@ export default {
           flex: 1 1;
           display: flex;
           justify-content: center;
+
+          &:focus-visible {
+            @include focus-outline;
+          }
         }
 
         button:first-of-type {
           border-top: solid 1px var(--border);
           border-right: solid 1px var(--border);
+          border-top-left-radius: 0;
           border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
         }
         button:last-of-type {
           border-top: solid 1px var(--border);
+          border-top-right-radius: 0;
           border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
         }
       }
     }

package/components/__tests__/LazyImage.spec.ts

@@ -0,0 +1,121 @@
+import { mount } from '@vue/test-utils';
+import LazyImage from '@shell/components/LazyImage.vue';
+
+describe('component: LazyImage.vue', () => {
+  const initialSrc = 'initial.jpg';
+  const src = 'test.jpg';
+  const errorSrc = 'error.jpg';
+
+  beforeEach(() => {
+    // Clear all mocks before each test to ensure test isolation
+    jest.clearAllMocks();
+  });
+
+  it('renders the initial source image', () => {
+    const wrapper = mount(LazyImage, {
+      propsData: {
+        initialSrc,
+        src,
+        errorSrc
+      },
+    });
+
+    const img = wrapper.find('img');
+
+    expect(img.attributes('src')).toBe(initialSrc);
+  });
+
+  it('does not load the main src image if not in viewport', async() => {
+    const wrapper = mount(LazyImage, {
+      propsData: {
+        initialSrc,
+        src,
+        errorSrc
+      },
+    });
+
+    const callback = window.IntersectionObserver.mock.calls[0][0];
+
+    // eslint-disable-next-line node/no-callback-literal
+    callback([{ isIntersecting: false }]);
+    await wrapper.vm.$nextTick();
+
+    const img = wrapper.find('img');
+
+    expect(img.attributes('src')).toBe(initialSrc);
+  });
+
+  it('loads the main src image when it enters the viewport', async() => {
+    const wrapper = mount(LazyImage, {
+      propsData: {
+        initialSrc,
+        src,
+        errorSrc
+      },
+    });
+
+    // Manually trigger the intersection observer
+    const callback = window.IntersectionObserver.mock.calls[0][0];
+
+    // eslint-disable-next-line node/no-callback-literal
+    callback([{ isIntersecting: true }]);
+
+    await wrapper.vm.$nextTick();
+
+    const img = wrapper.find('img');
+
+    expect(img.attributes('src')).toBe(src);
+  });
+
+  it('loads the error image if the main src image fails to load', async() => {
+    const wrapper = mount(LazyImage, {
+      propsData: {
+        initialSrc,
+        src,
+        errorSrc
+      },
+    });
+
+    // Manually trigger the intersection observer
+    const callback = window.IntersectionObserver.mock.calls[0][0];
+
+    // eslint-disable-next-line node/no-callback-literal
+    callback([{ isIntersecting: true }]);
+
+    await wrapper.vm.$nextTick();
+
+    const img = wrapper.find('img');
+
+    img.trigger('error');
+
+    await wrapper.vm.$nextTick();
+
+    expect(img.attributes('src')).toBe(errorSrc);
+  });
+
+  it('loads a new src image if the src prop changes', async() => {
+    const wrapper = mount(LazyImage, {
+      propsData: {
+        initialSrc,
+        src,
+        errorSrc
+      },
+    });
+
+    // Manually trigger the intersection observer
+    const callback = window.IntersectionObserver.mock.calls[0][0];
+
+    // eslint-disable-next-line node/no-callback-literal
+    callback([{ isIntersecting: true }]);
+
+    await wrapper.vm.$nextTick();
+
+    const newSrc = 'new.jpg';
+
+    await wrapper.setProps({ src: newSrc });
+
+    const img = wrapper.find('img');
+
+    expect(img.attributes('src')).toBe(newSrc);
+  });
+});

package/components/__tests__/PromptRestore.test.ts

@@ -4,7 +4,7 @@ import PromptRestore from '@shell/components/PromptRestore.vue';
 import { createStore } from 'vuex';
 import { ExtendedVue, Vue } from 'vue/types/vue';
 import { DefaultProps } from 'vue/types/options';
-import { CAPI, NORMAN } from '@shell/config/types';
+import { CAPI } from '@shell/config/types';
 import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 
 const RKE2_CLUSTER_NAME = 'rke2_cluster_name';
@@ -33,32 +33,6 @@ const RKE2_FAILED_SNAPSHOT = {
   name:         'rke2_name_3'
 };
 
-const RKE1_CLUSTER_NAME = 'rke1_cluster_name';
-const RKE1_SUCCESSFUL_SNAPSHOT_1 = {
-  clusterId: RKE1_CLUSTER_NAME,
-  type:      NORMAN.ETCD_BACKUP,
-  state:     STATES_ENUM.ACTIVE,
-  created:   'Thu Jul 30 2023 11:11:39',
-  id:        'rke1_id_1',
-  name:      'rke1_name_1'
-};
-const RKE1_SUCCESSFUL_SNAPSHOT_2 = {
-  clusterId: RKE1_CLUSTER_NAME,
-  type:      NORMAN.ETCD_BACKUP,
-  state:     STATES_ENUM.ACTIVE,
-  created:   'Thu Jul 30 2022 11:11:39',
-  id:        'rke1_id_2',
-  name:      'rke1_name_2'
-};
-const RKE1_WITH_ERROR_SNAPSHOT = {
-  clusterId: RKE1_CLUSTER_NAME,
-  type:      NORMAN.ETCD_BACKUP,
-  state:     STATES_ENUM.ERROR,
-  created:   'Thu Jul 30 2021 11:11:39',
-  id:        'rke1_id_3',
-  name:      'rke1_name_3'
-};
-
 describe('component: PromptRestore', () => {
   const rke2TestCases = [
     [[], 0],
@@ -98,42 +72,4 @@ describe('component: PromptRestore', () => {
 
     expect(wrapper.vm.clusterSnapshots).toHaveLength(expected);
   });
-
-  const rke1TestCases = [
-    [[], 0],
-    [[RKE1_WITH_ERROR_SNAPSHOT], 0],
-    [[RKE1_SUCCESSFUL_SNAPSHOT_1], 1],
-    [[RKE1_SUCCESSFUL_SNAPSHOT_1, RKE1_SUCCESSFUL_SNAPSHOT_2], 2],
-    [[RKE1_WITH_ERROR_SNAPSHOT, RKE1_SUCCESSFUL_SNAPSHOT_1, RKE1_SUCCESSFUL_SNAPSHOT_2], 2]
-  ];
-
-  it.each(rke1TestCases)('should list RKE1 snapshots properly', async(snapShots, expected) => {
-    const store = createStore({
-      modules: {
-        'action-menu': {
-          namespaced: true,
-          state:      {
-            showPromptRestore: true,
-            toRestore:         [{
-              type:     CAPI.RANCHER_CLUSTER,
-              metadata: { name: RKE1_CLUSTER_NAME },
-              snapShots
-            }]
-          },
-        },
-      },
-      getters: { 'i18n/t': () => jest.fn(), 'prefs/get': () => jest.fn() },
-      actions: { 'rancher/findAll': jest.fn().mockResolvedValue(snapShots) }
-    });
-
-    const wrapper = shallowMount(
-      PromptRestore as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>,
-      { global: { mocks: { $store: store } } }
-    );
-
-    await wrapper.vm.fetchSnapshots();
-    await nextTick();
-
-    expect(wrapper.vm.clusterSnapshots).toHaveLength(expected);
-  });
 });

package/components/__tests__/RichTranslation.test.ts

@@ -0,0 +1,115 @@
+import { mount } from '@vue/test-utils';
+import RichTranslation from '../RichTranslation.vue';
+import { createStore } from 'vuex';
+import { h } from 'vue';
+
+// Mock the i18n store getter
+const mockI18nStore = createStore({
+  getters: {
+    'i18n/t': () => (key: string, args: any, noMarkup: boolean) => {
+      const translations: Record<string, string> = {
+        'test.simple':   'Hello World',
+        'test.html':     'This is <b>bold</b> and <i>italic</i>.',
+        'test.custom':   'This has a <customLink>link</customLink> and <anotherTag/>.',
+        'test.mixed':    'Text before <tag1>content1</tag1> text in middle <tag2/> text after.',
+        'test.noString': 123,
+      };
+
+      return translations[key] || key;
+    },
+  },
+});
+
+describe('richTranslation', () => {
+  it('renders a simple translation correctly', () => {
+    const wrapper = mount(RichTranslation, {
+      props:  { k: 'test.simple' },
+      global: { plugins: [mockI18nStore] },
+    });
+
+    expect(wrapper.text()).toBe('Hello World');
+    expect(wrapper.html()).toContain('<span>Hello World</span>');
+  });
+
+  it('renders HTML tags correctly', () => {
+    const wrapper = mount(RichTranslation, {
+      props:  { k: 'test.html' },
+      global: { plugins: [mockI18nStore] },
+    });
+
+    expect(wrapper.html()).toContain('<span><span>This is </span><b>bold</b><span> and </span><i>italic</i><span>.</span></span>');
+    expect(wrapper.find('b').exists()).toBe(true);
+    expect(wrapper.find('i').exists()).toBe(true);
+  });
+
+  it('renders custom components via slots (enclosing tag)', () => {
+    const wrapper = mount(RichTranslation, {
+      props:  { k: 'test.custom' },
+      slots:  { customLink: ({ content }: { content: string }) => h('a', { href: '/test' }, content) },
+      global: { plugins: [mockI18nStore] },
+    });
+
+    expect(wrapper.html()).toContain('<a href="/test">link</a>');
+    expect(wrapper.find('a').text()).toBe('link');
+  });
+
+  it('renders custom components via slots (self-closing tag)', () => {
+    const wrapper = mount(RichTranslation, {
+      props:  { k: 'test.custom' },
+      slots:  { anotherTag: () => h('span', { class: 'self-closed' }, 'Self-closed content') },
+      global: { plugins: [mockI18nStore] },
+    });
+
+    expect(wrapper.html()).toContain('<span class="self-closed">Self-closed content</span>');
+    expect(wrapper.find('.self-closed').text()).toBe('Self-closed content');
+  });
+
+  it('handles mixed content with multiple custom components', () => {
+    const wrapper = mount(RichTranslation, {
+      props: { k: 'test.mixed' },
+      slots: {
+        tag1: ({ content }: { content: string }) => h('strong', {}, content),
+        tag2: () => h('em', {}, 'emphasized'),
+      },
+      global: { plugins: [mockI18nStore] },
+    });
+
+    expect(wrapper.html()).toContain('<span>Text before </span><strong>content1</strong><span> text in middle </span><em>emphasized</em><span> text after.</span>');
+    expect(wrapper.find('strong').text()).toBe('content1');
+    expect(wrapper.find('em').text()).toBe('emphasized');
+  });
+
+  it('renders correctly when translation is not a string', () => {
+    const wrapper = mount(RichTranslation, {
+      props:  { k: 'test.noString' },
+      global: { plugins: [mockI18nStore] },
+    });
+
+    expect(wrapper.text()).toBe('123');
+    expect(wrapper.html()).toContain('<span>123</span>');
+  });
+
+  it('uses the specified root tag', () => {
+    const wrapper = mount(RichTranslation, {
+      props: {
+        k:   'test.simple',
+        tag: 'div',
+      },
+      global: { plugins: [mockI18nStore] },
+    });
+
+    expect(wrapper.html()).toContain('<div><span>Hello World</span></div>');
+    expect(wrapper.find('div').exists()).toBe(true);
+    expect(wrapper.find('span').exists()).toBe(true); // Inner span for content
+  });
+
+  it('falls back to raw tag content if slot is not provided for enclosing tag', () => {
+    const wrapper = mount(RichTranslation, {
+      props:  { k: 'test.custom' }, // Contains <customLink> and <anotherTag/>
+      // No slots provided
+      global: { plugins: [mockI18nStore] },
+    });
+
+    expect(wrapper.find('a').exists()).toBe(false); // Should not render as <a>
+  });
+});

package/components/fleet/FleetStatus.vue

@@ -213,6 +213,7 @@ function toPercent(value, min, max) {
   .fleet-status {
     display: flex;
     width: 100%;
+    min-width: fit-content;
     border: 1px solid var(--border);
     border-radius: 10px
   }
@@ -227,6 +228,9 @@ function toPercent(value, min, max) {
     width: 100%;
     padding: 15px;
 
+    .title {
+      margin-right: 16px;
+    }
   }
 
   .count {