feat: use custom validation instead of vuelidate

app/javascript/dashboard/mixins/automations/validationsMixin.js

@@ -1,44 +0,0 @@
-import { required, requiredIf } from '@vuelidate/validators';
-
-export default {
-  validations: {
-    automation: {
-      name: {
-        required,
-      },
-      description: {
-        required,
-      },
-      event_name: {
-        required,
-      },
-      conditions: {
-        required,
-        $each: {
-          values: {
-            required: requiredIf(prop => {
-              return !(
-                prop.filter_operator === 'is_present' ||
-                prop.filter_operator === 'is_not_present'
-              );
-            }),
-          },
-        },
-      },
-      actions: {
-        required,
-        $each: {
-          action_params: {
-            required: requiredIf(prop => {
-              return !(
-                prop.action_name === 'mute_conversation' ||
-                prop.action_name === 'snooze_conversation' ||
-                prop.action_name === 'resolve_conversation'
-              );
-            }),
-          },
-        },
-      },
-    },
-  },
-};

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

@@ -8,7 +8,7 @@
           :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
           type="text"
           :class="{ error: errors.name }"
-          :error="errors.name || ''"
+          :error="errors.name ? $t('AUTOMATION.ADD.FORM.NAME.ERROR') : ''"
           :placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
         />
         <woot-input
@@ -16,7 +16,9 @@
           :label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
           type="text"
           :class="{ error: errors.description }"
-          :error="errors.description || ''"
+          :error="
+            errors.description ? $t('AUTOMATION.ADD.FORM.DESC.ERROR') : ''
+          "
           :placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
         />
         <div class="mb-6">

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

@@ -7,30 +7,22 @@
           v-model="automation.name"
           :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
           type="text"
-          :class="{ error: v$.automation.name.$error }"
-          :error="
-            v$.automation.name.$error
-              ? $t('AUTOMATION.ADD.FORM.NAME.ERROR')
-              : ''
-          "
+          :class="{ error: errors.name }"
+          :error="errors.name ? $t('AUTOMATION.ADD.FORM.NAME.ERROR') : ''"
           :placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
-          @blur="v$.automation.name.$touch"
         />
         <woot-input
           v-model="automation.description"
           :label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
           type="text"
-          :class="{ error: v$.automation.description.$error }"
+          :class="{ error: errors.description }"
           :error="
-            v$.automation.description.$error
-              ? $t('AUTOMATION.ADD.FORM.DESC.ERROR')
-              : ''
+            errors.description ? $t('AUTOMATION.ADD.FORM.DESC.ERROR') : ''
           "
           :placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
-          @blur="v$.automation.description.$touch"
         />
         <div class="event_wrapper">
-          <label :class="{ error: v$.automation.event_name.$error }">
+          <label :class="{ error: errors.event_name }">
             {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
             <select v-model="automation.event_name" @change="onEventChange()">
               <option
@@ -41,7 +33,7 @@
                 {{ event.value }}
               </option>
             </select>
-            <span v-if="v$.automation.event_name.$error" class="message">
+            <span v-if="errors.event_name" class="message">
               {{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
             </span>
           </label>
@@ -70,7 +62,7 @@
                 getCustomAttributeType(automation.conditions[i].attribute_key)
               "
               :show-query-operator="i !== automation.conditions.length - 1"
-              :v="v$.automation.conditions.$each[i]"
+              :error-message="errors[`condition_${i}`] || ''"
               @resetFilter="resetFilter(i, automation.conditions[i])"
               @removeFilter="removeFilter(i)"
             />
@@ -103,7 +95,7 @@
               :action-types="automationActionTypes"
               :dropdown-values="getActionDropdownValues(action.action_name)"
               :show-action-input="showActionInput(action.action_name)"
-              :v="v$.automation.actions.$each[i]"
+              :error-message="errors[`action_${i}`] || ''"
               :initial-file-name="getFileName(action, automation.files)"
               @resetAction="resetAction(i)"
               @removeAction="removeAction(i)"
@@ -144,10 +136,8 @@
 <script>
 import { mapGetters } from 'vuex';
 import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
-import automationValidationsMixin from 'dashboard/mixins/automations/validationsMixin';
 import filterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
 import automationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
-import { useVuelidate } from '@vuelidate/core';
 
 import {
   AUTOMATION_RULE_EVENTS,
@@ -160,7 +150,7 @@ export default {
     filterInputBox,
     automationActionInput,
   },
-  mixins: [automationMethodsMixin, automationValidationsMixin],
+  mixins: [automationMethodsMixin],
   props: {
     onClose: {
       type: Function,
@@ -171,9 +161,6 @@ export default {
       default: () => {},
     },
   },
-  setup() {
-    return { v$: useVuelidate() };
-  },
   data() {
     return {
       automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
@@ -185,6 +172,7 @@ export default {
       showDeleteConfirmationModal: false,
       allCustomAttributes: [],
       mode: 'edit',
+      errors: {},
     };
   },
   computed: {

app/javascript/shared/mixins/specs/automationMixin.spec.js

@@ -1,5 +1,4 @@
 import methodsMixin from '../../../dashboard/mixins/automations/methodsMixin';
-import validationsMixin from '../../../dashboard/mixins/automations/validationsMixin';
 import {
   automation,
   customAttributes,
@@ -449,13 +448,3 @@ describe('automationMethodsMixin', () => {
     );
   });
 });
-
-describe('automationValidationsMixin', () => {
-  it('automationValidationsMixin is present', () => {
-    const data = () => {
-      return {};
-    };
-    const wrapper = createComponent([validationsMixin], data, {}, {});
-    expect(typeof wrapper.vm.$options.validations).toBe('object');
-  });
-});