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

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

package/config/labels-annotations.js

@@ -19,6 +19,7 @@ export const NODE_ARCHITECTURE = 'kubernetes.io/arch';
 export const IMPORTED_CLUSTER_VERSION_MANAGEMENT = 'rancher.io/imported-cluster-version-management';
 export const UI_PROJECT_SECRET = 'management.cattle.io/project-scoped-secret';
 export const UI_PROJECT_SECRET_COPY = 'management.cattle.io/project-scoped-secret-copy';
+export const SERVICE_LINKS = 'ui.rancher/service-links';
 
 export const KUBERNETES = {
   SERVICE_ACCOUNT_UID:  'kubernetes.io/service-account.uid',

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

@@ -10,6 +10,7 @@ import {
   SNAPSHOT,
   VIRTUAL_TYPES,
   CAPI,
+  WORKLOAD_DASHBOARD,
 } from '@shell/config/types';
 
 import {
@@ -103,6 +104,7 @@ export function init(store) {
     CONFIG_MAP
   ], 'storage');
   basicType([
+    WORKLOAD_DASHBOARD,
     WORKLOAD,
     WORKLOAD_TYPES.DEPLOYMENT,
     WORKLOAD_TYPES.DAEMON_SET,
@@ -112,10 +114,6 @@ export function init(store) {
     POD,
   ], 'workload');
 
-  setGroupDefaultType('workload', () => {
-    return store.getters['features/get'](STEVE_CACHE) ? WORKLOAD_TYPES.DEPLOYMENT : undefined;
-  });
-
   weightGroup('cluster', 99, true);
   weightGroup('workload', 98, true);
   weightGroup('serviceDiscovery', 96, true);
@@ -586,6 +584,21 @@ export function init(store) {
     overview:   true,
   });
 
+  // Workload Dashboard - overview page using the Resource Summary API
+  virtualType({
+    label:          store.getters['i18n/t'](`typeLabel.${ WORKLOAD }`, { count: 2 }),
+    group:          'Root',
+    namespaced:     true,
+    name:           WORKLOAD_DASHBOARD,
+    weight:         100,
+    icon:           'folder',
+    ifHaveSubTypes: Object.values(WORKLOAD_TYPES),
+    ifFeature:      STEVE_CACHE,
+    route:          { name: 'c-cluster-explorer-workload-dashboard' },
+    exact:          true,
+    overview:       true,
+  });
+
   virtualType({
     labelKey:     'members.clusterAndProject',
     group:        'cluster',

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]
@@ -124,10 +130,12 @@ export function init(store) {
 
   basicType([
     HOSTED_PROVIDER,
+    CAPI.CAPI_PROVIDER,
     'rke-kontainer-providers',
     'rke-node-providers',
   ], 'providers');
 
+  weightType(CAPI.CAPI_PROVIDER, 4, true);
   weightType(CAPI.MACHINE_DEPLOYMENT, 4, true);
   weightType(CAPI.MACHINE_SET, 3, true);
   weightType(CAPI.MACHINE, 2, true);
@@ -159,7 +167,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 +186,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 +279,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/index.js

@@ -9,6 +9,22 @@ export const routerOptions = {
   base:     process.env.routerBase || '/',
   routes:   Routes,
   fallback: false,
+  scrollBehavior(to, from, savedPosition) {
+    // Returning the savedPosition will result in a native-like behavior when
+    // navigating with back/forward buttons
+    if (savedPosition) {
+      return savedPosition;
+    }
+
+    // Handle the "skip to main content" link
+    if (to.hash === '#main-content') {
+      const el = document.getElementById('main-content');
+
+      el?.focus();
+
+      return { el: to.hash };
+    }
+  },
 };
 
 export function extendRouter(config, context) {

package/config/router/navigation-guards/__tests__/authentication.test.ts

@@ -0,0 +1,130 @@
+import { authenticate } from '@shell/config/router/navigation-guards/authentication';
+
+jest.mock('@shell/utils/router', () => ({ routeRequiresAuthentication: () => true }));
+
+const isLoggedInMock = jest.fn();
+const findMeMock = jest.fn();
+const notLoggedInMock = jest.fn();
+const noAuthMock = jest.fn();
+
+jest.mock('@shell/utils/auth', () => {
+  const actual = jest.requireActual('@shell/utils/auth');
+
+  return {
+    ...actual,
+    isLoggedIn:  (...args: any[]) => isLoggedInMock(...args),
+    findMe:      (...args: any[]) => findMeMock(...args),
+    notLoggedIn: (...args: any[]) => notLoggedInMock(...args),
+    noAuth:      (...args: any[]) => noAuthMock(...args),
+  };
+});
+
+function makeStore({ user, fromHeader }: { user: any, fromHeader: string }) {
+  const getters: Record<string, any> = {
+    'auth/enabled':    true,
+    'auth/loggedIn':   false,
+    'auth/user':       user,
+    'auth/fromHeader': fromHeader,
+  };
+
+  return {
+    dispatch: jest.fn().mockResolvedValue(undefined),
+    commit:   jest.fn(),
+    getters,
+  };
+}
+
+const to = { name: 'c-cluster-explorer', query: {} };
+
+describe('navigation-guards/authentication: mustChangePassword', () => {
+  beforeEach(() => {
+    isLoggedInMock.mockReset().mockResolvedValue(undefined);
+    findMeMock.mockReset();
+    notLoggedInMock.mockReset();
+    noAuthMock.mockReset();
+  });
+
+  it('redirects local users with mustChangePassword to auth-setup', async() => {
+    const store = makeStore({
+      user:       { mustChangePassword: true, principalIds: ['local://user-1'] },
+      fromHeader: 'true',
+    });
+
+    findMeMock.mockResolvedValue({ id: 'local://user-1', provider: 'local' });
+
+    const next = jest.fn();
+
+    await authenticate(to as any, {} as any, next, { store } as any);
+
+    expect(next).toHaveBeenCalledWith({ name: 'auth-setup' });
+    expect(isLoggedInMock).not.toHaveBeenCalled();
+  });
+
+  it('lets SSO users with mustChangePassword reach the requested route', async() => {
+    const me = { id: 'oidc_user://user@example.com', provider: 'genericoidc' };
+    const store = makeStore({
+      user:       { mustChangePassword: true, principalIds: ['local://user-1', me.id] },
+      fromHeader: 'true',
+    });
+
+    findMeMock.mockResolvedValue(me);
+
+    const next = jest.fn();
+
+    await authenticate(to as any, {} as any, next, { store } as any);
+
+    expect(next).toHaveBeenCalledWith();
+    expect(next).not.toHaveBeenCalledWith({ name: 'auth-setup' });
+    expect(isLoggedInMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not redirect when mustChangePassword is false, regardless of provider', async() => {
+    const store = makeStore({
+      user:       { mustChangePassword: false, principalIds: ['local://user-1'] },
+      fromHeader: 'true',
+    });
+
+    findMeMock.mockResolvedValue({ id: 'local://user-1', provider: 'local' });
+
+    const next = jest.fn();
+
+    await authenticate(to as any, {} as any, next, { store } as any);
+
+    expect(next).toHaveBeenCalledWith();
+    expect(isLoggedInMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('redirects local users with mustChangePassword to auth-setup for older-style fromHeader', async() => {
+    const store = makeStore({
+      user:       { mustChangePassword: true, principalIds: ['local://user-1'] },
+      fromHeader: 'unknown',
+    });
+
+    findMeMock.mockResolvedValue({ id: 'local://user-1', provider: 'local' });
+
+    const next = jest.fn();
+
+    await authenticate(to as any, {} as any, next, { store } as any);
+
+    expect(next).toHaveBeenCalledWith({ name: 'auth-setup' });
+    expect(isLoggedInMock).not.toHaveBeenCalled();
+  });
+
+  it('lets SSO users with mustChangePassword through for older-style fromHeader', async() => {
+    const me = { id: 'saml_user://user', provider: 'saml' };
+    const store = makeStore({
+      user:       { mustChangePassword: true, principalIds: ['local://user-1', me.id] },
+      fromHeader: 'unknown',
+    });
+
+    findMeMock.mockResolvedValue(me);
+
+    const next = jest.fn();
+
+    await authenticate(to as any, {} as any, next, { store } as any);
+
+    expect(next).toHaveBeenCalledWith();
+    expect(next).not.toHaveBeenCalledWith({ name: 'auth-setup' });
+    expect(isLoggedInMock).toHaveBeenCalledTimes(1);
+  });
+});

package/config/router/navigation-guards/authentication.js

@@ -61,19 +61,21 @@ export async function authenticate(to, from, next, { store }) {
     await store.dispatch('auth/getUser');
     const user = store.getters['auth/user'] || {};
 
-    if (user?.mustChangePassword) {
-      return next({ name: 'auth-setup' });
-    }
-
     // In newer versions the API calls return the auth state instead of having to make a new call all the time.
     const fromHeader = store.getters['auth/fromHeader'];
 
+    const mustChangePasswordFor = (me) => user?.mustChangePassword && me?.provider === 'local';
+
     if ( fromHeader === 'none' ) {
       noAuth(store);
       handleOidcRedirectToCallbackUrl();
     } else if ( fromHeader === 'true' ) {
       const me = await findMe(store);
 
+      if (mustChangePasswordFor(me)) {
+        return next({ name: 'auth-setup' });
+      }
+
       await isLoggedIn(store, getUserObject(user, me));
       handleOidcRedirectToCallbackUrl();
     } else if ( fromHeader === 'false' ) {
@@ -85,6 +87,10 @@ export async function authenticate(to, from, next, { store }) {
       try {
         const me = await findMe(store);
 
+        if (mustChangePasswordFor(me)) {
+          return next({ name: 'auth-setup' });
+        }
+
         await isLoggedIn(store, getUserObject(user, me));
         handleOidcRedirectToCallbackUrl();
       } catch (e) {