From b0519d46255651a7fd9af7e70f8c77d33d4f51df Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Thu, 13 Feb 2025 16:16:03 -0700
Subject: [PATCH] abstract dataset provider away

---
 .../app/app/datasets/DatasetsPageContent.tsx  |  12 +-
 .../app/app/datasets/_DatasetListContent.tsx  |   6 +-
 web/src/app/app/datasets/_DatasetsHeader.tsx  | 132 +++++++++---------
 web/src/context/Datasets/DatasetProvider.tsx  |  12 +-
 4 files changed, 79 insertions(+), 83 deletions(-)

diff --git a/web/src/app/app/datasets/DatasetsPageContent.tsx b/web/src/app/app/datasets/DatasetsPageContent.tsx
index 3b64b76df..62ffd9b5c 100644
--- a/web/src/app/app/datasets/DatasetsPageContent.tsx
+++ b/web/src/app/app/datasets/DatasetsPageContent.tsx
@@ -6,10 +6,12 @@ import { useUserConfigContextSelector } from '@/context/Users';
 import { useMemo, useState } from 'react';
 import { DatasetListContent } from './_DatasetListContent';
 import { DatasetHeader } from './_DatasetsHeader';
+import { NewDatasetModal } from '../_components/NewDatasetModal';
 
 export const DatasetsPageContent: React.FC<{}> = ({}) => {
   const isAdmin = useUserConfigContextSelector((state) => state.isAdmin);
   const [datasetFilter, setDatasetFilter] = useState<'all' | 'published' | 'drafts'>('all');
+  const [openDatasetModal, setOpenDatasetModal] = useState<boolean>(false);
 
   const datasetsParams: Parameters<typeof useGetDatasets>[0] = useMemo(() => {
     if (datasetFilter === 'drafts') {
@@ -35,12 +37,20 @@ export const DatasetsPageContent: React.FC<{}> = ({}) => {
 
   return (
     <>
-      <DatasetHeader datasetFilter={datasetFilter} setDatasetFilter={setDatasetFilter} />
+      <DatasetHeader
+        datasetFilter={datasetFilter}
+        setDatasetFilter={setDatasetFilter}
+        openNewDatasetModal={openDatasetModal}
+        setOpenNewDatasetModal={setOpenDatasetModal}
+      />
       <DatasetListContent
         datasetsList={datasetsList || []}
         isFetchedDatasets={isFetchedDatasets}
         isAdmin={isAdmin}
+        setOpenNewDatasetModal={setOpenDatasetModal}
       />
+
+      <NewDatasetModal open={openDatasetModal} onClose={() => setOpenDatasetModal(false)} />
     </>
   );
 };
diff --git a/web/src/app/app/datasets/_DatasetListContent.tsx b/web/src/app/app/datasets/_DatasetListContent.tsx
index bded033e7..64303cfcc 100644
--- a/web/src/app/app/datasets/_DatasetListContent.tsx
+++ b/web/src/app/app/datasets/_DatasetListContent.tsx
@@ -8,7 +8,6 @@ import { BusterList, BusterListColumn, BusterListRow } from '@/components/list';
 import { BusterRoutes, createBusterRoute } from '@/routes';
 import type { BusterDatasetListItem } from '@/api/asset_interfaces';
 import { ListEmptyStateWithButton } from '../../../components/list';
-import { useDatasetContextSelector } from '@/context/Datasets';
 import { useMemoizedFn } from 'ahooks';
 import { DatasetSelectedOptionPopup } from './_DatasetSelectedPopup';
 
@@ -60,9 +59,8 @@ export const DatasetListContent: React.FC<{
   datasetsList: BusterDatasetListItem[];
   isFetchedDatasets: boolean;
   isAdmin: boolean;
-}> = React.memo(({ datasetsList, isFetchedDatasets, isAdmin }) => {
-  const setOpenNewDatasetModal = useDatasetContextSelector((state) => state.setOpenNewDatasetModal);
-
+  setOpenNewDatasetModal: (open: boolean) => void;
+}> = React.memo(({ datasetsList, isFetchedDatasets, isAdmin, setOpenNewDatasetModal }) => {
   const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
 
   const rows: BusterListRow[] = useMemo(() => {
diff --git a/web/src/app/app/datasets/_DatasetsHeader.tsx b/web/src/app/app/datasets/_DatasetsHeader.tsx
index 3ab6cfa25..9382d7171 100644
--- a/web/src/app/app/datasets/_DatasetsHeader.tsx
+++ b/web/src/app/app/datasets/_DatasetsHeader.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Breadcrumb, Button } from 'antd';
 import Link from 'next/link';
 import { BusterRoutes, createBusterRoute } from '@/routes';
 import { AppMaterialIcons, AppSegmented, AppTooltip } from '@/components';
 import { NewDatasetModal } from '@appComponents/NewDatasetModal';
 import { AppContentHeader } from '../../../components/layout/AppContentHeader';
-import { useDatasetContextSelector, useIndividualDataset } from '@/context/Datasets';
+import { useIndividualDataset } from '@/context/Datasets';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useUserConfigContextSelector } from '@/context/Users';
 import { useMemoizedFn } from 'ahooks';
@@ -15,79 +15,75 @@ import { useMemoizedFn } from 'ahooks';
 export const DatasetHeader: React.FC<{
   datasetFilter: 'all' | 'published' | 'drafts';
   setDatasetFilter: (filter: 'all' | 'published' | 'drafts') => void;
-}> = React.memo(({ datasetFilter, setDatasetFilter }) => {
-  const openedDatasetId = useDatasetContextSelector((state) => state.openedDatasetId);
-  const openNewDatasetModal = useDatasetContextSelector((state) => state.openNewDatasetModal);
-  const setOpenNewDatasetModal = useDatasetContextSelector((state) => state.setOpenNewDatasetModal);
-  const isAdmin = useUserConfigContextSelector((state) => state.isAdmin);
-  const { dataset } = useIndividualDataset({ datasetId: openedDatasetId });
-  const datasetTitle = dataset?.data?.name || 'Datasets';
+  datasetId?: string;
+  setOpenNewDatasetModal: (open: boolean) => void;
+  openNewDatasetModal: boolean;
+}> = React.memo(
+  ({ datasetFilter, setDatasetFilter, datasetId, setOpenNewDatasetModal, openNewDatasetModal }) => {
+    const isAdmin = useUserConfigContextSelector((state) => state.isAdmin);
+    const { dataset } = useIndividualDataset({ datasetId: datasetId || '' });
+    const datasetTitle = dataset?.data?.name || 'Datasets';
 
-  const breadcrumbItems = useMemo(
-    () =>
-      [
-        {
-          title: (
-            <Link
-              suppressHydrationWarning
-              href={
-                openedDatasetId
-                  ? createBusterRoute({
-                      route: BusterRoutes.APP_DATASETS_ID_OVERVIEW,
-                      datasetId: openedDatasetId
-                    })
-                  : createBusterRoute({ route: BusterRoutes.APP_DATASETS })
-              }>
-              {datasetTitle}
-            </Link>
-          )
-        }
-      ].filter((item) => item.title),
-    [openedDatasetId, datasetTitle]
-  );
+    const breadcrumbItems = useMemo(
+      () =>
+        [
+          {
+            title: (
+              <Link
+                suppressHydrationWarning
+                href={
+                  datasetId
+                    ? createBusterRoute({
+                        route: BusterRoutes.APP_DATASETS_ID_OVERVIEW,
+                        datasetId: datasetId
+                      })
+                    : createBusterRoute({ route: BusterRoutes.APP_DATASETS })
+                }>
+                {datasetTitle}
+              </Link>
+            )
+          }
+        ].filter((item) => item.title),
+      [datasetId, datasetTitle]
+    );
 
-  const onCloseNewDatasetModal = useMemoizedFn(() => {
-    setOpenNewDatasetModal(false);
-  });
+    const onCloseNewDatasetModal = useMemoizedFn(() => {
+      setOpenNewDatasetModal(false);
+    });
 
-  const onOpenNewDatasetModal = useMemoizedFn(() => {
-    setOpenNewDatasetModal(true);
-  });
+    const onOpenNewDatasetModal = useMemoizedFn(() => {
+      setOpenNewDatasetModal(true);
+    });
 
-  useHotkeys('d', onOpenNewDatasetModal);
+    useHotkeys('d', onOpenNewDatasetModal);
 
-  return (
-    <>
-      <AppContentHeader className="items-center justify-between space-x-2">
-        <div className="flex space-x-3">
-          <Breadcrumb className="flex items-center" items={breadcrumbItems} />
-          <DatasetFilters datasetFilter={datasetFilter} setDatasetFilter={setDatasetFilter} />
-        </div>
+    return (
+      <>
+        <AppContentHeader className="items-center justify-between space-x-2">
+          <div className="flex space-x-3">
+            <Breadcrumb className="flex items-center" items={breadcrumbItems} />
+            <DatasetFilters datasetFilter={datasetFilter} setDatasetFilter={setDatasetFilter} />
+          </div>
 
-        <div className="flex items-center">
-          {isAdmin && (
-            <AppTooltip title={'Create new dashboard'} shortcuts={['D']}>
-              <Button
-                type="default"
-                icon={<AppMaterialIcons icon="add" />}
-                onClick={onOpenNewDatasetModal}>
-                New Dataset
-              </Button>
-            </AppTooltip>
-          )}
-        </div>
-      </AppContentHeader>
+          <div className="flex items-center">
+            {isAdmin && (
+              <AppTooltip title={'Create new dashboard'} shortcuts={['D']}>
+                <Button
+                  type="default"
+                  icon={<AppMaterialIcons icon="add" />}
+                  onClick={onOpenNewDatasetModal}>
+                  New Dataset
+                </Button>
+              </AppTooltip>
+            )}
+          </div>
+        </AppContentHeader>
 
-      {isAdmin && (
-        <NewDatasetModal
-          open={openNewDatasetModal}
-          onClose={onCloseNewDatasetModal}
-          datasourceId={openedDatasetId}
-        />
-      )}
-    </>
-  );
-});
+        {isAdmin && <NewDatasetModal open={openNewDatasetModal} onClose={onCloseNewDatasetModal} />}
+      </>
+    );
+  }
+);
 DatasetHeader.displayName = 'DatasetHeader';
 
 const DatasetFilters: React.FC<{
diff --git a/web/src/context/Datasets/DatasetProvider.tsx b/web/src/context/Datasets/DatasetProvider.tsx
index 5706a9ae7..23503598c 100644
--- a/web/src/context/Datasets/DatasetProvider.tsx
+++ b/web/src/context/Datasets/DatasetProvider.tsx
@@ -1,5 +1,4 @@
-import React, { PropsWithChildren, useState } from 'react';
-import { useParams } from 'next/navigation';
+import React, { PropsWithChildren } from 'react';
 import {
   ContextSelector,
   createContext,
@@ -7,14 +6,7 @@ import {
 } from '@fluentui/react-context-selector';
 
 export const useDatasets = () => {
-  const { openedDatasetId } = useParams<{ openedDatasetId: string }>();
-  const [openNewDatasetModal, setOpenNewDatasetModal] = useState(false);
-
-  return {
-    openedDatasetId,
-    openNewDatasetModal,
-    setOpenNewDatasetModal
-  };
+  return {};
 };
 
 const BusterDatasets = createContext<ReturnType<typeof useDatasets>>(