feat: Support Regex validation for custom attributes (#7856)

This allows a user to add/update a custom regex and a cue while defining custom attributes(Only applicable for type- text). While adding/editing custom attributes, the values are validated against the attribute definition regex, and if it is incorrect, a cue message or default error message is shown and restricts invalid values from being saved. Fixes: #6866
chatwoot · Jan 23, 2024 · 4b40c61 · 4b40c61
1 parent 834c219
commit 4b40c61
Show file tree

Hide file tree

Showing 20 changed files with 247 additions and 22 deletions.
diff --git a/app/controllers/api/v1/accounts/custom_attribute_definitions_controller.rb b/app/controllers/api/v1/accounts/custom_attribute_definitions_controller.rb
@@ -39,6 +39,8 @@ def permitted_payload
       :attribute_display_type,
       :attribute_key,
       :attribute_model,
+      :regex_pattern,
+      :regex_cue,
       attribute_values: []
     )
   end

diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -126,18 +126,26 @@ import { required, url } from 'vuelidate/lib/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
 import { isValidURL } from '../helper/URLHelper';
+import customAttributeMixin from '../mixins/customAttributeMixin';
 const DATE_FORMAT = 'yyyy-MM-dd';
 
 export default {
   components: {
     MultiselectDropdown,
   },
+  mixins: [customAttributeMixin],
   props: {
     label: { type: String, required: true },
     values: { type: Array, default: () => [] },
     value: { type: [String, Number, Boolean], default: '' },
     showActions: { type: Boolean, default: false },
     attributeType: { type: String, default: 'text' },
+    attributeRegex: {
+      type: String,
+      default: null,
+    },
+    regexCue: { type: String, default: null },
+    regexEnabled: { type: Boolean, default: false },
     attributeKey: { type: String, required: true },
     contactId: { type: Number, default: null },
   },
@@ -204,6 +212,11 @@ export default {
       if (this.$v.editedValue.url) {
         return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_URL');
       }
+      if (!this.$v.editedValue.regexValidation) {
+        return this.regexCue
+          ? this.regexCue
+          : this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_INPUT');
+      }
       return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.REQUIRED');
     },
   },
@@ -221,7 +234,15 @@ export default {
       };
     }
     return {
-      editedValue: { required },
+      editedValue: {
+        required,
+        regexValidation: value => {
+          return !(
+            this.attributeRegex &&
+            !this.getRegexp(this.attributeRegex).test(value)
+          );
+        },
+      },
     };
   },
   mounted() {

diff --git a/app/javascript/dashboard/helper/preChat.js b/app/javascript/dashboard/helper/preChat.js
@@ -47,6 +47,8 @@ export const getCustomFields = ({ standardFields, customAttributes }) => {
         type: attribute.attribute_display_type,
         values: attribute.attribute_values,
         field_type: attribute.attribute_model,
+        regex_pattern: attribute.regex_pattern,
+        regex_cue: attribute.regex_cue,
         required: false,
         enabled: false,
       });

diff --git a/app/javascript/dashboard/helper/specs/inboxFixture.js b/app/javascript/dashboard/helper/specs/inboxFixture.js
@@ -44,4 +44,18 @@ export default {
       created_at: '2021-11-29T10:20:04.563Z',
     },
   ],
+  customAttributesWithRegex: [
+    {
+      id: 2,
+      attribute_description: 'Test contact Attribute',
+      attribute_display_name: 'Test contact Attribute',
+      attribute_display_type: 'text',
+      attribute_key: 'test_contact_attribute',
+      attribute_model: 'contact_attribute',
+      attribute_values: Array(0),
+      created_at: '2023-09-20T10:20:04.563Z',
+      regex_pattern: '^w+$',
+      regex_cue: 'It should be a combination of alphabets and numbers',
+    },
+  ],
 };
diff --git a/app/javascript/dashboard/helper/specs/preChat.spec.js b/app/javascript/dashboard/helper/specs/preChat.spec.js
@@ -5,7 +5,8 @@ import {
 } from '../preChat';
 import inboxFixture from './inboxFixture';
 
-const { customFields, customAttributes } = inboxFixture;
+const { customFields, customAttributes, customAttributesWithRegex } =
+  inboxFixture;
 describe('#Pre chat Helpers', () => {
   describe('getPreChatFields', () => {
     it('should return correct pre-chat fields form options passed', () => {
@@ -27,7 +28,6 @@ describe('#Pre chat Helpers', () => {
           placeholder: 'Please enter your email address',
           type: 'email',
           field_type: 'standard',
-
           required: false,
           enabled: false,
         },
@@ -71,6 +71,26 @@ describe('#Pre chat Helpers', () => {
           values: [],
         },
       ]);
+
+      expect(
+        getCustomFields({
+          standardFields: { pre_chat_fields: customFields.pre_chat_fields },
+          customAttributes: customAttributesWithRegex,
+        })
+      ).toEqual([
+        {
+          enabled: false,
+          label: 'Test contact Attribute',
+          placeholder: 'Test contact Attribute',
+          name: 'test_contact_attribute',
+          required: false,
+          field_type: 'contact_attribute',
+          type: 'text',
+          values: [],
+          regex_pattern: '^w+$',
+          regex_cue: 'It should be a combination of alphabets and numbers',
+        },
+      ]);
     });
   });
 });
diff --git a/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json b/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
@@ -39,6 +39,17 @@
           "PLACEHOLDER": "Enter custom attribute key",
           "ERROR": "Key is required",
           "IN_VALID": "Invalid key"
+        },
+        "REGEX_PATTERN": {
+          "LABEL": "Regex Pattern",
+          "PLACEHOLDER": "Please enter custom attribute regex pattern. (Optional)"
+        },
+        "REGEX_CUE": {
+          "LABEL": "Regex Cue",
+          "PLACEHOLDER": "Please enter regex pattern hint. (Optional)"
+        },
+        "ENABLE_REGEX": {
+          "LABEL": "Enable regex validation"
         }
       },
       "API": {
@@ -88,6 +99,17 @@
       "EMPTY_RESULT": {
         "404": "There are no custom attributes created",
         "NOT_FOUND": "There are no custom attributes configured"
+      },
+      "REGEX_PATTERN": {
+        "LABEL": "Regex Pattern",
+        "PLACEHOLDER": "Please enter custom attribute regex pattern. (Optional)"
+      },
+      "REGEX_CUE": {
+        "LABEL": "Regex Cue",
+        "PLACEHOLDER": "Please enter regex pattern hint. (Optional)"
+      },
+      "ENABLE_REGEX": {
+        "LABEL": "Enable regex validation"
       }
     }
   }

diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -339,7 +339,8 @@
     },
     "VALIDATIONS": {
       "REQUIRED": "Valid value is required",
-      "INVALID_URL": "Invalid URL"
+      "INVALID_URL": "Invalid URL",
+      "INVALID_INPUT": "Invalid Input"
     }
   },
   "MERGE_CONTACTS": {

diff --git a/app/javascript/dashboard/mixins/customAttributeMixin.js b/app/javascript/dashboard/mixins/customAttributeMixin.js
@@ -0,0 +1,11 @@
+export default {
+  methods: {
+    getRegexp(regexPatternValue) {
+      let lastSlash = regexPatternValue.lastIndexOf('/');
+      return new RegExp(
+        regexPatternValue.slice(1, lastSlash),
+        regexPatternValue.slice(lastSlash + 1)
+      );
+    },
+  },
+};
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -11,6 +11,8 @@
       emoji=""
       :value="attribute.value"
       :show-actions="true"
+      :attribute-regex="attribute.regex_pattern"
+      :regex-cue="attribute.regex_cue"
       :class="attributeClass"
       @update="onUpdate"
       @delete="onDelete"

diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
@@ -86,6 +86,30 @@
               {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
             </label>
           </div>
+          <div v-if="isAttributeTypeText">
+            <input
+              v-model="regexEnabled"
+              type="checkbox"
+              @input="toggleRegexEnabled"
+            />
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.ENABLE_REGEX.LABEL') }}
+          </div>
+          <woot-input
+            v-if="isAttributeTypeText && isRegexEnabled"
+            v-model="regexPattern"
+            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.LABEL')"
+            type="text"
+            :placeholder="
+              $t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.PLACEHOLDER')
+            "
+          />
+          <woot-input
+            v-if="isAttributeTypeText && isRegexEnabled"
+            v-model="regexCue"
+            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.LABEL')"
+            type="text"
+            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.PLACEHOLDER')"
+          />
           <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
             <woot-submit-button
               :disabled="isButtonDisabled"
@@ -124,6 +148,9 @@ export default {
       attributeModel: 0,
       attributeType: 0,
       attributeKey: '',
+      regexPattern: null,
+      regexCue: null,
+      regexEnabled: false,
       models: ATTRIBUTE_MODELS,
       types: ATTRIBUTE_TYPES,
       values: [],
@@ -163,6 +190,12 @@ export default {
     isAttributeTypeList() {
       return this.attributeType === 6;
     },
+    isAttributeTypeText() {
+      return this.attributeType === 0;
+    },
+    isRegexEnabled() {
+      return this.regexEnabled;
+    },
   },
 
   validations: {
@@ -201,11 +234,18 @@ export default {
     onDisplayNameChange() {
       this.attributeKey = convertToAttributeSlug(this.displayName);
     },
+    toggleRegexEnabled() {
+      this.regexEnabled = !this.regexEnabled;
+    },
     async addAttributes() {
       this.$v.$touch();
       if (this.$v.$invalid) {
         return;
       }
+      if (!this.regexEnabled) {
+        this.regexPattern = null;
+        this.regexCue = null;
+      }
       try {
         await this.$store.dispatch('attributes/create', {
           attribute_display_name: this.displayName,
@@ -214,6 +254,10 @@ export default {
           attribute_display_type: this.attributeType,
           attribute_key: this.attributeKey,
           attribute_values: this.attributeListValues,
+          regex_pattern: this.regexPattern
+            ? new RegExp(this.regexPattern).toString()
+            : null,
+          regex_cue: this.regexCue,
         });
         this.alertMessage = this.$t('ATTRIBUTES_MGMT.ADD.API.SUCCESS_MESSAGE');
         this.onClose();