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>

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -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,
 							});
 						}}
 					/>

frontend/src/container/FormAlertRules/index.tsx

@@ -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();
-	}, [
+	}, [validateQBParams, validateChQueryParams, alertDef, validatePromParams]);
-		t,
-		validateQBParams,
-		validateChQueryParams,
-		alertDef,
-		validatePromParams,
-		notifications,
-	]);
 
 	const preparePostData = (): AlertDef => {
 		const postableAlert: AlertDef = {
@@ -328,9 +317,7 @@ function FormAlertRules({
 			title: t('confirm_save_title'),
 			centered: true,
 			content,
-			onOk() {
+			onOk: saveRule,
-				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>