chore(release): 0.15.0 [skip ci]

# [0.15.0](https://github.com/sasjs/server/compare/v0.14.1...v0.15.0) (2022-08-05)

### Bug Fixes

* after selecting file in sidebar collapse sidebar in mobile view ([e215958](e215958b8b))
* improve mobile view for studio page ([c67d3ee](c67d3ee2f1))
* improve responsiveness for mobile view ([6ef40b9](6ef40b954a))
* improve user experience for adding permissions ([7a162ed](7a162eda8f))
* show logout button only when user is logged in ([9227cd4](9227cd449d))

### Features

* add multiple permission for same combination of type and principal at once ([754704b](754704bca8))

CHANGELOG.md

@@ -1,3 +1,19 @@
+# [0.15.0](https://github.com/sasjs/server/compare/v0.14.1...v0.15.0) (2022-08-05)
+
+
+### Bug Fixes
+
+* after selecting file in sidebar collapse sidebar in mobile view ([e215958](https://github.com/sasjs/server/commit/e215958b8b05d7a8ce9d82395e0640b5b37fb40d))
+* improve mobile view for studio page ([c67d3ee](https://github.com/sasjs/server/commit/c67d3ee2f102155e2e9781e13d5d33c1ab227cb4))
+* improve responsiveness for mobile view ([6ef40b9](https://github.com/sasjs/server/commit/6ef40b954a87ebb0a2621119064f38d58ea85148))
+* improve user experience for adding permissions ([7a162ed](https://github.com/sasjs/server/commit/7a162eda8fc60383ff647d93e6611799e2e6af7a))
+* show logout button only when user is logged in ([9227cd4](https://github.com/sasjs/server/commit/9227cd449dc46fd960a488eb281804a9b9ffc284))
+
+
+### Features
+
+* add multiple permission for same combination of type and principal at once ([754704b](https://github.com/sasjs/server/commit/754704bca89ecbdbcc3bd4ef04b94124c4f24167))
+
 ## [0.14.1](https://github.com/sasjs/server/compare/v0.14.0...v0.14.1) (2022-08-04)
 
 

web/src/components/header.tsx

@@ -2,16 +2,18 @@ import React, { useState, useEffect, useContext } from 'react'
 import { Link, useNavigate, useLocation } from 'react-router-dom'
 
 import {
+  Box,
   AppBar,
   Toolbar,
   Tabs,
   Tab,
   Button,
   Menu,
-  MenuItem
+  MenuItem,
+  IconButton,
+  Typography
 } from '@mui/material'
-import OpenInNewIcon from '@mui/icons-material/OpenInNew'
-import SettingsIcon from '@mui/icons-material/Settings'
+import { OpenInNew, Settings, Menu as MenuIcon } from '@mui/icons-material'
 
 import Username from './username'
 import { AppContext } from '../context/appContext'
@@ -30,31 +32,38 @@ const Header = (props: any) => {
   const [tabValue, setTabValue] = useState(
     validTabs.includes(pathname) ? pathname : '/'
   )
-  const [anchorEl, setAnchorEl] = useState<
-    (EventTarget & HTMLButtonElement) | null
-  >(null)
+
+  const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null)
+  const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(
+    null
+  )
+
+  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElNav(event.currentTarget)
+  }
+  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorElUser(event.currentTarget)
+  }
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null)
+  }
+
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null)
+  }
 
   useEffect(() => {
     setTabValue(validTabs.includes(pathname) ? pathname : '/')
   }, [pathname])
 
-  const handleMenu = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ) => {
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-
   const handleTabChange = (event: React.SyntheticEvent, value: string) => {
     setTabValue(value)
   }
 
   const handleLogout = () => {
     if (appContext.logout) {
-      handleClose()
+      handleCloseUserMenu()
       appContext.logout()
     }
   }
@@ -64,43 +73,129 @@ const Header = (props: any) => {
       sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
     >
       <Toolbar variant="dense">
-        <img
-          src="logo.png"
-          alt="logo"
-          style={{
-            width: '35px',
-            cursor: 'pointer',
-            marginRight: '25px'
-          }}
-          onClick={() => {
-            setTabValue('/')
-            navigate('/')
-          }}
-        />
-        <Tabs
-          indicatorColor="secondary"
-          value={tabValue}
-          onChange={handleTabChange}
-        >
-          <Tab label="Home" value="/" to="/" component={Link} />
-          <Tab
-            label="Studio"
-            value="/SASjsStudio"
-            to="/SASjsStudio"
-            component={Link}
+        <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
+          <img
+            src="logo.png"
+            alt="logo"
+            style={{
+              width: '35px',
+              height: '35px',
+              marginTop: '9px',
+              cursor: 'pointer',
+              marginRight: '25px'
+            }}
+            onClick={() => {
+              setTabValue('/')
+              navigate('/')
+            }}
           />
-        </Tabs>
-        <Button
-          href={`${baseUrl}/AppStream`}
-          target="_blank"
-          rel="noreferrer"
-          variant="contained"
-          color="primary"
-          size="large"
-          endIcon={<OpenInNewIcon />}
-        >
-          Apps
-        </Button>
+          <Tabs
+            indicatorColor="secondary"
+            value={tabValue}
+            onChange={handleTabChange}
+          >
+            <Tab label="Home" value="/" to="/" component={Link} />
+            <Tab
+              label="Studio"
+              value="/SASjsStudio"
+              to="/SASjsStudio"
+              component={Link}
+            />
+          </Tabs>
+          <Button
+            href={`${baseUrl}/AppStream`}
+            target="_blank"
+            rel="noreferrer"
+            variant="contained"
+            color="primary"
+            size="large"
+            endIcon={<OpenInNew />}
+          >
+            Apps
+          </Button>
+        </Box>
+
+        <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+          <IconButton size="large" onClick={handleOpenNavMenu} color="inherit">
+            <MenuIcon />
+          </IconButton>
+
+          <Menu
+            id="menu-appbar"
+            anchorEl={anchorElNav}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'left'
+            }}
+            keepMounted
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'left'
+            }}
+            open={!!anchorElNav}
+            onClose={handleCloseNavMenu}
+            sx={{
+              display: { xs: 'block', md: 'none' }
+            }}
+          >
+            <MenuItem sx={{ justifyContent: 'center' }}>
+              <Button
+                component={Link}
+                to="/"
+                onClick={handleCloseNavMenu}
+                variant="contained"
+                color="primary"
+              >
+                Home
+              </Button>
+            </MenuItem>
+
+            <MenuItem sx={{ justifyContent: 'center' }}>
+              <Button
+                component={Link}
+                to="/SASjsStudio"
+                onClick={handleCloseNavMenu}
+                variant="contained"
+                color="primary"
+              >
+                Studio
+              </Button>
+            </MenuItem>
+
+            <MenuItem sx={{ justifyContent: 'center' }}>
+              <Button
+                href={`${baseUrl}/AppStream`}
+                target="_blank"
+                rel="noreferrer"
+                onClick={handleCloseNavMenu}
+                variant="contained"
+                color="primary"
+                endIcon={<OpenInNew />}
+              >
+                Apps
+              </Button>
+            </MenuItem>
+          </Menu>
+        </Box>
+
+        <Box sx={{ display: { xs: 'flex', md: 'none' } }}>
+          <img
+            src="logo.png"
+            alt="logo"
+            style={{
+              width: '35px',
+              height: '35px',
+              marginTop: '2px',
+              cursor: 'pointer',
+              marginRight: '25px'
+            }}
+            onClick={() => {
+              setTabValue('/')
+              navigate('/')
+            }}
+          />
+        </Box>
+
         <div
           style={{
             display: 'flex',
@@ -110,11 +205,11 @@ const Header = (props: any) => {
         >
           <Username
             username={appContext.displayName || appContext.username}
-            onClickHandler={handleMenu}
+            onClickHandler={handleOpenUserMenu}
           />
           <Menu
             id="menu-appbar"
-            anchorEl={anchorEl}
+            anchorEl={anchorElUser}
             anchorOrigin={{
               vertical: 'bottom',
               horizontal: 'center'
@@ -124,17 +219,30 @@ const Header = (props: any) => {
               vertical: 'top',
               horizontal: 'center'
             }}
-            open={!!anchorEl}
-            onClose={handleClose}
+            open={!!anchorElUser}
+            onClose={handleCloseUserMenu}
           >
+            {appContext.loggedIn && (
+              <MenuItem
+                sx={{ justifyContent: 'center', display: { md: 'none' } }}
+              >
+                <Typography
+                  variant="h5"
+                  sx={{ border: '1px solid black', padding: '5px' }}
+                >
+                  {appContext.displayName || appContext.username}
+                </Typography>
+              </MenuItem>
+            )}
+
             <MenuItem sx={{ justifyContent: 'center' }}>
               <Button
                 component={Link}
                 to="/SASjsSettings"
-                onClick={handleClose}
+                onClick={handleCloseUserMenu}
                 variant="contained"
                 color="primary"
-                startIcon={<SettingsIcon />}
+                startIcon={<Settings />}
               >
                 Settings
               </Button>
@@ -147,7 +255,7 @@ const Header = (props: any) => {
                 variant="contained"
                 size="large"
                 color="primary"
-                endIcon={<OpenInNewIcon />}
+                endIcon={<OpenInNew />}
               >
                 Docs
               </Button>
@@ -160,16 +268,21 @@ const Header = (props: any) => {
                 variant="contained"
                 color="primary"
                 size="large"
-                endIcon={<OpenInNewIcon />}
+                endIcon={<OpenInNew />}
               >
                 API
               </Button>
             </MenuItem>
-            <MenuItem onClick={handleLogout} sx={{ justifyContent: 'center' }}>
-              <Button variant="contained" color="primary">
-                Logout
-              </Button>
-            </MenuItem>
+            {appContext.loggedIn && (
+              <MenuItem
+                onClick={handleLogout}
+                sx={{ justifyContent: 'center' }}
+              >
+                <Button variant="contained" color="primary">
+                  Logout
+                </Button>
+              </MenuItem>
+            )}
           </Menu>
         </div>
       </Toolbar>

web/src/components/username.tsx

@@ -20,7 +20,14 @@ const Username = (props: any) => {
       ) : (
         <AccountCircle></AccountCircle>
       )}
-      <Typography variant="h6" sx={{ color: 'white', padding: '0 8px' }}>
+      <Typography
+        variant="h6"
+        sx={{
+          color: 'white',
+          padding: '0 8px',
+          display: { xs: 'none', md: 'flex' }
+        }}
+      >
         {props.username}
       </Typography>
     </IconButton>

web/src/containers/Settings/addPermissionModal.tsx

@@ -32,7 +32,13 @@ const BootstrapDialog = styled(Dialog)(({ theme }) => ({
 type AddPermissionModalProps = {
   open: boolean
   handleOpen: Dispatch<SetStateAction<boolean>>
-  addPermission: (addPermissionPayload: RegisterPermissionPayload) => void
+  addPermission: (
+    permissions: RegisterPermissionPayload[],
+    permissionType: string,
+    principalType: string,
+    principal: string,
+    permissionSetting: string
+  ) => void
 }
 
 const AddPermissionModal = ({
@@ -42,9 +48,9 @@ const AddPermissionModal = ({
 }: AddPermissionModalProps) => {
   const [paths, setPaths] = useState<string[]>([])
   const [loadingPaths, setLoadingPaths] = useState(false)
-  const [path, setPath] = useState<string>()
+  const [selectedPaths, setSelectedPaths] = useState<string[]>([])
   const [permissionType, setPermissionType] = useState('Route')
-  const [principalType, setPrincipalType] = useState('group')
+  const [principalType, setPrincipalType] = useState('Group')
   const [userPrincipal, setUserPrincipal] = useState<UserResponse>()
   const [groupPrincipal, setGroupPrincipal] = useState<GroupResponse>()
   const [permissionSetting, setPermissionSetting] = useState('Grant')
@@ -72,10 +78,10 @@ const AddPermissionModal = ({
   useEffect(() => {
     setLoadingPrincipals(true)
     axios
-      .get(`/SASjsApi/${principalType}`)
+      .get(`/SASjsApi/${principalType.toLowerCase()}`)
       .then((res: any) => {
         if (res.data) {
-          if (principalType === 'user') {
+          if (principalType.toLowerCase() === 'user') {
             const users: UserResponse[] = res.data
             const nonAdminUsers = users.filter((user) => !user.isAdmin)
             setUserPrincipals(nonAdminUsers)
@@ -93,22 +99,40 @@ const AddPermissionModal = ({
   }, [principalType])
 
   const handleAddPermission = () => {
-    const addPermissionPayload: any = {
-      path,
-      type: permissionType,
-      setting: permissionSetting,
-      principalType
-    }
-    if (principalType === 'user' && userPrincipal) {
-      addPermissionPayload.principalId = userPrincipal.id
-    } else if (principalType === 'group' && groupPrincipal) {
-      addPermissionPayload.principalId = groupPrincipal.groupId
-    }
-    addPermission(addPermissionPayload)
+    const permissions: RegisterPermissionPayload[] = []
+
+    selectedPaths.forEach((path) => {
+      const addPermissionPayload: any = {
+        path,
+        type: permissionType,
+        setting: permissionSetting,
+        principalType: principalType.toLowerCase(),
+        principalId:
+          principalType.toLowerCase() === 'user'
+            ? userPrincipal?.id
+            : groupPrincipal?.groupId
+      }
+
+      permissions.push(addPermissionPayload)
+    })
+
+    const principal =
+      principalType.toLowerCase() === 'user'
+        ? userPrincipal?.username
+        : groupPrincipal?.name
+
+    addPermission(
+      permissions,
+      permissionType,
+      principalType,
+      principal!,
+      permissionSetting
+    )
   }
 
   const addButtonDisabled =
-    !path || (principalType === 'user' ? !userPrincipal : !groupPrincipal)
+    !selectedPaths.length ||
+    (principalType.toLowerCase() === 'user' ? !userPrincipal : !groupPrincipal)
 
   return (
     <BootstrapDialog onClose={() => handleOpen(false)} open={open}>
@@ -122,17 +146,15 @@ const AddPermissionModal = ({
         <Grid container spacing={2}>
           <Grid item xs={12}>
             <Autocomplete
-              options={paths}
+              multiple
               disableClearable
-              value={path}
-              onChange={(event: any, newValue: string) => setPath(newValue)}
-              renderInput={(params) =>
-                loadingPaths ? (
-                  <CircularProgress />
-                ) : (
-                  <TextField {...params} autoFocus label="Path" />
-                )
-              }
+              options={paths}
+              filterSelectedOptions
+              value={selectedPaths}
+              onChange={(event: any, newValue: string[]) => {
+                setSelectedPaths(newValue)
+              }}
+              renderInput={(params) => <TextField {...params} label="Paths" />}
             />
           </Grid>
           <Grid item xs={12}>
@@ -154,8 +176,7 @@ const AddPermissionModal = ({
           </Grid>
           <Grid item xs={12}>
             <Autocomplete
-              options={['group', 'user']}
-              getOptionLabel={(option) => option.toUpperCase()}
+              options={['Group', 'User']}
               disableClearable
               value={principalType}
               onChange={(event: any, newValue: string) =>
@@ -167,7 +188,7 @@ const AddPermissionModal = ({
             />
           </Grid>
           <Grid item xs={12}>
-            {principalType === 'user' ? (
+            {principalType.toLowerCase() === 'user' ? (
               <Autocomplete
                 options={userPrincipals}
                 getOptionLabel={(option) => option.displayName}

web/src/containers/Settings/addPermissionResponseModal.tsx

@@ -0,0 +1,120 @@
+import React from 'react'
+
+import { Typography, DialogContent } from '@mui/material'
+
+import { BootstrapDialog } from '../../components/modal'
+import { BootstrapDialogTitle } from '../../components/dialogTitle'
+import { PermissionResponse } from '../../utils/types'
+
+export interface PermissionResponsePayload {
+  permissionType: string
+  principalType: string
+  principal: string
+  permissionSetting: string
+  existingPermissions: PermissionResponse[]
+  newAddedPermissions: PermissionResponse[]
+  updatedPermissions: PermissionResponse[]
+  errorPaths: string[]
+}
+
+type Props = {
+  open: boolean
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
+  payload: PermissionResponsePayload
+}
+
+const PermissionResponseModal = ({ open, setOpen, payload }: Props) => {
+  const newAddedPermissionsLength = payload.newAddedPermissions.length
+  const updatedPermissionsLength = payload.updatedPermissions.length
+  const existingPermissionsLength = payload.existingPermissions.length
+  const appliedPermissionsLength =
+    newAddedPermissionsLength + updatedPermissionsLength
+
+  return (
+    <div>
+      <BootstrapDialog onClose={() => setOpen(false)} open={open}>
+        <BootstrapDialogTitle
+          id="permission-response-modal"
+          handleOpen={setOpen}
+        >
+          Permission Response
+        </BootstrapDialogTitle>
+        <DialogContent dividers>
+          <Typography sx={{ fontWeight: 'bold', marginBottom: '15px' }}>
+            {`${appliedPermissionsLength} "${payload.permissionSetting}", "${
+              payload.permissionType
+            }", "${payload.principalType}", "${payload.principal}" ${
+              appliedPermissionsLength > 1 ? 'Rules' : 'Rule'
+            }`}{' '}
+            Applied:
+          </Typography>
+
+          {newAddedPermissionsLength > 0 && (
+            <>
+              <Typography>
+                {`${newAddedPermissionsLength} ${
+                  newAddedPermissionsLength > 1 ? 'Rules' : 'Rule'
+                }`}{' '}
+                Added:
+              </Typography>
+              <ul>
+                {payload.newAddedPermissions.map((permission, index) => (
+                  <li key={index}>{permission.path}</li>
+                ))}
+              </ul>
+            </>
+          )}
+
+          {updatedPermissionsLength > 0 && (
+            <>
+              <Typography>
+                {` ${updatedPermissionsLength} ${
+                  updatedPermissionsLength > 1 ? 'Rules' : 'Rule'
+                }`}{' '}
+                Updated:
+              </Typography>
+              <ul>
+                {payload.updatedPermissions.map((permission, index) => (
+                  <li key={index}>{permission.path}</li>
+                ))}
+              </ul>
+            </>
+          )}
+
+          {existingPermissionsLength > 0 && (
+            <>
+              <Typography>
+                {`${existingPermissionsLength} ${
+                  existingPermissionsLength > 1 ? 'Rules' : 'Rule'
+                }`}{' '}
+                Unchanged:
+              </Typography>
+              <ul>
+                {payload.existingPermissions.map((permission, index) => (
+                  <li key={index}>{permission.path}</li>
+                ))}
+              </ul>
+            </>
+          )}
+
+          {payload.errorPaths.length > 0 && (
+            <>
+              <Typography style={{ color: 'red', marginTop: '10px' }}>
+                Errors occurred for following paths:
+              </Typography>
+              <ul>
+                {payload.errorPaths.map((path, index) => (
+                  <li key={index}>
+                    <Typography>{path}</Typography>
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+        </DialogContent>
+      </BootstrapDialog>
+    </div>
+  )
+}
+
+export default PermissionResponseModal

web/src/containers/Settings/index.tsx

@@ -31,11 +31,20 @@ const Settings = () => {
     <Box
       sx={{
         display: 'flex',
+        flexDirection: { xs: 'column', md: 'row' },
         marginTop: '65px'
       }}
     >
       <TabContext value={value}>
-        <Box component={Paper} sx={{ margin: '0 5px', height: '92vh' }}>
+        <Box
+          component={Paper}
+          sx={{
+            margin: '0 5px',
+            height: { md: '92vh' },
+            display: 'flex',
+            justifyContent: 'center'
+          }}
+        >
           <TabList
             TabIndicatorProps={{
               style: {
@@ -47,7 +56,7 @@ const Settings = () => {
           >
             <StyledTab label="Profile" value="profile" />
             {appContext.mode === ModeType.Server && (
-              <StyledTab label="Permission" value="permission" />
+              <StyledTab label="Permissions" value="permission" />
             )}
           </TabList>
         </Box>

web/src/containers/Settings/permission.tsx

@@ -27,6 +27,9 @@ import { styled } from '@mui/material/styles'
 import Modal from '../../components/modal'
 import PermissionFilterModal from './permissionFilterModal'
 import AddPermissionModal from './addPermissionModal'
+import PermissionResponseModal, {
+  PermissionResponsePayload
+} from './addPermissionResponseModal'
 import UpdatePermissionModal from './updatePermissionModal'
 import DeleteConfirmationModal from '../../components/deleteConfirmationModal'
 import BootstrapSnackbar, { AlertSeverityType } from '../../components/snackbar'
@@ -36,12 +39,23 @@ import {
   PermissionResponse,
   RegisterPermissionPayload
 } from '../../utils/types'
+import {
+  findExistingPermission,
+  findUpdatingPermission
+} from '../../utils/helper'
+
 import { AppContext } from '../../context/appContext'
 
 const BootstrapTableCell = styled(TableCell)({
   textAlign: 'left'
 })
 
+const BootstrapGridItem = styled(Grid)({
+  '&.MuiGrid-item': {
+    maxWidth: '100%'
+  }
+})
+
 export enum PrincipalType {
   User = 'User',
   Group = 'Group'
@@ -59,6 +73,20 @@ const Permission = () => {
     AlertSeverityType.Success
   )
   const [addPermissionModalOpen, setAddPermissionModalOpen] = useState(false)
+  const [openPermissionResponseModal, setOpenPermissionResponseModal] =
+    useState(false)
+  const [permissionResponsePayload, setPermissionResponsePayload] =
+    useState<PermissionResponsePayload>({
+      permissionType: '',
+      principalType: '',
+      principal: '',
+      permissionSetting: '',
+      existingPermissions: [],
+      newAddedPermissions: [],
+      updatedPermissions: [],
+      errorPaths: []
+    })
+
   const [updatePermissionModalOpen, setUpdatePermissionModalOpen] =
     useState(false)
   const [deleteConfirmationModalOpen, setDeleteConfirmationModalOpen] =
@@ -181,29 +209,77 @@ const Permission = () => {
     setFilterApplied(false)
   }
 
-  const addPermission = (addPermissionPayload: RegisterPermissionPayload) => {
+  const addPermission = async (
+    permissionsToAdd: RegisterPermissionPayload[],
+    permissionType: string,
+    principalType: string,
+    principal: string,
+    permissionSetting: string
+  ) => {
     setAddPermissionModalOpen(false)
     setIsLoading(true)
-    axios
-      .post('/SASjsApi/permission', addPermissionPayload)
-      .then((res: any) => {
-        fetchPermissions()
-        setSnackbarMessage('Permission added!')
-        setSnackbarSeverity(AlertSeverityType.Success)
-        setOpenSnackbar(true)
-      })
-      .catch((err) => {
-        setModalTitle('Abort')
-        setModalPayload(
-          typeof err.response.data === 'object'
-            ? JSON.stringify(err.response.data)
-            : err.response.data
-        )
-        setOpenModal(true)
-      })
-      .finally(() => {
-        setIsLoading(false)
-      })
+
+    const newAddedPermissions: PermissionResponse[] = []
+    const updatedPermissions: PermissionResponse[] = []
+    const errorPaths: string[] = []
+
+    const existingPermissions: PermissionResponse[] = []
+    const updatingPermissions: PermissionResponse[] = []
+    const newPermissions: RegisterPermissionPayload[] = []
+
+    permissionsToAdd.forEach((permission) => {
+      const existingPermission = findExistingPermission(permissions, permission)
+      if (existingPermission) {
+        existingPermissions.push(existingPermission)
+        return
+      }
+
+      const updatingPermission = findUpdatingPermission(permissions, permission)
+      if (updatingPermission) {
+        updatingPermissions.push(updatingPermission)
+        return
+      }
+
+      newPermissions.push(permission)
+    })
+
+    for (const permission of newPermissions) {
+      await axios
+        .post('/SASjsApi/permission', permission)
+        .then((res) => {
+          newAddedPermissions.push(res.data)
+        })
+        .catch((error) => {
+          errorPaths.push(permission.path)
+        })
+    }
+
+    for (const permission of updatingPermissions) {
+      await axios
+        .patch(`/SASjsApi/permission/${permission.permissionId}`, {
+          setting: permission.setting === 'Grant' ? 'Deny' : 'Grant'
+        })
+        .then((res) => {
+          updatedPermissions.push(res.data)
+        })
+        .catch((error) => {
+          errorPaths.push(permission.path)
+        })
+    }
+
+    fetchPermissions()
+    setIsLoading(false)
+    setPermissionResponsePayload({
+      permissionType,
+      principalType,
+      principal,
+      permissionSetting,
+      existingPermissions,
+      updatedPermissions,
+      newAddedPermissions,
+      errorPaths
+    })
+    setOpenPermissionResponseModal(true)
   }
 
   const handleUpdatePermissionClick = (permission: PermissionResponse) => {
@@ -280,11 +356,11 @@ const Permission = () => {
   ) : (
     <Box className="permissions-page">
       <Grid container direction="column" spacing={1}>
-        <Grid item xs={12}>
+        <BootstrapGridItem item xs={12}>
           <Paper elevation={3} sx={{ display: 'flex' }}>
             <Tooltip title="Filter Permissions">
-              <IconButton>
-                <FilterListIcon onClick={() => setFilterModalOpen(true)} />
+              <IconButton onClick={() => setFilterModalOpen(true)}>
+                <FilterListIcon />
               </IconButton>
             </Tooltip>
             {appContext.isAdmin && (
@@ -299,14 +375,14 @@ const Permission = () => {
               </Tooltip>
             )}
           </Paper>
-        </Grid>
-        <Grid item xs={12}>
+        </BootstrapGridItem>
+        <BootstrapGridItem item xs={12}>
           <PermissionTable
             permissions={filterApplied ? filteredPermissions : permissions}
             handleUpdatePermissionClick={handleUpdatePermissionClick}
             handleDeletePermissionClick={handleDeletePermissionClick}
           />
-        </Grid>
+        </BootstrapGridItem>
       </Grid>
       <BootstrapSnackbar
         open={openSnackbar}
@@ -340,6 +416,11 @@ const Permission = () => {
         handleOpen={setAddPermissionModalOpen}
         addPermission={addPermission}
       />
+      <PermissionResponseModal
+        open={openPermissionResponseModal}
+        setOpen={setOpenPermissionResponseModal}
+        payload={permissionResponsePayload}
+      />
       <UpdatePermissionModal
         open={updatePermissionModalOpen}
         handleOpen={setUpdatePermissionModalOpen}
@@ -478,8 +559,8 @@ const DisplayGroup = ({ group }: DisplayGroupProps) => {
         <Typography sx={{ p: 1 }} variant="h6" component="div">
           Group Members
         </Typography>
-        {group.users.map((user) => (
-          <Typography sx={{ p: 1 }} component="li">
+        {group.users.map((user, index) => (
+          <Typography key={index} sx={{ p: 1 }} component="li">
             {user.username}
           </Typography>
         ))}

web/src/containers/Settings/permissionFilterModal.tsx

@@ -92,7 +92,7 @@ const PermissionFilterModal = ({
               onChange={(event: any, newValue: string[]) => {
                 setPathFilter(newValue)
               }}
-              renderInput={(params) => <TextField {...params} label="URIs" />}
+              renderInput={(params) => <TextField {...params} label="Paths" />}
             />
           </Grid>
           <Grid item xs={12}>

web/src/containers/Studio/editor.tsx

@@ -353,9 +353,7 @@ const SASjsEditor = ({
             sx={{
               borderBottom: 1,
               borderColor: 'divider',
-              position: 'fixed',
-              background: 'white',
-              width: '85%'
+              background: 'white'
             }}
           >
             <TabList onChange={handleTabChange} centered>
@@ -372,10 +370,7 @@ const SASjsEditor = ({
             </TabList>
           </Box>
 
-          <StyledTabPanel
-            sx={{ paddingBottom: 0, marginTop: '45px' }}
-            value="1"
-          >
+          <StyledTabPanel sx={{ paddingBottom: 0 }} value="1">
             <Box sx={{ display: 'flex', justifyContent: 'center' }}>
               <RunMenu
                 fileContent={fileContent}
@@ -442,13 +437,13 @@ const SASjsEditor = ({
             </Paper>
           </StyledTabPanel>
           <StyledTabPanel value="2">
-            <div style={{ marginTop: '50px' }}>
+            <div>
               <h2>SAS Log</h2>
               <pre>{log}</pre>
             </div>
           </StyledTabPanel>
           <StyledTabPanel value="3">
-            <div style={{ marginTop: '50px' }}>
+            <div>
               <pre>{webout}</pre>
             </div>
           </StyledTabPanel>

web/src/containers/Studio/sideBar.tsx

@@ -1,6 +1,15 @@
 import React, { useState, useMemo } from 'react'
 import axios from 'axios'
-import { Backdrop, Box, CircularProgress, Drawer, Toolbar } from '@mui/material'
+import {
+  Backdrop,
+  Box,
+  Paper,
+  CircularProgress,
+  Drawer,
+  Toolbar,
+  IconButton
+} from '@mui/material'
+import { FolderOpen } from '@mui/icons-material'
 
 import TreeView from '../../components/tree'
 import BootstrapSnackbar, { AlertSeverityType } from '../../components/snackbar'
@@ -33,6 +42,17 @@ const SideBar = ({
   const [snackbarSeverity, setSnackbarSeverity] = useState<AlertSeverityType>(
     AlertSeverityType.Success
   )
+  const [mobileOpen, setMobileOpen] = React.useState(false)
+
+  const handleDrawerToggle = () => {
+    setMobileOpen(!mobileOpen)
+  }
+
+  const handleFileSelect = (filePath: string) => {
+    setMobileOpen(false)
+    handleSelect(filePath)
+  }
+
   const defaultExpanded = useMemo(() => {
     const splittedPath = selectedFilePath.split('/')
     const arr = ['']
@@ -147,15 +167,8 @@ const SideBar = ({
       .finally(() => setIsLoading(false))
   }
 
-  return (
-    <Drawer
-      variant="permanent"
-      sx={{
-        width: drawerWidth,
-        flexShrink: 0,
-        [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' }
-      }}
-    >
+  const drawer = (
+    <div>
       <Backdrop
         sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
         open={isLoading}
@@ -168,7 +181,7 @@ const SideBar = ({
           <TreeView
             node={directoryData}
             selectedFilePath={selectedFilePath}
-            handleSelect={handleSelect}
+            handleSelect={handleFileSelect}
             deleteNode={deleteNode}
             addFile={addFile}
             addFolder={addFolder}
@@ -189,7 +202,64 @@ const SideBar = ({
         title={modalTitle}
         payload={modalPayload}
       />
-    </Drawer>
+    </div>
+  )
+
+  return (
+    <>
+      <Box
+        component={Paper}
+        sx={{
+          margin: '5px',
+          paddingTop: '45px',
+          display: 'flex',
+          alignItems: 'flex-start'
+        }}
+      >
+        <IconButton
+          color="inherit"
+          size="large"
+          aria-label="open drawer"
+          edge="start"
+          onClick={handleDrawerToggle}
+          sx={{ left: '5px', display: { md: 'none' } }}
+        >
+          <FolderOpen />
+        </IconButton>
+      </Box>
+      <Drawer
+        variant="temporary"
+        open={mobileOpen}
+        onClose={handleDrawerToggle}
+        ModalProps={{
+          keepMounted: true // Better open performance on mobile.
+        }}
+        sx={{
+          display: { xs: 'block', md: 'none' },
+          flexShrink: 0,
+          [`& .MuiDrawer-paper`]: {
+            width: 240,
+            boxSizing: 'border-box'
+          }
+        }}
+      >
+        {drawer}
+      </Drawer>
+      <Drawer
+        variant="permanent"
+        sx={{
+          display: { xs: 'none', md: 'block' },
+          width: drawerWidth,
+          flexShrink: 0,
+          [`& .MuiDrawer-paper`]: {
+            width: drawerWidth,
+            boxSizing: 'border-box'
+          }
+        }}
+      >
+        {drawer}
+      </Drawer>
+    </>
   )
 }
 

web/src/utils/helper.ts

@@ -0,0 +1,59 @@
+import { PermissionResponse, RegisterPermissionPayload } from './types'
+
+export const findExistingPermission = (
+  existingPermissions: PermissionResponse[],
+  newPermission: RegisterPermissionPayload
+) => {
+  for (const permission of existingPermissions) {
+    if (
+      permission.user?.id === newPermission.principalId &&
+      hasSameCombination(permission, newPermission)
+    )
+      return permission
+
+    if (
+      permission.group?.groupId === newPermission.principalId &&
+      hasSameCombination(permission, newPermission)
+    )
+      return permission
+  }
+
+  return null
+}
+
+export const findUpdatingPermission = (
+  existingPermissions: PermissionResponse[],
+  newPermission: RegisterPermissionPayload
+) => {
+  for (const permission of existingPermissions) {
+    if (
+      permission.user?.id === newPermission.principalId &&
+      hasDifferentSetting(permission, newPermission)
+    )
+      return permission
+
+    if (
+      permission.group?.groupId === newPermission.principalId &&
+      hasDifferentSetting(permission, newPermission)
+    )
+      return permission
+  }
+
+  return null
+}
+
+const hasSameCombination = (
+  existingPermission: PermissionResponse,
+  newPermission: RegisterPermissionPayload
+) =>
+  existingPermission.path === newPermission.path &&
+  existingPermission.type === newPermission.type &&
+  existingPermission.setting === newPermission.setting
+
+const hasDifferentSetting = (
+  existingPermission: PermissionResponse,
+  newPermission: RegisterPermissionPayload
+) =>
+  existingPermission.path === newPermission.path &&
+  existingPermission.type === newPermission.type &&
+  existingPermission.setting !== newPermission.setting