feat: blocking deletion and addition of array elements

src/lib/core/components/Form/Controller/Controller.tsx

@@ -21,6 +21,7 @@ export interface ControllerProps<DirtyValue extends FieldValue, SpecType extends
           ) => void)
         | null;
     parentOnUnmount: ((childName: string) => void) | null;
+    additionalContentLayout?: React.ReactNode;
 }
 
 export const Controller = <
@@ -33,6 +34,7 @@ export const Controller = <
     value: valueFromParent,
     parentOnChange,
     parentOnUnmount,
+    additionalContentLayout,
 }: ControllerProps<DirtyValue, SpecType>) => {
     const {config, tools, mutatorsStore, __mirror} = useDynamicFormsCtx();
 
@@ -47,6 +49,7 @@ export const Controller = <
             tools,
             parentOnChange,
             parentOnUnmount,
+            additionalContentLayout,
         }),
     );
 
@@ -120,8 +123,9 @@ export const Controller = <
                 onDrop: methods.onDrop,
             },
             meta: {...omit(store.state, 'value'), submitFailed: store.tools.submitFailed},
+            additionalContentLayout: additionalContentLayout,
         }),
-        [methods, store.name, store.state, store.tools.submitFailed],
+        [methods, store.name, store.state, store.tools.submitFailed, additionalContentLayout],
     );
 
     const withSearch = useSearch(store.spec, store.state.value, store.name);

src/lib/core/components/Form/Controller/types.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import {FormValue, Spec} from '../../../types';
 import {
     DynamicFormConfig,
@@ -42,6 +43,7 @@ export interface GetRenderParams<
         | InputEntity<DirtyValue, undefined, undefined, SpecType>
         | IndependentInputEntity<DirtyValue, undefined, undefined, SpecType>;
     Layout?: LayoutType<DirtyValue, undefined, undefined, SpecType>;
+    additionalContentLayout?: React.ReactNode;
 }
 
 export interface GetValidateParams<SpecType extends Spec> {
@@ -110,6 +112,7 @@ export interface InitializeStoreParams<DirtyValue extends FieldValue, SpecType e
           ) => void)
         | null;
     parentOnUnmount: ((childName: string) => void) | null;
+    additionalContentLayout?: React.ReactNode;
 }
 
 export interface ControllerStore<
@@ -148,6 +151,7 @@ export interface ControllerStore<
         childErrors: Record<string, ValidateError>;
     };
     afterStoreUpdateCB?: () => void;
+    additionalContentLayout?: React.ReactNode;
 }
 
 export interface UpdateStoreParams<

src/lib/core/components/Form/Controller/utils.tsx

@@ -142,6 +142,7 @@ export const getRender = <DirtyValue extends FieldValue, SpecType extends Spec>(
     spec,
     inputEntity,
     Layout,
+    additionalContentLayout,
 }: GetRenderParams<DirtyValue, SpecType>) => {
     const render = (props: FieldRenderProps<DirtyValue>) => {
         if (inputEntity && isCorrectSpec(spec) && isString(name)) {
@@ -169,7 +170,13 @@ export const getRender = <DirtyValue extends FieldValue, SpecType extends Spec>(
 
                 if (Layout) {
                     return (
-                        <Layout spec={spec} name={name} layoutProps={layoutProps} {...props}>
+                        <Layout
+                            spec={spec}
+                            name={name}
+                            layoutProps={layoutProps}
+                            additionalContentLayout={additionalContentLayout}
+                            {...props}
+                        >
                             {input}
                         </Layout>
                     );
@@ -467,10 +474,11 @@ export const initializeStore = <
     tools,
     parentOnChange,
     parentOnUnmount,
+    additionalContentLayout,
 }: InitializeStoreParams<DirtyValue, SpecType>): ControllerStore<DirtyValue, Value, SpecType> => {
     const spec = getSpec({name, spec: _spec, mutatorsStore});
     const components = getComponents<DirtyValue, Value, SpecType>({spec, config});
-    const render = getRender({name, spec, ...components});
+    const render = getRender({name, spec, ...components, additionalContentLayout});
     const validate = getValidate({spec, config});
     const state = getFieldInitials({
         name,

src/lib/core/components/Form/types/layout.ts

@@ -12,6 +12,7 @@ export type LayoutProps<
 > = {
     children: React.ReactElement;
     layoutProps?: LayoutComponentProps;
+    additionalContentLayout?: React.ReactNode;
 } & Omit<InputProps<Value, InputComponentProps, LayoutComponentProps, SpecType>, 'inputProps'>;
 
 export type LayoutType<

src/lib/core/types/specs.ts

@@ -47,6 +47,7 @@ export interface ArraySpec<
             placement?: 'horizontal' | 'vertical';
             disabled?: Record<string, boolean>;
         };
+        enableLockLength?: boolean;
     };
 }
 

src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss

@@ -34,4 +34,8 @@
             margin-left: 4px;
         }
     }
+
+    &__remove-button {
+        margin-left: 4px;
+    }
 }

src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {Plus} from '@gravity-ui/icons';
-import {Button, Icon, Label} from '@gravity-ui/uikit';
+import {Plus, TrashBin} from '@gravity-ui/icons';
+import {Button, Icon, Label, Popover} from '@gravity-ui/uikit';
 import set from 'lodash/set';
 
 import {
@@ -21,6 +21,7 @@ import {
     transformArrIn,
 } from '../../../../core';
 import {block} from '../../../utils';
+import i18n from '../../../i18n';
 
 import './ArrayBase.scss';
 
@@ -42,6 +43,20 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => {
         return isBooleanSpec(spec.items) || isNumberSpec(spec.items) || isStringSpec(spec.items);
     }, [spec.items]);
 
+    const disabledButtonLength = React.useMemo(() => {
+        if (spec.viewSpec.enableLockLength) {
+            return {
+                remove: keys.length <= (spec.minLength || 0),
+                add: keys.length >= (spec.maxLength || Infinity),
+            };
+        }
+
+        return {
+            remove: false,
+            add: false,
+        };
+    }, [keys.length, spec.maxLength, spec.minLength, spec.viewSpec.enableLockLength]);
+
     const getItemSpec = React.useCallback(
         (idx: number): typeof spec.items | null => {
             if (!itemSpecCorrect) {
@@ -72,6 +87,13 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => {
         [input.onChange, input.name],
     );
 
+    const removeItem = React.useCallback(
+        (key: string) => {
+            arrayInput.onItemRemove(key);
+        },
+        [arrayInput],
+    );
+
     const AddButton: React.FC = React.useCallback(() => {
         let onClick = () => arrayInput.onItemAdd(undefined);
 
@@ -88,15 +110,24 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => {
         }
 
         return (
-            <Button
-                onClick={onClick}
-                disabled={spec.viewSpec.disabled}
-                qa={qa}
-                className={b('add-button', {right: spec.viewSpec.addButtonPosition === 'right'})}
+            <Popover
+                content={i18n('label_error-max-length-array', {
+                    count: spec.maxLength,
+                })}
+                disabled={!disabledButtonLength.add}
             >
-                <Icon data={Plus} size={14} />
-                {title || null}
-            </Button>
+                <Button
+                    onClick={onClick}
+                    disabled={spec.viewSpec.disabled || disabledButtonLength.add}
+                    qa={qa}
+                    className={b('add-button', {
+                        right: spec.viewSpec.addButtonPosition === 'right',
+                    })}
+                >
+                    <Icon data={Plus} size={14} />
+                    {title || null}
+                </Button>
+            </Popover>
         );
     }, [
         arrayInput,
@@ -107,6 +138,7 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => {
         spec.viewSpec.itemLabel,
         spec.viewSpec.layoutTitle,
         spec.viewSpec.addButtonPosition,
+        disabledButtonLength,
     ]);
 
     const items = React.useMemo(
@@ -133,6 +165,25 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => {
                             parentOnUnmount={input.parentOnUnmount}
                             spec={itemSpec}
                             name={`${name}.<${key}>`}
+                            additionalContentLayout={
+                                <Popover
+                                    content={i18n('label_error-min-length-array', {
+                                        count: spec.minLength,
+                                    })}
+                                    disabled={!disabledButtonLength.remove}
+                                >
+                                    <Button
+                                        view="flat-secondary"
+                                        onClick={() => removeItem(key)}
+                                        key={`remove-${key}`}
+                                        qa={`${name}-item-remove-${key}`}
+                                        disabled={disabledButtonLength.remove}
+                                        className={b('remove-button')}
+                                    >
+                                        <Icon data={TrashBin} size={16} />
+                                    </Button>
+                                </Popover>
+                            }
                         />
                     </React.Fragment>
                 );
@@ -145,6 +196,9 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => {
             input.parentOnUnmount,
             input.value,
             spec.viewSpec.itemPrefix,
+            spec.minLength,
+            disabledButtonLength.remove,
+            removeItem,
         ],
     );
 

src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Plus, TrashBin} from '@gravity-ui/icons';
-import {Button, Flex, Icon, Table} from '@gravity-ui/uikit';
+import {Button, Flex, Icon, Popover, Table} from '@gravity-ui/uikit';
 import {HelpPopover} from '@gravity-ui/components';
 import noop from 'lodash/noop';
 import set from 'lodash/set';
@@ -23,6 +23,7 @@ import {
 } from '../../../../core';
 import {useSearchContext} from '../../../../core/components/Form/hooks';
 import {block} from '../../../utils';
+import i18n from '../../../i18n';
 
 import './TableArrayInput.scss';
 
@@ -43,6 +44,20 @@ export const TableArrayInput: ArrayInput = ({spec, name, arrayInput, input}) =>
         [arrayInput.value],
     );
 
+    const disabledButtonLength = React.useMemo(() => {
+        if (spec.viewSpec.enableLockLength) {
+            return {
+                remove: keys.length <= (spec.minLength || 0),
+                add: keys.length >= (spec.maxLength || Infinity),
+            };
+        }
+
+        return {
+            remove: false,
+            add: false,
+        };
+    }, [keys.length, spec.maxLength, spec.minLength, spec.viewSpec.enableLockLength]);
+
     const onItemAdd = React.useCallback(() => {
         arrayInput.onItemAdd({});
     }, [arrayInput.onItemAdd]);
@@ -90,14 +105,22 @@ export const TableArrayInput: ArrayInput = ({spec, name, arrayInput, input}) =>
             name: '',
             sticky: 'right',
             template: ({key}: {key: string}) => (
-                <Button
-                    view="flat-secondary"
-                    onClick={() => onItemRemove(key)}
-                    key={`remove-${key}`}
-                    qa={`${name}-item-remove-${key}`}
+                <Popover
+                    content={i18n('label_error-min-length-array', {
+                        count: spec.minLength,
+                    })}
+                    disabled={!disabledButtonLength.remove}
                 >
-                    <Icon data={TrashBin} size={16} />
-                </Button>
+                    <Button
+                        view="flat-secondary"
+                        onClick={() => onItemRemove(key)}
+                        key={`remove-${key}`}
+                        qa={`${name}-item-remove-${key}`}
+                        disabled={disabledButtonLength.remove}
+                    >
+                        <Icon data={TrashBin} size={16} />
+                    </Button>
+                </Popover>
             ),
         };
 
@@ -199,14 +222,21 @@ export const TableArrayInput: ArrayInput = ({spec, name, arrayInput, input}) =>
                     {spec.viewSpec.layoutTitle || null}
                 </Button>
             ) : (
-                <Button
-                    onClick={onItemAdd}
-                    disabled={spec.viewSpec.disabled}
-                    qa={`${name}-add-item`}
+                <Popover
+                    content={i18n('label_error-max-length-array', {
+                        count: spec.maxLength,
+                    })}
+                    disabled={!disabledButtonLength.add}
                 >
-                    <Icon data={Plus} size={14} />
-                    {spec.viewSpec.itemLabel || null}
-                </Button>
+                    <Button
+                        onClick={onItemAdd}
+                        disabled={spec.viewSpec.disabled || disabledButtonLength.add}
+                        qa={`${name}-add-item`}
+                    >
+                        <Icon data={Plus} size={14} />
+                        {spec.viewSpec.itemLabel || null}
+                    </Button>
+                </Popover>
             )}
         </div>
     );

src/lib/kit/components/Layouts/Row/Row.scss

@@ -79,10 +79,6 @@
         word-break: break-word;
     }
 
-    &__remove-button {
-        margin-left: 5px;
-    }
-
     &__required-mark {
         color: var(--g-color-text-danger);
     }