From 26c832437b544165c4c5d0b23d42e82f66a0ffa6 Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Fri, 18 Sep 2020 16:25:09 +0200
Subject: [PATCH] Support showing only notebook output scenario (#177)

* Enable hiding prompt when hiding inputs (so that only output is showing)

* Fix format

* Rename variable

* Use nteract prompt instead of copying source
---
 .../NotebookViewerComponent.tsx               |  4 ++-
 .../NotebookReadOnlyRenderer.tsx              | 26 +++++++++++++++++++
 src/NotebookViewer/NotebookViewer.tsx         | 11 ++++++--
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx b/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
index d32d4186b..14dfce194 100644
--- a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
@@ -30,6 +30,7 @@ export interface NotebookViewerComponentProps {
   isFavorite?: boolean;
   backNavigationText: string;
   hideInputs?: boolean;
+  hidePrompts?: boolean;
   onBackClick: () => void;
   onTagClick: (tag: string) => void;
 }
@@ -148,7 +149,8 @@ export class NotebookViewerComponent extends React.Component<
         {this.state.showProgressBar && <ProgressIndicator />}
 
         {this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer, {
-          hideInputs: this.props.hideInputs
+          hideInputs: this.props.hideInputs,
+          hidePrompts: this.props.hidePrompts
         })}
 
         {this.state.dialogProps && <DialogComponent {...this.state.dialogProps} />}
diff --git a/src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx b/src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx
index 55aef97f9..b8eeb92d4 100644
--- a/src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx
@@ -3,6 +3,7 @@ import "./base.css";
 import "./default.css";
 
 import { CodeCell, RawCell, Cells, MarkdownCell } from "@nteract/stateful-components";
+import Prompt, { PassedPromptProps } from "@nteract/stateful-components/lib/inputs/prompt";
 import { AzureTheme } from "./AzureTheme";
 
 import { connect } from "react-redux";
@@ -15,6 +16,7 @@ import "./NotebookReadOnlyRenderer.less";
 export interface NotebookRendererProps {
   contentRef: any;
   hideInputs?: boolean;
+  hidePrompts?: boolean;
 }
 
 interface PassedEditorProps {
@@ -38,6 +40,29 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
     loadTransform(this.props as any);
   }
 
+  private renderPrompt(id: string, contentRef: string): JSX.Element {
+    if (this.props.hidePrompts) {
+      return <></>;
+    }
+
+    return (
+      <Prompt id={id} contentRef={contentRef}>
+        {(props: PassedPromptProps) => {
+          if (props.status === "busy") {
+            return <React.Fragment>{"[*]"}</React.Fragment>;
+          }
+          if (props.status === "queued") {
+            return <React.Fragment>{"[…]"}</React.Fragment>;
+          }
+          if (typeof props.executionCount === "number") {
+            return <React.Fragment>{`[${props.executionCount}]`}</React.Fragment>;
+          }
+          return <React.Fragment>{"[ ]"}</React.Fragment>;
+        }}
+      </Prompt>
+    );
+  }
+
   render(): JSX.Element {
     return (
       <div className="NotebookReadOnlyRender">
@@ -46,6 +71,7 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
             code: ({ id, contentRef }: { id: any; contentRef: ContentRef }) => (
               <CodeCell id={id} contentRef={contentRef}>
                 {{
+                  prompt: (props: { id: string; contentRef: string }) => this.renderPrompt(props.id, props.contentRef),
                   editor: {
                     codemirror: (props: PassedEditorProps) =>
                       this.props.hideInputs ? <></> : <CodeMirrorEditor {...props} readOnly={"nocursor"} />
diff --git a/src/NotebookViewer/NotebookViewer.tsx b/src/NotebookViewer/NotebookViewer.tsx
index 17484b893..e9fca19bb 100644
--- a/src/NotebookViewer/NotebookViewer.tsx
+++ b/src/NotebookViewer/NotebookViewer.tsx
@@ -35,13 +35,19 @@ const onInit = async () => {
     const galleryItemJunoResponse = await junoClient.getNotebookInfo(galleryItemId);
     galleryItem = galleryItemJunoResponse.data;
   }
-  render(notebookUrl, backNavigationText, hideInputs, galleryItem, onBackClick);
+
+  // The main purpose of hiding the prompt is to hide everything when hiding inputs.
+  // It is generally not very useful to just hide the prompt.
+  const hidePrompts = hideInputs;
+
+  render(notebookUrl, backNavigationText, hideInputs, hidePrompts, galleryItem, onBackClick);
 };
 
 const render = (
   notebookUrl: string,
   backNavigationText: string,
-  hideInputs: boolean,
+  hideInputs?: boolean,
+  hidePrompts?: boolean,
   galleryItem?: IGalleryItem,
   onBackClick?: () => void
 ) => {
@@ -51,6 +57,7 @@ const render = (
     galleryItem,
     backNavigationText,
     hideInputs,
+    hidePrompts,
     onBackClick: onBackClick,
     onTagClick: undefined
   };