Add confirmation dialog when deleting one or multiple user profile(s) (#51)

FranckLecuyer · web-flow · commit 500e49e25417 · 2024-09-27T11:38:02.000+02:00
Signed-off-by: Franck LECUYER &lt;franck.lecuyer@rte-france.com&gt;
diff --git a/src/pages/common/delete-confirmation-dialog.tsx b/src/pages/common/delete-confirmation-dialog.tsx
@@ -8,61 +8,65 @@
 import { FunctionComponent, useCallback } from 'react';
 import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { UserInfos } from '../../services';
 
-export interface DeleteUserDialogProps {
+export interface DeleteConfirmationDialogProps {
     open: boolean;
     setOpen: (open: boolean) => void;
-    usersInfos: UserInfos[];
-    deleteUsers: () => void;
+    itemType: string;
+    itemNames: string[];
+    deleteFunc: () => void;
 }
 
-const DeleteUserDialog: FunctionComponent<DeleteUserDialogProps> = (props) => {
-    const { open, setOpen, deleteUsers, usersInfos } = props;
+const DeleteConfirmationDialog: FunctionComponent<DeleteConfirmationDialogProps> = (props) => {
+    const { open, setOpen, itemType, itemNames, deleteFunc } = props;
     const intl = useIntl();
 
     const handleClose = useCallback(() => {
         setOpen(false);
     }, [setOpen]);
 
     const buildTitle = useCallback(
-        (users: UserInfos[]) => {
-            const hasMultipleItems = users.length > 1;
+        (itemType: string, itemNames: string[]) => {
+            const hasMultipleItems = itemNames.length > 1;
             const descriptor = {
-                id: hasMultipleItems ? 'users.form.delete.multiple.dialog.title' : 'users.form.delete.dialog.title',
+                id: hasMultipleItems ? 'form.delete.multiple.dialog.title' : 'form.delete.dialog.title',
             };
-            return intl.formatMessage(descriptor, hasMultipleItems ? { itemsCount: users.length } : undefined);
+            return intl.formatMessage(
+                descriptor,
+                hasMultipleItems ? { itemType: itemType, itemsCount: itemNames.length } : { itemType: itemType }
+            );
         },
         [intl]
     );
     const onSubmit = useCallback(() => {
-        deleteUsers();
+        deleteFunc();
         setOpen(false);
-    }, [deleteUsers, setOpen]);
+    }, [deleteFunc, setOpen]);
 
     const buildContent = useCallback(
-        (users: UserInfos[]) => {
-            const hasMultipleItems = users.length > 1;
+        (itemType: string, itemNames: string[]) => {
+            const hasMultipleItems = itemNames.length > 1;
             const descriptor = {
-                id: hasMultipleItems ? 'users.form.delete.multiple.dialog.message' : 'users.form.delete.dialog.message',
+                id: hasMultipleItems ? 'form.delete.multiple.dialog.message' : 'form.delete.dialog.message',
             };
             if (hasMultipleItems) {
                 return intl.formatMessage(descriptor, {
-                    itemsCount: users.length,
+                    itemType: itemType,
+                    itemsCount: itemNames.length,
                 });
             }
             return intl.formatMessage(descriptor, {
-                itemName: users.length === 1 && users[0].sub,
+                itemName: itemNames.length === 1 && itemNames[0],
             });
         },
         [intl]
     );
 
     return (
         <Dialog open={open} onClose={handleClose}>
-            <DialogTitle>{buildTitle(usersInfos)}</DialogTitle>
+            <DialogTitle>{buildTitle(itemType, itemNames)}</DialogTitle>
             <DialogContent>
-                <DialogContentText>{buildContent(usersInfos)}</DialogContentText>
+                <DialogContentText>{buildContent(itemType, itemNames)}</DialogContentText>
             </DialogContent>
             <DialogActions>
                 <Button onClick={handleClose}>
@@ -76,4 +80,4 @@ const DeleteUserDialog: FunctionComponent<DeleteUserDialogProps> = (props) => {
     );
 };
 
-export default DeleteUserDialog;
+export default DeleteConfirmationDialog;
diff --git a/src/pages/profiles/profiles-table.tsx b/src/pages/profiles/profiles-table.tsx
@@ -18,6 +18,7 @@ import {
     TextFilterParams,
 } from 'ag-grid-community';
 import { useSnackMessage } from '@gridsuite/commons-ui';
+import DeleteConfirmationDialog from '../common/delete-confirmation-dialog';
 
 const defaultColDef: ColDef<UserProfile> = {
     editable: false,
@@ -40,6 +41,7 @@ const ProfilesTable: FunctionComponent<ProfilesTableProps> = (props) => {
     const { snackError } = useSnackMessage();
 
     const [rowsSelection, setRowsSelection] = useState<UserProfile[]>([]);
+    const [showDeletionDialog, setShowDeletionDialog] = useState(false);
 
     function getRowId(params: GetRowIdParams<UserProfile>): string {
         return params.data.id ? params.data.id : '';
@@ -124,26 +126,36 @@ const ProfilesTable: FunctionComponent<ProfilesTableProps> = (props) => {
     );
 
     return (
-        <GridTable<UserProfile, {}>
-            ref={props.gridRef}
-            dataLoader={UserAdminSrv.fetchProfiles}
-            columnDefs={columns}
-            defaultColDef={defaultColDef}
-            gridId="table-profiles"
-            getRowId={getRowId}
-            rowSelection="multiple"
-            onRowDoubleClicked={props.onRowDoubleClicked}
-            onSelectionChanged={onSelectionChanged}
-        >
-            <GridButton
-                labelId="profiles.table.toolbar.add.label"
-                textId="profiles.table.toolbar.add"
-                startIcon={<ManageAccounts fontSize="small" />}
-                color="primary"
-                onClick={onAddButton}
+        <>
+            <GridTable<UserProfile, {}>
+                ref={props.gridRef}
+                dataLoader={UserAdminSrv.fetchProfiles}
+                columnDefs={columns}
+                defaultColDef={defaultColDef}
+                gridId="table-profiles"
+                getRowId={getRowId}
+                rowSelection="multiple"
+                onRowDoubleClicked={props.onRowDoubleClicked}
+                onSelectionChanged={onSelectionChanged}
+            >
+                <GridButton
+                    labelId="profiles.table.toolbar.add.label"
+                    textId="profiles.table.toolbar.add"
+                    startIcon={<ManageAccounts fontSize="small" />}
+                    color="primary"
+                    onClick={onAddButton}
+                />
+                <GridButtonDelete onClick={() => setShowDeletionDialog(true)} disabled={deleteProfilesDisabled} />
+            </GridTable>
+
+            <DeleteConfirmationDialog
+                open={showDeletionDialog}
+                setOpen={setShowDeletionDialog}
+                itemType={intl.formatMessage({ id: 'form.delete.dialog.profile' })}
+                itemNames={rowsSelection.map((userProfile) => userProfile.name)}
+                deleteFunc={deleteProfiles}
             />
-            <GridButtonDelete onClick={deleteProfiles} disabled={deleteProfilesDisabled} />
-        </GridTable>
+        </>
     );
 };
 export default ProfilesTable;
diff --git a/src/pages/users/UsersPage.tsx b/src/pages/users/UsersPage.tsx
@@ -32,7 +32,7 @@ import {
     TextFilterParams,
 } from 'ag-grid-community';
 import PaperForm from '../common/paper-form';
-import DeleteUserDialog from './delete-user-dialog';
+import DeleteConfirmationDialog from '../common/delete-confirmation-dialog';
 
 const defaultColDef: ColDef<UserInfos> = {
     editable: false,
@@ -276,11 +276,12 @@ const UsersPage: FunctionComponent = () => {
                     </DialogActions>
                 </Dialog>
 
-                <DeleteUserDialog
+                <DeleteConfirmationDialog
                     open={showDeletionDialog}
                     setOpen={setShowDeletionDialog}
-                    usersInfos={rowsSelection}
-                    deleteUsers={deleteUsers}
+                    itemType={intl.formatMessage({ id: 'form.delete.dialog.user' })}
+                    itemNames={rowsSelection.map((user) => user.sub)}
+                    deleteFunc={deleteUsers}
                 />
             </Grid>
         </Grid>
diff --git a/src/translations/en.json b/src/translations/en.json
@@ -44,10 +44,12 @@
     "users.form.content": "Please fill in new user data.",
     "users.form.field.username.label": "User ID",
 
-    "users.form.delete.dialog.title": "Delete a user",
-    "users.form.delete.multiple.dialog.message": "{itemsCount} users will be deleted.",
-    "users.form.delete.dialog.message": "{itemName} will be deleted.",
-    "users.form.delete.multiple.dialog.title": "Delete {itemsCount} users",
+    "form.delete.dialog.user": "user",
+    "form.delete.dialog.profile": "profile",
+    "form.delete.dialog.title": "Delete a {itemType}",
+    "form.delete.multiple.dialog.message": "{itemsCount} {itemType}s will be deleted.",
+    "form.delete.dialog.message": "{itemName} will be deleted.",
+    "form.delete.multiple.dialog.title": "Delete {itemsCount} {itemType}s",
 
     "profiles.table.toolbar.add": "Add profile",
     "profiles.table.toolbar.add.label": "Add a profile",
diff --git a/src/translations/fr.json b/src/translations/fr.json
@@ -45,10 +45,12 @@
     "users.form.content": "Veuillez renseigner les informations de l'utilisateur.",
     "users.form.field.username.label": "ID utilisateur",
 
-    "users.form.delete.dialog.title": "Supprimer utilisateur",
-    "users.form.delete.dialog.message": "{itemName} va être supprimé.",
-    "users.form.delete.multiple.dialog.message": "{itemsCount} utilisateurs vont être supprimés.",
-    "users.form.delete.multiple.dialog.title": "Supprimer {itemsCount} utilisateurs",
+    "form.delete.dialog.user": "utilisateur",
+    "form.delete.dialog.profile": "profil",
+    "form.delete.dialog.title": "Supprimer {itemType}",
+    "form.delete.dialog.message": "{itemName} va être supprimé.",
+    "form.delete.multiple.dialog.message": "{itemsCount} {itemType}s vont être supprimés.",
+    "form.delete.multiple.dialog.title": "Supprimer {itemsCount} {itemType}s",
 
     "profiles.table.toolbar.add": "Ajouter profil",
     "profiles.table.toolbar.add.label": "Ajouter un profil",
