From b18cac77fbae394f407de1c85a952abfc3432c1b Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Wed, 27 Sep 2023 11:05:19 +0530 Subject: [PATCH] chore: Moved file upload methods to mixin (#7987) Co-authored-by: Muhsin Keloth --- .../widgets/conversation/ReplyBox.vue | 71 +----------------- .../dashboard/mixins/fileUploadMixin.js | 72 ++++++++++++++++++ .../mixins/specs/fileUploadMixin.spec.js | 75 +++++++++++++++++++ 3 files changed, 150 insertions(+), 68 deletions(-) create mode 100644 app/javascript/dashboard/mixins/fileUploadMixin.js create mode 100644 app/javascript/dashboard/mixins/specs/fileUploadMixin.spec.js diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue index 6a3212e5b..373df5b76 100644 --- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue +++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue @@ -159,12 +159,7 @@ import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/cons import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue'; import WootAudioRecorder from 'dashboard/components/widgets/WootWriter/AudioRecorder.vue'; import messageFormatterMixin from 'shared/mixins/messageFormatterMixin'; -import { checkFileSizeLimit } from 'shared/helpers/FileHelper'; -import { - MAXIMUM_FILE_UPLOAD_SIZE, - MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL, - AUDIO_FORMATS, -} from 'shared/constants/messages'; +import { AUDIO_FORMATS } from 'shared/constants/messages'; import { BUS_EVENTS } from 'shared/constants/busEvents'; import { getMessageVariables, @@ -176,13 +171,13 @@ import { buildHotKeys } from 'shared/helpers/KeyboardHelpers'; import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper'; import inboxMixin from 'shared/mixins/inboxMixin'; import uiSettingsMixin from 'dashboard/mixins/uiSettings'; -import { DirectUpload } from 'activestorage'; import { frontendURL } from '../../../helper/URLHelper'; import { trimContent, debounce } from '@chatwoot/utils'; import wootConstants from 'dashboard/constants/globals'; import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings'; import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events'; import rtlMixin from 'shared/mixins/rtlMixin'; +import fileUploadMixin from 'dashboard/mixins/fileUploadMixin'; import { appendSignature, removeSignature, @@ -213,6 +208,7 @@ export default { alertMixin, messageFormatterMixin, rtlMixin, + fileUploadMixin, ], props: { selectedTweet: { @@ -944,67 +940,6 @@ export default { isPrivate, }); }, - onFileUpload(file) { - if (this.globalConfig.directUploadsEnabled) { - this.onDirectFileUpload(file); - } else { - this.onIndirectFileUpload(file); - } - }, - onDirectFileUpload(file) { - const MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE = this.isATwilioSMSChannel - ? MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL - : MAXIMUM_FILE_UPLOAD_SIZE; - - if (!file) { - return; - } - if (checkFileSizeLimit(file, MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE)) { - const upload = new DirectUpload( - file.file, - `/api/v1/accounts/${this.accountId}/conversations/${this.currentChat.id}/direct_uploads`, - { - directUploadWillCreateBlobWithXHR: xhr => { - xhr.setRequestHeader( - 'api_access_token', - this.currentUser.access_token - ); - }, - } - ); - - upload.create((error, blob) => { - if (error) { - this.showAlert(error); - } else { - this.attachFile({ file, blob }); - } - }); - } else { - this.showAlert( - this.$t('CONVERSATION.FILE_SIZE_LIMIT', { - MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE, - }) - ); - } - }, - onIndirectFileUpload(file) { - const MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE = this.isATwilioSMSChannel - ? MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL - : MAXIMUM_FILE_UPLOAD_SIZE; - if (!file) { - return; - } - if (checkFileSizeLimit(file, MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE)) { - this.attachFile({ file }); - } else { - this.showAlert( - this.$t('CONVERSATION.FILE_SIZE_LIMIT', { - MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE, - }) - ); - } - }, attachFile({ blob, file }) { const reader = new FileReader(); reader.readAsDataURL(file.file); diff --git a/app/javascript/dashboard/mixins/fileUploadMixin.js b/app/javascript/dashboard/mixins/fileUploadMixin.js new file mode 100644 index 000000000..0f221c209 --- /dev/null +++ b/app/javascript/dashboard/mixins/fileUploadMixin.js @@ -0,0 +1,72 @@ +import { + MAXIMUM_FILE_UPLOAD_SIZE, + MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL, +} from 'shared/constants/messages'; +import { checkFileSizeLimit } from 'shared/helpers/FileHelper'; +import { DirectUpload } from 'activestorage'; + +export default { + methods: { + onFileUpload(file) { + if (this.globalConfig.directUploadsEnabled) { + this.onDirectFileUpload(file); + } else { + this.onIndirectFileUpload(file); + } + }, + onDirectFileUpload(file) { + const MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE = this.isATwilioSMSChannel + ? MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL + : MAXIMUM_FILE_UPLOAD_SIZE; + + if (!file) { + return; + } + if (checkFileSizeLimit(file, MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE)) { + const upload = new DirectUpload( + file.file, + `/api/v1/accounts/${this.accountId}/conversations/${this.currentChat.id}/direct_uploads`, + { + directUploadWillCreateBlobWithXHR: xhr => { + xhr.setRequestHeader( + 'api_access_token', + this.currentUser.access_token + ); + }, + } + ); + + upload.create((error, blob) => { + if (error) { + this.showAlert(error); + } else { + this.attachFile({ file, blob }); + } + }); + } else { + this.showAlert( + this.$t('CONVERSATION.FILE_SIZE_LIMIT', { + MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE, + }) + ); + } + }, + onIndirectFileUpload(file) { + const MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE = this.isATwilioSMSChannel + ? MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL + : MAXIMUM_FILE_UPLOAD_SIZE; + if (!file) { + return; + } + if (checkFileSizeLimit(file, MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE)) { + this.attachFile({ file }); + } else { + this.showAlert( + this.$t('CONVERSATION.FILE_SIZE_LIMIT', { + MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE, + }) + ); + } + }, + }, +}; diff --git a/app/javascript/dashboard/mixins/specs/fileUploadMixin.spec.js b/app/javascript/dashboard/mixins/specs/fileUploadMixin.spec.js new file mode 100644 index 000000000..5f2234fd2 --- /dev/null +++ b/app/javascript/dashboard/mixins/specs/fileUploadMixin.spec.js @@ -0,0 +1,75 @@ +import fileUploadMixin from 'dashboard/mixins/fileUploadMixin'; +import Vue from 'vue'; + +jest.mock('shared/helpers/FileHelper', () => ({ + checkFileSizeLimit: jest.fn(), +})); + +jest.mock('activestorage', () => ({ + DirectUpload: jest.fn().mockImplementation(() => ({ + create: jest.fn(), + })), +})); + +describe('FileUploadMixin', () => { + let vm; + + beforeEach(() => { + vm = new Vue(fileUploadMixin); + vm.isATwilioSMSChannel = false; + vm.globalConfig = { + directUploadsEnabled: true, + }; + vm.accountId = 123; + vm.currentChat = { + id: 456, + }; + vm.currentUser = { + access_token: 'token', + }; + vm.$t = jest.fn(message => message); + vm.showAlert = jest.fn(); + vm.attachFile = jest.fn(); + }); + + it('should call onDirectFileUpload when direct uploads are enabled', () => { + vm.onDirectFileUpload = jest.fn(); + vm.onFileUpload({}); + expect(vm.onDirectFileUpload).toHaveBeenCalledWith({}); + }); + + it('should call onIndirectFileUpload when direct uploads are disabled', () => { + vm.globalConfig.directUploadsEnabled = false; + vm.onIndirectFileUpload = jest.fn(); + vm.onFileUpload({}); + expect(vm.onIndirectFileUpload).toHaveBeenCalledWith({}); + }); + + describe('onDirectFileUpload', () => { + it('returns early if no file is provided', () => { + const returnValue = vm.onDirectFileUpload(null); + expect(returnValue).toBeUndefined(); + }); + + it('shows an alert if the file size exceeds the maximum limit', () => { + const fakeFile = { size: 999999999 }; + vm.showAlert = jest.fn(); + vm.onDirectFileUpload(fakeFile); + expect(vm.showAlert).toHaveBeenCalledWith(expect.any(String)); + }); + }); + + describe('onIndirectFileUpload', () => { + it('returns early if no file is provided', () => { + const returnValue = vm.onIndirectFileUpload(null); + expect(returnValue).toBeUndefined(); + }); + + it('shows an alert if the file size exceeds the maximum limit', () => { + const fakeFile = { size: 999999999 }; + vm.showAlert = jest.fn(); + vm.onIndirectFileUpload(fakeFile); + expect(vm.showAlert).toHaveBeenCalledWith(expect.any(String)); + }); + }); +});