Merge pull request #5702 from strapi/media-lib/add-back-button

Add backbutton in upload

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 (
     <Wrapper>
       <ModalSection>
         <HeaderModalTitle>
-          {withBackButton && <BackButton onClick={goBack} type="button" />}
+          {withBackButton && <BackButton onClick={handleClick} type="button" />}
           {HeaderComponent && <HeaderComponent />}
           {translatedHeaders &&
             translatedHeaders.map(({ key, element }, index) => {

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);
   };
 

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,

packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/index.js

@@ -340,6 +340,12 @@ const InputModalStepperProvider = ({
     });
   };
 
+  const handleClearFilesToUploadAndDownload = () => {
+    dispatch({
+      type: 'CLEAR_FILES_TO_UPLOAD_AND_DOWNLOAD',
+    });
+  };
+
   const handleSetFileToEditError = errorMessage => {
     dispatch({
       type: 'SET_FILE_TO_EDIT_ERROR',
@@ -427,6 +433,7 @@ const InputModalStepperProvider = ({
         handleCancelFileToUpload,
         handleClickNextButton,
         handleCleanFilesError,
+        handleClearFilesToUploadAndDownload,
         handleClose,
         handleEditExistingFile,
         handleFileSelection,

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);
 

packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/tests/reducer.test.js

@@ -464,6 +464,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 = {

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,