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/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -1,36 +1,44 @@
 /**
  * Wrapper around Notebook Viewer Read only content
  */
-
+import { Notebook } from "@nteract/commutable";
+import { createContentRef } from "@nteract/core";
+import { Icon, Link } from "office-ui-fabric-react";
 import * as React from "react";
+import { contents } from "rx-jupyter";
+import * as Logger from "../../../Common/Logger";
 import * as ViewModels from "../../../Contracts/ViewModels";
+import { IGalleryItem, JunoClient } from "../../../Juno/JunoClient";
+import * as GalleryUtils from "../../../Utils/GalleryUtils";
+import { NotificationConsoleUtils } from "../../../Utils/NotificationConsoleUtils";
+import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import { NotebookClientV2 } from "../../Notebook/NotebookClientV2";
 import { NotebookComponentBootstrapper } from "../../Notebook/NotebookComponent/NotebookComponentBootstrapper";
-import { createContentRef } from "@nteract/core";
 import NotebookReadOnlyRenderer from "../../Notebook/NotebookRenderer/NotebookReadOnlyRenderer";
-import { contents } from "rx-jupyter";
-import { NotebookMetadata } from "../../../Contracts/DataModels";
+import { DialogComponent, DialogProps } from "../DialogReactComponent/DialogComponent";
 import { NotebookMetadataComponent } from "./NotebookMetadataComponent";
 import "./NotebookViewerComponent.less";
 
 export interface NotebookViewerComponentProps {
-  notebookName: string;
-  notebookUrl: string;
   container?: ViewModels.Explorer;
-  notebookMetadata: NotebookMetadata;
-  onNotebookMetadataChange?: (newNotebookMetadata: NotebookMetadata) => Promise<void>;
-  isLikedNotebook?: boolean;
-  hideInputs?: boolean;
+  junoClient?: JunoClient;
+  notebookUrl: string;
+  galleryItem?: IGalleryItem;
+  isFavorite?: boolean;
+  backNavigationText: string;
+  onBackClick: () => void;
+  onTagClick: (tag: string) => void;
 }
 
 interface NotebookViewerComponentState {
-  content: any;
+  content: Notebook;
+  galleryItem?: IGalleryItem;
+  isFavorite?: boolean;
+  dialogProps: DialogProps;
 }
 
-export class NotebookViewerComponent extends React.Component<
-  NotebookViewerComponentProps,
-  NotebookViewerComponentState
-> {
+export class NotebookViewerComponent extends React.Component<NotebookViewerComponentProps, NotebookViewerComponentState>
+  implements GalleryUtils.DialogEnabledComponent {
   private clientManager: NotebookClientV2;
   private notebookComponentBootstrapper: NotebookComponentBootstrapper;
 
@@ -52,40 +60,118 @@ export class NotebookViewerComponent extends React.Component<
       contentRef: createContentRef()
     });
 
-    this.state = { content: undefined };
+    this.state = {
+      content: undefined,
+      galleryItem: props.galleryItem,
+      isFavorite: props.isFavorite,
+      dialogProps: undefined
+    };
+
+    this.loadNotebookContent();
   }
 
-  private async getJsonNotebookContent(): Promise<any> {
-    const response: Response = await fetch(this.props.notebookUrl);
-    if (response.ok) {
-      return await response.json();
-    } else {
-      return undefined;
+  setDialogProps = (dialogProps: DialogProps): void => {
+    this.setState({ dialogProps });
+  };
+
+  private async loadNotebookContent(): Promise<void> {
+    try {
+      const response = await fetch(this.props.notebookUrl);
+      if (!response.ok) {
+        throw new Error(`Received HTTP ${response.status} while fetching ${this.props.notebookUrl}`);
+      }
+
+      const notebook: Notebook = await response.json();
+      this.notebookComponentBootstrapper.setContent("json", notebook);
+      this.setState({ content: notebook });
+
+      if (this.props.galleryItem) {
+        const response = await this.props.junoClient.increaseNotebookViews(this.props.galleryItem.id);
+        if (!response.data) {
+          throw new Error(`Received HTTP ${response.status} while increasing notebook views`);
+        }
+
+        this.setState({ galleryItem: response.data });
+      }
+    } catch (error) {
+      const message = `Failed to load notebook content: ${error}`;
+      Logger.logError(message, "NotebookViewerComponent/loadNotebookContent");
+      NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, message);
     }
   }
 
-  componentDidMount() {
-    this.getJsonNotebookContent().then((jsonContent: any) => {
-      this.notebookComponentBootstrapper.setContent("json", jsonContent);
-      this.setState({ content: jsonContent });
-    });
-  }
-
   public render(): JSX.Element {
     return (
       <div className="notebookViewerContainer">
-        <NotebookMetadataComponent
-          notebookMetadata={this.props.notebookMetadata}
-          notebookName={this.props.notebookName}
-          container={this.props.container}
-          notebookContent={this.state.content}
-          onNotebookMetadataChange={this.props.onNotebookMetadataChange}
-          isLikedNotebook={this.props.isLikedNotebook}
-        />
-        {this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer, {
-          hideInputs: this.props.hideInputs
-        })}
+        {this.props.backNavigationText ? (
+          <Link onClick={this.props.onBackClick}>
+            <Icon iconName="Back" /> {this.props.backNavigationText}
+          </Link>
+        ) : (
+          <></>
+        )}
+
+        {this.state.galleryItem ? (
+          <div style={{ margin: 10 }}>
+            <NotebookMetadataComponent
+              data={this.state.galleryItem}
+              isFavorite={this.state.isFavorite}
+              downloadButtonText={
+                this.props.container ? "Download to my notebooks" : "Edit/Run in Cosmos DB data explorer"
+              }
+              onTagClick={this.props.onTagClick}
+              onFavoriteClick={this.favoriteItem}
+              onUnfavoriteClick={this.unfavoriteItem}
+              onDownloadClick={this.downloadItem}
+            />
+          </div>
+        ) : (
+          <></>
+        )}
+
+        {this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer, { hideInputs: true })}
+
+        {this.state.dialogProps && <DialogComponent {...this.state.dialogProps} />}
       </div>
     );
   }
+
+  public static getDerivedStateFromProps(
+    props: NotebookViewerComponentProps,
+    state: NotebookViewerComponentState
+  ): Partial<NotebookViewerComponentState> {
+    let galleryItem = props.galleryItem;
+    let isFavorite = props.isFavorite;
+
+    if (state.galleryItem !== undefined) {
+      galleryItem = state.galleryItem;
+    }
+
+    if (state.isFavorite !== undefined) {
+      isFavorite = state.isFavorite;
+    }
+
+    return {
+      galleryItem,
+      isFavorite
+    };
+  }
+
+  private favoriteItem = async (): Promise<void> => {
+    GalleryUtils.favoriteItem(this.props.container, this.props.junoClient, this.state.galleryItem, item =>
+      this.setState({ galleryItem: item, isFavorite: true })
+    );
+  };
+
+  private unfavoriteItem = async (): Promise<void> => {
+    GalleryUtils.unfavoriteItem(this.props.container, this.props.junoClient, this.state.galleryItem, item =>
+      this.setState({ galleryItem: item, isFavorite: false })
+    );
+  };
+
+  private downloadItem = async (): Promise<void> => {
+    GalleryUtils.downloadItem(this, this.props.container, this.props.junoClient, this.state.galleryItem, item =>
+      this.setState({ galleryItem: item })
+    );
+  };
 }