feat(auth): add user and role management

packages/web/src/components/AccountDropdownMenu/index.tsx

@@ -4,6 +4,7 @@ import MenuItem from '@mui/material/MenuItem';
 import Menu, { MenuProps } from '@mui/material/Menu';
 import { Link } from 'react-router-dom';
 
+import Can from 'components/Can';
 import apolloClient from 'graphql/client';
 import * as URLS from 'config/urls';
 import useAuthentication from 'hooks/useAuthentication';
@@ -54,6 +55,15 @@ function AccountDropdownMenu(
         {formatMessage('accountDropdownMenu.settings')}
       </MenuItem>
 
+      <Can I="read" a="User">
+        <MenuItem
+          component={Link}
+          to={URLS.ADMIN_SETTINGS_DASHBOARD}
+        >
+          {formatMessage('accountDropdownMenu.adminSettings')}
+        </MenuItem>
+      </Can>
+
       <MenuItem onClick={logout} data-test="logout-item">
         {formatMessage('accountDropdownMenu.logout')}
       </MenuItem>

packages/web/src/components/AddAppConnection/index.tsx

@@ -12,7 +12,7 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import computeAuthStepVariables from 'helpers/computeAuthStepVariables';
 import { processStep } from 'helpers/authenticationSteps';
 import InputCreator from 'components/InputCreator';
-import { generateExternalLink } from '../../helpers/translation-values';
+import { generateExternalLink } from '../../helpers/translationValues';
 import { Form } from './style';
 
 type AddAppConnectionProps = {

packages/web/src/components/AdminSettingsLayout/index.tsx

@@ -0,0 +1,92 @@
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+import GroupIcon from '@mui/icons-material/Group';
+import GroupsIcon from '@mui/icons-material/Groups';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import * as React from 'react';
+
+import { SvgIconComponent } from '@mui/icons-material';
+import AppBar from 'components/AppBar';
+import Drawer from 'components/Drawer';
+import * as URLS from 'config/urls';
+import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
+
+type SettingsLayoutProps = {
+  children: React.ReactNode;
+};
+
+type DrawerLink = {
+  Icon: SvgIconComponent,
+  primary: string,
+  to: string,
+}
+
+function createDrawerLinks({ canReadRole, canReadUser }: { canReadRole: boolean; canReadUser: boolean;  }) {
+  const items = [
+      canReadUser ? {
+        Icon: GroupIcon,
+        primary: 'adminSettingsDrawer.users',
+        to: URLS.USERS,
+      } : null,
+      canReadRole ? {
+        Icon: GroupsIcon,
+        primary: 'adminSettingsDrawer.roles',
+        to: URLS.ROLES,
+      } : null
+    ]
+    .filter(Boolean) as DrawerLink[];
+
+  return items;
+}
+
+const drawerBottomLinks = [
+  {
+    Icon: ArrowBackIosNewIcon,
+    primary: 'adminSettingsDrawer.goBack',
+    to: '/',
+  },
+];
+
+export default function SettingsLayout({
+  children,
+}: SettingsLayoutProps): React.ReactElement {
+  const theme = useTheme();
+  const currentUserAbility = useCurrentUserAbility();
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));
+  const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
+
+  const openDrawer = () => setDrawerOpen(true);
+  const closeDrawer = () => setDrawerOpen(false);
+  const drawerLinks = createDrawerLinks({
+    canReadUser: currentUserAbility.can('read', 'User'),
+    canReadRole: currentUserAbility.can('read', 'Role'),
+  });
+
+  return (
+    <>
+      <AppBar
+        drawerOpen={isDrawerOpen}
+        onDrawerOpen={openDrawer}
+        onDrawerClose={closeDrawer}
+      />
+
+      <Box sx={{ display: 'flex' }}>
+        <Drawer
+          links={drawerLinks}
+          bottomLinks={drawerBottomLinks}
+          open={isDrawerOpen}
+          onOpen={openDrawer}
+          onClose={closeDrawer}
+        />
+
+        <Box sx={{ flex: 1 }}>
+          <Toolbar />
+
+          {children}
+        </Box>
+      </Box>
+    </>
+  );
+}

packages/web/src/components/Can/index.tsx

@@ -0,0 +1,22 @@
+import { Can as OriginalCan } from '@casl/react';
+import * as React from 'react';
+
+import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
+
+type CanProps = {
+  I: string;
+  a: string;
+  passThrough?: boolean;
+  children: React.ReactNode | ((isAllowed: boolean) => React.ReactNode);
+} | {
+  I: string;
+  an: string;
+  passThrough?: boolean;
+  children: React.ReactNode | ((isAllowed: boolean) => React.ReactNode);
+};
+
+export default function Can(props: CanProps) {
+  const currentUserAbility = useCurrentUserAbility();
+
+  return (<OriginalCan ability={currentUserAbility} {...props} />);
+};

packages/web/src/components/ConditionalIconButton/index.tsx

@@ -19,6 +19,8 @@ export default function ConditionalIconButton(props: any): React.ReactElement {
         type={buttonProps.type}
         size={buttonProps.size}
         component={buttonProps.component}
+        to={buttonProps.to}
+        disabled={buttonProps.disabled}
       >
         {icon}
       </IconButton>

packages/web/src/components/ConditionalIconButton/style.ts

@@ -2,7 +2,7 @@ import { styled } from '@mui/material/styles';
 import MuiIconButton, { iconButtonClasses } from '@mui/material/IconButton';
 
 export const IconButton = styled(MuiIconButton)`
-  &.${iconButtonClasses.colorPrimary} {
+  &.${iconButtonClasses.colorPrimary}:not(.${iconButtonClasses.disabled}) {
     background: ${({ theme }) => theme.palette.primary.main};
     color: ${({ theme }) => theme.palette.primary.contrastText};
 

packages/web/src/components/ConfirmationDialog/index.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+type ConfirmationDialogProps = {
+  onClose: () => void;
+  onConfirm: () => void;
+  title: React.ReactNode;
+  description: React.ReactNode;
+  cancelButtonChildren: React.ReactNode;
+  confirmButtionChildren: React.ReactNode;
+  open?: boolean;
+}
+
+export default function ConfirmationDialog(props: ConfirmationDialogProps) {
+  const {
+    onClose,
+    onConfirm,
+    title,
+    description,
+    cancelButtonChildren,
+    confirmButtionChildren,
+    open = true,
+  } = props;
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      {title && (
+        <DialogTitle>
+          {title}
+        </DialogTitle>
+      )}
+      {description && (
+        <DialogContent>
+          <DialogContentText>
+            {description}
+          </DialogContentText>
+        </DialogContent>
+      )}
+
+      <DialogActions>
+        {(cancelButtonChildren && onClose) && (
+          <Button onClick={onClose}>{cancelButtonChildren}</Button>
+        )}
+
+        {(confirmButtionChildren && onConfirm) && (
+          <Button onClick={onConfirm} color="error">
+            {confirmButtionChildren}
+          </Button>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+}

packages/web/src/components/ControlledCheckbox/index.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
+
+type ControlledCheckboxProps = {
+  name: string;
+} & CheckboxProps;
+
+export default function ControlledCheckbox(props: ControlledCheckboxProps): React.ReactElement {
+  const { control } = useFormContext();
+  const {
+    required,
+    name,
+    defaultValue = false,
+    disabled = false,
+    onBlur,
+    onChange,
+    ...checkboxProps
+  } = props;
+
+  return (
+    <Controller
+      rules={{ required }}
+      name={name}
+      defaultValue={defaultValue}
+      control={control}
+      render={({
+        field: {
+          ref,
+          onChange: controllerOnChange,
+          onBlur: controllerOnBlur,
+          value,
+          name,
+          ...field
+        },
+      }) => {
+       return (
+        <Checkbox
+          {...checkboxProps}
+          {...field}
+          checked={!!value}
+          name={name}
+          disabled={disabled}
+          onChange={(...args) => {
+            controllerOnChange(...args);
+            onChange?.(...args);
+          }}
+          onBlur={(...args) => {
+            controllerOnBlur();
+            onBlur?.(...args);
+          }}
+          inputRef={ref}
+        />
+      )}}
+    />
+  );
+}

packages/web/src/components/DeleteAccountDialog/index.ee.tsx

@@ -1,16 +1,11 @@
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useMutation } from '@apollo/client';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
 
 import * as URLS from 'config/urls';
+import ConfirmationDialog from 'components/ConfirmationDialog';
 import apolloClient from 'graphql/client';
-import { DELETE_USER } from 'graphql/mutations/delete-user.ee';
+import { DELETE_CURRENT_USER } from 'graphql/mutations/delete-current-user.ee';
 import useAuthentication from 'hooks/useAuthentication';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCurrentUser from 'hooks/useCurrentUser';
@@ -20,37 +15,29 @@ type DeleteAccountDialogProps = {
 }
 
 export default function DeleteAccountDialog(props: DeleteAccountDialogProps) {
-  const [deleteUser] = useMutation(DELETE_USER);
+  const [deleteCurrentUser] = useMutation(DELETE_CURRENT_USER);
   const formatMessage = useFormatMessage();
   const currentUser = useCurrentUser();
   const authentication = useAuthentication();
   const navigate = useNavigate();
 
   const handleConfirm = React.useCallback(async () => {
-    await deleteUser();
+    await deleteCurrentUser();
 
     authentication.updateToken('');
     await apolloClient.clearStore();
 
     navigate(URLS.LOGIN);
-  }, [deleteUser, currentUser]);
+  }, [deleteCurrentUser, currentUser]);
 
   return (
-    <Dialog open onClose={props.onClose}>
-      <DialogTitle >
-        {formatMessage('deleteAccountDialog.title')}
-      </DialogTitle>
-      <DialogContent>
-        <DialogContentText id="alert-dialog-description">
-          {formatMessage('deleteAccountDialog.description')}
-        </DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={props.onClose}>{formatMessage('deleteAccountDialog.cancel')}</Button>
-        <Button onClick={handleConfirm} color="error">
-          {formatMessage('deleteAccountDialog.confirm')}
-        </Button>
-      </DialogActions>
-    </Dialog>
+    <ConfirmationDialog
+      title={formatMessage('deleteAccountDialog.title')}
+      description={formatMessage('deleteAccountDialog.description')}
+      onClose={props.onClose}
+      onConfirm={handleConfirm}
+      cancelButtonChildren={formatMessage('deleteAccountDialog.cancel')}
+      confirmButtionChildren={formatMessage('deleteAccountDialog.confirm')}
+    />
   );
 }

packages/web/src/components/DeleteRoleButton/index.ee.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { useMutation } from '@apollo/client';
+import IconButton from '@mui/material/IconButton';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+import Can from 'components/Can';
+import ConfirmationDialog from 'components/ConfirmationDialog';
+import { DELETE_ROLE } from 'graphql/mutations/delete-role.ee';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+type DeleteRoleButtonProps = {
+  disabled?: boolean;
+  roleId: string;
+}
+
+export default function DeleteRoleButton(props: DeleteRoleButtonProps) {
+  const { disabled, roleId } = props;
+  const [showConfirmation, setShowConfirmation] = React.useState(false);
+  const [deleteRole] = useMutation(DELETE_ROLE, {
+    variables: { input: { id: roleId } },
+    refetchQueries: ['GetRoles'],
+  });
+  const formatMessage = useFormatMessage();
+
+  const handleConfirm = React.useCallback(async () => {
+    await deleteRole();
+
+    setShowConfirmation(false);
+  }, [deleteRole]);
+
+  return (
+    <>
+      <Can I="delete" a="Role" passThrough>
+        {allowed => (
+          <IconButton
+            disabled={!allowed || disabled}
+            onClick={() => setShowConfirmation(true)}
+            size="small"
+          >
+            <DeleteIcon />
+          </IconButton>
+        )}
+      </Can>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        title={formatMessage('deleteRoleButton.title')}
+        description={formatMessage('deleteRoleButton.description')}
+        onClose={() => setShowConfirmation(false)}
+        onConfirm={handleConfirm}
+        cancelButtonChildren={formatMessage('deleteRoleButton.cancel')}
+        confirmButtionChildren={formatMessage('deleteRoleButton.confirm')}
+      />
+    </>
+  );
+}

packages/web/src/components/DeleteUserButton/index.ee.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { useMutation } from '@apollo/client';
+import IconButton from '@mui/material/IconButton';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+import ConfirmationDialog from 'components/ConfirmationDialog';
+import { DELETE_USER } from 'graphql/mutations/delete-user.ee';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+type DeleteUserButtonProps = {
+  userId: string;
+}
+
+export default function DeleteUserButton(props: DeleteUserButtonProps) {
+  const { userId } = props;
+  const [showConfirmation, setShowConfirmation] = React.useState(false);
+  const [deleteUser] = useMutation(DELETE_USER, {
+    variables: { input: { id: userId } },
+    refetchQueries: ['GetUsers'],
+  });
+  const formatMessage = useFormatMessage();
+
+  const handleConfirm = React.useCallback(async () => {
+    await deleteUser();
+
+    setShowConfirmation(false);
+  }, [deleteUser]);
+
+  return (
+    <>
+      <IconButton onClick={() => setShowConfirmation(true)} size="small">
+        <DeleteIcon />
+      </IconButton>
+
+      <ConfirmationDialog
+        open={showConfirmation}
+        title={formatMessage('deleteUserButton.title')}
+        description={formatMessage('deleteUserButton.description')}
+        onClose={() => setShowConfirmation(false)}
+        onConfirm={handleConfirm}
+        cancelButtonChildren={formatMessage('deleteUserButton.cancel')}
+        confirmButtionChildren={formatMessage('deleteUserButton.confirm')}
+      />
+    </>
+  );
+}

packages/web/src/components/FlowContextMenu/index.tsx

@@ -6,6 +6,7 @@ import type { PopoverProps } from '@mui/material/Popover';
 import MenuItem from '@mui/material/MenuItem';
 import { useSnackbar } from 'notistack';
 
+import Can from 'components/Can';
 import { DELETE_FLOW } from 'graphql/mutations/delete-flow';
 import { DUPLICATE_FLOW } from 'graphql/mutations/duplicate-flow';
 import * as URLS from 'config/urls';
@@ -72,13 +73,39 @@ export default function ContextMenu(
       hideBackdrop={false}
       anchorEl={anchorEl}
     >
-      <MenuItem component={Link} to={URLS.FLOW(flowId)}>
-        {formatMessage('flow.view')}
-      </MenuItem>
+      <Can I="read" a="Flow" passThrough>
+        {(allowed) => (
+          <MenuItem
+            disabled={!allowed}
+            component={Link}
+            to={URLS.FLOW(flowId)}
+          >
+            {formatMessage('flow.view')}
+          </MenuItem>
+        )}
+      </Can>
 
-      <MenuItem onClick={onFlowDuplicate}>{formatMessage('flow.duplicate')}</MenuItem>
+      <Can I="create" a="Flow" passThrough>
+        {(allowed) => (
+          <MenuItem
+            disabled={!allowed}
+            onClick={onFlowDuplicate}
+          >
+            {formatMessage('flow.duplicate')}
+          </MenuItem>
+        )}
+      </Can>
 
-      <MenuItem onClick={onFlowDelete}>{formatMessage('flow.delete')}</MenuItem>
+      <Can I="delete" a="Flow" passThrough>
+        {(allowed) => (
+          <MenuItem
+            disabled={!allowed}
+            onClick={onFlowDelete}
+          >
+            {formatMessage('flow.delete')}
+          </MenuItem>
+        )}
+      </Can>
     </Menu>
   );
 }

packages/web/src/components/PermissionCatalogField/PermissionSettings.ee.tsx

@@ -0,0 +1,142 @@
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Typography from '@mui/material/Typography';
+import * as React from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { IPermissionCatalog } from '@automatisch/types';
+import ControlledCheckbox from 'components/ControlledCheckbox';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+type PermissionSettingsProps = {
+  onClose: () => void;
+  fieldPrefix: string;
+  subject: string;
+  actions: IPermissionCatalog['actions'];
+  conditions: IPermissionCatalog['conditions'];
+}
+
+export default function PermissionSettings(props: PermissionSettingsProps) {
+  const {
+    onClose,
+    fieldPrefix,
+    subject,
+    actions,
+    conditions,
+  } = props;
+
+  const formatMessage = useFormatMessage();
+  const { getValues, resetField } = useFormContext();
+
+  const cancel = () => {
+    for (const action of actions) {
+      for (const condition of conditions) {
+        const fieldName = `${fieldPrefix}.${action.key}.conditions.${condition.key}`;
+        resetField(fieldName);
+      }
+    }
+
+    onClose();
+  }
+
+  const apply = () => {
+    for (const action of actions) {
+      for (const condition of conditions) {
+        const fieldName = `${fieldPrefix}.${action.key}.conditions.${condition.key}`;
+        const value = getValues(fieldName);
+        resetField(fieldName, { defaultValue: value });
+      }
+    }
+
+    onClose();
+  }
+
+  return (
+    <Dialog open onClose={cancel}>
+      <DialogTitle>
+        {formatMessage('permissionSettings.title')}
+      </DialogTitle>
+
+      <DialogContent>
+        <TableContainer component={Paper}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell component="th" />
+
+                {actions.map(action => (
+                  <TableCell component="th" key={action.key}>
+                    <Typography
+                      variant="subtitle1"
+                      align="center"
+                      sx={{
+                        color: 'text.secondary',
+                        fontWeight: 700
+                      }}
+                    >
+                      {action.label}
+                    </Typography>
+                  </TableCell>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {conditions.map((condition) => (
+                <TableRow
+                  key={condition.key}
+                  sx={{ '&:last-child td': { border: 0 } }}
+                >
+                  <TableCell scope="row">
+                    <Typography
+                      variant="subtitle2"
+                    >
+                      {condition.label}
+                    </Typography>
+                  </TableCell>
+
+                  {actions.map((action) => (
+                    <TableCell
+                      key={`${action.key}.${condition.key}`}
+                      align="center"
+                    >
+                      <Typography
+                        variant="subtitle2"
+                      >
+                        {action.subjects.includes(subject) && (
+                          <ControlledCheckbox
+                            name={`${fieldPrefix}.${action.key}.conditions.${condition.key}`}
+                            disabled={getValues(`${fieldPrefix}.${action.key}.value`) !== true}
+                          />
+                        )}
+
+                        {!action.subjects.includes(subject) && '-'}
+                      </Typography>
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={cancel}>{formatMessage('permissionSettings.cancel')}</Button>
+
+        <Button onClick={apply} color="error">
+          {formatMessage('permissionSettings.apply')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

packages/web/src/components/PermissionCatalogField/index.ee.tsx

@@ -0,0 +1,122 @@
+import SettingsIcon from '@mui/icons-material/Settings';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Typography from '@mui/material/Typography';
+import * as React from 'react';
+
+import ControlledCheckbox from 'components/ControlledCheckbox';
+import usePermissionCatalog from 'hooks/usePermissionCatalog.ee';
+import PermissionSettings from './PermissionSettings.ee';
+
+type PermissionCatalogFieldProps = {
+  name?: string;
+  disabled?: boolean;
+};
+
+const PermissionCatalogField = ({ name = 'permissions', disabled = false }: PermissionCatalogFieldProps) => {
+  const permissionCatalog = usePermissionCatalog();
+  const [dialogName, setDialogName] = React.useState<string>();
+
+  if (!permissionCatalog) return (<React.Fragment />);
+
+  return (
+    <TableContainer component={Paper}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell component="th" />
+
+            {permissionCatalog.actions.map(action => (
+              <TableCell component="th" key={action.key}>
+                <Typography
+                  variant="subtitle1"
+                  align="center"
+                  sx={{
+                    color: 'text.secondary',
+                    fontWeight: 700
+                  }}
+                >
+                  {action.label}
+                </Typography>
+              </TableCell>
+            ))}
+
+            <TableCell component="th" />
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {permissionCatalog.subjects.map((subject) => (
+            <TableRow
+              key={subject.key}
+              sx={{ '&:last-child td': { border: 0 } }}
+            >
+              <TableCell scope="row">
+                <Typography
+                  variant="subtitle2"
+                >
+                  {subject.label}
+                </Typography>
+              </TableCell>
+
+              {permissionCatalog.actions.map((action) => (
+                <TableCell
+                  key={`${subject.key}.${action.key}`}
+                  align="center"
+                >
+                  <Typography
+                    variant="subtitle2"
+                  >
+                    {action.subjects.includes(subject.key) && (
+                      <ControlledCheckbox
+                        disabled={disabled}
+                        name={`${name}.${subject.key}.${action.key}.value`}
+                      />
+                    )}
+
+                    {!action.subjects.includes(subject.key) && '-'}
+                  </Typography>
+                </TableCell>
+              ))}
+
+              <TableCell>
+                <Stack
+                  direction="row"
+                  gap={1}
+                  justifyContent="right"
+                >
+                  <IconButton
+                    color="info"
+                    size="small"
+                    onClick={() => setDialogName(subject.key)}
+                    disabled={disabled}
+                  >
+                    <SettingsIcon />
+                  </IconButton>
+
+                  {dialogName === subject.key && (
+                    <PermissionSettings
+                      onClose={() => setDialogName('')}
+                      fieldPrefix={`${name}.${subject.key}`}
+                      subject={subject.key}
+                      actions={permissionCatalog.actions}
+                      conditions={permissionCatalog.conditions}
+                    />
+                  )}
+                </Stack>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+};
+
+export default PermissionCatalogField;

packages/web/src/components/RoleList/index.ee.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import Stack from '@mui/material/Stack';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import EditIcon from '@mui/icons-material/Edit';
+
+import DeleteRoleButton from 'components/DeleteRoleButton/index.ee';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useRoles from 'hooks/useRoles.ee';
+import * as URLS from 'config/urls';
+
+// TODO: introduce interaction feedback upon deletion (successful + failure)
+// TODO: introduce loading bar
+export default function RoleList(): React.ReactElement {
+  const formatMessage = useFormatMessage();
+  const { roles } = useRoles();
+
+  return (
+    <TableContainer component={Paper}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell component="th">
+              <Typography
+                variant="subtitle1"
+                sx={{ color: 'text.secondary', fontWeight: 700 }}
+              >
+                {formatMessage('roleList.name')}
+              </Typography>
+            </TableCell>
+
+            <TableCell component="th">
+              <Typography
+                variant="subtitle1"
+                sx={{ color: 'text.secondary', fontWeight: 700 }}
+              >
+                {formatMessage('roleList.description')}
+              </Typography>
+            </TableCell>
+
+            <TableCell component="th" />
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {roles.map((role) => (
+            <TableRow
+              key={role.id}
+              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+            >
+              <TableCell scope="row">
+                <Typography
+                  variant="subtitle2"
+                >
+                  {role.name}
+                </Typography>
+              </TableCell>
+
+              <TableCell scope="row">
+                <Typography
+                  variant="subtitle2"
+                >
+                  {role.description}
+                </Typography>
+              </TableCell>
+
+              <TableCell>
+                <Stack direction="row" gap={1} justifyContent="right">
+                  <IconButton
+                    size="small"
+                    component={Link}
+                    to={URLS.ROLE(role.id)}
+                  >
+                    <EditIcon />
+                  </IconButton>
+
+                  <DeleteRoleButton
+                    disabled={role.isAdmin}
+                    roleId={role.id}
+                  />
+                </Stack>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

packages/web/src/components/SignUpForm/index.ee.tsx

@@ -9,7 +9,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 
 import useAuthentication from 'hooks/useAuthentication';
 import * as URLS from 'config/urls';
-import { CREATE_USER } from 'graphql/mutations/create-user.ee';
+import { REGISTER_USER } from 'graphql/mutations/register-user.ee';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
 import { LOGIN } from 'graphql/mutations/login';
@@ -40,7 +40,7 @@ function SignUpForm() {
   const navigate = useNavigate();
   const authentication = useAuthentication();
   const formatMessage = useFormatMessage();
-  const [createUser, { loading: createUserLoading }] = useMutation(CREATE_USER);
+  const [registerUser, { loading: registerUserLoading }] = useMutation(REGISTER_USER);
   const [login, { loading: loginLoading }] = useMutation(LOGIN);
 
   React.useEffect(() => {
@@ -51,7 +51,7 @@ function SignUpForm() {
 
   const handleSubmit = async (values: any) => {
     const { fullName, email, password } = values;
-    await createUser({
+    await registerUser({
       variables: {
         input: { fullName, email, password },
       },
@@ -165,7 +165,7 @@ function SignUpForm() {
               variant="contained"
               color="primary"
               sx={{ boxShadow: 2, mt: 3 }}
-              loading={createUserLoading || loginLoading}
+              loading={registerUserLoading || loginLoading}
               fullWidth
               data-test="signUp-button"
             >

packages/web/src/components/SsoProviders/index.ee.tsx

@@ -4,7 +4,7 @@ import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 import Divider from '@mui/material/Divider';
 
-import appConfig from 'config/app';
+import * as URLS from 'config/urls';
 import useSamlAuthProviders from 'hooks/useSamlAuthProviders.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 
@@ -24,10 +24,12 @@ function SsoProviders() {
             <Button
               key={provider.id}
               component="a"
-              href={`${appConfig.apiUrl}/login/saml/${provider.issuer}`}
+              href={URLS.SSO_LOGIN(provider.issuer)}
               variant="outlined"
             >
-              {provider.name}
+              {formatMessage('ssoProviders.loginWithProvider', {
+                providerName: provider.name
+              })}
             </Button>
           ))}
         </Stack>

packages/web/src/components/TrialOverAlert/index.ee.tsx

@@ -3,7 +3,7 @@ import Alert from '@mui/material/Alert';
 import Typography from '@mui/material/Typography';
 
 import * as URLS from 'config/urls';
-import { generateInternalLink } from 'helpers/translation-values';
+import { generateInternalLink } from 'helpers/translationValues';
 import useTrialStatus from 'hooks/useTrialStatus.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 

packages/web/src/components/UpgradeFreeTrial/index.ee.tsx

@@ -58,7 +58,7 @@ export default function UpgradeFreeTrial() {
             alignItems="stretch"
           >
             <TableContainer component={Paper}>
-              <Table aria-label="simple table">
+              <Table>
                 <TableHead
                   sx={{
                     backgroundColor: (theme) =>

packages/web/src/components/UserList/index.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import Stack from '@mui/material/Stack';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import EditIcon from '@mui/icons-material/Edit';
+
+import DeleteUserButton from 'components/DeleteUserButton/index.ee';
+import useUsers from 'hooks/useUsers';
+import useFormatMessage from 'hooks/useFormatMessage';
+import * as URLS from 'config/urls';
+
+// TODO: introduce interaction feedback upon deletion (successful + failure)
+// TODO: introduce loading bar
+export default function UserList(): React.ReactElement {
+  const formatMessage = useFormatMessage();
+  const { users, loading } = useUsers();
+
+  return (
+    <TableContainer component={Paper}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell component="th">
+              <Typography
+                variant="subtitle1"
+                sx={{ color: 'text.secondary', fontWeight: 700 }}
+              >
+                {formatMessage('userList.fullName')}
+              </Typography>
+            </TableCell>
+
+            <TableCell component="th">
+              <Typography
+                variant="subtitle1"
+                sx={{ color: 'text.secondary', fontWeight: 700 }}
+              >
+                {formatMessage('userList.email')}
+              </Typography>
+            </TableCell>
+
+            <TableCell component="th" />
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {users.map((user) => (
+            <TableRow
+              key={user.id}
+              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+            >
+              <TableCell scope="row">
+                <Typography
+                  variant="subtitle2"
+                >
+                  {user.fullName}
+                </Typography>
+              </TableCell>
+
+              <TableCell>
+                <Typography
+                  variant="subtitle2"
+                >
+                  {user.email}
+                </Typography>
+              </TableCell>
+
+              <TableCell>
+                <Stack direction="row" gap={1} justifyContent="right">
+                  <IconButton
+                    size="small"
+                    component={Link}
+                    to={URLS.USER(user.id)}
+                  >
+                    <EditIcon />
+                  </IconButton>
+
+                  <DeleteUserButton userId={user.id} />
+                </Stack>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

packages/web/src/components/WebhookUrlInfo/index.tsx

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import Typography from '@mui/material/Typography';
 import type { AlertProps } from '@mui/material/Alert';
 
-import { generateExternalLink } from '../../helpers/translation-values';
+import { generateExternalLink } from '../../helpers/translationValues';
 import { WEBHOOK_DOCS } from '../../config/urls';
 import TextField from '../TextField';
 import { Alert } from './style';

packages/web/src/components/WebhookUrlInfo/style.ts

@@ -1,7 +1,7 @@
 import { styled } from '@mui/material/styles';
 import MuiAlert, { alertClasses } from '@mui/material/Alert';
 
-export const Alert = styled(MuiAlert)(({ theme }) => ({
+export const Alert = styled(MuiAlert)(() => ({
   [`&.${alertClasses.root}`]: {
     fontWeight: 300,
     width: '100%',