chore(release): 0.15.1 [skip ci]

## [0.15.1](https://github.com/sasjs/server/compare/v0.15.0...v0.15.1) (2022-08-10)

### Bug Fixes

* **web:** fix UI responsiveness ([d99fdd1](d99fdd1ec7))

CHANGELOG.md

@@ -1,3 +1,36 @@
+## [0.15.1](https://github.com/sasjs/server/compare/v0.15.0...v0.15.1) (2022-08-10)
+
+
+### Bug Fixes
+
+* **web:** fix UI responsiveness ([d99fdd1](https://github.com/sasjs/server/commit/d99fdd1ec7991b94a0d98338d7a7a6216f46ce45))
+
+# [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)
+
+
+### Bug Fixes
+
+* **apps:** App Stream logo fix ([87c03c5](https://github.com/sasjs/server/commit/87c03c5f8dbdfc151d4ff3722ecbcd3f7e409aea))
+* **cookie:** XSRF cookie is removed and passed token in head section ([77f8d30](https://github.com/sasjs/server/commit/77f8d30baf9b1077279c29f1c3e5ca02a5436bc0))
+* **env:** check added for not providing WHITELIST ([5966016](https://github.com/sasjs/server/commit/5966016853369146b27ac5781808cb51d65c887f))
+* **web:** show login on logged-out state ([f7fcc77](https://github.com/sasjs/server/commit/f7fcc7741aa2af93a4a2b1e651003704c9bbff0c))
+
 # [0.14.0](https://github.com/sasjs/server/compare/v0.13.3...v0.14.0) (2022-08-02)
 
 

api/src/app.ts

@@ -1,6 +1,6 @@
 import path from 'path'
 import express, { ErrorRequestHandler } from 'express'
-import csrf from 'csurf'
+import csrf, { CookieOptions } from 'csurf'
 import cookieParser from 'cookie-parser'
 import dotenv from 'dotenv'
 
@@ -32,9 +32,10 @@ const app = express()
 
 const { PROTOCOL } = process.env
 
-export const cookieOptions = {
+export const cookieOptions: CookieOptions = {
   secure: PROTOCOL === ProtocolType.HTTPS,
   httpOnly: true,
+  sameSite: PROTOCOL === ProtocolType.HTTPS ? 'none' : undefined,
   maxAge: 24 * 60 * 60 * 1000 // 24 hours
 }
 

api/src/routes/api/spec/web.spec.ts

@@ -39,12 +39,11 @@ describe('web', () => {
 
   describe('home', () => {
     it('should respond with CSRF Token', async () => {
-      await request(app)
-        .get('/')
-        .expect(
-          'set-cookie',
-          /_csrf=.*; Max-Age=86400000; Path=\/; HttpOnly,XSRF-TOKEN=.*; Path=\//
-        )
+      const res = await request(app).get('/').expect(200)
+
+      expect(res.text).toMatch(
+        /<script>document.cookie = '(XSRF-TOKEN=.*; Max-Age=86400; SameSite=Strict; Path=\/;)'<\/script>/
+      )
     })
   })
 
@@ -154,10 +153,10 @@ describe('web', () => {
 
 const getCSRF = async (app: Express) => {
   // make request to get CSRF
-  const { header } = await request(app).get('/')
+  const { header, text } = await request(app).get('/')
   const cookies = header['set-cookie'].join()
 
-  const csrfToken = extractCSRF(cookies)
+  const csrfToken = extractCSRF(text)
   return { csrfToken, cookies }
 }
 
@@ -177,7 +176,7 @@ const performLogin = async (
   return { cookies: newCookies }
 }
 
-const extractCSRF = (cookies: string) =>
-  /_csrf=(.*); Max-Age=86400000; Path=\/; HttpOnly,XSRF-TOKEN=(.*); Path=\//.exec(
-    cookies
-  )![2]
+const extractCSRF = (text: string) =>
+  /<script>document.cookie = 'XSRF-TOKEN=(.*); Max-Age=86400; SameSite=Strict; Path=\/;'<\/script>/.exec(
+    text
+  )![1]

api/src/routes/appStream/style.ts

@@ -26,6 +26,7 @@ export const style = `<style>
 }
 .app-container .app img{
   width: 100%;
+  height: calc(100% - 30px);
   margin-bottom: 10px;
   border-radius: 10px;
 }

api/src/routes/web/web.ts

@@ -11,11 +11,15 @@ webRouter.get('/', async (req, res) => {
   try {
     response = await controller.home()
   } catch (_) {
-    response = 'Web Build is not present'
+    response = '<html><head></head><body>Web Build is not present</body></html>'
   } finally {
-    res.cookie('XSRF-TOKEN', req.csrfToken())
+    const codeToInject = `<script>document.cookie = 'XSRF-TOKEN=${req.csrfToken()}; Max-Age=86400; SameSite=Strict; Path=/;'</script>`
+    const injectedContent = response?.replace(
+      '</head>',
+      `${codeToInject}</head>`
+    )
 
-    return res.send(response)
+    return res.send(injectedContent)
   }
 })
 

api/src/utils/verifyEnvVariables.ts

@@ -125,8 +125,27 @@ const verifyCORS = (): string[] => {
 
   if (CORS) {
     const corsTypes = Object.values(CorsType)
+
     if (!corsTypes.includes(CORS as CorsType))
       errors.push(`- CORS '${CORS}'\n - valid options ${corsTypes}`)
+
+    if (CORS === CorsType.ENABLED) {
+      const { WHITELIST } = process.env
+
+      const urls = WHITELIST?.trim()
+        .split(' ')
+        .filter((url) => !!url)
+      if (urls?.length) {
+        urls.forEach((url) => {
+          if (!url.startsWith('http://') && !url.startsWith('https://'))
+            errors.push(
+              `- CORS '${CORS}'\n - provided WHITELIST ${url} is not valid`
+            )
+        })
+      } else {
+        errors.push(`- CORS '${CORS}'\n - provide at least one WHITELIST URL`)
+      }
+    }
   } else {
     const { MODE } = process.env
     process.env.CORS =

web/src/App.tsx

@@ -22,7 +22,7 @@ function App() {
         <HashRouter>
           <Header />
           <Routes>
-            <Route path="/" element={<Login />} />
+            <Route path="*" element={<Login />} />
           </Routes>
         </HashRouter>
       </ThemeProvider>

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

@@ -1,4 +1,11 @@
-import React, { useEffect, useRef, useState, useContext } from 'react'
+import React, {
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+  useContext
+} from 'react'
 import axios from 'axios'
 
 import {
@@ -58,13 +65,17 @@ const StyledTab = styled(Tab)(() => ({
 type SASjsEditorProps = {
   selectedFilePath: string
   setSelectedFilePath: (filePath: string, refreshSideBar?: boolean) => void
+  tab: string
+  setTab: Dispatch<SetStateAction<string>>
 }
 
 const baseUrl = window.location.origin
 
 const SASjsEditor = ({
   selectedFilePath,
-  setSelectedFilePath
+  setSelectedFilePath,
+  tab,
+  setTab
 }: SASjsEditorProps) => {
   const appContext = useContext(AppContext)
   const [isLoading, setIsLoading] = useState(false)
@@ -81,7 +92,6 @@ const SASjsEditor = ({
   const [log, setLog] = useState('')
   const [ctrlPressed, setCtrlPressed] = useState(false)
   const [webout, setWebout] = useState('')
-  const [tab, setTab] = useState('1')
   const [runTimes, setRunTimes] = useState<string[]>([])
   const [selectedRunTime, setSelectedRunTime] = useState('')
   const [selectedFileExtension, setSelectedFileExtension] = useState('')
@@ -161,7 +171,7 @@ const SASjsEditor = ({
     }
     setLog('')
     setWebout('')
-    setTab('1')
+    setTab('code')
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedFilePath])
 
@@ -200,10 +210,11 @@ const SASjsEditor = ({
         setLog(parsedLog)
 
         setWebout(`${res.data?._webout}`)
-        setTab('2')
+        setTab('log')
 
         // Scroll to bottom of log
-        window.scrollTo(0, document.body.scrollHeight)
+        const logElement = document.getElementById('log')
+        if (logElement) logElement.scrollTop = logElement.scrollHeight
       })
       .catch((err) => {
         setModalTitle('Abort')
@@ -353,29 +364,24 @@ const SASjsEditor = ({
             sx={{
               borderBottom: 1,
               borderColor: 'divider',
-              position: 'fixed',
-              background: 'white',
-              width: '85%'
+              background: 'white'
             }}
           >
             <TabList onChange={handleTabChange} centered>
-              <StyledTab label="Code" value="1" />
-              <StyledTab label="Log" value="2" />
+              <StyledTab label="Code" value="code" />
+              <StyledTab label="Log" value="log" />
               <StyledTab
                 label={
                   <Tooltip title="Displays content from the _webout fileref">
                     <Typography>Webout</Typography>
                   </Tooltip>
                 }
-                value="3"
+                value="webout"
               />
             </TabList>
           </Box>
 
-          <StyledTabPanel
-            sx={{ paddingBottom: 0, marginTop: '45px' }}
-            value="1"
-          >
+          <StyledTabPanel sx={{ paddingBottom: 0 }} value="code">
             <Box sx={{ display: 'flex', justifyContent: 'center' }}>
               <RunMenu
                 fileContent={fileContent}
@@ -441,14 +447,16 @@ const SASjsEditor = ({
               </p>
             </Paper>
           </StyledTabPanel>
-          <StyledTabPanel value="2">
-            <div style={{ marginTop: '50px' }}>
-              <h2>SAS Log</h2>
-              <pre>{log}</pre>
+          <StyledTabPanel value="log">
+            <div>
+              <h2>Log</h2>
+              <pre id="log" style={{ overflow: 'auto', height: '75vh' }}>
+                {log}
+              </pre>
             </div>
           </StyledTabPanel>
-          <StyledTabPanel value="3">
-            <div style={{ marginTop: '50px' }}>
+          <StyledTabPanel value="webout">
+            <div>
               <pre>{webout}</pre>
             </div>
           </StyledTabPanel>

web/src/containers/Studio/index.tsx

@@ -14,6 +14,7 @@ const Studio = () => {
   const [searchParams, setSearchParams] = useSearchParams()
   const [selectedFilePath, setSelectedFilePath] = useState('')
   const [directoryData, setDirectoryData] = useState<TreeNode | null>(null)
+  const [tab, setTab] = useState('code')
 
   useEffect(() => {
     setSelectedFilePath(searchParams.get('filePath') ?? '')
@@ -83,16 +84,20 @@ const Studio = () => {
   return (
     <Box sx={{ display: 'flex' }}>
       <CssBaseline />
-      <SideBar
-        selectedFilePath={selectedFilePath}
-        directoryData={directoryData}
-        handleSelect={handleSelect}
-        removeFileFromTree={removeFileFromTree}
-        refreshSideBar={fetchDirectoryData}
-      />
+      {tab === 'code' && (
+        <SideBar
+          selectedFilePath={selectedFilePath}
+          directoryData={directoryData}
+          handleSelect={handleSelect}
+          removeFileFromTree={removeFileFromTree}
+          refreshSideBar={fetchDirectoryData}
+        />
+      )}
       <SASjsEditor
         selectedFilePath={selectedFilePath}
         setSelectedFilePath={handleSelect}
+        tab={tab}
+        setTab={setTab}
       />
     </Box>
   )

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,65 @@ const SideBar = ({
         title={modalTitle}
         payload={modalPayload}
       />
-    </Drawer>
+    </div>
+  )
+
+  return (
+    <>
+      <Box
+        component={Paper}
+        sx={{
+          margin: '5px',
+          height: '97vh',
+          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/context/appContext.tsx

@@ -80,7 +80,18 @@ const AppContextProvider = (props: { children: ReactNode }) => {
       })
       .catch(() => {
         setLoggedIn(false)
-        axios.get('/') // get CSRF TOKEN
+        // get CSRF TOKEN and set cookie
+        axios
+          .get('/')
+          .then((res) => res.data)
+          .then((data: string) => {
+            const result =
+              /<script>document.cookie = '(XSRF-TOKEN=.*; Max-Age=86400; SameSite=Strict; Path=\/;)'<\/script>/.exec(
+                data
+              )?.[1]
+
+            if (result) document.cookie = result
+          })
       })
 
     axios

web/src/index.css

@@ -13,7 +13,7 @@ code {
 }
 
 .main {
-  margin-top: 50px;
+  margin: 50px 10px 0 10px;
   display: flex;
   flex-direction: column;
   align-items: center;

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