From 2814c755476494059159d920db9e4cc4f9c5e288 Mon Sep 17 00:00:00 2001
From: Zak Burke <zburke@ebsco.com>
Date: Tue, 7 May 2024 09:32:07 -0400
Subject: [PATCH] STSMACOM-836 omit "+ New" button when user lacks permission

Omit the "+ New" button, rather than disabling it, when the user lacks
permission. The convention is to omit unusable elements rather than to
disable them. An element is present-but-disabled only if taking some
other action available on the same page will enable it (e.g. this button
becomes disabled when another element is being edited or added, and then
becomes enabled again on save).

Refs STSMACOM-836
---
 CHANGELOG.md                         | 1 +
 lib/EditableList/EditableListForm.js | 7 +++----
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dfddc763e..254d08a5d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 * `<ControlledVocab>` - pass override headers to PUT method, new prop to hide "New" button. Refs STSMACOM-825.
 * `<SearchAndSort>` - re-position Advanced search button when search panel does not have enough space. Refs STSMACOM-830.
 * Extend `ViewMetadata` component to accept a child render function for custom rendering. Refs STSMACOM-828.
+* Omit (don't disable) "+ New" button in `<EditableList>` when user lacks permission. Refs STSMACOM-836.
 
 ## [9.1.1] (IN PROGRESS)
 
diff --git a/lib/EditableList/EditableListForm.js b/lib/EditableList/EditableListForm.js
index 1b926a228..3a0128c74 100644
--- a/lib/EditableList/EditableListForm.js
+++ b/lib/EditableList/EditableListForm.js
@@ -704,7 +704,6 @@ class EditableListForm extends React.Component {
     const adjustedColumnMapping = { ...columnMapping, ...actionColumnMapping };
     const activeRowIndex = this.state.status.findIndex(({ editing }) => editing);
     const isEditing = activeRowIndex !== -1;
-    const isCreateDisabled = isEditing || !canCreate;
 
     const cellFormatters = Object.assign({}, this.props.formatter, { actions: item => this.getActions(fields, item) });
     const contentData = this.getValues(fields);
@@ -713,7 +712,7 @@ class EditableListForm extends React.Component {
       {
         name: 'new',
         handler: () => {
-          if (!isCreateDisabled) this.onAdd(fields);
+          if (!isEditing) this.onAdd(fields);
         },
       },
       {
@@ -745,12 +744,12 @@ class EditableListForm extends React.Component {
           <Col xs>
             <Headline size="medium" margin="none">{this.props.label}</Headline>
           </Col>
-          { (editable && !hideCreateButton) &&
+          { (editable && canCreate && !hideCreateButton) &&
             <Col xs>
               <Row end="xs">
                 <Col xs>
                   <Button
-                    disabled={isCreateDisabled}
+                    disabled={isEditing}
                     marginBottom0
                     id={`clickable-add-${this.testingId}`}
                     onClick={() => this.onAdd(fields)}