Merge branch 'master' into accessibility-sev-3-defects

This reverts commit a4e60f106c.

less/documentDB.less

@@ -2577,7 +2577,7 @@ a:link {
   font-style: italic;
 }
 .querydropdown.placeholderVisible::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-  color: #767474;
+  color: #403f3f;
   opacity: 1; 
 }
 

less/resourceTree.less

@@ -5,17 +5,12 @@
   overflow: auto;
 
   .databaseHeader {
-    padding: 1px;
     font-size: 14px;
   }
 
   .collectionHeader {
     font-size: 12px;
   }
-
-  .loadMoreHeader {
-    color: RGB(5, 99, 193);
-  }
 }
 
 .notebookResourceTree {
@@ -28,4 +23,6 @@
   .clickDisabled {
     pointer-events: none;
   }
-}
+}
+
+

src/Common/Constants.ts

@@ -141,7 +141,7 @@ export class Queries {
   public static UnlimitedPageOption: string = "unlimited";
   public static itemsPerPage: number = 100;
   public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
-  public static containersPerPage: number = 50;
+
   public static QueryEditorMinHeightRatio: number = 0.1;
   public static QueryEditorMaxHeightRatio: number = 0.4;
   public static readonly DefaultMaxDegreeOfParallelism = 6;

src/Common/EntityValue.tsx

@@ -55,6 +55,7 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
       label={entityValueLabel && entityValueLabel}
       className="addEntityTextField"
       id="entityValueId"
+      autoFocus
       disabled={isEntityValueDisable}
       type={entityValueType}
       placeholder={entityValuePlaceholder}

src/Common/TableEntity.tsx

@@ -7,7 +7,7 @@ import {
   IStackTokens,
   Stack,
   TextField,
-  TooltipHost
+  TooltipHost,
 } from "@fluentui/react";
 import React, { FunctionComponent } from "react";
 import DeleteIcon from "../../images/delete.svg";
@@ -136,21 +136,18 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
           onEntityTimeValueChange={onEntityTimeValueChange}
         />
         {!isEntityValueDisable && (
-          
           <TooltipHost content="Edit property" id="editTooltip">
             <div tabIndex={0}>
               <Image
                 {...imageProps}
                 src={EditIcon}
                 alt="editEntity"
-                id="editEntity"
                 onClick={onEditEntity}
                 tabIndex={0}
                 onKeyPress={handleKeyPress}
               />
             </div>
           </TooltipHost>
-          
         )}
         {isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (
           <TooltipHost content="Delete property" id="deleteTooltip">

src/Common/dataAccess/readCollections.ts

@@ -1,4 +1,3 @@
-import { Queries } from "Common/Constants";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
@@ -32,35 +31,6 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
   }
 }
 
-export async function readCollectionsWithPagination(
-  databaseId: string,
-  continuationToken?: string
-): Promise<DataModels.CollectionsWithPagination> {
-  const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
-  try {
-    const sdkResponse = await client()
-      .database(databaseId)
-      .containers.query(
-        { query: "SELECT * FROM c" },
-        {
-          continuationToken,
-          maxItemCount: Queries.containersPerPage,
-        }
-      )
-      .fetchNext();
-    const collectionsWithPagination: DataModels.CollectionsWithPagination = {
-      collections: sdkResponse.resources as DataModels.Collection[],
-      continuationToken: sdkResponse.continuationToken,
-    };
-    return collectionsWithPagination;
-  } catch (error) {
-    handleError(error, "ReadCollections", `Error while querying containers for database ${databaseId}`);
-    throw error;
-  } finally {
-    clearMessage();
-  }
-}
-
 async function readCollectionsWithARM(databaseId: string): Promise<DataModels.Collection[]> {
   let rpResponse;
 

src/Contracts/DataModels.ts

@@ -156,11 +156,6 @@ export interface Collection extends Resource {
   requestSchema?: () => void;
 }
 
-export interface CollectionsWithPagination {
-  continuationToken?: string;
-  collections?: Collection[];
-}
-
 export interface Database extends Resource {
   collections?: Collection[];
 }

src/Contracts/ViewModels.ts

@@ -87,13 +87,13 @@ export interface Database extends TreeNode {
   isDatabaseExpanded: ko.Observable<boolean>;
   isDatabaseShared: ko.Computed<boolean>;
   isSampleDB?: boolean;
-  collectionsContinuationToken?: string;
+
   selectedSubnodeKind: ko.Observable<CollectionTabKind>;
 
   expandDatabase(): Promise<void>;
   collapseDatabase(): void;
 
-  loadCollections(restart?: boolean): Promise<void>;
+  loadCollections(): Promise<void>;
   findCollectionWithId(collectionId: string): Collection;
   openAddCollection(database: Database, event: MouseEvent): void;
   onSettingsClick: () => void;

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

@@ -23,12 +23,12 @@ describe("ThroughputInput Pane", () => {
   });
 
   it("should switch mode properly", () => {
-    wrapper.find('[aria-label="Manual database throughput"]').simulate("change");
+    wrapper.find('[id="Manual-input"]').simulate("change");
     expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe(
       "Container throughput (400 - unlimited RU/s)"
     );
 
-    wrapper.find('[aria-label="Autoscale database throughput"]').simulate("change");
+    wrapper.find('[id="Autoscale-input"]').simulate("change");
     expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe("Container throughput (autoscale)");
   });
 });

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -189,7 +189,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           <input
             id="Autoscale-input"
             className="throughputInputRadioBtn"
-            aria-label="Autoscale database throughput"
+            aria-label={`Autoscale` + " " + getThroughputLabelText()}
             aria-required={true}
             checked={isAutoscaleSelected}
             type="radio"
@@ -201,20 +201,20 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
             Autoscale
           </label>
 
-        <input
+          <input
-          id="Manual-input"
+            id="Manual-input"
-          className="throughputInputRadioBtn"
+            className="throughputInputRadioBtn"
-          aria-label="Manual database throughput"
+            aria-label={`Manual` + " " + getThroughputLabelText()}
-          checked={!isAutoscaleSelected}
+            checked={!isAutoscaleSelected}
-          type="radio"
+            type="radio"
-          aria-required={true}
+            aria-required={true}
-          role="radio"
+            role="radio"
-          tabIndex={0}
+            tabIndex={0}
-          onChange={(e) => handleOnChangeMode(e, "Manual")}
+            onChange={(e) => handleOnChangeMode(e, "Manual")}
-        />
+          />
-        <label className="throughputInputRadioBtnLabel" htmlFor="Manual-input">
+          <label className="throughputInputRadioBtnLabel" htmlFor="Manual-input">
-          Manual
+            Manual
-        </label>
+          </label>
         </div>
       </Stack>
 
@@ -222,13 +222,15 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
         <Stack className="throughputInputSpacing">
           <Text variant="small" aria-label="capacity calculator of azure cosmos db">
             Estimate your required RU/s with{" "}
-            <Link
+            <u style={{ color: "#0078D4" }}>
-              target="_blank"
+              <Link
-              href="https://cosmos.azure.com/capacitycalculator/"
+                target="_blank"
-              aria-label="capacity calculator of azure cosmos db"
+                href="https://cosmos.azure.com/capacitycalculator/"
-            >
+                aria-label="capacity calculator of azure cosmos db"
-              capacity calculator
+              >
-            </Link>
+                capacity calculator
+              </Link>
+            </u>
             .
           </Text>
 
@@ -249,8 +251,9 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
             onChange={(event, newInput?: string) => onThroughputValueChange(newInput)}
             step={AutoPilotUtils.autoPilotIncrementStep}
             min={AutoPilotUtils.autoPilotThroughput1K}
+            max={!isSharded ? 10000 : 9000000000000}
             value={throughput.toString()}
-            aria-label="Max request units per second"
+            ariaLabel="Max request units per second"
             required={true}
             errorMessage={throughputError}
           />
@@ -270,9 +273,11 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
         <Stack className="throughputInputSpacing">
           <Text variant="small" aria-label="ruDescription">
             Estimate your required RU/s with&nbsp;
-            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="capacityLink">
+            <u style={{ color: "#0078D4" }}>
-              capacity calculator
+              <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="capacityLink">
-            </Link>
+                capacity calculator
+              </Link>
+            </u>
             .
           </Text>
 
@@ -295,7 +300,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
               min={SharedConstants.CollectionCreation.DefaultCollectionRUs400}
               max={userContext.isTryCosmosDBSubscription ? Constants.TryCosmosExperience.maxRU : Infinity}
               value={throughput.toString()}
-              aria-label="Max request units per second"
+              ariaLabel="Max request units per second"
               required={true}
               errorMessage={throughputError}
             />

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

@@ -347,14 +347,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                     ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                     className="panelInfoIcon"
                     iconName="Info"
-                    role="tooltip"
                     tabIndex={0}
                   >
                     <IconBase
                       ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                       className="panelInfoIcon"
                       iconName="Info"
-                      role="tooltip"
                       styles={[Function]}
                       tabIndex={0}
                       theme={
@@ -635,7 +633,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         aria-label="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                         className="panelInfoIcon root-57"
                         data-icon-name="Info"
-                        role="tooltip"
+                        role="img"
                         tabIndex={0}
                       >
                         
@@ -661,7 +659,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           role="radiogroup"
         >
           <input
-            aria-label="Autoscale database throughput"
+            aria-label="Autoscale Container throughput (autoscale)"
             aria-required={true}
             checked={true}
             className="throughputInputRadioBtn"
@@ -678,7 +676,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
             Autoscale
           </label>
           <input
-            aria-label="Manual database throughput"
+            aria-label="Manual Container throughput (autoscale)"
             aria-required={true}
             checked={false}
             className="throughputInputRadioBtn"
@@ -714,301 +712,309 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           >
             Estimate your required RU/s with
              
-            <StyledLinkBase
+            <u
-              aria-label="capacity calculator of azure cosmos db"
+              style={
-              href="https://cosmos.azure.com/capacitycalculator/"
+                Object {
-              target="_blank"
+                  "color": "#0078D4",
+                }
+              }
             >
-              <LinkBase
+              <StyledLinkBase
                 aria-label="capacity calculator of azure cosmos db"
                 href="https://cosmos.azure.com/capacitycalculator/"
-                styles={[Function]}
                 target="_blank"
-                theme={
-                  Object {
-                    "disableGlobalClassNames": false,
-                    "effects": Object {
-                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                      "roundedCorner2": "2px",
-                      "roundedCorner4": "4px",
-                      "roundedCorner6": "6px",
-                    },
-                    "fonts": Object {
-                      "large": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "18px",
-                        "fontWeight": 400,
-                      },
-                      "medium": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "14px",
-                        "fontWeight": 400,
-                      },
-                      "mediumPlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "16px",
-                        "fontWeight": 400,
-                      },
-                      "mega": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "68px",
-                        "fontWeight": 600,
-                      },
-                      "small": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "12px",
-                        "fontWeight": 400,
-                      },
-                      "smallPlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "12px",
-                        "fontWeight": 400,
-                      },
-                      "superLarge": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "42px",
-                        "fontWeight": 600,
-                      },
-                      "tiny": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "10px",
-                        "fontWeight": 400,
-                      },
-                      "xLarge": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "20px",
-                        "fontWeight": 600,
-                      },
-                      "xLargePlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "24px",
-                        "fontWeight": 600,
-                      },
-                      "xSmall": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "10px",
-                        "fontWeight": 400,
-                      },
-                      "xxLarge": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "28px",
-                        "fontWeight": 600,
-                      },
-                      "xxLargePlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "32px",
-                        "fontWeight": 600,
-                      },
-                    },
-                    "isInverted": false,
-                    "palette": Object {
-                      "accent": "#0078d4",
-                      "black": "#000000",
-                      "blackTranslucent40": "rgba(0,0,0,.4)",
-                      "blue": "#0078d4",
-                      "blueDark": "#002050",
-                      "blueLight": "#00bcf2",
-                      "blueMid": "#00188f",
-                      "green": "#107c10",
-                      "greenDark": "#004b1c",
-                      "greenLight": "#bad80a",
-                      "magenta": "#b4009e",
-                      "magentaDark": "#5c005c",
-                      "magentaLight": "#e3008c",
-                      "neutralDark": "#201f1e",
-                      "neutralLight": "#edebe9",
-                      "neutralLighter": "#f3f2f1",
-                      "neutralLighterAlt": "#faf9f8",
-                      "neutralPrimary": "#323130",
-                      "neutralPrimaryAlt": "#3b3a39",
-                      "neutralQuaternary": "#d2d0ce",
-                      "neutralQuaternaryAlt": "#e1dfdd",
-                      "neutralSecondary": "#605e5c",
-                      "neutralSecondaryAlt": "#8a8886",
-                      "neutralTertiary": "#a19f9d",
-                      "neutralTertiaryAlt": "#c8c6c4",
-                      "orange": "#d83b01",
-                      "orangeLight": "#ea4300",
-                      "orangeLighter": "#ff8c00",
-                      "purple": "#5c2d91",
-                      "purpleDark": "#32145a",
-                      "purpleLight": "#b4a0ff",
-                      "red": "#e81123",
-                      "redDark": "#a4262c",
-                      "teal": "#008272",
-                      "tealDark": "#004b50",
-                      "tealLight": "#00b294",
-                      "themeDark": "#005a9e",
-                      "themeDarkAlt": "#106ebe",
-                      "themeDarker": "#004578",
-                      "themeLight": "#c7e0f4",
-                      "themeLighter": "#deecf9",
-                      "themeLighterAlt": "#eff6fc",
-                      "themePrimary": "#0078d4",
-                      "themeSecondary": "#2b88d8",
-                      "themeTertiary": "#71afe5",
-                      "white": "#ffffff",
-                      "whiteTranslucent40": "rgba(255,255,255,.4)",
-                      "yellow": "#ffb900",
-                      "yellowDark": "#d29200",
-                      "yellowLight": "#fff100",
-                    },
-                    "rtl": undefined,
-                    "semanticColors": Object {
-                      "accentButtonBackground": "#0078d4",
-                      "accentButtonText": "#ffffff",
-                      "actionLink": "#323130",
-                      "actionLinkHovered": "#201f1e",
-                      "blockingBackground": "#FDE7E9",
-                      "blockingIcon": "#FDE7E9",
-                      "bodyBackground": "#ffffff",
-                      "bodyBackgroundChecked": "#edebe9",
-                      "bodyBackgroundHovered": "#f3f2f1",
-                      "bodyDivider": "#edebe9",
-                      "bodyFrameBackground": "#ffffff",
-                      "bodyFrameDivider": "#edebe9",
-                      "bodyStandoutBackground": "#faf9f8",
-                      "bodySubtext": "#605e5c",
-                      "bodyText": "#323130",
-                      "bodyTextChecked": "#000000",
-                      "buttonBackground": "#ffffff",
-                      "buttonBackgroundChecked": "#c8c6c4",
-                      "buttonBackgroundCheckedHovered": "#edebe9",
-                      "buttonBackgroundDisabled": "#f3f2f1",
-                      "buttonBackgroundHovered": "#f3f2f1",
-                      "buttonBackgroundPressed": "#edebe9",
-                      "buttonBorder": "#8a8886",
-                      "buttonBorderDisabled": "#f3f2f1",
-                      "buttonText": "#323130",
-                      "buttonTextChecked": "#201f1e",
-                      "buttonTextCheckedHovered": "#000000",
-                      "buttonTextDisabled": "#a19f9d",
-                      "buttonTextHovered": "#201f1e",
-                      "buttonTextPressed": "#201f1e",
-                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                      "cardStandoutBackground": "#ffffff",
-                      "defaultStateBackground": "#faf9f8",
-                      "disabledBackground": "#f3f2f1",
-                      "disabledBodySubtext": "#c8c6c4",
-                      "disabledBodyText": "#a19f9d",
-                      "disabledBorder": "#c8c6c4",
-                      "disabledSubtext": "#d2d0ce",
-                      "disabledText": "#a19f9d",
-                      "errorBackground": "#FDE7E9",
-                      "errorIcon": "#A80000",
-                      "errorText": "#a4262c",
-                      "focusBorder": "#605e5c",
-                      "infoBackground": "#f3f2f1",
-                      "infoIcon": "#605e5c",
-                      "inputBackground": "#ffffff",
-                      "inputBackgroundChecked": "#0078d4",
-                      "inputBackgroundCheckedHovered": "#005a9e",
-                      "inputBorder": "#605e5c",
-                      "inputBorderHovered": "#323130",
-                      "inputFocusBorderAlt": "#0078d4",
-                      "inputForegroundChecked": "#ffffff",
-                      "inputIcon": "#0078d4",
-                      "inputIconDisabled": "#a19f9d",
-                      "inputIconHovered": "#005a9e",
-                      "inputPlaceholderBackgroundChecked": "#deecf9",
-                      "inputPlaceholderText": "#605e5c",
-                      "inputText": "#323130",
-                      "inputTextHovered": "#201f1e",
-                      "link": "#0078d4",
-                      "linkHovered": "#004578",
-                      "listBackground": "#ffffff",
-                      "listHeaderBackgroundHovered": "#f3f2f1",
-                      "listHeaderBackgroundPressed": "#edebe9",
-                      "listItemBackgroundChecked": "#edebe9",
-                      "listItemBackgroundCheckedHovered": "#e1dfdd",
-                      "listItemBackgroundHovered": "#f3f2f1",
-                      "listText": "#323130",
-                      "listTextColor": "#323130",
-                      "menuBackground": "#ffffff",
-                      "menuDivider": "#c8c6c4",
-                      "menuHeader": "#0078d4",
-                      "menuIcon": "#0078d4",
-                      "menuItemBackgroundChecked": "#edebe9",
-                      "menuItemBackgroundHovered": "#f3f2f1",
-                      "menuItemBackgroundPressed": "#edebe9",
-                      "menuItemText": "#323130",
-                      "menuItemTextHovered": "#201f1e",
-                      "messageLink": "#005A9E",
-                      "messageLinkHovered": "#004578",
-                      "messageText": "#323130",
-                      "primaryButtonBackground": "#0078d4",
-                      "primaryButtonBackgroundDisabled": "#f3f2f1",
-                      "primaryButtonBackgroundHovered": "#106ebe",
-                      "primaryButtonBackgroundPressed": "#005a9e",
-                      "primaryButtonBorder": "transparent",
-                      "primaryButtonText": "#ffffff",
-                      "primaryButtonTextDisabled": "#d2d0ce",
-                      "primaryButtonTextHovered": "#ffffff",
-                      "primaryButtonTextPressed": "#ffffff",
-                      "severeWarningBackground": "#FED9CC",
-                      "severeWarningIcon": "#D83B01",
-                      "smallInputBorder": "#605e5c",
-                      "successBackground": "#DFF6DD",
-                      "successIcon": "#107C10",
-                      "successText": "#107C10",
-                      "variantBorder": "#edebe9",
-                      "variantBorderHovered": "#a19f9d",
-                      "warningBackground": "#FFF4CE",
-                      "warningHighlight": "#ffb900",
-                      "warningIcon": "#797775",
-                      "warningText": "#323130",
-                    },
-                    "spacing": Object {
-                      "l1": "20px",
-                      "l2": "32px",
-                      "m": "16px",
-                      "s1": "8px",
-                      "s2": "4px",
-                    },
-                  }
-                }
               >
-                <a
+                <LinkBase
                   aria-label="capacity calculator of azure cosmos db"
-                  className="ms-Link root-60"
                   href="https://cosmos.azure.com/capacitycalculator/"
-                  onClick={[Function]}
+                  styles={[Function]}
                   target="_blank"
+                  theme={
+                    Object {
+                      "disableGlobalClassNames": false,
+                      "effects": Object {
+                        "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
+                        "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                        "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
+                        "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                        "roundedCorner2": "2px",
+                        "roundedCorner4": "4px",
+                        "roundedCorner6": "6px",
+                      },
+                      "fonts": Object {
+                        "large": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "18px",
+                          "fontWeight": 400,
+                        },
+                        "medium": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "14px",
+                          "fontWeight": 400,
+                        },
+                        "mediumPlus": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "16px",
+                          "fontWeight": 400,
+                        },
+                        "mega": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "68px",
+                          "fontWeight": 600,
+                        },
+                        "small": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "12px",
+                          "fontWeight": 400,
+                        },
+                        "smallPlus": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "12px",
+                          "fontWeight": 400,
+                        },
+                        "superLarge": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "42px",
+                          "fontWeight": 600,
+                        },
+                        "tiny": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "10px",
+                          "fontWeight": 400,
+                        },
+                        "xLarge": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "20px",
+                          "fontWeight": 600,
+                        },
+                        "xLargePlus": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "24px",
+                          "fontWeight": 600,
+                        },
+                        "xSmall": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "10px",
+                          "fontWeight": 400,
+                        },
+                        "xxLarge": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "28px",
+                          "fontWeight": 600,
+                        },
+                        "xxLargePlus": Object {
+                          "MozOsxFontSmoothing": "grayscale",
+                          "WebkitFontSmoothing": "antialiased",
+                          "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+                          "fontSize": "32px",
+                          "fontWeight": 600,
+                        },
+                      },
+                      "isInverted": false,
+                      "palette": Object {
+                        "accent": "#0078d4",
+                        "black": "#000000",
+                        "blackTranslucent40": "rgba(0,0,0,.4)",
+                        "blue": "#0078d4",
+                        "blueDark": "#002050",
+                        "blueLight": "#00bcf2",
+                        "blueMid": "#00188f",
+                        "green": "#107c10",
+                        "greenDark": "#004b1c",
+                        "greenLight": "#bad80a",
+                        "magenta": "#b4009e",
+                        "magentaDark": "#5c005c",
+                        "magentaLight": "#e3008c",
+                        "neutralDark": "#201f1e",
+                        "neutralLight": "#edebe9",
+                        "neutralLighter": "#f3f2f1",
+                        "neutralLighterAlt": "#faf9f8",
+                        "neutralPrimary": "#323130",
+                        "neutralPrimaryAlt": "#3b3a39",
+                        "neutralQuaternary": "#d2d0ce",
+                        "neutralQuaternaryAlt": "#e1dfdd",
+                        "neutralSecondary": "#605e5c",
+                        "neutralSecondaryAlt": "#8a8886",
+                        "neutralTertiary": "#a19f9d",
+                        "neutralTertiaryAlt": "#c8c6c4",
+                        "orange": "#d83b01",
+                        "orangeLight": "#ea4300",
+                        "orangeLighter": "#ff8c00",
+                        "purple": "#5c2d91",
+                        "purpleDark": "#32145a",
+                        "purpleLight": "#b4a0ff",
+                        "red": "#e81123",
+                        "redDark": "#a4262c",
+                        "teal": "#008272",
+                        "tealDark": "#004b50",
+                        "tealLight": "#00b294",
+                        "themeDark": "#005a9e",
+                        "themeDarkAlt": "#106ebe",
+                        "themeDarker": "#004578",
+                        "themeLight": "#c7e0f4",
+                        "themeLighter": "#deecf9",
+                        "themeLighterAlt": "#eff6fc",
+                        "themePrimary": "#0078d4",
+                        "themeSecondary": "#2b88d8",
+                        "themeTertiary": "#71afe5",
+                        "white": "#ffffff",
+                        "whiteTranslucent40": "rgba(255,255,255,.4)",
+                        "yellow": "#ffb900",
+                        "yellowDark": "#d29200",
+                        "yellowLight": "#fff100",
+                      },
+                      "rtl": undefined,
+                      "semanticColors": Object {
+                        "accentButtonBackground": "#0078d4",
+                        "accentButtonText": "#ffffff",
+                        "actionLink": "#323130",
+                        "actionLinkHovered": "#201f1e",
+                        "blockingBackground": "#FDE7E9",
+                        "blockingIcon": "#FDE7E9",
+                        "bodyBackground": "#ffffff",
+                        "bodyBackgroundChecked": "#edebe9",
+                        "bodyBackgroundHovered": "#f3f2f1",
+                        "bodyDivider": "#edebe9",
+                        "bodyFrameBackground": "#ffffff",
+                        "bodyFrameDivider": "#edebe9",
+                        "bodyStandoutBackground": "#faf9f8",
+                        "bodySubtext": "#605e5c",
+                        "bodyText": "#323130",
+                        "bodyTextChecked": "#000000",
+                        "buttonBackground": "#ffffff",
+                        "buttonBackgroundChecked": "#c8c6c4",
+                        "buttonBackgroundCheckedHovered": "#edebe9",
+                        "buttonBackgroundDisabled": "#f3f2f1",
+                        "buttonBackgroundHovered": "#f3f2f1",
+                        "buttonBackgroundPressed": "#edebe9",
+                        "buttonBorder": "#8a8886",
+                        "buttonBorderDisabled": "#f3f2f1",
+                        "buttonText": "#323130",
+                        "buttonTextChecked": "#201f1e",
+                        "buttonTextCheckedHovered": "#000000",
+                        "buttonTextDisabled": "#a19f9d",
+                        "buttonTextHovered": "#201f1e",
+                        "buttonTextPressed": "#201f1e",
+                        "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                        "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                        "cardStandoutBackground": "#ffffff",
+                        "defaultStateBackground": "#faf9f8",
+                        "disabledBackground": "#f3f2f1",
+                        "disabledBodySubtext": "#c8c6c4",
+                        "disabledBodyText": "#a19f9d",
+                        "disabledBorder": "#c8c6c4",
+                        "disabledSubtext": "#d2d0ce",
+                        "disabledText": "#a19f9d",
+                        "errorBackground": "#FDE7E9",
+                        "errorIcon": "#A80000",
+                        "errorText": "#a4262c",
+                        "focusBorder": "#605e5c",
+                        "infoBackground": "#f3f2f1",
+                        "infoIcon": "#605e5c",
+                        "inputBackground": "#ffffff",
+                        "inputBackgroundChecked": "#0078d4",
+                        "inputBackgroundCheckedHovered": "#005a9e",
+                        "inputBorder": "#605e5c",
+                        "inputBorderHovered": "#323130",
+                        "inputFocusBorderAlt": "#0078d4",
+                        "inputForegroundChecked": "#ffffff",
+                        "inputIcon": "#0078d4",
+                        "inputIconDisabled": "#a19f9d",
+                        "inputIconHovered": "#005a9e",
+                        "inputPlaceholderBackgroundChecked": "#deecf9",
+                        "inputPlaceholderText": "#605e5c",
+                        "inputText": "#323130",
+                        "inputTextHovered": "#201f1e",
+                        "link": "#0078d4",
+                        "linkHovered": "#004578",
+                        "listBackground": "#ffffff",
+                        "listHeaderBackgroundHovered": "#f3f2f1",
+                        "listHeaderBackgroundPressed": "#edebe9",
+                        "listItemBackgroundChecked": "#edebe9",
+                        "listItemBackgroundCheckedHovered": "#e1dfdd",
+                        "listItemBackgroundHovered": "#f3f2f1",
+                        "listText": "#323130",
+                        "listTextColor": "#323130",
+                        "menuBackground": "#ffffff",
+                        "menuDivider": "#c8c6c4",
+                        "menuHeader": "#0078d4",
+                        "menuIcon": "#0078d4",
+                        "menuItemBackgroundChecked": "#edebe9",
+                        "menuItemBackgroundHovered": "#f3f2f1",
+                        "menuItemBackgroundPressed": "#edebe9",
+                        "menuItemText": "#323130",
+                        "menuItemTextHovered": "#201f1e",
+                        "messageLink": "#005A9E",
+                        "messageLinkHovered": "#004578",
+                        "messageText": "#323130",
+                        "primaryButtonBackground": "#0078d4",
+                        "primaryButtonBackgroundDisabled": "#f3f2f1",
+                        "primaryButtonBackgroundHovered": "#106ebe",
+                        "primaryButtonBackgroundPressed": "#005a9e",
+                        "primaryButtonBorder": "transparent",
+                        "primaryButtonText": "#ffffff",
+                        "primaryButtonTextDisabled": "#d2d0ce",
+                        "primaryButtonTextHovered": "#ffffff",
+                        "primaryButtonTextPressed": "#ffffff",
+                        "severeWarningBackground": "#FED9CC",
+                        "severeWarningIcon": "#D83B01",
+                        "smallInputBorder": "#605e5c",
+                        "successBackground": "#DFF6DD",
+                        "successIcon": "#107C10",
+                        "successText": "#107C10",
+                        "variantBorder": "#edebe9",
+                        "variantBorderHovered": "#a19f9d",
+                        "warningBackground": "#FFF4CE",
+                        "warningHighlight": "#ffb900",
+                        "warningIcon": "#797775",
+                        "warningText": "#323130",
+                      },
+                      "spacing": Object {
+                        "l1": "20px",
+                        "l2": "32px",
+                        "m": "16px",
+                        "s1": "8px",
+                        "s2": "4px",
+                      },
+                    }
+                  }
                 >
-                  capacity calculator
+                  <a
-                </a>
+                    aria-label="capacity calculator of azure cosmos db"
-              </LinkBase>
+                    className="ms-Link root-60"
-            </StyledLinkBase>
+                    href="https://cosmos.azure.com/capacitycalculator/"
+                    onClick={[Function]}
+                    target="_blank"
+                  >
+                    capacity calculator
+                  </a>
+                </LinkBase>
+              </StyledLinkBase>
+            </u>
             .
           </span>
         </Text>
@@ -1341,14 +1347,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                         className="panelInfoIcon"
                         iconName="Info"
-                        role="tooltip"
                         tabIndex={0}
                       >
                         <IconBase
                           ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                           className="panelInfoIcon"
                           iconName="Info"
-                          role="tooltip"
                           styles={[Function]}
                           tabIndex={0}
                           theme={
@@ -1629,7 +1633,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                             aria-label="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                             className="panelInfoIcon root-57"
                             data-icon-name="Info"
-                            role="tooltip"
+                            role="img"
                             tabIndex={0}
                           >
                             
@@ -1644,10 +1648,11 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           </div>
         </Stack>
         <StyledTextFieldBase
-          aria-label="Max request units per second"
+          ariaLabel="Max request units per second"
           errorMessage=""
           id="autoscaleRUValueField"
           key=".0:$.2"
+          max={9000000000000}
           min={1000}
           onChange={[Function]}
           required={true}
@@ -1667,10 +1672,11 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           value="4000"
         >
           <TextFieldBase
-            aria-label="Max request units per second"
+            ariaLabel="Max request units per second"
             deferredValidationTime={200}
             errorMessage=""
             id="autoscaleRUValueField"
+            max={9000000000000}
             min={1000}
             onChange={[Function]}
             required={true}
@@ -1965,8 +1971,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                 >
                   <input
                     aria-invalid={false}
+                    aria-label="Max request units per second"
                     className="ms-TextField-field field-64"
                     id="autoscaleRUValueField"
+                    max={9000000000000}
                     min={1000}
                     onBlur={[Function]}
                     onChange={[Function]}

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -10,7 +10,7 @@ import {
   IButtonStyles,
   IconButton,
   IContextualMenuItemProps,
-  IContextualMenuProps
+  IContextualMenuProps,
 } from "@fluentui/react";
 import * as React from "react";
 import AnimateHeight from "react-animate-height";

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

@@ -40,32 +40,30 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
   onKeyPress={[Function]}
   role="treeitem"
 >
-  <div>
+  <div
-    <div
+    className="treeNodeHeader "
-      className="treeNodeHeader "
+    data-test="label"
-      data-test="label"
+    style={
-      style={
+      Object {
-        Object {
+        "paddingLeft": 9,
-          "paddingLeft": 9,
-        }
       }
-      tabIndex={-1}
+    }
+    tabIndex={-1}
+  >
+    <img
+      alt="label branch is collapsed"
+      className="expandCollapseIcon"
+      onKeyPress={[Function]}
+      role="button"
+      src=""
+      tabIndex={0}
+    />
+    <span
+      className="nodeLabel"
+      title="label"
     >
-      <img
+      label
-        alt="label branch is collapsed"
+    </span>
-        className="expandCollapseIcon"
-        onKeyPress={[Function]}
-        role="button"
-        src=""
-        tabIndex={0}
-      />
-      <span
-        className="nodeLabel"
-        title="label"
-      >
-        label
-      </span>
-    </div>
   </div>
   <div
     className="loadingIconContainer"
@@ -145,80 +143,78 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
   onKeyPress={[Function]}
   role="treeitem"
 >
-  <div>
+  <div
-    <div
+    className="treeNodeHeader "
-      className="treeNodeHeader "
+    data-test="label"
-      data-test="label"
+    style={
-      style={
+      Object {
-        Object {
+        "paddingLeft": 23,
-          "paddingLeft": 23,
-        }
       }
-      tabIndex={-1}
+    }
+    tabIndex={-1}
+  >
+    <img
+      alt="label branch is expanded"
+      className="expandCollapseIcon"
+      onKeyPress={[Function]}
+      role="button"
+      src=""
+      tabIndex={0}
+    />
+    <span
+      className="nodeLabel"
+      title="label"
     >
-      <img
+      label
-        alt="label branch is expanded"
+    </span>
-        className="expandCollapseIcon"
+    <div
-        onKeyPress={[Function]}
+      onContextMenu={[Function]}
-        role="button"
+      onKeyPress={[Function]}
-        src=""
+    >
-        tabIndex={0}
+      <CustomizedIconButton
+        ariaLabel="More"
+        className="treeMenuEllipsis"
+        menuIconProps={
+          Object {
+            "iconName": "More",
+            "styles": Object {
+              "root": Object {
+                "fontSize": "18px",
+                "fontWeight": "bold",
+              },
+            },
+          }
+        }
+        menuProps={
+          Object {
+            "contextualMenuItemAs": [Function],
+            "coverTarget": true,
+            "directionalHint": 3,
+            "isBeakVisible": false,
+            "items": Array [
+              Object {
+                "className": undefined,
+                "disabled": true,
+                "key": "menuLabel",
+                "onClick": [Function],
+                "onRenderIcon": [Function],
+                "text": "menuLabel",
+              },
+            ],
+            "onMenuDismissed": [Function],
+            "onMenuOpened": [Function],
+          }
+        }
+        name="More"
+        styles={
+          Object {
+            "rootFocused": Object {
+              "outline": "1px dashed undefined",
+            },
+          }
+        }
+        title="More"
       />
-      <span
-        className="nodeLabel"
-        title="label"
-      >
-        label
-      </span>
-      <div
-        onContextMenu={[Function]}
-        onKeyPress={[Function]}
-      >
-        <CustomizedIconButton
-          ariaLabel="More"
-          className="treeMenuEllipsis"
-          menuIconProps={
-            Object {
-              "iconName": "More",
-              "styles": Object {
-                "root": Object {
-                  "fontSize": "18px",
-                  "fontWeight": "bold",
-                },
-              },
-            }
-          }
-          menuProps={
-            Object {
-              "contextualMenuItemAs": [Function],
-              "coverTarget": true,
-              "directionalHint": 3,
-              "isBeakVisible": false,
-              "items": Array [
-                Object {
-                  "className": undefined,
-                  "disabled": true,
-                  "key": "menuLabel",
-                  "onClick": [Function],
-                  "onRenderIcon": [Function],
-                  "text": "menuLabel",
-                },
-              ],
-              "onMenuDismissed": [Function],
-              "onMenuOpened": [Function],
-            }
-          }
-          name="More"
-          styles={
-            Object {
-              "rootFocused": Object {
-                "outline": "1px dashed undefined",
-              },
-            }
-          }
-          title="More"
-        />
-      </div>
     </div>
   </div>
   <div
@@ -298,32 +294,30 @@ exports[`TreeNodeComponent renders loading icon 1`] = `
   onKeyPress={[Function]}
   role="treeitem"
 >
-  <div>
+  <div
-    <div
+    className="treeNodeHeader "
-      className="treeNodeHeader "
+    data-test="label"
-      data-test="label"
+    style={
-      style={
+      Object {
-        Object {
+        "paddingLeft": 9,
-          "paddingLeft": 9,
-        }
       }
-      tabIndex={-1}
+    }
+    tabIndex={-1}
+  >
+    <img
+      alt="label branch is expanded"
+      className="expandCollapseIcon"
+      onKeyPress={[Function]}
+      role="button"
+      src=""
+      tabIndex={0}
+    />
+    <span
+      className="nodeLabel"
+      title="label"
     >
-      <img
+      label
-        alt="label branch is expanded"
+    </span>
-        className="expandCollapseIcon"
-        onKeyPress={[Function]}
-        role="button"
-        src=""
-        tabIndex={0}
-      />
-      <span
-        className="nodeLabel"
-        title="label"
-      >
-        label
-      </span>
-    </div>
   </div>
   <div
     className="loadingIconContainer"
@@ -374,71 +368,69 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
   onKeyPress={[Function]}
   role="treeitem"
 >
-  <div>
+  <div
-    <div
+    className="treeNodeHeader "
-      className="treeNodeHeader "
+    data-test="label"
-      data-test="label"
+    style={
-      style={
+      Object {
-        Object {
+        "paddingLeft": 23,
-          "paddingLeft": 23,
-        }
       }
-      tabIndex={-1}
+    }
+    tabIndex={-1}
+  >
+    <img
+      alt="label branch is expanded"
+      className="expandCollapseIcon"
+      onKeyPress={[Function]}
+      role="button"
+      src=""
+      tabIndex={0}
+    />
+    <span
+      className="nodeLabel"
+      title="label"
     >
-      <img
+      label
-        alt="label branch is expanded"
+    </span>
-        className="expandCollapseIcon"
+    <div
-        onKeyPress={[Function]}
+      onContextMenu={[Function]}
-        role="button"
+      onKeyPress={[Function]}
-        src=""
+    >
-        tabIndex={0}
+      <CustomizedIconButton
+        ariaLabel="More"
+        className="treeMenuEllipsis"
+        menuIconProps={
+          Object {
+            "iconName": "More",
+            "styles": Object {
+              "root": Object {
+                "fontSize": "18px",
+                "fontWeight": "bold",
+              },
+            },
+          }
+        }
+        menuProps={
+          Object {
+            "contextualMenuItemAs": [Function],
+            "coverTarget": true,
+            "directionalHint": 3,
+            "isBeakVisible": false,
+            "items": Array [],
+            "onMenuDismissed": [Function],
+            "onMenuOpened": [Function],
+          }
+        }
+        name="More"
+        styles={
+          Object {
+            "rootFocused": Object {
+              "outline": "1px dashed undefined",
+            },
+          }
+        }
+        title="More"
       />
-      <span
-        className="nodeLabel"
-        title="label"
-      >
-        label
-      </span>
-      <div
-        onContextMenu={[Function]}
-        onKeyPress={[Function]}
-      >
-        <CustomizedIconButton
-          ariaLabel="More"
-          className="treeMenuEllipsis"
-          menuIconProps={
-            Object {
-              "iconName": "More",
-              "styles": Object {
-                "root": Object {
-                  "fontSize": "18px",
-                  "fontWeight": "bold",
-                },
-              },
-            }
-          }
-          menuProps={
-            Object {
-              "contextualMenuItemAs": [Function],
-              "coverTarget": true,
-              "directionalHint": 3,
-              "isBeakVisible": false,
-              "items": Array [],
-              "onMenuDismissed": [Function],
-              "onMenuOpened": [Function],
-            }
-          }
-          name="More"
-          styles={
-            Object {
-              "rootFocused": Object {
-                "outline": "1px dashed undefined",
-              },
-            }
-          }
-          title="More"
-        />
-      </div>
     </div>
   </div>
   <div
@@ -546,32 +538,30 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
   onKeyPress={[Function]}
   role="treeitem"
 >
-  <div>
+  <div
-    <div
+    className="treeNodeHeader "
-      className="treeNodeHeader "
+    data-test="label"
-      data-test="label"
+    style={
-      style={
+      Object {
-        Object {
+        "paddingLeft": 9,
-          "paddingLeft": 9,
-        }
       }
-      tabIndex={-1}
+    }
+    tabIndex={-1}
+  >
+    <img
+      alt="label branch is expanded"
+      className="expandCollapseIcon"
+      onKeyPress={[Function]}
+      role="button"
+      src=""
+      tabIndex={0}
+    />
+    <span
+      className="nodeLabel"
+      title="label"
     >
-      <img
+      label
-        alt="label branch is expanded"
+    </span>
-        className="expandCollapseIcon"
-        onKeyPress={[Function]}
-        role="button"
-        src=""
-        tabIndex={0}
-      />
-      <span
-        className="nodeLabel"
-        title="label"
-      >
-        label
-      </span>
-    </div>
   </div>
   <div
     className="loadingIconContainer"

src/Explorer/Controls/TreeComponent/treeComponent.less

@@ -7,7 +7,7 @@
     }
 
     .treeNodeHeader {
-      padding: @SmallSpace 2px;
+      margin: 1px;
       cursor: pointer;
       display: flex;
 

src/Explorer/Explorer.tsx

@@ -577,7 +577,7 @@ export default class Explorer {
     try {
       await Promise.all(
         databasesToLoad.map(async (database: ViewModels.Database) => {
-          await database.loadCollections(true);
+          await database.loadCollections();
           const isNewDatabase: boolean = _.some(newDatabases, (db: ViewModels.Database) => db.id() === database.id());
           if (isNewDatabase) {
             database.expandDatabase();

src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx

@@ -23,7 +23,7 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
             onClick={this.props.toggleExpandGraph}
             role="button"
             aria-expanded={this.props.isTabsContentExpanded}
-            aria-name="View graph in full screen"
+            aria-label="View graph in full screen"
           >
             <img
               src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -13,7 +13,7 @@ import {
   Stack,
   TeachingBubble,
   Text,
-  TooltipHost
+  TooltipHost,
 } from "@fluentui/react";
 import * as Constants from "Common/Constants";
 import { createCollection } from "Common/dataAccess/createCollection";
@@ -100,7 +100,6 @@ export interface AddCollectionPanelState {
   isExecuting: boolean;
   isThroughputCapExceeded: boolean;
   teachingBubbleStep: number;
-  isParentTooltipVisible:boolean;
 }
 
 export class AddCollectionPanel extends React.Component<AddCollectionPanelProps, AddCollectionPanelState> {
@@ -109,7 +108,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   private collectionThroughput: number;
   private isCollectionAutoscale: boolean;
   private isCostAcknowledged: boolean;
-  
 
   constructor(props: AddCollectionPanelProps) {
     super(props);
@@ -136,16 +134,13 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       isExecuting: false,
       isThroughputCapExceeded: false,
       teachingBubbleStep: 0,
-      isParentTooltipVisible: false,
     };
-    
   }
 
   componentDidMount(): void {
     if (this.state.teachingBubbleStep === 0 && this.props.isQuickstart) {
       this.setState({ teachingBubbleStep: 1 });
     }
-
   }
 
   render(): JSX.Element {
@@ -413,7 +408,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   className="panelInfoIcon"
                   tabIndex={0}
                   ariaLabel={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
-                  
                 />
               </TooltipHost>
             </Stack>

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -21,11 +21,6 @@ export const SettingsPane: FunctionComponent = () => {
   const [customItemPerPage, setCustomItemPerPage] = useState<number>(
     LocalStorageUtility.getEntryNumber(StorageKey.CustomItemPerPage) || 0
   );
-  const [containerPaginationEnabled, setContainerPaginationEnabled] = useState<boolean>(
-    LocalStorageUtility.hasItem(StorageKey.ContainerPaginationEnabled)
-      ? LocalStorageUtility.getEntryString(StorageKey.ContainerPaginationEnabled) === "true"
-      : false
-  );
   const [crossPartitionQueryEnabled, setCrossPartitionQueryEnabled] = useState<boolean>(
     LocalStorageUtility.hasItem(StorageKey.IsCrossPartitionQueryEnabled)
       ? LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
@@ -55,7 +50,6 @@ export const SettingsPane: FunctionComponent = () => {
       isCustomPageOptionSelected() ? customItemPerPage : Constants.Queries.unlimitedItemsPerPage
     );
     LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
-    LocalStorageUtility.setEntryString(StorageKey.ContainerPaginationEnabled, containerPaginationEnabled.toString());
     LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, crossPartitionQueryEnabled.toString());
     LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, maxDegreeOfParallelism);
 
@@ -191,25 +185,6 @@ export const SettingsPane: FunctionComponent = () => {
             </div>
           </div>
         )}
-        <div className="settingsSection">
-          <div className="settingsSectionPart">
-            <div className="settingsSectionLabel">
-              Enable container pagination
-              <InfoTooltip>
-                Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
-              </InfoTooltip>
-            </div>
-            <Checkbox
-              styles={{
-                label: { padding: 0 },
-              }}
-              className="padding"
-              ariaLabel="Enable container pagination"
-              checked={containerPaginationEnabled}
-              onChange={() => setContainerPaginationEnabled(!containerPaginationEnabled)}
-            />
-          </div>
-        </div>
         {shouldShowCrossPartitionOption && (
           <div className="settingsSection">
             <div className="settingsSectionPart">

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

@@ -97,35 +97,6 @@ exports[`Settings Pane should render Default properly 1`] = `
         </div>
       </div>
     </div>
-    <div
-      className="settingsSection"
-    >
-      <div
-        className="settingsSectionPart"
-      >
-        <div
-          className="settingsSectionLabel"
-        >
-          Enable container pagination
-          <InfoTooltip>
-            Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
-          </InfoTooltip>
-        </div>
-        <StyledCheckboxBase
-          ariaLabel="Enable container pagination"
-          checked={false}
-          className="padding"
-          onChange={[Function]}
-          styles={
-            Object {
-              "label": Object {
-                "padding": 0,
-              },
-            }
-          }
-        />
-      </div>
-    </div>
     <div
       className="settingsSection"
     >
@@ -211,35 +182,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
   <div
     className="paneMainContent"
   >
-    <div
-      className="settingsSection"
-    >
-      <div
-        className="settingsSectionPart"
-      >
-        <div
-          className="settingsSectionLabel"
-        >
-          Enable container pagination
-          <InfoTooltip>
-            Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
-          </InfoTooltip>
-        </div>
-        <StyledCheckboxBase
-          ariaLabel="Enable container pagination"
-          checked={false}
-          className="padding"
-          onChange={[Function]}
-          styles={
-            Object {
-              "label": Object {
-                "padding": 0,
-              },
-            }
-          }
-        />
-      </div>
-    </div>
     <div
       className="settingsSection"
     >

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -9,7 +9,7 @@ import {
   Stack,
   TeachingBubble,
   TeachingBubbleContent,
-  Text
+  Text,
 } from "@fluentui/react";
 import { sendMessage } from "Common/MessageHandler";
 import { MessageTypes } from "Contracts/ExplorerContracts";

src/Explorer/Tree/Database.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import * as _ from "underscore";
 import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
-import { readCollections, readCollectionsWithPagination } from "../../Common/dataAccess/readCollections";
+import { readCollections } from "../../Common/dataAccess/readCollections";
 import { readDatabaseOffer } from "../../Common/dataAccess/readDatabaseOffer";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import * as Logger from "../../Common/Logger";
@@ -13,7 +13,6 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import { useSidePanel } from "../../hooks/useSidePanel";
 import { useTabs } from "../../hooks/useTabs";
 import { IJunoResponse, JunoClient } from "../../Juno/JunoClient";
-import * as StorageUtility from "../../Shared/StorageUtility";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
@@ -39,7 +38,6 @@ export default class Database implements ViewModels.Database {
   public selectedSubnodeKind: ko.Observable<ViewModels.CollectionTabKind>;
   public junoClient: JunoClient;
   public isSampleDB: boolean;
-  public collectionsContinuationToken?: string;
   private isOfferRead: boolean;
 
   constructor(container: Explorer, data: DataModels.Database) {
@@ -142,11 +140,7 @@ export default class Database implements ViewModels.Database {
     }
 
     await this.loadOffer();
-
+    await this.loadCollections();
-    if (this.collections()?.length === 0) {
-      await this.loadCollections(true);
-    }
-
     this.isDatabaseExpanded(true);
     TelemetryProcessor.trace(Action.ExpandTreeNode, ActionModifiers.Mark, {
       description: "Database node",
@@ -168,31 +162,9 @@ export default class Database implements ViewModels.Database {
     });
   }
 
-  public async loadCollections(restart = false) {
+  public async loadCollections(): Promise<void> {
     const collectionVMs: Collection[] = [];
-    let collections: DataModels.Collection[] = [];
+    const collections: DataModels.Collection[] = await readCollections(this.id());
-    if (restart) {
-      this.collectionsContinuationToken = undefined;
-    }
-    const containerPaginationEnabled =
-      StorageUtility.LocalStorageUtility.getEntryString(StorageUtility.StorageKey.ContainerPaginationEnabled) ===
-      "true";
-    if (containerPaginationEnabled) {
-      const collectionsWithPagination: DataModels.CollectionsWithPagination = await readCollectionsWithPagination(
-        this.id(),
-        this.collectionsContinuationToken
-      );
-
-      if (collectionsWithPagination.collections?.length === Constants.Queries.containersPerPage) {
-        this.collectionsContinuationToken = collectionsWithPagination.continuationToken;
-      } else {
-        this.collectionsContinuationToken = undefined;
-      }
-      collections = collectionsWithPagination.collections;
-    } else {
-      collections = await readCollections(this.id());
-    }
-
     // TODO Remove
     // This is a hack to make Mongo collections read via ARM have a SQL-ish partitionKey property
     if (userContext.apiType === "Mongo" && userContext.authType === AuthType.AAD) {
@@ -227,9 +199,7 @@ export default class Database implements ViewModels.Database {
 
     //merge collections
     this.addCollectionsToList(collectionVMs);
-    if (!containerPaginationEnabled || restart) {
+    this.deleteCollectionsFromList(deltaCollections.toDelete);
-      this.deleteCollectionsFromList(deltaCollections.toDelete);
-    }
 
     useDatabases.getState().updateDatabase(this);
   }

src/Explorer/Tree/ResourceTree.tsx

@@ -479,18 +479,6 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
           databaseNode.children.push(buildCollectionNode(database, collection))
         );
 
-      if (database.collectionsContinuationToken) {
-        const loadMoreNode: TreeNode = {
-          label: "load more",
-          className: "loadMoreHeader",
-          onClick: async () => {
-            await database.loadCollections();
-            useDatabases.getState().updateDatabase(database);
-          },
-        };
-        databaseNode.children.push(loadMoreNode);
-      }
-
       database.collections.subscribe((collections: ViewModels.Collection[]) => {
         collections.forEach((collection: ViewModels.Collection) =>
           databaseNode.children.push(buildCollectionNode(database, collection))

src/Shared/StorageUtility.ts

@@ -4,7 +4,6 @@ import * as SessionStorageUtility from "./SessionStorageUtility";
 export { LocalStorageUtility, SessionStorageUtility };
 export enum StorageKey {
   ActualItemPerPage,
-  ContainerPaginationEnabled,
   CustomItemPerPage,
   DatabaseAccountId,
   EncryptedKeyToken,