diff --git a/src/Explorer/Controls/Header/GalleryHeaderComponent.tsx b/src/Explorer/Controls/Header/GalleryHeaderComponent.tsx index 8d7394721..d3c92865d 100644 --- a/src/Explorer/Controls/Header/GalleryHeaderComponent.tsx +++ b/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 textStyle: React.CSSProperties = { + private static readonly openPortal = () => window.open("https://portal.azure.com", "_blank"); + 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 ( + + {text} + + ); + }; public render(): JSX.Element { return ( @@ -20,36 +41,41 @@ export class GalleryHeaderComponent extends React.Component { verticalAlign="center" > - - {GalleryHeaderComponent.headerText} - + {this.renderHeaderItem( + GalleryHeaderComponent.azureText, + GalleryHeaderComponent.openPortal, + GalleryHeaderComponent.mainHeaderTextProps + )} - {GalleryHeaderComponent.cosmosdbText} + {this.renderHeaderItem( + GalleryHeaderComponent.cosmosdbText, + GalleryHeaderComponent.openDataExplorer, + GalleryHeaderComponent.headerItemTextProps + )} - + - {GalleryHeaderComponent.galleryText} + {this.renderHeaderItem( + GalleryHeaderComponent.galleryText, + GalleryHeaderComponent.openGallery, + GalleryHeaderComponent.headerItemTextProps + )} <> - + {this.renderHeaderItem( + GalleryHeaderComponent.loginText, + GalleryHeaderComponent.openDataExplorer, + GalleryHeaderComponent.headerItemTextProps + )} ); diff --git a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx b/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx index 1ea7049b6..0dc7dfcee 100644 --- a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx +++ b/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 )} - {this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer, { hideInputs: false })} + {this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer, { + hideInputs: this.props.hideInputs + })} {this.state.dialogProps && } diff --git a/src/GalleryViewer/galleryViewer.html b/src/GalleryViewer/galleryViewer.html index ab12ad36a..6395bc43a 100644 --- a/src/GalleryViewer/galleryViewer.html +++ b/src/GalleryViewer/galleryViewer.html @@ -3,8 +3,8 @@ - Gallery Viewer + diff --git a/src/NotebookViewer/NotebookViewer.tsx b/src/NotebookViewer/NotebookViewer.tsx index 85fdf8d7a..880af40ec 100644 --- a/src/NotebookViewer/NotebookViewer.tsx +++ b/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 = ( <>
diff --git a/src/NotebookViewer/notebookViewer.html b/src/NotebookViewer/notebookViewer.html index dd367c7e3..68348ab81 100644 --- a/src/NotebookViewer/notebookViewer.html +++ b/src/NotebookViewer/notebookViewer.html @@ -3,8 +3,8 @@ - Notebook Viewer + diff --git a/src/Utils/GalleryUtils.test.ts b/src/Utils/GalleryUtils.test.ts index 44501210e..efa41b48e 100644 --- a/src/Utils/GalleryUtils.test.ts +++ b/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", () => { diff --git a/src/Utils/GalleryUtils.ts b/src/Utils/GalleryUtils.ts index 1ae1fab08..f2417cf15 100644 --- a/src/Utils/GalleryUtils.ts +++ b/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)) }; }