functional component convert and use fluent ui

src/Contracts/DataModels.ts

@@ -273,7 +273,7 @@ export interface AutoPilotOfferSettings {
 }
 
 export interface CreateDatabaseParams {
-  autoPilotMaxThroughput?: number | string;
+  autoPilotMaxThroughput?: number;
   databaseId: string;
   databaseLevelThroughput?: boolean;
   offerThroughput?: number;

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

@@ -1,4 +1,4 @@
-import { shallow, ShallowWrapper } from "enzyme";
+import { mount, ReactWrapper } from "enzyme";
 import React from "react";
 import { ThroughputInput } from ".";
 const props = {
@@ -9,11 +9,27 @@ const props = {
   onCostAcknowledgeChange: () => jest.fn(),
 };
 describe("ThroughputInput Pane", () => {
-  let wrapper: ShallowWrapper;
+  let wrapper: ReactWrapper;
+
   beforeEach(() => {
-    wrapper = shallow(<ThroughputInput {...props} />);
+    wrapper = mount(<ThroughputInput {...props} />);
   });
+
   it("should render Default properly", () => {
     expect(wrapper).toMatchSnapshot();
   });
+
+  it("test Autoscale Mode select", () => {
+    wrapper.setProps({ isAutoscaleSelected: true });
+    expect(wrapper.find('[data-testid="ruDescription"]').at(0).text()).toContain(
+      "Provision maximum RU/s required by this resource. Estimate your required RU/s with"
+    );
+    expect(wrapper.find('[data-testid="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('[data-testid="capacityLink"]').at(0).text()).toContain("capacity calculator");
+  });
 });

src/Explorer/Controls/ThroughputInput/index.tsx

@@ -9,7 +9,7 @@ import {
   TextField,
   TooltipHost,
 } from "office-ui-fabric-react";
-import React, { FunctionComponent, useEffect, useState } from "react";
+import React, { FunctionComponent, useState } from "react";
 import * as Constants from "../../../Common/Constants";
 import { Tooltip } from "../../../Common/Tooltip";
 import * as SharedConstants from "../../../Shared/Constants";
@@ -25,12 +25,8 @@ export interface ThroughputInputProps {
   setThroughputValue: (throughput: number) => void;
   setIsAutoscale: (isAutoscale: boolean) => void;
   onCostAcknowledgeChange: (isAcknowledged: boolean) => void;
-}
-
-export interface ThroughputInputState {
   isAutoscaleSelected?: boolean;
   throughput?: number;
-  isCostAcknowledged?: boolean;
 }
 
 export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
@@ -38,20 +34,11 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
   showFreeTierExceedThroughputTooltip,
   setThroughputValue,
   setIsAutoscale,
+  isAutoscaleSelected = true,
+  throughput = AutoPilotUtils.minAutoPilotThroughput,
   onCostAcknowledgeChange,
 }: ThroughputInputProps) => {
-  const [state, updateState] = useState<ThroughputInputState>({
+  const [isCostAcknowledged, setIsCostAcknowledged] = useState<boolean>(false);
-    isAutoscaleSelected: true,
-    throughput: AutoPilotUtils.minAutoPilotThroughput,
-    isCostAcknowledged: false,
-  });
-  const { isAutoscaleSelected, throughput, isCostAcknowledged } = state;
-  const setState = (newState: ThroughputInputState) => updateState({ ...state, ...newState });
-
-  useEffect(() => {
-    setThroughputValue(throughput);
-    setIsAutoscale(isAutoscaleSelected);
-  }, [isAutoscaleSelected, throughput]);
 
   const getThroughputLabelText = (): string => {
     if (isAutoscaleSelected) {
@@ -67,7 +54,8 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
   const onThroughputValueChange = (newInput: string): void => {
     const newThroughput = parseInt(newInput);
-    setState({ throughput: newThroughput });
+    setThroughputValue(newThroughput);
+    setIsAutoscale(isAutoscaleSelected);
   };
 
   const getAutoScaleTooltip = (): string => {
@@ -95,12 +83,11 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
   const handleOnChangeMode = (ev: React.FormEvent<HTMLInputElement>, option: IChoiceGroupOption): void => {
     if (option.key === "true") {
-      setState({ isAutoscaleSelected: true, throughput: AutoPilotUtils.minAutoPilotThroughput });
+      setThroughputValue(AutoPilotUtils.minAutoPilotThroughput);
+      setIsAutoscale(true);
     } else {
-      setState({
+      setThroughputValue(SharedConstants.CollectionCreation.DefaultCollectionRUs400);
-        isAutoscaleSelected: false,
+      setIsAutoscale(false);
-        throughput: SharedConstants.CollectionCreation.DefaultCollectionRUs400,
-      });
     }
   };
 
@@ -129,16 +116,16 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
       {isAutoscaleSelected && (
         <Stack className="throughputInputSpacing">
-          <Text variant="small">
+          <Text variant="small" data-testid="ruDescription">
             Provision maximum RU/s required by this resource. Estimate your required RU/s with&nbsp;
-            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
+            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" data-testid="ruDescription">
               capacity calculator
             </Link>
             .
           </Text>
 
           <Stack horizontal>
-            <Text variant="small" style={{ lineHeight: "20px" }}>
+            <Text variant="small" style={{ lineHeight: "20px" }} data-testid="maxRUDescription">
               Max RU/s
             </Text>
             <Tooltip>{getAutoScaleTooltip()}</Tooltip>
@@ -170,9 +157,9 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
       {!isAutoscaleSelected && (
         <Stack className="throughputInputSpacing">
-          <Text variant="small">
+          <Text variant="small" data-testid="ruDescription">
             Estimate your required RU/s with&nbsp;
-            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
+            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" data-testid="capacityLink">
               capacity calculator
             </Link>
             .
@@ -216,7 +203,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
               label: { padding: 0, margin: "4px 4px 0 0" },
             }}
             onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => {
-              setState({ isCostAcknowledged: isChecked });
+              setIsCostAcknowledged(isChecked);
               onCostAcknowledgeChange(isChecked);
             }}
           />

src/Explorer/Controls/ThroughputInput/styles.less

@@ -13,8 +13,4 @@
 
 .throughputInputSpacing {
   margin-bottom: @SmallSpace;
-
-  & > * {
-    margin-bottom: @SmallSpace;
-  }
 }

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -218,6 +218,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                       this.isFreeTierAccount() && !this.props.explorer.isFirstResourceCreated()
                     }
                     isDatabase={true}
+                    isAutoscaleSelected={this.isNewDatabaseAutoscale}
+                    throughput={this.newDatabaseThroughput}
                     setThroughputValue={(throughput: number) => (this.newDatabaseThroughput = throughput)}
                     setIsAutoscale={(isAutoscale: boolean) => (this.isNewDatabaseAutoscale = isAutoscale)}
                     onCostAcknowledgeChange={(isAcknowledge: boolean) => (this.isCostAcknowledged = isAcknowledge)}
@@ -439,6 +441,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 this.isFreeTierAccount() && !this.props.explorer.isFirstResourceCreated()
               }
               isDatabase={false}
+              isAutoscaleSelected={this.isCollectionAutoscale}
+              throughput={this.collectionThroughput}
               setThroughputValue={(throughput: number) => (this.collectionThroughput = throughput)}
               setIsAutoscale={(isAutoscale: boolean) => (this.isCollectionAutoscale = isAutoscale)}
               onCostAcknowledgeChange={(isAcknowledged: boolean) => {

src/Explorer/Panes/AddDatabasePane/index.tsx

@@ -156,7 +156,7 @@ export const AddDatabasePane: FunctionComponent<AddDatabasePaneProps> = ({
       databaseLevelThroughput: addDatabasePaneStartMessage.database.shared,
     };
     if (isAutoPilotSelected) {
-      createDatabaseParams.autoPilotMaxThroughput = "" + addDatabasePaneStartMessage.offerThroughput;
+      createDatabaseParams.autoPilotMaxThroughput = addDatabasePaneStartMessage.offerThroughput;
     } else {
       createDatabaseParams.offerThroughput = addDatabasePaneStartMessage.offerThroughput;
     }
@@ -324,6 +324,8 @@ export const AddDatabasePane: FunctionComponent<AddDatabasePaneProps> = ({
                   <ThroughputInput
                     showFreeTierExceedThroughputTooltip={isFreeTierAccount && !container?.isFirstResourceCreated()}
                     isDatabase={true}
+                    isAutoscaleSelected={isAutoPilotSelected}
+                    throughput={throughput}
                     setThroughputValue={(throughput: number) => setThroughput(throughput)}
                     setIsAutoscale={(isAutoscale: boolean) => setIsAutoPilotSelected(isAutoscale)}
                     onCostAcknowledgeChange={(isAcknowledged: boolean) => setThroughputSpendAck(isAcknowledged)}