fix: Render valid urls only in custom attributes (#3921)

app/javascript/dashboard/components/CustomAttribute.vue

@@ -63,7 +63,7 @@
           rel="noopener noreferrer"
           class="value"
         >
-          {{ value || '---' }}
+          {{ urlValue }}
         </a>
         <p v-else class="value">
           {{ displayValue || '---' }}
@@ -119,7 +119,7 @@ import format from 'date-fns/format';
 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';
 const DATE_FORMAT = 'yyyy-MM-dd';
 
 export default {
@@ -184,6 +184,9 @@ export default {
     isAttributeTypeDate() {
       return this.attributeType === 'date';
     },
+    urlValue() {
+      return isValidURL(this.value) ? this.value : '---';
+    },
     notAttributeTypeCheckboxAndList() {
       return !this.isAttributeTypeCheckbox && !this.isAttributeTypeList;
     },

app/javascript/dashboard/helper/URLHelper.js

@@ -37,3 +37,9 @@ export const accountIdFromPathname = pathname => {
   const accountId = isScoped ? Number(urlParam) : '';
   return accountId;
 };
+
+export const isValidURL = value => {
+  /* eslint-disable no-useless-escape */
+  const URL_REGEX = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/gm;
+  return URL_REGEX.test(value);
+};

app/javascript/dashboard/helper/specs/URLHelper.spec.js

@@ -2,6 +2,7 @@ import {
   frontendURL,
   conversationUrl,
   accountIdFromPathname,
+  isValidURL,
 } from '../URLHelper';
 
 describe('#URL Helpers', () => {
@@ -48,4 +49,13 @@ describe('#URL Helpers', () => {
       expect(accountIdFromPathname('')).toBe('');
     });
   });
+
+  describe('isValidURL', () => {
+    it('should return true if valid url is passed', () => {
+      expect(isValidURL('https://chatwoot.com')).toBe(true);
+    });
+    it('should return false if invalid url is passed', () => {
+      expect(isValidURL('alert.window')).toBe(false);
+    });
+  });
 });

app/javascript/dashboard/mixins/attributeMixin.js

@@ -1,5 +1,5 @@
 import { mapGetters } from 'vuex';
-
+import { isValidURL } from '../helper/URLHelper';
 export default {
   computed: {
     ...mapGetters({
@@ -63,16 +63,11 @@ export default {
         Number.isInteger(Number(attributeValue)) && Number(attributeValue) > 0
       );
     },
-    isAttributeLink(attributeValue) {
-      /* eslint-disable no-useless-escape */
-      const URL_REGEX = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/gm;
-      return URL_REGEX.test(attributeValue);
-    },
     attributeDisplayType(attributeValue) {
       if (this.isAttributeNumber(attributeValue)) {
         return 'number';
       }
-      if (this.isAttributeLink(attributeValue)) {
+      if (isValidURL(attributeValue)) {
         return 'link';
       }
       return 'text';

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

@@ -92,18 +92,6 @@ describe('attributeMixin', () => {
     expect(wrapper.vm.attributeDisplayType(9988)).toBe('number');
   });
 
-  it('return true if link is passed', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [attributeMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.isAttributeLink('https://www.chatwoot.com/pricing')).toBe(
-      true
-    );
-  });
-
   it('return true if number is passed', () => {
     const Component = {
       render() {},