Ask for confirmation before deleting users

src/pages/users/UsersPage.tsx

@@ -44,6 +44,7 @@ import {
     TextFilterParams,
 } from 'ag-grid-community';
 import PaperForm from '../common/paper-form';
+import DeleteUserDialog from './delete-user-dialog';
 
 const defaultColDef: ColDef<UserInfos> = {
     editable: false,
@@ -187,6 +188,7 @@ const UsersPage: FunctionComponent = () => {
         defaultValues: { user: '' }, //need default not undefined value for html input, else react error at runtime
     });
     const [open, setOpen] = useState(false);
+    const [showDeletionDialog, setShowDeletionDialog] = useState(false);
     const handleClose = () => {
         setOpen(false);
         reset();
@@ -242,7 +244,7 @@ const UsersPage: FunctionComponent = () => {
                         onClick={useCallback(() => setOpen(true), [])}
                     />
                     <GridButtonDelete
-                        onClick={deleteUsers}
+                        onClick={() => setShowDeletionDialog(true)}
                         disabled={deleteUsersDisabled}
                     />
                 </GridTable>
@@ -302,6 +304,13 @@ const UsersPage: FunctionComponent = () => {
                         </Button>
                     </DialogActions>
                 </Dialog>
+
+                <DeleteUserDialog
+                    open={showDeletionDialog}
+                    setOpen={setShowDeletionDialog}
+                    usersInfos={rowsSelection}
+                    deleteUsers={deleteUsers}
+                />
             </Grid>
         </Grid>
     );

src/pages/users/delete-user-dialog.tsx

@@ -0,0 +1,95 @@
+/*
+ * 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 { 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 {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    usersInfos: UserInfos[];
+    deleteUsers: () => void;
+}
+
+const DeleteUserDialog: FunctionComponent<DeleteUserDialogProps> = (props) => {
+    const { open, setOpen, deleteUsers, usersInfos } = props;
+    const intl = useIntl();
+
+    const handleClose = useCallback(() => {
+        setOpen(false);
+    }, [setOpen]);
+
+    const buildTitle = useCallback(
+        (users: UserInfos[]) => {
+            const hasMultipleItems = users.length > 1;
+            const descriptor = {
+                id: hasMultipleItems
+                    ? 'users.form.delete.multiple.dialog.title'
+                    : 'users.form.delete.dialog.title',
+            };
+            return intl.formatMessage(
+                descriptor,
+                hasMultipleItems ? { itemsCount: users.length } : undefined
+            );
+        },
+        [intl]
+    );
+    const onSubmit = useCallback(() => {
+        deleteUsers();
+        setOpen(false);
+    }, [deleteUsers, setOpen]);
+
+    const buildContent = useCallback(
+        (users: UserInfos[]) => {
+            const hasMultipleItems = users.length > 1;
+            const descriptor = {
+                id: hasMultipleItems
+                    ? 'users.form.delete.multiple.dialog.message'
+                    : 'users.form.delete.dialog.message',
+            };
+            if (hasMultipleItems) {
+                return intl.formatMessage(descriptor, {
+                    itemsCount: users.length,
+                });
+            }
+            return intl.formatMessage(descriptor, {
+                itemName: users.length === 1 && users[0].sub,
+            });
+        },
+        [intl]
+    );
+
+    return (
+        <Dialog open={open} onClose={handleClose}>
+            <DialogTitle>{buildTitle(usersInfos)}</DialogTitle>
+            <DialogContent>
+                <DialogContentText>
+                    {buildContent(usersInfos)}
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={handleClose}>
+                    <FormattedMessage id="cancel" />
+                </Button>
+                <Button type="submit" onClick={onSubmit}>
+                    <FormattedMessage id="ok" />
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default DeleteUserDialog;

src/translations/en.json

@@ -43,6 +43,11 @@
     "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",
+
     "profiles.table.toolbar.add": "Add profile",
     "profiles.table.toolbar.add.label": "Add a profile",
     "profiles.form.title": "Add a profile",

src/translations/fr.json

@@ -44,6 +44,11 @@
     "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",
+
     "profiles.table.toolbar.add": "Ajouter profil",
     "profiles.table.toolbar.add.label": "Ajouter un profil",
     "profiles.form.title": "Ajouter un profil",