@rancher/shell 3.0.8 → 3.0.9-rc.2

package/rancher-components/RcButton/RcButton.vue

@@ -5,36 +5,82 @@
  *
  * Example:
  *
- * <rc-button primary @click="doAction">Perform an Action</rc-button>
+ * <rc-button variant="primary" @click="doAction">Perform an Action</rc-button>
  */
 import { computed, ref } from 'vue';
-import { ButtonRoleProps, ButtonSizeProps } from './types';
-
-const buttonRoles: { role: keyof ButtonRoleProps, className: string }[] = [
-  { role: 'primary', className: 'role-primary' },
-  { role: 'secondary', className: 'role-secondary' },
-  { role: 'tertiary', className: 'role-tertiary' },
-  { role: 'link', className: 'role-link' },
-  { role: 'multiAction', className: 'role-multi-action' },
-  { role: 'ghost', className: 'role-ghost' },
+import {
+  ButtonVariantProps, ButtonSizeProps, ButtonVariantNewProps, ButtonSizeNewProps, ButtonSize,
+  IconProps
+} from './types';
+import RcIcon from '@components/RcIcon/RcIcon.vue';
+
+const buttonVariants: { variant: keyof ButtonVariantProps, className: string }[] = [
+  { variant: 'primary', className: 'variant-primary' },
+  { variant: 'secondary', className: 'variant-secondary' },
+  { variant: 'tertiary', className: 'variant-tertiary' },
+  { variant: 'link', className: 'variant-link' },
+  { variant: 'multiAction', className: 'variant-multi-action' },
+  { variant: 'ghost', className: 'variant-ghost' },
 ];
 
 const buttonSizes: { size: keyof ButtonSizeProps, className: string }[] = [
   { size: 'small', className: 'btn-sm' },
 ];
 
-const props = defineProps<ButtonRoleProps & ButtonSizeProps>();
+const buttonSizesNew: { size: ButtonSize, className: string }[] = [
+  { size: 'small', className: 'btn-small' },
+  { size: 'medium', className: 'btn-medium' },
+  { size: 'large', className: 'btn-large' },
+];
 
-const buttonClass = computed(() => {
-  const activeRole = buttonRoles.find(({ role }) => props[role]);
-  const isButtonSmall = buttonSizes.some(({ size }) => props[size]);
+const props = withDefaults(defineProps<ButtonVariantProps & ButtonSizeProps & ButtonVariantNewProps & ButtonSizeNewProps & IconProps>(), { size: 'medium' });
 
-  return {
-    btn: true,
+const activeVariantClassName = computed(() => {
+  if (props.variant === 'multiAction' || props.multiAction) {
+    console.warn('[RcButton] The "multiAction" variant is deprecated and will be removed in a future version.'); // eslint-disable-line no-console
+  }
+
+  const activeVariant = buttonVariants.find(({ variant }) => props[variant]);
+
+  if (activeVariant) {
+    console.warn( // eslint-disable-line no-console
+      `[RcButton] The "${ activeVariant.variant }" prop is deprecated and will be removed in a future version. ` +
+      `Please use variant="${ activeVariant.variant }" instead.`
+    );
+
+    return activeVariant.className;
+  } else {
+    const variantConfig = buttonVariants.find(({ variant }) => variant === props.variant);
+
+    return variantConfig?.className || 'variant-primary';
+  }
+});
+
+const activeSizeClassName = computed(() => {
+  const activeSize = buttonSizes.find(({ size }) => props[size]);
+
+  if (activeSize) {
+    /* eslint-disable no-console */
+    console.warn(
+      `[RcButton] The "${ activeSize.size }" prop is deprecated and will be removed in a future version. ` +
+      `Please use size="${ activeSize.size }" instead.`
+    );
+    /* eslint-enable no-console */
 
-    [activeRole?.className || 'role-primary']: true,
+    return activeSize.className;
+  } else {
+    const sizeConfig = buttonSizesNew.find(({ size }) => size === props.size);
+
+    return sizeConfig?.className || '';
+  }
+});
 
-    'btn-sm': isButtonSmall,
+const buttonClass = computed(() => {
+  return {
+    'rc-button':                    true,
+    btn:                            true,
+    [activeVariantClassName.value]: true,
+    [activeSizeClassName.value]:    !!activeSizeClassName.value,
   };
 });
 
@@ -53,33 +99,142 @@ defineExpose({ focus });
     role="button"
     :class="{ ...buttonClass }"
   >
-    <slot name="before">
-      <!-- Empty Content -->
+    <slot
+      v-if="$slots.before || props.leftIcon"
+      name="before"
+    >
+      <RcIcon
+        v-if="props.leftIcon"
+        class="left-icon"
+        :type="props.leftIcon"
+        size="inherit"
+      />
     </slot>
     <slot>
       <!-- Empty Content -->
     </slot>
-    <slot name="after">
-      <!-- Empty Content -->
+    <slot
+      v-if="$slots.after || props.rightIcon"
+      name="after"
+    >
+      <RcIcon
+        v-if="props.rightIcon"
+        class="right-icon"
+        :type="props.rightIcon"
+        size="inherit"
+      />
     </slot>
   </button>
 </template>
 
 <style lang="scss" scoped>
 button {
-  &.role-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  // Much of the styling in here came from _button.scss. Because we're making changes from role to variant and we don't want to impact existing use cases we're pulling in some of these styles. We should in the long run deprecate that file.
+  // Variant styles
+  &.variant-primary {
+    background: var(--primary);
+    color: var(--primary-text);
+
+    &:hover, &._hover {
+      background-color: var(--primary-hover-bg);
+      color: var(--primary-text);
+    }
+
     &:focus, &.focused {
+      background-color: var(--primary-hover-bg);
+      color: var(--primary-text);
+    }
+
+    &:focus-visible {
       @include focus-outline;
-      outline-offset: -2px;
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      background: var(--primary);
+      color: var(--primary-text);
+      opacity: 0.5;
+    }
+  }
+
+  &.variant-secondary {
+    background: var(--secondary, transparent);
+    color: var(--on-secondary, var(--primary));
+    border: solid 1px var(--secondary-border, var(--primary));
+
+    &:hover, &._hover {
+      background: var(--secondary-hover, transparent);
+      color: var(--on-secondary, var(--lightest));
+    }
+
+    &:focus, &.focused {
+      background-color: var(--secondary-hover, var(--primary-hover-bg));
+      color: var(--on-secondary, var(--primary-text));
+    }
+
+    &:focus-visible {
+      @include focus-outline;
+      outline-offset: 2px;
     }
+  }
+
+  &.variant-tertiary {
+    background: var(--tertiary, var(--accent-btn));
+    color: var(--on-tertiary, var(--primary));
+    border: solid 1px var(--tertiary-border, var(--primary));
 
     &:hover {
+      background: var(--tertiary-hover, var(--accent-btn));
+      color: var(--on-tertiary-hover, var(--lightest));
+    }
+
+    &:focus, &.focused {
+      background-color: var(--tertiary-hover, var(--primary-hover-bg));
+      color: var(--on-tertiary, var(--primary-text));
+    }
+
+    &:focus-visible {
+      @include focus-outline;
+      outline-offset: 2px;
+    }
+  }
+
+  &.variant-link {
+    background: transparent;
+    color: var(--link);
+
+    &:hover, &._hover {
+      color: var(--lightest);
       background-color: var(--accent-btn);
       box-shadow: none;
     }
+
+    &:focus, &.focused {
+      @include focus-outline;
+      outline-offset: -2px;
+      background: transparent;
+      color: var(--link);
+      box-shadow: none;
+    }
+
+    &:focus-visible {
+      @include focus-outline;
+      outline-offset: 2px;
+    }
   }
 
-  &.role-ghost {
+  &.variant-multi-action {
+    background: var(--accent-btn);
+    border: solid thin var(--primary);
+    color: var(--primary);
+    border-radius: 2px;
+  }
+
+  &.variant-ghost {
     padding: 0;
     background-color: transparent;
 
@@ -93,4 +248,41 @@ button {
       outline-offset: 0;
     }
   }
+
+  // Size styles
+  &.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: 15px;
+      font-size: 12px;
+      min-height: 24px;
+
+      padding: 0 8px;
+      gap: 8px;
+    }
+  }
+
+  &.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: 18px;
+      font-size: 14px;
+      min-height: 32px;
+
+      padding: 0 12px;
+      gap: 8px;
+    }
+  }
+
+  &.btn-large {
+    // This is the default size brought by the global button styling
+    &, &:not(.btn-sm) {
+      line-height: 20px;
+      font-size: 16px;
+      min-height: 40px;
+
+      padding: 0 16px;
+      gap: 12px;
+    }
+  }
 }</style>

package/rancher-components/RcButton/types.ts

@@ -1,18 +1,44 @@
+import { RcIconType } from '@components/RcIcon/types';
+
 // TODO: 13211 Investigate why `InstanceType<typeof RcButton>` fails prod builds
 // export type RcButtonType = InstanceType<typeof RcButton>
 export type RcButtonType = {
   focus: () => void;
 }
 
-export type ButtonRoleProps = {
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'link' | 'multiAction' | 'ghost';
+
+export type ButtonVariantNewProps = {
+  variant?: ButtonVariant;
+}
+
+/**
+ * @deprecated Use the `variant` property instead. These boolean props will be removed in a future version.
+ */
+export type ButtonVariantProps = {
   primary?: boolean;
   secondary?: boolean;
   tertiary?: boolean;
   link?: boolean;
   multiAction?: boolean;
   ghost?: boolean;
+
 }
 
+export type ButtonSize = 'small' | 'medium' | 'large';
+
+export type ButtonSizeNewProps = {
+  size?: ButtonSize;
+}
+
+/**
+ * @deprecated Use the `size` property instead. The `small` boolean prop will be removed in a future version.
+ */
 export type ButtonSizeProps = {
   small?: boolean;
 }
+
+export type IconProps = {
+  leftIcon?: RcIconType;
+  rightIcon?: RcIconType;
+}

package/rancher-components/RcDropdown/RcDropdownMenu.vue

@@ -9,8 +9,8 @@ import { RcDropdownMenuComponentProps, DropdownOption } from './types';
 import IconOrSvg from '@shell/components/IconOrSvg';
 
 withDefaults(defineProps<RcDropdownMenuComponentProps>(), {
-  buttonRole: 'primary',
-  buttonSize: undefined,
+  buttonVariant: 'primary',
+  buttonSize:    undefined,
 });
 
 const emit = defineEmits(['update:open', 'select']);
@@ -26,8 +26,8 @@ const hasOptions = (options: DropdownOption[]) => {
     @update:open="(e: boolean) => emit('update:open', e)"
   >
     <rc-dropdown-trigger
-      :[buttonRole]="true"
-      :[buttonSize]="true"
+      :variant="buttonVariant"
+      :size="buttonSize"
       :data-testid="dataTestid"
       :aria-label="buttonAriaLabel"
     >

package/rancher-components/RcDropdown/types.ts

@@ -1,6 +1,6 @@
 import { Ref, ref } from 'vue';
 import type { RcButtonType } from '@components/RcButton';
-import { ButtonRoleProps, ButtonSizeProps } from '@components/RcButton/types';
+import { ButtonVariant, ButtonSize } from '@components/RcButton/types';
 
 export type DropdownContext = {
   handleKeydown: () => void;
@@ -41,8 +41,8 @@ export type DropdownOption = {
 
 export type RcDropdownMenuComponentProps = {
   options: DropdownOption[];
-  buttonRole?: keyof ButtonRoleProps;
-  buttonSize?: keyof ButtonSizeProps;
+  buttonVariant?: ButtonVariant;
+  buttonSize?: ButtonSize;
   buttonAriaLabel?: string;
   dropdownAriaLabel?: string;
   dataTestid?: string;

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

@@ -48,4 +48,46 @@ describe('rcIcon.vue', () => {
 
     expect(wrapper.attributes('aria-hidden')).toBe('true');
   });
+
+  it('defaults the color to "inherit" when the status prop is omitted', () => {
+    const wrapper = shallowMount(RcIcon, {
+      props: {
+        size: 'medium',
+        type: 'search',
+      },
+    });
+
+    const vm = wrapper.vm as unknown as { color: string };
+
+    expect(vm.color).toBe('inherit');
+  });
+
+  it('uses "inherit" color when status is explicitly set to "inherit"', () => {
+    const wrapper = shallowMount(RcIcon, {
+      props: {
+        size:   'medium',
+        type:   'search',
+        status: 'inherit'
+      },
+    });
+
+    const vm = wrapper.vm as unknown as { color: string };
+
+    expect(vm.color).toBe('inherit');
+  });
+
+  it('uses appropriate color when status is provided with a specific value', () => {
+    const wrapper = shallowMount(RcIcon, {
+      props: {
+        size:   'medium',
+        type:   'search',
+        status: 'success'
+      },
+    });
+
+    const vm = wrapper.vm as unknown as { color: string };
+
+    expect(vm.color).not.toBe('inherit');
+    expect(vm.color).toContain('--rc-success');
+  });
 });

package/rancher-components/RcIcon/RcIcon.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { RcIconProps, RcIconType, RcIconSize } from '@components/RcIcon/types';
+import { RcIconSizeToCSS, RcIconTypeToClass, RcIconProps } from './types';
 import { computed } from 'vue';
 import { useStatusColors } from '@components/utils/status';
-const props = withDefaults(defineProps<RcIconProps>(), { size: 'small', ariaHidden: true });
+
+const props = withDefaults(defineProps<RcIconProps>(), {
+  size: 'small', ariaHidden: true, status: 'inherit'
+});
 const fontSize = computed(() => {
-  return RcIconSize[props.size];
+  return RcIconSizeToCSS[props.size];
 });
 
 const iconClass = computed(() => {
-  return RcIconType[props.type];
+  return RcIconTypeToClass[props.type];
 });
 
 const status = computed(() => {
@@ -19,10 +22,10 @@ const status = computed(() => {
   return 'none';
 });
 
-const { textColor } = useStatusColors({ status: status.value }, 'outlined');
+const { textColor } = useStatusColors(status, 'outlined');
 
 const color = computed(() => {
-  if (props.status === 'inherit') {
+  if (props.status === undefined || props.status === 'inherit') {
     return 'inherit';
   }
 

package/rancher-components/RcIcon/types.ts

@@ -1,6 +1,6 @@
-import { Status } from '../utils/status';
+import { Status } from '@components/utils/status';
 
-export const RcIconType = {
+export const RcIconTypeToClass = {
   actions:                 'icon-actions',
   ai:                      'icon-ai',
   'alert-alt':             'icon-alert-alt',
@@ -145,16 +145,20 @@ export const RcIconType = {
   windows:                 'icon-windows',
 };
 
-export const RcIconSize = {
-  large:  '25px',
-  medium: '18px',
-  small:  '14px',
-  none:   undefined
+export const RcIconSizeToCSS = {
+  large:   '25px',
+  medium:  '18px',
+  small:   '14px',
+  inherit: 'inherit'
 };
 
+export type RcIconSize = keyof typeof RcIconSizeToCSS;
+
+export type RcIconType = keyof typeof RcIconTypeToClass;
+
 export interface RcIconProps {
-  size: keyof typeof RcIconSize;
-  type: keyof typeof RcIconType;
+  type: RcIconType;
+  size?: RcIconSize;
   ariaHidden?: boolean;
   status?: Status | 'inherit';
 }

package/rancher-components/utils/status.test.ts

@@ -1,5 +1,5 @@
 
-import { reactive } from 'vue';
+import { ref } from 'vue';
 import { wrapIfVar, useStatusColors, Status } from './status';
 
 describe('utils: status', () => {
@@ -18,20 +18,22 @@ describe('utils: status', () => {
   });
 
   describe('useStatusColors', () => {
-    it.each([
+    const statuses: Status[] = [
       'info',
       'success',
       'warning',
       'error',
       'unknown',
       'none'
-    ])('solid: should return the correct colors for status: %p', (status: Status) => {
-      const props = reactive({ status });
+    ];
+
+    it.each(statuses)('solid: should return the correct colors for status: %p', (status) => {
+      const statusRef = ref(status as Status);
       const {
         borderColor,
         backgroundColor,
         textColor
-      } = useStatusColors(props, 'solid');
+      } = useStatusColors(statusRef, 'solid');
 
       expect(borderColor.value).toBe(`var(--rc-${ status })`);
       if (status !== 'none') {
@@ -41,20 +43,13 @@ describe('utils: status', () => {
       expect(textColor.value).toBe(`var(--rc-${ status }-secondary)`);
     });
 
-    it.each([
-      'info',
-      'success',
-      'warning',
-      'error',
-      'unknown',
-      'none'
-    ])('outlined: should return the correct colors for status: %p', (status: Status) => {
-      const props = reactive({ status });
+    it.each(statuses)('outlined: should return the correct colors for status: %p', (status) => {
+      const statusRef = ref(status as Status);
       const {
         borderColor,
         backgroundColor,
         textColor
-      } = useStatusColors(props, 'outlined');
+      } = useStatusColors(statusRef, 'outlined');
 
       expect(borderColor.value).toBe(`var(--rc-${ status }-secondary)`);
       if (status !== 'none') {

package/rancher-components/utils/status.ts

@@ -1,4 +1,4 @@
-import { computed } from 'vue';
+import { computed, Ref } from 'vue';
 
 export const StatusDefinitions = {
   info: {
@@ -28,7 +28,6 @@ export const StatusDefinitions = {
 };
 
 export type Status = keyof typeof StatusDefinitions;
-export type StatusObject = { status: Status };
 export type Style = 'solid' | 'outlined';
 
 export function wrapIfVar(colorVar: string) {
@@ -38,13 +37,13 @@ export function wrapIfVar(colorVar: string) {
 /**
  * A composable to make it easier to use status colors in multiple components
  *
- * @param propsWithStatus The props which contain a `status: Status` property. Ideally I'd prefer to just pass status but doing so either forces the consumer to wrap the values in a Ref or this code is no longer reactive.
+ * @param status A Ref containing the status value
  * @param style {@link Style} Will the block of code being using the solid or outlined styling
  * @returns An object containing the relevant style colors
  */
-export function useStatusColors(propsWithStatus: StatusObject, style: Style) {
+export function useStatusColors(status: Ref<Status>, style: Style) {
   const statusColors = computed(() => {
-    return StatusDefinitions[propsWithStatus.status];
+    return StatusDefinitions[status.value];
   });
   const isOutlined = style === 'outlined';
 
@@ -55,7 +54,7 @@ export function useStatusColors(propsWithStatus: StatusObject, style: Style) {
   });
 
   const backgroundColor = computed(() => {
-    if (propsWithStatus.status === 'none') {
+    if (status.value === 'none') {
       return 'none';
     }
     const colorVar = isOutlined ? statusColors.value.secondary : statusColors.value.primary;

package/store/aws.js

@@ -2,6 +2,7 @@ import { sortBy } from '@shell/utils/sort';
 import { randomStr } from '@shell/utils/string';
 import { FetchHttpHandler } from '@smithy/fetch-http-handler';
 import { isArray, addObjects } from '@shell/utils/array';
+import { formatAWSError } from '@shell/utils/error';
 
 export const state = () => {
   return {
@@ -247,21 +248,26 @@ export const actions = {
     opt = opt || {};
 
     while ( hasNext ) {
-      const res = await client[cmd](opt);
+      try {
+        const res = await client[cmd](opt);
 
-      if ( !key ) {
-        key = Object.keys(res).find((x) => isArray(res[x]));
-      }
+        if ( !key ) {
+          key = Object.keys(res).find((x) => isArray(res[x]));
+        }
 
-      addObjects(out, res[key]);
-      if (res.NextToken) {
-        opt.NextToken = res.NextToken;
-        hasNext = true;
-      } else if (res.Marker) {
-        opt.Marker = res.Marker;
-        hasNext = true;
-      } else {
+        addObjects(out, res[key]);
+        if (res.NextToken) {
+          opt.NextToken = res.NextToken;
+          hasNext = true;
+        } else if (res.Marker) {
+          opt.Marker = res.Marker;
+          hasNext = true;
+        } else {
+          hasNext = false;
+        }
+      } catch (err) {
         hasNext = false;
+        throw formatAWSError(err);
       }
     }
 

package/store/index.js

@@ -36,7 +36,8 @@ import { sortBy } from '@shell/utils/sort';
 import { addParam } from '@shell/utils/url';
 import semver from 'semver';
 import { STORE, BLANK_CLUSTER } from '@shell/store/store-types';
-import { isDevBuild } from '@shell/utils/version';
+import { getReleaseNotesURL } from '@shell/utils/version';
+import { getVersionData } from '@shell/config/version';
 import { markRaw } from 'vue';
 import paginationUtils from '@shell/utils/pagination-utils';
 import { addReleaseNotesNotification } from '@shell/utils/release-notes';
@@ -628,14 +629,9 @@ export const getters = {
 
   releaseNotesUrl(state, getters) {
     const version = getters['management/byId'](MANAGEMENT.SETTING, SETTING.VERSION_RANCHER)?.value;
+    const isPrime = getVersionData().RancherPrime === 'true';
 
-    const base = 'https://github.com/rancher/rancher/releases';
-
-    if (version && !isDevBuild(version)) {
-      return `${ base }/tag/${ version }`;
-    }
-
-    return `${ base }/latest`;
+    return getReleaseNotesURL(isPrime, version);
   },
 
   ...gcGetters

package/store/type-map.utils.ts

@@ -142,7 +142,7 @@ export function headerFromSchemaColString(colName: string, schema: Schema, rootG
 export function headerFromSchemaCol(col: SchemaAttributeColumn, rootGetters: VuexStoreGetters, pagination: boolean, ageColumn: TableColumn): TableColumn {
   let formatter, width, formatterOpts;
 
-  if ( (col.format === '' || col.format === 'date') && col.name === 'Age' && ageColumn ) {
+  if ( (col.format === '' || col.format === 'date' || col.type === 'date') && col.name.toLowerCase() === 'age' && ageColumn ) {
     return ageColumn;
   }