feat: add no dashboards found message

dhis2 · Jan 3, 2025 · 0741950 · 0741950
1 parent 8c8a229
commit 0741950
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/src/components/DashboardsBar/Content.js b/src/components/DashboardsBar/Content.js
@@ -39,8 +39,19 @@ const Content = ({
         }
     }
 
-    const getChips = () =>
-        getFilteredDashboards(dashboards, filterText).map((dashboard) => (
+    const getChips = () => {
+        const filteredList = getFilteredDashboards(dashboards, filterText)
+
+        if (filteredList.length === 0) {
+            return (
+                <span className={classes.noDashboardsMessage}>
+                    {i18n.t('No dashboards found for "{{filterText}}"', {
+                        filterText,
+                    })}
+                </span>
+            )
+        }
+        return filteredList.map((dashboard) => (
             <Chip
                 key={dashboard.id}
                 label={dashboard.displayName}
@@ -50,6 +61,7 @@ const Content = ({
                 onClick={onChipClicked}
             />
         ))
+    }
 
     const getControlsSmall = () => (
         <div className={classes.controlsSmall}>

diff --git a/src/components/DashboardsBar/styles/Content.module.css b/src/components/DashboardsBar/styles/Content.module.css
@@ -28,6 +28,17 @@
     gap: 6px;
 }
 
+.noDashboardsMessage {
+    padding-left: 6px;
+    color: #4A5768;
+    font-size: 12px;
+    display: inline-flex;
+    -webkit-box-align: center;
+    align-items: center;
+    height: 32px;
+    line-height: 16px;
+    user-select: none;
+}
 @media only screen and (max-width: 480px) {
     .newLink {
         display: none;