@rancher/shell 3.0.9-rc.1 → 3.0.9-rc.3

package/rancher-components/RcItemCard/RcItemCard.vue

@@ -82,8 +82,8 @@ interface RcItemCardProps {
 
   /** Optional actions that will be displayed inside an action-menu
    *
-   * Each action should include an `action` name, which is emitted as a custom event when selected.
-   * To respond to the event, you must also register a matching event listener using the `@` syntax.
+   * Each action should include an `action` name, which is included in the payload
+   * of the 'action-invoked' event when the action is selected.
    *
    * Example:
    * <rc-item-card
@@ -94,8 +94,10 @@ interface RcItemCardProps {
    *       enabled: true
    *     }
    *   ]"
-   *   @focusSearch="focusSearch"
+   *   @action-invoked="handleActionInvoked"
    * />
+   *
+   * The handler receives a payload with { action: string, actionData: object, event: MouseEvent, ... }
    */
   actions?: DropdownOption[];
 
@@ -117,23 +119,9 @@ const props = defineProps<RcItemCardProps>();
 /**
  * Emits:
  * - 'card-click' when card is clicked or activated via keyboard.
- * - custom events defined in the `actions` prop, but only if the corresponding event listener is explicitly declared on the component.
+ * - 'action-invoked' when an action is selected from the action menu (only when `actions` prop is used).
  */
-const emit = defineEmits<{(e: 'card-click', value: ItemValue): void; (e: string, payload: unknown): void;}>();
-
-const actionListeners = computed(() => {
-  if (!props.actions) return {};
-
-  const listeners: Record<string, (payload: unknown) => void> = {};
-
-  for (const a of props.actions) {
-    if (a.action) {
-      listeners[a.action] = (payload: unknown) => emit(a.action, payload);
-    }
-  }
-
-  return listeners;
-});
+const emit = defineEmits<{(e: 'card-click', value?: ItemValue): void; (e: 'action-invoked', payload: unknown): void;}>();
 
 /**
  * Handles the card click while avoiding nested interactive elements
@@ -171,9 +159,10 @@ const contentText = computed(() => labelText(props.content));
 const statusTooltips = computed(() => props.header.statuses?.map((status) => labelText(status.tooltip)) || []);
 
 const cardMeta = computed(() => ({
-  ariaLabel: props.clickable ? t('itemCard.ariaLabel.clickable', { cardTitle: labelText(props.header.title) }) : undefined,
-  tabIndex:  props.clickable ? '0' : undefined,
-  role:      props.clickable ? 'button' : undefined
+  ariaLabel:       props.clickable ? t('itemCard.ariaLabel.clickable', { cardTitle: labelText(props.header.title) }) : undefined,
+  tabIndex:        props.clickable ? '0' : undefined,
+  role:            props.clickable ? 'button' : undefined,
+  actionMenuLabel: props.actions && t('itemCard.actionMenu.label', { cardTitle: labelText(props.header.title) })
 }));
 
 </script>
@@ -281,8 +270,9 @@ const cardMeta = computed(() => ({
               <rc-item-card-action class="item-card-header-action-menu">
                 <ActionMenu
                   data-testid="item-card-header-action-menu"
+                  :button-aria-label="cardMeta.actionMenuLabel"
                   :custom-actions="actions"
-                  v-on="actionListeners"
+                  @action-invoked="(payload) => emit('action-invoked', payload)"
                 />
               </rc-item-card-action>
             </template>

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/__tests__/auth.test.ts

@@ -10,7 +10,11 @@ import { createStore } from 'vuex';
 describe('action: redirectTo', () => {
   it('should include query parameters from redirect', async() => {
     jest.spyOn(window, 'window', 'get');
-    const store = { dispatch: jest.fn() };
+    const store = {
+      dispatch: jest.fn((x) => {
+        if (x === 'getAuthProvider') return { scopes: '' };
+      })
+    };
     const clientId = '123';
     const uri = 'anyURI';
     const scope = 'anything';
@@ -27,10 +31,14 @@ describe('action: redirectTo', () => {
   });
 
   it.each([
-    ['genericoidc', '://myhost/?redirect_uri=anyURI&scope=openid%20profile%20email&state=undefined'],
+    ['genericoidc', '://myhost/?redirect_uri=anyURI&scope=openid%20profile%20email%20groups&state=undefined'],
   ])('given provider %p should return URL %p', async(provider, expectation) => {
     jest.spyOn(window, 'window', 'get');
-    const store = { dispatch: jest.fn() };
+    const store = {
+      dispatch: jest.fn((x) => {
+        if (x === 'getAuthProvider') return { scopes: 'groups' };
+      })
+    };
     const uri = 'anyURI'; // This field is added anyway, so we set a random value
     const options = {
       provider,
@@ -61,7 +69,11 @@ describe('action: redirectTo', () => {
         test:        true,
         redirect:    false
       };
-      const store = { dispatch: jest.fn() };
+      const store = {
+        dispatch: jest.fn((x) => {
+          if (x === 'getAuthProvider') return { scopes: '' };
+        })
+      };
 
       jest.spyOn(window, 'window', 'get');
       const url = await actions.redirectTo(store as any, options);
@@ -79,7 +91,11 @@ describe('action: redirectTo', () => {
         test:        true,
         redirect:    false
       };
-      const store = { dispatch: jest.fn() };
+      const store = {
+        dispatch: jest.fn((x) => {
+          if (x === 'getAuthProvider') return { scopes: 'openid' };
+        })
+      };
 
       jest.spyOn(window, 'window', 'get');
       const url = await actions.redirectTo(store as any, options);

package/store/auth.js

@@ -228,12 +228,11 @@ export const actions = {
 
   async redirectTo({ state, commit, dispatch }, opt = {}) {
     const provider = opt.provider;
+    const driver = await dispatch('getAuthProvider', provider);
     let redirectUrl = opt.redirectUrl;
 
     if ( !redirectUrl ) {
-      const driver = await dispatch('getAuthProvider', provider);
-
-      redirectUrl = driver.redirectUrl;
+      redirectUrl = driver?.redirectUrl;
     }
     let returnToUrl = `${ window.location.origin }/verify-auth`;
 
@@ -266,6 +265,10 @@ export const actions = {
       scopes = [joinStringList(scopes[0], opt.scopes)];
     }
 
+    if (driver?.scopes) {
+      scopes = [joinStringList(scopes[0], driver.scopes)];
+    }
+
     let url = removeParam(redirectUrl, GITHUB_SCOPE);
 
     // TODO: #13457 - Verify use case of scopesJoinChar anywhere outside this repository

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;
   }
 

package/types/kube/kube-api.ts

@@ -25,11 +25,37 @@ export interface KubeLabelSelector {
  * https://kubernetes.io/docs/reference/generated/kubernetes-api/v1.31/#objectmeta-v1-meta
  */
 export interface KubeMetadata {
+  namespace?: string,
+  name: string
+
   labels?: { [key: string]: string },
   annotations?: { [key: string]: string },
 }
 
-export interface RancherKubeMetadata extends KubeMetadata {
-  namespace?: string,
-  name: string
+/**
+ * Kube API JSON response for LIST requests
+ */
+export interface KubeListResponse<T = any> {
+  kind: string,
+  apiVersion: string,
+
+  items: T[],
+
+  // Bucket for everything else (hopefully to remove once above populated)
+  [key: string]: any
+}
+
+/**
+ * Kube API JSON response for GET requests
+ */
+export interface KubeGetResponse {
+  kind: string,
+  apiVersion: string,
+
+  metadata: KubeMetadata,
+  spec: any,
+  status: any,
+
+  // Bucket for everything else (hopefully to remove once above populated)
+  [key: string]: any
 }

package/types/rancher/steve.api.ts

@@ -0,0 +1,40 @@
+import { KubeGetResponse, KubeMetadata } from '@shell/types/kube/kube-api';
+
+/**
+ * Collection of string based values used by the Steve API response's `code` field
+ */
+export const STEVE_RESPONSE_CODE = {
+  /**
+   * When the query param `revision` is sent and it's not in the vai cache then return this error
+   */
+  UNKNOWN_REVISION: 'unknown revision'
+};
+
+/**
+ * Steve API JSON response for LIST requests
+ */
+export interface SteveListResponse<T = any> {
+  actions: any,
+  count: number,
+  data: T[],
+  links: any,
+  resourceType: string,
+  revision: string,
+  type: string,
+
+  // Bucket for everything else (hopefully to remove once above populated)
+  [key: string]: any
+}
+
+/**
+ * Steve API JSON response for GET requests
+ */
+export interface SteveGetResponse extends KubeGetResponse {
+  // Rancher specific properties (there are more)
+  id: string,
+
+  // Bucket for everything else (hopefully to remove once above populated)
+  [key: string]: any
+}
+
+export type RancherKubeMetadata = KubeMetadata