Merge pull request #233 from zimmerman-team/feat/DX-1615

feat:DX-1615; implement 404 logic
zimmerman-team · Sep 12, 2024 · 8927e28 · 8927e28
2 parents 3a80e59 + 719db91
commit 8927e28
Show file tree

Hide file tree

Showing 9 changed files with 284 additions and 150 deletions.
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}`,
+};
diff --git a/src/app/modules/chart-module/index.tsx b/src/app/modules/chart-module/index.tsx
@@ -23,7 +23,7 @@ import {
 import { PageLoader } from "app/modules/common/page-loader";
 import { useChartsRawData } from "app/hooks/useChartsRawData";
 import { NoMatchPage } from "app/modules/common/no-match-page";
-import ChartModuleDataView from "app/modules/chart-module/routes/data";
+import ChartModuleDataView from "app/modules/chart-module/routes/select-data";
 import { ChartSubheaderToolbar } from "./components/chartSubheaderToolbar";
 import ChartBuilderMapping from "app/modules/chart-module/routes/mapping";
 import ChartBuilderFilters from "app/modules/chart-module/routes/filters";
@@ -38,6 +38,8 @@ import {
   routeToConfig,
   ChartRenderedItem,
   defaultChartOptions,
+  chartViews,
+  chartPaths,
 } from "app/modules/chart-module/data";
 import { NotAuthorizedMessageModule } from "app/modules/common/not-authorized-message";
 import { isEmpty } from "lodash";
@@ -64,6 +66,7 @@ export default function ChartModule() {
   const token = useStoreState((state) => state.AuthToken.value);
   const history = useHistory();
   const { page, view } = useParams<{ page: string; view?: string }>();
+  const isValidView = Object.values(chartViews).find((v) => v === view);
   const [chartFromAPI, setChartFromAPI] =
     React.useState<ChartRenderedItem | null>(null);
   const [visualOptions, setVisualOptions] = useSessionStorage<any>(
@@ -74,7 +77,7 @@ export default function ChartModule() {
   const setPlanDialog = useSetRecoilState(planDialogAtom);
 
   const [rawViz, setRawViz] = React.useState<any>(null);
-  const [toolboxOpen, setToolboxOpen] = React.useState(Boolean(view));
+  const [toolboxOpen, setToolboxOpen] = React.useState(Boolean(isValidView));
   const [savedChanges, setSavedChanges] = React.useState<boolean>(false);
 
   const [chartName, setChartName] = React.useState("Untitled Chart");
@@ -600,7 +603,7 @@ export default function ChartModule() {
                   ref={ref}
                 >
                   <Switch>
-                    <Route path="/chart/:page/customize">
+                    <Route exact path={chartPaths.customize}>
                       <ChartBuilderCustomize
                         loading={loading}
                         dimensions={dimensions}
@@ -620,7 +623,7 @@ export default function ChartModule() {
                       />
                     </Route>
 
-                    <Route path="/chart/:page/filters">
+                    <Route exact path={chartPaths.filters}>
                       <ChartBuilderFilters
                         loading={loading}
                         renderedChart={content}
@@ -638,7 +641,7 @@ export default function ChartModule() {
                         chartErrorMessage={chartErrorMessage}
                       />
                     </Route>
-                    <Route path="/chart/:page/mapping">
+                    <Route exact path={chartPaths.mapping}>
                       <ChartBuilderMapping
                         loading={loading}
                         visualOptions={visualOptions}
@@ -656,7 +659,7 @@ export default function ChartModule() {
                         chartErrorMessage={chartErrorMessage}
                       />
                     </Route>
-                    <Route path="/chart/:page/chart-type">
+                    <Route exact path={chartPaths.chartType}>
                       <ChartBuilderChartType
                         loading={loading}
                         loadDataset={loadDataset}
@@ -666,7 +669,7 @@ export default function ChartModule() {
                         setVisualOptionsOnChange={setVisualOptionsOnChange}
                       />
                     </Route>
-                    <Route path="/chart/:page/preview-data">
+                    <Route exact path={chartPaths.previewData}>
                       <ChartBuilderPreview
                         loading={loading}
                         data={sampleData}
@@ -679,14 +682,14 @@ export default function ChartModule() {
                         chartErrorMessage={chartErrorMessage}
                       />
                     </Route>
-                    <Route path="/chart/:page/data">
+                    <Route exact path={chartPaths.data}>
                       <ChartModuleDataView
                         loadDataset={loadDataset}
                         toolboxOpen={toolboxOpen}
                         setChartFromAPI={setChartFromAPI}
                       />
                     </Route>
-                    <Route path="/chart/:page/preview">
+                    <Route exact path={chartPaths.preview}>
                       <ChartBuilderPreviewTheme
                         loading={loading || isChartLoading}
                         visualOptions={visualOptions}
@@ -705,7 +708,7 @@ export default function ChartModule() {
                         chartErrorMessage={chartErrorMessage}
                       />
                     </Route>
-                    <Route path="/chart/:page">
+                    <Route exact path={chartPaths.detail}>
                       <ChartBuilderPreviewTheme
                         loading={loading || isChartLoading}
                         visualOptions={visualOptions}

diff --git a/...odules/chart-module/routes/data/index.tsx → ...chart-module/routes/select-data/index.tsx b/...odules/chart-module/routes/data/index.tsx → ...chart-module/routes/select-data/index.tsx
diff --git a/src/app/modules/common/no-match-page/asset/404.svg b/src/app/modules/common/no-match-page/asset/404.svg
diff --git a/src/app/modules/common/no-match-page/asset/bg-ellipse.svg b/src/app/modules/common/no-match-page/asset/bg-ellipse.svg