user dialog with group table, with style ok

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

Author: dbraquart

src/pages/common/table-selection.tsx

@@ -0,0 +1,105 @@
+/**
+ * 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, useMemo, useRef, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { CustomAGGrid } from '@gridsuite/commons-ui';
+import { Grid, Typography } from '@mui/material';
+import { AgGridReact } from 'ag-grid-react';
+import { ColDef, GetRowIdParams, GridReadyEvent, RowSelectionOptions } from 'ag-grid-community';
+import { defaultColDef } from './table-config';
+
+export interface TableSelectionProps {
+    itemNameTranslationKey: string;
+    tableItems: string[];
+    tableSelectedItems?: string[];
+    onSelectionChanged: (selectedItems: string[]) => void;
+}
+
+const TableSelection: FunctionComponent<TableSelectionProps> = (props) => {
+    const intl = useIntl();
+    const [selectedRowsLength, setSelectedRowsLength] = useState(0);
+    const gridRef = useRef<AgGridReact>(null);
+
+    const handleEquipmentSelectionChanged = useCallback(() => {
+        const selectedRows = gridRef.current?.api.getSelectedRows();
+        if (selectedRows == null) {
+            setSelectedRowsLength(0);
+            props.onSelectionChanged([]);
+        } else {
+            setSelectedRowsLength(selectedRows.length);
+            props.onSelectionChanged(selectedRows.map((r) => r.id));
+        }
+    }, [props]);
+
+    const rowData = useMemo(() => {
+        return props.tableItems.map((str) => ({ id: str }));
+    }, [props.tableItems]);
+
+    const rowSelection: RowSelectionOptions = {
+        mode: 'multiRow',
+        enableClickSelection: false,
+        checkboxes: true,
+        headerCheckbox: true,
+        hideDisabledCheckboxes: false,
+    };
+
+    const columnDefs = useMemo(
+        (): ColDef[] => [
+            {
+                field: 'id',
+                filter: true,
+                sortable: true,
+                minWidth: 80,
+                headerName: intl.formatMessage({
+                    id: props.itemNameTranslationKey,
+                }),
+            },
+        ],
+        [intl, props.itemNameTranslationKey]
+    );
+
+    function getRowId(params: GetRowIdParams): string {
+        return params.data.id;
+    }
+
+    const onGridReady = useCallback(
+        ({ api }: GridReadyEvent) => {
+            api?.forEachNode((n) => {
+                if (props.tableSelectedItems !== undefined && n.id && props.tableSelectedItems.includes(n.id)) {
+                    n.setSelected(true);
+                }
+            });
+        },
+        [props.tableSelectedItems]
+    );
+
+    return (
+        <Grid item container direction={'column'} style={{ height: '100%' }}>
+            <Grid item>
+                <Typography variant="subtitle1">
+                    <FormattedMessage id={props.itemNameTranslationKey}></FormattedMessage>
+                    {` (${selectedRowsLength} / ${rowData?.length ?? 0})`}
+                </Typography>
+            </Grid>
+            <Grid item xs>
+                <CustomAGGrid
+                    gridId="table-selection"
+                    ref={gridRef}
+                    rowData={rowData}
+                    columnDefs={columnDefs}
+                    defaultColDef={defaultColDef}
+                    getRowId={getRowId}
+                    rowSelection={rowSelection}
+                    onSelectionChanged={handleEquipmentSelectionChanged}
+                    onGridReady={onGridReady}
+                />
+            </Grid>
+        </Grid>
+    );
+};
+export default TableSelection;

src/pages/groups/modification/group-modification-dialog.tsx

@@ -38,7 +38,6 @@ const GroupModificationDialog: FunctionComponent<GroupModificationDialogProps> =
     const [dataFetchStatus, setDataFetchStatus] = useState<string>(FetchStatus.IDLE);
 
     useEffect(() => {
-        // fetch available profiles
         if (groupInfos && open) {
             setDataFetchStatus(FetchStatus.FETCHING);
             UserAdminSrv.fetchUsers()

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

@@ -5,17 +5,18 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import ProfileModificationForm, {
+import UserModificationForm, {
     USER_NAME,
     USER_PROFILE_NAME,
+    USER_SELECTED_GROUPS,
     UserModificationFormType,
     UserModificationSchema,
 } from './user-modification-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
 import { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';
 import { CustomMuiDialog, FetchStatus, useSnackMessage } from '@gridsuite/commons-ui';
-import { UpdateUserInfos, UserAdminSrv, UserInfos, UserProfile } from '../../../services';
+import { GroupInfos, UpdateUserInfos, UserAdminSrv, UserInfos, UserProfile } from '../../../services';
 
 interface UserModificationDialogProps {
     userInfos: UserInfos | undefined;
@@ -34,36 +35,64 @@ const UserModificationDialog: FunctionComponent<UserModificationDialogProps> = (
     const formMethods = useForm({
         resolver: yupResolver(UserModificationSchema),
     });
-    const { reset } = formMethods;
+    const { reset, setValue } = formMethods;
     const [profileOptions, setProfileOptions] = useState<string[]>([]);
+    const [groupOptions, setGroupOptions] = useState<string[]>([]);
+    const [selectedGroups, setSelectedGroups] = useState<string[]>([]);
     const [dataFetchStatus, setDataFetchStatus] = useState<string>(FetchStatus.IDLE);
 
     useEffect(() => {
-        // fetch available profiles
         if (userInfos && open) {
+            setSelectedGroups(userInfos.groups);
+            // fetch profile & groups
             setDataFetchStatus(FetchStatus.FETCHING);
-            UserAdminSrv.fetchProfilesWithoutValidityCheck()
+            let fetcherPromises: Promise<unknown>[] = [];
+            const profilePromise = UserAdminSrv.fetchProfilesWithoutValidityCheck();
+            const groupPromise = UserAdminSrv.fetchGroups();
+            fetcherPromises.push(profilePromise);
+            fetcherPromises.push(groupPromise);
+
+            profilePromise
                 .then((allProfiles: UserProfile[]) => {
-                    setDataFetchStatus(FetchStatus.FETCH_SUCCESS);
                     setProfileOptions(
                         allProfiles.map((p) => p.name).sort((a: string, b: string) => a.localeCompare(b))
                     );
                 })
                 .catch((error) => {
-                    setDataFetchStatus(FetchStatus.FETCH_ERROR);
                     snackError({
                         messageTxt: error.message,
                         headerId: 'users.table.error.profiles',
                     });
                 });
+
+            groupPromise
+                .then((allGroups: GroupInfos[]) => {
+                    setGroupOptions(allGroups.map((g) => g.name).sort((a: string, b: string) => a.localeCompare(b)));
+                })
+                .catch((error) => {
+                    snackError({
+                        messageTxt: error.message,
+                        headerId: 'users.table.error.groups',
+                    });
+                });
+
+            Promise.all(fetcherPromises)
+                .then(() => {
+                    setDataFetchStatus(FetchStatus.FETCH_SUCCESS);
+                })
+                .catch(() => {
+                    setDataFetchStatus(FetchStatus.FETCH_ERROR);
+                });
         }
     }, [open, snackError, userInfos]);
 
     useEffect(() => {
         if (userInfos && open) {
+            const sortedGroups = Array.from(userInfos.groups).sort((a, b) => a.localeCompare(b));
             reset({
                 [USER_NAME]: userInfos.sub,
                 [USER_PROFILE_NAME]: userInfos.profileName,
+                [USER_SELECTED_GROUPS]: JSON.stringify(sortedGroups), // only used to dirty the form
             });
         }
     }, [userInfos, open, reset]);
@@ -73,14 +102,27 @@ const UserModificationDialog: FunctionComponent<UserModificationDialogProps> = (
         onClose();
     }, [onClose]);
 
+    const onSelectionChanged = useCallback(
+        (selectedItems: string[]) => {
+            if (userInfos) {
+                setSelectedGroups(selectedItems);
+                selectedItems.sort((a, b) => a.localeCompare(b));
+                setValue(USER_SELECTED_GROUPS, JSON.stringify(selectedItems), {
+                    shouldDirty: true,
+                });
+            }
+        },
+        [setValue, userInfos]
+    );
+
     const onSubmit = useCallback(
         (userFormData: UserModificationFormType) => {
             if (userInfos) {
                 const newData: UpdateUserInfos = {
                     sub: userInfos.sub, // sub cannot be changed, it is a PK in database
                     isAdmin: userInfos.isAdmin, // cannot be changed for now
                     profileName: userFormData.profileName ?? undefined,
-                    groups: [],
+                    groups: selectedGroups,
                 };
                 UserAdminSrv.udpateUser(newData)
                     .catch((error) =>
@@ -94,7 +136,7 @@ const UserModificationDialog: FunctionComponent<UserModificationDialogProps> = (
                     });
             }
         },
-        [onUpdate, snackError, userInfos]
+        [onUpdate, selectedGroups, snackError, userInfos]
     );
 
     const isDataReady = useMemo(() => dataFetchStatus === FetchStatus.FETCH_SUCCESS, [dataFetchStatus]);
@@ -110,8 +152,16 @@ const UserModificationDialog: FunctionComponent<UserModificationDialogProps> = (
             titleId={'users.form.modification.title'}
             removeOptional={true}
             isDataFetching={isDataFetching}
+            unscrollableFullHeight
         >
-            {isDataReady && <ProfileModificationForm profileOptions={profileOptions} />}
+            {isDataReady && (
+                <UserModificationForm
+                    profileOptions={profileOptions}
+                    groupOptions={groupOptions}
+                    selectedGroups={selectedGroups}
+                    onSelectionChanged={onSelectionChanged}
+                />
+            )}
         </CustomMuiDialog>
     );
 };

src/pages/users/modification/user-modification-form.tsx

@@ -9,27 +9,38 @@ import { AutocompleteInput, TextInput } from '@gridsuite/commons-ui';
 import Grid from '@mui/material/Grid';
 import React, { FunctionComponent } from 'react';
 import yup from '../../../utils/yup-config';
+import TableSelection from '../../common/table-selection';
 
 export const USER_NAME = 'sub';
 export const USER_PROFILE_NAME = 'profileName';
+export const USER_SELECTED_GROUPS = 'groups';
 
 export const UserModificationSchema = yup
     .object()
     .shape({
         [USER_NAME]: yup.string().trim().required('nameEmpty'),
         [USER_PROFILE_NAME]: yup.string().nullable(),
+        [USER_SELECTED_GROUPS]: yup.string().nullable(),
     })
     .required();
 
 export type UserModificationFormType = yup.InferType<typeof UserModificationSchema>;
 
 interface UserModificationFormProps {
     profileOptions: string[];
+    groupOptions: string[];
+    selectedGroups?: string[];
+    onSelectionChanged: (selectedItems: string[]) => void;
 }
 
-const UserModificationForm: FunctionComponent<UserModificationFormProps> = ({ profileOptions }) => {
+const UserModificationForm: FunctionComponent<UserModificationFormProps> = ({
+    profileOptions,
+    groupOptions,
+    selectedGroups,
+    onSelectionChanged,
+}) => {
     return (
-        <Grid container spacing={2} marginTop={'auto'}>
+        <Grid item container spacing={2} marginTop={0} style={{ height: '100%' }}>
             <Grid item xs={12}>
                 <TextInput
                     name={USER_NAME}
@@ -50,6 +61,14 @@ const UserModificationForm: FunctionComponent<UserModificationFormProps> = ({ pr
                     options={profileOptions}
                 />
             </Grid>
+            <Grid item xs={12} style={{ height: '85%' }}>
+                <TableSelection
+                    itemNameTranslationKey={'groups.form.field.group.label'}
+                    tableItems={groupOptions}
+                    tableSelectedItems={selectedGroups}
+                    onSelectionChanged={onSelectionChanged}
+                />
+            </Grid>
         </Grid>
     );
 };

src/pages/users/users-page.tsx

@@ -40,18 +40,24 @@ const UsersPage: FunctionComponent = () => {
     }, []);
 
     return (
-        <Grid item container direction="column" spacing={2} component="section">
-            <Grid item container xs sx={{ width: 1 }}>
-                <UserModificationDialog
-                    userInfos={editingUser}
-                    open={openUserModificationDialog}
-                    onClose={handleCloseUserModificationDialog}
-                    onUpdate={handleUpdateUserModificationDialog}
-                />
-                <UsersTable gridRef={gridRef} onRowClicked={onRowClicked} setOpenAddUserDialog={setOpenAddUserDialog} />
-                <AddUserDialog gridRef={gridRef} open={openAddUserDialog} setOpen={setOpenAddUserDialog} />
+        <>
+            <Grid item container direction="column" spacing={2} component="section">
+                <Grid item container xs sx={{ width: 1 }}>
+                    <UsersTable
+                        gridRef={gridRef}
+                        onRowClicked={onRowClicked}
+                        setOpenAddUserDialog={setOpenAddUserDialog}
+                    />
+                </Grid>
             </Grid>
-        </Grid>
+            <AddUserDialog gridRef={gridRef} open={openAddUserDialog} setOpen={setOpenAddUserDialog} />
+            <UserModificationDialog
+                userInfos={editingUser}
+                open={openUserModificationDialog}
+                onClose={handleCloseUserModificationDialog}
+                onUpdate={handleUpdateUserModificationDialog}
+            />
+        </>
     );
 };
 export default UsersPage;

src/services/user-admin.ts

@@ -42,7 +42,7 @@ export type UserInfos = {
     sub: string;
     profileName: string;
     isAdmin: boolean;
-    groups: GroupInfos[];
+    groups: string[];
 };
 
 export function fetchUsers(): Promise<UserInfos[]> {