controls: refactored isDisabled function

* Refactored isDisabled function in PublishButton and SubmitReviewButton components to check if all files are finished uploading before enabling the button.
* Passed filesState instead of just the number of files to the function.
* Added a check for non-finished files.
* Added early returns to avoid unnecessary checks on possible large objects / arrays.

invenio_rdm_records/assets/semantic-ui/js/invenio_rdm_records/src/deposit/controls/PublishButton/PublishButton.js

@@ -40,16 +40,29 @@ class PublishButtonComponent extends Component {
     this.closeConfirmModal();
   };
 
-  isDisabled = (values, isSubmitting, numberOfFiles) => {
+  isDisabled = (values, isSubmitting, filesState) => {
+    if (isSubmitting) {
+      return true;
+    }
+
     const filesEnabled = _get(values, "files.enabled", false);
-    const filesMissing = filesEnabled && !numberOfFiles;
-    return isSubmitting || filesMissing;
+    const filesArray = Object.values(filesState.entries ?? {});
+    const filesMissing = filesEnabled && filesArray.length === 0;
+
+    if (filesMissing) {
+      return true;
+    }
+
+    // All files must be finished uploading
+    const allCompleted = filesArray.every(file => file.status === "finished")
+
+    return !allCompleted;
   };
 
   render() {
     const {
       actionState,
-      numberOfFiles,
+      filesState,
       buttonLabel,
       publishWithoutCommunity,
       formik,
@@ -64,7 +77,7 @@ class PublishButtonComponent extends Component {
     return (
       <>
         <Button
-          disabled={this.isDisabled(values, isSubmitting, numberOfFiles)}
+          disabled={this.isDisabled(values, isSubmitting, filesState)}
           name="publish"
           onClick={this.openConfirmModal}
           positive
@@ -123,22 +136,23 @@ PublishButtonComponent.propTypes = {
   buttonLabel: PropTypes.string,
   publishWithoutCommunity: PropTypes.bool,
   actionState: PropTypes.string,
-  numberOfFiles: PropTypes.number.isRequired,
   formik: PropTypes.object.isRequired,
   publishModalExtraContent: PropTypes.string,
+  filesState: PropTypes.object,
 };
 
 PublishButtonComponent.defaultProps = {
   buttonLabel: i18next.t("Publish"),
   publishWithoutCommunity: false,
   actionState: undefined,
   publishModalExtraContent: undefined,
+  filesState: undefined,
 };
 
 const mapStateToProps = (state) => ({
   actionState: state.deposit.actionState,
-  numberOfFiles: Object.values(state.files.entries).length,
   publishModalExtraContent: state.deposit.config.publish_modal_extra,
+  filesState: state.files,
 });
 
 export const PublishButton = connect(

invenio_rdm_records/assets/semantic-ui/js/invenio_rdm_records/src/deposit/controls/PublishButton/SubmitReviewButton.js

@@ -41,13 +41,26 @@ class SubmitReviewButtonComponent extends Component {
     this.closeConfirmModal();
   };
 
-  isDisabled = (numberOfFiles, disableSubmitForReviewButton) => {
+  isDisabled = (disableSubmitForReviewButton, filesState) => {
     const { formik } = this.props;
     const { values, isSubmitting } = formik;
 
+    if (disableSubmitForReviewButton || isSubmitting) {
+      return true;
+    }
+
     const filesEnabled = _get(values, "files.enabled", false);
-    const filesMissing = filesEnabled && !numberOfFiles;
-    return isSubmitting || filesMissing || disableSubmitForReviewButton;
+    const filesArray = Object.values(filesState.entries ?? {});
+    const filesMissing = filesEnabled && filesArray.length === 0;
+
+    if (filesMissing) {
+      return true;
+    }
+
+    // All files must be finished uploading
+    const allCompleted = filesArray.every(file => file.status === "finished")
+
+    return !allCompleted;
   };
 
   render() {
@@ -59,8 +72,8 @@ class SubmitReviewButtonComponent extends Component {
       directPublish,
       formik,
       isRecordSubmittedForReview,
-      numberOfFiles,
       publishModalExtraContent,
+      filesState,
       ...ui
     } = this.props;
 
@@ -80,7 +93,7 @@ class SubmitReviewButtonComponent extends Component {
     return (
       <>
         <Button
-          disabled={this.isDisabled(numberOfFiles, disableSubmitForReviewButton)}
+          disabled={this.isDisabled(disableSubmitForReviewButton, filesState)}
           name="SubmitReview"
           onClick={this.openConfirmModal}
           positive={directPublish}
@@ -112,20 +125,20 @@ SubmitReviewButtonComponent.propTypes = {
   actionState: PropTypes.string,
   actionStateExtra: PropTypes.object.isRequired,
   community: PropTypes.object.isRequired,
-  numberOfFiles: PropTypes.number,
   disableSubmitForReviewButton: PropTypes.bool,
   isRecordSubmittedForReview: PropTypes.bool.isRequired,
   directPublish: PropTypes.bool,
   formik: PropTypes.object.isRequired,
   publishModalExtraContent: PropTypes.string,
+  filesState: PropTypes.object,
 };
 
 SubmitReviewButtonComponent.defaultProps = {
   actionState: undefined,
-  numberOfFiles: undefined,
   disableSubmitForReviewButton: undefined,
   publishModalExtraContent: undefined,
   directPublish: false,
+  filesState: undefined
 };
 
 const mapStateToProps = (state) => ({
@@ -135,8 +148,8 @@ const mapStateToProps = (state) => ({
   isRecordSubmittedForReview: state.deposit.record.status === DepositStatus.IN_REVIEW,
   disableSubmitForReviewButton:
     state.deposit.editorState.ui.disableSubmitForReviewButton,
-  numberOfFiles: Object.values(state.files.entries).length,
   publishModalExtraContent: state.deposit.config.publish_modal_extra,
+  filesState: state.files,
 });
 
 export const SubmitReviewButton = connect(