Merge branch 'master' into erm-3798

Author: Jack-Golding

src/components/AgreementSections/Lines/Lines.js

@@ -33,7 +33,13 @@ const Lines = ({
   eresourcesFilterPath,
   handlers,
   id,
+  accessControlData = {}
 }) => {
+  const {
+    canEdit = true,
+    canEditLoading = false,
+  } = accessControlData;
+
   const { visibleColumns, toggleColumn } = useColumnManager('line-listing-column-manager', LINE_LISTING_COLUMN_MAPPING);
   const renderBadge = () => {
     const count = agreement?.agreementLinesCount;
@@ -52,6 +58,7 @@ const Lines = ({
             <IfPermission perm="ui-agreements.agreements.edit">
               <Button
                 buttonStyle="dropdownItem"
+                disabled={canEditLoading || !canEdit}
                 id="add-agreement-line-button"
                 to={urls.agreementLineCreate(agreement.id)}
               >

src/components/views/Agreement/Agreement.js

@@ -73,7 +73,9 @@ const Agreement = ({
     canEdit: true,
     canEditLoading: false,
     canDelete: true,
-    canDeleteLoading: false
+    canDeleteLoading: false,
+    canCreate: true,
+    canCreateLoading: false,
   }, // If not passed, assume everything is accessible and not loading...?
   components: {
     HelperComponent,
@@ -144,12 +146,12 @@ const Agreement = ({
   const getActionMenu = ({ onToggle }) => {
     const buttons = [];
 
-    if (stripes.hasPerm('ui-agreements.agreements.edit') && canEdit !== false) {
+    if (stripes.hasPerm('ui-agreements.agreements.edit')) {
       buttons.push(
         <Button
           key="clickable-dropdown-edit-agreement"
           buttonStyle="dropdownItem"
-          disabled={canEditLoading}
+          disabled={!canEdit || canEditLoading}
           id="clickable-dropdown-edit-agreement"
           onClick={handlers.onEdit}
         >
@@ -158,6 +160,9 @@ const Agreement = ({
           </Icon>
         </Button>
       );
+    }
+
+    if (stripes.hasPerm('ui-agreements.agreements.edit')) {
       buttons.push(
         <Button
           key="clickable-dropdown-duplicate-agreement"
@@ -193,19 +198,19 @@ const Agreement = ({
       );
     }
 
-    if (stripes.hasPerm('ui-agreements.agreements.delete') && canDelete !== false) {
+    if (stripes.hasPerm('ui-agreements.agreements.delete')) {
       buttons.push(
         <Button
           key="clickable-dropdown-delete-agreement"
           buttonStyle="dropdownItem"
-          disabled={canDeleteLoading}
+          disabled={!canDelete || canDeleteLoading}
           id="clickable-dropdown-delete-agreement"
           onClick={() => {
             setShowDeleteConfirmationModal(true);
             onToggle();
           }}
         >
-          <Icon icon={canEditLoading ? 'spinner-ellipsis' : 'trash'}>
+          <Icon icon={canDeleteLoading ? 'spinner-ellipsis' : 'trash'}>
             <FormattedMessage id="ui-agreements.delete" />
           </Icon>
         </Button>
@@ -313,7 +318,13 @@ const Agreement = ({
                 <AllPeriods {...getSectionProps('allPeriods')} />
                 {data.policies?.length > 0 && <AccessControl policies={data.policies} />}
                 {data.agreement?.contacts?.length > 0 && <InternalContacts {...getSectionProps('internalContacts')} />}
-                <Lines {...getSectionProps('lines')} />
+                <Lines
+                  {...getSectionProps('lines')}
+                  accessControlData={{
+                    canEdit,
+                    canEditLoading,
+                  }}
+                />
                 {controllingLicenses?.length > 0 && <ControllingLicense {...getSectionProps('controllingLicense')} />}
                 {futureLicenses?.length > 0 && <FutureLicenses {...getSectionProps('futureLicenses')} />}
                 {historicalLicenses?.length > 0 && <HistoricalLicenses {...getSectionProps('historicalLicenses')} />}

src/components/views/AgreementLine/AgreementLine.js

@@ -18,14 +18,22 @@ import {
   Row,
   checkScope,
   collapseAllSections,
-  expandAllSections
+  expandAllSections,
 } from '@folio/stripes/components';
 
 import { NotesSmartAccordion } from '@folio/stripes/smart-components';
 
-import { AccessControl, AccessControlErrorPane } from '@folio/stripes-erm-components';
+import {
+  AccessControl,
+  AccessControlErrorPane,
+} from '@folio/stripes-erm-components';
 
-import { Info, POLines, Coverage, Documents } from '../../AgreementLineSections';
+import {
+  Info,
+  POLines,
+  Coverage,
+  Documents,
+} from '../../AgreementLineSections';
 
 import { isExternal, urls } from '../../utilities';
 import DiscoverySettings from '../../DiscoverySettings';
@@ -38,7 +46,7 @@ const propTypes = {
     canEdit: PropTypes.bool,
     canEditLoading: PropTypes.bool,
     canDelete: PropTypes.bool,
-    canDeleteLoading: PropTypes.bool
+    canDeleteLoading: PropTypes.bool,
   }),
   components: PropTypes.shape({
     HelperComponent: PropTypes.elementType,
@@ -95,23 +103,20 @@ const AgreementLine = ({
     canEdit,
     canEditLoading,
     canDelete,
-    canDeleteLoading
+    canDeleteLoading,
   } = {
     canRead: true,
     canReadLoading: false,
     canEdit: true,
     canEditLoading: false,
     canDelete: true,
-    canDeleteLoading: false
+    canDeleteLoading: false,
   }, // If not passed, assume everything is accessible and not loading...?
-  components: {
-    TagButton,
-    HelperComponent,
-  },
+  components: { TagButton, HelperComponent },
   data: { line, policies, tagsLink, tagsInvalidateLinks },
   handlers,
   isLoading,
-  id
+  id,
 }) => {
   const stripes = useStripes();
   const paneProps = {
@@ -123,20 +128,18 @@ const AgreementLine = ({
 
   const accordionStatusRef = useRef();
 
-  const [showDeleteConfirmationModal, setShowDeleteConfirmationModal] = useState(false);
+  const [showDeleteConfirmationModal, setShowDeleteConfirmationModal] =
+    useState(false);
 
   if (isLoading || canReadLoading) return <LoadingPane data-loading {...paneProps} />;
 
   if (!canRead) {
-    return (
-      <AccessControlErrorPane
-        {...paneProps}
-      />
-    );
+    return <AccessControlErrorPane {...paneProps} />;
   }
 
   const resource = isExternal(line) ? line : (line.resource?._object ?? {});
-  const resourceName = resource.pti?.titleInstance.name ?? resource.reference_object?.label ?? '';
+  const resourceName =
+    resource.pti?.titleInstance.name ?? resource.reference_object?.label ?? '';
 
   // istanbul ignore next
   const shortcuts = [
@@ -150,10 +153,44 @@ const AgreementLine = ({
     },
     {
       name: 'collapseAllSections',
-      handler: (e) => collapseAllSections(e, accordionStatusRef)
-    }
+      handler: (e) => collapseAllSections(e, accordionStatusRef),
+    },
   ];
 
+  const getActionMenu = () => {
+    const buttons = [];
+    if (stripes.hasPerm('ui-agreements.agreements.edit')) {
+      buttons.push(
+        <Button
+          buttonStyle="dropdownItem"
+          disabled={!canEdit || canEditLoading}
+          id="clickable-dropdown-edit-agreement-line"
+          onClick={handlers.onEdit}
+        >
+          <Icon icon={canEditLoading ? 'spinner-ellipsis' : 'edit'}>
+            <FormattedMessage id="ui-agreements.agreements.edit" />
+          </Icon>
+        </Button>
+      );
+    }
+
+    if (stripes.hasPerm('ui-agreements.agreements.delete')) {
+      buttons.push(
+        <Button
+          buttonStyle="dropdownItem"
+          disabled={!canDelete || canDeleteLoading}
+          id="clickable-dropdown-delete-agreement-line"
+          onClick={() => setShowDeleteConfirmationModal(true)}
+        >
+          <Icon icon={canDeleteLoading ? 'spinner-ellipsis' : 'trash'}>
+            <FormattedMessage id="ui-agreements.delete" />
+          </Icon>
+        </Button>
+      );
+    }
+    return buttons?.length ? buttons : null;
+  };
+
   return (
     <HasCommand
       commands={shortcuts}
@@ -162,30 +199,7 @@ const AgreementLine = ({
     >
       <>
         <Pane
-          actionMenu={() => (stripes.hasPerm('ui-agreements.agreements.edit') ? (
-            <>
-              <Button
-                buttonStyle="dropdownItem"
-                disabled={canEditLoading || !canEdit}
-                id="clickable-dropdown-edit-agreement-line"
-                onClick={handlers.onEdit}
-              >
-                <Icon icon="edit">
-                  <FormattedMessage id="ui-agreements.agreements.edit" />
-                </Icon>
-              </Button>
-              <Button
-                buttonStyle="dropdownItem"
-                disabled={canDeleteLoading || !canDelete}
-                id="clickable-dropdown-delete-agreement-line"
-                onClick={() => setShowDeleteConfirmationModal(true)}
-              >
-                <Icon icon={canEditLoading ? 'spinner-ellipsis' : 'trash'}>
-                  <FormattedMessage id="ui-agreements.delete" />
-                </Icon>
-              </Button>
-            </>
-          ) : null)}
+          actionMenu={getActionMenu}
           appIcon={<AppIcon app="agreements" iconKey="agreementLine" />}
           lastMenu={
             <IfPermission perm="ui-agreements.agreements.edit">
@@ -198,7 +212,9 @@ const AgreementLine = ({
           {...paneProps}
         >
           <Info
-            isSuppressFromDiscoveryEnabled={handlers.isSuppressFromDiscoveryEnabled}
+            isSuppressFromDiscoveryEnabled={
+              handlers.isSuppressFromDiscoveryEnabled
+            }
             line={line}
             resource={resource}
           />