Missing vs code button and image (#2155)

* Reverting back to popup by default as too many factors are present using a timeout

* Added telemetry constant for VSCode

* VSCode image and button

.npmrc

@@ -1,6 +1,4 @@
 save-exact=true
-registry=https://msdata.pkgs.visualstudio.com/_packaging/cosmosdbportal/npm/registry/
+
-always-auth=true
-allow-same-version=true
 # Ignore peer dependency conflicts
 force=true # TODO: Remove this when we update to React 17 or higher!

.vscode/settings.json

@@ -24,6 +24,5 @@
     "source.organizeImports": "explicit"
   },
   "typescript.preferences.importModuleSpecifier": "non-relative",
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
-  "sarif-viewer.connectToGithubCodeScanning": "off"
 }

src/Common/Tooltip/InfoTooltip.tsx

@@ -4,18 +4,13 @@ import * as React from "react";
 export interface TooltipProps {
   children: string;
   className?: string;
-  ariaLabelForTooltip?: string;
 }
 
-export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({
+export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({ children, className }: TooltipProps) => {
-  children,
-  className,
-  ariaLabelForTooltip = children,
-}: TooltipProps) => {
   return (
     <span className={className}>
       <TooltipHost content={children}>
-        <Icon iconName="Info" aria-label={ariaLabelForTooltip} className="panelInfoIcon" tabIndex={0} />
+        <Icon iconName="Info" ariaLabel={children} className="panelInfoIcon" tabIndex={0} />
       </TooltipHost>
     </span>
   );

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

@@ -143,39 +143,4 @@ describe("SubSettingsComponent", () => {
     expect(subSettingsComponentInstance.getTtlValue(TtlType.On)).toEqual(TtlOn);
     expect(subSettingsComponentInstance.getTtlValue(TtlType.Off)).toEqual(TtlOff);
   });
-
-  it("uniqueKey is visible", () => {
-    updateUserContext({
-      databaseAccount: {
-        properties: {
-          capabilities: [{ name: "EnableSQL" }],
-        },
-      } as DatabaseAccount,
-    });
-    const subSettingsComponent = new SubSettingsComponent(baseProps);
-    expect(subSettingsComponent.getUniqueKeyVisible()).toEqual(true);
-  });
-
-  it("uniqueKey not visible due to no keys", () => {
-    const props = {
-      ...baseProps,
-      ...(baseProps.collection.rawDataModel.uniqueKeyPolicy.uniqueKeys = []),
-    };
-    const subSettingsComponent = new SubSettingsComponent(props);
-    expect(subSettingsComponent.getUniqueKeyVisible()).toEqual(false);
-  });
-
-  it("uniqueKey not visible for API", () => {
-    const newContainer = new Explorer();
-    updateUserContext({
-      databaseAccount: {
-        properties: {
-          capabilities: [{ name: "EnableMongo" }],
-        },
-      } as DatabaseAccount,
-    });
-    const props = { ...baseProps, container: newContainer };
-    const subSettingsComponent = new SubSettingsComponent(props);
-    expect(subSettingsComponent.getUniqueKeyVisible()).toEqual(false);
-  });
 });

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

@@ -63,16 +63,12 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
   private geospatialVisible: boolean;
   private partitionKeyValue: string;
   private partitionKeyName: string;
-  private uniqueKeyName: string;
-  private uniqueKeyValue: string;
 
   constructor(props: SubSettingsComponentProps) {
     super(props);
     this.geospatialVisible = userContext.apiType === "SQL";
     this.partitionKeyName = userContext.apiType === "Mongo" ? "Shard key" : "Partition key";
     this.partitionKeyValue = this.getPartitionKeyValue();
-    this.uniqueKeyName = "Unique keys";
-    this.uniqueKeyValue = this.getUniqueKeyValue();
   }
 
   componentDidMount(): void {
@@ -355,28 +351,6 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
   public isLargePartitionKeyEnabled = (): boolean => this.props.collection.partitionKey?.version >= 2;
   public isHierarchicalPartitionedContainer = (): boolean => this.props.collection.partitionKey?.kind === "MultiHash";
 
-  public getUniqueKeyVisible = (): boolean => {
-    return this.props.collection.rawDataModel.uniqueKeyPolicy?.uniqueKeys.length > 0 && userContext.apiType === "SQL";
-  };
-
-  private getUniqueKeyValue = (): string => {
-    const paths = this.props.collection.rawDataModel.uniqueKeyPolicy?.uniqueKeys?.[0]?.paths;
-    return paths?.join(", ") || "";
-  };
-
-  private getUniqueKeyComponent = (): JSX.Element => (
-    <Stack {...titleAndInputStackProps}>
-      {this.getUniqueKeyVisible() && (
-        <TextField
-          label={this.uniqueKeyName}
-          disabled
-          styles={getTextFieldStyles(undefined, undefined)}
-          defaultValue={this.uniqueKeyValue}
-        />
-      )}
-    </Stack>
-  );
-
   public render(): JSX.Element {
     return (
       <Stack {...subComponentStackProps}>
@@ -389,8 +363,6 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
         {this.props.changeFeedPolicyVisible && this.getChangeFeedComponent()}
 
         {this.getPartitionKeyComponent()}
-
-        {this.getUniqueKeyComponent()}
       </Stack>
     );
   }

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

@@ -231,34 +231,6 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
       Non-hierarchically partitioned container.
     </Text>
   </Stack>
-  <Stack
-    tokens={
-      {
-        "childrenGap": 5,
-      }
-    }
-  >
-    <StyledTextFieldBase
-      defaultValue="/id"
-      disabled={true}
-      label="Unique keys"
-      styles={
-        {
-          "fieldGroup": {
-            "borderColor": "",
-            "height": 25,
-            "selectors": {
-              ":disabled": {
-                "backgroundColor": undefined,
-                "borderColor": undefined,
-              },
-            },
-            "width": 300,
-          },
-        }
-      }
-    />
-  </Stack>
 </Stack>
 `;
 
@@ -548,34 +520,6 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
       Non-hierarchically partitioned container.
     </Text>
   </Stack>
-  <Stack
-    tokens={
-      {
-        "childrenGap": 5,
-      }
-    }
-  >
-    <StyledTextFieldBase
-      defaultValue="/id"
-      disabled={true}
-      label="Unique keys"
-      styles={
-        {
-          "fieldGroup": {
-            "borderColor": "",
-            "height": 25,
-            "selectors": {
-              ":disabled": {
-                "backgroundColor": undefined,
-                "borderColor": undefined,
-              },
-            },
-            "width": 300,
-          },
-        }
-      }
-    />
-  </Stack>
 </Stack>
 `;
 
@@ -825,34 +769,6 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
       Non-hierarchically partitioned container.
     </Text>
   </Stack>
-  <Stack
-    tokens={
-      {
-        "childrenGap": 5,
-      }
-    }
-  >
-    <StyledTextFieldBase
-      defaultValue="/id"
-      disabled={true}
-      label="Unique keys"
-      styles={
-        {
-          "fieldGroup": {
-            "borderColor": "",
-            "height": 25,
-            "selectors": {
-              ":disabled": {
-                "backgroundColor": undefined,
-                "borderColor": undefined,
-              },
-            },
-            "width": 300,
-          },
-        }
-      }
-    />
-  </Stack>
 </Stack>
 `;
 
@@ -1167,34 +1083,6 @@ exports[`SubSettingsComponent renders 1`] = `
       Non-hierarchically partitioned container.
     </Text>
   </Stack>
-  <Stack
-    tokens={
-      {
-        "childrenGap": 5,
-      }
-    }
-  >
-    <StyledTextFieldBase
-      defaultValue="/id"
-      disabled={true}
-      label="Unique keys"
-      styles={
-        {
-          "fieldGroup": {
-            "borderColor": "",
-            "height": 25,
-            "selectors": {
-              ":disabled": {
-                "backgroundColor": undefined,
-                "borderColor": undefined,
-              },
-            },
-            "width": 300,
-          },
-        }
-      }
-    />
-  </Stack>
 </Stack>
 `;
 
@@ -1483,33 +1371,5 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
       Non-hierarchically partitioned container.
     </Text>
   </Stack>
-  <Stack
-    tokens={
-      {
-        "childrenGap": 5,
-      }
-    }
-  >
-    <StyledTextFieldBase
-      defaultValue="/id"
-      disabled={true}
-      label="Unique keys"
-      styles={
-        {
-          "fieldGroup": {
-            "borderColor": "",
-            "height": 25,
-            "selectors": {
-              ":disabled": {
-                "backgroundColor": undefined,
-                "borderColor": undefined,
-              },
-            },
-            "width": 300,
-          },
-        }
-      }
-    />
-  </Stack>
 </Stack>
 `;

src/Explorer/Controls/Settings/TestUtils.tsx

@@ -17,15 +17,7 @@ export const collection = {
     includedPaths: [],
     excludedPaths: [],
   }),
-  rawDataModel: {
+  uniqueKeyPolicy: {} as DataModels.UniqueKeyPolicy,
-    uniqueKeyPolicy: {
-      uniqueKeys: [
-        {
-          paths: ["/id"],
-        },
-      ],
-    },
-  },
   usageSizeInKB: ko.observable(100),
   offer: ko.observable<DataModels.Offer>({
     autoscaleMaxThroughput: undefined,

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

@@ -71,18 +71,8 @@ exports[`SettingsComponent renders 1`] = `
               "partitionKeyProperties": [
                 "partitionKey",
               ],
-              "rawDataModel": {
-                "uniqueKeyPolicy": {
-                  "uniqueKeys": [
-                    {
-                      "paths": [
-                        "/id",
-                      ],
-                    },
-                  ],
-                },
-              },
               "readSettings": [Function],
+              "uniqueKeyPolicy": {},
               "usageSizeInKB": [Function],
               "vectorEmbeddingPolicy": [Function],
             }
@@ -163,18 +153,8 @@ exports[`SettingsComponent renders 1`] = `
               "partitionKeyProperties": [
                 "partitionKey",
               ],
-              "rawDataModel": {
-                "uniqueKeyPolicy": {
-                  "uniqueKeys": [
-                    {
-                      "paths": [
-                        "/id",
-                      ],
-                    },
-                  ],
-                },
-              },
               "readSettings": [Function],
+              "uniqueKeyPolicy": {},
               "usageSizeInKB": [Function],
               "vectorEmbeddingPolicy": [Function],
             }
@@ -294,18 +274,8 @@ exports[`SettingsComponent renders 1`] = `
               "partitionKeyProperties": [
                 "partitionKey",
               ],
-              "rawDataModel": {
-                "uniqueKeyPolicy": {
-                  "uniqueKeys": [
-                    {
-                      "paths": [
-                        "/id",
-                      ],
-                    },
-                  ],
-                },
-              },
               "readSettings": [Function],
+              "uniqueKeyPolicy": {},
               "usageSizeInKB": [Function],
               "vectorEmbeddingPolicy": [Function],
             }
@@ -434,18 +404,8 @@ exports[`SettingsComponent renders 1`] = `
               "partitionKeyProperties": [
                 "partitionKey",
               ],
-              "rawDataModel": {
-                "uniqueKeyPolicy": {
-                  "uniqueKeys": [
-                    {
-                      "paths": [
-                        "/id",
-                      ],
-                    },
-                  ],
-                },
-              },
               "readSettings": [Function],
+              "uniqueKeyPolicy": {},
               "usageSizeInKB": [Function],
               "vectorEmbeddingPolicy": [Function],
             }

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

@@ -44,18 +44,13 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
   const currencySign: string = getCurrencySign(serverId);
   const multiplier = getMultimasterMultiplier(numberOfRegions, multimasterEnabled);
   const pricePerRu = isAutoscale ? getAutoscalePricePerRu(serverId, multiplier) : getPricePerRu(serverId, multiplier);
-  const estimatedMonthlyCost = "Estimated monthly cost";
 
-  const iconWithEstimatedCostDisclaimer: JSX.Element = (
+  const iconWithEstimatedCostDisclaimer: JSX.Element = <InfoTooltip>{estimatedCostDisclaimer}</InfoTooltip>;
-    <InfoTooltip ariaLabelForTooltip={`${estimatedMonthlyCost} ${currency} ${estimatedCostDisclaimer}`}>
-      {estimatedCostDisclaimer}
-    </InfoTooltip>
-  );
 
   if (isAutoscale) {
     return (
       <Text variant="small">
-        {estimatedMonthlyCost} ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
+        Estimated monthly cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
         <b>
           {currencySign + calculateEstimateNumber(monthlyPrice / 10)} -{" "}
           {currencySign + calculateEstimateNumber(monthlyPrice)}{" "}

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

@@ -345,13 +345,13 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                   role="none"
                 >
                   <StyledIconBase
-                    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."
+                    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"
                     tabIndex={0}
                   >
                     <IconBase
-                      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."
+                      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"
                       styles={[Function]}
@@ -1358,13 +1358,13 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       role="none"
                     >
                       <StyledIconBase
-                        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."
+                        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"
                         tabIndex={0}
                       >
                         <IconBase
-                          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."
+                          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"
                           styles={[Function]}

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -517,6 +517,7 @@ export function createPostgreButtons(container: Explorer): CommandButtonComponen
 
 export function createVCoreMongoButtons(container: Explorer): CommandButtonComponentProps[] {
   const openVCoreMongoTerminalButton = createOpenTerminalButtonByKind(container, ViewModels.TerminalKind.VCoreMongo);
+
   const addVsCode = createOpenVsCodeDialogButton(container);
   return [openVCoreMongoTerminalButton, addVsCode];
 }

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -608,7 +608,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     <RightPaneForm {...genericPaneProps}>
       <div className={`paneMainContent ${styles.container}`}>
         {!isFabricNative() && (
-          <Accordion className={`customAccordion ${styles.firstItem}`} collapsible>
+          <Accordion className={`customAccordion ${styles.firstItem}`}>
             {shouldShowQueryPageOptions && (
               <AccordionItem value="1">
                 <AccordionHeader>

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

@@ -12,7 +12,6 @@ exports[`Settings Pane should render Default properly 1`] = `
   >
     <Accordion
       className="customAccordion ___1uf6361_0000000 fz7g6wx"
-      collapsible={true}
     >
       <AccordionItem
         value="1"
@@ -574,7 +573,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
   >
     <Accordion
       className="customAccordion ___1uf6361_0000000 fz7g6wx"
-      collapsible={true}
     >
       <AccordionItem
         value="7"

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

@@ -356,7 +356,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
             value=""
           >
             <div
-              className="ms-TextField is-required root-116"
+              className="ms-TextField is-required root-110"
             >
               <div
                 className="ms-TextField-wrapper"
@@ -647,7 +647,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                     }
                   >
                     <label
-                      className="ms-Label root-127"
+                      className="ms-Label root-121"
                       htmlFor="TextField0"
                       id="TextFieldLabel2"
                     >
@@ -656,13 +656,13 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                   </LabelBase>
                 </StyledLabelBase>
                 <div
-                  className="ms-TextField-fieldGroup fieldGroup-117"
+                  className="ms-TextField-fieldGroup fieldGroup-111"
                 >
                   <input
                     aria-invalid={false}
                     aria-labelledby="TextFieldLabel2"
                     autoFocus={true}
-                    className="ms-TextField-field field-118"
+                    className="ms-TextField-field field-112"
                     id="TextField0"
                     name="collectionIdConfirmation"
                     onBlur={[Function]}
@@ -2464,7 +2464,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                       >
                         <button
                           aria-label="Create"
-                          className="ms-Button ms-Button--primary root-128"
+                          className="ms-Button ms-Button--primary root-122"
                           data-is-focusable={true}
                           data-test="Panel/OkButton"
                           id="sidePanelOkButton"
@@ -2477,14 +2477,14 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                           type="submit"
                         >
                           <span
-                            className="ms-Button-flexContainer flexContainer-129"
+                            className="ms-Button-flexContainer flexContainer-123"
                             data-automationid="splitbuttonprimary"
                           >
                             <span
-                              className="ms-Button-textContainer textContainer-130"
+                              className="ms-Button-textContainer textContainer-124"
                             >
                               <span
-                                className="ms-Button-label label-132"
+                                className="ms-Button-label label-126"
                                 id="id__5"
                                 key="id__5"
                               >

src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx

@@ -2,13 +2,9 @@ import {
   DetailsList,
   DetailsListLayoutMode,
   DirectionalHint,
-  FontIcon,
   IColumn,
   SelectionMode,
   TooltipHost,
-  getTheme,
-  mergeStyles,
-  mergeStyleSets,
 } from "@fluentui/react";
 import { Upload } from "Common/Upload/Upload";
 import { UploadDetailsRecord } from "Contracts/ViewModels";
@@ -18,36 +14,6 @@ import { getErrorMessage } from "../../Tables/Utilities";
 import { useSelectedNode } from "../../useSelectedNode";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
-const theme = getTheme();
-const iconClass = mergeStyles({
-  verticalAlign: "middle",
-  maxHeight: "16px",
-  maxWidth: "16px",
-});
-
-const classNames = mergeStyleSets({
-  fileIconHeaderIcon: {
-    padding: 0,
-    fontSize: "16px",
-  },
-  fileIconCell: {
-    textAlign: "center",
-    selectors: {
-      "&:before": {
-        content: ".",
-        display: "inline-block",
-        verticalAlign: "middle",
-        height: "100%",
-        width: "0px",
-        visibility: "hidden",
-      },
-    },
-  },
-  error: [{ color: theme.semanticColors.errorIcon }, iconClass],
-  accept: [{ color: theme.semanticColors.successIcon }, iconClass],
-  warning: [{ color: theme.semanticColors.warningIcon }, iconClass],
-});
-
 export const UploadItemsPane: FunctionComponent = () => {
   const [files, setFiles] = useState<FileList>();
   const [uploadFileData, setUploadFileData] = useState<UploadDetailsRecord[]>([]);
@@ -94,94 +60,44 @@ export const UploadItemsPane: FunctionComponent = () => {
   };
 
   const columns: IColumn[] = [
-    {
-      key: "icons",
-      name: "",
-      fieldName: "",
-      className: classNames.fileIconCell,
-      iconClassName: classNames.fileIconHeaderIcon,
-      isIconOnly: true,
-      minWidth: 16,
-      maxWidth: 16,
-      onRender: (item: UploadDetailsRecord, index: number, column: IColumn) => {
-        if (item.numFailed) {
-          const errorList = (
-            <ul
-              aria-label={"error list"}
-              style={{
-                margin: "5px 0",
-                paddingLeft: "20px",
-                listStyleType: "disc", // Explicitly set to use bullets (dots)
-              }}
-            >
-              {item.errors.map((error, i) => (
-                <li key={i} style={{ display: "list-item" }}>
-                  {error}
-                </li>
-              ))}
-            </ul>
-          );
-
-          return (
-            <TooltipHost
-              content={errorList}
-              id={`tooltip-${index}-${column.key}`}
-              directionalHint={DirectionalHint.bottomAutoEdge}
-            >
-              <FontIcon iconName="Error" className={classNames.error} aria-label="error" />
-            </TooltipHost>
-          );
-        } else if (item.numThrottled) {
-          return <FontIcon iconName="Warning" className={classNames.warning} aria-label="warning" />;
-        } else {
-          return <FontIcon iconName="Accept" className={classNames.accept} aria-label="accept" />;
-        }
-      },
-    },
     {
       key: "fileName",
       name: "FILE NAME",
       fieldName: "fileName",
-      minWidth: 120,
+      minWidth: 140,
       maxWidth: 140,
-      onRender: (item: UploadDetailsRecord, index: number, column: IColumn) => {
-        const fieldContent = item.fileName;
-        return (
-          <TooltipHost
-            content={fieldContent}
-            id={`tooltip-${index}-${column.key}`}
-            directionalHint={DirectionalHint.bottomAutoEdge}
-          >
-            {fieldContent}
-          </TooltipHost>
-        );
-      },
     },
     {
       key: "status",
       name: "STATUS",
       fieldName: "numSucceeded",
-      minWidth: 120,
+      minWidth: 140,
       maxWidth: 140,
       isRowHeader: true,
       isResizable: true,
       data: "string",
       isPadded: true,
-      onRender: (item: UploadDetailsRecord, index: number, column: IColumn) => {
-        const fieldContent = `${item.numSucceeded} created, ${item.numThrottled} throttled, ${item.numFailed} errors`;
-        return (
-          <TooltipHost
-            content={fieldContent}
-            id={`tooltip-${index}-${column.key}`}
-            directionalHint={DirectionalHint.bottomAutoEdge}
-          >
-            {fieldContent}
-          </TooltipHost>
-        );
-      },
     },
   ];
 
+  const _renderItemColumn = (item: UploadDetailsRecord, index: number, column: IColumn) => {
+    let fieldContent: string;
+    const tooltipId = `tooltip-${index}-${column.key}`;
+
+    switch (column.key) {
+      case "status":
+        fieldContent = `${item.numSucceeded} created, ${item.numThrottled} throttled, ${item.numFailed} errors`;
+        break;
+      default:
+        fieldContent = item.fileName;
+    }
+    return (
+      <TooltipHost content={fieldContent} id={tooltipId} directionalHint={DirectionalHint.rightCenter}>
+        {fieldContent}
+      </TooltipHost>
+    );
+  };
+
   return (
     <RightPaneForm {...props}>
       <div className="paneMainContent">
@@ -199,6 +115,7 @@ export const UploadItemsPane: FunctionComponent = () => {
             <DetailsList
               items={uploadFileData}
               columns={columns}
+              onRenderItemColumn={_renderItemColumn}
               selectionMode={SelectionMode.none}
               layoutMode={DetailsListLayoutMode.justified}
               isHeaderVisible={true}

src/Explorer/Sidebar.tsx

@@ -30,10 +30,8 @@ import { KeyboardAction, KeyboardActionGroup, KeyboardActionHandler, useKeyboard
 import { isFabric, isFabricMirrored, isFabricNative, isFabricNativeReadOnly } from "Platform/Fabric/FabricUtil";
 import { userContext } from "UserContext";
 import { getCollectionName, getDatabaseName } from "Utils/APITypeUtils";
-import { conditionalClass } from "Utils/StyleUtils";
 import { Allotment, AllotmentHandle } from "allotment";
 import { useSidePanel } from "hooks/useSidePanel";
-import useZoomLevel from "hooks/useZoomLevel";
 import { debounce } from "lodash";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 
@@ -106,23 +104,6 @@ const useSidebarStyles = makeStyles({
       display: "flex",
     },
   },
-  accessibleContent: {
-    "@media (max-width: 420px)": {
-      overflow: "scroll",
-    },
-  },
-  minHeightResponsive: {
-    "@media (max-width: 420px)": {
-      minHeight: "400px",
-    },
-  },
-  accessibleContentZoom: {
-    overflow: "scroll",
-  },
-
-  minHeightZoom: {
-    minHeight: "400px",
-  },
 });
 
 interface GlobalCommandsProps {
@@ -294,7 +275,6 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
   const [expandedSize, setExpandedSize] = React.useState(300);
   const hasSidebar = userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo";
   const allotment = useRef<AllotmentHandle>(null);
-  const isZoomed = useZoomLevel();
 
   const expand = useCallback(() => {
     if (!expanded) {
@@ -345,23 +325,11 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
 
   return (
     <div className="sidebarContainer">
-      <Allotment
+      <Allotment ref={allotment} onChange={onChange} onDragEnd={onDragEnd} className="resourceTreeAndTabs">
-        ref={allotment}
-        onChange={onChange}
-        onDragEnd={onDragEnd}
-        className={`resourceTreeAndTabs ${styles.accessibleContent} ${conditionalClass(
-          isZoomed,
-          styles.accessibleContentZoom,
-        )}`}
-      >
         {/* Collections Tree - Start */}
         {hasSidebar && (
           // When collapsed, we force the pane to 24 pixels wide and make it non-resizable.
-          <Allotment.Pane
+          <Allotment.Pane minSize={24} preferredSize={250}>
-            className={`${styles.minHeightResponsive} ${conditionalClass(isZoomed, styles.minHeightZoom)}`}
-            minSize={24}
-            preferredSize={250}
-          >
             <CosmosFluentProvider className={mergeClasses(styles.sidebar)}>
               <div className={styles.sidebarContainer}>
                 {loading && (
@@ -417,10 +385,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
             </CosmosFluentProvider>
           </Allotment.Pane>
         )}
-        <Allotment.Pane
+        <Allotment.Pane minSize={200}>
-          className={`${styles.minHeightResponsive} ${conditionalClass(isZoomed, styles.minHeightZoom)}`}
-          minSize={200}
-        >
           <Tabs explorer={explorer} />
         </Allotment.Pane>
       </Allotment>

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -291,10 +291,10 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         <form className="connectExplorerFormContainer">
           <div className="splashScreenContainer">
             <div className="splashScreen">
-              <h2 className="title" role="heading" aria-label={title}>
+              <h1 className="title" role="heading" aria-label={title}>
                 {title}
                 <FeaturePanelLauncher />
-              </h2>
+              </h1>
               <div className="subtitle">{subtitle}</div>
               {this.getSplashScreenButtons()}
               {useCarousel.getState().showCoachMark && (

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -144,13 +144,6 @@ export const useDocumentsTabStyles = makeStyles({
   deleteProgressContent: {
     paddingTop: tokens.spacingVerticalL,
   },
-  smallScreenContent: {
-    "@media (max-width: 420px)": {
-      flexWrap: "wrap",
-      minHeight: "max-content",
-      padding: "4px",
-    },
-  },
 });
 
 export class DocumentsTabV2 extends TabsBase {
@@ -736,7 +729,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
             } else if (result.statusCode >= 400) {
               newFailed.push(result.documentId);
               logConsoleError(
-                `Failed to delete document ${result.documentId.id()} with status code ${result.statusCode}`,
+                `Failed to delete document ${result.documentId.id} with status code ${result.statusCode}`,
               );
             }
           });
@@ -2109,7 +2102,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   return (
     <CosmosFluentProvider className={styles.container}>
       <div data-test={"DocumentsTab"} className="tab-pane active" role="tabpanel" style={{ display: "flex" }}>
-        <div data-test={"DocumentsTab/Filter"} className={`${styles.filterRow} ${styles.smallScreenContent}`}>
+        <div data-test={"DocumentsTab/Filter"} className={styles.filterRow}>
           {!isPreferredApiMongoDB && <span> SELECT * FROM c </span>}
           <InputDataList
             dropdownOptions={getFilterChoices()}

src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
     }
   >
     <div
-      className="___11ktxfv_0000000 f1o614cb fy9rknc f22iagw fsnqrgy f1f5gg8d fjodcmx f122n59 f1f09k3d fg706s2 frpde29 ___1ngl8o6_0000000 fz7mnu6 fl3egqs flhmrkm"
+      className="___11ktxfv_0000000 f1o614cb fy9rknc f22iagw fsnqrgy f1f5gg8d fjodcmx f122n59 f1f09k3d fg706s2 frpde29"
       data-test="DocumentsTab/Filter"
     >
       <span>

src/Explorer/Tabs/QueryTab/QueryResultSection.tsx

@@ -8,8 +8,6 @@ import RunQuery from "../../../../images/RunQuery.png";
 import { QueryResults } from "../../../Contracts/ViewModels";
 import { ErrorList } from "./ErrorList";
 import { ResultsView } from "./ResultsView";
-import useZoomLevel from "hooks/useZoomLevel";
-import { conditionalClass } from "Utils/StyleUtils";
 
 export interface ResultsViewProps {
   isMongoDB: boolean;
@@ -25,16 +23,11 @@ interface QueryResultProps extends ResultsViewProps {
 
 const ExecuteQueryCallToAction: React.FC = () => {
   const styles = useQueryTabStyles();
-  const isZoomed = useZoomLevel();
   return (
     <div data-test="QueryTab/ResultsPane/ExecuteCTA" className={styles.executeCallToAction}>
       <div>
         <p>
-          <img
+          <img src={RunQuery} aria-hidden="true" />
-            className={`${styles.responsiveImg} ${conditionalClass(isZoomed, styles.zoomedImageSize)}`}
-            src={RunQuery}
-            aria-hidden="true"
-          />
         </p>
         <p>Execute a query to see the results</p>
       </div>

src/Explorer/Tabs/QueryTab/Styles.ts

@@ -25,9 +25,6 @@ export const useQueryTabStyles = makeStyles({
     height: "100%",
     display: "flex",
     flexDirection: "column",
-    "@media (max-width: 420px)": {
-      overflow: "scroll",
-    },
   },
   queryResultsMessage: {
     ...shorthands.margin("5px"),
@@ -41,9 +38,6 @@ export const useQueryTabStyles = makeStyles({
     display: "flex",
     rowGap: "12px",
     flexDirection: "column",
-    "@media (max-width: 420px)": {
-      height: "auto",
-    },
   },
   queryResultsTabContentContainer: {
     display: "flex",
@@ -99,12 +93,4 @@ export const useQueryTabStyles = makeStyles({
     display: "flex",
     flexDirection: "row",
   },
-  responsiveImg: {
-    "@media (max-width: 420px)": {
-      width: "50px",
-    },
-  },
-  zoomedImageSize: {
-    width: "60px",
-  },
 });

src/Explorer/Tree/Collection.ts

@@ -1122,9 +1122,6 @@ export default class Collection implements ViewModels.Collection {
             stats.numSucceeded++;
           } else if (response.statusCode === 429) {
             documentsToAttempt.push(attemptedDocuments[index]);
-          } else if (response.statusCode === 409) {
-            stats.numFailed++;
-            stats.errors.push(`Document with id ${attemptedDocuments[index].id} already exists.`);
           } else {
             stats.numFailed++;
             stats.errors.push(JSON.stringify(response.resourceBody));

src/Utils/StyleUtils.ts

@@ -21,11 +21,3 @@ export function copyStyles(sourceDoc: Document, targetDoc: Document): void {
     }
   });
 }
-
-/**
- * Conditionally returns a class name based on a boolean condition.
- * If the condition is true, returns the `trueValue` class; otherwise, returns `falseValue` (or an empty string if not provided).
- */
-export function conditionalClass(condition: boolean, trueValue: string, falseValue?: string): string {
-  return condition ? trueValue : falseValue || "";
-}

src/hooks/useZoomLevel.ts

@@ -1,20 +0,0 @@
-import { useEffect, useState } from "react";
-
-const useZoomLevel = (threshold: number = 2): boolean => {
-  const [isZoomed, setIsZoomed] = useState<boolean>(false);
-
-  useEffect(() => {
-    const checkZoom = () => {
-      const zoomLevel = window.devicePixelRatio;
-      setIsZoomed(zoomLevel >= threshold);
-    };
-
-    checkZoom();
-    window.addEventListener("resize", checkZoom);
-    return () => window.removeEventListener("resize", checkZoom);
-  }, [threshold]);
-
-  return isZoomed;
-};
-
-export default useZoomLevel;

web.config

@@ -30,7 +30,7 @@
         <clear />
         <add name="X-Xss-Protection" value="1; mode=block" />
         <add name="X-Content-Type-Options" value="nosniff" />
-        <add name="Content-Security-Policy" value="frame-src 'vscode:' frame-ancestors 'self' portal.azure.com *.portal.azure.com portal.azure.us portal.azure.cn portal.microsoftazure.de df.onecloud.azure-test.net *.fabric.microsoft.com *.powerbi.com *.analysis-df.windows.net dataexplorer-preview.azurewebsites.net" />
+        <add name="Content-Security-Policy" value="frame-ancestors 'self' portal.azure.com *.portal.azure.com portal.azure.us portal.azure.cn portal.microsoftazure.de df.onecloud.azure-test.net *.fabric.microsoft.com *.powerbi.com *.analysis-df.windows.net dataexplorer-preview.azurewebsites.net" />
       </customHeaders>
       <redirectHeaders>
         <clear />