feat: breadcrumbs refactor

globalfund · Apr 10, 2023 · 76eb99b · 76eb99b
1 parent 91fb51b
commit 76eb99b
Show file tree

Hide file tree

Showing 51 changed files with 1,415 additions and 1,065 deletions.
diff --git a/src/app/components/Charts/Budgets/Treemap/components/tooltip/index.tsx b/src/app/components/Charts/Budgets/Treemap/components/tooltip/index.tsx
@@ -13,6 +13,7 @@ export function TreemapTooltip(props: TreemapTooltipProps) {
     <div
       css={`
         min-width: 350px;
+        max-width: 350px;
         color: ${appColors.TREEMAP.TOOLTIP_COLOR};
         background: ${appColors.TREEMAP.TOOLTIP_BACKGROUND_COLOR};
 

diff --git a/src/app/components/Charts/Investments/Disbursements/components/tooltip/index.tsx b/src/app/components/Charts/Investments/Disbursements/components/tooltip/index.tsx
@@ -24,6 +24,7 @@ export function TreemapTooltip(props: TreemapTooltipProps) {
       css={`
         color: ${appColors.TREEMAP.TOOLTIP_COLOR};
         min-width: 350px;
+        max-width: 350px;
         background: ${appColors.TREEMAP.TOOLTIP_BACKGROUND_COLOR};
 
         @media (max-width: 767px) {
@@ -33,10 +34,12 @@ export function TreemapTooltip(props: TreemapTooltipProps) {
     >
       <div
         css={`
+          width: 100%;
           font-size: 18px;
           font-weight: bold;
           line-height: 20px;
           padding-bottom: 16px;
+          text-overflow: break-word;
           font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
           border-bottom: 1px solid ${appColors.TREEMAP.TOOLTIP_BORDER_COLOR};
         `}

diff --git a/src/app/components/Charts/common/breadcrumbs/index.tsx b/src/app/components/Charts/common/breadcrumbs/index.tsx
@@ -1,13 +1,45 @@
 import React from "react";
-import { useRecoilState } from "recoil";
+import { appColors } from "app/theme";
+import findIndex from "lodash/findIndex";
 import { useHistory } from "react-router-dom";
+import { DrilldownModelUpdated } from "app/interfaces";
 import RightIcon from "@material-ui/icons/ChevronRight";
-import { breadCrumbItems } from "app/state/recoil/atoms";
-import { appColors } from "app/theme";
+import { useStoreActions, useStoreState } from "app/state/store/hooks";
 
 export default function BreadCrumbs() {
   const history = useHistory();
-  const [breadCrumbList, setBreadCrumbList] = useRecoilState(breadCrumbItems);
+
+  const dataPathSteps = useStoreState((state) => state.DataPathSteps.steps);
+  const setDataPathSteps = useStoreActions(
+    (actions) => actions.DataPathSteps.setSteps
+  );
+  const setActiveStep = useStoreActions(
+    (actions) => actions.DataPathActiveStep.setStep
+  );
+  const clearActiveStep = useStoreActions(
+    (actions) => actions.DataPathActiveStep.clear
+  );
+
+  function onItemClick(index: number, item: DrilldownModelUpdated) {
+    if (index > 0) {
+      const fItemIndex = findIndex(dataPathSteps, { id: item.id });
+      if (fItemIndex > -1) {
+        setDataPathSteps(dataPathSteps.slice(0, fItemIndex + 1));
+      }
+      setActiveStep(item);
+      if (
+        item &&
+        item.path !== `${history.location.pathname}${history.location.search}`
+      ) {
+        history.push(item.path);
+      }
+    } else {
+      setDataPathSteps([]);
+      clearActiveStep();
+      history.push("/");
+    }
+  }
+
   return (
     <div
       css={`
@@ -53,66 +85,70 @@ export default function BreadCrumbs() {
           }
         `}
       >
-        {breadCrumbList &&
-          breadCrumbList.map((item, index) => (
-            <div
+        {[
+          {
+            id: "datasets",
+            name: "Datasets",
+            path: "",
+          },
+          ...dataPathSteps,
+        ].map((item, index) => (
+          <div
+            key={item.id}
+            css={`
+              gap: 5px;
+              display: flex;
+              align-items: center;
+            `}
+          >
+            <button
               css={`
+                background: ${index === dataPathSteps.length
+                  ? appColors.BREADCRUMBS.ITEM_BUTTON_SELECTED_BACKGROUND_COLOR
+                  : appColors.BREADCRUMBS.ITEM_BUTTON_BACKGROUND_COLOR};
+                height: 32px;
+                padding: 13px 12px;
+                border-radius: 20px;
+                font-size: 14px;
+                font-weight: 700;
+                color: ${appColors.BREADCRUMBS.ITEM_BUTTON_COLOR};
+                text-align: center;
                 display: flex;
-                gap: 5px;
                 align-items: center;
+                border: none;
+                outline: none;
+                width: max-content;
+                cursor: ${index < dataPathSteps.length ? "pointer" : "default"};
+
+                :hover,
+                :active,
+                :focus {
+                  background: ${appColors.BREADCRUMBS
+                    .ITEM_BUTTON_SELECTED_BACKGROUND_COLOR};
+                }
               `}
-              key={item?.id}
+              type="button"
+              onClick={() => {
+                if (index < dataPathSteps.length) {
+                  onItemClick(index, item);
+                }
+              }}
             >
-              <button
+              <b>{item.name}</b>
+            </button>
+            {index === dataPathSteps.length ? null : (
+              <div
                 css={`
-                  background: ${index === breadCrumbList.length - 1
-                    ? appColors.BREADCRUMBS.ITEM_BUTTON_BACKGROUND_COLOR
-                    : appColors.BREADCRUMBS
-                        .ITEM_BUTTON_SELECTED_BACKGROUND_COLOR};
-                  height: 32px;
-                  padding: 13px 12px;
-                  border-radius: 20px;
-                  font-size: 14px;
-                  font-weight: 700;
-                  color: ${appColors.BREADCRUMBS.ITEM_BUTTON_COLOR};
-                  text-align: center;
                   display: flex;
                   align-items: center;
-                  border: none;
-                  outline: none;
-                  width: max-content;
-                  /* padding: 0 2rem; */
-                  cursor: pointer;
-                  :hover,
-                  :active,
-                  :focus {
-                    background: ${appColors.BREADCRUMBS
-                      .ITEM_BUTTON_SELECTED_BACKGROUND_COLOR};
-                  }
+                  color: ${appColors.BREADCRUMBS.ITEM_ARROW_COLOR};
                 `}
-                type="button"
-                onClick={() => {
-                  if (item?.path !== "#") {
-                    history.push(item.path);
-                  }
-                  setBreadCrumbList([...breadCrumbList.slice(0, index + 1)]);
-                }}
               >
-                <b>{item?.name}</b>
-              </button>
-              {index === breadCrumbList.length - 1 ? null : (
-                <div
-                  css={`
-                    color: ${appColors.BREADCRUMBS.ITEM_ARROW_COLOR};
-                    display: flex;
-                    align-items: center;
-                  `}
-                >
-                  <RightIcon color="inherit" />
-                </div>
-              )}
-            </div>
-          ))}
+                <RightIcon color="inherit" />
+              </div>
+            )}
+          </div>
+        ))}
       </div>
     </div>
   );

diff --git a/src/app/components/Charts/common/dialogBox/index.tsx b/src/app/components/Charts/common/dialogBox/index.tsx
@@ -1,35 +1,53 @@
 import React from "react";
-import { modalContainercss, overlaycss } from "./style";
+import { useStoreActions } from "app/state/store/hooks";
+import {
+  overlaycss,
+  modalContainercss,
+} from "app/components/Charts/common/dialogBox/style";
 
 interface Props {
   display: {
     display: boolean;
     code: string;
+    pageType?: string;
     clickthroughPath?: string;
   };
   setDisplay: React.Dispatch<
     React.SetStateAction<{
       display: boolean;
       code: string;
+      pageType?: string;
       clickthroughPath?: string;
     }>
   >;
-  handleClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
+  handleClick?: () => void;
 }
+
 export default function ReRouteDialogBox(props: Props) {
+  const clearDataPathSteps = useStoreActions(
+    (actions) => actions.DataPathSteps.clear
+  );
+
+  const handleYesClick = () => {
+    clearDataPathSteps();
+    if (props.handleClick) {
+      props.handleClick();
+    }
+  };
+
   return (
     <div>
       <div
         onClick={() => props.setDisplay({ ...props.display, display: false })}
         css={overlaycss}
-      ></div>
+      />
       <div css={modalContainercss}>
         <p
           css={`
             margin: 0;
           `}
         >
-          You are navigating to a grant page.
+          You are navigating to a {props.display.pageType || "grant"} page.
         </p>
         <p
           css={`
@@ -43,9 +61,8 @@ export default function ReRouteDialogBox(props: Props) {
             margin: 2rem 0;
           `}
         >
-          <b>Continue to grant page?</b>
+          <b>Continue to {props.display.pageType || "grant"} page?</b>
         </p>
-
         <div
           css={`
             display: flex;
@@ -60,10 +77,9 @@ export default function ReRouteDialogBox(props: Props) {
               props.setDisplay({ ...props.display, display: false })
             }
           >
-            <b> No</b>
+            <b>No</b>
           </button>
-          <button type="button" onClick={props.handleClick}>
-            {" "}
+          <button type="button" onClick={handleYesClick}>
             <b>Yes</b>
           </button>
         </div>

diff --git a/src/app/components/PageHeader/index.tsx b/src/app/components/PageHeader/index.tsx
@@ -5,7 +5,6 @@ import { appColors } from "app/theme";
 import Grid from "@material-ui/core/Grid";
 import { css } from "styled-components/macro";
 import { useHistory } from "react-router-dom";
-import { BreadcrumbModel } from "app/interfaces";
 import Container from "@material-ui/core/Container";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import { TabProps } from "app/components/PageHeader/components/tabs/data";
@@ -17,7 +16,6 @@ interface PageHeaderProps {
   tabs?: TabProps[];
   isDetail?: boolean;
   partialTitle?: string;
-  breadcrumbs: BreadcrumbModel[];
 }
 
 const styles = {

diff --git a/src/app/components/ToolBoxPanel/components/datapath/index.tsx b/src/app/components/ToolBoxPanel/components/datapath/index.tsx
@@ -23,9 +23,6 @@ export function DataPathPanel() {
   const setActiveStep = useStoreActions(
     (actions) => actions.DataPathActiveStep.setStep
   );
-  const setShowDataPath = useStoreActions(
-    (state) => state.DataPathPanelVisibilityState.setValue
-  );
 
   function onItemClick(index: number, item: DrilldownModelUpdated) {
     if (index > 0) {
@@ -66,15 +63,6 @@ export function DataPathPanel() {
         `}
       >
         Your data path
-        <IconButton
-          css={`
-            width: 14px;
-            height: 14px;
-          `}
-          onClick={() => setShowDataPath(false)}
-        >
-          <CloseOutlinedIcon htmlColor={appColors.COMMON.SECONDARY_COLOR_18} />
-        </IconButton>
       </div>
       {dataPathSteps.length > 0 && (
         <div>