Merge pull request #1130 from folio-org/UICIRC-1064

UICIRC-1064: Fix that Save & close button is missing in the circulation forms
folio-org · Mar 14, 2024 · d71bec3 · d71bec3
2 parents 87d8f6b + ef4cb1d
commit d71bec3
Show file tree

Hide file tree

Showing 14 changed files with 155 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@
 * UI tests replacement with RTL/Jest for `CirculationRules.js`. Refs UICIRC-958.
 * Create a new permission "Settings (Circulation): Can view staff slips". Refs UICIRC-848.
 * Add `displaySummary` token for patron notice templates and for staff slips templates. Refs UICIRC-1059.
+* Fix that Save & close button is missing in the circulation forms. Refs UICIRC-1064.
 
 ## [9.0.4](https://github.com/folio-org/ui-circulation/tree/v9.0.4) (2024-02-22)
 [Full Changelog](https://github.com/folio-org/ui-circulation/compare/v9.0.3...v9.0.4)

diff --git a/src/settings/FinePolicy/FinePolicyForm.js b/src/settings/FinePolicy/FinePolicyForm.js
@@ -80,8 +80,7 @@ class FinePolicyForm extends React.Component {
       : formatMessage({ id: 'ui-circulation.settings.finePolicy.createEntryLabel' });
 
     const footerPaneProps = {
-      pristine,
-      submitting,
+      isSaveButtonDisabled: pristine || submitting,
       onCancel,
     };
 

diff --git a/src/settings/FinePolicy/FinePolicyForm.test.js b/src/settings/FinePolicy/FinePolicyForm.test.js
@@ -117,8 +117,7 @@ describe('FinePolicyForm', () => {
 
   it('should execute "FooterPane" with passed props', () => {
     expect(FooterPane).toHaveBeenCalledWith({
-      pristine: true,
-      submitting: false,
+      isSaveButtonDisabled: true,
       onCancel: mockedOnCancel,
     }, {});
   });
@@ -173,4 +172,27 @@ describe('FinePolicyForm', () => {
       }), {});
     });
   });
+
+  describe('when form value was changed', () => {
+    const defaultTestProps = {
+      ...defaultProps,
+      pristine: false,
+      submitting: false,
+    };
+
+    beforeEach(() => {
+      render(
+        <FinePolicyForm
+          {...defaultTestProps}
+        />
+      );
+    });
+
+    it('should render FooterPane with correct props', () => {
+      expect(FooterPane).toHaveBeenCalledWith({
+        isSaveButtonDisabled: false,
+        onCancel: mockedOnCancel,
+      }, {});
+    });
+  });
 });
diff --git a/src/settings/LoanPolicy/LoanPolicyForm.js b/src/settings/LoanPolicy/LoanPolicyForm.js
@@ -137,8 +137,7 @@ class LoanPolicyForm extends React.Component {
     const schedules = this.generateScheduleOptions();
     const panelTitle = policy.id ? policy.name : formatMessage({ id: 'ui-circulation.settings.loanPolicy.createEntryLabel' });
     const footerPaneProps = {
-      pristine,
-      submitting,
+      isSaveButtonDisabled: pristine || submitting,
       onCancel,
     };
 

diff --git a/src/settings/LoanPolicy/LoanPolicyForm.test.js b/src/settings/LoanPolicy/LoanPolicyForm.test.js
@@ -193,8 +193,7 @@ describe('LoanPolicyForm', () => {
 
   it('should execute "FooterPane" with passed props', () => {
     expect(FooterPane).toHaveBeenCalledWith({
-      pristine: true,
-      submitting: false,
+      isSaveButtonDisabled: true,
       onCancel: mockedOnCancel,
     }, {});
   });
@@ -325,4 +324,27 @@ describe('LoanPolicyForm', () => {
       schedulesTest(testIds.renewalsSection);
     });
   });
+
+  describe('when form value was changed', () => {
+    const defaultTestProps = {
+      ...defaultProps,
+      pristine: false,
+      submitting: false,
+    };
+
+    beforeEach(() => {
+      render(
+        <LoanPolicyForm
+          {...defaultTestProps}
+        />
+      );
+    });
+
+    it('should render FooterPane with correct props', () => {
+      expect(FooterPane).toHaveBeenCalledWith({
+        isSaveButtonDisabled: false,
+        onCancel: mockedOnCancel,
+      }, {});
+    });
+  });
 });
diff --git a/src/settings/LostItemFeePolicy/LostItemFeePolicyForm.js b/src/settings/LostItemFeePolicy/LostItemFeePolicyForm.js
@@ -72,8 +72,7 @@ class LostItemFeePolicyForm extends React.Component {
 
     const panelTitle = policy.id ? policy.name : formatMessage({ id: 'ui-circulation.settings.lostItemFee.entryLabel' });
     const footerPaneProps = {
-      pristine,
-      submitting,
+      isSaveButtonDisabled: pristine || submitting,
       onCancel,
     };
 

diff --git a/src/settings/LostItemFeePolicy/LostItemFeePolicyForm.test.js b/src/settings/LostItemFeePolicy/LostItemFeePolicyForm.test.js
@@ -110,8 +110,7 @@ describe('LostItemFeePolicyForm', () => {
 
   it('should execute "FooterPane" with passed props', () => {
     expect(FooterPane).toHaveBeenCalledWith({
-      pristine: true,
-      submitting: false,
+      isSaveButtonDisabled: true,
       onCancel: mockedOnCancel,
     }, {});
   });
@@ -166,4 +165,27 @@ describe('LostItemFeePolicyForm', () => {
       }), {});
     });
   });
+
+  describe('when form value was changed', () => {
+    const defaultTestProps = {
+      ...defaultProps,
+      pristine: false,
+      submitting: false,
+    };
+
+    beforeEach(() => {
+      render(
+        <LostItemFeePolicyForm
+          {...defaultTestProps}
+        />
+      );
+    });
+
+    it('should render FooterPane with correct props', () => {
+      expect(FooterPane).toHaveBeenCalledWith({
+        isSaveButtonDisabled: false,
+        onCancel: mockedOnCancel,
+      }, {});
+    });
+  });
 });
diff --git a/src/settings/NoticePolicy/NoticePolicyForm.js b/src/settings/NoticePolicy/NoticePolicyForm.js
@@ -67,8 +67,7 @@ class NoticePolicyForm extends React.Component {
       : <FormattedMessage id="ui-circulation.settings.noticePolicy.createEntryLabel" />;
 
     const footerPaneProps = {
-      pristine,
-      submitting,
+      isSaveButtonDisabled: pristine || submitting,
       onCancel,
     };
 

diff --git a/src/settings/NoticePolicy/NoticePolicyForm.test.js b/src/settings/NoticePolicy/NoticePolicyForm.test.js
@@ -146,8 +146,7 @@ describe('NoticePolicyForm', () => {
 
   it('should execute "FooterPane" with passed props', () => {
     expect(FooterPane).toHaveBeenCalledWith({
-      pristine: true,
-      submitting: false,
+      isSaveButtonDisabled: true,
       onCancel: mockedOnCancel,
     }, {});
   });
@@ -219,4 +218,27 @@ describe('NoticePolicyForm', () => {
       expect(screen.getByText(labelIds.createEntryLabel)).toBeInTheDocument();
     });
   });
+
+  describe('when form value was changed', () => {
+    const defaultTestProps = {
+      ...defaultProps,
+      pristine: false,
+      submitting: false,
+    };
+
+    beforeEach(() => {
+      render(
+        <NoticePolicyForm
+          {...defaultTestProps}
+        />
+      );
+    });
+
+    it('should render FooterPane with correct props', () => {
+      expect(FooterPane).toHaveBeenCalledWith({
+        isSaveButtonDisabled: false,
+        onCancel: mockedOnCancel,
+      }, {});
+    });
+  });
 });
diff --git a/src/settings/PatronNotices/PatronNoticeForm.js b/src/settings/PatronNotices/PatronNoticeForm.js
@@ -100,12 +100,15 @@ const PatronNoticeForm = (props) => {
       onCancel,
     } = props;
 
+    const footerPaneProps = {
+      isSaveButtonDisabled: pristine || submitting,
+      onCancel,
+    };
+
     return (
       <FooterPane
         data-testid="patronNoticeFooterPane"
-        pristine={pristine}
-        submitting={submitting}
-        onCancel={onCancel}
+        {...footerPaneProps}
       />
     );
   };

diff --git a/src/settings/PatronNotices/PatronNoticeForm.test.js b/src/settings/PatronNotices/PatronNoticeForm.test.js
@@ -87,7 +87,7 @@ describe('PatronNoticeForm', () => {
     };
   });
   const testPristineValue = true;
-  const testSubmittingValue = true;
+  const testSubmittingValue = false;
   const testHandleSubmit = jest.fn();
   const testOnCancel = jest.fn();
   const mockedStripes = {
@@ -151,10 +151,9 @@ describe('PatronNoticeForm', () => {
       });
     });
 
-    it('should render FooterPane component', () => {
+    it('should render FooterPane with correct props', () => {
       componentPropsCheck(FooterPane, testIds.patronNoticeFooterPane, {
-        pristine: testPristineValue,
-        submitting: testSubmittingValue,
+        isSaveButtonDisabled: true,
         onCancel: testOnCancel,
       });
     });
@@ -248,6 +247,7 @@ describe('PatronNoticeForm', () => {
           }
         };
       });
+
       render(
         <PatronNoticeForm
           {...defaultTestProps}
@@ -280,4 +280,27 @@ describe('PatronNoticeForm', () => {
       expect(screen.queryByTestId(testIds.form)).not.toBeInTheDocument();
     });
   });
+
+  describe('when form value was changed', () => {
+    const defaultProps = {
+      ...defaultTestProps,
+      pristine: false,
+      submitting: false,
+    };
+
+    beforeEach(() => {
+      render(
+        <PatronNoticeForm
+          {...defaultProps}
+        />
+      );
+    });
+
+    it('should render FooterPane with correct props', () => {
+      componentPropsCheck(FooterPane, testIds.patronNoticeFooterPane, {
+        isSaveButtonDisabled: false,
+        onCancel: testOnCancel,
+      });
+    });
+  });
 });
diff --git a/src/settings/RequestPolicy/RequestPolicyForm.js b/src/settings/RequestPolicy/RequestPolicyForm.js
@@ -203,8 +203,7 @@ class RequestPolicyForm extends React.Component {
       ? policy.name
       : formatMessage({ id: 'ui-circulation.settings.requestPolicy.createEntryLabel' });
     const footerPaneProps = {
-      pristine,
-      submitting,
+      isSaveButtonDisabled: pristine || submitting,
       onCancel,
     };
 

diff --git a/src/settings/RequestPolicy/RequestPolicyForm.test.js b/src/settings/RequestPolicy/RequestPolicyForm.test.js
@@ -151,10 +151,9 @@ describe('RequestPolicyForm', () => {
       }, {});
     });
 
-    it('"FooterPane" should be executed with correct props', () => {
+    it('should executed FooterPane with correct props', () => {
       expect(FooterPane).toHaveBeenCalledWith({
-        pristine: true,
-        submitting: false,
+        isSaveButtonDisabled: true,
         onCancel,
       }, {});
     });
@@ -211,13 +210,17 @@ describe('RequestPolicyForm', () => {
       getState: jest.fn(() => ({ values: initialValues })),
       change: jest.fn(),
     };
-
+    const defaultTestProps = {
+      ...defaultProps,
+      pristine: false,
+      submitting: false,
+    };
     const testPolicy = new RequestPolicy(initialValues);
 
     beforeEach(() => {
       render(
         <RequestPolicyForm
-          {...defaultProps}
+          {...defaultTestProps}
           initialValues={initialValues}
           form={form}
           location={{
@@ -254,6 +257,13 @@ describe('RequestPolicyForm', () => {
       expect(form.change).toHaveBeenCalledWith(event.target.name, event.target.value);
     });
 
+    it('should executed FooterPane with correct props', () => {
+      expect(FooterPane).toHaveBeenCalledWith({
+        isSaveButtonDisabled: false,
+        onCancel,
+      }, {});
+    });
+
     describe('validation check', () => {
       const catchFunction = jest.fn();
 

diff --git a/src/settings/components/FooterPane/FooterPane.js b/src/settings/components/FooterPane/FooterPane.js
@@ -45,8 +45,12 @@ const FooterPane = (props) => {
 
 FooterPane.propTypes = {
   isSaveButtonDisabled: PropTypes.bool.isRequired,
-  isSaveButtonAvailable: PropTypes.bool.isRequired,
+  isSaveButtonAvailable: PropTypes.bool,
   onCancel: PropTypes.func.isRequired,
 };
 
+FooterPane.defaultProps = {
+  isSaveButtonAvailable: true,
+};
+
 export default FooterPane;