GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-10 04:49:02 +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 { 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;
}

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

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