merge master

.eslintignore

@@ -21,8 +21,16 @@ 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
@@ -36,10 +44,29 @@ 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
@@ -137,10 +164,18 @@ src/Terminal/NotebookAppContracts.d.ts
 src/applyExplorerBindings.ts
 src/global.d.ts
 src/setupTests.ts
+src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
+src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx
+src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
+src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
 src/Explorer/Controls/TreeComponent/TreeComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx
 src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx
+src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx
+src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
+src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.test.tsx
+src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.tsx
 src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

.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 // TEMP disabled since notebooks service is off
+          - ./test/notebooks/upload.spec.ts
           - ./test/sql/resourceToken.spec.ts
           - ./test/tables/container.spec.ts
     steps:

less/Common/Constants.less

@@ -9,7 +9,6 @@
 
 @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/resourceTree.less

@@ -19,10 +19,6 @@
   .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": "3.0.0",
+    "clean-webpack-plugin": "0.1.19",
     "clipboard-copy": "4.0.1",
-    "copy-webpack-plugin": "9.0.1",
+    "copy-webpack-plugin": "6.0.2",
     "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.14.0",
+    "react": "16.13.1",
     "react-animate-height": "2.0.8",
-    "react-dnd": "14.0.2",
+    "react-dnd": "9.4.0",
-    "react-dnd-html5-backend": "14.0.0",
+    "react-dnd-html5-backend": "9.4.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": "5.1.4",
+    "terser-webpack-plugin": "3.1.0",
     "underscore": "1.9.1",
     "utility-types": "3.10.0",
     "zustand": "3.5.0"
@@ -132,7 +132,6 @@
     "@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",
@@ -154,45 +153,44 @@
     "html-inline-css-webpack-plugin": "1.11.0",
     "html-loader": "0.5.5",
     "html-loader-jest": "0.2.1",
-    "html-webpack-plugin": "5.3.2",
+    "html-webpack-plugin": "4.5.2",
-    "jest": "26.6.3",
+    "jest": "25.5.4",
-    "jest-canvas-mock": "2.3.1",
+    "jest-canvas-mock": "2.1.0",
     "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": "2.1.0",
+    "mini-css-extract-plugin": "0.4.3",
     "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": "9.2.4",
+    "ts-loader": "6.2.2",
     "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": "5.47.0",
+    "webpack": "4.46.0",
-    "webpack-bundle-analyzer": "4.4.2",
+    "webpack-bundle-analyzer": "3.6.1",
-    "webpack-cli": "4.7.2",
+    "webpack-cli": "3.3.10",
-    "webpack-dev-server": "3.11.2"
+    "webpack-dev-server": "3.11.0"
   },
   "scripts": {
-    "start": "webpack serve --mode development",
+    "start": "node --max-old-space-size=10196 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
     "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": "webpack  --mode production",
+    "pack:prod": "node --max_old_space_size=10196 ./node_modules/webpack/bin/webpack.js  --mode production",
-    "pack:fast": "webpack  --mode development --progress",
+    "pack:fast": "node --max_old_space_size=10196 ./node_modules/webpack/bin/webpack.js  --mode development --progress",
     "copyToConsumers": "node copyToConsumers",
     "test": "rimraf coverage && jest",
     "test:e2e": "jest -c ./jest.config.playwright.js --detectOpenHandles",

src/Common/Constants.ts

@@ -95,8 +95,6 @@ export class Flights {
   public static readonly MongoIndexing = "mongoindexing";
   public static readonly AutoscaleTest = "autoscaletest";
   public static readonly PartitionKeyTest = "partitionkeytest";
-  public static readonly PKPartitionKeyTest = "pkpartitionkeytest";
-  public static readonly Phoenix = "phoenix";
 }
 
 export class AfecFeatures {
@@ -338,13 +336,6 @@ export enum ConflictOperationType {
   Delete = "delete",
 }
 
-export enum ConnectionStatusType {
-  Connecting = "Connecting",
-  Allocating = "Allocating",
-  Connected = "Connected",
-  Failed = "Connection Failed",
-}
-
 export const EmulatorMasterKey =
   //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
   "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
@@ -358,11 +349,6 @@ 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/Contracts/DataModels.ts

@@ -1,5 +1,3 @@
-import { ConnectionStatusType } from "../Common/Constants";
-
 export interface DatabaseAccount {
   id: string;
   name: string;
@@ -498,8 +496,3 @@ export interface MemoryUsageInfo {
   freeKB: number;
   totalKB: number;
 }
-
-export interface ContainerConnectionInfo {
-  status: ConnectionStatusType;
-  //need to add ram and rom info
-}

src/Controls/Heatmap/Heatmap.test.ts

@@ -22,8 +22,8 @@ describe("The Heatmap Control", () => {
   };
 
   let heatmap: Heatmap;
-  const theme: PortalTheme = 1;
+  let theme: PortalTheme = 1;
-  const divElement = `<div id="${Heatmap.elementId}"></div>`;
+  const divElement: string = `<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", () => {
-    const data = {
+    let data = {
       data: {
         signature: "pcIframe",
         data: {
@@ -111,7 +111,7 @@ describe("iframe rendering when there is no data", () => {
       },
     };
 
-    const divElement = `<div id="${Heatmap.elementId}"></div>`;
+    const divElement: string = `<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", () => {
-    const data = {
+    let data = {
       data: {
         signature: "pcIframe",
         data: {
@@ -131,7 +131,7 @@ describe("iframe rendering when there is no data", () => {
       },
     };
 
-    const divElement = `<div id="${Heatmap.elementId}"></div>`;
+    const divElement: string = `<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 = "#838383"): FontSettings {
+  private _getFontStyles(size: number = StyleConstants.MediumFontSize, color: string = "#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]);
-      const dataPoints: number[] = [];
+      let dataPoints: number[] = [];
       for (let a = 0; a < output.xAxisPoints.length; a++) {
-        const row: PartitionTimeStampToData = data[rows[i]];
+        let 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()
     );
-    const plotDiv: any = document.getElementById(Heatmap.elementId);
+    let 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;
         }
       }
-      const output = [];
+      let output = [];
       for (let i = 0; i < this._chartData.dataPoints.length; i++) {
         output.push(this._chartData.dataPoints[i][xAxisIndex]);
       }

src/Explorer/ContextMenuButtonFactory.tsx

@@ -83,7 +83,6 @@ 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,75 +23,13 @@ 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, get) => ({
+export const useDialog: UseStore<DialogState> = create((set) => ({
   visible: false,
   openDialog: (props: DialogProps) => set(() => ({ visible: true, dialogProps: props })),
   closeDialog: () =>
-    set(
+    set((state) => ({ visible: false, openDialog: state.openDialog, closeDialog: state.closeDialog }), true),
-      (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 {
@@ -181,7 +119,8 @@ export const Dialog: FC = () => {
           text: secondaryButtonText,
           onClick: onSecondaryButtonClick,
         }
-      : undefined;
+      : {};
+
   return visible ? (
     <FluentDialog {...dialogProps}>
       {choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}

src/Explorer/Controls/InputTypeahead/InputTypeahead.less

@@ -5,9 +5,6 @@
     display: inline-block;
     width: 100%;
 
-    .input-type-head-text-field {
-        width: 100%;
-    }
     textarea {
         width: 100%;
         line-height: 1;
@@ -24,11 +21,4 @@
         }
     }
 }
-.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,13 +6,14 @@
  *   typeaheadOverrideOptions: { dynamic:false }
  *
  */
-import { getTheme, IconButton, IIconProps, List, Stack, TextField } from "@fluentui/react";
+import "jquery-typeahead";
 import * as React from "react";
+import { KeyCodes } from "../../../Common/Constants";
 import "./InputTypeahead.less";
 
 export interface Item {
   caption: string;
-  value: string;
+  value: any;
 }
 
 /**
@@ -50,7 +51,7 @@ export interface InputTypeaheadComponentProps {
    * Override default jquery-typeahead options
    * WARNING: do not override input, source or callback to avoid breaking the components behavior.
    */
-  typeaheadOverrideOptions?: { dynamic: boolean };
+  typeaheadOverrideOptions?: any;
 
   /**
    * This function gets called when pressing ENTER on the input box
@@ -74,126 +75,170 @@ export interface InputTypeaheadComponentProps {
   useTextarea?: boolean;
 }
 
-interface InputTypeaheadComponentState {
+interface OnClickItem {
-  isSuggestionVisible: boolean;
+  matchedKey: string;
-  selectedChoice: Item;
+  value: any;
-  filteredChoices: Item[];
+  caption: string;
+  group: string;
 }
 
+interface Cache {
+  inputValue: string;
+  selection: Item;
+}
+
+interface InputTypeaheadComponentState {}
+
 export class InputTypeaheadComponent extends React.Component<
   InputTypeaheadComponentProps,
   InputTypeaheadComponentState
 > {
-  constructor(props: InputTypeaheadComponentProps) {
+  private inputElt: HTMLElement;
+  private containerElt: HTMLElement;
+
+  private cache: Cache;
+  private inputValue: string;
+  private selection: Item;
+
+  public constructor(props: InputTypeaheadComponentProps) {
     super(props);
-    this.state = {
+    this.cache = {
-      isSuggestionVisible: false,
+      inputValue: null,
-      filteredChoices: [],
+      selection: null,
-      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 (
-      <div className="input-typeahead-chocies-container" onClick={() => this.onChoiceClick(item)}>
+      <span className="input-typeahead-container">
-        <p className="choice-caption">{item.caption}</p>
+        <div
-        <span>{item.value}</span>
+          className="input-typehead"
+          onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onKeyDown(event)}
+        >
+          <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 onChoiceClick = (item: Item): void => {
-    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 => {
+  private onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
-    if (event.key === "Enter") {
+    if (event.keyCode === KeyCodes.Enter) {
       if (this.props.submitFct) {
         event.preventDefault();
         event.stopPropagation();
-        this.props.submitFct(this.props.defaultValue, this.state.selectedChoice);
+        this.props.submitFct(this.cache.inputValue, this.cache.selection);
-        this.setState({ isSuggestionVisible: false });
+        $(this.containerElt).children(".typeahead__result").hide();
+      }
     }
   }
-  };
 
-  private filterChoiceByValue = (choices: Item[], searchKeyword: string): Item[] => {
+  /**
-    return choices.filter((choice) =>
+   * Must execute once ko is rendered, so that it can find the input element by id
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+   */
-      // @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,
-  public render(): JSX.Element {
+      order: "asc",
-    const { defaultValue, useTextarea, placeholder, onNewValue } = this.props;
+      minLength: 0,
-    const { isSuggestionVisible, selectedChoice, filteredChoices } = this.state;
+      searchOnFocus: true,
-    const theme = getTheme();
+      source: {
-
+        display: "caption",
-    const iconButtonStyles = {
+        data: () => {
-      root: {
+          return props.choices;
-        color: theme.palette.neutralPrimary,
-        marginLeft: "10px !important",
-        marginTop: "0px",
-        marginRight: "2px",
-        width: "42px",
         },
-      rootHovered: {
-        color: theme.palette.neutralDark,
       },
-    };
+      callback: {
-    const cancelIcon: IIconProps = { iconName: "cancel" };
+        onClick: (node: any, a: any, item: OnClickItem, event: any) => {
-    const searchIcon: IIconProps = { iconName: "Search" };
+          cache.selection = item;
 
-    return (
+          if (props.onSelected) {
-      <div className="input-typeahead-container">
+            props.onSelected(item);
-        <Stack horizontal>
+          }
-          <TextField
+        },
-            multiline={useTextarea}
+        onResult(node: any, query: any, result: any, resultCount: any, resultCountPerGroup: any) {
-            rows={1}
+          cache.inputValue = query;
-            defaultValue={defaultValue}
+          if (props.onNewValue) {
-            ariaLabel="Input query"
+            props.onNewValue(query);
-            placeholder={placeholder}
+          }
-            className="input-type-head-text-field"
+        },
-            value={defaultValue}
+      },
-            onKeyDown={this.onSubmit}
+      template: (query: string, item: any) => {
-            onFocus={() => this.setState({ isSuggestionVisible: true })}
+        // Don't display id if caption *IS* the id
-            onChange={(_event, newValue?: string) => this.handleChange(newValue)}
+        return item.caption === item.value
-          />
+          ? "<span>{{caption}}</span>"
-          {this.props.showCancelButton && (
+          : "<span><div>{{caption}}</div><div><small>{{value}}</small></div></span>";
-            <IconButton
+      },
-              styles={iconButtonStyles}
+      dynamic: true,
-              iconProps={cancelIcon}
+    };
-              ariaLabel="cancel Button"
+
-              onClick={() => onNewValue("")}
+    // Override options
-            />
+    if (props.typeaheadOverrideOptions) {
-          )}
+      for (const p in props.typeaheadOverrideOptions) {
-          {this.props.showSearchButton && (
+        options[p] = props.typeaheadOverrideOptions[p];
-            <IconButton
+      }
-              styles={iconButtonStyles}
+    }
-              iconProps={searchIcon}
+
-              ariaLabel="Search Button"
+    if (props.hasOwnProperty("showCancelButton")) {
-              onClick={() => this.props.submitFct(defaultValue, selectedChoice)}
+      options.cancelButton = props.showCancelButton;
-            />
+    }
-          )}
+
-        </Stack>
+    $(this.inputElt).typeahead(options);
-        {filteredChoices.length && isSuggestionVisible ? (
-          <List items={filteredChoices} onRenderCell={this.onRenderCell} />
-        ) : undefined}
-      </div>
-    );
   }
 }

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

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

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -264,6 +264,6 @@ export class NotebookViewerComponent
   };
 
   private reportAbuse = (): void => {
-    GalleryUtils.reportAbuse(this.props.junoClient, this.state.galleryItem, this, () => ({}));
+    GalleryUtils.reportAbuse(this.props.junoClient, this.state.galleryItem, this, () => {});
   };
 }

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -29,7 +29,6 @@ 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";
 
@@ -223,11 +222,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                   key: "Delete",
                   text: "Delete query",
                   onClick: async () => {
-                    useDialog.getState().showOkCancelModalDialog(
+                    if (window.confirm("Are you sure you want to delete this query?")) {
-                      "Confirm delete",
-                      "Are you sure you want to delete this query?",
-                      "Delete",
-                      async () => {
                       const startKey: number = TelemetryProcessor.traceStart(Action.DeleteSavedQuery, {
                         dataExplorerArea: Constants.Areas.ContextualPane,
                         paneTitle: title,
@@ -255,10 +250,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                         );
                       }
                       await this.fetchSavedQueries(); // get latest state
-                      },
+                    }
-                      "Cancel",
-                      undefined
-                    );
                   },
                 },
               ],

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -34,7 +34,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
-                "phoenixClient": PhoenixClient {},
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -102,7 +101,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
-                "phoenixClient": PhoenixClient {},
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],

src/Explorer/DataSamples/DataSamplesUtil.test.ts

@@ -17,6 +17,7 @@ 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,7 +1,6 @@
 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";
@@ -21,7 +20,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.`;
-      useDialog.getState().showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
+      this.container.showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
       logConsoleError(msg);
       return;
     }
@@ -30,7 +29,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.`;
-    useDialog.getState().showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
+    this.container.showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
     logConsoleInfo(msg);
   }
 

src/Explorer/Explorer.tsx

@@ -1,10 +1,10 @@
+import { IChoiceGroupProps } from "@fluentui/react";
 import * as ko from "knockout";
 import React from "react";
 import _ from "underscore";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
 import * as Constants from "../Common/Constants";
-import { ConnectionStatusType } from "../Common/Constants";
 import { readCollection } from "../Common/dataAccess/readCollection";
 import { readDatabases } from "../Common/dataAccess/readDatabases";
 import { isPublicInternetAccessAllowed } from "../Common/DatabaseAccountUtility";
@@ -17,7 +17,6 @@ import { GitHubOAuthService } from "../GitHub/GitHubOAuthService";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { useTabs } from "../hooks/useTabs";
 import { IGalleryItem } from "../Juno/JunoClient";
-import { PhoenixClient } from "../Phoenix/PhoenixClient";
 import * as ExplorerSettings from "../Shared/ExplorerSettings";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
@@ -36,7 +35,7 @@ import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
 import "./ComponentRegisterer";
-import { DialogProps, useDialog } from "./Controls/Dialog";
+import { DialogProps, TextFieldProps, useDialog } from "./Controls/Dialog";
 import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
 import { useCommandBar } from "./Menus/CommandBar/CommandBarComponentAdapter";
 import * as FileSystemUtil from "./Notebook/FileSystemUtil";
@@ -89,13 +88,12 @@ export default class Explorer {
   };
 
   private static readonly MaxNbDatabasesToAutoExpand = 5;
-  private phoenixClient: PhoenixClient;
+
   constructor() {
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
     this._isInitializingNotebooks = false;
-    this.phoenixClient = new PhoenixClient();
     useNotebook.subscribe(
       () => this.refreshCommandBarButtons(),
       (state) => state.isNotebooksEnabledForAccount
@@ -346,30 +344,7 @@ export default class Explorer {
       return;
     }
     this._isInitializingNotebooks = true;
-    if (userContext.features.phoenix) {
-      const connectionStatus: DataModels.ContainerConnectionInfo = {
-        status: ConnectionStatusType.Allocating,
-      };
-      useNotebook.getState().setConnectionInfo(connectionStatus);
-      const provisionData = {
-        cosmosEndpoint: userContext.databaseAccount.properties.documentEndpoint,
-        resourceId: userContext.databaseAccount.id,
-        dbAccountName: userContext.databaseAccount.name,
-        aadToken: userContext.authorizationToken,
-        resourceGroup: userContext.resourceGroup,
-        subscriptionId: userContext.subscriptionId,
-      };
-      const connectionInfo = await this.phoenixClient.containerConnectionInfo(provisionData);
-      if (connectionInfo.data && connectionInfo.data.notebookServerUrl) {
-        connectionStatus.status = ConnectionStatusType.Connected;
-        useNotebook.getState().setConnectionInfo(connectionStatus);
 
-        useNotebook.getState().setNotebookServerInfo({
-          notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.data.notebookServerUrl,
-          authToken: userContext.features.notebookServerToken || connectionInfo.data.notebookAuthToken,
-        });
-      }
-    } else {
     await this.ensureNotebookWorkspaceRunning();
     const connectionInfo = await listConnectionInfo(
       userContext.subscriptionId,
@@ -382,7 +357,6 @@ export default class Explorer {
       notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.notebookServerEndpoint,
       authToken: userContext.features.notebookServerToken || connectionInfo.authToken,
     });
-    }
 
     useNotebook.getState().initializeNotebooksTree(this.notebookManager);
 
@@ -391,7 +365,7 @@ export default class Explorer {
     this._isInitializingNotebooks = false;
   }
 
-  public resetNotebookWorkspace(): void {
+  public resetNotebookWorkspace() {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookClient) {
       handleError(
         "Attempt to reset notebook workspace, but notebook is not enabled",
@@ -416,6 +390,7 @@ export default class Explorer {
     if (!databaseAccount) {
       return false;
     }
+
     try {
       const { value: workspaces } = await listByDatabaseAccount(
         userContext.subscriptionId,
@@ -563,22 +538,17 @@ export default class Explorer {
     }
   }
 
-  public uploadFile(
+  public uploadFile(name: string, content: string, parent: NotebookContentItem): Promise<NotebookContentItem> {
-    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, isGithubTree);
+    const promise = this.notebookManager?.notebookContentClient.uploadFileAsync(name, content, parent);
     promise
       .then(() => this.resourceTree.triggerRender())
-      .catch((reason) => useDialog.getState().showOkModalDialog("Unable to upload file", getErrorMessage(reason)));
+      .catch((reason) => this.showOkModalDialog("Unable to upload file", reason));
     return promise;
   }
 
@@ -644,6 +614,51 @@ 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.
@@ -703,7 +718,7 @@ export default class Explorer {
     return true;
   }
 
-  public renameNotebook(notebookFile: NotebookContentItem, isGithubTree?: boolean): void {
+  public renameNotebook(notebookFile: NotebookContentItem): void {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to rename notebook, but notebook is not enabled";
       handleError(error, "Explorer/renameNotebook");
@@ -717,9 +732,7 @@ export default class Explorer {
         return tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), notebookFile.path);
       });
     if (openedNotebookTabs.length > 0) {
-      useDialog
+      this.showOkModalDialog("Unable to rename file", "This file is being edited. Please close the tab and try again.");
-        .getState()
-        .showOkModalDialog("Unable to rename file", "This file is being edited. Please close the tab and try again.");
     } else {
       useSidePanel.getState().openSidePanel(
         "Rename Notebook",
@@ -736,7 +749,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, isGithubTree)
+            this.notebookManager?.notebookContentClient.renameNotebook(notebookFile, input)
           }
           notebookFile={notebookFile}
         />
@@ -744,7 +757,7 @@ export default class Explorer {
     }
   }
 
-  public onCreateDirectory(parent: NotebookContentItem, isGithubTree?: boolean): void {
+  public onCreateDirectory(parent: NotebookContentItem): void {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to create notebook directory, but notebook is not enabled";
       handleError(error, "Explorer/onCreateDirectory");
@@ -766,7 +779,7 @@ export default class Explorer {
         submitButtonLabel="Create"
         defaultInput=""
         onSubmit={(notebookFile: NotebookContentItem, input: string): Promise<NotebookContentItem> =>
-          this.notebookManager?.notebookContentClient.createDirectory(notebookFile, input, isGithubTree)
+          this.notebookManager?.notebookContentClient.createDirectory(notebookFile, input)
         }
         notebookFile={parent}
       />
@@ -835,7 +848,7 @@ export default class Explorer {
     }
   };
 
-  public deleteNotebookFile(item: NotebookContentItem, isGithubTree?: boolean): Promise<void> {
+  public deleteNotebookFile(item: NotebookContentItem): 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");
@@ -849,9 +862,7 @@ export default class Explorer {
         return tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), item.path);
       });
     if (openedNotebookTabs.length > 0) {
-      useDialog
+      this.showOkModalDialog("Unable to delete file", "This file is being edited. Please close the tab and try again.");
-        .getState()
-        .showOkModalDialog("Unable to delete file", "This file is being edited. Please close the tab and try again.");
       return Promise.reject();
     }
 
@@ -868,7 +879,7 @@ export default class Explorer {
       return Promise.reject();
     }
 
-    return this.notebookManager?.notebookContentClient.deleteContentItem(item, isGithubTree).then(
+    return this.notebookManager?.notebookContentClient.deleteContentItem(item).then(
       () => logConsoleInfo(`Successfully deleted: ${item.path}`),
       (reason) => logConsoleError(`Failed to delete "${item.path}": ${JSON.stringify(reason)}`)
     );
@@ -877,7 +888,7 @@ export default class Explorer {
   /**
    * This creates a new notebook file, then opens the notebook
    */
-  public onNewNotebookClicked(parent?: NotebookContentItem, isGithubTree?: boolean): void {
+  public onNewNotebookClicked(parent?: NotebookContentItem): void {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to create new notebook, but notebook is not enabled";
       handleError(error, "Explorer/onNewNotebookClicked");
@@ -892,7 +903,7 @@ export default class Explorer {
     });
 
     this.notebookManager?.notebookContentClient
-      .createNewNotebookFile(parent, isGithubTree)
+      .createNewNotebookFile(parent)
       .then((newFile: NotebookContentItem) => {
         logConsoleInfo(`Successfully created: ${newFile.name}`);
         TelemetryProcessor.traceSuccess(
@@ -932,7 +943,7 @@ export default class Explorer {
     await this.notebookManager?.notebookContentClient.updateItemChildrenInPlace(item);
   }
 
-  public openNotebookTerminal(kind: ViewModels.TerminalKind): void {
+  public openNotebookTerminal(kind: ViewModels.TerminalKind) {
     let title: string;
 
     switch (kind) {
@@ -1052,10 +1063,7 @@ export default class Explorer {
   }
 
   public async handleOpenFileAction(path: string): Promise<void> {
-    if (
+    if (!(await this._containsDefaultNotebookWorkspace(userContext.databaseAccount))) {
-      userContext.features.phoenix === false &&
-      !(await this._containsDefaultNotebookWorkspace(userContext.databaseAccount))
-    ) {
       this._openSetupNotebooksPaneForQuickstart();
     }
 
@@ -1101,13 +1109,10 @@ export default class Explorer {
       ? this.refreshDatabaseForResourceToken()
       : this.refreshAllDatabases();
     await useNotebook.getState().refreshNotebooksEnabledStateForAccount();
-    let isNotebookEnabled = true;
+    const isNotebookEnabled: boolean =
-    if (!userContext.features.phoenix) {
-      isNotebookEnabled =
       userContext.authType !== AuthType.ResourceToken &&
       ((await this._containsDefaultNotebookWorkspace(userContext.databaseAccount)) ||
         userContext.features.enableNotebooks);
-    }
     useNotebook.getState().setIsNotebookEnabled(isNotebookEnabled);
     useNotebook.getState().setIsShellEnabled(isNotebookEnabled && isPublicInternetAccessAllowed());
 
@@ -1116,7 +1121,6 @@ export default class Explorer {
       dataExplorerArea: Constants.Areas.Notebook,
     });
 
-    if (!userContext.features.notebooksTemporarilyDown) {
     if (isNotebookEnabled) {
       await this.initNotebooks(userContext.databaseAccount);
     } else if (this.notebookToImport) {
@@ -1125,4 +1129,3 @@ export default class Explorer {
     }
   }
 }
-}

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -330,10 +330,10 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     const partitionKeyProperty = this.props.collectionPartitionKeyProperty;
 
     // aggregate all the properties, remove dropped ones
-    const finalProperties = editedProperties.existingProperties.concat(editedProperties.addedProperties);
+    let finalProperties = editedProperties.existingProperties.concat(editedProperties.addedProperties);
 
     // Compose the query
-    const pkId = editedProperties.pkId;
+    let pkId = editedProperties.pkId;
     let updateQueryFragment = "";
 
     finalProperties.forEach((p) => {
@@ -473,7 +473,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       return false;
     }
 
-    const pairs: any[] = data;
+    let pairs: any[] = data;
     for (let i = 0; i < pairs.length; i++) {
       const item = pairs[i];
       if (
@@ -772,8 +772,8 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
           return;
         }
 
-        const edge = edges[0];
+        let edge = edges[0];
-        const graphData = this.originalGraphData;
+        let graphData = this.originalGraphData;
         graphData.addEdge(edge);
 
         // Allow loadNeighbors to load list new edge
@@ -803,7 +803,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   public removeEdge(edgeId: string): Q.Promise<any> {
     return this.submitToBackend(`g.E('${GraphUtil.escapeSingleQuotes(edgeId)}').drop()`).then(
       () => {
-        const graphData = this.originalGraphData;
+        let graphData = this.originalGraphData;
         graphData.removeEdge(edgeId, false);
         this.updateGraphData(graphData, this.state.igraphConfig);
       },
@@ -826,9 +826,9 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       return false;
     }
 
-    const vertices: any[] = data;
+    let vertices: any[] = data;
     if (vertices.length > 0) {
-      const v0 = vertices[0];
+      let v0 = vertices[0];
       if (!v0.hasOwnProperty("id") || !v0.hasOwnProperty("type") || v0.type !== "vertex") {
         return false;
       }
@@ -933,7 +933,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
           throw { title: err };
         }
 
-        const vertex = vertices[0];
+        let vertex = vertices[0];
         const graphData = this.originalGraphData;
         graphData.addVertex(vertex);
         this.updateGraphData(graphData, this.state.igraphConfig);
@@ -1082,7 +1082,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   public static reportToConsole(type: ConsoleDataType.Info, msg: string, ...errorData: any[]): void;
   public static reportToConsole(type: ConsoleDataType.Error, msg: string, ...errorData: any[]): void;
   public static reportToConsole(type: ConsoleDataType, msg: string, ...errorData: any[]): void | (() => void) {
-    let errorDataStr = "";
+    let errorDataStr: string = "";
     if (errorData && errorData.length > 0) {
       console.error(msg, errorData);
       errorDataStr = ": " + JSON.stringify(errorData);
@@ -1224,7 +1224,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     return $.map(
       this.state.rootMap,
       (value: any, index: number): LeftPane.CaptionId => {
-        const result = GraphData.GraphData.getNodePropValue(value, key);
+        let result = GraphData.GraphData.getNodePropValue(value, key);
         return {
           caption: result !== undefined ? result : value.id,
           id: value.id,
@@ -1388,7 +1388,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * @return id
    */
   public static getPkIdFromDocumentId(d: DataModels.DocumentId, collectionPartitionKeyProperty: string): string {
-    const { id } = d;
+    let { id } = d;
     if (typeof id !== "string") {
       const error = `Vertex id is not a string: ${JSON.stringify(id)}.`;
       logConsoleError(error);
@@ -1425,7 +1425,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     }"] AS p FROM c WHERE NOT IS_DEFINED(c._isEdge)`;
     return this.executeNonPagedDocDbQuery(q).then(
       (documents: DataModels.DocumentId[]) => {
-        const possibleVertices = [] as PossibleVertex[];
+        let possibleVertices = [] as PossibleVertex[];
         $.each(documents, (index: number, item: any) => {
           if (highlightedNodeId && item.id === highlightedNodeId) {
             // Exclude highlighed node in the list
@@ -1463,16 +1463,16 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * @return promise when done
    */
   private editGraphEdges(editedEdges: EditedEdges): Q.Promise<any> {
-    const promises = [];
+    let promises = [];
     // Drop edges
     for (let i = 0; i < editedEdges.droppedIds.length; i++) {
-      const id = editedEdges.droppedIds[i];
+      let id = editedEdges.droppedIds[i];
       promises.push(this.removeEdge(id));
     }
 
     // Add edges
     for (let i = 0; i < editedEdges.addedEdges.length; i++) {
-      const e = editedEdges.addedEdges[i];
+      let e = editedEdges.addedEdges[i];
       promises.push(
         this.createNewEdge(e).then(() => {
           // Reload neighbors in case we linked to a vertex that isn't loaded in the graph
@@ -1533,7 +1533,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   private collectNodeProperties(vertices: GraphData.GremlinVertex[]) {
     const props = {} as any; // Hashset
     $.each(vertices, (index: number, item: GraphData.GremlinVertex) => {
-      for (const p in item) {
+      for (var p in item) {
         // DocDB: Exclude type because it's always 'vertex'
         if (p !== "type" && typeof (item as any)[p] === "string") {
           props[p] = true;
@@ -1543,7 +1543,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       if (item.hasOwnProperty("properties")) {
         // TODO This is DocDB-graph specific
         // Assume each property value is [{value:... }]
-        for (const f in item.properties) {
+        for (var f in item.properties) {
           props[f] = true;
         }
       }
@@ -1570,21 +1570,21 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       return;
     }
 
-    const data = this.originalGraphData.getVertexById(id);
+    let data = this.originalGraphData.getVertexById(id);
 
     // A bit of translation to make it easier to display
-    const props: { [id: string]: ViewModels.GremlinPropertyValueType[] } = {};
+    let props: { [id: string]: ViewModels.GremlinPropertyValueType[] } = {};
-    for (const p in data.properties) {
+    for (let p in data.properties) {
       props[p] = data.properties[p].map((gremlinProperty) => gremlinProperty.value);
     }
 
     // update neighbors
-    const sources: NeighborVertexBasicInfo[] = [];
+    let sources: NeighborVertexBasicInfo[] = [];
-    const targets: NeighborVertexBasicInfo[] = [];
+    let targets: NeighborVertexBasicInfo[] = [];
     this.props.onResetDefaultGraphConfigValues();
-    const nodeCaption = this.state.igraphConfigUiData.nodeCaptionChoice;
+    let nodeCaption = this.state.igraphConfigUiData.nodeCaptionChoice;
     this.updateSelectedNodeNeighbors(data.id, nodeCaption, sources, targets);
-    const sData: GraphHighlightedNodeData = {
+    let sData: GraphHighlightedNodeData = {
       id: data.id,
       label: data.label,
       properties: props,
@@ -1611,16 +1611,16 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     targets: NeighborVertexBasicInfo[]
   ): void {
     // update neighbors
-    const gd = this.originalGraphData;
+    let gd = this.originalGraphData;
-    const v = gd.getVertexById(id);
+    let v = gd.getVertexById(id);
 
     // Clear the array while keeping the references
     sources.length = 0;
     targets.length = 0;
 
-    const possibleEdgeLabels = {} as any; // Collect all edge labels in a hashset
+    let possibleEdgeLabels = {} as any; // Collect all edge labels in a hashset
 
-    for (const p in v.inE) {
+    for (let p in v.inE) {
       possibleEdgeLabels[p] = true;
       const edges = v.inE[p];
       $.each(edges, (index: number, edge: GraphData.GremlinShortInEdge) => {
@@ -1629,7 +1629,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
           // If id not known, it must be an edge node whose neighbor hasn't been loaded into the graph, yet
           return;
         }
-        const caption = GraphData.GraphData.getNodePropValue(gd.getVertexById(neighborId), nodeCaption) as string;
+        let caption = GraphData.GraphData.getNodePropValue(gd.getVertexById(neighborId), nodeCaption) as string;
         sources.push({
           name: caption,
           id: neighborId,
@@ -1639,7 +1639,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       });
     }
 
-    for (const p in v.outE) {
+    for (let p in v.outE) {
       possibleEdgeLabels[p] = true;
       const edges = v.outE[p];
       $.each(edges, (index: number, edge: GraphData.GremlinShortOutEdge) => {
@@ -1648,7 +1648,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
           // If id not known, it must be an edge node whose neighbor hasn't been loaded into the graph, yet
           return;
         }
-        const caption = GraphData.GraphData.getNodePropValue(gd.getVertexById(neighborId), nodeCaption) as string;
+        let caption = GraphData.GraphData.getNodePropValue(gd.getVertexById(neighborId), nodeCaption) as string;
         targets.push({
           name: caption,
           id: neighborId,
@@ -1681,20 +1681,20 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       return;
     }
 
-    const updatedVertex = vertices[0];
+    let updatedVertex = vertices[0];
     if (this.originalGraphData.hasVertexId(updatedVertex.id)) {
-      const currentVertex = this.originalGraphData.getVertexById(updatedVertex.id);
+      let currentVertex = this.originalGraphData.getVertexById(updatedVertex.id);
       // Copy updated properties
       if (currentVertex.hasOwnProperty("properties")) {
         delete currentVertex["properties"];
       }
-      for (const p in updatedVertex) {
+      for (var p in updatedVertex) {
         (currentVertex as any)[p] = updatedVertex[p];
       }
     }
 
     // TODO This kind of assumes saveVertexProperty is done from property panes.
-    const hn = this.state.highlightedNode;
+    let hn = this.state.highlightedNode;
     if (hn && hn.id === updatedVertex.id) {
       this.updatePropertiesPane(hn.id);
     }
@@ -1708,7 +1708,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     igraphConfig?: IGraphConfig
   ) {
     this.originalGraphData = graphData;
-    const gd = JSON.parse(JSON.stringify(this.originalGraphData));
+    let gd = JSON.parse(JSON.stringify(this.originalGraphData));
     if (!this.d3ForceGraph) {
       console.warn("Attempting to update graph, but d3ForceGraph not initialized, yet.");
       return;

src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx

@@ -58,7 +58,7 @@ export class LeftPaneComponent extends React.Component<LeftPaneComponentProps> {
         className={className}
         as="tr"
         aria-label={node.caption}
-        onActivated={() => this.props.onRootNodeSelected(node.id)}
+        onActivated={(e) => this.props.onRootNodeSelected(node.id)}
         key={node.id}
       >
         <td className="resultItem">

src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.test.tsx

@@ -1,8 +1,8 @@
+import React from "react";
 import { mount, ReactWrapper } from "enzyme";
 import * as Q from "q";
-import React from "react";
+import { NodePropertiesComponent, NodePropertiesComponentProps, Mode } from "./NodePropertiesComponent";
-import { GraphHighlightedNodeData, PossibleVertex } from "./GraphExplorer";
+import { GraphHighlightedNodeData, EditedProperties, EditedEdges, PossibleVertex } from "./GraphExplorer";
-import { Mode, NodePropertiesComponent, NodePropertiesComponentProps } from "./NodePropertiesComponent";
 
 describe("Property pane", () => {
   const title = "My Title";
@@ -37,25 +37,17 @@ describe("Property pane", () => {
     return {
       expandedTitle: title,
       isCollapsed: false,
-      onCollapsedChanged: (): void => {
+      onCollapsedChanged: (newValue: boolean): void => {},
-        ("");
-      },
       node: highlightedNode,
-      getPkIdFromNodeData: (): string => undefined,
+      getPkIdFromNodeData: (v: GraphHighlightedNodeData): string => null,
-      collectionPartitionKeyProperty: undefined,
+      collectionPartitionKeyProperty: null,
-      updateVertexProperties: (): Q.Promise<void> => Q.resolve(),
+      updateVertexProperties: (editedProperties: EditedProperties): Q.Promise<void> => Q.resolve(),
-      selectNode: (): void => {
+      selectNode: (id: string): void => {},
-        ("");
+      updatePossibleVertices: (): Q.Promise<PossibleVertex[]> => Q.resolve(null),
-      },
+      possibleEdgeLabels: null,
-      updatePossibleVertices: (): Q.Promise<PossibleVertex[]> => Q.resolve(undefined),
+      editGraphEdges: (editedEdges: EditedEdges): Q.Promise<any> => Q.resolve(),
-      possibleEdgeLabels: undefined,
+      deleteHighlightedNode: (): void => {},
-      editGraphEdges: (): Q.Promise<unknown> => Q.resolve(),
+      onModeChanged: (newMode: Mode): void => {},
-      deleteHighlightedNode: (): void => {
-        ("");
-      },
-      onModeChanged: (): void => {
-        ("");
-      },
       viewMode: Mode.READONLY_PROP,
     };
   };

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-1.svg";
+import CheckIcon from "../../../../images/check.svg";
 import DeleteIcon from "../../../../images/delete.svg";
-import EditIcon from "../../../../images/edit-1.svg";
+import EditIcon from "../../../../images/edit.svg";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
 import { CollapsiblePanel } from "../../Controls/CollapsiblePanel/CollapsiblePanel";
@@ -45,7 +45,7 @@ export interface NodePropertiesComponentProps {
   selectNode: (id: string) => void;
   updatePossibleVertices: () => Q.Promise<PossibleVertex[]>;
   possibleEdgeLabels: Item[];
-  editGraphEdges: (editedEdges: EditedEdges) => Q.Promise<unknown>;
+  editGraphEdges: (editedEdges: EditedEdges) => Q.Promise<any>;
   deleteHighlightedNode: () => void;
   onModeChanged: (newMode: Mode) => void;
   viewMode: Mode; // If viewMode is specified in parent, keep state in sync with it
@@ -72,7 +72,7 @@ export class NodePropertiesComponent extends React.Component<
     super(props);
     this.state = {
       editedProperties: {
-        pkId: undefined,
+        pkId: null,
         readOnlyProperties: [],
         existingProperties: [],
         addedProperties: [],
@@ -98,12 +98,15 @@ export class NodePropertiesComponent extends React.Component<
     };
   }
 
-  public static getDerivedStateFromProps(props: NodePropertiesComponentProps): Partial<NodePropertiesComponentState> {
+  public static getDerivedStateFromProps(
+    props: NodePropertiesComponentProps,
+    state: NodePropertiesComponentState
+  ): Partial<NodePropertiesComponentState> {
     if (props.viewMode !== Mode.READONLY_PROP) {
       return { isDeleteConfirm: false };
     }
 
-    return undefined;
+    return null;
   }
 
   public render(): JSX.Element {
@@ -134,14 +137,11 @@ export class NodePropertiesComponent extends React.Component<
    * Get type option. Limit to string, number or boolean
    * @param value
    */
-  private static getTypeOption(
+  private static getTypeOption(value: any): ViewModels.InputPropertyValueTypeString {
-    value: null | string | number | undefined | boolean
+    if (value == null) {
-  ): ViewModels.InputPropertyValueTypeString {
-    // eslint-disable-next-line no-null/no-null
-    if (value === null) {
       return "null";
     }
-    const type = typeof value;
+    let type = typeof value;
     switch (type) {
       case "number":
       case "boolean":
@@ -173,10 +173,9 @@ export class NodePropertiesComponent extends React.Component<
 
     const existingProps: ViewModels.InputProperty[] = [];
 
-    // eslint-disable-next-line no-prototype-builtins
     if (this.props.node.hasOwnProperty("properties")) {
       const hProps = this.props.node["properties"];
-      for (const p in hProps) {
+      for (let p in hProps) {
         const propValues = hProps[p];
         (p === partitionKeyProperty ? readOnlyProps : existingProps).push({
           key: p,
@@ -438,7 +437,7 @@ export class NodePropertiesComponent extends React.Component<
         </div>
       );
     } else {
-      return undefined;
+      return null;
     }
   }
 

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -54,8 +54,6 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
   uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
-  uiFabricControlButtons.unshift(CommandBarUtil.createConnectionStatus("connectionStatus"));
-
   if (useTabs.getState().activeTab?.tabKind === ViewModels.CollectionTabKind.NotebookV2) {
     uiFabricControlButtons.unshift(CommandBarUtil.createMemoryTracker("memoryTracker"));
   }

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

@@ -103,25 +103,19 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
-
+      expect(enableNotebookBtn).toBeDefined();
-      //TODO: modify once notebooks are available
+      expect(enableNotebookBtn.disabled).toBe(false);
-      expect(enableNotebookBtn).toBeUndefined();
+      expect(enableNotebookBtn.tooltipText).toBe("");
-      //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();
-      //TODO: modify once notebooks are available
+      expect(enableNotebookBtn.disabled).toBe(true);
-      expect(enableNotebookBtn).toBeUndefined();
+      expect(enableNotebookBtn.tooltipText).toBe(
-      //expect(enableNotebookBtn).toBeDefined();
+        "Notebooks are not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks."
-      //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."
-      //);
     });
   });
 
@@ -198,11 +192,8 @@ 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);
-      //TODO: modify once notebooks are available
+      expect(openMongoShellBtn.tooltipText).toBe("");
-      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", () => {
@@ -212,11 +203,8 @@ 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);
-      //TODO: modify once notebooks are available
+      expect(openMongoShellBtn.tooltipText).toBe("");
-      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", () => {
@@ -302,13 +290,9 @@ 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);
-      //TODO: modify once notebooks are available
+      expect(openCassandraShellBtn.tooltipText).toBe("");
-      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", () => {
@@ -318,11 +302,8 @@ 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);
-      //TODO: modify once notebooks are available
+      expect(openCassandraShellBtn.tooltipText).toBe("");
-      expect(openCassandraShellBtn.disabled).toBe(true);
-      //expect(openCassandraShellBtn.disabled).toBe(false);
-      //expect(openCassandraShellBtn.tooltipText).toBe("");
     });
   });
 

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -67,51 +67,35 @@ export function createStaticCommandBarButtons(
     newCollectionBtn.children.push(newDatabaseBtn);
   }
 
-  if (useNotebook.getState().isNotebookEnabled) {
   buttons.push(createDivider());
-    const notebookButtons: CommandButtonComponentProps[] = [];
 
+  if (useNotebook.getState().isNotebookEnabled) {
     const newNotebookButton = createNewNotebookButton(container);
     newNotebookButton.children = [createNewNotebookButton(container), createuploadNotebookButton(container)];
-    notebookButtons.push(newNotebookButton);
+    buttons.push(newNotebookButton);
 
     if (container.notebookManager?.gitHubOAuthService) {
-      notebookButtons.push(createManageGitHubAccountButton(container));
+      buttons.push(createManageGitHubAccountButton(container));
     }
 
-    notebookButtons.push(createOpenTerminalButton(container));
+    buttons.push(createOpenTerminalButton(container));
-    if (userContext.features.phoenix === false) {
+
-      notebookButtons.push(createNotebookWorkspaceResetButton(container));
+    buttons.push(createNotebookWorkspaceResetButton(container));
-    }
     if (
       (userContext.apiType === "Mongo" &&
         useNotebook.getState().isShellEnabled &&
         selectedNodeState.isDatabaseNodeOrNoneSelected()) ||
       userContext.apiType === "Cassandra"
     ) {
-      notebookButtons.push(createDivider());
-      if (userContext.apiType === "Cassandra") {
-        notebookButtons.push(createOpenCassandraTerminalButton(container));
-      } else {
-        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() && !userContext.features.notebooksTemporarilyDown) {
       buttons.push(createDivider());
+      if (userContext.apiType === "Cassandra") {
+        buttons.push(createOpenCassandraTerminalButton(container));
+      } else {
+        buttons.push(createOpenMongoTerminalButton(container));
+      }
+    }
+  } else {
+    if (!isRunningOnNationalCloud()) {
       buttons.push(createEnableNotebooksButton(container));
     }
   }
@@ -168,9 +152,7 @@ export function createContextCommandBarButtons(
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         if (useNotebook.getState().isShellEnabled) {
-          if (!userContext.features.notebooksTemporarilyDown) {
           container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
-          }
         } else {
           selectedCollection && selectedCollection.onNewMongoShellClick();
         }
@@ -178,13 +160,7 @@ export function createContextCommandBarButtons(
       commandButtonLabel: label,
       ariaLabel: label,
       hasPopup: true,
-      tooltipText:
+      disabled: selectedNodeState.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo",
-        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);
   }
@@ -412,13 +388,6 @@ 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

@@ -13,7 +13,6 @@ import { StyleConstants } from "../../../Common/Constants";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-import { ConnectionStatus } from "./ConnectionStatusComponent";
 import { MemoryTracker } from "./MemoryTrackerComponent";
 
 /**
@@ -23,13 +22,6 @@ 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(
@@ -45,7 +37,6 @@ 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,
@@ -132,12 +123,8 @@ 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 },
           };
         }
 
@@ -202,10 +189,3 @@ export const createMemoryTracker = (key: string): ICommandBarItemProps => {
     onRender: () => <MemoryTracker />,
   };
 };
-
-export const createConnectionStatus = (key: string): ICommandBarItemProps => {
-  return {
-    key,
-    onRender: () => <ConnectionStatus />,
-  };
-};

src/Explorer/Menus/CommandBar/ConnectionStatusComponent.less

@@ -1,79 +0,0 @@
-@import "../../../../less/Common/Constants";
-
-.connectionStatusContainer {
-    cursor: default;
-    align-items: center;
-    margin: 0 9px;
-    border: 1px;
-    min-height: 44px;
-
-    > span {
-        padding-right: 12px;
-        font-size: 13px;
-        font-family: @DataExplorerFont;
-        color: @DefaultFontColor;
-    }
-}
-.connectionStatusFailed{
-    color: #bd1919;
-}
-.ring-container {
-    position: relative;
-}
-
-.ringringGreen {
-    border: 3px solid green;
-    border-radius: 30px;
-    height: 18px;
-    width: 18px;
-    position: absolute;
-    margin: .4285em 0em 0em 0.07477em;
-    animation: pulsate 3s ease-out;
-    animation-iteration-count: infinite; 
-    opacity: 0.0
-}
-.ringringYellow{
-    border: 3px solid #ffbf00;
-    border-radius: 30px;
-    height: 18px;
-    width: 18px;
-    position: absolute;
-    margin: .4285em 0em 0em 0.07477em;
-    animation: pulsate 3s ease-out;
-    animation-iteration-count: infinite; 
-    opacity: 0.0
-}
-.ringringRed{
-    border: 3px solid #bd1919;
-    border-radius: 30px;
-    height: 18px;
-    width: 18px;
-    position: absolute;
-    margin: .4285em 0em 0em 0.07477em;
-    animation: pulsate 3s ease-out;
-    animation-iteration-count: infinite; 
-    opacity: 0.0
-}
-@keyframes pulsate {
-    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
-    15% {opacity: 0.8;}
-    25% {opacity: 0.6;}
-    45% {opacity: 0.4;}
-    70% {opacity: 0.3;}
-    100% {-webkit-transform: scale(.7, .7); opacity: 0.1;}
-}
-.locationGreenDot{
-    font-size: 20px;
-    margin-right: 0.07em;
-    color: green;
-}
-.locationYellowDot{
-    font-size: 20px;
-    margin-right: 0.07em;
-    color: #ffbf00;
-}
-.locationRedDot{
-    font-size: 20px;
-    margin-right: 0.07em;
-    color: #bd1919;
-}

src/Explorer/Menus/CommandBar/ConnectionStatusComponent.tsx

@@ -1,77 +0,0 @@
-import { Icon, ProgressIndicator, Spinner, SpinnerSize, Stack, TooltipHost } from "@fluentui/react";
-import * as React from "react";
-import { ConnectionStatusType } from "../../../Common/Constants";
-import { useNotebook } from "../../Notebook/useNotebook";
-import "../CommandBar/ConnectionStatusComponent.less";
-
-export const ConnectionStatus: React.FC = (): JSX.Element => {
-  const [second, setSecond] = React.useState("00");
-  const [minute, setMinute] = React.useState("00");
-  const [isActive, setIsActive] = React.useState(false);
-  const [counter, setCounter] = React.useState(0);
-  const [statusColor, setStatusColor] = React.useState("locationYellowDot");
-  const [statusColorAnimation, setStatusColorAnimation] = React.useState("ringringYellow");
-  const toolTipContent = "Hosted runtime status.";
-  React.useEffect(() => {
-    let intervalId: NodeJS.Timeout;
-
-    if (isActive) {
-      intervalId = setInterval(() => {
-        const secondCounter = counter % 60;
-        const minuteCounter = Math.floor(counter / 60);
-        const computedSecond: string = String(secondCounter).length === 1 ? `0${secondCounter}` : `${secondCounter}`;
-        const computedMinute: string = String(minuteCounter).length === 1 ? `0${minuteCounter}` : `${minuteCounter}`;
-
-        setSecond(computedSecond);
-        setMinute(computedMinute);
-
-        setCounter((counter) => counter + 1);
-      }, 1000);
-    }
-    return () => clearInterval(intervalId);
-  }, [isActive, counter]);
-
-  const stopTimer = () => {
-    setIsActive(false);
-    setCounter(0);
-    setSecond("00");
-    setMinute("00");
-  };
-
-  const connectionInfo = useNotebook((state) => state.connectionInfo);
-  if (!connectionInfo) {
-    return (
-      <Stack className="connectionStatusContainer" horizontal>
-        <span>Connecting</span>
-        <Spinner size={SpinnerSize.medium} />
-      </Stack>
-    );
-  }
-  if (connectionInfo && connectionInfo.status === ConnectionStatusType.Allocating && isActive === false) {
-    setIsActive(true);
-  } else if (connectionInfo && connectionInfo.status === ConnectionStatusType.Connected && isActive === true) {
-    stopTimer();
-    setStatusColor("locationGreenDot");
-    setStatusColorAnimation("ringringGreen");
-  } else if (connectionInfo && connectionInfo.status === ConnectionStatusType.Failed && isActive === true) {
-    stopTimer();
-    setStatusColor("locationRedDot");
-    setStatusColorAnimation("ringringRed");
-  }
-  return (
-    <TooltipHost content={toolTipContent}>
-      <Stack className="connectionStatusContainer" horizontal>
-        <div className="ring-container">
-          <div className={statusColorAnimation}></div>
-          <Icon iconName="LocationDot" className={statusColor} />
-        </div>
-        <span className={connectionInfo.status === ConnectionStatusType.Failed ? "connectionStatusFailed" : ""}>
-          {connectionInfo.status}
-        </span>
-        {connectionInfo.status === ConnectionStatusType.Allocating && isActive && (
-          <ProgressIndicator description={minute + ":" + second} />
-        )}
-      </Stack>
-    </TooltipHost>
-  );
-};

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-1.svg";
+import ClearIcon from "../../../../images/Clear.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,10 +277,6 @@ 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,14 +1,12 @@
 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;
 }
 
@@ -22,8 +20,7 @@ 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
     );
   }
 
@@ -53,7 +50,6 @@ const makeMapStateToProps = (
         kernelStatus,
         kernelSpecName,
         currentCellType,
-        isNotebookUntrusted: NotebookUtil.isNotebookUntrusted(state, contentRef),
       } as VirtualCommandBarComponentProps;
     }
 
@@ -73,7 +69,6 @@ const makeMapStateToProps = (
       kernelStatus,
       kernelSpecName,
       currentCellType,
-      isNotebookUntrusted: NotebookUtil.isNotebookUntrusted(state, contentRef),
       onRender: initialProps.onRender,
     };
   };

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -38,7 +38,6 @@ 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";
@@ -109,7 +108,7 @@ const formWebSocketURL = (serverConfig: NotebookServiceConfig, kernelId: string,
   const q = params.toString();
   const suffix = q !== "" ? `?${q}` : "";
 
-  const url = (serverConfig.endpoint.slice(0, -1) || "") + `api/kernels/${kernelId}/channels${suffix}`;
+  const url = (serverConfig.endpoint || "") + `api/kernels/${kernelId}/channels${suffix}`;
 
   return url.replace(/^http(s)?/, "ws$1");
 };
@@ -687,8 +686,10 @@ const handleKernelConnectionLostEpic = (
         logConsoleError(msg);
         logFailureToTelemetry(state, "Kernel restart error", msg);
 
-        useDialog.getState().showOkModalDialog("kernel restarts", msg);
+        const explorer = window.dataExplorer;
-
+        if (explorer) {
+          explorer.showOkModalDialog("kernel restarts", msg);
+        }
         return of(EMPTY);
       }
 
@@ -772,7 +773,8 @@ const closeUnsupportedMimetypesEpic = (
     ofType(actions.FETCH_CONTENT_FULFILLED),
     mergeMap((action) => {
       const mimetype = action.payload.model.mimetype;
-      if (!TextFile.handles(mimetype)) {
+      const explorer = window.dataExplorer;
+      if (explorer && !TextFile.handles(mimetype)) {
         const filepath = action.payload.filepath;
         // Close tab and show error message
         useTabs
@@ -781,7 +783,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.`;
-        useDialog.getState().showOkModalDialog("File cannot be rendered", msg);
+        explorer.showOkModalDialog("File cannot be rendered", msg);
         logConsoleError(msg);
       }
       return EMPTY;
@@ -801,6 +803,8 @@ const closeContentFailedToFetchEpic = (
   return action$.pipe(
     ofType(actions.FETCH_CONTENT_FAILED),
     mergeMap((action) => {
+      const explorer = window.dataExplorer;
+      if (explorer) {
         const filepath = action.payload.filepath;
         // Close tab and show error message
         useTabs
@@ -809,8 +813,9 @@ const closeContentFailedToFetchEpic = (
             (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);
+        explorer.showOkModalDialog("Failure to load", msg);
         logConsoleError(msg);
+      }
       return EMPTY;
     })
   );

src/Explorer/Notebook/NotebookContainerClient.ts

@@ -56,7 +56,7 @@ export class NotebookContainerClient {
 
     const { notebookServerEndpoint, authToken } = this.getNotebookServerConfig();
     try {
-      const response = await fetch(`${notebookServerEndpoint}api/metrics/memory`, {
+      const response = await fetch(`${notebookServerEndpoint}/api/metrics/memory`, {
         method: "GET",
         headers: {
           Authorization: authToken,

src/Explorer/Notebook/NotebookContentClient.ts

@@ -36,10 +36,7 @@ export class NotebookContentClient {
    *
    * @param parent parent folder
    */
-  public async createNewNotebookFile(
+  public createNewNotebookFile(parent: NotebookContentItem): Promise<NotebookContentItem> {
-    parent: NotebookContentItem,
-    isGithubTree?: boolean
-  ): Promise<NotebookContentItem> {
     if (!parent || parent.type !== NotebookContentItemType.Directory) {
       throw new Error(`Parent must be a directory: ${parent}`);
     }
@@ -60,8 +57,6 @@ 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);
@@ -71,9 +66,9 @@ export class NotebookContentClient {
       });
   }
 
-  public async deleteContentItem(item: NotebookContentItem, isGithubTree?: boolean): Promise<void> {
+  public async deleteContentItem(item: NotebookContentItem): Promise<void> {
     const path = await this.deleteNotebookFile(item.path);
-    useNotebook.getState().deleteNotebookItem(item, isGithubTree);
+    useNotebook.getState().deleteNotebookItem(item);
 
     // TODO: Delete once old resource tree is removed
     if (!path || path !== item.path) {
@@ -96,12 +91,12 @@ 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}`);
     }
+
     const filepath = NotebookUtil.getFilePath(parent.path, name);
     if (await this.checkIfFilepathExists(filepath)) {
       throw new Error(`File already exists: ${filepath}`);
@@ -120,8 +115,6 @@ 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);
@@ -144,11 +137,7 @@ export class NotebookContentClient {
    * @param sourcePath
    * @param targetName is not prefixed with path
    */
-  public renameNotebook(
+  public renameNotebook(item: NotebookContentItem, targetName: string): Promise<NotebookContentItem> {
-    item: NotebookContentItem,
-    targetName: string,
-    isGithubTree?: boolean
-  ): Promise<NotebookContentItem> {
     const sourcePath = item.path;
     // Match extension
     if (sourcePath.indexOf(".") !== -1) {
@@ -174,9 +163,6 @@ export class NotebookContentClient {
         item.name = notebookFile.name;
         item.path = notebookFile.path;
         item.timestamp = NotebookUtil.getCurrentTimestamp();
-
-        useNotebook.getState().updateNotebookItem(item, isGithubTree);
-
         return item;
       });
   }
@@ -186,11 +172,7 @@ export class NotebookContentClient {
    * @param parent
    * @param newDirectoryName basename of the new directory
    */
-  public async createDirectory(
+  public async createDirectory(parent: NotebookContentItem, newDirectoryName: string): Promise<NotebookContentItem> {
-    parent: NotebookContentItem,
-    newDirectoryName: string,
-    isGithubTree?: boolean
-  ): Promise<NotebookContentItem> {
     if (parent.type !== NotebookContentItemType.Directory) {
       throw new Error(`Parent is not a directory: ${parent.path}`);
     }
@@ -217,11 +199,8 @@ 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,7 +18,6 @@ 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";
@@ -30,7 +29,6 @@ import { SnapshotRequest } from "./NotebookComponent/types";
 import { NotebookContainerClient } from "./NotebookContainerClient";
 import { NotebookContentClient } from "./NotebookContentClient";
 import { SchemaAnalyzerNotebook } from "./SchemaAnalyzer/SchemaAnalyzerUtils";
-import { useNotebook } from "./useNotebook";
 
 type NotebookPaneContent = string | ImmutableNotebook;
 
@@ -112,7 +110,6 @@ export default class NotebookManager {
     this.junoClient.subscribeToPinnedRepos((pinnedRepos) => {
       this.params.resourceTree.initializeGitHubRepos(pinnedRepos);
       this.params.resourceTree.triggerRender();
-      useNotebook.getState().initializeGitHubRepos(pinnedRepos);
     });
     this.refreshPinnedRepos();
   }
@@ -173,9 +170,7 @@ export default class NotebookManager {
     if (error.status === HttpStatusCodes.Unauthorized) {
       this.gitHubOAuthService.resetToken();
 
-      useDialog
+      this.params.container.showOkCancelModalDialog(
-        .getState()
-        .showOkCancelModalDialog(
         undefined,
         "Cosmos DB cannot access your Github account anymore. Please connect to GitHub again.",
         "Connect to GitHub",
@@ -199,7 +194,7 @@ export default class NotebookManager {
   private promptForCommitMsg = (title: string, primaryButtonLabel: string) => {
     return new Promise<string>((resolve, reject) => {
       let commitMsg = "Committed from Azure Cosmos DB Notebooks";
-      useDialog.getState().showOkCancelModalDialog(
+      this.params.container.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,7 +14,6 @@ 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";
@@ -108,7 +107,6 @@ 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,12 +19,6 @@
     }
 }
 
-.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,7 +5,6 @@ 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;
@@ -13,7 +12,6 @@ export interface PassedPromptProps {
   status?: string;
   executionCount?: number;
   isHovered?: boolean;
-  isRunDisabled?: boolean;
   runCell?: () => void;
   stopCell?: () => void;
 }
@@ -22,7 +20,6 @@ interface ComponentProps {
   id: string;
   contentRef: ContentRef;
   isHovered?: boolean;
-  isNotebookUntrusted?: boolean;
   children: (props: PassedPromptProps) => React.ReactNode;
 }
 
@@ -50,7 +47,6 @@ export class PromptPure extends React.Component<Props> {
           runCell: this.props.executeCell,
           stopCell: this.props.stopExecution,
           isHovered: this.props.isHovered,
-          isRunDisabled: this.props.isNotebookUntrusted,
         })}
       </div>
     );
@@ -79,7 +75,6 @@ const makeMapStateToProps = (_state: CdbAppState, ownProps: ComponentProps): ((s
       status,
       executionCount,
       isHovered,
-      isNotebookUntrusted: NotebookUtil.isNotebookUntrusted(state, contentRef),
     };
   };
   return mapStateToProps;

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

@@ -1,27 +0,0 @@
-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,6 +1,5 @@
 import { IconButton, Spinner, SpinnerSize } from "@fluentui/react";
 import * as React from "react";
-import { NotebookUtil } from "../NotebookUtil";
 import { PassedPromptProps } from "./Prompt";
 import "./Prompt.less";
 
@@ -24,18 +23,15 @@ export const promptContent = (props: PassedPromptProps): JSX.Element => {
       </div>
     );
   } else if (props.isHovered) {
-    const playButtonText = props.isRunDisabled ? NotebookUtil.UntrustedNotebookRunHint : "Run cell";
+    const playButtonText = "Run cell";
     return (
-      <div className={props.isRunDisabled ? "disabledRunCellButton" : ""}>
       <IconButton
         className="runCellButton"
         iconProps={{ iconName: "MSNVideosSolid" }}
         title={playButtonText}
         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,7 +36,6 @@ interface StateProps {
   cellIdAbove: CellId;
   cellIdBelow: CellId;
   hasCodeOutput: boolean;
-  isNotebookUntrusted: boolean;
 }
 
 class BaseToolbar extends React.PureComponent<ComponentProps & DispatchProps & StateProps> {
@@ -44,16 +43,12 @@ 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);
@@ -228,7 +223,6 @@ 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

@@ -1,60 +0,0 @@
-// 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,6 +11,7 @@ import {
   DropTargetConnector,
   DropTargetMonitor,
 } from "react-dnd";
+
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import styled, { StyledComponent } from "styled-components";
@@ -122,10 +123,9 @@ 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: item.id,
+        id: monitor.getItem().id,
         destinationId: props.id,
         above: hoverUpperHalf,
         contentRef: props.contentRef,

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

@@ -4,7 +4,6 @@ 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;
@@ -15,7 +14,6 @@ interface StateProps {
   cellMap: Immutable.Map<string, any>;
   cellOrder: Immutable.List<string>;
   focusedCell?: string | null;
-  isNotebookUntrusted: boolean;
 }
 
 interface DispatchProps {
@@ -61,13 +59,8 @@ 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") {
@@ -132,7 +125,6 @@ export const makeMapStateToProps = (_state: AppState, ownProps: ComponentProps)
       cellOrder,
       cellMap,
       focusedCell,
-      isNotebookUntrusted: NotebookUtil.isNotebookUntrusted(state, contentRef),
     };
   };
   return mapStateToProps;

src/Explorer/Notebook/NotebookUtil.ts

@@ -1,5 +1,4 @@
 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";
@@ -12,8 +11,6 @@ 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.
    */
@@ -156,16 +153,6 @@ 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

@@ -1,31 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,22 +0,0 @@
-// 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

@@ -6,12 +6,10 @@ import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 import * as Logger from "../../Common/Logger";
 import { configContext } from "../../ConfigContext";
 import * as DataModels from "../../Contracts/DataModels";
-import { IPinnedRepo } from "../../Juno/JunoClient";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { getAuthorizationHeader } from "../../Utils/AuthorizationUtils";
-import * as GitHubUtils from "../../Utils/GitHubUtils";
 import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentItem";
 import NotebookManager from "./NotebookManager";
 
@@ -28,8 +26,6 @@ interface NotebookState {
   myNotebooksContentRoot: NotebookContentItem;
   gitHubNotebooksContentRoot: NotebookContentItem;
   galleryContentRoot: NotebookContentItem;
-  connectionInfo: DataModels.ContainerConnectionInfo;
-  NotebookFolderName: string;
   setIsNotebookEnabled: (isNotebookEnabled: boolean) => void;
   setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => void;
   setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) => void;
@@ -40,12 +36,9 @@ interface NotebookState {
   setNotebookBasePath: (notebookBasePath: string) => void;
   refreshNotebooksEnabledStateForAccount: () => Promise<void>;
   findItem: (root: NotebookContentItem, item: NotebookContentItem) => NotebookContentItem;
-  insertNotebookItem: (parent: NotebookContentItem, item: NotebookContentItem, isGithubTree?: boolean) => void;
+  updateNotebookItem: (item: NotebookContentItem) => void;
-  updateNotebookItem: (item: NotebookContentItem, isGithubTree?: boolean) => void;
+  deleteNotebookItem: (item: NotebookContentItem) => void;
-  deleteNotebookItem: (item: NotebookContentItem, isGithubTree?: boolean) => void;
   initializeNotebooksTree: (notebookManager: NotebookManager) => Promise<void>;
-  initializeGitHubRepos: (pinnedRepos: IPinnedRepo[]) => void;
-  setConnectionInfo: (connectionInfo: DataModels.ContainerConnectionInfo) => void;
 }
 
 export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
@@ -68,8 +61,6 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
   myNotebooksContentRoot: undefined,
   gitHubNotebooksContentRoot: undefined,
   galleryContentRoot: undefined,
-  connectionInfo: undefined,
-  NotebookFolderName: userContext.features.phoenix ? "My Notebooks Scratch" : "My Notebooks",
   setIsNotebookEnabled: (isNotebookEnabled: boolean) => set({ isNotebookEnabled }),
   setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => set({ isNotebooksEnabledForAccount }),
   setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) =>
@@ -147,34 +138,23 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
 
     return undefined;
   },
-  insertNotebookItem: (parent: NotebookContentItem, item: NotebookContentItem, isGithubTree?: boolean): void => {
+  updateNotebookItem: (item: NotebookContentItem): void => {
-    const root = isGithubTree ? cloneDeep(get().gitHubNotebooksContentRoot) : cloneDeep(get().myNotebooksContentRoot);
+    const root = 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;
-    isGithubTree ? set({ gitHubNotebooksContentRoot: root }) : set({ myNotebooksContentRoot: root });
+    set({ myNotebooksContentRoot: root });
   },
-  deleteNotebookItem: (item: NotebookContentItem, isGithubTree?: boolean): void => {
+  deleteNotebookItem: (item: NotebookContentItem): void => {
-    const root = isGithubTree ? cloneDeep(get().gitHubNotebooksContentRoot) : cloneDeep(get().myNotebooksContentRoot);
+    const root = cloneDeep(get().myNotebooksContentRoot);
     const parentItem = get().findItem(root, item.parent);
     parentItem.children = parentItem.children.filter((child) => child.path !== item.path);
-    isGithubTree ? set({ gitHubNotebooksContentRoot: root }) : set({ myNotebooksContentRoot: root });
+    set({ myNotebooksContentRoot: root });
   },
   initializeNotebooksTree: async (notebookManager: NotebookManager): Promise<void> => {
     const myNotebooksContentRoot = {
-      name: get().NotebookFolderName,
+      name: "My Notebooks",
       path: get().notebookBasePath,
       type: NotebookContentItemType.Directory,
     };
@@ -183,11 +163,13 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
       path: "Gallery",
       type: NotebookContentItemType.File,
     };
-    const gitHubNotebooksContentRoot = {
+    const gitHubNotebooksContentRoot = notebookManager?.gitHubOAuthService?.isLoggedIn()
+      ? {
           name: "GitHub repos",
           path: "PsuedoDir",
           type: NotebookContentItemType.Directory,
-    };
+        }
+      : undefined;
     set({
       myNotebooksContentRoot,
       galleryContentRoot,
@@ -220,34 +202,4 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
       }
     }
   },
-  initializeGitHubRepos: (pinnedRepos: IPinnedRepo[]): void => {
-    const gitHubNotebooksContentRoot = cloneDeep(get().gitHubNotebooksContentRoot);
-    if (gitHubNotebooksContentRoot) {
-      gitHubNotebooksContentRoot.children = [];
-      pinnedRepos?.forEach((pinnedRepo) => {
-        const repoFullName = GitHubUtils.toRepoFullName(pinnedRepo.owner, pinnedRepo.name);
-        const repoTreeItem: NotebookContentItem = {
-          name: repoFullName,
-          path: "PsuedoDir",
-          type: NotebookContentItemType.Directory,
-          children: [],
-          parent: gitHubNotebooksContentRoot,
-        };
-
-        pinnedRepo.branches.forEach((branch) => {
-          repoTreeItem.children.push({
-            name: branch.name,
-            path: GitHubUtils.toContentUri(pinnedRepo.owner, pinnedRepo.name, branch.name, ""),
-            type: NotebookContentItemType.Directory,
-            parent: repoTreeItem,
-          });
-        });
-
-        gitHubNotebooksContentRoot.children.push(repoTreeItem);
-      });
-
-      set({ gitHubNotebooksContentRoot });
-    }
-  },
-  setConnectionInfo: (connectionInfo: DataModels.ContainerConnectionInfo) => set({ connectionInfo }),
 }));

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -113,7 +113,11 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       collectionId: "",
       enableIndexing: true,
       isSharded: userContext.apiType !== "Tables",
-      partitionKey: this.getPartitionKey(),
+      partitionKey:
+        (userContext.features.partitionKeyDefault && userContext.apiType === "SQL") ||
+        (userContext.features.partitionKeyDefault && userContext.apiType === "Mongo")
+          ? "/id"
+          : "",
       enableDedicatedThroughput: false,
       createMongoWildCardIndex: isCapabilityEnabled("EnableMongo"),
       useHashV2: false,
@@ -550,6 +554,61 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             </Stack>
           )}
 
+          {userContext.apiType !== "Tables" && (
+            <CollapsibleSectionComponent
+              title="Advanced"
+              isExpandedByDefault={false}
+              onExpand={() => {
+                TelemetryProcessor.traceOpen(Action.ExpandAddCollectionPaneAdvancedSection);
+                this.scrollToAdvancedSection();
+              }}
+            >
+              <Stack className="panelGroupSpacing" id="collapsibleSectionContent">
+                {isCapabilityEnabled("EnableMongo") && (
+                  <Stack className="panelGroupSpacing">
+                    <Stack horizontal>
+                      <span className="mandatoryStar">*&nbsp;</span>
+                      <Text className="panelTextBold" variant="small">
+                        Indexing
+                      </Text>
+                      <TooltipHost
+                        directionalHint={DirectionalHint.bottomLeftEdge}
+                        content="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
+                      >
+                        <Icon iconName="Info" className="panelInfoIcon" />
+                      </TooltipHost>
+                    </Stack>
+
+                    <Checkbox
+                      label="Create a Wildcard Index on all fields"
+                      checked={this.state.createMongoWildCardIndex}
+                      styles={{
+                        text: { fontSize: 12 },
+                        checkbox: { width: 12, height: 12 },
+                        label: { padding: 0, alignItems: "center" },
+                      }}
+                      onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
+                        this.setState({ createMongoWildCardIndex: isChecked })
+                      }
+                    />
+                  </Stack>
+                )}
+
+                {userContext.apiType === "SQL" && (
+                  <Checkbox
+                    label="My partition key is larger than 100 bytes"
+                    checked={this.state.useHashV2}
+                    styles={{
+                      text: { fontSize: 12 },
+                      checkbox: { width: 12, height: 12 },
+                      label: { padding: 0, alignItems: "center" },
+                    }}
+                    onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
+                      this.setState({ useHashV2: isChecked })
+                    }
+                  />
+                )}
+
                 {this.shouldShowAnalyticalStoreOptions() && (
                   <Stack className="panelGroupSpacing">
                     <Stack horizontal>
@@ -615,61 +674,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     )}
                   </Stack>
                 )}
-
-          {userContext.apiType !== "Tables" && (
-            <CollapsibleSectionComponent
-              title="Advanced"
-              isExpandedByDefault={false}
-              onExpand={() => {
-                TelemetryProcessor.traceOpen(Action.ExpandAddCollectionPaneAdvancedSection);
-                this.scrollToAdvancedSection();
-              }}
-            >
-              <Stack className="panelGroupSpacing" id="collapsibleSectionContent">
-                {isCapabilityEnabled("EnableMongo") && (
-                  <Stack className="panelGroupSpacing">
-                    <Stack horizontal>
-                      <span className="mandatoryStar">*&nbsp;</span>
-                      <Text className="panelTextBold" variant="small">
-                        Indexing
-                      </Text>
-                      <TooltipHost
-                        directionalHint={DirectionalHint.bottomLeftEdge}
-                        content="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
-                      >
-                        <Icon iconName="Info" className="panelInfoIcon" />
-                      </TooltipHost>
-                    </Stack>
-
-                    <Checkbox
-                      label="Create a Wildcard Index on all fields"
-                      checked={this.state.createMongoWildCardIndex}
-                      styles={{
-                        text: { fontSize: 12 },
-                        checkbox: { width: 12, height: 12 },
-                        label: { padding: 0, alignItems: "center" },
-                      }}
-                      onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
-                        this.setState({ createMongoWildCardIndex: isChecked })
-                      }
-                    />
-                  </Stack>
-                )}
-
-                {userContext.apiType === "SQL" && (
-                  <Checkbox
-                    label="My partition key is larger than 100 bytes"
-                    checked={this.state.useHashV2}
-                    styles={{
-                      text: { fontSize: 12 },
-                      checkbox: { width: 12, height: 12 },
-                      label: { padding: 0, alignItems: "center" },
-                    }}
-                    onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
-                      this.setState({ useHashV2: isChecked })
-                    }
-                  />
-                )}
               </Stack>
             </CollapsibleSectionComponent>
           )}
@@ -811,19 +815,6 @@ 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

@@ -5,7 +5,6 @@ import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils
 import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
 import { useSidePanel } from "../../../hooks/useSidePanel";
 import { IPinnedRepo, JunoClient } from "../../../Juno/JunoClient";
-import { userContext } from "../../../UserContext";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
@@ -76,8 +75,6 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
           selectedLocation.owner,
           selectedLocation.repo
         )} - ${selectedLocation.branch}`;
-      } else if (selectedLocation.type === "MyNotebooks" && userContext.features.phoenix) {
-        destination = "My Notebooks Scratch";
       }
 
       clearMessage = NotificationConsoleUtils.logConsoleProgress(`Copying ${name} to ${destination}`);
@@ -101,7 +98,6 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
 
   const copyNotebook = async (location: Location): Promise<NotebookContentItem> => {
     let parent: NotebookContentItem;
-    let isGithubTree: boolean;
     switch (location.type) {
       case "MyNotebooks":
         parent = {
@@ -109,23 +105,21 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
           path: useNotebook.getState().notebookBasePath,
           type: NotebookContentItemType.Directory,
         };
-        isGithubTree = false;
         break;
 
       case "GitHub":
         parent = {
-          name: selectedLocation.branch,
+          name: ResourceTreeAdapter.GitHubReposTitle,
           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, isGithubTree);
+    return container.uploadFile(name, content, parent);
   };
 
   const onDropDownChange = (_: FormEvent<HTMLDivElement>, option?: IDropdownOption): void => {

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx

@@ -12,7 +12,6 @@ import {
 import React, { FormEvent, FunctionComponent } from "react";
 import { IPinnedRepo } from "../../../Juno/JunoClient";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
-import { useNotebook } from "../../Notebook/useNotebook";
 import { ResourceTreeAdapter } from "../../Tree/ResourceTreeAdapter";
 
 interface Location {
@@ -47,10 +46,11 @@ export const CopyNotebookPaneComponent: FunctionComponent<CopyNotebookPaneProps>
 
   const getDropDownOptions = (): IDropdownOption[] => {
     const options: IDropdownOption[] = [];
+
     options.push({
       key: "MyNotebooks-Item",
-      text: useNotebook.getState().NotebookFolderName,
+      text: ResourceTreeAdapter.MyNotebooksTitle,
-      title: useNotebook.getState().NotebookFolderName,
+      title: ResourceTreeAdapter.MyNotebooksTitle,
       data: {
         type: "MyNotebooks",
       } as Location,

src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap

@@ -23,7 +23,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
             "isTabsContentExpanded": [Function],
             "onRefreshDatabasesKeyPress": [Function],
             "onRefreshResourcesClick": [Function],
-            "phoenixClient": PhoenixClient {},
             "provideFeedbackEmail": [Function],
             "queriesClient": QueriesClient {
               "container": [Circular],

src/Explorer/Panes/PublishNotebookPane/PublishNotebookPane.tsx

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

src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap

@@ -13,7 +13,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       "isTabsContentExpanded": [Function],
       "onRefreshDatabasesKeyPress": [Function],
       "onRefreshResourcesClick": [Function],
-      "phoenixClient": PhoenixClient {},
       "provideFeedbackEmail": [Function],
       "queriesClient": QueriesClient {
         "container": [Circular],

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

@@ -14,7 +14,7 @@ import * as Entities from "../../Tables/Entities";
 import { CassandraAPIDataClient, CassandraTableKey, TableDataClient } from "../../Tables/TableDataClient";
 import * as TableEntityProcessor from "../../Tables/TableEntityProcessor";
 import * as Utilities from "../../Tables/Utilities";
-import QueryTablesTab from "../../Tabs/QueryTablesTab";
+import { NewQueryTablesTab } from "../../Tabs/QueryTablesTab/NewQueryTablesTab";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 import {
   attributeNameLabel,
@@ -36,7 +36,7 @@ import {
 
 interface AddTableEntityPanelProps {
   tableDataClient: TableDataClient;
-  queryTablesTab: QueryTablesTab;
+  queryTablesTab: NewQueryTablesTab;
   tableEntityListViewModel: TableEntityListViewModel;
   cassandraApiClient: CassandraAPIDataClient;
 }

src/Explorer/Panes/Tables/EditTableEntityPanel.tsx

@@ -13,7 +13,7 @@ import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListView
 import * as Entities from "../../Tables/Entities";
 import { CassandraAPIDataClient, TableDataClient } from "../../Tables/TableDataClient";
 import * as TableEntityProcessor from "../../Tables/TableEntityProcessor";
-import QueryTablesTab from "../../Tabs/QueryTablesTab";
+import { NewQueryTablesTab } from "../../Tabs/QueryTablesTab/NewQueryTablesTab";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 import {
   attributeNameLabel,
@@ -34,7 +34,7 @@ import {
 
 interface EditTableEntityPanelProps {
   tableDataClient: TableDataClient;
-  queryTablesTab: QueryTablesTab;
+  queryTablesTab: NewQueryTablesTab;
   tableEntityListViewModel: TableEntityListViewModel;
   cassandraApiClient: CassandraAPIDataClient;
 }

src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx

@@ -91,7 +91,9 @@ 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 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."
+          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."
         />
         {uploadFileData?.length > 0 && (
           <div className="fileUploadSummaryContainer">

src/Explorer/SplashScreen/SplashScreen.tsx

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

src/Explorer/Tables/DataTable/DataTableBuilder.ts

@@ -19,7 +19,7 @@ export function createDataTable($dataTableElem: JQuery, settings: any): DataTabl
  * @return The given settings with all columns having a rendering function
  */
 function applyDefaultRendering(settings: any): DataTables.SettingsLegacy {
-  let tableColumns: DataTables.ColumnLegacy[] = null;
+  var tableColumns: DataTables.ColumnLegacy[] = null;
 
   if (settings.aoColumns) {
     tableColumns = settings.aoColumns;
@@ -34,7 +34,7 @@ function applyDefaultRendering(settings: any): DataTables.SettingsLegacy {
     return settings;
   }
 
-  for (let i = 0; i < tableColumns.length; i++) {
+  for (var i = 0; i < tableColumns.length; i++) {
     // the column does not have a render function
     if (!tableColumns[i].mRender) {
       tableColumns[i].mRender = defaultDataRender;

src/Explorer/Tables/DataTable/DataTableViewModel.ts

@@ -1,14 +1,14 @@
+import { ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import * as ko from "knockout";
 import * as _ from "underscore";
-
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
-import CacheBase from "./CacheBase";
 import * as CommonConstants from "../../../Common/Constants";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import { NewQueryTablesTab } from "../../Tabs/QueryTablesTab/NewQueryTablesTab";
 import * as Constants from "../Constants";
 import * as Entities from "../Entities";
-import QueryTablesTab from "../../Tabs/QueryTablesTab";
+import CacheBase from "./CacheBase";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+
-import { QueryIterator, ItemDefinition, Resource } from "@azure/cosmos";
 
 // This is the format of the data we will have to pass to Datatable render callback,
 // and property names are defined by Datatable as well.
@@ -49,7 +49,7 @@ abstract class DataTableViewModel {
 
   private dataTableOperationManager: IDataTableOperation;
 
-  public queryTablesTab: QueryTablesTab;
+  public queryTablesTab: NewQueryTablesTab;
 
   constructor() {
     this.items([]);

src/Explorer/Tables/DataTable/TableCommands.ts

@@ -1,6 +1,5 @@
 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";
@@ -70,16 +69,11 @@ export default class TableCommands {
       return null; // Error
     }
     var entitiesToDelete: Entities.ITableEntity[] = viewModel.selected();
-    const deleteMessage: string =
+    let deleteMessage: string = "Are you sure you want to delete the selected entities?";
-      userContext.apiType === "Cassandra"
+    if (userContext.apiType === "Cassandra") {
-        ? "Are you sure you want to delete the selected rows?"
+      deleteMessage = "Are you sure you want to delete the selected rows?";
-        : "Are you sure you want to delete the selected entities?";
+    }
-
+    if (window.confirm(deleteMessage)) {
-    useDialog.getState().showOkCancelModalDialog(
-      "Confirm delete",
-      deleteMessage,
-      "Delete",
-      () => {
       viewModel.queryTablesTab.container.tableDataClient
         .deleteDocuments(viewModel.queryTablesTab.collection, entitiesToDelete)
         .then((results: any) => {
@@ -87,11 +81,7 @@ export default class TableCommands {
             viewModel.redrawTableThrottled();
           });
         });
-      },
+    }
-      "Cancel",
-      undefined
-    );
-
     return null;
   }
 

src/Explorer/Tables/DataTable/TableEntityListViewModel.ts

@@ -7,6 +7,7 @@ import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../../UserContext";
 import QueryTablesTab from "../../Tabs/QueryTablesTab";
+import { NewQueryTablesTab } from "../../Tabs/QueryTablesTab/NewQueryTablesTab";
 import * as Constants from "../Constants";
 import { getQuotedCqlIdentifier } from "../CqlUtilities";
 import * as Entities from "../Entities";
@@ -112,7 +113,7 @@ export default class TableEntityListViewModel extends DataTableViewModel {
   public queryErrorMessage: ko.Observable<string>;
   public id: string;
 
-  constructor(tableCommands: TableCommands, queryTablesTab: QueryTablesTab) {
+  constructor(tableCommands: TableCommands, queryTablesTab: NewQueryTablesTab) {
     super();
     this.cache = new TableEntityCache();
     this.queryErrorMessage = ko.observable<string>();

src/Explorer/Tables/QueryBuilder/QueryViewModel.tsx

@@ -5,7 +5,7 @@ import { KeyCodes } from "../../../Common/Constants";
 import { useSidePanel } from "../../../hooks/useSidePanel";
 import { userContext } from "../../../UserContext";
 import { TableQuerySelectPanel } from "../../Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel";
-import QueryTablesTab from "../../Tabs/QueryTablesTab";
+import { NewQueryTablesTab } from "../../Tabs/QueryTablesTab/NewQueryTablesTab";
 import { getQuotedCqlIdentifier } from "../CqlUtilities";
 import * as DataTableUtilities from "../DataTable/DataTableUtilities";
 import TableEntityListViewModel from "../DataTable/TableEntityListViewModel";
@@ -39,14 +39,14 @@ export default class QueryViewModel {
 
   public columnOptions: ko.ObservableArray<string>;
 
-  public queryTablesTab: QueryTablesTab;
+  public queryTablesTab: NewQueryTablesTab;
   public id: string;
   private _tableEntityListViewModel: TableEntityListViewModel;
 
-  constructor(queryTablesTab: QueryTablesTab) {
+  constructor(queryTablesTab: NewQueryTablesTab) {
     this.queryTablesTab = queryTablesTab;
     this.id = `queryViewModel${this.queryTablesTab.tabId}`;
-    this._tableEntityListViewModel = queryTablesTab.tableEntityListViewModel();
+    this._tableEntityListViewModel = queryTablesTab.tableEntityListViewModel;
 
     this.queryTextIsReadOnly = ko.computed<boolean>(() => {
       return userContext.apiType !== "Cassandra";

src/Explorer/Tabs/ConflictsTab.ts

@@ -21,7 +21,6 @@ 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";
@@ -229,7 +228,7 @@ export default class ConflictsTab extends TabsBase {
       this._documentsIterator = this.createIterator();
       await this.loadNextPage();
     } catch (error) {
-      useDialog.getState().showOkModalDialog("Refresh documents grid failed", getErrorMessage(error));
+      window.alert(getErrorMessage(error));
     }
   }
 
@@ -253,23 +252,10 @@ export default class ConflictsTab extends TabsBase {
   }
 
   public onAcceptChangesClick = async (): Promise<void> => {
-    if (this.isEditorDirty()) {
+    if (this.isEditorDirty() && !this._isIgnoreDirtyEditor()) {
-      useDialog
+      return;
-        .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);
 
@@ -332,7 +318,7 @@ export default class ConflictsTab extends TabsBase {
     } catch (error) {
       this.isExecutionError(true);
       const errorMessage = getErrorMessage(error);
-      useDialog.getState().showOkModalDialog("Resolve conflict failed", errorMessage);
+      window.alert(errorMessage);
       TelemetryProcessor.traceFailure(
         Action.ResolveConflict,
         {
@@ -386,7 +372,7 @@ export default class ConflictsTab extends TabsBase {
     } catch (error) {
       this.isExecutionError(true);
       const errorMessage = getErrorMessage(error);
-      useDialog.getState().showOkModalDialog("Delete conflict failed", errorMessage);
+      window.alert(errorMessage);
       TelemetryProcessor.traceFailure(
         Action.DeleteConflict,
         {
@@ -676,6 +662,11 @@ 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/DocumentsTab.ts

@@ -25,7 +25,6 @@ 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";
@@ -379,7 +378,7 @@ export default class DocumentsTab extends TabsBase {
       this.isFilterExpanded(false);
       document.getElementById("errorStatusIcon")?.focus();
     } catch (error) {
-      useDialog.getState().showOkModalDialog("Refresh documents grid failed", getErrorMessage(error));
+      window.alert(getErrorMessage(error));
     }
   }
 
@@ -402,29 +401,18 @@ export default class DocumentsTab extends TabsBase {
     return Q();
   }
 
-  public onNewDocumentClick = (): void => {
+  public onNewDocumentClick = (): Q.Promise<any> => {
-    if (this.isEditorDirty()) {
+    if (this.isEditorDirty() && !this._isIgnoreDirtyEditor()) {
-      useDialog
+      return Q();
-        .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);
+
+    return Q();
   };
 
   public onSaveNewDocumentClick = (): Promise<any> => {
@@ -465,7 +453,7 @@ export default class DocumentsTab extends TabsBase {
         (error) => {
           this.isExecutionError(true);
           const errorMessage = getErrorMessage(error);
-          useDialog.getState().showOkModalDialog("Create document failed", errorMessage);
+          window.alert(errorMessage);
           TelemetryProcessor.traceFailure(
             Action.CreateDocument,
             {
@@ -528,7 +516,7 @@ export default class DocumentsTab extends TabsBase {
         (error) => {
           this.isExecutionError(true);
           const errorMessage = getErrorMessage(error);
-          useDialog.getState().showOkModalDialog("Update document failed", errorMessage);
+          window.alert(errorMessage);
           TelemetryProcessor.traceFailure(
             Action.UpdateDocument,
             {
@@ -558,16 +546,9 @@ export default class DocumentsTab extends TabsBase {
       ? "Are you sure you want to delete the selected item ?"
       : "Are you sure you want to delete the selected document ?";
 
-    useDialog
+    if (window.confirm(msg)) {
-      .getState()
+      await this._deleteDocument(selectedDocumentId);
-      .showOkCancelModalDialog(
+    }
-        "Confirm delete",
-        msg,
-        "Delete",
-        async () => await this._deleteDocument(selectedDocumentId),
-        "Cancel",
-        undefined
-      );
   };
 
   public onValidDocumentEdit(): Q.Promise<any> {
@@ -636,6 +617,11 @@ export default class DocumentsTab extends TabsBase {
     }
   }
 
+  private _isIgnoreDirtyEditor = (): boolean => {
+    var msg: string = "Changes will be lost. Do you want to continue?";
+    return window.confirm(msg);
+  };
+
   protected __deleteDocument(documentId: DocumentId): Promise<void> {
     return deleteDocument(this.collection, documentId);
   }

src/Explorer/Tabs/MongoDocumentsTab.ts

@@ -16,7 +16,6 @@ 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";
@@ -112,7 +111,7 @@ export default class MongoDocumentsTab extends DocumentsTab {
         (error) => {
           this.isExecutionError(true);
           const errorMessage = getErrorMessage(error);
-          useDialog.getState().showOkModalDialog("Create document failed", errorMessage);
+          window.alert(errorMessage);
           TelemetryProcessor.traceFailure(
             Action.CreateDocument,
             {
@@ -170,7 +169,7 @@ export default class MongoDocumentsTab extends DocumentsTab {
         (error) => {
           this.isExecutionError(true);
           const errorMessage = getErrorMessage(error);
-          useDialog.getState().showOkModalDialog("Update document failed", errorMessage);
+          window.alert(errorMessage);
           TelemetryProcessor.traceFailure(
             Action.UpdateDocument,
             {

src/Explorer/Tabs/NotebookV2Tab.ts

@@ -17,14 +17,12 @@ 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";
 
@@ -61,9 +59,7 @@ export default class NotebookTabV2 extends NotebookTabBase {
     };
 
     if (this.notebookComponentAdapter.isContentDirty()) {
-      useDialog
+      this.container.showOkCancelModalDialog(
-        .getState()
-        .showOkCancelModalDialog(
         "Close without saving?",
         `File has unsaved changes, close without saving?`,
         "Close",
@@ -88,13 +84,11 @@ 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";
@@ -111,6 +105,8 @@ 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";
@@ -191,10 +187,9 @@ export default class NotebookTabV2 extends NotebookTabBase {
           this.traceTelemetry(Action.ExecuteCell);
         },
         commandButtonLabel: runLabel,
-        tooltipText: runBtnTooltip,
         ariaLabel: runLabel,
         hasPopup: false,
-        disabled: isNotebookUntrusted,
+        disabled: false,
         children: [
           {
             iconSrc: RunIcon,

src/Explorer/Tabs/QueryTablesTab/NewQueryTablesTab.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import * as DataModels from "../../../Contracts/DataModels";
+import type { TabOptions } from "../../../Contracts/ViewModels";
+import { useTabs } from "../../../hooks/useTabs";
+import Explorer from "../../Explorer";
+import TableCommands from "../../Tables/DataTable/TableCommands";
+import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel";
+import TabsBase from "../TabsBase";
+import {
+  IQueryTablesTabAccessor,
+  IQueryTablesTabComponentProps,
+  QueryTablesTabComponent,
+} from "./QueryTablesTabComponent";
+
+export interface IQueryTablesTabProps {
+  container: Explorer;
+}
+
+export class NewQueryTablesTab extends TabsBase {
+  public queryText: string;
+  public currentQuery: string;
+  public partitionKey: DataModels.PartitionKey;
+  public iQueryTablesTabComponentProps: IQueryTablesTabComponentProps;
+  public tableEntityListViewModel: TableEntityListViewModel;
+  public tableCommands: TableCommands;
+  public iQueryTablesTabAccessor: IQueryTablesTabAccessor;
+
+  constructor(options: TabOptions, private props: IQueryTablesTabProps) {
+    super(options);
+    this.tableCommands = new TableCommands(props.container);
+    this.tableEntityListViewModel = new TableEntityListViewModel(this.tableCommands, this);
+    this.iQueryTablesTabComponentProps = {
+      collection: this.collection,
+      tabId: this.tabId,
+      tabsBaseInstance: this,
+      queryTablesTab: this,
+      container: this.props.container,
+      onQueryTablesTabAccessor: (instance: IQueryTablesTabAccessor) => {
+        this.iQueryTablesTabAccessor = instance;
+      },
+    };
+  }
+
+  public render(): JSX.Element {
+    return <QueryTablesTabComponent {...this.iQueryTablesTabComponentProps} />;
+  }
+
+  public onTabClick(): void {
+    useTabs.getState().activateTab(this);
+    this.iQueryTablesTabAccessor.onTabClickEvent();
+  }
+}

src/Explorer/Tabs/QueryTablesTab/QueryTablesTabComponent.tsx

@@ -0,0 +1,619 @@
+import React from "react";
+import AddEntityIcon from "../../../../images/AddEntity.svg";
+import DeleteEntitiesIcon from "../../../../images/DeleteEntities.svg";
+import EditEntityIcon from "../../../../images/Edit-entity.svg";
+import ExecuteQueryIcon from "../../../../images/ExecuteQuery.svg";
+import QueryBuilderIcon from "../../../../images/Query-Builder.svg";
+import QueryTextIcon from "../../../../images/Query-Text.svg";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { useSidePanel } from "../../../hooks/useSidePanel";
+import { userContext } from "../../../UserContext";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import Explorer from "../../Explorer";
+import { AddTableEntityPanel } from "../../Panes/Tables/AddTableEntityPanel";
+import { EditTableEntityPanel } from "../../Panes/Tables/EditTableEntityPanel";
+import TableCommands from "../../Tables/DataTable/TableCommands";
+import TableEntityListViewModel from "../../Tables/DataTable/TableEntityListViewModel";
+import QueryViewModel from "../../Tables/QueryBuilder/QueryViewModel";
+import { CassandraAPIDataClient, TableDataClient } from "../../Tables/TableDataClient";
+import TabsBase from "../TabsBase";
+import { NewQueryTablesTab } from "./NewQueryTablesTab";
+
+export interface IQueryTablesTabAccessor {
+  onTabClickEvent: () => void;
+}
+
+export interface Button {
+  visible: boolean;
+  enabled: boolean;
+  isSelected?: boolean;
+}
+
+export interface IQueryTablesTabComponentStates {
+  queryViewModel: QueryViewModel;
+  queryText: string;
+  selectedQueryText: string;
+  executeQueryButton: Button;
+  queryBuilderButton: Button;
+  queryTextButton: Button;
+  addEntityButton: Button;
+  editEntityButton: Button;
+  deleteEntityButton: Button;
+}
+
+export interface IQueryTablesTabComponentProps {
+  collection: ViewModels.CollectionBase;
+  tabsBaseInstance: TabsBase;
+  tabId: string;
+  queryTablesTab: NewQueryTablesTab;
+  container: Explorer;
+  onQueryTablesTabAccessor: (instance: IQueryTablesTabAccessor) => void;
+}
+
+export class QueryTablesTabComponent extends React.Component<
+  IQueryTablesTabComponentProps,
+  IQueryTablesTabComponentStates
+> {
+  public collection: ViewModels.Collection;
+  public tableEntityListViewModel: TableEntityListViewModel;
+  public tableCommands: TableCommands;
+  public tableDataClient: TableDataClient;
+  public container: Explorer;
+  public queryViewModel: QueryViewModel;
+
+  constructor(props: IQueryTablesTabComponentProps) {
+    super(props);
+    this.container = props.collection && props.collection.container;
+    this.tableCommands = new TableCommands(this.container);
+    this.tableDataClient = this.container.tableDataClient;
+    this.tableEntityListViewModel = new TableEntityListViewModel(this.tableCommands, props.queryTablesTab);
+    this.tableEntityListViewModel.queryTablesTab = props.queryTablesTab;
+    this.queryViewModel = new QueryViewModel(props.queryTablesTab);
+    this.state = {
+      queryViewModel: this.queryViewModel,
+      queryText: "PartitionKey eq 'partitionKey1'",
+      selectedQueryText: "",
+      executeQueryButton: {
+        enabled: true,
+        visible: true,
+      },
+      queryBuilderButton: {
+        enabled: true,
+        visible: true,
+        isSelected: this.queryViewModel ? this.queryViewModel.isHelperActive() : false,
+      },
+      queryTextButton: {
+        enabled: true,
+        visible: true,
+        isSelected: this.queryViewModel ? this.queryViewModel.isEditorActive() : false,
+      },
+      addEntityButton: {
+        enabled: true,
+        visible: true,
+      },
+      editEntityButton: {
+        enabled: this.tableCommands.isEnabled(
+          TableCommands.editEntityCommand,
+          this.tableEntityListViewModel.selected()
+        ),
+        visible: true,
+      },
+      deleteEntityButton: {
+        enabled: this.tableCommands.isEnabled(
+          TableCommands.deleteEntitiesCommand,
+          this.tableEntityListViewModel.selected()
+        ),
+        visible: true,
+      },
+    };
+    if (this.tableEntityListViewModel.items().length > 0 && userContext.apiType === "Tables") {
+      const sampleQuerySubscription = this.state.queryViewModel.queryBuilderViewModel().setExample();
+    }
+  }
+  public onExecuteQueryClick(): void {
+    this.state.queryViewModel.runQuery();
+  }
+
+  public onQueryBuilderClick(): void {
+    this.state.queryViewModel.selectHelper();
+  }
+
+  public onQueryTextClick(): void {
+    this.state.queryViewModel.selectEditor();
+  }
+
+  public onAddEntityClick(): void {
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Add Table Row",
+        <AddTableEntityPanel
+          tableDataClient={this.tableDataClient}
+          queryTablesTab={this.props.queryTablesTab}
+          tableEntityListViewModel={this.tableEntityListViewModel}
+          cassandraApiClient={new CassandraAPIDataClient()}
+        />,
+        "700px"
+      );
+  }
+
+  public onEditEntityClick(): void {
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Edit Table Entity",
+        <EditTableEntityPanel
+          tableDataClient={this.tableDataClient}
+          queryTablesTab={this.props.queryTablesTab}
+          tableEntityListViewModel={this.tableEntityListViewModel}
+          cassandraApiClient={new CassandraAPIDataClient()}
+        />
+      );
+  }
+
+  public onDeleteEntityClick(): void {
+    this.tableCommands.deleteEntitiesCommand(this.tableEntityListViewModel);
+  }
+
+  public onActivate(): void {
+    const columns =
+      !!this.tableEntityListViewModel &&
+      !!this.tableEntityListViewModel.table &&
+      this.tableEntityListViewModel.table.columns;
+    if (!!columns) {
+      columns.adjust();
+      $(window).resize();
+    }
+  }
+
+  public getTabsButtons(): CommandButtonComponentProps[] {
+    const buttons: CommandButtonComponentProps[] = [];
+    if (this.state.queryBuilderButton.visible) {
+      const label = userContext.apiType === "Cassandra" ? "CQL Query Builder" : "Query Builder";
+      buttons.push({
+        iconSrc: QueryBuilderIcon,
+        iconAlt: label,
+        onCommandClick: this.onQueryBuilderClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: false,
+        disabled: !this.state.queryBuilderButton.enabled,
+        isSelected: this.state.queryBuilderButton.isSelected,
+      });
+    }
+
+    if (this.state.queryTextButton.visible) {
+      const label = userContext.apiType === "Cassandra" ? "CQL Query Text" : "Query Text";
+      buttons.push({
+        iconSrc: QueryTextIcon,
+        iconAlt: label,
+        onCommandClick: this.onQueryTextClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: false,
+        disabled: !this.state.queryTextButton.enabled,
+        isSelected: this.state.queryTextButton.isSelected,
+      });
+    }
+
+    if (this.state.executeQueryButton.visible) {
+      const label = "Run Query";
+      buttons.push({
+        iconSrc: ExecuteQueryIcon,
+        iconAlt: label,
+        onCommandClick: this.onExecuteQueryClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: false,
+        disabled: !this.state.executeQueryButton.enabled,
+      });
+    }
+
+    if (this.state.addEntityButton.visible) {
+      const label = userContext.apiType === "Cassandra" ? "Add Row" : "Add Entity";
+      buttons.push({
+        iconSrc: AddEntityIcon,
+        iconAlt: label,
+        onCommandClick: this.onAddEntityClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: true,
+        disabled: !this.state.addEntityButton.enabled,
+      });
+    }
+
+    if (this.state.editEntityButton.visible) {
+      const label = userContext.apiType === "Cassandra" ? "Edit Row" : "Edit Entity";
+      buttons.push({
+        iconSrc: EditEntityIcon,
+        iconAlt: label,
+        onCommandClick: this.onEditEntityClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: true,
+        disabled: !this.state.editEntityButton.enabled,
+      });
+    }
+
+    if (this.state.deleteEntityButton.visible) {
+      const label = userContext.apiType === "Cassandra" ? "Delete Rows" : "Delete Entities";
+      buttons.push({
+        iconSrc: DeleteEntitiesIcon,
+        iconAlt: label,
+        onCommandClick: this.onDeleteEntityClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: true,
+        disabled: !this.state.deleteEntityButton.enabled,
+      });
+    }
+    return buttons;
+  }
+
+  public render(): JSX.Element {
+    const { tabId } = this.props;
+    const { queryViewModel, queryText } = this.state;
+    const {
+      isEditorActive,
+      isHelperActive,
+      hasQueryError,
+      queryErrorMessage,
+      queryBuilderViewModel,
+      toggleAdvancedOptions,
+      ontoggleAdvancedOptionsKeyDown,
+    } = queryViewModel;
+    const {
+      canGroupClauses,
+      andLabel,
+      actionLabel,
+      groupClauses,
+      groupSelectedClauses,
+      fieldLabel,
+      dataTypeLabel,
+      operatorLabel,
+      valueLabel,
+      clauseArray,
+      columnOptions,
+      clauseRules,
+      operators,
+      insertNewFilterLine,
+      onAddClauseKeyDown,
+      addClauseIndex,
+      removeThisFilterLine,
+      onDeleteClauseKeyDown,
+      deleteClause,
+      getClauseGroupViewModels,
+      updateColumnOptions,
+      edmTypes,
+      addNewClause,
+      addNewClauseLine,
+    } = queryBuilderViewModel();
+    console.log("queryBuilderViewModel()", queryBuilderViewModel());
+    console.log("clauseArray()", clauseArray());
+    console.log("clauseRules()", clauseRules());
+    console.log("columnOptions()", columnOptions());
+    console.log("operators()", operators());
+    return (
+      <div className="tab-pane tableContainer" id={tabId} role="tabpanel">
+        <div className="query-builder" id={queryViewModel.id}>
+          <div className="error-bar">
+            {hasQueryError && (
+              <div className="error-message" aria-label="Error Message">
+                <span>
+                  <img className="entity-error-Img" src="/error_red.svg" />
+                </span>
+                <span className="error-text" role="alert">
+                  {queryErrorMessage}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {isEditorActive() && (
+            <div className="query-editor-panel">
+              <div>
+                <textarea
+                  className="query-editor-text"
+                  data-bind="
+                          css: { 'query-editor-text-invalid': hasQueryError },
+                          readOnly: true"
+                  name="query-editor"
+                  rows={5}
+                  cols={100}
+                >
+                  {queryText}
+                </textarea>
+              </div>
+            </div>
+          )}
+          {isHelperActive && (
+            <div style={{ paddingLeft: "13px" }}>
+              <div className="clause-table" data-bind="with: queryBuilderViewModel ">
+                <div className="scroll-box scrollable" id="scroll">
+                  <table className="clause-table">
+                    <thead>
+                      <tr className="clause-table-row">
+                        <th className="clause-table-cell header-background action-header">
+                          <span>{actionLabel}</span>
+                        </th>
+                        <th className="clause-table-cell header-background group-control-header">
+                          {canGroupClauses && (
+                            <button type="button" onClick={groupClauses} title={groupSelectedClauses}>
+                              <img className="and-or-svg" src="/And-Or.svg" alt="Group selected clauses" />
+                            </button>
+                          )}
+                        </th>
+                        <th className="clause-table-cell header-background"></th>
+                        <th className="clause-table-cell header-background and-or-header">
+                          <span>{andLabel}</span>
+                        </th>
+                        <th className="clause-table-cell header-background field-header">
+                          <span>{fieldLabel}</span>
+                        </th>
+                        <th className="clause-table-cell header-background type-header">
+                          <span>{dataTypeLabel}</span>
+                        </th>
+                        <th className="clause-table-cell header-background operator-header">
+                          <span>{operatorLabel}</span>
+                        </th>
+                        <th className="clause-table-cell header-background value-header">
+                          <span>{valueLabel}</span>
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {clauseArray().map((data, index) => (
+                        <tr className="clause-table-row">
+                          <td className="clause-table-cell action-column">
+                            <span
+                              className="entity-Add-Cancel"
+                              role="button"
+                              tabIndex={0}
+                              onClick={addClauseIndex.bind(data, index)}
+                              onKeyDown={onAddClauseKeyDown.bind(data, index)}
+                              title={insertNewFilterLine}
+                            >
+                              <img className="querybuilder-addpropertyImg" src="/Add-property.svg" alt="Add clause" />
+                            </span>
+                            <span
+                              className="entity-Add-Cancel"
+                              role="button"
+                              tabIndex={0}
+                              data-bind="hasFocus: isDeleteButtonFocused"
+                              onClick={deleteClause.bind(data, index)}
+                              onKeyDown={onDeleteClauseKeyDown.bind(data, index)}
+                              title={removeThisFilterLine}
+                            >
+                              <img className="querybuilder-cancelImg" src="/Entity_cancel.svg" alt="Delete clause" />
+                            </span>
+                          </td>
+                          {/* <td className="clause-table-cell group-control-column">
+                            <input type="checkbox" aria-label="And/Or" checked={checkedForGrouping} />
+                          </td> */}
+                          {/* <td>
+                            <table className="group-indicator-table">
+                              <tbody>
+                                <tr>
+                                  {getClauseGroupViewModels(data).map((gi, index) => (
+                                    <td
+                                      className="group-indicator-column"
+                                      style={{
+                                        backgroundColor: gi.backgroundColor,
+                                        borderTop: gi.showTopBorder.peek() ? "solid thin #CCCCCC" : "none",
+                                        borderLeft: gi.showLeftBorder.peek() ? "solid thin #CCCCCC" : "none",
+                                        borderBottom: gi.showBottomBorder.peek()
+                                          ? "solid thin #CCCCCC"
+                                          : gi.borderBackgroundColor,
+                                      }}
+                                    >
+                                      {gi.canUngroup && (
+                                        <button type="button" onClick={} title={ungroupClausesLabel}>
+                                          <img src="/QueryBuilder/UngroupClause_16x.png" alt="Ungroup clauses" />
+                                        </button>
+                                      )}
+                                    </td>
+                                  ))}
+                                </tr>
+                              </tbody>
+                            </table>
+                          </td>
+                          <td className="clause-table-cell and-or-column">
+                            {canAnd && (
+                              <select
+                                className="clause-table-field and-or-column"
+                                data-bind=" value: and_or, "
+                                autoFocus={isAndOrFocused}
+                                aria-label=" and_or "
+                              >
+                                {clauseRules().map((data, index) => (
+                                  <option value={data}>{data}</option>
+                                ))}
+                              </select>
+                            )}
+                          </td>
+                          <td className="clause-table-cell field-column" onClick={updateColumnOptions}>
+                            <select
+                              aria-label={field}
+                              className="clause-table-field field-column"
+                              data-bind=" value: field"
+                            >
+                              {columnOptions().map((data, index) => (
+                                <option value={data}>{data}</option>
+                              ))}
+                            </select>
+                          </td>
+                          <td className="clause-table-cell type-column">
+                            {isTypeEditable && (
+                              <select
+                                className="clause-table-field type-column"
+                                aria-label={type}
+                                value={type}
+                                data-bind="css: {'query-builder-isDisabled': !isTypeEditable()}"
+                              >
+                                {edmTypes.map((data) => (
+                                  <option>{parent.edmTypes} </option>
+                                ))}
+                              </select>
+                            )}
+                          </td>
+                          <td className="clause-table-cell operator-column">
+                            {isOperaterEditable && (
+                              <select
+                                className="clause-table-field operator-column"
+                                aria-label={operator}
+                                data-bind="
+                            value: operator,
+                            css: {'query-builder-isDisabled': !isOperaterEditable()}"
+                              >
+                                {operators().map((data, index) => (
+                                  <option key={index}>{data}</option>
+                                ))}
+                              </select>
+                            )}
+                          </td>
+                          <td className="clause-table-cell value-column">
+                            {isValue && (
+                              <input
+                                type="text"
+                                className="clause-table-field value-column"
+                                type="search"
+                                data-bind="textInput: value"
+                                aria-label={valueLabel}
+                              />
+                            )}
+
+                            {isTimestamp && (
+                              <select
+                                className="clause-table-field time-column"
+                                data-bind="options: $parent.timeOptions, value: timeValue"
+                              ></select>
+                            )}
+
+                            {isCustomLastTimestamp && (
+                              <input
+                                className="clause-table-field time-column"
+                                value={customTimeValue}
+                                onClick={customTimestampDialog}
+                              />
+                            )}
+                            {isCustomRangeTimestamp && (
+                              <input
+                                className="clause-table-field time-column"
+                                type="datetime-local"
+                                step="1"
+                                value={customTimeValue}
+                              />
+                            )}
+                          </td>
+                         */}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+                <div
+                  className="addClause"
+                  role="button"
+                  onClick={addNewClause}
+                  data-bind="event: { keydown: onAddNewClauseKeyDown }"
+                  title={addNewClauseLine}
+                  tabIndex={0}
+                >
+                  <div className="addClause-heading">
+                    <span className="clause-table addClause-title">
+                      <img
+                        className="addclauseProperty-Img"
+                        style={{ marginBottom: "5px" }}
+                        src="/Add-property.svg"
+                        alt="Add new clause"
+                      />
+                      <span style={{ marginLeft: "5px" }}>{addNewClauseLine}</span>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          <div className="advanced-options-panel">
+            {/* <div className="advanced-heading">
+              <span
+                className="advanced-title"
+                role="button"
+                onClick={toggleAdvancedOptions}
+                onKeyDown={ontoggleAdvancedOptionsKeyDown}
+                aria-expanded={isExpanded() ? "true" : "false"}
+                tabIndex={0}
+              >
+                <div
+                  className="themed-images"
+                  type="text/html"
+                  id="ExpandChevronRight"
+                  data-bind="hasFocus: focusExpandIcon"
+                >
+                  <img
+                    className="imgiconwidth expand-triangle expand-triangle-right"
+                    src="/Triangle-right.svg"
+                    alt="toggle"
+                  />
+                </div>
+                <div className="themed-images" type="text/html" id="ExpandChevronDown">
+                  <img className="imgiconwidth expand-triangle" src="/Triangle-down.svg" alt="toggle" />
+                </div>
+                <span>Advanced Options</span>
+              </span>
+            </div>
+             {isExpanded && ( 
+              <div className="advanced-options">
+                <div className="top">
+                  <span>Show top results:</span>
+                  <input
+                    className="top-input"
+                    type="number"
+                    autoFocus={focusTopResult}
+                    value={topValue}
+                    title={topValueLimitMessage}
+                    role="textbox"
+                    aria-label="Show top results"
+                  />
+                  {isExceedingLimit && (
+                    <div role="alert" aria-atomic="true" className="inline-div">
+                      <img className="advanced-options-icon" src="/QueryBuilder/StatusWarning_16x.png" />
+                      <span>{topValueLimitMessage}</span>
+                    </div>
+                  )}
+                </div>
+                <div className="select">
+                  <span> Select fields for query: </span>
+                  {isSelected && (
+                    <div>
+                      <img className="advanced-options-icon" src="/QueryBuilder/QueryInformation_16x.png" />
+                      <span className="select-options-text">{selectMessage}</span>
+                    </div>
+                  )}
+                  <a
+                    className="select-options-link"
+                    onKeyDown={onselectQueryOptionsKeyDown}
+                    onClick={selectQueryOptions}
+                    tabIndex={0}
+                    role="link"
+                  >
+                    <span>Choose Columns... </span>
+                  </a>
+                </div>
+              </div>
+            )} */}
+          </div>
+        </div>
+
+        <div className="tablesQueryTab tableContainer" id={this.tableEntityListViewModel.id}>
+          <table
+            id="storageTable"
+            className="storage azure-table show-gridlines"
+            tabIndex={0}
+            data-bind="tableSource: items, tableSelection: selected"
+          ></table>
+        </div>
+      </div>
+    );
+  }
+}

src/Explorer/Tree/Collection.ts

@@ -32,7 +32,7 @@ import MongoDocumentsTab from "../Tabs/MongoDocumentsTab";
 import { NewMongoQueryTab } from "../Tabs/MongoQueryTab/MongoQueryTab";
 import { NewMongoShellTab } from "../Tabs/MongoShellTab/MongoShellTab";
 import { NewQueryTab } from "../Tabs/QueryTab/QueryTab";
-import QueryTablesTab from "../Tabs/QueryTablesTab";
+import { NewQueryTablesTab } from "../Tabs/QueryTablesTab/NewQueryTablesTab";
 import { CollectionSettingsTabV2 } from "../Tabs/SettingsTabV2";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
@@ -391,13 +391,13 @@ export default class Collection implements ViewModels.Collection {
       });
     }
 
-    const queryTablesTabs: QueryTablesTab[] = useTabs
+    const queryTablesTabs: NewQueryTablesTab[] = useTabs
       .getState()
       .getTabs(
         ViewModels.CollectionTabKind.QueryTables,
         (tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id()
-      ) as QueryTablesTab[];
+      ) as NewQueryTablesTab[];
-    let queryTablesTab: QueryTablesTab = queryTablesTabs && queryTablesTabs[0];
+    let queryTablesTab: NewQueryTablesTab = queryTablesTabs && queryTablesTabs[0];
 
     if (queryTablesTab) {
       useTabs.getState().activateTab(queryTablesTab);
@@ -415,14 +415,14 @@ export default class Collection implements ViewModels.Collection {
         tabTitle: title,
       });
 
-      queryTablesTab = new QueryTablesTab({
+      queryTablesTab = new NewQueryTablesTab({
         tabKind: ViewModels.CollectionTabKind.QueryTables,
         title: title,
         tabPath: "",
         collection: this,
         node: this,
         onLoadStartKey: startKey,
-      });
+      }, { container: this.container });
 
       useTabs.getState().activateNewTab(queryTablesTab);
     }

src/Explorer/Tree/ConflictId.ts

@@ -1,11 +1,12 @@
-import { extractPartitionKey } from "@azure/cosmos";
+import Q from "q";
 import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
-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";
+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";
 
 export default class ConflictId {
   public container: ConflictsTab;
@@ -49,20 +50,13 @@ export default class ConflictId {
   }
 
   public click() {
-    if (this.container.isEditorDirty()) {
+    if (
-      useDialog
+      !this.container.isEditorDirty() ||
-        .getState()
+      window.confirm("Your unsaved changes will be lost. Do you want to continue?")
-        .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,6 +1,5 @@
 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 {
@@ -29,20 +28,10 @@ export default class DocumentId {
   }
 
   public click() {
-    if (this.container.isEditorDirty()) {
+    if (!this.container.isEditorDirty() || window.confirm("Your unsaved changes will be lost.")) {
-      useDialog
-        .getState()
-        .showOkCancelModalDialog(
-          "Unsaved changes",
-          "Your unsaved changes will be lost. Do you want to continue?",
-          "OK",
-          () => this.loadDocument(),
-          "Cancel",
-          undefined
-        );
-    } else {
       this.loadDocument();
     }
+    return;
   }
 
   public partitionKeyHeader(): Object {

src/Explorer/Tree/ResourceTree.tsx

@@ -1,6 +1,5 @@
 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";
@@ -11,7 +10,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, Notebook } from "../../Common/Constants";
+import { Areas } from "../../Common/Constants";
 import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -25,7 +24,6 @@ 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";
@@ -56,16 +54,7 @@ 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";
@@ -121,9 +110,6 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       children: [],
     };
 
-    if (userContext.features.notebooksTemporarilyDown) {
-      notebooksTree.children.push(buildNotebooksTemporarilyDownTree());
-    } else {
     if (galleryContentRoot) {
       notebooksTree.children.push(buildGalleryNotebooksTree());
     }
@@ -131,22 +117,14 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
     if (myNotebooksContentRoot) {
       notebooksTree.children.push(buildMyNotebooksTree());
     }
+
     if (container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
       // collapse all other notebook nodes
       notebooksTree.children.forEach((node) => (node.isExpanded = false));
-        notebooksTree.children.push(buildGitHubNotebooksTree(true));
+      notebooksTree.children.push(buildGitHubNotebooksTree());
-      } else if (container.notebookManager && !container.notebookManager.gitHubOAuthService.isLoggedIn()) {
-        notebooksTree.children.push(buildGitHubNotebooksTree(false));
     }
-    }
-    return notebooksTree;
-  };
 
-  const buildNotebooksTemporarilyDownTree = (): TreeNode => {
+    return notebooksTree;
-    return {
-      label: Notebook.temporarilyDownMsg,
-      className: "clickDisabled",
-    };
   };
 
   const buildGalleryNotebooksTree = (): TreeNode => {
@@ -178,7 +156,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
     return myNotebooksTree;
   };
 
-  const buildGitHubNotebooksTree = (isConnected: boolean): TreeNode => {
+  const buildGitHubNotebooksTree = (): TreeNode => {
     const gitHubNotebooksTree: TreeNode = buildNotebookDirectoryNode(
       gitHubNotebooksContentRoot,
       (item: NotebookContentItem) => {
@@ -187,10 +165,10 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
             mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
           }
         });
-      },
+      }
-      true
     );
-    const manageGitContextMenu: TreeNodeMenuItem[] = [
+
+    gitHubNotebooksTree.contextMenu = [
       {
         label: "Manage GitHub settings",
         onClick: () =>
@@ -215,23 +193,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
         },
       },
     ];
-    const connectGitContextMenu: TreeNodeMenuItem[] = [
+
-      {
-        label: "Connect to GitHub",
-        onClick: () =>
-          useSidePanel
-            .getState()
-            .openSidePanel(
-              "Connect to GitHub",
-              <GitHubReposPanel
-                explorer={container}
-                gitHubClientProp={container.notebookManager.gitHubClient}
-                junoClientProp={container.notebookManager.junoClient}
-              />
-            ),
-      },
-    ];
-    gitHubNotebooksTree.contextMenu = isConnected ? manageGitContextMenu : connectGitContextMenu;
     gitHubNotebooksTree.isExpanded = true;
     gitHubNotebooksTree.isAlphaSorted = true;
 
@@ -239,9 +201,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 [];
@@ -249,8 +211,8 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       return item.children.map((item) => {
         const result =
           item.type === NotebookContentItemType.Directory
-            ? buildNotebookDirectoryNode(item, onFileClick, isGithubTree)
+            ? buildNotebookDirectoryNode(item, onFileClick)
-            : buildNotebookFileNode(item, onFileClick, isGithubTree);
+            : buildNotebookFileNode(item, onFileClick);
         result.timestamp = item.timestamp;
         return result;
       });
@@ -259,8 +221,7 @@ 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,
@@ -277,33 +238,27 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
           (activeTab as any).notebookPath() === item.path
         );
       },
-      contextMenu: createFileContextMenu(container, item, isGithubTree),
+      contextMenu: createFileContextMenu(container, item),
       data: item,
     };
   };
 
-  const createFileContextMenu = (
+  const createFileContextMenu = (container: Explorer, item: NotebookContentItem): TreeNodeMenuItem[] => {
-    container: Explorer,
-    item: NotebookContentItem,
-    isGithubTree?: boolean
-  ): TreeNodeMenuItem[] => {
     let items: TreeNodeMenuItem[] = [
       {
         label: "Rename",
         iconSrc: NotebookIcon,
-        onClick: () => container.renameNotebook(item, isGithubTree),
+        onClick: () => container.renameNotebook(item),
       },
       {
         label: "Delete",
         iconSrc: DeleteIcon,
         onClick: () => {
-          useDialog
+          container.showOkCancelModalDialog(
-            .getState()
-            .showOkCancelModalDialog(
             "Confirm delete",
             `Are you sure you want to delete "${item.name}"`,
             "Delete",
-              () => container.deleteNotebookFile(item, isGithubTree),
+            () => container.deleteNotebookFile(item),
             "Cancel",
             undefined
           );
@@ -353,28 +308,22 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
     }
   };
 
-  const createDirectoryContextMenu = (
+  const createDirectoryContextMenu = (container: Explorer, item: NotebookContentItem): TreeNodeMenuItem[] => {
-    container: Explorer,
-    item: NotebookContentItem,
-    isGithubTree?: boolean
-  ): TreeNodeMenuItem[] => {
     let items: TreeNodeMenuItem[] = [
       {
         label: "Refresh",
         iconSrc: RefreshIcon,
-        onClick: () => loadSubitems(item, isGithubTree),
+        onClick: () => loadSubitems(item),
       },
       {
         label: "Delete",
         iconSrc: DeleteIcon,
         onClick: () => {
-          useDialog
+          container.showOkCancelModalDialog(
-            .getState()
-            .showOkCancelModalDialog(
             "Confirm delete",
             `Are you sure you want to delete "${item.name}?"`,
             "Delete",
-              () => container.deleteNotebookFile(item, isGithubTree),
+            () => container.deleteNotebookFile(item),
             "Cancel",
             undefined
           );
@@ -383,17 +332,17 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       {
         label: "Rename",
         iconSrc: NotebookIcon,
-        onClick: () => container.renameNotebook(item, isGithubTree),
+        onClick: () => container.renameNotebook(item),
       },
       {
         label: "New Directory",
         iconSrc: NewNotebookIcon,
-        onClick: () => container.onCreateDirectory(item, isGithubTree),
+        onClick: () => container.onCreateDirectory(item),
       },
       {
         label: "New Notebook",
         iconSrc: NewNotebookIcon,
-        onClick: () => container.onNewNotebookClicked(item, isGithubTree),
+        onClick: () => container.onNewNotebookClicked(item),
       },
       {
         label: "Upload File",
@@ -418,8 +367,7 @@ 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,
@@ -429,7 +377,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       isLeavesParentsSeparate: true,
       onClick: () => {
         if (!item.children) {
-          loadSubitems(item, isGithubTree);
+          loadSubitems(item);
         }
       },
       isSelected: () => {
@@ -442,9 +390,9 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
           (activeTab as any).notebookPath() === item.path
         );
       },
-      contextMenu: item.path !== pseudoDirPath ? createDirectoryContextMenu(container, item, isGithubTree) : undefined,
+      contextMenu: item.path !== pseudoDirPath ? createDirectoryContextMenu(container, item) : undefined,
       data: item,
-      children: buildChildNodes(item, onFileClick, isGithubTree),
+      children: buildChildNodes(container, item, onFileClick),
     };
   };
 
@@ -529,12 +477,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(container, collection),
     });
 
-    if (
+    if (isNotebookEnabled && userContext.apiType === "Mongo" && isPublicInternetAccessAllowed()) {
-      isNotebookEnabled &&
-      userContext.apiType === "Mongo" &&
-      isPublicInternetAccessAllowed() &&
-      !userContext.features.notebooksTemporarilyDown
-    ) {
       children.push({
         label: "Schema (Preview)",
         onClick: collection.onSchemaAnalyzerClick.bind(collection),
@@ -751,9 +694,9 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
     return traverse(schema);
   };
 
-  const loadSubitems = async (item: NotebookContentItem, isGithubTree?: boolean): Promise<void> => {
+  const loadSubitems = async (item: NotebookContentItem): Promise<void> => {
     const updatedItem = await container.notebookManager?.notebookContentClient?.updateItemChildren(item);
-    updateNotebookItem(updatedItem, isGithubTree);
+    updateNotebookItem(updatedItem);
   };
 
   const dataRootNode = buildDataTree();

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -27,7 +27,6 @@ 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";
@@ -45,7 +44,6 @@ import UserDefinedFunction from "./UserDefinedFunction";
 
 export class ResourceTreeAdapter implements ReactAdapter {
   public static readonly MyNotebooksTitle = "My Notebooks";
-  public static readonly MyNotebooksScratchTitle = "My Notebooks Scratch";
   public static readonly GitHubReposTitle = "GitHub repos";
 
   private static readonly DataTitle = "DATA";
@@ -131,8 +129,9 @@ export class ResourceTreeAdapter implements ReactAdapter {
       path: "Gallery",
       type: NotebookContentItemType.File,
     };
+
     this.myNotebooksContentRoot = {
-      name: useNotebook.getState().NotebookFolderName,
+      name: ResourceTreeAdapter.MyNotebooksTitle,
       path: useNotebook.getState().notebookBasePath,
       type: NotebookContentItemType.Directory,
     };
@@ -146,11 +145,16 @@ export class ResourceTreeAdapter implements ReactAdapter {
         })
       );
     }
+
+    if (this.container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
       this.gitHubNotebooksContentRoot = {
         name: ResourceTreeAdapter.GitHubReposTitle,
         path: ResourceTreeAdapter.PseudoDirPath,
         type: NotebookContentItemType.Directory,
       };
+    } else {
+      this.gitHubNotebooksContentRoot = undefined;
+    }
 
     return Promise.all(refreshTasks);
   }
@@ -708,9 +712,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
         label: "Delete",
         iconSrc: DeleteIcon,
         onClick: () => {
-          useDialog
+          this.container.showOkCancelModalDialog(
-            .getState()
-            .showOkCancelModalDialog(
             "Confirm delete",
             `Are you sure you want to delete "${item.name}"`,
             "Delete",
@@ -775,9 +777,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
         label: "Delete",
         iconSrc: DeleteIcon,
         onClick: () => {
-          useDialog
+          this.container.showOkCancelModalDialog(
-            .getState()
-            .showOkCancelModalDialog(
             "Confirm delete",
             `Are you sure you want to delete "${item.name}?"`,
             "Delete",

src/Explorer/Tree/StoredProcedure.ts

@@ -8,7 +8,6 @@ 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";
@@ -139,11 +138,10 @@ export default class StoredProcedure {
     }
   };
   public delete() {
-    useDialog.getState().showOkCancelModalDialog(
+    if (!window.confirm("Are you sure you want to delete the stored procedure?")) {
-      "Confirm delete",
+      return;
-      "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);
@@ -151,10 +149,6 @@ export default class StoredProcedure {
       },
       (reason) => {}
     );
-      },
-      "Cancel",
-      undefined
-    );
   }
 
   public execute(params: string[], partitionKeyValue?: string): void {

src/Explorer/Tree/Trigger.ts

@@ -6,7 +6,6 @@ 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";
@@ -100,11 +99,10 @@ export default class Trigger {
   };
 
   public delete() {
-    useDialog.getState().showOkCancelModalDialog(
+    if (!window.confirm("Are you sure you want to delete the trigger?")) {
-      "Confirm delete",
+      return;
-      "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);
@@ -112,9 +110,5 @@ export default class Trigger {
       },
       (reason) => {}
     );
-      },
-      "Cancel",
-      undefined
-    );
   }
 }

src/Explorer/Tree/UserDefinedFunction.ts

@@ -6,7 +6,6 @@ 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";
@@ -96,11 +95,10 @@ export default class UserDefinedFunction {
   }
 
   public delete() {
-    useDialog.getState().showOkCancelModalDialog(
+    if (!window.confirm("Are you sure you want to delete the user defined function?")) {
-      "Confirm delete",
+      return;
-      "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);
@@ -110,9 +108,5 @@ export default class UserDefinedFunction {
         /**/
       }
     );
-      },
-      "Cancel",
-      undefined
-    );
   }
 }

src/Explorer/useDatabases.ts

@@ -2,7 +2,6 @@ import _ from "underscore";
 import create, { UseStore } from "zustand";
 import * as Constants from "../Common/Constants";
 import * as ViewModels from "../Contracts/ViewModels";
-import { userContext } from "../UserContext";
 import { useSelectedNode } from "./useSelectedNode";
 
 interface DatabasesState {
@@ -137,11 +136,6 @@ export const useDatabases: UseStore<DatabasesState> = create((set, get) => ({
   },
   validateCollectionId: async (databaseId: string, collectionId: string): Promise<boolean> => {
     const database = get().databases.find((db) => db.id() === databaseId);
-    // For a new tables account, database is undefined when creating the first table
-    if (!database && userContext.apiType === "Tables") {
-      return true;
-    }
-
     await database.loadCollections();
     return !database.collections().some((collection) => collection.id() === collectionId);
   },

src/Juno/JunoClient.test.ts

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

src/Juno/JunoClient.ts

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

src/Main.tsx

@@ -37,7 +37,6 @@ import "./Explorer/Controls/TreeComponent/treeComponent.less";
 import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
 import "./Explorer/Menus/CommandBar/CommandBarComponent.less";
 import { CommandBar } from "./Explorer/Menus/CommandBar/CommandBarComponentAdapter";
-import "./Explorer/Menus/CommandBar/ConnectionStatusComponent.less";
 import "./Explorer/Menus/CommandBar/MemoryTrackerComponent.less";
 import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
 import { NotificationConsole } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent";

src/Phoenix/PhoenixClient.ts

@@ -1,70 +0,0 @@
-import { ConnectionStatusType, HttpHeaders, HttpStatusCodes } from "../Common/Constants";
-import { configContext } from "../ConfigContext";
-import * as DataModels from "../Contracts/DataModels";
-import { useNotebook } from "../Explorer/Notebook/useNotebook";
-import { userContext } from "../UserContext";
-import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
-
-export interface IPhoenixResponse<T> {
-  status: number;
-  data: T;
-}
-export interface IPhoenixConnectionInfoResult {
-  readonly notebookAuthToken?: string;
-  readonly notebookServerUrl?: string;
-}
-export interface IProvosionData {
-  cosmosEndpoint: string;
-  resourceId: string;
-  dbAccountName: string;
-  aadToken: string;
-  resourceGroup: string;
-  subscriptionId: string;
-}
-export class PhoenixClient {
-  public async containerConnectionInfo(
-    provisionData: IProvosionData
-  ): Promise<IPhoenixResponse<IPhoenixConnectionInfoResult>> {
-    const response = await window.fetch(`${this.getPhoenixContainerPoolingEndPoint()}/provision`, {
-      method: "POST",
-      headers: PhoenixClient.getHeaders(),
-      body: JSON.stringify(provisionData),
-    });
-    let data: IPhoenixConnectionInfoResult;
-    if (response.status === HttpStatusCodes.OK) {
-      data = await response.json();
-    } else {
-      const connectionStatus: DataModels.ContainerConnectionInfo = {
-        status: ConnectionStatusType.Failed,
-      };
-      useNotebook.getState().setConnectionInfo(connectionStatus);
-    }
-
-    return {
-      status: response.status,
-      data,
-    };
-  }
-
-  public static getPhoenixEndpoint(): string {
-    const phoenixEndpoint = userContext.features.junoEndpoint ?? configContext.JUNO_ENDPOINT;
-    if (configContext.allowedJunoOrigins.indexOf(new URL(phoenixEndpoint).origin) === -1) {
-      const error = `${phoenixEndpoint} not allowed as juno endpoint`;
-      console.error(error);
-      throw new Error(error);
-    }
-
-    return phoenixEndpoint;
-  }
-
-  public getPhoenixContainerPoolingEndPoint(): string {
-    return `${PhoenixClient.getPhoenixEndpoint()}/api/containerpooling`;
-  }
-  private static getHeaders(): HeadersInit {
-    const authorizationHeader = getAuthorizationHeader();
-    return {
-      [authorizationHeader.header]: authorizationHeader.token,
-      [HttpHeaders.contentType]: "application/json",
-    };
-  }
-}

src/Platform/Hosted/extractFeatures.ts

@@ -10,14 +10,12 @@ export type Features = {
   readonly enableSchema: boolean;
   autoscaleDefault: boolean;
   partitionKeyDefault: boolean;
-  partitionKeyDefault2: boolean;
-  phoenix: 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;
@@ -29,7 +27,6 @@ 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 {
@@ -60,7 +57,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"),
@@ -75,8 +72,5 @@ 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"),
-    phoenix: "true" === get("phoenix"),
   };
 }

src/Utils/GalleryUtils.test.ts

@@ -1,9 +1,8 @@
+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",
@@ -30,11 +29,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(useDialog.getState().visible).toBe(true);
+    expect(container.showOkCancelModalDialog).toBeCalled();
-    expect(useDialog.getState().dialogProps).toBeDefined();
-    expect(useDialog.getState().dialogProps.title).toBe("Download to My Notebooks");
   });
 
   it("favoriteItem favorites item", async () => {
@@ -67,11 +66,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(useDialog.getState().visible).toBe(true);
+    expect(container.showOkCancelModalDialog).toBeCalled();
-    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,14 +3,13 @@ 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, useDialog } from "../Explorer/Controls/Dialog";
+import { TextFieldProps } from "../Explorer/Controls/Dialog";
 import {
   GalleryTab,
   GalleryViewerComponent,
   SortBy,
 } from "../Explorer/Controls/NotebookGallery/GalleryViewerComponent";
 import Explorer from "../Explorer/Explorer";
-import { useNotebook } from "../Explorer/Notebook/useNotebook";
 import { IGalleryItem, JunoClient } from "../Juno/JunoClient";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import { trace, traceFailure, traceStart, traceSuccess } from "../Shared/Telemetry/TelemetryProcessor";
@@ -223,14 +222,12 @@ export function downloadItem(
   });
 
   const name = data.name;
-  useDialog.getState().showOkCancelModalDialog(
+  container.showOkCancelModalDialog(
-    `Download to ${useNotebook.getState().NotebookFolderName}`,
+    "Download to My Notebooks",
     `Download ${name} from gallery as a copy to your notebooks to run and/or edit the notebook.`,
     "Download",
     async () => {
-      const clearInProgressMessage = logConsoleProgress(
+      const clearInProgressMessage = logConsoleProgress(`Downloading ${name} to My Notebooks`);
-        `Downloading ${name} to ${useNotebook.getState().NotebookFolderName}`
-      );
       const startKey = traceStart(Action.NotebooksGalleryDownload, {
         notebookId: data.id,
         downloadCount: data.downloads,
@@ -246,11 +243,6 @@ 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`);
 
@@ -396,7 +388,7 @@ export function deleteItem(
   if (container) {
     trace(Action.NotebooksGalleryClickDelete, ActionModifiers.Mark, { notebookId: data.id });
 
-    useDialog.getState().showOkCancelModalDialog(
+    container.showOkCancelModalDialog(
       "Remove published notebook",
       `Would you like to remove ${data.name} from the gallery?`,
       "Remove",

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

@@ -29,13 +29,7 @@ export async function update(
   body: Types.DatabaseAccountUpdateParameters
 ): Promise<Types.DatabaseAccountGetResults> {
   const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}`;
-  return armRequest({
+  return armRequest({ host: configContext.ARM_ENDPOINT, path, method: "PATCH", apiVersion, body });
-    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,7 +6,6 @@ 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";
 
@@ -46,7 +45,6 @@ interface Options {
   method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "HEAD";
   body?: unknown;
   queryParams?: ARMQueryParams;
-  contentType?: string;
 }
 
 export async function armRequestWithoutPolling<T>({
@@ -56,7 +54,6 @@ 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);
@@ -73,7 +70,6 @@ export async function armRequestWithoutPolling<T>({
     method,
     headers: {
       Authorization: userContext.authorizationToken,
-      [HttpHeaders.contentType]: contentType || "application/json",
     },
     body: requestBody ? JSON.stringify(requestBody) : undefined,
   });
@@ -108,7 +104,6 @@ export async function armRequest<T>({
   method,
   body: requestBody,
   queryParams,
-  contentType,
 }: Options): Promise<T> {
   const armRequestResult = await armRequestWithoutPolling<T>({
     host,
@@ -117,7 +112,6 @@ export async function armRequest<T>({
     method,
     body: requestBody,
     queryParams,
-    contentType,
   });
   const operationStatusUrl = armRequestResult.operationStatusUrl;
   if (operationStatusUrl) {

src/hooks/useAADAuth.ts

@@ -56,7 +56,6 @@ export function useAADAuth(): ReturnType {
       });
       setTenantId(response.tenantId);
       setAccount(response.account);
-      localStorage.setItem("cachedTenantId", response.tenantId);
     },
     [account, tenantId]
   );

src/hooks/useKnockoutExplorer.ts

@@ -98,11 +98,9 @@ async function configureHostedWithAAD(config: AAD): Promise<Explorer> {
     const msalInstance = getMsalInstance();
     const cachedAccount = msalInstance.getAllAccounts()?.[0];
     msalInstance.setActiveAccount(cachedAccount);
-    const cachedTenantId = localStorage.getItem("cachedTenantId");
     const aadTokenResponse = await msalInstance.acquireTokenSilent({
       forceRefresh: true,
       scopes: [hrefEndpoint],
-      authority: `${configContext.AAD_ENDPOINT}${cachedTenantId}`,
     });
     aadToken = aadTokenResponse.accessToken;
   }
@@ -333,15 +331,6 @@ 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;
-    }
-    if (inputs.flights.indexOf(Flights.Phoenix) !== -1) {
-      userContext.features.phoenix = 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

@@ -37,6 +37,7 @@
     "./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",

webpack.config.js

@@ -9,13 +9,12 @@ 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");
@@ -110,11 +109,7 @@ module.exports = function (_env = {}, argv = {}) {
   }
 
   const plugins = [
-    new CleanWebpackPlugin(),
+    new CleanWebpackPlugin(["dist"]),
-    new webpack.ProvidePlugin({
-      process: "process/browser",
-      Buffer: ["buffer", "Buffer"],
-    }),
     new CreateFileWebpack({
       path: "./dist",
       fileName: "version.txt",
@@ -215,26 +210,23 @@ 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" ? "eval-source-map" : "source-map",
+    devtool: mode === "development" ? "cheap-eval-source-map" : "source-map",
     plugins,
     module: {
       rules,
     },
     resolve: {
-      alias: {
-        process: "process/browser",
-      },
-
-      fallback: {
-        crypto: false,
-        fs: false,
-      },
       extensions: [".tsx", ".ts", ".js"],
     },
     optimization: {
@@ -252,7 +244,7 @@ module.exports = function (_env = {}, argv = {}) {
         }),
       ],
     },
-    watch: false,
+    watch: isCI || mode === "production" ? false : true,
     // 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: {