feature(Users): User Permissions class refactoring, removed gap in pr…

…ojects list component when user lacks create project permissions
ynput · Nov 11, 2024 · cface9e · cface9e
1 parent db46674
commit cface9e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 21 deletions.
diff --git a/src/containers/AddonSettings/AddonSettings.jsx b/src/containers/AddonSettings/AddonSettings.jsx
@@ -54,6 +54,7 @@ const isChildPath = (childPath, parentPath) => {
 }
 
 const AddonSettings = ({ projectName, showSites = false }) => {
+  const isUser = useSelector((state) => state.user.data.isUser)
   //const navigate = useNavigate()
   const [showHelp, setShowHelp] = useState(false)
   const [selectedAddons, setSelectedAddons] = useState([])
@@ -75,7 +76,7 @@ const AddonSettings = ({ projectName, showSites = false }) => {
   const [promoteBundle] = usePromoteBundleMutation()
   const { requestPaste } = usePaste()
 
-  const userPermissions = useUserProjectPermissions(projectName)
+  const userPermissions = useUserProjectPermissions(null, isUser)
 
   const projectKey = projectName || '_'
 

diff --git a/src/containers/projectList.jsx b/src/containers/projectList.jsx
@@ -55,11 +55,6 @@ const StyledProjectName = styled.div`
   }
 `
 
-const ButtonPlaceholder = styled.div`
-  height: 26px;
-  width: 100%;
-`
-
 const StyledAddButton = styled(Button)`
   overflow: hidden;
   position: relative;
@@ -227,7 +222,7 @@ const ProjectList = ({
 
   const [updateUserPreferences] = useSetFrontendPreferencesMutation()
 
-  const userPermissions = useUserProjectPermissions()
+  const userPermissions = useUserProjectPermissions(null, user?.data?.isUser || true)
 
   const handlePinProjects = async (sel, isPinning) => {
     try {
@@ -417,7 +412,7 @@ const ProjectList = ({
           </div>
           {/* <div className="spacer" /> */}
         </StyledAddButton>
-      ): <ButtonPlaceholder />}
+      ): null}
 
       <TablePanel>
         {isCollapsible && (

diff --git a/src/hooks/useUserProjectPermissions.ts b/src/hooks/useUserProjectPermissions.ts
@@ -15,37 +15,37 @@ enum UserPermissionsEntity {
 
 class UserPermissions {
   permissions: GetCurrentUserPermissionsApiResponse
-  isUser: boolean
+  hasLimitedPermissions: boolean
 
-  constructor(permissions: GetCurrentUserPermissionsApiResponse, isUser: boolean = false) {
+  constructor(permissions: GetCurrentUserPermissionsApiResponse, hasLimitedPermissions: boolean = false) {
     this.permissions = permissions
-    this.isUser = isUser
+    this.hasLimitedPermissions = hasLimitedPermissions
   }
 
   canCreateProject(): boolean {
-    if (!this.isUser) {
+    if (!this.hasLimitedPermissions) {
       return true
     }
     return this.projectSettingsAreEnabled() && this.permissions?.project?.create || false
   }
 
   getPermissionLevel(type: UserPermissionsEntity): UserPermissionsLevel {
-    if (!this.isUser) {
+    if (!this.hasLimitedPermissions) {
       return UserPermissionsLevel.readWrite
     }
     return this.permissions?.project?.[type]|| UserPermissionsLevel.readWrite
   }
 
   canEdit(type: UserPermissionsEntity): boolean {
-    if (!this.isUser || !this.projectSettingsAreEnabled()) {
+    if (!this.hasLimitedPermissions || !this.projectSettingsAreEnabled()) {
       return true
     }
 
     return this.permissions?.project?.[type] === UserPermissionsLevel.readWrite
   }
 
   canView(type: UserPermissionsEntity): boolean {
-    if (!this.isUser || !this.projectSettingsAreEnabled()) {
+    if (!this.hasLimitedPermissions || !this.projectSettingsAreEnabled()) {
       return true
     }
 
@@ -95,12 +95,12 @@ class UserPermissions {
   }
 }
 
-const useUserProjectPermissions = (projectName: string, isUser?: boolean): UserPermissions | undefined => {
+const useUserProjectPermissions = (projectName: string, hasLimitedPermissions?: boolean): UserPermissions | undefined => {
   const { data: permissions } = projectName
     ? useGetCurrentUserProjectPermissionsQuery({ projectName })
     : useGetCurrentUserPermissionsQuery()
 
-  return new UserPermissions(permissions, isUser)
+  return new UserPermissions(permissions, hasLimitedPermissions)
 }
 
 export { UserPermissionsLevel }

diff --git a/src/pages/ProjectManagerPage/ProjectAnatomy.jsx b/src/pages/ProjectManagerPage/ProjectAnatomy.jsx
@@ -9,16 +9,19 @@ import copyToClipboard from '@helpers/copyToClipboard'
 import { usePaste } from '@context/pasteContext'
 import useUserProjectPermissions, { UserPermissionsLevel } from '@hooks/useUserProjectPermissions'
 import EmptyPlaceholder from '@components/EmptyPlaceholder/EmptyPlaceholder'
+import { useSelector } from 'react-redux'
 
 const ProjectAnatomy = ({ projectName, projectList }) => {
-  const [formData, setFormData] = useState(null)
-  const [isChanged, setIsChanged] = useState(false)
-
+  const isUser = useSelector((state) => state.user.data.isUser)
   const [updateProjectAnatomy, { isLoading: isUpdating }] = useUpdateProjectAnatomyMutation()
   const { requestPaste } = usePaste()
 
-  const userPermissions = useUserProjectPermissions(projectName)
+  const userPermissions = useUserProjectPermissions(projectName, isUser)
   const accessLevel = userPermissions.getAnatomyPermissionLevel()
+  const [formData, setFormData] = useState(null)
+  const [isChanged, setIsChanged] = useState(false)
+
+
 
   const saveAnatomy = () => {
     updateProjectAnatomy({ projectName, anatomy: formData })