feat: external GeoJSON URL layer in DHIS2 Maps (DHIS2-15981)

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-10-23T12:55:26.288Z\n"
-"PO-Revision-Date: 2023-10-23T12:55:26.288Z\n"
+"POT-Creation-Date: 2023-11-07T12:11:11.385Z\n"
+"PO-Revision-Date: 2023-11-07T12:11:11.385Z\n"
 
 msgid "Untitled map, {{date}}"
 msgstr "Untitled map, {{date}}"
@@ -161,6 +161,12 @@ msgstr "Type"
 msgid "Data table is not supported when events are grouped on the server."
 msgstr "Data table is not supported when events are grouped on the server."
 
+msgid "Sort by {{column}}"
+msgstr "Sort by {{column}}"
+
+msgid "Search"
+msgstr "Search"
+
 msgid "Items"
 msgstr "Items"
 
@@ -245,6 +251,9 @@ msgstr "org unit"
 msgid "Earth Engine"
 msgstr "Earth Engine"
 
+msgid "feature"
+msgstr "feature"
+
 msgid "Edit {{name}} layer"
 msgstr "Edit {{name}} layer"
 
@@ -376,6 +385,18 @@ msgstr "Radius in meters"
 msgid "Buffer can't be combined with associated geometry."
 msgstr "Buffer can't be combined with associated geometry."
 
+msgid "Fill color"
+msgstr "Fill color"
+
+msgid "Line/stroke color"
+msgstr "Line/stroke color"
+
+msgid "Line/stroke width"
+msgstr "Line/stroke width"
+
+msgid "Point size"
+msgstr "Point size"
+
 msgid "Labels"
 msgstr "Labels"
 
@@ -469,9 +490,6 @@ msgstr "Display Tracked Entity relationships"
 msgid "Tracked entity style"
 msgstr "Tracked entity style"
 
-msgid "Point size"
-msgstr "Point size"
-
 msgid "Related entity style"
 msgstr "Related entity style"
 
@@ -484,6 +502,9 @@ msgstr "No relationship types were found for tracked entity type {{type}}"
 msgid "Relationship type"
 msgstr "Relationship type"
 
+msgid "Feature profile"
+msgstr "Feature profile"
+
 msgid "Remove filter"
 msgstr "Remove filter"
 
@@ -587,6 +608,9 @@ msgstr "Group"
 msgid "Filters"
 msgstr "Filters"
 
+msgid "Failed to load map layer \"{{layername}}\" with url: {{layerurl}}"
+msgstr "Failed to load map layer \"{{layername}}\" with url: {{layerurl}}"
+
 msgid "Drill up one level"
 msgstr "Drill up one level"
 

package.json

@@ -45,7 +45,7 @@
         "@dhis2/app-service-alerts": "^3.9.4",
         "@dhis2/app-service-datastore": "^1.0.0-beta.3",
         "@dhis2/d2-i18n": "^1.1.1",
-        "@dhis2/maps-gl": "^3.8.5",
+        "@dhis2/maps-gl": "^3.8.6",
         "@dhis2/ui": "^8.13.15",
         "@krakenjs/post-robot": "^11.0.0",
         "@reportportal/agent-js-cypress": "^5.1.4",

src/actions/feature.js

@@ -4,3 +4,12 @@ export const highlightFeature = (payload) => ({
     type: types.FEATURE_HIGHLIGHT,
     payload,
 })
+
+export const setFeatureProfile = (payload) => ({
+    type: types.FEATURE_PROFILE_SET,
+    payload,
+})
+
+export const closeFeatureProfile = () => ({
+    type: types.FEATURE_PROFILE_CLOSE,
+})

src/actions/layerEdit.js

@@ -358,3 +358,9 @@ export const setNoDataColor = (color) => ({
     type: types.LAYER_EDIT_NO_DATA_COLOR_SET,
     payload: color,
 })
+
+// Set feature style
+export const setFeatureStyle = (payload) => ({
+    type: types.LAYER_EDIT_FEATURE_STYLE_SET,
+    payload,
+})

src/components/app/DetailsPanel.js

@@ -2,21 +2,35 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { useSelector } from 'react-redux'
+import FeatureProfile from '../feature/FeatureProfile.js'
 import Interpretations from '../interpretations/Interpretations.js'
 import OrgUnitProfile from '../orgunits/OrgUnitProfile.js'
 import styles from './styles/DetailsPanel.module.css'
 
 const DetailsPanel = ({ interpretationsRenderCount }) => {
     const detailsPanelOpen = useSelector((state) => state.ui.rightPanelOpen)
     const viewOrgUnitProfile = useSelector((state) => state.orgUnitProfile)
+    const viewFeatureProfile = useSelector((state) => !!state.featureProfile)
     const interpretationId = useSelector((state) => state.interpretation?.id)
 
     const getContent = () => {
-        if (interpretationId || (detailsPanelOpen && !viewOrgUnitProfile)) {
+        if (
+            interpretationId ||
+            (detailsPanelOpen && !viewOrgUnitProfile && !viewFeatureProfile)
+        ) {
             return <Interpretations renderCount={interpretationsRenderCount} />
         }
 
-        return detailsPanelOpen ? <OrgUnitProfile /> : null
+        if (detailsPanelOpen) {
+            if (viewOrgUnitProfile) {
+                return <OrgUnitProfile />
+            }
+            if (viewFeatureProfile) {
+                return <FeatureProfile />
+            }
+        }
+
+        return null
     }
 
     return (

src/components/app/FileMenu.js

@@ -97,10 +97,6 @@ const FileMenu = ({ onFileMenuAction }) => {
             defaultBasemapId: defaultBasemap,
         })
 
-        if (config.mapViews) {
-            config.mapViews.forEach((view) => delete view.id)
-        }
-
         await saveMapMutate({
             id: map.id,
             data: config,
@@ -141,10 +137,6 @@ const FileMenu = ({ onFileMenuAction }) => {
 
         delete config.id
 
-        if (config.mapViews) {
-            config.mapViews.forEach((view) => delete view.id)
-        }
-
         const response = await saveAsNewMapMutate({
             data: config,
         })

src/components/app/__tests__/Detailspanel.spec.js

@@ -22,121 +22,113 @@ jest.mock(
         }
 )
 
-describe('DetailsPanel', () => {
-    test('renders InterpretationsPanel when has interpretationId, has orgUnitProfile and panel is open', () => {
-        const store = {
-            interpretation: { id: 'abc123' },
-            orgUnitProfile: 'xyzpdq',
-            ui: { rightPanelOpen: true },
-        }
-
-        const { container } = render(
-            <Provider store={mockStore(store)}>
-                <DetailsPanel interpretationsRenderCount={1} />
-            </Provider>
-        )
-        expect(container).toMatchSnapshot()
-    })
-    test('renders InterpretationsPanel when has interpretationId, has orgUnitProfile and panel is closed', () => {
-        const store = {
-            interpretation: { id: 'abc123' },
-            orgUnitProfile: 'xyzpdq',
-            ui: { rightPanelOpen: false },
+jest.mock(
+    '../../feature/FeatureProfile.js',
+    () =>
+        function MockFeatureProfile() {
+            return <div>Feature Profile</div>
         }
+)
 
-        const { container } = render(
-            <Provider store={mockStore(store)}>
-                <DetailsPanel interpretationsRenderCount={1} />
-            </Provider>
-        )
-        expect(container).toMatchSnapshot()
-    })
-    test('renders InterpretationsPanel when has interpretationId, no orgUnitProfile and panel is open', () => {
-        const store = {
-            interpretation: { id: 'abc123' },
+const interpretation = { id: 'myinterpretation' }
+const orgUnitProfile = 'myorgunit'
+const featureProfile = 'myfeature'
+const uiWithPanelOpen = { rightPanelOpen: true }
+const uiWithPanelClosed = { rightPanelOpen: false }
+
+const testCases = [
+    {
+        store: {
+            interpretation,
+            orgUnitProfile,
+            featureProfile,
+            ui: uiWithPanelOpen,
+        },
+        expected: 'Interpretations',
+    },
+    {
+        store: {
+            interpretation,
+            orgUnitProfile,
+            featureProfile,
+            ui: uiWithPanelClosed,
+        },
+        expected: 'Interpretations',
+    },
+    {
+        store: {
+            interpretation,
             orgUnitProfile: null,
-            ui: { rightPanelOpen: true },
-        }
-
-        const { container } = render(
-            <Provider store={mockStore(store)}>
-                <DetailsPanel interpretationsRenderCount={1} />
-            </Provider>
-        )
-        expect(container).toMatchSnapshot()
-    })
-
-    test('renders InterpretationsPanel when has interpretationId, no orgUnitProfile and panel is closed', () => {
-        const store = {
-            interpretation: { id: 'abc123' },
+            featureProfile: null,
+            ui: uiWithPanelOpen,
+        },
+        expected: 'Interpretations',
+    },
+    {
+        store: {
+            interpretation,
             orgUnitProfile: null,
-            ui: { rightPanelOpen: false },
-        }
-
-        const { container } = render(
-            <Provider store={mockStore(store)}>
-                <DetailsPanel interpretationsRenderCount={1} />
-            </Provider>
-        )
-        expect(container).toMatchSnapshot()
-    })
-
-    test('renders OrgUnitProfile when no interpretationId, has orgUnitProfile and panel is open', () => {
-        const store = {
+            featureProfile: null,
+            ui: uiWithPanelClosed,
+        },
+        expected: 'Interpretations',
+    },
+    {
+        store: {
             interpretation: {},
-            orgUnitProfile: 'xyzpdq',
-            ui: { rightPanelOpen: true },
-        }
-
-        const { container } = render(
-            <Provider store={mockStore(store)}>
-                <DetailsPanel interpretationsRenderCount={1} />
-            </Provider>
-        )
-        expect(container).toMatchSnapshot()
-    })
-
-    test('renders null when no interpretationId, has orgUnitProfile, and panel closed', () => {
-        const store = {
+            orgUnitProfile: null,
+            featureProfile: null,
+            ui: uiWithPanelOpen,
+        },
+        expected: 'Interpretations',
+    },
+    {
+        store: {
             interpretation: {},
-            orgUnitProfile: 'xyzpdq',
-            ui: { rightPanelOpen: false },
-        }
-
-        const { container } = render(
-            <Provider store={mockStore(store)}>
-                <DetailsPanel interpretationsRenderCount={1} />
-            </Provider>
-        )
-        expect(container).toMatchSnapshot()
-    })
-    test('renders InterpretationsPanel when no interpretationId, no orgUnitProfile and panel open', () => {
-        const store = {
+            orgUnitProfile,
+            featureProfile,
+            ui: uiWithPanelOpen,
+        },
+        expected: 'OrgUnitProfile',
+    },
+    {
+        store: {
             interpretation: {},
             orgUnitProfile: null,
-            ui: { rightPanelOpen: true },
-        }
-
-        const { container } = render(
-            <Provider store={mockStore(store)}>
-                <DetailsPanel interpretationsRenderCount={1} />
-            </Provider>
-        )
-        expect(container).toMatchSnapshot()
-    })
-
-    test('renders null when no interpretationId, no orgUnitProfile, and panel closed', () => {
-        const store = {
+            featureProfile,
+            ui: uiWithPanelOpen,
+        },
+        expected: 'FeatureProfile',
+    },
+    {
+        store: {
+            interpretation: {},
+            orgUnitProfile,
+            featureProfile: null,
+            ui: uiWithPanelClosed,
+        },
+        expected: 'null',
+    },
+    {
+        store: {
             interpretation: {},
             orgUnitProfile: null,
-            ui: { rightPanelOpen: false },
-        }
+            featureProfile: null,
+            ui: uiWithPanelClosed,
+        },
+        expected: 'null',
+    },
+]
 
-        const { container } = render(
-            <Provider store={mockStore(store)}>
-                <DetailsPanel interpretationsRenderCount={1} />
-            </Provider>
-        )
-        expect(container).toMatchSnapshot()
+describe('DetailsPanel', () => {
+    testCases.forEach(({ store, expected }) => {
+        test(`renders ${expected} when interpretation=${store.interpretation.id}, orgUnitProfile=${store.orgUnitProfile}, featureProfile=${store.featureProfile} and panelOpen=${store.ui.rightPanelOpen}`, () => {
+            const { container } = render(
+                <Provider store={mockStore(store)}>
+                    <DetailsPanel />
+                </Provider>
+            )
+            expect(container).toMatchSnapshot()
+        })
     })
 })