From 9817dfca89214efcf849301e12da5fbb916f89c2 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Sat, 3 Sep 2022 09:13:20 +0530
Subject: [PATCH] UI - Add help text for valid and invalid condition (#7180)

---
 .../pages/PoliciesPage/RuleForm/RuleForm.tsx  | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/RuleForm/RuleForm.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/RuleForm/RuleForm.tsx
index e014fc6bcd3..6e3287ffcc0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/RuleForm/RuleForm.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/RuleForm/RuleForm.tsx
@@ -52,6 +52,7 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
 
   const [validationError, setValidationError] = useState<string>('');
   const [isValidatingCondition, setIsvalidating] = useState<boolean>(false);
+  const [isValidCondition, setIsvalidCondition] = useState<boolean>(false);
 
   /**
    * Derive the resources from policy resources
@@ -146,21 +147,25 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
     }
   };
 
-  const handleConditionValidation = async () => {
+  const handleConditionValidation = async (condition: string) => {
     const defaultErrorText = 'Condition is invalid';
-    if (ruleData.condition) {
+    if (condition) {
       setIsvalidating(true);
       try {
-        const response = await validateRuleCondition(ruleData.condition);
+        const response = await validateRuleCondition(condition);
 
         /**
          * If request is successful then we will only get response as success without any data
          * So, here we have to check the response status code
          */
-
-        [200, 204].includes(response.status)
-          ? setValidationError('')
-          : setValidationError(defaultErrorText);
+        const check = [200, 204].includes(response.status);
+        if (check) {
+          setValidationError('');
+          setIsvalidCondition(true);
+          setTimeout(() => setIsvalidCondition(false), 2000);
+        } else {
+          setValidationError(defaultErrorText);
+        }
       } catch (error) {
         setValidationError(getErrorText(error as AxiosError, defaultErrorText));
       } finally {
@@ -283,23 +288,28 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
             options={conditionOptions}
             placeholder="Condition"
             value={ruleData.condition}
-            onBlur={handleConditionValidation}
             onChange={(value) => {
               setRuleData((prev: Rule) => ({ ...prev, condition: value }));
               !value && setValidationError('');
+              handleConditionValidation(value);
             }}
             onSearch={handleConditionSearch}
           />
           {validationError && (
-            <div className="ant-form-item-explain-error" role="alert">
-              {validationError}
+            <div className="tw-mt-1" role="alert">
+              {`❌ Invalid condition : ${validationError}`}
             </div>
           )}
           {isValidatingCondition && (
-            <div className="tw-text-grey-body" role="alert">
+            <div className="tw-mt-1" role="alert">
               Validating the condition...
             </div>
           )}
+          {isValidCondition && !isValidatingCondition && !validationError && (
+            <div className="tw-mt-1" role="alert">
+              ✅ Valid condition
+            </div>
+          )}
         </>
       </Form.Item>
     </>