migrate refreshNoteBookEnabledStateForAccount to react

.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
+    "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
-    "monaco-editor/(.*)$": "<rootDir>/__mocks__/monaco-editor",
     "^dnd-core$": "dnd-core/dist/cjs",
     "^react-dnd$": "react-dnd/dist/cjs",
     "^react-dnd-html5-backend$": "react-dnd-html5-backend/dist/cjs",

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/core": "7.9.0",
-    "@babel/preset-env": "7.14.1",
+    "@babel/preset-env": "7.9.0",
-    "@babel/preset-react": "7.13.13",
+    "@babel/preset-react": "7.9.4",
-    "@babel/preset-typescript": "7.13.0",
+    "@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/eslint-plugin": "4.0.1",
-    "@typescript-eslint/parser": "4.22.1",
+    "@typescript-eslint/parser": "4.0.1",
-    "babel-jest": "26.6.3",
+    "babel-jest": "24.9.0",
-    "babel-loader": "8.2.2",
+    "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",
+    "ts-loader": "6.2.2",
-    "tslint": "6.1.3",
+    "tslint": "5.11.0",
-    "tslint-microsoft-contrib": "6.2.0",
+    "tslint-microsoft-contrib": "6.0.0",
-    "typescript": "4.3.0-beta",
+    "typescript": "4.2.4",
     "url-loader": "1.1.1",
     "wait-on": "4.0.2",
     "webpack": "4.46.0",
@@ -190,7 +191,7 @@
     "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",

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;
+  hidden: boolean;
-  outputClassName: string;
+  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}>
-              <Output output={createImmutableOutput(output)} key={index}>
+              <TransformMedia
-                <TransformMedia
+                output_type={"display_data"}
-                  output_type={"display_data"}
+                id={props.id}
-                  id={props.id}
+                contentRef={props.contentRef}
-                  contentRef={props.contentRef}
+                onMetadataChange={(metadata, mediaType) => props.onMetadataChange(metadata, mediaType, index)}
-                  onMetadataChange={(metadata, mediaType) => props.onMetadataChange(metadata, mediaType, index)}
+              />
-                />
+              <TransformMedia
-                <TransformMedia
+                output_type={"execute_result"}
-                  output_type={"execute_result"}
+                id={props.id}
-                  id={props.id}
+                contentRef={props.contentRef}
-                  contentRef={props.contentRef}
+                onMetadataChange={(metadata, mediaType) => props.onMetadataChange(metadata, mediaType, index)}
-                  onMetadataChange={(metadata, mediaType) => props.onMetadataChange(metadata, mediaType, index)}
+              />
-                />
+              <KernelOutputError />
-                <KernelOutputError />
+              <StreamText />
-                <StreamText />
+            </Output>
-              </Output>
-            </div>
           ))}
         </div>
       );

src/Common/Constants.ts

@@ -65,18 +65,28 @@ export class ClientDefaults {
   public static readonly arcadiaTokenRefreshIntervalPaddingMs: number = 2000;
 }
 
-export enum AccountKind {
+export class AccountKind {
-  DocumentDB = "DocumentDB",
+  public static DocumentDB: string = "DocumentDB";
-  MongoDB = "MongoDB",
+  public static MongoDB: string = "MongoDB";
-  Parse = "Parse",
+  public static Parse: string = "Parse";
-  GlobalDocumentDB = "GlobalDocumentDB",
+  public static GlobalDocumentDB: string = "GlobalDocumentDB";
-  Default = "DocumentDB",
+  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 databaseAccount = userContext.databaseAccount;
-    const databaseAccountName = databaseAccount?.name || "";
+    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 "@uifabric/react-hooks";
-import { useId } from "@fluentui/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;
+  const defaultExperience = userContext.apiType;
-  switch (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;
+  const defaultExperience = userContext.apiType;
-
+  switch (defaultExperience) {
-  switch (apiType) {
     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 subscriptionId = userContext.subscriptionId;
-  const accountName = databaseAccount.name;
+  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 subscriptionId = userContext.subscriptionId;
-  const accountName = databaseAccount.name;
+  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 subscriptionId = userContext.subscriptionId;
-  const accountName = databaseAccount.name;
+  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 subscriptionId = userContext.subscriptionId;
-  const accountName = databaseAccount.name;
+  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;
+  switch (defaultExperience) {
-  const accountName = databaseAccount.name;
-
-  switch (apiType) {
     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 subscriptionId = userContext.subscriptionId;
-  const accountName = databaseAccount.name;
+  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 subscriptionId = userContext.subscriptionId;
-  const accountName = databaseAccount.name;
+  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 = userContext.subscriptionId;
-  const { subscriptionId, resourceGroup, databaseAccount } = userContext;
+  const resourceGroup = userContext.resourceGroup;
-  const accountName = databaseAccount.name;
+  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,
+        userContext.subscriptionId,
-        resourceGroup,
+        userContext.resourceGroup,
-        databaseAccount.name,
+        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 subscriptionId = userContext.subscriptionId;
-  const accountName = databaseAccount.name;
+  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 subscriptionId = userContext.subscriptionId;
-  const accountName = databaseAccount.name;
+  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 subscriptionId = userContext.subscriptionId;
-  const accountName = databaseAccount.name;
+  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 subscriptionId = userContext.subscriptionId;
-  const accountName = databaseAccount.name;
+  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 subscriptionId = userContext.subscriptionId;
-  const accountName = databaseAccount.name;
+  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 subscriptionId = userContext.subscriptionId;
-  const accountName = databaseAccount.name;
+  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 subscriptionId = userContext.subscriptionId;
-  const accountName = databaseAccount.name;
+  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 subscriptionId = userContext.subscriptionId;
-  const accountName = databaseAccount.name;
+  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 subscriptionId = userContext.subscriptionId;
-  const accountName = databaseAccount.name;
+  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 subscriptionId = userContext.subscriptionId;
-  const accountName = databaseAccount.name;
+  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 (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
-
-    if (authType === AuthType.AAD && !useSDKOperations && apiType === "SQL") {
       const getResponse = await getSqlStoredProcedure(
-        subscriptionId,
+        userContext.subscriptionId,
-        resourceGroup,
+        userContext.resourceGroup,
-        databaseAccount.name,
+        userContext.databaseAccount.name,
         databaseId,
         collectionId,
         storedProcedure.id
@@ -40,9 +38,9 @@ export async function updateStoredProcedure(
           },
         };
         const rpResponse = await createUpdateSqlStoredProcedure(
-          subscriptionId,
+          userContext.subscriptionId,
-          resourceGroup,
+          userContext.resourceGroup,
-          databaseAccount.name,
+          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,
+        userContext.subscriptionId,
-        resourceGroup,
+        userContext.resourceGroup,
-        databaseAccount.name,
+        userContext.databaseAccount.name,
         databaseId,
         collectionId,
         trigger.id
@@ -36,9 +35,9 @@ export async function updateTrigger(
           },
         };
         const rpResponse = await createUpdateSqlTrigger(
-          subscriptionId,
+          userContext.subscriptionId,
-          resourceGroup,
+          userContext.resourceGroup,
-          databaseAccount.name,
+          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,
+        userContext.subscriptionId,
-        resourceGroup,
+        userContext.resourceGroup,
-        databaseAccount.name,
+        userContext.databaseAccount.name,
         databaseId,
         collectionId,
         userDefinedFunction.id
@@ -39,9 +38,9 @@ export async function updateUserDefinedFunction(
           },
         };
         const rpResponse = await createUpdateSqlUserDefinedFunction(
-          subscriptionId,
+          userContext.subscriptionId,
-          resourceGroup,
+          userContext.resourceGroup,
-          databaseAccount.name,
+          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/ContextMenuButtonFactory.ts

@@ -29,11 +29,11 @@ export interface DatabaseContextMenuButtonParams {
  * New resource tree (in ReactJS)
  */
 export class ResourceTreeContextMenuButtonFactory {
-  public static createDatabaseContextMenu(container: Explorer, databaseId: string): TreeNodeMenuItem[] {
+  public static createDatabaseContextMenu(container: Explorer): TreeNodeMenuItem[] {
     const items: TreeNodeMenuItem[] = [
       {
         iconSrc: AddCollectionIcon,
-        onClick: () => container.onNewCollectionClicked(databaseId),
+        onClick: () => container.onNewCollectionClicked(),
         label: container.addCollectionText(),
       },
     ];

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,11 +1,10 @@
-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";
 
 export interface CollapsibleSectionProps {
   title: string;
   isExpandedByDefault: boolean;
-  onExpand?: () => void;
 }
 
 export interface CollapsibleSectionState {
@@ -24,13 +23,7 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
     this.setState({ isExpanded: !this.state.isExpanded });
   };
 
-  public override componentDidUpdate(): void {
+  public render(): JSX.Element {
-    if (this.state.isExpanded && this.props.onExpand) {
-      this.props.onExpand();
-    }
-  }
-
-  public override 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 "office-ui-fabric-react";
-} from "@fluentui/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,
+  IDropdownStyleProps,
-} from "@fluentui/react";
+} 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";
+} from "office-ui-fabric-react";
-import { Card } from "@uifabric/react-cards";
 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 "office-ui-fabric-react/lib/utilities/selection/index";
-} from "@fluentui/react";
 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({
+    newContainer.databaseAccount = ko.observable({
-      databaseAccount: {
+      id: undefined,
-        id: undefined,
+      name: undefined,
-        name: undefined,
+      location: undefined,
-        location: undefined,
+      type: undefined,
-        type: undefined,
+      kind: undefined,
-        kind: undefined,
+      tags: undefined,
-        properties: {
+      properties: {
-          documentEndpoint: undefined,
+        documentEndpoint: undefined,
-          tableEndpoint: undefined,
+        tableEndpoint: undefined,
-          gremlinEndpoint: undefined,
+        gremlinEndpoint: undefined,
-          cassandraEndpoint: undefined,
+        cassandraEndpoint: undefined,
-          enableMultipleWriteLocations: true,
+        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 { MessageBar, MessageBarType, Stack } from "office-ui-fabric-react";
-import * as monaco from "monaco-editor";
 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 * as SharedConstants from "../../../../Shared/Constants";
-import { ScaleComponent, ScaleComponentProps } from "./ScaleComponent";
+import ko from "knockout";
-import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
 
 describe("ScaleComponent", () => {
   const nonNationalCloudContainer = new Explorer();
@@ -81,25 +80,25 @@ describe("ScaleComponent", () => {
 
   it("autoScale enabled", () => {
     const newContainer = new Explorer();
-    updateUserContext({
+
-      databaseAccount: {
+    newContainer.databaseAccount({
-        id: undefined,
+      id: undefined,
-        name: undefined,
+      name: undefined,
-        location: undefined,
+      location: undefined,
-        type: undefined,
+      type: undefined,
-        kind: "documentdb",
+      kind: "documentdb",
-        properties: {
+      tags: undefined,
-          documentEndpoint: undefined,
+      properties: {
-          tableEndpoint: undefined,
+        documentEndpoint: undefined,
-          gremlinEndpoint: undefined,
+        tableEndpoint: undefined,
-          cassandraEndpoint: undefined,
+        gremlinEndpoint: undefined,
-          capabilities: [
+        cassandraEndpoint: undefined,
-            {
+        capabilities: [
-              name: Constants.CapabilityNames.EnableAutoScale.toLowerCase(),
+          {
-              description: undefined,
+            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>
+    </StyledMessageBarBase>
-    <StyledChoiceGroup
+    <StyledChoiceGroupBase
       ariaLabelledBy="settingsV2RadioButtonLabelId"
       onChange={[Function]}
       options={
@@ -196,7 +196,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
         }
       />
     </StyledLabelBase>
-    <StyledChoiceGroup
+    <StyledChoiceGroupBase
       ariaLabelledBy="settingsV2RadioButtonLabelId"
       onChange={[Function]}
       options={
@@ -415,7 +415,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
       </Text>
       <Text>
         <em>
-          This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
+          *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
         </em>
       </Text>
     </Stack>
@@ -470,7 +470,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
         }
       />
     </StyledLabelBase>
-    <StyledChoiceGroup
+    <StyledChoiceGroupBase
       ariaLabelledBy="settingsV2RadioButtonLabelId"
       onChange={[Function]}
       options={
@@ -689,7 +689,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
       </Text>
       <Text>
         <em>
-          This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
+          *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
         </em>
       </Text>
     </Stack>

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]}