Merge branch 'chore/vuelidate-v2-migration' into feat/setup-eslint-rules

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/automation.json

@@ -110,6 +110,15 @@
       "LABEL_UPLOADING": "Uploading...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
+    },
+    "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/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/automation/AddAutomationRule.vue

@@ -167,7 +167,11 @@ export default {
               :custom-attribute-type="
                 getCustomAttributeType(automation.conditions[i].attribute_key)
               "
-              :error-message="errors[`condition_${i}`] || ''"
+              :error-message="
+                errors[`condition_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
+                  : ''
+              "
               @resetFilter="resetFilter(i, automation.conditions[i])"
               @removeFilter="removeFilter(i)"
             />
@@ -204,7 +208,11 @@ export default {
               :show-action-input="
                 showActionInput(automation.actions[i].action_name)
               "
-              :error-message="errors[`action_${i}`] || ''"
+              :error-message="
+                errors[`action_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
+                  : ''
+              "
               @resetAction="resetAction(i)"
               @removeAction="removeAction(i)"
             />

app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue

@@ -137,7 +137,11 @@ export default {
                 getCustomAttributeType(automation.conditions[i].attribute_key)
               "
               :show-query-operator="i !== automation.conditions.length - 1"
-              :error-message="errors[`condition_${i}`] || ''"
+              :error-message="
+                errors[`condition_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
+                  : ''
+              "
               @resetFilter="resetFilter(i, automation.conditions[i])"
               @removeFilter="removeFilter(i)"
             />
@@ -170,7 +174,11 @@ export default {
               :action-types="automationActionTypes"
               :dropdown-values="getActionDropdownValues(action.action_name)"
               :show-action-input="showActionInput(action.action_name)"
-              :error-message="errors[`action_${i}`] || ''"
+              :error-message="
+                errors[`action_${i}`]
+                  ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
+                  : ''
+              "
               :initial-file-name="getFileName(action, automation.files)"
               @resetAction="resetAction(i)"
               @removeAction="removeAction(i)"

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

@@ -1,5 +1,5 @@
 <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';
@@ -18,16 +18,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: {
@@ -103,13 +102,14 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-col md:flex-row h-auto md:h-full w-full">
+  <div class="flex flex-col w-full h-auto md:flex-row md:h-full">
     <div
-      class="flex-1 w-full md:w-auto macro-gradient-radial dark:macro-dark-gradient-radial macro-gradient-radial-size h-full max-h-full py-4 px-12 overflow-y-auto"
+      class="flex-1 w-full h-full max-h-full px-12 py-4 overflow-y-auto md:w-auto macro-gradient-radial dark:macro-dark-gradient-radial macro-gradient-radial-size"
     >
       <MacroNodes
         v-model="macro.actions"
         :files="files"
+        :errors="errors"
         @addNewNode="appendNode"
         @deleteNode="deleteNode"
         @resetAction="resetNode"

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

@@ -18,6 +18,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    errorKey: {
+      type: String,
+      default: '',
+    },
     index: {
       type: Number,
       default: 0,
@@ -29,8 +33,7 @@ export default {
   },
   setup() {
     const macroActionTypes = inject('macroActionTypes');
-    const errors = inject('errors');
-    return { macroActionTypes, errors };
+    return { macroActionTypes };
   },
   computed: {
     ...mapGetters({
@@ -46,6 +49,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' ||
@@ -79,7 +87,7 @@ export default {
     <div
       class="macro__node-action-item"
       :class="{
-        'has-error': errors[`action_${index}`],
+        'has-error': errorKey,
       }"
     >
       <ActionInput
@@ -89,7 +97,7 @@ export default {
         :show-action-input="showActionInput"
         :show-remove-button="false"
         is-macro
-        :error-message="errors[`action_${index}`] || ''"
+        :error-message="errorMessage"
         :initial-file-name="fileName"
         @resetAction="$emit('resetAction')"
       />

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

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