@rancher/shell 3.0.4 → 3.0.5-rc.2

package/store/type-map.js

@@ -107,6 +107,7 @@
 //                               graphConfig: undefined   -- Use this to pass along the graph configuration
 //                               notFilterNamespace:  undefined -- Define namespaces that do not need to be filtered
 //                               localOnly: False -- Hide this type from the nav/search bar on downstream clusters
+//                               custom: any - Custom options for a given type
 //                           }
 // )
 // ignoreGroup(group):        Never show group or any types in it
@@ -524,6 +525,7 @@ export const getters = {
       depaginate:             false,
       customRoute:            undefined,
       resourceEditMasthead:   true,
+      custom:                 {},
     };
 
     return (schemaOrType, pagination) => {
@@ -657,7 +659,14 @@ export const getters = {
 
         const label = typeObj.labelKey ? rootGetters['i18n/t'](typeObj.labelKey) || typeObj.label : typeObj.label;
 
-        const labelDisplay = highlightLabel(label, count, typeObj.schema);
+        let labelDisplay = highlightLabel(label, count, typeObj.schema);
+
+        // If we did not match on just the label, add the schema name and see if that matches
+        if (!labelDisplay && typeObj.schema?.attributes) {
+          const schemaName = `${ typeObj.schema.attributes.resource }.${ typeObj.schema.attributes.group }`;
+
+          labelDisplay = highlightLabel(`${ label } (${ schemaName })`, count, typeObj.schema);
+        }
 
         if ( !labelDisplay ) {
           // Search happens in highlight and returns null if not found
@@ -1729,6 +1738,8 @@ export const mutations = {
     let obj = { ...options, match };
 
     if ( idx >= 0 ) {
+      // Merge the custom data object - multiple configures will update existing rather than overwrite
+      obj.custom = Object.assign(state.typeOptions[idx].custom || {}, obj.custom || {});
       obj = Object.assign(state.typeOptions[idx], obj);
       state.typeOptions.splice(idx, 1, obj);
     } else {

package/store/type-map.utils.ts

@@ -62,12 +62,12 @@ export function createHeaders(
   } = columns;
   const { rootGetters } = ctx;
   const out = typeOptions.showState ? [stateColumn] : [];
-  const attributes = (schema.attributes as SchemaAttribute) || {};
-  const columnsFromSchema = attributes.columns || [];
+  const attributes = (schema?.attributes as SchemaAttribute) || {};
+  const columnsFromSchema = attributes?.columns || [];
 
   // A specific list has been provided
-  if ( headers?.[schema.id]?.length ) {
-    return headers[schema.id].map((entry: any) => {
+  if ( headers?.[schema?.id]?.length ) {
+    return headers[schema?.id].map((entry: any) => {
       if ( typeof entry === 'string' ) {
         const col = findBy(columnsFromSchema, 'name', entry);
 

package/types/global-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/types/internal-api/shell/growl.d.ts

@@ -0,0 +1,25 @@
+export interface DetailedMessage {
+  title?: string;
+  description: string;
+}
+
+export interface GrowlConfig {
+  /**
+   * The content of the notification message.
+   * Either a simple string or an object with `title` and `description` for detailed notifications.
+   */
+  message: string | DetailedMessage;
+
+  /**
+   * Optional type of the growl notification.
+   * Determines the visual style of the notification.
+   * Defaults to `'error'` if not provided.
+   */
+  type?: 'success' | 'info' | 'warning' | 'error';
+
+  /**
+   * Optional duration (in milliseconds) for which the notification should be displayed.
+   * Defaults to `5000` milliseconds. A value of `0` keeps the notification indefinitely.
+   */
+  timeout?: number;
+}

package/types/internal-api/shell/modal.d.ts

@@ -0,0 +1,77 @@
+import { Component } from 'vue';
+
+/**
+ * Configuration object for opening a modal.
+ */
+export interface ModalConfig {
+  /**
+   * The Vue component to be displayed inside the modal.
+   * This can be any SFC (Single-File Component) imported and passed in as a `Component`.
+   *
+   * Example:
+   * ```ts
+   * import MyCustomModal from '@/components/MyCustomModal.vue';
+   *
+   * this.$shell.modal({
+   *   component: MyCustomModal,
+   *   componentProps: { title: 'Hello Modal' }
+   * });
+   * ```
+   */
+  component: Component;
+
+  /**
+   * Optional props to pass directly to the component rendered inside the modal.
+   *
+   * Example:
+   * ```ts
+   * componentProps: { title: 'Hello Modal', isVisible: true }
+   * ```
+   */
+  componentProps?: Record<string, any>;
+
+  /**
+   * Optional array of resources that the modal component might need.
+   * These are passed directly into the modal's `resources` prop.
+   *
+   * Example:
+   * ```ts
+   * resources: [myResource, anotherResource]
+   * ```
+   */
+  resources?: any[];
+
+  /**
+   * Custom width for the modal. Defaults to `600px`.
+   * The width can be specified as a string with a valid unit (`px`, `%`, `rem`, etc.).
+   *
+   * Examples:
+   * ```ts
+   * modalWidth: '800px' // Width in pixels
+   * modalWidth: '75%'   // Width as a percentage
+   * ```
+   */
+  modalWidth?: string;
+
+  /**
+   * Determines if clicking outside the modal will close it. Defaults to `true`.
+   * Set this to `false` to prevent closing via outside clicks.
+   *
+   * Example:
+   * ```ts
+   * closeOnClickOutside: false
+   * ```
+   */
+  closeOnClickOutside?: boolean;
+
+  /**
+   * If true, the modal is considered "sticky" and may not close automatically
+   * on certain user interactions. Defaults to `false`.
+   *
+   * Example:
+   * ```ts
+   * modalSticky: true
+   * ```
+   */
+  // modalSticky?: boolean; // Not implemented yet
+}

package/types/internal-api/shell/slideIn.d.ts

@@ -0,0 +1,15 @@
+import type { Component } from 'vue';
+
+/**
+ * Configuration object for opening a slide-in panel.
+ *
+ * @property component - The Vue component to render in the slide-in panel.
+ *                       This should be a valid Vue Component, such as an imported SFC or functional component.
+ *
+ * @property componentProps - (Optional) An object containing props to be passed to the component rendered in the slide-in panel.
+ *                            Keys should match the props defined in the provided component.
+ */
+export interface SlideInConfig {
+  component: Component | null;
+  componentProps?: Record<string, any>;
+}

package/types/resources/fleet.d.ts

@@ -19,11 +19,6 @@ export interface BundleNonReadyResource extends BundleResourceKey {
   summary: { [state: string]: string }
 }
 
-export interface BundleNonReadyBundle {
-  modifiedStatus: BundleModifiedResource[],
-  nonReadyStatus: BundleNonReadyResource[],
-}
-
 export interface Condition {
   status: string,
   type: string,
@@ -39,15 +34,6 @@ export interface BundleDeploymentStatus {
   conditions: Condition[],
 }
 
-export interface BundleStatusSummary {
-  nonReadyResources?: BundleNonReadyBundle[],
-}
-
-export interface BundleStatus {
-  resourceKey?: BundleResourceKey[],
-  summary?: BundleStatusSummary,
-}
-
 export interface BundleDeployment {
   spec: {
     deploymentId: string,

package/types/shell/index.d.ts

@@ -1,25 +1,7 @@
 // Auto-generated type definitions for shell
 // Do not modify this file as changes will get overwritten
-declare module '*.vue' {
-  import Vue from 'vue';
-  export default Vue;
-}
-
-// This is required to keep typescript from complaining. It is required for
-// our i18n plugin. For more info see:
-// https://v2.vuejs.org/v2/guide/typescript.html?redirect=true#Augmenting-Types-for-Use-with-Plugins
-declare module 'vue/types/vue' {
-  // eslint-disable-next-line no-unused-vars
-  interface Vue {
-      /**
-       * Lookup a given string with the given arguments
-       * @param raw if set, do not do HTML escaping.
-       */
-      t: (key: string, args?: Record<string, any>, raw?: boolean) => string,
-  }
-}
-
-declare module 'js-yaml';
+/// <reference types="@rancher/shell/types/vue-shim" />
+/// <reference types="@rancher/shell/types/global-vue" />
 
 // @shell/config/labels-annotations
 
@@ -2475,7 +2457,7 @@ export default class Namespace {
     get isObscure(): any;
     get projectId(): any;
     get project(): any;
-    get groupByLabel(): any;
+    get groupById(): any;
     get projectNameSort(): any;
     get istioInstalled(): boolean;
     get injectionEnabled(): boolean;
@@ -3498,6 +3480,13 @@ export function abbreviateClusterName(input: string): string;
 export function labelForAddon(store: any, name: any, configuration?: boolean): any;
 export function filterOutDeprecatedPatchVersions(allVersions: any, currentVersion: any): any;
 export function getAllOptionsAfterCurrentVersion(store: any, versions: any, currentVersion: any, defaultVersion: any): any;
+export function initSchedulingCustomization(value: any, features: any, store: any, mode: any): Promise<{
+    clusterAgentDefaultPC: any;
+    clusterAgentDefaultPDB: any;
+    schedulingCustomizationFeatureEnabled: any;
+    schedulingCustomizationOriginallyEnabled: boolean;
+    errors: any[];
+}>;
 }
 
 // @shell/utils/color
@@ -3980,7 +3969,8 @@ export function dropKeys(obj: any, keys: any): void;
  */
 export function deepToRaw(obj: any, cache?: any): any;
 /**
- * Helper function to alter Lodash merge function default behaviour on merging arrays while updating machine pool configuration.
+ * Helper function to alter Lodash merge function default behaviour on merging
+ * arrays and objects.
  *
  * In rke2.vue, the syncMachineConfigWithLatest function updates machine pool configuration by
  * merging the latest configuration received from the backend with the current configuration updated by the user.
@@ -3992,10 +3982,39 @@ export function deepToRaw(obj: any, cache?: any): any;
  * merge(lastSavedConfigFromBE, currentConfigByUser); // returns { a: ["test"] }; but we expect { a: [] };
  *
  * More info: https://github.com/lodash/lodash/issues/1313
- *
+
  * This helper function addresses the issue by always replacing the old array with the new array during the merge process.
+ *
+ * This helper is also used for another case in rke2.vue to handle merging addon chart default values with the user's current values.
+ * It fixed https://github.com/rancher/dashboard/issues/12418
+ *
+ * If `mutateOriginal` is true, the merge is done directly into `obj1` (mutating it).
+ * This is useful in cases like:
+ *   machinePool.config = mergeWithReplace(clonedLatestConfig, clonedCurrentConfig, { mutateOriginal: true })
+ * where merging into a new empty object may lead to incomplete structure.
+ *
+ * Use `mutateOriginal` when you want to preserve obj1’s original shape, references,
+ * or when assigning the result directly to an existing object.
+ *
+ * @param {Object} [obj1={}] - The first object to merge
+ * @param {Object} [obj2={}] - The second object to merge
+ * @param {Object} [options={}] - Options for customizing merge behavior
+ * @param {boolean} [options.mutateOriginal=false] - true: mutates obj1
+ *                  directly. false: returns a new object
+ * @param {boolean} [options.replaceArray=true] - true: replaces arrays in obj1
+ *                  with arrays in obj2 when both properties are arrays
+ *                  false: default lodash merge behavior - recursively merges
+ *                  array members
+ * @param {boolean} [options.replaceObjectProps=false] - true: merges objects in
+ *                  obj1 with objects in obj2, overwriting duplicate props
+ *                  false: default lodash merge behavior - recursively merges
+ *                  object props
  */
-export function mergeWithReplaceArrays(obj1?: {}, obj2?: {}): any;
+export function mergeWithReplace(obj1?: any, obj2?: any, { mutateOriginal, replaceArray, replaceObjectProps, }?: {
+    mutateOriginal?: boolean;
+    replaceArray?: boolean;
+    replaceObjectProps?: boolean;
+}): any;
 export { isEqualBasic as isEqual };
 export function toDictionary(array: any, callback: any): any;
 /**

package/types/vue-shim.d.ts

@@ -1,4 +1,6 @@
 /* eslint-disable */
+import type ShellApi from '@shell/plugins/internal-api/shell/shell.api';
+
 export {};
 
 declare module 'vue' {
@@ -15,6 +17,7 @@ declare module 'vue' {
       getters: Record<string, any>,
       dispatch: (action: string, payload?: any) => Promise<any>,
       commit: (mutation: string, payload?: any) => void,
-    }
+    },
+    $shell: ShellApi,
   }
 }

package/utils/__mocks__/tabbable.js

@@ -0,0 +1,13 @@
+// __mocks__/tabbable.js
+
+const lib = jest.requireActual('tabbable');
+
+const tabbable = {
+  ...lib,
+  tabbable:    (node, options) => lib.tabbable(node, { ...options, displayCheck: 'none' }),
+  focusable:   (node, options) => lib.focusable(node, { ...options, displayCheck: 'none' }),
+  isFocusable: (node, options) => lib.isFocusable(node, { ...options, displayCheck: 'none' }),
+  isTabbable:  (node, options) => lib.isTabbable(node, { ...options, displayCheck: 'none' }),
+};
+
+module.exports = tabbable;

package/utils/__tests__/object.test.ts

@@ -1,6 +1,6 @@
 import { reactive, isReactive } from 'vue';
 import {
-  clone, get, getter, isEmpty, toDictionary, remove, diff, definedKeys, deepToRaw, mergeWithReplaceArrays
+  clone, get, getter, isEmpty, toDictionary, remove, diff, definedKeys, deepToRaw, mergeWithReplace
 } from '@shell/utils/object';
 
 describe('fx: get', () => {
@@ -379,7 +379,7 @@ describe('fx: deepToRaw', () => {
   });
 });
 
-describe('fx: mergeWithReplaceArrays', () => {
+describe('fx: mergeWithReplace', () => {
   const testCases: Array<[object?, object?, object?]> = [
     // Some array test cases, an array from the first object should be replaced with the array from the second object
     [{ a: ['one'] }, { a: [] }, { a: [] }],
@@ -401,8 +401,42 @@ describe('fx: mergeWithReplaceArrays', () => {
     [undefined, {}, {}],
   ];
 
-  it.each(testCases)('should merge properly', (obj1, obj2, expected) => {
-    const result = mergeWithReplaceArrays(obj1, obj2);
+  it.each(testCases)('should merge arrays properly', (obj1, obj2, expected) => {
+    const result = mergeWithReplace(obj1, obj2);
+
+    expect(result).toStrictEqual(expected);
+  });
+
+  it.each([
+    [
+      { a: { b: false, c: false } }, { a: { b: true, c: null } }, { a: { b: true, c: null } }
+    ],
+    [
+      {
+        a: [{
+          b: 'test', c: 'test', value: true
+        }]
+      }, {
+        a: [{
+          b: 'test', c: 'test', operator: 'exists'
+        }]
+      }, {
+        a: [{
+          b: 'test', c: 'test', operator: 'exists'
+        }]
+      }
+    ],
+    [
+      {
+        a: { enabled: false }, b: { enabled: false }, c: { enabled: false }
+      },
+      { c: { enabled: true, stripUnderscores: true } },
+      {
+        a: { enabled: false }, b: { enabled: false }, c: { enabled: true, stripUnderscores: true }
+      }
+    ]
+  ])('should overwrite duplicate object properties when merging objects', (left, right, expected) => {
+    const result = mergeWithReplace(left, right, { replaceObjectProps: true });
 
     expect(result).toStrictEqual(expected);
   });

package/utils/cluster.js

@@ -6,6 +6,10 @@ import { SETTING } from '@shell/config/settings';
 import { PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { compare, sortable } from '@shell/utils/version';
 import { sortBy } from '@shell/utils/sort';
+import { SCHEDULING_CUSTOMIZATION } from '@shell/store/features';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
+import isEmpty from 'lodash/isEmpty';
+import { set } from '@shell/utils/object';
 
 /**
  * Combination of paginationFilterHiddenLocalCluster and paginationFilterOnlyKubernetesClusters
@@ -296,3 +300,34 @@ export function getAllOptionsAfterCurrentVersion(store, versions, currentVersion
 
   return sortedWithDeprecatedLabel;
 }
+
+export async function initSchedulingCustomization(value, features, store, mode) {
+  const schedulingCustomizationFeatureEnabled = features(SCHEDULING_CUSTOMIZATION);
+  let clusterAgentDefaultPC = null;
+  let clusterAgentDefaultPDB = null;
+  let schedulingCustomizationOriginallyEnabled = false;
+  const errors = [];
+
+  try {
+    clusterAgentDefaultPC = JSON.parse((await store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.CLUSTER_AGENT_DEFAULT_PRIORITY_CLASS })).value) || null;
+  } catch (e) {
+    errors.push(e);
+  }
+  try {
+    clusterAgentDefaultPDB = JSON.parse((await store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.CLUSTER_AGENT_DEFAULT_POD_DISTRIBUTION_BUDGET })).value) || null;
+  } catch (e) {
+    errors.push(e);
+  }
+
+  if (schedulingCustomizationFeatureEnabled && mode === _CREATE && isEmpty(value?.clusterAgentDeploymentCustomization?.schedulingCustomization)) {
+    set(value, 'clusterAgentDeploymentCustomization.schedulingCustomization', { priorityClass: clusterAgentDefaultPC, podDisruptionBudget: clusterAgentDefaultPDB });
+  }
+
+  if (mode === _EDIT && !!value?.clusterAgentDeploymentCustomization?.schedulingCustomization) {
+    schedulingCustomizationOriginallyEnabled = true;
+  }
+
+  return {
+    clusterAgentDefaultPC, clusterAgentDefaultPDB, schedulingCustomizationFeatureEnabled, schedulingCustomizationOriginallyEnabled, errors
+  };
+}

package/utils/fleet.ts

@@ -3,11 +3,11 @@ import {
   BundleResourceKey,
   BundleDeployment,
   BundleDeploymentStatus,
-  BundleStatus,
   Condition,
 } from '@shell/types/resources/fleet';
-import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+import { mapStateToEnum, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 import { FLEET as FLEET_LABELS } from '@shell/config/labels-annotations';
+import { NAME as EXPLORER_NAME } from '@shell/config/product/explorer';
 
 interface Resource extends BundleDeploymentResource {
   state: string,
@@ -17,15 +17,6 @@ type Labels = {
   [key: string]: string,
 }
 
-interface StatesCounter { [state: string]: number }
-
-function incr(counter: StatesCounter, state: string) {
-  if (!counter[state]) {
-    counter[state] = 0;
-  }
-  counter[state]++;
-}
-
 function resourceKey(r: BundleResourceKey): string {
   return `${ r.kind }/${ r.namespace }/${ r.name }`;
 }
@@ -57,6 +48,19 @@ class Fleet {
     return `${ r.apiVersion.split('/', 2)[0] }.${ type }`;
   }
 
+  detailLocation(r: Resource, mgmtClusterName: string): any {
+    return mapStateToEnum(r.state) === STATES_ENUM.MISSING ? undefined : {
+      name:   `c-cluster-product-resource${ r.namespace ? '-namespace' : '' }-id`,
+      params: {
+        product:   EXPLORER_NAME,
+        cluster:   mgmtClusterName,
+        resource:  this.resourceType(r),
+        namespace: r.namespace,
+        id:        r.name,
+      },
+    };
+  }
+
   /**
    * resourcesFromBundleDeploymentStatus extracts the list of resources deployed by a BundleDeployment
    */
@@ -94,68 +98,6 @@ class Fleet {
     return modified.concat(Object.values(resources));
   }
 
-  /**
-   * resourcesFromBundleStatus extracts the list of resources deployed by a Bundle
-   */
-  resourcesFromBundleStatus(status: BundleStatus): Resource[] {
-    // The state of every resource is spread all over the bundle status.
-    // resourceKey contains one entry per resource AND cluster (built by Fleet from all the child BundleDeployments).
-    // However, those entries do not contain the cluster that they belong to, leading to duplicate entries
-
-    // 1. Fold resourceKey by using a unique key, initializing counters for multiple occurrences of the same resource
-    const resources = (status.resourceKey || []).reduce((res, r) => {
-      const k = resourceKey(r);
-
-      if (!res[k]) {
-        res[k] = { r, count: {} };
-      }
-      incr(res[k].count, STATES_ENUM.READY);
-
-      return res;
-    }, {} as { [resourceKey: string]: { r: BundleResourceKey, count: StatesCounter } });
-
-    // 2. Non-ready resources are counted differently and may also appear in resourceKey, depending on their state
-    for (const bundle of status.summary?.nonReadyResources || []) {
-      for (const r of bundle.modifiedStatus || []) {
-        const k = resourceKey(r);
-
-        if (!resources[k]) {
-          resources[k] = { r, count: {} };
-        }
-
-        if (r.missing) {
-          incr(resources[k].count, STATES_ENUM.MISSING);
-        } else if (r.delete) {
-          resources[k].count[STATES_ENUM.READY]--;
-          incr(resources[k].count, STATES_ENUM.ORPHANED);
-        } else {
-          resources[k].count[STATES_ENUM.READY]--;
-          incr(resources[k].count, STATES_ENUM.MODIFIED);
-        }
-      }
-      for (const r of bundle.nonReadyStatus || []) {
-        const k = resourceKey(r);
-        const state = r.summary?.state || STATES_ENUM.UNKNOWN;
-
-        resources[k].count[STATES_ENUM.READY]--;
-        incr(resources[k].count, state);
-      }
-    }
-
-    // 3. Unfold back to an array of resources for display
-    return Object.values(resources).reduce((res, e) => {
-      const { r, count } = e;
-
-      for (const state in count) {
-        for (let x = 0; x < count[state]; x++) {
-          res.push(Object.assign({ state }, r));
-        }
-      }
-
-      return res;
-    }, [] as Resource[]);
-  }
-
   clusterIdFromBundleDeploymentLabels(labels?: Labels): string {
     const clusterNamespace = labels?.[FLEET_LABELS.CLUSTER_NAMESPACE];
     const clusterName = labels?.[FLEET_LABELS.CLUSTER];

package/utils/object.js

@@ -474,7 +474,8 @@ export function deepToRaw(obj, cache = new WeakSet()) {
 }
 
 /**
- * Helper function to alter Lodash merge function default behaviour on merging arrays while updating machine pool configuration.
+ * Helper function to alter Lodash merge function default behaviour on merging
+ * arrays and objects.
  *
  * In rke2.vue, the syncMachineConfigWithLatest function updates machine pool configuration by
  * merging the latest configuration received from the backend with the current configuration updated by the user.
@@ -486,13 +487,55 @@ export function deepToRaw(obj, cache = new WeakSet()) {
  * merge(lastSavedConfigFromBE, currentConfigByUser); // returns { a: ["test"] }; but we expect { a: [] };
  *
  * More info: https://github.com/lodash/lodash/issues/1313
- *
+
  * This helper function addresses the issue by always replacing the old array with the new array during the merge process.
+ *
+ * This helper is also used for another case in rke2.vue to handle merging addon chart default values with the user's current values.
+ * It fixed https://github.com/rancher/dashboard/issues/12418
+ *
+ * If `mutateOriginal` is true, the merge is done directly into `obj1` (mutating it).
+ * This is useful in cases like:
+ *   machinePool.config = mergeWithReplace(clonedLatestConfig, clonedCurrentConfig, { mutateOriginal: true })
+ * where merging into a new empty object may lead to incomplete structure.
+ *
+ * Use `mutateOriginal` when you want to preserve obj1’s original shape, references,
+ * or when assigning the result directly to an existing object.
+ *
+ * @param {Object} [obj1={}] - The first object to merge
+ * @param {Object} [obj2={}] - The second object to merge
+ * @param {Object} [options={}] - Options for customizing merge behavior
+ * @param {boolean} [options.mutateOriginal=false] - true: mutates obj1
+ *                  directly. false: returns a new object
+ * @param {boolean} [options.replaceArray=true] - true: replaces arrays in obj1
+ *                  with arrays in obj2 when both properties are arrays
+ *                  false: default lodash merge behavior - recursively merges
+ *                  array members
+ * @param {boolean} [options.replaceObjectProps=false] - true: merges objects in
+ *                  obj1 with objects in obj2, overwriting duplicate props
+ *                  false: default lodash merge behavior - recursively merges
+ *                  object props
  */
-export function mergeWithReplaceArrays(obj1 = {}, obj2 = {}) {
-  return mergeWith(obj1, obj2, (obj1Value, obj2Value) => {
-    if (Array.isArray(obj1Value) && Array.isArray(obj2Value)) {
+export function mergeWithReplace(
+  obj1 = {},
+  obj2 = {},
+  {
+    mutateOriginal = false,
+    replaceArray = true,
+    replaceObjectProps = false,
+  } = {}
+) {
+  const destination = mutateOriginal ? obj1 : {};
+
+  return mergeWith(destination, obj1, obj2, (obj1Value, obj2Value) => {
+    if (replaceArray && Array.isArray(obj1Value) && Array.isArray(obj2Value)) {
       return obj2Value;
     }
+
+    if (replaceObjectProps && isObject(obj1Value) && isObject(obj2Value)) {
+      return {
+        ...obj1Value,
+        ...obj2Value,
+      };
+    }
   });
 }

package/utils/validators/formRules/__tests__/index.test.ts

@@ -1,6 +1,7 @@
+import { Translation } from '@shell/types/t';
 import formRulesGenerator from '@shell/utils/validators/formRules';
 
-const mockT = (key: string, args: any) => {
+const mockT: Translation = (key: string, args: any) => {
   return JSON.stringify({
     message: key,
     ...args
@@ -8,6 +9,14 @@ const mockT = (key: string, args: any) => {
 };
 
 describe('formRules', () => {
+  it('should use "Value" as default label', () => {
+    const validators = formRulesGenerator(mockT, {});
+
+    const message = validators.required(null);
+
+    expect(message).toStrictEqual('{\"message\":\"validation.required\",\"key\":\"Value\"}');
+  });
+
   const formRules = formRulesGenerator(mockT, { key: 'testDisplayKey' });
 
   it('"required" : returns undefined when value supplied', () => {