address comment

src/Common/Tooltip/InfoTooltip.tsx

@@ -1,17 +1,15 @@
-import { IconButton, TooltipHost } from "@fluentui/react";
+import { Icon, 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 />
+        <Icon iconName="Info" ariaLabel="Info" className="panelInfoIcon" />
       </TooltipHost>
     </span>
   );

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

@@ -22,15 +22,15 @@ describe("ThroughputInput Pane", () => {
 
   it("test Autoscale Mode select", () => {
     wrapper.setProps({ isAutoscaleSelected: true });
-    expect(wrapper.find('[data-testid="ruDescription"]').at(0).text()).toBe(
+    expect(wrapper.find('[aria-label="ruDescription"]').at(0).text()).toBe(
       "Estimate your required RU/s with capacity calculator."
     );
-    expect(wrapper.find('[data-testid="maxRUDescription"]').at(0).text()).toContain("Max RU/s");
+    expect(wrapper.find('[aria-label="maxRUDescription"]').at(0).text()).toContain("Max RU/s");
   });
 
   it("test Manual Mode select", () => {
     wrapper.setProps({ isAutoscaleSelected: false });
-    expect(wrapper.find('[data-testid="ruDescription"]').at(0).text()).toContain("Estimate your required RU/s with");
+    expect(wrapper.find('[aria-label="ruDescription"]').at(0).text()).toContain("Estimate your required RU/s with");
-    expect(wrapper.find('[data-testid="capacityLink"]').at(0).text()).toContain("capacity calculator");
+    expect(wrapper.find('[aria-label="capacityLink"]').at(0).text()).toContain("capacity calculator");
   });
 });

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -1,14 +1,4 @@
-import {
+import { Checkbox, DirectionalHint, Link, Stack, Text, TextField, TooltipHost } from "@fluentui/react";
-  Checkbox,
-  ChoiceGroup,
-  DirectionalHint,
-  IChoiceGroupOption,
-  Link,
-  Stack,
-  Text,
-  TextField,
-  TooltipHost,
-} from "@fluentui/react";
 import React, { FunctionComponent, useState } from "react";
 import * as Constants from "../../../Common/Constants";
 import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
@@ -90,8 +80,8 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
     );
   };
 
-  const handleOnChangeMode = (ev: React.FormEvent<HTMLInputElement>, option: IChoiceGroupOption): void => {
+  const handleOnChangeMode = (event: React.ChangeEvent<HTMLInputElement>, mode: string): void => {
-    if (option.key === "true") {
+    if (mode === "Autoscale") {
       setThroughputValue(AutoPilotUtils.minAutoPilotThroughput);
       setIsAutoscale(true);
     } else {
@@ -100,10 +90,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
     }
   };
 
-  const optionList: IChoiceGroupOption[] = [
-    { key: "true", text: "Autoscale" },
-    { key: "false", text: "Manual" },
-  ];
   return (
     <div className="throughputInputContainer throughputInputSpacing">
       <Stack horizontal>
@@ -115,26 +101,41 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
       </Stack>
 
       <Stack horizontal verticalAlign="center">
-        <ChoiceGroup
+        <input
-          selectedKey={"" + isAutoscaleSelected}
+          className="throughputInputRadioBtn"
-          options={optionList}
+          aria-label="Autoscale mode"
-          onChange={handleOnChangeMode}
+          checked={isAutoscaleSelected}
-          aria-label="mode"
+          type="radio"
+          role="radio"
+          tabIndex={0}
+          onChange={(e) => handleOnChangeMode(e, "Autoscale")}
         />
+        <span className="throughputInputRadioBtnLabel">Autoscale</span>
+
+        <input
+          className="throughputInputRadioBtn"
+          aria-label="Manual mode"
+          checked={!isAutoscaleSelected}
+          type="radio"
+          role="radio"
+          tabIndex={0}
+          onChange={(e) => handleOnChangeMode(e, "Manual")}
+        />
+        <span className="throughputInputRadioBtnLabel">Manual</span>
       </Stack>
 
       {isAutoscaleSelected && (
         <Stack className="throughputInputSpacing">
-          <Text variant="small" data-testid="ruDescription">
+          <Text variant="small" aria-label="ruDescription">
             Estimate your required RU/s with{" "}
-            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" data-testid="ruDescription">
+            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="ruDescription">
               capacity calculator
             </Link>
             .
           </Text>
 
           <Stack horizontal>
-            <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }} data-testid="maxRUDescription">
+            <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }} aria-label="maxRUDescription">
               {isDatabase ? "Database" : getCollectionName()} Max RU/s
             </Text>
             <InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>
@@ -168,9 +169,9 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
       {!isAutoscaleSelected && (
         <Stack className="throughputInputSpacing">
-          <Text variant="small" data-testid="ruDescription">
+          <Text variant="small" aria-label="ruDescription">
             Estimate your required RU/s with&nbsp;
-            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" data-testid="capacityLink">
+            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="capacityLink">
               capacity calculator
             </Link>
             .

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -134,7 +134,7 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
     TelemetryProcessor.trace(Action.CreateDatabase, ActionModifiers.Open, addDatabasePaneOpenMessage);
   }, []);
 
-  const submit = () => {
+  const onSubmit = () => {
     if (!_isValid()) {
       return;
     }
@@ -249,17 +249,17 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
     []
   );
 
-  const genericPaneProps: RightPaneFormProps = {
+  const props: RightPaneFormProps = {
     expandConsole: container.expandConsole,
     formError: formErrors,
     formErrorDetail: formErrorsDetails,
     isExecuting,
     submitButtonText: "OK",
-    onSubmit: submit,
+    onSubmit,
   };
 
   return (
-    <RightPaneForm {...genericPaneProps}>
+    <RightPaneForm {...props}>
       <div className="paneContentContainer" role="dialog" aria-labelledby="databaseTitle">
         {showUpsellMessage && formErrors === "" && (
           <PanelInfoErrorComponent

src/Explorer/Panes/PanelFooterComponent.tsx

@@ -9,12 +9,6 @@ export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = (
   buttonLabel,
 }: PanelFooterProps): JSX.Element => (
   <div className="panelFooter">
-    <PrimaryButton
+    <PrimaryButton type="submit" id="sidePanelOkButton" text={buttonLabel} ariaLabel={buttonLabel} />
-      type="submit"
-      id="sidePanelOkButton"
-      text={buttonLabel}
-      ariaLabel={buttonLabel}
-      data-testid="submit"
-    />
   </div>
 );

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

@@ -15,7 +15,7 @@ const props = {
   onSubmit,
 };
 
-describe("Load Query Pane", () => {
+describe("Right Pane Form", () => {
   let wrapper: ReactWrapper;
 
   it("should render Default properly", () => {
@@ -24,12 +24,12 @@ describe("Load Query Pane", () => {
   });
   it("should call submit method enter in form", () => {
     render(<RightPaneForm {...props} />);
-    fireEvent.click(screen.getByTestId("submit"));
+    fireEvent.click(screen.getByLabelText("Load"));
     expect(onSubmit).toHaveBeenCalled();
   });
   it("should call submit method click on submit button", () => {
     render(<RightPaneForm {...props} />);
-    fireEvent.click(screen.getByTestId("submit"));
+    fireEvent.click(screen.getByLabelText("Load"));
     expect(onSubmit).toHaveBeenCalled();
   });
   it("should render error in header", () => {

src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx

@@ -1,30 +1,15 @@
-<<<<<<< HEAD
 import React, { FunctionComponent, ReactNode } from "react";
 import { PanelFooterComponent } from "../PanelFooterComponent";
 import { PanelInfoErrorComponent, PanelInfoErrorProps } from "../PanelInfoErrorComponent";
 import { PanelLoadingScreen } from "../PanelLoadingScreen";
-=======
-import { IconButton } from "@fluentui/react";
-import React, { FunctionComponent, ReactNode } from "react";
-import { KeyCodes } from "../../../Common/Constants";
->>>>>>> 487fbf207299bfd3b7d6404bf0307a8de29ac987
 
 export interface RightPaneFormProps {
   expandConsole: () => void;
   formError: string;
   formErrorDetail: string;
-<<<<<<< HEAD
   isExecuting: boolean;
   onSubmit: () => void;
   submitButtonText: string;
-=======
-  id: string;
-  isExecuting: boolean;
-  onClose: () => void;
-  onSubmit: () => void;
-  submitButtonText: string;
-  title: string;
->>>>>>> 487fbf207299bfd3b7d6404bf0307a8de29ac987
   isSubmitButtonHidden?: boolean;
   children?: ReactNode;
 }

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Load Query Pane should render Default properly 1`] = `
+exports[`Right Pane Form should render Default properly 1`] = `
 <RightPaneForm
   expandConsole={[MockFunction]}
   formError=""
@@ -28,14 +28,12 @@ exports[`Load Query Pane should render Default properly 1`] = `
       >
         <CustomizedPrimaryButton
           ariaLabel="Load"
-          data-testid="submit"
           id="sidePanelOkButton"
           text="Load"
           type="submit"
         >
           <PrimaryButton
             ariaLabel="Load"
-            data-testid="submit"
             id="sidePanelOkButton"
             text="Load"
             theme={
@@ -315,7 +313,6 @@ exports[`Load Query Pane should render Default properly 1`] = `
           >
             <CustomizedDefaultButton
               ariaLabel="Load"
-              data-testid="submit"
               id="sidePanelOkButton"
               onRenderDescription={[Function]}
               primary={true}
@@ -597,7 +594,6 @@ exports[`Load Query Pane should render Default properly 1`] = `
             >
               <DefaultButton
                 ariaLabel="Load"
-                data-testid="submit"
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
                 primary={true}
@@ -880,7 +876,6 @@ exports[`Load Query Pane should render Default properly 1`] = `
                 <BaseButton
                   ariaLabel="Load"
                   baseClassName="ms-Button"
-                  data-testid="submit"
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
                   primary={true}
@@ -1737,7 +1732,6 @@ exports[`Load Query Pane should render Default properly 1`] = `
                     aria-label="Load"
                     className="ms-Button ms-Button--primary root-53"
                     data-is-focusable={true}
-                    data-testid="submit"
                     id="sidePanelOkButton"
                     onClick={[Function]}
                     onKeyDown={[Function]}

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

@@ -1288,7 +1288,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
       <Stack
         className="panelInfoErrorContainer"
         horizontal={true}
-        verticalAlign="start"
+        verticalAlign="center"
       >
         <div
           className="ms-Stack panelInfoErrorContainer css-202"
@@ -1296,14 +1296,12 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
           <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={
@@ -1584,11 +1582,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
                 aria-label="warning"
                 className="panelWarningIcon root-204"
                 data-icon-name="WarningSolid"
-<<<<<<< HEAD
                 role="img"
-=======
-                data-testid="warningIcon"
->>>>>>> 487fbf207299bfd3b7d6404bf0307a8de29ac987
               >
                 
               </i>
@@ -1601,13 +1595,11 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
             <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>
@@ -2311,14 +2303,12 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
       >
         <CustomizedPrimaryButton
           ariaLabel="OK"
-          data-testid="submit"
           id="sidePanelOkButton"
           text="OK"
           type="submit"
         >
           <PrimaryButton
             ariaLabel="OK"
-            data-testid="submit"
             id="sidePanelOkButton"
             text="OK"
             theme={
@@ -2598,7 +2588,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
           >
             <CustomizedDefaultButton
               ariaLabel="OK"
-              data-testid="submit"
               id="sidePanelOkButton"
               onRenderDescription={[Function]}
               primary={true}
@@ -2880,7 +2869,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
             >
               <DefaultButton
                 ariaLabel="OK"
-                data-testid="submit"
                 id="sidePanelOkButton"
                 onRenderDescription={[Function]}
                 primary={true}
@@ -3163,7 +3151,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
                 <BaseButton
                   ariaLabel="OK"
                   baseClassName="ms-Button"
-                  data-testid="submit"
                   id="sidePanelOkButton"
                   onRenderDescription={[Function]}
                   primary={true}
@@ -4020,7 +4007,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
                     aria-label="OK"
                     className="ms-Button ms-Button--primary root-218"
                     data-is-focusable={true}
-                    data-testid="submit"
                     id="sidePanelOkButton"
                     onClick={[Function]}
                     onKeyDown={[Function]}