CustomMuiDialog can have a confirmation dialog (#548)

use case : print a warning in a confirmation pop-up while importing data into open-source env like "demo".

Signed-off-by: David BRAQUART <[email protected]>

Author: dbraquart

src/components/dialogs/custom-mui-dialog.tsx

@@ -5,14 +5,15 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { FieldErrors, UseFormReturn } from 'react-hook-form';
 import { FormattedMessage } from 'react-intl';
 import { Dialog, DialogActions, DialogContent, DialogTitle, Grid, LinearProgress } from '@mui/material';
 import * as yup from 'yup';
 import SubmitButton from '../inputs/react-hook-form/utils/submit-button';
 import CancelButton from '../inputs/react-hook-form/utils/cancel-button';
 import CustomFormProvider, { MergedFormContextProps } from '../inputs/react-hook-form/provider/custom-form-provider';
+import PopupConfirmationDialog from './popup-confirmation-dialog';
 
 interface ICustomMuiDialog {
     open: boolean;
@@ -28,6 +29,7 @@ interface ICustomMuiDialog {
     children: React.ReactNode;
     isDataFetching?: boolean;
     language?: string;
+    confirmationMessageKey?: string;
 }
 
 const styles = {
@@ -54,13 +56,19 @@ function CustomMuiDialog({
     onCancel,
     children,
     language,
+    confirmationMessageKey,
 }: ICustomMuiDialog) {
+    const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
+    const [validatedData, setValidatedData] = useState(undefined);
     const { handleSubmit } = formMethods;
 
-    const handleCancel = (event: React.MouseEvent) => {
-        onCancel?.();
-        onClose(event);
-    };
+    const handleCancel = useCallback(
+        (event: React.MouseEvent) => {
+            onCancel?.();
+            onClose(event);
+        },
+        [onCancel, onClose]
+    );
 
     const handleClose = (event: React.MouseEvent, reason?: string) => {
         if (reason === 'backdropClick' && onCancel) {
@@ -69,10 +77,30 @@ function CustomMuiDialog({
         onClose(event);
     };
 
-    const handleValidate = (data: any) => {
-        onSave(data);
-        onClose(data);
-    };
+    const validate = useCallback(
+        (data: any) => {
+            onSave(data);
+            onClose(data);
+        },
+        [onClose, onSave]
+    );
+
+    const handleValidate = useCallback(
+        (data: any) => {
+            if (confirmationMessageKey) {
+                setValidatedData(data);
+                setOpenConfirmationPopup(true);
+            } else {
+                validate(data);
+            }
+        },
+        [confirmationMessageKey, validate]
+    );
+
+    const handlePopupConfirmation = useCallback(() => {
+        setOpenConfirmationPopup(false);
+        validate(validatedData);
+    }, [validate, validatedData]);
 
     const handleValidationError = (errors: FieldErrors) => {
         onValidationError?.(errors);
@@ -102,6 +130,14 @@ function CustomMuiDialog({
                     />
                 </DialogActions>
             </Dialog>
+            {confirmationMessageKey && (
+                <PopupConfirmationDialog
+                    message={confirmationMessageKey}
+                    openConfirmationPopup={openConfirmationPopup}
+                    setOpenConfirmationPopup={setOpenConfirmationPopup}
+                    handlePopupConfirmation={handlePopupConfirmation}
+                />
+            )}
         </CustomFormProvider>
     );
 }

src/components/dialogs/popup-confirmation-dialog.tsx

@@ -16,7 +16,7 @@ import CancelButton from '../inputs/react-hook-form/utils/cancel-button';
 
 export interface PopupConfirmationDialogProps {
     message: string;
-    validateButtonLabel: string;
+    validateButtonLabel?: string;
     openConfirmationPopup: boolean;
     setOpenConfirmationPopup: (value: boolean) => void;
     handlePopupConfirmation: () => void;
@@ -33,9 +33,7 @@ function PopupConfirmationDialog({
         <Dialog open={openConfirmationPopup} aria-labelledby="dialog-title-change-equipment-type">
             <DialogTitle id="dialog-title-change-equipment-type">Confirmation</DialogTitle>
             <DialogContent>
-                <DialogContentText>
-                    <FormattedMessage id={message} />
-                </DialogContentText>
+                <DialogContentText>{message && <FormattedMessage id={message} />}</DialogContentText>
             </DialogContent>
             <DialogActions>
                 <CancelButton onClick={() => setOpenConfirmationPopup(false)} />

src/hooks/useConfidentialityWarning.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { useEffect, useState } from 'react';
+import { fetchEnv } from '../services';
+
+const useConfidentialityWarning = () => {
+    const [confidentialityWarningKey, setConfidentialityWarningKey] = useState<string>();
+
+    useEffect(() => {
+        fetchEnv().then((res) => {
+            setConfidentialityWarningKey(res?.confidentialityMessageKey);
+        });
+    }, []);
+
+    return confidentialityWarningKey;
+};
+
+export default useConfidentialityWarning;

src/index.ts

@@ -163,6 +163,7 @@ export { default as useIntlRef } from './hooks/useIntlRef';
 export { useSnackMessage } from './hooks/useSnackMessage';
 export { default as useDebounce } from './hooks/useDebounce';
 export { default as usePrevious } from './hooks/usePrevious';
+export { default as useConfidentialityWarning } from './hooks/useConfidentialityWarning';
 export { default as SelectClearable } from './components/inputs/select-clearable';
 export { default as useCustomFormContext } from './components/inputs/react-hook-form/provider/use-custom-form-context';
 export { default as CustomFormProvider } from './components/inputs/react-hook-form/provider/custom-form-provider';

src/services/apps-metadata.ts

@@ -13,6 +13,7 @@ export type Url = string | URL;
 export type Env = {
     appsMetadataServerUrl?: Url;
     mapBoxToken?: string;
+    confidentialityMessageKey?: string;
     // https://github.com/gridsuite/deployment/blob/main/docker-compose/env.json
     // https://github.com/gridsuite/deployment/blob/main/k8s/live/azure-dev/env.json
     // https://github.com/gridsuite/deployment/blob/main/k8s/live/azure-integ/env.json