chore: Migrate all instances of old vuelidate to new v2 syntax [CW-3274] (#9623)

Removes all the old vuelidate syntax and replaced it with the new `useValidate` composable and the `v$` helper. | Component | Path | Migrated | Tested | |------------------------------------|--------------------------------------------------------------|-----------------------------------------------|--------| | Login page | app/javascript/v3/views/login/Index.vue | ✅ | ✅ | | Custom Attributes settings page | app/javascript/dashboard/components/CustomAttribute.vue | ✅ | ✅ | | Account settings page | app/javascript/dashboard/routes/dashboard/settings/account/Index.vue | ✅ | ✅ | | Add Account Modal | app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue | ✅ | ✅ | | AICTA Modal | app/javascript/dashboard/components/widgets/AICTAModal.vue | ✅ | ✅ | | Conversation Advanced Filters | app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue | deprecated `$each` prop in validations object | | | Email Transript Modal | app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue | ✅ | ✅ | | Linear Create Issue | app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue | ✅ | ✅ | | Template Parser | app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue | ✅ | | | Delete Confirmation Modal | app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue | ✅ | ✅ | | Add Custom Attribute | app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue | ✅ | ✅ | | Merge Contacts | app/javascript/dashboard/modules/contact/components/MergeContact.vue | ✅ | ✅ | | Contacts Advanced Filters | app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue | deprecated `$each` prop in validations object | | | Contact Form | app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue | ✅ | ✅ | | Conversation Form | app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue | ✅ | ✅ | | Add Custom Views | app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue | ✅ | ✅ | | Add Locale | app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue | ✅ | ✅ | | Portal Settings Basic Form | /app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue | ✅ | ✅ | | Portal Settings Customization Form | /app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue | ✅ | ✅ | | Add Category | app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue | ✅ | ✅ | | Edit Category | app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue | ✅ | ✅ | | CSML Bot Editor | app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue | ✅ | ✅ | | Add Agent | app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue | ✅ | ✅ | | Edit Agent | app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue | ✅ | ✅ | | Add Attribute | app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue | ✅ | ✅ | | Edit Attribute | app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue | ✅ | ✅ | | Add Campaign | app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue | ✅ | ✅ | | Edit Campaign | app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue | ✅ | ✅ | | Add Canned | app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue | ✅ | ✅ | | Edit Canned | app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue | ✅ | ✅ | | IMAP Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue | ✅ | ✅ | | SMTP Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue | ✅ | ✅ | | Widget Builder | app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue | ✅ | ✅ | | 360 Dialog Whatsapp | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue | ✅ | ✅ | | Inbox API settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue | ✅ | ✅ | | SMS Bandwidth settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue | ✅ | ✅ | | Cloud Whatsapp Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue | ✅ | ✅ | | Facebook Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue | ✅ | ✅ | | Line Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue | ✅ | ✅ | | Telegram Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue | ✅ | ✅ | | Twillio Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue | ✅ | ✅ | | Forward To option settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue | ✅ | ✅ | | Microsoft settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue | ✅ | ✅ | | Collaborators page | app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue | ✅ | ✅ | | Configuration Page | app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue | ✅ | ✅ | | Dashboard App Modal Settings | app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue | ✅ | ✅ | | Settings - Webhook Form | app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue | ✅ | ✅ | | Macro Form | app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue | deprecated `$each` prop in validations object | | | Change Password | app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue | ✅ | ✅ | | settings - User Basic Details | app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue | ✅ | ✅ | | Password Edit | app/javascript/v3/views/auth/password/Edit.vue | ✅ | ✅ | | Password Reset form | app/javascript/v3/views/auth/reset/password/Index.vue | ✅ | ✅ | | Signup form | app/javascript/v3/views/auth/signup/components/Signup/Form.vue | ✅ | ✅ | | Login form | app/javascript/v3/views/login/Index.vue | ✅ | ✅ | | Custom Attributes | app/javascript/dashboard/components/CustomAttribute.vue | ✅ | ✅ | | Reply Email Head | app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue | ✅ | ✅ | | Methods Mixin | app/javascript/dashboard/mixins/automations/methodsMixin.js | ✅ | ✅ | | Validations mixin | app/javascript/dashboard/routes/dashboard/settings/labels/validationMixin.js | ✅ | ✅ | | SLA Form | app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue | ✅ | ✅ | | SLA Time Input | app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue | ✅ | ✅ | | SLA Validation Mixin | app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js | ✅ | ✅ | | Team Form | app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue | ✅ | ✅ | | Add Agents | app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue | ✅ | ✅ | | Edit Agents | app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue | ✅ | ✅ | --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Shivam Mishra <scm.mymail@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Pranav <pranav@chatwoot.com>
2024-07-30 15:08:22 +05:30
parent dc9da4bb24
commit ce8e1ec93d
86 changed files with 1275 additions and 847 deletions
--- a/app/javascript/dashboard/helper/specs/validations.spec.js
+++ b/app/javascript/dashboard/helper/specs/validations.spec.js
@@ -0,0 +1,127 @@
+import { describe, it, expect } from 'vitest';
+import {
+  validateConversationOrContactFilters,
+  validateAutomation,
+} from '../validations';
+
+describe('validateConversationOrContactFilters', () => {
+  it('should return no errors for valid filters', () => {
+    const validFilters = [
+      { attribute_key: 'name', filter_operator: 'contains', values: 'John' },
+      { attribute_key: 'email', filter_operator: 'is_present' },
+    ];
+    const errors = validateConversationOrContactFilters(validFilters);
+    expect(errors).toEqual({});
+  });
+
+  it('should return errors for invalid filters', () => {
+    const invalidFilters = [
+      { attribute_key: '', filter_operator: 'contains', values: 'John' },
+      { attribute_key: 'email', filter_operator: '' },
+      { attribute_key: 'age', filter_operator: 'equals' },
+    ];
+    const errors = validateConversationOrContactFilters(invalidFilters);
+    expect(errors).toEqual({
+      filter_0: 'ATTRIBUTE_KEY_REQUIRED',
+      filter_1: 'FILTER_OPERATOR_REQUIRED',
+      filter_2: 'VALUE_REQUIRED',
+    });
+  });
+
+  it('should validate days_before operator correctly', () => {
+    const filters = [
+      { attribute_key: 'date', filter_operator: 'days_before', values: '0' },
+      { attribute_key: 'date', filter_operator: 'days_before', values: '999' },
+      { attribute_key: 'date', filter_operator: 'days_before', values: '500' },
+    ];
+    const errors = validateConversationOrContactFilters(filters);
+    expect(errors).toEqual({
+      filter_0: 'VALUE_MUST_BE_BETWEEN_1_AND_998',
+      filter_1: 'VALUE_MUST_BE_BETWEEN_1_AND_998',
+    });
+  });
+});
+
+describe('validateAutomation', () => {
+  it('should return no errors for a valid automation', () => {
+    const validAutomation = {
+      name: 'Test Automation',
+      description: 'A test automation',
+      event_name: 'message_created',
+      conditions: [
+        {
+          attribute_key: 'content',
+          filter_operator: 'contains',
+          values: 'hello',
+        },
+      ],
+      actions: [
+        { action_name: 'send_message', action_params: ['Hello there!'] },
+      ],
+    };
+    const errors = validateAutomation(validAutomation);
+    expect(errors).toEqual({});
+  });
+
+  it('should return errors for missing basic fields', () => {
+    const invalidAutomation = {
+      name: '',
+      description: '',
+      event_name: '',
+      conditions: [],
+      actions: [],
+    };
+    const errors = validateAutomation(invalidAutomation);
+    expect(errors).toHaveProperty('name');
+    expect(errors).toHaveProperty('description');
+    expect(errors).toHaveProperty('event_name');
+  });
+
+  it('should return errors for invalid conditions', () => {
+    const automationWithInvalidConditions = {
+      name: 'Test',
+      description: 'Test',
+      event_name: 'message_created',
+      conditions: [{ attribute_key: '', filter_operator: '', values: '' }],
+      actions: [{ action_name: 'send_message', action_params: ['Hello'] }],
+    };
+    const errors = validateAutomation(automationWithInvalidConditions);
+    expect(errors).toHaveProperty('condition_0');
+  });
+
+  it('should return errors for invalid actions', () => {
+    const automationWithInvalidActions = {
+      name: 'Test',
+      description: 'Test',
+      event_name: 'message_created',
+      conditions: [
+        {
+          attribute_key: 'content',
+          filter_operator: 'contains',
+          values: 'hello',
+        },
+      ],
+      actions: [{ action_name: 'send_message', action_params: [] }],
+    };
+    const errors = validateAutomation(automationWithInvalidActions);
+    expect(errors).toHaveProperty('action_0');
+  });
+
+  it('should not require action params for specific actions', () => {
+    const automationWithNoParamAction = {
+      name: 'Test',
+      description: 'Test',
+      event_name: 'message_created',
+      conditions: [
+        {
+          attribute_key: 'content',
+          filter_operator: 'contains',
+          values: 'hello',
+        },
+      ],
+      actions: [{ action_name: 'mute_conversation' }],
+    };
+    const errors = validateAutomation(automationWithNoParamAction);
+    expect(errors).toEqual({});
+  });
+});
--- a/app/javascript/dashboard/helper/validations.js
+++ b/app/javascript/dashboard/helper/validations.js
@@ -0,0 +1,193 @@
+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 -----------------------
+// ------------------------------------------------------------------
+
+/**
+ * Validates a single filter for conversations or contacts.
+ *
+ * @param {Object} filter - The filter object to validate.
+ * @param {string} filter.attribute_key - The key of the attribute to filter on.
+ * @param {string} filter.filter_operator - The operator to use for filtering.
+ * @param {string|number|Array} [filter.values] - The value(s) to filter by (required for most operators).
+ *
+ * @returns {string|null} An error message if validation fails, or null if validation passes.
+ */
+const validateSingleFilter = filter => {
+  if (!filter.attribute_key) {
+    return ATTRIBUTE_KEY_REQUIRED;
+  }
+
+  if (!filter.filter_operator) {
+    return FILTER_OPERATOR_REQUIRED;
+  }
+
+  if (
+    filter.filter_operator !== 'is_present' &&
+    filter.filter_operator !== 'is_not_present' &&
+    (!filter.values ||
+      (Array.isArray(filter.values) && filter.values.length === 0))
+  ) {
+    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 null;
+};
+
+/**
+ * Validates filters for conversations or contacts.
+ *
+ * @param {Array} filters - An array of filter objects to validate.
+ * @param {string} filters[].attribute_key - The key of the attribute to filter on.
+ * @param {string} filters[].filter_operator - The operator to use for filtering.
+ * @param {string|number} [filters[].values] - The value(s) to filter by (required for most operators).
+ *
+ * @returns {Object} An object containing any validation errors, keyed by filter index.
+ */
+export const validateConversationOrContactFilters = filters => {
+  const errors = {};
+
+  filters.forEach((filter, index) => {
+    const error = validateSingleFilter(filter);
+    if (error) {
+      errors[`filter_${index}`] = error;
+    }
+  });
+
+  return errors;
+};
+
+// ------------------------------------------------------------------
+// ---------------------- Automation Validation ---------------------
+// ------------------------------------------------------------------
+
+/**
+ * Validates the basic fields of an automation object.
+ *
+ * @param {Object} automation - The automation object to validate.
+ * @returns {Object} An object containing any validation errors.
+ */
+const validateBasicFields = automation => {
+  const errors = {};
+  const requiredFields = ['name', 'description', 'event_name'];
+
+  requiredFields.forEach(field => {
+    if (!automation[field]) {
+      errors[field] = `${
+        field.charAt(0).toUpperCase() + field.slice(1)
+      } is required`;
+    }
+  });
+
+  return errors;
+};
+
+/**
+ * Validates the conditions of an automation object.
+ *
+ * @param {Array} conditions - The conditions to validate.
+ * @returns {Object} An object containing any validation errors.
+ */
+export const validateConditions = conditions => {
+  const errors = {};
+
+  if (!conditions || conditions.length === 0) {
+    errors.conditions = ATLEAST_ONE_CONDITION_REQUIRED;
+    return errors;
+  }
+
+  conditions.forEach((condition, index) => {
+    const error = validateSingleFilter(condition);
+    if (error) {
+      errors[`condition_${index}`] = error;
+    }
+  });
+
+  return errors;
+};
+
+/**
+ * Validates a single action of an automation object.
+ *
+ * @param {Object} action - The action to validate.
+ * @returns {string|null} An error message if validation fails, or null if validation passes.
+ */
+const validateSingleAction = action => {
+  const noParamActions = [
+    'mute_conversation',
+    'snooze_conversation',
+    'resolve_conversation',
+    'remove_assigned_team',
+  ];
+
+  if (
+    !noParamActions.includes(action.action_name) &&
+    (!action.action_params || action.action_params.length === 0)
+  ) {
+    return ACTION_PARAMETERS_REQUIRED;
+  }
+
+  return null;
+};
+
+/**
+ * Validates the actions of an automation object.
+ *
+ * @param {Array} actions - The actions to validate.
+ * @returns {Object} An object containing any validation errors.
+ */
+export const validateActions = actions => {
+  if (!actions || actions.length === 0) {
+    return { actions: ATLEAST_ONE_ACTION_REQUIRED };
+  }
+
+  return actions.reduce((errors, action, index) => {
+    const error = validateSingleAction(action);
+    if (error) {
+      errors[`action_${index}`] = error;
+    }
+    return errors;
+  }, {});
+};
+
+/**
+ * Validates an automation object.
+ *
+ * @param {Object} automation - The automation object to validate.
+ * @param {string} automation.name - The name of the automation.
+ * @param {string} automation.description - The description of the automation.
+ * @param {string} automation.event_name - The name of the event that triggers the automation.
+ * @param {Array} automation.conditions - An array of condition objects for the automation.
+ * @param {string} automation.conditions[].filter_operator - The operator for the condition.
+ * @param {string|number} [automation.conditions[].values] - The value(s) for the condition.
+ * @param {Array} automation.actions - An array of action objects for the automation.
+ * @param {string} automation.actions[].action_name - The name of the action.
+ * @param {Array} [automation.actions[].action_params] - The parameters for the action.
+ *
+ * @returns {Object} An object containing any validation errors.
+ */
+export const validateAutomation = automation => {
+  const basicErrors = validateBasicFields(automation);
+  const conditionErrors = validateConditions(automation.conditions);
+  const actionErrors = validateActions(automation.actions);
+
+  return {
+    ...basicErrors,
+    ...conditionErrors,
+    ...actionErrors,
+  };
+};