feat: use transtion keys to mark errors

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: () => [],