From f5ad73b4d68f4525ffef31b504d3b0bb1fa83435 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Wed, 6 Mar 2024 00:03:47 +0100
Subject: [PATCH] feat(list): add sharing dialog

---
 src/components/sectionList/SectionListRow.tsx |  6 ++--
 .../sectionList/SectionListWrapper.tsx        | 15 +++++++-
 .../listActions/DefaultListActions.tsx        | 31 ++++++++++++++++
 .../listActions/SectionListActions.tsx        | 36 +++++++++++++++++++
 src/lib/models/access.ts                      |  6 ++++
 src/pages/dataElements/List.tsx               |  1 +
 6 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 src/components/sectionList/listActions/DefaultListActions.tsx
 create mode 100644 src/lib/models/access.ts

diff --git a/src/components/sectionList/SectionListRow.tsx b/src/components/sectionList/SectionListRow.tsx
index 8bbf35d4..978eaf46 100644
--- a/src/components/sectionList/SectionListRow.tsx
+++ b/src/components/sectionList/SectionListRow.tsx
@@ -2,6 +2,7 @@ import { DataTableRow, DataTableCell, Checkbox } from '@dhis2/ui'
 import cx from 'classnames'
 import React from 'react'
 import { BaseListModel } from '../../lib'
+import { canEditModel } from '../../lib/models/access'
 import { CheckBoxOnChangeObject } from '../../types'
 import { WrapWithTooltip } from '../tooltip'
 import css from './SectionList.module.css'
@@ -28,6 +29,7 @@ export function SectionListRow<Model extends BaseListModel>({
     renderActions,
     renderColumnValue,
 }: SectionListRowProps<Model>) {
+    const editAccess = canEditModel(modelData)
     return (
         <DataTableRow
             className={cx(css.listRow, { [css.active]: active })}
@@ -36,11 +38,11 @@ export function SectionListRow<Model extends BaseListModel>({
         >
             <DataTableCell width="48px">
                 <WrapWithTooltip
-                    condition={!modelData.access.write}
+                    condition={!editAccess}
                     content={WrapWithTooltip.TOOLTIPS.disabled}
                 >
                     <Checkbox
-                        disabled={!modelData.access.write}
+                        disabled={!editAccess}
                         dataTest="section-list-row-checkbox"
                         checked={selected}
                         onChange={({ checked }: CheckBoxOnChangeObject) => {
diff --git a/src/components/sectionList/SectionListWrapper.tsx b/src/components/sectionList/SectionListWrapper.tsx
index 2f1c68d6..953b8e8c 100644
--- a/src/components/sectionList/SectionListWrapper.tsx
+++ b/src/components/sectionList/SectionListWrapper.tsx
@@ -1,4 +1,5 @@
 import { FetchError } from '@dhis2/app-runtime'
+import { SharingDialog } from '@dhis2/ui'
 import React, { useMemo, useState } from 'react'
 import { BaseListModel, useSchemaFromHandle } from '../../lib'
 import { Pager, ModelCollection } from '../../types/models'
@@ -31,6 +32,7 @@ export const SectionListWrapper = ({
     const schema = useSchemaFromHandle()
     const [selectedModels, setSelectedModels] = useState<Set<string>>(new Set())
     const [detailsId, setDetailsId] = useState<string | undefined>()
+    const [sharingDialogId, setSharingDialogId] = useState<string | undefined>()
 
     const handleSelect = (id: string, checked: boolean) => {
         if (checked) {
@@ -113,7 +115,8 @@ export const SectionListWrapper = ({
                             renderActions={() => (
                                 <DefaultListActions
                                     model={model}
-                                    onShowDetails={handleShowDetails}
+                                    onShowDetailsClick={handleShowDetails}
+                                    onOpenSharingClick={setSharingDialogId}
                                 />
                             )}
                         />
@@ -131,6 +134,16 @@ export const SectionListWrapper = ({
                     </DetailsPanel>
                 )}
             </div>
+            {sharingDialogId && (
+                <SharingDialog
+                    id={sharingDialogId}
+                    /* @TODO: Sharing dialog does not support metadata
+                    but it works if you pass the correct type*/
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    type={schema.singular as any}
+                    onClose={() => setSharingDialogId(undefined)}
+                />
+            )}
         </div>
     )
 }
diff --git a/src/components/sectionList/listActions/DefaultListActions.tsx b/src/components/sectionList/listActions/DefaultListActions.tsx
new file mode 100644
index 00000000..60d2715e
--- /dev/null
+++ b/src/components/sectionList/listActions/DefaultListActions.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { canEditModel } from '../../../lib/models/access'
+import { BaseIdentifiableObject } from '../../../types/generated'
+import { ListActions, ActionEdit, ActionMore } from './SectionListActions'
+
+type ModelWithAccess = Pick<BaseIdentifiableObject, 'id' | 'access'>
+
+type DefaultListActionProps = {
+    model: ModelWithAccess
+    onShowDetailsClick: (id: string) => void
+    onOpenSharingClick: (id: string) => void
+}
+
+export const DefaultListActions = ({
+    model,
+    onShowDetailsClick,
+    onOpenSharingClick,
+}: DefaultListActionProps) => {
+    const editAccess = canEditModel(model)
+    return (
+        <ListActions>
+            <ActionEdit modelId={model.id} />
+            <ActionMore
+                modelId={model.id}
+                editAccess={editAccess}
+                onShowDetailsClick={() => onShowDetailsClick(model.id)}
+                onOpenSharingClick={() => onOpenSharingClick(model.id)}
+            />
+        </ListActions>
+    )
+}
diff --git a/src/components/sectionList/listActions/SectionListActions.tsx b/src/components/sectionList/listActions/SectionListActions.tsx
index 065aafdb..8063a79c 100644
--- a/src/components/sectionList/listActions/SectionListActions.tsx
+++ b/src/components/sectionList/listActions/SectionListActions.tsx
@@ -6,12 +6,15 @@ import {
     IconEdit24,
     IconMore16,
     IconMore24,
+    IconShare16,
     MenuItem,
     Popover,
 } from '@dhis2/ui'
 import React, { useRef, useState } from 'react'
 import { useHref, useLinkClickHandler } from 'react-router-dom'
+import { BaseListModel } from '../../../lib'
 import { LinkButton } from '../../LinkButton'
+import { WrapWithTooltip } from '../../tooltip'
 import css from './SectionListActions.module.css'
 
 export const ListActions = ({ children }: React.PropsWithChildren) => {
@@ -26,12 +29,30 @@ export const ActionEdit = ({ modelId }: { modelId: string }) => {
     )
 }
 
+export const ActionOpenSharing = ({
+    modelId,
+    onOpenSharingClick,
+}: {
+    modelId: string
+    onOpenSharingClick: () => void
+}) => {
+    return (
+        <Button small secondary onClick={onOpenSharingClick}>
+            {i18n.t('Open sharing')}
+        </Button>
+    )
+}
+
 type ActionMoreProps = {
     modelId: string
+    editAccess: boolean
     onShowDetailsClick: () => void
+    onOpenSharingClick: () => void
 }
 export const ActionMore = ({
     modelId,
+    editAccess,
+    onOpenSharingClick,
     onShowDetailsClick,
 }: ActionMoreProps) => {
     const [open, setOpen] = useState(false)
@@ -77,6 +98,21 @@ export const ActionMore = ({
                             target="_blank"
                             href={href}
                         ></MenuItem>
+                        <WrapWithTooltip
+                            condition={!editAccess}
+                            content={WrapWithTooltip.TOOLTIPS.disabled}
+                        >
+                            <MenuItem
+                                dense
+                                disabled={!editAccess}
+                                label={i18n.t('Sharing settings')}
+                                icon={<IconShare16 />}
+                                onClick={() => {
+                                    onOpenSharingClick()
+                                    setOpen(false)
+                                }}
+                            ></MenuItem>
+                        </WrapWithTooltip>
                     </FlyoutMenu>
                 </Popover>
             )}
diff --git a/src/lib/models/access.ts b/src/lib/models/access.ts
new file mode 100644
index 00000000..5c865309
--- /dev/null
+++ b/src/lib/models/access.ts
@@ -0,0 +1,6 @@
+import type { Access, BaseIdentifiableObject } from '../../types/generated'
+
+export const editAccess = (access: Access) => access.write
+
+export const canEditModel = (model: Pick<BaseIdentifiableObject, 'access'>) =>
+    editAccess(model.access)
diff --git a/src/pages/dataElements/List.tsx b/src/pages/dataElements/List.tsx
index a09100d8..7dea09ac 100644
--- a/src/pages/dataElements/List.tsx
+++ b/src/pages/dataElements/List.tsx
@@ -1,4 +1,5 @@
 import { useDataQuery } from '@dhis2/app-runtime'
+import { SharingDialog } from '@dhis2/ui'
 import React, { useEffect } from 'react'
 import { SectionListWrapper } from '../../components'
 import { useModelListView } from '../../components/sectionList/listView'