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/SettingsComponent.tsx

@@ -5,18 +5,18 @@ import DiscardIcon from "../../../../images/discard.svg";
 import SaveIcon from "../../../../images/save-cosmos.svg";
 import { AuthType } from "../../../AuthType";
 import * as Constants from "../../../Common/Constants";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
 import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
 import { updateCollection } from "../../../Common/dataAccess/updateCollection";
 import { updateOffer } from "../../../Common/dataAccess/updateOffer";
-import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../../UserContext";
-import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import { useCommandBar } from "../../Menus/CommandBar/CommandBarComponentAdapter";
 import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
@@ -37,15 +37,15 @@ import {
   AddMongoIndexProps,
   ChangeFeedPolicyState,
   GeospatialConfigType,
+  MongoIndexTypes,
+  SettingsV2TabTypes,
+  TtlType,
   getMongoNotification,
   getTabTitle,
   hasDatabaseSharedThroughput,
   isDirty,
-  MongoIndexTypes,
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
-  SettingsV2TabTypes,
-  TtlType,
 } from "./SettingsUtils";
 
 interface SettingsV2TabInfo {
@@ -78,6 +78,8 @@ export interface SettingsComponentState {
   timeToLiveBaseline: TtlType;
   timeToLiveSeconds: number;
   timeToLiveSecondsBaseline: number;
+  displayedTtlSeconds: string;
+  displayedTtlSecondsBaseline: string;
   geospatialConfigType: GeospatialConfigType;
   geospatialConfigTypeBaseline: GeospatialConfigType;
   analyticalStorageTtlSelection: TtlType;
@@ -164,6 +166,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       timeToLiveBaseline: undefined,
       timeToLiveSeconds: undefined,
       timeToLiveSecondsBaseline: undefined,
+      displayedTtlSeconds: undefined,
+      displayedTtlSecondsBaseline: undefined,
       geospatialConfigType: undefined,
       geospatialConfigTypeBaseline: undefined,
       analyticalStorageTtlSelection: undefined,
@@ -369,6 +373,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       throughput: this.state.throughputBaseline,
       timeToLive: this.state.timeToLiveBaseline,
       timeToLiveSeconds: this.state.timeToLiveSecondsBaseline,
+      displayedTtlSeconds: this.state.displayedTtlSecondsBaseline,
       geospatialConfigType: this.state.geospatialConfigTypeBaseline,
       indexingPolicyContent: this.state.indexingPolicyContentBaseline,
       indexesToAdd: [],
@@ -479,6 +484,9 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private onTimeToLiveSecondsChange = (newTimeToLiveSeconds: number): void =>
     this.setState({ timeToLiveSeconds: newTimeToLiveSeconds });
 
+  private onDisplayedTtlChange = (newDisplayedTtlSeconds: string): void =>
+    this.setState({ displayedTtlSeconds: newDisplayedTtlSeconds });
+
   private onGeoSpatialConfigTypeChange = (newGeoSpatialConfigType: GeospatialConfigType): void =>
     this.setState({ geospatialConfigType: newGeoSpatialConfigType });
 
@@ -608,6 +616,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         break;
     }
 
+    const displayedTtlSeconds: string = timeToLive === TtlType.On ? timeToLiveSeconds.toString() : "";
+
     let analyticalStorageTtlSelection: TtlType;
     let analyticalStorageTtlSeconds: number;
     if (this.isAnalyticalStorageEnabled) {
@@ -645,6 +655,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       timeToLiveBaseline: timeToLive,
       timeToLiveSeconds: timeToLiveSeconds,
       timeToLiveSecondsBaseline: timeToLiveSeconds,
+      displayedTtlSeconds: displayedTtlSeconds,
+      displayedTtlSecondsBaseline: displayedTtlSeconds,
       analyticalStorageTtlSelection: analyticalStorageTtlSelection,
       analyticalStorageTtlSelectionBaseline: analyticalStorageTtlSelection,
       analyticalStorageTtlSeconds: analyticalStorageTtlSeconds,
@@ -986,6 +998,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       timeToLiveSeconds: this.state.timeToLiveSeconds,
       timeToLiveSecondsBaseline: this.state.timeToLiveSecondsBaseline,
       onTimeToLiveSecondsChange: this.onTimeToLiveSecondsChange,
+      displayedTtlSeconds: this.state.displayedTtlSeconds,
+      onDisplayedTtlSecondsChange: this.onDisplayedTtlChange,
       geospatialConfigType: this.state.geospatialConfigType,
       geospatialConfigTypeBaseline: this.state.geospatialConfigTypeBaseline,
       onGeoSpatialConfigTypeChange: this.onGeoSpatialConfigTypeChange,

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)"
           />

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -150,12 +150,14 @@ exports[`SettingsComponent renders 1`] = `
               "usageSizeInKB": [Function],
             }
           }
+          displayedTtlSeconds="5"
           geospatialConfigType="Geometry"
           geospatialConfigTypeBaseline="Geometry"
           isAnalyticalStorageEnabled={false}
           onAnalyticalStorageTtlSecondsChange={[Function]}
           onAnalyticalStorageTtlSelectionChange={[Function]}
           onChangeFeedPolicyChange={[Function]}
+          onDisplayedTtlSecondsChange={[Function]}
           onGeoSpatialConfigTypeChange={[Function]}
           onSubSettingsDiscardableChange={[Function]}
           onSubSettingsSaveableChange={[Function]}