From ae75f5cabd46053de78f031a96b11313cbfd127e Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Fri, 26 Jan 2024 17:51:37 +0100
Subject: [PATCH 01/22] refactor(filters): dynamic filter components

---
 .../sectionList/SectionListWrapper.tsx        |  3 +-
 .../sectionList/filters/DynamicFilters.tsx    | 31 +++++++++++++++
 .../filters/FilterWrapper.module.css          |  6 +++
 .../sectionList/filters/FilterWrapper.tsx     | 11 +++---
 .../{ => filterSelectors}/ConstantFilters.tsx | 13 ++++++-
 .../ConstantSelectionFilter.tsx               |  5 +--
 .../{ => filterSelectors}/Filters.module.css  |  0
 .../IdentifiableFilter.tsx                    |  2 +-
 .../filters/filterSelectors/index.ts          |  1 +
 src/components/sectionList/filters/index.ts   |  6 +--
 .../sectionList/filters/useFilterKeys.tsx     | 38 +++++++++++++++++++
 src/lib/constants/index.ts                    |  1 -
 src/lib/sectionList/filters/filterConfig.tsx  |  2 +-
 .../filters/useSectionListFilters.ts          |  2 +-
 src/lib/sectionList/index.ts                  |  1 +
 .../listViews}/index.ts                       |  0
 .../listViews}/sectionListViewsConfig.ts      |  2 +-
 .../listViews}/viewConfigResolver.ts          | 12 +++---
 18 files changed, 111 insertions(+), 25 deletions(-)
 create mode 100644 src/components/sectionList/filters/DynamicFilters.tsx
 create mode 100644 src/components/sectionList/filters/FilterWrapper.module.css
 rename src/components/sectionList/filters/{ => filterSelectors}/ConstantFilters.tsx (62%)
 rename src/components/sectionList/filters/{ => filterSelectors}/ConstantSelectionFilter.tsx (91%)
 rename src/components/sectionList/filters/{ => filterSelectors}/Filters.module.css (100%)
 rename src/components/sectionList/filters/{ => filterSelectors}/IdentifiableFilter.tsx (97%)
 create mode 100644 src/components/sectionList/filters/filterSelectors/index.ts
 create mode 100644 src/components/sectionList/filters/useFilterKeys.tsx
 rename src/lib/{constants/sectionListView => sectionList/listViews}/index.ts (100%)
 rename src/lib/{constants/sectionListView => sectionList/listViews}/sectionListViewsConfig.ts (97%)
 rename src/lib/{constants/sectionListView => sectionList/listViews}/viewConfigResolver.ts (92%)

diff --git a/src/components/sectionList/SectionListWrapper.tsx b/src/components/sectionList/SectionListWrapper.tsx
index 2dacbcea..b958f000 100644
--- a/src/components/sectionList/SectionListWrapper.tsx
+++ b/src/components/sectionList/SectionListWrapper.tsx
@@ -28,7 +28,6 @@ export const SectionListWrapper = ({
     error,
     pager,
 }: SectionListWrapperProps) => {
-    data
     const { columns: headerColumns } = useModelListView()
     const schema = useSchemaFromHandle()
     const [selectedModels, setSelectedModels] = useState<Set<string>>(new Set())
@@ -78,7 +77,7 @@ export const SectionListWrapper = ({
     return (
         <div>
             <SectionListTitle />
-            <FilterWrapper>{filterElement}</FilterWrapper>
+            <FilterWrapper />
             <div className={css.listDetailsWrapper}>
                 <SectionListHeader />
                 <SectionList
diff --git a/src/components/sectionList/filters/DynamicFilters.tsx b/src/components/sectionList/filters/DynamicFilters.tsx
new file mode 100644
index 00000000..0ce82eb9
--- /dev/null
+++ b/src/components/sectionList/filters/DynamicFilters.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { ConfigurableFilterKey } from './../../../lib'
+import {
+    AggregationTypeFilter,
+    DomainTypeSelectionFilter,
+    ValueTypeSelectionFilter,
+} from './filterSelectors'
+import { useFilterKeys } from './useFilterKeys'
+
+type FilterKeyToComponentMap = Partial<Record<ConfigurableFilterKey, React.FC>>
+
+const filterKeyToComponentMap: FilterKeyToComponentMap = {
+    domainType: DomainTypeSelectionFilter,
+    valueType: ValueTypeSelectionFilter,
+    aggregationType: AggregationTypeFilter,
+}
+
+export const DynamicFilters = () => {
+    const filterKeys = useFilterKeys()
+
+    return (
+        <>
+            {filterKeys.map((filterKey) => {
+                const FilterComponent = filterKeyToComponentMap[filterKey]
+                return FilterComponent ? (
+                    <FilterComponent key={filterKey} />
+                ) : null
+            })}
+        </>
+    )
+}
diff --git a/src/components/sectionList/filters/FilterWrapper.module.css b/src/components/sectionList/filters/FilterWrapper.module.css
new file mode 100644
index 00000000..46b41f9e
--- /dev/null
+++ b/src/components/sectionList/filters/FilterWrapper.module.css
@@ -0,0 +1,6 @@
+.filterWrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    align-items: center;
+}
diff --git a/src/components/sectionList/filters/FilterWrapper.tsx b/src/components/sectionList/filters/FilterWrapper.tsx
index 79a3fdf5..1c79c88c 100644
--- a/src/components/sectionList/filters/FilterWrapper.tsx
+++ b/src/components/sectionList/filters/FilterWrapper.tsx
@@ -2,12 +2,11 @@ import i18n from '@dhis2/d2-i18n'
 import { Button } from '@dhis2/ui'
 import React from 'react'
 import { useSectionListFilters } from './../../../lib'
-import css from './Filters.module.css'
-import { IdentifiableFilter } from './IdentifiableFilter'
+import { DynamicFilters } from './DynamicFilters'
+import { IdentifiableFilter } from './filterSelectors/IdentifiableFilter'
+import css from './FilterWrapper.module.css'
 
-type FilterWrapperProps = React.PropsWithChildren
-
-export const FilterWrapper = ({ children }: FilterWrapperProps) => {
+export const FilterWrapper = () => {
     const [, setFilters] = useSectionListFilters()
 
     const handleClear = () => {
@@ -17,7 +16,7 @@ export const FilterWrapper = ({ children }: FilterWrapperProps) => {
     return (
         <div className={css.filterWrapper}>
             <IdentifiableFilter />
-            {children}
+            <DynamicFilters />
             <Button small onClick={handleClear}>
                 {i18n.t('Clear all filters')}
             </Button>
diff --git a/src/components/sectionList/filters/ConstantFilters.tsx b/src/components/sectionList/filters/filterSelectors/ConstantFilters.tsx
similarity index 62%
rename from src/components/sectionList/filters/ConstantFilters.tsx
rename to src/components/sectionList/filters/filterSelectors/ConstantFilters.tsx
index 635b0340..202ee16a 100644
--- a/src/components/sectionList/filters/ConstantFilters.tsx
+++ b/src/components/sectionList/filters/filterSelectors/ConstantFilters.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { DOMAIN_TYPE, VALUE_TYPE } from '../../../lib'
+import { AGGREGATION_TYPE, DOMAIN_TYPE, VALUE_TYPE } from '../../../../lib'
 import { ConstantSelectionFilter } from './ConstantSelectionFilter'
 
 export const DomainTypeSelectionFilter = () => {
@@ -22,3 +22,14 @@ export const ValueTypeSelectionFilter = () => {
         />
     )
 }
+
+export const AggregationTypeFilter = () => {
+    return (
+        <ConstantSelectionFilter
+            label={'Aggregation type'}
+            filterKey="aggregationType"
+            constants={AGGREGATION_TYPE}
+            filterable
+        />
+    )
+}
diff --git a/src/components/sectionList/filters/ConstantSelectionFilter.tsx b/src/components/sectionList/filters/filterSelectors/ConstantSelectionFilter.tsx
similarity index 91%
rename from src/components/sectionList/filters/ConstantSelectionFilter.tsx
rename to src/components/sectionList/filters/filterSelectors/ConstantSelectionFilter.tsx
index c518f14f..47b90117 100644
--- a/src/components/sectionList/filters/ConstantSelectionFilter.tsx
+++ b/src/components/sectionList/filters/filterSelectors/ConstantSelectionFilter.tsx
@@ -1,8 +1,8 @@
 import i18n from '@dhis2/d2-i18n'
 import { SingleSelect, SingleSelectOption } from '@dhis2/ui'
 import React from 'react'
-import { FilterKey, useSectionListFilter } from '../../../lib'
-import { SelectOnChangeObject } from '../../../types'
+import { FilterKey, useSectionListFilter } from '../../../../lib'
+import { SelectOnChangeObject } from '../../../../types'
 import css from './Filters.module.css'
 
 type ConstantSelectionFilterProps = {
@@ -19,7 +19,6 @@ export const ConstantSelectionFilter = ({
     filterable,
 }: ConstantSelectionFilterProps) => {
     const [filter, setFilter] = useSectionListFilter(filterKey)
-
     return (
         <SingleSelect
             className={css.constantSelectionFilter}
diff --git a/src/components/sectionList/filters/Filters.module.css b/src/components/sectionList/filters/filterSelectors/Filters.module.css
similarity index 100%
rename from src/components/sectionList/filters/Filters.module.css
rename to src/components/sectionList/filters/filterSelectors/Filters.module.css
diff --git a/src/components/sectionList/filters/IdentifiableFilter.tsx b/src/components/sectionList/filters/filterSelectors/IdentifiableFilter.tsx
similarity index 97%
rename from src/components/sectionList/filters/IdentifiableFilter.tsx
rename to src/components/sectionList/filters/filterSelectors/IdentifiableFilter.tsx
index deab647a..241fc7ef 100644
--- a/src/components/sectionList/filters/IdentifiableFilter.tsx
+++ b/src/components/sectionList/filters/filterSelectors/IdentifiableFilter.tsx
@@ -5,7 +5,7 @@ import {
     useDebounce,
     IDENTIFIABLE_KEY,
     useSectionListFilter,
-} from '../../../lib'
+} from '../../../../lib'
 import css from './Filters.module.css'
 
 export const IdentifiableFilter = () => {
diff --git a/src/components/sectionList/filters/filterSelectors/index.ts b/src/components/sectionList/filters/filterSelectors/index.ts
new file mode 100644
index 00000000..d34cadc2
--- /dev/null
+++ b/src/components/sectionList/filters/filterSelectors/index.ts
@@ -0,0 +1 @@
+export * from './ConstantFilters'
diff --git a/src/components/sectionList/filters/index.ts b/src/components/sectionList/filters/index.ts
index 40486a57..bfb9c6bb 100644
--- a/src/components/sectionList/filters/index.ts
+++ b/src/components/sectionList/filters/index.ts
@@ -1,3 +1,3 @@
-export * from './ConstantSelectionFilter'
-export * from './IdentifiableFilter'
-export * from './ConstantFilters'
+export * from './filterSelectors/ConstantSelectionFilter'
+export * from './filterSelectors/IdentifiableFilter'
+export * from './filterSelectors/ConstantFilters'
diff --git a/src/components/sectionList/filters/useFilterKeys.tsx b/src/components/sectionList/filters/useFilterKeys.tsx
new file mode 100644
index 00000000..affa8033
--- /dev/null
+++ b/src/components/sectionList/filters/useFilterKeys.tsx
@@ -0,0 +1,38 @@
+import { useMemo } from 'react'
+import {
+    useSectionListFilters,
+    ParsedFilterParams,
+    ConfigurableFilterKey,
+    IDENTIFIABLE_KEY,
+} from '../../../lib'
+import { useModelListView } from '../listView'
+
+export type FiltersWithValue = {
+    [FilterKey in ConfigurableFilterKey]: {
+        value: ParsedFilterParams[FilterKey]
+        label: string
+        filterKey: FilterKey
+    }
+}
+
+export const useFilterKeys = () => {
+    const [filters] = useSectionListFilters()
+    const views = useModelListView()
+    const viewFilters = views.filters
+    // 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_KEY &&
+                    !viewFilterKeys.includes(filterKey as ConfigurableFilterKey)
+            )
+            .map(([filterKey]) => filterKey) as ConfigurableFilterKey[]
+
+        return viewFilterKeys.concat(selectedFiltersNotInView)
+    }, [filters, viewFilters])
+    return filterKeys
+}
diff --git a/src/lib/constants/index.ts b/src/lib/constants/index.ts
index c8301647..61de1c84 100644
--- a/src/lib/constants/index.ts
+++ b/src/lib/constants/index.ts
@@ -1,6 +1,5 @@
 export * from './sections'
 export * from './translatedModelConstants'
 export * from './translatedModelProperties'
-export * from './sectionListView'
 
 export const IDENTIFIABLE_KEY = 'identifiable'
diff --git a/src/lib/sectionList/filters/filterConfig.tsx b/src/lib/sectionList/filters/filterConfig.tsx
index 0fae40c3..158ccadb 100644
--- a/src/lib/sectionList/filters/filterConfig.tsx
+++ b/src/lib/sectionList/filters/filterConfig.tsx
@@ -15,7 +15,7 @@ export const filterParamsSchema = z
         categoryCombo: zodArrayIds,
         dataSet: zodArrayIds,
         domainType: z.array(z.nativeEnum(DataElement.domainType)),
-        valueType: z.array(z.string()),
+        valueType: z.array(z.nativeEnum(DataElement.valueType)),
     })
     .partial()
 
diff --git a/src/lib/sectionList/filters/useSectionListFilters.ts b/src/lib/sectionList/filters/useSectionListFilters.ts
index 087888b8..e029f6d1 100644
--- a/src/lib/sectionList/filters/useSectionListFilters.ts
+++ b/src/lib/sectionList/filters/useSectionListFilters.ts
@@ -14,7 +14,7 @@ import {
 export const useSectionListFilters = () => {
     const [filters, setFilterParams] = useQueryParams(filterQueryParamType)
     const [, setPagingParams] = usePaginationQueryParams()
-
+    console.log({ filters })
     const parsedFilters = useMemo(() => {
         const parsed = filterParamsSchema.safeParse(filters)
         if (parsed.success) {
diff --git a/src/lib/sectionList/index.ts b/src/lib/sectionList/index.ts
index ab050cdf..180856e0 100644
--- a/src/lib/sectionList/index.ts
+++ b/src/lib/sectionList/index.ts
@@ -5,3 +5,4 @@ export {
     useUpdatePaginationParams,
 } from './usePaginationParams'
 export * from './useParamsForDataQuery'
+export * from './listViews'
diff --git a/src/lib/constants/sectionListView/index.ts b/src/lib/sectionList/listViews/index.ts
similarity index 100%
rename from src/lib/constants/sectionListView/index.ts
rename to src/lib/sectionList/listViews/index.ts
diff --git a/src/lib/constants/sectionListView/sectionListViewsConfig.ts b/src/lib/sectionList/listViews/sectionListViewsConfig.ts
similarity index 97%
rename from src/lib/constants/sectionListView/sectionListViewsConfig.ts
rename to src/lib/sectionList/listViews/sectionListViewsConfig.ts
index 2042180c..90a6f529 100644
--- a/src/lib/constants/sectionListView/sectionListViewsConfig.ts
+++ b/src/lib/sectionList/listViews/sectionListViewsConfig.ts
@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import type { ConfigurableFilterKey } from '../../sectionList/filters/'
+import type { ConfigurableFilterKey } from '../filters'
 
 export interface ModelPropertyDescriptor {
     label: string
diff --git a/src/lib/constants/sectionListView/viewConfigResolver.ts b/src/lib/sectionList/listViews/viewConfigResolver.ts
similarity index 92%
rename from src/lib/constants/sectionListView/viewConfigResolver.ts
rename to src/lib/sectionList/listViews/viewConfigResolver.ts
index c7434499..740d93ae 100644
--- a/src/lib/constants/sectionListView/viewConfigResolver.ts
+++ b/src/lib/sectionList/listViews/viewConfigResolver.ts
@@ -1,5 +1,5 @@
+import { getTranslatedProperty } from '../../constants/translatedModelProperties'
 import { uniqueBy } from '../../utils'
-import { getTranslatedProperty } from '../translatedModelProperties'
 import {
     defaultModelViewConfig,
     modelListViewsConfig,
@@ -23,7 +23,7 @@ interface ResolvedSectionListView {
     [key: string]: ResolvedViewConfig
 }
 
-const toModelPropertyDescriptor = (
+export const toModelPropertyDescriptor = (
     propertyConfig: ModelPropertyConfig
 ): ModelPropertyDescriptor => {
     if (typeof propertyConfig === 'string') {
@@ -35,7 +35,9 @@ const toModelPropertyDescriptor = (
     return propertyConfig
 }
 
-const toFilterDescriptor = (propertyConfig: FilterConfig): FilterDescriptor => {
+export const toFilterDescriptor = (
+    propertyConfig: FilterConfig
+): FilterDescriptor => {
     if (typeof propertyConfig === 'string') {
         return {
             label: getTranslatedProperty(propertyConfig),
@@ -111,7 +113,7 @@ const resolveListViewsConfig = () => {
     return merged
 }
 
-const mergedModelViewsConfig = resolveListViewsConfig()
+const resolvedModelViewsConfig = resolveListViewsConfig()
 const resolvedDefaultConfig = {
     columns: resolveColumnConfig(defaultModelViewConfig.columns),
     filters: resolveFilterConfig(defaultModelViewConfig.filters),
@@ -120,7 +122,7 @@ const resolvedDefaultConfig = {
 export const getViewConfigForSection = (
     sectionName: string
 ): ResolvedViewConfig => {
-    const resolvedConfig = mergedModelViewsConfig[sectionName]
+    const resolvedConfig = resolvedModelViewsConfig[sectionName]
     if (resolvedConfig) {
         return resolvedConfig
     }

From 3242a4fde32eac4c7ff8666c6fea739768077305 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Fri, 26 Jan 2024 17:52:35 +0100
Subject: [PATCH 02/22] fix: cleanup filter props in DE-List

---
 src/components/sectionList/SectionListWrapper.tsx |  2 --
 src/pages/dataElements/List.tsx                   | 12 +-----------
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/components/sectionList/SectionListWrapper.tsx b/src/components/sectionList/SectionListWrapper.tsx
index b958f000..1f1c9052 100644
--- a/src/components/sectionList/SectionListWrapper.tsx
+++ b/src/components/sectionList/SectionListWrapper.tsx
@@ -16,14 +16,12 @@ import { SectionListRow } from './SectionListRow'
 import { SectionListTitle } from './SectionListTitle'
 
 type SectionListWrapperProps = {
-    filterElement?: React.ReactElement
     data: ModelCollection | undefined
     pager: Pager | undefined
     error: FetchError | undefined
 }
 
 export const SectionListWrapper = ({
-    filterElement,
     data,
     error,
     pager,
diff --git a/src/pages/dataElements/List.tsx b/src/pages/dataElements/List.tsx
index fcaf2b3f..1feb859c 100644
--- a/src/pages/dataElements/List.tsx
+++ b/src/pages/dataElements/List.tsx
@@ -1,10 +1,6 @@
 import { useDataQuery } from '@dhis2/app-runtime'
 import React, { useEffect } from 'react'
-import {
-    SectionListWrapper,
-    DomainTypeSelectionFilter,
-    ValueTypeSelectionFilter,
-} from '../../components'
+import { SectionListWrapper } from '../../components'
 import { useModelListView } from '../../components/sectionList/listView'
 import { useSchemaFromHandle, useParamsForDataQuery } from '../../lib/'
 import { getFieldFilter } from '../../lib/models/path'
@@ -62,12 +58,6 @@ export const Component = () => {
     return (
         <div>
             <SectionListWrapper
-                filterElement={
-                    <>
-                        <DomainTypeSelectionFilter />
-                        <ValueTypeSelectionFilter />
-                    </>
-                }
                 error={error}
                 data={data?.result.dataElements}
                 pager={data?.result.pager}

From 5c7acb40e08c7ea8021ebc076aa27979f28f117d Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Mon, 29 Jan 2024 00:49:05 +0100
Subject: [PATCH 03/22] feat(filters): add filters for dataSet and catCombo

---
 .../SearchableSingleSelect.tsx                |   6 +-
 .../SearchableSingleSelect/index.ts           |   3 +-
 .../sectionList/filters/DynamicFilters.tsx    |   5 +-
 .../filterSelectors/CategoryComboFilter.tsx   |  24 +++
 .../ConstantSelectionFilter.tsx               |   1 +
 .../filters/filterSelectors/DataSetFilter.tsx |  24 +++
 .../filters/filterSelectors/ModelFilter.tsx   | 177 ++++++++++++++++++
 .../filterSelectors/createdFilterDataQuery.ts |  13 ++
 .../filters/filterSelectors/index.ts          |   2 +
 .../sectionList/filters/useFilterKeys.tsx     |   3 +-
 .../sectionList/listView/useModelListView.tsx |   2 +-
 src/lib/sectionList/filters/index.ts          |   1 +
 .../filters/parseFiltersToQueryParams.ts      |   4 +-
 .../filters/useFilterQueryParams.ts           |   2 +-
 .../listViews/sectionListViewsConfig.ts       |   4 +-
 src/lib/sectionList/useParamsForDataQuery.ts  |  11 +-
 16 files changed, 261 insertions(+), 21 deletions(-)
 create mode 100644 src/components/sectionList/filters/filterSelectors/CategoryComboFilter.tsx
 create mode 100644 src/components/sectionList/filters/filterSelectors/DataSetFilter.tsx
 create mode 100644 src/components/sectionList/filters/filterSelectors/ModelFilter.tsx
 create mode 100644 src/components/sectionList/filters/filterSelectors/createdFilterDataQuery.ts

diff --git a/src/components/SearchableSingleSelect/SearchableSingleSelect.tsx b/src/components/SearchableSingleSelect/SearchableSingleSelect.tsx
index 3a6c9013..26894a26 100644
--- a/src/components/SearchableSingleSelect/SearchableSingleSelect.tsx
+++ b/src/components/SearchableSingleSelect/SearchableSingleSelect.tsx
@@ -6,11 +6,10 @@ import {
     SingleSelectOption,
 } from '@dhis2/ui'
 import React, { forwardRef, useEffect, useState } from 'react'
-// import { useDebouncedCallback } from 'use-debounce'
 import { useDebouncedState } from '../../lib'
 import classes from './SearchableSingleSelect.module.css'
 
-interface Option {
+export interface Option {
     value: string
     label: string
 }
@@ -55,6 +54,7 @@ interface SearchableSingleSelectPropTypes {
     onRetryClick: () => void
     options: Option[]
     placeholder: string
+    prefix?: string
     showEndLoader: boolean
     loading: boolean
     selected?: string
@@ -70,6 +70,7 @@ export const SearchableSingleSelect = ({
     error,
     loading,
     placeholder,
+    prefix,
     onBlur,
     onChange,
     onEndReached,
@@ -126,6 +127,7 @@ export const SearchableSingleSelect = ({
             error={invalid}
             onChange={onChange}
             placeholder={placeholder}
+            prefix={prefix}
             onBlur={onBlur}
             onFocus={onFocus}
         >
diff --git a/src/components/SearchableSingleSelect/index.ts b/src/components/SearchableSingleSelect/index.ts
index 7f9aa7b6..889bd39d 100644
--- a/src/components/SearchableSingleSelect/index.ts
+++ b/src/components/SearchableSingleSelect/index.ts
@@ -1 +1,2 @@
-export { SearchableSingleSelect } from './SearchableSingleSelect'
+export * from './SearchableSingleSelect'
+//asf
diff --git a/src/components/sectionList/filters/DynamicFilters.tsx b/src/components/sectionList/filters/DynamicFilters.tsx
index 0ce82eb9..20c7e0cd 100644
--- a/src/components/sectionList/filters/DynamicFilters.tsx
+++ b/src/components/sectionList/filters/DynamicFilters.tsx
@@ -2,6 +2,8 @@ import React from 'react'
 import { ConfigurableFilterKey } from './../../../lib'
 import {
     AggregationTypeFilter,
+    CategoryComboFilter,
+    DataSetFilter,
     DomainTypeSelectionFilter,
     ValueTypeSelectionFilter,
 } from './filterSelectors'
@@ -10,6 +12,8 @@ import { useFilterKeys } from './useFilterKeys'
 type FilterKeyToComponentMap = Partial<Record<ConfigurableFilterKey, React.FC>>
 
 const filterKeyToComponentMap: FilterKeyToComponentMap = {
+    categoryCombo: CategoryComboFilter,
+    dataSet: DataSetFilter,
     domainType: DomainTypeSelectionFilter,
     valueType: ValueTypeSelectionFilter,
     aggregationType: AggregationTypeFilter,
@@ -17,7 +21,6 @@ const filterKeyToComponentMap: FilterKeyToComponentMap = {
 
 export const DynamicFilters = () => {
     const filterKeys = useFilterKeys()
-
     return (
         <>
             {filterKeys.map((filterKey) => {
diff --git a/src/components/sectionList/filters/filterSelectors/CategoryComboFilter.tsx b/src/components/sectionList/filters/filterSelectors/CategoryComboFilter.tsx
new file mode 100644
index 00000000..67a2e91c
--- /dev/null
+++ b/src/components/sectionList/filters/filterSelectors/CategoryComboFilter.tsx
@@ -0,0 +1,24 @@
+import i18n from '@dhis2/d2-i18n'
+import React from 'react'
+import { useSectionListFilter } from '../../../../lib'
+import { createFilterDataQuery } from './createdFilterDataQuery'
+import { ModelFilterSelect } from './ModelFilter'
+
+const query = createFilterDataQuery('categoryCombos')
+
+export const CategoryComboFilter = () => {
+    const [filter, setFilter] = useSectionListFilter('categoryCombo')
+
+    const selected = filter?.[0]
+
+    return (
+        <ModelFilterSelect
+            placeholder={i18n.t('Category combo')}
+            query={query}
+            selected={selected}
+            onChange={({ selected }) =>
+                setFilter(selected ? [selected] : undefined)
+            }
+        />
+    )
+}
diff --git a/src/components/sectionList/filters/filterSelectors/ConstantSelectionFilter.tsx b/src/components/sectionList/filters/filterSelectors/ConstantSelectionFilter.tsx
index 47b90117..2c29b768 100644
--- a/src/components/sectionList/filters/filterSelectors/ConstantSelectionFilter.tsx
+++ b/src/components/sectionList/filters/filterSelectors/ConstantSelectionFilter.tsx
@@ -28,6 +28,7 @@ export const ConstantSelectionFilter = ({
             selected={Array.isArray(filter) ? filter[0] : filter}
             placeholder={label}
             dense
+            prefix={label}
             filterable={filterable}
             filterPlaceholder={i18n.t('Type to filter options')}
             noMatchText={i18n.t('No matches')}
diff --git a/src/components/sectionList/filters/filterSelectors/DataSetFilter.tsx b/src/components/sectionList/filters/filterSelectors/DataSetFilter.tsx
new file mode 100644
index 00000000..c8d570b2
--- /dev/null
+++ b/src/components/sectionList/filters/filterSelectors/DataSetFilter.tsx
@@ -0,0 +1,24 @@
+import i18n from '@dhis2/d2-i18n'
+import React from 'react'
+import { useSectionListFilter } from '../../../../lib'
+import { createFilterDataQuery } from './createdFilterDataQuery'
+import { ModelFilterSelect } from './ModelFilter'
+
+const query = createFilterDataQuery('dataSets')
+
+export const DataSetFilter = () => {
+    const [filter, setFilter] = useSectionListFilter('dataSet')
+
+    const selected = filter?.[0]
+
+    return (
+        <ModelFilterSelect
+            placeholder={i18n.t('Data set')}
+            query={query}
+            selected={selected}
+            onChange={({ selected }) =>
+                setFilter(selected ? [selected] : undefined)
+            }
+        />
+    )
+}
diff --git a/src/components/sectionList/filters/filterSelectors/ModelFilter.tsx b/src/components/sectionList/filters/filterSelectors/ModelFilter.tsx
new file mode 100644
index 00000000..eff0b634
--- /dev/null
+++ b/src/components/sectionList/filters/filterSelectors/ModelFilter.tsx
@@ -0,0 +1,177 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import React, { useCallback, useRef, useState } from 'react'
+import type { Query } from '../../../../types'
+import { Pager } from '../../../../types/generated'
+import { Option, SearchableSingleSelect } from '../../../SearchableSingleSelect'
+
+function computeDisplayOptions({
+    selected,
+    selectedOption,
+    options,
+}: {
+    options: OptionResult[]
+    selected?: string
+    required?: boolean
+    selectedOption?: OptionResult
+}): Option[] {
+    // This happens only when we haven't fetched the label for an initially
+    // selected value. Don't show anything to prevent error that an option is
+    // missing
+    if (!selectedOption && selected) {
+        return []
+    }
+
+    const optionsContainSelected = options?.find(({ id }) => id === selected)
+
+    const withSelectedOption =
+        selectedOption && !optionsContainSelected
+            ? [...options, selectedOption]
+            : options
+
+    return withSelectedOption.map((option) => ({
+        value: option.id,
+        label: option.displayName,
+    }))
+}
+
+type ModelQuery = {
+    result: Query[keyof Query]
+}
+
+type OptionResult = {
+    id: string
+    displayName: string
+}
+
+type OptionsResult = {
+    result: {
+        pager: Pager
+    } & { [key: string]: OptionResult[] }
+}
+
+type PagedResult = { pager: Pager } & OptionsResult
+
+const createInitialOptionQuery = (
+    resource: string,
+    selected?: string
+): ModelQuery => ({
+    result: {
+        resource: resource,
+        id: selected,
+        params: (params) => ({
+            ...params,
+            fields: ['id', 'displayName'],
+        }),
+    },
+})
+
+export interface ModelSingleSelectProps {
+    onChange: ({ selected }: { selected: string | undefined }) => void
+    selected?: string
+    placeholder: string
+    query: Query
+}
+
+export const ModelFilterSelect = ({
+    onChange,
+    selected,
+    query,
+    placeholder,
+}: ModelSingleSelectProps) => {
+    // Using a ref because we don't want to react to changes.
+    // We're using this value only when imperatively calling `refetch`,
+    // nothing that depends on the render-cycle depends on this value
+    const filterRef = useRef<string | undefined>()
+    const pageRef = useRef(0)
+
+    const [initialQuery] = useState(() =>
+        createInitialOptionQuery(query.result.resource, selected)
+    )
+
+    const initialOptionResult = useDataQuery<OptionResult>(initialQuery, {
+        // run only when we have an initial selected value
+        lazy: initialQuery.result.id === undefined,
+        onComplete: (data) => {
+            setSelectedOption(data)
+        },
+    })
+
+    // We need to persist the selected option so we can display an <Option />
+    // when the current list doesn't contain the selected option (e.g. when
+    // the page with the selected option hasn't been reached yet or when
+    // filtering)
+    const [selectedOption, setSelectedOption] = useState<OptionResult>()
+
+    const optionsQueryResult = useDataQuery<PagedResult>(query)
+    const { refetch, data } = optionsQueryResult
+
+    const pager = data?.result.pager
+    const page = pager?.page || 0
+    const pageCount = pager?.pageCount || 0
+
+    const refetchWithFilter = useCallback(
+        ({ value }: { value: string }) => {
+            pageRef.current = 1
+            filterRef.current = value ? `displayName:ilike:${value}` : undefined
+            refetch({
+                page: pageRef.current,
+                filter: value ? filterRef.current : undefined,
+            })
+        },
+        [refetch]
+    )
+
+    const incrementPage = useCallback(() => {
+        pageRef.current = page + 1
+        refetch({ page: pageRef.current, filter: filterRef.current })
+    }, [refetch, page])
+
+    const loading =
+        optionsQueryResult.fetching ||
+        optionsQueryResult.loading ||
+        initialOptionResult.loading
+    const error =
+        optionsQueryResult.error || initialOptionResult.error
+            ? // @TODO: Ask Joe what do do here!
+              'An error has occurred. Please try again'
+            : ''
+    const dataResultKey = query.result.resource
+    const options = data?.result[dataResultKey] || []
+
+    const displayOptions = computeDisplayOptions({
+        selected,
+        selectedOption,
+        options,
+    })
+
+    return (
+        <SearchableSingleSelect
+            placeholder={placeholder}
+            prefix={placeholder}
+            showAllOption={true}
+            onChange={({ selected }) => {
+                if (selected === selectedOption?.id) {
+                    setSelectedOption(undefined)
+                } else {
+                    const option = options.find(({ id }) => id === selected)
+                    setSelectedOption(option)
+                }
+
+                onChange({ selected: selected })
+            }}
+            onEndReached={incrementPage}
+            options={displayOptions}
+            selected={selected}
+            showEndLoader={!loading && page < pageCount}
+            onFilterChange={refetchWithFilter}
+            loading={loading}
+            error={error}
+            onRetryClick={() => {
+                refetch({
+                    page: pageRef.current,
+                    filter: filterRef.current,
+                })
+            }}
+        />
+    )
+}
diff --git a/src/components/sectionList/filters/filterSelectors/createdFilterDataQuery.ts b/src/components/sectionList/filters/filterSelectors/createdFilterDataQuery.ts
new file mode 100644
index 00000000..f527c3ce
--- /dev/null
+++ b/src/components/sectionList/filters/filterSelectors/createdFilterDataQuery.ts
@@ -0,0 +1,13 @@
+import { Query } from '../../../../types'
+
+export const createFilterDataQuery = (resource: string): Query => ({
+    result: {
+        resource: resource,
+        params: (params) => ({
+            ...params,
+            fields: ['id', 'displayName'],
+            order: 'displayName:asc',
+            pageSize: 5,
+        }),
+    },
+})
diff --git a/src/components/sectionList/filters/filterSelectors/index.ts b/src/components/sectionList/filters/filterSelectors/index.ts
index d34cadc2..0476b218 100644
--- a/src/components/sectionList/filters/filterSelectors/index.ts
+++ b/src/components/sectionList/filters/filterSelectors/index.ts
@@ -1 +1,3 @@
 export * from './ConstantFilters'
+export * from './DataSetFilter'
+export * from './CategoryComboFilter'
diff --git a/src/components/sectionList/filters/useFilterKeys.tsx b/src/components/sectionList/filters/useFilterKeys.tsx
index affa8033..05c8c9f8 100644
--- a/src/components/sectionList/filters/useFilterKeys.tsx
+++ b/src/components/sectionList/filters/useFilterKeys.tsx
@@ -17,8 +17,7 @@ export type FiltersWithValue = {
 
 export const useFilterKeys = () => {
     const [filters] = useSectionListFilters()
-    const views = useModelListView()
-    const viewFilters = views.filters
+    const { filters: viewFilters } = useModelListView()
     // 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(() => {
diff --git a/src/components/sectionList/listView/useModelListView.tsx b/src/components/sectionList/listView/useModelListView.tsx
index ddca5cd9..6696da73 100644
--- a/src/components/sectionList/listView/useModelListView.tsx
+++ b/src/components/sectionList/listView/useModelListView.tsx
@@ -138,7 +138,7 @@ export const useModelListView = () => {
         console.error(query.error)
     }
 
-    const selectedView = query.data || getDefaultViewForSection(section.name)
+    const selectedView = getDefaultViewForSection(section.name)
 
     const columns = selectedView.columns
     const filters = selectedView.filters
diff --git a/src/lib/sectionList/filters/index.ts b/src/lib/sectionList/filters/index.ts
index 5655e266..da069d91 100644
--- a/src/lib/sectionList/filters/index.ts
+++ b/src/lib/sectionList/filters/index.ts
@@ -1,2 +1,3 @@
 export * from './filterConfig'
 export * from './useSectionListFilters'
+export * from './useFilterQueryParams'
diff --git a/src/lib/sectionList/filters/parseFiltersToQueryParams.ts b/src/lib/sectionList/filters/parseFiltersToQueryParams.ts
index 133e0d7f..f19f60b8 100644
--- a/src/lib/sectionList/filters/parseFiltersToQueryParams.ts
+++ b/src/lib/sectionList/filters/parseFiltersToQueryParams.ts
@@ -27,6 +27,9 @@ const getQueryParamForFilter = (
             return `dataSetElements.dataSet.id:in:[${v.join(',')}]`
         }
     }
+    if (key === 'categoryCombo') {
+        return `categoryCombo.id:in:[${(value as string[]).join(',')}]`
+    }
     return defaultFilter(key, value)
 }
 
@@ -41,6 +44,5 @@ export const parseFiltersToQueryParams = (
         .filter(
             (queryFilter): queryFilter is string => queryFilter !== undefined
         )
-
     return queryFilters
 }
diff --git a/src/lib/sectionList/filters/useFilterQueryParams.ts b/src/lib/sectionList/filters/useFilterQueryParams.ts
index 54e6f105..bbf15a32 100644
--- a/src/lib/sectionList/filters/useFilterQueryParams.ts
+++ b/src/lib/sectionList/filters/useFilterQueryParams.ts
@@ -6,7 +6,7 @@ import { useSectionListFilters } from './useSectionListFilters'
 export const useFilterQueryParams = (): string[] => {
     const [filters] = useSectionListFilters()
     const section = useSectionHandle()
-
+    console.log({ section })
     return useMemo(() => {
         return parseFiltersToQueryParams(filters, section)
     }, [filters, section])
diff --git a/src/lib/sectionList/listViews/sectionListViewsConfig.ts b/src/lib/sectionList/listViews/sectionListViewsConfig.ts
index 90a6f529..f98eadd8 100644
--- a/src/lib/sectionList/listViews/sectionListViewsConfig.ts
+++ b/src/lib/sectionList/listViews/sectionListViewsConfig.ts
@@ -80,11 +80,11 @@ export const modelListViewsConfig = {
                 { label: i18n.t('Domain'), path: 'domainType' },
                 { label: i18n.t('Value type'), path: 'valueType' },
                 'lastUpdated',
-                'sharing.public',
+                DESCRIPTORS.publicAccess,
             ],
         },
         filters: {
-            default: ['domainType', 'valueType'],
+            default: ['domainType', 'valueType', 'dataSet', 'categoryCombo'],
             available: ['categoryCombo'],
         },
     },
diff --git a/src/lib/sectionList/useParamsForDataQuery.ts b/src/lib/sectionList/useParamsForDataQuery.ts
index 423a8cde..77d6cccc 100644
--- a/src/lib/sectionList/useParamsForDataQuery.ts
+++ b/src/lib/sectionList/useParamsForDataQuery.ts
@@ -1,16 +1,7 @@
 import { useMemo } from 'react'
-import { useSectionListFilters } from './filters'
-import { parseFiltersToQueryParams } from './filters/parseFiltersToQueryParams'
+import { useFilterQueryParams } from './filters'
 import { usePaginationQueryParams } from './usePaginationParams'
 
-export const useFilterQueryParams = (): string[] => {
-    const [filters] = useSectionListFilters()
-
-    return useMemo(() => {
-        return parseFiltersToQueryParams(filters)
-    }, [filters])
-}
-
 export const useParamsForDataQuery = () => {
     const [paginationParams] = usePaginationQueryParams()
     const filterParams = useFilterQueryParams()

From 0fa3b91ddece908889bc5fe1dbd130ae524c7e97 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Mon, 29 Jan 2024 02:17:05 +0100
Subject: [PATCH 04/22] fix(filter): add useInfiniteDataQuery

---
 .../SearchableSingleSelect.tsx                |  3 +
 .../filters/filterSelectors/ModelFilter.tsx   | 96 ++++++++-----------
 .../filterSelectors/createdFilterDataQuery.ts |  4 +-
 src/lib/query/index.ts                        |  1 +
 src/lib/query/useInfiniteDataQuery.ts         | 73 ++++++++++++++
 src/types/query.ts                            |  6 ++
 6 files changed, 125 insertions(+), 58 deletions(-)
 create mode 100644 src/lib/query/index.ts
 create mode 100644 src/lib/query/useInfiniteDataQuery.ts

diff --git a/src/components/SearchableSingleSelect/SearchableSingleSelect.tsx b/src/components/SearchableSingleSelect/SearchableSingleSelect.tsx
index 26894a26..1a3a1629 100644
--- a/src/components/SearchableSingleSelect/SearchableSingleSelect.tsx
+++ b/src/components/SearchableSingleSelect/SearchableSingleSelect.tsx
@@ -52,6 +52,7 @@ interface SearchableSingleSelectPropTypes {
     onFilterChange: OnFilterChange
     onEndReached: () => void
     onRetryClick: () => void
+    dense?: boolean
     options: Option[]
     placeholder: string
     prefix?: string
@@ -68,6 +69,7 @@ interface SearchableSingleSelectPropTypes {
 export const SearchableSingleSelect = ({
     invalid,
     error,
+    dense,
     loading,
     placeholder,
     prefix,
@@ -130,6 +132,7 @@ export const SearchableSingleSelect = ({
             prefix={prefix}
             onBlur={onBlur}
             onFocus={onFocus}
+            dense={dense}
         >
             <div className={classes.searchField}>
                 <div className={classes.searchInput}>
diff --git a/src/components/sectionList/filters/filterSelectors/ModelFilter.tsx b/src/components/sectionList/filters/filterSelectors/ModelFilter.tsx
index eff0b634..c2f14d0a 100644
--- a/src/components/sectionList/filters/filterSelectors/ModelFilter.tsx
+++ b/src/components/sectionList/filters/filterSelectors/ModelFilter.tsx
@@ -1,7 +1,7 @@
 import { useDataQuery } from '@dhis2/app-runtime'
 import React, { useCallback, useRef, useState } from 'react'
-import type { Query } from '../../../../types'
-import { Pager } from '../../../../types/generated'
+import { useInfiniteDataQuery } from '../../../../lib/query'
+import type { ResultQuery } from '../../../../types'
 import { Option, SearchableSingleSelect } from '../../../SearchableSingleSelect'
 
 function computeDisplayOptions({
@@ -34,27 +34,15 @@ function computeDisplayOptions({
     }))
 }
 
-type ModelQuery = {
-    result: Query[keyof Query]
-}
-
 type OptionResult = {
     id: string
     displayName: string
 }
 
-type OptionsResult = {
-    result: {
-        pager: Pager
-    } & { [key: string]: OptionResult[] }
-}
-
-type PagedResult = { pager: Pager } & OptionsResult
-
 const createInitialOptionQuery = (
     resource: string,
     selected?: string
-): ModelQuery => ({
+): ResultQuery => ({
     result: {
         resource: resource,
         id: selected,
@@ -69,7 +57,7 @@ export interface ModelSingleSelectProps {
     onChange: ({ selected }: { selected: string | undefined }) => void
     selected?: string
     placeholder: string
-    query: Query
+    query: ResultQuery
 }
 
 export const ModelFilterSelect = ({
@@ -82,7 +70,6 @@ export const ModelFilterSelect = ({
     // We're using this value only when imperatively calling `refetch`,
     // nothing that depends on the render-cycle depends on this value
     const filterRef = useRef<string | undefined>()
-    const pageRef = useRef(0)
 
     const [initialQuery] = useState(() =>
         createInitialOptionQuery(query.result.resource, selected)
@@ -101,9 +88,9 @@ export const ModelFilterSelect = ({
     // the page with the selected option hasn't been reached yet or when
     // filtering)
     const [selectedOption, setSelectedOption] = useState<OptionResult>()
-
-    const optionsQueryResult = useDataQuery<PagedResult>(query)
-    const { refetch, data } = optionsQueryResult
+    const optionsQueryResult = useInfiniteDataQuery<OptionResult>(query)
+    // const optionsQueryResult = useDataQuery<PagedResult>(query)
+    const { refetch, data, incrementPage } = optionsQueryResult
 
     const pager = data?.result.pager
     const page = pager?.page || 0
@@ -111,21 +98,15 @@ export const ModelFilterSelect = ({
 
     const refetchWithFilter = useCallback(
         ({ value }: { value: string }) => {
-            pageRef.current = 1
             filterRef.current = value ? `displayName:ilike:${value}` : undefined
             refetch({
-                page: pageRef.current,
-                filter: value ? filterRef.current : undefined,
+                page: 1,
+                filter: filterRef.current,
             })
         },
         [refetch]
     )
 
-    const incrementPage = useCallback(() => {
-        pageRef.current = page + 1
-        refetch({ page: pageRef.current, filter: filterRef.current })
-    }, [refetch, page])
-
     const loading =
         optionsQueryResult.fetching ||
         optionsQueryResult.loading ||
@@ -145,33 +126,36 @@ export const ModelFilterSelect = ({
     })
 
     return (
-        <SearchableSingleSelect
-            placeholder={placeholder}
-            prefix={placeholder}
-            showAllOption={true}
-            onChange={({ selected }) => {
-                if (selected === selectedOption?.id) {
-                    setSelectedOption(undefined)
-                } else {
-                    const option = options.find(({ id }) => id === selected)
-                    setSelectedOption(option)
-                }
-
-                onChange({ selected: selected })
-            }}
-            onEndReached={incrementPage}
-            options={displayOptions}
-            selected={selected}
-            showEndLoader={!loading && page < pageCount}
-            onFilterChange={refetchWithFilter}
-            loading={loading}
-            error={error}
-            onRetryClick={() => {
-                refetch({
-                    page: pageRef.current,
-                    filter: filterRef.current,
-                })
-            }}
-        />
+        <div style={{ minWidth: 200 }}>
+            <SearchableSingleSelect
+                dense
+                placeholder={placeholder}
+                prefix={placeholder}
+                showAllOption={true}
+                onChange={({ selected }) => {
+                    if (selected === selectedOption?.id) {
+                        setSelectedOption(undefined)
+                    } else {
+                        const option = options.find(({ id }) => id === selected)
+                        setSelectedOption(option)
+                    }
+
+                    onChange({ selected: selected })
+                }}
+                onEndReached={incrementPage}
+                options={displayOptions}
+                selected={selected}
+                showEndLoader={!loading && page < pageCount}
+                onFilterChange={refetchWithFilter}
+                loading={loading}
+                error={error}
+                onRetryClick={() => {
+                    refetch({
+                        page: page,
+                        filter: filterRef.current,
+                    })
+                }}
+            />
+        </div>
     )
 }
diff --git a/src/components/sectionList/filters/filterSelectors/createdFilterDataQuery.ts b/src/components/sectionList/filters/filterSelectors/createdFilterDataQuery.ts
index f527c3ce..108c66ce 100644
--- a/src/components/sectionList/filters/filterSelectors/createdFilterDataQuery.ts
+++ b/src/components/sectionList/filters/filterSelectors/createdFilterDataQuery.ts
@@ -1,6 +1,6 @@
-import { Query } from '../../../../types'
+import { ResultQuery } from '../../../../types'
 
-export const createFilterDataQuery = (resource: string): Query => ({
+export const createFilterDataQuery = (resource: string): ResultQuery => ({
     result: {
         resource: resource,
         params: (params) => ({
diff --git a/src/lib/query/index.ts b/src/lib/query/index.ts
new file mode 100644
index 00000000..572da64c
--- /dev/null
+++ b/src/lib/query/index.ts
@@ -0,0 +1 @@
+export * from './useInfiniteDataQuery'
diff --git a/src/lib/query/useInfiniteDataQuery.ts b/src/lib/query/useInfiniteDataQuery.ts
new file mode 100644
index 00000000..41ff629f
--- /dev/null
+++ b/src/lib/query/useInfiniteDataQuery.ts
@@ -0,0 +1,73 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { ResultQuery, WrapQueryResponse } from '../../types'
+import { Pager } from '../../types/generated'
+
+type PagerObject = {
+    pager: Pager
+}
+
+type PagedResponse<TData> = PagerObject & { [key: string]: TData[] }
+
+type InfiniteQueryResult<TData> = WrapQueryResponse<PagedResponse<TData>>
+
+type QueryOptions = Parameters<typeof useDataQuery>[1]
+type InfiniteQueryOptions = QueryOptions & {
+    dataResultKey?: string
+}
+export const useInfiniteDataQuery = <TData>(
+    query: ResultQuery,
+    options?: InfiniteQueryOptions
+) => {
+    const [allResult, setAllResult] = useState<TData[]>([])
+
+    let queryOptions: QueryOptions = undefined
+    let dataKey = query.result.resource
+    if (options) {
+        const { dataResultKey, ...opts } = options
+        dataKey = dataResultKey || query.result.resource
+        queryOptions = opts
+    }
+
+    const queryResult = useDataQuery<InfiniteQueryResult<TData>>(
+        query,
+        queryOptions
+    )
+    const { refetch, data } = queryResult
+
+    const pager = data?.result.pager
+    const page = pager?.page || 0
+    const pageCount = pager?.pageCount || 0
+
+    useEffect(() => {
+        const result = data?.result[dataKey]
+        if (result) {
+            setAllResult((prev) => {
+                const pager = data.result.pager
+                if (pager.page === 1) {
+                    return data.result[dataKey]
+                }
+                return [...prev, ...data.result[dataKey]]
+            })
+        }
+    }, [data, dataKey, setAllResult])
+
+    const incrementPage = useCallback(() => {
+        refetch({ page: page + 1 })
+    }, [refetch, page])
+
+    const newData = useMemo(() => {
+        return {
+            result: {
+                ...data?.result,
+                [dataKey]: allResult,
+            },
+        }
+    }, [allResult, data, dataKey])
+    return {
+        ...queryResult,
+        data: newData,
+        incrementPage,
+        hasNextPage: page < pageCount,
+    }
+}
diff --git a/src/types/query.ts b/src/types/query.ts
index 033fa358..533dcf2e 100644
--- a/src/types/query.ts
+++ b/src/types/query.ts
@@ -4,8 +4,14 @@ export type QueryResponse = ReturnType<typeof useDataQuery>
 
 export type Query = Parameters<typeof useDataQuery>[0]
 
+export type ResourceQuery = Query[keyof Query]
+
 export type QueryRefetchFunction = QueryResponse['refetch']
 
 export type WrapQueryResponse<T, S extends string = 'result'> = {
     [K in S]: T
 }
+
+export type ResultQuery = {
+    result: ResourceQuery
+}

From 5d67e272ef32df4c1b8630fc8aa7ac73cac1c001 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Mon, 29 Jan 2024 05:45:54 +0100
Subject: [PATCH 05/22] feat(list): add filters to manage view

---
 i18n/en.pot                                   |  23 +-
 .../sectionList/SectionListHeaderNormal.tsx   |   2 +-
 .../sectionList/listView/ManageListView.tsx   | 213 +++++++++++-------
 .../listView/ManageListViewDialog.tsx         |  10 +-
 .../sectionList/listView/useModelListView.tsx |   5 +-
 src/lib/dataStore/useDataStore.ts             |   2 +
 .../filters/useSectionListFilters.ts          |   2 +-
 .../listViews/sectionListViewsConfig.ts       |  15 +-
 8 files changed, 174 insertions(+), 98 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index cb61d6e6..29afec39 100644
--- a/i18n/en.pot
+++ b/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: 2023-11-22T13:05:25.319Z\n"
-"PO-Revision-Date: 2023-11-22T13:05:25.319Z\n"
+"POT-Creation-Date: 2024-01-28T22:30:49.498Z\n"
+"PO-Revision-Date: 2024-01-28T22:30:49.498Z\n"
 
 msgid "schemas"
 msgstr "schemas"
@@ -153,14 +153,17 @@ msgstr "Details"
 msgid "Failed to load details"
 msgstr "Failed to load details"
 
+msgid "Clear all filters"
+msgstr "Clear all filters"
+
 msgid "Type to filter options"
 msgstr "Type to filter options"
 
 msgid "No matches"
 msgstr "No matches"
 
-msgid "Clear all filters"
-msgstr "Clear all filters"
+msgid "Data set"
+msgstr "Data set"
 
 msgid "Search by name, code or ID"
 msgstr "Search by name, code or ID"
@@ -198,12 +201,18 @@ msgstr "Public cannot access"
 msgid "Public access"
 msgstr "Public access"
 
+msgid "Hello available public"
+msgstr "Hello available public"
+
 msgid "Domain"
 msgstr "Domain"
 
 msgid "Value type"
 msgstr "Value type"
 
+msgid "Hello public"
+msgstr "Hello public"
+
 msgid "Category"
 msgstr "Category"
 
@@ -258,9 +267,6 @@ msgstr "Data element group set"
 msgid "Data element group sets"
 msgstr "Data element group sets"
 
-msgid "Data set"
-msgstr "Data set"
-
 msgid "Data sets"
 msgstr "Data sets"
 
@@ -612,9 +618,6 @@ msgstr "Name"
 msgid "Sharing"
 msgstr "Sharing"
 
-msgid "Value type"
-msgstr "Value type"
-
 msgid "Owner"
 msgstr "Owner"
 
diff --git a/src/components/sectionList/SectionListHeaderNormal.tsx b/src/components/sectionList/SectionListHeaderNormal.tsx
index 3e76e34b..1724d730 100644
--- a/src/components/sectionList/SectionListHeaderNormal.tsx
+++ b/src/components/sectionList/SectionListHeaderNormal.tsx
@@ -20,7 +20,7 @@ export const SectionListHeader = () => {
             </Link>
             <Button small>{i18n.t('Download')}</Button>
             <Button small onClick={() => setManageColumnsOpen((prev) => !prev)}>
-                {i18n.t('Manage Columns')}
+                {i18n.t('Manage View')}
             </Button>
             {manageColumnsOpen && (
                 <ManageListViewDialog onClose={handleClose} />
diff --git a/src/components/sectionList/listView/ManageListView.tsx b/src/components/sectionList/listView/ManageListView.tsx
index 70ced1f6..02962361 100644
--- a/src/components/sectionList/listView/ManageListView.tsx
+++ b/src/components/sectionList/listView/ManageListView.tsx
@@ -1,18 +1,21 @@
 import { FetchError } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { Button, Field, NoticeBox, Transfer } from '@dhis2/ui'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Button, Field, NoticeBox, Transfer, TransferOption } from '@dhis2/ui'
+import React, { useMemo } from 'react'
+import { Form, useField } from 'react-final-form'
 import {
     getColumnsForSection,
+    getFiltersForSection,
     useModelSectionHandleOrThrow,
 } from '../../../lib'
+import { LoadingSpinner } from '../../loading/LoadingSpinner'
 import css from './ManageListView.module.css'
 import { useModelListView, useMutateModelListViews } from './useModelListView'
 
 interface RenderProps {
-    handleSave: () => void
-    isSaving: boolean
+    submitting: boolean
 }
+
 type ManageColumnsDialogProps = {
     onSaved: () => void
     children: (props: RenderProps) => React.ReactNode
@@ -20,93 +23,155 @@ type ManageColumnsDialogProps = {
 
 const toPath = (propertyDescriptor: { path: string }) => propertyDescriptor.path
 
+type FormValues = {
+    columns: string[]
+    filters: string[]
+}
+const validate = (values: FormValues) => {
+    const errors: Record<string, string> = {}
+    console.log({ values })
+    if (values.columns.length < 1) {
+        errors.columns = i18n.t('At least one column must be selected')
+    }
+    if (values.filters.length < 1) {
+        errors.filters = i18n.t('At least one filter must be selected')
+    }
+    return errors
+}
 export const ManageListView = ({
     onSaved,
     children,
 }: ManageColumnsDialogProps) => {
+    const {
+        columns: savedColumns,
+        filters: savedFilters,
+        query,
+    } = useModelListView()
     const section = useModelSectionHandleOrThrow()
-    // ignore updates to saved-columns while selecting
-    const isTouched = useRef(false)
-
-    const { columns: savedColumns, query } = useModelListView()
-    const [pendingSelectedColumns, setPendingSelectedColumns] = useState<
-        string[]
-    >(() => savedColumns.map(toPath))
-    const [error, setError] = useState<string | undefined>()
-    const [saveError, setSaveError] = useState<FetchError | undefined>()
-
-    const { saveColumns, mutation } = useMutateModelListViews()
+    const { saveView } = useMutateModelListViews()
 
     const columnsConfig = getColumnsForSection(section.name)
+    const filtersConfig = getFiltersForSection(section.name)
 
-    useEffect(() => {
-        // if savedColumns were to update while selecting (it shouldn't )
-        // make sure to not overwrite the selected columns
-        if (isTouched.current) {
-            return
-        }
-        setPendingSelectedColumns(savedColumns.map(toPath))
-    }, [savedColumns])
-
-    const handleSave = () => {
-        if (pendingSelectedColumns.length < 1) {
-            setError(i18n.t('At least one column must be selected'))
-            return
-        }
-        saveColumns(pendingSelectedColumns, {
-            onSuccess: () => onSaved(),
-            onError: (error) => {
-                if (error instanceof FetchError) {
-                    setSaveError(error)
-                }
-            },
+    const handleSave = (values: FormValues) => {
+        return new Promise((resolve, reject) => {
+            const view = {
+                name: 'default',
+                columns: values.columns,
+                filters: values.filters,
+            }
+            saveView(view, {
+                onSuccess: () => resolve(onSaved()),
+                onError: (error) => {
+                    if (error instanceof FetchError) {
+                        reject(error)
+                    }
+                },
+            })
         })
     }
 
-    const handleChange = ({ selected }: { selected: string[] }) => {
-        isTouched.current = true
+    const initialValues = useMemo(() => {
+        return {
+            columns:
+                savedColumns.length > 0
+                    ? savedColumns.map(toPath)
+                    : columnsConfig.default.map(toPath),
+            filters:
+                savedFilters.length > 0
+                    ? savedFilters.map((f) => f.filterKey)
+                    : filtersConfig.default.map((f) => f.filterKey),
+        }
+    }, [savedColumns, savedFilters, columnsConfig, filtersConfig])
 
-        setPendingSelectedColumns(selected)
-        setError(undefined)
-        setSaveError(undefined)
+    if (query.isLoading) {
+        return <LoadingSpinner />
     }
 
-    const handleSetDefault = () => {
-        handleChange({ selected: columnsConfig.default.map(toPath) })
-    }
-
-    const transferOptions = useMemo(
-        () =>
-            columnsConfig.available
-                .map((column) => ({
-                    label: column.label,
-                    value: column.path,
-                }))
-                .sort((a, b) => a.label.localeCompare(b.label)),
-        [columnsConfig.available]
+    return (
+        <>
+            <Form
+                validateOnBlur
+                onSubmit={handleSave}
+                initialValues={initialValues}
+                validate={validate}
+            >
+                {({ handleSubmit, submitting, submitError }) => (
+                    <form onSubmit={handleSubmit}>
+                        <TransferField
+                            name={'columns'}
+                            defaultOptions={columnsConfig.default.map(
+                                (c) => c.path
+                            )}
+                            availableOptions={columnsConfig.available.map(
+                                (c) => ({ label: c.label, value: c.path })
+                            )}
+                        />
+                        <TransferField
+                            name={'filters'}
+                            defaultOptions={filtersConfig.default.map(
+                                (c) => c.filterKey
+                            )}
+                            availableOptions={filtersConfig.available.map(
+                                (c) => ({ label: c.label, value: c.filterKey })
+                            )}
+                        />
+                        {submitError && (
+                            <p>
+                                <NoticeBox
+                                    error
+                                    title={i18n.t('Failed to save')}
+                                >
+                                    {submitError.message}
+                                </NoticeBox>
+                            </p>
+                        )}
+                        {children({
+                            submitting,
+                        })}
+                    </form>
+                )}
+            </Form>
+        </>
     )
+}
 
+type TransferField = {
+    name: string
+    defaultOptions: string[]
+    availableOptions: TransferOption[]
+}
+const TransferField = ({
+    name,
+    defaultOptions,
+    availableOptions,
+}: TransferField) => {
+    const { input, meta } = useField(name, {
+        multiple: true,
+    })
+
+    const handleSetDefault = () => {
+        input.onChange(defaultOptions)
+    }
     return (
-        <>
-            <Field error={!!error} validationText={error} name={'columns'}>
+        <div>
+            <Field
+                error={!!meta.error}
+                validationText={meta.error}
+                name={'columns'}
+            >
                 <Transfer
                     height={'320px'}
                     enableOrderChange
                     leftHeader={
-                        <TransferHeader>
-                            {i18n.t('Available table columns')}
-                        </TransferHeader>
+                        <TransferHeader>{i18n.t('Available')}</TransferHeader>
                     }
                     rightHeader={
-                        <TransferHeader>
-                            {i18n.t('Selected table columns')}
-                        </TransferHeader>
+                        <TransferHeader>{i18n.t('Selected')}</TransferHeader>
                     }
-                    onChange={handleChange}
-                    loading={query.isLoading}
-                    loadingPicked={query.isLoading}
-                    options={transferOptions}
-                    selected={pendingSelectedColumns}
+                    selected={input.value}
+                    onChange={({ selected }) => input.onChange(selected)}
+                    options={availableOptions}
                 />
             </Field>
             <Button
@@ -114,19 +179,11 @@ export const ManageListView = ({
                 small
                 secondary
                 onClick={handleSetDefault}
-                disabled={mutation.isLoading}
+                disabled={meta.submitting}
             >
-                {i18n.t('Reset to default columns')}
+                {i18n.t('Reset to default')}
             </Button>
-            {saveError && (
-                <p>
-                    <NoticeBox error title={i18n.t('Failed to save')}>
-                        {saveError.message}
-                    </NoticeBox>
-                </p>
-            )}
-            {children({ handleSave, isSaving: mutation.isLoading })}
-        </>
+        </div>
     )
 }
 
diff --git a/src/components/sectionList/listView/ManageListViewDialog.tsx b/src/components/sectionList/listView/ManageListViewDialog.tsx
index 550e8020..8a1ab4bc 100644
--- a/src/components/sectionList/listView/ManageListViewDialog.tsx
+++ b/src/components/sectionList/listView/ManageListViewDialog.tsx
@@ -22,24 +22,24 @@ export const ManageListViewDialog = ({
     return (
         <Modal onClose={onClose} position="top">
             <ModalTitle>
-                {i18n.t('Manage {{section}} table columns', {
+                {i18n.t('Manage {{section}} view', {
                     section: section.title,
                 })}
             </ModalTitle>
             <ModalContent>
                 <ManageListView onSaved={onClose}>
-                    {({ handleSave, isSaving }) => (
+                    {({ submitting }) => (
                         <ModalActions>
                             <ButtonStrip>
                                 <Button onClick={onClose} secondary>
                                     {i18n.t('Cancel')}
                                 </Button>
                                 <Button
-                                    onClick={handleSave}
+                                    type="submit"
                                     primary
-                                    loading={isSaving}
+                                    loading={submitting}
                                 >
-                                    {i18n.t('Update table columns')}
+                                    {i18n.t('Update view')}
                                 </Button>
                             </ButtonStrip>
                         </ModalActions>
diff --git a/src/components/sectionList/listView/useModelListView.tsx b/src/components/sectionList/listView/useModelListView.tsx
index 6696da73..a6744d24 100644
--- a/src/components/sectionList/listView/useModelListView.tsx
+++ b/src/components/sectionList/listView/useModelListView.tsx
@@ -138,7 +138,7 @@ export const useModelListView = () => {
         console.error(query.error)
     }
 
-    const selectedView = getDefaultViewForSection(section.name)
+    const selectedView = query.data || getDefaultViewForSection(section.name)
 
     const columns = selectedView.columns
     const filters = selectedView.filters
@@ -221,5 +221,6 @@ export const useMutateModelListViews = () => {
         [saveView]
     )
 
-    return { mutation, saveColumns }
+    console.log({ saveColumns, saveView })
+    return { mutation, saveColumns, saveView }
 }
diff --git a/src/lib/dataStore/useDataStore.ts b/src/lib/dataStore/useDataStore.ts
index 9bf253f3..7cd4648b 100644
--- a/src/lib/dataStore/useDataStore.ts
+++ b/src/lib/dataStore/useDataStore.ts
@@ -102,6 +102,7 @@ export function useDataStoreValuesQuery<
         queryKey: [query],
         queryFn: createBoundQueryFn(engine),
         placeholderData,
+        // keepPreviousData: true,
         // hide ".result" from consumer
         select: (data) => select(data.result) as SelectResult,
     })
@@ -123,6 +124,7 @@ export const useMutateDataStoreValuesQuery = (options: ValuesOptions) => {
             global: mergedOptions.global,
             data,
         })
+        //  queryClient.setQueryData(valuesQueryKey, data)
         return await engine.mutate(mutation)
     }
     const mutation = useMutation({
diff --git a/src/lib/sectionList/filters/useSectionListFilters.ts b/src/lib/sectionList/filters/useSectionListFilters.ts
index e029f6d1..087888b8 100644
--- a/src/lib/sectionList/filters/useSectionListFilters.ts
+++ b/src/lib/sectionList/filters/useSectionListFilters.ts
@@ -14,7 +14,7 @@ import {
 export const useSectionListFilters = () => {
     const [filters, setFilterParams] = useQueryParams(filterQueryParamType)
     const [, setPagingParams] = usePaginationQueryParams()
-    console.log({ filters })
+
     const parsedFilters = useMemo(() => {
         const parsed = filterParamsSchema.safeParse(filters)
         if (parsed.success) {
diff --git a/src/lib/sectionList/listViews/sectionListViewsConfig.ts b/src/lib/sectionList/listViews/sectionListViewsConfig.ts
index f98eadd8..97269851 100644
--- a/src/lib/sectionList/listViews/sectionListViewsConfig.ts
+++ b/src/lib/sectionList/listViews/sectionListViewsConfig.ts
@@ -39,6 +39,14 @@ const DESCRIPTORS = {
     publicAccess: { path: 'sharing.public', label: i18n.t('Public access') },
 } satisfies Record<string, ModelPropertyDescriptor>
 
+const FILTERS = {
+    categoryCombo: {
+        filterKey: 'categoryCombo',
+        label: i18n.t('Category combo'),
+    },
+    dataSet: { filterKey: 'dataSet', label: i18n.t('Data set') },
+} satisfies Record<string, FilterDescriptor>
+
 // This is the default views, and can be overriden per section in modelListViewsConfig below
 export const defaultModelViewConfig = {
     columns: {
@@ -84,7 +92,12 @@ export const modelListViewsConfig = {
             ],
         },
         filters: {
-            default: ['domainType', 'valueType', 'dataSet', 'categoryCombo'],
+            default: [
+                'domainType',
+                'valueType',
+                FILTERS.dataSet,
+                'categoryCombo',
+            ],
             available: ['categoryCombo'],
         },
     },

From 52b352155b644b3e27ae1a253a525b5414d154ec Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Mon, 29 Jan 2024 15:31:13 +0100
Subject: [PATCH 06/22] fix: some cleanup

---
 src/components/sectionList/listView/ManageListView.tsx   | 3 +--
 src/components/sectionList/listView/useModelListView.tsx | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/sectionList/listView/ManageListView.tsx b/src/components/sectionList/listView/ManageListView.tsx
index 02962361..4c5b9ec1 100644
--- a/src/components/sectionList/listView/ManageListView.tsx
+++ b/src/components/sectionList/listView/ManageListView.tsx
@@ -29,7 +29,7 @@ type FormValues = {
 }
 const validate = (values: FormValues) => {
     const errors: Record<string, string> = {}
-    console.log({ values })
+
     if (values.columns.length < 1) {
         errors.columns = i18n.t('At least one column must be selected')
     }
@@ -91,7 +91,6 @@ export const ManageListView = ({
     return (
         <>
             <Form
-                validateOnBlur
                 onSubmit={handleSave}
                 initialValues={initialValues}
                 validate={validate}
diff --git a/src/components/sectionList/listView/useModelListView.tsx b/src/components/sectionList/listView/useModelListView.tsx
index a6744d24..141357d8 100644
--- a/src/components/sectionList/listView/useModelListView.tsx
+++ b/src/components/sectionList/listView/useModelListView.tsx
@@ -221,6 +221,5 @@ export const useMutateModelListViews = () => {
         [saveView]
     )
 
-    console.log({ saveColumns, saveView })
     return { mutation, saveColumns, saveView }
 }

From 1206241fc93ea210b2db976d6d98aa04dc7e600e Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Mon, 29 Jan 2024 17:04:46 +0100
Subject: [PATCH 07/22] fix: fix sorting of filters

---
 .../sectionList/listView/ManageListView.tsx   | 38 ++++++++++---------
 .../sectionList/listView/useModelListView.tsx | 27 ++++++-------
 src/lib/dataStore/useDataStore.ts             |  1 -
 .../filters/useFilterQueryParams.ts           |  2 +-
 4 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/src/components/sectionList/listView/ManageListView.tsx b/src/components/sectionList/listView/ManageListView.tsx
index 4c5b9ec1..e550d955 100644
--- a/src/components/sectionList/listView/ManageListView.tsx
+++ b/src/components/sectionList/listView/ManageListView.tsx
@@ -1,6 +1,7 @@
 import { FetchError } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { Button, Field, NoticeBox, Transfer, TransferOption } from '@dhis2/ui'
+import { FORM_ERROR } from 'final-form'
 import React, { useMemo } from 'react'
 import { Form, useField } from 'react-final-form'
 import {
@@ -8,7 +9,6 @@ import {
     getFiltersForSection,
     useModelSectionHandleOrThrow,
 } from '../../../lib'
-import { LoadingSpinner } from '../../loading/LoadingSpinner'
 import css from './ManageListView.module.css'
 import { useModelListView, useMutateModelListViews } from './useModelListView'
 
@@ -48,24 +48,28 @@ export const ManageListView = ({
         query,
     } = useModelListView()
     const section = useModelSectionHandleOrThrow()
-    const { saveView } = useMutateModelListViews()
+    const { saveView, mutation } = useMutateModelListViews()
 
     const columnsConfig = getColumnsForSection(section.name)
     const filtersConfig = getFiltersForSection(section.name)
 
-    const handleSave = (values: FormValues) => {
-        return new Promise((resolve, reject) => {
-            const view = {
-                name: 'default',
-                columns: values.columns,
-                filters: values.filters,
-            }
+    const handleSave = async (values: FormValues) => {
+        const view = {
+            name: 'default',
+            columns: values.columns,
+            filters: values.filters,
+        }
+
+        return new Promise((resolve) => {
             saveView(view, {
                 onSuccess: () => resolve(onSaved()),
                 onError: (error) => {
                     if (error instanceof FetchError) {
-                        reject(error)
+                        resolve({ [FORM_ERROR]: error.message })
                     }
+                    resolve({
+                        [FORM_ERROR]: i18n.t('An unknown error occurred'),
+                    })
                 },
             })
         })
@@ -82,11 +86,7 @@ export const ManageListView = ({
                     ? savedFilters.map((f) => f.filterKey)
                     : filtersConfig.default.map((f) => f.filterKey),
         }
-    }, [savedColumns, savedFilters, columnsConfig, filtersConfig])
-
-    if (query.isLoading) {
-        return <LoadingSpinner />
-    }
+    }, [savedFilters, savedColumns, filtersConfig, columnsConfig])
 
     return (
         <>
@@ -99,6 +99,7 @@ export const ManageListView = ({
                     <form onSubmit={handleSubmit}>
                         <TransferField
                             name={'columns'}
+                            loading={query.isLoading}
                             defaultOptions={columnsConfig.default.map(
                                 (c) => c.path
                             )}
@@ -108,6 +109,7 @@ export const ManageListView = ({
                         />
                         <TransferField
                             name={'filters'}
+                            loading={query.isLoading}
                             defaultOptions={filtersConfig.default.map(
                                 (c) => c.filterKey
                             )}
@@ -121,7 +123,7 @@ export const ManageListView = ({
                                     error
                                     title={i18n.t('Failed to save')}
                                 >
-                                    {submitError.message}
+                                    {submitError}
                                 </NoticeBox>
                             </p>
                         )}
@@ -137,18 +139,19 @@ export const ManageListView = ({
 
 type TransferField = {
     name: string
+    loading?: boolean
     defaultOptions: string[]
     availableOptions: TransferOption[]
 }
 const TransferField = ({
     name,
+    loading,
     defaultOptions,
     availableOptions,
 }: TransferField) => {
     const { input, meta } = useField(name, {
         multiple: true,
     })
-
     const handleSetDefault = () => {
         input.onChange(defaultOptions)
     }
@@ -161,6 +164,7 @@ const TransferField = ({
             >
                 <Transfer
                     height={'320px'}
+                    loading={loading}
                     enableOrderChange
                     leftHeader={
                         <TransferHeader>{i18n.t('Available')}</TransferHeader>
diff --git a/src/components/sectionList/listView/useModelListView.tsx b/src/components/sectionList/listView/useModelListView.tsx
index 141357d8..391014fc 100644
--- a/src/components/sectionList/listView/useModelListView.tsx
+++ b/src/components/sectionList/listView/useModelListView.tsx
@@ -66,21 +66,22 @@ const parseViewToModelListView = (
 
     const parsedView = listView.data
 
-    const availableColumnsMap = new Map(
-        viewConfig.columns.available.map((c) => [c.path, c] as const)
-    )
     // map to config to make sure we don't use invalid columns
     // Preserve order by mapping from parsedView to config-object
-    const columns = parsedView.columns
-        .filter((col) => availableColumnsMap.has(col))
-        .map((col) => {
-            const columnConfig = availableColumnsMap.get(col)
-            return columnConfig as NonNullable<typeof columnConfig>
-        })
-
-    const filters = viewConfig.filters.available.filter((filterDescriptor) =>
-        parsedView.filters.includes(filterDescriptor.filterKey)
-    )
+    const columns = parsedView.columns.flatMap((path) => {
+        const columnConfig = viewConfig.columns.available.find(
+            (col) => col.path === path
+        )
+        return columnConfig ? [columnConfig] : []
+    })
+
+    const filters = parsedView.filters.flatMap((filterKey) => {
+        const filterConfig = viewConfig.filters.available.find(
+            (filter) => filter.filterKey === filterKey
+        )
+
+        return filterConfig ? [filterConfig] : []
+    })
 
     return {
         ...parsedView,
diff --git a/src/lib/dataStore/useDataStore.ts b/src/lib/dataStore/useDataStore.ts
index 7cd4648b..f2431ccc 100644
--- a/src/lib/dataStore/useDataStore.ts
+++ b/src/lib/dataStore/useDataStore.ts
@@ -124,7 +124,6 @@ export const useMutateDataStoreValuesQuery = (options: ValuesOptions) => {
             global: mergedOptions.global,
             data,
         })
-        //  queryClient.setQueryData(valuesQueryKey, data)
         return await engine.mutate(mutation)
     }
     const mutation = useMutation({
diff --git a/src/lib/sectionList/filters/useFilterQueryParams.ts b/src/lib/sectionList/filters/useFilterQueryParams.ts
index bbf15a32..54e6f105 100644
--- a/src/lib/sectionList/filters/useFilterQueryParams.ts
+++ b/src/lib/sectionList/filters/useFilterQueryParams.ts
@@ -6,7 +6,7 @@ import { useSectionListFilters } from './useSectionListFilters'
 export const useFilterQueryParams = (): string[] => {
     const [filters] = useSectionListFilters()
     const section = useSectionHandle()
-    console.log({ section })
+
     return useMemo(() => {
         return parseFiltersToQueryParams(filters, section)
     }, [filters, section])

From eb4ce5431f11563bbc276823dcf49fa56f9ddf68 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Mon, 29 Jan 2024 18:06:03 +0100
Subject: [PATCH 08/22] fix: simplify initial selected logic

---
 .../filters/filterSelectors/ModelFilter.tsx   | 90 +++++++++----------
 .../sectionList/listView/ManageListView.tsx   |  2 +-
 2 files changed, 43 insertions(+), 49 deletions(-)

diff --git a/src/components/sectionList/filters/filterSelectors/ModelFilter.tsx b/src/components/sectionList/filters/filterSelectors/ModelFilter.tsx
index c2f14d0a..3dd0236d 100644
--- a/src/components/sectionList/filters/filterSelectors/ModelFilter.tsx
+++ b/src/components/sectionList/filters/filterSelectors/ModelFilter.tsx
@@ -1,31 +1,37 @@
 import { useDataQuery } from '@dhis2/app-runtime'
 import React, { useCallback, useRef, useState } from 'react'
 import { useInfiniteDataQuery } from '../../../../lib/query'
-import type { ResultQuery } from '../../../../types'
+import type { ResultQuery, WrapQueryResponse } from '../../../../types'
 import { Option, SearchableSingleSelect } from '../../../SearchableSingleSelect'
 
+type OptionResult = {
+    id: string
+    displayName: string
+}
+
 function computeDisplayOptions({
-    selected,
-    selectedOption,
+    initialSelectedOption,
+    initialSelected,
     options,
 }: {
     options: OptionResult[]
-    selected?: string
-    required?: boolean
-    selectedOption?: OptionResult
+    initialSelected?: string
+    initialSelectedOption?: OptionResult
 }): Option[] {
     // This happens only when we haven't fetched the label for an initially
     // selected value. Don't show anything to prevent error that an option is
     // missing
-    if (!selectedOption && selected) {
+    if (!initialSelectedOption && initialSelected) {
         return []
     }
 
-    const optionsContainSelected = options?.find(({ id }) => id === selected)
+    const optionsContainSelected = options?.find(
+        ({ id }) => id === initialSelected
+    )
 
     const withSelectedOption =
-        selectedOption && !optionsContainSelected
-            ? [...options, selectedOption]
+        initialSelectedOption && !optionsContainSelected
+            ? [...options, initialSelectedOption]
             : options
 
     return withSelectedOption.map((option) => ({
@@ -34,22 +40,13 @@ function computeDisplayOptions({
     }))
 }
 
-type OptionResult = {
-    id: string
-    displayName: string
-}
-
-const createInitialOptionQuery = (
-    resource: string,
-    selected?: string
-): ResultQuery => ({
+const createInitialOptionQuery = (resource: string): ResultQuery => ({
     result: {
         resource: resource,
-        id: selected,
-        params: (params) => ({
-            ...params,
+        id: (variables: Record<string, string>) => variables.id,
+        params: {
             fields: ['id', 'displayName'],
-        }),
+        },
     },
 })
 
@@ -70,26 +67,30 @@ export const ModelFilterSelect = ({
     // We're using this value only when imperatively calling `refetch`,
     // nothing that depends on the render-cycle depends on this value
     const filterRef = useRef<string | undefined>()
-
-    const [initialQuery] = useState(() =>
-        createInitialOptionQuery(query.result.resource, selected)
-    )
-
-    const initialOptionResult = useDataQuery<OptionResult>(initialQuery, {
-        // run only when we have an initial selected value
-        lazy: initialQuery.result.id === undefined,
-        onComplete: (data) => {
-            setSelectedOption(data)
-        },
-    })
-
+    const initialSelected = useRef(selected)
     // We need to persist the selected option so we can display an <Option />
     // when the current list doesn't contain the selected option (e.g. when
     // the page with the selected option hasn't been reached yet or when
     // filtering)
-    const [selectedOption, setSelectedOption] = useState<OptionResult>()
+    const [initialSelectedOption, setInitialSelectedOption] =
+        useState<OptionResult>()
+    const [initialQuery] = useState(() =>
+        createInitialOptionQuery(query.result.resource)
+    )
+
+    const initialOptionResult = useDataQuery<WrapQueryResponse<OptionResult>>(
+        initialQuery,
+        {
+            // run only when we have an initial selected value
+            lazy: initialSelected.current === undefined,
+            variables: { id: selected },
+            onComplete: (data) => {
+                setInitialSelectedOption(data.result)
+            },
+        }
+    )
+
     const optionsQueryResult = useInfiniteDataQuery<OptionResult>(query)
-    // const optionsQueryResult = useDataQuery<PagedResult>(query)
     const { refetch, data, incrementPage } = optionsQueryResult
 
     const pager = data?.result.pager
@@ -120,8 +121,8 @@ export const ModelFilterSelect = ({
     const options = data?.result[dataResultKey] || []
 
     const displayOptions = computeDisplayOptions({
-        selected,
-        selectedOption,
+        initialSelectedOption,
+        initialSelected: initialSelected.current,
         options,
     })
 
@@ -133,14 +134,7 @@ export const ModelFilterSelect = ({
                 prefix={placeholder}
                 showAllOption={true}
                 onChange={({ selected }) => {
-                    if (selected === selectedOption?.id) {
-                        setSelectedOption(undefined)
-                    } else {
-                        const option = options.find(({ id }) => id === selected)
-                        setSelectedOption(option)
-                    }
-
-                    onChange({ selected: selected })
+                    onChange({ selected })
                 }}
                 onEndReached={incrementPage}
                 options={displayOptions}
diff --git a/src/components/sectionList/listView/ManageListView.tsx b/src/components/sectionList/listView/ManageListView.tsx
index e550d955..6a65a4a5 100644
--- a/src/components/sectionList/listView/ManageListView.tsx
+++ b/src/components/sectionList/listView/ManageListView.tsx
@@ -48,7 +48,7 @@ export const ManageListView = ({
         query,
     } = useModelListView()
     const section = useModelSectionHandleOrThrow()
-    const { saveView, mutation } = useMutateModelListViews()
+    const { saveView } = useMutateModelListViews()
 
     const columnsConfig = getColumnsForSection(section.name)
     const filtersConfig = getFiltersForSection(section.name)

From a7e5d2fcda2e376ef2e834381f793acbe03e0845 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Mon, 29 Jan 2024 19:57:04 +0100
Subject: [PATCH 09/22] feat: add publicAccessFilter

---
 .../sectionList/filters/DynamicFilters.tsx    |  2 ++
 .../ConstantSelectionFilter.tsx               |  7 ++++++-
 .../filterSelectors/PublicAccessFilter.tsx    | 19 +++++++++++++++++++
 src/lib/sectionList/filters/filterConfig.tsx  |  6 +++++-
 .../filters/parseFiltersToQueryParams.ts      | 10 ++++++++--
 .../listViews/sectionListViewsConfig.ts       |  6 +++++-
 6 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 src/components/sectionList/filters/filterSelectors/PublicAccessFilter.tsx

diff --git a/src/components/sectionList/filters/DynamicFilters.tsx b/src/components/sectionList/filters/DynamicFilters.tsx
index 20c7e0cd..1895cf7b 100644
--- a/src/components/sectionList/filters/DynamicFilters.tsx
+++ b/src/components/sectionList/filters/DynamicFilters.tsx
@@ -7,6 +7,7 @@ import {
     DomainTypeSelectionFilter,
     ValueTypeSelectionFilter,
 } from './filterSelectors'
+import { PublicAccessFilter } from './filterSelectors/PublicAccessFilter'
 import { useFilterKeys } from './useFilterKeys'
 
 type FilterKeyToComponentMap = Partial<Record<ConfigurableFilterKey, React.FC>>
@@ -17,6 +18,7 @@ const filterKeyToComponentMap: FilterKeyToComponentMap = {
     domainType: DomainTypeSelectionFilter,
     valueType: ValueTypeSelectionFilter,
     aggregationType: AggregationTypeFilter,
+    publicAccess: PublicAccessFilter,
 }
 
 export const DynamicFilters = () => {
diff --git a/src/components/sectionList/filters/filterSelectors/ConstantSelectionFilter.tsx b/src/components/sectionList/filters/filterSelectors/ConstantSelectionFilter.tsx
index 2c29b768..64647e71 100644
--- a/src/components/sectionList/filters/filterSelectors/ConstantSelectionFilter.tsx
+++ b/src/components/sectionList/filters/filterSelectors/ConstantSelectionFilter.tsx
@@ -19,13 +19,18 @@ export const ConstantSelectionFilter = ({
     filterable,
 }: ConstantSelectionFilterProps) => {
     const [filter, setFilter] = useSectionListFilter(filterKey)
+
+    const selected = Array.isArray(filter) ? filter[0] : filter
+    const isInOptions =
+        selected && constants[selected as keyof typeof constants]
+
     return (
         <SingleSelect
             className={css.constantSelectionFilter}
             onChange={({ selected }: SelectOnChangeObject) => {
                 setFilter(selected ? [selected] : undefined)
             }}
-            selected={Array.isArray(filter) ? filter[0] : filter}
+            selected={isInOptions ? selected : undefined}
             placeholder={label}
             dense
             prefix={label}
diff --git a/src/components/sectionList/filters/filterSelectors/PublicAccessFilter.tsx b/src/components/sectionList/filters/filterSelectors/PublicAccessFilter.tsx
new file mode 100644
index 00000000..e5e0df45
--- /dev/null
+++ b/src/components/sectionList/filters/filterSelectors/PublicAccessFilter.tsx
@@ -0,0 +1,19 @@
+import i18n from '@dhis2/d2-i18n'
+import React from 'react'
+import { ConstantSelectionFilter } from './ConstantSelectionFilter'
+
+const constants = {
+    'rw------': 'Public can edit',
+    'r-------': 'Public can view',
+    '--------': 'Public cannot access',
+}
+
+export const PublicAccessFilter = () => {
+    return (
+        <ConstantSelectionFilter
+            label={i18n.t('Public access')}
+            filterKey="publicAccess"
+            constants={constants}
+        />
+    )
+}
diff --git a/src/lib/sectionList/filters/filterConfig.tsx b/src/lib/sectionList/filters/filterConfig.tsx
index 158ccadb..cd05e885 100644
--- a/src/lib/sectionList/filters/filterConfig.tsx
+++ b/src/lib/sectionList/filters/filterConfig.tsx
@@ -2,7 +2,7 @@ import { StringParam } from 'use-query-params'
 import { z } from 'zod'
 import { DataElement } from '../../../types/generated'
 import { IDENTIFIABLE_KEY } from '../../constants'
-import { isValidUid } from '../../models'
+import { isValidUid, parsePublicAccessString } from '../../models'
 import { CustomDelimitedArrayParam } from './customParams'
 
 const zodArrayIds = z.array(z.string().refine((val) => isValidUid(val)))
@@ -15,6 +15,9 @@ export const filterParamsSchema = z
         categoryCombo: zodArrayIds,
         dataSet: zodArrayIds,
         domainType: z.array(z.nativeEnum(DataElement.domainType)),
+        publicAccess: z.array(
+            z.string().refine((val) => parsePublicAccessString(val) !== null)
+        ),
         valueType: z.array(z.nativeEnum(DataElement.valueType)),
     })
     .partial()
@@ -28,6 +31,7 @@ export const filterQueryParamType = {
     valueType: CustomDelimitedArrayParam,
     dataSet: CustomDelimitedArrayParam,
     categoryCombo: CustomDelimitedArrayParam,
+    publicAccess: CustomDelimitedArrayParam,
 } as const satisfies QueryParamsConfigMap
 
 export const validFilterKeys = Object.keys(filterQueryParamType)
diff --git a/src/lib/sectionList/filters/parseFiltersToQueryParams.ts b/src/lib/sectionList/filters/parseFiltersToQueryParams.ts
index f19f60b8..33301a67 100644
--- a/src/lib/sectionList/filters/parseFiltersToQueryParams.ts
+++ b/src/lib/sectionList/filters/parseFiltersToQueryParams.ts
@@ -10,6 +10,9 @@ const defaultFilter = (key: FilterKey, value: AllValues): string => {
     return `${key}:${operator}:${valuesString}`
 }
 
+const inFilter = (filterPath: string, value: string[]) =>
+    `${filterPath}:in:[${value.join(',')}]`
+
 const getQueryParamForFilter = (
     key: FilterKey,
     value: AllValues,
@@ -24,11 +27,14 @@ const getQueryParamForFilter = (
     if (key === 'dataSet') {
         const v = value as string[]
         if (section?.name === SECTIONS_MAP.dataElement.name) {
-            return `dataSetElements.dataSet.id:in:[${v.join(',')}]`
+            return inFilter('dataSetElements.dataSet.id', v)
         }
     }
     if (key === 'categoryCombo') {
-        return `categoryCombo.id:in:[${(value as string[]).join(',')}]`
+        return inFilter('categoryCombo.id', value as string[])
+    }
+    if (key === 'publicAccess') {
+        return inFilter('sharing.public', value as string[])
     }
     return defaultFilter(key, value)
 }
diff --git a/src/lib/sectionList/listViews/sectionListViewsConfig.ts b/src/lib/sectionList/listViews/sectionListViewsConfig.ts
index 97269851..d1111896 100644
--- a/src/lib/sectionList/listViews/sectionListViewsConfig.ts
+++ b/src/lib/sectionList/listViews/sectionListViewsConfig.ts
@@ -45,6 +45,10 @@ const FILTERS = {
         label: i18n.t('Category combo'),
     },
     dataSet: { filterKey: 'dataSet', label: i18n.t('Data set') },
+    publicAccess: {
+        filterKey: 'publicAccess',
+        label: i18n.t('Public access'),
+    },
 } satisfies Record<string, FilterDescriptor>
 
 // This is the default views, and can be overriden per section in modelListViewsConfig below
@@ -98,7 +102,7 @@ export const modelListViewsConfig = {
                 FILTERS.dataSet,
                 'categoryCombo',
             ],
-            available: ['categoryCombo'],
+            available: ['categoryCombo', FILTERS.publicAccess],
         },
     },
 } satisfies SectionListViewConfig

From 5c06c373d7391b787e23367553e7c00b367015d6 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Mon, 29 Jan 2024 20:03:34 +0100
Subject: [PATCH 10/22] refactor: cleanup

---
 .../filterSelectors/IdentifiableFilter.tsx    |   4 +-
 .../sectionList/filters/useFilterKeys.tsx     |  13 +-
 src/lib/constants/index.ts                    |   2 +-
 src/lib/constants/sectionListViewsConfig.ts   | 174 ------------------
 src/lib/sectionList/filters/filterConfig.tsx  |  11 +-
 5 files changed, 12 insertions(+), 192 deletions(-)
 delete mode 100644 src/lib/constants/sectionListViewsConfig.ts

diff --git a/src/components/sectionList/filters/filterSelectors/IdentifiableFilter.tsx b/src/components/sectionList/filters/filterSelectors/IdentifiableFilter.tsx
index 241fc7ef..75cf841a 100644
--- a/src/components/sectionList/filters/filterSelectors/IdentifiableFilter.tsx
+++ b/src/components/sectionList/filters/filterSelectors/IdentifiableFilter.tsx
@@ -3,13 +3,13 @@ import { Input, InputEventPayload } from '@dhis2/ui'
 import React, { useEffect, useState } from 'react'
 import {
     useDebounce,
-    IDENTIFIABLE_KEY,
+    IDENTIFIABLE_FILTER_KEY,
     useSectionListFilter,
 } from '../../../../lib'
 import css from './Filters.module.css'
 
 export const IdentifiableFilter = () => {
-    const [filter, setFilter] = useSectionListFilter(IDENTIFIABLE_KEY)
+    const [filter, setFilter] = useSectionListFilter(IDENTIFIABLE_FILTER_KEY)
     const [value, setValue] = useState(filter || '')
     const debouncedValue = useDebounce<typeof filter>(value, 200)
 
diff --git a/src/components/sectionList/filters/useFilterKeys.tsx b/src/components/sectionList/filters/useFilterKeys.tsx
index 05c8c9f8..e19f165b 100644
--- a/src/components/sectionList/filters/useFilterKeys.tsx
+++ b/src/components/sectionList/filters/useFilterKeys.tsx
@@ -1,20 +1,11 @@
 import { useMemo } from 'react'
 import {
     useSectionListFilters,
-    ParsedFilterParams,
     ConfigurableFilterKey,
-    IDENTIFIABLE_KEY,
+    IDENTIFIABLE_FILTER_KEY,
 } from '../../../lib'
 import { useModelListView } from '../listView'
 
-export type FiltersWithValue = {
-    [FilterKey in ConfigurableFilterKey]: {
-        value: ParsedFilterParams[FilterKey]
-        label: string
-        filterKey: FilterKey
-    }
-}
-
 export const useFilterKeys = () => {
     const [filters] = useSectionListFilters()
     const { filters: viewFilters } = useModelListView()
@@ -26,7 +17,7 @@ export const useFilterKeys = () => {
             .filter(
                 ([filterKey, value]) =>
                     value !== undefined &&
-                    filterKey !== IDENTIFIABLE_KEY &&
+                    filterKey !== IDENTIFIABLE_FILTER_KEY &&
                     !viewFilterKeys.includes(filterKey as ConfigurableFilterKey)
             )
             .map(([filterKey]) => filterKey) as ConfigurableFilterKey[]
diff --git a/src/lib/constants/index.ts b/src/lib/constants/index.ts
index 61de1c84..c700910f 100644
--- a/src/lib/constants/index.ts
+++ b/src/lib/constants/index.ts
@@ -2,4 +2,4 @@ export * from './sections'
 export * from './translatedModelConstants'
 export * from './translatedModelProperties'
 
-export const IDENTIFIABLE_KEY = 'identifiable'
+export const IDENTIFIABLE_FILTER_KEY = 'identifiable'
diff --git a/src/lib/constants/sectionListViewsConfig.ts b/src/lib/constants/sectionListViewsConfig.ts
deleted file mode 100644
index 899f1bed..00000000
--- a/src/lib/constants/sectionListViewsConfig.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-import i18n from '@dhis2/d2-i18n'
-import { uniqueBy } from '../utils'
-import type { SectionName } from './sections'
-import { getTranslatedProperty } from './translatedModelProperties'
-
-export interface ModelPropertyDescriptor {
-    label: string
-    path: string
-}
-
-type ModelPropertyConfig = string | ModelPropertyDescriptor
-interface ViewConfigPart {
-    available?: ReadonlyArray<ModelPropertyConfig>
-    overrideDefaultAvailable?: boolean
-    default?: ReadonlyArray<ModelPropertyConfig>
-}
-
-interface ViewConfig {
-    columns: ViewConfigPart
-    filters: ViewConfigPart
-}
-
-interface ResolvedViewConfigPart {
-    available: ReadonlyArray<ModelPropertyDescriptor>
-    default: ReadonlyArray<ModelPropertyDescriptor>
-}
-interface ResolvedViewConfig {
-    columns: ResolvedViewConfigPart
-    filters: ResolvedViewConfigPart
-}
-
-// generic here is just used for "satisfies" below, for code-completion of future customizations
-type SectionListViewConfig<Key extends string = string> = {
-    [key in Key]?: ViewConfig
-}
-
-const DESCRIPTORS = {
-    publicAccess: { path: 'sharing.public', label: i18n.t('Public access') },
-} satisfies Record<string, ModelPropertyDescriptor>
-
-// This is the default views, and can be overriden per section in modelListViewsConfig below
-const defaultModelViewConfig = {
-    columns: {
-        available: [
-            'name',
-            'shortName',
-            'code',
-            'created',
-            'createdBy',
-            'href',
-            'id',
-            'lastUpdatedBy',
-            DESCRIPTORS.publicAccess,
-        ],
-        default: ['name', 'sharing.public', 'lastUpdated'],
-    },
-    filters: {
-        available: ['name'],
-        default: ['name'],
-    },
-} satisfies ViewConfig
-
-// this is the default views (eg. which columns and filters) to show in the List-page for each section
-// Note: by default, the available columns are merged with columnsDefault.available above.
-// If it's needed to override this for a section, set overrideDefaultAvailable to true
-// and list all available columns in the available array below.
-// Default-list will NOT be merged with columnsDefault.default - list all explicitly.
-// elements in the default array implies they are also available, no need to list them in both.
-
-const modelListViewsConfig = {
-    dataElement: {
-        columns: {
-            available: [
-                'zeroIsSignificant',
-                'categoryCombo',
-                // {
-                //     label: i18n.t('Hello available public'),
-                //     path: 'sharing.public',
-                // },
-            ],
-            default: [
-                'name',
-                { label: i18n.t('Domain'), path: 'domainType' },
-                { label: i18n.t('Value type'), path: 'valueType' },
-                'lastUpdated',
-                // 'sharing.public',
-                { label: i18n.t('Hello public'), path: 'sharing.public' },
-            ],
-        },
-        filters: {
-            default: ['name', 'domainType', 'valueType'],
-            available: ['zeroIsSignificant', 'categoryCombo'],
-        },
-    },
-} satisfies SectionListViewConfig<SectionName>
-
-const toModelPropertyDescriptor = (
-    propertyConfig: ModelPropertyConfig,
-    available?: ModelPropertyDescriptor[]
-): ModelPropertyDescriptor => {
-    if (typeof propertyConfig === 'string') {
-        // simple descriptors can refer to previously defined descriptors
-        const availableDescriptor = available?.find(
-            (prop) => prop.path === propertyConfig
-        )
-
-        return (
-            availableDescriptor || {
-                label: getTranslatedProperty(propertyConfig),
-                path: propertyConfig,
-            }
-        )
-    }
-    return propertyConfig
-}
-
-const resolveViewPart = (part: ViewConfigPart, type: keyof ViewConfig) => {
-    const mergedAvailableDescriptors = uniqueBy(
-        [
-            part.available || [],
-            part.overrideDefaultAvailable
-                ? []
-                : defaultModelViewConfig[type].available,
-            part.default || [],
-        ]
-            .flat()
-            .map((propConfig) => toModelPropertyDescriptor(propConfig)),
-        (prop) => prop.path
-    )
-    const defaultPropConfig =
-        part.default || defaultModelViewConfig[type].default
-    const defaultDescriptors = defaultPropConfig.map((propConfig) =>
-        toModelPropertyDescriptor(propConfig, mergedAvailableDescriptors)
-    )
-    return {
-        available: mergedAvailableDescriptors,
-        default: defaultDescriptors,
-    }
-}
-// merge the default modelViewConfig with the modelViewsConfig for each section
-const resolveListViewsConfig = (): SectionListViewConfig => {
-    const merged: SectionListViewConfig = {}
-
-    Object.entries(modelListViewsConfig).forEach((viewConfig) => {
-        const [sectionName, sectionViewConfig] = viewConfig
-        merged[sectionName as SectionName] = {
-            columns: resolveViewPart(sectionViewConfig.columns, 'columns'),
-            filters: resolveViewPart(sectionViewConfig.filters, 'filters'),
-        }
-    })
-    return merged
-}
-
-const mergedModelViewsConfig = resolveListViewsConfig()
-const resolvedDefaultConfig = {
-    columns: resolveViewPart(defaultModelViewConfig.columns, 'columns'),
-    filters: resolveViewPart(defaultModelViewConfig.filters, 'filters'),
-}
-
-export const getViewConfigForSection = (
-    sectionName: string
-): ResolvedViewConfig => {
-    if (mergedModelViewsConfig[sectionName]) {
-        return mergedModelViewsConfig[sectionName] as ResolvedViewConfig
-    }
-    return resolvedDefaultConfig
-}
-
-export const getColumnsForSection = (
-    sectionName: string
-): ResolvedViewConfig['columns'] => {
-    const view = getViewConfigForSection(sectionName)
-    return view.columns
-}
diff --git a/src/lib/sectionList/filters/filterConfig.tsx b/src/lib/sectionList/filters/filterConfig.tsx
index cd05e885..54cc65e6 100644
--- a/src/lib/sectionList/filters/filterConfig.tsx
+++ b/src/lib/sectionList/filters/filterConfig.tsx
@@ -1,7 +1,7 @@
 import { StringParam } from 'use-query-params'
 import { z } from 'zod'
 import { DataElement } from '../../../types/generated'
-import { IDENTIFIABLE_KEY } from '../../constants'
+import { IDENTIFIABLE_FILTER_KEY } from '../../constants'
 import { isValidUid, parsePublicAccessString } from '../../models'
 import { CustomDelimitedArrayParam } from './customParams'
 
@@ -10,7 +10,7 @@ const zodArrayIds = z.array(z.string().refine((val) => isValidUid(val)))
 /* Zod schema for validation of the decoded params */
 export const filterParamsSchema = z
     .object({
-        [IDENTIFIABLE_KEY]: z.string(),
+        [IDENTIFIABLE_FILTER_KEY]: z.string(),
         aggregationType: z.array(z.nativeEnum(DataElement.aggregationType)),
         categoryCombo: zodArrayIds,
         dataSet: zodArrayIds,
@@ -25,7 +25,7 @@ export const filterParamsSchema = z
 /* useQueryParams config-map object
 Mapping each filter to a config object that handles encoding/decoding */
 export const filterQueryParamType = {
-    [IDENTIFIABLE_KEY]: StringParam,
+    [IDENTIFIABLE_FILTER_KEY]: StringParam,
     aggregationType: CustomDelimitedArrayParam,
     domainType: CustomDelimitedArrayParam,
     valueType: CustomDelimitedArrayParam,
@@ -53,5 +53,8 @@ type QueryParamsConfigMap = {
 
 export type FilterKey = keyof ParsedFilterParams
 // Identifiable is not configurable, and is always shown in the list
-export type ConfigurableFilterKey = Exclude<FilterKey, typeof IDENTIFIABLE_KEY>
+export type ConfigurableFilterKey = Exclude<
+    FilterKey,
+    typeof IDENTIFIABLE_FILTER_KEY
+>
 export type FilterKeys = FilterKey[]

From fdb0b1071bc2d7de9d9512a43768d302283c2f80 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Mon, 29 Jan 2024 20:05:42 +0100
Subject: [PATCH 11/22] fix: reset paging when clearing filters

---
 src/lib/sectionList/filters/useSectionListFilters.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/lib/sectionList/filters/useSectionListFilters.ts b/src/lib/sectionList/filters/useSectionListFilters.ts
index 087888b8..3e150da1 100644
--- a/src/lib/sectionList/filters/useSectionListFilters.ts
+++ b/src/lib/sectionList/filters/useSectionListFilters.ts
@@ -1,9 +1,6 @@
 import { useCallback, useMemo } from 'react'
 import { useQueryParams } from 'use-query-params'
-import {
-    usePaginationQueryParams,
-    useUpdatePaginationParams,
-} from '../usePaginationParams'
+import { usePaginationQueryParams } from '../usePaginationParams'
 import {
     ParsedFilterParams,
     filterQueryParamType,
@@ -34,9 +31,10 @@ export const useSectionListFilters = () => {
                 const resetParams = Object.fromEntries(
                     validFilterKeys.map((key) => [key, undefined])
                 )
-                return setFilterParams(resetParams)
+                setFilterParams(resetParams)
+            } else {
+                setFilterParams(filter, updateType)
             }
-            setFilterParams(filter, updateType)
             // set page to 1 when filter changes
             // do this here instead of useEffect to prevent unnecessary refetches
             setPagingParams((pagingParams) => ({ ...pagingParams, page: 1 }))

From 2125f776556d908daa95a6eef95f1e2fe7e3e947 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Mon, 29 Jan 2024 20:11:44 +0100
Subject: [PATCH 12/22] fix: update default view for dataElements

---
 src/lib/sectionList/listViews/sectionListViewsConfig.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/sectionList/listViews/sectionListViewsConfig.ts b/src/lib/sectionList/listViews/sectionListViewsConfig.ts
index d1111896..26b0648d 100644
--- a/src/lib/sectionList/listViews/sectionListViewsConfig.ts
+++ b/src/lib/sectionList/listViews/sectionListViewsConfig.ts
@@ -86,13 +86,13 @@ export const defaultModelViewConfig = {
 export const modelListViewsConfig = {
     dataElement: {
         columns: {
-            available: ['zeroIsSignificant', 'categoryCombo'],
+            available: ['zeroIsSignificant', DESCRIPTORS.publicAccess],
             default: [
                 'name',
                 { label: i18n.t('Domain'), path: 'domainType' },
                 { label: i18n.t('Value type'), path: 'valueType' },
+                'categoryCombo',
                 'lastUpdated',
-                DESCRIPTORS.publicAccess,
             ],
         },
         filters: {

From b177893d250dcff88b4c2dcb1c5437683952a002 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Tue, 30 Jan 2024 01:39:44 +0100
Subject: [PATCH 13/22] fix(managelistview): move reset to default to
 rightfooter

---
 .../listView/ManageListView.module.css        | 22 ++++++++++---
 .../sectionList/listView/ManageListView.tsx   | 33 ++++++++++++-------
 2 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/components/sectionList/listView/ManageListView.module.css b/src/components/sectionList/listView/ManageListView.module.css
index 71f62f86..380055b8 100644
--- a/src/components/sectionList/listView/ManageListView.module.css
+++ b/src/components/sectionList/listView/ManageListView.module.css
@@ -1,9 +1,23 @@
-.resetDefaultButton {
-    margin-top: var(--spacers-dp12) !important;
-}
-
 .transferHeader {
     margin: var(--spacers-dp8) 0px;
     color: var(--colors-grey700);
     font-weight: 400;
 }
+
+.transferContainer {
+    padding-bottom: var(--spacers-dp16);
+}
+
+/* placing reset-button inside right-footer while keeping the ui implementation
+of reorder-buttons */
+.transferContainer :global(div[data-test='dhis2-uicore-transfer-rightfooter']) {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: var(--spacers-dp8);
+}
+
+.resetDefaultButton {
+    margin-top: var(--spacers-dp8);
+}
diff --git a/src/components/sectionList/listView/ManageListView.tsx b/src/components/sectionList/listView/ManageListView.tsx
index 6a65a4a5..e17695a4 100644
--- a/src/components/sectionList/listView/ManageListView.tsx
+++ b/src/components/sectionList/listView/ManageListView.tsx
@@ -99,6 +99,8 @@ export const ManageListView = ({
                     <form onSubmit={handleSubmit}>
                         <TransferField
                             name={'columns'}
+                            availableLabel={i18n.t('Available columns')}
+                            selectedLabel={i18n.t('Selected columns')}
                             loading={query.isLoading}
                             defaultOptions={columnsConfig.default.map(
                                 (c) => c.path
@@ -109,6 +111,8 @@ export const ManageListView = ({
                         />
                         <TransferField
                             name={'filters'}
+                            availableLabel={i18n.t('Available filters')}
+                            selectedLabel={i18n.t('Selected filters')}
                             loading={query.isLoading}
                             defaultOptions={filtersConfig.default.map(
                                 (c) => c.filterKey
@@ -142,12 +146,16 @@ type TransferField = {
     loading?: boolean
     defaultOptions: string[]
     availableOptions: TransferOption[]
+    availableLabel: string
+    selectedLabel: string
 }
 const TransferField = ({
     name,
     loading,
     defaultOptions,
     availableOptions,
+    availableLabel,
+    selectedLabel,
 }: TransferField) => {
     const { input, meta } = useField(name, {
         multiple: true,
@@ -163,29 +171,32 @@ const TransferField = ({
                 name={'columns'}
             >
                 <Transfer
+                    className={css.transferContainer}
                     height={'320px'}
                     loading={loading}
                     enableOrderChange
                     leftHeader={
-                        <TransferHeader>{i18n.t('Available')}</TransferHeader>
+                        <TransferHeader>{availableLabel}</TransferHeader>
                     }
                     rightHeader={
-                        <TransferHeader>{i18n.t('Selected')}</TransferHeader>
+                        <TransferHeader>{selectedLabel}</TransferHeader>
                     }
                     selected={input.value}
                     onChange={({ selected }) => input.onChange(selected)}
                     options={availableOptions}
+                    rightFooter={
+                        <Button
+                            className={css.resetDefaultButton}
+                            small
+                            secondary
+                            onClick={handleSetDefault}
+                            disabled={meta.submitting}
+                        >
+                            {i18n.t('Reset to default')}
+                        </Button>
+                    }
                 />
             </Field>
-            <Button
-                className={css.resetDefaultButton}
-                small
-                secondary
-                onClick={handleSetDefault}
-                disabled={meta.submitting}
-            >
-                {i18n.t('Reset to default')}
-            </Button>
         </div>
     )
 }

From af5573199c6f67d34ee548a73b79292a8f00b0df Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Tue, 30 Jan 2024 01:51:07 +0100
Subject: [PATCH 14/22] refactor: minor cleanup

---
 .../sectionList/listView/ManageListView.tsx        | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/sectionList/listView/ManageListView.tsx b/src/components/sectionList/listView/ManageListView.tsx
index e17695a4..ca13fd36 100644
--- a/src/components/sectionList/listView/ManageListView.tsx
+++ b/src/components/sectionList/listView/ManageListView.tsx
@@ -22,6 +22,8 @@ type ManageColumnsDialogProps = {
 }
 
 const toPath = (propertyDescriptor: { path: string }) => propertyDescriptor.path
+const toFilterKey = (filterDescriptor: { filterKey: string }) =>
+    filterDescriptor.filterKey
 
 type FormValues = {
     columns: string[]
@@ -83,8 +85,8 @@ export const ManageListView = ({
                     : columnsConfig.default.map(toPath),
             filters:
                 savedFilters.length > 0
-                    ? savedFilters.map((f) => f.filterKey)
-                    : filtersConfig.default.map((f) => f.filterKey),
+                    ? savedFilters.map(toFilterKey)
+                    : filtersConfig.default.map(toFilterKey),
         }
     }, [savedFilters, savedColumns, filtersConfig, columnsConfig])
 
@@ -102,9 +104,7 @@ export const ManageListView = ({
                             availableLabel={i18n.t('Available columns')}
                             selectedLabel={i18n.t('Selected columns')}
                             loading={query.isLoading}
-                            defaultOptions={columnsConfig.default.map(
-                                (c) => c.path
-                            )}
+                            defaultOptions={columnsConfig.default.map(toPath)}
                             availableOptions={columnsConfig.available.map(
                                 (c) => ({ label: c.label, value: c.path })
                             )}
@@ -115,10 +115,10 @@ export const ManageListView = ({
                             selectedLabel={i18n.t('Selected filters')}
                             loading={query.isLoading}
                             defaultOptions={filtersConfig.default.map(
-                                (c) => c.filterKey
+                                toFilterKey
                             )}
                             availableOptions={filtersConfig.available.map(
-                                (c) => ({ label: c.label, value: c.filterKey })
+                                (f) => ({ label: f.label, value: f.filterKey })
                             )}
                         />
                         {submitError && (

From a835ae14d502e1c8f730d2835742936ed1fce1c6 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Tue, 30 Jan 2024 02:17:59 +0100
Subject: [PATCH 15/22] refactor: more cleanup

---
 .../sectionList/listView/ManageListView.tsx   | 90 +++++++++----------
 1 file changed, 43 insertions(+), 47 deletions(-)

diff --git a/src/components/sectionList/listView/ManageListView.tsx b/src/components/sectionList/listView/ManageListView.tsx
index ca13fd36..b0e97a3c 100644
--- a/src/components/sectionList/listView/ManageListView.tsx
+++ b/src/components/sectionList/listView/ManageListView.tsx
@@ -29,6 +29,7 @@ type FormValues = {
     columns: string[]
     filters: string[]
 }
+
 const validate = (values: FormValues) => {
     const errors: Record<string, string> = {}
 
@@ -91,53 +92,48 @@ export const ManageListView = ({
     }, [savedFilters, savedColumns, filtersConfig, columnsConfig])
 
     return (
-        <>
-            <Form
-                onSubmit={handleSave}
-                initialValues={initialValues}
-                validate={validate}
-            >
-                {({ handleSubmit, submitting, submitError }) => (
-                    <form onSubmit={handleSubmit}>
-                        <TransferField
-                            name={'columns'}
-                            availableLabel={i18n.t('Available columns')}
-                            selectedLabel={i18n.t('Selected columns')}
-                            loading={query.isLoading}
-                            defaultOptions={columnsConfig.default.map(toPath)}
-                            availableOptions={columnsConfig.available.map(
-                                (c) => ({ label: c.label, value: c.path })
-                            )}
-                        />
-                        <TransferField
-                            name={'filters'}
-                            availableLabel={i18n.t('Available filters')}
-                            selectedLabel={i18n.t('Selected filters')}
-                            loading={query.isLoading}
-                            defaultOptions={filtersConfig.default.map(
-                                toFilterKey
-                            )}
-                            availableOptions={filtersConfig.available.map(
-                                (f) => ({ label: f.label, value: f.filterKey })
-                            )}
-                        />
-                        {submitError && (
-                            <p>
-                                <NoticeBox
-                                    error
-                                    title={i18n.t('Failed to save')}
-                                >
-                                    {submitError}
-                                </NoticeBox>
-                            </p>
-                        )}
-                        {children({
-                            submitting,
-                        })}
-                    </form>
-                )}
-            </Form>
-        </>
+        <Form
+            onSubmit={handleSave}
+            initialValues={initialValues}
+            validate={validate}
+        >
+            {({ handleSubmit, submitting, submitError }) => (
+                <form onSubmit={handleSubmit}>
+                    <TransferField
+                        name={'columns'}
+                        availableLabel={i18n.t('Available columns')}
+                        selectedLabel={i18n.t('Selected columns')}
+                        loading={query.isLoading}
+                        defaultOptions={columnsConfig.default.map(toPath)}
+                        availableOptions={columnsConfig.available.map((c) => ({
+                            label: c.label,
+                            value: c.path,
+                        }))}
+                    />
+                    <TransferField
+                        name={'filters'}
+                        availableLabel={i18n.t('Available filters')}
+                        selectedLabel={i18n.t('Selected filters')}
+                        loading={query.isLoading}
+                        defaultOptions={filtersConfig.default.map(toFilterKey)}
+                        availableOptions={filtersConfig.available.map((f) => ({
+                            label: f.label,
+                            value: f.filterKey,
+                        }))}
+                    />
+                    {submitError && (
+                        <p>
+                            <NoticeBox error title={i18n.t('Failed to save')}>
+                                {submitError}
+                            </NoticeBox>
+                        </p>
+                    )}
+                    {children({
+                        submitting,
+                    })}
+                </form>
+            )}
+        </Form>
     )
 }
 

From f3da877180e99b18bef201fa378056ae2d752428 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Tue, 30 Jan 2024 10:32:03 +0100
Subject: [PATCH 16/22] refactor: cleanup

---
 src/components/SearchableSingleSelect/index.ts                | 1 -
 src/components/sectionList/filters/DynamicFilters.tsx         | 2 +-
 .../filters/filterSelectors/CategoryComboFilter.tsx           | 2 +-
 .../sectionList/filters/filterSelectors/DataSetFilter.tsx     | 2 +-
 .../{createdFilterDataQuery.ts => createFilterDataQuery.ts}   | 0
 src/components/sectionList/filters/filterSelectors/index.ts   | 3 +++
 src/components/sectionList/filters/index.ts                   | 4 +---
 7 files changed, 7 insertions(+), 7 deletions(-)
 rename src/components/sectionList/filters/filterSelectors/{createdFilterDataQuery.ts => createFilterDataQuery.ts} (100%)

diff --git a/src/components/SearchableSingleSelect/index.ts b/src/components/SearchableSingleSelect/index.ts
index 889bd39d..92c577e4 100644
--- a/src/components/SearchableSingleSelect/index.ts
+++ b/src/components/SearchableSingleSelect/index.ts
@@ -1,2 +1 @@
 export * from './SearchableSingleSelect'
-//asf
diff --git a/src/components/sectionList/filters/DynamicFilters.tsx b/src/components/sectionList/filters/DynamicFilters.tsx
index 1895cf7b..c668feb5 100644
--- a/src/components/sectionList/filters/DynamicFilters.tsx
+++ b/src/components/sectionList/filters/DynamicFilters.tsx
@@ -6,8 +6,8 @@ import {
     DataSetFilter,
     DomainTypeSelectionFilter,
     ValueTypeSelectionFilter,
+    PublicAccessFilter,
 } from './filterSelectors'
-import { PublicAccessFilter } from './filterSelectors/PublicAccessFilter'
 import { useFilterKeys } from './useFilterKeys'
 
 type FilterKeyToComponentMap = Partial<Record<ConfigurableFilterKey, React.FC>>
diff --git a/src/components/sectionList/filters/filterSelectors/CategoryComboFilter.tsx b/src/components/sectionList/filters/filterSelectors/CategoryComboFilter.tsx
index 67a2e91c..c8de3924 100644
--- a/src/components/sectionList/filters/filterSelectors/CategoryComboFilter.tsx
+++ b/src/components/sectionList/filters/filterSelectors/CategoryComboFilter.tsx
@@ -1,7 +1,7 @@
 import i18n from '@dhis2/d2-i18n'
 import React from 'react'
 import { useSectionListFilter } from '../../../../lib'
-import { createFilterDataQuery } from './createdFilterDataQuery'
+import { createFilterDataQuery } from './createFilterDataQuery'
 import { ModelFilterSelect } from './ModelFilter'
 
 const query = createFilterDataQuery('categoryCombos')
diff --git a/src/components/sectionList/filters/filterSelectors/DataSetFilter.tsx b/src/components/sectionList/filters/filterSelectors/DataSetFilter.tsx
index c8d570b2..f0c387fc 100644
--- a/src/components/sectionList/filters/filterSelectors/DataSetFilter.tsx
+++ b/src/components/sectionList/filters/filterSelectors/DataSetFilter.tsx
@@ -1,7 +1,7 @@
 import i18n from '@dhis2/d2-i18n'
 import React from 'react'
 import { useSectionListFilter } from '../../../../lib'
-import { createFilterDataQuery } from './createdFilterDataQuery'
+import { createFilterDataQuery } from './createFilterDataQuery'
 import { ModelFilterSelect } from './ModelFilter'
 
 const query = createFilterDataQuery('dataSets')
diff --git a/src/components/sectionList/filters/filterSelectors/createdFilterDataQuery.ts b/src/components/sectionList/filters/filterSelectors/createFilterDataQuery.ts
similarity index 100%
rename from src/components/sectionList/filters/filterSelectors/createdFilterDataQuery.ts
rename to src/components/sectionList/filters/filterSelectors/createFilterDataQuery.ts
diff --git a/src/components/sectionList/filters/filterSelectors/index.ts b/src/components/sectionList/filters/filterSelectors/index.ts
index 0476b218..55442aca 100644
--- a/src/components/sectionList/filters/filterSelectors/index.ts
+++ b/src/components/sectionList/filters/filterSelectors/index.ts
@@ -1,3 +1,6 @@
 export * from './ConstantFilters'
 export * from './DataSetFilter'
 export * from './CategoryComboFilter'
+export * from './IdentifiableFilter'
+export * from './ConstantSelectionFilter'
+export * from './PublicAccessFilter'
diff --git a/src/components/sectionList/filters/index.ts b/src/components/sectionList/filters/index.ts
index bfb9c6bb..8f2e9468 100644
--- a/src/components/sectionList/filters/index.ts
+++ b/src/components/sectionList/filters/index.ts
@@ -1,3 +1 @@
-export * from './filterSelectors/ConstantSelectionFilter'
-export * from './filterSelectors/IdentifiableFilter'
-export * from './filterSelectors/ConstantFilters'
+export * from './filterSelectors'

From 432ac43b8eb8500cb7556f6ea9f399a8367cc9bb Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Wed, 28 Feb 2024 14:47:23 +0100
Subject: [PATCH 17/22] fix: some cleanup

---
 .../filters/filterSelectors/ModelFilter.tsx     | 17 ++++++++---------
 src/lib/dataStore/useDataStore.ts               |  1 -
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/sectionList/filters/filterSelectors/ModelFilter.tsx b/src/components/sectionList/filters/filterSelectors/ModelFilter.tsx
index 3dd0236d..7377b2b0 100644
--- a/src/components/sectionList/filters/filterSelectors/ModelFilter.tsx
+++ b/src/components/sectionList/filters/filterSelectors/ModelFilter.tsx
@@ -68,12 +68,10 @@ export const ModelFilterSelect = ({
     // nothing that depends on the render-cycle depends on this value
     const filterRef = useRef<string | undefined>()
     const initialSelected = useRef(selected)
-    // We need to persist the selected option so we can display an <Option />
-    // when the current list doesn't contain the selected option (e.g. when
-    // the page with the selected option hasn't been reached yet or when
-    // filtering)
-    const [initialSelectedOption, setInitialSelectedOption] =
-        useState<OptionResult>()
+
+    // this is only done once, and will not update if query changes
+    // using useState instead of useRef because it's unecessary to call this every render
+    // and useRef does not support a callback
     const [initialQuery] = useState(() =>
         createInitialOptionQuery(query.result.resource)
     )
@@ -84,12 +82,11 @@ export const ModelFilterSelect = ({
             // run only when we have an initial selected value
             lazy: initialSelected.current === undefined,
             variables: { id: selected },
-            onComplete: (data) => {
-                setInitialSelectedOption(data.result)
-            },
         }
     )
 
+    const initialSelectedOption = initialOptionResult.data?.result
+
     const optionsQueryResult = useInfiniteDataQuery<OptionResult>(query)
     const { refetch, data, incrementPage } = optionsQueryResult
 
@@ -112,11 +109,13 @@ export const ModelFilterSelect = ({
         optionsQueryResult.fetching ||
         optionsQueryResult.loading ||
         initialOptionResult.loading
+
     const error =
         optionsQueryResult.error || initialOptionResult.error
             ? // @TODO: Ask Joe what do do here!
               'An error has occurred. Please try again'
             : ''
+
     const dataResultKey = query.result.resource
     const options = data?.result[dataResultKey] || []
 
diff --git a/src/lib/dataStore/useDataStore.ts b/src/lib/dataStore/useDataStore.ts
index f2431ccc..9bf253f3 100644
--- a/src/lib/dataStore/useDataStore.ts
+++ b/src/lib/dataStore/useDataStore.ts
@@ -102,7 +102,6 @@ export function useDataStoreValuesQuery<
         queryKey: [query],
         queryFn: createBoundQueryFn(engine),
         placeholderData,
-        // keepPreviousData: true,
         // hide ".result" from consumer
         select: (data) => select(data.result) as SelectResult,
     })

From 39762f6d3bbf3b014e366126846006363f89347e Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Wed, 28 Feb 2024 15:34:32 +0100
Subject: [PATCH 18/22] refactor: more robust publicAccess filter

---
 .../ConstantSelectionFilter.tsx               |  8 +++++++-
 .../filterSelectors/PublicAccessFilter.tsx    | 20 +++++++++++++++++++
 .../sectionList/filters/useFilterKeys.tsx     |  3 +++
 src/lib/models/index.ts                       |  5 ++++-
 src/lib/models/parsePublicAccess.ts           | 16 ++++++++++++++-
 5 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/components/sectionList/filters/filterSelectors/ConstantSelectionFilter.tsx b/src/components/sectionList/filters/filterSelectors/ConstantSelectionFilter.tsx
index 64647e71..b6932eef 100644
--- a/src/components/sectionList/filters/filterSelectors/ConstantSelectionFilter.tsx
+++ b/src/components/sectionList/filters/filterSelectors/ConstantSelectionFilter.tsx
@@ -10,6 +10,7 @@ type ConstantSelectionFilterProps = {
     constants: Record<string, string>
     filterKey: FilterKey
     filterable?: boolean
+    formatFilter?: (filter: string | undefined) => string | undefined
 }
 
 export const ConstantSelectionFilter = ({
@@ -17,10 +18,15 @@ export const ConstantSelectionFilter = ({
     filterKey,
     label,
     filterable,
+    formatFilter,
 }: ConstantSelectionFilterProps) => {
     const [filter, setFilter] = useSectionListFilter(filterKey)
 
-    const selected = Array.isArray(filter) ? filter[0] : filter
+    let selected = Array.isArray(filter) ? filter[0] : filter
+    if (formatFilter) {
+        selected = formatFilter(selected)
+    }
+
     const isInOptions =
         selected && constants[selected as keyof typeof constants]
 
diff --git a/src/components/sectionList/filters/filterSelectors/PublicAccessFilter.tsx b/src/components/sectionList/filters/filterSelectors/PublicAccessFilter.tsx
index e5e0df45..f9111c93 100644
--- a/src/components/sectionList/filters/filterSelectors/PublicAccessFilter.tsx
+++ b/src/components/sectionList/filters/filterSelectors/PublicAccessFilter.tsx
@@ -1,7 +1,11 @@
 import i18n from '@dhis2/d2-i18n'
 import React from 'react'
+import { formatPublicAccess, parsePublicAccessString } from '../../../../lib'
 import { ConstantSelectionFilter } from './ConstantSelectionFilter'
 
+// currently we only care about metadata access
+// we may want to revist this and potentially rename to "publicMetadataAccess"
+// and have another component for data access
 const constants = {
     'rw------': 'Public can edit',
     'r-------': 'Public can view',
@@ -9,11 +13,27 @@ const constants = {
 }
 
 export const PublicAccessFilter = () => {
+    const formatFilter = (filter: string | undefined) => {
+        if (!filter) {
+            return undefined
+        }
+        const parsedPublicAccessString = parsePublicAccessString(filter)
+        if (!parsedPublicAccessString) {
+            return undefined
+        }
+        const withoutDataAccess = formatPublicAccess({
+            metadata: parsedPublicAccessString.metadata,
+            data: { read: false, write: false },
+        })
+        return withoutDataAccess
+    }
+
     return (
         <ConstantSelectionFilter
             label={i18n.t('Public access')}
             filterKey="publicAccess"
             constants={constants}
+            formatFilter={formatFilter}
         />
     )
 }
diff --git a/src/components/sectionList/filters/useFilterKeys.tsx b/src/components/sectionList/filters/useFilterKeys.tsx
index e19f165b..ab7425ed 100644
--- a/src/components/sectionList/filters/useFilterKeys.tsx
+++ b/src/components/sectionList/filters/useFilterKeys.tsx
@@ -6,6 +6,9 @@ import {
 } from '../../../lib'
 import { useModelListView } from '../listView'
 
+/**
+ * Get the filterKeys for for which filters to show.
+ * This depends on the current "modelList" view, and selected filters with values in the url */
 export const useFilterKeys = () => {
     const [filters] = useSectionListFilters()
     const { filters: viewFilters } = useModelListView()
diff --git a/src/lib/models/index.ts b/src/lib/models/index.ts
index 725e338c..b7d55ba4 100644
--- a/src/lib/models/index.ts
+++ b/src/lib/models/index.ts
@@ -1,3 +1,6 @@
 export { isValidUid } from './uid'
-export { parsePublicAccessString } from './parsePublicAccess'
+export {
+    parsePublicAccessString,
+    formatPublicAccess,
+} from './parsePublicAccess'
 export { getIn, stringToPathArray, getFieldFilterFromPath } from './path'
diff --git a/src/lib/models/parsePublicAccess.ts b/src/lib/models/parsePublicAccess.ts
index 44e7ea7b..968cae63 100644
--- a/src/lib/models/parsePublicAccess.ts
+++ b/src/lib/models/parsePublicAccess.ts
@@ -26,10 +26,24 @@ export const parsePublicAccessString = (
     if (!matches) {
         return null
     }
-    const [_, metadata, data] = matches
+    const [, metadata, data] = matches
 
     return {
         metadata: parseAccessPart(metadata),
         data: parseAccessPart(data),
     }
 }
+
+const accessPartToString = (accessPart: PublicAccessPart): string => {
+    if (accessPart.write) {
+        return 'rw'
+    }
+    return accessPart.read ? 'r-' : '--'
+}
+
+export const formatPublicAccess = (publicAccess: PublicAccess): string => {
+    const metadata = accessPartToString(publicAccess.metadata)
+    const data = accessPartToString(publicAccess.data)
+
+    return metadata + data + '----'
+}

From 22e1600397f4f41b5f3d83e886bebb9b3461ed7b Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Fri, 1 Mar 2024 18:46:54 +0100
Subject: [PATCH 19/22] fix: filtereddataelement type

---
 src/pages/dataElements/List.tsx | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/pages/dataElements/List.tsx b/src/pages/dataElements/List.tsx
index 1feb859c..2226a255 100644
--- a/src/pages/dataElements/List.tsx
+++ b/src/pages/dataElements/List.tsx
@@ -7,18 +7,7 @@ import { getFieldFilter } from '../../lib/models/path'
 import { Query, WrapQueryResponse } from '../../types'
 import { DataElement, ModelCollectionResponse } from '../../types/models'
 
-const filterFields = [
-    'access',
-    'id',
-    'name',
-    'code',
-    'domainType',
-    'valueType',
-    'lastUpdated',
-    'sharing',
-] as const
-
-type FilteredDataElement = Pick<DataElement, (typeof filterFields)[number]>
+type FilteredDataElement = Pick<DataElement, 'id'> & Partial<DataElement>
 
 type DataElements = ModelCollectionResponse<FilteredDataElement, 'dataElements'>
 

From b506baeb7b0de5635a8a0dfc00faae57c51540cb Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Fri, 1 Mar 2024 18:54:02 +0100
Subject: [PATCH 20/22] fix: failing test

---
 src/pages/dataElements/List.spec.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/dataElements/List.spec.tsx b/src/pages/dataElements/List.spec.tsx
index 56da08a2..6d54386c 100644
--- a/src/pages/dataElements/List.spec.tsx
+++ b/src/pages/dataElements/List.spec.tsx
@@ -89,10 +89,11 @@ describe('Data Elements List', () => {
         const { getByText } = await renderSection(customData)
         const columns = [
             'Name',
-            'Domain',
+            'Domain type',
             'Value type',
-            'Last updated',
+            'Category combination',
             'Public access',
+            'Last updated',
             'Actions',
         ]
 

From e0329f0f2033ab3859923ac2abd2e1ae642aae4f Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Fri, 1 Mar 2024 19:10:36 +0100
Subject: [PATCH 21/22] refactor: cleanup viewconfig

---
 i18n/en.pot                                   | 76 ++++++++++---------
 .../constants/translatedModelProperties.ts    |  1 +
 .../listViews/sectionListViewsConfig.ts       | 29 +++----
 3 files changed, 52 insertions(+), 54 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index 0f471a4e..e756f185 100644
--- a/i18n/en.pot
+++ b/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-01-28T22:30:49.498Z\n"
-"PO-Revision-Date: 2024-01-28T22:30:49.498Z\n"
+"POT-Creation-Date: 2024-03-01T17:52:14.520Z\n"
+"PO-Revision-Date: 2024-03-01T17:52:14.520Z\n"
 
 msgid "schemas"
 msgstr "schemas"
@@ -66,6 +66,12 @@ msgstr "All"
 msgid "Filter options"
 msgstr "Filter options"
 
+msgid "Something went wrong when submitting the form"
+msgstr "Something went wrong when submitting the form"
+
+msgid "Save and close"
+msgstr "Save and close"
+
 msgid "Failed to load {{label}}"
 msgstr "Failed to load {{label}}"
 
@@ -99,8 +105,8 @@ msgstr "New"
 msgid "Download"
 msgstr "Download"
 
-msgid "Manage Columns"
-msgstr "Manage Columns"
+msgid "Manage View"
+msgstr "Manage View"
 
 msgid "There aren't any items that match your filter."
 msgstr "There aren't any items that match your filter."
@@ -168,26 +174,41 @@ msgstr "Data set"
 msgid "Search by name, code or ID"
 msgstr "Search by name, code or ID"
 
+msgid "Public access"
+msgstr "Public access"
+
 msgid "At least one column must be selected"
 msgstr "At least one column must be selected"
 
-msgid "Available table columns"
-msgstr "Available table columns"
+msgid "At least one filter must be selected"
+msgstr "At least one filter must be selected"
 
-msgid "Selected table columns"
-msgstr "Selected table columns"
+msgid "An unknown error occurred"
+msgstr "An unknown error occurred"
 
-msgid "Reset to default columns"
-msgstr "Reset to default columns"
+msgid "Available columns"
+msgstr "Available columns"
+
+msgid "Selected columns"
+msgstr "Selected columns"
+
+msgid "Available filters"
+msgstr "Available filters"
+
+msgid "Selected filters"
+msgstr "Selected filters"
 
 msgid "Failed to save"
 msgstr "Failed to save"
 
-msgid "Manage {{section}} table columns"
-msgstr "Manage {{section}} table columns"
+msgid "Reset to default"
+msgstr "Reset to default"
 
-msgid "Update table columns"
-msgstr "Update table columns"
+msgid "Manage {{section}} view"
+msgstr "Manage {{section}} view"
+
+msgid "Update view"
+msgstr "Update view"
 
 msgid "Public can edit"
 msgstr "Public can edit"
@@ -198,21 +219,6 @@ msgstr "Public can view"
 msgid "Public cannot access"
 msgstr "Public cannot access"
 
-msgid "Public access"
-msgstr "Public access"
-
-msgid "Hello available public"
-msgstr "Hello available public"
-
-msgid "Domain"
-msgstr "Domain"
-
-msgid "Value type"
-msgstr "Value type"
-
-msgid "Hello public"
-msgstr "Hello public"
-
 msgid "Category"
 msgstr "Category"
 
@@ -618,6 +624,9 @@ msgstr "Name"
 msgid "Sharing"
 msgstr "Sharing"
 
+msgid "Value type"
+msgstr "Value type"
+
 msgid "Owner"
 msgstr "Owner"
 
@@ -633,12 +642,6 @@ msgstr "Required"
 msgid "Custom attributes"
 msgstr "Custom attributes"
 
-msgid "Something went wrong when submitting the form"
-msgstr "Something went wrong when submitting the form"
-
-msgid "Save and close"
-msgstr "Save and close"
-
 msgid "Exit without saving"
 msgstr "Exit without saving"
 
@@ -682,6 +685,9 @@ msgstr "Description"
 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 "Domain"
+msgstr "Domain"
+
 msgid "A data element can either be aggregated or tracked data."
 msgstr "A data element can either be aggregated or tracked data."
 
diff --git a/src/lib/constants/translatedModelProperties.ts b/src/lib/constants/translatedModelProperties.ts
index 5ef6c0bf..e9ee6d00 100644
--- a/src/lib/constants/translatedModelProperties.ts
+++ b/src/lib/constants/translatedModelProperties.ts
@@ -10,6 +10,7 @@ const TRANSLATED_PROPERTY: Record<string, string> = {
     lastUpdatedBy: i18n.t('Last updated by'),
     created: i18n.t('Created'),
     domainType: i18n.t('Domain type'),
+    dataSet: i18n.t('Data set'),
     lastUpdated: i18n.t('Last updated'),
     name: i18n.t('Name'),
     sharing: i18n.t('Sharing'),
diff --git a/src/lib/sectionList/listViews/sectionListViewsConfig.ts b/src/lib/sectionList/listViews/sectionListViewsConfig.ts
index c8708999..0a72a568 100644
--- a/src/lib/sectionList/listViews/sectionListViewsConfig.ts
+++ b/src/lib/sectionList/listViews/sectionListViewsConfig.ts
@@ -11,6 +11,10 @@ export interface FilterDescriptor {
     filterKey: ConfigurableFilterKey
 }
 
+type Descriptor =
+    | (ModelPropertyDescriptor & Partial<FilterDescriptor>)
+    | (FilterDescriptor & Partial<ModelPropertyDescriptor>)
+
 /* Configs can either define the label and filterKey, or a string
 If config is a string, getTranslatedProperty will be used to get the label.  */
 
@@ -36,20 +40,12 @@ export type SectionListViewConfig<Key extends string = string> = {
 }
 
 const DESCRIPTORS = {
-    publicAccess: { path: 'sharing.public', label: i18n.t('Public access') },
-} satisfies Record<string, ModelPropertyDescriptor>
-
-const FILTERS = {
-    categoryCombo: {
-        filterKey: 'categoryCombo',
-        label: i18n.t('Category combo'),
-    },
-    dataSet: { filterKey: 'dataSet', label: i18n.t('Data set') },
     publicAccess: {
-        filterKey: 'publicAccess',
+        path: 'sharing.public',
         label: i18n.t('Public access'),
+        filterKey: 'publicAccess',
     },
-} satisfies Record<string, FilterDescriptor>
+} satisfies Record<string, Descriptor>
 
 // This is the default views, and can be overriden per section in modelListViewsConfig below
 export const defaultModelViewConfig = {
@@ -86,7 +82,7 @@ export const defaultModelViewConfig = {
 export const modelListViewsConfig = {
     dataElement: {
         columns: {
-            available: ['zeroIsSignificant', DESCRIPTORS.publicAccess],
+            available: ['zeroIsSignificant'],
             default: [
                 'name',
                 { label: i18n.t('Domain type'), path: 'domainType' },
@@ -97,13 +93,8 @@ export const modelListViewsConfig = {
             ],
         },
         filters: {
-            default: [
-                'domainType',
-                'valueType',
-                FILTERS.dataSet,
-                'categoryCombo',
-            ],
-            available: ['categoryCombo', FILTERS.publicAccess],
+            default: ['domainType', 'valueType', 'dataSet', 'categoryCombo'],
+            available: [DESCRIPTORS.publicAccess],
         },
     },
 } satisfies SectionListViewConfig

From 13baa3eba2f98728155f28fa15e10fdb331312f1 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Fri, 1 Mar 2024 19:30:41 +0100
Subject: [PATCH 22/22] fix(modelview): put empty array if default

---
 .../sectionList/listView/ManageListView.tsx   | 26 ++++++++++++++-----
 .../sectionList/listView/useModelListView.tsx | 15 ++++++++---
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/components/sectionList/listView/ManageListView.tsx b/src/components/sectionList/listView/ManageListView.tsx
index b0e97a3c..69f5d9d6 100644
--- a/src/components/sectionList/listView/ManageListView.tsx
+++ b/src/components/sectionList/listView/ManageListView.tsx
@@ -56,11 +56,22 @@ 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 handleSave = async (values: FormValues) => {
+        const isDefault = (arr: string[], def: string[]) =>
+            arr.join() === def.join()
+
+        // save empty view if default, this makes the app able to update the default view
         const view = {
             name: 'default',
-            columns: values.columns,
-            filters: values.filters,
+            columns: isDefault(values.columns, defaultColumns)
+                ? []
+                : values.columns,
+            filters: isDefault(values.filters, defaultFilters)
+                ? []
+                : values.filters,
         }
 
         return new Promise((resolve) => {
@@ -83,13 +94,13 @@ export const ManageListView = ({
             columns:
                 savedColumns.length > 0
                     ? savedColumns.map(toPath)
-                    : columnsConfig.default.map(toPath),
+                    : defaultColumns,
             filters:
                 savedFilters.length > 0
                     ? savedFilters.map(toFilterKey)
-                    : filtersConfig.default.map(toFilterKey),
+                    : defaultFilters,
         }
-    }, [savedFilters, savedColumns, filtersConfig, columnsConfig])
+    }, [savedFilters, savedColumns, defaultColumns, defaultFilters])
 
     return (
         <Form
@@ -104,7 +115,7 @@ export const ManageListView = ({
                         availableLabel={i18n.t('Available columns')}
                         selectedLabel={i18n.t('Selected columns')}
                         loading={query.isLoading}
-                        defaultOptions={columnsConfig.default.map(toPath)}
+                        defaultOptions={defaultColumns}
                         availableOptions={columnsConfig.available.map((c) => ({
                             label: c.label,
                             value: c.path,
@@ -115,7 +126,7 @@ export const ManageListView = ({
                         availableLabel={i18n.t('Available filters')}
                         selectedLabel={i18n.t('Selected filters')}
                         loading={query.isLoading}
-                        defaultOptions={filtersConfig.default.map(toFilterKey)}
+                        defaultOptions={defaultFilters}
                         availableOptions={filtersConfig.available.map((f) => ({
                             label: f.label,
                             value: f.filterKey,
@@ -159,6 +170,7 @@ const TransferField = ({
     const handleSetDefault = () => {
         input.onChange(defaultOptions)
     }
+
     return (
         <div>
             <Field
diff --git a/src/components/sectionList/listView/useModelListView.tsx b/src/components/sectionList/listView/useModelListView.tsx
index 391014fc..6f89f414 100644
--- a/src/components/sectionList/listView/useModelListView.tsx
+++ b/src/components/sectionList/listView/useModelListView.tsx
@@ -139,10 +139,17 @@ export const useModelListView = () => {
         console.error(query.error)
     }
 
-    const selectedView = query.data || getDefaultViewForSection(section.name)
-
-    const columns = selectedView.columns
-    const filters = selectedView.filters
+    const defaultView = getDefaultViewForSection(section.name)
+    const selectedView = query.data || defaultView
+
+    const columns =
+        selectedView.columns.length < 1
+            ? defaultView.columns
+            : selectedView.columns
+    const filters =
+        selectedView.filters.length < 1
+            ? defaultView.filters
+            : selectedView.filters
 
     return { view: selectedView, columns, filters, query }
 }