Attempt to aquire token via popup if silent fails

.env.example

@@ -4,8 +4,6 @@ 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

@@ -11,9 +11,13 @@ src/Common/CosmosClient.test.ts
 src/Common/CosmosClient.ts
 src/Common/DataAccessUtilityBase.test.ts
 src/Common/DataAccessUtilityBase.ts
+src/Common/DeleteFeedback.ts
+src/Common/DocumentClientUtilityBase.ts
 src/Common/EditableUtility.ts
 src/Common/HashMap.test.ts
 src/Common/HashMap.ts
+src/Common/HeadersUtility.test.ts
+src/Common/HeadersUtility.ts
 src/Common/IteratorUtilities.test.ts
 src/Common/IteratorUtilities.ts
 src/Common/Logger.test.ts
@@ -26,6 +30,7 @@ src/Common/ObjectCache.test.ts
 src/Common/ObjectCache.ts
 src/Common/QueriesClient.ts
 src/Common/Splitter.ts
+src/Common/ThemeUtility.ts
 src/Common/UrlUtility.ts
 src/Config.ts
 src/Contracts/ActionContracts.ts
@@ -53,6 +58,8 @@ src/Explorer/ComponentRegisterer.test.ts
 src/Explorer/ComponentRegisterer.ts
 src/Explorer/ContextMenuButtonFactory.ts
 src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts
+src/Explorer/Controls/CommandButton/CommandButton.test.ts
+src/Explorer/Controls/CommandButton/CommandButton.ts
 src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts
 src/Explorer/Controls/DynamicList/DynamicList.test.ts
 src/Explorer/Controls/DynamicList/DynamicListComponent.ts
@@ -80,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.tsx
+src/Explorer/Explorer.ts
 src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.test.ts
 src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.ts
 src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.test.ts
@@ -88,6 +95,8 @@ src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
 src/Explorer/Graph/GraphExplorerComponent/EdgeInfoCache.ts
 src/Explorer/Graph/GraphExplorerComponent/GraphData.test.ts
 src/Explorer/Graph/GraphExplorerComponent/GraphData.ts
+src/Explorer/Graph/GraphExplorerComponent/GraphUtil.test.ts
+src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinClient.test.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinClient.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.test.ts
@@ -115,6 +124,7 @@ src/Explorer/Notebook/NotebookComponent/types.ts
 src/Explorer/Notebook/NotebookContainerClient.ts
 src/Explorer/Notebook/NotebookContentClient.ts
 src/Explorer/Notebook/NotebookContentItem.ts
+src/Explorer/Notebook/NotebookUtil.ts
 src/Explorer/OpenActions.test.ts
 src/Explorer/OpenActions.ts
 src/Explorer/OpenActionsStubs.ts
@@ -152,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/SplashScreen.test.ts
+src/Explorer/SplashScreen/SplashScreenComponentAdapter.test.ts
 src/Explorer/Tables/Constants.ts
 src/Explorer/Tables/DataTable/CacheBase.ts
 src/Explorer/Tables/DataTable/DataTableBindingManager.ts
@@ -160,6 +170,7 @@ src/Explorer/Tables/DataTable/DataTableBuilder.ts
 src/Explorer/Tables/DataTable/DataTableContextMenu.ts
 src/Explorer/Tables/DataTable/DataTableOperationManager.ts
 src/Explorer/Tables/DataTable/DataTableOperations.ts
+src/Explorer/Tables/DataTable/DataTableUtilities.ts
 src/Explorer/Tables/DataTable/DataTableViewModel.ts
 src/Explorer/Tables/DataTable/TableCommands.ts
 src/Explorer/Tables/DataTable/TableEntityCache.ts
@@ -168,6 +179,8 @@ src/Explorer/Tables/Entities.ts
 src/Explorer/Tables/QueryBuilder/ClauseGroup.ts
 src/Explorer/Tables/QueryBuilder/ClauseGroupViewModel.ts
 src/Explorer/Tables/QueryBuilder/CustomTimestampHelper.ts
+src/Explorer/Tables/QueryBuilder/DateTimeUtilities.test.ts
+src/Explorer/Tables/QueryBuilder/DateTimeUtilities.ts
 src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
 src/Explorer/Tables/QueryBuilder/QueryClauseViewModel.ts
 src/Explorer/Tables/QueryBuilder/QueryViewModel.ts
@@ -187,6 +200,7 @@ 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
@@ -260,15 +274,25 @@ src/Terminal/NotebookAppContracts.d.ts
 src/Terminal/index.ts
 src/TokenProviders/PortalTokenProvider.ts
 src/TokenProviders/TokenProviderFactory.ts
+src/Utils/AuthorizationUtils.test.ts
+src/Utils/AuthorizationUtils.ts
+src/Utils/AutoPilotUtils.test.ts
+src/Utils/AutoPilotUtils.ts
 src/Utils/DatabaseAccountUtils.test.ts
 src/Utils/DatabaseAccountUtils.ts
+src/Utils/JunoUtils.ts
+src/Utils/MessageValidation.ts
 src/Utils/NotebookConfigurationUtils.ts
 src/Utils/PricingUtils.test.ts
 src/Utils/QueryUtils.test.ts
 src/Utils/QueryUtils.ts
+src/Utils/StringUtils.test.ts
+src/Utils/StringUtils.ts
 src/applyExplorerBindings.ts
 src/global.d.ts
+src/quickstart.ts
 src/setupTests.ts
+src/workers/upload/definitions.ts
 src/workers/upload/index.ts
 src/Explorer/Controls/AccessibleElement/AccessibleElement.tsx
 src/Explorer/Controls/Accordion/AccordionComponent.tsx
@@ -353,7 +377,8 @@ 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/SplashScreen.tsx
+src/Explorer/SplashScreen/SplashScreenComponent.tsx
+src/Explorer/SplashScreen/SplashScreenComponentApdapter.tsx
 src/Explorer/Tabs/GalleryTab.tsx
 src/Explorer/Tabs/NotebookViewerTab.tsx
 src/Explorer/Tabs/TerminalTab.tsx

.github/workflows/ci.yml

@@ -9,20 +9,6 @@ on:
     branches:
       - master
 jobs:
-  codemetrics:
-    runs-on: ubuntu-latest
-    name: "Log Code Metrics"
-    if: github.ref == 'refs/heads/master'
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - run: npm ci
-      - run: node utils/codeMetrics.js
-        env:
-          CODE_METRICS_APP_ID: ${{ secrets.CODE_METRICS_APP_ID }}
   compile:
     runs-on: ubuntu-latest
     name: "Compile TypeScript"
@@ -143,71 +129,45 @@ jobs:
         env:
           NODE_TLS_REJECT_UNAUTHORIZED: 0
   endtoendhosted:
-    name: "End to End Tests"
-    needs: [cleanupaccounts]
+    name: "End to End Hosted Tests"
+    needs: [lint, format, compile, unittest]
     runs-on: ubuntu-latest
-    env:
-      NODE_TLS_REJECT_UNAUTHORIZED: 0
-      PORTAL_RUNNER_SUBSCRIPTION: ${{ secrets.PORTAL_RUNNER_SUBSCRIPTION }}
-      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 }}
-      PORTAL_RUNNER_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
-      MONGO_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
-      CASSANDRA_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_CASSANDRA }}
-      TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
-      DATA_EXPLORER_ENDPOINT: "https://localhost:1234/hostedExplorer.html"
-    strategy:
-      matrix:
-        test-file:
-          - ./test/cassandra/container.spec.ts
-          - ./test/mongo/mongoIndexPolicy.spec.ts
-          - ./test/notebooks/uploadAndOpenNotebook.spec.ts
-          - ./test/selfServe/selfServeExample.spec.ts
-          - ./test/sql/container.spec.ts
-          - ./test/sql/resourceToken.spec.ts
-          - ./test/tables/container.spec.ts
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
-      - run: npm ci
-      - run: npm start &
-      - run: node utils/cleanupDBs.js
-      - run: npm run wait-for-server
-      - name: ${{ matrix['test-file'] }}
-        run: npx jest -c ./jest.config.e2e.js --detectOpenHandles ${{ matrix['test-file'] }}
+          node-version: 12.x
+      - name: End to End Hosted Tests
+        run: |
+          npm ci
+          npm start &
+          npm run wait-for-server
+          npm run test:e2e
         shell: bash
+        env:
+          NODE_TLS_REJECT_UNAUTHORIZED: 0
+          PORTAL_RUNNER_SUBSCRIPTION: ${{ secrets.PORTAL_RUNNER_SUBSCRIPTION }}
+          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 }}
+          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 }}
+          PORTAL_RUNNER_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
+          MONGO_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
+          CASSANDRA_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_CASSANDRA }}
+          TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
+          DATA_EXPLORER_ENDPOINT: "https://localhost:1234/hostedExplorer.html"
       - uses: actions/upload-artifact@v2
         if: failure()
         with:
           name: screenshots
           path: failed-*
-  cleanupaccounts:
-    name: "Cleanup Test Database Accounts"
-    runs-on: ubuntu-latest
-    env:
-      NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
-      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
-        with:
-          node-version: 14.x
-      - run: npm ci
-      - run: node utils/cleanupDBs.js
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [build]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -223,7 +183,7 @@ jobs:
       - run: cp ./configs/prod.json config.json
       - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "GitHub" -Password "$AZURE_DEVOPS_PAT"
       - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
-      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
+      - run: nuget push -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
       - uses: actions/upload-artifact@v2
         name: packages
         with:
@@ -231,7 +191,7 @@ jobs:
   nugetmpac:
     name: Publish Nuget MPAC
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [build]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -248,7 +208,7 @@ jobs:
       - run: sed -i 's/Azure.Cosmos.DB.Data.Explorer/Azure.Cosmos.DB.Data.Explorer.MPAC/g' DataExplorer.nuspec
       - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "GitHub" -Password "$AZURE_DEVOPS_PAT"
       - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
-      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
+      - run: nuget push -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
       - uses: actions/upload-artifact@v2
         name: packages
         with:

CODING_GUIDELINES.md

@@ -1,194 +0,0 @@
-# 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,7 +13,6 @@ 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:
@@ -21,3 +20,33 @@ 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

@@ -1,3 +0,0 @@
-<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,13 +57,6 @@
 
 @FocusColor: #605e5c;
 
-@GalleryBackgroundColor: #fdfdfd;
-
-//Icons
-@InfoIconColor: #0072c6;
-@WarningIconColor: #db7500;
-@ErrorIconColor: #b91f26;
-
 /******************************************************************************
                                 METRICS
 /******************************************************************************/

less/documentDB.less

@@ -1523,21 +1523,6 @@ 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;
 }
@@ -1709,7 +1694,6 @@ input::-webkit-calendar-picker-indicator {
   display: flex;
   flex-direction: column;
   height: 100%;
-  max-height: 100vh;
 }
 
 .contextual-pane .paneErrorDetailsContainer {
@@ -2099,7 +2083,7 @@ a:link {
   display: flex;
   flex: 1 1 auto;
   overflow-x: auto;
-  overflow-y: auto;
+  overflow-y: hidden;
   height: 100%;
 }
 
@@ -3043,45 +3027,3 @@ 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

@@ -8,13 +8,12 @@
     "@azure/cosmos": "3.9.0",
     "@azure/cosmos-language-service": "0.0.5",
     "@azure/identity": "1.2.1",
-    "@azure/ms-rest-nodeauth": "3.0.7",
     "@babel/plugin-proposal-class-properties": "7.12.1",
     "@babel/plugin-proposal-decorators": "7.12.12",
-    "@jupyterlab/services": "6.0.2",
-    "@jupyterlab/terminal": "3.0.3",
+    "@jupyterlab/services": "6.0.0-rc.2",
+    "@jupyterlab/terminal": "3.0.0-rc.2",
     "@microsoft/applicationinsights-web": "2.5.9",
-    "@nteract/commutable": "7.4.2",
+    "@nteract/commutable": "7.3.2",
     "@nteract/connected-components": "6.8.2",
     "@nteract/core": "15.1.0",
     "@nteract/data-explorer": "8.0.3",
@@ -50,7 +49,6 @@
     "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",
@@ -66,9 +64,6 @@
     "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",
@@ -77,7 +72,6 @@
     "knockout": "3.5.1",
     "mkdirp": "1.0.4",
     "monaco-editor": "0.18.1",
-    "ms": "2.1.3",
     "msal": "1.4.4",
     "object.entries": "1.1.0",
     "office-ui-fabric-react": "7.134.1",
@@ -92,7 +86,6 @@
     "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",
@@ -131,7 +124,7 @@
     "@types/prop-types": "15.5.8",
     "@types/puppeteer": "3.0.1",
     "@types/q": "1.5.1",
-    "@types/react": "17.0.0",
+    "@types/react": "16.9.56",
     "@types/react-dom": "17.0.0",
     "@types/react-notification-system": "0.2.39",
     "@types/react-redux": "7.1.7",
@@ -158,7 +151,6 @@
     "eslint-plugin-prefer-arrow": "1.2.2",
     "eslint-plugin-react-hooks": "4.2.0",
     "expose-loader": "0.7.5",
-    "fast-glob": "3.2.5",
     "file-loader": "2.0.0",
     "fs-extra": "7.0.0",
     "html-loader": "0.5.5",

sampleData/gremlinSampleData.json

@@ -3,7 +3,6 @@
   "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,6 +105,8 @@ 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";
@@ -117,9 +119,7 @@ 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/HeadersUtility.ts

@@ -1,5 +1,28 @@
+import * as Constants from "./Constants";
+
 import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
 
+// x-ms-resource-quota: databases = 100; collections = 5000; users = 500000; permissions = 2000000;
+export function getQuota(responseHeaders: any): any {
+  return responseHeaders && responseHeaders[Constants.HttpHeaders.resourceQuota]
+    ? parseStringIntoObject(responseHeaders[Constants.HttpHeaders.resourceQuota])
+    : null;
+}
+
 export function shouldEnableCrossPartitionKey(): boolean {
   return LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true";
 }
+
+function parseStringIntoObject(resourceString: string) {
+  var entityObject: any = {};
+
+  if (resourceString) {
+    var entitiesArray: string[] = resourceString.split(";");
+    for (var i: any = 0; i < entitiesArray.length; i++) {
+      var entity: string[] = entitiesArray[i].split("=");
+      entityObject[entity[0]] = entity[1];
+    }
+  }
+
+  return entityObject;
+}

src/Common/MongoProxyClient.test.ts

@@ -220,6 +220,7 @@ describe("MongoProxyClient", () => {
   describe("getEndpoint", () => {
     beforeEach(() => {
       resetConfigContext();
+      delete window.authType;
       updateUserContext({
         databaseAccount,
       });
@@ -240,9 +241,7 @@ describe("MongoProxyClient", () => {
     });
 
     it("returns a guest endpoint", () => {
-      updateUserContext({
-        authType: AuthType.EncryptedToken,
-      });
+      window.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 (userContext.authType === AuthType.EncryptedToken) {
+  if (window.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 (userContext.authType === AuthType.EncryptedToken) {
+  if (window.authType === AuthType.EncryptedToken) {
     url = url.replace("api/mongo", "api/guest/mongo");
   }
   return url;

src/Common/ThemeUtility.ts

@@ -2,16 +2,18 @@
  * Copyright (C) Microsoft Corporation. All rights reserved.
  *----------------------------------------------------------*/
 
-export function getMonacoTheme(theme: string): string {
-  switch (theme) {
-    case "default":
-    case "hc-white":
-      return "vs";
-    case "dark":
-      return "vs-dark";
-    case "hc-black":
-      return "hc-black";
-    default:
-      return "vs";
+export default class ThemeUtility {
+  public static getMonacoTheme(theme: string): string {
+    switch (theme) {
+      case "default":
+      case "hc-white":
+        return "vs";
+      case "dark":
+        return "vs-dark";
+      case "hc-black":
+        return "hc-black";
+      default:
+        return "vs";
+    }
   }
 }

src/Common/dataAccess/createCollection.test.ts

@@ -27,17 +27,13 @@ describe("createCollection", () => {
   });
 
   it("should call ARM if logged in with AAD", async () => {
-    updateUserContext({
-      authType: AuthType.AAD,
-    });
+    window.authType = AuthType.AAD;
     await createCollection(createCollectionParams);
     expect(armRequest).toHaveBeenCalled();
   });
 
   it("should call SDK if not logged in with non-AAD method", async () => {
-    updateUserContext({
-      authType: AuthType.MasterKey,
-    });
+    window.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 (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
+    if (window.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 (userContext.authType === AuthType.AAD && !userContext.useSDKOperations
+    const database: DataModels.Database = await (window.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 (
-      userContext.authType === AuthType.AAD &&
+      window.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 (
-      userContext.authType === AuthType.AAD &&
+      window.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 (
-      userContext.authType === AuthType.AAD &&
+      window.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
     ) {

src/Common/dataAccess/deleteCollection.test.ts

@@ -20,17 +20,13 @@ describe("deleteCollection", () => {
   });
 
   it("should call ARM if logged in with AAD", async () => {
-    updateUserContext({
-      authType: AuthType.AAD,
-    });
+    window.authType = AuthType.AAD;
     await deleteCollection("database", "collection");
     expect(armRequest).toHaveBeenCalled();
   });
 
   it("should call SDK if not logged in with non-AAD method", async () => {
-    updateUserContext({
-      authType: AuthType.MasterKey,
-    });
+    window.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 (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
+    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
       await deleteCollectionWithARM(databaseId, collectionId);
     } else {
       await client().database(databaseId).container(collectionId).delete();

src/Common/dataAccess/deleteDatabase.test.ts

@@ -20,17 +20,13 @@ describe("deleteDatabase", () => {
   });
 
   it("should call ARM if logged in with AAD", async () => {
-    updateUserContext({
-      authType: AuthType.AAD,
-    });
+    window.authType = AuthType.AAD;
     await deleteDatabase("database");
     expect(armRequest).toHaveBeenCalled();
   });
 
   it("should call SDK if not logged in with non-AAD method", async () => {
-    updateUserContext({
-      authType: AuthType.MasterKey,
-    });
+    window.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 (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
+    if (window.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 (
-      userContext.authType === AuthType.AAD &&
+      window.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 (
-      userContext.authType === AuthType.AAD &&
+      window.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 (
-      userContext.authType === AuthType.AAD &&
+      window.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 (userContext.authType !== AuthType.AAD) {
+  if (window.authType !== AuthType.AAD) {
     return undefined;
   }
 
@@ -76,7 +76,7 @@ export const getCollectionUsageSizeInKB = async (databaseName: string, container
     return dataUsageSizeInKb + indexUsageSizeInKb;
   } catch (error) {
     handleError(error, "getCollectionUsageSize");
-    return undefined;
+    throw error;
   }
 };
 

src/Common/dataAccess/getIndexTransformationProgress.ts

@@ -3,10 +3,9 @@ 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 (userContext.authType !== AuthType.AAD) {
+  if (window.authType !== AuthType.AAD) {
     return undefined;
   }
   let indexTransformationPercentage: number;

src/Common/dataAccess/readCollection.test.ts

@@ -9,7 +9,6 @@ import { updateUserContext } from "../../UserContext";
 describe("readCollection", () => {
   beforeAll(() => {
     updateUserContext({
-      authType: AuthType.ResourceToken,
       databaseAccount: {
         name: "test",
       } as DatabaseAccount,
@@ -18,6 +17,7 @@ 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 (
-      userContext.authType === AuthType.AAD &&
+      window.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience !== DefaultAccountExperienceType.Table
     ) {

src/Common/dataAccess/readCollections.test.ts

@@ -19,17 +19,13 @@ describe("readCollections", () => {
   });
 
   it("should call ARM if logged in with AAD", async () => {
-    updateUserContext({
-      authType: AuthType.AAD,
-    });
+    window.authType = AuthType.AAD;
     await readCollections("database");
     expect(armRequest).toHaveBeenCalled();
   });
 
   it("should call SDK if not logged in with non-AAD method", async () => {
-    updateUserContext({
-      authType: AuthType.MasterKey,
-    });
+    window.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 (
-      userContext.authType === AuthType.AAD &&
+      window.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 (
-      userContext.authType === AuthType.AAD &&
+      window.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience !== DefaultAccountExperienceType.Table
     ) {

src/Common/dataAccess/readDatabases.test.ts

@@ -19,17 +19,13 @@ describe("readDatabases", () => {
   });
 
   it("should call ARM if logged in with AAD", async () => {
-    updateUserContext({
-      authType: AuthType.AAD,
-    });
+    window.authType = AuthType.AAD;
     await readDatabases();
     expect(armRequest).toHaveBeenCalled();
   });
 
   it("should call SDK if not logged in with non-AAD method", async () => {
-    updateUserContext({
-      authType: AuthType.MasterKey,
-    });
+    window.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 (
-      userContext.authType === AuthType.AAD &&
+      window.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 (userContext.authType !== AuthType.AAD) {
+  if (window.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 (
-      userContext.authType === AuthType.AAD &&
+      window.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 (
-      userContext.authType === AuthType.AAD &&
+      window.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 (
-      userContext.authType === AuthType.AAD &&
+      window.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
     ) {

src/Common/dataAccess/updateCollection.ts

@@ -41,7 +41,7 @@ export async function updateCollection(
 
   try {
     if (
-      userContext.authType === AuthType.AAD &&
+      window.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 (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
+    if (window.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 (
-      userContext.authType === AuthType.AAD &&
+      window.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 (
-      userContext.authType === AuthType.AAD &&
+      window.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 (
-      userContext.authType === AuthType.AAD &&
+      window.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
       userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
     ) {

src/ConfigContext.ts

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

src/Contracts/ExplorerContracts.ts

@@ -33,6 +33,7 @@ export enum MessageTypes {
   CreateWorkspace,
   CreateSparkPool,
   RefreshDatabaseAccount,
+  InitTestExplorer,
 }
 
 export { Versions, ActionContracts, Diagnostics };

src/Contracts/ViewModels.ts

@@ -5,6 +5,7 @@ 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";
@@ -91,7 +92,6 @@ 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(): void;
+  onNewQueryClick(source: any, event: MouseEvent, queryText?: string): void;
+  expandCollection(): Q.Promise<any>;
   collapseCollection(): void;
   getDatabase(): Database;
 }
@@ -138,13 +138,14 @@ 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[]>;
@@ -175,10 +176,9 @@ export interface Collection extends CollectionBase {
 
   onDragOver(source: Collection, event: { originalEvent: DragEvent }): void;
   onDrop(source: Collection, event: { originalEvent: DragEvent }): void;
-  uploadFiles(fileList: FileList): Promise<UploadDetails>;
+  uploadFiles(fileList: FileList): Q.Promise<UploadDetails>;
 
   getLabel(): string;
-  getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
 }
 
 /**
@@ -293,6 +293,10 @@ 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>;
@@ -355,12 +359,11 @@ export enum CollectionTabKind {
   Notebook = 13 /* Deprecated */,
   Terminal = 14,
   NotebookV2 = 15,
-  SparkMasterTab = 16 /* Deprecated */,
+  SparkMasterTab = 16,
   Gallery = 17,
   NotebookViewer = 18,
   Schema = 19,
-  CollectionSettingsV2 = 20,
-  DatabaseSettingsV2 = 21,
+  SettingsV2 = 20,
 }
 
 export enum TerminalKind {
@@ -371,20 +374,20 @@ export enum TerminalKind {
 
 export interface DataExplorerInputsFrame {
   databaseAccount: any;
-  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;
+  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;
   loadDatabaseAccountTimestamp?: number;
   sharedThroughputMinimum?: number;
   sharedThroughputMaximum?: number;

src/Explorer/ComponentRegisterer.test.ts

@@ -20,6 +20,10 @@ 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);
   });
@@ -41,8 +45,7 @@ describe("Component Registerer", () => {
   });
 
   it("should register settings-tab-v2 component", () => {
-    expect(ko.components.isRegistered("database-settings-tab-v2")).toBe(true);
-    expect(ko.components.isRegistered("collection-settings-tab-v2")).toBe(true);
+    expect(ko.components.isRegistered("settings-tab-v2")).toBe(true);
   });
 
   it("should register query-tab component", () => {
@@ -65,6 +68,10 @@ 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,6 +1,7 @@
 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";
@@ -16,6 +17,7 @@ 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());
@@ -29,7 +31,7 @@ ko.components.register("mongo-documents-tab", new TabComponents.MongoDocumentsTa
 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("collection-settings-tab-v2", new TabComponents.SettingsTabV2());
+ko.components.register("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());
@@ -37,12 +39,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());
@@ -64,6 +66,7 @@ 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,7 +112,10 @@ export class ResourceTreeContextMenuButtonFactory {
 
     items.push({
       iconSrc: DeleteCollectionIcon,
-      onClick: () => container.openDeleteCollectionConfirmationPane(),
+      onClick: () => {
+        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        selectedCollection && selectedCollection.onDeleteCollectionContextMenuClick(selectedCollection, null);
+      },
       label: container.deleteCollectionText(),
       styleClass: "deleteCollectionMenuItem",
     });

src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts

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

@@ -0,0 +1,44 @@
+<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/CommandButton/CommandButtonComponent.tsx

@@ -1,4 +1,4 @@
-import * as StringUtils from "../../../Utils/StringUtils";
+import { StringUtils } from "../../../Utils/StringUtils";
 import { KeyCodes } from "../../../Common/Constants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";

src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx

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

src/Explorer/Controls/DialogReactComponent/DialogComponentAdapter.tsx

@@ -0,0 +1,16 @@
+/**
+ * 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,7 +47,13 @@ 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,6 +149,12 @@ 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"
@@ -157,8 +163,8 @@ exports[`Feature panel renders all flags 1`] = `
         />
         <StyledCheckboxBase
           checked={false}
-          key="feature.canexceedmaximumvalue"
-          label="Can exceed max value"
+          key="feature.enableLinkInjection"
+          label="Enable Injecting Notebook Viewer Link into the first cell"
           onChange={[Function]}
         />
       </Stack>
@@ -166,6 +172,12 @@ 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/GitHub/AddRepoComponent.tsx

@@ -74,6 +74,8 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
 
   private onAddRepoButtonClick = async (): Promise<void> => {
     const startKey: number = TelemetryProcessor.traceStart(Action.NotebooksGitHubManualRepoAdd, {
+      databaseAccountName: this.props.container.databaseAccount() && this.props.container.databaseAccount().name,
+      defaultExperience: this.props.container.defaultExperience && this.props.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Notebook,
     });
     let enteredUrl = this.state.textFieldValue;
@@ -103,6 +105,8 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
         TelemetryProcessor.traceSuccess(
           Action.NotebooksGitHubManualRepoAdd,
           {
+            databaseAccountName: this.props.container.databaseAccount() && this.props.container.databaseAccount().name,
+            defaultExperience: this.props.container.defaultExperience && this.props.container.defaultExperience(),
             dataExplorerArea: Constants.Areas.Notebook,
           },
           startKey
@@ -117,6 +121,8 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
     TelemetryProcessor.traceFailure(
       Action.NotebooksGitHubManualRepoAdd,
       {
+        databaseAccountName: this.props.container.databaseAccount() && this.props.container.databaseAccount().name,
+        defaultExperience: this.props.container.defaultExperience && this.props.container.defaultExperience(),
         dataExplorerArea: Constants.Areas.Notebook,
         error: AddRepoComponent.TextFieldErrorMessage,
       },

src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx

@@ -4,7 +4,7 @@
 
 import * as React from "react";
 import * as DataModels from "../../../Contracts/DataModels";
-import * as StringUtils from "../../../Utils/StringUtils";
+import { StringUtils } from "../../../Utils/StringUtils";
 import { userContext } from "../../../UserContext";
 import { TerminalQueryParams } from "../../../Common/Constants";
 import { handleError } from "../../../Common/ErrorHandlingUtils";

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

@@ -13,13 +13,12 @@ import {
   LinkBase,
   Separator,
   TooltipHost,
-  Spinner,
-  SpinnerSize,
 } from "office-ui-fabric-react";
 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;
@@ -31,29 +30,17 @@ export interface GalleryCardComponentProps {
   onFavoriteClick: () => void;
   onUnfavoriteClick: () => void;
   onDownloadClick: () => void;
-  onDeleteClick: (beforeDelete: () => void, afterDelete: () => void) => void;
+  onDeleteClick: () => void;
 }
 
-interface GalleryCardComponentState {
-  isDeletingPublishedNotebook: boolean;
-}
-
-export class GalleryCardComponent extends React.Component<GalleryCardComponentProps, GalleryCardComponentState> {
+export class GalleryCardComponent extends React.Component<GalleryCardComponentProps> {
   public static readonly CARD_WIDTH = 256;
   private static readonly cardImageHeight = 144;
   public static readonly cardHeightToWidthRatio =
     GalleryCardComponent.cardImageHeight / GalleryCardComponent.CARD_WIDTH;
-  private static readonly cardDescriptionMaxChars = 80;
+  private static readonly cardDescriptionMaxChars = 88;
   private static readonly cardItemGapBig = 10;
   private static readonly cardItemGapSmall = 8;
-  private static readonly cardDeleteSpinnerHeight = 360;
-
-  constructor(props: GalleryCardComponentProps) {
-    super(props);
-    this.state = {
-      isDeletingPublishedNotebook: false,
-    };
-  }
 
   public render(): JSX.Element {
     const cardButtonsVisible = this.props.isFavorite !== undefined || this.props.showDownload || this.props.showDelete;
@@ -67,132 +54,102 @@ 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 }}
         onClick={(event) => this.onClick(event, this.props.onClick)}
       >
-        {this.state.isDeletingPublishedNotebook && (
-          <Card.Item tokens={{ padding: GalleryCardComponent.cardItemGapBig }}>
-            <Spinner
-              size={SpinnerSize.large}
-              label={`Deleting '${cardTitle}'`}
-              styles={{ root: { height: GalleryCardComponent.cardDeleteSpinnerHeight } }}
-            />
-          </Card.Item>
-        )}
-        {!this.state.isDeletingPublishedNotebook && (
-          <>
-            <Card.Item tokens={{ padding: GalleryCardComponent.cardItemGapBig }}>
-              <Persona
-                imageUrl={this.props.data.isSample && CosmosDBLogo}
-                text={this.props.data.author}
-                secondaryText={dateString}
-              />
-            </Card.Item>
+        <Card.Item tokens={{ padding: GalleryCardComponent.cardItemGapBig }}>
+          <Persona
+            imageUrl={this.props.data.isSample && CosmosDBLogo}
+            text={this.props.data.author}
+            secondaryText={dateString}
+          />
+        </Card.Item>
 
-            <Card.Item>
-              <Image
-                src={this.props.data.thumbnailUrl}
-                width={GalleryCardComponent.CARD_WIDTH}
-                height={GalleryCardComponent.cardImageHeight}
-                imageFit={ImageFit.cover}
-                alt={`${cardTitle} cover image`}
-              />
-            </Card.Item>
+        <Card.Item>
+          <Image
+            src={this.props.data.thumbnailUrl}
+            width={GalleryCardComponent.CARD_WIDTH}
+            height={GalleryCardComponent.cardImageHeight}
+            imageFit={ImageFit.cover}
+            alt={`${cardTitle} cover image`}
+          />
+        </Card.Item>
 
-            <Card.Section styles={{ root: { padding: GalleryCardComponent.cardItemGapBig } }}>
-              <Text variant="small" nowrap>
-                {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
-                styles={{
-                  root: {
-                    fontWeight: FontWeights.semibold,
-                    paddingTop: GalleryCardComponent.cardItemGapSmall,
-                    paddingBottom: GalleryCardComponent.cardItemGapSmall,
-                  },
-                }}
-                nowrap
-              >
-                {cardTitle}
-              </Text>
-
-              <Text variant="small" styles={{ root: { height: 36 } }}>
-                {this.renderTruncatedDescription()}
-              </Text>
-
-              <span>
-                {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())}
+        <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>
-            </Card.Section>
+            ))}
+          </Text>
 
-            {cardButtonsVisible && (
-              <Card.Section
-                styles={{
-                  root: {
-                    marginLeft: GalleryCardComponent.cardItemGapBig,
-                    marginRight: GalleryCardComponent.cardItemGapBig,
-                  },
-                }}
-              >
-                <Separator styles={{ root: { padding: 0, height: 1 } }} />
+          <Text
+            styles={{
+              root: {
+                fontWeight: FontWeights.semibold,
+                paddingTop: GalleryCardComponent.cardItemGapSmall,
+                paddingBottom: GalleryCardComponent.cardItemGapSmall,
+              },
+            }}
+            nowrap
+          >
+            {cardTitle}
+          </Text>
 
-                <span>
-                  {this.props.isFavorite !== undefined &&
-                    this.generateIconButtonWithTooltip(
-                      this.props.isFavorite ? "HeartFill" : "Heart",
-                      this.props.isFavorite ? "Unfavorite" : "Favorite",
-                      "left",
-                      this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick
-                    )}
+          <Text variant="small" styles={{ root: { height: 36 } }}>
+            {this.props.data.description.substr(0, GalleryCardComponent.cardDescriptionMaxChars)}
+          </Text>
 
-                  {this.props.showDownload &&
-                    this.generateIconButtonWithTooltip("Download", "Download", "left", this.props.onDownloadClick)}
+          <span>
+            {this.generateIconText("RedEye", this.props.data.views.toString())}
+            {this.generateIconText("Download", this.props.data.downloads.toString())}
+            {this.props.isFavorite !== undefined &&
+              this.generateIconText("Heart", this.props.data.favorites.toString())}
+          </span>
+        </Card.Section>
 
-                  {this.props.showDelete &&
-                    this.generateIconButtonWithTooltip("Delete", "Remove", "right", () =>
-                      this.props.onDeleteClick(
-                        () => this.setState({ isDeletingPublishedNotebook: true }),
-                        () => this.setState({ isDeletingPublishedNotebook: false })
-                      )
-                    )}
-                </span>
-              </Card.Section>
-            )}
-          </>
+        {cardButtonsVisible && (
+          <Card.Section
+            styles={{
+              root: {
+                marginLeft: GalleryCardComponent.cardItemGapBig,
+                marginRight: GalleryCardComponent.cardItemGapBig,
+              },
+            }}
+          >
+            <Separator styles={{ root: { padding: 0, height: 1 } }} />
+
+            <span>
+              {this.props.isFavorite !== undefined &&
+                this.generateIconButtonWithTooltip(
+                  this.props.isFavorite ? "HeartFill" : "Heart",
+                  this.props.isFavorite ? "Unlike" : "Like",
+                  "left",
+                  this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick
+                )}
+
+              {this.props.showDownload &&
+                this.generateIconButtonWithTooltip("Download", "Download", "left", this.props.onDownloadClick)}
+
+              {this.props.showDelete &&
+                this.generateIconButtonWithTooltip("Delete", "Remove", "right", this.props.onDeleteClick)}
+            </span>
+          </Card.Section>
         )}
       </Card>
     );
   }
 
-  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: "#605E5C", paddingRight: GalleryCardComponent.cardItemGapSmall } }}>
+      <Text
+        variant="tiny"
+        styles={{ root: { color: StyleConstants.BaseMedium, paddingRight: GalleryCardComponent.cardItemGapSmall } }}
+      >
         <Icon iconName={iconName} styles={{ root: { verticalAlign: "middle" } }} /> {text}
       </Text>
     );

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

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

src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx

@@ -2,9 +2,7 @@ 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 { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
-import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import { handleError } from "../../../Common/ErrorHandlingUtils";
 
 export interface CodeOfConductComponentProps {
   junoClient: JunoClient;
@@ -16,11 +14,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);
@@ -29,34 +27,23 @@ export class CodeOfConductComponent extends React.Component<CodeOfConductCompone
       readCodeOfConduct: false,
     };
 
-    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 };
+    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 };
   }
 
   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");
     }
   }
@@ -66,11 +53,6 @@ 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>
@@ -87,6 +69,10 @@ 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>
 
@@ -101,7 +87,7 @@ export class CodeOfConductComponent extends React.Component<CodeOfConductCompone
                 fontSize: 12,
               },
             }}
-            label="I have read and accept the code of conduct."
+            label="I have read and accepted the code of conduct and privacy statement"
             onChange={this.onChangeCheckbox}
           />
         </Stack.Item>

src/Explorer/Controls/NotebookGallery/GalleryAndNotebookViewerComponentAdapter.tsx

@@ -7,20 +7,14 @@ 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 key={this.key} {...this.props} />;
-  }
-
-  public reset(): void {
-    this.key = `GalleryAndNotebookViewerComponent-${Date.now()}`;
+    return <GalleryAndNotebookViewerComponent {...this.props} />;
   }
 
   public triggerRender(): void {

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less

@@ -6,16 +6,4 @@
   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,21 +9,17 @@ 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 { Dialog, DialogProps } from "../Dialog";
+import { DialogComponent, DialogProps } from "../DialogReactComponent/DialogComponent";
 import { GalleryCardComponent, GalleryCardComponentProps } from "./Cards/GalleryCardComponent";
 import "./GalleryViewerComponent.less";
 import { HttpStatusCodes } from "../../../Common/Constants";
@@ -31,8 +27,6 @@ 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;
@@ -47,8 +41,8 @@ export interface GalleryViewerComponentProps {
 }
 
 export enum GalleryTab {
-  PublicGallery,
   OfficialSamples,
+  PublicGallery,
   Favorites,
   Published,
 }
@@ -70,8 +64,6 @@ interface GalleryViewerComponentState {
   searchText: string;
   dialogProps: DialogProps;
   isCodeOfConductAccepted: boolean;
-  isFetchingPublishedNotebooks: boolean;
-  isFetchingFavouriteNotebooks: boolean;
 }
 
 interface GalleryTabInfo {
@@ -82,24 +74,18 @@ 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 = "My favorites";
-  public static readonly PublishedTitle = "My published work";
+  public static readonly FavoritesTitle = "Liked";
+  public static readonly PublishedTitle = "Your published work";
 
   private static readonly rowsPerPage = 5;
 
   private static readonly mostViewedText = "Most viewed";
   private static readonly mostDownloadedText = "Most downloaded";
-  private static readonly mostFavoritedText = "Most favorited";
+  private static readonly mostFavoritedText = "Most liked";
   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[];
@@ -121,8 +107,6 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
       searchText: props.searchText,
       dialogProps: undefined,
       isCodeOfConductAccepted: undefined,
-      isFetchingFavouriteNotebooks: true,
-      isFetchingPublishedNotebooks: true,
     };
 
     this.sortingOptions = [
@@ -139,30 +123,37 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
         text: GalleryViewerComponent.mostRecentText,
       },
     ];
-    this.sortingOptions.push({
-      key: SortBy.MostFavorited,
-      text: GalleryViewerComponent.mostFavoritedText,
-    });
+    if (this.props.container?.isGalleryPublishEnabled()) {
+      this.sortingOptions.push({
+        key: SortBy.MostFavorited,
+        text: GalleryViewerComponent.mostFavoritedText,
+      });
+    }
 
     this.loadTabContent(this.state.selectedTab, this.state.searchText, this.state.sortBy, false);
-    this.loadFavoriteNotebooks(this.state.searchText, this.state.sortBy, false); // Need this to show correct favorite button state
+    if (this.props.container?.isGalleryPublishEnabled()) {
+      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)];
 
-    const tabs: GalleryTabInfo[] = [
-      this.createPublicGalleryTab(
-        GalleryTab.PublicGallery,
-        this.state.publicNotebooks,
-        this.state.isCodeOfConductAccepted
-      ),
-      this.createSamplesTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks),
-    ];
-
-    if (this.props.container) {
+    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.createPublishedNotebooksTab(GalleryTab.Published, this.state.publishedNotebooks));
+
+      // 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));
+      }
     }
 
     const pivotProps: IPivotProps = {
@@ -188,63 +179,16 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
       <div className="galleryContainer">
         <Pivot {...pivotProps}>{pivotItems}</Pivot>
 
-        {this.state.dialogProps && <Dialog {...this.state.dialogProps} />}
+        {this.state.dialogProps && <DialogComponent {...this.state.dialogProps} />}
       </div>
     );
   }
 
-  private traceViewGallery = (): void => {
-    if (!this.viewGalleryTraced) {
-      this.viewGalleryTraced = true;
-      trace(Action.NotebooksGalleryViewGallery);
-    }
-
-    switch (this.state.selectedTab) {
-      case GalleryTab.PublicGallery:
-        if (!this.viewPublicGalleryTraced) {
-          this.resetViewGalleryTabTracedFlags();
-          this.viewPublicGalleryTraced = true;
-          trace(Action.NotebooksGalleryViewPublicGallery);
-        }
-        break;
-      case GalleryTab.OfficialSamples:
-        if (!this.viewOfficialSamplesTraced) {
-          this.resetViewGalleryTabTracedFlags();
-          this.viewOfficialSamplesTraced = true;
-          trace(Action.NotebooksGalleryViewOfficialSamples);
-        }
-        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: JSX.Element, line2: JSX.Element): JSX.Element => {
+  private createEmptyTabContent = (iconName: string, line1: string, line2: string): JSX.Element => {
     return (
       <Stack horizontalAlign="center" tokens={{ childrenGap: 10 }}>
         <FontIcon iconName={iconName} style={{ fontSize: 100, color: "lightgray", marginTop: 20 }} />
@@ -272,63 +216,40 @@ 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.getFavouriteNotebooksTabContent(data),
+      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)),
     };
   }
 
-  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.getPublishedNotebooksTabContent(data),
+      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),
     };
   };
 
   private createPublishedNotebooksTabContent = (data: IGalleryItem[]): JSX.Element => {
     const { published, underReview, removed } = GalleryUtils.filterPublishedNotebooks(data);
     const content = (
-      <Stack tokens={{ childrenGap: 20 }}>
+      <Stack tokens={{ childrenGap: 10 }}>
         {published?.length > 0 &&
           this.createPublishedNotebooksSectionContent(
             undefined,
-            "You have successfully published and shared the following notebook(s) to the public gallery.",
+            "You have successfully published the following notebook(s) to public gallery and shared with other Azure Cosmos DB users.",
             this.createCardsTabContent(published)
           )}
         {underReview?.length > 0 &&
@@ -355,33 +276,24 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     content: JSX.Element
   ): JSX.Element => {
     return (
-      <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>}
+      <Stack tokens={{ childrenGap: 5 }}>
+        {title && <Text styles={{ root: { fontWeight: FontWeights.semibold } }}>{title}</Text>}
+        {description && <Text>{description}</Text>}
         {content}
       </Stack>
     );
   };
 
   private createPublicGalleryTabContent(data: IGalleryItem[], acceptedCodeOfConduct: boolean): JSX.Element {
-    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>
+    return acceptedCodeOfConduct === false ? (
+      <CodeOfConductComponent
+        junoClient={this.props.junoClient}
+        onAcceptCodeOfConduct={(result: boolean) => {
+          this.setState({ isCodeOfConductAccepted: result });
+        }}
+      />
+    ) : (
+      this.createSearchBarHeader(this.createCardsTabContent(data))
     );
   }
 
@@ -398,9 +310,11 @@ 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>
-          <Stack.Item>
-            <InfoComponent />
-          </Stack.Item>
+          {(!this.props.container || this.props.container.isGalleryPublishEnabled()) && (
+            <Stack.Item>
+              <InfoComponent />
+            </Stack.Item>
+          )}
         </Stack>
         <Stack.Item>{content}</Stack.Item>
       </Stack>
@@ -408,7 +322,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   }
 
   private createCardsTabContent(data: IGalleryItem[]): JSX.Element {
-    return data ? (
+    return (
       <FocusZone>
         <List
           items={data}
@@ -417,14 +331,12 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
           onRenderCell={this.onRenderCell}
         />
       </FocusZone>
-    ) : (
-      <Spinner size={SpinnerSize.large} />
     );
   }
 
   private createPolicyViolationsListContent(data: IGalleryItem[]): JSX.Element {
     return (
-      <table style={{ margin: 10 }}>
+      <table>
         <tbody>
           <tr>
             <th>Name</th>
@@ -443,14 +355,14 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
   private loadTabContent(tab: GalleryTab, searchText: string, sortBy: SortBy, offline: boolean): void {
     switch (tab) {
-      case GalleryTab.PublicGallery:
-        this.loadPublicNotebooks(searchText, sortBy, offline);
-        break;
-
       case GalleryTab.OfficialSamples:
         this.loadSampleNotebooks(searchText, sortBy, offline);
         break;
 
+      case GalleryTab.PublicGallery:
+        this.loadPublicNotebooks(searchText, sortBy, offline);
+        break;
+
       case GalleryTab.Favorites:
         this.loadFavoriteNotebooks(searchText, sortBy, offline);
         break;
@@ -473,10 +385,6 @@ 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");
       }
@@ -503,8 +411,6 @@ 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");
       }
@@ -519,19 +425,14 @@ 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 });
       }
     }
 
@@ -550,25 +451,14 @@ 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 });
       }
     }
 
@@ -654,7 +544,10 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   };
 
   private onRenderCell = (data?: IGalleryItem): JSX.Element => {
-    const isFavorite = this.favoriteNotebooks?.find((item) => item.id === data.id) !== undefined;
+    let isFavorite: boolean;
+    if (this.props.container?.isGalleryPublishEnabled()) {
+      isFavorite = this.favoriteNotebooks?.find((item) => item.id === data.id) !== undefined;
+    }
     const props: GalleryCardComponentProps = {
       data,
       isFavorite,
@@ -665,8 +558,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
       onFavoriteClick: () => this.favoriteItem(data),
       onUnfavoriteClick: () => this.unfavoriteItem(data),
       onDownloadClick: () => this.downloadItem(data),
-      onDeleteClick: (beforeDelete: () => void, afterDelete: () => void) =>
-        this.deleteItem(data, beforeDelete, afterDelete),
+      onDeleteClick: () => this.deleteItem(data),
     };
 
     return (
@@ -710,18 +602,11 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     );
   };
 
-  private deleteItem = async (data: IGalleryItem, beforeDelete: () => void, afterDelete: () => void): Promise<void> => {
-    GalleryUtils.deleteItem(
-      this.props.container,
-      this.props.junoClient,
-      data,
-      (item) => {
-        this.publishedNotebooks = this.publishedNotebooks?.filter((notebook) => item.id !== notebook.id);
-        this.refreshSelectedTab(item);
-      },
-      beforeDelete,
-      afterDelete
-    );
+  private deleteItem = async (data: IGalleryItem): Promise<void> => {
+    GalleryUtils.deleteItem(this.props.container, this.props.junoClient, data, (item) => {
+      this.publishedNotebooks = this.publishedNotebooks?.filter((notebook) => item.id !== notebook.id);
+      this.refreshSelectedTab(item);
+    });
   };
 
   private onPivotChange = (item: PivotItem): void => {

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

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

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

@@ -8,94 +8,6 @@ exports[`GalleryViewerComponent renders 1`] = `
     onLinkClick={[Function]}
     selectedKey="OfficialSamples"
   >
-    <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="Official samples"
       itemKey="OfficialSamples"
@@ -160,10 +72,6 @@ exports[`GalleryViewerComponent renders 1`] = `
                     "key": 3,
                     "text": "Most recent",
                   },
-                  Object {
-                    "key": 2,
-                    "text": "Most favorited",
-                  },
                 ]
               }
               selectedKey={0}
@@ -174,9 +82,19 @@ exports[`GalleryViewerComponent renders 1`] = `
           </StackItem>
         </Stack>
         <StackItem>
-          <StyledSpinnerBase
-            size={3}
-          />
+          <FocusZone
+            direction={2}
+            isCircularNavigation={false}
+            shouldRaiseClicks={true}
+          >
+            <List
+              getPageSpecification={[Function]}
+              onRenderCell={[Function]}
+              renderedWindowsAhead={3}
+              renderedWindowsBehind={2}
+              startIndex={0}
+            />
+          </FocusZone>
         </StackItem>
       </Stack>
     </PivotItem>

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx

@@ -31,26 +31,6 @@ 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",
@@ -69,7 +49,19 @@ export class NotebookMetadataComponent extends React.Component<NotebookMetadataC
             </Text>
           </Stack.Item>
 
-          <Stack.Item>{this.renderFavouriteButton()}</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>
 
           {this.props.downloadButtonText && (
             <Stack.Item>

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -3,23 +3,25 @@
  */
 import { Notebook } from "@nteract/commutable";
 import { createContentRef } from "@nteract/core";
-import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "office-ui-fabric-react";
+import { IChoiceGroupProps, Icon, 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 { Dialog, DialogProps, TextFieldProps } from "../Dialog";
+import { DialogComponent, DialogProps, TextFieldProps } from "../DialogReactComponent/DialogComponent";
 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, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
-import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils";
 
 export interface NotebookViewerComponentProps {
   container?: Explorer;
@@ -78,12 +80,6 @@ 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) {
@@ -91,18 +87,8 @@ 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();
-      GalleryUtils.removeNotebookViewerLink(notebook, this.props.galleryItem?.newCellId);
+      this.removeNotebookViewerLink(notebook, this.props.galleryItem?.newCellId);
       this.notebookComponentBootstrapper.setContent("json", notebook);
       this.setState({ content: notebook, showProgressBar: false });
 
@@ -115,23 +101,22 @@ 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");
     }
   }
 
+  private removeNotebookViewerLink = (notebook: Notebook, newCellId: string): void => {
+    if (!newCellId) {
+      return;
+    }
+    const notebookV4 = notebook as NotebookV4;
+    if (notebookV4 && notebookV4.cells[0].source[0].search(newCellId)) {
+      delete notebookV4.cells[0];
+      notebook = notebookV4;
+    }
+  };
+
   public render(): JSX.Element {
     return (
       <div className="notebookViewerContainer">
@@ -167,7 +152,7 @@ export class NotebookViewerComponent
           hidePrompts: this.props.hidePrompts,
         })}
 
-        {this.state.dialogProps && <Dialog {...this.state.dialogProps} />}
+        {this.state.dialogProps && <DialogComponent {...this.state.dialogProps} />}
       </div>
     );
   }
@@ -193,32 +178,6 @@ 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,
@@ -227,10 +186,8 @@ export class NotebookViewerComponent
     onOk: () => void,
     cancelLabel: string,
     onCancel: () => void,
-    progressIndicatorProps?: IProgressIndicatorProps,
     choiceGroupProps?: IChoiceGroupProps,
-    textFieldProps?: TextFieldProps,
-    primaryButtonDisabled?: boolean
+    textFieldProps?: TextFieldProps
   ): void {
     this.setState({
       dialogProps: {
@@ -248,10 +205,8 @@ export class NotebookViewerComponent
           this.setState({ dialogProps: undefined });
           onCancel && onCancel();
         },
-        progressIndicatorProps,
         choiceGroupProps,
         textFieldProps,
-        primaryButtonDisabled,
       },
     });
   }

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -221,6 +221,8 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                     if (window.confirm("Are you sure you want to delete this query?")) {
                       const container = window.dataExplorer;
                       const startKey: number = TelemetryProcessor.traceStart(Action.DeleteSavedQuery, {
+                        databaseAccountName: container && container.databaseAccount().name,
+                        defaultExperience: container && container.defaultExperience(),
                         dataExplorerArea: Constants.Areas.ContextualPane,
                         paneTitle: container && container.browseQueriesPane.title(),
                       });
@@ -229,6 +231,8 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                         TelemetryProcessor.traceSuccess(
                           Action.DeleteSavedQuery,
                           {
+                            databaseAccountName: container && container.databaseAccount().name,
+                            defaultExperience: container && container.defaultExperience(),
                             dataExplorerArea: Constants.Areas.ContextualPane,
                             paneTitle: container && container.browseQueriesPane.title(),
                           },
@@ -238,6 +242,8 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                         TelemetryProcessor.traceFailure(
                           Action.DeleteSavedQuery,
                           {
+                            databaseAccountName: container && container.databaseAccount().name,
+                            defaultExperience: container && container.defaultExperience(),
                             dataExplorerArea: Constants.Areas.ContextualPane,
                             paneTitle: container && container.browseQueriesPane.title(),
                             error: getErrorMessage(error),

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 { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
+import SettingsTabV2 from "../../Tabs/SettingsTabV2";
 import { collection } from "./TestUtils";
 import * as DataModels from "../../../Contracts/DataModels";
 import ko from "knockout";
@@ -31,21 +31,25 @@ 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 CollectionSettingsTabV2({
+    settingsTab: new SettingsTabV2({
       collection: collection,
-      tabKind: ViewModels.CollectionTabKind.CollectionSettingsV2,
+      tabKind: ViewModels.CollectionTabKind.SettingsV2,
       title: "Scale & Settings",
       tabPath: "",
       node: undefined,
       hashLocation: "settings",
       isActive: ko.observable(false),
       onUpdateTabsButtons: undefined,
+      getPendingNotification: Q.Promise<DataModels.Notification>(() => {
+        return;
+      }),
     }),
   };
 
@@ -138,7 +142,6 @@ 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 { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
+import SettingsTab from "../../Tabs/SettingsTabV2";
 import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
 import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
 import {
@@ -44,6 +44,7 @@ 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;
@@ -57,7 +58,7 @@ interface ButtonV2 {
 }
 
 export interface SettingsComponentProps {
-  settingsTab: SettingsTabV2;
+  settingsTab: SettingsTab;
 }
 
 export interface SettingsComponentState {
@@ -115,10 +116,7 @@ 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;
@@ -128,28 +126,20 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   constructor(props: SettingsComponentProps) {
     super(props);
 
-    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.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.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);
-    } else {
-      this.database = this.props.settingsTab.database;
-      this.container = this.database?.container;
-      this.offer = this.database?.offer();
-    }
+    // Mongo container with system partition key still treat as "Fixed"
+    this.isFixedContainer =
+      this.container.isPreferredApiMongoDB() &&
+      (!this.collection.partitionKey || this.collection.partitionKey.systemKey);
 
     this.state = {
       throughput: undefined,
@@ -216,21 +206,18 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   }
 
   componentDidMount(): void {
-    if (this.isCollectionSettingsTab) {
-      this.refreshIndexTransformationProgress();
-      this.loadMongoIndexes();
-    }
-
+    this.refreshIndexTransformationProgress();
+    this.loadMongoIndexes();
     this.setAutoPilotStates();
     this.setBaseline();
     if (this.props.settingsTab.isActive()) {
-      this.props.settingsTab.getContainer().onUpdateTabsButtons(this.getTabsButtons());
+      this.props.settingsTab.getSettingsTabContainer().onUpdateTabsButtons(this.getTabsButtons());
     }
   }
 
   componentDidUpdate(): void {
     if (this.props.settingsTab.isActive()) {
-      this.props.settingsTab.getContainer().onUpdateTabsButtons(this.getTabsButtons());
+      this.props.settingsTab.getSettingsTabContainer().onUpdateTabsButtons(this.getTabsButtons());
     }
   }
 
@@ -283,7 +270,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   };
 
   private setAutoPilotStates = (): void => {
-    const autoscaleMaxThroughput = this.offer?.autoscaleMaxThroughput;
+    const autoscaleMaxThroughput = this.collection?.offer()?.autoscaleMaxThroughput;
 
     if (autoscaleMaxThroughput && AutoPilotUtils.isValidAutoPilotThroughput(autoscaleMaxThroughput)) {
       this.setState({
@@ -308,7 +295,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     !!this.collection.conflictResolutionPolicy();
 
   public isOfferReplacePending = (): boolean => {
-    return this.offer?.offerReplacePending;
+    return this.collection?.offer()?.offerReplacePending;
   };
 
   public onSaveClick = async (): Promise<void> => {
@@ -316,14 +303,180 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
 
     this.props.settingsTab.isExecuting(true);
     const startKey: number = traceStart(Action.SettingsV2Updated, {
+      databaseAccountName: this.container.databaseAccount()?.name,
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: this.props.settingsTab.tabTitle(),
     });
 
+    const newCollection: DataModels.Collection = { ...this.collection.rawDataModel };
+
     try {
-      await (this.isCollectionSettingsTab
-        ? this.saveCollectionSettings(startKey)
-        : this.saveDatabaseSettings(startKey));
+      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
+      );
     } catch (error) {
       this.container.isRefreshingExplorer(false);
       this.props.settingsTab.isExecutionError(true);
@@ -331,9 +484,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       traceFailure(
         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(),
           error: getErrorMessage(error),
@@ -341,9 +495,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         },
         startKey
       );
-    } finally {
-      this.props.settingsTab.isExecuting(false);
     }
+    this.props.settingsTab.isExecuting(false);
   };
 
   public onRevertClick = (): void => {
@@ -406,9 +559,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       traceSuccess(
         Action.Tab,
         {
+          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(),
         },
@@ -539,17 +693,6 @@ 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;
@@ -582,6 +725,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       }
     }
 
+    const offerThroughput = this.collection.offer()?.manualThroughput;
     const changeFeedPolicy = this.collection.rawDataModel?.changeFeedPolicy
       ? ChangeFeedPolicyState.On
       : ChangeFeedPolicyState.Off;
@@ -667,220 +811,9 @@ 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,
-      {
-        databaseName: this.database.id(),
-
-        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,
-          {
-            databaseName: this.collection?.databaseId,
-            collectionName: this.collection?.id(),
-
-            dataExplorerArea: Constants.Areas.Tab,
-            tabTitle: this.props.settingsTab.tabTitle(),
-          },
-          startKey
-        );
-      } catch (error) {
-        traceFailure(
-          Action.MongoIndexUpdated,
-          {
-            databaseName: this.collection?.databaseId,
-            collectionName: this.collection?.id(),
-
-            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,
-      {
-        databaseName: this.collection?.databaseId,
-        collectionName: this.collection?.id(),
-        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,
@@ -897,16 +830,6 @@ 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,
@@ -976,7 +899,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     };
 
     const tabs: SettingsV2TabInfo[] = [];
-    if (!hasDatabaseSharedThroughput(this.collection) && this.offer) {
+    if (!hasDatabaseSharedThroughput(this.collection) && this.collection.offer()) {
       tabs.push({
         tab: SettingsV2TabTypes.ScaleTab,
         content: <ScaleComponent {...scaleComponentProps} />,
@@ -994,16 +917,16 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         content: <IndexingPolicyComponent {...indexingPolicyComponentProps} />,
       });
     } else if (this.container.isPreferredApiMongoDB()) {
-      if (this.container.isEnableMongoCapabilityPresent()) {
-        tabs.push({
-          tab: SettingsV2TabTypes.IndexingPolicyTab,
-          content: <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />,
-        });
-      } else {
+      if (isEmpty(this.container.features())) {
         tabs.push({
           tab: SettingsV2TabTypes.IndexingPolicyTab,
           content: mongoIndexingPolicyAADError,
         });
+      } else if (this.container.isEnableMongoCapabilityPresent()) {
+        tabs.push({
+          tab: SettingsV2TabTypes.IndexingPolicyTab,
+          content: <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />,
+        });
       }
     }
 

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 />
-    {collectionName ? `Database: ${databaseName}, Container: ${collectionName} ` : `Database: ${databaseName} `}
+    Database: {databaseName}, Container: {collectionName}{" "}
     {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 />
-    {collectionName ? `Database: ${databaseName}, Container: ${collectionName} ` : `Database: ${databaseName} `}
+    Database: {databaseName}, Container: {collectionName}{" "}
     {getCurrentThroughput(isAutoscale, throughput, throughputUnit, requestedThroughput)}
   </Text>
 );

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

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

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

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

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

@@ -40,7 +40,6 @@ 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";
@@ -458,8 +457,11 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     TelemetryProcessor.trace(Action.ToggleAutoscaleSetting, ActionModifiers.Mark, {
       changedSelectedValueTo:
         option.key === "true" ? ActionModifiers.ToggleAutoscaleOn : ActionModifiers.ToggleAutoscaleOff,
+      subscriptionId: userContext.subscriptionId,
+      databaseAccountName: this.props.databaseAccount?.name,
       databaseName: this.props.databaseName,
       collectionName: this.props.collectionName,
+      apiKind: userContext.defaultExperience,
       dataExplorerArea: "Scale Tab V2",
     });
   };
@@ -539,7 +541,6 @@ 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()}
@@ -578,7 +579,6 @@ 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,7 +142,6 @@ 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}
@@ -261,7 +260,6 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
       disabled={false}
       id="throughputInput"
       key="provisioned throughput input"
-      min={10000}
       onChange={[Function]}
       required={true}
       step={100}
@@ -535,7 +533,6 @@ 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,7 +23,11 @@ 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,7 +46,6 @@ 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,11 +28,16 @@ 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],
@@ -435,6 +440,22 @@ 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],
@@ -674,6 +695,9 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "addDatabaseText": [Function],
+                "addSynapseLinkDialog": DialogComponentAdapter {
+                  "parameters": [Function],
+                },
                 "addTableEntityPane": AddTableEntityPane {
                   "addButtonLabel": "Add Property",
                   "attributeNameLabel": "Property Name",
@@ -780,8 +804,6 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "clickHostedAccountSwitch": [Function],
                 "clickHostedDirectorySwitch": [Function],
-                "closeDialog": undefined,
-                "closeSidePanel": undefined,
                 "collapsedResourceTreeWidth": 36,
                 "collectionCreationDefaults": Object {
                   "storage": "100",
@@ -836,6 +858,9 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "deleteDatabaseText": [Function],
+                "dialogComponentAdapter": DialogComponentAdapter {
+                  "parameters": [Function],
+                },
                 "editTableEntityPane": EditTableEntityPane {
                   "addButtonLabel": "Add Property",
                   "attributeNameLabel": "Property Name",
@@ -925,18 +950,23 @@ 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],
+                "isNotificationConsoleExpanded": [Function],
                 "isPreferredApiCassandra": [Function],
                 "isPreferredApiDocumentDB": [Function],
                 "isPreferredApiGraph": [Function],
                 "isPreferredApiMongoDB": [Function],
                 "isPreferredApiTable": [Function],
                 "isPublishNotebookPaneEnabled": [Function],
+                "isReadToggled": [Function],
+                "isReadWriteToggled": [Function],
                 "isRefreshingExplorer": [Function],
                 "isResourceTokenCollectionNodeSelected": [Function],
                 "isRightPanelV2Enabled": [Function],
@@ -962,6 +992,13 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "memoryUsageInfo": [Function],
+                "mostRecentActivity": MostRecentActivity {
+                  "container": [Circular],
+                  "storedData": Object {
+                    "itemsMap": Object {},
+                    "schemaVersion": "1",
+                  },
+                },
                 "newVertexPane": NewVertexPane {
                   "buildString": [Function],
                   "container": [Circular],
@@ -981,11 +1018,16 @@ exports[`SettingsComponent renders 1`] = `
                 "nonSystemDatabases": [Function],
                 "notebookBasePath": [Function],
                 "notebookServerInfo": [Function],
+                "notificationConsoleComponentAdapter": NotificationConsoleComponentAdapter {
+                  "consoleData": [Function],
+                  "container": [Circular],
+                  "parameters": [Function],
+                },
+                "notificationConsoleData": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
                 "onSwitchToConnectionString": [Function],
-                "openDialog": undefined,
-                "openSidePanel": undefined,
+                "onToggleKeyDown": [Function],
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -1014,6 +1056,24 @@ 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],
@@ -1069,9 +1129,6 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "selfServeType": [Function],
                 "serverId": [Function],
-                "setInProgressConsoleDataIdToBeDeleted": undefined,
-                "setIsNotificationConsoleExpanded": undefined,
-                "setNotificationConsoleData": undefined,
                 "settingsPane": SettingsPane {
                   "container": [Circular],
                   "crossPartitionQueryEnabled": [Function],
@@ -1109,8 +1166,22 @@ 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,
@@ -1168,6 +1239,9 @@ exports[`SettingsComponent renders 1`] = `
                   "openedTabs": [Function],
                 },
                 "toggleLeftPaneExpandedKeyPress": [Function],
+                "toggleRead": [Function],
+                "toggleReadWrite": [Function],
+                "tokenForRenewal": [Function],
                 "uploadFilePane": UploadFilePane {
                   "container": [Circular],
                   "extensions": [Function],
@@ -1237,11 +1311,16 @@ 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],
@@ -1644,6 +1723,22 @@ 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],
@@ -1883,6 +1978,9 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "addDatabaseText": [Function],
+              "addSynapseLinkDialog": DialogComponentAdapter {
+                "parameters": [Function],
+              },
               "addTableEntityPane": AddTableEntityPane {
                 "addButtonLabel": "Add Property",
                 "attributeNameLabel": "Property Name",
@@ -1989,8 +2087,6 @@ exports[`SettingsComponent renders 1`] = `
               },
               "clickHostedAccountSwitch": [Function],
               "clickHostedDirectorySwitch": [Function],
-              "closeDialog": undefined,
-              "closeSidePanel": undefined,
               "collapsedResourceTreeWidth": 36,
               "collectionCreationDefaults": Object {
                 "storage": "100",
@@ -2045,6 +2141,9 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "deleteDatabaseText": [Function],
+              "dialogComponentAdapter": DialogComponentAdapter {
+                "parameters": [Function],
+              },
               "editTableEntityPane": EditTableEntityPane {
                 "addButtonLabel": "Add Property",
                 "attributeNameLabel": "Property Name",
@@ -2134,18 +2233,23 @@ 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],
+              "isNotificationConsoleExpanded": [Function],
               "isPreferredApiCassandra": [Function],
               "isPreferredApiDocumentDB": [Function],
               "isPreferredApiGraph": [Function],
               "isPreferredApiMongoDB": [Function],
               "isPreferredApiTable": [Function],
               "isPublishNotebookPaneEnabled": [Function],
+              "isReadToggled": [Function],
+              "isReadWriteToggled": [Function],
               "isRefreshingExplorer": [Function],
               "isResourceTokenCollectionNodeSelected": [Function],
               "isRightPanelV2Enabled": [Function],
@@ -2171,6 +2275,13 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "memoryUsageInfo": [Function],
+              "mostRecentActivity": MostRecentActivity {
+                "container": [Circular],
+                "storedData": Object {
+                  "itemsMap": Object {},
+                  "schemaVersion": "1",
+                },
+              },
               "newVertexPane": NewVertexPane {
                 "buildString": [Function],
                 "container": [Circular],
@@ -2190,11 +2301,16 @@ exports[`SettingsComponent renders 1`] = `
               "nonSystemDatabases": [Function],
               "notebookBasePath": [Function],
               "notebookServerInfo": [Function],
+              "notificationConsoleComponentAdapter": NotificationConsoleComponentAdapter {
+                "consoleData": [Function],
+                "container": [Circular],
+                "parameters": [Function],
+              },
+              "notificationConsoleData": [Function],
               "onRefreshDatabasesKeyPress": [Function],
               "onRefreshResourcesClick": [Function],
               "onSwitchToConnectionString": [Function],
-              "openDialog": undefined,
-              "openSidePanel": undefined,
+              "onToggleKeyDown": [Function],
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
                 "container": [Circular],
@@ -2223,6 +2339,24 @@ 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],
@@ -2278,9 +2412,6 @@ exports[`SettingsComponent renders 1`] = `
               },
               "selfServeType": [Function],
               "serverId": [Function],
-              "setInProgressConsoleDataIdToBeDeleted": undefined,
-              "setIsNotificationConsoleExpanded": undefined,
-              "setNotificationConsoleData": undefined,
               "settingsPane": SettingsPane {
                 "container": [Circular],
                 "crossPartitionQueryEnabled": [Function],
@@ -2318,8 +2449,22 @@ 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,
@@ -2377,6 +2522,9 @@ exports[`SettingsComponent renders 1`] = `
                 "openedTabs": [Function],
               },
               "toggleLeftPaneExpandedKeyPress": [Function],
+              "toggleRead": [Function],
+              "toggleReadWrite": [Function],
+              "tokenForRenewal": [Function],
               "uploadFilePane": UploadFilePane {
                 "container": [Circular],
                 "extensions": [Function],
@@ -2459,11 +2607,16 @@ 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],
@@ -2866,6 +3019,22 @@ 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],
@@ -3105,6 +3274,9 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "addDatabaseText": [Function],
+                "addSynapseLinkDialog": DialogComponentAdapter {
+                  "parameters": [Function],
+                },
                 "addTableEntityPane": AddTableEntityPane {
                   "addButtonLabel": "Add Property",
                   "attributeNameLabel": "Property Name",
@@ -3211,8 +3383,6 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "clickHostedAccountSwitch": [Function],
                 "clickHostedDirectorySwitch": [Function],
-                "closeDialog": undefined,
-                "closeSidePanel": undefined,
                 "collapsedResourceTreeWidth": 36,
                 "collectionCreationDefaults": Object {
                   "storage": "100",
@@ -3267,6 +3437,9 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "deleteDatabaseText": [Function],
+                "dialogComponentAdapter": DialogComponentAdapter {
+                  "parameters": [Function],
+                },
                 "editTableEntityPane": EditTableEntityPane {
                   "addButtonLabel": "Add Property",
                   "attributeNameLabel": "Property Name",
@@ -3356,18 +3529,23 @@ 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],
+                "isNotificationConsoleExpanded": [Function],
                 "isPreferredApiCassandra": [Function],
                 "isPreferredApiDocumentDB": [Function],
                 "isPreferredApiGraph": [Function],
                 "isPreferredApiMongoDB": [Function],
                 "isPreferredApiTable": [Function],
                 "isPublishNotebookPaneEnabled": [Function],
+                "isReadToggled": [Function],
+                "isReadWriteToggled": [Function],
                 "isRefreshingExplorer": [Function],
                 "isResourceTokenCollectionNodeSelected": [Function],
                 "isRightPanelV2Enabled": [Function],
@@ -3393,6 +3571,13 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "memoryUsageInfo": [Function],
+                "mostRecentActivity": MostRecentActivity {
+                  "container": [Circular],
+                  "storedData": Object {
+                    "itemsMap": Object {},
+                    "schemaVersion": "1",
+                  },
+                },
                 "newVertexPane": NewVertexPane {
                   "buildString": [Function],
                   "container": [Circular],
@@ -3412,11 +3597,16 @@ exports[`SettingsComponent renders 1`] = `
                 "nonSystemDatabases": [Function],
                 "notebookBasePath": [Function],
                 "notebookServerInfo": [Function],
+                "notificationConsoleComponentAdapter": NotificationConsoleComponentAdapter {
+                  "consoleData": [Function],
+                  "container": [Circular],
+                  "parameters": [Function],
+                },
+                "notificationConsoleData": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
                 "onSwitchToConnectionString": [Function],
-                "openDialog": undefined,
-                "openSidePanel": undefined,
+                "onToggleKeyDown": [Function],
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -3445,6 +3635,24 @@ 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],
@@ -3500,9 +3708,6 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "selfServeType": [Function],
                 "serverId": [Function],
-                "setInProgressConsoleDataIdToBeDeleted": undefined,
-                "setIsNotificationConsoleExpanded": undefined,
-                "setNotificationConsoleData": undefined,
                 "settingsPane": SettingsPane {
                   "container": [Circular],
                   "crossPartitionQueryEnabled": [Function],
@@ -3540,8 +3745,22 @@ 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,
@@ -3599,6 +3818,9 @@ exports[`SettingsComponent renders 1`] = `
                   "openedTabs": [Function],
                 },
                 "toggleLeftPaneExpandedKeyPress": [Function],
+                "toggleRead": [Function],
+                "toggleReadWrite": [Function],
+                "tokenForRenewal": [Function],
                 "uploadFilePane": UploadFilePane {
                   "container": [Circular],
                   "extensions": [Function],
@@ -3668,11 +3890,16 @@ 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],
@@ -4075,6 +4302,22 @@ 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],
@@ -4314,6 +4557,9 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "addDatabaseText": [Function],
+              "addSynapseLinkDialog": DialogComponentAdapter {
+                "parameters": [Function],
+              },
               "addTableEntityPane": AddTableEntityPane {
                 "addButtonLabel": "Add Property",
                 "attributeNameLabel": "Property Name",
@@ -4420,8 +4666,6 @@ exports[`SettingsComponent renders 1`] = `
               },
               "clickHostedAccountSwitch": [Function],
               "clickHostedDirectorySwitch": [Function],
-              "closeDialog": undefined,
-              "closeSidePanel": undefined,
               "collapsedResourceTreeWidth": 36,
               "collectionCreationDefaults": Object {
                 "storage": "100",
@@ -4476,6 +4720,9 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "deleteDatabaseText": [Function],
+              "dialogComponentAdapter": DialogComponentAdapter {
+                "parameters": [Function],
+              },
               "editTableEntityPane": EditTableEntityPane {
                 "addButtonLabel": "Add Property",
                 "attributeNameLabel": "Property Name",
@@ -4565,18 +4812,23 @@ 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],
+              "isNotificationConsoleExpanded": [Function],
               "isPreferredApiCassandra": [Function],
               "isPreferredApiDocumentDB": [Function],
               "isPreferredApiGraph": [Function],
               "isPreferredApiMongoDB": [Function],
               "isPreferredApiTable": [Function],
               "isPublishNotebookPaneEnabled": [Function],
+              "isReadToggled": [Function],
+              "isReadWriteToggled": [Function],
               "isRefreshingExplorer": [Function],
               "isResourceTokenCollectionNodeSelected": [Function],
               "isRightPanelV2Enabled": [Function],
@@ -4602,6 +4854,13 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "memoryUsageInfo": [Function],
+              "mostRecentActivity": MostRecentActivity {
+                "container": [Circular],
+                "storedData": Object {
+                  "itemsMap": Object {},
+                  "schemaVersion": "1",
+                },
+              },
               "newVertexPane": NewVertexPane {
                 "buildString": [Function],
                 "container": [Circular],
@@ -4621,11 +4880,16 @@ exports[`SettingsComponent renders 1`] = `
               "nonSystemDatabases": [Function],
               "notebookBasePath": [Function],
               "notebookServerInfo": [Function],
+              "notificationConsoleComponentAdapter": NotificationConsoleComponentAdapter {
+                "consoleData": [Function],
+                "container": [Circular],
+                "parameters": [Function],
+              },
+              "notificationConsoleData": [Function],
               "onRefreshDatabasesKeyPress": [Function],
               "onRefreshResourcesClick": [Function],
               "onSwitchToConnectionString": [Function],
-              "openDialog": undefined,
-              "openSidePanel": undefined,
+              "onToggleKeyDown": [Function],
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
                 "container": [Circular],
@@ -4654,6 +4918,24 @@ 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],
@@ -4709,9 +4991,6 @@ exports[`SettingsComponent renders 1`] = `
               },
               "selfServeType": [Function],
               "serverId": [Function],
-              "setInProgressConsoleDataIdToBeDeleted": undefined,
-              "setIsNotificationConsoleExpanded": undefined,
-              "setNotificationConsoleData": undefined,
               "settingsPane": SettingsPane {
                 "container": [Circular],
                 "crossPartitionQueryEnabled": [Function],
@@ -4749,8 +5028,22 @@ 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,
@@ -4808,6 +5101,9 @@ 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,7 +256,11 @@ 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
@@ -271,7 +275,11 @@ 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

@@ -1,78 +1,63 @@
 import React from "react";
 import { shallow } from "enzyme";
-import { SmartUiComponent, SmartUiDescriptor } from "./SmartUiComponent";
-import { NumberUiType, SmartUiInput } from "../../../SelfServe/SelfServeTypes";
+import { SmartUiComponent, SmartUiDescriptor, UiType } from "./SmartUiComponent";
 
 describe("SmartUiComponent", () => {
   const exampleData: SmartUiDescriptor = {
     root: {
       id: "root",
       info: {
-        messageTKey: "Start at $24/mo per database",
+        message: "Start at $24/mo per database",
         link: {
           href: "https://aka.ms/azure-cosmos-db-pricing",
-          textTKey: "More Details",
+          text: "More Details",
         },
       },
       children: [
-        {
-          id: "description",
-          input: {
-            dataFieldName: "description",
-            type: "string",
-            description: {
-              textTKey: "this is an example description text.",
-              link: {
-                href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
-                textTKey: "Click here for more information.",
-              },
-            },
-          },
-        },
         {
           id: "throughput",
           input: {
-            labelTKey: "Throughput (input)",
+            label: "Throughput (input)",
             dataFieldName: "throughput",
             type: "number",
             min: 400,
             max: 500,
             step: 10,
             defaultValue: 400,
-            uiType: NumberUiType.Spinner,
+            uiType: UiType.Spinner,
           },
         },
         {
           id: "throughput2",
           input: {
-            labelTKey: "Throughput (Slider)",
+            label: "Throughput (Slider)",
             dataFieldName: "throughput2",
             type: "number",
             min: 400,
             max: 500,
             step: 10,
             defaultValue: 400,
-            uiType: NumberUiType.Slider,
+            uiType: UiType.Slider,
           },
         },
         {
           id: "throughput3",
           input: {
-            labelTKey: "Throughput (invalid)",
+            label: "Throughput (invalid)",
             dataFieldName: "throughput3",
             type: "boolean",
             min: 400,
             max: 500,
             step: 10,
             defaultValue: 400,
-            uiType: NumberUiType.Spinner,
+            uiType: UiType.Spinner,
             errorMessage: "label, truelabel and falselabel are required for boolean input 'throughput3'",
           },
         },
         {
           id: "containerId",
           input: {
-            labelTKey: "Container id",
+            label: "Container id",
             dataFieldName: "containerId",
             type: "string",
           },
@@ -80,9 +65,9 @@ describe("SmartUiComponent", () => {
         {
           id: "analyticalStore",
           input: {
-            labelTKey: "Analytical Store",
-            trueLabelTKey: "Enabled",
-            falseLabelTKey: "Disabled",
+            label: "Analytical Store",
+            trueLabel: "Enabled",
+            falseLabel: "Disabled",
             defaultValue: true,
             dataFieldName: "analyticalStore",
             type: "boolean",
@@ -91,7 +76,7 @@ describe("SmartUiComponent", () => {
         {
           id: "database",
           input: {
-            labelTKey: "Database",
+            label: "Database",
             dataFieldName: "database",
             type: "object",
             choices: [
@@ -106,64 +91,11 @@ describe("SmartUiComponent", () => {
     },
   };
 
-  it("should render and honor input's hidden, disabled state", async () => {
-    const currentValues = new Map<string, SmartUiInput>();
+  it("should render", async () => {
     const wrapper = shallow(
-      <SmartUiComponent
-        disabled={false}
-        descriptor={exampleData}
-        currentValues={currentValues}
-        onInputChange={jest.fn()}
-        onError={() => {
-          return;
-        }}
-        getTranslation={(key: string) => {
-          return key;
-        }}
-      />
+      <SmartUiComponent descriptor={exampleData} currentValues={new Map()} onInputChange={undefined} />
     );
     await new Promise((resolve) => setTimeout(resolve, 0));
     expect(wrapper).toMatchSnapshot();
-    expect(wrapper.exists("#containerId-textField-input")).toBeTruthy();
-
-    currentValues.set("containerId", { value: "container1", hidden: true });
-    wrapper.setProps({ currentValues });
-    wrapper.update();
-    expect(wrapper.exists("#containerId-textField-input")).toBeFalsy();
-
-    currentValues.set("containerId", { value: "container1", hidden: false, disabled: true });
-    wrapper.setProps({ currentValues });
-    wrapper.update();
-    const containerIdTextField = wrapper.find("#containerId-textField-input");
-    expect(containerIdTextField.props().disabled).toBeTruthy();
-  });
-
-  it("disable all inputs", async () => {
-    const wrapper = shallow(
-      <SmartUiComponent
-        disabled={true}
-        descriptor={exampleData}
-        currentValues={new Map()}
-        onInputChange={jest.fn()}
-        onError={() => {
-          return;
-        }}
-        getTranslation={(key: string) => {
-          return key;
-        }}
-      />
-    );
-    await new Promise((resolve) => setTimeout(resolve, 0));
-    expect(wrapper).toMatchSnapshot();
-    const throughputSpinner = wrapper.find("#throughput-spinner-input");
-    expect(throughputSpinner.props().disabled).toBeTruthy();
-    const throughput2Slider = wrapper.find("#throughput2-slider-input").childAt(0);
-    expect(throughput2Slider.props().disabled).toBeTruthy();
-    const containerIdTextField = wrapper.find("#containerId-textField-input");
-    expect(containerIdTextField.props().disabled).toBeTruthy();
-    const analyticalStoreToggle = wrapper.find("#analyticalStore-toggle-input");
-    expect(analyticalStoreToggle.props().disabled).toBeTruthy();
-    const databaseDropdown = wrapper.find("#database-dropdown-input");
-    expect(databaseDropdown.props().disabled).toBeTruthy();
   });
 });

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

@@ -5,20 +5,11 @@ import { SpinButton } from "office-ui-fabric-react/lib/SpinButton";
 import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
 import { TextField } from "office-ui-fabric-react/lib/TextField";
 import { Text } from "office-ui-fabric-react/lib/Text";
+import { RadioSwitchComponent } from "../RadioSwitchComponent/RadioSwitchComponent";
 import { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack";
-import { Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
+import { Link, MessageBar, MessageBarType } from "office-ui-fabric-react";
 import * as InputUtils from "./InputUtils";
 import "./SmartUiComponent.less";
-import {
-  ChoiceItem,
-  Description,
-  Info,
-  InputType,
-  InputTypeValue,
-  NumberUiType,
-  SmartUiInput,
-} from "../../../SelfServe/SelfServeTypes";
-import { TFunction } from "i18next";
 
 /**
  * Generic UX renderer
@@ -28,15 +19,30 @@ import { TFunction } from "i18next";
  * - a descriptor of the UX.
  */
 
-interface BaseDisplay {
-  dataFieldName: string;
-  errorMessage?: string;
-  type: InputTypeValue;
+export type InputTypeValue = "number" | "string" | "boolean" | "object";
+
+export enum UiType {
+  Spinner = "Spinner",
+  Slider = "Slider",
 }
 
-interface BaseInput extends BaseDisplay {
-  labelTKey: string;
-  placeholderTKey?: string;
+export type ChoiceItem = { label: string; key: string };
+
+export type InputType = number | string | boolean | ChoiceItem;
+
+export interface Info {
+  message: string;
+  link?: {
+    href: string;
+    text: string;
+  };
+}
+
+interface BaseInput {
+  label: string;
+  dataFieldName: string;
+  type: InputTypeValue;
+  placeholder?: string;
   errorMessage?: string;
 }
 
@@ -48,12 +54,12 @@ interface NumberInput extends BaseInput {
   max: number;
   step: number;
   defaultValue?: number;
-  uiType: NumberUiType;
+  uiType: UiType;
 }
 
 interface BooleanInput extends BaseInput {
-  trueLabelTKey: string;
-  falseLabelTKey: string;
+  trueLabel: string;
+  falseLabel: string;
   defaultValue?: boolean;
 }
 
@@ -66,16 +72,12 @@ interface ChoiceInput extends BaseInput {
   defaultKey?: string;
 }
 
-interface DescriptionDisplay extends BaseDisplay {
-  description: Description;
-}
-
-type AnyDisplay = NumberInput | BooleanInput | StringInput | ChoiceInput | DescriptionDisplay;
+type AnyInput = NumberInput | BooleanInput | StringInput | ChoiceInput;
 
 interface Node {
   id: string;
   info?: Info;
-  input?: AnyDisplay;
+  input?: AnyInput;
   children?: Node[];
 }
 
@@ -84,13 +86,11 @@ export interface SmartUiDescriptor {
 }
 
 /************************** Component implementation starts here ************************************* */
+
 export interface SmartUiComponentProps {
   descriptor: SmartUiDescriptor;
-  currentValues: Map<string, SmartUiInput>;
-  onInputChange: (input: AnyDisplay, newValue: InputType) => void;
-  onError: (hasError: boolean) => void;
-  disabled: boolean;
-  getTranslation: TFunction;
+  currentValues: Map<string, InputType>;
+  onInputChange: (input: AnyInput, newValue: InputType) => void;
 }
 
 interface SmartUiComponentState {
@@ -98,22 +98,12 @@ interface SmartUiComponentState {
 }
 
 export class SmartUiComponent extends React.Component<SmartUiComponentProps, SmartUiComponentState> {
-  private shouldCheckErrors = true;
   private static readonly labelStyle = {
     color: "#393939",
     fontFamily: "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
     fontSize: 12,
   };
 
-  componentDidUpdate(): void {
-    if (!this.shouldCheckErrors) {
-      this.shouldCheckErrors = true;
-      return;
-    }
-    this.props.onError(this.state.errors.size > 0);
-    this.shouldCheckErrors = false;
-  }
-
   constructor(props: SmartUiComponentProps) {
     super(props);
     this.state = {
@@ -123,11 +113,11 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
 
   private renderInfo(info: Info): JSX.Element {
     return (
-      <MessageBar styles={{ root: { width: 400 } }}>
-        {this.props.getTranslation(info.messageTKey)}
+      <MessageBar>
+        {info.message}
         {info.link && (
           <Link href={info.link.href} target="_blank">
-            {this.props.getTranslation(info.link.textTKey)}
+            {info.link.text}
           </Link>
         )}
       </MessageBar>
@@ -135,20 +125,17 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
   }
 
   private renderTextInput(input: StringInput): JSX.Element {
-    const value = this.props.currentValues.get(input.dataFieldName)?.value as string;
-    const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
+    const value = this.props.currentValues.get(input.dataFieldName) as string;
     return (
       <div className="stringInputContainer">
         <TextField
-          id={`${input.dataFieldName}-textField-input`}
-          label={this.props.getTranslation(input.labelTKey)}
+          id={`${input.dataFieldName}-textBox-input`}
+          label={input.label}
           type="text"
-          value={value || ""}
-          placeholder={this.props.getTranslation(input.placeholderTKey)}
-          disabled={disabled}
+          value={value}
+          placeholder={input.placeholder}
           onChange={(_, newValue) => this.props.onInputChange(input, newValue)}
           styles={{
-            root: { width: 400 },
             subComponentStyles: {
               label: {
                 root: {
@@ -163,27 +150,13 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     );
   }
 
-  private renderDescription(input: DescriptionDisplay): JSX.Element {
-    const description = input.description;
-    return (
-      <Text id={`${input.dataFieldName}-text-display`}>
-        {this.props.getTranslation(input.description.textTKey)}{" "}
-        {description.link && (
-          <Link target="_blank" href={input.description.link.href}>
-            {this.props.getTranslation(input.description.link.textTKey)}
-          </Link>
-        )}
-      </Text>
-    );
-  }
-
   private clearError(dataFieldName: string): void {
     const { errors } = this.state;
     errors.delete(dataFieldName);
     this.setState({ errors });
   }
 
-  private onValidate = (input: NumberInput, value: string, min: number, max: number): string => {
+  private onValidate = (input: AnyInput, value: string, min: number, max: number): string => {
     const newValue = InputUtils.onValidateValueChange(value, min, max);
     const dataFieldName = input.dataFieldName;
     if (newValue) {
@@ -192,13 +165,13 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
       return newValue.toString();
     } else {
       const { errors } = this.state;
-      errors.set(dataFieldName, `Invalid value '${value}'. It must be between ${min} and ${max}`);
+      errors.set(dataFieldName, `Invalid value ${value}: must be between ${min} and ${max}`);
       this.setState({ errors });
     }
     return undefined;
   };
 
-  private onIncrement = (input: NumberInput, value: string, step: number, max: number): string => {
+  private onIncrement = (input: AnyInput, value: string, step: number, max: number): string => {
     const newValue = InputUtils.onIncrementValue(value, step, max);
     const dataFieldName = input.dataFieldName;
     if (newValue) {
@@ -209,7 +182,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     return undefined;
   };
 
-  private onDecrement = (input: NumberInput, value: string, step: number, min: number): string => {
+  private onDecrement = (input: AnyInput, value: string, step: number, min: number): string => {
     const newValue = InputUtils.onDecrementValue(value, step, min);
     const dataFieldName = input.dataFieldName;
     if (newValue) {
@@ -221,20 +194,19 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
   };
 
   private renderNumberInput(input: NumberInput): JSX.Element {
-    const { labelTKey, min, max, dataFieldName, step } = input;
+    const { label, min, max, dataFieldName, step } = input;
     const props = {
-      label: this.props.getTranslation(labelTKey),
+      label: label,
       min: min,
       max: max,
-      ariaLabel: labelTKey,
+      ariaLabel: label,
       step: step,
     };
 
-    const value = this.props.currentValues.get(dataFieldName)?.value as number;
-    const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
-    if (input.uiType === NumberUiType.Spinner) {
+    const value = this.props.currentValues.get(dataFieldName) as number;
+    if (input.uiType === UiType.Spinner) {
       return (
-        <Stack styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
+        <>
           <SpinButton
             {...props}
             id={`${input.dataFieldName}-spinner-input`}
@@ -243,7 +215,6 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
             onIncrement={(newValue) => this.onIncrement(input, newValue, props.step, props.max)}
             onDecrement={(newValue) => this.onDecrement(input, newValue, props.step, props.min)}
             labelPosition={Position.top}
-            disabled={disabled}
             styles={{
               label: {
                 ...SmartUiComponent.labelStyle,
@@ -254,18 +225,16 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
           {this.state.errors.has(dataFieldName) && (
             <MessageBar messageBarType={MessageBarType.error}>Error: {this.state.errors.get(dataFieldName)}</MessageBar>
           )}
-        </Stack>
+        </>
       );
-    } else if (input.uiType === NumberUiType.Slider) {
+    } else if (input.uiType === UiType.Slider) {
       return (
         <div id={`${input.dataFieldName}-slider-input`}>
           <Slider
             {...props}
             value={value}
-            disabled={disabled}
             onChange={(newValue) => this.props.onInputChange(input, newValue)}
             styles={{
-              root: { width: 400 },
               titleLabel: {
                 ...SmartUiComponent.labelStyle,
                 fontWeight: 600,
@@ -281,44 +250,49 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
   }
 
   private renderBooleanInput(input: BooleanInput): JSX.Element {
-    const value = this.props.currentValues.get(input.dataFieldName)?.value as boolean;
-    const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
+    const value = this.props.currentValues.get(input.dataFieldName) as boolean;
+    const selectedKey = value || input.defaultValue ? "true" : "false";
     return (
-      <Toggle
-        id={`${input.dataFieldName}-toggle-input`}
-        label={this.props.getTranslation(input.labelTKey)}
-        checked={value || false}
-        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 } }}
-      />
+      <div id={`${input.dataFieldName}-radioSwitch-input`}>
+        <div className="inputLabelContainer">
+          <Text variant="small" nowrap className="inputLabel">
+            {input.label}
+          </Text>
+        </div>
+        <RadioSwitchComponent
+          choices={[
+            {
+              label: input.falseLabel,
+              key: "false",
+              onSelect: () => this.props.onInputChange(input, false),
+            },
+            {
+              label: input.trueLabel,
+              key: "true",
+              onSelect: () => this.props.onInputChange(input, true),
+            },
+          ]}
+          selectedKey={selectedKey}
+        />
+      </div>
     );
   }
 
   private renderChoiceInput(input: ChoiceInput): JSX.Element {
-    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;
-    if (!selectedKey) {
-      selectedKey = "";
-    }
+    const { label, defaultKey: defaultKey, dataFieldName, choices, placeholder } = input;
+    const value = this.props.currentValues.get(dataFieldName) as string;
     return (
       <Dropdown
-        id={`${input.dataFieldName}-dropdown-input`}
-        label={this.props.getTranslation(labelTKey)}
-        selectedKey={selectedKey}
+        id={`${input.dataFieldName}-dropown-input`}
+        label={label}
+        selectedKey={value ? value : defaultKey}
         onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
-        placeholder={this.props.getTranslation(placeholderTKey)}
-        disabled={disabled}
+        placeholder={placeholder}
         options={choices.map((c) => ({
           key: c.key,
-          text: this.props.getTranslation(c.label),
+          text: c.label,
         }))}
         styles={{
-          root: { width: 400 },
           label: {
             ...SmartUiComponent.labelStyle,
             fontWeight: 600,
@@ -329,23 +303,16 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     );
   }
 
-  private renderError(input: AnyDisplay): JSX.Element {
+  private renderError(input: AnyInput): JSX.Element {
     return <MessageBar messageBarType={MessageBarType.error}>Error: {input.errorMessage}</MessageBar>;
   }
 
-  private renderDisplay(input: AnyDisplay): JSX.Element {
+  private renderInput(input: AnyInput): JSX.Element {
     if (input.errorMessage) {
       return this.renderError(input);
     }
-    const inputHidden = this.props.currentValues.get(input.dataFieldName)?.hidden;
-    if (inputHidden) {
-      return <></>;
-    }
     switch (input.type) {
       case "string":
-        if ("description" in input) {
-          return this.renderDescription(input as DescriptionDisplay);
-        }
         return this.renderTextInput(input as StringInput);
       case "number":
         return this.renderNumberInput(input as NumberInput);
@@ -359,13 +326,13 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
   }
 
   private renderNode(node: Node): JSX.Element {
-    const containerStackTokens: IStackTokens = { childrenGap: 10 };
+    const containerStackTokens: IStackTokens = { childrenGap: 15 };
 
     return (
       <Stack tokens={containerStackTokens} className="widgetRendererContainer">
         <Stack.Item>
           {node.info && this.renderInfo(node.info as Info)}
-          {node.input && this.renderDisplay(node.input)}
+          {node.input && this.renderInput(node.input)}
         </Stack.Item>
         {node.children && node.children.map((child) => <div key={child.id}>{this.renderNode(child)}</div>)}
       </Stack>
@@ -373,6 +340,11 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
   }
 
   render(): JSX.Element {
-    return this.renderNode(this.props.descriptor.root);
+    const containerStackTokens: IStackTokens = { childrenGap: 20 };
+    return (
+      <Stack tokens={containerStackTokens} styles={{ root: { width: 400, padding: 10 } }}>
+        {this.renderNode(this.props.descriptor.root)}
+      </Stack>
+    );
   }
 }

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

@@ -1,405 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SmartUiComponent disable all inputs 1`] = `
+exports[`SmartUiComponent should render 1`] = `
 <Stack
-  className="widgetRendererContainer"
+  styles={
+    Object {
+      "root": Object {
+        "padding": 10,
+        "width": 400,
+      },
+    }
+  }
   tokens={
     Object {
-      "childrenGap": 10,
+      "childrenGap": 20,
     }
   }
 >
-  <StackItem>
-    <StyledMessageBarBase
-      styles={
-        Object {
-          "root": Object {
-            "width": 400,
-          },
-        }
+  <Stack
+    className="widgetRendererContainer"
+    tokens={
+      Object {
+        "childrenGap": 15,
       }
-    >
-      Start at $24/mo per database
-      <StyledLinkBase
-        href="https://aka.ms/azure-cosmos-db-pricing"
-        target="_blank"
-      >
-        More Details
-      </StyledLinkBase>
-    </StyledMessageBarBase>
-  </StackItem>
-  <div
-    key="description"
-  >
-    <Stack
-      className="widgetRendererContainer"
-      tokens={
-        Object {
-          "childrenGap": 10,
-        }
-      }
-    >
-      <StackItem>
-        <Text
-          id="description-text-display"
-        >
-          this is an example description text.
-           
-          <StyledLinkBase
-            href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
-            target="_blank"
-          >
-            Click here for more information.
-          </StyledLinkBase>
-        </Text>
-      </StackItem>
-    </Stack>
-  </div>
-  <div
-    key="throughput"
-  >
-    <Stack
-      className="widgetRendererContainer"
-      tokens={
-        Object {
-          "childrenGap": 10,
-        }
-      }
-    >
-      <StackItem>
-        <Stack
-          styles={
-            Object {
-              "root": Object {
-                "width": 400,
-              },
-            }
-          }
-          tokens={
-            Object {
-              "childrenGap": 2,
-            }
-          }
-        >
-          <CustomizedSpinButton
-            ariaLabel="Throughput (input)"
-            decrementButtonIcon={
-              Object {
-                "iconName": "ChevronDownSmall",
-              }
-            }
-            disabled={true}
-            id="throughput-spinner-input"
-            incrementButtonIcon={
-              Object {
-                "iconName": "ChevronUpSmall",
-              }
-            }
-            label="Throughput (input)"
-            labelPosition={0}
-            max={500}
-            min={400}
-            onDecrement={[Function]}
-            onIncrement={[Function]}
-            onValidate={[Function]}
-            step={10}
-            styles={
-              Object {
-                "label": Object {
-                  "color": "#393939",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "fontSize": 12,
-                  "fontWeight": 600,
-                },
-              }
-            }
-          />
-        </Stack>
-      </StackItem>
-    </Stack>
-  </div>
-  <div
-    key="throughput2"
-  >
-    <Stack
-      className="widgetRendererContainer"
-      tokens={
-        Object {
-          "childrenGap": 10,
-        }
-      }
-    >
-      <StackItem>
-        <div
-          id="throughput2-slider-input"
-        >
-          <StyledSliderBase
-            ariaLabel="Throughput (Slider)"
-            disabled={true}
-            label="Throughput (Slider)"
-            max={500}
-            min={400}
-            onChange={[Function]}
-            step={10}
-            styles={
-              Object {
-                "root": Object {
-                  "width": 400,
-                },
-                "titleLabel": Object {
-                  "color": "#393939",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "fontSize": 12,
-                  "fontWeight": 600,
-                },
-                "valueLabel": Object {
-                  "color": "#393939",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "fontSize": 12,
-                },
-              }
-            }
-          />
-        </div>
-      </StackItem>
-    </Stack>
-  </div>
-  <div
-    key="throughput3"
-  >
-    <Stack
-      className="widgetRendererContainer"
-      tokens={
-        Object {
-          "childrenGap": 10,
-        }
-      }
-    >
-      <StackItem>
-        <StyledMessageBarBase
-          messageBarType={1}
-        >
-          Error: 
-          label, truelabel and falselabel are required for boolean input 'throughput3'
-        </StyledMessageBarBase>
-      </StackItem>
-    </Stack>
-  </div>
-  <div
-    key="containerId"
-  >
-    <Stack
-      className="widgetRendererContainer"
-      tokens={
-        Object {
-          "childrenGap": 10,
-        }
-      }
-    >
-      <StackItem>
-        <div
-          className="stringInputContainer"
-        >
-          <StyledTextFieldBase
-            disabled={true}
-            id="containerId-textField-input"
-            label="Container id"
-            onChange={[Function]}
-            styles={
-              Object {
-                "root": Object {
-                  "width": 400,
-                },
-                "subComponentStyles": Object {
-                  "label": Object {
-                    "root": Object {
-                      "color": "#393939",
-                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                      "fontSize": 12,
-                      "fontWeight": 600,
-                    },
-                  },
-                },
-              }
-            }
-            type="text"
-            value=""
-          />
-        </div>
-      </StackItem>
-    </Stack>
-  </div>
-  <div
-    key="analyticalStore"
-  >
-    <Stack
-      className="widgetRendererContainer"
-      tokens={
-        Object {
-          "childrenGap": 10,
-        }
-      }
-    >
-      <StackItem>
-        <StyledToggleBase
-          checked={false}
-          disabled={true}
-          id="analyticalStore-toggle-input"
-          label="Analytical Store"
-          offText="Disabled"
-          onChange={[Function]}
-          onText="Enabled"
-          styles={
-            Object {
-              "root": Object {
-                "width": 400,
-              },
-            }
-          }
-        />
-      </StackItem>
-    </Stack>
-  </div>
-  <div
-    key="database"
-  >
-    <Stack
-      className="widgetRendererContainer"
-      tokens={
-        Object {
-          "childrenGap": 10,
-        }
-      }
-    >
-      <StackItem>
-        <StyledWithResponsiveMode
-          disabled={true}
-          id="database-dropdown-input"
-          label="Database"
-          onChange={[Function]}
-          options={
-            Array [
-              Object {
-                "key": "db1",
-                "text": "Database 1",
-              },
-              Object {
-                "key": "db2",
-                "text": "Database 2",
-              },
-              Object {
-                "key": "db3",
-                "text": "Database 3",
-              },
-            ]
-          }
-          selectedKey="db2"
-          styles={
-            Object {
-              "dropdown": Object {
-                "color": "#393939",
-                "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                "fontSize": 12,
-              },
-              "label": Object {
-                "color": "#393939",
-                "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                "fontSize": 12,
-                "fontWeight": 600,
-              },
-              "root": Object {
-                "width": 400,
-              },
-            }
-          }
-        />
-      </StackItem>
-    </Stack>
-  </div>
-</Stack>
-`;
-
-exports[`SmartUiComponent should render and honor input's hidden, disabled state 1`] = `
-<Stack
-  className="widgetRendererContainer"
-  tokens={
-    Object {
-      "childrenGap": 10,
     }
-  }
->
-  <StackItem>
-    <StyledMessageBarBase
-      styles={
-        Object {
-          "root": Object {
-            "width": 400,
-          },
-        }
-      }
+  >
+    <StackItem>
+      <StyledMessageBarBase>
+        Start at $24/mo per database
+        <StyledLinkBase
+          href="https://aka.ms/azure-cosmos-db-pricing"
+          target="_blank"
+        >
+          More Details
+        </StyledLinkBase>
+      </StyledMessageBarBase>
+    </StackItem>
+    <div
+      key="throughput"
     >
-      Start at $24/mo per database
-      <StyledLinkBase
-        href="https://aka.ms/azure-cosmos-db-pricing"
-        target="_blank"
+      <Stack
+        className="widgetRendererContainer"
+        tokens={
+          Object {
+            "childrenGap": 15,
+          }
+        }
       >
-        More Details
-      </StyledLinkBase>
-    </StyledMessageBarBase>
-  </StackItem>
-  <div
-    key="description"
-  >
-    <Stack
-      className="widgetRendererContainer"
-      tokens={
-        Object {
-          "childrenGap": 10,
-        }
-      }
-    >
-      <StackItem>
-        <Text
-          id="description-text-display"
-        >
-          this is an example description text.
-           
-          <StyledLinkBase
-            href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
-            target="_blank"
-          >
-            Click here for more information.
-          </StyledLinkBase>
-        </Text>
-      </StackItem>
-    </Stack>
-  </div>
-  <div
-    key="throughput"
-  >
-    <Stack
-      className="widgetRendererContainer"
-      tokens={
-        Object {
-          "childrenGap": 10,
-        }
-      }
-    >
-      <StackItem>
-        <Stack
-          styles={
-            Object {
-              "root": Object {
-                "width": 400,
-              },
-            }
-          }
-          tokens={
-            Object {
-              "childrenGap": 2,
-            }
-          }
-        >
+        <StackItem>
           <CustomizedSpinButton
             ariaLabel="Throughput (input)"
             decrementButtonIcon={
@@ -433,203 +80,210 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
               }
             }
           />
-        </Stack>
-      </StackItem>
-    </Stack>
-  </div>
-  <div
-    key="throughput2"
-  >
-    <Stack
-      className="widgetRendererContainer"
-      tokens={
-        Object {
-          "childrenGap": 10,
-        }
-      }
+        </StackItem>
+      </Stack>
+    </div>
+    <div
+      key="throughput2"
     >
-      <StackItem>
-        <div
-          id="throughput2-slider-input"
-        >
-          <StyledSliderBase
-            ariaLabel="Throughput (Slider)"
-            label="Throughput (Slider)"
-            max={500}
-            min={400}
+      <Stack
+        className="widgetRendererContainer"
+        tokens={
+          Object {
+            "childrenGap": 15,
+          }
+        }
+      >
+        <StackItem>
+          <div
+            id="throughput2-slider-input"
+          >
+            <StyledSliderBase
+              ariaLabel="Throughput (Slider)"
+              label="Throughput (Slider)"
+              max={500}
+              min={400}
+              onChange={[Function]}
+              step={10}
+              styles={
+                Object {
+                  "titleLabel": Object {
+                    "color": "#393939",
+                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                    "fontSize": 12,
+                    "fontWeight": 600,
+                  },
+                  "valueLabel": Object {
+                    "color": "#393939",
+                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                    "fontSize": 12,
+                  },
+                }
+              }
+            />
+          </div>
+        </StackItem>
+      </Stack>
+    </div>
+    <div
+      key="throughput3"
+    >
+      <Stack
+        className="widgetRendererContainer"
+        tokens={
+          Object {
+            "childrenGap": 15,
+          }
+        }
+      >
+        <StackItem>
+          <StyledMessageBarBase
+            messageBarType={1}
+          >
+            Error: 
+            label, truelabel and falselabel are required for boolean input 'throughput3'
+          </StyledMessageBarBase>
+        </StackItem>
+      </Stack>
+    </div>
+    <div
+      key="containerId"
+    >
+      <Stack
+        className="widgetRendererContainer"
+        tokens={
+          Object {
+            "childrenGap": 15,
+          }
+        }
+      >
+        <StackItem>
+          <div
+            className="stringInputContainer"
+          >
+            <StyledTextFieldBase
+              id="containerId-textBox-input"
+              label="Container id"
+              onChange={[Function]}
+              styles={
+                Object {
+                  "subComponentStyles": Object {
+                    "label": Object {
+                      "root": Object {
+                        "color": "#393939",
+                        "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                        "fontSize": 12,
+                        "fontWeight": 600,
+                      },
+                    },
+                  },
+                }
+              }
+              type="text"
+            />
+          </div>
+        </StackItem>
+      </Stack>
+    </div>
+    <div
+      key="analyticalStore"
+    >
+      <Stack
+        className="widgetRendererContainer"
+        tokens={
+          Object {
+            "childrenGap": 15,
+          }
+        }
+      >
+        <StackItem>
+          <div
+            id="analyticalStore-radioSwitch-input"
+          >
+            <div
+              className="inputLabelContainer"
+            >
+              <Text
+                className="inputLabel"
+                nowrap={true}
+                variant="small"
+              >
+                Analytical Store
+              </Text>
+            </div>
+            <RadioSwitchComponent
+              choices={
+                Array [
+                  Object {
+                    "key": "false",
+                    "label": "Disabled",
+                    "onSelect": [Function],
+                  },
+                  Object {
+                    "key": "true",
+                    "label": "Enabled",
+                    "onSelect": [Function],
+                  },
+                ]
+              }
+              selectedKey="true"
+            />
+          </div>
+        </StackItem>
+      </Stack>
+    </div>
+    <div
+      key="database"
+    >
+      <Stack
+        className="widgetRendererContainer"
+        tokens={
+          Object {
+            "childrenGap": 15,
+          }
+        }
+      >
+        <StackItem>
+          <StyledWithResponsiveMode
+            id="database-dropown-input"
+            label="Database"
             onChange={[Function]}
-            step={10}
+            options={
+              Array [
+                Object {
+                  "key": "db1",
+                  "text": "Database 1",
+                },
+                Object {
+                  "key": "db2",
+                  "text": "Database 2",
+                },
+                Object {
+                  "key": "db3",
+                  "text": "Database 3",
+                },
+              ]
+            }
+            selectedKey="db2"
             styles={
               Object {
-                "root": Object {
-                  "width": 400,
+                "dropdown": Object {
+                  "color": "#393939",
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                  "fontSize": 12,
                 },
-                "titleLabel": Object {
+                "label": Object {
                   "color": "#393939",
                   "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
                   "fontSize": 12,
                   "fontWeight": 600,
                 },
-                "valueLabel": Object {
-                  "color": "#393939",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "fontSize": 12,
-                },
               }
             }
           />
-        </div>
-      </StackItem>
-    </Stack>
-  </div>
-  <div
-    key="throughput3"
-  >
-    <Stack
-      className="widgetRendererContainer"
-      tokens={
-        Object {
-          "childrenGap": 10,
-        }
-      }
-    >
-      <StackItem>
-        <StyledMessageBarBase
-          messageBarType={1}
-        >
-          Error: 
-          label, truelabel and falselabel are required for boolean input 'throughput3'
-        </StyledMessageBarBase>
-      </StackItem>
-    </Stack>
-  </div>
-  <div
-    key="containerId"
-  >
-    <Stack
-      className="widgetRendererContainer"
-      tokens={
-        Object {
-          "childrenGap": 10,
-        }
-      }
-    >
-      <StackItem>
-        <div
-          className="stringInputContainer"
-        >
-          <StyledTextFieldBase
-            id="containerId-textField-input"
-            label="Container id"
-            onChange={[Function]}
-            styles={
-              Object {
-                "root": Object {
-                  "width": 400,
-                },
-                "subComponentStyles": Object {
-                  "label": Object {
-                    "root": Object {
-                      "color": "#393939",
-                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                      "fontSize": 12,
-                      "fontWeight": 600,
-                    },
-                  },
-                },
-              }
-            }
-            type="text"
-            value=""
-          />
-        </div>
-      </StackItem>
-    </Stack>
-  </div>
-  <div
-    key="analyticalStore"
-  >
-    <Stack
-      className="widgetRendererContainer"
-      tokens={
-        Object {
-          "childrenGap": 10,
-        }
-      }
-    >
-      <StackItem>
-        <StyledToggleBase
-          checked={false}
-          id="analyticalStore-toggle-input"
-          label="Analytical Store"
-          offText="Disabled"
-          onChange={[Function]}
-          onText="Enabled"
-          styles={
-            Object {
-              "root": Object {
-                "width": 400,
-              },
-            }
-          }
-        />
-      </StackItem>
-    </Stack>
-  </div>
-  <div
-    key="database"
-  >
-    <Stack
-      className="widgetRendererContainer"
-      tokens={
-        Object {
-          "childrenGap": 10,
-        }
-      }
-    >
-      <StackItem>
-        <StyledWithResponsiveMode
-          id="database-dropdown-input"
-          label="Database"
-          onChange={[Function]}
-          options={
-            Array [
-              Object {
-                "key": "db1",
-                "text": "Database 1",
-              },
-              Object {
-                "key": "db2",
-                "text": "Database 2",
-              },
-              Object {
-                "key": "db3",
-                "text": "Database 3",
-              },
-            ]
-          }
-          selectedKey="db2"
-          styles={
-            Object {
-              "dropdown": Object {
-                "color": "#393939",
-                "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                "fontSize": 12,
-              },
-              "label": Object {
-                "color": "#393939",
-                "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                "fontSize": 12,
-                "fontWeight": 600,
-              },
-              "root": Object {
-                "width": 400,
-              },
-            }
-          }
-        />
-      </StackItem>
-    </Stack>
-  </div>
+        </StackItem>
+      </Stack>
+    </div>
+  </Stack>
 </Stack>
 `;

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts

@@ -207,6 +207,9 @@ export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
     this.isAutoPilotSelected.subscribe((value) => {
       TelemetryProcessor.trace(Action.ToggleAutoscaleSetting, ActionModifiers.Mark, {
         changedSelectedValueTo: value ? ActionModifiers.ToggleAutoscaleOn : ActionModifiers.ToggleAutoscaleOff,
+        databaseAccountName: userContext.databaseAccount?.name,
+        subscriptionId: userContext.subscriptionId,
+        apiKind: userContext.defaultExperience,
         dataExplorerArea: "Scale Tab V1",
       });
     });

src/Explorer/DataSamples/ContainerSampleGenerator.test.ts

@@ -61,7 +61,6 @@ describe("ContainerSampleGenerator", () => {
     const database = {
       id: ko.observable(sampleDatabaseId),
       collections: ko.observableArray<ViewModels.Collection>([collection]),
-      loadCollections: () => {},
     } as ViewModels.Database;
     database.findCollectionWithId = () => collection;
 
@@ -110,7 +109,6 @@ describe("ContainerSampleGenerator", () => {
     const database = {
       id: ko.observable(sampleDatabaseId),
       collections: ko.observableArray<ViewModels.Collection>([collection]),
-      loadCollections: () => {},
     } as ViewModels.Database;
     database.findCollectionWithId = () => collection;
     collection.databaseId = database.id();

src/Explorer/DataSamples/ContainerSampleGenerator.ts

@@ -63,7 +63,6 @@ export class ContainerSampleGenerator {
     if (!database) {
       return undefined;
     }
-    await database.loadCollections();
     return database.findCollectionWithId(this.sampleDataFile.collectionId);
   }
 

src/Explorer/Graph/GraphExplorerComponent/EditorNeighborsComponent.tsx

@@ -5,7 +5,7 @@
 
 import * as React from "react";
 import { NeighborVertexBasicInfo, EditedEdges, GraphNewEdgeData, PossibleVertex } from "./GraphExplorer";
-import * as GraphUtil from "./GraphUtil";
+import { GraphUtil } from "./GraphUtil";
 import * as InputTypeaheadComponent from "../../Controls/InputTypeahead/InputTypeaheadComponent";
 import DeleteIcon from "../../../../images/delete.svg";
 import AddPropertyIcon from "../../../../images/Add-property.svg";

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -9,7 +9,7 @@ import { GraphVizComponentProps } from "./GraphVizComponent";
 import * as GraphData from "./GraphData";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
-import * as GraphUtil from "./GraphUtil";
+import { GraphUtil } from "./GraphUtil";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import * as GremlinClient from "./GremlinClient";
@@ -1031,8 +1031,10 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       TelemetryProcessor.traceSuccess(
         Action.Tab,
         {
+          databaseAccountName: this.props.resourceId,
           databaseName: this.props.databaseId,
           collectionName: this.props.collectionId,
+          defaultExperience: Constants.DefaultAccountExperience.Graph,
           dataExplorerArea: Constants.Areas.Tab,
           tabTitle: "Graph",
         },

src/Explorer/Graph/GraphExplorerComponent/GraphUtil.test.ts

@@ -1,4 +1,4 @@
-import * as GraphUtil from "./GraphUtil";
+import { GraphUtil } from "./GraphUtil";
 import { GraphData, GremlinVertex, GremlinEdge } from "./GraphData";
 import * as sinon from "sinon";
 import { GraphExplorer } from "./GraphExplorer";
@@ -69,7 +69,7 @@ describe("Process Gremlin vertex", () => {
 describe("getLimitedArrayString()", () => {
   const expectedEmptyResult = { result: "", consumedCount: 0 };
   it("should handle null array", () => {
-    expect(GraphUtil.getLimitedArrayString(undefined, 10)).toEqual(expectedEmptyResult);
+    expect(GraphUtil.getLimitedArrayString(null, 10)).toEqual(expectedEmptyResult);
   });
 
   it("should handle empty array", () => {

src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts

@@ -7,184 +7,180 @@ interface JoinArrayMaxCharOutput {
   consumedCount: number; // Number of items consumed
 }
 
-interface EdgePropertyType {
-  id: string;
-  outV?: string;
-  inV?: string;
-}
+export class GraphUtil {
+  public static getNeighborTitle(neighbor: NeighborVertexBasicInfo): string {
+    return `edge id: ${neighbor.edgeId}, vertex id: ${neighbor.id}`;
+  }
 
-export function getNeighborTitle(neighbor: NeighborVertexBasicInfo): string {
-  return `edge id: ${neighbor.edgeId}, vertex id: ${neighbor.id}`;
-}
+  /**
+   * Collect all edges from this node
+   * @param vertex
+   * @param graphData
+   * @param newNodes (optional) object describing new nodes encountered
+   */
+  public static createEdgesfromNode(
+    vertex: GraphData.GremlinVertex,
+    graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>,
+    newNodes?: { [id: string]: boolean }
+  ): void {
+    if (vertex.hasOwnProperty("outE")) {
+      let outE = vertex.outE;
+      for (var label in outE) {
+        $.each(outE[label], (index: number, edge: any) => {
+          // We create our own edge. No need to fetch
+          let e = {
+            id: edge.id,
+            label: label,
+            inV: edge.inV,
+            outV: vertex.id,
+          };
 
-/**
- * Collect all edges from this node
- * @param vertex
- * @param graphData
- * @param newNodes (optional) object describing new nodes encountered
- */
-export function createEdgesfromNode(
-  vertex: GraphData.GremlinVertex,
-  graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>,
-  newNodes?: { [id: string]: boolean }
-): void {
-  if (Object.prototype.hasOwnProperty.call(vertex, "outE")) {
-    const outE = vertex.outE;
-    for (const label in outE) {
-      $.each(outE[label], (index: number, edge: EdgePropertyType) => {
-        // We create our own edge. No need to fetch
-        const e = {
-          id: edge.id,
-          label: label,
-          inV: edge.inV,
-          outV: vertex.id,
-        };
+          graphData.addEdge(e);
+          if (newNodes) {
+            newNodes[edge.inV] = true;
+          }
+        });
+      }
+    }
+    if (vertex.hasOwnProperty("inE")) {
+      let inE = vertex.inE;
+      for (var label in inE) {
+        $.each(inE[label], (index: number, edge: any) => {
+          // We create our own edge. No need to fetch
+          let e = {
+            id: edge.id,
+            label: label,
+            inV: vertex.id,
+            outV: edge.outV,
+          };
 
-        graphData.addEdge(e);
-        if (newNodes) {
-          newNodes[edge.inV] = true;
-        }
-      });
+          graphData.addEdge(e);
+          if (newNodes) {
+            newNodes[edge.outV] = true;
+          }
+        });
+      }
     }
   }
-  if (Object.prototype.hasOwnProperty.call(vertex, "inE")) {
-    const inE = vertex.inE;
-    for (const label in inE) {
-      $.each(inE[label], (index: number, edge: EdgePropertyType) => {
-        // We create our own edge. No need to fetch
-        const e = {
-          id: edge.id,
-          label: label,
-          inV: vertex.id,
-          outV: edge.outV,
-        };
 
-        graphData.addEdge(e);
-        if (newNodes) {
-          newNodes[edge.outV] = true;
-        }
-      });
+  /**
+   * From ['id1', 'id2', 'idn'] build the following string "'id1','id2','idn'".
+   * The string length cannot exceed maxSize.
+   *  @param array
+   * @param maxSize
+   * @return
+   */
+  public static getLimitedArrayString(array: string[], maxSize: number): JoinArrayMaxCharOutput {
+    if (!array || array.length === 0 || array[0].length + 2 > maxSize) {
+      return { result: "", consumedCount: 0 };
     }
-  }
-}
 
-/**
- * From ['id1', 'id2', 'idn'] build the following string "'id1','id2','idn'".
- * The string length cannot exceed maxSize.
- *  @param array
- * @param maxSize
- * @return
- */
-export function getLimitedArrayString(array: string[], maxSize: number): JoinArrayMaxCharOutput {
-  if (!array || array.length === 0 || array[0].length + 2 > maxSize) {
-    return { result: "", consumedCount: 0 };
+    const end = array.length - 1;
+    let output = `'${array[0]}'`;
+    let i = 0;
+    for (; i < end; i++) {
+      const candidate = `${output},'${array[i + 1]}'`;
+      if (candidate.length <= maxSize) {
+        output = candidate;
+      } else {
+        break;
+      }
+    }
+
+    return {
+      result: output,
+      consumedCount: i + 1,
+    };
   }
 
-  const end = array.length - 1;
-  let output = `'${array[0]}'`;
-  let i = 0;
-  for (; i < end; i++) {
-    const candidate = `${output},'${array[i + 1]}'`;
-    if (candidate.length <= maxSize) {
-      output = candidate;
+  public static createFetchEdgePairQuery(
+    outE: boolean,
+    pkid: string,
+    excludedEdgeIds: string[],
+    startIndex: number,
+    pageSize: number,
+    withoutStepArgMaxLenght: number
+  ): string {
+    let gremlinQuery: string;
+    if (excludedEdgeIds.length > 0) {
+      // build a string up to max char
+      const joined = GraphUtil.getLimitedArrayString(excludedEdgeIds, withoutStepArgMaxLenght);
+      const hasWithoutStep = !!joined.result ? `.has(id, without(${joined.result}))` : "";
+
+      if (joined.consumedCount === excludedEdgeIds.length) {
+        gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}()${hasWithoutStep}.limit(${pageSize}).as('e').${
+          outE ? "inV" : "outV"
+        }().as('v').select('e', 'v')`;
+      } else {
+        const start = startIndex - joined.consumedCount;
+        gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}()${hasWithoutStep}.range(${start},${
+          start + pageSize
+        }).as('e').${outE ? "inV" : "outV"}().as('v').select('e', 'v')`;
+      }
     } else {
-      break;
-    }
-  }
-
-  return {
-    result: output,
-    consumedCount: i + 1,
-  };
-}
-
-export function createFetchEdgePairQuery(
-  outE: boolean,
-  pkid: string,
-  excludedEdgeIds: string[],
-  startIndex: number,
-  pageSize: number,
-  withoutStepArgMaxLenght: number
-): string {
-  let gremlinQuery: string;
-  if (excludedEdgeIds.length > 0) {
-    // build a string up to max char
-    const joined = getLimitedArrayString(excludedEdgeIds, withoutStepArgMaxLenght);
-    const hasWithoutStep = joined.result ? `.has(id, without(${joined.result}))` : "";
-
-    if (joined.consumedCount === excludedEdgeIds.length) {
-      gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}()${hasWithoutStep}.limit(${pageSize}).as('e').${
+      gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}().limit(${pageSize}).as('e').${
         outE ? "inV" : "outV"
       }().as('v').select('e', 'v')`;
-    } else {
-      const start = startIndex - joined.consumedCount;
-      gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}()${hasWithoutStep}.range(${start},${
-        start + pageSize
-      }).as('e').${outE ? "inV" : "outV"}().as('v').select('e', 'v')`;
     }
-  } else {
-    gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}().limit(${pageSize}).as('e').${
-      outE ? "inV" : "outV"
-    }().as('v').select('e', 'v')`;
+    return gremlinQuery;
   }
-  return gremlinQuery;
-}
 
-/**
- * Trim graph
- */
-export function trimGraph(
-  currentRoot: GraphData.GremlinVertex,
-  graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
-) {
-  const importantNodes = [currentRoot.id].concat(currentRoot._ancestorsId);
-  graphData.unloadAllVertices(importantNodes);
+  /**
+   * Trim graph
+   */
+  public static trimGraph(
+    currentRoot: GraphData.GremlinVertex,
+    graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
+  ) {
+    const importantNodes = [currentRoot.id].concat(currentRoot._ancestorsId);
+    graphData.unloadAllVertices(importantNodes);
 
-  // Keep only ancestors node in fixed position
-  $.each(graphData.ids, (index: number, id: string) => {
-    graphData.getVertexById(id)._isFixedPosition = importantNodes.indexOf(id) !== -1;
-  });
-}
+    // Keep only ancestors node in fixed position
+    $.each(graphData.ids, (index: number, id: string) => {
+      graphData.getVertexById(id)._isFixedPosition = importantNodes.indexOf(id) !== -1;
+    });
+  }
 
-export function addRootChildToGraph(
-  root: GraphData.GremlinVertex,
-  child: GraphData.GremlinVertex,
-  graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
-) {
-  child._ancestorsId = (root._ancestorsId || []).concat([root.id]);
-  graphData.addVertex(child);
-  createEdgesfromNode(child, graphData);
-  graphData.addNeighborInfo(child);
-}
+  public static addRootChildToGraph(
+    root: GraphData.GremlinVertex,
+    child: GraphData.GremlinVertex,
+    graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
+  ) {
+    child._ancestorsId = (root._ancestorsId || []).concat([root.id]);
+    graphData.addVertex(child);
+    GraphUtil.createEdgesfromNode(child, graphData);
+    graphData.addNeighborInfo(child);
+  }
 
-/**
- * TODO Perform minimal substitution to prevent breaking gremlin query and allow \"" for now.
- * @param value
- */
-export function escapeDoubleQuotes(value: string): string {
-  return value === undefined ? value : value.replace(/"/g, '\\"');
-}
+  /**
+   * TODO Perform minimal substitution to prevent breaking gremlin query and allow \"" for now.
+   * @param value
+   */
+  public static escapeDoubleQuotes(value: string): string {
+    return value == null ? value : value.replace(/"/g, '\\"');
+  }
 
-/**
- * Surround with double-quotes if val is a string.
- * @param val
- */
-export function getQuotedPropValue(ip: ViewModels.InputPropertyValue): string {
-  switch (ip.type) {
-    case "number":
-    case "boolean":
-      return `${ip.value}`;
-    case "null":
-      return undefined;
-    default:
-      return `"${escapeDoubleQuotes(ip.value as string)}"`;
+  /**
+   * Surround with double-quotes if val is a string.
+   * @param val
+   */
+  public static getQuotedPropValue(ip: ViewModels.InputPropertyValue): string {
+    switch (ip.type) {
+      case "number":
+      case "boolean":
+        return `${ip.value}`;
+      case "null":
+        return null;
+      default:
+        return `"${GraphUtil.escapeDoubleQuotes(ip.value as string)}"`;
+    }
+  }
+
+  /**
+   * TODO Perform minimal substitution to prevent breaking gremlin query and allow \' for now.
+   * @param value
+   */
+  public static escapeSingleQuotes(value: string): string {
+    return value == null ? value : value.replace(/'/g, "\\'");
   }
 }
-
-/**
- * TODO Perform minimal substitution to prevent breaking gremlin query and allow \' for now.
- * @param value
- */
-export function escapeSingleQuotes(value: string): string {
-  return value === undefined ? value : value.replace(/'/g, "\\'");
-}

src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNeighborsComponent.tsx

@@ -5,7 +5,7 @@
 
 import * as React from "react";
 import { GraphHighlightedNodeData, NeighborVertexBasicInfo } from "./GraphExplorer";
-import * as GraphUtil from "./GraphUtil";
+import { GraphUtil } from "./GraphUtil";
 import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
 
 export interface ReadOnlyNeighborsComponentProps {

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 * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
+import { 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 * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
+import { CommandBarComponentButtonFactory } from "./CommandBarComponentButtonFactory";
 import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
 import NotebookManager from "../../Notebook/NotebookManager";
 import Explorer from "../../Explorer";
@@ -19,6 +19,7 @@ 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);
@@ -60,6 +61,7 @@ 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);
@@ -123,6 +125,7 @@ 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);
@@ -204,6 +207,7 @@ 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);
@@ -291,6 +295,7 @@ 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

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

@@ -1,579 +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 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, {
-          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];
-}