fix(detailspanel): disable edit when no access

dhis2 · Nov 14, 2024 · 1df066f · 1df066f
1 parent f2915c3
commit 1df066f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/src/components/sectionList/detailsPanel/DefaultDetailsPanel.tsx b/src/components/sectionList/detailsPanel/DefaultDetailsPanel.tsx
@@ -1,7 +1,7 @@
 import { useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import React, { useRef } from 'react'
-import { Schema, useSchemaFromHandle } from '../../../lib'
+import { canEditModel, Schema, useSchemaFromHandle } from '../../../lib'
 import { Query, WrapQueryResponse } from '../../../types'
 import { BaseIdentifiableObject } from '../../../types/models'
 import { ClientDateTime } from '../../date'
@@ -18,6 +18,7 @@ type DetailsPanelProps = {
 }
 
 const defaultQueryFields = [
+    'access',
     'code',
     'created',
     'lastUpdated',
@@ -78,9 +79,10 @@ export const DefaultDetailsPanelContent = ({ modelId }: DetailsPanelProps) => {
 }
 
 const DetailsContent = ({ data }: { data: DetailsResponse }) => {
+    const canEdit = canEditModel(data)
     return (
         <DetailsPanelContent displayName={data.displayName}>
-            <DetailsPanelButtons modelId={data.id} />
+            <DetailsPanelButtons modelId={data.id} editable={canEdit} />
             <DetailsList>
                 {data.shortName && (
                     <DetailItem label={i18n.t('Short name')}>

diff --git a/src/components/sectionList/detailsPanel/DetailsPanel.tsx b/src/components/sectionList/detailsPanel/DetailsPanel.tsx
@@ -3,6 +3,9 @@ import { Card, IconCross24, Button, ButtonStrip, NoticeBox } from '@dhis2/ui'
 import React, { PropsWithChildren } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { Link } from 'react-router-dom'
+import { TOOLTIPS } from '../../../lib'
+import { LinkButton } from '../../LinkButton'
+import { TooltipWrapper } from '../../tooltip'
 import css from './DetailsPanel.module.css'
 
 type DetailsPanelProps = {
@@ -42,13 +45,19 @@ export const DetailsPanelContent = ({
     )
 }
 
-export const DetailsPanelButtons = ({ modelId }: { modelId: string }) => (
+export const DetailsPanelButtons = ({
+    modelId,
+    editable,
+}: {
+    modelId: string
+    editable?: boolean
+}) => (
     <ButtonStrip>
-        <Link to={modelId}>
-            <Button secondary small>
+        <TooltipWrapper condition={!editable} content={TOOLTIPS.noEditAccess}>
+            <LinkButton small secondary to={modelId} disabled={!editable}>
                 {i18n.t('Edit')}
-            </Button>
-        </Link>
+            </LinkButton>
+        </TooltipWrapper>
     </ButtonStrip>
 )