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

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/index.ts

@@ -1,2 +1,2 @@
 export { default as RcButton } from './RcButton.vue';
-export type { RcButtonType } from './types';
+export type { RcButtonType, ButtonSize } from './types';

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/RcDropdown/RcDropdownTrigger.vue

@@ -3,9 +3,13 @@
  * A button that opens a menu. Used in conjunction with `RcDropdown.vue`.
  */
 import { inject, onMounted, ref } from 'vue';
-import { RcButton, RcButtonType } from '@components/RcButton';
+import { RcButton, RcButtonType, ButtonSize } from '@components/RcButton';
 import { DropdownContext, defaultContext } from './types';
 
+defineProps<{
+  size?: ButtonSize,
+}>();
+
 const {
   showMenu,
   registerTrigger,
@@ -32,6 +36,7 @@ defineExpose({ focus });
     role="button"
     aria-haspopup="menu"
     :aria-expanded="isMenuOpen"
+    :size="size"
     @keydown.enter.space="handleKeydown"
     @click="showMenu(true)"
   >

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"

package/store/__tests__/features.test.ts

@@ -0,0 +1,131 @@
+import {
+  getters,
+  actions,
+  mapFeature,
+  create,
+  MULTI_CLUSTER,
+  LEGACY,
+  RKE2,
+} from '@shell/store/features';
+import { MANAGEMENT } from '@shell/config/types';
+
+describe('features store', () => {
+  describe('create', () => {
+    it('returns the feature name', () => {
+      const name = 'test-feature-create-only';
+      const result = create(name, true);
+
+      expect(result).toStrictEqual(name);
+    });
+  });
+
+  describe('mapFeature', () => {
+    it('calls the features/get getter with the feature name', () => {
+      const mockGetFn = jest.fn(() => true);
+      const ctx = { $store: { getters: { 'features/get': mockGetFn } } };
+      const mapped = mapFeature('some-feature');
+
+      const result = mapped.get.call(ctx);
+
+      expect(mockGetFn).toHaveBeenCalledWith('some-feature');
+      expect(result).toBe(true);
+    });
+
+    it('set throws an error indicating the store is get-only', () => {
+      const mapped = mapFeature('some-feature');
+
+      expect(() => mapped.set(true)).toThrow('The feature store only supports getting');
+    });
+  });
+
+  describe('getters', () => {
+    describe('get', () => {
+      it('throws for an unknown feature name', () => {
+        const rootGetters = { 'management/byId': jest.fn(() => undefined) };
+
+        expect(() => getters.get({}, {}, {}, rootGetters)('unknown-feature-xyz')).toThrow('Unknown feature: unknown-feature-xyz');
+      });
+
+      it('returns entry.enabled from the server when an entry is found', () => {
+        const entry = { enabled: false };
+        const rootGetters = { 'management/byId': jest.fn(() => entry) };
+
+        const result = getters.get({}, {}, {}, rootGetters)(MULTI_CLUSTER);
+
+        expect(result).toBe(false);
+      });
+
+      it.each([
+        {
+          desc:     'multi-cluster-management (default true)',
+          feature:  MULTI_CLUSTER,
+          expected: true,
+        },
+        {
+          desc:     'legacy (default false)',
+          feature:  LEGACY,
+          expected: false,
+        },
+        {
+          desc:     'rke2 (default true)',
+          feature:  RKE2,
+          expected: true,
+        },
+      ])('returns the registered default when no server entry exists for $desc', ({ feature, expected }) => {
+        const rootGetters = { 'management/byId': jest.fn(() => undefined) };
+
+        const result = getters.get({}, {}, {}, rootGetters)(feature);
+
+        expect(result).toBe(expected);
+      });
+
+      it('calls management/byId with the MANAGEMENT.FEATURE type and the feature name', () => {
+        const byId = jest.fn(() => undefined);
+        const rootGetters = { 'management/byId': byId };
+
+        getters.get({}, {}, {}, rootGetters)(RKE2);
+
+        expect(byId).toHaveBeenCalledWith(MANAGEMENT.FEATURE, RKE2);
+      });
+    });
+  });
+
+  describe('actions', () => {
+    describe('loadServer', () => {
+      it('dispatches management/findAll when canList returns true', async() => {
+        const findAllResult = [{ name: 'feature-1' }];
+        const dispatch = jest.fn().mockResolvedValue(findAllResult);
+        const rootGetters = { 'management/canList': jest.fn(() => true) };
+
+        const result = await actions.loadServer({ rootGetters, dispatch });
+
+        expect(dispatch).toHaveBeenCalledWith(
+          'management/findAll',
+          { type: MANAGEMENT.FEATURE, opt: { watch: false } },
+          { root: true }
+        );
+        expect(result).toStrictEqual(findAllResult);
+      });
+
+      it('does not dispatch when canList returns false', async() => {
+        const dispatch = jest.fn();
+        const rootGetters = { 'management/canList': jest.fn(() => false) };
+
+        const result = await actions.loadServer({ rootGetters, dispatch });
+
+        expect(dispatch).not.toHaveBeenCalled();
+        expect(result).toBeUndefined();
+      });
+
+      it('calls management/canList with the MANAGEMENT.FEATURE type', async() => {
+        const canList = jest.fn(() => false);
+        const dispatch = jest.fn();
+        const rootGetters = { 'management/canList': canList };
+
+        await actions.loadServer({ rootGetters, dispatch });
+
+        expect(canList).toHaveBeenCalledWith(MANAGEMENT.FEATURE);
+      });
+    });
+  });
+});