diff --git a/src/components/LinkButton/LinkButton.module.css b/src/components/LinkButton/LinkButton.module.css index bdc9b621..a22d5845 100644 --- 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 index ac055159..3da4abfb 100644 --- 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 ( - + {data.shortName && ( diff --git a/src/components/sectionList/detailsPanel/DetailsPanel.tsx b/src/components/sectionList/detailsPanel/DetailsPanel.tsx index e5937a11..545d4b04 100644 --- 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 +}) => ( - - - + + ) diff --git a/src/components/sectionList/listActions/DefaultListActions.tsx b/src/components/sectionList/listActions/DefaultListActions.tsx index 5bff8796..cd1fa369 100644 --- 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 ( - + + + { ) } -export const ActionEdit = ({ modelId }: { modelId: string }) => { +export const ActionEdit = ({ + modelId, + disabled, +}: { + modelId: string + disabled?: boolean +}) => { const preservedSearchState = useLocationSearchState() return ( } onClick={(_, e) => {