fix: org unit filter dialog crash (DHIS2-13816)

src/AppWrapper.js

@@ -1,3 +1,4 @@
+import { CachedDataQueryProvider } from '@dhis2/analytics'
 import { useDataEngine } from '@dhis2/app-runtime'
 import { D2Shim } from '@dhis2/app-runtime-adapter-d2'
 import React from 'react'
@@ -30,28 +31,48 @@ if (authorization) {
     d2Config.headers = { Authorization: authorization }
 }
 
+const query = {
+    rootOrgUnits: {
+        resource: 'organisationUnits',
+        params: {
+            fields: 'id,displayName,name',
+            userDataViewFallback: true,
+            paging: false,
+        },
+    },
+}
+
+const providerDataTransformation = ({ rootOrgUnits }) => ({
+    rootOrgUnits: rootOrgUnits.organisationUnits,
+})
+
 const AppWrapper = () => {
     const dataEngine = useDataEngine()
 
     return (
         <ReduxProvider store={configureStore(dataEngine)}>
-            <D2Shim d2Config={d2Config} i18nRoot="./i18n">
-                {({ d2 }) => {
-                    if (!d2) {
-                        // TODO: Handle errors in d2 initialization
-                        return null
-                    }
-                    return (
-                        <SystemSettingsProvider>
-                            <UserSettingsProvider>
-                                <WindowDimensionsProvider>
-                                    <App />
-                                </WindowDimensionsProvider>
-                            </UserSettingsProvider>
-                        </SystemSettingsProvider>
-                    )
-                }}
-            </D2Shim>
+            <CachedDataQueryProvider
+                query={query}
+                dataTransformation={providerDataTransformation}
+            >
+                <D2Shim d2Config={d2Config} i18nRoot="./i18n">
+                    {({ d2 }) => {
+                        if (!d2) {
+                            // TODO: Handle errors in d2 initialization
+                            return null
+                        }
+                        return (
+                            <SystemSettingsProvider>
+                                <UserSettingsProvider>
+                                    <WindowDimensionsProvider>
+                                        <App />
+                                    </WindowDimensionsProvider>
+                                </UserSettingsProvider>
+                            </SystemSettingsProvider>
+                        )
+                    }}
+                </D2Shim>
+            </CachedDataQueryProvider>
         </ReduxProvider>
     )
 }

src/__tests__/AppWrapper.spec.js

@@ -2,6 +2,10 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import AppWrapper from '../AppWrapper.js'
 
+jest.mock('@dhis2/analytics', () => ({
+     ...jest.requireActual('@dhis2/analytics'),
+     CachedDataQueryProvider: () => <div className="CachedDataQueryProvider" />
+}))
 jest.mock('@dhis2/app-runtime-adapter-d2', () => {
     return {
         D2Shim: ({ children }) => children({ d2: {} }),

src/pages/view/TitleBar/FilterDialog.js

@@ -13,8 +13,8 @@ import {
     BIWEEKLY,
     MONTHLY,
     BIMONTHLY,
+    useCachedDataQuery,
 } from '@dhis2/analytics'
-import { useD2 } from '@dhis2/app-runtime-adapter-d2'
 import i18n from '@dhis2/d2-i18n'
 import {
     Button,
@@ -43,32 +43,14 @@ const FilterDialog = ({
     onClose,
 }) => {
     const [filters, setFilters] = useState(initiallySelectedItems)
-    const { d2 } = useD2()
     const { userSettings } = useUserSettings()
     const { systemSettings } = useSystemSettings()
+    const { rootOrgUnits } = useCachedDataQuery()
 
     const onSelectItems = ({ dimensionId, items }) => {
         setFilters({ [dimensionId]: items })
     }
 
-    const onDeselectItems = ({ dimensionId, itemIdsToRemove }) => {
-        const oldList = filters[dimensionId] || []
-        const newList = oldList.filter(
-            (item) => !itemIdsToRemove.includes(item.id)
-        )
-
-        setFilters({ ...filters, [dimensionId]: newList })
-    }
-
-    const onReorderItems = ({ dimensionId, itemIds }) => {
-        const oldList = filters[dimensionId] || []
-        const reorderedList = itemIds.map((id) =>
-            oldList.find((item) => item.id === id)
-        )
-
-        setFilters({ ...filters, [dimensionId]: reorderedList })
-    }
-
     const saveFilter = () => {
         const id = dimension.id
         const filterItems = filters[id]
@@ -106,21 +88,14 @@ const FilterDialog = ({
     }
 
     const renderDialogContent = () => {
-        const commonProps = {
-            d2,
-            onSelect: onSelectItems,
-            onDeselect: onDeselectItems,
-            onReorder: onReorderItems,
-        }
-
         const selectedItems = filters[dimension.id] || []
 
         switch (dimension.id) {
             case DIMENSION_ID_PERIOD: {
                 return (
                     <PeriodDimension
                         selectedPeriods={selectedItems}
-                        onSelect={commonProps.onSelect}
+                        onSelect={onSelectItems}
                         excludedPeriodTypes={getExcludedPeriodTypes(
                             systemSettings
                         )}
@@ -130,19 +105,19 @@ const FilterDialog = ({
             case DIMENSION_ID_ORGUNIT:
                 return (
                     <OrgUnitDimension
-                        displayNameProperty={
-                            userSettings.keyAnalysisDisplayProperty
-                        }
-                        ouItems={selectedItems}
-                        {...commonProps}
+                        roots={rootOrgUnits.map(
+                            (rootOrgUnit) => rootOrgUnit.id
+                        )}
+                        selected={selectedItems}
+                        onSelect={onSelectItems}
                     />
                 )
             default:
                 return (
                     <DynamicDimension
                         selectedItems={selectedItems}
                         dimensionId={dimension.id}
-                        onSelect={commonProps.onSelect}
+                        onSelect={onSelectItems}
                         dimensionTitle={dimension.name}
                         displayNameProp={
                             userSettings.keyAnalysisDisplayProperty