@deix/rossini-identity-management 1.1.2 → 2.0.0

package/lib/components/users/UserForm.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { useLocale } from '@deix/rossini-core';
+import { Button, FormControlLabel, Grid, Switch, TextField, } from '@mui/material';
+import { Controller, useForm } from 'react-hook-form';
+import { useEffect } from 'react';
+import usersTranslations from '../../lang/users';
+const UserForm = ({ user, onSave, onCancel, mode = 'create', editUsername, emailAsUsername = false, }) => {
+    const locale = useLocale();
+    const { control, formState: { errors }, handleSubmit, setValue, } = useForm({
+        defaultValues: {
+            id: user?.id,
+            username: user?.username || '',
+            firstName: user?.firstName || '',
+            lastName: user?.lastName || '',
+            email: user?.email || '',
+            emailVerified: user?.emailVerified || true,
+            enabled: user?.enabled || true,
+            sendEmailOnCreation: true,
+        },
+    });
+    useEffect(() => {
+        if (user) {
+            setValue('id', user?.id);
+            if (!emailAsUsername) {
+                setValue('username', user?.username);
+            }
+            setValue('firstName', user?.firstName);
+            setValue('lastName', user?.lastName);
+            setValue('email', user?.email);
+            setValue('emailVerified', user?.emailVerified);
+            setValue('enabled', user?.enabled);
+            setValue('groups', user?.groups);
+            // The user already exists, we don't want to send an email
+            setValue('sendEmailOnCreation', false);
+        }
+    }, [user, setValue]);
+    const onSubmit = (data) => {
+        onSave(data);
+    };
+    return (<form onSubmit={(event) => void handleSubmit(onSubmit)(event)}>
+      <Grid container spacing={2} sx={{ mt: 2, maxWidth: 'sm' }} justifyContent='stretch'>
+        {!emailAsUsername && (<Grid size={{ xs: 12 }}>
+            <Controller name='username' control={control} render={({ field }) => (<TextField size='small' fullWidth label={usersTranslations.username[locale]} disabled={mode === 'modify' && !editUsername} sx={{ flexShrink: 0 }} {...field}/>)}/>
+          </Grid>)}
+        <Grid size={{ xs: 12 }}>
+          <Controller name='firstName' control={control} render={({ field }) => (<TextField size='small' fullWidth label={usersTranslations.firstName[locale]} sx={{ flexShrink: 0 }} {...field}/>)}/>
+        </Grid>
+        <Grid size={{ xs: 12 }}>
+          <Controller name='lastName' control={control} render={({ field }) => (<TextField size='small' fullWidth label={usersTranslations.lastName[locale]} sx={{ flexShrink: 0 }} {...field}/>)}/>
+        </Grid>
+        <Grid size={{ xs: 12 }}>
+          <Controller name='email' control={control} rules={{ required: true }} render={({ field }) => (<TextField size='small' fullWidth error={!!errors.email} helperText={errors.email
+                ? usersTranslations.requiredField[locale]
+                : undefined} label={usersTranslations.email[locale]} sx={{ flexShrink: 0 }} {...field}/>)}/>
+        </Grid>
+        <Grid size={{ xs: 12 }}>
+          <Controller name='enabled' control={control} render={({ field }) => (<FormControlLabel sx={{ ml: 1 }} control={<Switch checked={field.value} size='small' {...field}/>} label={usersTranslations.enabled[locale]}/>)}/>
+        </Grid>
+        {mode === 'create' && (<Grid size={{ xs: 12 }}>
+            <Controller name='sendEmailOnCreation' control={control} render={({ field }) => (<FormControlLabel sx={{ ml: 1 }} control={<Switch checked={field.value} size='small' {...field}/>} label={usersTranslations.sendResetPasswordEmail[locale]}/>)}/>
+          </Grid>)}
+        <Grid sx={{
+            mt: 2,
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: 2,
+            width: '100%',
+        }}>
+          {mode === 'create' && (<Button variant='outlined' onClick={onCancel}>
+              {usersTranslations.cancel[locale]}
+            </Button>)}
+          <Button variant='contained' type='submit'>
+            {usersTranslations.save[locale]}
+          </Button>
+        </Grid>
+      </Grid>
+    </form>);
+};
+export default UserForm;

package/lib/components/users/UserGroups.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Box, Button, IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { isStringTranslation, useLocale } from '@deix/rossini-core';
+import { useAddUserToGroup, useRemoveUserFromGroup, useUserGroups, } from '../../utils/hooks/users';
+import { useState } from 'react';
+import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
+import { useQueryClient } from '@tanstack/react-query';
+import usersTranslations from '../../lang/users';
+import AddItemDialog from '../AddItemDialog';
+import { useGroups } from '../../utils/hooks/groups';
+import { useAPIClient } from '../../utils/hooks/useAPIClient';
+const userGroupsTableColumns = [
+    {
+        id: 'name',
+        label: { en: 'Group', it: 'Gruppo' },
+    },
+];
+const UserGroups = ({ user }) => {
+    const locale = useLocale();
+    const apiClient = useAPIClient();
+    const queryClient = useQueryClient();
+    const { data: groups } = useGroups(apiClient);
+    const { data: userGroups } = useUserGroups(user?.id, apiClient);
+    const { mutate: addUserToGroup } = useAddUserToGroup(queryClient, apiClient);
+    const { mutate: removeUserFromGroup } = useRemoveUserFromGroup(queryClient, apiClient);
+    const [openAddGroupDialog, setOpenAddGroupDialog] = useState(false);
+    const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
+    const [deleteId, setDeleteId] = useState();
+    return (<>
+      {userGroups && userGroups.length > 0 && (<Box maxWidth='sm'>
+          <TableContainer>
+            <Table size='small'>
+              <TableHead>
+                <TableRow>
+                  {userGroupsTableColumns.map((col) => (<TableCell key={col.id} align={col.align || 'inherit'}>
+                      {isStringTranslation(col.label)
+                    ? col.label[locale]
+                    : col.label}
+                    </TableCell>))}
+                  <TableCell padding='none'>{''}</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {userGroups?.map((group, rowIdx) => (<TableRow key={rowIdx}>
+                    <TableCell>{group.name}</TableCell>
+                    <TableCell padding='none' align='right'>
+                      <IconButton size='small' onClick={(evt) => {
+                    evt.stopPropagation();
+                    setOpenConfirmationDialog(true);
+                    setDeleteId(group.id);
+                }}>
+                        <DeleteIcon />
+                      </IconButton>
+                    </TableCell>
+                  </TableRow>))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Box>)}
+      <Button variant='outlined' startIcon={<AddIcon />} onClick={() => setOpenAddGroupDialog(true)} sx={{ marginTop: 2 }}>
+        {usersTranslations.addGroup[locale]}
+      </Button>
+      <AddItemDialog open={openAddGroupDialog} onClose={() => setOpenAddGroupDialog(false)} onConfirm={(value) => {
+            if (value) {
+                addUserToGroup({ userId: user.id, groupId: value?.value });
+            }
+        }} title={usersTranslations.addGroup} options={groups?.map((group) => ({
+            value: group.id,
+            label: group.name,
+        }))}/>
+      <DeleteConfirmationDialog open={openConfirmationDialog} onClose={() => setOpenConfirmationDialog(false)} onConfirm={() => deleteId
+            ? removeUserFromGroup({ userId: user.id, groupId: deleteId })
+            : {}}/>
+    </>);
+};
+export default UserGroups;

package/lib/components/users/Users.d.ts

@@ -11,7 +11,8 @@ interface UsersProps {
     filteredGroup?: string;
     emailAsUsername?: boolean;
     hideGroupsSelection?: boolean;
+    disableDelete?: boolean;
 }
-declare const Users: ({ apiUrl, additionalTabs, onUserCreate, onUserUpdate, onUserDelete, editUsername, filteredGroup, emailAsUsername, hideGroupsSelection, }: UsersProps) => React.JSX.Element;
+declare const Users: ({ apiUrl, additionalTabs, onUserCreate, onUserUpdate, onUserDelete, editUsername, filteredGroup, emailAsUsername, hideGroupsSelection, disableDelete, }: UsersProps) => React.JSX.Element;
 export default Users;
 //# sourceMappingURL=Users.d.ts.map

package/lib/components/users/Users.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Users.d.ts","sourceRoot":"","sources":["../../../src/components/users/Users.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAWnD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAiB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAGhD,UAAU,UAAU;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,EAAE,CAAC;IAE3B,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IAEtD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IAEvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAEpC,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,QAAA,MAAM,KAAK,GAAI,0IAUZ,UAAU,sBA8JZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Users.d.ts","sourceRoot":"","sources":["../../../src/components/users/Users.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAWnD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAiB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAGhD,UAAU,UAAU;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,EAAE,CAAC;IAE3B,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IAEtD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IAEvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAEpC,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,KAAK,GAAI,yJAWZ,UAAU,sBA+JZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/users/Users.jsx

@@ -0,0 +1,116 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import PersonAddIcon from '@mui/icons-material/PersonAdd';
+import { Box, Button, Grid, IconButton, Link } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { useAPI, useLocale } from '@deix/rossini-core';
+import { useQueryClient } from '@tanstack/react-query';
+import { SearchField } from '../../components';
+import CreateUserDialog from './CreateUserDialog';
+import UsersTable from './UsersTable';
+import usersTranslations from '../../lang/users';
+import { useDeleteUser, useUsers } from '../../utils/hooks/users';
+import UserTabs from './UsersTabs';
+import { APIClientProvider } from '../../utils/hooks/useAPIClient';
+const Users = ({ apiUrl, additionalTabs = [], onUserCreate, onUserUpdate, onUserDelete, editUsername, filteredGroup, emailAsUsername = false, hideGroupsSelection = false, disableDelete = false, }) => {
+    const locale = useLocale();
+    const apiClient = useAPI(apiUrl);
+    const queryClient = useQueryClient();
+    const { data: users } = useUsers(apiClient, filteredGroup);
+    const { mutate: deleteUser } = useDeleteUser(queryClient, apiClient);
+    const [searchString, setSearchString] = useState('');
+    const [filteredUsers, setFilteredUsers] = useState();
+    const [selectedUser, setSelectedUser] = useState();
+    const [openCreateUserDialog, setOpenCreateUserDialog] = useState(false);
+    // Update the filtered users using the search string
+    useEffect(() => {
+        if (users && searchString === '') {
+            setFilteredUsers(users);
+        }
+        else if (users && searchString !== '') {
+            setFilteredUsers(users.filter((user) => user.username?.toLowerCase().includes(searchString.toLowerCase()) ||
+                user.firstName
+                    ?.toLowerCase()
+                    .includes(searchString.toLowerCase()) ||
+                user.lastName
+                    ?.toLocaleLowerCase()
+                    .includes(searchString.toLowerCase())));
+        }
+    }, [searchString, users, setFilteredUsers]);
+    // If the user change updated the selected user to reflect the chages
+    useEffect(() => {
+        if (selectedUser) {
+            const updatedSelectedUser = users?.find((user) => user.id === selectedUser.id);
+            if (updatedSelectedUser) {
+                setSelectedUser(updatedSelectedUser);
+            }
+            else {
+                // deselect the user if it doesn't exist anymore
+                setSelectedUser(undefined);
+            }
+        }
+    }, [users, selectedUser, setSelectedUser]);
+    const handleDelete = (user) => {
+        deleteUser(user.id);
+        if (typeof onUserDelete === 'function') {
+            onUserDelete(user);
+        }
+        setSelectedUser(undefined);
+    };
+    return (<APIClientProvider baseURL={apiUrl}>
+      <Box sx={{
+            flexGrow: 1,
+            maxWidth: '100%',
+            overflowX: 'hidden',
+            paddingTop: 3,
+            paddingLeft: 3,
+            paddingRight: 3,
+        }}>
+        {!selectedUser && (<>
+            <Grid container spacing={2} sx={{ marginBottom: 2 }}>
+              <Grid>
+                <SearchField placeholder={usersTranslations.search[locale]} onSearch={(value) => setSearchString(value)}/>
+              </Grid>
+              <Grid>
+                <Button variant='contained' startIcon={<PersonAddIcon />} onClick={() => {
+                setOpenCreateUserDialog(true);
+                setSelectedUser(undefined);
+            }}>
+                  {usersTranslations.new[locale]}
+                </Button>
+              </Grid>
+            </Grid>
+            <UsersTable users={filteredUsers} selectedUser={selectedUser} setSelectedUser={(user) => {
+                setSelectedUser(user);
+            }} onDelete={handleDelete} emailAsUsername={emailAsUsername} disableDelete={disableDelete}/>
+          </>)}
+        {selectedUser && (<Box sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                width: '100%',
+            }}>
+            <Box sx={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+            }}>
+              <IconButton aria-label='delete' color='primary' onClick={() => setSelectedUser(undefined)} sx={{ mr: 2 }}>
+                <ArrowBackIcon />
+              </IconButton>
+              <Link underline='none' href='#' onClick={() => setSelectedUser(undefined)}>
+                {usersTranslations.title[locale]}
+              </Link>
+              <KeyboardArrowRightIcon />
+              {selectedUser.username}
+            </Box>
+            <UserTabs user={selectedUser} additionalTabs={additionalTabs} onUserUpdate={onUserUpdate} editUsername={editUsername} emailAsUsername={emailAsUsername} hideGroupsSelection={hideGroupsSelection}/>
+          </Box>)}
+        <CreateUserDialog open={openCreateUserDialog} onClose={() => {
+            setOpenCreateUserDialog(false);
+        }} onUserCreate={onUserCreate} filteredGroup={filteredGroup} emailAsUsername/>
+      </Box>
+    </APIClientProvider>);
+};
+export default Users;

package/lib/components/users/UsersTable.d.ts

@@ -8,7 +8,8 @@ export interface TableProps {
     setSelectedUser: (user: User) => void;
     onDelete: (user: User) => void;
     emailAsUsername?: boolean;
+    disableDelete?: boolean;
 }
-declare const UsersTable: ({ users, selectedUser, setSelectedUser, onDelete, emailAsUsername, }: TableProps) => React.JSX.Element;
+declare const UsersTable: ({ users, selectedUser, setSelectedUser, onDelete, emailAsUsername, disableDelete, }: TableProps) => React.JSX.Element;
 export default UsersTable;
 //# sourceMappingURL=UsersTable.d.ts.map

package/lib/components/users/UsersTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UsersTable.d.ts","sourceRoot":"","sources":["../../../src/components/users/UsersTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAuBzC,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,QAAA,MAAM,UAAU,GAAI,sEAMjB,UAAU,sBAsEZ,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"UsersTable.d.ts","sourceRoot":"","sources":["../../../src/components/users/UsersTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAuBzC,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,UAAU,GAAI,qFAOjB,UAAU,sBAwEZ,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/users/UsersTable.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { isStringTranslation, useLocale } from '@deix/rossini-core';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, useTheme, } from '@mui/material';
+import { useState } from 'react';
+import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
+const usersTableColumns = [
+    {
+        id: 'firstName',
+        label: { en: 'First Name', it: 'Nome' },
+    },
+    {
+        id: 'lastName',
+        label: { en: 'Last Name', it: 'Cognome' },
+    },
+    {
+        id: 'username',
+        label: { en: 'Username', it: 'Username' },
+    },
+    { id: 'email', label: 'Email' },
+    {
+        id: 'enabled',
+        label: { en: 'Enabled', it: 'Utente Abilitato' },
+    },
+];
+const UsersTable = ({ users = [], selectedUser, setSelectedUser, onDelete, emailAsUsername = false, disableDelete = false, }) => {
+    const locale = useLocale();
+    const muiTheme = useTheme();
+    const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
+    const [deleteUser, setDeleteUser] = useState();
+    return (<>
+      <TableContainer>
+        <Table size='small'>
+          <TableHead>
+            <TableRow>
+              {usersTableColumns
+            .filter((c) => c.id !== 'username' || !emailAsUsername)
+            .map((col) => (<TableCell key={col.id} align={col.align || 'inherit'}>
+                    {isStringTranslation(col.label)
+                ? col.label[locale]
+                : col.label}
+                  </TableCell>))}
+              <TableCell padding='none'>{''}</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {users.map((user, rowIdx) => (<TableRow key={rowIdx} onClick={() => setSelectedUser(user)} sx={{
+                cursor: 'pointer',
+                background: selectedUser && user.id === selectedUser.id
+                    ? muiTheme.palette.primary.light
+                    : undefined,
+            }}>
+                <TableCell>{user.firstName}</TableCell>
+                <TableCell>{user.lastName}</TableCell>
+                {!emailAsUsername && <TableCell>{user.username}</TableCell>}
+                <TableCell>{user.email}</TableCell>
+                <TableCell>
+                  {user.enabled ? <CheckIcon /> : <CloseIcon />}
+                </TableCell>
+                {!disableDelete && (<TableCell padding='none' align='right'>
+                    <IconButton size='small' onClick={(evt) => {
+                    evt.stopPropagation();
+                    setOpenConfirmationDialog(true);
+                    setDeleteUser(user);
+                }}>
+                      <DeleteIcon />
+                    </IconButton>
+                  </TableCell>)}
+              </TableRow>))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <DeleteConfirmationDialog open={openConfirmationDialog} onClose={() => setOpenConfirmationDialog(false)} onConfirm={() => (deleteUser ? onDelete(deleteUser) : {})}/>
+    </>);
+};
+export default UsersTable;

package/lib/components/users/UsersTabs.jsx

@@ -0,0 +1,36 @@
+'use client';
+import React, { useState } from 'react';
+import { Box, Tab, Tabs } from '@mui/material';
+import { useLocale } from '@deix/rossini-core';
+import usersTranslations from '../../lang/users';
+import UserDetails from './UserDetails';
+import UserGroups from './UserGroups';
+import UserCredentials from './UserCredentials';
+const UserTabs = ({ user, additionalTabs = [], onUserUpdate, editUsername, emailAsUsername = false, hideGroupsSelection = false, }) => {
+    const locale = useLocale();
+    const [selectedTab, setSelectedTab] = useState('DETAILS');
+    return (<Box sx={{
+            flexGrow: 1,
+            maxWidth: '100%',
+            overflowX: 'hidden',
+            alignSelf: 'stretch',
+        }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs value={selectedTab} onChange={(_evt, newValue) => {
+            setSelectedTab(newValue);
+        }} aria-label='basic tabs example'>
+          <Tab label={usersTranslations.details[locale]} value='DETAILS'/>
+          {!hideGroupsSelection && (<Tab label={usersTranslations.userGroups[locale]} value='USER_GROUPS'/>)}
+          <Tab label={usersTranslations.credentials[locale]} value='CREDENTIALS'/>
+          {additionalTabs.map((tab, index) => (<Tab key={`tab${index}`} label={tab.title[locale]} value={`ADDITIONAL_TAB_${index}`}/>))}
+        </Tabs>
+      </Box>
+      <Box sx={{ p: 1 }}>
+        {selectedTab === 'DETAILS' && (<UserDetails user={user} onUserUpdate={onUserUpdate} editUsername={editUsername} emailAsUsername={emailAsUsername}/>)}
+        {selectedTab === 'USER_GROUPS' && !hideGroupsSelection && (<UserGroups user={user}/>)}
+        {selectedTab === 'CREDENTIALS' && <UserCredentials user={user}/>}
+        {additionalTabs.map((tab, index) => selectedTab === `ADDITIONAL_TAB_${index}` && (<tab.component key={`tab${index}`} user={user}/>))}
+      </Box>
+    </Box>);
+};
+export default UserTabs;

package/lib/config/{index.js → index.jsx}

@@ -13,6 +13,8 @@ export const getConfig = (publicRuntimeEnv) => ({
 // read at runtime
 const ConfigContext = createContext(getConfig({}));
 export const ConfigProvider = ({ publicRuntimeEnv, children, }) => {
-    return (React.createElement(ConfigContext.Provider, { value: getConfig(publicRuntimeEnv) }, children));
+    return (<ConfigContext.Provider value={getConfig(publicRuntimeEnv)}>
+      {children}
+    </ConfigContext.Provider>);
 };
 export const useConfig = () => useContext(ConfigContext);