From eb682a59121847487a4d7e183e40c1d43c6670c5 Mon Sep 17 00:00:00 2001 From: soupette Date: Fri, 3 Apr 2020 15:31:00 +0200 Subject: [PATCH 1/2] Add backbutton in upload Signed-off-by: soupette --- .../admin/src/containers/ModalStepper/stepper.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/stepper.js b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/stepper.js index 5b8ad03448..c3cef1c0a1 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/stepper.js +++ b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/stepper.js @@ -8,8 +8,9 @@ const stepper = { browse: { Component: UploadForm, headerBreadcrumbs: [getTrad('modal.header.browse')], - prev: null, + prev: 'upload', next: 'upload', + withBackButton: true, }, upload: { Component: UploadList, From 7260b02cbeedd7617c1974bfda6e2cecffd7f089 Mon Sep 17 00:00:00 2001 From: soupette Date: Fri, 3 Apr 2020 15:58:11 +0200 Subject: [PATCH 2/2] Add back button in ctm modals Signed-off-by: soupette --- .../admin/src/components/ModalHeader/index.js | 6 +++- .../InputModalStepper/InputModalStepper.js | 36 ++++++++++++++++++- .../containers/InputModalStepper/stepper.js | 4 +++ .../InputModalStepperProvider/index.js | 7 ++++ .../InputModalStepperProvider/reducer.js | 6 ++++ .../tests/reducer.test.js | 19 ++++++++++ 6 files changed, 76 insertions(+), 2 deletions(-) diff --git a/packages/strapi-plugin-upload/admin/src/components/ModalHeader/index.js b/packages/strapi-plugin-upload/admin/src/components/ModalHeader/index.js index 5ad589cc00..437f329419 100644 --- a/packages/strapi-plugin-upload/admin/src/components/ModalHeader/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/ModalHeader/index.js @@ -24,11 +24,15 @@ const ModalHeader = ({ goBack, headerBreadcrumbs, withBackButton, HeaderComponen })) : null; + const handleClick = () => { + goBack('backButton'); + }; + return ( - {withBackButton && } + {withBackButton && } {HeaderComponent && } {translatedHeaders && translatedHeaders.map(({ key, element }, index) => { diff --git a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/InputModalStepper.js b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/InputModalStepper.js index c815482aa5..06eaf55756 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/InputModalStepper.js +++ b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/InputModalStepper.js @@ -26,6 +26,7 @@ const InputModalStepper = ({ isOpen, onToggle, onInputMediaChange }) => { handleAbortUpload, handleCancelFileToUpload, handleCleanFilesError, + handleClearFilesToUploadAndDownload, handleClickNextButton, handleClose, handleEditExistingFile, @@ -46,6 +47,7 @@ const InputModalStepper = ({ isOpen, onToggle, onInputMediaChange }) => { toggleModalWarning, } = useModalContext(); const { + backButtonDestination, Component, components, headerBreadcrumbs, @@ -80,7 +82,39 @@ const InputModalStepper = ({ isOpen, onToggle, onInputMediaChange }) => { goNext(); }; - const goBack = () => { + const goBack = (elementName = null) => { + const hasFilesToUpload = !isEmpty(filesToUpload); + + // Redirect the user to the list modal from the upload one + if (elementName === 'backButton' && backButtonDestination && currentStep === 'upload') { + if (hasFilesToUpload) { + // eslint-disable-next-line no-alert + const confirm = window.confirm( + formatMessage({ id: getTrad('window.confirm.close-modal.files') }) + ); + + if (!confirm) { + return; + } + } + + goTo(backButtonDestination); + handleClearFilesToUploadAndDownload(); + + return; + } + + if ( + elementName === 'backButton' && + backButtonDestination && + currentStep === 'browse' && + hasFilesToUpload + ) { + goTo(backButtonDestination); + + return; + } + goTo(prev); }; diff --git a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/stepper.js b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/stepper.js index fe585ff0a9..a8acfb7443 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/stepper.js +++ b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/stepper.js @@ -19,12 +19,16 @@ const stepper = { prev: 'list', next: 'upload', withBackButton: true, + backButtonDestination: 'upload', }, upload: { Component: UploadList, headerBreadcrumbs: [getTrad('modal.header.select-files')], next: null, prev: 'browse', + withBackButton: true, + // Exception in order to not update the entire code + backButtonDestination: 'list', }, 'edit-new': { Component: EditForm, diff --git a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/index.js b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/index.js index 08da3d0adb..d29d9beea6 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/index.js +++ b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/index.js @@ -339,6 +339,12 @@ const InputModalStepperProvider = ({ }); }; + const handleClearFilesToUploadAndDownload = () => { + dispatch({ + type: 'CLEAR_FILES_TO_UPLOAD_AND_DOWNLOAD', + }); + }; + const handleSetFileToEditError = errorMessage => { dispatch({ type: 'SET_FILE_TO_EDIT_ERROR', @@ -420,6 +426,7 @@ const InputModalStepperProvider = ({ handleCancelFileToUpload, handleClickNextButton, handleCleanFilesError, + handleClearFilesToUploadAndDownload, handleClose, handleEditExistingFile, handleFileSelection, diff --git a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/reducer.js b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/reducer.js index 8b6fcd972e..489276de69 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/reducer.js +++ b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/reducer.js @@ -43,6 +43,12 @@ const reducer = (state, action) => break; } + case 'CLEAR_FILES_TO_UPLOAD_AND_DOWNLOAD': { + draftState.filesToUpload = []; + draftState.filesToDownload = []; + + break; + } case 'FILE_DOWNLOADED': { const index = state.filesToUpload.findIndex(file => file.tempId === action.fileTempId); diff --git a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/tests/reducer.test.js b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/tests/reducer.test.js index b5ceea589a..60842c522c 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/tests/reducer.test.js +++ b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/tests/reducer.test.js @@ -433,6 +433,25 @@ describe('UPLOAD | containers | ModalStepper | reducer', () => { }); }); + describe('CLEAR_FILES_TO_UPLOAD_AND_DOWNLOAD', () => { + it('should empty the filesToDownload and filesToUpload arrays', () => { + const state = { + filesToDownload: ['1', '2'], + filesToUpload: ['3', '4'], + }; + const action = { + type: 'CLEAR_FILES_TO_UPLOAD_AND_DOWNLOAD', + }; + + const expected = { + filesToDownload: [], + filesToUpload: [], + }; + + expect(reducer(state, action)).toEqual(expected); + }); + }); + describe('FILE_DOWLOADED', () => { it('should update the corresponding file', () => { const state = {