Add command

* removed enableGalleryPublish, enableLinkInjection

* removed ENABLE_GALLERY_PUBLISH

.env.example

@@ -4,6 +4,8 @@ PORTAL_RUNNER_SUBSCRIPTION=
 PORTAL_RUNNER_RESOURCE_GROUP=
 PORTAL_RUNNER_DATABASE_ACCOUNT=
 PORTAL_RUNNER_DATABASE_ACCOUNT_KEY=
+PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT=
+PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY=
 PORTAL_RUNNER_CONNECTION_STRING=
 NOTEBOOKS_TEST_RUNNER_TENANT_ID=
 NOTEBOOKS_TEST_RUNNER_CLIENT_ID=

.eslintignore

@@ -87,7 +87,7 @@ src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
 src/Explorer/DataSamples/ContainerSampleGenerator.ts
 src/Explorer/DataSamples/DataSamplesUtil.test.ts
 src/Explorer/DataSamples/DataSamplesUtil.ts
-src/Explorer/Explorer.ts
+src/Explorer/Explorer.tsx
 src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.test.ts
 src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.ts
 src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.test.ts
@@ -162,7 +162,7 @@ src/Explorer/Panes/Tables/Validators/EntityPropertyValidationCommon.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValueValidator.ts
 src/Explorer/Panes/UploadFilePane.ts
 src/Explorer/Panes/UploadItemsPane.ts
-src/Explorer/SplashScreen/SplashScreenComponentAdapter.test.ts
+src/Explorer/SplashScreen/SplashScreen.test.ts
 src/Explorer/Tables/Constants.ts
 src/Explorer/Tables/DataTable/CacheBase.ts
 src/Explorer/Tables/DataTable/DataTableBindingManager.ts
@@ -200,7 +200,6 @@ src/Explorer/Tabs/QueryTab.test.ts
 src/Explorer/Tabs/QueryTab.ts
 src/Explorer/Tabs/QueryTablesTab.ts
 src/Explorer/Tabs/ScriptTabBase.ts
-src/Explorer/Tabs/SparkMasterTab.ts
 src/Explorer/Tabs/StoredProcedureTab.ts
 src/Explorer/Tabs/TabComponents.ts
 src/Explorer/Tabs/TabsBase.ts
@@ -377,8 +376,7 @@ src/Explorer/Notebook/temp/inputs/editor.tsx
 src/Explorer/Notebook/temp/markdown-cell.tsx
 src/Explorer/Notebook/temp/source.tsx
 src/Explorer/Notebook/temp/syntax-highlighter/index.tsx
-src/Explorer/SplashScreen/SplashScreenComponent.tsx
-src/Explorer/SplashScreen/SplashScreenComponentApdapter.tsx
+src/Explorer/SplashScreen/SplashScreen.tsx
 src/Explorer/Tabs/GalleryTab.tsx
 src/Explorer/Tabs/NotebookViewerTab.tsx
 src/Explorer/Tabs/TerminalTab.tsx

.eslintrc.allFiles.js

@@ -0,0 +1,35 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  plugins: ["@typescript-eslint"],
+  globals: {
+    Atomics: "readonly",
+    SharedArrayBuffer: "readonly",
+  },
+  overrides: [
+    {
+      files: ["**/*.tsx"],
+      plugins: ["react"],
+    },
+    {
+      files: ["**/*.{test,spec}.{ts,tsx}"],
+      env: {
+        jest: true,
+      },
+      plugins: ["jest"],
+    },
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: "module",
+  },
+  rules: {
+    "@typescript-eslint/no-unused-vars-experimental": "error",
+  },
+};

.github/workflows/ci.yml

@@ -156,6 +156,7 @@ jobs:
         run: |
           npm ci
           npm start &
+          node utils/cleanupDBs.js
           npm run wait-for-server
           npm run test:e2e
         shell: bash
@@ -165,6 +166,8 @@ jobs:
           PORTAL_RUNNER_RESOURCE_GROUP: ${{ secrets.PORTAL_RUNNER_RESOURCE_GROUP }}
           PORTAL_RUNNER_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT }}
           PORTAL_RUNNER_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT_KEY }}
+          PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT }}
+          PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY }}
           NOTEBOOKS_TEST_RUNNER_TENANT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_TENANT_ID }}
           NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
           NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}

CODING_GUIDELINES.md

@@ -0,0 +1,194 @@
+# Coding Guidelines and Recommendations
+
+Cosmos Explorer has been under constant development for over 5 years. As a result, there are many different patterns and practices in the codebase. This document serves as a guide to how we write code and helps avoid propagating practices which are no longer preferred. Each requirement in this document is labeled and color-coded to show the relative importance. In order from highest to lowest importance:
+
+✅ DO this. If you feel you need an exception, engage with the project owners _prior_ to implementation.
+
+⛔️ DO NOT do this. If you feel you need an exception, engage with the project owners _prior_ to implementation.
+
+☑️ YOU SHOULD strongly consider this but it is not a requirement. If not following this advice, please comment code with why and proactively begin a discussion as part of the PR process.
+
+⚠️ YOU SHOULD NOT strongly consider not doing this. If not following this advice, please comment code with why and proactively begin a discussion as part of the PR process.
+
+💭 YOU MAY consider this advice if appropriate to your situation. Other team members may comment on this as part of PR review, but there is no need to be proactive.
+
+## Development Environment
+
+☑️ YOU SHOULD
+
+- Use VSCode and install the following extensions. This setup will catch most linting/formatting/type errors as you develop:
+  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+  - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+
+💭 YOU MAY
+
+- Use the [GitHub CLI](https://cli.github.com/). It has helpful workflows for submitting PRs as well as for checking out other team member's PRs.
+- Use Windows, Linux (including WSL), or OSX. We have team members developing on all three environments.
+
+✅ DO
+
+- Maintain cross-platform compatibility when modifying any engineering or build systems
+
+## Code Formatting
+
+✅ DO
+
+- Use [Prettier](https://prettier.io/) to format your code
+  - This will occur automatically if using the recommended editor setup
+  - `npm run format` will also format code
+
+## Linting
+
+✅ DO
+
+- Use [ESLint](https://eslint.org/) to check for code errors.
+  - This will occur automatically if using the recommended editor setup
+  - `npm run lint` will also check for linting errors
+
+💭 YOU MAY
+
+- Consider adding new lint rules.
+  - If you find yourself performing "nits" as part of PR review, consider adding a lint rule that will automatically catch the error in the future
+
+⚠️ YOU SHOULD NOT
+
+- Disable lint rules
+  - Lint rules exist as guidance and to catch common mistakes
+  - You will find places we disable specific lint rules however it should be exceptional.
+  - If a rule does need to be disabled, prefer disabling a specific line instead of the entire file.
+
+⛔️ DO NOT
+
+- Add [TSLint](https://palantir.github.io/tslint/) rules
+  - TSLint has been deprecated and is on track to be removed
+  - Always prefer ESLint rules
+
+## UI Components
+
+☑️ YOU SHOULD
+
+- Write new components using [React](https://reactjs.org/). We are actively migrating Cosmos Explorer off of [Knockout](https://knockoutjs.com/).
+- Use [Fluent](https://developer.microsoft.com/en-us/fluentui#/) components.
+  - Fluent components are designed to be highly accessible and composable
+  - Using Fluent allows us to build upon the work of the Fluent team and leads to a lower total cost of ownership for UI code
+
+### React
+
+☑️ YOU SHOULD
+
+- Use pure functional components when no state is required
+
+💭 YOU MAY
+
+- Use functional (hooks) or class components
+  - The project contains examples of both
+  - Neither is strongly preferred at this time
+
+⛔️ DO NOT
+
+- Use inheritance for sharing component behavior.
+  - React documentation covers this topic in detail https://reactjs.org/docs/composition-vs-inheritance.html
+- Suffix your file or component name with "Component"
+  - Even though the code has examples of it, we are ending the practice.
+
+## Libraries
+
+⚠️ YOU SHOULD NOT
+
+- Add new libraries to package.json.
+  - Adding libraries may bring in code that explodes the bundled size or attempts to run NodeJS code in the browser
+  - Consult with project owners for help with library selection if one is needed
+
+⛔️ DO NOT
+
+- Use underscore.js
+  - Much of this library is now native to JS and will be automatically transpiled
+- Use jQuery
+  - Much of this library is not native to the DOM.
+  - We are planning to remove it
+
+## Testing
+
+⛔️ DO NOT
+
+- Decrease test coverage
+  - Unit/Functional test coverage is checked as part of the CI process
+
+### Unit Tests
+
+✅ DO
+
+- Write unit tests for non-UI and utility code.
+- Write your tests using [Jest](https://jestjs.io/)
+
+☑️ YOU SHOULD
+
+- Abstract non-UI and utility code so it can run either the NodeJS or Browser environment
+
+### Functional(Component) Tests
+
+✅ DO
+
+- Write tests for UI components
+- Write your tests using [Jest](https://jestjs.io/)
+- Use either Enzyme or React Testing Library to perform component tests.
+
+### Mocking
+
+✅ DO
+
+- Use Jest's built-in mocking helpers
+
+☑️ YOU SHOULD
+
+- Write code that does not require mocking
+- Build components that do not require mocking extremely large or difficult to mock objects (like Explorer.ts). Pass _only_ what you need.
+
+⛔️ DO NOT
+
+- Use sinon.js for mocking
+  - Sinon has been deprecated and planned for removal
+
+### End to End Tests
+
+✅ DO
+
+- Use [Puppeteer](https://developers.google.com/web/tools/puppeteer) and [Jest](https://jestjs.io/)
+- Write or modify an existing E2E test that covers the primary use case of any major feature.
+  - Use caution. Do not try to cover every case. End to End tests can be slow and brittle.
+
+☑️ YOU SHOULD
+
+- Write tests that use accessible attributes to perform actions. Role, Title, Label, etc
+  - More information https://testing-library.com/docs/queries/about#priority
+
+⚠️ YOU SHOULD NOT
+
+- Add test specfic `data-*` attributes to dom elements
+  - This is a common current practice, but one we would like to avoid in the future
+  - End to end tests need to use semantic HTML and accesible attributes to be truely end to end
+  - No user or screen reader actually navigates an app using `data-*` attributes
+- Add arbitrary time delays to wait for page to render or element to be ready.
+  - All the time delays add up and slow down testing.
+  - Prefer using the framework's "wait for..." functionality.
+
+### Migrating Knockout to React
+
+✅ DO
+
+- Consult other team members before beginning migration work. There is a significant amount of flux in patterns we are using and it is important we do not propagate incorrect patterns.
+- Start by converting HTML to JSX: https://magic.reactjs.net/htmltojsx.htm. Add functionality as a second step.
+
+☑️ YOU SHOULD
+
+- Write React components that require no dependency on Knockout or observables to trigger rendering.
+
+## Browser Support
+
+✅ DO
+
+- Support all [browsers supported by the Azure Portal](https://docs.microsoft.com/en-us/azure/azure-portal/azure-portal-supported-browsers-devices)
+- Support IE11
+  - In practice, this should not need to be considered as part of a normal development workflow
+  - Polyfills and transpilation are already provided by our engineering systems.
+  - This requirement will be removed on March 30th, 2021 when Azure drops IE11 support.

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contribution guidelines to Data Explorer
 
-This project welcomes contributions and suggestions.  Most contributions require you to agree to a
+This project welcomes contributions and suggestions. Most contributions require you to agree to a
 Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
 the rights to use your contribution. For details, visit https://cla.microsoft.com.
 
@@ -13,6 +13,7 @@ For more information see the [Code of Conduct FAQ](https://opensource.microsoft.
 contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
 
 ## Microsoft Open Source Code of Conduct
+
 This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
 
 Resources:
@@ -20,33 +21,3 @@ Resources:
 - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
 - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)
 - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns
-
-## Browser support
-Please make sure to support all modern browsers as well as Internet Explorer 11.
-For IE support, polyfill is preferred over new usage of lodash or underscore. We already polyfill almost everything by importing babel-polyfill at the top of entry points.
-
-
-## Coding guidelines, conventions and recommendations
-### Typescript
-* Follow this [typescript style guide](https://github.com/excelmicro/typescript) which is based on [airbnb's style  guide](https://github.com/airbnb/javascript).
-* Conventions speficic to this project:
-  - Use double-quotes for string
-  - Don't use `null`, use `undefined`
-  - Pascal case for private static readonly fields
-  - Camel case for classnames in markup
-* Don't use class unless necessary
-* Code related to notebooks should be dynamically imported so that it is loaded from a separate bundle only if the account is notebook-enabled. There are already top-level notebook components which are dynamically imported and their dependencies can be statically imported from these files.
-* Prefer using [Fluent UI controls](https://developer.microsoft.com/en-us/fluentui#/controls/web) over creating your own, in order to maintain consistency and support a11y.
-
-### React
-* Prefer using React class components over function components and hooks unless you have a simple component and require no nested functions:
-  * Nested functions may be harder to test independently
-  * Switching from function component to class component later mayb be painful
-
-## Testing
-Any PR should not decrease testing coverage.
-
-## Recommended Tools and VS Code extensions
-* [Bookmarks](https://github.com/alefragnani/vscode-bookmarks)
-* [Bracket pair colorizer](https://github.com/CoenraadS/Bracket-Pair-Colorizer-2)
-* [GitHub Pull Requests and Issues](https://github.com/Microsoft/vscode-pull-request-github)

images/notebook/publish_content.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.31449 2.01439L4.00103 5.31963L3.26105 4.57965L7.8407 0L12.4203 4.57965L11.6804 5.31963L8.36691 2.01439V12.8428H7.31449V2.01439ZM13.629 12.8428H14.6814V16H1V12.8428H2.05242V14.9476H13.629V12.8428Z" fill="#0078D4"/>
+</svg>

less/Common/Constants.less

@@ -57,6 +57,13 @@
 
 @FocusColor: #605e5c;
 
+@GalleryBackgroundColor: #fdfdfd;
+
+//Icons
+@InfoIconColor: #0072c6;
+@WarningIconColor: #db7500;
+@ErrorIconColor: #b91f26;
+
 /******************************************************************************
                                 METRICS
 /******************************************************************************/

less/documentDB.less

@@ -1523,6 +1523,21 @@ p {
   .tooltipVisible();
 }
 
+.inputTooltip {
+  .inputTooltip();
+}
+
+.inputTooltip .inputTooltipText {
+  top: -68px;
+  .inputTooltipText();
+}
+
+.inputTooltip .inputTooltipText::after {
+  border-width: @MediumSpace @MediumSpace 0 @MediumSpace;
+  top: 55px;
+  .inputTooltipTextAfter();
+}
+
 .infoTooltip a {
   color: @AccentHigh;
 }
@@ -3028,3 +3043,45 @@ settings-pane {
 .collapsibleSection :hover {
   cursor: pointer;
 }
+
+.messageBarInfoIcon {
+  color: @InfoIconColor;
+}
+
+.messageBarWarningIcon {
+  color: @WarningIconColor;
+}
+
+.freeTierInfoBanner {
+  background-color: @BaseLow;
+  display: inline-flex;
+  padding: @DefaultSpace;
+  width: 100%;
+
+  .freeTierInfoIcon img {
+    height: 28px;
+    width: 28px;
+    margin-left: 4px;
+  }
+
+  .freeTierInfoMessage {
+    margin: auto 0;
+    padding-left: @MediumSpace;
+  }
+}
+
+.freeTierInlineWarning {
+  display: inline-flex;
+  padding: 8px 8px 8px 0;
+  width: 100%;
+
+  .freeTierWarningIcon img {
+    height: 20px;
+    width: 20px;
+  }
+
+  .freeTierWarningMessage {
+    margin: auto 0;
+    padding-left: @SmallSpace;
+  }
+}

package.json

@@ -10,10 +10,10 @@
     "@azure/identity": "1.2.1",
     "@babel/plugin-proposal-class-properties": "7.12.1",
     "@babel/plugin-proposal-decorators": "7.12.12",
-    "@jupyterlab/services": "6.0.0-rc.2",
-    "@jupyterlab/terminal": "3.0.0-rc.2",
+    "@jupyterlab/services": "6.0.2",
+    "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.5.9",
-    "@nteract/commutable": "7.3.2",
+    "@nteract/commutable": "7.4.2",
     "@nteract/connected-components": "6.8.2",
     "@nteract/core": "15.1.0",
     "@nteract/data-explorer": "8.0.3",
@@ -49,6 +49,7 @@
     "bootstrap": "3.4.1",
     "canvas": "file:./canvas",
     "clean-webpack-plugin": "0.1.19",
+    "clipboard-copy": "4.0.1",
     "copy-webpack-plugin": "6.0.2",
     "crossroads": "0.12.2",
     "css-element-queries": "1.1.1",
@@ -60,10 +61,14 @@
     "dotenv": "8.2.0",
     "es6-object-assign": "1.1.0",
     "es6-symbol": "3.1.3",
+    "eslint-nibble": "6.1.0",
     "eslint-plugin-jest": "23.13.2",
     "eslint-plugin-react": "7.20.0",
     "hasher": "1.2.0",
     "html2canvas": "1.0.0-rc.5",
+    "i18next": "19.8.4",
+    "i18next-browser-languagedetector": "6.0.1",
+    "i18next-http-backend": "1.0.23",
     "immutable": "4.0.0-rc.12",
     "is-ci": "2.0.0",
     "jquery": "3.5.1",
@@ -86,6 +91,7 @@
     "react-dnd-html5-backend": "9.4.0",
     "react-dom": "16.13.1",
     "react-hotkeys": "2.0.0",
+    "react-i18next": "11.8.5",
     "react-notification-system": "0.2.17",
     "react-redux": "7.1.3",
     "redux": "4.0.4",
@@ -124,7 +130,7 @@
     "@types/prop-types": "15.5.8",
     "@types/puppeteer": "3.0.1",
     "@types/q": "1.5.1",
-    "@types/react": "16.9.56",
+    "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
     "@types/react-notification-system": "0.2.39",
     "@types/react-redux": "7.1.7",
@@ -207,6 +213,7 @@
     "format": "prettier --write \"{src,test}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
     "format:check": "prettier --check \"{src,test}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
     "lint": "tslint --project tsconfig.json && eslint \"**/*.{ts,tsx}\"",
+    "lint:important": "eslint --no-ingore --no-eslintrc -c ./eslintrc.important.js \"**/*.{ts,tsx}\"",
     "build:contracts": "npm run compile:contracts",
     "strictEligibleFiles": "node ./strict-migration-tools/index.js",
     "autoAddStrictEligibleFiles": "node ./strict-migration-tools/autoAdd.js",

sampleData/gremlinSampleData.json

@@ -3,6 +3,7 @@
   "offerThroughput": 400,
   "databaseLevelThroughput": false,
   "collectionId": "Persons",
+  "createNewDatabase": true,
   "partitionKey": { "kind": "Hash", "paths": ["/name"] },
   "data": [
     "g.addV('person').property(id, '1').property('name', 'Eva').property('age', 44)",

src/Common/Constants.ts

@@ -105,8 +105,6 @@ export class Features {
   public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
   public static readonly enableTtl = "enablettl";
   public static readonly enableNotebooks = "enablenotebooks";
-  public static readonly enableGalleryPublish = "enablegallerypublish";
-  public static readonly enableLinkInjection = "enablelinkinjection";
   public static readonly enableSpark = "enablespark";
   public static readonly livyEndpoint = "livyendpoint";
   public static readonly notebookServerUrl = "notebookserverurl";
@@ -119,7 +117,9 @@ export class Features {
   public static readonly enableSchema = "enableschema";
   public static readonly enableSDKoperations = "enablesdkoperations";
   public static readonly showMinRUSurvey = "showminrusurvey";
+  public static readonly enableDatabaseSettingsTabV1 = "enabledbsettingsv1";
   public static readonly selfServeType = "selfservetype";
+  public static readonly enableKOPanel = "enablekopanel";
 }
 
 // flight names returned from the portal are always lowercase

src/Common/MongoProxyClient.test.ts

@@ -220,7 +220,6 @@ describe("MongoProxyClient", () => {
   describe("getEndpoint", () => {
     beforeEach(() => {
       resetConfigContext();
-      delete window.authType;
       updateUserContext({
         databaseAccount,
       });
@@ -241,7 +240,9 @@ describe("MongoProxyClient", () => {
     });
 
     it("returns a guest endpoint", () => {
-      window.authType = AuthType.EncryptedToken;
+      updateUserContext({
+        authType: AuthType.EncryptedToken,
+      });
       const endpoint = getEndpoint();
       expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/guest/mongo/explorer");
     });

src/Common/MongoProxyClient.ts

@@ -20,7 +20,7 @@ const defaultHeaders = {
 };
 
 function authHeaders() {
-  if (window.authType === AuthType.EncryptedToken) {
+  if (userContext.authType === AuthType.EncryptedToken) {
     return { [HttpHeaders.guestAccessToken]: userContext.accessToken };
   } else {
     return { [HttpHeaders.authorization]: userContext.authorizationToken };
@@ -337,7 +337,7 @@ export function createMongoCollectionWithProxy(
 export function getEndpoint(): string {
   let url = (configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT) + "/api/mongo/explorer";
 
-  if (window.authType === AuthType.EncryptedToken) {
+  if (userContext.authType === AuthType.EncryptedToken) {
     url = url.replace("api/mongo", "api/guest/mongo");
   }
   return url;

src/Common/dataAccess/createCollection.test.ts

@@ -27,13 +27,17 @@ describe("createCollection", () => {
   });
 
   it("should call ARM if logged in with AAD", async () => {
-    window.authType = AuthType.AAD;
+    updateUserContext({
+      authType: AuthType.AAD,
+    });
     await createCollection(createCollectionParams);
     expect(armRequest).toHaveBeenCalled();
   });
 
   it("should call SDK if not logged in with non-AAD method", async () => {
-    window.authType = AuthType.MasterKey;
+    updateUserContext({
+      authType: AuthType.MasterKey,
+    });
     (client as jest.Mock).mockReturnValue({
       databases: {
         createIfNotExists: () => {

src/Common/dataAccess/createCollection.ts

@@ -35,7 +35,7 @@ export const createCollection = async (params: DataModels.CreateCollectionParams
   );
   try {
     let collection: DataModels.Collection;
-    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
       if (params.createNewDatabase) {
         const createDatabaseParams: DataModels.CreateDatabaseParams = {
           autoPilotMaxThroughput: params.autoPilotMaxThroughput,

src/Common/dataAccess/createDatabase.ts

@@ -34,7 +34,7 @@ export async function createDatabase(params: DataModels.CreateDatabaseParams): P
     if (userContext.defaultExperience === DefaultAccountExperienceType.Table) {
       throw new Error("Creating database resources is not allowed for tables accounts");
     }
-    const database: DataModels.Database = await (window.authType === AuthType.AAD && !userContext.useSDKOperations
+    const database: DataModels.Database = await (userContext.authType === AuthType.AAD && !userContext.useSDKOperations
       ? createDatabaseWithARM(params)
       : createDatabaseWithSDK(params));
 

src/Common/dataAccess/createStoredProcedure.ts

@@ -22,7 +22,7 @@ export async function createStoredProcedure(
   const clearMessage = logConsoleProgress(`Creating stored procedure ${storedProcedure.id}`);
   try {
     if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
     ) {

src/Common/dataAccess/createTrigger.ts

@@ -19,7 +19,7 @@ export async function createTrigger(
   const clearMessage = logConsoleProgress(`Creating trigger ${trigger.id}`);
   try {
     if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
     ) {

src/Common/dataAccess/createUserDefinedFunction.ts

@@ -22,7 +22,7 @@ export async function createUserDefinedFunction(
   const clearMessage = logConsoleProgress(`Creating user defined function ${userDefinedFunction.id}`);
   try {
     if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
     ) {

src/Common/dataAccess/deleteCollection.test.ts

@@ -20,13 +20,17 @@ describe("deleteCollection", () => {
   });
 
   it("should call ARM if logged in with AAD", async () => {
-    window.authType = AuthType.AAD;
+    updateUserContext({
+      authType: AuthType.AAD,
+    });
     await deleteCollection("database", "collection");
     expect(armRequest).toHaveBeenCalled();
   });
 
   it("should call SDK if not logged in with non-AAD method", async () => {
-    window.authType = AuthType.MasterKey;
+    updateUserContext({
+      authType: AuthType.MasterKey,
+    });
     (client as jest.Mock).mockReturnValue({
       database: () => {
         return {

src/Common/dataAccess/deleteCollection.ts

@@ -13,7 +13,7 @@ import { client } from "../CosmosClient";
 export async function deleteCollection(databaseId: string, collectionId: string): Promise<void> {
   const clearMessage = logConsoleProgress(`Deleting container ${collectionId}`);
   try {
-    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
       await deleteCollectionWithARM(databaseId, collectionId);
     } else {
       await client().database(databaseId).container(collectionId).delete();

src/Common/dataAccess/deleteDatabase.test.ts

@@ -20,13 +20,17 @@ describe("deleteDatabase", () => {
   });
 
   it("should call ARM if logged in with AAD", async () => {
-    window.authType = AuthType.AAD;
+    updateUserContext({
+      authType: AuthType.AAD,
+    });
     await deleteDatabase("database");
     expect(armRequest).toHaveBeenCalled();
   });
 
   it("should call SDK if not logged in with non-AAD method", async () => {
-    window.authType = AuthType.MasterKey;
+    updateUserContext({
+      authType: AuthType.MasterKey,
+    });
     (client as jest.Mock).mockReturnValue({
       database: () => {
         return {

src/Common/dataAccess/deleteDatabase.ts

@@ -16,7 +16,7 @@ export async function deleteDatabase(databaseId: string): Promise<void> {
     if (userContext.defaultExperience === DefaultAccountExperienceType.Table) {
       throw new Error("Deleting database resources is not allowed for tables accounts");
     }
-    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
       await deleteDatabaseWithARM(databaseId);
     } else {
       await client().database(databaseId).delete();

src/Common/dataAccess/deleteStoredProcedure.ts

@@ -14,7 +14,7 @@ export async function deleteStoredProcedure(
   const clearMessage = logConsoleProgress(`Deleting stored procedure ${storedProcedureId}`);
   try {
     if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
     ) {

src/Common/dataAccess/deleteTrigger.ts

@@ -10,7 +10,7 @@ export async function deleteTrigger(databaseId: string, collectionId: string, tr
   const clearMessage = logConsoleProgress(`Deleting trigger ${triggerId}`);
   try {
     if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
     ) {

src/Common/dataAccess/deleteUserDefinedFunction.ts

@@ -10,7 +10,7 @@ export async function deleteUserDefinedFunction(databaseId: string, collectionId
   const clearMessage = logConsoleProgress(`Deleting user defined function ${id}`);
   try {
     if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
     ) {

src/Common/dataAccess/getCollectionDataUsageSize.ts

@@ -41,7 +41,7 @@ interface MetricsResponse {
 }
 
 export const getCollectionUsageSizeInKB = async (databaseName: string, containerName: string): Promise<number> => {
-  if (window.authType !== AuthType.AAD) {
+  if (userContext.authType !== AuthType.AAD) {
     return undefined;
   }
 
@@ -76,7 +76,7 @@ export const getCollectionUsageSizeInKB = async (databaseName: string, container
     return dataUsageSizeInKb + indexUsageSizeInKb;
   } catch (error) {
     handleError(error, "getCollectionUsageSize");
-    throw error;
+    return undefined;
   }
 };
 

src/Common/dataAccess/getIndexTransformationProgress.ts

@@ -3,9 +3,10 @@ import { handleError } from "../ErrorHandlingUtils";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import * as Constants from "../Constants";
 import { AuthType } from "../../AuthType";
+import { userContext } from "../../UserContext";
 
 export async function getIndexTransformationProgress(databaseId: string, collectionId: string): Promise<number> {
-  if (window.authType !== AuthType.AAD) {
+  if (userContext.authType !== AuthType.AAD) {
     return undefined;
   }
   let indexTransformationPercentage: number;

src/Common/dataAccess/readCollection.test.ts

@@ -9,6 +9,7 @@ import { updateUserContext } from "../../UserContext";
 describe("readCollection", () => {
   beforeAll(() => {
     updateUserContext({
+      authType: AuthType.ResourceToken,
       databaseAccount: {
         name: "test",
       } as DatabaseAccount,
@@ -17,7 +18,6 @@ describe("readCollection", () => {
   });
 
   it("should call SDK if logged in with resource token", async () => {
-    window.authType = AuthType.ResourceToken;
     (client as jest.Mock).mockReturnValue({
       database: () => {
         return {

src/Common/dataAccess/readCollectionOffer.ts

@@ -16,7 +16,7 @@ export const readCollectionOffer = async (params: ReadCollectionOfferParams): Pr
 
   try {
     if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience !== DefaultAccountExperienceType.Table
     ) {

src/Common/dataAccess/readCollections.test.ts

@@ -19,13 +19,17 @@ describe("readCollections", () => {
   });
 
   it("should call ARM if logged in with AAD", async () => {
-    window.authType = AuthType.AAD;
+    updateUserContext({
+      authType: AuthType.AAD,
+    });
     await readCollections("database");
     expect(armRequest).toHaveBeenCalled();
   });
 
   it("should call SDK if not logged in with non-AAD method", async () => {
-    window.authType = AuthType.MasterKey;
+    updateUserContext({
+      authType: AuthType.MasterKey,
+    });
     (client as jest.Mock).mockReturnValue({
       database: () => {
         return {

src/Common/dataAccess/readCollections.ts

@@ -15,7 +15,7 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
   const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
   try {
     if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience !== DefaultAccountExperienceType.MongoDB &&
       userContext.defaultExperience !== DefaultAccountExperienceType.Table

src/Common/dataAccess/readDatabaseOffer.ts

@@ -15,7 +15,7 @@ export const readDatabaseOffer = async (params: ReadDatabaseOfferParams): Promis
 
   try {
     if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience !== DefaultAccountExperienceType.Table
     ) {

src/Common/dataAccess/readDatabases.test.ts

@@ -19,13 +19,17 @@ describe("readDatabases", () => {
   });
 
   it("should call ARM if logged in with AAD", async () => {
-    window.authType = AuthType.AAD;
+    updateUserContext({
+      authType: AuthType.AAD,
+    });
     await readDatabases();
     expect(armRequest).toHaveBeenCalled();
   });
 
   it("should call SDK if not logged in with non-AAD method", async () => {
-    window.authType = AuthType.MasterKey;
+    updateUserContext({
+      authType: AuthType.MasterKey,
+    });
     (client as jest.Mock).mockReturnValue({
       databases: {
         readAll: () => {

src/Common/dataAccess/readDatabases.ts

@@ -15,7 +15,7 @@ export async function readDatabases(): Promise<DataModels.Database[]> {
   const clearMessage = logConsoleProgress(`Querying databases`);
   try {
     if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience !== DefaultAccountExperienceType.Table
     ) {

src/Common/dataAccess/readMongoDBCollection.tsx

@@ -9,7 +9,7 @@ export async function readMongoDBCollectionThroughRP(
   databaseId: string,
   collectionId: string
 ): Promise<MongoDBCollectionResource> {
-  if (window.authType !== AuthType.AAD) {
+  if (userContext.authType !== AuthType.AAD) {
     return undefined;
   }
   let collection: MongoDBCollectionResource;

src/Common/dataAccess/readStoredProcedures.ts

@@ -14,7 +14,7 @@ export async function readStoredProcedures(
   const clearMessage = logConsoleProgress(`Querying stored procedures for container ${collectionId}`);
   try {
     if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
     ) {

src/Common/dataAccess/readTriggers.ts

@@ -14,7 +14,7 @@ export async function readTriggers(
   const clearMessage = logConsoleProgress(`Querying triggers for container ${collectionId}`);
   try {
     if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
     ) {

src/Common/dataAccess/readUserDefinedFunctions.ts

@@ -14,7 +14,7 @@ export async function readUserDefinedFunctions(
   const clearMessage = logConsoleProgress(`Querying user defined functions for container ${collectionId}`);
   try {
     if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
     ) {

src/Common/dataAccess/updateCollection.ts

@@ -41,7 +41,7 @@ export async function updateCollection(
 
   try {
     if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience !== DefaultAccountExperienceType.MongoDB &&
       userContext.defaultExperience !== DefaultAccountExperienceType.Table

src/Common/dataAccess/updateOffer.ts

@@ -58,7 +58,7 @@ export const updateOffer = async (params: UpdateOfferParams): Promise<Offer> =>
   const clearMessage = logConsoleProgress(`Updating offer for ${offerResourceText}`);
 
   try {
-    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
       if (params.collectionId) {
         updatedOffer = await updateCollectionOfferWithARM(params);
       } else if (userContext.defaultExperience === DefaultAccountExperienceType.Table) {

src/Common/dataAccess/updateStoredProcedure.ts

@@ -22,7 +22,7 @@ export async function updateStoredProcedure(
   const clearMessage = logConsoleProgress(`Updating stored procedure ${storedProcedure.id}`);
   try {
     if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
     ) {

src/Common/dataAccess/updateTrigger.ts

@@ -19,7 +19,7 @@ export async function updateTrigger(
   const clearMessage = logConsoleProgress(`Updating trigger ${trigger.id}`);
   try {
     if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
     ) {

src/Common/dataAccess/updateUserDefinedFunction.ts

@@ -22,7 +22,7 @@ export async function updateUserDefinedFunction(
   const clearMessage = logConsoleProgress(`Updating user defined function ${userDefinedFunction.id}`);
   try {
     if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
     ) {

src/ConfigContext.ts

@@ -79,7 +79,11 @@ if (process.env.NODE_ENV === "development") {
 
 export async function initializeConfiguration(): Promise<ConfigContext> {
   try {
-    const response = await fetch("./config.json");
+    const response = await fetch("./config.json", {
+      headers: {
+        "If-None-Match": "", // disable client side cache
+      },
+    });
     if (response.status === 200) {
       try {
         const { allowedParentFrameOrigins, ...externalConfig } = await response.json();

src/Contracts/ViewModels.ts

@@ -5,7 +5,6 @@ import {
   TriggerDefinition,
   UserDefinedFunctionDefinition,
 } from "@azure/cosmos";
-import Q from "q";
 import { CommandButtonComponentProps } from "../Explorer/Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../Explorer/Explorer";
 import { ConsoleData } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
@@ -92,6 +91,7 @@ export interface Database extends TreeNode {
   onDeleteDatabaseContextMenuClick(source: Database, event: MouseEvent | KeyboardEvent): void;
   onSettingsClick: () => void;
   loadOffer(): Promise<void>;
+  getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
 }
 
 export interface CollectionBase extends TreeNode {
@@ -108,8 +108,8 @@ export interface CollectionBase extends TreeNode {
   isCollectionExpanded: ko.Observable<boolean>;
 
   onDocumentDBDocumentsClick(): void;
-  onNewQueryClick(source: any, event: MouseEvent, queryText?: string): void;
-  expandCollection(): Q.Promise<any>;
+  onNewQueryClick(source: any, event?: MouseEvent, queryText?: string): void;
+  expandCollection(): void;
   collapseCollection(): void;
   getDatabase(): Database;
 }
@@ -138,14 +138,13 @@ export interface Collection extends CollectionBase {
   openTab(): void;
 
   onSettingsClick: () => Promise<void>;
-  onDeleteCollectionContextMenuClick(source: Collection, event: MouseEvent): void;
 
   onNewGraphClick(): void;
-  onNewMongoQueryClick(source: any, event: MouseEvent, queryText?: string): void;
+  onNewMongoQueryClick(source: any, event?: MouseEvent, queryText?: string): void;
   onNewMongoShellClick(): void;
-  onNewStoredProcedureClick(source: Collection, event: MouseEvent): void;
-  onNewUserDefinedFunctionClick(source: Collection, event: MouseEvent): void;
-  onNewTriggerClick(source: Collection, event: MouseEvent): void;
+  onNewStoredProcedureClick(source: Collection, event?: MouseEvent): void;
+  onNewUserDefinedFunctionClick(source: Collection, event?: MouseEvent): void;
+  onNewTriggerClick(source: Collection, event?: MouseEvent): void;
   storedProcedures: ko.Computed<StoredProcedure[]>;
   userDefinedFunctions: ko.Computed<UserDefinedFunction[]>;
   triggers: ko.Computed<Trigger[]>;
@@ -176,9 +175,10 @@ export interface Collection extends CollectionBase {
 
   onDragOver(source: Collection, event: { originalEvent: DragEvent }): void;
   onDrop(source: Collection, event: { originalEvent: DragEvent }): void;
-  uploadFiles(fileList: FileList): Q.Promise<UploadDetails>;
+  uploadFiles(fileList: FileList): Promise<UploadDetails>;
 
   getLabel(): string;
+  getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
 }
 
 /**
@@ -293,10 +293,6 @@ export interface DocumentsTabOptions extends TabOptions {
   resourceTokenPartitionKey?: string;
 }
 
-export interface SettingsTabV2Options extends TabOptions {
-  getPendingNotification: Q.Promise<DataModels.Notification>;
-}
-
 export interface ConflictsTabOptions extends TabOptions {
   partitionKey: DataModels.PartitionKey;
   conflictIds: ko.ObservableArray<ConflictId>;
@@ -359,11 +355,12 @@ export enum CollectionTabKind {
   Notebook = 13 /* Deprecated */,
   Terminal = 14,
   NotebookV2 = 15,
-  SparkMasterTab = 16,
+  SparkMasterTab = 16 /* Deprecated */,
   Gallery = 17,
   NotebookViewer = 18,
   Schema = 19,
-  SettingsV2 = 20,
+  CollectionSettingsV2 = 20,
+  DatabaseSettingsV2 = 21,
 }
 
 export enum TerminalKind {
@@ -374,20 +371,20 @@ export enum TerminalKind {
 
 export interface DataExplorerInputsFrame {
   databaseAccount: any;
-  subscriptionId: string;
-  resourceGroup: string;
-  masterKey: string;
-  hasWriteAccess: boolean;
-  authorizationToken: string;
-  features: any;
-  csmEndpoint: string;
-  dnsSuffix: string;
-  serverId: string;
-  extensionEndpoint: string;
-  subscriptionType: SubscriptionType;
-  quotaId: string;
-  addCollectionDefaultFlight: string;
-  isTryCosmosDBSubscription: boolean;
+  subscriptionId?: string;
+  resourceGroup?: string;
+  masterKey?: string;
+  hasWriteAccess?: boolean;
+  authorizationToken?: string;
+  features: { [key: string]: string };
+  csmEndpoint?: string;
+  dnsSuffix?: string;
+  serverId?: string;
+  extensionEndpoint?: string;
+  subscriptionType?: SubscriptionType;
+  quotaId?: string;
+  addCollectionDefaultFlight?: string;
+  isTryCosmosDBSubscription?: boolean;
   loadDatabaseAccountTimestamp?: number;
   sharedThroughputMinimum?: number;
   sharedThroughputMaximum?: number;

src/Explorer/ComponentRegisterer.test.ts

@@ -20,10 +20,6 @@ describe("Component Registerer", () => {
     expect(ko.components.isRegistered("graph-style")).toBe(true);
   });
 
-  it("should register collapsible-panel component", () => {
-    expect(ko.components.isRegistered("collapsible-panel")).toBe(true);
-  });
-
   it("should register json-editor component", () => {
     expect(ko.components.isRegistered("json-editor")).toBe(true);
   });
@@ -45,7 +41,8 @@ describe("Component Registerer", () => {
   });
 
   it("should register settings-tab-v2 component", () => {
-    expect(ko.components.isRegistered("settings-tab-v2")).toBe(true);
+    expect(ko.components.isRegistered("database-settings-tab-v2")).toBe(true);
+    expect(ko.components.isRegistered("collection-settings-tab-v2")).toBe(true);
   });
 
   it("should register query-tab component", () => {
@@ -68,10 +65,6 @@ describe("Component Registerer", () => {
     expect(ko.components.isRegistered("terminal-tab")).toBe(true);
   });
 
-  it("should register spark-master-tab component", () => {
-    expect(ko.components.isRegistered("spark-master-tab")).toBe(true);
-  });
-
   it("should register mongo-shell-tab component", () => {
     expect(ko.components.isRegistered("mongo-shell-tab")).toBe(true);
   });

src/Explorer/ComponentRegisterer.ts

@@ -1,7 +1,6 @@
 import * as ko from "knockout";
 import * as PaneComponents from "./Panes/PaneComponents";
 import * as TabComponents from "./Tabs/TabComponents";
-import { CollapsiblePanelComponent } from "./Controls/CollapsiblePanel/CollapsiblePanelComponent";
 import { DiffEditorComponent } from "./Controls/DiffEditor/DiffEditorComponent";
 import { DynamicListComponent } from "./Controls/DynamicList/DynamicListComponent";
 import { EditorComponent } from "./Controls/Editor/EditorComponent";
@@ -17,7 +16,6 @@ ko.components.register("input-typeahead", new InputTypeaheadComponent());
 ko.components.register("new-vertex-form", NewVertexComponent);
 ko.components.register("error-display", new ErrorDisplayComponent());
 ko.components.register("graph-style", GraphStyleComponent);
-ko.components.register("collapsible-panel", new CollapsiblePanelComponent());
 ko.components.register("editor", new EditorComponent());
 ko.components.register("json-editor", new JsonEditorComponent());
 ko.components.register("diff-editor", new DiffEditorComponent());
@@ -26,12 +24,12 @@ ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponent
 ko.components.register("tabs-manager", TabsManagerKOComponent());
 
 // Collection Tabs
-ko.components.register("documents-tab", new TabComponents.MongoDocumentsTabV2());
+ko.components.register("documents-tab", new TabComponents.DocumentsTab());
 ko.components.register("mongo-documents-tab", new TabComponents.MongoDocumentsTab());
 ko.components.register("stored-procedure-tab", new TabComponents.StoredProcedureTab());
 ko.components.register("trigger-tab", new TabComponents.TriggerTab());
 ko.components.register("user-defined-function-tab", new TabComponents.UserDefinedFunctionTab());
-ko.components.register("settings-tab-v2", new TabComponents.SettingsTabV2());
+ko.components.register("collection-settings-tab-v2", new TabComponents.SettingsTabV2());
 ko.components.register("query-tab", new TabComponents.QueryTab());
 ko.components.register("tables-query-tab", new TabComponents.QueryTablesTab());
 ko.components.register("graph-tab", new TabComponents.GraphTab());
@@ -39,12 +37,12 @@ ko.components.register("mongo-shell-tab", new TabComponents.MongoShellTab());
 ko.components.register("conflicts-tab", new TabComponents.ConflictsTab());
 ko.components.register("notebookv2-tab", new TabComponents.NotebookV2Tab());
 ko.components.register("terminal-tab", new TabComponents.TerminalTab());
-ko.components.register("spark-master-tab", new TabComponents.SparkMasterTab());
 ko.components.register("gallery-tab", new TabComponents.GalleryTab());
 ko.components.register("notebook-viewer-tab", new TabComponents.NotebookViewerTab());
 
 // Database Tabs
 ko.components.register("database-settings-tab", new TabComponents.DatabaseSettingsTab());
+ko.components.register("database-settings-tab-v2", new TabComponents.SettingsTabV2());
 
 // Panes
 ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());
@@ -66,7 +64,6 @@ ko.components.register("table-query-select-pane", new PaneComponents.TableQueryS
 ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());
 ko.components.register("settings-pane", new PaneComponents.SettingsPaneComponent());
 ko.components.register("execute-sproc-params-pane", new PaneComponents.ExecuteSprocParamsComponent());
-ko.components.register("renew-adhoc-access-pane", new PaneComponents.RenewAdHocAccessPane());
 ko.components.register("upload-items-pane", new PaneComponents.UploadItemsPaneComponent());
 ko.components.register("load-query-pane", new PaneComponents.LoadQueryPaneComponent());
 ko.components.register("save-query-pane", new PaneComponents.SaveQueryPaneComponent());

src/Explorer/ContextMenuButtonFactory.ts

@@ -112,10 +112,7 @@ export class ResourceTreeContextMenuButtonFactory {
 
     items.push({
       iconSrc: DeleteCollectionIcon,
-      onClick: () => {
-        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-        selectedCollection && selectedCollection.onDeleteCollectionContextMenuClick(selectedCollection, null);
-      },
+      onClick: () => container.openDeleteCollectionConfirmationPane(),
       label: container.deleteCollectionText(),
       styleClass: "deleteCollectionMenuItem",
     });

src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts

@@ -1,56 +0,0 @@
-import * as ko from "knockout";
-import template from "./collapsible-panel-component.html";
-
-/**
- * Helper class for ko component registration
- */
-export class CollapsiblePanelComponent {
-  constructor() {
-    return {
-      viewModel: CollapsiblePanelViewModel,
-      template,
-    };
-  }
-}
-
-/**
- * Parameters for this component
- */
-interface CollapsiblePanelParams {
-  collapsedTitle: ko.Observable<string>;
-  expandedTitle: ko.Observable<string>;
-  isCollapsed?: ko.Observable<boolean>;
-  collapseToLeft?: boolean;
-}
-
-/**
- * Collapsible panel:
- *  Contains a header with [>] button to collapse and an title ("expandedTitle").
- *  Collapsing the panel:
- *   - shrinks width to narrow amount
- *   - hides children
- *   - shows [<]
- *   - shows vertical title ("collapsedTitle")
- *   - the default behavior is to collapse to the right (ie, place this component on the right or use "collapseToLeft" parameter)
- *
- * How to use in your markup:
- * <collapsible-panel params="{ collapsedTitle:'Properties', expandedTitle:'Expanded properties' }">
- *      <!-- add your markup here: the ko context is the same as outside of collapsible-panel (ie $data) -->
- * </collapsible-panel>
- *
- * Use the optional "isCollapsed" parameter to programmatically collapse/expand the pane from outside the component.
- * Use the optional "collapseToLeft" parameter to collapse to the left.
- */
-class CollapsiblePanelViewModel {
-  public params: CollapsiblePanelParams;
-  private isCollapsed: ko.Observable<boolean>;
-
-  public constructor(params: CollapsiblePanelParams) {
-    this.params = params;
-    this.isCollapsed = params.isCollapsed || ko.observable(false);
-  }
-
-  public toggleCollapse(): void {
-    this.isCollapsed(!this.isCollapsed());
-  }
-}

src/Explorer/Controls/CollapsiblePanel/collapsible-panel-component.html

@@ -1,44 +0,0 @@
-<div class="collapsiblePanel" data-bind="css: { paneCollapsed:isCollapsed() }">
-  <div class="panelHeader" data-bind="visible: !isCollapsed()">
-    <span
-      class="collapsedIconContainer collapseExpandButton"
-      data-bind="click:toggleCollapse, css: { 'pull-right':params.collapseToLeft }"
-    >
-      <img
-        class="collapsedIcon imgVerticalAlignment"
-        src="/imgarrowlefticon.svg"
-        alt="Collapse"
-        data-bind="css: { expanded:!isCollapsed(), iconMirror:params.collapseToLeft }"
-      />
-    </span>
-    <span
-      class="expandedTitle"
-      data-bind="text: params.expandedTitle, css:{ iconSpacer:!params.collapseToLeft }"
-    ></span>
-  </div>
-
-  <div class="collapsibleNav nav" data-bind="visible:isCollapsed">
-    <ul class="nav">
-      <li class="collapsedBtn collapseExpandButton">
-        <span class="collapsedIconContainer" data-bind="click: toggleCollapse">
-          <img
-            class="collapsedIcon"
-            src="/imgarrowlefticon.svg"
-            data-bind="css: { expanded:!isCollapsed(), iconMirror:params.collapseToLeft }"
-            alt="Expand"
-          />
-        </span>
-        <span class="rotatedInner" data-bind="click: toggleCollapse">
-          <span data-bind="text: params.collapsedTitle"></span>
-        </span>
-      </li>
-    </ul>
-  </div>
-
-  <div class="panelContent" data-bind="visible:!isCollapsed()">
-    <!-- ko with:$parent -->
-    <!-- ko template: { nodes: $componentTemplateNodes } -->
-    <!-- /ko -->
-    <!-- /ko -->
-  </div>
-</div>

src/Explorer/Controls/Dialog.tsx

@@ -1,9 +1,15 @@
 import * as React from "react";
-import { Dialog, DialogType, DialogFooter, IDialogProps } from "office-ui-fabric-react/lib/Dialog";
+import { Dialog as FluentDialog, DialogType, DialogFooter, IDialogProps } from "office-ui-fabric-react/lib/Dialog";
 import { IButtonProps, PrimaryButton, DefaultButton } from "office-ui-fabric-react/lib/Button";
 import { ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
 import { Link } from "office-ui-fabric-react/lib/Link";
-import { ChoiceGroup, FontIcon, IChoiceGroupProps } from "office-ui-fabric-react";
+import {
+  ChoiceGroup,
+  FontIcon,
+  IChoiceGroupProps,
+  IProgressIndicatorProps,
+  ProgressIndicator,
+} from "office-ui-fabric-react";
 
 export interface TextFieldProps extends ITextFieldProps {
   label: string;
@@ -27,6 +33,7 @@ export interface DialogProps {
   choiceGroupProps?: IChoiceGroupProps;
   textFieldProps?: TextFieldProps;
   linkProps?: LinkProps;
+  progressIndicatorProps?: IProgressIndicatorProps;
   primaryButtonText: string;
   secondaryButtonText: string;
   onPrimaryButtonClick: () => void;
@@ -43,7 +50,7 @@ const DIALOG_TITLE_FONT_SIZE = "17px";
 const DIALOG_TITLE_FONT_WEIGHT = 400;
 const DIALOG_SUBTEXT_FONT_SIZE = "15px";
 
-export class DialogComponent extends React.Component<DialogProps, {}> {
+export class Dialog extends React.Component<DialogProps> {
   constructor(props: DialogProps) {
     super(props);
   }
@@ -62,13 +69,14 @@ export class DialogComponent extends React.Component<DialogProps, {}> {
         showCloseButton: this.props.showCloseButton || false,
         onDismiss: this.props.onDismiss,
       },
-      modalProps: { isBlocking: this.props.isModal },
+      modalProps: { isBlocking: this.props.isModal, isDarkOverlay: false },
       minWidth: DIALOG_MIN_WIDTH,
       maxWidth: DIALOG_MAX_WIDTH,
     };
     const choiceGroupProps: IChoiceGroupProps = this.props.choiceGroupProps;
     const textFieldProps: ITextFieldProps = this.props.textFieldProps;
     const linkProps: LinkProps = this.props.linkProps;
+    const progressIndicatorProps: IProgressIndicatorProps = this.props.progressIndicatorProps;
     const primaryButtonProps: IButtonProps = {
       text: this.props.primaryButtonText,
       disabled: this.props.primaryButtonDisabled || false,
@@ -83,7 +91,7 @@ export class DialogComponent extends React.Component<DialogProps, {}> {
         : undefined;
 
     return (
-      <Dialog {...dialogProps}>
+      <FluentDialog {...dialogProps}>
         {choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}
         {textFieldProps && <TextField {...textFieldProps} />}
         {linkProps && (
@@ -91,11 +99,12 @@ export class DialogComponent extends React.Component<DialogProps, {}> {
             {linkProps.linkText} <FontIcon iconName="NavigateExternalInline" />
           </Link>
         )}
+        {progressIndicatorProps && <ProgressIndicator {...progressIndicatorProps} />}
         <DialogFooter>
           <PrimaryButton {...primaryButtonProps} />
           {secondaryButtonProps && <DefaultButton {...secondaryButtonProps} />}
         </DialogFooter>
-      </Dialog>
+      </FluentDialog>
     );
   }
 }

src/Explorer/Controls/DialogReactComponent/DialogComponentAdapter.tsx

@@ -1,16 +0,0 @@
-/**
- * This adapter is responsible to render the Dialog React component
- * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
- * and update any knockout observables passed from the parent.
- */
-import * as React from "react";
-import { DialogComponent, DialogProps } from "./DialogComponent";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-
-export class DialogComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<DialogProps>;
-
-  public renderComponent(): JSX.Element {
-    return <DialogComponent {...this.parameters()} />;
-  }
-}

src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx

@@ -47,13 +47,7 @@ export const FeaturePanelComponent: React.FunctionComponent = () => {
     { key: "feature.dataexplorerexecutesproc", label: "Execute stored procedure", value: "true" },
     { key: "feature.hosteddataexplorerenabled", label: "Hosted Data Explorer (deprecated?)", value: "true" },
     { key: "feature.enablettl", label: "Enable TTL", value: "true" },
-    { key: "feature.enablegallerypublish", label: "Enable Notebook Gallery Publishing", value: "true" },
     { key: "feature.selfServeType", label: "Self serve feature", value: "sample" },
-    {
-      key: "feature.enableLinkInjection",
-      label: "Enable Injecting Notebook Viewer Link into the first cell",
-      value: "true",
-    },
     { key: "feature.canexceedmaximumvalue", label: "Can exceed max value", value: "true" },
     {
       key: "feature.enablefixedcollectionwithsharedthroughput",

src/Explorer/Controls/FeaturePanel/__snapshots__/FeaturePanelComponent.test.tsx.snap

@@ -149,12 +149,6 @@ exports[`Feature panel renders all flags 1`] = `
           label="Enable TTL"
           onChange={[Function]}
         />
-        <StyledCheckboxBase
-          checked={false}
-          key="feature.enablegallerypublish"
-          label="Enable Notebook Gallery Publishing"
-          onChange={[Function]}
-        />
         <StyledCheckboxBase
           checked={false}
           key="feature.selfServeType"
@@ -163,8 +157,8 @@ exports[`Feature panel renders all flags 1`] = `
         />
         <StyledCheckboxBase
           checked={false}
-          key="feature.enableLinkInjection"
-          label="Enable Injecting Notebook Viewer Link into the first cell"
+          key="feature.canexceedmaximumvalue"
+          label="Can exceed max value"
           onChange={[Function]}
         />
       </Stack>
@@ -172,12 +166,6 @@ exports[`Feature panel renders all flags 1`] = `
         className="checkboxRow"
         horizontalAlign="space-between"
       >
-        <StyledCheckboxBase
-          checked={false}
-          key="feature.canexceedmaximumvalue"
-          label="Can exceed max value"
-          onChange={[Function]}
-        />
         <StyledCheckboxBase
           checked={false}
           key="feature.enablefixedcollectionwithsharedthroughput"

src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx

@@ -18,7 +18,6 @@ import * as React from "react";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
 import { FileSystemUtil } from "../../../Notebook/FileSystemUtil";
 import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";
-import { StyleConstants } from "../../../../Common/Constants";
 
 export interface GalleryCardComponentProps {
   data: IGalleryItem;
@@ -38,7 +37,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
   private static readonly cardImageHeight = 144;
   public static readonly cardHeightToWidthRatio =
     GalleryCardComponent.cardImageHeight / GalleryCardComponent.CARD_WIDTH;
-  private static readonly cardDescriptionMaxChars = 88;
+  private static readonly cardDescriptionMaxChars = 80;
   private static readonly cardItemGapBig = 10;
   private static readonly cardItemGapSmall = 8;
 
@@ -54,6 +53,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
 
     return (
       <Card
+        style={{ background: "white" }}
         aria-label={cardTitle}
         data-is-focusable="true"
         tokens={{ width: GalleryCardComponent.CARD_WIDTH, childrenGap: 0 }}
@@ -79,12 +79,16 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
 
         <Card.Section styles={{ root: { padding: GalleryCardComponent.cardItemGapBig } }}>
           <Text variant="small" nowrap>
-            {this.props.data.tags?.map((tag, index, array) => (
-              <span key={tag}>
-                <Link onClick={(event) => this.onClick(event, () => this.props.onTagClick(tag))}>{tag}</Link>
-                {index === array.length - 1 ? <></> : ", "}
-              </span>
-            ))}
+            {this.props.data.tags ? (
+              this.props.data.tags.map((tag, index, array) => (
+                <span key={tag}>
+                  <Link onClick={(event) => this.onClick(event, () => this.props.onTagClick(tag))}>{tag}</Link>
+                  {index === array.length - 1 ? <></> : ", "}
+                </span>
+              ))
+            ) : (
+              <br />
+            )}
           </Text>
 
           <Text
@@ -101,13 +105,14 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
           </Text>
 
           <Text variant="small" styles={{ root: { height: 36 } }}>
-            {this.props.data.description.substr(0, GalleryCardComponent.cardDescriptionMaxChars)}
+            {this.renderTruncatedDescription()}
           </Text>
 
           <span>
-            {this.generateIconText("RedEye", this.props.data.views.toString())}
-            {this.generateIconText("Download", this.props.data.downloads.toString())}
-            {this.props.isFavorite !== undefined &&
+            {this.props.data.views !== undefined && this.generateIconText("RedEye", this.props.data.views.toString())}
+            {this.props.data.downloads !== undefined &&
+              this.generateIconText("Download", this.props.data.downloads.toString())}
+            {this.props.data.favorites !== undefined &&
               this.generateIconText("Heart", this.props.data.favorites.toString())}
           </span>
         </Card.Section>
@@ -127,7 +132,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
               {this.props.isFavorite !== undefined &&
                 this.generateIconButtonWithTooltip(
                   this.props.isFavorite ? "HeartFill" : "Heart",
-                  this.props.isFavorite ? "Unlike" : "Like",
+                  this.props.isFavorite ? "Unfavorite" : "Favorite",
                   "left",
                   this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick
                 )}
@@ -144,12 +149,17 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
     );
   }
 
+  private renderTruncatedDescription = (): string => {
+    let truncatedDescription = this.props.data.description.substr(0, GalleryCardComponent.cardDescriptionMaxChars);
+    if (this.props.data.description.length > GalleryCardComponent.cardDescriptionMaxChars) {
+      truncatedDescription = `${truncatedDescription} ...`;
+    }
+    return truncatedDescription;
+  };
+
   private generateIconText = (iconName: string, text: string): JSX.Element => {
     return (
-      <Text
-        variant="tiny"
-        styles={{ root: { color: StyleConstants.BaseMedium, paddingRight: GalleryCardComponent.cardItemGapSmall } }}
-      >
+      <Text variant="tiny" styles={{ root: { color: "#605E5C", paddingRight: GalleryCardComponent.cardItemGapSmall } }}>
         <Icon iconName={iconName} styles={{ root: { verticalAlign: "middle" } }} /> {text}
       </Text>
     );

src/Explorer/Controls/NotebookGallery/Cards/__snapshots__/GalleryCardComponent.test.tsx.snap

@@ -5,6 +5,11 @@ exports[`GalleryCardComponent renders 1`] = `
   aria-label="name"
   data-is-focusable="true"
   onClick={[Function]}
+  style={
+    Object {
+      "background": "white",
+    }
+  }
   tokens={
     Object {
       "childrenGap": 0,
@@ -88,7 +93,7 @@ exports[`GalleryCardComponent renders 1`] = `
         styles={
           Object {
             "root": Object {
-              "color": undefined,
+              "color": "#605E5C",
               "paddingRight": 8,
             },
           }
@@ -112,7 +117,7 @@ exports[`GalleryCardComponent renders 1`] = `
         styles={
           Object {
             "root": Object {
-              "color": undefined,
+              "color": "#605E5C",
               "paddingRight": 8,
             },
           }
@@ -136,7 +141,7 @@ exports[`GalleryCardComponent renders 1`] = `
         styles={
           Object {
             "root": Object {
-              "color": undefined,
+              "color": "#605E5C",
               "paddingRight": 8,
             },
           }
@@ -185,7 +190,7 @@ exports[`GalleryCardComponent renders 1`] = `
             "gapSpace": 0,
           }
         }
-        content="Like"
+        content="Favorite"
         id="TooltipHost-IconButton-Heart"
         styles={
           Object {
@@ -197,14 +202,14 @@ exports[`GalleryCardComponent renders 1`] = `
         }
       >
         <CustomizedIconButton
-          ariaLabel="Like"
+          ariaLabel="Favorite"
           iconProps={
             Object {
               "iconName": "Heart",
             }
           }
           onClick={[Function]}
-          title="Like"
+          title="Favorite"
         />
       </StyledTooltipHostBase>
       <StyledTooltipHostBase

src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx

@@ -2,7 +2,9 @@ import * as React from "react";
 import { JunoClient } from "../../../Juno/JunoClient";
 import { HttpStatusCodes, CodeOfConductEndpoints } from "../../../Common/Constants";
 import { Stack, Text, Checkbox, PrimaryButton, Link } from "office-ui-fabric-react";
-import { handleError } from "../../../Common/ErrorHandlingUtils";
+import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
+import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 
 export interface CodeOfConductComponentProps {
   junoClient: JunoClient;
@@ -14,11 +16,11 @@ interface CodeOfConductComponentState {
 }
 
 export class CodeOfConductComponent extends React.Component<CodeOfConductComponentProps, CodeOfConductComponentState> {
+  private viewCodeOfConductTraced: boolean;
   private descriptionPara1: string;
   private descriptionPara2: string;
   private descriptionPara3: string;
   private link1: { label: string; url: string };
-  private link2: { label: string; url: string };
 
   constructor(props: CodeOfConductComponentProps) {
     super(props);
@@ -27,23 +29,34 @@ export class CodeOfConductComponent extends React.Component<CodeOfConductCompone
       readCodeOfConduct: false,
     };
 
-    this.descriptionPara1 = "Azure CosmosDB Notebook Gallery - Code of Conduct and Privacy Statement";
-    this.descriptionPara2 =
-      "Azure Cosmos DB Notebook Public Gallery contains notebook samples shared by users of Cosmos DB.";
-    this.descriptionPara3 = "In order to access Azure Cosmos DB Notebook Gallery resources, you must accept the ";
-    this.link1 = { label: "code of conduct", url: CodeOfConductEndpoints.codeOfConduct };
-    this.link2 = { label: "privacy statement", url: CodeOfConductEndpoints.privacyStatement };
+    this.descriptionPara1 = "Azure Cosmos DB Notebook Gallery - Code of Conduct";
+    this.descriptionPara2 = "The notebook public gallery contains notebook samples shared by users of Azure Cosmos DB.";
+    this.descriptionPara3 = "In order to view and publish your samples to the gallery, you must accept the ";
+    this.link1 = { label: "code of conduct.", url: CodeOfConductEndpoints.codeOfConduct };
   }
 
   private async acceptCodeOfConduct(): Promise<void> {
+    const startKey = traceStart(Action.NotebooksGalleryAcceptCodeOfConduct);
+
     try {
       const response = await this.props.junoClient.acceptCodeOfConduct();
       if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
         throw new Error(`Received HTTP ${response.status} when accepting code of conduct`);
       }
 
+      traceSuccess(Action.NotebooksGalleryAcceptCodeOfConduct, startKey);
+
       this.props.onAcceptCodeOfConduct(response.data);
     } catch (error) {
+      traceFailure(
+        Action.NotebooksGalleryAcceptCodeOfConduct,
+        {
+          error: getErrorMessage(error),
+          errorStack: getErrorStack(error),
+        },
+        startKey
+      );
+
       handleError(error, "CodeOfConductComponent/acceptCodeOfConduct", "Failed to accept code of conduct");
     }
   }
@@ -53,6 +66,11 @@ export class CodeOfConductComponent extends React.Component<CodeOfConductCompone
   };
 
   public render(): JSX.Element {
+    if (!this.viewCodeOfConductTraced) {
+      this.viewCodeOfConductTraced = true;
+      trace(Action.NotebooksGalleryViewCodeOfConduct);
+    }
+
     return (
       <Stack tokens={{ childrenGap: 20 }}>
         <Stack.Item>
@@ -69,10 +87,6 @@ export class CodeOfConductComponent extends React.Component<CodeOfConductCompone
             <Link href={this.link1.url} target="_blank">
               {this.link1.label}
             </Link>
-            {" and "}
-            <Link href={this.link2.url} target="_blank">
-              {this.link2.label}
-            </Link>
           </Text>
         </Stack.Item>
 
@@ -87,7 +101,7 @@ export class CodeOfConductComponent extends React.Component<CodeOfConductCompone
                 fontSize: 12,
               },
             }}
-            label="I have read and accepted the code of conduct and privacy statement"
+            label="I have read and accept the code of conduct."
             onChange={this.onChangeCheckbox}
           />
         </Stack.Item>

src/Explorer/Controls/NotebookGallery/GalleryAndNotebookViewerComponentAdapter.tsx

@@ -7,14 +7,20 @@ import {
 } from "./GalleryAndNotebookViewerComponent";
 
 export class GalleryAndNotebookViewerComponentAdapter implements ReactAdapter {
+  private key: string;
   public parameters: ko.Observable<number>;
 
   constructor(private props: GalleryAndNotebookViewerComponentProps) {
+    this.reset();
     this.parameters = ko.observable<number>(Date.now());
   }
 
   public renderComponent(): JSX.Element {
-    return <GalleryAndNotebookViewerComponent {...this.props} />;
+    return <GalleryAndNotebookViewerComponent key={this.key} {...this.props} />;
+  }
+
+  public reset(): void {
+    this.key = `GalleryAndNotebookViewerComponent-${Date.now()}`;
   }
 
   public triggerRender(): void {

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less

@@ -6,4 +6,16 @@
   overflow-y: auto;
   width: 100%;
   font-family: @DataExplorerFont;
+  background: @GalleryBackgroundColor;
+}
+
+.publicGalleryTabContainer {
+  position: relative;
+  height: 100vh;
+}
+
+.publicGalleryTabOverlayContent {
+  background: white;
+  padding: 20px;
+  margin: 10%;
 }

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -9,17 +9,21 @@ import {
   IPivotProps,
   IRectangle,
   Label,
+  Link,
   List,
+  Overlay,
   Pivot,
   PivotItem,
   SearchBox,
+  Spinner,
+  SpinnerSize,
   Stack,
   Text,
 } from "office-ui-fabric-react";
 import * as React from "react";
 import { IGalleryItem, IJunoResponse, IPublicGalleryData, JunoClient } from "../../../Juno/JunoClient";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
-import { DialogComponent, DialogProps } from "../DialogReactComponent/DialogComponent";
+import { Dialog, DialogProps } from "../Dialog";
 import { GalleryCardComponent, GalleryCardComponentProps } from "./Cards/GalleryCardComponent";
 import "./GalleryViewerComponent.less";
 import { HttpStatusCodes } from "../../../Common/Constants";
@@ -27,6 +31,8 @@ import Explorer from "../../Explorer";
 import { CodeOfConductComponent } from "./CodeOfConductComponent";
 import { InfoComponent } from "./InfoComponent/InfoComponent";
 import { handleError } from "../../../Common/ErrorHandlingUtils";
+import { trace } from "../../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 
 export interface GalleryViewerComponentProps {
   container?: Explorer;
@@ -64,6 +70,8 @@ interface GalleryViewerComponentState {
   searchText: string;
   dialogProps: DialogProps;
   isCodeOfConductAccepted: boolean;
+  isFetchingPublishedNotebooks: boolean;
+  isFetchingFavouriteNotebooks: boolean;
 }
 
 interface GalleryTabInfo {
@@ -74,18 +82,24 @@ interface GalleryTabInfo {
 export class GalleryViewerComponent extends React.Component<GalleryViewerComponentProps, GalleryViewerComponentState> {
   public static readonly OfficialSamplesTitle = "Official samples";
   public static readonly PublicGalleryTitle = "Public gallery";
-  public static readonly FavoritesTitle = "Liked";
-  public static readonly PublishedTitle = "Your published work";
+  public static readonly FavoritesTitle = "My favorites";
+  public static readonly PublishedTitle = "My published work";
 
   private static readonly rowsPerPage = 5;
 
   private static readonly mostViewedText = "Most viewed";
   private static readonly mostDownloadedText = "Most downloaded";
-  private static readonly mostFavoritedText = "Most liked";
+  private static readonly mostFavoritedText = "Most favorited";
   private static readonly mostRecentText = "Most recent";
 
   private readonly sortingOptions: IDropdownOption[];
 
+  private viewGalleryTraced: boolean;
+  private viewOfficialSamplesTraced: boolean;
+  private viewPublicGalleryTraced: boolean;
+  private viewFavoritesTraced: boolean;
+  private viewPublishedNotebooksTraced: boolean;
+
   private sampleNotebooks: IGalleryItem[];
   private publicNotebooks: IGalleryItem[];
   private favoriteNotebooks: IGalleryItem[];
@@ -107,6 +121,8 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
       searchText: props.searchText,
       dialogProps: undefined,
       isCodeOfConductAccepted: undefined,
+      isFetchingFavouriteNotebooks: true,
+      isFetchingPublishedNotebooks: true,
     };
 
     this.sortingOptions = [
@@ -123,38 +139,30 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
         text: GalleryViewerComponent.mostRecentText,
       },
     ];
-    if (this.props.container?.isGalleryPublishEnabled()) {
-      this.sortingOptions.push({
-        key: SortBy.MostFavorited,
-        text: GalleryViewerComponent.mostFavoritedText,
-      });
-    }
+    this.sortingOptions.push({
+      key: SortBy.MostFavorited,
+      text: GalleryViewerComponent.mostFavoritedText,
+    });
 
     this.loadTabContent(this.state.selectedTab, this.state.searchText, this.state.sortBy, false);
-    if (this.props.container?.isGalleryPublishEnabled()) {
-      this.loadFavoriteNotebooks(this.state.searchText, this.state.sortBy, false); // Need this to show correct favorite button state
-    }
+    this.loadFavoriteNotebooks(this.state.searchText, this.state.sortBy, false); // Need this to show correct favorite button state
   }
 
   public render(): JSX.Element {
+    this.traceViewGallery();
+
     const tabs: GalleryTabInfo[] = [this.createSamplesTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks)];
 
-    if (this.props.container?.isGalleryPublishEnabled()) {
-      tabs.push(
-        this.createPublicGalleryTab(
-          GalleryTab.PublicGallery,
-          this.state.publicNotebooks,
-          this.state.isCodeOfConductAccepted
-        )
-      );
-      tabs.push(this.createFavoritesTab(GalleryTab.Favorites, this.state.favoriteNotebooks));
+    tabs.push(
+      this.createPublicGalleryTab(
+        GalleryTab.PublicGallery,
+        this.state.publicNotebooks,
+        this.state.isCodeOfConductAccepted
+      )
+    );
 
-      // explicitly checking if isCodeOfConductAccepted is not false, as it is initially undefined.
-      // Displaying code of conduct component on gallery load should not be the default behavior.
-      if (this.state.isCodeOfConductAccepted !== false) {
-        tabs.push(this.createPublishedNotebooksTab(GalleryTab.Published, this.state.publishedNotebooks));
-      }
-    }
+    tabs.push(this.createFavoritesTab(GalleryTab.Favorites, this.state.favoriteNotebooks));
+    tabs.push(this.createPublishedNotebooksTab(GalleryTab.Published, this.state.publishedNotebooks));
 
     const pivotProps: IPivotProps = {
       onLinkClick: this.onPivotChange,
@@ -179,16 +187,63 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
       <div className="galleryContainer">
         <Pivot {...pivotProps}>{pivotItems}</Pivot>
 
-        {this.state.dialogProps && <DialogComponent {...this.state.dialogProps} />}
+        {this.state.dialogProps && <Dialog {...this.state.dialogProps} />}
       </div>
     );
   }
 
+  private traceViewGallery = (): void => {
+    if (!this.viewGalleryTraced) {
+      this.viewGalleryTraced = true;
+      trace(Action.NotebooksGalleryViewGallery);
+    }
+
+    switch (this.state.selectedTab) {
+      case GalleryTab.OfficialSamples:
+        if (!this.viewOfficialSamplesTraced) {
+          this.resetViewGalleryTabTracedFlags();
+          this.viewOfficialSamplesTraced = true;
+          trace(Action.NotebooksGalleryViewOfficialSamples);
+        }
+        break;
+      case GalleryTab.PublicGallery:
+        if (!this.viewPublicGalleryTraced) {
+          this.resetViewGalleryTabTracedFlags();
+          this.viewPublicGalleryTraced = true;
+          trace(Action.NotebooksGalleryViewPublicGallery);
+        }
+        break;
+      case GalleryTab.Favorites:
+        if (!this.viewFavoritesTraced) {
+          this.resetViewGalleryTabTracedFlags();
+          this.viewFavoritesTraced = true;
+          trace(Action.NotebooksGalleryViewFavorites);
+        }
+        break;
+      case GalleryTab.Published:
+        if (!this.viewPublishedNotebooksTraced) {
+          this.resetViewGalleryTabTracedFlags();
+          this.viewPublishedNotebooksTraced = true;
+          trace(Action.NotebooksGalleryViewPublishedNotebooks);
+        }
+        break;
+      default:
+        throw new Error(`Unknown selected tab ${this.state.selectedTab}`);
+    }
+  };
+
+  private resetViewGalleryTabTracedFlags = (): void => {
+    this.viewOfficialSamplesTraced = false;
+    this.viewPublicGalleryTraced = false;
+    this.viewFavoritesTraced = false;
+    this.viewPublishedNotebooksTraced = false;
+  };
+
   private isEmptyData = (data: IGalleryItem[]): boolean => {
     return !data || data.length === 0;
   };
 
-  private createEmptyTabContent = (iconName: string, line1: string, line2: string): JSX.Element => {
+  private createEmptyTabContent = (iconName: string, line1: JSX.Element, line2: JSX.Element): JSX.Element => {
     return (
       <Stack horizontalAlign="center" tokens={{ childrenGap: 10 }}>
         <FontIcon iconName={iconName} style={{ fontSize: 100, color: "lightgray", marginTop: 20 }} />
@@ -216,40 +271,63 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     };
   }
 
+  private getFavouriteNotebooksTabContent = (data: IGalleryItem[]) => {
+    if (this.isEmptyData(data)) {
+      if (this.state.isFetchingFavouriteNotebooks) {
+        return <Spinner size={SpinnerSize.large} />;
+      }
+      return this.createEmptyTabContent(
+        "ContactHeart",
+        <>You don&apos;t have any favorites yet</>,
+        <>
+          Favorite any notebook from the{" "}
+          <Link onClick={() => this.setState({ selectedTab: GalleryTab.OfficialSamples })}>official samples</Link> or{" "}
+          <Link onClick={() => this.setState({ selectedTab: GalleryTab.PublicGallery })}>public gallery</Link>
+        </>
+      );
+    }
+    return this.createSearchBarHeader(this.createCardsTabContent(data));
+  };
+
   private createFavoritesTab(tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo {
     return {
       tab,
-      content: this.isEmptyData(data)
-        ? this.createEmptyTabContent(
-            "ContactHeart",
-            "You have not liked anything",
-            "Like any notebook from Official Samples or Public gallery"
-          )
-        : this.createSearchBarHeader(this.createCardsTabContent(data)),
+      content: this.getFavouriteNotebooksTabContent(data),
     };
   }
 
+  private getPublishedNotebooksTabContent = (data: IGalleryItem[]) => {
+    if (this.isEmptyData(data)) {
+      if (this.state.isFetchingPublishedNotebooks) {
+        return <Spinner size={SpinnerSize.large} />;
+      }
+      return this.createEmptyTabContent(
+        "Contact",
+        <>
+          You have not published anything to the{" "}
+          <Link onClick={() => this.setState({ selectedTab: GalleryTab.PublicGallery })}>public gallery</Link> yet
+        </>,
+        <>Publish your notebooks to share your work with other users</>
+      );
+    }
+    return this.createPublishedNotebooksTabContent(data);
+  };
+
   private createPublishedNotebooksTab = (tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo => {
     return {
       tab,
-      content: this.isEmptyData(data)
-        ? this.createEmptyTabContent(
-            "Contact",
-            "You have not published anything",
-            "Publish your sample notebooks to share your published work with others"
-          )
-        : this.createPublishedNotebooksTabContent(data),
+      content: this.getPublishedNotebooksTabContent(data),
     };
   };
 
   private createPublishedNotebooksTabContent = (data: IGalleryItem[]): JSX.Element => {
     const { published, underReview, removed } = GalleryUtils.filterPublishedNotebooks(data);
     const content = (
-      <Stack tokens={{ childrenGap: 10 }}>
+      <Stack tokens={{ childrenGap: 20 }}>
         {published?.length > 0 &&
           this.createPublishedNotebooksSectionContent(
             undefined,
-            "You have successfully published the following notebook(s) to public gallery and shared with other Azure Cosmos DB users.",
+            "You have successfully published and shared the following notebook(s) to the public gallery.",
             this.createCardsTabContent(published)
           )}
         {underReview?.length > 0 &&
@@ -276,24 +354,33 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     content: JSX.Element
   ): JSX.Element => {
     return (
-      <Stack tokens={{ childrenGap: 5 }}>
-        {title && <Text styles={{ root: { fontWeight: FontWeights.semibold } }}>{title}</Text>}
-        {description && <Text>{description}</Text>}
+      <Stack tokens={{ childrenGap: 10 }}>
+        {title && (
+          <Text styles={{ root: { fontWeight: FontWeights.semibold, marginLeft: 10, marginRight: 10 } }}>{title}</Text>
+        )}
+        {description && <Text styles={{ root: { marginLeft: 10, marginRight: 10 } }}>{description}</Text>}
         {content}
       </Stack>
     );
   };
 
   private createPublicGalleryTabContent(data: IGalleryItem[], acceptedCodeOfConduct: boolean): JSX.Element {
-    return acceptedCodeOfConduct === false ? (
-      <CodeOfConductComponent
-        junoClient={this.props.junoClient}
-        onAcceptCodeOfConduct={(result: boolean) => {
-          this.setState({ isCodeOfConductAccepted: result });
-        }}
-      />
-    ) : (
-      this.createSearchBarHeader(this.createCardsTabContent(data))
+    return (
+      <div className="publicGalleryTabContainer">
+        {this.createSearchBarHeader(this.createCardsTabContent(data))}
+        {acceptedCodeOfConduct === false && (
+          <Overlay isDarkThemed>
+            <div className="publicGalleryTabOverlayContent">
+              <CodeOfConductComponent
+                junoClient={this.props.junoClient}
+                onAcceptCodeOfConduct={(result: boolean) => {
+                  this.setState({ isCodeOfConductAccepted: result });
+                }}
+              />
+            </div>
+          </Overlay>
+        )}
+      </div>
     );
   }
 
@@ -310,11 +397,9 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
           <Stack.Item styles={{ root: { minWidth: 200 } }}>
             <Dropdown options={this.sortingOptions} selectedKey={this.state.sortBy} onChange={this.onDropdownChange} />
           </Stack.Item>
-          {(!this.props.container || this.props.container.isGalleryPublishEnabled()) && (
-            <Stack.Item>
-              <InfoComponent />
-            </Stack.Item>
-          )}
+          <Stack.Item>
+            <InfoComponent />
+          </Stack.Item>
         </Stack>
         <Stack.Item>{content}</Stack.Item>
       </Stack>
@@ -322,7 +407,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   }
 
   private createCardsTabContent(data: IGalleryItem[]): JSX.Element {
-    return (
+    return data ? (
       <FocusZone>
         <List
           items={data}
@@ -331,12 +416,14 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
           onRenderCell={this.onRenderCell}
         />
       </FocusZone>
+    ) : (
+      <Spinner size={SpinnerSize.large} />
     );
   }
 
   private createPolicyViolationsListContent(data: IGalleryItem[]): JSX.Element {
     return (
-      <table>
+      <table style={{ margin: 10 }}>
         <tbody>
           <tr>
             <th>Name</th>
@@ -385,6 +472,10 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
         }
 
         this.sampleNotebooks = response.data;
+
+        trace(Action.NotebooksGalleryOfficialSamplesCount, ActionModifiers.Mark, {
+          count: this.sampleNotebooks?.length,
+        });
       } catch (error) {
         handleError(error, "GalleryViewerComponent/loadSampleNotebooks", "Failed to load sample notebooks");
       }
@@ -411,6 +502,8 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
         if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
           throw new Error(`Received HTTP ${response.status} when loading public notebooks`);
         }
+
+        trace(Action.NotebooksGalleryPublicGalleryCount, ActionModifiers.Mark, { count: this.publicNotebooks?.length });
       } catch (error) {
         handleError(error, "GalleryViewerComponent/loadPublicNotebooks", "Failed to load public notebooks");
       }
@@ -425,14 +518,19 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private async loadFavoriteNotebooks(searchText: string, sortBy: SortBy, offline: boolean): Promise<void> {
     if (!offline) {
       try {
+        this.setState({ isFetchingFavouriteNotebooks: true });
         const response = await this.props.junoClient.getFavoriteNotebooks();
         if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
           throw new Error(`Received HTTP ${response.status} when loading favorite notebooks`);
         }
 
         this.favoriteNotebooks = response.data;
+
+        trace(Action.NotebooksGalleryFavoritesCount, ActionModifiers.Mark, { count: this.favoriteNotebooks?.length });
       } catch (error) {
         handleError(error, "GalleryViewerComponent/loadFavoriteNotebooks", "Failed to load favorite notebooks");
+      } finally {
+        this.setState({ isFetchingFavouriteNotebooks: false });
       }
     }
 
@@ -451,14 +549,25 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private async loadPublishedNotebooks(searchText: string, sortBy: SortBy, offline: boolean): Promise<void> {
     if (!offline) {
       try {
+        this.setState({ isFetchingPublishedNotebooks: true });
         const response = await this.props.junoClient.getPublishedNotebooks();
         if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
           throw new Error(`Received HTTP ${response.status} when loading published notebooks`);
         }
 
         this.publishedNotebooks = response.data;
+
+        const { published, underReview, removed } = GalleryUtils.filterPublishedNotebooks(this.publishedNotebooks);
+        trace(Action.NotebooksGalleryPublishedCount, ActionModifiers.Mark, {
+          count: this.publishedNotebooks?.length,
+          publishedCount: published.length,
+          underReviewCount: underReview.length,
+          removedCount: removed.length,
+        });
       } catch (error) {
         handleError(error, "GalleryViewerComponent/loadPublishedNotebooks", "Failed to load published notebooks");
+      } finally {
+        this.setState({ isFetchingPublishedNotebooks: false });
       }
     }
 
@@ -544,10 +653,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   };
 
   private onRenderCell = (data?: IGalleryItem): JSX.Element => {
-    let isFavorite: boolean;
-    if (this.props.container?.isGalleryPublishEnabled()) {
-      isFavorite = this.favoriteNotebooks?.find((item) => item.id === data.id) !== undefined;
-    }
+    const isFavorite = this.favoriteNotebooks?.find((item) => item.id === data.id) !== undefined;
     const props: GalleryCardComponentProps = {
       data,
       isFavorite,

src/Explorer/Controls/NotebookGallery/__snapshots__/CodeOfConductComponent.test.tsx.snap

@@ -17,35 +17,28 @@ exports[`CodeOfConductComponent renders 1`] = `
         }
       }
     >
-      Azure CosmosDB Notebook Gallery - Code of Conduct and Privacy Statement
+      Azure Cosmos DB Notebook Gallery - Code of Conduct
     </Text>
   </StackItem>
   <StackItem>
     <Text>
-      Azure Cosmos DB Notebook Public Gallery contains notebook samples shared by users of Cosmos DB.
+      The notebook public gallery contains notebook samples shared by users of Azure Cosmos DB.
     </Text>
   </StackItem>
   <StackItem>
     <Text>
-      In order to access Azure Cosmos DB Notebook Gallery resources, you must accept the 
+      In order to view and publish your samples to the gallery, you must accept the 
       <StyledLinkBase
         href="https://aka.ms/cosmos-code-of-conduct"
         target="_blank"
       >
-        code of conduct
-      </StyledLinkBase>
-       and 
-      <StyledLinkBase
-        href="https://aka.ms/ms-privacy-policy"
-        target="_blank"
-      >
-        privacy statement
+        code of conduct.
       </StyledLinkBase>
     </Text>
   </StackItem>
   <StackItem>
     <StyledCheckboxBase
-      label="I have read and accepted the code of conduct and privacy statement"
+      label="I have read and accept the code of conduct."
       onChange={[Function]}
       styles={
         Object {

src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap

@@ -72,6 +72,10 @@ exports[`GalleryViewerComponent renders 1`] = `
                     "key": 3,
                     "text": "Most recent",
                   },
+                  Object {
+                    "key": 2,
+                    "text": "Most favorited",
+                  },
                 ]
               }
               selectedKey={0}
@@ -82,22 +86,128 @@ exports[`GalleryViewerComponent renders 1`] = `
           </StackItem>
         </Stack>
         <StackItem>
-          <FocusZone
-            direction={2}
-            isCircularNavigation={false}
-            shouldRaiseClicks={true}
-          >
-            <List
-              getPageSpecification={[Function]}
-              onRenderCell={[Function]}
-              renderedWindowsAhead={3}
-              renderedWindowsBehind={2}
-              startIndex={0}
-            />
-          </FocusZone>
+          <StyledSpinnerBase
+            size={3}
+          />
         </StackItem>
       </Stack>
     </PivotItem>
+    <PivotItem
+      headerText="Public gallery"
+      itemKey="PublicGallery"
+      key="PublicGallery"
+      style={
+        Object {
+          "marginTop": 20,
+        }
+      }
+    >
+      <div
+        className="publicGalleryTabContainer"
+      >
+        <Stack
+          tokens={
+            Object {
+              "childrenGap": 10,
+            }
+          }
+        >
+          <Stack
+            horizontal={true}
+            tokens={
+              Object {
+                "childrenGap": 20,
+                "padding": 10,
+              }
+            }
+          >
+            <StackItem
+              grow={true}
+            >
+              <StyledSearchBoxBase
+                onChange={[Function]}
+                placeholder="Search"
+              />
+            </StackItem>
+            <StackItem>
+              <StyledLabelBase>
+                Sort by
+              </StyledLabelBase>
+            </StackItem>
+            <StackItem
+              styles={
+                Object {
+                  "root": Object {
+                    "minWidth": 200,
+                  },
+                }
+              }
+            >
+              <StyledWithResponsiveMode
+                onChange={[Function]}
+                options={
+                  Array [
+                    Object {
+                      "key": 0,
+                      "text": "Most viewed",
+                    },
+                    Object {
+                      "key": 1,
+                      "text": "Most downloaded",
+                    },
+                    Object {
+                      "key": 3,
+                      "text": "Most recent",
+                    },
+                    Object {
+                      "key": 2,
+                      "text": "Most favorited",
+                    },
+                  ]
+                }
+                selectedKey={0}
+              />
+            </StackItem>
+            <StackItem>
+              <InfoComponent />
+            </StackItem>
+          </Stack>
+          <StackItem>
+            <StyledSpinnerBase
+              size={3}
+            />
+          </StackItem>
+        </Stack>
+      </div>
+    </PivotItem>
+    <PivotItem
+      headerText="My favorites"
+      itemKey="Favorites"
+      key="Favorites"
+      style={
+        Object {
+          "marginTop": 20,
+        }
+      }
+    >
+      <StyledSpinnerBase
+        size={3}
+      />
+    </PivotItem>
+    <PivotItem
+      headerText="My published work"
+      itemKey="Published"
+      key="Published"
+      style={
+        Object {
+          "marginTop": 20,
+        }
+      }
+    >
+      <StyledSpinnerBase
+        size={3}
+      />
+    </PivotItem>
   </StyledPivotBase>
 </div>
 `;

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx

@@ -31,6 +31,26 @@ export interface NotebookMetadataComponentProps {
 }
 
 export class NotebookMetadataComponent extends React.Component<NotebookMetadataComponentProps> {
+  private renderFavouriteButton = (): JSX.Element => {
+    return (
+      <Text>
+        {this.props.isFavorite !== undefined ? (
+          <>
+            <IconButton
+              iconProps={{ iconName: this.props.isFavorite ? "HeartFill" : "Heart" }}
+              onClick={this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick}
+            />
+            {this.props.data.favorites} likes
+          </>
+        ) : (
+          <>
+            <Icon iconName="Heart" /> {this.props.data.favorites} likes
+          </>
+        )}
+      </Text>
+    );
+  };
+
   public render(): JSX.Element {
     const options: Intl.DateTimeFormatOptions = {
       year: "numeric",
@@ -49,19 +69,7 @@ export class NotebookMetadataComponent extends React.Component<NotebookMetadataC
             </Text>
           </Stack.Item>
 
-          <Stack.Item>
-            <Text>
-              {this.props.isFavorite !== undefined && (
-                <>
-                  <IconButton
-                    iconProps={{ iconName: this.props.isFavorite ? "HeartFill" : "Heart" }}
-                    onClick={this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick}
-                  />
-                  {this.props.data.favorites} likes
-                </>
-              )}
-            </Text>
-          </Stack.Item>
+          <Stack.Item>{this.renderFavouriteButton()}</Stack.Item>
 
           {this.props.downloadButtonText && (
             <Stack.Item>

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -3,25 +3,24 @@
  */
 import { Notebook } from "@nteract/commutable";
 import { createContentRef } from "@nteract/core";
-import { IChoiceGroupProps, Icon, Link, ProgressIndicator } from "office-ui-fabric-react";
+import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "office-ui-fabric-react";
 import * as React from "react";
 import { contents } from "rx-jupyter";
-import * as Logger from "../../../Common/Logger";
 import { IGalleryItem, JunoClient } from "../../../Juno/JunoClient";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
-import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
-import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import { NotebookClientV2 } from "../../Notebook/NotebookClientV2";
 import { NotebookComponentBootstrapper } from "../../Notebook/NotebookComponent/NotebookComponentBootstrapper";
 import NotebookReadOnlyRenderer from "../../Notebook/NotebookRenderer/NotebookReadOnlyRenderer";
-import { DialogComponent, DialogProps, TextFieldProps } from "../DialogReactComponent/DialogComponent";
+import { Dialog, DialogProps, TextFieldProps } from "../Dialog";
 import { NotebookMetadataComponent } from "./NotebookMetadataComponent";
 import "./NotebookViewerComponent.less";
 import Explorer from "../../Explorer";
 import { NotebookV4 } from "@nteract/commutable/lib/v4";
 import { SessionStorageUtility } from "../../../Shared/StorageUtility";
 import { DialogHost } from "../../../Utils/GalleryUtils";
-import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils";
+import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
+import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 
 export interface NotebookViewerComponentProps {
   container?: Explorer;
@@ -80,6 +79,12 @@ export class NotebookViewerComponent
   }
 
   private async loadNotebookContent(): Promise<void> {
+    const startKey = traceStart(Action.NotebooksGalleryViewNotebook, {
+      notebookUrl: this.props.notebookUrl,
+      notebookId: this.props.galleryItem?.id,
+      isSample: this.props.galleryItem?.isSample,
+    });
+
     try {
       const response = await fetch(this.props.notebookUrl);
       if (!response.ok) {
@@ -87,6 +92,16 @@ export class NotebookViewerComponent
         throw new Error(`Received HTTP ${response.status} while fetching ${this.props.notebookUrl}`);
       }
 
+      traceSuccess(
+        Action.NotebooksGalleryViewNotebook,
+        {
+          notebookUrl: this.props.notebookUrl,
+          notebookId: this.props.galleryItem?.id,
+          isSample: this.props.galleryItem?.isSample,
+        },
+        startKey
+      );
+
       const notebook: Notebook = await response.json();
       this.removeNotebookViewerLink(notebook, this.props.galleryItem?.newCellId);
       this.notebookComponentBootstrapper.setContent("json", notebook);
@@ -101,6 +116,18 @@ export class NotebookViewerComponent
         SessionStorageUtility.setEntry(this.props.galleryItem?.id, "true");
       }
     } catch (error) {
+      traceFailure(
+        Action.NotebooksGalleryViewNotebook,
+        {
+          notebookUrl: this.props.notebookUrl,
+          notebookId: this.props.galleryItem?.id,
+          isSample: this.props.galleryItem?.isSample,
+          error: getErrorMessage(error),
+          errorStack: getErrorStack(error),
+        },
+        startKey
+      );
+
       this.setState({ showProgressBar: false });
       handleError(error, "NotebookViewerComponent/loadNotebookContent", "Failed to load notebook content");
     }
@@ -152,7 +179,7 @@ export class NotebookViewerComponent
           hidePrompts: this.props.hidePrompts,
         })}
 
-        {this.state.dialogProps && <DialogComponent {...this.state.dialogProps} />}
+        {this.state.dialogProps && <Dialog {...this.state.dialogProps} />}
       </div>
     );
   }
@@ -178,6 +205,32 @@ export class NotebookViewerComponent
     };
   }
 
+  // DialogHost
+  showOkModalDialog(
+    title: string,
+    msg: string,
+    okLabel: string,
+    onOk: () => void,
+    progressIndicatorProps?: IProgressIndicatorProps
+  ): void {
+    this.setState({
+      dialogProps: {
+        isModal: true,
+        visible: true,
+        title,
+        subText: msg,
+        primaryButtonText: okLabel,
+        onPrimaryButtonClick: () => {
+          this.setState({ dialogProps: undefined });
+          onOk && onOk();
+        },
+        secondaryButtonText: undefined,
+        onSecondaryButtonClick: undefined,
+        progressIndicatorProps,
+      },
+    });
+  }
+
   // DialogHost
   showOkCancelModalDialog(
     title: string,
@@ -186,8 +239,10 @@ export class NotebookViewerComponent
     onOk: () => void,
     cancelLabel: string,
     onCancel: () => void,
+    progressIndicatorProps?: IProgressIndicatorProps,
     choiceGroupProps?: IChoiceGroupProps,
-    textFieldProps?: TextFieldProps
+    textFieldProps?: TextFieldProps,
+    primaryButtonDisabled?: boolean
   ): void {
     this.setState({
       dialogProps: {
@@ -205,8 +260,10 @@ export class NotebookViewerComponent
           this.setState({ dialogProps: undefined });
           onCancel && onCancel();
         },
+        progressIndicatorProps,
         choiceGroupProps,
         textFieldProps,
+        primaryButtonDisabled,
       },
     });
   }

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

@@ -2,7 +2,7 @@ import { shallow } from "enzyme";
 import React from "react";
 import { SettingsComponentProps, SettingsComponent, SettingsComponentState } from "./SettingsComponent";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import SettingsTabV2 from "../../Tabs/SettingsTabV2";
+import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
 import { collection } from "./TestUtils";
 import * as DataModels from "../../../Contracts/DataModels";
 import ko from "knockout";
@@ -31,25 +31,21 @@ jest.mock("../../../Common/dataAccess/updateCollection", () => ({
 }));
 import { updateOffer } from "../../../Common/dataAccess/updateOffer";
 import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
-import Q from "q";
 jest.mock("../../../Common/dataAccess/updateOffer", () => ({
   updateOffer: jest.fn().mockReturnValue({} as DataModels.Offer),
 }));
 
 describe("SettingsComponent", () => {
   const baseProps: SettingsComponentProps = {
-    settingsTab: new SettingsTabV2({
+    settingsTab: new CollectionSettingsTabV2({
       collection: collection,
-      tabKind: ViewModels.CollectionTabKind.SettingsV2,
+      tabKind: ViewModels.CollectionTabKind.CollectionSettingsV2,
       title: "Scale & Settings",
       tabPath: "",
       node: undefined,
       hashLocation: "settings",
       isActive: ko.observable(false),
       onUpdateTabsButtons: undefined,
-      getPendingNotification: Q.Promise<DataModels.Notification>(() => {
-        return;
-      }),
     }),
   };
 
@@ -142,6 +138,7 @@ describe("SettingsComponent", () => {
       readSettings: undefined,
       onSettingsClick: undefined,
       loadOffer: undefined,
+      getPendingThroughputSplitNotification: undefined,
     } as ViewModels.Database;
     newCollection.getDatabase = () => newDatabase;
     newCollection.offer = ko.observable(undefined);

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -11,7 +11,7 @@ import Explorer from "../../Explorer";
 import { updateOffer } from "../../../Common/dataAccess/updateOffer";
 import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-import SettingsTab from "../../Tabs/SettingsTabV2";
+import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
 import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
 import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
 import {
@@ -44,7 +44,6 @@ import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/genera
 import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
 import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
-import { isEmpty } from "underscore";
 
 interface SettingsV2TabInfo {
   tab: SettingsV2TabTypes;
@@ -58,7 +57,7 @@ interface ButtonV2 {
 }
 
 export interface SettingsComponentProps {
-  settingsTab: SettingsTab;
+  settingsTab: SettingsTabV2;
 }
 
 export interface SettingsComponentState {
@@ -116,7 +115,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private discardSettingsChangesButton: ButtonV2;
 
   private isAnalyticalStorageEnabled: boolean;
+  private isCollectionSettingsTab: boolean;
   private collection: ViewModels.Collection;
+  private database: ViewModels.Database;
+  private offer: DataModels.Offer;
   private container: Explorer;
   private changeFeedPolicyVisible: boolean;
   private isFixedContainer: boolean;
@@ -126,20 +128,28 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   constructor(props: SettingsComponentProps) {
     super(props);
 
-    this.collection = this.props.settingsTab.collection as ViewModels.Collection;
-    this.container = this.collection?.container;
-    this.isAnalyticalStorageEnabled = !!this.collection?.analyticalStorageTtl();
-    this.shouldShowIndexingPolicyEditor =
-      this.container && !this.container.isPreferredApiCassandra() && !this.container.isPreferredApiMongoDB();
+    this.isCollectionSettingsTab = this.props.settingsTab.tabKind === ViewModels.CollectionTabKind.CollectionSettingsV2;
+    if (this.isCollectionSettingsTab) {
+      this.collection = this.props.settingsTab.collection as ViewModels.Collection;
+      this.container = this.collection?.container;
+      this.offer = this.collection?.offer();
+      this.isAnalyticalStorageEnabled = !!this.collection?.analyticalStorageTtl();
+      this.shouldShowIndexingPolicyEditor =
+        this.container && !this.container.isPreferredApiCassandra() && !this.container.isPreferredApiMongoDB();
 
-    this.changeFeedPolicyVisible = this.collection?.container.isFeatureEnabled(
-      Constants.Features.enableChangeFeedPolicy
-    );
+      this.changeFeedPolicyVisible = this.collection?.container.isFeatureEnabled(
+        Constants.Features.enableChangeFeedPolicy
+      );
 
-    // Mongo container with system partition key still treat as "Fixed"
-    this.isFixedContainer =
-      this.container.isPreferredApiMongoDB() &&
-      (!this.collection.partitionKey || this.collection.partitionKey.systemKey);
+      // Mongo container with system partition key still treat as "Fixed"
+      this.isFixedContainer =
+        this.container.isPreferredApiMongoDB() &&
+        (!this.collection?.partitionKey || this.collection?.partitionKey.systemKey);
+    } else {
+      this.database = this.props.settingsTab.database;
+      this.container = this.database?.container;
+      this.offer = this.database?.offer();
+    }
 
     this.state = {
       throughput: undefined,
@@ -206,18 +216,21 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   }
 
   componentDidMount(): void {
-    this.refreshIndexTransformationProgress();
-    this.loadMongoIndexes();
+    if (this.isCollectionSettingsTab) {
+      this.refreshIndexTransformationProgress();
+      this.loadMongoIndexes();
+    }
+
     this.setAutoPilotStates();
     this.setBaseline();
     if (this.props.settingsTab.isActive()) {
-      this.props.settingsTab.getSettingsTabContainer().onUpdateTabsButtons(this.getTabsButtons());
+      this.props.settingsTab.getContainer().onUpdateTabsButtons(this.getTabsButtons());
     }
   }
 
   componentDidUpdate(): void {
     if (this.props.settingsTab.isActive()) {
-      this.props.settingsTab.getSettingsTabContainer().onUpdateTabsButtons(this.getTabsButtons());
+      this.props.settingsTab.getContainer().onUpdateTabsButtons(this.getTabsButtons());
     }
   }
 
@@ -270,7 +283,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   };
 
   private setAutoPilotStates = (): void => {
-    const autoscaleMaxThroughput = this.collection?.offer()?.autoscaleMaxThroughput;
+    const autoscaleMaxThroughput = this.offer?.autoscaleMaxThroughput;
 
     if (autoscaleMaxThroughput && AutoPilotUtils.isValidAutoPilotThroughput(autoscaleMaxThroughput)) {
       this.setState({
@@ -295,7 +308,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     !!this.collection.conflictResolutionPolicy();
 
   public isOfferReplacePending = (): boolean => {
-    return this.collection?.offer()?.offerReplacePending;
+    return this.offer?.offerReplacePending;
   };
 
   public onSaveClick = async (): Promise<void> => {
@@ -309,174 +322,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       tabTitle: this.props.settingsTab.tabTitle(),
     });
 
-    const newCollection: DataModels.Collection = { ...this.collection.rawDataModel };
-
     try {
-      if (
-        this.state.isSubSettingsSaveable ||
-        this.state.isIndexingPolicyDirty ||
-        this.state.isConflictResolutionDirty
-      ) {
-        let defaultTtl: number;
-        switch (this.state.timeToLive) {
-          case TtlType.On:
-            defaultTtl = Number(this.state.timeToLiveSeconds);
-            break;
-          case TtlType.OnNoDefault:
-            defaultTtl = -1;
-            break;
-          case TtlType.Off:
-          default:
-            defaultTtl = undefined;
-            break;
-        }
-
-        const wasIndexingPolicyModified = this.state.isIndexingPolicyDirty;
-        newCollection.defaultTtl = defaultTtl;
-
-        newCollection.indexingPolicy = this.state.indexingPolicyContent;
-
-        newCollection.changeFeedPolicy =
-          this.changeFeedPolicyVisible && this.state.changeFeedPolicy === ChangeFeedPolicyState.On
-            ? {
-                retentionDuration: Constants.BackendDefaults.maxChangeFeedRetentionDuration,
-              }
-            : undefined;
-
-        newCollection.analyticalStorageTtl = this.getAnalyticalStorageTtl();
-
-        newCollection.geospatialConfig = {
-          type: this.state.geospatialConfigType,
-        };
-
-        const conflictResolutionChanges: DataModels.ConflictResolutionPolicy = this.getUpdatedConflictResolutionPolicy();
-        if (conflictResolutionChanges) {
-          newCollection.conflictResolutionPolicy = conflictResolutionChanges;
-        }
-
-        const updatedCollection: DataModels.Collection = await updateCollection(
-          this.collection.databaseId,
-          this.collection.id(),
-          newCollection
-        );
-        this.collection.rawDataModel = updatedCollection;
-        this.collection.defaultTtl(updatedCollection.defaultTtl);
-        this.collection.analyticalStorageTtl(updatedCollection.analyticalStorageTtl);
-        this.collection.id(updatedCollection.id);
-        this.collection.indexingPolicy(updatedCollection.indexingPolicy);
-        this.collection.conflictResolutionPolicy(updatedCollection.conflictResolutionPolicy);
-        this.collection.changeFeedPolicy(updatedCollection.changeFeedPolicy);
-        this.collection.geospatialConfig(updatedCollection.geospatialConfig);
-
-        if (wasIndexingPolicyModified) {
-          await this.refreshIndexTransformationProgress();
-        }
-
-        this.setState({
-          isSubSettingsSaveable: false,
-          isSubSettingsDiscardable: false,
-          isIndexingPolicyDirty: false,
-          isConflictResolutionDirty: false,
-        });
-      }
-
-      if (this.state.isMongoIndexingPolicySaveable && this.mongoDBCollectionResource) {
-        try {
-          const newMongoIndexes = this.getMongoIndexesToSave();
-          const newMongoCollection: MongoDBCollectionResource = {
-            ...this.mongoDBCollectionResource,
-            indexes: newMongoIndexes,
-          };
-
-          this.mongoDBCollectionResource = await updateMongoDBCollectionThroughRP(
-            this.collection.databaseId,
-            this.collection.id(),
-            newMongoCollection
-          );
-
-          await this.refreshIndexTransformationProgress();
-          this.setState({
-            isMongoIndexingPolicySaveable: false,
-            indexesToDrop: [],
-            indexesToAdd: [],
-            currentMongoIndexes: [...this.mongoDBCollectionResource.indexes],
-          });
-          traceSuccess(
-            Action.MongoIndexUpdated,
-            {
-              databaseAccountName: this.container.databaseAccount()?.name,
-              databaseName: this.collection?.databaseId,
-              collectionName: this.collection?.id(),
-              defaultExperience: this.container.defaultExperience(),
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.props.settingsTab.tabTitle(),
-            },
-            startKey
-          );
-        } catch (error) {
-          traceFailure(
-            Action.MongoIndexUpdated,
-            {
-              databaseAccountName: this.container.databaseAccount()?.name,
-              databaseName: this.collection?.databaseId,
-              collectionName: this.collection?.id(),
-              defaultExperience: this.container.defaultExperience(),
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.props.settingsTab.tabTitle(),
-              error: getErrorMessage(error),
-              errorStack: getErrorStack(error),
-            },
-            startKey
-          );
-          throw error;
-        }
-      }
-
-      if (this.state.isScaleSaveable) {
-        const updateOfferParams: DataModels.UpdateOfferParams = {
-          databaseId: this.collection.databaseId,
-          collectionId: this.collection.id(),
-          currentOffer: this.collection.offer(),
-          autopilotThroughput: this.state.isAutoPilotSelected ? this.state.autoPilotThroughput : undefined,
-          manualThroughput: this.state.isAutoPilotSelected ? undefined : this.state.throughput,
-        };
-        if (this.hasProvisioningTypeChanged()) {
-          if (this.state.isAutoPilotSelected) {
-            updateOfferParams.migrateToAutoPilot = true;
-          } else {
-            updateOfferParams.migrateToManual = true;
-          }
-        }
-        const updatedOffer: DataModels.Offer = await updateOffer(updateOfferParams);
-        this.collection.offer(updatedOffer);
-        this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
-        if (this.state.isAutoPilotSelected) {
-          this.setState({
-            autoPilotThroughput: updatedOffer.autoscaleMaxThroughput,
-            autoPilotThroughputBaseline: updatedOffer.autoscaleMaxThroughput,
-          });
-        } else {
-          this.setState({
-            throughput: updatedOffer.manualThroughput,
-            throughputBaseline: updatedOffer.manualThroughput,
-          });
-        }
-      }
-      this.container.isRefreshingExplorer(false);
-      this.setBaseline();
-      this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
-      traceSuccess(
-        Action.SettingsV2Updated,
-        {
-          databaseAccountName: this.container.databaseAccount()?.name,
-          databaseName: this.collection?.databaseId,
-          collectionName: this.collection?.id(),
-          defaultExperience: this.container.defaultExperience(),
-          dataExplorerArea: Constants.Areas.Tab,
-          tabTitle: this.props.settingsTab.tabTitle(),
-        },
-        startKey
-      );
+      await (this.isCollectionSettingsTab
+        ? this.saveCollectionSettings(startKey)
+        : this.saveDatabaseSettings(startKey));
     } catch (error) {
       this.container.isRefreshingExplorer(false);
       this.props.settingsTab.isExecutionError(true);
@@ -495,8 +344,9 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         },
         startKey
       );
+    } finally {
+      this.props.settingsTab.isExecuting(false);
     }
-    this.props.settingsTab.isExecuting(false);
   };
 
   public onRevertClick = (): void => {
@@ -693,6 +543,17 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   };
 
   public setBaseline = (): void => {
+    const offerThroughput = this.offer?.manualThroughput;
+
+    if (!this.isCollectionSettingsTab) {
+      this.setState({
+        throughput: offerThroughput,
+        throughputBaseline: offerThroughput,
+      });
+
+      return;
+    }
+
     const defaultTtl = this.collection.defaultTtl();
 
     let timeToLive: TtlType = this.state.timeToLive;
@@ -725,7 +586,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       }
     }
 
-    const offerThroughput = this.collection.offer()?.manualThroughput;
     const changeFeedPolicy = this.collection.rawDataModel?.changeFeedPolicy
       ? ChangeFeedPolicyState.On
       : ChangeFeedPolicyState.Off;
@@ -811,9 +671,225 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     this.setState({ selectedTab: selectedTab });
   };
 
+  private saveDatabaseSettings = async (startKey: number): Promise<void> => {
+    if (this.state.isScaleSaveable) {
+      const updateOfferParams: DataModels.UpdateOfferParams = {
+        databaseId: this.database.id(),
+        currentOffer: this.database.offer(),
+        autopilotThroughput: this.state.isAutoPilotSelected ? this.state.autoPilotThroughput : undefined,
+        manualThroughput: this.state.isAutoPilotSelected ? undefined : this.state.throughput,
+      };
+      if (this.hasProvisioningTypeChanged()) {
+        if (this.state.isAutoPilotSelected) {
+          updateOfferParams.migrateToAutoPilot = true;
+        } else {
+          updateOfferParams.migrateToManual = true;
+        }
+      }
+      const updatedOffer: DataModels.Offer = await updateOffer(updateOfferParams);
+      this.database.offer(updatedOffer);
+      this.offer = updatedOffer;
+      this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
+      if (this.state.isAutoPilotSelected) {
+        this.setState({
+          autoPilotThroughput: updatedOffer.autoscaleMaxThroughput,
+          autoPilotThroughputBaseline: updatedOffer.autoscaleMaxThroughput,
+        });
+      } else {
+        this.setState({
+          throughput: updatedOffer.manualThroughput,
+          throughputBaseline: updatedOffer.manualThroughput,
+        });
+      }
+    }
+
+    this.container.isRefreshingExplorer(false);
+    this.setBaseline();
+    this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
+    traceSuccess(
+      Action.SettingsV2Updated,
+      {
+        databaseAccountName: this.container.databaseAccount()?.name,
+        databaseName: this.database.id(),
+        defaultExperience: this.container.defaultExperience(),
+        dataExplorerArea: Constants.Areas.Tab,
+        tabTitle: this.props.settingsTab.tabTitle(),
+      },
+      startKey
+    );
+  };
+
+  private saveCollectionSettings = async (startKey: number): Promise<void> => {
+    const newCollection: DataModels.Collection = { ...this.collection.rawDataModel };
+
+    if (this.state.isSubSettingsSaveable || this.state.isIndexingPolicyDirty || this.state.isConflictResolutionDirty) {
+      let defaultTtl: number;
+      switch (this.state.timeToLive) {
+        case TtlType.On:
+          defaultTtl = Number(this.state.timeToLiveSeconds);
+          break;
+        case TtlType.OnNoDefault:
+          defaultTtl = -1;
+          break;
+        case TtlType.Off:
+        default:
+          defaultTtl = undefined;
+          break;
+      }
+
+      const wasIndexingPolicyModified = this.state.isIndexingPolicyDirty;
+      newCollection.defaultTtl = defaultTtl;
+
+      newCollection.indexingPolicy = this.state.indexingPolicyContent;
+
+      newCollection.changeFeedPolicy =
+        this.changeFeedPolicyVisible && this.state.changeFeedPolicy === ChangeFeedPolicyState.On
+          ? {
+              retentionDuration: Constants.BackendDefaults.maxChangeFeedRetentionDuration,
+            }
+          : undefined;
+
+      newCollection.analyticalStorageTtl = this.getAnalyticalStorageTtl();
+
+      newCollection.geospatialConfig = {
+        type: this.state.geospatialConfigType,
+      };
+
+      const conflictResolutionChanges: DataModels.ConflictResolutionPolicy = this.getUpdatedConflictResolutionPolicy();
+      if (conflictResolutionChanges) {
+        newCollection.conflictResolutionPolicy = conflictResolutionChanges;
+      }
+
+      const updatedCollection: DataModels.Collection = await updateCollection(
+        this.collection.databaseId,
+        this.collection.id(),
+        newCollection
+      );
+      this.collection.rawDataModel = updatedCollection;
+      this.collection.defaultTtl(updatedCollection.defaultTtl);
+      this.collection.analyticalStorageTtl(updatedCollection.analyticalStorageTtl);
+      this.collection.id(updatedCollection.id);
+      this.collection.indexingPolicy(updatedCollection.indexingPolicy);
+      this.collection.conflictResolutionPolicy(updatedCollection.conflictResolutionPolicy);
+      this.collection.changeFeedPolicy(updatedCollection.changeFeedPolicy);
+      this.collection.geospatialConfig(updatedCollection.geospatialConfig);
+
+      if (wasIndexingPolicyModified) {
+        await this.refreshIndexTransformationProgress();
+      }
+
+      this.setState({
+        isSubSettingsSaveable: false,
+        isSubSettingsDiscardable: false,
+        isIndexingPolicyDirty: false,
+        isConflictResolutionDirty: false,
+      });
+    }
+
+    if (this.state.isMongoIndexingPolicySaveable && this.mongoDBCollectionResource) {
+      try {
+        const newMongoIndexes = this.getMongoIndexesToSave();
+        const newMongoCollection: MongoDBCollectionResource = {
+          ...this.mongoDBCollectionResource,
+          indexes: newMongoIndexes,
+        };
+
+        this.mongoDBCollectionResource = await updateMongoDBCollectionThroughRP(
+          this.collection.databaseId,
+          this.collection.id(),
+          newMongoCollection
+        );
+
+        await this.refreshIndexTransformationProgress();
+        this.setState({
+          isMongoIndexingPolicySaveable: false,
+          indexesToDrop: [],
+          indexesToAdd: [],
+          currentMongoIndexes: [...this.mongoDBCollectionResource.indexes],
+        });
+        traceSuccess(
+          Action.MongoIndexUpdated,
+          {
+            databaseAccountName: this.container.databaseAccount()?.name,
+            databaseName: this.collection?.databaseId,
+            collectionName: this.collection?.id(),
+            defaultExperience: this.container.defaultExperience(),
+            dataExplorerArea: Constants.Areas.Tab,
+            tabTitle: this.props.settingsTab.tabTitle(),
+          },
+          startKey
+        );
+      } catch (error) {
+        traceFailure(
+          Action.MongoIndexUpdated,
+          {
+            databaseAccountName: this.container.databaseAccount()?.name,
+            databaseName: this.collection?.databaseId,
+            collectionName: this.collection?.id(),
+            defaultExperience: this.container.defaultExperience(),
+            dataExplorerArea: Constants.Areas.Tab,
+            tabTitle: this.props.settingsTab.tabTitle(),
+            error: getErrorMessage(error),
+            errorStack: getErrorStack(error),
+          },
+          startKey
+        );
+        throw error;
+      }
+    }
+
+    if (this.state.isScaleSaveable) {
+      const updateOfferParams: DataModels.UpdateOfferParams = {
+        databaseId: this.collection.databaseId,
+        collectionId: this.collection.id(),
+        currentOffer: this.collection.offer(),
+        autopilotThroughput: this.state.isAutoPilotSelected ? this.state.autoPilotThroughput : undefined,
+        manualThroughput: this.state.isAutoPilotSelected ? undefined : this.state.throughput,
+      };
+      if (this.hasProvisioningTypeChanged()) {
+        if (this.state.isAutoPilotSelected) {
+          updateOfferParams.migrateToAutoPilot = true;
+        } else {
+          updateOfferParams.migrateToManual = true;
+        }
+      }
+      const updatedOffer: DataModels.Offer = await updateOffer(updateOfferParams);
+      this.collection.offer(updatedOffer);
+      this.offer = updatedOffer;
+      this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
+      if (this.state.isAutoPilotSelected) {
+        this.setState({
+          autoPilotThroughput: updatedOffer.autoscaleMaxThroughput,
+          autoPilotThroughputBaseline: updatedOffer.autoscaleMaxThroughput,
+        });
+      } else {
+        this.setState({
+          throughput: updatedOffer.manualThroughput,
+          throughputBaseline: updatedOffer.manualThroughput,
+        });
+      }
+    }
+    this.container.isRefreshingExplorer(false);
+    this.setBaseline();
+    this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
+    traceSuccess(
+      Action.SettingsV2Updated,
+      {
+        databaseAccountName: this.container.databaseAccount()?.name,
+        databaseName: this.collection?.databaseId,
+        collectionName: this.collection?.id(),
+        defaultExperience: this.container.defaultExperience(),
+        dataExplorerArea: Constants.Areas.Tab,
+        tabTitle: this.props.settingsTab.tabTitle(),
+      },
+      startKey
+    );
+  };
+
   public render(): JSX.Element {
     const scaleComponentProps: ScaleComponentProps = {
       collection: this.collection,
+      database: this.database,
       container: this.container,
       isFixedContainer: this.isFixedContainer,
       onThroughputChange: this.onThroughputChange,
@@ -830,6 +906,16 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       initialNotification: this.props.settingsTab.pendingNotification(),
     };
 
+    if (!this.isCollectionSettingsTab) {
+      return (
+        <div className="settingsV2MainContainer">
+          <div className="settingsV2TabsContainer">
+            <ScaleComponent {...scaleComponentProps} />
+          </div>
+        </div>
+      );
+    }
+
     const subSettingsComponentProps: SubSettingsComponentProps = {
       collection: this.collection,
       container: this.container,
@@ -899,7 +985,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     };
 
     const tabs: SettingsV2TabInfo[] = [];
-    if (!hasDatabaseSharedThroughput(this.collection) && this.collection.offer()) {
+    if (!hasDatabaseSharedThroughput(this.collection) && this.offer) {
       tabs.push({
         tab: SettingsV2TabTypes.ScaleTab,
         content: <ScaleComponent {...scaleComponentProps} />,
@@ -917,16 +1003,16 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         content: <IndexingPolicyComponent {...indexingPolicyComponentProps} />,
       });
     } else if (this.container.isPreferredApiMongoDB()) {
-      if (isEmpty(this.container.features())) {
-        tabs.push({
-          tab: SettingsV2TabTypes.IndexingPolicyTab,
-          content: mongoIndexingPolicyAADError,
-        });
-      } else if (this.container.isEnableMongoCapabilityPresent()) {
+      if (this.container.isEnableMongoCapabilityPresent()) {
         tabs.push({
           tab: SettingsV2TabTypes.IndexingPolicyTab,
           content: <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />,
         });
+      } else {
+        tabs.push({
+          tab: SettingsV2TabTypes.IndexingPolicyTab,
+          content: mongoIndexingPolicyAADError,
+        });
       }
     }
 

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -375,7 +375,7 @@ export const getThroughputApplyShortDelayMessage = (
   <Text styles={infoAndToolTipTextStyle} id="throughputApplyShortDelayMessage">
     A request to increase the throughput is currently in progress. This operation will take some time to complete.
     <br />
-    Database: {databaseName}, Container: {collectionName}{" "}
+    {collectionName ? `Database: ${databaseName}, Container: ${collectionName} ` : `Database: ${databaseName} `}
     {getCurrentThroughput(isAutoscale, throughput, throughputUnit)}
   </Text>
 );
@@ -392,7 +392,7 @@ export const getThroughputApplyLongDelayMessage = (
     A request to increase the throughput is currently in progress. This operation will take 1-3 business days to
     complete. View the latest status in Notifications.
     <br />
-    Database: {databaseName}, Container: {collectionName}{" "}
+    {collectionName ? `Database: ${databaseName}, Container: ${collectionName} ` : `Database: ${databaseName} `}
     {getCurrentThroughput(isAutoscale, throughput, throughputUnit, requestedThroughput)}
   </Text>
 );

src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.test.tsx

@@ -18,6 +18,7 @@ describe("ScaleComponent", () => {
 
   const baseProps: ScaleComponentProps = {
     collection: collection,
+    database: undefined,
     container: container,
     isFixedContainer: false,
     onThroughputChange: () => {

src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx

@@ -21,6 +21,7 @@ import { configContext, Platform } from "../../../../ConfigContext";
 
 export interface ScaleComponentProps {
   collection: ViewModels.Collection;
+  database: ViewModels.Database;
   container: Explorer;
   isFixedContainer: boolean;
   onThroughputChange: (newThroughput: number) => void;
@@ -39,9 +40,16 @@ export interface ScaleComponentProps {
 
 export class ScaleComponent extends React.Component<ScaleComponentProps> {
   private isEmulator: boolean;
+  private offer: DataModels.Offer;
+  private databaseId: string;
+  private collectionId: string;
+
   constructor(props: ScaleComponentProps) {
     super(props);
     this.isEmulator = configContext.platform === Platform.Emulator;
+    this.offer = this.props.database?.offer() || this.props.collection?.offer();
+    this.databaseId = this.props.database?.id() || this.props.collection.databaseId;
+    this.collectionId = this.props.collection?.id();
   }
 
   public isAutoScaleEnabled = (): boolean => {
@@ -87,9 +95,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
       return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
     }
 
-    return (
-      this.props.collection.offer()?.minimumThroughput || SharedConstants.CollectionCreation.DefaultCollectionRUs400
-    );
+    return this.offer?.minimumThroughput || SharedConstants.CollectionCreation.DefaultCollectionRUs400;
   };
 
   public getThroughputTitle = (): string => {
@@ -115,15 +121,14 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
       return this.getLongDelayMessage();
     }
 
-    const offer = this.props.collection?.offer();
-    if (offer?.offerReplacePending) {
-      const throughput = offer.manualThroughput || offer.autoscaleMaxThroughput;
+    if (this.offer?.offerReplacePending) {
+      const throughput = this.offer.manualThroughput || this.offer.autoscaleMaxThroughput;
       return getThroughputApplyShortDelayMessage(
         this.props.isAutoPilotSelected,
         throughput,
         throughputUnit,
-        this.props.collection.databaseId,
-        this.props.collection.id()
+        this.databaseId,
+        this.collectionId
       );
     }
 
@@ -135,7 +140,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
       this.canThroughputExceedMaximumValue() &&
       this.props.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs1Million;
 
-    if (throughputExceedsBackendLimits && !!this.props.collection.partitionKey && !this.props.isFixedContainer) {
+    if (throughputExceedsBackendLimits && !this.props.isFixedContainer) {
       return updateThroughputBeyondLimitWarningMessage;
     }
 
@@ -154,8 +159,8 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
         this.props.wasAutopilotOriginallySet,
         throughput,
         throughputUnit,
-        this.props.collection.databaseId,
-        this.props.collection.id(),
+        this.databaseId,
+        this.collectionId,
         targetThroughput
       );
     }
@@ -165,15 +170,15 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   private getThroughputInputComponent = (): JSX.Element => (
     <ThroughputInputAutoPilotV3Component
       databaseAccount={this.props.container.databaseAccount()}
-      databaseName={this.props.collection.databaseId}
-      collectionName={this.props.collection.id()}
+      databaseName={this.databaseId}
+      collectionName={this.collectionId}
       serverId={this.props.container.serverId()}
       throughput={this.props.throughput}
       throughputBaseline={this.props.throughputBaseline}
       onThroughputChange={this.props.onThroughputChange}
       minimum={this.getMinRUs()}
       maximum={this.getMaxRUs()}
-      isEnabled={!hasDatabaseSharedThroughput(this.props.collection)}
+      isEnabled={!!this.props.database || !hasDatabaseSharedThroughput(this.props.collection)}
       canExceedMaximumValue={this.canThroughputExceedMaximumValue()}
       label={this.getThroughputTitle()}
       isEmulator={this.isEmulator}
@@ -189,7 +194,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
       onScaleSaveableChange={this.props.onScaleSaveableChange}
       onScaleDiscardableChange={this.props.onScaleDiscardableChange}
       getThroughputWarningMessage={this.getThroughputWarningMessage}
-      usageSizeInKB={this.props.collection.usageSizeInKB()}
+      usageSizeInKB={this.props.collection?.usageSizeInKB()}
     />
   );
 
@@ -230,7 +235,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
         {!this.isAutoScaleEnabled() && (
           <Stack {...subComponentStackProps}>
             {this.getThroughputInputComponent()}
-            {this.getStorageCapacityTitle()}
+            {!this.props.database && this.getStorageCapacityTitle()}
           </Stack>
         )}
 

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx

@@ -40,6 +40,7 @@ import { userContext } from "../../../../../UserContext";
 import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
 import { usageInGB, calculateEstimateNumber } from "../../../../../Utils/PricingUtils";
 import { Features } from "../../../../../Common/Constants";
+import { minAutoPilotThroughput } from "../../../../../Utils/AutoPilotUtils";
 
 import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/TelemetryConstants";
@@ -541,6 +542,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
         step={AutoPilotUtils.autoPilotIncrementStep}
         value={this.overrideWithProvisionedThroughputSettings() ? "" : this.props.maxAutoPilotThroughput?.toString()}
         onChange={this.onAutoPilotThroughputChange}
+        min={minAutoPilotThroughput}
       />
       {!this.overrideWithProvisionedThroughputSettings() && this.getAutoPilotUsageCost()}
       {this.minRUperGBSurvey()}
@@ -579,6 +581,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
             : this.props.throughput?.toString()
         }
         onChange={this.onThroughputChange}
+        min={this.props.minimum}
       />
       {this.state.exceedFreeTierThroughput && (
         <MessageBar

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap

@@ -142,6 +142,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
     id="autopilotInput"
     key="auto pilot throughput input"
     label="Max RU/s"
+    min={4000}
     onChange={[Function]}
     required={true}
     step={1000}
@@ -260,6 +261,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
       disabled={false}
       id="throughputInput"
       key="provisioned throughput input"
+      min={10000}
       onChange={[Function]}
       required={true}
       step={100}
@@ -533,6 +535,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
       disabled={false}
       id="throughputInput"
       key="provisioned throughput input"
+      min={10000}
       onChange={[Function]}
       required={true}
       step={100}

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ScaleComponent.test.tsx.snap

@@ -23,11 +23,7 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
     >
       A request to increase the throughput is currently in progress. This operation will take 1-3 business days to complete. View the latest status in Notifications.
       <br />
-      Database: 
-      test
-      , Container: 
-      test
-       
+      Database: test, Container: test 
       , Current autoscale throughput: 100 - 1000 RU/s, Target autoscale throughput: 600 - 6000 RU/s
     </Text>
   </StyledMessageBarBase>

src/Explorer/Controls/Settings/SettingsUtils.test.tsx

@@ -46,6 +46,7 @@ describe("SettingsUtils", () => {
         readSettings: undefined,
         onSettingsClick: undefined,
         loadOffer: undefined,
+        getPendingThroughputSplitNotification: undefined,
       } as ViewModels.Database;
     };
     newCollection.offer(undefined);

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

@@ -28,16 +28,11 @@ exports[`SettingsComponent renders 1`] = `
               "changeFeedPolicy": [Function],
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
-                "_addSynapseLinkDialogProps": [Function],
                 "_closeModalDialog": [Function],
                 "_closeSynapseLinkModalDialog": [Function],
-                "_dialogProps": [Function],
-                "_importExplorerConfigComplete": false,
                 "_isAfecFeatureRegistered": [Function],
                 "_isInitializingNotebooks": false,
-                "_isInitializingSparkConnectionInfo": false,
                 "_isSystemDatabasePredicate": [Function],
-                "_openShareDialog": [Function],
                 "_panes": Array [
                   AddDatabasePane {
                     "autoPilotUsageCost": [Function],
@@ -440,22 +435,6 @@ exports[`SettingsComponent renders 1`] = `
                     "validPartitionKeyValue": [Function],
                     "visible": [Function],
                   },
-                  RenewAdHocAccessPane {
-                    "_renewShareAccess": [Function],
-                    "accessKey": [Function],
-                    "container": [Circular],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "renewadhocaccesspane",
-                    "isExecuting": [Function],
-                    "isHelperImageVisible": [Function],
-                    "isTemplateReady": [Function],
-                    "onShowHelperImageClick": [Function],
-                    "onShowHelperImageKeyPress": [Function],
-                    "title": [Function],
-                    "visible": [Function],
-                  },
                   UploadItemsPane {
                     "container": [Circular],
                     "fileUploadSummaryText": [Function],
@@ -695,9 +674,6 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "addDatabaseText": [Function],
-                "addSynapseLinkDialog": DialogComponentAdapter {
-                  "parameters": [Function],
-                },
                 "addTableEntityPane": AddTableEntityPane {
                   "addButtonLabel": "Add Property",
                   "attributeNameLabel": "Property Name",
@@ -804,6 +780,8 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "clickHostedAccountSwitch": [Function],
                 "clickHostedDirectorySwitch": [Function],
+                "closeDialog": undefined,
+                "closeSidePanel": undefined,
                 "collapsedResourceTreeWidth": 36,
                 "collectionCreationDefaults": Object {
                   "storage": "100",
@@ -858,9 +836,6 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "deleteDatabaseText": [Function],
-                "dialogComponentAdapter": DialogComponentAdapter {
-                  "parameters": [Function],
-                },
                 "editTableEntityPane": EditTableEntityPane {
                   "addButtonLabel": "Add Property",
                   "attributeNameLabel": "Property Name",
@@ -950,11 +925,9 @@ exports[`SettingsComponent renders 1`] = `
                 "isCopyNotebookPaneEnabled": [Function],
                 "isEnableMongoCapabilityPresent": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
-                "isGalleryPublishEnabled": [Function],
                 "isGitHubPaneEnabled": [Function],
                 "isHostedDataExplorerEnabled": [Function],
                 "isLeftPaneExpanded": [Function],
-                "isLinkInjectionEnabled": [Function],
                 "isMongoIndexingEnabled": [Function],
                 "isNotebookEnabled": [Function],
                 "isNotebooksEnabledForAccount": [Function],
@@ -964,8 +937,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isPreferredApiMongoDB": [Function],
                 "isPreferredApiTable": [Function],
                 "isPublishNotebookPaneEnabled": [Function],
-                "isReadToggled": [Function],
-                "isReadWriteToggled": [Function],
                 "isRefreshingExplorer": [Function],
                 "isResourceTokenCollectionNodeSelected": [Function],
                 "isRightPanelV2Enabled": [Function],
@@ -1020,7 +991,8 @@ exports[`SettingsComponent renders 1`] = `
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
                 "onSwitchToConnectionString": [Function],
-                "onToggleKeyDown": [Function],
+                "openDialog": undefined,
+                "openSidePanel": undefined,
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -1049,24 +1021,6 @@ exports[`SettingsComponent renders 1`] = `
                 "refreshDatabaseAccount": [Function],
                 "refreshNotebookList": [Function],
                 "refreshTreeTitle": [Function],
-                "renewAdHocAccessPane": RenewAdHocAccessPane {
-                  "_renewShareAccess": [Function],
-                  "accessKey": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "renewadhocaccesspane",
-                  "isExecuting": [Function],
-                  "isHelperImageVisible": [Function],
-                  "isTemplateReady": [Function],
-                  "onShowHelperImageClick": [Function],
-                  "onShowHelperImageKeyPress": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
-                "renewToken": [Function],
-                "renewTokenError": [Function],
                 "resourceTokenCollection": [Function],
                 "resourceTokenCollectionId": [Function],
                 "resourceTokenDatabaseId": [Function],
@@ -1162,22 +1116,8 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                "shareAccessData": [Function],
-                "shareAccessToggleState": [Function],
-                "shareAccessUrl": [Function],
-                "shareTokenCopyHelperText": [Function],
-                "shareUrlCopyHelperText": [Function],
-                "shouldShowContextSwitchPrompt": [Function],
-                "shouldShowDataAccessExpiryDialog": [Function],
-                "shouldShowShareDialogContents": [Function],
                 "signInAad": [Function],
                 "sparkClusterConnectionInfo": [Function],
-                "splashScreenAdapter": SplashScreenComponentAdapter {
-                  "clearMostRecent": [Function],
-                  "container": [Circular],
-                  "forceRender": [Function],
-                  "parameters": [Function],
-                },
                 "splitter": Splitter {
                   "bounds": Object {
                     "max": 400,
@@ -1235,9 +1175,6 @@ exports[`SettingsComponent renders 1`] = `
                   "openedTabs": [Function],
                 },
                 "toggleLeftPaneExpandedKeyPress": [Function],
-                "toggleRead": [Function],
-                "toggleReadWrite": [Function],
-                "tokenForRenewal": [Function],
                 "uploadFilePane": UploadFilePane {
                   "container": [Circular],
                   "extensions": [Function],
@@ -1307,16 +1244,11 @@ exports[`SettingsComponent renders 1`] = `
           }
           container={
             Explorer {
-              "_addSynapseLinkDialogProps": [Function],
               "_closeModalDialog": [Function],
               "_closeSynapseLinkModalDialog": [Function],
-              "_dialogProps": [Function],
-              "_importExplorerConfigComplete": false,
               "_isAfecFeatureRegistered": [Function],
               "_isInitializingNotebooks": false,
-              "_isInitializingSparkConnectionInfo": false,
               "_isSystemDatabasePredicate": [Function],
-              "_openShareDialog": [Function],
               "_panes": Array [
                 AddDatabasePane {
                   "autoPilotUsageCost": [Function],
@@ -1719,22 +1651,6 @@ exports[`SettingsComponent renders 1`] = `
                   "validPartitionKeyValue": [Function],
                   "visible": [Function],
                 },
-                RenewAdHocAccessPane {
-                  "_renewShareAccess": [Function],
-                  "accessKey": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "renewadhocaccesspane",
-                  "isExecuting": [Function],
-                  "isHelperImageVisible": [Function],
-                  "isTemplateReady": [Function],
-                  "onShowHelperImageClick": [Function],
-                  "onShowHelperImageKeyPress": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 UploadItemsPane {
                   "container": [Circular],
                   "fileUploadSummaryText": [Function],
@@ -1974,9 +1890,6 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "addDatabaseText": [Function],
-              "addSynapseLinkDialog": DialogComponentAdapter {
-                "parameters": [Function],
-              },
               "addTableEntityPane": AddTableEntityPane {
                 "addButtonLabel": "Add Property",
                 "attributeNameLabel": "Property Name",
@@ -2083,6 +1996,8 @@ exports[`SettingsComponent renders 1`] = `
               },
               "clickHostedAccountSwitch": [Function],
               "clickHostedDirectorySwitch": [Function],
+              "closeDialog": undefined,
+              "closeSidePanel": undefined,
               "collapsedResourceTreeWidth": 36,
               "collectionCreationDefaults": Object {
                 "storage": "100",
@@ -2137,9 +2052,6 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "deleteDatabaseText": [Function],
-              "dialogComponentAdapter": DialogComponentAdapter {
-                "parameters": [Function],
-              },
               "editTableEntityPane": EditTableEntityPane {
                 "addButtonLabel": "Add Property",
                 "attributeNameLabel": "Property Name",
@@ -2229,11 +2141,9 @@ exports[`SettingsComponent renders 1`] = `
               "isCopyNotebookPaneEnabled": [Function],
               "isEnableMongoCapabilityPresent": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
-              "isGalleryPublishEnabled": [Function],
               "isGitHubPaneEnabled": [Function],
               "isHostedDataExplorerEnabled": [Function],
               "isLeftPaneExpanded": [Function],
-              "isLinkInjectionEnabled": [Function],
               "isMongoIndexingEnabled": [Function],
               "isNotebookEnabled": [Function],
               "isNotebooksEnabledForAccount": [Function],
@@ -2243,8 +2153,6 @@ exports[`SettingsComponent renders 1`] = `
               "isPreferredApiMongoDB": [Function],
               "isPreferredApiTable": [Function],
               "isPublishNotebookPaneEnabled": [Function],
-              "isReadToggled": [Function],
-              "isReadWriteToggled": [Function],
               "isRefreshingExplorer": [Function],
               "isResourceTokenCollectionNodeSelected": [Function],
               "isRightPanelV2Enabled": [Function],
@@ -2299,7 +2207,8 @@ exports[`SettingsComponent renders 1`] = `
               "onRefreshDatabasesKeyPress": [Function],
               "onRefreshResourcesClick": [Function],
               "onSwitchToConnectionString": [Function],
-              "onToggleKeyDown": [Function],
+              "openDialog": undefined,
+              "openSidePanel": undefined,
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
                 "container": [Circular],
@@ -2328,24 +2237,6 @@ exports[`SettingsComponent renders 1`] = `
               "refreshDatabaseAccount": [Function],
               "refreshNotebookList": [Function],
               "refreshTreeTitle": [Function],
-              "renewAdHocAccessPane": RenewAdHocAccessPane {
-                "_renewShareAccess": [Function],
-                "accessKey": [Function],
-                "container": [Circular],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "renewadhocaccesspane",
-                "isExecuting": [Function],
-                "isHelperImageVisible": [Function],
-                "isTemplateReady": [Function],
-                "onShowHelperImageClick": [Function],
-                "onShowHelperImageKeyPress": [Function],
-                "title": [Function],
-                "visible": [Function],
-              },
-              "renewToken": [Function],
-              "renewTokenError": [Function],
               "resourceTokenCollection": [Function],
               "resourceTokenCollectionId": [Function],
               "resourceTokenDatabaseId": [Function],
@@ -2441,22 +2332,8 @@ exports[`SettingsComponent renders 1`] = `
                 "title": [Function],
                 "visible": [Function],
               },
-              "shareAccessData": [Function],
-              "shareAccessToggleState": [Function],
-              "shareAccessUrl": [Function],
-              "shareTokenCopyHelperText": [Function],
-              "shareUrlCopyHelperText": [Function],
-              "shouldShowContextSwitchPrompt": [Function],
-              "shouldShowDataAccessExpiryDialog": [Function],
-              "shouldShowShareDialogContents": [Function],
               "signInAad": [Function],
               "sparkClusterConnectionInfo": [Function],
-              "splashScreenAdapter": SplashScreenComponentAdapter {
-                "clearMostRecent": [Function],
-                "container": [Circular],
-                "forceRender": [Function],
-                "parameters": [Function],
-              },
               "splitter": Splitter {
                 "bounds": Object {
                   "max": 400,
@@ -2514,9 +2391,6 @@ exports[`SettingsComponent renders 1`] = `
                 "openedTabs": [Function],
               },
               "toggleLeftPaneExpandedKeyPress": [Function],
-              "toggleRead": [Function],
-              "toggleReadWrite": [Function],
-              "tokenForRenewal": [Function],
               "uploadFilePane": UploadFilePane {
                 "container": [Circular],
                 "extensions": [Function],
@@ -2599,16 +2473,11 @@ exports[`SettingsComponent renders 1`] = `
               "changeFeedPolicy": [Function],
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
-                "_addSynapseLinkDialogProps": [Function],
                 "_closeModalDialog": [Function],
                 "_closeSynapseLinkModalDialog": [Function],
-                "_dialogProps": [Function],
-                "_importExplorerConfigComplete": false,
                 "_isAfecFeatureRegistered": [Function],
                 "_isInitializingNotebooks": false,
-                "_isInitializingSparkConnectionInfo": false,
                 "_isSystemDatabasePredicate": [Function],
-                "_openShareDialog": [Function],
                 "_panes": Array [
                   AddDatabasePane {
                     "autoPilotUsageCost": [Function],
@@ -3011,22 +2880,6 @@ exports[`SettingsComponent renders 1`] = `
                     "validPartitionKeyValue": [Function],
                     "visible": [Function],
                   },
-                  RenewAdHocAccessPane {
-                    "_renewShareAccess": [Function],
-                    "accessKey": [Function],
-                    "container": [Circular],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "renewadhocaccesspane",
-                    "isExecuting": [Function],
-                    "isHelperImageVisible": [Function],
-                    "isTemplateReady": [Function],
-                    "onShowHelperImageClick": [Function],
-                    "onShowHelperImageKeyPress": [Function],
-                    "title": [Function],
-                    "visible": [Function],
-                  },
                   UploadItemsPane {
                     "container": [Circular],
                     "fileUploadSummaryText": [Function],
@@ -3266,9 +3119,6 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "addDatabaseText": [Function],
-                "addSynapseLinkDialog": DialogComponentAdapter {
-                  "parameters": [Function],
-                },
                 "addTableEntityPane": AddTableEntityPane {
                   "addButtonLabel": "Add Property",
                   "attributeNameLabel": "Property Name",
@@ -3375,6 +3225,8 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "clickHostedAccountSwitch": [Function],
                 "clickHostedDirectorySwitch": [Function],
+                "closeDialog": undefined,
+                "closeSidePanel": undefined,
                 "collapsedResourceTreeWidth": 36,
                 "collectionCreationDefaults": Object {
                   "storage": "100",
@@ -3429,9 +3281,6 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "deleteDatabaseText": [Function],
-                "dialogComponentAdapter": DialogComponentAdapter {
-                  "parameters": [Function],
-                },
                 "editTableEntityPane": EditTableEntityPane {
                   "addButtonLabel": "Add Property",
                   "attributeNameLabel": "Property Name",
@@ -3521,11 +3370,9 @@ exports[`SettingsComponent renders 1`] = `
                 "isCopyNotebookPaneEnabled": [Function],
                 "isEnableMongoCapabilityPresent": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
-                "isGalleryPublishEnabled": [Function],
                 "isGitHubPaneEnabled": [Function],
                 "isHostedDataExplorerEnabled": [Function],
                 "isLeftPaneExpanded": [Function],
-                "isLinkInjectionEnabled": [Function],
                 "isMongoIndexingEnabled": [Function],
                 "isNotebookEnabled": [Function],
                 "isNotebooksEnabledForAccount": [Function],
@@ -3535,8 +3382,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isPreferredApiMongoDB": [Function],
                 "isPreferredApiTable": [Function],
                 "isPublishNotebookPaneEnabled": [Function],
-                "isReadToggled": [Function],
-                "isReadWriteToggled": [Function],
                 "isRefreshingExplorer": [Function],
                 "isResourceTokenCollectionNodeSelected": [Function],
                 "isRightPanelV2Enabled": [Function],
@@ -3591,7 +3436,8 @@ exports[`SettingsComponent renders 1`] = `
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
                 "onSwitchToConnectionString": [Function],
-                "onToggleKeyDown": [Function],
+                "openDialog": undefined,
+                "openSidePanel": undefined,
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -3620,24 +3466,6 @@ exports[`SettingsComponent renders 1`] = `
                 "refreshDatabaseAccount": [Function],
                 "refreshNotebookList": [Function],
                 "refreshTreeTitle": [Function],
-                "renewAdHocAccessPane": RenewAdHocAccessPane {
-                  "_renewShareAccess": [Function],
-                  "accessKey": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "renewadhocaccesspane",
-                  "isExecuting": [Function],
-                  "isHelperImageVisible": [Function],
-                  "isTemplateReady": [Function],
-                  "onShowHelperImageClick": [Function],
-                  "onShowHelperImageKeyPress": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
-                "renewToken": [Function],
-                "renewTokenError": [Function],
                 "resourceTokenCollection": [Function],
                 "resourceTokenCollectionId": [Function],
                 "resourceTokenDatabaseId": [Function],
@@ -3733,22 +3561,8 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                "shareAccessData": [Function],
-                "shareAccessToggleState": [Function],
-                "shareAccessUrl": [Function],
-                "shareTokenCopyHelperText": [Function],
-                "shareUrlCopyHelperText": [Function],
-                "shouldShowContextSwitchPrompt": [Function],
-                "shouldShowDataAccessExpiryDialog": [Function],
-                "shouldShowShareDialogContents": [Function],
                 "signInAad": [Function],
                 "sparkClusterConnectionInfo": [Function],
-                "splashScreenAdapter": SplashScreenComponentAdapter {
-                  "clearMostRecent": [Function],
-                  "container": [Circular],
-                  "forceRender": [Function],
-                  "parameters": [Function],
-                },
                 "splitter": Splitter {
                   "bounds": Object {
                     "max": 400,
@@ -3806,9 +3620,6 @@ exports[`SettingsComponent renders 1`] = `
                   "openedTabs": [Function],
                 },
                 "toggleLeftPaneExpandedKeyPress": [Function],
-                "toggleRead": [Function],
-                "toggleReadWrite": [Function],
-                "tokenForRenewal": [Function],
                 "uploadFilePane": UploadFilePane {
                   "container": [Circular],
                   "extensions": [Function],
@@ -3878,16 +3689,11 @@ exports[`SettingsComponent renders 1`] = `
           }
           container={
             Explorer {
-              "_addSynapseLinkDialogProps": [Function],
               "_closeModalDialog": [Function],
               "_closeSynapseLinkModalDialog": [Function],
-              "_dialogProps": [Function],
-              "_importExplorerConfigComplete": false,
               "_isAfecFeatureRegistered": [Function],
               "_isInitializingNotebooks": false,
-              "_isInitializingSparkConnectionInfo": false,
               "_isSystemDatabasePredicate": [Function],
-              "_openShareDialog": [Function],
               "_panes": Array [
                 AddDatabasePane {
                   "autoPilotUsageCost": [Function],
@@ -4290,22 +4096,6 @@ exports[`SettingsComponent renders 1`] = `
                   "validPartitionKeyValue": [Function],
                   "visible": [Function],
                 },
-                RenewAdHocAccessPane {
-                  "_renewShareAccess": [Function],
-                  "accessKey": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "renewadhocaccesspane",
-                  "isExecuting": [Function],
-                  "isHelperImageVisible": [Function],
-                  "isTemplateReady": [Function],
-                  "onShowHelperImageClick": [Function],
-                  "onShowHelperImageKeyPress": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 UploadItemsPane {
                   "container": [Circular],
                   "fileUploadSummaryText": [Function],
@@ -4545,9 +4335,6 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "addDatabaseText": [Function],
-              "addSynapseLinkDialog": DialogComponentAdapter {
-                "parameters": [Function],
-              },
               "addTableEntityPane": AddTableEntityPane {
                 "addButtonLabel": "Add Property",
                 "attributeNameLabel": "Property Name",
@@ -4654,6 +4441,8 @@ exports[`SettingsComponent renders 1`] = `
               },
               "clickHostedAccountSwitch": [Function],
               "clickHostedDirectorySwitch": [Function],
+              "closeDialog": undefined,
+              "closeSidePanel": undefined,
               "collapsedResourceTreeWidth": 36,
               "collectionCreationDefaults": Object {
                 "storage": "100",
@@ -4708,9 +4497,6 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "deleteDatabaseText": [Function],
-              "dialogComponentAdapter": DialogComponentAdapter {
-                "parameters": [Function],
-              },
               "editTableEntityPane": EditTableEntityPane {
                 "addButtonLabel": "Add Property",
                 "attributeNameLabel": "Property Name",
@@ -4800,11 +4586,9 @@ exports[`SettingsComponent renders 1`] = `
               "isCopyNotebookPaneEnabled": [Function],
               "isEnableMongoCapabilityPresent": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
-              "isGalleryPublishEnabled": [Function],
               "isGitHubPaneEnabled": [Function],
               "isHostedDataExplorerEnabled": [Function],
               "isLeftPaneExpanded": [Function],
-              "isLinkInjectionEnabled": [Function],
               "isMongoIndexingEnabled": [Function],
               "isNotebookEnabled": [Function],
               "isNotebooksEnabledForAccount": [Function],
@@ -4814,8 +4598,6 @@ exports[`SettingsComponent renders 1`] = `
               "isPreferredApiMongoDB": [Function],
               "isPreferredApiTable": [Function],
               "isPublishNotebookPaneEnabled": [Function],
-              "isReadToggled": [Function],
-              "isReadWriteToggled": [Function],
               "isRefreshingExplorer": [Function],
               "isResourceTokenCollectionNodeSelected": [Function],
               "isRightPanelV2Enabled": [Function],
@@ -4870,7 +4652,8 @@ exports[`SettingsComponent renders 1`] = `
               "onRefreshDatabasesKeyPress": [Function],
               "onRefreshResourcesClick": [Function],
               "onSwitchToConnectionString": [Function],
-              "onToggleKeyDown": [Function],
+              "openDialog": undefined,
+              "openSidePanel": undefined,
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
                 "container": [Circular],
@@ -4899,24 +4682,6 @@ exports[`SettingsComponent renders 1`] = `
               "refreshDatabaseAccount": [Function],
               "refreshNotebookList": [Function],
               "refreshTreeTitle": [Function],
-              "renewAdHocAccessPane": RenewAdHocAccessPane {
-                "_renewShareAccess": [Function],
-                "accessKey": [Function],
-                "container": [Circular],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "renewadhocaccesspane",
-                "isExecuting": [Function],
-                "isHelperImageVisible": [Function],
-                "isTemplateReady": [Function],
-                "onShowHelperImageClick": [Function],
-                "onShowHelperImageKeyPress": [Function],
-                "title": [Function],
-                "visible": [Function],
-              },
-              "renewToken": [Function],
-              "renewTokenError": [Function],
               "resourceTokenCollection": [Function],
               "resourceTokenCollectionId": [Function],
               "resourceTokenDatabaseId": [Function],
@@ -5012,22 +4777,8 @@ exports[`SettingsComponent renders 1`] = `
                 "title": [Function],
                 "visible": [Function],
               },
-              "shareAccessData": [Function],
-              "shareAccessToggleState": [Function],
-              "shareAccessUrl": [Function],
-              "shareTokenCopyHelperText": [Function],
-              "shareUrlCopyHelperText": [Function],
-              "shouldShowContextSwitchPrompt": [Function],
-              "shouldShowDataAccessExpiryDialog": [Function],
-              "shouldShowShareDialogContents": [Function],
               "signInAad": [Function],
               "sparkClusterConnectionInfo": [Function],
-              "splashScreenAdapter": SplashScreenComponentAdapter {
-                "clearMostRecent": [Function],
-                "container": [Circular],
-                "forceRender": [Function],
-                "parameters": [Function],
-              },
               "splitter": Splitter {
                 "bounds": Object {
                   "max": 400,
@@ -5085,9 +4836,6 @@ exports[`SettingsComponent renders 1`] = `
                 "openedTabs": [Function],
               },
               "toggleLeftPaneExpandedKeyPress": [Function],
-              "toggleRead": [Function],
-              "toggleReadWrite": [Function],
-              "tokenForRenewal": [Function],
               "uploadFilePane": UploadFilePane {
                 "container": [Circular],
                 "extensions": [Function],

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

@@ -256,11 +256,7 @@ exports[`SettingsUtils functions render 1`] = `
   >
     A request to increase the throughput is currently in progress. This operation will take some time to complete.
     <br />
-    Database: 
-    sampleDb
-    , Container: 
-    sampleCollection
-     
+    Database: sampleDb, Container: sampleCollection 
     , Current manual throughput: 1000 RU/s
   </Text>
   <Text
@@ -275,11 +271,7 @@ exports[`SettingsUtils functions render 1`] = `
   >
     A request to increase the throughput is currently in progress. This operation will take 1-3 business days to complete. View the latest status in Notifications.
     <br />
-    Database: 
-    sampleDb
-    , Container: 
-    sampleCollection
-     
+    Database: sampleDb, Container: sampleCollection 
     , Current manual throughput: 1000 RU/s, Target manual throughput: 2000
   </Text>
   <Text

src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx

@@ -8,10 +8,10 @@ describe("SmartUiComponent", () => {
     root: {
       id: "root",
       info: {
-        message: "Start at $24/mo per database",
+        messageTKey: "Start at $24/mo per database",
         link: {
           href: "https://aka.ms/azure-cosmos-db-pricing",
-          text: "More Details",
+          textTKey: "More Details",
         },
       },
       children: [
@@ -21,10 +21,10 @@ describe("SmartUiComponent", () => {
             dataFieldName: "description",
             type: "string",
             description: {
-              text: "this is an example description text.",
+              textTKey: "this is an example description text.",
               link: {
                 href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
-                text: "Click here for more information.",
+                textTKey: "Click here for more information.",
               },
             },
           },
@@ -32,7 +32,7 @@ describe("SmartUiComponent", () => {
         {
           id: "throughput",
           input: {
-            label: "Throughput (input)",
+            labelTKey: "Throughput (input)",
             dataFieldName: "throughput",
             type: "number",
             min: 400,
@@ -45,7 +45,7 @@ describe("SmartUiComponent", () => {
         {
           id: "throughput2",
           input: {
-            label: "Throughput (Slider)",
+            labelTKey: "Throughput (Slider)",
             dataFieldName: "throughput2",
             type: "number",
             min: 400,
@@ -58,7 +58,7 @@ describe("SmartUiComponent", () => {
         {
           id: "throughput3",
           input: {
-            label: "Throughput (invalid)",
+            labelTKey: "Throughput (invalid)",
             dataFieldName: "throughput3",
             type: "boolean",
             min: 400,
@@ -72,7 +72,7 @@ describe("SmartUiComponent", () => {
         {
           id: "containerId",
           input: {
-            label: "Container id",
+            labelTKey: "Container id",
             dataFieldName: "containerId",
             type: "string",
           },
@@ -80,9 +80,9 @@ describe("SmartUiComponent", () => {
         {
           id: "analyticalStore",
           input: {
-            label: "Analytical Store",
-            trueLabel: "Enabled",
-            falseLabel: "Disabled",
+            labelTKey: "Analytical Store",
+            trueLabelTKey: "Enabled",
+            falseLabelTKey: "Disabled",
             defaultValue: true,
             dataFieldName: "analyticalStore",
             type: "boolean",
@@ -91,7 +91,7 @@ describe("SmartUiComponent", () => {
         {
           id: "database",
           input: {
-            label: "Database",
+            labelTKey: "Database",
             dataFieldName: "database",
             type: "object",
             choices: [
@@ -117,6 +117,9 @@ describe("SmartUiComponent", () => {
         onError={() => {
           return;
         }}
+        getTranslation={(key: string) => {
+          return key;
+        }}
       />
     );
     await new Promise((resolve) => setTimeout(resolve, 0));
@@ -145,6 +148,9 @@ describe("SmartUiComponent", () => {
         onError={() => {
           return;
         }}
+        getTranslation={(key: string) => {
+          return key;
+        }}
       />
     );
     await new Promise((resolve) => setTimeout(resolve, 0));

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

@@ -18,6 +18,7 @@ import {
   NumberUiType,
   SmartUiInput,
 } from "../../../SelfServe/SelfServeTypes";
+import { TFunction } from "i18next";
 
 /**
  * Generic UX renderer
@@ -34,8 +35,8 @@ interface BaseDisplay {
 }
 
 interface BaseInput extends BaseDisplay {
-  label: string;
-  placeholder?: string;
+  labelTKey: string;
+  placeholderTKey?: string;
   errorMessage?: string;
 }
 
@@ -51,8 +52,8 @@ interface NumberInput extends BaseInput {
 }
 
 interface BooleanInput extends BaseInput {
-  trueLabel: string;
-  falseLabel: string;
+  trueLabelTKey: string;
+  falseLabelTKey: string;
   defaultValue?: boolean;
 }
 
@@ -89,6 +90,7 @@ export interface SmartUiComponentProps {
   onInputChange: (input: AnyDisplay, newValue: InputType) => void;
   onError: (hasError: boolean) => void;
   disabled: boolean;
+  getTranslation: TFunction;
 }
 
 interface SmartUiComponentState {
@@ -122,10 +124,10 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
   private renderInfo(info: Info): JSX.Element {
     return (
       <MessageBar styles={{ root: { width: 400 } }}>
-        {info.message}
+        {this.props.getTranslation(info.messageTKey)}
         {info.link && (
           <Link href={info.link.href} target="_blank">
-            {info.link.text}
+            {this.props.getTranslation(info.link.textTKey)}
           </Link>
         )}
       </MessageBar>
@@ -139,10 +141,10 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
       <div className="stringInputContainer">
         <TextField
           id={`${input.dataFieldName}-textField-input`}
-          label={input.label}
+          label={this.props.getTranslation(input.labelTKey)}
           type="text"
           value={value || ""}
-          placeholder={input.placeholder}
+          placeholder={this.props.getTranslation(input.placeholderTKey)}
           disabled={disabled}
           onChange={(_, newValue) => this.props.onInputChange(input, newValue)}
           styles={{
@@ -165,10 +167,10 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     const description = input.description;
     return (
       <Text id={`${input.dataFieldName}-text-display`}>
-        {input.description.text}{" "}
+        {this.props.getTranslation(input.description.textTKey)}{" "}
         {description.link && (
           <Link target="_blank" href={input.description.link.href}>
-            {input.description.link.text}
+            {this.props.getTranslation(input.description.link.textTKey)}
           </Link>
         )}
       </Text>
@@ -219,12 +221,12 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
   };
 
   private renderNumberInput(input: NumberInput): JSX.Element {
-    const { label, min, max, dataFieldName, step } = input;
+    const { labelTKey, min, max, dataFieldName, step } = input;
     const props = {
-      label: label,
+      label: this.props.getTranslation(labelTKey),
       min: min,
       max: max,
-      ariaLabel: label,
+      ariaLabel: labelTKey,
       step: step,
     };
 
@@ -284,10 +286,10 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     return (
       <Toggle
         id={`${input.dataFieldName}-toggle-input`}
-        label={input.label}
+        label={this.props.getTranslation(input.labelTKey)}
         checked={value || false}
-        onText={input.trueLabel}
-        offText={input.falseLabel}
+        onText={this.props.getTranslation(input.trueLabelTKey)}
+        offText={this.props.getTranslation(input.falseLabelTKey)}
         disabled={disabled}
         onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)}
         styles={{ root: { width: 400 } }}
@@ -296,7 +298,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
   }
 
   private renderChoiceInput(input: ChoiceInput): JSX.Element {
-    const { label, defaultKey: defaultKey, dataFieldName, choices, placeholder } = input;
+    const { labelTKey, defaultKey, dataFieldName, choices, placeholderTKey } = input;
     const value = this.props.currentValues.get(dataFieldName)?.value as string;
     const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
     let selectedKey = value ? value : defaultKey;
@@ -306,14 +308,14 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     return (
       <Dropdown
         id={`${input.dataFieldName}-dropdown-input`}
-        label={label}
+        label={this.props.getTranslation(labelTKey)}
         selectedKey={selectedKey}
         onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
-        placeholder={placeholder}
+        placeholder={this.props.getTranslation(placeholderTKey)}
         disabled={disabled}
         options={choices.map((c) => ({
           key: c.key,
-          text: c.label,
+          text: this.props.getTranslation(c.label),
         }))}
         styles={{
           root: { width: 400 },

src/Explorer/Explorer.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import * as ComponentRegisterer from "./ComponentRegisterer";
 import * as Constants from "../Common/Constants";
 import * as DataModels from "../Contracts/DataModels";
@@ -20,7 +21,6 @@ import { readDatabases } from "../Common/dataAccess/readDatabases";
 import EditTableEntityPane from "./Panes/Tables/EditTableEntityPane";
 import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
 import GraphStylingPane from "./Panes/GraphStylingPane";
-import hasher from "hasher";
 import NewVertexPane from "./Panes/NewVertexPane";
 import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
 import Q from "q";
@@ -28,7 +28,7 @@ import ResourceTokenCollection from "./Tree/ResourceTokenCollection";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
 import TerminalTab from "./Tabs/TerminalTab";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
-import { ActionContracts, MessageTypes } from "../Contracts/ExplorerContracts";
+import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { ArcadiaResourceManager } from "../SparkClusterManager/ArcadiaResourceManager";
 import { ArcadiaWorkspaceItem } from "./Controls/Arcadia/ArcadiaMenuPicker";
 import { AuthType } from "../AuthType";
@@ -40,25 +40,21 @@ import { configContext, Platform, updateConfigContext } from "../ConfigContext";
 import { ConsoleData, ConsoleDataType } from "./Menus/NotificationConsole/NotificationConsoleComponent";
 import { decryptJWTToken, getAuthorizationHeader } from "../Utils/AuthorizationUtils";
 import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
-import { DialogComponentAdapter } from "./Controls/DialogReactComponent/DialogComponentAdapter";
-import { DialogProps, TextFieldProps } from "./Controls/DialogReactComponent/DialogComponent";
+import { DialogProps, TextFieldProps } from "./Controls/Dialog";
 import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane";
 import { ExplorerMetrics } from "../Common/Constants";
 import { ExplorerSettings } from "../Shared/ExplorerSettings";
 import { FileSystemUtil } from "./Notebook/FileSystemUtil";
-import { handleOpenAction } from "./OpenActions";
-import { isInvalidParentFrameOrigin } from "../Utils/MessageValidation";
 import { IGalleryItem } from "../Juno/JunoClient";
 import { LoadQueryPane } from "./Panes/LoadQueryPane";
 import * as Logger from "../Common/Logger";
-import { sendMessage, sendCachedDataMessage, handleCachedDataMessage } from "../Common/MessageHandler";
+import { sendMessage, sendCachedDataMessage } from "../Common/MessageHandler";
 import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
 import { NotebookUtil } from "./Notebook/NotebookUtil";
 import { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { QueriesClient } from "../Common/QueriesClient";
 import { QuerySelectPane } from "./Panes/Tables/QuerySelectPane";
-import { RenewAdHocAccessPane } from "./Panes/RenewAdHocAccessPane";
 import { ResourceProviderClientFactory } from "../ResourceProvider/ResourceProviderClientFactory";
 import { ResourceTreeAdapter } from "./Tree/ResourceTreeAdapter";
 import { ResourceTreeAdapterForResourceToken } from "./Tree/ResourceTreeAdapterForResourceToken";
@@ -66,7 +62,7 @@ import { RouteHandler } from "../RouteHandlers/RouteHandler";
 import { SaveQueryPane } from "./Panes/SaveQueryPane";
 import { SettingsPane } from "./Panes/SettingsPane";
 import { SetupNotebooksPane } from "./Panes/SetupNotebooksPane";
-import { SplashScreenComponentAdapter } from "./SplashScreen/SplashScreenComponentApdapter";
+import { SplashScreen } from "./SplashScreen/SplashScreen";
 import { Splitter, SplitterBounds, SplitterDirection } from "../Common/Splitter";
 import { StringInputPane } from "./Panes/StringInputPane";
 import { TableColumnOptionsPane } from "./Panes/Tables/TableColumnOptionsPane";
@@ -91,25 +87,21 @@ import { appInsights } from "../Shared/appInsights";
 import { SelfServeLoadingComponentAdapter } from "../SelfServe/SelfServeLoadingComponentAdapter";
 import { SelfServeType } from "../SelfServe/SelfServeUtils";
 import { SelfServeComponentAdapter } from "../SelfServe/SelfServeComponentAdapter";
+import { GalleryTab } from "./Controls/NotebookGallery/GalleryViewerComponent";
+import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfirmationPanel";
 
 BindingHandlersRegisterer.registerBindingHandlers();
 // Hold a reference to ComponentRegisterer to prevent transpiler to ignore import
 var tmp = ComponentRegisterer;
 
-enum ShareAccessToggleState {
-  ReadWrite,
-  Read,
-}
-
-interface AdHocAccessData {
-  readWriteUrl: string;
-  readUrl: string;
-}
-
 export interface ExplorerParams {
   setIsNotificationConsoleExpanded: (isExpanded: boolean) => void;
   setNotificationConsoleData: (consoleData: ConsoleData) => void;
   setInProgressConsoleDataIdToBeDeleted: (id: string) => void;
+  openSidePanel: (headerText: string, panelContent: JSX.Element) => void;
+  closeSidePanel: () => void;
+  closeDialog: () => void;
+  openDialog: (props: DialogProps) => void;
 }
 
 export default class Explorer {
@@ -157,6 +149,8 @@ export default class Explorer {
 
   // Panes
   public contextPanes: ContextualPaneBase[];
+  public openSidePanel: (headerText: string, panelContent: JSX.Element) => void;
+  public closeSidePanel: () => void;
 
   // Resource Tree
   public databases: ko.ObservableArray<ViewModels.Database>;
@@ -198,7 +192,6 @@ export default class Explorer {
   public cassandraAddCollectionPane: CassandraAddCollectionPane;
   public settingsPane: SettingsPane;
   public executeSprocParamsPane: ExecuteSprocParamsPane;
-  public renewAdHocAccessPane: RenewAdHocAccessPane;
   public uploadItemsPane: UploadItemsPane;
   public uploadItemsPaneAdapter: UploadItemsPaneAdapter;
   public loadQueryPane: LoadQueryPane;
@@ -212,8 +205,6 @@ export default class Explorer {
   public copyNotebookPaneAdapter: ReactAdapter;
 
   // features
-  public isGalleryPublishEnabled: ko.Computed<boolean>;
-  public isLinkInjectionEnabled: ko.Computed<boolean>;
   public isGitHubPaneEnabled: ko.Observable<boolean>;
   public isPublishNotebookPaneEnabled: ko.Observable<boolean>;
   public isCopyNotebookPaneEnabled: ko.Observable<boolean>;
@@ -223,17 +214,6 @@ export default class Explorer {
   public canExceedMaximumValue: ko.Computed<boolean>;
   public isAutoscaleDefaultEnabled: ko.Observable<boolean>;
 
-  public shouldShowShareDialogContents: ko.Observable<boolean>;
-  public shareAccessData: ko.Observable<AdHocAccessData>;
-  public renewExplorerShareAccess: (explorer: Explorer, token: string) => Q.Promise<void>;
-  public renewTokenError: ko.Observable<string>;
-  public tokenForRenewal: ko.Observable<string>;
-  public shareAccessToggleState: ko.Observable<ShareAccessToggleState>;
-  public shareAccessUrl: ko.Observable<string>;
-  public shareUrlCopyHelperText: ko.Observable<string>;
-  public shareTokenCopyHelperText: ko.Observable<string>;
-  public shouldShowDataAccessExpiryDialog: ko.Observable<boolean>;
-  public shouldShowContextSwitchPrompt: ko.Observable<boolean>;
   public isSchemaEnabled: ko.Computed<boolean>;
 
   // Notebooks
@@ -250,12 +230,12 @@ export default class Explorer {
   public isSynapseLinkUpdating: ko.Observable<boolean>;
   public memoryUsageInfo: ko.Observable<DataModels.MemoryUsageInfo>;
   public notebookManager?: any; // This is dynamically loaded
+  public openDialog: ExplorerParams["openDialog"];
+  public closeDialog: ExplorerParams["closeDialog"];
 
   private _panes: ContextualPaneBase[] = [];
-  private _importExplorerConfigComplete: boolean = false;
   private _isSystemDatabasePredicate: (database: ViewModels.Database) => boolean = (database) => false;
   private _isInitializingNotebooks: boolean;
-  private _isInitializingSparkConnectionInfo: boolean;
   private notebookBasePath: ko.Observable<string>;
   private _arcadiaManager: ArcadiaResourceManager;
   private notebookToImport: {
@@ -265,11 +245,6 @@ export default class Explorer {
 
   // React adapters
   private commandBarComponentAdapter: CommandBarComponentAdapter;
-  private splashScreenAdapter: SplashScreenComponentAdapter;
-  private dialogComponentAdapter: DialogComponentAdapter;
-  private _dialogProps: ko.Observable<DialogProps>;
-  private addSynapseLinkDialog: DialogComponentAdapter;
-  private _addSynapseLinkDialogProps: ko.Observable<DialogProps>;
   private selfServeLoadingComponentAdapter: SelfServeLoadingComponentAdapter;
 
   private static readonly MaxNbDatabasesToAutoExpand = 5;
@@ -278,6 +253,10 @@ export default class Explorer {
     this.setIsNotificationConsoleExpanded = params?.setIsNotificationConsoleExpanded;
     this.setNotificationConsoleData = params?.setNotificationConsoleData;
     this.setInProgressConsoleDataIdToBeDeleted = params?.setInProgressConsoleDataIdToBeDeleted;
+    this.openSidePanel = params?.openSidePanel;
+    this.closeSidePanel = params?.closeSidePanel;
+    this.closeDialog = params?.closeDialog;
+    this.openDialog = params?.openDialog;
 
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
@@ -312,7 +291,6 @@ export default class Explorer {
     this.isAccountReady = ko.observable<boolean>(false);
     this.selfServeType = ko.observable<SelfServeType>(undefined);
     this._isInitializingNotebooks = false;
-    this._isInitializingSparkConnectionInfo = false;
     this.arcadiaToken = ko.observable<string>();
     this.arcadiaToken.subscribe((token: string) => {
       if (token) {
@@ -402,33 +380,6 @@ export default class Explorer {
     this.resourceTokenCollection = ko.observable<ViewModels.CollectionBase>();
     this.resourceTokenPartitionKey = ko.observable<string>();
     this.isAuthWithResourceToken = ko.observable<boolean>(false);
-
-    this.shareAccessData = ko.observable<AdHocAccessData>({
-      readWriteUrl: undefined,
-      readUrl: undefined,
-    });
-    this.tokenForRenewal = ko.observable<string>("");
-    this.renewTokenError = ko.observable<string>("");
-    this.shareAccessUrl = ko.observable<string>();
-    this.shareUrlCopyHelperText = ko.observable<string>("Click to copy");
-    this.shareTokenCopyHelperText = ko.observable<string>("Click to copy");
-    this.shareAccessToggleState = ko.observable<ShareAccessToggleState>(ShareAccessToggleState.ReadWrite);
-    this.shareAccessToggleState.subscribe((toggleState: ShareAccessToggleState) => {
-      if (toggleState === ShareAccessToggleState.ReadWrite) {
-        this.shareAccessUrl(this.shareAccessData && this.shareAccessData().readWriteUrl);
-      } else {
-        this.shareAccessUrl(this.shareAccessData && this.shareAccessData().readUrl);
-      }
-    });
-    this.shouldShowShareDialogContents = ko.observable<boolean>(false);
-    this.shouldShowDataAccessExpiryDialog = ko.observable<boolean>(false);
-    this.shouldShowContextSwitchPrompt = ko.observable<boolean>(false);
-    this.isGalleryPublishEnabled = ko.computed<boolean>(() =>
-      this.isFeatureEnabled(Constants.Features.enableGalleryPublish)
-    );
-    this.isLinkInjectionEnabled = ko.computed<boolean>(() =>
-      this.isFeatureEnabled(Constants.Features.enableLinkInjection)
-    );
     this.isGitHubPaneEnabled = ko.observable<boolean>(false);
     this.isMongoIndexingEnabled = ko.observable<boolean>(false);
     this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
@@ -707,13 +658,6 @@ export default class Explorer {
       container: this,
     });
 
-    this.renewAdHocAccessPane = new RenewAdHocAccessPane({
-      id: "renewadhocaccesspane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
     this.uploadItemsPane = new UploadItemsPane({
       id: "uploaditemspane",
       visible: ko.observable<boolean>(false),
@@ -782,7 +726,6 @@ export default class Explorer {
       this.cassandraAddCollectionPane,
       this.settingsPane,
       this.executeSprocParamsPane,
-      this.renewAdHocAccessPane,
       this.uploadItemsPane,
       this.loadQueryPane,
       this.saveQueryPane,
@@ -917,7 +860,6 @@ export default class Explorer {
         this.notebookManager = new notebookManagerModule.default();
         this.notebookManager.initialize({
           container: this,
-          dialogProps: this._dialogProps,
           notebookBasePath: this.notebookBasePath,
           resourceTree: this.resourceTree,
           refreshCommandBarButtons: () => this.refreshCommandBarButtons(),
@@ -985,33 +927,7 @@ export default class Explorer {
       featureSubcription.dispose();
     });
 
-    this._dialogProps = ko.observable<DialogProps>({
-      isModal: false,
-      visible: false,
-      title: undefined,
-      subText: undefined,
-      primaryButtonText: undefined,
-      secondaryButtonText: undefined,
-      onPrimaryButtonClick: undefined,
-      onSecondaryButtonClick: undefined,
-    });
-    this.dialogComponentAdapter = new DialogComponentAdapter();
-    this.dialogComponentAdapter.parameters = this._dialogProps;
-    this.splashScreenAdapter = new SplashScreenComponentAdapter(this);
     this.mostRecentActivity = new MostRecentActivity.MostRecentActivity(this);
-
-    this._addSynapseLinkDialogProps = ko.observable<DialogProps>({
-      isModal: false,
-      visible: false,
-      title: undefined,
-      subText: undefined,
-      primaryButtonText: undefined,
-      secondaryButtonText: undefined,
-      onPrimaryButtonClick: undefined,
-      onSecondaryButtonClick: undefined,
-    });
-    this.addSynapseLinkDialog = new DialogComponentAdapter();
-    this.addSynapseLinkDialog.parameters = this._addSynapseLinkDialogProps;
   }
 
   public openEnableSynapseLinkDialog(): void {
@@ -1073,257 +989,12 @@ export default class Explorer {
         TelemetryProcessor.traceCancel(Action.EnableAzureSynapseLink);
       },
     };
-    this._addSynapseLinkDialogProps(addSynapseLinkDialogProps);
+    this.openDialog(addSynapseLinkDialogProps);
     TelemetryProcessor.traceStart(Action.EnableAzureSynapseLink);
 
     // TODO: return result
   }
 
-  public copyUrlLink(src: any, event: MouseEvent): void {
-    const urlLinkInput: HTMLInputElement = document.getElementById("shareUrlLink") as HTMLInputElement;
-    urlLinkInput && urlLinkInput.select();
-    document.execCommand("copy");
-    this.shareUrlCopyHelperText("Copied");
-    setTimeout(() => this.shareUrlCopyHelperText("Click to copy"), Constants.ClientDefaults.copyHelperTimeoutMs);
-
-    TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {
-      description: "Copy full screen URL",
-      databaseAccountName: this.databaseAccount() && this.databaseAccount().name,
-      defaultExperience: this.defaultExperience && this.defaultExperience(),
-      dataExplorerArea: Constants.Areas.ShareDialog,
-    });
-  }
-
-  public onCopyUrlLinkKeyPress(src: any, event: KeyboardEvent): boolean {
-    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
-      this.copyUrlLink(src, null);
-      return false;
-    }
-
-    return true;
-  }
-
-  public copyToken(src: any, event: MouseEvent): void {
-    const tokenInput: HTMLInputElement = document.getElementById("shareToken") as HTMLInputElement;
-    tokenInput && tokenInput.select();
-    document.execCommand("copy");
-    this.shareTokenCopyHelperText("Copied");
-    setTimeout(() => this.shareTokenCopyHelperText("Click to copy"), Constants.ClientDefaults.copyHelperTimeoutMs);
-  }
-
-  public onCopyTokenKeyPress(src: any, event: KeyboardEvent): boolean {
-    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
-      this.copyToken(src, null);
-      return false;
-    }
-
-    return true;
-  }
-
-  public renewToken = (): void => {
-    TelemetryProcessor.trace(Action.ConnectEncryptionToken);
-    this.renewTokenError("");
-    const id: string = NotificationConsoleUtils.logConsoleMessage(
-      ConsoleDataType.InProgress,
-      "Initiating connection to account"
-    );
-    this.renewExplorerShareAccess(this, this.tokenForRenewal())
-      .fail((error: any) => {
-        const stringifiedError: string = getErrorMessage(error);
-        this.renewTokenError("Invalid connection string specified");
-        NotificationConsoleUtils.logConsoleMessage(
-          ConsoleDataType.Error,
-          `Failed to initiate connection to account: ${stringifiedError}`
-        );
-      })
-      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
-  };
-
-  public generateSharedAccessData(): void {
-    const id: string = NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.InProgress, "Generating share url");
-    AuthHeadersUtil.generateEncryptedToken().then(
-      (tokenResponse: DataModels.GenerateTokenResponse) => {
-        NotificationConsoleUtils.clearInProgressMessageWithId(id);
-        NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Info, "Successfully generated share url");
-        this.shareAccessData({
-          readWriteUrl: this._getShareAccessUrlForToken(tokenResponse.readWrite),
-          readUrl: this._getShareAccessUrlForToken(tokenResponse.read),
-        });
-        !this.shareAccessData().readWriteUrl && this.shareAccessToggleState(ShareAccessToggleState.Read); // select read toggle by default for readers
-        this.shareAccessToggleState.valueHasMutated(); // to set initial url and token state
-        this.shareAccessData.valueHasMutated();
-        this._openShareDialog();
-      },
-      (error: any) => {
-        NotificationConsoleUtils.clearInProgressMessageWithId(id);
-        NotificationConsoleUtils.logConsoleMessage(
-          ConsoleDataType.Error,
-          `Failed to generate share url: ${getErrorMessage(error)}`
-        );
-        console.error(error);
-      }
-    );
-  }
-
-  public renewShareAccess(token: string): Q.Promise<void> {
-    if (!this.renewExplorerShareAccess) {
-      return Q.reject("Not implemented");
-    }
-
-    const deferred: Q.Deferred<void> = Q.defer<void>();
-    const id: string = NotificationConsoleUtils.logConsoleMessage(
-      ConsoleDataType.InProgress,
-      "Initiating connection to account"
-    );
-    this.renewExplorerShareAccess(this, token)
-      .then(
-        () => {
-          NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Info, "Connection successful");
-          this.renewAdHocAccessPane && this.renewAdHocAccessPane.close();
-          deferred.resolve();
-        },
-        (error: any) => {
-          NotificationConsoleUtils.logConsoleMessage(
-            ConsoleDataType.Error,
-            `Failed to connect: ${getErrorMessage(error)}`
-          );
-          deferred.reject(error);
-        }
-      )
-      .finally(() => {
-        NotificationConsoleUtils.clearInProgressMessageWithId(id);
-      });
-
-    return deferred.promise;
-  }
-
-  public displayGuestAccessTokenRenewalPrompt(): void {
-    if (!$("#dataAccessTokenModal").dialog("instance")) {
-      const connectButton = {
-        text: "Connect",
-        class: "connectDialogButtons connectButton connectOkBtns",
-        click: () => {
-          this.renewAdHocAccessPane.open();
-          $("#dataAccessTokenModal").dialog("close");
-        },
-      };
-      const cancelButton = {
-        text: "Cancel",
-        class: "connectDialogButtons cancelBtn",
-        click: () => {
-          $("#dataAccessTokenModal").dialog("close");
-        },
-      };
-
-      $("#dataAccessTokenModal").dialog({
-        autoOpen: false,
-        buttons: [connectButton, cancelButton],
-        closeOnEscape: false,
-        draggable: false,
-        dialogClass: "no-close",
-        height: 180,
-        modal: true,
-        position: { my: "center center", at: "center center", of: window },
-        resizable: false,
-        title: "Temporary access expired",
-        width: 435,
-        close: (event: Event, ui: JQueryUI.DialogUIParams) => this.shouldShowDataAccessExpiryDialog(false),
-      });
-      $("#dataAccessTokenModal").dialog("option", "classes", {
-        "ui-dialog-titlebar": "connectTitlebar",
-      });
-    }
-    this.shouldShowDataAccessExpiryDialog(true);
-    $("#dataAccessTokenModal").dialog("open");
-  }
-
-  public isConnectExplorerVisible(): boolean {
-    return $("#connectExplorer").is(":visible") || false;
-  }
-
-  public displayContextSwitchPromptForConnectionString(connectionString: string): void {
-    const yesButton = {
-      text: "OK",
-      class: "connectDialogButtons okBtn connectOkBtns",
-      click: () => {
-        $("#contextSwitchPrompt").dialog("close");
-        this.tabsManager.closeTabs(); // clear all tabs so we dont leave any tabs from previous session open
-        this.renewShareAccess(connectionString);
-      },
-    };
-    const noButton = {
-      text: "Cancel",
-      class: "connectDialogButtons cancelBtn",
-      click: () => {
-        $("#contextSwitchPrompt").dialog("close");
-      },
-    };
-
-    if (!$("#contextSwitchPrompt").dialog("instance")) {
-      $("#contextSwitchPrompt").dialog({
-        autoOpen: false,
-        buttons: [yesButton, noButton],
-        closeOnEscape: false,
-        draggable: false,
-        dialogClass: "no-close",
-        height: 255,
-        modal: true,
-        position: { my: "center center", at: "center center", of: window },
-        resizable: false,
-        title: "Switch account",
-        width: 440,
-        close: (event: Event, ui: JQueryUI.DialogUIParams) => this.shouldShowDataAccessExpiryDialog(false),
-      });
-      $("#contextSwitchPrompt").dialog("option", "classes", {
-        "ui-dialog-titlebar": "connectTitlebar",
-      });
-      $("#contextSwitchPrompt").dialog("option", "open", (event: Event, ui: JQueryUI.DialogUIParams) => {
-        $(".ui-dialog ").css("z-index", 1001);
-        $("#contextSwitchPrompt").parent().siblings(".ui-widget-overlay").css("z-index", 1000);
-      });
-    }
-    $("#contextSwitchPrompt").dialog("option", "buttons", [yesButton, noButton]); // rebind buttons so callbacks accept current connection string
-    this.shouldShowContextSwitchPrompt(true);
-    $("#contextSwitchPrompt").dialog("open");
-  }
-
-  public displayConnectExplorerForm(): void {
-    $("#divExplorer").hide();
-    $("#connectExplorer").css("display", "flex");
-  }
-
-  public hideConnectExplorerForm(): void {
-    $("#connectExplorer").hide();
-    $("#divExplorer").show();
-  }
-
-  public isReadWriteToggled: () => boolean = (): boolean => {
-    return this.shareAccessToggleState() === ShareAccessToggleState.ReadWrite;
-  };
-
-  public isReadToggled: () => boolean = (): boolean => {
-    return this.shareAccessToggleState() === ShareAccessToggleState.Read;
-  };
-
-  public toggleReadWrite: (src: any, event: MouseEvent) => void = (src: any, event: MouseEvent) => {
-    this.shareAccessToggleState(ShareAccessToggleState.ReadWrite);
-  };
-
-  public toggleRead: (src: any, event: MouseEvent) => void = (src: any, event: MouseEvent) => {
-    this.shareAccessToggleState(ShareAccessToggleState.Read);
-  };
-
-  public onToggleKeyDown: (src: any, event: KeyboardEvent) => boolean = (src: any, event: KeyboardEvent) => {
-    if (event.keyCode === Constants.KeyCodes.LeftArrow) {
-      this.toggleReadWrite(src, null);
-      return false;
-    } else if (event.keyCode === Constants.KeyCodes.RightArrow) {
-      this.toggleRead(src, null);
-      return false;
-    }
-    return true;
-  };
-
   public isDatabaseNodeOrNoneSelected(): boolean {
     return this.isNoneSelected() || this.isDatabaseNodeSelected();
   }
@@ -1637,6 +1308,7 @@ export default class Explorer {
       );
       return;
     }
+
     const resetConfirmationDialogProps: DialogProps = {
       isModal: true,
       visible: true,
@@ -1647,7 +1319,7 @@ export default class Explorer {
       onPrimaryButtonClick: this._resetNotebookWorkspace,
       onSecondaryButtonClick: this._closeModalDialog,
     };
-    this._dialogProps(resetConfirmationDialogProps);
+    this.openDialog(resetConfirmationDialogProps);
   }
 
   private async _containsDefaultNotebookWorkspace(databaseAccount: DataModels.DatabaseAccount): Promise<boolean> {
@@ -1711,69 +1383,13 @@ export default class Explorer {
   };
 
   private _closeModalDialog = () => {
-    this._dialogProps().visible = false;
-    this._dialogProps.valueHasMutated();
+    this.closeDialog();
   };
 
   private _closeSynapseLinkModalDialog = () => {
-    this._addSynapseLinkDialogProps().visible = false;
-    this._addSynapseLinkDialogProps.valueHasMutated();
+    this.closeDialog();
   };
 
-  public handleMessage(message: any) {
-    const openAction: ActionContracts.DataExplorerAction = message.openAction;
-    if (!!openAction) {
-      if (this.isRefreshingExplorer()) {
-        const subscription = this.databases.subscribe((databases: ViewModels.Database[]) => {
-          handleOpenAction(openAction, this.nonSystemDatabases(), this);
-          subscription.dispose();
-        });
-      } else {
-        handleOpenAction(openAction, this.nonSystemDatabases(), this);
-      }
-    }
-    if (message.actionType === ActionContracts.ActionType.TransmitCachedData) {
-      handleCachedDataMessage(message);
-      return;
-    }
-    if (message.type) {
-      switch (message.type) {
-        case MessageTypes.UpdateLocationHash:
-          if (!message.locationHash) {
-            break;
-          }
-          hasher.replaceHash(message.locationHash);
-          RouteHandler.getInstance().parseHash(message.locationHash);
-          break;
-        case MessageTypes.SendNotification:
-          if (!message.message) {
-            break;
-          }
-          NotificationConsoleUtils.logConsoleMessage(
-            message.consoleDataType || ConsoleDataType.Info,
-            message.message,
-            message.id
-          );
-          break;
-        case MessageTypes.ClearNotification:
-          if (!message.id) {
-            break;
-          }
-          NotificationConsoleUtils.clearInProgressMessageWithId(message.id);
-          break;
-        case MessageTypes.LoadingStatus:
-          if (!message.text) {
-            break;
-          }
-          this._setLoadingStatusText(message.text, message.title);
-          break;
-      }
-      return;
-    }
-
-    this.splashScreenAdapter.forceRender();
-  }
-
   public findSelectedDatabase(): ViewModels.Database {
     if (!this.selectedNode()) {
       return null;
@@ -1840,19 +1456,20 @@ export default class Explorer {
         this.collectionCreationDefaults = inputs.defaultCollectionThroughput;
       }
       this.features(inputs.features);
-      this.serverId(inputs.serverId);
+      this.serverId(inputs.serverId ?? Constants.ServerIds.productionPortal);
       this.databaseAccount(databaseAccount);
-      this.subscriptionType(inputs.subscriptionType);
-      this.hasWriteAccess(inputs.hasWriteAccess);
-      this.flight(inputs.addCollectionDefaultFlight);
-      this.isTryCosmosDBSubscription(inputs.isTryCosmosDBSubscription);
-      this.isAuthWithResourceToken(inputs.isAuthWithresourceToken);
+      this.subscriptionType(inputs.subscriptionType ?? SharedConstants.CollectionCreation.DefaultSubscriptionType);
+      this.hasWriteAccess(inputs.hasWriteAccess ?? true);
+      if (inputs.addCollectionDefaultFlight) {
+        this.flight(inputs.addCollectionDefaultFlight);
+      }
+      this.isTryCosmosDBSubscription(inputs.isTryCosmosDBSubscription ?? false);
+      this.isAuthWithResourceToken(inputs.isAuthWithresourceToken ?? false);
       this.setFeatureFlagsFromFlights(inputs.flights);
       this.setSelfServeType(inputs);
-      this._importExplorerConfigComplete = true;
 
       updateConfigContext({
-        BACKEND_ENDPOINT: inputs.extensionEndpoint || "",
+        BACKEND_ENDPOINT: inputs.extensionEndpoint || configContext.BACKEND_ENDPOINT,
         ARM_ENDPOINT: normalizeArmEndpoint(inputs.csmEndpoint || configContext.ARM_ENDPOINT),
       });
 
@@ -2041,83 +1658,6 @@ export default class Explorer {
     return deferred.promise;
   }
 
-  // TODO: Abstract this elsewhere
-  private _openShareDialog: () => void = (): void => {
-    if (!$("#shareDataAccessFlyout").dialog("instance")) {
-      const accountMetadataInfo = {
-        databaseAccountName: this.databaseAccount() && this.databaseAccount().name,
-        defaultExperience: this.defaultExperience && this.defaultExperience(),
-        dataExplorerArea: Constants.Areas.ShareDialog,
-      };
-      const openFullscreenButton = {
-        text: "Open",
-        class: "openFullScreenBtn openFullScreenCancelBtn",
-        click: () => {
-          TelemetryProcessor.trace(
-            Action.SelectItem,
-            ActionModifiers.Mark,
-            _.extend({}, { description: "Open full screen" }, accountMetadataInfo)
-          );
-
-          const hiddenAnchorElement: HTMLAnchorElement = document.createElement("a");
-          hiddenAnchorElement.href = this.shareAccessUrl();
-          hiddenAnchorElement.target = "_blank";
-          $("#shareDataAccessFlyout").dialog("close");
-          hiddenAnchorElement.click();
-        },
-      };
-      const cancelButton = {
-        text: "Cancel",
-        class: "shareCancelButton openFullScreenCancelBtn",
-        click: () => {
-          TelemetryProcessor.trace(
-            Action.SelectItem,
-            ActionModifiers.Mark,
-            _.extend({}, { description: "Cancel open full screen" }, accountMetadataInfo)
-          );
-          $("#shareDataAccessFlyout").dialog("close");
-        },
-      };
-      $("#shareDataAccessFlyout").dialog({
-        autoOpen: false,
-        buttons: [openFullscreenButton, cancelButton],
-        closeOnEscape: true,
-        draggable: false,
-        dialogClass: "no-close",
-        position: { my: "right top", at: "right bottom", of: $(".OpenFullScreen") },
-        resizable: false,
-        title: "Open Full Screen",
-        width: 400,
-        close: (event: Event, ui: JQueryUI.DialogUIParams) => this.shouldShowShareDialogContents(false),
-      });
-      $("#shareDataAccessFlyout").dialog("option", "classes", {
-        "ui-widget-content": "shareUrlDialog",
-        "ui-widget-header": "shareUrlTitle",
-        "ui-dialog-titlebar-close": "shareClose",
-        "ui-button": "shareCloseIcon",
-        "ui-button-icon": "cancelIcon",
-        "ui-icon": "",
-      });
-      $("#shareDataAccessFlyout").dialog("option", "open", (event: Event, ui: JQueryUI.DialogUIParams) =>
-        $(".openFullScreenBtn").focus()
-      );
-    }
-    $("#shareDataAccessFlyout").dialog("close");
-    this.shouldShowShareDialogContents(true);
-    $("#shareDataAccessFlyout").dialog("open");
-  };
-
-  private _getShareAccessUrlForToken(token: string): string {
-    if (!token) {
-      return undefined;
-    }
-
-    const urlPrefixWithKeyParam: string = `${configContext.hostedExplorerURL}?key=`;
-    const currentActiveTab = this.tabsManager.activeTab();
-
-    return `${urlPrefixWithKeyParam}${token}#/${(currentActiveTab && currentActiveTab.hashLocation()) || ""}`;
-  }
-
   private _initSettings() {
     if (!ExplorerSettings.hasSettingsDefined()) {
       ExplorerSettings.createDefaultSettings();
@@ -2249,14 +1789,9 @@ export default class Explorer {
     return Promise.resolve(false);
   }
 
-  public async publishNotebook(name: string, content: string | unknown, parentDomElement: HTMLElement): Promise<void> {
+  public async publishNotebook(name: string, content: string | unknown, parentDomElement?: HTMLElement): Promise<void> {
     if (this.notebookManager) {
-      await this.notebookManager.openPublishNotebookPane(
-        name,
-        content,
-        parentDomElement,
-        this.isLinkInjectionEnabled()
-      );
+      await this.notebookManager.openPublishNotebookPane(name, content, parentDomElement);
       this.publishNotebookPaneAdapter = this.notebookManager.publishNotebookPaneAdapter;
       this.isPublishNotebookPaneEnabled(true);
     }
@@ -2271,7 +1806,7 @@ export default class Explorer {
   }
 
   public showOkModalDialog(title: string, msg: string): void {
-    this._dialogProps({
+    this.openDialog({
       isModal: true,
       visible: true,
       title,
@@ -2294,7 +1829,7 @@ export default class Explorer {
     textFieldProps?: TextFieldProps,
     isPrimaryButtonDisabled?: boolean
   ): void {
-    this._dialogProps({
+    this.openDialog({
       isModal: true,
       visible: true,
       title,
@@ -2346,11 +1881,13 @@ export default class Explorer {
       this.tabsManager.activateTab(notebookTab);
     } else {
       const options: NotebookTabOptions = {
+        account: userContext.databaseAccount,
         tabKind: ViewModels.CollectionTabKind.NotebookV2,
         node: null,
         title: notebookContentItem.name,
         tabPath: notebookContentItem.path,
         collection: null,
+        masterKey: userContext.masterKey || "",
         hashLocation: "notebooks",
         isActive: ko.observable(false),
         isTabsContentExpanded: ko.observable(true),
@@ -2495,7 +2032,7 @@ export default class Explorer {
   }
 
   private async _refreshNotebooksEnabledStateForAccount(): Promise<void> {
-    const authType = window.authType as AuthType;
+    const authType = userContext.authType;
     if (
       authType === AuthType.EncryptedToken ||
       authType === AuthType.ResourceToken ||
@@ -2544,7 +2081,7 @@ export default class Explorer {
   public _refreshSparkEnabledStateForAccount = async (): Promise<void> => {
     const subscriptionId = userContext.subscriptionId;
     const armEndpoint = configContext.ARM_ENDPOINT;
-    const authType = window.authType as AuthType;
+    const authType = userContext.authType;
     if (!subscriptionId || !armEndpoint || authType === AuthType.EncryptedToken) {
       // explorer is not aware of the database account yet
       this.isSparkEnabledForAccount(false);
@@ -2573,7 +2110,7 @@ export default class Explorer {
   public _isAfecFeatureRegistered = async (featureName: string): Promise<boolean> => {
     const subscriptionId = userContext.subscriptionId;
     const armEndpoint = configContext.ARM_ENDPOINT;
-    const authType = window.authType as AuthType;
+    const authType = userContext.authType;
     if (!featureName || !subscriptionId || !armEndpoint || authType === AuthType.EncryptedToken) {
       // explorer is not aware of the database account yet
       return false;
@@ -2626,7 +2163,7 @@ export default class Explorer {
     }
 
     if (item.type === NotebookContentItemType.Directory && item.children && item.children.length > 0) {
-      this._dialogProps({
+      this.openDialog({
         isModal: true,
         visible: true,
         title: "Unable to delete file",
@@ -2808,10 +2345,36 @@ export default class Explorer {
     }
   }
 
-  public async openGallery(notebookUrl?: string, galleryItem?: IGalleryItem, isFavorite?: boolean) {
+  public async openGallery(
+    selectedTab?: GalleryTab,
+    notebookUrl?: string,
+    galleryItem?: IGalleryItem,
+    isFavorite?: boolean
+  ) {
     let title: string = "Gallery";
     let hashLocation: string = "gallery";
 
+    const galleryTabOptions: any = {
+      // GalleryTabOptions
+      account: userContext.databaseAccount,
+      container: this,
+      junoClient: this.notebookManager?.junoClient,
+      selectedTab: selectedTab || GalleryTab.OfficialSamples,
+      notebookUrl,
+      galleryItem,
+      isFavorite,
+      // TabOptions
+      tabKind: ViewModels.CollectionTabKind.Gallery,
+      title: title,
+      tabPath: title,
+      documentClientUtility: null,
+      isActive: ko.observable(false),
+      hashLocation: hashLocation,
+      onUpdateTabsButtons: this.onUpdateTabsButtons,
+      isTabsContentExpanded: ko.observable(true),
+      onLoadStartKey: null,
+    };
+
     const galleryTabs = this.tabsManager.getTabs(
       ViewModels.CollectionTabKind.Gallery,
       (tab) => tab.hashLocation() == hashLocation
@@ -2820,31 +2383,12 @@ export default class Explorer {
 
     if (galleryTab) {
       this.tabsManager.activateTab(galleryTab);
+      (galleryTab as any).reset(galleryTabOptions);
     } else {
       if (!this.galleryTab) {
         this.galleryTab = await import(/* webpackChunkName: "GalleryTab" */ "./Tabs/GalleryTab");
       }
-
-      const newTab = new this.galleryTab.default({
-        // GalleryTabOptions
-        account: userContext.databaseAccount,
-        container: this,
-        junoClient: this.notebookManager?.junoClient,
-        notebookUrl,
-        galleryItem,
-        isFavorite,
-        // TabOptions
-        tabKind: ViewModels.CollectionTabKind.Gallery,
-        title: title,
-        tabPath: title,
-        documentClientUtility: null,
-        isActive: ko.observable(false),
-        hashLocation: hashLocation,
-        onUpdateTabsButtons: this.onUpdateTabsButtons,
-        isTabsContentExpanded: ko.observable(true),
-        onLoadStartKey: null,
-      });
-
+      const newTab = new this.galleryTab.default(galleryTabOptions);
       this.tabsManager.activateNewTab(newTab);
     }
   }
@@ -3026,4 +2570,17 @@ export default class Explorer {
       return false;
     });
   }
+
+  public openDeleteCollectionConfirmationPane(): void {
+    this.isFeatureEnabled(Constants.Features.enableKOPanel)
+      ? this.deleteCollectionConfirmationPane.open()
+      : this.openSidePanel(
+          "Delete Collection",
+          <DeleteCollectionConfirmationPanel
+            explorer={this}
+            closePanel={() => this.closeSidePanel()}
+            openNotificationConsole={() => this.expandConsole()}
+          />
+        );
+  }
 }

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -7,7 +7,7 @@ import * as ko from "knockout";
 import * as React from "react";
 import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import { CommandBarComponentButtonFactory } from "./CommandBarComponentButtonFactory";
+import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
 import { CommandBar, ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
 import { StyleConstants } from "../../../Common/Constants";
 import * as CommandBarUtil from "./CommandBarUtil";

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

@@ -1,5 +1,5 @@
 import * as ko from "knockout";
-import { CommandBarComponentButtonFactory } from "./CommandBarComponentButtonFactory";
+import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
 import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
 import NotebookManager from "../../Notebook/NotebookManager";
 import Explorer from "../../Explorer";
@@ -19,7 +19,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
       mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
-      mockExplorer.isGalleryPublishEnabled = ko.computed<boolean>(() => false);
 
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
       mockExplorer.isNotebookEnabled = ko.observable(false);
@@ -61,7 +60,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
       mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
-      mockExplorer.isGalleryPublishEnabled = ko.computed<boolean>(() => false);
 
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
       mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
@@ -125,7 +123,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
       mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
-      mockExplorer.isGalleryPublishEnabled = ko.computed<boolean>(() => false);
 
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
       mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
@@ -207,7 +204,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
       mockExplorer.isSparkEnabled = ko.observable(true);
-      mockExplorer.isGalleryPublishEnabled = ko.computed<boolean>(() => false);
 
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
       mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
@@ -295,7 +291,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
       mockExplorer.isRunningOnNationalCloud = ko.observable(false);
-      mockExplorer.isGalleryPublishEnabled = ko.computed<boolean>(() => false);
       mockExplorer.notebookManager = new NotebookManager();
       mockExplorer.notebookManager.gitHubOAuthService = new GitHubOAuthService(undefined);
       mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts

@@ -1,587 +0,0 @@
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import { Areas } from "../../../Common/Constants";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-
-import AddDatabaseIcon from "../../../../images/AddDatabase.svg";
-import AddCollectionIcon from "../../../../images/AddCollection.svg";
-import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.svg";
-import BrowseQueriesIcon from "../../../../images/BrowseQuery.svg";
-import * as Constants from "../../../Common/Constants";
-import OpenInTabIcon from "../../../../images/open-in-tab.svg";
-import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
-import CosmosTerminalIcon from "../../../../images/Cosmos-Terminal.svg";
-import HostedTerminalIcon from "../../../../images/Hosted-Terminal.svg";
-import AddStoredProcedureIcon from "../../../../images/AddStoredProcedure.svg";
-import SettingsIcon from "../../../../images/settings_15x15.svg";
-import AddUdfIcon from "../../../../images/AddUdf.svg";
-import AddTriggerIcon from "../../../../images/AddTrigger.svg";
-import ScaleIcon from "../../../../images/Scale_15x15.svg";
-import FeedbackIcon from "../../../../images/Feedback-Command.svg";
-import EnableNotebooksIcon from "../../../../images/notebook/Notebook-enable.svg";
-import NewNotebookIcon from "../../../../images/notebook/Notebook-new.svg";
-import ResetWorkspaceIcon from "../../../../images/notebook/Notebook-reset-workspace.svg";
-import GitHubIcon from "../../../../images/github.svg";
-import SynapseIcon from "../../../../images/synapse-link.svg";
-import { configContext, Platform } from "../../../ConfigContext";
-import Explorer from "../../Explorer";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-
-export class CommandBarComponentButtonFactory {
-  private static counter: number = 0;
-
-  public static createStaticCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
-    if (container.isAuthWithResourceToken()) {
-      return CommandBarComponentButtonFactory.createStaticCommandBarButtonsForResourceToken(container);
-    }
-
-    const newCollectionBtn = CommandBarComponentButtonFactory.createNewCollectionGroup(container);
-    const buttons: CommandButtonComponentProps[] = [newCollectionBtn];
-
-    const addSynapseLink = CommandBarComponentButtonFactory.createOpenSynapseLinkDialogButton(container);
-    if (addSynapseLink) {
-      buttons.push(CommandBarComponentButtonFactory.createDivider());
-      buttons.push(addSynapseLink);
-    }
-
-    if (!container.isPreferredApiTable()) {
-      newCollectionBtn.children = [CommandBarComponentButtonFactory.createNewCollectionGroup(container)];
-      const newDatabaseBtn = CommandBarComponentButtonFactory.createNewDatabase(container);
-      newCollectionBtn.children.push(newDatabaseBtn);
-    }
-
-    buttons.push(CommandBarComponentButtonFactory.createDivider());
-
-    if (container.isNotebookEnabled()) {
-      const newNotebookButton = CommandBarComponentButtonFactory.createNewNotebookButton(container);
-      newNotebookButton.children = [
-        CommandBarComponentButtonFactory.createNewNotebookButton(container),
-        CommandBarComponentButtonFactory.createuploadNotebookButton(container),
-      ];
-      buttons.push(newNotebookButton);
-
-      if (container.notebookManager?.gitHubOAuthService) {
-        buttons.push(CommandBarComponentButtonFactory.createManageGitHubAccountButton(container));
-      }
-    }
-
-    if (!container.isRunningOnNationalCloud()) {
-      if (!container.isNotebookEnabled()) {
-        buttons.push(CommandBarComponentButtonFactory.createEnableNotebooksButton(container));
-      }
-
-      if (container.isPreferredApiMongoDB()) {
-        buttons.push(CommandBarComponentButtonFactory.createOpenMongoTerminalButton(container));
-      }
-
-      if (container.isPreferredApiCassandra()) {
-        buttons.push(CommandBarComponentButtonFactory.createOpenCassandraTerminalButton(container));
-      }
-    }
-
-    if (container.isNotebookEnabled()) {
-      buttons.push(CommandBarComponentButtonFactory.createOpenTerminalButton(container));
-
-      buttons.push(CommandBarComponentButtonFactory.createNotebookWorkspaceResetButton(container));
-    }
-
-    if (!container.isDatabaseNodeOrNoneSelected()) {
-      if (container.isNotebookEnabled()) {
-        buttons.push(CommandBarComponentButtonFactory.createDivider());
-      }
-
-      const isSqlQuerySupported = container.isPreferredApiDocumentDB() || container.isPreferredApiGraph();
-      if (isSqlQuerySupported) {
-        const newSqlQueryBtn = CommandBarComponentButtonFactory.createNewSQLQueryButton(container);
-        buttons.push(newSqlQueryBtn);
-      }
-
-      const isSupportedOpenQueryApi =
-        container.isPreferredApiDocumentDB() || container.isPreferredApiMongoDB() || container.isPreferredApiGraph();
-      const isSupportedOpenQueryFromDiskApi = container.isPreferredApiDocumentDB() || container.isPreferredApiGraph();
-      if (isSupportedOpenQueryApi && container.selectedNode() && container.findSelectedCollection()) {
-        const openQueryBtn = CommandBarComponentButtonFactory.createOpenQueryButton(container);
-        openQueryBtn.children = [
-          CommandBarComponentButtonFactory.createOpenQueryButton(container),
-          CommandBarComponentButtonFactory.createOpenQueryFromDiskButton(container),
-        ];
-        buttons.push(openQueryBtn);
-      } else if (isSupportedOpenQueryFromDiskApi && container.selectedNode() && container.findSelectedCollection()) {
-        buttons.push(CommandBarComponentButtonFactory.createOpenQueryFromDiskButton(container));
-      }
-
-      if (CommandBarComponentButtonFactory.areScriptsSupported(container)) {
-        const label = "New Stored Procedure";
-        const newStoredProcedureBtn: CommandButtonComponentProps = {
-          iconSrc: AddStoredProcedureIcon,
-          iconAlt: label,
-          onCommandClick: () => {
-            const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-            selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection, null);
-          },
-          commandButtonLabel: label,
-          ariaLabel: label,
-          hasPopup: true,
-          disabled: container.isDatabaseNodeOrNoneSelected(),
-        };
-
-        newStoredProcedureBtn.children = CommandBarComponentButtonFactory.createScriptCommandButtons(container);
-        buttons.push(newStoredProcedureBtn);
-      }
-    }
-
-    return buttons;
-  }
-
-  public static createContextCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
-    const buttons: CommandButtonComponentProps[] = [];
-
-    if (!container.isDatabaseNodeOrNoneSelected() && container.isPreferredApiMongoDB()) {
-      const label = "New Shell";
-      const newMongoShellBtn: CommandButtonComponentProps = {
-        iconSrc: HostedTerminalIcon,
-        iconAlt: label,
-        onCommandClick: () => {
-          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-          selectedCollection && (<any>selectedCollection).onNewMongoShellClick();
-        },
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: true,
-        disabled: container.isDatabaseNodeOrNoneSelected() && container.isPreferredApiMongoDB(),
-      };
-      buttons.push(newMongoShellBtn);
-    }
-
-    return buttons;
-  }
-
-  public static createControlCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
-    const buttons: CommandButtonComponentProps[] = [];
-    if (configContext.platform === Platform.Hosted) {
-      return buttons;
-    }
-
-    if (!container.isPreferredApiCassandra()) {
-      const label = "Settings";
-      const settingsPaneButton: CommandButtonComponentProps = {
-        iconSrc: SettingsIcon,
-        iconAlt: label,
-        onCommandClick: () => container.settingsPane.open(),
-        commandButtonLabel: null,
-        ariaLabel: label,
-        tooltipText: label,
-        hasPopup: true,
-        disabled: false,
-      };
-      buttons.push(settingsPaneButton);
-    }
-
-    if (container.isHostedDataExplorerEnabled()) {
-      const label = "Open Full Screen";
-      const fullScreenButton: CommandButtonComponentProps = {
-        iconSrc: OpenInTabIcon,
-        iconAlt: label,
-        onCommandClick: () => container.generateSharedAccessData(),
-        commandButtonLabel: null,
-        ariaLabel: label,
-        tooltipText: label,
-        hasPopup: false,
-        disabled: !container.isHostedDataExplorerEnabled(),
-        className: "OpenFullScreen",
-      };
-      buttons.push(fullScreenButton);
-    }
-
-    if (configContext.platform !== Platform.Emulator) {
-      const label = "Feedback";
-      const feedbackButtonOptions: CommandButtonComponentProps = {
-        iconSrc: FeedbackIcon,
-        iconAlt: label,
-        onCommandClick: () => container.provideFeedbackEmail(),
-        commandButtonLabel: null,
-        ariaLabel: label,
-        tooltipText: label,
-        hasPopup: false,
-        disabled: false,
-      };
-      buttons.push(feedbackButtonOptions);
-    }
-
-    return buttons;
-  }
-
-  public static createDivider(): CommandButtonComponentProps {
-    const label = `divider${CommandBarComponentButtonFactory.counter++}`;
-    return {
-      isDivider: true,
-      commandButtonLabel: label,
-      hasPopup: false,
-      iconSrc: null,
-      iconAlt: null,
-      onCommandClick: null,
-      ariaLabel: label,
-    };
-  }
-
-  private static areScriptsSupported(container: Explorer): boolean {
-    return container.isPreferredApiDocumentDB() || container.isPreferredApiGraph();
-  }
-
-  private static createNewCollectionGroup(container: Explorer): CommandButtonComponentProps {
-    const label = container.addCollectionText();
-    return {
-      iconSrc: AddCollectionIcon,
-      iconAlt: label,
-      onCommandClick: () => container.onNewCollectionClicked(),
-      commandButtonLabel: label,
-      ariaLabel: label,
-      hasPopup: true,
-      id: "createNewContainerCommandButton",
-    };
-  }
-
-  private static createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonComponentProps {
-    if (configContext.platform === Platform.Emulator) {
-      return null;
-    }
-
-    if (container.isServerlessEnabled()) {
-      return null;
-    }
-
-    if (
-      container.databaseAccount &&
-      container.databaseAccount() &&
-      container.databaseAccount().properties &&
-      container.databaseAccount().properties.enableAnalyticalStorage
-    ) {
-      return null;
-    }
-
-    const capabilities =
-      (container.databaseAccount &&
-        container.databaseAccount() &&
-        container.databaseAccount().properties &&
-        container.databaseAccount().properties.capabilities) ||
-      [];
-    if (capabilities.some((capability) => capability.name === Constants.CapabilityNames.EnableStorageAnalytics)) {
-      return null;
-    }
-
-    const label = "Enable Azure Synapse Link";
-    return {
-      iconSrc: SynapseIcon,
-      iconAlt: label,
-      onCommandClick: () => container.openEnableSynapseLinkDialog(),
-      commandButtonLabel: label,
-      hasPopup: false,
-      disabled: container.isSynapseLinkUpdating(),
-      ariaLabel: label,
-    };
-  }
-
-  private static createNewDatabase(container: Explorer): CommandButtonComponentProps {
-    const label = container.addDatabaseText();
-    return {
-      iconSrc: AddDatabaseIcon,
-      iconAlt: label,
-      onCommandClick: () => {
-        container.addDatabasePane.open();
-        document.getElementById("linkAddDatabase").focus();
-      },
-      commandButtonLabel: label,
-      ariaLabel: label,
-      hasPopup: true,
-    };
-  }
-
-  private static createNewSQLQueryButton(container: Explorer): CommandButtonComponentProps {
-    if (container.isPreferredApiDocumentDB() || container.isPreferredApiGraph()) {
-      const label = "New SQL Query";
-      return {
-        iconSrc: AddSqlQueryIcon,
-        iconAlt: label,
-        onCommandClick: () => {
-          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-          selectedCollection && selectedCollection.onNewQueryClick(selectedCollection, null);
-        },
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: true,
-        disabled: container.isDatabaseNodeOrNoneSelected(),
-      };
-    } else if (container.isPreferredApiMongoDB()) {
-      const label = "New Query";
-      return {
-        iconSrc: AddSqlQueryIcon,
-        iconAlt: label,
-        onCommandClick: () => {
-          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-          selectedCollection && (<any>selectedCollection).onNewMongoQueryClick(selectedCollection, null);
-        },
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: true,
-        disabled: container.isDatabaseNodeOrNoneSelected(),
-      };
-    }
-
-    return null;
-  }
-
-  public static createScriptCommandButtons(container: Explorer): CommandButtonComponentProps[] {
-    const buttons: CommandButtonComponentProps[] = [];
-
-    const shouldEnableScriptsCommands: boolean =
-      !container.isDatabaseNodeOrNoneSelected() && CommandBarComponentButtonFactory.areScriptsSupported(container);
-
-    if (shouldEnableScriptsCommands) {
-      const label = "New Stored Procedure";
-      const newStoredProcedureBtn: CommandButtonComponentProps = {
-        iconSrc: AddStoredProcedureIcon,
-        iconAlt: label,
-        onCommandClick: () => {
-          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-          selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection, null);
-        },
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: true,
-        disabled: container.isDatabaseNodeOrNoneSelected(),
-      };
-      buttons.push(newStoredProcedureBtn);
-    }
-
-    if (shouldEnableScriptsCommands) {
-      const label = "New UDF";
-      const newUserDefinedFunctionBtn: CommandButtonComponentProps = {
-        iconSrc: AddUdfIcon,
-        iconAlt: label,
-        onCommandClick: () => {
-          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-          selectedCollection && selectedCollection.onNewUserDefinedFunctionClick(selectedCollection, null);
-        },
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: true,
-        disabled: container.isDatabaseNodeOrNoneSelected(),
-      };
-      buttons.push(newUserDefinedFunctionBtn);
-    }
-
-    if (shouldEnableScriptsCommands) {
-      const label = "New Trigger";
-      const newTriggerBtn: CommandButtonComponentProps = {
-        iconSrc: AddTriggerIcon,
-        iconAlt: label,
-        onCommandClick: () => {
-          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-          selectedCollection && selectedCollection.onNewTriggerClick(selectedCollection, null);
-        },
-        commandButtonLabel: label,
-        ariaLabel: label,
-        hasPopup: true,
-        disabled: container.isDatabaseNodeOrNoneSelected(),
-      };
-      buttons.push(newTriggerBtn);
-    }
-
-    return buttons;
-  }
-
-  private static createNewNotebookButton(container: Explorer): CommandButtonComponentProps {
-    const label = "New Notebook";
-    return {
-      iconSrc: NewNotebookIcon,
-      iconAlt: label,
-      onCommandClick: () => container.onNewNotebookClicked(),
-      commandButtonLabel: label,
-      hasPopup: false,
-      disabled: false,
-      ariaLabel: label,
-    };
-  }
-
-  private static createuploadNotebookButton(container: Explorer): CommandButtonComponentProps {
-    const label = "Upload to Notebook Server";
-    return {
-      iconSrc: NewNotebookIcon,
-      iconAlt: label,
-      onCommandClick: () => container.onUploadToNotebookServerClicked(),
-      commandButtonLabel: label,
-      hasPopup: false,
-      disabled: false,
-      ariaLabel: label,
-    };
-  }
-
-  private static createOpenQueryButton(container: Explorer): CommandButtonComponentProps {
-    const label = "Open Query";
-    return {
-      iconSrc: BrowseQueriesIcon,
-      iconAlt: label,
-      onCommandClick: () => container.browseQueriesPane.open(),
-      commandButtonLabel: label,
-      ariaLabel: label,
-      hasPopup: true,
-      disabled: false,
-    };
-  }
-
-  private static createOpenQueryFromDiskButton(container: Explorer): CommandButtonComponentProps {
-    const label = "Open Query From Disk";
-    return {
-      iconSrc: OpenQueryFromDiskIcon,
-      iconAlt: label,
-      onCommandClick: () => container.loadQueryPane.open(),
-      commandButtonLabel: label,
-      ariaLabel: label,
-      hasPopup: true,
-      disabled: false,
-    };
-  }
-
-  private static createEnableNotebooksButton(container: Explorer): CommandButtonComponentProps {
-    if (configContext.platform === Platform.Emulator) {
-      return null;
-    }
-    const label = "Enable Notebooks (Preview)";
-    const tooltip =
-      "Notebooks are not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks.";
-    const description =
-      "Looks like you have not yet created a notebooks workspace for this account. To proceed and start using notebooks, we'll need to create a default notebooks workspace in this account.";
-    return {
-      iconSrc: EnableNotebooksIcon,
-      iconAlt: label,
-      onCommandClick: () => container.setupNotebooksPane.openWithTitleAndDescription(label, description),
-      commandButtonLabel: label,
-      hasPopup: false,
-      disabled: !container.isNotebooksEnabledForAccount(),
-      ariaLabel: label,
-      tooltipText: container.isNotebooksEnabledForAccount() ? "" : tooltip,
-    };
-  }
-
-  private static createOpenTerminalButton(container: Explorer): CommandButtonComponentProps {
-    const label = "Open Terminal";
-    return {
-      iconSrc: CosmosTerminalIcon,
-      iconAlt: label,
-      onCommandClick: () => container.openNotebookTerminal(ViewModels.TerminalKind.Default),
-      commandButtonLabel: label,
-      hasPopup: false,
-      disabled: false,
-      ariaLabel: label,
-    };
-  }
-
-  private static createOpenMongoTerminalButton(container: Explorer): CommandButtonComponentProps {
-    const label = "Open Mongo Shell";
-    const tooltip =
-      "This feature is not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks.";
-    const title = "Set up workspace";
-    const description =
-      "Looks like you have not created a workspace for this account. To proceed and start using features including mongo shell and notebook, we will need to create a default workspace in this account.";
-    const disableButton = !container.isNotebooksEnabledForAccount() && !container.isNotebookEnabled();
-    return {
-      iconSrc: HostedTerminalIcon,
-      iconAlt: label,
-      onCommandClick: () => {
-        if (container.isNotebookEnabled()) {
-          container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
-        } else {
-          container.setupNotebooksPane.openWithTitleAndDescription(title, description);
-        }
-      },
-      commandButtonLabel: label,
-      hasPopup: false,
-      disabled: disableButton,
-      ariaLabel: label,
-      tooltipText: !disableButton ? "" : tooltip,
-    };
-  }
-
-  private static createOpenCassandraTerminalButton(container: Explorer): CommandButtonComponentProps {
-    const label = "Open Cassandra Shell";
-    const tooltip =
-      "This feature is not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks.";
-    const title = "Set up workspace";
-    const description =
-      "Looks like you have not created a workspace for this account. To proceed and start using features including cassandra shell and notebook, we will need to create a default workspace in this account.";
-    const disableButton = !container.isNotebooksEnabledForAccount() && !container.isNotebookEnabled();
-    return {
-      iconSrc: HostedTerminalIcon,
-      iconAlt: label,
-      onCommandClick: () => {
-        if (container.isNotebookEnabled()) {
-          container.openNotebookTerminal(ViewModels.TerminalKind.Cassandra);
-        } else {
-          container.setupNotebooksPane.openWithTitleAndDescription(title, description);
-        }
-      },
-      commandButtonLabel: label,
-      hasPopup: false,
-      disabled: disableButton,
-      ariaLabel: label,
-      tooltipText: !disableButton ? "" : tooltip,
-    };
-  }
-
-  private static createNotebookWorkspaceResetButton(container: Explorer): CommandButtonComponentProps {
-    const label = "Reset Workspace";
-    return {
-      iconSrc: ResetWorkspaceIcon,
-      iconAlt: label,
-      onCommandClick: () => container.resetNotebookWorkspace(),
-      commandButtonLabel: label,
-      hasPopup: false,
-      disabled: false,
-      ariaLabel: label,
-    };
-  }
-
-  private static createManageGitHubAccountButton(container: Explorer): CommandButtonComponentProps {
-    let connectedToGitHub: boolean = container.notebookManager?.gitHubOAuthService.isLoggedIn();
-    const label = connectedToGitHub ? "Manage GitHub settings" : "Connect to GitHub";
-    return {
-      iconSrc: GitHubIcon,
-      iconAlt: label,
-      onCommandClick: () => {
-        if (!connectedToGitHub) {
-          TelemetryProcessor.trace(Action.NotebooksGitHubConnect, ActionModifiers.Mark, {
-            databaseAccountName: container.databaseAccount() && container.databaseAccount().name,
-            defaultExperience: container.defaultExperience && container.defaultExperience(),
-            dataExplorerArea: Areas.Notebook,
-          });
-        }
-        container.gitHubReposPane.open();
-      },
-      commandButtonLabel: label,
-      hasPopup: false,
-      disabled: false,
-      ariaLabel: label,
-    };
-  }
-
-  private static createStaticCommandBarButtonsForResourceToken(container: Explorer): CommandButtonComponentProps[] {
-    const newSqlQueryBtn = CommandBarComponentButtonFactory.createNewSQLQueryButton(container);
-    const openQueryBtn = CommandBarComponentButtonFactory.createOpenQueryButton(container);
-
-    newSqlQueryBtn.disabled = !container.isResourceTokenCollectionNodeSelected();
-    newSqlQueryBtn.onCommandClick = () => {
-      const resourceTokenCollection: ViewModels.CollectionBase = container.resourceTokenCollection();
-      resourceTokenCollection && resourceTokenCollection.onNewQueryClick(resourceTokenCollection, undefined);
-    };
-
-    openQueryBtn.disabled = !container.isResourceTokenCollectionNodeSelected();
-    if (!openQueryBtn.disabled) {
-      openQueryBtn.children = [
-        CommandBarComponentButtonFactory.createOpenQueryButton(container),
-        CommandBarComponentButtonFactory.createOpenQueryFromDiskButton(container),
-      ];
-    }
-
-    return [newSqlQueryBtn, openQueryBtn];
-  }
-}

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -0,0 +1,581 @@
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import { Areas } from "../../../Common/Constants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+
+import AddDatabaseIcon from "../../../../images/AddDatabase.svg";
+import AddCollectionIcon from "../../../../images/AddCollection.svg";
+import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.svg";
+import BrowseQueriesIcon from "../../../../images/BrowseQuery.svg";
+import * as Constants from "../../../Common/Constants";
+import OpenInTabIcon from "../../../../images/open-in-tab.svg";
+import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
+import CosmosTerminalIcon from "../../../../images/Cosmos-Terminal.svg";
+import HostedTerminalIcon from "../../../../images/Hosted-Terminal.svg";
+import AddStoredProcedureIcon from "../../../../images/AddStoredProcedure.svg";
+import SettingsIcon from "../../../../images/settings_15x15.svg";
+import AddUdfIcon from "../../../../images/AddUdf.svg";
+import AddTriggerIcon from "../../../../images/AddTrigger.svg";
+import FeedbackIcon from "../../../../images/Feedback-Command.svg";
+import EnableNotebooksIcon from "../../../../images/notebook/Notebook-enable.svg";
+import NewNotebookIcon from "../../../../images/notebook/Notebook-new.svg";
+import ResetWorkspaceIcon from "../../../../images/notebook/Notebook-reset-workspace.svg";
+import GitHubIcon from "../../../../images/github.svg";
+import SynapseIcon from "../../../../images/synapse-link.svg";
+import { configContext, Platform } from "../../../ConfigContext";
+import Explorer from "../../Explorer";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import * as React from "react";
+import { OpenFullScreen } from "../../OpenFullScreen";
+
+let counter = 0;
+
+export function createStaticCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
+  if (container.isAuthWithResourceToken()) {
+    return createStaticCommandBarButtonsForResourceToken(container);
+  }
+
+  const newCollectionBtn = createNewCollectionGroup(container);
+  const buttons: CommandButtonComponentProps[] = [];
+
+  buttons.push(newCollectionBtn);
+
+  const addSynapseLink = createOpenSynapseLinkDialogButton(container);
+  if (addSynapseLink) {
+    buttons.push(createDivider());
+    buttons.push(addSynapseLink);
+  }
+
+  if (!container.isPreferredApiTable()) {
+    newCollectionBtn.children = [createNewCollectionGroup(container)];
+    const newDatabaseBtn = createNewDatabase(container);
+    newCollectionBtn.children.push(newDatabaseBtn);
+  }
+
+  buttons.push(createDivider());
+
+  if (container.isNotebookEnabled()) {
+    const newNotebookButton = createNewNotebookButton(container);
+    newNotebookButton.children = [createNewNotebookButton(container), createuploadNotebookButton(container)];
+    buttons.push(newNotebookButton);
+
+    if (container.notebookManager?.gitHubOAuthService) {
+      buttons.push(createManageGitHubAccountButton(container));
+    }
+  }
+
+  if (!container.isRunningOnNationalCloud()) {
+    if (!container.isNotebookEnabled()) {
+      buttons.push(createEnableNotebooksButton(container));
+    }
+
+    if (container.isPreferredApiMongoDB()) {
+      buttons.push(createOpenMongoTerminalButton(container));
+    }
+
+    if (container.isPreferredApiCassandra()) {
+      buttons.push(createOpenCassandraTerminalButton(container));
+    }
+  }
+
+  if (container.isNotebookEnabled()) {
+    buttons.push(createOpenTerminalButton(container));
+
+    buttons.push(createNotebookWorkspaceResetButton(container));
+  }
+
+  if (!container.isDatabaseNodeOrNoneSelected()) {
+    if (container.isNotebookEnabled()) {
+      buttons.push(createDivider());
+    }
+
+    const isSqlQuerySupported = container.isPreferredApiDocumentDB() || container.isPreferredApiGraph();
+    if (isSqlQuerySupported) {
+      const newSqlQueryBtn = createNewSQLQueryButton(container);
+      buttons.push(newSqlQueryBtn);
+    }
+
+    const isSupportedOpenQueryApi =
+      container.isPreferredApiDocumentDB() || container.isPreferredApiMongoDB() || container.isPreferredApiGraph();
+    const isSupportedOpenQueryFromDiskApi = container.isPreferredApiDocumentDB() || container.isPreferredApiGraph();
+    if (isSupportedOpenQueryApi && container.selectedNode() && container.findSelectedCollection()) {
+      const openQueryBtn = createOpenQueryButton(container);
+      openQueryBtn.children = [createOpenQueryButton(container), createOpenQueryFromDiskButton(container)];
+      buttons.push(openQueryBtn);
+    } else if (isSupportedOpenQueryFromDiskApi && container.selectedNode() && container.findSelectedCollection()) {
+      buttons.push(createOpenQueryFromDiskButton(container));
+    }
+
+    if (areScriptsSupported(container)) {
+      const label = "New Stored Procedure";
+      const newStoredProcedureBtn: CommandButtonComponentProps = {
+        iconSrc: AddStoredProcedureIcon,
+        iconAlt: label,
+        onCommandClick: () => {
+          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+          selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection);
+        },
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: true,
+        disabled: container.isDatabaseNodeOrNoneSelected(),
+      };
+
+      newStoredProcedureBtn.children = createScriptCommandButtons(container);
+      buttons.push(newStoredProcedureBtn);
+    }
+  }
+
+  return buttons;
+}
+
+export function createContextCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
+  const buttons: CommandButtonComponentProps[] = [];
+
+  if (!container.isDatabaseNodeOrNoneSelected() && container.isPreferredApiMongoDB()) {
+    const label = "New Shell";
+    const newMongoShellBtn: CommandButtonComponentProps = {
+      iconSrc: HostedTerminalIcon,
+      iconAlt: label,
+      onCommandClick: () => {
+        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        selectedCollection && selectedCollection.onNewMongoShellClick();
+      },
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: true,
+      disabled: container.isDatabaseNodeOrNoneSelected() && container.isPreferredApiMongoDB(),
+    };
+    buttons.push(newMongoShellBtn);
+  }
+
+  return buttons;
+}
+
+export function createControlCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
+  const buttons: CommandButtonComponentProps[] = [];
+  if (configContext.platform === Platform.Hosted) {
+    return buttons;
+  }
+
+  if (!container.isPreferredApiCassandra()) {
+    const label = "Settings";
+    const settingsPaneButton: CommandButtonComponentProps = {
+      iconSrc: SettingsIcon,
+      iconAlt: label,
+      onCommandClick: () => container.settingsPane.open(),
+      commandButtonLabel: undefined,
+      ariaLabel: label,
+      tooltipText: label,
+      hasPopup: true,
+      disabled: false,
+    };
+    buttons.push(settingsPaneButton);
+  }
+
+  if (container.isHostedDataExplorerEnabled()) {
+    const label = "Open Full Screen";
+    const fullScreenButton: CommandButtonComponentProps = {
+      iconSrc: OpenInTabIcon,
+      iconAlt: label,
+      onCommandClick: () => {
+        container.openSidePanel("Open Full Screen", <OpenFullScreen />);
+      },
+      commandButtonLabel: undefined,
+      ariaLabel: label,
+      tooltipText: label,
+      hasPopup: false,
+      disabled: !container.isHostedDataExplorerEnabled(),
+      className: "OpenFullScreen",
+    };
+    buttons.push(fullScreenButton);
+  }
+
+  if (configContext.platform !== Platform.Emulator) {
+    const label = "Feedback";
+    const feedbackButtonOptions: CommandButtonComponentProps = {
+      iconSrc: FeedbackIcon,
+      iconAlt: label,
+      onCommandClick: () => container.provideFeedbackEmail(),
+      commandButtonLabel: undefined,
+      ariaLabel: label,
+      tooltipText: label,
+      hasPopup: false,
+      disabled: false,
+    };
+    buttons.push(feedbackButtonOptions);
+  }
+
+  return buttons;
+}
+
+export function createDivider(): CommandButtonComponentProps {
+  const label = `divider${counter++}`;
+  return {
+    isDivider: true,
+    commandButtonLabel: label,
+    hasPopup: false,
+    iconSrc: undefined,
+    iconAlt: undefined,
+    onCommandClick: undefined,
+    ariaLabel: label,
+  };
+}
+
+function areScriptsSupported(container: Explorer): boolean {
+  return container.isPreferredApiDocumentDB() || container.isPreferredApiGraph();
+}
+
+function createNewCollectionGroup(container: Explorer): CommandButtonComponentProps {
+  const label = container.addCollectionText();
+  return {
+    iconSrc: AddCollectionIcon,
+    iconAlt: label,
+    onCommandClick: () => container.onNewCollectionClicked(),
+    commandButtonLabel: label,
+    ariaLabel: label,
+    hasPopup: true,
+    id: "createNewContainerCommandButton",
+  };
+}
+
+function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonComponentProps {
+  if (configContext.platform === Platform.Emulator) {
+    return undefined;
+  }
+
+  if (container.isServerlessEnabled()) {
+    return undefined;
+  }
+
+  if (
+    container.databaseAccount &&
+    container.databaseAccount() &&
+    container.databaseAccount().properties &&
+    container.databaseAccount().properties.enableAnalyticalStorage
+  ) {
+    return undefined;
+  }
+
+  const capabilities =
+    (container.databaseAccount &&
+      container.databaseAccount() &&
+      container.databaseAccount().properties &&
+      container.databaseAccount().properties.capabilities) ||
+    [];
+  if (capabilities.some((capability) => capability.name === Constants.CapabilityNames.EnableStorageAnalytics)) {
+    return undefined;
+  }
+
+  const label = "Enable Azure Synapse Link";
+  return {
+    iconSrc: SynapseIcon,
+    iconAlt: label,
+    onCommandClick: () => container.openEnableSynapseLinkDialog(),
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: container.isSynapseLinkUpdating(),
+    ariaLabel: label,
+  };
+}
+
+function createNewDatabase(container: Explorer): CommandButtonComponentProps {
+  const label = container.addDatabaseText();
+  return {
+    iconSrc: AddDatabaseIcon,
+    iconAlt: label,
+    onCommandClick: () => {
+      container.addDatabasePane.open();
+      document.getElementById("linkAddDatabase").focus();
+    },
+    commandButtonLabel: label,
+    ariaLabel: label,
+    hasPopup: true,
+  };
+}
+
+function createNewSQLQueryButton(container: Explorer): CommandButtonComponentProps {
+  if (container.isPreferredApiDocumentDB() || container.isPreferredApiGraph()) {
+    const label = "New SQL Query";
+    return {
+      iconSrc: AddSqlQueryIcon,
+      iconAlt: label,
+      onCommandClick: () => {
+        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        selectedCollection && selectedCollection.onNewQueryClick(selectedCollection);
+      },
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: true,
+      disabled: container.isDatabaseNodeOrNoneSelected(),
+    };
+  } else if (container.isPreferredApiMongoDB()) {
+    const label = "New Query";
+    return {
+      iconSrc: AddSqlQueryIcon,
+      iconAlt: label,
+      onCommandClick: () => {
+        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        selectedCollection && selectedCollection.onNewMongoQueryClick(selectedCollection);
+      },
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: true,
+      disabled: container.isDatabaseNodeOrNoneSelected(),
+    };
+  }
+
+  return undefined;
+}
+
+export function createScriptCommandButtons(container: Explorer): CommandButtonComponentProps[] {
+  const buttons: CommandButtonComponentProps[] = [];
+
+  const shouldEnableScriptsCommands: boolean =
+    !container.isDatabaseNodeOrNoneSelected() && areScriptsSupported(container);
+
+  if (shouldEnableScriptsCommands) {
+    const label = "New Stored Procedure";
+    const newStoredProcedureBtn: CommandButtonComponentProps = {
+      iconSrc: AddStoredProcedureIcon,
+      iconAlt: label,
+      onCommandClick: () => {
+        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection);
+      },
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: true,
+      disabled: container.isDatabaseNodeOrNoneSelected(),
+    };
+    buttons.push(newStoredProcedureBtn);
+  }
+
+  if (shouldEnableScriptsCommands) {
+    const label = "New UDF";
+    const newUserDefinedFunctionBtn: CommandButtonComponentProps = {
+      iconSrc: AddUdfIcon,
+      iconAlt: label,
+      onCommandClick: () => {
+        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        selectedCollection && selectedCollection.onNewUserDefinedFunctionClick(selectedCollection);
+      },
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: true,
+      disabled: container.isDatabaseNodeOrNoneSelected(),
+    };
+    buttons.push(newUserDefinedFunctionBtn);
+  }
+
+  if (shouldEnableScriptsCommands) {
+    const label = "New Trigger";
+    const newTriggerBtn: CommandButtonComponentProps = {
+      iconSrc: AddTriggerIcon,
+      iconAlt: label,
+      onCommandClick: () => {
+        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        selectedCollection && selectedCollection.onNewTriggerClick(selectedCollection);
+      },
+      commandButtonLabel: label,
+      ariaLabel: label,
+      hasPopup: true,
+      disabled: container.isDatabaseNodeOrNoneSelected(),
+    };
+    buttons.push(newTriggerBtn);
+  }
+
+  return buttons;
+}
+
+function createNewNotebookButton(container: Explorer): CommandButtonComponentProps {
+  const label = "New Notebook";
+  return {
+    iconSrc: NewNotebookIcon,
+    iconAlt: label,
+    onCommandClick: () => container.onNewNotebookClicked(),
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: false,
+    ariaLabel: label,
+  };
+}
+
+function createuploadNotebookButton(container: Explorer): CommandButtonComponentProps {
+  const label = "Upload to Notebook Server";
+  return {
+    iconSrc: NewNotebookIcon,
+    iconAlt: label,
+    onCommandClick: () => container.onUploadToNotebookServerClicked(),
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: false,
+    ariaLabel: label,
+  };
+}
+
+function createOpenQueryButton(container: Explorer): CommandButtonComponentProps {
+  const label = "Open Query";
+  return {
+    iconSrc: BrowseQueriesIcon,
+    iconAlt: label,
+    onCommandClick: () => container.browseQueriesPane.open(),
+    commandButtonLabel: label,
+    ariaLabel: label,
+    hasPopup: true,
+    disabled: false,
+  };
+}
+
+function createOpenQueryFromDiskButton(container: Explorer): CommandButtonComponentProps {
+  const label = "Open Query From Disk";
+  return {
+    iconSrc: OpenQueryFromDiskIcon,
+    iconAlt: label,
+    onCommandClick: () => container.loadQueryPane.open(),
+    commandButtonLabel: label,
+    ariaLabel: label,
+    hasPopup: true,
+    disabled: false,
+  };
+}
+
+function createEnableNotebooksButton(container: Explorer): CommandButtonComponentProps {
+  if (configContext.platform === Platform.Emulator) {
+    return undefined;
+  }
+  const label = "Enable Notebooks (Preview)";
+  const tooltip =
+    "Notebooks are not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks.";
+  const description =
+    "Looks like you have not yet created a notebooks workspace for this account. To proceed and start using notebooks, we'll need to create a default notebooks workspace in this account.";
+  return {
+    iconSrc: EnableNotebooksIcon,
+    iconAlt: label,
+    onCommandClick: () => container.setupNotebooksPane.openWithTitleAndDescription(label, description),
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: !container.isNotebooksEnabledForAccount(),
+    ariaLabel: label,
+    tooltipText: container.isNotebooksEnabledForAccount() ? "" : tooltip,
+  };
+}
+
+function createOpenTerminalButton(container: Explorer): CommandButtonComponentProps {
+  const label = "Open Terminal";
+  return {
+    iconSrc: CosmosTerminalIcon,
+    iconAlt: label,
+    onCommandClick: () => container.openNotebookTerminal(ViewModels.TerminalKind.Default),
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: false,
+    ariaLabel: label,
+  };
+}
+
+function createOpenMongoTerminalButton(container: Explorer): CommandButtonComponentProps {
+  const label = "Open Mongo Shell";
+  const tooltip =
+    "This feature is not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks.";
+  const title = "Set up workspace";
+  const description =
+    "Looks like you have not created a workspace for this account. To proceed and start using features including mongo shell and notebook, we will need to create a default workspace in this account.";
+  const disableButton = !container.isNotebooksEnabledForAccount() && !container.isNotebookEnabled();
+  return {
+    iconSrc: HostedTerminalIcon,
+    iconAlt: label,
+    onCommandClick: () => {
+      if (container.isNotebookEnabled()) {
+        container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
+      } else {
+        container.setupNotebooksPane.openWithTitleAndDescription(title, description);
+      }
+    },
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: disableButton,
+    ariaLabel: label,
+    tooltipText: !disableButton ? "" : tooltip,
+  };
+}
+
+function createOpenCassandraTerminalButton(container: Explorer): CommandButtonComponentProps {
+  const label = "Open Cassandra Shell";
+  const tooltip =
+    "This feature is not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks.";
+  const title = "Set up workspace";
+  const description =
+    "Looks like you have not created a workspace for this account. To proceed and start using features including cassandra shell and notebook, we will need to create a default workspace in this account.";
+  const disableButton = !container.isNotebooksEnabledForAccount() && !container.isNotebookEnabled();
+  return {
+    iconSrc: HostedTerminalIcon,
+    iconAlt: label,
+    onCommandClick: () => {
+      if (container.isNotebookEnabled()) {
+        container.openNotebookTerminal(ViewModels.TerminalKind.Cassandra);
+      } else {
+        container.setupNotebooksPane.openWithTitleAndDescription(title, description);
+      }
+    },
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: disableButton,
+    ariaLabel: label,
+    tooltipText: !disableButton ? "" : tooltip,
+  };
+}
+
+function createNotebookWorkspaceResetButton(container: Explorer): CommandButtonComponentProps {
+  const label = "Reset Workspace";
+  return {
+    iconSrc: ResetWorkspaceIcon,
+    iconAlt: label,
+    onCommandClick: () => container.resetNotebookWorkspace(),
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: false,
+    ariaLabel: label,
+  };
+}
+
+function createManageGitHubAccountButton(container: Explorer): CommandButtonComponentProps {
+  const connectedToGitHub: boolean = container.notebookManager?.gitHubOAuthService.isLoggedIn();
+  const label = connectedToGitHub ? "Manage GitHub settings" : "Connect to GitHub";
+  return {
+    iconSrc: GitHubIcon,
+    iconAlt: label,
+    onCommandClick: () => {
+      if (!connectedToGitHub) {
+        TelemetryProcessor.trace(Action.NotebooksGitHubConnect, ActionModifiers.Mark, {
+          databaseAccountName: container.databaseAccount() && container.databaseAccount().name,
+          defaultExperience: container.defaultExperience && container.defaultExperience(),
+          dataExplorerArea: Areas.Notebook,
+        });
+      }
+      container.gitHubReposPane.open();
+    },
+    commandButtonLabel: label,
+    hasPopup: false,
+    disabled: false,
+    ariaLabel: label,
+  };
+}
+
+function createStaticCommandBarButtonsForResourceToken(container: Explorer): CommandButtonComponentProps[] {
+  const newSqlQueryBtn = createNewSQLQueryButton(container);
+  const openQueryBtn = createOpenQueryButton(container);
+
+  newSqlQueryBtn.disabled = !container.isResourceTokenCollectionNodeSelected();
+  newSqlQueryBtn.onCommandClick = () => {
+    const resourceTokenCollection: ViewModels.CollectionBase = container.resourceTokenCollection();
+    resourceTokenCollection && resourceTokenCollection.onNewQueryClick(resourceTokenCollection, undefined);
+  };
+
+  openQueryBtn.disabled = !container.isResourceTokenCollectionNodeSelected();
+  if (!openQueryBtn.disabled) {
+    openQueryBtn.children = [createOpenQueryButton(container), createOpenQueryFromDiskButton(container)];
+  }
+
+  return [newSqlQueryBtn, openQueryBtn];
+}

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -114,6 +114,7 @@ export class NotificationConsoleComponent extends React.Component<
       <div className="notificationConsoleContainer">
         <div
           className="notificationConsoleHeader"
+          id="notificationConsoleHeader"
           ref={this.setElememntRef}
           onClick={(event: React.MouseEvent<HTMLDivElement>) => this.expandCollapseConsole()}
           onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
 >
   <div
     className="notificationConsoleHeader"
+    id="notificationConsoleHeader"
     onClick={[Function]}
     onKeyDown={[Function]}
     tabIndex={0}
@@ -169,6 +170,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
 >
   <div
     className="notificationConsoleHeader"
+    id="notificationConsoleHeader"
     onClick={[Function]}
     onKeyDown={[Function]}
     tabIndex={0}

src/Explorer/Notebook/MongoQueryComponent/MongoQueryComponent.less

@@ -1,26 +0,0 @@
-.mongoQueryComponent {
-  margin-left: 10px;
-  height: 100%;
-  overflow-y: auto;
-  width: 100%;
-
-  input {
-    margin-top: 0;
-  }
-  label {
-    padding: 0;
-    margin-bottom: 0;
-  }
-
-  label:before {
-    top: 2px;
-    left: 2px;
-    height: 16px;
-    width: 16px;
-  }
-
-  .queryInput {
-    border: 1px solid black;
-    margin: 5px;
-  }
-}

src/Explorer/Notebook/MongoQueryComponent/MongoQueryComponent.tsx

@@ -1,185 +0,0 @@
-import * as React from "react";
-import { Dispatch } from "redux";
-import MonacoEditor from "@nteract/monaco-editor";
-import { PrimaryButton } from "office-ui-fabric-react";
-import { ChoiceGroup, IChoiceGroupOption } from "office-ui-fabric-react/lib/ChoiceGroup";
-import Outputs from "@nteract/stateful-components/lib/outputs";
-import { KernelOutputError, StreamText } from "@nteract/outputs";
-import TransformMedia from "@nteract/stateful-components/lib/outputs/transform-media";
-import { actions, selectors, AppState, ContentRef, KernelRef } from "@nteract/core";
-import loadTransform from "../NotebookComponent/loadTransform";
-import { connect } from "react-redux";
-
-import "./MongoQueryComponent.less";
-interface MongoQueryComponentPureProps {
-  contentRef: ContentRef;
-  kernelRef: KernelRef;
-  databaseId: string;
-  collectionId: string;
-}
-
-interface MongoQueryComponentDispatchProps {
-  runCell: (contentRef: ContentRef, cellId: string) => void;
-  addTransform: (transform: React.ComponentType & { MIMETYPE: string }) => void;
-  updateCell: (text: string, id: string, contentRef: ContentRef) => void;
-}
-
-type OutputType = "rich" | "json";
-
-interface MongoQueryComponentState {
-  query: string;
-  outputType: OutputType;
-}
-
-const options: IChoiceGroupOption[] = [
-  { key: "rich", text: "Rich Output" },
-  { key: "json", text: "Json Output" },
-];
-
-type MongoQueryComponentProps = MongoQueryComponentPureProps & StateProps & MongoQueryComponentDispatchProps;
-export class MongoQueryComponent extends React.Component<MongoQueryComponentProps, MongoQueryComponentState> {
-  constructor(props: MongoQueryComponentProps) {
-    super(props);
-    this.state = {
-      query: this.props.inputValue,
-      outputType: "rich",
-    };
-  }
-
-  componentDidMount(): void {
-    loadTransform(this.props);
-  }
-
-  private onExecute = () => {
-    const query = JSON.parse(this.state.query);
-    query["database"] = this.props.databaseId;
-    query["collection"] = this.props.collectionId;
-    query["outputType"] = this.state.outputType;
-
-    this.props.updateCell(JSON.stringify(query), this.props.firstCellId, this.props.contentRef);
-    this.props.runCell(this.props.contentRef, this.props.firstCellId);
-  };
-
-  private onOutputTypeChange = (
-    e: React.FormEvent<HTMLElement | HTMLInputElement>,
-    option: IChoiceGroupOption
-  ): void => {
-    const outputType = option.key as OutputType;
-    this.setState({ outputType }, () => this.onInputChange(this.props.inputValue));
-  };
-
-  private onInputChange = (text: string) => {
-    this.setState({ query: text });
-  };
-
-  render(): JSX.Element {
-    const { firstCellId: id, contentRef } = this.props;
-
-    if (!id) {
-      return <></>;
-    }
-
-    return (
-      <div className="mongoQueryComponent">
-        <div className="queryInput">
-          <MonacoEditor
-            id={this.props.firstCellId}
-            contentRef={this.props.contentRef}
-            theme={""}
-            language="json"
-            onChange={this.onInputChange}
-            value={this.state.query}
-          />
-        </div>
-        <PrimaryButton text="Run" onClick={this.onExecute} disabled={!this.props.firstCellId} />
-        <ChoiceGroup
-          selectedKey={this.state.outputType}
-          options={options}
-          onChange={this.onOutputTypeChange}
-          label="Output Type"
-          styles={{ root: { marginTop: 0 } }}
-        />
-        <hr />
-        <Outputs id={id} contentRef={contentRef}>
-          <TransformMedia output_type={"display_data"} id={id} contentRef={contentRef} />
-          <TransformMedia output_type={"execute_result"} id={id} contentRef={contentRef} />
-          <KernelOutputError />
-          <StreamText />
-        </Outputs>
-      </div>
-    );
-  }
-}
-
-interface StateProps {
-  firstCellId: string;
-  inputValue: string;
-}
-interface InitialProps {
-  contentRef: string;
-}
-
-// Redux
-const makeMapStateToProps = (state: AppState, initialProps: InitialProps) => {
-  const { contentRef } = initialProps;
-  const mapStateToProps = (state: AppState) => {
-    let firstCellId;
-    let inputValue = "";
-    const content = selectors.content(state, { contentRef });
-    if (content?.type === "notebook") {
-      const cellOrder = selectors.notebook.cellOrder(content.model);
-      if (cellOrder.size > 0) {
-        firstCellId = cellOrder.first() as string;
-        const cell = selectors.notebook.cellById(content.model, { id: firstCellId });
-
-        // Parse to extract filter and output type
-        const cellValue = cell.get("source", "");
-        if (cellValue) {
-          try {
-            const filterValue = JSON.parse(cellValue).filter;
-            if (filterValue) {
-              inputValue = filterValue;
-            }
-          } catch (e) {
-            console.error("Could not parse", e);
-          }
-        }
-      }
-    }
-
-    return {
-      firstCellId,
-      inputValue,
-    };
-  };
-  return mapStateToProps;
-};
-
-const makeMapDispatchToProps = (initialDispatch: Dispatch, initialProps: MongoQueryComponentProps) => {
-  const mapDispatchToProps = (dispatch: Dispatch) => {
-    return {
-      addTransform: (transform: React.ComponentType & { MIMETYPE: string }) => {
-        return dispatch(
-          actions.addTransform({
-            mediaType: transform.MIMETYPE,
-            component: transform,
-          })
-        );
-      },
-      runCell: (contentRef: ContentRef, cellId: string) => {
-        return dispatch(
-          actions.executeCell({
-            contentRef,
-            id: cellId,
-          })
-        );
-      },
-      updateCell: (text: string, id: string, contentRef: ContentRef) => {
-        dispatch(actions.updateCellSource({ id, contentRef, value: text }));
-      },
-    };
-  };
-  return mapDispatchToProps;
-};
-
-export default connect(makeMapStateToProps, makeMapDispatchToProps)(MongoQueryComponent);

src/Explorer/Notebook/MongoQueryComponent/MongoQueryComponentAdapter.tsx

@@ -1,89 +0,0 @@
-import * as React from "react";
-
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import {
-  NotebookComponentBootstrapper,
-  NotebookComponentBootstrapperOptions,
-} from "../NotebookComponent/NotebookComponentBootstrapper";
-import MongoQueryComponent from "../MongoQueryComponent/MongoQueryComponent";
-import { actions, createContentRef, createKernelRef, IContent, KernelRef } from "@nteract/core";
-import { Provider } from "react-redux";
-import { Notebook } from "@nteract/commutable";
-
-export class MongoQueryComponentAdapter extends NotebookComponentBootstrapper implements ReactAdapter {
-  public parameters: unknown;
-  private kernelRef: KernelRef;
-
-  constructor(options: NotebookComponentBootstrapperOptions, private databaseId: string, private collectionId: string) {
-    super(options);
-
-    if (!this.contentRef) {
-      this.contentRef = createContentRef();
-      this.kernelRef = createKernelRef();
-
-      const notebook: Notebook = {
-        cells: [
-          {
-            cell_type: "code",
-            metadata: {},
-            execution_count: 0,
-            outputs: [],
-            source: "",
-          },
-        ],
-        metadata: {
-          kernelspec: {
-            displayName: "Mongo",
-            language: "mongocli",
-            name: "mongo",
-          },
-          language_info: {
-            file_extension: "ipynb",
-            mimetype: "application/json",
-            name: "mongo",
-            version: "1.0",
-          },
-        },
-        nbformat: 4,
-        nbformat_minor: 4,
-      };
-
-      const model: IContent<"notebook"> = {
-        name: "mongo-query-component-notebook.ipynb",
-        path: "mongo-query-component-notebook.ipynb",
-        type: "notebook",
-        writable: true,
-        created: "",
-        last_modified: "",
-        mimetype: "application/x-ipynb+json",
-        content: notebook,
-        format: "json",
-      };
-
-      // Request fetching notebook content
-      this.getStore().dispatch(
-        actions.fetchContentFulfilled({
-          filepath: model.path,
-          model,
-          kernelRef: this.kernelRef,
-          contentRef: this.contentRef,
-        })
-      );
-    }
-  }
-
-  public renderComponent(): JSX.Element {
-    const props = {
-      contentRef: this.contentRef,
-      kernelRef: this.kernelRef,
-      databaseId: this.databaseId,
-      collectionId: this.collectionId,
-    };
-
-    return (
-      <Provider store={this.getStore()}>
-        <MongoQueryComponent {...props} />;
-      </Provider>
-    );
-  }
-}

src/Explorer/Notebook/NotebookManager.ts

@@ -18,7 +18,6 @@ import { contents } from "rx-jupyter";
 import { NotebookContainerClient } from "./NotebookContainerClient";
 import { MemoryUsageInfo } from "../../Contracts/DataModels";
 import { NotebookContentClient } from "./NotebookContentClient";
-import { DialogProps } from "../Controls/DialogReactComponent/DialogComponent";
 import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
 import { PublishNotebookPaneAdapter } from "../Panes/PublishNotebookPaneAdapter";
 import { getFullName } from "../../Utils/UserUtils";
@@ -31,7 +30,6 @@ import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 export interface NotebookManagerOptions {
   container: Explorer;
   notebookBasePath: ko.Observable<string>;
-  dialogProps: ko.Observable<DialogProps>;
   resourceTree: ResourceTreeAdapter;
   refreshCommandBarButtons: () => void;
   refreshNotebookList: () => void;
@@ -89,9 +87,7 @@ export default class NotebookManager {
       this.notebookContentProvider
     );
 
-    if (this.params.container.isGalleryPublishEnabled()) {
-      this.publishNotebookPaneAdapter = new PublishNotebookPaneAdapter(this.params.container, this.junoClient);
-    }
+    this.publishNotebookPaneAdapter = new PublishNotebookPaneAdapter(this.params.container, this.junoClient);
 
     this.copyNotebookPaneAdapter = new CopyNotebookPaneAdapter(
       this.params.container,
@@ -127,10 +123,9 @@ export default class NotebookManager {
   public async openPublishNotebookPane(
     name: string,
     content: string | ImmutableNotebook,
-    parentDomElement: HTMLElement,
-    isLinkInjectionEnabled: boolean
+    parentDomElement: HTMLElement
   ): Promise<void> {
-    await this.publishNotebookPaneAdapter.open(name, getFullName(), content, parentDomElement, isLinkInjectionEnabled);
+    await this.publishNotebookPaneAdapter.open(name, getFullName(), content, parentDomElement);
   }
 
   public openCopyNotebookPane(name: string, content: string): void {
@@ -181,10 +176,8 @@ export default class NotebookManager {
           multiline: true,
           defaultValue: commitMsg,
           rows: 3,
-          onChange: (_, newValue: string) => {
+          onChange: (_: unknown, newValue: string) => {
             commitMsg = newValue;
-            this.params.dialogProps().primaryButtonDisabled = !commitMsg;
-            this.params.dialogProps.valueHasMutated();
           },
         },
         !commitMsg

src/Explorer/OpenActions.test.ts

@@ -20,7 +20,6 @@ describe("OpenActions", () => {
       explorer.cassandraAddCollectionPane = {} as CassandraAddCollectionPane;
       explorer.cassandraAddCollectionPane.open = jest.fn();
       explorer.closeAllPanes = () => {};
-      explorer.isConnectExplorerVisible = () => false;
 
       database = {
         id: ko.observable("db"),

src/Explorer/OpenActions.ts

@@ -133,25 +133,19 @@ function openPane(action: ActionContracts.OpenPane, explorer: Explorer) {
     (<any>action).paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.AddCollection]
   ) {
     explorer.closeAllPanes();
-    !explorer.isConnectExplorerVisible() && explorer.addCollectionPane.open();
+    explorer.addCollectionPane.open();
   } else if (
     action.paneKind === ActionContracts.PaneKind.CassandraAddCollection ||
     (<any>action).paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.CassandraAddCollection]
   ) {
     explorer.closeAllPanes();
-    !explorer.isConnectExplorerVisible() && explorer.cassandraAddCollectionPane.open();
+    explorer.cassandraAddCollectionPane.open();
   } else if (
     action.paneKind === ActionContracts.PaneKind.GlobalSettings ||
     (<any>action).paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.GlobalSettings]
   ) {
     explorer.closeAllPanes();
-    !explorer.isConnectExplorerVisible() && explorer.settingsPane.open();
-  } else if (
-    action.paneKind === ActionContracts.PaneKind.AdHocAccess ||
-    (<any>action).paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.AdHocAccess]
-  ) {
-    explorer.closeAllPanes();
-    !explorer.isConnectExplorerVisible() && explorer.renewAdHocAccessPane.open();
+    explorer.settingsPane.open();
   }
 }
 

src/Explorer/OpenFullScreen.test.tsx

@@ -0,0 +1,17 @@
+jest.mock("../hooks/useFullScreenURLs");
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { useFullScreenURLs } from "../hooks/useFullScreenURLs";
+import { OpenFullScreen } from "./OpenFullScreen";
+
+it("renders the correct URLs", () => {
+  (useFullScreenURLs as jest.Mock).mockReturnValue({
+    readWrite: "read and write url",
+    read: "read only url",
+  });
+
+  render(<OpenFullScreen />);
+  expect(screen.getByLabelText("Read and Write")).toHaveValue("https://cosmos.azure.com/?key=read and write url");
+  expect(screen.getByLabelText("Read Only")).toHaveValue("https://cosmos.azure.com/?key=read only url");
+});

src/Explorer/OpenFullScreen.tsx

@@ -0,0 +1,61 @@
+import { Spinner, Stack, Text, TextField } from "office-ui-fabric-react";
+import { DefaultButton, PrimaryButton } from "office-ui-fabric-react/lib/Button";
+import * as React from "react";
+import { useFullScreenURLs } from "../hooks/useFullScreenURLs";
+import copyToClipboard from "clipboard-copy";
+
+export const OpenFullScreen: React.FunctionComponent = () => {
+  const result = useFullScreenURLs();
+  if (!result) {
+    return <Spinner label="Generating URLs..." ariaLive="assertive" labelPosition="right" />;
+  }
+
+  const readWriteUrl = `https://cosmos.azure.com/?key=${result.readWrite}`;
+  const readUrl = `https://cosmos.azure.com/?key=${result.read}`;
+
+  return (
+    <>
+      <Stack tokens={{ childrenGap: 10 }}>
+        <Text>
+          Open this database account in a new browser tab with Cosmos DB Explorer. Or copy the read-write or read only
+          access urls below to share with others. For security purposes, the URLs grant time-bound access to the
+          account. When access expires, you can reconnect, using a valid connection string for the account.
+        </Text>
+        <TextField label="Read and Write" readOnly defaultValue={readWriteUrl} />
+        <Stack horizontal tokens={{ childrenGap: 10 }}>
+          <DefaultButton
+            onClick={() => {
+              copyToClipboard(readWriteUrl);
+            }}
+            text="Copy"
+            iconProps={{ iconName: "Copy" }}
+          />
+          <PrimaryButton
+            onClick={() => {
+              window.open(readWriteUrl, "_blank");
+            }}
+            text="Open"
+            iconProps={{ iconName: "OpenInNewWindow" }}
+          />
+        </Stack>
+        <TextField label="Read Only" readOnly defaultValue={readUrl} />
+        <Stack horizontal tokens={{ childrenGap: 10 }}>
+          <DefaultButton
+            onClick={() => {
+              copyToClipboard(readUrl);
+            }}
+            text="Copy"
+            iconProps={{ iconName: "Copy" }}
+          />
+          <PrimaryButton
+            onClick={() => {
+              window.open(readUrl, "_blank");
+            }}
+            text="Open"
+            iconProps={{ iconName: "OpenInNewWindow" }}
+          />
+        </Stack>
+      </Stack>
+    </>
+  );
+};

src/Explorer/Panes/AddCollectionPane.ts

@@ -680,6 +680,10 @@ export default class AddCollectionPane extends ContextualPaneBase {
     this.formWarnings("");
     this.databaseCreateNewShared(this.getSharedThroughputDefault());
     this.shouldCreateMongoWildcardIndex(this.container.isMongoIndexingEnabled());
+    if (!this.container.isServerlessEnabled()) {
+      this.isAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
+      this.isSharedAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
+    }
     if (this.isPreferredApiTable() && !databaseId) {
       databaseId = SharedConstants.CollectionCreation.TablesAPIDefaultDatabase;
     }
@@ -818,7 +822,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
     let indexingPolicy: DataModels.IndexingPolicy;
     let createMongoWildcardIndex: boolean;
     // todo - remove mongo indexing policy ticket # 616274
-    if (this.container.isPreferredApiMongoDB()) {
+    if (this.container.isPreferredApiMongoDB() && this.container.isEnableMongoCapabilityPresent()) {
       createMongoWildcardIndex = this.shouldCreateMongoWildcardIndex();
     } else if (this.showIndexingOptionsForSharedThroughput()) {
       if (this.useIndexingForSharedThroughput()) {

src/Explorer/Panes/CassandraAddCollectionPane.ts

@@ -289,6 +289,9 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
 
   public open() {
     super.open();
+    if (!this.container.isServerlessEnabled()) {
+      this.isAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
+    }
     const addCollectionPaneOpenMessage = {
       databaseAccountName: this.container.databaseAccount().name,
       defaultExperience: this.container.defaultExperience(),

src/Explorer/Panes/DeleteCollectionConfirmationPane.test.ts

@@ -1,142 +0,0 @@
-jest.mock("../../Common/dataAccess/deleteCollection");
-import * as ko from "knockout";
-import * as sinon from "sinon";
-import Q from "q";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import DeleteCollectionConfirmationPane from "./DeleteCollectionConfirmationPane";
-import DeleteFeedback from "../../Common/DeleteFeedback";
-import Explorer from "../Explorer";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { TreeNode } from "../../Contracts/ViewModels";
-import { deleteCollection } from "../../Common/dataAccess/deleteCollection";
-
-describe("Delete Collection Confirmation Pane", () => {
-  describe("Explorer.isLastCollection()", () => {
-    let explorer: Explorer;
-
-    beforeEach(() => {
-      explorer = new Explorer();
-    });
-
-    it("should be true if 1 database and 1 collection", () => {
-      let database = {} as ViewModels.Database;
-      database.collections = ko.observableArray<ViewModels.Collection>([{} as ViewModels.Collection]);
-      explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-      expect(explorer.isLastCollection()).toBe(true);
-    });
-
-    it("should be false if if 1 database and 2 collection", () => {
-      let database = {} as ViewModels.Database;
-      database.collections = ko.observableArray<ViewModels.Collection>([
-        {} as ViewModels.Collection,
-        {} as ViewModels.Collection,
-      ]);
-      explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-      expect(explorer.isLastCollection()).toBe(false);
-    });
-
-    it("should be false if 2 database and 1 collection each", () => {
-      let database = {} as ViewModels.Database;
-      database.collections = ko.observableArray<ViewModels.Collection>([{} as ViewModels.Collection]);
-      let database2 = {} as ViewModels.Database;
-      database2.collections = ko.observableArray<ViewModels.Collection>([{} as ViewModels.Collection]);
-      explorer.databases = ko.observableArray<ViewModels.Database>([database, database2]);
-      expect(explorer.isLastCollection()).toBe(false);
-    });
-
-    it("should be false if 0 databases", () => {
-      let database = {} as ViewModels.Database;
-      explorer.databases = ko.observableArray<ViewModels.Database>();
-      database.collections = ko.observableArray<ViewModels.Collection>();
-      expect(explorer.isLastCollection()).toBe(false);
-    });
-  });
-
-  describe("shouldRecordFeedback()", () => {
-    it("should return true if last collection and database does not have shared throughput else false", () => {
-      let fakeExplorer = new Explorer();
-      fakeExplorer.refreshAllDatabases = () => Q.resolve();
-
-      let pane = new DeleteCollectionConfirmationPane({
-        id: "deletecollectionconfirmationpane",
-        visible: ko.observable<boolean>(false),
-        container: fakeExplorer,
-      });
-
-      fakeExplorer.isLastCollection = () => true;
-      fakeExplorer.isSelectedDatabaseShared = () => false;
-      expect(pane.shouldRecordFeedback()).toBe(true);
-
-      fakeExplorer.isLastCollection = () => true;
-      fakeExplorer.isSelectedDatabaseShared = () => true;
-      expect(pane.shouldRecordFeedback()).toBe(false);
-
-      fakeExplorer.isLastCollection = () => false;
-      fakeExplorer.isSelectedDatabaseShared = () => false;
-      expect(pane.shouldRecordFeedback()).toBe(false);
-    });
-  });
-
-  describe("submit()", () => {
-    let telemetryProcessorSpy: sinon.SinonSpy;
-
-    beforeEach(() => {
-      (deleteCollection as jest.Mock).mockResolvedValue(undefined);
-      telemetryProcessorSpy = sinon.spy(TelemetryProcessor, "trace");
-    });
-
-    afterEach(() => {
-      telemetryProcessorSpy.restore();
-    });
-
-    it("it should log feedback if last collection and database is not shared", () => {
-      let selectedCollectionId = "testCol";
-      let fakeExplorer = {} as Explorer;
-      fakeExplorer.findSelectedCollection = () => {
-        return {
-          id: ko.observable<string>(selectedCollectionId),
-          rid: "test",
-        } as ViewModels.Collection;
-      };
-      fakeExplorer.selectedCollectionId = ko.computed<string>(() => selectedCollectionId);
-      fakeExplorer.isSelectedDatabaseShared = () => false;
-      const SubscriptionId = "testId";
-      const AccountName = "testAccount";
-      fakeExplorer.databaseAccount = ko.observable<DataModels.DatabaseAccount>({
-        id: SubscriptionId,
-        name: AccountName,
-      } as DataModels.DatabaseAccount);
-
-      fakeExplorer.defaultExperience = ko.observable<string>("DocumentDB");
-      fakeExplorer.isPreferredApiCassandra = ko.computed(() => {
-        return false;
-      });
-
-      fakeExplorer.selectedNode = ko.observable<TreeNode>();
-      fakeExplorer.isLastCollection = () => true;
-      fakeExplorer.isSelectedDatabaseShared = () => false;
-      fakeExplorer.refreshAllDatabases = () => Q.resolve();
-
-      let pane = new DeleteCollectionConfirmationPane({
-        id: "deletecollectionconfirmationpane",
-        visible: ko.observable<boolean>(false),
-        container: fakeExplorer as any,
-      });
-      pane.collectionIdConfirmation = ko.observable<string>(selectedCollectionId);
-      const Feedback = "my feedback";
-      pane.containerDeleteFeedback(Feedback);
-
-      return pane.submit().then(() => {
-        expect(telemetryProcessorSpy.called).toBe(true);
-        let deleteFeedback = new DeleteFeedback(SubscriptionId, AccountName, DataModels.ApiKind.SQL, Feedback);
-        expect(
-          telemetryProcessorSpy.calledWith(Action.DeleteCollection, ActionModifiers.Mark, {
-            message: JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback)),
-          })
-        ).toBe(true);
-      });
-    });
-  });
-});

src/Explorer/Panes/DeleteCollectionConfirmationPane.test.tsx

@@ -0,0 +1,174 @@
+jest.mock("../../Common/dataAccess/deleteCollection");
+jest.mock("../../Shared/Telemetry/TelemetryProcessor");
+import * as ko from "knockout";
+import { ApiKind, DatabaseAccount } from "../../Contracts/DataModels";
+import { Collection, Database } from "../../Contracts/ViewModels";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import { mount, ReactWrapper, shallow } from "enzyme";
+import React from "react";
+import DeleteFeedback from "../../Common/DeleteFeedback";
+import Explorer from "../Explorer";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { TreeNode } from "../../Contracts/ViewModels";
+import { deleteCollection } from "../../Common/dataAccess/deleteCollection";
+import { DeleteCollectionConfirmationPanel } from "./DeleteCollectionConfirmationPanel";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { updateUserContext } from "../../UserContext";
+
+describe("Delete Collection Confirmation Pane", () => {
+  describe("Explorer.isLastCollection()", () => {
+    let explorer: Explorer;
+
+    beforeEach(() => {
+      explorer = new Explorer();
+    });
+
+    it("should be true if 1 database and 1 collection", () => {
+      const database = {} as Database;
+      database.collections = ko.observableArray<Collection>([{} as Collection]);
+      explorer.databases = ko.observableArray<Database>([database]);
+      expect(explorer.isLastCollection()).toBe(true);
+    });
+
+    it("should be false if if 1 database and 2 collection", () => {
+      const database = {} as Database;
+      database.collections = ko.observableArray<Collection>([{} as Collection, {} as Collection]);
+      explorer.databases = ko.observableArray<Database>([database]);
+      expect(explorer.isLastCollection()).toBe(false);
+    });
+
+    it("should be false if 2 database and 1 collection each", () => {
+      const database = {} as Database;
+      database.collections = ko.observableArray<Collection>([{} as Collection]);
+      const database2 = {} as Database;
+      database2.collections = ko.observableArray<Collection>([{} as Collection]);
+      explorer.databases = ko.observableArray<Database>([database, database2]);
+      expect(explorer.isLastCollection()).toBe(false);
+    });
+
+    it("should be false if 0 databases", () => {
+      const database = {} as Database;
+      explorer.databases = ko.observableArray<Database>();
+      database.collections = ko.observableArray<Collection>();
+      expect(explorer.isLastCollection()).toBe(false);
+    });
+  });
+
+  describe("shouldRecordFeedback()", () => {
+    it("should return true if last collection and database does not have shared throughput else false", () => {
+      const fakeExplorer = new Explorer();
+      fakeExplorer.refreshAllDatabases = () => undefined;
+      fakeExplorer.isLastCollection = () => true;
+      fakeExplorer.isSelectedDatabaseShared = () => false;
+
+      const props = {
+        explorer: fakeExplorer,
+        closePanel: (): void => undefined,
+        openNotificationConsole: (): void => undefined,
+      };
+      const wrapper = shallow(<DeleteCollectionConfirmationPanel {...props} />);
+      expect(wrapper.exists(".deleteCollectionFeedback")).toBe(true);
+
+      props.explorer.isLastCollection = () => true;
+      props.explorer.isSelectedDatabaseShared = () => true;
+      wrapper.setProps(props);
+      expect(wrapper.exists(".deleteCollectionFeedback")).toBe(false);
+
+      props.explorer.isLastCollection = () => false;
+      props.explorer.isSelectedDatabaseShared = () => false;
+      wrapper.setProps(props);
+      expect(wrapper.exists(".deleteCollectionFeedback")).toBe(false);
+    });
+  });
+
+  describe("submit()", () => {
+    let wrapper: ReactWrapper;
+    const selectedCollectionId = "testCol";
+    const databaseId = "testDatabase";
+    const fakeExplorer = {} as Explorer;
+    fakeExplorer.findSelectedCollection = () => {
+      return {
+        id: ko.observable<string>(selectedCollectionId),
+        databaseId,
+        rid: "test",
+      } as Collection;
+    };
+    fakeExplorer.selectedCollectionId = ko.computed<string>(() => selectedCollectionId);
+    fakeExplorer.selectedNode = ko.observable<TreeNode>();
+    fakeExplorer.refreshAllDatabases = () => undefined;
+    fakeExplorer.isLastCollection = () => true;
+    fakeExplorer.isSelectedDatabaseShared = () => false;
+
+    beforeAll(() => {
+      updateUserContext({
+        databaseAccount: {
+          name: "testDatabaseAccountName",
+          properties: {
+            cassandraEndpoint: "testEndpoint",
+          },
+          id: "testDatabaseAccountId",
+        } as DatabaseAccount,
+        defaultExperience: DefaultAccountExperienceType.DocumentDB,
+      });
+      (deleteCollection as jest.Mock).mockResolvedValue(undefined);
+      (TelemetryProcessor.trace as jest.Mock).mockReturnValue(undefined);
+    });
+
+    beforeEach(() => {
+      const props = {
+        explorer: fakeExplorer,
+        closePanel: (): void => undefined,
+        openNotificationConsole: (): void => undefined,
+      };
+      wrapper = mount(<DeleteCollectionConfirmationPanel {...props} />);
+    });
+
+    it("should call delete collection", () => {
+      expect(wrapper).toMatchSnapshot();
+
+      expect(wrapper.exists("#confirmCollectionId")).toBe(true);
+      wrapper
+        .find("#confirmCollectionId")
+        .hostNodes()
+        .simulate("change", { target: { value: selectedCollectionId } });
+
+      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
+      wrapper.find("#sidePanelOkButton").hostNodes().simulate("click");
+      expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);
+
+      wrapper.unmount();
+    });
+
+    it("should record feedback", async () => {
+      expect(wrapper.exists("#confirmCollectionId")).toBe(true);
+      wrapper
+        .find("#confirmCollectionId")
+        .hostNodes()
+        .simulate("change", { target: { value: selectedCollectionId } });
+
+      expect(wrapper.exists("#deleteCollectionFeedbackInput")).toBe(true);
+      const feedbackText = "Test delete collection feedback text";
+      wrapper
+        .find("#deleteCollectionFeedbackInput")
+        .hostNodes()
+        .simulate("change", { target: { value: feedbackText } });
+
+      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
+      wrapper.find("#sidePanelOkButton").hostNodes().simulate("click");
+      expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);
+
+      const deleteFeedback = new DeleteFeedback(
+        "testDatabaseAccountId",
+        "testDatabaseAccountName",
+        ApiKind.SQL,
+        feedbackText
+      );
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(TelemetryProcessor.trace).toHaveBeenCalledWith(Action.DeleteCollection, ActionModifiers.Mark, {
+        message: JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback)),
+      });
+
+      wrapper.unmount();
+    });
+  });
+});

src/Explorer/Panes/DeleteCollectionConfirmationPane.ts

@@ -1,9 +1,7 @@
 import * as ko from "knockout";
-import Q from "q";
 import * as ViewModels from "../../Contracts/ViewModels";
 import * as Constants from "../../Common/Constants";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import { CassandraAPIDataClient } from "../Tables/TableDataClient";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { ContextualPaneBase } from "./ContextualPaneBase";
 import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
@@ -50,18 +48,7 @@ export default class DeleteCollectionConfirmationPane extends ContextualPaneBase
       dataExplorerArea: Constants.Areas.ContextualPane,
       paneTitle: this.title(),
     });
-    let promise: Promise<any>;
-    if (this.container.isPreferredApiCassandra()) {
-      promise = ((<CassandraAPIDataClient>this.container.tableDataClient).deleteTableOrKeyspace(
-        this.container.databaseAccount().properties.cassandraEndpoint,
-        this.container.databaseAccount().id,
-        `DROP TABLE ${selectedCollection.databaseId}.${selectedCollection.id()};`,
-        this.container
-      ) as unknown) as Promise<any>;
-    } else {
-      promise = deleteCollection(selectedCollection.databaseId, selectedCollection.id());
-    }
-    return promise.then(
+    return deleteCollection(selectedCollection.databaseId, selectedCollection.id()).then(
       () => {
         this.isExecuting(false);
         this.close();