Sprints

Let's navigate to the 'sprints' folder.

In the 'Sprints.js' file, change the sprints map on line 53 to the following:

sprints.map(sprint => {
    return (
        <li className="nav-item" key={sprint.id}>
            <AccessGuard
                resourceId={sprint.id}
                action="ReadSprint"
                otherwise={<span>{sprint.sprintNumber}: {sprint.goal}</span>}>
                <Link to={`/sprints/${sprint.id}`}>
                    <i>{sprint.sprintNumber}: {sprint.goal}</i>
                    <i className="m-1">&#8594;</i>
                </Link>
            </AccessGuard>
        </li>
    )
})

It if the user doesn't have the 'ReadSprint' permission on the sprint, it will display a span instead of a link element.

Next, wrap the CreateSprint component and link in an AccessGuard like this:

<AccessGuard resourceId={project.id} action="CreateSprint">
    {
        !showCreate && <Link to="" onClick={handleNewClicked}>New Sprint</Link>
    }
    {
        showCreate && <CreateSprint
            sprints={sprints}
            setSprints={setSprints}
            setShowCreate={setShowCreate}/>
    }
</AccessGuard>

Now the user won't see the link or the component if they don't have the 'CreateSprint' permission on the project.

In the 'Sprint.js' file, look for the Dashboard component, and add an extra tab for Sprint permissions like this:

<Tabs defaultActiveKey="stories">
    <Tab eventKey="stories" title="Stories" className="m-2"><Stories /></Tab>
    <Tab eventKey="details" title="Details" className="m-2"><Details /></Tab>
    <Tab eventKey="permissions" title="Permissions" className="m-2"><SprintPermissions /></Tab>
</Tabs>

In the ChangeSprint component, wrap the Start / End button in an AccessGuard like this:

<AccessGuard resourceId={sprintCtx.sprint.id} action="StartSprint">
    <Btn onClick={handleButtonClicked}>{start ? "Start" : "End"} sprint</Btn>
</AccessGuard>

Since the StartSprint and EndSprint actions are part of the same policy, we can safely check for just one of them to enable the button.

We'll leave it as an exercise to make the StartSprint and EndSprint part of different policies, which will then require coding a Start and End button seperately.

Also, add a Permissions component to the file:

function SprintPermissions() {
    const sprintCtx = useContext(SprintContext)

    return <>
        <AccessGuard resourceId={sprintCtx.sprint.id} action="ReadSprintPermissions">
            <Permissions resourceId={sprintCtx.sprint.id} changeAction="ChangeSprintPermissions"/>
        </AccessGuard>
    </>
}