fix(ui): add empty list indication to dashboard widgets (#866)

openclarity · Oct 31, 2023 · eb59863 · eb59863
1 parent dbce9a3
commit eb59863
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/ui/src/layout/Dashboard/FindingsTabsWidget/findings-tabs-widget.scss b/ui/src/layout/Dashboard/FindingsTabsWidget/findings-tabs-widget.scss
@@ -29,6 +29,10 @@
                 padding: 12px 0 5px 0;
                 overflow-wrap: anywhere;
             }
+
+            .empty-results-display-wrapper {
+                margin: 20px 0px;
+            }
         }
     }
-}
+}
diff --git a/ui/src/layout/Dashboard/FindingsTabsWidget/index.js b/ui/src/layout/Dashboard/FindingsTabsWidget/index.js
@@ -25,17 +25,19 @@ const WidgetContent = ({data=[], getHeaderItems, getBodyItems, selectedId}) => {
             </thead>
             <tbody>
                 {
-                    displayData.map((item, index) => {
-                        return (
-                            <tr key={index}>
-                                {getBodyItems(selectedId).map(({dataKey, customDisplay: CustomDisplay}, index, items) => (
-                                    <td key={index} style={items.length - 1 === index ? {textAlign: "right"} : {}}>
-                                        {!!CustomDisplay ? <CustomDisplay {...item} /> : get(item, dataKey)}
-                                    </td>
-                                ))}
-                            </tr>
-                        )
-                    })
+                    displayData.length > 0 ?
+                        displayData.map((item, index) => {
+                            return (
+                                <tr key={index}>
+                                    {getBodyItems(selectedId).map(({dataKey, customDisplay: CustomDisplay}, index, items) => (
+                                        <td key={index} style={items.length - 1 === index ? {textAlign: "right"} : {}}>
+                                            {!!CustomDisplay ? <CustomDisplay {...item} /> : get(item, dataKey)}
+                                        </td>
+                                    ))}
+                                </tr>
+                            )
+                        })
+                        : <div className="empty-results-display-wrapper">No results available</div>
                 }
             </tbody>
         </table>