Merge pull request #239 from zimmerman-team/feat/DX-1710

Feat/dx 1710
zimmerman-team · Oct 1, 2024 · 7f49112 · 7f49112
2 parents 4359566 + 13319c7
commit 7f49112
Show file tree

Hide file tree

Showing 47 changed files with 910 additions and 539 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();
   });
 
@@ -43,11 +47,9 @@ describe("Testing reports on DX", () => {
     cy.get('[data-cy="report-sub-header-title-input"]').type(reportTestName);
 
     cy.get('[data-cy="report-header-block"]').within(() => {
-      cy.get('[data-cy="report-header-block-title-input"]').type(
-        reportTestName
-      );
-      cy.get('[data-cy="rich-text-editor-container"]').click();
-      cy.get('[data-testid="rich-text-editor"]').type(
+      cy.get('[data-testid="heading-rich-text-editor"]').type(reportTestName);
+      cy.get('[data-cy="description-rich-text-editor-container"]').click();
+      cy.get('[data-testid="description-rich-text-editor"]').type(
         "This is a report on football players"
       );
     });
@@ -75,7 +77,7 @@ describe("Testing reports on DX", () => {
     cy.get('[data-cy="row-frame-item-drop-zone-0-0"]').drop();
 
     cy.get("[data-cy=row-frame-0]").within(() => {
-      cy.get('[data-testid="rich-text-editor"]')
+      cy.get('[data-testid="report-rich-text-editor"]')
         .first()
         .type(
           "This is a report on football players who played in a match last year"
@@ -176,8 +178,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");
@@ -213,9 +219,9 @@ describe("Edit, duplicate and delete report", () => {
     cy.get('[data-cy="report-sub-header-title-input"]').type(" - Edited");
 
     cy.get('[data-cy="report-header-block"]').within(() => {
-      cy.get('[data-cy="report-header-block-title-input"]').type(" - Edited");
-      cy.get('[data-cy="rich-text-editor-container"]').click();
-      cy.get('[data-testid="rich-text-editor"]').type(" - Edited");
+      cy.get('[data-testid="heading-rich-text-editor"]').type(" - Edited");
+      cy.get('[data-cy="description-rich-text-editor-container"]').click();
+      cy.get('[data-testid="description-rich-text-editor"]').type(" - Edited");
     });
 
     cy.get('[data-cy="save-report-button"]').click();

diff --git a/src/app/components/Dialogs/EmbedChartDialog/index.tsx b/src/app/components/Dialogs/EmbedChartDialog/index.tsx
@@ -7,10 +7,9 @@ import IconButton from "@material-ui/core/IconButton";
 import Snackbar from "@material-ui/core/Snackbar";
 import get from "lodash/get";
 import { useLoadDatasetDetails } from "app/modules/report-module/components/chart-wrapper/useLoadDatasetDetailsAPI";
-import { useAuth0 } from "@auth0/auth0-react";
 import ChartContainer from "./chartContainer";
 import { copyToClipboard } from "app/utils/copyToClipboard";
-import { useStoreState } from "app/state/store/hooks";
+import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import LinkOptions from "./linkOptions";
 import BasicSwitch from "app/components/Switch/BasicSwitch";
 import EmbedOptions from "./embedOptions";
@@ -24,8 +23,13 @@ export default function EmbedChartDialog(props: {
 }) {
   const containerRef = React.useRef<HTMLDivElement>(null);
   const token = useStoreState((state) => state.AuthToken.value);
+  const fetchUserProfile = useStoreActions(
+    (state) => state.user.UserProfile.fetch
+  );
+  const userProfile = useStoreState(
+    (state) => state.user.UserProfile.crudData
+  ) as { username: string };
   const classes = useStyles();
-  const { user } = useAuth0();
   const { datasetDetails } = useLoadDatasetDetails(
     props.datasetId!,
     token ?? undefined
@@ -38,7 +42,6 @@ export default function EmbedChartDialog(props: {
     React.useState<string>("embed-code");
 
   const {
-    loading,
     notFound,
     chartErrorMessage,
     dataError,
@@ -49,6 +52,11 @@ export default function EmbedChartDialog(props: {
     setNotFound,
   } = useRenderChartFromAPI(token, props.chartId);
 
+  React.useEffect(() => {
+    if (datasetDetails.owner) {
+      fetchUserProfile({ getId: datasetDetails.owner });
+    }
+  }, [datasetDetails]);
   let newVisualOptions = visualOptions;
 
   const displayModes = [
@@ -226,7 +234,7 @@ export default function EmbedChartDialog(props: {
             >
               <p>
                 <span>Author:</span>
-                <span>{user?.given_name || "NOT SPECIFIED"}</span>
+                <span>{userProfile?.username}</span>
               </p>
               <div
                 css={`

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/modules/chart-module/components/chartSubheaderToolbar/data.ts b/src/app/modules/chart-module/components/chartSubheaderToolbar/data.ts
@@ -2,7 +2,7 @@ import { IFramesArray } from "app/modules/report-module/views/create/data";
 import { IHeaderDetails } from "app/modules/report-module/components/right-panel/data";
 import { ToolbarPluginsType } from "app/modules/report-module/components/reportSubHeaderToolbar/staticToolbar";
 
-export interface SubheaderToolbarProps {
+export interface ChartSubheaderToolbarProps {
   name: string;
   isAiSwitchActive: boolean;
   visualOptions?: any;
@@ -38,8 +38,8 @@ export interface ReportSubheaderToolbarProps {
   setName: (name: string) => void;
   isSaveEnabled?: boolean;
   rawViz?: any;
-  setHasSubHeaderTitleFocused?: (value: boolean) => void;
-  setHasSubHeaderTitleBlurred?: (value: boolean) => void;
+  setHasReportNameFocused?: (value: boolean) => void;
+  setHasReportNameBlurred?: (value: boolean) => void;
   plugins: ToolbarPluginsType;
   headerDetails: IHeaderDetails;
   framesArray: IFramesArray[];

diff --git a/src/app/modules/chart-module/components/chartSubheaderToolbar/index.tsx b/src/app/modules/chart-module/components/chartSubheaderToolbar/index.tsx
@@ -26,7 +26,7 @@ import { styles } from "app/modules/chart-module/components/chartSubheaderToolba
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import DeleteChartDialog from "app/components/Dialogs/deleteChartDialog";
 import { ChartAPIModel, emptyChartAPI } from "app/modules/chart-module/data";
-import { SubheaderToolbarProps } from "app/modules/chart-module/components/chartSubheaderToolbar/data";
+import { ChartSubheaderToolbarProps } from "app/modules/chart-module/components/chartSubheaderToolbar/data";
 import { ExportChartButton } from "app/modules/chart-module/components/chartSubheaderToolbar/exportButton";
 import { ISnackbarState } from "app/modules/dataset-module/routes/upload-module/upload-steps/previewFragment";
 import { chartFromReportAtom, planDialogAtom } from "app/state/recoil/atoms";
@@ -41,7 +41,9 @@ import useMediaQuery from "@material-ui/core/useMediaQuery";
 import DuplicateMessage from "app/modules/common/mobile-duplicate-message";
 import { InfoSnackbar } from "app/modules/report-module/components/reportSubHeaderToolbar/infosnackbar";
 
-export function ChartSubheaderToolbar(props: Readonly<SubheaderToolbarProps>) {
+export function ChartSubheaderToolbar(
+  props: Readonly<ChartSubheaderToolbarProps>
+) {
   const classes = useStyles();
   const history = useHistory();
   const isMobile = useMediaQuery("(max-width: 599px)");

diff --git a/src/app/modules/chart-module/components/toolbox/index.tsx b/src/app/modules/chart-module/components/toolbox/index.tsx
@@ -1,6 +1,5 @@
 /* third-party */
 import React from "react";
-import { useRecoilState } from "recoil";
 import { useAuth0 } from "@auth0/auth0-react";
 import { useHistory, useParams } from "react-router-dom";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
@@ -15,12 +14,17 @@ import {
 } from "app/modules/chart-module/components/toolbox/data";
 import { ChartToolBoxSteps } from "app/modules/chart-module/components/toolbox/steps";
 import { TriangleXSIcon } from "app/assets/icons/TriangleXS";
-import { emptyChartAPI, ChartAPIModel } from "app/modules/chart-module/data";
+import {
+  emptyChartAPI,
+  ChartAPIModel,
+  chartViews,
+} from "app/modules/chart-module/data";
 import ToolboxNav from "app/modules/chart-module/components/toolbox/steps/navbar";
 import { InfoSnackbar } from "../chartSubheaderToolbar/infoSnackbar";
 
 export function ChartModuleToolBox(props: Readonly<ChartToolBoxProps>) {
   const { page, view } = useParams<{ page: string; view?: string }>();
+  const isValidView = Object.values(chartViews).find((v) => v === view);
   const history = useHistory();
   const { isAuthenticated, user } = useAuth0();
   const isMobile = useMediaQuery("(max-width: 767px)");
@@ -114,7 +118,11 @@ export function ChartModuleToolBox(props: Readonly<ChartToolBoxProps>) {
   };
 
   React.useEffect(() => {
-    if (location.pathname === `/chart/${page}` || view == "preview") {
+    if (
+      location.pathname === `/chart/${page}` ||
+      view == "preview" ||
+      !isValidView
+    ) {
       setDisplayToolbar("none");
       props.setToolboxOpen(false);
     } else {

diff --git a/src/app/modules/chart-module/data.ts b/src/app/modules/chart-module/data.ts
@@ -490,3 +490,23 @@ export const emptyChartAPI: ChartAPIModel = {
   isMappingValid: false,
   isAIAssisted: false,
 };
+export const chartViews = {
+  customize: "customize",
+  preview: "preview",
+  previewData: "preview-data",
+  filters: "filters",
+  data: "data",
+  mapping: "mapping",
+  chartType: "chart-type",
+};
+
+export const chartPaths = {
+  detail: "/chart/:page",
+  customize: `/chart/:page/${chartViews.customize}`,
+  preview: `/chart/:page/${chartViews.preview}`,
+  previewData: `/chart/:page/${chartViews.previewData}`,
+  filters: `/chart/:page/${chartViews.filters}`,
+  data: `/chart/:page/${chartViews.data}`,
+  mapping: `/chart/:page/${chartViews.mapping}`,
+  chartType: `/chart/:page/${chartViews.chartType}`,
+};