STSMACOM-796 Show successful toast notifications for Create and Edit actions in <ControlledVocab>

CHANGELOG.md

@@ -12,6 +12,7 @@
 * `<EditCustomFieldsSettings>` now passes the `entityType` when making PUT requests to `/custom-fields`. Refs FCFIELDS-44.
 * Added `tenant` prop to `<ControlledVocab>`. Refs STSMACOM-794.
 * Use the default match and search option in Advanced search when they are not entered. Refs STSMACOM-793.
+* Show successful toast notifications for Create and Edit actions in `<ControlledVocab>`. Refs STSMACOM-796.
 
 ## [9.0.0](https://github.com/folio-org/stripes-smart-components/tree/v9.0.0) (2023-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-smart-components/compare/v8.0.0...v9.0.0)

lib/ControlledVocab/ControlledVocab.js

@@ -21,6 +21,12 @@ import EditableList from '../EditableList';
 import css from './ControlledVocab.css';
 import makeRefdataActuatorsBoundTo from './actuators-refdata';
 
+const ACTIONS = {
+  CREATE: 'termCreated',
+  EDIT: 'termUpdated',
+  DELETE: 'termDeleted',
+};
+
 const getTenantFromRESTResource = (queryParams, pathComponents, resourceValues, logger, props) => {
   const {
     tenant,
@@ -114,9 +120,6 @@ class ControlledVocab extends React.Component {
         GET: PropTypes.func,
         reset: PropTypes.func,
       }),
-      tenant: PropTypes.shape({
-        replace: PropTypes.func,
-      }),
       values: PropTypes.shape({
         DELETE: PropTypes.func,
         GET: PropTypes.func,
@@ -159,7 +162,9 @@ class ControlledVocab extends React.Component {
         cannotDeleteTermHeader: "Cannot delete patron group",
         cannotDeleteTermMessage: "This patron group cannot be deleted, as it is in use by one or more records.",
         deleteEntry: "Delete patron group",
+        termCreated: "The patron group <b>{term}</b> was successfully <b>created</b>",
         termDeleted: "The patron group <b>{term}</b> was successfully <b>deleted</b>",
+        termUpdated: "The patron group <b>{term}</b> was successfully <b>updated</b>",
         termWillBeDeleted: "The patron group <b>{term}</b> will be <b>deleted.</b>"
       }
     */
@@ -169,6 +174,8 @@ class ControlledVocab extends React.Component {
       cannotDeleteTermMessage: PropTypes.string,
       deleteEntry: PropTypes.string,
       termDeleted: PropTypes.string,
+      termCreated: PropTypes.string,
+      termUpdated: PropTypes.string,
       termWillBeDeleted: PropTypes.string,
     }),
     /*
@@ -211,7 +218,8 @@ class ControlledVocab extends React.Component {
     //  !{limitParam:-limit}
     // in the manifest above.
     actuatorType: 'rest',
-    canCreate: true
+    canCreate: true,
+    translations: {},
   };
 
   constructor(props) {
@@ -274,7 +282,10 @@ class ControlledVocab extends React.Component {
   }
 
   onCreateItem(item) {
-    return this.props.mutator.values.POST(this.props.preCreateHook(item));
+    return this.props.mutator.values.POST(this.props.preCreateHook(item))
+      .then(() => {
+        this.showSuccessCallout(item, ACTIONS.CREATE);
+      });
   }
 
   onDeleteItem() {
@@ -284,7 +295,7 @@ class ControlledVocab extends React.Component {
 
     return this.props.mutator.values.DELETE({ id: selectedItem.id })
       .then(() => {
-        this.showDeletionSuccessCallout(selectedItem);
+        this.showSuccessCallout(selectedItem, ACTIONS.DELETE);
         this.deleteItemResolve();
       })
       .catch(() => {
@@ -296,7 +307,10 @@ class ControlledVocab extends React.Component {
 
   onUpdateItem(item) {
     this.props.mutator.activeRecord.update({ id: item.id });
-    return this.props.mutator.values.PUT(this.props.preUpdateHook(item));
+    return this.props.mutator.values.PUT(this.props.preUpdateHook(item))
+      .then(() => {
+        this.showSuccessCallout(item, ACTIONS.EDIT);
+      });
   }
 
   filteredRows(rows) {
@@ -343,28 +357,43 @@ class ControlledVocab extends React.Component {
     });
   }
 
-  showDeletionSuccessCallout(item) {
-    if (this.callout) {
-      const { termDeleted } = this.props.translations || {};
-      const message = (
-        termDeleted ?
-          <FormattedMessage
-            id={termDeleted}
-            values={{
-              term: item[this.state.primaryField],
-            }}
-          /> :
-          <FormattedMessage
-            id="stripes-smart-components.cv.termDeleted"
-            values={{
-              type: this.props.labelSingular,
-              term: item[this.state.primaryField],
-            }}
-          />
-      );
-
-      this.callout.sendCallout({ message });
+  showSuccessCallout(item, action) {
+    if (!this.callout) {
+      return;
     }
+
+    const {
+      termCreated,
+      termDeleted,
+      termUpdated,
+    } = this.props.translations;
+
+    const translationByAction = {
+      [ACTIONS.CREATE]: termCreated,
+      [ACTIONS.DELETE]: termDeleted,
+      [ACTIONS.EDIT]: termUpdated,
+    };
+
+    const translation = translationByAction[action];
+
+    const message = (
+      translation ?
+        <FormattedMessage
+          id={translation}
+          values={{
+            term: item[this.state.primaryField],
+          }}
+        /> :
+        <FormattedMessage
+          id={`stripes-smart-components.cv.${action}`}
+          values={{
+            type: this.props.labelSingular,
+            term: item[this.state.primaryField],
+          }}
+        />
+    );
+
+    this.callout.sendCallout({ message });
   }
 
   handlePaneFocus({ paneTitleRef }) {

lib/ControlledVocab/tests/ControlledVocab-test.js

@@ -15,6 +15,7 @@ import {
   including,
   MultiColumnList,
   MultiColumnListCell,
+  Callout,
 } from '@folio/stripes-testing';
 
 import mountComponent from './mountComponent';
@@ -59,7 +60,9 @@ describe('ControlledVocab', () => {
       it('should display Delete button', () => cm.find(Button('Delete')).exists());
 
       describe('click delete on confirmation modal', () => {
-        beforeEach(async () => {
+        beforeEach(async function () {
+          this.server.delete('location-units/institutions/:id', {}, 500);
+
           await Button('Delete').click();
         });
 
@@ -79,7 +82,9 @@ describe('ControlledVocab', () => {
     it('should have row count 5', () => cv.has({ rowCount: 5 }));
 
     describe('clicking Delete icon on first row', () => {
-      beforeEach(async () => {
+      beforeEach(async function () {
+        this.server.delete('location-units/institutions/:id', {}, 500);
+
         await firstRow.delete();
       });
 
@@ -99,6 +104,15 @@ describe('ControlledVocab', () => {
         it('cannot delete modal title', () => mo.has({ title: 'Cannot delete Institution' }));
       });
     });
+
+    describe('when deleting is successful', () => {
+      beforeEach(async () => {
+        await firstRow.delete();
+        await Button('Delete').click();
+      });
+
+      it('should display successful callout message', () => Callout('The Institution Bowdoin College was successfully deleted').exists());
+    });
   });
 
   describe('User can edit EditableListForm', () => {
@@ -167,6 +181,14 @@ describe('ControlledVocab', () => {
         it('should not display the error message', () => firstRow.find(TextField(including('name'))).is({ valid: true }));
 
         it('should enable Save button', () => firstRow.has({ saveDisabled: false }));
+
+        describe('when creating is successful', () => {
+          beforeEach(async () => {
+            await firstRow.save();
+          });
+
+          it('should display successful callout message', () => Callout('The Institution test was successfully created').exists());
+        });
       });
     });
 
@@ -200,6 +222,20 @@ describe('ControlledVocab', () => {
 
         it('should enable Delete button', () => cv.has({ deleteDisabled: false }));
       });
+
+      describe('when editing an item', () => {
+        beforeEach(async () => {
+          await firstRow.find(TextField(including('name'))).fillIn('Bowdoin College edit');
+        });
+
+        describe('when creating is successful', () => {
+          beforeEach(async () => {
+            await firstRow.save();
+          });
+
+          it('should display successful callout message', () => Callout('The Institution Bowdoin College edit was successfully updated').exists());
+        });
+      });
     });
   });
 

lib/ControlledVocab/tests/ControlledVocabErrors-test.js

@@ -18,7 +18,27 @@ describe('ControlledVocabErrors', () => {
 
   function mount() {
     // eslint-disable-next-line no-undef
-    beforeEach(() => mountComponent(true, server));
+    beforeEach(function () {
+      mountComponent(true, this.server);
+      this.server.post('location-units/institutions', {
+        'errors': [{
+          'message': 'Cannot create entity; name is not unique',
+          'code': 'name.duplicate',
+          'parameters': [{
+            'key': 'fieldLabel',
+            'value': 'name'
+          }]
+        },
+        {
+          'message': 'test',
+          'code': '-1',
+          'parameters': [{
+            'key': 'test',
+            'value': 'test'
+          }]
+        }]
+      }, 422);
+    });
     beforeEach(async () => {
       await cv.newButton().click();
       await cv.fillInputField('test');