diff --git a/app/src/pages/admin/pluginsPage/modals/uploadPluginModal/uploadPluginModal.jsx b/app/src/pages/admin/pluginsPage/modals/uploadPluginModal/uploadPluginModal.jsx index cf7f5f18c7..15772ad435 100644 --- a/app/src/pages/admin/pluginsPage/modals/uploadPluginModal/uploadPluginModal.jsx +++ b/app/src/pages/admin/pluginsPage/modals/uploadPluginModal/uploadPluginModal.jsx @@ -66,10 +66,6 @@ export const UploadPluginModal = ({ data }) => { data={data} title={formatMessage(messages.modalTitle)} importButton={formatMessage(messages.uploadButton)} - tip={formatMessage(messages.uploadTip, { - b: (d) => DOMPurify.sanitize(`${d}`), - span: (d) => DOMPurify.sanitize(`${d}`), - })} url={url} singleImport eventsInfo={{ @@ -77,7 +73,6 @@ export const UploadPluginModal = ({ data }) => { cancelBtn: PLUGINS_PAGE_EVENTS.CANCEL_BTN_UPLOAD_MODAL, closeIcon: PLUGINS_PAGE_EVENTS.CLOSE_ICON_UPLOAD_MODAL, }} - incorrectFileSize={formatMessage(messages.incorrectFileSize)} maxFileSize={MAX_FILE_SIZES} acceptFileMimeTypes={ACCEPT_FILE_MIME_TYPES} files={files} @@ -89,6 +84,11 @@ export const UploadPluginModal = ({ data }) => { setFiles={setFiles} maxFileSize={MAX_FILE_SIZES} acceptFileMimeTypes={ACCEPT_FILE_MIME_TYPES} + incorrectFileSize={formatMessage(messages.incorrectFileSize)} + tip={formatMessage(messages.uploadTip, { + b: (d) => DOMPurify.sanitize(`${d}`), + span: (d) => DOMPurify.sanitize(`${d}`), + })} /> ); diff --git a/app/src/pages/common/uploadFileControls/dropzoneComponent/dropzoneComponent.jsx b/app/src/pages/common/uploadFileControls/dropzoneComponent/dropzoneComponent.jsx index 688f59a1f3..1b784396d9 100644 --- a/app/src/pages/common/uploadFileControls/dropzoneComponent/dropzoneComponent.jsx +++ b/app/src/pages/common/uploadFileControls/dropzoneComponent/dropzoneComponent.jsx @@ -22,15 +22,23 @@ import { } from 'pages/common/uploadFileControls/importModalLayout/utils'; import { DropzoneField } from './dropzoneField'; -export const DropzoneComponent = ({ data, files, setFiles, maxFileSize, acceptFileMimeTypes }) => { +export const DropzoneComponent = ({ + data, + files, + setFiles, + maxFileSize, + acceptFileMimeTypes, + incorrectFileSize, + tip, +}) => { const isDropZoneDisabled = () => isUploadFinished() || isUploadInProgress() || (data.singleImport && files.length > 0); return ( { +const ImportModalLayoutComponent = ({ + data, + url, + files, + setFiles, + title, + importConfirmationWarning, + importButton, + eventsInfo, + children, +}) => { const { formatMessage } = useIntl(); const { trackEvent } = useTracking(); const dispatch = useDispatch(); @@ -44,8 +54,7 @@ const ImportModalLayoutComponent = ({ data, files, setFiles, children }) => { const addCancelRequest = (cancelRequest) => cancelRequests.push(cancelRequest); const getOkButtonConfig = (isLoading, uploadFinished) => { - const text = - isLoading || uploadFinished ? formatMessage(COMMON_LOCALE_KEYS.OK) : data.importButton; + const text = isLoading || uploadFinished ? formatMessage(COMMON_LOCALE_KEYS.OK) : importButton; return { text, @@ -54,8 +63,17 @@ const ImportModalLayoutComponent = ({ data, files, setFiles, children }) => { if (uploadFinished) { closeModal(); } else { - trackEvent(data.eventsInfo?.okBtn); - uploadFiles(data, files, setFiles, addCancelRequest, dispatch, trackEvent); + trackEvent(eventsInfo.okBtn); + uploadFiles( + data, + url, + files, + setFiles, + addCancelRequest, + eventsInfo, + dispatch, + trackEvent, + ); } }, }; @@ -69,7 +87,7 @@ const ImportModalLayoutComponent = ({ data, files, setFiles, children }) => { const getCloseConfirmationConfig = (isValidFilesExists, loading, uploadFinished) => { const confirmationWarning = loading - ? data.importConfirmationWarning + ? importConfirmationWarning : formatMessage(COMMON_LOCALE_KEYS.CLOSE_MODAL_WARNING); if (!isValidFilesExists || uploadFinished) { @@ -89,15 +107,15 @@ const ImportModalLayoutComponent = ({ data, files, setFiles, children }) => { return ( {children} @@ -105,6 +123,7 @@ const ImportModalLayoutComponent = ({ data, files, setFiles, children }) => { }; ImportModalLayoutComponent.propTypes = { data: PropTypes.object, + url: PropTypes.string.isRequired, tracking: PropTypes.shape({ trackEvent: PropTypes.func, getTrackingData: PropTypes.func, @@ -112,10 +131,16 @@ ImportModalLayoutComponent.propTypes = { children: PropTypes.node, files: PropTypes.arrayOf(PropTypes.object).isRequired, setFiles: PropTypes.func.isRequired, + title: PropTypes.string.isRequired, + importConfirmationWarning: PropTypes.string, + importButton: PropTypes.string.isRequired, + eventsInfo: PropTypes.object, }; ImportModalLayoutComponent.defaultProps = { - data: { eventsInfo: { uploadButton: () => {}, cancelBtn: {}, closeIcon: {} } }, + data: {}, dropzoneCountNumber: 0, children: [null], + importConfirmationWarning: '', + eventsInfo: { uploadButton: () => {}, cancelBtn: {}, closeIcon: {} }, }; export const ImportModalLayout = track()(ImportModalLayoutComponent); diff --git a/app/src/pages/common/uploadFileControls/importModalLayout/utils.js b/app/src/pages/common/uploadFileControls/importModalLayout/utils.js index 4d5a70ee35..696282a91f 100644 --- a/app/src/pages/common/uploadFileControls/importModalLayout/utils.js +++ b/app/src/pages/common/uploadFileControls/importModalLayout/utils.js @@ -71,12 +71,21 @@ export const isUploadFinished = (files) => { return validFiles?.length ? validFiles.every(({ uploaded }) => uploaded) : false; }; -export const uploadFiles = (data, files, setFiles, addCancelRequest, dispatch, trackEvent) => { +export const uploadFiles = ( + data, + url, + files, + setFiles, + addCancelRequest, + eventsInfo, + dispatch, + trackEvent, +) => { const getFilesNames = () => files.map(({ file: { name } }) => name).join('#'); const successUploadHandler = (id) => { data.onImport(); - const uploadButton = data.eventsInfo.uploadButton; + const uploadButton = eventsInfo.uploadButton; if (uploadButton) { trackEvent(uploadButton(getFilesNames())); @@ -112,7 +121,7 @@ export const uploadFiles = (data, files, setFiles, addCancelRequest, dispatch, t setFiles(updatedFiles); }; - const preparedData = prepareDataForServerUploading(data.url, files, setFiles, addCancelRequest); + const preparedData = prepareDataForServerUploading(url, files, setFiles, addCancelRequest); const updatedFiles = files.map((f) => (f.valid ? { ...f, isLoading: true } : f)); setFiles(updatedFiles); diff --git a/app/src/pages/inside/launchesPage/modals/importLaunchModal/importLaunchModal.jsx b/app/src/pages/inside/launchesPage/modals/importLaunchModal/importLaunchModal.jsx index 1e5e23aa5a..75660e0a84 100644 --- a/app/src/pages/inside/launchesPage/modals/importLaunchModal/importLaunchModal.jsx +++ b/app/src/pages/inside/launchesPage/modals/importLaunchModal/importLaunchModal.jsx @@ -16,7 +16,6 @@ import React, { useState } from 'react'; import classNames from 'classnames/bind'; -import Parser from 'html-react-parser'; import { connect } from 'react-redux'; import { defineMessages, useIntl } from 'react-intl'; import DOMPurify from 'dompurify'; @@ -80,18 +79,12 @@ export const ImportLaunchModal = ({ data, activeProject, importPlugins }) => { setFiles={setFiles} title={formatMessage(messages.modalTitle)} importButton={formatMessage(messages.importButton)} - tip={formatMessage(messages.importTip, { - b: (d) => DOMPurify.sanitize(`${d}`), - span: (d) => DOMPurify.sanitize(`${d}`), - })} url={url} eventsInfo={{ okBtn: LAUNCHES_MODAL_EVENTS.OK_BTN_IMPORT_MODAL, cancelBtn: LAUNCHES_MODAL_EVENTS.CANCEL_BTN_IMPORT_MODAL, closeIcon: LAUNCHES_MODAL_EVENTS.CLOSE_ICON_IMPORT_MODAL, }} - incorrectFileSize={formatMessage(messages.incorrectFileSize)} - noteMessage={formatMessage(messages.noteMessage)} importConfirmationWarning={formatMessage(messages.importConfirmationWarning)} > { setFiles={setFiles} maxFileSize={selectedPluginData?.details?.MAX_FILE_SIZES} acceptFileMimeTypes={selectedPluginData?.details?.ACCEPT_FILE_MIME_TYPES || []} + incorrectFileSize={formatMessage(messages.incorrectFileSize)} + tip={formatMessage(messages.importTip, { + b: (d) => DOMPurify.sanitize(`${d}`), + span: (d) => DOMPurify.sanitize(`${d}`), + })} />

{formatMessage(messages.note)}

-

{Parser(data.noteMessage)}

+

{formatMessage(messages.noteMessage)}

); };