Fix: tag input in automations not being selected

- Add translated error messages for invalid automation rules.
- add support for warning sooner

Fixes #251 #230

Author: abhinavxd

frontend/src/App.vue

@@ -254,6 +254,8 @@ const initToaster = () => {
   emitter.on(EMITTER_EVENTS.SHOW_TOAST, (message) => {
     if (message.variant === 'destructive') {
       sooner.error(message.description)
+    } else if (message.variant === 'warning') {
+      sooner.warning(message.description)
     } else {
       sooner.success(message.description)
     }

frontend/src/features/admin/automation/RuleBox.vue

@@ -115,6 +115,9 @@
                 <TagsInput
                   :defaultValue="fieldValueAsArray(rule.value)"
                   @update:modelValue="(value) => handleValueChange(value, index)"
+                  :addOnBlur="true"
+                  :addOnTab="true"
+                  :addOnPaste="true"
                 >
                   <TagsInputItem
                     v-for="item in fieldValueAsArray(rule.value)"

frontend/src/views/admin/automations/CreateOrEditRule.vue

@@ -366,10 +366,11 @@ const onSubmit = form.handleSubmit(async (values) => {
 })
 
 const handleSave = async (values) => {
-  if (!areRulesValid()) {
+  const validationError = getRulesValidationError()
+  if (validationError) {
     emitter.emit(EMITTER_EVENTS.SHOW_TOAST, {
-      variant: 'destructive',
-      description: t('admin.automation.invalid')
+      variant: 'warning',
+      description: validationError
     })
     return
   }
@@ -401,58 +402,65 @@ const handleSave = async (values) => {
   }
 }
 
-// TODO: Maybe we can do some vee validate magic here.
-const areRulesValid = () => {
+// Returns a specific validation error message, or empty string if valid.
+const getRulesValidationError = () => {
   // Must have groups.
   if (rule.value.rules[0].groups.length == 0) {
-    return false
+    return t('admin.automation.validation.addCondition')
   }
 
-  // At least one group should have at least one rule
+  // At least one group should have at least one rule.
   const group1HasRules = rule.value.rules[0].groups[0].rules.length > 0
   const group2HasRules = rule.value.rules[0].groups[1].rules.length > 0
   if (!group1HasRules && !group2HasRules) {
-    return false
+    return t('admin.automation.validation.addCondition')
   }
 
-  // For both groups, each rule should have value, operator and field.
+  // For both groups, each rule should have field, operator, and value.
   for (const group of rule.value.rules[0].groups) {
     for (const rule of group.rules) {
-      if (!rule.field || !rule.operator) {
-        return false
+      if (!rule.field) {
+        return t('admin.automation.validation.selectField')
+      }
+      if (!rule.operator) {
+        return t('admin.automation.validation.selectOperator')
       }
-      // For 'set' and `not set` operator, value is not required.
+      // For 'set' and 'not set' operator, value is not required.
       if (rule.operator !== OPERATOR.SET && rule.operator !== OPERATOR.NOT_SET && !rule.value) {
-        return false
+        return t('admin.automation.validation.setConditionValue')
       }
     }
   }
 
-  // Must have atleast one action.
+  // Must have at least one action.
   if (rule.value.rules[0].actions.length == 0) {
-    return false
+    return t('admin.automation.validation.addAction')
   }
 
-  // Make sure each action has value.
+  // Make sure each action has a type and value.
   for (const action of rule.value.rules[0].actions) {
+    if (!action.type) {
+      return t('admin.automation.validation.selectActionType')
+    }
+
     // CSAT action does not require value, set dummy value.
     if (action.type === 'send_csat') {
       action.value = ['0']
     }
 
     // Empty array, no value selected.
     if (action.value.length === 0) {
-      return false
+      return t('admin.automation.validation.setActionValue')
     }
 
     // Check if all values are present.
     for (const key in action.value) {
       if (!action.value[key]) {
-        return false
+        return t('admin.automation.validation.setActionValue')
       }
     }
   }
-  return true
+  return ''
 }
 
 onMounted(async () => {

i18n/en.json

@@ -608,6 +608,13 @@
   "admin.automation.event.message.outgoing": "Outgoing message",
   "admin.automation.event.message.incoming": "Incoming message",
   "admin.automation.invalid": "Make sure you have atleast one action and one rule and their values are not empty.",
+  "admin.automation.validation.addCondition": "Please add at least one condition.",
+  "admin.automation.validation.selectField": "Please select a field for all conditions.",
+  "admin.automation.validation.selectOperator": "Please select an operator for all conditions.",
+  "admin.automation.validation.setConditionValue": "Please set a value for all conditions.",
+  "admin.automation.validation.addAction": "Please add at least one action.",
+  "admin.automation.validation.selectActionType": "Please select a type for all actions.",
+  "admin.automation.validation.setActionValue": "Please set a value for all actions.",
   "admin.notification.restartApp": "Settings updated successfully, Please restart the app for changes to take effect.",
   "admin.banner.restartMessage": "Some settings have been changed that require an application restart to take effect.",
   "admin.template.outgoingEmailTemplates": "Outgoing email templates",