From fa396c7eddf0ab731faa36c68d806558878ea14c Mon Sep 17 00:00:00 2001
From: Florin Tudor <florin@ynput.io>
Date: Thu, 5 Dec 2024 17:06:41 +0100
Subject: [PATCH 1/4] fix(Permissions) Fixed typo that broke permissions
 navigation

---
 .../ProjectManagerPage/ProjectManagerPage.jsx    | 16 +++++++++-------
 .../ProjectManagerPage/ProjectPermissions.jsx    |  1 -
 src/pages/ProjectManagerPage/mappers.ts          |  6 +++---
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/pages/ProjectManagerPage/ProjectManagerPage.jsx b/src/pages/ProjectManagerPage/ProjectManagerPage.jsx
index 873d87084..3f3345878 100644
--- a/src/pages/ProjectManagerPage/ProjectManagerPage.jsx
+++ b/src/pages/ProjectManagerPage/ProjectManagerPage.jsx
@@ -113,6 +113,14 @@ const ProjectManagerPage = () => {
         shortcut: 'P+P',
       })
     }
+
+    links.push({
+      name: 'Project permissions',
+      path: ModulePath[Module.permissions],
+      module: Module.permissions,
+      accessLevels: ['manager'],
+    })
+
     if (userPermissions.canViewAny(UserPermissionsEntity.access) || module === Module.projectAccess) {
       links.push({
         name: 'Project access',
@@ -143,12 +151,6 @@ const ProjectManagerPage = () => {
       module: Module.teams,
       accessLevels: ['manager'],
     },
-    {
-      name: 'Permissions',
-      path: ModulePath[Module.permisssions],
-      module: Module.permisssions,
-      accessLevels: ['manager'],
-    },
   )
 
   const linksWithProject = useMemo(
@@ -194,7 +196,7 @@ const ProjectManagerPage = () => {
         {module === Module.projectAccess && <ProjectUserAccess onSelect={setSelectedProject} />}
         {module === Module.roots && <ProjectRoots userPermissions={userPermissions} />}
         {module === Module.teams && <TeamsPage />}
-        {module === Module.permisssions && <ProjectPermissions />}
+        {module === Module.permissions && <ProjectPermissions />}
       </ProjectManagerPageContainer>
 
       {showNewProject && (
diff --git a/src/pages/ProjectManagerPage/ProjectPermissions.jsx b/src/pages/ProjectManagerPage/ProjectPermissions.jsx
index 035455cae..2d96df317 100644
--- a/src/pages/ProjectManagerPage/ProjectPermissions.jsx
+++ b/src/pages/ProjectManagerPage/ProjectPermissions.jsx
@@ -4,7 +4,6 @@ import ProjectManagerPageLayout from './ProjectManagerPageLayout'
 import AccessGroups from '@pages/SettingsPage/AccessGroups'
 
 const ProjectPermissions = ({ projectName, projectList }) => {
-
   return (
     <ProjectManagerPageLayout projectList={projectList}>
       <ScrollPanel style={{ flexGrow: 1 }} className="transparent">
diff --git a/src/pages/ProjectManagerPage/mappers.ts b/src/pages/ProjectManagerPage/mappers.ts
index c3d30cf6f..c5d1d0623 100644
--- a/src/pages/ProjectManagerPage/mappers.ts
+++ b/src/pages/ProjectManagerPage/mappers.ts
@@ -7,7 +7,7 @@ export enum Module {
   projectAccess = 'projectAccess',
   roots = 'roots',
   teams = 'teams',
-  permisssions = 'permisssions',
+  permissions = 'permissions',
 }
 
 const ModuleList = [
@@ -17,7 +17,7 @@ const ModuleList = [
   Module.projectAccess,
   Module.roots,
   Module.teams,
-  Module.permisssions,
+  Module.permissions,
 ]
 
 const ModulePath = {
@@ -27,7 +27,7 @@ const ModulePath = {
   [Module.projectAccess]: '/manageProjects/projectAccess',
   [Module.roots]: '/manageProjects/roots',
   [Module.teams]: '/manageProjects/teams',
-  [Module.permisssions]: '/manageProjects/permissions',
+  [Module.permissions]: '/manageProjects/permissions',
 }
 
 const projectSorter =

From bd9a40695e9f8df7565d20c18aac64361675a9f2 Mon Sep 17 00:00:00 2001
From: Florin Tudor <florin@ynput.io>
Date: Thu, 5 Dec 2024 17:34:52 +0100
Subject: [PATCH 2/4] fix(Permissions) Using placeholder while no access group
 selected

---
 .../EmptyPlaceholderFlex.styled.ts            | 38 +++++++++++++++++++
 .../Users/ProjectUserAccess.styled.ts         | 36 ------------------
 .../Users/ProjectUserAccess.tsx               | 29 ++++++++------
 src/pages/SettingsPage/AccessGroups/index.tsx | 19 +++++++++-
 4 files changed, 72 insertions(+), 50 deletions(-)
 create mode 100644 src/components/EmptyPlaceholder/EmptyPlaceholderFlex.styled.ts

diff --git a/src/components/EmptyPlaceholder/EmptyPlaceholderFlex.styled.ts b/src/components/EmptyPlaceholder/EmptyPlaceholderFlex.styled.ts
new file mode 100644
index 000000000..ea74e6fab
--- /dev/null
+++ b/src/components/EmptyPlaceholder/EmptyPlaceholderFlex.styled.ts
@@ -0,0 +1,38 @@
+import styled from 'styled-components'
+import EmptyPlaceholder from './EmptyPlaceholder'
+
+export const EmptyPlaceholderFlex = styled(EmptyPlaceholder)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+  position: relative;
+  max-width: 100%;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  transform: none;
+  gap: 8px;
+  .icon {
+    font-size: 34px;
+  }
+  h3 {
+    font-size: 18px;
+  }
+`
+export const EmptyPlaceholderFlexWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  position: relative;
+  height: 100%;
+  border-radius: var(--border-radius-m);
+
+  background: var(--md-sys-color-surface-container-low);
+  .header {
+    margin: 0;
+    padding: 9.4px 8px;
+    text-transform: capitalize;
+  }
+`
diff --git a/src/pages/ProjectManagerPage/Users/ProjectUserAccess.styled.ts b/src/pages/ProjectManagerPage/Users/ProjectUserAccess.styled.ts
index f9bf54a10..6a8465c17 100644
--- a/src/pages/ProjectManagerPage/Users/ProjectUserAccess.styled.ts
+++ b/src/pages/ProjectManagerPage/Users/ProjectUserAccess.styled.ts
@@ -1,43 +1,7 @@
-import EmptyPlaceholder from '@components/EmptyPlaceholder/EmptyPlaceholder'
 import { Button } from '@ynput/ayon-react-components'
 import { DataTable as BaseDataTable } from 'primereact/datatable'
 import styled from 'styled-components'
 
-export const StyledEmptyPlaceholder = styled(EmptyPlaceholder)`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex-grow: 1;
-  position: relative;
-  max-width: 100%;
-  overflow: hidden;
-  top: 0;
-  left: 0;
-  transform: none;
-  gap: 8px;
-  .icon {
-    font-size: 34px;
-  }
-  h3 {
-    font-size: 18px;
-  }
-`
-export const StyledEmptyPlaceholderWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-
-  position: relative;
-  height: 100%;
-  border-radius: var(--border-radius-m);
-
-  background: var(--md-sys-color-surface-container-low);
-  .header {
-    margin: 0;
-    padding: 9.4px 8px;
-    text-transform: capitalize;
-  }
-`
 export const StyledHeader = styled.p`
   font-size: 16px;
   line-height: 24px;
diff --git a/src/pages/ProjectManagerPage/Users/ProjectUserAccess.tsx b/src/pages/ProjectManagerPage/Users/ProjectUserAccess.tsx
index 881d46783..0c5aace95 100644
--- a/src/pages/ProjectManagerPage/Users/ProjectUserAccess.tsx
+++ b/src/pages/ProjectManagerPage/Users/ProjectUserAccess.tsx
@@ -25,7 +25,11 @@ import {
   mapUsersByAccessGroups,
 } from './mappers'
 import { HoveredUser, SelectedAccessGroupUsers, SelectionStatus } from './types'
-import { useUserPreferencesExpandedPanels, useProjectAccessGroupData, useUserPageFilters } from './hooks'
+import {
+  useUserPreferencesExpandedPanels,
+  useProjectAccessGroupData,
+  useUserPageFilters,
+} from './hooks'
 import ProjectUserAccessUserList from './ProjectUserAccessUserList'
 import ProjectUserAccessAssignDialog from './ProjectUserAccessAssignDialog'
 import ProjectUserAccessSearchFilterWrapper from './ProjectUserAccessSearchFilterWrapper'
@@ -33,8 +37,6 @@ import ProjectUserAccessProjectList from './ProjectUserAccessProjectList'
 import {
   AccessGroupsWrapper,
   ProjectUserAccessUserListWrapper,
-  StyledEmptyPlaceholder,
-  StyledEmptyPlaceholderWrapper,
   StyledHeader,
 } from './ProjectUserAccess.styled'
 import SplitterContainerThreePanes from './SplitterThreePanes'
@@ -44,6 +46,10 @@ import LoadingPage from '@pages/LoadingPage'
 import { useQueryParam } from 'use-query-params'
 import { uuid } from 'short-uuid'
 import ProjectUserAccesAccessGroupPanel from './ProjectUserAccessAccessGroupPanel'
+import {
+  EmptyPlaceholderFlex,
+  EmptyPlaceholderFlexWrapper,
+} from '@components/EmptyPlaceholder/EmptyPlaceholderFlex.styled'
 
 const StyledButton = styled(Button)`
   .shortcut {
@@ -160,7 +166,7 @@ const ProjectUserAccess = () => {
       interactionType: InteractionType.bulkButton,
     })
 
-    handleAdd({users: actionedUsers})
+    handleAdd({ users: actionedUsers })
   }
 
   const handleRemoveButton = () => {
@@ -171,14 +177,14 @@ const ProjectUserAccess = () => {
     onRemove(actionedAccessGroup)(actionedUsers)
   }
 
-  const handleRowAddButton = (data: {accessGroup?: string, users: string[]}) => {
+  const handleRowAddButton = (data: { accessGroup?: string; users: string[] }) => {
     const { actionedUsers } = decideActionedUsers({
       accessGroup: data.accessGroup,
       users: data.users,
       interactionType: InteractionType.button,
     })
 
-    handleAdd({users: actionedUsers})
+    handleAdd({ users: actionedUsers })
   }
 
   const handleContextMenu = (accessGroup?: string) => (e: $Any) => {
@@ -219,7 +225,7 @@ const ProjectUserAccess = () => {
     ])
   }
 
-  const handleAdd = ({users}: {users: string[]}) => {
+  const handleAdd = ({ users }: { users: string[] }) => {
     if (filteredAccessGroups.length == 1) {
       onSave(users, [{ name: filteredAccessGroups[0].name, status: SelectionStatus.All }])
 
@@ -249,7 +255,6 @@ const ProjectUserAccess = () => {
     button = 'button',
     bulkButton = 'bulk',
     keyDown = 'keydown',
-
   }
   const decideActionedUsers = ({
     accessGroup,
@@ -484,13 +489,13 @@ const ProjectUserAccess = () => {
         <SplitterContainerTwoPanes
           leftContent={projectsContent}
           mainContent={
-            <StyledEmptyPlaceholderWrapper>
-              <StyledEmptyPlaceholder message={errorInfo!.message} icon={errorInfo!.icon}>
+            <EmptyPlaceholderFlexWrapper>
+              <EmptyPlaceholderFlex message={errorInfo!.message} icon={errorInfo!.icon}>
                 {errorInfo!.details && (
                   <span style={{ textAlign: 'center' }}>{errorInfo!.details!}</span>
                 )}
-              </StyledEmptyPlaceholder>
-            </StyledEmptyPlaceholderWrapper>
+              </EmptyPlaceholderFlex>
+            </EmptyPlaceholderFlexWrapper>
           }
         />
       )}
diff --git a/src/pages/SettingsPage/AccessGroups/index.tsx b/src/pages/SettingsPage/AccessGroups/index.tsx
index 34a5ef7d3..a462f1e24 100644
--- a/src/pages/SettingsPage/AccessGroups/index.tsx
+++ b/src/pages/SettingsPage/AccessGroups/index.tsx
@@ -2,6 +2,10 @@ import { useState } from 'react'
 import AccessGroupList from './AccessGroupList'
 import AccessGroupDetail from './AccessGroupDetail'
 import { AccessGroupObject } from '@api/rest/accessGroups'
+import {
+  EmptyPlaceholderFlex,
+  EmptyPlaceholderFlexWrapper,
+} from '@components/EmptyPlaceholder/EmptyPlaceholderFlex.styled'
 
 type Props = {
   projectName?: string
@@ -12,7 +16,7 @@ const AccessGroups = ({ projectName, canCreateOrDelete }: Props) => {
   const [selectedAccessGroup, setSelectedAccessGroup] = useState<AccessGroupObject | null>(null)
 
   return (
-    <main style={{display: 'flex', flexGrow: 1}}>
+    <main style={{ display: 'flex', flexGrow: 1 }}>
       <AccessGroupList
         canCreateOrDelete={canCreateOrDelete}
         projectName={projectName}
@@ -20,7 +24,18 @@ const AccessGroups = ({ projectName, canCreateOrDelete }: Props) => {
         onSelectAccessGroup={setSelectedAccessGroup}
       />
 
-      <AccessGroupDetail projectName={projectName} accessGroupName={selectedAccessGroup?.name} />
+      {!selectedAccessGroup && (
+        <EmptyPlaceholderFlexWrapper>
+          <EmptyPlaceholderFlex
+            message="No access group selected"
+            icon={'group'}
+          ></EmptyPlaceholderFlex>
+        </EmptyPlaceholderFlexWrapper>
+      )}
+
+      {selectedAccessGroup && (
+        <AccessGroupDetail projectName={projectName} accessGroupName={selectedAccessGroup?.name} />
+      )}
     </main>
   )
 }

From 17da38fe431257b8f68b3a6f90c55f230e470f57 Mon Sep 17 00:00:00 2001
From: Florin Tudor <florin@ynput.io>
Date: Thu, 5 Dec 2024 17:52:37 +0100
Subject: [PATCH 3/4] fix(AccessGroups) Allowing remove from all in main user
 panel, removing instead of disabling context menu items

---
 .../ProjectManagerPage/Users/ProjectUserAccess.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/pages/ProjectManagerPage/Users/ProjectUserAccess.tsx b/src/pages/ProjectManagerPage/Users/ProjectUserAccess.tsx
index 0c5aace95..5beb4f58a 100644
--- a/src/pages/ProjectManagerPage/Users/ProjectUserAccess.tsx
+++ b/src/pages/ProjectManagerPage/Users/ProjectUserAccess.tsx
@@ -194,7 +194,7 @@ const ProjectUserAccess = () => {
       interactionType: InteractionType.button,
     })
 
-    ctxMenuShow(e.originalEvent, [
+    let contextMenu = [
       {
         id: 'add',
         icon: 'add',
@@ -205,24 +205,26 @@ const ProjectUserAccess = () => {
         id: 'remove',
         icon: 'remove',
         label: 'Remove access',
-        disabled: accessGroup === undefined,
         command: () => onRemove(accessGroup)(actionedUsers),
       },
       {
-        id: 'remove',
+        id: 'remove_all',
         icon: 'remove_moderator',
         label: 'Remove all access',
-        disabled: accessGroup === undefined,
         command: () => onRemove()(actionedUsers),
       },
       {
         id: 'filter_by_user',
         icon: 'person',
         label: 'Filter by user',
-        disabled: false,
         command: () => handleUserFilterUpdate(actionedUsers),
       },
-    ])
+    ]
+    if (accessGroup === undefined) {
+      contextMenu = contextMenu.filter((item) => item.id !== 'remove')
+    }
+
+    ctxMenuShow(e.originalEvent, contextMenu)
   }
 
   const handleAdd = ({ users }: { users: string[] }) => {

From 67f7a43c04874572a74949014e27fd2d5087fb0d Mon Sep 17 00:00:00 2001
From: Florin Tudor <florin@ynput.io>
Date: Thu, 5 Dec 2024 18:37:07 +0100
Subject: [PATCH 4/4] fix(AccessGroups) Added missing gap between project
 pemissions panels

---
 src/pages/SettingsPage/AccessGroups/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/SettingsPage/AccessGroups/index.tsx b/src/pages/SettingsPage/AccessGroups/index.tsx
index a462f1e24..28bf24d56 100644
--- a/src/pages/SettingsPage/AccessGroups/index.tsx
+++ b/src/pages/SettingsPage/AccessGroups/index.tsx
@@ -16,7 +16,7 @@ const AccessGroups = ({ projectName, canCreateOrDelete }: Props) => {
   const [selectedAccessGroup, setSelectedAccessGroup] = useState<AccessGroupObject | null>(null)
 
   return (
-    <main style={{ display: 'flex', flexGrow: 1 }}>
+    <main style={{ display: 'flex', flexGrow: 1, gap: 'var(--base-gap-large)'}}>
       <AccessGroupList
         canCreateOrDelete={canCreateOrDelete}
         projectName={projectName}