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>
This commit is contained in:
Yash Joshi 2023-01-11 00:59:45 +05:30 committed by GitHub
parent a4346a2d93
commit ca77820e9d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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"
<Form
initialValues={{ name }}
form={form}
layout="vertical"
onFinish={onSubmit}
autoComplete="off"
>
Change Org Name
<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;