fix: show no data message when geojson feature has no data (#3145)

Geojson layers may or may not have data associated with them.
Show an appropriate message if there is no data.

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-03-05T16:53:36.408Z\n"
-"PO-Revision-Date: 2024-03-05T16:53:36.408Z\n"
+"POT-Creation-Date: 2024-03-07T13:44:00.589Z\n"
+"PO-Revision-Date: 2024-03-07T13:44:00.589Z\n"
 
 msgid "Untitled map, {{date}}"
 msgstr "Untitled map, {{date}}"
@@ -521,6 +521,9 @@ msgstr "No relationship types were found for tracked entity type {{type}}"
 msgid "Relationship type"
 msgstr "Relationship type"
 
+msgid "No data to show for this feature."
+msgstr "No data to show for this feature."
+
 msgid "Feature profile"
 msgstr "Feature profile"
 
@@ -1341,6 +1344,9 @@ msgstr "Layer authorization is no longer valid"
 msgid "Url to geojson was not found"
 msgstr "Url to geojson was not found"
 
+msgid "Unknown error"
+msgstr "Unknown error"
+
 msgid "Organisation units"
 msgstr "Organisation units"
 

src/components/datatable/styles/DataTable.module.css

@@ -54,6 +54,6 @@ td.lightText {
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
-    color: #333;
+    color: var(--colors-grey600);
     font-style: italic;
 }

src/components/feature/FeatureProfile.js

@@ -1,11 +1,43 @@
 import i18n from '@dhis2/d2-i18n'
 import { IconCross24 } from '@dhis2/ui'
+import PropTypes from 'prop-types'
 import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { closeFeatureProfile } from '../../actions/feature.js'
 import Drawer from '../core/Drawer.js'
 import styles from './styles/FeatureProfile.module.css'
 
+const DrawerContent = ({ data }) => {
+    if (Object.keys(data).length === 0) {
+        return (
+            <div className={styles.noData}>
+                {i18n.t('No data to show for this feature.')}
+            </div>
+        )
+    }
+
+    return (
+        <div className={styles.featureData}>
+            <div className={styles.dataTable}>
+                <table>
+                    <tbody>
+                        {Object.keys(data).map((key) => (
+                            <tr key={key}>
+                                <th>{key}</th>
+                                <td>{data[key]}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    )
+}
+
+DrawerContent.propTypes = {
+    data: PropTypes.object.isRequired,
+}
+
 const FeatureProfile = () => {
     const featureProfile = useSelector((state) => state.featureProfile)
     const dispatch = useDispatch()
@@ -24,20 +56,7 @@ const FeatureProfile = () => {
                 </span>
             </div>
             <div className={styles.content}>
-                <div className={styles.featureData}>
-                    <div className={styles.dataTable}>
-                        <table>
-                            <tbody>
-                                {Object.keys(data).map((key) => (
-                                    <tr key={key}>
-                                        <th>{key}</th>
-                                        <td>{data[key]}</td>
-                                    </tr>
-                                ))}
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
+                <DrawerContent data={data} />
             </div>
         </Drawer>
     )

src/components/feature/styles/FeatureProfile.module.css

@@ -57,3 +57,10 @@
     padding: 10px 0 9px;
     white-space: nowrap;
 }
+
+.noData {
+    text-align: center;
+    padding: var(--spacers-dp16);
+    color: var(--colors-grey600);
+    font-style: italic;
+}