feat: use transtion keys to mark errors

app/javascript/dashboard/helper/validations.js

@@ -1,3 +1,11 @@
+export const ATTRIBUTE_KEY_REQUIRED = 'ATTRIBUTE_KEY_REQUIRED';
+export const FILTER_OPERATOR_REQUIRED = 'FILTER_OPERATOR_REQUIRED';
+export const VALUE_REQUIRED = 'VALUE_REQUIRED';
+export const VALUE_MUST_BE_BETWEEN_1_AND_998 =
+  'VALUE_MUST_BE_BETWEEN_1_AND_998';
+export const ACTION_PARAMETERS_REQUIRED = 'ACTION_PARAMETERS_REQUIRED';
+export const ATLEAST_ONE_CONDITION_REQUIRED = 'ATLEAST_ONE_CONDITION_REQUIRED';
+export const ATLEAST_ONE_ACTION_REQUIRED = 'ATLEAST_ONE_ACTION_REQUIRED';
 // ------------------------------------------------------------------
 // ------------------------ Filter Validation -----------------------
 // ------------------------------------------------------------------
@@ -14,11 +22,11 @@
  */
 const validateSingleFilter = filter => {
   if (!filter.attribute_key) {
-    return 'Attribute key is required';
+    return ATTRIBUTE_KEY_REQUIRED;
   }
 
   if (!filter.filter_operator) {
-    return 'Filter operator is required';
+    return FILTER_OPERATOR_REQUIRED;
   }
 
   if (
@@ -26,14 +34,14 @@ const validateSingleFilter = filter => {
     filter.filter_operator !== 'is_not_present' &&
     !filter.values
   ) {
-    return 'Value is required';
+    return VALUE_REQUIRED;
   }
 
   if (
     filter.filter_operator === 'days_before' &&
     (parseInt(filter.values, 10) <= 0 || parseInt(filter.values, 10) >= 999)
   ) {
-    return 'Value must be between 1 and 998';
+    return VALUE_MUST_BE_BETWEEN_1_AND_998;
   }
 
   return null;
@@ -97,7 +105,7 @@ export const validateConditions = conditions => {
   const errors = {};
 
   if (!conditions || conditions.length === 0) {
-    errors.conditions = 'At least one condition is required';
+    errors.conditions = ATLEAST_ONE_CONDITION_REQUIRED;
     return errors;
   }
 
@@ -129,7 +137,7 @@ const validateSingleAction = action => {
     !noParamActions.includes(action.action_name) &&
     (!action.action_params || action.action_params.length === 0)
   ) {
-    return 'Action parameters are required';
+    return ACTION_PARAMETERS_REQUIRED;
   }
 
   return null;
@@ -143,7 +151,7 @@ const validateSingleAction = action => {
  */
 export const validateActions = actions => {
   if (!actions || actions.length === 0) {
-    return { actions: 'At least one action is required' };
+    return { actions: ATLEAST_ONE_ACTION_REQUIRED };
   }
 
   return actions.reduce((errors, action, index) => {

app/javascript/dashboard/i18n/locale/en/macros.json

@@ -68,6 +68,15 @@
       "BUTTON_TOOLTIP": "Execute",
       "PREVIEW": "Preview Macro",
       "EXECUTED_SUCCESSFULLY": "Macro executed successfully"
+    },
+    "ERRORS": {
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_REQUIRED": "Value is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998",
+      "ACTION_PARAMETERS_REQUIRED": "Action parameters are required",
+      "ATLEAST_ONE_CONDITION_REQUIRED": "At least one condition is required",
+      "ATLEAST_ONE_ACTION_REQUIRED": "At least one action is required"
     }
   }
 }

app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue

@@ -6,6 +6,7 @@
       <macro-nodes
         v-model="macro.actions"
         :files="files"
+        :errors="errors"
         @addNewNode="appendNode"
         @deleteNode="deleteNode"
         @resetAction="resetNode"
@@ -24,7 +25,7 @@
 </template>
 
 <script>
-import { ref, provide } from 'vue';
+import { provide } from 'vue';
 import MacroNodes from './MacroNodes.vue';
 import MacroProperties from './MacroProperties.vue';
 import { required } from '@vuelidate/validators';
@@ -43,16 +44,15 @@ export default {
     },
   },
   setup() {
-    const errors = ref({});
     const v$ = useVuelidate();
-    provide('errors', errors);
     provide('v$', v$);
 
-    return { v$, errors };
+    return { v$ };
   },
   data() {
     return {
       macro: this.macroData,
+      errors: {},
     };
   },
   computed: {

app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue

@@ -11,7 +11,7 @@
     <div
       class="macro__node-action-item"
       :class="{
-        'has-error': errors[`action_${index}`],
+        'has-error': errorKey,
       }"
     >
       <action-input
@@ -21,7 +21,7 @@
         :show-action-input="showActionInput"
         :show-remove-button="false"
         :is-macro="true"
-        :error-message="errors[`action_${index}`] || ''"
+        :error-message="errorMessage"
         :initial-file-name="fileName"
         @resetAction="$emit('resetAction')"
       />
@@ -58,6 +58,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    errorKey: {
+      type: String,
+      default: '',
+    },
     index: {
       type: Number,
       default: 0,
@@ -69,8 +73,7 @@ export default {
   },
   setup() {
     const macroActionTypes = inject('macroActionTypes');
-    const errors = inject('errors');
-    return { macroActionTypes, errors };
+    return { macroActionTypes };
   },
   computed: {
     ...mapGetters({
@@ -86,6 +89,11 @@ export default {
         this.$emit('input', value);
       },
     },
+    errorMessage() {
+      if (!this.errorKey) return '';
+
+      return this.$t(`MACROS.ERRORS.${this.errorKey}`);
+    },
     showActionInput() {
       if (
         this.actionData.action_name === 'send_email_to_team' ||

app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue

@@ -22,6 +22,7 @@
           class="macros__node-action"
           type="add"
           :index="i"
+          :error-key="errors[`action_${i}`]"
           :file-name="
             fileName(
               actionData[i].action_params[0],
@@ -71,6 +72,10 @@ export default {
     MacroNode,
   },
   props: {
+    errors: {
+      type: Object,
+      default: () => ({}),
+    },
     value: {
       type: Array,
       default: () => [],