[DOP-33475] Добавить компонент для работы с SQL

Author: srj-mx-a11y

src/entities/transformation/utils/index.ts

@@ -1,2 +1,3 @@
-export * from './prepareTransformationRequest';
 export * from './prepareTransformationForm';
+export * from './prepareTransformationFormError';
+export * from './prepareTransformationRequest';

src/entities/transformation/utils/prepareTransformationFormError/index.ts

@@ -0,0 +1,23 @@
+import { FormFieldError } from '@shared/config';
+
+import { TransformationType } from '../../types';
+
+/** Util for preparing received errors for use on a form */
+export const prepareTransformationFormError = (errors: FormFieldError[]): FormFieldError[] => {
+  return errors.map((error) => {
+    const { location } = error;
+    if (location[1] !== 'transformations') return error;
+
+    switch ((location as string[])[3] as TransformationType) {
+      case TransformationType.FILTER_SQL:
+        //location : ['body', 'transformations', 3, 'sql', 'query']
+        /* From the backend, the error record comes in a simple form in accordance with the api. 
+        Return it to the state it was stored in the form */
+        const newLocation = location.slice(0, 4).concat(0).concat(location.slice(4));
+        return { ...error, location: newLocation } as FormFieldError;
+
+      default:
+        return error;
+    }
+  });
+};

src/shared/config/errors/types.ts

@@ -6,7 +6,7 @@ interface DefaultError {
 type LocationTypeError = 'body' | 'query';
 
 export interface FormFieldError extends DefaultError {
-  location: [Extract<LocationTypeError, 'body'>, string];
+  location: [Extract<LocationTypeError, 'body'>, string | number];
 }
 
 export interface MessageError {

src/shared/ui/ManagedForm/index.tsx

@@ -1,9 +1,9 @@
-import React, { useLayoutEffect, useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 import { Form, notification, Spin } from 'antd';
 import { PropsWithChildren } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { clsx } from 'clsx';
-import { checkIsFormFieldsError, getErrorMessage } from '@shared/config';
+import { checkIsFormFieldsError, FormFieldError, getErrorMessage } from '@shared/config';
 import { useTranslation } from 'react-i18next';
 
 import * as classes from './styles.module.less';
@@ -19,6 +19,7 @@ export const ManagedForm = <T extends object, R>({
   keysInvalidateQueries = [],
   isHiddenLoadingOnSuccess = false,
   onError = () => undefined,
+  prepareFormErrors,
   ...props
 }: PropsWithChildren<ManagedFormProps<T, R>>) => {
   const { t, i18n } = useTranslation('error');
@@ -51,7 +52,9 @@ export const ManagedForm = <T extends object, R>({
 
         if (checkIsFormFieldsError(error) && error.response) {
           message = t('formErrorHasOccurred');
-          showErrorsInFields(form, error.response.data.error.details);
+          const errors: FormFieldError[] = error.response.data.error.details;
+          const preparedErrors = prepareFormErrors ? prepareFormErrors(errors) : errors;
+          showErrorsInFields(form, preparedErrors);
         }
 
         notification.error({

src/shared/ui/ManagedForm/types.ts

@@ -1,3 +1,4 @@
+import { FormFieldError } from '@shared/config';
 import { QueryClient } from '@tanstack/react-query';
 import { FormProps } from 'antd';
 
@@ -20,4 +21,6 @@ export interface ManagedFormProps<T, R> extends Omit<FormProps<T>, 'form' | 'onF
   keysInvalidateQueries?: Parameters<QueryClient['invalidateQueries']>[];
   /** Flag that hides a spin if the request is successful  */
   isHiddenLoadingOnSuccess?: boolean;
+  /** Callback to prepare received errors */
+  prepareFormErrors?: (errors: FormFieldError[]) => FormFieldError[];
 }

src/shared/ui/ManagedForm/utils/showErrorsInFields/index.ts

@@ -12,10 +12,10 @@ export const showErrorsInFields = (form: FormInstance, errors: FormFieldError[])
   const fieldErrors = errors
     .map((field) => {
       // Keep only valid parts of the path
-      const validPath = field.location.reduce<string[]>((acc, key) => {
+      const validPath = field.location.reduce<Array<string | number>>((acc, key) => {
         const currentPath = [...acc, key];
         // Check if the path to the current key exists
-        if (typeof form.getFieldValue(currentPath) === 'object' || form.getFieldInstance(currentPath)) {
+        if (typeof form.getFieldValue(currentPath) === 'object' || form.isFieldTouched(currentPath)) {
           acc.push(key);
         }
         return acc;

src/widgets/transfer/CreateTransfer/index.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
 import { ManagedForm } from '@shared/ui';
 import { useNavigate } from 'react-router-dom';
 import { prepareTransferResourcesRequest, Transfer, TransferQueryKey, transferService } from '@entities/transfer';
 import { MutateTransferForm } from '@features/transfer';
-import { prepareTransformationRequest } from '@entities/transformation';
+import { prepareTransformationFormError, prepareTransformationRequest } from '@entities/transformation';
 import { useTranslation } from 'react-i18next';
 
 import { CreateTransferForm, CreateTransferProps } from './types';
@@ -36,6 +35,7 @@ export const CreateTransfer = ({ group }: CreateTransferProps) => {
       mutationFunction={handleCreateTransfer}
       onSuccess={onSuccess}
       successMessage={t('createTransferSuccess')}
+      prepareFormErrors={prepareTransformationFormError}
       keysInvalidateQueries={[[{ queryKey: [TransferQueryKey.GET_TRANSFERS, group.id] }]]}
     >
       <MutateTransferForm group={group} onCancel={onCancel} />

src/widgets/transfer/UpdateTransfer/index.tsx

@@ -9,7 +9,11 @@ import {
   transferService,
 } from '@entities/transfer';
 import { MutateTransferForm } from '@features/transfer';
-import { prepareTransformationForm, prepareTransformationRequest } from '@entities/transformation';
+import {
+  prepareTransformationForm,
+  prepareTransformationFormError,
+  prepareTransformationRequest,
+} from '@entities/transformation';
 import { useTranslation } from 'react-i18next';
 
 import { UpdateTransferForm, UpdateTransferProps } from './types';
@@ -47,6 +51,7 @@ export const UpdateTransfer = ({ transfer, group }: UpdateTransferProps) => {
       mutationFunction={handleUpdateTransfer}
       onSuccess={onSuccess}
       successMessage={t('updateTransferSuccess')}
+      prepareFormErrors={prepareTransformationFormError}
       keysInvalidateQueries={[
         [{ queryKey: [TransferQueryKey.GET_TRANSFERS, group.id] }],
         [{ queryKey: [TransferQueryKey.GET_TRANSFER, transfer.id] }],