Merge pull request #948 from ynput/947-project-permissions-empty-page…

…-on-load Permissions: UI/UX fixes & typo bugfix
ynput · Dec 5, 2024 · bdf72d4 · bdf72d4
2 parents 0c98ccb + 67f7a43
commit bdf72d4
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 67 deletions.
diff --git a/src/components/EmptyPlaceholder/EmptyPlaceholderFlex.styled.ts 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/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
@@ -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/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
@@ -25,16 +25,18 @@ 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'
 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) => {
@@ -188,7 +194,7 @@ const ProjectUserAccess = () => {
       interactionType: InteractionType.button,
     })
 
-    ctxMenuShow(e.originalEvent, [
+    let contextMenu = [
       {
         id: 'add',
         icon: 'add',
@@ -199,27 +205,29 @@ 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[]}) => {
+  const handleAdd = ({ users }: { users: string[] }) => {
     if (filteredAccessGroups.length == 1) {
       onSave(users, [{ name: filteredAccessGroups[0].name, status: SelectionStatus.All }])
 
@@ -249,7 +257,6 @@ const ProjectUserAccess = () => {
     button = 'button',
     bulkButton = 'bulk',
     keyDown = 'keydown',
-
   }
   const decideActionedUsers = ({
     accessGroup,
@@ -484,13 +491,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/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 =

diff --git 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,15 +16,26 @@ 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}
         selectedAccessGroup={selectedAccessGroup}
         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>
   )
 }