master merge

src/Common/CollapsedResourceTree.tsx

@@ -1,5 +1,6 @@
 import arrowLeftImg from "images/imgarrowlefticon.svg";
 import React, { FunctionComponent } from "react";
+import { userContext } from "../UserContext";
 
 export interface CollapsedResourceTreeProps {
   toggleLeftPaneExpanded: () => void;
@@ -25,7 +26,7 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
               <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
             </span>
             <span className="collectionCollapsed" onClick={toggleLeftPaneExpanded}>
-              <span data-bind="text: collectionTitle" />
+              <span>{userContext.apiType} API</span>
             </span>
           </li>
         </ul>

src/Common/Constants.ts

@@ -44,7 +44,7 @@ export class ArmResourceTypes {
 }
 
 export class BackendDefaults {
-  public static partitionKeyKind: string = "Hash";
+  public static partitionKeyKind = "Hash";
   public static singlePartitionStorageInGb: string = "10";
   public static multiPartitionStorageInGb: string = "100";
   public static maxChangeFeedRetentionDuration: number = 10;

src/Common/CosmosClient.ts

@@ -10,6 +10,13 @@ const _global = typeof self === "undefined" ? window : self;
 
 export const tokenProvider = async (requestInfo: RequestInfo) => {
   const { verb, resourceId, resourceType, headers } = requestInfo;
+
+  if (userContext.features.enableAadDataPlane && userContext.aadToken) {
+    const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
+    const authorizationToken = `${AUTH_PREFIX}${userContext.aadToken}`;
+    return authorizationToken;
+  }
+
   if (configContext.platform === Platform.Emulator) {
     // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
     await setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
@@ -76,7 +83,7 @@ export function client(): Cosmos.CosmosClient {
   if (_client) return _client;
   const options: Cosmos.CosmosClientOptions = {
     endpoint: endpoint() || "https://cosmos.azure.com", // CosmosClient gets upset if we pass a bad URL. This should never actually get called
-    key: userContext.masterKey,
+    ...(!userContext.features.enableAadDataPlane && { key: userContext.masterKey }),
     tokenProvider,
     connectionPolicy: {
       enableEndpointDiscovery: false,

src/Common/DatabaseAccountUtility.ts

@@ -0,0 +1,17 @@
+import { userContext } from "../UserContext";
+
+function isVirtualNetworkFilterEnabled() {
+  return userContext.databaseAccount?.properties?.isVirtualNetworkFilterEnabled;
+}
+
+function isIpRulesEnabled() {
+  return userContext.databaseAccount?.properties?.ipRules?.length > 0;
+}
+
+function isPrivateEndpointConnectionsEnabled() {
+  return userContext.databaseAccount?.properties?.privateEndpointConnections?.length > 0;
+}
+
+export function isPublicInternetAccessAllowed(): boolean {
+  return !isVirtualNetworkFilterEnabled() && !isIpRulesEnabled() && !isPrivateEndpointConnectionsEnabled();
+}

src/Common/EntityValue.tsx

@@ -32,7 +32,7 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
         <DatePicker
           className="addEntityDatePicker"
           placeholder={entityValuePlaceholder}
-          value={entityValue && new Date(entityValue)}
+          value={entityValue ? new Date(entityValue) : new Date()}
           ariaLabel={entityValuePlaceholder}
           onSelectDate={onSelectDate}
           disabled={isEntityValueDisable}
@@ -59,7 +59,7 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
       disabled={isEntityValueDisable}
       type={entityValueType}
       placeholder={entityValuePlaceholder}
-      value={typeof entityValue === "string" && entityValue}
+      value={typeof entityValue === "string" ? entityValue : ""}
       onChange={onEntityValueChange}
     />
   );

src/Common/QueriesClient.ts

@@ -19,7 +19,7 @@ import { handleError } from "./ErrorHandlingUtils";
 export class QueriesClient {
   private static readonly PartitionKey: DataModels.PartitionKey = {
     paths: [`/${SavedQueries.PartitionKeyProperty}`],
-    kind: BackendDefaults.partitionKeyKind,
+    kind: "Hash",
     version: BackendDefaults.partitionKeyVersion,
   };
   private static readonly FetchQuery: string = "SELECT * FROM c";

src/Common/ResourceTree.tsx

@@ -20,7 +20,7 @@ export const ResourceTree: FunctionComponent<ResourceTreeProps> = ({
         {/* Collections Window Title/Command Bar - Start */}
         <div className="collectiontitle">
           <div className="coltitle">
-            <span className="titlepadcol" data-bind="text: collectionTitle" />
+            <span className="titlepadcol">{userContext.apiType} API</span>
             <div className="float-right">
               <span
                 className="padimgcolrefresh"
@@ -31,7 +31,7 @@ export const ResourceTree: FunctionComponent<ResourceTreeProps> = ({
                 aria-label="Refresh tree"
                 title="Refresh tree"
               >
-                <img className="refreshcol" src={refreshImg} alt="Refresh tree" />
+                <img className="refreshcol" src={refreshImg} alt="Refresh Tree" />
               </span>
               <span
                 className="padimgcolrefresh1"

src/Common/dataAccess/createCollection.ts

@@ -10,18 +10,15 @@ import { userContext } from "../../UserContext";
 import {
   createUpdateCassandraTable,
   getCassandraTable,
-} from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import {
-  createUpdateGremlinGraph,
-  getGremlinGraph,
-} from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+} from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { createUpdateGremlinGraph, getGremlinGraph } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import {
   createUpdateMongoDBCollection,
   getMongoDBCollection,
-} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
-import * as ARMTypes from "../../Utils/arm/generatedClients/2020-04-01/types";
+} from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/cosmos/tableResources";
+import * as ARMTypes from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";

src/Common/dataAccess/createDatabase.ts

@@ -6,23 +6,23 @@ import { userContext } from "../../UserContext";
 import {
   createUpdateCassandraKeyspace,
   getCassandraKeyspace,
-} from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
+} from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import {
   createUpdateGremlinDatabase,
   getGremlinDatabase,
-} from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+} from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import {
   createUpdateMongoDBDatabase,
   getMongoDBDatabase,
-} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { createUpdateSqlDatabase, getSqlDatabase } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+} from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { createUpdateSqlDatabase, getSqlDatabase } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import {
   CassandraKeyspaceCreateUpdateParameters,
   CreateUpdateOptions,
   GremlinDatabaseCreateUpdateParameters,
   MongoDBDatabaseCreateUpdateParameters,
   SqlDatabaseCreateUpdateParameters,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
+} from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";

src/Common/dataAccess/createDocument.ts

@@ -1,8 +1,8 @@
 import { CollectionBase } from "../../Contracts/ViewModels";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { getEntityName } from "../DocumentUtility";
 import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 
 export const createDocument = async (collection: CollectionBase, newDocument: unknown): Promise<unknown> => {
   const entityName = getEntityName();

src/Common/dataAccess/createStoredProcedure.ts

@@ -4,11 +4,11 @@ import { userContext } from "../../UserContext";
 import {
   createUpdateSqlStoredProcedure,
   getSqlStoredProcedure,
-} from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+} from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import {
   SqlStoredProcedureCreateUpdateParameters,
   SqlStoredProcedureResource,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
+} from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";

src/Common/dataAccess/createTrigger.ts

@@ -1,11 +1,8 @@
-import { Resource, TriggerDefinition } from "@azure/cosmos";
+import { TriggerDefinition } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { createUpdateSqlTrigger, getSqlTrigger } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import {
-  SqlTriggerCreateUpdateParameters,
-  SqlTriggerResource,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
+import { createUpdateSqlTrigger, getSqlTrigger } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { SqlTriggerCreateUpdateParameters, SqlTriggerResource } from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
@@ -13,8 +10,8 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function createTrigger(
   databaseId: string,
   collectionId: string,
-  trigger: TriggerDefinition
-): Promise<TriggerDefinition & Resource> {
+  trigger: SqlTriggerResource
+): Promise<TriggerDefinition | SqlTriggerResource> {
   const clearMessage = logConsoleProgress(`Creating trigger ${trigger.id}`);
   try {
     if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
@@ -38,7 +35,7 @@ export async function createTrigger(
 
       const createTriggerParams: SqlTriggerCreateUpdateParameters = {
         properties: {
-          resource: trigger as SqlTriggerResource,
+          resource: trigger,
           options: {},
         },
       };
@@ -51,10 +48,13 @@ export async function createTrigger(
         trigger.id,
         createTriggerParams
       );
-      return rpResponse && (rpResponse.properties?.resource as TriggerDefinition & Resource);
+      return rpResponse && rpResponse.properties?.resource;
     }
 
-    const response = await client().database(databaseId).container(collectionId).scripts.triggers.create(trigger);
+    const response = await client()
+      .database(databaseId)
+      .container(collectionId)
+      .scripts.triggers.create(trigger as unknown as TriggerDefinition); // TODO: TypeScript does not like the SQL SDK trigger type
     return response.resource;
   } catch (error) {
     handleError(error, "CreateTrigger", `Error while creating trigger ${trigger.id}`);

src/Common/dataAccess/createUserDefinedFunction.ts

@@ -4,11 +4,11 @@ import { userContext } from "../../UserContext";
 import {
   createUpdateSqlUserDefinedFunction,
   getSqlUserDefinedFunction,
-} from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+} from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import {
   SqlUserDefinedFunctionCreateUpdateParameters,
   SqlUserDefinedFunctionResource,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
+} from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";

src/Common/dataAccess/deleteCollection.ts

@@ -1,10 +1,10 @@
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { deleteCassandraTable } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import { deleteGremlinGraph } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { deleteMongoDBCollection } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { deleteSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { deleteTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
+import { deleteCassandraTable } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { deleteGremlinGraph } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
+import { deleteMongoDBCollection } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { deleteSqlContainer } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { deleteTable } from "../../Utils/arm/generatedClients/cosmos/tableResources";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";

src/Common/dataAccess/deleteDatabase.ts

@@ -1,9 +1,9 @@
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { deleteCassandraKeyspace } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import { deleteGremlinDatabase } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { deleteMongoDBDatabase } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { deleteSqlDatabase } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { deleteCassandraKeyspace } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { deleteGremlinDatabase } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
+import { deleteMongoDBDatabase } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { deleteSqlDatabase } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";

src/Common/dataAccess/deleteStoredProcedure.ts

@@ -1,6 +1,6 @@
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { deleteSqlStoredProcedure } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { deleteSqlStoredProcedure } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";

src/Common/dataAccess/deleteTrigger.ts

@@ -1,6 +1,6 @@
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { deleteSqlTrigger } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { deleteSqlTrigger } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";

src/Common/dataAccess/deleteUserDefinedFunction.ts

@@ -1,6 +1,6 @@
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { deleteSqlUserDefinedFunction } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { deleteSqlUserDefinedFunction } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";

src/Common/dataAccess/queryDocuments.ts

@@ -1,6 +1,6 @@
-import { Queries } from "../Constants";
 import { FeedOptions, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
+import { Queries } from "../Constants";
 import { client } from "../CosmosClient";
 
 export const queryDocuments = (

src/Common/dataAccess/queryDocumentsPage.ts

@@ -1,8 +1,8 @@
 import { QueryResults } from "../../Contracts/ViewModels";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { MinimalQueryIterator, nextPage } from "../IteratorUtilities";
-import { handleError } from "../ErrorHandlingUtils";
 import { getEntityName } from "../DocumentUtility";
+import { handleError } from "../ErrorHandlingUtils";
+import { MinimalQueryIterator, nextPage } from "../IteratorUtilities";
 
 export const queryDocumentsPage = async (
   resourceName: string,

src/Common/dataAccess/readCollectionOffer.ts

@@ -1,11 +1,11 @@
 import { AuthType } from "../../AuthType";
 import { Offer, ReadCollectionOfferParams } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
-import { getCassandraTableThroughput } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import { getGremlinGraphThroughput } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { getMongoDBCollectionThroughput } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { getSqlContainerThroughput } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { getTableThroughput } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
+import { getCassandraTableThroughput } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { getGremlinGraphThroughput } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
+import { getMongoDBCollectionThroughput } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { getSqlContainerThroughput } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { getTableThroughput } from "../../Utils/arm/generatedClients/cosmos/tableResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { handleError } from "../ErrorHandlingUtils";
 import { readOfferWithSDK } from "./readOfferWithSDK";

src/Common/dataAccess/readCollections.ts

@@ -1,11 +1,11 @@
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
-import { listCassandraTables } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import { listGremlinGraphs } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { listMongoDBCollections } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { listSqlContainers } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { listTables } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
+import { listCassandraTables } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { listGremlinGraphs } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
+import { listMongoDBCollections } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { listSqlContainers } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { listTables } from "../../Utils/arm/generatedClients/cosmos/tableResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";

src/Common/dataAccess/readDatabaseOffer.ts

@@ -1,10 +1,10 @@
 import { AuthType } from "../../AuthType";
 import { Offer, ReadDatabaseOfferParams } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
-import { getCassandraKeyspaceThroughput } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import { getGremlinDatabaseThroughput } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { getMongoDBDatabaseThroughput } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { getSqlDatabaseThroughput } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { getCassandraKeyspaceThroughput } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { getGremlinDatabaseThroughput } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
+import { getMongoDBDatabaseThroughput } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { getSqlDatabaseThroughput } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { handleError } from "../ErrorHandlingUtils";
 import { readOfferWithSDK } from "./readOfferWithSDK";

src/Common/dataAccess/readDatabases.ts

@@ -1,10 +1,10 @@
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
-import { listCassandraKeyspaces } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import { listGremlinDatabases } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { listMongoDBDatabases } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { listSqlDatabases } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { listCassandraKeyspaces } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { listGremlinDatabases } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
+import { listMongoDBDatabases } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { listSqlDatabases } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";

src/Common/dataAccess/readMongoDBCollection.tsx

@@ -1,7 +1,7 @@
 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 { getMongoDBCollection } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { MongoDBCollectionResource } from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { handleError } from "../ErrorHandlingUtils";
 

src/Common/dataAccess/readStoredProcedures.ts

@@ -1,7 +1,7 @@
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { listSqlStoredProcedures } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { listSqlStoredProcedures } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";

src/Common/dataAccess/readTriggers.ts

@@ -1,7 +1,8 @@
-import { Resource, TriggerDefinition } from "@azure/cosmos";
+import { TriggerDefinition } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { listSqlTriggers } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { listSqlTriggers } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { SqlTriggerResource } from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
@@ -9,7 +10,7 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function readTriggers(
   databaseId: string,
   collectionId: string
-): Promise<(TriggerDefinition & Resource)[]> {
+): Promise<SqlTriggerResource[] | TriggerDefinition[]> {
   const clearMessage = logConsoleProgress(`Querying triggers for container ${collectionId}`);
   try {
     if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
@@ -20,7 +21,7 @@ export async function readTriggers(
         databaseId,
         collectionId
       );
-      return rpResponse?.value?.map((trigger) => trigger.properties?.resource as TriggerDefinition & Resource);
+      return rpResponse?.value?.map((trigger) => trigger.properties?.resource);
     }
 
     const response = await client().database(databaseId).container(collectionId).scripts.triggers.readAll().fetchAll();

src/Common/dataAccess/readUserDefinedFunctions.ts

@@ -1,7 +1,7 @@
 import { Resource, UserDefinedFunctionDefinition } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { listSqlUserDefinedFunctions } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { listSqlUserDefinedFunctions } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";

src/Common/dataAccess/updateCollection.ts

@@ -6,23 +6,20 @@ import { userContext } from "../../UserContext";
 import {
   createUpdateCassandraTable,
   getCassandraTable,
-} from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import {
-  createUpdateGremlinGraph,
-  getGremlinGraph,
-} from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+} from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { createUpdateGremlinGraph, getGremlinGraph } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import {
   createUpdateMongoDBCollection,
   getMongoDBCollection,
-} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
+} from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/cosmos/tableResources";
 import {
   ExtendedResourceProperties,
   MongoDBCollectionCreateUpdateParameters,
   SqlContainerCreateUpdateParameters,
   SqlContainerResource,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
+} from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";

src/Common/dataAccess/updateOffer.ts

@@ -10,7 +10,7 @@ import {
   migrateCassandraTableToManualThroughput,
   updateCassandraKeyspaceThroughput,
   updateCassandraTableThroughput,
-} from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
+} from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import {
   migrateGremlinDatabaseToAutoscale,
   migrateGremlinDatabaseToManualThroughput,
@@ -18,7 +18,7 @@ import {
   migrateGremlinGraphToManualThroughput,
   updateGremlinDatabaseThroughput,
   updateGremlinGraphThroughput,
-} from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+} from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import {
   migrateMongoDBCollectionToAutoscale,
   migrateMongoDBCollectionToManualThroughput,
@@ -26,7 +26,7 @@ import {
   migrateMongoDBDatabaseToManualThroughput,
   updateMongoDBCollectionThroughput,
   updateMongoDBDatabaseThroughput,
-} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+} from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
 import {
   migrateSqlContainerToAutoscale,
   migrateSqlContainerToManualThroughput,
@@ -34,13 +34,13 @@ import {
   migrateSqlDatabaseToManualThroughput,
   updateSqlContainerThroughput,
   updateSqlDatabaseThroughput,
-} from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+} from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import {
   migrateTableToAutoscale,
   migrateTableToManualThroughput,
   updateTableThroughput,
-} from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
-import { ThroughputSettingsUpdateParameters } from "../../Utils/arm/generatedClients/2020-04-01/types";
+} from "../../Utils/arm/generatedClients/cosmos/tableResources";
+import { ThroughputSettingsUpdateParameters } from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { HttpHeaders } from "../Constants";
 import { client } from "../CosmosClient";

src/Common/dataAccess/updateStoredProcedure.ts

@@ -4,11 +4,11 @@ import { userContext } from "../../UserContext";
 import {
   createUpdateSqlStoredProcedure,
   getSqlStoredProcedure,
-} from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+} from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import {
   SqlStoredProcedureCreateUpdateParameters,
   SqlStoredProcedureResource,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
+} from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";

src/Common/dataAccess/updateTrigger.ts

@@ -1,11 +1,8 @@
 import { TriggerDefinition } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { userContext } from "../../UserContext";
-import { createUpdateSqlTrigger, getSqlTrigger } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import {
-  SqlTriggerCreateUpdateParameters,
-  SqlTriggerResource,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
+import { createUpdateSqlTrigger, getSqlTrigger } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { SqlTriggerCreateUpdateParameters, SqlTriggerResource } from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
@@ -13,8 +10,8 @@ import { handleError } from "../ErrorHandlingUtils";
 export async function updateTrigger(
   databaseId: string,
   collectionId: string,
-  trigger: TriggerDefinition
-): Promise<TriggerDefinition> {
+  trigger: SqlTriggerResource
+): Promise<SqlTriggerResource | TriggerDefinition> {
   const clearMessage = logConsoleProgress(`Updating trigger ${trigger.id}`);
   const { authType, useSDKOperations, apiType, subscriptionId, resourceGroup, databaseAccount } = userContext;
   try {
@@ -31,7 +28,7 @@ export async function updateTrigger(
       if (getResponse?.properties?.resource) {
         const createTriggerParams: SqlTriggerCreateUpdateParameters = {
           properties: {
-            resource: trigger as SqlTriggerResource,
+            resource: trigger,
             options: {},
           },
         };
@@ -44,7 +41,7 @@ export async function updateTrigger(
           trigger.id,
           createTriggerParams
         );
-        return rpResponse && (rpResponse.properties?.resource as TriggerDefinition);
+        return rpResponse && rpResponse.properties?.resource;
       }
 
       throw new Error(`Failed to update trigger: ${trigger.id} does not exist.`);
@@ -54,7 +51,7 @@ export async function updateTrigger(
       .database(databaseId)
       .container(collectionId)
       .scripts.trigger(trigger.id)
-      .replace(trigger);
+      .replace(trigger as unknown as TriggerDefinition); // TODO: TypeScript does not like the SQL SDK trigger type
     return response?.resource;
   } catch (error) {
     handleError(error, "UpdateTrigger", `Error while updating trigger ${trigger.id}`);

src/Common/dataAccess/updateUserDefinedFunction.ts

@@ -4,11 +4,11 @@ import { userContext } from "../../UserContext";
 import {
   createUpdateSqlUserDefinedFunction,
   getSqlUserDefinedFunction,
-} from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+} from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import {
   SqlUserDefinedFunctionCreateUpdateParameters,
   SqlUserDefinedFunctionResource,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
+} from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";

src/ConfigContext.ts

@@ -27,6 +27,7 @@ export interface ConfigContext {
   hostedExplorerURL: string;
   armAPIVersion?: string;
   allowedJunoOrigins: string[];
+  enableSchemaAnalyzer: boolean;
 }
 
 // Default configuration
@@ -61,6 +62,7 @@ let configContext: Readonly<ConfigContext> = {
     "https://tools-staging.cosmos.azure.com",
     "https://localhost",
   ],
+  enableSchemaAnalyzer: false,
 };
 
 export function resetConfigContext(): void {

src/Contracts/DataModels.ts

@@ -20,6 +20,9 @@ export interface DatabaseAccountExtendedProperties {
   writeLocations?: DatabaseAccountResponseLocation[];
   enableFreeTier?: boolean;
   enableAnalyticalStorage?: boolean;
+  isVirtualNetworkFilterEnabled?: boolean;
+  ipRules?: IpRule[];
+  privateEndpointConnections?: unknown[];
 }
 
 export interface DatabaseAccountResponseLocation {
@@ -31,6 +34,10 @@ export interface DatabaseAccountResponseLocation {
   provisioningState: string;
 }
 
+export interface IpRule {
+  ipAddressOrRange: string;
+}
+
 export interface ConfigurationOverrides {
   EnableBsonSchema: string;
 }
@@ -161,7 +168,7 @@ export interface KeyResource {
 
 export interface IndexingPolicy {
   automatic: boolean;
-  indexingMode: string;
+  indexingMode: "consistent" | "lazy" | "none";
   includedPaths: any;
   excludedPaths: any;
   compositeIndexes?: any;
@@ -170,7 +177,7 @@ export interface IndexingPolicy {
 
 export interface PartitionKey {
   paths: string[];
-  kind: string;
+  kind: "Hash" | "Range" | "MultiHash";
   version: number;
   systemKey?: boolean;
 }
@@ -385,16 +392,6 @@ export interface GeospatialConfig {
   type: string;
 }
 
-export interface GatewayDatabaseAccount {
-  MediaLink: string;
-  DatabasesLink: string;
-  MaxMediaStorageUsageInMB: number;
-  CurrentMediaStorageUsageInMB: number;
-  EnableMultipleWriteLocations?: boolean;
-  WritableLocations: RegionEndpoint[];
-  ReadableLocations: RegionEndpoint[];
-}
-
 export interface RegionEndpoint {
   name: string;
   documentAccountEndpoint: string;
@@ -415,13 +412,6 @@ export interface AccountKeys {
   secondaryReadonlyMasterKey: string;
 }
 
-export interface AfecFeature {
-  id: string;
-  name: string;
-  properties: { state: string };
-  type: string;
-}
-
 export interface OperationStatus {
   status: string;
   id?: string;
@@ -501,91 +491,6 @@ export interface MongoParameters extends RpParameters {
   analyticalStorageTtl?: number;
 }
 
-export interface SparkClusterLibrary {
-  name: string;
-}
-
-export interface Library extends SparkClusterLibrary {
-  properties: {
-    kind: "Jar";
-    source: {
-      kind: "HttpsUri";
-      uri: string;
-      libraryFileName: string;
-    };
-  };
-}
-
-export interface LibraryFeedResponse {
-  value: Library[];
-}
-
-export interface ArmResource {
-  id: string;
-  location: string;
-  name: string;
-  type: string;
-  tags: { [key: string]: string };
-}
-
-export interface ArcadiaWorkspaceIdentity {
-  type: string;
-  principalId: string;
-  tenantId: string;
-}
-
-export interface ArcadiaWorkspaceProperties {
-  managedResourceGroupName: string;
-  provisioningState: string;
-  sqlAdministratorLogin: string;
-  connectivityEndpoints: {
-    artifacts: string;
-    dev: string;
-    spark: string;
-    sql: string;
-    web: string;
-  };
-  defaultDataLakeStorage: {
-    accountUrl: string;
-    filesystem: string;
-  };
-}
-
-export interface ArcadiaWorkspaceFeedResponse {
-  value: ArcadiaWorkspace[];
-}
-
-export interface ArcadiaWorkspace extends ArmResource {
-  identity: ArcadiaWorkspaceIdentity;
-  properties: ArcadiaWorkspaceProperties;
-}
-
-export interface SparkPoolFeedResponse {
-  value: SparkPool[];
-}
-
-export interface SparkPoolProperties {
-  creationDate: string;
-  sparkVersion: string;
-  nodeCount: number;
-  nodeSize: string;
-  nodeSizeFamily: string;
-  provisioningState: string;
-  autoScale: {
-    enabled: boolean;
-    minNodeCount: number;
-    maxNodeCount: number;
-  };
-  autoPause: {
-    enabled: boolean;
-    delayInMinutes: number;
-  };
-}
-
-export interface SparkPool extends ArmResource {
-  properties: SparkPoolProperties;
-}
-
 export interface MemoryUsageInfo {
   freeKB: number;
   totalKB: number;

src/Contracts/ExplorerContracts.ts

@@ -1,6 +1,6 @@
-import * as Versions from "./Versions";
 import * as ActionContracts from "./ActionContracts";
 import * as Diagnostics from "./Diagnostics";
+import * as Versions from "./Versions";
 
 /**
  * Messaging types used with Data Explorer <-> Portal communication

src/Contracts/ViewModels.ts

@@ -15,6 +15,8 @@ import StoredProcedure from "../Explorer/Tree/StoredProcedure";
 import Trigger from "../Explorer/Tree/Trigger";
 import UserDefinedFunction from "../Explorer/Tree/UserDefinedFunction";
 import { SelfServeType } from "../SelfServe/SelfServeUtils";
+import { CollectionCreationDefaults } from "../UserContext";
+import { SqlTriggerResource } from "../Utils/arm/generatedClients/cosmos/types";
 import * as DataModels from "./DataModels";
 import { SubscriptionType } from "./SubscriptionType";
 
@@ -175,7 +177,7 @@ export interface Collection extends CollectionBase {
 
   createStoredProcedureNode(data: StoredProcedureDefinition & Resource): StoredProcedure;
   createUserDefinedFunctionNode(data: UserDefinedFunctionDefinition & Resource): UserDefinedFunction;
-  createTriggerNode(data: TriggerDefinition & Resource): Trigger;
+  createTriggerNode(data: TriggerDefinition | SqlTriggerResource): Trigger;
   findStoredProcedureWithId(sprocRid: string): StoredProcedure;
   findTriggerWithId(triggerRid: string): Trigger;
   findUserDefinedFunctionWithId(udfRid: string): UserDefinedFunction;
@@ -410,25 +412,6 @@ export interface SelfServeFrameInputs {
   flights?: readonly string[];
 }
 
-export interface CollectionCreationDefaults {
-  storage: string;
-  throughput: ThroughputDefaults;
-}
-
-export interface ThroughputDefaults {
-  fixed: number;
-  unlimited:
-    | number
-    | {
-        collectionThreshold: number;
-        lessThanOrEqualToThreshold: number;
-        greatThanThreshold: number;
-      };
-  unlimitedmax: number;
-  unlimitedmin: number;
-  shared: number;
-}
-
 export class MonacoEditorSettings {
   public readonly language: string;
   public readonly readOnly: boolean;

src/Explorer/ComponentRegisterer.test.ts

@@ -1,14 +0,0 @@
-jest.mock("monaco-editor");
-
-import * as ko from "knockout";
-import "./ComponentRegisterer";
-
-describe("Component Registerer", () => {
-  it("should register json-editor component", () => {
-    expect(ko.components.isRegistered("json-editor")).toBe(true);
-  });
-
-  it("should register dynamic-list component", () => {
-    expect(ko.components.isRegistered("dynamic-list")).toBe(true);
-  });
-});

src/Explorer/ComponentRegisterer.ts

@@ -1,16 +1,8 @@
 import * as ko from "knockout";
 import { DiffEditorComponent } from "./Controls/DiffEditor/DiffEditorComponent";
-import { DynamicListComponent } from "./Controls/DynamicList/DynamicListComponent";
 import { EditorComponent } from "./Controls/Editor/EditorComponent";
 import { JsonEditorComponent } from "./Controls/JsonEditor/JsonEditorComponent";
-import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
-import * as PaneComponents from "./Panes/PaneComponents";
 
 ko.components.register("editor", new EditorComponent());
 ko.components.register("json-editor", new JsonEditorComponent());
 ko.components.register("diff-editor", new DiffEditorComponent());
-ko.components.register("dynamic-list", DynamicListComponent);
-ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponentAutoPilotV3);
-
-// Panes
-ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());

src/Explorer/ContextMenuButtonFactory.ts

@@ -11,12 +11,12 @@ import DeleteUDFIcon from "images/DeleteUDF.svg";
 import HostedTerminalIcon from "images/Hosted-Terminal.svg";
 import * as ViewModels from "../Contracts/ViewModels";
 import { userContext } from "../UserContext";
+import { getCollectionName, getDatabaseName } from "../Utils/APITypeUtils";
 import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
 import Explorer from "./Explorer";
 import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
 import UserDefinedFunction from "./Tree/UserDefinedFunction";
-
 export interface CollectionContextMenuButtonParams {
   databaseId: string;
   collectionId: string;
@@ -34,7 +34,7 @@ export class ResourceTreeContextMenuButtonFactory {
       {
         iconSrc: AddCollectionIcon,
         onClick: () => container.onNewCollectionClicked(databaseId),
-        label: container.addCollectionText(),
+        label: `New ${getCollectionName()}`,
       },
     ];
 
@@ -42,7 +42,7 @@ export class ResourceTreeContextMenuButtonFactory {
       items.push({
         iconSrc: DeleteDatabaseIcon,
         onClick: () => container.openDeleteDatabaseConfirmationPane(),
-        label: container.deleteDatabaseText(),
+        label: `Delete ${getDatabaseName()}`,
         styleClass: "deleteDatabaseMenuItem",
       });
     }
@@ -73,9 +73,13 @@ export class ResourceTreeContextMenuButtonFactory {
         iconSrc: HostedTerminalIcon,
         onClick: () => {
           const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-          selectedCollection && selectedCollection.onNewMongoShellClick();
+          if (container.isShellEnabled()) {
+            container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
+          } else {
+            selectedCollection && selectedCollection.onNewMongoShellClick();
+          }
         },
-        label: "New Shell",
+        label: container.isShellEnabled() ? "Open Mongo Shell" : "New Shell",
       });
     }
 
@@ -111,7 +115,7 @@ export class ResourceTreeContextMenuButtonFactory {
     items.push({
       iconSrc: DeleteCollectionIcon,
       onClick: () => container.openDeleteCollectionConfirmationPane(),
-      label: container.deleteCollectionText(),
+      label: `Delete ${getCollectionName()}`,
       styleClass: "deleteCollectionMenuItem",
     });
 

src/Explorer/Controls/Accordion/AccordionComponent.tsx

@@ -26,12 +26,12 @@ export interface AccordionItemComponentProps {
 }
 
 interface AccordionItemComponentState {
-  isExpanded: boolean;
+  isExpanded?: boolean;
 }
 
 export class AccordionItemComponent extends React.Component<AccordionItemComponentProps, AccordionItemComponentState> {
   private static readonly durationMS = 500;
-  private isExpanded: boolean;
+  private isExpanded?: boolean;
 
   constructor(props: AccordionItemComponentProps) {
     super(props);
@@ -78,7 +78,7 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
     );
   }
 
-  private onHeaderClick = (event: React.MouseEvent<HTMLDivElement>): void => {
+  private onHeaderClick = (_event: React.MouseEvent<HTMLDivElement>): void => {
     this.setState({ isExpanded: !this.state.isExpanded });
   };
 

src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx

@@ -1,142 +0,0 @@
-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";
-
-export interface ArcadiaMenuPickerProps {
-  selectText?: string;
-  disableSubmenu?: boolean;
-  selectedSparkPool: string;
-  workspaces: ArcadiaWorkspaceItem[];
-  onSparkPoolSelect: (
-    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-    item: IContextualMenuItem
-  ) => boolean | void;
-  onCreateNewWorkspaceClicked: () => boolean | void;
-  onCreateNewSparkPoolClicked: (workspaceResourceId: string) => boolean | void;
-}
-
-interface ArcadiaMenuPickerStates {
-  selectedSparkPool: string;
-}
-
-export interface ArcadiaWorkspaceItem extends ArcadiaWorkspace {
-  sparkPools: SparkPool[];
-}
-
-export class ArcadiaMenuPicker extends React.Component<ArcadiaMenuPickerProps, ArcadiaMenuPickerStates> {
-  constructor(props: ArcadiaMenuPickerProps) {
-    super(props);
-    this.state = {
-      selectedSparkPool: props.selectedSparkPool,
-    };
-  }
-
-  private _onSparkPoolClicked = (
-    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-    item: IContextualMenuItem
-  ): boolean | void => {
-    try {
-      this.props.onSparkPoolSelect(e, item);
-      this.setState({
-        selectedSparkPool: item.text,
-      });
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "ArcadiaMenuPicker/_onSparkPoolClicked");
-      throw error;
-    }
-  };
-
-  private _onCreateNewWorkspaceClicked = (
-    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-    item: IContextualMenuItem
-  ): boolean | void => {
-    this.props.onCreateNewWorkspaceClicked();
-  };
-
-  private _onCreateNewSparkPoolClicked = (
-    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-    item: IContextualMenuItem
-  ): boolean | void => {
-    this.props.onCreateNewSparkPoolClicked(item.key);
-  };
-
-  public render() {
-    const { workspaces } = this.props;
-    let workspaceMenuItems: IContextualMenuItem[] = workspaces.map((workspace) => {
-      let sparkPoolsMenuProps: IContextualMenuProps = {
-        items: workspace.sparkPools.map(
-          (sparkpool): IContextualMenuItem => ({
-            key: sparkpool.id,
-            text: sparkpool.name,
-            onClick: this._onSparkPoolClicked,
-          })
-        ),
-      };
-      if (!sparkPoolsMenuProps.items.length) {
-        sparkPoolsMenuProps.items.push({
-          key: workspace.id,
-          text: "Create new spark pool",
-          onClick: this._onCreateNewSparkPoolClicked,
-        });
-      }
-
-      return {
-        key: workspace.id,
-        text: workspace.name,
-        subMenuProps: this.props.disableSubmenu ? undefined : sparkPoolsMenuProps,
-      };
-    });
-
-    if (!workspaceMenuItems.length) {
-      workspaceMenuItems.push({
-        key: "create_workspace",
-        text: "Create new workspace",
-        onClick: this._onCreateNewWorkspaceClicked,
-      });
-    }
-
-    const dropdownStyle: IButtonStyles = {
-      root: {
-        backgroundColor: "transparent",
-        margin: "auto 5px",
-        padding: "0",
-        border: "0",
-      },
-      rootHovered: {
-        backgroundColor: "transparent",
-      },
-      rootChecked: {
-        backgroundColor: "transparent",
-      },
-      rootFocused: {
-        backgroundColor: "transparent",
-      },
-      rootExpanded: {
-        backgroundColor: "transparent",
-      },
-      flexContainer: {
-        height: "30px",
-        border: "1px solid #a6a6a6",
-        padding: "0 8px",
-      },
-      label: {
-        fontWeight: "400",
-        fontSize: "12px",
-      },
-    };
-
-    return (
-      <DefaultButton
-        text={this.state.selectedSparkPool || this.props.selectText || "Select a Spark pool"}
-        persistMenu={true}
-        className="arcadia-menu-picker"
-        menuProps={{
-          items: workspaceMenuItems,
-        }}
-        styles={dropdownStyle}
-      />
-    );
-  }
-}

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -7,7 +7,6 @@ import { KeyCodes } from "../../../Common/Constants";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as StringUtils from "../../../Utils/StringUtils";
-import { ArcadiaMenuPickerProps } from "../Arcadia/ArcadiaMenuPicker";
 
 /**
  * Options for this component
@@ -112,15 +111,6 @@ export interface CommandButtonComponentProps {
    * Aria-label for the button
    */
   ariaLabel: string;
-  //TODO: generalize customized command bar
-  /**
-   * If set to true, will render arcadia picker
-   */
-  isArcadiaPicker?: boolean;
-  /**
-   * props to render arcadia picker
-   */
-  arcadiaProps?: ArcadiaMenuPickerProps;
 }
 
 export class CommandButtonComponent extends React.Component<CommandButtonComponentProps> {

src/Explorer/Controls/Dialog.tsx

@@ -15,7 +15,22 @@ import {
   ProgressIndicator,
   TextField,
 } from "@fluentui/react";
-import React, { FunctionComponent } from "react";
+import React, { FC } from "react";
+import create, { UseStore } from "zustand";
+
+export interface DialogState {
+  visible: boolean;
+  dialogProps?: DialogProps;
+  openDialog: (props: DialogProps) => void;
+  closeDialog: () => void;
+}
+
+export const useDialog: UseStore<DialogState> = create((set) => ({
+  visible: false,
+  openDialog: (props: DialogProps) => set(() => ({ visible: true, dialogProps: props })),
+  closeDialog: () =>
+    set((state) => ({ visible: false, openDialog: state.openDialog, closeDialog: state.closeDialog }), true),
+}));
 
 export interface TextFieldProps extends ITextFieldProps {
   label: string;
@@ -35,7 +50,6 @@ export interface DialogProps {
   title: string;
   subText: string;
   isModal: boolean;
-  visible: boolean;
   choiceGroupProps?: IChoiceGroupProps;
   textFieldProps?: TextFieldProps;
   linkProps?: LinkProps;
@@ -56,24 +70,26 @@ const DIALOG_TITLE_FONT_SIZE = "17px";
 const DIALOG_TITLE_FONT_WEIGHT = 400;
 const DIALOG_SUBTEXT_FONT_SIZE = "15px";
 
-export const Dialog: FunctionComponent<DialogProps> = ({
-  title,
-  subText,
-  isModal,
-  visible,
-  choiceGroupProps,
-  textFieldProps,
-  linkProps,
-  progressIndicatorProps,
-  primaryButtonText,
-  secondaryButtonText,
-  onPrimaryButtonClick,
-  onSecondaryButtonClick,
-  primaryButtonDisabled,
-  type,
-  showCloseButton,
-  onDismiss,
-}: DialogProps) => {
+export const Dialog: FC = () => {
+  const { visible, dialogProps: props } = useDialog();
+  const {
+    title,
+    subText,
+    isModal,
+    choiceGroupProps,
+    textFieldProps,
+    linkProps,
+    progressIndicatorProps,
+    primaryButtonText,
+    secondaryButtonText,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick,
+    primaryButtonDisabled,
+    type,
+    showCloseButton,
+    onDismiss,
+  } = props || {};
+
   const dialogProps: IDialogProps = {
     hidden: !visible,
     dialogContentProps: {
@@ -105,7 +121,7 @@ export const Dialog: FunctionComponent<DialogProps> = ({
         }
       : {};
 
-  return (
+  return visible ? (
     <FluentDialog {...dialogProps}>
       {choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}
       {textFieldProps && <TextField {...textFieldProps} />}
@@ -120,5 +136,7 @@ export const Dialog: FunctionComponent<DialogProps> = ({
         {secondaryButtonProps && <DefaultButton {...secondaryButtonProps} />}
       </DialogFooter>
     </FluentDialog>
+  ) : (
+    <></>
   );
 };

src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.test.tsx

@@ -1,105 +0,0 @@
-import React from "react";
-import { shallow, mount } from "enzyme";
-import { DefaultDirectoryDropdownComponent, DefaultDirectoryDropdownProps } from "./DefaultDirectoryDropdownComponent";
-import { Tenant } from "../../../Contracts/DataModels";
-
-const createBlankProps = (): DefaultDirectoryDropdownProps => {
-  return {
-    defaultDirectoryId: "",
-    directories: [],
-    onDefaultDirectoryChange: jest.fn(),
-  };
-};
-
-const createBlankDirectory = (): Tenant => {
-  return {
-    countryCode: "",
-    displayName: "",
-    domains: [],
-    id: "",
-    tenantId: "",
-  };
-};
-
-describe("test render", () => {
-  it("renders with no directories", () => {
-    const props = createBlankProps();
-
-    const wrapper = shallow(<DefaultDirectoryDropdownComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("renders with directories but no default", () => {
-    const props = createBlankProps();
-    const tenant1 = createBlankDirectory();
-    tenant1.displayName = "Microsoft";
-    tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
-    const tenant2 = createBlankDirectory();
-    tenant1.displayName = "Macrohard";
-    tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
-    props.directories = [tenant1, tenant2];
-
-    const wrapper = shallow(<DefaultDirectoryDropdownComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("renders with directories and default", () => {
-    const props = createBlankProps();
-    const tenant1 = createBlankDirectory();
-    tenant1.displayName = "Microsoft";
-    tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
-    const tenant2 = createBlankDirectory();
-    tenant1.displayName = "Macrohard";
-    tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
-    props.directories = [tenant1, tenant2];
-
-    props.defaultDirectoryId = "asdfghjklzxcvbnm9876543210";
-
-    const wrapper = shallow(<DefaultDirectoryDropdownComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("renders with directories and last visit default", () => {
-    const props = createBlankProps();
-    const tenant1 = createBlankDirectory();
-    tenant1.displayName = "Microsoft";
-    tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
-    const tenant2 = createBlankDirectory();
-    tenant1.displayName = "Macrohard";
-    tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
-    props.directories = [tenant1, tenant2];
-
-    props.defaultDirectoryId = "lastVisited";
-
-    const wrapper = shallow(<DefaultDirectoryDropdownComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-});
-
-describe("test function", () => {
-  it("on default directory change", () => {
-    const props = createBlankProps();
-    const tenant1 = createBlankDirectory();
-    tenant1.displayName = "Microsoft";
-    tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
-    const tenant2 = createBlankDirectory();
-    tenant1.displayName = "Macrohard";
-    tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
-    props.directories = [tenant1, tenant2];
-    props.defaultDirectoryId = "lastVisited";
-
-    const wrapper = mount(<DefaultDirectoryDropdownComponent {...props} />);
-
-    wrapper.find("div.defaultDirectoryDropdown").find("div.ms-Dropdown").simulate("click");
-    expect(wrapper.exists("div.ms-Callout-main")).toBe(true);
-    wrapper.find("button.ms-Dropdown-item").at(1).simulate("click");
-    expect(props.onDefaultDirectoryChange).toBeCalled();
-    expect(props.onDefaultDirectoryChange).toHaveBeenCalled();
-
-    wrapper.find("div.defaultDirectoryDropdown").find("div.ms-Dropdown").simulate("click");
-    expect(wrapper.exists("div.ms-Callout-main")).toBe(true);
-    wrapper.find("button.ms-Dropdown-item").at(0).simulate("click");
-    expect(props.onDefaultDirectoryChange).toBeCalled();
-    expect(props.onDefaultDirectoryChange).toHaveBeenCalled();
-  });
-});

src/Explorer/Controls/Directory/DirectoryComponentAdapter.tsx

@@ -1,36 +0,0 @@
-import * as ko from "knockout";
-import * as React from "react";
-import { DirectoryListComponent, DirectoryListProps } from "./DirectoryListComponent";
-import { DefaultDirectoryDropdownComponent, DefaultDirectoryDropdownProps } from "./DefaultDirectoryDropdownComponent";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-
-export class DirectoryComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<number>;
-
-  constructor(
-    private _dropdownProps: ko.Observable<DefaultDirectoryDropdownProps>,
-    private _listProps: ko.Observable<DirectoryListProps>
-  ) {
-    this._dropdownProps.subscribe(() => this.forceRender());
-    this._listProps.subscribe(() => this.forceRender());
-    this.parameters = ko.observable<number>(Date.now());
-  }
-
-  public renderComponent(): JSX.Element {
-    return (
-      <div>
-        <div className="directoryDropdownContainer">
-          <DefaultDirectoryDropdownComponent {...this._dropdownProps()} />
-        </div>
-        <div className="directoryDivider" />
-        <div className="directoryListContainer">
-          <DirectoryListComponent {...this._listProps()} />
-        </div>
-      </div>
-    );
-  }
-
-  public forceRender(): void {
-    window.requestAnimationFrame(() => this.parameters(Date.now()));
-  }
-}

src/Explorer/Controls/Directory/DirectoryListComponent.test.tsx

@@ -1,78 +0,0 @@
-import React from "react";
-import { shallow, mount } from "enzyme";
-import { DirectoryListComponent, DirectoryListProps } from "./DirectoryListComponent";
-import { Tenant } from "../../../Contracts/DataModels";
-
-const createBlankProps = (): DirectoryListProps => {
-  return {
-    selectedDirectoryId: undefined,
-    directories: [],
-    onNewDirectorySelected: jest.fn(),
-  };
-};
-
-const createBlankDirectory = (): Tenant => {
-  return {
-    countryCode: undefined,
-    displayName: undefined,
-    domains: [],
-    id: undefined,
-    tenantId: undefined,
-  };
-};
-
-describe("test render", () => {
-  it("renders with no directories", () => {
-    const props = createBlankProps();
-
-    const wrapper = shallow(<DirectoryListComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("renders with directories and selected", () => {
-    const props = createBlankProps();
-    const tenant1 = createBlankDirectory();
-    tenant1.displayName = "Microsoft";
-    tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
-    const tenant2 = createBlankDirectory();
-    tenant1.displayName = "Macrohard";
-    tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
-    props.directories = [tenant1, tenant2];
-
-    props.selectedDirectoryId = "asdfghjklzxcvbnm9876543210";
-
-    const wrapper = shallow(<DirectoryListComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("renders with filters", () => {
-    const props = createBlankProps();
-    const tenant1 = createBlankDirectory();
-    tenant1.displayName = "Microsoft";
-    tenant1.tenantId = "1234567890";
-    const tenant2 = createBlankDirectory();
-    tenant1.displayName = "Macrohard";
-    tenant1.tenantId = "9876543210";
-    props.directories = [tenant1, tenant2];
-    props.selectedDirectoryId = "9876543210";
-
-    const wrapper = mount(<DirectoryListComponent {...props} />);
-    wrapper.find("input.ms-TextField-field").simulate("change", { target: { value: "Macro" } });
-    expect(wrapper).toMatchSnapshot();
-  });
-});
-
-describe("test function", () => {
-  it("on new directory selected", () => {
-    const props = createBlankProps();
-    const tenant1 = createBlankDirectory();
-    tenant1.displayName = "Microsoft";
-    tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
-    props.directories = [tenant1];
-
-    const wrapper = mount(<DirectoryListComponent {...props} />);
-    wrapper.find("button.directoryListButton").simulate("click");
-    expect(props.onNewDirectorySelected).toBeCalled();
-    expect(props.onNewDirectorySelected).toHaveBeenCalled();
-  });
-});

src/Explorer/Controls/Directory/DirectoryListComponent.tsx

@@ -1,126 +0,0 @@
-import {
-  DefaultButton,
-  IButtonProps,
-  ITextFieldProps,
-  List,
-  ScrollablePane,
-  Sticky,
-  StickyPositionType,
-  TextField,
-} from "@fluentui/react";
-import * as React from "react";
-import _ from "underscore";
-import { Tenant } from "../../../Contracts/DataModels";
-
-export interface DirectoryListProps {
-  directories: Array<Tenant>;
-  selectedDirectoryId: string;
-  onNewDirectorySelected: (newDirectory: Tenant) => void;
-}
-
-export interface DirectoryListComponentState {
-  filterText: string;
-}
-
-// onRenderCell is not called when selectedDirectoryId changed, so add a selected state to force render
-interface ListTenant extends Tenant {
-  selected?: boolean;
-}
-
-export class DirectoryListComponent extends React.Component<DirectoryListProps, DirectoryListComponentState> {
-  constructor(props: DirectoryListProps) {
-    super(props);
-
-    this.state = {
-      filterText: "",
-    };
-  }
-
-  public render(): JSX.Element {
-    const { directories: originalItems, selectedDirectoryId } = this.props;
-    const { filterText } = this.state;
-    const filteredItems =
-      originalItems && originalItems.length && filterText
-        ? originalItems.filter(
-            (directory) =>
-              directory.displayName &&
-              directory.displayName.toLowerCase().indexOf(filterText && filterText.toLowerCase()) >= 0
-          )
-        : originalItems;
-    const filteredItemsSelected = filteredItems.map((t) => {
-      let tenant: ListTenant = t;
-      tenant.selected = t.tenantId === selectedDirectoryId;
-      return tenant;
-    });
-
-    const textFieldProps: ITextFieldProps = {
-      className: "directoryListFilterTextBox",
-      placeholder: "Filter by directory name",
-      onChange: this._onFilterChanged,
-      ariaLabel: "Directory filter text box",
-    };
-
-    // TODO: add magnify glass to search bar with onRenderSuffix
-    return (
-      <ScrollablePane data-is-scrollable="true">
-        <Sticky stickyPosition={StickyPositionType.Header}>
-          <TextField {...textFieldProps} />
-        </Sticky>
-        <List items={filteredItemsSelected} onRenderCell={this._onRenderCell} />
-      </ScrollablePane>
-    );
-  }
-
-  private _onFilterChanged = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text?: string): void => {
-    this.setState({
-      filterText: text,
-    });
-  };
-
-  private _onRenderCell = (directory: ListTenant): JSX.Element => {
-    const buttonProps: IButtonProps = {
-      disabled: directory.selected || false,
-      className: "directoryListButton",
-      onClick: this._onNewDirectoryClick,
-      styles: {
-        root: {
-          backgroundColor: "transparent",
-          height: "auto",
-          borderBottom: "1px solid #ccc",
-          padding: "1px 0",
-          width: "100%",
-        },
-        rootDisabled: {
-          backgroundColor: "#f1f1f8",
-        },
-        rootHovered: {
-          backgroundColor: "rgba(85,179,255,.1)",
-        },
-        flexContainer: {
-          height: "auto",
-          justifyContent: "flex-start",
-        },
-      },
-    };
-
-    return (
-      <DefaultButton {...buttonProps}>
-        <div className="directoryListItem" data-is-focusable={true}>
-          <div className="directoryListItemName">{directory.displayName}</div>
-          <div className="directoryListItemId">{directory.tenantId}</div>
-        </div>
-      </DefaultButton>
-    );
-  };
-
-  private _onNewDirectoryClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
-    if (!e || !e.currentTarget) {
-      return;
-    }
-    const buttonElement = e.currentTarget;
-    const selectedDirectoryId = buttonElement.getElementsByClassName("directoryListItemId")[0].textContent;
-    const selectedDirectory = _.find(this.props.directories, (d) => d.tenantId === selectedDirectoryId);
-
-    this.props.onNewDirectorySelected(selectedDirectory);
-  };
-}

src/Explorer/Controls/Directory/__snapshots__/DefaultDirectoryDropdownComponent.test.tsx.snap

@@ -1,93 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test render renders with directories and default 1`] = `
-<Dropdown
-  className="defaultDirectoryDropdown"
-  defaultSelectedKey="asdfghjklzxcvbnm9876543210"
-  label="Set your default directory"
-  onChange={[Function]}
-  options={
-    Array [
-      Object {
-        "key": "lastVisited",
-        "text": "Sign in to your last visited directory",
-      },
-      Object {
-        "key": "asdfghjklzxcvbnm9876543210",
-        "text": "Macrohard(asdfghjklzxcvbnm9876543210)",
-      },
-      Object {
-        "key": "",
-        "text": "()",
-      },
-    ]
-  }
-/>
-`;
-
-exports[`test render renders with directories and last visit default 1`] = `
-<Dropdown
-  className="defaultDirectoryDropdown"
-  defaultSelectedKey="lastVisited"
-  label="Set your default directory"
-  onChange={[Function]}
-  options={
-    Array [
-      Object {
-        "key": "lastVisited",
-        "text": "Sign in to your last visited directory",
-      },
-      Object {
-        "key": "asdfghjklzxcvbnm9876543210",
-        "text": "Macrohard(asdfghjklzxcvbnm9876543210)",
-      },
-      Object {
-        "key": "",
-        "text": "()",
-      },
-    ]
-  }
-/>
-`;
-
-exports[`test render renders with directories but no default 1`] = `
-<Dropdown
-  className="defaultDirectoryDropdown"
-  defaultSelectedKey="lastVisited"
-  label="Set your default directory"
-  onChange={[Function]}
-  options={
-    Array [
-      Object {
-        "key": "lastVisited",
-        "text": "Sign in to your last visited directory",
-      },
-      Object {
-        "key": "asdfghjklzxcvbnm9876543210",
-        "text": "Macrohard(asdfghjklzxcvbnm9876543210)",
-      },
-      Object {
-        "key": "",
-        "text": "()",
-      },
-    ]
-  }
-/>
-`;
-
-exports[`test render renders with no directories 1`] = `
-<Dropdown
-  className="defaultDirectoryDropdown"
-  defaultSelectedKey="lastVisited"
-  label="Set your default directory"
-  onChange={[Function]}
-  options={
-    Array [
-      Object {
-        "key": "lastVisited",
-        "text": "Sign in to your last visited directory",
-      },
-    ]
-  }
-/>
-`;

src/Explorer/Controls/DynamicList/DynamicList.test.ts

@@ -1,64 +0,0 @@
-import * as ko from "knockout";
-import { DynamicListComponent, DynamicListParams, DynamicListItem } from "./DynamicListComponent";
-
-const $ = (selector: string) => document.querySelector(selector) as HTMLElement;
-
-function buildComponent(buttonOptions: any) {
-  document.body.innerHTML = DynamicListComponent.template as any;
-  const vm = new DynamicListComponent.viewModel(buttonOptions);
-  ko.applyBindings(vm);
-}
-
-describe("Dynamic List Component", () => {
-  const mockPlaceHolder = "Write here";
-  const mockButton = "Add something";
-  const mockValue = "/someText";
-  const mockAriaLabel = "Add ariaLabel";
-  const items: ko.ObservableArray<DynamicListItem> = ko.observableArray<DynamicListItem>();
-
-  function buildListOptions(
-    items: ko.ObservableArray<DynamicListItem>,
-    placeholder?: string,
-    mockButton?: string
-  ): DynamicListParams {
-    return {
-      placeholder: placeholder,
-      listItems: items,
-      buttonText: mockButton,
-      ariaLabel: mockAriaLabel,
-    };
-  }
-
-  afterEach(() => {
-    ko.cleanNode(document);
-  });
-
-  describe("Rendering", () => {
-    it("should display button text", () => {
-      const params = buildListOptions(items, mockPlaceHolder, mockButton);
-      buildComponent(params);
-      expect($(".dynamicListItemAdd").textContent).toContain(mockButton);
-    });
-  });
-
-  describe("Behavior", () => {
-    it("should add items to the list", () => {
-      const params = buildListOptions(items, mockPlaceHolder, mockButton);
-      buildComponent(params);
-      $(".dynamicListItemAdd").click();
-      expect(items().length).toBe(1);
-      const input = document.getElementsByClassName("dynamicListItem").item(0).children[0];
-      input.setAttribute("value", mockValue);
-      input.dispatchEvent(new Event("change"));
-      input.dispatchEvent(new Event("blur"));
-      expect(items()[0].value()).toBe(mockValue);
-    });
-
-    it("should remove items from the list", () => {
-      const params = buildListOptions(items, mockPlaceHolder);
-      buildComponent(params);
-      $(".dynamicListItemDelete").click();
-      expect(items().length).toBe(0);
-    });
-  });
-});

src/Explorer/Controls/DynamicList/DynamicListComponent.less

@@ -1,59 +0,0 @@
-@import "../../../../less/Common/Constants";
-
-.dynamicList {
-    width: 100%;
-
-    .dynamicListContainer {
-        .dynamicListItem {
-            justify-content: space-around;
-            margin-bottom: @MediumSpace;
-
-            input {
-                width: @newCollectionPaneInputWidth;
-                margin: auto;
-                font-size: @mediumFontSize;
-                padding: @SmallSpace @DefaultSpace;
-                color: @BaseDark;
-            }
-
-            .dynamicListItemDelete {
-                padding: @SmallSpace @SmallSpace @DefaultSpace;
-                margin-left: @SmallSpace;
-
-                &:hover {
-                    .hover();
-                }
-
-                &:active {
-                    .active();
-                }
-
-                img {
-                    .dataExplorerIcons();
-                }
-            }
-        }
-    }
-
-    .dynamicListItemNew {
-        margin-top: @LargeSpace;
-
-        .dynamicListItemAdd {
-            padding: @DefaultSpace;
-            cursor: pointer;
-
-            &:hover {
-                .hover();
-            }
-
-            &:active {
-                .active();
-            }
-
-            img {
-                .dataExplorerIcons();
-                margin: 0px @SmallSpace @SmallSpace 0px; 
-            }
-        }
-    }
-}

src/Explorer/Controls/DynamicList/DynamicListComponent.ts

@@ -1,117 +0,0 @@
-/**
- * Dynamic list:
- *
- * Creates a list of dynamic inputs that can be populated and deleted.
- *
- * How to use in your markup:
- * <dynamic-list params="{ listItems: anObservableArrayOfDynamicListItem, placeholder: 'Text to display in placeholder',  ariaLabel: 'Text for aria-label', buttonText: 'Add item' }">
- * </dynamic-list>
- *
- */
-
-import * as ko from "knockout";
-import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
-import { KeyCodes } from "../../../Common/Constants";
-import template from "./dynamic-list.html";
-
-/**
- * Parameters for this component
- */
-export interface DynamicListParams {
-  /**
-   * Observable list of items to update
-   */
-  listItems: ko.ObservableArray<DynamicListItem>;
-
-  /**
-   * Placeholder text to use on inputs
-   */
-  placeholder?: string;
-
-  /**
-   * Text to use as aria-label
-   */
-  ariaLabel: string;
-
-  /**
-   * Text for the button to add items
-   */
-  buttonText?: string;
-
-  /**
-   * Callback triggered when the template is bound to the component (for testing purposes)
-   */
-  onTemplateReady?: () => void;
-}
-
-/**
- * Item in the dynamic list
- */
-export interface DynamicListItem {
-  value: ko.Observable<string>;
-}
-
-export class DynamicListViewModel extends WaitsForTemplateViewModel {
-  public placeholder: string;
-  public ariaLabel: string;
-  public buttonText: string;
-  public newItem: ko.Observable<string>;
-  public isTemplateReady: ko.Observable<boolean>;
-  public listItems: ko.ObservableArray<DynamicListItem>;
-
-  public constructor(options: DynamicListParams) {
-    super();
-    super.onTemplateReady((isTemplateReady: boolean) => {
-      if (isTemplateReady && options.onTemplateReady) {
-        options.onTemplateReady();
-      }
-    });
-
-    const params: DynamicListParams = options;
-    const paramsPlaceholder: string = params.placeholder;
-    const paramsButtonText: string = params.buttonText;
-    this.placeholder = paramsPlaceholder || "Write a value";
-    this.ariaLabel = "Unique keys";
-    this.buttonText = paramsButtonText || "Add item";
-    this.listItems = params.listItems || ko.observableArray<DynamicListItem>();
-    this.newItem = ko.observable("");
-  }
-
-  public removeItem = (data: any, event: MouseEvent | KeyboardEvent): void => {
-    const context = ko.contextFor(event.target as Node);
-    this.listItems.splice(context.$index(), 1);
-    document.getElementById("addUniqueKeyBtn").focus();
-  };
-
-  public onRemoveItemKeyPress = (data: any, event: KeyboardEvent, source: any): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.removeItem(data, event);
-      (document.querySelector(".dynamicListItem:last-of-type input") as HTMLElement).focus();
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  };
-
-  public addItem(): void {
-    this.listItems.push({ value: ko.observable("") });
-    (document.querySelector(".dynamicListItem:last-of-type input") as HTMLElement).focus();
-  }
-
-  public onAddItemKeyPress = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.addItem();
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  };
-}
-
-/**
- * Helper class for ko component registration
- */
-export const DynamicListComponent = {
-  viewModel: DynamicListViewModel,
-  template,
-};

src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx

@@ -6,9 +6,10 @@
  *   typeaheadOverrideOptions: { dynamic:false }
  *
  */
+import "jquery-typeahead";
 import * as React from "react";
-import "./InputTypeahead.less";
 import { KeyCodes } from "../../../Common/Constants";
+import "./InputTypeahead.less";
 
 export interface Item {
   caption: string;

src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.test.tsx

@@ -1,12 +1,12 @@
 jest.mock("../../../../Juno/JunoClient");
 import { shallow } from "enzyme";
 import React from "react";
-import { CodeOfConductComponent, CodeOfConductComponentProps } from ".";
 import { HttpStatusCodes } from "../../../../Common/Constants";
 import { JunoClient } from "../../../../Juno/JunoClient";
+import { CodeOfConduct, CodeOfConductProps } from "./CodeOfConduct";
 
-describe("CodeOfConductComponent", () => {
-  let codeOfConductProps: CodeOfConductComponentProps;
+describe("CodeOfConduct", () => {
+  let codeOfConductProps: CodeOfConductProps;
 
   beforeEach(() => {
     const junoClient = new JunoClient();
@@ -21,12 +21,12 @@ describe("CodeOfConductComponent", () => {
   });
 
   it("renders", () => {
-    const wrapper = shallow(<CodeOfConductComponent {...codeOfConductProps} />);
+    const wrapper = shallow(<CodeOfConduct {...codeOfConductProps} />);
     expect(wrapper).toMatchSnapshot();
   });
 
   it("onAcceptedCodeOfConductCalled", async () => {
-    const wrapper = shallow(<CodeOfConductComponent {...codeOfConductProps} />);
+    const wrapper = shallow(<CodeOfConduct {...codeOfConductProps} />);
     wrapper.find(".genericPaneSubmitBtn").first().simulate("click");
     await Promise.resolve();
     expect(codeOfConductProps.onAcceptCodeOfConduct).toBeCalled();

src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.tsx

@@ -6,15 +6,15 @@ import { JunoClient } from "../../../../Juno/JunoClient";
 import { Action } from "../../../../Shared/Telemetry/TelemetryConstants";
 import { trace, traceFailure, traceStart, traceSuccess } from "../../../../Shared/Telemetry/TelemetryProcessor";
 
-export interface CodeOfConductComponentProps {
+export interface CodeOfConductProps {
   junoClient: JunoClient;
   onAcceptCodeOfConduct: (result: boolean) => void;
 }
 
-export const CodeOfConductComponent: FunctionComponent<CodeOfConductComponentProps> = ({
+export const CodeOfConduct: FunctionComponent<CodeOfConductProps> = ({
   junoClient,
   onAcceptCodeOfConduct,
-}: CodeOfConductComponentProps) => {
+}: CodeOfConductProps) => {
   const descriptionPara1 = "Azure Cosmos DB Notebook Gallery - Code of Conduct";
   const descriptionPara2 = "The notebook public gallery contains notebook samples shared by users of Azure Cosmos DB.";
   const descriptionPara3 = "In order to view and publish your samples to the gallery, you must accept the ";
@@ -47,7 +47,7 @@ export const CodeOfConductComponent: FunctionComponent<CodeOfConductComponentPro
         startKey
       );
 
-      handleError(error, "CodeOfConductComponent/acceptCodeOfConduct", "Failed to accept code of conduct");
+      handleError(error, "CodeOfConduct/acceptCodeOfConduct", "Failed to accept code of conduct");
     }
   };
 

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CodeOfConductComponent renders 1`] = `
+exports[`CodeOfConduct renders 1`] = `
 <Stack
   tokens={
     Object {

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/GalleryViewerComponent.tsx

@@ -28,9 +28,8 @@ import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryCons
 import { trace } from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
 import Explorer from "../../Explorer";
-import { Dialog, DialogProps } from "../Dialog";
 import { GalleryCardComponent, GalleryCardComponentProps } from "./Cards/GalleryCardComponent";
-import { CodeOfConductComponent } from "./CodeOfConductComponent";
+import { CodeOfConduct } from "./CodeOfConduct/CodeOfConduct";
 import "./GalleryViewerComponent.less";
 import { InfoComponent } from "./InfoComponent/InfoComponent";
 
@@ -68,7 +67,6 @@ interface GalleryViewerComponentState {
   selectedTab: GalleryTab;
   sortBy: SortBy;
   searchText: string;
-  dialogProps: DialogProps;
   isCodeOfConductAccepted: boolean;
   isFetchingPublishedNotebooks: boolean;
   isFetchingFavouriteNotebooks: boolean;
@@ -119,7 +117,6 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
       selectedTab: props.selectedTab,
       sortBy: props.sortBy,
       searchText: props.searchText,
-      dialogProps: undefined,
       isCodeOfConductAccepted: undefined,
       isFetchingFavouriteNotebooks: true,
       isFetchingPublishedNotebooks: true,
@@ -187,8 +184,6 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     return (
       <div className="galleryContainer">
         <Pivot {...pivotProps}>{pivotItems}</Pivot>
-
-        {this.state.dialogProps && <Dialog {...this.state.dialogProps} />}
       </div>
     );
   }
@@ -372,7 +367,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
         {acceptedCodeOfConduct === false && (
           <Overlay isDarkThemed>
             <div className="publicGalleryTabOverlayContent">
-              <CodeOfConductComponent
+              <CodeOfConduct
                 junoClient={this.props.junoClient}
                 onAcceptCodeOfConduct={(result: boolean) => {
                   this.setState({ isCodeOfConductAccepted: result });

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -1,25 +1,25 @@
 /**
  * Wrapper around Notebook Viewer Read only content
  */
+import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "@fluentui/react";
 import { Notebook } from "@nteract/commutable";
 import { createContentRef } from "@nteract/core";
-import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "@fluentui/react";
 import * as React from "react";
 import { contents } from "rx-jupyter";
+import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
 import { IGalleryItem, JunoClient } from "../../../Juno/JunoClient";
+import { SessionStorageUtility } from "../../../Shared/StorageUtility";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
+import { DialogHost } from "../../../Utils/GalleryUtils";
+import Explorer from "../../Explorer";
 import { NotebookClientV2 } from "../../Notebook/NotebookClientV2";
 import { NotebookComponentBootstrapper } from "../../Notebook/NotebookComponent/NotebookComponentBootstrapper";
 import NotebookReadOnlyRenderer from "../../Notebook/NotebookRenderer/NotebookReadOnlyRenderer";
-import { Dialog, DialogProps, TextFieldProps } from "../Dialog";
+import { Dialog, TextFieldProps, useDialog } from "../Dialog";
 import { NotebookMetadataComponent } from "./NotebookMetadataComponent";
 import "./NotebookViewerComponent.less";
-import Explorer from "../../Explorer";
-import { SessionStorageUtility } from "../../../Shared/StorageUtility";
-import { DialogHost } from "../../../Utils/GalleryUtils";
-import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
-import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 
 export interface NotebookViewerComponentProps {
   container?: Explorer;
@@ -38,7 +38,6 @@ interface NotebookViewerComponentState {
   content: Notebook;
   galleryItem?: IGalleryItem;
   isFavorite?: boolean;
-  dialogProps: DialogProps;
   showProgressBar: boolean;
 }
 
@@ -71,7 +70,6 @@ export class NotebookViewerComponent
       content: undefined,
       galleryItem: props.galleryItem,
       isFavorite: props.isFavorite,
-      dialogProps: undefined,
       showProgressBar: true,
     };
 
@@ -167,8 +165,7 @@ export class NotebookViewerComponent
           hideInputs: this.props.hideInputs,
           hidePrompts: this.props.hidePrompts,
         })}
-
-        {this.state.dialogProps && <Dialog {...this.state.dialogProps} />}
+        <Dialog />
       </div>
     );
   }
@@ -194,7 +191,6 @@ export class NotebookViewerComponent
     };
   }
 
-  // DialogHost
   showOkModalDialog(
     title: string,
     msg: string,
@@ -202,25 +198,21 @@ export class NotebookViewerComponent
     onOk: () => void,
     progressIndicatorProps?: IProgressIndicatorProps
   ): void {
-    this.setState({
-      dialogProps: {
-        isModal: true,
-        visible: true,
-        title,
-        subText: msg,
-        primaryButtonText: okLabel,
-        onPrimaryButtonClick: () => {
-          this.setState({ dialogProps: undefined });
-          onOk && onOk();
-        },
-        secondaryButtonText: undefined,
-        onSecondaryButtonClick: undefined,
-        progressIndicatorProps,
+    useDialog.getState().openDialog({
+      isModal: true,
+      title,
+      subText: msg,
+      primaryButtonText: okLabel,
+      onPrimaryButtonClick: () => {
+        useDialog.getState().closeDialog();
+        onOk && onOk();
       },
+      secondaryButtonText: undefined,
+      onSecondaryButtonClick: undefined,
+      progressIndicatorProps,
     });
   }
 
-  // DialogHost
   showOkCancelModalDialog(
     title: string,
     msg: string,
@@ -233,27 +225,24 @@ export class NotebookViewerComponent
     textFieldProps?: TextFieldProps,
     primaryButtonDisabled?: boolean
   ): void {
-    this.setState({
-      dialogProps: {
-        isModal: true,
-        visible: true,
-        title,
-        subText: msg,
-        primaryButtonText: okLabel,
-        secondaryButtonText: cancelLabel,
-        onPrimaryButtonClick: () => {
-          this.setState({ dialogProps: undefined });
-          onOk && onOk();
-        },
-        onSecondaryButtonClick: () => {
-          this.setState({ dialogProps: undefined });
-          onCancel && onCancel();
-        },
-        progressIndicatorProps,
-        choiceGroupProps,
-        textFieldProps,
-        primaryButtonDisabled,
+    useDialog.getState().openDialog({
+      isModal: true,
+      title,
+      subText: msg,
+      primaryButtonText: okLabel,
+      secondaryButtonText: cancelLabel,
+      onPrimaryButtonClick: () => {
+        useDialog.getState().closeDialog();
+        onOk && onOk();
       },
+      onSecondaryButtonClick: () => {
+        useDialog.getState().closeDialog();
+        onCancel && onCancel();
+      },
+      progressIndicatorProps,
+      choiceGroupProps,
+      textFieldProps,
+      primaryButtonDisabled,
     });
   }
 

src/Explorer/Controls/RadioSwitchComponent/RadioSwitchComponent.less

@@ -1,16 +0,0 @@
-@import "../../../../less/Common/Constants.less";
-
-.radioSwitchComponent {
-  cursor: pointer;
-  display: flex;
-
-  &>span:nth-child(n+2) {
-    margin-left: 10px;
-  }
-
-  .caption {
-    color: @BaseDark;
-    padding-left: @SmallSpace;
-    vertical-align: top;
-  }
-}

src/Explorer/Controls/RadioSwitchComponent/RadioSwitchComponent.tsx

@@ -1,51 +0,0 @@
-/**
- * Horizontal switch component
- */
-
-import { Icon } from "@fluentui/react";
-import * as React from "react";
-import { NormalizedEventKey } from "../../../Common/Constants";
-import "./RadioSwitchComponent.less";
-
-export interface Choice {
-  key: string;
-  onSelect: () => void;
-  label: string;
-}
-
-export interface RadioSwitchComponentProps {
-  choices: Choice[];
-  selectedKey: string;
-  onSelectionKeyChange?: (newValue: string) => void;
-}
-
-export class RadioSwitchComponent extends React.Component<RadioSwitchComponentProps> {
-  public render(): JSX.Element {
-    return (
-      <div className="radioSwitchComponent">
-        {this.props.choices.map((choice: Choice) => (
-          <span
-            tabIndex={0}
-            key={choice.key}
-            onClick={() => this.onSelect(choice)}
-            onKeyPress={(event) => this.onKeyPress(event, choice)}
-          >
-            <Icon iconName={this.props.selectedKey === choice.key ? "RadioBtnOn" : "RadioBtnOff"} />
-            <span className="caption">{choice.label}</span>
-          </span>
-        ))}
-      </div>
-    );
-  }
-
-  private onSelect(choice: Choice): void {
-    this.props.onSelectionKeyChange && this.props.onSelectionKeyChange(choice.key);
-    choice.onSelect();
-  }
-
-  private onKeyPress(event: React.KeyboardEvent<HTMLSpanElement>, choice: Choice): void {
-    if (event.key === NormalizedEventKey.Enter || event.key === NormalizedEventKey.Space) {
-      this.onSelect(choice);
-    }
-  }
-}

src/Explorer/Controls/ResizeSensorReactComponent/ResizeSensorComponent.tsx

@@ -1,45 +0,0 @@
-/**
- * Generic abstract React component that senses its dimensions.
- * It updates its state and re-renders if dimensions change.
- */
-
-import * as React from "react";
-import * as ResizeSensor from "css-element-queries/src/ResizeSensor";
-
-export abstract class ResizeSensorComponent<P, S> extends React.Component<P, S> {
-  private isSensing: boolean = false;
-  private resizeSensor: any;
-
-  public constructor(props: P) {
-    super(props);
-  }
-
-  protected abstract onDimensionsChanged(width: number, height: number): void;
-  protected abstract getSensorTarget(): HTMLElement;
-
-  public componentDidUpdate(): void {
-    if (this.isSensing) {
-      return;
-    }
-
-    const bar = this.getSensorTarget();
-    if (bar.clientWidth > 0 || bar.clientHeight > 0) {
-      const oldPosition = bar.style.position;
-      // TODO Find a better way to use constructor
-      this.resizeSensor = new (ResizeSensor as any)(bar, () => {
-        this.onDimensionsChanged(bar.clientWidth, bar.clientHeight);
-      });
-      this.isSensing = true;
-
-      // ResizeSensor.js sets position to 'relative' which makes the dropdown menu appear clipped.
-      // Undoing doesn't seem to affect resize sensing functionality.
-      bar.style.position = oldPosition;
-    }
-  }
-
-  public componentWillUnmount(): void {
-    if (!!this.resizeSensor) {
-      this.resizeSensor.detach();
-    }
-  }
-}

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -14,7 +14,7 @@ import * as ViewModels from "../../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../../UserContext";
-import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
+import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";

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

@@ -1,12 +1,12 @@
 import { shallow } from "enzyme";
 import React from "react";
-import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./IndexingPolicyComponent";
 import * as DataModels from "../../../../Contracts/DataModels";
+import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./IndexingPolicyComponent";
 
 describe("IndexingPolicyComponent", () => {
   const initialIndexingPolicyContent: DataModels.IndexingPolicy = {
     automatic: false,
-    indexingMode: "",
+    indexingMode: "consistent",
     includedPaths: [],
     excludedPaths: [],
   };

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

@@ -1,8 +1,8 @@
 import { shallow } from "enzyme";
 import React from "react";
+import { renderToString } from "react-dom/server";
 import { MongoIndexTypes, MongoNotificationMessage, MongoNotificationType } from "../../SettingsUtils";
 import { MongoIndexingPolicyComponent, MongoIndexingPolicyComponentProps } from "./MongoIndexingPolicyComponent";
-import { renderToString } from "react-dom/server";
 
 describe("MongoIndexingPolicyComponent", () => {
   const baseProps: MongoIndexingPolicyComponentProps = {
@@ -84,7 +84,7 @@ describe("MongoIndexingPolicyComponent", () => {
     ];
 
     test.each(cases)(
-      "",
+      "test Mongo Indexing Policy",
       (
         notification: MongoNotificationMessage,
         indexToDropIsPresent: boolean,

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

@@ -1,44 +1,44 @@
-import * as React from "react";
 import {
   DetailsList,
   DetailsListLayoutMode,
-  Stack,
-  IconButton,
-  Text,
-  SelectionMode,
   IColumn,
+  IconButton,
   MessageBar,
   MessageBarType,
+  SelectionMode,
+  Separator,
   Spinner,
   SpinnerSize,
-  Separator,
+  Stack,
+  Text,
 } from "@fluentui/react";
+import * as React from "react";
+import { MongoIndex } from "../../../../../Utils/arm/generatedClients/cosmos/types";
+import { CollapsibleSectionComponent } from "../../../CollapsiblePanel/CollapsibleSectionComponent";
 import {
   addMongoIndexStackProps,
-  customDetailsListStyles,
-  mongoIndexingPolicyDisclaimer,
-  mediumWidthStackStyles,
-  subComponentStackProps,
   createAndAddMongoIndexStackProps,
-  separatorStyles,
+  customDetailsListStyles,
   indexingPolicynUnsavedWarningMessage,
   infoAndToolTipTextStyle,
-  onRenderRow,
+  mediumWidthStackStyles,
   mongoCompoundIndexNotSupportedMessage,
+  mongoIndexingPolicyDisclaimer,
+  onRenderRow,
+  separatorStyles,
+  subComponentStackProps,
 } from "../../SettingsRenderUtils";
-import { MongoIndex } from "../../../../../Utils/arm/generatedClients/2020-04-01/types";
 import {
-  MongoIndexTypes,
   AddMongoIndexProps,
-  MongoIndexIdField,
-  MongoNotificationType,
   getMongoIndexType,
   getMongoIndexTypeText,
   isIndexTransforming,
+  MongoIndexIdField,
+  MongoIndexTypes,
+  MongoNotificationType,
 } from "../../SettingsUtils";
-import { AddMongoIndexComponent } from "./AddMongoIndexComponent";
-import { CollapsibleSectionComponent } from "../../../CollapsiblePanel/CollapsibleSectionComponent";
 import { IndexingPolicyRefreshComponent } from "../IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
+import { AddMongoIndexComponent } from "./AddMongoIndexComponent";
 
 export interface MongoIndexingPolicyComponentProps {
   mongoIndexes: MongoIndex[];

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

@@ -202,10 +202,12 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   }
 
   private getFreeTierInfoMessage(): JSX.Element {
+    const freeTierLimits = SharedConstants.FreeTierLimits;
     return (
       <Text>
-        With free tier, you will get the first 400 RU/s and 5 GB of storage in this account for free. To keep your
-        account free, keep the total RU/s across all resources in the account to 400 RU/s.
+        With free tier, you will get the first {freeTierLimits.RU} RU/s and {freeTierLimits.Storage} GB of storage in
+        this account for free. To keep your account free, keep the total RU/s across all resources in the account to{" "}
+        {freeTierLimits.RU} RU/s.
         <Link
           href="https://docs.microsoft.com/en-us/azure/cosmos-db/understand-your-bill#billing-examples-with-free-tier-accounts"
           target="_blank"

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

@@ -155,7 +155,9 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     this.state = {
       spendAckChecked: this.props.spendAckChecked,
       exceedFreeTierThroughput:
-        this.props.isFreeTierAccount && !this.props.isAutoPilotSelected && this.props.throughput > 400,
+        this.props.isFreeTierAccount &&
+        !this.props.isAutoPilotSelected &&
+        this.props.throughput > SharedConstants.FreeTierLimits.RU,
     };
 
     this.step = this.props.step ?? ThroughputInputAutoPilotV3Component.defaultStep;
@@ -441,7 +443,9 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     if (this.overrideWithAutoPilotSettings()) {
       this.props.onMaxAutoPilotThroughputChange(newThroughput);
     } else {
-      this.setState({ exceedFreeTierThroughput: this.props.isFreeTierAccount && newThroughput > 400 });
+      this.setState({
+        exceedFreeTierThroughput: this.props.isFreeTierAccount && newThroughput > SharedConstants.FreeTierLimits.RU,
+      });
       this.props.onThroughputChange(newThroughput);
     }
   };
@@ -581,9 +585,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
           messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
           styles={messageBarStyles}
         >
-          {
-            "Billing will apply if you provision more than 400 RU/s of manual throughput, or if the resource scales beyond 400 RU/s with autoscale."
-          }
+          {`Billing will apply if you provision more than ${SharedConstants.FreeTierLimits.RU} RU/s of manual throughput, or if the resource scales beyond ${SharedConstants.FreeTierLimits.RU} RU/s with autoscale.`}
         </MessageBar>
       )}
       {this.props.getThroughputWarningMessage() && (

src/Explorer/Controls/Settings/SettingsUtils.tsx

@@ -1,7 +1,7 @@
-import * as ViewModels from "../../../Contracts/ViewModels";
-import * as DataModels from "../../../Contracts/DataModels";
 import * as Constants from "../../../Common/Constants";
-import { MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 
 const zeroValue = 0;
 export type isDirtyTypes = boolean | string | number | DataModels.IndexingPolicy;

src/Explorer/Controls/Settings/TestUtils.tsx

@@ -1,7 +1,7 @@
+import ko from "knockout";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import Explorer from "../../Explorer";
-import ko from "knockout";
 
 export const container = new Explorer();
 
@@ -13,7 +13,7 @@ export const collection = {
   analyticalStorageTtl: ko.observable<number>(undefined),
   indexingPolicy: ko.observable<DataModels.IndexingPolicy>({
     automatic: true,
-    indexingMode: "default",
+    indexingMode: "consistent",
     includedPaths: [],
     excludedPaths: [],
   }),

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -187,9 +187,8 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           <TooltipHost
             directionalHint={DirectionalHint.topLeftEdge}
             content={
-              showFreeTierExceedThroughputTooltip &&
-              throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs400
-                ? "The first 400 RU/s in this account are free. Billing will apply to any throughput beyond 400 RU/s."
+              showFreeTierExceedThroughputTooltip && throughput > SharedConstants.FreeTierLimits.RU
+                ? `The first ${SharedConstants.FreeTierLimits.RU} RU/s in this account are free. Billing will apply to any throughput beyond ${SharedConstants.FreeTierLimits.RU} RU/s.`
                 : undefined
             }
           >

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts

@@ -1,308 +0,0 @@
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import * as ko from "knockout";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import ThroughputInputComponentAutoscaleV3 from "./ThroughputInputComponentAutoscaleV3.html";
-import { KeyCodes } from "../../../Common/Constants";
-import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
-
-import { userContext } from "../../../UserContext";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-/**
- * Throughput Input:
- *
- * Creates a set of controls to input, sanitize and increase/decrease throughput
- *
- * How to use in your markup:
- * <throughput-input params="{ value: anObservableToHoldTheValue, minimum: anObservableWithMinimum, maximum: anObservableWithMaximum }">
- * </throughput-input>
- *
- */
-
-/**
- * Parameters for this component
- */
-export interface ThroughputInputParams {
-  /**
-   * Callback triggered when the template is bound to the component (for testing purposes)
-   */
-  onTemplateReady?: () => void;
-
-  /**
-   * Observable to bind the Throughput value to
-   */
-  value: ViewModels.Editable<number>;
-
-  /**
-   * Text to use as id for testing
-   */
-  testId: string;
-
-  /**
-   * Text to use as aria-label
-   */
-  ariaLabel?: ko.Observable<string>;
-
-  /**
-   * Minimum value in the range
-   */
-  minimum: ko.Observable<number>;
-
-  /**
-   * Maximum value in the range
-   */
-  maximum: ko.Observable<number>;
-
-  /**
-   * Step value for increase/decrease
-   */
-  step?: number;
-
-  /**
-   * Observable to bind the Throughput enabled status
-   */
-  isEnabled?: ko.Observable<boolean>;
-
-  /**
-   * Should show pricing controls
-   */
-  costsVisible: ko.Observable<boolean>;
-
-  /**
-   * RU price
-   */
-  requestUnitsUsageCost: ko.Computed<string>; // Our code assigns to ko.Computed, but unit test assigns to ko.Observable
-
-  /**
-   * State of the spending acknowledge checkbox
-   */
-  spendAckChecked?: ko.Observable<boolean>;
-
-  /**
-   * id of the spending acknowledge checkbox
-   */
-  spendAckId?: ko.Observable<string>;
-
-  /**
-   * spending acknowledge text
-   */
-  spendAckText?: ko.Observable<string>;
-
-  /**
-   * Show spending acknowledge controls
-   */
-  spendAckVisible?: ko.Observable<boolean>;
-
-  /**
-   * Display * to the left of the label
-   */
-  showAsMandatory: boolean;
-
-  /**
-   * If true, it will display a text to prompt users to use unlimited collections to go beyond max for fixed
-   */
-  isFixed: boolean;
-
-  /**
-   * Label of the provisioned throughut control
-   */
-  label: ko.Observable<string>;
-
-  /**
-   * Text of the info bubble for provisioned throughut control
-   */
-  infoBubbleText?: ko.Observable<string>;
-
-  /**
-   * Computed value that decides if value can exceed maximum allowable value
-   */
-  canExceedMaximumValue?: ko.Computed<boolean>;
-
-  /**
-   * CSS classes to apply on input element
-   */
-  cssClass?: string;
-
-  isAutoPilotSelected: ko.Observable<boolean>;
-  throughputAutoPilotRadioId: string;
-  throughputProvisionedRadioId: string;
-  throughputModeRadioName: string;
-  maxAutoPilotThroughputSet: ViewModels.Editable<number>;
-  autoPilotUsageCost: ko.Computed<string>;
-  overrideWithAutoPilotSettings: ko.Observable<boolean>;
-  overrideWithProvisionedThroughputSettings: ko.Observable<boolean>;
-  freeTierExceedThroughputTooltip?: ko.Observable<string>;
-  freeTierExceedThroughputWarning?: ko.Observable<string>;
-}
-
-export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
-  public ariaLabel: ko.Observable<string>;
-  public canExceedMaximumValue: ko.Computed<boolean>;
-  public step: ko.Computed<number>;
-  public testId: string;
-  public value: ViewModels.Editable<number>;
-  public minimum: ko.Observable<number>;
-  public maximum: ko.Observable<number>;
-  public isEnabled: ko.Observable<boolean>;
-  public cssClass: string;
-  public decreaseButtonAriaLabel: string;
-  public increaseButtonAriaLabel: string;
-  public costsVisible: ko.Observable<boolean>;
-  public requestUnitsUsageCost: ko.Computed<string>;
-  public spendAckChecked: ko.Observable<boolean>;
-  public spendAckId: ko.Observable<string>;
-  public spendAckText: ko.Observable<string>;
-  public spendAckVisible: ko.Observable<boolean>;
-  public showAsMandatory: boolean;
-  public infoBubbleText: string | ko.Observable<string>;
-  public label: ko.Observable<string>;
-  public isFixed: boolean;
-  public isAutoPilotSelected: ko.Observable<boolean>;
-  public throughputAutoPilotRadioId: string;
-  public throughputProvisionedRadioId: string;
-  public throughputModeRadioName: string;
-  public maxAutoPilotThroughputSet: ko.Observable<number>;
-  public autoPilotUsageCost: ko.Computed<string>;
-  public minAutoPilotThroughput: ko.Observable<number>;
-  public overrideWithAutoPilotSettings: ko.Observable<boolean>;
-  public overrideWithProvisionedThroughputSettings: ko.Observable<boolean>;
-  public isManualThroughputInputFieldRequired: ko.Computed<boolean>;
-  public isAutoscaleThroughputInputFieldRequired: ko.Computed<boolean>;
-  public freeTierExceedThroughputTooltip: ko.Observable<string>;
-  public freeTierExceedThroughputWarning: ko.Observable<string>;
-  public showFreeTierExceedThroughputTooltip: ko.Computed<boolean>;
-  public showFreeTierExceedThroughputWarning: ko.Computed<boolean>;
-
-  public constructor(options: ThroughputInputParams) {
-    super();
-    super.onTemplateReady((isTemplateReady: boolean) => {
-      if (isTemplateReady && options.onTemplateReady) {
-        options.onTemplateReady();
-      }
-    });
-
-    const params: ThroughputInputParams = options;
-    this.testId = params.testId || "ThroughputValue";
-    this.ariaLabel = ko.observable((params.ariaLabel && params.ariaLabel()) || "");
-    this.canExceedMaximumValue = params.canExceedMaximumValue || ko.computed(() => false);
-    this.isEnabled = params.isEnabled || ko.observable(true);
-    this.cssClass = params.cssClass || "textfontclr collid migration";
-    this.minimum = params.minimum;
-    this.maximum = params.maximum;
-    this.value = params.value;
-    this.costsVisible = options.costsVisible;
-    this.requestUnitsUsageCost = options.requestUnitsUsageCost;
-    this.spendAckChecked = options.spendAckChecked || ko.observable<boolean>(false);
-    this.spendAckId = options.spendAckId || ko.observable<string>();
-    this.spendAckText = options.spendAckText || ko.observable<string>();
-    this.spendAckVisible = options.spendAckVisible || ko.observable<boolean>(false);
-    this.showAsMandatory = !!options.showAsMandatory;
-    this.isFixed = !!options.isFixed;
-    this.infoBubbleText = options.infoBubbleText || ko.observable<string>();
-    this.label = options.label || ko.observable<string>();
-    this.isAutoPilotSelected = options.isAutoPilotSelected || ko.observable<boolean>(false);
-    this.isAutoPilotSelected.subscribe((value) => {
-      TelemetryProcessor.trace(Action.ToggleAutoscaleSetting, ActionModifiers.Mark, {
-        changedSelectedValueTo: value ? ActionModifiers.ToggleAutoscaleOn : ActionModifiers.ToggleAutoscaleOff,
-        dataExplorerArea: "Scale Tab V1",
-      });
-    });
-
-    this.throughputAutoPilotRadioId = options.throughputAutoPilotRadioId;
-    this.throughputProvisionedRadioId = options.throughputProvisionedRadioId;
-    this.throughputModeRadioName = options.throughputModeRadioName;
-    this.overrideWithAutoPilotSettings = options.overrideWithAutoPilotSettings || ko.observable<boolean>(false);
-    this.overrideWithProvisionedThroughputSettings =
-      options.overrideWithProvisionedThroughputSettings || ko.observable<boolean>(false);
-
-    this.maxAutoPilotThroughputSet =
-      options.maxAutoPilotThroughputSet || ko.observable<number>(AutoPilotUtils.minAutoPilotThroughput);
-    this.autoPilotUsageCost = options.autoPilotUsageCost;
-    this.minAutoPilotThroughput = ko.observable<number>(AutoPilotUtils.minAutoPilotThroughput);
-
-    this.step = ko.pureComputed(() => {
-      if (this.isAutoPilotSelected()) {
-        return AutoPilotUtils.autoPilotIncrementStep;
-      }
-      return params.step || ThroughputInputViewModel._defaultStep;
-    });
-    this.decreaseButtonAriaLabel = "Decrease throughput by " + this.step().toString();
-    this.increaseButtonAriaLabel = "Increase throughput by " + this.step().toString();
-    this.isManualThroughputInputFieldRequired = ko.pureComputed(() => this.isEnabled() && !this.isAutoPilotSelected());
-    this.isAutoscaleThroughputInputFieldRequired = ko.pureComputed(
-      () => this.isEnabled() && this.isAutoPilotSelected()
-    );
-
-    this.freeTierExceedThroughputTooltip = options.freeTierExceedThroughputTooltip || ko.observable<string>();
-    this.freeTierExceedThroughputWarning = options.freeTierExceedThroughputWarning || ko.observable<string>();
-    this.showFreeTierExceedThroughputTooltip = ko.pureComputed<boolean>(
-      () => !!this.freeTierExceedThroughputTooltip() && this.value() > 400
-    );
-
-    this.showFreeTierExceedThroughputWarning = ko.pureComputed<boolean>(
-      () => !!this.freeTierExceedThroughputWarning() && this.value() > 400
-    );
-  }
-
-  public decreaseThroughput() {
-    let offerThroughput: number = this._getSanitizedValue();
-
-    if (offerThroughput > this.minimum()) {
-      offerThroughput -= this.step();
-      if (offerThroughput < this.minimum()) {
-        offerThroughput = this.minimum();
-      }
-
-      this.value(offerThroughput);
-    }
-  }
-
-  public increaseThroughput() {
-    let offerThroughput: number = this._getSanitizedValue();
-
-    if (offerThroughput < this.maximum() || this.canExceedMaximumValue()) {
-      offerThroughput += this.step();
-      if (offerThroughput > this.maximum() && !this.canExceedMaximumValue()) {
-        offerThroughput = this.maximum();
-      }
-
-      this.value(offerThroughput);
-    }
-  }
-
-  public onIncreaseKeyDown = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.increaseThroughput();
-      event.stopPropagation();
-      return false;
-    }
-
-    return true;
-  };
-
-  public onDecreaseKeyDown = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.decreaseThroughput();
-      event.stopPropagation();
-      return false;
-    }
-
-    return true;
-  };
-
-  private _getSanitizedValue(): number {
-    let throughput = this.value();
-
-    if (this.isAutoPilotSelected()) {
-      throughput = this.maxAutoPilotThroughputSet();
-    }
-    return isNaN(throughput) ? 0 : Number(throughput);
-  }
-
-  private static _defaultStep: number = 100;
-}
-
-export const ThroughputInputComponentAutoPilotV3 = {
-  viewModel: ThroughputInputViewModel,
-  template: ThroughputInputComponentAutoscaleV3,
-};

src/Explorer/DataSamples/ContainerSampleGenerator.test.ts

@@ -14,7 +14,6 @@ describe("ContainerSampleGenerator", () => {
   const createExplorerStub = (database: ViewModels.Database): Explorer => {
     const explorerStub = {} as Explorer;
     explorerStub.databases = ko.observableArray<ViewModels.Database>([database]);
-    explorerStub.canExceedMaximumValue = ko.computed<boolean>(() => false);
     explorerStub.findDatabaseWithId = () => database;
     explorerStub.refreshAllDatabases = () => Q.resolve();
     return explorerStub;

src/Explorer/Explorer.tsx

@@ -6,42 +6,36 @@ import _ from "underscore";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
 import * as Constants from "../Common/Constants";
-import { ExplorerMetrics, HttpStatusCodes } from "../Common/Constants";
+import { ExplorerMetrics } from "../Common/Constants";
 import { readCollection } from "../Common/dataAccess/readCollection";
 import { readDatabases } from "../Common/dataAccess/readDatabases";
+import { isPublicInternetAccessAllowed } from "../Common/DatabaseAccountUtility";
 import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHandlingUtils";
 import * as Logger from "../Common/Logger";
-import { sendCachedDataMessage } from "../Common/MessageHandler";
 import { QueriesClient } from "../Common/QueriesClient";
 import { Splitter, SplitterBounds, SplitterDirection } from "../Common/Splitter";
 import { configContext, Platform } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
-import { MessageTypes } from "../Contracts/ExplorerContracts";
 import * as ViewModels from "../Contracts/ViewModels";
-import { GitHubClient } from "../GitHub/GitHubClient";
 import { GitHubOAuthService } from "../GitHub/GitHubOAuthService";
 import { IGalleryItem, JunoClient } from "../Juno/JunoClient";
 import { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
-import { ResourceProviderClientFactory } from "../ResourceProvider/ResourceProviderClientFactory";
 import { RouteHandler } from "../RouteHandlers/RouteHandler";
-import { trackEvent } from "../Shared/appInsights";
-import * as SharedConstants from "../Shared/Constants";
 import { ExplorerSettings } from "../Shared/ExplorerSettings";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
-import { ArcadiaResourceManager } from "../SparkClusterManager/ArcadiaResourceManager";
-import { updateUserContext, userContext } from "../UserContext";
+import { userContext } from "../UserContext";
 import { getCollectionName, getDatabaseName, getUploadName } from "../Utils/APITypeUtils";
-import { decryptJWTToken, getAuthorizationHeader } from "../Utils/AuthorizationUtils";
+import { update } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
+import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
 import { stringToBlob } from "../Utils/BlobUtils";
 import { isCapabilityEnabled } from "../Utils/CapabilityUtils";
 import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
 import * as ComponentRegisterer from "./ComponentRegisterer";
-import { ArcadiaWorkspaceItem } from "./Controls/Arcadia/ArcadiaMenuPicker";
 import { CommandButtonComponentProps } from "./Controls/CommandButton/CommandButtonComponent";
-import { DialogProps, TextFieldProps } from "./Controls/Dialog";
+import { DialogProps, TextFieldProps, useDialog } from "./Controls/Dialog";
 import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
 import { CommandBarComponentAdapter } from "./Menus/CommandBar/CommandBarComponentAdapter";
 import { ConsoleData } from "./Menus/NotificationConsole/NotificationConsoleComponent";
@@ -54,8 +48,7 @@ import { NotebookUtil } from "./Notebook/NotebookUtil";
 import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
 import { AddDatabasePanel } from "./Panes/AddDatabasePanel/AddDatabasePanel";
 import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane/BrowseQueriesPane";
-import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
-import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
+import { CassandraAddCollectionPane } from "./Panes/CassandraAddCollectionPane/CassandraAddCollectionPane";
 import { DeleteCollectionConfirmationPane } from "./Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane";
 import { DeleteDatabaseConfirmationPanel } from "./Panes/DeleteDatabaseConfirmationPanel";
 import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane";
@@ -67,7 +60,7 @@ import { SetupNoteBooksPanel } from "./Panes/SetupNotebooksPanel/SetupNotebooksP
 import { StringInputPane } from "./Panes/StringInputPane/StringInputPane";
 import { AddTableEntityPanel } from "./Panes/Tables/AddTableEntityPanel";
 import { EditTableEntityPanel } from "./Panes/Tables/EditTableEntityPanel";
-import { TableQuerySelectPanel } from "./Panes/Tables/TableQuerySelectPanel";
+import { TableQuerySelectPanel } from "./Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel";
 import { UploadFilePane } from "./Panes/UploadFilePane/UploadFilePane";
 import { UploadItemsPane } from "./Panes/UploadItemsPane/UploadItemsPane";
 import TableListViewModal from "./Tables/DataTable/TableEntityListViewModel";
@@ -93,26 +86,16 @@ export interface ExplorerParams {
   setInProgressConsoleDataIdToBeDeleted: (id: string) => void;
   openSidePanel: (headerText: string, panelContent: JSX.Element, onClose?: () => void) => void;
   closeSidePanel: () => void;
-  closeDialog: () => void;
-  openDialog: (props: DialogProps) => void;
   tabsManager: TabsManager;
 }
 
 export default class Explorer {
-  public addCollectionText: ko.Observable<string>;
-  public collectionTitle: ko.Observable<string>;
-  public deleteCollectionText: ko.Observable<string>;
-  public deleteDatabaseText: ko.Observable<string>;
-  public collectionTreeNodeAltText: ko.Observable<string>;
-  public refreshTreeTitle: ko.Observable<string>;
   public collapsedResourceTreeWidth: number = ExplorerMetrics.CollapsedResourceTreeWidth;
 
-  public collectionCreationDefaults: ViewModels.CollectionCreationDefaults = SharedConstants.CollectionCreationDefaults;
   public isFixedCollectionWithSharedThroughputSupported: ko.Computed<boolean>;
   public isServerlessEnabled: ko.Computed<boolean>;
   public isAccountReady: ko.Observable<boolean>;
   public canSaveQueries: ko.Computed<boolean>;
-  public features: ko.Observable<any>;
   public queriesClient: QueriesClient;
   public tableDataClient: TableDataClient;
   public splitter: Splitter;
@@ -123,7 +106,6 @@ export default class Explorer {
   private setInProgressConsoleDataIdToBeDeleted: (id: string) => void;
 
   // Panes
-  public contextPanes: ContextualPaneBase[];
   public openSidePanel: (headerText: string, panelContent: JSX.Element, onClose?: () => void) => void;
   public closeSidePanel: () => void;
 
@@ -146,18 +128,10 @@ export default class Explorer {
   public isTabsContentExpanded: ko.Observable<boolean>;
   public tabsManager: TabsManager;
 
-  // Contextual panes
-  public cassandraAddCollectionPane: CassandraAddCollectionPane;
-  private gitHubClient: GitHubClient;
   public gitHubOAuthService: GitHubOAuthService;
-  public junoClient: JunoClient;
 
   // features
-  public isPublishNotebookPaneEnabled: ko.Observable<boolean>;
   public isHostedDataExplorerEnabled: ko.Computed<boolean>;
-  public isMongoIndexingEnabled: ko.Observable<boolean>;
-  public canExceedMaximumValue: ko.Computed<boolean>;
-  public isAutoscaleDefaultEnabled: ko.Observable<boolean>;
   public isSchemaEnabled: ko.Computed<boolean>;
 
   // Notebooks
@@ -166,20 +140,14 @@ export default class Explorer {
   public notebookServerInfo: ko.Observable<DataModels.NotebookWorkspaceConnectionInfo>;
   public notebookWorkspaceManager: NotebookWorkspaceManager;
   public sparkClusterConnectionInfo: ko.Observable<DataModels.SparkClusterConnectionInfo>;
-  public isSparkEnabled: ko.Observable<boolean>;
-  public isSparkEnabledForAccount: ko.Observable<boolean>;
-  public arcadiaToken: ko.Observable<string>;
-  public arcadiaWorkspaces: ko.ObservableArray<ArcadiaWorkspaceItem>;
-  public hasStorageAnalyticsAfecFeature: ko.Observable<boolean>;
   public isSynapseLinkUpdating: ko.Observable<boolean>;
   public memoryUsageInfo: ko.Observable<DataModels.MemoryUsageInfo>;
   public notebookManager?: NotebookManager;
-  public openDialog: ExplorerParams["openDialog"];
-  public closeDialog: ExplorerParams["closeDialog"];
+
+  public isShellEnabled: ko.Observable<boolean>;
 
   private _isInitializingNotebooks: boolean;
   private notebookBasePath: ko.Observable<string>;
-  private _arcadiaManager: ArcadiaResourceManager;
   private notebookToImport: {
     name: string;
     content: string;
@@ -191,44 +159,20 @@ export default class Explorer {
   private static readonly MaxNbDatabasesToAutoExpand = 5;
 
   constructor(params?: ExplorerParams) {
-    this.gitHubClient = new GitHubClient(this.onGitHubClientError);
-    this.junoClient = new JunoClient();
     this.setIsNotificationConsoleExpanded = params?.setIsNotificationConsoleExpanded;
     this.setNotificationConsoleData = params?.setNotificationConsoleData;
     this.setInProgressConsoleDataIdToBeDeleted = params?.setInProgressConsoleDataIdToBeDeleted;
     this.openSidePanel = params?.openSidePanel;
     this.closeSidePanel = params?.closeSidePanel;
-    this.closeDialog = params?.closeDialog;
-    this.openDialog = params?.openDialog;
 
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
-    this.addCollectionText = ko.observable<string>("New Collection");
-    this.collectionTitle = ko.observable<string>("Collections");
-    this.collectionTreeNodeAltText = ko.observable<string>("Collection");
-    this.deleteCollectionText = ko.observable<string>("Delete Collection");
-    this.deleteDatabaseText = ko.observable<string>("Delete Database");
-    this.refreshTreeTitle = ko.observable<string>("Refresh collections");
-
     this.isAccountReady = ko.observable<boolean>(false);
     this._isInitializingNotebooks = false;
-    this.arcadiaToken = ko.observable<string>();
-    this.arcadiaToken.subscribe((token: string) => {
-      if (token) {
-        const notebookTabs = this.tabsManager.getTabs(ViewModels.CollectionTabKind.NotebookV2);
-        (notebookTabs || []).forEach((tab: NotebookV2Tab) => {
-          tab.reconfigureServiceEndpoints();
-        });
-      }
-    });
-
+    this.isShellEnabled = ko.observable(false);
     this.isNotebooksEnabledForAccount = ko.observable(false);
     this.isNotebooksEnabledForAccount.subscribe((isEnabledForAccount: boolean) => this.refreshCommandBarButtons());
-    this.isSparkEnabledForAccount = ko.observable(false);
-    this.isSparkEnabledForAccount.subscribe((isEnabledForAccount: boolean) => this.refreshCommandBarButtons());
-    this.hasStorageAnalyticsAfecFeature = ko.observable(false);
-    this.hasStorageAnalyticsAfecFeature.subscribe((enabled: boolean) => this.refreshCommandBarButtons());
     this.isSynapseLinkUpdating = ko.observable<boolean>(false);
     this.isAccountReady.subscribe(async (isAccountReady: boolean) => {
       if (isAccountReady) {
@@ -237,57 +181,26 @@ export default class Explorer {
           : this.refreshAllDatabases(true);
         RouteHandler.getInstance().initHandler();
         this.notebookWorkspaceManager = new NotebookWorkspaceManager();
-        this.arcadiaWorkspaces = ko.observableArray();
-        this._arcadiaManager = new ArcadiaResourceManager();
-        this._isAfecFeatureRegistered(Constants.AfecFeatures.StorageAnalytics).then((isRegistered) =>
-          this.hasStorageAnalyticsAfecFeature(isRegistered)
+        await this._refreshNotebooksEnabledStateForAccount();
+        this.isNotebookEnabled(
+          userContext.authType !== AuthType.ResourceToken &&
+            ((await this._containsDefaultNotebookWorkspace(userContext.databaseAccount)) ||
+              userContext.features.enableNotebooks)
         );
-        Promise.all([this._refreshNotebooksEnabledStateForAccount(), this._refreshSparkEnabledStateForAccount()]).then(
-          async () => {
-            this.isNotebookEnabled(
-              userContext.authType !== AuthType.ResourceToken &&
-                ((await this._containsDefaultNotebookWorkspace(userContext.databaseAccount)) ||
-                  userContext.features.enableNotebooks)
-            );
-            TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
-              isNotebookEnabled: this.isNotebookEnabled(),
-              dataExplorerArea: Constants.Areas.Notebook,
-            });
 
-            if (this.isNotebookEnabled()) {
-              await this.initNotebooks(userContext.databaseAccount);
-              const workspaces = await this._getArcadiaWorkspaces();
-              this.arcadiaWorkspaces(workspaces);
-            } else if (this.notebookToImport) {
-              // if notebooks is not enabled but the user is trying to do a quickstart setup with notebooks, open the SetupNotebooksPane
-              this._openSetupNotebooksPaneForQuickstart();
-            }
+        this.isShellEnabled(this.isNotebookEnabled() && isPublicInternetAccessAllowed());
 
-            this.isSparkEnabled(
-              (this.isNotebookEnabled() &&
-                this.isSparkEnabledForAccount() &&
-                this.arcadiaWorkspaces() &&
-                this.arcadiaWorkspaces().length > 0) ||
-                userContext.features.enableSpark
-            );
-            if (this.isSparkEnabled()) {
-              trackEvent(
-                { name: "LoadedWithSparkEnabled" },
-                {
-                  subscriptionId: userContext.subscriptionId,
-                  accountName: userContext.databaseAccount?.name,
-                  accountId: userContext.databaseAccount?.id,
-                  platform: configContext.platform,
-                }
-              );
-              const pollArcadiaTokenRefresh = async () => {
-                this.arcadiaToken(await this.getArcadiaToken());
-                setTimeout(() => pollArcadiaTokenRefresh(), this.getTokenRefreshInterval(this.arcadiaToken()));
-              };
-              await pollArcadiaTokenRefresh();
-            }
-          }
-        );
+        TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
+          isNotebookEnabled: this.isNotebookEnabled(),
+          dataExplorerArea: Constants.Areas.Notebook,
+        });
+
+        if (this.isNotebookEnabled()) {
+          await this.initNotebooks(userContext.databaseAccount);
+        } else if (this.notebookToImport) {
+          // if notebooks is not enabled but the user is trying to do a quickstart setup with notebooks, open the SetupNotebooksPane
+          this._openSetupNotebooksPaneForQuickstart();
+        }
       }
     });
     this.memoryUsageInfo = ko.observable<DataModels.MemoryUsageInfo>();
@@ -298,15 +211,8 @@ export default class Explorer {
     this.resourceTokenCollectionId = ko.observable<string>();
     this.resourceTokenCollection = ko.observable<ViewModels.CollectionBase>();
     this.resourceTokenPartitionKey = ko.observable<string>();
-    this.isMongoIndexingEnabled = ko.observable<boolean>(false);
-    this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
-
-    this.canExceedMaximumValue = ko.computed<boolean>(() => userContext.features.canExceedMaximumValue);
-
     this.isSchemaEnabled = ko.computed<boolean>(() => userContext.features.enableSchema);
 
-    this.isAutoscaleDefaultEnabled = ko.observable<boolean>(false);
-
     this.databases = ko.observableArray<ViewModels.Database>();
     this.canSaveQueries = ko.computed<boolean>(() => {
       const savedQueriesDatabase: ViewModels.Database = _.find(
@@ -397,13 +303,6 @@ export default class Explorer {
       }
     });
 
-    this.cassandraAddCollectionPane = new CassandraAddCollectionPane({
-      id: "cassandraaddcollectionpane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
     this.tabsManager = params?.tabsManager ?? new TabsManager();
     this.tabsManager.openedTabs.subscribe((tabs) => {
       if (tabs.length === 0) {
@@ -427,46 +326,10 @@ export default class Explorer {
     });
 
     switch (userContext.apiType) {
-      case "SQL":
-        this.addCollectionText("New Container");
-        this.collectionTitle("SQL API");
-        this.collectionTreeNodeAltText("Container");
-        this.deleteCollectionText("Delete Container");
-        this.deleteDatabaseText("Delete Database");
-        this.refreshTreeTitle("Refresh containers");
-        break;
-      case "Mongo":
-        this.addCollectionText("New Collection");
-        this.collectionTitle("Collections");
-        this.collectionTreeNodeAltText("Collection");
-        this.deleteCollectionText("Delete Collection");
-        this.deleteDatabaseText("Delete Database");
-        this.refreshTreeTitle("Refresh collections");
-        break;
-      case "Gremlin":
-        this.addCollectionText("New Graph");
-        this.deleteCollectionText("Delete Graph");
-        this.deleteDatabaseText("Delete Database");
-        this.collectionTitle("Gremlin API");
-        this.collectionTreeNodeAltText("Graph");
-        this.refreshTreeTitle("Refresh graphs");
-        break;
       case "Tables":
-        this.addCollectionText("New Table");
-        this.deleteCollectionText("Delete Table");
-        this.deleteDatabaseText("Delete Database");
-        this.collectionTitle("Azure Table API");
-        this.collectionTreeNodeAltText("Table");
-        this.refreshTreeTitle("Refresh tables");
         this.tableDataClient = new TablesAPIDataClient();
         break;
       case "Cassandra":
-        this.addCollectionText("New Table");
-        this.deleteCollectionText("Delete Table");
-        this.deleteDatabaseText("Delete Keyspace");
-        this.collectionTitle("Cassandra API");
-        this.collectionTreeNodeAltText("Table");
-        this.refreshTreeTitle("Refresh tables");
         this.tableDataClient = new CassandraAPIDataClient();
         break;
     }
@@ -501,8 +364,6 @@ export default class Explorer {
       this.refreshNotebookList();
     });
 
-    this.isSparkEnabled = ko.observable(false);
-    this.isSparkEnabled.subscribe((isEnabled: boolean) => this.refreshCommandBarButtons());
     this.resourceTree = new ResourceTreeAdapter(this);
     this.resourceTreeForResourceToken = new ResourceTreeAdapterForResourceToken(this);
     this.notebookServerInfo = ko.observable<DataModels.NotebookWorkspaceConnectionInfo>({
@@ -540,24 +401,11 @@ export default class Explorer {
         ],
       });
     }
-  }
 
-  private onGitHubClientError = (error: any): void => {
-    Logger.logError(getErrorMessage(error), "NotebookManager/onGitHubClientError");
-
-    if (error.status === HttpStatusCodes.Unauthorized) {
-      this.gitHubOAuthService.resetToken();
-
-      this.showOkCancelModalDialog(
-        undefined,
-        "Cosmos DB cannot access your Github account anymore. Please connect to GitHub again.",
-        "Connect to GitHub",
-        () => this.openGitHubReposPanel("Connect to GitHub"),
-        "Cancel",
-        undefined
-      );
+    if (configContext.enableSchemaAnalyzer) {
+      userContext.features.enableSchemaAnalyzer = true;
     }
-  };
+  }
 
   public openEnableSynapseLinkDialog(): void {
     const addSynapseLinkDialogProps: DialogProps = {
@@ -566,7 +414,6 @@ export default class Explorer {
         linkUrl: "https://aka.ms/cosmosdb-synapselink",
       },
       isModal: true,
-      visible: true,
       title: `Enable Azure Synapse Link on your Cosmos DB account`,
       subText: `Enable Azure Synapse Link to perform near real time analytical analytics on this account, without impacting the performance of your transactional workloads.
       Azure Synapse Link brings together Cosmos Db Analytical Store and Synapse Analytics`,
@@ -579,24 +426,19 @@ export default class Explorer {
           "Enabling Azure Synapse Link for this account. This may take a few minutes before you can enable analytical store for this account."
         );
         this.isSynapseLinkUpdating(true);
-        this._closeSynapseLinkModalDialog();
-
-        const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(userContext.databaseAccount.id);
+        useDialog.getState().closeDialog();
 
         try {
-          const databaseAccount: DataModels.DatabaseAccount = await resourceProviderClient.patchAsync(
-            userContext.databaseAccount.id,
-            "2019-12-12",
-            {
-              properties: {
-                enableAnalyticalStorage: true,
-              },
-            }
-          );
+          await update(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.id, {
+            properties: {
+              enableAnalyticalStorage: true,
+            },
+          });
+
           clearInProgressMessage();
           logConsoleInfo("Enabled Azure Synapse Link for this account");
           TelemetryProcessor.traceSuccess(Action.EnableAzureSynapseLink, {}, startTime);
-          updateUserContext({ databaseAccount });
+          userContext.databaseAccount.properties.enableAnalyticalStorage = true;
         } catch (error) {
           clearInProgressMessage();
           logConsoleError(`Enabling Azure Synapse Link for this account failed. ${getErrorMessage(error)}`);
@@ -607,11 +449,11 @@ export default class Explorer {
       },
 
       onSecondaryButtonClick: () => {
-        this._closeSynapseLinkModalDialog();
+        useDialog.getState().closeDialog();
         TelemetryProcessor.traceCancel(Action.EnableAzureSynapseLink);
       },
     };
-    this.openDialog(addSynapseLinkDialogProps);
+    useDialog.getState().openDialog(addSynapseLinkDialogProps);
     TelemetryProcessor.traceStart(Action.EnableAzureSynapseLink);
 
     // TODO: return result
@@ -770,52 +612,6 @@ export default class Explorer {
     window.open(Constants.Urls.feedbackEmail, "_blank");
   };
 
-  public async getArcadiaToken(): Promise<string> {
-    return new Promise<string>((resolve: (token: string) => void, reject: (error: any) => void) => {
-      sendCachedDataMessage<string>(MessageTypes.GetArcadiaToken, undefined /** params **/).then(
-        (token: string) => {
-          resolve(token);
-        },
-        (error: any) => {
-          Logger.logError(getErrorMessage(error), "Explorer/getArcadiaToken");
-          resolve(undefined);
-        }
-      );
-    });
-  }
-
-  private async _getArcadiaWorkspaces(): Promise<ArcadiaWorkspaceItem[]> {
-    try {
-      const workspaces = await this._arcadiaManager.listWorkspacesAsync([userContext.subscriptionId]);
-      let workspaceItems: ArcadiaWorkspaceItem[] = new Array(workspaces.length);
-      const sparkPromises: Promise<void>[] = [];
-      workspaces.forEach((workspace, i) => {
-        let promise = this._arcadiaManager.listSparkPoolsAsync(workspaces[i].id).then(
-          (sparkpools) => {
-            workspaceItems[i] = { ...workspace, sparkPools: sparkpools };
-          },
-          (error) => {
-            Logger.logError(getErrorMessage(error), "Explorer/this._arcadiaManager.listSparkPoolsAsync");
-          }
-        );
-        sparkPromises.push(promise);
-      });
-
-      return Promise.all(sparkPromises).then(() => workspaceItems);
-    } catch (error) {
-      handleError(error, "Explorer/this._arcadiaManager.listWorkspacesAsync", "Get Arcadia workspaces failed");
-      return Promise.resolve([]);
-    }
-  }
-
-  public async createWorkspace(): Promise<string> {
-    return sendCachedDataMessage(MessageTypes.CreateWorkspace, undefined /** params **/);
-  }
-
-  public async createSparkPool(workspaceId: string): Promise<string> {
-    return sendCachedDataMessage(MessageTypes.CreateSparkPool, [workspaceId]);
-  }
-
   public async initNotebooks(databaseAccount: DataModels.DatabaseAccount): Promise<void> {
     if (!databaseAccount) {
       throw new Error("No database account specified");
@@ -873,15 +669,14 @@ export default class Explorer {
 
     const resetConfirmationDialogProps: DialogProps = {
       isModal: true,
-      visible: true,
       title: "Reset Workspace",
       subText: "This lets you keep your notebook files and the workspace will be restored to default. Proceed anyway?",
       primaryButtonText: "OK",
       secondaryButtonText: "Cancel",
       onPrimaryButtonClick: this._resetNotebookWorkspace,
-      onSecondaryButtonClick: this._closeModalDialog,
+      onSecondaryButtonClick: () => useDialog.getState().closeDialog(),
     };
-    this.openDialog(resetConfirmationDialogProps);
+    useDialog.getState().openDialog(resetConfirmationDialogProps);
   }
 
   private async _containsDefaultNotebookWorkspace(databaseAccount: DataModels.DatabaseAccount): Promise<boolean> {
@@ -926,7 +721,7 @@ export default class Explorer {
   }
 
   private _resetNotebookWorkspace = async () => {
-    this._closeModalDialog();
+    useDialog.getState().closeDialog();
     const clearInProgressMessage = logConsoleProgress("Resetting notebook workspace");
     try {
       await this.notebookManager?.notebookClient.resetWorkspace();
@@ -944,14 +739,6 @@ export default class Explorer {
     }
   };
 
-  private _closeModalDialog = () => {
-    this.closeDialog();
-  };
-
-  private _closeSynapseLinkModalDialog = () => {
-    this.closeDialog();
-  };
-
   public findSelectedDatabase(): ViewModels.Database {
     if (!this.selectedNode()) {
       return null;
@@ -1001,29 +788,10 @@ export default class Explorer {
       if (process.env.NODE_ENV === "development") {
         sessionStorage.setItem("portalDataExplorerInitMessage", JSON.stringify(inputs));
       }
-      if (inputs.defaultCollectionThroughput) {
-        this.collectionCreationDefaults = inputs.defaultCollectionThroughput;
-      }
-      this.setFeatureFlagsFromFlights(inputs.flights);
       this.isAccountReady(true);
     }
   }
 
-  public setFeatureFlagsFromFlights(flights: readonly string[]): void {
-    if (!flights) {
-      return;
-    }
-    if (flights.indexOf(Constants.Flights.AutoscaleTest) !== -1) {
-      this.isAutoscaleDefaultEnabled(true);
-    }
-    if (flights.indexOf(Constants.Flights.MongoIndexing) !== -1) {
-      this.isMongoIndexingEnabled(true);
-    }
-    if (flights.indexOf(Constants.Flights.SchemaAnalyzer) !== -1) {
-      userContext.features.enableSchemaAnalyzer = true;
-    }
-  }
-
   public findSelectedCollection(): ViewModels.Collection {
     return (
       this.selectedNode().nodeKind === "Collection" ? this.selectedNode() : this.selectedNode().collection
@@ -1238,7 +1006,6 @@ export default class Explorer {
         onTakeSnapshot,
         onClosePanel
       );
-      this.isPublishNotebookPaneEnabled(true);
     }
   }
 
@@ -1247,14 +1014,15 @@ export default class Explorer {
   }
 
   public showOkModalDialog(title: string, msg: string): void {
-    this.openDialog({
+    useDialog.getState().openDialog({
       isModal: true,
-      visible: true,
       title,
       subText: msg,
       primaryButtonText: "Close",
       secondaryButtonText: undefined,
-      onPrimaryButtonClick: this._closeModalDialog,
+      onPrimaryButtonClick: () => {
+        useDialog.getState().closeDialog();
+      },
       onSecondaryButtonClick: undefined,
     });
   }
@@ -1270,19 +1038,18 @@ export default class Explorer {
     textFieldProps?: TextFieldProps,
     isPrimaryButtonDisabled?: boolean
   ): void {
-    this.openDialog({
+    useDialog.getState().openDialog({
       isModal: true,
-      visible: true,
       title,
       subText: msg,
       primaryButtonText: okLabel,
       secondaryButtonText: cancelLabel,
       onPrimaryButtonClick: () => {
-        this._closeModalDialog();
+        useDialog.getState().closeDialog();
         onOk && onOk();
       },
       onSecondaryButtonClick: () => {
-        this._closeModalDialog();
+        useDialog.getState().closeDialog();
         onCancel && onCancel();
       },
       choiceGroupProps,
@@ -1368,7 +1135,7 @@ export default class Explorer {
       this.showOkModalDialog("Unable to rename file", "This file is being edited. Please close the tab and try again.");
     } else {
       this.openSidePanel(
-        "",
+        "Rename Notebook",
         <StringInputPane
           explorer={this}
           closePanel={() => {
@@ -1399,7 +1166,7 @@ export default class Explorer {
     }
 
     this.openSidePanel(
-      "",
+      "Create new directory",
       <StringInputPane
         explorer={this}
         closePanel={() => {
@@ -1517,57 +1284,6 @@ export default class Explorer {
     }
   }
 
-  public _refreshSparkEnabledStateForAccount = async (): Promise<void> => {
-    const { subscriptionId, authType } = userContext;
-    const armEndpoint = configContext.ARM_ENDPOINT;
-    if (!subscriptionId || !armEndpoint || authType === AuthType.EncryptedToken) {
-      // explorer is not aware of the database account yet
-      this.isSparkEnabledForAccount(false);
-      return;
-    }
-
-    const featureUri = `subscriptions/${subscriptionId}/providers/Microsoft.Features/providers/Microsoft.DocumentDb/features/${Constants.AfecFeatures.Spark}`;
-    const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(featureUri);
-    try {
-      const sparkNotebooksFeature: DataModels.AfecFeature = await resourceProviderClient.getAsync(
-        featureUri,
-        Constants.ArmApiVersions.armFeatures
-      );
-      const isEnabled =
-        (sparkNotebooksFeature &&
-          sparkNotebooksFeature.properties &&
-          sparkNotebooksFeature.properties.state === "Registered") ||
-        false;
-      this.isSparkEnabledForAccount(isEnabled);
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "Explorer/isSparkEnabledForAccount");
-      this.isSparkEnabledForAccount(false);
-    }
-  };
-
-  public _isAfecFeatureRegistered = async (featureName: string): Promise<boolean> => {
-    const { subscriptionId, authType } = userContext;
-    const armEndpoint = configContext.ARM_ENDPOINT;
-    if (!featureName || !subscriptionId || !armEndpoint || authType === AuthType.EncryptedToken) {
-      // explorer is not aware of the database account yet
-      return false;
-    }
-
-    const featureUri = `subscriptions/${subscriptionId}/providers/Microsoft.Features/providers/Microsoft.DocumentDb/features/${featureName}`;
-    const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(featureUri);
-    try {
-      const featureStatus: DataModels.AfecFeature = await resourceProviderClient.getAsync(
-        featureUri,
-        Constants.ArmApiVersions.armFeatures
-      );
-      const isEnabled =
-        (featureStatus && featureStatus.properties && featureStatus.properties.state === "Registered") || false;
-      return isEnabled;
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "Explorer/isSparkEnabledForAccount");
-      return false;
-    }
-  };
   private refreshNotebookList = async (): Promise<void> => {
     if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
       return;
@@ -1600,14 +1316,13 @@ export default class Explorer {
     }
 
     if (item.type === NotebookContentItemType.Directory && item.children && item.children.length > 0) {
-      this.openDialog({
+      useDialog.getState().openDialog({
         isModal: true,
-        visible: true,
         title: "Unable to delete file",
         subText: "Directory is not empty.",
         primaryButtonText: "Close",
         secondaryButtonText: undefined,
-        onPrimaryButtonClick: this._closeModalDialog,
+        onPrimaryButtonClick: () => useDialog.getState().closeDialog(),
         onSecondaryButtonClick: undefined,
       });
       return Promise.reject();
@@ -1704,32 +1419,27 @@ export default class Explorer {
         throw new Error("Terminal kind: ${kind} not supported");
     }
 
-    const terminalTabs: TerminalTab[] = this.tabsManager.getTabs(
-      ViewModels.CollectionTabKind.Terminal,
-      (tab) => tab.hashLocation() == hashLocation
+    const terminalTabs: TerminalTab[] = this.tabsManager.getTabs(ViewModels.CollectionTabKind.Terminal, (tab) =>
+      tab.hashLocation().startsWith(hashLocation)
     ) as TerminalTab[];
-    let terminalTab: TerminalTab = terminalTabs && terminalTabs[0];
 
-    if (terminalTab) {
-      this.tabsManager.activateTab(terminalTab);
-    } else {
-      const newTab = new TerminalTab({
-        account: userContext.databaseAccount,
-        tabKind: ViewModels.CollectionTabKind.Terminal,
-        node: null,
-        title: title,
-        tabPath: title,
-        collection: null,
-        hashLocation: hashLocation,
-        isTabsContentExpanded: ko.observable(true),
-        onLoadStartKey: null,
-        onUpdateTabsButtons: this.onUpdateTabsButtons,
-        container: this,
-        kind: kind,
-      });
+    const index = terminalTabs.length + 1;
+    const newTab = new TerminalTab({
+      account: userContext.databaseAccount,
+      tabKind: ViewModels.CollectionTabKind.Terminal,
+      node: null,
+      title: `${title} ${index}`,
+      tabPath: `${title} ${index}`,
+      collection: null,
+      hashLocation: `${hashLocation} ${index}`,
+      isTabsContentExpanded: ko.observable(true),
+      onLoadStartKey: null,
+      onUpdateTabsButtons: this.onUpdateTabsButtons,
+      container: this,
+      kind: kind,
+    });
 
-      this.tabsManager.activateNewTab(newTab);
-    }
+    this.tabsManager.activateNewTab(newTab);
   }
 
   public async openGallery(
@@ -1775,7 +1485,7 @@ export default class Explorer {
 
   public onNewCollectionClicked(databaseId?: string): void {
     if (userContext.apiType === "Cassandra") {
-      this.cassandraAddCollectionPane.open();
+      this.openCassandraAddCollectionPane();
     } else {
       this.openAddCollectionPanel(databaseId);
     }
@@ -1790,30 +1500,6 @@ export default class Explorer {
     }
   }
 
-  private getTokenRefreshInterval(token: string): number {
-    let tokenRefreshInterval = Constants.ClientDefaults.arcadiaTokenRefreshInterval;
-    if (!token) {
-      return tokenRefreshInterval;
-    }
-
-    try {
-      const tokenPayload = decryptJWTToken(this.arcadiaToken());
-      if (tokenPayload && tokenPayload.hasOwnProperty("exp")) {
-        const expirationTime = tokenPayload.exp as number; // seconds since unix epoch
-        const now = new Date().getTime() / 1000;
-        const tokenExpirationIntervalInMs = (expirationTime - now) * 1000;
-        if (tokenExpirationIntervalInMs < tokenRefreshInterval) {
-          tokenRefreshInterval =
-            tokenExpirationIntervalInMs - Constants.ClientDefaults.arcadiaTokenRefreshIntervalPaddingMs;
-        }
-      }
-      return tokenRefreshInterval;
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "Explorer/getTokenRefreshInterval");
-      return tokenRefreshInterval;
-    }
-  }
-
   private _openSetupNotebooksPaneForQuickstart(): void {
     const title = "Enable Notebooks (Preview)";
     const description =
@@ -1845,11 +1531,6 @@ export default class Explorer {
     }
   }
 
-  public async loadSelectedDatabaseOffer(): Promise<void> {
-    const database = this.findSelectedDatabase();
-    await database?.loadOffer();
-  }
-
   public async loadDatabaseOffers(): Promise<void> {
     await Promise.all(
       this.databases()?.map(async (database: ViewModels.Database) => {
@@ -1891,7 +1572,7 @@ export default class Explorer {
       "Delete " + getDatabaseName(),
       <DeleteDatabaseConfirmationPanel
         explorer={this}
-        openNotificationConsole={this.expandConsole}
+        openNotificationConsole={() => this.expandConsole()}
         closePanel={this.closeSidePanel}
         selectedDatabase={this.findSelectedDatabase()}
       />
@@ -1967,6 +1648,16 @@ export default class Explorer {
     );
   }
 
+  public openCassandraAddCollectionPane(): void {
+    this.openSidePanel(
+      "Add Table",
+      <CassandraAddCollectionPane
+        explorer={this}
+        closePanel={() => this.closeSidePanel()}
+        cassandraApiClient={new CassandraAPIDataClient()}
+      />
+    );
+  }
   public openGitHubReposPanel(header: string, junoClient?: JunoClient): void {
     this.openSidePanel(
       header,

src/Explorer/Graph/GraphStyleComponent/GraphStyleComponent.test.tsx

@@ -43,7 +43,7 @@ describe("Graph Style Component", () => {
     expect(asFragment).toMatchSnapshot();
   });
 
-  it("should render node properties dropdown list ", () => {
+  it("should render node properties dropdown list", () => {
     const dropDownList = screen.getByText("Show vertex (node) as");
     expect(dropDownList).toBeDefined();
   });

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx

@@ -132,6 +132,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
               onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                 onLabelChange(event);
               }}
+              autoFocus
             />
             <div className="actionCol"></div>
           </div>

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -30,9 +30,6 @@ export class CommandBarComponentAdapter implements ReactAdapter {
 
     // These are the parameters watched by the react binding that will trigger a renderComponent() if one of the ko mutates
     const toWatch = [
-      container.deleteCollectionText,
-      container.deleteDatabaseText,
-      container.addCollectionText,
       container.isDatabaseNodeOrNoneSelected,
       container.isDatabaseNodeSelected,
       container.isNoneSelected,

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

@@ -15,7 +15,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addCollectionText = ko.observable("mockText");
       updateUserContext({
         databaseAccount: {
           properties: {
@@ -23,7 +22,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
           },
         } as DatabaseAccount,
       });
-      mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
 
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
@@ -58,7 +56,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addCollectionText = ko.observable("mockText");
       updateUserContext({
         databaseAccount: {
           properties: {
@@ -67,7 +64,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
         } as DatabaseAccount,
       });
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
-      mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
 
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
@@ -126,7 +122,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addCollectionText = ko.observable("mockText");
       updateUserContext({
         databaseAccount: {
           properties: {
@@ -134,11 +129,11 @@ describe("CommandBarComponentButtonFactory tests", () => {
           },
         } as DatabaseAccount,
       });
-      mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
 
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
       mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
+      mockExplorer.isShellEnabled = ko.observable(true);
     });
 
     afterAll(() => {
@@ -154,6 +149,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isNotebookEnabled = ko.observable(false);
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
       mockExplorer.isRunningOnNationalCloud = ko.observable(false);
+      mockExplorer.isShellEnabled = ko.observable(true);
     });
 
     it("Mongo Api not available - button should be hidden", () => {
@@ -173,24 +169,18 @@ describe("CommandBarComponentButtonFactory tests", () => {
       expect(openMongoShellBtn).toBeUndefined();
     });
 
-    it("Notebooks is not enabled and is unavailable - button should be shown and disabled", () => {
+    it("Notebooks is not enabled and is unavailable - button should be hidden", () => {
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
-      expect(openMongoShellBtn).toBeDefined();
-      expect(openMongoShellBtn.disabled).toBe(true);
-      expect(openMongoShellBtn.tooltipText).toBe(
-        "This feature is not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks."
-      );
+      expect(openMongoShellBtn).toBeUndefined();
     });
 
-    it("Notebooks is not enabled and is available - button should be shown and enabled", () => {
+    it("Notebooks is not enabled and is available - button should be hidden", () => {
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(true);
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
-      expect(openMongoShellBtn).toBeDefined();
-      expect(openMongoShellBtn.disabled).toBe(false);
-      expect(openMongoShellBtn.tooltipText).toBe("");
+      expect(openMongoShellBtn).toBeUndefined();
     });
 
     it("Notebooks is enabled and is unavailable - button should be shown and enabled", () => {
@@ -213,6 +203,16 @@ describe("CommandBarComponentButtonFactory tests", () => {
       expect(openMongoShellBtn.disabled).toBe(false);
       expect(openMongoShellBtn.tooltipText).toBe("");
     });
+
+    it("Notebooks is enabled and is available, terminal is unavailable due to ipRules - button should be hidden", () => {
+      mockExplorer.isNotebookEnabled = ko.observable(true);
+      mockExplorer.isNotebooksEnabledForAccount = ko.observable(true);
+      mockExplorer.isShellEnabled = ko.observable(false);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
+      expect(openMongoShellBtn).toBeUndefined();
+    });
   });
 
   describe("Open Cassandra Shell button", () => {
@@ -220,7 +220,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addCollectionText = ko.observable("mockText");
       updateUserContext({
         databaseAccount: {
           properties: {
@@ -229,7 +228,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
         } as DatabaseAccount,
       });
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
-      mockExplorer.isSparkEnabled = ko.observable(true);
 
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
       mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
@@ -273,11 +271,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     it("Notebooks is not enabled and is unavailable - button should be shown and disabled", () => {
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
-      expect(openCassandraShellBtn).toBeDefined();
-      expect(openCassandraShellBtn.disabled).toBe(true);
-      expect(openCassandraShellBtn.tooltipText).toBe(
-        "This feature is not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks."
-      );
+      expect(openCassandraShellBtn).toBeUndefined();
     });
 
     it("Notebooks is not enabled and is available - button should be shown and enabled", () => {
@@ -285,9 +279,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
-      expect(openCassandraShellBtn).toBeDefined();
-      expect(openCassandraShellBtn.disabled).toBe(false);
-      expect(openCassandraShellBtn.tooltipText).toBe("");
+      expect(openCassandraShellBtn).toBeUndefined();
     });
 
     it("Notebooks is enabled and is unavailable - button should be shown and enabled", () => {
@@ -318,7 +310,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addCollectionText = ko.observable("mockText");
       updateUserContext({
         databaseAccount: {
           properties: {
@@ -328,7 +319,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
       });
 
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
-      mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
       mockExplorer.isRunningOnNationalCloud = ko.observable(false);
@@ -380,7 +370,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
   describe("Resource token", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
-      mockExplorer.addCollectionText = ko.observable("mockText");
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
       mockExplorer.isResourceTokenCollectionNodeSelected = ko.computed(() => true);
       mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -22,7 +22,7 @@ import * as Constants from "../../../Common/Constants";
 import { configContext, Platform } from "../../../ConfigContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { userContext } from "../../../UserContext";
-import { getDatabaseName } from "../../../Utils/APITypeUtils";
+import { getCollectionName, getDatabaseName } from "../../../Utils/APITypeUtils";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import { OpenFullScreen } from "../../OpenFullScreen";
@@ -61,48 +61,40 @@ export function createStaticCommandBarButtons(container: Explorer): CommandButto
     if (container.notebookManager?.gitHubOAuthService) {
       buttons.push(createManageGitHubAccountButton(container));
     }
-  }
 
-  if (!container.isRunningOnNationalCloud()) {
-    if (!container.isNotebookEnabled()) {
-      buttons.push(createEnableNotebooksButton(container));
-    }
-
-    if (userContext.apiType === "Mongo") {
-      buttons.push(createOpenMongoTerminalButton(container));
-    }
-
-    if (userContext.apiType === "Cassandra") {
-      buttons.push(createOpenCassandraTerminalButton(container));
-    }
-  }
-
-  if (container.isNotebookEnabled()) {
     buttons.push(createOpenTerminalButton(container));
 
     buttons.push(createNotebookWorkspaceResetButton(container));
+    if (
+      (userContext.apiType === "Mongo" && container.isShellEnabled() && container.isDatabaseNodeOrNoneSelected()) ||
+      userContext.apiType === "Cassandra"
+    ) {
+      buttons.push(createDivider());
+      if (userContext.apiType === "Cassandra") {
+        buttons.push(createOpenCassandraTerminalButton(container));
+      } else {
+        buttons.push(createOpenMongoTerminalButton(container));
+      }
+    }
+  } else {
+    if (!container.isRunningOnNationalCloud()) {
+      buttons.push(createEnableNotebooksButton(container));
+    }
   }
 
   if (!container.isDatabaseNodeOrNoneSelected()) {
-    if (container.isNotebookEnabled()) {
-      buttons.push(createDivider());
-    }
+    const isQuerySupported = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
 
-    const isSqlQuerySupported = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
-    if (isSqlQuerySupported) {
+    if (isQuerySupported) {
+      buttons.push(createDivider());
       const newSqlQueryBtn = createNewSQLQueryButton(container);
       buttons.push(newSqlQueryBtn);
     }
 
-    const isSupportedOpenQueryApi =
-      userContext.apiType === "SQL" || userContext.apiType === "Mongo" || userContext.apiType === "Gremlin";
-    const isSupportedOpenQueryFromDiskApi = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
-    if (isSupportedOpenQueryApi && container.selectedNode() && container.findSelectedCollection()) {
+    if (isQuerySupported && container.selectedNode() && container.findSelectedCollection()) {
       const openQueryBtn = createOpenQueryButton(container);
       openQueryBtn.children = [createOpenQueryButton(container), createOpenQueryFromDiskButton(container)];
       buttons.push(openQueryBtn);
-    } else if (isSupportedOpenQueryFromDiskApi && container.selectedNode() && container.findSelectedCollection()) {
-      buttons.push(createOpenQueryFromDiskButton(container));
     }
 
     if (areScriptsSupported()) {
@@ -132,13 +124,17 @@ export function createContextCommandBarButtons(container: Explorer): CommandButt
   const buttons: CommandButtonComponentProps[] = [];
 
   if (!container.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo") {
-    const label = "New Shell";
+    const label = container.isShellEnabled() ? "Open Mongo Shell" : "New Shell";
     const newMongoShellBtn: CommandButtonComponentProps = {
       iconSrc: HostedTerminalIcon,
       iconAlt: label,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-        selectedCollection && selectedCollection.onNewMongoShellClick();
+        if (container.isShellEnabled()) {
+          container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
+        } else {
+          selectedCollection && selectedCollection.onNewMongoShellClick();
+        }
       },
       commandButtonLabel: label,
       ariaLabel: label,
@@ -219,7 +215,7 @@ function areScriptsSupported(): boolean {
 }
 
 function createNewCollectionGroup(container: Explorer): CommandButtonComponentProps {
-  const label = container.addCollectionText();
+  const label = `New ${getCollectionName()}`;
   return {
     iconSrc: AddCollectionIcon,
     iconAlt: label,

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -1,11 +1,4 @@
-import {
-  Dropdown,
-  ICommandBarItemProps,
-  IComponentAsProps,
-  IconType,
-  IDropdownOption,
-  IDropdownStyles,
-} from "@fluentui/react";
+import { ICommandBarItemProps, IconType, IDropdownOption, IDropdownStyles } from "@fluentui/react";
 import ChevronDownIcon from "images/Chevron_down.svg";
 import { Observable } from "knockout";
 import * as React from "react";
@@ -14,7 +7,6 @@ import { StyleConstants } from "../../../Common/Constants";
 import { MemoryUsageInfo } from "../../../Contracts/DataModels";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import { ArcadiaMenuPicker } from "../../Controls/Arcadia/ArcadiaMenuPicker";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import { MemoryTrackerComponent } from "./MemoryTrackerComponent";
 
@@ -151,24 +143,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
           TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label: option.text });
         };
 
-        result.commandBarButtonAs = (props: IComponentAsProps<ICommandBarItemProps>) => {
-          return (
-            <Dropdown
-              placeholder={btn.dropdownPlaceholder}
-              defaultSelectedKey={btn.dropdownSelectedKey}
-              onChange={onDropdownChange}
-              options={btn.children.map((child: CommandButtonComponentProps) => ({
-                key: child.dropdownItemKey,
-                text: child.commandButtonLabel,
-              }))}
-              styles={dropdownStyles}
-            />
-          );
-        };
-      }
-
-      if (btn.isArcadiaPicker && btn.arcadiaProps) {
-        result.commandBarButtonAs = () => <ArcadiaMenuPicker {...btn.arcadiaProps} />;
+        return result;
       }
 
       return result;

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -36,7 +36,6 @@ import * as Constants from "../../../Common/Constants";
 import { Areas } from "../../../Common/Constants";
 import { Action as TelemetryAction, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import { decryptJWTToken } from "../../../Utils/AuthorizationUtils";
 import { logConsoleError, logConsoleInfo } from "../../../Utils/NotificationConsoleUtils";
 import * as FileSystemUtil from "../FileSystemUtil";
 import * as cdbActions from "../NotebookComponent/actions";
@@ -105,11 +104,6 @@ const formWebSocketURL = (serverConfig: NotebookServiceConfig, kernelId: string,
     params.append("session_id", sessionId);
   }
 
-  const userId = getUserPuid();
-  if (userId) {
-    params.append("user_id", userId);
-  }
-
   const q = params.toString();
   const suffix = q !== "" ? `?${q}` : "";
 
@@ -289,7 +283,6 @@ export const launchWebSocketKernelEpic = (
         return EMPTY;
       }
       const serverConfig: NotebookServiceConfig = selectors.serverConfig(host);
-      serverConfig.userPuid = getUserPuid();
 
       const {
         payload: { kernelSpecName, cwd, kernelRef, contentRef },
@@ -766,25 +759,6 @@ const executeFocusedCellAndFocusNextEpic = (
   );
 };
 
-function getUserPuid(): string {
-  const arcadiaToken = window.dataExplorer && window.dataExplorer.arcadiaToken();
-  if (!arcadiaToken) {
-    return undefined;
-  }
-
-  let userPuid;
-  try {
-    const tokenPayload = decryptJWTToken(arcadiaToken);
-    if (tokenPayload && tokenPayload.hasOwnProperty("puid")) {
-      userPuid = tokenPayload.puid;
-    }
-  } catch (error) {
-    // ignore
-  }
-
-  return userPuid;
-}
-
 /**
  * Close tab if mimetype not supported
  * @param action$

src/Explorer/Notebook/NotebookRenderer/decorators/hijack-scroll/index.tsx

@@ -1,12 +1,11 @@
 /* eslint jsx-a11y/no-static-element-interactions: 0 */
 /* eslint jsx-a11y/click-events-have-key-events: 0 */
 
+import { actions, AppState, ContentRef, selectors } from "@nteract/core";
 import React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 
-import { actions, selectors, ContentRef, AppState } from "@nteract/core";
-
 interface ComponentProps {
   id: string;
   contentRef: ContentRef;
@@ -70,7 +69,7 @@ export class HijackScroll extends React.Component<Props> {
   }
 }
 
-const makeMapStateToProps = (initialState: AppState, ownProps: ComponentProps) => {
+const makeMapStateToProps = (_initialState: AppState, ownProps: ComponentProps) => {
   const mapStateToProps = (state: AppState) => {
     const { id, contentRef } = ownProps;
     const model = selectors.model(state, { contentRef });
@@ -87,7 +86,7 @@ const makeMapStateToProps = (initialState: AppState, ownProps: ComponentProps) =
   return mapStateToProps;
 };
 
-const makeMapDispatchToProps = (initialDispatch: Dispatch, ownProps: ComponentProps) => {
+const makeMapDispatchToProps = (_initialDispatch: Dispatch, ownProps: ComponentProps) => {
   const mapDispatchToProps = (dispatch: Dispatch) => ({
     selectCell: () => dispatch(actions.focusCell({ id: ownProps.id, contentRef: ownProps.contentRef })),
   });

src/Explorer/Notebook/NotebookRenderer/decorators/kbd-shortcuts/index.tsx

@@ -1,11 +1,10 @@
+import { CellId } from "@nteract/commutable";
+import { actions, AppState, ContentRef, selectors } from "@nteract/core";
 import Immutable from "immutable";
 import React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 
-import { CellId } from "@nteract/commutable";
-import { actions, AppState, ContentRef, selectors } from "@nteract/core";
-
 interface ComponentProps {
   contentRef: ContentRef;
   children: React.ReactNode;
@@ -100,7 +99,7 @@ export class KeyboardShortcuts extends React.Component<Props> {
   }
 }
 
-export const makeMapStateToProps = (state: AppState, ownProps: ComponentProps) => {
+export const makeMapStateToProps = (_state: AppState, ownProps: ComponentProps) => {
   const { contentRef } = ownProps;
   const mapStateToProps = (state: AppState) => {
     const model = selectors.model(state, { contentRef });

src/Explorer/Notebook/SchemaAnalyzer/SchemaAnalyzerHeader.tsx

@@ -13,7 +13,7 @@ import * as React from "react";
 type SchemaAnalyzerHeaderProps = {
   isKernelIdle: boolean;
   isKernelBusy: boolean;
-  onSampleSizeUpdated: (sampleSize: string) => void;
+  onSampleSizeUpdated: (sampleSize?: string) => void;
   onAnalyzeButtonClick: (filter: string, sampleSize: string) => void;
 };
 
@@ -30,15 +30,15 @@ export const SchemaAnalyzerHeader = ({
   onSampleSizeUpdated,
   onAnalyzeButtonClick,
 }: SchemaAnalyzerHeaderProps): JSX.Element => {
-  const [filter, setFilter] = React.useState<string>(DefaultFilter);
-  const [sampleSize, setSampleSize] = React.useState<string>(DefaultSampleSize);
+  const [filter, setFilter] = React.useState<string | undefined>(DefaultFilter);
+  const [sampleSize, setSampleSize] = React.useState<string | undefined>(DefaultSampleSize);
 
   return (
     <Stack horizontal tokens={{ childrenGap: 10 }}>
       <Stack.Item grow>
         <TextField
           value={filter}
-          onChange={(event, newValue) => setFilter(newValue)}
+          onChange={(_event, newValue?: string) => setFilter(newValue)}
           label="Filter"
           placeholder={FilterPlaceholder}
           disabled={!isKernelIdle}
@@ -47,7 +47,7 @@ export const SchemaAnalyzerHeader = ({
       <Stack.Item>
         <TextField
           value={sampleSize}
-          onChange={(event, newValue) => {
+          onChange={(_event, newValue?: string) => {
             const num = Number(newValue);
             if (!newValue || (num >= MinSampleSize && num <= MaxSampleSize)) {
               setSampleSize(newValue);

src/Explorer/OpenActions.test.ts

@@ -3,7 +3,6 @@ import { ActionContracts } from "../Contracts/ExplorerContracts";
 import * as ViewModels from "../Contracts/ViewModels";
 import Explorer from "./Explorer";
 import { handleOpenAction } from "./OpenActions";
-import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
 
 describe("OpenActions", () => {
   describe("handleOpenAction", () => {
@@ -15,8 +14,6 @@ describe("OpenActions", () => {
     beforeEach(() => {
       explorer = {} as Explorer;
       explorer.onNewCollectionClicked = jest.fn();
-      explorer.cassandraAddCollectionPane = {} as CassandraAddCollectionPane;
-      explorer.cassandraAddCollectionPane.open = jest.fn();
 
       database = {
         id: ko.observable("db"),
@@ -64,28 +61,6 @@ describe("OpenActions", () => {
         expect(actionHandled).toBe(true);
       });
 
-      describe("CassandraAddCollection pane kind", () => {
-        it("string value should call cassandraAddCollectionPane.open", () => {
-          const action = {
-            actionType: "OpenPane",
-            paneKind: "CassandraAddCollection",
-          };
-
-          const actionHandled = handleOpenAction(action, [], explorer);
-          expect(explorer.cassandraAddCollectionPane.open).toHaveBeenCalled();
-        });
-
-        it("enum value should call cassandraAddCollectionPane.open", () => {
-          const action = {
-            actionType: "OpenPane",
-            paneKind: ActionContracts.PaneKind.CassandraAddCollection,
-          };
-
-          const actionHandled = handleOpenAction(action, [], explorer);
-          expect(explorer.cassandraAddCollectionPane.open).toHaveBeenCalled();
-        });
-      });
-
       describe("AddCollection pane kind", () => {
         it("string value should call explorer.onNewCollectionClicked", () => {
           const action = {

src/Explorer/OpenActions.ts

@@ -145,7 +145,7 @@ function openPane(action: ActionContracts.OpenPane, explorer: Explorer) {
     action.paneKind === ActionContracts.PaneKind.CassandraAddCollection ||
     (<any>action).paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.CassandraAddCollection]
   ) {
-    explorer.cassandraAddCollectionPane.open();
+    explorer.openCassandraAddCollectionPane();
   } else if (
     action.paneKind === ActionContracts.PaneKind.GlobalSettings ||
     (<any>action).paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.GlobalSettings]

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -20,7 +20,7 @@ import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils"
 import { configContext, Platform } from "../../ConfigContext";
 import * as DataModels from "../../Contracts/DataModels";
 import { SubscriptionType } from "../../Contracts/SubscriptionType";
-import { CollectionCreation, IndexingPolicies } from "../../Shared/Constants";
+import { CollectionCreation } from "../../Shared/Constants";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
@@ -41,6 +41,40 @@ export interface AddCollectionPanelProps {
   databaseId?: string;
 }
 
+const SharedDatabaseDefault: DataModels.IndexingPolicy = {
+  indexingMode: "consistent",
+  automatic: true,
+  includedPaths: [],
+  excludedPaths: [
+    {
+      path: "/*",
+    },
+  ],
+};
+
+const AllPropertiesIndexed: DataModels.IndexingPolicy = {
+  indexingMode: "consistent",
+  automatic: true,
+  includedPaths: [
+    {
+      path: "/*",
+      indexes: [
+        {
+          kind: "Range",
+          dataType: "Number",
+          precision: -1,
+        },
+        {
+          kind: "Range",
+          dataType: "String",
+          precision: -1,
+        },
+      ],
+    },
+  ],
+  excludedPaths: [],
+};
+
 export interface AddCollectionPanelState {
   createNewDatabase: boolean;
   newDatabaseId: string;
@@ -826,8 +860,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       case "SQL":
       case "Mongo":
         return true;
-      case "Cassandra":
-        return this.props.explorer.hasStorageAnalyticsAfecFeature();
       default:
         return false;
     }
@@ -953,14 +985,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     const partitionKey: DataModels.PartitionKey = partitionKeyString
       ? {
           paths: [partitionKeyString],
-          kind: Constants.BackendDefaults.partitionKeyKind,
+          kind: "Hash",
           version: partitionKeyVersion,
         }
       : undefined;
 
     const indexingPolicy: DataModels.IndexingPolicy = this.state.enableIndexing
-      ? IndexingPolicies.AllPropertiesIndexed
-      : IndexingPolicies.SharedDatabaseDefault;
+      ? AllPropertiesIndexed
+      : SharedDatabaseDefault;
 
     const telemetryData = {
       database: {
@@ -990,13 +1022,16 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
     let offerThroughput: number;
     let autoPilotMaxThroughput: number;
-    if (this.state.createNewDatabase) {
-      if (this.isNewDatabaseAutoscale) {
-        autoPilotMaxThroughput = this.newDatabaseThroughput;
-      } else {
-        offerThroughput = this.newDatabaseThroughput;
+
+    if (databaseLevelThroughput) {
+      if (this.state.createNewDatabase) {
+        if (this.isNewDatabaseAutoscale) {
+          autoPilotMaxThroughput = this.newDatabaseThroughput;
+        } else {
+          offerThroughput = this.newDatabaseThroughput;
+        }
       }
-    } else if (!databaseLevelThroughput) {
+    } else {
       if (this.isCollectionAutoscale) {
         autoPilotMaxThroughput = this.collectionThroughput;
       } else {

src/Explorer/Panes/CassandraAddCollectionPane.ts

@@ -1,539 +0,0 @@
-import * as ko from "knockout";
-import * as _ from "underscore";
-import * as Constants from "../../Common/Constants";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { configContext, Platform } from "../../ConfigContext";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
-import * as SharedConstants from "../../Shared/Constants";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
-import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
-import * as PricingUtils from "../../Utils/PricingUtils";
-import { CassandraAPIDataClient } from "../Tables/TableDataClient";
-import { ContextualPaneBase } from "./ContextualPaneBase";
-
-export default class CassandraAddCollectionPane extends ContextualPaneBase {
-  public createTableQuery: ko.Observable<string>;
-  public keyspaceId: ko.Observable<string>;
-  public maxThroughputRU: ko.Observable<number>;
-  public minThroughputRU: ko.Observable<number>;
-  public tableId: ko.Observable<string>;
-  public throughput: ko.Observable<number>;
-  public throughputRangeText: ko.Computed<string>;
-  public sharedThroughputRangeText: ko.Computed<string>;
-  public userTableQuery: ko.Observable<string>;
-  public requestUnitsUsageCostDedicated: ko.Computed<string>;
-  public requestUnitsUsageCostShared: ko.Computed<string>;
-  public costsVisible: ko.PureComputed<boolean>;
-  public keyspaceHasSharedOffer: ko.Observable<boolean>;
-  public keyspaceIds: ko.ObservableArray<string>;
-  public keyspaceThroughput: ko.Observable<number>;
-  public keyspaceCreateNew: ko.Observable<boolean>;
-  public dedicateTableThroughput: ko.Observable<boolean>;
-  public canRequestSupport: ko.PureComputed<boolean>;
-  public throughputSpendAckText: ko.Observable<string>;
-  public throughputSpendAck: ko.Observable<boolean>;
-  public sharedThroughputSpendAck: ko.Observable<boolean>;
-  public sharedThroughputSpendAckText: ko.Observable<string>;
-  public isAutoPilotSelected: ko.Observable<boolean>;
-  public isSharedAutoPilotSelected: ko.Observable<boolean>;
-  public selectedAutoPilotThroughput: ko.Observable<number>;
-  public sharedAutoPilotThroughput: ko.Observable<number>;
-  public autoPilotUsageCost: ko.Computed<string>;
-  public sharedThroughputSpendAckVisible: ko.Computed<boolean>;
-  public throughputSpendAckVisible: ko.Computed<boolean>;
-  public canExceedMaximumValue: ko.PureComputed<boolean>;
-  public isFreeTierAccount: ko.Computed<boolean>;
-  public ruToolTipText: ko.Computed<string>;
-  public canConfigureThroughput: ko.PureComputed<boolean>;
-
-  private keyspaceOffers: Map<string, DataModels.Offer>;
-
-  constructor(options: ViewModels.PaneOptions) {
-    super(options);
-    this.title("Add Table");
-    this.createTableQuery = ko.observable<string>("CREATE TABLE ");
-    this.keyspaceCreateNew = ko.observable<boolean>(true);
-    this.ruToolTipText = ko.pureComputed(() => PricingUtils.getRuToolTipText());
-    this.canConfigureThroughput = ko.pureComputed(() => !this.container.isServerlessEnabled());
-    this.keyspaceOffers = new Map();
-    this.keyspaceIds = ko.observableArray<string>();
-    this.keyspaceHasSharedOffer = ko.observable<boolean>(false);
-    this.keyspaceThroughput = ko.observable<number>();
-    this.keyspaceId = ko.observable<string>("");
-    this.keyspaceId.subscribe((keyspaceId: string) => {
-      if (this.keyspaceIds.indexOf(keyspaceId) >= 0) {
-        this.keyspaceHasSharedOffer(this.keyspaceOffers.has(keyspaceId));
-      }
-    });
-    this.keyspaceId.extend({ rateLimit: 100 });
-    this.dedicateTableThroughput = ko.observable<boolean>(false);
-    const throughputDefaults = this.container.collectionCreationDefaults.throughput;
-    this.maxThroughputRU = ko.observable<number>(throughputDefaults.unlimitedmax);
-    this.minThroughputRU = ko.observable<number>(throughputDefaults.unlimitedmin);
-
-    this.canExceedMaximumValue = ko.pureComputed(() => this.container.canExceedMaximumValue());
-
-    this.isFreeTierAccount = ko.computed<boolean>(() => {
-      return userContext?.databaseAccount?.properties?.enableFreeTier;
-    });
-
-    this.tableId = ko.observable<string>("");
-    this.isAutoPilotSelected = ko.observable<boolean>(false);
-    this.isSharedAutoPilotSelected = ko.observable<boolean>(false);
-    this.selectedAutoPilotThroughput = ko.observable<number>();
-    this.sharedAutoPilotThroughput = ko.observable<number>();
-    this.throughput = ko.observable<number>();
-    this.throughputRangeText = ko.pureComputed<string>(() => {
-      const enableAutoPilot = this.isAutoPilotSelected();
-      if (!enableAutoPilot) {
-        return `Throughput (${this.minThroughputRU().toLocaleString()} - ${this.maxThroughputRU().toLocaleString()} RU/s)`;
-      }
-      return AutoPilotUtils.getAutoPilotHeaderText();
-    });
-    this.sharedThroughputRangeText = ko.pureComputed<string>(() => {
-      if (this.isSharedAutoPilotSelected()) {
-        return AutoPilotUtils.getAutoPilotHeaderText();
-      }
-      return `Throughput (${this.minThroughputRU().toLocaleString()} - ${this.maxThroughputRU().toLocaleString()} RU/s)`;
-    });
-    this.userTableQuery = ko.observable<string>("(userid int, name text, email text, PRIMARY KEY (userid))");
-    this.keyspaceId.subscribe((keyspaceId) => {
-      this.createTableQuery(`CREATE TABLE ${keyspaceId}.`);
-    });
-
-    this.throughputSpendAckText = ko.observable<string>();
-    this.throughputSpendAck = ko.observable<boolean>(false);
-    this.sharedThroughputSpendAck = ko.observable<boolean>(false);
-    this.sharedThroughputSpendAckText = ko.observable<string>();
-
-    this.resetData();
-
-    this.requestUnitsUsageCostDedicated = ko.computed(() => {
-      const { databaseAccount: account } = userContext;
-      if (!account) {
-        return "";
-      }
-
-      const regions =
-        (account &&
-          account.properties &&
-          account.properties.readLocations &&
-          account.properties.readLocations.length) ||
-        1;
-      const multimaster = (account && account.properties && account.properties.enableMultipleWriteLocations) || false;
-      const offerThroughput: number = this.throughput();
-      let estimatedSpend: string;
-      let estimatedDedicatedSpendAcknowledge: string;
-      if (!this.isAutoPilotSelected()) {
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
-          offerThroughput,
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
-        estimatedDedicatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
-          offerThroughput,
-          userContext.portalEnv,
-          regions,
-          multimaster,
-          this.isAutoPilotSelected()
-        );
-      } else {
-        estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
-          this.selectedAutoPilotThroughput(),
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
-        estimatedDedicatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
-          this.selectedAutoPilotThroughput(),
-          userContext.portalEnv,
-          regions,
-          multimaster,
-          this.isAutoPilotSelected()
-        );
-      }
-      this.throughputSpendAckText(estimatedDedicatedSpendAcknowledge);
-      return estimatedSpend;
-    });
-
-    this.requestUnitsUsageCostShared = ko.computed(() => {
-      const { databaseAccount: account } = userContext;
-      if (!account) {
-        return "";
-      }
-
-      const regions = account?.properties?.readLocations?.length || 1;
-      const multimaster = account?.properties?.enableMultipleWriteLocations || false;
-      let estimatedSpend: string;
-      let estimatedSharedSpendAcknowledge: string;
-      if (!this.isSharedAutoPilotSelected()) {
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
-          this.keyspaceThroughput(),
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
-        estimatedSharedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
-          this.keyspaceThroughput(),
-          userContext.portalEnv,
-          regions,
-          multimaster,
-          this.isSharedAutoPilotSelected()
-        );
-      } else {
-        estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
-          this.sharedAutoPilotThroughput(),
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
-        estimatedSharedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
-          this.sharedAutoPilotThroughput(),
-          userContext.portalEnv,
-          regions,
-          multimaster,
-          this.isSharedAutoPilotSelected()
-        );
-      }
-      this.sharedThroughputSpendAckText(estimatedSharedSpendAcknowledge);
-      return estimatedSpend;
-    });
-
-    this.costsVisible = ko.pureComputed(() => {
-      return configContext.platform !== Platform.Emulator;
-    });
-
-    this.canRequestSupport = ko.pureComputed(() => {
-      if (configContext.platform !== Platform.Emulator && !userContext.isTryCosmosDBSubscription) {
-        const offerThroughput: number = this.throughput();
-        return offerThroughput <= 100000;
-      }
-
-      return false;
-    });
-
-    this.sharedThroughputSpendAckVisible = ko.computed<boolean>(() => {
-      const autoscaleThroughput = this.sharedAutoPilotThroughput() * 1;
-      if (this.isSharedAutoPilotSelected()) {
-        return autoscaleThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K;
-      }
-
-      return this.keyspaceThroughput() > SharedConstants.CollectionCreation.DefaultCollectionRUs100K;
-    });
-
-    this.throughputSpendAckVisible = ko.pureComputed<boolean>(() => {
-      const autoscaleThroughput = this.selectedAutoPilotThroughput() * 1;
-      if (this.isAutoPilotSelected()) {
-        return autoscaleThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K;
-      }
-
-      return this.throughput() > SharedConstants.CollectionCreation.DefaultCollectionRUs100K;
-    });
-
-    if (!!this.container) {
-      const updateKeyspaceIds: (keyspaces: ViewModels.Database[]) => void = (
-        newKeyspaceIds: ViewModels.Database[]
-      ): void => {
-        const cachedKeyspaceIdsList = _.map(newKeyspaceIds, (keyspace: ViewModels.Database) => {
-          if (keyspace && keyspace.offer && !!keyspace.offer()) {
-            this.keyspaceOffers.set(keyspace.id(), keyspace.offer());
-          }
-          return keyspace.id();
-        });
-        this.keyspaceIds(cachedKeyspaceIdsList);
-      };
-      this.container.databases.subscribe((newDatabases: ViewModels.Database[]) => updateKeyspaceIds(newDatabases));
-      updateKeyspaceIds(this.container.databases());
-    }
-
-    this.autoPilotUsageCost = ko.pureComputed<string>(() => {
-      const autoPilot = this._getAutoPilot();
-      if (!autoPilot) {
-        return "";
-      }
-      const isDatabaseThroughput: boolean = this.keyspaceCreateNew();
-      return PricingUtils.getAutoPilotV3SpendHtml(autoPilot.maxThroughput, isDatabaseThroughput);
-    });
-  }
-
-  public decreaseThroughput() {
-    let offerThroughput: number = this.throughput();
-
-    if (offerThroughput > this.minThroughputRU()) {
-      offerThroughput -= 100;
-      this.throughput(offerThroughput);
-    }
-  }
-
-  public increaseThroughput() {
-    let offerThroughput: number = this.throughput();
-
-    if (offerThroughput < this.maxThroughputRU()) {
-      offerThroughput += 100;
-      this.throughput(offerThroughput);
-    }
-  }
-
-  public open() {
-    super.open();
-    if (!this.container.isServerlessEnabled()) {
-      this.isAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
-    }
-    const addCollectionPaneOpenMessage = {
-      collection: ko.toJS({
-        id: this.tableId(),
-        storage: Constants.BackendDefaults.multiPartitionStorageInGb,
-        offerThroughput: this.throughput(),
-        partitionKey: "",
-        databaseId: this.keyspaceId(),
-      }),
-      subscriptionType: userContext.subscriptionType,
-      subscriptionQuotaId: userContext.quotaId,
-      defaultsCheck: {
-        storage: "u",
-        throughput: this.throughput(),
-        flight: userContext.addCollectionFlight,
-      },
-      dataExplorerArea: Constants.Areas.ContextualPane,
-    };
-    const focusElement = document.getElementById("keyspace-id");
-    focusElement && focusElement.focus();
-    TelemetryProcessor.trace(Action.CreateCollection, ActionModifiers.Open, addCollectionPaneOpenMessage);
-  }
-
-  public submit() {
-    if (!this._isValid()) {
-      return;
-    }
-    this.isExecuting(true);
-    const autoPilotCommand = `cosmosdb_autoscale_max_throughput`;
-    let createTableAndKeyspacePromise: Q.Promise<any>;
-    const toCreateKeyspace: boolean = this.keyspaceCreateNew();
-    const useAutoPilotForKeyspace: boolean = this.isSharedAutoPilotSelected() && !!this.sharedAutoPilotThroughput();
-    const createKeyspaceQueryPrefix: string = `CREATE KEYSPACE ${this.keyspaceId().trim()} WITH REPLICATION = { 'class' : 'SimpleStrategy', 'replication_factor' : 3 }`;
-    const createKeyspaceQuery: string = this.keyspaceHasSharedOffer()
-      ? useAutoPilotForKeyspace
-        ? `${createKeyspaceQueryPrefix} AND ${autoPilotCommand}=${this.sharedAutoPilotThroughput()};`
-        : `${createKeyspaceQueryPrefix} AND cosmosdb_provisioned_throughput=${this.keyspaceThroughput()};`
-      : `${createKeyspaceQueryPrefix};`;
-    const createTableQueryPrefix: string = `${this.createTableQuery()}${this.tableId().trim()} ${this.userTableQuery()}`;
-    let createTableQuery: string;
-
-    if (this.canConfigureThroughput() && (this.dedicateTableThroughput() || !this.keyspaceHasSharedOffer())) {
-      if (this.isAutoPilotSelected() && this.selectedAutoPilotThroughput()) {
-        createTableQuery = `${createTableQueryPrefix} WITH ${autoPilotCommand}=${this.selectedAutoPilotThroughput()};`;
-      } else {
-        createTableQuery = `${createTableQueryPrefix} WITH cosmosdb_provisioned_throughput=${this.throughput()};`;
-      }
-    } else {
-      createTableQuery = `${createTableQueryPrefix};`;
-    }
-
-    const addCollectionPaneStartMessage = {
-      collection: ko.toJS({
-        id: this.tableId(),
-        storage: Constants.BackendDefaults.multiPartitionStorageInGb,
-        offerThroughput: this.throughput(),
-        partitionKey: "",
-        databaseId: this.keyspaceId(),
-        hasDedicatedThroughput: this.dedicateTableThroughput(),
-      }),
-      keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
-      subscriptionType: userContext.subscriptionType,
-      subscriptionQuotaId: userContext.quotaId,
-      defaultsCheck: {
-        storage: "u",
-        throughput: this.throughput(),
-        flight: userContext.addCollectionFlight,
-      },
-      dataExplorerArea: Constants.Areas.ContextualPane,
-      toCreateKeyspace: toCreateKeyspace,
-      createKeyspaceQuery: createKeyspaceQuery,
-      createTableQuery: createTableQuery,
-    };
-    const startKey: number = TelemetryProcessor.traceStart(Action.CreateCollection, addCollectionPaneStartMessage);
-    const { databaseAccount } = userContext;
-    if (toCreateKeyspace) {
-      createTableAndKeyspacePromise = (<CassandraAPIDataClient>this.container.tableDataClient).createTableAndKeyspace(
-        databaseAccount?.properties.cassandraEndpoint,
-        databaseAccount?.id,
-        this.container,
-        createTableQuery,
-        createKeyspaceQuery
-      );
-    } else {
-      createTableAndKeyspacePromise = (<CassandraAPIDataClient>this.container.tableDataClient).createTableAndKeyspace(
-        databaseAccount?.properties.cassandraEndpoint,
-        databaseAccount?.id,
-        this.container,
-        createTableQuery
-      );
-    }
-    createTableAndKeyspacePromise.then(
-      () => {
-        this.container.refreshAllDatabases();
-        this.isExecuting(false);
-        this.close();
-        const addCollectionPaneSuccessMessage = {
-          collection: ko.toJS({
-            id: this.tableId(),
-            storage: Constants.BackendDefaults.multiPartitionStorageInGb,
-            offerThroughput: this.throughput(),
-            partitionKey: "",
-            databaseId: this.keyspaceId(),
-            hasDedicatedThroughput: this.dedicateTableThroughput(),
-          }),
-          keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
-          subscriptionType: userContext.subscriptionType,
-          subscriptionQuotaId: userContext.quotaId,
-          defaultsCheck: {
-            storage: "u",
-            throughput: this.throughput(),
-            flight: userContext.addCollectionFlight,
-          },
-          dataExplorerArea: Constants.Areas.ContextualPane,
-          toCreateKeyspace: toCreateKeyspace,
-          createKeyspaceQuery: createKeyspaceQuery,
-          createTableQuery: createTableQuery,
-        };
-        TelemetryProcessor.traceSuccess(Action.CreateCollection, addCollectionPaneSuccessMessage, startKey);
-      },
-      (error) => {
-        const errorMessage = getErrorMessage(error);
-        this.formErrors(errorMessage);
-        this.isExecuting(false);
-        const addCollectionPaneFailedMessage = {
-          collection: {
-            id: this.tableId(),
-            storage: Constants.BackendDefaults.multiPartitionStorageInGb,
-            offerThroughput: this.throughput(),
-            partitionKey: "",
-            databaseId: this.keyspaceId(),
-            hasDedicatedThroughput: this.dedicateTableThroughput(),
-          },
-          keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
-          subscriptionType: userContext.subscriptionType,
-          subscriptionQuotaId: userContext.quotaId,
-          defaultsCheck: {
-            storage: "u",
-            throughput: this.throughput(),
-            flight: userContext.addCollectionFlight,
-          },
-          dataExplorerArea: Constants.Areas.ContextualPane,
-          toCreateKeyspace: toCreateKeyspace,
-          createKeyspaceQuery: createKeyspaceQuery,
-          createTableQuery: createTableQuery,
-          error: errorMessage,
-          errorStack: getErrorStack(error),
-        };
-        TelemetryProcessor.traceFailure(Action.CreateCollection, addCollectionPaneFailedMessage, startKey);
-      }
-    );
-  }
-
-  public resetData() {
-    super.resetData();
-    const throughputDefaults = this.container.collectionCreationDefaults.throughput;
-    this.isAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
-    this.isSharedAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
-    this.selectedAutoPilotThroughput(AutoPilotUtils.minAutoPilotThroughput);
-    this.sharedAutoPilotThroughput(AutoPilotUtils.minAutoPilotThroughput);
-    this.throughput(AddCollectionUtility.getMaxThroughput(this.container.collectionCreationDefaults, this.container));
-    this.keyspaceThroughput(throughputDefaults.shared);
-    this.maxThroughputRU(throughputDefaults.unlimitedmax);
-    this.minThroughputRU(throughputDefaults.unlimitedmin);
-    this.createTableQuery("CREATE TABLE ");
-    this.userTableQuery("(userid int, name text, email text, PRIMARY KEY (userid))");
-    this.tableId("");
-    this.keyspaceId("");
-    this.throughputSpendAck(false);
-    this.keyspaceHasSharedOffer(false);
-    this.keyspaceCreateNew(true);
-  }
-
-  private _isValid(): boolean {
-    const throughput = this.throughput();
-    const keyspaceThroughput = this.keyspaceThroughput();
-
-    const sharedAutoscaleThroughput = this.sharedAutoPilotThroughput() * 1;
-    if (
-      this.isSharedAutoPilotSelected() &&
-      sharedAutoscaleThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K &&
-      !this.sharedThroughputSpendAck()
-    ) {
-      this.formErrors(`Please acknowledge the estimated monthly spend.`);
-      return false;
-    }
-
-    const dedicatedAutoscaleThroughput = this.selectedAutoPilotThroughput() * 1;
-    if (
-      this.isAutoPilotSelected() &&
-      dedicatedAutoscaleThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K &&
-      !this.throughputSpendAck()
-    ) {
-      this.formErrors(`Please acknowledge the estimated monthly spend.`);
-      return false;
-    }
-
-    if (
-      (this.keyspaceCreateNew() && this.keyspaceHasSharedOffer() && this.isSharedAutoPilotSelected()) ||
-      this.isAutoPilotSelected()
-    ) {
-      const autoPilot = this._getAutoPilot();
-      if (
-        !autoPilot ||
-        !autoPilot.maxThroughput ||
-        !AutoPilotUtils.isValidAutoPilotThroughput(autoPilot.maxThroughput)
-      ) {
-        this.formErrors(
-          `Please enter a value greater than ${AutoPilotUtils.minAutoPilotThroughput} for autopilot throughput`
-        );
-        return false;
-      }
-      return true;
-    }
-
-    if (throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && !this.throughputSpendAck()) {
-      this.formErrors(`Please acknowledge the estimated daily spend.`);
-      return false;
-    }
-
-    if (
-      this.keyspaceHasSharedOffer() &&
-      this.keyspaceCreateNew() &&
-      keyspaceThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K &&
-      !this.sharedThroughputSpendAck()
-    ) {
-      this.formErrors("Please acknowledge the estimated daily spend");
-      return false;
-    }
-
-    return true;
-  }
-
-  private _getAutoPilot(): DataModels.AutoPilotCreationSettings {
-    if (
-      this.keyspaceCreateNew() &&
-      this.keyspaceHasSharedOffer() &&
-      this.isSharedAutoPilotSelected() &&
-      this.sharedAutoPilotThroughput()
-    ) {
-      return {
-        maxThroughput: this.sharedAutoPilotThroughput() * 1,
-      };
-    }
-
-    if (this.selectedAutoPilotThroughput()) {
-      return {
-        maxThroughput: this.selectedAutoPilotThroughput() * 1,
-      };
-    }
-
-    return undefined;
-  }
-}

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.test.tsx

@@ -0,0 +1,32 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { shallow } from "enzyme";
+import React from "react";
+import Explorer from "../../Explorer";
+import { CassandraAPIDataClient } from "../../Tables/TableDataClient";
+import { CassandraAddCollectionPane } from "./CassandraAddCollectionPane";
+const props = {
+  explorer: new Explorer(),
+  closePanel: (): void => undefined,
+  cassandraApiClient: new CassandraAPIDataClient(),
+};
+
+describe("CassandraAddCollectionPane  Pane", () => {
+  beforeEach(() => render(<CassandraAddCollectionPane {...props} />));
+
+  it("should render Default properly", () => {
+    const wrapper = shallow(<CassandraAddCollectionPane {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+  it("click on is Create new keyspace", () => {
+    fireEvent.click(screen.getByLabelText("Create new keyspace"));
+    expect(screen.getByLabelText("Provision keyspace throughput")).toBeDefined();
+  });
+  it("click on Use existing", () => {
+    fireEvent.click(screen.getByLabelText("Use existing keyspace"));
+  });
+
+  it("Enter Keyspace name", () => {
+    fireEvent.change(screen.getByLabelText("Keyspace id"), { target: { value: "unittest1" } });
+    expect(screen.getByLabelText("CREATE TABLE unittest1.")).toBeDefined();
+  });
+});

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx

@@ -0,0 +1,427 @@
+import { Label, Stack, TextField } from "@fluentui/react";
+import React, { FunctionComponent, useEffect, useState } from "react";
+import * as _ from "underscore";
+import * as Constants from "../../../Common/Constants";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
+import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import * as AddCollectionUtility from "../../../Shared/AddCollectionUtility";
+import * as SharedConstants from "../../../Shared/Constants";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../../UserContext";
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import { ThroughputInput } from "../../Controls/ThroughputInput/ThroughputInput";
+import Explorer from "../../Explorer";
+import { CassandraAPIDataClient } from "../../Tables/TableDataClient";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
+
+export interface CassandraAddCollectionPaneProps {
+  explorer: Explorer;
+  closePanel: () => void;
+  cassandraApiClient: CassandraAPIDataClient;
+}
+
+export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectionPaneProps> = ({
+  explorer: container,
+  closePanel,
+  cassandraApiClient,
+}: CassandraAddCollectionPaneProps) => {
+  const throughputDefaults = userContext.collectionCreationDefaults.throughput;
+  const [createTableQuery, setCreateTableQuery] = useState<string>("CREATE TABLE ");
+  const [keyspaceId, setKeyspaceId] = useState<string>("");
+  const [tableId, setTableId] = useState<string>("");
+  const [throughput, setThroughput] = useState<number>(
+    AddCollectionUtility.getMaxThroughput(userContext.collectionCreationDefaults, container)
+  );
+
+  const [isAutoPilotSelected, setIsAutoPilotSelected] = useState<boolean>(userContext.features.autoscaleDefault);
+
+  const [isSharedAutoPilotSelected, setIsSharedAutoPilotSelected] = useState<boolean>(
+    userContext.features.autoscaleDefault
+  );
+
+  const [userTableQuery, setUserTableQuery] = useState<string>(
+    "(userid int, name text, email text, PRIMARY KEY (userid))"
+  );
+
+  const [keyspaceHasSharedOffer, setKeyspaceHasSharedOffer] = useState<boolean>(false);
+  const [keyspaceIds, setKeyspaceIds] = useState<string[]>([]);
+  const [keyspaceThroughput, setKeyspaceThroughput] = useState<number>(throughputDefaults.shared);
+  const [keyspaceCreateNew, setKeyspaceCreateNew] = useState<boolean>(true);
+  const [dedicateTableThroughput, setDedicateTableThroughput] = useState<boolean>(false);
+  const [throughputSpendAck, setThroughputSpendAck] = useState<boolean>(false);
+  const [sharedThroughputSpendAck, setSharedThroughputSpendAck] = useState<boolean>(false);
+
+  const { minAutoPilotThroughput: selectedAutoPilotThroughput } = AutoPilotUtils;
+  const { minAutoPilotThroughput: sharedAutoPilotThroughput } = AutoPilotUtils;
+
+  const _getAutoPilot = (): DataModels.AutoPilotCreationSettings => {
+    if (keyspaceCreateNew && keyspaceHasSharedOffer && isSharedAutoPilotSelected && sharedAutoPilotThroughput) {
+      return {
+        maxThroughput: sharedAutoPilotThroughput * 1,
+      };
+    }
+
+    if (selectedAutoPilotThroughput) {
+      return {
+        maxThroughput: selectedAutoPilotThroughput * 1,
+      };
+    }
+
+    return undefined;
+  };
+
+  const isFreeTierAccount: boolean = userContext.databaseAccount?.properties?.enableFreeTier;
+
+  const canConfigureThroughput = !container.isServerlessEnabled();
+
+  const keyspaceOffers = new Map();
+  const [isExecuting, setIsExecuting] = useState<boolean>();
+  const [formErrors, setFormErrors] = useState<string>("");
+
+  useEffect(() => {
+    if (keyspaceIds.indexOf(keyspaceId) >= 0) {
+      setKeyspaceHasSharedOffer(keyspaceOffers.has(keyspaceId));
+    }
+    setCreateTableQuery(`CREATE TABLE ${keyspaceId}.`);
+  }, [keyspaceId]);
+
+  const addCollectionPaneOpenMessage = {
+    collection: {
+      id: tableId,
+      storage: Constants.BackendDefaults.multiPartitionStorageInGb,
+      offerThroughput: throughput,
+      partitionKey: "",
+      databaseId: keyspaceId,
+    },
+    subscriptionType: userContext.subscriptionType,
+    subscriptionQuotaId: userContext.quotaId,
+    defaultsCheck: {
+      storage: "u",
+      throughput,
+      flight: userContext.addCollectionFlight,
+    },
+    dataExplorerArea: Constants.Areas.ContextualPane,
+  };
+
+  useEffect(() => {
+    if (!container.isServerlessEnabled()) {
+      setIsAutoPilotSelected(userContext.features.autoscaleDefault);
+    }
+
+    TelemetryProcessor.trace(Action.CreateCollection, ActionModifiers.Open, addCollectionPaneOpenMessage);
+  }, []);
+
+  useEffect(() => {
+    if (container) {
+      const newKeyspaceIds: ViewModels.Database[] = container.databases();
+      const cachedKeyspaceIdsList = _.map(newKeyspaceIds, (keyspace: ViewModels.Database) => {
+        if (keyspace && keyspace.offer && !!keyspace.offer()) {
+          keyspaceOffers.set(keyspace.id(), keyspace.offer());
+        }
+        return keyspace.id();
+      });
+      setKeyspaceIds(cachedKeyspaceIdsList);
+    }
+  }, []);
+
+  const _isValid = () => {
+    const sharedAutoscaleThroughput = sharedAutoPilotThroughput * 1;
+    if (
+      isSharedAutoPilotSelected &&
+      sharedAutoscaleThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K &&
+      !sharedThroughputSpendAck
+    ) {
+      setFormErrors(`Please acknowledge the estimated monthly spend.`);
+      return false;
+    }
+
+    const dedicatedAutoscaleThroughput = selectedAutoPilotThroughput * 1;
+    if (
+      isAutoPilotSelected &&
+      dedicatedAutoscaleThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K &&
+      !throughputSpendAck
+    ) {
+      setFormErrors(`Please acknowledge the estimated monthly spend.`);
+      return false;
+    }
+
+    if ((keyspaceCreateNew && keyspaceHasSharedOffer && isSharedAutoPilotSelected) || isAutoPilotSelected) {
+      const autoPilot = _getAutoPilot();
+      if (
+        !autoPilot ||
+        !autoPilot.maxThroughput ||
+        !AutoPilotUtils.isValidAutoPilotThroughput(autoPilot.maxThroughput)
+      ) {
+        setFormErrors(
+          `Please enter a value greater than ${AutoPilotUtils.minAutoPilotThroughput} for autopilot throughput`
+        );
+        return false;
+      }
+      return true;
+    }
+
+    if (throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && !throughputSpendAck) {
+      setFormErrors(`Please acknowledge the estimated daily spend.`);
+      return false;
+    }
+
+    if (
+      keyspaceHasSharedOffer &&
+      keyspaceCreateNew &&
+      keyspaceThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K &&
+      !sharedThroughputSpendAck
+    ) {
+      setFormErrors("Please acknowledge the estimated daily spend");
+      return false;
+    }
+
+    return true;
+  };
+
+  const onSubmit = async () => {
+    if (!_isValid()) {
+      return;
+    }
+    setIsExecuting(true);
+    const autoPilotCommand = `cosmosdb_autoscale_max_throughput`;
+
+    const toCreateKeyspace: boolean = keyspaceCreateNew;
+    const useAutoPilotForKeyspace: boolean = isSharedAutoPilotSelected && !!sharedAutoPilotThroughput;
+    const createKeyspaceQueryPrefix = `CREATE KEYSPACE ${keyspaceId.trim()} WITH REPLICATION = { 'class' : 'SimpleStrategy', 'replication_factor' : 3 }`;
+    const createKeyspaceQuery: string = keyspaceHasSharedOffer
+      ? useAutoPilotForKeyspace
+        ? `${createKeyspaceQueryPrefix} AND ${autoPilotCommand}=${keyspaceThroughput};`
+        : `${createKeyspaceQueryPrefix} AND cosmosdb_provisioned_throughput=${keyspaceThroughput};`
+      : `${createKeyspaceQueryPrefix};`;
+    let tableQuery: string;
+    const createTableQueryPrefix = `${createTableQuery}${tableId.trim()} ${userTableQuery}`;
+
+    if (canConfigureThroughput && (dedicateTableThroughput || !keyspaceHasSharedOffer)) {
+      if (isAutoPilotSelected && selectedAutoPilotThroughput) {
+        tableQuery = `${createTableQueryPrefix} WITH ${autoPilotCommand}=${throughput};`;
+      } else {
+        tableQuery = `${createTableQueryPrefix} WITH cosmosdb_provisioned_throughput=${throughput};`;
+      }
+    } else {
+      tableQuery = `${createTableQueryPrefix};`;
+    }
+
+    const addCollectionPaneStartMessage = {
+      ...addCollectionPaneOpenMessage,
+      collection: {
+        ...addCollectionPaneOpenMessage.collection,
+        hasDedicatedThroughput: dedicateTableThroughput,
+      },
+      keyspaceHasSharedOffer,
+      toCreateKeyspace,
+      createKeyspaceQuery,
+      createTableQuery: tableQuery,
+    };
+
+    const startKey: number = TelemetryProcessor.traceStart(Action.CreateCollection, addCollectionPaneStartMessage);
+    try {
+      if (toCreateKeyspace) {
+        await cassandraApiClient.createTableAndKeyspace(
+          userContext?.databaseAccount?.properties?.cassandraEndpoint,
+          userContext?.databaseAccount?.id,
+          container,
+          tableQuery,
+          createKeyspaceQuery
+        );
+      } else {
+        await cassandraApiClient.createTableAndKeyspace(
+          userContext?.databaseAccount?.properties?.cassandraEndpoint,
+          userContext?.databaseAccount?.id,
+          container,
+          tableQuery
+        );
+      }
+      container.refreshAllDatabases();
+      setIsExecuting(false);
+      closePanel();
+
+      TelemetryProcessor.traceSuccess(Action.CreateCollection, addCollectionPaneStartMessage, startKey);
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      setFormErrors(errorMessage);
+      setIsExecuting(false);
+      const addCollectionPaneFailedMessage = {
+        ...addCollectionPaneStartMessage,
+        error: errorMessage,
+        errorStack: getErrorStack(error),
+      };
+      TelemetryProcessor.traceFailure(Action.CreateCollection, addCollectionPaneFailedMessage, startKey);
+    }
+  };
+  const handleOnChangeKeyspaceType = (ev: React.FormEvent<HTMLInputElement>, mode: string): void => {
+    setKeyspaceCreateNew(mode === "Create new");
+  };
+
+  const props: RightPaneFormProps = {
+    expandConsole: () => container.expandConsole(),
+    formError: formErrors,
+    isExecuting,
+    submitButtonText: "Apply",
+    onSubmit,
+  };
+  return (
+    <RightPaneForm {...props}>
+      <div className="paneMainContent">
+        <div className="seconddivpadding">
+          <p>
+            <Label required>
+              Keyspace name <InfoTooltip>Select an existing keyspace or enter a new keyspace id.</InfoTooltip>
+            </Label>
+          </p>
+
+          <Stack horizontal verticalAlign="center">
+            <input
+              className="throughputInputRadioBtn"
+              aria-label="Create new keyspace"
+              checked={keyspaceCreateNew}
+              type="radio"
+              role="radio"
+              tabIndex={0}
+              onChange={(e) => handleOnChangeKeyspaceType(e, "Create new")}
+            />
+            <span className="throughputInputRadioBtnLabel">Create new</span>
+
+            <input
+              className="throughputInputRadioBtn"
+              aria-label="Use existing keyspace"
+              checked={!keyspaceCreateNew}
+              type="radio"
+              role="radio"
+              tabIndex={0}
+              onChange={(e) => handleOnChangeKeyspaceType(e, "Use existing")}
+            />
+            <span className="throughputInputRadioBtnLabel">Use existing</span>
+          </Stack>
+
+          <TextField
+            aria-required="true"
+            autoComplete="off"
+            pattern="[^/?#\\]*[^/?# \\]"
+            title="May not end with space nor contain characters '\' '/' '#' '?'"
+            list={keyspaceCreateNew ? "" : "keyspacesList"}
+            placeholder={keyspaceCreateNew ? "Type a new keyspace id" : "Choose existing keyspace id"}
+            size={40}
+            data-test="addCollection-keyspaceId"
+            value={keyspaceId}
+            onChange={(e, newValue) => setKeyspaceId(newValue)}
+            ariaLabel="Keyspace id"
+            autoFocus
+          />
+          <datalist id="keyspacesList">
+            {keyspaceIds?.map((id: string, index: number) => (
+              <option key={index}>{id}</option>
+            ))}
+          </datalist>
+          {canConfigureThroughput && keyspaceCreateNew && (
+            <div className="databaseProvision">
+              <input
+                tabIndex={0}
+                type="checkbox"
+                id="keyspaceSharedThroughput"
+                title="Provision shared throughput"
+                checked={keyspaceHasSharedOffer}
+                onChange={(e) => setKeyspaceHasSharedOffer(e.target.checked)}
+              />
+              <span className="databaseProvisionText" aria-label="Provision keyspace throughput">
+                Provision keyspace throughput
+              </span>
+              <InfoTooltip>
+                Provisioned throughput at the keyspace level will be shared across unlimited number of tables within the
+                keyspace
+              </InfoTooltip>
+            </div>
+          )}
+          {canConfigureThroughput && keyspaceCreateNew && keyspaceHasSharedOffer && (
+            <div>
+              <ThroughputInput
+                showFreeTierExceedThroughputTooltip={isFreeTierAccount && !container.isFirstResourceCreated()}
+                isDatabase
+                isSharded
+                setThroughputValue={(throughput: number) => setKeyspaceThroughput(throughput)}
+                setIsAutoscale={(isAutoscale: boolean) => setIsSharedAutoPilotSelected(isAutoscale)}
+                onCostAcknowledgeChange={(isAcknowledge: boolean) => {
+                  setSharedThroughputSpendAck(isAcknowledge);
+                }}
+              />
+            </div>
+          )}
+        </div>
+        <div className="seconddivpadding">
+          <p>
+            <Label required>
+              Enter CQL command to create the table.
+              <a href="https://aka.ms/cassandra-create-table" target="_blank" rel="noreferrer">
+                Learn More
+              </a>
+            </Label>
+          </p>
+          <div aria-label={createTableQuery} style={{ float: "left", paddingTop: "3px", paddingRight: "3px" }}>
+            {createTableQuery}
+          </div>
+          <TextField
+            aria-required="true"
+            ariaLabel="addCollection-tableId"
+            autoComplete="off"
+            pattern="[^/?#\\]*[^/?# \\]"
+            title="May not end with space nor contain characters '\' '/' '#' '?'"
+            placeholder="Enter tableId"
+            size={20}
+            className="textfontclr"
+            value={tableId}
+            onChange={(e, newValue) => setTableId(newValue)}
+            style={{ marginBottom: "5px" }}
+          />
+          <TextField
+            multiline
+            id="editor-area"
+            rows={5}
+            aria-label="Table Schema"
+            value={userTableQuery}
+            onChange={(e, newValue) => setUserTableQuery(newValue)}
+          />
+        </div>
+
+        {canConfigureThroughput && keyspaceHasSharedOffer && !keyspaceCreateNew && (
+          <div className="seconddivpadding">
+            <input
+              type="checkbox"
+              id="tableSharedThroughput"
+              title="Provision dedicated throughput for this table"
+              checked={dedicateTableThroughput}
+              onChange={(e) => setDedicateTableThroughput(e.target.checked)}
+            />
+            <span>Provision dedicated throughput for this table</span>
+            <InfoTooltip>
+              You can optionally provision dedicated throughput for a table within a keyspace that has throughput
+              provisioned. This dedicated throughput amount will not be shared with other tables in the keyspace and
+              does not count towards the throughput you provisioned for the keyspace. This throughput amount will be
+              billed in addition to the throughput amount you provisioned at the keyspace level.
+            </InfoTooltip>
+          </div>
+        )}
+        {canConfigureThroughput && (!keyspaceHasSharedOffer || dedicateTableThroughput) && (
+          <div>
+            <ThroughputInput
+              showFreeTierExceedThroughputTooltip={isFreeTierAccount && !container.isFirstResourceCreated()}
+              isDatabase={false}
+              isSharded={false}
+              setThroughputValue={(throughput: number) => setThroughput(throughput)}
+              setIsAutoscale={(isAutoscale: boolean) => setIsAutoPilotSelected(isAutoscale)}
+              onCostAcknowledgeChange={(isAcknowledge: boolean) => {
+                setThroughputSpendAck(isAcknowledge);
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </RightPaneForm>
+  );
+};

src/Explorer/Panes/CassandraAddCollectionPane/__snapshots__/CassandraAddCollectionPane.test.tsx.snap

@@ -0,0 +1,164 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CassandraAddCollectionPane  Pane should render Default properly 1`] = `
+<RightPaneForm
+  expandConsole={[Function]}
+  formError=""
+  onSubmit={[Function]}
+  submitButtonText="Apply"
+>
+  <div
+    className="paneMainContent"
+  >
+    <div
+      className="seconddivpadding"
+    >
+      <p>
+        <StyledLabelBase
+          required={true}
+        >
+          Keyspace name 
+          <InfoTooltip>
+            Select an existing keyspace or enter a new keyspace id.
+          </InfoTooltip>
+        </StyledLabelBase>
+      </p>
+      <Stack
+        horizontal={true}
+        verticalAlign="center"
+      >
+        <input
+          aria-label="Create new keyspace"
+          checked={true}
+          className="throughputInputRadioBtn"
+          onChange={[Function]}
+          role="radio"
+          tabIndex={0}
+          type="radio"
+        />
+        <span
+          className="throughputInputRadioBtnLabel"
+        >
+          Create new
+        </span>
+        <input
+          aria-label="Use existing keyspace"
+          checked={false}
+          className="throughputInputRadioBtn"
+          onChange={[Function]}
+          role="radio"
+          tabIndex={0}
+          type="radio"
+        />
+        <span
+          className="throughputInputRadioBtnLabel"
+        >
+          Use existing
+        </span>
+      </Stack>
+      <StyledTextFieldBase
+        aria-required="true"
+        ariaLabel="Keyspace id"
+        autoComplete="off"
+        autoFocus={true}
+        data-test="addCollection-keyspaceId"
+        list=""
+        onChange={[Function]}
+        pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"
+        placeholder="Type a new keyspace id"
+        size={40}
+        title="May not end with space nor contain characters '\\\\' '/' '#' '?'"
+        value=""
+      />
+      <datalist
+        id="keyspacesList"
+      />
+      <div
+        className="databaseProvision"
+      >
+        <input
+          checked={false}
+          id="keyspaceSharedThroughput"
+          onChange={[Function]}
+          tabIndex={0}
+          title="Provision shared throughput"
+          type="checkbox"
+        />
+        <span
+          aria-label="Provision keyspace throughput"
+          className="databaseProvisionText"
+        >
+          Provision keyspace throughput
+        </span>
+        <InfoTooltip>
+          Provisioned throughput at the keyspace level will be shared across unlimited number of tables within the keyspace
+        </InfoTooltip>
+      </div>
+    </div>
+    <div
+      className="seconddivpadding"
+    >
+      <p>
+        <StyledLabelBase
+          required={true}
+        >
+          Enter CQL command to create the table.
+          <a
+            href="https://aka.ms/cassandra-create-table"
+            rel="noreferrer"
+            target="_blank"
+          >
+            Learn More
+          </a>
+        </StyledLabelBase>
+      </p>
+      <div
+        aria-label="CREATE TABLE "
+        style={
+          Object {
+            "float": "left",
+            "paddingRight": "3px",
+            "paddingTop": "3px",
+          }
+        }
+      >
+        CREATE TABLE 
+      </div>
+      <StyledTextFieldBase
+        aria-required="true"
+        ariaLabel="addCollection-tableId"
+        autoComplete="off"
+        className="textfontclr"
+        onChange={[Function]}
+        pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"
+        placeholder="Enter tableId"
+        size={20}
+        style={
+          Object {
+            "marginBottom": "5px",
+          }
+        }
+        title="May not end with space nor contain characters '\\\\' '/' '#' '?'"
+        value=""
+      />
+      <StyledTextFieldBase
+        aria-label="Table Schema"
+        id="editor-area"
+        multiline={true}
+        onChange={[Function]}
+        rows={5}
+        value="(userid int, name text, email text, PRIMARY KEY (userid))"
+      />
+    </div>
+    <div>
+      <ThroughputInput
+        isDatabase={false}
+        isSharded={false}
+        onCostAcknowledgeChange={[Function]}
+        setIsAutoscale={[Function]}
+        setThroughputValue={[Function]}
+      />
+    </div>
+  </div>
+</RightPaneForm>
+`;

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx

@@ -9,10 +9,7 @@ import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUti
 import Explorer from "../../Explorer";
 import { NotebookContentItem, NotebookContentItemType } from "../../Notebook/NotebookContentItem";
 import { ResourceTreeAdapter } from "../../Tree/ResourceTreeAdapter";
-import {
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent";
 
 interface Location {
@@ -42,7 +39,6 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
 }: CopyNotebookPanelProps) => {
   const [isExecuting, setIsExecuting] = useState<boolean>();
   const [formError, setFormError] = useState<string>("");
-  const [formErrorDetail, setFormErrorDetail] = useState<string>("");
   const [pinnedRepos, setPinnedRepos] = useState<IPinnedRepo[]>();
   const [selectedLocation, setSelectedLocation] = useState<Location>();
 
@@ -92,7 +88,6 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
     } catch (error) {
       const errorMessage = getErrorMessage(error);
       setFormError(`Failed to copy ${name} to ${destination}`);
-      setFormErrorDetail(`${errorMessage}`);
       handleError(errorMessage, "CopyNotebookPaneAdapter/submit", formError);
     } finally {
       clearMessage && clearMessage();
@@ -130,14 +125,10 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
     setSelectedLocation(option?.data);
   };
 
-  const genericPaneProps: GenericRightPaneProps = {
+  const props: RightPaneFormProps = {
     formError,
-    formErrorDetail,
-    id: "copynotebookpane",
     isExecuting: isExecuting,
-    title: "Copy notebook",
     submitButtonText: "OK",
-    onClose: closePanel,
     onSubmit: () => submit(),
     expandConsole: () => container.expandConsole(),
   };
@@ -149,8 +140,8 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
   };
 
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <CopyNotebookPaneComponent {...copyNotebookPaneProps} />
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx

@@ -130,8 +130,8 @@ describe("Delete Collection Confirmation Pane", () => {
         .hostNodes()
         .simulate("change", { target: { value: selectedCollectionId } });
 
-      expect(wrapper.exists(".genericPaneSubmitBtn")).toBe(true);
-      wrapper.find(".genericPaneSubmitBtn").hostNodes().simulate("click");
+      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
+      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
       expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);
 
       wrapper.unmount();
@@ -151,8 +151,8 @@ describe("Delete Collection Confirmation Pane", () => {
         .hostNodes()
         .simulate("change", { target: { value: feedbackText } });
 
-      expect(wrapper.exists(".genericPaneSubmitBtn")).toBe(true);
-      wrapper.find(".genericPaneSubmitBtn").hostNodes().simulate("click");
+      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
+      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
       expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);
 
       const deleteFeedback = new DeleteFeedback(

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx

@@ -12,10 +12,7 @@ import { userContext } from "../../../UserContext";
 import { getCollectionName } from "../../../Utils/APITypeUtils";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
-import {
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 export interface DeleteCollectionConfirmationPaneProps {
   explorer: Explorer;
   closePanel: () => void;
@@ -35,7 +32,7 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
   };
   const collectionName = getCollectionName().toLocaleLowerCase();
   const paneTitle = "Delete " + collectionName;
-  const submit = async (): Promise<void> => {
+  const onSubmit = async (): Promise<void> => {
     const collection = explorer.findSelectedCollection();
     if (!collection || inputCollectionName !== collection.id()) {
       const errorMessage = "Input " + collectionName + " name does not match the selected " + collectionName;
@@ -100,19 +97,15 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
       );
     }
   };
-  const genericPaneProps: GenericRightPaneProps = {
+  const props: RightPaneFormProps = {
     formError: formError,
-    formErrorDetail: formError,
-    id: "deleteCollectionpane",
     isExecuting,
-    title: paneTitle,
     submitButtonText: "OK",
-    onClose: closePanel,
-    onSubmit: submit,
+    onSubmit,
     expandConsole: () => explorer.expandConsole(),
   };
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <div className="confirmDeleteInput">
@@ -150,6 +143,6 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
           )}
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.test.tsx

@@ -98,8 +98,8 @@ describe("Delete Database Confirmation Pane", () => {
         .find("#confirmDatabaseId")
         .hostNodes()
         .simulate("change", { target: { value: selectedDatabaseId } });
-      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
-      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
+      expect(wrapper.exists("button")).toBe(true);
+      wrapper.find("button").hostNodes().simulate("submit");
       expect(deleteDatabase).toHaveBeenCalledWith(selectedDatabaseId);
       wrapper.unmount();
     });

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx

@@ -1,5 +1,5 @@
-import { useBoolean } from "@fluentui/react-hooks";
 import { Text, TextField } from "@fluentui/react";
+import { useBoolean } from "@fluentui/react-hooks";
 import React, { FunctionComponent, useState } from "react";
 import { Areas } from "../../Common/Constants";
 import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
@@ -12,9 +12,8 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
-import { PanelFooterComponent } from "./PanelFooterComponent";
 import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
-import { PanelLoadingScreen } from "./PanelLoadingScreen";
+import { RightPaneForm, RightPaneFormProps } from "./RightPaneForm/RightPaneForm";
 
 interface DeleteDatabaseConfirmationPanelProps {
   explorer: Explorer;
@@ -23,36 +22,19 @@ interface DeleteDatabaseConfirmationPanelProps {
   selectedDatabase: Database;
 }
 
-export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseConfirmationPanelProps> = (
-  props: DeleteDatabaseConfirmationPanelProps
-): JSX.Element => {
+export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseConfirmationPanelProps> = ({
+  explorer,
+  openNotificationConsole,
+  closePanel,
+  selectedDatabase,
+}: DeleteDatabaseConfirmationPanelProps): JSX.Element => {
   const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
 
   const [formError, setFormError] = useState<string>("");
   const [databaseInput, setDatabaseInput] = useState<string>("");
   const [databaseFeedbackInput, setDatabaseFeedbackInput] = useState<string>("");
 
-  const getPanelErrorProps = (): PanelInfoErrorProps => {
-    if (formError) {
-      return {
-        messageType: "error",
-        message: formError,
-        showErrorDetails: true,
-        openNotificationConsole: props.openNotificationConsole,
-      };
-    }
-
-    return {
-      messageType: "warning",
-      showErrorDetails: false,
-      message:
-        "Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
-    };
-  };
-
-  const submit = async (event: React.FormEvent<HTMLFormElement>): Promise<void> => {
-    const { selectedDatabase, explorer } = props;
-    event.preventDefault();
+  const submit = async (): Promise<void> => {
     if (selectedDatabase?.id() && databaseInput !== selectedDatabase.id()) {
       setFormError("Input database name does not match the selected database");
       logConsoleError(`Error while deleting collection ${selectedDatabase && selectedDatabase.id()}`);
@@ -69,7 +51,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
 
     try {
       await deleteDatabase(selectedDatabase.id());
-      props.closePanel();
+      closePanel();
       explorer.refreshAllDatabases();
       explorer.tabsManager.closeTabsByComparator((tab) => tab.node?.id() === selectedDatabase.id());
       explorer.selectedNode(undefined);
@@ -121,13 +103,27 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
   };
 
   const shouldRecordFeedback = (): boolean => {
-    const { explorer } = props;
     return explorer.isLastNonEmptyDatabase() || (explorer.isLastDatabase() && explorer.isSelectedDatabaseShared());
   };
 
+  const props: RightPaneFormProps = {
+    formError,
+    isExecuting: isLoading,
+    submitButtonText: "OK",
+    onSubmit: () => submit(),
+    expandConsole: openNotificationConsole,
+  };
+
+  const errorProps: PanelInfoErrorProps = {
+    messageType: "warning",
+    showErrorDetails: false,
+    message:
+      "Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
+  };
+
   return (
-    <form className="panelFormWrapper" onSubmit={submit}>
-      <PanelInfoErrorComponent {...getPanelErrorProps()} />
+    <RightPaneForm {...props}>
+      {!formError && <PanelInfoErrorComponent {...errorProps} />}
       <div className="panelMainContent">
         <div className="confirmDeleteInput">
           <span className="mandatoryStar">* </span>
@@ -161,8 +157,6 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
           </div>
         )}
       </div>
-      <PanelFooterComponent buttonLabel="OK" />
-      {isLoading && <PanelLoadingScreen />}
-    </form>
+    </RightPaneForm>
   );
 };

src/Explorer/Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane.tsx

@@ -2,11 +2,9 @@ import { IDropdownOption, IImageProps, Image, Stack, Text } from "@fluentui/reac
 import { useBoolean } from "@fluentui/react-hooks";
 import AddPropertyIcon from "images/Add-property.svg";
 import React, { FunctionComponent, useState } from "react";
+import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
 import StoredProcedure from "../../Tree/StoredProcedure";
-import {
-  GenericRightPaneComponent,
-  GenericRightPaneProps,
-} from "../GenericRightPaneComponent/GenericRightPaneComponent";
+import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 import { InputParameter } from "./InputParameter";
 
 interface ExecuteSprocParamsPaneProps {
@@ -35,24 +33,11 @@ export const ExecuteSprocParamsPane: FunctionComponent<ExecuteSprocParamsPanePro
   const [partitionValue, setPartitionValue] = useState<string>(); // Defaulting to undefined here is important. It is not the same partition key as ""
   const [selectedKey, setSelectedKey] = React.useState<IDropdownOption>({ key: "string", text: "" });
   const [formError, setFormError] = useState<string>("");
-  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
 
   const onPartitionKeyChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
     setSelectedKey(item);
   };
 
-  const genericPaneProps: GenericRightPaneProps = {
-    expandConsole,
-    formError: formError,
-    formErrorDetail: formErrorsDetails,
-    id: "executesprocparamspane",
-    isExecuting: isLoading,
-    title: "Input parameters",
-    submitButtonText: "Execute",
-    onClose: () => closePanel(),
-    onSubmit: () => submit(),
-  };
-
   const validateUnwrappedParams = (): boolean => {
     const unwrappedParams: UnwrappedExecuteSprocParam[] = paramKeyValues;
     for (let i = 0; i < unwrappedParams.length; i++) {
@@ -66,7 +51,7 @@ export const ExecuteSprocParamsPane: FunctionComponent<ExecuteSprocParamsPanePro
 
   const setInvalidParamError = (invalidParam: string): void => {
     setFormError(`Invalid param specified: ${invalidParam}`);
-    setFormErrorsDetails(`Invalid param specified: ${invalidParam} is not a valid literal value`);
+    logConsoleError(`Invalid param specified: ${invalidParam} is not a valid literal value`);
   };
 
   const submit = (): void => {
@@ -128,8 +113,16 @@ export const ExecuteSprocParamsPane: FunctionComponent<ExecuteSprocParamsPanePro
     setParamKeyValues(cloneParamKeyValue);
   };
 
+  const props: RightPaneFormProps = {
+    expandConsole,
+    formError: formError,
+    isExecuting: isLoading,
+    submitButtonText: "Execute",
+    onSubmit: () => submit(),
+  };
+
   return (
-    <GenericRightPaneComponent {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <InputParameter
@@ -169,6 +162,6 @@ export const ExecuteSprocParamsPane: FunctionComponent<ExecuteSprocParamsPanePro
           </Stack>
         </div>
       </div>
-    </GenericRightPaneComponent>
+    </RightPaneForm>
   );
 };