Fix: Invalid email error in invite modal (#1368)

* Invalid email error showing on entering incorrect email before submission

* error state name corrected

* colon removed from error message

app/client/src/components/ads/TagInputComponent.tsx

@@ -2,6 +2,9 @@ import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import { Classes, TagInput } from "@blueprintjs/core";
 import { Intent } from "constants/DefaultTheme";
+import { WrappedFieldMetaProps } from "redux-form";
+import { INVITE_USERS_VALIDATION_EMAIL_LIST } from "constants/messages";
+import { isEmail } from "utils/formhelpers";
 const TagInputWrapper = styled.div<{ intent?: Intent }>`
   margin-right: 8px;
 
@@ -48,6 +51,7 @@ type TagInputProps = {
   /** Intent of the tags, which defines their color */
   intent?: Intent;
   hasError?: boolean;
+  customError: (values: any) => void;
 };
 
 /**
@@ -71,10 +75,25 @@ const TagInputComponent = (props: TagInputProps) => {
     }
   }, [_values, values]);
 
+  const validateEmail = (newValues: string[]) => {
+    if (newValues && newValues.length > 0) {
+      let error = "";
+      newValues.forEach((user: any) => {
+        if (!isEmail(user)) {
+          error = INVITE_USERS_VALIDATION_EMAIL_LIST;
+        }
+      });
+      props.customError(error);
+    } else {
+      props.customError("");
+    }
+  };
+
   const commitValues = (newValues: string[]) => {
     setValues(newValues);
     props.input.onChange &&
       props.input.onChange(newValues.filter(Boolean).join(","));
+    validateEmail(newValues);
   };
 
   const onTagsChange = (values: React.ReactNode[]) => {

app/client/src/components/editorComponents/form/fields/TagListField.tsx

@@ -26,6 +26,7 @@ type TagListFieldProps = {
   type: string;
   label: string;
   intent: Intent;
+  customError: (err: string) => void;
 };
 
 const TagListField = (props: TagListFieldProps) => {

app/client/src/constants/messages.ts

@@ -92,7 +92,7 @@ export const NAVIGATE_TO_VALIDATION_ERROR =
   "Please enter a valid URL or page name";
 
 export const INVITE_USERS_VALIDATION_EMAIL_LIST =
-  "Invalid Email address(es) found:";
+  "Invalid Email address(es) found";
 export const INVITE_USERS_VALIDATION_ROLE_EMPTY = "Please select a role";
 
 export const INVITE_USERS_EMAIL_LIST_PLACEHOLDER = "Comma separated emails";

app/client/src/pages/organization/OrgInviteUsersForm.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 import styled from "styled-components";
 import { useLocation } from "react-router-dom";
 import TagListField from "components/editorComponents/form/fields/TagListField";
@@ -204,12 +204,23 @@ const validate = (values: any) => {
     errors["role"] = INVITE_USERS_VALIDATION_ROLE_EMPTY;
   }
 
+  if (values.users && values.users.length > 0) {
+    const _users = values.users.split(",").filter(Boolean);
+
+    _users.forEach((user: string) => {
+      if (!isEmail(user)) {
+        errors["users"] = INVITE_USERS_VALIDATION_EMAIL_LIST;
+      }
+    });
+  }
   return errors;
 };
 
 const { mailEnabled } = getAppsmithConfigs();
 
 const OrgInviteUsersForm = (props: any) => {
+  const [emailError, setEmailError] = useState("");
+
   const {
     handleSubmit,
     allUsers,
@@ -296,6 +307,7 @@ const OrgInviteUsersForm = (props: any) => {
               label="Emails"
               intent="success"
               data-cy="t--invite-email-input"
+              customError={(err: string) => setEmailError(err)}
             />
             <SelectField
               name="role"
@@ -377,8 +389,8 @@ const OrgInviteUsersForm = (props: any) => {
               fill
             />
           )}
-          {submitFailed && error && (
-            <Callout text={error} variant={Variant.danger} fill />
+          {((submitFailed && error) || emailError) && (
+            <Callout text={error || emailError} variant={Variant.danger} fill />
           )}
         </ErrorBox>
         {!pathRegex.test(currentPath) && canManage && (