Merge pull request #5731 from strapi/ml/functional-fix

Ml/functional fix

packages/strapi-admin/admin/src/containers/App/index.js

@@ -42,7 +42,9 @@ function App(props) {
       try {
         const requestURL = '/users-permissions/init';
 
-        const { hasAdmin } = await request(requestURL, { method: 'GET' });
+        const { hasAdmin } = await request(requestURL, { method: 'GET' }, false, false, {
+          noAuth: true,
+        });
         const { data } = await request('/admin/init', { method: 'GET' });
         const { uuid } = data;
 
@@ -86,9 +88,7 @@ function App(props) {
           <Switch>
             <Route
               path="/auth/:authType"
-              render={routerProps => (
+              render={routerProps => <AuthPage {...routerProps} hasAdminUser={state.hasAdmin} />}
-                <AuthPage {...routerProps} hasAdminUser={state.hasAdmin} />
-              )}
               exact
             />
             <PrivateRoute path="/" component={Admin} />
@@ -108,10 +108,7 @@ export function mapDispatchToProps(dispatch) {
   return bindActionCreators({ getDataSucceeded }, dispatch);
 }
 
-const withConnect = connect(
+const withConnect = connect(null, mapDispatchToProps);
-  null,
-  mapDispatchToProps
-);
 
 export default compose(withConnect)(App);
 export { App };

packages/strapi-helper-plugin/lib/src/utils/request.js

@@ -21,10 +21,7 @@ function parseJSON(response) {
  * @return {object|undefined} Returns either the response, or throws an error
  */
 function checkStatus(response, checkToken = true) {
-  if (
+  if ((response.status >= 200 && response.status < 300) || response.status === 0) {
-    (response.status >= 200 && response.status < 300) ||
-    response.status === 0
-  ) {
     return response;
   }
 
@@ -32,12 +29,16 @@ function checkStatus(response, checkToken = true) {
     return checkTokenValidity(response);
   }
 
-  return parseJSON(response).then(responseFormatted => {
+  return parseJSON(response)
-    const error = new Error(response.statusText);
+    .then(responseFormatted => {
-    error.response = response;
+      const error = new Error(response.statusText);
-    error.response.payload = responseFormatted;
+      error.response = response;
-    throw error;
+      error.response.payload = responseFormatted;
-  });
+      throw error;
+    })
+    .catch(() => {
+      throw response;
+    });
 }
 
 function checkTokenValidity(response) {
@@ -114,13 +115,7 @@ function serverRestartWatcher(response) {
  * @return {object}           The response data
  */
 export default function request(...args) {
-  let [
+  let [url, options = {}, shouldWatchServerRestart, stringify = true, ...rest] = args;
-    url,
-    options = {},
-    shouldWatchServerRestart,
-    stringify = true,
-    ...rest
-  ] = args;
   let noAuth;
 
   try {

packages/strapi-plugin-upload/admin/src/components/CheckControl/index.js

@@ -40,7 +40,7 @@ const CheckControl = ({ title, onSubmitEdit }) => {
         color="#6DBB1A"
         onClick={handleToggle}
         type="check"
-        title={formatMessage({ id: getTrad(`control-card.${title}`) })}
+        title={title}
         iconStyle={{ height: '1.4rem', width: '1.4rem' }}
       />
       <CustomDropdownSection isOpen={isOpen}>

packages/strapi-plugin-upload/admin/src/components/EditForm/index.js

@@ -55,6 +55,7 @@ const EditForm = forwardRef(
     const [isCropping, setIsCropping] = useState(false);
     const [infos, setInfos] = useState({ width: null, height: null });
     const [src, setSrc] = useState(null);
+    const cacheRef = useRef(performance.now());
 
     const fileURL = get(fileToEdit, ['file', 'url'], null);
     const prefixedFileURL = fileURL ? prefixFileUrlWithBackendUrl(fileURL) : null;
@@ -142,30 +143,39 @@ const EditForm = forwardRef(
     };
 
     const getCroppedResult = () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
-        const canvas = cropper.current.getCroppedCanvas();
+        try {
+          const canvas = cropper.current.getCroppedCanvas();
 
-        canvas.toBlob(async blob => {
+          canvas.toBlob(async blob => {
-          const {
+            const {
-            file: { lastModifiedDate, lastModified, name },
+              file: { lastModifiedDate, lastModified, name },
-          } = fileToEdit;
+            } = fileToEdit;
 
-          resolve(
+            resolve(
-            new File([blob], name, {
+              new File([blob], name, {
-              type: mimeType,
+                type: mimeType,
-              lastModified,
+                lastModified,
-              lastModifiedDate,
+                lastModifiedDate,
-            })
+              })
-          );
+            );
-        });
+          });
+        } catch (err) {
+          reject();
+        }
       });
     };
 
     const handleClickEditCroppedFile = async (e, shouldDuplicate = false) => {
-      const file = await getCroppedResult();
+      try {
+        const file = await getCroppedResult();
 
-      setIsCropping(false);
+        onSubmitEdit(e, shouldDuplicate, file);
-      onSubmitEdit(e, shouldDuplicate, file);
+      } catch (err) {
+        // Silent
+      } finally {
+        setIsCropping(false);
+      }
     };
 
     const handleClickDelete = () => {
@@ -274,7 +284,7 @@ const EditForm = forwardRef(
                       {isImg ? (
                         <CropWrapper>
                           <img
-                            src={src}
+                            src={`${src}?${cacheRef.current}`}
                             alt={get(fileToEdit, ['file', 'name'], '')}
                             ref={isCropping ? imgRef : null}
                           />

packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/InputModalStepper.js

@@ -234,13 +234,15 @@ const InputModalStepper = ({ isOpen, onToggle, onInputMediaChange }) => {
       handleEditExistingFile(editedFile);
       goToList();
     } catch (err) {
+      const status = get(err, 'response.status', get(err, 'status', null));
+      const statusText = get(err, 'response.statusText', get(err, 'statusText', null));
       const errorMessage = get(
         err,
         ['response', 'payload', 'message', '0', 'messages', '0', 'message'],
-        get(err, ['response', 'payload', 'message'], null)
+        get(err, ['response', 'payload', 'message'], statusText)
       );
 
-      if (errorMessage) {
+      if (status) {
         handleSetFileToEditError(errorMessage);
       }
     }
@@ -263,6 +265,8 @@ const InputModalStepper = ({ isOpen, onToggle, onInputMediaChange }) => {
 
   const shouldDisplayNextButton = currentStep === 'browse' && displayNextButton;
   const isFinishButtonDisabled = filesToUpload.some(file => file.isDownloading || file.isUploading);
+  const areButtonsDisabledOnEditExistingFile =
+    currentStep === 'edit' && fileToEdit.isUploading === true;
 
   return (
     <>
@@ -348,7 +352,7 @@ const InputModalStepper = ({ isOpen, onToggle, onInputMediaChange }) => {
             {currentStep === 'edit' && (
               <div style={{ margin: 'auto 0' }}>
                 <Button
-                  disabled={isFormDisabled}
+                  disabled={isFormDisabled || areButtonsDisabledOnEditExistingFile}
                   color="primary"
                   onClick={handleReplaceMedia}
                   style={{ marginRight: 10 }}
@@ -357,7 +361,7 @@ const InputModalStepper = ({ isOpen, onToggle, onInputMediaChange }) => {
                 </Button>
 
                 <Button
-                  disabled={isFormDisabled}
+                  disabled={isFormDisabled || areButtonsDisabledOnEditExistingFile}
                   color="success"
                   type="button"
                   onClick={handleSubmitEditExistingFile}

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

@@ -75,7 +75,7 @@ const InputModalStepperProvider = ({
               headers: { Authorization: `Bearer ${auth.getToken()}` },
               responseType: 'blob',
               cancelToken: source.token,
-              timeout: 30000,
+              timeout: 60000,
             })
             .then(({ data }) => {
               const createdFile = new File([data], file.fileURL, {
@@ -402,17 +402,21 @@ const InputModalStepperProvider = ({
             multiple,
           });
         } catch (err) {
+          const status = get(err, 'response.status', get(err, 'status', null));
+          const statusText = get(err, 'response.statusText', get(err, 'statusText', null));
           const errorMessage = get(
             err,
             ['response', 'payload', 'message', '0', 'messages', '0', 'message'],
-            null
+            get(err, ['response', 'payload', 'message'], statusText)
           );
 
-          dispatch({
+          if (status) {
-            type: 'SET_FILE_ERROR',
+            dispatch({
-            fileIndex: originalIndex,
+              type: 'SET_FILE_ERROR',
-            errorMessage,
+              fileIndex: originalIndex,
-          });
+              errorMessage,
+            });
+          }
         }
       }
     );

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

@@ -95,7 +95,7 @@ const ModalStepper = ({
               headers: { Authorization: `Bearer ${auth.getToken()}` },
               responseType: 'blob',
               cancelToken: source.token,
-              timeout: 30000,
+              timeout: 60000,
             })
             .then(({ data }) => {
               const fileName = file.fileInfo.name;
@@ -312,13 +312,16 @@ const ModalStepper = ({
       // Close the modal and refetch data
       toggleRef.current(true);
     } catch (err) {
+      console.error(err);
+      const status = get(err, 'response.status', get(err, 'status', null));
+      const statusText = get(err, 'response.statusText', get(err, 'statusText', null));
       const errorMessage = get(
         err,
         ['response', 'payload', 'message', '0', 'messages', '0', 'message'],
-        get(err, ['response', 'payload', 'message'], null)
+        get(err, ['response', 'payload', 'message'], statusText)
       );
 
-      if (errorMessage) {
+      if (status) {
         dispatch({
           type: 'SET_FILE_TO_EDIT_ERROR',
           errorMessage,
@@ -394,13 +397,16 @@ const ModalStepper = ({
             fileIndex: originalIndex,
           });
         } catch (err) {
+          console.error(err);
+          const status = get(err, 'response.status', get(err, 'status', null));
+          const statusText = get(err, 'response.statusText', get(err, 'statusText', null));
           const errorMessage = get(
             err,
             ['response', 'payload', 'message', '0', 'messages', '0', 'message'],
-            get(err, ['response', 'payload', 'message'], null)
+            get(err, ['response', 'payload', 'message'], statusText)
           );
 
-          if (errorMessage) {
+          if (status) {
             dispatch({
               type: 'SET_FILE_ERROR',
               fileIndex: originalIndex,
@@ -441,6 +447,8 @@ const ModalStepper = ({
 
   const shouldDisplayNextButton = currentStep === 'browse' && displayNextButton;
   const isFinishButtonDisabled = filesToUpload.some(file => file.isDownloading || file.isUploading);
+  const areButtonsDisabledOnEditExistingFile =
+    currentStep === 'edit' && fileToEdit.isUploading === true;
 
   return (
     <>
@@ -525,7 +533,7 @@ const ModalStepper = ({
             {currentStep === 'edit' && (
               <div style={{ margin: 'auto 0' }}>
                 <Button
-                  disabled={isFormDisabled}
+                  disabled={isFormDisabled || areButtonsDisabledOnEditExistingFile}
                   color="primary"
                   onClick={handleReplaceMedia}
                   style={{ marginRight: 10 }}
@@ -534,7 +542,7 @@ const ModalStepper = ({
                 </Button>
 
                 <Button
-                  disabled={isFormDisabled}
+                  disabled={isFormDisabled || areButtonsDisabledOnEditExistingFile}
                   color="success"
                   type="button"
                   onClick={handleSubmitEditExistingFile}