Add top bar in standalone gallery and notebook viewer (#76)

* Add top bar in standalone gallery

* Address review comments

.eslintignore

@@ -411,7 +411,6 @@ src/Explorer/Tabs/NotebookViewerTab.tsx
 src/Explorer/Tabs/TerminalTab.tsx
 src/Explorer/Tree/ResourceTreeAdapter.tsx
 src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx
-src/GalleryViewer/Cards/CardStyleConstants.tsx
 src/GalleryViewer/Cards/GalleryCardComponent.tsx
 src/GalleryViewer/GalleryViewer.tsx
 src/GalleryViewer/GalleryViewerComponent.tsx

src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx

@@ -31,6 +31,8 @@ export interface DialogProps {
   onSecondaryButtonClick: () => void;
   primaryButtonDisabled?: boolean;
   type?: DialogType;
+  showCloseButton?: boolean;
+  onDismiss?: () => void;
 }
 
 const DIALOG_MIN_WIDTH = "400px";
@@ -55,7 +57,8 @@ export class DialogComponent extends React.Component<DialogProps, {}> {
           title: { fontSize: DIALOG_TITLE_FONT_SIZE, fontWeight: DIALOG_TITLE_FONT_WEIGHT },
           subText: { fontSize: DIALOG_SUBTEXT_FONT_SIZE }
         },
-        showCloseButton: false
+        showCloseButton: this.props.showCloseButton || false,
+        onDismiss: this.props.onDismiss
       },
       modalProps: { isBlocking: this.props.isModal },
       minWidth: DIALOG_MIN_WIDTH,

src/Explorer/Controls/Header/GalleryHeaderComponent.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Stack, Text, Separator, FontIcon, CommandButton, FontWeights } from "office-ui-fabric-react";
+
+export class GalleryHeaderComponent extends React.Component {
+  private static readonly headerText = "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 textStyle: React.CSSProperties = {
+    color: "white"
+  };
+
+  public render(): JSX.Element {
+    return (
+      <Stack
+        tokens={{ childrenGap: 10 }}
+        horizontal
+        styles={{ root: { background: "#0078d4", paddingLeft: 20, paddingRight: 20 } }}
+        verticalAlign="center"
+      >
+        <Stack.Item>
+          <Text
+            style={GalleryHeaderComponent.textStyle}
+            variant="mediumPlus"
+            styles={{ root: { fontWeight: FontWeights.semibold } }}
+          >
+            {GalleryHeaderComponent.headerText}
+          </Text>
+        </Stack.Item>
+        <Stack.Item>
+          <Separator vertical />
+        </Stack.Item>
+        <Stack.Item>
+          <Text style={GalleryHeaderComponent.textStyle}>{GalleryHeaderComponent.cosmosdbText}</Text>
+        </Stack.Item>
+        <Stack.Item>
+          <FontIcon style={GalleryHeaderComponent.textStyle} iconName="ChevronRight" />
+        </Stack.Item>
+        <Stack.Item>
+          <Text style={GalleryHeaderComponent.textStyle}>{GalleryHeaderComponent.galleryText}</Text>
+        </Stack.Item>
+        <Stack.Item grow>
+          <></>
+        </Stack.Item>
+        <Stack.Item>
+          <CommandButton
+            style={GalleryHeaderComponent.textStyle}
+            text={GalleryHeaderComponent.loginText}
+            ariaLabel={GalleryHeaderComponent.loginText}
+            onClick={GalleryHeaderComponent.loginOnClick}
+          />
+        </Stack.Item>
+      </Stack>
+    );
+  }
+}

src/Explorer/Controls/NotebookGallery/Cards/CardStyleConstants.tsx

@@ -1,72 +0,0 @@
-import { FontWeights } from "@uifabric/styling";
-import { IIconStyles, ITextStyles } from "office-ui-fabric-react";
-
-export const siteTextStyles: ITextStyles = {
-  root: {
-    color: "#025F52",
-    fontWeight: FontWeights.semibold
-  }
-};
-
-export const descriptionTextStyles: ITextStyles = {
-  root: {
-    color: "#333333",
-    fontWeight: FontWeights.semibold
-  }
-};
-
-export const subtleHelpfulTextStyles: ITextStyles = {
-  root: {
-    color: "#ccc",
-    fontWeight: FontWeights.regular
-  }
-};
-
-export const iconButtonStyles: IIconStyles = {
-  root: {
-    marginLeft: "10px",
-    color: "#0078D4",
-    backgroundColor: "#FFF",
-    fontSize: 16,
-    fontWeight: FontWeights.regular,
-    display: "inline-block",
-    selectors: {
-      ":hover .ms-Button-icon": {
-        color: "#ccc"
-      }
-    }
-  }
-};
-
-export const iconStyles: IIconStyles = {
-  root: {
-    marginLeft: "10px",
-    color: "#0078D4",
-    backgroundColor: "#FFF",
-    fontSize: 16,
-    fontWeight: FontWeights.regular,
-    display: "inline-block"
-  }
-};
-
-export const mainHelpfulTextStyles: ITextStyles = {
-  root: {
-    color: "#000",
-    fontWeight: FontWeights.regular
-  }
-};
-
-export const subtleIconStyles: IIconStyles = {
-  root: {
-    color: "#ddd",
-    fontSize: 12,
-    fontWeight: FontWeights.regular
-  }
-};
-
-export const helpfulTextStyles: ITextStyles = {
-  root: {
-    color: "#333333",
-    fontWeight: FontWeights.regular
-  }
-};

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.less

@@ -6,21 +6,3 @@
   width: 100%;
   overflow-y: auto;
 }
-
-.downloadButton {
-    background-color: #0078D4;
-    color: @BaseLight;
-    cursor: pointer;
-    padding: 5px;
-    border: none;
-    text-align: left;
-    outline: none;
-    font-size: @mediumFontSize;
-    border-radius: 5px;
-    display: "inline-block";
-    margin: 10px;
-}
-
-.active, .downloadButton:hover {
-  color: @BaseMedium;
-}

src/GalleryViewer/GalleryViewer.tsx

@@ -11,6 +11,7 @@ import {
 } from "../Explorer/Controls/NotebookGallery/GalleryViewerComponent";
 import { JunoClient } from "../Juno/JunoClient";
 import * as GalleryUtils from "../Utils/GalleryUtils";
+import { GalleryHeaderComponent } from "../Explorer/Controls/Header/GalleryHeaderComponent";
 
 const onInit = async () => {
   initializeIcons();
@@ -27,7 +28,18 @@ const onInit = async () => {
     onSearchTextChange: undefined
   };
 
-  ReactDOM.render(<GalleryViewerComponent {...props} />, document.getElementById("galleryContent"));
+  const element = (
+    <>
+      <header>
+        <GalleryHeaderComponent />
+      </header>
+      <div style={{ marginLeft: 138, marginRight: 138 }}>
+        <GalleryViewerComponent {...props} />
+      </div>
+    </>
+  );
+
+  ReactDOM.render(element, document.getElementById("galleryContent"));
 };
 
 // Entry point

src/NotebookViewer/NotebookViewer.less

@@ -1,11 +0,0 @@
-@import "../../../../less/Common/Constants";
-
-.notebookComponentContainer {
-    height: 100vh;
-    width: 100vw;
-    margin: 0px;
-    overflow-x: hidden;
-    font-family: @DataExplorerFont;
-    padding: 20px;
-}
-

src/NotebookViewer/NotebookViewer.tsx

@@ -9,6 +9,7 @@ import {
 } from "../Explorer/Controls/NotebookViewer/NotebookViewerComponent";
 import { IGalleryItem, JunoClient } from "../Juno/JunoClient";
 import * as GalleryUtils from "../Utils/GalleryUtils";
+import { GalleryHeaderComponent } from "../Explorer/Controls/Header/GalleryHeaderComponent";
 
 const onInit = async () => {
   initializeIcons();
@@ -38,7 +39,18 @@ const render = (notebookUrl: string, backNavigationText: string, galleryItem?: I
     onTagClick: undefined
   };
 
-  ReactDOM.render(<NotebookViewerComponent {...props} />, document.getElementById("notebookContent"));
+  const element = (
+    <>
+      <header>
+        <GalleryHeaderComponent />
+      </header>
+      <div style={{ marginLeft: 120, marginRight: 120 }}>
+        <NotebookViewerComponent {...props} />
+      </div>
+    </>
+  );
+
+  ReactDOM.render(element, document.getElementById("notebookContent"));
 };
 
 // Entry point

src/Utils/GalleryUtils.ts

@@ -41,6 +41,7 @@ function showOkCancelModalDialog(
   title: string,
   msg: string,
   linkProps: LinkProps,
+  showCloseButton: boolean,
   okLabel: string,
   onOk: () => void,
   cancelLabel: string,
@@ -61,7 +62,9 @@ function showOkCancelModalDialog(
     onSecondaryButtonClick: () => {
       component.setDialogProps(undefined);
       onCancel && onCancel();
-    }
+    },
+    showCloseButton,
+    onDismiss: () => component.setDialogProps(undefined)
   });
 }
 
@@ -121,6 +124,7 @@ export function downloadItem(
         linkText: "Learn more about Cosmos DB",
         linkUrl: "https://azure.microsoft.com/en-us/services/cosmos-db"
       },
+      true,
       "Open data explorer",
       () => {
         window.open("https://cosmos.azure.com");