tsify data catalog tab and convert it to functional component

lib/ReactViews/ExplorerWindow/Tabs.jsx

@@ -73,8 +73,6 @@ class Tabs extends React.Component {
             idInCategory: member.uniqueId,
             panel: (
               <DataCatalogTab
-                terria={this.props.terria}
-                viewState={this.props.viewState}
                 items={member.memberModels || [member]}
                 searchPlaceholder={t("addData.searchPlaceholderWhole")}
               />
@@ -90,8 +88,6 @@ class Tabs extends React.Component {
           category: "data-catalog",
           panel: (
             <DataCatalogTab
-              terria={this.props.terria}
-              viewState={this.props.viewState}
               items={this.props.terria.catalog.group.memberModels}
               searchPlaceholder={t("addData.searchPlaceholder")}
             />

lib/ReactViews/ExplorerWindow/Tabs/DataCatalogTab.tsx

@@ -0,0 +1,94 @@
+import { runInAction } from "mobx";
+import { observer } from "mobx-react";
+import { useTranslation } from "react-i18next";
+import Box from "../../../Styled/Box";
+import DataCatalog from "../../DataCatalog/DataCatalog";
+import DataPreview from "../../Preview/DataPreview";
+import Breadcrumbs from "../../Search/Breadcrumbs";
+import SearchBox, { DEBOUNCE_INTERVAL } from "../../Search/SearchBox.jsx";
+import Styles from "./data-catalog-tab.scss";
+import { useViewState } from "../../Context";
+
+interface DataCatalogTabProps {
+  items?: unknown[];
+  searchPlaceholder?: string;
+  onActionButtonClicked?: () => void;
+}
+
+const DataCatalogTab = observer(function DataCatalogTab(
+  props: DataCatalogTabProps
+) {
+  const viewState = useViewState();
+  const { t } = useTranslation();
+
+  const {
+    searchState,
+    previewedItem: previewed,
+    breadcrumbsShown: showBreadcrumbs,
+    terria
+  } = viewState;
+
+  const searchPlaceholder =
+    props.searchPlaceholder || t("addData.searchPlaceholder");
+
+  const changeSearchText = (newText: string) => {
+    runInAction(() => {
+      viewState.searchState.catalogSearchText = newText;
+    });
+  };
+
+  const search = () => {
+    viewState.searchState.searchCatalog();
+  };
+
+  return (
+    <div className={Styles.root}>
+      <Box fullHeight column>
+        <Box fullHeight overflow="hidden">
+          <Box className={Styles.dataExplorer} styledWidth="40%">
+            {/* ~TODO: Put this back once we add a MobX DataCatalogSearch Provider~ */}
+            {/* TODO2: Implement a more generic MobX DataCatalogSearch */}
+            {searchState.catalogSearchProvider && (
+              <SearchBox
+                searchText={searchState.catalogSearchText}
+                onSearchTextChanged={changeSearchText}
+                onDoSearch={() => search()}
+                placeholder={searchPlaceholder}
+                debounceDuration={
+                  terria.catalogReferencesLoaded &&
+                  searchState.catalogSearchProvider
+                    ? (searchState.catalogSearchProvider as any)
+                        .debounceDurationOnceLoaded
+                    : DEBOUNCE_INTERVAL
+                }
+              />
+            )}
+            <DataCatalog
+              terria={terria}
+              viewState={viewState}
+              onActionButtonClicked={props.onActionButtonClicked}
+              items={props.items}
+            />
+          </Box>
+          <Box styledWidth="60%">
+            <DataPreview
+              terria={terria}
+              viewState={viewState}
+              previewed={previewed}
+            />
+          </Box>
+        </Box>
+
+        {showBreadcrumbs && (
+          <Breadcrumbs
+            terria={terria}
+            viewState={viewState}
+            previewed={previewed}
+          />
+        )}
+      </Box>
+    </div>
+  );
+});
+
+export default DataCatalogTab;

test/ReactViews/Search/BreadcrumbsSpec.tsx

@@ -1,15 +1,15 @@
-import { create } from "react-test-renderer";
+import { runInAction } from "mobx";
 import React from "react";
 import { act } from "react-dom/test-utils";
-import Terria from "../../../lib/Models/Terria";
+import { ThemeProvider } from "styled-components";
 import CatalogGroup from "../../../lib/Models/Catalog/CatalogGroup";
+import Terria from "../../../lib/Models/Terria";
 import ViewState from "../../../lib/ReactViewModels/ViewState";
-import Breadcrumbs from "../../../lib/ReactViews/Search/Breadcrumbs";
 import DataCatalogTab from "../../../lib/ReactViews/ExplorerWindow/Tabs/DataCatalogTab";
-import Icon from "../../../lib/Styled/Icon";
-import { ThemeProvider } from "styled-components";
+import Breadcrumbs from "../../../lib/ReactViews/Search/Breadcrumbs";
 import { terriaTheme } from "../../../lib/ReactViews/StandardUserInterface";
-import { runInAction } from "mobx";
+import Icon from "../../../lib/Styled/Icon";
+import { createWithContexts } from "../withContext";
 
 describe("Breadcrumbs", function () {
   let terria: Terria;
@@ -35,9 +35,10 @@ describe("Breadcrumbs", function () {
       await viewState.viewCatalogMember(catalogGroup);
 
       act(() => {
-        testRenderer = create(
+        testRenderer = createWithContexts(
+          viewState,
           <ThemeProvider theme={terriaTheme}>
-            <DataCatalogTab terria={terria} viewState={viewState} />
+            <DataCatalogTab />
           </ThemeProvider>
         );
       });
@@ -59,9 +60,10 @@ describe("Breadcrumbs", function () {
       expect(viewState.userDataPreviewedItem).toBeUndefined();
 
       act(() => {
-        testRenderer = create(
+        testRenderer = createWithContexts(
+          viewState,
           <ThemeProvider theme={terriaTheme}>
-            <DataCatalogTab terria={terria} viewState={viewState} />
+            <DataCatalogTab />
           </ThemeProvider>
         );
       });