From 5e9c097ebdbad5bd8d2387aff17faea08da2af1b Mon Sep 17 00:00:00 2001
From: Psami-wondah <okechukwusamuel16@gmail.com>
Date: Tue, 28 May 2024 10:44:28 +0100
Subject: [PATCH 01/12] feat: Dashboard page

---
 src/app/components/AppBar/index.tsx           |  16 +-
 .../components/Dialogs/deleteChartDialog.tsx  |   6 +-
 src/app/components/Styled/tabs.ts             |   2 +-
 .../home-module/assets/add-img-white.svg      |   3 +
 .../home-module/components/All/assetsGrid.tsx | 362 ++++++++++++++++++
 .../components/Charts/chartAddNewCard.tsx     |  30 +-
 .../components/Charts/chartsGrid.tsx          |   6 +-
 .../components/Charts/gridItem.tsx            |   2 +-
 .../components/Datasets/datasetAddNewCard.tsx |  28 +-
 .../components/Datasets/datasetsGrid.tsx      |  13 +-
 .../components/Datasets/gridItem.tsx          |   2 +-
 .../home-module/components/Footer/index.tsx   | 336 ++++++++--------
 .../home-module/components/Footer/style.ts    |   2 +-
 .../components/Reports/gridItem.tsx           |   4 +-
 .../components/Reports/reportAddNewCard.tsx   |  28 +-
 .../components/Reports/reportsGrid.tsx        |   2 +-
 .../home-module/components/Table/index.tsx    |   1 +
 src/app/modules/home-module/index.tsx         | 144 +++++--
 src/app/modules/home-module/style.ts          |  30 +-
 .../sub-modules/explore-assets/index.tsx      |   1 +
 .../state/api/action-reducers/assets/index.ts |  10 +
 src/app/state/api/interfaces/index.ts         |   4 +
 src/app/state/recoil/atoms/index.ts           |   4 +-
 src/app/state/store/index.ts                  |   5 +
 24 files changed, 763 insertions(+), 278 deletions(-)
 create mode 100644 src/app/modules/home-module/assets/add-img-white.svg
 create mode 100644 src/app/modules/home-module/components/All/assetsGrid.tsx
 create mode 100644 src/app/state/api/action-reducers/assets/index.ts

diff --git a/src/app/components/AppBar/index.tsx b/src/app/components/AppBar/index.tsx
index bcfa407a8..de4a44962 100644
--- a/src/app/components/AppBar/index.tsx
+++ b/src/app/components/AppBar/index.tsx
@@ -307,19 +307,19 @@ const ActionMenu = () => {
             :nth-child(1) {
               width: ${isAuthenticated ? "146px" : "110px"};
               height: 34px;
-              border-radius: ${isAuthenticated ? "24px 0px 0px 24px" : "24px"};
+              border-radius: 24px;
               &:hover {
                 opacity: 1;
               }
             }
-            :nth-child(2) {
+            /* :nth-child(2) {
               width: 41px;
               height: 34px;
               border-radius: 0px 24px 24px 0px;
               background: ${openActionPopover ? "#b5b5db" : "#dadaf8"};
               &:hover {
                 background: #b5b5db;
-              }
+              } */
             }
             svg {
               ${openActionPopover ? "transform: rotate(180deg)" : ""}
@@ -327,14 +327,12 @@ const ActionMenu = () => {
           }
         `}
       >
-        <Link
-          to={isAuthenticated ? "/report/new/initial" : "/onboarding/login"}
-        >
+        <Link to={isAuthenticated ? "/" : "/onboarding/login"}>
           <button data-cy="appbar-create-report/login">
-            {isAuthenticated ? "Create report" : "Log in"}
+            {isAuthenticated ? "MY DASHBOARD" : "Log in"}
           </button>
         </Link>
-        {isAuthenticated && (
+        {/* {isAuthenticated && (
           <button
             onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
               setActionPopoverAnchorEl(
@@ -345,7 +343,7 @@ const ActionMenu = () => {
           >
             <KeyboardArrowDownIcon />
           </button>
-        )}
+        )} */}
         {isAuthenticated && (
           <button
             onClick={() => history.push("/user-management/profile")}
diff --git a/src/app/components/Dialogs/deleteChartDialog.tsx b/src/app/components/Dialogs/deleteChartDialog.tsx
index fb4ed4dbf..6bbf7b66f 100644
--- a/src/app/components/Dialogs/deleteChartDialog.tsx
+++ b/src/app/components/Dialogs/deleteChartDialog.tsx
@@ -3,7 +3,7 @@ import CloseOutlined from "@material-ui/icons/ClearOutlined";
 import { createStyles, IconButton, makeStyles, Modal } from "@material-ui/core";
 
 interface Props {
-  chartId?: string;
+  cardId?: string;
   modalDisplay: boolean;
   enableButton: boolean;
   handleDelete: (id: string) => void;
@@ -39,7 +39,7 @@ export default function DeleteChartDialog(props: Props) {
 
   const onInputEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter" && e.currentTarget.value === "DELETE") {
-      props.handleDelete(props.chartId as string);
+      props.handleDelete(props.cardId as string);
     }
   };
 
@@ -51,7 +51,7 @@ export default function DeleteChartDialog(props: Props) {
     >
       <div className={classes.paper}>
         <form
-          onSubmit={() => props.handleDelete(props.chartId as string)}
+          onSubmit={() => props.handleDelete(props.cardId as string)}
           data-cy="delete-chart-item-form"
           aria-label="form"
         >
diff --git a/src/app/components/Styled/tabs.ts b/src/app/components/Styled/tabs.ts
index a4a4af8aa..d78cb1935 100644
--- a/src/app/components/Styled/tabs.ts
+++ b/src/app/components/Styled/tabs.ts
@@ -9,7 +9,7 @@ export const Tab = {
     display: flex;
     justify-content: flex-start;
     color: #000000;
-    margin: 4% 0%;
+    /* margin: 4% 0%; */
     width: 30%;
     gap: 40px;
     cursor: pointer;
diff --git a/src/app/modules/home-module/assets/add-img-white.svg b/src/app/modules/home-module/assets/add-img-white.svg
new file mode 100644
index 000000000..8c7f21fd4
--- /dev/null
+++ b/src/app/modules/home-module/assets/add-img-white.svg
@@ -0,0 +1,3 @@
+<svg width="35" height="36" viewBox="0 0 35 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.25 9.61396H15.75V16.5962H8.75V20.0874H15.75V27.0697H19.25V20.0874H26.25V16.5962H19.25V9.61396ZM17.5 0.886108C7.84 0.886108 0 8.70627 0 18.3418C0 27.9774 7.84 35.7975 17.5 35.7975C27.16 35.7975 35 27.9774 35 18.3418C35 8.70627 27.16 0.886108 17.5 0.886108ZM17.5 32.3064C9.7825 32.3064 3.5 26.0398 3.5 18.3418C3.5 10.6439 9.7825 4.37725 17.5 4.37725C25.2175 4.37725 31.5 10.6439 31.5 18.3418C31.5 26.0398 25.2175 32.3064 17.5 32.3064Z" fill="white"/>
+</svg>
diff --git a/src/app/modules/home-module/components/All/assetsGrid.tsx b/src/app/modules/home-module/components/All/assetsGrid.tsx
new file mode 100644
index 000000000..09f6b0211
--- /dev/null
+++ b/src/app/modules/home-module/components/All/assetsGrid.tsx
@@ -0,0 +1,362 @@
+/* third party */
+import React from "react";
+import axios from "axios";
+import get from "lodash/get";
+import find from "lodash/find";
+import Box from "@material-ui/core/Box";
+import Grid, { GridSize } from "@material-ui/core/Grid";
+import useDebounce from "react-use/lib/useDebounce";
+import { useUpdateEffect } from "react-use";
+/* project */
+import { useInfinityScroll } from "app/hooks/useInfinityScroll";
+import CircleLoader from "app/modules/home-module/components/Loader";
+import { useStoreActions, useStoreState } from "app/state/store/hooks";
+import DeleteChartDialog from "app/components/Dialogs/deleteChartDialog";
+import { coloredEchartTypes } from "app/modules/chart-module/routes/chart-type/data";
+import ChartAddnewCard from "app/modules/home-module/components/Charts/chartAddNewCard";
+import ChartGridItem from "app/modules/home-module/components/Charts/gridItem";
+import DatasetGridItem from "app/modules/home-module/components/Datasets/gridItem";
+import ReportGridItem from "app/modules/home-module/components/Reports/gridItem";
+import DatasetAddnewCard from "../Datasets/datasetAddNewCard";
+import ReportAddnewCard from "../Reports/reportAddNewCard";
+import ColoredReportIcon from "app/assets/icons/ColoredReportIcon";
+import DeleteDatasetDialog from "app/components/Dialogs/deleteDatasetDialog";
+import DeleteReportDialog from "app/components/Dialogs/deleteReportDialog";
+
+interface Props {
+  sortBy: string;
+  searchStr: string;
+  tableView: boolean;
+  addCard?: boolean;
+  showMenuButton: boolean;
+  inChartBuilder?: boolean;
+  category?: string;
+  onItemClick?: (v: string) => void;
+  md?: GridSize;
+  lg?: GridSize;
+  fromHome?: boolean;
+}
+type assetType = "chart" | "dataset" | "report";
+
+export default function AssetsGrid(props: Props) {
+  const observerTarget = React.useRef(null);
+  const [cardId, setCardId] = React.useState<string>("");
+  const [loadedAssets, setLoadedAssets] = React.useState<any[]>([]);
+  const [modalDisplay, setModalDisplay] = React.useState<boolean>(false);
+  const [activeAssetType, setActiveAssetType] =
+    React.useState<assetType | null>(null);
+  const [enableButton, setEnableButton] = React.useState<boolean>(false);
+
+  const token = useStoreState((state) => state.AuthToken.value);
+
+  const limit = 15;
+  const [offset, setOffset] = React.useState(0);
+
+  const { isObserved } = useInfinityScroll(observerTarget);
+
+  const assets = useStoreState(
+    (state) => (state.assets.AssetGetList.crudData ?? []) as any[]
+  );
+  const loadAssetsCount = useStoreActions(
+    (actions) => actions.assets.AssetsCount.fetch
+  );
+  const assetsCount = useStoreState(
+    (state) => get(state, "assets.AssetsCount.data.count", 0) as number
+  );
+
+  const loadAssets = useStoreActions(
+    (actions) => actions.assets.AssetGetList.fetch
+  );
+
+  const loading = useStoreState((state) => state.assets.AssetGetList.loading);
+
+  const assetsLoadSuccess = useStoreState(
+    (state) => state.assets.AssetGetList.success
+  );
+
+  const getFilterString = (fromZeroOffset?: boolean) => {
+    const value =
+      props.searchStr?.length > 0
+        ? `"where":{"name":{"like":"${props.searchStr}.*","options":"i"}},`
+        : "";
+    return `filter={${value}"order":"${
+      props.sortBy
+    } desc","limit":${limit},"offset":${fromZeroOffset ? 0 : offset}}`;
+  };
+
+  const getWhereString = () => {
+    return props.searchStr?.length > 0
+      ? `where={"name":{"like":"${props.searchStr}.*","options":"i"}}`
+      : "";
+  };
+
+  const loadData = (fromZeroOffset?: boolean) => {
+    if (token) {
+      loadAssets({
+        token,
+        storeInCrudData: true,
+        filterString: getFilterString(fromZeroOffset),
+      });
+    } else {
+      loadAssets({
+        nonAuthCall: true,
+        storeInCrudData: true,
+        filterString: getFilterString(fromZeroOffset),
+      });
+    }
+  };
+
+  const reloadData = () => {
+    if (token) {
+      loadAssetsCount({ token, filterString: getWhereString() });
+    } else {
+      loadAssetsCount({ nonAuthCall: true, filterString: getWhereString() });
+    }
+    setLoadedAssets([]);
+    setOffset(0);
+
+    loadData(true);
+  };
+
+  React.useEffect(() => {
+    //load data if intersection observer is triggered
+    if (assetsCount > limit) {
+      if (isObserved && assetsLoadSuccess) {
+        if (loadedAssets.length !== assetsCount) {
+          //update the offset value for the next load
+          setOffset(offset + limit);
+        }
+      }
+    }
+  }, [isObserved]);
+
+  useUpdateEffect(() => {
+    if (offset === 0) {
+      return;
+    }
+    loadData();
+  }, [offset, token]);
+
+  const handleDelete = (id: string) => {
+    setModalDisplay(false);
+    setEnableButton(false);
+
+    console.log(activeAssetType);
+
+    if (!id) {
+      return;
+    }
+
+    const url = {
+      chart: `${process.env.REACT_APP_API}/chart/${id}`,
+      dataset: `${process.env.REACT_APP_API}/datasets/${id}`,
+      report: `${process.env.REACT_APP_API}/report/${id}`,
+    }[activeAssetType as assetType];
+
+    axios
+      .delete(url, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then(() => {
+        reloadData();
+        setActiveAssetType(null);
+      })
+      .catch((error) => console.log(error));
+  };
+
+  const handleDuplicate = (id: string, assettype: assetType) => {
+    if (!id) {
+      return;
+    }
+    const url = {
+      chart: `${process.env.REACT_APP_API}/chart/duplicate/${id}`,
+      dataset: `${process.env.REACT_APP_API}/dataset/duplicate/${id}`,
+      report: `${process.env.REACT_APP_API}/report/duplicate/${id}`,
+    }[assettype];
+    axios
+      .get(url, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then(() => {
+        reloadData();
+      })
+      .catch((error) => console.log(error));
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value === "DELETE") {
+      setEnableButton(true);
+    } else {
+      setEnableButton(false);
+    }
+  };
+
+  const handleModal = (id: string) => {
+    setCardId(id);
+    setModalDisplay(true);
+  };
+
+  const getIcon = (vizType: string) => {
+    const type = find(coloredEchartTypes(), { id: vizType });
+    if (type) {
+      return type.icon;
+    }
+    return coloredEchartTypes()[0].icon;
+  };
+
+  React.useEffect(() => {
+    if (!assetsLoadSuccess) {
+      return;
+    }
+    //update the loaded reports
+    setLoadedAssets((prevAssets) => {
+      const prevAssetsIds = prevAssets.map((c) => c.id);
+      const f = assets.filter((asset) => !prevAssetsIds.includes(asset.id));
+      return [...prevAssets, ...f];
+    });
+  }, [assetsLoadSuccess]);
+
+  React.useEffect(() => {
+    reloadData();
+  }, [props.sortBy, token]);
+
+  const [,] = useDebounce(
+    () => {
+      if (props.searchStr !== undefined) {
+        reloadData();
+      }
+    },
+    500,
+    [props.searchStr]
+  );
+
+  return (
+    <>
+      <Grid container spacing={2}>
+        {props.addCard && (
+          <>
+            <DatasetAddnewCard />
+            <ChartAddnewCard />
+            <ReportAddnewCard />
+          </>
+        )}
+        {loadedAssets.map((d, index) => (
+          <Grid item key={d.id} xs={12} sm={6} md={4} lg={3}>
+            {
+              {
+                chart: (
+                  <ChartGridItem
+                    id={d.id}
+                    title={d.name}
+                    public={d.public}
+                    date={d.createdDate}
+                    path={`/chart/${d.id}`}
+                    viz={getIcon(d.vizType)}
+                    vizType={d.vizType}
+                    isMappingValid={d.isMappingValid}
+                    handleDelete={() => {
+                      setActiveAssetType(d.assetType as assetType);
+                      handleModal(d.id);
+                    }}
+                    handleDuplicate={() =>
+                      handleDuplicate(d.id, d.assetType as assetType)
+                    }
+                    owner={d.owner}
+                    isAIAssisted={d.isAIAssisted}
+                  />
+                ),
+                dataset: (
+                  <DatasetGridItem
+                    path={`/dataset/${d.id}/edit`}
+                    title={d.name}
+                    date={d.createdDate}
+                    handleDelete={() => {
+                      setActiveAssetType(d.assetType as assetType);
+                      handleModal(d.id);
+                    }}
+                    descr={d.description}
+                    handleDuplicate={() => {
+                      handleDuplicate(d.id, d.assetType as assetType);
+                    }}
+                    showMenu={!props.inChartBuilder}
+                    id={d.id}
+                    owner={d.owner}
+                    inChartBuilder={props.inChartBuilder as boolean}
+                    fromHome={props.fromHome}
+                  />
+                ),
+                report: (
+                  <ReportGridItem
+                    id={d.id}
+                    key={d.id}
+                    descr={d.name}
+                    public={d.public}
+                    date={d.createdDate}
+                    viz={<ColoredReportIcon />}
+                    color={d.backgroundColor}
+                    showMenuButton={props.showMenuButton}
+                    handleDelete={() => {
+                      setActiveAssetType(d.assetType as assetType);
+                      handleModal(d.id);
+                    }}
+                    handleDuplicate={() =>
+                      handleDuplicate(d.id, d.assetType as assetType)
+                    }
+                    title={d.title || d.name}
+                    owner={d.owner}
+                  />
+                ),
+              }[d.assetType as assetType]
+            }
+
+            <Box height={16} />
+          </Grid>
+        ))}
+      </Grid>
+
+      <Box height={80} />
+
+      <div ref={observerTarget} />
+      {loading && <CircleLoader />}
+
+      {
+        {
+          chart: (
+            <DeleteChartDialog
+              cardId={cardId}
+              modalDisplay={modalDisplay}
+              enableButton={enableButton}
+              handleDelete={handleDelete}
+              setModalDisplay={setModalDisplay}
+              handleInputChange={handleInputChange}
+            />
+          ),
+          dataset: (
+            <DeleteDatasetDialog
+              cardId={cardId}
+              enableButton={enableButton}
+              handleDelete={handleDelete}
+              modalDisplay={modalDisplay}
+              setModalDisplay={setModalDisplay}
+              setEnableButton={setEnableButton}
+            />
+          ),
+          report: (
+            <DeleteReportDialog
+              cardId={cardId}
+              modalDisplay={modalDisplay}
+              enableButton={enableButton}
+              handleDelete={handleDelete}
+              setModalDisplay={setModalDisplay}
+              handleInputChange={handleInputChange}
+            />
+          ),
+        }[activeAssetType as assetType]
+      }
+    </>
+  );
+}
diff --git a/src/app/modules/home-module/components/Charts/chartAddNewCard.tsx b/src/app/modules/home-module/components/Charts/chartAddNewCard.tsx
index 4eb233fb3..97d274b74 100644
--- a/src/app/modules/home-module/components/Charts/chartAddNewCard.tsx
+++ b/src/app/modules/home-module/components/Charts/chartAddNewCard.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Grid from "@material-ui/core/Grid";
 import { useHistory } from "react-router-dom";
 import IconButton from "@material-ui/core/IconButton";
-import { ReactComponent as AddNewImage } from "app/modules/home-module/assets/add-img.svg";
+import { ReactComponent as AddNewImage } from "app/modules/home-module/assets/add-img-white.svg";
 
 export default function ChartAddnewCard() {
   const history = useHistory();
@@ -18,10 +18,11 @@ export default function ChartAddnewCard() {
         css={`
           width: 296px;
           height: 161.59px;
-          background: #f2f7fd;
+          background: #6061e5;
           padding: 12px 16px;
           box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
           display: flex;
+          border-radius: 8px;
           align-items: center;
           cursor: pointer;
         `}
@@ -44,28 +45,25 @@ export default function ChartAddnewCard() {
           <hr
             css={`
               margin: 0;
-              height: 50px;
-              background: #231d2c;
+              height: 49px;
+              background: #ffffff;
+              width: 1px;
             `}
           />
           <p>
             <p
               css={`
+                fonrt-family: "GothamNarrow-Bold", sans-serif;
                 margin: auto;
+                color: #ffffff;
+                font-size: 18px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 20px; /* 111.111% */
+                letter-spacing: 0.5px;
               `}
             >
-              <b>New Chart</b>{" "}
-            </p>
-            <p
-              css={`
-                margin: 0;
-                color: #495057;
-                font-size: 12px;
-                font-weight: 325;
-                line-height: 15px;
-              `}
-            >
-              Create a new chart in your library
+              <b>Create Chart</b>
             </p>
           </p>
         </div>
diff --git a/src/app/modules/home-module/components/Charts/chartsGrid.tsx b/src/app/modules/home-module/components/Charts/chartsGrid.tsx
index 79d9401ad..2a9e0855e 100644
--- a/src/app/modules/home-module/components/Charts/chartsGrid.tsx
+++ b/src/app/modules/home-module/components/Charts/chartsGrid.tsx
@@ -209,7 +209,7 @@ export default function ChartsGrid(props: Props) {
         <Grid container spacing={2}>
           {props.addCard && <ChartAddnewCard />}
           {loadedCharts.map((c, index) => (
-            <Grid item key={c.id} xs={12} sm={6} md={6} lg={3}>
+            <Grid item key={c.id} xs={12} sm={6} md={4} lg={3}>
               <GridItem
                 id={c.id}
                 title={c.name}
@@ -239,13 +239,13 @@ export default function ChartsGrid(props: Props) {
           }))}
         />
       )}
-      <Box height={100} />
+      <Box height={80} />
 
       <div ref={observerTarget} />
       {loading && <CircleLoader />}
 
       <DeleteChartDialog
-        chartId={chartId}
+        cardId={chartId}
         modalDisplay={modalDisplay}
         enableButton={enableButton}
         handleDelete={handleDelete}
diff --git a/src/app/modules/home-module/components/Charts/gridItem.tsx b/src/app/modules/home-module/components/Charts/gridItem.tsx
index 062969a37..4a6ed935f 100644
--- a/src/app/modules/home-module/components/Charts/gridItem.tsx
+++ b/src/app/modules/home-module/components/Charts/gridItem.tsx
@@ -48,7 +48,7 @@ export default function gridItem(props: Props) {
         to={`/chart/${props.id}`}
         title={props.title}
         css={`
-          width: 296px;
+          width: 100%;
           height: 161.59px;
           display: flex;
           color: #262c34;
diff --git a/src/app/modules/home-module/components/Datasets/datasetAddNewCard.tsx b/src/app/modules/home-module/components/Datasets/datasetAddNewCard.tsx
index 972b6dc7a..dced3f6eb 100644
--- a/src/app/modules/home-module/components/Datasets/datasetAddNewCard.tsx
+++ b/src/app/modules/home-module/components/Datasets/datasetAddNewCard.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Grid from "@material-ui/core/Grid";
 import { useHistory } from "react-router-dom";
 import IconButton from "@material-ui/core/IconButton";
-import { ReactComponent as AddNewImage } from "app/modules/home-module/assets/add-img.svg";
+import { ReactComponent as AddNewImage } from "app/modules/home-module/assets/add-img-white.svg";
 
 export default function DatasetAddnewCard() {
   const history = useHistory();
@@ -18,10 +18,11 @@ export default function DatasetAddnewCard() {
         css={`
           width: 296px;
           height: 161.59px;
-          background: #f2f7fd;
+          background: #6061e5;
           padding: 12px 16px;
           box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
           display: flex;
+          border-radius: 8px;
           align-items: center;
           cursor: pointer;
         `}
@@ -45,27 +46,24 @@ export default function DatasetAddnewCard() {
             css={`
               margin: 0;
               height: 49px;
-              background: #231d2c;
+              background: #ffffff;
+              width: 1px;
             `}
           />
           <p>
             <p
               css={`
+                fonrt-family: "GothamNarrow-Bold", sans-serif;
                 margin: auto;
+                color: #ffffff;
+                font-size: 18px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 20px; /* 111.111% */
+                letter-spacing: 0.5px;
               `}
             >
-              <b>New Data</b>{" "}
-            </p>
-            <p
-              css={`
-                margin: 0;
-                color: #495057;
-                font-size: 12px;
-                font-weight: 325;
-                line-height: 15px;
-              `}
-            >
-              Upload data in your library
+              <b>Connect Data</b>{" "}
             </p>
           </p>
         </div>
diff --git a/src/app/modules/home-module/components/Datasets/datasetsGrid.tsx b/src/app/modules/home-module/components/Datasets/datasetsGrid.tsx
index 6d72b8758..4b8b067fb 100644
--- a/src/app/modules/home-module/components/Datasets/datasetsGrid.tsx
+++ b/src/app/modules/home-module/components/Datasets/datasetsGrid.tsx
@@ -133,8 +133,7 @@ export default function DatasetsGrid(props: Readonly<Props>) {
     setEnableButton(false);
   };
 
-  const handleDuplicate = (index: number) => {
-    const id = loadedDatasets[index].id;
+  const handleDuplicate = (id: string) => {
     if (!id) {
       return;
     }
@@ -254,7 +253,7 @@ export default function DatasetsGrid(props: Readonly<Props>) {
                 }}
                 descr={data.description}
                 handleDuplicate={() => {
-                  handleDuplicate(index);
+                  handleDuplicate(data.id);
                 }}
                 showMenu={!props.inChartBuilder}
                 id={data.id}
@@ -282,13 +281,13 @@ export default function DatasetsGrid(props: Readonly<Props>) {
           }))}
         />
       )}
-      <Box height={100} />
+      <Box height={80} />
 
       <div
         ref={observerTarget}
-        css={`
-          height: 10px;
-        `}
+        // css={`
+        //   height: 10px;
+        // `}
       />
       {loading && <CircleLoader />}
       <DeleteDatasetDialog
diff --git a/src/app/modules/home-module/components/Datasets/gridItem.tsx b/src/app/modules/home-module/components/Datasets/gridItem.tsx
index 08e64d231..fe426bdf5 100644
--- a/src/app/modules/home-module/components/Datasets/gridItem.tsx
+++ b/src/app/modules/home-module/components/Datasets/gridItem.tsx
@@ -72,7 +72,7 @@ export default function GridItem(props: Readonly<Props>) {
         <div
           css={`
             width: 100%;
-            height: 161.588px;
+            height: 161.59px;
             display: flex;
             color: #262c34;
             background: #fff;
diff --git a/src/app/modules/home-module/components/Footer/index.tsx b/src/app/modules/home-module/components/Footer/index.tsx
index 0e6cedd48..7c363533f 100644
--- a/src/app/modules/home-module/components/Footer/index.tsx
+++ b/src/app/modules/home-module/components/Footer/index.tsx
@@ -9,7 +9,7 @@ import NewsletterForm from "app/modules/common/newsletterForm";
 import { FieldErrors } from "react-hook-form";
 import moment from "moment";
 
-export default function HomeFooter() {
+export default function HomeFooter({ small }: { small?: boolean }) {
   const [isSubscribed, setIsSubscribed] = React.useState(false);
   const [isSubscriptionFailed, setIsSubscriptionFailed] = React.useState(false);
   const [formError, setFormError] = React.useState<
@@ -20,192 +20,194 @@ export default function HomeFooter() {
   return (
     <div css={homeFootercss}>
       <Container maxWidth="lg">
-        <Grid
-          container
-          alignContent="space-between"
-          alignItems="center"
-          spacing={2}
-        >
+        {small ? null : (
           <Grid
-            item
-            lg={3}
-            md={4}
-            css={`
-              a {
-                font-size: 16px;
-                text-decoration: none;
-                color: #000;
-                font-family: "GothamNarrow-Medium", sans-serif;
-              }
-            `}
+            container
+            alignContent="space-between"
+            alignItems="center"
+            spacing={2}
           >
-            <ul
+            <Grid
+              item
+              lg={3}
+              md={4}
               css={`
-                display: flex;
-                flex-direction: column;
-                gap: 18px;
-                li {
+                a {
                   font-size: 16px;
-                  font-weight: 350;
+                  text-decoration: none;
                   color: #000;
-                }
-                li:first-child {
-                  margin-bottom: 20px;
+                  font-family: "GothamNarrow-Medium", sans-serif;
                 }
               `}
             >
-              <li>
-                <Link to="/">
-                  <LogoIcon />
-                </Link>
-              </li>
-              <li>
-                <Link to="/why-dataXplorer"> Why DataXplorer?</Link>{" "}
-              </li>
-              <li>
-                <Link to="/explore">Explore</Link>{" "}
-              </li>
-              <li>
-                <Link to="/about">About</Link>
-              </li>
-              <li>
-                <Link to="/partners">Partners</Link>
-              </li>
-              <li>
-                <Link to="/contact">Contact</Link>
-              </li>
-            </ul>
-          </Grid>
-          <Grid
-            item
-            lg={3}
-            md={4}
-            css={`
-              ul {
-                margin-top: 20px;
-                color: #000;
-                font-weight: 325;
-                font-family: "GothamNarrow-Medium", sans-serif;
-              }
-              a {
-                text-decoration: none;
-                color: #000;
-              }
-              li {
-                font-size: 12px;
-                :nth-child(1),
-                :nth-child(2) {
-                  margin-bottom: 17px;
+              <ul
+                css={`
+                  display: flex;
+                  flex-direction: column;
+                  gap: 18px;
+                  li {
+                    font-size: 16px;
+                    font-weight: 350;
+                    color: #000;
+                  }
+                  li:first-child {
+                    margin-bottom: 20px;
+                  }
+                `}
+              >
+                <li>
+                  <Link to="/">
+                    <LogoIcon />
+                  </Link>
+                </li>
+                <li>
+                  <Link to="/why-dataXplorer"> Why DataXplorer?</Link>{" "}
+                </li>
+                <li>
+                  <Link to="/explore">Explore</Link>{" "}
+                </li>
+                <li>
+                  <Link to="/about">About</Link>
+                </li>
+                <li>
+                  <Link to="/partners">Partners</Link>
+                </li>
+                <li>
+                  <Link to="/contact">Contact</Link>
+                </li>
+              </ul>
+            </Grid>
+            <Grid
+              item
+              lg={3}
+              md={4}
+              css={`
+                ul {
+                  margin-top: 20px;
+                  color: #000;
+                  font-weight: 325;
+                  font-family: "GothamNarrow-Medium", sans-serif;
                 }
-                p {
-                  margin: 0px;
-                  line-height: normal;
+                a {
+                  text-decoration: none;
+                  color: #000;
                 }
-              }
-            `}
-          >
-            <ul>
-              <li>Tel: +3185 401 5241</li>
-              <li>
-                {" "}
-                <a href="mailto:contact@dataxplorer.org">
-                  Email: contact@dataxplorer.org
-                </a>{" "}
-              </li>
-              <li>
-                <p>Keizersgracht 555</p>
+                li {
+                  font-size: 12px;
+                  :nth-child(1),
+                  :nth-child(2) {
+                    margin-bottom: 17px;
+                  }
+                  p {
+                    margin: 0px;
+                    line-height: normal;
+                  }
+                }
+              `}
+            >
+              <ul>
+                <li>Tel: +3185 401 5241</li>
+                <li>
+                  {" "}
+                  <a href="mailto:contact@dataxplorer.org">
+                    Email: contact@dataxplorer.org
+                  </a>{" "}
+                </li>
+                <li>
+                  <p>Keizersgracht 555</p>
 
-                <p>1017 DR Amsterdam</p>
+                  <p>1017 DR Amsterdam</p>
 
-                <p>The Netherlands</p>
-              </li>
-            </ul>
-          </Grid>
+                  <p>The Netherlands</p>
+                </li>
+              </ul>
+            </Grid>
 
-          <Grid item lg={4} md={4}>
-            <p
-              css={`
-                font-size: 16px;
-                font-weight: 350;
-                color: #000;
-                font-family: "GothamNarrow-Medium", sans-serif;
-              `}
-            >
-              Subscribe to our newsletter
-            </p>
-            {formError.email && (
-              <label
+            <Grid item lg={4} md={4}>
+              <p
                 css={`
-                  font-family: "Inter", sans-serif;
-                  font-size: 12px;
-                  text-align: left;
-                  width: 100%;
-                  padding-left: 10px;
-                  color: #e75656;
+                  font-size: 16px;
+                  font-weight: 350;
+                  color: #000;
+                  font-family: "GothamNarrow-Medium", sans-serif;
                 `}
               >
-                Please enter a valid email address.
-              </label>
-            )}
-            <div
-              css={`
-                border-radius: 40px;
-                background: #f7f7f7;
-                width: 611px;
-                height: 47px;
-                display: flex;
-
-                input {
-                  outline: none;
-                  border: none;
-                  border-radius: 34.5px 0 0 34.5px;
-                  width: 70%;
-                  padding-left: 24px;
+                Subscribe to our newsletter
+              </p>
+              {formError.email && (
+                <label
+                  css={`
+                    font-family: "Inter", sans-serif;
+                    font-size: 12px;
+                    text-align: left;
+                    width: 100%;
+                    padding-left: 10px;
+                    color: #e75656;
+                  `}
+                >
+                  Please enter a valid email address.
+                </label>
+              )}
+              <div
+                css={`
+                  border-radius: 40px;
                   background: #f7f7f7;
-                  font-family: "Roboto", sans-serif;
-                  font-weight: 400;
-                  ::placeholder {
+                  width: 611px;
+                  height: 47px;
+                  display: flex;
+
+                  input {
+                    outline: none;
+                    border: none;
+                    border-radius: 34.5px 0 0 34.5px;
+                    width: 70%;
+                    padding-left: 24px;
+                    background: #f7f7f7;
                     font-family: "Roboto", sans-serif;
                     font-weight: 400;
-                    color: #000;
+                    ::placeholder {
+                      font-family: "Roboto", sans-serif;
+                      font-weight: 400;
+                      color: #000;
+                    }
                   }
-                }
-                button {
-                  border: none;
-                  outline: none;
-                  border-radius: 0 34.5px 34.5px 0;
-                  background: #231d2c;
-                  text-transform: uppercase;
-                  color: #fff;
-                  font-family: "Inter", sans-serif;
-                  font-size: 14px;
-                  width: 30%;
-                  font-weight: 700;
-                  cursor: pointer;
-                }
-              `}
-            >
-              <NewsletterForm
-                setIsSubscribed={setIsSubscribed}
-                setIsSubscriptionFailed={setIsSubscriptionFailed}
-                setFormError={setFormError}
-              />
-            </div>
-            <p
-              css={`
-                line-height: normal;
-                font-size: 12px;
-                height: 30px;
-              `}
-            >
-              {isSubscribed
-                ? "Thank you for subscribing!"
-                : isSubscriptionFailed
-                ? "Oops! Something went wrong with the request! Please fill your email again."
-                : "  You will receive occasional emails from DX. You always have choice to unsubscribe within every Email."}
-            </p>
+                  button {
+                    border: none;
+                    outline: none;
+                    border-radius: 0 34.5px 34.5px 0;
+                    background: #231d2c;
+                    text-transform: uppercase;
+                    color: #fff;
+                    font-family: "Inter", sans-serif;
+                    font-size: 14px;
+                    width: 30%;
+                    font-weight: 700;
+                    cursor: pointer;
+                  }
+                `}
+              >
+                <NewsletterForm
+                  setIsSubscribed={setIsSubscribed}
+                  setIsSubscriptionFailed={setIsSubscriptionFailed}
+                  setFormError={setFormError}
+                />
+              </div>
+              <p
+                css={`
+                  line-height: normal;
+                  font-size: 12px;
+                  height: 30px;
+                `}
+              >
+                {isSubscribed
+                  ? "Thank you for subscribing!"
+                  : isSubscriptionFailed
+                  ? "Oops! Something went wrong with the request! Please fill your email again."
+                  : "  You will receive occasional emails from DX. You always have choice to unsubscribe within every Email."}
+              </p>
+            </Grid>
           </Grid>
-        </Grid>
+        )}
         <div
           css={`
             display: flex;
@@ -216,7 +218,7 @@ export default function HomeFooter() {
             padding-bottom: 20px;
             font-size: 12px;
 
-            margin-top: 40px;
+            margin-top: ${small ? "0px" : "40px"};
             a {
               text-decoration: none;
               color: #000;
diff --git a/src/app/modules/home-module/components/Footer/style.ts b/src/app/modules/home-module/components/Footer/style.ts
index a1a34f6e3..fe0acd342 100644
--- a/src/app/modules/home-module/components/Footer/style.ts
+++ b/src/app/modules/home-module/components/Footer/style.ts
@@ -3,7 +3,7 @@ import { css } from "styled-components/macro";
 export const homeFootercss = css`
   /* width: 100vw; */
   background: #fff;
-  padding-top: 27px;
+  /* padding-top: 27px; */
 
   ul {
     padding: 0;
diff --git a/src/app/modules/home-module/components/Reports/gridItem.tsx b/src/app/modules/home-module/components/Reports/gridItem.tsx
index 4b7dc29f2..ea3bebe63 100644
--- a/src/app/modules/home-module/components/Reports/gridItem.tsx
+++ b/src/app/modules/home-module/components/Reports/gridItem.tsx
@@ -46,11 +46,11 @@ export default function gridItem(props: Props) {
       <Link
         to={`/report/${props.id}`}
         css={`
-          width: 296px;
+          width: 100%;
+          height: 161.59px;
           padding: 12px;
           display: flex;
           color: #262c34;
-          height: 161.59px;
           background: #fff;
           position: relative;
           text-decoration: none;
diff --git a/src/app/modules/home-module/components/Reports/reportAddNewCard.tsx b/src/app/modules/home-module/components/Reports/reportAddNewCard.tsx
index 4660c665b..6622c90c8 100644
--- a/src/app/modules/home-module/components/Reports/reportAddNewCard.tsx
+++ b/src/app/modules/home-module/components/Reports/reportAddNewCard.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useHistory } from "react-router-dom";
 import { Grid, IconButton } from "@material-ui/core";
-import { ReactComponent as AddNewImage } from "../../assets/add-img.svg";
+import { ReactComponent as AddNewImage } from "../../assets/add-img-white.svg";
 
 export default function ReportAddnewCard() {
   const history = useHistory();
@@ -17,10 +17,11 @@ export default function ReportAddnewCard() {
         css={`
           width: 296px;
           height: 161.59px;
-          background: #f2f7fd;
+          background: #6061e5;
           padding: 12px 16px;
           box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
           display: flex;
+          border-radius: 8px;
           align-items: center;
           cursor: pointer;
         `}
@@ -44,27 +45,24 @@ export default function ReportAddnewCard() {
             css={`
               margin: 0;
               height: 49px;
-              background: #231d2c;
+              background: #ffffff;
+              width: 1px;
             `}
           />
           <p>
             <p
               css={`
+                fonrt-family: "GothamNarrow-Bold", sans-serif;
                 margin: auto;
+                color: #ffffff;
+                font-size: 18px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 20px; /* 111.111% */
+                letter-spacing: 0.5px;
               `}
             >
-              <b>New Report</b>{" "}
-            </p>
-            <p
-              css={`
-                margin: 0;
-                color: #495057;
-                font-size: 12px;
-                font-weight: 325;
-                line-height: 15px;
-              `}
-            >
-              Create a new report in your library
+              <b>Create Report</b>
             </p>
           </p>
         </div>
diff --git a/src/app/modules/home-module/components/Reports/reportsGrid.tsx b/src/app/modules/home-module/components/Reports/reportsGrid.tsx
index 4eb945bee..5847fa48c 100644
--- a/src/app/modules/home-module/components/Reports/reportsGrid.tsx
+++ b/src/app/modules/home-module/components/Reports/reportsGrid.tsx
@@ -226,7 +226,7 @@ export default function ReportsGrid(props: Props) {
           }))}
         />
       )}
-      <Box height={100} />
+      <Box height={80} />
       <div ref={observerTarget} />
       {loading && <CircleLoader />}
       <DeleteReportDialog
diff --git a/src/app/modules/home-module/components/Table/index.tsx b/src/app/modules/home-module/components/Table/index.tsx
index 38bd50290..f2bb9ef40 100644
--- a/src/app/modules/home-module/components/Table/index.tsx
+++ b/src/app/modules/home-module/components/Table/index.tsx
@@ -24,6 +24,7 @@ export function HomepageTable(props: {
   const history = useHistory();
   const display = useRecoilState(homeDisplayAtom)[0];
   const pathBase = {
+    all: "all",
     data: "dataset",
     charts: "chart",
     reports: "report",
diff --git a/src/app/modules/home-module/index.tsx b/src/app/modules/home-module/index.tsx
index 2c962d202..62b119c64 100644
--- a/src/app/modules/home-module/index.tsx
+++ b/src/app/modules/home-module/index.tsx
@@ -40,11 +40,14 @@ import {
   sortByItemCss,
   turnsDataCss,
 } from "app/modules/home-module/style";
+import DatasetCategoryList from "./components/Datasets/datasetCategoryList";
+import { datasetCategories } from "../dataset-upload-module/upload-steps/metaData";
+import AssetsGrid from "./components/All/assetsGrid";
 
 export default function HomeModule() {
   useTitle("DX DataXplorer");
 
-  const { isAuthenticated } = useAuth0();
+  const { isAuthenticated, user } = useAuth0();
 
   // clear persisted states
   const clearPersistedReportState = useResetRecoilState(
@@ -60,6 +63,8 @@ export default function HomeModule() {
     setReportPreviewMode(false);
   }, []);
 
+  const [category, setCategory] = React.useState("");
+
   const [tableView, setTableView] = React.useState(false);
   const [searchValue, setSearchValue] = React.useState<string | undefined>(
     undefined
@@ -81,7 +86,7 @@ export default function HomeModule() {
     { label: "Name", value: "name" },
   ];
 
-  const handleChange = (newValue: "data" | "charts" | "reports") => {
+  const handleChange = (newValue: "all" | "data" | "charts" | "reports") => {
     setDisplay(newValue);
   };
 
@@ -101,6 +106,7 @@ export default function HomeModule() {
             sortBy={sortByStr}
             searchStr={searchStr}
             tableView={tableView}
+            category={category}
             addCard
             fromHome
           />
@@ -124,6 +130,17 @@ export default function HomeModule() {
             addCard
           />
         );
+      case "all":
+        return (
+          <AssetsGrid
+            sortBy={sortByStr}
+            searchStr={searchStr}
+            tableView={tableView}
+            showMenuButton={false}
+            addCard
+            fromHome
+          />
+        );
       default:
         break;
     }
@@ -141,16 +158,27 @@ export default function HomeModule() {
   const openSortPopover = Boolean(sortPopoverAnchorEl);
 
   React.useEffect(() => {
-    if (display === "data") {
+    if (display === "all" || display === "data") {
       setTabPrevPosition("left");
     } else {
       setTabPrevPosition("right");
     }
   }, [display]);
 
+  const descriptions = {
+    all: "Explore the collection of Reports, Charts and Datasets",
+    data: "Explore the collection of Datasets used to create Charts",
+    charts: "Explore the collection of Charts used in Reports",
+    reports: "Explore the collection of Reports",
+  };
+
   return (
-    <React.Fragment>
-      <div
+    <div
+      css={`
+        background: #ffffff;
+      `}
+    >
+      {/* <div
         css={`
           position: relative;
           background: linear-gradient(
@@ -265,21 +293,64 @@ export default function HomeModule() {
             </Grid>
           </Grid>
         </Container>
+
+
+        
         <BottomLeftEllipse css={bottomLeftEllipseCss} />
         <BottomRightEllipse css={bottomRightEllipseCss} />
         <TopRightEllipse css={TopRightEllipseCss} />
-      </div>
+      </div> */}
+
       <Container
         maxWidth="lg"
         ref={exploreViewRef}
         css={`
-          min-height: calc(100vh - 668px);
+          min-height: calc(100vh - 133px);
         `}
       >
-        <Box height={52} />
+        <div css={turnsDataCss}>
+          {isAuthenticated ? (
+            <h1>Welcome {user?.given_name ?? user?.name?.split(" ")[0]}</h1>
+          ) : (
+            <div />
+          )}
+
+          <div
+            css={`
+              ${rowFlexCss} gap: 8px;
+              /* width: 100%; */
+            `}
+          >
+            <Link
+              to="/dataset/new/upload"
+              css={`
+                background: #e492bd;
+              `}
+            >
+              CONNECT DATASET
+            </Link>
+            <Link
+              to="/chart/new/data"
+              css={`
+                background: #64afaa;
+              `}
+            >
+              CREATE CHART
+            </Link>
+            <Link
+              to="/report/new/initial"
+              css={`
+                background: #6061e5;
+              `}
+            >
+              CREATE REPORT
+            </Link>
+          </div>
+        </div>
+        <Box height={24} />
         <Box css={featuredAssetsCss}>
-          <h3>Featured assets in DX:</h3>
-          <Box height={20} />
+          <h3>Library:</h3>
+          <Box height={24} />
           <Grid
             container
             alignContent="space-between"
@@ -291,12 +362,20 @@ export default function HomeModule() {
             <Grid item lg={6} md={6} sm={6}>
               <Tab.Container>
                 <Tab.Left
+                  active={display === "all"}
+                  onClick={() => handleChange("all")}
+                  data-cy="home-all-tab"
+                >
+                  All
+                </Tab.Left>
+                <Tab.Center
                   active={display === "data"}
                   onClick={() => handleChange("data")}
+                  position={tabPrevPosition}
                   data-cy="home-data-tab"
                 >
                   Data
-                </Tab.Left>
+                </Tab.Center>
                 <Tab.Center
                   active={display === "charts"}
                   onClick={() => handleChange("charts")}
@@ -421,18 +500,38 @@ export default function HomeModule() {
                     </div>
                   ))}
                 </Popover>
-                <IconButton
-                  onClick={() => {
-                    setTableView(!tableView);
-                  }}
-                  css={iconButtonCss(tableView)}
-                >
-                  <GridIcon />
-                </IconButton>
+                {display !== "all" && (
+                  <IconButton
+                    onClick={() => {
+                      setTableView(!tableView);
+                    }}
+                    css={iconButtonCss(tableView)}
+                  >
+                    <GridIcon />
+                  </IconButton>
+                )}
               </div>
             </Grid>
           </Grid>
-          <Box height={20} />
+          <div
+            css={`
+              padding-top: 24px;
+              font-size: 14px;
+              font-family: GothamNarrow-Book;
+              color: #000000;
+            `}
+          >
+            {descriptions[display]}
+          </div>
+          {display === "data" ? (
+            <DatasetCategoryList
+              category={category}
+              datasetCategories={datasetCategories}
+              setCategory={setCategory}
+            />
+          ) : (
+            <Box height={24} />
+          )}
         </Box>
         <div
           id="scrollableDiv"
@@ -446,8 +545,7 @@ export default function HomeModule() {
           {displayGrid(searchValue as string, sortValue)}
         </div>
       </Container>
-      <Box height={100} />
-      <HomeFooter />
-    </React.Fragment>
+      <HomeFooter small />
+    </div>
   );
 }
diff --git a/src/app/modules/home-module/style.ts b/src/app/modules/home-module/style.ts
index af2acdb48..d80553d02 100644
--- a/src/app/modules/home-module/style.ts
+++ b/src/app/modules/home-module/style.ts
@@ -1,20 +1,24 @@
 import { css } from "styled-components/macro";
 
 export const turnsDataCss = css`
-  margin-top: 60px;
+  /* margin-top: 60px;
   padding: 0;
   @media screen and (max-width: 768px) {
     justify-content: center;
     align-items: center;
-  }
+  } */
+  margin-top: 80px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 
   h1 {
     font-family: "GothamNarrow-Bold", sans-serif;
-    font-weight: 700;
-    font-size: 40px;
-    line-height: 48px;
-    text-align: center;
-    color: #231d2c;
+    font-weight: 400;
+    font-size: 34px;
+    line-height: 42px;
+    /* text-align: center; */
+    color: #2b3674;
     margin: 0;
     padding: 0;
   }
@@ -32,17 +36,21 @@ export const turnsDataCss = css`
 
   button,
   a {
-    padding: 9px 27px;
+    padding: 8px 24px;
     height: 41px;
-    border-radius: 30px;
+    border-radius: 25px;
     outline: none;
     border: none;
     color: #ffffff;
-    font-family: "Inter", sans-serif;
-    font-weight: 700;
+    font-family: "GothamNarrow-Bold", sans-serif;
+    font-weight: 400;
     font-size: 14px;
     text-transform: uppercase;
     text-decoration: none;
+    font-size: 14px;
+    font-style: normal;
+    line-height: 24px; /* 171.429% */
+    letter-spacing: -0.28px;
 
     :hover {
       opacity: 0.8;
diff --git a/src/app/modules/home-module/sub-modules/explore-assets/index.tsx b/src/app/modules/home-module/sub-modules/explore-assets/index.tsx
index bf09135b6..5273a269f 100644
--- a/src/app/modules/home-module/sub-modules/explore-assets/index.tsx
+++ b/src/app/modules/home-module/sub-modules/explore-assets/index.tsx
@@ -90,6 +90,7 @@ export default function ExploreAssetsModule() {
   }, [display]);
 
   const descriptions = {
+    all: "Explore the collection of Reports, Charts and Datasets",
     data: "Explore the collection of Datasets used to create Charts",
     charts: "Explore the collection of Charts used in Reports",
     reports: "Explore the collection of Reports",
diff --git a/src/app/state/api/action-reducers/assets/index.ts b/src/app/state/api/action-reducers/assets/index.ts
new file mode 100644
index 000000000..f228ecd28
--- /dev/null
+++ b/src/app/state/api/action-reducers/assets/index.ts
@@ -0,0 +1,10 @@
+import { APIModel } from "app/state/api";
+import { ApiCallModel } from "app/state/api/interfaces";
+
+export const AssetGetList: ApiCallModel = {
+  ...APIModel(`${process.env.REACT_APP_API}/assets`),
+};
+
+export const AssetsCount: ApiCallModel = {
+  ...APIModel(`${process.env.REACT_APP_API}/assets/count`),
+};
diff --git a/src/app/state/api/interfaces/index.ts b/src/app/state/api/interfaces/index.ts
index bddee9510..b0fc7bd6f 100644
--- a/src/app/state/api/interfaces/index.ts
+++ b/src/app/state/api/interfaces/index.ts
@@ -287,6 +287,10 @@ export interface StoreModel {
 
     ExternalDatasetDownload: ApiCallModel;
   };
+  assets: {
+    AssetGetList: ApiCallModel;
+    AssetsCount: ApiCallModel;
+  };
   charts: {
     ChartGet: ApiCallModel;
     ChartGetInReport: ApiCallModel;
diff --git a/src/app/state/recoil/atoms/index.ts b/src/app/state/recoil/atoms/index.ts
index 1bd7377d5..a3450bbdf 100644
--- a/src/app/state/recoil/atoms/index.ts
+++ b/src/app/state/recoil/atoms/index.ts
@@ -59,9 +59,9 @@ export const untitledReportAtom = atom({
   default: false,
 });
 
-export const homeDisplayAtom = atom<"data" | "charts" | "reports">({
+export const homeDisplayAtom = atom<"all" | "data" | "charts" | "reports">({
   key: "homeDisplayAtom",
-  default: "reports",
+  default: "all",
 });
 
 export const reportRightPanelViewAtom = atom<
diff --git a/src/app/state/store/index.ts b/src/app/state/store/index.ts
index 47e4782da..04c9ff288 100644
--- a/src/app/state/store/index.ts
+++ b/src/app/state/store/index.ts
@@ -129,6 +129,7 @@ import {
   ReportUpdate,
   ReportsCount,
 } from "app/state/api/action-reducers/reports";
+import { AssetGetList, AssetsCount } from "../api/action-reducers/assets";
 
 const storeContent: StoreModel = {
   // global search
@@ -240,6 +241,10 @@ const storeContent: StoreModel = {
     DatasetCount: persist(DatasetCount),
     DatasetCreate: persist(DatasetCreate),
   },
+  assets: {
+    AssetGetList: AssetGetList,
+    AssetsCount: AssetsCount,
+  },
   charts: {
     ChartGet: persist(ChartGet),
     ChartGetInReport: persist(ChartGetInReport),

From e85d7a3d1bbc5b8db0655db7e6812174cee05783 Mon Sep 17 00:00:00 2001
From: Psami-wondah <okechukwusamuel16@gmail.com>
Date: Fri, 31 May 2024 06:21:05 +0100
Subject: [PATCH 02/12] feat: new file upload view

---
 package.json                                  |   1 +
 src/app/components/AppBar/index.tsx           |  16 +-
 src/app/hooks/useGoogleDrivePicker.tsx        |  99 +++++
 src/app/hooks/useOneDrivePicker.tsx           | 284 ++++++++++++++
 src/app/modules/callback-module/index.tsx     |  45 ++-
 .../modules/common/page-top-spacer/index.tsx  |   2 +-
 .../__test__/add-dataset.test.tsx             |  19 +-
 .../assets/computer-icon.tsx                  |  20 +
 .../assets/upload-options-icons/api.tsx       |  20 +
 .../assets/upload-options-icons/google.tsx    |  52 +++
 .../assets/upload-options-icons/hubspot.tsx   |  32 ++
 .../assets/upload-options-icons/local.tsx     |  20 +
 .../assets/upload-options-icons/microsoft.tsx |  26 ++
 .../assets/upload-options-icons/mongodb.tsx   | 112 ++++++
 .../assets/upload-options-icons/mssql.png     | Bin 0 -> 7307 bytes
 .../assets/upload-options-icons/mysql.png     | Bin 0 -> 2571 bytes
 .../assets/upload-options-icons/postgres.tsx  |  22 ++
 .../assets/upload-options-icons/settings.tsx  |  24 ++
 .../component/dropzone/index.tsx              | 205 +++++-----
 .../component/externalSourcesList.tsx         |  78 ++++
 .../dataset-upload-module/component/tabs.tsx  |  67 ++++
 .../component/uploadOption.tsx                | 196 ++++++++++
 .../modules/dataset-upload-module/style.ts    |  26 +-
 .../upload-steps/addDatasetFragment.tsx       | 361 ++++++++++++------
 .../upload-steps/externalSearch.tsx           | 116 +++---
 .../upload-steps/index.tsx                    | 127 +++---
 .../home-module/components/All/assetsGrid.tsx | 188 +++++----
 .../components/Breadcrumbs/index.tsx          |  81 ++++
 .../components/Charts/chartsGrid.tsx          |   3 +-
 .../components/Datasets/datasetsGrid.tsx      |   3 +-
 .../home-module/components/Filter/index.tsx   |   3 +-
 .../home-module/components/Footer/index.tsx   |   2 +-
 .../components/Footer/smallFooter.tsx         |  68 ++++
 .../components/Reports/reportsGrid.tsx        |   3 +-
 .../home-module/components/Table/index.tsx    |  12 +-
 src/app/modules/home-module/index.tsx         | 175 +--------
 src/app/modules/home-module/style.ts          |   8 +-
 yarn.lock                                     |  12 +
 38 files changed, 1881 insertions(+), 647 deletions(-)
 create mode 100644 src/app/hooks/useGoogleDrivePicker.tsx
 create mode 100644 src/app/hooks/useOneDrivePicker.tsx
 create mode 100644 src/app/modules/dataset-upload-module/assets/computer-icon.tsx
 create mode 100644 src/app/modules/dataset-upload-module/assets/upload-options-icons/api.tsx
 create mode 100644 src/app/modules/dataset-upload-module/assets/upload-options-icons/google.tsx
 create mode 100644 src/app/modules/dataset-upload-module/assets/upload-options-icons/hubspot.tsx
 create mode 100644 src/app/modules/dataset-upload-module/assets/upload-options-icons/local.tsx
 create mode 100644 src/app/modules/dataset-upload-module/assets/upload-options-icons/microsoft.tsx
 create mode 100644 src/app/modules/dataset-upload-module/assets/upload-options-icons/mongodb.tsx
 create mode 100644 src/app/modules/dataset-upload-module/assets/upload-options-icons/mssql.png
 create mode 100644 src/app/modules/dataset-upload-module/assets/upload-options-icons/mysql.png
 create mode 100644 src/app/modules/dataset-upload-module/assets/upload-options-icons/postgres.tsx
 create mode 100644 src/app/modules/dataset-upload-module/assets/upload-options-icons/settings.tsx
 create mode 100644 src/app/modules/dataset-upload-module/component/externalSourcesList.tsx
 create mode 100644 src/app/modules/dataset-upload-module/component/tabs.tsx
 create mode 100644 src/app/modules/dataset-upload-module/component/uploadOption.tsx
 create mode 100644 src/app/modules/home-module/components/Breadcrumbs/index.tsx
 create mode 100644 src/app/modules/home-module/components/Footer/smallFooter.tsx

diff --git a/package.json b/package.json
index 14bc83db9..ac0ebaa5f 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@auth0/auth0-react": "^2.2.1",
+    "@azure/msal-browser": "^3.15.0",
     "@craco/craco": "^6.4.3",
     "@devhammed/use-cookie": "^1.1.1",
     "@draft-js-plugins/anchor": "^4.1.4",
diff --git a/src/app/components/AppBar/index.tsx b/src/app/components/AppBar/index.tsx
index de4a44962..cd5d482ec 100644
--- a/src/app/components/AppBar/index.tsx
+++ b/src/app/components/AppBar/index.tsx
@@ -229,16 +229,17 @@ export function AppBar() {
                   justify-content: flex-end;
                 `}
               >
-                <div css={navLinkcss("why-dataXplorer", navLocation)}>
-                  <NavLink to="/why-dataXplorer" data-cy="nav-why">
-                    <b>Why DataXplorer?</b>
-                  </NavLink>
-                </div>
+                {" "}
                 <div css={navLinkcss("explore", navLocation)}>
                   <NavLink to="/explore" data-cy="nav-explore">
                     <b>Explore </b>
                   </NavLink>
                 </div>
+                <div css={navLinkcss("why-dataXplorer", navLocation)}>
+                  <NavLink to="/why-dataXplorer" data-cy="nav-why">
+                    <b>Why DataXplorer?</b>
+                  </NavLink>
+                </div>
                 <div css={navLinkcss("about", navLocation)}>
                   <Link to="/about" data-cy="nav-about">
                     <b>About</b>
@@ -290,7 +291,6 @@ const ActionMenu = () => {
     <div>
       <div
         css={`
-          gap: 1px;
           display: flex;
           position: relative;
 
@@ -309,7 +309,7 @@ const ActionMenu = () => {
               height: 34px;
               border-radius: 24px;
               &:hover {
-                opacity: 1;
+                opacity: 0.8;
               }
             }
             /* :nth-child(2) {
@@ -351,7 +351,7 @@ const ActionMenu = () => {
               min-width: 33px;
               height: 33px;
               display: flex;
-              margin-left: 20px;
+              margin-left: 16px;
               border-radius: 50%;
               align-items: center;
               background: #b5b5db;
diff --git a/src/app/hooks/useGoogleDrivePicker.tsx b/src/app/hooks/useGoogleDrivePicker.tsx
new file mode 100644
index 000000000..d6e62d8df
--- /dev/null
+++ b/src/app/hooks/useGoogleDrivePicker.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import useDrivePicker from "react-google-drive-picker";
+import {
+  CallbackDoc,
+  PickerCallback,
+} from "react-google-drive-picker/dist/typeDefs";
+import axios from "axios";
+import { useCookie } from "react-use";
+
+interface Props {
+  onFileSubmit: (file: File) => void;
+  onCancel: () => void;
+  googleDriveToken: string | null;
+  setGoogleDriveToken: (
+    newValue: string,
+    options?: Cookies.CookieAttributes | undefined
+  ) => void;
+}
+
+function useGoogleDrivePicker({
+  onCancel,
+  onFileSubmit,
+  googleDriveToken,
+  setGoogleDriveToken,
+}: Props) {
+  const [openPicker, tokenFromPicker] = useDrivePicker();
+
+  const handleGoogleDriveFilePicker = async (
+    file: CallbackDoc,
+    accessToken: string
+  ) => {
+    try {
+      const response = await axios({
+        url: `https://www.googleapis.com/drive/v3/files/${file.id}${
+          file.type === "file" ? "?alt=media" : "/export?mimeType=text/csv"
+        }`,
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+        responseType: "blob", // important
+      });
+
+      const b = response?.data;
+      const gfile = new File([b], file.name, { type: "text/csv" });
+      onFileSubmit(gfile);
+    } catch (e) {
+      console.log(e, "handleGoogleDriveFilePicker error");
+    }
+  };
+  React.useEffect(() => {
+    if (process.env.REACT_APP_CYPRESS_TEST === "true") {
+      window.handleGoogleDriveFilePicker = function (file: any, token: string) {
+        handleGoogleDriveFilePicker(file, token);
+      };
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (tokenFromPicker) {
+      setGoogleDriveToken(tokenFromPicker.access_token, {
+        expires: new Date(new Date().getTime() + 3540 * 1000),
+        httpsOnly: true,
+        secure: true,
+        sameSite: "strict",
+      });
+    }
+  }, [tokenFromPicker]);
+
+  const getAccessTokenAndOpenPicker = async () => {
+    try {
+      //opens google drive picker
+      openPicker({
+        clientId: process.env.REACT_APP_GOOGLE_API_CLIENT_ID as string,
+        developerKey: process.env.REACT_APP_GOOGLE_API_DEV_KEY as string,
+        viewId: "SPREADSHEETS",
+        supportDrives: true,
+        token: googleDriveToken!,
+        setSelectFolderEnabled: true,
+        callbackFunction: (d: PickerCallback) => {
+          if (d.docs?.[0]) {
+            handleGoogleDriveFilePicker(
+              d.docs[0],
+              googleDriveToken! ?? tokenFromPicker?.access_token
+            );
+          } else if (d.action === "cancel") {
+            onCancel();
+          }
+        },
+      });
+    } catch (e) {
+      console.log(e, "error");
+    }
+  };
+
+  return { getAccessTokenAndOpenPicker };
+}
+
+export default useGoogleDrivePicker;
diff --git a/src/app/hooks/useOneDrivePicker.tsx b/src/app/hooks/useOneDrivePicker.tsx
new file mode 100644
index 000000000..108a5e91d
--- /dev/null
+++ b/src/app/hooks/useOneDrivePicker.tsx
@@ -0,0 +1,284 @@
+import axios from "axios";
+import React, { useEffect, useMemo, useState } from "react";
+import { PopupRequest, PublicClientApplication } from "@azure/msal-browser";
+import { v4 } from "uuid";
+interface Props {
+  onFileSubmit: (file: File) => void;
+  onCancel: () => void;
+  onDownloadStart: () => void;
+}
+
+export const useOneDrivePicker = ({
+  onCancel,
+  onFileSubmit,
+  onDownloadStart,
+}: Props) => {
+  const [app, setApp] = useState<PublicClientApplication | null>(null);
+  const baseUrl = "https://onedrive.live.com/picker";
+
+  const [connected, setConnected] = useState(false);
+
+  const msalParams = {
+    auth: {
+      authority: "https://login.microsoftonline.com/consumers",
+      clientId: process.env.REACT_APP_ONEDRIVE_CLIENT_ID!,
+      redirectUri: window.location.origin,
+    },
+  };
+
+  const initializeApp = async () => {
+    const msalInstance = new PublicClientApplication(msalParams);
+    await msalInstance.initialize();
+    setApp(msalInstance);
+  };
+
+  useEffect(() => {
+    initializeApp();
+  }, []);
+
+  const channelId = useMemo(() => v4(), []);
+
+  const params = {
+    sdk: "8.0",
+    entry: {
+      oneDrive: {
+        files: {},
+      },
+    },
+    authentication: {},
+    messaging: {
+      origin: window.location.origin,
+      channelId: channelId,
+    },
+    typesAndSources: {
+      mode: "files",
+      pivots: {
+        oneDrive: true,
+        recent: true,
+      },
+    },
+  };
+
+  let win: Window | null;
+  let port: MessagePort | null;
+
+  async function launchPicker() {
+    const authToken = await getToken();
+    win = window.open("", "Picker", "height=600,width=1200");
+
+    if (win) {
+      const queryString = new URLSearchParams({
+        filePicker: JSON.stringify(params),
+      });
+
+      const url = `${baseUrl}?${queryString}`;
+
+      const form = win.document.createElement("form");
+      form.setAttribute("action", url);
+      form.setAttribute("method", "POST");
+      win.document.body.append(form);
+
+      const input = win.document.createElement("input");
+      input.setAttribute("type", "hidden");
+      input.setAttribute("name", "access_token");
+      input.setAttribute("value", authToken);
+      form.appendChild(input);
+
+      form.submit();
+
+      window.addEventListener("message", (event) => {
+        if (event.source && event.source === win) {
+          const message = event.data;
+
+          if (
+            message.type === "initialize" &&
+            message.channelId === params.messaging.channelId
+          ) {
+            port = event.ports[0];
+
+            port.addEventListener("message", messageListener);
+
+            port.start();
+
+            port.postMessage({
+              type: "activate",
+            });
+          }
+        }
+      });
+    }
+  }
+
+  async function messageListener(message: MessageEvent) {
+    if (port === null) return;
+    if (win === null) return;
+    switch (message.data.type) {
+      case "notification":
+        break;
+
+      case "command":
+        port.postMessage({
+          type: "acknowledge",
+          id: message.data.id,
+        });
+
+        const command = message.data.data;
+
+        switch (command.command) {
+          case "authenticate":
+            // getToken is from scripts/auth.js
+            const token = await getToken();
+
+            if (typeof token !== "undefined" && token !== null) {
+              port.postMessage({
+                type: "result",
+                id: message.data.id,
+                data: {
+                  result: "token",
+                  token,
+                },
+              });
+            } else {
+              console.error(
+                `Could not get auth token for command: ${JSON.stringify(
+                  command
+                )}`
+              );
+            }
+
+            break;
+
+          case "close":
+            win.close();
+            onCancel();
+            break;
+
+          case "pick":
+            downloadFiles(command);
+
+            port.postMessage({
+              type: "result",
+              id: message.data.id,
+              data: {
+                result: "success",
+              },
+            });
+
+            win.close();
+
+            break;
+
+          default:
+            console.warn(`Unsupported command: ${JSON.stringify(command)}`, 2);
+
+            port.postMessage({
+              result: "error",
+              error: {
+                code: "unsupportedCommand",
+                message: command.command,
+              },
+              isExpected: true,
+            });
+            break;
+        }
+
+        break;
+    }
+  }
+
+  const downloadFiles = async (commandData: any) => {
+    onDownloadStart();
+    let data = commandData.items[0];
+    let tokenObj = getToken();
+
+    let url = `${data["@sharePoint.endpoint"]}/drives/${data.parentReference.driveId}/items/${data.id}`;
+    const accessToken = await tokenObj;
+
+    try {
+      const response = await axios({
+        url: url,
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+
+      const downloadUrl = response.data["@content.downloadUrl"];
+
+      const downloadResponse = await axios({
+        url: downloadUrl,
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+        responseType: "blob",
+      });
+
+      const b = downloadResponse?.data;
+      const gfile = new File([b], data.name, { type: "text/csv" });
+
+      onFileSubmit(gfile);
+    } catch (e) {
+      console.log(e, " error");
+    }
+  };
+
+  async function getToken() {
+    if (!app) return "";
+    let accessToken = "";
+
+    const authParams: PopupRequest = { scopes: [`OneDrive.ReadOnly`] };
+
+    try {
+      // see if we have already the idtoken saved
+      const resp = await app.acquireTokenSilent(authParams);
+      accessToken = resp.accessToken;
+      setConnected(true);
+    } catch (e) {
+      // per examples we fall back to popup
+      const resp = await app.loginPopup(authParams);
+
+      app.setActiveAccount(resp.account);
+
+      if (resp.idToken) {
+        const resp2 = await app.acquireTokenSilent(authParams);
+        accessToken = resp2.accessToken;
+        setConnected(true);
+      }
+    }
+
+    return accessToken;
+  }
+
+  async function clearToken() {
+    if (app) {
+      await app.clearCache();
+      setConnected(false);
+    }
+  }
+
+  async function checkToken() {
+    if (!app) return false;
+    let accessToken = "";
+
+    const authParams = { scopes: [`OneDrive.ReadOnly`] };
+    try {
+      // see if we have already the idtoken saved
+      const resp = await app.acquireTokenSilent(authParams);
+      accessToken = resp.accessToken;
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  useEffect(() => {
+    if (app) {
+      checkToken().then((c) => {
+        setConnected(c);
+      });
+    }
+  }, [app]);
+
+  return { launchPicker, clearToken, connected };
+};
diff --git a/src/app/modules/callback-module/index.tsx b/src/app/modules/callback-module/index.tsx
index 34f425df2..f1ca01d0a 100644
--- a/src/app/modules/callback-module/index.tsx
+++ b/src/app/modules/callback-module/index.tsx
@@ -4,7 +4,7 @@ import { useHistory } from "react-router-dom";
 import { useAuth0 } from "@auth0/auth0-react";
 import { PageLoader } from "app/modules/common/page-loader";
 import axios from "axios";
-import { useTitle } from "react-use";
+import { useCookie, useTitle } from "react-use";
 
 function AuthCallbackModule() {
   useTitle("DX DataXplorer - Auth Callback");
@@ -13,11 +13,12 @@ function AuthCallbackModule() {
   const { error, isAuthenticated, getAccessTokenSilently } = useAuth0();
   const [loading, setLoading] = React.useState(true);
 
-  const duplicateAssets = async () => {
+  const [googleDriveToken, setGoogleDriveToken] = useCookie("googleDriveToken");
+
+  const duplicateReport = async (id: string) => {
     getAccessTokenSilently().then(async (newToken) => {
-      await axios.post(
-        `${process.env.REACT_APP_API}/users/duplicate-assets`,
-        {},
+      const response = await axios.get(
+        `${process.env.REACT_APP_API}/users/duplicate-landing-report/${id}`,
         {
           headers: {
             "Content-Type": "application/json",
@@ -25,13 +26,20 @@ function AuthCallbackModule() {
           },
         }
       );
+      if (response.data) {
+        localStorage.removeItem("duplicateReportAfterSignIn");
+        history.push(`/report/${response.data.id}/edit`);
+      } else {
+        history.replace("/");
+      }
     });
   };
 
-  const duplicateReport = async (id: string) => {
+  const duplicateAssets = async () => {
     getAccessTokenSilently().then(async (newToken) => {
-      const response = await axios.get(
-        `${process.env.REACT_APP_API}/users/duplicate-landing-report/${id}`,
+      await axios.post(
+        `${process.env.REACT_APP_API}/users/duplicate-assets`,
+        {},
         {
           headers: {
             "Content-Type": "application/json",
@@ -39,11 +47,21 @@ function AuthCallbackModule() {
           },
         }
       );
-      if (response.data) {
-        localStorage.removeItem("duplicateReportAfterSignIn");
-        history.push(`/report/${response.data.id}/edit`);
-      } else {
-        history.replace("/");
+      const response = await axios.get(
+        `${process.env.REACT_APP_API}/users/google-drive/user-token`,
+        {
+          headers: {
+            Authorization: `Bearer ${newToken}`,
+          },
+        }
+      );
+      if (response.data.access_token) {
+        setGoogleDriveToken(response.data.access_token, {
+          expires: new Date(response.data.token_details.exp * 1000),
+          httpsOnly: true,
+          secure: true,
+          sameSite: "strict",
+        });
       }
     });
   };
@@ -55,6 +73,7 @@ function AuthCallbackModule() {
         await duplicateAssets();
         setLoading(false);
       })();
+
       const reportId = localStorage.getItem("duplicateReportAfterSignIn");
       if (reportId) {
         (async () => {
diff --git a/src/app/modules/common/page-top-spacer/index.tsx b/src/app/modules/common/page-top-spacer/index.tsx
index c19832f80..8e5a44f89 100644
--- a/src/app/modules/common/page-top-spacer/index.tsx
+++ b/src/app/modules/common/page-top-spacer/index.tsx
@@ -4,7 +4,7 @@ export const PageTopSpacer = () => (
   <div
     css={`
       width: 100%;
-      height: 70px;
+      height: 98px;
 
       @media (max-width: 767px) {
         height: 60px;
diff --git a/src/app/modules/dataset-upload-module/__test__/add-dataset.test.tsx b/src/app/modules/dataset-upload-module/__test__/add-dataset.test.tsx
index 4f1f4e6c5..5bc8ce439 100644
--- a/src/app/modules/dataset-upload-module/__test__/add-dataset.test.tsx
+++ b/src/app/modules/dataset-upload-module/__test__/add-dataset.test.tsx
@@ -17,10 +17,7 @@ jest.mock("react-google-drive-picker", () => {
 
 jest.mock("axios");
 
-const appFn = (
-  mockSetSelectedFile: jest.Mock<any, any, any>,
-  mockSetIsExternalSearch: jest.Mock<any, any, any>
-) => {
+const appFn = (mockSetSelectedFile: jest.Mock<any, any, any>) => {
   const mockStore = createStore({
     AuthToken: AuthTokenState,
   });
@@ -31,7 +28,9 @@ const appFn = (
         onFileSubmit={mockSetSelectedFile}
         disabled={false}
         processingError={null}
-        setIsExternalSearch={mockSetIsExternalSearch}
+        activeOption={null}
+        setActiveOption={jest.fn()}
+        setActiveStep={jest.fn()}
       />
     </StoreProvider>
   );
@@ -39,8 +38,7 @@ const appFn = (
 
 test("local upload of dataset", async () => {
   const mockSetSelectedFile = jest.fn();
-  const mockSetIsExternalSearch = jest.fn();
-  const app = appFn(mockSetSelectedFile, mockSetIsExternalSearch);
+  const app = appFn(mockSetSelectedFile);
   render(app);
 
   const file = new File(["(⌐□_□)"], "chucknorris.csv", { type: "text/csv" });
@@ -61,21 +59,18 @@ test("external search of dataset", async () => {
   const user = userEvent.setup();
 
   const mockSetSelectedFile = jest.fn();
-  const mockSetIsExternalSearch = jest.fn();
 
-  const app = appFn(mockSetSelectedFile, mockSetIsExternalSearch);
+  const app = appFn(mockSetSelectedFile);
 
   render(app);
 
   const searchButton = screen.getByText(/external search/i);
   await user.click(searchButton);
-  expect(mockSetIsExternalSearch).toHaveBeenCalledWith(true);
 });
 
 test("google drive button", async () => {
   const mockSetSelectedFile = jest.fn();
-  const mockSetIsExternalSearch = jest.fn();
-  const app = appFn(mockSetSelectedFile, mockSetIsExternalSearch);
+  const app = appFn(mockSetSelectedFile);
   mockOpenPicker.mockImplementation(({ callbackFunction }) => {
     callbackFunction({ docs: [{ id: "123", name: "test.csv", type: "file" }] });
   });
diff --git a/src/app/modules/dataset-upload-module/assets/computer-icon.tsx b/src/app/modules/dataset-upload-module/assets/computer-icon.tsx
new file mode 100644
index 000000000..1d17bbcc0
--- /dev/null
+++ b/src/app/modules/dataset-upload-module/assets/computer-icon.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const ComputerIcon = ({ color }: { color: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="21"
+      height="20"
+      viewBox="0 0 21 20"
+      fill="none"
+    >
+      <path
+        d="M0.5 2.5C0.5 1.96957 0.710714 1.46086 1.08579 1.08579C1.46086 0.710714 1.96957 0.5 2.5 0.5H18.5C19.0304 0.5 19.5391 0.710714 19.9142 1.08579C20.2893 1.46086 20.5 1.96957 20.5 2.5V13.5C20.5 14.0304 20.2893 14.5391 19.9142 14.9142C19.5391 15.2893 19.0304 15.5 18.5 15.5H11.5V17.5H14.5C14.7652 17.5 15.0196 17.6054 15.2071 17.7929C15.3946 17.9804 15.5 18.2348 15.5 18.5C15.5 18.7652 15.3946 19.0196 15.2071 19.2071C15.0196 19.3946 14.7652 19.5 14.5 19.5H6.5C6.23478 19.5 5.98043 19.3946 5.79289 19.2071C5.60536 19.0196 5.5 18.7652 5.5 18.5C5.5 18.2348 5.60536 17.9804 5.79289 17.7929C5.98043 17.6054 6.23478 17.5 6.5 17.5H9.5V15.5H2.5C1.96957 15.5 1.46086 15.2893 1.08579 14.9142C0.710714 14.5391 0.5 14.0304 0.5 13.5V2.5ZM18.5 13.5V2.5H2.5V13.5H18.5Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default ComputerIcon;
diff --git a/src/app/modules/dataset-upload-module/assets/upload-options-icons/api.tsx b/src/app/modules/dataset-upload-module/assets/upload-options-icons/api.tsx
new file mode 100644
index 000000000..feb335894
--- /dev/null
+++ b/src/app/modules/dataset-upload-module/assets/upload-options-icons/api.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const ApiIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="30"
+      height="31"
+      viewBox="0 0 30 31"
+      fill="none"
+    >
+      <path
+        d="M23.3333 22.1667L16.6667 15.5V10.2C18.6 9.5 20 7.66667 20 5.5C20 2.73333 17.7667 0.5 15 0.5C12.2333 0.5 10 2.73333 10 5.5C10 7.66667 11.4 9.5 13.3333 10.2V15.5L6.66667 22.1667H0V30.5H8.33333V25.4167L15 18.4167L21.6667 25.4167V30.5H30V22.1667H23.3333Z"
+        fill="#868A9D"
+      />
+    </svg>
+  );
+};
+
+export default ApiIcon;
diff --git a/src/app/modules/dataset-upload-module/assets/upload-options-icons/google.tsx b/src/app/modules/dataset-upload-module/assets/upload-options-icons/google.tsx
new file mode 100644
index 000000000..1d4c7d7d6
--- /dev/null
+++ b/src/app/modules/dataset-upload-module/assets/upload-options-icons/google.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+
+const GoogleIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="35"
+      height="31"
+      viewBox="0 0 35 31"
+      fill="none"
+    >
+      <g clip-path="url(#clip0_15369_10908)">
+        <path
+          d="M3.3533 26.1812L4.82336 28.7358C5.12882 29.2737 5.56789 29.6964 6.08338 30.0037C7.55994 28.118 8.58755 26.6709 9.16671 25.6626C9.75434 24.6393 10.4766 23.0386 11.3335 20.8606C9.02414 20.5547 7.27414 20.4019 6.08351 20.4019C4.94067 20.4019 3.19067 20.5547 0.833252 20.8606C0.833252 21.456 0.985986 22.0515 1.29146 22.5894L3.3533 26.1812Z"
+          fill="#0066DA"
+        />
+        <path
+          d="M28.9165 30.0037C29.4322 29.6964 29.8712 29.2737 30.1766 28.736L30.7875 27.6795L33.7086 22.5894C34.0084 22.0631 34.1663 21.4672 34.1667 20.8606C31.7956 20.5547 30.0488 20.4019 28.9262 20.4019C27.7197 20.4019 25.9728 20.5547 23.6855 20.8606C24.5323 23.0505 25.2451 24.6512 25.8238 25.6626C26.4076 26.683 27.4384 28.1299 28.9165 30.0037Z"
+          fill="#EA4335"
+        />
+        <path
+          d="M17.5001 10.1041C19.2085 8.0283 20.3858 6.42755 21.032 5.3021C21.5525 4.39581 22.1253 2.94873 22.7503 0.961004C22.2348 0.653668 21.643 0.5 21.032 0.5H13.9682C13.3573 0.5 12.7656 0.672926 12.25 0.961004C13.0451 3.24074 13.7198 4.86323 14.274 5.82834C14.8865 6.89498 15.9619 8.32018 17.5001 10.1041Z"
+          fill="#00832D"
+        />
+        <path
+          d="M23.6666 20.8606H11.3335L6.0835 30.0037C6.59886 30.311 7.19066 30.4647 7.80159 30.4647H27.1985C27.8094 30.4647 28.4013 30.2917 28.9167 30.0035L23.6667 20.8606H23.6666Z"
+          fill="#2684FC"
+        />
+        <path
+          d="M17.5001 10.1046L12.25 0.96167C11.7344 1.26901 11.2954 1.6915 10.9899 2.2294L1.29146 19.1325C0.991602 19.6587 0.833648 20.2547 0.833252 20.8612H11.3335L17.5002 10.1046H17.5001Z"
+          fill="#00AC47"
+        />
+        <path
+          d="M28.8596 10.6808L24.0103 2.22915C23.7049 1.69125 23.2657 1.26876 22.7502 0.961426L17.5002 10.1045L23.6666 20.8611H34.1479C34.1479 20.2656 33.9952 19.6703 33.6897 19.1324L28.8596 10.6808Z"
+          fill="#FFBA00"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_15369_10908">
+          <rect
+            width="33.3333"
+            height="30"
+            fill="white"
+            transform="translate(0.833252 0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default GoogleIcon;
diff --git a/src/app/modules/dataset-upload-module/assets/upload-options-icons/hubspot.tsx b/src/app/modules/dataset-upload-module/assets/upload-options-icons/hubspot.tsx
new file mode 100644
index 000000000..1cb69cbe5
--- /dev/null
+++ b/src/app/modules/dataset-upload-module/assets/upload-options-icons/hubspot.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+const HubspotIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="30"
+      height="31"
+      viewBox="0 0 30 31"
+      fill="none"
+    >
+      <g clip-path="url(#clip0_15369_7042)">
+        <path
+          d="M27.5281 14.7504C26.8598 13.6096 25.9061 12.6623 24.7609 12.0015C23.8866 11.4934 22.9825 11.1706 21.9616 11.031V7.37572C22.4567 7.17058 22.8788 6.82163 23.1734 6.37401C23.468 5.92638 23.6216 5.40067 23.6142 4.86484C23.616 4.503 23.5463 4.14436 23.4091 3.80954C23.2719 3.47472 23.0698 3.17031 22.8146 2.9138C22.5594 2.6573 22.256 2.45376 21.9218 2.31487C21.5877 2.17598 21.2294 2.10448 20.8676 2.10449C20.1346 2.10448 19.4316 2.39501 18.9125 2.91242C18.3933 3.42982 18.1005 4.13191 18.0981 4.86484C18.0981 5.98638 18.6932 6.94312 19.7163 7.37572V11.0104C18.8688 11.1331 18.0465 11.3912 17.2809 11.7749L7.49609 4.36587C7.56476 4.10723 7.62427 3.83944 7.62427 3.55791C7.62427 1.86873 6.25554 0.5 4.56636 0.5C2.87719 0.5 1.51074 1.86873 1.51074 3.55791C1.51074 5.24708 2.87948 6.61582 4.56865 6.61582C5.14544 6.61582 5.67874 6.44644 6.1388 6.16949L6.77968 6.65473L15.5574 12.9834C15.0928 13.4091 14.6602 13.8944 14.3146 14.4391C13.6142 15.5492 13.1862 16.7692 13.1862 18.1013V18.3759C13.1893 19.2793 13.352 20.1751 13.6668 21.0219C13.9324 21.7451 14.3215 22.4043 14.8044 22.9994L11.8884 25.9223C11.0255 25.6019 10.0573 25.8147 9.405 26.467C8.96096 26.9088 8.71147 27.5108 8.71376 28.1379C8.71605 28.7651 8.96096 29.3624 9.40729 29.8088C9.85361 30.2551 10.451 30.5023 11.0781 30.5023C11.7053 30.5023 12.3073 30.2551 12.749 29.8088C13.1908 29.3624 13.4425 28.7651 13.4402 28.1379C13.4401 27.8972 13.403 27.6579 13.3304 27.4284L16.3425 24.4162C16.7545 24.7023 17.2008 24.9427 17.6815 25.1487C18.6694 25.582 19.7362 25.8064 20.8149 25.8079H21.0209C22.2844 25.8079 23.4769 25.5103 24.5961 24.9038C25.7466 24.2868 26.7132 23.3763 27.3977 22.2647C28.1004 21.1432 28.4849 19.9003 28.4849 18.5339V18.4652C28.4849 17.1217 28.1736 15.8834 27.5236 14.7481L27.5281 14.7504ZM23.85 21.0722C23.0328 21.9809 22.0921 22.5417 21.0301 22.5417H20.8287C20.2221 22.5417 19.627 22.3746 19.0479 22.0679C18.413 21.7377 17.875 21.2478 17.4869 20.6465C17.0658 20.0514 16.8369 19.4014 16.8369 18.7124V18.5064C16.8369 17.8289 16.9674 17.1857 17.2947 16.5792C17.6449 15.8925 18.1187 15.4004 18.7481 14.9907C19.3775 14.581 20.0253 14.3842 20.7623 14.3842H20.831C21.4947 14.3842 22.1287 14.5146 22.7238 14.8191C23.3267 15.1361 23.8388 15.6017 24.2116 16.1718C24.5807 16.7435 24.809 17.3945 24.8776 18.0715L24.8937 18.4995C24.8937 19.4311 24.5366 20.294 23.8248 21.0768L23.85 21.0722Z"
+          fill="#F8761F"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_15369_7042">
+          <rect
+            width="30"
+            height="30"
+            fill="white"
+            transform="translate(0 0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default HubspotIcon;
diff --git a/src/app/modules/dataset-upload-module/assets/upload-options-icons/local.tsx b/src/app/modules/dataset-upload-module/assets/upload-options-icons/local.tsx
new file mode 100644
index 000000000..ff2dcc6cd
--- /dev/null
+++ b/src/app/modules/dataset-upload-module/assets/upload-options-icons/local.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const LocalIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="31"
+      height="29"
+      viewBox="0 0 31 29"
+      fill="none"
+    >
+      <path
+        d="M11.5526 11.42H19.4474V28.5H11.5526V11.42ZM22.6053 28.5H27.3421C29.0789 28.5 30.5 27.1 30.5 25.3889V11.3889H22.6053V28.5ZM27.3421 0.5H3.65789C1.92105 0.5 0.5 1.9 0.5 3.61111V8.27778H30.5V3.61111C30.5 1.9 29.0789 0.5 27.3421 0.5ZM0.5 25.3889C0.5 27.1 1.92105 28.5 3.65789 28.5H8.39474V11.3889H0.5V25.3889Z"
+        fill="#868A9D"
+      />
+    </svg>
+  );
+};
+
+export default LocalIcon;
diff --git a/src/app/modules/dataset-upload-module/assets/upload-options-icons/microsoft.tsx b/src/app/modules/dataset-upload-module/assets/upload-options-icons/microsoft.tsx
new file mode 100644
index 000000000..c46804546
--- /dev/null
+++ b/src/app/modules/dataset-upload-module/assets/upload-options-icons/microsoft.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+const MicrosoftIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="30"
+      height="31"
+      viewBox="0 0 30 31"
+      fill="none"
+    >
+      <path d="M14.2579 14.755H0V0.49707H14.2579V14.755Z" fill="#F1511B" />
+      <path
+        d="M30.0001 14.755H15.7424V0.49707H30.0001V14.755Z"
+        fill="#80CC28"
+      />
+      <path d="M14.2575 30.5026H0V16.2449H14.2575V30.5026Z" fill="#07A6F0" />
+      <path
+        d="M30.0001 30.5026H15.7424V16.2449H30.0001V30.5026Z"
+        fill="#FBBC09"
+      />
+    </svg>
+  );
+};
+
+export default MicrosoftIcon;
diff --git a/src/app/modules/dataset-upload-module/assets/upload-options-icons/mongodb.tsx b/src/app/modules/dataset-upload-module/assets/upload-options-icons/mongodb.tsx
new file mode 100644
index 000000000..be52e5bcf
--- /dev/null
+++ b/src/app/modules/dataset-upload-module/assets/upload-options-icons/mongodb.tsx
@@ -0,0 +1,112 @@
+import React from "react";
+
+const MongoDbIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="36"
+      height="37"
+      viewBox="0 0 36 37"
+      fill="none"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M24.7606 12.5408C25.2121 13.8466 25.5372 15.1797 25.6441 16.5615C25.7768 18.2757 25.7161 19.9779 25.3546 21.664C25.3448 21.7104 25.324 21.754 25.3085 21.799C25.1952 21.7992 25.0796 21.7852 24.9688 21.8023C24.0325 21.9494 23.0971 22.1019 22.1616 22.2535C21.1947 22.4101 20.2263 22.5606 19.2611 22.7279C18.9191 22.787 18.4958 22.7164 18.3577 23.1895C18.3538 23.2024 18.3144 23.2046 18.2916 23.212L18.3383 20.3851C18.3223 18.1115 18.3065 15.8379 18.2908 13.5642L18.7413 13.4869C19.4782 13.3662 20.2151 13.2439 20.9525 13.1266C21.8326 12.9868 22.7134 12.851 23.594 12.7146C23.9824 12.6541 24.3714 12.5987 24.7606 12.5408Z"
+        fill="#439934"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.3613 31.4527C16.886 31.044 16.3941 30.6534 15.9384 30.2236C13.4868 27.9112 11.6935 25.1895 10.8104 21.9082C10.5671 21.0051 10.4048 20.0874 10.3528 19.1542C10.3162 18.5011 10.2634 17.8421 10.3095 17.1925C10.4324 15.4645 10.6822 13.7531 11.189 12.0886L11.2168 12.0498C11.266 12.1153 11.3369 12.1733 11.3619 12.2472C11.8567 13.7041 12.3477 15.1621 12.8362 16.621C14.3713 21.2053 15.9044 25.7908 17.442 30.3741C17.4721 30.4635 17.55 30.5369 17.606 30.6176L17.3613 31.4527Z"
+        fill="#45A538"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M24.7607 12.5408C24.3714 12.5987 23.9822 12.6541 23.5938 12.714C22.7132 12.8504 21.8323 12.9863 20.9523 13.126C20.2148 13.2433 19.4779 13.3657 18.7411 13.4863L18.2905 13.5637L18.2871 13.2698C18.2722 13.0282 18.2466 12.7868 18.2438 12.5453C18.2244 11.0046 18.2123 9.46388 18.1932 7.92319C18.1814 6.95879 18.1637 5.99466 18.144 5.03054C18.1319 4.43147 18.1189 3.83213 18.0919 3.23391C18.0773 2.91244 18.0256 2.59266 18.0045 2.27119C17.9927 2.08641 18.009 1.90022 18.0126 1.7146C18.2424 2.15982 18.4671 2.60841 18.7034 3.05026C19.0766 3.74888 19.6712 4.26357 20.2064 4.82522C22.3222 7.04485 23.8244 9.6256 24.7607 12.5408Z"
+        fill="#46A037"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M18.2914 23.2117C18.3142 23.2044 18.3538 23.2022 18.3575 23.1892C18.4956 22.7162 18.9189 22.7868 19.2609 22.7277C20.2261 22.5606 21.1945 22.4099 22.1614 22.2532C23.0968 22.1016 24.0323 21.9492 24.9686 21.8021C25.0794 21.7847 25.195 21.799 25.3083 21.7987C25.1334 22.4231 24.9956 23.061 24.7737 23.6682C24.5217 24.357 24.2168 25.0292 23.8931 25.6881C23.4093 26.6734 22.8066 27.5922 22.1063 28.434C21.5666 29.0831 20.965 29.683 20.362 30.2756C20.0287 30.6033 19.6358 30.8702 19.2702 31.1646L19.1754 31.1L18.8339 30.808L18.4807 30.0337C18.2374 29.1273 18.1097 28.2045 18.0886 27.2668L18.0951 27.109L18.1432 26.4267C18.1592 26.1938 18.1806 25.9612 18.1904 25.7278C18.2267 24.8891 18.2582 24.0504 18.2914 23.2117Z"
+        fill="#409433"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M18.2913 23.2118C18.2581 24.0505 18.2266 24.8891 18.1909 25.7281C18.181 25.9615 18.1597 26.1941 18.1436 26.427L17.9285 26.5083C17.4506 25.1015 16.9725 23.7096 16.5048 22.314C15.7313 20.0052 14.9672 17.6928 14.1949 15.3835C13.5713 13.5193 12.9427 11.6572 12.3105 9.79586C12.281 9.70867 12.196 9.64061 12.137 9.56355L13.514 7.03174C13.5612 7.11386 13.6237 7.19064 13.6535 7.27896C14.2905 9.16418 14.9264 11.0497 15.557 12.9371C16.3771 15.3925 17.1922 17.8497 18.0117 20.3053C18.0443 20.4035 18.0983 20.4941 18.1498 20.604L18.3382 20.3846C18.3225 21.3271 18.3067 22.2693 18.2913 23.2118Z"
+        fill="#4FAA41"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.1373 9.56396C12.1964 9.64103 12.281 9.70909 12.3108 9.79628C12.9431 11.6576 13.5717 13.5197 14.1952 15.3839C14.9675 17.6932 15.7317 20.0057 16.5051 22.3144C16.9725 23.7097 17.4507 25.1019 17.9288 26.5087L18.1439 26.4274L18.0959 27.1097L18.0523 27.267C17.9774 28.014 17.9144 28.7627 17.8233 29.508C17.7775 29.8815 17.6802 30.2482 17.6062 30.6181C17.5505 30.5373 17.4723 30.4639 17.4422 30.3745C15.9046 25.791 14.3715 21.2057 12.8365 16.6214C12.3479 15.1625 11.8569 13.7045 11.3622 12.2477C11.3371 12.1737 11.2665 12.1157 11.217 12.0502C11.5236 11.2214 11.8304 10.3925 12.1373 9.56396Z"
+        fill="#4AA73C"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M18.338 20.3851L18.1495 20.6044C18.098 20.4945 18.044 20.4036 18.0114 20.3057C17.1921 17.8501 16.3768 15.3929 15.5567 12.9376C14.9261 11.0501 14.2902 9.16459 13.6532 7.27937C13.6236 7.19105 13.5612 7.11399 13.5137 7.03215L15.2166 4.79199C15.2704 4.86371 15.3469 4.92755 15.3747 5.00827C15.8475 6.3923 16.316 7.77802 16.7818 9.16459C17.2169 10.4595 17.6455 11.7563 18.0857 13.0495C18.1152 13.1361 18.2179 13.1974 18.2865 13.2706L18.2899 13.5645C18.3062 15.8375 18.3222 18.1114 18.338 20.3851Z"
+        fill="#57AE47"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M18.2871 13.2699C18.2185 13.1968 18.1158 13.1355 18.0863 13.0489C17.6462 11.7557 17.2175 10.4588 16.7824 9.16395C16.3167 7.77739 15.8481 6.39195 15.3753 5.00764C15.3475 4.92692 15.271 4.86307 15.2173 4.79136C15.7711 4.24911 16.3077 3.68745 16.8837 3.17023C17.3958 2.71067 17.8076 2.21792 17.8264 1.49173C17.8273 1.46164 17.843 1.43154 17.8672 1.34717L18.0132 1.71448C18.0095 1.90039 17.9929 2.08629 18.005 2.27107C18.0261 2.59254 18.0779 2.91232 18.0925 3.23379C18.1195 3.83201 18.1324 4.43136 18.1445 5.03042C18.1639 5.99454 18.1817 6.95867 18.1938 7.92308C18.2126 9.46376 18.225 11.0044 18.2444 12.5451C18.2466 12.7873 18.2719 13.0283 18.2871 13.2699Z"
+        fill="#60B24F"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.6058 30.6176C17.6797 30.2477 17.7771 29.8807 17.8229 29.5075C17.9143 28.7625 17.977 28.0135 18.0518 27.2665L18.0704 27.2637L18.089 27.2668C18.1101 28.2045 18.2377 29.1272 18.481 30.0337C18.4315 30.099 18.3615 30.1572 18.3353 30.2309C18.1309 30.8074 17.9382 31.3885 17.7326 31.965C17.7045 32.0438 17.6263 32.1051 17.5712 32.1743L17.3611 31.4526L17.6058 30.6176Z"
+        fill="#A9AA88"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.5713 32.1748C17.6264 32.1056 17.7049 32.0443 17.7327 31.9655C17.9383 31.389 18.1313 30.8082 18.3354 30.2313C18.3616 30.1576 18.4314 30.0994 18.4811 30.0342L18.8341 30.8087C18.7644 30.9077 18.6682 30.9969 18.6294 31.1071L17.9532 33.0925C17.9254 33.1721 17.8303 33.2283 17.7668 33.2956L17.5713 32.1748Z"
+        fill="#B6B598"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.7668 33.2952C17.8307 33.2282 17.9255 33.1717 17.9533 33.0921L18.6294 31.1068C18.668 30.9968 18.7644 30.9073 18.8342 30.8083L19.1759 31.1C19.0108 31.2631 18.9191 31.4516 18.9743 31.6898L18.8705 32.0295C18.8232 32.0878 18.7549 32.1384 18.7315 32.205C18.4956 32.8809 18.2703 33.5604 18.0326 34.2362C18.0025 34.322 17.919 34.3892 17.8599 34.4646C17.8293 34.0745 17.7981 33.6853 17.7668 33.2952Z"
+        fill="#C2C1A7"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.8603 34.4646C17.9191 34.3889 18.0026 34.3217 18.033 34.2362C18.2706 33.5607 18.4959 32.8812 18.7319 32.205C18.7552 32.1387 18.8233 32.0878 18.8708 32.0295L18.7277 33.5891C18.6894 33.6332 18.634 33.6718 18.6157 33.7232C18.454 34.1772 18.3016 34.6345 18.1393 35.0884C18.1058 35.1821 18.0417 35.2648 17.9916 35.3522C17.9472 35.294 17.8676 35.2378 17.8639 35.177C17.8496 34.9405 17.8594 34.7023 17.8603 34.4646Z"
+        fill="#CECDB7"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.9912 35.3523C18.0413 35.2645 18.1054 35.1818 18.1389 35.0885C18.3014 34.6348 18.4536 34.1775 18.6153 33.7233C18.6336 33.6718 18.6893 33.6335 18.7272 33.5891L18.7306 34.6129L18.3881 35.4915L17.9912 35.3523Z"
+        fill="#DBDAC7"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M18.3882 35.4917L18.7307 34.613L18.8013 35.6525L18.3882 35.4917Z"
+        fill="#EBE9DC"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M18.9743 31.6901C18.9192 31.4519 19.0106 31.2632 19.176 31.1003L19.2708 31.165L18.9743 31.6901Z"
+        fill="#CECDB7"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M18.0889 27.2671L18.0703 27.264L18.0518 27.2668L18.0954 27.1096L18.0889 27.2671Z"
+        fill="#4FAA41"
+      />
+    </svg>
+  );
+};
+
+export default MongoDbIcon;
diff --git a/src/app/modules/dataset-upload-module/assets/upload-options-icons/mssql.png b/src/app/modules/dataset-upload-module/assets/upload-options-icons/mssql.png
new file mode 100644
index 0000000000000000000000000000000000000000..95996fe5332027c9eaa03b1e85c7faec0cedda21
GIT binary patch
literal 7307
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

literal 0
HcmV?d00001

diff --git a/src/app/modules/dataset-upload-module/assets/upload-options-icons/mysql.png b/src/app/modules/dataset-upload-module/assets/upload-options-icons/mysql.png
new file mode 100644
index 0000000000000000000000000000000000000000..b860c94a2dc17ff5f380b8d6180403e21d9cdfe3
GIT binary patch
literal 2571
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

literal 0
HcmV?d00001

diff --git a/src/app/modules/dataset-upload-module/assets/upload-options-icons/postgres.tsx b/src/app/modules/dataset-upload-module/assets/upload-options-icons/postgres.tsx
new file mode 100644
index 000000000..292c7e921
--- /dev/null
+++ b/src/app/modules/dataset-upload-module/assets/upload-options-icons/postgres.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+const PostgresIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="30"
+      height="31"
+      viewBox="0 0 30 31"
+      fill="none"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M28.8886 18.4962C28.7831 17.8123 28.2087 17.3645 27.5405 17.3342C27.2986 17.3232 27.053 17.3485 26.8118 17.3792C26.5205 17.4162 26.2327 17.4819 25.942 17.5252C25.7412 17.5552 25.5375 17.5691 25.3369 17.5897L25.332 17.5637C25.7065 16.8563 26.0967 16.1567 26.4511 15.4393C26.7227 14.889 26.9552 14.3187 27.1955 13.7532C27.593 12.8162 27.9105 11.8501 28.1735 10.8683C28.4255 9.9282 28.6411 8.97781 28.7088 8.00258C28.736 7.61305 28.7548 7.22187 28.7527 6.83187C28.7508 6.52086 28.7173 6.20937 28.6861 5.8993C28.6509 5.54398 28.5436 5.20719 28.395 4.88305C28.1991 4.45602 27.8953 4.10562 27.5756 3.77281C27.3197 3.50633 27.0382 3.26352 26.7591 3.02094C26.3611 2.67477 25.9137 2.39844 25.4489 2.15305C24.9209 1.87414 24.3659 1.65594 23.7872 1.50852C23.4373 1.41922 23.0794 1.35289 22.725 1.28211C22.5975 1.25633 22.4698 1.20312 22.3423 1.20312H19.942C19.8553 1.20312 19.7693 1.24789 19.6819 1.25773C19.1072 1.32172 18.5393 1.43 17.9878 1.60086C17.7816 1.66484 17.5931 1.62453 17.3972 1.60648C17.247 1.59266 17.0993 1.55234 16.9491 1.54484C16.3767 1.51625 15.8037 1.4743 15.2316 1.48039C14.6834 1.48602 14.1408 1.57625 13.6102 1.72695C13.166 1.85305 12.7315 2.00703 12.3335 2.24047C12.1631 2.34031 12.0281 2.32156 11.8519 2.2707C11.2596 2.09984 10.6631 1.9393 10.0615 1.80453C9.68648 1.72062 9.30094 1.67891 8.91797 1.63883C8.55094 1.60063 8.18109 1.57766 7.81219 1.56992C7.45172 1.56219 7.08867 1.56242 6.72984 1.5943C6.1582 1.64516 5.59734 1.76141 5.05219 1.94891C4.4468 2.15703 3.8918 2.45867 3.39141 2.85477C2.88352 3.25672 2.47617 3.7475 2.14852 4.30789C1.80328 4.89922 1.56656 5.53227 1.41938 6.19719C1.33969 6.55742 1.2893 6.92773 1.23469 7.29359C1.21758 7.4075 1.40625 7.52141 1.17188 7.63484V9.22719C1.40625 9.33312 1.22062 9.43883 1.23422 9.545C1.2668 9.80023 1.29562 10.0576 1.33875 10.3109C1.40695 10.712 1.48781 11.1118 1.57031 11.5102C1.68539 12.0669 1.80516 12.623 1.93266 13.1769C2.02547 13.58 2.13117 13.9808 2.2418 14.3795C2.41078 14.9884 2.57719 15.5984 2.7682 16.2005C2.94562 16.76 3.14883 17.3115 3.35039 17.863C3.62953 18.6259 3.96375 19.3641 4.36453 20.0717C4.71117 20.6844 5.10727 21.2581 5.63859 21.7302C5.98875 22.0412 6.37852 22.2802 6.83227 22.3998C7.18875 22.4935 7.55109 22.5048 7.91602 22.43C8.33906 22.3433 8.71359 22.1612 9.04664 21.8884C9.08484 21.857 9.1268 21.833 9.17203 21.8907C9.3443 22.1089 9.57492 22.2545 9.81609 22.3803C10.467 22.7197 11.1762 22.8214 11.8966 22.8629C12.071 22.873 12.2473 22.8479 12.423 22.843C12.7655 22.8336 13.0983 22.7668 13.4257 22.6721C13.5973 22.6224 13.7648 22.5594 13.9395 22.5005C13.9486 22.6864 13.9603 22.8655 13.9657 23.0445L13.9901 24.0209C13.9945 24.1695 14.0004 24.3186 14.0142 24.4665C14.0496 24.8478 14.0843 25.2294 14.1298 25.6095C14.1614 25.8716 14.1942 26.1357 14.2559 26.3914C14.3798 26.9077 14.5479 27.4105 14.7616 27.898C14.9714 28.3763 15.273 28.7802 15.6757 29.1132C16.196 29.5435 16.8059 29.727 17.4645 29.761C17.7368 29.7753 18.0169 29.762 18.285 29.7132C18.7099 29.6361 19.1339 29.5391 19.5476 29.4144C20.3892 29.1603 21.1167 28.7216 21.6602 28.0126C21.9696 27.6085 22.2237 27.1714 22.3868 26.6888C22.5213 26.2902 22.6481 25.8875 22.7489 25.4795C22.8286 25.1579 22.868 24.8262 22.9165 24.4979C22.9486 24.2806 22.9678 24.0612 22.988 23.8423C23.0208 23.4868 23.0543 23.1315 23.078 22.7752C23.0944 22.5273 23.0937 22.2781 23.1035 22.0297C23.1066 21.954 23.1187 21.8787 23.1258 21.8033C23.1323 21.7334 23.1675 21.7093 23.2388 21.7105C23.4898 21.7142 23.7412 21.7208 23.9916 21.7095C24.2721 21.6969 24.5552 21.6849 24.8313 21.6385C25.2244 21.5727 25.6155 21.4895 26.0009 21.3884C26.4562 21.2694 26.8739 21.0561 27.2759 20.813C27.7441 20.5302 28.1709 20.1983 28.5173 19.7708C28.8185 19.3979 28.9613 18.9669 28.8886 18.4962ZM28.0889 18.7264C28.0734 18.9409 27.9752 19.1246 27.8327 19.2816C27.1603 20.023 26.3168 20.4727 25.3519 20.6942C24.9853 20.7781 24.607 20.8217 24.2318 20.8564C23.9123 20.8859 23.5882 20.8909 23.2676 20.8791C23.0318 20.8702 22.7979 20.8163 22.557 20.7816C22.5328 21.002 22.5098 21.2314 22.482 21.4604L22.3697 22.3381C22.3357 22.6163 22.3092 22.8955 22.2743 23.1734C22.2401 23.4432 22.1974 23.712 22.1616 23.9818C22.128 24.233 22.1034 24.4855 22.0662 24.7362C22.0088 25.1206 21.9539 25.5059 21.8789 25.8873C21.7889 26.3431 21.6509 26.7847 21.4256 27.1958C21.1509 27.6976 20.7614 28.0798 20.2657 28.363C19.7548 28.655 19.1962 28.8069 18.63 28.9339C18.2292 29.0239 17.8162 29.0387 17.4103 29.0021C16.7062 28.9384 16.1053 28.6372 15.6511 28.0913C15.2175 27.5703 14.9241 26.9731 14.8191 26.2972C14.7689 25.9759 14.7328 25.6517 14.704 25.3278C14.6721 24.9676 14.6503 24.6062 14.6339 24.245C14.613 23.7863 14.5978 23.3277 14.5877 22.869C14.5753 22.3051 14.5713 21.7412 14.5634 21.1773L14.562 21.1557C14.2751 21.3277 13.9931 21.5162 13.6941 21.6713C13.3439 21.8532 12.9635 21.9587 12.5695 21.9884C12.2606 22.0119 11.9477 22.0332 11.6402 22.0086C11.1361 21.968 10.6324 21.8891 10.181 21.6409C9.99797 21.5401 9.80695 21.4175 9.68086 21.2565C9.37852 20.8707 9.52336 20.3832 9.97922 20.1486C10.2942 19.9862 10.638 19.9184 10.9795 19.8395C11.2762 19.7708 11.5716 19.6927 11.861 19.5983C12.1474 19.5045 12.3281 19.2723 12.5065 19.0445L12.7891 18.6809C12.6713 18.6685 12.5602 18.6559 12.4491 18.6455C12.1118 18.6137 11.79 18.5209 11.4823 18.3845C11.2188 18.268 11.2148 18.2553 11.0217 18.4648C10.6992 18.815 10.3856 19.1734 10.0697 19.5294C9.83719 19.7912 9.60609 20.0546 9.37477 20.3171C9.14555 20.5768 8.93086 20.8512 8.68406 21.0929C8.3175 21.4517 7.8757 21.6676 7.34859 21.6432C7.01039 21.6277 6.70078 21.5091 6.42234 21.3153C5.84766 20.915 5.46047 20.3551 5.10797 19.767C4.65633 19.0135 4.30969 18.2108 4.01297 17.386C3.80766 16.816 3.60141 16.2455 3.42211 15.6673C3.22734 15.039 3.05648 14.4027 2.88844 13.7666C2.76141 13.2866 2.64867 12.8026 2.54109 12.3177C2.41898 11.7662 2.30156 11.2137 2.19797 10.6585C2.12813 10.2837 2.08758 9.90359 2.03109 9.52625C1.95492 9.01766 1.94086 8.50437 1.96852 7.99367C1.99313 7.53359 2.05922 7.07469 2.12484 6.61766C2.21578 5.98531 2.42414 5.38859 2.72391 4.82516C2.90742 4.47992 3.13523 4.16609 3.39867 3.87453C3.83109 3.39594 4.35445 3.05 4.93664 2.79031C5.34352 2.60891 5.77336 2.49969 6.21141 2.41437C6.86156 2.28781 7.51758 2.29273 8.17383 2.30633C8.4607 2.31219 8.74641 2.36445 9.03305 2.39281C9.65016 2.45422 10.2551 2.58406 10.8523 2.74437C11.2875 2.86109 11.7138 3.01227 12.1455 3.14352C12.1889 3.15664 12.2524 3.15547 12.2878 3.13227C12.8728 2.75047 13.5122 2.49852 14.1921 2.35438C14.4502 2.29977 14.7164 2.27586 14.9803 2.25898C15.3012 2.23859 15.6246 2.21984 15.9448 2.23836C16.3296 2.26039 16.7126 2.31711 17.0951 2.36961C17.2807 2.39492 17.4619 2.45938 17.648 2.47695C17.737 2.48539 17.8315 2.42023 17.9257 2.39844C18.4059 2.28758 18.8841 2.16406 19.3685 2.07641C19.7292 2.01125 20.0977 1.98055 20.4645 1.95945C20.8734 1.93602 21.2855 1.91891 21.6942 1.93859C22.211 1.96344 22.7241 2.03703 23.2305 2.15492C23.858 2.30094 24.4598 2.51305 25.032 2.80742C25.4595 3.02727 25.8659 3.28227 26.2317 3.59586C26.4715 3.80164 26.7169 4.00484 26.9334 4.23406C27.2006 4.51672 27.4732 4.79961 27.6408 5.16172C27.7669 5.43477 27.8569 5.71742 27.8817 6.01648C27.9127 6.3882 27.9502 6.76133 27.9466 7.13352C27.9434 7.48953 27.8948 7.84531 27.8604 8.20039C27.7821 9.00992 27.6061 9.80187 27.3923 10.5833C27.2156 11.2287 27.0091 11.8672 26.7855 12.4981C26.5795 13.0796 26.3419 13.6505 26.1016 14.2191C25.9242 14.6396 25.7332 15.0556 25.5255 15.462C25.1325 16.2322 24.7238 16.9944 24.251 17.7198C24.1695 17.8452 24.0921 17.9736 24.0124 18.1016C24.2187 18.2408 24.4523 18.2898 24.6877 18.3151C24.9115 18.3395 25.1398 18.354 25.3634 18.3373C25.7213 18.3109 26.078 18.2598 26.4338 18.2098C26.7862 18.1606 27.1317 18.0603 27.4936 18.0868C27.855 18.113 28.1135 18.3877 28.0889 18.7264ZM22.9296 17.9405C22.7761 17.7423 22.6195 17.5463 22.4693 17.3457C22.2335 17.0307 22.0641 16.6789 21.8939 16.3255C21.7327 15.9905 21.5348 15.6734 21.3649 15.3423C21.0684 14.7645 20.7666 14.1887 20.4935 13.5997C20.1502 12.8598 19.8795 12.0936 19.7941 11.274C19.758 10.9271 19.7489 10.5807 19.819 10.2371C19.9312 9.68844 20.2179 9.2593 20.6998 8.96492C21.1467 8.69187 21.6448 8.60375 22.155 8.57609C22.4716 8.55898 22.7897 8.57305 23.1183 8.57305L23.1073 8.5175C22.9029 8.09023 22.7119 7.6557 22.4883 7.23851C22.1728 6.64977 21.7692 6.11891 21.3197 5.62672C20.9866 5.26227 20.6259 4.92406 20.2308 4.62523C19.8422 4.33109 19.4327 4.06836 18.9959 3.85344C18.4748 3.59727 17.9323 3.39922 17.363 3.27289C16.8159 3.15148 16.2654 3.07719 15.7043 3.07109C15.2257 3.06594 14.7502 3.0875 14.284 3.19555C13.5804 3.35844 12.9368 3.64812 12.3769 4.11734C12.0642 4.37937 11.7914 4.67352 11.5526 5.00094C11.2723 5.38602 11.0461 5.8018 10.8527 6.23773C10.5874 6.83586 10.4053 7.45836 10.2809 8.0982C10.2185 8.41719 10.1698 8.73898 10.1201 9.06055C10.1027 9.17305 10.1013 9.28813 10.0912 9.41703C10.1777 9.37203 10.2401 9.33734 10.3038 9.30641L10.5112 9.21336C11.2127 8.8925 11.9395 8.68602 12.7207 8.70969C13.0526 8.71977 13.3702 8.78539 13.6652 8.9307C14.2312 9.20984 14.5624 9.68445 14.7063 10.2852C14.8057 10.6998 14.8737 11.1226 14.9398 11.5442C14.9916 11.8735 15.0445 12.2063 15.0506 12.5384C15.0593 13.0238 15.0347 13.5102 15.0082 13.9953C14.9857 14.4087 14.8995 14.8156 14.7551 15.2014C14.4926 15.9029 14.2001 16.5929 13.9268 17.2904C13.8366 17.5208 13.7672 17.7594 13.6819 18.0127C13.8136 18.0127 13.9205 18.0118 14.0273 18.0132C14.0691 18.0139 14.1117 18.0151 14.152 18.0247C14.4661 18.0987 14.7384 18.241 14.9618 18.4827C15.2597 18.8042 15.416 19.1795 15.424 19.6137C15.4284 19.8545 15.4031 20.0959 15.4043 20.3366C15.4092 21.4583 15.4177 22.58 15.427 23.7015C15.4287 23.8848 15.4378 24.0683 15.4509 24.2513C15.4784 24.6345 15.506 25.018 15.5435 25.4002C15.5698 25.6714 15.6063 25.9421 15.6492 26.2114C15.7099 26.593 15.8836 26.9326 16.0807 27.2572C16.2504 27.5363 16.4709 27.7735 16.7616 27.9371C17.2554 28.2151 17.7872 28.2383 18.3232 28.1359C18.6853 28.0667 19.0409 27.9556 19.3924 27.841C19.7391 27.7283 20.0522 27.5436 20.3152 27.2893C20.5615 27.0505 20.7363 26.7594 20.8542 26.438C21.083 25.8148 21.1542 25.1586 21.2489 24.5075C21.2843 24.2637 21.315 24.0193 21.3473 23.7751C21.3841 23.4971 21.4214 23.2194 21.457 22.9416C21.4833 22.7347 21.5072 22.5273 21.5325 22.3203C21.5686 22.0231 21.6068 21.7262 21.6413 21.4287C21.6677 21.1988 21.6902 20.968 21.7137 20.7376C21.7439 20.4432 21.7765 20.1488 21.8025 19.854C21.8227 19.6302 21.8145 19.4023 21.8541 19.1827C21.927 18.7801 22.1173 18.4374 22.4742 18.2159C22.6235 18.1234 22.792 18.0624 22.9577 17.9841L22.9296 17.9405ZM9.43031 16.2877C9.25195 15.8654 9.14484 15.4252 9.11297 14.9701C9.08297 14.5423 9.13383 14.1162 9.17766 13.6904C9.22031 13.2779 9.2557 12.8635 9.26812 12.4491C9.28875 11.768 9.24281 11.0879 9.21023 10.4073C9.19055 10.002 9.23766 9.59187 9.27375 9.1857C9.30633 8.81984 9.34688 8.45305 9.41602 8.09258C9.53203 7.48766 9.68602 6.89141 9.90492 6.31344C10.1128 5.76547 10.3516 5.2318 10.6889 4.75133C10.92 4.4218 11.1823 4.11383 11.4342 3.7918L11.3595 3.76531C10.5396 3.50492 9.70641 3.30148 8.84953 3.21266C8.4443 3.1707 8.03766 3.14609 7.63125 3.12195C7.50656 3.11445 7.38 3.13133 7.25484 3.14328C6.945 3.17281 6.63141 3.18453 6.32648 3.24266C5.80758 3.34133 5.30977 3.50727 4.84875 3.7775C4.43484 4.02008 4.08727 4.33367 3.79617 4.70984C3.47461 5.12516 3.25828 5.59484 3.10289 6.0957C2.91938 6.68656 2.83195 7.29453 2.80828 7.90812C2.78766 8.44602 2.77734 8.98695 2.87016 9.52273C2.9393 9.92164 2.98547 10.3248 3.06164 10.722C3.16547 11.2637 3.2768 11.8041 3.40547 12.3402C3.58945 13.1075 3.7732 13.876 3.99117 14.634C4.19977 15.3603 4.43508 16.0801 4.69008 16.7912C4.89867 17.3715 5.13984 17.941 5.39391 18.503C5.55937 18.8691 5.75977 19.2214 5.96977 19.5643C6.19313 19.9283 6.44719 20.2738 6.79195 20.5379C7.22695 20.8714 7.56375 20.9232 8.00578 20.5573C8.19516 20.4005 8.35523 20.207 8.52 20.0225C8.7818 19.7295 9.03445 19.4286 9.29508 19.1347C9.62695 18.7602 9.96305 18.3896 10.2966 18.017C10.3671 17.9382 10.4348 17.8571 10.5035 17.7774L10.3901 17.6778C9.97547 17.2796 9.65438 16.8179 9.43031 16.2877ZM22.0134 5.13875C22.2844 5.45656 22.5466 5.78375 22.789 6.12406C23.2577 6.78242 23.6323 7.49328 23.9081 8.25383C24.0302 8.58898 24.1277 8.92742 24.0841 9.29422C24.0539 9.55109 24.0565 9.81172 24.0338 10.07C24.0148 10.2849 23.9808 10.4987 23.9529 10.7129C23.9112 11.0359 23.8507 11.3579 23.8327 11.6823C23.8155 11.9909 23.8334 12.3029 23.8528 12.6123C23.8725 12.9266 23.9149 13.2395 23.9438 13.5533C23.9763 13.9091 24.0202 14.2648 24.0302 14.6213C24.0384 14.9141 24.0124 15.2087 23.9869 15.5009C23.9564 15.853 23.8671 16.1937 23.734 16.5207C23.6405 16.7509 23.5287 16.974 23.423 17.2044L23.4654 17.2494L23.5298 17.2993L23.5948 17.183C24.143 16.3187 24.6307 15.421 25.053 14.4894C25.3247 13.8894 25.5792 13.2809 25.8234 12.6692C26.2041 11.7167 26.5052 10.7375 26.7382 9.73883C26.8427 9.29047 26.9227 8.83531 26.9937 8.38016C27.049 8.02437 27.0952 7.66437 27.1055 7.30531C27.1165 6.92445 27.0954 6.54055 27.0602 6.16062C27.034 5.87375 26.9632 5.585 26.7834 5.3518C26.4945 4.97633 26.1825 4.61727 25.7988 4.3332C25.4759 4.09391 25.1541 3.84852 24.8074 3.64719C24.2578 3.32844 23.663 3.11609 23.0414 2.97148C22.4348 2.83016 21.8203 2.76922 21.2018 2.75633C20.8371 2.74859 20.4708 2.78773 20.1068 2.82195C19.777 2.85289 19.4494 2.90562 19.1173 2.94922C19.4735 3.14961 19.8248 3.32773 20.1562 3.53773C20.853 3.97906 21.4774 4.51016 22.0134 5.13875ZM12.9607 17.4955C13.1859 16.7752 13.4927 16.0876 13.7899 15.3957C14.0309 14.8346 14.1626 14.2435 14.2064 13.6365C14.2282 13.3372 14.2221 13.0341 14.2073 12.7339C14.1907 12.4004 14.164 12.0659 14.1155 11.7357C14.0531 11.3136 13.9821 10.8912 13.8823 10.4769C13.774 10.0285 13.5009 9.71633 13.0331 9.60125C12.7481 9.53117 12.465 9.53398 12.177 9.57945C11.4734 9.69031 10.8293 9.94953 10.2293 10.3292C10.1086 10.4056 10.0423 10.4673 10.0631 10.6405C10.1072 11.0073 10.1168 11.3799 10.1152 11.7502C10.1128 12.2743 10.0905 12.7984 10.0706 13.3222C10.0641 13.4928 10.0395 13.6625 10.0212 13.8324C9.99305 14.0926 9.93891 14.3525 9.94055 14.6122C9.94219 14.8798 9.96961 15.1538 10.0345 15.413C10.2408 16.235 10.6777 16.9077 11.3937 17.3823C11.8341 17.6741 12.3213 17.8212 12.8562 17.8491C12.8925 17.7263 12.9248 17.6103 12.9607 17.4955ZM12.1202 10.4438C12.026 10.246 12.0799 10.0822 12.2984 10.0062C12.3516 9.9875 12.4064 9.96758 12.4617 9.96219C12.5377 9.95469 12.615 9.96031 12.6919 9.96031C12.9689 9.96172 13.2354 10.0004 13.4641 10.1766C13.6109 10.2896 13.6502 10.4396 13.5553 10.5936C13.4205 10.812 13.215 10.9217 12.9626 10.9428C12.5648 10.9759 12.2857 10.7905 12.1202 10.4438ZM23.1452 10.3716C23.1771 10.1082 23.2027 9.84406 23.2352 9.58062C23.2484 9.47469 23.1926 9.44609 23.1037 9.44351C22.8244 9.43578 22.545 9.42594 22.2656 9.42078C21.9506 9.41516 21.6441 9.46578 21.3525 9.58555C21.0291 9.71867 20.7827 9.93195 20.6822 10.284C20.6072 10.5465 20.587 10.8087 20.6135 11.0832C20.6538 11.5016 20.7466 11.9075 20.8931 12.2963C21.0886 12.8169 21.2932 13.3372 21.5377 13.8359C21.8688 14.5112 22.2436 15.1648 22.5954 15.8298C22.6894 16.0072 22.7684 16.1923 22.8663 16.3995C23.0714 15.9652 23.1715 15.5305 23.183 15.0819C23.1926 14.7045 23.1623 14.3255 23.1403 13.948C23.1265 13.7169 23.0939 13.4872 23.0714 13.2566C23.04 12.9352 22.9924 12.6141 22.9852 12.2921C22.9779 11.9647 23.0011 11.6354 23.0292 11.3084C23.0557 10.9948 23.1075 10.6838 23.1452 10.3716ZM22.515 10.118C22.4112 10.4047 22.1892 10.5664 21.9014 10.614C21.633 10.658 21.398 10.5589 21.2231 10.3449C21.0987 10.1926 21.1462 10.0121 21.3328 9.90922C21.547 9.79062 21.7826 9.76062 22.0603 9.74258C22.1358 9.75641 22.2495 9.76789 22.3575 9.79883C22.5143 9.84312 22.5722 9.96101 22.515 10.118ZM14.213 18.9446C14.0595 18.8192 13.8565 18.812 13.7105 18.9495C13.5293 19.1206 13.3699 19.3163 13.2105 19.5092C13.0266 19.7321 12.8541 19.9639 12.6166 20.1366C12.2712 20.3877 11.8685 20.4917 11.4637 20.5902C11.142 20.6684 10.8188 20.7411 10.496 20.8163L10.492 20.858C10.5879 20.9023 10.6807 20.9577 10.7805 20.9893C11.2727 21.1452 11.7734 21.2227 12.2934 21.1787C12.6689 21.1468 13.0266 21.065 13.3655 20.9042C13.8319 20.6832 14.1907 20.333 14.4959 19.9257C14.547 19.8577 14.5702 19.7572 14.5763 19.6695C14.5971 19.3599 14.4398 19.1298 14.213 18.9446ZM26.3421 19.0679C25.946 19.1103 25.5495 19.1553 25.1522 19.178C24.9605 19.1891 24.7659 19.1525 24.5723 19.1368C24.2477 19.1105 23.9309 19.0384 23.6564 18.8649C23.4975 18.7648 23.3655 18.7536 23.1968 18.8103C22.9559 18.8914 22.7592 19.0147 22.7011 19.2758C22.6615 19.4523 22.6472 19.6351 22.6312 19.8158C22.6282 19.8477 22.668 19.9062 22.6985 19.9142C22.8844 19.9632 23.0712 20.0211 23.2612 20.0382C23.4947 20.0593 23.7323 20.0525 23.9674 20.0408C24.2213 20.0281 24.4767 20.0117 24.7268 19.9695C25.3162 19.8706 25.8865 19.7094 26.393 19.3752C26.5755 19.2545 26.7565 19.1312 26.9379 19.0091L26.9229 18.9833C26.7293 19.0121 26.5366 19.0473 26.3421 19.0679Z"
+        fill="#336791"
+      />
+    </svg>
+  );
+};
+
+export default PostgresIcon;
diff --git a/src/app/modules/dataset-upload-module/assets/upload-options-icons/settings.tsx b/src/app/modules/dataset-upload-module/assets/upload-options-icons/settings.tsx
new file mode 100644
index 000000000..c8deaabaa
--- /dev/null
+++ b/src/app/modules/dataset-upload-module/assets/upload-options-icons/settings.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const SettingsIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+    >
+      <path
+        d="M13.2834 5.53036L12.3007 5.36366C12.1984 5.03319 12.0668 4.71441 11.9059 4.41025L12.485 3.60015C12.7307 3.25505 12.6926 2.78419 12.3914 2.48588L11.5199 1.61436C11.3561 1.45059 11.1397 1.35993 10.9086 1.35993C10.7273 1.35993 10.5548 1.41549 10.4085 1.52078L9.59551 2.09984C9.27966 1.93314 8.94918 1.79569 8.60701 1.69333L8.44323 0.722369C8.37304 0.304155 8.01332 0 7.58926 0H6.35802C5.93395 0 5.57423 0.304155 5.50404 0.722369L5.33442 1.71672C5.00686 1.81908 4.68809 1.95361 4.38393 2.11739L3.57967 1.53832C3.43345 1.43304 3.25797 1.37747 3.07665 1.37747C2.84561 1.37747 2.62626 1.46813 2.46541 1.63191L1.59097 2.50343C1.29266 2.80174 1.25172 3.27259 1.49738 3.61769L2.08229 4.4395C1.92144 4.74658 1.79276 5.06536 1.69333 5.39583L0.722369 5.55961C0.304155 5.6298 0 5.98952 0 6.41358V7.64483C0 8.06889 0.304155 8.42861 0.722369 8.4988L1.71672 8.66843C1.81908 8.99598 1.95361 9.31476 2.11739 9.61891L1.54125 10.4202C1.29558 10.7653 1.3336 11.2362 1.63483 11.5345L2.50636 12.406C2.67013 12.5698 2.88655 12.6605 3.11759 12.6605C3.29891 12.6605 3.47146 12.6049 3.61769 12.4996L4.4395 11.9147C4.73488 12.0697 5.04488 12.1955 5.36366 12.2949L5.52744 13.2775C5.59763 13.6958 5.95735 13.9999 6.38141 13.9999H7.61558C8.03964 13.9999 8.39937 13.6958 8.46955 13.2775L8.63626 12.2949C8.96673 12.1925 9.28551 12.0609 9.58967 11.9001L10.3998 12.4791C10.546 12.5844 10.7215 12.64 10.9028 12.64C11.1338 12.64 11.3503 12.5493 11.514 12.3856L12.3856 11.514C12.6839 11.2157 12.7248 10.7449 12.4791 10.3998L11.9001 9.58674C12.0609 9.27966 12.1955 8.96088 12.2949 8.63333L13.2775 8.46956C13.6958 8.39937 13.9999 8.03964 13.9999 7.61558V6.38434C14.0058 5.96027 13.7016 5.60055 13.2834 5.53036ZM13.2161 7.61558C13.2161 7.6536 13.1898 7.68577 13.1518 7.69162L11.9235 7.89634C11.7685 7.92266 11.6456 8.03672 11.6076 8.18587C11.4965 8.61578 11.3269 9.02815 11.0987 9.41127C11.0198 9.5458 11.0256 9.7125 11.1163 9.84118L11.8387 10.8589C11.8591 10.8882 11.8562 10.932 11.8299 10.9584L10.9584 11.8299C10.9379 11.8504 10.9174 11.8533 10.9028 11.8533C10.8852 11.8533 10.8706 11.8474 10.8589 11.8387L9.8441 11.1163C9.71835 11.0256 9.54872 11.0198 9.41419 11.0987C9.03107 11.3269 8.61871 11.4965 8.1888 11.6076C8.03672 11.6456 7.92266 11.7714 7.89926 11.9235L7.69162 13.1518C7.68577 13.1898 7.6536 13.2161 7.61558 13.2161H6.38434C6.34632 13.2161 6.31415 13.1898 6.3083 13.1518L6.10358 11.9235C6.07726 11.7685 5.9632 11.6456 5.81405 11.6076C5.39583 11.4994 4.99224 11.3327 4.61497 11.1163C4.55356 11.0812 4.48337 11.0636 4.4161 11.0636C4.33714 11.0636 4.25525 11.087 4.18798 11.1368L3.16438 11.865C3.14976 11.8738 3.13514 11.8796 3.12052 11.8796C3.10882 11.8796 3.08542 11.8767 3.06495 11.8562L2.19343 10.9847C2.16711 10.9584 2.16418 10.9174 2.18465 10.8853L2.9041 9.87627C2.99476 9.74759 3.00061 9.57797 2.92165 9.44344C2.69353 9.06324 2.51805 8.65088 2.40692 8.22097C2.36598 8.07181 2.24315 7.95776 2.09107 7.93143L0.853974 7.72087C0.815955 7.71502 0.789634 7.68285 0.789634 7.64483V6.41358C0.789634 6.37556 0.815955 6.34339 0.853974 6.33754L2.07352 6.13282C2.22852 6.1065 2.35428 5.99244 2.3923 5.84037C2.50051 5.41045 2.66721 4.99517 2.8924 4.61205C2.97136 4.47752 2.96259 4.31082 2.87193 4.18506L2.14371 3.16146C2.12324 3.13221 2.12616 3.08835 2.15248 3.06203L3.02401 2.1905C3.04448 2.17003 3.06495 2.16711 3.07957 2.16711C3.09712 2.16711 3.11174 2.17296 3.12344 2.18173L4.13242 2.90117C4.2611 2.99184 4.43072 2.99768 4.56525 2.91872C4.94545 2.6906 5.35781 2.51513 5.78772 2.404C5.93688 2.36305 6.05094 2.24022 6.07726 2.08814L6.28783 0.85105C6.29367 0.813031 6.32585 0.786709 6.36386 0.786709H7.59511C7.63313 0.786709 7.6653 0.813031 7.67115 0.85105L7.87587 2.0706C7.90219 2.2256 8.01625 2.35135 8.16832 2.38937C8.60993 2.50051 9.03107 2.67306 9.42297 2.9041C9.5575 2.98306 9.7242 2.97721 9.85288 2.88655L10.8619 2.16126C10.8765 2.15248 10.8911 2.14663 10.9057 2.14663C10.9174 2.14663 10.9408 2.14956 10.9613 2.17003L11.8328 3.04155C11.8591 3.06787 11.8621 3.10882 11.8416 3.14099L11.1192 4.15581C11.0286 4.28157 11.0227 4.4512 11.1017 4.58573C11.3298 4.96884 11.4994 5.38121 11.6105 5.81112C11.6486 5.9632 11.7743 6.07726 11.9264 6.10065L13.1547 6.3083C13.1927 6.31415 13.2191 6.34632 13.2191 6.38434V7.61558H13.2161Z"
+        fill="#70777E"
+      />
+      <path
+        d="M7.00155 3.97729C5.33454 3.97729 3.98047 5.33137 3.98047 6.99838C3.98047 8.66538 5.33454 10.0195 7.00155 10.0195C8.66855 10.0195 10.0226 8.66538 10.0226 6.99838C10.0226 5.33137 8.66855 3.97729 7.00155 3.97729ZM7.00155 9.22982C5.77031 9.22982 4.7701 8.22962 4.7701 6.99838C4.7701 5.76713 5.77031 4.76693 7.00155 4.76693C8.23279 4.76693 9.233 5.76713 9.233 6.99838C9.233 8.22962 8.23279 9.22982 7.00155 9.22982Z"
+        fill="#70777E"
+      />
+    </svg>
+  );
+};
+
+export default SettingsIcon;
diff --git a/src/app/modules/dataset-upload-module/component/dropzone/index.tsx b/src/app/modules/dataset-upload-module/component/dropzone/index.tsx
index ab31a201b..6435303c5 100644
--- a/src/app/modules/dataset-upload-module/component/dropzone/index.tsx
+++ b/src/app/modules/dataset-upload-module/component/dropzone/index.tsx
@@ -4,137 +4,110 @@ import {
   DropzoneRootProps,
   DropzoneInputProps,
   FileRejection,
+  useDropzone,
 } from "react-dropzone";
-import {
-  uploadAreacss,
-  uploadDatasetcss,
-} from "app/modules/dataset-upload-module/style";
+import { uploadAreacss } from "app/modules/dataset-upload-module/style";
 import { ReactComponent as UploadIcon } from "app/modules/dataset-upload-module/assets/upload.svg";
-import { ReactComponent as LocalUploadIcon } from "app/modules/dataset-upload-module/assets/local-upload.svg";
-import { ReactComponent as GoogleDriveIcon } from "app/modules/dataset-upload-module/assets/google-drive.svg";
-import { ReactComponent as ErrorIcon } from "app/modules/dataset-upload-module/assets/error-icon.svg";
+import { formatBytes } from "app/utils/formatBytes";
 
 export interface DropzoneProps {
-  getRootProps: (props?: DropzoneRootProps) => DropzoneRootProps;
-  getInputProps: (props?: DropzoneInputProps) => DropzoneInputProps;
-  isDragActive: boolean;
-  fileRejections: FileRejection[];
-  acceptedFiles: File[];
-  isFocused?: boolean;
-  isDragAccept?: boolean;
-  isDragReject?: boolean;
-  isFileDialogActive?: boolean;
-  draggedFiles?: File[];
-  rootRef?: React.RefObject<HTMLElement>;
-  inputRef?: React.RefObject<HTMLInputElement>;
-  handleOpenPicker(e: React.MouseEvent<HTMLButtonElement>): void;
   uploadError: boolean;
   disabled: boolean;
-  setIsExternalSearch: React.Dispatch<React.SetStateAction<boolean>>;
+  onDrop: (acceptedFiles: File[], fileRejections: FileRejection[]) => void;
 }
 
 export const DropZone = (props: DropzoneProps) => {
-  const handleExternalSearch = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    props.setIsExternalSearch(true);
+  const ACCEPTED_FILES = {
+    "text/csv": [".csv"],
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [
+      ".xlsx",
+    ],
+    "application/xml": [".xml"],
+    "application/vnd.ms-excel": [".xls"],
+    "application/xhtml+xml": [".xhtml"],
   };
-  return (
-    <div css={uploadDatasetcss} {...props.getRootProps()}>
-      <div>
-        <p>Add your file</p>
-      </div>
-      <div css={uploadAreacss(props.isDragActive)}>
-        <input
-          {...props.getInputProps()}
-          data-testid="local-upload"
-          data-cy="local-upload-input"
-        />
-        {!props.isDragActive && (
-          <>
-            <UploadIcon
-              css={`
-                margin-top: 2rem;
-              `}
-            />
-            <p
-              css={`
-                font-weight: 500;
-                font-size: 12px;
-                color: #231d2c;
-                margin-top: 5px;
-              `}
-            >
-              Supports: XLSX, CSV
-            </p>
-            <p
-              css={`
-                font-size: 20px;
-                line-height: 24px;
-                font-style: normal;
-              `}
-            >
-              Drag and Drop Spreadsheets File here <br /> or connect to Google
-              Drive
-            </p>
-            <Box height={30} />
-            <div
-              css={`
-                display: flex;
-                gap: 1rem;
-              `}
-            >
-              <button
-                onClick={handleExternalSearch}
-                data-cy="external-search-button"
-              >
-                <SearchIcon color="secondary" /> <p>External search</p>
-              </button>
-              <button>
-                <LocalUploadIcon /> <p>Local upload</p>
-              </button>
 
-              <button
-                type="button"
-                onClick={props.handleOpenPicker}
-                data-testid="google-drive-button"
-                data-cy="google-drive-button"
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    acceptedFiles,
+    fileRejections,
+  } = useDropzone({ onDrop: props.onDrop, accept: ACCEPTED_FILES });
+
+  const fileRejectionItems = fileRejections.map(({ file, errors }) => (
+    <li key={file.name}>
+      {file.name} - {formatBytes(file.size)}
+      <ul>
+        {errors.map((e) => (
+          <li key={e.code}>{e.message}</li>
+        ))}
+      </ul>
+    </li>
+  ));
+  return (
+    <>
+      <div
+        css={`
+          border: 1px dashed var(--Dark-01, #13183f);
+          border-radius: 24px;
+          cursor: pointer;
+          background-color: ${isDragActive && !props.disabled
+            ? "#c4c4c4"
+            : "auto"};
+          background-image: ${isDragActive && !props.disabled
+            ? `url(
+              "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='163' height='163' viewBox='0 0 20 20'%3E%3Cg %3E%3Cpolygon fill='%23ffffff' points='20 10 10 0 0 0 20 20'/%3E%3Cpolygon fill='%23ffffff' points='0 10 0 20 10 20'/%3E%3C/g%3E%3C/svg%3E"
+            )`
+            : "unset"};
+        `}
+        {...getRootProps()}
+      >
+        <Box height={112} />
+        <div css={uploadAreacss(isDragActive)}>
+          <input
+            {...getInputProps()}
+            data-testid="local-upload"
+            data-cy="local-upload-input"
+          />
+          {!isDragActive && (
+            <>
+              <UploadIcon />
+              <p
+                css={`
+                  font-weight: 500;
+                  font-size: 12px;
+                  color: #231d2c;
+                  margin-top: 5px;
+                  font-family: "Inter", sans-serif;
+                  margin: 0;
+                  padding: 0;
+                  margin-top: 18px;
+                `}
               >
-                <GoogleDriveIcon /> <p>Connect to google drive</p>
-              </button>
-            </div>
-            <Box height={40} />
-            {/* {props.uploadError && (
-              <div
+                Supports: XMl, XLSX, CSV
+              </p>
+              <p
                 css={`
-                  color: #e75656;
-                  font-size: 18;
-                  font-family: " Gotham Narrow", sans-serif;
-                  font-weight: bold;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  flex-direction: column;
-                  p {
-                    display: flex;
-                    align-items: center;
-                    gap: 13px;
-                    margin: 0;
-                  }
-                  small {
-                    text-align: center;
-                  }
+                  font-size: 20px;
+                  line-height: normal;
+                  font-style: normal;
+                  font-family: "GothamNarrow-Book", sans-serif;
+                  font-weight: 325;
+                  margin: 0;
+                  padding: 0;
+                  margin-top: 18px;
                 `}
               >
-                <p>
-                  <ErrorIcon />{" "}
-                  <span>Unable to upload your file. Please try again!</span>
-                </p>
-                <span>Error</span>
-              </div>
-            )} */}
-          </>
-        )}
+                Drag and Drop Spreadsheets File here
+              </p>
+            </>
+          )}
+        </div>
+        <Box height={131} />
       </div>
-    </div>
+      <Box height={40} />
+      {fileRejections.length > 0 && fileRejectionItems}
+    </>
   );
 };
diff --git a/src/app/modules/dataset-upload-module/component/externalSourcesList.tsx b/src/app/modules/dataset-upload-module/component/externalSourcesList.tsx
new file mode 100644
index 000000000..602353970
--- /dev/null
+++ b/src/app/modules/dataset-upload-module/component/externalSourcesList.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+
+interface Source {
+  name: string;
+  value: string;
+}
+
+interface Props {
+  baseSources: Source[];
+  sources: string[];
+  setSources: (c: string[]) => void;
+  customCss?: { gap: string };
+}
+export default function SourceCategoryList(props: Readonly<Props>) {
+  const { customCss } = props;
+  return (
+    <div
+      css={`
+        gap: ${customCss ? customCss.gap : "19px"};
+        width: max-content;
+        display: flex;
+        max-width: 100%;
+        overflow-x: auto;
+        flex-direction: row;
+
+        &::-webkit-scrollbar {
+          height: 5px;
+          border-radius: 20px;
+          background: #231d2c;
+        }
+        &::-webkit-scrollbar-track {
+          background: #dfe3e6;
+        }
+        &::-webkit-scrollbar-thumb {
+          background: #231d2c;
+        }
+
+        > button {
+          font-size: 14px;
+          cursor: pointer;
+          min-width: 160px;
+          background: #fff;
+          border-radius: 30px;
+          border: 0.5px solid #231d2c;
+          font-family: "GothamNarrow-Book", sans-serif;
+          padding: 12px 0px;
+        }
+      `}
+    >
+      {props.baseSources.map((s) => (
+        <button
+          key={s.value}
+          onClick={() => {
+            if (!props.sources.includes(s.value)) {
+              props.setSources([...props.sources, s.value]);
+            } else {
+              const fSource = props.sources.filter((f) => f !== s.value);
+              props.setSources(fSource);
+            }
+          }}
+          style={
+            props.sources.includes(s.value)
+              ? {
+                  color: "#fff",
+                  background: "#6061E5",
+                  border: "none",
+                  fontWeight: 400,
+                  fontFamily: "GothamNarrow-Bold, sans-serif",
+                }
+              : {}
+          }
+        >
+          {s.name}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/src/app/modules/dataset-upload-module/component/tabs.tsx b/src/app/modules/dataset-upload-module/component/tabs.tsx
new file mode 100644
index 000000000..d5267d986
--- /dev/null
+++ b/src/app/modules/dataset-upload-module/component/tabs.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import ComputerIcon from "../assets/computer-icon";
+import { Search } from "@material-ui/icons";
+
+interface Props {
+  activeTab: "search" | "file";
+  setActiveTab: (c: "search" | "file") => void;
+}
+
+function UploadTabs({ activeTab, setActiveTab }: Props) {
+  return (
+    <div
+      css={`
+        display: flex;
+        background: #dadaf8;
+        border-radius: 100px;
+        display: flex;
+        align-items: center;
+        padding: 4px 6.5px;
+        gap: 8px;
+        width: max-content;
+        button {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+          padding: 12px 16px;
+          text-transform: uppercase;
+          border-radius: 30px;
+          font-family: Inter;
+          font-size: 14px;
+          min-width: 203px;
+          border: none;
+          justify-content: center;
+          cursor: pointer;
+          :hover {
+            opacity: 0.8;
+          }
+        }
+      `}
+    >
+      <button
+        css={`
+          background: ${activeTab === "search" ? "#6061E5" : "transparent"};
+          font-weight: ${activeTab === "search" ? "bold" : "medium"};
+          color: ${activeTab === "search" ? "white" : "#231D2C"};
+        `}
+        onClick={() => setActiveTab("search")}
+      >
+        <Search /> Federated search
+      </button>
+
+      <button
+        css={`
+          background: ${activeTab === "file" ? "#6061E5" : "transparent"};
+          font-weight: ${activeTab === "file" ? "bold" : "medium"};
+          color: ${activeTab === "file" ? "white" : "#231D2C"};
+        `}
+        onClick={() => setActiveTab("file")}
+      >
+        <ComputerIcon color={activeTab === "file" ? "white" : "#231D2C"} /> FILE
+        upload
+      </button>
+    </div>
+  );
+}
+
+export default UploadTabs;
diff --git a/src/app/modules/dataset-upload-module/component/uploadOption.tsx b/src/app/modules/dataset-upload-module/component/uploadOption.tsx
new file mode 100644
index 000000000..cdbd60c52
--- /dev/null
+++ b/src/app/modules/dataset-upload-module/component/uploadOption.tsx
@@ -0,0 +1,196 @@
+import React from "react";
+import SettingsIcon from "../assets/upload-options-icons/settings";
+
+const UploadOption = (props: {
+  name: string;
+  type: string;
+  formats: string[];
+  icon: React.ReactNode;
+  disabled?: boolean;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  setActiveOption: React.Dispatch<React.SetStateAction<string | null>>;
+  connected?: boolean;
+  onLogout?: () => void;
+  canConnect?: boolean;
+}) => {
+  const [openSettings, setOpenSettings] = React.useState(false);
+  return (
+    <button
+      css={`
+        border-radius: 8px;
+        border: 1px solid #e2eaef;
+        width: 100%;
+        overflow: hidden;
+        padding: 0;
+        background: #fff;
+        cursor: pointer;
+        :disabled {
+          cursor: not-allowed;
+        }
+      `}
+      disabled={props.disabled}
+      onClick={(e) => {
+        props.setActiveOption(props.name);
+        props.onClick(e);
+      }}
+    >
+      <div
+        css={`
+          margin: 34px auto;
+          width: max-content;
+          display: flex;
+          gap: 14px;
+          align-items: center;
+          color: #6b727b;
+        `}
+      >
+        {props.icon}
+        <div>
+          <p
+            css={`
+              font-size: 18px;
+              font-style: normal;
+              font-weight: 400;
+              line-height: 20px; /* 111.111% */
+              letter-spacing: 0.5px;
+              font-family: "GothamNarrow-Bold", sans-serif;
+              margin: 0;
+              padding: 0;
+              text-align: left;
+            `}
+          >
+            {props.name}
+          </p>
+          <p
+            css={`
+              font-size: 14px;
+              font-style: normal;
+              font-weight: 325;
+              line-height: 20px; /* 111.111% */
+              letter-spacing: 0.5px;
+              font-family: "GothamNarrow-Book", sans-serif;
+              margin: 0;
+              padding: 0;
+              text-align: left;
+            `}
+          >
+            {props.type}
+          </p>
+        </div>
+      </div>
+      <div
+        css={`
+          padding: 7px 16px;
+          background: #f3f5f8;
+        `}
+      >
+        {props.canConnect ? (
+          <div
+            css={`
+              display: flex;
+              gap: 8px;
+              justify-content: space-between;
+              height: 24px;
+              align-items: center;
+            `}
+          >
+            <span
+              css={`
+                display: flex;
+                gap: 8px;
+                align-items: center;
+                font-size: 12px;
+                font-style: normal;
+                font-weight: 325;
+                line-height: 15px; /* 125% */
+                letter-spacing: 0.5px;
+                font-family: "GothamNarrow-Book", sans-serif;
+                color: #6b727b;
+              `}
+            >
+              <div
+                css={`
+                  width: 8px;
+                  height: 8px;
+                  border-radius: 50%;
+                  background-color: ${props.connected ? "#51dbca" : "#D9D9D9"};
+                `}
+              ></div>
+              {props.connected ? "Connected" : "Not Connected"}
+            </span>
+
+            {props.connected ? (
+              <div
+                css={`
+                  position: relative;
+                `}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setOpenSettings(!openSettings);
+                }}
+              >
+                <div
+                  css={`
+                    position: absolute;
+                    right: calc(100% + 10px);
+                    top: -4px;
+                    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);
+                  `}
+                  hidden={!openSettings}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                >
+                  <button
+                    onClick={() => {
+                      props.onLogout?.();
+                      setOpenSettings(false);
+                    }}
+                    css={`
+                      font-size: 12px;
+                      font-style: normal;
+                      font-weight: 400;
+                      line-height: 15px; /* 125% */
+                      letter-spacing: 0.5px;
+                      color: white;
+                      font-family: "GothamNarrow-Bold", sans-serif;
+                      border-radius: 12px;
+                      background: #6061e5;
+                      border: none;
+                      /* padding: 5px 0; */
+                      width: 113px;
+                      height: 24px;
+                      cursor: pointer;
+                      :hover: {
+                        opacity: 0.8;
+                      }
+                    `}
+                  >
+                    Logout
+                  </button>
+                </div>
+
+                <SettingsIcon />
+              </div>
+            ) : null}
+          </div>
+        ) : (
+          <div
+            css={`
+              display: flex;
+              gap: 8px;
+              height: 24px;
+              align-items: center;
+            `}
+          >
+            {props.formats.map((f) => (
+              <span>{f}</span>
+            ))}
+          </div>
+        )}
+      </div>
+    </button>
+  );
+};
+
+export default UploadOption;
diff --git a/src/app/modules/dataset-upload-module/style.ts b/src/app/modules/dataset-upload-module/style.ts
index 14969be72..f94d6767c 100644
--- a/src/app/modules/dataset-upload-module/style.ts
+++ b/src/app/modules/dataset-upload-module/style.ts
@@ -18,36 +18,14 @@ export const stepcss = css`
     height: 50px;
   }
 `;
-export const uploadDatasetcss = css`
-  div:nth-child(1) {
-    background: #dadaf8;
-    height: 55px;
-    width: 100%;
-    color: #231d2c;
-    font-family: "GothamNarrow-Book";
-    font-style: normal;
-    font-weight: 500;
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-    padding-left: 2rem;
-    margin-top: 5rem;
-  }
-`;
 
 export const uploadAreacss = (isDragActive: boolean, disabled?: boolean) => css`
-  height: 529px;
+  height: 131px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 
-  background-color: ${isDragActive && !disabled ? "#c4c4c4" : "#ffffff"};
-  background-image: ${isDragActive && !disabled
-    ? `url(
-              "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='163' height='163' viewBox='0 0 20 20'%3E%3Cg %3E%3Cpolygon fill='%23ffffff' points='20 10 10 0 0 0 20 20'/%3E%3Cpolygon fill='%23ffffff' points='0 10 0 20 10 20'/%3E%3C/g%3E%3C/svg%3E"
-            )`
-    : "unset"};
   &:hover {
     cursor: ${!isDragActive && !disabled ? "pointer" : "default"};
   }
@@ -94,7 +72,7 @@ export const metaDatacss = css`
     font-weight: 500;
     font-size: 48px;
     font-family: "Inter", sans-serif;
-    margin-top: 6rem;
+    margin-top: 40px;
 
     margin-bottom: 4.5rem;
   }
diff --git a/src/app/modules/dataset-upload-module/upload-steps/addDatasetFragment.tsx b/src/app/modules/dataset-upload-module/upload-steps/addDatasetFragment.tsx
index 583b07326..509fcae5a 100644
--- a/src/app/modules/dataset-upload-module/upload-steps/addDatasetFragment.tsx
+++ b/src/app/modules/dataset-upload-module/upload-steps/addDatasetFragment.tsx
@@ -1,69 +1,59 @@
 /**third party */
-import React, { useCallback, useEffect } from "react";
-import { useDropzone } from "react-dropzone";
-import useDrivePicker from "react-google-drive-picker";
-import {
-  CallbackDoc,
-  PickerCallback,
-} from "react-google-drive-picker/dist/typeDefs";
-import axios from "axios";
+import React, { useCallback } from "react";
+
 /** project */
-import { formatBytes } from "app/utils/formatBytes";
-import { useStoreState } from "app/state/store/hooks";
+
 import { DropZone } from "app/modules/dataset-upload-module/component/dropzone/";
+import { Box } from "@material-ui/core";
+import LocalIcon from "../assets/upload-options-icons/local";
+import GoogleIcon from "../assets/upload-options-icons/google";
+import MicrosoftIcon from "../assets/upload-options-icons/microsoft";
+import ApiIcon from "../assets/upload-options-icons/api";
+import MSSQLIcon from "../assets/upload-options-icons/mssql.png";
+import MYSQLIcon from "../assets/upload-options-icons/mysql.png";
+import PostgresIcon from "../assets/upload-options-icons/postgres";
+import MongoDbIcon from "../assets/upload-options-icons/mongodb";
+import HubspotIcon from "../assets/upload-options-icons/hubspot";
+import UploadOption from "../component/uploadOption";
+import { useCookie } from "react-use";
+import useGoogleDrivePicker from "app/hooks/useGoogleDrivePicker";
+import { useOneDrivePicker } from "app/hooks/useOneDrivePicker";
 
 interface Props {
   disabled: boolean;
   onFileSubmit: (file: File) => void;
   processingError: string | null;
-  setIsExternalSearch: React.Dispatch<React.SetStateAction<boolean>>;
+  activeOption: string | null;
+  setActiveOption: React.Dispatch<React.SetStateAction<string | null>>;
+  setActiveStep: React.Dispatch<React.SetStateAction<number>>;
 }
 
 export default function AddDatasetFragment(props: Props) {
-  const [openPicker] = useDrivePicker();
-  const token = useStoreState((state) => state.AuthToken.value);
-
-  const handleGoogleDriveFilePicker = async (
-    file: CallbackDoc,
-    accessToken: string
-  ) => {
-    try {
-      const response = await axios({
-        url: `https://www.googleapis.com/drive/v3/files/${file.id}${
-          file.type === "file" ? "?alt=media" : "/export?mimeType=text/csv"
-        }`,
-        method: "GET",
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-        },
-        responseType: "blob", // important
-      });
-
-      const b = response?.data;
-      const gfile = new File([b], file.name, { type: "text/csv" });
+  const [googleDriveToken, setGoogleDriveToken, deleteGoogleDriveToken] =
+    useCookie("googleDriveToken");
 
-      props.onFileSubmit(gfile);
-    } catch (e) {
-      console.log(e, "handleGoogleDriveFilePicker error");
-    }
-  };
-  useEffect(() => {
-    if (process.env.REACT_APP_CYPRESS_TEST === "true") {
-      window.handleGoogleDriveFilePicker = function (file: any, token: string) {
-        handleGoogleDriveFilePicker(file, token);
-      };
-    }
-  }, []);
+  const { getAccessTokenAndOpenPicker } = useGoogleDrivePicker({
+    onCancel: () => {
+      props.setActiveOption(null);
+    },
+    onFileSubmit: (file: File) => {
+      props.onFileSubmit(file);
+    },
+    googleDriveToken,
+    setGoogleDriveToken,
+  });
 
-  const ACCEPTED_FILES = {
-    "text/csv": [".csv"],
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [
-      ".xlsx",
-    ],
-    "application/xml": [".xml"],
-    "application/vnd.ms-excel": [".xls"],
-    "application/xhtml+xml": [".xhtml"],
-  };
+  const { launchPicker, clearToken, connected } = useOneDrivePicker({
+    onCancel: () => {
+      props.setActiveOption(null);
+    },
+    onFileSubmit: (file: File) => {
+      props.onFileSubmit(file);
+    },
+    onDownloadStart: () => {
+      props.setActiveStep(1);
+    },
+  });
 
   const onDrop = useCallback((acceptedFiles: File[]) => {
     if (acceptedFiles.length > 0) {
@@ -71,76 +61,207 @@ export default function AddDatasetFragment(props: Props) {
     }
   }, []);
 
-  const {
-    getRootProps,
-    getInputProps,
-    isDragActive,
-    acceptedFiles,
-    fileRejections,
-  } = useDropzone({ onDrop, accept: ACCEPTED_FILES });
-
-  const getAccessToken = () => {
-    return axios.get(
-      `${process.env.REACT_APP_API}/dataset/google-drive/user-token`,
-      {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      }
-    );
-  };
-
-  const getAccessTokenAndOpenPicker = async () => {
-    try {
-      const res = await getAccessToken();
-
-      //opens google drive picker
-      openPicker({
-        clientId: process.env.REACT_APP_GOOGLE_API_CLIENT_ID as string,
-        developerKey: process.env.REACT_APP_GOOGLE_API_DEV_KEY as string,
-        viewId: "SPREADSHEETS",
-        supportDrives: true,
-        token: res.data,
-        setSelectFolderEnabled: true,
-        callbackFunction: (d: PickerCallback) => {
-          handleGoogleDriveFilePicker(d.docs[0], res.data);
-        },
-      });
-    } catch (e) {
-      console.log(e, "error");
-    }
-  };
-
-  function handleOpenPicker(e: React.MouseEvent<HTMLButtonElement>) {
-    e.stopPropagation();
-    getAccessTokenAndOpenPicker();
-  }
-
-  const fileRejectionItems = fileRejections.map(({ file, errors }) => (
-    <li key={file.name}>
-      {file.name} - {formatBytes(file.size)}
-      <ul>
-        {errors.map((e) => (
-          <li key={e.code}>{e.message}</li>
-        ))}
-      </ul>
-    </li>
-  ));
+  const uploadOptions = [
+    {
+      name: "Local upload",
+      type: "Table Dataset",
+      formats: ["CSV", "XSLX", "JSON", "ODS", "SQLite"],
+      icon: <LocalIcon />,
+      onClick: () => {},
+    },
+    {
+      name: "Google Drive",
+      type: "Upload",
+      formats: [],
+      icon: <GoogleIcon />,
+      onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        getAccessTokenAndOpenPicker();
+      },
+      canConnect: true,
+      connected: !!googleDriveToken,
+      onLogout: () => {
+        deleteGoogleDriveToken();
+      },
+    },
+    {
+      name: "Microsoft Cloud",
+      type: "Upload",
+      formats: [],
+      icon: <MicrosoftIcon />,
+      onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        launchPicker();
+      },
+      canConnect: true,
+      connected: connected,
+      onLogout: async () => {
+        await clearToken();
+      },
+    },
+    {
+      name: "API Connection",
+      type: "URL, JSON or XML root",
+      formats: ["CSV", "XSLX", "JSON", "ODS", "SQLite"],
+      icon: <ApiIcon />,
+      onClick: () => {},
+    },
+    {
+      name: "MSSQL",
+      type: "DataBase Connection",
+      formats: ["Coming Soon"],
+      icon: <img width={30} height={33.462} src={MSSQLIcon} />,
+      onClick: () => {},
+    },
+    {
+      name: "MSSQL",
+      type: "DataBase Connection",
+      formats: ["Coming Soon"],
+      icon: <img width={30} height={30} src={MYSQLIcon} />,
+      onClick: () => {},
+    },
+    {
+      name: "PostgreSQL",
+      type: "DataBase Connection",
+      formats: ["Coming Soon"],
+      icon: <PostgresIcon />,
+      onClick: () => {},
+    },
+    {
+      name: "MongoDB",
+      type: "DataBase Connection",
+      formats: ["Coming Soon"],
+      icon: <MongoDbIcon />,
+      onClick: () => {},
+    },
+    {
+      name: "Hubspot",
+      type: "DataBase Connection",
+      formats: ["Coming Soon"],
+      icon: <HubspotIcon />,
+      onClick: () => {},
+    },
+  ];
 
   return (
     <>
-      <DropZone
-        disabled={props.disabled}
-        getRootProps={getRootProps}
-        getInputProps={getInputProps}
-        isDragActive={isDragActive}
-        fileRejections={fileRejections}
-        acceptedFiles={acceptedFiles}
-        handleOpenPicker={handleOpenPicker}
-        uploadError={!!props.processingError}
-        setIsExternalSearch={props.setIsExternalSearch}
-      />
-      {fileRejections.length > 0 && fileRejectionItems}
+      <div
+        css={`
+          h1 {
+            font-family: "Inter", sans-serif;
+            font-size: 24px;
+            font-weight: 700;
+            color: #231d2c;
+            margin: 0px;
+          }
+          p {
+            color: #231d2c;
+            font-family: "GothamNarrow-Book";
+            font-size: 14px;
+            font-weight: 325;
+            line-height: 20px;
+            letter-spacing: 0.5px;
+            margin: 0px;
+            padding: 0px;
+          }
+        `}
+      >
+        <h1>File Upload</h1>
+        <Box height={22} />
+        <p>
+          Upload your favourite data effortlessly in DataXplorer, and with just
+          a few clicks, import datasets without the hassle of downloading,{" "}
+          <br />
+          enabling you to visualize and analyse diverse data like never before.
+        </p>
+      </div>
+
+      <Box height={48} />
+
+      {props.activeOption === "Local upload" ? (
+        <>
+          <DropZone
+            disabled={props.disabled}
+            uploadError={!!props.processingError}
+            onDrop={onDrop}
+          />
+        </>
+      ) : (
+        <div>
+          <div
+            css={`
+              padding: 19px 23px;
+              font-size: 14px;
+              font-style: normal;
+              font-weight: 400;
+              line-height: normal;
+              font-family: "GothamNarrow-Bold", sans-serif;
+              background: #dadaf84d;
+              border-radius: 16px 16px 0px 0px;
+              width: 100%;
+            `}
+          >
+            Connect your data
+          </div>
+          <div
+            css={`
+              padding: 24px;
+            `}
+          >
+            <div
+              css={`
+                display: grid;
+                grid-template-columns: repeat(3, minmax(0, 1fr));
+                gap: 10px;
+              `}
+            >
+              {uploadOptions.slice(0, 3).map((option) => (
+                <UploadOption
+                  key={option.name}
+                  name={option.name}
+                  type={option.type}
+                  formats={option.formats}
+                  icon={option.icon}
+                  onClick={option.onClick}
+                  setActiveOption={props.setActiveOption}
+                  canConnect={option.canConnect}
+                  connected={option.connected}
+                  onLogout={option.onLogout}
+                />
+              ))}
+            </div>
+            <Box height={32} />
+            <div
+              css={`
+                border-bottom: 1px solid #e2eaee;
+                width: 100%;
+              `}
+            />
+            <Box height={32} />
+            <div
+              css={`
+                display: grid;
+                grid-template-columns: repeat(3, minmax(0, 1fr));
+                gap: 10px;
+                opacity: 0.5;
+              `}
+            >
+              {uploadOptions.slice(3).map((option) => (
+                <UploadOption
+                  key={option.name}
+                  name={option.name}
+                  type={option.type}
+                  formats={option.formats}
+                  icon={option.icon}
+                  onClick={option.onClick}
+                  disabled
+                  setActiveOption={props.setActiveOption}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
     </>
   );
 }
diff --git a/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx b/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx
index 2ffa2cd79..43aae4f6c 100644
--- a/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx
+++ b/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx
@@ -9,6 +9,7 @@ import useDebounce from "react-use/lib/useDebounce";
 import axios from "axios";
 import CircleLoader from "app/modules/home-module/components/Loader";
 import { useInfinityScroll } from "app/hooks/useInfinityScroll";
+import SourceCategoryList from "../component/externalSourcesList";
 
 export interface IExternalDataset {
   name: string;
@@ -32,7 +33,6 @@ export default function ExternalSearch(props: {
   handleDownload: (dataset: IExternalDataset) => void;
   setProcessingError: React.Dispatch<React.SetStateAction<string | null>>;
   setActiveStep: React.Dispatch<React.SetStateAction<number>>;
-  setIsExternalSearch: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
   const observerTarget = React.useRef(null);
   const [tableView, setTableView] = React.useState(false);
@@ -45,6 +45,14 @@ export default function ExternalSearch(props: {
   const limit = 20;
   const [datasets, setDatasets] = React.useState<IExternalDataset[]>([]);
 
+  const [sources, setSources] = React.useState<string[]>([]);
+  const baseSources = [
+    { name: "Kaggle", value: "Kaggle" },
+    { name: "World Bank", value: "World Bank" },
+    { name: "WHO", value: "WHO" },
+    { name: "HDX", value: "HDX" },
+  ];
+
   const { isObserved } = useInfinityScroll(observerTarget);
 
   const abortControllerRef = React.useRef<AbortController>(
@@ -53,8 +61,8 @@ export default function ExternalSearch(props: {
   const terminateSearch = () => {
     abortControllerRef.current.abort();
     abortControllerRef.current = new AbortController();
-    setDatasets([]);
-    setOffset(0);
+    // setDatasets([]);
+    // setOffset(0);
   };
 
   // Pagination on scroll
@@ -70,7 +78,9 @@ export default function ExternalSearch(props: {
       const response = await axios.get(
         `${
           process.env.REACT_APP_API
-        }/external-sources/search?q=${searchValue}&source=${"Kaggle,World Bank,WHO,HDX"}&offset=${offset}&limit=${limit}`,
+        }/external-sources/search?q=${searchValue}&source=${
+          sources.length ? sources.join(",") : "Kaggle,World Bank,WHO,HDX"
+        }&offset=${offset}&limit=${limit}`,
         {
           signal: abortControllerRef.current.signal,
           headers: {
@@ -112,70 +122,62 @@ export default function ExternalSearch(props: {
       }
     },
     500,
-    [searchValue, token]
+    [searchValue, token, sources]
   );
   return (
     <>
       <div
         css={`
-          display: flex;
-          gap: 80px;
-          align-items: start;
-          padding-top: 97px;
-          button {
-            cursor: pointer;
+          h1 {
+            font-family: "Inter", sans-serif;
+            font-size: 24px;
+            font-weight: 700;
+            color: #231d2c;
+            margin: 0px;
+          }
+          p {
+            color: #231d2c;
+            font-family: "GothamNarrow-Book";
+            font-size: 14px;
+            font-weight: 325;
+            line-height: 20px;
+            letter-spacing: 0.5px;
+            margin: 0px;
             padding: 0px;
-            &:hover {
-              background-color: transparent;
-            }
           }
         `}
       >
-        <IconButton onClick={() => props.setIsExternalSearch(false)}>
-          <ArrowBackIcon htmlColor="#000" />
-        </IconButton>
-        <div
-          css={`
-            h1 {
-              font-family: "Inter", sans-serif;
-              font-size: 24px;
-              font-weight: 700;
-              color: #231d2c;
-              margin: 0px;
-            }
-            p {
-              color: #231d2c;
-              font-family: "GothamNarrow-Book";
-              font-size: 14px;
-              font-weight: 325;
-              line-height: 20px;
-              letter-spacing: 0.5px;
-            }
-          `}
-        >
-          <h1>External Search</h1>
-          <p>
-            Connect to your favourite data sources effortlessly in DataXplorer,
-            and with just a few clicks, import datasets without the hassle of
-            downloading, enabling you to visualize and analyse diverse data like
-            never before.
-          </p>
-        </div>
+        <h1>Federated Search</h1>
+        <Box height={22} />
+        <p>
+          Connect to your favourite data sources effortlessly in DataXplorer,
+          and with just a few clicks, import datasets without the hassle of
+          downloading,
+          <br /> enabling you to visualize and analyse diverse data like never
+          before.
+        </p>
       </div>
-      <Grid container justifyContent="flex-end">
-        <Grid item lg={6} md={6} sm={6}>
-          <Filter
-            searchValue={searchValue as string}
-            setSearchValue={setSearchValue}
-            setSortValue={setSortValue}
-            setTableView={setTableView}
-            sortValue={sortValue}
-            tableView={tableView}
-            terminateSearch={terminateSearch}
-          />
-        </Grid>
+      <Box height={32} />
+      <Grid container justifyContent="space-between" alignItems="center">
+        <SourceCategoryList
+          sources={sources}
+          setSources={setSources}
+          baseSources={baseSources}
+        />
+
+        <Filter
+          searchValue={searchValue as string}
+          setSearchValue={setSearchValue}
+          setSortValue={setSortValue}
+          setTableView={setTableView}
+          sortValue={sortValue}
+          tableView={tableView}
+          terminateSearch={terminateSearch}
+          searchInputWidth="292px"
+        />
       </Grid>
-      <Box height={62} />
+
+      <Box height={32} />
       <Grid container spacing={2}>
         {datasets &&
           datasets?.map((dataset, index) => (
diff --git a/src/app/modules/dataset-upload-module/upload-steps/index.tsx b/src/app/modules/dataset-upload-module/upload-steps/index.tsx
index 7cbe4154d..6c0919e58 100644
--- a/src/app/modules/dataset-upload-module/upload-steps/index.tsx
+++ b/src/app/modules/dataset-upload-module/upload-steps/index.tsx
@@ -1,5 +1,5 @@
 /** third party */
-import React from "react";
+import React, { useEffect } from "react";
 import axios from "axios";
 import Container from "@material-ui/core/Container";
 import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";
@@ -23,6 +23,10 @@ import ExternalSearch, {
 import Stepper from "app/modules/dataset-upload-module/component/stepper";
 import { Box } from "@material-ui/core";
 import { useTitle } from "react-use";
+import BreadCrumbs from "app/modules/home-module/components/Breadcrumbs";
+import UploadTabs from "../component/tabs";
+import HomeFooter from "app/modules/home-module/components/Footer";
+import SmallFooter from "app/modules/home-module/components/Footer/smallFooter";
 
 interface Props {
   datasetId: string;
@@ -50,7 +54,9 @@ function DatasetUploadSteps(props: Props) {
   const [processed, setProcessed] = React.useState(false);
   const [selectedFile, setSelectedFile] = React.useState<File | null>(null);
   const [isExternalSearch, setIsExternalSearch] = React.useState(false);
-  const [fromExternalSearch, setFromExternalSearch] = React.useState(false);
+
+  const [activeTab, setActiveTab] = React.useState<"search" | "file">("search");
+  const [activeOption, setActiveOption] = React.useState<string | null>(null);
 
   const defaultProcessingError =
     "Data could not be processed, please try again or contact your administrator";
@@ -203,9 +209,6 @@ function DatasetUploadSteps(props: Props) {
     const id = ObjectId();
     //expose file id to datasetId state; to be used in dataset upload
     props.setDatasetId(id);
-    //set isExternalSearch to false
-    setIsExternalSearch(false);
-    setFromExternalSearch(true);
     //set active step to processing
     setActiveStep(1);
     axios
@@ -249,21 +252,63 @@ function DatasetUploadSteps(props: Props) {
 
   const tryAgain = () => {
     setActiveStep(0);
-    if (fromExternalSearch) {
-      setIsExternalSearch(true);
-    }
   };
 
+  useEffect(() => {
+    if (activeOption) {
+      setActiveOption(null);
+    }
+  }, [activeTab]);
+
   const currentStep = () => {
     switch (activeStep) {
       case 0:
         return (
-          <AddDatasetFragment
-            onFileSubmit={onFileSubmit}
-            disabled={false}
-            processingError={processingError}
-            setIsExternalSearch={setIsExternalSearch}
-          />
+          <>
+            <Box height={32} />
+            <BreadCrumbs
+              items={[
+                { title: "Library", path: "/" },
+                {
+                  title: (
+                    <span
+                      onClick={() => {
+                        if (activeOption) {
+                          setActiveOption(null);
+                        }
+                      }}
+                    >
+                      Connect Data
+                    </span>
+                  ),
+                  path: "#",
+                },
+                ...(activeOption ? [{ title: activeOption }] : []),
+              ]}
+            />
+            <Box height={24} />
+            <UploadTabs activeTab={activeTab} setActiveTab={setActiveTab} />
+            <Box height={24} />
+            {activeTab === "search" ? (
+              <>
+                <ExternalSearch
+                  setFormDetails={setFormDetails}
+                  setActiveStep={setActiveStep}
+                  setProcessingError={setProcessingError}
+                  handleDownload={handleDownloadExternalDataset}
+                />
+              </>
+            ) : (
+              <AddDatasetFragment
+                onFileSubmit={onFileSubmit}
+                disabled={false}
+                processingError={processingError}
+                setActiveOption={setActiveOption}
+                activeOption={activeOption}
+                setActiveStep={setActiveStep}
+              />
+            )}
+          </>
         );
       case 1:
         return (
@@ -309,7 +354,9 @@ function DatasetUploadSteps(props: Props) {
             onFileSubmit={onFileSubmit}
             disabled={false}
             processingError={processingError}
-            setIsExternalSearch={setIsExternalSearch}
+            setActiveOption={setActiveOption}
+            activeOption={activeOption}
+            setActiveStep={setActiveStep}
           />
         );
     }
@@ -317,38 +364,32 @@ function DatasetUploadSteps(props: Props) {
 
   return (
     <>
-      <Container maxWidth="lg">
-        <div css={stepcss}>
-          {steps.map((tab, index) => (
-            <Stepper
-              activeStep={activeStep}
-              setActiveStep={setActiveStep}
-              index={index}
-              tab={tab}
-              tabs={steps}
-              key={tab}
-              disabled={index > 0 && !processed && activeStep !== index}
-            />
-          ))}
-        </div>
+      <div
+        css={`
+          min-height: calc(100vh - 73px);
+        `}
+      >
+        <Container maxWidth="lg">
+          <div css={stepcss}>
+            {steps.map((tab, index) => (
+              <Stepper
+                activeStep={activeStep}
+                setActiveStep={setActiveStep}
+                index={index}
+                tab={tab}
+                tabs={steps}
+                key={tab}
+                disabled={index > 0 && !processed && activeStep !== index}
+              />
+            ))}
+          </div>
 
-        {isExternalSearch ? (
-          <>
-            <Box height={32} />
-            <ExternalSearch
-              setFormDetails={setFormDetails}
-              setActiveStep={setActiveStep}
-              setProcessingError={setProcessingError}
-              handleDownload={handleDownloadExternalDataset}
-              setIsExternalSearch={setIsExternalSearch}
-            />
-          </>
-        ) : (
           <>
             <PageTopSpacer /> <div>{currentStep()}</div>
           </>
-        )}
-      </Container>
+        </Container>
+      </div>
+      {activeStep === 0 ? <SmallFooter /> : null}
     </>
   );
 }
diff --git a/src/app/modules/home-module/components/All/assetsGrid.tsx b/src/app/modules/home-module/components/All/assetsGrid.tsx
index 09f6b0211..760c9449e 100644
--- a/src/app/modules/home-module/components/All/assetsGrid.tsx
+++ b/src/app/modules/home-module/components/All/assetsGrid.tsx
@@ -22,12 +22,12 @@ import ReportAddnewCard from "../Reports/reportAddNewCard";
 import ColoredReportIcon from "app/assets/icons/ColoredReportIcon";
 import DeleteDatasetDialog from "app/components/Dialogs/deleteDatasetDialog";
 import DeleteReportDialog from "app/components/Dialogs/deleteReportDialog";
+import { HomepageTable } from "../Table";
 
 interface Props {
   sortBy: string;
   searchStr: string;
   tableView: boolean;
-  addCard?: boolean;
   showMenuButton: boolean;
   inChartBuilder?: boolean;
   category?: string;
@@ -236,87 +236,115 @@ export default function AssetsGrid(props: Props) {
 
   return (
     <>
-      <Grid container spacing={2}>
-        {props.addCard && (
-          <>
-            <DatasetAddnewCard />
-            <ChartAddnewCard />
-            <ReportAddnewCard />
-          </>
-        )}
-        {loadedAssets.map((d, index) => (
-          <Grid item key={d.id} xs={12} sm={6} md={4} lg={3}>
-            {
-              {
-                chart: (
-                  <ChartGridItem
-                    id={d.id}
-                    title={d.name}
-                    public={d.public}
-                    date={d.createdDate}
-                    path={`/chart/${d.id}`}
-                    viz={getIcon(d.vizType)}
-                    vizType={d.vizType}
-                    isMappingValid={d.isMappingValid}
-                    handleDelete={() => {
-                      setActiveAssetType(d.assetType as assetType);
-                      handleModal(d.id);
-                    }}
-                    handleDuplicate={() =>
-                      handleDuplicate(d.id, d.assetType as assetType)
-                    }
-                    owner={d.owner}
-                    isAIAssisted={d.isAIAssisted}
-                  />
-                ),
-                dataset: (
-                  <DatasetGridItem
-                    path={`/dataset/${d.id}/edit`}
-                    title={d.name}
-                    date={d.createdDate}
-                    handleDelete={() => {
-                      setActiveAssetType(d.assetType as assetType);
-                      handleModal(d.id);
-                    }}
-                    descr={d.description}
-                    handleDuplicate={() => {
-                      handleDuplicate(d.id, d.assetType as assetType);
-                    }}
-                    showMenu={!props.inChartBuilder}
-                    id={d.id}
-                    owner={d.owner}
-                    inChartBuilder={props.inChartBuilder as boolean}
-                    fromHome={props.fromHome}
-                  />
-                ),
-                report: (
-                  <ReportGridItem
-                    id={d.id}
-                    key={d.id}
-                    descr={d.name}
-                    public={d.public}
-                    date={d.createdDate}
-                    viz={<ColoredReportIcon />}
-                    color={d.backgroundColor}
-                    showMenuButton={props.showMenuButton}
-                    handleDelete={() => {
-                      setActiveAssetType(d.assetType as assetType);
-                      handleModal(d.id);
-                    }}
-                    handleDuplicate={() =>
-                      handleDuplicate(d.id, d.assetType as assetType)
-                    }
-                    title={d.title || d.name}
-                    owner={d.owner}
-                  />
-                ),
-              }[d.assetType as assetType]
+      {props.tableView ? (
+        <HomepageTable
+          fromHome={props.fromHome}
+          onItemClick={props.onItemClick}
+          inChartBuilder={props.inChartBuilder}
+          data={loadedAssets.map((data) => {
+            if (data.assetType === "chart") {
+              return {
+                id: data.id,
+                name: data.name,
+                description: data.title,
+                createdDate: data.createdDate,
+                type: data.assetType,
+              };
+            } else if (data.assetType === "dataset") {
+              return {
+                id: data.id,
+                name: data.name,
+                description: data.description,
+                createdDate: data.createdDate,
+                type: data.assetType,
+              };
             }
 
-            <Box height={16} />
-          </Grid>
-        ))}
-      </Grid>
+            return {
+              id: data.id,
+              name: data.name,
+              description: data.title,
+              createdDate: data.createdDate,
+              type: data.assetType,
+            };
+          })}
+        />
+      ) : (
+        <Grid container spacing={2}>
+          {loadedAssets.map((d, index) => (
+            <Grid item key={d.id} xs={12} sm={6} md={4} lg={3}>
+              {
+                {
+                  chart: (
+                    <ChartGridItem
+                      id={d.id}
+                      title={d.name}
+                      public={d.public}
+                      date={d.createdDate}
+                      path={`/chart/${d.id}`}
+                      viz={getIcon(d.vizType)}
+                      vizType={d.vizType}
+                      isMappingValid={d.isMappingValid}
+                      handleDelete={() => {
+                        setActiveAssetType(d.assetType as assetType);
+                        handleModal(d.id);
+                      }}
+                      handleDuplicate={() =>
+                        handleDuplicate(d.id, d.assetType as assetType)
+                      }
+                      owner={d.owner}
+                      isAIAssisted={d.isAIAssisted}
+                    />
+                  ),
+                  dataset: (
+                    <DatasetGridItem
+                      path={`/dataset/${d.id}/edit`}
+                      title={d.name}
+                      date={d.createdDate}
+                      handleDelete={() => {
+                        setActiveAssetType(d.assetType as assetType);
+                        handleModal(d.id);
+                      }}
+                      descr={d.description}
+                      handleDuplicate={() => {
+                        handleDuplicate(d.id, d.assetType as assetType);
+                      }}
+                      showMenu={!props.inChartBuilder}
+                      id={d.id}
+                      owner={d.owner}
+                      inChartBuilder={props.inChartBuilder as boolean}
+                      fromHome={props.fromHome}
+                    />
+                  ),
+                  report: (
+                    <ReportGridItem
+                      id={d.id}
+                      key={d.id}
+                      descr={d.name}
+                      public={d.public}
+                      date={d.createdDate}
+                      viz={<ColoredReportIcon />}
+                      color={d.backgroundColor}
+                      showMenuButton={props.showMenuButton}
+                      handleDelete={() => {
+                        setActiveAssetType(d.assetType as assetType);
+                        handleModal(d.id);
+                      }}
+                      handleDuplicate={() =>
+                        handleDuplicate(d.id, d.assetType as assetType)
+                      }
+                      title={d.title || d.name}
+                      owner={d.owner}
+                    />
+                  ),
+                }[d.assetType as assetType]
+              }
+
+              <Box height={16} />
+            </Grid>
+          ))}
+        </Grid>
+      )}
 
       <Box height={80} />
 
diff --git a/src/app/modules/home-module/components/Breadcrumbs/index.tsx b/src/app/modules/home-module/components/Breadcrumbs/index.tsx
new file mode 100644
index 000000000..9e5b45b9d
--- /dev/null
+++ b/src/app/modules/home-module/components/Breadcrumbs/index.tsx
@@ -0,0 +1,81 @@
+import { KeyboardArrowRight } from "@material-ui/icons";
+import React from "react";
+import { Link } from "react-router-dom";
+
+interface BreadCrumbsProps {
+  items: { path?: string; title: React.ReactNode }[];
+}
+
+function BreadCrumbs(props: BreadCrumbsProps) {
+  return (
+    <div
+      css={`
+        display: flex;
+        align-items: center;
+      `}
+    >
+      {props.items.map((item, index) => (
+        <div
+          css={`
+            display: flex;
+            align-items: center;
+          `}
+        >
+          {index === props.items.length - 1 ? (
+            <span
+              css={`
+                &,
+                * {
+                  font-size: 24px;
+                  font-family: "GothamNarrow-Bold", sans-serif;
+                  font-weight: 400;
+                  line-height: 29px;
+                  color: #2b3674;
+                  margin: 0;
+                  line-height: 42px;
+                  padding: 0;
+                }
+              `}
+            >
+              {item.title}
+            </span>
+          ) : (
+            <Link
+              to={item.path}
+              css={`
+                &,
+                * {
+                  font-size: 24px;
+                  font-family: "GothamNarrow-Book", sans-serif;
+                  font-weight: 325;
+                  line-height: 29px;
+                  color: #2b3674;
+                  margin: 0;
+                  line-height: 42px;
+                  padding: 0;
+                  text-decoration: none;
+                  :hover {
+                    opacity: 0.8;
+                  }
+                }
+              `}
+            >
+              {item.title}
+            </Link>
+          )}
+
+          {index < props.items.length - 1 && (
+            <KeyboardArrowRight
+              css={`
+                width: 24px;
+                height: 24px;
+              `}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default BreadCrumbs;
diff --git a/src/app/modules/home-module/components/Charts/chartsGrid.tsx b/src/app/modules/home-module/components/Charts/chartsGrid.tsx
index 9bca2b8d5..ef90a2044 100644
--- a/src/app/modules/home-module/components/Charts/chartsGrid.tsx
+++ b/src/app/modules/home-module/components/Charts/chartsGrid.tsx
@@ -210,7 +210,7 @@ export default function ChartsGrid(props: Props) {
     <>
       {!props.tableView && (
         <Grid container spacing={2}>
-          {props.addCard && isAuthenticated ? <ChartAddnewCard /> : null}
+          {props.addCard ? <ChartAddnewCard /> : null}
           {loadedCharts.map((c, index) => (
             <Grid item key={c.id} xs={12} sm={6} md={4} lg={3}>
               <GridItem
@@ -239,6 +239,7 @@ export default function ChartsGrid(props: Props) {
             name: data.name,
             description: data.title,
             createdDate: data.createdDate,
+            type: "chart",
           }))}
         />
       )}
diff --git a/src/app/modules/home-module/components/Datasets/datasetsGrid.tsx b/src/app/modules/home-module/components/Datasets/datasetsGrid.tsx
index 5b9f49bbd..b904bd863 100644
--- a/src/app/modules/home-module/components/Datasets/datasetsGrid.tsx
+++ b/src/app/modules/home-module/components/Datasets/datasetsGrid.tsx
@@ -209,7 +209,7 @@ export default function DatasetsGrid(props: Readonly<Props>) {
     <>
       {!props.tableView && (
         <Grid container spacing={!props.inChartBuilder ? 2 : 1}>
-          {props.addCard && isAuthenticated ? <DatasetAddnewCard /> : null}
+          {props.addCard ? <DatasetAddnewCard /> : null}
           {loadedDatasets?.map((data, index) => (
             <Grid
               item
@@ -281,6 +281,7 @@ export default function DatasetsGrid(props: Readonly<Props>) {
             name: data.name,
             description: data.description,
             createdDate: data.createdDate,
+            type: "dataset",
           }))}
         />
       )}
diff --git a/src/app/modules/home-module/components/Filter/index.tsx b/src/app/modules/home-module/components/Filter/index.tsx
index 1eda07ad1..270096dc5 100644
--- a/src/app/modules/home-module/components/Filter/index.tsx
+++ b/src/app/modules/home-module/components/Filter/index.tsx
@@ -20,6 +20,7 @@ export default function Filter(
     setTableView: React.Dispatch<React.SetStateAction<boolean>>;
     tableView: boolean;
     terminateSearch?: () => void;
+    searchInputWidth?: string;
   }>
 ) {
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -55,7 +56,7 @@ export default function Filter(
           gap: 8px;
         `}
       >
-        <div css={searchInputCss(openSearch)}>
+        <div css={searchInputCss(openSearch, props.searchInputWidth)}>
           <input
             type="text"
             ref={inputRef}
diff --git a/src/app/modules/home-module/components/Footer/index.tsx b/src/app/modules/home-module/components/Footer/index.tsx
index 7c363533f..d187dc305 100644
--- a/src/app/modules/home-module/components/Footer/index.tsx
+++ b/src/app/modules/home-module/components/Footer/index.tsx
@@ -213,7 +213,7 @@ export default function HomeFooter({ small }: { small?: boolean }) {
             display: flex;
             gap: 38px;
             align-items: center;
-            border-top: 1px solid #d9d9d9;
+            border-top: ${small ? "none" : "1px solid #d9d9d9"};
             padding-top: 4px;
             padding-bottom: 20px;
             font-size: 12px;
diff --git a/src/app/modules/home-module/components/Footer/smallFooter.tsx b/src/app/modules/home-module/components/Footer/smallFooter.tsx
new file mode 100644
index 000000000..1d7c9e305
--- /dev/null
+++ b/src/app/modules/home-module/components/Footer/smallFooter.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import moment from "moment";
+import { ReactComponent as CopyIcon } from "app/modules/home-module/components/Footer/asset/copy.svg";
+import { Container } from "@material-ui/core";
+
+function SmallFooter() {
+  return (
+    <div
+      css={`
+        background: white;
+      `}
+    >
+      <Container maxWidth="lg">
+        <div
+          css={`
+            display: flex;
+            gap: 38px;
+            align-items: center;
+            padding-top: 25px;
+            padding-bottom: 28px;
+            font-size: 12px;
+            a {
+              text-decoration: none;
+              color: #000;
+            }
+            p {
+              margin: 0;
+              padding: 0;
+            }
+          `}
+        >
+          <p
+            css={`
+              display: flex;
+              align-items: center;
+              gap: 8px;
+            `}
+          >
+            <CopyIcon />
+            {moment(new Date()).format("YYYY")} DataXplorer All Rights Reserved
+          </p>
+          <p>
+            <a
+              href="https://drive.google.com/file/d/1andhlQEoaEq5qDxMbtnApXiZborsg-bG/view"
+              className="privacy-link"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Privacy
+            </a>
+          </p>
+          <p>
+            <a
+              href="https://drive.google.com/file/d/1wgY5HYdE5-redIOF85E5fZZJT_YueOWP/view?usp=sharing"
+              className="privacy-link"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Terms and conditions
+            </a>
+          </p>
+        </div>
+      </Container>
+    </div>
+  );
+}
+
+export default SmallFooter;
diff --git a/src/app/modules/home-module/components/Reports/reportsGrid.tsx b/src/app/modules/home-module/components/Reports/reportsGrid.tsx
index dd8f1eb38..fcd207cbe 100644
--- a/src/app/modules/home-module/components/Reports/reportsGrid.tsx
+++ b/src/app/modules/home-module/components/Reports/reportsGrid.tsx
@@ -198,7 +198,7 @@ export default function ReportsGrid(props: Props) {
     <>
       {!props.tableView && (
         <Grid container spacing={2}>
-          {props.addCard && isAuthenticated ? <ReportAddnewCard /> : null}
+          {props.addCard ? <ReportAddnewCard /> : null}
           {loadedReports.map((data, index) => (
             <Grid item key={data.id} xs={12} sm={6} md={4} lg={3}>
               <ReformedGridItem
@@ -227,6 +227,7 @@ export default function ReportsGrid(props: Props) {
             name: data.name,
             description: data.title,
             createdDate: data.createdDate,
+            type: "report",
           }))}
         />
       )}
diff --git a/src/app/modules/home-module/components/Table/index.tsx b/src/app/modules/home-module/components/Table/index.tsx
index f2bb9ef40..063aaa884 100644
--- a/src/app/modules/home-module/components/Table/index.tsx
+++ b/src/app/modules/home-module/components/Table/index.tsx
@@ -16,19 +16,13 @@ export function HomepageTable(props: {
     name: string;
     description: string;
     createdDate: Date;
+    type: string;
   }[];
   inChartBuilder?: boolean;
   onItemClick?: (v: string) => void;
   fromHome?: boolean;
 }) {
   const history = useHistory();
-  const display = useRecoilState(homeDisplayAtom)[0];
-  const pathBase = {
-    all: "all",
-    data: "dataset",
-    charts: "chart",
-    reports: "report",
-  };
 
   return (
     <TableContainer
@@ -90,8 +84,8 @@ export function HomepageTable(props: {
               onClick={() => {
                 if (!props.inChartBuilder) {
                   history.push(
-                    `/${pathBase[display]}/${data.id}${
-                      display === "data"
+                    `/${data.type}/${data.id}${
+                      data.type === "dataset"
                         ? `/detail?fromHome=${props.fromHome}`
                         : ""
                     }`
diff --git a/src/app/modules/home-module/index.tsx b/src/app/modules/home-module/index.tsx
index 62b119c64..462a1657d 100644
--- a/src/app/modules/home-module/index.tsx
+++ b/src/app/modules/home-module/index.tsx
@@ -7,21 +7,14 @@ import { useRecoilState, useResetRecoilState } from "recoil";
 import { Box, Grid, Container, IconButton, Popover } from "@material-ui/core";
 /* project */
 import { Tab } from "app/components/Styled/tabs";
-import { socialAuth } from "app/utils/socialAuth";
 import HomeFooter from "app/modules/home-module/components/Footer";
 import ChartsGrid from "app/modules/home-module/components/Charts/chartsGrid";
 import ReportsGrid from "app/modules/home-module/components/Reports/reportsGrid";
-import DatasetDetailImage from "app/modules/home-module/assets/dataset-detail.png";
 import DatasetsGrid from "app/modules/home-module/components/Datasets/datasetsGrid";
 import { ReactComponent as SortIcon } from "app/modules/home-module/assets/sort-fill.svg";
 import { ReactComponent as GridIcon } from "app/modules/home-module/assets/grid-fill.svg";
 import { ReactComponent as CloseIcon } from "app/modules/home-module/assets/close-icon.svg";
 import { ReactComponent as SearchIcon } from "app/modules/home-module/assets/search-fill.svg";
-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 { ReactComponent as TopRightEllipse } from "app/modules/home-module/assets/top-right-ellipse.svg";
-import { ReactComponent as BottomLeftEllipse } from "app/modules/home-module/assets/bottom-left-ellipse.svg";
-import { ReactComponent as BottomRightEllipse } from "app/modules/home-module/assets/bottom-right-ellipse.svg";
 import {
   homeDisplayAtom,
   persistedReportStateAtom,
@@ -29,10 +22,6 @@ import {
   unSavedReportPreviewModeAtom,
 } from "app/state/recoil/atoms";
 import {
-  TopRightEllipseCss,
-  bottomLeftEllipseCss,
-  bottomRightEllipseCss,
-  datsetDetailImgcss,
   featuredAssetsCss,
   iconButtonCss,
   rowFlexCss,
@@ -43,6 +32,8 @@ import {
 import DatasetCategoryList from "./components/Datasets/datasetCategoryList";
 import { datasetCategories } from "../dataset-upload-module/upload-steps/metaData";
 import AssetsGrid from "./components/All/assetsGrid";
+import BreadCrumbs from "./components/Breadcrumbs";
+import SmallFooter from "./components/Footer/smallFooter";
 
 export default function HomeModule() {
   useTitle("DX DataXplorer");
@@ -63,7 +54,7 @@ export default function HomeModule() {
     setReportPreviewMode(false);
   }, []);
 
-  const [category, setCategory] = React.useState("");
+  const [categories, setCategories] = React.useState<string[]>([]);
 
   const [tableView, setTableView] = React.useState(false);
   const [searchValue, setSearchValue] = React.useState<string | undefined>(
@@ -106,8 +97,7 @@ export default function HomeModule() {
             sortBy={sortByStr}
             searchStr={searchStr}
             tableView={tableView}
-            category={category}
-            addCard
+            categories={categories}
             fromHome
           />
         );
@@ -117,7 +107,6 @@ export default function HomeModule() {
             sortBy={sortByStr}
             searchStr={searchStr}
             tableView={tableView}
-            addCard
           />
         );
       case "reports":
@@ -127,7 +116,6 @@ export default function HomeModule() {
             searchStr={searchStr}
             tableView={tableView}
             showMenuButton={false}
-            addCard
           />
         );
       case "all":
@@ -137,7 +125,6 @@ export default function HomeModule() {
             searchStr={searchStr}
             tableView={tableView}
             showMenuButton={false}
-            addCard
             fromHome
           />
         );
@@ -166,7 +153,7 @@ export default function HomeModule() {
   }, [display]);
 
   const descriptions = {
-    all: "Explore the collection of Reports, Charts and Datasets",
+    all: "Explore the collection of Assets",
     data: "Explore the collection of Datasets used to create Charts",
     charts: "Explore the collection of Charts used in Reports",
     reports: "Explore the collection of Reports",
@@ -175,132 +162,10 @@ export default function HomeModule() {
   return (
     <div
       css={`
-        background: #ffffff;
+        margin-top: 48px;
+        padding-top: 32px;
       `}
     >
-      {/* <div
-        css={`
-          position: relative;
-          background: linear-gradient(
-            180deg,
-            rgba(255, 255, 255, 0) 0%,
-            #f2f7fd 100%
-          );
-        `}
-      >
-        <Container maxWidth="lg">
-          <Grid
-            container
-            spacing={6}
-            css={turnsDataCss}
-            alignItems="center"
-            alignContent="flex-start"
-          >
-            <Grid item lg={5} md={12} sm={12} xs={12}>
-              <div
-                css={`
-                  max-width: 450px;
-                `}
-              >
-                <h1>Turn data into impact with DataXplorer</h1>
-                <Box height={34} />
-                <p>
-                  <b>
-                    DataXplorer simplifies and empowers visual data reporting
-                    for all.
-                  </b>
-                </p>
-                <Box height={52} />
-                {isAuthenticated && (
-                  <div
-                    css={`
-                      ${rowFlexCss} gap: 32px;
-                      width: 100%;
-                    `}
-                  >
-                    <Link
-                      to="report/new/initial"
-                      css={`
-                        background: #6061e5;
-                      `}
-                    >
-                      CREATE REPORT
-                    </Link>
-                    <button
-                      onClick={exploreReportClick}
-                      css={`
-                        background: #e492bd;
-                      `}
-                    >
-                      EXPLORE REPORTS
-                    </button>
-                  </div>
-                )}
-                {!isAuthenticated && (
-                  <div
-                    css={`
-                      gap: 20px;
-                      width: 100%;
-                      display: flex;
-                      flex-direction: row;
-                      justify-content: center;
-
-                      > button {
-                        gap: 10px;
-                        color: #fff;
-                        display: flex;
-                        padding: 9px 18px;
-                        background: #a1a2ff;
-                        align-items: center;
-                        justify-content: center;
-                        text-transform: uppercase;
-
-                        > 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>
-            </Grid>
-            <Grid
-              item
-              lg={7}
-              md={12}
-              sm={12}
-              xs={12}
-              css={`
-                display: flex;
-                justify-content: flex-end;
-                @media screen and (max-width: 1257px) {
-                  justify-content: center;
-                }
-              `}
-            >
-              <img
-                src={DatasetDetailImage}
-                alt="dataset-detail-img"
-                css={datsetDetailImgcss}
-              />
-            </Grid>
-          </Grid>
-        </Container>
-
-
-        
-        <BottomLeftEllipse css={bottomLeftEllipseCss} />
-        <BottomRightEllipse css={bottomRightEllipseCss} />
-        <TopRightEllipse css={TopRightEllipseCss} />
-      </div> */}
-
       <Container
         maxWidth="lg"
         ref={exploreViewRef}
@@ -349,7 +214,7 @@ export default function HomeModule() {
         </div>
         <Box height={24} />
         <Box css={featuredAssetsCss}>
-          <h3>Library:</h3>
+          <BreadCrumbs items={[{ title: "Library" }]} />
           <Box height={24} />
           <Grid
             container
@@ -500,16 +365,14 @@ export default function HomeModule() {
                     </div>
                   ))}
                 </Popover>
-                {display !== "all" && (
-                  <IconButton
-                    onClick={() => {
-                      setTableView(!tableView);
-                    }}
-                    css={iconButtonCss(tableView)}
-                  >
-                    <GridIcon />
-                  </IconButton>
-                )}
+                <IconButton
+                  onClick={() => {
+                    setTableView(!tableView);
+                  }}
+                  css={iconButtonCss(tableView)}
+                >
+                  <GridIcon />
+                </IconButton>
               </div>
             </Grid>
           </Grid>
@@ -525,9 +388,9 @@ export default function HomeModule() {
           </div>
           {display === "data" ? (
             <DatasetCategoryList
-              category={category}
               datasetCategories={datasetCategories}
-              setCategory={setCategory}
+              setCategories={setCategories}
+              categories={categories}
             />
           ) : (
             <Box height={24} />
@@ -545,7 +408,7 @@ export default function HomeModule() {
           {displayGrid(searchValue as string, sortValue)}
         </div>
       </Container>
-      <HomeFooter small />
+      <SmallFooter />
     </div>
   );
 }
diff --git a/src/app/modules/home-module/style.ts b/src/app/modules/home-module/style.ts
index d80553d02..c7901f648 100644
--- a/src/app/modules/home-module/style.ts
+++ b/src/app/modules/home-module/style.ts
@@ -7,7 +7,6 @@ export const turnsDataCss = css`
     justify-content: center;
     align-items: center;
   } */
-  margin-top: 80px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -103,11 +102,14 @@ export const TopRightEllipseCss = css`
   position: absolute;
 `;
 
-export const searchInputCss = (openSearch: boolean) => css`
+export const searchInputCss = (
+  openSearch: boolean,
+  width: string = "385px"
+) => css`
   background: #dadaf8;
   display: flex;
   align-items: center;
-  width: 385px;
+  width: ${width ?? "385px"};
   height: 32px;
   border-radius: 20px;
   opacity: ${openSearch ? 1 : 0};
diff --git a/yarn.lock b/yarn.lock
index 7fbe7f0df..3652ded13 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -28,6 +28,18 @@
   resolved "https://registry.yarnpkg.com/@auth0/auth0-spa-js/-/auth0-spa-js-2.1.2.tgz#2217db13ce0feb480a190ed165b36681bd48633c"
   integrity sha512-xdA65Z/U7++Y7L9Uwh8Q8OVOs6qgFz+fb7GAzHFjpr1icO37B//xdzLXm7ZRgA19RWrsNe1nme3h896igJSvvw==
 
+"@azure/msal-browser@^3.15.0":
+  version "3.15.0"
+  resolved "https://registry.yarnpkg.com/@azure/msal-browser/-/msal-browser-3.15.0.tgz#a3b223e79e46db827f54057021a200f3755cbdf7"
+  integrity sha512-jqngIR0zGLtEHCAhgXLl+VZTFcU/9DmRSjGj5RbrLnFPL/0L9Hr68k8grvLrTIq7tjhTM5Xgh6Xc0l7JlViHQQ==
+  dependencies:
+    "@azure/msal-common" "14.10.0"
+
+"@azure/msal-common@14.10.0":
+  version "14.10.0"
+  resolved "https://registry.yarnpkg.com/@azure/msal-common/-/msal-common-14.10.0.tgz#215449726717b53d549953db77562cad6cb8421c"
+  integrity sha512-Zk6DPDz7e1wPgLoLgAp0349Yay9RvcjPM5We/ehuenDNsz/t9QEFI7tRoHpp/e47I4p20XE3FiDlhKwAo3utDA==
+
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.8.3":
   version "7.16.7"
   resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz"

From ef94de3cc14f298d43f449456276fb26c79aa2e7 Mon Sep 17 00:00:00 2001
From: Psami-wondah <okechukwusamuel16@gmail.com>
Date: Fri, 31 May 2024 06:32:40 +0100
Subject: [PATCH 03/12] feat: restrict file types for one drive picker

---
 src/app/hooks/useOneDrivePicker.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/hooks/useOneDrivePicker.tsx b/src/app/hooks/useOneDrivePicker.tsx
index 108a5e91d..d0422b93e 100644
--- a/src/app/hooks/useOneDrivePicker.tsx
+++ b/src/app/hooks/useOneDrivePicker.tsx
@@ -52,6 +52,7 @@ export const useOneDrivePicker = ({
     },
     typesAndSources: {
       mode: "files",
+      filters: [".xlsx", ".csv", ".xml", ".xls", ".xhtml"],
       pivots: {
         oneDrive: true,
         recent: true,

From 385452ba16ec604990939d57baeae4c70ace866e Mon Sep 17 00:00:00 2001
From: Sylvan Ridderinkhof <sylvanridderinkhof@gmail.com>
Date: Mon, 3 Jun 2024 16:13:24 +0200
Subject: [PATCH 04/12] chore: add TGF as option for external search results

---
 .../upload-steps/externalSearch.tsx           |  2 +-
 .../modules/home-module/assets/tgf-logo.svg   | 88 +++++++++++++++++++
 .../Datasets/externalDatasetCard.tsx          |  3 +
 3 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 src/app/modules/home-module/assets/tgf-logo.svg

diff --git a/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx b/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx
index 2ffa2cd79..2e438b456 100644
--- a/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx
+++ b/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx
@@ -70,7 +70,7 @@ export default function ExternalSearch(props: {
       const response = await axios.get(
         `${
           process.env.REACT_APP_API
-        }/external-sources/search?q=${searchValue}&source=${"Kaggle,World Bank,WHO,HDX"}&offset=${offset}&limit=${limit}`,
+        }/external-sources/search?q=${searchValue}&source=${"Kaggle,World Bank,WHO,HDX,TGF"}&offset=${offset}&limit=${limit}`,
         {
           signal: abortControllerRef.current.signal,
           headers: {
diff --git a/src/app/modules/home-module/assets/tgf-logo.svg b/src/app/modules/home-module/assets/tgf-logo.svg
new file mode 100644
index 000000000..020f6e39a
--- /dev/null
+++ b/src/app/modules/home-module/assets/tgf-logo.svg
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg width="100" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 509 221" style="enable-background:new 0 0 509 221;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#F6DE00;}
+	.st2{fill:#EE0C3D;}
+	.st3{fill:#2E4DF9;}
+</style>
+<path d="M227.6826782,49.9539452h-12.546875v-9.6904297h36.9130859v9.6904297h-12.546875V80.369957h-11.8193359V49.9539452z"/>
+<path d="M258.4143066,40.2635155h11.8193359v14.7880859h13.7236328V40.2635155h11.8193359V80.369957h-11.8193359V64.2937851
+	h-13.7236328V80.369957h-11.8193359V40.2635155z"/>
+<path d="M303.2494812,40.2635155h30.8652344v9.2978516h-19.4375v6.7216797h18.3730469v7.6748047h-18.3730469v7.1132774h19.9970703
+	v9.2988281h-31.4248047V40.2635155z"/>
+<path d="M218.767746,141.1912537h30.6962891v10.0820312h-18.8769531v6.7216797h16.3007812v8.8505859h-16.3007812v14.4521484
+	H218.767746V141.1912537z"/>
+<path d="M256.9663696,164.828949v-23.6376953h11.8193359v23.2460938c0,4.8730469,2.7441406,8.0097656,7.0009766,8.0097656
+	c4.2011719,0,7.0019531-3.1923828,7.0019531-8.0097656v-23.2460938h11.8193359v23.6376953
+	c0,10.5869141-7.6181641,17.3085938-18.8212891,17.3085938C264.5845337,182.1375427,256.9663696,175.415863,256.9663696,164.828949z
+	"/>
+<path d="M302.6556396,141.1912537h12.6601562l13.1630859,24.8701172h0.5605469v-24.8701172h11.0351562v40.1064453h-12.6601562
+	l-13.1630859-24.8144531h-0.5605469v24.8144531h-11.0351562V141.1912537z"/>
+<path d="M348.24646,141.1912537h16.3564453c13.7802734,0,22.9667969,8.0097656,22.9667969,20.0527344
+	c0,12.0439453-9.1865234,20.0537109-22.9667969,20.0537109H348.24646V141.1912537z M364.6029053,172.391449
+	c6.7226562,0,11.1474609-4.3691406,11.1474609-11.1474609c0-6.7773438-4.4248047-11.1464844-11.1474609-11.1464844h-4.9287109
+	v22.2939453H364.6029053z"/>
+<path d="M214.1990814,110.7807388c0-12.4345703,9.4667969-20.8369141,22.5185547-20.8369141
+	c9.4667969,0,17.5322266,5.3212891,19.3808441,12.7148438l-10.8661957,2.0732422
+	c-1.0087891-2.9697266-4.59375-5.1542969-8.5703125-5.1542969c-6.1621094,0-10.6435547,4.59375-10.6435547,11.203125
+	c0,6.6103516,4.6494141,11.3710938,11.0908203,11.3710938c5.0976562,0,9.2988281-3.1367188,9.6347656-7.3935547
+	l-13.6113281-0.0556641v-6.9462891h24.9267426c1.4560547,14.2275391-7.5624847,24.0859299-21.3417816,24.0859299
+	C223.6658783,131.8422546,214.1990814,123.2162857,214.1990814,110.7807388z"/>
+<path d="M264.8766174,90.7280045h11.8193359v30.0234375h17.3085938v10.0830002h-29.1279297V90.7280045z"/>
+<path d="M298.3545532,110.7807388c0-12.7714844,9.0751953-20.8369141,22.5185547-20.8369141
+	c13.3876953,0,22.4619141,8.0654297,22.4619141,20.8369141s-9.0742188,20.8935471-22.4619141,20.8935471
+	C307.4297485,131.6742859,298.3545532,123.5522232,298.3545532,110.7807388z M331.515686,110.7807388
+	c0-6.7216797-4.3125-11.203125-10.6425781-11.203125s-10.6992188,4.4814453-10.6992188,11.203125
+	c0,6.7783203,4.3691406,11.203125,10.6992188,11.203125S331.515686,117.5590591,331.515686,110.7807388z"/>
+<path d="M349.699585,90.7280045h20.5576172c9.4667969,0,15.0683594,4.3691406,15.0683594,11.0908203
+	c0,4.1445312-2.5761719,7.1699219-5.8251953,8.2900391v0.5605469c3.9765625,1.0634766,6.9453125,4.5927734,6.9453125,9.3544922
+	c0,6.8896484-5.7695312,10.8105392-15.1240234,10.8105392H349.699585V90.7280045z M367.9613037,106.8041763
+	c3.0244141,0,5.1533203-1.5683594,5.1533203-3.8095703c0-2.2402344-2.1289062-3.7529297-5.1533203-3.7529297h-6.4423828v7.5625
+	H367.9613037z M368.7454834,122.3198013c3.1367188,0,5.4892578-1.7363281,5.4892578-4.1445312
+	c0-2.3525391-2.3525391-4.0888672-5.4892578-4.0888672h-7.2265625v8.2333984H368.7454834z"/>
+<path d="M402.6115723,90.7280045h17.3652344l12.546875,40.1064377h-12.1552734l-1.9042969-6.1054611h-14.3955078
+	l-1.9042969,6.1054611h-12.1552734L402.6115723,90.7280045z M416.1672363,116.3266373l-4.5927734-15.5722656h-0.5605469
+	l-4.5927734,15.5722656H416.1672363z"/>
+<path d="M439.2223206,90.7280045h11.8193359v30.0234375h17.3085938v10.0830002h-29.1279297V90.7280045z"/>
+<path class="st1" d="M187.5961914,99.6065826c-0.0164948,0.2164001,0.0020752,0.4395676,0.0423279,0.6523819
+	c0.0411377,0.2175674,0.1099243,0.4295578,0.2029724,0.6304321c0.0904846,0.195343,0.2149811,0.3664093,0.3391571,0.5439606
+	c0.4593811,0.5573883,1.1339264,0.9054184,1.8434753,0.9547119c0.3600006,0.027832,0.7168884-0.0180969,1.058548-0.1352921
+	c0.8559875-0.2937622,1.494812-1.0349274,1.6959381-1.9424362c0.0055847-0.0245056,0.0183563-0.0453415,0.0232391-0.0700836
+	c0,0,0.0750427-0.4344788,0.1010742-0.573967c0.1123047-0.6033478,0.331543-1.9570084,0.3418427-2.0289993
+	c0.8781128-6.0220413,0.6815186-12.1174393-0.5354309-18.0182114c-0.0318146-0.1537399-0.2401428-1.081955-0.3132935-1.3922501
+	c-1.1247406-4.6883621-2.9229279-9.2970428-5.4564056-13.6851501c-9.8839111-17.1194382-28.155304-26.3650589-46.6314697-25.5727692
+	c-15.7424088,0.4110832-30.8301239,8.0772209-40.3362045,21.3027267c-1.3086472,1.9096222-2.4086227,3.8255005-2.8338394,6.1286697
+	c-0.5869141,3.1660538-0.0375824,6.3977814,1.595993,9.2272186c1.7705078,3.0666122,4.6214905,5.2917709,8.0267639,6.2660522
+	c5.5133514,1.5757751,11.514473-0.4577179,14.6200714-4.9507294c0,0,1.1224442-1.584671,1.2671585-1.7759247
+	c6.0691147-8.0495071,15.1633224-13.0674057,24.8541489-14.2843552c13.8341217-1.5376167,27.9242401,5.041008,35.3414459,17.8879852
+	C186.6324921,85.3329239,188.1311798,92.5859451,187.5961914,99.6065826z"/>
+<path class="st2" d="M76.4481812,41.880619c0.1956482-0.0939178,0.379631-0.2215843,0.5438156-0.3628464
+	c0.1678467-0.144413,0.3170395-0.3099823,0.4444809-0.4909973c0.1239319-0.1760292,0.2098312-0.369381,0.301506-0.5657043
+	c0.2530212-0.6765289,0.2171555-1.4347153-0.0949326-2.0738487c-0.155899-0.3256798-0.3741074-0.6117897-0.6464386-0.8490829
+	c-0.6824036-0.5944214-1.6436844-0.7770844-2.5301666-0.497509c-0.0240173,0.0074196-0.0484543,0.0067711-0.072319,0.0149117
+	c0,0-0.4137878,0.1522484-0.5476074,0.1994514c-0.5786667,0.2044258-1.8605881,0.6913872-1.9280853,0.7184525
+	c-5.6542969,2.2505569-10.8347702,5.4685211-15.3365173,9.4728088c-0.1172333,0.1044197-0.8169289,0.7489433-1.0490761,0.9674377
+	c-3.4978638,3.3182487-6.5900078,7.1798553-9.1234856,11.5679665c-9.8839111,17.1194382-8.7551537,37.5657425,1.1690712,53.1704254
+	c8.227211,13.4277878,22.4101372,22.6610565,38.6168098,24.2808075c2.3080978,0.1785126,4.5172882,0.1731873,6.7244949-0.6101532
+	c3.0353394-1.0747375,5.5594406-3.1663361,7.1930161-5.9957733c1.7705078-3.0666122,2.2720642-6.6482162,1.4131775-10.0844116
+	c-1.3920212-5.5625916-6.1536331-9.7429657-11.597496-10.185997c0,0-1.9335861-0.179718-2.1715698-0.2094193
+	c-10.0056381-1.2312546-18.8983688-6.5981216-24.7976952-14.3821487
+	c-8.2486763-11.2118988-9.5964813-26.7036057-2.1792755-39.5505791
+	C64.5686798,49.8520355,70.1006317,44.9276276,76.4481812,41.880619z"/>
+<path class="st3" d="M82.0418243,166.9993591c-0.1791611-0.1224823-0.3817139-0.2179718-0.5861435-0.2895355
+	c-0.2089844-0.0731506-0.4269714-0.1195679-0.6474533-0.1394348c-0.2144089-0.0193176-0.4248047,0.0029755-0.6406708,0.0217438
+	c-0.7124023,0.1191406-1.3510742,0.5292969-1.7485352,1.1191406c-0.2041016,0.2978516-0.3427734,0.6298828-0.4121094,0.984375
+	c-0.173584,0.8881836,0.1488647,1.8120117,0.8342285,2.4399414c0.0184326,0.0170898,0.0300903,0.0385742,0.0490723,0.0551758
+	c0,0,0.3387451,0.2822266,0.4465332,0.3745117c0.4663696,0.3989258,1.5290527,1.265625,1.5862427,1.3105469
+	c4.7761841,3.7714844,10.1532593,6.6489258,15.8719482,8.5454102c0.1490479,0.0493164,1.0570679,0.3330078,1.3623657,0.4248047
+	c4.6226196,1.3701172,9.5129395,2.1171875,14.579895,2.1171875c19.7678223,0,36.9104614-11.2006836,45.4624023-27.5976562
+	c7.5151978-13.8388672,8.4199829-30.7382812,1.7194061-45.5835419c-0.9994659-2.0881271-2.1086731-3.9986801-3.8906708-5.5185089
+	c-2.4484253-2.0913086-5.5218506-3.2314453-8.7890015-3.2314453c-3.5410156,0-6.8935547,1.3564453-9.4399414,3.8183594
+	c-4.1213379,3.9868164-5.3608398,10.2006836-3.022583,15.1367188c0,0,0.811142,1.7643967,0.9044189,1.9853516
+	c3.9365234,9.2807617,3.7350464,19.6655273-0.0564575,28.6665039
+	c-5.5854492,12.7495117-18.3277588,21.6625977-33.1621704,21.6625977
+	C94.885025,173.3016052,87.8543854,170.9729919,82.0418243,166.9993591z"/>
+</svg>
diff --git a/src/app/modules/home-module/components/Datasets/externalDatasetCard.tsx b/src/app/modules/home-module/components/Datasets/externalDatasetCard.tsx
index 17d9edee0..a807d49a7 100644
--- a/src/app/modules/home-module/components/Datasets/externalDatasetCard.tsx
+++ b/src/app/modules/home-module/components/Datasets/externalDatasetCard.tsx
@@ -6,6 +6,7 @@ import WHOLogo from "app/modules/home-module/assets/WHO-logo.svg";
 import KaggleLogo from "app/modules/home-module/assets/kaggle-logo.svg";
 import WorldBankLogo from "app/modules/home-module/assets/world-bank-logo.svg";
 import HDXLogo from "app/modules/home-module/assets/hdx-logo.svg";
+import TGFLogo from "app/modules/home-module/assets/tgf-logo.svg";
 import { ReactComponent as ClockIcon } from "app/modules/home-module/assets/clock-icon.svg";
 
 import moment from "moment";
@@ -31,6 +32,8 @@ export default function IExternalDatasetCard(
         return <img src={WorldBankLogo} alt="world-bank-logo" />;
       case "HDX":
         return <img src={HDXLogo} alt="hdx-logo" />;
+      case "TGF":
+        return <img src={TGFLogo} alt="tgf-logo" />;
       default:
         return <div />;
     }

From d49fb8cafb6bb18fb463b548c1c43a2baa8838c5 Mon Sep 17 00:00:00 2001
From: Psami-wondah <okechukwusamuel16@gmail.com>
Date: Tue, 4 Jun 2024 05:07:34 +0100
Subject: [PATCH 05/12] feat: DX-1523 - Update bignumber chart icon on cards

---
 .../icons/data-themes-chart-types/coloredBigNumber.tsx | 10 +++++-----
 .../components/right-panel-create-view/data.tsx        | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/app/assets/icons/data-themes-chart-types/coloredBigNumber.tsx b/src/app/assets/icons/data-themes-chart-types/coloredBigNumber.tsx
index 299ce87e1..243104ac9 100644
--- a/src/app/assets/icons/data-themes-chart-types/coloredBigNumber.tsx
+++ b/src/app/assets/icons/data-themes-chart-types/coloredBigNumber.tsx
@@ -3,15 +3,15 @@ import React from "react";
 export default function Icon() {
   return (
     <svg
-      width="120"
-      height="53"
-      viewBox="0 0 120 53"
+      width="103"
+      height="54"
+      viewBox="0 0 103 54"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M17.6284 52.8814C10.1366 52.8814 4.62788 49.9434 0.66163 45.6834L7.0517 38.1916C9.69587 40.9826 12.8542 43.1861 17.408 43.1861C21.5212 43.1861 24.5326 40.6154 24.5326 36.5022V36.3553C24.5326 31.9484 20.8601 29.3777 14.2497 29.3777H11.1649L9.91622 22.6203L21.2274 10.0605H3.37925V0.585607H34.3013V9.03226L22.2557 21.6655C28.8661 22.9876 35.0358 27.1007 35.0358 35.9881V36.2084C35.0358 46.0506 28.0582 52.8814 17.6284 52.8814ZM63.7573 52V41.4233H41.6491L40.327 33.7112L64.4918 0.29181H73.8198V32.536H80.063V41.4233H73.8198V52H63.7573ZM52.0054 32.536H63.7573V15.9365L52.0054 32.536ZM101.476 52.8814C94.8659 52.8814 89.4306 50.4576 85.0237 46.3444L90.9731 38.4119C94.2783 41.2764 97.3632 43.0392 101.256 43.0392C106.03 43.0392 109.115 40.1747 109.115 35.4739V35.4005C109.115 30.8467 105.589 28.129 100.815 28.129C98.1711 28.129 95.7473 28.8635 93.7641 29.7449L87.8148 25.8521L89.2837 0.585607H117.415V10.134H98.0976L97.51 19.462C99.1994 19.0213 100.815 18.7275 103.239 18.7275C111.98 18.7275 119.545 23.4283 119.545 34.9598V35.1801C119.545 46.1241 112.126 52.8814 101.476 52.8814Z"
-        fill="black"
+        d="M9.84277 53V12.1623L1.98371 14.2923L0.294385 5.03772L13.0011 1.21836H20.346V53H9.84277ZM29.312 53V44.4065L44.4425 28.8352C49.8777 23.2531 51.8608 20.462 51.8608 16.7161C51.8608 12.8233 49.2167 10.6199 45.6911 10.6199C42.0921 10.6199 39.5948 12.6764 36.2896 16.7161L29.3854 10.1792C33.8658 4.08288 39.0807 0.851117 46.4991 0.851117C55.974 0.851117 62.6579 6.5067 62.6579 15.8347V15.9816C62.6579 23.1797 59.3526 27.2928 51.7139 34.7112L43.1204 43.4516H62.7313V53H29.312ZM84.9807 53.8814C77.4888 53.8814 71.9802 50.9434 68.0139 46.6834L74.404 39.1916C77.0482 41.9826 80.2065 44.1861 84.7603 44.1861C88.8735 44.1861 91.8849 41.6154 91.8849 37.5022V37.3553C91.8849 32.9484 88.2124 30.3777 81.602 30.3777H78.5171L77.2685 23.6203L88.5797 11.0605H70.7315V1.58561H101.654V10.0323L89.608 22.6655C96.2184 23.9876 102.388 28.1007 102.388 36.9881V37.2084C102.388 47.0506 95.4104 53.8814 84.9807 53.8814Z"
+        fill="#CFD4DA"
       />
     </svg>
   );
diff --git a/src/app/modules/report-module/components/right-panel-create-view/data.tsx b/src/app/modules/report-module/components/right-panel-create-view/data.tsx
index 108ba5018..13237e7e4 100644
--- a/src/app/modules/report-module/components/right-panel-create-view/data.tsx
+++ b/src/app/modules/report-module/components/right-panel-create-view/data.tsx
@@ -3122,15 +3122,15 @@ export const Charts = [
     id: "bigNumber",
     icon: (
       <svg
-        width="106"
-        height="47"
-        viewBox="0 0 106 47"
+        width="91"
+        height="48"
+        viewBox="0 0 91 48"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M15.705 46.78C9.075 46.78 4.2 44.18 0.69 40.41L6.345 33.78C8.685 36.25 11.48 38.2 15.51 38.2C19.15 38.2 21.815 35.925 21.815 32.285V32.155C21.815 28.255 18.565 25.98 12.715 25.98H9.985L8.88 20L18.89 8.885H3.095V0.499997H30.46V7.975L19.8 19.155C25.65 20.325 31.11 23.965 31.11 31.83V32.025C31.11 40.735 24.935 46.78 15.705 46.78ZM56.5275 46V36.64H36.9625L35.7925 29.815L57.1775 0.239996H65.4325V28.775H70.9575V36.64H65.4325V46H56.5275ZM46.1275 28.775H56.5275V14.085L46.1275 28.775ZM89.9076 46.78C84.0576 46.78 79.2476 44.635 75.3476 40.995L80.6126 33.975C83.5376 36.51 86.2676 38.07 89.7126 38.07C93.9376 38.07 96.6676 35.535 96.6676 31.375V31.31C96.6676 27.28 93.5476 24.875 89.3226 24.875C86.9826 24.875 84.8376 25.525 83.0826 26.305L77.8176 22.86L79.1176 0.499997H104.013V8.95H86.9176L86.3976 17.205C87.8926 16.815 89.3226 16.555 91.4676 16.555C99.2026 16.555 105.898 20.715 105.898 30.92V31.115C105.898 40.8 99.3326 46.78 89.9076 46.78Z"
-          fill="black"
+          d="M8.815 47V10.86L1.86 12.745L0.365 4.555L11.61 1.175H18.11V47H8.815ZM26.0446 47V39.395L39.4346 25.615C44.2446 20.675 45.9996 18.205 45.9996 14.89C45.9996 11.445 43.6596 9.495 40.5396 9.495C37.3546 9.495 35.1446 11.315 32.2196 14.89L26.1096 9.105C30.0746 3.71 34.6896 0.849998 41.2546 0.849998C49.6396 0.849998 55.5546 5.855 55.5546 14.11V14.24C55.5546 20.61 52.6296 24.25 45.8696 30.815L38.2646 38.55H55.6196V47H26.0446ZM75.3095 47.78C68.6795 47.78 63.8045 45.18 60.2945 41.41L65.9495 34.78C68.2895 37.25 71.0845 39.2 75.1145 39.2C78.7545 39.2 81.4195 36.925 81.4195 33.285V33.155C81.4195 29.255 78.1695 26.98 72.3195 26.98H69.5895L68.4845 21L78.4945 9.885H62.6995V1.5H90.0645V8.975L79.4045 20.155C85.2545 21.325 90.7145 24.965 90.7145 32.83V33.025C90.7145 41.735 84.5395 47.78 75.3095 47.78Z"
+          fill="#ADB5BD"
         />
       </svg>
     ),

From c1db42f63c2abc1e9d2ea862bef76699647cad54 Mon Sep 17 00:00:00 2001
From: Psami-wondah <okechukwusamuel16@gmail.com>
Date: Tue, 4 Jun 2024 05:09:48 +0100
Subject: [PATCH 06/12] feat: update routes

---
 src/app/Routes.tsx                                 |  4 ++--
 src/app/components/AppBar/index.tsx                |  2 +-
 .../dataset-upload-module/component/tabs.tsx       |  2 ++
 .../component/uploadOption.tsx                     |  1 +
 .../upload-steps/externalSearch.tsx                |  2 +-
 .../upload-steps/finishedFragment.tsx              |  2 +-
 .../dataset-upload-module/upload-steps/index.tsx   | 14 ++++++--------
 .../home-module/components/All/assetsGrid.tsx      |  3 ---
 .../components/Datasets/datasetsGrid.tsx           |  3 ---
 .../home-module/components/Datasets/gridItem.tsx   |  3 +--
 .../home-module/components/Footer/index.tsx        |  2 +-
 .../modules/home-module/components/Table/index.tsx |  7 +------
 src/app/modules/home-module/index.tsx              |  5 +++--
 .../partners/components/empowerBlock.tsx           |  2 +-
 src/app/modules/report-module/index.tsx            |  2 +-
 .../modules/report-module/views/initial/index.tsx  |  5 ++++-
 16 files changed, 26 insertions(+), 33 deletions(-)

diff --git a/src/app/Routes.tsx b/src/app/Routes.tsx
index e649ade7d..8cde0fef2 100755
--- a/src/app/Routes.tsx
+++ b/src/app/Routes.tsx
@@ -242,9 +242,9 @@ export function MainRoutes() {
           <RouteWithAppBar exact path="/why-dataXplorer">
             <WhyDXModule />
           </RouteWithAppBar>
-          <RouteWithAppBar exact path="/explore">
+          {/* <RouteWithAppBar exact path="/explore">
             <ExploreAssetsModule />
-          </RouteWithAppBar>
+          </RouteWithAppBar> */}
           <RouteWithAppBar exact path="/report/:page/:view?">
             <ReportModule />
           </RouteWithAppBar>
diff --git a/src/app/components/AppBar/index.tsx b/src/app/components/AppBar/index.tsx
index cd5d482ec..0ece6c626 100644
--- a/src/app/components/AppBar/index.tsx
+++ b/src/app/components/AppBar/index.tsx
@@ -231,7 +231,7 @@ export function AppBar() {
               >
                 {" "}
                 <div css={navLinkcss("explore", navLocation)}>
-                  <NavLink to="/explore" data-cy="nav-explore">
+                  <NavLink to="/" data-cy="nav-explore">
                     <b>Explore </b>
                   </NavLink>
                 </div>
diff --git a/src/app/modules/dataset-upload-module/component/tabs.tsx b/src/app/modules/dataset-upload-module/component/tabs.tsx
index d5267d986..18429ba5a 100644
--- a/src/app/modules/dataset-upload-module/component/tabs.tsx
+++ b/src/app/modules/dataset-upload-module/component/tabs.tsx
@@ -45,6 +45,7 @@ function UploadTabs({ activeTab, setActiveTab }: Props) {
           color: ${activeTab === "search" ? "white" : "#231D2C"};
         `}
         onClick={() => setActiveTab("search")}
+        data-cy="federated-search-tab"
       >
         <Search /> Federated search
       </button>
@@ -56,6 +57,7 @@ function UploadTabs({ activeTab, setActiveTab }: Props) {
           color: ${activeTab === "file" ? "white" : "#231D2C"};
         `}
         onClick={() => setActiveTab("file")}
+        data-cy="file-upload-tab"
       >
         <ComputerIcon color={activeTab === "file" ? "white" : "#231D2C"} /> FILE
         upload
diff --git a/src/app/modules/dataset-upload-module/component/uploadOption.tsx b/src/app/modules/dataset-upload-module/component/uploadOption.tsx
index cdbd60c52..446b9e67f 100644
--- a/src/app/modules/dataset-upload-module/component/uploadOption.tsx
+++ b/src/app/modules/dataset-upload-module/component/uploadOption.tsx
@@ -33,6 +33,7 @@ const UploadOption = (props: {
         props.setActiveOption(props.name);
         props.onClick(e);
       }}
+      data-cy="upload-option-button"
     >
       <div
         css={`
diff --git a/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx b/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx
index 43aae4f6c..448893dc8 100644
--- a/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx
+++ b/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx
@@ -173,7 +173,7 @@ export default function ExternalSearch(props: {
           sortValue={sortValue}
           tableView={tableView}
           terminateSearch={terminateSearch}
-          searchInputWidth="292px"
+          searchInputWidth="249px"
         />
       </Grid>
 
diff --git a/src/app/modules/dataset-upload-module/upload-steps/finishedFragment.tsx b/src/app/modules/dataset-upload-module/upload-steps/finishedFragment.tsx
index 312646d93..52bb85825 100644
--- a/src/app/modules/dataset-upload-module/upload-steps/finishedFragment.tsx
+++ b/src/app/modules/dataset-upload-module/upload-steps/finishedFragment.tsx
@@ -81,7 +81,7 @@ export default function FinishedFragment(props: Props) {
       <Link
         to={(() => {
           setDisplay("data");
-          return location.search.includes("?fromHome=true") ? "/" : "/explore";
+          return "/";
         })()}
         css={`
           display: flex;
diff --git a/src/app/modules/dataset-upload-module/upload-steps/index.tsx b/src/app/modules/dataset-upload-module/upload-steps/index.tsx
index 6c0919e58..b8e37b8d3 100644
--- a/src/app/modules/dataset-upload-module/upload-steps/index.tsx
+++ b/src/app/modules/dataset-upload-module/upload-steps/index.tsx
@@ -290,14 +290,12 @@ function DatasetUploadSteps(props: Props) {
             <UploadTabs activeTab={activeTab} setActiveTab={setActiveTab} />
             <Box height={24} />
             {activeTab === "search" ? (
-              <>
-                <ExternalSearch
-                  setFormDetails={setFormDetails}
-                  setActiveStep={setActiveStep}
-                  setProcessingError={setProcessingError}
-                  handleDownload={handleDownloadExternalDataset}
-                />
-              </>
+              <ExternalSearch
+                setFormDetails={setFormDetails}
+                setActiveStep={setActiveStep}
+                setProcessingError={setProcessingError}
+                handleDownload={handleDownloadExternalDataset}
+              />
             ) : (
               <AddDatasetFragment
                 onFileSubmit={onFileSubmit}
diff --git a/src/app/modules/home-module/components/All/assetsGrid.tsx b/src/app/modules/home-module/components/All/assetsGrid.tsx
index 760c9449e..47d46448e 100644
--- a/src/app/modules/home-module/components/All/assetsGrid.tsx
+++ b/src/app/modules/home-module/components/All/assetsGrid.tsx
@@ -34,7 +34,6 @@ interface Props {
   onItemClick?: (v: string) => void;
   md?: GridSize;
   lg?: GridSize;
-  fromHome?: boolean;
 }
 type assetType = "chart" | "dataset" | "report";
 
@@ -238,7 +237,6 @@ export default function AssetsGrid(props: Props) {
     <>
       {props.tableView ? (
         <HomepageTable
-          fromHome={props.fromHome}
           onItemClick={props.onItemClick}
           inChartBuilder={props.inChartBuilder}
           data={loadedAssets.map((data) => {
@@ -313,7 +311,6 @@ export default function AssetsGrid(props: Props) {
                       id={d.id}
                       owner={d.owner}
                       inChartBuilder={props.inChartBuilder as boolean}
-                      fromHome={props.fromHome}
                     />
                   ),
                   report: (
diff --git a/src/app/modules/home-module/components/Datasets/datasetsGrid.tsx b/src/app/modules/home-module/components/Datasets/datasetsGrid.tsx
index b904bd863..192a21638 100644
--- a/src/app/modules/home-module/components/Datasets/datasetsGrid.tsx
+++ b/src/app/modules/home-module/components/Datasets/datasetsGrid.tsx
@@ -28,7 +28,6 @@ interface Props {
   onItemClick?: (v: string) => void;
   md?: GridSize;
   lg?: GridSize;
-  fromHome?: boolean;
 }
 
 export default function DatasetsGrid(props: Readonly<Props>) {
@@ -262,7 +261,6 @@ export default function DatasetsGrid(props: Readonly<Props>) {
                 id={data.id}
                 owner={data.owner}
                 inChartBuilder={props.inChartBuilder as boolean}
-                fromHome={props.fromHome}
               />
 
               {!props.inChartBuilder && <Box height={16} />}
@@ -273,7 +271,6 @@ export default function DatasetsGrid(props: Readonly<Props>) {
 
       {props.tableView && (
         <HomepageTable
-          fromHome={props.fromHome}
           onItemClick={props.onItemClick}
           inChartBuilder={props.inChartBuilder}
           data={loadedDatasets?.map((data) => ({
diff --git a/src/app/modules/home-module/components/Datasets/gridItem.tsx b/src/app/modules/home-module/components/Datasets/gridItem.tsx
index fe426bdf5..0a247e8c0 100644
--- a/src/app/modules/home-module/components/Datasets/gridItem.tsx
+++ b/src/app/modules/home-module/components/Datasets/gridItem.tsx
@@ -27,7 +27,6 @@ interface Props {
   id?: string;
   owner: string;
   inChartBuilder: boolean;
-  fromHome?: boolean;
 }
 
 export default function GridItem(props: Readonly<Props>) {
@@ -64,7 +63,7 @@ export default function GridItem(props: Readonly<Props>) {
       data-cy="dataset-grid-item"
     >
       <Link
-        to={`/dataset/${props.id}/detail?fromHome=${props.fromHome}`}
+        to={`/dataset/${props.id}/detail`}
         css={`
           text-decoration: none;
         `}
diff --git a/src/app/modules/home-module/components/Footer/index.tsx b/src/app/modules/home-module/components/Footer/index.tsx
index d187dc305..c7594923b 100644
--- a/src/app/modules/home-module/components/Footer/index.tsx
+++ b/src/app/modules/home-module/components/Footer/index.tsx
@@ -64,7 +64,7 @@ export default function HomeFooter({ small }: { small?: boolean }) {
                   <Link to="/why-dataXplorer"> Why DataXplorer?</Link>{" "}
                 </li>
                 <li>
-                  <Link to="/explore">Explore</Link>{" "}
+                  <Link to="/">Explore</Link>{" "}
                 </li>
                 <li>
                   <Link to="/about">About</Link>
diff --git a/src/app/modules/home-module/components/Table/index.tsx b/src/app/modules/home-module/components/Table/index.tsx
index 063aaa884..49c815f42 100644
--- a/src/app/modules/home-module/components/Table/index.tsx
+++ b/src/app/modules/home-module/components/Table/index.tsx
@@ -1,13 +1,11 @@
 import React from "react";
 import moment from "moment";
-import { useRecoilState } from "recoil";
 import Table from "@material-ui/core/Table";
 import { useHistory } from "react-router-dom";
 import TableRow from "@material-ui/core/TableRow";
 import TableHead from "@material-ui/core/TableHead";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
-import { homeDisplayAtom } from "app/state/recoil/atoms";
 import TableContainer from "@material-ui/core/TableContainer";
 
 export function HomepageTable(props: {
@@ -20,7 +18,6 @@ export function HomepageTable(props: {
   }[];
   inChartBuilder?: boolean;
   onItemClick?: (v: string) => void;
-  fromHome?: boolean;
 }) {
   const history = useHistory();
 
@@ -85,9 +82,7 @@ export function HomepageTable(props: {
                 if (!props.inChartBuilder) {
                   history.push(
                     `/${data.type}/${data.id}${
-                      data.type === "dataset"
-                        ? `/detail?fromHome=${props.fromHome}`
-                        : ""
+                      data.type === "dataset" ? `/detail?` : ""
                     }`
                   );
                 } else if (props.inChartBuilder && props.onItemClick) {
diff --git a/src/app/modules/home-module/index.tsx b/src/app/modules/home-module/index.tsx
index 462a1657d..ef0bf87ab 100644
--- a/src/app/modules/home-module/index.tsx
+++ b/src/app/modules/home-module/index.tsx
@@ -98,7 +98,6 @@ export default function HomeModule() {
             searchStr={searchStr}
             tableView={tableView}
             categories={categories}
-            fromHome
           />
         );
       case "charts":
@@ -125,7 +124,6 @@ export default function HomeModule() {
             searchStr={searchStr}
             tableView={tableView}
             showMenuButton={false}
-            fromHome
           />
         );
       default:
@@ -191,6 +189,7 @@ export default function HomeModule() {
               css={`
                 background: #e492bd;
               `}
+              data-cy="home-connect-dataset-button"
             >
               CONNECT DATASET
             </Link>
@@ -199,6 +198,7 @@ export default function HomeModule() {
               css={`
                 background: #64afaa;
               `}
+              data-cy="home-create-chart-button"
             >
               CREATE CHART
             </Link>
@@ -207,6 +207,7 @@ export default function HomeModule() {
               css={`
                 background: #6061e5;
               `}
+              data-cy="home-create-report-button"
             >
               CREATE REPORT
             </Link>
diff --git a/src/app/modules/home-module/sub-modules/partners/components/empowerBlock.tsx b/src/app/modules/home-module/sub-modules/partners/components/empowerBlock.tsx
index 55a34734d..5d3415bc3 100644
--- a/src/app/modules/home-module/sub-modules/partners/components/empowerBlock.tsx
+++ b/src/app/modules/home-module/sub-modules/partners/components/empowerBlock.tsx
@@ -88,7 +88,7 @@ export default function EmpowerBlock(props: {
               CREATE REPORT
             </HomePrimaryButton>
           </Link>
-          <Link to="/explore" data-cy="empower-block-explore-reports-link">
+          <Link to="/" data-cy="empower-block-explore-reports-link">
             <HomePrimaryButton color="#E492BD" type="button">
               EXPLORE REPORTS
             </HomePrimaryButton>
diff --git a/src/app/modules/report-module/index.tsx b/src/app/modules/report-module/index.tsx
index c1fbd190a..3df021854 100644
--- a/src/app/modules/report-module/index.tsx
+++ b/src/app/modules/report-module/index.tsx
@@ -20,7 +20,7 @@ import {
 } from "app/modules/report-module/data";
 import ReportCreateView from "app/modules/report-module/views/create";
 import { ReportPreviewView } from "app/modules/report-module/views/preview";
-import { ReportInitialView } from "app/modules/report-module/views/initial";
+import ReportInitialView from "app/modules/report-module/views/initial";
 import { IFramesArray } from "app/modules/report-module/views/create/data";
 import { ReportRightPanel } from "app/modules/report-module/components/right-panel";
 import { ReportElementsType } from "app/modules/report-module/components/right-panel-create-view";
diff --git a/src/app/modules/report-module/views/initial/index.tsx b/src/app/modules/report-module/views/initial/index.tsx
index 0ebc5f6f9..90daf460c 100644
--- a/src/app/modules/report-module/views/initial/index.tsx
+++ b/src/app/modules/report-module/views/initial/index.tsx
@@ -27,8 +27,9 @@ import { useHistory, useParams } from "react-router-dom";
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
 import { useMount, useTitle, useUpdateEffect } from "react-use";
 import { isEmpty } from "lodash";
+import { withAuthenticationRequired } from "@auth0/auth0-react";
 
-export function ReportInitialView(props: Readonly<ReportInitialViewProps>) {
+function ReportInitialView(props: Readonly<ReportInitialViewProps>) {
   useTitle("DX DataXplorer - New Report");
 
   const history = useHistory();
@@ -294,3 +295,5 @@ export function ReportInitialView(props: Readonly<ReportInitialViewProps>) {
     </Container>
   );
 }
+
+export default withAuthenticationRequired(ReportInitialView);

From b763257da6347ce8b55ad53ad10ac46828cea49b Mon Sep 17 00:00:00 2001
From: Psami-wondah <okechukwusamuel16@gmail.com>
Date: Tue, 4 Jun 2024 05:13:03 +0100
Subject: [PATCH 07/12] chore: update cypress tests

---
 cypress/e2e/1-dx/1-test-login.cy.ts | 2 +-
 cypress/e2e/1-dx/2-datasets.cy.ts   | 8 +++++---
 cypress/e2e/1-dx/3-charts.cy.ts     | 7 ++-----
 cypress/e2e/1-dx/4-reports.cy.ts    | 2 +-
 cypress/e2e/1-dx/5-home.cy.ts       | 2 +-
 5 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/cypress/e2e/1-dx/1-test-login.cy.ts b/cypress/e2e/1-dx/1-test-login.cy.ts
index 0684dc07e..d21fcf3ff 100644
--- a/cypress/e2e/1-dx/1-test-login.cy.ts
+++ b/cypress/e2e/1-dx/1-test-login.cy.ts
@@ -13,6 +13,6 @@ describe("Login for a test user on DX", () => {
   });
 
   it("Is Logged in", function () {
-    cy.contains("CREATE REPORT").should("be.visible");
+    cy.contains("Welcome").should("be.visible");
   });
 });
diff --git a/cypress/e2e/1-dx/2-datasets.cy.ts b/cypress/e2e/1-dx/2-datasets.cy.ts
index a572ef7d3..9c5c5f27a 100644
--- a/cypress/e2e/1-dx/2-datasets.cy.ts
+++ b/cypress/e2e/1-dx/2-datasets.cy.ts
@@ -28,13 +28,11 @@ describe("Testing connecting data on DX", () => {
 
     cy.get('[data-cy="cookie-btn"]').click();
 
-    cy.get('[data-cy="create-report-dropdown"]').click();
-    cy.get('[data-cy="appbar-connect-data"]').click();
+    cy.get('[data-cy="home-connect-dataset-button"]').click();
   });
 
   it("Can import data from External Search", () => {
     cy.intercept(`${apiUrl}/external-sources/search?q=*`).as("getDefaultData");
-    cy.get('[data-cy="external-search-button"]').click();
 
     cy.wait("@getDefaultData").then((interception) => {
       cy.get('[data-cy="external-search-card-Kaggle"]').should(
@@ -129,6 +127,8 @@ describe("Testing connecting data on DX", () => {
   // });
 
   it("Can import data through local upload", () => {
+    cy.get('[data-cy="file-upload-tab"]').click();
+    cy.get('[data-cy="upload-option-button"').first().click();
     cy.get('[data-cy="local-upload-input"]').as("fileInput");
     cy.fixture("football-players.csv").then((fileContent) => {
       cy.get("@fileInput").attachFile({
@@ -154,6 +154,8 @@ describe("Testing connecting data on DX", () => {
   });
 
   it("Can import another dataset through local upload", () => {
+    cy.get('[data-cy="file-upload-tab"]').click();
+    cy.get('[data-cy="upload-option-button"').first().click();
     cy.get('[data-cy="local-upload-input"]').as("fileInput");
     cy.fixture("grossing-movies.csv").then((fileContent) => {
       cy.get("@fileInput").attachFile({
diff --git a/cypress/e2e/1-dx/3-charts.cy.ts b/cypress/e2e/1-dx/3-charts.cy.ts
index 98f45e2bb..552d93f6d 100644
--- a/cypress/e2e/1-dx/3-charts.cy.ts
+++ b/cypress/e2e/1-dx/3-charts.cy.ts
@@ -25,9 +25,8 @@ describe("Testing create chart on DX", () => {
 
     cy.get('[data-cy="cookie-btn"]').click();
 
-    cy.get('[data-cy="create-report-dropdown"]').click();
     cy.intercept("GET", `${apiUrl}/datasets?filter=*`).as("getDatasets");
-    cy.get('[data-cy="appbar-create-chart"]').click();
+    cy.get('[data-cy="home-create-chart-button"]').click();
     cy.wait("@getDatasets");
 
     cy.intercept("GET", `${apiUrl}/chart/sample-data/*`).as("getDataset");
@@ -190,10 +189,8 @@ describe("Testing Ai chart creation", () => {
     cy.visit("/");
 
     cy.get('[data-cy="cookie-btn"]').click();
-
-    cy.get('[data-cy="create-report-dropdown"]').click();
     cy.intercept("GET", `${apiUrl}/datasets?filter=*`).as("getDatasets");
-    cy.get('[data-cy="appbar-create-chart"]').click();
+    cy.get('[data-cy="home-create-chart-button"]').click();
     cy.wait("@getDatasets");
 
     cy.intercept("GET", `${apiUrl}/chart/sample-data/*`).as("getDataset");
diff --git a/cypress/e2e/1-dx/4-reports.cy.ts b/cypress/e2e/1-dx/4-reports.cy.ts
index 10f30c02a..c0418cfd6 100644
--- a/cypress/e2e/1-dx/4-reports.cy.ts
+++ b/cypress/e2e/1-dx/4-reports.cy.ts
@@ -27,7 +27,7 @@ describe("Testing reports on DX", () => {
   });
 
   it("Can Create report", () => {
-    cy.get('[data-cy="appbar-create-report/login"]').click();
+    cy.get('[data-cy="home-create-report-button"]').click();
 
     cy.contains(
       '[data-cy="report-template-card"]',
diff --git a/cypress/e2e/1-dx/5-home.cy.ts b/cypress/e2e/1-dx/5-home.cy.ts
index 707d0550b..509e35b08 100644
--- a/cypress/e2e/1-dx/5-home.cy.ts
+++ b/cypress/e2e/1-dx/5-home.cy.ts
@@ -14,7 +14,7 @@ describe("Home page tests", () => {
     cy.location("pathname").should("include", "/about");
     cy.get('[data-cy="empower-block-explore-reports-link"]').click();
     cy.wait(2000);
-    cy.location("pathname").should("include", "/explore");
+    cy.location("pathname").should("include", "/");
     cy.get('[data-cy="nav-about"]').click();
     cy.wait(2000);
 

From 5afb6b2fd011ed572fb0a8af83be5c2ba25a7820 Mon Sep 17 00:00:00 2001
From: Psami-wondah <okechukwusamuel16@gmail.com>
Date: Tue, 4 Jun 2024 13:15:07 +0100
Subject: [PATCH 08/12] chore: update cypress test

---
 cypress/e2e/1-dx/4-reports.cy.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/cypress/e2e/1-dx/4-reports.cy.ts b/cypress/e2e/1-dx/4-reports.cy.ts
index c0418cfd6..e9fec3630 100644
--- a/cypress/e2e/1-dx/4-reports.cy.ts
+++ b/cypress/e2e/1-dx/4-reports.cy.ts
@@ -153,8 +153,6 @@ describe("Testing reports on DX", () => {
 
     cy.visit("/");
 
-    cy.wait("@fetchReports");
-
     cy.get('[data-cy="home-charts-tab"]').scrollIntoView().click();
 
     cy.get('[data-cy="home-reports-tab"]').scrollIntoView().click();

From 04672c14e8a5499909b8a8786326209aa35ff1a6 Mon Sep 17 00:00:00 2001
From: Psami-wondah <okechukwusamuel16@gmail.com>
Date: Thu, 6 Jun 2024 20:21:59 +0100
Subject: [PATCH 09/12] feat: DX-1379 - Keep search input after an error +
 clicking Try Again

---
 .../upload-steps/externalSearch.tsx           | 27 +++++++++++--------
 .../upload-steps/index.tsx                    |  7 ++++-
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx b/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx
index 448893dc8..99436d443 100644
--- a/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx
+++ b/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx
@@ -33,10 +33,14 @@ export default function ExternalSearch(props: {
   handleDownload: (dataset: IExternalDataset) => void;
   setProcessingError: React.Dispatch<React.SetStateAction<string | null>>;
   setActiveStep: React.Dispatch<React.SetStateAction<number>>;
+  searchValue: string | undefined;
+  setSearchValue: React.Dispatch<React.SetStateAction<string | undefined>>;
+  sources: string[];
+  setSources: React.Dispatch<React.SetStateAction<string[]>>;
 }) {
   const observerTarget = React.useRef(null);
   const [tableView, setTableView] = React.useState(false);
-  const [searchValue, setSearchValue] = React.useState<string | undefined>("");
+
   const [sortValue, setSortValue] = React.useState("createdDate");
   const token = useStoreState((state) => state.AuthToken.value);
   const history = useHistory();
@@ -45,7 +49,6 @@ export default function ExternalSearch(props: {
   const limit = 20;
   const [datasets, setDatasets] = React.useState<IExternalDataset[]>([]);
 
-  const [sources, setSources] = React.useState<string[]>([]);
   const baseSources = [
     { name: "Kaggle", value: "Kaggle" },
     { name: "World Bank", value: "World Bank" },
@@ -76,10 +79,12 @@ export default function ExternalSearch(props: {
     try {
       setLoading(true);
       const response = await axios.get(
-        `${
-          process.env.REACT_APP_API
-        }/external-sources/search?q=${searchValue}&source=${
-          sources.length ? sources.join(",") : "Kaggle,World Bank,WHO,HDX"
+        `${process.env.REACT_APP_API}/external-sources/search?q=${
+          props.searchValue
+        }&source=${
+          props.sources.length
+            ? props.sources.join(",")
+            : "Kaggle,World Bank,WHO,HDX"
         }&offset=${offset}&limit=${limit}`,
         {
           signal: abortControllerRef.current.signal,
@@ -122,7 +127,7 @@ export default function ExternalSearch(props: {
       }
     },
     500,
-    [searchValue, token, sources]
+    [props.searchValue, token, props.sources]
   );
   return (
     <>
@@ -160,14 +165,14 @@ export default function ExternalSearch(props: {
       <Box height={32} />
       <Grid container justifyContent="space-between" alignItems="center">
         <SourceCategoryList
-          sources={sources}
-          setSources={setSources}
+          sources={props.sources}
+          setSources={props.setSources}
           baseSources={baseSources}
         />
 
         <Filter
-          searchValue={searchValue as string}
-          setSearchValue={setSearchValue}
+          searchValue={props.searchValue as string}
+          setSearchValue={props.setSearchValue}
           setSortValue={setSortValue}
           setTableView={setTableView}
           sortValue={sortValue}
diff --git a/src/app/modules/dataset-upload-module/upload-steps/index.tsx b/src/app/modules/dataset-upload-module/upload-steps/index.tsx
index b8e37b8d3..69f57fe7a 100644
--- a/src/app/modules/dataset-upload-module/upload-steps/index.tsx
+++ b/src/app/modules/dataset-upload-module/upload-steps/index.tsx
@@ -53,7 +53,8 @@ function DatasetUploadSteps(props: Props) {
   );
   const [processed, setProcessed] = React.useState(false);
   const [selectedFile, setSelectedFile] = React.useState<File | null>(null);
-  const [isExternalSearch, setIsExternalSearch] = React.useState(false);
+  const [searchValue, setSearchValue] = React.useState<string | undefined>("");
+  const [sources, setSources] = React.useState<string[]>([]);
 
   const [activeTab, setActiveTab] = React.useState<"search" | "file">("search");
   const [activeOption, setActiveOption] = React.useState<string | null>(null);
@@ -295,6 +296,10 @@ function DatasetUploadSteps(props: Props) {
                 setActiveStep={setActiveStep}
                 setProcessingError={setProcessingError}
                 handleDownload={handleDownloadExternalDataset}
+                searchValue={searchValue}
+                setSearchValue={setSearchValue}
+                sources={sources}
+                setSources={setSources}
               />
             ) : (
               <AddDatasetFragment

From 967292e173e6111967530815dad5ca8fea4ae883 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Fri, 7 Jun 2024 13:38:36 +0100
Subject: [PATCH 10/12] tests: update failing unit tests

---
 package.json                                  |   2 +-
 .../__test__/add-dataset.test.tsx             | 114 ++++++++++++------
 .../component/uploadOption.tsx                |   1 +
 yarn.lock                                     |  18 +--
 4 files changed, 87 insertions(+), 48 deletions(-)

diff --git a/package.json b/package.json
index ac0ebaa5f..9d255b02d 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@auth0/auth0-react": "^2.2.1",
-    "@azure/msal-browser": "^3.15.0",
+    "@azure/msal-browser": "^3.16.0",
     "@craco/craco": "^6.4.3",
     "@devhammed/use-cookie": "^1.1.1",
     "@draft-js-plugins/anchor": "^4.1.4",
diff --git a/src/app/modules/dataset-upload-module/__test__/add-dataset.test.tsx b/src/app/modules/dataset-upload-module/__test__/add-dataset.test.tsx
index 5bc8ce439..e0769b253 100644
--- a/src/app/modules/dataset-upload-module/__test__/add-dataset.test.tsx
+++ b/src/app/modules/dataset-upload-module/__test__/add-dataset.test.tsx
@@ -5,6 +5,27 @@ import { StoreProvider, createStore } from "easy-peasy";
 import { AuthTokenState } from "app/state/api/action-reducers/sync";
 import axios from "axios";
 
+interface MockProps {
+  onFileSubmit: jest.Mock<any, any, any>;
+  disabled: boolean;
+  processingError: string | null;
+  activeOption: string | null;
+  setActiveOption: jest.Mock<any, any, any>;
+  setActiveStep: jest.Mock<any, any, any>;
+}
+
+const defaultProps = (newProps: Partial<MockProps> = {}): MockProps => {
+  return {
+    onFileSubmit: jest.fn(),
+    disabled: false,
+    processingError: null,
+    activeOption: null,
+    setActiveOption: jest.fn().mockImplementation(() => "Local upload"),
+    setActiveStep: jest.fn(),
+    ...newProps,
+  };
+};
+
 const mockOpenPicker = jest.fn();
 jest.mock("react-google-drive-picker", () => {
   return {
@@ -14,36 +35,64 @@ jest.mock("react-google-drive-picker", () => {
     },
   };
 });
+jest.mock("app/hooks/useOneDrivePicker", () => {
+  return {
+    useOneDrivePicker: () => {
+      return {
+        launchPicker: jest.fn(),
+        clearToken: jest.fn(),
+        connected: true,
+      };
+    },
+  };
+});
 
 jest.mock("axios");
 
-const appFn = (mockSetSelectedFile: jest.Mock<any, any, any>) => {
+const appFn = (newProps: Partial<MockProps> = {}) => {
   const mockStore = createStore({
     AuthToken: AuthTokenState,
   });
+  const props = defaultProps(newProps);
 
-  return (
-    <StoreProvider store={mockStore}>
-      <AddDatasetFragment
-        onFileSubmit={mockSetSelectedFile}
-        disabled={false}
-        processingError={null}
-        activeOption={null}
-        setActiveOption={jest.fn()}
-        setActiveStep={jest.fn()}
-      />
-    </StoreProvider>
-  );
+  return {
+    app: (
+      <StoreProvider store={mockStore}>
+        <AddDatasetFragment {...props} />
+      </StoreProvider>
+    ),
+    props,
+  };
 };
 
-test("local upload of dataset", async () => {
+test("open local upload option", async () => {
   const mockSetSelectedFile = jest.fn();
-  const app = appFn(mockSetSelectedFile);
+  const { app, props } = appFn({
+    onFileSubmit: mockSetSelectedFile,
+  });
+  const user = userEvent.setup();
+  render(app);
+  await user.click(
+    screen.getByTestId(/Local upload-option/i) as HTMLInputElement
+  );
+  expect(props.setActiveOption).toHaveBeenCalledWith("Local upload");
+});
+
+test("local file upload of dataset", async () => {
+  const mockSetSelectedFile = jest.fn();
+  const { app, props } = appFn({
+    onFileSubmit: mockSetSelectedFile,
+    activeOption: "Local upload",
+  });
+
   render(app);
 
   const file = new File(["(⌐□_□)"], "chucknorris.csv", { type: "text/csv" });
-  const dndText = screen.getByText(/drag and drop/i);
-  expect(dndText).toBeInTheDocument();
+
+  expect(
+    screen.getByText(/Drag and Drop Spreadsheets File here/i)
+  ).toBeInTheDocument();
+
   const uploadInput = screen.getByTestId("local-upload") as HTMLInputElement;
 
   Object.defineProperty(uploadInput, "files", { value: [file] });
@@ -55,33 +104,22 @@ test("local upload of dataset", async () => {
   });
 });
 
-test("external search of dataset", async () => {
-  const user = userEvent.setup();
-
+test("select google drive button", async () => {
   const mockSetSelectedFile = jest.fn();
-
-  const app = appFn(mockSetSelectedFile);
-
-  render(app);
-
-  const searchButton = screen.getByText(/external search/i);
-  await user.click(searchButton);
-});
-
-test("google drive button", async () => {
-  const mockSetSelectedFile = jest.fn();
-  const app = appFn(mockSetSelectedFile);
+  const user = userEvent.setup();
+  const { app, props } = appFn({
+    onFileSubmit: mockSetSelectedFile,
+  });
   mockOpenPicker.mockImplementation(({ callbackFunction }) => {
     callbackFunction({ docs: [{ id: "123", name: "test.csv", type: "file" }] });
   });
   (axios.get as jest.Mock).mockResolvedValueOnce({ data: "access_token" });
 
   render(app);
-  const googleDriveButton = screen.getByTestId("google-drive-button");
-
-  expect(googleDriveButton).toBeInTheDocument();
-  await userEvent.click(googleDriveButton);
-  (axios.get as jest.Mock).mockResolvedValueOnce({ data: [] });
+  await user.click(
+    screen.getByTestId(/Google Drive-option/i) as HTMLInputElement
+  );
+  expect(props.setActiveOption).toHaveBeenCalledWith("Google Drive");
 
   // Assert that openPicker is called with the correct parameters
   expect(mockOpenPicker).toHaveBeenCalledWith({
@@ -89,7 +127,7 @@ test("google drive button", async () => {
     developerKey: expect.any(String),
     viewId: "SPREADSHEETS",
     supportDrives: true,
-    token: "access_token",
+    token: null,
     setSelectFolderEnabled: true,
     callbackFunction: expect.any(Function),
   });
diff --git a/src/app/modules/dataset-upload-module/component/uploadOption.tsx b/src/app/modules/dataset-upload-module/component/uploadOption.tsx
index 446b9e67f..ebef45a68 100644
--- a/src/app/modules/dataset-upload-module/component/uploadOption.tsx
+++ b/src/app/modules/dataset-upload-module/component/uploadOption.tsx
@@ -34,6 +34,7 @@ const UploadOption = (props: {
         props.onClick(e);
       }}
       data-cy="upload-option-button"
+      data-testid={`${props.name}-option`}
     >
       <div
         css={`
diff --git a/yarn.lock b/yarn.lock
index 3652ded13..a95a71521 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -28,17 +28,17 @@
   resolved "https://registry.yarnpkg.com/@auth0/auth0-spa-js/-/auth0-spa-js-2.1.2.tgz#2217db13ce0feb480a190ed165b36681bd48633c"
   integrity sha512-xdA65Z/U7++Y7L9Uwh8Q8OVOs6qgFz+fb7GAzHFjpr1icO37B//xdzLXm7ZRgA19RWrsNe1nme3h896igJSvvw==
 
-"@azure/msal-browser@^3.15.0":
-  version "3.15.0"
-  resolved "https://registry.yarnpkg.com/@azure/msal-browser/-/msal-browser-3.15.0.tgz#a3b223e79e46db827f54057021a200f3755cbdf7"
-  integrity sha512-jqngIR0zGLtEHCAhgXLl+VZTFcU/9DmRSjGj5RbrLnFPL/0L9Hr68k8grvLrTIq7tjhTM5Xgh6Xc0l7JlViHQQ==
+"@azure/msal-browser@^3.16.0":
+  version "3.16.0"
+  resolved "https://registry.yarnpkg.com/@azure/msal-browser/-/msal-browser-3.16.0.tgz#f1e2dc957006783b29816273d531761116215a33"
+  integrity sha512-WKobvIisBK7sFSOwHuchH9tUMekwhJRLgLE9tKhIq0wFYGRcVGK0KivP5vZrobVZEMNCZWto0fI1VcSVoa+cig==
   dependencies:
-    "@azure/msal-common" "14.10.0"
+    "@azure/msal-common" "14.11.0"
 
-"@azure/msal-common@14.10.0":
-  version "14.10.0"
-  resolved "https://registry.yarnpkg.com/@azure/msal-common/-/msal-common-14.10.0.tgz#215449726717b53d549953db77562cad6cb8421c"
-  integrity sha512-Zk6DPDz7e1wPgLoLgAp0349Yay9RvcjPM5We/ehuenDNsz/t9QEFI7tRoHpp/e47I4p20XE3FiDlhKwAo3utDA==
+"@azure/msal-common@14.11.0":
+  version "14.11.0"
+  resolved "https://registry.yarnpkg.com/@azure/msal-common/-/msal-common-14.11.0.tgz#a34483ae6b1009d0058472f2c5db4569071dc51a"
+  integrity sha512-B6+IKLFs7Lsr06vjX8dPN61ENpTgiFrHf+CVo1UasHcmk5uEOq5D4thrbjsauKX+xtFryYsCDtznVDmWS4/sCg==
 
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.8.3":
   version "7.16.7"

From c8ff8130666a20ce082b4ee9b7d3070837bf9ba9 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Fri, 7 Jun 2024 15:20:25 +0100
Subject: [PATCH 11/12] feat:DX-1379; maintain search input state

---
 .../upload-steps/externalSearch.tsx                   |  4 ++++
 .../dataset-upload-module/upload-steps/index.tsx      |  3 +++
 .../modules/home-module/components/Filter/index.tsx   | 11 ++++++-----
 .../home-module/sub-modules/explore-assets/index.tsx  |  3 +++
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx b/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx
index 99436d443..f6933cbf7 100644
--- a/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx
+++ b/src/app/modules/dataset-upload-module/upload-steps/externalSearch.tsx
@@ -35,6 +35,8 @@ export default function ExternalSearch(props: {
   setActiveStep: React.Dispatch<React.SetStateAction<number>>;
   searchValue: string | undefined;
   setSearchValue: React.Dispatch<React.SetStateAction<string | undefined>>;
+  openSearch: boolean;
+  setOpenSearch: React.Dispatch<React.SetStateAction<boolean>>;
   sources: string[];
   setSources: React.Dispatch<React.SetStateAction<string[]>>;
 }) {
@@ -179,6 +181,8 @@ export default function ExternalSearch(props: {
           tableView={tableView}
           terminateSearch={terminateSearch}
           searchInputWidth="249px"
+          openSearch={props.openSearch}
+          setOpenSearch={props.setOpenSearch}
         />
       </Grid>
 
diff --git a/src/app/modules/dataset-upload-module/upload-steps/index.tsx b/src/app/modules/dataset-upload-module/upload-steps/index.tsx
index 69f57fe7a..28335c4ad 100644
--- a/src/app/modules/dataset-upload-module/upload-steps/index.tsx
+++ b/src/app/modules/dataset-upload-module/upload-steps/index.tsx
@@ -54,6 +54,7 @@ function DatasetUploadSteps(props: Props) {
   const [processed, setProcessed] = React.useState(false);
   const [selectedFile, setSelectedFile] = React.useState<File | null>(null);
   const [searchValue, setSearchValue] = React.useState<string | undefined>("");
+  const [openSearch, setOpenSearch] = React.useState(false);
   const [sources, setSources] = React.useState<string[]>([]);
 
   const [activeTab, setActiveTab] = React.useState<"search" | "file">("search");
@@ -298,6 +299,8 @@ function DatasetUploadSteps(props: Props) {
                 handleDownload={handleDownloadExternalDataset}
                 searchValue={searchValue}
                 setSearchValue={setSearchValue}
+                openSearch={openSearch}
+                setOpenSearch={setOpenSearch}
                 sources={sources}
                 setSources={setSources}
               />
diff --git a/src/app/modules/home-module/components/Filter/index.tsx b/src/app/modules/home-module/components/Filter/index.tsx
index 270096dc5..f770fe0cd 100644
--- a/src/app/modules/home-module/components/Filter/index.tsx
+++ b/src/app/modules/home-module/components/Filter/index.tsx
@@ -21,6 +21,8 @@ export default function Filter(
     tableView: boolean;
     terminateSearch?: () => void;
     searchInputWidth?: string;
+    openSearch: boolean;
+    setOpenSearch: React.Dispatch<React.SetStateAction<boolean>>;
   }>
 ) {
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -30,7 +32,6 @@ export default function Filter(
     setSortPopoverAnchorEl(null);
   };
   const openSortPopover = Boolean(sortPopoverAnchorEl);
-  const [openSearch, setOpenSearch] = React.useState(false);
   const sortOptions = [
     { label: "Last updated", value: "updatedDate" },
     { label: "Created date", value: "createdDate" },
@@ -56,7 +57,7 @@ export default function Filter(
           gap: 8px;
         `}
       >
-        <div css={searchInputCss(openSearch, props.searchInputWidth)}>
+        <div css={searchInputCss(props.openSearch, props.searchInputWidth)}>
           <input
             type="text"
             ref={inputRef}
@@ -69,7 +70,7 @@ export default function Filter(
             onClick={() => {
               props.setSearchValue("");
               props.terminateSearch && props.terminateSearch();
-              setOpenSearch(false);
+              props.setOpenSearch(false);
             }}
             css={`
               &:hover {
@@ -87,10 +88,10 @@ export default function Filter(
         <IconButton
           data-cy="open-search-button"
           onClick={() => {
-            setOpenSearch(true);
+            props.setOpenSearch(true);
             inputRef.current?.focus();
           }}
-          css={iconButtonCss(openSearch)}
+          css={iconButtonCss(props.openSearch)}
         >
           <SearchIcon />
         </IconButton>
diff --git a/src/app/modules/home-module/sub-modules/explore-assets/index.tsx b/src/app/modules/home-module/sub-modules/explore-assets/index.tsx
index 4de2b23a6..37c170a14 100644
--- a/src/app/modules/home-module/sub-modules/explore-assets/index.tsx
+++ b/src/app/modules/home-module/sub-modules/explore-assets/index.tsx
@@ -75,6 +75,7 @@ export default function ExploreAssetsModule() {
   const [searchValue, setSearchValue] = React.useState<string | undefined>(
     undefined
   );
+  const [openSearch, setOpenSearch] = React.useState(false);
   const [sortValue, setSortValue] = React.useState("updatedDate");
   const exploreViewRef = React.useRef<HTMLDivElement>(null);
   const [display, setDisplay] = useRecoilState(homeDisplayAtom);
@@ -182,6 +183,8 @@ export default function ExploreAssetsModule() {
                 setTableView={setTableView}
                 sortValue={sortValue}
                 tableView={tableView}
+                openSearch={openSearch}
+                setOpenSearch={setOpenSearch}
               />
             </Grid>
           </Grid>

From 0e276f6df6581a74b5ebee624b9effa258c9c4d6 Mon Sep 17 00:00:00 2001
From: Psami-wondah <okechukwusamuel16@gmail.com>
Date: Fri, 7 Jun 2024 16:35:04 +0100
Subject: [PATCH 12/12] feat: Add type to all assets table

---
 src/app/modules/home-module/components/All/assetsGrid.tsx | 1 +
 src/app/modules/home-module/components/Table/index.tsx    | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/app/modules/home-module/components/All/assetsGrid.tsx b/src/app/modules/home-module/components/All/assetsGrid.tsx
index 47d46448e..1d6b44157 100644
--- a/src/app/modules/home-module/components/All/assetsGrid.tsx
+++ b/src/app/modules/home-module/components/All/assetsGrid.tsx
@@ -239,6 +239,7 @@ export default function AssetsGrid(props: Props) {
         <HomepageTable
           onItemClick={props.onItemClick}
           inChartBuilder={props.inChartBuilder}
+          all
           data={loadedAssets.map((data) => {
             if (data.assetType === "chart") {
               return {
diff --git a/src/app/modules/home-module/components/Table/index.tsx b/src/app/modules/home-module/components/Table/index.tsx
index 49c815f42..8bd42037f 100644
--- a/src/app/modules/home-module/components/Table/index.tsx
+++ b/src/app/modules/home-module/components/Table/index.tsx
@@ -7,6 +7,7 @@ import TableHead from "@material-ui/core/TableHead";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableContainer from "@material-ui/core/TableContainer";
+import _ from "lodash";
 
 export function HomepageTable(props: {
   data: {
@@ -18,6 +19,7 @@ export function HomepageTable(props: {
   }[];
   inChartBuilder?: boolean;
   onItemClick?: (v: string) => void;
+  all?: boolean;
 }) {
   const history = useHistory();
 
@@ -65,8 +67,9 @@ export function HomepageTable(props: {
         >
           <TableRow>
             <TableCell width="50px"></TableCell>
-            <TableCell width="400px">Name</TableCell>
-            <TableCell width="550px">Description</TableCell>
+            <TableCell width="171px">Name</TableCell>
+            {props.all && <TableCell width="55px">Type</TableCell>}
+            <TableCell width="650px">Description</TableCell>
             <TableCell width="200px">Creation date</TableCell>
           </TableRow>
         </TableHead>
@@ -98,6 +101,7 @@ export function HomepageTable(props: {
             >
               <TableCell>{index + 1}</TableCell>
               <TableCell>{data.name}</TableCell>
+              {props.all && <TableCell>{_.capitalize(data.type)}</TableCell>}
               <TableCell>{data.description}</TableCell>
               <TableCell>
                 {moment(data.createdDate).format("MMMM YYYY")}