Fixing error when rendering empty datamap report table (#4590)

ethyca · Feb 5, 2024 · 0ebdd67 · 0ebdd67
1 parent 1ec5c12
commit 0ebdd67
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/clients/admin-ui/cypress/e2e/datamap-report.cy.ts b/clients/admin-ui/cypress/e2e/datamap-report.cy.ts
@@ -74,4 +74,11 @@ describe("Datamap table and spatial view", () => {
       cy.getByTestId("row-0-col-system_pokemon_party").contains(pokemon);
     });
   });
+
+  it("can render empty datamap report", () => {
+    cy.intercept("GET", "/api/v1/plus/datamap/minimal*", {
+      body: { items: [], page: 1, pages: 0, size: 25, total: 0 },
+    }).as("getDatamapMinimalEmpty");
+    cy.getByTestId("datamap-report-heading").should("be.visible");
+  });
 });
diff --git a/clients/admin-ui/src/features/datamap/reporting/DatamapReportTable.tsx b/clients/admin-ui/src/features/datamap/reporting/DatamapReportTable.tsx
@@ -298,7 +298,7 @@ export const DatamapReportTable = () => {
     // Determine custom field keys by
     // 1. If they aren't in our expected, static, columns
     // 2. If they start with one of the custom field prefixes
-    const datamapKeys = datamapReport
+    const datamapKeys = datamapReport?.items?.length
       ? Object.keys(datamapReport.items[0])
       : [];
     const defaultKeys = Object.values(COLUMN_IDS);
@@ -919,8 +919,13 @@ export const DatamapReportTable = () => {
 
   return (
     <Flex flex={1} direction="column" overflow="auto">
-      <Heading mb={8} fontSize="2xl" fontWeight="semibold">
-        Data Map Report
+      <Heading
+        mb={8}
+        fontSize="2xl"
+        fontWeight="semibold"
+        data-testid="datamap-report-heading"
+      >
+        Data map report
       </Heading>
       <DatamapReportFilterModal
         isOpen={isOpen}