GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 06:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use antd form in organization display name (#2006)

Browse Source 
* 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
1 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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