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

package/components/templates/home.vue

@@ -62,6 +62,10 @@ export default {
 
 <template>
   <div class="dashboard-root">
+    <a
+      href="#main-content"
+      class="skip-to-content btn role-primary"
+    >{{ t('nav.skipToContent') }}</a>
     <FixedBanner :header="true" />
     <Inactivity />
     <AwsComplianceBanner />
@@ -77,8 +81,10 @@ export default {
       />
 
       <main
+        id="main-content"
         class="main-layout"
         :aria-label="t('layouts.home')"
+        tabindex="-1"
       >
         <router-view
           :key="$route.path"
@@ -142,4 +148,16 @@ export default {
       padding: 0;
     }
   }
+
+  .skip-to-content {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    transform: translateY(-100%);
+
+    &:focus {
+      transform: translate(1rem, 1rem);
+    }
+  }
 </style>

package/components/templates/plain.vue

@@ -66,6 +66,10 @@ export default {
 
 <template>
   <div class="dashboard-root">
+    <a
+      href="#main-content"
+      class="skip-to-content btn role-primary"
+    >{{ t('nav.skipToContent') }}</a>
     <FixedBanner :header="true" />
     <AwsComplianceBanner />
 
@@ -75,8 +79,10 @@ export default {
     >
       <Header :simple="true" />
       <main
+        id="main-content"
         class="main-layout"
         :aria-label="t('layouts.plain')"
+        tabindex="-1"
       >
         <IndentedPanel class="pt-20">
           <router-view
@@ -147,4 +153,16 @@ export default {
       padding: 0;
     }
   }
+
+  .skip-to-content {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    transform: translateY(-100%);
+
+    &:focus {
+      transform: translate(1rem, 1rem);
+    }
+  }
 </style>

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

@@ -0,0 +1,159 @@
+import {
+  computed, defineComponent, nextTick, provide, ref
+} from 'vue';
+import { mount, flushPromises } from '@vue/test-utils';
+import { useVeeValidateField } from './useVeeValidateField';
+
+function createHarness(opts: {
+  name?: string | null;
+  rules?: Array<(v: unknown) => string | undefined>;
+  value?: unknown;
+  validationMessage?: string;
+  showAllErrors?: boolean;
+}) {
+  return defineComponent({
+    setup() {
+      const nameRef = ref(opts.name ?? null);
+      const rulesRef = ref(opts.rules ?? []);
+      const valueRef = ref(opts.value ?? '');
+      const validationMessageRef = computed(() => opts.validationMessage);
+
+      if (opts.showAllErrors) {
+        provide('vee-show-all-errors', ref(true));
+      }
+
+      const result = useVeeValidateField({
+        name:              nameRef,
+        rules:             rulesRef,
+        value:             valueRef,
+        validationMessage: validationMessageRef,
+      });
+
+      return {
+        ...result,
+        nameRef,
+        valueRef,
+      };
+    },
+    template: '<div />',
+  });
+}
+
+describe('useVeeValidateField', () => {
+  describe('without a name prop', () => {
+    it('falls back to the passed validationMessage', async() => {
+      const errorMessage = 'This field is required';
+      const wrapper = mount(createHarness({
+        name:              null,
+        validationMessage: errorMessage,
+      }));
+
+      await flushPromises();
+
+      expect(wrapper.vm.effectiveValidationMessage).toBe(errorMessage);
+    });
+
+    it('does not run rules through vee-validate', async() => {
+      const rule = jest.fn(() => 'error');
+      const wrapper = mount(createHarness({
+        name:  null,
+        rules: [rule],
+        value: '',
+      }));
+
+      await flushPromises();
+
+      expect(wrapper.vm.effectiveValidationMessage).toBeUndefined();
+    });
+  });
+
+  describe('with a name prop', () => {
+    it('does not show error before the field is touched', async() => {
+      const errorMessage = 'Cannot be empty';
+      const wrapper = mount(createHarness({
+        name:  'testField',
+        rules: [(v) => (!v ? errorMessage : undefined)],
+        value: '',
+      }));
+
+      await flushPromises();
+
+      expect(wrapper.vm.effectiveValidationMessage).toBeUndefined();
+    });
+
+    it('shows vee-validate error after veeHandleBlur + veeValidate', async() => {
+      const errorMessage = 'Cannot be empty';
+      const wrapper = mount(createHarness({
+        name:  'testField',
+        rules: [(v) => (!v ? errorMessage : undefined)],
+        value: '',
+      }));
+
+      wrapper.vm.veeHandleBlur(undefined, false);
+      await wrapper.vm.veeValidate();
+      await flushPromises();
+
+      expect(wrapper.vm.effectiveValidationMessage).toBe(errorMessage);
+    });
+
+    it('shows error without touch when showAllErrors is injected as true', async() => {
+      const errorMessage = 'Cannot be empty';
+      const showAllErrors = ref(false);
+
+      const inner = defineComponent({
+        setup() {
+          const nameRef = ref('testField');
+          const rulesRef = ref([(v: unknown) => (!v ? errorMessage : undefined)]);
+          const valueRef = ref('');
+          const validationMessageRef = computed(() => undefined as string | undefined);
+
+          return useVeeValidateField({
+            name:              nameRef,
+            rules:             rulesRef,
+            value:             valueRef,
+            validationMessage: validationMessageRef,
+          });
+        },
+        template: '<div />',
+      });
+
+      const outer = defineComponent({
+        components: { inner },
+        setup() {
+          provide('vee-show-all-errors', showAllErrors);
+        },
+        template: '<inner ref="innerRef" />',
+      });
+
+      const wrapper = mount(outer);
+      const innerVm = wrapper.getComponent(inner);
+
+      await flushPromises();
+      expect(innerVm.vm.effectiveValidationMessage).toBeUndefined();
+
+      showAllErrors.value = true;
+      await nextTick();
+
+      expect(innerVm.vm.effectiveValidationMessage).toBe(errorMessage);
+    });
+
+    it('clears vee-validate error when value becomes valid', async() => {
+      const errorMessage = 'Cannot be empty';
+      const wrapper = mount(createHarness({
+        name:  'testField',
+        rules: [(v) => (!v ? errorMessage : undefined)],
+        value: '',
+      }));
+
+      wrapper.vm.veeHandleBlur(undefined, false);
+      await wrapper.vm.veeValidate();
+      await flushPromises();
+      expect(wrapper.vm.effectiveValidationMessage).toBe(errorMessage);
+
+      wrapper.vm.valueRef = 'some value';
+      await flushPromises();
+
+      expect(wrapper.vm.effectiveValidationMessage).toBeUndefined();
+    });
+  });
+});

package/composables/useVeeValidateField.ts

@@ -0,0 +1,67 @@
+import { computed, inject, ref, watch } from 'vue';
+import type { Ref } from 'vue';
+import { useField } from 'vee-validate';
+import { generateRandomAlphaString } from '@shell/utils/string';
+
+interface UseVeeValidateFieldOptions {
+  name: Ref<string | null | undefined>;
+  rules: Ref<Array<any>>;
+  value: Ref<unknown>;
+  validationMessage: Ref<unknown>;
+}
+
+export function useVeeValidateField({
+  name,
+  rules,
+  value,
+  validationMessage,
+}: UseVeeValidateFieldOptions) {
+  const showAllErrors = inject<Ref<boolean>>('vee-show-all-errors', ref(false));
+  const standaloneFieldId = `__field__${ generateRandomAlphaString(12) }`;
+  const veeFieldName = computed(() => name.value || standaloneFieldId);
+
+  const veeValidator = (v: unknown): boolean | string => {
+    if (!name.value) return true;
+    for (const rule of rules.value as Array<(v: unknown) => string | undefined>) {
+      const msg = rule(v);
+
+      if (msg) return msg;
+    }
+
+    return true;
+  };
+
+  const {
+    errorMessage: veeError,
+    handleBlur:   veeHandleBlur,
+    validate:     veeValidate,
+    value:        veeValue,
+    meta:         veeMeta,
+  } = useField<unknown>(veeFieldName, veeValidator, {
+    initialValue:          value.value,
+    validateOnValueUpdate: true,
+    validateOnMount:       true,
+  });
+
+  // Keep vee-validate's internal value in sync with the controlled prop value.
+  watch(value, (v) => {
+    if (veeValue.value !== v) {
+      veeValue.value = v;
+    }
+  });
+
+  const effectiveValidationMessage = computed(() => {
+    if (name.value && veeError.value && (veeMeta.touched || showAllErrors.value)) {
+      return veeError.value;
+    }
+
+    return validationMessage.value;
+  });
+
+  return {
+    effectiveValidationMessage,
+    veeHandleBlur,
+    veeValidate,
+    showAllErrors,
+  };
+}

package/config/pagination-table-headers.js

@@ -5,7 +5,10 @@ import {
   EVENT_TYPE,
   SECRET_ORIGIN,
   EVENT_FIRST_SEEN_TIME,
-  WORKLOAD_HEALTH_SCALE
+  WORKLOAD_HEALTH_SCALE,
+  MGMT_CLUSTER_PROVIDER,
+  MGMT_CLUSTER_KUBE_VERSION,
+  AUTOSCALER_ENABLED
 } from '@shell/config/table-headers';
 
 // This file contains table headers
@@ -102,3 +105,17 @@ export const STEVE_WORKLOAD_HEALTH_SCALE = {
   sort:   false,
   search: false,
 };
+
+export const STEVE_MGMT_CLUSTER_PROVIDER = { ...MGMT_CLUSTER_PROVIDER };
+
+export const STEVE_MGMT_CLUSTER_KUBE_VERSION = {
+  ...MGMT_CLUSTER_KUBE_VERSION,
+  sort:   'status.info.kubernetesVersion',
+  search: 'status.info.kubernetesVersion',
+};
+
+export const STEVE_AUTOSCALER_ENABLED = {
+  ...AUTOSCALER_ENABLED,
+  sort:   false,
+  search: false,
+};

package/config/product/manager.js

@@ -1,4 +1,6 @@
-import { AGE, NAME as NAME_COL, STATE } from '@shell/config/table-headers';
+import {
+  AGE, MGMT_CLUSTER_KUBE_VERSION, MGMT_CLUSTER_PROVIDER, NAME as NAME_COL, STATE
+} from '@shell/config/table-headers';
 import {
   CAPI,
   CATALOG,
@@ -16,6 +18,9 @@ import { MULTI_CLUSTER } from '@shell/store/features';
 import { DSL } from '@shell/store/type-map';
 import { BLANK_CLUSTER } from '@shell/store/store-types.js';
 import { markRaw } from 'vue';
+import {
+  STEVE_AGE_COL, STEVE_MGMT_CLUSTER_KUBE_VERSION, STEVE_MGMT_CLUSTER_PROVIDER, STEVE_NAMESPACE_COL, STEVE_STATE_COL
+} from '@shell/config/pagination-table-headers';
 
 export const NAME = 'manager';
 
@@ -73,6 +78,7 @@ export function init(store) {
   ]);
 
   configureType(SNAPSHOT, { depaginate: true });
+  configureType(CATALOG.CLUSTER_REPO, { listCreateButtonLabelKey: 'catalog.repo.add' });
 
   configureType(CAPI.RANCHER_CLUSTER, {
     showListMasthead: false, namespaced: false, alias: [HCI.CLUSTER]
@@ -159,7 +165,16 @@ export function init(store) {
     width:     100,
   };
 
-  headers(CAPI.RANCHER_CLUSTER, [
+  const EXPLORER = {
+    name:   'explorer',
+    label:  ' ',
+    align:  'right',
+    width:  65,
+    sort:   false,
+    search: false
+  };
+
+  headers(MANAGEMENT.CLUSTER, [
     STATE,
     {
       name:          'name',
@@ -169,35 +184,61 @@ export function init(store) {
       formatter:     'ClusterLink',
       canBeVariable: true,
     },
+    MGMT_CLUSTER_PROVIDER,
+    MGMT_CLUSTER_KUBE_VERSION,
     {
-      name:     'kubernetesVersion',
-      labelKey: 'tableHeaders.version',
-      subLabel: 'Architecture',
-      value:    'kubernetesVersion',
-      sort:     'kubernetesVersion',
-      search:   'kubernetesVersion',
+      ...MACHINE_SUMMARY,
+      sort: 'statusInfo.nodeCount'
     },
+    AGE,
+    EXPLORER,
+  ], [
+    STEVE_STATE_COL,
     {
-      name:      'provider',
-      labelKey:  'tableHeaders.provider',
-      subLabel:  'Distro',
-      value:     'machineProvider',
-      sort:      ['machineProvider', 'provisioner'],
-      formatter: 'ClusterProvider',
+      name:          'name',
+      labelKey:      'tableHeaders.name',
+      value:         'spec.displayName',
+      sort:          ['spec.displayName'],
+      search:        ['spec.displayName'],
+      formatter:     'ClusterLink',
+      canBeVariable: true,
     },
-    MACHINE_SUMMARY,
-    AGE,
+    STEVE_MGMT_CLUSTER_PROVIDER,
+    STEVE_MGMT_CLUSTER_KUBE_VERSION,
     {
-      name:  'explorer',
-      label: ' ',
-      align: 'right',
-      width: 65,
+      ...MACHINE_SUMMARY,
+      sort: 'status.info.nodeCount'
     },
+    STEVE_AGE_COL,
+    EXPLORER
   ]);
 
+  configureType(MANAGEMENT.CLUSTER, {
+    listGroups: [{
+      tooltipKey: 'resourceTable.groupBy.none',
+      icon:       'icon-list-flat',
+      value:      'none',
+    }, {
+      icon:          'icon-folder',
+      // Given management.cattle.io.cluster is not namespaced we group by fleet workspace
+      value:         'spec.fleetWorkspaceName',
+      field:         'spec.fleetWorkspaceName',
+      hideColumn:    STEVE_NAMESPACE_COL.name,
+      tooltipKey:    'resourceTable.groupBy.workspace',
+      groupLabelKey: 'groupByLabel',
+    }],
+    listGroupsWillOverride: true,
+  });
+
   headers(CAPI.MACHINE_DEPLOYMENT, [
     STATE,
-    NAME_COL,
+    NAME_COL, {
+      name:     'cluster',
+      labelKey: 'tableHeaders.cluster',
+      value:    'clusterName',
+      getValue: (row) => row.clusterName,
+      sort:     ['clusterName'],
+    },
     MACHINE_SUMMARY,
     AGE
   ]);
@@ -236,4 +277,24 @@ export function init(store) {
       })
     }
   });
+
+  const clusterGroupConfig = {
+    listGroups: [{
+      tooltipKey: 'resourceTable.groupBy.none',
+      icon:       'icon-list-flat',
+      value:      'none',
+    }, {
+      icon:          'icon-folder',
+      value:         'clusterName',
+      field:         'clusterName',
+      hideColumn:    'cluster',
+      tooltipKey:    'resourceTable.groupBy.cluster',
+      groupLabelKey: 'groupByLabel',
+    }],
+    listGroupsWillOverride: true,
+  };
+
+  configureType(CAPI.MACHINE_DEPLOYMENT, { ...clusterGroupConfig });
+  configureType(CAPI.MACHINE_SET, { ...clusterGroupConfig });
+  configureType(CAPI.MACHINE, { ...clusterGroupConfig });
 }

package/config/router/routes.js

@@ -138,6 +138,12 @@ export default [
     component: () => interopDefault(import('@shell/components/templates/standalone.vue')),
     name:      'standalone',
     children:  [
+      {
+        path:      '/c/:cluster/readme',
+        component: () => interopDefault(import('@shell/pages/readme.vue')),
+        name:      'readme',
+        meta:      { requiresAuthentication: true, standalone: true }
+      },
     ]
   },
   {

package/config/table-headers.js

@@ -1185,6 +1185,25 @@ export const AUTOSCALER_ENABLED = {
   name:      'autoscaler',
   labelKey:  'tableHeaders.autoscaler',
   value:     'isAutoscalerEnabled',
-  sort:      ['autoscaler'],
+  sort:      ['isAutoscalerEnabled'],
   formatter: 'Autoscaler',
 };
+
+export const MGMT_CLUSTER_PROVIDER = {
+  name:      'provider',
+  labelKey:  'tableHeaders.provider',
+  subLabel:  'Distro',
+  value:     'statusInfo.machineProvider',
+  sort:      ['status.info.machineProvider', 'status.provider', 'status.driver'],
+  search:    ['status.info.machineProvider', 'status.provider', 'status.driver'],
+  formatter: 'ClusterProvider',
+};
+
+export const MGMT_CLUSTER_KUBE_VERSION = {
+  name:      'kubernetesVersion',
+  labelKey:  'tableHeaders.version',
+  subLabel:  'Architecture',
+  sort:      'statusInfo.kubernetesVersion',
+  search:    'statusInfo.kubernetesVersion',
+  formatter: 'ClusterKubeVersion',
+};

package/config/types.js

@@ -253,7 +253,8 @@ export const MANAGEMENT = {
   RKE_TEMPLATE:                  'management.cattle.io.clustertemplate',
   RKE_TEMPLATE_REVISION:         'management.cattle.io.clustertemplaterevision',
   CLUSTER_PROXY_CONFIG:          'management.cattle.io.clusterproxyconfig',
-  OIDC_CLIENT:                   'management.cattle.io.oidcclient'
+  OIDC_CLIENT:                   'management.cattle.io.oidcclient',
+  PROXY_ENDPOINT:                'management.cattle.io.proxyEndpoint',
 };
 
 export const BRAND = {