merge master and resolve code conflict

src/Explorer/Notebook/NotebookContainerClient.ts

@@ -5,6 +5,7 @@ import * as Constants from "../../Common/Constants";
 import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 import * as Logger from "../../Common/Logger";
 import * as DataModels from "../../Contracts/DataModels";
+import { userContext } from "../../UserContext";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 
 export class NotebookContainerClient {
@@ -130,14 +131,15 @@ export class NotebookContainerClient {
 
   private async recreateNotebookWorkspaceAsync(): Promise<void> {
     const explorer = window.dataExplorer;
-    if (!explorer || !explorer.databaseAccount() || !explorer.databaseAccount().id) {
+    const { databaseAccount } = userContext;
+    if (!databaseAccount?.id) {
       throw new Error("DataExplorer not initialized");
     }
 
     const notebookWorkspaceManager = explorer.notebookWorkspaceManager;
     try {
-      await notebookWorkspaceManager.deleteNotebookWorkspaceAsync(explorer.databaseAccount().id, "default");
-      await notebookWorkspaceManager.createNotebookWorkspaceAsync(explorer.databaseAccount().id, "default");
+      await notebookWorkspaceManager.deleteNotebookWorkspaceAsync(databaseAccount?.id, "default");
+      await notebookWorkspaceManager.createNotebookWorkspaceAsync(databaseAccount?.id, "default");
     } catch (error) {
       Logger.logError(getErrorMessage(error), "NotebookContainerClient/recreateNotebookWorkspaceAsync");
       return Promise.reject(error);

src/Explorer/Notebook/NotebookManager.tsx

@@ -17,6 +17,7 @@ import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
 import { JunoClient } from "../../Juno/JunoClient";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../UserContext";
 import { getFullName } from "../../Utils/UserUtils";
 import Explorer from "../Explorer";
 import { ContextualPaneBase } from "../Panes/ContextualPaneBase";
@@ -56,7 +57,7 @@ export default class NotebookManager {
 
   public initialize(params: NotebookManagerOptions): void {
     this.params = params;
-    this.junoClient = new JunoClient(this.params.container.databaseAccount);
+    this.junoClient = new JunoClient();
 
     this.gitHubOAuthService = new GitHubOAuthService(this.junoClient);
     this.gitHubClient = new GitHubClient(this.onGitHubClientError);
@@ -73,7 +74,7 @@ export default class NotebookManager {
 
     this.notebookClient = new NotebookContainerClient(
       this.params.container.notebookServerInfo,
-      () => this.params.container.initNotebooks(this.params.container.databaseAccount()),
+      () => this.params.container.initNotebooks(userContext?.databaseAccount),
       (update: MemoryUsageInfo) => this.params.container.memoryUsageInfo(update)
     );
 

src/Explorer/Notebook/NotebookRenderer/PromptContent.tsx

@@ -1,8 +1,7 @@
+import { IconButton, Spinner, SpinnerSize } from "@fluentui/react";
 import * as React from "react";
-import { IconButton } from "office-ui-fabric-react/lib/Button";
-import { Spinner, SpinnerSize } from "office-ui-fabric-react/lib/Spinner";
-import "./Prompt.less";
 import { PassedPromptProps } from "./Prompt";
+import "./Prompt.less";
 
 export const promptContent = (props: PassedPromptProps): JSX.Element => {
   if (props.status === "busy") {

src/Explorer/Notebook/NotebookRenderer/Toolbar.tsx

@@ -1,21 +1,15 @@
+import { ContextualMenuItemType, DirectionalHint, IconButton, IContextualMenuItem } from "@fluentui/react";
+import { CellId, CellType } from "@nteract/commutable";
+import { actions, AppState, DocumentRecordProps } from "@nteract/core";
+import * as selectors from "@nteract/selectors";
+import { CellToolbarContext } from "@nteract/stateful-components";
 import { ContentRef } from "@nteract/types";
+import { RecordOf } from "immutable";
 import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-
-import { IconButton } from "office-ui-fabric-react/lib/Button";
-import {
-  DirectionalHint,
-  IContextualMenuItem,
-  ContextualMenuItemType,
-} from "office-ui-fabric-react/lib/ContextualMenu";
-import { actions, AppState, DocumentRecordProps } from "@nteract/core";
-import { CellToolbarContext } from "@nteract/stateful-components";
-import { CellType, CellId } from "@nteract/commutable";
-import * as selectors from "@nteract/selectors";
-import { RecordOf } from "immutable";
-import * as cdbActions from "../NotebookComponent/actions";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as cdbActions from "../NotebookComponent/actions";
 
 export interface ComponentProps {
   contentRef: ContentRef;

src/Explorer/Notebook/NotebookRenderer/outputs/SandboxOutputs.tsx

@@ -15,6 +15,8 @@ import { CellOutputViewerProps } from "../../../../CellOutputViewer/CellOutputVi
 interface ComponentProps {
   id: string;
   contentRef: ContentRef;
+  outputsContainerClassName?: string;
+  outputClassName?: string;
 }
 
 interface StateProps {
@@ -59,8 +61,10 @@ export class SandboxOutputs extends React.PureComponent<ComponentProps & StatePr
     const props: CellOutputViewerProps = {
       id: this.props.id,
       contentRef: this.props.contentRef,
-      hidden: this.props.hidden,
-      expanded: this.props.expanded,
+      outputsContainerClassName: `nteract-cell-outputs ${this.props.hidden ? "hidden" : ""} ${
+        this.props.expanded ? "expanded" : ""
+      } ${this.props.outputsContainerClassName}`,
+      outputClassName: this.props.outputClassName,
       outputs: this.props.outputs.toArray().map((output) => outputToJS(output)),
       onMetadataChange: this.props.onMetadataChange,
     };

src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.less

@@ -1,10 +1,5 @@
-.shemaAnalyzerComponent {
+.schemaAnalyzerComponent {
   width: 100%;
   height: 100%;
   overflow-y: auto;
-}
-
-.schemaAnalyzerCard {
-  max-width: 4096px;
-  width: 100%;
 }

src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.tsx

@@ -1,14 +1,12 @@
+import { FontIcon, PrimaryButton, Spinner, SpinnerSize, Stack, Text, TextField } from "@fluentui/react";
 import { ImmutableOutput } from "@nteract/commutable";
 import { actions, AppState, ContentRef, KernelRef, selectors } from "@nteract/core";
-import { KernelOutputError, Output, StreamText } from "@nteract/outputs";
-import TransformMedia from "@nteract/stateful-components/lib/outputs/transform-media";
-import { Card } from "@uifabric/react-cards";
 import Immutable from "immutable";
-import { FontIcon, PrimaryButton, Spinner, SpinnerSize, Stack, Text, TextField } from "office-ui-fabric-react";
 import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import loadTransform from "../NotebookComponent/loadTransform";
+import SandboxOutputs from "../NotebookRenderer/outputs/SandboxOutputs";
 import "./SchemaAnalyzerComponent.less";
 
 interface SchemaAnalyzerComponentPureProps {
@@ -91,70 +89,66 @@ export class SchemaAnalyzerComponent extends React.Component<
     const showSchemaOutput = isKernelIdle && outputs.size > 0;
 
     return (
-      <Stack className="schemaAnalyzerComponent" horizontalAlign="center" tokens={{ childrenGap: 20, padding: 20 }}>
-        <Stack.Item grow styles={{ root: { display: "contents" } }}>
-          <Stack horizontal tokens={{ childrenGap: 20 }} styles={{ root: { width: "100%" } }}>
-            <Stack.Item grow align="end">
-              <TextField
-                value={this.state.filter}
-                onChange={this.onFilterTextFieldChange}
-                label="Filter"
-                placeholder="{ field: 'value' }"
-                disabled={!isKernelIdle}
-              />
-            </Stack.Item>
-            <Stack.Item align="end">
-              <PrimaryButton
-                text={isKernelBusy ? "Analyzing..." : "Analyze"}
-                onClick={this.onAnalyzeButtonClick}
-                disabled={!isKernelIdle}
-              />
-            </Stack.Item>
-          </Stack>
-        </Stack.Item>
-
-        {showSchemaOutput ? (
-          outputs.map((output, index) => (
-            <Card className="schemaAnalyzerCard" key={index}>
-              <Card.Item tokens={{ padding: 10 }}>
-                <Output output={output}>
-                  <TransformMedia output_type={"display_data"} id={id} contentRef={contentRef} />
-                  <TransformMedia output_type={"execute_result"} id={id} contentRef={contentRef} />
-                  <KernelOutputError />
-                  <StreamText />
-                </Output>
-              </Card.Item>
-            </Card>
-          ))
-        ) : this.state.isFiltering ? (
-          <Stack.Item>
-            {isKernelBusy && <Spinner styles={{ root: { marginTop: 40 } }} size={SpinnerSize.large} />}
+      <div className="schemaAnalyzerComponent">
+        <Stack horizontalAlign="center" tokens={{ childrenGap: 20, padding: 20 }}>
+          <Stack.Item grow styles={{ root: { display: "contents" } }}>
+            <Stack horizontal tokens={{ childrenGap: 20 }} styles={{ root: { width: "100%" } }}>
+              <Stack.Item grow align="end">
+                <TextField
+                  value={this.state.filter}
+                  onChange={this.onFilterTextFieldChange}
+                  label="Filter"
+                  placeholder="{ field: 'value' }"
+                  disabled={!isKernelIdle}
+                />
+              </Stack.Item>
+              <Stack.Item align="end">
+                <PrimaryButton
+                  text={isKernelBusy ? "Analyzing..." : "Analyze"}
+                  onClick={this.onAnalyzeButtonClick}
+                  disabled={!isKernelIdle}
+                />
+              </Stack.Item>
+            </Stack>
           </Stack.Item>
-        ) : (
-          <>
+
+          {showSchemaOutput ? (
+            <SandboxOutputs
+              id={id}
+              contentRef={contentRef}
+              outputsContainerClassName="schema-analyzer-cell-outputs"
+              outputClassName="schema-analyzer-cell-output"
+            />
+          ) : this.state.isFiltering ? (
             <Stack.Item>
-              <FontIcon iconName="Chart" style={{ fontSize: 100, color: "#43B1E5", marginTop: 40 }} />
+              {isKernelBusy && <Spinner styles={{ root: { marginTop: 40 } }} size={SpinnerSize.large} />}
             </Stack.Item>
-            <Stack.Item>
-              <Text variant="xxLarge">Explore your schema</Text>
-            </Stack.Item>
-            <Stack.Item>
-              <Text variant="large">
-                Quickly visualize your schema to infer the frequency, types and ranges of fields in your data set.
-              </Text>
-            </Stack.Item>
-            <Stack.Item>
-              <PrimaryButton
-                styles={{ root: { fontSize: 18, padding: 30 } }}
-                text={isKernelBusy ? "Analyzing..." : "Analyze Schema"}
-                onClick={this.onAnalyzeButtonClick}
-                disabled={kernelStatus !== "idle"}
-              />
-            </Stack.Item>
-            <Stack.Item>{isKernelBusy && <Spinner size={SpinnerSize.large} />}</Stack.Item>
-          </>
-        )}
-      </Stack>
+          ) : (
+            <>
+              <Stack.Item>
+                <FontIcon iconName="Chart" style={{ fontSize: 100, color: "#43B1E5", marginTop: 40 }} />
+              </Stack.Item>
+              <Stack.Item>
+                <Text variant="xxLarge">Explore your schema</Text>
+              </Stack.Item>
+              <Stack.Item>
+                <Text variant="large">
+                  Quickly visualize your schema to infer the frequency, types and ranges of fields in your data set.
+                </Text>
+              </Stack.Item>
+              <Stack.Item>
+                <PrimaryButton
+                  styles={{ root: { fontSize: 18, padding: 30 } }}
+                  text={isKernelBusy ? "Analyzing..." : "Analyze Schema"}
+                  onClick={this.onAnalyzeButtonClick}
+                  disabled={kernelStatus !== "idle"}
+                />
+              </Stack.Item>
+              <Stack.Item>{isKernelBusy && <Spinner size={SpinnerSize.large} />}</Stack.Item>
+            </>
+          )}
+        </Stack>
+      </div>
     );
   }
 }