chore: Improve macros stability (#5700)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/widgets/AutomationActionInput.vue

@@ -150,7 +150,7 @@ export default {
     },
     actionInputStyles() {
       return {
-        error: this.v.action_params.$dirty && this.v.action_params.$error,
+        'has-error': this.v.action_params.$dirty && this.v.action_params.$error,
         'is-a-macro': this.isMacro,
       };
     },
@@ -187,7 +187,7 @@ export default {
   margin-bottom: 0;
 }
 
-.filter.error {
+.filter.has-error {
   background: var(--r-50);
 }
 

app/javascript/dashboard/components/widgets/AutomationFileInput.vue

@@ -113,5 +113,6 @@ input[type='file'] {
   overflow: hidden;
   text-overflow: ellipsis;
   width: 100%;
+  margin-bottom: 0;
 }
 </style>

app/javascript/dashboard/mixins/specs/uiSettings.spec.js

@@ -116,10 +116,10 @@ describe('uiSettingsMixin', () => {
       const wrapper = shallowMount(Component, { store, localVue });
       expect(wrapper.vm.conversationSidebarItemsOrder).toEqual([
         { name: 'conversation_actions' },
+        { name: 'macros' },
         { name: 'conversation_info' },
         { name: 'contact_attributes' },
         { name: 'previous_conversation' },
-        { name: 'macros' },
       ]);
     });
   });

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

@@ -16,7 +16,6 @@
 import MacroForm from './MacroForm';
 import { MACRO_ACTION_TYPES } from './constants';
 import { mapGetters } from 'vuex';
-import { emptyMacro } from './macroHelper';
 import actionQueryGenerator from 'dashboard/helper/actionQueryGenerator.js';
 import alertMixin from 'shared/mixins/alertMixin';
 import macrosMixin from 'dashboard/mixins/macrosMixin';
@@ -107,7 +106,16 @@ export default {
     },
     initNewMacro() {
       this.mode = 'CREATE';
-      this.macro = emptyMacro;
+      this.macro = {
+        name: '',
+        actions: [
+          {
+            action_name: 'assign_team',
+            action_params: [],
+          },
+        ],
+        visibility: 'global',
+      };
     },
     async saveMacro(macro) {
       try {

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

@@ -47,6 +47,12 @@ export default {
     };
   },
   watch: {
+    $route: {
+      handler() {
+        this.resetValidation();
+      },
+      immediate: true,
+    },
     macroData: {
       handler() {
         this.macro = this.macroData;
@@ -79,9 +85,6 @@ export default {
       },
     },
   },
-  mounted() {
-    this.$v.$reset();
-  },
   methods: {
     updateName(value) {
       this.macro.name = value;
@@ -104,8 +107,12 @@ export default {
       this.$emit('submit', this.macro);
     },
     resetNode(index) {
+      this.$v.macro.actions.$each[index].$reset();
       this.macro.actions[index].action_params = [];
     },
+    resetValidation() {
+      this.$v.$reset();
+    },
   },
 };
 </script>

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

@@ -8,8 +8,6 @@
       tag="div"
       class="macros__nodes-draggable"
       handle=".macros__node-drag-handle"
-      @start="dragging = true"
-      @end="dragging = false"
     >
       <div v-for="(action, i) in actionData" :key="i" class="macro__node">
         <macro-node
@@ -53,11 +51,6 @@ export default {
       default: () => [],
     },
   },
-  data() {
-    return {
-      dragging: false,
-    };
-  },
   computed: {
     actionData: {
       get() {

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

@@ -10,7 +10,7 @@
         @input="onUpdateName($event)"
       />
     </div>
-    <div>
+    <div class="macros__form-visibility-container">
       <p class="title">{{ $t('MACROS.EDITOR.VISIBILITY.LABEL') }}</p>
       <div class="macros__form-visibility">
         <button
@@ -110,7 +110,9 @@ export default {
 .macros__submit-button {
   margin-top: auto;
 }
-
+.macros__form-visibility-container {
+  margin-top: var(--space-small);
+}
 .macros__form-visibility {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -129,20 +131,6 @@ export default {
       border: 1px solid var(--w-300);
     }
 
-    .subtitle {
-      font-size: var(--font-size-mini);
-      color: var(--s-500);
-    }
-
-    .title {
-      display: block;
-      margin: 0;
-      font-size: var(--font-size-small);
-      font-weight: var(--font-weight-medium);
-      line-height: 1.8;
-      color: var(--color-body);
-    }
-
     .visibility-check {
       position: absolute;
       color: var(--w-500);
@@ -152,6 +140,20 @@ export default {
   }
 }
 
+.subtitle {
+  font-size: var(--font-size-mini);
+  color: var(--s-500);
+}
+
+.title {
+  display: block;
+  margin: 0;
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.8;
+  color: var(--color-body);
+}
+
 .macros__info-panel {
   margin-top: var(--space-small);
   display: flex;
@@ -164,11 +166,18 @@ export default {
   }
   p {
     margin-left: var(--space-small);
+    margin-bottom: 0;
     color: var(--s-600);
   }
 }
 
 ::v-deep input[type='text'] {
-  margin-bottom: var(--space-small);
+  margin-bottom: 0;
+}
+
+::v-deep .error {
+  .message {
+    margin-bottom: 0;
+  }
 }
 </style>

app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js

@@ -58,6 +58,7 @@ describe('#actions', () => {
         id: 1,
         messages: [],
         meta: { sender: { id: 1, name: 'john-doe' } },
+        labels: ['support'],
       };
       actions.updateConversation(
         { commit, rootState: { route: { name: 'home' } }, dispatch },
@@ -67,6 +68,10 @@ describe('#actions', () => {
         [types.UPDATE_CONVERSATION, conversation],
       ]);
       expect(dispatch.mock.calls).toEqual([
+        [
+          'conversationLabels/setConversationLabel',
+          { id: 1, data: ['support'] },
+        ],
         [
           'contacts/setContact',
           {