STSMACOM-836 omit "+ New" button when user lacks permission (#1477)

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

@@ -25,6 +25,7 @@
 * `DateRangeFilter` - add the optional `hideCalendarButton` property to hide the calendar icon button; add error message for invalid YYYY format. Refs STSMACOM-855.
 * Display `System` user when there is no `updatedByUserId` field in metadata. Refs STSMACOM-858.
 * Fix `<DateRangeFilter>` only shows an error in one of failed inputs. Fixes STSMACOM-857.
+* Omit (don't disable) "+ New" button in `<EditableList>` when user lacks permission. Refs STSMACOM-836.
 
 ## [9.1.3](https://github.com/folio-org/stripes-smart-components/tree/v9.1.3) (2024-05-06)
 [Full Changelog](https://github.com/folio-org/stripes-smart-components/compare/v9.1.2...v9.1.3)

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)}