GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-10 07:19:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: form changes (#2754)

Browse Source 
* 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>
This commit is contained in:
GermaVinsmoke 2023-05-23 21:56:06 +05:30 committed by GitHub
parent 5a81f5f90b
commit b034c60897
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/container/OrganizationSettings/DisplayName/index.tsx
View File

@ -9,13 +9,15 @@ import { AppState } from 'store/reducers';
import AppActions from 'types/actions'; import AppActions from 'types/actions';
import { UPDATE_ORG_NAME } from 'types/actions/app'; import { UPDATE_ORG_NAME } from 'types/actions/app';
import AppReducer, { User } from 'types/reducer/app'; import AppReducer, { User } from 'types/reducer/app';
import { requireErrorMessage } from 'utils/form/requireErrorMessage';
function DisplayName({ function DisplayName({
index, index,
id: orgId, id: orgId,
isAnonymous, isAnonymous,
}: DisplayNameProps): JSX.Element { }: DisplayNameProps): JSX.Element {
const [form] = Form.useForm(); const [form] = Form.useForm<FormValues>();
const orgName = Form.useWatch('name', form);
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);
@ -24,12 +26,13 @@ function DisplayName({
const dispatch = useDispatch<Dispatch<AppActions>>(); const dispatch = useDispatch<Dispatch<AppActions>>();
const { notifications } = useNotifications(); const { notifications } = useNotifications();
const onSubmit = async ({ name: orgName }: OnSubmitProps): Promise<void> => { const onSubmit = async (values: FormValues): Promise<void> => {
try { try {
setIsLoading(true); setIsLoading(true);
const { name } = values;
const { statusCode, error } = await editOrg({ const { statusCode, error } = await editOrg({
isAnonymous, isAnonymous,
name: orgName, name,
orgId, orgId,
}); });
if (statusCode === 200) { if (statusCode === 200) {
@ -42,7 +45,7 @@ function DisplayName({
type: UPDATE_ORG_NAME, type: UPDATE_ORG_NAME,
payload: { payload: {
orgId, orgId,
name: orgName, name,
}, },
}); });
} else { } else {
@ -69,6 +72,8 @@ function DisplayName({
return <div />; return <div />;
} }
const isDisabled = isLoading || orgName === name || !orgName;
return ( return (
<Form <Form
initialValues={{ name }} initialValues={{ name }}
@ -77,11 +82,20 @@ function DisplayName({
onFinish={onSubmit} onFinish={onSubmit}
autoComplete="off" autoComplete="off"
> >
<Form.Item name="name" label="Display name" rules={[{ required: true }]}> <Form.Item
<Input size="large" placeholder={t('signoz')} disabled={isLoading} /> name="name"
label="Display name"
rules={[{ required: true, message: requireErrorMessage('Display name') }]}
>
<Input size="large" placeholder={t('signoz')} />
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<Button loading={isLoading} type="primary" htmlType="submit"> <Button
loading={isLoading}
disabled={isDisabled}
type="primary"
htmlType="submit"
>
Submit Submit
</Button> </Button>
</Form.Item> </Form.Item>
@ -95,7 +109,7 @@ interface DisplayNameProps {
isAnonymous: boolean; isAnonymous: boolean;
} }
interface OnSubmitProps { interface FormValues {
name: string; name: string;
} }

2
frontend/src/utils/form/requireErrorMessage.ts Normal file
View File

@ -0,0 +1,2 @@
export const requireErrorMessage = (fieldName: string): string =>
`Missing ${fieldName}`;