correct base on some suggestion

less/documentDB.less

@@ -1757,7 +1757,7 @@ input::-webkit-calendar-picker-indicator {
   cursor: pointer;
 }
 
-.contextual-pane .paneMainContent {
+.paneMainContent {
   flex: 1;
   padding-left: 34px;
   padding-right: 34px;

src/Common/Tooltip/InfoTooltip.tsx

@@ -0,0 +1,18 @@
+import { IconButton, TooltipHost } from "@fluentui/react";
+import * as React from "react";
+
+export interface TooltipProps {
+  children: string;
+}
+
+const iconProps = { iconName: "Info" };
+
+export const InfoTooltip: React.FunctionComponent = ({ children }: TooltipProps) => {
+  return (
+    <span>
+      <TooltipHost content={children}>
+        <IconButton iconProps={iconProps} ariaLabel="Info" vertical-align />
+      </TooltipHost>
+    </span>
+  );
+};

src/Common/Tooltip/Tooltip.tsx

@@ -1,26 +0,0 @@
-import { IButtonStyles, IconButton, ITooltipHostStyles, TooltipHost } from "@fluentui/react";
-import { useId } from "@fluentui/react-hooks";
-import * as React from "react";
-
-const calloutProps = { gapSpace: 0 };
-const hostStyles: Partial<ITooltipHostStyles> = { root: { display: "inline-block" } };
-
-export interface TooltipProps {
-  children: string;
-}
-
-const iconButtonStyles: Partial<IButtonStyles> = { root: { marginBottom: -3 } };
-const iconProps = { iconName: "Info" };
-
-export const Tooltip: React.FunctionComponent = ({ children }: TooltipProps) => {
-  const tooltipId = useId("tooltip");
-
-  const iconButtonId: string = useId("iconButton");
-  return (
-    <span>
-      <TooltipHost content={children} id={tooltipId} calloutProps={calloutProps} styles={hostStyles}>
-        <IconButton id={iconButtonId} iconProps={iconProps} ariaLabel="Info" styles={iconButtonStyles} />
-      </TooltipHost>
-    </span>
-  );
-};

src/Common/Upload/Upload.tsx

@@ -2,7 +2,7 @@ import { Image, Stack, TextField } from "@fluentui/react";
 import React, { ChangeEvent, FunctionComponent, KeyboardEvent, useRef, useState } from "react";
 import FolderIcon from "../../../images/folder_16x16.svg";
 import * as Constants from "../Constants";
-import { Tooltip } from "../Tooltip/Tooltip";
+import { InfoTooltip } from "../Tooltip/InfoTooltip";
 
 interface UploadProps {
   label: string;
@@ -51,7 +51,7 @@ export const Upload: FunctionComponent<UploadProps> = ({
   return (
     <div>
       <span className="renewUploadItemsHeader">{label}</span>
-      <Tooltip>{tooltip}</Tooltip>
+      {tooltip && <InfoTooltip>{tooltip}</InfoTooltip>}
       <Stack horizontal>
         <TextField styles={{ fieldGroup: { width: 300 } }} readOnly value={selectedFilesTitle.toString()} />
         <input

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

@@ -1,6 +1,6 @@
 import { Text } from "@fluentui/react";
 import React, { FunctionComponent } from "react";
-import { Tooltip } from "../../../../Common/Tooltip/Tooltip";
+import { InfoTooltip } from "../../../../Common/Tooltip/InfoTooltip";
 import * as SharedConstants from "../../../../Shared/Constants";
 import { userContext } from "../../../../UserContext";
 import {
@@ -46,7 +46,7 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
     ? getAutoscalePricePerRu(serverId, multiplier) * multiplier
     : getPricePerRu(serverId) * multiplier;
 
-  const iconWithEstimatedCostDisclaimer: JSX.Element = <Tooltip>PricingUtils.estimatedCostDisclaimer</Tooltip>;
+  const iconWithEstimatedCostDisclaimer: JSX.Element = <InfoTooltip>PricingUtils.estimatedCostDisclaimer</InfoTooltip>;
 
   if (isAutoscale) {
     return (

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -11,7 +11,7 @@ import {
 } from "@fluentui/react";
 import React, { FunctionComponent, useState } from "react";
 import * as Constants from "../../../Common/Constants";
-import { Tooltip } from "../../../Common/Tooltip/Tooltip";
+import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
 import * as SharedConstants from "../../../Shared/Constants";
 import { userContext } from "../../../UserContext";
 import { getCollectionName } from "../../../Utils/APITypeUtils";
@@ -111,7 +111,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
         <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
           {getThroughputLabelText()}
         </Text>
-        <Tooltip>{PricingUtils.getRuToolTipText()}</Tooltip>
+        <InfoTooltip>{PricingUtils.getRuToolTipText()}</InfoTooltip>
       </Stack>
 
       <Stack horizontal verticalAlign="center">
@@ -137,7 +137,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
             <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }} data-testid="maxRUDescription">
               {isDatabase ? "Database" : getCollectionName()} Max RU/s
             </Text>
-            <Tooltip>{getAutoScaleTooltip()}</Tooltip>
+            <InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>
           </Stack>
 
           <TextField

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

@@ -46,35 +46,16 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
             Container throughput (autoscale)
           </span>
         </Text>
-        <Tooltip
+        <InfoTooltip
           key=".0:$.2"
         >
           <span>
             <StyledTooltipHostBase
-              calloutProps={
-                Object {
-                  "gapSpace": 0,
-                }
-              }
               content="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."
-              id="tooltip0"
-              styles={
-                Object {
-                  "root": Object {
-                    "display": "inline-block",
-                  },
-                }
-              }
             >
               <TooltipHostBase
-                calloutProps={
-                  Object {
-                    "gapSpace": 0,
-                  }
-                }
                 content="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."
                 delay={1}
-                id="tooltip0"
                 styles={[Function]}
                 theme={
                   Object {
@@ -351,7 +332,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                 }
               >
                 <div
-                  className="ms-TooltipHost root-37"
+                  className="ms-TooltipHost root-55"
                   onBlurCapture={[Function]}
                   onFocusCapture={[Function]}
                   onKeyDown={[Function]}
@@ -365,14 +346,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         "iconName": "Info",
                       }
                     }
-                    id="iconButton1"
+                    vertical-align={true}
-                    styles={
-                      Object {
-                        "root": Object {
-                          "marginBottom": -3,
-                        },
-                      }
-                    }
                   >
                     <IconButton
                       ariaLabel="Info"
@@ -381,14 +355,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                           "iconName": "Info",
                         }
                       }
-                      id="iconButton1"
-                      styles={
-                        Object {
-                          "root": Object {
-                            "marginBottom": -3,
-                          },
-                        }
-                      }
                       theme={
                         Object {
                           "disableGlobalClassNames": false,
@@ -662,6 +628,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                           },
                         }
                       }
+                      vertical-align={true}
                     >
                       <BaseButton
                         ariaLabel="Info"
@@ -671,7 +638,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                             "iconName": "Info",
                           }
                         }
-                        id="iconButton1"
                         onRenderDescription={[Function]}
                         onRenderText={[Function]}
                         split={false}
@@ -787,9 +753,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                                 "padding": "0 4px",
                                 "width": "32px",
                               },
-                              Object {
-                                "marginBottom": -3,
-                              },
                             ],
                             "rootChecked": Object {
                               "backgroundColor": "#edebe9",
@@ -1405,12 +1368,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                           }
                         }
                         variantClassName="ms-Button--icon"
+                        vertical-align={true}
                       >
                         <button
                           aria-label="Info"
-                          className="ms-Button ms-Button--icon root-55"
+                          className="ms-Button ms-Button--icon root-56"
                           data-is-focusable={true}
-                          id="iconButton1"
                           onClick={[Function]}
                           onKeyDown={[Function]}
                           onKeyPress={[Function]}
@@ -1420,16 +1383,16 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                           type="button"
                         >
                           <span
-                            className="ms-Button-flexContainer flexContainer-56"
+                            className="ms-Button-flexContainer flexContainer-57"
                             data-automationid="splitbuttonprimary"
                           >
                             <Component
-                              className="ms-Button-icon icon-58"
+                              className="ms-Button-icon icon-59"
                               iconName="Info"
                             >
                               <i
                                 aria-hidden={true}
-                                className="ms-Icon root-37 css-63 ms-Button-icon icon-58"
+                                className="ms-Icon root-37 css-64 ms-Button-icon icon-59"
                                 data-icon-name="Info"
                                 style={
                                   Object {
@@ -1450,7 +1413,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
               </TooltipHostBase>
             </StyledTooltipHostBase>
           </span>
-        </Tooltip>
+        </InfoTooltip>
       </div>
     </Stack>
     <Stack
@@ -1458,7 +1421,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
       verticalAlign="center"
     >
       <div
-        className="ms-Stack css-64"
+        className="ms-Stack css-65"
       >
         <StyledChoiceGroup
           aria-label="mode"
@@ -1771,7 +1734,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           >
             <div
               aria-label="mode"
-              className="ms-ChoiceFieldGroup root-65"
+              className="ms-ChoiceFieldGroup root-66"
             >
               <div
                 role="radiogroup"
@@ -1782,11 +1745,11 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                   <StyledChoiceGroupOption
                     checked={true}
                     focused={false}
-                    id="ChoiceGroup6-true"
+                    id="ChoiceGroup4-true"
                     itemKey="true"
                     key="true"
-                    labelId="ChoiceGroupLabel7-true"
+                    labelId="ChoiceGroupLabel5-true"
-                    name="ChoiceGroup6"
+                    name="ChoiceGroup4"
                     onBlur={[Function]}
                     onChange={[Function]}
                     onFocus={[Function]}
@@ -1795,10 +1758,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                     <ChoiceGroupOption
                       checked={true}
                       focused={false}
-                      id="ChoiceGroup6-true"
+                      id="ChoiceGroup4-true"
                       itemKey="true"
-                      labelId="ChoiceGroupLabel7-true"
+                      labelId="ChoiceGroupLabel5-true"
-                      name="ChoiceGroup6"
+                      name="ChoiceGroup4"
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
@@ -2079,28 +2042,28 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       }
                     >
                       <div
-                        className="ms-ChoiceField root-66"
+                        className="ms-ChoiceField root-67"
                       >
                         <div
                           className="ms-ChoiceField-wrapper"
                         >
                           <input
                             checked={true}
-                            className="ms-ChoiceField-input input-67"
+                            className="ms-ChoiceField-input input-68"
-                            id="ChoiceGroup6-true"
+                            id="ChoiceGroup4-true"
-                            name="ChoiceGroup6"
+                            name="ChoiceGroup4"
                             onBlur={[Function]}
                             onChange={[Function]}
                             onFocus={[Function]}
                             type="radio"
                           />
                           <label
-                            className="ms-ChoiceField-field is-checked field-68"
+                            className="ms-ChoiceField-field is-checked field-69"
-                            htmlFor="ChoiceGroup6-true"
+                            htmlFor="ChoiceGroup4-true"
                           >
                             <span
                               className="ms-ChoiceFieldLabel"
-                              id="ChoiceGroupLabel7-true"
+                              id="ChoiceGroupLabel5-true"
                             >
                               Autoscale
                             </span>
@@ -2112,11 +2075,11 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                   <StyledChoiceGroupOption
                     checked={false}
                     focused={false}
-                    id="ChoiceGroup6-false"
+                    id="ChoiceGroup4-false"
                     itemKey="false"
                     key="false"
-                    labelId="ChoiceGroupLabel7-false"
+                    labelId="ChoiceGroupLabel5-false"
-                    name="ChoiceGroup6"
+                    name="ChoiceGroup4"
                     onBlur={[Function]}
                     onChange={[Function]}
                     onFocus={[Function]}
@@ -2125,10 +2088,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                     <ChoiceGroupOption
                       checked={false}
                       focused={false}
-                      id="ChoiceGroup6-false"
+                      id="ChoiceGroup4-false"
                       itemKey="false"
-                      labelId="ChoiceGroupLabel7-false"
+                      labelId="ChoiceGroupLabel5-false"
-                      name="ChoiceGroup6"
+                      name="ChoiceGroup4"
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
@@ -2409,28 +2372,28 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       }
                     >
                       <div
-                        className="ms-ChoiceField root-66"
+                        className="ms-ChoiceField root-67"
                       >
                         <div
                           className="ms-ChoiceField-wrapper"
                         >
                           <input
                             checked={false}
-                            className="ms-ChoiceField-input input-67"
+                            className="ms-ChoiceField-input input-68"
-                            id="ChoiceGroup6-false"
+                            id="ChoiceGroup4-false"
-                            name="ChoiceGroup6"
+                            name="ChoiceGroup4"
                             onBlur={[Function]}
                             onChange={[Function]}
                             onFocus={[Function]}
                             type="radio"
                           />
                           <label
-                            className="ms-ChoiceField-field field-73"
+                            className="ms-ChoiceField-field field-74"
-                            htmlFor="ChoiceGroup6-false"
+                            htmlFor="ChoiceGroup4-false"
                           >
                             <span
                               className="ms-ChoiceFieldLabel"
-                              id="ChoiceGroupLabel7-false"
+                              id="ChoiceGroupLabel5-false"
                             >
                               Manual
                             </span>
@@ -2450,7 +2413,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
       className="throughputInputSpacing"
     >
       <div
-        className="ms-Stack throughputInputSpacing css-76"
+        className="ms-Stack throughputInputSpacing css-77"
       >
         <Text
           data-testid="ruDescription"
@@ -2748,7 +2711,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                 }
               >
                 <a
-                  className="ms-Link root-77"
+                  className="ms-Link root-78"
                   data-testid="ruDescription"
                   href="https://cosmos.azure.com/capacitycalculator/"
                   onClick={[Function]}
@@ -2793,35 +2756,16 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                  Max RU/s
               </span>
             </Text>
-            <Tooltip
+            <InfoTooltip
               key=".0:$.1"
             >
               <span>
                 <StyledTooltipHostBase
-                  calloutProps={
-                    Object {
-                      "gapSpace": 0,
-                    }
-                  }
                   content="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."
-                  id="tooltip8"
-                  styles={
-                    Object {
-                      "root": Object {
-                        "display": "inline-block",
-                      },
-                    }
-                  }
                 >
                   <TooltipHostBase
-                    calloutProps={
-                      Object {
-                        "gapSpace": 0,
-                      }
-                    }
                     content="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."
                     delay={1}
-                    id="tooltip8"
                     styles={[Function]}
                     theme={
                       Object {
@@ -3098,7 +3042,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                     }
                   >
                     <div
-                      className="ms-TooltipHost root-37"
+                      className="ms-TooltipHost root-55"
                       onBlurCapture={[Function]}
                       onFocusCapture={[Function]}
                       onKeyDown={[Function]}
@@ -3112,14 +3056,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                             "iconName": "Info",
                           }
                         }
-                        id="iconButton9"
+                        vertical-align={true}
-                        styles={
-                          Object {
-                            "root": Object {
-                              "marginBottom": -3,
-                            },
-                          }
-                        }
                       >
                         <IconButton
                           ariaLabel="Info"
@@ -3128,14 +3065,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                               "iconName": "Info",
                             }
                           }
-                          id="iconButton9"
-                          styles={
-                            Object {
-                              "root": Object {
-                                "marginBottom": -3,
-                              },
-                            }
-                          }
                           theme={
                             Object {
                               "disableGlobalClassNames": false,
@@ -3409,6 +3338,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                               },
                             }
                           }
+                          vertical-align={true}
                         >
                           <BaseButton
                             ariaLabel="Info"
@@ -3418,7 +3348,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                                 "iconName": "Info",
                               }
                             }
-                            id="iconButton9"
                             onRenderDescription={[Function]}
                             onRenderText={[Function]}
                             split={false}
@@ -3534,9 +3463,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                                     "padding": "0 4px",
                                     "width": "32px",
                                   },
-                                  Object {
-                                    "marginBottom": -3,
-                                  },
                                 ],
                                 "rootChecked": Object {
                                   "backgroundColor": "#edebe9",
@@ -4152,12 +4078,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                               }
                             }
                             variantClassName="ms-Button--icon"
+                            vertical-align={true}
                           >
                             <button
                               aria-label="Info"
-                              className="ms-Button ms-Button--icon root-55"
+                              className="ms-Button ms-Button--icon root-56"
                               data-is-focusable={true}
-                              id="iconButton9"
                               onClick={[Function]}
                               onKeyDown={[Function]}
                               onKeyPress={[Function]}
@@ -4167,16 +4093,16 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                               type="button"
                             >
                               <span
-                                className="ms-Button-flexContainer flexContainer-56"
+                                className="ms-Button-flexContainer flexContainer-57"
                                 data-automationid="splitbuttonprimary"
                               >
                                 <Component
-                                  className="ms-Button-icon icon-58"
+                                  className="ms-Button-icon icon-59"
                                   iconName="Info"
                                 >
                                   <i
                                     aria-hidden={true}
-                                    className="ms-Icon root-37 css-63 ms-Button-icon icon-58"
+                                    className="ms-Icon root-37 css-64 ms-Button-icon icon-59"
                                     data-icon-name="Info"
                                     style={
                                       Object {
@@ -4197,7 +4123,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                   </TooltipHostBase>
                 </StyledTooltipHostBase>
               </span>
-            </Tooltip>
+            </InfoTooltip>
           </div>
         </Stack>
         <StyledTextFieldBase
@@ -4510,18 +4436,18 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
             value="4000"
           >
             <div
-              className="ms-TextField is-required root-79"
+              className="ms-TextField is-required root-80"
             >
               <div
                 className="ms-TextField-wrapper"
               >
                 <div
-                  className="ms-TextField-fieldGroup fieldGroup-80"
+                  className="ms-TextField-fieldGroup fieldGroup-81"
                 >
                   <input
                     aria-invalid={false}
-                    className="ms-TextField-field field-81"
+                    className="ms-TextField-field field-82"
-                    id="TextField14"
+                    id="TextField10"
                     min={4000}
                     onBlur={[Function]}
                     onChange={[Function]}

src/Explorer/Explorer.tsx

@@ -32,7 +32,7 @@ import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants"
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
 import { ArcadiaResourceManager } from "../SparkClusterManager/ArcadiaResourceManager";
 import { updateUserContext, userContext } from "../UserContext";
-import { getCollectionName } from "../Utils/APITypeUtils";
+import { getCollectionName, getDatabaseName, getUploadName } from "../Utils/APITypeUtils";
 import { decryptJWTToken, getAuthorizationHeader } from "../Utils/AuthorizationUtils";
 import { stringToBlob } from "../Utils/BlobUtils";
 import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
@@ -1996,7 +1996,7 @@ export default class Explorer {
 
   public openDeleteDatabaseConfirmationPane(): void {
     this.openSidePanel(
-      "Delete Database",
+      "Delete " + getDatabaseName(),
       <DeleteDatabaseConfirmationPanel
         explorer={this}
         openNotificationConsole={this.expandConsole}
@@ -2007,12 +2007,12 @@ export default class Explorer {
   }
 
   public openUploadItemsPanePane(): void {
-    this.openSidePanel("Upload", <UploadItemsPane explorer={this} closePanel={this.closeSidePanel} />);
+    this.openSidePanel("Upload " + getUploadName(), <UploadItemsPane explorer={this} />);
   }
 
   public openSettingPane(): void {
     this.openSidePanel(
-      "Settings",
+      "Setting",
       <SettingsPane expandConsole={() => this.expandConsole()} closePanel={this.closeSidePanel} />
     );
   }
@@ -2046,7 +2046,7 @@ export default class Explorer {
       document.getElementById("linkAddDatabase").focus();
     } else {
       this.openSidePanel(
-        "Add Database",
+        "Add " + getDatabaseName(),
         <AddDatabasePanel
           explorer={this}
           openNotificationConsole={this.expandConsole}
@@ -2071,7 +2071,7 @@ export default class Explorer {
   public openUploadFilePanel(parent?: NotebookContentItem): void {
     parent = parent || this.resourceTree.myNotebooksContentRoot;
     this.openSidePanel(
-      "Upload File",
+      "Upload file to notebook server",
       <UploadFilePane
         expandConsole={() => this.expandConsole()}
         closePanel={this.closeSidePanel}

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -3,7 +3,7 @@ import React, { FunctionComponent, useEffect, useState } from "react";
 import * as Constants from "../../../Common/Constants";
 import { createDatabase } from "../../../Common/dataAccess/createDatabase";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
-import { Tooltip } from "../../../Common/Tooltip/Tooltip";
+import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
 import { configContext, Platform } from "../../../ConfigContext";
 import * as DataModels from "../../../Contracts/DataModels";
 import { SubscriptionType } from "../../../Contracts/SubscriptionType";
@@ -102,7 +102,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
 
     return true;
   };
-  const title: string = container?.addDatabaseText() || "New Database";
   const [isExecuting, setIsExecuting] = useState<boolean>(false);
 
   useEffect(() => {
@@ -254,17 +253,13 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
     expandConsole: container.expandConsole,
     formError: formErrors,
     formErrorDetail: formErrorsDetails,
-    id: "add-database-inputs",
     isExecuting,
-    title,
     submitButtonText: "OK",
-    onClose: closePanel,
     onSubmit: submit,
   };
 
   return (
     <RightPaneForm {...genericPaneProps}>
-      <form style={{ height: "100%" }}>
       <div className="paneContentContainer" role="dialog" aria-labelledby="databaseTitle">
         {showUpsellMessage && formErrors === "" && (
           <PanelInfoErrorComponent
@@ -276,13 +271,12 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
             linkText={upsellAnchorText}
           />
         )}
-
         <div className="paneMainContent">
           <div>
             <p>
               <span className="mandatoryStar">*</span>
               <Text variant="small">{databaseIdLabel}</Text>
-                <Tooltip>{databaseIdTooltipText}</Tooltip>
+              <InfoTooltip>{databaseIdTooltipText}</InfoTooltip>
             </p>
 
             <TextField
@@ -315,7 +309,7 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
                 checked={databaseCreateNewShared}
                 onChange={() => setDatabaseCreateNewShared(!databaseCreateNewShared)}
               />{" "}
-                <Tooltip>{databaseLevelThroughputTooltipText}</Tooltip>
+              <InfoTooltip>{databaseLevelThroughputTooltipText}</InfoTooltip>
             </div>
             {databaseCreateNewShared && (
               <div>
@@ -343,7 +337,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
           </div>
         </div>
       </div>
-      </form>
     </RightPaneForm>
   );
 };

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

@@ -4,20 +4,10 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
 <RightPaneForm
   expandConsole={[Function]}
   formError=""
-  id="add-database-inputs"
   isExecuting={false}
-  onClose={[Function]}
   onSubmit={[Function]}
   submitButtonText="OK"
-  title="New Database"
 >
-  <form
-    style={
-      Object {
-        "height": "100%",
-      }
-    }
-  >
   <div
     aria-labelledby="databaseTitle"
     className="paneContentContainer"
@@ -46,9 +36,9 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
           >
             Database id
           </Text>
-            <Tooltip>
+          <InfoTooltip>
             A database is a logical container of one or more collections
-            </Tooltip>
+          </InfoTooltip>
         </p>
         <StyledTextFieldBase
           aria-label="Database id"
@@ -92,9 +82,9 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
             title="Provision shared throughput"
           />
            
-            <Tooltip>
+          <InfoTooltip>
             Provisioned throughput at the database level will be shared across all collections within the database.
-            </Tooltip>
+          </InfoTooltip>
         </div>
         <div>
           <ThroughputInput
@@ -110,6 +100,5 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
       </div>
     </div>
   </div>
-  </form>
 </RightPaneForm>
 `;

src/Explorer/Panes/PanelInfoErrorComponent.tsx

@@ -22,11 +22,11 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
 }: PanelInfoErrorProps): JSX.Element => {
   let icon: JSX.Element;
   if (messageType === "error") {
-    icon = <Icon iconName="StatusErrorFull" className="panelErrorIcon" data-testid="errorIcon" />;
+    icon = <Icon iconName="StatusErrorFull" className="panelErrorIcon" aria-label="error" />;
   } else if (messageType === "warning") {
-    icon = <Icon iconName="WarningSolid" className="panelWarningIcon" data-testid="warningIcon" />;
+    icon = <Icon iconName="WarningSolid" className="panelWarningIcon" aria-label="warning" />;
   } else if (messageType === "info") {
-    icon = <Icon iconName="InfoSolid" className="panelLargeInfoIcon" data-testid="InfoIcon" />;
+    icon = <Icon iconName="InfoSolid" className="panelLargeInfoIcon" aria-label="Infomation" />;
   }
 
   return (
@@ -34,7 +34,7 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
       <Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
         {icon}
         <span className="panelWarningErrorDetailsLinkContainer">
-          <Text className="panelWarningErrorMessage" variant="small" data-testid="panelmessage">
+          <Text className="panelWarningErrorMessage" variant="small" aria-label="message">
             {message}
             {link && linkText && (
               <Link target="_blank" href={link}>

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

@@ -3,20 +3,15 @@ import { mount, ReactWrapper } from "enzyme";
 import React from "react";
 import { RightPaneForm } from "./RightPaneForm";
 
-const onClose = jest.fn();
 const onSubmit = jest.fn();
 const expandConsole = jest.fn();
 
 const props = {
-  closePanel: (): void => undefined,
   expandConsole,
   formError: "",
   formErrorDetail: "",
-  id: "loadQueryPane",
   isExecuting: false,
-  title: "Load Query Pane",
   submitButtonText: "Load",
-  onClose,
   onSubmit,
 };
 
@@ -27,11 +22,7 @@ describe("Load Query Pane", () => {
     wrapper = mount(<RightPaneForm {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
-  it("should call close method click cancel icon", () => {
+
-    render(<RightPaneForm {...props} />);
-    fireEvent.click(screen.getByTestId("closePaneBtn"));
-    expect(onClose).toHaveBeenCalled();
-  });
   it("should call submit method enter in form", () => {
     render(<RightPaneForm {...props} />);
     fireEvent.click(screen.getByTestId("submit"));
@@ -44,7 +35,7 @@ describe("Load Query Pane", () => {
   });
   it("should render error in header", () => {
     render(<RightPaneForm {...props} formError="file already Exist" />);
-    expect(screen.getByTestId("errorIcon")).toBeDefined();
+    expect(screen.getByLabelText("error")).toBeDefined();
-    expect(screen.getByTestId("panelmessage").innerHTML).toEqual("file already Exist");
+    expect(screen.getByLabelText("message").innerHTML).toEqual("file already Exist");
   });
 });

src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx

@@ -1,6 +1,4 @@
-import { IconButton } from "@fluentui/react";
 import React, { FunctionComponent, ReactNode } from "react";
-import { KeyCodes } from "../../../Common/Constants";
 import { PanelFooterComponent } from "../PanelFooterComponent";
 import { PanelInfoErrorComponent, PanelInfoErrorProps } from "../PanelInfoErrorComponent";
 import { PanelLoadingScreen } from "../PanelLoadingScreen";
@@ -9,12 +7,9 @@ export interface RightPaneFormProps {
   expandConsole: () => void;
   formError: string;
   formErrorDetail: string;
-  id: string;
   isExecuting: boolean;
-  onClose: () => void;
   onSubmit: () => void;
   submitButtonText: string;
-  title: string;
   isSubmitButtonHidden?: boolean;
   children?: ReactNode;
 }
@@ -23,51 +18,16 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
   expandConsole,
   formError,
   formErrorDetail,
-  id,
   isExecuting,
-  onClose,
   onSubmit,
   submitButtonText,
-  title,
   isSubmitButtonHidden = false,
   children,
 }: RightPaneFormProps) => {
-  const getPanelHeight = (): number => {
-    const notificationConsoleElement: HTMLElement = document.getElementById("explorerNotificationConsole");
-    return window.innerHeight - $(notificationConsoleElement).height();
-  };
-
-  const panelHeight: number = getPanelHeight();
-
   const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     onSubmit();
   };
-  const renderPanelHeader = (): JSX.Element => {
-    return (
-      <div className="firstdivbg headerline">
-        <span id="databaseTitle" role="heading" aria-level={2}>
-          {title}
-        </span>
-        <IconButton
-          ariaLabel="Close pane"
-          title="Close pane"
-          data-testid="closePaneBtn"
-          onClick={onClose}
-          tabIndex={0}
-          className="closePaneBtn"
-          iconProps={{ iconName: "Cancel" }}
-        />
-      </div>
-    );
-  };
-
-  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
-    if (event.keyCode === KeyCodes.Escape) {
-      onClose();
-      event.stopPropagation();
-    }
-  };
 
   const panelInfoErrorProps: PanelInfoErrorProps = {
     messageType: "error",
@@ -79,18 +39,12 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
 
   return (
     <>
-      <div className="contextual-pane-out" onClick={onClose}></div>
-      <div className="contextual-pane" id={id} style={{ height: panelHeight }} onKeyDown={onKeyDown}>
-        <div className="panelContentWrapper">
-          {renderPanelHeader()}
       <PanelInfoErrorComponent {...panelInfoErrorProps} />
       <form className="panelFormWrapper" onSubmit={handleOnSubmit}>
         {children}
         {!isSubmitButtonHidden && <PanelFooterComponent buttonLabel={submitButtonText} />}
       </form>
-        </div>
       {isExecuting && <PanelLoadingScreen />}
-      </div>
     </>
   );
 };

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -1,7 +1,7 @@
 import { Checkbox, ChoiceGroup, IChoiceGroupOption, SpinButton } from "@fluentui/react";
 import React, { FunctionComponent, MouseEvent, useState } from "react";
 import * as Constants from "../../../Common/Constants";
-import { Tooltip } from "../../../Common/Tooltip/Tooltip";
+import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
 import { configContext } from "../../../ConfigContext";
 import { LocalStorageUtility, StorageKey } from "../../../Shared/StorageUtility";
 import * as StringUtility from "../../../Shared/StringUtility";
@@ -106,11 +106,8 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
     expandConsole,
     formError: formErrors,
     formErrorDetail: "",
-    id: "settingspane",
     isExecuting,
-    title: "Setting",
     submitButtonText: "Apply",
-    onClose: () => closePanel(),
     onSubmit: () => handlerOnSubmit(undefined),
   };
   const pageOptionList: IChoiceGroupOption[] = [
@@ -134,10 +131,10 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
             <div className="settingsSectionPart pageOptionsPart">
               <div className="settingsSectionLabel">
                 Page options
-                <Tooltip>
+                <InfoTooltip>
                   Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many
                   query results per page.
-                </Tooltip>
+                </InfoTooltip>
               </div>
               <ChoiceGroup selectedKey={pageOption} options={pageOptionList} onChange={handleOnPageOptionChange} />
             </div>
@@ -146,7 +143,7 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
                 <div className="tabcontent">
                   <div className="settingsSectionLabel">
                     Query results per page
-                    <Tooltip>Enter the number of query results that should be shown per page.</Tooltip>
+                    <InfoTooltip>Enter the number of query results that should be shown per page.</InfoTooltip>
                   </div>
 
                   <SpinButton
@@ -173,10 +170,10 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
             <div className="settingsSectionPart">
               <div className="settingsSectionLabel">
                 Enable cross-partition query
-                <Tooltip>
+                <InfoTooltip>
                   Send more than one request while executing a query. More than one request is necessary if the query is
                   not scoped to single partition key value.
-                </Tooltip>
+                </InfoTooltip>
               </div>
 
               <Checkbox
@@ -196,11 +193,11 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
             <div className="settingsSectionPart">
               <div className="settingsSectionLabel">
                 Max degree of parallelism
-                <Tooltip>
+                <InfoTooltip>
                   Gets or sets the number of concurrent operations run client side during parallel query execution. A
                   positive property value limits the number of concurrent operations to the set value. If it is set to
                   less than 0, the system automatically decides the number of concurrent operations to run.
-                </Tooltip>
+                </InfoTooltip>
               </div>
 
               <SpinButton
@@ -224,10 +221,10 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
             <div className="settingsSectionPart">
               <div className="settingsSectionLabel">
                 Display Gremlin query results as:&nbsp;
-                <Tooltip>
+                <InfoTooltip>
                   Select Graph to automatically visualize the query results as a Graph or JSON to display the results as
                   JSON.
-                </Tooltip>
+                </InfoTooltip>
               </div>
 
               <ChoiceGroup

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

@@ -5,12 +5,9 @@ exports[`Settings Pane should render Default properly 1`] = `
   expandConsole={[Function]}
   formError=""
   formErrorDetail=""
-  id="settingspane"
   isExecuting={false}
-  onClose={[Function]}
   onSubmit={[Function]}
   submitButtonText="Apply"
-  title="Setting"
 >
   <div
     className="paneMainContent"
@@ -25,9 +22,9 @@ exports[`Settings Pane should render Default properly 1`] = `
           className="settingsSectionLabel"
         >
           Page options
-          <Tooltip>
+          <InfoTooltip>
             Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many query results per page.
-          </Tooltip>
+          </InfoTooltip>
         </div>
         <StyledChoiceGroup
           onChange={[Function]}
@@ -56,9 +53,9 @@ exports[`Settings Pane should render Default properly 1`] = `
             className="settingsSectionLabel"
           >
             Query results per page
-            <Tooltip>
+            <InfoTooltip>
               Enter the number of query results that should be shown per page.
-            </Tooltip>
+            </InfoTooltip>
           </div>
           <StyledSpinButton
             ariaLabel="Custom query items per page"
@@ -85,9 +82,9 @@ exports[`Settings Pane should render Default properly 1`] = `
           className="settingsSectionLabel"
         >
           Enable cross-partition query
-          <Tooltip>
+          <InfoTooltip>
             Send more than one request while executing a query. More than one request is necessary if the query is not scoped to single partition key value.
-          </Tooltip>
+          </InfoTooltip>
         </div>
         <StyledCheckboxBase
           ariaLabel="Enable cross partition query"
@@ -114,9 +111,9 @@ exports[`Settings Pane should render Default properly 1`] = `
           className="settingsSectionLabel"
         >
           Max degree of parallelism
-          <Tooltip>
+          <InfoTooltip>
             Gets or sets the number of concurrent operations run client side during parallel query execution. A positive property value limits the number of concurrent operations to the set value. If it is set to less than 0, the system automatically decides the number of concurrent operations to run.
-          </Tooltip>
+          </InfoTooltip>
         </div>
         <StyledSpinButton
           ariaLabel="Max degree of parallelism"
@@ -156,12 +153,9 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
   expandConsole={[Function]}
   formError=""
   formErrorDetail=""
-  id="settingspane"
   isExecuting={false}
-  onClose={[Function]}
   onSubmit={[Function]}
   submitButtonText="Apply"
-  title="Setting"
 >
   <div
     className="paneMainContent"
@@ -176,9 +170,9 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
           className="settingsSectionLabel"
         >
           Display Gremlin query results as: 
-          <Tooltip>
+          <InfoTooltip>
             Select Graph to automatically visualize the query results as a Graph or JSON to display the results as JSON.
-          </Tooltip>
+          </InfoTooltip>
         </div>
         <StyledChoiceGroup
           aria-label="Graph Auto-visualization"

src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx

@@ -15,9 +15,6 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
   closePanel,
   uploadFile,
 }: UploadFilePanelProps) => {
-  const title = "Upload file to notebook server";
-  const submitButtonLabel = "Upload";
-  const selectFileInputLabel = "Select file to upload";
   const extensions: string = undefined; //ex. ".ipynb"
   const errorMessage = "Could not upload file";
   const inProgressMessage = "Uploading file to notebook server";
@@ -39,11 +36,8 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
     }
 
     const file: File = files.item(0);
-    // const id: string = logConsoleProgress(
-    //   `${inProgressMessage}: ${file.name}`
-    // );
 
-    logConsoleProgress(`${inProgressMessage}: ${file.name}`);
+    const clearMessage = logConsoleProgress(`${inProgressMessage}: ${file.name}`);
 
     setIsExecuting(true);
 
@@ -61,7 +55,7 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
       )
       .finally(() => {
         setIsExecuting(false);
-        // clearInProgressMessageWithId(id);
+        clearMessage();
       });
   };
 
@@ -92,18 +86,15 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
     expandConsole,
     formError: formErrors,
     formErrorDetail: formErrorsDetails,
-    id: "uploadFilePane",
     isExecuting: isExecuting,
-    title,
+    submitButtonText: "Upload",
-    submitButtonText: submitButtonLabel,
-    onClose: closePanel,
     onSubmit: submit,
   };
 
   return (
     <RightPaneForm {...genericPaneProps}>
       <div className="paneMainContent">
-        <Upload label={selectFileInputLabel} accept={extensions} onUpload={updateSelectedFiles} />
+        <Upload label="Select file to upload" accept={extensions} onUpload={updateSelectedFiles} />
       </div>
     </RightPaneForm>
   );

src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx

@@ -2,7 +2,6 @@ import { DetailsList, DetailsListLayoutMode, IColumn, SelectionMode } from "@flu
 import React, { ChangeEvent, FunctionComponent, useState } from "react";
 import { Upload } from "../../../Common/Upload/Upload";
 import { UploadDetailsRecord } from "../../../Contracts/ViewModels";
-import { userContext } from "../../../UserContext";
 import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
 import { getErrorMessage } from "../../Tables/Utilities";
@@ -10,23 +9,9 @@ import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneFor
 
 export interface UploadItemsPaneProps {
   explorer: Explorer;
-  closePanel: () => void;
 }
 
-const getTitle = (): string => {
+export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ explorer }: UploadItemsPaneProps) => {
-  if (userContext.apiType === "Cassandra" || userContext.apiType === "Tables") {
-    return "Upload Tables";
-  } else if (userContext.apiType === "Gremlin") {
-    return "Upload Graph";
-  } else {
-    return "Upload Items";
-  }
-};
-
-export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
-  explorer,
-  closePanel,
-}: UploadItemsPaneProps) => {
   const [files, setFiles] = useState<FileList>();
   const [uploadFileData, setUploadFileData] = useState<UploadDetailsRecord[]>([]);
   const [formError, setFormError] = useState<string>("");
@@ -71,11 +56,8 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
     expandConsole: () => explorer.expandConsole(),
     formError,
     formErrorDetail,
-    id: "uploaditemspane",
     isExecuting: isExecuting,
-    title: getTitle(),
     submitButtonText: "Upload",
-    onClose: closePanel,
     onSubmit,
   };
 

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

@@ -5,11 +5,8 @@ exports[`Upload Items Pane should render Default properly 1`] = `
   expandConsole={[Function]}
   formError=""
   formErrorDetail=""
-  id="uploaditemspane"
-  onClose={[Function]}
   onSubmit={[Function]}
   submitButtonText="Upload"
-  title="Upload Items"
 >
   <div
     className="paneMainContent"
@@ -20,7 +17,9 @@ exports[`Upload Items Pane should render Default properly 1`] = `
       multiple={true}
       onUpload={[Function]}
       tabIndex={0}
-      tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON documents. The combined size of all files in an individual upload operation must be less than 2 MB. You can perform multiple upload operations for larger data sets."
+      tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON
+ documents. The combined size of all files in an individual upload operation must be less than 2 MB. You
+ can perform multiple upload operations for larger data sets."
     />
   </div>
 </RightPaneForm>

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

@@ -1292,14 +1292,14 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
           className="ms-Stack panelInfoErrorContainer css-202"
         >
           <StyledIconBase
+            aria-label="warning"
             className="panelWarningIcon"
-            data-testid="warningIcon"
             iconName="WarningSolid"
             key=".0:$.0"
           >
             <IconBase
+              aria-label="warning"
               className="panelWarningIcon"
-              data-testid="warningIcon"
               iconName="WarningSolid"
               styles={[Function]}
               theme={
@@ -1577,10 +1577,10 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
               }
             >
               <i
-                aria-hidden={true}
+                aria-label="warning"
                 className="panelWarningIcon root-204"
                 data-icon-name="WarningSolid"
-                data-testid="warningIcon"
+                role="img"
               >
                 
               </i>
@@ -1591,13 +1591,13 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
             key=".0:$.1"
           >
             <Text
+              aria-label="message"
               className="panelWarningErrorMessage"
-              data-testid="panelmessage"
               variant="small"
             >
               <span
+                aria-label="message"
                 className="panelWarningErrorMessage css-205"
-                data-testid="panelmessage"
               >
                 Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
               </span>

src/Utils/APITypeUtils.ts

@@ -28,3 +28,30 @@ export const getCollectionName = (isPlural?: boolean): string => {
 
   return collectionName;
 };
+
+export const getDatabaseName = (): string => {
+  const { apiType } = userContext;
+  switch (apiType) {
+    case "SQL":
+    case "Mongo":
+    case "Gremlin":
+    case "Tables":
+      return "Database";
+    case "Cassandra":
+      return "Keyspace";
+    default:
+      throw new Error(`Unknown API type: ${apiType}`);
+  }
+};
+
+export const getUploadName = (): string => {
+  switch (userContext.apiType) {
+    case "Cassandra":
+    case "Tables":
+      return "Tables";
+    case "Gremlin":
+      return "Graph";
+    default:
+      return "Items";
+  }
+};

test/mongo/container.spec.ts

@@ -23,7 +23,7 @@ test("Mongo CRUD", async () => {
   await safeClick(explorer, `.nodeItem >> text=${databaseId}`);
   await safeClick(explorer, `.nodeItem >> text=${containerId}`);
   // Create indexing policy
-  await safeClick(explorer, ".nodeItem >> text=Settings");
+  await safeClick(explorer, ".nodeItem >> text=Setting");
   await explorer.click('button[role="tab"]:has-text("Indexing Policy")');
   await explorer.click('[aria-label="Index Field Name 0"]');
   await explorer.fill('[aria-label="Index Field Name 0"]', "foo");

test/notebooks/upload.spec.ts

@@ -19,7 +19,7 @@ test("Notebooks", async () => {
   await explorer.click('[data-test="My Notebooks"] [aria-label="More"]');
   await explorer.click('button[role="menuitem"]:has-text("Upload File")');
   await explorer.setInputFiles("#importFileInput", path.join(__dirname, fileToUpload));
-  await explorer.click('[aria-label="Submit"]');
+  await explorer.click('[aria-label="Upload"]');
   await explorer.click(`[data-test="${fileToUpload}"] [aria-label="More"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete")');
   await explorer.click('button:has-text("Delete")');