diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue index 6182a00cdb50..41773b125ff3 100644 --- a/app/javascript/dashboard/components/CustomAttribute.vue +++ b/app/javascript/dashboard/components/CustomAttribute.vue @@ -63,7 +63,7 @@ rel="noopener noreferrer" class="value" > - {{ value || '---' }} + {{ urlValue }}

{{ 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; }, diff --git a/app/javascript/dashboard/helper/URLHelper.js b/app/javascript/dashboard/helper/URLHelper.js index 503b98f8eb9f..e229ce7e4c37 100644 --- a/app/javascript/dashboard/helper/URLHelper.js +++ b/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); +}; diff --git a/app/javascript/dashboard/helper/specs/URLHelper.spec.js b/app/javascript/dashboard/helper/specs/URLHelper.spec.js index 8b4a5266d8b9..ade735642247 100644 --- a/app/javascript/dashboard/helper/specs/URLHelper.spec.js +++ b/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); + }); + }); }); diff --git a/app/javascript/dashboard/mixins/attributeMixin.js b/app/javascript/dashboard/mixins/attributeMixin.js index d861ec059160..6348067b25a1 100644 --- a/app/javascript/dashboard/mixins/attributeMixin.js +++ b/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'; diff --git a/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js b/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js index 0c98f45c8072..9a5efa463906 100644 --- a/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js +++ b/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() {},