add quotes to keyspace and table name for create table

Defect 2280429 (#1416 )
* autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit 5a660551c6. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit b84d5b572c. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit a4e60f106c. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * refresh, expand, collapse tree does not have proper label for screenreader * wrong role is assigned to anchor link * descriptive alt added for iconspresent for DATA and NOTEBOOK accordion headers * Update CollapsedResourceTree.tsx * Update ResourceTreeContainer.tsx * Update ResourceTreeContainer.tsx * Update TableEntity.tsx * Update treeComponent.less * Update MiddlePaneComponent.tsx * Update PanelInfoErrorComponent.tsx
2025-12-25 11:51:07 +00:00 · 2023-04-27 16:55:28 -04:00 · 2023-04-25 21:04:29 +05:30 · 2023-04-25 21:04:12 +05:30 · 2023-04-25 21:03:51 +05:30 · 2023-04-25 21:03:35 +05:30
31 changed files with 898 additions and 370 deletions
--- a/jest.config.js
+++ b/jest.config.js
@@ -18,7 +18,8 @@ module.exports = {
  // clearMocks: false,

  // Indicates whether the coverage information should be collected while executing the test
-  collectCoverage: true,
+
+  collectCoverage: process.env.skipCodeCoverage === "true" ? false : true,

  // An array of glob patterns indicating a set of files for which coverage information should be collected
  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -2577,7 +2577,7 @@ a:link {
  font-style: italic;
 }
 .querydropdown.placeholderVisible::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-  color: #403f3f;
+  color: #767474;
  opacity: 1; 
 }

--- a/less/resourceTree.less
+++ b/less/resourceTree.less
@@ -5,12 +5,17 @@
  overflow: auto;

  .databaseHeader {
+    padding: 1px;
    font-size: 14px;
  }

  .collectionHeader {
    font-size: 12px;
  }
+
+  .loadMoreHeader {
+    color: RGB(5, 99, 193);
+  }
 }

 .notebookResourceTree {
@@ -23,6 +28,4 @@
  .clickDisabled {
    pointer-events: none;
  }
-}
-
-
+}
--- a/src/Common/CollapsedResourceTree.tsx
+++ b/src/Common/CollapsedResourceTree.tsx
@@ -36,7 +36,7 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
            id="collapseToggleLeftPaneButton"
            role="button"
            tabIndex={0}
-            aria-label="Expand Tree"
+            aria-label={getApiShortDisplayName() + `Expand tree`}
            onClick={toggleLeftPaneExpanded}
            onKeyPress={onKeyPressToggleLeftPaneExpanded}
            ref={focusButton}
--- a/src/Common/Constants.ts
+++ b/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;
--- a/src/Common/ResourceTreeContainer.tsx
+++ b/src/Common/ResourceTreeContainer.tsx
@@ -51,7 +51,7 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
                role="button"
                data-bind="click: onRefreshResourcesClick, clickBubble: false, event: { keypress: onRefreshDatabasesKeyPress }"
                tabIndex={0}
-                aria-label="Refresh tree"
+                aria-label={getApiShortDisplayName() + `Refresh tree`}
                title="Refresh tree"
              >
                <img className="refreshcol" src={refreshImg} alt="Refresh Tree" />
@@ -63,7 +63,7 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
                onClick={toggleLeftPaneExpanded}
                onKeyPress={onKeyPressToggleLeftPaneExpanded}
                tabIndex={0}
-                aria-label="Collapse Tree"
+                aria-label={getApiShortDisplayName() + `Collapse Tree`}
                title="Collapse Tree"
                ref={focusButton}
              >
--- a/src/Common/dataAccess/readCollections.ts
+++ b/src/Common/dataAccess/readCollections.ts
@@ -1,3 +1,4 @@
+import { Queries } from "Common/Constants";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
@@ -31,6 +32,35 @@ 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;

--- a/src/Contracts/DataModels.ts
+++ b/src/Contracts/DataModels.ts
@@ -156,6 +156,11 @@ export interface Collection extends Resource {
  requestSchema?: () => void;
 }

+export interface CollectionsWithPagination {
+  continuationToken?: string;
+  collections?: Collection[];
+}
+
 export interface Database extends Resource {
  collections?: Collection[];
 }
--- a/src/Contracts/ViewModels.ts
+++ b/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(): Promise<void>;
+  loadCollections(restart?: boolean): Promise<void>;
  findCollectionWithId(collectionId: string): Collection;
  openAddCollection(database: Database, event: MouseEvent): void;
  onSettingsClick: () => void;
--- a/src/Explorer/Controls/Accordion/AccordionComponent.tsx
+++ b/src/Explorer/Controls/Accordion/AccordionComponent.tsx
@@ -73,7 +73,7 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
      <img
        className="expandCollapseIcon"
        src={this.state.isExpanded ? TriangleDownIcon : TriangleRightIcon}
-        alt="Hide"
+        alt={this.state.isExpanded ? `${this.props.title} hide` : `${this.props.title} expand`}
        tabIndex={0}
        role="button"
      />
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx
@@ -23,12 +23,12 @@ describe("ThroughputInput Pane", () => {
  });

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

-    wrapper.find('[id="Autoscale-input"]').simulate("change");
+    wrapper.find('[aria-label="Autoscale database throughput"]').simulate("change");
    expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe("Container throughput (autoscale)");
  });
 });
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -189,7 +189,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
          <input
            id="Autoscale-input"
            className="throughputInputRadioBtn"
-            aria-label={`Autoscale` + " " + getThroughputLabelText()}
+            aria-label="Autoscale database throughput"
            aria-required={true}
            checked={isAutoscaleSelected}
            type="radio"
@@ -204,7 +204,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
          <input
            id="Manual-input"
            className="throughputInputRadioBtn"
-            aria-label={`Manual` + " " + getThroughputLabelText()}
+            aria-label="Manual database throughput"
            checked={!isAutoscaleSelected}
            type="radio"
            aria-required={true}
@@ -222,15 +222,13 @@ 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{" "}
-            <u style={{ color: "#0078D4" }}>
-              <Link
-                target="_blank"
-                href="https://cosmos.azure.com/capacitycalculator/"
-                aria-label="capacity calculator of azure cosmos db"
-              >
-                capacity calculator
-              </Link>
-            </u>
+            <Link
+              target="_blank"
+              href="https://cosmos.azure.com/capacitycalculator/"
+              aria-label="capacity calculator of azure cosmos db"
+            >
+              capacity calculator
+            </Link>
            .
          </Text>

@@ -251,9 +249,8 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
            onChange={(event, newInput?: string) => onThroughputValueChange(newInput)}
            step={AutoPilotUtils.autoPilotIncrementStep}
            min={AutoPilotUtils.autoPilotThroughput1K}
-            max={!isSharded ? 10000 : 9000000000000}
            value={throughput.toString()}
-            ariaLabel="Max request units per second"
+            ariaLabel={`${isDatabase ? "Database" : getCollectionName()} max RU/s`}
            required={true}
            errorMessage={throughputError}
          />
@@ -273,11 +270,9 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
        <Stack className="throughputInputSpacing">
          <Text variant="small" aria-label="ruDescription">
            Estimate your required RU/s with&nbsp;
-            <u style={{ color: "#0078D4" }}>
-              <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="capacityLink">
-                capacity calculator
-              </Link>
-            </u>
+            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="capacityLink">
+              capacity calculator
+            </Link>
            .
          </Text>

@@ -300,7 +295,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
              min={SharedConstants.CollectionCreation.DefaultCollectionRUs400}
              max={userContext.isTryCosmosDBSubscription ? Constants.TryCosmosExperience.maxRU : Infinity}
              value={throughput.toString()}
-              ariaLabel="Max request units per second"
+              aria-label="Max request units per second"
              required={true}
              errorMessage={throughputError}
            />
--- a/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
+++ b/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
@@ -659,7 +659,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
          role="radiogroup"
        >
          <input
-            aria-label="Autoscale Container throughput (autoscale)"
+            aria-label="Autoscale database throughput"
            aria-required={true}
            checked={true}
            className="throughputInputRadioBtn"
@@ -676,7 +676,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
            Autoscale
          </label>
          <input
-            aria-label="Manual Container throughput (autoscale)"
+            aria-label="Manual database throughput"
            aria-required={true}
            checked={false}
            className="throughputInputRadioBtn"
@@ -712,309 +712,301 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
          >
            Estimate your required RU/s with
             
-            <u
-              style={
-                Object {
-                  "color": "#0078D4",
-                }
-              }
+            <StyledLinkBase
+              aria-label="capacity calculator of azure cosmos db"
+              href="https://cosmos.azure.com/capacitycalculator/"
+              target="_blank"
            >
-              <StyledLinkBase
+              <LinkBase
                aria-label="capacity calculator of azure cosmos db"
                href="https://cosmos.azure.com/capacitycalculator/"
+                styles={[Function]}
                target="_blank"
-              >
-                <LinkBase
-                  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",
+                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,
                      },
-                      "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,
-                        },
+                      "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,
                      },
-                      "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",
+                      "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,
                      },
-                      "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",
+                      "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,
                      },
-                      "spacing": Object {
-                        "l1": "20px",
-                        "l2": "32px",
-                        "m": "16px",
-                        "s1": "8px",
-                        "s2": "4px",
+                      "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
+                  aria-label="capacity calculator of azure cosmos db"
+                  className="ms-Link root-60"
+                  href="https://cosmos.azure.com/capacitycalculator/"
+                  onClick={[Function]}
+                  target="_blank"
                >
-                  <a
-                    aria-label="capacity calculator of azure cosmos db"
-                    className="ms-Link root-60"
-                    href="https://cosmos.azure.com/capacitycalculator/"
-                    onClick={[Function]}
-                    target="_blank"
-                  >
-                    capacity calculator
-                  </a>
-                </LinkBase>
-              </StyledLinkBase>
-            </u>
+                  capacity calculator
+                </a>
+              </LinkBase>
+            </StyledLinkBase>
            .
          </span>
        </Text>
@@ -1648,11 +1640,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
          </div>
        </Stack>
        <StyledTextFieldBase
-          ariaLabel="Max request units per second"
+          ariaLabel="Container max RU/s"
          errorMessage=""
          id="autoscaleRUValueField"
          key=".0:$.2"
-          max={9000000000000}
          min={1000}
          onChange={[Function]}
          required={true}
@@ -1672,11 +1663,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
          value="4000"
        >
          <TextFieldBase
-            ariaLabel="Max request units per second"
+            ariaLabel="Container max RU/s"
            deferredValidationTime={200}
            errorMessage=""
            id="autoscaleRUValueField"
-            max={9000000000000}
            min={1000}
            onChange={[Function]}
            required={true}
@@ -1971,10 +1961,9 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                >
                  <input
                    aria-invalid={false}
-                    aria-label="Max request units per second"
+                    aria-label="Container max RU/s"
                    className="ms-TextField-field field-64"
                    id="autoscaleRUValueField"
-                    max={9000000000000}
                    min={1000}
                    onBlur={[Function]}
                    onChange={[Function]}
--- a/src/Explorer/Controls/TreeComponent/treeComponent.less
+++ b/src/Explorer/Controls/TreeComponent/treeComponent.less
@@ -7,7 +7,7 @@
    }

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

--- a/src/Explorer/Explorer.tsx
+++ b/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();
+          await database.loadCollections(true);
          const isNewDatabase: boolean = _.some(newDatabases, (db: ViewModels.Database) => db.id() === database.id());
          if (isNewDatabase) {
            database.expandDatabase();
--- a/src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
@@ -23,7 +23,9 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
            onClick={this.props.toggleExpandGraph}
            role="button"
            aria-expanded={this.props.isTabsContentExpanded}
-            aria-label="View graph in full screen"
+            aria-label={
+              this.props.isTabsContentExpanded ? "Collapse graph to minimized view" : "View graph in full screen"
+            }
          >
            <img
              src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
@@ -25,7 +25,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
      updateUserContext({
        databaseAccount: {
          properties: {
-            capabilities: [{ name: "EnableTable" }],
+            capabilities: [{ name: "EnableMongo" }],
          },
        } as DatabaseAccount,
      });
@@ -38,6 +38,38 @@ describe("CommandBarComponentButtonFactory tests", () => {
      );
      expect(enableAzureSynapseLinkBtn).toBeDefined();
    });
+
+    it("Button should not be visible for Tables API", () => {
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableTable" }],
+          },
+        } as DatabaseAccount,
+      });
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const enableAzureSynapseLinkBtn = buttons.find(
+        (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel
+      );
+      expect(enableAzureSynapseLinkBtn).toBeUndefined();
+    });
+
+    it("Button should not be visible for Cassandra API", () => {
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableCassandra" }],
+          },
+        } as DatabaseAccount,
+      });
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      const enableAzureSynapseLinkBtn = buttons.find(
+        (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel
+      );
+      expect(enableAzureSynapseLinkBtn).toBeUndefined();
+    });
  });

  describe("Enable notebook button", () => {
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
@@ -51,11 +51,13 @@ export function createStaticCommandBarButtons(
  const buttons: CommandButtonComponentProps[] = [];

  buttons.push(newCollectionBtn);
+  if (userContext.apiType !== "Tables" && userContext.apiType !== "Cassandra") {
+    const addSynapseLink = createOpenSynapseLinkDialogButton(container);

-  const addSynapseLink = createOpenSynapseLinkDialogButton(container);
-  if (addSynapseLink) {
-    buttons.push(createDivider());
-    buttons.push(addSynapseLink);
+    if (addSynapseLink) {
+      buttons.push(createDivider());
+      buttons.push(addSynapseLink);
+    }
  }

  if (userContext.apiType !== "Tables") {
--- a/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
+++ b/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
@@ -2,13 +2,13 @@ import { Checkbox, Dropdown, IDropdownOption, Link, Stack, Text, TextField } fro
 import * as Constants from "Common/Constants";
 import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
 import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
-import { useSidePanel } from "hooks/useSidePanel";
-import React, { FunctionComponent, useState } from "react";
 import * as SharedConstants from "Shared/Constants";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { isServerlessAccount } from "Utils/CapabilityUtils";
+import { useSidePanel } from "hooks/useSidePanel";
+import React, { FunctionComponent, useState } from "react";
 import { ThroughputInput } from "../../Controls/ThroughputInput/ThroughputInput";
 import Explorer from "../../Explorer";
 import { CassandraAPIDataClient } from "../../Tables/TableDataClient";
@@ -86,7 +86,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
        : `${createKeyspaceQueryPrefix} AND cosmosdb_provisioned_throughput=${newKeySpaceThroughput};`
      : `${createKeyspaceQueryPrefix};`;
    let tableQuery: string;
-    const createTableQueryPrefix = `CREATE TABLE ${keyspaceId}.${tableId.trim()} ${userTableQuery}`;
+    const createTableQueryPrefix = `CREATE TABLE \"${keyspaceId}\".\"${tableId.trim()}\" ${userTableQuery}`;

    if (tableThroughput) {
      if (isTableAutoscale) {
--- a/src/Explorer/Panes/PanelInfoErrorComponent.tsx
+++ b/src/Explorer/Panes/PanelInfoErrorComponent.tsx
@@ -48,7 +48,7 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
          )}
        </Text>
        {showErrorDetails && (
-          <a className="paneErrorLink" role="link" onClick={expandConsole} tabIndex={0} onKeyPress={expandConsole}>
+          <a className="paneErrorLink" role="button" onClick={expandConsole} tabIndex={0} onKeyPress={expandConsole}>
            More details
          </a>
        )}
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
@@ -21,6 +21,11 @@ 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"
@@ -50,6 +55,7 @@ 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);

@@ -185,6 +191,25 @@ 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">
--- a/src/Explorer/Panes/SettingsPane/snapshots/SettingsPane.test.tsx.snap
+++ b/src/Explorer/Panes/SettingsPane/snapshots/SettingsPane.test.tsx.snap
@@ -97,6 +97,35 @@ 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"
    >
@@ -182,6 +211,35 @@ 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"
    >
--- a/src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx
+++ b/src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx
@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import * as Constants from "../../../Common/Constants";
-import { configContext, Platform } from "../../../ConfigContext";
+import { configContext } from "../../../ConfigContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
@@ -9,6 +9,8 @@ import { isInvalidParentFrameOrigin, isReadyMessage } from "../../../Utils/Messa
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
 import TabsBase from "../TabsBase";
+import { getMongoShellOrigin } from "./getMongoShellOrigin";
+import { getMongoShellUrl } from "./getMongoShellUrl";

 //eslint-disable-next-line
 class MessageType {
@@ -47,7 +49,6 @@ export default class MongoShellTabComponent extends Component<
  IMongoShellTabComponentProps,
  IMongoShellTabComponentStates
 > {
-  private _runtimeEndpoint: string;
  private _logTraces: Map<string, number>;

  constructor(props: IMongoShellTabComponentProps) {
@@ -55,7 +56,7 @@ export default class MongoShellTabComponent extends Component<
    this._logTraces = new Map();

    this.state = {
-      url: this.getURL(),
+      url: getMongoShellUrl(),
    };

    props.onMongoShellTabAccessor({
@@ -65,22 +66,6 @@ export default class MongoShellTabComponent extends Component<
    window.addEventListener("message", this.handleMessage.bind(this), false);
  }

-  public getURL(): string {
-    const { databaseAccount: account } = userContext;
-    const resourceId = account?.id;
-    const accountName = account?.name;
-    const mongoEndpoint = account?.properties?.mongoEndpoint || account?.properties?.documentEndpoint;
-
-    this._runtimeEndpoint = configContext.platform === Platform.Hosted ? configContext.BACKEND_ENDPOINT : "";
-    const extensionEndpoint: string = configContext.BACKEND_ENDPOINT || this._runtimeEndpoint || "";
-    let baseUrl = "/content/mongoshell/dist/";
-    if (userContext.portalEnv === "localhost") {
-      baseUrl = "/content/mongoshell/";
-    }
-
-    return `${extensionEndpoint}${baseUrl}index.html?resourceId=${resourceId}&accountName=${accountName}&mongoEndpoint=${mongoEndpoint}`;
-  }
-
  //eslint-disable-next-line
  public setContentFocus(event: React.SyntheticEvent<HTMLIFrameElement, Event>): void {}

@@ -136,6 +121,7 @@ export default class MongoShellTabComponent extends Component<
    const collectionId = this.props.collection.id();
    const apiEndpoint = configContext.BACKEND_ENDPOINT;
    const encryptedAuthToken: string = userContext.accessToken;
+    const targetOrigin = getMongoShellOrigin();

    shellIframe.contentWindow.postMessage(
      {
@@ -151,7 +137,7 @@ export default class MongoShellTabComponent extends Component<
          apiEndpoint: apiEndpoint,
        },
      },
-      configContext.BACKEND_ENDPOINT
+      targetOrigin
    );
  }

--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.test.ts
+++ b/src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.test.ts
@@ -0,0 +1,86 @@
+import { extractFeatures } from "Platform/Hosted/extractFeatures";
+import { configContext } from "../../../ConfigContext";
+import { updateUserContext } from "../../../UserContext";
+import { getMongoShellOrigin } from "./getMongoShellOrigin";
+
+describe("getMongoShellOrigin", () => {
+  (window as { origin: string }).origin = "window_origin";
+
+  beforeEach(() => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV1": "false",
+          "feature.enableLegacyMongoShellV2": "false",
+          "feature.enableLegacyMongoShellV1Debug": "false",
+          "feature.enableLegacyMongoShellV2Debug": "false",
+          "feature.loadLegacyMongoShellFromBE": "false",
+        })
+      ),
+    });
+  });
+
+  it("should return  by default", () => {
+    expect(getMongoShellOrigin()).toBe(window.origin);
+  });
+
+  it("should return window.origin when enableLegacyMongoShellV1", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV1": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellOrigin()).toBe(window.origin);
+  });
+
+  it("should return window.origin when enableLegacyMongoShellV2===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV2": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellOrigin()).toBe(window.origin);
+  });
+
+  it("should return window.origin when enableLegacyMongoShellV1Debug===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV1Debug": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellOrigin()).toBe(window.origin);
+  });
+
+  it("should return window.origin when enableLegacyMongoShellV2Debug===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV2Debug": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellOrigin()).toBe(window.origin);
+  });
+
+  it("should return BACKEND_ENDPOINT when loadLegacyMongoShellFromBE===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.loadLegacyMongoShellFromBE": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellOrigin()).toBe(configContext.BACKEND_ENDPOINT);
+  });
+});
--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.ts
+++ b/src/Explorer/Tabs/MongoShellTab/getMongoShellOrigin.ts
@@ -0,0 +1,10 @@
+import { configContext } from "../../../ConfigContext";
+import { userContext } from "../../../UserContext";
+
+export function getMongoShellOrigin(): string {
+  if (userContext.features.loadLegacyMongoShellFromBE === true) {
+    return configContext.BACKEND_ENDPOINT;
+  }
+
+  return window.origin;
+}
--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts
+++ b/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts
@@ -0,0 +1,206 @@
+import { extractFeatures } from "Platform/Hosted/extractFeatures";
+import { Platform, configContext, resetConfigContext, updateConfigContext } from "../../../ConfigContext";
+import { updateUserContext, userContext } from "../../../UserContext";
+import { getExtensionEndpoint, getMongoShellUrl } from "./getMongoShellUrl";
+
+const mongoBackendEndpoint = "https://localhost:1234";
+
+describe("getMongoShellUrl", () => {
+  let queryString = "";
+
+  beforeEach(() => {
+    resetConfigContext();
+
+    updateConfigContext({
+      BACKEND_ENDPOINT: mongoBackendEndpoint,
+      platform: Platform.Hosted,
+    });
+
+    updateUserContext({
+      subscriptionId: "fakeSubscriptionId",
+      resourceGroup: "fakeResourceGroup",
+      databaseAccount: {
+        id: "fakeId",
+        name: "fakeName",
+        location: "fakeLocation",
+        type: "fakeType",
+        kind: "fakeKind",
+        properties: {
+          documentEndpoint: "fakeDocumentEndpoint",
+          tableEndpoint: "fakeTableEndpoint",
+          gremlinEndpoint: "fakeGremlinEndpoint",
+          cassandraEndpoint: "fakeCassandraEndpoint",
+        },
+      },
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV1": "false",
+          "feature.enableLegacyMongoShellV2": "false",
+          "feature.enableLegacyMongoShellV1Debug": "false",
+          "feature.enableLegacyMongoShellV2Debug": "false",
+          "feature.loadLegacyMongoShellFromBE": "false",
+        })
+      ),
+      portalEnv: "prod",
+    });
+
+    queryString = `resourceId=${userContext.databaseAccount.id}&accountName=${userContext.databaseAccount.name}&mongoEndpoint=${userContext.databaseAccount.properties.documentEndpoint}`;
+  });
+
+  it("should return /mongoshell/indexv2.html by default ", () => {
+    expect(getMongoShellUrl()).toBe(`/mongoshell/indexv2.html?${queryString}`);
+  });
+
+  it("should return /mongoshell/indexv2.html when portalEnv==localhost ", () => {
+    updateUserContext({
+      portalEnv: "localhost",
+    });
+
+    expect(getMongoShellUrl()).toBe(`/mongoshell/indexv2.html?${queryString}`);
+  });
+
+  it("should return /mongoshell/index.html when enableLegacyMongoShellV1===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV1": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellUrl()).toBe(`/mongoshell/index.html?${queryString}`);
+  });
+
+  it("should return /mongoshell/index.html when enableLegacyMongoShellV2===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV2": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellUrl()).toBe(`/mongoshell/indexv2.html?${queryString}`);
+  });
+
+  it("should return /mongoshell/index.html when enableLegacyMongoShellV1Debug===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV1Debug": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellUrl()).toBe(`/mongoshell/debug/index.html?${queryString}`);
+  });
+
+  it("should return /mongoshell/index.html when enableLegacyMongoShellV2Debug===true", () => {
+    updateUserContext({
+      features: extractFeatures(
+        new URLSearchParams({
+          "feature.enableLegacyMongoShellV2Debug": "true",
+        })
+      ),
+    });
+
+    expect(getMongoShellUrl()).toBe(`/mongoshell/debug/indexv2.html?${queryString}`);
+  });
+
+  describe("loadLegacyMongoShellFromBE===true", () => {
+    beforeEach(() => {
+      resetConfigContext();
+      updateConfigContext({
+        BACKEND_ENDPOINT: mongoBackendEndpoint,
+        platform: Platform.Hosted,
+      });
+
+      updateUserContext({
+        features: extractFeatures(
+          new URLSearchParams({
+            "feature.loadLegacyMongoShellFromBE": "true",
+          })
+        ),
+      });
+    });
+
+    it("should return /mongoshell/index.html", () => {
+      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
+      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
+    });
+
+    it("configContext.platform !== Platform.Hosted, should return /mongoshell/indexv2.html", () => {
+      updateConfigContext({
+        platform: Platform.Portal,
+      });
+
+      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
+      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
+    });
+
+    it("configContext.BACKEND_ENDPOINT !== '' and configContext.platform !== Platform.Hosted, should return /mongoshell/indexv2.html", () => {
+      resetConfigContext();
+      updateConfigContext({
+        platform: Platform.Portal,
+        BACKEND_ENDPOINT: mongoBackendEndpoint,
+      });
+
+      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
+      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
+    });
+
+    it("configContext.BACKEND_ENDPOINT === '' and configContext.platform === Platform.Hosted, should return /mongoshell/indexv2.html ", () => {
+      resetConfigContext();
+      updateConfigContext({
+        platform: Platform.Hosted,
+      });
+
+      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
+      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
+    });
+
+    it("configContext.BACKEND_ENDPOINT === '' and configContext.platform !== Platform.Hosted, should return /mongoshell/indexv2.html", () => {
+      resetConfigContext();
+      updateConfigContext({
+        platform: Platform.Portal,
+      });
+
+      const endpoint = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
+      expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
+    });
+  });
+});
+
+describe("getExtensionEndpoint", () => {
+  it("when platform === Platform.Hosted, backendEndpoint is undefined ", () => {
+    expect(getExtensionEndpoint(Platform.Hosted, undefined)).toBe("");
+  });
+
+  it("when platform === Platform.Hosted, backendEndpoint === ''", () => {
+    expect(getExtensionEndpoint(Platform.Hosted, "")).toBe("");
+  });
+
+  it("when platform === Platform.Hosted, backendEndpoint === null", () => {
+    expect(getExtensionEndpoint(Platform.Hosted, null)).toBe("");
+  });
+
+  it("when platform === Platform.Hosted, backendEndpoint != '' ", () => {
+    expect(getExtensionEndpoint(Platform.Hosted, "foo")).toBe("foo");
+  });
+
+  it("when platform === Platform.Portal, backendEndpoint is udefined ", () => {
+    expect(getExtensionEndpoint(Platform.Portal, undefined)).toBe("");
+  });
+
+  it("when platform === Platform.Portal, backendEndpoint === '' ", () => {
+    expect(getExtensionEndpoint(Platform.Portal, "")).toBe("");
+  });
+
+  it("when platform === Platform.Portal, backendEndpoint === null", () => {
+    expect(getExtensionEndpoint(Platform.Portal, null)).toBe("");
+  });
+
+  it("when platform !== Platform.Portal, backendEndpoint != '' ", () => {
+    expect(getExtensionEndpoint(Platform.Portal, "foo")).toBe("foo");
+  });
+});
--- a/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts
+++ b/src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.ts
@@ -0,0 +1,45 @@
+import { configContext, Platform } from "../../../ConfigContext";
+import { userContext } from "../../../UserContext";
+
+export function getMongoShellUrl(): string {
+  const { databaseAccount: account } = userContext;
+  const resourceId = account?.id;
+  const accountName = account?.name;
+  const mongoEndpoint = account?.properties?.mongoEndpoint || account?.properties?.documentEndpoint;
+  const queryString = `resourceId=${resourceId}&accountName=${accountName}&mongoEndpoint=${mongoEndpoint}`;
+
+  if (userContext.features.enableLegacyMongoShellV1 === true) {
+    return `/mongoshell/index.html?${queryString}`;
+  }
+
+  if (userContext.features.enableLegacyMongoShellV1Debug === true) {
+    return `/mongoshell/debug/index.html?${queryString}`;
+  }
+
+  if (userContext.features.enableLegacyMongoShellV2 === true) {
+    return `/mongoshell/indexv2.html?${queryString}`;
+  }
+
+  if (userContext.features.enableLegacyMongoShellV2Debug === true) {
+    return `/mongoshell/debug/indexv2.html?${queryString}`;
+  }
+
+  if (userContext.portalEnv === "localhost") {
+    return `/mongoshell/indexv2.html?${queryString}`;
+  }
+
+  if (userContext.features.loadLegacyMongoShellFromBE === true) {
+    const extensionEndpoint: string = getExtensionEndpoint(configContext.platform, configContext.BACKEND_ENDPOINT);
+    return `${extensionEndpoint}/content/mongoshell/debug/index.html?${queryString}`;
+  }
+
+  return `/mongoshell/indexv2.html?${queryString}`;
+}
+
+export function getExtensionEndpoint(platform: string, backendEndpoint: string): string {
+  const runtimeEndpoint = platform === Platform.Hosted ? backendEndpoint : "";
+
+  const extensionEndpoint: string = backendEndpoint || runtimeEndpoint || "";
+
+  return extensionEndpoint;
+}
--- a/src/Explorer/Tree/Database.tsx
+++ b/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 } from "../../Common/dataAccess/readCollections";
+import { readCollections, readCollectionsWithPagination } from "../../Common/dataAccess/readCollections";
 import { readDatabaseOffer } from "../../Common/dataAccess/readDatabaseOffer";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import * as Logger from "../../Common/Logger";
@@ -13,6 +13,7 @@ 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";
@@ -38,6 +39,7 @@ 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) {
@@ -140,7 +142,11 @@ 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",
@@ -162,9 +168,31 @@ export default class Database implements ViewModels.Database {
    });
  }

-  public async loadCollections(): Promise<void> {
+  public async loadCollections(restart = false) {
    const collectionVMs: Collection[] = [];
-    const collections: DataModels.Collection[] = await readCollections(this.id());
+    let collections: DataModels.Collection[] = [];
+    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) {
@@ -199,7 +227,9 @@ export default class Database implements ViewModels.Database {

    //merge collections
    this.addCollectionsToList(collectionVMs);
-    this.deleteCollectionsFromList(deltaCollections.toDelete);
+    if (!containerPaginationEnabled || restart) {
+      this.deleteCollectionsFromList(deltaCollections.toDelete);
+    }

    useDatabases.getState().updateDatabase(this);
  }
--- a/src/Explorer/Tree/ResourceTree.tsx
+++ b/src/Explorer/Tree/ResourceTree.tsx
@@ -479,6 +479,18 @@ 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))
--- a/src/Platform/Hosted/extractFeatures.ts
+++ b/src/Platform/Hosted/extractFeatures.ts
@@ -30,6 +30,11 @@ export type Features = {
  readonly mongoProxyAPIs?: string;
  readonly enableThroughputCap: boolean;
  readonly enableHierarchicalKeys: boolean;
+  readonly enableLegacyMongoShellV1: boolean;
+  readonly enableLegacyMongoShellV1Debug: boolean;
+  readonly enableLegacyMongoShellV2: boolean;
+  readonly enableLegacyMongoShellV2Debug: boolean;
+  readonly loadLegacyMongoShellFromBE: boolean;

  // can be set via both flight and feature flag
  autoscaleDefault: boolean;
@@ -92,6 +97,11 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
    notebooksDownBanner: "true" === get("notebooksDownBanner"),
    enableThroughputCap: "true" === get("enablethroughputcap"),
    enableHierarchicalKeys: "true" === get("enablehierarchicalkeys"),
+    enableLegacyMongoShellV1: "true" === get("enablelegacymongoshellv1"),
+    enableLegacyMongoShellV1Debug: "true" === get("enablelegacymongoshellv1debug"),
+    enableLegacyMongoShellV2: "true" === get("enablelegacymongoshellv2"),
+    enableLegacyMongoShellV2Debug: "true" === get("enablelegacymongoshellv2debug"),
+    loadLegacyMongoShellFromBE: "true" === get("loadlegacymongoshellfrombe"),
  };
 }

--- a/src/Shared/StorageUtility.ts
+++ b/src/Shared/StorageUtility.ts
@@ -4,6 +4,7 @@ import * as SessionStorageUtility from "./SessionStorageUtility";
 export { LocalStorageUtility, SessionStorageUtility };
 export enum StorageKey {
  ActualItemPerPage,
+  ContainerPaginationEnabled,
  CustomItemPerPage,
  DatabaseAccountId,
  EncryptedKeyToken,
Author	SHA1	Message	Date
Asier Isayas	c13759f392	add quotes to keyspace and table name for create table	2023-04-27 16:55:28 -04:00
MokireddySampath	a526410e44	Defect 2280429 (#1416 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * refresh, expand, collapse tree does not have proper label for screenreader * wrong role is assigned to anchor link * descriptive alt added for iconspresent for DATA and NOTEBOOK accordion headers * Update CollapsedResourceTree.tsx * Update ResourceTreeContainer.tsx * Update ResourceTreeContainer.tsx * Update TableEntity.tsx * Update treeComponent.less * Update MiddlePaneComponent.tsx * Update PanelInfoErrorComponent.tsx	2023-04-25 21:04:29 +05:30
MokireddySampath	58cb85156c	Defect 2278539 (#1415 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * refresh, expand, collapse tree does not have proper label for screenreader * wrong role is assigned to anchor link * Update MiddlePaneComponent.tsx * Update treeComponent.less * Update CollapsedResourceTree.tsx * Update ResourceTreeContainer.tsx * Update TableEntity.tsx * Update ResourceTreeContainer.tsx	2023-04-25 21:04:12 +05:30
MokireddySampath	dd5ccade2b	Defect 2280418 (#1414 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * refresh, expand, collapse tree does not have proper label for screenreader * Update treeComponent.less * Update TableEntity.tsx * Update MiddlePaneComponent.tsx	2023-04-25 21:03:51 +05:30
MokireddySampath	38ebef6c02	Defect 2276941 (#1413 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * aria-label for table max RU/s input element is not defined properly * Update TableEntity.tsx * Update treeComponent.less * Update MiddlePaneComponent.tsx	2023-04-25 21:03:35 +05:30
MokireddySampath	7ad5862e8f	Defect 2280272 (#1412 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * Update treeComponent.less	2023-04-25 21:03:12 +05:30
sindhuba	755b732532	Remove Enable Azure synapse link for Cassandra (#1427 )	2023-04-10 10:18:57 -07:00
sindhuba	1b5a9b83ff	Remove Enable Azure Synapse link button for Tables API (#1425 )	2023-04-07 08:47:23 -07:00
Armando Trejo Oliver	fb8871cfbf	Load Legacy Mongo Shell V2 by default (#1424 ) - Load Legacy Mongo Shell V2 by default - Add/Keep feature flags to load from portal BE and V1 - Skip code coverage if skipCodeCoverage environment variable is set to "true"	2023-04-06 10:13:05 -07:00
Armando Trejo Oliver	874cec26fc	Fix CORS issue using Mongo Shell from new origin (#1422 ) * Fix CORS issue using Mongo Shell from new origin * Add unit tests for getMongoShellOrigin and getMongoShellUrl * Fix lint errors	2023-04-04 18:19:18 -07:00
Armando Trejo Oliver	9d2d0e4754	Add feature flags to test Legacy Mongo Shell (#1421 ) Add feature flags to test Legacy Mongo Shell	2023-04-04 10:28:42 -07:00
MokireddySampath	c7c894d6d9	Sampath accessibility sev 2 2 (#1404 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * color for placeholder changed to 767474, margin is set to accommodate height between treeheader elements * padding added for databaseheader, removed margin and restored padding to treenodeheader	2023-04-03 22:11:40 +05:30
Asier Isayas	547954c3dc	Lazy loading containers (#1411 ) Co-authored-by: Asier Isayas <aisayas@microsoft.com>	2023-03-30 14:53:36 -07:00