feat: add UI for updating permission

web/src/containers/Settings/updatePermissionModal.tsx

@@ -0,0 +1,80 @@
+import React, { useState, Dispatch, SetStateAction } from 'react'
+import {
+  Button,
+  Grid,
+  Dialog,
+  DialogContent,
+  DialogActions,
+  TextField
+} from '@mui/material'
+import { styled } from '@mui/material/styles'
+import Autocomplete from '@mui/material/Autocomplete'
+
+import { BootstrapDialogTitle } from '../../components/dialogTitle'
+
+import { PermissionResponse } from '../../utils/types'
+
+const BootstrapDialog = styled(Dialog)(({ theme }) => ({
+  '& .MuiDialogContent-root': {
+    padding: theme.spacing(2)
+  },
+  '& .MuiDialogActions-root': {
+    padding: theme.spacing(1)
+  }
+}))
+
+type UpdatePermissionModalProps = {
+  open: boolean
+  handleOpen: Dispatch<SetStateAction<boolean>>
+  permission: PermissionResponse
+  updatePermission: (setting: string) => void
+}
+
+const UpdatePermissionModal = ({
+  open,
+  handleOpen,
+  permission,
+  updatePermission
+}: UpdatePermissionModalProps) => {
+  const [permissionSetting, setPermissionSetting] = useState('Grant')
+
+  return (
+    <BootstrapDialog onClose={() => handleOpen(false)} open={open}>
+      <BootstrapDialogTitle
+        id="add-permission-dialog-title"
+        handleOpen={handleOpen}
+      >
+        Update Permission
+      </BootstrapDialogTitle>
+      <DialogContent dividers>
+        <Grid container spacing={2}>
+          <Grid item xs={12}>
+            <Autocomplete
+              sx={{ width: 300 }}
+              options={['Grant', 'Deny']}
+              disableClearable
+              value={permissionSetting}
+              onChange={(event: any, newValue: string) =>
+                setPermissionSetting(newValue)
+              }
+              renderInput={(params) => (
+                <TextField {...params} label="Settings" />
+              )}
+            />
+          </Grid>
+        </Grid>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="outlined"
+          onClick={() => updatePermission(permissionSetting)}
+          disabled={permission.setting === permissionSetting}
+        >
+          Update
+        </Button>
+      </DialogActions>
+    </BootstrapDialog>
+  )
+}
+
+export default UpdatePermissionModal