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

package/components/templates/default.vue

@@ -24,6 +24,8 @@ import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import { getClusterFromRoute, getProductFromRoute } from '@shell/utils/router';
 import SideNav from '@shell/components/SideNav';
 import { Layout } from '@shell/types/window-manager';
+import { RcButton } from '@components/RcButton';
+import { CLUSTER_SHELL } from '@shell/store/features';
 
 const SET_LOGIN_ACTION = 'set-as-login';
 
@@ -42,6 +44,7 @@ export default {
     AwsComplianceBanner,
     Inactivity,
     SideNav,
+    RcButton,
   },
 
   mixins: [PageHeaderActions, Brand, BrowserTabVisibility],
@@ -138,6 +141,7 @@ export default {
       debugger;
     },
 
+    // Open the shell for the current cluster if the user has permissions and the feature is enabled (invoked via keyboard shortcut)
     async toggleShell() {
       const clusterId = this.$route.params.cluster;
 
@@ -145,6 +149,11 @@ export default {
         return;
       }
 
+      // Cluster shell is disabled via feature flag
+      if (!this.$store.getters['features/get'](CLUSTER_SHELL)) {
+        return;
+      }
+
       const cluster = await this.$store.dispatch('management/find', {
         type: MANAGEMENT.CLUSTER,
         id:   clusterId,
@@ -162,10 +171,13 @@ export default {
 
 <template>
   <div class="dashboard-root">
-    <a
-      href="#main-content"
-      class="skip-to-content btn role-primary"
-    >{{ t('nav.skipToContent') }}</a>
+    <rc-button
+      size="large"
+      class="skip-to-content"
+      :to="{ hash: '#main-content' }"
+    >
+      {{ t('nav.skipToContent') }}
+    </rc-button>
     <FixedBanner :header="true" />
     <AwsComplianceBanner v-if="managementReady" />
     <div

package/components/templates/home.vue

@@ -12,6 +12,7 @@ import Inactivity from '@shell/components/Inactivity';
 import { mapState, mapGetters } from 'vuex';
 import PromptModal from '@shell/components/PromptModal';
 import { Layout } from '@shell/types/window-manager';
+import { RcButton } from '@components/RcButton';
 
 export default {
 
@@ -24,6 +25,7 @@ export default {
     AwsComplianceBanner,
     Inactivity,
     PromptModal,
+    RcButton
   },
 
   mixins: [Brand, BrowserTabVisibility],
@@ -62,10 +64,13 @@ export default {
 
 <template>
   <div class="dashboard-root">
-    <a
-      href="#main-content"
-      class="skip-to-content btn role-primary"
-    >{{ t('nav.skipToContent') }}</a>
+    <rc-button
+      size="large"
+      class="skip-to-content"
+      :to="{ hash: '#main-content' }"
+    >
+      {{ t('nav.skipToContent') }}
+    </rc-button>
     <FixedBanner :header="true" />
     <Inactivity />
     <AwsComplianceBanner />

package/components/templates/plain.vue

@@ -15,6 +15,7 @@ import Inactivity from '@shell/components/Inactivity';
 import { mapGetters } from 'vuex';
 import PromptModal from '@shell/components/PromptModal';
 import { Layout } from '@shell/types/window-manager';
+import { RcButton } from '@components/RcButton';
 
 export default {
 
@@ -30,6 +31,7 @@ export default {
     SlideInPanelManager,
     AwsComplianceBanner,
     Inactivity,
+    RcButton
   },
 
   mixins: [Brand, BrowserTabVisibility],
@@ -66,10 +68,13 @@ export default {
 
 <template>
   <div class="dashboard-root">
-    <a
-      href="#main-content"
-      class="skip-to-content btn role-primary"
-    >{{ t('nav.skipToContent') }}</a>
+    <rc-button
+      size="large"
+      class="skip-to-content"
+      :to="{ hash: '#main-content' }"
+    >
+      {{ t('nav.skipToContent') }}
+    </rc-button>
     <FixedBanner :header="true" />
     <AwsComplianceBanner />
 

package/composables/useHelmOpResources.test.ts

@@ -0,0 +1,56 @@
+import { ref } from 'vue';
+import { useHelmOpResources } from '@shell/composables/useHelmOpResources';
+
+describe('useHelmOpResources', () => {
+  let emit: jest.Mock;
+
+  beforeEach(() => {
+    emit = jest.fn();
+  });
+
+  describe('updateCorrectDrift', () => {
+    it('should emit update:correct-drift with the given value', () => {
+      const { updateCorrectDrift } = useHelmOpResources(emit, ref([]));
+
+      updateCorrectDrift(true);
+
+      expect(emit).toHaveBeenCalledWith('update:correct-drift', true);
+    });
+  });
+
+  describe('updateSecrets', () => {
+    it('should emit update:downstream-resources with kind Secret', () => {
+      const { updateSecrets } = useHelmOpResources(emit, ref([]));
+
+      updateSecrets(['secret-a', 'secret-b']);
+
+      expect(emit).toHaveBeenCalledWith('update:downstream-resources', { kind: 'Secret', list: ['secret-a', 'secret-b'] });
+    });
+
+    it('should append locked secrets that are not already in the list', () => {
+      const { updateSecrets } = useHelmOpResources(emit, ref(['locked-secret']));
+
+      updateSecrets(['secret-a']);
+
+      expect(emit).toHaveBeenCalledWith('update:downstream-resources', { kind: 'Secret', list: ['secret-a', 'locked-secret'] });
+    });
+
+    it('should not duplicate locked secrets already in the list', () => {
+      const { updateSecrets } = useHelmOpResources(emit, ref(['secret-a']));
+
+      updateSecrets(['secret-a', 'secret-b']);
+
+      expect(emit).toHaveBeenCalledWith('update:downstream-resources', { kind: 'Secret', list: ['secret-a', 'secret-b'] });
+    });
+  });
+
+  describe('updateDownstreamResources', () => {
+    it('should emit update:downstream-resources with the given kind and list', () => {
+      const { updateDownstreamResources } = useHelmOpResources(emit, ref([]));
+
+      updateDownstreamResources('ConfigMap', ['cm-1']);
+
+      expect(emit).toHaveBeenCalledWith('update:downstream-resources', { kind: 'ConfigMap', list: ['cm-1'] });
+    });
+  });
+});

package/composables/useHelmOpResources.ts

@@ -0,0 +1,32 @@
+import { type Ref, toValue } from 'vue';
+
+type Emit = {
+  (e: 'update:correct-drift', value: boolean): void;
+  (e: 'update:downstream-resources', value: { kind: string; list: string[] }): void;
+};
+
+export function useHelmOpResources(emit: Emit, lockedSecrets: Ref<string[]> | (() => string[])) {
+  const updateCorrectDrift = (value: boolean) => {
+    emit('update:correct-drift', value);
+  };
+
+  const updateSecrets = (list: string[]) => {
+    const newList = [...list];
+
+    for (const locked of toValue(lockedSecrets)) {
+      if (!newList.includes(locked)) {
+        newList.push(locked);
+      }
+    }
+
+    emit('update:downstream-resources', { kind: 'Secret', list: newList });
+  };
+
+  const updateDownstreamResources = (kind: string, list: string[]) => {
+    emit('update:downstream-resources', { kind, list });
+  };
+
+  return {
+    updateCorrectDrift, updateSecrets, updateDownstreamResources
+  };
+}

package/composables/useStateColor.test.ts

@@ -0,0 +1,325 @@
+import { useStateColor } from '@shell/composables/useStateColor';
+import type { StateSummaryEntry } from '@shell/composables/useStateColor';
+import { flushPromises } from '@vue/test-utils';
+
+const mockGetters: Record<string, any> = {};
+const mockDispatch = jest.fn();
+
+jest.mock('vuex', () => ({
+  useStore: () => ({
+    getters: new Proxy(mockGetters, {
+      get(target, prop: string) {
+        return target[prop];
+      },
+    }),
+    dispatch: mockDispatch,
+  }),
+}));
+
+jest.mock('@shell/plugins/steve/steve-pagination-utils', () => ({
+  __esModule: true,
+  default:    { createParamsForPagination: jest.fn(() => 'page=1&pagesize=1') },
+}));
+
+jest.mock('@shell/plugins/steve/projectAndNamespaceFiltering.utils', () => ({
+  __esModule: true,
+  default:    { createParam: jest.fn(() => '') },
+}));
+
+describe('composable: useStateColor', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    Object.keys(mockGetters).forEach((key) => delete mockGetters[key]);
+  });
+
+  describe('toStateColor', () => {
+    const testType = 'apps.deployment';
+
+    it.each([
+      ['running', 'success'],
+      ['active', 'success'],
+      ['completed', 'success'],
+      ['error', 'error'],
+      ['failed', 'error'],
+      ['stopped', 'error'],
+      ['warning', 'warning'],
+      ['initializing', 'warning'],
+      ['pending', 'info'],
+      ['waiting', 'info'],
+      ['creating', 'info'],
+    ])('should return %s color for known state "%s"', (state, expectedColor) => {
+      const { toStateColor } = useStateColor();
+
+      expect(toStateColor(state, testType)).toStrictEqual(expectedColor);
+    });
+
+    it('should return "disabled" for state with "darker" color', () => {
+      const { toStateColor } = useStateColor();
+
+      expect(toStateColor('off', testType)).toStrictEqual('disabled');
+    });
+
+    it('should return "warning" for unknown states', () => {
+      const { toStateColor } = useStateColor();
+
+      expect(toStateColor('unknown-state', testType)).toStrictEqual('warning');
+    });
+
+    it('should be case-insensitive', () => {
+      const { toStateColor } = useStateColor();
+
+      expect(toStateColor('Running', testType)).toStrictEqual(toStateColor('running', testType));
+      expect(toStateColor('ERROR', testType)).toStrictEqual(toStateColor('error', testType));
+    });
+
+    it('should handle empty string as active state', () => {
+      const { toStateColor } = useStateColor();
+
+      expect(toStateColor('', testType)).toStrictEqual('success');
+    });
+
+    it('should cache results across calls', () => {
+      const { toStateColor } = useStateColor();
+
+      const first = toStateColor('running', testType);
+      const second = toStateColor('running', testType);
+
+      expect(first).toStrictEqual(second);
+      expect(first).toStrictEqual('success');
+    });
+  });
+
+  describe('resolveStateColors', () => {
+    const schema = { links: { collection: '/k8s/clusters/local/v1/pods' } };
+
+    beforeEach(() => {
+      mockGetters['cluster/schemaFor'] = () => schema;
+      mockGetters['cluster/urlFor'] = () => schema.links.collection;
+    });
+
+    it('should not make requests when all states are already cached', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch.mockResolvedValueOnce({
+        data: [{
+          metadata: {
+            state: {
+              name: 'running', error: false, transitioning: false
+            }
+          }
+        }]
+      });
+      toStateColor('running', 'pod');
+      await flushPromises();
+
+      mockDispatch.mockClear();
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { running: { total: 5, namespace: { default: 5 } } } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+
+    it('should fetch a resource to resolve unknown state colors', async() => {
+      const { resolveStateColors } = useStateColor();
+
+      mockDispatch.mockResolvedValueOnce({
+        data: [{
+          metadata: {
+            state: {
+              name: 'customState', error: true, transitioning: false
+            }
+          }
+        }],
+      });
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { customState: { total: 3, namespace: { default: 3 } } } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(mockDispatch).toHaveBeenCalledWith('cluster/request', { url: `${ schema.links.collection }?page=1&pagesize=1` });
+    });
+
+    it('should resolve error states from resource metadata', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch.mockResolvedValueOnce({
+        data: [{
+          metadata: {
+            state: {
+              name: 'init:Error', error: true, transitioning: false
+            }
+          }
+        }],
+      });
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { 'init:Error': { total: 1, namespace: { default: 1 } } } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(toStateColor('init:Error', 'pod')).toStrictEqual('error');
+    });
+
+    it('should resolve transitioning states as info', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch.mockResolvedValueOnce({
+        data: [{
+          metadata: {
+            state: {
+              name: 'init:0/1', error: false, transitioning: true
+            }
+          }
+        }],
+      });
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { 'init:0/1': { total: 2, namespace: { default: 2 } } } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(toStateColor('init:0/1', 'pod')).toStrictEqual('info');
+    });
+
+    it('should skip entries with null summary', async() => {
+      const { resolveStateColors } = useStateColor();
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: null,
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+
+    it('should skip summary properties that are not metadata.state.name', async() => {
+      const { resolveStateColors } = useStateColor();
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.namespace', counts: { default: { total: 5, namespace: { default: 5 } } } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+
+    it('should handle API errors gracefully and fall back to default color', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch.mockRejectedValueOnce(new Error('network error'));
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { networkFailState: { total: 1, namespace: { default: 1 } } } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(toStateColor('networkFailState', 'pod')).toStrictEqual('warning');
+    });
+
+    it('should handle response with no resource data', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch.mockResolvedValueOnce({ data: [] });
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { emptyResult: { total: 1, namespace: { default: 1 } } } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(toStateColor('emptyResult', 'pod')).toStrictEqual('warning');
+    });
+
+    it('should handle resource without metadata.state', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch.mockResolvedValueOnce({ data: [{ metadata: {} }] });
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'pod',
+        summary: [{ property: 'metadata.state.name', counts: { noStateField: { total: 1, namespace: { default: 1 } } } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(toStateColor('noStateField', 'pod')).toStrictEqual('warning');
+    });
+
+    it('should use schema.links.collection for the request URL', async() => {
+      const { resolveStateColors } = useStateColor();
+      const customSchema = { links: { collection: '/k8s/clusters/c-m-abc123/v1/apps.deployments' } };
+
+      mockGetters['cluster/schemaFor'] = () => customSchema;
+      mockGetters['cluster/urlFor'] = () => customSchema.links.collection;
+      mockDispatch.mockResolvedValueOnce({ data: [] });
+
+      const entries: StateSummaryEntry[] = [{
+        type:    'apps.deployments',
+        summary: [{ property: 'metadata.state.name', counts: { urlTestState: { total: 1, namespace: { default: 1 } } } }],
+      }];
+
+      await resolveStateColors(entries);
+
+      expect(mockDispatch).toHaveBeenCalledWith('cluster/request', { url: `${ customSchema.links.collection }?page=1&pagesize=1` });
+    });
+
+    it('should resolve multiple unknown states across entries', async() => {
+      const { toStateColor, resolveStateColors } = useStateColor();
+
+      mockDispatch
+        .mockResolvedValueOnce({
+          data: [{
+            metadata: {
+              state: {
+                name: 'stateA', error: true, transitioning: false
+              }
+            }
+          }],
+        })
+        .mockResolvedValueOnce({
+          data: [{
+            metadata: {
+              state: {
+                name: 'stateB', error: false, transitioning: false
+              }
+            }
+          }],
+        });
+
+      const entries: StateSummaryEntry[] = [
+        {
+          type:    'pod',
+          summary: [{ property: 'metadata.state.name', counts: { stateA: { total: 1, namespace: { default: 1 } } } }],
+        },
+        {
+          type:    'apps.deployments',
+          summary: [{ property: 'metadata.state.name', counts: { stateB: { total: 2, namespace: { default: 2 } } } }],
+        },
+      ];
+
+      await resolveStateColors(entries);
+
+      expect(toStateColor('stateA', 'pod')).toStrictEqual('error');
+      expect(toStateColor('stateB', 'apps.deployments')).toStrictEqual('warning');
+    });
+  });
+});

package/composables/useStateColor.ts

@@ -0,0 +1,128 @@
+import { reactive } from 'vue';
+import { useStore } from 'vuex';
+import { colorForState } from '@shell/plugins/dashboard-store/resource-class';
+import type { StateColor } from '@shell/utils/style';
+import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+
+export interface StateSummaryEntry {
+  type: string;
+  summary: { property: string; counts: Record<string, { total: number; namespace: Record<string, number> }> }[] | null;
+}
+
+const stateColorCache = reactive<Record<string, StateColor>>({});
+const pendingResolves = new Set<string>();
+
+/**
+ * Composable that maps Kubernetes resource state names to dashboard color tokens.
+ *
+ * This scenario is to forcefully resolve state colors based on properties like error and transitioning.
+ * It is to be used when you only have the state name and don't have the actual state object
+ *
+ * Using a request of only one resource per unknown state, it will fetch the data to retrieve the state object.
+ * For normal cases where the object is already available, this composable is not needed.
+ *
+ * @returns `toStateColor` — synchronous lookup that triggers background API
+ *          resolution for unknown states when a resource type is provided.
+ */
+export function useStateColor() {
+  const store = useStore();
+
+  /**
+   * Returns the cached {@link StateColor} for a given state name.
+   * Falls back to `colorForState` as a temporary color and triggers an async
+   * resolve via the Steve API when `type` is provided. Once resolved, the
+   * reactive cache updates and the UI re-renders with the correct color.
+   *
+   * @param state - The resource state name (e.g. `'active'`, `'error'`). Case-insensitive.
+   * @param type - The Steve resource type (e.g. `'apps.deployment'`). Used to
+   *               fetch a resource via the API when the state is not cached.
+   * @returns The resolved color token.
+   */
+  function toStateColor(state: string, type: string): StateColor {
+    const stateLower = (state || '').toLowerCase();
+    const key = `${ type }:${ stateLower }`;
+
+    if (stateColorCache[key]) {
+      return stateColorCache[key];
+    }
+
+    if (!pendingResolves.has(key)) {
+      pendingResolves.add(key);
+      resolveStateColor(key, state, type);
+    }
+
+    const rawColor = colorForState(stateLower, false, false).replace('text-', '');
+
+    return (rawColor === 'darker' ? 'disabled' : rawColor) as StateColor;
+  }
+
+  async function resolveStateColor(key: string, originalName: string, type: string): Promise<void> {
+    try {
+      const schema = store.getters['cluster/schemaFor'](type);
+      const params = stevePaginationUtils.createParamsForPagination({
+        schema,
+        opt: {
+          pagination: {
+            page:                 1,
+            pageSize:             1,
+            sort:                 [],
+            filters:              [PaginationParamFilter.createSingleField({ field: 'metadata.state.name', value: originalName })],
+            projectsOrNamespaces: [],
+          }
+        }
+      });
+      const url = `${ store.getters['cluster/urlFor'](type) }?${ params }`;
+      const res = await store.dispatch('cluster/request', { url });
+      const resource = res?.data?.[0];
+
+      if (resource?.metadata?.state) {
+        const { error: isError, transitioning, name } = resource.metadata.state;
+        const rawColor = colorForState(name, isError, transitioning).replace('text-', '');
+
+        stateColorCache[key] = (rawColor === 'darker' ? 'disabled' : rawColor) as StateColor;
+      }
+    } catch {
+      // Keep the colorForState fallback
+    } finally {
+      pendingResolves.delete(key);
+    }
+  }
+
+  async function resolveStateColors(entries: StateSummaryEntry[]): Promise<void> {
+    const toResolve: Array<{ key: string; originalName: string; type: string }> = [];
+
+    for (const entry of entries) {
+      if (!entry.summary) {
+        continue;
+      }
+
+      for (const s of entry.summary) {
+        if (s.property === 'metadata.state.name') {
+          for (const stateName of Object.keys(s.counts)) {
+            const key = stateName.toLowerCase();
+
+            const cacheKey = `${ entry.type }:${ key }`;
+
+            if (!stateColorCache[cacheKey] && !pendingResolves.has(cacheKey)) {
+              pendingResolves.add(cacheKey);
+              toResolve.push({
+                key: cacheKey, originalName: stateName, type: entry.type
+              });
+            }
+          }
+        }
+      }
+    }
+
+    const concurrency = 10;
+
+    for (let i = 0; i < toResolve.length; i += concurrency) {
+      await Promise.all(
+        toResolve.slice(i, i + concurrency).map((r) => resolveStateColor(r.key, r.originalName, r.type))
+      );
+    }
+  }
+
+  return { toStateColor, resolveStateColors };
+}

package/config/features.js

@@ -4,3 +4,4 @@ export const ONE_WAY = [
 
 export const HARVESTER_NAME = 'harvester';
 export const SCHEDULING_CUSTOMIZATION = 'cluster-agent-scheduling-customization';
+export const IMPORTED_DAY_2_OPS = 'imported-day-2-ops';

package/config/home-links.js

@@ -44,7 +44,7 @@ const APP_COLLECTION_LINK = {
 
 const SUPPORT_LINK = {
   key:      'commercialSupport',
-  value:    '/support',
+  value:    'https://www.suse.com/products/rancher/',
   enabled:  true,
   readonly: true
 };