Fixed ts-strict issue of GremlinSimpleClient file

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>

.eslintignore

@@ -21,16 +21,8 @@ src/Common/MongoUtility.ts
 src/Common/NotificationsClientBase.ts
 src/Common/QueriesClient.ts
 src/Common/Splitter.ts
-src/Config.ts
-src/Contracts/ActionContracts.ts
-src/Contracts/DataModels.ts
-src/Contracts/Diagnostics.ts
-src/Contracts/ExplorerContracts.ts
-src/Contracts/Versions.ts
-src/Contracts/ViewModels.ts
 src/Controls/Heatmap/Heatmap.test.ts
 src/Controls/Heatmap/Heatmap.ts
-src/Controls/Heatmap/HeatmapDatatypes.ts
 src/Definitions/datatables.d.ts
 src/Definitions/gif.d.ts
 src/Definitions/globals.d.ts
@@ -44,29 +36,10 @@ src/Definitions/png.d.ts
 src/Definitions/svg.d.ts
 src/Explorer/ComponentRegisterer.test.ts
 src/Explorer/ComponentRegisterer.ts
-src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts
 src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts
-src/Explorer/Controls/DynamicList/DynamicList.test.ts
+
-src/Explorer/Controls/DynamicList/DynamicListComponent.ts
 src/Explorer/Controls/Editor/EditorComponent.ts
-src/Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.ts
-src/Explorer/Controls/InputTypeahead/InputTypeahead.ts
 src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts
-src/Explorer/Controls/Notebook/NotebookAppMessageHandler.ts
-src/Explorer/Controls/ThroughputInput/ThroughputInputComponent.ts
-src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts
-src/Explorer/Controls/Toolbar/IToolbarAction.ts
-src/Explorer/Controls/Toolbar/IToolbarDisplayable.ts
-src/Explorer/Controls/Toolbar/IToolbarDropDown.ts
-src/Explorer/Controls/Toolbar/IToolbarItem.ts
-src/Explorer/Controls/Toolbar/IToolbarSeperator.ts
-src/Explorer/Controls/Toolbar/IToolbarToggle.ts
-src/Explorer/Controls/Toolbar/KeyCodes.ts
-src/Explorer/Controls/Toolbar/Toolbar.ts
-src/Explorer/Controls/Toolbar/ToolbarAction.ts
-src/Explorer/Controls/Toolbar/ToolbarDropDown.ts
-src/Explorer/Controls/Toolbar/ToolbarToggle.ts
-src/Explorer/Controls/Toolbar/Utilities.ts
 src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
 src/Explorer/DataSamples/ContainerSampleGenerator.ts
 src/Explorer/DataSamples/DataSamplesUtil.test.ts

.github/workflows/ci.yml

@@ -143,7 +143,7 @@ jobs:
           - ./test/mongo/container.spec.ts
           - ./test/mongo/container32.spec.ts
           - ./test/selfServe/selfServeExample.spec.ts
-          - ./test/notebooks/upload.spec.ts
+          # - ./test/notebooks/upload.spec.ts // TEMP disabled since notebooks service is off
           - ./test/sql/resourceToken.spec.ts
           - ./test/tables/container.spec.ts
     steps:

less/Common/Constants.less

@@ -9,6 +9,7 @@
 
 @DataExplorerFont: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
 @SemiboldFont: "Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
+@GrayScale: "grayscale()";
 
 @xSmallFontSize: 4px;
 @smallFontSize: 8px;

less/documentDB.less

@@ -3068,78 +3068,6 @@ settings-pane {
   display: none;
   height: 0px;
 }
-.react-editor {
-  height: 400px;
-}
-.documentTabSearchBar{
-  width: 80%;
-  margin: 15px;
-}
-.documentSqlTabSearchBar{
-  width: 68%;
-  margin: 15px;
-}
-.documentTabFiltetButton{
-  margin-top: 15px;
-}
-.filterSuggestions {
-  z-index: 1;
-  position: absolute;
-  top: 133px;
-  padding: 10px;
-  margin-left: 10px;
-  background: white;
-  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-  transition: 0.3s;
-  width: 20%;
-  height: auto;
-}
-.sqlFilterSuggestions {
-  margin-left: 10%;
-}
-.documentTabSuggestions {
-  padding: 5px;
-  cursor: pointer;
-}
-.documentTabNoFilterView {
-  margin: 15px;
-}
-.noFilterText {
-  margin-right: 10px;
-}
-.documentTabWatermark{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  margin-top: 10%;
-  margin-right: 12%;
-}
-.documentCreateText {
-  margin-top: 10px;
-}
-.documentLoadMore {
-  color: #0078D4;
-  font-size: 12px;
-  cursor: pointer;
-  margin-top: 10px;
-}
-.leftSplitter {
-  align-items: center;
-  text-align: center;
-  flex-direction: column;
-}
-.documentIdItem{
-  cursor: pointer;
-}
-.splitterWrapper .splitter-layout .layout-pane.layout-pane-primary{
-  max-height: 60%;
-}
-.queryText {
-  padding: 20px;
-  padding-left: 10px;
-  padding-right: 0px;
-}
 .spinner {
   width: 100%;
   position: absolute;

less/forms.less

@@ -208,4 +208,4 @@
 }
 .trigger-form {
     padding: 10px 30px 10px 30px;
-}
+}

less/resourceTree.less

@@ -19,6 +19,10 @@
   .notebookHeader {
     font-size: 12px;
   }
+
+  .clickDisabled {
+    pointer-events: none;
+  }
 }
 
 

package.json

@@ -48,9 +48,9 @@
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
     "canvas": "file:./canvas",
-    "clean-webpack-plugin": "0.1.19",
+    "clean-webpack-plugin": "3.0.0",
     "clipboard-copy": "4.0.1",
-    "copy-webpack-plugin": "6.0.2",
+    "copy-webpack-plugin": "9.0.1",
     "crossroads": "0.12.2",
     "css-element-queries": "1.1.1",
     "d3": "6.1.1",
@@ -81,10 +81,10 @@
     "plotly.js-cartesian-dist-min": "1.52.3",
     "post-robot": "10.0.42",
     "q": "1.5.1",
-    "react": "16.13.1",
+    "react": "16.14.0",
     "react-animate-height": "2.0.8",
-    "react-dnd": "9.4.0",
+    "react-dnd": "14.0.2",
-    "react-dnd-html5-backend": "9.4.0",
+    "react-dnd-html5-backend": "14.0.0",
     "react-dom": "16.13.1",
     "react-hotkeys": "2.0.0",
     "react-i18next": "11.8.5",
@@ -98,7 +98,7 @@
     "sanitize-html": "2.3.3",
     "styled-components": "4.3.2",
     "swr": "0.4.0",
-    "terser-webpack-plugin": "3.1.0",
+    "terser-webpack-plugin": "5.1.4",
     "underscore": "1.9.1",
     "utility-types": "3.10.0",
     "zustand": "3.5.0"
@@ -132,6 +132,7 @@
     "@types/underscore": "1.7.36",
     "@typescript-eslint/eslint-plugin": "4.22.0",
     "@typescript-eslint/parser": "4.22.0",
+    "@webpack-cli/serve": "1.5.2",
     "babel-jest": "24.9.0",
     "babel-loader": "8.1.0",
     "buffer": "5.1.0",
@@ -153,44 +154,45 @@
     "html-inline-css-webpack-plugin": "1.11.0",
     "html-loader": "0.5.5",
     "html-loader-jest": "0.2.1",
-    "html-webpack-plugin": "4.5.2",
+    "html-webpack-plugin": "5.3.2",
-    "jest": "25.5.4",
+    "jest": "26.6.3",
-    "jest-canvas-mock": "2.1.0",
+    "jest-canvas-mock": "2.3.1",
     "jest-playwright-preset": "1.5.1",
     "jest-trx-results-processor": "0.0.7",
     "less": "3.8.1",
     "less-loader": "4.1.0",
     "less-vars-loader": "1.1.0",
-    "mini-css-extract-plugin": "0.4.3",
+    "mini-css-extract-plugin": "2.1.0",
     "monaco-editor-webpack-plugin": "1.7.0",
     "node-fetch": "2.6.1",
     "playwright": "1.13.0",
     "prettier": "2.2.1",
+    "process": "0.11.10",
     "raw-loader": "0.5.1",
     "react-dev-utils": "11.0.4",
     "rimraf": "3.0.0",
     "sinon": "3.2.1",
     "style-loader": "0.23.0",
-    "ts-loader": "6.2.2",
+    "ts-loader": "9.2.4",
     "tslint": "5.11.0",
     "tslint-microsoft-contrib": "6.0.0",
     "typedoc": "0.20.36",
     "typescript": "4.3.4",
     "url-loader": "1.1.1",
     "wait-on": "4.0.2",
-    "webpack": "4.46.0",
+    "webpack": "5.47.0",
-    "webpack-bundle-analyzer": "3.6.1",
+    "webpack-bundle-analyzer": "4.4.2",
-    "webpack-cli": "3.3.10",
+    "webpack-cli": "4.7.2",
-    "webpack-dev-server": "3.11.0"
+    "webpack-dev-server": "3.11.2"
   },
   "scripts": {
-    "start": "node --max-old-space-size=10196 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "start": "webpack serve --mode development",
     "dev": "echo \"WARNING: npm run dev has been deprecated\" && npm run build",
     "build:dataExplorer:ci": "npm run build:ci",
     "build": "npm run format:check && npm run lint && npm run compile && npm run compile:strict && npm run pack:prod && npm run copyToConsumers",
     "build:ci": "npm run format:check && npm run lint && npm run compile && npm run compile:strict && npm run pack:fast",
-    "pack:prod": "node --max_old_space_size=10196 ./node_modules/webpack/bin/webpack.js  --mode production",
+    "pack:prod": "webpack  --mode production",
-    "pack:fast": "node --max_old_space_size=10196 ./node_modules/webpack/bin/webpack.js  --mode development --progress",
+    "pack:fast": "webpack  --mode development --progress",
     "copyToConsumers": "node copyToConsumers",
     "test": "rimraf coverage && jest",
     "test:e2e": "jest -c ./jest.config.playwright.js --detectOpenHandles",

src/Common/Constants.ts

@@ -95,6 +95,7 @@ export class Flights {
   public static readonly MongoIndexing = "mongoindexing";
   public static readonly AutoscaleTest = "autoscaletest";
   public static readonly PartitionKeyTest = "partitionkeytest";
+  public static readonly PKPartitionKeyTest = "pkpartitionkeytest";
 }
 
 export class AfecFeatures {
@@ -349,6 +350,11 @@ export class Notebook {
   public static readonly kernelRestartInitialDelayMs = 1000;
   public static readonly kernelRestartMaxDelayMs = 20000;
   public static readonly autoSaveIntervalMs = 120000;
+  public static readonly temporarilyDownMsg = "Notebooks is currently not available. We are working on it.";
+  public static readonly mongoShellTemporarilyDownMsg =
+    "We have identified an issue with the Mongo Shell and it is unavailable right now. We are actively working on the mitigation.";
+  public static readonly cassandraShellTemporarilyDownMsg =
+    "We have identified an issue with the Cassandra Shell and it is unavailable right now. We are actively working on the mitigation.";
 }
 
 export class SparkLibrary {

src/Common/ResourceTreeContainer.tsx

@@ -54,7 +54,7 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
         </div>
         {userContext.authType === AuthType.ResourceToken ? (
           <ResourceTokenTree />
-        ) : userContext.features.enableKOResourceTree ? (
+        ) : userContext.features.enableKoResourceTree ? (
           <div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
         ) : (
           <ResourceTree container={container} />

src/Common/dataAccess/deleteDocument.ts

@@ -1,9 +1,9 @@
 import { CollectionBase } from "../../Contracts/ViewModels";
-import DocumentId from "../../Explorer/Tree/DocumentId";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { getEntityName } from "../DocumentUtility";
 import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import DocumentId from "../../Explorer/Tree/DocumentId";
 
 export const deleteDocument = async (collection: CollectionBase, documentId: DocumentId): Promise<void> => {
   const entityName: string = getEntityName();

src/Contracts/DataModels.ts

@@ -88,9 +88,6 @@ export interface SubscriptionPolicies {
 }
 
 export interface Resource {
-  _partitionKeyValue?: string;
-  _partitionKey?: string;
-  _attachments?: string;
   _rid: string;
   _self: string;
   _etag: string;

src/Controls/Heatmap/Heatmap.test.ts

@@ -22,8 +22,8 @@ describe("The Heatmap Control", () => {
   };
 
   let heatmap: Heatmap;
-  let theme: PortalTheme = 1;
+  const theme: PortalTheme = 1;
-  const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+  const divElement = `<div id="${Heatmap.elementId}"></div>`;
 
   describe("drawHeatmap rendering", () => {
     beforeEach(() => {
@@ -100,7 +100,7 @@ describe("iframe rendering when there is no data", () => {
   });
 
   it("should show a no data message with a dark theme", () => {
-    let data = {
+    const data = {
       data: {
         signature: "pcIframe",
         data: {
@@ -111,7 +111,7 @@ describe("iframe rendering when there is no data", () => {
       },
     };
 
-    const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+    const divElement = `<div id="${Heatmap.elementId}"></div>`;
     document.body.innerHTML = divElement;
 
     handleMessage(data as MessageEvent);
@@ -120,7 +120,7 @@ describe("iframe rendering when there is no data", () => {
   });
 
   it("should show a no data message with a white theme", () => {
-    let data = {
+    const data = {
       data: {
         signature: "pcIframe",
         data: {
@@ -131,7 +131,7 @@ describe("iframe rendering when there is no data", () => {
       },
     };
 
-    const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+    const divElement = `<div id="${Heatmap.elementId}"></div>`;
     document.body.innerHTML = divElement;
 
     handleMessage(data as MessageEvent);

src/Controls/Heatmap/Heatmap.ts

@@ -39,7 +39,7 @@ export class Heatmap {
     }
   }
 
-  private _getFontStyles(size: number = StyleConstants.MediumFontSize, color: string = "#838383"): FontSettings {
+  private _getFontStyles(size: number = StyleConstants.MediumFontSize, color = "#838383"): FontSettings {
     return {
       family: StyleConstants.DataExplorerFont,
       size,
@@ -78,9 +78,9 @@ export class Heatmap {
     // go thru all rows and create 2d matrix for heatmap...
     for (let i = 0; i < rows.length; i++) {
       output.yAxisPoints.push(rows[i]);
-      let dataPoints: number[] = [];
+      const dataPoints: number[] = [];
       for (let a = 0; a < output.xAxisPoints.length; a++) {
-        let row: PartitionTimeStampToData = data[rows[i]];
+        const row: PartitionTimeStampToData = data[rows[i]];
         dataPoints.push(row[output.xAxisPoints[a]]["Normalized Throughput"]);
       }
       output.dataPoints.push(dataPoints);
@@ -193,7 +193,7 @@ export class Heatmap {
       this._getLayoutSettings(),
       this._getChartDisplaySettings()
     );
-    let plotDiv: any = document.getElementById(Heatmap.elementId);
+    const plotDiv: any = document.getElementById(Heatmap.elementId);
     plotDiv.on("plotly_click", (data: any) => {
       let timeSelected: string = data.points[0].x;
       timeSelected = timeSelected.replace(" ", "T");
@@ -205,7 +205,7 @@ export class Heatmap {
           break;
         }
       }
-      let output = [];
+      const output = [];
       for (let i = 0; i < this._chartData.dataPoints.length; i++) {
         output.push(this._chartData.dataPoints[i][xAxisIndex]);
       }

src/Explorer/ContextMenuButtonFactory.tsx

@@ -83,6 +83,7 @@ export const createCollectionContextMenuButton = (
 
     items.push({
       iconSrc: HostedTerminalIcon,
+      isDisabled: useNotebook.getState().isShellEnabled && userContext.features.notebooksTemporarilyDown,
       onClick: () => {
         const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
         if (useNotebook.getState().isShellEnabled) {

src/Explorer/Controls/Dialog.tsx

@@ -23,13 +23,75 @@ export interface DialogState {
   dialogProps?: DialogProps;
   openDialog: (props: DialogProps) => void;
   closeDialog: () => void;
+  showOkCancelModalDialog: (
+    title: string,
+    subText: string,
+    okLabel: string,
+    onOk: () => void,
+    cancelLabel: string,
+    onCancel: () => void,
+    choiceGroupProps?: IChoiceGroupProps,
+    textFieldProps?: TextFieldProps,
+    primaryButtonDisabled?: boolean
+  ) => void;
+  showOkModalDialog: (title: string, subText: string) => void;
 }
 
-export const useDialog: UseStore<DialogState> = create((set) => ({
+export const useDialog: UseStore<DialogState> = create((set, get) => ({
   visible: false,
   openDialog: (props: DialogProps) => set(() => ({ visible: true, dialogProps: props })),
   closeDialog: () =>
-    set((state) => ({ visible: false, openDialog: state.openDialog, closeDialog: state.closeDialog }), true),
+    set(
+      (state) => ({
+        visible: false,
+        openDialog: state.openDialog,
+        closeDialog: state.closeDialog,
+        showOkCancelModalDialog: state.showOkCancelModalDialog,
+        showOkModalDialog: state.showOkModalDialog,
+      }),
+      true // TODO: This probably should not be true but its causing a prod bug so easier to just set the proper state above
+    ),
+  showOkCancelModalDialog: (
+    title: string,
+    subText: string,
+    okLabel: string,
+    onOk: () => void,
+    cancelLabel: string,
+    onCancel: () => void,
+    choiceGroupProps?: IChoiceGroupProps,
+    textFieldProps?: TextFieldProps,
+    primaryButtonDisabled?: boolean
+  ): void =>
+    get().openDialog({
+      isModal: true,
+      title,
+      subText,
+      primaryButtonText: okLabel,
+      secondaryButtonText: cancelLabel,
+      onPrimaryButtonClick: () => {
+        get().closeDialog();
+        onOk && onOk();
+      },
+      onSecondaryButtonClick: () => {
+        get().closeDialog();
+        onCancel && onCancel();
+      },
+      choiceGroupProps,
+      textFieldProps,
+      primaryButtonDisabled,
+    }),
+  showOkModalDialog: (title: string, subText: string): void =>
+    get().openDialog({
+      isModal: true,
+      title,
+      subText,
+      primaryButtonText: "Close",
+      secondaryButtonText: undefined,
+      onPrimaryButtonClick: () => {
+        get().closeDialog();
+      },
+      onSecondaryButtonClick: undefined,
+    }),
 }));
 
 export interface TextFieldProps extends ITextFieldProps {

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -33,20 +33,16 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
     this.createEditor(this.configureEditor.bind(this));
   }
 
-  public shouldComponentUpdate(): boolean {
+  public componentDidUpdate(previous: EditorReactProps) {
-    return true;
+    if (this.props.content !== previous.content) {
+      this.editor.setValue(this.props.content);
+    }
   }
 
   public componentWillUnmount(): void {
     this.selectionListener && this.selectionListener.dispose();
   }
 
-  public componentDidUpdate(prevProps: EditorReactProps): void {
-    if (this.props.content !== prevProps.content) {
-      this.editor.setValue(this.props.content);
-    }
-  }
-
   public render(): JSX.Element {
     return (
       <React.Fragment>

src/Explorer/Controls/InputTypeahead/InputTypeahead.less

@@ -5,6 +5,9 @@
     display: inline-block;
     width: 100%;
 
+    .input-type-head-text-field {
+        width: 100%;
+    }
     textarea {
         width: 100%;
         line-height: 1;
@@ -21,4 +24,11 @@
         }
     }
 }
-
+.input-typeahead-chocies-container {
+    border: 1px solid lightgrey;
+    padding: 5px 10px 5px 10px;
+    cursor: pointer;
+    .choice-caption{
+        font-size: 14px;
+    }
+}

src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx

@@ -6,14 +6,13 @@
  *   typeaheadOverrideOptions: { dynamic:false }
  *
  */
-import "jquery-typeahead";
+import { getTheme, IconButton, IIconProps, List, Stack, TextField } from "@fluentui/react";
 import * as React from "react";
-import { KeyCodes } from "../../../Common/Constants";
 import "./InputTypeahead.less";
 
 export interface Item {
   caption: string;
-  value: any;
+  value: string;
 }
 
 /**
@@ -75,170 +74,125 @@ export interface InputTypeaheadComponentProps {
   useTextarea?: boolean;
 }
 
-interface OnClickItem {
+interface InputTypeaheadComponentState {
-  matchedKey: string;
+  isSuggestionVisible: boolean;
-  value: any;
+  selectedChoice: Item;
-  caption: string;
+  filteredChoices: Item[];
-  group: string;
 }
 
-interface Cache {
-  inputValue: string;
-  selection: Item;
-}
-
-interface InputTypeaheadComponentState {}
-
 export class InputTypeaheadComponent extends React.Component<
   InputTypeaheadComponentProps,
   InputTypeaheadComponentState
 > {
-  private inputElt: HTMLElement;
+  constructor(props: InputTypeaheadComponentProps) {
-  private containerElt: HTMLElement;
-
-  private cache: Cache;
-  private inputValue: string;
-  private selection: Item;
-
-  public constructor(props: InputTypeaheadComponentProps) {
     super(props);
-    this.cache = {
+    this.state = {
-      inputValue: null,
+      isSuggestionVisible: false,
-      selection: null,
+      filteredChoices: [],
+      selectedChoice: {
+        caption: "",
+        value: "",
+      },
     };
   }
 
-  /**
+  private onRenderCell = (item: Item): JSX.Element => {
-   * Props have changed
-   * @param prevProps
-   * @param prevState
-   * @param snapshot
-   */
-  public componentDidUpdate(
-    prevProps: InputTypeaheadComponentProps,
-    prevState: InputTypeaheadComponentState,
-    snapshot: any
-  ): void {
-    if (prevProps.defaultValue !== this.props.defaultValue) {
-      $(this.inputElt).val(this.props.defaultValue);
-      this.initializeTypeahead();
-    }
-  }
-
-  /**
-   * Executed once react is done building the DOM for this component
-   */
-  public componentDidMount(): void {
-    this.initializeTypeahead();
-  }
-
-  public render(): JSX.Element {
     return (
-      <span className="input-typeahead-container">
+      <div className="input-typeahead-chocies-container" onClick={() => this.onChoiceClick(item)}>
-        <div
+        <p className="choice-caption">{item.caption}</p>
-          className="input-typehead"
+        <span>{item.value}</span>
-          onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onKeyDown(event)}
+      </div>
-        >
-          <div className="typeahead__container" ref={(input) => (this.containerElt = input)}>
-            <div className="typeahead__field">
-              <span className="typeahead__query">
-                {this.props.useTextarea ? (
-                  <textarea
-                    rows={1}
-                    name="q"
-                    autoComplete="off"
-                    aria-label="Input query"
-                    ref={(input) => (this.inputElt = input)}
-                    defaultValue={this.props.defaultValue}
-                  />
-                ) : (
-                  <input
-                    name="q"
-                    type="search"
-                    autoComplete="off"
-                    aria-label="Input query"
-                    ref={(input) => (this.inputElt = input)}
-                    defaultValue={this.props.defaultValue}
-                  />
-                )}
-              </span>
-              {this.props.showSearchButton && (
-                <span className="typeahead__button">
-                  <button type="submit">
-                    <span className="typeahead__search-icon" />
-                  </button>
-                </span>
-              )}
-            </div>
-          </div>
-        </div>
-      </span>
     );
-  }
+  };
 
-  private onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+  private onChoiceClick = (item: Item): void => {
-    if (event.keyCode === KeyCodes.Enter) {
+    this.props.onNewValue(item.caption);
+    this.setState({ isSuggestionVisible: false, selectedChoice: item });
+  };
+
+  private handleChange = (value: string): void => {
+    if (!value) {
+      this.setState({ isSuggestionVisible: true });
+    }
+    this.props.onNewValue(value);
+    const filteredChoices = this.filterChoiceByValue(this.props.choices, value);
+    this.setState({ filteredChoices });
+  };
+
+  private onSubmit = (event: React.KeyboardEvent<HTMLElement>): void => {
+    if (event.key === "Enter") {
       if (this.props.submitFct) {
         event.preventDefault();
         event.stopPropagation();
-        this.props.submitFct(this.cache.inputValue, this.cache.selection);
+        this.props.submitFct(this.props.defaultValue, this.state.selectedChoice);
-        $(this.containerElt).children(".typeahead__result").hide();
+        this.setState({ isSuggestionVisible: false });
       }
     }
-  }
+  };
 
-  /**
+  private filterChoiceByValue = (choices: Item[], searchKeyword: string): Item[] => {
-   * Must execute once ko is rendered, so that it can find the input element by id
+    return choices.filter((choice) =>
-   */
+      // @ts-ignore
-  private initializeTypeahead(): void {
+      Object.keys(choice).some((key) => choice[key].toLowerCase().includes(searchKeyword.toLowerCase()))
-    const props = this.props;
+    );
-    let cache = this.cache;
+  };
-    let options: any = {
-      input: this.inputElt,
-      order: "asc",
-      minLength: 0,
-      searchOnFocus: true,
-      source: {
-        display: "caption",
-        data: () => {
-          return props.choices;
-        },
-      },
-      callback: {
-        onClick: (node: any, a: any, item: OnClickItem, event: any) => {
-          cache.selection = item;
 
-          if (props.onSelected) {
+  public render(): JSX.Element {
-            props.onSelected(item);
+    const { defaultValue, useTextarea, placeholder, onNewValue } = this.props;
-          }
+    const { isSuggestionVisible, selectedChoice, filteredChoices } = this.state;
-        },
+    const theme = getTheme();
-        onResult(node: any, query: any, result: any, resultCount: any, resultCountPerGroup: any) {
+
-          cache.inputValue = query;
+    const iconButtonStyles = {
-          if (props.onNewValue) {
+      root: {
-            props.onNewValue(query);
+        color: theme.palette.neutralPrimary,
-          }
+        marginLeft: "10px !important",
-        },
+        marginTop: "0px",
+        marginRight: "2px",
+        width: "42px",
       },
-      template: (query: string, item: any) => {
+      rootHovered: {
-        // Don't display id if caption *IS* the id
+        color: theme.palette.neutralDark,
-        return item.caption === item.value
-          ? "<span>{{caption}}</span>"
-          : "<span><div>{{caption}}</div><div><small>{{value}}</small></div></span>";
       },
-      dynamic: true,
     };
+    const cancelIcon: IIconProps = { iconName: "cancel" };
+    const searchIcon: IIconProps = { iconName: "Search" };
 
-    // Override options
+    return (
-    if (props.typeaheadOverrideOptions) {
+      <div className="input-typeahead-container">
-      for (const p in props.typeaheadOverrideOptions) {
+        <Stack horizontal>
-        options[p] = props.typeaheadOverrideOptions[p];
+          <TextField
-      }
+            multiline={useTextarea}
-    }
+            rows={1}
-
+            defaultValue={defaultValue}
-    if (props.hasOwnProperty("showCancelButton")) {
+            ariaLabel="Input query"
-      options.cancelButton = props.showCancelButton;
+            placeholder={placeholder}
-    }
+            className="input-type-head-text-field"
-
+            value={defaultValue}
-    $(this.inputElt).typeahead(options);
+            onKeyDown={this.onSubmit}
+            onFocus={() => this.setState({ isSuggestionVisible: true })}
+            onChange={(_event, newValue?: string) => this.handleChange(newValue)}
+          />
+          {this.props.showCancelButton && (
+            <IconButton
+              styles={iconButtonStyles}
+              iconProps={cancelIcon}
+              ariaLabel="cancel Button"
+              onClick={() => onNewValue("")}
+            />
+          )}
+          {this.props.showSearchButton && (
+            <IconButton
+              styles={iconButtonStyles}
+              iconProps={searchIcon}
+              ariaLabel="Search Button"
+              onClick={() => this.props.submitFct(defaultValue, selectedChoice)}
+            />
+          )}
+        </Stack>
+        {filteredChoices.length && isSuggestionVisible ? (
+          <List items={filteredChoices} onRenderCell={this.onRenderCell} />
+        ) : undefined}
+      </div>
+    );
   }
 }

src/Explorer/Controls/InputTypeahead/__snapshots__/InputTypeaheadComponent.test.tsx.snap

@@ -1,61 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`inputTypeahead renders <input /> 1`] = `
-<span
+<div
   className="input-typeahead-container"
 >
-  <div
+  <Stack
-    className="input-typehead"
+    horizontal={true}
-    onKeyDown={[Function]}
   >
-    <div
+    <StyledTextFieldBase
-      className="typeahead__container"
+      ariaLabel="Input query"
-    >
+      className="input-type-head-text-field"
-      <div
+      multiline={false}
-        className="typeahead__field"
+      onChange={[Function]}
-      >
+      onFocus={[Function]}
-        <span
+      onKeyDown={[Function]}
-          className="typeahead__query"
+      placeholder="placeholder"
-        >
+      rows={1}
-          <input
+    />
-            aria-label="Input query"
+  </Stack>
-            autoComplete="off"
+</div>
-            name="q"
-            type="search"
-          />
-        </span>
-      </div>
-    </div>
-  </div>
-</span>
 `;
 
 exports[`inputTypeahead renders <textarea /> 1`] = `
-<span
+<div
   className="input-typeahead-container"
 >
-  <div
+  <Stack
-    className="input-typehead"
+    horizontal={true}
-    onKeyDown={[Function]}
   >
-    <div
+    <StyledTextFieldBase
-      className="typeahead__container"
+      ariaLabel="Input query"
-    >
+      className="input-type-head-text-field"
-      <div
+      multiline={true}
-        className="typeahead__field"
+      onChange={[Function]}
-      >
+      onFocus={[Function]}
-        <span
+      onKeyDown={[Function]}
-          className="typeahead__query"
+      placeholder="placeholder"
-        >
+      rows={1}
-          <textarea
+    />
-            aria-label="Input query"
+  </Stack>
-            autoComplete="off"
+</div>
-            name="q"
-            rows={1}
-          />
-        </span>
-      </div>
-    </div>
-  </div>
-</span>
 `;

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -29,6 +29,7 @@ import { QueriesClient } from "../../../Common/QueriesClient";
 import * as DataModels from "../../../Contracts/DataModels";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import { useDialog } from "../Dialog";
 
 const title = "Open Saved Queries";
 
@@ -222,35 +223,42 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                   key: "Delete",
                   text: "Delete query",
                   onClick: async () => {
-                    if (window.confirm("Are you sure you want to delete this query?")) {
+                    useDialog.getState().showOkCancelModalDialog(
-                      const startKey: number = TelemetryProcessor.traceStart(Action.DeleteSavedQuery, {
+                      "Confirm delete",
-                        dataExplorerArea: Constants.Areas.ContextualPane,
+                      "Are you sure you want to delete this query?",
-                        paneTitle: title,
+                      "Delete",
-                      });
+                      async () => {
-                      try {
+                        const startKey: number = TelemetryProcessor.traceStart(Action.DeleteSavedQuery, {
-                        await this.props.queriesClient.deleteQuery(query);
+                          dataExplorerArea: Constants.Areas.ContextualPane,
-                        TelemetryProcessor.traceSuccess(
+                          paneTitle: title,
-                          Action.DeleteSavedQuery,
+                        });
-                          {
+                        try {
-                            dataExplorerArea: Constants.Areas.ContextualPane,
+                          await this.props.queriesClient.deleteQuery(query);
-                            paneTitle: title,
+                          TelemetryProcessor.traceSuccess(
-                          },
+                            Action.DeleteSavedQuery,
-                          startKey
+                            {
-                        );
+                              dataExplorerArea: Constants.Areas.ContextualPane,
-                      } catch (error) {
+                              paneTitle: title,
-                        TelemetryProcessor.traceFailure(
+                            },
-                          Action.DeleteSavedQuery,
+                            startKey
-                          {
+                          );
-                            dataExplorerArea: Constants.Areas.ContextualPane,
+                        } catch (error) {
-                            paneTitle: title,
+                          TelemetryProcessor.traceFailure(
-                            error: getErrorMessage(error),
+                            Action.DeleteSavedQuery,
-                            errorStack: getErrorStack(error),
+                            {
-                          },
+                              dataExplorerArea: Constants.Areas.ContextualPane,
-                          startKey
+                              paneTitle: title,
-                        );
+                              error: getErrorMessage(error),
-                      }
+                              errorStack: getErrorStack(error),
-                      await this.fetchSavedQueries(); // get latest state
+                            },
-                    }
+                            startKey
+                          );
+                        }
+                        await this.fetchSavedQueries(); // get latest state
+                      },
+                      "Cancel",
+                      undefined
+                    );
                   },
                 },
               ],

src/Explorer/DataSamples/DataSamplesUtil.test.ts

@@ -17,7 +17,6 @@ describe("DataSampleUtils", () => {
       collections: ko.observableArray<Collection>([collection]),
     } as Database;
     const explorer = {} as Explorer;
-    explorer.showOkModalDialog = () => {};
     useDatabases.getState().addDatabases([database]);
     const dataSamplesUtil = new DataSamplesUtil(explorer);
 

src/Explorer/DataSamples/DataSamplesUtil.ts

@@ -1,6 +1,7 @@
 import * as ViewModels from "../../Contracts/ViewModels";
 import { userContext } from "../../UserContext";
 import { logConsoleError, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
+import { useDialog } from "../Controls/Dialog";
 import Explorer from "../Explorer";
 import { useDatabases } from "../useDatabases";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
@@ -20,7 +21,7 @@ export class DataSamplesUtil {
     const containerName = generator.getCollectionId();
     if (this.hasContainer(databaseName, containerName, useDatabases.getState().databases)) {
       const msg = `The container ${containerName} in database ${databaseName} already exists. Please delete it and retry.`;
-      this.container.showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
+      useDialog.getState().showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
       logConsoleError(msg);
       return;
     }
@@ -29,7 +30,7 @@ export class DataSamplesUtil {
       .createSampleContainerAsync()
       .catch((error) => logConsoleError(`Error creating sample container: ${error}`));
     const msg = `The sample ${containerName} in database ${databaseName} has been successfully created.`;
-    this.container.showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
+    useDialog.getState().showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
     logConsoleInfo(msg);
   }
 

src/Explorer/Explorer.tsx

@@ -1,4 +1,3 @@
-import { IChoiceGroupProps } from "@fluentui/react";
 import * as ko from "knockout";
 import React from "react";
 import _ from "underscore";
@@ -35,7 +34,7 @@ import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
 import "./ComponentRegisterer";
-import { DialogProps, TextFieldProps, useDialog } from "./Controls/Dialog";
+import { DialogProps, useDialog } from "./Controls/Dialog";
 import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
 import { useCommandBar } from "./Menus/CommandBar/CommandBarComponentAdapter";
 import * as FileSystemUtil from "./Notebook/FileSystemUtil";
@@ -538,17 +537,22 @@ export default class Explorer {
     }
   }
 
-  public uploadFile(name: string, content: string, parent: NotebookContentItem): Promise<NotebookContentItem> {
+  public uploadFile(
+    name: string,
+    content: string,
+    parent: NotebookContentItem,
+    isGithubTree?: boolean
+  ): Promise<NotebookContentItem> {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to upload notebook, but notebook is not enabled";
       handleError(error, "Explorer/uploadFile");
       throw new Error(error);
     }
 
-    const promise = this.notebookManager?.notebookContentClient.uploadFileAsync(name, content, parent);
+    const promise = this.notebookManager?.notebookContentClient.uploadFileAsync(name, content, parent, isGithubTree);
     promise
       .then(() => this.resourceTree.triggerRender())
-      .catch((reason) => this.showOkModalDialog("Unable to upload file", reason));
+      .catch((reason) => useDialog.getState().showOkModalDialog("Unable to upload file", getErrorMessage(reason)));
     return promise;
   }
 
@@ -614,51 +618,6 @@ export default class Explorer {
     this.notebookManager?.openCopyNotebookPane(name, content);
   }
 
-  public showOkModalDialog(title: string, msg: string): void {
-    useDialog.getState().openDialog({
-      isModal: true,
-      title,
-      subText: msg,
-      primaryButtonText: "Close",
-      secondaryButtonText: undefined,
-      onPrimaryButtonClick: () => {
-        useDialog.getState().closeDialog();
-      },
-      onSecondaryButtonClick: undefined,
-    });
-  }
-
-  public showOkCancelModalDialog(
-    title: string,
-    msg: string,
-    okLabel: string,
-    onOk: () => void,
-    cancelLabel: string,
-    onCancel: () => void,
-    choiceGroupProps?: IChoiceGroupProps,
-    textFieldProps?: TextFieldProps,
-    isPrimaryButtonDisabled?: boolean
-  ): void {
-    useDialog.getState().openDialog({
-      isModal: true,
-      title,
-      subText: msg,
-      primaryButtonText: okLabel,
-      secondaryButtonText: cancelLabel,
-      onPrimaryButtonClick: () => {
-        useDialog.getState().closeDialog();
-        onOk && onOk();
-      },
-      onSecondaryButtonClick: () => {
-        useDialog.getState().closeDialog();
-        onCancel && onCancel();
-      },
-      choiceGroupProps,
-      textFieldProps,
-      primaryButtonDisabled: isPrimaryButtonDisabled,
-    });
-  }
-
   /**
    * Note: To keep it simple, this creates a disconnected NotebookContentItem that is not connected to the resource tree.
    * Connecting it to a tree possibly requires the intermediate missing folders if the item is nested in a subfolder.
@@ -718,7 +677,7 @@ export default class Explorer {
     return true;
   }
 
-  public renameNotebook(notebookFile: NotebookContentItem): void {
+  public renameNotebook(notebookFile: NotebookContentItem, isGithubTree?: boolean): void {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to rename notebook, but notebook is not enabled";
       handleError(error, "Explorer/renameNotebook");
@@ -732,7 +691,9 @@ export default class Explorer {
         return tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), notebookFile.path);
       });
     if (openedNotebookTabs.length > 0) {
-      this.showOkModalDialog("Unable to rename file", "This file is being edited. Please close the tab and try again.");
+      useDialog
+        .getState()
+        .showOkModalDialog("Unable to rename file", "This file is being edited. Please close the tab and try again.");
     } else {
       useSidePanel.getState().openSidePanel(
         "Rename Notebook",
@@ -749,7 +710,7 @@ export default class Explorer {
           paneTitle="Rename Notebook"
           defaultInput={FileSystemUtil.stripExtension(notebookFile.name, "ipynb")}
           onSubmit={(notebookFile: NotebookContentItem, input: string): Promise<NotebookContentItem> =>
-            this.notebookManager?.notebookContentClient.renameNotebook(notebookFile, input)
+            this.notebookManager?.notebookContentClient.renameNotebook(notebookFile, input, isGithubTree)
           }
           notebookFile={notebookFile}
         />
@@ -757,7 +718,7 @@ export default class Explorer {
     }
   }
 
-  public onCreateDirectory(parent: NotebookContentItem): void {
+  public onCreateDirectory(parent: NotebookContentItem, isGithubTree?: boolean): void {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to create notebook directory, but notebook is not enabled";
       handleError(error, "Explorer/onCreateDirectory");
@@ -779,7 +740,7 @@ export default class Explorer {
         submitButtonLabel="Create"
         defaultInput=""
         onSubmit={(notebookFile: NotebookContentItem, input: string): Promise<NotebookContentItem> =>
-          this.notebookManager?.notebookContentClient.createDirectory(notebookFile, input)
+          this.notebookManager?.notebookContentClient.createDirectory(notebookFile, input, isGithubTree)
         }
         notebookFile={parent}
       />
@@ -848,7 +809,7 @@ export default class Explorer {
     }
   };
 
-  public deleteNotebookFile(item: NotebookContentItem): Promise<void> {
+  public deleteNotebookFile(item: NotebookContentItem, isGithubTree?: boolean): Promise<void> {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to delete notebook file, but notebook is not enabled";
       handleError(error, "Explorer/deleteNotebookFile");
@@ -862,7 +823,9 @@ export default class Explorer {
         return tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), item.path);
       });
     if (openedNotebookTabs.length > 0) {
-      this.showOkModalDialog("Unable to delete file", "This file is being edited. Please close the tab and try again.");
+      useDialog
+        .getState()
+        .showOkModalDialog("Unable to delete file", "This file is being edited. Please close the tab and try again.");
       return Promise.reject();
     }
 
@@ -879,7 +842,7 @@ export default class Explorer {
       return Promise.reject();
     }
 
-    return this.notebookManager?.notebookContentClient.deleteContentItem(item).then(
+    return this.notebookManager?.notebookContentClient.deleteContentItem(item, isGithubTree).then(
       () => logConsoleInfo(`Successfully deleted: ${item.path}`),
       (reason) => logConsoleError(`Failed to delete "${item.path}": ${JSON.stringify(reason)}`)
     );
@@ -888,7 +851,7 @@ export default class Explorer {
   /**
    * This creates a new notebook file, then opens the notebook
    */
-  public onNewNotebookClicked(parent?: NotebookContentItem): void {
+  public onNewNotebookClicked(parent?: NotebookContentItem, isGithubTree?: boolean): void {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to create new notebook, but notebook is not enabled";
       handleError(error, "Explorer/onNewNotebookClicked");
@@ -903,7 +866,7 @@ export default class Explorer {
     });
 
     this.notebookManager?.notebookContentClient
-      .createNewNotebookFile(parent)
+      .createNewNotebookFile(parent, isGithubTree)
       .then((newFile: NotebookContentItem) => {
         logConsoleInfo(`Successfully created: ${newFile.name}`);
         TelemetryProcessor.traceSuccess(
@@ -1121,11 +1084,13 @@ export default class Explorer {
       dataExplorerArea: Constants.Areas.Notebook,
     });
 
-    if (isNotebookEnabled) {
+    if (!userContext.features.notebooksTemporarilyDown) {
-      await this.initNotebooks(userContext.databaseAccount);
+      if (isNotebookEnabled) {
-    } else if (this.notebookToImport) {
+        await this.initNotebooks(userContext.databaseAccount);
-      // if notebooks is not enabled but the user is trying to do a quickstart setup with notebooks, open the SetupNotebooksPane
+      } else if (this.notebookToImport) {
-      this._openSetupNotebooksPaneForQuickstart();
+        // if notebooks is not enabled but the user is trying to do a quickstart setup with notebooks, open the SetupNotebooksPane
+        this._openSetupNotebooksPaneForQuickstart();
+      }
     }
   }
 }

src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts

@@ -12,7 +12,7 @@ export interface GremlinSimpleClientParameters {
   password: string;
   successCallback: (result: Result) => void;
   progressCallback: (result: Result) => void;
-  failureCallback: (result: Result, error: string) => void;
+  failureCallback: (result: Result | null, error: string) => void;
   infoCallback: (msg: string) => void;
 }
 
@@ -62,14 +62,15 @@ export class GremlinSimpleClient {
   private static readonly requestChargeHeader = "x-ms-request-charge";
 
   public params: GremlinSimpleClientParameters;
-  private protocols: string | string[];
+  private ws: WebSocket | undefined;
-  private ws: WebSocket;
 
   public requestsToSend: { [requestId: string]: GremlinRequestMessage };
   public pendingRequests: { [requestId: string]: GremlinRequestMessage };
 
   constructor(params: GremlinSimpleClientParameters) {
     this.params = params;
+    this.ws = undefined;
+
     this.pendingRequests = {};
     this.requestsToSend = {};
   }
@@ -117,7 +118,7 @@ export class GremlinSimpleClient {
     }
   }
 
-  public decodeMessage(msg: MessageEvent): GremlinResponseMessage {
+  public decodeMessage(msg: MessageEvent): GremlinResponseMessage | null {
     if (msg.data === null) {
       return null;
     }
@@ -280,7 +281,7 @@ export class GremlinSimpleClient {
 
   public static utf8ToB64(utf8Str: string) {
     return btoa(
-      encodeURIComponent(utf8Str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
+      encodeURIComponent(utf8Str).replace(/%([0-9A-F]{2})/g, function (_match, p1) {
         return String.fromCharCode(parseInt(p1, 16));
       })
     );
@@ -305,7 +306,7 @@ export class GremlinSimpleClient {
     return binaryMessage;
   }
 
-  private onOpen(event: any) {
+  private onOpen(_event: any) {
     this.executeRequestsToSend();
   }
 
@@ -348,6 +349,6 @@ export class GremlinSimpleClient {
 
   private sendGremlinMessage(gremlinRequestMessage: GremlinRequestMessage) {
     const gremlinFrame = GremlinSimpleClient.buildGremlinMessage(gremlinRequestMessage);
-    this.ws.send(gremlinFrame);
+    this.ws && this.ws.send(gremlinFrame);
   }
 }

src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx

@@ -6,9 +6,9 @@
 
 import * as React from "react";
 import CancelIcon from "../../../../images/cancel.svg";
-import CheckIcon from "../../../../images/check.svg";
+import CheckIcon from "../../../../images/check-1.svg";
 import DeleteIcon from "../../../../images/delete.svg";
-import EditIcon from "../../../../images/edit.svg";
+import EditIcon from "../../../../images/edit-1.svg";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
 import { CollapsiblePanel } from "../../Controls/CollapsiblePanel/CollapsiblePanel";

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts

@@ -103,19 +103,25 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
-      expect(enableNotebookBtn).toBeDefined();
+
-      expect(enableNotebookBtn.disabled).toBe(false);
+      //TODO: modify once notebooks are available
-      expect(enableNotebookBtn.tooltipText).toBe("");
+      expect(enableNotebookBtn).toBeUndefined();
+      //expect(enableNotebookBtn).toBeDefined();
+      //expect(enableNotebookBtn.disabled).toBe(false);
+      //expect(enableNotebookBtn.tooltipText).toBe("");
     });
 
     it("Notebooks is not enabled and is unavailable - button should be shown and disabled", () => {
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
-      expect(enableNotebookBtn).toBeDefined();
+
-      expect(enableNotebookBtn.disabled).toBe(true);
+      //TODO: modify once notebooks are available
-      expect(enableNotebookBtn.tooltipText).toBe(
+      expect(enableNotebookBtn).toBeUndefined();
-        "Notebooks are not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks."
+      //expect(enableNotebookBtn).toBeDefined();
-      );
+      //expect(enableNotebookBtn.disabled).toBe(true);
+      //expect(enableNotebookBtn.tooltipText).toBe(
+      //  "Notebooks are not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks."
+      //);
     });
   });
 
@@ -192,8 +198,11 @@ describe("CommandBarComponentButtonFactory tests", () => {
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
       expect(openMongoShellBtn).toBeDefined();
-      expect(openMongoShellBtn.disabled).toBe(false);
+
-      expect(openMongoShellBtn.tooltipText).toBe("");
+      //TODO: modify once notebooks are available
+      expect(openMongoShellBtn.disabled).toBe(true);
+      //expect(openMongoShellBtn.disabled).toBe(false);
+      //expect(openMongoShellBtn.tooltipText).toBe("");
     });
 
     it("Notebooks is enabled and is available - button should be shown and enabled", () => {
@@ -203,8 +212,11 @@ describe("CommandBarComponentButtonFactory tests", () => {
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
       expect(openMongoShellBtn).toBeDefined();
-      expect(openMongoShellBtn.disabled).toBe(false);
+
-      expect(openMongoShellBtn.tooltipText).toBe("");
+      //TODO: modify once notebooks are available
+      expect(openMongoShellBtn.disabled).toBe(true);
+      //expect(openMongoShellBtn.disabled).toBe(false);
+      //expect(openMongoShellBtn.tooltipText).toBe("");
     });
 
     it("Notebooks is enabled and is available, terminal is unavailable due to ipRules - button should be hidden", () => {
@@ -290,9 +302,13 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
+
       expect(openCassandraShellBtn).toBeDefined();
-      expect(openCassandraShellBtn.disabled).toBe(false);
+
-      expect(openCassandraShellBtn.tooltipText).toBe("");
+      //TODO: modify once notebooks are available
+      expect(openCassandraShellBtn.disabled).toBe(true);
+      //expect(openCassandraShellBtn.disabled).toBe(false);
+      //expect(openCassandraShellBtn.tooltipText).toBe("");
     });
 
     it("Notebooks is enabled and is available - button should be shown and enabled", () => {
@@ -302,8 +318,11 @@ describe("CommandBarComponentButtonFactory tests", () => {
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
       expect(openCassandraShellBtn).toBeDefined();
-      expect(openCassandraShellBtn.disabled).toBe(false);
+
-      expect(openCassandraShellBtn.tooltipText).toBe("");
+      //TODO: modify once notebooks are available
+      expect(openCassandraShellBtn.disabled).toBe(true);
+      //expect(openCassandraShellBtn.disabled).toBe(false);
+      //expect(openCassandraShellBtn.tooltipText).toBe("");
     });
   });
 

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -67,35 +67,50 @@ export function createStaticCommandBarButtons(
     newCollectionBtn.children.push(newDatabaseBtn);
   }
 
-  buttons.push(createDivider());
-
   if (useNotebook.getState().isNotebookEnabled) {
+    buttons.push(createDivider());
+    const notebookButtons: CommandButtonComponentProps[] = [];
+
     const newNotebookButton = createNewNotebookButton(container);
     newNotebookButton.children = [createNewNotebookButton(container), createuploadNotebookButton(container)];
-    buttons.push(newNotebookButton);
+    notebookButtons.push(newNotebookButton);
 
     if (container.notebookManager?.gitHubOAuthService) {
-      buttons.push(createManageGitHubAccountButton(container));
+      notebookButtons.push(createManageGitHubAccountButton(container));
     }
 
-    buttons.push(createOpenTerminalButton(container));
+    notebookButtons.push(createOpenTerminalButton(container));
 
-    buttons.push(createNotebookWorkspaceResetButton(container));
+    notebookButtons.push(createNotebookWorkspaceResetButton(container));
     if (
       (userContext.apiType === "Mongo" &&
         useNotebook.getState().isShellEnabled &&
         selectedNodeState.isDatabaseNodeOrNoneSelected()) ||
       userContext.apiType === "Cassandra"
     ) {
-      buttons.push(createDivider());
+      notebookButtons.push(createDivider());
       if (userContext.apiType === "Cassandra") {
-        buttons.push(createOpenCassandraTerminalButton(container));
+        notebookButtons.push(createOpenCassandraTerminalButton(container));
       } else {
-        buttons.push(createOpenMongoTerminalButton(container));
+        notebookButtons.push(createOpenMongoTerminalButton(container));
       }
     }
+
+    notebookButtons.forEach((btn) => {
+      if (userContext.features.notebooksTemporarilyDown) {
+        if (btn.commandButtonLabel.indexOf("Cassandra") !== -1) {
+          applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.cassandraShellTemporarilyDownMsg);
+        } else if (btn.commandButtonLabel.indexOf("Mongo") !== -1) {
+          applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.mongoShellTemporarilyDownMsg);
+        } else {
+          applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.temporarilyDownMsg);
+        }
+      }
+      buttons.push(btn);
+    });
   } else {
-    if (!isRunningOnNationalCloud()) {
+    if (!isRunningOnNationalCloud() && !userContext.features.notebooksTemporarilyDown) {
+      buttons.push(createDivider());
       buttons.push(createEnableNotebooksButton(container));
     }
   }
@@ -152,7 +167,9 @@ export function createContextCommandBarButtons(
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         if (useNotebook.getState().isShellEnabled) {
-          container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
+          if (!userContext.features.notebooksTemporarilyDown) {
+            container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
+          }
         } else {
           selectedCollection && selectedCollection.onNewMongoShellClick();
         }
@@ -160,7 +177,13 @@ export function createContextCommandBarButtons(
       commandButtonLabel: label,
       ariaLabel: label,
       hasPopup: true,
-      disabled: selectedNodeState.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo",
+      tooltipText:
+        useNotebook.getState().isShellEnabled && userContext.features.notebooksTemporarilyDown
+          ? Constants.Notebook.mongoShellTemporarilyDownMsg
+          : undefined,
+      disabled:
+        (selectedNodeState.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo") ||
+        (useNotebook.getState().isShellEnabled && userContext.features.notebooksTemporarilyDown),
     };
     buttons.push(newMongoShellBtn);
   }
@@ -388,6 +411,13 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
   return buttons;
 }
 
+function applyNotebooksTemporarilyDownStyle(buttonProps: CommandButtonComponentProps, tooltip: string): void {
+  if (!buttonProps.isDivider) {
+    buttonProps.disabled = true;
+    buttonProps.tooltipText = tooltip;
+  }
+}
+
 function createNewNotebookButton(container: Explorer): CommandButtonComponentProps {
   const label = "New Notebook";
   return {

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -22,6 +22,13 @@ import { MemoryTracker } from "./MemoryTrackerComponent";
 export const convertButton = (btns: CommandButtonComponentProps[], backgroundColor: string): ICommandBarItemProps[] => {
   const buttonHeightPx = StyleConstants.CommandBarButtonHeight;
 
+  const getFilter = (isDisabled: boolean): string => {
+    if (isDisabled) {
+      return StyleConstants.GrayScale;
+    }
+    return undefined;
+  };
+
   return btns
     .filter((btn) => btn)
     .map(
@@ -37,6 +44,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
             style: {
               width: StyleConstants.CommandBarIconWidth, // 16
               alignSelf: btn.iconName ? "baseline" : undefined,
+              filter: getFilter(btn.disabled),
             },
             imageProps: btn.iconSrc ? { src: btn.iconSrc, alt: btn.iconAlt } : undefined,
             iconName: btn.iconName,
@@ -123,8 +131,12 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
               width: 12,
               paddingLeft: 1,
               paddingTop: 6,
+              filter: getFilter(btn.disabled),
+            },
+            imageProps: {
+              src: ChevronDownIcon,
+              alt: btn.iconAlt,
             },
-            imageProps: { src: ChevronDownIcon, alt: btn.iconAlt },
           };
         }
 

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -6,7 +6,7 @@ import { Dropdown, IDropdownOption } from "@fluentui/react";
 import * as React from "react";
 import AnimateHeight from "react-animate-height";
 import LoaderIcon from "../../../../images/circular_loader_black_16x16.gif";
-import ClearIcon from "../../../../images/Clear.svg";
+import ClearIcon from "../../../../images/Clear-1.svg";
 import ErrorBlackIcon from "../../../../images/error_black.svg";
 import ErrorRedIcon from "../../../../images/error_red.svg";
 import infoBubbleIcon from "../../../../images/info-bubble-9x9.svg";

src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx

@@ -277,6 +277,10 @@ export class NotebookComponentBootstrapper {
     return selectors.notebook.isDirty(content.model as Immutable.RecordOf<DocumentRecordProps>);
   }
 
+  public isNotebookUntrusted(): boolean {
+    return NotebookUtil.isNotebookUntrusted(this.getStore().getState(), this.contentRef);
+  }
+
   /**
    * For display purposes, only return non-killed kernels
    */

src/Explorer/Notebook/NotebookComponent/VirtualCommandBarComponent.tsx

@@ -1,12 +1,14 @@
 import { AppState, ContentRef, selectors } from "@nteract/core";
 import * as React from "react";
 import { connect } from "react-redux";
+import { NotebookUtil } from "../NotebookUtil";
 import * as NteractUtil from "../NTeractUtil";
 
 interface VirtualCommandBarComponentProps {
   kernelSpecName: string;
   kernelStatus: string;
   currentCellType: string;
+  isNotebookUntrusted: boolean;
   onRender: () => void;
 }
 
@@ -20,7 +22,8 @@ class VirtualCommandBarComponent extends React.Component<VirtualCommandBarCompon
     return (
       this.props.kernelStatus !== nextProps.kernelStatus ||
       this.props.kernelSpecName !== nextProps.kernelSpecName ||
-      this.props.currentCellType !== nextProps.currentCellType
+      this.props.currentCellType !== nextProps.currentCellType ||
+      this.props.isNotebookUntrusted !== nextProps.isNotebookUntrusted
     );
   }
 
@@ -50,6 +53,7 @@ const makeMapStateToProps = (
         kernelStatus,
         kernelSpecName,
         currentCellType,
+        isNotebookUntrusted: NotebookUtil.isNotebookUntrusted(state, contentRef),
       } as VirtualCommandBarComponentProps;
     }
 
@@ -69,6 +73,7 @@ const makeMapStateToProps = (
       kernelStatus,
       kernelSpecName,
       currentCellType,
+      isNotebookUntrusted: NotebookUtil.isNotebookUntrusted(state, contentRef),
       onRender: initialProps.onRender,
     };
   };

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -38,6 +38,7 @@ import { useTabs } from "../../../hooks/useTabs";
 import { Action as TelemetryAction, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { logConsoleError, logConsoleInfo } from "../../../Utils/NotificationConsoleUtils";
+import { useDialog } from "../../Controls/Dialog";
 import * as FileSystemUtil from "../FileSystemUtil";
 import * as cdbActions from "../NotebookComponent/actions";
 import { NotebookUtil } from "../NotebookUtil";
@@ -686,10 +687,8 @@ const handleKernelConnectionLostEpic = (
         logConsoleError(msg);
         logFailureToTelemetry(state, "Kernel restart error", msg);
 
-        const explorer = window.dataExplorer;
+        useDialog.getState().showOkModalDialog("kernel restarts", msg);
-        if (explorer) {
+
-          explorer.showOkModalDialog("kernel restarts", msg);
-        }
         return of(EMPTY);
       }
 
@@ -773,8 +772,7 @@ const closeUnsupportedMimetypesEpic = (
     ofType(actions.FETCH_CONTENT_FULFILLED),
     mergeMap((action) => {
       const mimetype = action.payload.model.mimetype;
-      const explorer = window.dataExplorer;
+      if (!TextFile.handles(mimetype)) {
-      if (explorer && !TextFile.handles(mimetype)) {
         const filepath = action.payload.filepath;
         // Close tab and show error message
         useTabs
@@ -783,7 +781,7 @@ const closeUnsupportedMimetypesEpic = (
             (tab: any) => (tab as any).notebookPath && FileSystemUtil.isPathEqual((tab as any).notebookPath(), filepath)
           );
         const msg = `${filepath} cannot be rendered. Please download the file, in order to view it outside of Data Explorer.`;
-        explorer.showOkModalDialog("File cannot be rendered", msg);
+        useDialog.getState().showOkModalDialog("File cannot be rendered", msg);
         logConsoleError(msg);
       }
       return EMPTY;
@@ -803,19 +801,16 @@ const closeContentFailedToFetchEpic = (
   return action$.pipe(
     ofType(actions.FETCH_CONTENT_FAILED),
     mergeMap((action) => {
-      const explorer = window.dataExplorer;
+      const filepath = action.payload.filepath;
-      if (explorer) {
+      // Close tab and show error message
-        const filepath = action.payload.filepath;
+      useTabs
-        // Close tab and show error message
+        .getState()
-        useTabs
+        .closeTabsByComparator(
-          .getState()
+          (tab: any) => (tab as any).notebookPath && FileSystemUtil.isPathEqual((tab as any).notebookPath(), filepath)
-          .closeTabsByComparator(
+        );
-            (tab: any) => (tab as any).notebookPath && FileSystemUtil.isPathEqual((tab as any).notebookPath(), filepath)
+      const msg = `Failed to load file: ${filepath}.`;
-          );
+      useDialog.getState().showOkModalDialog("Failure to load", msg);
-        const msg = `Failed to load file: ${filepath}.`;
+      logConsoleError(msg);
-        explorer.showOkModalDialog("Failure to load", msg);
-        logConsoleError(msg);
-      }
       return EMPTY;
     })
   );

src/Explorer/Notebook/NotebookContentClient.ts

@@ -36,7 +36,7 @@ export class NotebookContentClient {
    *
    * @param parent parent folder
    */
-  public createNewNotebookFile(parent: NotebookContentItem): Promise<NotebookContentItem> {
+  public createNewNotebookFile(parent: NotebookContentItem, isGithubTree?: boolean): Promise<NotebookContentItem> {
     if (!parent || parent.type !== NotebookContentItemType.Directory) {
       throw new Error(`Parent must be a directory: ${parent}`);
     }
@@ -57,6 +57,8 @@ export class NotebookContentClient {
         const notebookFile = xhr.response;
 
         const item = NotebookUtil.createNotebookContentItem(notebookFile.name, notebookFile.path, notebookFile.type);
+        useNotebook.getState().insertNotebookItem(parent, cloneDeep(item), isGithubTree);
+        // TODO: delete when ResourceTreeAdapter is removed
         if (parent.children) {
           item.parent = parent;
           parent.children.push(item);
@@ -66,9 +68,9 @@ export class NotebookContentClient {
       });
   }
 
-  public async deleteContentItem(item: NotebookContentItem): Promise<void> {
+  public async deleteContentItem(item: NotebookContentItem, isGithubTree?: boolean): Promise<void> {
     const path = await this.deleteNotebookFile(item.path);
-    useNotebook.getState().deleteNotebookItem(item);
+    useNotebook.getState().deleteNotebookItem(item, isGithubTree);
 
     // TODO: Delete once old resource tree is removed
     if (!path || path !== item.path) {
@@ -91,7 +93,8 @@ export class NotebookContentClient {
   public async uploadFileAsync(
     name: string,
     content: string,
-    parent: NotebookContentItem
+    parent: NotebookContentItem,
+    isGithubTree?: boolean
   ): Promise<NotebookContentItem> {
     if (!parent || parent.type !== NotebookContentItemType.Directory) {
       throw new Error(`Parent must be a directory: ${parent}`);
@@ -115,6 +118,8 @@ export class NotebookContentClient {
       .then((xhr: AjaxResponse) => {
         const notebookFile = xhr.response;
         const item = NotebookUtil.createNotebookContentItem(notebookFile.name, notebookFile.path, notebookFile.type);
+        useNotebook.getState().insertNotebookItem(parent, cloneDeep(item), isGithubTree);
+        // TODO: delete when ResourceTreeAdapter is removed
         if (parent.children) {
           item.parent = parent;
           parent.children.push(item);
@@ -137,7 +142,11 @@ export class NotebookContentClient {
    * @param sourcePath
    * @param targetName is not prefixed with path
    */
-  public renameNotebook(item: NotebookContentItem, targetName: string): Promise<NotebookContentItem> {
+  public renameNotebook(
+    item: NotebookContentItem,
+    targetName: string,
+    isGithubTree?: boolean
+  ): Promise<NotebookContentItem> {
     const sourcePath = item.path;
     // Match extension
     if (sourcePath.indexOf(".") !== -1) {
@@ -163,6 +172,9 @@ export class NotebookContentClient {
         item.name = notebookFile.name;
         item.path = notebookFile.path;
         item.timestamp = NotebookUtil.getCurrentTimestamp();
+
+        useNotebook.getState().updateNotebookItem(item, isGithubTree);
+
         return item;
       });
   }
@@ -172,7 +184,11 @@ export class NotebookContentClient {
    * @param parent
    * @param newDirectoryName basename of the new directory
    */
-  public async createDirectory(parent: NotebookContentItem, newDirectoryName: string): Promise<NotebookContentItem> {
+  public async createDirectory(
+    parent: NotebookContentItem,
+    newDirectoryName: string,
+    isGithubTree?: boolean
+  ): Promise<NotebookContentItem> {
     if (parent.type !== NotebookContentItemType.Directory) {
       throw new Error(`Parent is not a directory: ${parent.path}`);
     }
@@ -199,8 +215,11 @@ export class NotebookContentClient {
 
         const dir = xhr.response;
         const item = NotebookUtil.createNotebookContentItem(dir.name, dir.path, dir.type);
+        useNotebook.getState().insertNotebookItem(parent, cloneDeep(item), isGithubTree);
+        // TODO: delete when ResourceTreeAdapter is removed
         item.parent = parent;
         parent.children?.push(item);
+
         return item;
       });
   }

src/Explorer/Notebook/NotebookManager.tsx

@@ -18,6 +18,7 @@ import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstan
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { getFullName } from "../../Utils/UserUtils";
+import { useDialog } from "../Controls/Dialog";
 import Explorer from "../Explorer";
 import { CopyNotebookPane } from "../Panes/CopyNotebookPane/CopyNotebookPane";
 import { GitHubReposPanel } from "../Panes/GitHubReposPanel/GitHubReposPanel";
@@ -172,31 +173,33 @@ export default class NotebookManager {
     if (error.status === HttpStatusCodes.Unauthorized) {
       this.gitHubOAuthService.resetToken();
 
-      this.params.container.showOkCancelModalDialog(
+      useDialog
-        undefined,
+        .getState()
-        "Cosmos DB cannot access your Github account anymore. Please connect to GitHub again.",
+        .showOkCancelModalDialog(
-        "Connect to GitHub",
+          undefined,
-        () =>
+          "Cosmos DB cannot access your Github account anymore. Please connect to GitHub again.",
-          useSidePanel
+          "Connect to GitHub",
-            .getState()
+          () =>
-            .openSidePanel(
+            useSidePanel
-              "Connect to GitHub",
+              .getState()
-              <GitHubReposPanel
+              .openSidePanel(
-                explorer={this.params.container}
+                "Connect to GitHub",
-                gitHubClientProp={this.params.container.notebookManager.gitHubClient}
+                <GitHubReposPanel
-                junoClientProp={this.junoClient}
+                  explorer={this.params.container}
-              />
+                  gitHubClientProp={this.params.container.notebookManager.gitHubClient}
-            ),
+                  junoClientProp={this.junoClient}
-        "Cancel",
+                />
-        undefined
+              ),
-      );
+          "Cancel",
+          undefined
+        );
     }
   };
 
   private promptForCommitMsg = (title: string, primaryButtonLabel: string) => {
     return new Promise<string>((resolve, reject) => {
       let commitMsg = "Committed from Azure Cosmos DB Notebooks";
-      this.params.container.showOkCancelModalDialog(
+      useDialog.getState().showOkCancelModalDialog(
         title || "Commit",
         undefined,
         primaryButtonLabel || "Commit",

src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx

@@ -6,7 +6,7 @@ import CodeMirrorEditor from "@nteract/stateful-components/lib/inputs/connected-
 import { PassedEditorProps } from "@nteract/stateful-components/lib/inputs/editor";
 import * as React from "react";
 import { DndProvider } from "react-dnd";
-import HTML5Backend from "react-dnd-html5-backend";
+import { HTML5Backend } from "react-dnd-html5-backend";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import { userContext } from "../../../UserContext";
@@ -14,6 +14,7 @@ import * as cdbActions from "../NotebookComponent/actions";
 import loadTransform from "../NotebookComponent/loadTransform";
 import { CdbAppState, SnapshotFragment, SnapshotRequest } from "../NotebookComponent/types";
 import { NotebookUtil } from "../NotebookUtil";
+import SecurityWarningBar from "../SecurityWarningBar/SecurityWarningBar";
 import { AzureTheme } from "./AzureTheme";
 import "./base.css";
 import CellCreator from "./decorators/CellCreator";
@@ -107,6 +108,7 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
     return (
       <>
         <div className="NotebookRendererContainer">
+          <SecurityWarningBar contentRef={this.props.contentRef} />
           <div className="NotebookRenderer" ref={this.notebookRendererRef}>
             <DndProvider backend={HTML5Backend}>
               <KeyboardShortcuts contentRef={this.props.contentRef}>

src/Explorer/Notebook/NotebookRenderer/Prompt.less

@@ -19,6 +19,12 @@
     }
 }
 
+.disabledRunCellButton {
+    .runCellButton .ms-Button-flexContainer .ms-Button-icon {
+        color: @BaseMediumHigh;
+    }
+}
+
 .greyStopButton {
     .runCellButton .ms-Button-flexContainer .ms-Button-icon {
         color: @BaseMediumHigh;

src/Explorer/Notebook/NotebookRenderer/Prompt.tsx

@@ -5,6 +5,7 @@ import { Dispatch } from "redux";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as cdbActions from "../NotebookComponent/actions";
 import { CdbAppState } from "../NotebookComponent/types";
+import { NotebookUtil } from "../NotebookUtil";
 
 export interface PassedPromptProps {
   id: string;
@@ -12,6 +13,7 @@ export interface PassedPromptProps {
   status?: string;
   executionCount?: number;
   isHovered?: boolean;
+  isRunDisabled?: boolean;
   runCell?: () => void;
   stopCell?: () => void;
 }
@@ -20,6 +22,7 @@ interface ComponentProps {
   id: string;
   contentRef: ContentRef;
   isHovered?: boolean;
+  isNotebookUntrusted?: boolean;
   children: (props: PassedPromptProps) => React.ReactNode;
 }
 
@@ -47,6 +50,7 @@ export class PromptPure extends React.Component<Props> {
           runCell: this.props.executeCell,
           stopCell: this.props.stopExecution,
           isHovered: this.props.isHovered,
+          isRunDisabled: this.props.isNotebookUntrusted,
         })}
       </div>
     );
@@ -75,6 +79,7 @@ const makeMapStateToProps = (_state: CdbAppState, ownProps: ComponentProps): ((s
       status,
       executionCount,
       isHovered,
+      isNotebookUntrusted: NotebookUtil.isNotebookUntrusted(state, contentRef),
     };
   };
   return mapStateToProps;

src/Explorer/Notebook/NotebookRenderer/PromptContent.test.tsx

@@ -0,0 +1,27 @@
+import { shallow } from "enzyme";
+import { PassedPromptProps } from "./Prompt";
+import { promptContent } from "./PromptContent";
+
+describe("PromptContent", () => {
+  it("renders for busy status", () => {
+    const props: PassedPromptProps = {
+      id: "id",
+      contentRef: "contentRef",
+      status: "busy",
+    };
+    const wrapper = shallow(promptContent(props));
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders when hovered", () => {
+    const props: PassedPromptProps = {
+      id: "id",
+      contentRef: "contentRef",
+      isHovered: true,
+    };
+    const wrapper = shallow(promptContent(props));
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/Notebook/NotebookRenderer/PromptContent.tsx

@@ -1,5 +1,6 @@
 import { IconButton, Spinner, SpinnerSize } from "@fluentui/react";
 import * as React from "react";
+import { NotebookUtil } from "../NotebookUtil";
 import { PassedPromptProps } from "./Prompt";
 import "./Prompt.less";
 
@@ -23,15 +24,18 @@ export const promptContent = (props: PassedPromptProps): JSX.Element => {
       </div>
     );
   } else if (props.isHovered) {
-    const playButtonText = "Run cell";
+    const playButtonText = props.isRunDisabled ? NotebookUtil.UntrustedNotebookRunHint : "Run cell";
     return (
-      <IconButton
+      <div className={props.isRunDisabled ? "disabledRunCellButton" : ""}>
-        className="runCellButton"
+        <IconButton
-        iconProps={{ iconName: "MSNVideosSolid" }}
+          className="runCellButton"
-        title={playButtonText}
+          iconProps={{ iconName: "MSNVideosSolid" }}
-        ariaLabel={playButtonText}
+          title={playButtonText}
-        onClick={props.runCell}
+          ariaLabel={playButtonText}
-      />
+          disabled={props.isRunDisabled}
+          onClick={props.runCell}
+        />
+      </div>
     );
   } else {
     return <div style={{ paddingTop: 7 }}>{promptText(props)}</div>;

src/Explorer/Notebook/NotebookRenderer/Toolbar.tsx

@@ -36,6 +36,7 @@ interface StateProps {
   cellIdAbove: CellId;
   cellIdBelow: CellId;
   hasCodeOutput: boolean;
+  isNotebookUntrusted: boolean;
 }
 
 class BaseToolbar extends React.PureComponent<ComponentProps & DispatchProps & StateProps> {
@@ -43,12 +44,16 @@ class BaseToolbar extends React.PureComponent<ComponentProps & DispatchProps & S
 
   render(): JSX.Element {
     let items: IContextualMenuItem[] = [];
+    const isNotebookUntrusted = this.props.isNotebookUntrusted;
+    const runTooltip = isNotebookUntrusted ? NotebookUtil.UntrustedNotebookRunHint : undefined;
 
     if (this.props.cellType === "code") {
       items = items.concat([
         {
           key: "Run",
           text: "Run",
+          title: runTooltip,
+          disabled: isNotebookUntrusted,
           onClick: () => {
             this.props.executeCell();
             this.props.traceNotebookTelemetry(Action.NotebooksExecuteCellFromMenu, ActionModifiers.Mark);
@@ -223,6 +228,7 @@ const makeMapStateToProps = (state: AppState, ownProps: ComponentProps): ((state
       cellIdAbove,
       cellIdBelow,
       hasCodeOutput: cellType === "code" && NotebookUtil.hasCodeCellOutput(cell as ImmutableCodeCell),
+      isNotebookUntrusted: NotebookUtil.isNotebookUntrusted(state, ownProps.contentRef),
     };
   };
   return mapStateToProps;

src/Explorer/Notebook/NotebookRenderer/__snapshots__/PromptContent.test.tsx.snap

@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PromptContent renders for busy status 1`] = `
+<div
+  className="greyStopButton"
+  style={
+    Object {
+      "left": 0,
+      "maxHeight": "100%",
+      "position": "sticky",
+      "top": 0,
+      "width": "100%",
+      "zIndex": 300,
+    }
+  }
+>
+  <CustomizedIconButton
+    ariaLabel="Stop cell execution"
+    className="runCellButton"
+    iconProps={
+      Object {
+        "iconName": "CircleStopSolid",
+      }
+    }
+    style={
+      Object {
+        "position": "absolute",
+      }
+    }
+    title="Stop cell execution"
+  />
+  <StyledSpinnerBase
+    size={3}
+    style={
+      Object {
+        "paddingTop": 5,
+        "position": "absolute",
+        "width": "100%",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`PromptContent renders when hovered 1`] = `
+<div
+  className=""
+>
+  <CustomizedIconButton
+    ariaLabel="Run cell"
+    className="runCellButton"
+    iconProps={
+      Object {
+        "iconName": "MSNVideosSolid",
+      }
+    }
+    title="Run cell"
+  />
+</div>
+`;

src/Explorer/Notebook/NotebookRenderer/decorators/draggable/index.tsx

@@ -11,7 +11,6 @@ import {
   DropTargetConnector,
   DropTargetMonitor,
 } from "react-dnd";
-
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import styled, { StyledComponent } from "styled-components";
@@ -123,9 +122,10 @@ export const cellTarget = {
   drop(props: Props, monitor: DropTargetMonitor, component: any): void {
     if (monitor) {
       const hoverUpperHalf = isDragUpper(props, monitor, component.el);
+      const item: Props = monitor.getItem();
       // DropTargetSpec monitor definition could be undefined. we'll need a check for monitor in order to pass validation.
       props.moveCell({
-        id: monitor.getItem().id,
+        id: item.id,
         destinationId: props.id,
         above: hoverUpperHalf,
         contentRef: props.contentRef,

src/Explorer/Notebook/NotebookRenderer/decorators/kbd-shortcuts/index.tsx

@@ -4,6 +4,7 @@ import Immutable from "immutable";
 import React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
+import { NotebookUtil } from "../../../NotebookUtil";
 
 interface ComponentProps {
   contentRef: ContentRef;
@@ -14,6 +15,7 @@ interface StateProps {
   cellMap: Immutable.Map<string, any>;
   cellOrder: Immutable.List<string>;
   focusedCell?: string | null;
+  isNotebookUntrusted: boolean;
 }
 
 interface DispatchProps {
@@ -59,8 +61,13 @@ export class KeyboardShortcuts extends React.Component<Props> {
       cellOrder,
       focusedCell,
       cellMap,
+      isNotebookUntrusted,
     } = this.props;
 
+    if (isNotebookUntrusted) {
+      return;
+    }
+
     let ctrlKeyPressed = e.ctrlKey;
     // Allow cmd + enter (macOS) to operate like ctrl + enter
     if (process.platform === "darwin") {
@@ -125,6 +132,7 @@ export const makeMapStateToProps = (_state: AppState, ownProps: ComponentProps)
       cellOrder,
       cellMap,
       focusedCell,
+      isNotebookUntrusted: NotebookUtil.isNotebookUntrusted(state, contentRef),
     };
   };
   return mapStateToProps;

src/Explorer/Notebook/NotebookUtil.ts

@@ -1,4 +1,5 @@
 import { ImmutableCodeCell, ImmutableNotebook } from "@nteract/commutable";
+import { AppState, selectors } from "@nteract/core";
 import domtoimage from "dom-to-image";
 import Html2Canvas from "html2canvas";
 import path from "path";
@@ -11,6 +12,8 @@ import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentI
 export type FileType = "directory" | "file" | "notebook";
 // Utilities for notebooks
 export class NotebookUtil {
+  public static UntrustedNotebookRunHint = "Please trust notebook first before running any code cells";
+
   /**
    * It's a notebook file if the filename ends with .ipynb.
    */
@@ -153,6 +156,16 @@ export class NotebookUtil {
     );
   }
 
+  public static isNotebookUntrusted(state: AppState, contentRef: string): boolean {
+    const content = selectors.content(state, { contentRef });
+    if (content?.type === "notebook") {
+      const metadata = selectors.notebook.metadata(content.model);
+      return metadata.getIn(["untrusted"]) as boolean;
+    }
+
+    return false;
+  }
+
   /**
    * Find code cells with display
    * @param notebookObject

src/Explorer/Notebook/SecurityWarningBar/SecurityWarningBar.test.tsx

@@ -0,0 +1,31 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { SecurityWarningBar } from "./SecurityWarningBar";
+
+describe("SecurityWarningBar", () => {
+  it("renders if notebook is untrusted", () => {
+    const wrapper = shallow(
+      <SecurityWarningBar
+        contentRef={"contentRef"}
+        isNotebookUntrusted={true}
+        markNotebookAsTrusted={undefined}
+        saveNotebook={undefined}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders if notebook is trusted", () => {
+    const wrapper = shallow(
+      <SecurityWarningBar
+        contentRef={"contentRef"}
+        isNotebookUntrusted={false}
+        markNotebookAsTrusted={undefined}
+        saveNotebook={undefined}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/Notebook/SecurityWarningBar/SecurityWarningBar.tsx

@@ -0,0 +1,93 @@
+import { MessageBar, MessageBarButton, MessageBarType } from "@fluentui/react";
+import { actions, AppState } from "@nteract/core";
+import React from "react";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { NotebookUtil } from "../NotebookUtil";
+
+export interface SecurityWarningBarPureProps {
+  contentRef: string;
+}
+
+interface SecurityWarningBarDispatchProps {
+  markNotebookAsTrusted: (contentRef: string) => void;
+  saveNotebook: (contentRef: string) => void;
+}
+
+type SecurityWarningBarProps = SecurityWarningBarPureProps & StateProps & SecurityWarningBarDispatchProps;
+
+interface SecurityWarningBarState {
+  isBarDismissed: boolean;
+}
+
+export class SecurityWarningBar extends React.Component<SecurityWarningBarProps, SecurityWarningBarState> {
+  constructor(props: SecurityWarningBarProps) {
+    super(props);
+
+    this.state = {
+      isBarDismissed: false,
+    };
+  }
+
+  render(): JSX.Element {
+    return this.props.isNotebookUntrusted && !this.state.isBarDismissed ? (
+      <MessageBar
+        messageBarType={MessageBarType.warning}
+        isMultiline={false}
+        onDismiss={() => this.setState({ isBarDismissed: true })}
+        dismissButtonAriaLabel="Close"
+        actions={
+          <MessageBarButton
+            onClick={() => {
+              this.props.markNotebookAsTrusted(this.props.contentRef);
+              this.props.saveNotebook(this.props.contentRef);
+            }}
+          >
+            Trust Notebook
+          </MessageBarButton>
+        }
+      >
+        {" "}
+        This notebook was downloaded from the public gallery. Running code cells from a notebook authored by someone
+        else may involve security risks.
+      </MessageBar>
+    ) : (
+      <></>
+    );
+  }
+}
+
+interface StateProps {
+  isNotebookUntrusted: boolean;
+}
+
+interface InitialProps {
+  contentRef: string;
+}
+
+// Redux
+const makeMapStateToProps = (state: AppState, initialProps: InitialProps) => {
+  const mapStateToProps = (state: AppState): StateProps => ({
+    isNotebookUntrusted: NotebookUtil.isNotebookUntrusted(state, initialProps.contentRef),
+  });
+  return mapStateToProps;
+};
+
+const makeMapDispatchToProps = () => {
+  const mapDispatchToProps = (dispatch: Dispatch): SecurityWarningBarDispatchProps => {
+    return {
+      markNotebookAsTrusted: (contentRef: string) => {
+        return dispatch(
+          actions.deleteMetadataField({
+            contentRef,
+            field: "untrusted",
+          })
+        );
+      },
+      saveNotebook: (contentRef: string) => dispatch(actions.save({ contentRef })),
+    };
+  };
+  return mapDispatchToProps;
+};
+
+export default connect(makeMapStateToProps, makeMapDispatchToProps)(SecurityWarningBar);

src/Explorer/Notebook/SecurityWarningBar/__snapshots__/SecurityWarningBar.test.tsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SecurityWarningBar renders if notebook is trusted 1`] = `<Fragment />`;
+
+exports[`SecurityWarningBar renders if notebook is untrusted 1`] = `
+<StyledMessageBar
+  actions={
+    <CustomizedMessageBarButton
+      onClick={[Function]}
+    >
+      Trust Notebook
+    </CustomizedMessageBarButton>
+  }
+  dismissButtonAriaLabel="Close"
+  isMultiline={false}
+  messageBarType={5}
+  onDismiss={[Function]}
+>
+   
+  This notebook was downloaded from the public gallery. Running code cells from a notebook authored by someone else may involve security risks.
+</StyledMessageBar>
+`;

src/Explorer/Notebook/useNotebook.ts

@@ -38,8 +38,9 @@ interface NotebookState {
   setNotebookBasePath: (notebookBasePath: string) => void;
   refreshNotebooksEnabledStateForAccount: () => Promise<void>;
   findItem: (root: NotebookContentItem, item: NotebookContentItem) => NotebookContentItem;
-  updateNotebookItem: (item: NotebookContentItem) => void;
+  insertNotebookItem: (parent: NotebookContentItem, item: NotebookContentItem, isGithubTree?: boolean) => void;
-  deleteNotebookItem: (item: NotebookContentItem) => void;
+  updateNotebookItem: (item: NotebookContentItem, isGithubTree?: boolean) => void;
+  deleteNotebookItem: (item: NotebookContentItem, isGithubTree?: boolean) => void;
   initializeNotebooksTree: (notebookManager: NotebookManager) => Promise<void>;
   initializeGitHubRepos: (pinnedRepos: IPinnedRepo[]) => void;
 }
@@ -141,19 +142,30 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
 
     return undefined;
   },
-  updateNotebookItem: (item: NotebookContentItem): void => {
+  insertNotebookItem: (parent: NotebookContentItem, item: NotebookContentItem, isGithubTree?: boolean): void => {
-    const root = cloneDeep(get().myNotebooksContentRoot);
+    const root = isGithubTree ? cloneDeep(get().gitHubNotebooksContentRoot) : cloneDeep(get().myNotebooksContentRoot);
+    const parentItem = get().findItem(root, parent);
+    item.parent = parentItem;
+    if (parentItem.children) {
+      parentItem.children.push(item);
+    } else {
+      parentItem.children = [item];
+    }
+    isGithubTree ? set({ gitHubNotebooksContentRoot: root }) : set({ myNotebooksContentRoot: root });
+  },
+  updateNotebookItem: (item: NotebookContentItem, isGithubTree?: boolean): void => {
+    const root = isGithubTree ? cloneDeep(get().gitHubNotebooksContentRoot) : cloneDeep(get().myNotebooksContentRoot);
     const parentItem = get().findItem(root, item.parent);
     parentItem.children = parentItem.children.filter((child) => child.path !== item.path);
     parentItem.children.push(item);
     item.parent = parentItem;
-    set({ myNotebooksContentRoot: root });
+    isGithubTree ? set({ gitHubNotebooksContentRoot: root }) : set({ myNotebooksContentRoot: root });
   },
-  deleteNotebookItem: (item: NotebookContentItem): void => {
+  deleteNotebookItem: (item: NotebookContentItem, isGithubTree?: boolean): void => {
-    const root = cloneDeep(get().myNotebooksContentRoot);
+    const root = isGithubTree ? cloneDeep(get().gitHubNotebooksContentRoot) : cloneDeep(get().myNotebooksContentRoot);
     const parentItem = get().findItem(root, item.parent);
     parentItem.children = parentItem.children.filter((child) => child.path !== item.path);
-    set({ myNotebooksContentRoot: root });
+    isGithubTree ? set({ gitHubNotebooksContentRoot: root }) : set({ myNotebooksContentRoot: root });
   },
   initializeNotebooksTree: async (notebookManager: NotebookManager): Promise<void> => {
     const myNotebooksContentRoot = {
@@ -216,6 +228,7 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
           path: "PsuedoDir",
           type: NotebookContentItemType.Directory,
           children: [],
+          parent: gitHubNotebooksContentRoot,
         };
 
         pinnedRepo.branches.forEach((branch) => {
@@ -223,6 +236,7 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
             name: branch.name,
             path: GitHubUtils.toContentUri(pinnedRepo.owner, pinnedRepo.name, branch.name, ""),
             type: NotebookContentItemType.Directory,
+            parent: repoTreeItem,
           });
         });
 

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -113,11 +113,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       collectionId: "",
       enableIndexing: true,
       isSharded: userContext.apiType !== "Tables",
-      partitionKey:
+      partitionKey: this.getPartitionKey(),
-        (userContext.features.partitionKeyDefault && userContext.apiType === "SQL") ||
-        (userContext.features.partitionKeyDefault && userContext.apiType === "Mongo")
-          ? "/id"
-          : "",
       enableDedicatedThroughput: false,
       createMongoWildCardIndex: isCapabilityEnabled("EnableMongo"),
       useHashV2: false,
@@ -554,6 +550,72 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             </Stack>
           )}
 
+          {this.shouldShowAnalyticalStoreOptions() && (
+            <Stack className="panelGroupSpacing">
+              <Stack horizontal>
+                <Text className="panelTextBold" variant="small">
+                  Analytical store
+                </Text>
+                <TooltipHost
+                  directionalHint={DirectionalHint.bottomLeftEdge}
+                  content={this.getAnalyticalStorageTooltipContent()}
+                >
+                  <Icon iconName="Info" className="panelInfoIcon" />
+                </TooltipHost>
+              </Stack>
+
+              <Stack horizontal verticalAlign="center">
+                <input
+                  className="panelRadioBtn"
+                  checked={this.state.enableAnalyticalStore}
+                  disabled={!this.isSynapseLinkEnabled()}
+                  aria-label="Enable analytical store"
+                  aria-checked={this.state.enableAnalyticalStore}
+                  name="analyticalStore"
+                  type="radio"
+                  role="radio"
+                  id="enableAnalyticalStoreBtn"
+                  tabIndex={0}
+                  onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
+                />
+                <span className="panelRadioBtnLabel">On</span>
+
+                <input
+                  className="panelRadioBtn"
+                  checked={!this.state.enableAnalyticalStore}
+                  disabled={!this.isSynapseLinkEnabled()}
+                  aria-label="Disable analytical store"
+                  aria-checked={!this.state.enableAnalyticalStore}
+                  name="analyticalStore"
+                  type="radio"
+                  role="radio"
+                  id="disableAnalyticalStoreBtn"
+                  tabIndex={0}
+                  onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
+                />
+                <span className="panelRadioBtnLabel">Off</span>
+              </Stack>
+
+              {!this.isSynapseLinkEnabled() && (
+                <Stack className="panelGroupSpacing">
+                  <Text variant="small">
+                    Azure Synapse Link is required for creating an analytical store{" "}
+                    {getCollectionName().toLocaleLowerCase()}. Enable Synapse Link for this Cosmos DB account.{" "}
+                    <Link href="https://aka.ms/cosmosdb-synapselink" target="_blank">
+                      Learn more
+                    </Link>
+                  </Text>
+                  <DefaultButton
+                    text="Enable"
+                    onClick={() => this.props.explorer.openEnableSynapseLinkDialog()}
+                    style={{ height: 27, width: 80 }}
+                    styles={{ label: { fontSize: 12 } }}
+                  />
+                </Stack>
+              )}
+            </Stack>
+          )}
+
           {userContext.apiType !== "Tables" && (
             <CollapsibleSectionComponent
               title="Advanced"
@@ -608,72 +670,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     }
                   />
                 )}
-
-                {this.shouldShowAnalyticalStoreOptions() && (
-                  <Stack className="panelGroupSpacing">
-                    <Stack horizontal>
-                      <Text className="panelTextBold" variant="small">
-                        Analytical store
-                      </Text>
-                      <TooltipHost
-                        directionalHint={DirectionalHint.bottomLeftEdge}
-                        content={this.getAnalyticalStorageTooltipContent()}
-                      >
-                        <Icon iconName="Info" className="panelInfoIcon" />
-                      </TooltipHost>
-                    </Stack>
-
-                    <Stack horizontal verticalAlign="center">
-                      <input
-                        className="panelRadioBtn"
-                        checked={this.state.enableAnalyticalStore}
-                        disabled={!this.isSynapseLinkEnabled()}
-                        aria-label="Enable analytical store"
-                        aria-checked={this.state.enableAnalyticalStore}
-                        name="analyticalStore"
-                        type="radio"
-                        role="radio"
-                        id="enableAnalyticalStoreBtn"
-                        tabIndex={0}
-                        onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
-                      />
-                      <span className="panelRadioBtnLabel">On</span>
-
-                      <input
-                        className="panelRadioBtn"
-                        checked={!this.state.enableAnalyticalStore}
-                        disabled={!this.isSynapseLinkEnabled()}
-                        aria-label="Disable analytical store"
-                        aria-checked={!this.state.enableAnalyticalStore}
-                        name="analyticalStore"
-                        type="radio"
-                        role="radio"
-                        id="disableAnalyticalStoreBtn"
-                        tabIndex={0}
-                        onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
-                      />
-                      <span className="panelRadioBtnLabel">Off</span>
-                    </Stack>
-
-                    {!this.isSynapseLinkEnabled() && (
-                      <Stack className="panelGroupSpacing">
-                        <Text variant="small">
-                          Azure Synapse Link is required for creating an analytical store{" "}
-                          {getCollectionName().toLocaleLowerCase()}. Enable Synapse Link for this Cosmos DB account.{" "}
-                          <Link href="https://aka.ms/cosmosdb-synapselink" target="_blank">
-                            Learn more
-                          </Link>
-                        </Text>
-                        <DefaultButton
-                          text="Enable"
-                          onClick={() => this.props.explorer.openEnableSynapseLinkDialog()}
-                          style={{ height: 27, width: 80 }}
-                          styles={{ label: { fontSize: 12 } }}
-                        />
-                      </Stack>
-                    )}
-                  </Stack>
-                )}
               </Stack>
             </CollapsibleSectionComponent>
           )}
@@ -815,6 +811,19 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     return tooltipText;
   }
 
+  private getPartitionKey(): string {
+    if (userContext.apiType !== "SQL" && userContext.apiType !== "Mongo") {
+      return "";
+    }
+    if (userContext.features.partitionKeyDefault) {
+      return userContext.apiType === "SQL" ? "/id" : "_id";
+    }
+    if (userContext.features.partitionKeyDefault2) {
+      return userContext.apiType === "SQL" ? "/pk" : "pk";
+    }
+    return "";
+  }
+
   private getPartitionKeySubtext(): string {
     if (
       userContext.features.partitionKeyDefault &&

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx

@@ -98,6 +98,7 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
 
   const copyNotebook = async (location: Location): Promise<NotebookContentItem> => {
     let parent: NotebookContentItem;
+    let isGithubTree: boolean;
     switch (location.type) {
       case "MyNotebooks":
         parent = {
@@ -105,21 +106,23 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
           path: useNotebook.getState().notebookBasePath,
           type: NotebookContentItemType.Directory,
         };
+        isGithubTree = false;
         break;
 
       case "GitHub":
         parent = {
-          name: ResourceTreeAdapter.GitHubReposTitle,
+          name: selectedLocation.branch,
           path: GitHubUtils.toContentUri(selectedLocation.owner, selectedLocation.repo, selectedLocation.branch, ""),
           type: NotebookContentItemType.Directory,
         };
+        isGithubTree = true;
         break;
 
       default:
         throw new Error(`Unsupported location type ${location.type}`);
     }
 
-    return container.uploadFile(name, content, parent);
+    return container.uploadFile(name, content, parent, isGithubTree);
   };
 
   const onDropDownChange = (_: FormEvent<HTMLDivElement>, option?: IDropdownOption): void => {

src/Explorer/Panes/PublishNotebookPane/PublishNotebookPane.tsx

@@ -105,7 +105,6 @@ export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> =
         notebookName,
         notebookDescription,
         notebookTags?.split(","),
-        author,
         imageSrc,
         content
       );

src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx

@@ -91,9 +91,7 @@ export const UploadItemsPane: FunctionComponent = () => {
           accept="application/json"
           multiple
           tabIndex={0}
-          tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON
+          tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON documents. The combined size of all files in an individual upload operation must be less than 2 MB. You can perform multiple upload operations for larger data sets."
-              documents. The combined size of all files in an individual upload operation must be less than 2 MB. You
-              can perform multiple upload operations for larger data sets."
         />
         {uploadFileData?.length > 0 && (
           <div className="fileUploadSummaryContainer">

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -83,7 +83,11 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
   public render(): JSX.Element {
     const mainItems = this.createMainItems();
     const commonTaskItems = this.createCommonTaskItems();
-    const recentItems = this.createRecentItems();
+    let recentItems = this.createRecentItems();
+    if (userContext.features.notebooksTemporarilyDown) {
+      recentItems = recentItems.filter((item) => item.description !== "Notebook");
+    }
+
     const tipsItems = this.createTipsItems();
     const onClearRecent = this.clearMostRecent;
 
@@ -219,7 +223,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
       });
     }
 
-    if (useNotebook.getState().isNotebookEnabled) {
+    if (useNotebook.getState().isNotebookEnabled && !userContext.features.notebooksTemporarilyDown) {
       heroes.push({
         iconSrc: NewNotebookIcon,
         title: "New Notebook",

src/Explorer/Tables/DataTable/TableCommands.ts

@@ -1,5 +1,6 @@
 import Q from "q";
 import { userContext } from "../../../UserContext";
+import { useDialog } from "../../Controls/Dialog";
 import Explorer from "../../Explorer";
 import * as Entities from "../Entities";
 import * as DataTableUtilities from "./DataTableUtilities";
@@ -69,19 +70,28 @@ export default class TableCommands {
       return null; // Error
     }
     var entitiesToDelete: Entities.ITableEntity[] = viewModel.selected();
-    let deleteMessage: string = "Are you sure you want to delete the selected entities?";
+    const deleteMessage: string =
-    if (userContext.apiType === "Cassandra") {
+      userContext.apiType === "Cassandra"
-      deleteMessage = "Are you sure you want to delete the selected rows?";
+        ? "Are you sure you want to delete the selected rows?"
-    }
+        : "Are you sure you want to delete the selected entities?";
-    if (window.confirm(deleteMessage)) {
+
-      viewModel.queryTablesTab.container.tableDataClient
+    useDialog.getState().showOkCancelModalDialog(
-        .deleteDocuments(viewModel.queryTablesTab.collection, entitiesToDelete)
+      "Confirm delete",
-        .then((results: any) => {
+      deleteMessage,
-          return viewModel.removeEntitiesFromCache(entitiesToDelete).then(() => {
+      "Delete",
-            viewModel.redrawTableThrottled();
+      () => {
+        viewModel.queryTablesTab.container.tableDataClient
+          .deleteDocuments(viewModel.queryTablesTab.collection, entitiesToDelete)
+          .then((results: any) => {
+            return viewModel.removeEntitiesFromCache(entitiesToDelete).then(() => {
+              viewModel.redrawTableThrottled();
+            });
           });
-        });
+      },
-    }
+      "Cancel",
+      undefined
+    );
+
     return null;
   }
 

src/Explorer/Tabs/ConflictsTab.ts

@@ -21,6 +21,7 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
+import { useDialog } from "../Controls/Dialog";
 import Explorer from "../Explorer";
 import { AccessibleVerticalList } from "../Tree/AccessibleVerticalList";
 import ConflictId from "../Tree/ConflictId";
@@ -228,7 +229,7 @@ export default class ConflictsTab extends TabsBase {
       this._documentsIterator = this.createIterator();
       await this.loadNextPage();
     } catch (error) {
-      window.alert(getErrorMessage(error));
+      useDialog.getState().showOkModalDialog("Refresh documents grid failed", getErrorMessage(error));
     }
   }
 
@@ -252,10 +253,23 @@ export default class ConflictsTab extends TabsBase {
   }
 
   public onAcceptChangesClick = async (): Promise<void> => {
-    if (this.isEditorDirty() && !this._isIgnoreDirtyEditor()) {
+    if (this.isEditorDirty()) {
-      return;
+      useDialog
+        .getState()
+        .showOkCancelModalDialog(
+          "Unsaved changes",
+          "Changes will be lost. Do you want to continue?",
+          "OK",
+          async () => await this.resolveConflict(),
+          "Cancel",
+          undefined
+        );
+    } else {
+      await this.resolveConflict();
     }
+  };
 
+  private resolveConflict = async (): Promise<void> => {
     this.isExecutionError(false);
     this.isExecuting(true);
 
@@ -318,7 +332,7 @@ export default class ConflictsTab extends TabsBase {
     } catch (error) {
       this.isExecutionError(true);
       const errorMessage = getErrorMessage(error);
-      window.alert(errorMessage);
+      useDialog.getState().showOkModalDialog("Resolve conflict failed", errorMessage);
       TelemetryProcessor.traceFailure(
         Action.ResolveConflict,
         {
@@ -372,7 +386,7 @@ export default class ConflictsTab extends TabsBase {
     } catch (error) {
       this.isExecutionError(true);
       const errorMessage = getErrorMessage(error);
-      window.alert(errorMessage);
+      useDialog.getState().showOkModalDialog("Delete conflict failed", errorMessage);
       TelemetryProcessor.traceFailure(
         Action.DeleteConflict,
         {
@@ -662,11 +676,6 @@ export default class ConflictsTab extends TabsBase {
     return jsonObject;
   }
 
-  private _isIgnoreDirtyEditor = (): boolean => {
-    var msg: string = "Changes will be lost. Do you want to continue?";
-    return window.confirm(msg);
-  };
-
   private _getPartitionKeyPropertyHeader(): string {
     return (
       (this.partitionKey &&

src/Explorer/Tabs/DocumentTabUtils.tsx

@@ -1,145 +0,0 @@
-import { extractPartitionKey, PartitionKeyDefinition } from "@azure/cosmos";
-import { IColumn, IImageProps, ImageFit } from "@fluentui/react";
-import { Resource } from "../../../src/Contracts/DataModels";
-import * as DataModels from "../../Contracts/DataModels";
-import DocumentId from "../Tree/DocumentId";
-
-export interface IDocumentsTabContentState {
-  columns: IColumn[];
-  isModalSelection: boolean;
-  isCompactMode: boolean;
-  announcedMessage?: string;
-  isSuggestionVisible: boolean;
-  filter: string;
-  isFilterOptionVisible: boolean;
-  isEditorVisible: boolean;
-  documentContent: string;
-  selectedSqlDocumentContent: string;
-  documentIds: Array<DocumentId>;
-  documentSqlIds: Array<Resource>;
-  selectedDocumentId?: DocumentId;
-  selectedSqlDocumentId?: DocumentId;
-  isEditorContentEdited: boolean;
-  isAllDocumentsVisible: boolean;
-}
-
-export interface IDocument {
-  value: string;
-  id: string;
-}
-
-export interface IButton {
-  visible: boolean;
-  enabled: boolean;
-  isSelected?: boolean;
-}
-
-export const imageProps: Partial<IImageProps> = {
-  imageFit: ImageFit.centerContain,
-  width: 40,
-  height: 40,
-  style: { marginTop: "15px" },
-};
-
-export function hasShardKeySpecified(
-  document: string,
-  partitionKey: DataModels.PartitionKey,
-  partitionKeyProperty: string
-): boolean {
-  return Boolean(
-    extractPartitionKey(
-      document,
-      getPartitionKeyDefinition(partitionKey, partitionKeyProperty) as PartitionKeyDefinition
-    )
-  );
-}
-
-export function getPartitionKeyDefinition(
-  partitionKey: DataModels.PartitionKey,
-  partitionKeyProperty: string
-): DataModels.PartitionKey {
-  if (partitionKey?.paths?.[0]?.indexOf("$v") > -1) {
-    // Convert BsonSchema2 to /path format
-    partitionKey = {
-      kind: partitionKey.kind,
-      paths: ["/" + partitionKeyProperty.replace(/\./g, "/")],
-      version: partitionKey.version,
-    };
-  }
-  return partitionKey;
-}
-
-export function formatDocumentContent(row: DocumentId): string {
-  const { partitionKeyProperty, partitionKeyValue, id } = row;
-  const documentContent = JSON.stringify({
-    _id: id(),
-    [partitionKeyProperty]: partitionKeyValue || "",
-  });
-  const formattedDocumentContent = documentContent.replace(/,/g, ",\n").replace("{", "{\n").replace("}", "\n}");
-  return formattedDocumentContent;
-}
-
-export function formatSqlDocumentContent(row: Resource): string {
-  const { id, _rid, _self, _ts, _etag, _partitionKey, _attachments } = row;
-  const documentContent = JSON.stringify({
-    id: id || "",
-    _rid: _rid || "",
-    _self: _self || "",
-    _ts: _ts || "",
-    _etag: _etag || "",
-    _attachments: _attachments || "",
-    _partitionKey: _partitionKey || "",
-  });
-  const formattedDocumentContent = documentContent.replace(/,/g, ",\n").replace("{", "{\n").replace("}", "\n}");
-  return formattedDocumentContent;
-}
-
-export function getFilterPlaceholder(isPreferredApiMongoDB: boolean): string {
-  const filterPlaceholder = isPreferredApiMongoDB
-    ? "Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents."
-    : "Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents.";
-  return filterPlaceholder;
-}
-
-export function getFilterSuggestions(isPreferredApiMongoDB: boolean): { value: string }[] {
-  const filterSuggestions = isPreferredApiMongoDB
-    ? [{ value: `{"_id": "foo"}` }, { value: "{ qty: { $gte: 20 } }" }]
-    : [
-        { value: 'WHERE c.id = "foo"' },
-        { value: "ORDER BY c._ts DESC" },
-        { value: 'WHERE c.id = "foo" ORDER BY c._ts DESC' },
-      ];
-  return filterSuggestions;
-}
-
-export function getDocumentItems(
-  isPreferredApiMongoDB: boolean,
-  documentIds: Array<DocumentId>,
-  documentSqlIds: Array<Resource>,
-  isAllDocumentsVisible: boolean
-): Array<DocumentId> | Array<Resource> {
-  if (isPreferredApiMongoDB) {
-    return isAllDocumentsVisible ? documentIds : documentIds.slice(0, 5);
-  }
-  return isAllDocumentsVisible ? documentSqlIds : documentSqlIds.slice(0, 5);
-}
-
-export const assignTabButtonVisibility = (
-  visible: boolean,
-  enabled: boolean
-): { visible: boolean; enabled: boolean } => {
-  return {
-    visible,
-    enabled,
-  };
-};
-
-export const getfilterText = (isPreferredApiMongoDB: boolean, filter: string): string => {
-  if (isPreferredApiMongoDB) {
-    if (filter) {
-      return `Filter : ${filter}`;
-    }
-    return "No filter applied";
-  }
-  return `Select * from C ${filter}`;
-};

src/Explorer/Tabs/DocumentsTab.html

@@ -0,0 +1,221 @@
+<div
+  class="tab-pane active tabdocuments flexContainer"
+  data-bind="
+    setTemplateReady: true,
+    attr:{
+        id: tabId
+    },
+    visible: isActive"
+  role="tabpanel"
+>
+  <!-- ko if: false -->
+  <!-- Messagebox Ok Cancel- Start -->
+  <div class="messagebox-background">
+    <div class="messagebox">
+      <h2 class="messagebox-title">Title</h2>
+      <div class="messagebox-text" tabindex="0">Text</div>
+      <div class="messagebox-buttons">
+        <div class="messagebox-buttons-container">
+          <button value="ok" class="messagebox-button-primary">Ok</button>
+          <button value="cancel" class="messagebox-button-default">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Messagebox OK Cancel - End -->
+  <!-- /ko -->
+
+  <!-- Filter - Start -->
+  <div class="filterdivs" data-bind="visible: isFilterCreated">
+    <!-- Read-only Filter - Start -->
+    <div class="filterDocCollapsed" data-bind="visible: !isFilterExpanded() && !isPreferredApiMongoDB">
+      <span class="selectQuery">SELECT * FROM c</span>
+      <span class="appliedQuery" data-bind="text: appliedFilter"></span>
+      <button class="filterbtnstyle queryButton" data-bind="click: onShowFilterClick">Edit Filter</button>
+    </div>
+    <div
+      class="filterDocCollapsed"
+      data-bind="
+                visible: !isFilterExpanded() && isPreferredApiMongoDB"
+    >
+      <span
+        class="selectQuery"
+        data-bind="
+                visible: appliedFilter().length > 0"
+        >Filter :
+      </span>
+      <span
+        class="noFilterApplied"
+        data-bind="
+                visible: !appliedFilter().length > 0"
+        >No filter applied</span
+      >
+      <span class="appliedQuery" data-bind="text: appliedFilter"></span>
+      <button
+        class="filterbtnstyle queryButton"
+        data-bind="
+                    click: onShowFilterClick"
+      >
+        Edit Filter
+      </button>
+    </div>
+    <!-- Read-only Filter - End -->
+
+    <!-- Editable Filter - start -->
+    <div
+      class="filterDocExpanded"
+      data-bind="
+                visible: isFilterExpanded"
+    >
+      <div>
+        <div class="editFilterContainer">
+          <span class="filterspan" data-bind="visible: !isPreferredApiMongoDB"> SELECT * FROM c </span>
+          <input
+            type="text"
+            list="filtersList"
+            class="querydropdown"
+            title="Type a query predicate or choose one from the list."
+            data-bind="
+                                attr:{
+                                    placeholder:isPreferredApiMongoDB?'Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents.':'Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents.'
+                                },
+                                css: { placeholderVisible: filterContent().length === 0 },
+                                textInput: filterContent"
+          />
+
+          <datalist
+            id="filtersList"
+            data-bind="
+                            foreach: lastFilterContents"
+          >
+            <option
+              data-bind="
+                                value: $data"
+            ></option>
+          </datalist>
+
+          <span class="filterbuttonpad">
+            <button
+              class="filterbtnstyle queryButton"
+              data-bind="
+                                click: refreshDocumentsGrid,
+                                enable: applyFilterButton.enabled"
+              aria-label="Apply filter"
+              tabindex="0"
+            >
+              Apply Filter
+            </button>
+          </span>
+          <span
+            class="filterclose"
+            role="button"
+            aria-label="close filter"
+            tabindex="0"
+            data-bind="
+                            click: onHideFilterClick, event: { keydown: onCloseButtonKeyDown }"
+          >
+            <img src="/close-black.svg" style="height: 14px; width: 14px" alt="Hide filter" />
+          </span>
+        </div>
+      </div>
+    </div>
+    <!-- Editable Filter - End -->
+  </div>
+  <!-- Filter - End -->
+
+  <!-- Ids and Editor - Start -->
+  <div class="documentsTabGridAndEditor">
+    <div class="documentsContainerWithSplitter" , data-bind="attr: { id: documentContentsContainerId }">
+      <div class="flexContainer">
+        <!-- Document Ids - Start -->
+        <div
+          class="documentsGridHeaderContainer tabdocuments scrollable"
+          data-bind="
+                attr: {
+                    id: documentContentsGridId,
+                    tabindex: documentIds().length <= 0 ? -1 : 0
+                },
+                style: { height: dataContentsGridScrollHeight },
+                event: { keydown: accessibleDocumentList.onKeyDown }"
+        >
+          <table id="tabsTable" class="table table-hover can-select dataTable">
+            <thead id="theadcontent">
+              <tr>
+                <th class="documentsGridHeader" data-bind="text: idHeader" tabindex="0"></th>
+                <!-- ko if: showPartitionKey -->
+                <th
+                  class="documentsGridHeader documentsGridPartition evenlySpacedHeader"
+                  data-bind="
+                                              attr: {
+                                                  title: partitionKeyPropertyHeader
+                                              },
+                                              text: partitionKeyPropertyHeader"
+                  tabindex="0"
+                ></th>
+                <!-- /ko -->
+                <th
+                  class="refreshColHeader"
+                  role="button"
+                  aria-label="Refresh documents"
+                  data-bind="event: { keydown: onRefreshButtonKeyDown }"
+                >
+                  <img
+                    class="refreshcol"
+                    src="/refresh-cosmos.svg"
+                    data-bind="click: refreshDocumentsGrid"
+                    alt="Refresh documents"
+                    tabindex="0"
+                  />
+                </th>
+              </tr>
+            </thead>
+            <tbody id="tbodycontent">
+              <!-- ko foreach: documentIds -->
+              <tr
+                class="pointer accessibleListElement"
+                data-bind="
+                                click: $data.click,
+                                css: {
+                                    gridRowSelected: $parent.selectedDocumentId && $parent.selectedDocumentId() && $parent.selectedDocumentId().rid === $data.rid,
+                                    gridRowHighlighted: $parent.accessibleDocumentList.currentItem() && $parent.accessibleDocumentList.currentItem().rid === $data.rid
+                                }"
+                tabindex="0"
+              >
+                <td class="tabdocumentsGridElement"><a data-bind="text: $data.id, attr: { title: $data.id }"></a></td>
+                <!-- ko if: $data.partitionKeyProperty -->
+                <td class="tabdocumentsGridElement" colspan="2">
+                  <a
+                    data-bind="text: $data.stringPartitionKeyValue, attr: { title: $data.stringPartitionKeyValue }"
+                  ></a>
+                </td>
+                <!-- /ko -->
+              </tr>
+              <!-- /ko -->
+            </tbody>
+          </table>
+        </div>
+        <div class="loadMore">
+          <a role="button" data-bind="click: loadNextPage, event: { keypress: onLoadMoreKeyInput }" tabindex="0"
+            >Load more</a
+          >
+        </div>
+        <!-- Document Ids - End -->
+        <!-- Splitter -->
+      </div>
+      <div class="splitter ui-resizable-handle ui-resizable-e colResizePointer" id="h_splitter2"></div>
+    </div>
+    <div class="documentWaterMark" data-bind="visible: !shouldShowEditor()">
+      <p><img src="/DocumentWaterMark.svg" alt="Document WaterMark" /></p>
+      <p class="documentWaterMarkText">Create new or work with existing document(s).</p>
+    </div>
+    <!-- Editor - Start -->
+    <json-editor
+      class="editorDivContent"
+      data-bind="visible: shouldShowEditor, css: { mongoDocumentEditor: isPreferredApiMongoDB }"
+      params="{content: initialDocumentContent, isReadOnly: false,lineNumbers: 'on',ariaLabel: 'Document editor',
+            updatedContent: selectedDocumentContent}"
+    ></json-editor>
+    <!-- Editor - End -->
+  </div>
+  <!-- Ids and Editor - End -->
+</div>

src/Explorer/Tabs/DocumentsTab.test.ts

@@ -0,0 +1,152 @@
+import * as ko from "knockout";
+import { DatabaseAccount } from "../../Contracts/DataModels";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { updateUserContext } from "../../UserContext";
+import Explorer from "../Explorer";
+import DocumentId from "../Tree/DocumentId";
+import DocumentsTab from "./DocumentsTab";
+
+describe("Documents tab", () => {
+  describe("buildQuery", () => {
+    it("should generate the right select query for SQL API", () => {
+      const documentsTab = new DocumentsTab({
+        partitionKey: null,
+        documentIds: ko.observableArray<DocumentId>(),
+        tabKind: ViewModels.CollectionTabKind.Documents,
+        title: "",
+        tabPath: "",
+      });
+
+      expect(documentsTab.buildQuery("")).toContain("select");
+    });
+  });
+
+  describe("showPartitionKey", () => {
+    const explorer = new Explorer();
+    const mongoExplorer = new Explorer();
+    updateUserContext({
+      databaseAccount: {
+        properties: {
+          capabilities: [{ name: "EnableGremlin" }],
+        },
+      } as DatabaseAccount,
+    });
+
+    const collectionWithoutPartitionKey = <ViewModels.Collection>(<unknown>{
+      id: ko.observable<string>("foo"),
+      database: {
+        id: ko.observable<string>("foo"),
+      },
+      container: explorer,
+    });
+
+    const collectionWithSystemPartitionKey = <ViewModels.Collection>(<unknown>{
+      id: ko.observable<string>("foo"),
+      database: {
+        id: ko.observable<string>("foo"),
+      },
+      partitionKey: {
+        paths: ["/foo"],
+        kind: "Hash",
+        version: 2,
+        systemKey: true,
+      },
+      container: explorer,
+    });
+
+    const collectionWithNonSystemPartitionKey = <ViewModels.Collection>(<unknown>{
+      id: ko.observable<string>("foo"),
+      database: {
+        id: ko.observable<string>("foo"),
+      },
+      partitionKey: {
+        paths: ["/foo"],
+        kind: "Hash",
+        version: 2,
+        systemKey: false,
+      },
+      container: explorer,
+    });
+
+    const mongoCollectionWithSystemPartitionKey = <ViewModels.Collection>(<unknown>{
+      id: ko.observable<string>("foo"),
+      database: {
+        id: ko.observable<string>("foo"),
+      },
+      partitionKey: {
+        paths: ["/foo"],
+        kind: "Hash",
+        version: 2,
+        systemKey: true,
+      },
+      container: mongoExplorer,
+    });
+
+    it("should be false for null or undefined collection", () => {
+      const documentsTab = new DocumentsTab({
+        partitionKey: null,
+        documentIds: ko.observableArray<DocumentId>(),
+        tabKind: ViewModels.CollectionTabKind.Documents,
+        title: "",
+        tabPath: "",
+      });
+
+      expect(documentsTab.showPartitionKey).toBe(false);
+    });
+
+    it("should be false for null or undefined partitionKey", () => {
+      const documentsTab = new DocumentsTab({
+        collection: collectionWithoutPartitionKey,
+        partitionKey: null,
+        documentIds: ko.observableArray<DocumentId>(),
+        tabKind: ViewModels.CollectionTabKind.Documents,
+        title: "",
+        tabPath: "",
+      });
+
+      expect(documentsTab.showPartitionKey).toBe(false);
+    });
+
+    it("should be true for non-Mongo accounts with system partitionKey", () => {
+      const documentsTab = new DocumentsTab({
+        collection: collectionWithSystemPartitionKey,
+        partitionKey: null,
+        documentIds: ko.observableArray<DocumentId>(),
+        tabKind: ViewModels.CollectionTabKind.Documents,
+        title: "",
+        tabPath: "",
+      });
+
+      expect(documentsTab.showPartitionKey).toBe(true);
+    });
+
+    it("should be false for Mongo accounts with system partitionKey", () => {
+      updateUserContext({
+        apiType: "Mongo",
+      });
+      const documentsTab = new DocumentsTab({
+        collection: mongoCollectionWithSystemPartitionKey,
+        partitionKey: null,
+        documentIds: ko.observableArray<DocumentId>(),
+        tabKind: ViewModels.CollectionTabKind.Documents,
+        title: "",
+        tabPath: "",
+      });
+
+      expect(documentsTab.showPartitionKey).toBe(false);
+    });
+
+    it("should be true for non-system partitionKey", () => {
+      const documentsTab = new DocumentsTab({
+        collection: collectionWithNonSystemPartitionKey,
+        partitionKey: null,
+        documentIds: ko.observableArray<DocumentId>(),
+        tabKind: ViewModels.CollectionTabKind.Documents,
+        title: "",
+        tabPath: "",
+      });
+
+      expect(documentsTab.showPartitionKey).toBe(true);
+    });
+  });
+});

src/Explorer/Tabs/DocumentsTab.ts

@@ -0,0 +1,938 @@
+import { extractPartitionKey, ItemDefinition, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
+import * as ko from "knockout";
+import Q from "q";
+import DeleteDocumentIcon from "../../../images/DeleteDocument.svg";
+import DiscardIcon from "../../../images/discard.svg";
+import NewDocumentIcon from "../../../images/NewDocument.svg";
+import SaveIcon from "../../../images/save-cosmos.svg";
+import UploadIcon from "../../../images/Upload_16x16.svg";
+import * as Constants from "../../Common/Constants";
+import { DocumentsGridMetrics, KeyCodes } from "../../Common/Constants";
+import { createDocument } from "../../Common/dataAccess/createDocument";
+import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
+import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
+import { readDocument } from "../../Common/dataAccess/readDocument";
+import { updateDocument } from "../../Common/dataAccess/updateDocument";
+import editable from "../../Common/EditableUtility";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import * as HeadersUtility from "../../Common/HeadersUtility";
+import { Splitter, SplitterBounds, SplitterDirection } from "../../Common/Splitter";
+import * as DataModels from "../../Contracts/DataModels";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { Action } from "../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../UserContext";
+import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
+import * as QueryUtils from "../../Utils/QueryUtils";
+import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
+import { useDialog } from "../Controls/Dialog";
+import Explorer from "../Explorer";
+import { AccessibleVerticalList } from "../Tree/AccessibleVerticalList";
+import DocumentId from "../Tree/DocumentId";
+import { useSelectedNode } from "../useSelectedNode";
+import template from "./DocumentsTab.html";
+import TabsBase from "./TabsBase";
+
+export default class DocumentsTab extends TabsBase {
+  public readonly html = template;
+  public selectedDocumentId: ko.Observable<DocumentId>;
+  public selectedDocumentContent: ViewModels.Editable<string>;
+  public initialDocumentContent: ko.Observable<string>;
+  public documentContentsGridId: string;
+  public documentContentsContainerId: string;
+  public filterContent: ko.Observable<string>;
+  public appliedFilter: ko.Observable<string>;
+  public lastFilterContents: ko.ObservableArray<string>;
+  public isFilterExpanded: ko.Observable<boolean>;
+  public isFilterCreated: ko.Observable<boolean>;
+  public applyFilterButton: ViewModels.Button;
+  public isEditorDirty: ko.Computed<boolean>;
+  public editorState: ko.Observable<ViewModels.DocumentExplorerState>;
+  public newDocumentButton: ViewModels.Button;
+  public saveNewDocumentButton: ViewModels.Button;
+  public saveExisitingDocumentButton: ViewModels.Button;
+  public discardNewDocumentChangesButton: ViewModels.Button;
+  public discardExisitingDocumentChangesButton: ViewModels.Button;
+  public deleteExisitingDocumentButton: ViewModels.Button;
+  public displayedError: ko.Observable<string>;
+  public accessibleDocumentList: AccessibleVerticalList;
+  public dataContentsGridScrollHeight: ko.Observable<string>;
+  public isPreferredApiMongoDB: boolean;
+  public shouldShowEditor: ko.Computed<boolean>;
+  public splitter: Splitter;
+  public showPartitionKey: boolean;
+  public idHeader: string;
+
+  // TODO need to refactor
+  public partitionKey: DataModels.PartitionKey;
+  public partitionKeyPropertyHeader: string;
+  public partitionKeyProperty: string;
+  public documentIds: ko.ObservableArray<DocumentId>;
+
+  private _documentsIterator: QueryIterator<ItemDefinition & Resource>;
+  private _resourceTokenPartitionKey: string;
+
+  constructor(options: ViewModels.DocumentsTabOptions) {
+    super(options);
+    this.isPreferredApiMongoDB = userContext.apiType === "Mongo" || options.isPreferredApiMongoDB;
+
+    this.idHeader = this.isPreferredApiMongoDB ? "_id" : "id";
+
+    this.documentContentsGridId = `documentContentsGrid${this.tabId}`;
+    this.documentContentsContainerId = `documentContentsContainer${this.tabId}`;
+    this.editorState = ko.observable<ViewModels.DocumentExplorerState>(
+      ViewModels.DocumentExplorerState.noDocumentSelected
+    );
+    this.selectedDocumentId = ko.observable<DocumentId>();
+    this.selectedDocumentContent = editable.observable<string>("");
+    this.initialDocumentContent = ko.observable<string>("");
+    this.partitionKey = options.partitionKey || (this.collection && this.collection.partitionKey);
+    this._resourceTokenPartitionKey = options.resourceTokenPartitionKey;
+    this.documentIds = options.documentIds;
+
+    this.partitionKeyPropertyHeader =
+      (this.collection && this.collection.partitionKeyPropertyHeader) || this._getPartitionKeyPropertyHeader();
+    this.partitionKeyProperty = !!this.partitionKeyPropertyHeader
+      ? this.partitionKeyPropertyHeader.replace(/[/]+/g, ".").substr(1).replace(/[']+/g, "")
+      : null;
+
+    this.isFilterExpanded = ko.observable<boolean>(false);
+    this.isFilterCreated = ko.observable<boolean>(true);
+    this.filterContent = ko.observable<string>("");
+    this.appliedFilter = ko.observable<string>("");
+    this.displayedError = ko.observable<string>("");
+    this.lastFilterContents = ko.observableArray<string>([
+      'WHERE c.id = "foo"',
+      "ORDER BY c._ts DESC",
+      'WHERE c.id = "foo" ORDER BY c._ts DESC',
+    ]);
+
+    this.dataContentsGridScrollHeight = ko.observable<string>(null);
+
+    // initialize splitter only after template has been loaded so dom elements are accessible
+    super.onTemplateReady((isTemplateReady: boolean) => {
+      if (isTemplateReady) {
+        const tabContainer: HTMLElement = document.getElementById("content");
+        const splitterBounds: SplitterBounds = {
+          min: Constants.DocumentsGridMetrics.DocumentEditorMinWidthRatio * tabContainer.clientWidth,
+          max: Constants.DocumentsGridMetrics.DocumentEditorMaxWidthRatio * tabContainer.clientWidth,
+        };
+        this.splitter = new Splitter({
+          splitterId: "h_splitter2",
+          leftId: this.documentContentsContainerId,
+          bounds: splitterBounds,
+          direction: SplitterDirection.Vertical,
+        });
+      }
+    });
+
+    this.accessibleDocumentList = new AccessibleVerticalList(this.documentIds());
+    this.accessibleDocumentList.setOnSelect(
+      (selectedDocument: DocumentId) => selectedDocument && selectedDocument.click()
+    );
+    this.selectedDocumentId.subscribe((newSelectedDocumentId: DocumentId) =>
+      this.accessibleDocumentList.updateCurrentItem(newSelectedDocumentId)
+    );
+    this.documentIds.subscribe((newDocuments: DocumentId[]) => {
+      this.accessibleDocumentList.updateItemList(newDocuments);
+      if (newDocuments.length > 0) {
+        this.dataContentsGridScrollHeight(
+          newDocuments.length * DocumentsGridMetrics.IndividualRowHeight + DocumentsGridMetrics.BufferHeight + "px"
+        );
+      } else {
+        this.dataContentsGridScrollHeight(
+          DocumentsGridMetrics.IndividualRowHeight + DocumentsGridMetrics.BufferHeight + "px"
+        );
+      }
+    });
+
+    this.isEditorDirty = ko.computed<boolean>(() => {
+      switch (this.editorState()) {
+        case ViewModels.DocumentExplorerState.noDocumentSelected:
+        case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+          return false;
+
+        case ViewModels.DocumentExplorerState.newDocumentValid:
+        case ViewModels.DocumentExplorerState.newDocumentInvalid:
+        case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
+          return true;
+
+        case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+          return (
+            this.selectedDocumentContent.getEditableOriginalValue() !==
+            this.selectedDocumentContent.getEditableCurrentValue()
+          );
+
+        default:
+          return false;
+      }
+    });
+
+    this.newDocumentButton = {
+      enabled: ko.computed<boolean>(() => {
+        switch (this.editorState()) {
+          case ViewModels.DocumentExplorerState.noDocumentSelected:
+          case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+            return true;
+        }
+
+        return false;
+      }),
+
+      visible: ko.computed<boolean>(() => {
+        return true;
+      }),
+    };
+
+    this.saveNewDocumentButton = {
+      enabled: ko.computed<boolean>(() => {
+        switch (this.editorState()) {
+          case ViewModels.DocumentExplorerState.newDocumentValid:
+            return true;
+        }
+
+        return false;
+      }),
+
+      visible: ko.computed<boolean>(() => {
+        switch (this.editorState()) {
+          case ViewModels.DocumentExplorerState.newDocumentValid:
+          case ViewModels.DocumentExplorerState.newDocumentInvalid:
+            return true;
+        }
+
+        return false;
+      }),
+    };
+
+    this.discardNewDocumentChangesButton = {
+      enabled: ko.computed<boolean>(() => {
+        switch (this.editorState()) {
+          case ViewModels.DocumentExplorerState.newDocumentValid:
+          case ViewModels.DocumentExplorerState.newDocumentInvalid:
+            return true;
+        }
+
+        return false;
+      }),
+
+      visible: ko.computed<boolean>(() => {
+        switch (this.editorState()) {
+          case ViewModels.DocumentExplorerState.newDocumentValid:
+          case ViewModels.DocumentExplorerState.newDocumentInvalid:
+            return true;
+        }
+
+        return false;
+      }),
+    };
+
+    this.saveExisitingDocumentButton = {
+      enabled: ko.computed<boolean>(() => {
+        switch (this.editorState()) {
+          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+            return true;
+        }
+
+        return false;
+      }),
+
+      visible: ko.computed<boolean>(() => {
+        switch (this.editorState()) {
+          case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
+          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+            return true;
+        }
+
+        return false;
+      }),
+    };
+
+    this.discardExisitingDocumentChangesButton = {
+      enabled: ko.computed<boolean>(() => {
+        switch (this.editorState()) {
+          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
+          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+            return true;
+        }
+
+        return false;
+      }),
+
+      visible: ko.computed<boolean>(() => {
+        switch (this.editorState()) {
+          case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
+          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+            return true;
+        }
+
+        return false;
+      }),
+    };
+
+    this.deleteExisitingDocumentButton = {
+      enabled: ko.computed<boolean>(() => {
+        switch (this.editorState()) {
+          case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
+          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+            return true;
+        }
+
+        return false;
+      }),
+
+      visible: ko.computed<boolean>(() => {
+        switch (this.editorState()) {
+          case ViewModels.DocumentExplorerState.exisitingDocumentNoEdits:
+          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid:
+          case ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid:
+            return true;
+        }
+
+        return false;
+      }),
+    };
+
+    this.applyFilterButton = {
+      enabled: ko.computed<boolean>(() => {
+        return true;
+      }),
+
+      visible: ko.computed<boolean>(() => {
+        return true;
+      }),
+    };
+    this.buildCommandBarOptions();
+    this.shouldShowEditor = ko.computed<boolean>(() => {
+      const documentHasContent: boolean =
+        this.selectedDocumentContent() != null && this.selectedDocumentContent().length > 0;
+      const isNewDocument: boolean =
+        this.editorState() === ViewModels.DocumentExplorerState.newDocumentValid ||
+        this.editorState() === ViewModels.DocumentExplorerState.newDocumentInvalid;
+
+      return documentHasContent || isNewDocument;
+    });
+    this.selectedDocumentContent.subscribe((newContent: string) => this._onEditorContentChange(newContent));
+
+    this.showPartitionKey = this._shouldShowPartitionKey();
+  }
+
+  private _shouldShowPartitionKey(): boolean {
+    if (!this.collection) {
+      return false;
+    }
+
+    if (!this.collection.partitionKey) {
+      return false;
+    }
+
+    if (this.collection.partitionKey.systemKey && this.isPreferredApiMongoDB) {
+      return false;
+    }
+
+    return true;
+  }
+
+  public onShowFilterClick(): Q.Promise<any> {
+    this.isFilterCreated(true);
+    this.isFilterExpanded(true);
+
+    $(".filterDocExpanded").addClass("active");
+    $("#content").addClass("active");
+    $(".querydropdown").focus();
+
+    return Q();
+  }
+
+  public onHideFilterClick(): Q.Promise<any> {
+    this.isFilterExpanded(false);
+
+    $(".filterDocExpanded").removeClass("active");
+    $("#content").removeClass("active");
+    $(".queryButton").focus();
+    return Q();
+  }
+
+  public onCloseButtonKeyDown = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
+      this.onHideFilterClick();
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  };
+
+  public async refreshDocumentsGrid(): Promise<void> {
+    // clear documents grid
+    this.documentIds([]);
+
+    try {
+      // reset iterator
+      this._documentsIterator = this.createIterator();
+      // load documents
+      await this.loadNextPage();
+      // collapse filter
+      this.appliedFilter(this.filterContent());
+      this.isFilterExpanded(false);
+      document.getElementById("errorStatusIcon")?.focus();
+    } catch (error) {
+      useDialog.getState().showOkModalDialog("Refresh documents grid failed", getErrorMessage(error));
+    }
+  }
+
+  public onRefreshButtonKeyDown = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
+      this.refreshDocumentsGrid();
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  };
+
+  public onDocumentIdClick(clickedDocumentId: DocumentId): Q.Promise<any> {
+    if (this.editorState() !== ViewModels.DocumentExplorerState.noDocumentSelected) {
+      return Q();
+    }
+
+    this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+
+    return Q();
+  }
+
+  public onNewDocumentClick = (): void => {
+    if (this.isEditorDirty()) {
+      useDialog
+        .getState()
+        .showOkCancelModalDialog(
+          "Unsaved changes",
+          "Changes will be lost. Do you want to continue?",
+          "OK",
+          () => this.initializeNewDocument(),
+          "Cancel",
+          undefined
+        );
+    } else {
+      this.initializeNewDocument();
+    }
+  };
+
+  private initializeNewDocument = (): void => {
+    this.selectedDocumentId(null);
+    const defaultDocument: string = this.renderObjectForEditor({ id: "replace_with_new_document_id" }, null, 4);
+    this.initialDocumentContent(defaultDocument);
+    this.selectedDocumentContent.setBaseline(defaultDocument);
+    this.editorState(ViewModels.DocumentExplorerState.newDocumentValid);
+  };
+
+  public onSaveNewDocumentClick = (): Promise<any> => {
+    this.isExecutionError(false);
+    const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
+      dataExplorerArea: Constants.Areas.Tab,
+      tabTitle: this.tabTitle(),
+    });
+    const document = JSON.parse(this.selectedDocumentContent());
+    this.isExecuting(true);
+    return createDocument(this.collection, document)
+      .then(
+        (savedDocument: any) => {
+          const value: string = this.renderObjectForEditor(savedDocument || {}, null, 4);
+          this.selectedDocumentContent.setBaseline(value);
+          this.initialDocumentContent(value);
+          const partitionKeyValueArray = extractPartitionKey(
+            savedDocument,
+            this.partitionKey as PartitionKeyDefinition
+          );
+          const partitionKeyValue = partitionKeyValueArray && partitionKeyValueArray[0];
+          let id = new DocumentId(this, savedDocument, partitionKeyValue);
+          let ids = this.documentIds();
+          ids.push(id);
+
+          this.selectedDocumentId(id);
+          this.documentIds(ids);
+          this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+          TelemetryProcessor.traceSuccess(
+            Action.CreateDocument,
+            {
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle(),
+            },
+            startKey
+          );
+        },
+        (error) => {
+          this.isExecutionError(true);
+          const errorMessage = getErrorMessage(error);
+          useDialog.getState().showOkModalDialog("Create document failed", errorMessage);
+          TelemetryProcessor.traceFailure(
+            Action.CreateDocument,
+            {
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle(),
+              error: errorMessage,
+              errorStack: getErrorStack(error),
+            },
+            startKey
+          );
+        }
+      )
+      .finally(() => this.isExecuting(false));
+  };
+
+  public onRevertNewDocumentClick = (): Q.Promise<any> => {
+    this.initialDocumentContent("");
+    this.selectedDocumentContent("");
+    this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+
+    return Q();
+  };
+
+  public onSaveExisitingDocumentClick = (): Promise<any> => {
+    const selectedDocumentId = this.selectedDocumentId();
+    const documentContent = JSON.parse(this.selectedDocumentContent());
+
+    const partitionKeyValueArray = extractPartitionKey(documentContent, this.partitionKey as PartitionKeyDefinition);
+    const partitionKeyValue = partitionKeyValueArray && partitionKeyValueArray[0];
+
+    selectedDocumentId.partitionKeyValue = partitionKeyValue;
+
+    this.isExecutionError(false);
+    const startKey: number = TelemetryProcessor.traceStart(Action.UpdateDocument, {
+      dataExplorerArea: Constants.Areas.Tab,
+      tabTitle: this.tabTitle(),
+    });
+    this.isExecuting(true);
+    return updateDocument(this.collection, selectedDocumentId, documentContent)
+      .then(
+        (updatedDocument: any) => {
+          const value: string = this.renderObjectForEditor(updatedDocument || {}, null, 4);
+          this.selectedDocumentContent.setBaseline(value);
+          this.initialDocumentContent(value);
+          this.documentIds().forEach((documentId: DocumentId) => {
+            if (documentId.rid === updatedDocument._rid) {
+              documentId.id(updatedDocument.id);
+            }
+          });
+          this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+          TelemetryProcessor.traceSuccess(
+            Action.UpdateDocument,
+            {
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle(),
+            },
+            startKey
+          );
+        },
+        (error) => {
+          this.isExecutionError(true);
+          const errorMessage = getErrorMessage(error);
+          useDialog.getState().showOkModalDialog("Update document failed", errorMessage);
+          TelemetryProcessor.traceFailure(
+            Action.UpdateDocument,
+            {
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle(),
+              error: errorMessage,
+              errorStack: getErrorStack(error),
+            },
+            startKey
+          );
+        }
+      )
+      .finally(() => this.isExecuting(false));
+  };
+
+  public onRevertExisitingDocumentClick = (): Q.Promise<any> => {
+    this.selectedDocumentContent.setBaseline(this.initialDocumentContent());
+    this.initialDocumentContent.valueHasMutated();
+    this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+
+    return Q();
+  };
+
+  public onDeleteExisitingDocumentClick = async (): Promise<void> => {
+    const selectedDocumentId = this.selectedDocumentId();
+    const msg = !this.isPreferredApiMongoDB
+      ? "Are you sure you want to delete the selected item ?"
+      : "Are you sure you want to delete the selected document ?";
+
+    useDialog
+      .getState()
+      .showOkCancelModalDialog(
+        "Confirm delete",
+        msg,
+        "Delete",
+        async () => await this._deleteDocument(selectedDocumentId),
+        "Cancel",
+        undefined
+      );
+  };
+
+  public onValidDocumentEdit(): Q.Promise<any> {
+    if (
+      this.editorState() === ViewModels.DocumentExplorerState.newDocumentInvalid ||
+      this.editorState() === ViewModels.DocumentExplorerState.newDocumentValid
+    ) {
+      this.editorState(ViewModels.DocumentExplorerState.newDocumentValid);
+      return Q();
+    }
+
+    this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid);
+    return Q();
+  }
+
+  public onInvalidDocumentEdit(): Q.Promise<any> {
+    if (
+      this.editorState() === ViewModels.DocumentExplorerState.newDocumentInvalid ||
+      this.editorState() === ViewModels.DocumentExplorerState.newDocumentValid
+    ) {
+      this.editorState(ViewModels.DocumentExplorerState.newDocumentInvalid);
+      return Q();
+    }
+
+    if (
+      this.editorState() === ViewModels.DocumentExplorerState.exisitingDocumentNoEdits ||
+      this.editorState() === ViewModels.DocumentExplorerState.exisitingDocumentDirtyValid
+    ) {
+      this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentDirtyInvalid);
+      return Q();
+    }
+
+    return Q();
+  }
+
+  public onTabClick(): void {
+    super.onTabClick();
+    this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
+  }
+
+  public async onActivate(): Promise<void> {
+    super.onActivate();
+
+    if (!this._documentsIterator) {
+      try {
+        this._documentsIterator = this.createIterator();
+        await this.loadNextPage();
+      } catch (error) {
+        if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
+          TelemetryProcessor.traceFailure(
+            Action.Tab,
+            {
+              databaseName: this.collection.databaseId,
+              collectionName: this.collection.id(),
+
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle(),
+              error: getErrorMessage(error),
+              errorStack: getErrorStack(error),
+            },
+            this.onLoadStartKey
+          );
+          this.onLoadStartKey = null;
+        }
+      }
+    }
+  }
+
+  protected __deleteDocument(documentId: DocumentId): Promise<void> {
+    return deleteDocument(this.collection, documentId);
+  }
+
+  private _deleteDocument(selectedDocumentId: DocumentId): Promise<void> {
+    this.isExecutionError(false);
+    const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDocument, {
+      dataExplorerArea: Constants.Areas.Tab,
+      tabTitle: this.tabTitle(),
+    });
+    this.isExecuting(true);
+    return this.__deleteDocument(selectedDocumentId)
+      .then(
+        () => {
+          this.documentIds.remove((documentId: DocumentId) => documentId.rid === selectedDocumentId.rid);
+          this.selectedDocumentContent("");
+          this.selectedDocumentId(null);
+          this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+          TelemetryProcessor.traceSuccess(
+            Action.DeleteDocument,
+            {
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle(),
+            },
+            startKey
+          );
+        },
+        (error) => {
+          this.isExecutionError(true);
+          console.error(error);
+          TelemetryProcessor.traceFailure(
+            Action.DeleteDocument,
+            {
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle(),
+              error: getErrorMessage(error),
+              errorStack: getErrorStack(error),
+            },
+            startKey
+          );
+        }
+      )
+      .finally(() => this.isExecuting(false));
+  }
+
+  public createIterator(): QueryIterator<ItemDefinition & Resource> {
+    let filters = this.lastFilterContents();
+    const filter: string = this.filterContent().trim();
+    const query: string = this.buildQuery(filter);
+    let options: any = {};
+    options.enableCrossPartitionQuery = HeadersUtility.shouldEnableCrossPartitionKey();
+
+    if (this._resourceTokenPartitionKey) {
+      options.partitionKey = this._resourceTokenPartitionKey;
+    }
+
+    return queryDocuments(this.collection.databaseId, this.collection.id(), query, options);
+  }
+
+  public async selectDocument(documentId: DocumentId): Promise<void> {
+    this.selectedDocumentId(documentId);
+    const content = await readDocument(this.collection, documentId);
+    this.initDocumentEditor(documentId, content);
+  }
+
+  public loadNextPage(): Q.Promise<any> {
+    this.isExecuting(true);
+    this.isExecutionError(false);
+    return this._loadNextPageInternal()
+      .then(
+        (documentsIdsResponse = []) => {
+          const currentDocuments = this.documentIds();
+          const currentDocumentsRids = currentDocuments.map((currentDocument) => currentDocument.rid);
+          const nextDocumentIds = documentsIdsResponse
+            // filter documents already loaded in observable
+            .filter((d: any) => {
+              return currentDocumentsRids.indexOf(d._rid) < 0;
+            })
+            // map raw response to view model
+            .map((rawDocument: any) => {
+              const partitionKeyValue = rawDocument._partitionKeyValue;
+              return new DocumentId(this, rawDocument, partitionKeyValue);
+            });
+
+          const merged = currentDocuments.concat(nextDocumentIds);
+          this.documentIds(merged);
+          if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
+            TelemetryProcessor.traceSuccess(
+              Action.Tab,
+              {
+                databaseName: this.collection.databaseId,
+                collectionName: this.collection.id(),
+
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle: this.tabTitle(),
+              },
+              this.onLoadStartKey
+            );
+            this.onLoadStartKey = null;
+          }
+        },
+        (error) => {
+          this.isExecutionError(true);
+          const errorMessage = getErrorMessage(error);
+          logConsoleError(errorMessage);
+          if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
+            TelemetryProcessor.traceFailure(
+              Action.Tab,
+              {
+                databaseName: this.collection.databaseId,
+                collectionName: this.collection.id(),
+
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle: this.tabTitle(),
+                error: errorMessage,
+                errorStack: getErrorStack(error),
+              },
+              this.onLoadStartKey
+            );
+            this.onLoadStartKey = null;
+          }
+        }
+      )
+      .finally(() => this.isExecuting(false));
+  }
+
+  public onLoadMoreKeyInput = (source: any, event: KeyboardEvent): void => {
+    if (event.key === " " || event.key === "Enter") {
+      const focusElement = document.getElementById(this.documentContentsGridId);
+      this.loadNextPage();
+      focusElement && focusElement.focus();
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  };
+
+  protected _loadNextPageInternal(): Q.Promise<DataModels.DocumentId[]> {
+    return Q(this._documentsIterator.fetchNext().then((response) => response.resources));
+  }
+
+  protected _onEditorContentChange(newContent: string) {
+    try {
+      let parsed: any = JSON.parse(newContent);
+      this.onValidDocumentEdit();
+    } catch (e) {
+      this.onInvalidDocumentEdit();
+    }
+  }
+
+  public initDocumentEditor(documentId: DocumentId, documentContent: any): Q.Promise<any> {
+    if (documentId) {
+      const content: string = this.renderObjectForEditor(documentContent, null, 4);
+      this.selectedDocumentContent.setBaseline(content);
+      this.initialDocumentContent(content);
+      const newState = documentId
+        ? ViewModels.DocumentExplorerState.exisitingDocumentNoEdits
+        : ViewModels.DocumentExplorerState.newDocumentValid;
+      this.editorState(newState);
+    }
+
+    return Q();
+  }
+
+  public buildQuery(filter: string): string {
+    return QueryUtils.buildDocumentsQuery(filter, this.partitionKeyProperty, this.partitionKey);
+  }
+
+  protected getTabsButtons(): CommandButtonComponentProps[] {
+    const buttons: CommandButtonComponentProps[] = [];
+    const label = !this.isPreferredApiMongoDB ? "New Item" : "New Document";
+    if (this.newDocumentButton.visible()) {
+      buttons.push({
+        iconSrc: NewDocumentIcon,
+        iconAlt: label,
+        onCommandClick: this.onNewDocumentClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: false,
+        disabled: !this.newDocumentButton.enabled(),
+      });
+    }
+
+    if (this.saveNewDocumentButton.visible()) {
+      const label = "Save";
+      buttons.push({
+        iconSrc: SaveIcon,
+        iconAlt: label,
+        onCommandClick: this.onSaveNewDocumentClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: false,
+        disabled: !this.saveNewDocumentButton.enabled(),
+      });
+    }
+
+    if (this.discardNewDocumentChangesButton.visible()) {
+      const label = "Discard";
+      buttons.push({
+        iconSrc: DiscardIcon,
+        iconAlt: label,
+        onCommandClick: this.onRevertNewDocumentClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: false,
+        disabled: !this.discardNewDocumentChangesButton.enabled(),
+      });
+    }
+
+    if (this.saveExisitingDocumentButton.visible()) {
+      const label = "Update";
+      buttons.push({
+        iconSrc: SaveIcon,
+        iconAlt: label,
+        onCommandClick: this.onSaveExisitingDocumentClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: false,
+        disabled: !this.saveExisitingDocumentButton.enabled(),
+      });
+    }
+
+    if (this.discardExisitingDocumentChangesButton.visible()) {
+      const label = "Discard";
+      buttons.push({
+        iconSrc: DiscardIcon,
+        iconAlt: label,
+        onCommandClick: this.onRevertExisitingDocumentClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: false,
+        disabled: !this.discardExisitingDocumentChangesButton.enabled(),
+      });
+    }
+
+    if (this.deleteExisitingDocumentButton.visible()) {
+      const label = "Delete";
+      buttons.push({
+        iconSrc: DeleteDocumentIcon,
+        iconAlt: label,
+        onCommandClick: this.onDeleteExisitingDocumentClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: false,
+        disabled: !this.deleteExisitingDocumentButton.enabled(),
+      });
+    }
+
+    if (!this.isPreferredApiMongoDB) {
+      buttons.push(DocumentsTab._createUploadButton(this.collection.container));
+    }
+
+    return buttons;
+  }
+
+  protected buildCommandBarOptions(): void {
+    ko.computed(() =>
+      ko.toJSON([
+        this.newDocumentButton.visible,
+        this.newDocumentButton.enabled,
+        this.saveNewDocumentButton.visible,
+        this.saveNewDocumentButton.enabled,
+        this.discardNewDocumentChangesButton.visible,
+        this.discardNewDocumentChangesButton.enabled,
+        this.saveExisitingDocumentButton.visible,
+        this.saveExisitingDocumentButton.enabled,
+        this.discardExisitingDocumentChangesButton.visible,
+        this.discardExisitingDocumentChangesButton.enabled,
+        this.deleteExisitingDocumentButton.visible,
+        this.deleteExisitingDocumentButton.enabled,
+      ])
+    ).subscribe(() => this.updateNavbarWithTabsButtons());
+    this.updateNavbarWithTabsButtons();
+  }
+
+  private _getPartitionKeyPropertyHeader(): string {
+    return (
+      (this.partitionKey &&
+        this.partitionKey.paths &&
+        this.partitionKey.paths.length > 0 &&
+        this.partitionKey.paths[0]) ||
+      null
+    );
+  }
+
+  public static _createUploadButton(container: Explorer): CommandButtonComponentProps {
+    const label = "Upload Item";
+    return {
+      iconSrc: UploadIcon,
+      iconAlt: label,
+      onCommandClick: () => {
+        const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
+        selectedCollection && container.openUploadItemsPanePane();
+      },
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: true,
+      disabled: useSelectedNode.getState().isDatabaseNodeOrNoneSelected(),
+    };
+  }
+}

src/Explorer/Tabs/DocumentsTab.tsx

@@ -1,50 +0,0 @@
-import * as ko from "knockout";
-import React from "react";
-import "react-splitter-layout/lib/index.css";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import DocumentsTabContent from "./DocumentsTabContent";
-import TabsBase from "./TabsBase";
-
-export default class DocumentsTab extends TabsBase {
-  public documentContentsGridId: string;
-  public documentContentsContainerId: string;
-  public displayedError: ko.Observable<string>;
-  public partitionKey: DataModels.PartitionKey;
-  public partitionKeyPropertyHeader: string;
-  public partitionKeyProperty: string;
-  public _resourceTokenPartitionKey: string;
-
-  constructor(options: ViewModels.DocumentsTabOptions) {
-    super(options);
-    this.documentContentsGridId = `documentContentsGrid${this.tabId}`;
-    this.documentContentsContainerId = `documentContentsContainer${this.tabId}`;
-    this.partitionKey = options.partitionKey || (this.collection && this.collection.partitionKey);
-    this._resourceTokenPartitionKey = options.resourceTokenPartitionKey;
-
-    this.partitionKeyPropertyHeader =
-      (this.collection && this.collection.partitionKeyPropertyHeader) || this._getPartitionKeyPropertyHeader();
-    this.partitionKeyProperty = this.partitionKeyPropertyHeader
-      ? this.partitionKeyPropertyHeader.replace(/[/]+/g, ".").substr(1).replace(/[']+/g, "")
-      : undefined;
-
-    this.displayedError = ko.observable<string>("");
-  }
-
-  public onTabClick(): void {
-    super.onTabClick();
-    this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
-  }
-
-  protected buildCommandBarOptions(): void {
-    this.updateNavbarWithTabsButtons();
-  }
-
-  private _getPartitionKeyPropertyHeader(): string {
-    return this.partitionKey?.paths?.[0];
-  }
-
-  render(): JSX.Element {
-    return <DocumentsTabContent {...this} />;
-  }
-}

src/Explorer/Tabs/DocumentsTabContent.tsx

@@ -1,793 +0,0 @@
-import { extractPartitionKey, PartitionKeyDefinition } from "@azure/cosmos";
-import {
-  DetailsList,
-  DetailsListLayoutMode,
-  IColumn,
-  IIconProps,
-  Image,
-  List,
-  PrimaryButton,
-  SelectionMode,
-  Stack,
-  Text,
-  TextField,
-} from "@fluentui/react";
-import * as React from "react";
-import SplitterLayout from "react-splitter-layout";
-import CloseIcon from "../../../images/close-black.svg";
-import DeleteDocumentIcon from "../../../images/DeleteDocument.svg";
-import DiscardIcon from "../../../images/discard.svg";
-import DocumentWaterMark from "../../../images/DocumentWaterMark.svg";
-import NewDocumentIcon from "../../../images/NewDocument.svg";
-import SaveIcon from "../../../images/save-cosmos.svg";
-import UploadIcon from "../../../images/Upload_16x16.svg";
-import { Resource } from "../../../src/Contracts/DataModels";
-import * as NotificationConsoleUtils from "../../../src/Utils/NotificationConsoleUtils";
-import { Areas } from "../../Common/Constants";
-import { createDocument as createSqlDocuments } from "../../Common/dataAccess/createDocument";
-import { deleteDocument as deleteSqlDocument } from "../../Common/dataAccess/deleteDocument";
-import { queryDocuments as querySqlDocuments } from "../../Common/dataAccess/queryDocuments";
-import { readDocument } from "../../Common/dataAccess/readDocument";
-import { updateDocument as updateSqlDocuments } from "../../Common/dataAccess/updateDocument";
-import { getEntityName } from "../../Common/DocumentUtility";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import * as HeadersUtility from "../../Common/HeadersUtility";
-import { logError } from "../../Common/Logger";
-import { createDocument, deleteDocument, queryDocuments, updateDocument } from "../../Common/MongoProxyClient";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
-import * as QueryUtils from "../../Utils/QueryUtils";
-import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import { EditorReact } from "../Controls/Editor/EditorReact";
-import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
-import DocumentId from "../Tree/DocumentId";
-import ObjectId from "../Tree/ObjectId";
-import { useSelectedNode } from "../useSelectedNode";
-import DocumentsTab from "./DocumentsTab";
-import {
-  assignTabButtonVisibility,
-  formatDocumentContent,
-  formatSqlDocumentContent,
-  getDocumentItems,
-  getFilterPlaceholder,
-  getFilterSuggestions,
-  getfilterText,
-  getPartitionKeyDefinition,
-  hasShardKeySpecified,
-  IDocumentsTabContentState,
-  imageProps,
-} from "./DocumentTabUtils";
-
-const filterIcon: IIconProps = { iconName: "Filter" };
-let newDocumentButton = assignTabButtonVisibility(true, true);
-let saveNewDocumentButton = assignTabButtonVisibility(false, true);
-let discardNewDocumentChangesButton = assignTabButtonVisibility(false, false);
-let saveExisitingDocumentButton = assignTabButtonVisibility(false, false);
-let discardExisitingDocumentChangesButton = assignTabButtonVisibility(false, false);
-let deleteExisitingDocumentButton = assignTabButtonVisibility(false, false);
-
-export default class DocumentsTabContent extends React.Component<DocumentsTab, IDocumentsTabContentState> {
-  public initialDocumentContent: string;
-
-  constructor(props: DocumentsTab) {
-    super(props);
-    const isPreferredApiMongoDB = userContext.apiType === "Mongo";
-
-    const columns: IColumn[] = [
-      {
-        key: "_id",
-        name: isPreferredApiMongoDB ? "_id" : "id",
-        minWidth: 50,
-        maxWidth: 100,
-        isResizable: true,
-        isCollapsible: true,
-        data: "string",
-        onRender: (item: DocumentId) => {
-          return (
-            <div onClick={() => this.handleRow(item)} className="documentIdItem">
-              {isPreferredApiMongoDB ? item.id() : item.id}
-            </div>
-          );
-        },
-        isPadded: true,
-      },
-      {
-        key: "column2",
-        name: props.partitionKeyPropertyHeader,
-        minWidth: 50,
-        maxWidth: 100,
-        isResizable: true,
-        isCollapsible: true,
-        data: "number",
-        onRender: (item: DocumentId) => {
-          return (
-            <div onClick={() => this.handleRow(item)} className="documentIdItem">
-              {isPreferredApiMongoDB ? item.partitionKeyValue : item._partitionKeyValue}
-            </div>
-          );
-        },
-      },
-    ];
-
-    this.initialDocumentContent = `{ \n ${
-      isPreferredApiMongoDB ? '"_id"' : '"id"'
-    }: "replace_with_new_document_id" \n }`;
-
-    this.state = {
-      columns: columns,
-      isModalSelection: false,
-      isCompactMode: false,
-      announcedMessage: undefined,
-      isSuggestionVisible: false,
-      filter: "",
-      isFilterOptionVisible: true,
-      isEditorVisible: false,
-      documentContent: this.initialDocumentContent,
-      documentIds: [],
-      documentSqlIds: [],
-      isEditorContentEdited: false,
-      isAllDocumentsVisible: false,
-      selectedSqlDocumentContent: this.initialDocumentContent,
-    };
-  }
-
-  componentDidMount(): void {
-    this.props.isExecuting(true);
-    this.updateTabButton();
-    if (userContext.apiType === "Mongo") {
-      this.queryDocumentsData();
-    } else {
-      this.querySqlDocumentsData();
-    }
-  }
-
-  public buildQuery(filter: string): string {
-    return QueryUtils.buildDocumentsQuery(filter, this.props.partitionKeyProperty, this.props.partitionKey);
-  }
-
-  private querySqlDocumentsData = async (): Promise<void> => {
-    this.props.isExecuting(true);
-    this.props.isExecutionError(false);
-    const { filter } = this.state;
-    const query: string = this.buildQuery(filter);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const options: any = {};
-    options.enableCrossPartitionQuery = HeadersUtility.shouldEnableCrossPartitionKey();
-    if (this.props._resourceTokenPartitionKey) {
-      options.partitionKey = this.props._resourceTokenPartitionKey;
-    }
-
-    try {
-      const sqlQuery = querySqlDocuments(this.props.collection.databaseId, this.props.collection.id(), query, options);
-      const querySqlDocumentsData = await sqlQuery.fetchNext();
-      this.setState({ documentSqlIds: querySqlDocumentsData.resources?.length ? querySqlDocumentsData.resources : [] });
-    } catch (error) {
-      this.props.isExecutionError(true);
-      const errorMessage = getErrorMessage(error);
-      NotificationConsoleUtils.logConsoleError(errorMessage);
-    } finally {
-      this.props.isExecuting(false);
-    }
-  };
-
-  private queryDocumentsData = async (): Promise<void> => {
-    this.props.isExecuting(true);
-    this.props.isExecutionError(false);
-    try {
-      const { filter } = this.state;
-      const query: string = filter || "{}";
-      const queryDocumentsData = await queryDocuments(
-        this.props.collection.databaseId,
-        this.props.collection as ViewModels.Collection,
-        true,
-        query,
-        undefined
-      );
-      if (queryDocumentsData) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const nextDocumentIds = queryDocumentsData.documents.map((rawDocument: any) => {
-          const partitionKeyValue = rawDocument._partitionKeyValue;
-          return new DocumentId(this.props as DocumentsTab, rawDocument, partitionKeyValue);
-        });
-        this.setState({ documentIds: nextDocumentIds });
-      }
-      if (this.props.onLoadStartKey !== undefined) {
-        TelemetryProcessor.traceSuccess(
-          Action.Tab,
-          {
-            databaseName: this.props.collection.databaseId,
-            collectionName: this.props.collection.id(),
-            dataExplorerArea: Areas.Tab,
-            tabTitle: this.props.tabTitle(),
-          },
-          this.props.onLoadStartKey
-        );
-      }
-    } catch (error) {
-      if (this.props.onLoadStartKey !== undefined) {
-        TelemetryProcessor.traceFailure(
-          Action.Tab,
-          {
-            databaseName: this.props.collection.databaseId,
-            collectionName: this.props.collection.id(),
-            dataExplorerArea: Areas.Tab,
-            tabTitle: this.props.tabTitle(),
-            error: getErrorMessage(error),
-            errorStack: getErrorStack(error),
-          },
-          this.props.onLoadStartKey
-        );
-      }
-    } finally {
-      this.props.isExecuting(false);
-    }
-  };
-
-  private handleRow = (row: DocumentId | Resource): void => {
-    if (this.state.isEditorContentEdited) {
-      this.props.collection.container.showOkCancelModalDialog(
-        "Are you sure you want to continue?",
-        "Your unsaved changes will be lost.",
-        "Okay",
-        () => {
-          this.handleRowContent(row);
-          this.setState({ isEditorContentEdited: false });
-          return;
-        },
-        "Cancel",
-        undefined
-      );
-    } else {
-      this.handleRowContent(row);
-    }
-  };
-
-  private handleRowContent = (row: DocumentId | Resource): void => {
-    userContext.apiType === "Mongo"
-      ? this.updateContent(row as DocumentId, formatDocumentContent(row as DocumentId))
-      : this.updateSqlContent(row as Resource);
-    this.setDefaultUpdateTabButtonVisibility();
-  };
-
-  private updateContent = (row: DocumentId, formattedDocumentContent: string): void => {
-    this.setState(
-      {
-        documentContent: formattedDocumentContent,
-        isEditorVisible: true,
-        selectedDocumentId: row,
-      },
-      () => {
-        this.updateTabButton();
-      }
-    );
-  };
-
-  private updateSqlContent = async (row: Resource): Promise<void> => {
-    const selectedDocumentId: DocumentId = new DocumentId(this.props as DocumentsTab, row, row._partitionKeyValue);
-
-    const content = await readDocument(this.props.collection, selectedDocumentId);
-    const formattedDocumentContent = formatSqlDocumentContent((content as unknown) as Resource);
-    this.setState(
-      {
-        documentContent: formattedDocumentContent,
-        isEditorVisible: true,
-        selectedSqlDocumentContent: formattedDocumentContent,
-        selectedSqlDocumentId: selectedDocumentId,
-      },
-      () => {
-        this.updateTabButton();
-      }
-    );
-  };
-
-  private handleFilter = (): void => {
-    userContext.apiType === "Mongo" ? this.queryDocumentsData() : this.querySqlDocumentsData();
-    this.setState({
-      isSuggestionVisible: false,
-    });
-  };
-
-  async updateSqlDocument(): Promise<void> {
-    const { isExecutionError, isExecuting, collection } = this.props;
-    const { documentContent, selectedSqlDocumentId } = this.state;
-    isExecutionError(false);
-    const startKey: number = this.getStartKey(Action.UpdateDocument);
-    try {
-      isExecuting(true);
-      const updateSqlDocumentRes = await updateSqlDocuments(
-        collection as ViewModels.Collection,
-        selectedSqlDocumentId,
-        JSON.parse(documentContent)
-      );
-      if (updateSqlDocumentRes) {
-        this.setTraceSuccess(Action.UpdateDocument, startKey);
-        this.querySqlDocumentsData();
-      }
-    } catch (error) {
-      NotificationConsoleUtils.logConsoleError(getErrorMessage(error));
-      this.setTraceFail(Action.UpdateDocument, startKey, error);
-    }
-  }
-
-  private async updateMongoDocument(): Promise<void> {
-    const { selectedDocumentId, documentContent, documentIds } = this.state;
-    const { isExecutionError, isExecuting, collection, partitionKey, partitionKeyProperty } = this.props;
-    isExecutionError(false);
-    isExecuting(true);
-    const startKey: number = this.getStartKey(Action.UpdateDocument);
-    try {
-      const updatedDocument = await updateDocument(
-        collection.databaseId,
-        collection as ViewModels.Collection,
-        selectedDocumentId,
-        documentContent
-      );
-
-      documentIds.forEach((documentId: DocumentId) => {
-        if (documentId.rid === updatedDocument._rid) {
-          const partitionKeyArray = extractPartitionKey(
-            updatedDocument,
-            getPartitionKeyDefinition(partitionKey, partitionKeyProperty) as PartitionKeyDefinition
-          );
-          const partitionKeyValue = partitionKeyArray && partitionKeyArray[0];
-          const id = new ObjectId(this.props as DocumentsTab, updatedDocument, partitionKeyValue);
-          documentId.id(id.id());
-        }
-      });
-      this.setTraceSuccess(Action.UpdateDocument, startKey);
-      this.setState({ isEditorContentEdited: false });
-    } catch (error) {
-      NotificationConsoleUtils.logConsoleError(getErrorMessage(error));
-      this.setTraceFail(Action.UpdateDocument, startKey, error);
-    }
-  }
-
-  protected getTabsButtons(): CommandButtonComponentProps[] {
-    const buttons: CommandButtonComponentProps[] = [];
-    const label = `New ${getEntityName()}`;
-    if (newDocumentButton.visible) {
-      buttons.push({
-        iconSrc: NewDocumentIcon,
-        iconAlt: label,
-        onCommandClick: this.onNewDocumentClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: false,
-        disabled: !newDocumentButton.enabled,
-      });
-    }
-
-    if (saveNewDocumentButton.visible) {
-      const label = "Save";
-      buttons.push({
-        iconSrc: SaveIcon,
-        iconAlt: label,
-        onCommandClick: this.onSaveNewDocumentClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: false,
-        disabled: !saveNewDocumentButton.enabled,
-      });
-    }
-
-    if (discardNewDocumentChangesButton.visible) {
-      const label = "Discard";
-      buttons.push({
-        iconSrc: DiscardIcon,
-        iconAlt: label,
-        onCommandClick: this.onRevertNewDocumentClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: false,
-        disabled: !discardNewDocumentChangesButton.enabled,
-      });
-    }
-
-    if (saveExisitingDocumentButton.visible) {
-      const label = "Update";
-      buttons.push({
-        ...this,
-        updateMongoDocument: this.updateMongoDocument,
-        updateSqlDocument: this.updateSqlDocument,
-        setState: this.setState,
-        iconSrc: SaveIcon,
-        iconAlt: label,
-        onCommandClick: this.onSaveExisitingDocumentClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: false,
-        disabled: !saveExisitingDocumentButton.enabled,
-      });
-    }
-
-    if (discardExisitingDocumentChangesButton.visible) {
-      const label = "Discard";
-      buttons.push({
-        ...this,
-        setState: this.setState,
-        iconSrc: DiscardIcon,
-        iconAlt: label,
-        onCommandClick: this.onRevertExisitingDocumentClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: false,
-        disabled: !discardExisitingDocumentChangesButton.enabled,
-      });
-    }
-
-    if (deleteExisitingDocumentButton.visible) {
-      const label = "Delete";
-      buttons.push({
-        ...this,
-        setState: this.setState,
-        iconSrc: DeleteDocumentIcon,
-        iconAlt: label,
-        onCommandClick: this.onDeleteExisitingDocumentClick,
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: false,
-        disabled: !deleteExisitingDocumentButton.enabled,
-      });
-    }
-    if (userContext.apiType !== "Mongo") {
-      const { collection } = this.props;
-      const label = "Upload Item";
-      buttons.push({
-        iconSrc: UploadIcon,
-        iconAlt: label,
-        onCommandClick: () => {
-          const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
-          selectedCollection && collection.container.openUploadItemsPanePane();
-        },
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: true,
-        disabled: useSelectedNode.getState().isDatabaseNodeOrNoneSelected(),
-      });
-    }
-    return buttons;
-  }
-
-  private onSaveExisitingDocumentClick(): void {
-    userContext.apiType === "Mongo" ? this.updateMongoDocument() : this.updateSqlDocument();
-  }
-
-  private async onDeleteExisitingDocumentClick(): Promise<void> {
-    const confirmationMessage = `Are you sure you want to delete the selected ${getEntityName()} ?`;
-    const { isExecuting, collection } = this.props;
-    const startKey: number = this.getStartKey(Action.DeleteDocument);
-    this.props.collection.container.showOkCancelModalDialog(
-      confirmationMessage,
-      `This ${getEntityName()} will be deleted immediately. You can't undo this action`,
-      "Delete",
-      async () => {
-        try {
-          isExecuting(true);
-          if (userContext.apiType === "Mongo") {
-            await deleteDocument(
-              collection.databaseId,
-              collection as ViewModels.Collection,
-              this.state.selectedDocumentId
-            );
-            this.queryDocumentsData();
-          } else {
-            const { selectedSqlDocumentId } = this.state;
-            await deleteSqlDocument(collection as ViewModels.Collection, selectedSqlDocumentId);
-            this.querySqlDocumentsData();
-          }
-          this.setTraceSuccess(Action.DeleteDocument, startKey);
-          this.setState({ isEditorVisible: false });
-        } catch (error) {
-          this.setTraceFail(Action.DeleteDocument, startKey, error);
-        }
-      },
-      "Cancel",
-      undefined
-    );
-  }
-
-  private onRevertExisitingDocumentClick(): void {
-    const { selectedDocumentId, selectedSqlDocumentContent } = this.state;
-    const documentContent =
-      userContext.apiType === "Mongo" ? formatDocumentContent(selectedDocumentId) : selectedSqlDocumentContent;
-    this.setState({
-      documentContent: documentContent,
-    });
-    discardExisitingDocumentChangesButton = assignTabButtonVisibility(true, false);
-    saveExisitingDocumentButton = assignTabButtonVisibility(true, false);
-    this.updateTabButton();
-  }
-
-  private onNewDocumentClick = () => {
-    newDocumentButton = assignTabButtonVisibility(true, false);
-    saveNewDocumentButton = assignTabButtonVisibility(true, true);
-    discardNewDocumentChangesButton = assignTabButtonVisibility(true, true);
-    saveExisitingDocumentButton = assignTabButtonVisibility(false, false);
-    discardExisitingDocumentChangesButton = assignTabButtonVisibility(false, false);
-    deleteExisitingDocumentButton = assignTabButtonVisibility(false, false);
-
-    this.updateTabButton();
-    this.setState({
-      documentContent: this.initialDocumentContent,
-      isEditorVisible: true,
-    });
-  };
-
-  private onSaveNewDocumentClick = () => {
-    if (userContext.apiType === "Mongo") {
-      this.onSaveNewMongoDocumentClick();
-    } else {
-      this.onSaveSqlNewMongoDocumentClick();
-    }
-  };
-
-  public onSaveSqlNewMongoDocumentClick = async (): Promise<void> => {
-    const { isExecutionError, isExecuting, collection } = this.props;
-    isExecutionError(false);
-    const startKey: number = this.getStartKey(Action.CreateDocument);
-    const document = JSON.parse(this.state.documentContent);
-    isExecuting(true);
-    try {
-      const savedDocument = await createSqlDocuments(collection, document);
-      if (savedDocument) {
-        const formattedDocumentContent = formatSqlDocumentContent((savedDocument as unknown) as Resource);
-        this.setState({ documentContent: formattedDocumentContent });
-        this.setDefaultUpdateTabButtonVisibility();
-        this.setTraceSuccess(Action.CreateDocument, startKey);
-      }
-      this.querySqlDocumentsData();
-    } catch (error) {
-      NotificationConsoleUtils.logConsoleError(getErrorMessage(error));
-      this.setTraceFail(Action.CreateDocument, startKey, error);
-    }
-  };
-
-  private setDefaultUpdateTabButtonVisibility = (): void => {
-    newDocumentButton = assignTabButtonVisibility(true, true);
-    saveNewDocumentButton = assignTabButtonVisibility(false, false);
-    discardNewDocumentChangesButton = assignTabButtonVisibility(false, false);
-    saveExisitingDocumentButton = assignTabButtonVisibility(true, false);
-    discardExisitingDocumentChangesButton = assignTabButtonVisibility(true, false);
-    deleteExisitingDocumentButton = assignTabButtonVisibility(true, true);
-    this.updateTabButton();
-  };
-
-  public onSaveNewMongoDocumentClick = async (): Promise<void> => {
-    const parsedDocumentContent = JSON.parse(this.state.documentContent);
-    const {
-      partitionKey,
-      partitionKeyProperty,
-      displayedError,
-      isExecutionError,
-      isExecuting,
-      collection,
-    } = this.props;
-    displayedError("");
-    const startKey: number = this.getStartKey(Action.CreateDocument);
-    if (
-      partitionKeyProperty &&
-      partitionKeyProperty !== "_id" &&
-      !hasShardKeySpecified(parsedDocumentContent, partitionKey, partitionKeyProperty)
-    ) {
-      const message = `The document is lacking the shard property: ${partitionKeyProperty}`;
-      displayedError(message);
-      this.setTraceFail(Action.CreateDocument, startKey, message);
-      logError("Failed to save new document: Document shard key not defined", "MongoDocumentsTab");
-      throw new Error("Document without shard key");
-    }
-    isExecutionError(false);
-    isExecuting(true);
-    try {
-      const savedDocument = await createDocument(
-        collection.databaseId,
-        collection as ViewModels.Collection,
-        partitionKeyProperty,
-        parsedDocumentContent
-      );
-      if (savedDocument) {
-        this.handleLoadMoreDocument();
-        this.setDefaultUpdateTabButtonVisibility();
-        this.setTraceSuccess(Action.CreateDocument, startKey);
-      }
-      this.setState({ isEditorContentEdited: false });
-      this.queryDocumentsData();
-    } catch (error) {
-      window.alert(getErrorMessage(error));
-      this.setTraceFail(Action.CreateDocument, startKey, error);
-    }
-  };
-
-  private getStartKey = (action: number): number => {
-    const startKey: number = TelemetryProcessor.traceStart(action, {
-      dataExplorerArea: Areas.Tab,
-      tabTitle: this.props.tabTitle(),
-    });
-    return startKey;
-  };
-
-  private setTraceSuccess = (action: number, startKey: number): void => {
-    const { isExecuting, tabTitle } = this.props;
-    TelemetryProcessor.traceSuccess(
-      action,
-      {
-        dataExplorerArea: Areas.Tab,
-        tabTitle: tabTitle(),
-      },
-      startKey
-    );
-    isExecuting(false);
-  };
-
-  private setTraceFail = (action: number, startKey: number, error: Error | string): void => {
-    const { isExecuting, tabTitle, isExecutionError } = this.props;
-    TelemetryProcessor.traceFailure(
-      action,
-      {
-        dataExplorerArea: Areas.Tab,
-        tabTitle: tabTitle(),
-        error: getErrorMessage(error),
-        errorStack: getErrorStack(error),
-      },
-      startKey
-    );
-    isExecuting(false);
-    isExecutionError(true);
-  };
-
-  private onRevertNewDocumentClick = () => {
-    newDocumentButton = assignTabButtonVisibility(true, true);
-    saveNewDocumentButton = assignTabButtonVisibility(true, false);
-    discardNewDocumentChangesButton = assignTabButtonVisibility(true, false);
-
-    this.updateTabButton();
-    this.setState({
-      isEditorVisible: false,
-      isEditorContentEdited: false,
-    });
-  };
-
-  private onRenderCell = (item: { value: string }): JSX.Element => {
-    return (
-      <div
-        className="documentTabSuggestions"
-        onClick={() =>
-          this.setState({
-            filter: item.value,
-            isSuggestionVisible: false,
-          })
-        }
-      >
-        <Text>{item.value}</Text>
-      </div>
-    );
-  };
-
-  private handleLoadMoreDocument = (): void => {
-    userContext.apiType === "Mongo" ? this.queryDocumentsData() : this.querySqlDocumentsData();
-    this.setState({
-      isSuggestionVisible: false,
-      isAllDocumentsVisible: true,
-    });
-  };
-
-  private updateTabButton = (): void => {
-    useCommandBar.getState().setContextButtons(this.getTabsButtons());
-  };
-
-  private getKey(item: DocumentId): string {
-    return item.rid;
-  }
-
-  private handleDocumentContentChange = (newContent: string): void => {
-    if (saveExisitingDocumentButton.visible && newContent !== this.state.documentContent) {
-      saveExisitingDocumentButton = assignTabButtonVisibility(true, true);
-      discardExisitingDocumentChangesButton = assignTabButtonVisibility(true, true);
-    }
-
-    this.setState(
-      {
-        documentContent: newContent,
-        isEditorContentEdited: true,
-      },
-      () => {
-        this.updateTabButton();
-      }
-    );
-  };
-
-  public render(): JSX.Element {
-    const {
-      columns,
-      isCompactMode,
-      isSuggestionVisible,
-      filter,
-      isFilterOptionVisible,
-      isEditorVisible,
-      documentContent,
-      documentIds,
-      documentSqlIds,
-      isAllDocumentsVisible,
-    } = this.state;
-    const isPreferredApiMongoDB = userContext.apiType === "Mongo";
-
-    return (
-      <>
-        {isFilterOptionVisible && (
-          <>
-            <div>
-              <Stack horizontal verticalFill wrap>
-                {!isPreferredApiMongoDB && <Text className="queryText">SELECT * FROM c</Text>}
-                <TextField
-                  iconProps={filterIcon}
-                  placeholder={getFilterPlaceholder(isPreferredApiMongoDB)}
-                  className={isPreferredApiMongoDB ? "documentTabSearchBar" : "documentSqlTabSearchBar"}
-                  onFocus={() => this.setState({ isSuggestionVisible: true })}
-                  onChange={(_event, newInput?: string) => {
-                    this.setState({ filter: newInput });
-                  }}
-                  value={filter}
-                />
-                <PrimaryButton text="Apply Filter" onClick={this.handleFilter} className="documentTabFiltetButton" />
-                <Image
-                  src={CloseIcon}
-                  alt="Close icon"
-                  {...imageProps}
-                  onClick={() => this.setState({ isFilterOptionVisible: false })}
-                />
-              </Stack>
-            </div>
-            {isSuggestionVisible && (
-              <div className={isPreferredApiMongoDB ? "filterSuggestions" : "filterSuggestions sqlFilterSuggestions"}>
-                <List items={getFilterSuggestions(isPreferredApiMongoDB)} onRenderCell={this.onRenderCell} />
-              </div>
-            )}
-          </>
-        )}
-        {!isFilterOptionVisible && (
-          <Stack horizontal verticalFill wrap className="documentTabNoFilterView">
-            <Text className="noFilterText">{getfilterText(isPreferredApiMongoDB, filter)}</Text>
-            <PrimaryButton text="Edit Filter" onClick={() => this.setState({ isFilterOptionVisible: true })} />
-          </Stack>
-        )}
-        <div className="splitterWrapper" onClick={() => this.setState({ isSuggestionVisible: false })}>
-          <SplitterLayout primaryIndex={0} secondaryInitialSize={1000}>
-            <div className="leftSplitter">
-              <DetailsList
-                items={getDocumentItems(isPreferredApiMongoDB, documentIds, documentSqlIds, isAllDocumentsVisible)}
-                compact={isCompactMode}
-                columns={columns}
-                selectionMode={SelectionMode.none}
-                getKey={this.getKey}
-                setKey="none"
-                layoutMode={DetailsListLayoutMode.justified}
-                isHeaderVisible={true}
-              />
-              <Text onClick={this.handleLoadMoreDocument} className="documentLoadMore" block={true}>
-                Load More
-              </Text>
-            </div>
-            {isEditorVisible ? (
-              <div className="react-editor">
-                <EditorReact
-                  language={"json"}
-                  content={documentContent}
-                  isReadOnly={false}
-                  ariaLabel={"Document json"}
-                  onContentChanged={this.handleDocumentContentChange}
-                  lineNumbers="on"
-                />
-              </div>
-            ) : (
-              <div className="documentTabWatermark">
-                <Image src={DocumentWaterMark} alt="Document watermark" />
-                <Text className="documentCreateText">Create new or work with existing document(s).</Text>
-              </div>
-            )}
-          </SplitterLayout>
-        </div>
-      </>
-    );
-  }
-}

src/Explorer/Tabs/DocumentsTabUtils.test.tsx

@@ -1,90 +0,0 @@
-import * as ko from "knockout";
-import { PartitionKey, Resource } from "../../../src/Contracts/DataModels";
-import DocumentId from "../Tree/DocumentId";
-import * as DocumentTabUtils from "./DocumentTabUtils";
-
-describe("DocumentTabUtils", () => {
-  describe("getfilterText()", () => {
-    it("Should return filter if isPreferredApiMongoDB is true and filter is applied ", () => {
-      const filteredText: string = DocumentTabUtils.getfilterText(true, `{"_id": "foo"}`);
-      expect(filteredText).toBe(`Filter : {"_id": "foo"}`);
-    });
-    it("Should return `No filter applied` if isPreferredApiMongoDB is true and filter is not applied ", () => {
-      const filteredText: string = DocumentTabUtils.getfilterText(true, "");
-      expect(filteredText).toBe("No filter applied");
-    });
-    it("Should return `Select * from C` with filter if isPreferredApiMongoDB is false and filter is applied ", () => {
-      const filteredText: string = DocumentTabUtils.getfilterText(false, `WHERE c.id = "foo"`);
-      expect(filteredText).toBe(`Select * from C WHERE c.id = "foo"`);
-    });
-  });
-
-  describe("formatDocumentContent()", () => {
-    const fakeDocumentData = {} as DocumentId;
-    fakeDocumentData.partitionKeyProperty = "test";
-    fakeDocumentData.id = ko.observable("id");
-
-    it("should return formatted content with new line each property.", () => {
-      fakeDocumentData.partitionKeyValue = "partitionValue";
-      const formattedContent: string = DocumentTabUtils.formatDocumentContent(fakeDocumentData);
-      expect(formattedContent).toBe(`{\n"_id":"id",\n"test":"partitionValue"\n}`);
-    });
-
-    it("should return formatted content with empty partitionKeyValue when partitionKeyValue is undefined.", () => {
-      fakeDocumentData.partitionKeyValue = undefined;
-      const formattedContent: string = DocumentTabUtils.formatDocumentContent(fakeDocumentData);
-      expect(formattedContent).toBe(`{\n"_id":"id",\n"test":""\n}`);
-    });
-  });
-
-  describe("formatSqlDocumentContent()", () => {
-    const fakeDocumentData = {} as Resource;
-    it("should return formatted content with new line each property.", () => {
-      fakeDocumentData.id = "testId";
-      fakeDocumentData._rid = "testRid";
-      fakeDocumentData._self = "testSelf";
-      fakeDocumentData._ts = "testTs";
-      fakeDocumentData._etag = "testEtag";
-      fakeDocumentData._attachments = "testAttachments";
-      fakeDocumentData._partitionKey = "testPartitionKey";
-
-      const formattedContent: string = DocumentTabUtils.formatSqlDocumentContent(fakeDocumentData);
-      expect(formattedContent).toBe(
-        `{\n"id":"testId",\n"_rid":"testRid",\n"_self":"testSelf",\n"_ts":"testTs",\n"_etag":"testEtag",\n"_attachments":"testAttachments",\n"_partitionKey":"testPartitionKey"\n}`
-      );
-    });
-
-    it("should return formatted content with empty value when key value is undefined.", () => {
-      fakeDocumentData.id = undefined;
-      fakeDocumentData._rid = undefined;
-      fakeDocumentData._self = undefined;
-      fakeDocumentData._ts = undefined;
-      fakeDocumentData._etag = undefined;
-      fakeDocumentData._attachments = undefined;
-      fakeDocumentData._partitionKey = undefined;
-      const formattedContent: string = DocumentTabUtils.formatSqlDocumentContent(fakeDocumentData);
-      expect(formattedContent).toBe(
-        `{\n"id":"",\n"_rid":"",\n"_self":"",\n"_ts":"",\n"_etag":"",\n"_attachments":"",\n"_partitionKey":""\n}`
-      );
-    });
-  });
-  describe("getPartitionKeyDefinition()", () => {
-    const partitionKey = {} as PartitionKey;
-    partitionKey.kind = "Hash";
-    partitionKey.version = 1;
-    partitionKey.systemKey = true;
-    const partitionKeyProperty = "testPartitionKey";
-
-    it("should return formatted partitionKey with formatted path.", () => {
-      partitionKey.paths = ["test"];
-      const formattedPartitionKey = DocumentTabUtils.getPartitionKeyDefinition(partitionKey, partitionKeyProperty);
-      expect(formattedPartitionKey).toEqual({ kind: "Hash", version: 1, systemKey: true, paths: ["test"] });
-    });
-
-    it("should return partitionKey with undefined paths if paths is undefined.", () => {
-      partitionKey.paths = undefined;
-      const formattedPartitionKey = DocumentTabUtils.getPartitionKeyDefinition(partitionKey, partitionKeyProperty);
-      expect(formattedPartitionKey).toEqual({ kind: "Hash", version: 1, systemKey: true, paths: undefined });
-    });
-  });
-});

src/Explorer/Tabs/MongoDocumentsTab.ts

@@ -1,10 +1,34 @@
+import { extractPartitionKey, PartitionKeyDefinition } from "@azure/cosmos";
+import * as ko from "knockout";
+import Q from "q";
+import * as Constants from "../../Common/Constants";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import * as Logger from "../../Common/Logger";
+import {
+  createDocument,
+  deleteDocument,
+  queryDocuments,
+  readDocument,
+  updateDocument,
+} from "../../Common/MongoProxyClient";
+import MongoUtility from "../../Common/MongoUtility";
+import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
+import { Action } from "../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { useDialog } from "../Controls/Dialog";
+import DocumentId from "../Tree/DocumentId";
+import ObjectId from "../Tree/ObjectId";
 import DocumentsTab from "./DocumentsTab";
 
 export default class MongoDocumentsTab extends DocumentsTab {
   public collection: ViewModels.Collection;
+  private continuationToken: string;
+
   constructor(options: ViewModels.DocumentsTabOptions) {
     super(options);
+    this.lastFilterContents = ko.observableArray<string>(['{"id":"foo"}', "{ qty: { $gte: 20 } }"]);
+
     if (this.partitionKeyProperty && ~this.partitionKeyProperty.indexOf(`"`)) {
       this.partitionKeyProperty = this.partitionKeyProperty.replace(/["]+/g, "");
     }
@@ -15,7 +39,279 @@ export default class MongoDocumentsTab extends DocumentsTab {
       this.partitionKeyPropertyHeader = "/" + this.partitionKeyProperty;
     }
 
+    this.isFilterExpanded = ko.observable<boolean>(true);
     super.buildCommandBarOptions.bind(this);
     super.buildCommandBarOptions();
   }
+
+  public onSaveNewDocumentClick = (): Promise<any> => {
+    const documentContent = JSON.parse(this.selectedDocumentContent());
+    this.displayedError("");
+    const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
+      dataExplorerArea: Constants.Areas.Tab,
+      tabTitle: this.tabTitle(),
+    });
+
+    if (
+      this.partitionKeyProperty &&
+      this.partitionKeyProperty !== "_id" &&
+      !this._hasShardKeySpecified(documentContent)
+    ) {
+      const message = `The document is lacking the shard property: ${this.partitionKeyProperty}`;
+      this.displayedError(message);
+      let that = this;
+      setTimeout(() => {
+        that.displayedError("");
+      }, Constants.ClientDefaults.errorNotificationTimeoutMs);
+      this.isExecutionError(true);
+      TelemetryProcessor.traceFailure(
+        Action.CreateDocument,
+        {
+          dataExplorerArea: Constants.Areas.Tab,
+          tabTitle: this.tabTitle(),
+          error: message,
+        },
+        startKey
+      );
+      Logger.logError("Failed to save new document: Document shard key not defined", "MongoDocumentsTab");
+      throw new Error("Document without shard key");
+    }
+
+    this.isExecutionError(false);
+    this.isExecuting(true);
+    return createDocument(this.collection.databaseId, this.collection, this.partitionKeyProperty, documentContent)
+      .then(
+        (savedDocument: any) => {
+          let partitionKeyArray = extractPartitionKey(
+            savedDocument,
+            this._getPartitionKeyDefinition() as PartitionKeyDefinition
+          );
+
+          let partitionKeyValue = partitionKeyArray && partitionKeyArray[0];
+
+          let id = new ObjectId(this, savedDocument, partitionKeyValue);
+          let ids = this.documentIds();
+          ids.push(id);
+          delete savedDocument._self;
+
+          let value: string = this.renderObjectForEditor(savedDocument || {}, null, 4);
+          this.selectedDocumentContent.setBaseline(value);
+
+          this.selectedDocumentId(id);
+          this.documentIds(ids);
+          this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+          TelemetryProcessor.traceSuccess(
+            Action.CreateDocument,
+            {
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle(),
+            },
+            startKey
+          );
+        },
+        (error) => {
+          this.isExecutionError(true);
+          const errorMessage = getErrorMessage(error);
+          useDialog.getState().showOkModalDialog("Create document failed", errorMessage);
+          TelemetryProcessor.traceFailure(
+            Action.CreateDocument,
+            {
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle(),
+              error: errorMessage,
+              errorStack: getErrorStack(error),
+            },
+            startKey
+          );
+        }
+      )
+      .finally(() => this.isExecuting(false));
+  };
+
+  public onSaveExisitingDocumentClick = (): Promise<any> => {
+    const selectedDocumentId = this.selectedDocumentId();
+    const documentContent = this.selectedDocumentContent();
+    this.isExecutionError(false);
+    this.isExecuting(true);
+    const startKey: number = TelemetryProcessor.traceStart(Action.UpdateDocument, {
+      dataExplorerArea: Constants.Areas.Tab,
+      tabTitle: this.tabTitle(),
+    });
+
+    return updateDocument(this.collection.databaseId, this.collection, selectedDocumentId, documentContent)
+      .then(
+        (updatedDocument: any) => {
+          let value: string = this.renderObjectForEditor(updatedDocument || {}, null, 4);
+          this.selectedDocumentContent.setBaseline(value);
+
+          this.documentIds().forEach((documentId: DocumentId) => {
+            if (documentId.rid === updatedDocument._rid) {
+              const partitionKeyArray = extractPartitionKey(
+                updatedDocument,
+                this._getPartitionKeyDefinition() as PartitionKeyDefinition
+              );
+
+              let partitionKeyValue = partitionKeyArray && partitionKeyArray[0];
+
+              const id = new ObjectId(this, updatedDocument, partitionKeyValue);
+              documentId.id(id.id());
+            }
+          });
+          this.editorState(ViewModels.DocumentExplorerState.exisitingDocumentNoEdits);
+          TelemetryProcessor.traceSuccess(
+            Action.UpdateDocument,
+            {
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle(),
+            },
+            startKey
+          );
+        },
+        (error) => {
+          this.isExecutionError(true);
+          const errorMessage = getErrorMessage(error);
+          useDialog.getState().showOkModalDialog("Update document failed", errorMessage);
+          TelemetryProcessor.traceFailure(
+            Action.UpdateDocument,
+            {
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle(),
+              error: errorMessage,
+              errorStack: getErrorStack(error),
+            },
+            startKey
+          );
+        }
+      )
+      .finally(() => this.isExecuting(false));
+  };
+
+  public buildQuery(filter: string): string {
+    return filter || "{}";
+  }
+
+  public async selectDocument(documentId: DocumentId): Promise<void> {
+    this.selectedDocumentId(documentId);
+    const content = await readDocument(this.collection.databaseId, this.collection, documentId);
+    this.initDocumentEditor(documentId, content);
+  }
+
+  public loadNextPage(): Q.Promise<any> {
+    this.isExecuting(true);
+    this.isExecutionError(false);
+    const filter: string = this.filterContent().trim();
+    const query: string = this.buildQuery(filter);
+
+    return Q(queryDocuments(this.collection.databaseId, this.collection, true, query, this.continuationToken))
+      .then(
+        ({ continuationToken, documents }) => {
+          this.continuationToken = continuationToken;
+          let currentDocuments = this.documentIds();
+          const currentDocumentsRids = currentDocuments.map((currentDocument) => currentDocument.rid);
+          const nextDocumentIds = documents
+            .filter((d: any) => {
+              return currentDocumentsRids.indexOf(d._rid) < 0;
+            })
+            .map((rawDocument: any) => {
+              const partitionKeyValue = rawDocument._partitionKeyValue;
+              return new DocumentId(this, rawDocument, partitionKeyValue);
+            });
+
+          const merged = currentDocuments.concat(nextDocumentIds);
+
+          this.documentIds(merged);
+          currentDocuments = this.documentIds();
+          if (this.filterContent().length > 0 && currentDocuments.length > 0) {
+            currentDocuments[0].click();
+          } else {
+            this.selectedDocumentContent("");
+            this.selectedDocumentId(null);
+            this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+          }
+          if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
+            TelemetryProcessor.traceSuccess(
+              Action.Tab,
+              {
+                databaseName: this.collection.databaseId,
+                collectionName: this.collection.id(),
+
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle: this.tabTitle(),
+              },
+              this.onLoadStartKey
+            );
+            this.onLoadStartKey = null;
+          }
+        },
+        (error: any) => {
+          if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
+            TelemetryProcessor.traceFailure(
+              Action.Tab,
+              {
+                databaseName: this.collection.databaseId,
+                collectionName: this.collection.id(),
+
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle: this.tabTitle(),
+                error: getErrorMessage(error),
+                errorStack: getErrorStack(error),
+              },
+              this.onLoadStartKey
+            );
+            this.onLoadStartKey = null;
+          }
+        }
+      )
+      .finally(() => this.isExecuting(false));
+  }
+
+  protected _onEditorContentChange(newContent: string) {
+    try {
+      if (
+        this.editorState() === ViewModels.DocumentExplorerState.newDocumentValid ||
+        this.editorState() === ViewModels.DocumentExplorerState.newDocumentInvalid
+      ) {
+        let parsed: any = JSON.parse(newContent);
+      }
+
+      // Mongo uses BSON format for _id, trying to parse it as JSON blocks normal flow in an edit
+      this.onValidDocumentEdit();
+    } catch (e) {
+      this.onInvalidDocumentEdit();
+    }
+  }
+
+  /** Renders a Javascript object to be displayed inside Monaco Editor */
+  public renderObjectForEditor(value: any, replacer: any, space: string | number): string {
+    return MongoUtility.tojson(value, null, false);
+  }
+
+  private _hasShardKeySpecified(document: any): boolean {
+    return Boolean(extractPartitionKey(document, this._getPartitionKeyDefinition() as PartitionKeyDefinition));
+  }
+
+  private _getPartitionKeyDefinition(): DataModels.PartitionKey {
+    let partitionKey: DataModels.PartitionKey = this.partitionKey;
+
+    if (
+      this.partitionKey &&
+      this.partitionKey.paths &&
+      this.partitionKey.paths.length &&
+      this.partitionKey.paths.length > 0 &&
+      this.partitionKey.paths[0].indexOf("$v") > -1
+    ) {
+      // Convert BsonSchema2 to /path format
+      partitionKey = {
+        kind: partitionKey.kind,
+        paths: ["/" + this.partitionKeyProperty.replace(/\./g, "/")],
+        version: partitionKey.version,
+      };
+    }
+
+    return partitionKey;
+  }
+
+  protected __deleteDocument(documentId: DocumentId): Promise<void> {
+    return deleteDocument(this.collection.databaseId, this.collection, documentId);
+  }
 }

src/Explorer/Tabs/NotebookV2Tab.ts

@@ -17,12 +17,14 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import * as NotebookConfigurationUtils from "../../Utils/NotebookConfigurationUtils";
 import { logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
+import { useDialog } from "../Controls/Dialog";
 import * as CommandBarComponentButtonFactory from "../Menus/CommandBar/CommandBarComponentButtonFactory";
 import { KernelSpecsDisplay } from "../Notebook/NotebookClientV2";
 import * as CdbActions from "../Notebook/NotebookComponent/actions";
 import { NotebookComponentAdapter } from "../Notebook/NotebookComponent/NotebookComponentAdapter";
 import { CdbAppState, SnapshotRequest } from "../Notebook/NotebookComponent/types";
 import { NotebookContentItem } from "../Notebook/NotebookContentItem";
+import { NotebookUtil } from "../Notebook/NotebookUtil";
 import { useNotebook } from "../Notebook/useNotebook";
 import NotebookTabBase, { NotebookTabBaseOptions } from "./NotebookTabBase";
 
@@ -59,14 +61,16 @@ export default class NotebookTabV2 extends NotebookTabBase {
     };
 
     if (this.notebookComponentAdapter.isContentDirty()) {
-      this.container.showOkCancelModalDialog(
+      useDialog
-        "Close without saving?",
+        .getState()
-        `File has unsaved changes, close without saving?`,
+        .showOkCancelModalDialog(
-        "Close",
+          "Close without saving?",
-        cleanup,
+          `File has unsaved changes, close without saving?`,
-        "Cancel",
+          "Close",
-        undefined
+          cleanup,
-      );
+          "Cancel",
+          undefined
+        );
       return Q.resolve(null);
     } else {
       cleanup();
@@ -84,11 +88,13 @@ export default class NotebookTabV2 extends NotebookTabBase {
 
   protected getTabsButtons(): CommandButtonComponentProps[] {
     const availableKernels = NotebookTabV2.clientManager.getAvailableKernelSpecs();
+    const isNotebookUntrusted = this.notebookComponentAdapter.isNotebookUntrusted();
+
+    const runBtnTooltip = isNotebookUntrusted ? NotebookUtil.UntrustedNotebookRunHint : undefined;
 
     const saveLabel = "Save";
     const copyToLabel = "Copy to ...";
     const publishLabel = "Publish to gallery";
-    const workspaceLabel = "No Workspace";
     const kernelLabel = "No Kernel";
     const runLabel = "Run";
     const runActiveCellLabel = "Run Active Cell";
@@ -105,8 +111,6 @@ export default class NotebookTabV2 extends NotebookTabBase {
     const copyLabel = "Copy";
     const cutLabel = "Cut";
     const pasteLabel = "Paste";
-    const undoLabel = "Undo";
-    const redoLabel = "Redo";
     const cellCodeType = "code";
     const cellMarkdownType = "markdown";
     const cellRawType = "raw";
@@ -187,9 +191,10 @@ export default class NotebookTabV2 extends NotebookTabBase {
           this.traceTelemetry(Action.ExecuteCell);
         },
         commandButtonLabel: runLabel,
+        tooltipText: runBtnTooltip,
         ariaLabel: runLabel,
         hasPopup: false,
-        disabled: false,
+        disabled: isNotebookUntrusted,
         children: [
           {
             iconSrc: RunIcon,

src/Explorer/Tree/ConflictId.ts

@@ -1,12 +1,11 @@
-import Q from "q";
+import { extractPartitionKey } from "@azure/cosmos";
 import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
-import DocumentId from "./DocumentId";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { extractPartitionKey } from "@azure/cosmos";
-import ConflictsTab from "../Tabs/ConflictsTab";
 import { readDocument } from "../../Common/dataAccess/readDocument";
+import * as DataModels from "../../Contracts/DataModels";
+import { useDialog } from "../Controls/Dialog";
+import ConflictsTab from "../Tabs/ConflictsTab";
+import DocumentId from "./DocumentId";
 
 export default class ConflictId {
   public container: ConflictsTab;
@@ -50,13 +49,20 @@ export default class ConflictId {
   }
 
   public click() {
-    if (
+    if (this.container.isEditorDirty()) {
-      !this.container.isEditorDirty() ||
+      useDialog
-      window.confirm("Your unsaved changes will be lost. Do you want to continue?")
+        .getState()
-    ) {
+        .showOkCancelModalDialog(
+          "Unsaved changes",
+          "Your unsaved changes will be lost. Do you want to continue?",
+          "OK",
+          () => this.loadConflict(),
+          "Cancel",
+          undefined
+        );
+    } else {
       this.loadConflict();
     }
-    return;
   }
 
   public async loadConflict(): Promise<void> {

src/Explorer/Tree/DocumentId.ts

@@ -1,5 +1,6 @@
 import * as ko from "knockout";
 import * as DataModels from "../../Contracts/DataModels";
+import { useDialog } from "../Controls/Dialog";
 import DocumentsTab from "../Tabs/DocumentsTab";
 
 export default class DocumentId {
@@ -13,7 +14,6 @@ export default class DocumentId {
   public partitionKeyValue: any;
   public stringPartitionKeyValue: string;
   public isDirty: ko.Observable<boolean>;
-  public _partitionKeyValue: string;
 
   constructor(container: DocumentsTab, data: any, partitionKeyValue: any) {
     this.container = container;
@@ -28,6 +28,23 @@ export default class DocumentId {
     this.isDirty = ko.observable(false);
   }
 
+  public click() {
+    if (this.container.isEditorDirty()) {
+      useDialog
+        .getState()
+        .showOkCancelModalDialog(
+          "Unsaved changes",
+          "Your unsaved changes will be lost. Do you want to continue?",
+          "OK",
+          () => this.loadDocument(),
+          "Cancel",
+          undefined
+        );
+    } else {
+      this.loadDocument();
+    }
+  }
+
   public partitionKeyHeader(): Object {
     if (!this.partitionKeyProperty) {
       return undefined;
@@ -58,4 +75,8 @@ export default class DocumentId {
 
     return JSON.stringify(partitionKeyValue);
   }
+
+  public async loadDocument(): Promise<void> {
+    await this.container.selectDocument(this);
+  }
 }

src/Explorer/Tree/ObjectId.ts

@@ -1,6 +1,6 @@
 import * as ko from "knockout";
-import DocumentsTab from "../Tabs/DocumentsTab";
 import DocumentId from "./DocumentId";
+import DocumentsTab from "../Tabs/DocumentsTab";
 
 export default class ObjectId extends DocumentId {
   constructor(container: DocumentsTab, data: any, partitionKeyValue: any) {

src/Explorer/Tree/ResourceTree.tsx

@@ -1,5 +1,6 @@
 import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
 import * as React from "react";
+import shallow from "zustand/shallow";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
 import DeleteIcon from "../../../images/delete.svg";
 import GalleryIcon from "../../../images/GalleryIcon.svg";
@@ -10,7 +11,7 @@ import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
 import PublishIcon from "../../../images/notebook/publish_content.svg";
 import RefreshIcon from "../../../images/refresh-cosmos.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
-import { Areas } from "../../Common/Constants";
+import { Areas, Notebook } from "../../Common/Constants";
 import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -24,6 +25,7 @@ import { isServerlessAccount } from "../../Utils/CapabilityUtils";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
 import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory";
 import { AccordionComponent, AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
+import { useDialog } from "../Controls/Dialog";
 import { TreeComponent, TreeNode, TreeNodeMenuItem } from "../Controls/TreeComponent/TreeComponent";
 import Explorer from "../Explorer";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
@@ -54,7 +56,16 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
     galleryContentRoot,
     gitHubNotebooksContentRoot,
     updateNotebookItem,
-  } = useNotebook();
+  } = useNotebook(
+    (state) => ({
+      isNotebookEnabled: state.isNotebookEnabled,
+      myNotebooksContentRoot: state.myNotebooksContentRoot,
+      galleryContentRoot: state.galleryContentRoot,
+      gitHubNotebooksContentRoot: state.gitHubNotebooksContentRoot,
+      updateNotebookItem: state.updateNotebookItem,
+    }),
+    shallow
+  );
   const { activeTab, refreshActiveTab } = useTabs();
   const showScriptNodes = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
   const pseudoDirPath = "PsuedoDir";
@@ -110,23 +121,34 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       children: [],
     };
 
-    if (galleryContentRoot) {
+    if (userContext.features.notebooksTemporarilyDown) {
-      notebooksTree.children.push(buildGalleryNotebooksTree());
+      notebooksTree.children.push(buildNotebooksTemporarilyDownTree());
-    }
+    } else {
+      if (galleryContentRoot) {
+        notebooksTree.children.push(buildGalleryNotebooksTree());
+      }
 
-    if (myNotebooksContentRoot) {
+      if (myNotebooksContentRoot) {
-      notebooksTree.children.push(buildMyNotebooksTree());
+        notebooksTree.children.push(buildMyNotebooksTree());
-    }
+      }
 
-    if (container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
+      if (container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
-      // collapse all other notebook nodes
+        // collapse all other notebook nodes
-      notebooksTree.children.forEach((node) => (node.isExpanded = false));
+        notebooksTree.children.forEach((node) => (node.isExpanded = false));
-      notebooksTree.children.push(buildGitHubNotebooksTree());
+        notebooksTree.children.push(buildGitHubNotebooksTree());
+      }
     }
 
     return notebooksTree;
   };
 
+  const buildNotebooksTemporarilyDownTree = (): TreeNode => {
+    return {
+      label: Notebook.temporarilyDownMsg,
+      className: "clickDisabled",
+    };
+  };
+
   const buildGalleryNotebooksTree = (): TreeNode => {
     return {
       label: "Gallery",
@@ -165,7 +187,8 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
             mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
           }
         });
-      }
+      },
+      true
     );
 
     gitHubNotebooksTree.contextMenu = [
@@ -201,9 +224,9 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
   };
 
   const buildChildNodes = (
-    container: Explorer,
     item: NotebookContentItem,
-    onFileClick: (item: NotebookContentItem) => void
+    onFileClick: (item: NotebookContentItem) => void,
+    isGithubTree?: boolean
   ): TreeNode[] => {
     if (!item || !item.children) {
       return [];
@@ -211,8 +234,8 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       return item.children.map((item) => {
         const result =
           item.type === NotebookContentItemType.Directory
-            ? buildNotebookDirectoryNode(item, onFileClick)
+            ? buildNotebookDirectoryNode(item, onFileClick, isGithubTree)
-            : buildNotebookFileNode(item, onFileClick);
+            : buildNotebookFileNode(item, onFileClick, isGithubTree);
         result.timestamp = item.timestamp;
         return result;
       });
@@ -221,7 +244,8 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
 
   const buildNotebookFileNode = (
     item: NotebookContentItem,
-    onFileClick: (item: NotebookContentItem) => void
+    onFileClick: (item: NotebookContentItem) => void,
+    isGithubTree?: boolean
   ): TreeNode => {
     return {
       label: item.name,
@@ -238,30 +262,36 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
           (activeTab as any).notebookPath() === item.path
         );
       },
-      contextMenu: createFileContextMenu(container, item),
+      contextMenu: createFileContextMenu(container, item, isGithubTree),
       data: item,
     };
   };
 
-  const createFileContextMenu = (container: Explorer, item: NotebookContentItem): TreeNodeMenuItem[] => {
+  const createFileContextMenu = (
+    container: Explorer,
+    item: NotebookContentItem,
+    isGithubTree?: boolean
+  ): TreeNodeMenuItem[] => {
     let items: TreeNodeMenuItem[] = [
       {
         label: "Rename",
         iconSrc: NotebookIcon,
-        onClick: () => container.renameNotebook(item),
+        onClick: () => container.renameNotebook(item, isGithubTree),
       },
       {
         label: "Delete",
         iconSrc: DeleteIcon,
         onClick: () => {
-          container.showOkCancelModalDialog(
+          useDialog
-            "Confirm delete",
+            .getState()
-            `Are you sure you want to delete "${item.name}"`,
+            .showOkCancelModalDialog(
-            "Delete",
+              "Confirm delete",
-            () => container.deleteNotebookFile(item),
+              `Are you sure you want to delete "${item.name}"`,
-            "Cancel",
+              "Delete",
-            undefined
+              () => container.deleteNotebookFile(item, isGithubTree),
-          );
+              "Cancel",
+              undefined
+            );
         },
       },
       {
@@ -308,41 +338,47 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
     }
   };
 
-  const createDirectoryContextMenu = (container: Explorer, item: NotebookContentItem): TreeNodeMenuItem[] => {
+  const createDirectoryContextMenu = (
+    container: Explorer,
+    item: NotebookContentItem,
+    isGithubTree?: boolean
+  ): TreeNodeMenuItem[] => {
     let items: TreeNodeMenuItem[] = [
       {
         label: "Refresh",
         iconSrc: RefreshIcon,
-        onClick: () => loadSubitems(item),
+        onClick: () => loadSubitems(item, isGithubTree),
       },
       {
         label: "Delete",
         iconSrc: DeleteIcon,
         onClick: () => {
-          container.showOkCancelModalDialog(
+          useDialog
-            "Confirm delete",
+            .getState()
-            `Are you sure you want to delete "${item.name}?"`,
+            .showOkCancelModalDialog(
-            "Delete",
+              "Confirm delete",
-            () => container.deleteNotebookFile(item),
+              `Are you sure you want to delete "${item.name}?"`,
-            "Cancel",
+              "Delete",
-            undefined
+              () => container.deleteNotebookFile(item, isGithubTree),
-          );
+              "Cancel",
+              undefined
+            );
         },
       },
       {
         label: "Rename",
         iconSrc: NotebookIcon,
-        onClick: () => container.renameNotebook(item),
+        onClick: () => container.renameNotebook(item, isGithubTree),
       },
       {
         label: "New Directory",
         iconSrc: NewNotebookIcon,
-        onClick: () => container.onCreateDirectory(item),
+        onClick: () => container.onCreateDirectory(item, isGithubTree),
       },
       {
         label: "New Notebook",
         iconSrc: NewNotebookIcon,
-        onClick: () => container.onNewNotebookClicked(item),
+        onClick: () => container.onNewNotebookClicked(item, isGithubTree),
       },
       {
         label: "Upload File",
@@ -367,7 +403,8 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
 
   const buildNotebookDirectoryNode = (
     item: NotebookContentItem,
-    onFileClick: (item: NotebookContentItem) => void
+    onFileClick: (item: NotebookContentItem) => void,
+    isGithubTree?: boolean
   ): TreeNode => {
     return {
       label: item.name,
@@ -377,7 +414,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       isLeavesParentsSeparate: true,
       onClick: () => {
         if (!item.children) {
-          loadSubitems(item);
+          loadSubitems(item, isGithubTree);
         }
       },
       isSelected: () => {
@@ -390,9 +427,9 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
           (activeTab as any).notebookPath() === item.path
         );
       },
-      contextMenu: item.path !== pseudoDirPath ? createDirectoryContextMenu(container, item) : undefined,
+      contextMenu: item.path !== pseudoDirPath ? createDirectoryContextMenu(container, item, isGithubTree) : undefined,
       data: item,
-      children: buildChildNodes(container, item, onFileClick),
+      children: buildChildNodes(item, onFileClick, isGithubTree),
     };
   };
 
@@ -477,7 +514,12 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(container, collection),
     });
 
-    if (isNotebookEnabled && userContext.apiType === "Mongo" && isPublicInternetAccessAllowed()) {
+    if (
+      isNotebookEnabled &&
+      userContext.apiType === "Mongo" &&
+      isPublicInternetAccessAllowed() &&
+      !userContext.features.notebooksTemporarilyDown
+    ) {
       children.push({
         label: "Schema (Preview)",
         onClick: collection.onSchemaAnalyzerClick.bind(collection),
@@ -694,9 +736,9 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
     return traverse(schema);
   };
 
-  const loadSubitems = async (item: NotebookContentItem): Promise<void> => {
+  const loadSubitems = async (item: NotebookContentItem, isGithubTree?: boolean): Promise<void> => {
     const updatedItem = await container.notebookManager?.notebookContentClient?.updateItemChildren(item);
-    updateNotebookItem(updatedItem);
+    updateNotebookItem(updatedItem, isGithubTree);
   };
 
   const dataRootNode = buildDataTree();

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -27,6 +27,7 @@ import { isServerlessAccount } from "../../Utils/CapabilityUtils";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
 import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory";
 import { AccordionComponent, AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
+import { useDialog } from "../Controls/Dialog";
 import { TreeComponent, TreeNode, TreeNodeMenuItem } from "../Controls/TreeComponent/TreeComponent";
 import Explorer from "../Explorer";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
@@ -712,14 +713,16 @@ export class ResourceTreeAdapter implements ReactAdapter {
         label: "Delete",
         iconSrc: DeleteIcon,
         onClick: () => {
-          this.container.showOkCancelModalDialog(
+          useDialog
-            "Confirm delete",
+            .getState()
-            `Are you sure you want to delete "${item.name}"`,
+            .showOkCancelModalDialog(
-            "Delete",
+              "Confirm delete",
-            () => this.container.deleteNotebookFile(item).then(() => this.triggerRender()),
+              `Are you sure you want to delete "${item.name}"`,
-            "Cancel",
+              "Delete",
-            undefined
+              () => this.container.deleteNotebookFile(item).then(() => this.triggerRender()),
-          );
+              "Cancel",
+              undefined
+            );
         },
       },
       {
@@ -777,14 +780,16 @@ export class ResourceTreeAdapter implements ReactAdapter {
         label: "Delete",
         iconSrc: DeleteIcon,
         onClick: () => {
-          this.container.showOkCancelModalDialog(
+          useDialog
-            "Confirm delete",
+            .getState()
-            `Are you sure you want to delete "${item.name}?"`,
+            .showOkCancelModalDialog(
-            "Delete",
+              "Confirm delete",
-            () => this.container.deleteNotebookFile(item).then(() => this.triggerRender()),
+              `Are you sure you want to delete "${item.name}?"`,
-            "Cancel",
+              "Delete",
-            undefined
+              () => this.container.deleteNotebookFile(item).then(() => this.triggerRender()),
-          );
+              "Cancel",
+              undefined
+            );
         },
       },
       {

src/Explorer/Tree/StoredProcedure.ts

@@ -8,6 +8,7 @@ import { useTabs } from "../../hooks/useTabs";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
+import { useDialog } from "../Controls/Dialog";
 import Explorer from "../Explorer";
 import { getErrorMessage } from "../Tables/Utilities";
 import { NewStoredProcedureTab } from "../Tabs/StoredProcedureTab/StoredProcedureTab";
@@ -138,16 +139,21 @@ export default class StoredProcedure {
     }
   };
   public delete() {
-    if (!window.confirm("Are you sure you want to delete the stored procedure?")) {
+    useDialog.getState().showOkCancelModalDialog(
-      return;
+      "Confirm delete",
-    }
+      "Are you sure you want to delete the stored procedure?",
-
+      "Delete",
-    deleteStoredProcedure(this.collection.databaseId, this.collection.id(), this.id()).then(
       () => {
-        useTabs.getState().closeTabsByComparator((tab: TabsBase) => tab.node && tab.node.rid === this.rid);
+        deleteStoredProcedure(this.collection.databaseId, this.collection.id(), this.id()).then(
-        this.collection.children.remove(this);
+          () => {
+            useTabs.getState().closeTabsByComparator((tab: TabsBase) => tab.node && tab.node.rid === this.rid);
+            this.collection.children.remove(this);
+          },
+          (reason) => {}
+        );
       },
-      (reason) => {}
+      "Cancel",
+      undefined
     );
   }
 

src/Explorer/Tree/Trigger.ts

@@ -6,6 +6,7 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import { useTabs } from "../../hooks/useTabs";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { useDialog } from "../Controls/Dialog";
 import Explorer from "../Explorer";
 import TriggerTab from "../Tabs/TriggerTab";
 import { useSelectedNode } from "../useSelectedNode";
@@ -99,16 +100,21 @@ export default class Trigger {
   };
 
   public delete() {
-    if (!window.confirm("Are you sure you want to delete the trigger?")) {
+    useDialog.getState().showOkCancelModalDialog(
-      return;
+      "Confirm delete",
-    }
+      "Are you sure you want to delete the trigger?",
-
+      "Delete",
-    deleteTrigger(this.collection.databaseId, this.collection.id(), this.id()).then(
       () => {
-        useTabs.getState().closeTabsByComparator((tab) => tab.node && tab.node.rid === this.rid);
+        deleteTrigger(this.collection.databaseId, this.collection.id(), this.id()).then(
-        this.collection.children.remove(this);
+          () => {
+            useTabs.getState().closeTabsByComparator((tab) => tab.node && tab.node.rid === this.rid);
+            this.collection.children.remove(this);
+          },
+          (reason) => {}
+        );
       },
-      (reason) => {}
+      "Cancel",
+      undefined
     );
   }
 }

src/Explorer/Tree/UserDefinedFunction.ts

@@ -6,6 +6,7 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import { useTabs } from "../../hooks/useTabs";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { useDialog } from "../Controls/Dialog";
 import Explorer from "../Explorer";
 import UserDefinedFunctionTab from "../Tabs/UserDefinedFunctionTab";
 import { useSelectedNode } from "../useSelectedNode";
@@ -95,18 +96,23 @@ export default class UserDefinedFunction {
   }
 
   public delete() {
-    if (!window.confirm("Are you sure you want to delete the user defined function?")) {
+    useDialog.getState().showOkCancelModalDialog(
-      return;
+      "Confirm delete",
-    }
+      "Are you sure you want to delete the user defined function?",
-
+      "Delete",
-    deleteUserDefinedFunction(this.collection.databaseId, this.collection.id(), this.id()).then(
       () => {
-        useTabs.getState().closeTabsByComparator((tab) => tab.node && tab.node.rid === this.rid);
+        deleteUserDefinedFunction(this.collection.databaseId, this.collection.id(), this.id()).then(
-        this.collection.children.remove(this);
+          () => {
+            useTabs.getState().closeTabsByComparator((tab) => tab.node && tab.node.rid === this.rid);
+            this.collection.children.remove(this);
+          },
+          () => {
+            /**/
+          }
+        );
       },
-      () => {
+      "Cancel",
-        /**/
+      undefined
-      }
     );
   }
 }

src/Juno/JunoClient.test.ts

@@ -364,7 +364,6 @@ describe("Gallery", () => {
     const name = "name";
     const description = "description";
     const tags = ["tag"];
-    const author = "author";
     const thumbnailUrl = "thumbnailUrl";
     const content = `{ "key": "value" }`;
     const addLinkToNotebookViewer = true;
@@ -373,7 +372,7 @@ describe("Gallery", () => {
       json: () => undefined as any,
     });
 
-    const response = await junoClient.publishNotebook(name, description, tags, author, thumbnailUrl, content);
+    const response = await junoClient.publishNotebook(name, description, tags, thumbnailUrl, content);
 
     const authorizationHeader = getAuthorizationHeader();
     expect(response.status).toBe(HttpStatusCodes.OK);
@@ -391,7 +390,6 @@ describe("Gallery", () => {
           name,
           description,
           tags,
-          author,
           thumbnailUrl,
           content: JSON.parse(content),
           addLinkToNotebookViewer,

src/Juno/JunoClient.ts

@@ -61,7 +61,6 @@ export interface IPublishNotebookRequest {
   name: string;
   description: string;
   tags: string[];
-  author: string;
   thumbnailUrl: string;
   content: any;
   addLinkToNotebookViewer: boolean;
@@ -359,7 +358,6 @@ export class JunoClient {
     name: string,
     description: string,
     tags: string[],
-    author: string,
     thumbnailUrl: string,
     content: string
   ): Promise<IJunoResponse<IGalleryItem>> {
@@ -370,7 +368,6 @@ export class JunoClient {
         name,
         description,
         tags,
-        author,
         thumbnailUrl,
         content: JSON.parse(content),
         addLinkToNotebookViewer: true,

src/Platform/Hosted/extractFeatures.ts

@@ -10,12 +10,13 @@ export type Features = {
   readonly enableSchema: boolean;
   autoscaleDefault: boolean;
   partitionKeyDefault: boolean;
+  partitionKeyDefault2: boolean;
   readonly enableSDKoperations: boolean;
   readonly enableSpark: boolean;
   readonly enableTtl: boolean;
   readonly executeSproc: boolean;
   readonly enableAadDataPlane: boolean;
-  readonly enableKOResourceTree: boolean;
+  readonly enableKoResourceTree: boolean;
   readonly hostedDataExplorer: boolean;
   readonly junoEndpoint?: string;
   readonly livyEndpoint?: string;
@@ -27,6 +28,7 @@ export type Features = {
   readonly pr?: string;
   readonly showMinRUSurvey: boolean;
   readonly ttl90Days: boolean;
+  readonly notebooksTemporarilyDown: boolean;
 };
 
 export function extractFeatures(given = new URLSearchParams(window.location.search)): Features {
@@ -57,7 +59,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     enableSDKoperations: "true" === get("enablesdkoperations"),
     enableSpark: "true" === get("enablespark"),
     enableTtl: "true" === get("enablettl"),
-    enableKOResourceTree: "true" === get("enablekoresourcetree"),
+    enableKoResourceTree: "true" === get("enablekoresourcetree"),
     executeSproc: "true" === get("dataexplorerexecutesproc"),
     hostedDataExplorer: "true" === get("hosteddataexplorerenabled"),
     junoEndpoint: get("junoendpoint"),
@@ -72,5 +74,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     ttl90Days: "true" === get("ttl90days"),
     autoscaleDefault: "true" === get("autoscaledefault"),
     partitionKeyDefault: "true" === get("partitionkeytest"),
+    partitionKeyDefault2: "true" === get("pkpartitionkeytest"),
+    notebooksTemporarilyDown: "true" === get("notebookstemporarilydown", "true"),
   };
 }

src/Utils/GalleryUtils.test.ts

@@ -1,8 +1,9 @@
-import * as GalleryUtils from "./GalleryUtils";
-import { JunoClient, IGalleryItem } from "../Juno/JunoClient";
 import { HttpStatusCodes } from "../Common/Constants";
+import { useDialog } from "../Explorer/Controls/Dialog";
 import { GalleryTab, SortBy } from "../Explorer/Controls/NotebookGallery/GalleryViewerComponent";
 import Explorer from "../Explorer/Explorer";
+import { IGalleryItem, JunoClient } from "../Juno/JunoClient";
+import * as GalleryUtils from "./GalleryUtils";
 
 const galleryItem: IGalleryItem = {
   id: "id",
@@ -29,11 +30,11 @@ describe("GalleryUtils", () => {
 
   it("downloadItem shows dialog in data explorer", () => {
     const container = {} as Explorer;
-    container.showOkCancelModalDialog = jest.fn().mockImplementation();
-
     GalleryUtils.downloadItem(container, undefined, galleryItem, undefined);
 
-    expect(container.showOkCancelModalDialog).toBeCalled();
+    expect(useDialog.getState().visible).toBe(true);
+    expect(useDialog.getState().dialogProps).toBeDefined();
+    expect(useDialog.getState().dialogProps.title).toBe("Download to My Notebooks");
   });
 
   it("favoriteItem favorites item", async () => {
@@ -66,11 +67,11 @@ describe("GalleryUtils", () => {
 
   it("deleteItem shows dialog in data explorer", () => {
     const container = {} as Explorer;
-    container.showOkCancelModalDialog = jest.fn().mockImplementation();
-
     GalleryUtils.deleteItem(container, undefined, galleryItem, undefined);
 
-    expect(container.showOkCancelModalDialog).toBeCalled();
+    expect(useDialog.getState().visible).toBe(true);
+    expect(useDialog.getState().dialogProps).toBeDefined();
+    expect(useDialog.getState().dialogProps.title).toBe("Remove published notebook");
   });
 
   it("getGalleryViewerProps gets gallery viewer props correctly", () => {

src/Utils/GalleryUtils.ts

@@ -3,7 +3,7 @@ import { Notebook } from "@nteract/commutable";
 import { NotebookV4 } from "@nteract/commutable/lib/v4";
 import { HttpStatusCodes } from "../Common/Constants";
 import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHandlingUtils";
-import { TextFieldProps } from "../Explorer/Controls/Dialog";
+import { TextFieldProps, useDialog } from "../Explorer/Controls/Dialog";
 import {
   GalleryTab,
   GalleryViewerComponent,
@@ -222,7 +222,7 @@ export function downloadItem(
   });
 
   const name = data.name;
-  container.showOkCancelModalDialog(
+  useDialog.getState().showOkCancelModalDialog(
     "Download to My Notebooks",
     `Download ${name} from gallery as a copy to your notebooks to run and/or edit the notebook.`,
     "Download",
@@ -243,6 +243,11 @@ export function downloadItem(
         const notebook = JSON.parse(response.data) as Notebook;
         removeNotebookViewerLink(notebook, data.newCellId);
 
+        if (!data.isSample) {
+          const metadata = notebook.metadata as { [name: string]: unknown };
+          metadata.untrusted = true;
+        }
+
         await container.importAndOpenContent(data.name, JSON.stringify(notebook));
         logConsoleInfo(`Successfully downloaded ${name} to My Notebooks`);
 
@@ -388,7 +393,7 @@ export function deleteItem(
   if (container) {
     trace(Action.NotebooksGalleryClickDelete, ActionModifiers.Mark, { notebookId: data.id });
 
-    container.showOkCancelModalDialog(
+    useDialog.getState().showOkCancelModalDialog(
       "Remove published notebook",
       `Would you like to remove ${data.name} from the gallery?`,
       "Remove",

src/Utils/arm/generatedClients/cosmos/databaseAccounts.ts

@@ -29,7 +29,13 @@ export async function update(
   body: Types.DatabaseAccountUpdateParameters
 ): Promise<Types.DatabaseAccountGetResults> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}`;
-  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "PATCH", apiVersion, body });
+  return armRequest({
+    host: configContext.ARM_ENDPOINT,
+    path,
+    method: "PATCH",
+    apiVersion,
+    body,
+  });
 }
 
 /* Creates or updates an Azure Cosmos DB database account. The "Update" method is preferred when performing updates on an account. */

src/Utils/arm/request.ts

@@ -6,6 +6,7 @@ Instead, generate ARM clients that consume this function with stricter typing.
 */
 
 import promiseRetry, { AbortError } from "p-retry";
+import { HttpHeaders } from "../../Common/Constants";
 import { configContext } from "../../ConfigContext";
 import { userContext } from "../../UserContext";
 
@@ -45,6 +46,7 @@ interface Options {
   method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "HEAD";
   body?: unknown;
   queryParams?: ARMQueryParams;
+  contentType?: string;
 }
 
 export async function armRequestWithoutPolling<T>({
@@ -54,6 +56,7 @@ export async function armRequestWithoutPolling<T>({
   method,
   body: requestBody,
   queryParams,
+  contentType,
 }: Options): Promise<{ result: T; operationStatusUrl: string }> {
   const url = new URL(path, host);
   url.searchParams.append("api-version", configContext.armAPIVersion || apiVersion);
@@ -70,6 +73,7 @@ export async function armRequestWithoutPolling<T>({
     method,
     headers: {
       Authorization: userContext.authorizationToken,
+      [HttpHeaders.contentType]: contentType || "application/json",
     },
     body: requestBody ? JSON.stringify(requestBody) : undefined,
   });
@@ -104,6 +108,7 @@ export async function armRequest<T>({
   method,
   body: requestBody,
   queryParams,
+  contentType,
 }: Options): Promise<T> {
   const armRequestResult = await armRequestWithoutPolling<T>({
     host,
@@ -112,6 +117,7 @@ export async function armRequest<T>({
     method,
     body: requestBody,
     queryParams,
+    contentType,
   });
   const operationStatusUrl = armRequestResult.operationStatusUrl;
   if (operationStatusUrl) {

src/hooks/useKnockoutExplorer.ts

@@ -331,6 +331,12 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
     if (inputs.flights.indexOf(Flights.PartitionKeyTest) !== -1) {
       userContext.features.partitionKeyDefault = true;
     }
+    if (inputs.flights.indexOf(Flights.PartitionKeyTest) !== -1) {
+      userContext.features.partitionKeyDefault = true;
+    }
+    if (inputs.flights.indexOf(Flights.PKPartitionKeyTest) !== -1) {
+      userContext.features.partitionKeyDefault2 = true;
+    }
   }
 }
 

test/mongo/container.spec.ts

@@ -16,7 +16,7 @@ test("Mongo CRUD", async () => {
   await explorer.click('[data-test="New Collection"]');
   await explorer.fill('[aria-label="New database id"]', databaseId);
   await explorer.fill('[aria-label="Collection id"]', containerId);
-  await explorer.fill('[aria-label="Shard key"]', "/pk");
+  await explorer.fill('[aria-label="Shard key"]', "pk");
   await explorer.click("#sidePanelOkButton");
   await explorer.click(`.nodeItem >> text=${databaseId}`);
   await explorer.click(`.nodeItem >> text=${containerId}`);

tsconfig.strict.json

@@ -8,6 +8,7 @@
     "noUnusedParameters": true
   },
   "files": [
+    "./src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts",
     "./src/AuthType.ts",
     "./src/Bindings/ReactBindingHandler.ts",
     "./src/Common/ArrayHashMap.ts",
@@ -37,7 +38,6 @@
     "./src/Contracts/SelfServeContracts.ts",
     "./src/Contracts/SubscriptionType.ts",
     "./src/Contracts/Versions.ts",
-    "./src/Explorer/Controls/Dialog.tsx",
     "./src/Explorer/Controls/GitHub/GitHubStyleConstants.ts",
     "./src/Explorer/Controls/SmartUi/InputUtils.ts",
     "./src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.test.ts",
@@ -166,4 +166,4 @@
     "src/Terminal/**/*",
     "src/Utils/arm/**/*"
   ]
-}
+}

webpack.config.js

@@ -9,12 +9,13 @@ const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").def
 const { EnvironmentPlugin } = require("webpack");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
-const CleanWebpackPlugin = require("clean-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
 const CreateFileWebpack = require("create-file-webpack");
 const childProcess = require("child_process");
 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 const TerserPlugin = require("terser-webpack-plugin");
+const webpack = require("webpack");
 const isCI = require("is-ci");
 
 const gitSha = childProcess.execSync("git rev-parse HEAD").toString("utf8");
@@ -109,7 +110,11 @@ module.exports = function (_env = {}, argv = {}) {
   }
 
   const plugins = [
-    new CleanWebpackPlugin(["dist"]),
+    new CleanWebpackPlugin(),
+    new webpack.ProvidePlugin({
+      process: "process/browser",
+      Buffer: ["buffer", "Buffer"],
+    }),
     new CreateFileWebpack({
       path: "./dist",
       fileName: "version.txt",
@@ -210,23 +215,26 @@ module.exports = function (_env = {}, argv = {}) {
       selfServe: "./src/SelfServe/SelfServe.tsx",
       connectToGitHub: "./src/GitHub/GitHubConnector.ts",
     },
-    node: {
-      util: true,
-      tls: "empty",
-      net: "empty",
-      fs: "empty",
-    },
     output: {
       chunkFilename: "[name].[chunkhash:6].js",
       filename: "[name].[chunkhash:6].js",
       path: path.resolve(__dirname, "dist"),
+      publicPath: "",
     },
-    devtool: mode === "development" ? "cheap-eval-source-map" : "source-map",
+    devtool: mode === "development" ? "eval-source-map" : "source-map",
     plugins,
     module: {
       rules,
     },
     resolve: {
+      alias: {
+        process: "process/browser",
+      },
+
+      fallback: {
+        crypto: false,
+        fs: false,
+      },
       extensions: [".tsx", ".ts", ".js"],
     },
     optimization: {
@@ -244,7 +252,7 @@ module.exports = function (_env = {}, argv = {}) {
         }),
       ],
     },
-    watch: isCI || mode === "production" ? false : true,
+    watch: false,
     // Hack since it is hard to disable watch entirely with webpack dev server https://github.com/webpack/webpack-dev-server/issues/1251#issuecomment-654240734
     watchOptions: isCI ? { poll: 24 * 60 * 60 * 1000 } : {},
     devServer: {