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

package/plugins/steve/__tests__/actions.test.ts

@@ -0,0 +1,212 @@
+import actions from '@shell/plugins/steve/actions';
+import paginationUtils from '@shell/utils/pagination-utils';
+import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+
+const { fetchResourceSummary } = actions;
+
+describe('steve: actions:', () => {
+  describe('fetchResourceSummary', () => {
+    const schema = {
+      id:         'pod',
+      links:      { collection: '/v1/pods' },
+      attributes: { namespaced: true },
+    };
+
+    const baseCtx = () => ({
+      getters: {
+        normalizeType: (type: string) => type,
+        schemaFor:     (type: string) => (type === 'pod' ? schema : undefined),
+      },
+      dispatch:    jest.fn(),
+      rootGetters: {},
+    });
+
+    let warnSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      jest.spyOn(paginationUtils, 'isSteveCacheEnabled').mockReturnValue(true);
+    });
+
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    it('should return undefined and warn when schema is not found', async() => {
+      const ctx = baseCtx();
+      const result = await fetchResourceSummary.call({}, ctx, { type: 'nonexistent', opt: { summaryField: 'metadata.state.name' } });
+
+      expect(result).toBeUndefined();
+      expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('no schema found'));
+    });
+
+    it('should return undefined and warn when VAI is not enabled', async() => {
+      jest.spyOn(paginationUtils, 'isSteveCacheEnabled').mockReturnValue(false);
+      const ctx = baseCtx();
+      const result = await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name' } });
+
+      expect(result).toBeUndefined();
+      expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('VAI is not enabled'));
+    });
+
+    it('should return undefined and warn when summaryField is missing', async() => {
+      const ctx = baseCtx();
+      const result = await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: {} });
+
+      expect(result).toBeUndefined();
+      expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('summaryField is required'));
+    });
+
+    it('should construct the correct URL with summary and summaryonly params', async() => {
+      const ctx = baseCtx();
+
+      ctx.dispatch.mockResolvedValue({ count: 5, summary: [{ property: 'metadata.state.name', counts: { running: { total: 5 } } }] });
+
+      await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name' } });
+
+      const requestUrl = ctx.dispatch.mock.calls[0][1].opt.url;
+
+      expect(requestUrl).toContain('summary=metadata.state.name');
+      expect(requestUrl).toContain('summaryonly=');
+      expect(requestUrl).not.toContain('summarynamespaced');
+    });
+
+    it('should not include summaryonly when summaryOnly is false', async() => {
+      const ctx = baseCtx();
+
+      ctx.dispatch.mockResolvedValue({ count: 5, summary: [{ property: 'metadata.state.name', counts: { running: { total: 5 } } }] });
+
+      await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name', summaryOnly: false } });
+
+      const requestUrl = ctx.dispatch.mock.calls[0][1].opt.url;
+
+      expect(requestUrl).not.toContain('summaryonly');
+    });
+
+    it('should include summarynamespaced param when namespaceCounts is true', async() => {
+      const ctx = baseCtx();
+
+      ctx.dispatch.mockResolvedValue({ count: 5, summary: [{ property: 'metadata.state.name', counts: { running: { total: 5 } } }] });
+
+      await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name', namespaceCounts: true } });
+
+      const requestUrl = ctx.dispatch.mock.calls[0][1].opt.url;
+
+      expect(requestUrl).toContain('summarynamespaced=');
+    });
+
+    it('should append namespace to path for namespaced resources', async() => {
+      const ctx = baseCtx();
+
+      ctx.dispatch.mockResolvedValue({ count: 2, summary: null });
+
+      await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name', namespace: 'cattle-system' } });
+
+      const requestUrl = ctx.dispatch.mock.calls[0][1].opt.url;
+
+      expect(requestUrl).toMatch(/\/v1\/pods\/cattle-system\?/);
+    });
+
+    it('should not append namespace when schema is not namespaced', async() => {
+      const nonNsSchema = { ...schema, attributes: { namespaced: false } };
+      const ctx = baseCtx();
+
+      ctx.getters.schemaFor = () => nonNsSchema;
+      ctx.dispatch.mockResolvedValue({ count: 1, summary: null });
+
+      await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name', namespace: 'default' } });
+
+      const requestUrl = ctx.dispatch.mock.calls[0][1].opt.url;
+
+      expect(requestUrl).not.toContain('/default');
+    });
+
+    it('should append filter params when filters are provided', async() => {
+      const ctx = baseCtx();
+      const filters = [PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: 'default' })];
+
+      jest.spyOn(stevePaginationUtils, 'convertPaginationParams').mockReturnValue('filter=metadata.namespace%3Ddefault');
+      ctx.dispatch.mockResolvedValue({ count: 3, summary: null });
+
+      await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name', filters } });
+
+      const requestUrl = ctx.dispatch.mock.calls[0][1].opt.url;
+
+      expect(requestUrl).toContain('filter=');
+      expect(stevePaginationUtils.convertPaginationParams).toHaveBeenCalledWith(expect.objectContaining({ filters }));
+    });
+
+    it('should return count and summary from the response', async() => {
+      const ctx = baseCtx();
+      const apiResponse = {
+        count:   10,
+        summary: [{ property: 'metadata.state.name', counts: { running: { total: 7 }, error: { total: 3 } } }]
+      };
+
+      ctx.dispatch.mockResolvedValue(apiResponse);
+
+      const result = await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name' } });
+
+      expect(result).toStrictEqual(apiResponse);
+    });
+
+    it('should pass through object-style counts as-is', async() => {
+      const ctx = baseCtx();
+      const counts = { running: { total: 7 }, error: { total: 3 } };
+      const apiResponse = {
+        count:   10,
+        summary: [{ property: 'metadata.state.name', counts }]
+      };
+
+      ctx.dispatch.mockResolvedValue(apiResponse);
+
+      const result = await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name' } });
+
+      expect(result).toStrictEqual({
+        count:   10,
+        summary: [{ property: 'metadata.state.name', counts }]
+      });
+    });
+
+    it('should default count to 0 and summary to null when response is empty', async() => {
+      const ctx = baseCtx();
+
+      ctx.dispatch.mockResolvedValue({});
+
+      const result = await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name' } });
+
+      expect(result).toStrictEqual({ count: 0, summary: null });
+    });
+
+    it('should append label selector params when labelSelector is provided', async() => {
+      const ctx = baseCtx();
+      const labelSelector = {
+        matchExpressions: [{
+          key: 'app', operator: 'In', values: ['nginx']
+        }]
+      };
+
+      jest.spyOn(stevePaginationUtils, 'convertLabelSelectorPaginationParams').mockReturnValue('filter=metadata.labels[app] IN (nginx)');
+      ctx.dispatch.mockResolvedValue({ count: 2, summary: null });
+
+      await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name', labelSelector } });
+
+      const requestUrl = ctx.dispatch.mock.calls[0][1].opt.url;
+
+      expect(requestUrl).toContain('filter=');
+      expect(stevePaginationUtils.convertLabelSelectorPaginationParams).toHaveBeenCalledWith({ labelSelector });
+    });
+
+    it('should return undefined and warn when the request fails', async() => {
+      const ctx = baseCtx();
+
+      ctx.dispatch.mockRejectedValue(new Error('network error'));
+
+      const result = await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name' } });
+
+      expect(result).toBeUndefined();
+      expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('summary API request failed'), expect.any(Error));
+    });
+  });
+});

package/plugins/steve/__tests__/subscribe.spec.ts

@@ -14,7 +14,8 @@ describe('steve: subscribe', () => {
         schemaFor:       () => null,
         inError:         () => false,
         watchStarted:    () => false,
-        listenerManager: state.listenerManager
+        listenerManager: state.listenerManager,
+        typeRegistered:  () => true,
       };
       const rootGetters = {
         'type-map/isSpoofed': () => false,
@@ -343,7 +344,7 @@ describe('steve: subscribe', () => {
 
         // call watch
         actions.watch({
-          state, dispatch, getters, rootGetters
+          state, dispatch, getters, rootGetters, commit
         }, {
           ...obj,
           revision,
@@ -488,6 +489,7 @@ describe('steve: subscribe', () => {
         const state = {
           started:         [],
           inError:         {},
+          queue:           [],
           listenerManager: new SteveWatchEventListenerManager()
         };
         const _getters = {
@@ -498,7 +500,8 @@ describe('steve: subscribe', () => {
           watchStarted:    (...args) => getters.watchStarted(state)(...args),
           backOffId:       (...args) => getters.backOffId()(...args),
           canBackoff:      () => true,
-          listenerManager: state.listenerManager
+          listenerManager: state.listenerManager,
+          typeRegistered:  () => true,
         };
         const commit = (type, ...args) => mutations[type](state, ...args);
 

package/plugins/steve/actions.js

@@ -10,6 +10,7 @@ import { NAMESPACE } from '@shell/config/types';
 import { handleKubeApiHeaderWarnings } from '@shell/plugins/steve/header-warnings';
 import { steveCleanForDownload } from '@shell/plugins/steve/resource-utils';
 import paginationUtils from '@shell/utils/pagination-utils';
+import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
 
 export default {
 
@@ -221,6 +222,101 @@ export default {
     }
   },
 
+  /**
+   * Fetch aggregated state counts for a resource type via the Steve summary API.
+   * Requires VAI (ui-sql-cache) to be enabled; returns undefined otherwise.
+   *
+   * Uses `summaryonly` by default so no resource data is returned.
+   *
+   * @param {string} type - Resource type (e.g. 'pod', 'service')
+   * @param {object} [opt] - Options object
+   *   @param {string} opt.summaryField - Field to aggregate counts by.
+   *     Must be a field indexed by the VAI cache (see StevePaginationUtils.VALID_FIELDS in steve-pagination-utils.ts)
+   *   @param {string} [opt.namespace] - Namespace to scope the request to (only applies to namespaced resource types)
+   *   @param {boolean} [opt.summaryOnly=true] - Omit resource data from the response (set to false to include data)
+   *   @param {boolean} [opt.namespaceCounts] - Include per-namespace breakdowns in counts
+   *   @param {PaginationParamFilter[]} [opt.filters] - Pre-built filters from PaginationParamFilter.createSingleField()
+   *   @param {KubeLabelSelector} [opt.labelSelector] - Kube label selector to filter by (converted via convertLabelSelectorPaginationParams)
+   * @returns {Promise<{ count: number, summary: { property: string, counts: Record<string, { total: number, namespace?: Record<string, number> }> }[] | null } | undefined>}
+   *
+   * @example
+   * const result = await dispatch('fetchResourceSummary', {
+   *   type: 'pod',
+   *   opt:  { summaryField: 'metadata.state.name', labelSelector: { matchExpressions: podMatchExpression } }
+   * });
+   * // result.summary[0].counts => { running: { total: 3 }, error: { total: 1 } }
+   *
+   * // With namespace breakdowns:
+   * const result = await dispatch('fetchResourceSummary', {
+   *   type: 'pod',
+   *   opt:  { summaryField: 'metadata.state.name', namespaceCounts: true }
+   * });
+   * // result.summary[0].counts => { running: { total: 3, namespace: { default: 2, 'kube-system': 1 } } }
+   */
+  async fetchResourceSummary({ getters, dispatch, rootGetters }, { type, opt = {} }) {
+    type = getters.normalizeType(type);
+    const schema = getters.schemaFor(type);
+
+    if (!schema) {
+      console.warn(`fetchResourceSummary: no schema found for type "${ type }"`); // eslint-disable-line no-console
+
+      return undefined;
+    }
+
+    if (!paginationUtils.isSteveCacheEnabled({ rootGetters })) {
+      console.warn(`fetchResourceSummary: VAI is not enabled, summary API unavailable for type "${ type }"`); // eslint-disable-line no-console
+
+      return undefined;
+    }
+
+    if (!opt.summaryField) {
+      console.warn(`fetchResourceSummary: summaryField is required and must be a string for type "${ type }"`); // eslint-disable-line no-console
+
+      return undefined;
+    }
+
+    try {
+      const url = new URL(schema.links.collection, window.location.origin);
+
+      if (schema.attributes?.namespaced && opt.namespace) {
+        url.pathname += `/${ opt.namespace }`;
+      }
+
+      url.searchParams.set('summary', opt.summaryField);
+
+      if (opt.summaryOnly !== false) {
+        url.searchParams.set('summaryonly', '');
+      }
+
+      if (opt.namespaceCounts) {
+        url.searchParams.set('summarynamespaced', '');
+      }
+
+      if (opt.filters?.length) {
+        const filterParams = new URLSearchParams(stevePaginationUtils.convertPaginationParams({ schema, filters: opt.filters }));
+
+        filterParams.forEach((v, k) => url.searchParams.append(k, v));
+      }
+
+      if (opt.labelSelector) {
+        const labelParams = new URLSearchParams(stevePaginationUtils.convertLabelSelectorPaginationParams({ labelSelector: opt.labelSelector }));
+
+        labelParams.forEach((v, k) => url.searchParams.append(k, v));
+      }
+
+      const res = await dispatch('request', { opt: { url: url.pathname + url.search } });
+
+      return {
+        count:   res.count ?? 0,
+        summary: res.summary || null
+      };
+    } catch (e) {
+      console.warn(`fetchResourceSummary: summary API request failed for type "${ type }"`, e); // eslint-disable-line no-console
+
+      return undefined;
+    }
+  },
+
   promptRestore({ commit, state }, resources ) {
     commit('action-menu/togglePromptRestore', resources, { root: true });
   },

package/plugins/steve/steve-pagination-utils.ts

@@ -258,6 +258,11 @@ class StevePaginationUtils extends NamespaceProjectFilters {
       { field: 'spec.displayName' },
       { field: `status.provider` },
       { field: `status.connected` },
+      { field: `status.info.machineProvider` },
+      { field: `status.driver` },
+      { field: `status.provider` },
+      { field: `status.info.kubernetesVersion` },
+      { field: `spec.fleetWorkspaceName` },
     ],
     [SECRET]: [
       { field: `metadata.annotations[${ UI_PROJECT_SECRET_COPY }]` },
@@ -265,7 +270,10 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     [NAMESPACE]: [
     ],
     [CAPI.MACHINE]: [
-      { field: 'spec.clusterName' }
+      { field: 'spec.clusterName' },
+    ],
+    [CAPI.MACHINE_DEPLOYMENT]: [
+      { field: 'spec.clusterName' },
     ],
     [EVENT]: [
       { field: '_type' },
@@ -648,7 +656,7 @@ class StevePaginationUtils extends NamespaceProjectFilters {
    * A lot of the requirements and details are taken directly from
    * https://kubernetes.io/docs/concepts/overview/working-with-objects/labels/
    */
-  private convertLabelSelectorPaginationParams({ labelSelector }: { labelSelector: KubeLabelSelector}): string {
+  convertLabelSelectorPaginationParams({ labelSelector }: { labelSelector: KubeLabelSelector}): string {
     // Get a list of matchExpressions
     const expressions: KubeLabelSelectorExpression[] = labelSelector.matchExpressions ? [...labelSelector.matchExpressions] : [];
 
@@ -770,8 +778,8 @@ export const PAGINATION_SETTINGS_STORE_DEFAULTS: PaginationSettingsStores = {
       enableAll:  false,
       enableSome: {
         enabled: [
-          { resource: CAPI.RANCHER_CLUSTER, context: ['side-bar'] },
-          { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] },
+          { resource: CAPI.RANCHER_CLUSTER, context: ['side-bar', 'home', 'cluster-management'] },
+          { resource: MANAGEMENT.CLUSTER, context: ['side-bar', 'home', 'cluster-management'] },
           { resource: CATALOG.APP, context: ['branding'] },
           SECRET
         ],

package/plugins/steve/subscribe.js

@@ -469,8 +469,10 @@ const sharedActions = {
     const worker = (this.$workers || {})[getters.storeName];
 
     if (worker) {
+      const storeName = getters.storeName;
+
       worker.postMessage({ destroyWorker: true }); // we're only passing the boolean here because the key needs to be something truthy to ensure it's passed on the object.
-      cleanupTasks.push(waitFor(() => !this.$workers[getters.storeName], 'Worker is destroyed'));
+      cleanupTasks.push(waitFor(() => !this.$workers?.[storeName], 'Worker to be destroyed', 30000, 10, true));
     }
 
     if ( socket ) {
@@ -553,17 +555,32 @@ const sharedActions = {
    * @param {STEVE_WATCH_PARAMS} params
    */
   watch({
-    state, dispatch, getters, rootGetters
+    state, dispatch, getters, rootGetters, commit
   }, params) {
     state.debugSocket && console.info(`Watch Request [${ getters.storeName }]`, JSON.stringify(params)); // eslint-disable-line no-console
     let {
       // eslint-disable-next-line prefer-const
-      type, selector, id, revision, namespace, stop, force, mode, standardWatch = true
+      type, selector, id, revision, namespace, stop, force, mode, standardWatch = true, registerType = false
     } = params;
 
     namespace = acceptOrRejectSocketMessage.subscribeNamespace(namespace);
     type = getters.normalizeType(type);
 
+    if ( !getters.typeRegistered(type) ) {
+      if (registerType) {
+        commit('registerType', type);
+      } else if (mode !== STEVE_WATCH_MODE.RESOURCE_CHANGES) {
+        // - If we continue and open up a watch whenever we receive a `resource.` notification we go to queueChanges (bar resource.changes mode).
+        // - queueChanges ignores any change that's for a type that hasn't been registered
+        // - So here we're just exiting early, avoiding the watch --> queueChanges --> ignore loop
+        //
+        // Interestingly this is hit quite a few times (on cluster create screens there's token, cluster, project, projectRoleTemplateBinding, etc)
+        state.debugSocket && console.info('Will not Watch (type is not registered)', JSON.stringify(params)); // eslint-disable-line no-console
+
+        return;
+      }
+    }
+
     if (rootGetters['type-map/isSpoofed'](type)) {
       state.debugSocket && console.info('Will not Watch (type is spoofed)', JSON.stringify(params)); // eslint-disable-line no-console
 
@@ -620,6 +637,9 @@ const sharedActions = {
         if (debounceMs) {
           msg.debounceMs = debounceMs;
         }
+
+        // Anything in the queue will pollute the result set, so clear (and print to console so we know it's working)
+        commit('clearFromQueue', { type, log: true });
       }
     }
 
@@ -1556,10 +1576,20 @@ const defaultMutations = {
     state.socketListenerManager = new SteveWatchEventListenerManager(state.config.namespace);
   },
 
-  clearFromQueue(state, type) {
+  clearFromQueue(state, args) {
+    const safeArgs = typeof args === 'object' ? args : { type: args };
+    const { type, log } = safeArgs;
+
     // Remove anything in the queue that is a resource update for the given type
     state.queue = state.queue.filter((item) => {
-      return item.body?.type !== type;
+      const keep = item.body?.type !== type;
+
+      if (!keep && log) {
+        // eslint-disable-next-line no-console
+        console.info(`Clearing queued item of type \`${ type }\` from queue`, item);
+      }
+
+      return keep;
     });
   },
 };

package/rancher-components/Accordion/Accordion.vue

@@ -1,8 +1,14 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { mapGetters } from 'vuex';
+import {
+  computed, defineComponent, nextTick, ref, useTemplateRef
+} from 'vue';
+import { mapGetters, useStore } from 'vuex';
+import { useInSummary } from '@shell/components/TableOfContents/composables';
+import { useI18n } from '@shell/composables/useI18n';
 
 export default defineComponent({
+  name: 'Accordion',
+
   props: {
     title: {
       type:    String,
@@ -20,22 +26,59 @@ export default defineComponent({
     }
   },
 
+  setup(props) {
+    const store = useStore();
+    const { t } = useI18n(store);
+    const label = computed(() => props.titleKey && typeof t === 'function' ? t(props.titleKey) : props.title);
+
+    const isOpen = ref(props.openInitially);
+    const accordionSummarizedContainer = useTemplateRef<HTMLElement>('accordion-summarized-container');
+
+    const scrollTo = () => {
+      isOpen.value = true;
+      nextTick(() => {
+        accordionSummarizedContainer.value?.scrollIntoView();
+      });
+    };
+
+    const { summary } = useInSummary({
+      scrollTo,
+      label,
+      elementRef: accordionSummarizedContainer,
+    });
+
+    return {
+      summary,
+      isOpen,
+      scrollTo,
+    };
+  },
+
   data() {
-    return { isOpen: this.openInitially };
+    return {};
   },
 
-  computed: { ...mapGetters({ t: 'i18n/t' }) },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    displayTitle() {
+      return this.titleKey ? this.t(this.titleKey) : this.title;
+    },
+  },
 
   methods: {
     toggle() {
       this.isOpen = !this.isOpen;
-    }
-  }
+    },
+  },
 });
 </script>
 
 <template>
-  <div class="accordion-container">
+  <div
+    ref="accordion-summarized-container"
+    class="accordion-container"
+  >
     <div
       class="accordion-header"
       data-testid="accordion-header"
@@ -51,7 +94,7 @@ export default defineComponent({
           data-testid="accordion-title-slot-content"
           class="mb-0"
         >
-          {{ titleKey ? t(titleKey) : title }}
+          {{ displayTitle }}
         </h2>
       </slot>
     </div>
@@ -67,7 +110,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .accordion-container {
-  border: 1px solid var(--border)
+  border: 1px solid var(--border);
+  border-radius: var(--border-radius);
 }
 .accordion-header {
   padding: 16px 16px 16px 11px;

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -125,6 +125,14 @@ export default defineComponent({
       default: undefined
     },
 
+    /**
+     * Use body text color for the label instead of the default input-label color.
+     */
+    useBodyTextColor: {
+      type:    Boolean,
+      default: false
+    },
+
     /**
      * Inherited global identifier prefix for tests
      * Define a term based on the parent component to avoid conflicts on multiple components
@@ -316,6 +324,7 @@ export default defineComponent({
           <span
             v-if="labelKey"
             :id="idForLabel"
+            :class="{ 'body-text-color': useBodyTextColor }"
           >
             <t
               :k="labelKey"
@@ -325,6 +334,7 @@ export default defineComponent({
           <span
             v-else-if="label"
             :id="idForLabel"
+            :class="{ 'body-text-color': useBodyTextColor }"
           >{{ label }}</span>
           <i
             v-if="tooltipKey"
@@ -403,6 +413,10 @@ $fontColor: var(--input-label);
     display: inline-flex;
     margin: 0px 10px 0px 5px;
 
+    .body-text-color {
+      color: var(--body-text);
+    }
+
     &.checkbox-primary {
       color: inherit;
       font-weight: 600;

package/rancher-components/Form/LabeledInput/LabeledInput.test.ts

@@ -1,4 +1,4 @@
-import { defineComponent, nextTick } from 'vue';
+import { defineComponent, nextTick, provide, ref } from 'vue';
 import { mount, flushPromises } from '@vue/test-utils';
 import { useForm } from 'vee-validate';
 import { LabeledInput } from './index';
@@ -195,21 +195,27 @@ describe('component: LabeledInput', () => {
 
     it('with name prop: form-level validation schema error is shown when the form validates', async() => {
       const errorMessage = 'Username is required';
+      const showAllErrors = ref(false);
       let triggerFormValidation!: () => Promise<unknown>;
 
       const TestWrapper = defineComponent({
         components: { LabeledInput },
         setup() {
+          provide('vee-show-all-errors', showAllErrors);
+
           const { validate } = useForm({
             validationSchema: { username: (v: string) => (!v ? errorMessage : true) },
-            initialValues:    { username: '' }
+            initialValues:    { username: '' },
           });
 
-          triggerFormValidation = validate;
+          triggerFormValidation = async() => {
+            await validate();
+            showAllErrors.value = true;
+          };
 
           return {};
         },
-        template: '<LabeledInput name="username" value="" />'
+        template: '<LabeledInput name="username" value="" />',
       });
 
       const wrapper = mount(TestWrapper, { global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } } });