From fc7a0a8354e57abfb45fe887dfa731b1d55899ea Mon Sep 17 00:00:00 2001
From: Aryan Shridhar <53977614+aryanshridhar@users.noreply.github.com>
Date: Fri, 10 Dec 2021 13:27:07 +0530
Subject: [PATCH] fix(UI): Allow empty input values in settings retention page.
 (#459)

---
 .../container/GeneralSettings/Retention.tsx   | 13 ++++----
 .../src/container/GeneralSettings/index.tsx   | 33 +++++++++++++------
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/frontend/src/container/GeneralSettings/Retention.tsx b/frontend/src/container/GeneralSettings/Retention.tsx
index c98098e4ca..5f711e8cd4 100644
--- a/frontend/src/container/GeneralSettings/Retention.tsx
+++ b/frontend/src/container/GeneralSettings/Retention.tsx
@@ -56,17 +56,18 @@ const Retention = ({
 
 	const onChangeHandler = (
 		e: React.ChangeEvent<HTMLInputElement>,
-		func: React.Dispatch<React.SetStateAction<number>>,
+		func: React.Dispatch<React.SetStateAction<string>>,
 	): void => {
 		const value = e.target.value;
+		const integerValue = parseInt(value, 10);
 
-		if (value.length > 0) {
-			const parsedValue = Math.abs(parseInt(value, 10));
+		if (value.length > 0 && integerValue.toString() === value) {
+			const parsedValue = Math.abs(integerValue).toString();
 			func(parsedValue);
 		}
 
 		if (value.length === 0) {
-			func(0);
+			func('');
 		}
 	};
 
@@ -96,9 +97,9 @@ interface Option {
 }
 
 interface RetentionProps {
-	retentionValue: number;
+	retentionValue: string;
 	text: string;
-	setRentionValue: React.Dispatch<React.SetStateAction<number>>;
+	setRentionValue: React.Dispatch<React.SetStateAction<string>>;
 	selectedRetentionPeroid: SettingPeroid;
 	setSelectedRetentionPeroid: React.Dispatch<
 		React.SetStateAction<SettingPeroid>
diff --git a/frontend/src/container/GeneralSettings/index.tsx b/frontend/src/container/GeneralSettings/index.tsx
index 0c26a19b25..9aef4091c9 100644
--- a/frontend/src/container/GeneralSettings/index.tsx
+++ b/frontend/src/container/GeneralSettings/index.tsx
@@ -23,8 +23,8 @@ const GeneralSettings = (): JSX.Element => {
 	] = useState<SettingPeroid>('month');
 	const [notifications, Element] = notification.useNotification();
 
-	const [retentionPeroidMetrics, setRetentionPeroidMetrics] = useState<number>(
-		0,
+	const [retentionPeroidMetrics, setRetentionPeroidMetrics] = useState<string>(
+		'',
 	);
 	const [modal, setModal] = useState<boolean>(false);
 	const [postApiLoading, setPostApiLoading] = useState<boolean>(false);
@@ -33,7 +33,7 @@ const GeneralSettings = (): JSX.Element => {
 		'hr',
 	);
 
-	const [retentionPeroidTrace, setRetentionPeroidTrace] = useState<number>(0);
+	const [retentionPeroidTrace, setRetentionPeroidTrace] = useState<string>('');
 	const [isDefaultMetrics, setIsDefaultMetrics] = useState<boolean>(false);
 	const [isDefaultTrace, setIsDefaultTrace] = useState<boolean>(false);
 
@@ -73,10 +73,10 @@ const GeneralSettings = (): JSX.Element => {
 			const traceValue = getSettingsPeroid(traces_ttl_duration_hrs);
 			const metricsValue = getSettingsPeroid(metrics_ttl_duration_hrs);
 
-			setRetentionPeroidTrace(traceValue.value);
+			setRetentionPeroidTrace(traceValue.value.toString());
 			setSelectedTracePeroid(traceValue.peroid);
 
-			setRetentionPeroidMetrics(metricsValue.value);
+			setRetentionPeroidMetrics(metricsValue.value.toString());
 			setSelectedMetricsPeroid(metricsValue.peroid);
 		}
 	}, [setSelectedMetricsPeroid, loading, payload]);
@@ -85,14 +85,15 @@ const GeneralSettings = (): JSX.Element => {
 		try {
 			setPostApiLoading(true);
 			const retentionTraceValue =
-				retentionPeroidTrace === 0 && (payload?.traces_ttl_duration_hrs || 0) < 0
+				retentionPeroidTrace === '0' && (payload?.traces_ttl_duration_hrs || 0) < 0
 					? payload?.traces_ttl_duration_hrs || 0
-					: retentionPeroidTrace;
+					: parseInt(retentionPeroidTrace, 10);
 
 			const retentionMetricsValue =
-				retentionPeroidMetrics === 0 && (payload?.metrics_ttl_duration_hrs || 0) < 0
+				retentionPeroidMetrics === '0' &&
+				(payload?.metrics_ttl_duration_hrs || 0) < 0
 					? payload?.metrics_ttl_duration_hrs || 0
-					: retentionPeroidMetrics;
+					: parseInt(retentionPeroidMetrics, 10);
 
 			const [tracesResponse, metricsResponse] = await Promise.all([
 				setRetentionApi({
@@ -167,6 +168,14 @@ const GeneralSettings = (): JSX.Element => {
 		return `${getValue('Trace , Metrics')}`;
 	};
 
+	const isDisabledHandler = (): boolean => {
+		if (retentionPeroidTrace === '' || retentionPeroidMetrics === '') {
+			return true;
+		}
+
+		return false;
+	};
+
 	const errorText = getErrorText();
 
 	return (
@@ -213,7 +222,11 @@ const GeneralSettings = (): JSX.Element => {
 			</Modal>
 
 			<ButtonContainer>
-				<Button onClick={onClickSaveHandler} type="primary">
+				<Button
+					onClick={onClickSaveHandler}
+					disabled={isDisabledHandler()}
+					type="primary"
+				>
 					Save
 				</Button>
 			</ButtonContainer>