deposit: check permission and set disable tooltip for publish button

Author: rekt-hard

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

@@ -1,6 +1,7 @@
 // This file is part of Invenio-RDM-Records
 // Copyright (C) 2020-2023 CERN.
 // Copyright (C) 2020-2022 Northwestern University.
+// Copyright (C)      2024 Graz University of Technology.
 //
 // Invenio-RDM-Records is free software; you can redistribute it and/or modify it
 // under the terms of the MIT License; see LICENSE file for more details.
@@ -12,7 +13,7 @@ import _omit from "lodash/omit";
 import PropTypes from "prop-types";
 import React, { Component } from "react";
 import { connect } from "react-redux";
-import { Button, Icon, Message, Modal } from "semantic-ui-react";
+import { Button, Icon, Message, Modal, Popup } from "semantic-ui-react";
 import {
   DepositFormSubmitActions,
   DepositFormSubmitContext,
@@ -40,8 +41,8 @@ class PublishButtonComponent extends Component {
     this.closeConfirmModal();
   };
 
-  isDisabled = (values, isSubmitting, filesState) => {
-    if (isSubmitting) {
+  isDisabled = (values, isSubmitting, filesState, hasPublishPermission) => {
+    if (isSubmitting || !hasPublishPermission) {
       return true;
     }
 
@@ -59,6 +60,19 @@ class PublishButtonComponent extends Component {
     return !allCompleted;
   };
 
+  hasPermission = (permissions) => {
+    return permissions.can_publish;
+  };
+
+  getDisabledButtonPopupText = (hasPublishPermission) => {
+    let text = i18next.t("Required fields are missing");
+
+    if (!hasPublishPermission) {
+      text = i18next.t("You don't have permission to publish");
+    }
+    return text;
+  };
+
   render() {
     const {
       actionState,
@@ -67,26 +81,46 @@ class PublishButtonComponent extends Component {
       publishWithoutCommunity,
       formik,
       publishModalExtraContent,
+      permissions,
       ...ui
     } = this.props;
     const { isConfirmModalOpen } = this.state;
     const { values, isSubmitting, handleSubmit } = formik;
 
     const uiProps = _omit(ui, ["dispatch"]);
 
+    const hasPublishPermission = this.hasPermission(permissions);
+    const publishDisabled = this.isDisabled(
+      values,
+      isSubmitting,
+      filesState,
+      hasPublishPermission
+    );
+
+    // only used when button is disabled
+    const popupText = this.getDisabledButtonPopupText(hasPublishPermission);
+
     return (
       <>
-        <Button
-          disabled={this.isDisabled(values, isSubmitting, filesState)}
-          name="publish"
-          onClick={this.openConfirmModal}
-          positive
-          icon="upload"
-          loading={isSubmitting && actionState === DRAFT_PUBLISH_STARTED}
-          labelPosition="left"
-          content={buttonLabel}
-          {...uiProps}
-          type="button" // needed so the formik form doesn't handle it as submit button i.e enable HTML validation on required input fields
+        <Popup
+          disabled={!publishDisabled}
+          content={popupText}
+          trigger={
+            <span>
+              <Button
+                disabled={publishDisabled}
+                name="publish"
+                onClick={this.openConfirmModal}
+                positive
+                icon="upload"
+                loading={isSubmitting && actionState === DRAFT_PUBLISH_STARTED}
+                labelPosition="left"
+                content={buttonLabel}
+                {...uiProps}
+                type="button" // needed so the formik form doesn't handle it as submit button i.e enable HTML validation on required input fields
+              />
+            </span>
+          }
         />
         {isConfirmModalOpen && (
           <Modal
@@ -139,6 +173,7 @@ PublishButtonComponent.propTypes = {
   formik: PropTypes.object.isRequired,
   publishModalExtraContent: PropTypes.string,
   filesState: PropTypes.object,
+  permissions: PropTypes.object.isRequired,
 };
 
 PublishButtonComponent.defaultProps = {
@@ -153,6 +188,7 @@ const mapStateToProps = (state) => ({
   actionState: state.deposit.actionState,
   publishModalExtraContent: state.deposit.config.publish_modal_extra,
   filesState: state.files,
+  permissions: state.deposit.permissions,
 });
 
 export const PublishButton = connect(

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

@@ -29,6 +29,7 @@ class SubmitReviewOrPublishComponent extends Component {
       showDirectPublishButton,
       showSubmitForReviewButton,
       record,
+      permissions,
       ...ui
     } = this.props;
     const { modalOpen } = this.state;
@@ -61,13 +62,14 @@ class SubmitReviewOrPublishComponent extends Component {
           />
           <PublishButton
             buttonLabel={i18next.t("Publish without community")}
+            permissions={permissions}
             publishWithoutCommunity
             {...ui}
           />
         </>
       );
     } else {
-      result = <PublishButton {...ui} />;
+      result = <PublishButton permissions={permissions} {...ui} />;
     }
     return result;
   }
@@ -80,6 +82,7 @@ SubmitReviewOrPublishComponent.propTypes = {
   showDirectPublishButton: PropTypes.bool.isRequired,
   showSubmitForReviewButton: PropTypes.bool.isRequired,
   record: PropTypes.object.isRequired,
+  permissions: PropTypes.object.isRequired,
 };
 
 SubmitReviewOrPublishComponent.defaultProps = {