add user profiles

src/components/App/app-top-bar.tsx

@@ -14,7 +14,7 @@ import {
     useState,
 } from 'react';
 import { capitalize, Tab, Tabs, useTheme } from '@mui/material';
-import { PeopleAlt } from '@mui/icons-material';
+import { ManageAccounts, PeopleAlt } from '@mui/icons-material';
 import { logout, TopBar } from '@gridsuite/commons-ui';
 import { useParameterState } from '../parameters';
 import {
@@ -47,6 +47,20 @@ const tabs = new Map<MainPaths, ReactElement>([
             ))}
         />,
     ],
+    [
+        MainPaths.profiles,
+        <Tab
+            icon={<ManageAccounts />}
+            label={<FormattedMessage id="appBar.tabs.profiles" />}
+            href={`/${MainPaths.profiles}`}
+            value={MainPaths.profiles}
+            key={`tab-${MainPaths.profiles}`}
+            iconPosition="start"
+            LinkComponent={forwardRef((props, ref) => (
+                <NavLink ref={ref} to={props.href} {...props} />
+            ))}
+        />,
+    ],
 ]);
 
 const AppTopBar: FunctionComponent = () => {

src/pages/common/paper-form.tsx

@@ -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 { FunctionComponent } from 'react';
+import { Paper, PaperProps } from '@mui/material';
+
+/*
+ * <Paper> is defined in <Dialog> without generics, which default to `PaperProps => PaperProps<'div'>`,
+ *   so we must trick typescript check with a cast
+ */
+const PaperForm: FunctionComponent<
+    PaperProps<'form'> & { untypedProps?: PaperProps }
+> = (props, context) => {
+    const { untypedProps, ...formProps } = props;
+    const othersProps = untypedProps as PaperProps<'form'>; //trust me ts
+    return <Paper component="form" {...formProps} {...(othersProps ?? {})} />;
+};
+
+export default PaperForm;

src/pages/index.ts

@@ -6,3 +6,4 @@
  */
 
 export * from './users';
+export * from './profiles';

src/pages/profiles/add-profile-dialog.tsx

@@ -0,0 +1,132 @@
+/**
+ * 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, RefObject, useCallback } from 'react';
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    InputAdornment,
+    TextField,
+} from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import { Controller, useForm } from 'react-hook-form';
+import { ManageAccounts } from '@mui/icons-material';
+import { UserAdminSrv, UserProfile } from '../../services';
+import { useSnackMessage } from '@gridsuite/commons-ui';
+import { GridTableRef } from '../../components/Grid';
+import PaperForm from '../common/paper-form';
+
+export interface AddProfileDialogProps {
+    gridRef: RefObject<GridTableRef<UserProfile>>;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+}
+
+const AddProfileDialog: FunctionComponent<AddProfileDialogProps> = (props) => {
+    const { snackError } = useSnackMessage();
+
+    const { handleSubmit, control, reset, clearErrors } = useForm<{
+        name: string;
+    }>({
+        defaultValues: { name: '' }, //need default not undefined value for html input, else react error at runtime
+    });
+
+    const addProfile = useCallback(
+        (name: string) => {
+            const profileData: UserProfile = {
+                name: name,
+            };
+            UserAdminSrv.addProfile(profileData)
+                .catch((error) =>
+                    snackError({
+                        messageTxt: error.message,
+                        headerId: 'profiles.table.error.add',
+                    })
+                )
+                .then(() => props.gridRef?.current?.context?.refresh?.());
+        },
+        [props.gridRef, snackError]
+    );
+
+    const handleClose = useCallback(() => {
+        props.setOpen(false);
+        reset();
+        clearErrors();
+    }, [clearErrors, props, reset]);
+
+    const onSubmit = useCallback(
+        (data: { name: string }) => {
+            addProfile(data.name.trim());
+            handleClose();
+        },
+        [addProfile, handleClose]
+    );
+
+    return (
+        <Dialog
+            open={props.open}
+            onClose={handleClose}
+            PaperComponent={(props) => (
+                <PaperForm
+                    untypedProps={props}
+                    onSubmit={handleSubmit(onSubmit)}
+                />
+            )}
+        >
+            <DialogTitle>
+                <FormattedMessage id="profiles.form.title" />
+            </DialogTitle>
+            <DialogContent>
+                <DialogContentText>
+                    <FormattedMessage id="profiles.form.content" />
+                </DialogContentText>
+                <Controller
+                    name="name"
+                    control={control}
+                    rules={{ required: true, minLength: 1 }}
+                    render={({ field, fieldState, formState }) => (
+                        <TextField
+                            {...field}
+                            autoFocus
+                            required
+                            margin="dense"
+                            label={
+                                <FormattedMessage id="profiles.form.field.profilename.label" />
+                            }
+                            type="text"
+                            fullWidth
+                            variant="standard"
+                            inputMode="text"
+                            InputProps={{
+                                startAdornment: (
+                                    <InputAdornment position="start">
+                                        <ManageAccounts />
+                                    </InputAdornment>
+                                ),
+                            }}
+                            error={fieldState?.invalid}
+                            helperText={fieldState?.error?.message}
+                        />
+                    )}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={handleClose}>
+                    <FormattedMessage id="cancel" />
+                </Button>
+                <Button type="submit">
+                    <FormattedMessage id="ok" />
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+export default AddProfileDialog;

src/pages/profiles/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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/.
+ */
+
+export { default as Profiles } from './profiles-page';

src/pages/profiles/modification/custom-mui-dialog.tsx

@@ -0,0 +1,120 @@
+/**
+ * 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/.
+ */
+
+// TODO: this file is going to be available soon in commons-ui
+
+import { FunctionComponent } from 'react';
+import { FieldErrors, FormProvider } from 'react-hook-form';
+import { FormattedMessage } from 'react-intl';
+import {
+    DialogActions,
+    DialogContent,
+    Grid,
+    LinearProgress,
+    Dialog,
+    DialogTitle,
+} from '@mui/material';
+import { CancelButton, SubmitButton } from '@gridsuite/commons-ui';
+
+interface ICustomMuiDialog {
+    open: boolean;
+    formSchema: any;
+    formMethods: any;
+    onClose: (event: React.MouseEvent) => void;
+    onSave: (data: any) => void;
+    onValidationError?: (errors: FieldErrors) => void;
+    titleId: string;
+    disabledSave?: boolean;
+    removeOptional?: boolean;
+    onCancel?: () => void;
+    children: React.ReactNode;
+    isDataFetching?: boolean;
+}
+
+const styles = {
+    dialogPaper: {
+        '.MuiDialog-paper': {
+            width: 'auto',
+            minWidth: '800px',
+            margin: 'auto',
+        },
+    },
+};
+
+const CustomMuiDialog: FunctionComponent<ICustomMuiDialog> = ({
+    open,
+    formSchema,
+    formMethods,
+    onClose,
+    onSave,
+    isDataFetching = false,
+    onValidationError,
+    titleId,
+    disabledSave,
+    removeOptional = false,
+    onCancel,
+    children,
+}) => {
+    const { handleSubmit } = formMethods;
+
+    const handleCancel = (event: React.MouseEvent) => {
+        onCancel && onCancel();
+        onClose(event);
+    };
+
+    const handleClose = (event: React.MouseEvent, reason?: string) => {
+        if (reason === 'backdropClick' && onCancel) {
+            onCancel();
+        }
+        onClose(event);
+    };
+
+    const handleValidate = (data: any) => {
+        onSave(data);
+        onClose(data);
+    };
+
+    const handleValidationError = (errors: FieldErrors) => {
+        onValidationError && onValidationError(errors);
+    };
+
+    return (
+        <FormProvider
+            validationSchema={formSchema}
+            {...formMethods}
+            removeOptional={removeOptional}
+        >
+            <Dialog
+                sx={styles.dialogPaper}
+                open={open}
+                onClose={handleClose}
+                fullWidth
+            >
+                {isDataFetching && <LinearProgress />}
+                <DialogTitle>
+                    <Grid item xs={11}>
+                        <FormattedMessage id={titleId} />
+                    </Grid>
+                </DialogTitle>
+                <DialogContent>{children}</DialogContent>
+                <DialogActions>
+                    <CancelButton onClick={handleCancel} />
+                    <SubmitButton
+                        variant="outlined"
+                        disabled={disabledSave}
+                        onClick={handleSubmit(
+                            handleValidate,
+                            handleValidationError
+                        )}
+                    />
+                </DialogActions>
+            </Dialog>
+        </FormProvider>
+    );
+};
+
+export default CustomMuiDialog;

src/pages/profiles/modification/linked-path-display.tsx

@@ -0,0 +1,50 @@
+/**
+ * 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 { Typography, useTheme } from '@mui/material';
+import { useIntl } from 'react-intl';
+import { FunctionComponent } from 'react';
+
+export interface LinkedPathDisplayProps {
+    nameKey: string;
+    value?: string;
+    linkValidity?: boolean;
+}
+
+const LinkedPathDisplay: FunctionComponent<LinkedPathDisplayProps> = (
+    props
+) => {
+    const intl = useIntl();
+    const theme = useTheme();
+
+    return (
+        <Typography
+            sx={{
+                fontWeight: 'bold',
+                color:
+                    props.linkValidity === false
+                        ? theme.palette.error.main
+                        : undefined,
+            }}
+        >
+            {intl.formatMessage({
+                id: props.nameKey,
+            }) +
+                ' : ' +
+                (props.value
+                    ? props.value
+                    : intl.formatMessage({
+                          id:
+                              props.linkValidity === false
+                                  ? 'linked.path.display.invalidLink'
+                                  : 'linked.path.display.noLink',
+                      }))}
+        </Typography>
+    );
+};
+
+export default LinkedPathDisplay;