refactor(section list view config): make config static

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-03-20T01:08:59.818Z\n"
-"PO-Revision-Date: 2024-03-20T01:08:59.818Z\n"
+"POT-Creation-Date: 2024-04-10T10:01:54.632Z\n"
+"PO-Revision-Date: 2024-04-10T10:01:54.632Z\n"
 
 msgid "schemas"
 msgstr "schemas"
@@ -75,6 +75,12 @@ msgstr "Save and close"
 msgid "<No value>"
 msgstr "<No value>"
 
+msgid "Custom attributes"
+msgstr "Custom attributes"
+
+msgid "Custom fields for your DHIS2 instance"
+msgstr "Custom fields for your DHIS2 instance"
+
 msgid "Code"
 msgstr "Code"
 
@@ -759,9 +765,6 @@ msgstr "This field requires a unique value, please choose another one"
 msgid "Required"
 msgstr "Required"
 
-msgid "Custom attributes"
-msgstr "Custom attributes"
-
 msgid "Exit without saving"
 msgstr "Exit without saving"
 
@@ -792,21 +795,9 @@ msgstr "Set up the information for this data element group"
 msgid "Explain the purpose of this data element group."
 msgstr "Explain the purpose of this data element group."
 
-msgid "@TODO"
-msgstr "@TODO"
-
-msgid "Custom fields for your DHIS2 instance"
-msgstr "Custom fields for your DHIS2 instance"
-
 msgid "Selected data elements"
 msgstr "Selected data elements"
 
-msgid "Explain the purpose of this data element and how it's measured."
-msgstr "Explain the purpose of this data element and how it's measured."
-
-msgid "A data element name should be concise and easy to recognize."
-msgstr "A data element name should be concise and easy to recognize."
-
 msgid "Create data element"
 msgstr "Create data element"
 
@@ -896,8 +887,8 @@ msgstr "Disaggregation and Option sets"
 msgid "Set up disaggregation and predefined options."
 msgstr "Set up disaggregation and predefined options."
 
-msgid "LegendSet"
-msgstr "LegendSet"
+msgid "Legend set"
+msgstr "Legend set"
 
 msgid ""
 "Visualize values for this data element in Analytics app. Multiple legendSet "

src/components/sectionList/ColumnHeaderSortable.tsx

@@ -5,6 +5,7 @@ import {
     isValidSortPathForSchema,
     useSchema,
     useSectionListSortOrder,
+    getTranslatedProperty,
 } from '../../lib'
 import { SelectedColumn, SelectedColumns } from './types'
 
@@ -38,8 +39,7 @@ export const HeaderColumnsSortable = ({
     )
 
     const getDataTableSortDirection = (column: SelectedColumn) => {
-        const allowSort =
-            column && isValidSortPathForSchema(schema, column.path)
+        const allowSort = column && isValidSortPathForSchema(schema, column)
 
         if (!allowSort) {
             return undefined
@@ -48,7 +48,7 @@ export const HeaderColumnsSortable = ({
             return 'default'
         }
         const [sortedColumn, sortedDirection] = sortOrder
-        const columnIsSorted = sortedColumn === column.path
+        const columnIsSorted = sortedColumn === column
         return columnIsSorted ? sortedDirection : 'default'
     }
 
@@ -58,10 +58,10 @@ export const HeaderColumnsSortable = ({
                 <DataTableColumnHeader
                     sortDirection={getDataTableSortDirection(headerColumn)}
                     onSortIconClick={handleSortOrderChange}
-                    key={headerColumn.path}
-                    name={headerColumn.path}
+                    key={headerColumn}
+                    name={headerColumn}
                 >
-                    {headerColumn.label}
+                    {getTranslatedProperty(headerColumn)}
                 </DataTableColumnHeader>
             ))}
         </>

src/components/sectionList/SectionList.tsx

@@ -8,24 +8,29 @@ import {
     Checkbox,
 } from '@dhis2/ui'
 import React, { PropsWithChildren } from 'react'
-import { isSchemaSection, useSectionHandle } from '../../lib'
+import {
+    isSchemaSection,
+    useSectionHandle,
+    getTranslatedProperty,
+} from '../../lib'
 import { CheckBoxOnChangeObject } from '../../types'
 import { HeaderColumnsSortable } from './ColumnHeaderSortable'
+import { useModelListView } from './listView'
 import css from './SectionList.module.css'
 import { SelectedColumns } from './types'
 
 type SectionListProps = {
-    headerColumns: SelectedColumns
     onSelectAll: (checked: boolean) => void
     allSelected?: boolean
 }
 
 export const SectionList = ({
     allSelected,
-    headerColumns,
     children,
     onSelectAll,
 }: PropsWithChildren<SectionListProps>) => {
+    const { columns: headerColumns } = useModelListView()
+
     return (
         <DataTable className={css.list}>
             <TableHead>
@@ -66,9 +71,9 @@ const HeaderColumns = ({
                     headerColumns={headerColumns}
                 />
             ) : (
-                headerColumns.map((headerColumn) => (
-                    <DataTableColumnHeader key={headerColumn.path}>
-                        {headerColumn.label}
+                headerColumns.map((column) => (
+                    <DataTableColumnHeader key={column}>
+                        {getTranslatedProperty(column)}
                     </DataTableColumnHeader>
                 ))
             )}

src/components/sectionList/SectionListRow.tsx

@@ -5,12 +5,12 @@ import { BaseListModel, TOOLTIPS } from '../../lib'
 import { canEditModel } from '../../lib/models/access'
 import { CheckBoxOnChangeObject } from '../../types'
 import { TooltipWrapper } from '../tooltip'
+import { useModelListView } from './listView'
 import css from './SectionList.module.css'
-import { SelectedColumns, SelectedColumn } from './types'
+import { SelectedColumn } from './types'
 
 export type SectionListRowProps<Model extends BaseListModel> = {
     modelData: Model
-    selectedColumns: SelectedColumns
     onSelect: (modelId: string, checked: boolean) => void
     selected: boolean
     renderActions: (model: Model) => React.ReactNode
@@ -26,7 +26,6 @@ export const SectionListRow = React.memo(function SectionListRow<
     Model extends BaseListModel
 >({
     active,
-    selectedColumns,
     modelData,
     onSelect,
     onClick,
@@ -35,6 +34,8 @@ export const SectionListRow = React.memo(function SectionListRow<
     renderColumnValue,
 }: SectionListRowProps<Model>) {
     const editAccess = canEditModel(modelData)
+    const { columns: selectedColumns } = useModelListView()
+
     return (
         <DataTableRow
             className={cx(css.listRow, { [css.active]: active })}
@@ -58,7 +59,7 @@ export const SectionListRow = React.memo(function SectionListRow<
             </DataTableCell>
             {selectedColumns.map((selectedColumn) => (
                 <DataTableCell
-                    key={selectedColumn.path}
+                    key={selectedColumn}
                     onClick={() => onClick?.(modelData)}
                 >
                     {renderColumnValue(selectedColumn, modelData)}

src/components/sectionList/SectionListWrapper.tsx

@@ -7,7 +7,6 @@ import { SectionListHeaderBulk } from './bulk'
 import { DetailsPanel, DefaultDetailsPanelContent } from './detailsPanel'
 import { FilterWrapper } from './filters/FilterWrapper'
 import { DefaultListActions } from './listActions'
-import { useModelListView } from './listView'
 import { ModelValue } from './modelValue/ModelValue'
 import { SectionList } from './SectionList'
 import css from './SectionList.module.css'
@@ -33,7 +32,6 @@ export const SectionListWrapper = ({
     pager,
     refetch,
 }: SectionListWrapperProps) => {
-    const { columns: headerColumns } = useModelListView()
     const schema = useSchemaFromHandle()
     const { selectedModels, checkAllSelected, add, remove, toggle, clearAll } =
         useSelectedModels()
@@ -85,7 +83,7 @@ export const SectionListWrapper = ({
     /* Note that SectionListRow is memoed, to prevent re-rendering
     every item when interacting with a row */
     const renderColumnValue = useCallback(
-        ({ path }: SelectedColumn, model: BaseListModel) => {
+        (path: SelectedColumn, model: BaseListModel) => {
             return (
                 <ModelValue path={path} schema={schema} sectionModel={model} />
             )
@@ -121,7 +119,6 @@ export const SectionListWrapper = ({
                     <SectionListHeader />
                 )}
                 <SectionList
-                    headerColumns={headerColumns}
                     onSelectAll={handleSelectAll}
                     allSelected={isAllSelected}
                 >
@@ -130,7 +127,6 @@ export const SectionListWrapper = ({
                         <SectionListRow
                             key={model.id}
                             modelData={model}
-                            selectedColumns={headerColumns}
                             onSelect={toggle}
                             onClick={handleDetailsClick}
                             selected={selectedModels.has(model.id)}

src/components/sectionList/filters/DynamicFilters.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { ConfigurableFilterKey } from './../../../lib'
 import {
     AggregationTypeFilter,
     CategoryComboFilter,
@@ -10,9 +9,7 @@ import {
 } from './filterSelectors'
 import { useFilterKeys } from './useFilterKeys'
 
-type FilterKeyToComponentMap = Partial<Record<ConfigurableFilterKey, React.FC>>
-
-const filterKeyToComponentMap: FilterKeyToComponentMap = {
+const filterKeyToComponentMap: Record<string, React.FC> = {
     categoryCombo: CategoryComboFilter,
     dataSet: DataSetFilter,
     domainType: DomainTypeSelectionFilter,

src/components/sectionList/filters/useFilterKeys.tsx

@@ -15,17 +15,16 @@ export const useFilterKeys = () => {
     // combine filters and views, since filters in URL might not be selected for view
     // but we should show them when they have a value
     const filterKeys = useMemo(() => {
-        const viewFilterKeys = viewFilters.map(({ filterKey }) => filterKey)
         const selectedFiltersNotInView = Object.entries(filters)
             .filter(
                 ([filterKey, value]) =>
                     value !== undefined &&
                     filterKey !== IDENTIFIABLE_FILTER_KEY &&
-                    !viewFilterKeys.includes(filterKey as ConfigurableFilterKey)
+                    !viewFilters.includes(filterKey as ConfigurableFilterKey)
             )
             .map(([filterKey]) => filterKey) as ConfigurableFilterKey[]
 
-        return viewFilterKeys.concat(selectedFiltersNotInView)
+        return viewFilters.concat(selectedFiltersNotInView)
     }, [filters, viewFilters])
     return filterKeys
 }

src/components/sectionList/listView/ManageListView.tsx

@@ -16,6 +16,7 @@ import {
     getColumnsForSection,
     getFiltersForSection,
     useModelSectionHandleOrThrow,
+    getTranslatedProperty,
 } from '../../../lib'
 import css from './ManageListView.module.css'
 import { useModelListView, useMutateModelListViews } from './useModelListView'
@@ -29,10 +30,6 @@ type ManageColumnsDialogProps = {
     children: (props: RenderProps) => React.ReactNode
 }
 
-const toPath = (propertyDescriptor: { path: string }) => propertyDescriptor.path
-const toFilterKey = (filterDescriptor: { filterKey: string }) =>
-    filterDescriptor.filterKey
-
 type FormValues = {
     columns: string[]
     filters: string[]
@@ -49,6 +46,7 @@ const validate = (values: FormValues) => {
     }
     return errors
 }
+
 export const ManageListView = ({
     onSaved,
     children,
@@ -67,8 +65,8 @@ export const ManageListView = ({
     const columnsConfig = getColumnsForSection(section.name)
     const filtersConfig = getFiltersForSection(section.name)
 
-    const defaultColumns = columnsConfig.default.map(toPath)
-    const defaultFilters = filtersConfig.default.map(toFilterKey)
+    const defaultColumns = columnsConfig.default
+    const defaultFilters = filtersConfig.default
 
     const handleSave = async (values: FormValues) => {
         const isDefault = (arr: string[], def: string[]) =>
@@ -102,14 +100,8 @@ export const ManageListView = ({
 
     const initialValues = useMemo(() => {
         return {
-            columns:
-                savedColumns.length > 0
-                    ? savedColumns.map(toPath)
-                    : defaultColumns,
-            filters:
-                savedFilters.length > 0
-                    ? savedFilters.map(toFilterKey)
-                    : defaultFilters,
+            columns: savedColumns.length > 0 ? savedColumns : defaultColumns,
+            filters: savedFilters.length > 0 ? savedFilters : defaultFilters,
         }
     }, [savedFilters, savedColumns, defaultColumns, defaultFilters])
 
@@ -149,9 +141,9 @@ export const ManageListView = ({
                             loading={query.isLoading}
                             defaultOptions={defaultColumns}
                             availableOptions={columnsConfig.available.map(
-                                (c) => ({
-                                    label: c.label,
-                                    value: c.path,
+                                (path) => ({
+                                    label: getTranslatedProperty(path),
+                                    value: path,
                                 })
                             )}
                         />
@@ -164,9 +156,9 @@ export const ManageListView = ({
                             loading={query.isLoading}
                             defaultOptions={defaultFilters}
                             availableOptions={filtersConfig.available.map(
-                                (f) => ({
-                                    label: f.label,
-                                    value: f.filterKey,
+                                (filterKey) => ({
+                                    label: getTranslatedProperty(filterKey),
+                                    value: filterKey,
                                 })
                             )}
                         />

src/components/sectionList/listView/types.ts

@@ -1,11 +1,10 @@
 import { SectionName } from '../../../lib'
-import type { FilterDescriptor, ModelPropertyDescriptor } from '../../../lib'
 
 export interface ModelListView {
     name: string
     sectionModel: string
-    columns: ReadonlyArray<ModelPropertyDescriptor>
-    filters: ReadonlyArray<FilterDescriptor>
+    columns: string[]
+    filters: string[]
 }
 
 export type ModelListViews = {