Users/bogercraig/blank ttl default value (#1596)

* Initial rough of keeping textfield blank.  Still need to disable save button.

* Rough implementation with state moved up to settings component.  Allows for discarding of new TTL when TTL is already enabled.

* Updating unit tests to include new display variable.

* Brought formatting back from master.

* Updating unit test snapshots.

* Ran prettier and renormalized modified files.

* Correct lint issues.

* Undo prettier changes to add collection code and testing snapshot.

* Restoring AddCollectionPanel to match master.  Not modifying snapshot.

---------

Co-authored-by: Craig Boger <craig.boger@microsoft.com>

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

@@ -20,6 +20,10 @@ describe("SubSettingsComponent", () => {
     onTimeToLiveSecondsChange: () => {
       return;
     },
+    displayedTtlSeconds: "1000",
+    onDisplayedTtlSecondsChange: () => {
+      return;
+    },
 
     geospatialConfigType: GeospatialConfigType.Geography,
     geospatialConfigTypeBaseline: GeospatialConfigType.Geography,

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

@@ -15,13 +15,13 @@ import {
 import {
   ChangeFeedPolicyState,
   GeospatialConfigType,
-  getSanitizedInputValue,
   IsComponentDirtyResult,
-  isDirty,
   TtlOff,
   TtlOn,
   TtlOnNoDefault,
   TtlType,
+  getSanitizedInputValue,
+  isDirty,
 } from "../SettingsUtils";
 import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
 
@@ -34,6 +34,8 @@ export interface SubSettingsComponentProps {
   timeToLiveSeconds: number;
   timeToLiveSecondsBaseline: number;
   onTimeToLiveSecondsChange: (newTimeToLiveSeconds: number) => void;
+  displayedTtlSeconds: string;
+  onDisplayedTtlSecondsChange: (newDisplayedTtlSeconds: string) => void;
 
   geospatialConfigType: GeospatialConfigType;
   geospatialConfigTypeBaseline: GeospatialConfigType;
@@ -73,7 +75,14 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
     this.onComponentUpdate();
   }
 
-  componentDidUpdate(): void {
+  componentDidUpdate(prevProps: SubSettingsComponentProps): void {
+    if (
+      (prevProps.timeToLive === TtlType.Off || prevProps.timeToLive === TtlType.OnNoDefault) &&
+      this.props.timeToLive === TtlType.On &&
+      this.props.timeToLiveBaseline !== TtlType.On
+    ) {
+      this.props.onDisplayedTtlSecondsChange("");
+    }
     this.onComponentUpdate();
   }
 
@@ -93,7 +102,8 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
   public IsComponentDirty = (): IsComponentDirtyResult => {
     if (
       (this.props.timeToLive === TtlType.On && !this.props.timeToLiveSeconds) ||
-      (this.props.analyticalStorageTtlSelection === TtlType.On && !this.props.analyticalStorageTtlSeconds)
+      (this.props.analyticalStorageTtlSelection === TtlType.On && !this.props.analyticalStorageTtlSeconds) ||
+      (this.props.timeToLive === TtlType.On && this.props.displayedTtlSeconds === "")
     ) {
       return { isSaveable: false, isDiscardable: true };
     } else if (
@@ -138,6 +148,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
     newValue?: string
   ): void => {
     const newTimeToLiveSeconds = getSanitizedInputValue(newValue, Int32.Max);
+    this.props.onDisplayedTtlSecondsChange(newTimeToLiveSeconds.toString());
     this.props.onTimeToLiveSecondsChange(newTimeToLiveSeconds);
   };
 
@@ -204,7 +215,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
             required
             min={1}
             max={Int32.Max}
-            value={this.props.timeToLiveSeconds?.toString()}
+            value={this.props.displayedTtlSeconds}
             onChange={this.onTimeToLiveSecondsChange}
             suffix="second(s)"
           />