Projects

We'll make some changes to the files in the 'src/components/projects' folder.

In the 'Projects.js' file, change the column on line 75 to:

{
    selectedProject
        ? <Project project={selectedProject} setSelectedProject={setSelectedProject} setProjects={setProjects}/>
        : <AccessGuard resourceId={authCtx.user.accountId} action="CreateProject">
            <CreateProject setProjects={setProjects}/>
        </AccessGuard>
}

The CreateProject component is now behind an AccessGuard component that only displays it if the user has the 'CreateProject' permission on the account.

Also update the ProjectButton component to this:

function ProjectButton(props) {
    const [readAccess, setReadAccess] = useState(false)
    useAccess(props.project.id, "ReadProject", setReadAccess)

    return <>
        <ListGroupItem
            disabled={!readAccess}
            .
            .
            .

This will disable the ListGroupItem if the user doesn't have the 'ReadProject' permission on the project.

The above two components are all you need to build a responsive UI that changes according to user permissions.

In the 'Project.js' file, look for the ProjectDashboard component, and wrap the 'Delete Project' button in an AccessGuard like this:

<AccessGuard resourceId={project.id} action="DeleteProject">
    <Button variant="danger" onClick={handleDeleteClicked}>Delete Project</Button>
</AccessGuard>

Next, wrap the Permissions component in an AccessGuard like this:

<AccessGuard resourceId={project.id} action="ReadProjectPermissions">
    <Permissions resourceId={project.id} changeAction="ChangeProjectPermissions"/>
</AccessGuard>