EPMRPP-81969 || Recipients field there is no validation message

app/localization/translated/be.json

@@ -78,6 +78,7 @@
   "AddEditNotificationCaseModal.title": "{actionType} Правила апавяшчэння",
   "AddEditNotificationModal.nameLabel": "Імя правіла",
   "AddEditNotificationModal.namePlaceholder": "Назва правіла",
+  "AddEditNotificationModal.recipientsError": "Калі ласка, увядзіце існуючае імя карыстальніка ў вашым праекце або сапраўдны адрас электроннай пошты",
   "AddEditNotificationModal.recipientsPlaceholder": "Імя карыстальніка/адрас электроннай пошты",
   "AddEditNotificationModal.ruleNameHint": "Пале для запаўнення абавязковае. Імя правіла павінна мець памер ад «1» да «55» сімвалаў",
   "AddFilter.filterName": "Назва Фільтра",

app/localization/translated/es.json

@@ -78,6 +78,7 @@
   "AddEditNotificationCaseModal.title": "{actionType} Regla de notificación",
   "AddEditNotificationModal.nameLabel": "Nombre de la regla",
   "AddEditNotificationModal.namePlaceholder": "Nombre de la regla",
+  "AddEditNotificationModal.recipientsError": "Please enter existent user name on your project or valid email",
   "AddEditNotificationModal.recipientsPlaceholder": "Nombre de usuario/correo electrónico",
   "AddEditNotificationModal.ruleNameHint": "Campo obligatorio. El nombre de la regla debe tener entre 1 y 55 caracteres",
   "AddFilter.filterName": "Nombre del filtro",

app/localization/translated/ru.json

@@ -78,6 +78,7 @@
   "AddEditNotificationCaseModal.title": "{actionType} Правило уведомления",
   "AddEditNotificationModal.nameLabel": "Имя правила",
   "AddEditNotificationModal.namePlaceholder": "Имя правила",
+  "AddEditNotificationModal.recipientsError": "Пожалуйста, введите существующее имя пользователя в вашем проекте или действительный адрес электронной почты",
   "AddEditNotificationModal.recipientsPlaceholder": "Имя пользователя/электронная почта",
   "AddEditNotificationModal.ruleNameHint": "Поле, обязательное для заполнения. Имя правила должно иметь размер от «1» до «55» символов",
   "AddFilter.filterName": "Имя фильтра",

app/localization/translated/uk.json

@@ -78,6 +78,7 @@
   "AddEditNotificationCaseModal.title": "{actionType} Правило нотифікації",
   "AddEditNotificationModal.nameLabel": "Назва правила",
   "AddEditNotificationModal.namePlaceholder": "Назва правила",
+  "AddEditNotificationModal.recipientsError": "Будь ласка, введіть існуюче ім'я користувача у вашому проекті або дійсну адресу електронної пошти",
   "AddEditNotificationModal.recipientsPlaceholder": "Ім'я користувача/електронна пошта",
   "AddEditNotificationModal.ruleNameHint": "Поле обов’язкове. Розмір назви правила має бути від «1» до «55» символів",
   "AddFilter.filterName": "Ім’я фільтру",

app/localization/translated/zh.json

@@ -78,6 +78,7 @@
   "AddEditNotificationCaseModal.title": "{actionType}通知规则",
   "AddEditNotificationModal.nameLabel": "规则名称",
   "AddEditNotificationModal.namePlaceholder": "请输入规则名称",
+  "AddEditNotificationModal.recipientsError": "Please enter existent user name on your project or valid email",
   "AddEditNotificationModal.recipientsPlaceholder": "用户名/电子邮件",
   "AddEditNotificationModal.ruleNameHint": "此项为必填项且规则的名字长度限定在1~55个字符。",
   "AddFilter.filterName": "过滤器名称",

app/src/componentLibrary/autocompletes/multipleAutocomplete/multipleAutocomplete.jsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'fast-deep-equal';
 import classNames from 'classnames/bind';
@@ -45,6 +45,7 @@ export const MultipleAutocomplete = ({
   createWithoutConfirmation,
   options,
   getItemValidationErrorType,
+  clearItemsError,
   creatable,
   editable,
   getAdditionalCreationCondition,
@@ -61,6 +62,10 @@ export const MultipleAutocomplete = ({
   const placeholderIfEmptyField = value.length === 0 && !disabled ? placeholder : '';
   const inputRef = useRef(null);
 
+  useEffect(() => {
+    clearItemsError();
+  }, [value]);
+
   const handleChange = (...args) => {
     updatePosition?.();
     onChange(...args);
@@ -266,6 +271,7 @@ MultipleAutocomplete.propTypes = {
   customClass: PropTypes.string,
   createWithoutConfirmation: PropTypes.bool,
   getItemValidationErrorType: PropTypes.func,
+  clearItemsError: PropTypes.func,
   getAdditionalCreationCondition: PropTypes.func,
   highlightUnStoredItem: PropTypes.bool,
   parseInputValueFn: PropTypes.func,
@@ -301,6 +307,7 @@ MultipleAutocomplete.defaultProps = {
   customClass: '',
   createWithoutConfirmation: false,
   getItemValidationErrorType: null,
+  clearItemsError: () => {},
   getAdditionalCreationCondition: () => true,
   highlightUnStoredItem: false,
   parseInputValueFn: null,

app/src/pages/inside/projectSettingsPageContainer/content/notifications/modals/addEditNotificationModal/recipientsContainer/recipientsContainer.jsx

@@ -14,38 +14,70 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { useSelector } from 'react-redux';
+import React, { useState } from 'react';
+import { connect, useSelector } from 'react-redux';
 import { defineMessages, useIntl } from 'react-intl';
 import { URLS } from 'common/urls';
 import { regex } from 'common/utils/validation/validatorHelpers';
 import { validate } from 'common/utils/validation';
 import { projectIdSelector } from 'controllers/pages';
 import { AsyncMultipleAutocomplete } from 'componentLibrary/autocompletes/asyncMultipleAutocomplete';
+import { projectInfoSelector } from 'controllers/project/selectors';
+import PropTypes from 'prop-types';
 
 const messages = defineMessages({
   recipientsPlaceholder: {
     id: 'AddEditNotificationModal.recipientsPlaceholder',
     defaultMessage: 'User name/Email',
   },
+  recipientsError: {
+    id: 'AddEditNotificationModal.recipientsError',
+    defaultMessage: 'Please enter existent user name on your project or valid email',
+  },
 });
 
-export const RecipientsContainer = ({ ...rest }) => {
+const RecipientsContainerComponent = ({ projectInfo, error, ...rest }) => {
   const { formatMessage } = useIntl();
   const activeProject = useSelector(projectIdSelector);
+  const [recipientsWithError, setRecipientsWithError] = useState([]);
 
   const getEmailValidationError = (v) => {
     if (regex(/[.@]/)(v)) {
       return !validate.email(v) && 'error';
     }
     return false;
   };
+
+  const getValidationError = (v) => {
+    const emailValidationErrorType = getEmailValidationError(v);
+    if (emailValidationErrorType) {
+      return emailValidationErrorType;
+    }
+
+    const hasError = !projectInfo.users.some((user) => user.login === v);
+    if (hasError) {
+      !recipientsWithError.includes(v) && setRecipientsWithError([...recipientsWithError, v]);
+      return 'error';
+    } else {
+      const currentRecipientsWithError = recipientsWithError.filter((login) => login !== v);
+      currentRecipientsWithError.length !== recipientsWithError.length &&
+        setRecipientsWithError(currentRecipientsWithError);
+      return false;
+    }
+  };
+
+  const clearItemsError = () => {
+    setRecipientsWithError([]);
+  };
+
   const parseEmailsString = (string) => {
     const re = /<([^\s<>@]+@[^\s<>@]+)>/g;
     const emails = Array.from(string.matchAll(re), (m) => m[1]);
     return [...new Set(emails)];
   };
 
+  const recipientsError = recipientsWithError.length ? formatMessage(messages.recipientsError) : '';
+
   return (
     <AsyncMultipleAutocomplete
       placeholder={formatMessage(messages.recipientsPlaceholder)}
@@ -54,10 +86,21 @@ export const RecipientsContainer = ({ ...rest }) => {
       creatable
       editable
       createWithoutConfirmation
-      getItemValidationErrorType={getEmailValidationError}
-      getAdditionalCreationCondition={regex(/[.@]/)}
+      getItemValidationErrorType={getValidationError}
+      clearItemsError={clearItemsError}
       parseInputValueFn={parseEmailsString}
+      error={error || recipientsError}
       {...rest}
     />
   );
 };
+RecipientsContainerComponent.propTypes = {
+  projectInfo: PropTypes.object.isRequired,
+  error: PropTypes.string,
+};
+RecipientsContainerComponent.defaultProps = {
+  error: '',
+};
+export const RecipientsContainer = connect((state) => ({
+  projectInfo: projectInfoSelector(state),
+}))(RecipientsContainerComponent);