fix: disable checkbox with no access

src/components/sectionList/SectionListRow.tsx

@@ -1,23 +1,24 @@
 import { DataTableRow, DataTableCell, Checkbox } from '@dhis2/ui'
 import cx from 'classnames'
 import React from 'react'
+import { BaseListModel } from '../../lib'
 import { CheckBoxOnChangeObject } from '../../types'
-import { IdentifiableObject, GistModel } from '../../types/models'
+import { WrapWithTooltip } from '../tooltip'
 import css from './SectionList.module.css'
 import { SelectedColumns, SelectedColumn } from './types'
 
-export type SectionListRowProps<Model extends IdentifiableObject> = {
-    modelData: GistModel<Model> | Model
+export type SectionListRowProps<Model extends BaseListModel> = {
+    modelData: Model
     selectedColumns: SelectedColumns
     onSelect: (modelId: string, checked: boolean) => void
     selected: boolean
     renderActions: (modelId: string) => React.ReactNode
     renderColumnValue: (column: SelectedColumn) => React.ReactNode
-    onClick?: (modelData: GistModel<Model> | Model) => void
+    onClick?: (modelData: Model) => void
     active?: boolean
 }
 
-export function SectionListRow<Model extends IdentifiableObject>({
+export function SectionListRow<Model extends BaseListModel>({
     active,
     selectedColumns,
     modelData,
@@ -34,13 +35,19 @@ export function SectionListRow<Model extends IdentifiableObject>({
             selected={selected}
         >
             <DataTableCell width="48px">
-                <Checkbox
-                    dataTest="section-list-row-checkbox"
-                    checked={selected}
-                    onChange={({ checked }: CheckBoxOnChangeObject) => {
-                        onSelect(modelData.id, checked)
-                    }}
-                />
+                <WrapWithTooltip
+                    condition={!modelData.access.write}
+                    content={WrapWithTooltip.TOOLTIPS.disabled}
+                >
+                    <Checkbox
+                        disabled={!modelData.access.write}
+                        dataTest="section-list-row-checkbox"
+                        checked={selected}
+                        onChange={({ checked }: CheckBoxOnChangeObject) => {
+                            onSelect(modelData.id, checked)
+                        }}
+                    />
+                </WrapWithTooltip>
             </DataTableCell>
             {selectedColumns.map((selectedColumn) => (
                 <DataTableCell

src/components/sectionList/SectionListWrapper.tsx

@@ -1,14 +1,10 @@
 import { FetchError } from '@dhis2/app-runtime'
 import React, { useMemo, useState } from 'react'
-import { useSchemaFromHandle } from '../../lib'
+import { BaseListModel, useSchemaFromHandle } from '../../lib'
 import { Pager, ModelCollection } from '../../types/models'
 import { DetailsPanel, DefaultDetailsPanelContent } from './detailsPanel'
 import { FilterWrapper } from './filters/FilterWrapper'
-import {
-    ActionEdit,
-    ActionMore,
-    ListActions,
-} from './listActions/SectionListActions'
+import { DefaultListActions } from './listActions'
 import { useModelListView } from './listView'
 import { ModelValue } from './modelValue/ModelValue'
 import { SectionList } from './SectionList'
@@ -21,7 +17,7 @@ import { SectionListRow } from './SectionListRow'
 import { SectionListTitle } from './SectionListTitle'
 
 type SectionListWrapperProps = {
-    data: ModelCollection | undefined
+    data: ModelCollection<BaseListModel> | undefined
     pager: Pager | undefined
     error: FetchError | undefined
 }
@@ -114,16 +110,11 @@ export const SectionListWrapper = ({
                                     />
                                 )
                             }}
-                            renderActions={(id) => (
-                                <ListActions>
-                                    <ActionEdit modelId={id} />
-                                    <ActionMore
-                                        modelId={id}
-                                        onShowDetailsClick={() =>
-                                            handleShowDetails(id)
-                                        }
-                                    />
-                                </ListActions>
+                            renderActions={() => (
+                                <DefaultListActions
+                                    model={model}
+                                    onShowDetails={handleShowDetails}
+                                />
                             )}
                         />
                     ))}

src/components/sectionList/listActions/SectionListActions.tsx

@@ -10,7 +10,7 @@ import {
     Popover,
 } from '@dhis2/ui'
 import React, { useRef, useState } from 'react'
-import { Link, useHref, useLinkClickHandler } from 'react-router-dom'
+import { useHref, useLinkClickHandler } from 'react-router-dom'
 import { LinkButton } from '../../LinkButton'
 import css from './SectionListActions.module.css'
 

src/components/sectionList/listActions/index.ts

@@ -0,0 +1,2 @@
+export { DefaultListActions } from './DefaultListActions'
+export * from './SectionListActions'

src/lib/sectionList/fieldFilters.ts

@@ -0,0 +1,6 @@
+import { BaseIdentifiableObject } from '../../types/generated'
+
+export const DEFAULT_FIELD_FILTERS = ['id', 'access'] as const
+export type DefaultFields = (typeof DEFAULT_FIELD_FILTERS)[number]
+
+export type BaseListModel = Pick<BaseIdentifiableObject, DefaultFields>

src/lib/sectionList/index.ts

@@ -6,3 +6,4 @@ export {
 } from './usePaginationParams'
 export * from './useParamsForDataQuery'
 export * from './listViews'
+export * from './fieldFilters'

src/pages/dataElements/List.tsx

@@ -2,12 +2,18 @@ import { useDataQuery } from '@dhis2/app-runtime'
 import React, { useEffect } from 'react'
 import { SectionListWrapper } from '../../components'
 import { useModelListView } from '../../components/sectionList/listView'
-import { useSchemaFromHandle, useParamsForDataQuery } from '../../lib/'
+import {
+    useSchemaFromHandle,
+    useParamsForDataQuery,
+    DEFAULT_FIELD_FILTERS,
+    DefaultFields,
+} from '../../lib/'
 import { getFieldFilter } from '../../lib/models/path'
 import { Query, WrapQueryResponse } from '../../types'
 import { DataElement, ModelCollectionResponse } from '../../types/models'
 
-type FilteredDataElement = Pick<DataElement, 'id'> & Partial<DataElement>
+type FilteredDataElement = Pick<DataElement, DefaultFields> &
+    Partial<DataElement>
 
 type DataElements = ModelCollectionResponse<FilteredDataElement, 'dataElements'>
 
@@ -40,7 +46,7 @@ export const Component = () => {
             ...initialParams,
             fields: columns
                 .map((column) => getFieldFilter(schema, column.path))
-                .concat('id'),
+                .concat(DEFAULT_FIELD_FILTERS),
         })
     }, [refetch, initialParams, columns, listViewQuery.isLoading, schema])