Merge pull request #155 from zimmerman-team/feat/DX-1504

feat: DX-1504, DX-1552, DX-1502 Not authorized page view
zimmerman-team · Jun 10, 2024 · 0e184f9 · 0e184f9
2 parents fe0fdde + c1a4636
commit 0e184f9
Show file tree

Hide file tree

Showing 13 changed files with 301 additions and 76 deletions.
diff --git a/src/app/hooks/useChartsRawData.tsx b/src/app/hooks/useChartsRawData.tsx
@@ -140,20 +140,25 @@ export function useChartsRawData(props: {
     props.dimensions,
     mapping
   );
-  async function loadDataset(endpoint: string) {
+  async function loadDataset(id: string) {
     const extraLoader = document.getElementById("extra-loader");
     if (extraLoader) {
       extraLoader.style.display = "block";
     }
     setLoading(true);
     setDataError(false);
     return await axios
-      .get(`${process.env.REACT_APP_API}/${endpoint}`, {
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-      })
+      .get(
+        `${process.env.REACT_APP_API}/chart/sample-data${
+          token ? "" : "/public"
+        }/${id}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      )
       .then((response: AxiosResponse) => {
         if (extraLoader) {
           extraLoader.style.display = "none";

diff --git a/src/app/hooks/useGetDatasetContent.tsx b/src/app/hooks/useGetDatasetContent.tsx
@@ -16,7 +16,9 @@ const useGetDatasetContent = (datasetId: string, pageSize: number = 10) => {
     setLoading(true);
     axios
       .get(
-        `${process.env.REACT_APP_API}/datasets/${datasetId}/data?page=${nextPageToken}&pageSize=${pageSize}`,
+        `${process.env.REACT_APP_API}/datasets${
+          token ? "" : "/public"
+        }/${datasetId}/data?page=${nextPageToken}&pageSize=${pageSize}`,
         {
           headers: {
             "Content-Type": "application/json",

diff --git a/src/app/modules/chart-module/index.tsx b/src/app/modules/chart-module/index.tsx
@@ -159,6 +159,10 @@ export default function ChartModule() {
         401 ||
       get(state.charts.ChartGet.crudData, "error", "") === "Unauthorized"
   );
+
+  const errorChartName = useStoreState((state) =>
+    get(state.charts.ChartGet.crudData, "name", "")
+  );
   const editChart = useStoreActions(
     (actions) => actions.charts.ChartUpdate.patch
   );
@@ -333,7 +337,7 @@ export default function ChartModule() {
       if (page !== "new" && loadedChart?.name.length > 0) {
         setChartName(loadedChart.name);
       }
-      loadDataset(`chart/sample-data/${loadedChart.datasetId}`);
+      loadDataset(loadedChart.datasetId!);
       setSelectedAIChart(loadedChart.isAIAssisted);
       setIsLoadedChartMappingValid(loadedChart.isMappingValid);
       setChartType(loadedChart.vizType);
@@ -479,8 +483,12 @@ export default function ChartModule() {
   if (chartError401 || error401) {
     return (
       <>
-        <div css="width: 100%; height: 100px;" />
-        <NotAuthorizedMessageModule asset="chart" action="view" />
+        <div css="width: 100%; height: 48px;" />
+        <NotAuthorizedMessageModule
+          asset="chart"
+          action="view"
+          name={errorChartName}
+        />
       </>
     );
   }

diff --git a/src/app/modules/chart-module/routes/chart-type/index.tsx b/src/app/modules/chart-module/routes/chart-type/index.tsx
@@ -81,7 +81,7 @@ function ChartBuilderChartType(props: Readonly<ChartBuilderChartTypeProps>) {
     } else if (loadDatasetParamValue) {
       //when landing in chart type step from outside the chart module,
       //load the sample data as data step is skipped
-      props.loadDataset(`chart/sample-data/${datasetId}`);
+      props.loadDataset(datasetId!);
       if (isAiActive) {
         loadChartTypesSuggestions({
           token,

diff --git a/src/app/modules/chart-module/routes/data/index.tsx b/src/app/modules/chart-module/routes/data/index.tsx
@@ -79,7 +79,7 @@ function ChartModuleDataView(
   const handleItemClick = (id: string) => {
     setDataset(id);
     props.setChartFromAPI(null);
-    props.loadDataset(`chart/sample-data/${id}`).then(() => {
+    props.loadDataset(id).then(() => {
       history.push(`/chart/${page}/preview-data`);
     });
   };

diff --git a/src/app/modules/chart-module/routes/preview/index.tsx b/src/app/modules/chart-module/routes/preview/index.tsx
@@ -47,7 +47,7 @@ export function ChartBuilderPreview(props: ChartBuilderPreviewProps) {
     if (datasetId === null && !props.loading && page === "new") {
       history.push(`/chart/${page}/data`);
     } else {
-      props.loadDataset(`chart/sample-data/${datasetId}`);
+      props.loadDataset(datasetId!);
     }
   }, [datasetId]);
 

diff --git a/src/app/modules/common/not-authorized-message/index.tsx b/src/app/modules/common/not-authorized-message/index.tsx
@@ -1,30 +1,139 @@
 import React from "react";
-import { WarningOutlined } from "@material-ui/icons";
+import { ErrorOutlineRounded } from "@material-ui/icons";
+import HomeFooter from "app/modules/home-module/components/Footer";
+import { ReactComponent as GoogleIcon } from "app/modules/onboarding-module/asset/google-img.svg";
+import { ReactComponent as LinkedInIcon } from "app/modules/onboarding-module/asset/linkedIn-img.svg";
+import { Container } from "@material-ui/core";
+import { useAuth0 } from "@auth0/auth0-react";
+import { socialAuth } from "app/utils/socialAuth";
 
 export function NotAuthorizedMessageModule(props: {
-  asset: "chart" | "report";
+  asset: "chart" | "report" | "dataset";
   action: "view" | "edit" | "delete";
+  name?: string;
 }) {
+  const { isAuthenticated } = useAuth0();
   return (
-    <div
-      css={`
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        color: #e75656;
-        font-size: 24px;
-        line-height: 15px;
-        font-family: "GothamNarrow-Bold", sans-serif;
-        text-align: center;
-      `}
-    >
-      <WarningOutlined htmlColor="#e75656" fontSize="large" />
-      <p>
-        You are not authorized to {props.action} this {props.asset}
-      </p>
-    </div>
+    <>
+      <div
+        css={`
+          background-color: #f4f4f4;
+          height: 50px;
+          display: flex;
+          align-items: center;
+        `}
+      >
+        <Container maxWidth="lg">
+          <h1
+            css={`
+              font-size: 24px;
+              margin: 0;
+              font-family: Inter;
+              font-weight: 700;
+              color: #231d2c;
+              max-width: 100%;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              line-height: normal;
+            `}
+          >
+            {props.name}
+          </h1>
+        </Container>
+      </div>
+      <div
+        // 422px is the footer height and 98px is the header height
+        css={`
+          width: 100%;
+          height: calc(100vh - 422px - 98px);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          color: #e75656;
+          text-align: center;
+        `}
+      >
+        <ErrorOutlineRounded
+          htmlColor="#e75656"
+          css={`
+            font-size: 48px;
+          `}
+        />{" "}
+        <p
+          css={`
+            font-family: "GothamNarrow-Bold", sans-serif;
+            font-size: 18px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+            margin: 0;
+            margin-top: 16px;
+          `}
+        >
+          {isAuthenticated ? (
+            <>
+              You are not authorized to {props.action} this {props.asset}.
+              Please contact <br /> your administrator.
+            </>
+          ) : (
+            <>
+              You are not authorized to {props.action} this {props.asset}.
+              Please sign in <br /> or contact your administrator.
+            </>
+          )}
+        </p>
+        {!isAuthenticated && (
+          <div
+            id="auth-buttons"
+            css={`
+              gap: 20px;
+              width: 100%;
+              display: flex;
+              flex-direction: row;
+              justify-content: center;
+              margin-top: 32px;
+
+              > button {
+                gap: 10px;
+                color: #fff;
+                display: flex;
+                padding: 9px 18px !important;
+                background: #a1a2ff;
+                align-items: center;
+                justify-content: center;
+                text-transform: uppercase;
+                border-radius: 30px;
+                outline: none;
+                border: none;
+                font-family: "Inter", sans-serif;
+                font-weight: 700;
+                font-size: 14px;
+                text-transform: uppercase;
+                text-decoration: none;
+
+                :hover {
+                  opacity: 0.8;
+                  cursor: pointer;
+                }
+
+                > svg {
+                  transform: scale(0.8);
+                }
+              }
+            `}
+          >
+            <button onClick={() => socialAuth("google-oauth2")}>
+              <GoogleIcon /> sign in for free
+            </button>
+            <button onClick={() => socialAuth("linkedin")}>
+              <LinkedInIcon /> sign in for free
+            </button>
+          </div>
+        )}
+      </div>
+      <HomeFooter />
+    </>
   );
 }
diff --git a/src/app/modules/dataset-module/routes/datasetDetail/index.tsx b/src/app/modules/dataset-module/routes/datasetDetail/index.tsx
@@ -3,13 +3,14 @@ import { useChartsRawData } from "app/hooks/useChartsRawData";
 import React from "react";
 import DatasetSubHeaderToolbar from "../../component/datasetSubHeaderToolbar";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
-import { find } from "lodash";
+import { find, get } from "lodash";
 import { Container } from "@material-ui/core";
 import { useParams } from "react-router-dom";
 import { DatasetListItemAPIModel } from "app/modules/dataset-module/data";
 import { useAuth0 } from "@auth0/auth0-react";
 import { PageLoader } from "app/modules/common/page-loader";
 import { useTitle } from "react-use";
+import { NotAuthorizedMessageModule } from "app/modules/common/not-authorized-message";
 
 export default function DatasetDetail() {
   useTitle("DX DataXplorer - Dataset Detail");
@@ -26,6 +27,17 @@ export default function DatasetDetail() {
     (actions) => actions.dataThemes.DatasetGet.fetch
   );
 
+  const datasetError401 = useStoreState(
+    (state) =>
+      get(state.dataThemes.DatasetGet.errorData, "data.error.statusCode", 0) ===
+        401 ||
+      get(state.dataThemes.DatasetGet.crudData, "error", "") === "Unauthorized"
+  );
+
+  const errorDatasetName = useStoreState((state) =>
+    get(state.dataThemes.DatasetGet.crudData, "name", "")
+  );
+
   const loadDatasetLoading = useStoreState(
     (state) => state.dataThemes.DatasetGet.loading
   );
@@ -50,10 +62,7 @@ export default function DatasetDetail() {
   });
 
   React.useEffect(() => {
-    loadSampleDataset(`chart/sample-data/${page}`);
-  }, []);
-
-  React.useEffect(() => {
+    loadSampleDataset(page);
     if (token) {
       loadDataset({
         token,
@@ -68,6 +77,18 @@ export default function DatasetDetail() {
     }
   }, [token, page]);
 
+  if (datasetError401) {
+    return (
+      <>
+        <div css="width: 100%; height: 48px;" />
+        <NotAuthorizedMessageModule
+          asset="dataset"
+          action="view"
+          name={errorDatasetName}
+        />
+      </>
+    );
+  }
   return (
     <Container maxWidth="lg">
       <DatasetSubHeaderToolbar name={datasetDetails.name} />

diff --git a/src/app/modules/dataset-upload-module/upload-steps/index.tsx b/src/app/modules/dataset-upload-module/upload-steps/index.tsx
@@ -168,7 +168,7 @@ function DatasetUploadSteps(props: Props) {
       .then((response) => {
         //load dataset and datasets on upload success
         //we do this to load data to populate the table
-        loadSampleDataset(`chart/sample-data/${response.data.id}`);
+        loadSampleDataset(response.data.id);
         //we do this to update the dataset list with the new dataset
         loadDatasets({ token, storeInCrudData: true });
         //set active step to finished

diff --git a/src/app/modules/home-module/components/Breadcrumbs/index.tsx b/src/app/modules/home-module/components/Breadcrumbs/index.tsx
@@ -16,6 +16,7 @@ function BreadCrumbs(props: BreadCrumbsProps) {
     >
       {props.items.map((item, index) => (
         <div
+          key={index}
           css={`
             display: flex;
             align-items: center;