Typescript strict mode in editor

This does not change the strictness of what we build. It doesn't
make things more lax either, that stays exactly the same. But the
editor will now complain more.

.eslintignore

@@ -1,5 +1,4 @@
 **/node_modules/
-src/**/__mocks__/**/*
 dist/
 Contracts/
 src/Api/Apis.ts
@@ -119,10 +118,14 @@ src/Explorer/Panes/ContextualPaneBase.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts
 src/Explorer/Panes/GraphStylingPane.ts
+# src/Explorer/Panes/NewVertexPane.ts
 src/Explorer/Panes/PaneComponents.ts
 src/Explorer/Panes/RenewAdHocAccessPane.ts
 src/Explorer/Panes/SetupNotebooksPane.ts
 src/Explorer/Panes/SwitchDirectoryPane.ts
+src/Explorer/Panes/Tables/EditTableEntityPane.ts
+src/Explorer/Panes/Tables/EntityPropertyViewModel.ts
+src/Explorer/Panes/Tables/TableEntityPane.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyNameValidator.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValidationCommon.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValueValidator.ts

.eslintrc.js

@@ -11,7 +11,6 @@ module.exports = {
   },
   parser: "@typescript-eslint/parser",
   parserOptions: {
-    project: ["./tsconfig.json", "./tsconfig.test.json"],
     ecmaFeatures: {
       jsx: true,
     },
@@ -36,7 +35,6 @@ module.exports = {
   rules: {
     "no-console": ["error", { allow: ["error", "warn", "dir"] }],
     curly: "error",
-    "@typescript-eslint/switch-exhaustiveness-check": "error",
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-extraneous-class": "error",
     "no-null/no-null": "error",

.github/workflows/ci.yml

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

CODING_GUIDELINES.md

@@ -188,3 +188,7 @@ Cosmos Explorer has been under constant development for over 5 years. As a resul
 ✅ DO
 
 - Support all [browsers supported by the Azure Portal](https://docs.microsoft.com/en-us/azure/azure-portal/azure-portal-supported-browsers-devices)
+- Support IE11
+  - In practice, this should not need to be considered as part of a normal development workflow
+  - Polyfills and transpilation are already provided by our engineering systems.
+  - This requirement will be removed on March 30th, 2021 when Azure drops IE11 support.

jest.config.js

@@ -69,8 +69,7 @@ module.exports = {
   moduleNameMapper: {
     "^.*[.](svg|png|gif|less|css)$": "<rootDir>/mockModule",
     "@nteract/stateful-components/(.*)$": "<rootDir>/mockModule",
-    "@fluentui/react/lib/(.*)$": "@fluentui/react/lib-commonjs/$1", // https://github.com/microsoft/fluentui/wiki/Version-8-release-notes
-    "monaco-editor/(.*)$": "<rootDir>/__mocks__/monaco-editor",
+    "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
     "^dnd-core$": "dnd-core/dist/cjs",
     "^react-dnd$": "react-dnd/dist/cjs",
     "^react-dnd-html5-backend$": "react-dnd-html5-backend/dist/cjs",

package.json

@@ -11,7 +11,6 @@
     "@azure/ms-rest-nodeauth": "3.0.7",
     "@babel/plugin-proposal-class-properties": "7.12.1",
     "@babel/plugin-proposal-decorators": "7.12.12",
-    "@fluentui/react": "8.10.1",
     "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.6.1",
@@ -44,6 +43,7 @@
     "@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",
@@ -76,6 +76,7 @@
     "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",
@@ -101,10 +102,10 @@
     "utility-types": "3.10.0"
   },
   "devDependencies": {
-    "@babel/core": "7.14.0",
-    "@babel/preset-env": "7.14.1",
-    "@babel/preset-react": "7.13.13",
-    "@babel/preset-typescript": "7.13.0",
+    "@babel/core": "7.9.0",
+    "@babel/preset-env": "7.9.0",
+    "@babel/preset-react": "7.9.4",
+    "@babel/preset-typescript": "7.9.0",
     "@testing-library/react": "11.2.3",
     "@types/applicationinsights-js": "1.0.7",
     "@types/codemirror": "0.0.56",
@@ -127,10 +128,10 @@
     "@types/sinon": "2.3.3",
     "@types/styled-components": "5.1.1",
     "@types/underscore": "1.7.36",
-    "@typescript-eslint/eslint-plugin": "4.22.1",
-    "@typescript-eslint/parser": "4.22.1",
-    "babel-jest": "26.6.3",
-    "babel-loader": "8.2.2",
+    "@typescript-eslint/eslint-plugin": "4.0.1",
+    "@typescript-eslint/parser": "4.0.1",
+    "babel-jest": "24.9.0",
+    "babel-loader": "8.1.0",
     "buffer": "5.1.0",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
     "create-file-webpack": "1.0.2",
@@ -138,7 +139,7 @@
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.5",
     "enzyme-to-json": "3.6.1",
-    "eslint": "7.25.0",
+    "eslint": "7.8.1",
     "eslint-cli": "1.1.1",
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-prefer-arrow": "1.2.2",
@@ -152,7 +153,7 @@
     "html-loader": "0.5.5",
     "html-loader-jest": "0.2.1",
     "html-webpack-plugin": "4.5.2",
-    "jest": "26.6.3",
+    "jest": "25.5.4",
     "jest-canvas-mock": "2.1.0",
     "jest-playwright-preset": "1.5.1",
     "jest-trx-results-processor": "0.0.7",
@@ -169,10 +170,10 @@
     "rimraf": "3.0.0",
     "sinon": "3.2.1",
     "style-loader": "0.23.0",
-    "ts-loader": "9.1.2",
-    "tslint": "6.1.3",
-    "tslint-microsoft-contrib": "6.2.0",
-    "typescript": "4.3.0-beta",
+    "ts-loader": "6.2.2",
+    "tslint": "5.11.0",
+    "tslint-microsoft-contrib": "6.0.0",
+    "typescript": "4.2.4",
     "url-loader": "1.1.1",
     "wait-on": "4.0.2",
     "webpack": "4.46.0",
@@ -190,11 +191,11 @@
     "pack:fast": "node --max_old_space_size=10196 ./node_modules/webpack/bin/webpack.js  --mode development --progress",
     "copyToConsumers": "node copyToConsumers",
     "test": "rimraf coverage && jest",
-    "test:e2e": "jest -c ./jest.config.playwright.js --detectOpenHandles",
+    "test:e2e": "jest -c ./jest.config.e2e.js --detectOpenHandles",
     "watch": "npm run start",
     "wait-for-server": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/",
     "build:ase": "gulp build:ase",
-    "compile": "tsc",
+    "compile": "tsc -p ./tsconfig.build.json",
     "compile:contracts": "tsc -p ./tsconfig.contracts.json",
     "compile:strict": "tsc -p ./tsconfig.strict.json",
     "format": "prettier --write \"{src,test}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
@@ -203,7 +204,7 @@
     "build:contracts": "npm run compile:contracts",
     "strict:find": "node ./strict-null-checks/find.js",
     "strict:add": "node ./strict-null-checks/auto-add.js",
-    "compile:fullStrict": "tsc -p ./tsconfig.json --strictNullChecks",
+    "compile:fullStrict": "tsc",
     "generateARMClients": "ts-node --compiler-options '{\"module\":\"commonjs\"}' utils/armClientGenerator/generator.ts"
   },
   "repository": {

src/CellOutputViewer/CellOutputViewer.less

@@ -1,10 +0,0 @@
-.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;
-}

src/CellOutputViewer/CellOutputViewer.tsx

@@ -11,14 +11,13 @@ 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;
-  outputsContainerClassName: string;
-  outputClassName: string;
+  hidden: boolean;
+  expanded: boolean;
   outputs: OnDiskOutput[];
   onMetadataChange: (metadata: JSONObject, mediaType: string, index?: number) => void;
 }
@@ -35,26 +34,27 @@ 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={props.outputsContainerClassName}>
+        <div
+          data-iframe-height
+          className={`nteract-cell-outputs ${props.hidden ? "hidden" : ""} ${props.expanded ? "expanded" : ""}`}
+        >
           {props.outputs?.map((output, index) => (
-            <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>
+            <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>
       );

src/Common/Constants.ts

@@ -65,18 +65,28 @@ export class ClientDefaults {
   public static readonly arcadiaTokenRefreshIntervalPaddingMs: number = 2000;
 }
 
-export enum AccountKind {
-  DocumentDB = "DocumentDB",
-  MongoDB = "MongoDB",
-  Parse = "Parse",
-  GlobalDocumentDB = "GlobalDocumentDB",
-  Default = "DocumentDB",
+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 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";

src/Common/CosmosClient.test.ts

@@ -1,5 +1,5 @@
 import { ResourceType } from "@azure/cosmos/dist-esm/common/constants";
-import { Platform, resetConfigContext, updateConfigContext } from "../ConfigContext";
+import { configContext, Platform, updateConfigContext, resetConfigContext } from "../ConfigContext";
 import { updateUserContext } from "../UserContext";
 import { endpoint, getTokenFromAuthService, requestPlugin, tokenProvider } from "./CosmosClient";
 
@@ -91,6 +91,7 @@ describe("endpoint", () => {
         location: "foo",
         type: "foo",
         kind: "foo",
+        tags: [],
         properties: {
           documentEndpoint: "bar",
           gremlinEndpoint: "foo",

src/Common/CosmosClient.ts

@@ -43,7 +43,12 @@ export const endpoint = () => {
     const location = _global.parent ? _global.parent.location : _global.location;
     return configContext.EMULATOR_ENDPOINT || location.origin;
   }
-  return userContext.endpoint || userContext?.databaseAccount?.properties?.documentEndpoint;
+  return (
+    userContext.endpoint ||
+    (userContext.databaseAccount &&
+      userContext.databaseAccount.properties &&
+      userContext.databaseAccount.properties.documentEndpoint)
+  );
 };
 
 export async function getTokenFromAuthService(verb: string, resourceType: string, resourceId?: string): Promise<any> {

src/Common/EntityValue.tsx

@@ -1,4 +1,4 @@
-import { DatePicker, TextField } from "@fluentui/react";
+import { DatePicker, TextField } from "office-ui-fabric-react";
 import React, { FunctionComponent } from "react";
 
 export interface TableEntityProps {

src/Common/MongoProxyClient.ts

@@ -61,7 +61,7 @@ export function queryDocuments(
   query: string,
   continuationToken?: string
 ): Promise<QueryResponse> {
-  const { databaseAccount } = userContext;
+  const databaseAccount = userContext.databaseAccount;
   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;
+  const databaseAccount = userContext.databaseAccount;
   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;
+  const databaseAccount = userContext.databaseAccount;
   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;
+  const databaseAccount = userContext.databaseAccount;
   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;
+  const databaseAccount = userContext.databaseAccount;
   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;
+  const databaseAccount = userContext.databaseAccount;
   const shardKey: string = params.partitionKey?.paths[0];
   const mongoParams: DataModels.MongoParameters = {
     resourceUrl: databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint,

src/Common/ObjectCache.ts

@@ -3,11 +3,11 @@ export class ObjectCache<T> extends Map<string, T> {
     super();
   }
 
-  public override get(key: string): T | undefined {
+  public get(key: string): T | undefined {
     return this.touch(key);
   }
 
-  public override set(key: string, value: T): this {
+  public set(key: string, value: T): this {
     if (this.size === this.limit) {
       this.delete(this.keys().next().value);
     }

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 { userContext } from "../UserContext";
 import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
+import { userContext } from "../UserContext";
+import { configContext, Platform } from "../ConfigContext";
 
 const notificationsPath = () => {
   switch (configContext.platform) {
@@ -20,7 +20,9 @@ export const fetchPortalNotifications = async (): Promise<DataModels.Notificatio
     return [];
   }
 
-  const { databaseAccount, resourceGroup, subscriptionId } = userContext;
+  const databaseAccount = userContext.databaseAccount;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
   const url = `${configContext.BACKEND_ENDPOINT}${notificationsPath()}?accountName=${
     databaseAccount.name
   }&subscriptionId=${subscriptionId}&resourceGroup=${resourceGroup}`;

src/Common/QueriesClient.ts

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

src/Common/TableEntity.tsx

@@ -8,7 +8,7 @@ import {
   Stack,
   TextField,
   TooltipHost,
-} from "@fluentui/react";
+} from "office-ui-fabric-react";
 import React, { FunctionComponent } from "react";
 import DeleteIcon from "../../images/delete.svg";
 import EditIcon from "../../images/Edit_entity.svg";

src/Common/Tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
-import { ITooltipHostStyles, TooltipHost } from "@fluentui/react";
-import { useId } from "@fluentui/react-hooks";
+import { useId } from "@uifabric/react-hooks";
+import { ITooltipHostStyles, TooltipHost } from "office-ui-fabric-react/lib/Tooltip";
 import * as React from "react";
 import InfoBubble from "../../../images/info-bubble.svg";
 

src/Common/Upload/Upload.tsx

@@ -1,4 +1,4 @@
-import { Image, Stack, TextField } from "@fluentui/react";
+import { Image, Stack, TextField } from "office-ui-fabric-react";
 import React, { ChangeEvent, FunctionComponent, KeyboardEvent, useRef, useState } from "react";
 import FolderIcon from "../../../images/folder_16x16.svg";
 import * as Constants from "../Constants";

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 { apiType } = userContext;
-  switch (apiType) {
+  const defaultExperience = userContext.apiType;
+  switch (defaultExperience) {
     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: ${apiType}`);
+      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
   }
 };
 

src/Common/dataAccess/createDatabase.ts

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

src/Common/dataAccess/deleteCollection.ts

@@ -27,10 +27,12 @@ export async function deleteCollection(databaseId: string, collectionId: string)
 }
 
 function deleteCollectionWithARM(databaseId: string, collectionId: string): Promise<void> {
-  const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
+  const defaultExperience = userContext.apiType;
 
-  switch (apiType) {
+  switch (defaultExperience) {
     case "SQL":
       return deleteSqlContainer(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
     case "Mongo":
@@ -42,6 +44,6 @@ function deleteCollectionWithARM(databaseId: string, collectionId: string): Prom
     case "Tables":
       return deleteTable(subscriptionId, resourceGroup, accountName, collectionId);
     default:
-      throw new Error(`Unsupported default experience type: ${apiType}`);
+      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
   }
 }

src/Common/dataAccess/deleteDatabase.ts

@@ -30,10 +30,12 @@ export async function deleteDatabase(databaseId: string): Promise<void> {
 }
 
 function deleteDatabaseWithARM(databaseId: string): Promise<void> {
-  const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
+  const defaultExperience = userContext.apiType;
 
-  switch (apiType) {
+  switch (defaultExperience) {
     case "SQL":
       return deleteSqlDatabase(subscriptionId, resourceGroup, accountName, databaseId);
     case "Mongo":
@@ -43,6 +45,6 @@ function deleteDatabaseWithARM(databaseId: string): Promise<void> {
     case "Gremlin":
       return deleteGremlinDatabase(subscriptionId, resourceGroup, accountName, databaseId);
     default:
-      throw new Error(`Unsupported default experience type: ${apiType}`);
+      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
   }
 }

src/Common/dataAccess/getCollectionDataUsageSize.ts

@@ -1,8 +1,8 @@
 import { AuthType } from "../../AuthType";
-import { configContext } from "../../ConfigContext";
-import { userContext } from "../../UserContext";
 import { armRequest } from "../../Utils/arm/request";
+import { configContext } from "../../ConfigContext";
 import { handleError } from "../ErrorHandlingUtils";
+import { userContext } from "../../UserContext";
 
 interface TimeSeriesData {
   data: {
@@ -45,9 +45,9 @@ export const getCollectionUsageSizeInKB = async (databaseName: string, container
     return undefined;
   }
 
-  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
-
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.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`;

src/Common/dataAccess/readCollectionOffer.ts

@@ -28,12 +28,14 @@ export const readCollectionOffer = async (params: ReadCollectionOfferParams): Pr
 };
 
 const readCollectionOfferWithARM = async (databaseId: string, collectionId: string): Promise<Offer> => {
-  const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
+  const defaultExperience = userContext.apiType;
 
   let rpResponse;
   try {
-    switch (apiType) {
+    switch (defaultExperience) {
       case "SQL":
         rpResponse = await getSqlContainerThroughput(
           subscriptionId,
@@ -74,7 +76,7 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
         rpResponse = await getTableThroughput(subscriptionId, resourceGroup, accountName, collectionId);
         break;
       default:
-        throw new Error(`Unsupported default experience type: ${apiType}`);
+        throw new Error(`Unsupported default experience type: ${defaultExperience}`);
     }
   } catch (error) {
     if (error.code !== "NotFound") {

src/Common/dataAccess/readCollections.ts

@@ -29,11 +29,12 @@ 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;
 
-  const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
-
-  switch (apiType) {
+  switch (defaultExperience) {
     case "SQL":
       rpResponse = await listSqlContainers(subscriptionId, resourceGroup, accountName, databaseId);
       break;
@@ -50,7 +51,7 @@ async function readCollectionsWithARM(databaseId: string): Promise<DataModels.Co
       rpResponse = await listTables(subscriptionId, resourceGroup, accountName);
       break;
     default:
-      throw new Error(`Unsupported default experience type: ${apiType}`);
+      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
   }
 
   return rpResponse?.value?.map((collection) => collection.properties?.resource as DataModels.Collection);

src/Common/dataAccess/readDatabaseOffer.ts

@@ -27,12 +27,14 @@ export const readDatabaseOffer = async (params: ReadDatabaseOfferParams): Promis
 };
 
 const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
-  const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
+  const defaultExperience = userContext.apiType;
 
   let rpResponse;
   try {
-    switch (apiType) {
+    switch (defaultExperience) {
       case "SQL":
         rpResponse = await getSqlDatabaseThroughput(subscriptionId, resourceGroup, accountName, databaseId);
         break;
@@ -46,7 +48,7 @@ const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
         rpResponse = await getGremlinDatabaseThroughput(subscriptionId, resourceGroup, accountName, databaseId);
         break;
       default:
-        throw new Error(`Unsupported default experience type: ${apiType}`);
+        throw new Error(`Unsupported default experience type: ${defaultExperience}`);
     }
   } catch (error) {
     if (error.code !== "NotFound") {

src/Common/dataAccess/readDatabases.ts

@@ -29,10 +29,12 @@ export async function readDatabases(): Promise<DataModels.Database[]> {
 
 async function readDatabasesWithARM(): Promise<DataModels.Database[]> {
   let rpResponse;
-  const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
+  const defaultExperience = userContext.apiType;
 
-  switch (apiType) {
+  switch (defaultExperience) {
     case "SQL":
       rpResponse = await listSqlDatabases(subscriptionId, resourceGroup, accountName);
       break;
@@ -46,7 +48,7 @@ async function readDatabasesWithARM(): Promise<DataModels.Database[]> {
       rpResponse = await listGremlinDatabases(subscriptionId, resourceGroup, accountName);
       break;
     default:
-      throw new Error(`Unsupported default experience type: ${apiType}`);
+      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
   }
 
   return rpResponse?.value?.map((database) => database.properties?.resource as DataModels.Database);

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, resourceGroup, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
 
   const clearMessage = logConsoleProgress(`Reading container ${collectionId}`);
   try {

src/Common/dataAccess/readUserDefinedFunctions.ts

@@ -11,13 +11,12 @@ 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 (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") {
+    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
       const rpResponse = await listSqlUserDefinedFunctions(
-        subscriptionId,
-        resourceGroup,
-        databaseAccount.name,
+        userContext.subscriptionId,
+        userContext.resourceGroup,
+        userContext.databaseAccount.name,
         databaseId,
         collectionId
       );

src/Common/dataAccess/updateCollection.ts

@@ -63,10 +63,12 @@ async function updateCollectionWithARM(
   collectionId: string,
   newCollection: Partial<Collection>
 ): Promise<Collection> {
-  const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
+  const defaultExperience = userContext.apiType;
 
-  switch (apiType) {
+  switch (defaultExperience) {
     case "SQL":
       return updateSqlContainer(databaseId, collectionId, subscriptionId, resourceGroup, accountName, newCollection);
     case "Cassandra":
@@ -85,7 +87,7 @@ async function updateCollectionWithARM(
         newCollection
       );
     default:
-      throw new Error(`Unsupported default experience type: ${apiType}`);
+      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
   }
 }
 

src/Common/dataAccess/updateOffer.ts

@@ -144,8 +144,9 @@ const updateDatabaseOfferWithARM = async (params: UpdateOfferParams): Promise<Of
 };
 
 const updateSqlContainerOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
 
   if (params.migrateToAutoPilot) {
     await migrateSqlContainerToAutoscale(
@@ -177,8 +178,9 @@ const updateSqlContainerOffer = async (params: UpdateOfferParams): Promise<void>
 };
 
 const updateMongoCollectionOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
 
   if (params.migrateToAutoPilot) {
     await migrateMongoDBCollectionToAutoscale(
@@ -210,8 +212,9 @@ const updateMongoCollectionOffer = async (params: UpdateOfferParams): Promise<vo
 };
 
 const updateCassandraTableOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
 
   if (params.migrateToAutoPilot) {
     await migrateCassandraTableToAutoscale(
@@ -243,8 +246,9 @@ const updateCassandraTableOffer = async (params: UpdateOfferParams): Promise<voi
 };
 
 const updateGremlinGraphOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
 
   if (params.migrateToAutoPilot) {
     await migrateGremlinGraphToAutoscale(
@@ -276,8 +280,9 @@ const updateGremlinGraphOffer = async (params: UpdateOfferParams): Promise<void>
 };
 
 const updateTableOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
 
   if (params.migrateToAutoPilot) {
     await migrateTableToAutoscale(subscriptionId, resourceGroup, accountName, params.collectionId);
@@ -290,8 +295,9 @@ const updateTableOffer = async (params: UpdateOfferParams): Promise<void> => {
 };
 
 const updateSqlDatabaseOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
 
   if (params.migrateToAutoPilot) {
     await migrateSqlDatabaseToAutoscale(subscriptionId, resourceGroup, accountName, params.databaseId);
@@ -304,8 +310,9 @@ const updateSqlDatabaseOffer = async (params: UpdateOfferParams): Promise<void>
 };
 
 const updateMongoDatabaseOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
 
   if (params.migrateToAutoPilot) {
     await migrateMongoDBDatabaseToAutoscale(subscriptionId, resourceGroup, accountName, params.databaseId);
@@ -318,8 +325,9 @@ const updateMongoDatabaseOffer = async (params: UpdateOfferParams): Promise<void
 };
 
 const updateCassandraKeyspaceOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
 
   if (params.migrateToAutoPilot) {
     await migrateCassandraKeyspaceToAutoscale(subscriptionId, resourceGroup, accountName, params.databaseId);
@@ -332,8 +340,9 @@ const updateCassandraKeyspaceOffer = async (params: UpdateOfferParams): Promise<
 };
 
 const updateGremlinDatabaseOffer = async (params: UpdateOfferParams): Promise<void> => {
-  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
-  const accountName = databaseAccount.name;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
 
   if (params.migrateToAutoPilot) {
     await migrateGremlinDatabaseToAutoscale(subscriptionId, resourceGroup, accountName, params.databaseId);

src/Common/dataAccess/updateStoredProcedure.ts

@@ -20,13 +20,11 @@ export async function updateStoredProcedure(
 ): Promise<StoredProcedureDefinition & Resource> {
   const clearMessage = logConsoleProgress(`Updating stored procedure ${storedProcedure.id}`);
   try {
-    const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
-
-    if (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") {
+    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
       const getResponse = await getSqlStoredProcedure(
-        subscriptionId,
-        resourceGroup,
-        databaseAccount.name,
+        userContext.subscriptionId,
+        userContext.resourceGroup,
+        userContext.databaseAccount.name,
         databaseId,
         collectionId,
         storedProcedure.id
@@ -40,9 +38,9 @@ export async function updateStoredProcedure(
           },
         };
         const rpResponse = await createUpdateSqlStoredProcedure(
-          subscriptionId,
-          resourceGroup,
-          databaseAccount.name,
+          userContext.subscriptionId,
+          userContext.resourceGroup,
+          userContext.databaseAccount.name,
           databaseId,
           collectionId,
           storedProcedure.id,

src/Common/dataAccess/updateTrigger.ts

@@ -16,13 +16,12 @@ 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 (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") {
+    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
       const getResponse = await getSqlTrigger(
-        subscriptionId,
-        resourceGroup,
-        databaseAccount.name,
+        userContext.subscriptionId,
+        userContext.resourceGroup,
+        userContext.databaseAccount.name,
         databaseId,
         collectionId,
         trigger.id
@@ -36,9 +35,9 @@ export async function updateTrigger(
           },
         };
         const rpResponse = await createUpdateSqlTrigger(
-          subscriptionId,
-          resourceGroup,
-          databaseAccount.name,
+          userContext.subscriptionId,
+          userContext.resourceGroup,
+          userContext.databaseAccount.name,
           databaseId,
           collectionId,
           trigger.id,

src/Common/dataAccess/updateUserDefinedFunction.ts

@@ -19,13 +19,12 @@ 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 (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") {
+    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
       const getResponse = await getSqlUserDefinedFunction(
-        subscriptionId,
-        resourceGroup,
-        databaseAccount.name,
+        userContext.subscriptionId,
+        userContext.resourceGroup,
+        userContext.databaseAccount.name,
         databaseId,
         collectionId,
         userDefinedFunction.id
@@ -39,9 +38,9 @@ export async function updateUserDefinedFunction(
           },
         };
         const rpResponse = await createUpdateSqlUserDefinedFunction(
-          subscriptionId,
-          resourceGroup,
-          databaseAccount.name,
+          userContext.subscriptionId,
+          userContext.resourceGroup,
+          userContext.databaseAccount.name,
           databaseId,
           collectionId,
           userDefinedFunction.id,

src/Contracts/DataModels.ts

@@ -4,6 +4,7 @@ export interface DatabaseAccount {
   location: string;
   type: string;
   kind: string;
+  tags: any;
   properties: DatabaseAccountExtendedProperties;
 }
 

src/Explorer/ComponentRegisterer.ts

@@ -22,4 +22,7 @@ ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponent
 ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());
 ko.components.register("add-collection-pane", new PaneComponents.AddCollectionPaneComponent());
 ko.components.register("graph-styling-pane", new PaneComponents.GraphStylingPaneComponent());
+ko.components.register("table-add-entity-pane", new PaneComponents.TableAddEntityPaneComponent());
+ko.components.register("table-edit-entity-pane", new PaneComponents.TableEditEntityPaneComponent());
 ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());
+ko.components.register("github-repos-pane", new PaneComponents.GitHubReposPaneComponent());

src/Explorer/Controls/AccessibleElement/AccessibleElement.tsx

@@ -20,7 +20,7 @@ export class AccessibleElement extends React.Component<AccessibleElementProps> {
     }
   };
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     const elementProps = { ...this.props };
     delete elementProps.as;
     delete elementProps.onActivated;

src/Explorer/Controls/Accordion/AccordionComponent.tsx

@@ -12,7 +12,7 @@ import TriangleRightIcon from "../../../../images/Triangle-right.svg";
 export interface AccordionComponentProps {}
 
 export class AccordionComponent extends React.Component<AccordionComponentProps> {
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return <div className="accordion">{this.props.children}</div>;
   }
 }
@@ -42,7 +42,7 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
     };
   }
 
-public override componentDidUpdate() {
+  componentDidUpdate() {
     if (this.props.isExpanded !== this.isExpanded) {
       this.isExpanded = this.props.isExpanded;
       this.setState({
@@ -51,7 +51,7 @@ public override componentDidUpdate() {
     }
   }
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return (
       <div className="accordionItemContainer">
         <div className="accordionItemHeader" onClick={this.onHeaderClick} onKeyPress={this.onHeaderKeyPress}>

src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx

@@ -1,8 +1,9 @@
-import { DefaultButton, IButtonStyles, IContextualMenuItem, IContextualMenuProps } from "@fluentui/react";
 import * as React from "react";
-import { getErrorMessage } from "../../../Common/ErrorHandlingUtils";
-import * as Logger from "../../../Common/Logger";
 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";
 
 export interface ArcadiaMenuPickerProps {
   selectText?: string;
@@ -62,7 +63,7 @@ export class ArcadiaMenuPicker extends React.Component<ArcadiaMenuPickerProps, A
     this.props.onCreateNewSparkPoolClicked(item.key);
   };
 
-  public override render() {
+  public render() {
     const { workspaces } = this.props;
     let workspaceMenuItems: IContextualMenuItem[] = workspaces.map((workspace) => {
       let sparkPoolsMenuProps: IContextualMenuProps = {

src/Explorer/Controls/CollapsiblePanel/CollapsiblePanel.tsx

@@ -19,7 +19,7 @@ export interface CollapsiblePanelProps {
 }
 
 export class CollapsiblePanel extends React.Component<CollapsiblePanelProps> {
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return (
       <div className={`collapsiblePanel ${this.props.isCollapsed ? "paneCollapsed" : ""}`}>
         {!this.props.isCollapsed ? this.getExpandedFragment() : this.getCollapsedFragment()}

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -1,4 +1,4 @@
-import { Icon, Label, Stack } from "@fluentui/react";
+import { Icon, Label, Stack } from "office-ui-fabric-react";
 import * as React from "react";
 import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
 
@@ -24,13 +24,13 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
     this.setState({ isExpanded: !this.state.isExpanded });
   };
 
-  public override componentDidUpdate(): void {
+  public componentDidUpdate(): void {
     if (this.state.isExpanded && this.props.onExpand) {
       this.props.onExpand();
     }
   }
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return (
       <>
         <Stack

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -129,7 +129,7 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
   private dropdownElt: HTMLElement;
   private expandButtonElt: HTMLElement;
 
-  public override componentDidUpdate(): void {
+  public componentDidUpdate(): void {
     if (!this.dropdownElt || !this.expandButtonElt) {
       return;
     }
@@ -243,7 +243,7 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
     );
   }
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     let mainClassName = "commandButtonComponent";
     if (this.props.disabled) {
       mainClassName += " commandDisabled";

src/Explorer/Controls/Dialog.tsx

@@ -1,20 +1,14 @@
 import {
   ChoiceGroup,
-  DefaultButton,
-  Dialog as FluentDialog,
-  DialogFooter,
-  DialogType,
   FontIcon,
-  IButtonProps,
   IChoiceGroupProps,
-  IDialogProps,
   IProgressIndicatorProps,
-  ITextFieldProps,
-  Link,
-  PrimaryButton,
   ProgressIndicator,
-  TextField,
-} from "@fluentui/react";
+} 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";
 import React, { FunctionComponent } from "react";
 
 export interface TextFieldProps extends ITextFieldProps {

src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx

@@ -2,9 +2,9 @@
  * React component for Switch Directory
  */
 
-import { Dropdown, IDropdownOption, IDropdownProps } from "@fluentui/react";
-import * as React from "react";
 import _ from "underscore";
+import * as React from "react";
+import { Dropdown, IDropdownOption, IDropdownProps } from "office-ui-fabric-react/lib/Dropdown";
 import { Tenant } from "../../../Contracts/DataModels";
 
 export interface DefaultDirectoryDropdownProps {
@@ -16,7 +16,7 @@ export interface DefaultDirectoryDropdownProps {
 export class DefaultDirectoryDropdownComponent extends React.Component<DefaultDirectoryDropdownProps> {
   public static readonly lastVisitedKey: string = "lastVisited";
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     const lastVisitedOption: IDropdownOption = {
       key: DefaultDirectoryDropdownComponent.lastVisitedKey,
       text: "Sign in to your last visited directory",

src/Explorer/Controls/Directory/DirectoryListComponent.tsx

@@ -1,15 +1,11 @@
-import {
-  DefaultButton,
-  IButtonProps,
-  ITextFieldProps,
-  List,
-  ScrollablePane,
-  Sticky,
-  StickyPositionType,
-  TextField,
-} from "@fluentui/react";
-import * as React from "react";
 import _ from "underscore";
+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 { Tenant } from "../../../Contracts/DataModels";
 
 export interface DirectoryListProps {
@@ -36,7 +32,7 @@ export class DirectoryListComponent extends React.Component<DirectoryListProps,
     };
   }
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     const { directories: originalItems, selectedDirectoryId } = this.props;
     const { filterText } = this.state;
     const filteredItems =

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`] = `
-<Dropdown
+<StyledWithResponsiveMode
   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`] = `
-<Dropdown
+<StyledWithResponsiveMode
   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`] = `
-<Dropdown
+<StyledWithResponsiveMode
   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`] = `
-<Dropdown
+<StyledWithResponsiveMode
   className="defaultDirectoryDropdown"
   defaultSelectedKey="lastVisited"
   label="Set your default directory"

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-53"
+        className="ms-ScrollablePane root-40"
         data-is-scrollable="true"
       >
         <div
-          className="stickyAbove-55"
+          className="stickyAbove-42"
           style={
             Object {
               "height": 0,
@@ -365,7 +365,7 @@ exports[`test render renders with filters 1`] = `
           }
         />
         <div
-          className="ms-ScrollablePane--contentContainer contentContainer-54"
+          className="ms-ScrollablePane--contentContainer contentContainer-41"
           data-is-scrollable={true}
         >
           <Sticky
@@ -408,6 +408,7 @@ exports[`test render renders with filters 1`] = `
                   >
                     <TextFieldBase
                       ariaLabel="Directory filter text box"
+                      canRevealPassword={false}
                       className="directoryListFilterTextBox"
                       deferredValidationTime={200}
                       onChange={[Function]}
@@ -690,18 +691,18 @@ exports[`test render renders with filters 1`] = `
                       validateOnLoad={true}
                     >
                       <div
-                        className="ms-TextField directoryListFilterTextBox root-59"
+                        className="ms-TextField directoryListFilterTextBox root-46"
                       >
                         <div
                           className="ms-TextField-wrapper"
                         >
                           <div
-                            className="ms-TextField-fieldGroup fieldGroup-60"
+                            className="ms-TextField-fieldGroup fieldGroup-47"
                           >
                             <input
                               aria-invalid={false}
                               aria-label="Directory filter text box"
-                              className="ms-TextField-field field-61"
+                              className="ms-TextField-field field-48"
                               id="TextField0"
                               onBlur={[Function]}
                               onChange={[Function]}
@@ -1265,6 +1266,7 @@ exports[`test render renders with filters 1`] = `
                                   "borderColor": "#f3f2f1",
                                   "color": "#a19f9d",
                                   "cursor": "default",
+                                  "pointerEvents": "none",
                                   "selectors": Object {
                                     ":focus": Object {
                                       "outline": 0,
@@ -1609,35 +1611,6 @@ exports[`test render renders with filters 1`] = `
                                   },
                                 },
                               },
-                              "splitButtonMenuFocused": Object {
-                                "outline": "transparent",
-                                "position": "relative",
-                                "selectors": Object {
-                                  ".ms-Fabric--isFocusVisible &:focus:after": Object {
-                                    "border": "1px solid #ffffff",
-                                    "bottom": 3,
-                                    "content": "\\"\\"",
-                                    "left": 3,
-                                    "outline": "1px solid #605e5c",
-                                    "position": "absolute",
-                                    "right": 3,
-                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                        "border": "none",
-                                        "bottom": -2,
-                                        "left": -2,
-                                        "right": -2,
-                                        "top": -2,
-                                      },
-                                    },
-                                    "top": 3,
-                                    "zIndex": 1,
-                                  },
-                                  "::-moz-focus-inner": Object {
-                                    "border": "0",
-                                  },
-                                },
-                              },
                               "splitButtonMenuIcon": Object {
                                 "color": "#323130",
                               },
@@ -1927,7 +1900,7 @@ exports[`test render renders with filters 1`] = `
                         >
                           <button
                             aria-disabled={true}
-                            className="ms-Button ms-Button--default is-disabled directoryListButton root-70"
+                            className="ms-Button ms-Button--default is-disabled directoryListButton root-57"
                             data-is-focusable={false}
                             disabled={true}
                             onClick={[Function]}
@@ -1939,7 +1912,7 @@ exports[`test render renders with filters 1`] = `
                             type="button"
                           >
                             <span
-                              className="ms-Button-flexContainer flexContainer-71"
+                              className="ms-Button-flexContainer flexContainer-58"
                               data-automationid="splitbuttonprimary"
                             >
                               <div
@@ -1970,7 +1943,7 @@ exports[`test render renders with filters 1`] = `
           </List>
         </div>
         <div
-          className="stickyBelow-56"
+          className="stickyBelow-43"
           style={
             Object {
               "bottom": "0px",
@@ -1981,7 +1954,7 @@ exports[`test render renders with filters 1`] = `
           }
         >
           <div
-            className="stickyBelowItems-57"
+            className="stickyBelowItems-44"
           />
         </div>
       </div>

src/Explorer/Controls/DynamicList/DynamicListComponent.ts

@@ -56,7 +56,7 @@ export class DynamicListViewModel extends WaitsForTemplateViewModel {
   public ariaLabel: string;
   public buttonText: string;
   public newItem: ko.Observable<string>;
-  public override isTemplateReady: ko.Observable<boolean>;
+  public isTemplateReady: ko.Observable<boolean>;
   public listItems: ko.ObservableArray<DynamicListItem>;
 
   public constructor(options: DynamicListParams) {

src/Explorer/Controls/Editor/EditorComponent.ts

@@ -26,7 +26,7 @@ export interface EditorParams extends JsonEditorParams {
  */
 // TODO: Ideally, JsonEditorViewModel should extend EditorViewModel and not the other way around
 class EditorViewModel extends JsonEditorViewModel {
-  public override params: EditorParams;
+  public params: EditorParams;
   private static providerRegistered: string[] = [];
 
   public constructor(params: EditorParams) {
@@ -44,11 +44,11 @@ class EditorViewModel extends JsonEditorViewModel {
       });
   }
 
-  protected override getEditorLanguage(): string {
+  protected getEditorLanguage(): string {
     return this.params.contentType;
   }
 
-  protected override async registerCompletionItemProvider() {
+  protected async registerCompletionItemProvider() {
     if (EditorViewModel.providerRegistered.indexOf("sql") < 0) {
       const { SqlCompletionItemProvider } = await import("@azure/cosmos-language-service");
       const monaco = await loadMonaco();
@@ -57,7 +57,7 @@ class EditorViewModel extends JsonEditorViewModel {
     }
   }
 
-  protected override async getErrorMarkers(input: string): Promise<monaco.editor.IMarkerData[]> {
+  protected async getErrorMarkers(input: string): Promise<monaco.editor.IMarkerData[]> {
     const { ErrorMarkProvider } = await import("@azure/cosmos-language-service");
     return ErrorMarkProvider.getErrorMark(input);
   }

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -21,20 +21,20 @@ export class EditorReact extends React.Component<EditorReactProps> {
     super(props);
   }
 
-  public override componentDidMount(): void {
+  public componentDidMount(): void {
     this.createEditor(this.configureEditor.bind(this));
   }
 
-  public override shouldComponentUpdate(): boolean {
+  public shouldComponentUpdate(): boolean {
     // Prevents component re-rendering
     return false;
   }
 
-  public override componentWillUnmount(): void {
+  public componentWillUnmount(): void {
     this.selectionListener && this.selectionListener.dispose();
   }
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return <div className="jsonEditor" ref={(elt: HTMLElement) => this.setRef(elt)} />;
   }
 

src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx

@@ -1,14 +1,9 @@
-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 = () => {

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 "@fluentui/react";
+import { getTheme, mergeStyleSets, FontWeights, Modal, IconButton, IIconProps } from "office-ui-fabric-react";
 import "./FeaturePanelLauncher.less";
 
 // Modal wrapper

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

@@ -57,7 +57,7 @@ exports[`Feature panel renders all flags 1`] = `
         }
       }
     >
-      <Dropdown
+      <StyledWithResponsiveMode
         label="Base Url"
         onChange={[Function]}
         options={
@@ -85,7 +85,7 @@ exports[`Feature panel renders all flags 1`] = `
           }
         }
       />
-      <Dropdown
+      <StyledWithResponsiveMode
         label="Platform"
         onChange={[Function]}
         options={

src/Explorer/Controls/GitHub/AddRepoComponent.tsx

@@ -1,4 +1,4 @@
-import { DefaultButton, IButtonProps, ITextFieldProps, TextField } from "@fluentui/react";
+import { DefaultButton, IButtonProps, ITextFieldProps, TextField } from "office-ui-fabric-react";
 import * as React from "react";
 import * as Constants from "../../../Common/Constants";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
@@ -38,7 +38,7 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
     };
   }
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     const textFieldProps: ITextFieldProps = {
       placeholder: AddRepoComponent.TextFieldPlaceholder,
       autoFocus: true,

src/Explorer/Controls/GitHub/AuthorizeAccessComponent.tsx

@@ -1,4 +1,10 @@
-import { ChoiceGroup, IButtonProps, IChoiceGroupProps, PrimaryButton, IChoiceGroupOption } from "@fluentui/react";
+import {
+  ChoiceGroup,
+  IButtonProps,
+  IChoiceGroupProps,
+  PrimaryButton,
+  IChoiceGroupOption,
+} from "office-ui-fabric-react";
 import * as React from "react";
 import { ChildrenMargin } from "./GitHubStyleConstants";
 
@@ -49,7 +55,7 @@ export class AuthorizeAccessComponent extends React.Component<
     };
   }
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     const choiceGroupProps: IChoiceGroupProps = {
       options: [
         {

src/Explorer/Controls/GitHub/GitHubReposComponent.tsx

@@ -1,4 +1,4 @@
-import { DefaultButton, IButtonProps, Link, PrimaryButton } from "@fluentui/react";
+import { DefaultButton, IButtonProps, Link, PrimaryButton } from "office-ui-fabric-react";
 import * as React from "react";
 import { IGitHubBranch, IGitHubRepo } from "../../../GitHub/GitHubClient";
 import { AddRepoComponent, AddRepoComponentProps } from "./AddRepoComponent";
@@ -23,13 +23,23 @@ export interface RepoListItem {
 }
 
 export class GitHubReposComponent extends React.Component<GitHubReposComponentProps> {
+  public static readonly ConnectToGitHubTitle = "Connect to GitHub";
+  public static readonly ManageGitHubRepoTitle = "Manage GitHub settings";
   private static readonly ManageGitHubRepoDescription =
     "Select your GitHub repos and branch(es) to pin to your notebooks workspace.";
   private static readonly ManageGitHubRepoResetConnection = "View or change your GitHub authorization settings.";
   private static readonly OKButtonText = "OK";
   private static readonly CancelButtonText = "Cancel";
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
+    const header: JSX.Element = (
+      <p>
+        {this.props.showAuthorizeAccess
+          ? GitHubReposComponent.ConnectToGitHubTitle
+          : GitHubReposComponent.ManageGitHubRepoTitle}
+      </p>
+    );
+
     const content: JSX.Element = this.props.showAuthorizeAccess ? (
       <AuthorizeAccessComponent {...this.props.authorizeAccessProps} />
     ) : (
@@ -56,6 +66,9 @@ export class GitHubReposComponent extends React.Component<GitHubReposComponentPr
 
     return (
       <>
+        <div className={"firstdivbg headerline"} role="heading" aria-level={2}>
+          {header}
+        </div>
         <div className={"paneMainContent"}>{content}</div>
         {!this.props.showAuthorizeAccess && (
           <>

src/Explorer/Controls/GitHub/GitHubStyleConstants.ts

@@ -1,21 +1,19 @@
 import {
+  IStyleFunctionOrObject,
   ICheckboxStyleProps,
   ICheckboxStyles,
-  IDropdownStyleProps,
   IDropdownStyles,
-  IStyleFunctionOrObject,
-} from "@fluentui/react";
+  IDropdownStyleProps,
+} from "office-ui-fabric-react";
 
 export const ButtonsFooterStyle: React.CSSProperties = {
-  paddingTop: 14,
+  padding: 14,
   height: "auto",
-  borderTop: "2px solid lightGray",
 };
 
 export const ContentFooterStyle: React.CSSProperties = {
-  paddingTop: "10px",
+  padding: "10px 24px 10px 24px",
   height: "auto",
-  borderTop: "2px solid lightGray",
 };
 
 export const ChildrenMargin = 10;
@@ -55,11 +53,6 @@ export const BranchesDropdownOptionContainerStyle: React.CSSProperties = {
   padding: 8,
 };
 
-export const ContentMainStyle: React.CSSProperties = {
-  display: "flex",
-  flexDirection: "column",
-};
-
 export const ReposListRepoColumnMinWidth = 192;
 export const ReposListBranchesColumnWidth = 116;
 export const BranchesDropdownWidth = 200;

src/Explorer/Controls/GitHub/ReposListComponent.tsx

@@ -16,7 +16,7 @@ import {
   ResponsiveMode,
   SelectionMode,
   Text,
-} from "@fluentui/react";
+} from "office-ui-fabric-react";
 import * as React from "react";
 import { IGitHubBranch, IGitHubPageInfo } from "../../../GitHub/GitHubClient";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
@@ -67,7 +67,7 @@ export class ReposListComponent extends React.Component<ReposListComponentProps>
   private static readonly DefaultBranchName = "master";
   private static readonly FooterIndex = -1;
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     const pinnedReposListProps: IDetailsListProps = {
       styles: {
         contentWrapper: {

src/Explorer/Controls/Header/GalleryHeaderComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Stack, Text, Separator, FontIcon, CommandButton, FontWeights, ITextProps } from "@fluentui/react";
+import { Stack, Text, Separator, FontIcon, CommandButton, FontWeights, ITextProps } from "office-ui-fabric-react";
 
 export class GalleryHeaderComponent extends React.Component {
   private static readonly azureText = "Microsoft Azure";
@@ -30,7 +30,7 @@ export class GalleryHeaderComponent extends React.Component {
     );
   };
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return (
       <Stack
         tokens={{ childrenGap: 10 }}

src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx

@@ -113,7 +113,7 @@ export class InputTypeaheadComponent extends React.Component<
    * @param prevState
    * @param snapshot
    */
-  public override componentDidUpdate(
+  public componentDidUpdate(
     prevProps: InputTypeaheadComponentProps,
     prevState: InputTypeaheadComponentState,
     snapshot: any
@@ -127,11 +127,11 @@ export class InputTypeaheadComponent extends React.Component<
   /**
    * Executed once react is done building the DOM for this component
    */
-  public override componentDidMount(): void {
+  public componentDidMount(): void {
     this.initializeTypeahead();
   }
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return (
       <span className="input-typeahead-container">
         <div

src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx

@@ -13,6 +13,7 @@ const createTestDatabaseAccount = (): DataModels.DatabaseAccount => {
       gremlinEndpoint: null,
       tableEndpoint: null,
     },
+    tags: "testTags",
     type: "testType",
   };
 };
@@ -29,6 +30,7 @@ const createTestMongo32DatabaseAccount = (): DataModels.DatabaseAccount => {
       gremlinEndpoint: null,
       tableEndpoint: null,
     },
+    tags: "testTags",
     type: "testType",
   };
 };
@@ -46,6 +48,7 @@ const createTestMongo36DatabaseAccount = (): DataModels.DatabaseAccount => {
       tableEndpoint: null,
       mongoEndpoint: "https://testMongoEndpoint.azure.com/",
     },
+    tags: "testTags",
     type: "testType",
   };
 };
@@ -62,6 +65,7 @@ const createTestCassandraDatabaseAccount = (): DataModels.DatabaseAccount => {
       gremlinEndpoint: null,
       tableEndpoint: null,
     },
+    tags: "testTags",
     type: "testType",
   };
 };

src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx

@@ -19,7 +19,7 @@ export class NotebookTerminalComponent extends React.Component<NotebookTerminalC
     super(props);
   }
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return (
       <div className="notebookTerminalContainer">
         <iframe

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

@@ -1,3 +1,4 @@
+import { Card } from "@uifabric/react-cards";
 import {
   BaseButton,
   Button,
@@ -7,14 +8,14 @@ import {
   Image,
   ImageFit,
   Link,
+  LinkBase,
   Persona,
   Separator,
   Spinner,
   SpinnerSize,
   Text,
   TooltipHost,
-} from "@fluentui/react";
-import { Card } from "@uifabric/react-cards";
+} from "office-ui-fabric-react";
 import React, { FunctionComponent, useState } from "react";
 import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
@@ -109,7 +110,7 @@ export const GalleryCardComponent: FunctionComponent<GalleryCardComponentProps>
 
   const handlerOnClick = (
     event:
-      | React.MouseEvent<HTMLElement | HTMLAnchorElement | HTMLButtonElement | MouseEvent>
+      | React.MouseEvent<HTMLElement | HTMLAnchorElement | HTMLButtonElement | LinkBase, MouseEvent>
       | React.MouseEvent<
           HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button | HTMLSpanElement,
           MouseEvent

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

@@ -31,7 +31,7 @@ exports[`GalleryCardComponent renders 1`] = `
     />
   </CardItem>
   <CardItem>
-    <Image
+    <StyledImageBase
       alt="name cover image"
       height={144}
       imageFit={2}

src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx

@@ -1,123 +0,0 @@
-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>
-    );
-  }
-}

src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.test.tsx

@@ -9,7 +9,7 @@ describe("CodeOfConductComponent", () => {
   let codeOfConductProps: CodeOfConductComponentProps;
 
   beforeEach(() => {
-    const junoClient = new JunoClient();
+    const junoClient = new JunoClient(undefined);
     junoClient.acceptCodeOfConduct = jest.fn().mockReturnValue({
       status: HttpStatusCodes.OK,
       data: true,

src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, Link, PrimaryButton, Stack, Text } from "@fluentui/react";
+import { Checkbox, Link, PrimaryButton, Stack, Text } from "office-ui-fabric-react";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import { CodeOfConductEndpoints, HttpStatusCodes } from "../../../../Common/Constants";
 import { getErrorMessage, getErrorStack, handleError } from "../../../../Common/ErrorHandlingUtils";

src/Explorer/Controls/NotebookGallery/GalleryAndNotebookViewerComponent.tsx

@@ -42,7 +42,7 @@ export class GalleryAndNotebookViewerComponent extends React.Component<
     };
   }
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     if (this.state.notebookUrl) {
       const props: NotebookViewerComponentProps = {
         container: this.props.container,

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -19,7 +19,7 @@ import {
   SpinnerSize,
   Stack,
   Text,
-} from "@fluentui/react";
+} from "office-ui-fabric-react";
 import * as React from "react";
 import { HttpStatusCodes } from "../../../Common/Constants";
 import { handleError } from "../../../Common/ErrorHandlingUtils";
@@ -149,7 +149,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     this.loadFavoriteNotebooks(this.state.searchText, this.state.sortBy, false); // Need this to show correct favorite button state
   }
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     this.traceViewGallery();
 
     const tabs: GalleryTabInfo[] = [

src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Icon, Label, Stack, HoverCard, HoverCardType, Link } from "@fluentui/react";
+import { Icon, Label, Stack, HoverCard, HoverCardType, Link } from "office-ui-fabric-react";
 import { CodeOfConductEndpoints } from "../../../../Common/Constants";
 import "./InfoComponent.less";
 
@@ -38,7 +38,7 @@ export class InfoComponent extends React.Component<InfoComponentProps> {
     );
   };
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return (
       <HoverCard plainCardProps={{ onRenderPlainCard: this.onHover }} instantOpenOnClick type={HoverCardType.plain}>
         <div className="infoPanelMain">

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

@@ -4,7 +4,7 @@ exports[`GalleryViewerComponent renders 1`] = `
 <div
   className="galleryContainer"
 >
-  <StyledPivot
+  <StyledPivotBase
     onLinkClick={[Function]}
     selectedKey="OfficialSamples"
   >
@@ -41,7 +41,7 @@ exports[`GalleryViewerComponent renders 1`] = `
             <StackItem
               grow={true}
             >
-              <StyledSearchBox
+              <StyledSearchBoxBase
                 onChange={[Function]}
                 placeholder="Search"
               />
@@ -60,7 +60,7 @@ exports[`GalleryViewerComponent renders 1`] = `
                 }
               }
             >
-              <Dropdown
+              <StyledWithResponsiveMode
                 onChange={[Function]}
                 options={
                   Array [
@@ -127,7 +127,7 @@ exports[`GalleryViewerComponent renders 1`] = `
           <StackItem
             grow={true}
           >
-            <StyledSearchBox
+            <StyledSearchBoxBase
               onChange={[Function]}
               placeholder="Search"
             />
@@ -146,7 +146,7 @@ exports[`GalleryViewerComponent renders 1`] = `
               }
             }
           >
-            <Dropdown
+            <StyledWithResponsiveMode
               onChange={[Function]}
               options={
                 Array [
@@ -182,6 +182,6 @@ exports[`GalleryViewerComponent renders 1`] = `
         </StackItem>
       </Stack>
     </PivotItem>
-  </StyledPivot>
+  </StyledPivotBase>
 </div>
 `;

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx

@@ -1,7 +1,17 @@
 /**
  * Wrapper around Notebook metadata
  */
-import { FontWeights, Icon, IconButton, Link, Persona, PersonaSize, PrimaryButton, Stack, Text } from "@fluentui/react";
+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";
@@ -41,7 +51,7 @@ export class NotebookMetadataComponent extends React.Component<NotebookMetadataC
     );
   };
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     const options: Intl.DateTimeFormatOptions = {
       year: "numeric",
       month: "short",

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 "@fluentui/react";
+import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "office-ui-fabric-react";
 import * as React from "react";
 import { contents } from "rx-jupyter";
 import { IGalleryItem, JunoClient } from "../../../Juno/JunoClient";
@@ -132,7 +132,7 @@ export class NotebookViewerComponent
     }
   }
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return (
       <div className="notebookViewerContainer">
         {this.props.backNavigationText !== undefined ? (

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -1,24 +1,22 @@
+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,
-  TextField,
-} from "@fluentui/react";
+} from "office-ui-fabric-react/lib/utilities/selection/index";
 import * as React from "react";
 import * as _ from "underscore";
 import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";
@@ -62,7 +60,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
     this.selection.setItems(this.state.filteredResults);
   }
 
-  public override componentDidUpdate(prevProps: QueriesGridComponentProps, prevState: QueriesGridComponentState): void {
+  public componentDidUpdate(prevProps: QueriesGridComponentProps, prevState: QueriesGridComponentState): void {
     this.selection.setItems(
       this.state.filteredResults,
       !_.isEqual(prevState.filteredResults, this.state.filteredResults)
@@ -79,11 +77,11 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
   }
 
   // fetched saved queries when panel open
-  public override componentDidMount() {
+  public componentDidMount() {
     this.fetchSavedQueries();
   }
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     if (this.state.queries.length === 0) {
       return this.renderBannerComponent();
     }

src/Explorer/Controls/RadioSwitchComponent/RadioSwitchComponent.tsx

@@ -2,10 +2,10 @@
  * Horizontal switch component
  */
 
-import { Icon } from "@fluentui/react";
 import * as React from "react";
-import { NormalizedEventKey } from "../../../Common/Constants";
 import "./RadioSwitchComponent.less";
+import { Icon } from "office-ui-fabric-react/lib/Icon";
+import { NormalizedEventKey } from "../../../Common/Constants";
 
 export interface Choice {
   key: string;
@@ -20,7 +20,7 @@ export interface RadioSwitchComponentProps {
 }
 
 export class RadioSwitchComponent extends React.Component<RadioSwitchComponentProps> {
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return (
       <div className="radioSwitchComponent">
         {this.props.choices.map((choice: Choice) => (

src/Explorer/Controls/ResizeSensorReactComponent/ResizeSensorComponent.tsx

@@ -17,7 +17,7 @@ export abstract class ResizeSensorComponent<P, S> extends React.Component<P, S>
   protected abstract onDimensionsChanged(width: number, height: number): void;
   protected abstract getSensorTarget(): HTMLElement;
 
-  public override componentDidUpdate(): void {
+  public componentDidUpdate(): void {
     if (this.isSensing) {
       return;
     }
@@ -37,7 +37,7 @@ export abstract class ResizeSensorComponent<P, S> extends React.Component<P, S>
     }
   }
 
-  public override componentWillUnmount(): void {
+  public componentWillUnmount(): void {
     if (!!this.resizeSensor) {
       this.resizeSensor.detach();
     }

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

@@ -154,20 +154,19 @@ describe("SettingsComponent", () => {
     expect(settingsComponentInstance.hasConflictResolution()).toEqual(undefined);
 
     const newContainer = new Explorer();
-    updateUserContext({
-      databaseAccount: {
-        id: undefined,
-        name: undefined,
-        location: undefined,
-        type: undefined,
-        kind: undefined,
-        properties: {
-          documentEndpoint: undefined,
-          tableEndpoint: undefined,
-          gremlinEndpoint: undefined,
-          cassandraEndpoint: undefined,
-          enableMultipleWriteLocations: true,
-        },
+    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,
       },
     });
     const newCollection = { ...collection };

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1,4 +1,4 @@
-import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
+import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "office-ui-fabric-react";
 import * as React from "react";
 import DiscardIcon from "../../../../images/discard.svg";
 import SaveIcon from "../../../../images/save-cosmos.svg";
@@ -213,7 +213,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     };
   }
 
-public override componentDidMount(): void {
+  componentDidMount(): void {
     if (this.isCollectionSettingsTab) {
       this.refreshIndexTransformationProgress();
       this.loadMongoIndexes();
@@ -226,14 +226,18 @@ public override componentDidMount(): void {
     }
   }
 
-public override componentDidUpdate(): void {
+  componentDidUpdate(): void {
     if (this.props.settingsTab.isActive()) {
       this.props.settingsTab.getContainer().onUpdateTabsButtons(this.getTabsButtons());
     }
   }
 
   public loadMongoIndexes = async (): Promise<void> => {
-    if (userContext.apiType === "Mongo" && userContext?.databaseAccount) {
+    if (
+      userContext.apiType === "Mongo" &&
+      this.container.isEnableMongoCapabilityPresent() &&
+      this.container.databaseAccount()
+    ) {
       this.mongoDBCollectionResource = await readMongoDBCollectionThroughRP(
         this.collection.databaseId,
         this.collection.id()
@@ -296,7 +300,8 @@ public override componentDidUpdate(): void {
     this.container && userContext.apiType === "Cassandra" && hasDatabaseSharedThroughput(this.collection);
 
   public hasConflictResolution = (): boolean =>
-    userContext?.databaseAccount?.properties?.enableMultipleWriteLocations &&
+    this.container?.databaseAccount &&
+    this.container.databaseAccount()?.properties?.enableMultipleWriteLocations &&
     this.collection.conflictResolutionPolicy &&
     !!this.collection.conflictResolutionPolicy();
 
@@ -871,7 +876,7 @@ public override componentDidUpdate(): void {
     mongoIndexingPolicyComponentProps: MongoIndexingPolicyComponentProps
   ): JSX.Element => {
     if (userContext.authType === AuthType.AAD) {
-      if (userContext.apiType === "Mongo") {
+      if (this.container.isEnableMongoCapabilityPresent()) {
         return <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />;
       }
       return undefined;
@@ -879,7 +884,7 @@ public override componentDidUpdate(): void {
     return mongoIndexingPolicyAADError;
   };
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     const scaleComponentProps: ScaleComponentProps = {
       collection: this.collection,
       database: this.database,

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

@@ -1,6 +1,6 @@
 import { shallow } from "enzyme";
 import React from "react";
-import { IColumn, Text } from "@fluentui/react";
+import { IColumn, Text } from "office-ui-fabric-react";
 import {
   getAutoPilotV3SpendElement,
   getEstimatedSpendingElement,
@@ -26,7 +26,7 @@ import {
 } from "./SettingsRenderUtils";
 
 class SettingsRenderUtilsTestComponent extends React.Component {
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     const estimatedSpendingColumns: IColumn[] = [
       { key: "costType", name: "", fieldName: "costType", minWidth: 100, maxWidth: 200, isResizable: true },
       { key: "hourly", name: "Hourly", fieldName: "hourly", minWidth: 100, maxWidth: 200, isResizable: true },

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -38,7 +38,7 @@ import {
   IDetailsRowProps,
   DetailsRow,
   IDetailsColumnStyles,
-} from "@fluentui/react";
+} from "office-ui-fabric-react";
 import { isDirtyTypes, isDirty } from "./SettingsUtils";
 
 export interface EstimatedSpendingDisplayProps {

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

@@ -9,7 +9,7 @@ import {
   subComponentStackProps,
   getChoiceGroupStyles,
 } from "../SettingsRenderUtils";
-import { TextField, ITextFieldProps, Stack, IChoiceGroupOption, ChoiceGroup } from "@fluentui/react";
+import { TextField, ITextFieldProps, Stack, IChoiceGroupOption, ChoiceGroup } from "office-ui-fabric-react";
 import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
 import { isDirty } from "../SettingsUtils";
 
@@ -40,11 +40,11 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut
     { key: DataModels.ConflictResolutionMode.Custom, text: "Merge Procedure (custom)" },
   ];
 
-public override componentDidMount(): void {
+  componentDidMount(): void {
     this.onComponentUpdate();
   }
 
-public override componentDidUpdate(): void {
+  componentDidUpdate(): void {
     this.onComponentUpdate();
   }
 
@@ -135,7 +135,7 @@ public override componentDidUpdate(): void {
     />
   );
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return (
       <Stack {...subComponentStackProps}>
         {this.getConflictResolutionModeComponent()}

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

@@ -1,8 +1,7 @@
-import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
-import * as monaco from "monaco-editor";
+import { MessageBar, MessageBarType, Stack } from "office-ui-fabric-react";
 import * as React from "react";
 import * as DataModels from "../../../../Contracts/DataModels";
-import { loadMonaco } from "../../../LazyMonaco";
+import { loadMonaco, monaco } from "../../../LazyMonaco";
 import { indexingPolicynUnsavedWarningMessage, titleAndInputStackProps } from "../SettingsRenderUtils";
 import { isDirty, isIndexTransforming } from "../SettingsUtils";
 import { IndexingPolicyRefreshComponent } from "./IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
@@ -38,7 +37,7 @@ export class IndexingPolicyComponent extends React.Component<
     };
   }
 
-public override componentDidUpdate(): void {
+  componentDidUpdate(): void {
     if (this.props.shouldDiscardIndexingPolicy) {
       this.resetIndexingPolicyEditor();
       this.props.resetShouldDiscardIndexingPolicy();
@@ -46,7 +45,7 @@ public override componentDidUpdate(): void {
     this.onComponentUpdate();
   }
 
-public override componentDidMount(): void {
+  componentDidMount(): void {
     this.resetIndexingPolicyEditor();
     this.onComponentUpdate();
   }
@@ -112,7 +111,7 @@ public override componentDidMount(): void {
     }
   };
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return (
       <Stack {...titleAndInputStackProps}>
         <IndexingPolicyRefreshComponent

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/IndexingPolicyRefreshComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { MessageBar, MessageBarType } from "@fluentui/react";
+import { MessageBar, MessageBarType } from "office-ui-fabric-react";
 import {
   mongoIndexTransformationRefreshingMessage,
   renderMongoIndexTransformationRefreshMessage,
@@ -52,7 +52,7 @@ export class IndexingPolicyRefreshComponent extends React.Component<
     }
   };
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return this.renderIndexTransformationWarning() ? (
       <MessageBar messageBarType={MessageBarType.warning}>{this.renderIndexTransformationWarning()}</MessageBar>
     ) : (

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`] = `
-<StyledMessageBar
+<StyledMessageBarBase
   messageBarType={5}
 >
   <Text
@@ -20,5 +20,5 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = `
       Refresh to check the progress.
     </StyledLinkBase>
   </Text>
-</StyledMessageBar>
+</StyledMessageBarBase>
 `;

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/AddMongoIndexComponent.tsx

@@ -8,7 +8,7 @@ import {
   Dropdown,
   IDropdownOption,
   ITextField,
-} from "@fluentui/react";
+} from "office-ui-fabric-react";
 import {
   addMongoIndexSubElementsTokens,
   mongoErrorMessageStyles,
@@ -61,7 +61,7 @@ export class AddMongoIndexComponent extends React.Component<AddMongoIndexCompone
     this.descriptionTextField.focus();
   };
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return (
       <Stack {...mongoWarningStackProps}>
         <Stack horizontal tokens={addMongoIndexSubElementsTokens}>

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx

@@ -12,7 +12,7 @@ import {
   Spinner,
   SpinnerSize,
   Separator,
-} from "@fluentui/react";
+} from "office-ui-fabric-react";
 import {
   addMongoIndexStackProps,
   customDetailsListStyles,
@@ -89,14 +89,14 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
     },
   ];
 
-public override componentDidUpdate(prevProps: MongoIndexingPolicyComponentProps): void {
+  componentDidUpdate(prevProps: MongoIndexingPolicyComponentProps): void {
     if (this.props.indexesToAdd.length > prevProps.indexesToAdd.length) {
       this.addMongoIndexComponentRefs[prevProps.indexesToAdd.length]?.current?.focus();
     }
     this.onComponentUpdate();
   }
 
-public override componentDidMount(): void {
+  componentDidMount(): void {
     this.onComponentUpdate();
   }
 
@@ -311,7 +311,7 @@ public override componentDidMount(): void {
     );
   };
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     if (this.props.mongoIndexes) {
       if (this.hasCompoundIndex()) {
         return mongoCompoundIndexNotSupportedMessage;

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap

@@ -30,7 +30,7 @@ exports[`AddMongoIndexComponent renders 1`] = `
       }
       value="sample_key"
     />
-    <Dropdown
+    <StyledWithResponsiveMode
       ariaLabel="Index Type 1"
       onChange={[Function]}
       options={
@@ -67,7 +67,7 @@ exports[`AddMongoIndexComponent renders 1`] = `
       onClick={[Function]}
     />
   </Stack>
-  <StyledMessageBar
+  <StyledMessageBarBase
     messageBarType={1}
     styles={
       Object {
@@ -78,6 +78,6 @@ exports[`AddMongoIndexComponent renders 1`] = `
     }
   >
     sample error
-  </StyledMessageBar>
+  </StyledMessageBarBase>
 </Stack>
 `;

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

@@ -1,15 +1,14 @@
 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 * as SharedConstants from "../../../../Shared/Constants";
-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";
+import * as SharedConstants from "../../../../Shared/Constants";
+import ko from "knockout";
 
 describe("ScaleComponent", () => {
   const nonNationalCloudContainer = new Explorer();
@@ -81,25 +80,25 @@ describe("ScaleComponent", () => {
 
   it("autoScale enabled", () => {
     const newContainer = new Explorer();
-    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,
-            },
-          ],
-        },
+
+    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,
+          },
+        ],
       },
     });
     const props = { ...baseProps, container: newContainer };

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

@@ -1,4 +1,4 @@
-import { Label, Link, MessageBar, MessageBarType, Stack, Text, TextField } from "@fluentui/react";
+import { Label, Link, MessageBar, MessageBarType, Stack, Text, TextField } from "office-ui-fabric-react";
 import * as React from "react";
 import * as Constants from "../../../../Common/Constants";
 import { configContext, Platform } from "../../../../ConfigContext";
@@ -54,7 +54,8 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   }
 
   public isAutoScaleEnabled = (): boolean => {
-    const accountCapabilities: DataModels.Capability[] = userContext?.databaseAccount?.properties?.capabilities;
+    const accountCapabilities: DataModels.Capability[] = this.props.container?.databaseAccount()?.properties
+      ?.capabilities;
     const enableAutoScaleCapability =
       accountCapabilities &&
       accountCapabilities.find((capability: DataModels.Capability) => {
@@ -169,7 +170,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
 
   private getThroughputInputComponent = (): JSX.Element => (
     <ThroughputInputAutoPilotV3Component
-      databaseAccount={userContext?.databaseAccount}
+      databaseAccount={this.props.container.databaseAccount()}
       databaseName={this.databaseId}
       collectionName={this.collectionId}
       throughput={this.props.throughput}
@@ -198,7 +199,8 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   );
 
   private isFreeTierAccount(): boolean {
-    return userContext?.databaseAccount?.properties?.enableFreeTier;
+    const databaseAccount = this.props.container?.databaseAccount();
+    return databaseAccount?.properties?.enableFreeTier;
   }
 
   private getFreeTierInfoMessage(): JSX.Element {
@@ -216,7 +218,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
     );
   }
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return (
       <Stack {...subComponentStackProps}>
         {this.isFreeTierAccount() && (

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

@@ -1,4 +1,13 @@
-import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField } from "@fluentui/react";
+import {
+  ChoiceGroup,
+  IChoiceGroupOption,
+  Label,
+  Link,
+  MessageBar,
+  Stack,
+  Text,
+  TextField,
+} from "office-ui-fabric-react";
 import * as React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
 import { userContext } from "../../../../UserContext";
@@ -72,11 +81,11 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
     this.partitionKeyName = userContext.apiType === "Mongo" ? "Shard key" : "Partition key";
   }
 
-public override componentDidMount(): void {
+  componentDidMount(): void {
     this.onComponentUpdate();
   }
 
-public override componentDidUpdate(): void {
+  componentDidUpdate(): void {
     this.onComponentUpdate();
   }
 
@@ -323,7 +332,7 @@ public override componentDidUpdate(): void {
 
   public isLargePartitionKeyEnabled = (): boolean => this.props.collection.partitionKey?.version >= 2;
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return (
       <Stack {...subComponentStackProps}>
         {userContext.apiType !== "Cassandra" && this.getTtlComponent()}

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

@@ -10,7 +10,7 @@ import {
   Stack,
   Text,
   TextField,
-} from "@fluentui/react";
+} from "office-ui-fabric-react";
 import React from "react";
 import * as DataModels from "../../../../../Contracts/DataModels";
 import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
@@ -96,11 +96,11 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     { key: "false", text: "Manual" },
   ];
 
-public override componentDidMount(): void {
+  componentDidMount(): void {
     this.onComponentUpdate();
   }
 
-public override componentDidUpdate(): void {
+  componentDidUpdate(): void {
     this.onComponentUpdate();
   }
 
@@ -627,7 +627,7 @@ public override componentDidUpdate(): void {
     );
   };
 
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return (
       <Stack {...checkBoxAndInputStackProps}>
         {this.renderWarningMessage()}

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

@@ -8,7 +8,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
     }
   }
 >
-  <StyledMessageBar
+  <StyledMessageBarBase
     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>
-  </StyledMessageBar>
+  </StyledMessageBarBase>
   <Stack>
     <StyledLabelBase
       id="settingsV2RadioButtonLabelId"
@@ -49,7 +49,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
         }
       />
     </StyledLabelBase>
-    <StyledMessageBar
+    <StyledMessageBarBase
       messageBarIconProps={
         Object {
           "className": "messageBarInfoIcon",
@@ -86,8 +86,8 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
           Learn more
         </a>
       </Text>
-    </StyledMessageBar>
-    <StyledChoiceGroup
+    </StyledMessageBarBase>
+    <StyledChoiceGroupBase
       ariaLabelledBy="settingsV2RadioButtonLabelId"
       onChange={[Function]}
       options={
@@ -196,7 +196,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
         }
       />
     </StyledLabelBase>
-    <StyledChoiceGroup
+    <StyledChoiceGroupBase
       ariaLabelledBy="settingsV2RadioButtonLabelId"
       onChange={[Function]}
       options={
@@ -470,7 +470,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
         }
       />
     </StyledLabelBase>
-    <StyledChoiceGroup
+    <StyledChoiceGroupBase
       ariaLabelledBy="settingsV2RadioButtonLabelId"
       onChange={[Function]}
       options={

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Stack, Text, IIconStyles, Icon, TooltipHost, DirectionalHint } from "@fluentui/react";
+import { Stack, Text, IIconStyles, Icon, TooltipHost, DirectionalHint } from "office-ui-fabric-react";
 import { toolTipLabelStackTokens } from "../SettingsRenderUtils";
 
 export interface ToolTipLabelComponentProps {
@@ -10,7 +10,7 @@ export interface ToolTipLabelComponentProps {
 const iconButtonStyles: Partial<IIconStyles> = { root: { marginBottom: -3 } };
 
 export class ToolTipLabelComponent extends React.Component<ToolTipLabelComponentProps> {
-  public override render(): JSX.Element {
+  public render(): JSX.Element {
     return (
       <>
         <Stack horizontal verticalAlign="center" tokens={toolTipLabelStackTokens}>

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

@@ -8,7 +8,7 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
     }
   }
 >
-  <StyledChoiceGroup
+  <StyledChoiceGroupBase
     label="Mode"
     onChange={[Function]}
     options={
@@ -80,7 +80,7 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
     }
   }
 >
-  <StyledChoiceGroup
+  <StyledChoiceGroupBase
     label="Mode"
     onChange={[Function]}
     options={

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

@@ -8,7 +8,7 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
     }
   }
 >
-  <StyledMessageBar
+  <StyledMessageBarBase
     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>
-  </StyledMessageBar>
+  </StyledMessageBarBase>
   <Stack
     tokens={
       Object {

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

@@ -15,7 +15,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
       }
     }
   >
-    <StyledChoiceGroup
+    <StyledChoiceGroupBase
       id="timeToLive"
       label="Time to Live"
       onChange={[Function]}
@@ -85,7 +85,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
       value="1000"
     />
   </Stack>
-  <StyledChoiceGroup
+  <StyledChoiceGroupBase
     id="geoSpatialConfig"
     label="Geospatial Configuration"
     onChange={[Function]}
@@ -146,7 +146,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
         }
       />
     </StyledLabelBase>
-    <StyledChoiceGroup
+    <StyledChoiceGroupBase
       aria-labelledby="settingsV2ChangeFeedLabelId"
       id="changeFeedPolicy"
       onChange={[Function]}
@@ -238,7 +238,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
       }
     }
   >
-    <StyledChoiceGroup
+    <StyledChoiceGroupBase
       id="timeToLive"
       label="Time to Live"
       onChange={[Function]}
@@ -308,7 +308,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
       value="1000"
     />
   </Stack>
-  <StyledChoiceGroup
+  <StyledChoiceGroupBase
     id="geoSpatialConfig"
     label="Geospatial Configuration"
     onChange={[Function]}
@@ -355,7 +355,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
       }
     }
   >
-    <StyledChoiceGroup
+    <StyledChoiceGroupBase
       id="analyticalStorageTimeToLive"
       label="Analytical Storage Time to Live"
       onChange={[Function]}
@@ -422,7 +422,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
         }
       />
     </StyledLabelBase>
-    <StyledChoiceGroup
+    <StyledChoiceGroupBase
       aria-labelledby="settingsV2ChangeFeedLabelId"
       id="changeFeedPolicy"
       onChange={[Function]}
@@ -514,7 +514,7 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
       }
     }
   >
-    <StyledChoiceGroup
+    <StyledChoiceGroupBase
       id="timeToLive"
       label="Time to Live"
       onChange={[Function]}
@@ -584,7 +584,7 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
       value="1000"
     />
   </Stack>
-  <StyledChoiceGroup
+  <StyledChoiceGroupBase
     id="geoSpatialConfig"
     label="Geospatial Configuration"
     onChange={[Function]}
@@ -631,7 +631,7 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
       }
     }
   >
-    <StyledChoiceGroup
+    <StyledChoiceGroupBase
       id="analyticalStorageTimeToLive"
       label="Analytical Storage Time to Live"
       onChange={[Function]}
@@ -753,7 +753,7 @@ exports[`SubSettingsComponent renders 1`] = `
       }
     }
   >
-    <StyledChoiceGroup
+    <StyledChoiceGroupBase
       id="timeToLive"
       label="Time to Live"
       onChange={[Function]}
@@ -823,7 +823,7 @@ exports[`SubSettingsComponent renders 1`] = `
       value="1000"
     />
   </Stack>
-  <StyledChoiceGroup
+  <StyledChoiceGroupBase
     id="geoSpatialConfig"
     label="Geospatial Configuration"
     onChange={[Function]}
@@ -870,7 +870,7 @@ exports[`SubSettingsComponent renders 1`] = `
       }
     }
   >
-    <StyledChoiceGroup
+    <StyledChoiceGroupBase
       id="analyticalStorageTimeToLive"
       label="Analytical Storage Time to Live"
       onChange={[Function]}
@@ -962,7 +962,7 @@ exports[`SubSettingsComponent renders 1`] = `
         }
       />
     </StyledLabelBase>
-    <StyledChoiceGroup
+    <StyledChoiceGroupBase
       aria-labelledby="settingsV2ChangeFeedLabelId"
       id="changeFeedPolicy"
       onChange={[Function]}
@@ -1054,7 +1054,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
       }
     }
   >
-    <StyledChoiceGroup
+    <StyledChoiceGroupBase
       id="timeToLive"
       label="Time to Live"
       onChange={[Function]}
@@ -1099,7 +1099,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
       }
     />
   </Stack>
-  <StyledChoiceGroup
+  <StyledChoiceGroupBase
     id="geoSpatialConfig"
     label="Geospatial Configuration"
     onChange={[Function]}
@@ -1146,7 +1146,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
       }
     }
   >
-    <StyledChoiceGroup
+    <StyledChoiceGroupBase
       id="analyticalStorageTimeToLive"
       label="Analytical Storage Time to Live"
       onChange={[Function]}
@@ -1238,7 +1238,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
         }
       />
     </StyledLabelBase>
-    <StyledChoiceGroup
+    <StyledChoiceGroupBase
       aria-labelledby="settingsV2ChangeFeedLabelId"
       id="changeFeedPolicy"
       onChange={[Function]}

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>
-  <StyledMessageBar
+  <StyledMessageBarBase
     messageBarType={1}
   >
     <Text>
@@ -350,7 +350,7 @@ exports[`SettingsUtils functions render 1`] = `
         azure portal.
       </StyledLinkBase>
     </Text>
-  </StyledMessageBar>
+  </StyledMessageBarBase>
   <Stack
     horizontal={true}
     tokens={