UIPFU-89: add Cancel and New button to support Routing list featu…

…re and fix select all toggle button issue
folio-org · May 3, 2024 · 45d111f · 45d111f
1 parent d6a7aea
commit 45d111f
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 [Full Changelog](https://github.com/folio-org/ui-plugin-find-user/compare/v7.1.0...v7.1.1)
 
 * Fix Select User Modal with User Assignment Status Filters pagination issue. Refs UIPFU-87.
+* Add `Cancel` and `New` button to support Routing list feature and fix select all toggle button issue. Refs UIPFU-89.
 
 ## [7.1.0](https://github.com/folio-org/ui-plugin-find-user/tree/v7.1.0) (2024-03-20)
 [Full Changelog](https://github.com/folio-org/ui-plugin-find-user/compare/v7.0.0...v7.1.0)

diff --git a/src/UserSearchModal.js b/src/UserSearchModal.js
@@ -39,6 +39,7 @@ class UserSearchModal extends Component {
       }),
     }),
     tenantId: PropTypes.string,
+    showCreateUserButton: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -91,6 +92,7 @@ class UserSearchModal extends Component {
       initialSelectedUsers,
       tenantId,
       stripes,
+      showCreateUserButton = false,
     } = this.props;
 
     return (
@@ -116,8 +118,10 @@ class UserSearchModal extends Component {
             {...viewProps}
             onSaveMultiple={this.passUsersOut}
             onSelectRow={this.passUserOut}
+            onClose={this.closeModal}
             isMultiSelect={Boolean(selectUsers)}
             initialSelectedUsers={initialSelectedUsers}
+            showCreateUserButton={showCreateUserButton}
           />}
         </UserSearchContainer>
       </Modal>

diff --git a/src/UserSearchView.js b/src/UserSearchView.js
@@ -24,6 +24,7 @@ import {
   SearchAndSortSearchButton as FilterPaneToggle,
 } from '@folio/stripes/smart-components';
 
+import { CREATE_USER_URL } from './constants';
 import filterConfig, { filterConfigWithUserAssignedStatus } from './filterConfig';
 import Filters from './Filters';
 
@@ -58,6 +59,7 @@ class UserSearchView extends React.Component {
     idPrefix: PropTypes.string,
     isMultiSelect: PropTypes.bool,
     onSelectRow: PropTypes.func,
+    onClose: PropTypes.func,
     onSaveMultiple: PropTypes.func,
     onComponentWillUnmount: PropTypes.func,
     queryGetter: PropTypes.func,
@@ -67,6 +69,7 @@ class UserSearchView extends React.Component {
     data: PropTypes.object,
     onNeedMoreData: PropTypes.func,
     visibleColumns: PropTypes.arrayOf(PropTypes.string),
+    showCreateUserButton: PropTypes.bool,
     resultOffset: PropTypes.shape({
       replace: PropTypes.func.isRequired,
     }),
@@ -146,7 +149,7 @@ class UserSearchView extends React.Component {
     this.setState((state, props) => {
       const isAllChecked = !state.isAllChecked;
       const { data: { users } } = props;
-      const checkedMap = reduceUsersToMap(users, isAllChecked);
+      const checkedMap = reduceUsersToMap(users.records, isAllChecked);
 
       return {
         checkedMap,
@@ -196,6 +199,8 @@ class UserSearchView extends React.Component {
       isMultiSelect,
       resultOffset,
       initialSelectedUsers,
+      onClose,
+      showCreateUserButton,
     } = this.props;
     const { checkedMap, isAllChecked } = this.state;
 
@@ -258,6 +263,17 @@ class UserSearchView extends React.Component {
       email: user => get(user, ['personal', 'email']),
     };
 
+    const createUserButton = (
+      <Button
+        data-test-find-users-modal-save-multiple
+        marginBottom0
+        to={CREATE_USER_URL}
+        buttonStyle="primary"
+      >
+        <FormattedMessage id="ui-plugin-find-user.modal.button.new" />
+      </Button>
+    );
+
     return (
       <>
         <div
@@ -357,6 +373,7 @@ class UserSearchView extends React.Component {
                           paneSub={resultPaneSub}
                           defaultWidth="fill"
                           padContent={false}
+                          lastMenu={showCreateUserButton && createUserButton}
                         >
                           <MultiColumnList
                             visibleColumns={builtVisibleColumns}
@@ -405,23 +422,28 @@ class UserSearchView extends React.Component {
         {
           isMultiSelect && (
             <div className={css.UserSearchViewFooter}>
-              <>
-                <div>
-                  <FormattedMessage
-                    id="ui-plugin-find-user.modal.total"
-                    values={{ count: checkedUsersLength }}
-                  />
-                </div>
-                <Button
-                  data-test-find-users-modal-save-multiple
-                  marginBottom0
-                  onClick={this.saveMultiple}
-                  disabled={disabled}
-                  buttonStyle="primary"
-                >
-                  <FormattedMessage id="ui-plugin-find-user.modal.save" />
-                </Button>
-              </>
+              <Button
+                data-test-find-users-modal-save-multiple
+                marginBottom0
+                onClick={onClose}
+              >
+                <FormattedMessage id="ui-plugin-find-user.modal.button.cancel" />
+              </Button>
+              <div>
+                <FormattedMessage
+                  id="ui-plugin-find-user.modal.total"
+                  values={{ count: checkedUsersLength }}
+                />
+              </div>
+              <Button
+                data-test-find-users-modal-save-multiple
+                marginBottom0
+                onClick={this.saveMultiple}
+                disabled={disabled}
+                buttonStyle="primary"
+              >
+                <FormattedMessage id="ui-plugin-find-user.modal.save" />
+              </Button>
             </div>
           )
         }

diff --git a/src/constants.js b/src/constants.js
@@ -3,3 +3,4 @@ export const UAS = 'uas';
 export const ASSIGNED_FILTER_KEY = 'uas.Assigned';
 export const UNASSIGNED_FILTER_KEY = 'uas.Unassigned';
 export const ASSIGNED = 'Assigned';
+export const CREATE_USER_URL = '/users/create';
diff --git a/translations/ui-plugin-find-user/en.json b/translations/ui-plugin-find-user/en.json
@@ -6,6 +6,8 @@
   "modal.close": "Close",
   "modal.save": "Save",
   "modal.total": "Total selected: {count}",
+  "modal.button.new": "New",
+  "modal.button.cancel": "Cancel",
   "searchButton.title": "Find User",
   "information.patronGroup": "Patron group",
   "active": "Active",