fix(list): disable list buttons when no access (#441)

* fix(list): disable edit buttons when no access * fix(linkbutton): fix disabled linkbutton active and focus styles * fix(detailspanel): disable edit when no access
dhis2 · Nov 14, 2024 · 5c0941f · 5c0941f
1 parent cd734a4
commit 5c0941f
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 15 deletions.
diff --git a/src/components/LinkButton/LinkButton.module.css b/src/components/LinkButton/LinkButton.module.css
@@ -61,7 +61,9 @@
     background-color: #f9fafb;
 }
 
-.linkButton.disabled {
+.linkButton.disabled,
+.linkButton.disabled:active,
+.linkButton.disabled:focus {
     border-color: var(--colors-grey400);
     background-color: #f9fafb;
     box-shadow: none;
@@ -112,7 +114,9 @@
     outline-offset: -5px;
 }
 
-.primary.disabled {
+.primary.disabled,
+.primary.disabled:active,
+.primary.disabled:focus {
     border-color: #93a6bd;
     background: #b3c6de;
     box-shadow: none;
@@ -140,7 +144,9 @@
     background-color: transparent;
 }
 
-.secondary.disabled {
+.secondary.disabled,
+.secondary.disabled:active,
+.secondary.disabled:focus {
     border-color: rgba(74, 87, 104, 0.25);
     background-color: transparent;
     box-shadow: none;
@@ -175,7 +181,9 @@
     background-color: #b72229;
 }
 
-.destructive.disabled {
+.destructive.disabled,
+.destructive.disabled:active,
+.destructive.disabled:focus {
     border-color: #c59898;
     background: #d6a8a8;
     box-shadow: none;
@@ -205,7 +213,9 @@
     box-shadow: none;
 }
 
-.destructive.secondary.disabled {
+.destructive.secondary.disabled,
+.destructive.secondary.disabled:active,
+.destructive.secondary.disabled:focus {
     background: transparent;
     border-color: rgba(74, 87, 104, 0.25);
     color: rgba(183, 28, 28, 0.6);

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>
 )
 

diff --git a/src/components/sectionList/listActions/DefaultListActions.tsx b/src/components/sectionList/listActions/DefaultListActions.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
-import { BaseListModel, useSchemaFromHandle } from '../../../lib'
+import { BaseListModel, TOOLTIPS, useSchemaFromHandle } from '../../../lib'
 import { canEditModel, canDeleteModel } from '../../../lib/models/access'
+import { TooltipWrapper } from '../../tooltip'
 import { ListActions, ActionEdit, ActionMore } from './SectionListActions'
 
 type DefaultListActionProps = {
@@ -26,7 +27,12 @@ export const DefaultListActions = ({
 
     return (
         <ListActions>
-            <ActionEdit modelId={model.id} />
+            <TooltipWrapper
+                condition={!editable}
+                content={TOOLTIPS.noEditAccess}
+            >
+                <ActionEdit disabled={!editable} modelId={model.id} />
+            </TooltipWrapper>
             <ActionMore
                 deletable={deletable}
                 editable={editable}

diff --git a/src/components/sectionList/listActions/SectionListActions.tsx b/src/components/sectionList/listActions/SectionListActions.tsx
@@ -27,11 +27,18 @@ export const ListActions = ({ children }: React.PropsWithChildren) => {
     )
 }
 
-export const ActionEdit = ({ modelId }: { modelId: string }) => {
+export const ActionEdit = ({
+    modelId,
+    disabled,
+}: {
+    modelId: string
+    disabled?: boolean
+}) => {
     const preservedSearchState = useLocationSearchState()
     return (
         <LinkButton
             small
+            disabled={disabled}
             secondary
             to={{ pathname: modelId }}
             state={preservedSearchState}
@@ -110,6 +117,7 @@ export const ActionMore = ({
                         >
                             <MenuItem
                                 dense
+                                disabled={!editable}
                                 label={i18n.t('Edit')}
                                 icon={<IconEdit16 />}
                                 onClick={(_, e) => {