feat: add UI for updating permission

web/src/containers/Settings/permission.tsx

@@ -24,6 +24,7 @@ import { styled } from '@mui/material/styles'
 
 import PermissionFilterModal from './permissionFilterModal'
 import AddPermissionModal from './addPermissionModal'
+import UpdatePermissionModal from './updatePermissionModal'
 
 import { PermissionResponse } from '../../utils/types'
 
@@ -34,6 +35,10 @@ const BootstrapTableCell = styled(TableCell)({
 const Permission = () => {
   const [isLoading, setIsLoading] = useState(false)
   const [addPermissionModalOpen, setAddPermissionModalOpen] = useState(false)
+  const [updatePermissionModalOpen, setUpdatePermissionModalOpen] =
+    useState(false)
+  const [selectedPermissionForUpdate, setSelectedPermissionForUpdate] =
+    useState<PermissionResponse>()
   const [filterModalOpen, setFilterModalOpen] = useState(false)
   const [uriFilter, setUriFilter] = useState<string[]>([])
   const [principalFilter, setPrincipalFilter] = useState<string[]>([])
@@ -114,6 +119,13 @@ const Permission = () => {
 
   const addPermission = () => {}
 
+  const handleUpdatePermissionClick = (permission: PermissionResponse) => {
+    setSelectedPermissionForUpdate(permission)
+    setUpdatePermissionModalOpen(true)
+  }
+
+  const updatePermission = () => {}
+
   return isLoading ? (
     <CircularProgress
       style={{ position: 'absolute', left: '50%', top: '50%' }}
@@ -142,6 +154,7 @@ const Permission = () => {
         <Grid item xs={12}>
           <PermissionTable
             permissions={filterApplied ? filteredPermissions : permissions}
+            handleUpdatePermissionClick={handleUpdatePermissionClick}
           />
         </Grid>
       </Grid>
@@ -164,6 +177,14 @@ const Permission = () => {
         permissions={permissions}
         addPermission={addPermission}
       />
+      {selectedPermissionForUpdate && (
+        <UpdatePermissionModal
+          open={updatePermissionModalOpen}
+          handleOpen={setUpdatePermissionModalOpen}
+          permission={selectedPermissionForUpdate}
+          updatePermission={updatePermission}
+        />
+      )}
     </Box>
   )
 }
@@ -172,9 +193,13 @@ export default Permission
 
 type PermissionTableProps = {
   permissions: PermissionResponse[]
+  handleUpdatePermissionClick: (permission: PermissionResponse) => void
 }
 
-const PermissionTable = ({ permissions }: PermissionTableProps) => {
+const PermissionTable = ({
+  permissions,
+  handleUpdatePermissionClick
+}: PermissionTableProps) => {
   return (
     <TableContainer component={Paper}>
       <Table sx={{ minWidth: 650 }}>
@@ -196,7 +221,9 @@ const PermissionTable = ({ permissions }: PermissionTableProps) => {
               <BootstrapTableCell>{permission.setting}</BootstrapTableCell>
               <BootstrapTableCell>
                 <Tooltip title="Edit Permission">
-                  <IconButton>
+                  <IconButton
+                    onClick={() => handleUpdatePermissionClick(permission)}
+                  >
                     <EditIcon />
                   </IconButton>
                 </Tooltip>

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