feat(user-interface): introduce user interface page (#1226)

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

@@ -1,6 +1,7 @@
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 import GroupIcon from '@mui/icons-material/Group';
 import GroupsIcon from '@mui/icons-material/Groups';
+import BrushIcon from '@mui/icons-material/Brush';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import { useTheme } from '@mui/material/styles';
@@ -18,25 +19,43 @@ type SettingsLayoutProps = {
 };
 
 type DrawerLink = {
-  Icon: SvgIconComponent,
-  primary: string,
-  to: string,
-}
+  Icon: SvgIconComponent;
+  primary: string;
+  to: string;
+};
 
-function createDrawerLinks({ canReadRole, canReadUser }: { canReadRole: boolean; canReadUser: boolean;  }) {
+function createDrawerLinks({
+  canReadRole,
+  canReadUser,
+  canUpdateConfig,
+}: {
+  canReadRole: boolean;
+  canReadUser: boolean;
+  canUpdateConfig: 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[];
+    canReadUser
+      ? {
+          Icon: GroupIcon,
+          primary: 'adminSettingsDrawer.users',
+          to: URLS.USERS,
+        }
+      : null,
+    canReadRole
+      ? {
+          Icon: GroupsIcon,
+          primary: 'adminSettingsDrawer.roles',
+          to: URLS.ROLES,
+        }
+      : null,
+    canUpdateConfig
+      ? {
+          Icon: BrushIcon,
+          primary: 'adminSettingsDrawer.userInterface',
+          to: URLS.USER_INTERFACE,
+        }
+      : null,
+  ].filter(Boolean) as DrawerLink[];
 
   return items;
 }
@@ -62,6 +81,7 @@ export default function SettingsLayout({
   const drawerLinks = createDrawerLinks({
     canReadUser: currentUserAbility.can('read', 'User'),
     canReadRole: currentUserAbility.can('read', 'Role'),
+    canUpdateConfig: currentUserAbility.can('update', 'Config'),
   });
 
   return (

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { MuiColorInput, MuiColorInputProps } from 'mui-color-input';
+
+type ColorInputProps = {
+  shouldUnregister?: boolean;
+  name: string;
+  'data-test'?: string;
+} & Partial<MuiColorInputProps>;
+
+export default function ColorInput(props: ColorInputProps): React.ReactElement {
+  const { control } = useFormContext();
+  const {
+    required,
+    name,
+    shouldUnregister = false,
+    disabled = false,
+    'data-test': dataTest,
+    ...textFieldProps
+  } = props;
+
+  return (
+    <Controller
+      rules={{ required }}
+      name={name}
+      control={control}
+      shouldUnregister={shouldUnregister}
+      render={({ field }) => (
+        <MuiColorInput
+          format="hex"
+          {...textFieldProps}
+          {...field}
+          disabled={disabled}
+          inputProps={{
+            'data-test': dataTest,
+          }}
+        />
+      )}
+    />
+  );
+}