Merge pull request #227 from zimmerman-team/feat/DX-1708

feat: fill incomplete table with empty cells
zimmerman-team · Sep 12, 2024 · 3a80e59 · 3a80e59
2 parents 36ce2e6 + 564f781
commit 3a80e59
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 10 deletions.
diff --git a/cypress/e2e/1-dx/2-datasets.cy.ts b/cypress/e2e/1-dx/2-datasets.cy.ts
@@ -24,11 +24,16 @@ describe("Testing connecting data on DX", () => {
     cy.restoreLocalStorageCache();
     // cy.setGoogleAccessToken();
 
+    cy.intercept("GET", `${apiUrl}/users/plan-data`).as("planData");
+
     cy.visit("/");
 
+    cy.wait("@planData");
+
     cy.get('[data-cy="cookie-btn"]').click();
     cy.intercept(`${apiUrl}/external-sources/search?q=*`).as("getDefaultData");
     cy.get('[data-cy="home-connect-dataset-button"]').click();
+    cy.wait("@planData");
   });
 
   it("Can filter results by source in the federated search", () => {
@@ -212,7 +217,11 @@ describe("Edit, Delete and Duplicate Dataset", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorageCache();
+    cy.intercept("GET", `${apiUrl}/users/plan-data`).as("planData");
+
     cy.visit("/");
+
+    cy.wait("@planData");
     cy.get('[data-cy="cookie-btn"]').click();
 
     cy.intercept("GET", `${apiUrl}/datasets?filter=*`).as("fetchDatasets");

diff --git a/cypress/e2e/1-dx/3-charts.cy.ts b/cypress/e2e/1-dx/3-charts.cy.ts
@@ -21,8 +21,12 @@ describe("Testing create chart on DX", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorageCache();
+    cy.intercept("GET", `${apiUrl}/users/plan-data`).as("planData");
+
     cy.visit("/");
 
+    cy.wait("@planData");
+
     cy.get('[data-cy="cookie-btn"]').click();
 
     cy.intercept("GET", `${apiUrl}/datasets?**`).as("getDatasets");
@@ -186,8 +190,12 @@ describe("Testing Ai chart creation", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorageCache();
+    cy.intercept("GET", `${apiUrl}/users/plan-data`).as("planData");
+
     cy.visit("/");
 
+    cy.wait("@planData");
+
     cy.get('[data-cy="cookie-btn"]').click();
     cy.intercept("GET", `${apiUrl}/datasets?**`).as("getDatasets");
     cy.get('[data-cy="home-create-chart-button"]').click();
@@ -271,8 +279,12 @@ describe("Edit, duplicate and delete chart", () => {
   const apiUrl = Cypress.env("api_url");
   beforeEach(() => {
     cy.restoreLocalStorageCache();
+    cy.intercept("GET", `${apiUrl}/users/plan-data`).as("planData");
+
     cy.visit("/");
 
+    cy.wait("@planData");
+
     cy.get('[data-cy="cookie-btn"]').click();
 
     cy.intercept("GET", `${apiUrl}/charts*`).as("fetchCharts");

diff --git a/cypress/e2e/1-dx/4-reports.cy.ts b/cypress/e2e/1-dx/4-reports.cy.ts
@@ -21,8 +21,12 @@ describe("Testing reports on DX", () => {
     cy.restoreLocalStorageCache();
 
     // Navigating to dx home page
+    cy.intercept("GET", `${apiUrl}/users/plan-data`).as("planData");
+
     cy.visit("/");
 
+    cy.wait("@planData");
+
     cy.get('[data-cy="cookie-btn"]').click();
   });
 
@@ -176,8 +180,12 @@ describe("Edit, duplicate and delete report", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorageCache();
+    cy.intercept("GET", `${apiUrl}/users/plan-data`).as("planData");
+
     cy.visit("/");
 
+    cy.wait("@planData");
+
     cy.get('[data-cy="cookie-btn"]').click();
 
     cy.intercept(`${apiUrl}/reports?filter=*`).as("fetchReports");

diff --git a/src/app/components/Table/Preview-table/index.tsx b/src/app/components/Table/Preview-table/index.tsx
@@ -31,9 +31,24 @@ interface PreviewTableProps {
   observerTarget: React.MutableRefObject<null>;
   loading: boolean;
 }
-
+type IdatasStats = {
+  name: string;
+  type: "bar" | "percentage" | "unique";
+  data: { name: string; value: number }[];
+};
 export default function PreviewTable(props: PreviewTableProps) {
   const [toolboxDisplay, setToolboxDisplay] = React.useState(false);
+  let columns: string[] = [];
+  let dataStats: IdatasStats[] = [];
+  if (props.columns.length > 0 && props.dataStats.length > 0) {
+    if (props.columns.length < 5) {
+      columns = [...props.columns, ...Array(5).fill("")];
+      dataStats = [...props.dataStats, ...Array(5).fill("")];
+    } else {
+      columns = [...props.columns, ...Array(2).fill("")];
+      dataStats = [...props.dataStats, ...Array(2).fill("")];
+    }
+  }
 
   return (
     <>
@@ -88,7 +103,7 @@ export default function PreviewTable(props: PreviewTableProps) {
                 padding: 0rem 0.4rem;
               `}
             >
-              {props.columns.map((val, index) => {
+              {columns.map((val, index) => {
                 return (
                   <TableCell key={val}>
                     <div
@@ -98,6 +113,7 @@ export default function PreviewTable(props: PreviewTableProps) {
                         justify-content: space-between;
                         align-items: center;
                         gap: 1rem;
+                        width: ${val ? "auto" : "192px"};
                       `}
                     >
                       <div
@@ -107,9 +123,9 @@ export default function PreviewTable(props: PreviewTableProps) {
                           border-radius: 50%;
                           padding: 3px;
                           justify-content: center;
-                          display: flex;
                           align-items: center;
                           background: #ffffff;
+                          display: ${val ? "flex" : "none"};
                         `}
                       >
                         {props.dataTypes?.[val] === "string" ? "Aa" : "#"}
@@ -127,25 +143,25 @@ export default function PreviewTable(props: PreviewTableProps) {
                       >
                         <b>{val}</b>
                       </p>
-                      <IconButton>
-                        <SortIcon />
-                      </IconButton>
+                      {val && (
+                        <IconButton>
+                          <SortIcon />
+                        </IconButton>
+                      )}
                     </div>
                   </TableCell>
                 );
               })}
             </TableRow>
             <TableRow>
-              {props.dataStats?.map((val) => (
+              {dataStats?.map((val) => (
                 <TableCell
                   key={val.name}
                   css={`
                     color: #000;
                     font-size: 12px;
-                    // cursor: pointer;
                     background: #f4f4f4;
                   `}
-                  // onClick={handleToolBoxDisplay}
                 >
                   {val.name !== "ID" && (
                     <div
@@ -168,7 +184,7 @@ export default function PreviewTable(props: PreviewTableProps) {
                   background: #fff;
                 `}
               >
-                {props.columns.map((val, cellIndex) => (
+                {columns.map((val, cellIndex) => (
                   <TableCell key={val}>
                     <p
                       title={data?.[val] as string}

diff --git a/src/app/utils/setMediaQueryForTest 2.ts b/src/app/utils/setMediaQueryForTest 2.ts
@@ -0,0 +1,20 @@
+import React from "react";
+import mediaQuery from "css-mediaquery";
+
+function createMatchMedia(width: number) {
+  return (query: string) => ({
+    matches: mediaQuery.match(query, {
+      width,
+    }),
+    addListener: () => {},
+    removeListener: () => {},
+    media: "",
+    onchange: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  });
+}
+export function setMediaQueryForTest(width: number) {
+  window.matchMedia = createMatchMedia(width);
+}