Updating string for partition key size checkbox

* Fix a11y new database button focus issue

* Update test snapshot and other issues

* fix issue for the menu button

* Issue fixed in Splash screen

.eslintignore

@@ -81,17 +81,9 @@ 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
@@ -115,15 +107,10 @@ 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
@@ -137,18 +124,19 @@ src/Terminal/NotebookAppContracts.d.ts
 src/applyExplorerBindings.ts
 src/global.d.ts
 src/setupTests.ts
+src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
+src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx
+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/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,7 +39,6 @@ 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,5 +22,6 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true,
     "source.organizeImports": true
-  }
+  },
+  "typescript.preferences.importModuleSpecifier": "non-relative"
 }

images/close-black.svg

@@ -1,16 +1,8 @@
 <?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="#CCC" 
-        >
+    <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>
 </svg>

jest.config.js

@@ -37,8 +37,8 @@ module.exports = {
     global: {
       branches: 25,
       functions: 25,
-      lines: 30,
-      statements: 30,
+      lines: 29,
+      statements: 29,
     },
   },
 
@@ -129,6 +129,8 @@ 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: auto;
+  overflow-x: clip;
   overflow-y: auto;
   height: 100%;
 }
@@ -2245,7 +2245,7 @@ a:link {
 }
 
 .refreshColHeader {
-  padding: 3px 6px 6px 6px;
+  padding: 3px 6px 10px 0px !important;
 }
 
 .refreshColHeader:hover {
@@ -2357,6 +2357,8 @@ a:link {
   height: 100%;
   flex-grow: 1;
   overflow: hidden;
+  min-height: 300px;
+  overflow-y: scroll;
 }
 
 .tabs {
@@ -2832,6 +2834,8 @@ a:link {
 
 #explorerNotificationConsole {
   z-index: 1000;
+  overflow-y: auto;
+  overflow-x: clip;
 }
 
 .uniqueIndexesContainer {
@@ -2865,31 +2869,31 @@ a:link {
   }
 }
 
-settings-pane {
-  .settingsSection {
-    border-bottom: 1px solid @BaseMedium;
-    margin-right: 24px;
-    padding: @MediumSpace 0px;
+.settingsSection {
+  border-bottom: 1px solid @BaseMedium;
+  margin-right: 24px;
+  padding: @MediumSpace 0px;
 
-    &:first-child {
-      padding-top: 0px;
-    }
+  &:first-child {
+    padding-top: 0px;
+    padding-bottom: 10px;
+  }
 
-    &:last-child {
-      border-bottom: none;
-    }
+  &:last-child {
+    border-bottom: none;
+  }
 
-    .settingsSectionPart {
-      padding-left: 8px;
-    }
+  .settingsSectionPart {
+    padding-left: 8px;
+  }
 
-    .settingsSectionLabel {
-      margin-bottom: @DefaultSpace;
-    }
+  .settingsSectionLabel {
+    margin-bottom: @DefaultSpace;
+    margin-right: 5px;
+  }
 
-    .pageOptionsPart {
-      padding-bottom: @MediumSpace;
-    }
+  .pageOptionsPart {
+    padding-bottom: @MediumSpace;
   }
 }
 

package-lock.json

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

package.json

@@ -230,4 +230,4 @@
   "prettier": {
     "printWidth": 120
   }
-}
+}

src/Common/CollapsedResourceTree.tsx

@@ -1,6 +1,7 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
 import arrowLeftImg from "../../images/imgarrowlefticon.svg";
 import { userContext } from "../UserContext";
+import { NormalizedEventKey } from "./Constants";
 
 export interface CollapsedResourceTreeProps {
   toggleLeftPaneExpanded: () => void;
@@ -11,6 +12,21 @@ 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">
@@ -21,11 +37,14 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
             role="button"
             tabIndex={0}
             aria-label="Expand Tree"
+            onClick={toggleLeftPaneExpanded}
+            onKeyPress={onKeyPressToggleLeftPaneExpanded}
+            ref={focusButton}
           >
-            <span className="leftarrowCollapsed" onClick={toggleLeftPaneExpanded}>
+            <span className="leftarrowCollapsed">
               <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
             </span>
-            <span className="collectionCollapsed" onClick={toggleLeftPaneExpanded}>
+            <span className="collectionCollapsed">
               <span>{userContext.apiType} API</span>
             </span>
           </li>

src/Common/Constants.ts

@@ -97,6 +97,7 @@ export class Flights {
   public static readonly PartitionKeyTest = "partitionkeytest";
   public static readonly PKPartitionKeyTest = "pkpartitionkeytest";
   public static readonly Phoenix = "phoenix";
+  public static readonly NotebooksDownBanner = "notebooksdownbanner";
 }
 
 export class AfecFeatures {
@@ -339,10 +340,16 @@ export enum ConflictOperationType {
 }
 
 export enum ConnectionStatusType {
+  Connect = "Connect",
   Connecting = "Connecting",
-  Allocating = "Allocating",
   Connected = "Connected",
   Failed = "Connection Failed",
+  Reconnect = "Reconnect",
+}
+
+export enum ContainerStatusType {
+  Active = "Active",
+  Disconnected = "Disconnected",
 }
 
 export const EmulatorMasterKey =
@@ -354,15 +361,37 @@ export const StyleConstants = require("less-vars-loader!../../less/Common/Consta
 
 export class Notebook {
   public static readonly defaultBasePath = "./notebooks";
-  public static readonly heartbeatDelayMs = 5000;
+  public static readonly heartbeatDelayMs = 60000;
+  public static readonly containerStatusHeartbeatDelayMs = 30000;
   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 {
@@ -383,3 +412,11 @@ 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/MongoProxyClient.test.ts

@@ -3,8 +3,16 @@ 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, queryDocuments, readDocument, updateDocument } from "./MongoProxyClient";
+import {
+  deleteDocument,
+  getEndpoint,
+  getFeatureEndpointOrDefault,
+  queryDocuments,
+  readDocument,
+  updateDocument,
+} from "./MongoProxyClient";
 
 const databaseId = "testDB";
 
@@ -246,4 +254,31 @@ 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,6 +6,7 @@ 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";
@@ -78,7 +79,7 @@ export function queryDocuments(
         : "",
   };
 
-  const endpoint = getEndpoint() || "";
+  const endpoint = getFeatureEndpointOrDefault("resourcelist") || "";
 
   const headers = {
     ...defaultHeaders,
@@ -141,7 +142,8 @@ export function readDocument(
         : "",
   };
 
-  const endpoint = getEndpoint();
+  const endpoint = getFeatureEndpointOrDefault("readDocument");
+
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
       method: "GET",
@@ -181,7 +183,7 @@ export function createDocument(
     pk: collection && collection.partitionKey && !collection.partitionKey.systemKey ? partitionKeyProperty : "",
   };
 
-  const endpoint = getEndpoint();
+  const endpoint = getFeatureEndpointOrDefault("createDocument");
 
   return window
     .fetch(`${endpoint}/resourcelist?${queryString.stringify(params)}`, {
@@ -225,7 +227,7 @@ export function updateDocument(
         ? documentId.partitionKeyProperty
         : "",
   };
-  const endpoint = getEndpoint();
+  const endpoint = getFeatureEndpointOrDefault("updateDocument");
 
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
@@ -266,7 +268,7 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
         ? documentId.partitionKeyProperty
         : "",
   };
-  const endpoint = getEndpoint();
+  const endpoint = getFeatureEndpointOrDefault("deleteDocument");
 
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
@@ -309,7 +311,7 @@ export function createMongoCollectionWithProxy(
     autoPilotThroughput: params.autoPilotMaxThroughput?.toString(),
   };
 
-  const endpoint = getEndpoint();
+  const endpoint = getFeatureEndpointOrDefault("createCollectionWithProxy");
 
   return window
     .fetch(
@@ -333,8 +335,15 @@ export function createMongoCollectionWithProxy(
     });
 }
 
-export function getEndpoint(): string {
-  let url = (configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT) + "/api/mongo/explorer";
+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";
 
   if (userContext.authType === AuthType.EncryptedToken) {
     url = url.replace("api/mongo", "api/guest/mongo");

src/Common/ResourceTreeContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
 import arrowLeftImg from "../../images/imgarrowlefticon.svg";
 import refreshImg from "../../images/refresh-cosmos.svg";
 import { AuthType } from "../AuthType";
@@ -6,6 +6,7 @@ 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;
@@ -18,6 +19,22 @@ 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 */}
@@ -43,9 +60,11 @@ 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" />
+        <Icon iconName="Info" ariaLabel="Info" className="panelInfoIcon" tabIndex={0} />
       </TooltipHost>
     </span>
   );

src/ConfigContext.ts

@@ -1,3 +1,5 @@
+import { JunoEndpoints } from "Common/Constants";
+
 export enum Platform {
   Portal = "Portal",
   Hosted = "Hosted",
@@ -23,6 +25,7 @@ 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;
@@ -52,14 +55,16 @@ 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/settings/applications/1189306
+  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
   JUNO_ENDPOINT: "https://tools.cosmos.azure.com",
   BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
   allowedJunoOrigins: [
-    "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",
+    JunoEndpoints.Test,
+    JunoEndpoints.Test2,
+    JunoEndpoints.Test3,
+    JunoEndpoints.Prod,
+    JunoEndpoints.Stage,
     "https://localhost",
   ],
 };

src/Contracts/DataModels.ts

@@ -1,4 +1,4 @@
-import { ConnectionStatusType } from "../Common/Constants";
+import { ConnectionStatusType, ContainerStatusType } from "../Common/Constants";
 
 export interface DatabaseAccount {
   id: string;
@@ -26,6 +26,8 @@ export interface DatabaseAccountExtendedProperties {
   isVirtualNetworkFilterEnabled?: boolean;
   ipRules?: IpRule[];
   privateEndpointConnections?: unknown[];
+  capacity?: { totalThroughputLimit: number };
+  locations?: DatabaseAccountResponseLocation[];
 }
 
 export interface DatabaseAccountResponseLocation {
@@ -426,6 +428,36 @@ 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 {

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -1,5 +1,6 @@
 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 {
@@ -30,6 +31,13 @@ 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 (
       <>
@@ -39,6 +47,11 @@ 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,9 +3,14 @@
 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,6 +30,7 @@ export interface DialogState {
     onOk: () => void,
     cancelLabel: string,
     onCancel: () => void,
+    contentHtml?: JSX.Element,
     choiceGroupProps?: IChoiceGroupProps,
     textFieldProps?: TextFieldProps,
     primaryButtonDisabled?: boolean
@@ -58,6 +59,7 @@ export const useDialog: UseStore<DialogState> = create((set, get) => ({
     onOk: () => void,
     cancelLabel: string,
     onCancel: () => void,
+    contentHtml?: JSX.Element,
     choiceGroupProps?: IChoiceGroupProps,
     textFieldProps?: TextFieldProps,
     primaryButtonDisabled?: boolean
@@ -76,6 +78,7 @@ export const useDialog: UseStore<DialogState> = create((set, get) => ({
         get().closeDialog();
         onCancel && onCancel();
       },
+      contentHtml,
       choiceGroupProps,
       textFieldProps,
       primaryButtonDisabled,
@@ -124,6 +127,7 @@ export interface DialogProps {
   type?: DialogType;
   showCloseButton?: boolean;
   onDismiss?: () => void;
+  contentHtml?: JSX.Element;
 }
 
 const DIALOG_MIN_WIDTH = "400px";
@@ -150,6 +154,7 @@ export const Dialog: FC = () => {
     type,
     showCloseButton,
     onDismiss,
+    contentHtml,
   } = props || {};
 
   const dialogProps: IDialogProps = {
@@ -191,6 +196,7 @@ 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,7 +27,6 @@ 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);
@@ -78,7 +77,7 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
     });
     let enteredUrl = this.state.textFieldValue;
     if (enteredUrl.indexOf("/tree/") === -1) {
-      enteredUrl = UrlUtility.createUri(enteredUrl, `tree/${AddRepoComponent.DefaultBranchName}`);
+      enteredUrl = UrlUtility.createUri(enteredUrl, `tree/`);
     }
 
     const repoInfo = GitHubUtils.fromRepoUri(enteredUrl);
@@ -93,11 +92,7 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
         const item: RepoListItem = {
           key: GitHubUtils.toRepoFullName(repo.owner, repo.name),
           repo,
-          branches: [
-            {
-              name: repoInfo.branch,
-            },
-          ],
+          branches: repoInfo.branch ? [{ 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,6 +44,7 @@ export interface BranchesProps {
   lastPageInfo?: IGitHubPageInfo;
   hasMore: boolean;
   isLoading: boolean;
+  defaultBranchName: string;
   loadMore: () => void;
 }
 
@@ -64,7 +65,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 DefaultBranchName = "master";
+  private static readonly DefaultBranchNames = "master/main";
   private static readonly FooterIndex = -1;
 
   public render(): JSX.Element {
@@ -155,6 +156,10 @@ 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,
@@ -198,7 +203,7 @@ export class ReposListComponent extends React.Component<ReposListComponentProps>
     const dropdownProps: IDropdownProps = {
       styles: BranchesDropdownStyles,
       options: [],
-      placeholder: ReposListComponent.DefaultBranchName,
+      placeholder: ReposListComponent.DefaultBranchNames,
       disabled: true,
     };
 
@@ -272,7 +277,7 @@ export class ReposListComponent extends React.Component<ReposListComponentProps>
       styles: ReposListCheckboxStyles,
       onChange: () => {
         const repoListItem = { ...item };
-        repoListItem.branches = [{ name: ReposListComponent.DefaultBranchName }];
+        repoListItem.branches = [];
         this.props.pinRepo(repoListItem);
       },
     };

src/Explorer/Controls/InputTypeahead/InputTypeahead.less

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

src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx

@@ -50,7 +50,7 @@ export interface InputTypeaheadComponentProps {
    * Override default jquery-typeahead options
    * WARNING: do not override input, source or callback to avoid breaking the components behavior.
    */
-  typeaheadOverrideOptions?: { dynamic: boolean };
+  typeaheadOverrideOptions?: any;
 
   /**
    * This function gets called when pressing ENTER on the input box
@@ -132,7 +132,6 @@ export class InputTypeaheadComponent extends React.Component<
 
   private filterChoiceByValue = (choices: Item[], searchKeyword: string): Item[] => {
     return choices.filter((choice) =>
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       Object.keys(choice).some((key) => choice[key].toLowerCase().includes(searchKeyword.toLowerCase()))
     );
@@ -161,18 +160,21 @@ export class InputTypeaheadComponent extends React.Component<
     return (
       <div className="input-typeahead-container">
         <Stack horizontal>
-          <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)}
-          />
+          <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>
           {this.props.showCancelButton && (
             <IconButton
               styles={iconButtonStyles}

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

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

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

@@ -35,16 +35,19 @@ 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,6 +17,8 @@ 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";
@@ -51,7 +53,7 @@ export class NotebookViewerComponent
     super(props);
 
     this.clientManager = new NotebookClientV2({
-      connectionInfo: { authToken: undefined, notebookServerEndpoint: undefined },
+      connectionInfo: { authToken: undefined, notebookServerEndpoint: undefined, forwardingId: undefined },
       databaseAccountName: undefined,
       defaultExperience: "NotebookViewer",
       isReadOnly: true,
@@ -146,7 +148,9 @@ export class NotebookViewerComponent
             <NotebookMetadataComponent
               data={this.state.galleryItem}
               isFavorite={this.state.isFavorite}
-              downloadButtonText={this.props.container && "Download to my notebooks"}
+              downloadButtonText={
+                this.props.container && NotebookUtil.getNotebookBtnTitle(useNotebook.getState().notebookFolderName)
+              }
               onTagClick={this.props.onTagClick}
               onFavoriteClick={this.favoriteItem}
               onUnfavoriteClick={this.unfavoriteItem}
@@ -264,6 +268,6 @@ export class NotebookViewerComponent
   };
 
   private reportAbuse = (): void => {
-    GalleryUtils.reportAbuse(this.props.junoClient, this.state.galleryItem, this, () => ({}));
+    GalleryUtils.reportAbuse(this.props.junoClient, this.state.galleryItem, this, () => {});
   };
 }

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1,4 +1,5 @@
 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";
@@ -71,6 +72,7 @@ export interface SettingsComponentState {
   wasAutopilotOriginallySet: boolean;
   isScaleSaveable: boolean;
   isScaleDiscardable: boolean;
+  throughputError: string;
 
   timeToLive: TtlType;
   timeToLiveBaseline: TtlType;
@@ -124,6 +126,7 @@ 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) {
@@ -155,6 +158,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       wasAutopilotOriginallySet: false,
       isScaleSaveable: false,
       isScaleDiscardable: false,
+      throughputError: undefined,
 
       timeToLive: undefined,
       timeToLiveBaseline: undefined,
@@ -208,6 +212,11 @@ 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 {
@@ -254,6 +263,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       return false;
     }
 
+    if (this.state.throughputError) {
+      return false;
+    }
+
     return (
       this.state.isScaleSaveable ||
       this.state.isSubSettingsSaveable ||
@@ -481,6 +494,26 @@ 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) {
@@ -643,10 +676,31 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     return buttons;
   };
 
-  private onMaxAutoPilotThroughputChange = (newThroughput: number): void =>
-    this.setState({ autoPilotThroughput: newThroughput });
+  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 onThroughputChange = (newThroughput: number): void => this.setState({ throughput: 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 onAutoPilotSelected = (isAutoPilotSelected: boolean): void =>
     this.setState({ isAutoPilotSelected: isAutoPilotSelected });
@@ -893,6 +947,7 @@ 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 {
-  ITextFieldStyles,
+  DetailsList,
+  DetailsListLayoutMode,
+  DetailsRow,
   ICheckboxStyles,
-  IStackProps,
-  IStackTokens,
   IChoiceGroupStyles,
-  Link,
-  Text,
-  IMessageBarStyles,
-  ITextStyles,
-  IDetailsRowStyles,
-  IStackStyles,
+  IColumn,
+  IDetailsColumnStyles,
   IDetailsListStyles,
+  IDetailsRowProps,
+  IDetailsRowStyles,
   IDropdownStyles,
+  IMessageBarStyles,
   ISeparatorStyles,
+  IStackProps,
+  IStackStyles,
+  IStackTokens,
+  ITextFieldStyles,
+  ITextStyles,
+  Link,
   MessageBar,
   MessageBarType,
-  Stack,
+  SelectionMode,
   Spinner,
   SpinnerSize,
-  DetailsList,
-  IColumn,
-  SelectionMode,
-  DetailsListLayoutMode,
-  IDetailsRowProps,
-  DetailsRow,
-  IDetailsColumnStyles,
+  Stack,
+  Text,
 } from "@fluentui/react";
-import { isDirtyTypes, isDirty } from "./SettingsUtils";
+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";
 
 export interface EstimatedSpendingDisplayProps {
   costType: JSX.Element;
@@ -65,7 +65,7 @@ export interface PriceBreakdown {
   currencySign: string;
 }
 
-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14 } };
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } };
 
 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
   label: {
@@ -223,14 +223,15 @@ export const getRuPriceBreakdown = (
     multimasterEnabled: isMultimaster,
     isAutoscale: isAutoscale,
   });
-  const basePricePerRu: number = isAutoscale
-    ? getAutoscalePricePerRu(serverId, getMultimasterMultiplier(numberOfRegions, isMultimaster))
-    : getPricePerRu(serverId);
+  const multimasterMultiplier = getMultimasterMultiplier(numberOfRegions, isMultimaster);
+  const pricePerRu: number = isAutoscale
+    ? getAutoscalePricePerRu(serverId, multimasterMultiplier)
+    : getPricePerRu(serverId, multimasterMultiplier);
   return {
-    hourlyPrice: hourlyPrice,
+    hourlyPrice,
     dailyPrice: hourlyPrice * 24,
     monthlyPrice: hourlyPrice * hoursInAMonth,
-    pricePerRu: basePricePerRu * getMultimasterMultiplier(numberOfRegions, isMultimaster),
+    pricePerRu,
     currency: getPriceCurrency(serverId),
     currencySign: getCurrencySign(serverId),
   };
@@ -271,7 +272,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.{" "}
-    <a href={Urls.autoscaleMigration}>Learn more</a>
+    <Link href={Urls.autoscaleMigration}>Learn more</Link>
   </Text>
 );
 

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

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

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

@@ -36,6 +36,7 @@ export interface ScaleComponentProps {
   onScaleSaveableChange: (isScaleSaveable: boolean) => void;
   onScaleDiscardableChange: (isScaleDiscardable: boolean) => void;
   initialNotification: DataModels.Notification;
+  throughputError?: string;
 }
 
 export class ScaleComponent extends React.Component<ScaleComponentProps> {
@@ -189,6 +190,7 @@ 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,6 +75,7 @@ export interface ThroughputInputAutoPilotV3Props {
   onScaleDiscardableChange: (isScaleDiscardable: boolean) => void;
   getThroughputWarningMessage: () => JSX.Element;
   usageSizeInKB: number;
+  throughputError?: string;
 }
 
 interface ThroughputInputAutoPilotV3State {
@@ -540,6 +541,7 @@ 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()}
@@ -579,6 +581,7 @@ 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,6 +20,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
       styles={
         Object {
           "root": Object {
+            "color": "windowtext",
             "fontSize": 14,
           },
         }
@@ -39,6 +40,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
             styles={
               Object {
                 "root": Object {
+                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -73,6 +75,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
         styles={
           Object {
             "root": Object {
+              "color": "windowtext",
               "fontSize": 14,
             },
           }
@@ -80,11 +83,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.
          
-        <a
+        <StyledLinkBase
           href="https://aka.ms/cosmos-autoscale-migration"
         >
           Learn more
-        </a>
+        </StyledLinkBase>
       </Text>
     </StyledMessageBar>
     <StyledChoiceGroup
@@ -186,6 +189,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
             styles={
               Object {
                 "root": Object {
+                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -460,6 +464,7 @@ 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,6 +16,7 @@ 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,6 +136,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
             styles={
               Object {
                 "root": Object {
+                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -412,6 +413,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
             styles={
               Object {
                 "root": Object {
+                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -952,6 +954,7 @@ exports[`SubSettingsComponent renders 1`] = `
             styles={
               Object {
                 "root": Object {
+                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -1228,6 +1231,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
             styles={
               Object {
                 "root": Object {
+                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }

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

@@ -34,7 +34,13 @@ exports[`SettingsComponent renders 1`] = `
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
-                "phoenixClient": PhoenixClient {},
+                "phoenixClient": PhoenixClient {
+                  "retryOptions": Object {
+                    "maxTimeout": 5000,
+                    "minTimeout": 5000,
+                    "retries": 3,
+                  },
+                },
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -102,7 +108,13 @@ exports[`SettingsComponent renders 1`] = `
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
-                "phoenixClient": PhoenixClient {},
+                "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,6 +159,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -166,16 +167,17 @@ 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.
      
-    <a
+    <StyledLinkBase
       href="https://aka.ms/cosmos-autoscale-migration"
     >
       Learn more
-    </a>
+    </StyledLinkBase>
   </Text>
   <Text
     styles={
       Object {
         "root": Object {
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -195,6 +197,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -207,6 +210,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -219,6 +223,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -230,6 +235,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -249,6 +255,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -264,6 +271,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -278,6 +286,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -291,6 +300,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -302,6 +312,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -321,6 +332,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -363,6 +375,7 @@ exports[`SettingsUtils functions render 1`] = `
       styles={
         Object {
           "root": Object {
+            "color": "windowtext",
             "fontSize": 14,
           },
         }
@@ -378,6 +391,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -394,6 +408,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
+          "color": "windowtext",
           "fontSize": 14,
         },
       }

src/Explorer/Controls/Tabs/TabComponent.less

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

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

@@ -6,6 +6,7 @@ import { userContext } from "../../../../UserContext";
 import {
   calculateEstimateNumber,
   computeRUUsagePriceHourly,
+  estimatedCostDisclaimer,
   getAutoscalePricePerRu,
   getCurrencySign,
   getMultimasterMultiplier,
@@ -42,11 +43,9 @@ 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) * multiplier
-    : getPricePerRu(serverId) * multiplier;
+  const pricePerRu = isAutoscale ? getAutoscalePricePerRu(serverId, multiplier) : getPricePerRu(serverId, multiplier);
 
-  const iconWithEstimatedCostDisclaimer: JSX.Element = <InfoTooltip>PricingUtils.estimatedCostDisclaimer</InfoTooltip>;
+  const iconWithEstimatedCostDisclaimer: JSX.Element = <InfoTooltip>{estimatedCostDisclaimer}</InfoTooltip>;
 
   if (isAutoscale) {
     return (

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

@@ -7,6 +7,7 @@ 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,5 +1,6 @@
 import { Checkbox, DirectionalHint, Link, Stack, Text, TextField, TooltipHost } from "@fluentui/react";
-import React, { FunctionComponent, useState } from "react";
+import { useDatabases } from "Explorer/useDatabases";
+import React, { FunctionComponent, useEffect, useState } from "react";
 import * as Constants from "../../../Common/Constants";
 import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
 import * as SharedConstants from "../../../Shared/Constants";
@@ -16,6 +17,7 @@ export interface ThroughputInputProps {
   showFreeTierExceedThroughputTooltip: boolean;
   setThroughputValue: (throughput: number) => void;
   setIsAutoscale: (isAutoscale: boolean) => void;
+  setIsThroughputCapExceeded: (isThroughputCapExceeded: boolean) => void;
   onCostAcknowledgeChange: (isAcknowledged: boolean) => void;
 }
 
@@ -24,6 +26,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
   showFreeTierExceedThroughputTooltip,
   setThroughputValue,
   setIsAutoscale,
+  setIsThroughputCapExceeded,
   isSharded,
   onCostAcknowledgeChange,
 }: ThroughputInputProps) => {
@@ -31,10 +34,60 @@ 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) {
@@ -60,11 +113,17 @@ 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");
-    } else {
-      setThroughputError("");
+      return;
     }
+
+    if (!checkThroughputCap(newThroughput)) {
+      return;
+    }
+
+    setThroughputError("");
   };
 
   const getAutoScaleTooltip = (): string => {
@@ -96,11 +155,13 @@ 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);
     }
   };
 
@@ -118,6 +179,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
         <input
           className="throughputInputRadioBtn"
           aria-label="Autoscale mode"
+          aria-required={true}
           checked={isAutoscaleSelected}
           type="radio"
           role="radio"
@@ -131,6 +193,7 @@ 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,6 +6,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
   isSharded={true}
   onCostAcknowledgeChange={[Function]}
   setIsAutoscale={[Function]}
+  setIsThroughputCapExceeded={[Function]}
   setThroughputValue={[Function]}
   showFreeTierExceedThroughputTooltip={true}
 >
@@ -345,12 +346,14 @@ 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,
@@ -630,6 +633,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         className="panelInfoIcon root-57"
                         data-icon-name="Info"
                         role="img"
+                        tabIndex={0}
                       >
                         
                       </i>
@@ -651,6 +655,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
       >
         <input
           aria-label="Autoscale mode"
+          aria-required={true}
           checked={true}
           className="throughputInputRadioBtn"
           key=".0:$.0"
@@ -667,6 +672,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
         </span>
         <input
           aria-label="Manual mode"
+          aria-required={true}
           checked={false}
           className="throughputInputRadioBtn"
           key=".0:$.2"
@@ -1327,12 +1333,14 @@ 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,
@@ -1612,6 +1620,7 @@ 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,6 +243,7 @@ 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,6 +211,7 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
             },
           }
         }
+        title="More"
       />
     </div>
   </div>
@@ -423,6 +424,7 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
             },
           }
         }
+        title="More"
       />
     </div>
   </div>

src/Explorer/Explorer.tsx

@@ -1,17 +1,20 @@
+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 { ConnectionStatusType } 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";
@@ -163,24 +166,9 @@ export default class Explorer {
     );
 
     useNotebook.subscribe(
-      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
+      async () => this.initiateAndRefreshNotebookList(),
+      (state) => [state.isNotebookEnabled, state.isRefreshed],
+      shallow
     );
 
     this.resourceTree = new ResourceTreeAdapter(this);
@@ -190,6 +178,7 @@ export default class Explorer {
       useNotebook.getState().setNotebookServerInfo({
         notebookServerEndpoint: userContext.features.notebookServerUrl,
         authToken: userContext.features.notebookServerToken,
+        forwardingId: undefined,
       });
     }
 
@@ -213,6 +202,23 @@ 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: {
@@ -346,30 +352,7 @@ export default class Explorer {
       return;
     }
     this._isInitializingNotebooks = true;
-    if (userContext.features.phoenix) {
-      const connectionStatus: DataModels.ContainerConnectionInfo = {
-        status: ConnectionStatusType.Allocating,
-      };
-      useNotebook.getState().setConnectionInfo(connectionStatus);
-      const provisionData = {
-        cosmosEndpoint: userContext.databaseAccount.properties.documentEndpoint,
-        resourceId: userContext.databaseAccount.id,
-        dbAccountName: userContext.databaseAccount.name,
-        aadToken: userContext.authorizationToken,
-        resourceGroup: userContext.resourceGroup,
-        subscriptionId: userContext.subscriptionId,
-      };
-      const connectionInfo = await this.phoenixClient.containerConnectionInfo(provisionData);
-      if (connectionInfo.data && connectionInfo.data.notebookServerUrl) {
-        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,
-        });
-      }
-    } else {
+    if (userContext.features.phoenix === false) {
       await this.ensureNotebookWorkspaceRunning();
       const connectionInfo = await listConnectionInfo(
         userContext.subscriptionId,
@@ -381,16 +364,89 @@ export default class Explorer {
       useNotebook.getState().setNotebookServerInfo({
         notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.notebookServerEndpoint,
         authToken: userContext.features.notebookServerToken || connectionInfo.authToken,
+        forwardingId: undefined,
       });
     }
 
-    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 {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookClient) {
       handleError(
@@ -399,11 +455,14 @@ 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: "This lets you keep your notebook files and the workspace will be restored to default. Proceed anyway?",
+      subText: dialogContent,
       primaryButtonText: "OK",
       secondaryButtonText: "Cancel",
       onPrimaryButtonClick: this._resetNotebookWorkspace,
@@ -461,16 +520,54 @@ export default class Explorer {
   private _resetNotebookWorkspace = async () => {
     useDialog.getState().closeDialog();
     const clearInProgressMessage = logConsoleProgress("Resetting notebook workspace");
+    let connectionStatus: ContainerConnectionInfo;
     try {
-      await this.notebookManager?.notebookClient.resetWorkspace();
+      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);
+      }
       logConsoleInfo("Successfully reset notebook workspace");
-      TelemetryProcessor.traceSuccess(Action.ResetNotebookWorkspace);
+      TelemetryProcessor.traceSuccess(Action.PhoenixResetWorkspace, {
+        dataExplorerArea: Areas.Notebook,
+      });
     } catch (error) {
       logConsoleError(`Failed to reset notebook workspace: ${error}`);
-      TelemetryProcessor.traceFailure(Action.ResetNotebookWorkspace, {
+      TelemetryProcessor.traceFailure(Action.PhoenixResetWorkspace, {
+        dataExplorerArea: Areas.Notebook,
         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();
@@ -662,6 +759,9 @@ 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()
@@ -883,9 +983,51 @@ 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);
+    }
+  }
 
-    parent = parent || this.resourceTree.myNotebooksContentRoot;
+  private getNewNoteWarningText(): JSX.Element {
+    return (
+      <>
+        <p>{Notebook.newNotebookModalContent1}</p>
+        <br />
+        <p>
+          {Notebook.newNotebookModalContent2}
+          <Link href={Notebook.cosmosNotebookHomePageUrl} target="_blank">
+            {Notebook.learnMore}
+          </Link>
+        </p>
+      </>
+    );
+  }
 
+  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,
@@ -932,7 +1074,26 @@ export default class Explorer {
     await this.notebookManager?.notebookContentClient.updateItemChildrenInPlace(item);
   }
 
-  public openNotebookTerminal(kind: ViewModels.TerminalKind): void {
+  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 {
     let title: string;
 
     switch (kind) {
@@ -983,7 +1144,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
@@ -1026,7 +1187,10 @@ export default class Explorer {
           <CassandraAddCollectionPane explorer={this} cassandraApiClient={new CassandraAPIDataClient()} />
         );
     } else {
-      await useDatabases.getState().loadDatabaseOffers();
+      const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
+      throughputCap && throughputCap !== -1
+        ? await useDatabases.getState().loadAllOffers()
+        : await useDatabases.getState().loadDatabaseOffers();
       useSidePanel
         .getState()
         .openSidePanel("New " + getCollectionName(), <AddCollectionPanel explorer={this} databaseId={databaseId} />);
@@ -1052,10 +1216,9 @@ export default class Explorer {
   }
 
   public async handleOpenFileAction(path: string): Promise<void> {
-    if (
-      userContext.features.phoenix === false &&
-      !(await this._containsDefaultNotebookWorkspace(userContext.databaseAccount))
-    ) {
+    if (userContext.features.phoenix) {
+      await this.allocateContainer();
+    } else if (!(await this._containsDefaultNotebookWorkspace(userContext.databaseAccount))) {
       this._openSetupNotebooksPaneForQuickstart();
     }
 
@@ -1087,7 +1250,27 @@ export default class Explorer {
   }
 
   public openUploadFilePanel(parent?: NotebookContentItem): void {
-    parent = parent || this.resourceTree.myNotebooksContentRoot;
+    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 {
     useSidePanel
       .getState()
       .openSidePanel(
@@ -1096,20 +1279,34 @@ 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();
-    let isNotebookEnabled = true;
-    if (!userContext.features.phoenix) {
-      isNotebookEnabled =
-        userContext.authType !== AuthType.ResourceToken &&
-        ((await this._containsDefaultNotebookWorkspace(userContext.databaseAccount)) ||
-          userContext.features.enableNotebooks);
-    }
+
+    // TODO: remove reference to isNotebookEnabled and isNotebooksEnabledForAccount
+    const isNotebookEnabled = userContext.features.notebooksDownBanner || userContext.features.phoenix;
     useNotebook.getState().setIsNotebookEnabled(isNotebookEnabled);
-    useNotebook.getState().setIsShellEnabled(isNotebookEnabled && isPublicInternetAccessAllowed());
+    useNotebook.getState().setIsShellEnabled(userContext.features.phoenix && isPublicInternetAccessAllowed());
 
     TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
       isNotebookEnabled,

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -1,3 +1,5 @@
+/* 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";
@@ -294,8 +296,6 @@ 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) {
+  public shareIGraphConfig(igraphConfig: IGraphConfig): void {
     this.setState({
       igraphConfig: { ...igraphConfig },
     });
@@ -422,7 +422,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * Called from ko binding
    * @param id
    */
-  public selectNode(id: string) {
+  public selectNode(id: string): void {
     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() {
+  public deleteHighlightedNode(): void {
     if (!this.state.highlightedNode) {
       GraphExplorer.reportToConsole(ConsoleDataType.Error, "No highlighted node to remove.");
       return;
@@ -467,7 +467,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * Is of type: {e: GremlinEdge, v: GremlinVertex}[]
    * @param data
    */
-  public static isEdgeVertexPairArray(data: any) {
+  public static isEdgeVertexPairArray(data: any): boolean {
     if (!(data instanceof Array)) {
       GraphExplorer.reportToConsole(ConsoleDataType.Info, "Query result not an array", data);
       return false;
@@ -477,13 +477,13 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     for (let i = 0; i < pairs.length; i++) {
       const item = pairs[i];
       if (
-        !item.hasOwnProperty("e") ||
-        !item.hasOwnProperty("v") ||
-        !item["e"].hasOwnProperty("id") ||
-        !item["e"].hasOwnProperty("type") ||
+        !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["e"].type !== "edge" ||
-        !item["v"].hasOwnProperty("id") ||
-        !item["v"].hasOwnProperty("type") ||
+        !Object.prototype.hasOwnProperty.call(item["v"], "id") ||
+        !Object.prototype.hasOwnProperty.call(item["e"], "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,7 +588,6 @@ 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);
     }
@@ -668,7 +667,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       }
     );
 
-    return promise.then((nbPairsFetched: number) => {
+    return promise.then(() => {
       if (offsetIndex >= GraphExplorer.LOAD_PAGE_SIZE || !vertex._outEAllLoaded || !vertex._inEAllLoaded) {
         vertex._pagination = {
           total:
@@ -754,7 +753,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<any> {
+  public createNewEdge(e: GraphNewEdgeData): Q.Promise<unknown> {
     const q = `g.V('${GraphUtil.escapeSingleQuotes(e.inputOutV)}').addE('${GraphUtil.escapeSingleQuotes(
       e.label
     )}').To(g.V('${GraphUtil.escapeSingleQuotes(e.inputInV)}'))`;
@@ -800,7 +799,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * Manually update in-memory graph.
    * @param edgeId
    */
-  public removeEdge(edgeId: string): Q.Promise<any> {
+  public removeEdge(edgeId: string): Q.Promise<unknown> {
     return this.submitToBackend(`g.E('${GraphUtil.escapeSingleQuotes(edgeId)}').drop()`).then(
       () => {
         const graphData = this.originalGraphData;
@@ -829,7 +828,11 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     const vertices: any[] = data;
     if (vertices.length > 0) {
       const v0 = vertices[0];
-      if (!v0.hasOwnProperty("id") || !v0.hasOwnProperty("type") || v0.type !== "vertex") {
+      if (
+        !Object.prototype.hasOwnProperty.call(v0, "id") ||
+        !Object.prototype.hasOwnProperty.call(v0, "type") ||
+        v0.type !== "vertex"
+      ) {
         return false;
       }
     }
@@ -837,7 +840,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   }
 
   public processGremlinQueryResults(result: GremlinClient.GremlinRequestResult): void {
-    const data = result.data as any;
+    const data = result.data as GraphData.GremlinVertex[];
     this.setFilterQueryStatus(FilterQueryStatus.GraphEmptyResult);
 
     if (data === null) {
@@ -927,7 +930,7 @@ 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 };
@@ -1022,7 +1025,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,
         {
@@ -1161,12 +1164,15 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       )}"`
     ).then(
       (documents: DataModels.DocumentId[]) => {
-        $.each(documents, (index: number, doc: any) => {
-          newIconsMap[doc["_graph_icon_property_value"]] = {
-            data: doc["icon"],
-            format: doc["format"],
-          };
-        });
+        $.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"],
+            };
+          }
+        );
 
         // Update graph configuration
         this.setState({
@@ -1223,7 +1229,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     const key = this.state.igraphConfig.nodeCaption;
     return $.map(
       this.state.rootMap,
-      (value: any, index: number): LeftPane.CaptionId => {
+      (value: any): LeftPane.CaptionId => {
         const result = GraphData.GraphData.getNodePropValue(value, key);
         return {
           caption: result !== undefined ? result : value.id,
@@ -1237,7 +1243,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * Selecting a root node means
    * @param node
    */
-  private selectRootNode(id: string): Q.Promise<any> {
+  private selectRootNode(id: string): Q.Promise<unknown> {
     if (!this.d3ForceGraph) {
       console.warn("Attempting to reset zoom, but d3ForceGraph not initialized, yet.");
     } else {
@@ -1282,7 +1288,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
         this.collectNodeProperties(this.originalGraphData.vertices);
         this.updatePropertiesPane(id);
       },
-      (reason: any) => {
+      (reason: string) => {
         GraphExplorer.reportToConsole(ConsoleDataType.Error, `Failed to select root node. Reason:${reason}`);
       }
     );
@@ -1349,10 +1355,10 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   private getPkIdFromVertex(v: GraphData.GremlinVertex): string {
     if (
       this.props.collectionPartitionKeyProperty &&
-      v.hasOwnProperty("properties") &&
-      v.properties.hasOwnProperty(this.props.collectionPartitionKeyProperty) &&
+      Object.prototype.hasOwnProperty.call(v, "properties") &&
+      Object.prototype.hasOwnProperty.call(v.properties, this.props.collectionPartitionKeyProperty) &&
       v.properties[this.props.collectionPartitionKeyProperty].length > 0 &&
-      v.properties[this.props.collectionPartitionKeyProperty][0].hasOwnProperty("value")
+      Object.prototype.hasOwnProperty.call(v.properties[this.props.collectionPartitionKeyProperty][0], "value")
     ) {
       const pk = v.properties[this.props.collectionPartitionKeyProperty][0].value;
       return GraphExplorer.generatePkIdPair(pk, v.id);
@@ -1370,8 +1376,8 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   private getPkIdFromNodeData(v: GraphHighlightedNodeData): string {
     if (
       this.props.collectionPartitionKeyProperty &&
-      v.hasOwnProperty("properties") &&
-      v.properties.hasOwnProperty(this.props.collectionPartitionKeyProperty)
+      Object.prototype.hasOwnProperty.call(v, "properties") &&
+      Object.prototype.hasOwnProperty.call(v.properties, this.props.collectionPartitionKeyProperty)
     ) {
       const pk = v.properties[this.props.collectionPartitionKeyProperty];
       return GraphExplorer.generatePkIdPair(pk[0] as PartitionKeyValueType, v.id);
@@ -1395,7 +1401,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       throw new Error(error);
     }
 
-    if (collectionPartitionKeyProperty && d.hasOwnProperty(collectionPartitionKeyProperty)) {
+    if (collectionPartitionKeyProperty && Object.prototype.hasOwnProperty.call(d, collectionPartitionKeyProperty)) {
       let pk = (d as any)[collectionPartitionKeyProperty];
       if (typeof pk !== "string" && typeof pk !== "number" && typeof pk !== "boolean") {
         if (Array.isArray(pk) && pk.length > 0) {
@@ -1439,7 +1445,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
               caption: item.p,
             });
           } else {
-            if (item.hasOwnProperty("p")) {
+            if (Object.prototype.hasOwnProperty.call(item, "p")) {
               possibleVertices.push({
                 value: item.id,
                 caption: item.p[0]["_value"],
@@ -1462,7 +1468,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * @param addedEdges
    * @return promise when done
    */
-  private editGraphEdges(editedEdges: EditedEdges): Q.Promise<any> {
+  private editGraphEdges(editedEdges: EditedEdges): Q.Promise<unknown> {
     const promises = [];
     // Drop edges
     for (let i = 0; i < editedEdges.droppedIds.length; i++) {
@@ -1525,7 +1531,9 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   /**
    * For unit testing purposes
    */
-  public onGraphUpdated(timestamp: number): void {}
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public onGraphUpdated(_timestamp: number): void {}
 
   /**
    * Get node properties for styling purposes. Result is the union of all properties of all nodes.
@@ -1540,7 +1548,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
         }
       }
       // Inspect properties
-      if (item.hasOwnProperty("properties")) {
+      if (Object.prototype.hasOwnProperty.call(item, "properties")) {
         // TODO This is DocDB-graph specific
         // Assume each property value is [{value:... }]
         for (const f in item.properties) {
@@ -1660,7 +1668,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
 
     this.setState({
       possibleEdgeLabels: Object.keys(possibleEdgeLabels).map(
-        (value: string, index: number, array: string[]): InputTypeaheadComponent.Item => {
+        (value: string): InputTypeaheadComponent.Item => {
           return { caption: value, value: value };
         }
       ),
@@ -1685,7 +1693,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     if (this.originalGraphData.hasVertexId(updatedVertex.id)) {
       const currentVertex = this.originalGraphData.getVertexById(updatedVertex.id);
       // Copy updated properties
-      if (currentVertex.hasOwnProperty("properties")) {
+      if (Object.prototype.hasOwnProperty.call(currentVertex, "properties")) {
         delete currentVertex["properties"];
       }
       for (const p in updatedVertex) {
@@ -1873,7 +1881,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
 
     promise
       .then((result: GremlinClient.GremlinRequestResult) => this.processGremlinQueryResults(result))
-      .catch((error: any) => {
+      .catch((error: Error) => {
         const errorMsg = `Failed to process query result: ${getErrorMessage(error)}`;
         GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
         this.setState({

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,7 +17,14 @@ 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}>
+          <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}
+          >
             <img
               src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}
               alt={this.props.isTabsContentExpanded ? "collapse graph content" : "expand graph content"}

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

@@ -37,25 +37,18 @@ describe("Property pane", () => {
     return {
       expandedTitle: title,
       isCollapsed: false,
-      onCollapsedChanged: (): void => {
-        ("");
-      },
+      onCollapsedChanged: jest.fn(),
       node: highlightedNode,
       getPkIdFromNodeData: (): string => undefined,
       collectionPartitionKeyProperty: undefined,
       updateVertexProperties: (): Q.Promise<void> => Q.resolve(),
-      selectNode: (): void => {
-        ("");
-      },
+      selectNode: jest.fn(),
       updatePossibleVertices: (): Q.Promise<PossibleVertex[]> => Q.resolve(undefined),
       possibleEdgeLabels: undefined,
-      editGraphEdges: (): Q.Promise<unknown> => Q.resolve(),
-      deleteHighlightedNode: (): void => {
-        ("");
-      },
-      onModeChanged: (): void => {
-        ("");
-      },
+      //eslint-disable-next-line
+      editGraphEdges: (): Q.Promise<any> => Q.resolve(),
+      deleteHighlightedNode: jest.fn(),
+      onModeChanged: jest.fn(),
       viewMode: Mode.READONLY_PROP,
     };
   };

src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx

@@ -45,7 +45,7 @@ export interface NodePropertiesComponentProps {
   selectNode: (id: string) => void;
   updatePossibleVertices: () => Q.Promise<PossibleVertex[]>;
   possibleEdgeLabels: Item[];
-  editGraphEdges: (editedEdges: EditedEdges) => Q.Promise<unknown>;
+  editGraphEdges: (editedEdges: EditedEdges) => Q.Promise<any>;
   deleteHighlightedNode: () => void;
   onModeChanged: (newMode: Mode) => void;
   viewMode: Mode; // If viewMode is specified in parent, keep state in sync with it
@@ -134,11 +134,8 @@ export class NodePropertiesComponent extends React.Component<
    * Get type option. Limit to string, number or boolean
    * @param value
    */
-  private static getTypeOption(
-    value: null | string | number | undefined | boolean
-  ): ViewModels.InputPropertyValueTypeString {
-    // eslint-disable-next-line no-null/no-null
-    if (value === null) {
+  private static getTypeOption(value: any): ViewModels.InputPropertyValueTypeString {
+    if (value === undefined) {
       return "null";
     }
     const type = typeof value;
@@ -172,8 +169,6 @@ export class NodePropertiesComponent extends React.Component<
     ];
 
     const existingProps: ViewModels.InputProperty[] = [];
-
-    // eslint-disable-next-line no-prototype-builtins
     if (this.props.node.hasOwnProperty("properties")) {
       const hProps = this.props.node["properties"];
       for (const p in hProps) {

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -9,8 +9,10 @@ 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";
@@ -54,9 +56,15 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
   uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
-  uiFabricControlButtons.unshift(CommandBarUtil.createConnectionStatus("connectionStatus"));
+  if (NotebookUtil.isPhoenixEnabled()) {
+    uiFabricControlButtons.unshift(CommandBarUtil.createConnectionStatus(container, "connectionStatus"));
+  }
 
-  if (useTabs.getState().activeTab?.tabKind === ViewModels.CollectionTabKind.NotebookV2) {
+  if (
+    userContext.features.phoenix === false &&
+    userContext.features.notebooksTemporarilyDown === false &&
+    useTabs.getState().activeTab?.tabKind === ViewModels.CollectionTabKind.NotebookV2
+  ) {
     uiFabricControlButtons.unshift(CommandBarUtil.createMemoryTracker("memoryTracker"));
   }
 

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -80,7 +80,7 @@ export function createStaticCommandBarButtons(
     }
 
     notebookButtons.push(createOpenTerminalButton(container));
-    if (userContext.features.phoenix === false) {
+    if (selectedNodeState.isConnectedToContainer()) {
       notebookButtons.push(createNotebookWorkspaceResetButton(container));
     }
     if (
@@ -310,8 +310,13 @@ function createNewDatabase(container: Explorer): CommandButtonComponentProps {
   return {
     iconSrc: AddDatabaseIcon,
     iconAlt: label,
-    onCommandClick: () =>
-      useSidePanel.getState().openSidePanel("New " + getDatabaseName(), <AddDatabasePanel explorer={container} />),
+    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} />);
+    },
     commandButtonLabel: label,
     ariaLabel: label,
     hasPopup: true,
@@ -596,7 +601,7 @@ function createManageGitHubAccountButton(container: Explorer): CommandButtonComp
   return {
     iconSrc: GitHubIcon,
     iconAlt: label,
-    onCommandClick: () =>
+    onCommandClick: () => {
       useSidePanel
         .getState()
         .openSidePanel(
@@ -606,7 +611,8 @@ function createManageGitHubAccountButton(container: Explorer): CommandButtonComp
             gitHubClientProp={container.notebookManager.gitHubClient}
             junoClientProp={junoClient}
           />
-        ),
+        );
+    },
     commandButtonLabel: label,
     hasPopup: false,
     disabled: false,

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -13,6 +13,7 @@ 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,9 +204,9 @@ export const createMemoryTracker = (key: string): ICommandBarItemProps => {
   };
 };
 
-export const createConnectionStatus = (key: string): ICommandBarItemProps => {
+export const createConnectionStatus = (container: Explorer, key: string): ICommandBarItemProps => {
   return {
     key,
-    onRender: () => <ConnectionStatus />,
+    onRender: () => <ConnectionStatus container={container} />,
   };
 };

src/Explorer/Menus/CommandBar/ConnectionStatusComponent.less

@@ -3,77 +3,182 @@
 .connectionStatusContainer {
     cursor: default;
     align-items: center;
-    margin: 0 9px;
     border: 1px;
     min-height: 44px;
 
     > span {
         padding-right: 12px;
-        font-size: 13px;
+        font-size: 12px;
         font-family: @DataExplorerFont;
         color: @DefaultFontColor;
     }
+    &:focus{
+        outline: 0px;
+    }
 }
-.connectionStatusFailed{
-    color: #bd1919;
+.commandReactBtn {
+    &:hover {
+        background-color: rgb(238, 247, 255);
+        color: rgb(32, 31, 30);
+        cursor: pointer;
+    }
+    &:focus{
+        outline: 1px dashed #605e5c;
+    }
 }
-.ring-container {
+.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;
-}
-
-.ringringGreen {
-    border: 3px solid green;
-    border-radius: 30px;
-    height: 18px;
-    width: 18px;
+    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;
-    margin: .4285em 0em 0em 0.07477em;
-    animation: pulsate 3s ease-out;
-    animation-iteration-count: infinite; 
-    opacity: 0.0
-}
-.ringringYellow{
-    border: 3px solid #ffbf00;
-    border-radius: 30px;
-    height: 18px;
-    width: 18px;
-    position: absolute;
-    margin: .4285em 0em 0em 0.07477em;
-    animation: pulsate 3s ease-out;
-    animation-iteration-count: infinite; 
-    opacity: 0.0
-}
-.ringringRed{
-    border: 3px solid #bd1919;
-    border-radius: 30px;
-    height: 18px;
-    width: 18px;
-    position: absolute;
-    margin: .4285em 0em 0em 0.07477em;
-    animation: pulsate 3s ease-out;
-    animation-iteration-count: infinite; 
-    opacity: 0.0
-}
-@keyframes pulsate {
-    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
-    15% {opacity: 0.8;}
-    25% {opacity: 0.6;}
-    45% {opacity: 0.4;}
-    70% {opacity: 0.3;}
-    100% {-webkit-transform: scale(.7, .7); opacity: 0.1;}
-}
-.locationGreenDot{
-    font-size: 20px;
-    margin-right: 0.07em;
-    color: green;
-}
-.locationYellowDot{
-    font-size: 20px;
-    margin-right: 0.07em;
-    color: #ffbf00;
-}
-.locationRedDot{
-    font-size: 20px;
-    margin-right: 0.07em;
-    color: #bd1919;
-}
+    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,17 +1,54 @@
-import { Icon, ProgressIndicator, Spinner, SpinnerSize, Stack, TooltipHost } from "@fluentui/react";
+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 { ConnectionStatusType } from "../../../Common/Constants";
+import "../../../../less/hostedexplorer.less";
+import { ConnectionStatusType, ContainerStatusType, Notebook } from "../../../Common/Constants";
+import Explorer from "../../Explorer";
 import { useNotebook } from "../../Notebook/useNotebook";
 import "../CommandBar/ConnectionStatusComponent.less";
-
-export const ConnectionStatus: React.FC = (): JSX.Element => {
+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("locationYellowDot");
-  const [statusColorAnimation, setStatusColorAnimation] = React.useState("ringringYellow");
-  const toolTipContent = "Hosted runtime status.";
+  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;
 
@@ -31,6 +68,15 @@ export const ConnectionStatus: React.FC = (): JSX.Element => {
     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);
@@ -38,40 +84,103 @@ export const ConnectionStatus: React.FC = (): JSX.Element => {
     setMinute("00");
   };
 
-  const connectionInfo = useNotebook((state) => state.connectionInfo);
-  if (!connectionInfo) {
+  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 (
-      <Stack className="connectionStatusContainer" horizontal>
-        <span>Connecting</span>
-        <Spinner size={SpinnerSize.medium} />
-      </Stack>
+      <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.Allocating && isActive === false) {
+
+  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("locationGreenDot");
-    setStatusColorAnimation("ringringGreen");
+    setStatusColor("status connected is-animating");
+    setToolTipContent("Connected to temporary workspace.");
   } else if (connectionInfo && connectionInfo.status === ConnectionStatusType.Failed && isActive === true) {
     stopTimer();
-    setStatusColor("locationRedDot");
-    setStatusColorAnimation("ringringRed");
+    setStatusColor("status failed is-animating");
+    setToolTipContent("Click here to Reconnect to temporary workspace.");
   }
   return (
-    <TooltipHost content={toolTipContent}>
-      <Stack className="connectionStatusContainer" horizontal>
-        <div className="ring-container">
-          <div className={statusColorAnimation}></div>
-          <Icon iconName="LocationDot" className={statusColor} />
-        </div>
-        <span className={connectionInfo.status === ConnectionStatusType.Failed ? "connectionStatusFailed" : ""}>
-          {connectionInfo.status}
-        </span>
-        {connectionInfo.status === ConnectionStatusType.Allocating && isActive && (
-          <ProgressIndicator description={minute + ":" + second} />
-        )}
-      </Stack>
-    </TooltipHost>
+    <>
+      <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 ? " collapsed" : " expanded")}
+            aria-label={"console button" + (this.props.isConsoleExpanded ? " expanded" : " collapsed")}
             aria-expanded={!this.props.isConsoleExpanded}
           >
             <img
@@ -205,7 +205,9 @@ 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">{item.message}</span>
+        <span className="message" role="alert" aria-live="assertive">
+          {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 expanded"
+      aria-label="console button collapsed"
       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 expanded"
+      aria-label="console button collapsed"
       className="expandCollapseButton"
       role="button"
       tabIndex={0}
@@ -340,7 +340,9 @@ 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,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { CellId, CellType, ImmutableNotebook } from "@nteract/commutable";
 // Vendor modules
 import {
@@ -30,6 +31,19 @@ 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;
@@ -41,7 +55,7 @@ export class NotebookComponentBootstrapper {
     this.contentRef = options.contentRef;
   }
 
-  protected static wrapModelIntoContent(name: string, path: string, content: any) {
+  protected static wrapModelIntoContent(name: string, path: string, content: unknown): IWrapModel {
     return {
       name,
       path,
@@ -49,7 +63,7 @@ export class NotebookComponentBootstrapper {
       created: "",
       content,
       format: "json",
-      mimetype: null as any,
+      mimetype: undefined,
       size: 0,
       writeable: false,
       type: "notebook",
@@ -85,7 +99,7 @@ export class NotebookComponentBootstrapper {
     };
   }
 
-  public setContent(name: string, content: any): void {
+  public setContent(name: string, content: unknown): void {
     this.getStore().dispatch(
       actions.fetchContentFulfilled({
         filepath: undefined,
@@ -270,7 +284,6 @@ 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/NotebookContainerClient.ts

@@ -1,20 +1,39 @@
 /**
  * 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);
@@ -35,14 +54,27 @@ export class NotebookContainerClient {
    * Heartbeat: each ping schedules another ping
    */
   private scheduleHeartbeat(delayMs: number): void {
-    setTimeout(() => {
-      this.getMemoryUsage()
-        .then((memoryUsageInfo) => useNotebook.getState().setMemoryUsageInfo(memoryUsageInfo))
-        .finally(() => this.scheduleHeartbeat(Constants.Notebook.heartbeatDelayMs));
+    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);
+        }
+      }
     }, delayMs);
   }
 
-  private async getMemoryUsage(): Promise<DataModels.MemoryUsageInfo> {
+  public async getMemoryUsage(): Promise<DataModels.MemoryUsageInfo> {
     const notebookServerInfo = useNotebook.getState().notebookServerInfo;
     if (!notebookServerInfo || !notebookServerInfo.notebookServerEndpoint) {
       const error = "No server endpoint detected";
@@ -56,6 +88,27 @@ 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`, {
         method: "GET",
         headers: {
@@ -75,31 +128,43 @@ export class NotebookContainerClient {
             freeKB: memoryUsageInfo.free,
           };
         }
+      } else if (response.status === HttpStatusCodes.NotFound) {
+        throw new AbortError(response.statusText);
       }
-      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();
+      throw new Error();
+    } else {
       return undefined;
     }
   }
 
-  public async resetWorkspace(): Promise<void> {
+  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>> {
     this.isResettingWorkspace = true;
+    let response: IResponse<IPhoenixConnectionInfoResult>;
     try {
-      await this._resetWorkspace();
+      response = await this._resetWorkspace();
     } catch (error) {
       Promise.reject(error);
+      return response;
     }
     this.isResettingWorkspace = false;
+    return response;
   }
 
-  private async _resetWorkspace(): Promise<void> {
+  private async _resetWorkspace(): Promise<IResponse<IPhoenixConnectionInfoResult>> {
     const notebookServerInfo = useNotebook.getState().notebookServerInfo;
     if (!notebookServerInfo || !notebookServerInfo.notebookServerEndpoint) {
       const error = "No server endpoint detected";
@@ -107,15 +172,23 @@ export class NotebookContainerClient {
       return Promise.reject(error);
     }
 
-    const { notebookServerEndpoint, authToken } = this.getNotebookServerConfig();
     try {
-      await fetch(`${notebookServerEndpoint}/api/shutdown`, {
-        method: "POST",
-        headers: { Authorization: authToken },
-      });
+      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;
     } catch (error) {
       Logger.logError(getErrorMessage(error), "NotebookContainerClient/resetWorkspace");
-      await this.recreateNotebookWorkspaceAsync();
+      if (!NotebookUtil.isPhoenixEnabled()) {
+        await this.recreateNotebookWorkspaceAsync();
+      }
+      throw error;
     }
   }
 
@@ -147,4 +220,12 @@ 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/NotebookManager.tsx

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

src/Explorer/Notebook/NotebookUtil.ts

@@ -3,6 +3,7 @@ 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";
@@ -328,4 +329,16 @@ 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/notebookClientV2.test.ts

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

src/Explorer/Notebook/useNotebook.ts

@@ -2,10 +2,13 @@ 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";
@@ -14,6 +17,7 @@ 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;
@@ -28,8 +32,11 @@ interface NotebookState {
   myNotebooksContentRoot: NotebookContentItem;
   gitHubNotebooksContentRoot: NotebookContentItem;
   galleryContentRoot: NotebookContentItem;
-  connectionInfo: DataModels.ContainerConnectionInfo;
-  NotebookFolderName: string;
+  connectionInfo: ContainerConnectionInfo;
+  notebookFolderName: string;
+  isAllocating: boolean;
+  isRefreshed: boolean;
+  containerStatus: ContainerInfo;
   setIsNotebookEnabled: (isNotebookEnabled: boolean) => void;
   setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => void;
   setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) => void;
@@ -38,6 +45,7 @@ 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;
@@ -45,7 +53,11 @@ interface NotebookState {
   deleteNotebookItem: (item: NotebookContentItem, isGithubTree?: boolean) => void;
   initializeNotebooksTree: (notebookManager: NotebookManager) => Promise<void>;
   initializeGitHubRepos: (pinnedRepos: IPinnedRepo[]) => void;
-  setConnectionInfo: (connectionInfo: DataModels.ContainerConnectionInfo) => 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) => ({
@@ -54,6 +66,7 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
   notebookServerInfo: {
     notebookServerEndpoint: undefined,
     authToken: undefined,
+    forwardingId: undefined,
   },
   sparkClusterConnectionInfo: {
     userName: undefined,
@@ -68,8 +81,17 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
   myNotebooksContentRoot: undefined,
   gitHubNotebooksContentRoot: undefined,
   galleryContentRoot: undefined,
-  connectionInfo: undefined,
-  NotebookFolderName: userContext.features.phoenix ? "My Notebooks Scratch" : "My Notebooks",
+  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) =>
@@ -80,6 +102,7 @@ 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 (
@@ -173,8 +196,10 @@ 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: get().notebookFolderName,
       path: get().notebookBasePath,
       type: NotebookContentItemType.Directory,
     };
@@ -183,11 +208,14 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
       path: "Gallery",
       type: NotebookContentItemType.File,
     };
-    const gitHubNotebooksContentRoot = {
-      name: "GitHub repos",
-      path: "PsuedoDir",
-      type: NotebookContentItemType.Directory,
-    };
+    const gitHubNotebooksContentRoot = notebookManager?.gitHubOAuthService?.isLoggedIn()
+      ? {
+          name: "GitHub repos",
+          path: "PsuedoDir",
+          type: NotebookContentItemType.Directory,
+        }
+      : undefined;
+
     set({
       myNotebooksContentRoot,
       galleryContentRoot,
@@ -249,5 +277,19 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
       set({ gitHubNotebooksContentRoot });
     }
   },
-  setConnectionInfo: (connectionInfo: DataModels.ContainerConnectionInfo) => set({ connectionInfo }),
+  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,6 +4,8 @@ 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" />;
@@ -25,8 +27,9 @@ export const OpenFullScreen: React.FunctionComponent = () => {
           <DefaultButton
             onClick={() => {
               copyToClipboard(readWriteUrl);
+              setIsReadWriteUrlCopy(true);
             }}
-            text="Copy"
+            text={isReadWriteUrlCopy ? "Copied" : "Copy"}
             iconProps={{ iconName: "Copy" }}
           />
           <PrimaryButton
@@ -41,9 +44,10 @@ export const OpenFullScreen: React.FunctionComponent = () => {
         <Stack horizontal tokens={{ childrenGap: 10 }}>
           <DefaultButton
             onClick={() => {
+              setIsReadUrlCopy(true);
               copyToClipboard(readUrl);
             }}
-            text="Copy"
+            text={isReadUrlCopy ? "Copied" : "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 * 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 { 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,6 +92,7 @@ export interface AddCollectionPanelState {
   errorMessage: string;
   showErrorDetails: boolean;
   isExecuting: boolean;
+  isThroughputCapExceeded: boolean;
 }
 
 export class AddCollectionPanel extends React.Component<AddCollectionPanelProps, AddCollectionPanelState> {
@@ -122,6 +123,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       errorMessage: "",
       showErrorDetails: false,
       isExecuting: false,
+      isThroughputCapExceeded: false,
     };
   }
 
@@ -161,7 +163,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   true
                 ).toLocaleLowerCase()}.`}
               >
-                <Icon iconName="Info" className="panelInfoIcon" />
+                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
               </TooltipHost>
             </Stack>
 
@@ -210,6 +212,7 @@ 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 })
@@ -236,7 +239,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                         true
                       ).toLocaleLowerCase()} within the database.`}
                     >
-                      <Icon iconName="Info" className="panelInfoIcon" />
+                      <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
                     </TooltipHost>
                   </Stack>
                 )}
@@ -248,6 +251,9 @@ 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)}
                   />
                 )}
@@ -279,7 +285,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" />
+                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
               </TooltipHost>
             </Stack>
 
@@ -362,7 +368,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" />
+                    <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
                   </TooltipHost>
                 </Stack>
 
@@ -409,7 +415,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   directionalHint={DirectionalHint.bottomLeftEdge}
                   content={this.getPartitionKeyTooltipText()}
                 >
-                  <Icon iconName="Info" className="panelInfoIcon" />
+                  <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
                 </TooltipHost>
               </Stack>
 
@@ -462,12 +468,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" />
+                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
               </TooltipHost>
             </Stack>
           )}
@@ -479,6 +485,9 @@ 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;
               }}
@@ -497,7 +506,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" />
+                  <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
                 </TooltipHost>
               </Stack>
 
@@ -560,7 +569,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   directionalHint={DirectionalHint.bottomLeftEdge}
                   content={this.getAnalyticalStorageTooltipContent()}
                 >
-                  <Icon iconName="Info" className="panelInfoIcon" />
+                  <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
                 </TooltipHost>
               </Stack>
 
@@ -637,7 +646,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" />
+                        <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
                       </TooltipHost>
                     </Stack>
 
@@ -658,7 +667,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
                 {userContext.apiType === "SQL" && (
                   <Checkbox
-                    label="My partition key is larger than 100 bytes"
+                    label="My partition key is larger than 101 bytes"
                     checked={this.state.useHashV2}
                     styles={{
                       text: { fontSize: 12 },
@@ -675,7 +684,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
           )}
         </div>
 
-        <PanelFooterComponent buttonLabel="OK" />
+        <PanelFooterComponent buttonLabel="OK" isButtonDisabled={this.state.isThroughputCapExceeded} />
 
         {this.state.isExecuting && <PanelLoadingScreen />}
       </form>
@@ -998,7 +1007,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.partitionKey.trim();
+    let partitionKeyString = this.state.isSharded ? this.state.partitionKey.trim() : undefined;
 
     if (userContext.apiType === "Tables") {
       // Table require fixed Database: TablesDB, and fixed Partition Key: /'$pk'
@@ -1010,10 +1019,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,10 +23,12 @@ 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;
@@ -50,6 +52,7 @@ 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;
 
@@ -77,6 +80,9 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
       dataExplorerArea: Constants.Areas.ContextualPane,
     };
     TelemetryProcessor.trace(Action.CreateDatabase, ActionModifiers.Open, addDatabasePaneOpenMessage);
+    if (buttonElement) {
+      buttonElement.focus();
+    }
   }, []);
 
   const onSubmit = () => {
@@ -166,6 +172,7 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
     formError: formErrors,
     isExecuting,
     submitButtonText: "OK",
+    isSubmitButtonDisabled: isThroughputCapExceeded,
     onSubmit,
   };
 
@@ -236,6 +243,7 @@ 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,6 +4,7 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
 <RightPaneForm
   formError=""
   isExecuting={false}
+  isSubmitButtonDisabled={false}
   onSubmit={[Function]}
   submitButtonText="OK"
 >
@@ -92,6 +93,7 @@ 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 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 * 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,6 +43,7 @@ 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 = {
@@ -149,6 +150,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
     formError,
     isExecuting,
     submitButtonText: "OK",
+    isSubmitButtonDisabled: isThroughputCapExceeded,
     onSubmit,
   };
 
@@ -198,6 +200,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
             <Stack className="panelGroupSpacing">
               <TextField
                 aria-required="true"
+                required={true}
                 autoComplete="off"
                 styles={getTextFieldStyles()}
                 pattern="[^/?#\\]*[^/?# \\]"
@@ -261,6 +264,7 @@ 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)}
             />
           )}
@@ -285,6 +289,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
               underlined
               styles={getTextFieldStyles({ fontSize: 12, width: 150 })}
               aria-required="true"
+              required={true}
               ariaLabel="addCollection-tableId"
               autoComplete="off"
               pattern="[^/?#\\]*[^/?# \\]"
@@ -332,6 +337,7 @@ 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

@@ -77,7 +77,7 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
           selectedLocation.repo
         )} - ${selectedLocation.branch}`;
       } else if (selectedLocation.type === "MyNotebooks" && userContext.features.phoenix) {
-        destination = "My Notebooks Scratch";
+        destination = useNotebook.getState().notebookFolderName;
       }
 
       clearMessage = NotificationConsoleUtils.logConsoleProgress(`Copying ${name} to ${destination}`);

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx

@@ -49,8 +49,8 @@ export const CopyNotebookPaneComponent: FunctionComponent<CopyNotebookPaneProps>
     const options: IDropdownOption[] = [];
     options.push({
       key: "MyNotebooks-Item",
-      text: useNotebook.getState().NotebookFolderName,
-      title: useNotebook.getState().NotebookFolderName,
+      text: useNotebook.getState().notebookFolderName,
+      title: useNotebook.getState().notebookFolderName,
       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 { 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 { 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,6 +108,8 @@ 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">
@@ -123,6 +125,7 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
               onChange={(event, newInput?: string) => {
                 setInputCollectionName(newInput);
               }}
+              ariaLabel={confirmContainer}
             />
           </div>
           {shouldRecordFeedback() && (
@@ -142,6 +145,7 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
                 onChange={(event, newInput?: string) => {
                   setDeleteCollectionFeedback(newInput);
                 }}
+                ariaLabel={reasonInfo}
               />
             </div>
           )}

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

@@ -40,6 +40,7 @@ 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]}
@@ -53,6 +54,7 @@ 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"
@@ -346,6 +348,7 @@ 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"
@@ -366,18 +369,21 @@ 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={
@@ -657,6 +663,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
             >
               <CustomizedDefaultButton
                 ariaLabel="OK"
+                disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
                 primary={true}
@@ -938,6 +945,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               >
                 <DefaultButton
                   ariaLabel="OK"
+                  disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
                   primary={true}
@@ -1220,6 +1228,7 @@ 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 { 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 { 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,7 +118,8 @@ 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} />}
@@ -133,6 +134,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
             onChange={(event, newInput?: string) => {
               setDatabaseInput(newInput);
             }}
+            ariaLabel={confirmDatabase}
           />
         </div>
         {isLastNonEmptyDatabase() && (
@@ -151,6 +153,7 @@ 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}>
+          <Stack horizontal onClick={addNewParamAtLastIndex} tabIndex={0}>
             <Image {...imageProps} src={AddPropertyIcon} alt="Add param" />
             <Text className="addNewParamStyle">Add New Param</Text>
           </Stack>

src/Explorer/Panes/ExecuteSprocParamsPane/InputParameter.tsx

@@ -59,30 +59,36 @@ 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 && (
           <>
-            <Image
-              {...imageProps}
-              src={EntityCancelIcon}
-              alt="Delete param"
-              id="deleteparam"
-              onClick={onDeleteParamKeyPress}
-            />
-            <Image
-              {...imageProps}
-              src={AddPropertyIcon}
-              alt="Add param"
-              id="addparam"
-              onClick={onAddNewParamKeyPress}
-            />
+            <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>
           </>
         )}
       </Stack>

src/Explorer/Panes/GitHubReposPanel/GitHubReposPanel.tsx

@@ -35,6 +35,9 @@ 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;
@@ -116,6 +119,8 @@ 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");
       }
@@ -207,6 +212,14 @@ 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");
@@ -298,6 +311,17 @@ 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];
     }
@@ -374,6 +398,7 @@ 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,7 +23,13 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
             "isTabsContentExpanded": [Function],
             "onRefreshDatabasesKeyPress": [Function],
             "onRefreshResourcesClick": [Function],
-            "phoenixClient": PhoenixClient {},
+            "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;
-  height: 100%;
+  min-height: 100%;
 
   .panelMainContent {
     flex-grow: 1;
     padding: 0 34px;
     margin: 20px 0;
-    overflow: auto;
+    overflow-x: hidden;
 
     & > :not(.collapsibleSection) {
       margin-bottom: @DefaultSpace;

src/Explorer/Panes/PanelFooterComponent.tsx

@@ -3,12 +3,20 @@ 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} />
+    <PrimaryButton
+      type="submit"
+      id="sidePanelOkButton"
+      text={buttonLabel}
+      ariaLabel={buttonLabel}
+      disabled={!!isButtonDisabled}
+    />
   </div>
 );

src/Explorer/Panes/PanelInfoErrorComponent.tsx

@@ -33,7 +33,13 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
     <Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
       {icon}
       <span className="panelWarningErrorDetailsLinkContainer">
-        <Text className="panelWarningErrorMessage" variant="small" aria-label="message">
+        <Text
+          role="alert"
+          aria-live="assertive"
+          aria-label={message}
+          className="panelWarningErrorMessage"
+          variant="small"
+        >
           {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.getByLabelText("message").innerHTML).toEqual("file already Exist");
+    expect(screen.getByRole("alert").innerHTML).toEqual("file already Exist");
   });
 });

src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx

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

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

@@ -14,18 +14,21 @@ 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={
@@ -305,6 +308,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
           >
             <CustomizedDefaultButton
               ariaLabel="Load"
+              disabled={false}
               id="sidePanelOkButton"
               onRenderDescription={[Function]}
               primary={true}
@@ -586,6 +590,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
             >
               <DefaultButton
                 ariaLabel="Load"
+                disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
                 primary={true}
@@ -868,6 +873,7 @@ 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 } from "@fluentui/react";
+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 React, { FunctionComponent, MouseEvent, useState } from "react";
-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 { 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,20 +113,44 @@ 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 pageOptionsPart">
-              <div className="settingsSectionLabel">
-                Page options
+            <div className="settingsSectionPart">
+              <Stack horizontal>
+                <Text id="pageOptions" className="settingsSectionLabel" variant="small">
+                  Page options
+                </Text>
                 <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>
-              </div>
-              <ChoiceGroup selectedKey={pageOption} options={pageOptionList} onChange={handleOnPageOptionChange} />
+              </Stack>
+              <ChoiceGroup
+                ariaLabelledBy="pageOptions"
+                selectedKey={pageOption}
+                options={pageOptionList}
+                styles={choiceButtonStyles}
+                onChange={handleOnPageOptionChange}
+              />
             </div>
             <div className="tabs settingsSectionPart">
               {isCustomPageOptionSelected() && (
@@ -195,7 +219,6 @@ 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,17 +14,24 @@ exports[`Settings Pane should render Default properly 1`] = `
       className="settingsSection"
     >
       <div
-        className="settingsSectionPart pageOptionsPart"
+        className="settingsSectionPart"
       >
-        <div
-          className="settingsSectionLabel"
+        <Stack
+          horizontal={true}
         >
-          Page options
+          <Text
+            className="settingsSectionLabel"
+            id="pageOptions"
+            variant="small"
+          >
+            Page options
+          </Text>
           <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>
-        </div>
+        </Stack>
         <StyledChoiceGroup
+          ariaLabelledBy="pageOptions"
           onChange={[Function]}
           options={
             Array [
@@ -39,6 +46,23 @@ 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
@@ -123,7 +147,6 @@ 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 * as ViewModels from "../../../Contracts/ViewModels";
-import { useTabs } from "../../../hooks/useTabs";
-import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
+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,7 +13,13 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       "isTabsContentExpanded": [Function],
       "onRefreshDatabasesKeyPress": [Function],
       "onRefreshResourcesClick": [Function],
-      "phoenixClient": PhoenixClient {},
+      "phoenixClient": PhoenixClient {
+        "retryOptions": Object {
+          "maxTimeout": 5000,
+          "minTimeout": 5000,
+          "retries": 3,
+        },
+      },
       "provideFeedbackEmail": [Function],
       "queriesClient": QueriesClient {
         "container": [Circular],
@@ -675,18 +681,21 @@ 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={
@@ -966,6 +975,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="Create"
+                disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
                 primary={true}
@@ -1247,6 +1257,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
               >
                 <DefaultButton
                   ariaLabel="Create"
+                  disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
                   primary={true}
@@ -1529,6 +1540,7 @@ 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,6 +29,7 @@ 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,8 +128,9 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
               label="Available Columns"
               checked={isAvailableColumnChecked}
               onChange={availableColumnsCheckboxClick}
+              ariaPositionInSet={0}
             />
-            {columnOptions.map((column) => {
+            {columnOptions.map((column, index) => {
               return (
                 <Checkbox
                   label={column.columnName}
@@ -137,6 +138,7 @@ 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,12 +37,14 @@ 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"
@@ -328,6 +330,7 @@ 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}
@@ -646,6 +649,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
               </CheckboxBase>
             </StyledCheckboxBase>
             <StyledCheckboxBase
+              ariaPositionInSet={1}
               checked={true}
               disabled={false}
               key=""
@@ -653,6 +657,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
               onChange={[Function]}
             >
               <CheckboxBase
+                ariaPositionInSet={1}
                 checked={true}
                 disabled={false}
                 label=""
@@ -939,6 +944,7 @@ 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}
@@ -1256,18 +1262,21 @@ 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={
@@ -1547,6 +1556,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="OK"
+                disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
                 primary={true}
@@ -1828,6 +1838,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
               >
                 <DefaultButton
                   ariaLabel="OK"
+                  disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
                   primary={true}
@@ -2110,6 +2121,7 @@ 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,6 +33,7 @@ const {
   Inet,
   Smallint,
   Tinyint,
+  Timestamp,
 } = TableConstants.CassandraType;
 export const cassandraOptions = [
   { key: Text, text: Text },
@@ -50,6 +51,7 @@ 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,18 +356,21 @@ 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={
@@ -647,6 +650,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="Add Entity"
+                disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
                 primary={true}
@@ -928,6 +932,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
               >
                 <DefaultButton
                   ariaLabel="Add Entity"
+                  disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
                   primary={true}
@@ -1210,6 +1215,7 @@ 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,18 +357,21 @@ 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={
@@ -648,6 +651,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="Update"
+                disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
                 primary={true}
@@ -929,6 +933,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
               >
                 <DefaultButton
                   ariaLabel="Update"
+                  disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
                   primary={true}
@@ -1211,6 +1216,7 @@ 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}

src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx

@@ -1,7 +1,7 @@
+import { Upload } from "Common/Upload/Upload";
+import { useSidePanel } from "hooks/useSidePanel";
 import React, { ChangeEvent, FunctionComponent, useState } from "react";
-import { Upload } from "../../../Common/Upload/Upload";
-import { useSidePanel } from "../../../hooks/useSidePanel";
-import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
+import { logConsoleError, logConsoleInfo, logConsoleProgress } from "Utils/NotificationConsoleUtils";
 import { NotebookContentItem } from "../../Notebook/NotebookContentItem";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 

src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx

@@ -1,8 +1,8 @@
 import { DetailsList, DetailsListLayoutMode, IColumn, SelectionMode } from "@fluentui/react";
+import { Upload } from "Common/Upload/Upload";
+import { UploadDetailsRecord } from "Contracts/ViewModels";
 import React, { ChangeEvent, FunctionComponent, useState } from "react";
-import { Upload } from "../../../Common/Upload/Upload";
-import { UploadDetailsRecord } from "../../../Contracts/ViewModels";
-import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
+import { logConsoleError } from "Utils/NotificationConsoleUtils";
 import { getErrorMessage } from "../../Tables/Utilities";
 import { useSelectedNode } from "../../useSelectedNode";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";

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

@@ -327,13 +327,17 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
               key=".0:$.1"
             >
               <Text
-                aria-label="message"
+                aria-label="Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources."
+                aria-live="assertive"
                 className="panelWarningErrorMessage"
+                role="alert"
                 variant="small"
               >
                 <span
-                  aria-label="message"
+                  aria-label="Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources."
+                  aria-live="assertive"
                   className="panelWarningErrorMessage css-56"
+                  role="alert"
                 >
                   Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
                 </span>
@@ -363,6 +367,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             </span>
           </Text>
           <StyledTextFieldBase
+            ariaLabel="Confirm by typing the database id"
             autoFocus={true}
             id="confirmDatabaseId"
             onChange={[Function]}
@@ -375,6 +380,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             }
           >
             <TextFieldBase
+              ariaLabel="Confirm by typing the database id"
               autoFocus={true}
               deferredValidationTime={200}
               id="confirmDatabaseId"
@@ -667,6 +673,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                   >
                     <input
                       aria-invalid={false}
+                      aria-label="Confirm by typing the database id"
                       autoFocus={true}
                       className="ms-TextField-field field-60"
                       id="confirmDatabaseId"
@@ -707,6 +714,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             </span>
           </Text>
           <StyledTextFieldBase
+            ariaLabel="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
             id="deleteDatabaseFeedbackInput"
             multiline={true}
             onChange={[Function]}
@@ -720,6 +728,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             }
           >
             <TextFieldBase
+              ariaLabel="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
               deferredValidationTime={200}
               id="deleteDatabaseFeedbackInput"
               multiline={true}
@@ -1013,6 +1022,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                   >
                     <textarea
                       aria-invalid={false}
+                      aria-label="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
                       className="ms-TextField-field field-71"
                       id="deleteDatabaseFeedbackInput"
                       onBlur={[Function]}
@@ -1031,18 +1041,21 @@ exports[`Delete Database Confirmation Pane Should call delete database 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={
@@ -1322,6 +1335,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             >
               <CustomizedDefaultButton
                 ariaLabel="OK"
+                disabled={false}
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
                 primary={true}
@@ -1603,6 +1617,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
               >
                 <DefaultButton
                   ariaLabel="OK"
+                  disabled={false}
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
                   primary={true}
@@ -1885,6 +1900,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                   <BaseButton
                     ariaLabel="OK"
                     baseClassName="ms-Button"
+                    disabled={false}
                     id="sidePanelOkButton"
                     onRenderDescription={[Function]}
                     primary={true}

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -307,10 +307,18 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         iconSrc: AddDatabaseIcon,
         title: "New " + getDatabaseName(),
         description: undefined,
-        onClick: () =>
+        onClick: async () => {
+          const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
+          if (throughputCap && throughputCap !== -1) {
+            await useDatabases.getState().loadAllOffers();
+          }
           useSidePanel
             .getState()
-            .openSidePanel("New " + getDatabaseName(), <AddDatabasePanel explorer={this.container} />),
+            .openSidePanel(
+              "New " + getDatabaseName(),
+              <AddDatabasePanel explorer={this.container} buttonElement={document.activeElement as HTMLElement} />
+            );
+        },
       });
     }
 

src/Explorer/Tables/Constants.ts

@@ -19,6 +19,7 @@ export const CassandraType = {
   Float: "Float",
   Int: "Int",
   Text: "Text",
+  Timestamp: "Timestamp",
   Uuid: "Uuid",
   Varchar: "Varchar",
   Varint: "Varint",

src/Explorer/Tables/DataTable/DataTableBuilder.ts

@@ -19,7 +19,7 @@ export function createDataTable($dataTableElem: JQuery, settings: any): DataTabl
  * @return The given settings with all columns having a rendering function
  */
 function applyDefaultRendering(settings: any): DataTables.SettingsLegacy {
-  let tableColumns: DataTables.ColumnLegacy[] = null;
+  var tableColumns: DataTables.ColumnLegacy[] = null;
 
   if (settings.aoColumns) {
     tableColumns = settings.aoColumns;
@@ -34,7 +34,7 @@ function applyDefaultRendering(settings: any): DataTables.SettingsLegacy {
     return settings;
   }
 
-  for (let i = 0; i < tableColumns.length; i++) {
+  for (var i = 0; i < tableColumns.length; i++) {
     // the column does not have a render function
     if (!tableColumns[i].mRender) {
       tableColumns[i].mRender = defaultDataRender;