@rancher/shell 3.0.12-rc.3 → 3.0.12-rc.5

package/plugins/steve/actions.js

@@ -10,6 +10,7 @@ import { NAMESPACE } from '@shell/config/types';
 import { handleKubeApiHeaderWarnings } from '@shell/plugins/steve/header-warnings';
 import { steveCleanForDownload } from '@shell/plugins/steve/resource-utils';
 import paginationUtils from '@shell/utils/pagination-utils';
+import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
 
 export default {
 
@@ -221,6 +222,101 @@ export default {
     }
   },
 
+  /**
+   * Fetch aggregated state counts for a resource type via the Steve summary API.
+   * Requires VAI (ui-sql-cache) to be enabled; returns undefined otherwise.
+   *
+   * Uses `summaryonly` by default so no resource data is returned.
+   *
+   * @param {string} type - Resource type (e.g. 'pod', 'service')
+   * @param {object} [opt] - Options object
+   *   @param {string} opt.summaryField - Field to aggregate counts by.
+   *     Must be a field indexed by the VAI cache (see StevePaginationUtils.VALID_FIELDS in steve-pagination-utils.ts)
+   *   @param {string} [opt.namespace] - Namespace to scope the request to (only applies to namespaced resource types)
+   *   @param {boolean} [opt.summaryOnly=true] - Omit resource data from the response (set to false to include data)
+   *   @param {boolean} [opt.namespaceCounts] - Include per-namespace breakdowns in counts
+   *   @param {PaginationParamFilter[]} [opt.filters] - Pre-built filters from PaginationParamFilter.createSingleField()
+   *   @param {KubeLabelSelector} [opt.labelSelector] - Kube label selector to filter by (converted via convertLabelSelectorPaginationParams)
+   * @returns {Promise<{ count: number, summary: { property: string, counts: Record<string, { total: number, namespace?: Record<string, number> }> }[] | null } | undefined>}
+   *
+   * @example
+   * const result = await dispatch('fetchResourceSummary', {
+   *   type: 'pod',
+   *   opt:  { summaryField: 'metadata.state.name', labelSelector: { matchExpressions: podMatchExpression } }
+   * });
+   * // result.summary[0].counts => { running: { total: 3 }, error: { total: 1 } }
+   *
+   * // With namespace breakdowns:
+   * const result = await dispatch('fetchResourceSummary', {
+   *   type: 'pod',
+   *   opt:  { summaryField: 'metadata.state.name', namespaceCounts: true }
+   * });
+   * // result.summary[0].counts => { running: { total: 3, namespace: { default: 2, 'kube-system': 1 } } }
+   */
+  async fetchResourceSummary({ getters, dispatch, rootGetters }, { type, opt = {} }) {
+    type = getters.normalizeType(type);
+    const schema = getters.schemaFor(type);
+
+    if (!schema) {
+      console.warn(`fetchResourceSummary: no schema found for type "${ type }"`); // eslint-disable-line no-console
+
+      return undefined;
+    }
+
+    if (!paginationUtils.isSteveCacheEnabled({ rootGetters })) {
+      console.warn(`fetchResourceSummary: VAI is not enabled, summary API unavailable for type "${ type }"`); // eslint-disable-line no-console
+
+      return undefined;
+    }
+
+    if (!opt.summaryField) {
+      console.warn(`fetchResourceSummary: summaryField is required and must be a string for type "${ type }"`); // eslint-disable-line no-console
+
+      return undefined;
+    }
+
+    try {
+      const url = new URL(schema.links.collection, window.location.origin);
+
+      if (schema.attributes?.namespaced && opt.namespace) {
+        url.pathname += `/${ opt.namespace }`;
+      }
+
+      url.searchParams.set('summary', opt.summaryField);
+
+      if (opt.summaryOnly !== false) {
+        url.searchParams.set('summaryonly', '');
+      }
+
+      if (opt.namespaceCounts) {
+        url.searchParams.set('summarynamespaced', '');
+      }
+
+      if (opt.filters?.length) {
+        const filterParams = new URLSearchParams(stevePaginationUtils.convertPaginationParams({ schema, filters: opt.filters }));
+
+        filterParams.forEach((v, k) => url.searchParams.append(k, v));
+      }
+
+      if (opt.labelSelector) {
+        const labelParams = new URLSearchParams(stevePaginationUtils.convertLabelSelectorPaginationParams({ labelSelector: opt.labelSelector }));
+
+        labelParams.forEach((v, k) => url.searchParams.append(k, v));
+      }
+
+      const res = await dispatch('request', { opt: { url: url.pathname + url.search } });
+
+      return {
+        count:   res.count ?? 0,
+        summary: res.summary || null
+      };
+    } catch (e) {
+      console.warn(`fetchResourceSummary: summary API request failed for type "${ type }"`, e); // eslint-disable-line no-console
+
+      return undefined;
+    }
+  },
+
   promptRestore({ commit, state }, resources ) {
     commit('action-menu/togglePromptRestore', resources, { root: true });
   },

package/plugins/steve/steve-pagination-utils.ts

@@ -656,7 +656,7 @@ class StevePaginationUtils extends NamespaceProjectFilters {
    * A lot of the requirements and details are taken directly from
    * https://kubernetes.io/docs/concepts/overview/working-with-objects/labels/
    */
-  private convertLabelSelectorPaginationParams({ labelSelector }: { labelSelector: KubeLabelSelector}): string {
+  convertLabelSelectorPaginationParams({ labelSelector }: { labelSelector: KubeLabelSelector}): string {
     // Get a list of matchExpressions
     const expressions: KubeLabelSelectorExpression[] = labelSelector.matchExpressions ? [...labelSelector.matchExpressions] : [];
 

package/rancher-components/Accordion/Accordion.vue

@@ -1,8 +1,14 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { mapGetters } from 'vuex';
+import {
+  computed, defineComponent, nextTick, ref, useTemplateRef
+} from 'vue';
+import { mapGetters, useStore } from 'vuex';
+import { useInSummary } from '@shell/components/TableOfContents/composables';
+import { useI18n } from '@shell/composables/useI18n';
 
 export default defineComponent({
+  name: 'Accordion',
+
   props: {
     title: {
       type:    String,
@@ -20,22 +26,59 @@ export default defineComponent({
     }
   },
 
+  setup(props) {
+    const store = useStore();
+    const { t } = useI18n(store);
+    const label = computed(() => props.titleKey && typeof t === 'function' ? t(props.titleKey) : props.title);
+
+    const isOpen = ref(props.openInitially);
+    const accordionSummarizedContainer = useTemplateRef<HTMLElement>('accordion-summarized-container');
+
+    const scrollTo = () => {
+      isOpen.value = true;
+      nextTick(() => {
+        accordionSummarizedContainer.value?.scrollIntoView();
+      });
+    };
+
+    const { summary } = useInSummary({
+      scrollTo,
+      label,
+      elementRef: accordionSummarizedContainer,
+    });
+
+    return {
+      summary,
+      isOpen,
+      scrollTo,
+    };
+  },
+
   data() {
-    return { isOpen: this.openInitially };
+    return {};
   },
 
-  computed: { ...mapGetters({ t: 'i18n/t' }) },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    displayTitle() {
+      return this.titleKey ? this.t(this.titleKey) : this.title;
+    },
+  },
 
   methods: {
     toggle() {
       this.isOpen = !this.isOpen;
-    }
-  }
+    },
+  },
 });
 </script>
 
 <template>
-  <div class="accordion-container">
+  <div
+    ref="accordion-summarized-container"
+    class="accordion-container"
+  >
     <div
       class="accordion-header"
       data-testid="accordion-header"
@@ -51,7 +94,7 @@ export default defineComponent({
           data-testid="accordion-title-slot-content"
           class="mb-0"
         >
-          {{ titleKey ? t(titleKey) : title }}
+          {{ displayTitle }}
         </h2>
       </slot>
     </div>
@@ -67,7 +110,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .accordion-container {
-  border: 1px solid var(--border)
+  border: 1px solid var(--border);
+  border-radius: var(--border-radius);
 }
 .accordion-header {
   padding: 16px 16px 16px 11px;

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -125,6 +125,14 @@ export default defineComponent({
       default: undefined
     },
 
+    /**
+     * Use body text color for the label instead of the default input-label color.
+     */
+    useBodyTextColor: {
+      type:    Boolean,
+      default: false
+    },
+
     /**
      * Inherited global identifier prefix for tests
      * Define a term based on the parent component to avoid conflicts on multiple components
@@ -316,6 +324,7 @@ export default defineComponent({
           <span
             v-if="labelKey"
             :id="idForLabel"
+            :class="{ 'body-text-color': useBodyTextColor }"
           >
             <t
               :k="labelKey"
@@ -325,6 +334,7 @@ export default defineComponent({
           <span
             v-else-if="label"
             :id="idForLabel"
+            :class="{ 'body-text-color': useBodyTextColor }"
           >{{ label }}</span>
           <i
             v-if="tooltipKey"
@@ -403,6 +413,10 @@ $fontColor: var(--input-label);
     display: inline-flex;
     margin: 0px 10px 0px 5px;
 
+    .body-text-color {
+      color: var(--body-text);
+    }
+
     &.checkbox-primary {
       color: inherit;
       font-weight: 600;

package/rancher-components/Form/Radio/RadioButton.vue

@@ -80,6 +80,14 @@ export default defineComponent({
       default: false
     },
 
+    /**
+     * Use body text color for the label instead of the default input-label color.
+     */
+    useBodyTextColor: {
+      type:    Boolean,
+      default: false
+    },
+
     /**
      * Radio option Id - used to link to aria-activedescendant
      * when using inside of the context of a Radio Group
@@ -189,7 +197,11 @@ export default defineComponent({
     />
     <div class="labeling">
       <label
-        :class="[ muteLabel ? 'text-muted' : '', 'radio-label', 'm-0']"
+        class="radio-label m-0"
+        :class="{
+          'text-muted': muteLabel,
+          'body-text-color': useBodyTextColor
+        }"
         :for="name"
       >
         <slot
@@ -314,6 +326,10 @@ $fontColor: var(--input-label);
     flex-direction: column;
 
     margin: 3px 10px 0px 5px;
+
+    .body-text-color {
+      color: var(--body-text);
+    }
   }
 }
 

package/rancher-components/Form/Radio/RadioGroup.vue

@@ -12,6 +12,7 @@ interface Option {
 }
 
 export default defineComponent({
+  name:       'RadioGroup',
   components: { RadioButton },
   props:      {
     /**
@@ -102,6 +103,14 @@ export default defineComponent({
     row: {
       type:    Boolean,
       default: false
+    },
+
+    /**
+     * Use body text color for the label instead of the default input-label color.
+     */
+    useBodyTextColor: {
+      type:    Boolean,
+      default: false
     }
   },
 
@@ -302,6 +311,7 @@ export default defineComponent({
             :disabled="isDisabled"
             :data-testid="`radio-button-${i}`"
             :mode="mode"
+            :use-body-text-color="useBodyTextColor"
             :prevent-focus-on-radio-groups="true"
             @update:value="$emit('update:value', $event)"
           />

package/rancher-components/Form/TextArea/TextAreaAutoGrow.vue

@@ -77,6 +77,16 @@ export default defineComponent({
     disabled: {
       type:    Boolean,
       default: false
+    },
+
+    /**
+     * Recalculate the height when the value is changed programmatically (e.g.
+     * populated from a file) and when the window is resized, not just on user
+     * input. Opt-in to avoid changing the behaviour of existing usages.
+     */
+    resizeOnValueChangeAndResizeWindow: {
+      type:    Boolean,
+      default: false
     }
   },
 
@@ -117,6 +127,14 @@ export default defineComponent({
   },
 
   watch: {
+    // Recalculate the height when the value is changed programmatically (e.g.
+    // populated from a file), not just on user input. Opt-in via resizeOnValueChangeAndResizeWindow.
+    value() {
+      if (this.resizeOnValueChangeAndResizeWindow) {
+        this.queueResize();
+      }
+    },
+
     $attrs: {
       deep: true,
       handler() {
@@ -134,6 +152,18 @@ export default defineComponent({
     this.$nextTick(() => {
       this.autoSize();
     });
+
+    // Width changes alter text wrapping, so the required height can change when
+    // the window is resized. Opt-in via resizeOnValueChangeAndResizeWindow.
+    if (this.resizeOnValueChangeAndResizeWindow) {
+      window.addEventListener('resize', this.queueResize);
+    }
+  },
+
+  beforeUnmount() {
+    if (this.resizeOnValueChangeAndResizeWindow) {
+      window.removeEventListener('resize', this.queueResize);
+    }
   },
 
   methods: {

package/rancher-components/Form/TextArea/__tests__/TextAreaAutoGrow.test.ts

@@ -0,0 +1,95 @@
+import { mount } from '@vue/test-utils';
+import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
+
+describe('component: TextAreaAutoGrow', () => {
+  it('should recalculate its height when the value changes programmatically and resizeOnValueChangeAndResizeWindow is set', async() => {
+    const wrapper = mount(TextAreaAutoGrow, { props: { value: 'initial', resizeOnValueChangeAndResizeWindow: true } });
+
+    // queueResize is the (debounced) entrypoint that triggers autoSize
+    const queueResize = jest.fn();
+
+    wrapper.vm.queueResize = queueResize;
+
+    await wrapper.setProps({ value: 'a\nmuch\nlonger\nvalue\nset\nfrom\noutside' });
+
+    expect(queueResize).toHaveBeenCalledWith();
+  });
+
+  it('should not recalculate its height on programmatic value change by default', async() => {
+    const wrapper = mount(TextAreaAutoGrow, { props: { value: 'initial' } });
+
+    const queueResize = jest.fn();
+
+    wrapper.vm.queueResize = queueResize;
+
+    await wrapper.setProps({ value: 'a\nmuch\nlonger\nvalue\nset\nfrom\noutside' });
+
+    expect(queueResize).not.toHaveBeenCalled();
+  });
+
+  it('should recalculate its height on user input', async() => {
+    const wrapper = mount(TextAreaAutoGrow, { props: { value: '' } });
+
+    const queueResize = jest.fn();
+
+    wrapper.vm.queueResize = queueResize;
+
+    await wrapper.find('textarea').setValue('typed value');
+
+    expect(queueResize).toHaveBeenCalledWith();
+  });
+
+  it('should register a window resize listener when resizeOnValueChangeAndResizeWindow is set', () => {
+    const addSpy = jest.spyOn(window, 'addEventListener');
+
+    const wrapper = mount(TextAreaAutoGrow, { props: { value: 'initial', resizeOnValueChangeAndResizeWindow: true } });
+
+    const resizeListener = addSpy.mock.calls.find(([event]) => event === 'resize')?.[1];
+
+    expect(resizeListener).toBe(wrapper.vm.queueResize);
+
+    addSpy.mockRestore();
+  });
+
+  it('should not register a window resize listener by default', () => {
+    const addSpy = jest.spyOn(window, 'addEventListener');
+
+    mount(TextAreaAutoGrow, { props: { value: 'initial' } });
+
+    const resizeListener = addSpy.mock.calls.find(([event]) => event === 'resize')?.[1];
+
+    expect(resizeListener).toBeUndefined();
+
+    addSpy.mockRestore();
+  });
+
+  it('should recalculate its height when a window resize fires and resizeOnValueChangeAndResizeWindow is set', () => {
+    jest.useFakeTimers();
+    const component = TextAreaAutoGrow as unknown as { methods: Record<string, () => void> };
+    const autoSizeSpy = jest.spyOn(component.methods, 'autoSize');
+
+    mount(TextAreaAutoGrow, { props: { value: 'initial', resizeOnValueChangeAndResizeWindow: true } });
+    autoSizeSpy.mockClear();
+
+    window.dispatchEvent(new Event('resize'));
+    jest.advanceTimersByTime(150); // queueResize is debounced (100ms)
+
+    expect(autoSizeSpy).toHaveBeenCalledWith(expect.any(Event));
+
+    autoSizeSpy.mockRestore();
+    jest.useRealTimers();
+  });
+
+  it('should remove the window resize listener when unmounted', () => {
+    const removeSpy = jest.spyOn(window, 'removeEventListener');
+
+    const wrapper = mount(TextAreaAutoGrow, { props: { value: 'initial', resizeOnValueChangeAndResizeWindow: true } });
+    const { queueResize } = wrapper.vm;
+
+    wrapper.unmount();
+
+    expect(removeSpy).toHaveBeenCalledWith('resize', queueResize);
+
+    removeSpy.mockRestore();
+  });
+});

package/rancher-components/Pill/RcTag/RcTag.vue

@@ -28,7 +28,8 @@ const emit = defineEmits(['close']);
 <style lang="scss" scoped>
 .rc-tag {
     display: inline-flex;
-    padding: 1px 8px;
+    min-height: 24px;
+    padding: 2px 8px;
     align-items: center;
     gap: 8px;
 
@@ -41,7 +42,7 @@ const emit = defineEmits(['close']);
     font-size: 13px;
     font-style: normal;
     font-weight: 400;
-    line-height: 22px;
+    line-height: 20px;
     color: var(--body-text);
 
     button {

package/rancher-components/RcButton/RcButton.test.ts

@@ -139,6 +139,109 @@ describe('rcButton.vue', () => {
     });
   });
 
+  describe('space key navigation', () => {
+    it('triggers click when Space is pressed on a link button', async() => {
+      const to = { name: 'some-route' };
+      const wrapper = mount(RcButton, {
+        props:  { to },
+        global: { stubs: { RouterLink: RouterLinkStub } },
+      });
+
+      const link = wrapper.findComponent(RouterLinkStub);
+      const clickSpy = jest.spyOn(link.element, 'click');
+
+      await link.trigger('keyup', { key: ' ' });
+
+      expect(clickSpy).toHaveBeenCalledWith();
+    });
+
+    it('does not manually trigger click when Space is pressed on a regular button', async() => {
+      const wrapper = mount(RcButton);
+      const button = wrapper.find('button');
+      const clickSpy = jest.spyOn(button.element, 'click');
+
+      await button.trigger('keyup', { key: ' ' });
+
+      expect(clickSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('to and href mutual exclusion', () => {
+    it('warns when both "to" and "href" props are provided', () => {
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      mount(RcButton, {
+        props:  { to: '/foo', href: 'https://example.com' },
+        global: { stubs: { RouterLink: RouterLinkStub } },
+      });
+
+      expect(warnSpy).toHaveBeenCalledWith('[RcButton] "to" and "href" are mutually exclusive. Provide only one.');
+      warnSpy.mockRestore();
+    });
+
+    it('does not warn when only "to" is provided', () => {
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      mount(RcButton, {
+        props:  { to: '/foo' },
+        global: { stubs: { RouterLink: RouterLinkStub } },
+      });
+
+      expect(warnSpy).not.toHaveBeenCalledWith('[RcButton] "to" and "href" are mutually exclusive. Provide only one.');
+      warnSpy.mockRestore();
+    });
+
+    it('does not warn when only "href" is provided', () => {
+      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      mount(RcButton, { props: { href: 'https://example.com' } });
+
+      expect(warnSpy).not.toHaveBeenCalledWith('[RcButton] "to" and "href" are mutually exclusive. Provide only one.');
+      warnSpy.mockRestore();
+    });
+  });
+
+  describe('href prop', () => {
+    it('renders as an <a> element when "href" prop is provided', () => {
+      const wrapper = mount(RcButton, { props: { href: 'https://example.com' } });
+
+      expect(wrapper.find('a').exists()).toBe(true);
+      expect(wrapper.find('button').exists()).toBe(false);
+    });
+
+    it('sets the href attribute on the rendered anchor', () => {
+      const href = 'https://example.com';
+      const wrapper = mount(RcButton, { props: { href } });
+
+      expect(wrapper.find('a').attributes('href')).toStrictEqual(href);
+    });
+
+    it('sets role="link" when rendered as an anchor', () => {
+      const wrapper = mount(RcButton, { props: { href: 'https://example.com' } });
+
+      expect(wrapper.find('a').attributes('role')).toStrictEqual('link');
+    });
+
+    it('applies button classes when rendered as an anchor', () => {
+      const wrapper = mount(RcButton, { props: { href: 'https://example.com', variant: 'secondary' } });
+      const anchor = wrapper.find('a');
+
+      expect(anchor.classes()).toContain('rc-button');
+      expect(anchor.classes()).toContain('btn');
+      expect(anchor.classes()).toContain('variant-secondary');
+    });
+
+    it('triggers click when Space is pressed on an anchor', async() => {
+      const wrapper = mount(RcButton, { props: { href: 'https://example.com' } });
+      const anchor = wrapper.find('a');
+      const clickSpy = jest.spyOn(anchor.element, 'click');
+
+      await anchor.trigger('keyup', { key: ' ' });
+
+      expect(clickSpy).toHaveBeenCalledWith();
+    });
+  });
+
   describe('to prop', () => {
     it('renders as a <button> when no "to" prop is provided', () => {
       const wrapper = mount(RcButton);