feat: add basic UI for settings and permissions

web/src/components/dialogTitle.tsx

@@ -0,0 +1,35 @@
+import React, { Dispatch, SetStateAction } from 'react'
+
+import DialogTitle from '@mui/material/DialogTitle'
+import IconButton from '@mui/material/IconButton'
+import CloseIcon from '@mui/icons-material/Close'
+
+export interface DialogTitleProps {
+  id: string
+  children?: React.ReactNode
+  onClose: Dispatch<SetStateAction<boolean>>
+}
+
+export const BootstrapDialogTitle = (props: DialogTitleProps) => {
+  const { children, onClose, ...other } = props
+
+  return (
+    <DialogTitle sx={{ m: 0, p: 2 }} {...other}>
+      {children}
+      {onClose ? (
+        <IconButton
+          aria-label="close"
+          onClick={() => onClose(false)}
+          sx={{
+            position: 'absolute',
+            right: 8,
+            top: 8,
+            color: (theme) => theme.palette.grey[500]
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      ) : null}
+    </DialogTitle>
+  )
+}

web/src/components/header.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import { Link, useHistory, useLocation } from 'react-router-dom'
 
 import {
@@ -11,6 +11,7 @@ import {
   MenuItem
 } from '@mui/material'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+import SettingsIcon from '@mui/icons-material/Settings'
 
 import Username from './username'
 import { AppContext } from '../context/appContext'
@@ -29,6 +30,10 @@ const Header = (props: any) => {
     (EventTarget & HTMLButtonElement) | null
   >(null)
 
+  useEffect(() => {
+    setTabValue(pathname)
+  }, [pathname])
+
   const handleMenu = (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>
   ) => {
@@ -132,6 +137,17 @@ const Header = (props: any) => {
             open={!!anchorEl}
             onClose={handleClose}
           >
+            <MenuItem sx={{ justifyContent: 'center' }}>
+              <Button
+                component={Link}
+                to="/SASjsSettings"
+                variant="contained"
+                color="primary"
+                startIcon={<SettingsIcon />}
+              >
+                Setting
+              </Button>
+            </MenuItem>
             <MenuItem onClick={handleLogout} sx={{ justifyContent: 'center' }}>
               <Button variant="contained" color="primary">
                 Logout