merge master and resolve code conflict

2025-12-23 02:41:39 +00:00 · 2021-05-06 16:12:30 +05:30
parent cc4f20e482 23223cfb23
commit 2c58cd7be1
193 changed files with 6769 additions and 7218 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -138,6 +138,7 @@ jobs:
      matrix:
        test-file:
          - ./test/cassandra/container.spec.ts
+          - ./test/graph/container.spec.ts
          - ./test/sql/container.spec.ts
          - ./test/mongo/container.spec.ts
          - ./test/selfServe/selfServeExample.spec.ts
--- a/jest.config.js
+++ b/jest.config.js
@@ -71,7 +71,8 @@ module.exports = {
  moduleNameMapper: {
    "^.*[.](svg|png|gif|less|css)$": "<rootDir>/mockModule",
    "@nteract/stateful-components/(.*)$": "<rootDir>/mockModule",
-    "office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1", // https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes
+    "@fluentui/react/lib/(.*)$": "@fluentui/react/lib-commonjs/$1", // https://github.com/microsoft/fluentui/wiki/Version-8-release-notes
+    "monaco-editor/(.*)$": "<rootDir>/__mocks__/monaco-editor",
    "^dnd-core$": "dnd-core/dist/cjs",
    "^react-dnd$": "react-dnd/dist/cjs",
    "^react-dnd-html5-backend$": "react-dnd-html5-backend/dist/cjs",
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
    "@azure/ms-rest-nodeauth": "3.0.7",
    "@babel/plugin-proposal-class-properties": "7.13.0",
    "@babel/plugin-proposal-decorators": "7.13.15",
+    "@fluentui/react": "8.10.1",
    "@jupyterlab/services": "6.0.2",
    "@jupyterlab/terminal": "3.0.3",
    "@microsoft/applicationinsights-web": "2.6.1",
@@ -43,7 +44,6 @@
    "@types/mkdirp": "1.0.1",
    "@types/node-fetch": "2.5.7",
    "@uifabric/react-cards": "0.109.110",
-    "@uifabric/styling": "7.13.7",
    "applicationinsights": "1.8.0",
    "bootstrap": "3.4.1",
    "canvas": "file:./canvas",
@@ -75,7 +75,6 @@
    "monaco-editor": "0.18.1",
    "ms": "2.1.3",
    "msal": "1.4.4",
-    "office-ui-fabric-react": "7.164.2",
    "p-retry": "4.2.0",
    "plotly.js-cartesian-dist-min": "1.52.3",
    "post-robot": "10.0.42",
@@ -111,15 +110,12 @@
    "@types/crossroads": "0.0.30",
    "@types/d3": "5.9.2",
    "@types/enzyme": "3.10.8",
-    "@types/expect-puppeteer": "4.4.5",
    "@types/hasher": "0.0.31",
    "@types/jest": "26.0.23",
-    "@types/jest-environment-puppeteer": "4.4.1",
    "@types/memoize-one": "4.1.1",
    "@types/node": "12.11.1",
    "@types/post-robot": "10.0.1",
    "@types/promise.prototype.finally": "2.0.3",
-    "@types/puppeteer": "5.4.3",
    "@types/q": "1.5.1",
    "@types/react": "17.0.3",
    "@types/react-dom": "17.0.3",
@@ -139,7 +135,7 @@
    "clean-webpack-plugin": "4.0.0-alpha.0",
    "copy-webpack-plugin": "8.1.1",
    "create-file-webpack": "1.0.2",
-    "css-loader": "5.2.4",
+    "css-loader": "1.0.0",
    "enzyme": "3.11.0",
    "enzyme-to-json": "3.6.2",
    "eslint": "7.25.0",
@@ -163,7 +159,7 @@
    "less": "4.1.1",
    "less-loader": "8.1.1",
    "less-vars-loader": "1.1.0",
-    "mini-css-extract-plugin": "1.6.0",
+    "mini-css-extract-plugin": "1.5.0",
    "monaco-editor-webpack-plugin": "1.7.0",
    "node-fetch": "2.6.1",
    "playwright": "1.10.0",
--- a/src/CellOutputViewer/CellOutputViewer.less
+++ b/src/CellOutputViewer/CellOutputViewer.less
@@ -0,0 +1,10 @@
+.schema-analyzer-cell-outputs {
+  padding:  10px;
+}
+
+.schema-analyzer-cell-output {
+  margin-bottom: 20px;
+  padding: 10px;
+  border-radius: 2px;
+  box-shadow: rgba(0, 0, 0, 13%) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 11%) 0px 0.3px 0.9px 0px;
+}
--- a/src/CellOutputViewer/CellOutputViewer.tsx
+++ b/src/CellOutputViewer/CellOutputViewer.tsx
@@ -11,13 +11,14 @@ import * as ReactDOM from "react-dom";
 import "../../externals/iframeResizer.contentWindow.min.js"; // Required for iFrameResizer to work
 import "../Explorer/Notebook/NotebookRenderer/base.css";
 import "../Explorer/Notebook/NotebookRenderer/default.css";
+import "./CellOutputViewer.less";
 import { TransformMedia } from "./TransformMedia";

 export interface CellOutputViewerProps {
  id: string;
  contentRef: ContentRef;
-  hidden: boolean;
-  expanded: boolean;
+  outputsContainerClassName: string;
+  outputClassName: string;
  outputs: OnDiskOutput[];
  onMetadataChange: (metadata: JSONObject, mediaType: string, index?: number) => void;
 }
@@ -34,27 +35,26 @@ const onInit = async () => {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const props = (event as any).data as CellOutputViewerProps;
      const outputs = (
-        <div
-          data-iframe-height
-          className={`nteract-cell-outputs ${props.hidden ? "hidden" : ""} ${props.expanded ? "expanded" : ""}`}
-        >
+        <div data-iframe-height className={props.outputsContainerClassName}>
          {props.outputs?.map((output, index) => (
-            <Output output={createImmutableOutput(output)} key={index}>
-              <TransformMedia
-                output_type={"display_data"}
-                id={props.id}
-                contentRef={props.contentRef}
-                onMetadataChange={(metadata, mediaType) => props.onMetadataChange(metadata, mediaType, index)}
-              />
-              <TransformMedia
-                output_type={"execute_result"}
-                id={props.id}
-                contentRef={props.contentRef}
-                onMetadataChange={(metadata, mediaType) => props.onMetadataChange(metadata, mediaType, index)}
-              />
-              <KernelOutputError />
-              <StreamText />
-            </Output>
+            <div className={props.outputClassName} key={index}>
+              <Output output={createImmutableOutput(output)} key={index}>
+                <TransformMedia
+                  output_type={"display_data"}
+                  id={props.id}
+                  contentRef={props.contentRef}
+                  onMetadataChange={(metadata, mediaType) => props.onMetadataChange(metadata, mediaType, index)}
+                />
+                <TransformMedia
+                  output_type={"execute_result"}
+                  id={props.id}
+                  contentRef={props.contentRef}
+                  onMetadataChange={(metadata, mediaType) => props.onMetadataChange(metadata, mediaType, index)}
+                />
+                <KernelOutputError />
+                <StreamText />
+              </Output>
+            </div>
          ))}
        </div>
      );
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -65,28 +65,18 @@ export class ClientDefaults {
  public static readonly arcadiaTokenRefreshIntervalPaddingMs: number = 2000;
 }

-export class AccountKind {
-  public static DocumentDB: string = "DocumentDB";
-  public static MongoDB: string = "MongoDB";
-  public static Parse: string = "Parse";
-  public static GlobalDocumentDB: string = "GlobalDocumentDB";
-  public static Default: string = AccountKind.DocumentDB;
+export enum AccountKind {
+  DocumentDB = "DocumentDB",
+  MongoDB = "MongoDB",
+  Parse = "Parse",
+  GlobalDocumentDB = "GlobalDocumentDB",
+  Default = "DocumentDB",
 }

 export class CorrelationBackend {
  public static Url: string = "https://aka.ms/cosmosdbanalytics";
 }

-export class DefaultAccountExperience {
-  public static DocumentDB: string = "DocumentDB";
-  public static Graph: string = "Graph";
-  public static MongoDB: string = "MongoDB";
-  public static ApiForMongoDB: string = "Azure Cosmos DB for MongoDB API";
-  public static Table: string = "Table";
-  public static Cassandra: string = "Cassandra";
-  public static Default: string = DefaultAccountExperience.DocumentDB;
-}
-
 export class CapabilityNames {
  public static EnableTable: string = "EnableTable";
  public static EnableGremlin: string = "EnableGremlin";
--- a/src/Common/CosmosClient.test.ts
+++ b/src/Common/CosmosClient.test.ts
@@ -1,5 +1,5 @@
 import { ResourceType } from "@azure/cosmos/dist-esm/common/constants";
-import { configContext, Platform, updateConfigContext, resetConfigContext } from "../ConfigContext";
+import { Platform, resetConfigContext, updateConfigContext } from "../ConfigContext";
 import { updateUserContext } from "../UserContext";
 import { endpoint, getTokenFromAuthService, requestPlugin, tokenProvider } from "./CosmosClient";

@@ -91,7 +91,6 @@ describe("endpoint", () => {
        location: "foo",
        type: "foo",
        kind: "foo",
-        tags: [],
        properties: {
          documentEndpoint: "bar",
          gremlinEndpoint: "foo",
--- a/src/Common/CosmosClient.ts
+++ b/src/Common/CosmosClient.ts
@@ -43,12 +43,7 @@ export const endpoint = () => {
    const location = _global.parent ? _global.parent.location : _global.location;
    return configContext.EMULATOR_ENDPOINT || location.origin;
  }
-  return (
-    userContext.endpoint ||
-    (userContext.databaseAccount &&
-      userContext.databaseAccount.properties &&
-      userContext.databaseAccount.properties.documentEndpoint)
-  );
+  return userContext.endpoint || userContext?.databaseAccount?.properties?.documentEndpoint;
 };

 export async function getTokenFromAuthService(verb: string, resourceType: string, resourceId?: string): Promise<any> {
--- a/src/Common/EntityValue.tsx
+++ b/src/Common/EntityValue.tsx
@@ -1,4 +1,4 @@
-import { DatePicker, TextField } from "office-ui-fabric-react";
+import { DatePicker, TextField } from "@fluentui/react";
 import React, { FunctionComponent } from "react";

 export interface TableEntityProps {
--- a/src/Common/MongoProxyClient.ts
+++ b/src/Common/MongoProxyClient.ts
@@ -61,7 +61,7 @@ export function queryDocuments(
  query: string,
  continuationToken?: string
 ): Promise<QueryResponse> {
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount } = userContext;
  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
  const params = {
    db: databaseId,
@@ -121,7 +121,7 @@ export function readDocument(
  collection: Collection,
  documentId: DocumentId
 ): Promise<DataModels.DocumentId> {
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount } = userContext;
  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
  const idComponents = documentId.self.split("/");
  const path = idComponents.slice(0, 4).join("/");
@@ -167,7 +167,7 @@ export function createDocument(
  partitionKeyProperty: string,
  documentContent: unknown
 ): Promise<DataModels.DocumentId> {
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount } = userContext;
  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
  const params = {
    db: databaseId,
@@ -206,7 +206,7 @@ export function updateDocument(
  documentId: DocumentId,
  documentContent: string
 ): Promise<DataModels.DocumentId> {
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount } = userContext;
  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
  const idComponents = documentId.self.split("/");
  const path = idComponents.slice(0, 5).join("/");
@@ -247,7 +247,7 @@ export function updateDocument(
 }

 export function deleteDocument(databaseId: string, collection: Collection, documentId: DocumentId): Promise<void> {
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount } = userContext;
  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
  const idComponents = documentId.self.split("/");
  const path = idComponents.slice(0, 5).join("/");
@@ -289,7 +289,7 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
 export function createMongoCollectionWithProxy(
  params: DataModels.CreateCollectionParams
 ): Promise<DataModels.Collection> {
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount } = userContext;
  const shardKey: string = params.partitionKey?.paths[0];
  const mongoParams: DataModels.MongoParameters = {
    resourceUrl: databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint,
--- a/src/Common/PortalNotifications.ts
+++ b/src/Common/PortalNotifications.ts
@@ -1,8 +1,8 @@
+import { configContext, Platform } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
-import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
 import { userContext } from "../UserContext";
-import { configContext, Platform } from "../ConfigContext";
+import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";

 const notificationsPath = () => {
  switch (configContext.platform) {
@@ -20,9 +20,7 @@ export const fetchPortalNotifications = async (): Promise<DataModels.Notificatio
    return [];
  }

-  const databaseAccount = userContext.databaseAccount;
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
+  const { databaseAccount, resourceGroup, subscriptionId } = userContext;
  const url = `${configContext.BACKEND_ENDPOINT}${notificationsPath()}?accountName=${
    databaseAccount.name
  }&subscriptionId=${subscriptionId}&resourceGroup=${resourceGroup}`;
--- a/src/Common/QueriesClient.ts
+++ b/src/Common/QueriesClient.ts
@@ -182,11 +182,8 @@ export class QueriesClient {
  }

  public getResourceId(): string {
-    const databaseAccount = userContext.databaseAccount;
-    const databaseAccountName = (databaseAccount && databaseAccount.name) || "";
-    const subscriptionId = userContext.subscriptionId || "";
-    const resourceGroup = userContext.resourceGroup || "";
-
+    const { databaseAccount, subscriptionId = "", resourceGroup = "" } = userContext;
+    const databaseAccountName = databaseAccount?.name || "";
    return `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDb/databaseAccounts/${databaseAccountName}`;
  }

--- a/src/Common/TableEntity.tsx
+++ b/src/Common/TableEntity.tsx
@@ -10,7 +10,7 @@ import {
  Stack,
  TextField,
  TooltipHost,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import React, { FunctionComponent } from "react";
 import { CassandraType, TableType } from "../Explorer/Tables/Constants";
 import { userContext } from "../UserContext";
--- a/src/Common/Tooltip/Tooltip.tsx
+++ b/src/Common/Tooltip/Tooltip.tsx
@@ -1,6 +1,6 @@
-import { useId } from "@uifabric/react-hooks";
+import { ITooltipHostStyles, TooltipHost } from "@fluentui/react";
+import { useId } from "@fluentui/react-hooks";
 import { ReactComponent as InfoBubble } from "images/info-bubble.svg";
-import { ITooltipHostStyles, TooltipHost } from "office-ui-fabric-react/lib/Tooltip";
 import * as React from "react";

 const calloutProps = { gapSpace: 0 };
--- a/src/Common/Upload/Upload.tsx
+++ b/src/Common/Upload/Upload.tsx
@@ -1,5 +1,5 @@
+import { Image, Stack, TextField } from "@fluentui/react";
 import FolderIcon from "images/folder_16x16.svg";
-import { Image, Stack, TextField } from "office-ui-fabric-react";
 import React, { ChangeEvent, FunctionComponent, KeyboardEvent, useRef, useState } from "react";
 import * as Constants from "../Constants";
 import { Tooltip } from "../Tooltip/Tooltip";
--- a/src/Common/dataAccess/createCollection.ts
+++ b/src/Common/dataAccess/createCollection.ts
@@ -62,8 +62,8 @@ export const createCollection = async (params: DataModels.CreateCollectionParams
 };

 const createCollectionWithARM = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
-  const defaultExperience = userContext.apiType;
-  switch (defaultExperience) {
+  const { apiType } = userContext;
+  switch (apiType) {
    case "SQL":
      return createSqlContainer(params);
    case "Mongo":
@@ -75,7 +75,7 @@ const createCollectionWithARM = async (params: DataModels.CreateCollectionParams
    case "Tables":
      return createTable(params);
    default:
-      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+      throw new Error(`Unsupported default experience type: ${apiType}`);
  }
 };

--- a/src/Common/dataAccess/createDatabase.ts
+++ b/src/Common/dataAccess/createDatabase.ts
@@ -48,8 +48,9 @@ export async function createDatabase(params: DataModels.CreateDatabaseParams): P
 }

 async function createDatabaseWithARM(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
-  const defaultExperience = userContext.apiType;
-  switch (defaultExperience) {
+  const { apiType } = userContext;
+
+  switch (apiType) {
    case "SQL":
      return createSqlDatabase(params);
    case "Mongo":
@@ -59,7 +60,7 @@ async function createDatabaseWithARM(params: DataModels.CreateDatabaseParams): P
    case "Gremlin":
      return createGremlineDatabase(params);
    default:
-      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+      throw new Error(`Unsupported default experience type: ${apiType}`);
  }
 }

--- a/src/Common/dataAccess/deleteCollection.ts
+++ b/src/Common/dataAccess/deleteCollection.ts
@@ -27,12 +27,10 @@ export async function deleteCollection(databaseId: string, collectionId: string)
 }

 function deleteCollectionWithARM(databaseId: string, collectionId: string): Promise<void> {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-  const defaultExperience = userContext.apiType;
+  const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext;
+  const accountName = databaseAccount.name;

-  switch (defaultExperience) {
+  switch (apiType) {
    case "SQL":
      return deleteSqlContainer(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
    case "Mongo":
@@ -44,6 +42,6 @@ function deleteCollectionWithARM(databaseId: string, collectionId: string): Prom
    case "Tables":
      return deleteTable(subscriptionId, resourceGroup, accountName, collectionId);
    default:
-      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+      throw new Error(`Unsupported default experience type: ${apiType}`);
  }
 }
--- a/src/Common/dataAccess/deleteDatabase.ts
+++ b/src/Common/dataAccess/deleteDatabase.ts
@@ -30,12 +30,10 @@ export async function deleteDatabase(databaseId: string): Promise<void> {
 }

 function deleteDatabaseWithARM(databaseId: string): Promise<void> {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-  const defaultExperience = userContext.apiType;
+  const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext;
+  const accountName = databaseAccount.name;

-  switch (defaultExperience) {
+  switch (apiType) {
    case "SQL":
      return deleteSqlDatabase(subscriptionId, resourceGroup, accountName, databaseId);
    case "Mongo":
@@ -45,6 +43,6 @@ function deleteDatabaseWithARM(databaseId: string): Promise<void> {
    case "Gremlin":
      return deleteGremlinDatabase(subscriptionId, resourceGroup, accountName, databaseId);
    default:
-      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+      throw new Error(`Unsupported default experience type: ${apiType}`);
  }
 }
--- a/src/Common/dataAccess/getCollectionDataUsageSize.ts
+++ b/src/Common/dataAccess/getCollectionDataUsageSize.ts
@@ -1,8 +1,8 @@
 import { AuthType } from "../../AuthType";
-import { armRequest } from "../../Utils/arm/request";
 import { configContext } from "../../ConfigContext";
-import { handleError } from "../ErrorHandlingUtils";
 import { userContext } from "../../UserContext";
+import { armRequest } from "../../Utils/arm/request";
+import { handleError } from "../ErrorHandlingUtils";

 interface TimeSeriesData {
  data: {
@@ -45,9 +45,9 @@ export const getCollectionUsageSizeInKB = async (databaseName: string, container
    return undefined;
  }

-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
+  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
+  const accountName = databaseAccount.name;
+
  const filter = `DatabaseName eq '${databaseName}' and CollectionName eq '${containerName}'`;
  const metricNames = "DataUsage,IndexUsage";
  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/providers/microsoft.insights/metrics`;
--- a/src/Common/dataAccess/readCollectionOffer.ts
+++ b/src/Common/dataAccess/readCollectionOffer.ts
@@ -28,14 +28,12 @@ export const readCollectionOffer = async (params: ReadCollectionOfferParams): Pr
 };

 const readCollectionOfferWithARM = async (databaseId: string, collectionId: string): Promise<Offer> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-  const defaultExperience = userContext.apiType;
+  const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext;
+  const accountName = databaseAccount.name;

  let rpResponse;
  try {
-    switch (defaultExperience) {
+    switch (apiType) {
      case "SQL":
        rpResponse = await getSqlContainerThroughput(
          subscriptionId,
@@ -76,7 +74,7 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
        rpResponse = await getTableThroughput(subscriptionId, resourceGroup, accountName, collectionId);
        break;
      default:
-        throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+        throw new Error(`Unsupported default experience type: ${apiType}`);
    }
  } catch (error) {
    if (error.code !== "NotFound") {
--- a/src/Common/dataAccess/readCollections.ts
+++ b/src/Common/dataAccess/readCollections.ts
@@ -29,12 +29,11 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co

 async function readCollectionsWithARM(databaseId: string): Promise<DataModels.Collection[]> {
  let rpResponse;
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-  const defaultExperience = userContext.apiType;

-  switch (defaultExperience) {
+  const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext;
+  const accountName = databaseAccount.name;
+
+  switch (apiType) {
    case "SQL":
      rpResponse = await listSqlContainers(subscriptionId, resourceGroup, accountName, databaseId);
      break;
@@ -51,7 +50,7 @@ async function readCollectionsWithARM(databaseId: string): Promise<DataModels.Co
      rpResponse = await listTables(subscriptionId, resourceGroup, accountName);
      break;
    default:
-      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+      throw new Error(`Unsupported default experience type: ${apiType}`);
  }

  return rpResponse?.value?.map((collection) => collection.properties?.resource as DataModels.Collection);
--- a/src/Common/dataAccess/readDatabaseOffer.ts
+++ b/src/Common/dataAccess/readDatabaseOffer.ts
@@ -27,14 +27,12 @@ export const readDatabaseOffer = async (params: ReadDatabaseOfferParams): Promis
 };

 const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-  const defaultExperience = userContext.apiType;
+  const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext;
+  const accountName = databaseAccount.name;

  let rpResponse;
  try {
-    switch (defaultExperience) {
+    switch (apiType) {
      case "SQL":
        rpResponse = await getSqlDatabaseThroughput(subscriptionId, resourceGroup, accountName, databaseId);
        break;
@@ -48,7 +46,7 @@ const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
        rpResponse = await getGremlinDatabaseThroughput(subscriptionId, resourceGroup, accountName, databaseId);
        break;
      default:
-        throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+        throw new Error(`Unsupported default experience type: ${apiType}`);
    }
  } catch (error) {
    if (error.code !== "NotFound") {
--- a/src/Common/dataAccess/readDatabases.ts
+++ b/src/Common/dataAccess/readDatabases.ts
@@ -29,12 +29,10 @@ export async function readDatabases(): Promise<DataModels.Database[]> {

 async function readDatabasesWithARM(): Promise<DataModels.Database[]> {
  let rpResponse;
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-  const defaultExperience = userContext.apiType;
+  const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext;
+  const accountName = databaseAccount.name;

-  switch (defaultExperience) {
+  switch (apiType) {
    case "SQL":
      rpResponse = await listSqlDatabases(subscriptionId, resourceGroup, accountName);
      break;
@@ -48,7 +46,7 @@ async function readDatabasesWithARM(): Promise<DataModels.Database[]> {
      rpResponse = await listGremlinDatabases(subscriptionId, resourceGroup, accountName);
      break;
    default:
-      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+      throw new Error(`Unsupported default experience type: ${apiType}`);
  }

  return rpResponse?.value?.map((database) => database.properties?.resource as DataModels.Database);
--- a/src/Common/dataAccess/readMongoDBCollection.tsx
+++ b/src/Common/dataAccess/readMongoDBCollection.tsx
@@ -1,9 +1,9 @@
+import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
 import { getMongoDBCollection } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
 import { MongoDBCollectionResource } from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { handleError } from "../ErrorHandlingUtils";
-import { AuthType } from "../../AuthType";

 export async function readMongoDBCollectionThroughRP(
  databaseId: string,
@@ -13,9 +13,9 @@ export async function readMongoDBCollectionThroughRP(
    return undefined;
  }
  let collection: MongoDBCollectionResource;
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
+
+  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
+  const accountName = databaseAccount.name;

  const clearMessage = logConsoleProgress(`Reading container ${collectionId}`);
  try {
--- a/src/Common/dataAccess/readUserDefinedFunctions.ts
+++ b/src/Common/dataAccess/readUserDefinedFunctions.ts
@@ -11,12 +11,13 @@ export async function readUserDefinedFunctions(
  collectionId: string
 ): Promise<(UserDefinedFunctionDefinition & Resource)[]> {
  const clearMessage = logConsoleProgress(`Querying user defined functions for container ${collectionId}`);
+  const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
  try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
+    if (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") {
      const rpResponse = await listSqlUserDefinedFunctions(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount.name,
+        subscriptionId,
+        resourceGroup,
+        databaseAccount.name,
        databaseId,
        collectionId
      );
--- a/src/Common/dataAccess/updateCollection.ts
+++ b/src/Common/dataAccess/updateCollection.ts
@@ -63,12 +63,10 @@ async function updateCollectionWithARM(
  collectionId: string,
  newCollection: Partial<Collection>
 ): Promise<Collection> {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-  const defaultExperience = userContext.apiType;
+  const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext;
+  const accountName = databaseAccount.name;

-  switch (defaultExperience) {
+  switch (apiType) {
    case "SQL":
      return updateSqlContainer(databaseId, collectionId, subscriptionId, resourceGroup, accountName, newCollection);
    case "Cassandra":
@@ -87,7 +85,7 @@ async function updateCollectionWithARM(
        newCollection
      );
    default:
-      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+      throw new Error(`Unsupported default experience type: ${apiType}`);
  }
 }

--- a/src/Common/dataAccess/updateOffer.ts
+++ b/src/Common/dataAccess/updateOffer.ts
@@ -144,9 +144,8 @@ const updateDatabaseOfferWithARM = async (params: UpdateOfferParams): Promise<Of
 };

 const updateSqlContainerOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
+  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
+  const accountName = databaseAccount.name;

  if (params.migrateToAutoPilot) {
    await migrateSqlContainerToAutoscale(
@@ -178,9 +177,8 @@ const updateSqlContainerOffer = async (params: UpdateOfferParams): Promise<void>
 };

 const updateMongoCollectionOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
+  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
+  const accountName = databaseAccount.name;

  if (params.migrateToAutoPilot) {
    await migrateMongoDBCollectionToAutoscale(
@@ -212,9 +210,8 @@ const updateMongoCollectionOffer = async (params: UpdateOfferParams): Promise<vo
 };

 const updateCassandraTableOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
+  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
+  const accountName = databaseAccount.name;

  if (params.migrateToAutoPilot) {
    await migrateCassandraTableToAutoscale(
@@ -246,9 +243,8 @@ const updateCassandraTableOffer = async (params: UpdateOfferParams): Promise<voi
 };

 const updateGremlinGraphOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
+  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
+  const accountName = databaseAccount.name;

  if (params.migrateToAutoPilot) {
    await migrateGremlinGraphToAutoscale(
@@ -280,9 +276,8 @@ const updateGremlinGraphOffer = async (params: UpdateOfferParams): Promise<void>
 };

 const updateTableOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
+  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
+  const accountName = databaseAccount.name;

  if (params.migrateToAutoPilot) {
    await migrateTableToAutoscale(subscriptionId, resourceGroup, accountName, params.collectionId);
@@ -295,9 +290,8 @@ const updateTableOffer = async (params: UpdateOfferParams): Promise<void> => {
 };

 const updateSqlDatabaseOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
+  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
+  const accountName = databaseAccount.name;

  if (params.migrateToAutoPilot) {
    await migrateSqlDatabaseToAutoscale(subscriptionId, resourceGroup, accountName, params.databaseId);
@@ -310,9 +304,8 @@ const updateSqlDatabaseOffer = async (params: UpdateOfferParams): Promise<void>
 };

 const updateMongoDatabaseOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
+  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
+  const accountName = databaseAccount.name;

  if (params.migrateToAutoPilot) {
    await migrateMongoDBDatabaseToAutoscale(subscriptionId, resourceGroup, accountName, params.databaseId);
@@ -325,9 +318,8 @@ const updateMongoDatabaseOffer = async (params: UpdateOfferParams): Promise<void
 };

 const updateCassandraKeyspaceOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
+  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
+  const accountName = databaseAccount.name;

  if (params.migrateToAutoPilot) {
    await migrateCassandraKeyspaceToAutoscale(subscriptionId, resourceGroup, accountName, params.databaseId);
@@ -340,9 +332,8 @@ const updateCassandraKeyspaceOffer = async (params: UpdateOfferParams): Promise<
 };

 const updateGremlinDatabaseOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
+  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
+  const accountName = databaseAccount.name;

  if (params.migrateToAutoPilot) {
    await migrateGremlinDatabaseToAutoscale(subscriptionId, resourceGroup, accountName, params.databaseId);
--- a/src/Common/dataAccess/updateStoredProcedure.ts
+++ b/src/Common/dataAccess/updateStoredProcedure.ts
@@ -20,11 +20,13 @@ export async function updateStoredProcedure(
 ): Promise<StoredProcedureDefinition & Resource> {
  const clearMessage = logConsoleProgress(`Updating stored procedure ${storedProcedure.id}`);
  try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
+    const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
+
+    if (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") {
      const getResponse = await getSqlStoredProcedure(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount.name,
+        subscriptionId,
+        resourceGroup,
+        databaseAccount.name,
        databaseId,
        collectionId,
        storedProcedure.id
@@ -38,9 +40,9 @@ export async function updateStoredProcedure(
          },
        };
        const rpResponse = await createUpdateSqlStoredProcedure(
-          userContext.subscriptionId,
-          userContext.resourceGroup,
-          userContext.databaseAccount.name,
+          subscriptionId,
+          resourceGroup,
+          databaseAccount.name,
          databaseId,
          collectionId,
          storedProcedure.id,
--- a/src/Common/dataAccess/updateTrigger.ts
+++ b/src/Common/dataAccess/updateTrigger.ts
@@ -16,12 +16,13 @@ export async function updateTrigger(
  trigger: TriggerDefinition
 ): Promise<TriggerDefinition> {
  const clearMessage = logConsoleProgress(`Updating trigger ${trigger.id}`);
+  const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
  try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
+    if (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") {
      const getResponse = await getSqlTrigger(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount.name,
+        subscriptionId,
+        resourceGroup,
+        databaseAccount.name,
        databaseId,
        collectionId,
        trigger.id
@@ -35,9 +36,9 @@ export async function updateTrigger(
          },
        };
        const rpResponse = await createUpdateSqlTrigger(
-          userContext.subscriptionId,
-          userContext.resourceGroup,
-          userContext.databaseAccount.name,
+          subscriptionId,
+          resourceGroup,
+          databaseAccount.name,
          databaseId,
          collectionId,
          trigger.id,
--- a/src/Common/dataAccess/updateUserDefinedFunction.ts
+++ b/src/Common/dataAccess/updateUserDefinedFunction.ts
@@ -19,12 +19,13 @@ export async function updateUserDefinedFunction(
  userDefinedFunction: UserDefinedFunctionDefinition
 ): Promise<UserDefinedFunctionDefinition & Resource> {
  const clearMessage = logConsoleProgress(`Updating user defined function ${userDefinedFunction.id}`);
+  const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
  try {
-    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
+    if (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") {
      const getResponse = await getSqlUserDefinedFunction(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount.name,
+        subscriptionId,
+        resourceGroup,
+        databaseAccount.name,
        databaseId,
        collectionId,
        userDefinedFunction.id
@@ -38,9 +39,9 @@ export async function updateUserDefinedFunction(
          },
        };
        const rpResponse = await createUpdateSqlUserDefinedFunction(
-          userContext.subscriptionId,
-          userContext.resourceGroup,
-          userContext.databaseAccount.name,
+          subscriptionId,
+          resourceGroup,
+          databaseAccount.name,
          databaseId,
          collectionId,
          userDefinedFunction.id,
--- a/src/Contracts/DataModels.ts
+++ b/src/Contracts/DataModels.ts
@@ -4,7 +4,6 @@ export interface DatabaseAccount {
  location: string;
  type: string;
  kind: string;
-  tags: any;
  properties: DatabaseAccountExtendedProperties;
 }

--- a/src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx
+++ b/src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx
@@ -1,9 +1,8 @@
+import { DefaultButton, IButtonStyles, IContextualMenuItem, IContextualMenuProps } from "@fluentui/react";
 import * as React from "react";
-import { ArcadiaWorkspace, SparkPool } from "../../../Contracts/DataModels";
-import { DefaultButton, IButtonStyles } from "office-ui-fabric-react/lib/Button";
-import { IContextualMenuItem, IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
-import * as Logger from "../../../Common/Logger";
 import { getErrorMessage } from "../../../Common/ErrorHandlingUtils";
+import * as Logger from "../../../Common/Logger";
+import { ArcadiaWorkspace, SparkPool } from "../../../Contracts/DataModels";

 export interface ArcadiaMenuPickerProps {
  selectText?: string;
--- a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
+++ b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
@@ -1,4 +1,4 @@
-import { Icon, Label, Stack } from "office-ui-fabric-react";
+import { Icon, Label, Stack } from "@fluentui/react";
 import * as React from "react";
 import { accordionStackTokens } from "../Settings/SettingsRenderUtils";

--- a/src/Explorer/Controls/Dialog.tsx
+++ b/src/Explorer/Controls/Dialog.tsx
@@ -1,14 +1,20 @@
 import {
  ChoiceGroup,
+  DefaultButton,
+  Dialog as FluentDialog,
+  DialogFooter,
+  DialogType,
  FontIcon,
+  IButtonProps,
  IChoiceGroupProps,
+  IDialogProps,
  IProgressIndicatorProps,
+  ITextFieldProps,
+  Link,
+  PrimaryButton,
  ProgressIndicator,
-} from "office-ui-fabric-react";
-import { DefaultButton, IButtonProps, PrimaryButton } from "office-ui-fabric-react/lib/Button";
-import { Dialog as FluentDialog, DialogFooter, DialogType, IDialogProps } from "office-ui-fabric-react/lib/Dialog";
-import { Link } from "office-ui-fabric-react/lib/Link";
-import { ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
+  TextField,
+} from "@fluentui/react";
 import React, { FunctionComponent } from "react";

 export interface TextFieldProps extends ITextFieldProps {
--- a/src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx
+++ b/src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx
@@ -2,9 +2,9 @@
 * React component for Switch Directory
 */

-import _ from "underscore";
+import { Dropdown, IDropdownOption, IDropdownProps } from "@fluentui/react";
 import * as React from "react";
-import { Dropdown, IDropdownOption, IDropdownProps } from "office-ui-fabric-react/lib/Dropdown";
+import _ from "underscore";
 import { Tenant } from "../../../Contracts/DataModels";

 export interface DefaultDirectoryDropdownProps {
--- a/src/Explorer/Controls/Directory/DirectoryListComponent.tsx
+++ b/src/Explorer/Controls/Directory/DirectoryListComponent.tsx
@@ -1,11 +1,15 @@
-import _ from "underscore";
+import {
+  DefaultButton,
+  IButtonProps,
+  ITextFieldProps,
+  List,
+  ScrollablePane,
+  Sticky,
+  StickyPositionType,
+  TextField,
+} from "@fluentui/react";
 import * as React from "react";
-
-import { DefaultButton, IButtonProps } from "office-ui-fabric-react/lib/Button";
-import { List } from "office-ui-fabric-react/lib/List";
-import { ScrollablePane } from "office-ui-fabric-react/lib/ScrollablePane";
-import { Sticky, StickyPositionType } from "office-ui-fabric-react/lib/Sticky";
-import { TextField, ITextFieldProps } from "office-ui-fabric-react/lib/TextField";
+import _ from "underscore";
 import { Tenant } from "../../../Contracts/DataModels";

 export interface DirectoryListProps {
--- a/src/Explorer/Controls/Directory/snapshots/DefaultDirectoryDropdownComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Directory/snapshots/DefaultDirectoryDropdownComponent.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`test render renders with directories and default 1`] = `
-<StyledWithResponsiveMode
+<Dropdown
  className="defaultDirectoryDropdown"
  defaultSelectedKey="asdfghjklzxcvbnm9876543210"
  label="Set your default directory"
@@ -26,7 +26,7 @@ exports[`test render renders with directories and default 1`] = `
 `;

 exports[`test render renders with directories and last visit default 1`] = `
-<StyledWithResponsiveMode
+<Dropdown
  className="defaultDirectoryDropdown"
  defaultSelectedKey="lastVisited"
  label="Set your default directory"
@@ -51,7 +51,7 @@ exports[`test render renders with directories and last visit default 1`] = `
 `;

 exports[`test render renders with directories but no default 1`] = `
-<StyledWithResponsiveMode
+<Dropdown
  className="defaultDirectoryDropdown"
  defaultSelectedKey="lastVisited"
  label="Set your default directory"
@@ -76,7 +76,7 @@ exports[`test render renders with directories but no default 1`] = `
 `;

 exports[`test render renders with no directories 1`] = `
-<StyledWithResponsiveMode
+<Dropdown
  className="defaultDirectoryDropdown"
  defaultSelectedKey="lastVisited"
  label="Set your default directory"
--- a/src/Explorer/Controls/Directory/snapshots/DirectoryListComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Directory/snapshots/DirectoryListComponent.test.tsx.snap
@@ -350,11 +350,11 @@ exports[`test render renders with filters 1`] = `
      }
    >
      <div
-        className="ms-ScrollablePane root-40"
+        className="ms-ScrollablePane root-53"
        data-is-scrollable="true"
      >
        <div
-          className="stickyAbove-42"
+          className="stickyAbove-55"
          style={
            Object {
              "height": 0,
@@ -365,7 +365,7 @@ exports[`test render renders with filters 1`] = `
          }
        />
        <div
-          className="ms-ScrollablePane--contentContainer contentContainer-41"
+          className="ms-ScrollablePane--contentContainer contentContainer-54"
          data-is-scrollable={true}
        >
          <Sticky
@@ -408,7 +408,6 @@ exports[`test render renders with filters 1`] = `
                  >
                    <TextFieldBase
                      ariaLabel="Directory filter text box"
-                      canRevealPassword={false}
                      className="directoryListFilterTextBox"
                      deferredValidationTime={200}
                      onChange={[Function]}
@@ -691,18 +690,18 @@ exports[`test render renders with filters 1`] = `
                      validateOnLoad={true}
                    >
                      <div
-                        className="ms-TextField directoryListFilterTextBox root-46"
+                        className="ms-TextField directoryListFilterTextBox root-59"
                      >
                        <div
                          className="ms-TextField-wrapper"
                        >
                          <div
-                            className="ms-TextField-fieldGroup fieldGroup-47"
+                            className="ms-TextField-fieldGroup fieldGroup-60"
                          >
                            <input
                              aria-invalid={false}
                              aria-label="Directory filter text box"
-                              className="ms-TextField-field field-48"
+                              className="ms-TextField-field field-61"
                              id="TextField0"
                              onBlur={[Function]}
                              onChange={[Function]}
@@ -1266,7 +1265,6 @@ exports[`test render renders with filters 1`] = `
                                  "borderColor": "#f3f2f1",
                                  "color": "#a19f9d",
                                  "cursor": "default",
-                                  "pointerEvents": "none",
                                  "selectors": Object {
                                    ":focus": Object {
                                      "outline": 0,
@@ -1929,7 +1927,7 @@ exports[`test render renders with filters 1`] = `
                        >
                          <button
                            aria-disabled={true}
-                            className="ms-Button ms-Button--default is-disabled directoryListButton root-57"
+                            className="ms-Button ms-Button--default is-disabled directoryListButton root-70"
                            data-is-focusable={false}
                            disabled={true}
                            onClick={[Function]}
@@ -1941,7 +1939,7 @@ exports[`test render renders with filters 1`] = `
                            type="button"
                          >
                            <span
-                              className="ms-Button-flexContainer flexContainer-58"
+                              className="ms-Button-flexContainer flexContainer-71"
                              data-automationid="splitbuttonprimary"
                            >
                              <div
@@ -1972,7 +1970,7 @@ exports[`test render renders with filters 1`] = `
          </List>
        </div>
        <div
-          className="stickyBelow-43"
+          className="stickyBelow-56"
          style={
            Object {
              "bottom": "0px",
@@ -1983,7 +1981,7 @@ exports[`test render renders with filters 1`] = `
          }
        >
          <div
-            className="stickyBelowItems-44"
+            className="stickyBelowItems-57"
          />
        </div>
      </div>
--- a/src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx
+++ b/src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx
@@ -1,9 +1,14 @@
+import {
+  Checkbox,
+  DefaultButton,
+  Dropdown,
+  IDropdownOption,
+  IDropdownStyles,
+  ITextFieldStyles,
+  Stack,
+  TextField,
+} from "@fluentui/react";
 import * as React from "react";
-import { Stack } from "office-ui-fabric-react/lib/Stack";
-import { Dropdown, IDropdownOption, IDropdownStyles } from "office-ui-fabric-react/lib/Dropdown";
-import { Checkbox } from "office-ui-fabric-react/lib/Checkbox";
-import { TextField, ITextFieldStyles } from "office-ui-fabric-react/lib/TextField";
-import { DefaultButton } from "office-ui-fabric-react";
 import "./FeaturePanelComponent.less";

 export const FeaturePanelComponent: React.FunctionComponent = () => {
--- a/src/Explorer/Controls/FeaturePanel/FeaturePanelLauncher.tsx
+++ b/src/Explorer/Controls/FeaturePanel/FeaturePanelLauncher.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { FeaturePanelComponent } from "./FeaturePanelComponent";
-import { getTheme, mergeStyleSets, FontWeights, Modal, IconButton, IIconProps } from "office-ui-fabric-react";
+import { getTheme, mergeStyleSets, FontWeights, Modal, IconButton, IIconProps } from "@fluentui/react";
 import "./FeaturePanelLauncher.less";

 // Modal wrapper
--- a/src/Explorer/Controls/FeaturePanel/snapshots/FeaturePanelComponent.test.tsx.snap
+++ b/src/Explorer/Controls/FeaturePanel/snapshots/FeaturePanelComponent.test.tsx.snap
@@ -57,7 +57,7 @@ exports[`Feature panel renders all flags 1`] = `
        }
      }
    >
-      <StyledWithResponsiveMode
+      <Dropdown
        label="Base Url"
        onChange={[Function]}
        options={
@@ -85,7 +85,7 @@ exports[`Feature panel renders all flags 1`] = `
          }
        }
      />
-      <StyledWithResponsiveMode
+      <Dropdown
        label="Platform"
        onChange={[Function]}
        options={
--- a/src/Explorer/Controls/GitHub/AddRepoComponent.tsx
+++ b/src/Explorer/Controls/GitHub/AddRepoComponent.tsx
@@ -1,4 +1,4 @@
-import { DefaultButton, IButtonProps, ITextFieldProps, TextField } from "office-ui-fabric-react";
+import { DefaultButton, IButtonProps, ITextFieldProps, TextField } from "@fluentui/react";
 import * as React from "react";
 import * as Constants from "../../../Common/Constants";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
--- a/src/Explorer/Controls/GitHub/AuthorizeAccessComponent.tsx
+++ b/src/Explorer/Controls/GitHub/AuthorizeAccessComponent.tsx
@@ -1,10 +1,4 @@
-import {
-  ChoiceGroup,
-  IButtonProps,
-  IChoiceGroupProps,
-  PrimaryButton,
-  IChoiceGroupOption,
-} from "office-ui-fabric-react";
+import { ChoiceGroup, IButtonProps, IChoiceGroupProps, PrimaryButton, IChoiceGroupOption } from "@fluentui/react";
 import * as React from "react";
 import { ChildrenMargin } from "./GitHubStyleConstants";

--- a/src/Explorer/Controls/GitHub/GitHubReposComponent.tsx
+++ b/src/Explorer/Controls/GitHub/GitHubReposComponent.tsx
@@ -1,4 +1,4 @@
-import { DefaultButton, IButtonProps, Link, PrimaryButton } from "office-ui-fabric-react";
+import { DefaultButton, IButtonProps, Link, PrimaryButton } from "@fluentui/react";
 import * as React from "react";
 import { IGitHubBranch, IGitHubRepo } from "../../../GitHub/GitHubClient";
 import { AddRepoComponent, AddRepoComponentProps } from "./AddRepoComponent";
--- a/src/Explorer/Controls/GitHub/GitHubStyleConstants.ts
+++ b/src/Explorer/Controls/GitHub/GitHubStyleConstants.ts
@@ -4,7 +4,7 @@ import {
  IDropdownStyleProps,
  IDropdownStyles,
  IStyleFunctionOrObject,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";

 export const ButtonsFooterStyle: React.CSSProperties = {
  paddingTop: 14,
--- a/src/Explorer/Controls/GitHub/ReposListComponent.tsx
+++ b/src/Explorer/Controls/GitHub/ReposListComponent.tsx
@@ -16,7 +16,7 @@ import {
  ResponsiveMode,
  SelectionMode,
  Text,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import * as React from "react";
 import { IGitHubBranch, IGitHubPageInfo } from "../../../GitHub/GitHubClient";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
--- a/src/Explorer/Controls/Header/GalleryHeaderComponent.tsx
+++ b/src/Explorer/Controls/Header/GalleryHeaderComponent.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Stack, Text, Separator, FontIcon, CommandButton, FontWeights, ITextProps } from "office-ui-fabric-react";
+import { Stack, Text, Separator, FontIcon, CommandButton, FontWeights, ITextProps } from "@fluentui/react";

 export class GalleryHeaderComponent extends React.Component {
  private static readonly azureText = "Microsoft Azure";
--- a/src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx
+++ b/src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx
@@ -13,7 +13,6 @@ const createTestDatabaseAccount = (): DataModels.DatabaseAccount => {
      gremlinEndpoint: null,
      tableEndpoint: null,
    },
-    tags: "testTags",
    type: "testType",
  };
 };
@@ -30,7 +29,6 @@ const createTestMongo32DatabaseAccount = (): DataModels.DatabaseAccount => {
      gremlinEndpoint: null,
      tableEndpoint: null,
    },
-    tags: "testTags",
    type: "testType",
  };
 };
@@ -48,7 +46,6 @@ const createTestMongo36DatabaseAccount = (): DataModels.DatabaseAccount => {
      tableEndpoint: null,
      mongoEndpoint: "https://testMongoEndpoint.azure.com/",
    },
-    tags: "testTags",
    type: "testType",
  };
 };
@@ -65,7 +62,6 @@ const createTestCassandraDatabaseAccount = (): DataModels.DatabaseAccount => {
      gremlinEndpoint: null,
      tableEndpoint: null,
    },
-    tags: "testTags",
    type: "testType",
  };
 };
--- a/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
@@ -1,5 +1,3 @@
-import { Card } from "@uifabric/react-cards";
-import CosmosDBLogo from "images/CosmosDB-logo.svg";
 import {
  BaseButton,
  Button,
@@ -9,14 +7,15 @@ import {
  Image,
  ImageFit,
  Link,
-  LinkBase,
  Persona,
  Separator,
  Spinner,
  SpinnerSize,
  Text,
  TooltipHost,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
+import { Card } from "@uifabric/react-cards";
+import CosmosDBLogo from "images/CosmosDB-logo.svg";
 import React, { FunctionComponent, useState } from "react";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
 import * as FileSystemUtil from "../../../Notebook/FileSystemUtil";
@@ -110,7 +109,7 @@ export const GalleryCardComponent: FunctionComponent<GalleryCardComponentProps>

  const handlerOnClick = (
    event:
-      | React.MouseEvent<HTMLElement | HTMLAnchorElement | HTMLButtonElement | LinkBase, MouseEvent>
+      | React.MouseEvent<HTMLElement | HTMLAnchorElement | HTMLButtonElement | MouseEvent>
      | React.MouseEvent<
          HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button | HTMLSpanElement,
          MouseEvent
--- a/src/Explorer/Controls/NotebookGallery/Cards/snapshots/GalleryCardComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookGallery/Cards/snapshots/GalleryCardComponent.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`GalleryCardComponent renders 1`] = `
    />
  </CardItem>
  <CardItem>
-    <StyledImageBase
+    <Image
      alt="name cover image"
      height={144}
      imageFit={2}
--- a/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx
@@ -0,0 +1,123 @@
+import * as React from "react";
+import { JunoClient } from "../../../Juno/JunoClient";
+import { HttpStatusCodes, CodeOfConductEndpoints } from "../../../Common/Constants";
+import { Stack, Text, Checkbox, PrimaryButton, Link } from "@fluentui/react";
+import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
+import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+
+export interface CodeOfConductComponentProps {
+  junoClient: JunoClient;
+  onAcceptCodeOfConduct: (result: boolean) => void;
+}
+
+interface CodeOfConductComponentState {
+  readCodeOfConduct: boolean;
+}
+
+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 };
+
+  constructor(props: CodeOfConductComponentProps) {
+    super(props);
+
+    this.state = {
+      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 };
+  }
+
+  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");
+    }
+  }
+
+  private onChangeCheckbox = (): void => {
+    this.setState({ readCodeOfConduct: !this.state.readCodeOfConduct });
+  };
+
+  public render(): JSX.Element {
+    if (!this.viewCodeOfConductTraced) {
+      this.viewCodeOfConductTraced = true;
+      trace(Action.NotebooksGalleryViewCodeOfConduct);
+    }
+
+    return (
+      <Stack tokens={{ childrenGap: 20 }}>
+        <Stack.Item>
+          <Text style={{ fontWeight: 500, fontSize: "20px" }}>{this.descriptionPara1}</Text>
+        </Stack.Item>
+
+        <Stack.Item>
+          <Text>{this.descriptionPara2}</Text>
+        </Stack.Item>
+
+        <Stack.Item>
+          <Text>
+            {this.descriptionPara3}
+            <Link href={this.link1.url} target="_blank">
+              {this.link1.label}
+            </Link>
+          </Text>
+        </Stack.Item>
+
+        <Stack.Item>
+          <Checkbox
+            styles={{
+              label: {
+                margin: 0,
+                padding: "2 0 2 0",
+              },
+              text: {
+                fontSize: 12,
+              },
+            }}
+            label="I have read and accept the code of conduct."
+            onChange={this.onChangeCheckbox}
+          />
+        </Stack.Item>
+
+        <Stack.Item>
+          <PrimaryButton
+            ariaLabel="Continue"
+            title="Continue"
+            onClick={async () => await this.acceptCodeOfConduct()}
+            tabIndex={0}
+            className="genericPaneSubmitBtn"
+            text="Continue"
+            disabled={!this.state.readCodeOfConduct}
+          />
+        </Stack.Item>
+      </Stack>
+    );
+  }
+}
--- a/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.test.tsx
+++ b/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.test.tsx
@@ -9,7 +9,7 @@ describe("CodeOfConductComponent", () => {
  let codeOfConductProps: CodeOfConductComponentProps;

  beforeEach(() => {
-    const junoClient = new JunoClient(undefined);
+    const junoClient = new JunoClient();
    junoClient.acceptCodeOfConduct = jest.fn().mockReturnValue({
      status: HttpStatusCodes.OK,
      data: true,
--- a/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.tsx
+++ b/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.tsx
@@ -1,4 +1,4 @@
-import { Checkbox, Link, PrimaryButton, Stack, Text } from "office-ui-fabric-react";
+import { Checkbox, Link, PrimaryButton, Stack, Text } from "@fluentui/react";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import { CodeOfConductEndpoints, HttpStatusCodes } from "../../../../Common/Constants";
 import { getErrorMessage, getErrorStack, handleError } from "../../../../Common/ErrorHandlingUtils";
--- a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
@@ -19,7 +19,7 @@ import {
  SpinnerSize,
  Stack,
  Text,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import * as React from "react";
 import { HttpStatusCodes } from "../../../Common/Constants";
 import { handleError } from "../../../Common/ErrorHandlingUtils";
--- a/src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Icon, Label, Stack, HoverCard, HoverCardType, Link } from "office-ui-fabric-react";
+import { Icon, Label, Stack, HoverCard, HoverCardType, Link } from "@fluentui/react";
 import { CodeOfConductEndpoints } from "../../../../Common/Constants";
 import "./InfoComponent.less";

--- a/src/Explorer/Controls/NotebookGallery/snapshots/GalleryViewerComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookGallery/snapshots/GalleryViewerComponent.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`GalleryViewerComponent renders 1`] = `
 <div
  className="galleryContainer"
 >
-  <StyledPivotBase
+  <StyledPivot
    onLinkClick={[Function]}
    selectedKey="OfficialSamples"
  >
@@ -41,7 +41,7 @@ exports[`GalleryViewerComponent renders 1`] = `
            <StackItem
              grow={true}
            >
-              <StyledSearchBoxBase
+              <StyledSearchBox
                onChange={[Function]}
                placeholder="Search"
              />
@@ -60,7 +60,7 @@ exports[`GalleryViewerComponent renders 1`] = `
                }
              }
            >
-              <StyledWithResponsiveMode
+              <Dropdown
                onChange={[Function]}
                options={
                  Array [
@@ -127,7 +127,7 @@ exports[`GalleryViewerComponent renders 1`] = `
          <StackItem
            grow={true}
          >
-            <StyledSearchBoxBase
+            <StyledSearchBox
              onChange={[Function]}
              placeholder="Search"
            />
@@ -146,7 +146,7 @@ exports[`GalleryViewerComponent renders 1`] = `
              }
            }
          >
-            <StyledWithResponsiveMode
+            <Dropdown
              onChange={[Function]}
              options={
                Array [
@@ -182,6 +182,6 @@ exports[`GalleryViewerComponent renders 1`] = `
        </StackItem>
      </Stack>
    </PivotItem>
-  </StyledPivotBase>
+  </StyledPivot>
 </div>
 `;
--- a/src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
+++ b/src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
@@ -1,18 +1,8 @@
 /**
 * Wrapper around Notebook metadata
 */
+import { FontWeights, Icon, IconButton, Link, Persona, PersonaSize, PrimaryButton, Stack, Text } from "@fluentui/react";
 import CosmosDBLogo from "images/CosmosDB-logo.svg";
-import {
-  FontWeights,
-  Icon,
-  IconButton,
-  Link,
-  Persona,
-  PersonaSize,
-  PrimaryButton,
-  Stack,
-  Text,
-} from "office-ui-fabric-react";
 import * as React from "react";
 import { IGalleryItem } from "../../../Juno/JunoClient";
 import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
--- a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
@@ -3,7 +3,7 @@
 */
 import { Notebook } from "@nteract/commutable";
 import { createContentRef } from "@nteract/core";
-import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "office-ui-fabric-react";
+import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "@fluentui/react";
 import * as React from "react";
 import { contents } from "rx-jupyter";
 import { IGalleryItem, JunoClient } from "../../../Juno/JunoClient";
--- a/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
+++ b/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
@@ -1,23 +1,25 @@
-import SaveQueryBannerIcon from "images/save_query_banner.png";
-import { IButtonProps, IconButton } from "office-ui-fabric-react/lib/Button";
-import { ContextualMenu, IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
 import {
+  ContextualMenu,
  DetailsList,
  DetailsListLayoutMode,
  DetailsRow,
+  FocusZone,
+  IButtonProps,
  IColumn,
+  IconButton,
+  IContextualMenuProps,
  IDetailsListProps,
  IDetailsRowProps,
-} from "office-ui-fabric-react/lib/DetailsList";
-import { FocusZone } from "office-ui-fabric-react/lib/FocusZone";
-import { ITextField, ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
-import {
  IObjectWithKey,
  ISelectionZoneProps,
+  ITextField,
+  ITextFieldProps,
  Selection,
  SelectionMode,
  SelectionZone,
-} from "office-ui-fabric-react/lib/utilities/selection/index";
+  TextField,
+} from "@fluentui/react";
+import SaveQueryBannerIcon from "images/save_query_banner.png";
 import * as React from "react";
 import * as _ from "underscore";
 import * as Constants from "../../../Common/Constants";
--- a/src/Explorer/Controls/RadioSwitchComponent/RadioSwitchComponent.tsx
+++ b/src/Explorer/Controls/RadioSwitchComponent/RadioSwitchComponent.tsx
@@ -2,10 +2,10 @@
 * Horizontal switch component
 */

+import { Icon } from "@fluentui/react";
 import * as React from "react";
-import "./RadioSwitchComponent.less";
-import { Icon } from "office-ui-fabric-react/lib/Icon";
 import { NormalizedEventKey } from "../../../Common/Constants";
+import "./RadioSwitchComponent.less";

 export interface Choice {
  key: string;
--- a/src/Explorer/Controls/Settings/SettingsComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.test.tsx
@@ -154,19 +154,20 @@ describe("SettingsComponent", () => {
    expect(settingsComponentInstance.hasConflictResolution()).toEqual(undefined);

    const newContainer = new Explorer();
-    newContainer.databaseAccount = ko.observable({
-      id: undefined,
-      name: undefined,
-      location: undefined,
-      type: undefined,
-      kind: undefined,
-      tags: undefined,
-      properties: {
-        documentEndpoint: undefined,
-        tableEndpoint: undefined,
-        gremlinEndpoint: undefined,
-        cassandraEndpoint: undefined,
-        enableMultipleWriteLocations: true,
+    updateUserContext({
+      databaseAccount: {
+        id: undefined,
+        name: undefined,
+        location: undefined,
+        type: undefined,
+        kind: undefined,
+        properties: {
+          documentEndpoint: undefined,
+          tableEndpoint: undefined,
+          gremlinEndpoint: undefined,
+          cassandraEndpoint: undefined,
+          enableMultipleWriteLocations: true,
+        },
      },
    });
    const newCollection = { ...collection };
--- a/src/Explorer/Controls/Settings/SettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx
@@ -1,6 +1,6 @@
+import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
 import DiscardIcon from "images/discard.svg";
 import SaveIcon from "images/save-cosmos.svg";
-import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "office-ui-fabric-react";
 import * as React from "react";
 import { AuthType } from "../../../AuthType";
 import * as Constants from "../../../Common/Constants";
@@ -233,11 +233,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
  }

  public loadMongoIndexes = async (): Promise<void> => {
-    if (
-      userContext.apiType === "Mongo" &&
-      this.container.isEnableMongoCapabilityPresent() &&
-      this.container.databaseAccount()
-    ) {
+    if (userContext.apiType === "Mongo" && userContext?.databaseAccount) {
      this.mongoDBCollectionResource = await readMongoDBCollectionThroughRP(
        this.collection.databaseId,
        this.collection.id()
@@ -300,8 +296,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    this.container && userContext.apiType === "Cassandra" && hasDatabaseSharedThroughput(this.collection);

  public hasConflictResolution = (): boolean =>
-    this.container?.databaseAccount &&
-    this.container.databaseAccount()?.properties?.enableMultipleWriteLocations &&
+    userContext?.databaseAccount?.properties?.enableMultipleWriteLocations &&
    this.collection.conflictResolutionPolicy &&
    !!this.collection.conflictResolutionPolicy();

@@ -876,7 +871,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    mongoIndexingPolicyComponentProps: MongoIndexingPolicyComponentProps
  ): JSX.Element => {
    if (userContext.authType === AuthType.AAD) {
-      if (this.container.isEnableMongoCapabilityPresent()) {
+      if (userContext.apiType === "Mongo") {
        return <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />;
      }
      return undefined;
--- a/src/Explorer/Controls/Settings/SettingsRenderUtils.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.test.tsx
@@ -1,6 +1,6 @@
 import { shallow } from "enzyme";
 import React from "react";
-import { IColumn, Text } from "office-ui-fabric-react";
+import { IColumn, Text } from "@fluentui/react";
 import {
  getAutoPilotV3SpendElement,
  getEstimatedSpendingElement,
--- a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
@@ -38,7 +38,7 @@ import {
  IDetailsRowProps,
  DetailsRow,
  IDetailsColumnStyles,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import { isDirtyTypes, isDirty } from "./SettingsUtils";

 export interface EstimatedSpendingDisplayProps {
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx
@@ -9,7 +9,7 @@ import {
  subComponentStackProps,
  getChoiceGroupStyles,
 } from "../SettingsRenderUtils";
-import { TextField, ITextFieldProps, Stack, IChoiceGroupOption, ChoiceGroup } from "office-ui-fabric-react";
+import { TextField, ITextFieldProps, Stack, IChoiceGroupOption, ChoiceGroup } from "@fluentui/react";
 import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
 import { isDirty } from "../SettingsUtils";

--- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
@@ -1,7 +1,8 @@
-import { MessageBar, MessageBarType, Stack } from "office-ui-fabric-react";
+import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
+import * as monaco from "monaco-editor";
 import * as React from "react";
 import * as DataModels from "../../../../Contracts/DataModels";
-import { loadMonaco, monaco } from "../../../LazyMonaco";
+import { loadMonaco } from "../../../LazyMonaco";
 import { indexingPolicynUnsavedWarningMessage, titleAndInputStackProps } from "../SettingsRenderUtils";
 import { isDirty, isIndexTransforming } from "../SettingsUtils";
 import { IndexingPolicyRefreshComponent } from "./IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/IndexingPolicyRefreshComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/IndexingPolicyRefreshComponent.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { MessageBar, MessageBarType } from "office-ui-fabric-react";
+import { MessageBar, MessageBarType } from "@fluentui/react";
 import {
  mongoIndexTransformationRefreshingMessage,
  renderMongoIndexTransformationRefreshMessage,
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/snapshots/IndexingPolicyRefreshComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/snapshots/IndexingPolicyRefreshComponent.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`IndexingPolicyRefreshComponent renders 1`] = `
-<StyledMessageBarBase
+<StyledMessageBar
  messageBarType={5}
 >
  <Text
@@ -20,5 +20,5 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = `
      Refresh to check the progress.
    </StyledLinkBase>
  </Text>
-</StyledMessageBarBase>
+</StyledMessageBar>
 `;
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/AddMongoIndexComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/AddMongoIndexComponent.tsx
@@ -8,7 +8,7 @@ import {
  Dropdown,
  IDropdownOption,
  ITextField,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import {
  addMongoIndexSubElementsTokens,
  mongoErrorMessageStyles,
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
@@ -12,7 +12,7 @@ import {
  Spinner,
  SpinnerSize,
  Separator,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import {
  addMongoIndexStackProps,
  customDetailsListStyles,
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/snapshots/AddMongoIndexComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/snapshots/AddMongoIndexComponent.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`AddMongoIndexComponent renders 1`] = `
      }
      value="sample_key"
    />
-    <StyledWithResponsiveMode
+    <Dropdown
      ariaLabel="Index Type 1"
      onChange={[Function]}
      options={
@@ -67,7 +67,7 @@ exports[`AddMongoIndexComponent renders 1`] = `
      onClick={[Function]}
    />
  </Stack>
-  <StyledMessageBarBase
+  <StyledMessageBar
    messageBarType={1}
    styles={
      Object {
@@ -78,6 +78,6 @@ exports[`AddMongoIndexComponent renders 1`] = `
    }
  >
    sample error
-  </StyledMessageBarBase>
+  </StyledMessageBar>
 </Stack>
 `;
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.test.tsx
@@ -1,14 +1,15 @@
 import { shallow } from "enzyme";
+import ko from "knockout";
 import React from "react";
-import { ScaleComponent, ScaleComponentProps } from "./ScaleComponent";
-import { container, collection } from "../TestUtils";
-import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
-import Explorer from "../../../Explorer";
 import * as Constants from "../../../../Common/Constants";
 import * as DataModels from "../../../../Contracts/DataModels";
-import { throughputUnit } from "../SettingsRenderUtils";
 import * as SharedConstants from "../../../../Shared/Constants";
-import ko from "knockout";
+import { updateUserContext } from "../../../../UserContext";
+import Explorer from "../../../Explorer";
+import { throughputUnit } from "../SettingsRenderUtils";
+import { collection, container } from "../TestUtils";
+import { ScaleComponent, ScaleComponentProps } from "./ScaleComponent";
+import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";

 describe("ScaleComponent", () => {
  const nonNationalCloudContainer = new Explorer();
@@ -80,25 +81,25 @@ describe("ScaleComponent", () => {

  it("autoScale enabled", () => {
    const newContainer = new Explorer();
-
-    newContainer.databaseAccount({
-      id: undefined,
-      name: undefined,
-      location: undefined,
-      type: undefined,
-      kind: "documentdb",
-      tags: undefined,
-      properties: {
-        documentEndpoint: undefined,
-        tableEndpoint: undefined,
-        gremlinEndpoint: undefined,
-        cassandraEndpoint: undefined,
-        capabilities: [
-          {
-            name: Constants.CapabilityNames.EnableAutoScale.toLowerCase(),
-            description: undefined,
-          },
-        ],
+    updateUserContext({
+      databaseAccount: {
+        id: undefined,
+        name: undefined,
+        location: undefined,
+        type: undefined,
+        kind: "documentdb",
+        properties: {
+          documentEndpoint: undefined,
+          tableEndpoint: undefined,
+          gremlinEndpoint: undefined,
+          cassandraEndpoint: undefined,
+          capabilities: [
+            {
+              name: Constants.CapabilityNames.EnableAutoScale.toLowerCase(),
+              description: undefined,
+            },
+          ],
+        },
      },
    });
    const props = { ...baseProps, container: newContainer };
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
@@ -1,4 +1,4 @@
-import { Label, Link, MessageBar, MessageBarType, Stack, Text, TextField } from "office-ui-fabric-react";
+import { Label, Link, MessageBar, MessageBarType, Stack, Text, TextField } from "@fluentui/react";
 import * as React from "react";
 import * as Constants from "../../../../Common/Constants";
 import { configContext, Platform } from "../../../../ConfigContext";
@@ -54,8 +54,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
  }

  public isAutoScaleEnabled = (): boolean => {
-    const accountCapabilities: DataModels.Capability[] = this.props.container?.databaseAccount()?.properties
-      ?.capabilities;
+    const accountCapabilities: DataModels.Capability[] = userContext?.databaseAccount?.properties?.capabilities;
    const enableAutoScaleCapability =
      accountCapabilities &&
      accountCapabilities.find((capability: DataModels.Capability) => {
@@ -170,7 +169,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {

  private getThroughputInputComponent = (): JSX.Element => (
    <ThroughputInputAutoPilotV3Component
-      databaseAccount={this.props.container.databaseAccount()}
+      databaseAccount={userContext?.databaseAccount}
      databaseName={this.databaseId}
      collectionName={this.collectionId}
      throughput={this.props.throughput}
@@ -199,8 +198,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
  );

  private isFreeTierAccount(): boolean {
-    const databaseAccount = this.props.container?.databaseAccount();
-    return databaseAccount?.properties?.enableFreeTier;
+    return userContext?.databaseAccount?.properties?.enableFreeTier;
  }

  private getFreeTierInfoMessage(): JSX.Element {
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
@@ -1,13 +1,4 @@
-import {
-  ChoiceGroup,
-  IChoiceGroupOption,
-  Label,
-  Link,
-  MessageBar,
-  Stack,
-  Text,
-  TextField,
-} from "office-ui-fabric-react";
+import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField } from "@fluentui/react";
 import * as React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
 import { userContext } from "../../../../UserContext";
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
@@ -10,7 +10,7 @@ import {
  Stack,
  Text,
  TextField,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import React from "react";
 import * as DataModels from "../../../../../Contracts/DataModels";
 import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
    }
  }
 >
-  <StyledMessageBarBase
+  <StyledMessageBar
    messageBarIconProps={
      Object {
        "className": "messageBarWarningIcon",
@@ -27,7 +27,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
    >
      Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below before saving your changes
    </Text>
-  </StyledMessageBarBase>
+  </StyledMessageBar>
  <Stack>
    <StyledLabelBase
      id="settingsV2RadioButtonLabelId"
@@ -49,7 +49,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
        }
      />
    </StyledLabelBase>
-    <StyledMessageBarBase
+    <StyledMessageBar
      messageBarIconProps={
        Object {
          "className": "messageBarInfoIcon",
@@ -86,8 +86,8 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
          Learn more
        </a>
      </Text>
-    </StyledMessageBarBase>
-    <StyledChoiceGroupBase
+    </StyledMessageBar>
+    <StyledChoiceGroup
      ariaLabelledBy="settingsV2RadioButtonLabelId"
      onChange={[Function]}
      options={
@@ -196,7 +196,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
        }
      />
    </StyledLabelBase>
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
      ariaLabelledBy="settingsV2RadioButtonLabelId"
      onChange={[Function]}
      options={
@@ -470,7 +470,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
        }
      />
    </StyledLabelBase>
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
      ariaLabelledBy="settingsV2RadioButtonLabelId"
      onChange={[Function]}
      options={
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ToolTipLabelComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ToolTipLabelComponent.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Stack, Text, IIconStyles, Icon, TooltipHost, DirectionalHint } from "office-ui-fabric-react";
+import { Stack, Text, IIconStyles, Icon, TooltipHost, DirectionalHint } from "@fluentui/react";
 import { toolTipLabelStackTokens } from "../SettingsRenderUtils";

 export interface ToolTipLabelComponentProps {
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/ConflictResolutionComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/ConflictResolutionComponent.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
    }
  }
 >
-  <StyledChoiceGroupBase
+  <StyledChoiceGroup
    label="Mode"
    onChange={[Function]}
    options={
@@ -80,7 +80,7 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
    }
  }
 >
-  <StyledChoiceGroupBase
+  <StyledChoiceGroup
    label="Mode"
    onChange={[Function]}
    options={
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/ScaleComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/ScaleComponent.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
    }
  }
 >
-  <StyledMessageBarBase
+  <StyledMessageBar
    messageBarType={5}
  >
    <Text
@@ -26,7 +26,7 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
      Database: test, Container: test 
      , Current autoscale throughput: 100 - 1000 RU/s, Target autoscale throughput: 600 - 6000 RU/s
    </Text>
-  </StyledMessageBarBase>
+  </StyledMessageBar>
  <Stack
    tokens={
      Object {
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/SubSettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/SubSettingsComponent.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
      }
    }
  >
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
      id="timeToLive"
      label="Time to Live"
      onChange={[Function]}
@@ -85,7 +85,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
      value="1000"
    />
  </Stack>
-  <StyledChoiceGroupBase
+  <StyledChoiceGroup
    id="geoSpatialConfig"
    label="Geospatial Configuration"
    onChange={[Function]}
@@ -146,7 +146,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
        }
      />
    </StyledLabelBase>
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
      aria-labelledby="settingsV2ChangeFeedLabelId"
      id="changeFeedPolicy"
      onChange={[Function]}
@@ -238,7 +238,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
      }
    }
  >
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
      id="timeToLive"
      label="Time to Live"
      onChange={[Function]}
@@ -308,7 +308,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
      value="1000"
    />
  </Stack>
-  <StyledChoiceGroupBase
+  <StyledChoiceGroup
    id="geoSpatialConfig"
    label="Geospatial Configuration"
    onChange={[Function]}
@@ -355,7 +355,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
      }
    }
  >
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
      id="analyticalStorageTimeToLive"
      label="Analytical Storage Time to Live"
      onChange={[Function]}
@@ -422,7 +422,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
        }
      />
    </StyledLabelBase>
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
      aria-labelledby="settingsV2ChangeFeedLabelId"
      id="changeFeedPolicy"
      onChange={[Function]}
@@ -514,7 +514,7 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
      }
    }
  >
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
      id="timeToLive"
      label="Time to Live"
      onChange={[Function]}
@@ -584,7 +584,7 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
      value="1000"
    />
  </Stack>
-  <StyledChoiceGroupBase
+  <StyledChoiceGroup
    id="geoSpatialConfig"
    label="Geospatial Configuration"
    onChange={[Function]}
@@ -631,7 +631,7 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
      }
    }
  >
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
      id="analyticalStorageTimeToLive"
      label="Analytical Storage Time to Live"
      onChange={[Function]}
@@ -753,7 +753,7 @@ exports[`SubSettingsComponent renders 1`] = `
      }
    }
  >
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
      id="timeToLive"
      label="Time to Live"
      onChange={[Function]}
@@ -823,7 +823,7 @@ exports[`SubSettingsComponent renders 1`] = `
      value="1000"
    />
  </Stack>
-  <StyledChoiceGroupBase
+  <StyledChoiceGroup
    id="geoSpatialConfig"
    label="Geospatial Configuration"
    onChange={[Function]}
@@ -870,7 +870,7 @@ exports[`SubSettingsComponent renders 1`] = `
      }
    }
  >
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
      id="analyticalStorageTimeToLive"
      label="Analytical Storage Time to Live"
      onChange={[Function]}
@@ -962,7 +962,7 @@ exports[`SubSettingsComponent renders 1`] = `
        }
      />
    </StyledLabelBase>
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
      aria-labelledby="settingsV2ChangeFeedLabelId"
      id="changeFeedPolicy"
      onChange={[Function]}
@@ -1054,7 +1054,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
      }
    }
  >
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
      id="timeToLive"
      label="Time to Live"
      onChange={[Function]}
@@ -1099,7 +1099,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
      }
    />
  </Stack>
-  <StyledChoiceGroupBase
+  <StyledChoiceGroup
    id="geoSpatialConfig"
    label="Geospatial Configuration"
    onChange={[Function]}
@@ -1146,7 +1146,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
      }
    }
  >
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
      id="analyticalStorageTimeToLive"
      label="Analytical Storage Time to Live"
      onChange={[Function]}
@@ -1238,7 +1238,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
        }
      />
    </StyledLabelBase>
-    <StyledChoiceGroupBase
+    <StyledChoiceGroup
      aria-labelledby="settingsV2ChangeFeedLabelId"
      id="changeFeedPolicy"
      onChange={[Function]}
--- a/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`SettingsComponent renders 1`] = `
  <div
    className="settingsV2TabsContainer"
  >
-    <StyledPivotBase
+    <StyledPivot
      onLinkClick={[Function]}
      selectedKey="ScaleTab"
    >
@@ -399,8 +399,6 @@ exports[`SettingsComponent renders 1`] = `
                  "userTableQuery": [Function],
                  "visible": [Function],
                },
-                "clickHostedAccountSwitch": [Function],
-                "clickHostedDirectorySwitch": [Function],
                "closeDialog": undefined,
                "closeSidePanel": undefined,
                "collapsedResourceTreeWidth": 36,
@@ -422,9 +420,7 @@ exports[`SettingsComponent renders 1`] = `
                  "parameters": [Function],
                  "tabsButtons": Array [],
                },
-                "databaseAccount": [Function],
                "databases": [Function],
-                "defaultExperience": [Function],
                "deleteCollectionText": [Function],
                "deleteDatabaseText": [Function],
                "gitHubClient": GitHubClient {
@@ -1217,7 +1213,6 @@ exports[`SettingsComponent renders 1`] = `
                "hasStorageAnalyticsAfecFeature": [Function],
                "isAccountReady": [Function],
                "isAutoscaleDefaultEnabled": [Function],
-                "isEnableMongoCapabilityPresent": [Function],
                "isFixedCollectionWithSharedThroughputSupported": [Function],
                "isHostedDataExplorerEnabled": [Function],
                "isLeftPaneExpanded": [Function],
@@ -1226,7 +1221,6 @@ exports[`SettingsComponent renders 1`] = `
                "isNotebooksEnabledForAccount": [Function],
                "isPublishNotebookPaneEnabled": [Function],
                "isResourceTokenCollectionNodeSelected": [Function],
-                "isRightPanelV2Enabled": [Function],
                "isSchemaEnabled": [Function],
                "isServerlessEnabled": [Function],
                "isSparkEnabled": [Function],
@@ -1235,7 +1229,6 @@ exports[`SettingsComponent renders 1`] = `
                "isTabsContentExpanded": [Function],
                "junoClient": JunoClient {
                  "cachedPinnedRepos": [Function],
-                  "databaseAccount": undefined,
                },
                "memoryUsageInfo": [Function],
                "notebookBasePath": [Function],
@@ -1243,14 +1236,12 @@ exports[`SettingsComponent renders 1`] = `
                "onGitHubClientError": [Function],
                "onRefreshDatabasesKeyPress": [Function],
                "onRefreshResourcesClick": [Function],
-                "onSwitchToConnectionString": [Function],
                "openDialog": undefined,
                "openSidePanel": undefined,
                "provideFeedbackEmail": [Function],
                "queriesClient": QueriesClient {
                  "container": [Circular],
                },
-                "refreshDatabaseAccount": [Function],
                "refreshNotebookList": [Function],
                "refreshTreeTitle": [Function],
                "resourceTokenCollection": [Function],
@@ -1274,7 +1265,6 @@ exports[`SettingsComponent renders 1`] = `
                "setInProgressConsoleDataIdToBeDeleted": undefined,
                "setIsNotificationConsoleExpanded": undefined,
                "setNotificationConsoleData": undefined,
-                "signInAad": [Function],
                "sparkClusterConnectionInfo": [Function],
                "splitter": Splitter {
                  "bounds": Object {
@@ -1685,8 +1675,6 @@ exports[`SettingsComponent renders 1`] = `
                "userTableQuery": [Function],
                "visible": [Function],
              },
-              "clickHostedAccountSwitch": [Function],
-              "clickHostedDirectorySwitch": [Function],
              "closeDialog": undefined,
              "closeSidePanel": undefined,
              "collapsedResourceTreeWidth": 36,
@@ -1708,9 +1696,7 @@ exports[`SettingsComponent renders 1`] = `
                "parameters": [Function],
                "tabsButtons": Array [],
              },
-              "databaseAccount": [Function],
              "databases": [Function],
-              "defaultExperience": [Function],
              "deleteCollectionText": [Function],
              "deleteDatabaseText": [Function],
              "gitHubClient": GitHubClient {
@@ -2503,7 +2489,6 @@ exports[`SettingsComponent renders 1`] = `
              "hasStorageAnalyticsAfecFeature": [Function],
              "isAccountReady": [Function],
              "isAutoscaleDefaultEnabled": [Function],
-              "isEnableMongoCapabilityPresent": [Function],
              "isFixedCollectionWithSharedThroughputSupported": [Function],
              "isHostedDataExplorerEnabled": [Function],
              "isLeftPaneExpanded": [Function],
@@ -2512,7 +2497,6 @@ exports[`SettingsComponent renders 1`] = `
              "isNotebooksEnabledForAccount": [Function],
              "isPublishNotebookPaneEnabled": [Function],
              "isResourceTokenCollectionNodeSelected": [Function],
-              "isRightPanelV2Enabled": [Function],
              "isSchemaEnabled": [Function],
              "isServerlessEnabled": [Function],
              "isSparkEnabled": [Function],
@@ -2521,7 +2505,6 @@ exports[`SettingsComponent renders 1`] = `
              "isTabsContentExpanded": [Function],
              "junoClient": JunoClient {
                "cachedPinnedRepos": [Function],
-                "databaseAccount": undefined,
              },
              "memoryUsageInfo": [Function],
              "notebookBasePath": [Function],
@@ -2529,14 +2512,12 @@ exports[`SettingsComponent renders 1`] = `
              "onGitHubClientError": [Function],
              "onRefreshDatabasesKeyPress": [Function],
              "onRefreshResourcesClick": [Function],
-              "onSwitchToConnectionString": [Function],
              "openDialog": undefined,
              "openSidePanel": undefined,
              "provideFeedbackEmail": [Function],
              "queriesClient": QueriesClient {
                "container": [Circular],
              },
-              "refreshDatabaseAccount": [Function],
              "refreshNotebookList": [Function],
              "refreshTreeTitle": [Function],
              "resourceTokenCollection": [Function],
@@ -2560,7 +2541,6 @@ exports[`SettingsComponent renders 1`] = `
              "setInProgressConsoleDataIdToBeDeleted": undefined,
              "setIsNotificationConsoleExpanded": undefined,
              "setNotificationConsoleData": undefined,
-              "signInAad": [Function],
              "sparkClusterConnectionInfo": [Function],
              "splitter": Splitter {
                "bounds": Object {
@@ -2984,8 +2964,6 @@ exports[`SettingsComponent renders 1`] = `
                  "userTableQuery": [Function],
                  "visible": [Function],
                },
-                "clickHostedAccountSwitch": [Function],
-                "clickHostedDirectorySwitch": [Function],
                "closeDialog": undefined,
                "closeSidePanel": undefined,
                "collapsedResourceTreeWidth": 36,
@@ -3007,9 +2985,7 @@ exports[`SettingsComponent renders 1`] = `
                  "parameters": [Function],
                  "tabsButtons": Array [],
                },
-                "databaseAccount": [Function],
                "databases": [Function],
-                "defaultExperience": [Function],
                "deleteCollectionText": [Function],
                "deleteDatabaseText": [Function],
                "gitHubClient": GitHubClient {
@@ -3802,7 +3778,6 @@ exports[`SettingsComponent renders 1`] = `
                "hasStorageAnalyticsAfecFeature": [Function],
                "isAccountReady": [Function],
                "isAutoscaleDefaultEnabled": [Function],
-                "isEnableMongoCapabilityPresent": [Function],
                "isFixedCollectionWithSharedThroughputSupported": [Function],
                "isHostedDataExplorerEnabled": [Function],
                "isLeftPaneExpanded": [Function],
@@ -3811,7 +3786,6 @@ exports[`SettingsComponent renders 1`] = `
                "isNotebooksEnabledForAccount": [Function],
                "isPublishNotebookPaneEnabled": [Function],
                "isResourceTokenCollectionNodeSelected": [Function],
-                "isRightPanelV2Enabled": [Function],
                "isSchemaEnabled": [Function],
                "isServerlessEnabled": [Function],
                "isSparkEnabled": [Function],
@@ -3820,7 +3794,6 @@ exports[`SettingsComponent renders 1`] = `
                "isTabsContentExpanded": [Function],
                "junoClient": JunoClient {
                  "cachedPinnedRepos": [Function],
-                  "databaseAccount": undefined,
                },
                "memoryUsageInfo": [Function],
                "notebookBasePath": [Function],
@@ -3828,14 +3801,12 @@ exports[`SettingsComponent renders 1`] = `
                "onGitHubClientError": [Function],
                "onRefreshDatabasesKeyPress": [Function],
                "onRefreshResourcesClick": [Function],
-                "onSwitchToConnectionString": [Function],
                "openDialog": undefined,
                "openSidePanel": undefined,
                "provideFeedbackEmail": [Function],
                "queriesClient": QueriesClient {
                  "container": [Circular],
                },
-                "refreshDatabaseAccount": [Function],
                "refreshNotebookList": [Function],
                "refreshTreeTitle": [Function],
                "resourceTokenCollection": [Function],
@@ -3859,7 +3830,6 @@ exports[`SettingsComponent renders 1`] = `
                "setInProgressConsoleDataIdToBeDeleted": undefined,
                "setIsNotificationConsoleExpanded": undefined,
                "setNotificationConsoleData": undefined,
-                "signInAad": [Function],
                "sparkClusterConnectionInfo": [Function],
                "splitter": Splitter {
                  "bounds": Object {
@@ -4270,8 +4240,6 @@ exports[`SettingsComponent renders 1`] = `
                "userTableQuery": [Function],
                "visible": [Function],
              },
-              "clickHostedAccountSwitch": [Function],
-              "clickHostedDirectorySwitch": [Function],
              "closeDialog": undefined,
              "closeSidePanel": undefined,
              "collapsedResourceTreeWidth": 36,
@@ -4293,9 +4261,7 @@ exports[`SettingsComponent renders 1`] = `
                "parameters": [Function],
                "tabsButtons": Array [],
              },
-              "databaseAccount": [Function],
              "databases": [Function],
-              "defaultExperience": [Function],
              "deleteCollectionText": [Function],
              "deleteDatabaseText": [Function],
              "gitHubClient": GitHubClient {
@@ -5088,7 +5054,6 @@ exports[`SettingsComponent renders 1`] = `
              "hasStorageAnalyticsAfecFeature": [Function],
              "isAccountReady": [Function],
              "isAutoscaleDefaultEnabled": [Function],
-              "isEnableMongoCapabilityPresent": [Function],
              "isFixedCollectionWithSharedThroughputSupported": [Function],
              "isHostedDataExplorerEnabled": [Function],
              "isLeftPaneExpanded": [Function],
@@ -5097,7 +5062,6 @@ exports[`SettingsComponent renders 1`] = `
              "isNotebooksEnabledForAccount": [Function],
              "isPublishNotebookPaneEnabled": [Function],
              "isResourceTokenCollectionNodeSelected": [Function],
-              "isRightPanelV2Enabled": [Function],
              "isSchemaEnabled": [Function],
              "isServerlessEnabled": [Function],
              "isSparkEnabled": [Function],
@@ -5106,7 +5070,6 @@ exports[`SettingsComponent renders 1`] = `
              "isTabsContentExpanded": [Function],
              "junoClient": JunoClient {
                "cachedPinnedRepos": [Function],
-                "databaseAccount": undefined,
              },
              "memoryUsageInfo": [Function],
              "notebookBasePath": [Function],
@@ -5114,14 +5077,12 @@ exports[`SettingsComponent renders 1`] = `
              "onGitHubClientError": [Function],
              "onRefreshDatabasesKeyPress": [Function],
              "onRefreshResourcesClick": [Function],
-              "onSwitchToConnectionString": [Function],
              "openDialog": undefined,
              "openSidePanel": undefined,
              "provideFeedbackEmail": [Function],
              "queriesClient": QueriesClient {
                "container": [Circular],
              },
-              "refreshDatabaseAccount": [Function],
              "refreshNotebookList": [Function],
              "refreshTreeTitle": [Function],
              "resourceTokenCollection": [Function],
@@ -5145,7 +5106,6 @@ exports[`SettingsComponent renders 1`] = `
              "setInProgressConsoleDataIdToBeDeleted": undefined,
              "setIsNotificationConsoleExpanded": undefined,
              "setNotificationConsoleData": undefined,
-              "signInAad": [Function],
              "sparkClusterConnectionInfo": [Function],
              "splitter": Splitter {
                "bounds": Object {
@@ -5218,7 +5178,7 @@ exports[`SettingsComponent renders 1`] = `
          shouldDiscardIndexingPolicy={false}
        />
      </PivotItem>
-    </StyledPivotBase>
+    </StyledPivot>
  </div>
 </div>
 `;
--- a/src/Explorer/Controls/Settings/snapshots/SettingsRenderUtils.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/snapshots/SettingsRenderUtils.test.tsx.snap
@@ -338,7 +338,7 @@ exports[`SettingsUtils functions render 1`] = `
    </StyledLinkBase>
    are only used for sorting query results. If you need to add a compound index, you can create one using the Mongo shell.
  </Text>
-  <StyledMessageBarBase
+  <StyledMessageBar
    messageBarType={1}
  >
    <Text>
@@ -350,7 +350,7 @@ exports[`SettingsUtils functions render 1`] = `
        azure portal.
      </StyledLinkBase>
    </Text>
-  </StyledMessageBarBase>
+  </StyledMessageBar>
  <Stack
    horizontal={true}
    tokens={
--- a/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx
+++ b/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx
@@ -1,12 +1,20 @@
+import {
+  Dropdown,
+  IDropdownOption,
+  IStackTokens,
+  Label,
+  Link,
+  MessageBar,
+  MessageBarType,
+  Position,
+  Slider,
+  SpinButton,
+  Stack,
+  Text,
+  TextField,
+  Toggle,
+} from "@fluentui/react";
 import { TFunction } from "i18next";
-import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
-import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
-import { Slider } from "office-ui-fabric-react/lib/Slider";
-import { SpinButton } from "office-ui-fabric-react/lib/SpinButton";
-import { IStackTokens, Stack } from "office-ui-fabric-react/lib/Stack";
-import { Text } from "office-ui-fabric-react/lib/Text";
-import { TextField } from "office-ui-fabric-react/lib/TextField";
-import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
 import * as React from "react";
 import {
  ChoiceItem,
--- a/src/Explorer/Controls/SmartUi/snapshots/SmartUiComponent.test.tsx.snap
+++ b/src/Explorer/Controls/SmartUi/snapshots/SmartUiComponent.test.tsx.snap
@@ -77,22 +77,11 @@ exports[`SmartUiComponent disable all inputs 1`] = `
                }
              }
            >
-              <CustomizedSpinButton
+              <StyledSpinButton
                aria-labelledby="throughput-label"
                ariaLabel="Throughput (input)"
-                decrementButtonIcon={
-                  Object {
-                    "iconName": "ChevronDownSmall",
-                  }
-                }
                disabled={true}
                id="throughput-spinner-input"
-                incrementButtonIcon={
-                  Object {
-                    "iconName": "ChevronUpSmall",
-                  }
-                }
-                label=""
                labelPosition={0}
                max={500}
                min={400}
@@ -169,12 +158,12 @@ exports[`SmartUiComponent disable all inputs 1`] = `
      }
    >
      <StackItem>
-        <StyledMessageBarBase
+        <StyledMessageBar
          messageBarType={1}
        >
          Error: 
          label, truelabel and falselabel are required for boolean input 'throughput3'
-        </StyledMessageBarBase>
+        </StyledMessageBar>
      </StackItem>
    </Stack>
  </div>
@@ -282,7 +271,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
                label="Database"
              />
            </StyledLabelBase>
-            <StyledWithResponsiveMode
+            <Dropdown
              aria-labelledby="database-label"
              disabled={true}
              id="database-dropdown-input"
@@ -402,22 +391,10 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
                }
              }
            >
-              <CustomizedSpinButton
+              <StyledSpinButton
                aria-labelledby="throughput-label"
                ariaLabel="Throughput (input)"
-                decrementButtonIcon={
-                  Object {
-                    "iconName": "ChevronDownSmall",
-                  }
-                }
-                disabled={false}
                id="throughput-spinner-input"
-                incrementButtonIcon={
-                  Object {
-                    "iconName": "ChevronUpSmall",
-                  }
-                }
-                label=""
                labelPosition={0}
                max={500}
                min={400}
@@ -493,12 +470,12 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
      }
    >
      <StackItem>
-        <StyledMessageBarBase
+        <StyledMessageBar
          messageBarType={1}
        >
          Error: 
          label, truelabel and falselabel are required for boolean input 'throughput3'
-        </StyledMessageBarBase>
+        </StyledMessageBar>
      </StackItem>
    </Stack>
  </div>
@@ -604,7 +581,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
                label="Database"
              />
            </StyledLabelBase>
-            <StyledWithResponsiveMode
+            <Dropdown
              aria-labelledby="database-label"
              id="database-dropdown-input"
              onChange={[Function]}
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -1,4 +1,4 @@
-import { Checkbox, DirectionalHint, Icon, Link, Stack, Text, TextField, TooltipHost } from "office-ui-fabric-react";
+import { Checkbox, DirectionalHint, Icon, Link, Stack, Text, TextField, TooltipHost } from "@fluentui/react";
 import React from "react";
 import * as Constants from "../../../Common/Constants";
 import * as SharedConstants from "../../../Shared/Constants";
@@ -216,7 +216,7 @@ export class ThroughputInput extends React.Component<ThroughputInputProps, Throu
  }

  private getCostAcknowledgeText(): string {
-    const databaseAccount = userContext.databaseAccount;
+    const { databaseAccount } = userContext;
    if (!databaseAccount || !databaseAccount.properties) {
      return "";
    }
@@ -259,8 +259,8 @@ interface CostEstimateTextProps {

 const CostEstimateText: React.FunctionComponent<CostEstimateTextProps> = (props: CostEstimateTextProps) => {
  const { requestUnits, isAutoscale } = props;
-  const databaseAccount = userContext.databaseAccount;
-  if (!databaseAccount || !databaseAccount.properties) {
+  const { databaseAccount } = userContext;
+  if (!databaseAccount?.properties) {
    return <></>;
  }

--- a/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
+++ b/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
@@ -5,15 +5,16 @@
 * - context menu
 */

+import {
+  DirectionalHint,
+  IButtonStyles,
+  IconButton,
+  IContextualMenuItemProps,
+  IContextualMenuProps,
+} from "@fluentui/react";
 import LoadingIndicator_3Squares from "images/LoadingIndicator_3Squares.gif";
 import TriangleDownIcon from "images/Triangle-down.svg";
 import TriangleRightIcon from "images/Triangle-right.svg";
-import { IButtonStyles, IconButton } from "office-ui-fabric-react/lib/Button";
-import {
-  DirectionalHint,
-  IContextualMenuItemProps,
-  IContextualMenuProps,
-} from "office-ui-fabric-react/lib/ContextualMenu";
 import * as React from "react";
 import AnimateHeight from "react-animate-height";
 import * as Constants from "../../../Common/Constants";
--- a/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
+++ b/src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
@@ -79,7 +79,6 @@ describe("ContainerSampleGenerator", () => {
        location: "foo",
        type: "foo",
        kind: "foo",
-        tags: [],
        properties: {
          documentEndpoint: "bar",
          gremlinEndpoint: "foo",
--- a/src/Explorer/DataSamples/ContainerSampleGenerator.ts
+++ b/src/Explorer/DataSamples/ContainerSampleGenerator.ts
@@ -80,7 +80,7 @@ export class ContainerSampleGenerator {
      if (!queries || queries.length < 1) {
        return;
      }
-      const account = userContext.databaseAccount;
+      const { databaseAccount: account } = userContext;
      const databaseId = collection.databaseId;
      const gremlinClient = new GremlinClient();
      gremlinClient.initialize({
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -1,5 +1,5 @@
 import * as ko from "knockout";
-import { IChoiceGroupProps } from "office-ui-fabric-react";
+import { IChoiceGroupProps } from "@fluentui/react";
 import * as path from "path";
 import Q from "q";
 import React from "react";
@@ -12,7 +12,7 @@ import { readCollection } from "../Common/dataAccess/readCollection";
 import { readDatabases } from "../Common/dataAccess/readDatabases";
 import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHandlingUtils";
 import * as Logger from "../Common/Logger";
-import { sendCachedDataMessage, sendMessage } from "../Common/MessageHandler";
+import { sendCachedDataMessage } from "../Common/MessageHandler";
 import { QueriesClient } from "../Common/QueriesClient";
 import { Splitter, SplitterBounds, SplitterDirection } from "../Common/Splitter";
 import { configContext, Platform } from "../ConfigContext";
@@ -31,7 +31,7 @@ import { ExplorerSettings } from "../Shared/ExplorerSettings";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
 import { ArcadiaResourceManager } from "../SparkClusterManager/ArcadiaResourceManager";
-import { userContext } from "../UserContext";
+import { updateUserContext, userContext } from "../UserContext";
 import { getCollectionName } from "../Utils/APITypeUtils";
 import { decryptJWTToken, getAuthorizationHeader } from "../Utils/AuthorizationUtils";
 import { stringToBlob } from "../Utils/BlobUtils";
@@ -109,23 +109,8 @@ export default class Explorer {
  public refreshTreeTitle: ko.Observable<string>;
  public collapsedResourceTreeWidth: number = ExplorerMetrics.CollapsedResourceTreeWidth;

-  /**
-   * @deprecated
-   * Use userContext.databaseAccount instead
-   * */
-  public databaseAccount: ko.Observable<DataModels.DatabaseAccount>;
  public collectionCreationDefaults: ViewModels.CollectionCreationDefaults = SharedConstants.CollectionCreationDefaults;
-  /**
-   * @deprecated
-   * Use userContext.apiType instead
-   * */
-  public defaultExperience: ko.Observable<string>;
  public isFixedCollectionWithSharedThroughputSupported: ko.Computed<boolean>;
-  /**
-   * @deprecated
-   * Compare a string with userContext.apiType instead: userContext.apiType === "Mongo"
-   * */
-  public isEnableMongoCapabilityPresent: ko.Computed<boolean>;
  public isServerlessEnabled: ko.Computed<boolean>;
  public isAccountReady: ko.Observable<boolean>;
  public canSaveQueries: ko.Computed<boolean>;
@@ -176,7 +161,6 @@ export default class Explorer {
  // features
  public isPublishNotebookPaneEnabled: ko.Observable<boolean>;
  public isHostedDataExplorerEnabled: ko.Computed<boolean>;
-  public isRightPanelV2Enabled: ko.Computed<boolean>;
  public isMongoIndexingEnabled: ko.Observable<boolean>;
  public canExceedMaximumValue: ko.Computed<boolean>;
  public isAutoscaleDefaultEnabled: ko.Observable<boolean>;
@@ -236,7 +220,6 @@ export default class Explorer {
    this.deleteDatabaseText = ko.observable<string>("Delete Database");
    this.refreshTreeTitle = ko.observable<string>("Refresh collections");

-    this.databaseAccount = ko.observable<DataModels.DatabaseAccount>();
    this.isAccountReady = ko.observable<boolean>(false);
    this._isInitializingNotebooks = false;
    this.arcadiaToken = ko.observable<string>();
@@ -271,7 +254,7 @@ export default class Explorer {
          async () => {
            this.isNotebookEnabled(
              userContext.authType !== AuthType.ResourceToken &&
-                ((await this._containsDefaultNotebookWorkspace(this.databaseAccount())) ||
+                ((await this._containsDefaultNotebookWorkspace(userContext.databaseAccount)) ||
                  userContext.features.enableNotebooks)
            );
            TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
@@ -280,7 +263,7 @@ export default class Explorer {
            });

            if (this.isNotebookEnabled()) {
-              await this.initNotebooks(this.databaseAccount());
+              await this.initNotebooks(userContext.databaseAccount);
              const workspaces = await this._getArcadiaWorkspaces();
              this.arcadiaWorkspaces(workspaces);
            } else if (this.notebookToImport) {
@@ -376,60 +359,32 @@ export default class Explorer {
      bounds: splitterBounds,
      direction: SplitterDirection.Vertical,
    });
-    this.defaultExperience = ko.observable<string>();
-    // this.databaseAccount.subscribe((databaseAccount) => {
-    //   const defaultExperience: string = DefaultExperienceUtility.getDefaultExperienceFromDatabaseAccount(
-    //     databaseAccount
-    //   );
-    //   this.defaultExperience(defaultExperience);
-    //   // TODO. Remove this entirely
-    //   updateUserContext({
-    //     apiType: DefaultExperienceUtility.mapDefaultExperienceStringToEnum(defaultExperience),
-    //   });
-    // });

    this.isFixedCollectionWithSharedThroughputSupported = ko.computed(() => {
      if (userContext.features.enableFixedCollectionWithSharedThroughput) {
        return true;
      }

-      if (this.databaseAccount && !this.databaseAccount()) {
+      if (!userContext.databaseAccount) {
        return false;
      }

-      return this.isEnableMongoCapabilityPresent();
+      return userContext.apiType === "Mongo";
    });

    this.isServerlessEnabled = ko.computed(
      () =>
-        this.databaseAccount &&
-        this.databaseAccount()?.properties?.capabilities?.find(
+        userContext.databaseAccount?.properties?.capabilities?.find(
          (item) => item.name === Constants.CapabilityNames.EnableServerless
        ) !== undefined
    );

-    this.isEnableMongoCapabilityPresent = ko.computed(() => {
-      const capabilities = this.databaseAccount && this.databaseAccount()?.properties?.capabilities;
-      if (!capabilities) {
-        return false;
-      }
-
-      for (let i = 0; i < capabilities.length; i++) {
-        if (typeof capabilities[i] === "object" && capabilities[i].name === Constants.CapabilityNames.EnableMongo) {
-          return true;
-        }
-      }
-
-      return false;
-    });
-
    this.isHostedDataExplorerEnabled = ko.computed<boolean>(
      () =>
        configContext.platform === Platform.Portal &&
        !this.isRunningOnNationalCloud() &&
        userContext.apiType !== "Gremlin"
    );
-    this.isRightPanelV2Enabled = ko.computed<boolean>(() => userContext.features.enableRightPanelV2);
    this.selectedDatabaseId = ko.computed<string>(() => {
      const selectedNode = this.selectedNode();
      if (!selectedNode) {
@@ -688,11 +643,11 @@ export default class Explorer {
        this.isSynapseLinkUpdating(true);
        this._closeSynapseLinkModalDialog();

-        const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(this.databaseAccount().id);
+        const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(userContext.databaseAccount.id);

        try {
          const databaseAccount: DataModels.DatabaseAccount = await resourceProviderClient.patchAsync(
-            this.databaseAccount().id,
+            userContext.databaseAccount.id,
            "2019-12-12",
            {
              properties: {
@@ -703,7 +658,7 @@ export default class Explorer {
          clearInProgressMessage();
          logConsoleInfo("Enabled Azure Synapse Link for this account");
          TelemetryProcessor.traceSuccess(Action.EnableAzureSynapseLink, {}, startTime);
-          this.databaseAccount(databaseAccount);
+          updateUserContext({ databaseAccount });
        } catch (error) {
          clearInProgressMessage();
          logConsoleError(`Enabling Azure Synapse Link for this account failed. ${getErrorMessage(error)}`);
@@ -752,10 +707,6 @@ export default class Explorer {
    this.setIsNotificationConsoleExpanded(true);
  }

-  public collapseConsole(): void {
-    this.setIsNotificationConsoleExpanded(false);
-  }
-
  public toggleLeftPaneExpanded() {
    this.isLeftPaneExpanded(!this.isLeftPaneExpanded());

@@ -1026,14 +977,14 @@ export default class Explorer {
  }

  private async ensureNotebookWorkspaceRunning() {
-    if (!this.databaseAccount()) {
+    if (!userContext.databaseAccount) {
      return;
    }

    let clearMessage;
    try {
      const notebookWorkspace = await this.notebookWorkspaceManager.getNotebookWorkspaceAsync(
-        this.databaseAccount().id,
+        userContext.databaseAccount.id,
        "default"
      );
      if (
@@ -1043,7 +994,7 @@ export default class Explorer {
        notebookWorkspace.properties.status.toLowerCase() === "stopped"
      ) {
        clearMessage = NotificationConsoleUtils.logConsoleProgress("Initializing notebook workspace");
-        await this.notebookWorkspaceManager.startNotebookWorkspaceAsync(this.databaseAccount().id, "default");
+        await this.notebookWorkspaceManager.startNotebookWorkspaceAsync(userContext.databaseAccount.id, "default");
      }
    } catch (error) {
      handleError(error, "Explorer/ensureNotebookWorkspaceRunning", "Failed to initialize notebook workspace");
@@ -1128,21 +1079,10 @@ export default class Explorer {
      if (process.env.NODE_ENV === "development") {
        sessionStorage.setItem("portalDataExplorerInitMessage", JSON.stringify(inputs));
      }
-
-      const databaseAccount = inputs.databaseAccount || null;
      if (inputs.defaultCollectionThroughput) {
        this.collectionCreationDefaults = inputs.defaultCollectionThroughput;
      }
-      this.databaseAccount(databaseAccount);
      this.setFeatureFlagsFromFlights(inputs.flights);
-      TelemetryProcessor.traceSuccess(
-        Action.LoadDatabaseAccount,
-        {
-          dataExplorerArea: Constants.Areas.ResourceTree,
-        },
-        inputs.loadDatabaseAccountTimestamp
-      );
-
      this.isAccountReady(true);
    }
  }
@@ -1181,38 +1121,6 @@ export default class Explorer {
    this.commandBarComponentAdapter.onUpdateTabsButtons(buttons);
  }

-  public signInAad = () => {
-    TelemetryProcessor.trace(Action.SignInAad, undefined, { area: "Explorer" });
-    sendMessage({
-      type: MessageTypes.AadSignIn,
-    });
-  };
-
-  public onSwitchToConnectionString = () => {
-    $("#connectWithAad").hide();
-    $("#connectWithConnectionString").show();
-  };
-
-  public clickHostedAccountSwitch = () => {
-    sendMessage({
-      type: MessageTypes.UpdateAccountSwitch,
-      click: true,
-    });
-  };
-
-  public clickHostedDirectorySwitch = () => {
-    sendMessage({
-      type: MessageTypes.UpdateDirectoryControl,
-      click: true,
-    });
-  };
-
-  public refreshDatabaseAccount = () => {
-    sendMessage({
-      type: MessageTypes.RefreshDatabaseAccount,
-    });
-  };
-
  private refreshAndExpandNewDatabases(newDatabases: ViewModels.Database[]): Q.Promise<void> {
    // we reload collections for all databases so the resource tree reflects any collection-level changes
    // i.e addition of stored procedures, etc.
@@ -1632,7 +1540,7 @@ export default class Explorer {
  }

  private async _refreshNotebooksEnabledStateForAccount(): Promise<void> {
-    const authType = userContext.authType;
+    const { databaseAccount, authType } = userContext;
    if (
      authType === AuthType.EncryptedToken ||
      authType === AuthType.ResourceToken ||
@@ -1642,7 +1550,6 @@ export default class Explorer {
      return;
    }

-    const databaseAccount = this.databaseAccount();
    const firstWriteLocation =
      databaseAccount?.properties?.writeLocations &&
      databaseAccount?.properties?.writeLocations[0]?.locationName.toLowerCase();
@@ -1681,9 +1588,8 @@ export default class Explorer {
  }

  public _refreshSparkEnabledStateForAccount = async (): Promise<void> => {
-    const subscriptionId = userContext.subscriptionId;
+    const { subscriptionId, authType } = userContext;
    const armEndpoint = configContext.ARM_ENDPOINT;
-    const authType = userContext.authType;
    if (!subscriptionId || !armEndpoint || authType === AuthType.EncryptedToken) {
      // explorer is not aware of the database account yet
      this.isSparkEnabledForAccount(false);
@@ -1710,9 +1616,8 @@ export default class Explorer {
  };

  public _isAfecFeatureRegistered = async (featureName: string): Promise<boolean> => {
-    const subscriptionId = userContext.subscriptionId;
+    const { subscriptionId, authType } = userContext;
    const armEndpoint = configContext.ARM_ENDPOINT;
-    const authType = userContext.authType;
    if (!featureName || !subscriptionId || !armEndpoint || authType === AuthType.EncryptedToken) {
      // explorer is not aware of the database account yet
      return false;
@@ -2024,7 +1929,7 @@ export default class Explorer {
  }

  public async handleOpenFileAction(path: string): Promise<void> {
-    if (this.isAccountReady() && !(await this._containsDefaultNotebookWorkspace(this.databaseAccount()))) {
+    if (this.isAccountReady() && !(await this._containsDefaultNotebookWorkspace(userContext.databaseAccount))) {
      this.closeAllPanes();
      this._openSetupNotebooksPaneForQuickstart();
    }
--- a/src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx
@@ -1,5 +1,5 @@
+import { FocusZone } from "@fluentui/react";
 import * as React from "react";
-import { FocusZone } from "office-ui-fabric-react/lib/FocusZone";
 import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";

 export interface CaptionId {
--- a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
+++ b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
@@ -1,6 +1,6 @@
+import { Dropdown, IDropdownOption, Stack, TextField } from "@fluentui/react";
 import AddIcon from "images/Add-property.svg";
 import DeleteIcon from "images/delete.svg";
-import { Dropdown, IDropdownOption, Stack, TextField } from "office-ui-fabric-react";
 import React, { FunctionComponent, useRef, useState } from "react";
 import { NormalizedEventKey } from "../../../Common/Constants";
 import { GremlinPropertyValueType, InputPropertyValueTypeString, NewVertexData } from "../../../Contracts/ViewModels";
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
@@ -3,12 +3,13 @@
 * 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 { CommandBar, ICommandBarItemProps } from "@fluentui/react";
 import * as ko from "knockout";
-import { CommandBar, ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
 import * as React from "react";
 import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
 import { StyleConstants } from "../../../Common/Constants";
 import * as ViewModels from "../../../Contracts/ViewModels";
+import { userContext } from "../../../UserContext";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
@@ -39,7 +40,7 @@ export class CommandBarComponentAdapter implements ReactAdapter {
      container.isResourceTokenCollectionNodeSelected,
      container.isHostedDataExplorerEnabled,
      container.isSynapseLinkUpdating,
-      container.databaseAccount,
+      userContext?.databaseAccount,
      this.isNotebookTabActive,
      container.isServerlessEnabled,
    ];
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
@@ -239,21 +239,11 @@ function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonCo
    return undefined;
  }

-  if (
-    container.databaseAccount &&
-    container.databaseAccount() &&
-    container.databaseAccount().properties &&
-    container.databaseAccount().properties.enableAnalyticalStorage
-  ) {
+  if (userContext?.databaseAccount?.properties?.enableAnalyticalStorage) {
    return undefined;
  }

-  const capabilities =
-    (container.databaseAccount &&
-      container.databaseAccount() &&
-      container.databaseAccount().properties &&
-      container.databaseAccount().properties.capabilities) ||
-    [];
+  const capabilities = userContext?.databaseAccount?.properties?.capabilities || [];
  if (capabilities.some((capability) => capability.name === Constants.CapabilityNames.EnableStorageAnalytics)) {
    return undefined;
  }
--- a/src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx
@@ -1,6 +1,6 @@
-import * as CommandBarUtil from "./CommandBarUtil";
-import { ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
+import { ICommandBarItemProps } from "@fluentui/react";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import * as CommandBarUtil from "./CommandBarUtil";

 describe("CommandBarUtil tests", () => {
  const createButton = (): CommandButtonComponentProps => {
--- a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
@@ -1,9 +1,13 @@
+import {
+  Dropdown,
+  ICommandBarItemProps,
+  IComponentAsProps,
+  IconType,
+  IDropdownOption,
+  IDropdownStyles,
+} from "@fluentui/react";
 import ChevronDownIcon from "images/Chevron_down.svg";
 import { Observable } from "knockout";
-import { ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
-import { Dropdown, IDropdownOption, IDropdownStyles } from "office-ui-fabric-react/lib/Dropdown";
-import { IconType } from "office-ui-fabric-react/lib/Icon";
-import { IComponentAsProps } from "office-ui-fabric-react/lib/Utilities";
 import * as React from "react";
 import _ from "underscore";
 import { StyleConstants } from "../../../Common/Constants";
--- a/src/Explorer/Menus/CommandBar/MemoryTrackerComponent.tsx
+++ b/src/Explorer/Menus/CommandBar/MemoryTrackerComponent.tsx
@@ -1,9 +1,7 @@
-import * as React from "react";
+import { ProgressIndicator, Spinner, SpinnerSize, Stack } from "@fluentui/react";
 import { Observable, Subscription } from "knockout";
+import * as React from "react";
 import { MemoryUsageInfo } from "../../../Contracts/DataModels";
-import { ProgressIndicator } from "office-ui-fabric-react/lib/ProgressIndicator";
-import { Spinner, SpinnerSize } from "office-ui-fabric-react/lib/Spinner";
-import { Stack } from "office-ui-fabric-react/lib/Stack";

 interface MemoryTrackerProps {
  memoryUsageInfo: Observable<MemoryUsageInfo>;
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
@@ -2,6 +2,7 @@
 * React component for control bar
 */

+import { Dropdown, IDropdownOption } from "@fluentui/react";
 import LoaderIcon from "images/circular_loader_black_16x16.gif";
 import { ReactComponent as ClearIcon } from "images/Clear1.svg";
 import ErrorBlackIcon from "images/error_black.svg";
@@ -11,7 +12,6 @@ import InfoIcon from "images/info_color.svg";
 import LoadingIcon from "images/loading.svg";
 import ChevronDownIcon from "images/QueryBuilder/CollapseChevronDown_16x.png";
 import ChevronUpIcon from "images/QueryBuilder/CollapseChevronUp_16x.png";
-import { Dropdown, IDropdownOption } from "office-ui-fabric-react";
 import * as React from "react";
 import AnimateHeight from "react-animate-height";
 import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
--- a/src/Explorer/Menus/NotificationConsole/snapshots/NotificationConsoleComponent.test.tsx.snap
+++ b/src/Explorer/Menus/NotificationConsole/snapshots/NotificationConsoleComponent.test.tsx.snap
@@ -111,7 +111,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
      <div
        className="notificationConsoleControls"
      >
-        <StyledWithResponsiveMode
+        <Dropdown
          aria-label="All"
          aria-labelledby="consoleFilterLabel"
          label="Filter:"
@@ -274,7 +274,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
      <div
        className="notificationConsoleControls"
      >
-        <StyledWithResponsiveMode
+        <Dropdown
          aria-label="All"
          aria-labelledby="consoleFilterLabel"
          label="Filter:"
--- a/Show More
+++ b/Show More