fixed logger.test.ts GraphData.test.ts securityWarningBar.tsx typescript in strict mode

.eslintignore

@@ -81,9 +81,17 @@ src/Explorer/Tables/DataTable/DataTableBindingManager.ts
 src/Explorer/Tables/DataTable/DataTableBuilder.ts
 src/Explorer/Tables/DataTable/DataTableContextMenu.ts
 src/Explorer/Tables/DataTable/DataTableOperationManager.ts
+src/Explorer/Tables/DataTable/DataTableOperations.ts
 src/Explorer/Tables/DataTable/DataTableViewModel.ts
+src/Explorer/Tables/DataTable/TableCommands.ts
+src/Explorer/Tables/DataTable/TableEntityCache.ts
 src/Explorer/Tables/DataTable/TableEntityListViewModel.ts
+src/Explorer/Tables/Entities.ts
+src/Explorer/Tables/QueryBuilder/ClauseGroup.ts
+src/Explorer/Tables/QueryBuilder/ClauseGroupViewModel.ts
 src/Explorer/Tables/QueryBuilder/CustomTimestampHelper.ts
+src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
+src/Explorer/Tables/QueryBuilder/QueryClauseViewModel.ts
 src/Explorer/Tables/TableDataClient.ts
 src/Explorer/Tables/TableEntityProcessor.ts
 src/Explorer/Tables/Utilities.ts
@@ -107,10 +115,15 @@ src/Explorer/Tree/ObjectId.ts
 src/Explorer/Tree/ResourceTokenCollection.ts
 src/Explorer/Tree/StoredProcedure.ts
 src/Explorer/Tree/TreeComponents.ts
+src/Explorer/Tree/Trigger.ts
 src/Explorer/WaitsForTemplateViewModel.ts
 src/GitHub/GitHubClient.test.ts
 src/GitHub/GitHubClient.ts
+src/GitHub/GitHubConnector.ts
+src/GitHub/GitHubOAuthService.ts
 src/Index.ts
+src/Juno/JunoClient.test.ts
+src/Juno/JunoClient.ts
 src/Platform/Hosted/Authorization.ts
 src/ReactDevTools.ts
 src/Shared/Constants.ts
@@ -130,13 +143,20 @@ src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
 src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
 src/Explorer/Controls/TreeComponent/TreeComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx
+src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx
+src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx
+src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx
+src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
+src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.tsx
 src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponentAdapter.tsx
+src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx
 src/Explorer/Notebook/NotebookComponent/VirtualCommandBarComponent.tsx
 src/Explorer/Notebook/NotebookComponent/contents/index.tsx
+src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx
 src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx
 src/Explorer/Notebook/NotebookRenderer/decorators/draggable/index.tsx
 src/Explorer/Notebook/NotebookRenderer/decorators/hijack-scroll/index.tsx

.eslintrc.js

@@ -39,6 +39,7 @@ module.exports = {
     "@typescript-eslint/switch-exhaustiveness-check": "error",
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-extraneous-class": "error",
+    "no-null/no-null": "error",
     "@typescript-eslint/no-explicit-any": "error",
     "prefer-arrow/prefer-arrow-functions": ["error", { allowStandaloneDeclarations: true }],
     eqeqeq: "error",

.vscode/settings.json

@@ -22,6 +22,5 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true,
     "source.organizeImports": true
-  },
-  "typescript.preferences.importModuleSpecifier": "non-relative"
+  }
 }

images/close-black.svg

@@ -1,8 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+<svg
+    width="16" 
+    height="16"
+     version="1.1" 
+    viewBox="0 0 16 16" 
+    xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path
-        d="M14,2.691l-5.301,5.309l5.301,5.309l-0.691,0.691l-5.309,-5.301l-5.309,5.301l-0.691,-0.691l5.301,-5.309l-5.301,-5.309l0.691,-0.691l5.309,5.301l5.309,-5.301l0.691,0.691Z"
-        transform="scale(0.5)" fill="#000" stroke="#000">
+    <path 
+        d="M14,2.691l-5.301,5.309l5.301,5.309l-0.691,0.691l-5.309,-5.301l-5.309,5.301l-0.691,-0.691l5.301,-5.309l-5.301,-5.309l0.691,-0.691l5.309,5.301l5.309,-5.301l0.691,0.691Z" 
+        transform="scale(0.5)" 
+        fill="#000"
+        stroke="#CCC" 
+        >
     </path>
 </svg>

jest.config.js

@@ -37,8 +37,8 @@ module.exports = {
     global: {
       branches: 25,
       functions: 25,
-      lines: 29,
-      statements: 29,
+      lines: 30,
+      statements: 30,
     },
   },
 
@@ -129,8 +129,6 @@ module.exports = {
   // The test environment that will be used for testing
   // testEnvironment: "jest-environment-jsdom",
 
-  modulePaths: ["node_modules", "<rootDir>/src"],
-
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},
 

less/documentDB.less

@@ -2077,7 +2077,7 @@ a:link {
 .resourceTreeAndTabs {
   display: flex;
   flex: 1 1 auto;
-  overflow-x: clip;
+  overflow-x: auto;
   overflow-y: auto;
   height: 100%;
 }
@@ -2245,7 +2245,7 @@ a:link {
 }
 
 .refreshColHeader {
-  padding: 3px 6px 10px 0px !important;
+  padding: 3px 6px 6px 6px;
 }
 
 .refreshColHeader:hover {
@@ -2357,8 +2357,6 @@ a:link {
   height: 100%;
   flex-grow: 1;
   overflow: hidden;
-  min-height: 300px;
-  overflow-y: scroll;
 }
 
 .tabs {
@@ -2834,8 +2832,6 @@ a:link {
 
 #explorerNotificationConsole {
   z-index: 1000;
-  overflow-y: auto;
-  overflow-x: clip;
 }
 
 .uniqueIndexesContainer {
@@ -2869,31 +2865,31 @@ a:link {
   }
 }
 
-.settingsSection {
-  border-bottom: 1px solid @BaseMedium;
-  margin-right: 24px;
-  padding: @MediumSpace 0px;
+settings-pane {
+  .settingsSection {
+    border-bottom: 1px solid @BaseMedium;
+    margin-right: 24px;
+    padding: @MediumSpace 0px;
 
-  &:first-child {
-    padding-top: 0px;
-    padding-bottom: 10px;
-  }
+    &:first-child {
+      padding-top: 0px;
+    }
 
-  &:last-child {
-    border-bottom: none;
-  }
+    &:last-child {
+      border-bottom: none;
+    }
 
-  .settingsSectionPart {
-    padding-left: 8px;
-  }
+    .settingsSectionPart {
+      padding-left: 8px;
+    }
 
-  .settingsSectionLabel {
-    margin-bottom: @DefaultSpace;
-    margin-right: 5px;
-  }
+    .settingsSectionLabel {
+      margin-bottom: @DefaultSpace;
+    }
 
-  .pageOptionsPart {
-    padding-bottom: @MediumSpace;
+    .pageOptionsPart {
+      padding-bottom: @MediumSpace;
+    }
   }
 }
 

package-lock.json

@@ -6326,8 +6326,8 @@
     },
     "@webpack-cli/serve": {
       "version": "1.5.2",
-      "resolved": "https://msazure.pkgs.visualstudio.com/_packaging/AzurePortal/npm/registry/@webpack-cli/serve/-/serve-1.5.2.tgz",
-      "integrity": "sha1-6lhLY3/2PFpHf28hYEtaIFtyyew=",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.5.2.tgz",
+      "integrity": "sha512-vgJ5OLWadI8aKjDlOH3rb+dYyPd2GTZuQC/Tihjct6F9GpXGZINo3Y/IVuZVTM1eDQB+/AOsjPUWH/WySDaXvw==",
       "dev": true
     },
     "@xtuc/ieee754": {

src/Common/CollapsedResourceTree.tsx

@@ -1,7 +1,6 @@
-import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
+import React, { FunctionComponent } from "react";
 import arrowLeftImg from "../../images/imgarrowlefticon.svg";
 import { userContext } from "../UserContext";
-import { NormalizedEventKey } from "./Constants";
 
 export interface CollapsedResourceTreeProps {
   toggleLeftPaneExpanded: () => void;
@@ -12,21 +11,6 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
   toggleLeftPaneExpanded,
   isLeftPaneExpanded,
 }: CollapsedResourceTreeProps): JSX.Element => {
-  const focusButton = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
-
-  useEffect(() => {
-    if (focusButton.current) {
-      focusButton.current.focus();
-    }
-  });
-
-  const onKeyPressToggleLeftPaneExpanded = (event: React.KeyboardEvent) => {
-    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
-      toggleLeftPaneExpanded();
-      event.stopPropagation();
-    }
-  };
-
   return (
     <div id="mini" className={!isLeftPaneExpanded ? "mini toggle-mini" : "hiddenMain"}>
       <div className="main-nav nav">
@@ -37,14 +21,11 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
             role="button"
             tabIndex={0}
             aria-label="Expand Tree"
-            onClick={toggleLeftPaneExpanded}
-            onKeyPress={onKeyPressToggleLeftPaneExpanded}
-            ref={focusButton}
           >
-            <span className="leftarrowCollapsed">
+            <span className="leftarrowCollapsed" onClick={toggleLeftPaneExpanded}>
               <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
             </span>
-            <span className="collectionCollapsed">
+            <span className="collectionCollapsed" onClick={toggleLeftPaneExpanded}>
               <span>{userContext.apiType} API</span>
             </span>
           </li>

src/Common/Constants.ts

@@ -96,8 +96,6 @@ export class Flights {
   public static readonly AutoscaleTest = "autoscaletest";
   public static readonly PartitionKeyTest = "partitionkeytest";
   public static readonly PKPartitionKeyTest = "pkpartitionkeytest";
-  public static readonly Phoenix = "phoenix";
-  public static readonly NotebooksDownBanner = "notebooksdownbanner";
 }
 
 export class AfecFeatures {
@@ -339,19 +337,6 @@ export enum ConflictOperationType {
   Delete = "delete",
 }
 
-export enum ConnectionStatusType {
-  Connect = "Connect",
-  Connecting = "Connecting",
-  Connected = "Connected",
-  Failed = "Connection Failed",
-  Reconnect = "Reconnect",
-}
-
-export enum ContainerStatusType {
-  Active = "Active",
-  Disconnected = "Disconnected",
-}
-
 export const EmulatorMasterKey =
   //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
   "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
@@ -361,37 +346,15 @@ export const StyleConstants = require("less-vars-loader!../../less/Common/Consta
 
 export class Notebook {
   public static readonly defaultBasePath = "./notebooks";
-  public static readonly heartbeatDelayMs = 60000;
-  public static readonly containerStatusHeartbeatDelayMs = 30000;
+  public static readonly heartbeatDelayMs = 5000;
   public static readonly kernelRestartInitialDelayMs = 1000;
   public static readonly kernelRestartMaxDelayMs = 20000;
   public static readonly autoSaveIntervalMs = 120000;
-  public static readonly memoryGuageToGB = 1048576;
-  public static readonly lowMemoryThreshold = 0.8;
-  public static readonly remainingTimeForAlert = 10;
-  public static readonly retryAttempts = 3;
-  public static readonly retryAttemptDelayMs = 5000;
   public static readonly temporarilyDownMsg = "Notebooks is currently not available. We are working on it.";
   public static readonly mongoShellTemporarilyDownMsg =
     "We have identified an issue with the Mongo Shell and it is unavailable right now. We are actively working on the mitigation.";
   public static readonly cassandraShellTemporarilyDownMsg =
     "We have identified an issue with the Cassandra Shell and it is unavailable right now. We are actively working on the mitigation.";
-  public static saveNotebookModalTitle = "Save notebook in temporary workspace";
-  public static saveNotebookModalContent =
-    "This notebook will be saved in the temporary workspace and will be removed when the session expires. To save your work permanently, save your notebooks to a GitHub repository or download the notebooks to your local machine before the session ends.";
-  public static newNotebookModalTitle = "Create notebook in temporary workspace";
-  public static newNotebookUploadModalTitle = "Upload notebook to temporary workspace";
-  public static newNotebookModalContent1 =
-    "A temporary workspace will be created to enable you to work with notebooks. When the session expires, any notebooks in the workspace will be removed.";
-  public static newNotebookModalContent2 =
-    "To save your work permanently, save your notebooks to a GitHub repository or download the notebooks to your local machine before the session ends. ";
-  public static galleryNotebookDownloadContent1 =
-    "To download, run, and make changes to this sample notebook, a temporary workspace will be created. When the session expires, any notebooks in the workspace will be removed.";
-  public static galleryNotebookDownloadContent2 =
-    "To save your work permanently, save your notebooks to a GitHub repository or download the Notebooks to your local machine before the session ends. ";
-  public static cosmosNotebookHomePageUrl = "https://aka.ms/cosmos-notebooks-limits";
-  public static cosmosNotebookGitDocumentationUrl = "https://aka.ms/cosmos-notebooks-github";
-  public static learnMore = "Learn more.";
 }
 
 export class SparkLibrary {
@@ -412,11 +375,3 @@ export class TerminalQueryParams {
   public static readonly SubscriptionId = "subscriptionId";
   public static readonly TerminalEndpoint = "terminalEndpoint";
 }
-
-export class JunoEndpoints {
-  public static readonly Test = "https://juno-test.documents-dev.windows-int.net";
-  public static readonly Test2 = "https://juno-test2.documents-dev.windows-int.net";
-  public static readonly Test3 = "https://juno-test3.documents-dev.windows-int.net";
-  public static readonly Prod = "https://tools.cosmos.azure.com";
-  public static readonly Stage = "https://tools-staging.cosmos.azure.com";
-}

src/Common/Logger.test.ts

@@ -1,7 +1,5 @@
 jest.mock("./MessageHandler");
-import { LogEntryLevel } from "../Contracts/Diagnostics";
 import * as Logger from "./Logger";
-import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { sendMessage } from "./MessageHandler";
 
 describe("Logger", () => {

src/Common/MongoProxyClient.test.ts

@@ -3,16 +3,8 @@ import { resetConfigContext, updateConfigContext } from "../ConfigContext";
 import { DatabaseAccount } from "../Contracts/DataModels";
 import { Collection } from "../Contracts/ViewModels";
 import DocumentId from "../Explorer/Tree/DocumentId";
-import { extractFeatures } from "../Platform/Hosted/extractFeatures";
 import { updateUserContext } from "../UserContext";
-import {
-  deleteDocument,
-  getEndpoint,
-  getFeatureEndpointOrDefault,
-  queryDocuments,
-  readDocument,
-  updateDocument,
-} from "./MongoProxyClient";
+import { deleteDocument, getEndpoint, queryDocuments, readDocument, updateDocument } from "./MongoProxyClient";
 
 const databaseId = "testDB";
 
@@ -254,31 +246,4 @@ describe("MongoProxyClient", () => {
       expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/guest/mongo/explorer");
     });
   });
-  describe("getFeatureEndpointOrDefault", () => {
-    beforeEach(() => {
-      resetConfigContext();
-      updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
-      });
-      const params = new URLSearchParams({
-        "feature.mongoProxyEndpoint": "https://localhost:12901",
-        "feature.mongoProxyAPIs": "readDocument|createDocument",
-      });
-      const features = extractFeatures(params);
-      updateUserContext({
-        authType: AuthType.AAD,
-        features: features,
-      });
-    });
-
-    it("returns a local endpoint", () => {
-      const endpoint = getFeatureEndpointOrDefault("readDocument");
-      expect(endpoint).toEqual("https://localhost:12901/api/mongo/explorer");
-    });
-
-    it("returns a production endpoint", () => {
-      const endpoint = getFeatureEndpointOrDefault("deleteDocument");
-      expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/mongo/explorer");
-    });
-  });
 });

src/Common/MongoProxyClient.ts

@@ -6,7 +6,6 @@ import * as DataModels from "../Contracts/DataModels";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { Collection } from "../Contracts/ViewModels";
 import DocumentId from "../Explorer/Tree/DocumentId";
-import { hasFlag } from "../Platform/Hosted/extractFeatures";
 import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import { ApiType, HttpHeaders, HttpStatusCodes } from "./Constants";
@@ -79,7 +78,7 @@ export function queryDocuments(
         : "",
   };
 
-  const endpoint = getFeatureEndpointOrDefault("resourcelist") || "";
+  const endpoint = getEndpoint() || "";
 
   const headers = {
     ...defaultHeaders,
@@ -142,8 +141,7 @@ export function readDocument(
         : "",
   };
 
-  const endpoint = getFeatureEndpointOrDefault("readDocument");
-
+  const endpoint = getEndpoint();
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
       method: "GET",
@@ -183,7 +181,7 @@ export function createDocument(
     pk: collection && collection.partitionKey && !collection.partitionKey.systemKey ? partitionKeyProperty : "",
   };
 
-  const endpoint = getFeatureEndpointOrDefault("createDocument");
+  const endpoint = getEndpoint();
 
   return window
     .fetch(`${endpoint}/resourcelist?${queryString.stringify(params)}`, {
@@ -227,7 +225,7 @@ export function updateDocument(
         ? documentId.partitionKeyProperty
         : "",
   };
-  const endpoint = getFeatureEndpointOrDefault("updateDocument");
+  const endpoint = getEndpoint();
 
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
@@ -268,7 +266,7 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
         ? documentId.partitionKeyProperty
         : "",
   };
-  const endpoint = getFeatureEndpointOrDefault("deleteDocument");
+  const endpoint = getEndpoint();
 
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
@@ -311,7 +309,7 @@ export function createMongoCollectionWithProxy(
     autoPilotThroughput: params.autoPilotMaxThroughput?.toString(),
   };
 
-  const endpoint = getFeatureEndpointOrDefault("createCollectionWithProxy");
+  const endpoint = getEndpoint();
 
   return window
     .fetch(
@@ -335,15 +333,8 @@ export function createMongoCollectionWithProxy(
     });
 }
 
-export function getFeatureEndpointOrDefault(feature: string): string {
-  return hasFlag(userContext.features.mongoProxyAPIs, feature)
-    ? getEndpoint(userContext.features.mongoProxyEndpoint)
-    : getEndpoint();
-}
-
-export function getEndpoint(customEndpoint?: string): string {
-  let url = customEndpoint ? customEndpoint : configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT;
-  url += "/api/mongo/explorer";
+export function getEndpoint(): string {
+  let url = (configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT) + "/api/mongo/explorer";
 
   if (userContext.authType === AuthType.EncryptedToken) {
     url = url.replace("api/mongo", "api/guest/mongo");

src/Common/ResourceTreeContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
+import React, { FunctionComponent } from "react";
 import arrowLeftImg from "../../images/imgarrowlefticon.svg";
 import refreshImg from "../../images/refresh-cosmos.svg";
 import { AuthType } from "../AuthType";
@@ -6,7 +6,6 @@ import Explorer from "../Explorer/Explorer";
 import { ResourceTokenTree } from "../Explorer/Tree/ResourceTokenTree";
 import { ResourceTree } from "../Explorer/Tree/ResourceTree";
 import { userContext } from "../UserContext";
-import { NormalizedEventKey } from "./Constants";
 
 export interface ResourceTreeContainerProps {
   toggleLeftPaneExpanded: () => void;
@@ -19,22 +18,6 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
   isLeftPaneExpanded,
   container,
 }: ResourceTreeContainerProps): JSX.Element => {
-  const focusButton = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
-
-  useEffect(() => {
-    if (isLeftPaneExpanded) {
-      if (focusButton.current) {
-        focusButton.current.focus();
-      }
-    }
-  });
-
-  const onKeyPressToggleLeftPaneExpanded = (event: React.KeyboardEvent) => {
-    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
-      toggleLeftPaneExpanded();
-      event.stopPropagation();
-    }
-  };
   return (
     <div id="main" className={isLeftPaneExpanded ? "main" : "hiddenMain"}>
       {/* Collections Window - - Start */}
@@ -60,11 +43,9 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
                 id="expandToggleLeftPaneButton"
                 role="button"
                 onClick={toggleLeftPaneExpanded}
-                onKeyPress={onKeyPressToggleLeftPaneExpanded}
                 tabIndex={0}
                 aria-label="Collapse Tree"
                 title="Collapse Tree"
-                ref={focusButton}
               >
                 <img className="refreshcol1" src={arrowLeftImg} alt="Hide" />
               </span>

src/Common/Tooltip/InfoTooltip.tsx

@@ -9,7 +9,7 @@ export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({ children }:
   return (
     <span>
       <TooltipHost content={children}>
-        <Icon iconName="Info" ariaLabel="Info" className="panelInfoIcon" tabIndex={0} />
+        <Icon iconName="Info" ariaLabel="Info" className="panelInfoIcon" />
       </TooltipHost>
     </span>
   );

src/ConfigContext.ts

@@ -1,5 +1,3 @@
-import { JunoEndpoints } from "Common/Constants";
-
 export enum Platform {
   Portal = "Portal",
   Hosted = "Hosted",
@@ -25,7 +23,6 @@ export interface ConfigContext {
   PROXY_PATH?: string;
   JUNO_ENDPOINT: string;
   GITHUB_CLIENT_ID: string;
-  GITHUB_TEST_ENV_CLIENT_ID: string;
   GITHUB_CLIENT_SECRET?: string; // No need to inject secret for prod. Juno already knows it.
   hostedExplorerURL: string;
   armAPIVersion?: string;
@@ -55,16 +52,14 @@ let configContext: Readonly<ConfigContext> = {
   GRAPH_API_VERSION: "1.6",
   ARCADIA_ENDPOINT: "https://workspaceartifacts.projectarcadia.net",
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: "dev.azuresynapse.net",
-  GITHUB_CLIENT_ID: "6cb2f63cf6f7b5cbdeca", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1189306
-  GITHUB_TEST_ENV_CLIENT_ID: "b63fc8cbf87fd3c6e2eb", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1777772
+  GITHUB_CLIENT_ID: "6cb2f63cf6f7b5cbdeca", // Registered OAuth app: https://github.com/settings/applications/1189306
   JUNO_ENDPOINT: "https://tools.cosmos.azure.com",
   BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
   allowedJunoOrigins: [
-    JunoEndpoints.Test,
-    JunoEndpoints.Test2,
-    JunoEndpoints.Test3,
-    JunoEndpoints.Prod,
-    JunoEndpoints.Stage,
+    "https://juno-test.documents-dev.windows-int.net",
+    "https://juno-test2.documents-dev.windows-int.net",
+    "https://tools.cosmos.azure.com",
+    "https://tools-staging.cosmos.azure.com",
     "https://localhost",
   ],
 };

src/Contracts/DataModels.ts

@@ -1,5 +1,3 @@
-import { ConnectionStatusType, ContainerStatusType } from "../Common/Constants";
-
 export interface DatabaseAccount {
   id: string;
   name: string;
@@ -26,8 +24,6 @@ export interface DatabaseAccountExtendedProperties {
   isVirtualNetworkFilterEnabled?: boolean;
   ipRules?: IpRule[];
   privateEndpointConnections?: unknown[];
-  capacity?: { totalThroughputLimit: number };
-  locations?: DatabaseAccountResponseLocation[];
 }
 
 export interface DatabaseAccountResponseLocation {
@@ -428,36 +424,6 @@ export interface OperationStatus {
 export interface NotebookWorkspaceConnectionInfo {
   authToken: string;
   notebookServerEndpoint: string;
-  forwardingId: string;
-}
-
-export interface ContainerInfo {
-  durationLeftInMinutes: number;
-  notebookServerInfo: NotebookWorkspaceConnectionInfo;
-  status: ContainerStatusType;
-}
-
-export interface IProvisionData {
-  subscriptionId: string;
-  resourceGroup: string;
-  dbAccountName: string;
-  cosmosEndpoint: string;
-}
-
-export interface IContainerData {
-  dbAccountName: string;
-  forwardingId: string;
-}
-
-export interface IResponse<T> {
-  status: number;
-  data: T;
-}
-
-export interface IPhoenixConnectionInfoResult {
-  readonly notebookAuthToken?: string;
-  readonly notebookServerUrl?: string;
-  readonly forwardingId?: string;
 }
 
 export interface NotebookWorkspaceFeedResponse {
@@ -530,8 +496,3 @@ export interface MemoryUsageInfo {
   freeKB: number;
   totalKB: number;
 }
-
-export interface ContainerConnectionInfo {
-  status: ConnectionStatusType;
-  //need to add ram and rom info
-}

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -1,6 +1,5 @@
 import { Icon, Label, Stack } from "@fluentui/react";
 import * as React from "react";
-import { NormalizedEventKey } from "../../../Common/Constants";
 import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
 
 export interface CollapsibleSectionProps {
@@ -31,13 +30,6 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
     }
   }
 
-  private onKeyPress = (event: React.KeyboardEvent) => {
-    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
-      this.toggleCollapsed();
-      event.stopPropagation();
-    }
-  };
-
   public render(): JSX.Element {
     return (
       <>
@@ -47,11 +39,6 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
           verticalAlign="center"
           tokens={accordionStackTokens}
           onClick={this.toggleCollapsed}
-          onKeyPress={this.onKeyPress}
-          tabIndex={0}
-          aria-name="Advanced"
-          role="button"
-          aria-expanded={this.state.isExpanded}
         >
           <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
           <Label>{this.props.title}</Label>

src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap

@@ -3,14 +3,9 @@
 exports[`CollapsibleSectionComponent renders 1`] = `
 <Fragment>
   <Stack
-    aria-expanded={true}
-    aria-name="Advanced"
     className="collapsibleSection"
     horizontal={true}
     onClick={[Function]}
-    onKeyPress={[Function]}
-    role="button"
-    tabIndex={0}
     tokens={
       Object {
         "childrenGap": 10,

src/Explorer/Controls/Dialog.tsx

@@ -30,7 +30,6 @@ export interface DialogState {
     onOk: () => void,
     cancelLabel: string,
     onCancel: () => void,
-    contentHtml?: JSX.Element,
     choiceGroupProps?: IChoiceGroupProps,
     textFieldProps?: TextFieldProps,
     primaryButtonDisabled?: boolean
@@ -59,7 +58,6 @@ export const useDialog: UseStore<DialogState> = create((set, get) => ({
     onOk: () => void,
     cancelLabel: string,
     onCancel: () => void,
-    contentHtml?: JSX.Element,
     choiceGroupProps?: IChoiceGroupProps,
     textFieldProps?: TextFieldProps,
     primaryButtonDisabled?: boolean
@@ -78,7 +76,6 @@ export const useDialog: UseStore<DialogState> = create((set, get) => ({
         get().closeDialog();
         onCancel && onCancel();
       },
-      contentHtml,
       choiceGroupProps,
       textFieldProps,
       primaryButtonDisabled,
@@ -127,7 +124,6 @@ export interface DialogProps {
   type?: DialogType;
   showCloseButton?: boolean;
   onDismiss?: () => void;
-  contentHtml?: JSX.Element;
 }
 
 const DIALOG_MIN_WIDTH = "400px";
@@ -154,7 +150,6 @@ export const Dialog: FC = () => {
     type,
     showCloseButton,
     onDismiss,
-    contentHtml,
   } = props || {};
 
   const dialogProps: IDialogProps = {
@@ -186,7 +181,8 @@ export const Dialog: FC = () => {
           text: secondaryButtonText,
           onClick: onSecondaryButtonClick,
         }
-      : undefined;
+      : {};
+
   return visible ? (
     <FluentDialog {...dialogProps}>
       {choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}
@@ -196,7 +192,6 @@ export const Dialog: FC = () => {
           {linkProps.linkText} <FontIcon iconName="NavigateExternalInline" />
         </Link>
       )}
-      {contentHtml}
       {progressIndicatorProps && <ProgressIndicator {...progressIndicatorProps} />}
       <DialogFooter>
         <PrimaryButton {...primaryButtonProps} />

src/Explorer/Controls/GitHub/AddRepoComponent.tsx

@@ -1,14 +1,14 @@
 import { DefaultButton, IButtonProps, ITextFieldProps, TextField } from "@fluentui/react";
 import * as React from "react";
 import * as Constants from "../../../Common/Constants";
-import * as UrlUtility from "../../../Common/UrlUtility";
-import { IGitHubRepo } from "../../../GitHub/GitHubClient";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import * as GitHubUtils from "../../../Utils/GitHubUtils";
-import Explorer from "../../Explorer";
 import { RepoListItem } from "./GitHubReposComponent";
 import { ChildrenMargin } from "./GitHubStyleConstants";
+import * as GitHubUtils from "../../../Utils/GitHubUtils";
+import { IGitHubRepo } from "../../../GitHub/GitHubClient";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as UrlUtility from "../../../Common/UrlUtility";
+import Explorer from "../../Explorer";
 
 export interface AddRepoComponentProps {
   container: Explorer;
@@ -27,6 +27,7 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
   private static readonly ButtonText = "Add";
   private static readonly TextFieldPlaceholder = "https://github.com/owner/repo/tree/branch";
   private static readonly TextFieldErrorMessage = "Invalid url";
+  private static readonly DefaultBranchName = "master";
 
   constructor(props: AddRepoComponentProps) {
     super(props);
@@ -77,7 +78,7 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
     });
     let enteredUrl = this.state.textFieldValue;
     if (enteredUrl.indexOf("/tree/") === -1) {
-      enteredUrl = UrlUtility.createUri(enteredUrl, `tree/`);
+      enteredUrl = UrlUtility.createUri(enteredUrl, `tree/${AddRepoComponent.DefaultBranchName}`);
     }
 
     const repoInfo = GitHubUtils.fromRepoUri(enteredUrl);
@@ -92,7 +93,11 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
         const item: RepoListItem = {
           key: GitHubUtils.toRepoFullName(repo.owner, repo.name),
           repo,
-          branches: repoInfo.branch ? [{ name: repoInfo.branch }] : [],
+          branches: [
+            {
+              name: repoInfo.branch,
+            },
+          ],
         };
 
         TelemetryProcessor.traceSuccess(

src/Explorer/Controls/GitHub/ReposListComponent.tsx

@@ -24,11 +24,11 @@ import { RepoListItem } from "./GitHubReposComponent";
 import {
   BranchesDropdownCheckboxStyles,
   BranchesDropdownOptionContainerStyle,
-  BranchesDropdownStyles,
-  BranchesDropdownWidth,
-  ReposListBranchesColumnWidth,
   ReposListCheckboxStyles,
   ReposListRepoColumnMinWidth,
+  ReposListBranchesColumnWidth,
+  BranchesDropdownWidth,
+  BranchesDropdownStyles,
 } from "./GitHubStyleConstants";
 
 export interface ReposListComponentProps {
@@ -44,7 +44,6 @@ export interface BranchesProps {
   lastPageInfo?: IGitHubPageInfo;
   hasMore: boolean;
   isLoading: boolean;
-  defaultBranchName: string;
   loadMore: () => void;
 }
 
@@ -65,7 +64,7 @@ export class ReposListComponent extends React.Component<ReposListComponentProps>
   private static readonly BranchesColumnName = "Branches";
   private static readonly LoadingText = "Loading...";
   private static readonly LoadMoreText = "Load more";
-  private static readonly DefaultBranchNames = "master/main";
+  private static readonly DefaultBranchName = "master";
   private static readonly FooterIndex = -1;
 
   public render(): JSX.Element {
@@ -156,10 +155,6 @@ export class ReposListComponent extends React.Component<ReposListComponentProps>
     }
 
     const branchesProps = this.props.branchesProps[GitHubUtils.toRepoFullName(item.repo.owner, item.repo.name)];
-    if (item.branches.length === 0 && branchesProps.defaultBranchName) {
-      item.branches = [{ name: branchesProps.defaultBranchName }];
-    }
-
     const options: IDropdownOption[] = branchesProps.branches.map((branch) => ({
       key: branch.name,
       text: branch.name,
@@ -203,7 +198,7 @@ export class ReposListComponent extends React.Component<ReposListComponentProps>
     const dropdownProps: IDropdownProps = {
       styles: BranchesDropdownStyles,
       options: [],
-      placeholder: ReposListComponent.DefaultBranchNames,
+      placeholder: ReposListComponent.DefaultBranchName,
       disabled: true,
     };
 
@@ -277,7 +272,7 @@ export class ReposListComponent extends React.Component<ReposListComponentProps>
       styles: ReposListCheckboxStyles,
       onChange: () => {
         const repoListItem = { ...item };
-        repoListItem.branches = [];
+        repoListItem.branches = [{ name: ReposListComponent.DefaultBranchName }];
         this.props.pinRepo(repoListItem);
       },
     };

src/Explorer/Controls/InputTypeahead/InputTypeahead.less

@@ -8,9 +8,6 @@
     .input-type-head-text-field {
         width: 100%;
     }
-    .input-query-form {
-        width: 100%;
-    }
     textarea {
         width: 100%;
         line-height: 1;

src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx

@@ -160,21 +160,18 @@ export class InputTypeaheadComponent extends React.Component<
     return (
       <div className="input-typeahead-container">
         <Stack horizontal>
-          <form aria-labelledby="input" className="input-query-form">
-            <TextField
-              multiline={useTextarea}
-              rows={1}
-              id="input"
-              defaultValue={defaultValue}
-              ariaLabel="Input query"
-              placeholder={placeholder}
-              className="input-type-head-text-field"
-              value={defaultValue}
-              onKeyDown={this.onSubmit}
-              onFocus={() => this.setState({ isSuggestionVisible: true })}
-              onChange={(_event, newValue?: string) => this.handleChange(newValue)}
-            />
-          </form>
+          <TextField
+            multiline={useTextarea}
+            rows={1}
+            defaultValue={defaultValue}
+            ariaLabel="Input query"
+            placeholder={placeholder}
+            className="input-type-head-text-field"
+            value={defaultValue}
+            onKeyDown={this.onSubmit}
+            onFocus={() => this.setState({ isSuggestionVisible: true })}
+            onChange={(_event, newValue?: string) => this.handleChange(newValue)}
+          />
           {this.props.showCancelButton && (
             <IconButton
               styles={iconButtonStyles}

src/Explorer/Controls/InputTypeahead/__snapshots__/InputTypeaheadComponent.test.tsx.snap

@@ -7,22 +7,16 @@ exports[`inputTypeahead renders <input /> 1`] = `
   <Stack
     horizontal={true}
   >
-    <form
-      aria-labelledby="input"
-      className="input-query-form"
-    >
-      <StyledTextFieldBase
-        ariaLabel="Input query"
-        className="input-type-head-text-field"
-        id="input"
-        multiline={false}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        placeholder="placeholder"
-        rows={1}
-      />
-    </form>
+    <StyledTextFieldBase
+      ariaLabel="Input query"
+      className="input-type-head-text-field"
+      multiline={false}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder="placeholder"
+      rows={1}
+    />
   </Stack>
 </div>
 `;
@@ -34,22 +28,16 @@ exports[`inputTypeahead renders <textarea /> 1`] = `
   <Stack
     horizontal={true}
   >
-    <form
-      aria-labelledby="input"
-      className="input-query-form"
-    >
-      <StyledTextFieldBase
-        ariaLabel="Input query"
-        className="input-type-head-text-field"
-        id="input"
-        multiline={true}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        placeholder="placeholder"
-        rows={1}
-      />
-    </form>
+    <StyledTextFieldBase
+      ariaLabel="Input query"
+      className="input-type-head-text-field"
+      multiline={true}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      placeholder="placeholder"
+      rows={1}
+    />
   </Stack>
 </div>
 `;

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

@@ -35,19 +35,16 @@ const testCassandraAccount: DataModels.DatabaseAccount = {
 const testNotebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo = {
   authToken: "authToken",
   notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com",
-  forwardingId: "Id",
 };
 
 const testMongoNotebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo = {
   authToken: "authToken",
   notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com/mongo",
-  forwardingId: "Id",
 };
 
 const testCassandraNotebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo = {
   authToken: "authToken",
   notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com/cassandra",
-  forwardingId: "Id",
 };
 
 describe("NotebookTerminalComponent", () => {

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -17,8 +17,6 @@ import Explorer from "../../Explorer";
 import { NotebookClientV2 } from "../../Notebook/NotebookClientV2";
 import { NotebookComponentBootstrapper } from "../../Notebook/NotebookComponent/NotebookComponentBootstrapper";
 import NotebookReadOnlyRenderer from "../../Notebook/NotebookRenderer/NotebookReadOnlyRenderer";
-import { NotebookUtil } from "../../Notebook/NotebookUtil";
-import { useNotebook } from "../../Notebook/useNotebook";
 import { Dialog, TextFieldProps, useDialog } from "../Dialog";
 import { NotebookMetadataComponent } from "./NotebookMetadataComponent";
 import "./NotebookViewerComponent.less";
@@ -53,7 +51,7 @@ export class NotebookViewerComponent
     super(props);
 
     this.clientManager = new NotebookClientV2({
-      connectionInfo: { authToken: undefined, notebookServerEndpoint: undefined, forwardingId: undefined },
+      connectionInfo: { authToken: undefined, notebookServerEndpoint: undefined },
       databaseAccountName: undefined,
       defaultExperience: "NotebookViewer",
       isReadOnly: true,
@@ -148,9 +146,7 @@ export class NotebookViewerComponent
             <NotebookMetadataComponent
               data={this.state.galleryItem}
               isFavorite={this.state.isFavorite}
-              downloadButtonText={
-                this.props.container && NotebookUtil.getNotebookBtnTitle(useNotebook.getState().notebookFolderName)
-              }
+              downloadButtonText={this.props.container && "Download to my notebooks"}
               onTagClick={this.props.onTagClick}
               onFavoriteClick={this.favoriteItem}
               onUnfavoriteClick={this.unfavoriteItem}

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1,5 +1,4 @@
 import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
-import { useDatabases } from "Explorer/useDatabases";
 import * as React from "react";
 import DiscardIcon from "../../../../images/discard.svg";
 import SaveIcon from "../../../../images/save-cosmos.svg";
@@ -72,7 +71,6 @@ export interface SettingsComponentState {
   wasAutopilotOriginallySet: boolean;
   isScaleSaveable: boolean;
   isScaleDiscardable: boolean;
-  throughputError: string;
 
   timeToLive: TtlType;
   timeToLiveBaseline: TtlType;
@@ -126,7 +124,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private changeFeedPolicyVisible: boolean;
   private isFixedContainer: boolean;
   private shouldShowIndexingPolicyEditor: boolean;
-  private totalThroughputUsed: number;
   public mongoDBCollectionResource: MongoDBCollectionResource;
 
   constructor(props: SettingsComponentProps) {
@@ -158,7 +155,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       wasAutopilotOriginallySet: false,
       isScaleSaveable: false,
       isScaleDiscardable: false,
-      throughputError: undefined,
 
       timeToLive: undefined,
       timeToLiveBaseline: undefined,
@@ -212,11 +208,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         return true;
       },
     };
-
-    const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
-    if (throughputCap && throughputCap !== -1) {
-      this.calculateTotalThroughputUsed();
-    }
   }
 
   componentDidMount(): void {
@@ -263,10 +254,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       return false;
     }
 
-    if (this.state.throughputError) {
-      return false;
-    }
-
     return (
       this.state.isScaleSaveable ||
       this.state.isSubSettingsSaveable ||
@@ -494,26 +481,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private onMongoIndexingPolicyDiscardableChange = (isMongoIndexingPolicyDiscardable: boolean): void =>
     this.setState({ isMongoIndexingPolicyDiscardable });
 
-  private calculateTotalThroughputUsed = (): void => {
-    this.totalThroughputUsed = 0;
-    (useDatabases.getState().databases || []).forEach(async (database) => {
-      if (database.offer()) {
-        const dbThroughput = database.offer().autoscaleMaxThroughput || database.offer().manualThroughput;
-        this.totalThroughputUsed += dbThroughput;
-      }
-
-      (database.collections() || []).forEach(async (collection) => {
-        if (collection.offer()) {
-          const colThroughput = collection.offer().autoscaleMaxThroughput || collection.offer().manualThroughput;
-          this.totalThroughputUsed += colThroughput;
-        }
-      });
-    });
-
-    const numberOfRegions = userContext.databaseAccount?.properties.locations?.length || 1;
-    this.totalThroughputUsed *= numberOfRegions;
-  };
-
   public getAnalyticalStorageTtl = (): number => {
     if (this.isAnalyticalStorageEnabled) {
       if (this.state.analyticalStorageTtlSelection === TtlType.On) {
@@ -676,31 +643,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     return buttons;
   };
 
-  private onMaxAutoPilotThroughputChange = (newThroughput: number): void => {
-    let throughputError = "";
-    const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
-    const numberOfRegions = userContext.databaseAccount?.properties.locations?.length || 1;
-    const throughputDelta = (newThroughput - this.offer.autoscaleMaxThroughput) * numberOfRegions;
-    if (throughputCap && throughputCap !== -1 && throughputCap - this.totalThroughputUsed < throughputDelta) {
-      throughputError = `Your account is currently configured with a total throughput limit of ${throughputCap} RU/s. This update isn't possible because it would increase the total throughput to ${
-        this.totalThroughputUsed + throughputDelta
-      } RU/s. Change total throughput limit in cost management.`;
-    }
-    this.setState({ autoPilotThroughput: newThroughput, throughputError });
-  };
+  private onMaxAutoPilotThroughputChange = (newThroughput: number): void =>
+    this.setState({ autoPilotThroughput: newThroughput });
 
-  private onThroughputChange = (newThroughput: number): void => {
-    let throughputError = "";
-    const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
-    const numberOfRegions = userContext.databaseAccount?.properties.locations?.length || 1;
-    const throughputDelta = (newThroughput - this.offer.manualThroughput) * numberOfRegions;
-    if (throughputCap && throughputCap !== -1 && throughputCap - this.totalThroughputUsed < throughputDelta) {
-      throughputError = `Your account is currently configured with a total throughput limit of ${throughputCap} RU/s. This update isn't possible because it would increase the total throughput to ${
-        this.totalThroughputUsed + throughputDelta
-      } RU/s. Change total throughput limit in cost management.`;
-    }
-    this.setState({ throughput: newThroughput, throughputError });
-  };
+  private onThroughputChange = (newThroughput: number): void => this.setState({ throughput: newThroughput });
 
   private onAutoPilotSelected = (isAutoPilotSelected: boolean): void =>
     this.setState({ isAutoPilotSelected: isAutoPilotSelected });
@@ -947,7 +893,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       onScaleSaveableChange: this.onScaleSaveableChange,
       onScaleDiscardableChange: this.onScaleDiscardableChange,
       initialNotification: this.props.settingsTab.pendingNotification(),
-      throughputError: this.state.throughputError,
     };
 
     if (!this.isCollectionSettingsTab) {

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -1,45 +1,45 @@
+import * as React from "react";
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import { AutopilotDocumentation, hoursInAMonth } from "../../../Shared/Constants";
+import { Urls, StyleConstants } from "../../../Common/Constants";
+import {
+  getPriceCurrency,
+  getCurrencySign,
+  getAutoscalePricePerRu,
+  getMultimasterMultiplier,
+  computeRUUsagePriceHourly,
+  getPricePerRu,
+  estimatedCostDisclaimer,
+} from "../../../Utils/PricingUtils";
 import {
-  DetailsList,
-  DetailsListLayoutMode,
-  DetailsRow,
-  ICheckboxStyles,
-  IChoiceGroupStyles,
-  IColumn,
-  IDetailsColumnStyles,
-  IDetailsListStyles,
-  IDetailsRowProps,
-  IDetailsRowStyles,
-  IDropdownStyles,
-  IMessageBarStyles,
-  ISeparatorStyles,
-  IStackProps,
-  IStackStyles,
-  IStackTokens,
   ITextFieldStyles,
-  ITextStyles,
+  ICheckboxStyles,
+  IStackProps,
+  IStackTokens,
+  IChoiceGroupStyles,
   Link,
+  Text,
+  IMessageBarStyles,
+  ITextStyles,
+  IDetailsRowStyles,
+  IStackStyles,
+  IDetailsListStyles,
+  IDropdownStyles,
+  ISeparatorStyles,
   MessageBar,
   MessageBarType,
-  SelectionMode,
+  Stack,
   Spinner,
   SpinnerSize,
-  Stack,
-  Text,
+  DetailsList,
+  IColumn,
+  SelectionMode,
+  DetailsListLayoutMode,
+  IDetailsRowProps,
+  DetailsRow,
+  IDetailsColumnStyles,
 } from "@fluentui/react";
-import * as React from "react";
-import { StyleConstants, Urls } from "../../../Common/Constants";
-import { AutopilotDocumentation, hoursInAMonth } from "../../../Shared/Constants";
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import {
-  computeRUUsagePriceHourly,
-  estimatedCostDisclaimer,
-  getAutoscalePricePerRu,
-  getCurrencySign,
-  getMultimasterMultiplier,
-  getPriceCurrency,
-  getPricePerRu,
-} from "../../../Utils/PricingUtils";
-import { isDirty, isDirtyTypes } from "./SettingsUtils";
+import { isDirtyTypes, isDirty } from "./SettingsUtils";
 
 export interface EstimatedSpendingDisplayProps {
   costType: JSX.Element;
@@ -65,7 +65,7 @@ export interface PriceBreakdown {
   currencySign: string;
 }
 
-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } };
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14 } };
 
 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
   label: {
@@ -223,15 +223,14 @@ export const getRuPriceBreakdown = (
     multimasterEnabled: isMultimaster,
     isAutoscale: isAutoscale,
   });
-  const multimasterMultiplier = getMultimasterMultiplier(numberOfRegions, isMultimaster);
-  const pricePerRu: number = isAutoscale
-    ? getAutoscalePricePerRu(serverId, multimasterMultiplier)
-    : getPricePerRu(serverId, multimasterMultiplier);
+  const basePricePerRu: number = isAutoscale
+    ? getAutoscalePricePerRu(serverId, getMultimasterMultiplier(numberOfRegions, isMultimaster))
+    : getPricePerRu(serverId);
   return {
-    hourlyPrice,
+    hourlyPrice: hourlyPrice,
     dailyPrice: hourlyPrice * 24,
     monthlyPrice: hourlyPrice * hoursInAMonth,
-    pricePerRu,
+    pricePerRu: basePricePerRu * getMultimasterMultiplier(numberOfRegions, isMultimaster),
     currency: getPriceCurrency(serverId),
     currencySign: getCurrencySign(serverId),
   };
@@ -272,7 +271,7 @@ export const manualToAutoscaleDisclaimerElement: JSX.Element = (
   <Text styles={infoAndToolTipTextStyle} id="manualToAutoscaleDisclaimerElement">
     The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings
     and storage of your resource. After autoscale has been enabled, you can change the max RU/s.{" "}
-    <Link href={Urls.autoscaleMigration}>Learn more</Link>
+    <a href={Urls.autoscaleMigration}>Learn more</a>
   </Text>
 );
 

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap

@@ -8,7 +8,6 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }

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

@@ -36,7 +36,6 @@ export interface ScaleComponentProps {
   onScaleSaveableChange: (isScaleSaveable: boolean) => void;
   onScaleDiscardableChange: (isScaleDiscardable: boolean) => void;
   initialNotification: DataModels.Notification;
-  throughputError?: string;
 }
 
 export class ScaleComponent extends React.Component<ScaleComponentProps> {
@@ -190,7 +189,6 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
       onScaleDiscardableChange={this.props.onScaleDiscardableChange}
       getThroughputWarningMessage={this.getThroughputWarningMessage}
       usageSizeInKB={this.props.collection?.usageSizeInKB()}
-      throughputError={this.props.throughputError}
     />
   );
 

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

@@ -75,7 +75,6 @@ export interface ThroughputInputAutoPilotV3Props {
   onScaleDiscardableChange: (isScaleDiscardable: boolean) => void;
   getThroughputWarningMessage: () => JSX.Element;
   usageSizeInKB: number;
-  throughputError?: string;
 }
 
 interface ThroughputInputAutoPilotV3State {
@@ -541,7 +540,6 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
         value={this.overrideWithProvisionedThroughputSettings() ? "" : this.props.maxAutoPilotThroughput?.toString()}
         onChange={this.onAutoPilotThroughputChange}
         min={minAutoPilotThroughput}
-        errorMessage={this.props.throughputError}
       />
       {!this.overrideWithProvisionedThroughputSettings() && this.getAutoPilotUsageCost()}
       {this.minRUperGBSurvey()}
@@ -581,7 +579,6 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
         }
         onChange={this.onThroughputChange}
         min={this.props.minimum}
-        errorMessage={this.props.throughputError}
       />
       {this.state.exceedFreeTierThroughput && (
         <MessageBar

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

@@ -20,7 +20,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
       styles={
         Object {
           "root": Object {
-            "color": "windowtext",
             "fontSize": 14,
           },
         }
@@ -40,7 +39,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -75,7 +73,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
         styles={
           Object {
             "root": Object {
-              "color": "windowtext",
               "fontSize": 14,
             },
           }
@@ -83,11 +80,11 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
       >
         The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings and storage of your resource. After autoscale has been enabled, you can change the max RU/s.
          
-        <StyledLinkBase
+        <a
           href="https://aka.ms/cosmos-autoscale-migration"
         >
           Learn more
-        </StyledLinkBase>
+        </a>
       </Text>
     </StyledMessageBar>
     <StyledChoiceGroup
@@ -189,7 +186,6 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -464,7 +460,6 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }

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

@@ -16,7 +16,6 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
       styles={
         Object {
           "root": Object {
-            "color": "windowtext",
             "fontSize": 14,
           },
         }

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

@@ -136,7 +136,6 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -413,7 +412,6 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -954,7 +952,6 @@ exports[`SubSettingsComponent renders 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -1231,7 +1228,6 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }

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

@@ -34,13 +34,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
-                "phoenixClient": PhoenixClient {
-                  "retryOptions": Object {
-                    "maxTimeout": 5000,
-                    "minTimeout": 5000,
-                    "retries": 3,
-                  },
-                },
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -108,13 +101,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
-                "phoenixClient": PhoenixClient {
-                  "retryOptions": Object {
-                    "maxTimeout": 5000,
-                    "minTimeout": 5000,
-                    "retries": 3,
-                  },
-                },
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],

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

@@ -159,7 +159,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -167,17 +166,16 @@ exports[`SettingsUtils functions render 1`] = `
   >
     The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings and storage of your resource. After autoscale has been enabled, you can change the max RU/s.
      
-    <StyledLinkBase
+    <a
       href="https://aka.ms/cosmos-autoscale-migration"
     >
       Learn more
-    </StyledLinkBase>
+    </a>
   </Text>
   <Text
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -197,7 +195,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -210,7 +207,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -223,7 +219,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -235,7 +230,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -255,7 +249,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -271,7 +264,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -286,7 +278,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -300,7 +291,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -312,7 +302,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -332,7 +321,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -375,7 +363,6 @@ exports[`SettingsUtils functions render 1`] = `
       styles={
         Object {
           "root": Object {
-            "color": "windowtext",
             "fontSize": 14,
           },
         }
@@ -391,7 +378,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -408,7 +394,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }

src/Explorer/Controls/Tabs/TabComponent.less

@@ -1,6 +1,7 @@
 @import "../../../../less/Common/Constants";
 
 .tabComponentContainer {
+    overflow: hidden;
     height: 100%;
     .flex-display();
     .flex-direction();

src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx

@@ -6,7 +6,6 @@ import { userContext } from "../../../../UserContext";
 import {
   calculateEstimateNumber,
   computeRUUsagePriceHourly,
-  estimatedCostDisclaimer,
   getAutoscalePricePerRu,
   getCurrencySign,
   getMultimasterMultiplier,
@@ -43,9 +42,11 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
   const currency: string = getPriceCurrency(serverId);
   const currencySign: string = getCurrencySign(serverId);
   const multiplier = getMultimasterMultiplier(numberOfRegions, multimasterEnabled);
-  const pricePerRu = isAutoscale ? getAutoscalePricePerRu(serverId, multiplier) : getPricePerRu(serverId, multiplier);
+  const pricePerRu = isAutoscale
+    ? getAutoscalePricePerRu(serverId, multiplier) * multiplier
+    : getPricePerRu(serverId) * multiplier;
 
-  const iconWithEstimatedCostDisclaimer: JSX.Element = <InfoTooltip>{estimatedCostDisclaimer}</InfoTooltip>;
+  const iconWithEstimatedCostDisclaimer: JSX.Element = <InfoTooltip>PricingUtils.estimatedCostDisclaimer</InfoTooltip>;
 
   if (isAutoscale) {
     return (

src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx

@@ -7,7 +7,6 @@ const props = {
   isSharded: true,
   setThroughputValue: () => jest.fn(),
   setIsAutoscale: () => jest.fn(),
-  setIsThroughputCapExceeded: () => jest.fn(),
   onCostAcknowledgeChange: () => jest.fn(),
 };
 describe("ThroughputInput Pane", () => {

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -1,6 +1,5 @@
 import { Checkbox, DirectionalHint, Link, Stack, Text, TextField, TooltipHost } from "@fluentui/react";
-import { useDatabases } from "Explorer/useDatabases";
-import React, { FunctionComponent, useEffect, useState } from "react";
+import React, { FunctionComponent, useState } from "react";
 import * as Constants from "../../../Common/Constants";
 import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
 import * as SharedConstants from "../../../Shared/Constants";
@@ -17,7 +16,6 @@ export interface ThroughputInputProps {
   showFreeTierExceedThroughputTooltip: boolean;
   setThroughputValue: (throughput: number) => void;
   setIsAutoscale: (isAutoscale: boolean) => void;
-  setIsThroughputCapExceeded: (isThroughputCapExceeded: boolean) => void;
   onCostAcknowledgeChange: (isAcknowledged: boolean) => void;
 }
 
@@ -26,7 +24,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
   showFreeTierExceedThroughputTooltip,
   setThroughputValue,
   setIsAutoscale,
-  setIsThroughputCapExceeded,
   isSharded,
   onCostAcknowledgeChange,
 }: ThroughputInputProps) => {
@@ -34,60 +31,10 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
   const [throughput, setThroughput] = useState<number>(AutoPilotUtils.minAutoPilotThroughput);
   const [isCostAcknowledged, setIsCostAcknowledged] = useState<boolean>(false);
   const [throughputError, setThroughputError] = useState<string>("");
-  const [totalThroughputUsed, setTotalThroughputUsed] = useState<number>(0);
 
   setIsAutoscale(isAutoscaleSelected);
   setThroughputValue(throughput);
 
-  const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
-  const numberOfRegions = userContext.databaseAccount?.properties.locations?.length || 1;
-
-  useEffect(() => {
-    // throughput cap check for the initial state
-    let totalThroughput = 0;
-    (useDatabases.getState().databases || []).forEach((database) => {
-      if (database.offer()) {
-        const dbThroughput = database.offer().autoscaleMaxThroughput || database.offer().manualThroughput;
-        totalThroughput += dbThroughput;
-      }
-
-      (database.collections() || []).forEach((collection) => {
-        if (collection.offer()) {
-          const colThroughput = collection.offer().autoscaleMaxThroughput || collection.offer().manualThroughput;
-          totalThroughput += colThroughput;
-        }
-      });
-    });
-    totalThroughput *= numberOfRegions;
-    setTotalThroughputUsed(totalThroughput);
-
-    if (throughputCap && throughputCap !== -1 && throughputCap - totalThroughput < throughput) {
-      setThroughputError(
-        `Your account is currently configured with a total throughput limit of ${throughputCap} RU/s. This update isn't possible because it would increase the total throughput to ${
-          totalThroughput + throughput * numberOfRegions
-        } RU/s. Change total throughput limit in cost management.`
-      );
-
-      setIsThroughputCapExceeded(true);
-    }
-  }, []);
-
-  const checkThroughputCap = (newThroughput: number): boolean => {
-    if (throughputCap && throughputCap !== -1 && throughputCap - totalThroughputUsed < newThroughput) {
-      setThroughputError(
-        `Your account is currently configured with a total throughput limit of ${throughputCap} RU/s. This update isn't possible because it would increase the total throughput to ${
-          totalThroughputUsed + newThroughput * numberOfRegions
-        } RU/s. Change total throughput limit in cost management.`
-      );
-      setIsThroughputCapExceeded(true);
-      return false;
-    }
-
-    setThroughputError("");
-    setIsThroughputCapExceeded(false);
-    return true;
-  };
-
   const getThroughputLabelText = (): string => {
     let throughputHeaderText: string;
     if (isAutoscaleSelected) {
@@ -113,17 +60,11 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
     const newThroughput = parseInt(newInput);
     setThroughput(newThroughput);
     setThroughputValue(newThroughput);
-
     if (!isSharded && newThroughput > 10000) {
       setThroughputError("Unsharded collections support up to 10,000 RUs");
-      return;
+    } else {
+      setThroughputError("");
     }
-
-    if (!checkThroughputCap(newThroughput)) {
-      return;
-    }
-
-    setThroughputError("");
   };
 
   const getAutoScaleTooltip = (): string => {
@@ -155,13 +96,11 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
       setIsAutoScaleSelected(true);
       setThroughputValue(AutoPilotUtils.minAutoPilotThroughput);
       setIsAutoscale(true);
-      checkThroughputCap(AutoPilotUtils.minAutoPilotThroughput);
     } else {
       setThroughput(SharedConstants.CollectionCreation.DefaultCollectionRUs400);
       setIsAutoScaleSelected(false);
       setThroughputValue(SharedConstants.CollectionCreation.DefaultCollectionRUs400);
       setIsAutoscale(false);
-      checkThroughputCap(SharedConstants.CollectionCreation.DefaultCollectionRUs400);
     }
   };
 
@@ -179,7 +118,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
         <input
           className="throughputInputRadioBtn"
           aria-label="Autoscale mode"
-          aria-required={true}
           checked={isAutoscaleSelected}
           type="radio"
           role="radio"
@@ -193,7 +131,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           aria-label="Manual mode"
           checked={!isAutoscaleSelected}
           type="radio"
-          aria-required={true}
           role="radio"
           tabIndex={0}
           onChange={(e) => handleOnChangeMode(e, "Manual")}

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -6,7 +6,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
   isSharded={true}
   onCostAcknowledgeChange={[Function]}
   setIsAutoscale={[Function]}
-  setIsThroughputCapExceeded={[Function]}
   setThroughputValue={[Function]}
   showFreeTierExceedThroughputTooltip={true}
 >
@@ -346,14 +345,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                     ariaLabel="Info"
                     className="panelInfoIcon"
                     iconName="Info"
-                    tabIndex={0}
                   >
                     <IconBase
                       ariaLabel="Info"
                       className="panelInfoIcon"
                       iconName="Info"
                       styles={[Function]}
-                      tabIndex={0}
                       theme={
                         Object {
                           "disableGlobalClassNames": false,
@@ -633,7 +630,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         className="panelInfoIcon root-57"
                         data-icon-name="Info"
                         role="img"
-                        tabIndex={0}
                       >
                         
                       </i>
@@ -655,7 +651,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
       >
         <input
           aria-label="Autoscale mode"
-          aria-required={true}
           checked={true}
           className="throughputInputRadioBtn"
           key=".0:$.0"
@@ -672,7 +667,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
         </span>
         <input
           aria-label="Manual mode"
-          aria-required={true}
           checked={false}
           className="throughputInputRadioBtn"
           key=".0:$.2"
@@ -1333,14 +1327,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         ariaLabel="Info"
                         className="panelInfoIcon"
                         iconName="Info"
-                        tabIndex={0}
                       >
                         <IconBase
                           ariaLabel="Info"
                           className="panelInfoIcon"
                           iconName="Info"
                           styles={[Function]}
-                          tabIndex={0}
                           theme={
                             Object {
                               "disableGlobalClassNames": false,
@@ -1620,7 +1612,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                             className="panelInfoIcon root-57"
                             data-icon-name="Info"
                             role="img"
-                            tabIndex={0}
                           >
                             
                           </i>

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -243,7 +243,6 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
       <div ref={this.contextMenuRef} onContextMenu={this.onRightClick} onKeyPress={this.onMoreButtonKeyPress}>
         <IconButton
           name="More"
-          title="More"
           className="treeMenuEllipsis"
           ariaLabel={menuItemLabel}
           menuIconProps={{

src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap

@@ -211,7 +211,6 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
             },
           }
         }
-        title="More"
       />
     </div>
   </div>
@@ -424,7 +423,6 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
             },
           }
         }
-        title="More"
       />
     </div>
   </div>

src/Explorer/Explorer.tsx

@@ -1,26 +1,21 @@
-import { Link } from "@fluentui/react/lib/Link";
-import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
 import * as ko from "knockout";
 import React from "react";
 import _ from "underscore";
-import shallow from "zustand/shallow";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
 import * as Constants from "../Common/Constants";
-import { Areas, ConnectionStatusType, HttpStatusCodes, Notebook } 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 { QueriesClient } from "../Common/QueriesClient";
 import * as DataModels from "../Contracts/DataModels";
-import { ContainerConnectionInfo, IPhoenixConnectionInfoResult, IResponse } from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 import { GitHubOAuthService } from "../GitHub/GitHubOAuthService";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { useTabs } from "../hooks/useTabs";
 import { IGalleryItem } from "../Juno/JunoClient";
-import { PhoenixClient } from "../Phoenix/PhoenixClient";
 import * as ExplorerSettings from "../Shared/ExplorerSettings";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
@@ -92,13 +87,12 @@ export default class Explorer {
   };
 
   private static readonly MaxNbDatabasesToAutoExpand = 5;
-  private phoenixClient: PhoenixClient;
+
   constructor() {
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
     this._isInitializingNotebooks = false;
-    this.phoenixClient = new PhoenixClient();
     useNotebook.subscribe(
       () => this.refreshCommandBarButtons(),
       (state) => state.isNotebooksEnabledForAccount
@@ -166,9 +160,24 @@ export default class Explorer {
     );
 
     useNotebook.subscribe(
-      async () => this.initiateAndRefreshNotebookList(),
-      (state) => [state.isNotebookEnabled, state.isRefreshed],
-      shallow
+      async () => {
+        if (!this.notebookManager) {
+          const NotebookManager = await (
+            await import(/* webpackChunkName: "NotebookManager" */ "./Notebook/NotebookManager")
+          ).default;
+          this.notebookManager = new NotebookManager();
+          this.notebookManager.initialize({
+            container: this,
+            resourceTree: this.resourceTree,
+            refreshCommandBarButtons: () => this.refreshCommandBarButtons(),
+            refreshNotebookList: () => this.refreshNotebookList(),
+          });
+        }
+
+        this.refreshCommandBarButtons();
+        this.refreshNotebookList();
+      },
+      (state) => state.isNotebookEnabled
     );
 
     this.resourceTree = new ResourceTreeAdapter(this);
@@ -178,7 +187,6 @@ export default class Explorer {
       useNotebook.getState().setNotebookServerInfo({
         notebookServerEndpoint: userContext.features.notebookServerUrl,
         authToken: userContext.features.notebookServerToken,
-        forwardingId: undefined,
       });
     }
 
@@ -202,23 +210,6 @@ export default class Explorer {
     this.refreshExplorer();
   }
 
-  public async initiateAndRefreshNotebookList(): Promise<void> {
-    if (!this.notebookManager) {
-      const NotebookManager = (await import(/* webpackChunkName: "NotebookManager" */ "./Notebook/NotebookManager"))
-        .default;
-      this.notebookManager = new NotebookManager();
-      this.notebookManager.initialize({
-        container: this,
-        resourceTree: this.resourceTree,
-        refreshCommandBarButtons: () => this.refreshCommandBarButtons(),
-        refreshNotebookList: () => this.refreshNotebookList(),
-      });
-    }
-
-    this.refreshCommandBarButtons();
-    this.refreshNotebookList();
-  }
-
   public openEnableSynapseLinkDialog(): void {
     const addSynapseLinkDialogProps: DialogProps = {
       linkProps: {
@@ -352,102 +343,28 @@ export default class Explorer {
       return;
     }
     this._isInitializingNotebooks = true;
-    if (userContext.features.phoenix === false) {
-      await this.ensureNotebookWorkspaceRunning();
-      const connectionInfo = await listConnectionInfo(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        databaseAccount.name,
-        "default"
-      );
 
-      useNotebook.getState().setNotebookServerInfo({
-        notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.notebookServerEndpoint,
-        authToken: userContext.features.notebookServerToken || connectionInfo.authToken,
-        forwardingId: undefined,
-      });
-    }
+    await this.ensureNotebookWorkspaceRunning();
+    const connectionInfo = await listConnectionInfo(
+      userContext.subscriptionId,
+      userContext.resourceGroup,
+      databaseAccount.name,
+      "default"
+    );
+
+    useNotebook.getState().setNotebookServerInfo({
+      notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.notebookServerEndpoint,
+      authToken: userContext.features.notebookServerToken || connectionInfo.authToken,
+    });
+
+    useNotebook.getState().initializeNotebooksTree(this.notebookManager);
 
     this.refreshNotebookList();
 
     this._isInitializingNotebooks = false;
   }
 
-  public async allocateContainer(): Promise<void> {
-    const notebookServerInfo = useNotebook.getState().notebookServerInfo;
-    const isAllocating = useNotebook.getState().isAllocating;
-    if (
-      isAllocating === false &&
-      (notebookServerInfo === undefined ||
-        (notebookServerInfo && notebookServerInfo.notebookServerEndpoint === undefined))
-    ) {
-      const provisionData = {
-        subscriptionId: userContext.subscriptionId,
-        resourceGroup: userContext.resourceGroup,
-        dbAccountName: userContext.databaseAccount.name,
-        cosmosEndpoint: userContext.databaseAccount.properties.documentEndpoint,
-      };
-      const connectionStatus: ContainerConnectionInfo = {
-        status: ConnectionStatusType.Connecting,
-      };
-      useNotebook.getState().setConnectionInfo(connectionStatus);
-      try {
-        TelemetryProcessor.traceStart(Action.PhoenixConnection, {
-          dataExplorerArea: Areas.Notebook,
-        });
-        useNotebook.getState().setIsAllocating(true);
-        const connectionInfo = await this.phoenixClient.allocateContainer(provisionData);
-        if (connectionInfo.status !== HttpStatusCodes.OK) {
-          throw new Error(`Received status code: ${connectionInfo?.status}`);
-        }
-        if (!connectionInfo?.data?.notebookServerUrl) {
-          throw new Error(`NotebookServerUrl is invalid!`);
-        }
-        await this.setNotebookInfo(connectionInfo, connectionStatus);
-        TelemetryProcessor.traceSuccess(Action.PhoenixConnection, {
-          dataExplorerArea: Areas.Notebook,
-        });
-      } catch (error) {
-        TelemetryProcessor.traceFailure(Action.PhoenixConnection, {
-          dataExplorerArea: Areas.Notebook,
-          error: getErrorMessage(error),
-          errorStack: getErrorStack(error),
-        });
-        connectionStatus.status = ConnectionStatusType.Failed;
-        useNotebook.getState().resetContainerConnection(connectionStatus);
-        throw error;
-      } finally {
-        useNotebook.getState().setIsAllocating(false);
-        this.refreshCommandBarButtons();
-        this.refreshNotebookList();
-        this._isInitializingNotebooks = false;
-      }
-    }
-  }
-
-  private async setNotebookInfo(
-    connectionInfo: IResponse<IPhoenixConnectionInfoResult>,
-    connectionStatus: DataModels.ContainerConnectionInfo
-  ) {
-    const containerData = {
-      forwardingId: connectionInfo.data.forwardingId,
-      dbAccountName: userContext.databaseAccount.name,
-    };
-    await this.phoenixClient.initiateContainerHeartBeat(containerData);
-
-    connectionStatus.status = ConnectionStatusType.Connected;
-    useNotebook.getState().setConnectionInfo(connectionStatus);
-    useNotebook.getState().setNotebookServerInfo({
-      notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.data.notebookServerUrl,
-      authToken: userContext.features.notebookServerToken || connectionInfo.data.notebookAuthToken,
-      forwardingId: connectionInfo.data.forwardingId,
-    });
-    this.notebookManager?.notebookClient
-      .getMemoryUsage()
-      .then((memoryUsageInfo) => useNotebook.getState().setMemoryUsageInfo(memoryUsageInfo));
-  }
-
-  public resetNotebookWorkspace(): void {
+  public resetNotebookWorkspace() {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookClient) {
       handleError(
         "Attempt to reset notebook workspace, but notebook is not enabled",
@@ -455,14 +372,11 @@ export default class Explorer {
       );
       return;
     }
-    const dialogContent = NotebookUtil.isPhoenixEnabled()
-      ? "Notebooks saved in the temporary workspace will be deleted. Do you want to proceed?"
-      : "This lets you keep your notebook files and the workspace will be restored to default. Proceed anyway?";
 
     const resetConfirmationDialogProps: DialogProps = {
       isModal: true,
       title: "Reset Workspace",
-      subText: dialogContent,
+      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,
@@ -475,6 +389,7 @@ export default class Explorer {
     if (!databaseAccount) {
       return false;
     }
+
     try {
       const { value: workspaces } = await listByDatabaseAccount(
         userContext.subscriptionId,
@@ -520,54 +435,16 @@ export default class Explorer {
   private _resetNotebookWorkspace = async () => {
     useDialog.getState().closeDialog();
     const clearInProgressMessage = logConsoleProgress("Resetting notebook workspace");
-    let connectionStatus: ContainerConnectionInfo;
     try {
-      const notebookServerInfo = useNotebook.getState().notebookServerInfo;
-      if (!notebookServerInfo || !notebookServerInfo.notebookServerEndpoint) {
-        const error = "No server endpoint detected";
-        Logger.logError(error, "NotebookContainerClient/resetWorkspace");
-        logConsoleError(error);
-        return;
-      }
-      TelemetryProcessor.traceStart(Action.PhoenixResetWorkspace, {
-        dataExplorerArea: Areas.Notebook,
-      });
-      if (NotebookUtil.isPhoenixEnabled()) {
-        useTabs.getState().closeAllNotebookTabs(true);
-        connectionStatus = {
-          status: ConnectionStatusType.Connecting,
-        };
-        useNotebook.getState().setConnectionInfo(connectionStatus);
-      }
-      const connectionInfo = await this.notebookManager?.notebookClient.resetWorkspace();
-      if (connectionInfo?.status !== HttpStatusCodes.OK) {
-        throw new Error(`Reset Workspace: Received status code- ${connectionInfo?.status}`);
-      }
-      if (!connectionInfo?.data?.notebookServerUrl) {
-        throw new Error(`Reset Workspace: NotebookServerUrl is invalid!`);
-      }
-      if (NotebookUtil.isPhoenixEnabled()) {
-        await this.setNotebookInfo(connectionInfo, connectionStatus);
-        useNotebook.getState().setIsRefreshed(!useNotebook.getState().isRefreshed);
-      }
+      await this.notebookManager?.notebookClient.resetWorkspace();
       logConsoleInfo("Successfully reset notebook workspace");
-      TelemetryProcessor.traceSuccess(Action.PhoenixResetWorkspace, {
-        dataExplorerArea: Areas.Notebook,
-      });
+      TelemetryProcessor.traceSuccess(Action.ResetNotebookWorkspace);
     } catch (error) {
       logConsoleError(`Failed to reset notebook workspace: ${error}`);
-      TelemetryProcessor.traceFailure(Action.PhoenixResetWorkspace, {
-        dataExplorerArea: Areas.Notebook,
+      TelemetryProcessor.traceFailure(Action.ResetNotebookWorkspace, {
         error: getErrorMessage(error),
         errorStack: getErrorStack(error),
       });
-      if (NotebookUtil.isPhoenixEnabled()) {
-        connectionStatus = {
-          status: ConnectionStatusType.Failed,
-        };
-        useNotebook.getState().resetContainerConnection(connectionStatus);
-        useNotebook.getState().setIsRefreshed(!useNotebook.getState().isRefreshed);
-      }
       throw error;
     } finally {
       clearInProgressMessage();
@@ -759,9 +636,6 @@ export default class Explorer {
     if (!notebookContentItem || !notebookContentItem.path) {
       throw new Error(`Invalid notebookContentItem: ${notebookContentItem}`);
     }
-    if (notebookContentItem.type === NotebookContentItemType.Notebook && NotebookUtil.isPhoenixEnabled()) {
-      await this.allocateContainer();
-    }
 
     const notebookTabs = useTabs
       .getState()
@@ -983,51 +857,9 @@ export default class Explorer {
       handleError(error, "Explorer/onNewNotebookClicked");
       throw new Error(error);
     }
-    const isPhoenixEnabled = NotebookUtil.isPhoenixEnabled();
-    if (isPhoenixEnabled) {
-      if (isGithubTree) {
-        async () => {
-          await this.allocateContainer();
-          parent = parent || this.resourceTree.myNotebooksContentRoot;
-          this.createNewNoteBook(parent, isGithubTree);
-        };
-      } else {
-        useDialog.getState().showOkCancelModalDialog(
-          Notebook.newNotebookModalTitle,
-          undefined,
-          "Create",
-          async () => {
-            await this.allocateContainer();
-            parent = parent || this.resourceTree.myNotebooksContentRoot;
-            this.createNewNoteBook(parent, isGithubTree);
-          },
-          "Cancel",
-          undefined,
-          this.getNewNoteWarningText()
-        );
-      }
-    } else {
-      parent = parent || this.resourceTree.myNotebooksContentRoot;
-      this.createNewNoteBook(parent, isGithubTree);
-    }
-  }
 
-  private getNewNoteWarningText(): JSX.Element {
-    return (
-      <>
-        <p>{Notebook.newNotebookModalContent1}</p>
-        <br />
-        <p>
-          {Notebook.newNotebookModalContent2}
-          <Link href={Notebook.cosmosNotebookHomePageUrl} target="_blank">
-            {Notebook.learnMore}
-          </Link>
-        </p>
-      </>
-    );
-  }
+    parent = parent || this.resourceTree.myNotebooksContentRoot;
 
-  private createNewNoteBook(parent?: NotebookContentItem, isGithubTree?: boolean): void {
     const clearInProgressMessage = logConsoleProgress(`Creating new notebook in ${parent.path}`);
     const startKey: number = TelemetryProcessor.traceStart(Action.CreateNewNotebook, {
       dataExplorerArea: Constants.Areas.Notebook,
@@ -1074,26 +906,7 @@ export default class Explorer {
     await this.notebookManager?.notebookContentClient.updateItemChildrenInPlace(item);
   }
 
-  public async openNotebookTerminal(kind: ViewModels.TerminalKind): Promise<void> {
-    if (NotebookUtil.isPhoenixEnabled()) {
-      await this.allocateContainer();
-      const notebookServerInfo = useNotebook.getState().notebookServerInfo;
-      if (notebookServerInfo && notebookServerInfo.notebookServerEndpoint !== undefined) {
-        this.connectToNotebookTerminal(kind);
-      } else {
-        useDialog
-          .getState()
-          .showOkModalDialog(
-            "Failed to connect",
-            "Failed to connect to temporary workspace. This could happen because of network issues. Please refresh the page and try again."
-          );
-      }
-    } else {
-      this.connectToNotebookTerminal(kind);
-    }
-  }
-
-  private connectToNotebookTerminal(kind: ViewModels.TerminalKind): void {
+  public openNotebookTerminal(kind: ViewModels.TerminalKind) {
     let title: string;
 
     switch (kind) {
@@ -1144,7 +957,7 @@ export default class Explorer {
     notebookUrl?: string,
     galleryItem?: IGalleryItem,
     isFavorite?: boolean
-  ): Promise<void> {
+  ) {
     const title = "Gallery";
     const GalleryTab = await (await import(/* webpackChunkName: "GalleryTab" */ "./Tabs/GalleryTab")).default;
     const galleryTab = useTabs
@@ -1187,10 +1000,7 @@ export default class Explorer {
           <CassandraAddCollectionPane explorer={this} cassandraApiClient={new CassandraAPIDataClient()} />
         );
     } else {
-      const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
-      throughputCap && throughputCap !== -1
-        ? await useDatabases.getState().loadAllOffers()
-        : await useDatabases.getState().loadDatabaseOffers();
+      await useDatabases.getState().loadDatabaseOffers();
       useSidePanel
         .getState()
         .openSidePanel("New " + getCollectionName(), <AddCollectionPanel explorer={this} databaseId={databaseId} />);
@@ -1216,9 +1026,7 @@ export default class Explorer {
   }
 
   public async handleOpenFileAction(path: string): Promise<void> {
-    if (userContext.features.phoenix) {
-      await this.allocateContainer();
-    } else if (!(await this._containsDefaultNotebookWorkspace(userContext.databaseAccount))) {
+    if (!(await this._containsDefaultNotebookWorkspace(userContext.databaseAccount))) {
       this._openSetupNotebooksPaneForQuickstart();
     }
 
@@ -1250,27 +1058,7 @@ export default class Explorer {
   }
 
   public openUploadFilePanel(parent?: NotebookContentItem): void {
-    if (NotebookUtil.isPhoenixEnabled()) {
-      useDialog.getState().showOkCancelModalDialog(
-        Notebook.newNotebookUploadModalTitle,
-        undefined,
-        "Upload",
-        async () => {
-          await this.allocateContainer();
-          parent = parent || this.resourceTree.myNotebooksContentRoot;
-          this.uploadFilePanel(parent);
-        },
-        "Cancel",
-        undefined,
-        this.getNewNoteWarningText()
-      );
-    } else {
-      parent = parent || this.resourceTree.myNotebooksContentRoot;
-      this.uploadFilePanel(parent);
-    }
-  }
-
-  private uploadFilePanel(parent?: NotebookContentItem): void {
+    parent = parent || this.resourceTree.myNotebooksContentRoot;
     useSidePanel
       .getState()
       .openSidePanel(
@@ -1279,34 +1067,17 @@ export default class Explorer {
       );
   }
 
-  public getDownloadModalConent(fileName: string): JSX.Element {
-    if (NotebookUtil.isPhoenixEnabled()) {
-      return (
-        <>
-          <p>{Notebook.galleryNotebookDownloadContent1}</p>
-          <br />
-          <p>
-            {Notebook.galleryNotebookDownloadContent2}
-            <Link href={Notebook.cosmosNotebookGitDocumentationUrl} target="_blank">
-              {Notebook.learnMore}
-            </Link>
-          </p>
-        </>
-      );
-    }
-    return <p> Download {fileName} from gallery as a copy to your notebooks to run and/or edit the notebook. </p>;
-  }
-
   public async refreshExplorer(): Promise<void> {
     userContext.authType === AuthType.ResourceToken
       ? this.refreshDatabaseForResourceToken()
       : this.refreshAllDatabases();
     await useNotebook.getState().refreshNotebooksEnabledStateForAccount();
-
-    // TODO: remove reference to isNotebookEnabled and isNotebooksEnabledForAccount
-    const isNotebookEnabled = userContext.features.notebooksDownBanner || userContext.features.phoenix;
+    const isNotebookEnabled: boolean =
+      userContext.authType !== AuthType.ResourceToken &&
+      ((await this._containsDefaultNotebookWorkspace(userContext.databaseAccount)) ||
+        userContext.features.enableNotebooks);
     useNotebook.getState().setIsNotebookEnabled(isNotebookEnabled);
-    useNotebook.getState().setIsShellEnabled(userContext.features.phoenix && isPublicInternetAccessAllowed());
+    useNotebook.getState().setIsShellEnabled(isNotebookEnabled && isPublicInternetAccessAllowed());
 
     TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
       isNotebookEnabled,

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

@@ -1,11 +1,11 @@
-import { GraphData, GremlinVertex, GremlinEdge } from "./GraphData";
+import { GraphData, GremlinEdge, GremlinVertex } from "./GraphData";
 
 describe("Graph Data", () => {
   it("should set only one node as root", () => {
     const graphData = new GraphData<GremlinVertex, GremlinEdge>();
-    const v1: GremlinVertex = { id: "1", label: null };
-    const v2: GremlinVertex = { id: "2", label: null };
-    const v3: GremlinVertex = { id: "3", label: null };
+    const v1: GremlinVertex = { id: "1", label: undefined };
+    const v2: GremlinVertex = { id: "2", label: undefined };
+    const v3: GremlinVertex = { id: "3", label: undefined };
     v3._isRoot = true;
 
     graphData.addVertex(v1);
@@ -28,9 +28,9 @@ describe("Graph Data", () => {
 
   it("should properly find root id", () => {
     const graphData = new GraphData();
-    const v1: GremlinVertex = { id: "1", label: null };
-    const v2: GremlinVertex = { id: "2", label: null };
-    const v3: GremlinVertex = { id: "3", label: null };
+    const v1: GremlinVertex = { id: "1", label: undefined };
+    const v2: GremlinVertex = { id: "2", label: undefined };
+    const v3: GremlinVertex = { id: "3", label: undefined };
 
     graphData.addVertex(v1);
     graphData.addVertex(v2);
@@ -44,12 +44,12 @@ describe("Graph Data", () => {
   it("should remove edge from graph", () => {
     const graphData = new GraphData();
 
-    graphData.addVertex({ id: "v1", label: null });
-    graphData.addVertex({ id: "v2", label: null });
-    graphData.addVertex({ id: "v3", label: null });
+    graphData.addVertex({ id: "v1", label: undefined });
+    graphData.addVertex({ id: "v2", label: undefined });
+    graphData.addVertex({ id: "v3", label: undefined });
 
-    graphData.addEdge({ id: "e1", inV: "v1", outV: "v2", label: null });
-    graphData.addEdge({ id: "e2", inV: "v1", outV: "v3", label: null });
+    graphData.addEdge({ id: "e1", inV: "v1", outV: "v2", label: "" });
+    graphData.addEdge({ id: "e2", inV: "v1", outV: "v3", label: "" });
 
     // in edge
     graphData.removeEdge("e1", false);

src/Explorer/Graph/GraphExplorerComponent/GraphData.ts

@@ -1,5 +1,5 @@
+import { SimulationLinkDatum, SimulationNodeDatum } from "d3";
 import _ from "underscore";
-import { SimulationNodeDatum, SimulationLinkDatum } from "d3";
 
 export interface PaginationInfo {
   total: number;
@@ -10,7 +10,7 @@ export interface PaginationInfo {
 
 export interface GremlinVertex {
   id: string;
-  label: string;
+  label?: string;
   inE?: { [label: string]: GremlinShortInEdge[] };
   outE?: { [label: string]: GremlinShortOutEdge[] };
   properties?: { [propName: string]: GremlinProperty[] };

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { FeedOptions, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import * as Q from "q";
 import * as React from "react";
@@ -296,6 +294,8 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       this.setGremlinParams();
     }
 
+    const selectedNode = this.state.highlightedNode;
+
     props.onGraphAccessorCreated({
       applyFilter: this.submitQuery.bind(this),
       addVertex: this.addVertex.bind(this),
@@ -303,7 +303,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     });
   } // constructor
 
-  public shareIGraphConfig(igraphConfig: IGraphConfig): void {
+  public shareIGraphConfig(igraphConfig: IGraphConfig) {
     this.setState({
       igraphConfig: { ...igraphConfig },
     });
@@ -330,10 +330,10 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     const partitionKeyProperty = this.props.collectionPartitionKeyProperty;
 
     // aggregate all the properties, remove dropped ones
-    const finalProperties = editedProperties.existingProperties.concat(editedProperties.addedProperties);
+    let finalProperties = editedProperties.existingProperties.concat(editedProperties.addedProperties);
 
     // Compose the query
-    const pkId = editedProperties.pkId;
+    let pkId = editedProperties.pkId;
     let updateQueryFragment = "";
 
     finalProperties.forEach((p) => {
@@ -422,7 +422,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * Called from ko binding
    * @param id
    */
-  public selectNode(id: string): void {
+  public selectNode(id: string) {
     if (!this.d3ForceGraph) {
       console.warn("Attempting to select node, but d3ForceGraph not initialized, yet.");
       return;
@@ -431,7 +431,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     this.d3ForceGraph.selectNode(id);
   }
 
-  public deleteHighlightedNode(): void {
+  public deleteHighlightedNode() {
     if (!this.state.highlightedNode) {
       GraphExplorer.reportToConsole(ConsoleDataType.Error, "No highlighted node to remove.");
       return;
@@ -467,23 +467,23 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * Is of type: {e: GremlinEdge, v: GremlinVertex}[]
    * @param data
    */
-  public static isEdgeVertexPairArray(data: any): boolean {
+  public static isEdgeVertexPairArray(data: any) {
     if (!(data instanceof Array)) {
       GraphExplorer.reportToConsole(ConsoleDataType.Info, "Query result not an array", data);
       return false;
     }
 
-    const pairs: any[] = data;
+    let pairs: any[] = data;
     for (let i = 0; i < pairs.length; i++) {
       const item = pairs[i];
       if (
-        !Object.prototype.hasOwnProperty.call(item, "e") ||
-        !Object.prototype.hasOwnProperty.call(item, "v") ||
-        !Object.prototype.hasOwnProperty.call(item["e"], "id") ||
-        !Object.prototype.hasOwnProperty.call(item["e"], "type") ||
+        !item.hasOwnProperty("e") ||
+        !item.hasOwnProperty("v") ||
+        !item["e"].hasOwnProperty("id") ||
+        !item["e"].hasOwnProperty("type") ||
         item["e"].type !== "edge" ||
-        !Object.prototype.hasOwnProperty.call(item["v"], "id") ||
-        !Object.prototype.hasOwnProperty.call(item["e"], "type") ||
+        !item["v"].hasOwnProperty("id") ||
+        !item["v"].hasOwnProperty("type") ||
         item["v"].type !== "vertex"
       ) {
         return false;
@@ -514,7 +514,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     // Try hitting cache first
     const cache = outE ? this.outECache : this.inECache;
     const pairs = cache.retrieve(vertex.id, startIndex, pageSize);
-    if (pairs !== null && pairs.length === pageSize) {
+    if (pairs != null && pairs.length === pageSize) {
       const msg = `Retrieved ${pairs.length} ${outE ? "outE" : "inE"} edges from cache for vertex id: ${vertex.id}`;
       GraphExplorer.reportToConsole(ConsoleDataType.Info, msg);
       return Q.resolve(pairs);
@@ -588,6 +588,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       vertex._outEAllLoaded &&
       vertex._inEAllLoaded
     ) {
+      console.info("No more edges to load for vertex " + vertex.id);
       updateGraphData();
       return Q.resolve(graphData);
     }
@@ -667,7 +668,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       }
     );
 
-    return promise.then(() => {
+    return promise.then((nbPairsFetched: number) => {
       if (offsetIndex >= GraphExplorer.LOAD_PAGE_SIZE || !vertex._outEAllLoaded || !vertex._inEAllLoaded) {
         vertex._pagination = {
           total:
@@ -753,7 +754,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * Create a new edge in docdb and update graph
    * @param e
    */
-  public createNewEdge(e: GraphNewEdgeData): Q.Promise<unknown> {
+  public createNewEdge(e: GraphNewEdgeData): Q.Promise<any> {
     const q = `g.V('${GraphUtil.escapeSingleQuotes(e.inputOutV)}').addE('${GraphUtil.escapeSingleQuotes(
       e.label
     )}').To(g.V('${GraphUtil.escapeSingleQuotes(e.inputInV)}'))`;
@@ -771,8 +772,8 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
           return;
         }
 
-        const edge = edges[0];
-        const graphData = this.originalGraphData;
+        let edge = edges[0];
+        let graphData = this.originalGraphData;
         graphData.addEdge(edge);
 
         // Allow loadNeighbors to load list new edge
@@ -799,10 +800,10 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * Manually update in-memory graph.
    * @param edgeId
    */
-  public removeEdge(edgeId: string): Q.Promise<unknown> {
+  public removeEdge(edgeId: string): Q.Promise<any> {
     return this.submitToBackend(`g.E('${GraphUtil.escapeSingleQuotes(edgeId)}').drop()`).then(
       () => {
-        const graphData = this.originalGraphData;
+        let graphData = this.originalGraphData;
         graphData.removeEdge(edgeId, false);
         this.updateGraphData(graphData, this.state.igraphConfig);
       },
@@ -825,14 +826,10 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       return false;
     }
 
-    const vertices: any[] = data;
+    let vertices: any[] = data;
     if (vertices.length > 0) {
-      const v0 = vertices[0];
-      if (
-        !Object.prototype.hasOwnProperty.call(v0, "id") ||
-        !Object.prototype.hasOwnProperty.call(v0, "type") ||
-        v0.type !== "vertex"
-      ) {
+      let v0 = vertices[0];
+      if (!v0.hasOwnProperty("id") || !v0.hasOwnProperty("type") || v0.type !== "vertex") {
         return false;
       }
     }
@@ -840,7 +837,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   }
 
   public processGremlinQueryResults(result: GremlinClient.GremlinRequestResult): void {
-    const data = result.data as GraphData.GremlinVertex[];
+    const data = result.data as any;
     this.setFilterQueryStatus(FilterQueryStatus.GraphEmptyResult);
 
     if (data === null) {
@@ -930,13 +927,13 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
           throw { title: err };
         }
 
-        if (vertices === null || vertices.length < 1) {
+        if (vertices == null || vertices.length < 1) {
           const err = "Failed to create vertex (no vertex in response)";
           GraphExplorer.reportToConsole(ConsoleDataType.Error, err, vertices);
           throw { title: err };
         }
 
-        const vertex = vertices[0];
+        let vertex = vertices[0];
         const graphData = this.originalGraphData;
         graphData.addVertex(vertex);
         this.updateGraphData(graphData, this.state.igraphConfig);
@@ -1025,7 +1022,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     this.gremlinClient.destroy();
   }
   public componentDidMount(): void {
-    if (this.props.onLoadStartKey !== null && this.props.onLoadStartKey !== undefined) {
+    if (this.props.onLoadStartKey != null && this.props.onLoadStartKey != undefined) {
       TelemetryProcessor.traceSuccess(
         Action.Tab,
         {
@@ -1085,7 +1082,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   public static reportToConsole(type: ConsoleDataType.Info, msg: string, ...errorData: any[]): void;
   public static reportToConsole(type: ConsoleDataType.Error, msg: string, ...errorData: any[]): void;
   public static reportToConsole(type: ConsoleDataType, msg: string, ...errorData: any[]): void | (() => void) {
-    let errorDataStr = "";
+    let errorDataStr: string = "";
     if (errorData && errorData.length > 0) {
       console.error(msg, errorData);
       errorDataStr = ": " + JSON.stringify(errorData);
@@ -1164,15 +1161,12 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       )}"`
     ).then(
       (documents: DataModels.DocumentId[]) => {
-        $.each(
-          documents,
-          (index: number, doc: { _graph_icon_property_value: string; icon: string; format: string }) => {
-            newIconsMap[doc["_graph_icon_property_value"]] = {
-              data: doc["icon"],
-              format: doc["format"],
-            };
-          }
-        );
+        $.each(documents, (index: number, doc: any) => {
+          newIconsMap[doc["_graph_icon_property_value"]] = {
+            data: doc["icon"],
+            format: doc["format"],
+          };
+        });
 
         // Update graph configuration
         this.setState({
@@ -1229,8 +1223,8 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     const key = this.state.igraphConfig.nodeCaption;
     return $.map(
       this.state.rootMap,
-      (value: any): LeftPane.CaptionId => {
-        const result = GraphData.GraphData.getNodePropValue(value, key);
+      (value: any, index: number): LeftPane.CaptionId => {
+        let result = GraphData.GraphData.getNodePropValue(value, key);
         return {
           caption: result !== undefined ? result : value.id,
           id: value.id,
@@ -1243,7 +1237,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * Selecting a root node means
    * @param node
    */
-  private selectRootNode(id: string): Q.Promise<unknown> {
+  private selectRootNode(id: string): Q.Promise<any> {
     if (!this.d3ForceGraph) {
       console.warn("Attempting to reset zoom, but d3ForceGraph not initialized, yet.");
     } else {
@@ -1288,7 +1282,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
         this.collectNodeProperties(this.originalGraphData.vertices);
         this.updatePropertiesPane(id);
       },
-      (reason: string) => {
+      (reason: any) => {
         GraphExplorer.reportToConsole(ConsoleDataType.Error, `Failed to select root node. Reason:${reason}`);
       }
     );
@@ -1355,10 +1349,10 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   private getPkIdFromVertex(v: GraphData.GremlinVertex): string {
     if (
       this.props.collectionPartitionKeyProperty &&
-      Object.prototype.hasOwnProperty.call(v, "properties") &&
-      Object.prototype.hasOwnProperty.call(v.properties, this.props.collectionPartitionKeyProperty) &&
+      v.hasOwnProperty("properties") &&
+      v.properties.hasOwnProperty(this.props.collectionPartitionKeyProperty) &&
       v.properties[this.props.collectionPartitionKeyProperty].length > 0 &&
-      Object.prototype.hasOwnProperty.call(v.properties[this.props.collectionPartitionKeyProperty][0], "value")
+      v.properties[this.props.collectionPartitionKeyProperty][0].hasOwnProperty("value")
     ) {
       const pk = v.properties[this.props.collectionPartitionKeyProperty][0].value;
       return GraphExplorer.generatePkIdPair(pk, v.id);
@@ -1376,8 +1370,8 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   private getPkIdFromNodeData(v: GraphHighlightedNodeData): string {
     if (
       this.props.collectionPartitionKeyProperty &&
-      Object.prototype.hasOwnProperty.call(v, "properties") &&
-      Object.prototype.hasOwnProperty.call(v.properties, this.props.collectionPartitionKeyProperty)
+      v.hasOwnProperty("properties") &&
+      v.properties.hasOwnProperty(this.props.collectionPartitionKeyProperty)
     ) {
       const pk = v.properties[this.props.collectionPartitionKeyProperty];
       return GraphExplorer.generatePkIdPair(pk[0] as PartitionKeyValueType, v.id);
@@ -1394,14 +1388,14 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * @return id
    */
   public static getPkIdFromDocumentId(d: DataModels.DocumentId, collectionPartitionKeyProperty: string): string {
-    const { id } = d;
+    let { id } = d;
     if (typeof id !== "string") {
       const error = `Vertex id is not a string: ${JSON.stringify(id)}.`;
       logConsoleError(error);
       throw new Error(error);
     }
 
-    if (collectionPartitionKeyProperty && Object.prototype.hasOwnProperty.call(d, collectionPartitionKeyProperty)) {
+    if (collectionPartitionKeyProperty && d.hasOwnProperty(collectionPartitionKeyProperty)) {
       let pk = (d as any)[collectionPartitionKeyProperty];
       if (typeof pk !== "string" && typeof pk !== "number" && typeof pk !== "boolean") {
         if (Array.isArray(pk) && pk.length > 0) {
@@ -1431,7 +1425,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     }"] AS p FROM c WHERE NOT IS_DEFINED(c._isEdge)`;
     return this.executeNonPagedDocDbQuery(q).then(
       (documents: DataModels.DocumentId[]) => {
-        const possibleVertices = [] as PossibleVertex[];
+        let possibleVertices = [] as PossibleVertex[];
         $.each(documents, (index: number, item: any) => {
           if (highlightedNodeId && item.id === highlightedNodeId) {
             // Exclude highlighed node in the list
@@ -1445,7 +1439,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
               caption: item.p,
             });
           } else {
-            if (Object.prototype.hasOwnProperty.call(item, "p")) {
+            if (item.hasOwnProperty("p")) {
               possibleVertices.push({
                 value: item.id,
                 caption: item.p[0]["_value"],
@@ -1468,17 +1462,17 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * @param addedEdges
    * @return promise when done
    */
-  private editGraphEdges(editedEdges: EditedEdges): Q.Promise<unknown> {
-    const promises = [];
+  private editGraphEdges(editedEdges: EditedEdges): Q.Promise<any> {
+    let promises = [];
     // Drop edges
     for (let i = 0; i < editedEdges.droppedIds.length; i++) {
-      const id = editedEdges.droppedIds[i];
+      let id = editedEdges.droppedIds[i];
       promises.push(this.removeEdge(id));
     }
 
     // Add edges
     for (let i = 0; i < editedEdges.addedEdges.length; i++) {
-      const e = editedEdges.addedEdges[i];
+      let e = editedEdges.addedEdges[i];
       promises.push(
         this.createNewEdge(e).then(() => {
           // Reload neighbors in case we linked to a vertex that isn't loaded in the graph
@@ -1531,9 +1525,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   /**
    * For unit testing purposes
    */
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  public onGraphUpdated(_timestamp: number): void {}
+  public onGraphUpdated(timestamp: number): void {}
 
   /**
    * Get node properties for styling purposes. Result is the union of all properties of all nodes.
@@ -1541,17 +1533,17 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   private collectNodeProperties(vertices: GraphData.GremlinVertex[]) {
     const props = {} as any; // Hashset
     $.each(vertices, (index: number, item: GraphData.GremlinVertex) => {
-      for (const p in item) {
+      for (var p in item) {
         // DocDB: Exclude type because it's always 'vertex'
         if (p !== "type" && typeof (item as any)[p] === "string") {
           props[p] = true;
         }
       }
       // Inspect properties
-      if (Object.prototype.hasOwnProperty.call(item, "properties")) {
+      if (item.hasOwnProperty("properties")) {
         // TODO This is DocDB-graph specific
         // Assume each property value is [{value:... }]
-        for (const f in item.properties) {
+        for (var f in item.properties) {
           props[f] = true;
         }
       }
@@ -1578,21 +1570,21 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       return;
     }
 
-    const data = this.originalGraphData.getVertexById(id);
+    let data = this.originalGraphData.getVertexById(id);
 
     // A bit of translation to make it easier to display
-    const props: { [id: string]: ViewModels.GremlinPropertyValueType[] } = {};
-    for (const p in data.properties) {
+    let props: { [id: string]: ViewModels.GremlinPropertyValueType[] } = {};
+    for (let p in data.properties) {
       props[p] = data.properties[p].map((gremlinProperty) => gremlinProperty.value);
     }
 
     // update neighbors
-    const sources: NeighborVertexBasicInfo[] = [];
-    const targets: NeighborVertexBasicInfo[] = [];
+    let sources: NeighborVertexBasicInfo[] = [];
+    let targets: NeighborVertexBasicInfo[] = [];
     this.props.onResetDefaultGraphConfigValues();
-    const nodeCaption = this.state.igraphConfigUiData.nodeCaptionChoice;
+    let nodeCaption = this.state.igraphConfigUiData.nodeCaptionChoice;
     this.updateSelectedNodeNeighbors(data.id, nodeCaption, sources, targets);
-    const sData: GraphHighlightedNodeData = {
+    let sData: GraphHighlightedNodeData = {
       id: data.id,
       label: data.label,
       properties: props,
@@ -1619,16 +1611,16 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     targets: NeighborVertexBasicInfo[]
   ): void {
     // update neighbors
-    const gd = this.originalGraphData;
-    const v = gd.getVertexById(id);
+    let gd = this.originalGraphData;
+    let v = gd.getVertexById(id);
 
     // Clear the array while keeping the references
     sources.length = 0;
     targets.length = 0;
 
-    const possibleEdgeLabels = {} as any; // Collect all edge labels in a hashset
+    let possibleEdgeLabels = {} as any; // Collect all edge labels in a hashset
 
-    for (const p in v.inE) {
+    for (let p in v.inE) {
       possibleEdgeLabels[p] = true;
       const edges = v.inE[p];
       $.each(edges, (index: number, edge: GraphData.GremlinShortInEdge) => {
@@ -1637,7 +1629,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
           // If id not known, it must be an edge node whose neighbor hasn't been loaded into the graph, yet
           return;
         }
-        const caption = GraphData.GraphData.getNodePropValue(gd.getVertexById(neighborId), nodeCaption) as string;
+        let caption = GraphData.GraphData.getNodePropValue(gd.getVertexById(neighborId), nodeCaption) as string;
         sources.push({
           name: caption,
           id: neighborId,
@@ -1647,7 +1639,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       });
     }
 
-    for (const p in v.outE) {
+    for (let p in v.outE) {
       possibleEdgeLabels[p] = true;
       const edges = v.outE[p];
       $.each(edges, (index: number, edge: GraphData.GremlinShortOutEdge) => {
@@ -1656,7 +1648,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
           // If id not known, it must be an edge node whose neighbor hasn't been loaded into the graph, yet
           return;
         }
-        const caption = GraphData.GraphData.getNodePropValue(gd.getVertexById(neighborId), nodeCaption) as string;
+        let caption = GraphData.GraphData.getNodePropValue(gd.getVertexById(neighborId), nodeCaption) as string;
         targets.push({
           name: caption,
           id: neighborId,
@@ -1668,7 +1660,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
 
     this.setState({
       possibleEdgeLabels: Object.keys(possibleEdgeLabels).map(
-        (value: string): InputTypeaheadComponent.Item => {
+        (value: string, index: number, array: string[]): InputTypeaheadComponent.Item => {
           return { caption: value, value: value };
         }
       ),
@@ -1689,20 +1681,20 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       return;
     }
 
-    const updatedVertex = vertices[0];
+    let updatedVertex = vertices[0];
     if (this.originalGraphData.hasVertexId(updatedVertex.id)) {
-      const currentVertex = this.originalGraphData.getVertexById(updatedVertex.id);
+      let currentVertex = this.originalGraphData.getVertexById(updatedVertex.id);
       // Copy updated properties
-      if (Object.prototype.hasOwnProperty.call(currentVertex, "properties")) {
+      if (currentVertex.hasOwnProperty("properties")) {
         delete currentVertex["properties"];
       }
-      for (const p in updatedVertex) {
+      for (var p in updatedVertex) {
         (currentVertex as any)[p] = updatedVertex[p];
       }
     }
 
     // TODO This kind of assumes saveVertexProperty is done from property panes.
-    const hn = this.state.highlightedNode;
+    let hn = this.state.highlightedNode;
     if (hn && hn.id === updatedVertex.id) {
       this.updatePropertiesPane(hn.id);
     }
@@ -1716,7 +1708,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     igraphConfig?: IGraphConfig
   ) {
     this.originalGraphData = graphData;
-    const gd = JSON.parse(JSON.stringify(this.originalGraphData));
+    let gd = JSON.parse(JSON.stringify(this.originalGraphData));
     if (!this.d3ForceGraph) {
       console.warn("Attempting to update graph, but d3ForceGraph not initialized, yet.");
       return;
@@ -1881,7 +1873,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
 
     promise
       .then((result: GremlinClient.GremlinRequestResult) => this.processGremlinQueryResults(result))
-      .catch((error: Error) => {
+      .catch((error: any) => {
         const errorMsg = `Failed to process query result: ${getErrorMessage(error)}`;
         GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
         this.setState({

src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx

@@ -58,7 +58,7 @@ export class LeftPaneComponent extends React.Component<LeftPaneComponentProps> {
         className={className}
         as="tr"
         aria-label={node.caption}
-        onActivated={() => this.props.onRootNodeSelected(node.id)}
+        onActivated={(e) => this.props.onRootNodeSelected(node.id)}
         key={node.id}
       >
         <td className="resultItem">

src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
+import { GraphVizComponent, GraphVizComponentProps } from "./GraphVizComponent";
 import CollapseArrowIcon from "../../../../images/Collapse_arrow_14x14.svg";
 import ExpandIcon from "../../../../images/Expand_14x14.svg";
 import LoadingIndicatorIcon from "../../../../images/LoadingIndicator_3Squares.gif";
-import { GraphVizComponent, GraphVizComponentProps } from "./GraphVizComponent";
 
 interface MiddlePaneComponentProps {
   isTabsContentExpanded: boolean;
@@ -17,14 +17,7 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
       <div className="middlePane">
         <div className="graphTitle">
           <span className="paneTitle">Graph</span>
-          <span
-            className="graphExpandCollapseBtn pull-right"
-            onClick={this.props.toggleExpandGraph}
-            role="button"
-            aria-expanded={this.props.isTabsContentExpanded}
-            aria-name="View graph in full screen"
-            tabIndex={0}
-          >
+          <span className="graphExpandCollapseBtn pull-right" onClick={this.props.toggleExpandGraph}>
             <img
               src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}
               alt={this.props.isTabsContentExpanded ? "collapse graph content" : "expand graph content"}

src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.test.tsx

@@ -1,8 +1,8 @@
+import React from "react";
 import { mount, ReactWrapper } from "enzyme";
 import * as Q from "q";
-import React from "react";
-import { GraphHighlightedNodeData, PossibleVertex } from "./GraphExplorer";
-import { Mode, NodePropertiesComponent, NodePropertiesComponentProps } from "./NodePropertiesComponent";
+import { NodePropertiesComponent, NodePropertiesComponentProps, Mode } from "./NodePropertiesComponent";
+import { GraphHighlightedNodeData, EditedProperties, EditedEdges, PossibleVertex } from "./GraphExplorer";
 
 describe("Property pane", () => {
   const title = "My Title";
@@ -37,18 +37,17 @@ describe("Property pane", () => {
     return {
       expandedTitle: title,
       isCollapsed: false,
-      onCollapsedChanged: jest.fn(),
+      onCollapsedChanged: (newValue: boolean): void => {},
       node: highlightedNode,
-      getPkIdFromNodeData: (): string => undefined,
-      collectionPartitionKeyProperty: undefined,
-      updateVertexProperties: (): Q.Promise<void> => Q.resolve(),
-      selectNode: jest.fn(),
-      updatePossibleVertices: (): Q.Promise<PossibleVertex[]> => Q.resolve(undefined),
-      possibleEdgeLabels: undefined,
-      //eslint-disable-next-line
-      editGraphEdges: (): Q.Promise<any> => Q.resolve(),
-      deleteHighlightedNode: jest.fn(),
-      onModeChanged: jest.fn(),
+      getPkIdFromNodeData: (v: GraphHighlightedNodeData): string => null,
+      collectionPartitionKeyProperty: null,
+      updateVertexProperties: (editedProperties: EditedProperties): Q.Promise<void> => Q.resolve(),
+      selectNode: (id: string): void => {},
+      updatePossibleVertices: (): Q.Promise<PossibleVertex[]> => Q.resolve(null),
+      possibleEdgeLabels: null,
+      editGraphEdges: (editedEdges: EditedEdges): Q.Promise<any> => Q.resolve(),
+      deleteHighlightedNode: (): void => {},
+      onModeChanged: (newMode: Mode): void => {},
       viewMode: Mode.READONLY_PROP,
     };
   };

src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx

@@ -72,7 +72,7 @@ export class NodePropertiesComponent extends React.Component<
     super(props);
     this.state = {
       editedProperties: {
-        pkId: undefined,
+        pkId: null,
         readOnlyProperties: [],
         existingProperties: [],
         addedProperties: [],
@@ -98,12 +98,15 @@ export class NodePropertiesComponent extends React.Component<
     };
   }
 
-  public static getDerivedStateFromProps(props: NodePropertiesComponentProps): Partial<NodePropertiesComponentState> {
+  public static getDerivedStateFromProps(
+    props: NodePropertiesComponentProps,
+    state: NodePropertiesComponentState
+  ): Partial<NodePropertiesComponentState> {
     if (props.viewMode !== Mode.READONLY_PROP) {
       return { isDeleteConfirm: false };
     }
 
-    return undefined;
+    return null;
   }
 
   public render(): JSX.Element {
@@ -135,10 +138,10 @@ export class NodePropertiesComponent extends React.Component<
    * @param value
    */
   private static getTypeOption(value: any): ViewModels.InputPropertyValueTypeString {
-    if (value === undefined) {
+    if (value == null) {
       return "null";
     }
-    const type = typeof value;
+    let type = typeof value;
     switch (type) {
       case "number":
       case "boolean":
@@ -169,9 +172,10 @@ export class NodePropertiesComponent extends React.Component<
     ];
 
     const existingProps: ViewModels.InputProperty[] = [];
+
     if (this.props.node.hasOwnProperty("properties")) {
       const hProps = this.props.node["properties"];
-      for (const p in hProps) {
+      for (let p in hProps) {
         const propValues = hProps[p];
         (p === partitionKeyProperty ? readOnlyProps : existingProps).push({
           key: p,
@@ -433,7 +437,7 @@ export class NodePropertiesComponent extends React.Component<
         </div>
       );
     } else {
-      return undefined;
+      return null;
     }
   }
 

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -9,10 +9,8 @@ import create, { UseStore } from "zustand";
 import { StyleConstants } from "../../../Common/Constants";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { useTabs } from "../../../hooks/useTabs";
-import { userContext } from "../../../UserContext";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
-import { NotebookUtil } from "../../Notebook/NotebookUtil";
 import { useSelectedNode } from "../../useSelectedNode";
 import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
 import * as CommandBarUtil from "./CommandBarUtil";
@@ -56,15 +54,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
   uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
-  if (NotebookUtil.isPhoenixEnabled()) {
-    uiFabricControlButtons.unshift(CommandBarUtil.createConnectionStatus(container, "connectionStatus"));
-  }
-
-  if (
-    userContext.features.phoenix === false &&
-    userContext.features.notebooksTemporarilyDown === false &&
-    useTabs.getState().activeTab?.tabKind === ViewModels.CollectionTabKind.NotebookV2
-  ) {
+  if (useTabs.getState().activeTab?.tabKind === ViewModels.CollectionTabKind.NotebookV2) {
     uiFabricControlButtons.unshift(CommandBarUtil.createMemoryTracker("memoryTracker"));
   }
 

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -80,9 +80,8 @@ export function createStaticCommandBarButtons(
     }
 
     notebookButtons.push(createOpenTerminalButton(container));
-    if (selectedNodeState.isConnectedToContainer()) {
-      notebookButtons.push(createNotebookWorkspaceResetButton(container));
-    }
+
+    notebookButtons.push(createNotebookWorkspaceResetButton(container));
     if (
       (userContext.apiType === "Mongo" &&
         useNotebook.getState().isShellEnabled &&
@@ -310,13 +309,8 @@ function createNewDatabase(container: Explorer): CommandButtonComponentProps {
   return {
     iconSrc: AddDatabaseIcon,
     iconAlt: label,
-    onCommandClick: async () => {
-      const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
-      if (throughputCap && throughputCap !== -1) {
-        await useDatabases.getState().loadAllOffers();
-      }
-      useSidePanel.getState().openSidePanel("New " + getDatabaseName(), <AddDatabasePanel explorer={container} />);
-    },
+    onCommandClick: () =>
+      useSidePanel.getState().openSidePanel("New " + getDatabaseName(), <AddDatabasePanel explorer={container} />),
     commandButtonLabel: label,
     ariaLabel: label,
     hasPopup: true,
@@ -601,7 +595,7 @@ function createManageGitHubAccountButton(container: Explorer): CommandButtonComp
   return {
     iconSrc: GitHubIcon,
     iconAlt: label,
-    onCommandClick: () => {
+    onCommandClick: () =>
       useSidePanel
         .getState()
         .openSidePanel(
@@ -611,8 +605,7 @@ function createManageGitHubAccountButton(container: Explorer): CommandButtonComp
             gitHubClientProp={container.notebookManager.gitHubClient}
             junoClientProp={junoClient}
           />
-        );
-    },
+        ),
     commandButtonLabel: label,
     hasPopup: false,
     disabled: false,

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -13,8 +13,6 @@ import { StyleConstants } from "../../../Common/Constants";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-import Explorer from "../../Explorer";
-import { ConnectionStatus } from "./ConnectionStatusComponent";
 import { MemoryTracker } from "./MemoryTrackerComponent";
 
 /**
@@ -203,10 +201,3 @@ export const createMemoryTracker = (key: string): ICommandBarItemProps => {
     onRender: () => <MemoryTracker />,
   };
 };
-
-export const createConnectionStatus = (container: Explorer, key: string): ICommandBarItemProps => {
-  return {
-    key,
-    onRender: () => <ConnectionStatus container={container} />,
-  };
-};

src/Explorer/Menus/CommandBar/ConnectionStatusComponent.less

@@ -1,184 +0,0 @@
-@import "../../../../less/Common/Constants";
-
-.connectionStatusContainer {
-    cursor: default;
-    align-items: center;
-    border: 1px;
-    min-height: 44px;
-
-    > span {
-        padding-right: 12px;
-        font-size: 12px;
-        font-family: @DataExplorerFont;
-        color: @DefaultFontColor;
-    }
-    &:focus{
-        outline: 0px;
-    }
-}
-.commandReactBtn {
-    &:hover {
-        background-color: rgb(238, 247, 255);
-        color: rgb(32, 31, 30);
-        cursor: pointer;
-    }
-    &:focus{
-        outline: 1px dashed #605e5c;
-    }
-}
-.connectedReactBtn {
-    &:hover {
-        background-color: rgb(238, 247, 255);
-        color: rgb(32, 31, 30);
-        cursor: pointer;
-    }
-    &:focus{
-        outline: 0px;
-    }
-}
-.connectIcon{
-        margin: 0px 4px;
-        height: 18px;
-        width: 18px;
-        color: rgb(0, 120, 212);
-} 
-  .status {
-    position: relative;
-    display: block;
-    margin-right: 8px;
-    width: 1em;
-    height: 1em;
-    font-size: 9px!important;
-    padding: 0px!important;
-    border-radius: 0.5em;
-  }
-  
-  .status::before,
-  .status::after {
-    position: absolute;
-    content: "";
-  }
-  
-  .status::before {
-    top: 0;
-    left: 0;
-    width: 1em;
-    height: 1em;
-    background-color: rgba(#fff, 0.1);
-    border-radius: 100%;
-    opacity: 1;
-    transform: translate3d(0, 0, 0) scale(0);
-  }
-  
-  .connected{
-    background-color: green;
-    box-shadow:
-      0 0 0 0em rgba(green, 0),
-      0em 0.05em 0.1em rgba(#000000, 0.2);
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-  .connecting{
-    background-color:#ffbf00;
-    box-shadow:
-      0 0 0 0em rgba(#ffbf00, 0),
-      0em 0.05em 0.1em rgba(#000000, 0.2);
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-  .failed{
-    background-color:#bd1919;
-    box-shadow:
-      0 0 0 0em rgba(#bd1919, 0),
-      0em 0.05em 0.1em rgba(#000000, 0.2);
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-  
-  .status.connecting.is-animating {
-    animation: status-outer-connecting 3000ms infinite;
-  }
-  .status.failed.is-animating {
-    animation: status-outer-failed 3000ms infinite;
-  }
-  .status.connected.is-animating {
-    animation: status-outer-connected 3000ms infinite;
-  }
-  @keyframes status-outer-connected {
-    
-   0% {
-      transform: translate3d(0, 0, 0) scale(1);
-      box-shadow: 0 0 0 0em #008000, 0em 0.05em 0.1em rgba(0, 0, 0, 0.2);
-    }
-    20% {
-      transform: translate3d(0, 0, 0) scale(1);
-      box-shadow: 0 0 0 0em rgba(0, 128, 0, 0.6), 0em 0.05em 0.1em rgba(0, 0, 0, 0.5);
-    }
-    40% {
-      transform: translate3d(0, 0, 0) scale(1);
-      box-shadow: 0 0 0 0em rgba(0, 128, 0, 0.5), 0em 0.05em 0.1em rgba(0, 0, 0, 0.4);
-    }
-    60% {
-      transform: translate3d(0, 0, 0) scale(1);
-      box-shadow: 0 0 0 0em rgba(0, 128, 0, 0.3), 0em 0.05em 0.1em rgba(0, 0, 0, 0.3);
-    }
-    80% {
-      transform: translate3d(0, 0, 0) scale(1);
-      box-shadow: 0 0 0 0.5em rgba(0, 128, 0, 0.1), 0em 0.05em 0.1em rgba(0, 0, 0, 0.1);
-    }
-    85% {
-      transform: translate3d(0, 0, 0) scale(1);
-      box-shadow: 0 0 0 0em rgba(0, 128, 0, 0), 0em 0.05em 0.1em rgba(0, 0, 0, 0);
-    }
-  }
-  @keyframes status-outer-failed {
-    
-    0% {
-       transform: translate3d(0, 0, 0) scale(1);
-       box-shadow: 0 0 0 0em #bd1919, 0em 0.05em 0.1em rgba(0, 0, 0, 0.2);
-     }
-     20% {
-       transform: translate3d(0, 0, 0) scale(1);
-       box-shadow: 0 0 0 0em #c52d2d, 0em 0.05em 0.1em rgba(0, 0, 0, 0.5);
-     }
-     40% {
-       transform: translate3d(0, 0, 0) scale(1);
-       box-shadow: 0 0 0 0em #b47b7b, 0em 0.05em 0.1em rgba(0, 0, 0, 0.4);
-     }
-     60% {
-       transform: translate3d(0, 0, 0) scale(1);
-       box-shadow: 0 0 0 0em rgba(0, 128, 0, 0.3), 0em 0.05em 0.1em rgba(0, 0, 0, 0.3);
-     }
-     80% {
-       transform: translate3d(0, 0, 0) scale(1);
-       box-shadow: 0 0 0 0.5em rgba(0, 128, 0, 0.1), 0em 0.05em 0.1em rgba(0, 0, 0, 0.1);
-     }
-     85% {
-       transform: translate3d(0, 0, 0) scale(1);
-       box-shadow: 0 0 0 0em rgba(0, 128, 0, 0), 0em 0.05em 0.1em rgba(0, 0, 0, 0);
-     }
-   }
-   @keyframes status-outer-connecting {
-    
-    0% {
-       transform: translate3d(0, 0, 0) scale(1);
-       box-shadow: 0 0 0 0em #ffbf00, 0em 0.05em 0.1em rgba(0, 0, 0, 0.2);
-     }
-     20% {
-       transform: translate3d(0, 0, 0) scale(1);
-       box-shadow: 0 0 0 0em #f0dfad, 0em 0.05em 0.1em rgba(0, 0, 0, 0.5);
-     }
-     40% {
-       transform: translate3d(0, 0, 0) scale(1);
-       box-shadow: 0 0 0 0em rgba(198, 243, 198, 0.5), 0em 0.05em 0.1em rgba(0, 0, 0, 0.4);
-     }
-     60% {
-       transform: translate3d(0, 0, 0) scale(1);
-       box-shadow: 0 0 0 0em rgba(213, 241, 213, 0.3), 0em 0.05em 0.1em rgba(0, 0, 0, 0.3);
-     }
-     80% {
-       transform: translate3d(0, 0, 0) scale(1);
-       box-shadow: 0 0 0 0.5em rgba(0, 128, 0, 0.1), 0em 0.05em 0.1em rgba(0, 0, 0, 0.1);
-     }
-     85% {
-       transform: translate3d(0, 0, 0) scale(1);
-       box-shadow: 0 0 0 0em rgba(0, 128, 0, 0), 0em 0.05em 0.1em rgba(0, 0, 0, 0);
-     }
-   }

src/Explorer/Menus/CommandBar/ConnectionStatusComponent.tsx

@@ -1,186 +0,0 @@
-import {
-  FocusTrapCallout,
-  FocusZone,
-  FocusZoneTabbableElements,
-  FontWeights,
-  Icon,
-  mergeStyleSets,
-  ProgressIndicator,
-  Stack,
-  Text,
-  TooltipHost,
-} from "@fluentui/react";
-import { useId } from "@fluentui/react-hooks";
-import { ActionButton, DefaultButton } from "@fluentui/react/lib/Button";
-import * as React from "react";
-import "../../../../less/hostedexplorer.less";
-import { ConnectionStatusType, ContainerStatusType, Notebook } from "../../../Common/Constants";
-import Explorer from "../../Explorer";
-import { useNotebook } from "../../Notebook/useNotebook";
-import "../CommandBar/ConnectionStatusComponent.less";
-interface Props {
-  container: Explorer;
-}
-export const ConnectionStatus: React.FC<Props> = ({ container }: Props): JSX.Element => {
-  const connectionInfo = useNotebook((state) => state.connectionInfo);
-  const [second, setSecond] = React.useState("00");
-  const [minute, setMinute] = React.useState("00");
-  const [isActive, setIsActive] = React.useState(false);
-  const [counter, setCounter] = React.useState(0);
-  const [statusColor, setStatusColor] = React.useState("");
-  const [toolTipContent, setToolTipContent] = React.useState("Connect to temporary workspace.");
-  const [isBarDismissed, setIsBarDismissed] = React.useState<boolean>(false);
-  const buttonId = useId("callout-button");
-  const containerInfo = useNotebook((state) => state.containerStatus);
-
-  const styles = mergeStyleSets({
-    callout: {
-      width: 320,
-      padding: "20px 24px",
-    },
-    title: {
-      marginBottom: 12,
-      fontWeight: FontWeights.semilight,
-    },
-    buttons: {
-      display: "flex",
-      justifyContent: "flex-end",
-      marginTop: 20,
-    },
-  });
-
-  React.useEffect(() => {
-    let intervalId: NodeJS.Timeout;
-
-    if (isActive) {
-      intervalId = setInterval(() => {
-        const secondCounter = counter % 60;
-        const minuteCounter = Math.floor(counter / 60);
-        const computedSecond: string = String(secondCounter).length === 1 ? `0${secondCounter}` : `${secondCounter}`;
-        const computedMinute: string = String(minuteCounter).length === 1 ? `0${minuteCounter}` : `${minuteCounter}`;
-
-        setSecond(computedSecond);
-        setMinute(computedMinute);
-
-        setCounter((counter) => counter + 1);
-      }, 1000);
-    }
-    return () => clearInterval(intervalId);
-  }, [isActive, counter]);
-
-  React.useEffect(() => {
-    if (connectionInfo?.status === ConnectionStatusType.Reconnect) {
-      setToolTipContent("Click here to Reconnect to temporary workspace.");
-    } else if (connectionInfo?.status === ConnectionStatusType.Failed) {
-      setStatusColor("status failed is-animating");
-      setToolTipContent("Click here to Reconnect to temporary workspace.");
-    }
-  }, [connectionInfo.status]);
-
-  const stopTimer = () => {
-    setIsActive(false);
-    setCounter(0);
-    setSecond("00");
-    setMinute("00");
-  };
-
-  const memoryUsageInfo = useNotebook((state) => state.memoryUsageInfo);
-  const totalGB = memoryUsageInfo ? memoryUsageInfo.totalKB / Notebook.memoryGuageToGB : 0;
-  const usedGB = totalGB > 0 ? totalGB - memoryUsageInfo.freeKB / Notebook.memoryGuageToGB : 0;
-
-  if (
-    connectionInfo &&
-    (connectionInfo.status === ConnectionStatusType.Connect || connectionInfo.status === ConnectionStatusType.Reconnect)
-  ) {
-    return (
-      <ActionButton className="commandReactBtn" onClick={() => container.allocateContainer()}>
-        <TooltipHost content={toolTipContent}>
-          <Stack className="connectionStatusContainer" horizontal>
-            <Icon iconName="ConnectVirtualMachine" className="connectIcon" />
-            <span>{connectionInfo.status}</span>
-          </Stack>
-        </TooltipHost>
-      </ActionButton>
-    );
-  }
-
-  if (connectionInfo && connectionInfo.status === ConnectionStatusType.Connecting && isActive === false) {
-    stopTimer();
-    setIsActive(true);
-    setStatusColor("status connecting is-animating");
-    setToolTipContent("Connecting to temporary workspace.");
-  } else if (connectionInfo && connectionInfo.status === ConnectionStatusType.Connected && isActive === true) {
-    stopTimer();
-    setStatusColor("status connected is-animating");
-    setToolTipContent("Connected to temporary workspace.");
-  } else if (connectionInfo && connectionInfo.status === ConnectionStatusType.Failed && isActive === true) {
-    stopTimer();
-    setStatusColor("status failed is-animating");
-    setToolTipContent("Click here to Reconnect to temporary workspace.");
-  }
-  return (
-    <>
-      <TooltipHost
-        content={
-          containerInfo?.status === ContainerStatusType.Active
-            ? `Connected to temporary workspace. This temporary workspace will get disconnected in ${Math.round(
-                containerInfo.durationLeftInMinutes
-              )} minutes.`
-            : toolTipContent
-        }
-      >
-        <ActionButton
-          id={buttonId}
-          className={connectionInfo.status === ConnectionStatusType.Failed ? "commandReactBtn" : "connectedReactBtn"}
-          onClick={(e: React.MouseEvent<HTMLSpanElement>) =>
-            connectionInfo.status === ConnectionStatusType.Failed ? container.allocateContainer() : e.preventDefault()
-          }
-        >
-          <Stack className="connectionStatusContainer" horizontal>
-            <i className={statusColor}></i>
-            <span className={connectionInfo.status === ConnectionStatusType.Failed ? "connectionStatusFailed" : ""}>
-              {connectionInfo.status}
-            </span>
-            {connectionInfo.status === ConnectionStatusType.Connecting && isActive && (
-              <ProgressIndicator description={minute + ":" + second} />
-            )}
-            {connectionInfo.status === ConnectionStatusType.Connected && !isActive && (
-              <ProgressIndicator
-                className={totalGB !== 0 && usedGB / totalGB > 0.8 ? "lowMemory" : ""}
-                description={usedGB.toFixed(1) + " of " + totalGB.toFixed(1) + " GB"}
-                percentComplete={totalGB !== 0 ? usedGB / totalGB : 0}
-              />
-            )}
-          </Stack>
-          {!isBarDismissed &&
-          containerInfo.status &&
-          containerInfo.status === ContainerStatusType.Active &&
-          Math.round(containerInfo.durationLeftInMinutes) <= Notebook.remainingTimeForAlert ? (
-            <FocusTrapCallout
-              role="alertdialog"
-              className={styles.callout}
-              gapSpace={0}
-              target={`#${buttonId}`}
-              onDismiss={() => setIsBarDismissed(true)}
-              setInitialFocus
-            >
-              <Text block variant="xLarge" className={styles.title}>
-                Remaining Time
-              </Text>
-              <Text block variant="small">
-                This temporary workspace will get disconnected in {Math.round(containerInfo.durationLeftInMinutes)}{" "}
-                minutes. To save your work permanently, save your notebooks to a GitHub repository or download the
-                notebooks to your local machine before the session ends.
-              </Text>
-              <FocusZone handleTabKey={FocusZoneTabbableElements.all} isCircularNavigation>
-                <Stack className={styles.buttons} gap={8} horizontal>
-                  <DefaultButton onClick={() => setIsBarDismissed(true)}>Dimiss</DefaultButton>
-                </Stack>
-              </FocusZone>
-            </FocusTrapCallout>
-          ) : undefined}
-        </ActionButton>
-      </TooltipHost>
-    </>
-  );
-};

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -129,7 +129,7 @@ export class NotificationConsoleComponent extends React.Component<
             className="expandCollapseButton"
             role="button"
             tabIndex={0}
-            aria-label={"console button" + (this.props.isConsoleExpanded ? " expanded" : " collapsed")}
+            aria-label={"console button" + (this.props.isConsoleExpanded ? " collapsed" : " expanded")}
             aria-expanded={!this.props.isConsoleExpanded}
           >
             <img
@@ -205,9 +205,7 @@ export class NotificationConsoleComponent extends React.Component<
         {item.type === ConsoleDataType.Error && <img className="errorIcon" src={ErrorRedIcon} alt="error" />}
         {item.type === ConsoleDataType.InProgress && <img className="loaderIcon" src={LoaderIcon} alt="in progress" />}
         <span className="date">{item.date}</span>
-        <span className="message" role="alert" aria-live="assertive">
-          {item.message}
-        </span>
+        <span className="message">{item.message}</span>
       </div>
     ));
   }

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -70,7 +70,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
     </div>
     <div
       aria-expanded={true}
-      aria-label="console button collapsed"
+      aria-label="console button expanded"
       className="expandCollapseButton"
       role="button"
       tabIndex={0}
@@ -236,7 +236,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
     </div>
     <div
       aria-expanded={true}
-      aria-label="console button collapsed"
+      aria-label="console button expanded"
       className="expandCollapseButton"
       role="button"
       tabIndex={0}
@@ -340,9 +340,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
             date
           </span>
           <span
-            aria-live="assertive"
             className="message"
-            role="alert"
           >
             message
           </span>

src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { CellId, CellType, ImmutableNotebook } from "@nteract/commutable";
 // Vendor modules
 import {
@@ -31,19 +30,6 @@ export interface NotebookComponentBootstrapperOptions {
   contentRef: ContentRef;
 }
 
-interface IWrapModel {
-  name: string;
-  path: string;
-  last_modified: Date;
-  created: string;
-  content: unknown;
-  format: string;
-  mimetype: unknown;
-  size: number;
-  writeable: boolean;
-  type: string;
-}
-
 export class NotebookComponentBootstrapper {
   public contentRef: ContentRef;
   protected renderExtraComponent: () => JSX.Element;
@@ -55,7 +41,7 @@ export class NotebookComponentBootstrapper {
     this.contentRef = options.contentRef;
   }
 
-  protected static wrapModelIntoContent(name: string, path: string, content: unknown): IWrapModel {
+  protected static wrapModelIntoContent(name: string, path: string, content: any) {
     return {
       name,
       path,
@@ -63,7 +49,7 @@ export class NotebookComponentBootstrapper {
       created: "",
       content,
       format: "json",
-      mimetype: undefined,
+      mimetype: null as any,
       size: 0,
       writeable: false,
       type: "notebook",
@@ -99,7 +85,7 @@ export class NotebookComponentBootstrapper {
     };
   }
 
-  public setContent(name: string, content: unknown): void {
+  public setContent(name: string, content: any): void {
     this.getStore().dispatch(
       actions.fetchContentFulfilled({
         filepath: undefined,
@@ -284,6 +270,7 @@ export class NotebookComponentBootstrapper {
   public isContentDirty(): boolean {
     const content = selectors.content(this.getStore().getState(), { contentRef: this.contentRef });
     if (!content) {
+      console.log("No error");
       return false;
     }
 

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -109,7 +109,7 @@ const formWebSocketURL = (serverConfig: NotebookServiceConfig, kernelId: string,
   const q = params.toString();
   const suffix = q !== "" ? `?${q}` : "";
 
-  const url = (serverConfig.endpoint.slice(0, -1) || "") + `api/kernels/${kernelId}/channels${suffix}`;
+  const url = (serverConfig.endpoint || "") + `api/kernels/${kernelId}/channels${suffix}`;
 
   return url.replace(/^http(s)?/, "ws$1");
 };

src/Explorer/Notebook/NotebookContainerClient.ts

@@ -1,39 +1,20 @@
 /**
  * Notebook container related stuff
  */
-import promiseRetry, { AbortError } from "p-retry";
-import { PhoenixClient } from "Phoenix/PhoenixClient";
 import * as Constants from "../../Common/Constants";
-import { ConnectionStatusType, HttpHeaders, HttpStatusCodes, Notebook } from "../../Common/Constants";
 import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 import * as Logger from "../../Common/Logger";
 import * as DataModels from "../../Contracts/DataModels";
-import {
-  ContainerConnectionInfo,
-  IPhoenixConnectionInfoResult,
-  IProvisionData,
-  IResponse,
-} from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
 import { createOrUpdate, destroy } from "../../Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces";
-import { getAuthorizationHeader } from "../../Utils/AuthorizationUtils";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { NotebookUtil } from "./NotebookUtil";
 import { useNotebook } from "./useNotebook";
 
 export class NotebookContainerClient {
   private clearReconnectionAttemptMessage? = () => {};
   private isResettingWorkspace: boolean;
-  private phoenixClient: PhoenixClient;
-  private retryOptions: promiseRetry.Options;
 
   constructor(private onConnectionLost: () => void) {
-    this.phoenixClient = new PhoenixClient();
-    this.retryOptions = {
-      retries: Notebook.retryAttempts,
-      maxTimeout: Notebook.retryAttemptDelayMs,
-      minTimeout: Notebook.retryAttemptDelayMs,
-    };
     const notebookServerInfo = useNotebook.getState().notebookServerInfo;
     if (notebookServerInfo?.notebookServerEndpoint) {
       this.scheduleHeartbeat(Constants.Notebook.heartbeatDelayMs);
@@ -54,27 +35,14 @@ export class NotebookContainerClient {
    * Heartbeat: each ping schedules another ping
    */
   private scheduleHeartbeat(delayMs: number): void {
-    setTimeout(async () => {
-      try {
-        const memoryUsageInfo = await this.getMemoryUsage();
-        useNotebook.getState().setMemoryUsageInfo(memoryUsageInfo);
-        const notebookServerInfo = useNotebook.getState().notebookServerInfo;
-        if (notebookServerInfo?.notebookServerEndpoint) {
-          this.scheduleHeartbeat(Constants.Notebook.heartbeatDelayMs);
-        }
-      } catch (exception) {
-        if (NotebookUtil.isPhoenixEnabled()) {
-          const connectionStatus: ContainerConnectionInfo = {
-            status: ConnectionStatusType.Failed,
-          };
-          useNotebook.getState().resetContainerConnection(connectionStatus);
-          useNotebook.getState().setIsRefreshed(!useNotebook.getState().isRefreshed);
-        }
-      }
+    setTimeout(() => {
+      this.getMemoryUsage()
+        .then((memoryUsageInfo) => useNotebook.getState().setMemoryUsageInfo(memoryUsageInfo))
+        .finally(() => this.scheduleHeartbeat(Constants.Notebook.heartbeatDelayMs));
     }, delayMs);
   }
 
-  public async getMemoryUsage(): Promise<DataModels.MemoryUsageInfo> {
+  private async getMemoryUsage(): Promise<DataModels.MemoryUsageInfo> {
     const notebookServerInfo = useNotebook.getState().notebookServerInfo;
     if (!notebookServerInfo || !notebookServerInfo.notebookServerEndpoint) {
       const error = "No server endpoint detected";
@@ -88,28 +56,7 @@ export class NotebookContainerClient {
 
     const { notebookServerEndpoint, authToken } = this.getNotebookServerConfig();
     try {
-      const runMemoryAsync = async () => {
-        return await this._getMemoryAsync(notebookServerEndpoint, authToken);
-      };
-      return await promiseRetry(runMemoryAsync, this.retryOptions);
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "NotebookContainerClient/getMemoryUsage");
-      if (!this.clearReconnectionAttemptMessage) {
-        this.clearReconnectionAttemptMessage = logConsoleProgress(
-          "Connection lost with Notebook server. Attempting to reconnect..."
-        );
-      }
-      this.onConnectionLost();
-      return undefined;
-    }
-  }
-
-  private async _getMemoryAsync(
-    notebookServerEndpoint: string,
-    authToken: string
-  ): Promise<DataModels.MemoryUsageInfo> {
-    if (this.checkStatus()) {
-      const response = await fetch(`${notebookServerEndpoint}api/metrics/memory`, {
+      const response = await fetch(`${notebookServerEndpoint}/api/metrics/memory`, {
         method: "GET",
         headers: {
           Authorization: authToken,
@@ -128,43 +75,31 @@ export class NotebookContainerClient {
             freeKB: memoryUsageInfo.free,
           };
         }
-      } else if (response.status === HttpStatusCodes.NotFound) {
-        throw new AbortError(response.statusText);
       }
-      throw new Error();
-    } else {
+      return undefined;
+    } catch (error) {
+      Logger.logError(getErrorMessage(error), "NotebookContainerClient/getMemoryUsage");
+      if (!this.clearReconnectionAttemptMessage) {
+        this.clearReconnectionAttemptMessage = logConsoleProgress(
+          "Connection lost with Notebook server. Attempting to reconnect..."
+        );
+      }
+      this.onConnectionLost();
       return undefined;
     }
   }
 
-  private checkStatus(): boolean {
-    if (NotebookUtil.isPhoenixEnabled()) {
-      if (useNotebook.getState().containerStatus?.status === Constants.ContainerStatusType.Disconnected) {
-        const connectionStatus: ContainerConnectionInfo = {
-          status: ConnectionStatusType.Reconnect,
-        };
-        useNotebook.getState().resetContainerConnection(connectionStatus);
-        useNotebook.getState().setIsRefreshed(!useNotebook.getState().isRefreshed);
-        return false;
-      }
-    }
-    return true;
-  }
-
-  public async resetWorkspace(): Promise<IResponse<IPhoenixConnectionInfoResult>> {
+  public async resetWorkspace(): Promise<void> {
     this.isResettingWorkspace = true;
-    let response: IResponse<IPhoenixConnectionInfoResult>;
     try {
-      response = await this._resetWorkspace();
+      await this._resetWorkspace();
     } catch (error) {
       Promise.reject(error);
-      return response;
     }
     this.isResettingWorkspace = false;
-    return response;
   }
 
-  private async _resetWorkspace(): Promise<IResponse<IPhoenixConnectionInfoResult>> {
+  private async _resetWorkspace(): Promise<void> {
     const notebookServerInfo = useNotebook.getState().notebookServerInfo;
     if (!notebookServerInfo || !notebookServerInfo.notebookServerEndpoint) {
       const error = "No server endpoint detected";
@@ -172,23 +107,15 @@ export class NotebookContainerClient {
       return Promise.reject(error);
     }
 
+    const { notebookServerEndpoint, authToken } = this.getNotebookServerConfig();
     try {
-      if (NotebookUtil.isPhoenixEnabled()) {
-        const provisionData: IProvisionData = {
-          subscriptionId: userContext.subscriptionId,
-          resourceGroup: userContext.resourceGroup,
-          dbAccountName: userContext.databaseAccount.name,
-          cosmosEndpoint: userContext.databaseAccount.properties.documentEndpoint,
-        };
-        return await this.phoenixClient.resetContainer(provisionData);
-      }
-      return null;
+      await fetch(`${notebookServerEndpoint}/api/shutdown`, {
+        method: "POST",
+        headers: { Authorization: authToken },
+      });
     } catch (error) {
       Logger.logError(getErrorMessage(error), "NotebookContainerClient/resetWorkspace");
-      if (!NotebookUtil.isPhoenixEnabled()) {
-        await this.recreateNotebookWorkspaceAsync();
-      }
-      throw error;
+      await this.recreateNotebookWorkspaceAsync();
     }
   }
 
@@ -220,12 +147,4 @@ export class NotebookContainerClient {
       return Promise.reject(error);
     }
   }
-
-  private getHeaders(): HeadersInit {
-    const authorizationHeader = getAuthorizationHeader();
-    return {
-      [authorizationHeader.header]: authorizationHeader.token,
-      [HttpHeaders.contentType]: "application/json",
-    };
-  }
 }

src/Explorer/Notebook/NotebookContentClient.ts

@@ -36,10 +36,7 @@ export class NotebookContentClient {
    *
    * @param parent parent folder
    */
-  public async createNewNotebookFile(
-    parent: NotebookContentItem,
-    isGithubTree?: boolean
-  ): Promise<NotebookContentItem> {
+  public createNewNotebookFile(parent: NotebookContentItem, isGithubTree?: boolean): Promise<NotebookContentItem> {
     if (!parent || parent.type !== NotebookContentItemType.Directory) {
       throw new Error(`Parent must be a directory: ${parent}`);
     }
@@ -102,6 +99,7 @@ export class NotebookContentClient {
     if (!parent || parent.type !== NotebookContentItemType.Directory) {
       throw new Error(`Parent must be a directory: ${parent}`);
     }
+
     const filepath = NotebookUtil.getFilePath(parent.path, name);
     if (await this.checkIfFilepathExists(filepath)) {
       throw new Error(`File already exists: ${filepath}`);

src/Explorer/Notebook/NotebookManager.tsx

@@ -212,7 +212,6 @@ export default class NotebookManager {
         "Cancel",
         () => reject(new Error("Commit dialog canceled")),
         undefined,
-        undefined,
         {
           label: "Commit message",
           autoAdjustHeight: true,

src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx

@@ -16,10 +16,9 @@ import "./NotebookReadOnlyRenderer.less";
 import SandboxOutputs from "./outputs/SandboxOutputs";
 
 export interface NotebookRendererProps {
-  contentRef: ContentRef;
+  contentRef: any;
   hideInputs?: boolean;
   hidePrompts?: boolean;
-  addTransform: (component: React.ComponentType & { MIMETYPE: string }) => void;
 }
 
 /**
@@ -28,7 +27,7 @@ export interface NotebookRendererProps {
 class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
   componentDidMount() {
     if (!userContext.features.sandboxNotebookOutputs) {
-      loadTransform(this.props as NotebookRendererProps);
+      loadTransform(this.props as any);
     }
   }
 
@@ -60,7 +59,7 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
       <div className="NotebookReadOnlyRender">
         <Cells contentRef={this.props.contentRef}>
           {{
-            code: ({ id, contentRef }: { id: string; contentRef: ContentRef }) => (
+            code: ({ id, contentRef }: { id: any; contentRef: ContentRef }) => (
               <CodeCell id={id} contentRef={contentRef}>
                 {{
                   prompt: (props: { id: string; contentRef: string }) => this.renderPrompt(props.id, props.contentRef),
@@ -74,14 +73,14 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
                 }}
               </CodeCell>
             ),
-            markdown: ({ id, contentRef }: { id: string; contentRef: ContentRef }) => (
+            markdown: ({ id, contentRef }: { id: any; contentRef: ContentRef }) => (
               <MarkdownCell id={id} contentRef={contentRef} cell_type="markdown">
                 {{
                   editor: {},
                 }}
               </MarkdownCell>
             ),
-            raw: ({ id, contentRef }: { id: string; contentRef: ContentRef }) => (
+            raw: ({ id, contentRef }: { id: any; contentRef: ContentRef }) => (
               <RawCell id={id} contentRef={contentRef} cell_type="raw">
                 {{
                   editor: {
@@ -99,7 +98,6 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const makeMapDispatchToProps = (initialDispatch: Dispatch, initialProps: NotebookRendererProps) => {
   const mapDispatchToProps = (dispatch: Dispatch) => {
     return {
@@ -116,4 +114,4 @@ const makeMapDispatchToProps = (initialDispatch: Dispatch, initialProps: Noteboo
   return mapDispatchToProps;
 };
 
-export default connect(undefined, makeMapDispatchToProps)(NotebookReadOnlyRenderer);
+export default connect(null, makeMapDispatchToProps)(NotebookReadOnlyRenderer);

src/Explorer/Notebook/NotebookUtil.ts

@@ -3,7 +3,6 @@ import { AppState, selectors } from "@nteract/core";
 import domtoimage from "dom-to-image";
 import Html2Canvas from "html2canvas";
 import path from "path";
-import { userContext } from "../../UserContext";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
 import * as StringUtils from "../../Utils/StringUtils";
 import { SnapshotFragment } from "./NotebookComponent/types";
@@ -329,16 +328,4 @@ export class NotebookUtil {
     link.click();
     document.body.removeChild(link);
   }
-
-  public static getNotebookBtnTitle(fileName: string): string {
-    if (this.isPhoenixEnabled()) {
-      return `Download to ${fileName}`;
-    } else {
-      return `Download to my notebooks`;
-    }
-  }
-
-  public static isPhoenixEnabled(): boolean {
-    return userContext.features.notebooksTemporarilyDown === false && userContext.features.phoenix === true;
-  }
 }

src/Explorer/Notebook/SecurityWarningBar/SecurityWarningBar.tsx

@@ -66,7 +66,7 @@ interface InitialProps {
 }
 
 // Redux
-const makeMapStateToProps = (state: AppState, initialProps: InitialProps) => {
+const makeMapStateToProps = (_state: AppState, initialProps: InitialProps) => {
   const mapStateToProps = (state: AppState): StateProps => ({
     isNotebookUntrusted: NotebookUtil.isNotebookUntrusted(state, initialProps.contentRef),
   });

src/Explorer/Notebook/notebookClientV2.test.ts

@@ -35,7 +35,6 @@ describe("auto start kernel", () => {
         connectionInfo: {
           authToken: "autToken",
           notebookServerEndpoint: "notebookServerEndpoint",
-          forwardingId: "Id",
         },
         databaseAccountName: undefined,
         defaultExperience: undefined,

src/Explorer/Notebook/useNotebook.ts

@@ -2,13 +2,10 @@ import { cloneDeep } from "lodash";
 import create, { UseStore } from "zustand";
 import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
-import { ConnectionStatusType } from "../../Common/Constants";
 import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 import * as Logger from "../../Common/Logger";
 import { configContext } from "../../ConfigContext";
 import * as DataModels from "../../Contracts/DataModels";
-import { ContainerConnectionInfo, ContainerInfo } from "../../Contracts/DataModels";
-import { useTabs } from "../../hooks/useTabs";
 import { IPinnedRepo } from "../../Juno/JunoClient";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
@@ -17,7 +14,6 @@ import { getAuthorizationHeader } from "../../Utils/AuthorizationUtils";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
 import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentItem";
 import NotebookManager from "./NotebookManager";
-import { NotebookUtil } from "./NotebookUtil";
 
 interface NotebookState {
   isNotebookEnabled: boolean;
@@ -32,11 +28,6 @@ interface NotebookState {
   myNotebooksContentRoot: NotebookContentItem;
   gitHubNotebooksContentRoot: NotebookContentItem;
   galleryContentRoot: NotebookContentItem;
-  connectionInfo: ContainerConnectionInfo;
-  notebookFolderName: string;
-  isAllocating: boolean;
-  isRefreshed: boolean;
-  containerStatus: ContainerInfo;
   setIsNotebookEnabled: (isNotebookEnabled: boolean) => void;
   setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => void;
   setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) => void;
@@ -45,7 +36,6 @@ interface NotebookState {
   setMemoryUsageInfo: (memoryUsageInfo: DataModels.MemoryUsageInfo) => void;
   setIsShellEnabled: (isShellEnabled: boolean) => void;
   setNotebookBasePath: (notebookBasePath: string) => void;
-  setNotebookFolderName: (notebookFolderName: string) => void;
   refreshNotebooksEnabledStateForAccount: () => Promise<void>;
   findItem: (root: NotebookContentItem, item: NotebookContentItem) => NotebookContentItem;
   insertNotebookItem: (parent: NotebookContentItem, item: NotebookContentItem, isGithubTree?: boolean) => void;
@@ -53,11 +43,6 @@ interface NotebookState {
   deleteNotebookItem: (item: NotebookContentItem, isGithubTree?: boolean) => void;
   initializeNotebooksTree: (notebookManager: NotebookManager) => Promise<void>;
   initializeGitHubRepos: (pinnedRepos: IPinnedRepo[]) => void;
-  setConnectionInfo: (connectionInfo: ContainerConnectionInfo) => void;
-  setIsAllocating: (isAllocating: boolean) => void;
-  resetContainerConnection: (connectionStatus: ContainerConnectionInfo) => void;
-  setIsRefreshed: (isAllocating: boolean) => void;
-  setContainerStatus: (containerStatus: ContainerInfo) => void;
 }
 
 export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
@@ -66,7 +51,6 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
   notebookServerInfo: {
     notebookServerEndpoint: undefined,
     authToken: undefined,
-    forwardingId: undefined,
   },
   sparkClusterConnectionInfo: {
     userName: undefined,
@@ -81,17 +65,6 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
   myNotebooksContentRoot: undefined,
   gitHubNotebooksContentRoot: undefined,
   galleryContentRoot: undefined,
-  connectionInfo: {
-    status: ConnectionStatusType.Connect,
-  },
-  notebookFolderName: undefined,
-  isAllocating: false,
-  isRefreshed: false,
-  containerStatus: {
-    status: undefined,
-    durationLeftInMinutes: undefined,
-    notebookServerInfo: undefined,
-  },
   setIsNotebookEnabled: (isNotebookEnabled: boolean) => set({ isNotebookEnabled }),
   setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => set({ isNotebooksEnabledForAccount }),
   setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) =>
@@ -102,7 +75,6 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
   setMemoryUsageInfo: (memoryUsageInfo: DataModels.MemoryUsageInfo) => set({ memoryUsageInfo }),
   setIsShellEnabled: (isShellEnabled: boolean) => set({ isShellEnabled }),
   setNotebookBasePath: (notebookBasePath: string) => set({ notebookBasePath }),
-  setNotebookFolderName: (notebookFolderName: string) => set({ notebookFolderName }),
   refreshNotebooksEnabledStateForAccount: async (): Promise<void> => {
     const { databaseAccount, authType } = userContext;
     if (
@@ -196,10 +168,8 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
     isGithubTree ? set({ gitHubNotebooksContentRoot: root }) : set({ myNotebooksContentRoot: root });
   },
   initializeNotebooksTree: async (notebookManager: NotebookManager): Promise<void> => {
-    const notebookFolderName = NotebookUtil.isPhoenixEnabled() === true ? "Temporary Notebooks" : "My Notebooks";
-    set({ notebookFolderName });
     const myNotebooksContentRoot = {
-      name: get().notebookFolderName,
+      name: "My Notebooks",
       path: get().notebookBasePath,
       type: NotebookContentItemType.Directory,
     };
@@ -215,7 +185,6 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
           type: NotebookContentItemType.Directory,
         }
       : undefined;
-
     set({
       myNotebooksContentRoot,
       galleryContentRoot,
@@ -277,19 +246,4 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
       set({ gitHubNotebooksContentRoot });
     }
   },
-  setConnectionInfo: (connectionInfo: ContainerConnectionInfo) => set({ connectionInfo }),
-  setIsAllocating: (isAllocating: boolean) => set({ isAllocating }),
-  resetContainerConnection: (connectionStatus: ContainerConnectionInfo): void => {
-    useTabs.getState().closeAllNotebookTabs(true);
-    useNotebook.getState().setConnectionInfo(connectionStatus);
-    useNotebook.getState().setNotebookServerInfo(undefined);
-    useNotebook.getState().setIsAllocating(false);
-    useNotebook.getState().setContainerStatus({
-      status: undefined,
-      durationLeftInMinutes: undefined,
-      notebookServerInfo: undefined,
-    });
-  },
-  setIsRefreshed: (isRefreshed: boolean) => set({ isRefreshed }),
-  setContainerStatus: (containerStatus: ContainerInfo) => set({ containerStatus }),
 }));

src/Explorer/OpenFullScreen.tsx

@@ -4,8 +4,6 @@ import * as React from "react";
 import { useFullScreenURLs } from "../hooks/useFullScreenURLs";
 
 export const OpenFullScreen: React.FunctionComponent = () => {
-  const [isReadUrlCopy, setIsReadUrlCopy] = React.useState<boolean>(false);
-  const [isReadWriteUrlCopy, setIsReadWriteUrlCopy] = React.useState<boolean>(false);
   const result = useFullScreenURLs();
   if (!result) {
     return <Spinner label="Generating URLs..." ariaLive="assertive" labelPosition="right" />;
@@ -27,9 +25,8 @@ export const OpenFullScreen: React.FunctionComponent = () => {
           <DefaultButton
             onClick={() => {
               copyToClipboard(readWriteUrl);
-              setIsReadWriteUrlCopy(true);
             }}
-            text={isReadWriteUrlCopy ? "Copied" : "Copy"}
+            text="Copy"
             iconProps={{ iconName: "Copy" }}
           />
           <PrimaryButton
@@ -44,10 +41,9 @@ export const OpenFullScreen: React.FunctionComponent = () => {
         <Stack horizontal tokens={{ childrenGap: 10 }}>
           <DefaultButton
             onClick={() => {
-              setIsReadUrlCopy(true);
               copyToClipboard(readUrl);
             }}
-            text={isReadUrlCopy ? "Copied" : "Copy"}
+            text="Copy"
             iconProps={{ iconName: "Copy" }}
           />
           <PrimaryButton

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -11,23 +11,23 @@ import {
   Separator,
   Stack,
   Text,
-  TooltipHost
+  TooltipHost,
 } from "@fluentui/react";
-import * as Constants from "Common/Constants";
-import { createCollection } from "Common/dataAccess/createCollection";
-import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
-import { configContext, Platform } from "ConfigContext";
-import * as DataModels from "Contracts/DataModels";
-import { SubscriptionType } from "Contracts/SubscriptionType";
-import { useSidePanel } from "hooks/useSidePanel";
 import React from "react";
-import { CollectionCreation } from "Shared/Constants";
-import { Action } from "Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "UserContext";
-import { getCollectionName } from "Utils/APITypeUtils";
-import { isCapabilityEnabled, isServerlessAccount } from "Utils/CapabilityUtils";
-import { getUpsellMessage } from "Utils/PricingUtils";
+import * as Constants from "../../Common/Constants";
+import { createCollection } from "../../Common/dataAccess/createCollection";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { configContext, Platform } from "../../ConfigContext";
+import * as DataModels from "../../Contracts/DataModels";
+import { SubscriptionType } from "../../Contracts/SubscriptionType";
+import { useSidePanel } from "../../hooks/useSidePanel";
+import { CollectionCreation } from "../../Shared/Constants";
+import { Action } from "../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../UserContext";
+import { getCollectionName } from "../../Utils/APITypeUtils";
+import { isCapabilityEnabled, isServerlessAccount } from "../../Utils/CapabilityUtils";
+import { getUpsellMessage } from "../../Utils/PricingUtils";
 import { CollapsibleSectionComponent } from "../Controls/CollapsiblePanel/CollapsibleSectionComponent";
 import { ThroughputInput } from "../Controls/ThroughputInput/ThroughputInput";
 import Explorer from "../Explorer";
@@ -92,7 +92,6 @@ export interface AddCollectionPanelState {
   errorMessage: string;
   showErrorDetails: boolean;
   isExecuting: boolean;
-  isThroughputCapExceeded: boolean;
 }
 
 export class AddCollectionPanel extends React.Component<AddCollectionPanelProps, AddCollectionPanelState> {
@@ -123,7 +122,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       errorMessage: "",
       showErrorDetails: false,
       isExecuting: false,
-      isThroughputCapExceeded: false,
     };
   }
 
@@ -163,7 +161,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   true
                 ).toLocaleLowerCase()}.`}
               >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon iconName="Info" className="panelInfoIcon" />
               </TooltipHost>
             </Stack>
 
@@ -212,7 +210,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   className="panelTextField"
                   aria-label="New database id"
                   autoFocus
-                  tabIndex={0}
                   value={this.state.newDatabaseId}
                   onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                     this.setState({ newDatabaseId: event.target.value })
@@ -239,7 +236,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                         true
                       ).toLocaleLowerCase()} within the database.`}
                     >
-                      <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                      <Icon iconName="Info" className="panelInfoIcon" />
                     </TooltipHost>
                   </Stack>
                 )}
@@ -251,9 +248,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     isSharded={this.state.isSharded}
                     setThroughputValue={(throughput: number) => (this.newDatabaseThroughput = throughput)}
                     setIsAutoscale={(isAutoscale: boolean) => (this.isNewDatabaseAutoscale = isAutoscale)}
-                    setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) =>
-                      this.setState({ isThroughputCapExceeded })
-                    }
                     onCostAcknowledgeChange={(isAcknowledge: boolean) => (this.isCostAcknowledged = isAcknowledge)}
                   />
                 )}
@@ -285,7 +279,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 directionalHint={DirectionalHint.bottomLeftEdge}
                 content={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
               >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon iconName="Info" className="panelInfoIcon" />
               </TooltipHost>
             </Stack>
 
@@ -368,7 +362,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                       "Sharded collections split your data across many replica sets (shards) to achieve unlimited scalability. Sharded collections require choosing a shard key (field) to evenly distribute your data."
                     }
                   >
-                    <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                    <Icon iconName="Info" className="panelInfoIcon" />
                   </TooltipHost>
                 </Stack>
 
@@ -415,7 +409,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   directionalHint={DirectionalHint.bottomLeftEdge}
                   content={this.getPartitionKeyTooltipText()}
                 >
-                  <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                  <Icon iconName="Info" className="panelInfoIcon" />
                 </TooltipHost>
               </Stack>
 
@@ -468,12 +462,12 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 directionalHint={DirectionalHint.bottomLeftEdge}
                 content={`You can optionally provision dedicated throughput for a ${getCollectionName().toLocaleLowerCase()} within a database that has throughput
                   provisioned. This dedicated throughput amount will not be shared with other ${getCollectionName(
-                  true
-                ).toLocaleLowerCase()} in the database and
+                    true
+                  ).toLocaleLowerCase()} in the database and
                   does not count towards the throughput you provisioned for the database. This throughput amount will be
                   billed in addition to the throughput amount you provisioned at the database level.`}
               >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon iconName="Info" className="panelInfoIcon" />
               </TooltipHost>
             </Stack>
           )}
@@ -485,9 +479,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               isSharded={this.state.isSharded}
               setThroughputValue={(throughput: number) => (this.collectionThroughput = throughput)}
               setIsAutoscale={(isAutoscale: boolean) => (this.isCollectionAutoscale = isAutoscale)}
-              setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) =>
-                this.setState({ isThroughputCapExceeded })
-              }
               onCostAcknowledgeChange={(isAcknowledged: boolean) => {
                 this.isCostAcknowledged = isAcknowledged;
               }}
@@ -506,7 +497,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                       creating a unique key policy when a container is created, you ensure the uniqueness of one or more values
                       per partition key."
                 >
-                  <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                  <Icon iconName="Info" className="panelInfoIcon" />
                 </TooltipHost>
               </Stack>
 
@@ -569,7 +560,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   directionalHint={DirectionalHint.bottomLeftEdge}
                   content={this.getAnalyticalStorageTooltipContent()}
                 >
-                  <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                  <Icon iconName="Info" className="panelInfoIcon" />
                 </TooltipHost>
               </Stack>
 
@@ -646,7 +637,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                         directionalHint={DirectionalHint.bottomLeftEdge}
                         content="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
                       >
-                        <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                        <Icon iconName="Info" className="panelInfoIcon" />
                       </TooltipHost>
                     </Stack>
 
@@ -667,7 +658,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
                 {userContext.apiType === "SQL" && (
                   <Checkbox
-                    label="My partition key is larger than 101 bytes"
+                    label="My partition key is larger than 100 bytes"
                     checked={this.state.useHashV2}
                     styles={{
                       text: { fontSize: 12 },
@@ -684,7 +675,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
           )}
         </div>
 
-        <PanelFooterComponent buttonLabel="OK" isButtonDisabled={this.state.isThroughputCapExceeded} />
+        <PanelFooterComponent buttonLabel="OK" />
 
         {this.state.isExecuting && <PanelLoadingScreen />}
       </form>
@@ -1007,7 +998,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
     const collectionId: string = this.state.collectionId.trim();
     let databaseId = this.state.createNewDatabase ? this.state.newDatabaseId.trim() : this.state.selectedDatabaseId;
-    let partitionKeyString = this.state.isSharded ? this.state.partitionKey.trim() : undefined;
+    let partitionKeyString = this.state.partitionKey.trim();
 
     if (userContext.apiType === "Tables") {
       // Table require fixed Database: TablesDB, and fixed Partition Key: /'$pk'
@@ -1019,10 +1010,10 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     const partitionKeyVersion = this.state.useHashV2 ? 2 : undefined;
     const partitionKey: DataModels.PartitionKey = partitionKeyString
       ? {
-        paths: [partitionKeyString],
-        kind: "Hash",
-        version: partitionKeyVersion,
-      }
+          paths: [partitionKeyString],
+          kind: "Hash",
+          version: partitionKeyVersion,
+        }
       : undefined;
 
     const indexingPolicy: DataModels.IndexingPolicy = this.state.enableIndexing

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -23,12 +23,10 @@ import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneFor
 
 export interface AddDatabasePaneProps {
   explorer: Explorer;
-  buttonElement?: HTMLElement;
 }
 
 export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
   explorer: container,
-  buttonElement,
 }: AddDatabasePaneProps) => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   let throughput: number;
@@ -52,7 +50,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
   );
   const [formErrors, setFormErrors] = useState<string>("");
   const [isExecuting, setIsExecuting] = useState<boolean>(false);
-  const [isThroughputCapExceeded, setIsThroughputCapExceeded] = useState<boolean>(false);
 
   const isFreeTierAccount: boolean = userContext.databaseAccount?.properties?.enableFreeTier;
 
@@ -80,9 +77,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
       dataExplorerArea: Constants.Areas.ContextualPane,
     };
     TelemetryProcessor.trace(Action.CreateDatabase, ActionModifiers.Open, addDatabasePaneOpenMessage);
-    if (buttonElement) {
-      buttonElement.focus();
-    }
   }, []);
 
   const onSubmit = () => {
@@ -172,7 +166,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
     formError: formErrors,
     isExecuting,
     submitButtonText: "OK",
-    isSubmitButtonDisabled: isThroughputCapExceeded,
     onSubmit,
   };
 
@@ -243,7 +236,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
             isSharded={databaseCreateNewShared}
             setThroughputValue={(newThroughput: number) => (throughput = newThroughput)}
             setIsAutoscale={(isAutoscale: boolean) => (isAutoscaleSelected = isAutoscale)}
-            setIsThroughputCapExceeded={(isCapExceeded: boolean) => setIsThroughputCapExceeded(isCapExceeded)}
             onCostAcknowledgeChange={(isAcknowledged: boolean) => (isCostAcknowledged = isAcknowledged)}
           />
         )}

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

@@ -4,7 +4,6 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
 <RightPaneForm
   formError=""
   isExecuting={false}
-  isSubmitButtonDisabled={false}
   onSubmit={[Function]}
   submitButtonText="OK"
 >
@@ -93,7 +92,6 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
       isSharded={true}
       onCostAcknowledgeChange={[Function]}
       setIsAutoscale={[Function]}
-      setIsThroughputCapExceeded={[Function]}
       setThroughputValue={[Function]}
     />
   </div>

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx

@@ -1,14 +1,14 @@
 import { Checkbox, Dropdown, IDropdownOption, Link, Stack, Text, TextField } from "@fluentui/react";
-import * as Constants from "Common/Constants";
-import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
-import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
-import { useSidePanel } from "hooks/useSidePanel";
 import React, { FunctionComponent, useState } from "react";
-import * as SharedConstants from "Shared/Constants";
-import { Action } from "Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "UserContext";
-import { isServerlessAccount } from "Utils/CapabilityUtils";
+import * as Constants from "../../../Common/Constants";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
+import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
+import { useSidePanel } from "../../../hooks/useSidePanel";
+import * as SharedConstants from "../../../Shared/Constants";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../../UserContext";
+import { isServerlessAccount } from "../../../Utils/CapabilityUtils";
 import { ThroughputInput } from "../../Controls/ThroughputInput/ThroughputInput";
 import Explorer from "../../Explorer";
 import { CassandraAPIDataClient } from "../../Tables/TableDataClient";
@@ -43,7 +43,6 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
   const [dedicateTableThroughput, setDedicateTableThroughput] = useState<boolean>(false);
   const [isExecuting, setIsExecuting] = useState<boolean>();
   const [formError, setFormError] = useState<string>("");
-  const [isThroughputCapExceeded, setIsThroughputCapExceeded] = useState<boolean>(false);
   const isFreeTierAccount: boolean = userContext.databaseAccount?.properties?.enableFreeTier;
 
   const addCollectionPaneOpenMessage = {
@@ -150,7 +149,6 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
     formError,
     isExecuting,
     submitButtonText: "OK",
-    isSubmitButtonDisabled: isThroughputCapExceeded,
     onSubmit,
   };
 
@@ -200,7 +198,6 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
             <Stack className="panelGroupSpacing">
               <TextField
                 aria-required="true"
-                required={true}
                 autoComplete="off"
                 styles={getTextFieldStyles()}
                 pattern="[^/?#\\]*[^/?# \\]"
@@ -264,7 +261,6 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
               isSharded
               setThroughputValue={(throughput: number) => (newKeySpaceThroughput = throughput)}
               setIsAutoscale={(isAutoscale: boolean) => (isNewKeySpaceAutoscale = isAutoscale)}
-              setIsThroughputCapExceeded={(isCapExceeded: boolean) => setIsThroughputCapExceeded(isCapExceeded)}
               onCostAcknowledgeChange={(isAcknowledged: boolean) => (isCostAcknowledged = isAcknowledged)}
             />
           )}
@@ -289,7 +285,6 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
               underlined
               styles={getTextFieldStyles({ fontSize: 12, width: 150 })}
               aria-required="true"
-              required={true}
               ariaLabel="addCollection-tableId"
               autoComplete="off"
               pattern="[^/?#\\]*[^/?# \\]"
@@ -337,7 +332,6 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
             isSharded={false}
             setThroughputValue={(throughput: number) => (tableThroughput = throughput)}
             setIsAutoscale={(isAutoscale: boolean) => (isTableAutoscale = isAutoscale)}
-            setIsThroughputCapExceeded={(isCapExceeded: boolean) => setIsThroughputCapExceeded(isCapExceeded)}
             onCostAcknowledgeChange={(isAcknowledged: boolean) => (isCostAcknowledged = isAcknowledged)}
           />
         )}

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx

@@ -5,7 +5,6 @@ import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils
 import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
 import { useSidePanel } from "../../../hooks/useSidePanel";
 import { IPinnedRepo, JunoClient } from "../../../Juno/JunoClient";
-import { userContext } from "../../../UserContext";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
@@ -76,8 +75,6 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
           selectedLocation.owner,
           selectedLocation.repo
         )} - ${selectedLocation.branch}`;
-      } else if (selectedLocation.type === "MyNotebooks" && userContext.features.phoenix) {
-        destination = useNotebook.getState().notebookFolderName;
       }
 
       clearMessage = NotificationConsoleUtils.logConsoleProgress(`Copying ${name} to ${destination}`);

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx

@@ -12,7 +12,6 @@ import {
 import React, { FormEvent, FunctionComponent } from "react";
 import { IPinnedRepo } from "../../../Juno/JunoClient";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
-import { useNotebook } from "../../Notebook/useNotebook";
 import { ResourceTreeAdapter } from "../../Tree/ResourceTreeAdapter";
 
 interface Location {
@@ -47,10 +46,11 @@ export const CopyNotebookPaneComponent: FunctionComponent<CopyNotebookPaneProps>
 
   const getDropDownOptions = (): IDropdownOption[] => {
     const options: IDropdownOption[] = [];
+
     options.push({
       key: "MyNotebooks-Item",
-      text: useNotebook.getState().notebookFolderName,
-      title: useNotebook.getState().notebookFolderName,
+      text: ResourceTreeAdapter.MyNotebooksTitle,
+      title: ResourceTreeAdapter.MyNotebooksTitle,
       data: {
         type: "MyNotebooks",
       } as Location,

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx

@@ -1,18 +1,18 @@
 import { Text, TextField } from "@fluentui/react";
-import { Areas } from "Common/Constants";
-import { deleteCollection } from "Common/dataAccess/deleteCollection";
-import DeleteFeedback from "Common/DeleteFeedback";
-import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
-import { Collection } from "Contracts/ViewModels";
-import { useSidePanel } from "hooks/useSidePanel";
-import { useTabs } from "hooks/useTabs";
 import React, { FunctionComponent, useState } from "react";
-import { DefaultExperienceUtility } from "Shared/DefaultExperienceUtility";
-import { Action, ActionModifiers } from "Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "UserContext";
-import { getCollectionName } from "Utils/APITypeUtils";
-import * as NotificationConsoleUtils from "Utils/NotificationConsoleUtils";
+import { Areas } from "../../../Common/Constants";
+import { deleteCollection } from "../../../Common/dataAccess/deleteCollection";
+import DeleteFeedback from "../../../Common/DeleteFeedback";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
+import { Collection } from "../../../Contracts/ViewModels";
+import { useSidePanel } from "../../../hooks/useSidePanel";
+import { useTabs } from "../../../hooks/useTabs";
+import { DefaultExperienceUtility } from "../../../Shared/DefaultExperienceUtility";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../../UserContext";
+import { getCollectionName } from "../../../Utils/APITypeUtils";
+import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import { useDatabases } from "../../useDatabases";
 import { useSelectedNode } from "../../useSelectedNode";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
@@ -108,8 +108,6 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
     submitButtonText: "OK",
     onSubmit,
   };
-  const confirmContainer = `Confirm by typing the ${collectionName.toLowerCase()} id`;
-  const reasonInfo = `Help us improve Azure Cosmos DB! What is the reason why you are deleting this ${collectionName}?`;
   return (
     <RightPaneForm {...props}>
       <div className="panelFormWrapper">
@@ -125,7 +123,6 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
               onChange={(event, newInput?: string) => {
                 setInputCollectionName(newInput);
               }}
-              ariaLabel={confirmContainer}
             />
           </div>
           {shouldRecordFeedback() && (
@@ -145,7 +142,6 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
                 onChange={(event, newInput?: string) => {
                   setDeleteCollectionFeedback(newInput);
                 }}
-                ariaLabel={reasonInfo}
               />
             </div>
           )}

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

@@ -40,7 +40,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               </span>
             </Text>
             <StyledTextFieldBase
-              ariaLabel="Confirm by typing the container id"
               autoFocus={true}
               id="confirmCollectionId"
               onChange={[Function]}
@@ -54,7 +53,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               value=""
             >
               <TextFieldBase
-                ariaLabel="Confirm by typing the container id"
                 autoFocus={true}
                 deferredValidationTime={200}
                 id="confirmCollectionId"
@@ -348,7 +346,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                     >
                       <input
                         aria-invalid={false}
-                        aria-label="Confirm by typing the container id"
                         autoFocus={true}
                         className="ms-TextField-field field-57"
                         id="confirmCollectionId"
@@ -369,21 +366,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
       </div>
       <PanelFooterComponent
         buttonLabel="OK"
-        isButtonDisabled={false}
       >
         <div
           className="panelFooter"
         >
           <CustomizedPrimaryButton
             ariaLabel="OK"
-            disabled={false}
             id="sidePanelOkButton"
             text="OK"
             type="submit"
           >
             <PrimaryButton
               ariaLabel="OK"
-              disabled={false}
               id="sidePanelOkButton"
               text="OK"
               theme={
@@ -663,7 +657,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
             >
               <CustomizedDefaultButton
                 ariaLabel="OK"
-                disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
                 primary={true}
@@ -945,7 +938,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               >
                 <DefaultButton
                   ariaLabel="OK"
-                  disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
                   primary={true}
@@ -1228,7 +1220,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   <BaseButton
                     ariaLabel="OK"
                     baseClassName="ms-Button"
-                    disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
                     primary={true}

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx

@@ -1,18 +1,18 @@
 import { Text, TextField } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
-import { Areas } from "Common/Constants";
-import { deleteDatabase } from "Common/dataAccess/deleteDatabase";
-import DeleteFeedback from "Common/DeleteFeedback";
-import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
-import { Collection, Database } from "Contracts/ViewModels";
-import { useSidePanel } from "hooks/useSidePanel";
-import { useTabs } from "hooks/useTabs";
 import React, { FunctionComponent, useState } from "react";
-import { DefaultExperienceUtility } from "Shared/DefaultExperienceUtility";
-import { Action, ActionModifiers } from "Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "UserContext";
-import { logConsoleError } from "Utils/NotificationConsoleUtils";
+import { Areas } from "../../Common/Constants";
+import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
+import DeleteFeedback from "../../Common/DeleteFeedback";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { Collection, Database } from "../../Contracts/ViewModels";
+import { useSidePanel } from "../../hooks/useSidePanel";
+import { useTabs } from "../../hooks/useTabs";
+import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../UserContext";
+import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
 import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
@@ -118,8 +118,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
     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 confirmDatabase = "Confirm by typing the database id";
-  const reasonInfo = "Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?";
+
   return (
     <RightPaneForm {...props}>
       {!formError && <PanelInfoErrorComponent {...errorProps} />}
@@ -134,7 +133,6 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
             onChange={(event, newInput?: string) => {
               setDatabaseInput(newInput);
             }}
-            ariaLabel={confirmDatabase}
           />
         </div>
         {isLastNonEmptyDatabase() && (
@@ -153,7 +151,6 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
               onChange={(event, newInput?: string) => {
                 setDatabaseFeedbackInput(newInput);
               }}
-              ariaLabel={reasonInfo}
             />
           </div>
         )}

src/Explorer/Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane.tsx

@@ -153,7 +153,7 @@ export const ExecuteSprocParamsPane: FunctionComponent<ExecuteSprocParamsPanePro
               selectedKey={paramKeyValue && paramKeyValue.key}
             />
           ))}
-          <Stack horizontal onClick={addNewParamAtLastIndex} tabIndex={0}>
+          <Stack horizontal onClick={addNewParamAtLastIndex}>
             <Image {...imageProps} src={AddPropertyIcon} alt="Add param" />
             <Text className="addNewParamStyle">Add New Param</Text>
           </Stack>

src/Explorer/Panes/ExecuteSprocParamsPane/InputParameter.tsx

@@ -59,36 +59,30 @@ export const InputParameter: FunctionComponent<InputParameterProps> = ({
           onChange={onParamKeyChange}
           options={options}
           styles={dropdownStyles}
-          tabIndex={0}
         />
         <TextField
           label={inputLabel && inputLabel}
           id="confirmCollectionId"
+          autoFocus
           value={paramValue}
           onChange={onParamValueChange}
         />
         {isAddRemoveVisible && (
           <>
-            <div tabIndex={0}>
-              <Image
-                {...imageProps}
-                src={EntityCancelIcon}
-                alt="Delete param"
-                id="deleteparam"
-                role="button"
-                onClick={onDeleteParamKeyPress}
-              />
-            </div>
-            <div tabIndex={0}>
-              <Image
-                {...imageProps}
-                src={AddPropertyIcon}
-                alt="Add param"
-                id="addparam"
-                role="button"
-                onClick={onAddNewParamKeyPress}
-              />
-            </div>
+            <Image
+              {...imageProps}
+              src={EntityCancelIcon}
+              alt="Delete param"
+              id="deleteparam"
+              onClick={onDeleteParamKeyPress}
+            />
+            <Image
+              {...imageProps}
+              src={AddPropertyIcon}
+              alt="Add param"
+              id="addparam"
+              onClick={onAddNewParamKeyPress}
+            />
           </>
         )}
       </Stack>

src/Explorer/Panes/GitHubReposPanel/GitHubReposPanel.tsx

@@ -35,9 +35,6 @@ interface IGitHubReposPanelState {
 }
 export class GitHubReposPanel extends React.Component<IGitHubReposPanelProps, IGitHubReposPanelState> {
   private static readonly PageSize = 30;
-  private static readonly MasterBranchName = "master";
-  private static readonly MainBranchName = "main";
-
   private isAddedRepo = false;
   private gitHubClient: GitHubClient;
   private junoClient: JunoClient;
@@ -119,8 +116,6 @@ export class GitHubReposPanel extends React.Component<IGitHubReposPanelProps, IG
         if (response.status !== HttpStatusCodes.OK) {
           throw new Error(`Received HTTP ${response.status} when saving pinned repos`);
         }
-
-        this.props.explorer.notebookManager?.refreshPinnedRepos();
       } catch (error) {
         handleError(error, "GitHubReposPane/submit", "Failed to save pinned repos");
       }
@@ -212,14 +207,6 @@ export class GitHubReposPanel extends React.Component<IGitHubReposPanelProps, IG
       if (response.data) {
         branchesProps.branches = branchesProps.branches.concat(response.data);
         branchesProps.lastPageInfo = response.pageInfo;
-        branchesProps.defaultBranchName = branchesProps.branches[0].name;
-        const defaultbranchName = branchesProps.branches.find(
-          (branch) =>
-            branch.name === GitHubReposPanel.MasterBranchName || branch.name === GitHubReposPanel.MainBranchName
-        )?.name;
-        if (defaultbranchName) {
-          branchesProps.defaultBranchName = defaultbranchName;
-        }
       }
     } catch (error) {
       handleError(error, "GitHubReposPane/loadMoreBranches", "Failed to fetch branches");
@@ -311,17 +298,6 @@ export class GitHubReposPanel extends React.Component<IGitHubReposPanelProps, IG
     const existingRepo = this.pinnedReposProps.repos.find((repo) => repo.key === item.key);
     if (existingRepo) {
       existingRepo.branches = item.branches;
-      this.setState({
-        gitHubReposState: {
-          ...this.state.gitHubReposState,
-          reposListProps: {
-            ...this.state.gitHubReposState.reposListProps,
-            pinnedReposProps: {
-              repos: this.pinnedReposProps.repos,
-            },
-          },
-        },
-      });
     } else {
       this.pinnedReposProps.repos = [...this.pinnedReposProps.repos, item];
     }
@@ -398,7 +374,6 @@ export class GitHubReposPanel extends React.Component<IGitHubReposPanelProps, IG
           lastPageInfo: undefined,
           hasMore: true,
           isLoading: true,
-          defaultBranchName: undefined,
           loadMore: (): Promise<void> => this.loadMoreBranches(item.repo),
         };
         this.loadMoreBranches(item.repo);

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

@@ -23,13 +23,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
             "isTabsContentExpanded": [Function],
             "onRefreshDatabasesKeyPress": [Function],
             "onRefreshResourcesClick": [Function],
-            "phoenixClient": PhoenixClient {
-              "retryOptions": Object {
-                "maxTimeout": 5000,
-                "minTimeout": 5000,
-                "retries": 3,
-              },
-            },
             "provideFeedbackEmail": [Function],
             "queriesClient": QueriesClient {
               "container": [Circular],

src/Explorer/Panes/PanelComponent.less

@@ -3,13 +3,13 @@
 .panelFormWrapper {
   display: flex;
   flex-direction: column;
-  min-height: 100%;
+  height: 100%;
 
   .panelMainContent {
     flex-grow: 1;
     padding: 0 34px;
     margin: 20px 0;
-    overflow-x: hidden;
+    overflow: auto;
 
     & > :not(.collapsibleSection) {
       margin-bottom: @DefaultSpace;

src/Explorer/Panes/PanelFooterComponent.tsx

@@ -3,20 +3,12 @@ import React from "react";
 
 export interface PanelFooterProps {
   buttonLabel: string;
-  isButtonDisabled?: boolean;
 }
 
 export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = ({
   buttonLabel,
-  isButtonDisabled,
 }: PanelFooterProps): JSX.Element => (
   <div className="panelFooter">
-    <PrimaryButton
-      type="submit"
-      id="sidePanelOkButton"
-      text={buttonLabel}
-      ariaLabel={buttonLabel}
-      disabled={!!isButtonDisabled}
-    />
+    <PrimaryButton type="submit" id="sidePanelOkButton" text={buttonLabel} ariaLabel={buttonLabel} />
   </div>
 );

src/Explorer/Panes/PanelInfoErrorComponent.tsx

@@ -33,13 +33,7 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
     <Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
       {icon}
       <span className="panelWarningErrorDetailsLinkContainer">
-        <Text
-          role="alert"
-          aria-live="assertive"
-          aria-label={message}
-          className="panelWarningErrorMessage"
-          variant="small"
-        >
+        <Text className="panelWarningErrorMessage" variant="small" aria-label="message">
           {message}
           {link && linkText && (
             <Link target="_blank" href={link}>

src/Explorer/Panes/RightPaneForm/RightPaneForm.test.tsx

@@ -34,6 +34,6 @@ describe("Right Pane Form", () => {
   it("should render error in header", () => {
     render(<RightPaneForm {...props} formError="file already Exist" />);
     expect(screen.getByLabelText("error")).toBeDefined();
-    expect(screen.getByRole("alert").innerHTML).toEqual("file already Exist");
+    expect(screen.getByLabelText("message").innerHTML).toEqual("file already Exist");
   });
 });

src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx

@@ -9,7 +9,6 @@ export interface RightPaneFormProps {
   onSubmit: () => void;
   submitButtonText: string;
   isSubmitButtonHidden?: boolean;
-  isSubmitButtonDisabled?: boolean;
   children?: ReactNode;
 }
 
@@ -19,7 +18,6 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
   onSubmit,
   submitButtonText,
   isSubmitButtonHidden = false,
-  isSubmitButtonDisabled = false,
   children,
 }: RightPaneFormProps) => {
   const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -32,9 +30,7 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
       <form className="panelFormWrapper" onSubmit={handleOnSubmit}>
         {formError && <PanelInfoErrorComponent messageType="error" message={formError} showErrorDetails={true} />}
         {children}
-        {!isSubmitButtonHidden && (
-          <PanelFooterComponent buttonLabel={submitButtonText} isButtonDisabled={isSubmitButtonDisabled} />
-        )}
+        {!isSubmitButtonHidden && <PanelFooterComponent buttonLabel={submitButtonText} />}
       </form>
       {isExecuting && <PanelLoadingScreen />}
     </>

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

@@ -14,21 +14,18 @@ exports[`Right Pane Form should render Default properly 1`] = `
   >
     <PanelFooterComponent
       buttonLabel="Load"
-      isButtonDisabled={false}
     >
       <div
         className="panelFooter"
       >
         <CustomizedPrimaryButton
           ariaLabel="Load"
-          disabled={false}
           id="sidePanelOkButton"
           text="Load"
           type="submit"
         >
           <PrimaryButton
             ariaLabel="Load"
-            disabled={false}
             id="sidePanelOkButton"
             text="Load"
             theme={
@@ -308,7 +305,6 @@ exports[`Right Pane Form should render Default properly 1`] = `
           >
             <CustomizedDefaultButton
               ariaLabel="Load"
-              disabled={false}
               id="sidePanelOkButton"
               onRenderDescription={[Function]}
               primary={true}
@@ -590,7 +586,6 @@ exports[`Right Pane Form should render Default properly 1`] = `
             >
               <DefaultButton
                 ariaLabel="Load"
-                disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
                 primary={true}
@@ -873,7 +868,6 @@ exports[`Right Pane Form should render Default properly 1`] = `
                 <BaseButton
                   ariaLabel="Load"
                   baseClassName="ms-Button"
-                  disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
                   primary={true}

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -1,13 +1,13 @@
-import { Checkbox, ChoiceGroup, IChoiceGroupOption, SpinButton, Stack, Text } from "@fluentui/react";
-import * as Constants from "Common/Constants";
-import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
-import { configContext } from "ConfigContext";
-import { useSidePanel } from "hooks/useSidePanel";
+import { Checkbox, ChoiceGroup, IChoiceGroupOption, SpinButton } from "@fluentui/react";
 import React, { FunctionComponent, MouseEvent, useState } from "react";
-import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import * as StringUtility from "Shared/StringUtility";
-import { userContext } from "UserContext";
-import { logConsoleInfo } from "Utils/NotificationConsoleUtils";
+import * as Constants from "../../../Common/Constants";
+import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
+import { configContext } from "../../../ConfigContext";
+import { useSidePanel } from "../../../hooks/useSidePanel";
+import { LocalStorageUtility, StorageKey } from "../../../Shared/StorageUtility";
+import * as StringUtility from "../../../Shared/StringUtility";
+import { userContext } from "../../../UserContext";
+import { logConsoleInfo } from "../../../Utils/NotificationConsoleUtils";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
 export const SettingsPane: FunctionComponent = () => {
@@ -113,44 +113,20 @@ export const SettingsPane: FunctionComponent = () => {
   const handleOnPageOptionChange = (ev: React.FormEvent<HTMLInputElement>, option: IChoiceGroupOption): void => {
     setPageOption(option.key);
   };
-
-  const choiceButtonStyles = {
-    flexContainer: [
-      {
-        selectors: {
-          ".ms-ChoiceField-wrapper label": {
-            fontSize: 12,
-            paddingTop: 0,
-          },
-          ".ms-ChoiceField": {
-            marginTop: 0,
-          },
-        },
-      },
-    ],
-  };
   return (
     <RightPaneForm {...genericPaneProps}>
       <div className="paneMainContent">
         {shouldShowQueryPageOptions && (
           <div className="settingsSection">
-            <div className="settingsSectionPart">
-              <Stack horizontal>
-                <Text id="pageOptions" className="settingsSectionLabel" variant="small">
-                  Page options
-                </Text>
+            <div className="settingsSectionPart pageOptionsPart">
+              <div className="settingsSectionLabel">
+                Page options
                 <InfoTooltip>
                   Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many
                   query results per page.
                 </InfoTooltip>
-              </Stack>
-              <ChoiceGroup
-                ariaLabelledBy="pageOptions"
-                selectedKey={pageOption}
-                options={pageOptionList}
-                styles={choiceButtonStyles}
-                onChange={handleOnPageOptionChange}
-              />
+              </div>
+              <ChoiceGroup selectedKey={pageOption} options={pageOptionList} onChange={handleOnPageOptionChange} />
             </div>
             <div className="tabs settingsSectionPart">
               {isCustomPageOptionSelected() && (
@@ -219,6 +195,7 @@ export const SettingsPane: FunctionComponent = () => {
                 step={1}
                 className="textfontclr"
                 role="textbox"
+                tabIndex={0}
                 id="max-degree"
                 value={"" + maxDegreeOfParallelism}
                 onIncrement={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) + 1 || maxDegreeOfParallelism)}

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

@@ -14,24 +14,17 @@ exports[`Settings Pane should render Default properly 1`] = `
       className="settingsSection"
     >
       <div
-        className="settingsSectionPart"
+        className="settingsSectionPart pageOptionsPart"
       >
-        <Stack
-          horizontal={true}
+        <div
+          className="settingsSectionLabel"
         >
-          <Text
-            className="settingsSectionLabel"
-            id="pageOptions"
-            variant="small"
-          >
-            Page options
-          </Text>
+          Page options
           <InfoTooltip>
             Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many query results per page.
           </InfoTooltip>
-        </Stack>
+        </div>
         <StyledChoiceGroup
-          ariaLabelledBy="pageOptions"
           onChange={[Function]}
           options={
             Array [
@@ -46,23 +39,6 @@ exports[`Settings Pane should render Default properly 1`] = `
             ]
           }
           selectedKey="custom"
-          styles={
-            Object {
-              "flexContainer": Array [
-                Object {
-                  "selectors": Object {
-                    ".ms-ChoiceField": Object {
-                      "marginTop": 0,
-                    },
-                    ".ms-ChoiceField-wrapper label": Object {
-                      "fontSize": 12,
-                      "paddingTop": 0,
-                    },
-                  },
-                },
-              ],
-            }
-          }
         />
       </div>
       <div
@@ -147,6 +123,7 @@ exports[`Settings Pane should render Default properly 1`] = `
           onValidate={[Function]}
           role="textbox"
           step={1}
+          tabIndex={0}
           value="6"
         />
       </div>

src/Explorer/Panes/StringInputPane/StringInputPane.tsx

@@ -1,8 +1,8 @@
 import { TextField } from "@fluentui/react";
-import * as ViewModels from "Contracts/ViewModels";
-import { useTabs } from "hooks/useTabs";
 import React, { FormEvent, FunctionComponent, useState } from "react";
-import { logConsoleError, logConsoleInfo, logConsoleProgress } from "Utils/NotificationConsoleUtils";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { useTabs } from "../../../hooks/useTabs";
+import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
 import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
 import { NotebookContentItem } from "../../Notebook/NotebookContentItem";
 import NotebookV2Tab from "../../Tabs/NotebookV2Tab";

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

@@ -13,13 +13,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       "isTabsContentExpanded": [Function],
       "onRefreshDatabasesKeyPress": [Function],
       "onRefreshResourcesClick": [Function],
-      "phoenixClient": PhoenixClient {
-        "retryOptions": Object {
-          "maxTimeout": 5000,
-          "minTimeout": 5000,
-          "retries": 3,
-        },
-      },
       "provideFeedbackEmail": [Function],
       "queriesClient": QueriesClient {
         "container": [Circular],
@@ -681,21 +674,18 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       </div>
       <PanelFooterComponent
         buttonLabel="Create"
-        isButtonDisabled={false}
       >
         <div
           className="panelFooter"
         >
           <CustomizedPrimaryButton
             ariaLabel="Create"
-            disabled={false}
             id="sidePanelOkButton"
             text="Create"
             type="submit"
           >
             <PrimaryButton
               ariaLabel="Create"
-              disabled={false}
               id="sidePanelOkButton"
               text="Create"
               theme={
@@ -975,7 +965,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="Create"
-                disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
                 primary={true}
@@ -1257,7 +1246,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
               >
                 <DefaultButton
                   ariaLabel="Create"
-                  disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
                   primary={true}
@@ -1540,7 +1528,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                   <BaseButton
                     ariaLabel="Create"
                     baseClassName="ms-Button"
-                    disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
                     primary={true}

src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.test.tsx

@@ -29,7 +29,6 @@ describe("Table query select Panel", () => {
   it("Should checked availableCheckbox by default", () => {
     const wrapper = mount(<TableQuerySelectPanel {...props} />);
     expect(wrapper.find("#availableCheckbox").first().props()).toEqual({
-      ariaPositionInSet: 0,
       id: "availableCheckbox",
       label: "Available Columns",
       checked: true,

src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.tsx

@@ -128,9 +128,8 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
               label="Available Columns"
               checked={isAvailableColumnChecked}
               onChange={availableColumnsCheckboxClick}
-              ariaPositionInSet={0}
             />
-            {columnOptions.map((column, index) => {
+            {columnOptions.map((column) => {
               return (
                 <Checkbox
                   label={column.columnName}
@@ -138,7 +137,6 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
                   key={column.columnName}
                   checked={column.selected}
                   disabled={!column.editable}
-                  ariaPositionInSet={index + 1}
                 />
               );
             })}

src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap

@@ -37,14 +37,12 @@ exports[`Table query select Panel should render Default properly 1`] = `
             className="column-select-view"
           >
             <StyledCheckboxBase
-              ariaPositionInSet={0}
               checked={true}
               id="availableCheckbox"
               label="Available Columns"
               onChange={[Function]}
             >
               <CheckboxBase
-                ariaPositionInSet={0}
                 checked={true}
                 id="availableCheckbox"
                 label="Available Columns"
@@ -330,7 +328,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
                   <input
                     aria-checked="true"
                     aria-label="Available Columns"
-                    aria-posinset={0}
                     checked={true}
                     className="input-55"
                     data-ktp-execute-target={true}
@@ -649,7 +646,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
               </CheckboxBase>
             </StyledCheckboxBase>
             <StyledCheckboxBase
-              ariaPositionInSet={1}
               checked={true}
               disabled={false}
               key=""
@@ -657,7 +653,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
               onChange={[Function]}
             >
               <CheckboxBase
-                ariaPositionInSet={1}
                 checked={true}
                 disabled={false}
                 label=""
@@ -944,7 +939,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
                     aria-checked="true"
                     aria-disabled={false}
                     aria-label=""
-                    aria-posinset={1}
                     checked={true}
                     className="input-55"
                     data-ktp-execute-target={true}
@@ -1262,21 +1256,18 @@ exports[`Table query select Panel should render Default properly 1`] = `
       </div>
       <PanelFooterComponent
         buttonLabel="OK"
-        isButtonDisabled={false}
       >
         <div
           className="panelFooter"
         >
           <CustomizedPrimaryButton
             ariaLabel="OK"
-            disabled={false}
             id="sidePanelOkButton"
             text="OK"
             type="submit"
           >
             <PrimaryButton
               ariaLabel="OK"
-              disabled={false}
               id="sidePanelOkButton"
               text="OK"
               theme={
@@ -1556,7 +1547,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="OK"
-                disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
                 primary={true}
@@ -1838,7 +1828,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
               >
                 <DefaultButton
                   ariaLabel="OK"
-                  disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
                   primary={true}
@@ -2121,7 +2110,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
                   <BaseButton
                     ariaLabel="OK"
                     baseClassName="ms-Button"
-                    disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
                     primary={true}

src/Explorer/Panes/Tables/Validators/EntityTableHelper.tsx

@@ -33,7 +33,6 @@ const {
   Inet,
   Smallint,
   Tinyint,
-  Timestamp,
 } = TableConstants.CassandraType;
 export const cassandraOptions = [
   { key: Text, text: Text },
@@ -51,7 +50,6 @@ export const cassandraOptions = [
   { key: Inet, text: Inet },
   { key: Smallint, text: Smallint },
   { key: Tinyint, text: Tinyint },
-  { key: Timestamp, text: Timestamp },
 ];
 
 export const imageProps: IImageProps = {

src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap

@@ -356,21 +356,18 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
       </div>
       <PanelFooterComponent
         buttonLabel="Add Entity"
-        isButtonDisabled={false}
       >
         <div
           className="panelFooter"
         >
           <CustomizedPrimaryButton
             ariaLabel="Add Entity"
-            disabled={false}
             id="sidePanelOkButton"
             text="Add Entity"
             type="submit"
           >
             <PrimaryButton
               ariaLabel="Add Entity"
-              disabled={false}
               id="sidePanelOkButton"
               text="Add Entity"
               theme={
@@ -650,7 +647,6 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="Add Entity"
-                disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
                 primary={true}
@@ -932,7 +928,6 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
               >
                 <DefaultButton
                   ariaLabel="Add Entity"
-                  disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
                   primary={true}
@@ -1215,7 +1210,6 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                   <BaseButton
                     ariaLabel="Add Entity"
                     baseClassName="ms-Button"
-                    disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
                     primary={true}

src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap

@@ -357,21 +357,18 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
       </div>
       <PanelFooterComponent
         buttonLabel="Update"
-        isButtonDisabled={false}
       >
         <div
           className="panelFooter"
         >
           <CustomizedPrimaryButton
             ariaLabel="Update"
-            disabled={false}
             id="sidePanelOkButton"
             text="Update"
             type="submit"
           >
             <PrimaryButton
               ariaLabel="Update"
-              disabled={false}
               id="sidePanelOkButton"
               text="Update"
               theme={
@@ -651,7 +648,6 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="Update"
-                disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
                 primary={true}
@@ -933,7 +929,6 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
               >
                 <DefaultButton
                   ariaLabel="Update"
-                  disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
                   primary={true}
@@ -1216,7 +1211,6 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
                   <BaseButton
                     ariaLabel="Update"
                     baseClassName="ms-Button"
-                    disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
                     primary={true}