From 8b22027cb69492cd8ff6e670bbb62ff1dae48bed Mon Sep 17 00:00:00 2001
From: victor-meng <56978073+victor-meng@users.noreply.github.com>
Date: Fri, 25 Mar 2022 15:13:56 -0700
Subject: [PATCH] Fix settings tab shows no selected value (#1237)

---
 .../Controls/Settings/SettingsComponent.tsx   | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/Explorer/Controls/Settings/SettingsComponent.tsx b/src/Explorer/Controls/Settings/SettingsComponent.tsx
index 7f4f8c64b..2121d9e27 100644
--- a/src/Explorer/Controls/Settings/SettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx
@@ -149,7 +149,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.offer = this.database?.offer();
     }
 
-    this.state = {
+    const initialState: SettingsComponentState = {
       throughput: undefined,
       throughputBaseline: undefined,
       autoPilotThroughput: undefined,
@@ -199,6 +199,11 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       selectedTab: SettingsV2TabTypes.ScaleTab,
     };
 
+    this.state = {
+      ...initialState,
+      ...this.getBaselineValues(),
+    };
+
     this.saveSettingsButton = {
       isEnabled: this.isSaveSettingsButtonEnabled,
       isVisible: () => {
@@ -561,21 +566,24 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   };
 
   public setBaseline = (): void => {
+    const baselineValues = this.getBaselineValues();
+    this.setState(baselineValues as SettingsComponentState);
+  };
+
+  private getBaselineValues = (): Partial<SettingsComponentState> => {
     const offerThroughput = this.offer?.manualThroughput;
 
     if (!this.isCollectionSettingsTab) {
-      this.setState({
+      return {
         throughput: offerThroughput,
         throughputBaseline: offerThroughput,
-      });
-
-      return;
+      };
     }
 
     const defaultTtl = this.collection.defaultTtl();
 
-    let timeToLive: TtlType = this.state.timeToLive;
-    let timeToLiveSeconds = this.state.timeToLiveSeconds;
+    let timeToLive: TtlType;
+    let timeToLiveSeconds: number;
     switch (defaultTtl) {
       case undefined:
       case 0:
@@ -620,7 +628,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       (this.collection.geospatialConfig && this.collection.geospatialConfig()?.type) || GeospatialConfigType.Geometry;
     const geoSpatialConfigType = GeospatialConfigType[geospatialConfigTypeString as keyof typeof GeospatialConfigType];
 
-    this.setState({
+    return {
       throughput: offerThroughput,
       throughputBaseline: offerThroughput,
       changeFeedPolicy: changeFeedPolicy,
@@ -643,7 +651,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       conflictResolutionPolicyProcedureBaseline: conflictResolutionPolicyProcedure,
       geospatialConfigType: geoSpatialConfigType,
       geospatialConfigTypeBaseline: geoSpatialConfigType,
-    });
+    };
   };
 
   private getTabsButtons = (): CommandButtonComponentProps[] => {