refacto group page, missing users in edit dialog

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

Author: dbraquart

src/pages/groups/groups-page.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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, useRef, useState } from 'react';
+import { Grid } from '@mui/material';
+import { GridTableRef } from '../../components/Grid';
+import { GroupInfos } from '../../services';
+import { RowClickedEvent } from 'ag-grid-community';
+import GroupModificationDialog from './modification/group-modification-dialog';
+import GroupsTable from './groups-table';
+import AddGroupDialog from './add-group-dialog';
+
+const GroupsPage: FunctionComponent = () => {
+    const gridRef = useRef<GridTableRef<GroupInfos>>(null);
+    const gridContext = gridRef.current?.context;
+    const [openGroupModificationDialog, setOpenGroupModificationDialog] = useState(false);
+    const [editingGroup, setEditingGroup] = useState<GroupInfos>();
+
+    const [openAddGroupDialog, setOpenAddGroupDialog] = useState(false);
+
+    const handleCloseGroupModificationDialog = useCallback(() => {
+        setOpenGroupModificationDialog(false);
+        setEditingGroup(undefined);
+    }, []);
+
+    const handleUpdateGroupModificationDialog = useCallback(() => {
+        gridContext?.refresh?.();
+        handleCloseGroupModificationDialog();
+    }, [gridContext, handleCloseGroupModificationDialog]);
+
+    const onRowClicked = useCallback((event: RowClickedEvent<GroupInfos>) => {
+        if (event.data) {
+            setEditingGroup(event.data);
+            setOpenGroupModificationDialog(true);
+        }
+    }, []);
+
+    return (
+        <Grid item container direction="column" spacing={2} component="section">
+            <Grid item container xs sx={{ width: 1 }}>
+                <GroupModificationDialog
+                    groupInfos={editingGroup}
+                    open={openGroupModificationDialog}
+                    onClose={handleCloseGroupModificationDialog}
+                    onUpdate={handleUpdateGroupModificationDialog}
+                />
+                <GroupsTable
+                    gridRef={gridRef}
+                    onRowClicked={onRowClicked}
+                    setOpenAddGroupDialog={setOpenAddGroupDialog}
+                />
+                <AddGroupDialog gridRef={gridRef} open={openAddGroupDialog} setOpen={setOpenAddGroupDialog} />
+            </Grid>
+        </Grid>
+    );
+};
+export default GroupsPage;

src/pages/groups/GroupsPage.tsx renamed to src/pages/groups/groups-table.tsx

@@ -1,36 +1,43 @@
-/*
- * Copyright (c) 2025, RTE (http://www.rte-france.com)
+/**
+ * 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, useEffect, useMemo, useRef, useState } from 'react';
+import { FunctionComponent, RefObject, useCallback, useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
-import { Grid } from '@mui/material';
 import { GroupAdd } from '@mui/icons-material';
 import { GridButton, GridButtonDelete, GridTable, GridTableRef } from '../../components/Grid';
-import { UserAdminSrv, GroupInfos, UserInfos, UpdateGroupInfos } from '../../services';
+import { GroupInfos, UpdateGroupInfos, UserAdminSrv, UserInfos } from '../../services';
+import {
+    ColDef,
+    GetRowIdParams,
+    ICellEditorParams,
+    RowClickedEvent,
+    SelectionChangedEvent,
+    TextFilterParams,
+} from 'ag-grid-community';
 import { useSnackMessage } from '@gridsuite/commons-ui';
-import { ColDef, GetRowIdParams, SelectionChangedEvent, TextFilterParams, ICellEditorParams } from 'ag-grid-community';
 import DeleteConfirmationDialog from '../common/delete-confirmation-dialog';
-import MultiSelectEditorComponent from '../common/multi-select-editor-component';
+import { defaultColDef, defaultRowSelection } from '../common/table-config';
 import MultiChipsRendererComponent from '../common/multi-chips-renderer-component';
+import MultiSelectEditorComponent from '../common/multi-select-editor-component';
 import { UUID } from 'crypto';
-import { defaultColDef } from '../common/table-config';
-import AddGroupDialog from './add-group-dialog';
 
-function getRowId(params: GetRowIdParams<GroupInfos>): string {
-    return params.data.name;
+export interface GroupsTableProps {
+    gridRef: RefObject<GridTableRef<GroupInfos>>;
+    onRowClicked: (event: RowClickedEvent<GroupInfos>) => void;
+    setOpenAddGroupDialog: (open: boolean) => void;
 }
 
-const GroupsPage: FunctionComponent = () => {
+const GroupsTable: FunctionComponent<GroupsTableProps> = (props) => {
     const intl = useIntl();
     const { snackError } = useSnackMessage();
-    const gridRef = useRef<GridTableRef<GroupInfos>>(null);
-    const gridContext = gridRef.current?.context;
+
+    const [rowsSelection, setRowsSelection] = useState<GroupInfos[]>([]);
+    const [showDeletionDialog, setShowDeletionDialog] = useState(false);
     const [usersOptions, setUsersOptions] = useState<string[]>([]);
-    const [openAddGroupDialog, setOpenAddGroupDialog] = useState(false);
 
     useEffect(() => {
         UserAdminSrv.fetchUsers()
@@ -46,12 +53,43 @@ const GroupsPage: FunctionComponent = () => {
             );
     }, [snackError]);
 
+    function getRowId(params: GetRowIdParams<GroupInfos>): string {
+        return params.data.name;
+    }
+
+    const onSelectionChanged = useCallback(
+        (event: SelectionChangedEvent<GroupInfos, {}>) => setRowsSelection(event.api.getSelectedRows() ?? []),
+        [setRowsSelection]
+    );
+
+    const onAddButton = useCallback(() => props.setOpenAddGroupDialog(true), [props]);
+
+    const deleteGroups = useCallback((): Promise<void> | undefined => {
+        let groupNames = rowsSelection.map((group) => group.name);
+        return UserAdminSrv.deleteGroups(groupNames)
+            .catch((error) => {
+                if (error.status === 422) {
+                    snackError({
+                        headerId: 'groups.table.integrity.error.delete',
+                    });
+                } else {
+                    snackError({
+                        messageTxt: error.message,
+                        headerId: 'groups.table.error.delete',
+                    });
+                }
+            })
+            .then(() => props.gridRef?.current?.context?.refresh?.());
+    }, [props.gridRef, rowsSelection, snackError]);
+
+    const deleteGroupsDisabled = useMemo(() => rowsSelection.length <= 0, [rowsSelection.length]);
+
     const updateGroupCallback = useCallback(
         (id: UUID, name: string, users: string[]) => {
             const newData: UpdateGroupInfos = {
                 id: id,
                 name: name,
-                users: users,
+                users: [],
             };
             UserAdminSrv.udpateGroup(newData)
                 .catch((error) =>
@@ -60,9 +98,9 @@ const GroupsPage: FunctionComponent = () => {
                         headerId: 'groups.table.error.update',
                     })
                 )
-                .then(() => gridContext?.refresh?.());
+                .then(() => props.gridRef?.current?.context?.refresh?.());
         },
-        [gridContext, snackError]
+        [props.gridRef, snackError]
     );
 
     const columns = useMemo(
@@ -114,70 +152,37 @@ const GroupsPage: FunctionComponent = () => {
         [intl, usersOptions, updateGroupCallback]
     );
 
-    const [rowsSelection, setRowsSelection] = useState<GroupInfos[]>([]);
-    const deleteGroups = useCallback((): Promise<void> | undefined => {
-        let groupNames = rowsSelection.map((group) => group.name);
-        return UserAdminSrv.deleteGroups(groupNames)
-            .catch((error) => {
-                if (error.status === 422) {
-                    snackError({
-                        headerId: 'groups.table.integrity.error.delete',
-                    });
-                } else {
-                    snackError({
-                        messageTxt: error.message,
-                        headerId: 'groups.table.error.delete',
-                    });
-                }
-            })
-            .then(() => gridContext?.refresh?.());
-    }, [gridContext, rowsSelection, snackError]);
-    const deleteGroupsDisabled = useMemo(() => rowsSelection.length <= 0, [rowsSelection.length]);
-    const [showDeletionDialog, setShowDeletionDialog] = useState(false);
-
     return (
-        <Grid item container direction="column" spacing={2} component="section">
-            <Grid item container xs sx={{ width: 1 }}>
-                <GridTable<GroupInfos, {}>
-                    ref={gridRef}
-                    dataLoader={UserAdminSrv.fetchGroups}
-                    columnDefs={columns}
-                    defaultColDef={defaultColDef}
-                    stopEditingWhenCellsLoseFocus={true}
-                    gridId="table-groups"
-                    getRowId={getRowId}
-                    rowSelection={{
-                        mode: 'multiRow',
-                        enableClickSelection: false,
-                        checkboxes: true,
-                        headerCheckbox: true,
-                        hideDisabledCheckboxes: false,
-                    }}
-                    onSelectionChanged={useCallback(
-                        (event: SelectionChangedEvent<GroupInfos, {}>) =>
-                            setRowsSelection(event.api.getSelectedRows() ?? []),
-                        []
-                    )}
-                >
-                    <GridButton
-                        labelId="groups.table.toolbar.add.label"
-                        textId="groups.table.toolbar.add"
-                        startIcon={<GroupAdd fontSize="small" />}
-                        color="primary"
-                        onClick={useCallback(() => setOpenAddGroupDialog(true), [])}
-                    />
-                    <GridButtonDelete onClick={() => setShowDeletionDialog(true)} disabled={deleteGroupsDisabled} />
-                </GridTable>
-                <AddGroupDialog gridRef={gridRef} open={openAddGroupDialog} setOpen={setOpenAddGroupDialog} />
-                <DeleteConfirmationDialog
-                    open={showDeletionDialog}
-                    setOpen={setShowDeletionDialog}
-                    itemType={intl.formatMessage({ id: 'form.delete.dialog.group' })}
-                    itemNames={rowsSelection.map((group) => group.name)}
-                    deleteFunc={deleteGroups}
+        <>
+            <GridTable<GroupInfos, {}>
+                ref={props.gridRef}
+                dataLoader={UserAdminSrv.fetchGroups}
+                columnDefs={columns}
+                defaultColDef={defaultColDef}
+                gridId="table-groups"
+                getRowId={getRowId}
+                rowSelection={defaultRowSelection}
+                onRowClicked={props.onRowClicked}
+                onSelectionChanged={onSelectionChanged}
+            >
+                <GridButton
+                    labelId="groups.table.toolbar.add.label"
+                    textId="groups.table.toolbar.add"
+                    startIcon={<GroupAdd fontSize="small" />}
+                    color="primary"
+                    onClick={onAddButton}
                 />
-            </Grid>
-        </Grid>
+                <GridButtonDelete onClick={() => setShowDeletionDialog(true)} disabled={deleteGroupsDisabled} />
+            </GridTable>
+
+            <DeleteConfirmationDialog
+                open={showDeletionDialog}
+                setOpen={setShowDeletionDialog}
+                itemType={intl.formatMessage({ id: 'form.delete.dialog.group' })}
+                itemNames={rowsSelection.map((user) => user.name)}
+                deleteFunc={deleteGroups}
+            />
+        </>
     );
 };
-export default GroupsPage;
+export default GroupsTable;

src/pages/groups/index.ts

@@ -5,4 +5,4 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-export { default as Groups } from './GroupsPage';
+export { default as Groups } from './groups-page';