From ca77820e9dee0bb26138e5f714989255a2a3bf01 Mon Sep 17 00:00:00 2001
From: Yash Joshi <jyash97@gmail.com>
Date: Wed, 11 Jan 2023 00:59:45 +0530
Subject: [PATCH] refactor: use antd form in organization display name (#2006)

* refactor: use antd form in organization display name

* chore: interface is now named interface

Co-authored-by: Palash <palashgdev@gmail.com>
---
 .../DisplayName/index.tsx                     | 45 ++++++++++---------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/frontend/src/container/OrganizationSettings/DisplayName/index.tsx b/frontend/src/container/OrganizationSettings/DisplayName/index.tsx
index 1497232fee..135565447a 100644
--- a/frontend/src/container/OrganizationSettings/DisplayName/index.tsx
+++ b/frontend/src/container/OrganizationSettings/DisplayName/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Input, notification, Space, Typography } from 'antd';
+import { Button, Form, Input, notification } from 'antd';
 import editOrg from 'api/user/editOrg';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -14,14 +14,15 @@ function DisplayName({
 	id: orgId,
 	isAnonymous,
 }: DisplayNameProps): JSX.Element {
+	const [form] = Form.useForm();
+
 	const { t } = useTranslation(['organizationsettings', 'common']);
 	const { org } = useSelector<AppState, AppReducer>((state) => state.app);
 	const { name } = (org || [])[index];
-	const [orgName, setOrgName] = useState<string>(name);
 	const [isLoading, setIsLoading] = useState<boolean>(false);
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 
-	const onClickHandler = async (): Promise<void> => {
+	const onSubmit = async ({ name: orgName }: OnSubmitProps): Promise<void> => {
 		try {
 			setIsLoading(true);
 			const { statusCode, error } = await editOrg({
@@ -67,26 +68,22 @@ function DisplayName({
 	}
 
 	return (
-		<Space direction="vertical">
-			<Typography.Title level={3}>{t('display_name')}</Typography.Title>
-			<Space direction="vertical" size="middle">
-				<Input
-					value={orgName}
-					onChange={(e): void => setOrgName(e.target.value)}
-					size="large"
-					placeholder={t('signoz')}
-					disabled={isLoading}
-				/>
-				<Button
-					onClick={onClickHandler}
-					disabled={isLoading || orgName === name}
-					loading={isLoading}
-					type="primary"
-				>
-					Change Org Name
+		<Form
+			initialValues={{ name }}
+			form={form}
+			layout="vertical"
+			onFinish={onSubmit}
+			autoComplete="off"
+		>
+			<Form.Item name="name" label="Display name" rules={[{ required: true }]}>
+				<Input size="large" placeholder={t('signoz')} disabled={isLoading} />
+			</Form.Item>
+			<Form.Item>
+				<Button loading={isLoading} type="primary" htmlType="submit">
+					Submit
 				</Button>
-			</Space>
-		</Space>
+			</Form.Item>
+		</Form>
 	);
 }
 
@@ -96,4 +93,8 @@ interface DisplayNameProps {
 	isAnonymous: boolean;
 }
 
+interface OnSubmitProps {
+	name: string;
+}
+
 export default DisplayName;