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

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/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);

package/rancher-components/RcButton/RcButton.vue

@@ -7,8 +7,7 @@
  *
  * <rc-button variant="primary" @click="doAction">Perform an Action</rc-button>
  */
-import { computed, ref, resolveComponent } from 'vue';
-import type { RouteLocationRaw } from 'vue-router';
+import { computed, ref, resolveComponent, watchEffect } from 'vue';
 import {
   ButtonVariantProps,
   ButtonSizeProps,
@@ -16,6 +15,7 @@ import {
   ButtonSizeNewProps,
   ButtonSize,
   IconProps,
+  NavigationProps,
 } from './types';
 import RcIcon from '@components/RcIcon/RcIcon.vue';
 
@@ -44,16 +44,48 @@ const props = withDefaults(
         ButtonSizeProps &
         ButtonVariantNewProps &
         ButtonSizeNewProps &
-        IconProps & { to?: RouteLocationRaw }
+        IconProps &
+        NavigationProps
     >(),
   {
     size: 'medium',
     to:   undefined,
+    href: undefined,
   }
 );
 
-const tag = computed(() => (props.to ? resolveComponent('RouterLink') : 'button'));
-const role = computed(() => (props.to ? 'link' : 'button'));
+if (process.env.NODE_ENV !== 'production') {
+  watchEffect(() => {
+    if (props.to && props.href) {
+      console.warn('[RcButton] "to" and "href" are mutually exclusive. Provide only one.'); // eslint-disable-line no-console
+    }
+  });
+}
+
+const tag = computed(() => {
+  if (props.to) {
+    return resolveComponent('RouterLink');
+  }
+  if (props.href) {
+    return 'a';
+  }
+
+  return 'button';
+});
+
+const role = computed(() => (props.to || props.href ? 'link' : 'button'));
+
+const linkProps = computed(() => {
+  if (props.to) {
+    return { to: props.to };
+  }
+
+  if (props.href) {
+    return { href: props.href };
+  }
+
+  return {};
+});
 
 const activeVariantClassName = computed(() => {
   if (props.variant === 'multiAction' || props.multiAction) {
@@ -110,6 +142,22 @@ const focus = () => {
   RcFocusTarget?.value?.focus();
 };
 
+const preventScroll = (event: KeyboardEvent) => {
+  if (tag.value === 'button') {
+    return;
+  }
+
+  event.preventDefault();
+};
+
+const handleSpace = (event: KeyboardEvent) => {
+  if (tag.value === 'button') {
+    return;
+  }
+
+  (event.target as HTMLElement).click();
+};
+
 defineExpose({ focus });
 </script>
 
@@ -118,8 +166,10 @@ defineExpose({ focus });
     :is="tag"
     ref="RcFocusTarget"
     :role="role"
-    :to="to"
+    v-bind="linkProps"
     :class="{ ...buttonClass }"
+    @keydown.space="preventScroll"
+    @keyup.space="handleSpace"
   >
     <slot
       v-if="$slots.before || props.leftIcon"
@@ -185,9 +235,12 @@ defineExpose({ focus });
     }
 
     &:disabled {
-      background: var(--primary);
-      color: var(--primary-text);
-      opacity: 0.5;
+      &, &:hover, &:focus {
+        color: var(--disabled-text);
+        background: var(--disabled-bg);
+        border-color: var(--disabled-bg);
+        cursor: not-allowed;
+      }
     }
   }
 
@@ -210,6 +263,15 @@ defineExpose({ focus });
       @include focus-outline;
       outline-offset: 2px;
     }
+
+    &:disabled {
+      &, &:hover, &:focus {
+        color: var(--disabled-text);
+        background: var(--disabled-bg);
+        border-color: var(--disabled-bg);
+        cursor: not-allowed;
+      }
+    }
   }
 
   &.variant-tertiary {
@@ -231,6 +293,15 @@ defineExpose({ focus });
       @include focus-outline;
       outline-offset: 2px;
     }
+
+    &:disabled {
+      &, &:hover, &:focus {
+        color: var(--disabled-text);
+        background: var(--disabled-bg);
+        border-color: var(--disabled-bg);
+        cursor: not-allowed;
+      }
+    }
   }
 
   &.variant-link {
@@ -283,11 +354,15 @@ defineExpose({ focus });
   &.btn-small {
     //:not(.btn-sm) is being used to make the style more specific to override global styles. We may want to get rid of those styles at some point.
     &, &:not(.btn-sm) {
-      line-height: 140%;
+      // Unitless ratio chosen so font-size * line-height (12px * 4/3 = 16px)
+      // is a whole pixel value. A fractional computed line-height (e.g. the
+      // previous 140% = 16.8px) shifts text ~1px off-center within the
+      // flex-centered button in Chrome, but not in Firefox.
+      line-height: calc(4 / 3);
       font-size: 12px;
       min-height: 24px;
 
-      padding: 0 8px;
+      padding: var(--rc-button-padding, 0 8px);
       gap: 8px;
     }
   }
@@ -295,11 +370,13 @@ defineExpose({ focus });
   &.btn-medium {
     //:not(.btn-sm) is being used to make the style more specific to override global styles. We may want to get rid of those styles at some point.
     &, &:not(.btn-sm) {
-      line-height: 140%;
+      // Unitless ratio chosen so font-size * line-height (14px * 10/7 = 20px)
+      // is a whole pixel value. See note in .btn-small for why this matters.
+      line-height: calc(10 / 7);
       font-size: 14px;
       min-height: 32px;
 
-      padding: 0 12px;
+      padding: var(--rc-button-padding, 0 12px);
       gap: 8px;
     }
   }
@@ -307,11 +384,13 @@ defineExpose({ focus });
   &.btn-large {
     // This is the default size brought by the global button styling
     &, &:not(.btn-sm) {
-      line-height: 140%;
+      // Unitless ratio chosen so font-size * line-height (16px * 1.5 = 24px)
+      // is a whole pixel value. See note in .btn-small for why this matters.
+      line-height: 1.5;
       font-size: 16px;
       min-height: 40px;
 
-      padding: 0 16px;
+      padding: var(--rc-button-padding, 0 16px);
       gap: 12px;
     }
   }

package/rancher-components/RcButton/types.ts

@@ -1,5 +1,8 @@
+import type { RouteLocationRaw } from 'vue-router';
 import { RcIconType } from '@components/RcIcon/types';
 
+export type NavigationProps = { to?: RouteLocationRaw; href?: string }
+
 // TODO: 13211 Investigate why `InstanceType<typeof RcButton>` fails prod builds
 // export type RcButtonType = InstanceType<typeof RcButton>
 export type RcButtonType = {

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

@@ -36,6 +36,24 @@ describe('rcItemCard', () => {
     expect(wrapper.findAll(`[data-testid="item-card-header-statuses-status"]`)).toHaveLength(2);
   });
 
+  // Regression: when image.src is falsy, LazyImage must still render so its own
+  // empty-src fallback (generic catalog icon) is shown. Previously the template
+  // was gated by `v-else-if="image.src"` and showed an empty box for missing icons.
+  it.each(['medium', 'small'] as const)('renders LazyImage with an empty src when image.src is falsy (%s variant)', (variant) => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        variant,
+        image: { src: '', alt: { text: 'Logo' } },
+      }
+    });
+
+    const lazy = wrapper.findComponent({ name: 'LazyImage' });
+
+    expect(lazy.exists()).toBe(true);
+    expect(lazy.props('src')).toBe('');
+  });
+
   it('renders pill only in medium variant', () => {
     const wrapper = mount(RcItemCard, {
       props: {

package/rancher-components/RcItemCard/RcItemCard.vue

@@ -208,7 +208,7 @@ const cursorValue = computed(() => props.clickable ? 'pointer' : 'auto');
                   size="xxlarge"
                 />
               </template>
-              <template v-else-if="image.src">
+              <template v-else>
                 <LazyImage
                   :src="image.src"
                   :alt="imageAlt"
@@ -255,7 +255,7 @@ const cursorValue = computed(() => props.clickable ? 'pointer' : 'auto');
                       size="xlarge"
                     />
                   </template>
-                  <template v-else-if="image.src">
+                  <template v-else>
                     <LazyImage
                       :src="image.src"
                       :alt="imageAlt"

package/rancher-components/RcSection/RcSection.vue

@@ -33,9 +33,12 @@
  *   <p>Section content here</p>
  * </RcSection>
  */
-import { computed, inject, provide, type Ref } from 'vue';
+import {
+  computed, inject, provide, useTemplateRef, type Ref
+} from 'vue';
 import RcButton from '@components/RcButton/RcButton.vue';
 import RcIcon from '@components/RcIcon/RcIcon.vue';
+import { useInSummary } from '@shell/components/TableOfContents/composables';
 import type { RcSectionProps, SectionBackground } from './types';
 
 const RC_SECTION_BG_KEY = 'rc-section-background';
@@ -58,6 +61,24 @@ provide(RC_SECTION_BG_KEY, resolvedBackground);
 
 const expanded = defineModel<boolean>('expanded', { default: true });
 
+// Expose summary, name, and a display label on the component public instance so
+// TOC discovery can access component
+const displayTitle = computed(() => props.title);
+
+const name = 'RcSection';
+
+// Register this section in form summary/table-of-contents context (if provided)
+const sectionRef = useTemplateRef<HTMLElement>('rc-section-summarized-container');
+const { summary } = useInSummary({
+  label:      displayTitle,
+  scrollTo:   () => sectionRef.value?.scrollIntoView(true),
+  elementRef: sectionRef,
+});
+
+defineExpose({
+  summary, displayTitle, name
+});
+
 const hasHeader = computed(() => {
   return props.mode === 'with-header';
 });
@@ -84,7 +105,10 @@ function toggle() {
 </script>
 
 <template>
-  <div :class="sectionClass">
+  <div
+    ref="rc-section-summarized-container"
+    :class="sectionClass"
+  >
     <div
       v-if="hasHeader"
       class="section-header"
@@ -203,7 +227,8 @@ function toggle() {
   color: var(--body-text, inherit);
 }
 
-button.btn-medium.toggle-button {
+// TODO: Considering removing specificity override when RcButton sizes are refactored (#18062)
+.left-wrapper :deep(button.toggle-button.btn-medium:not(.btn-sm)) {
   flex-shrink: 0;
   font-size: 16px;
   color: var(--body-text, inherit);

package/scripts/extension/helm/package/Dockerfile

@@ -1,4 +1,4 @@
-FROM registry.suse.com/bci/bci-base:15.5
+FROM registry.suse.com/bci/bci-base:15.7
 
 RUN zypper -n install nginx jq
 

package/scripts/test-plugins-build.sh

@@ -240,7 +240,8 @@ clone_repo_test_extension_build "rancher" "kubewarden-ui" "kubewarden"
 # clone_repo_test_extension_build "rancher" "elemental-ui" "elemental"
 clone_repo_test_extension_build "neuvector" "manager-ext" "neuvector-ui-ext"
 # clone_repo_test_extension_build "StackVista" "rancher-extension-stackstate" "observability"
-clone_repo_test_extension_build "harvester" "harvester-ui-extension" "harvester"
+# Uncomment once https://github.com/harvester/harvester/issues/10691 is resolved
+#clone_repo_test_extension_build "harvester" "harvester-ui-extension" "harvester"
 clone_repo_test_extension_build "rancher" "ali-ui" "ali"
 clone_repo_test_extension_build "rancher" "virtual-clusters-ui" "virtual-clusters"
 # clone_repo_test_extension_build "rancher" "rancher-ai-ui" "rancher-ai-ui"