Merge pull request #2577 from Amsterdam/improvement/121703-check-for-…

…permission

121703 Added permission checks

package.json

@@ -71,7 +71,7 @@
  },
  "devDependencies": {
  "@babel/preset-env": "^7.24.7",
- "@babel/preset-react": "^7.23.3",
+ "@babel/preset-react": "^7.24.7",
  "@babel/preset-typescript": "^7.24.7",
  "@types/dotenv-flow": "^3.2.0",
  "@types/jest": "^29.5.3",

src/app/components/case/CaseDetails/ChangeableItem/ChangeableItem.tsx

@@ -1,6 +1,7 @@
 import styled from "styled-components"
 import { Icon, themeSpacing } from "@amsterdam/asc-ui"
 import { Edit } from "app/components/shared/Icons"
+import useHasPermission, { CAN_PERFORM_TASK } from "app/state/rest/custom/usePermissions/useHasPermission"
 
 type Props = {
  name?: string
@@ -27,16 +28,19 @@ const StyledIcon = styled(Icon)`
  margin-left: ${ themeSpacing(1) };
 `
 
-const ChangeableItem = ({ name = "-", titleAccess = "", onClick }: Props) => (
- <Span
- role="link"
- onClick={ onClick }
- >
- { name }
- <StyledIcon size={ 20 }>
- <Edit titleAccess={ titleAccess } />
- </StyledIcon>
- </Span>
-)
+const ChangeableItem = ({ name = "-", titleAccess = "", onClick }: Props) => {
+ const [hasPermission] = useHasPermission([CAN_PERFORM_TASK])
+ return hasPermission ? (
+ <Span
+ role="link"
+ onClick={ onClick }
+ >
+ { name }
+ <StyledIcon size={ 20 }>
+ <Edit titleAccess={ titleAccess } />
+ </StyledIcon>
+ </Span>
+ ) : <>{ name }</>
+}
 
 export default ChangeableItem

src/app/components/case/CaseDetails/EditableTag/CaseTags.tsx

@@ -2,6 +2,7 @@
 import styled, { keyframes } from "styled-components"
 import { Icon, themeSpacing } from "@amsterdam/asc-ui"
 import { Edit } from "app/components/shared/Icons"
+import useHasPermission, { CAN_PERFORM_TASK } from "app/state/rest/custom/usePermissions/useHasPermission"
 
 
 type Props = {
@@ -43,16 +44,19 @@ const StyledIcon = styled(Icon)`
  cursor: pointer;
 `
 
-const CaseTags: React.FC<Props> = ({ tags = [], titleAccess = "Wijzig tag", onClick }) => (
- <ClickableSpan
- role="link"
- onClick={ onClick }
- >
- { tags.map(tag => <Tag key={ tag.id }>{ tag.name }</Tag>)}
- <StyledIcon size={ 20 }>
- <Edit titleAccess={ titleAccess } />
- </StyledIcon>
- </ClickableSpan>
-)
+const CaseTags: React.FC<Props> = ({ tags = [], titleAccess = "Wijzig tag", onClick }) => {
+ const [hasPermission] = useHasPermission([CAN_PERFORM_TASK])
+ return hasPermission ? (
+ <ClickableSpan
+ role="link"
+ onClick={ onClick }
+ >
+ { tags.map(tag => <Tag key={ tag.id }>{ tag.name }</Tag>)}
+ <StyledIcon size={ 20 }>
+ <Edit titleAccess={ titleAccess } />
+ </StyledIcon>
+ </ClickableSpan>
+ ) : <>{ tags.length > 0 ? tags.map(tag => <Tag key={ tag.id }>{ tag.name }</Tag>) : "-"}</>
+}
 
 export default CaseTags

src/app/components/case/CaseStatus/CaseStatus.tsx

@@ -1,11 +1,12 @@
 
 import styled from "styled-components"
-import { Button, Divider, Heading, themeSpacing } from "@amsterdam/asc-ui"
+import { Divider, Heading, themeSpacing } from "@amsterdam/asc-ui"
 
 import Workflow from "../Workflow/Workflow"
 import { Row, Column, RowWithColumn } from "app/components/layouts/Grid"
-import ButtonLink from "app/components/shared/ButtonLink/ButtonLink"
 import to from "app/routing/utils/to"
+import IsAuthorizedButtonLink from "app/components/shared/ButtonLink/IsAuthorizedButtonLink"
+import { CAN_PERFORM_TASK } from "app/state/rest/custom/usePermissions/useHasPermission"
 
 type Props = {
  id: Components.Schemas.CaseDetail["id"]
@@ -29,9 +30,13 @@ const CaseStatus: React.FC<Props> = ({ id }) => (
  </Column>
  <Column spanSmall={ 50 } spanLarge={ 50 }>
  <ButtonWrap>
- <ButtonLink to={ to("/zaken/:id/taak", { id }) }>
- <Button as="span" variant="tertiary">Taak opvoeren</Button>
- </ButtonLink>
+ <IsAuthorizedButtonLink
+ permissionNames={ [CAN_PERFORM_TASK] }
+ to={ to("/zaken/:id/taak", { id }) }
+ text="Taak opvoeren"
+ variant="tertiary"
+ data-testid="btn_add_extra_task"
+ />
  </ButtonWrap>
  </Column>
  </Row>

src/app/components/case/Workflow/components/SelectTaskWorkflow.tsx

@@ -7,6 +7,7 @@ import { createNameAbbreviation } from "app/components/shared/Helpers/helpers"
 import CustomTooltip from "app/components/help/HelpContent/CustomTooltip"
 import { makeApiUrl } from "app/state/rest/hooks/utils/apiUrl"
 import UserIcon from "./UserInitials"
+import useHasPermission, { CAN_PERFORM_TASK } from "app/state/rest/custom/usePermissions/useHasPermission"
 
 
 type Props = {
@@ -33,8 +34,8 @@ const SelectTaskWorkflow: React.FC<Props> = ({ task }) => {
  const [me, { isBusy }] = useUsersMe()
  const [, { execPatch }] = useTask(taskId)
  const apiUrl = makeApiUrl("cases", caseId, "workflows")
-
  const { getContextItem, updateContextItem } = useContextCache("cases", apiUrl)
+ const [hasPermission] = useHasPermission([CAN_PERFORM_TASK])
 
  useEffect(() => {
  // Check if userId is matching with the taskOwner.
@@ -88,13 +89,13 @@ const SelectTaskWorkflow: React.FC<Props> = ({ task }) => {
  if (taskOwner && taskOwner !== me?.id ) {
  return <UserIcon owner={ taskOwner }/>
  }
- return (
+ return hasPermission ? (
  <StyledLabel htmlFor={ `cb_${ taskId }` } label={ me && me?.id === taskOwner ? `${ createNameAbbreviation(me) }` : "" }>
  <CustomTooltip title={ isChecked ? "Mijn taak" : "Beschikbaar" }>
  <StyledCheckbox data-testid={ `${ taskId }` } id={ `cb_${ taskId }` } checked={ isChecked } onChange={ onChange }/>
  </CustomTooltip>
  </StyledLabel>
- )
+ ) : <>-</>
 }
 
 export default SelectTaskWorkflow

src/app/components/case/tasks/ChangeDueDate/ChangebleDueDate.tsx

@@ -6,6 +6,7 @@ import { appendTimeToDate } from "app/components/shared/Helpers/helpers"
 import DueDate from "app/components/shared/DueDate/DueDate"
 import ChangeDueDateModal from "./ChangeDueDateModal"
 import { useTaskUpdate } from "app/state/rest"
+import useHasPermission, { CAN_PERFORM_TASK } from "app/state/rest/custom/usePermissions/useHasPermission"
 
 type Props = {
  caseId: Components.Schemas.CaseDetail["id"]
@@ -30,17 +31,17 @@ const StyledIcon = styled(Icon)`
 `
 
 const ChangeableDueDate: React.FC<Props> = ({ dueDate, caseId, caseUserTaskId }) => {
-
  const { isModalOpen, openModal, closeModal } = useModal()
  const [, { execPatch }] = useTaskUpdate(caseUserTaskId)
+ const [hasPermission] = useHasPermission([CAN_PERFORM_TASK])
 
  const onSubmit = (data: { date: string, id: string }) => {
  appendTimeToDate(data.date) !== dueDate
  ? execPatch( { due_date: appendTimeToDate( data.date ) })
  : closeModal()
  }
 
- return (
+ return hasPermission ? (
  <>
  <Span
  role="link"
@@ -57,7 +58,7 @@ const ChangeableDueDate: React.FC<Props> = ({ dueDate, caseId, caseUserTaskId })
  taskId={ caseUserTaskId }
  />
  </>
- )
+ ) : <DueDate date={ dueDate } />
 }
 
 export default ChangeableDueDate

src/app/components/tasks/TableTasks/SelectTask/SelectTask.tsx

@@ -6,7 +6,7 @@ import UserIcon from "./UserIcon"
 import useContextCache from "app/state/rest/provider/useContextCache"
 import { createNameAbbreviation } from "app/components/shared/Helpers/helpers"
 import CustomTooltip from "app/components/help/HelpContent/CustomTooltip"
-import useHasPermission, { SENSITIVE_CASE_PERMISSION } from "app/state/rest/custom/usePermissions/useHasPermission"
+import useHasPermission, { CAN_PERFORM_TASK, SENSITIVE_CASE_PERMISSION } from "app/state/rest/custom/usePermissions/useHasPermission"
 import { ContextValues } from "app/state/context/ValueProvider"
 import { getQueryUrl } from "app/state/rest/tasks"
 
@@ -37,6 +37,7 @@ const SelectTask: React.FC<Props> = ({ taskId, taskOwner, isEnforcement }) => {
  tags, taskNames, reason, districtNames, housingCorporations
  } = useContext(ContextValues)["tasks"]
  const [hasPermission] = useHasPermission([SENSITIVE_CASE_PERMISSION])
+ const [hasPerformTaskPermission] = useHasPermission([CAN_PERFORM_TASK])
  const [isChecked, setIsChecked] = useState(false)
  const [loading, setLoading] = useState(false)
  const [data, { isBusy }] = useUsersMe()
@@ -93,13 +94,14 @@ const SelectTask: React.FC<Props> = ({ taskId, taskOwner, isEnforcement }) => {
  if (taskOwner && taskOwner !== data?.id ) {
  return <UserIcon owner={ taskOwner }/>
  }
- return (
+
+ return hasPerformTaskPermission ? (
  <StyledLabel htmlFor={ `cb_${ taskId }` } label={ data && data?.id === taskOwner ? `${ createNameAbbreviation(data) }` : "" }>
  <CustomTooltip title={ isChecked ? "Mijn taak" : "Beschikbaar" }>
  <Checkbox data-testid={ `${ taskId }` } id={ `cb_${ taskId }` } checked={ isChecked } onChange={ onChange }/>
  </CustomTooltip>
  </StyledLabel>
- )
+ ) : <>-</>
 }
 
 export default SelectTask