fix: alert name required message & button disabled (#2896)

* fix: alert name required message & button disabled

* fix: tooltip message issue

* fix: button disabled issue while create alert

* chore: requiredMessage is updated

---------

Co-authored-by: Palash Gupta <palashgdev@gmail.com>
This commit is contained in:
Chintan Sudani 2023-06-14 12:53:50 +05:30 committed by GitHub
parent 148889e198
commit 8433d81dc0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 19 deletions

View File

@ -1,6 +1,7 @@
import { Form, Select } from 'antd';
import { useTranslation } from 'react-i18next';
import { AlertDef, Labels } from 'types/api/alerts/def';
import { requireErrorMessage } from 'utils/form/requireErrorMessage';
import ChannelSelect from './ChannelSelect';
import LabelSelect from './labels';
@ -54,7 +55,15 @@ function BasicInfo({ alertDef, setAlertDef }: BasicInfoProps): JSX.Element {
</SeveritySelect>
</Form.Item>
<Form.Item label={t('field_alert_name')} labelAlign="left" name="alert">
<Form.Item
required
name="alert"
labelAlign="left"
label={t('field_alert_name')}
rules={[
{ required: true, message: requireErrorMessage(t('field_alert_name')) },
]}
>
<InputSmall
onChange={(e): void => {
setAlertDef({
@ -97,10 +106,10 @@ function BasicInfo({ alertDef, setAlertDef }: BasicInfoProps): JSX.Element {
<FormItemMedium label="Notification Channels">
<ChannelSelect
currentValue={alertDef.preferredChannels}
onSelectChannels={(s: string[]): void => {
onSelectChannels={(preferredChannels): void => {
setAlertDef({
...alertDef,
preferredChannels: s,
preferredChannels,
});
}}
/>

View File

@ -201,10 +201,6 @@ function FormAlertRules({
const isFormValid = useCallback((): boolean => {
if (!alertDef.alert || alertDef.alert === '') {
notifications.error({
message: 'Error',
description: t('alertname_required'),
});
return false;
}
@ -217,14 +213,7 @@ function FormAlertRules({
}
return validateQBParams();
}, [
t,
validateQBParams,
validateChQueryParams,
alertDef,
validatePromParams,
notifications,
]);
}, [validateQBParams, validateChQueryParams, alertDef, validatePromParams]);
const preparePostData = (): AlertDef => {
const postableAlert: AlertDef = {
@ -328,9 +317,7 @@ function FormAlertRules({
title: t('confirm_save_title'),
centered: true,
content,
onOk() {
saveRule();
},
onOk: saveRule,
});
}, [t, saveRule, currentQuery]);
@ -407,6 +394,8 @@ function FormAlertRules({
const isNewRule = ruleId === 0;
const isAlertNameMissing = !formInstance.getFieldValue('alert');
const isAlertAvialableToSave =
isAlertAvialable &&
isNewRule &&
@ -448,7 +437,7 @@ function FormAlertRules({
type="primary"
onClick={onSaveHandler}
icon={<SaveOutlined />}
disabled={isAlertAvialableToSave}
disabled={isAlertNameMissing || isAlertAvialableToSave}
>
{isNewRule ? t('button_createrule') : t('button_savechanges')}
</ActionButton>