Add hideInputs query param in notebookViewer and other minor updates (#82)

* Add hideInputs query param in notebookViewer

* Fix test and other minor changes

* Make GalleryHeaderComponent more functional

src/Explorer/Controls/Header/GalleryHeaderComponent.tsx

@@ -1,15 +1,36 @@
 import * as React from "react";
-import { Stack, Text, Separator, FontIcon, CommandButton, FontWeights } from "office-ui-fabric-react";
+import { Stack, Text, Separator, FontIcon, CommandButton, FontWeights, ITextProps } from "office-ui-fabric-react";
 
 export class GalleryHeaderComponent extends React.Component {
-  private static readonly headerText = "Microsoft Azure";
+  private static readonly azureText = "Microsoft Azure";
   private static readonly cosmosdbText = "Cosmos DB";
   private static readonly galleryText = "Gallery";
   private static readonly loginText = "Log in";
-  private static readonly loginOnClick = () => (window.location.href = new URL("./", window.location.href).href);
+  private static readonly openPortal = () => window.open("https://portal.azure.com", "_blank");
-  private static readonly textStyle: React.CSSProperties = {
+  private static readonly openDataExplorer = () => (window.location.href = new URL("./", window.location.href).href);
+  private static readonly openGallery = () =>
+    (window.location.href = new URL("./galleryViewer.html", window.location.href).href);
+  private static readonly headerItemStyle: React.CSSProperties = {
     color: "white"
   };
+  private static readonly mainHeaderTextProps: ITextProps = {
+    style: GalleryHeaderComponent.headerItemStyle,
+    variant: "mediumPlus",
+    styles: {
+      root: {
+        fontWeight: FontWeights.semibold
+      }
+    }
+  };
+  private static readonly headerItemTextProps: ITextProps = { style: GalleryHeaderComponent.headerItemStyle };
+
+  private renderHeaderItem = (text: string, onClick: () => void, textProps: ITextProps): JSX.Element => {
+    return (
+      <CommandButton onClick={onClick} ariaLabel={text}>
+        <Text {...textProps}>{text}</Text>
+      </CommandButton>
+    );
+  };
 
   public render(): JSX.Element {
     return (
@@ -20,36 +41,41 @@ export class GalleryHeaderComponent extends React.Component {
         verticalAlign="center"
       >
         <Stack.Item>
-          <Text
+          {this.renderHeaderItem(
-            style={GalleryHeaderComponent.textStyle}
+            GalleryHeaderComponent.azureText,
-            variant="mediumPlus"
+            GalleryHeaderComponent.openPortal,
-            styles={{ root: { fontWeight: FontWeights.semibold } }}
+            GalleryHeaderComponent.mainHeaderTextProps
-          >
+          )}
-            {GalleryHeaderComponent.headerText}
-          </Text>
         </Stack.Item>
         <Stack.Item>
           <Separator vertical />
         </Stack.Item>
         <Stack.Item>
-          <Text style={GalleryHeaderComponent.textStyle}>{GalleryHeaderComponent.cosmosdbText}</Text>
+          {this.renderHeaderItem(
+            GalleryHeaderComponent.cosmosdbText,
+            GalleryHeaderComponent.openDataExplorer,
+            GalleryHeaderComponent.headerItemTextProps
+          )}
         </Stack.Item>
         <Stack.Item>
-          <FontIcon style={GalleryHeaderComponent.textStyle} iconName="ChevronRight" />
+          <FontIcon style={GalleryHeaderComponent.headerItemStyle} iconName="ChevronRight" />
         </Stack.Item>
         <Stack.Item>
-          <Text style={GalleryHeaderComponent.textStyle}>{GalleryHeaderComponent.galleryText}</Text>
+          {this.renderHeaderItem(
+            GalleryHeaderComponent.galleryText,
+            GalleryHeaderComponent.openGallery,
+            GalleryHeaderComponent.headerItemTextProps
+          )}
         </Stack.Item>
         <Stack.Item grow>
           <></>
         </Stack.Item>
         <Stack.Item>
-          <CommandButton
+          {this.renderHeaderItem(
-            style={GalleryHeaderComponent.textStyle}
+            GalleryHeaderComponent.loginText,
-            text={GalleryHeaderComponent.loginText}
+            GalleryHeaderComponent.openDataExplorer,
-            ariaLabel={GalleryHeaderComponent.loginText}
+            GalleryHeaderComponent.headerItemTextProps
-            onClick={GalleryHeaderComponent.loginOnClick}
+          )}
-          />
         </Stack.Item>
       </Stack>
     );

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -26,6 +26,7 @@ export interface NotebookViewerComponentProps {
   galleryItem?: IGalleryItem;
   isFavorite?: boolean;
   backNavigationText: string;
+  hideInputs?: boolean;
   onBackClick: () => void;
   onTagClick: (tag: string) => void;
 }
@@ -129,7 +130,9 @@ export class NotebookViewerComponent extends React.Component<NotebookViewerCompo
           <></>
         )}
 
-        {this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer, { hideInputs: false })}
+        {this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer, {
+          hideInputs: this.props.hideInputs
+        })}
 
         {this.state.dialogProps && <DialogComponent {...this.state.dialogProps} />}
       </div>

src/GalleryViewer/galleryViewer.html

@@ -3,8 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
-
     <title>Gallery Viewer</title>
+    <link rel="shortcut icon" href="images/CosmosDB_rgb_ui_lighttheme.ico" type="image/x-icon" />
   </head>
 
   <body>

src/NotebookViewer/NotebookViewer.tsx

@@ -10,6 +10,7 @@ import {
 import { IGalleryItem, JunoClient } from "../Juno/JunoClient";
 import * as GalleryUtils from "../Utils/GalleryUtils";
 import { GalleryHeaderComponent } from "../Explorer/Controls/Header/GalleryHeaderComponent";
+import { FileSystemUtil } from "../Explorer/Notebook/FileSystemUtil";
 
 const onInit = async () => {
   initializeIcons();
@@ -17,28 +18,34 @@ const onInit = async () => {
   const galleryViewerProps = GalleryUtils.getGalleryViewerProps(window.location.search);
   const notebookViewerProps = GalleryUtils.getNotebookViewerProps(window.location.search);
   const backNavigationText = galleryViewerProps.selectedTab && GalleryUtils.getTabTitle(galleryViewerProps.selectedTab);
+  const hideInputs = notebookViewerProps.hideInputs;
 
   const notebookUrl = decodeURIComponent(notebookViewerProps.notebookUrl);
-  render(notebookUrl, backNavigationText);
+  render(notebookUrl, backNavigationText, hideInputs);
 
   const galleryItemId = notebookViewerProps.galleryItemId;
   if (galleryItemId) {
     const junoClient = new JunoClient();
     const notebook = await junoClient.getNotebook(galleryItemId);
-    render(notebookUrl, backNavigationText, notebook.data);
+    render(notebookUrl, backNavigationText, hideInputs, notebook.data);
   }
 };
 
-const render = (notebookUrl: string, backNavigationText: string, galleryItem?: IGalleryItem) => {
+const render = (notebookUrl: string, backNavigationText: string, hideInputs: boolean, galleryItem?: IGalleryItem) => {
   const props: NotebookViewerComponentProps = {
     junoClient: galleryItem ? new JunoClient() : undefined,
     notebookUrl,
     galleryItem,
     backNavigationText,
+    hideInputs,
     onBackClick: undefined,
     onTagClick: undefined
   };
 
+  if (galleryItem) {
+    document.title = FileSystemUtil.stripExtension(galleryItem.name, "ipynb");
+  }
+
   const element = (
     <>
       <header>

src/NotebookViewer/notebookViewer.html

@@ -3,8 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
-
     <title>Notebook Viewer</title>
+    <link rel="shortcut icon" href="images/CosmosDB_rgb_ui_lighttheme.ico" type="image/x-icon" />
   </head>
 
   <body>

src/Utils/GalleryUtils.test.ts

@@ -93,21 +93,23 @@ describe("GalleryUtils", () => {
       selectedTab,
       sortBy,
       searchText: decodeURIComponent(searchText)
-    });
+    } as GalleryUtils.GalleryViewerProps);
   });
 
   it("getNotebookViewerProps gets notebook viewer props correctly", () => {
     const notebookUrl = "https%3A%2F%2Fnotebook.url";
     const galleryItemId = "1234-abcd-efgh";
+    const hideInputs = "true";
 
     const response = GalleryUtils.getNotebookViewerProps(
-      `?${GalleryUtils.NotebookViewerParams.NotebookUrl}=${notebookUrl}&${GalleryUtils.NotebookViewerParams.GalleryItemId}=${galleryItemId}`
+      `?${GalleryUtils.NotebookViewerParams.NotebookUrl}=${notebookUrl}&${GalleryUtils.NotebookViewerParams.GalleryItemId}=${galleryItemId}&${GalleryUtils.NotebookViewerParams.HideInputs}=${hideInputs}`
     );
 
     expect(response).toEqual({
       notebookUrl: decodeURIComponent(notebookUrl),
-      galleryItemId
+      galleryItemId,
-    });
+      hideInputs: true
+    } as GalleryUtils.NotebookViewerProps);
   });
 
   it("getTabTitle returns correct title for official samples", () => {

src/Utils/GalleryUtils.ts

@@ -16,12 +16,14 @@ export interface DialogEnabledComponent {
 
 export enum NotebookViewerParams {
   NotebookUrl = "notebookUrl",
-  GalleryItemId = "galleryItemId"
+  GalleryItemId = "galleryItemId",
+  HideInputs = "hideInputs"
 }
 
 export interface NotebookViewerProps {
   notebookUrl: string;
   galleryItemId: string;
+  hideInputs: boolean;
 }
 
 export enum GalleryViewerParams {
@@ -244,7 +246,8 @@ export function getNotebookViewerProps(search: string): NotebookViewerProps {
   const params = new URLSearchParams(search);
   return {
     notebookUrl: params.get(NotebookViewerParams.NotebookUrl),
-    galleryItemId: params.get(NotebookViewerParams.GalleryItemId)
+    galleryItemId: params.get(NotebookViewerParams.GalleryItemId),
+    hideInputs: JSON.parse(params.get(NotebookViewerParams.HideInputs))
   };
 }