feat(auth): add user and role management

packages/web/src/adminSettingsRoutes.tsx

@@ -0,0 +1,73 @@
+import { Route, Navigate } from 'react-router-dom';
+import AdminSettingsLayout from 'components/AdminSettingsLayout';
+import Users from 'pages/Users';
+import EditUser from 'pages/EditUser';
+import CreateUser from 'pages/CreateUser';
+import Roles from 'pages/Roles/index.ee';
+import CreateRole from 'pages/CreateRole/index.ee';
+import EditRole from 'pages/EditRole/index.ee';
+
+import * as URLS from 'config/urls';
+
+export default (
+  <>
+    <Route
+      path={URLS.USERS}
+      element={
+        <AdminSettingsLayout>
+          <Users />
+        </AdminSettingsLayout>
+      }
+    />
+
+    <Route
+      path={URLS.CREATE_USER}
+      element={
+        <AdminSettingsLayout>
+          <CreateUser />
+        </AdminSettingsLayout>
+      }
+    />
+
+    <Route
+      path={URLS.USER_PATTERN}
+      element={
+        <AdminSettingsLayout>
+          <EditUser />
+        </AdminSettingsLayout>
+      }
+    />
+
+    <Route
+      path={URLS.ROLES}
+      element={
+        <AdminSettingsLayout>
+          <Roles />
+        </AdminSettingsLayout>
+      }
+    />
+
+    <Route
+      path={URLS.CREATE_ROLE}
+      element={
+        <AdminSettingsLayout>
+          <CreateRole />
+        </AdminSettingsLayout>
+      }
+    />
+
+    <Route
+      path={URLS.ROLE_PATTERN}
+      element={
+        <AdminSettingsLayout>
+          <EditRole />
+        </AdminSettingsLayout>
+      }
+    />
+
+    <Route
+      path={URLS.ADMIN_SETTINGS}
+      element={<Navigate to={URLS.USERS} replace />}
+    />
+  </>
+);

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

@@ -54,6 +54,10 @@ function AccountDropdownMenu(
         {formatMessage('accountDropdownMenu.settings')}
       </MenuItem>
 
+      <MenuItem component={Link} to={URLS.ADMIN_SETTINGS_DASHBOARD}>
+        {formatMessage('accountDropdownMenu.adminSettings')}
+      </MenuItem>
+
       <MenuItem onClick={logout} data-test="logout-item">
         {formatMessage('accountDropdownMenu.logout')}
       </MenuItem>

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

@@ -0,0 +1,81 @@
+import * as React from 'react';
+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 GroupIcon from '@mui/icons-material/Group';
+import GroupsIcon from '@mui/icons-material/Groups';
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+
+import * as URLS from 'config/urls';
+import useAutomatischInfo from 'hooks/useAutomatischInfo';
+import AppBar from 'components/AppBar';
+import Drawer from 'components/Drawer';
+
+type SettingsLayoutProps = {
+  children: React.ReactNode;
+};
+
+function createDrawerLinks({ isCloud }: { isCloud: boolean }) {
+  const items = [
+    {
+      Icon: GroupIcon,
+      primary: 'adminSettingsDrawer.users',
+      to: URLS.USERS,
+    },
+    {
+      Icon: GroupsIcon,
+      primary: 'adminSettingsDrawer.roles',
+      to: URLS.ROLES,
+    }
+  ]
+
+  return items;
+}
+
+const drawerBottomLinks = [
+  {
+    Icon: ArrowBackIosNewIcon,
+    primary: 'adminSettingsDrawer.goBack',
+    to: '/',
+  },
+];
+
+export default function SettingsLayout({
+  children,
+}: SettingsLayoutProps): React.ReactElement {
+  const { isCloud } = useAutomatischInfo();
+  const theme = useTheme();
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));
+  const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
+
+  const openDrawer = () => setDrawerOpen(true);
+  const closeDrawer = () => setDrawerOpen(false);
+  const drawerLinks = createDrawerLinks({ isCloud });
+
+  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/ConditionalIconButton/index.tsx

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

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/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,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_ROLE } from 'graphql/mutations/delete-role.ee';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+type DeleteRoleButtonProps = {
+  roleId: string;
+}
+
+export default function DeleteRoleButton(props: DeleteRoleButtonProps) {
+  const { 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 (
+    <>
+      <IconButton onClick={() => setShowConfirmation(true)} size="small">
+        <DeleteIcon />
+      </IconButton>
+
+      <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/RoleList/index.ee.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 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 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/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,94 @@
+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 translation entries
+// 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/config/urls.ts

@@ -1,7 +1,7 @@
 export const CONNECTIONS = '/connections';
 export const EXECUTIONS = '/executions';
 export const EXECUTION_PATTERN = '/executions/:executionId';
-export const EXECUTION = (executionId: string): string =>
+export const EXECUTION = (executionId: string) =>
   `/executions/${executionId}`;
 
 export const LOGIN = '/login';
@@ -12,25 +12,25 @@ export const RESET_PASSWORD = '/reset-password';
 
 export const APPS = '/apps';
 export const NEW_APP_CONNECTION = '/apps/new';
-export const APP = (appKey: string): string => `/app/${appKey}`;
+export const APP = (appKey: string) => `/app/${appKey}`;
 export const APP_PATTERN = '/app/:appKey';
-export const APP_CONNECTIONS = (appKey: string): string =>
+export const APP_CONNECTIONS = (appKey: string) =>
   `/app/${appKey}/connections`;
 export const APP_CONNECTIONS_PATTERN = '/app/:appKey/connections';
-export const APP_ADD_CONNECTION = (appKey: string): string =>
+export const APP_ADD_CONNECTION = (appKey: string) =>
   `/app/${appKey}/connections/add`;
 export const APP_ADD_CONNECTION_PATTERN = '/app/:appKey/connections/add';
 export const APP_RECONNECT_CONNECTION = (
   appKey: string,
   connectionId: string
-): string => `/app/${appKey}/connections/${connectionId}/reconnect`;
+) => `/app/${appKey}/connections/${connectionId}/reconnect`;
 export const APP_RECONNECT_CONNECTION_PATTERN =
   '/app/:appKey/connections/:connectionId/reconnect';
-export const APP_FLOWS = (appKey: string): string => `/app/${appKey}/flows`;
+export const APP_FLOWS = (appKey: string) => `/app/${appKey}/flows`;
 export const APP_FLOWS_FOR_CONNECTION = (
   appKey: string,
   connectionId: string
-): string => `/app/${appKey}/flows?connectionId=${connectionId}`;
+) => `/app/${appKey}/flows?connectionId=${connectionId}`;
 export const APP_FLOWS_PATTERN = '/app/:appKey/flows';
 
 export const EDITOR = '/editor';
@@ -55,11 +55,11 @@ export const CREATE_FLOW_WITH_APP_AND_CONNECTION = (
 
   return `/editor/create?${searchParams}`;
 };
-export const FLOW_EDITOR = (flowId: string): string => `/editor/${flowId}`;
+export const FLOW_EDITOR = (flowId: string) => `/editor/${flowId}`;
 
 export const FLOWS = '/flows';
 // TODO: revert this back to /flows/:flowId once we have a proper single flow page
-export const FLOW = (flowId: string): string => `/editor/${flowId}`;
+export const FLOW = (flowId: string) => `/editor/${flowId}`;
 export const FLOW_PATTERN = '/flows/:flowId';
 
 export const SETTINGS = '/settings';
@@ -72,6 +72,17 @@ export const SETTINGS_PROFILE = `${SETTINGS}/${PROFILE}`;
 export const SETTINGS_BILLING_AND_USAGE = `${SETTINGS}/${BILLING_AND_USAGE}`;
 export const SETTINGS_PLAN_UPGRADE = `${SETTINGS_BILLING_AND_USAGE}/${PLAN_UPGRADE}`;
 
+export const ADMIN_SETTINGS = '/admin-settings';
+export const ADMIN_SETTINGS_DASHBOARD = ADMIN_SETTINGS;
+export const USERS = `${ADMIN_SETTINGS}/users`;
+export const USER = (userId: string) => `${USERS}/${userId}`;
+export const USER_PATTERN = `${USERS}/:userId`;
+export const CREATE_USER = `${USERS}/create`;
+export const ROLES = `${ADMIN_SETTINGS}/roles`;
+export const ROLE = (roleId: string) => `${ROLES}/${roleId}`;
+export const ROLE_PATTERN = `${ROLES}/:roleId`;
+export const CREATE_ROLE = `${ROLES}/create`;
+
 export const DASHBOARD = FLOWS;
 
 // External links

packages/web/src/graphql/mutations/create-role.ee.ts

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_ROLE = gql`
+  mutation CreateRole($input: CreateRoleInput) {
+    createRole(input: $input) {
+      id
+      key
+      name
+      description
+    }
+  }
+`;

packages/web/src/graphql/mutations/create-user.ee.ts

@@ -3,8 +3,12 @@ import { gql } from '@apollo/client';
 export const CREATE_USER = gql`
   mutation CreateUser($input: CreateUserInput) {
     createUser(input: $input) {
+      id
       email
       fullName
+      role {
+        id
+      }
     }
   }
 `;

packages/web/src/graphql/mutations/delete-current-user.ee.ts

@@ -0,0 +1,7 @@
+import { gql } from '@apollo/client';
+
+export const DELETE_CURRENT_USER = gql`
+  mutation DeleteCurrentUser {
+    deleteCurrentUser
+  }
+`;

packages/web/src/graphql/mutations/delete-role.ee.ts

@@ -0,0 +1,7 @@
+import { gql } from '@apollo/client';
+
+export const DELETE_ROLE = gql`
+  mutation DeleteRole($input: DeleteRoleInput) {
+    deleteRole(input: $input)
+  }
+`;

packages/web/src/graphql/mutations/delete-user.ee.ts

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export const DELETE_USER = gql`
-  mutation DeleteUser {
-    deleteUser
+  mutation DeleteUser($input: DeleteUserInput) {
+    deleteUser(input: $input)
   }
 `;

packages/web/src/graphql/mutations/register-user.ee.ts

@@ -0,0 +1,11 @@
+import { gql } from '@apollo/client';
+
+export const REGISTER_USER = gql`
+  mutation RegisterUser($input: RegisterUserInput) {
+    registerUser(input: $input) {
+      id
+      email
+      fullName
+    }
+  }
+`;

packages/web/src/graphql/mutations/update-current-user.ts

@@ -0,0 +1,11 @@
+import { gql } from '@apollo/client';
+
+export const UPDATE_CURRENT_USER = gql`
+  mutation UpdateCurrentUser($input: UpdateCurrentUserInput) {
+    updateCurrentUser(input: $input) {
+      id
+      fullName
+      email
+    }
+  }
+`;

packages/web/src/graphql/mutations/update-role.ee.ts

@@ -0,0 +1,11 @@
+import { gql } from '@apollo/client';
+
+export const UPDATE_ROLE = gql`
+  mutation UpdateRole($input: UpdateRoleInput) {
+    updateRole(input: $input) {
+      id
+      name
+      description
+    }
+  }
+`;

packages/web/src/graphql/mutations/update-user.ee.ts

@@ -4,8 +4,8 @@ export const UPDATE_USER = gql`
   mutation UpdateUser($input: UpdateUserInput) {
     updateUser(input: $input) {
       id
-      fullName
       email
+      fullName
     }
   }
 `;

packages/web/src/graphql/queries/get-current-user.ts

@@ -6,6 +6,14 @@ export const GET_CURRENT_USER = gql`
       id
       fullName
       email
+      role {
+        isAdmin
+      }
+      permissions {
+        action
+        subject
+        conditions
+      }
     }
   }
 `;

packages/web/src/graphql/queries/get-permissions.ee.ts

@@ -0,0 +1,21 @@
+import { gql } from '@apollo/client';
+
+export const GET_PERMISSIONS = gql`
+  query GetPermissions {
+    getPermissions {
+      subjects {
+        key
+        label
+      }
+      conditions {
+        key
+        label
+      }
+      actions {
+        label
+        action
+        subjects
+      }
+    }
+  }
+`;

packages/web/src/graphql/queries/get-role.ee.ts

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+
+export const GET_ROLE = gql`
+  query GetRole($id: String!) {
+    getRole(id: $id) {
+      id
+      key
+      name
+      description
+    }
+  }
+`;

packages/web/src/graphql/queries/get-roles.ee.ts

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+
+export const GET_ROLES = gql`
+  query GetRoles {
+    getRoles {
+      id
+      key
+      name
+      description
+    }
+  }
+`;

packages/web/src/graphql/queries/get-user.ts

@@ -0,0 +1,19 @@
+import { gql } from '@apollo/client';
+
+export const GET_USER = gql`
+  query GetUser($id: String!) {
+    getUser(id: $id) {
+      id
+      fullName
+      email
+      role {
+        id
+        key
+        name
+        isAdmin
+      }
+      createdAt
+      updatedAt
+    }
+  }
+`;

packages/web/src/graphql/queries/get-users.ts

@@ -0,0 +1,29 @@
+import { gql } from '@apollo/client';
+
+export const GET_USERS = gql`
+  query GetUsers(
+    $limit: Int!
+    $offset: Int!
+  ) {
+    getUsers(
+      limit: $limit
+      offset: $offset
+    ) {
+      pageInfo {
+        currentPage
+        totalPages
+      }
+      edges {
+        node {
+          id
+          fullName
+          email
+          role {
+            id
+            name
+          }
+        }
+      }
+    }
+  }
+`;

packages/web/src/hooks/useRole.ee.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { useLazyQuery } from '@apollo/client';
+import { IRole } from '@automatisch/types';
+
+import { GET_ROLE } from 'graphql/queries/get-role.ee';
+
+type QueryResponse = {
+  getRole: IRole;
+}
+
+export default function useRole(roleId?: string) {
+  const [getRole, { data, loading }] = useLazyQuery<QueryResponse>(GET_ROLE);
+
+  React.useEffect(() => {
+    if (roleId) {
+      getRole({
+        variables: {
+          id: roleId
+        }
+      });
+    }
+  }, [roleId]);
+
+  return {
+    role: data?.getRole,
+    loading
+  };
+}

packages/web/src/hooks/useRoles.ee.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@apollo/client';
+import { IRole } from '@automatisch/types';
+
+import { GET_ROLES } from 'graphql/queries/get-roles.ee';
+
+type QueryResponse = {
+  getRoles: IRole[];
+}
+
+export default function useRoles() {
+  const { data, loading } = useQuery<QueryResponse>(GET_ROLES);
+
+  return {
+    roles: data?.getRoles || [],
+    loading
+  };
+}

packages/web/src/hooks/useUser.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { useLazyQuery } from '@apollo/client';
+import { IUser } from '@automatisch/types';
+
+import { GET_USER } from 'graphql/queries/get-user';
+
+type QueryResponse = {
+  getUser: IUser;
+}
+
+export default function useUser(userId?: string) {
+  const [getUser, { data, loading }] = useLazyQuery<QueryResponse>(GET_USER);
+
+  React.useEffect(() => {
+    if (userId) {
+      getUser({
+        variables: {
+          id: userId
+        }
+      });
+    }
+  }, [userId]);
+
+  return {
+    user: data?.getUser,
+    loading
+  };
+}

packages/web/src/hooks/useUsers.ts

@@ -0,0 +1,33 @@
+import { useQuery } from '@apollo/client';
+import { IUser } from '@automatisch/types';
+
+import { GET_USERS } from 'graphql/queries/get-users';
+
+type Edge = {
+  node: IUser
+}
+
+type QueryResponse = {
+  getUsers: {
+    pageInfo: {
+      currentPage: number;
+      totalPages: number;
+    }
+    edges: Edge[]
+  }
+}
+
+export default function useUsers() {
+  const { data, loading } = useQuery<QueryResponse>(GET_USERS, {
+    variables: {
+      limit: 100,
+      offset: 0
+    }
+  });
+  const users = data?.getUsers.edges.map(({ node }) => node) || [];
+
+  return {
+    users,
+    loading
+  };
+}

packages/web/src/locales/en.json

@@ -2,6 +2,7 @@
   "brandText": "Automatisch",
   "searchPlaceholder": "Search",
   "accountDropdownMenu.settings": "Settings",
+  "accountDropdownMenu.adminSettings": "Admin",
   "accountDropdownMenu.logout": "Logout",
   "drawer.dashboard": "Dashboard",
   "drawer.flows": "Flows",
@@ -12,6 +13,9 @@
   "settingsDrawer.goBack": "Go to the dashboard",
   "settingsDrawer.notifications": "Notifications",
   "settingsDrawer.billingAndUsage": "Billing and usage",
+  "adminSettingsDrawer.users": "Users",
+  "adminSettingsDrawer.roles": "Roles",
+  "adminSettingsDrawer.goBack": "Go to the dashboard",
   "app.connectionCount": "{count} connections",
   "app.flowCount": "{count} flows",
   "app.addConnection": "Add connection",
@@ -165,5 +169,35 @@
   "checkoutCompletedAlert.text": "Thank you for upgrading your subscription and supporting our self-funded business!",
   "subscriptionCancelledAlert.text": "Your subscription is cancelled, but you can continue using Automatisch until {date}.",
   "customAutocomplete.noOptions": "No options available.",
-  "powerInputSuggestions.noOptions": "No options available."
+  "powerInputSuggestions.noOptions": "No options available.",
+  "usersPage.title": "User management",
+  "usersPage.createUser": "Create user",
+  "deleteUserButton.title": "Delete user",
+  "deleteUserButton.description": "This will permanently delete the user and all the associated data with it.",
+  "deleteUserButton.cancel": "Cancel",
+  "deleteUserButton.confirm": "Delete",
+  "editUserPage.title": "Edit user",
+  "createUserPage.title": "Create user",
+  "userForm.fullName": "Full name",
+  "userForm.email": "Email",
+  "userForm.role": "Role",
+  "userForm.password": "Password",
+  "createUser.submit": "Create",
+  "editUser.submit": "Update",
+  "userList.fullName": "Full name",
+  "userList.email": "Email",
+  "rolesPage.title": "Role management",
+  "rolesPage.createRole": "Create role",
+  "deleteRoleButton.title": "Delete role",
+  "deleteRoleButton.description": "This will permanently delete the role.",
+  "deleteRoleButton.cancel": "Cancel",
+  "deleteRoleButton.confirm": "Delete",
+  "editRolePage.title": "Edit role",
+  "createRolePage.title": "Create role",
+  "roleForm.name": "Name",
+  "roleForm.description": "Description",
+  "createRole.submit": "Create",
+  "editRole.submit": "Update",
+  "roleList.name": "Name",
+  "roleList.description": "Description"
 }

packages/web/src/pages/CreateRole/index.ee.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useMutation } from '@apollo/client';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import LoadingButton from '@mui/lab/LoadingButton';
+import { IRole } from '@automatisch/types';
+
+import { CREATE_ROLE } from 'graphql/mutations/create-role.ee';
+import * as URLS from 'config/urls';
+import PageTitle from 'components/PageTitle';
+import Form from 'components/Form';
+import TextField from 'components/TextField';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+export default function CreateRole(): React.ReactElement {
+  const navigate = useNavigate();
+  const formatMessage = useFormatMessage();
+  const [createRole, { loading }] = useMutation(CREATE_ROLE);
+
+  const handleRoleCreation = async (roleData: Partial<IRole>) => {
+    await createRole({
+      variables: {
+        input: {
+          name: roleData.name,
+          description: roleData.description,
+        }
+      }
+    });
+
+    navigate(URLS.ROLES);
+  };
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={9} md={8} lg={6}>
+        <Grid item xs={12} sx={{ mb: [2, 5] }}>
+          <PageTitle>{formatMessage('createRolePage.title')}</PageTitle>
+        </Grid>
+
+        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
+          <Form onSubmit={handleRoleCreation}>
+            <Stack direction="column" gap={2}>
+              <TextField
+                required={true}
+                name="name"
+                label={formatMessage('roleForm.name')}
+                fullWidth
+              />
+
+              <TextField
+                required={true}
+                name="description"
+                label={formatMessage('roleForm.description')}
+                fullWidth
+              />
+
+              <LoadingButton
+                type="submit"
+                variant="contained"
+                color="primary"
+                sx={{ boxShadow: 2 }}
+                loading={loading}
+              >
+                {formatMessage('createRole.submit')}
+              </LoadingButton>
+            </Stack>
+          </Form>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}

packages/web/src/pages/CreateUser/index.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useMutation } from '@apollo/client';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import MuiTextField from '@mui/material/TextField';
+import LoadingButton from '@mui/lab/LoadingButton';
+import { IUser, IRole } from '@automatisch/types';
+
+import { CREATE_USER } from 'graphql/mutations/create-user.ee';
+import * as URLS from 'config/urls';
+import useRoles from 'hooks/useRoles.ee';
+import PageTitle from 'components/PageTitle';
+import Form from 'components/Form';
+import ControlledAutocomplete from 'components/ControlledAutocomplete';
+import TextField from 'components/TextField';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+function generateRoleOptions(roles: IRole[]) {
+  return roles?.map(({ name: label, id: value }) => ({ label, value }));
+}
+
+export default function CreateUser(): React.ReactElement {
+  const navigate = useNavigate();
+  const formatMessage = useFormatMessage();
+  const [createUser, { loading }] = useMutation(CREATE_USER);
+  const { roles, loading: rolesLoading } = useRoles();
+
+  const handleUserCreation = async (userData: Partial<IUser>) => {
+    await createUser({
+      variables: {
+        input: {
+          fullName: userData.fullName,
+          password: userData.password,
+          email: userData.email,
+          role: {
+            id: userData.role?.id
+          }
+        }
+      }
+    });
+
+    navigate(URLS.USERS);
+  };
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={9} md={8} lg={6}>
+        <Grid item xs={12} sx={{ mb: [2, 5] }}>
+          <PageTitle>{formatMessage('createUserPage.title')}</PageTitle>
+        </Grid>
+
+        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
+          <Form onSubmit={handleUserCreation}>
+            <Stack direction="column" gap={2}>
+              <TextField
+                required={true}
+                name="fullName"
+                label={formatMessage('userForm.fullName')}
+                fullWidth
+              />
+
+              <TextField
+                required={true}
+                name="email"
+                label={formatMessage('userForm.email')}
+                fullWidth
+              />
+
+              <TextField
+                required={true}
+                name="password"
+                label={formatMessage('userForm.password')}
+                type="password"
+                fullWidth
+              />
+
+              <ControlledAutocomplete
+                name="role.id"
+                fullWidth
+                disablePortal
+                disableClearable={true}
+                options={generateRoleOptions(roles)}
+                renderInput={(params) => <MuiTextField {...params} label={formatMessage('userForm.role')} />}
+                loading={rolesLoading}
+              />
+
+              <LoadingButton
+                type="submit"
+                variant="contained"
+                color="primary"
+                sx={{ boxShadow: 2 }}
+                loading={loading}
+              >
+                {formatMessage('createUser.submit')}
+              </LoadingButton>
+            </Stack>
+          </Form>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}

packages/web/src/pages/EditRole/index.ee.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+import { useMutation } from '@apollo/client';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import LoadingButton from '@mui/lab/LoadingButton';
+import { IRole } from '@automatisch/types';
+
+import { UPDATE_ROLE } from 'graphql/mutations/update-role.ee';
+import useRole from 'hooks/useRole.ee';
+import PageTitle from 'components/PageTitle';
+import Form from 'components/Form';
+import TextField from 'components/TextField';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+type EditRoleParams = {
+  roleId: string;
+}
+
+// TODO: introduce interaction feedback upon deletion (successful + failure)
+// TODO: introduce loading bar
+export default function EditRole(): React.ReactElement {
+  const formatMessage = useFormatMessage();
+  const [updateRole, { loading }] = useMutation(UPDATE_ROLE);
+  const { roleId } = useParams<EditRoleParams>();
+  const { role, loading: roleLoading } = useRole(roleId);
+
+  const handleRoleUpdate = (roleData: Partial<IRole>) => {
+    updateRole({
+      variables: {
+        input: {
+          id: roleId,
+          name: roleData.name,
+          description: roleData.description,
+        }
+      }
+    });
+  };
+
+  if (roleLoading) return <React.Fragment />;
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={9} md={8} lg={6}>
+        <Grid item xs={12} sx={{ mb: [2, 5] }}>
+          <PageTitle>{formatMessage('editRolePage.title')}</PageTitle>
+        </Grid>
+
+        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
+          <Form defaultValues={role} onSubmit={handleRoleUpdate}>
+            <Stack direction="column" gap={2}>
+              <TextField
+                required={true}
+                name="name"
+                label={formatMessage('roleForm.name')}
+                fullWidth
+              />
+
+              <TextField
+                required={true}
+                name="description"
+                label={formatMessage('roleForm.description')}
+                fullWidth
+              />
+
+              <LoadingButton
+                type="submit"
+                variant="contained"
+                color="primary"
+                sx={{ boxShadow: 2 }}
+                loading={loading}
+              >
+                {formatMessage('editRole.submit')}
+              </LoadingButton>
+            </Stack>
+          </Form>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}

packages/web/src/pages/EditUser/index.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+import { useMutation } from '@apollo/client';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import MuiTextField from '@mui/material/TextField';
+import LoadingButton from '@mui/lab/LoadingButton';
+import { IUser, IRole } from '@automatisch/types';
+
+import { UPDATE_USER } from 'graphql/mutations/update-user.ee';
+import useUser from 'hooks/useUser';
+import useRoles from 'hooks/useRoles.ee';
+import PageTitle from 'components/PageTitle';
+import Form from 'components/Form';
+import ControlledAutocomplete from 'components/ControlledAutocomplete';
+import TextField from 'components/TextField';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+type EditUserParams = {
+  userId: string;
+}
+
+function generateRoleOptions(roles: IRole[]) {
+  return roles?.map(({ name: label, id: value }) => ({ label, value }));
+}
+
+// TODO: introduce interaction feedback upon deletion (successful + failure)
+// TODO: introduce loading bar
+export default function EditUser(): React.ReactElement {
+  const formatMessage = useFormatMessage();
+  const [updateUser, { loading }] = useMutation(UPDATE_USER);
+  const { userId } = useParams<EditUserParams>();
+  const { user, loading: userLoading } = useUser(userId);
+  const { roles, loading: rolesLoading } = useRoles();
+
+  const handleUserUpdate = (userDataToUpdate: Partial<IUser>) => {
+    updateUser({
+      variables: {
+        input: {
+          id: userId,
+          fullName: userDataToUpdate.fullName,
+          email: userDataToUpdate.email,
+          role: {
+            id: userDataToUpdate.role?.id
+          }
+        }
+      }
+    });
+  };
+
+  if (userLoading) return <React.Fragment />;
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={9} md={8} lg={6}>
+        <Grid item xs={12} sx={{ mb: [2, 5] }}>
+          <PageTitle>{formatMessage('editUserPage.title')}</PageTitle>
+        </Grid>
+
+        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
+          <Form defaultValues={user} onSubmit={handleUserUpdate}>
+            <Stack direction="column" gap={2}>
+              <TextField
+                required={true}
+                name="fullName"
+                label={formatMessage('userForm.fullName')}
+                fullWidth
+              />
+
+              <TextField
+                required={true}
+                name="email"
+                label={formatMessage('userForm.email')}
+                fullWidth
+              />
+
+              <ControlledAutocomplete
+                name="role.id"
+                fullWidth
+                disablePortal
+                disableClearable={true}
+                options={generateRoleOptions(roles)}
+                renderInput={(params) => <MuiTextField {...params} label={formatMessage('userForm.role')} />}
+                loading={rolesLoading}
+              />
+
+              <LoadingButton
+                type="submit"
+                variant="contained"
+                color="primary"
+                sx={{ boxShadow: 2 }}
+                loading={loading}
+              >
+                {formatMessage('editUser.submit')}
+              </LoadingButton>
+            </Stack>
+          </Form>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}

packages/web/src/pages/ProfileSettings/index.tsx

@@ -15,7 +15,7 @@ import Container from 'components/Container';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
 import DeleteAccountDialog from 'components/DeleteAccountDialog/index.ee';
-import { UPDATE_USER } from 'graphql/mutations/update-user';
+import { UPDATE_CURRENT_USER } from 'graphql/mutations/update-current-user';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCurrentUser from 'hooks/useCurrentUser';
 
@@ -47,7 +47,7 @@ function ProfileSettings() {
   const { enqueueSnackbar } = useSnackbar();
   const currentUser = useCurrentUser();
   const formatMessage = useFormatMessage();
-  const [updateUser] = useMutation(UPDATE_USER);
+  const [updateCurrentUser] = useMutation(UPDATE_CURRENT_USER);
 
   const handleProfileSettingsUpdate = async (data: any) => {
     const { fullName, password, email } = data;
@@ -61,12 +61,12 @@ function ProfileSettings() {
       mutationInput.password = password;
     }
 
-    await updateUser({
+    await updateCurrentUser({
       variables: {
         input: mutationInput,
       },
       optimisticResponse: {
-        updateUser: {
+        updateCurrentUser: {
           __typename: 'User',
           id: currentUser.id,
           fullName,
@@ -89,7 +89,7 @@ function ProfileSettings() {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end">
-        <StyledForm
+          <StyledForm
             defaultValues={{ ...currentUser, password: '', confirmPassword: '' }}
             onSubmit={handleProfileSettingsUpdate}
             resolver={yupResolver(validationSchema)}

packages/web/src/pages/Roles/index.ee.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import Grid from '@mui/material/Grid';
+import AddIcon from '@mui/icons-material/Add';
+
+import * as URLS from 'config/urls';
+import PageTitle from 'components/PageTitle';
+import Container from 'components/Container';
+import RoleList from 'components/RoleList/index.ee';
+import ConditionalIconButton from 'components/ConditionalIconButton';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+function RolesPage() {
+  const formatMessage = useFormatMessage();
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={10} md={9}>
+        <Grid container sx={{ mb: [0, 3] }} columnSpacing={1.5} rowSpacing={3}>
+          <Grid container item xs sm alignItems="center">
+            <PageTitle>{formatMessage('rolesPage.title')}</PageTitle>
+          </Grid>
+
+          <Grid
+            container
+            item
+            xs="auto"
+            sm="auto"
+            alignItems="center"
+          >
+            <ConditionalIconButton
+              type="submit"
+              variant="contained"
+              color="primary"
+              size="large"
+              component={Link}
+              to={URLS.CREATE_ROLE}
+              fullWidth
+              icon={<AddIcon />}
+              data-test="create-role"
+            >
+              {formatMessage('rolesPage.createRole')}
+            </ConditionalIconButton>
+          </Grid>
+        </Grid>
+
+        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
+          <RoleList />
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}
+
+export default RolesPage;

packages/web/src/pages/Users/index.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import Grid from '@mui/material/Grid';
+import AddIcon from '@mui/icons-material/Add';
+
+import * as URLS from 'config/urls';
+import PageTitle from 'components/PageTitle';
+import Container from 'components/Container';
+import UserList from 'components/UserList';
+import ConditionalIconButton from 'components/ConditionalIconButton';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+function UsersPage() {
+  const formatMessage = useFormatMessage();
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={10} md={9}>
+        <Grid container sx={{ mb: [0, 3] }} columnSpacing={1.5} rowSpacing={3}>
+          <Grid container item xs sm alignItems="center">
+            <PageTitle>{formatMessage('usersPage.title')}</PageTitle>
+          </Grid>
+
+          <Grid
+            container
+            item
+            xs="auto"
+            sm="auto"
+            alignItems="center"
+          >
+            <ConditionalIconButton
+              type="submit"
+              variant="contained"
+              color="primary"
+              size="large"
+              component={Link}
+              to={URLS.CREATE_USER}
+              fullWidth
+              icon={<AddIcon />}
+              data-test="create-user"
+            >
+              {formatMessage('usersPage.createUser')}
+            </ConditionalIconButton>
+          </Grid>
+        </Grid>
+
+        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
+          <UserList />
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}
+
+export default UsersPage;

packages/web/src/routes.tsx

@@ -15,6 +15,7 @@ import ResetPassword from 'pages/ResetPassword/index.ee';
 import EditorRoutes from 'pages/Editor/routes';
 import * as URLS from 'config/urls';
 import settingsRoutes from './settingsRoutes';
+import adminSettingsRoutes from './adminSettingsRoutes';
 import Notifications from 'pages/Notifications';
 
 export default (
@@ -127,7 +128,9 @@ export default (
 
     <Route path="/" element={<Navigate to={URLS.FLOWS} replace />} />
 
-    <Route path={`${URLS.SETTINGS}`}>{settingsRoutes}</Route>
+    <Route path={URLS.SETTINGS}>{settingsRoutes}</Route>
+
+    <Route path={URLS.ADMIN_SETTINGS}>{adminSettingsRoutes}</Route>
 
     <Route
       element={