Bump xmldom from 0.4.0 to 0.6.0

Bumps [xmldom](https://github.com/xmldom/xmldom) from 0.4.0 to 0.6.0.
- [Release notes](https://github.com/xmldom/xmldom/releases)
- [Changelog](https://github.com/xmldom/xmldom/blob/master/CHANGELOG.md)
- [Commits](https://github.com/xmldom/xmldom/compare/0.4.0...0.6.0)

---
updated-dependencies:
- dependency-name: xmldom
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.eslintignore

@@ -191,6 +191,4 @@ src/Explorer/Notebook/NotebookRenderer/decorators/kbd-shortcuts/index.tsx
 src/Explorer/Notebook/temp/inputs/connected-editors/codemirror.tsx
 src/Explorer/Tree/ResourceTreeAdapter.tsx
 __mocks__/monaco-editor.ts
-src/Explorer/Tree/ResourceTree.tsx
-src/Explorer/Tree/DatabasesResourceTree.tsx
-src/Explorer/Tree/NotebooksResourceTree.tsx
+src/Explorer/Tree/ResourceTree.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-html5-backend": "14.0.0",
+    "react-dnd": "9.4.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",
-    "jest": "26.6.3",
-    "jest-canvas-mock": "2.3.1",
+    "html-webpack-plugin": "4.5.2",
+    "jest": "25.5.4",
+    "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-bundle-analyzer": "4.4.2",
-    "webpack-cli": "4.7.2",
-    "webpack-dev-server": "3.11.2"
+    "webpack": "4.46.0",
+    "webpack-bundle-analyzer": "3.6.1",
+    "webpack-cli": "3.3.10",
+    "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:fast": "webpack  --mode development --progress",
+    "pack:prod": "node --max_old_space_size=10196 ./node_modules/webpack/bin/webpack.js  --mode production",
+    "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

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

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

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
-    horizontal={true}
+  <div
+    className="input-typehead"
+    onKeyDown={[Function]}
   >
-    <StyledTextFieldBase
-      ariaLabel="Input query"
-      className="input-type-head-text-field"
-      multiline={false}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder="placeholder"
-      rows={1}
-    />
-  </Stack>
-</div>
+    <div
+      className="typeahead__container"
+    >
+      <div
+        className="typeahead__field"
+      >
+        <span
+          className="typeahead__query"
+        >
+          <input
+            aria-label="Input query"
+            autoComplete="off"
+            name="q"
+            type="search"
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+</span>
 `;
 
 exports[`inputTypeahead renders <textarea /> 1`] = `
-<div
+<span
   className="input-typeahead-container"
 >
-  <Stack
-    horizontal={true}
+  <div
+    className="input-typehead"
+    onKeyDown={[Function]}
   >
-    <StyledTextFieldBase
-      ariaLabel="Input query"
-      className="input-type-head-text-field"
-      multiline={true}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder="placeholder"
-      rows={1}
-    />
-  </Stack>
-</div>
+    <div
+      className="typeahead__container"
+    >
+      <div
+        className="typeahead__field"
+      >
+        <span
+          className="typeahead__query"
+        >
+          <textarea
+            aria-label="Input query"
+            autoComplete="off"
+            name="q"
+            rows={1}
+          />
+        </span>
+      </div>
+    </div>
+  </div>
+</span>
 `;

src/Explorer/Explorer.tsx

@@ -1084,13 +1084,11 @@ export default class Explorer {
       dataExplorerArea: Constants.Areas.Notebook,
     });
 
-    if (!userContext.features.notebooksTemporarilyDown) {
-      if (isNotebookEnabled) {
-        await this.initNotebooks(userContext.databaseAccount);
-      } else if (this.notebookToImport) {
-        // if notebooks is not enabled but the user is trying to do a quickstart setup with notebooks, open the SetupNotebooksPane
-        this._openSetupNotebooksPaneForQuickstart();
-      }
+    if (isNotebookEnabled) {
+      await this.initNotebooks(userContext.databaseAccount);
+    } else if (this.notebookToImport) {
+      // if notebooks is not enabled but the user is trying to do a quickstart setup with notebooks, open the SetupNotebooksPane
+      this._openSetupNotebooksPaneForQuickstart();
     }
   }
 }

src/Explorer/Graph/GraphExplorerComponent/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";

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

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -67,50 +67,35 @@ export function createStaticCommandBarButtons(
     newCollectionBtn.children.push(newDatabaseBtn);
   }
 
-  if (useNotebook.getState().isNotebookEnabled) {
-    buttons.push(createDivider());
-    const notebookButtons: CommandButtonComponentProps[] = [];
+  buttons.push(createDivider());
 
+  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));
 
-    notebookButtons.push(createNotebookWorkspaceResetButton(container));
+    buttons.push(createNotebookWorkspaceResetButton(container));
     if (
       (userContext.apiType === "Mongo" &&
         useNotebook.getState().isShellEnabled &&
         selectedNodeState.isDatabaseNodeOrNoneSelected()) ||
       userContext.apiType === "Cassandra"
     ) {
-      notebookButtons.push(createDivider());
+      buttons.push(createDivider());
       if (userContext.apiType === "Cassandra") {
-        notebookButtons.push(createOpenCassandraTerminalButton(container));
+        buttons.push(createOpenCassandraTerminalButton(container));
       } else {
-        notebookButtons.push(createOpenMongoTerminalButton(container));
+        buttons.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 (!isRunningOnNationalCloud()) {
       buttons.push(createEnableNotebooksButton(container));
     }
   }
@@ -167,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);
-          }
+          container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
         } else {
           selectedCollection && selectedCollection.onNewMongoShellClick();
         }
@@ -177,13 +160,7 @@ export function createContextCommandBarButtons(
       commandButtonLabel: label,
       ariaLabel: label,
       hasPopup: true,
-      tooltipText:
-        useNotebook.getState().isShellEnabled && userContext.features.notebooksTemporarilyDown
-          ? Constants.Notebook.mongoShellTemporarilyDownMsg
-          : undefined,
-      disabled:
-        (selectedNodeState.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo") ||
-        (useNotebook.getState().isShellEnabled && userContext.features.notebooksTemporarilyDown),
+      disabled: selectedNodeState.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo",
     };
     buttons.push(newMongoShellBtn);
   }
@@ -411,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

@@ -22,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(
@@ -44,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,
@@ -131,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 },
           };
         }
 

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.isNotebookUntrusted !== nextProps.isNotebookUntrusted
+      this.props.currentCellType !== nextProps.currentCellType
     );
   }
 
@@ -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/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>
+      <IconButton
+        className="runCellButton"
+        iconProps={{ iconName: "MSNVideosSolid" }}
+        title={playButtonText}
+        ariaLabel={playButtonText}
+        onClick={props.runCell}
+      />
     );
   } 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/Panes/PublishNotebookPane/PublishNotebookPane.tsx

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

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();
-    if (userContext.features.notebooksTemporarilyDown) {
-      recentItems = recentItems.filter((item) => item.description !== "Notebook");
-    }
-
+    const recentItems = this.createRecentItems();
     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/Tabs/NotebookV2Tab.ts

@@ -24,7 +24,6 @@ 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";
 
@@ -88,13 +87,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 +108,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 +190,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/Tree/DatabasesResourceTree.tsx

@@ -1,341 +0,0 @@
-import React from "react";
-import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
-import CollectionIcon from "../../../images/tree-collection.svg";
-import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { useTabs } from "../../hooks/useTabs";
-import { userContext } from "../../UserContext";
-import { isServerlessAccount } from "../../Utils/CapabilityUtils";
-import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory";
-import { AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
-import { TreeComponent, TreeNode } from "../Controls/TreeComponent/TreeComponent";
-import Explorer from "../Explorer";
-import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
-import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
-import { useNotebook } from "../Notebook/useNotebook";
-import TabsBase from "../Tabs/TabsBase";
-import { useDatabases } from "../useDatabases";
-import { useSelectedNode } from "../useSelectedNode";
-import StoredProcedure from "./StoredProcedure";
-import Trigger from "./Trigger";
-import UserDefinedFunction from "./UserDefinedFunction";
-
-interface DatabasesResourceTreeProps {
-  container: Explorer;
-}
-
-export const DatabasesResourceTree: React.FC<DatabasesResourceTreeProps> = ({
-  container,
-}: DatabasesResourceTreeProps): JSX.Element => {
-  const databases = useDatabases((state) => state.databases);
-  const isNotebookEnabled = useNotebook((state) => state.isNotebookEnabled);
-  const gitHubNotebooksContentRoot = useNotebook((state) => state.gitHubNotebooksContentRoot);
-
-  const showScriptNodes = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
-  const refreshActiveTab = useTabs.getState().refreshActiveTab;
-
-  const buildDataTree = (): TreeNode => {
-    const databaseTreeNodes: TreeNode[] = databases.map((database: ViewModels.Database) => {
-      const databaseNode: TreeNode = {
-        label: database.id(),
-        iconSrc: CosmosDBIcon,
-        isExpanded: false,
-        className: "databaseHeader",
-        children: [],
-        isSelected: () => useSelectedNode.getState().isDataNodeSelected(database.id()),
-        contextMenu: ResourceTreeContextMenuButtonFactory.createDatabaseContextMenu(container, database.id()),
-        onClick: async (isExpanded) => {
-          useSelectedNode.getState().setSelectedNode(database);
-          // Rewritten version of expandCollapseDatabase():
-          if (isExpanded) {
-            database.collapseDatabase();
-          } else {
-            if (databaseNode.children?.length === 0) {
-              databaseNode.isLoading = true;
-            }
-            await database.expandDatabase();
-          }
-          databaseNode.isLoading = false;
-          useCommandBar.getState().setContextButtons([]);
-          refreshActiveTab((tab: TabsBase) => tab.collection?.databaseId === database.id());
-        },
-        onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(database),
-      };
-
-      if (database.isDatabaseShared()) {
-        databaseNode.children.push({
-          label: "Scale",
-          isSelected: () =>
-            useSelectedNode
-              .getState()
-              .isDataNodeSelected(database.id(), undefined, [ViewModels.CollectionTabKind.DatabaseSettingsV2]),
-          onClick: database.onSettingsClick.bind(database),
-        });
-      }
-
-      // Find collections
-      database
-        .collections()
-        .forEach((collection: ViewModels.Collection) =>
-          databaseNode.children.push(buildCollectionNode(database, collection))
-        );
-
-      database.collections.subscribe((collections: ViewModels.Collection[]) => {
-        collections.forEach((collection: ViewModels.Collection) =>
-          databaseNode.children.push(buildCollectionNode(database, collection))
-        );
-      });
-
-      return databaseNode;
-    });
-
-    return {
-      label: undefined,
-      isExpanded: true,
-      children: databaseTreeNodes,
-    };
-  };
-
-  const buildCollectionNode = (database: ViewModels.Database, collection: ViewModels.Collection): TreeNode => {
-    const children: TreeNode[] = [];
-    children.push({
-      label: collection.getLabel(),
-      onClick: () => {
-        collection.openTab();
-        // push to most recent
-        mostRecentActivity.collectionWasOpened(userContext.databaseAccount?.id, collection);
-      },
-      isSelected: () =>
-        useSelectedNode
-          .getState()
-          .isDataNodeSelected(collection.databaseId, collection.id(), [
-            ViewModels.CollectionTabKind.Documents,
-            ViewModels.CollectionTabKind.Graph,
-          ]),
-      contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(container, collection),
-    });
-
-    if (isNotebookEnabled && userContext.apiType === "Mongo" && isPublicInternetAccessAllowed()) {
-      children.push({
-        label: "Schema (Preview)",
-        onClick: collection.onSchemaAnalyzerClick.bind(collection),
-        isSelected: () =>
-          useSelectedNode
-            .getState()
-            .isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.SchemaAnalyzer]),
-      });
-    }
-
-    if (userContext.apiType !== "Cassandra" || !isServerlessAccount()) {
-      children.push({
-        label: database.isDatabaseShared() || isServerlessAccount() ? "Settings" : "Scale & Settings",
-        onClick: collection.onSettingsClick.bind(collection),
-        isSelected: () =>
-          useSelectedNode
-            .getState()
-            .isDataNodeSelected(collection.databaseId, collection.id(), [
-              ViewModels.CollectionTabKind.CollectionSettingsV2,
-            ]),
-      });
-    }
-
-    const schemaNode: TreeNode = buildSchemaNode(collection);
-    if (schemaNode) {
-      children.push(schemaNode);
-    }
-
-    if (showScriptNodes) {
-      children.push(buildStoredProcedureNode(collection));
-      children.push(buildUserDefinedFunctionsNode(collection));
-      children.push(buildTriggerNode(collection));
-    }
-
-    // This is a rewrite of showConflicts
-    const showConflicts =
-      userContext?.databaseAccount?.properties.enableMultipleWriteLocations &&
-      collection.rawDataModel &&
-      !!collection.rawDataModel.conflictResolutionPolicy;
-
-    if (showConflicts) {
-      children.push({
-        label: "Conflicts",
-        onClick: collection.onConflictsClick.bind(collection),
-        isSelected: () =>
-          useSelectedNode
-            .getState()
-            .isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.Conflicts]),
-      });
-    }
-
-    return {
-      label: collection.id(),
-      iconSrc: CollectionIcon,
-      isExpanded: false,
-      children: children,
-      className: "collectionHeader",
-      contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(container, collection),
-      onClick: () => {
-        // Rewritten version of expandCollapseCollection
-        useSelectedNode.getState().setSelectedNode(collection);
-        useCommandBar.getState().setContextButtons([]);
-        refreshActiveTab(
-          (tab: TabsBase) =>
-            tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
-        );
-      },
-      onExpanded: () => {
-        if (showScriptNodes) {
-          collection.loadStoredProcedures();
-          collection.loadUserDefinedFunctions();
-          collection.loadTriggers();
-        }
-      },
-      isSelected: () => useSelectedNode.getState().isDataNodeSelected(collection.databaseId, collection.id()),
-      onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(collection),
-    };
-  };
-
-  const buildStoredProcedureNode = (collection: ViewModels.Collection): TreeNode => {
-    return {
-      label: "Stored Procedures",
-      children: collection.storedProcedures().map((sp: StoredProcedure) => ({
-        label: sp.id(),
-        onClick: sp.open.bind(sp),
-        isSelected: () =>
-          useSelectedNode
-            .getState()
-            .isDataNodeSelected(collection.databaseId, collection.id(), [
-              ViewModels.CollectionTabKind.StoredProcedures,
-            ]),
-        contextMenu: ResourceTreeContextMenuButtonFactory.createStoreProcedureContextMenuItems(container, sp),
-      })),
-      onClick: () => {
-        collection.selectedSubnodeKind(ViewModels.CollectionTabKind.StoredProcedures);
-        refreshActiveTab(
-          (tab: TabsBase) =>
-            tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
-        );
-      },
-    };
-  };
-
-  const buildUserDefinedFunctionsNode = (collection: ViewModels.Collection): TreeNode => {
-    return {
-      label: "User Defined Functions",
-      children: collection.userDefinedFunctions().map((udf: UserDefinedFunction) => ({
-        label: udf.id(),
-        onClick: udf.open.bind(udf),
-        isSelected: () =>
-          useSelectedNode
-            .getState()
-            .isDataNodeSelected(collection.databaseId, collection.id(), [
-              ViewModels.CollectionTabKind.UserDefinedFunctions,
-            ]),
-        contextMenu: ResourceTreeContextMenuButtonFactory.createUserDefinedFunctionContextMenuItems(container, udf),
-      })),
-      onClick: () => {
-        collection.selectedSubnodeKind(ViewModels.CollectionTabKind.UserDefinedFunctions);
-        refreshActiveTab(
-          (tab: TabsBase) =>
-            tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
-        );
-      },
-    };
-  };
-
-  const buildTriggerNode = (collection: ViewModels.Collection): TreeNode => {
-    return {
-      label: "Triggers",
-      children: collection.triggers().map((trigger: Trigger) => ({
-        label: trigger.id(),
-        onClick: trigger.open.bind(trigger),
-        isSelected: () =>
-          useSelectedNode
-            .getState()
-            .isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.Triggers]),
-        contextMenu: ResourceTreeContextMenuButtonFactory.createTriggerContextMenuItems(container, trigger),
-      })),
-      onClick: () => {
-        collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Triggers);
-        refreshActiveTab(
-          (tab: TabsBase) =>
-            tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
-        );
-      },
-    };
-  };
-
-  const buildSchemaNode = (collection: ViewModels.Collection): TreeNode => {
-    if (collection.analyticalStorageTtl() === undefined) {
-      return undefined;
-    }
-
-    if (!collection.schema || !collection.schema.fields) {
-      return undefined;
-    }
-
-    return {
-      label: "Schema",
-      children: getSchemaNodes(collection.schema.fields),
-      onClick: () => {
-        collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Schema);
-        refreshActiveTab((tab: TabsBase) => tab.collection && tab.collection.rid === collection.rid);
-      },
-    };
-  };
-
-  const getSchemaNodes = (fields: DataModels.IDataField[]): TreeNode[] => {
-    const schema: any = {};
-
-    //unflatten
-    fields.forEach((field: DataModels.IDataField) => {
-      const path: string[] = field.path.split(".");
-      const fieldProperties = [field.dataType.name, `HasNulls: ${field.hasNulls}`];
-      let current: any = {};
-      path.forEach((name: string, pathIndex: number) => {
-        if (pathIndex === 0) {
-          if (schema[name] === undefined) {
-            if (pathIndex === path.length - 1) {
-              schema[name] = fieldProperties;
-            } else {
-              schema[name] = {};
-            }
-          }
-          current = schema[name];
-        } else {
-          if (current[name] === undefined) {
-            if (pathIndex === path.length - 1) {
-              current[name] = fieldProperties;
-            } else {
-              current[name] = {};
-            }
-          }
-          current = current[name];
-        }
-      });
-    });
-
-    const traverse = (obj: any): TreeNode[] => {
-      const children: TreeNode[] = [];
-
-      if (obj !== undefined && !Array.isArray(obj) && typeof obj === "object") {
-        Object.entries(obj).forEach(([key, value]) => {
-          children.push({ label: key, children: traverse(value) });
-        });
-      } else if (Array.isArray(obj)) {
-        return [{ label: obj[0] }, { label: obj[1] }];
-      }
-
-      return children;
-    };
-
-    return traverse(schema);
-  };
-
-  return (
-    <AccordionItemComponent title={"DATA"} isExpanded={!gitHubNotebooksContentRoot}>
-      <TreeComponent className="dataResourceTree" rootNode={buildDataTree()} />
-    </AccordionItemComponent>
-  );
-};

src/Explorer/Tree/NotebooksResourceTree.tsx

@@ -1,436 +0,0 @@
-import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
-import * as React from "react";
-import shallow from "zustand/shallow";
-import DeleteIcon from "../../../images/delete.svg";
-import GalleryIcon from "../../../images/GalleryIcon.svg";
-import FileIcon from "../../../images/notebook/file-cosmos.svg";
-import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
-import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
-import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
-import PublishIcon from "../../../images/notebook/publish_content.svg";
-import RefreshIcon from "../../../images/refresh-cosmos.svg";
-import { Areas, Notebook } from "../../Common/Constants";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { useSidePanel } from "../../hooks/useSidePanel";
-import { useTabs } from "../../hooks/useTabs";
-import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
-import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
-import * as GitHubUtils from "../../Utils/GitHubUtils";
-import { AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
-import { useDialog } from "../Controls/Dialog";
-import { TreeComponent, TreeNode, TreeNodeMenuItem } from "../Controls/TreeComponent/TreeComponent";
-import Explorer from "../Explorer";
-import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
-import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
-import { NotebookUtil } from "../Notebook/NotebookUtil";
-import { useNotebook } from "../Notebook/useNotebook";
-import { GitHubReposPanel } from "../Panes/GitHubReposPanel/GitHubReposPanel";
-
-export const MyNotebooksTitle = "My Notebooks";
-export const GitHubReposTitle = "GitHub repos";
-
-interface NotebooksResourceTreeProps {
-  container: Explorer;
-}
-
-export const NotebooksResourceTree: React.FC<NotebooksResourceTreeProps> = ({
-  container,
-}: NotebooksResourceTreeProps): JSX.Element => {
-  const {
-    isNotebookEnabled,
-    myNotebooksContentRoot,
-    galleryContentRoot,
-    gitHubNotebooksContentRoot,
-    updateNotebookItem,
-  } = useNotebook(
-    (state) => ({
-      isNotebookEnabled: state.isNotebookEnabled,
-      myNotebooksContentRoot: state.myNotebooksContentRoot,
-      galleryContentRoot: state.galleryContentRoot,
-      gitHubNotebooksContentRoot: state.gitHubNotebooksContentRoot,
-      updateNotebookItem: state.updateNotebookItem,
-    }),
-    shallow
-  );
-  const activeTab = useTabs((state) => state.activeTab);
-  const pseudoDirPath = "PsuedoDir";
-
-  const buildGalleryCallout = (): JSX.Element => {
-    if (
-      LocalStorageUtility.hasItem(StorageKey.GalleryCalloutDismissed) &&
-      LocalStorageUtility.getEntryBoolean(StorageKey.GalleryCalloutDismissed)
-    ) {
-      return undefined;
-    }
-
-    const calloutProps: ICalloutProps = {
-      calloutMaxWidth: 350,
-      ariaLabel: "New gallery",
-      role: "alertdialog",
-      gapSpace: 0,
-      target: ".galleryHeader",
-      directionalHint: DirectionalHint.leftTopEdge,
-      onDismiss: () => {
-        LocalStorageUtility.setEntryBoolean(StorageKey.GalleryCalloutDismissed, true);
-      },
-      setInitialFocus: true,
-    };
-
-    const openGalleryProps: ILinkProps = {
-      onClick: () => {
-        LocalStorageUtility.setEntryBoolean(StorageKey.GalleryCalloutDismissed, true);
-        container.openGallery();
-      },
-    };
-
-    return (
-      <Callout {...calloutProps}>
-        <Stack tokens={{ childrenGap: 10, padding: 20 }}>
-          <Text variant="xLarge" block>
-            New gallery
-          </Text>
-          <Text block>
-            Sample notebooks are now combined in gallery. View and try out samples provided by Microsoft and other
-            contributors.
-          </Text>
-          <Link {...openGalleryProps}>Open gallery</Link>
-        </Stack>
-      </Callout>
-    );
-  };
-
-  const buildNotebooksTree = (): TreeNode => {
-    const notebooksTree: TreeNode = {
-      label: undefined,
-      isExpanded: true,
-      children: [],
-    };
-
-    if (userContext.features.notebooksTemporarilyDown) {
-      notebooksTree.children.push(buildNotebooksTemporarilyDownTree());
-    } else {
-      if (galleryContentRoot) {
-        notebooksTree.children.push(buildGalleryNotebooksTree());
-      }
-
-      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());
-      }
-    }
-
-    return notebooksTree;
-  };
-
-  const buildNotebooksTemporarilyDownTree = (): TreeNode => {
-    return {
-      label: Notebook.temporarilyDownMsg,
-      className: "clickDisabled",
-    };
-  };
-
-  const buildGalleryNotebooksTree = (): TreeNode => {
-    return {
-      label: "Gallery",
-      iconSrc: GalleryIcon,
-      className: "notebookHeader galleryHeader",
-      onClick: () => container.openGallery(),
-      isSelected: () => activeTab?.tabKind === ViewModels.CollectionTabKind.Gallery,
-    };
-  };
-
-  const buildMyNotebooksTree = (): TreeNode => {
-    const myNotebooksTree: TreeNode = buildNotebookDirectoryNode(
-      myNotebooksContentRoot,
-      (item: NotebookContentItem) => {
-        container.openNotebook(item).then((hasOpened) => {
-          if (hasOpened) {
-            mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
-          }
-        });
-      }
-    );
-
-    myNotebooksTree.isExpanded = true;
-    myNotebooksTree.isAlphaSorted = true;
-    // Remove "Delete" menu item from context menu
-    myNotebooksTree.contextMenu = myNotebooksTree.contextMenu.filter((menuItem) => menuItem.label !== "Delete");
-    return myNotebooksTree;
-  };
-
-  const buildGitHubNotebooksTree = (): TreeNode => {
-    const gitHubNotebooksTree: TreeNode = buildNotebookDirectoryNode(
-      gitHubNotebooksContentRoot,
-      (item: NotebookContentItem) => {
-        container.openNotebook(item).then((hasOpened) => {
-          if (hasOpened) {
-            mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
-          }
-        });
-      },
-      true
-    );
-
-    gitHubNotebooksTree.contextMenu = [
-      {
-        label: "Manage GitHub settings",
-        onClick: () =>
-          useSidePanel
-            .getState()
-            .openSidePanel(
-              "Manage GitHub settings",
-              <GitHubReposPanel
-                explorer={container}
-                gitHubClientProp={container.notebookManager.gitHubClient}
-                junoClientProp={container.notebookManager.junoClient}
-              />
-            ),
-      },
-      {
-        label: "Disconnect from GitHub",
-        onClick: () => {
-          TelemetryProcessor.trace(Action.NotebooksGitHubDisconnect, ActionModifiers.Mark, {
-            dataExplorerArea: Areas.Notebook,
-          });
-          container.notebookManager?.gitHubOAuthService.logout();
-        },
-      },
-    ];
-
-    gitHubNotebooksTree.isExpanded = true;
-    gitHubNotebooksTree.isAlphaSorted = true;
-
-    return gitHubNotebooksTree;
-  };
-
-  const buildChildNodes = (
-    item: NotebookContentItem,
-    onFileClick: (item: NotebookContentItem) => void,
-    isGithubTree?: boolean
-  ): TreeNode[] => {
-    if (!item || !item.children) {
-      return [];
-    } else {
-      return item.children.map((item) => {
-        const result =
-          item.type === NotebookContentItemType.Directory
-            ? buildNotebookDirectoryNode(item, onFileClick, isGithubTree)
-            : buildNotebookFileNode(item, onFileClick, isGithubTree);
-        result.timestamp = item.timestamp;
-        return result;
-      });
-    }
-  };
-
-  const buildNotebookFileNode = (
-    item: NotebookContentItem,
-    onFileClick: (item: NotebookContentItem) => void,
-    isGithubTree?: boolean
-  ): TreeNode => {
-    return {
-      label: item.name,
-      iconSrc: NotebookUtil.isNotebookFile(item.path) ? NotebookIcon : FileIcon,
-      className: "notebookHeader",
-      onClick: () => onFileClick(item),
-      isSelected: () => {
-        return (
-          activeTab &&
-          activeTab.tabKind === ViewModels.CollectionTabKind.NotebookV2 &&
-          /* TODO Redesign Tab interface so that resource tree doesn't need to know about NotebookV2Tab.
-                     NotebookV2Tab could be dynamically imported, but not worth it to just get this type right.
-                   */
-          (activeTab as any).notebookPath() === item.path
-        );
-      },
-      contextMenu: createFileContextMenu(container, item, isGithubTree),
-      data: item,
-    };
-  };
-
-  const createFileContextMenu = (
-    container: Explorer,
-    item: NotebookContentItem,
-    isGithubTree?: boolean
-  ): TreeNodeMenuItem[] => {
-    let items: TreeNodeMenuItem[] = [
-      {
-        label: "Rename",
-        iconSrc: NotebookIcon,
-        onClick: () => container.renameNotebook(item, isGithubTree),
-      },
-      {
-        label: "Delete",
-        iconSrc: DeleteIcon,
-        onClick: () => {
-          useDialog
-            .getState()
-            .showOkCancelModalDialog(
-              "Confirm delete",
-              `Are you sure you want to delete "${item.name}"`,
-              "Delete",
-              () => container.deleteNotebookFile(item, isGithubTree),
-              "Cancel",
-              undefined
-            );
-        },
-      },
-      {
-        label: "Copy to ...",
-        iconSrc: CopyIcon,
-        onClick: () => copyNotebook(container, item),
-      },
-      {
-        label: "Download",
-        iconSrc: NotebookIcon,
-        onClick: () => container.downloadFile(item),
-      },
-    ];
-
-    if (item.type === NotebookContentItemType.Notebook) {
-      items.push({
-        label: "Publish to gallery",
-        iconSrc: PublishIcon,
-        onClick: async () => {
-          TelemetryProcessor.trace(Action.NotebooksGalleryClickPublishToGallery, ActionModifiers.Mark, {
-            source: Source.ResourceTreeMenu,
-          });
-
-          const content = await container.readFile(item);
-          if (content) {
-            await container.publishNotebook(item.name, content);
-          }
-        },
-      });
-    }
-
-    // "Copy to ..." isn't needed if github locations are not available
-    if (!container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
-      items = items.filter((item) => item.label !== "Copy to ...");
-    }
-
-    return items;
-  };
-
-  const copyNotebook = async (container: Explorer, item: NotebookContentItem) => {
-    const content = await container.readFile(item);
-    if (content) {
-      container.copyNotebook(item.name, content);
-    }
-  };
-
-  const createDirectoryContextMenu = (
-    container: Explorer,
-    item: NotebookContentItem,
-    isGithubTree?: boolean
-  ): TreeNodeMenuItem[] => {
-    let items: TreeNodeMenuItem[] = [
-      {
-        label: "Refresh",
-        iconSrc: RefreshIcon,
-        onClick: () => loadSubitems(item, isGithubTree),
-      },
-      {
-        label: "Delete",
-        iconSrc: DeleteIcon,
-        onClick: () => {
-          useDialog
-            .getState()
-            .showOkCancelModalDialog(
-              "Confirm delete",
-              `Are you sure you want to delete "${item.name}?"`,
-              "Delete",
-              () => container.deleteNotebookFile(item, isGithubTree),
-              "Cancel",
-              undefined
-            );
-        },
-      },
-      {
-        label: "Rename",
-        iconSrc: NotebookIcon,
-        onClick: () => container.renameNotebook(item, isGithubTree),
-      },
-      {
-        label: "New Directory",
-        iconSrc: NewNotebookIcon,
-        onClick: () => container.onCreateDirectory(item, isGithubTree),
-      },
-      {
-        label: "New Notebook",
-        iconSrc: NewNotebookIcon,
-        onClick: () => container.onNewNotebookClicked(item, isGithubTree),
-      },
-      {
-        label: "Upload File",
-        iconSrc: NewNotebookIcon,
-        onClick: () => container.openUploadFilePanel(item),
-      },
-    ];
-
-    // For GitHub paths remove "Delete", "Rename", "New Directory", "Upload File"
-    if (GitHubUtils.fromContentUri(item.path)) {
-      items = items.filter(
-        (item) =>
-          item.label !== "Delete" &&
-          item.label !== "Rename" &&
-          item.label !== "New Directory" &&
-          item.label !== "Upload File"
-      );
-    }
-
-    return items;
-  };
-
-  const buildNotebookDirectoryNode = (
-    item: NotebookContentItem,
-    onFileClick: (item: NotebookContentItem) => void,
-    isGithubTree?: boolean
-  ): TreeNode => {
-    return {
-      label: item.name,
-      iconSrc: undefined,
-      className: "notebookHeader",
-      isAlphaSorted: true,
-      isLeavesParentsSeparate: true,
-      onClick: () => {
-        if (!item.children) {
-          loadSubitems(item, isGithubTree);
-        }
-      },
-      isSelected: () => {
-        return (
-          activeTab &&
-          activeTab.tabKind === ViewModels.CollectionTabKind.NotebookV2 &&
-          /* TODO Redesign Tab interface so that resource tree doesn't need to know about NotebookV2Tab.
-                     NotebookV2Tab could be dynamically imported, but not worth it to just get this type right.
-                   */
-          (activeTab as any).notebookPath() === item.path
-        );
-      },
-      contextMenu: item.path !== pseudoDirPath ? createDirectoryContextMenu(container, item, isGithubTree) : undefined,
-      data: item,
-      children: buildChildNodes(item, onFileClick, isGithubTree),
-    };
-  };
-
-  const loadSubitems = async (item: NotebookContentItem, isGithubTree?: boolean): Promise<void> => {
-    const updatedItem = await container.notebookManager?.notebookContentClient?.updateItemChildren(item);
-    updateNotebookItem(updatedItem, isGithubTree);
-  };
-
-  return isNotebookEnabled ? (
-    <AccordionItemComponent title={"NOTEBOOKS"}>
-      <TreeComponent className="notebookResourceTree" rootNode={buildNotebooksTree()} />
-      {buildGalleryCallout()}
-    </AccordionItemComponent>
-  ) : (
-    <></>
-  );
-};

src/Explorer/Tree/ResourceTree.tsx

@@ -1,18 +1,748 @@
+import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
 import * as React from "react";
-import { AccordionComponent } from "../Controls/Accordion/AccordionComponent";
+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";
+import FileIcon from "../../../images/notebook/file-cosmos.svg";
+import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
+import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
+import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
+import PublishIcon from "../../../images/notebook/publish_content.svg";
+import RefreshIcon from "../../../images/refresh-cosmos.svg";
+import CollectionIcon from "../../../images/tree-collection.svg";
+import { Areas } from "../../Common/Constants";
+import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
+import * as DataModels from "../../Contracts/DataModels";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { useSidePanel } from "../../hooks/useSidePanel";
+import { useTabs } from "../../hooks/useTabs";
+import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
+import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../UserContext";
+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 { DatabasesResourceTree } from "./DatabasesResourceTree";
-import { NotebooksResourceTree } from "./NotebooksResourceTree";
+import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
+import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
+import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
+import { NotebookUtil } from "../Notebook/NotebookUtil";
+import { useNotebook } from "../Notebook/useNotebook";
+import { GitHubReposPanel } from "../Panes/GitHubReposPanel/GitHubReposPanel";
+import TabsBase from "../Tabs/TabsBase";
+import { useDatabases } from "../useDatabases";
+import { useSelectedNode } from "../useSelectedNode";
+import StoredProcedure from "./StoredProcedure";
+import Trigger from "./Trigger";
+import UserDefinedFunction from "./UserDefinedFunction";
+
+export const MyNotebooksTitle = "My Notebooks";
+export const GitHubReposTitle = "GitHub repos";
 
 interface ResourceTreeProps {
   container: Explorer;
 }
 
 export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: ResourceTreeProps): JSX.Element => {
-  return (
-    <AccordionComponent>
-      <DatabasesResourceTree container={container} />
-      <NotebooksResourceTree container={container} />
-    </AccordionComponent>
+  const databases = useDatabases((state) => state.databases);
+  const {
+    isNotebookEnabled,
+    myNotebooksContentRoot,
+    galleryContentRoot,
+    gitHubNotebooksContentRoot,
+    updateNotebookItem,
+  } = 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";
+
+  const buildGalleryCallout = (): JSX.Element => {
+    if (
+      LocalStorageUtility.hasItem(StorageKey.GalleryCalloutDismissed) &&
+      LocalStorageUtility.getEntryBoolean(StorageKey.GalleryCalloutDismissed)
+    ) {
+      return undefined;
+    }
+
+    const calloutProps: ICalloutProps = {
+      calloutMaxWidth: 350,
+      ariaLabel: "New gallery",
+      role: "alertdialog",
+      gapSpace: 0,
+      target: ".galleryHeader",
+      directionalHint: DirectionalHint.leftTopEdge,
+      onDismiss: () => {
+        LocalStorageUtility.setEntryBoolean(StorageKey.GalleryCalloutDismissed, true);
+      },
+      setInitialFocus: true,
+    };
+
+    const openGalleryProps: ILinkProps = {
+      onClick: () => {
+        LocalStorageUtility.setEntryBoolean(StorageKey.GalleryCalloutDismissed, true);
+        container.openGallery();
+      },
+    };
+
+    return (
+      <Callout {...calloutProps}>
+        <Stack tokens={{ childrenGap: 10, padding: 20 }}>
+          <Text variant="xLarge" block>
+            New gallery
+          </Text>
+          <Text block>
+            Sample notebooks are now combined in gallery. View and try out samples provided by Microsoft and other
+            contributors.
+          </Text>
+          <Link {...openGalleryProps}>Open gallery</Link>
+        </Stack>
+      </Callout>
+    );
+  };
+
+  const buildNotebooksTree = (): TreeNode => {
+    const notebooksTree: TreeNode = {
+      label: undefined,
+      isExpanded: true,
+      children: [],
+    };
+
+    if (galleryContentRoot) {
+      notebooksTree.children.push(buildGalleryNotebooksTree());
+    }
+
+    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());
+    }
+
+    return notebooksTree;
+  };
+
+  const buildGalleryNotebooksTree = (): TreeNode => {
+    return {
+      label: "Gallery",
+      iconSrc: GalleryIcon,
+      className: "notebookHeader galleryHeader",
+      onClick: () => container.openGallery(),
+      isSelected: () => activeTab?.tabKind === ViewModels.CollectionTabKind.Gallery,
+    };
+  };
+
+  const buildMyNotebooksTree = (): TreeNode => {
+    const myNotebooksTree: TreeNode = buildNotebookDirectoryNode(
+      myNotebooksContentRoot,
+      (item: NotebookContentItem) => {
+        container.openNotebook(item).then((hasOpened) => {
+          if (hasOpened) {
+            mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
+          }
+        });
+      }
+    );
+
+    myNotebooksTree.isExpanded = true;
+    myNotebooksTree.isAlphaSorted = true;
+    // Remove "Delete" menu item from context menu
+    myNotebooksTree.contextMenu = myNotebooksTree.contextMenu.filter((menuItem) => menuItem.label !== "Delete");
+    return myNotebooksTree;
+  };
+
+  const buildGitHubNotebooksTree = (): TreeNode => {
+    const gitHubNotebooksTree: TreeNode = buildNotebookDirectoryNode(
+      gitHubNotebooksContentRoot,
+      (item: NotebookContentItem) => {
+        container.openNotebook(item).then((hasOpened) => {
+          if (hasOpened) {
+            mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
+          }
+        });
+      },
+      true
+    );
+
+    gitHubNotebooksTree.contextMenu = [
+      {
+        label: "Manage GitHub settings",
+        onClick: () =>
+          useSidePanel
+            .getState()
+            .openSidePanel(
+              "Manage GitHub settings",
+              <GitHubReposPanel
+                explorer={container}
+                gitHubClientProp={container.notebookManager.gitHubClient}
+                junoClientProp={container.notebookManager.junoClient}
+              />
+            ),
+      },
+      {
+        label: "Disconnect from GitHub",
+        onClick: () => {
+          TelemetryProcessor.trace(Action.NotebooksGitHubDisconnect, ActionModifiers.Mark, {
+            dataExplorerArea: Areas.Notebook,
+          });
+          container.notebookManager?.gitHubOAuthService.logout();
+        },
+      },
+    ];
+
+    gitHubNotebooksTree.isExpanded = true;
+    gitHubNotebooksTree.isAlphaSorted = true;
+
+    return gitHubNotebooksTree;
+  };
+
+  const buildChildNodes = (
+    item: NotebookContentItem,
+    onFileClick: (item: NotebookContentItem) => void,
+    isGithubTree?: boolean
+  ): TreeNode[] => {
+    if (!item || !item.children) {
+      return [];
+    } else {
+      return item.children.map((item) => {
+        const result =
+          item.type === NotebookContentItemType.Directory
+            ? buildNotebookDirectoryNode(item, onFileClick, isGithubTree)
+            : buildNotebookFileNode(item, onFileClick, isGithubTree);
+        result.timestamp = item.timestamp;
+        return result;
+      });
+    }
+  };
+
+  const buildNotebookFileNode = (
+    item: NotebookContentItem,
+    onFileClick: (item: NotebookContentItem) => void,
+    isGithubTree?: boolean
+  ): TreeNode => {
+    return {
+      label: item.name,
+      iconSrc: NotebookUtil.isNotebookFile(item.path) ? NotebookIcon : FileIcon,
+      className: "notebookHeader",
+      onClick: () => onFileClick(item),
+      isSelected: () => {
+        return (
+          activeTab &&
+          activeTab.tabKind === ViewModels.CollectionTabKind.NotebookV2 &&
+          /* TODO Redesign Tab interface so that resource tree doesn't need to know about NotebookV2Tab.
+                     NotebookV2Tab could be dynamically imported, but not worth it to just get this type right.
+                   */
+          (activeTab as any).notebookPath() === item.path
+        );
+      },
+      contextMenu: createFileContextMenu(container, item, isGithubTree),
+      data: item,
+    };
+  };
+
+  const createFileContextMenu = (
+    container: Explorer,
+    item: NotebookContentItem,
+    isGithubTree?: boolean
+  ): TreeNodeMenuItem[] => {
+    let items: TreeNodeMenuItem[] = [
+      {
+        label: "Rename",
+        iconSrc: NotebookIcon,
+        onClick: () => container.renameNotebook(item, isGithubTree),
+      },
+      {
+        label: "Delete",
+        iconSrc: DeleteIcon,
+        onClick: () => {
+          useDialog
+            .getState()
+            .showOkCancelModalDialog(
+              "Confirm delete",
+              `Are you sure you want to delete "${item.name}"`,
+              "Delete",
+              () => container.deleteNotebookFile(item, isGithubTree),
+              "Cancel",
+              undefined
+            );
+        },
+      },
+      {
+        label: "Copy to ...",
+        iconSrc: CopyIcon,
+        onClick: () => copyNotebook(container, item),
+      },
+      {
+        label: "Download",
+        iconSrc: NotebookIcon,
+        onClick: () => container.downloadFile(item),
+      },
+    ];
+
+    if (item.type === NotebookContentItemType.Notebook) {
+      items.push({
+        label: "Publish to gallery",
+        iconSrc: PublishIcon,
+        onClick: async () => {
+          TelemetryProcessor.trace(Action.NotebooksGalleryClickPublishToGallery, ActionModifiers.Mark, {
+            source: Source.ResourceTreeMenu,
+          });
+
+          const content = await container.readFile(item);
+          if (content) {
+            await container.publishNotebook(item.name, content);
+          }
+        },
+      });
+    }
+
+    // "Copy to ..." isn't needed if github locations are not available
+    if (!container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
+      items = items.filter((item) => item.label !== "Copy to ...");
+    }
+
+    return items;
+  };
+
+  const copyNotebook = async (container: Explorer, item: NotebookContentItem) => {
+    const content = await container.readFile(item);
+    if (content) {
+      container.copyNotebook(item.name, content);
+    }
+  };
+
+  const createDirectoryContextMenu = (
+    container: Explorer,
+    item: NotebookContentItem,
+    isGithubTree?: boolean
+  ): TreeNodeMenuItem[] => {
+    let items: TreeNodeMenuItem[] = [
+      {
+        label: "Refresh",
+        iconSrc: RefreshIcon,
+        onClick: () => loadSubitems(item, isGithubTree),
+      },
+      {
+        label: "Delete",
+        iconSrc: DeleteIcon,
+        onClick: () => {
+          useDialog
+            .getState()
+            .showOkCancelModalDialog(
+              "Confirm delete",
+              `Are you sure you want to delete "${item.name}?"`,
+              "Delete",
+              () => container.deleteNotebookFile(item, isGithubTree),
+              "Cancel",
+              undefined
+            );
+        },
+      },
+      {
+        label: "Rename",
+        iconSrc: NotebookIcon,
+        onClick: () => container.renameNotebook(item, isGithubTree),
+      },
+      {
+        label: "New Directory",
+        iconSrc: NewNotebookIcon,
+        onClick: () => container.onCreateDirectory(item, isGithubTree),
+      },
+      {
+        label: "New Notebook",
+        iconSrc: NewNotebookIcon,
+        onClick: () => container.onNewNotebookClicked(item, isGithubTree),
+      },
+      {
+        label: "Upload File",
+        iconSrc: NewNotebookIcon,
+        onClick: () => container.openUploadFilePanel(item),
+      },
+    ];
+
+    // For GitHub paths remove "Delete", "Rename", "New Directory", "Upload File"
+    if (GitHubUtils.fromContentUri(item.path)) {
+      items = items.filter(
+        (item) =>
+          item.label !== "Delete" &&
+          item.label !== "Rename" &&
+          item.label !== "New Directory" &&
+          item.label !== "Upload File"
+      );
+    }
+
+    return items;
+  };
+
+  const buildNotebookDirectoryNode = (
+    item: NotebookContentItem,
+    onFileClick: (item: NotebookContentItem) => void,
+    isGithubTree?: boolean
+  ): TreeNode => {
+    return {
+      label: item.name,
+      iconSrc: undefined,
+      className: "notebookHeader",
+      isAlphaSorted: true,
+      isLeavesParentsSeparate: true,
+      onClick: () => {
+        if (!item.children) {
+          loadSubitems(item, isGithubTree);
+        }
+      },
+      isSelected: () => {
+        return (
+          activeTab &&
+          activeTab.tabKind === ViewModels.CollectionTabKind.NotebookV2 &&
+          /* TODO Redesign Tab interface so that resource tree doesn't need to know about NotebookV2Tab.
+                     NotebookV2Tab could be dynamically imported, but not worth it to just get this type right.
+                   */
+          (activeTab as any).notebookPath() === item.path
+        );
+      },
+      contextMenu: item.path !== pseudoDirPath ? createDirectoryContextMenu(container, item, isGithubTree) : undefined,
+      data: item,
+      children: buildChildNodes(item, onFileClick, isGithubTree),
+    };
+  };
+
+  const buildDataTree = (): TreeNode => {
+    const databaseTreeNodes: TreeNode[] = databases.map((database: ViewModels.Database) => {
+      const databaseNode: TreeNode = {
+        label: database.id(),
+        iconSrc: CosmosDBIcon,
+        isExpanded: false,
+        className: "databaseHeader",
+        children: [],
+        isSelected: () => useSelectedNode.getState().isDataNodeSelected(database.id()),
+        contextMenu: ResourceTreeContextMenuButtonFactory.createDatabaseContextMenu(container, database.id()),
+        onClick: async (isExpanded) => {
+          useSelectedNode.getState().setSelectedNode(database);
+          // Rewritten version of expandCollapseDatabase():
+          if (isExpanded) {
+            database.collapseDatabase();
+          } else {
+            if (databaseNode.children?.length === 0) {
+              databaseNode.isLoading = true;
+            }
+            await database.expandDatabase();
+          }
+          databaseNode.isLoading = false;
+          useCommandBar.getState().setContextButtons([]);
+          refreshActiveTab((tab: TabsBase) => tab.collection?.databaseId === database.id());
+        },
+        onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(database),
+      };
+
+      if (database.isDatabaseShared()) {
+        databaseNode.children.push({
+          label: "Scale",
+          isSelected: () =>
+            useSelectedNode
+              .getState()
+              .isDataNodeSelected(database.id(), undefined, [ViewModels.CollectionTabKind.DatabaseSettingsV2]),
+          onClick: database.onSettingsClick.bind(database),
+        });
+      }
+
+      // Find collections
+      database
+        .collections()
+        .forEach((collection: ViewModels.Collection) =>
+          databaseNode.children.push(buildCollectionNode(database, collection))
+        );
+
+      database.collections.subscribe((collections: ViewModels.Collection[]) => {
+        collections.forEach((collection: ViewModels.Collection) =>
+          databaseNode.children.push(buildCollectionNode(database, collection))
+        );
+      });
+
+      return databaseNode;
+    });
+
+    return {
+      label: undefined,
+      isExpanded: true,
+      children: databaseTreeNodes,
+    };
+  };
+
+  const buildCollectionNode = (database: ViewModels.Database, collection: ViewModels.Collection): TreeNode => {
+    const children: TreeNode[] = [];
+    children.push({
+      label: collection.getLabel(),
+      onClick: () => {
+        collection.openTab();
+        // push to most recent
+        mostRecentActivity.collectionWasOpened(userContext.databaseAccount?.id, collection);
+      },
+      isSelected: () =>
+        useSelectedNode
+          .getState()
+          .isDataNodeSelected(collection.databaseId, collection.id(), [
+            ViewModels.CollectionTabKind.Documents,
+            ViewModels.CollectionTabKind.Graph,
+          ]),
+      contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(container, collection),
+    });
+
+    if (isNotebookEnabled && userContext.apiType === "Mongo" && isPublicInternetAccessAllowed()) {
+      children.push({
+        label: "Schema (Preview)",
+        onClick: collection.onSchemaAnalyzerClick.bind(collection),
+        isSelected: () =>
+          useSelectedNode
+            .getState()
+            .isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.SchemaAnalyzer]),
+      });
+    }
+
+    if (userContext.apiType !== "Cassandra" || !isServerlessAccount()) {
+      children.push({
+        label: database.isDatabaseShared() || isServerlessAccount() ? "Settings" : "Scale & Settings",
+        onClick: collection.onSettingsClick.bind(collection),
+        isSelected: () =>
+          useSelectedNode
+            .getState()
+            .isDataNodeSelected(collection.databaseId, collection.id(), [
+              ViewModels.CollectionTabKind.CollectionSettingsV2,
+            ]),
+      });
+    }
+
+    const schemaNode: TreeNode = buildSchemaNode(collection);
+    if (schemaNode) {
+      children.push(schemaNode);
+    }
+
+    if (showScriptNodes) {
+      children.push(buildStoredProcedureNode(collection));
+      children.push(buildUserDefinedFunctionsNode(collection));
+      children.push(buildTriggerNode(collection));
+    }
+
+    // This is a rewrite of showConflicts
+    const showConflicts =
+      userContext?.databaseAccount?.properties.enableMultipleWriteLocations &&
+      collection.rawDataModel &&
+      !!collection.rawDataModel.conflictResolutionPolicy;
+
+    if (showConflicts) {
+      children.push({
+        label: "Conflicts",
+        onClick: collection.onConflictsClick.bind(collection),
+        isSelected: () =>
+          useSelectedNode
+            .getState()
+            .isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.Conflicts]),
+      });
+    }
+
+    return {
+      label: collection.id(),
+      iconSrc: CollectionIcon,
+      isExpanded: false,
+      children: children,
+      className: "collectionHeader",
+      contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(container, collection),
+      onClick: () => {
+        // Rewritten version of expandCollapseCollection
+        useSelectedNode.getState().setSelectedNode(collection);
+        useCommandBar.getState().setContextButtons([]);
+        refreshActiveTab(
+          (tab: TabsBase) =>
+            tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
+        );
+      },
+      onExpanded: () => {
+        if (showScriptNodes) {
+          collection.loadStoredProcedures();
+          collection.loadUserDefinedFunctions();
+          collection.loadTriggers();
+        }
+      },
+      isSelected: () => useSelectedNode.getState().isDataNodeSelected(collection.databaseId, collection.id()),
+      onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(collection),
+    };
+  };
+
+  const buildStoredProcedureNode = (collection: ViewModels.Collection): TreeNode => {
+    return {
+      label: "Stored Procedures",
+      children: collection.storedProcedures().map((sp: StoredProcedure) => ({
+        label: sp.id(),
+        onClick: sp.open.bind(sp),
+        isSelected: () =>
+          useSelectedNode
+            .getState()
+            .isDataNodeSelected(collection.databaseId, collection.id(), [
+              ViewModels.CollectionTabKind.StoredProcedures,
+            ]),
+        contextMenu: ResourceTreeContextMenuButtonFactory.createStoreProcedureContextMenuItems(container, sp),
+      })),
+      onClick: () => {
+        collection.selectedSubnodeKind(ViewModels.CollectionTabKind.StoredProcedures);
+        refreshActiveTab(
+          (tab: TabsBase) =>
+            tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
+        );
+      },
+    };
+  };
+
+  const buildUserDefinedFunctionsNode = (collection: ViewModels.Collection): TreeNode => {
+    return {
+      label: "User Defined Functions",
+      children: collection.userDefinedFunctions().map((udf: UserDefinedFunction) => ({
+        label: udf.id(),
+        onClick: udf.open.bind(udf),
+        isSelected: () =>
+          useSelectedNode
+            .getState()
+            .isDataNodeSelected(collection.databaseId, collection.id(), [
+              ViewModels.CollectionTabKind.UserDefinedFunctions,
+            ]),
+        contextMenu: ResourceTreeContextMenuButtonFactory.createUserDefinedFunctionContextMenuItems(container, udf),
+      })),
+      onClick: () => {
+        collection.selectedSubnodeKind(ViewModels.CollectionTabKind.UserDefinedFunctions);
+        refreshActiveTab(
+          (tab: TabsBase) =>
+            tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
+        );
+      },
+    };
+  };
+
+  const buildTriggerNode = (collection: ViewModels.Collection): TreeNode => {
+    return {
+      label: "Triggers",
+      children: collection.triggers().map((trigger: Trigger) => ({
+        label: trigger.id(),
+        onClick: trigger.open.bind(trigger),
+        isSelected: () =>
+          useSelectedNode
+            .getState()
+            .isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.Triggers]),
+        contextMenu: ResourceTreeContextMenuButtonFactory.createTriggerContextMenuItems(container, trigger),
+      })),
+      onClick: () => {
+        collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Triggers);
+        refreshActiveTab(
+          (tab: TabsBase) =>
+            tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
+        );
+      },
+    };
+  };
+
+  const buildSchemaNode = (collection: ViewModels.Collection): TreeNode => {
+    if (collection.analyticalStorageTtl() === undefined) {
+      return undefined;
+    }
+
+    if (!collection.schema || !collection.schema.fields) {
+      return undefined;
+    }
+
+    return {
+      label: "Schema",
+      children: getSchemaNodes(collection.schema.fields),
+      onClick: () => {
+        collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Schema);
+        refreshActiveTab((tab: TabsBase) => tab.collection && tab.collection.rid === collection.rid);
+      },
+    };
+  };
+
+  const getSchemaNodes = (fields: DataModels.IDataField[]): TreeNode[] => {
+    const schema: any = {};
+
+    //unflatten
+    fields.forEach((field: DataModels.IDataField) => {
+      const path: string[] = field.path.split(".");
+      const fieldProperties = [field.dataType.name, `HasNulls: ${field.hasNulls}`];
+      let current: any = {};
+      path.forEach((name: string, pathIndex: number) => {
+        if (pathIndex === 0) {
+          if (schema[name] === undefined) {
+            if (pathIndex === path.length - 1) {
+              schema[name] = fieldProperties;
+            } else {
+              schema[name] = {};
+            }
+          }
+          current = schema[name];
+        } else {
+          if (current[name] === undefined) {
+            if (pathIndex === path.length - 1) {
+              current[name] = fieldProperties;
+            } else {
+              current[name] = {};
+            }
+          }
+          current = current[name];
+        }
+      });
+    });
+
+    const traverse = (obj: any): TreeNode[] => {
+      const children: TreeNode[] = [];
+
+      if (obj !== undefined && !Array.isArray(obj) && typeof obj === "object") {
+        Object.entries(obj).forEach(([key, value]) => {
+          children.push({ label: key, children: traverse(value) });
+        });
+      } else if (Array.isArray(obj)) {
+        return [{ label: obj[0] }, { label: obj[1] }];
+      }
+
+      return children;
+    };
+
+    return traverse(schema);
+  };
+
+  const loadSubitems = async (item: NotebookContentItem, isGithubTree?: boolean): Promise<void> => {
+    const updatedItem = await container.notebookManager?.notebookContentClient?.updateItemChildren(item);
+    updateNotebookItem(updatedItem, isGithubTree);
+  };
+
+  const dataRootNode = buildDataTree();
+
+  if (isNotebookEnabled) {
+    return (
+      <>
+        <AccordionComponent>
+          <AccordionItemComponent title={"DATA"} isExpanded={!gitHubNotebooksContentRoot}>
+            <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
+          </AccordionItemComponent>
+          <AccordionItemComponent title={"NOTEBOOKS"}>
+            <TreeComponent className="notebookResourceTree" rootNode={buildNotebooksTree()} />
+          </AccordionItemComponent>
+        </AccordionComponent>
+
+        {buildGalleryCallout()}
+      </>
+    );
+  }
+
+  return <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />;
 };

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/Platform/Hosted/extractFeatures.ts

@@ -16,6 +16,7 @@ export type Features = {
   readonly enableTtl: boolean;
   readonly executeSproc: boolean;
   readonly enableAadDataPlane: boolean;
+  readonly enableKoResourceTree: boolean;
   readonly hostedDataExplorer: boolean;
   readonly junoEndpoint?: string;
   readonly livyEndpoint?: string;
@@ -27,7 +28,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 {
@@ -58,6 +58,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"),
     executeSproc: "true" === get("dataexplorerexecutesproc"),
     hostedDataExplorer: "true" === get("hosteddataexplorerenabled"),
     junoEndpoint: get("junoendpoint"),
@@ -73,6 +74,5 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     autoscaleDefault: "true" === get("autoscaledefault"),
     partitionKeyDefault: "true" === get("partitionkeytest"),
     partitionKeyDefault2: "true" === get("pkpartitionkeytest"),
-    notebooksTemporarilyDown: "true" === get("notebooksTemporarilyDown", "true"),
   };
 }

src/Utils/GalleryUtils.ts

@@ -243,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`);
 

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}`);

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,10 +109,7 @@ module.exports = function (_env = {}, argv = {}) {
   }
 
   const plugins = [
-    new CleanWebpackPlugin(),
-    new webpack.ProvidePlugin({
-      process: "process/browser",
-    }),
+    new CleanWebpackPlugin(["dist"]),
     new CreateFileWebpack({
       path: "./dist",
       fileName: "version.txt",
@@ -214,25 +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: {
@@ -250,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: {