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

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/cookies.js

@@ -1,4 +1,3 @@
 export const CSRF = 'CSRF';
 export const USERNAME = 'R_USERNAME';
 export const LOCALE = 'R_LOCALE';
-export const REDIRECTED = 'R_REDIRECTED';

package/config/labels-annotations.js

@@ -87,6 +87,7 @@ export const CATALOG = {
 
   PRIME_ONLY:   'catalog.cattle.io/prime-only',
   EXPERIMENTAL: 'catalog.cattle.io/experimental',
+  DEPRECATED:   'catalog.cattle.io/deprecated',
   NAMESPACE:    'catalog.cattle.io/namespace',
   RELEASE_NAME: 'catalog.cattle.io/release-name',
   FEATURED:     'catalog.cattle.io/featured',

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/query-params.js

@@ -72,6 +72,7 @@ export const DEPRECATED = 'deprecated';
 export const HIDDEN = 'hidden';
 export const FROM_TOOLS = 'tools';
 export const FROM_CLUSTER = 'cluster';
+export const NEW_APP_INSTANCE = 'new-instance';
 export const HIDE_SIDE_NAV = 'hide-side-nav';
 
 // Cluster provisioning

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 }
+      },
     ]
   },
   {
@@ -432,10 +438,6 @@ export default [
         path:      '/c/:cluster/monitoring/route-receiver/create',
         component: () => interopDefault(import('@shell/pages/c/_cluster/monitoring/route-receiver/create.vue')),
         name:      'c-cluster-monitoring-route-receiver-create'
-      }, {
-        path:      '/c/:cluster/explorer/tools/pages/:page?',
-        component: () => interopDefault(import('@shell/pages/c/_cluster/explorer/tools/pages/_page.vue')),
-        name:      'c-cluster-explorer-tools-pages-page'
       }, {
         path:      '/c/:cluster/auth/config/:id',
         component: () => interopDefault(import('@shell/pages/c/_cluster/auth/config/_id.vue')),
@@ -452,10 +454,6 @@ export default [
         path:      '/c/:cluster/manager/nodeDriver/:id',
         component: () => interopDefault(import('@shell/pages/c/_cluster/manager/drivers/nodeDriver/_id.vue')),
         name:      'c-cluster-manager-driver-nodedriver-id'
-      }, {
-        path:      '/c/:cluster/manager/pages/:page?',
-        component: () => interopDefault(import('@shell/pages/c/_cluster/manager/pages/_page.vue')),
-        name:      'c-cluster-manager-pages-page'
       }, {
         path:      '/c/:cluster/monitoring/alertmanagerconfig/:alertmanagerconfigid',
         component: () => interopDefault(import('@shell/pages/c/_cluster/monitoring/alertmanagerconfig/_alertmanagerconfigid/index.vue')),

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 = {