Updates to standalone gallery (#91)

* Add hyperlink icon for links in DialogComponent

* Use a Cosmos DB image for sample Persona

* Fix tests

* Update standalone gallery behavior to match DE gallery

* Use /gallery endpoint for gallery

* Update Gallery Card style to remove buttons in standalone mode

* Address comments

* Add text banner

src/Explorer/Tabs/GalleryTab.html

@@ -1 +1 @@
-<div style="height: 100%" data-bind="react:galleryComponentAdapter, setTemplateReady: true"></div>
+<div style="height: 100%" data-bind="react:galleryAndNotebookViewerComponentAdapter, setTemplateReady: true"></div>

src/Explorer/Tabs/GalleryTab.tsx

@@ -1,129 +1,21 @@
-import * as ko from "knockout";
-import * as React from "react";
-import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
 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 { GalleryAndNotebookViewerComponentProps } from "../Controls/NotebookGallery/GalleryAndNotebookViewerComponent";
+import { GalleryAndNotebookViewerComponentAdapter } from "../Controls/NotebookGallery/GalleryAndNotebookViewerComponentAdapter";
+import { GalleryTab as GalleryViewerTab, SortBy } from "../Controls/NotebookGallery/GalleryViewerComponent";
 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.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 {
-    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;
+  public galleryAndNotebookViewerComponentAdapter: GalleryAndNotebookViewerComponentAdapter;
 
   constructor(options: ViewModels.GalleryTabOptions) {
     super(options);
 
     this.container = options.container;
-    this.galleryComponentAdapterProps = {
+    const props: GalleryAndNotebookViewerComponentProps = {
       container: options.container,
       junoClient: options.junoClient,
       notebookUrl: options.notebookUrl,
@@ -134,18 +26,10 @@ export default class GalleryTab extends TabsBase implements ViewModels.Tab {
       searchText: undefined
     };
 
-    this.galleryComponentAdapter = new GalleryComponentAdapter(this.galleryComponentAdapterProps);
+    this.galleryAndNotebookViewerComponentAdapter = new GalleryAndNotebookViewerComponentAdapter(props);
   }
 
   protected getContainer(): ViewModels.Explorer {
     return this.container;
   }
-
-  public updateGalleryParams(notebookUrl?: string, galleryItem?: IGalleryItem, isFavorite?: boolean): void {
-    this.galleryComponentAdapter.setState({
-      notebookUrl,
-      galleryItem,
-      isFavorite
-    });
-  }
 }