@deix/rossini-identity-management 0.1.0 → 0.1.1

package/lib/components/users/{UserCredentials.js → UserCredentials.jsx}

@@ -1,17 +1,19 @@
 import React from 'react';
-import { useAPI, useLocale } from '@deix/rossini-core';
+import { useLocale } from '@deix/rossini-core';
 import { Box, Button } from '@mui/material';
 import usersTranslations from '../../lang/users';
 import { useSendUpdatePasswordEmail } from '../../utils/hooks/users';
-import { useConfig } from '../../config';
 import { useQueryClient } from '@tanstack/react-query';
+import { useAPIClient } from '../../utils/hooks/useAPIClient';
 const UserCredentials = ({ user }) => {
     const locale = useLocale();
-    const config = useConfig();
-    const apiClient = useAPI(config.generalProperties.apiURL);
+    const apiClient = useAPIClient();
     const queryClient = useQueryClient();
     const { mutate: sendResetPasswordEmail } = useSendUpdatePasswordEmail(queryClient, apiClient);
-    return (React.createElement(Box, { sx: { mt: 2 } },
-        React.createElement(Button, { variant: 'contained', onClick: () => sendResetPasswordEmail(user.id) }, usersTranslations.sendResetPasswordEmail[locale])));
+    return (<Box sx={{ mt: 2 }}>
+      <Button variant='contained' onClick={() => sendResetPasswordEmail(user.id)}>
+        {usersTranslations.sendResetPasswordEmail[locale]}
+      </Button>
+    </Box>);
 };
 export default UserCredentials;

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

@@ -1 +1 @@
-{"version":3,"file":"UserDetails.d.ts","sourceRoot":"","sources":["../../../src/components/users/UserDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAIzC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,QAAA,MAAM,WAAW,aAAc,gBAAgB,sBAoB9C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"UserDetails.d.ts","sourceRoot":"","sources":["../../../src/components/users/UserDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAKzC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,QAAA,MAAM,WAAW,aAAc,gBAAgB,sBAmB9C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/users/{UserDetails.js → UserDetails.jsx}

@@ -1,18 +1,17 @@
 import React from 'react';
-import { useAPI } from '@deix/rossini-core';
 import { useQueryClient } from '@tanstack/react-query';
-import { useConfig } from '../../config';
 import { useUpdateUser } from '../../utils/hooks/users';
 import UserForm from './UserForm';
+import { useAPIClient } from '../../utils/hooks/useAPIClient';
 const UserDetails = ({ user }) => {
-    const config = useConfig();
-    const apiClient = useAPI(config.generalProperties.apiURL);
+    const apiClient = useAPIClient();
     const queryClient = useQueryClient();
     const { mutate: updateUser } = useUpdateUser(queryClient, apiClient);
     const handleUpdate = (user) => {
         updateUser(user);
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(UserForm, { mode: 'modify', user: user, onSave: handleUpdate, onCancel: () => { } })));
+    return (<>
+      <UserForm mode='modify' user={user} onSave={handleUpdate} onCancel={() => { }}/>
+    </>);
 };
 export default UserDetails;

package/lib/components/users/UserForm.jsx

@@ -0,0 +1,75 @@
+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', }) => {
+    const locale = useLocale();
+    const { control, 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);
+            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'>
+        <Grid item xs={12}>
+          <Controller name='username' control={control} render={({ field }) => (<TextField size='small' fullWidth label={usersTranslations.username[locale]} disabled={mode === 'modify'} sx={{ flexShrink: 0 }} {...field}/>)}/>
+        </Grid>
+        <Grid item xs={12}>
+          <Controller name='firstName' control={control} render={({ field }) => (<TextField size='small' fullWidth label={usersTranslations.firstName[locale]} sx={{ flexShrink: 0 }} {...field}/>)}/>
+        </Grid>
+        <Grid item xs={12}>
+          <Controller name='lastName' control={control} render={({ field }) => (<TextField size='small' fullWidth label={usersTranslations.lastName[locale]} sx={{ flexShrink: 0 }} {...field}/>)}/>
+        </Grid>
+        <Grid item xs={12}>
+          <Controller name='email' control={control} render={({ field }) => (<TextField size='small' fullWidth label={usersTranslations.email[locale]} sx={{ flexShrink: 0 }} {...field}/>)}/>
+        </Grid>
+        <Grid item 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 item 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 item 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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserGroups.d.ts","sourceRoot":"","sources":["../../../src/components/users/UserGroups.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAsBzC,UAAU,eAAe;IACvB,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,QAAA,MAAM,UAAU,aAAc,eAAe,sBA6F5C,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"UserGroups.d.ts","sourceRoot":"","sources":["../../../src/components/users/UserGroups.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAsBzC,UAAU,eAAe;IACvB,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,QAAA,MAAM,UAAU,aAAc,eAAe,sBA4F5C,CAAC;AAEF,eAAe,UAAU,CAAC"}

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.map

@@ -1 +1 @@
-{"version":3,"file":"Users.d.ts","sourceRoot":"","sources":["../../../src/components/users/Users.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAanD,OAAiB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEhD,UAAU,UAAU;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,EAAE,CAAC;CAC5B;AAED,QAAA,MAAM,KAAK,+BAAqC,UAAU,sBA8HzD,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;AAanD,OAAiB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAGhD,UAAU,UAAU;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,EAAE,CAAC;CAC5B;AAED,QAAA,MAAM,KAAK,+BAAqC,UAAU,sBAgIzD,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/users/{Users.js → Users.jsx}

@@ -12,6 +12,7 @@ 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 = [] }) => {
     const locale = useLocale();
     const apiClient = useAPI(apiUrl);
@@ -40,45 +41,59 @@ const Users = ({ apiUrl, additionalTabs = [] }) => {
         deleteUser(id);
         setSelectedUser(undefined);
     };
-    return (React.createElement(Box, { sx: {
+    return (<APIClientProvider baseURL={apiUrl}>
+      <Box sx={{
             flexGrow: 1,
             maxWidth: '100%',
             overflowX: 'hidden',
             paddingTop: 3,
             paddingLeft: 3,
             paddingRight: 3,
-        } },
-        !selectedUser && (React.createElement(React.Fragment, null,
-            React.createElement(Grid, { container: true, spacing: 2, sx: { marginBottom: 2 } },
-                React.createElement(Grid, { item: true },
-                    React.createElement(SearchField, { placeholder: usersTranslations.search[locale], onSearch: (value) => setSearchString(value) })),
-                React.createElement(Grid, { item: true },
-                    React.createElement(Button, { variant: 'contained', startIcon: React.createElement(PersonAddIcon, null), onClick: () => {
-                            setOpenCreateUserDialog(true);
-                            setSelectedUser(undefined);
-                        } }, usersTranslations.new[locale]))),
-            React.createElement(UsersTable, { users: filteredUsers, selectedUser: selectedUser, setSelectedUser: (user) => {
-                    setSelectedUser(user);
-                }, onDelete: handleDelete }))),
-        selectedUser && (React.createElement(Box, { sx: {
+        }}>
+        {!selectedUser && (<>
+            <Grid container spacing={2} sx={{ marginBottom: 2 }}>
+              <Grid item>
+                <SearchField placeholder={usersTranslations.search[locale]} onSearch={(value) => setSearchString(value)}/>
+              </Grid>
+              <Grid item>
+                <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}/>
+          </>)}
+        {selectedUser && (<Box sx={{
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'flex-start',
                 width: '100%',
-            } },
-            React.createElement(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                } },
-                React.createElement(IconButton, { "aria-label": 'delete', color: 'primary', onClick: () => setSelectedUser(undefined), sx: { mr: 2 } },
-                    React.createElement(ArrowBackIcon, null)),
-                React.createElement(Link, { underline: 'none', href: '#', onClick: () => setSelectedUser(undefined) }, usersTranslations.title[locale]),
-                React.createElement(KeyboardArrowRightIcon, null),
-                selectedUser.username),
-            React.createElement(UserTabs, { user: selectedUser, additionalTabs: additionalTabs }))),
-        React.createElement(CreateUserDialog, { open: openCreateUserDialog, onClose: () => {
-                setOpenCreateUserDialog(false);
-            } })));
+            }}>
+            <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}/>
+          </Box>)}
+        <CreateUserDialog open={openCreateUserDialog} onClose={() => {
+            setOpenCreateUserDialog(false);
+        }}/>
+      </Box>
+    </APIClientProvider>);
 };
 export default Users;

package/lib/components/users/UsersTable.jsx

@@ -0,0 +1,76 @@
+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, }) => {
+    const locale = useLocale();
+    const muiTheme = useTheme();
+    const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
+    const [deleteId, setDeleteId] = useState();
+    return (<>
+      <TableContainer>
+        <Table size='small'>
+          <TableHead>
+            <TableRow>
+              {usersTableColumns.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>
+                <TableCell>{user.username}</TableCell>
+                <TableCell>{user.email}</TableCell>
+                <TableCell>
+                  {user.enabled ? <CheckIcon /> : <CloseIcon />}
+                </TableCell>
+                <TableCell padding='none' align='right'>
+                  <IconButton size='small' onClick={(evt) => {
+                evt.stopPropagation();
+                setOpenConfirmationDialog(true);
+                setDeleteId(user.id);
+            }}>
+                    <DeleteIcon />
+                  </IconButton>
+                </TableCell>
+              </TableRow>))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <DeleteConfirmationDialog open={openConfirmationDialog} onClose={() => setOpenConfirmationDialog(false)} onConfirm={() => (deleteId ? onDelete(deleteId) : {})}/>
+    </>);
+};
+export default UsersTable;

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

@@ -1 +1 @@
-{"version":3,"file":"UsersTabs.d.ts","sourceRoot":"","sources":["../../../src/components/users/UsersTabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAa,MAAM,oBAAoB,CAAC;AAElE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAKzC,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,iBAAiB,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;CACpD;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,IAAI,CAAC;IACX,cAAc,CAAC,EAAE,OAAO,EAAE,CAAC;CAC5B;AAED,QAAA,MAAM,QAAQ,6BAAmC,aAAa,sBAgD7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"UsersTabs.d.ts","sourceRoot":"","sources":["../../../src/components/users/UsersTabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAa,MAAM,oBAAoB,CAAC;AAElE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAKzC,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,iBAAiB,CAAC;IACzB,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;CACpD;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,IAAI,CAAC;IACX,cAAc,CAAC,EAAE,OAAO,EAAE,CAAC;CAC5B;AAED,QAAA,MAAM,QAAQ,6BAAmC,aAAa,sBAoD7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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 = [] }) => {
+    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'/>
+          <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}/>}
+        {selectedTab === 'USER_GROUPS' && <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);