Notebooks Gallery (#59)

* Initial commit

* Address PR comments

* Move notebook related stuff to NotebookManager and dynamically load it

* Add New gallery callout and other UI tweaks

* Update test snapshot

src/Explorer/Tabs/GalleryTab.tsx

@@ -1,45 +1,151 @@
 import * as ko from "knockout";
-import * as ViewModels from "../../Contracts/ViewModels";
-import TabsBase from "./TabsBase";
 import * as React from "react";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
-import { GalleryViewerContainerComponent } from "../Controls/NotebookGallery/GalleryViewerComponent";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { IGalleryItem, JunoClient } from "../../Juno/JunoClient";
+import * as GalleryUtils from "../../Utils/GalleryUtils";
+import {
+  GalleryTab as GalleryViewerTab,
+  GalleryViewerComponent,
+  GalleryViewerComponentProps,
+  SortBy
+} from "../Controls/NotebookGallery/GalleryViewerComponent";
+import {
+  NotebookViewerComponent,
+  NotebookViewerComponentProps
+} from "../Controls/NotebookViewer/NotebookViewerComponent";
+import TabsBase from "./TabsBase";
 
 /**
  * Notebook gallery tab
  */
+interface GalleryComponentAdapterProps {
+  container: ViewModels.Explorer;
+  junoClient: JunoClient;
+  notebookUrl: string;
+  galleryItem: IGalleryItem;
+  isFavorite: boolean;
+  selectedTab: GalleryViewerTab;
+  sortBy: SortBy;
+  searchText: string;
+}
+
+interface GalleryComponentAdapterState {
+  notebookUrl: string;
+  galleryItem: IGalleryItem;
+  isFavorite: boolean;
+  selectedTab: GalleryViewerTab;
+  sortBy: SortBy;
+  searchText: string;
+}
+
 class GalleryComponentAdapter implements ReactAdapter {
-  public parameters: ko.Computed<boolean>;
-  constructor(private getContainer: () => ViewModels.Explorer) {}
+  public parameters: ko.Observable<number>;
+  private state: GalleryComponentAdapterState;
+
+  constructor(private props: GalleryComponentAdapterProps) {
+    this.parameters = ko.observable<number>(Date.now());
+    this.state = {
+      notebookUrl: props.notebookUrl,
+      galleryItem: props.galleryItem,
+      isFavorite: props.isFavorite,
+      selectedTab: props.selectedTab,
+      sortBy: props.sortBy,
+      searchText: props.searchText
+    };
+  }
 
   public renderComponent(): JSX.Element {
-    return this.parameters() ? <GalleryViewerContainerComponent container={this.getContainer()} /> : <></>;
+    if (this.state.notebookUrl) {
+      const props: NotebookViewerComponentProps = {
+        container: this.props.container,
+        junoClient: this.props.junoClient,
+        notebookUrl: this.state.notebookUrl,
+        galleryItem: this.state.galleryItem,
+        isFavorite: this.state.isFavorite,
+        backNavigationText: GalleryUtils.getTabTitle(this.state.selectedTab),
+        onBackClick: this.onBackClick,
+        onTagClick: this.loadTaggedItems
+      };
+
+      return <NotebookViewerComponent {...props} />;
+    }
+
+    const props: GalleryViewerComponentProps = {
+      container: this.props.container,
+      junoClient: this.props.junoClient,
+      selectedTab: this.state.selectedTab,
+      sortBy: this.state.sortBy,
+      searchText: this.state.searchText,
+      onSelectedTabChange: this.onSelectedTabChange,
+      onSortByChange: this.onSortByChange,
+      onSearchTextChange: this.onSearchTextChange
+    };
+
+    return <GalleryViewerComponent {...props} />;
   }
+
+  public setState(state: Partial<GalleryComponentAdapterState>): void {
+    this.state = Object.assign(this.state, state);
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
+  }
+
+  private onBackClick = (): void => {
+    this.props.container.openGallery();
+  };
+
+  private loadTaggedItems = (tag: string): void => {
+    this.setState({
+      notebookUrl: undefined,
+      searchText: tag
+    });
+  };
+
+  private onSelectedTabChange = (selectedTab: GalleryViewerTab): void => {
+    this.state.selectedTab = selectedTab;
+  };
+
+  private onSortByChange = (sortBy: SortBy): void => {
+    this.state.sortBy = sortBy;
+  };
+
+  private onSearchTextChange = (searchText: string): void => {
+    this.state.searchText = searchText;
+  };
 }
 
 export default class GalleryTab extends TabsBase implements ViewModels.Tab {
   private container: ViewModels.Explorer;
+  private galleryComponentAdapterProps: GalleryComponentAdapterProps;
   private galleryComponentAdapter: GalleryComponentAdapter;
 
   constructor(options: ViewModels.GalleryTabOptions) {
     super(options);
-    this.container = options.container;
-    this.galleryComponentAdapter = new GalleryComponentAdapter(() => this.getContainer());
 
-    this.galleryComponentAdapter.parameters = ko.computed<boolean>(() => {
-      return this.isTemplateReady() && this.container.isNotebookEnabled();
-    });
+    this.container = options.container;
+    this.galleryComponentAdapterProps = {
+      container: options.container,
+      junoClient: options.junoClient,
+      notebookUrl: options.notebookUrl,
+      galleryItem: options.galleryItem,
+      isFavorite: options.isFavorite,
+      selectedTab: GalleryViewerTab.OfficialSamples,
+      sortBy: SortBy.MostViewed,
+      searchText: undefined
+    };
+
+    this.galleryComponentAdapter = new GalleryComponentAdapter(this.galleryComponentAdapterProps);
   }
 
   protected getContainer(): ViewModels.Explorer {
     return this.container;
   }
 
-  protected getTabsButtons(): ViewModels.NavbarButtonConfig[] {
-    return [];
-  }
-
-  protected buildCommandBarOptions(): void {
-    this.updateNavbarWithTabsButtons();
+  public updateGalleryParams(notebookUrl?: string, galleryItem?: IGalleryItem, isFavorite?: boolean): void {
+    this.galleryComponentAdapter.setState({
+      notebookUrl,
+      galleryItem,
+      isFavorite
+    });
   }
 }