From b034c60897d98039b008ba727201c0ee9a1b0086 Mon Sep 17 00:00:00 2001
From: GermaVinsmoke <vaibhav1180@gmail.com>
Date: Tue, 23 May 2023 21:56:06 +0530
Subject: [PATCH] chore: form changes (#2754)

* chore: form type and removed disabled

Signed-off-by: GermaVinsmoke <vaibhav1180@gmail.com>

* chore: added disabled to the button

Signed-off-by: GermaVinsmoke <vaibhav1180@gmail.com>

* chore: created error message fn for required rule

Signed-off-by: GermaVinsmoke <vaibhav1180@gmail.com>

* chore: disable condition is updated

* chore: isLoading is added in the disabled condition

---------

Signed-off-by: GermaVinsmoke <vaibhav1180@gmail.com>
Co-authored-by: Palash Gupta <palashgdev@gmail.com>
---
 .../DisplayName/index.tsx                     | 30 ++++++++++++++-----
 .../src/utils/form/requireErrorMessage.ts     |  2 ++
 2 files changed, 24 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/utils/form/requireErrorMessage.ts

diff --git a/frontend/src/container/OrganizationSettings/DisplayName/index.tsx b/frontend/src/container/OrganizationSettings/DisplayName/index.tsx
index 8bd8e2f891..96d6249c70 100644
--- a/frontend/src/container/OrganizationSettings/DisplayName/index.tsx
+++ b/frontend/src/container/OrganizationSettings/DisplayName/index.tsx
@@ -9,13 +9,15 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { UPDATE_ORG_NAME } from 'types/actions/app';
 import AppReducer, { User } from 'types/reducer/app';
+import { requireErrorMessage } from 'utils/form/requireErrorMessage';
 
 function DisplayName({
 	index,
 	id: orgId,
 	isAnonymous,
 }: DisplayNameProps): JSX.Element {
-	const [form] = Form.useForm();
+	const [form] = Form.useForm<FormValues>();
+	const orgName = Form.useWatch('name', form);
 
 	const { t } = useTranslation(['organizationsettings', 'common']);
 	const { org } = useSelector<AppState, AppReducer>((state) => state.app);
@@ -24,12 +26,13 @@ function DisplayName({
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 	const { notifications } = useNotifications();
 
-	const onSubmit = async ({ name: orgName }: OnSubmitProps): Promise<void> => {
+	const onSubmit = async (values: FormValues): Promise<void> => {
 		try {
 			setIsLoading(true);
+			const { name } = values;
 			const { statusCode, error } = await editOrg({
 				isAnonymous,
-				name: orgName,
+				name,
 				orgId,
 			});
 			if (statusCode === 200) {
@@ -42,7 +45,7 @@ function DisplayName({
 					type: UPDATE_ORG_NAME,
 					payload: {
 						orgId,
-						name: orgName,
+						name,
 					},
 				});
 			} else {
@@ -69,6 +72,8 @@ function DisplayName({
 		return <div />;
 	}
 
+	const isDisabled = isLoading || orgName === name || !orgName;
+
 	return (
 		<Form
 			initialValues={{ name }}
@@ -77,11 +82,20 @@ function DisplayName({
 			onFinish={onSubmit}
 			autoComplete="off"
 		>
-			<Form.Item name="name" label="Display name" rules={[{ required: true }]}>
-				<Input size="large" placeholder={t('signoz')} disabled={isLoading} />
+			<Form.Item
+				name="name"
+				label="Display name"
+				rules={[{ required: true, message: requireErrorMessage('Display name') }]}
+			>
+				<Input size="large" placeholder={t('signoz')} />
 			</Form.Item>
 			<Form.Item>
-				<Button loading={isLoading} type="primary" htmlType="submit">
+				<Button
+					loading={isLoading}
+					disabled={isDisabled}
+					type="primary"
+					htmlType="submit"
+				>
 					Submit
 				</Button>
 			</Form.Item>
@@ -95,7 +109,7 @@ interface DisplayNameProps {
 	isAnonymous: boolean;
 }
 
-interface OnSubmitProps {
+interface FormValues {
 	name: string;
 }
 
diff --git a/frontend/src/utils/form/requireErrorMessage.ts b/frontend/src/utils/form/requireErrorMessage.ts
new file mode 100644
index 0000000000..2fc4d967fa
--- /dev/null
+++ b/frontend/src/utils/form/requireErrorMessage.ts
@@ -0,0 +1,2 @@
+export const requireErrorMessage = (fieldName: string): string =>
+	`Missing ${fieldName}`;