feat(record): confirm modal on create record

leav-solutions · Mar 21, 2024 · 615a825 · 615a825
1 parent 9d58383
commit 615a825
Show file tree

Hide file tree

Showing 10 changed files with 331 additions and 217 deletions.
diff --git a/libs/ui/src/components/RecordEdition/EditRecord/EditRecord.test.tsx b/libs/ui/src/components/RecordEdition/EditRecord/EditRecord.test.tsx
@@ -9,6 +9,7 @@ import {mockRecord} from '_ui/__mocks__/common/record';
 import {IUseCanEditRecordHook} from '../../../hooks/useCanEditRecord/useCanEditRecord';
 import {render, screen} from '../../../_tests/testUtils';
 import {EditRecord} from './EditRecord';
+import {Form} from 'antd';
 
 jest.mock('../EditRecordContent', () => {
     return function EditRecordContent() {
@@ -20,6 +21,12 @@ jest.mock('hooks/useCanEditRecord/useCanEditRecord', () => ({
     useCanEditRecord: (): IUseCanEditRecordHook => ({loading: false, canEdit: true, isReadOnly: false})
 }));
 
+const EditRecordWithForm = props => {
+    const [form] = Form.useForm();
+
+    return <EditRecord form={form} {...props} />;
+};
+
 describe('EditRecord', () => {
     const commonMocks = [
         {
@@ -52,22 +59,17 @@ describe('EditRecord', () => {
     });
 
     test('Display form', async () => {
-        const _handleClose = jest.fn();
-
         const CompWithButtons = () => {
             const closeButtonRef = useRef<HTMLButtonElement>(null);
 
             return (
                 <>
                     <button ref={closeButtonRef}>Close</button>;
-                    <EditRecord
+                    <EditRecordWithForm
                         withInfoButton={false}
                         library={mockRecord.library.id}
                         record={mockRecord}
-                        onClose={_handleClose}
-                        buttonsRefs={{
-                            close: closeButtonRef
-                        }}
+                        buttonsRefs={{}}
                     />
                 </>
             );
@@ -79,35 +81,4 @@ describe('EditRecord', () => {
 
         expect(screen.getByText('EditRecordContent')).toBeVisible();
     });
-
-    test('Close form', async () => {
-        const _handleClose = jest.fn();
-
-        const CompWithButtons = () => {
-            const closeButtonRef = useRef<HTMLButtonElement>(null);
-
-            return (
-                <>
-                    <button ref={closeButtonRef}>Close</button>;
-                    <EditRecord
-                        withInfoButton={false}
-                        library={mockRecord.library.id}
-                        record={mockRecord}
-                        onClose={_handleClose}
-                        buttonsRefs={{
-                            close: closeButtonRef
-                        }}
-                    />
-                </>
-            );
-        };
-
-        render(<CompWithButtons />, {
-            mocks: commonMocks
-        });
-
-        await user.click(screen.getByRole('button', {name: /Close/}));
-
-        expect(_handleClose).toBeCalled();
-    });
 });
diff --git a/libs/ui/src/components/RecordEdition/EditRecord/EditRecord.tsx b/libs/ui/src/components/RecordEdition/EditRecord/EditRecord.tsx
@@ -44,11 +44,12 @@ import editRecordReducer, {EditRecordReducerActionsTypes, initialState} from '..
 import {EditRecordReducerContext} from '../editRecordReducer/editRecordReducerContext';
 import EditRecordSidebar from '../EditRecordSidebar';
 import CreationErrorContext, {ICreationErrorByField} from './creationErrorContext';
+import {FormInstance} from 'antd/lib/form/Form';
 
 interface IEditRecordProps {
+    antdForm: FormInstance;
     record: RecordIdentityFragment['whoAmI'] | null;
     library: string;
-    onClose: () => void;
     onCreate?: (newRecord: RecordIdentityFragment['whoAmI']) => void;
     valuesVersion?: IValueVersion;
     showSidebar?: boolean;
@@ -57,7 +58,6 @@ interface IEditRecordProps {
     // Here we're not in charge of buttons position. It might on a modal footer or pretty much anywhere.
     // We're using refs to still be able to handle the click on the buttons
     buttonsRefs: {
-        close?: React.RefObject<HTMLButtonElement>;
         refresh?: React.RefObject<HTMLButtonElement>;
         valuesVersions?: React.RefObject<HTMLButtonElement>;
     };
@@ -94,9 +94,9 @@ const Sidebar = styled.div`
 `;
 
 export const EditRecord: FunctionComponent<IEditRecordProps> = ({
+    antdForm,
     record,
     library,
-    onClose,
     onCreate,
     valuesVersion,
     showSidebar = false,
@@ -424,7 +424,6 @@ export const EditRecord: FunctionComponent<IEditRecordProps> = ({
     };
 
     const listenersByButtonsName: Record<keyof IEditRecordProps['buttonsRefs'], () => void> = {
-        close: onClose,
         refresh: () => {
             dispatch({
                 type: EditRecordReducerActionsTypes.REQUEST_REFRESH
@@ -448,6 +447,7 @@ export const EditRecord: FunctionComponent<IEditRecordProps> = ({
                                 <EditRecordSkeleton rows={5} />
                             ) : canEdit ? (
                                 <EditRecordContent
+                                    antdForm={antdForm}
                                     record={record}
                                     library={library}
                                     onRecordSubmit={_handleRecordSubmit}

diff --git a/libs/ui/src/components/RecordEdition/EditRecordContent/EditRecordContent.test.tsx b/libs/ui/src/components/RecordEdition/EditRecordContent/EditRecordContent.test.tsx
@@ -7,13 +7,20 @@ import {mockRecordForm} from '_ui/__mocks__/common/form';
 import {mockRecord} from '_ui/__mocks__/common/record';
 import {render, screen} from '../../../_tests/testUtils';
 import EditRecordContent from './EditRecordContent';
+import {Form} from 'antd';
 
 jest.mock('./uiElements/StandardField', () => {
     return function StandardField() {
         return <div>StandardField</div>;
     };
 });
 
+const EditRecordContentWithForm = props => {
+    const [form] = Form.useForm();
+
+    return <EditRecordContent form={form} {...props} />;
+};
+
 describe('EditRecordContent', () => {
     const mocks = [
         {
@@ -86,7 +93,7 @@ describe('EditRecordContent', () => {
         }));
 
         render(
-            <EditRecordContent
+            <EditRecordContentWithForm
                 record={mockRecord}
                 library={mockRecord.library.id}
                 onRecordSubmit={jest.fn()}
@@ -119,7 +126,7 @@ describe('EditRecordContent', () => {
         }));
 
         render(
-            <EditRecordContent
+            <EditRecordContentWithForm
                 record={mockRecord}
                 library={mockRecord.library.id}
                 onRecordSubmit={jest.fn()}

diff --git a/libs/ui/src/components/RecordEdition/EditRecordContent/EditRecordContent.tsx b/libs/ui/src/components/RecordEdition/EditRecordContent/EditRecordContent.tsx
@@ -17,13 +17,13 @@ import extractFormElements from './helpers/extractFormElements';
 import {RecordEditionContext} from './hooks/useRecordEditionContext';
 import {formComponents} from './uiElements';
 import {DeleteMultipleValuesFunc, DeleteValueFunc, FormElement, SubmitValueFunc} from './_types';
-import {Form} from 'antd';
-import {useForm} from 'antd/lib/form/Form';
+import {Form, FormInstance} from 'antd';
 import {Store} from 'antd/lib/form/interface';
 import dayjs from 'dayjs';
 import {EDIT_OR_CREATE_RECORD_FORM_ID} from './formConstants';
 
 interface IEditRecordContentProps {
+    antdForm: FormInstance;
     record: IRecordIdentityWhoAmI | null;
     library: string;
     onRecordSubmit: () => void;
@@ -34,6 +34,7 @@ interface IEditRecordContentProps {
 }
 
 function EditRecordContent({
+    antdForm,
     record,
     library,
     onRecordSubmit,
@@ -45,7 +46,6 @@ function EditRecordContent({
     const formId = record ? 'edition' : 'creation';
     const {t} = useSharedTranslation();
     const {state, dispatch} = useEditRecordReducer();
-    const [antForm] = useForm();
 
     useRecordsConsultationHistory(record?.library?.id ?? null, record?.id ?? null);
 
@@ -171,7 +171,7 @@ function EditRecordContent({
     return (
         <Form
             id={EDIT_OR_CREATE_RECORD_FORM_ID}
-            form={antForm}
+            form={antdForm}
             initialValues={antdFormInitialValues}
             onFinish={onRecordSubmit}
         >