Bypass Knockout and adapters in GalleryTab (#728)

src/Explorer/Controls/NotebookGallery/GalleryAndNotebookViewerComponentAdapter.tsx

@@ -1,29 +0,0 @@
-import ko from "knockout";
-import * as React from "react";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import {
-  GalleryAndNotebookViewerComponentProps,
-  GalleryAndNotebookViewerComponent,
-} from "./GalleryAndNotebookViewerComponent";
-
-export class GalleryAndNotebookViewerComponentAdapter implements ReactAdapter {
-  private key: string;
-  public parameters: ko.Observable<number>;
-
-  constructor(private props: GalleryAndNotebookViewerComponentProps) {
-    this.reset();
-    this.parameters = ko.observable<number>(Date.now());
-  }
-
-  public renderComponent(): JSX.Element {
-    return <GalleryAndNotebookViewerComponent key={this.key} {...this.props} />;
-  }
-
-  public reset(): void {
-    this.key = `GalleryAndNotebookViewerComponent-${Date.now()}`;
-  }
-
-  public triggerRender(): void {
-    window.requestAnimationFrame(() => this.parameters(Date.now()));
-  }
-}

src/Explorer/Explorer.tsx

@@ -73,7 +73,6 @@ import { UploadItemsPane } from "./Panes/UploadItemsPane/UploadItemsPane";
 import TableListViewModal from "./Tables/DataTable/TableEntityListViewModel";
 import QueryViewModel from "./Tables/QueryBuilder/QueryViewModel";
 import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
-import type { GalleryTabOptions } from "./Tabs/GalleryTab";
 import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
 import QueryTablesTab from "./Tabs/QueryTablesTab";
 import { TabsManager } from "./Tabs/TabsManager";
@@ -1916,8 +1915,25 @@ export default class Explorer {
     const title = "Gallery";
     const hashLocation = "gallery";
     const GalleryTab = await (await import(/* webpackChunkName: "GalleryTab" */ "./Tabs/GalleryTab")).default;
+    const galleryTab = this.tabsManager
+      .getTabs(ViewModels.CollectionTabKind.Gallery)
+      .find((tab) => tab.hashLocation() == hashLocation);
 
-    const galleryTabOptions: GalleryTabOptions = {
+    if (galleryTab instanceof GalleryTab) {
+      this.tabsManager.activateTab(galleryTab);
+    } else {
+      this.tabsManager.activateNewTab(
+        new GalleryTab(
+          {
+            tabKind: ViewModels.CollectionTabKind.Gallery,
+            title: title,
+            tabPath: title,
+            hashLocation: hashLocation,
+            onUpdateTabsButtons: this.onUpdateTabsButtons,
+            onLoadStartKey: null,
+            isTabsContentExpanded: ko.observable(true),
+          },
+          {
             account: userContext.databaseAccount,
             container: this,
             junoClient: this.notebookManager?.junoClient,
@@ -1925,24 +1941,9 @@ export default class Explorer {
             notebookUrl,
             galleryItem,
             isFavorite,
-      tabKind: ViewModels.CollectionTabKind.Gallery,
+          }
-      title: title,
+        )
-      tabPath: title,
+      );
-      hashLocation: hashLocation,
-      onUpdateTabsButtons: this.onUpdateTabsButtons,
-      isTabsContentExpanded: ko.observable(true),
-      onLoadStartKey: null,
-    };
-
-    const galleryTab = this.tabsManager
-      .getTabs(ViewModels.CollectionTabKind.Gallery)
-      .find((tab) => tab.hashLocation() == hashLocation);
-
-    if (galleryTab instanceof GalleryTab) {
-      this.tabsManager.activateTab(galleryTab);
-      galleryTab.reset(galleryTabOptions);
-    } else {
-      this.tabsManager.activateNewTab(new GalleryTab(galleryTabOptions));
     }
   }
 

src/Explorer/Tabs/GalleryTab.tsx

@@ -1,13 +1,14 @@
-import { DatabaseAccount } from "../../Contracts/DataModels";
+import React from "react";
-import * as ViewModels from "../../Contracts/ViewModels";
+import type { DatabaseAccount } from "../../Contracts/DataModels";
-import { IGalleryItem, JunoClient } from "../../Juno/JunoClient";
+import type { TabOptions } from "../../Contracts/ViewModels";
-import { GalleryAndNotebookViewerComponentProps } from "../Controls/NotebookGallery/GalleryAndNotebookViewerComponent";
+import type { IGalleryItem, JunoClient } from "../../Juno/JunoClient";
-import { GalleryAndNotebookViewerComponentAdapter } from "../Controls/NotebookGallery/GalleryAndNotebookViewerComponentAdapter";
+import { GalleryAndNotebookViewerComponent as GalleryViewer } from "../Controls/NotebookGallery/GalleryAndNotebookViewerComponent";
-import { GalleryTab as GalleryViewerTab, SortBy } from "../Controls/NotebookGallery/GalleryViewerComponent";
+import type { GalleryTab as GalleryViewerTab } from "../Controls/NotebookGallery/GalleryViewerComponent";
-import Explorer from "../Explorer";
+import { SortBy } from "../Controls/NotebookGallery/GalleryViewerComponent";
+import type Explorer from "../Explorer";
 import TabsBase from "./TabsBase";
 
-export interface GalleryTabOptions extends ViewModels.TabOptions {
+interface Props {
   account: DatabaseAccount;
   container: Explorer;
   junoClient: JunoClient;
@@ -17,51 +18,16 @@ export interface GalleryTabOptions extends ViewModels.TabOptions {
   isFavorite?: boolean;
 }
 
-/**
- * Notebook gallery tab
- */
 export default class GalleryTab extends TabsBase {
-  public readonly html = '<div style="height: 100%" data-bind="react:galleryAndNotebookViewerComponentAdapter"></div>';
+  constructor(options: TabOptions, private props: Props) {
-  private container: Explorer;
-  private galleryAndNotebookViewerComponentProps: GalleryAndNotebookViewerComponentProps;
-  public galleryAndNotebookViewerComponentAdapter: GalleryAndNotebookViewerComponentAdapter;
-
-  constructor(options: GalleryTabOptions) {
     super(options);
-    this.container = options.container;
-
-    this.galleryAndNotebookViewerComponentProps = {
-      container: options.container,
-      junoClient: options.junoClient,
-      notebookUrl: options.notebookUrl,
-      galleryItem: options.galleryItem,
-      isFavorite: options.isFavorite,
-      selectedTab: options.selectedTab,
-      sortBy: SortBy.MostRecent,
-      searchText: undefined,
-    };
-    this.galleryAndNotebookViewerComponentAdapter = new GalleryAndNotebookViewerComponentAdapter(
-      this.galleryAndNotebookViewerComponentProps
-    );
   }
 
-  public reset(options: GalleryTabOptions) {
+  public render() {
-    this.container = options.container;
+    return <GalleryViewer {...this.props} sortBy={SortBy.MostRecent} searchText={undefined} />;
-
-    this.galleryAndNotebookViewerComponentProps.container = options.container;
-    this.galleryAndNotebookViewerComponentProps.junoClient = options.junoClient;
-    this.galleryAndNotebookViewerComponentProps.notebookUrl = options.notebookUrl;
-    this.galleryAndNotebookViewerComponentProps.galleryItem = options.galleryItem;
-    this.galleryAndNotebookViewerComponentProps.isFavorite = options.isFavorite;
-    this.galleryAndNotebookViewerComponentProps.selectedTab = options.selectedTab;
-    this.galleryAndNotebookViewerComponentProps.sortBy = SortBy.MostViewed;
-    this.galleryAndNotebookViewerComponentProps.searchText = undefined;
-
-    this.galleryAndNotebookViewerComponentAdapter.reset();
-    this.galleryAndNotebookViewerComponentAdapter.triggerRender();
   }
 
   public getContainer(): Explorer {
-    return this.container;
+    return this.props.container;
   }
 }