feat: use custom validations for macro actions

app/javascript/dashboard/helper/validations.js

@@ -93,7 +93,7 @@ const validateBasicFields = automation => {
  * @param {Array} conditions - The conditions to validate.
  * @returns {Object} An object containing any validation errors.
  */
-const validateConditions = conditions => {
+export const validateConditions = conditions => {
   const errors = {};
 
   if (!conditions || conditions.length === 0) {
@@ -140,7 +140,7 @@ const validateSingleAction = action => {
  * @param {Array} actions - The actions to validate.
  * @returns {Object} An object containing any validation errors.
  */
-const validateActions = actions => {
+export const validateActions = actions => {
   if (!actions || actions.length === 0) {
     return { actions: 'At least one action is required' };
   }

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

@@ -24,21 +24,18 @@
 </template>
 
 <script>
+import { ref, provide } from 'vue';
 import MacroNodes from './MacroNodes.vue';
 import MacroProperties from './MacroProperties.vue';
-import { required, requiredIf } from '@vuelidate/validators';
+import { required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
+import { validateActions } from 'dashboard/helper/validations';
 
 export default {
   components: {
     MacroNodes,
     MacroProperties,
   },
-  provide() {
-    return {
-      v$: this.v$,
-    };
-  },
   props: {
     macroData: {
       type: Object,
@@ -46,7 +43,12 @@ export default {
     },
   },
   setup() {
-    return { v$: useVuelidate() };
+    const errors = ref({});
+    const v$ = useVuelidate();
+    provide('errors', errors);
+    provide('v$', v$);
+
+    return { v$, errors };
   },
   data() {
     return {
@@ -81,22 +83,6 @@ export default {
       visibility: {
         required,
       },
-      actions: {
-        required,
-        $each: {
-          action_params: {
-            required: requiredIf(prop => {
-              if (prop.action_name === 'send_email_to_team') return true;
-              return !(
-                prop.action_name === 'mute_conversation' ||
-                prop.action_name === 'snooze_conversation' ||
-                prop.action_name === 'resolve_conversation' ||
-                prop.action_name === 'remove_assigned_team'
-              );
-            }),
-          },
-        },
-      },
     },
   },
   methods: {
@@ -113,19 +99,29 @@ export default {
       });
     },
     deleteNode(index) {
+      // delete that index specifically
+      // so that the next item does not get marked invalid
+      delete this.errors[`action_${index}`];
       this.macro.actions.splice(index, 1);
     },
     submit() {
+      this.errors = validateActions(this.macro.actions);
+      if (Object.keys(this.errors).length !== 0) return;
+
       this.v$.$touch();
       if (this.v$.$invalid) return;
+
       this.$emit('submit', this.macro);
     },
     resetNode(index) {
-      this.v$.macro.actions.$each[index].$reset();
+      // delete that index specifically
+      // so that the next item does not get marked invalid
+      delete this.errors[`action_${index}`];
       this.macro.actions[index].action_params = [];
     },
     resetValidation() {
-      this.v$.$reset();
+      this.errors = {};
+      this.v$?.$reset();
     },
   },
 };

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

@@ -11,7 +11,7 @@
     <div
       class="macro__node-action-item"
       :class="{
-        'has-error': hasError(v$.macro.actions.$each[index]),
+        'has-error': errors[`action_${index}`],
       }"
     >
       <action-input
@@ -21,7 +21,7 @@
         :show-action-input="showActionInput"
         :show-remove-button="false"
         :is-macro="true"
-        :v="v$.macro.actions.$each[index]"
+        :error-message="errors[`action_${index}`] || ''"
         :initial-file-name="fileName"
         @resetAction="$emit('resetAction')"
       />
@@ -39,6 +39,7 @@
 </template>
 
 <script>
+import { inject } from 'vue';
 import ActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
 import macrosMixin from 'dashboard/mixins/macrosMixin';
 import { mapGetters } from 'vuex';
@@ -48,7 +49,6 @@ export default {
     ActionInput,
   },
   mixins: [macrosMixin],
-  inject: ['macroActionTypes', 'v$'],
   props: {
     singleNode: {
       type: Boolean,
@@ -67,6 +67,11 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const macroActionTypes = inject('macroActionTypes');
+    const errors = inject('errors');
+    return { macroActionTypes, errors };
+  },
   computed: {
     ...mapGetters({
       labels: 'labels/getLabels',
@@ -97,9 +102,6 @@ export default {
     dropdownValues() {
       return this.getDropdownValues(this.value.action_name, this.$store);
     },
-    hasError(v) {
-      return !!(v.action_params.$dirty && v.action_params.$error);
-    },
   },
 };
 </script>

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

@@ -64,6 +64,7 @@
 import Draggable from 'vuedraggable';
 import MacroNode from './MacroNode.vue';
 import { getFileName } from './macroHelper';
+
 export default {
   components: {
     Draggable,