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

package/components/templates/standalone.vue

@@ -1,3 +1,9 @@
+<script>
+import Brand from '@shell/mixins/brand';
+
+export default { mixins: [Brand] };
+</script>
+
 <template>
   <router-view :key="$route.path" />
 </template>
@@ -5,5 +11,16 @@
 <style lang="scss">
 body, #__root, #__layout {
   height: 100%;
+  background: var(--body-bg);
+  color: var(--body-text);
+}
+
+// Standalone pages should not reserve dashboard layout areas (e.g. side nav and header).
+#__layout {
+  --header-height: 0px;
+  --nav-width: 0px;
+  --wm-vl-width: 0px;
+  --wm-vr-width: 0px;
+  --wm-height: 0px;
 }
 </style>

package/composables/useFormValidation.ts

@@ -0,0 +1,93 @@
+import { computed, provide, ref } from 'vue';
+import { useForm } from 'vee-validate';
+import formRulesGenerator from '@shell/utils/validators/formRules/index';
+import type { Validator } from '@shell/utils/validators/formRules/index';
+import type { Translation } from '@shell/types/t';
+
+export interface RuleSet {
+  path: string;
+  rules: string[];
+  translationKey?: string;
+}
+
+const nullValidator: Validator = () => undefined;
+
+function createRuleResolver(
+  t: Translation,
+  ruleSets: RuleSet[],
+  extraRules: Record<string, Validator>
+) {
+  return (path: string): Validator[] => {
+    const set = ruleSets.find((s) => s.path === path);
+
+    if (!set) return [];
+
+    const key = set.translationKey ? t(set.translationKey) : 'Value';
+    const allRules = {
+      ...formRulesGenerator(t, { key }),
+      ...extraRules,
+    };
+
+    return set.rules.map((r) => {
+      const rule = allRules[r] as Validator | undefined;
+
+      if (rule) {
+        return rule;
+      }
+
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error(`[useFormValidation] Unknown validation rule: "${ r }". Check for a typo in your ruleSets.`);
+      }
+
+      return nullValidator;
+    });
+  };
+}
+
+/**
+ * For root/parent form components. Creates a vee-validate form context and
+ * resolves fvFormRuleSets-style rule string arrays into validator functions.
+ * Child components rendered within this form should use useFormRules instead.
+ */
+export function useFormValidation(
+  t: Translation,
+  ruleSets: RuleSet[],
+  extraRules: Record<string, Validator> = {}
+) {
+  const { errors, validate } = useForm();
+  const showAllErrors = ref(false);
+
+  provide('vee-show-all-errors', showAllErrors);
+
+  const getRules = createRuleResolver(t, ruleSets, extraRules);
+  const isFormValid = computed(() => Object.keys(errors.value).length === 0);
+
+  const validateForm: typeof validate = async(...args) => {
+    const result = await validate(...args);
+
+    showAllErrors.value = true;
+
+    return result;
+  };
+
+  return {
+    getRules,
+    isFormValid,
+    validateForm,
+    veeErrors: errors,
+    showAllErrors,
+  };
+}
+
+/**
+ * For child components that render inside a parent useFormValidation() form.
+ * Resolves rule strings into validator functions without creating a new form
+ * context — fields register with the nearest ancestor's useFormValidation() context.
+ */
+export function useFormRules(
+  t: Translation,
+  ruleSets: RuleSet[],
+  extraRules: Record<string, Validator> = {}
+) {
+  return { getRules: createRuleResolver(t, ruleSets, extraRules) };
+}

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