* refactor Modal for PendingInvitations

rdmo/core/assets/js/components/FileUploadButton.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { useDropzone } from 'react-dropzone'
 
-const FileUploadButton = ({ acceptedTypes, buttonProps, buttonText, onImportFile }) => {
+const FileUploadButton = ({ acceptedTypes, buttonProps, buttonLabel, onImportFile }) => {
   const { getRootProps, getInputProps } = useDropzone({
     accept: acceptedTypes,
     onDrop: acceptedFiles => {
@@ -16,7 +16,7 @@ const FileUploadButton = ({ acceptedTypes, buttonProps, buttonText, onImportFile
     <div {...getRootProps()}>
       <input {...getInputProps()} />
       <button className="btn" {...buttonProps}>
-        <i className="fa fa-download" aria-hidden="true"></i> {buttonText}
+        <i className="fa fa-download" aria-hidden="true"></i> {buttonLabel}
       </button>
     </div>
   )
@@ -25,7 +25,7 @@ const FileUploadButton = ({ acceptedTypes, buttonProps, buttonText, onImportFile
 FileUploadButton.propTypes = {
   acceptedTypes: PropTypes.arrayOf(PropTypes.string),
   buttonProps: PropTypes.object,
-  buttonText: PropTypes.string.isRequired,
+  buttonLabel: PropTypes.string.isRequired,
   onImportFile: PropTypes.func.isRequired,
 }
 

rdmo/core/assets/js/components/Modal.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Modal as BootstrapModal } from 'react-bootstrap'
+
+const Modal = ({ bsSize, buttonLabel, buttonProps, title, show, onClose, onSave, children }) => {
+  return (
+    <BootstrapModal bsSize={bsSize} className="element-modal" onHide={onClose} show={show}>
+      <BootstrapModal.Header closeButton>
+        <h2 className="modal-title">{title}</h2>
+      </BootstrapModal.Header>
+      <BootstrapModal.Body>
+        { children }
+      </BootstrapModal.Body>
+      <BootstrapModal.Footer>
+        <button type="button" className="btn btn-default" onClick={onClose}>
+          {gettext('Close')}
+        </button>
+        { onSave ?
+          <button type="button" className="btn btn-primary" onClick={onSave} {...buttonProps}>
+            {buttonLabel ?? gettext('Save')}
+          </button>
+          : null
+        }
+      </BootstrapModal.Footer>
+    </BootstrapModal>
+  )
+}
+
+Modal.propTypes = {
+  bsSize: PropTypes.oneOf(['lg', 'large', 'sm', 'small']),
+  buttonLabel: PropTypes.string,
+  buttonProps: PropTypes.object,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSave: PropTypes.func,
+  show: PropTypes.bool.isRequired,
+  title: PropTypes.string.isRequired,
+}
+
+export default Modal

rdmo/core/assets/js/components/index.js

@@ -1,4 +1,5 @@
 export { default as FileUploadButton } from './FileUploadButton'
 export { default as Link } from './Link'
 export { default as LinkButton } from './LinkButton'
+export { default as Modal } from './Modal'
 export * from './SearchAndFilter'

rdmo/projects/assets/js/components/helper/PendingInvitationsModal.js → rdmo/projects/assets/js/components/helper/PendingInvitations.js

@@ -1,20 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Modal } from 'react-bootstrap'
 
 const columnStyle = { color: '#666', width: '25%', paddingLeft: '10px' }
 const tableStyle = { width: '100%' }
 
-const PendingInvitationsModal = ({ invitations, onClose, show }) => {
+const PendingInvitations = ({ invitations }) => {
   const baseUrl = window.location.origin
 
   return (
-    <Modal show={show} onHide={onClose} className="element-modal">
-      <Modal.Header closeButton>
-        <h2 className="modal-title">{gettext('Pending invitations')}</h2>
-      </Modal.Header>
-      <Modal.Body>
-        { <table style={tableStyle}>
+        <table style={tableStyle}>
            <tbody>
             {invitations?.map(item => (
             <tr key={item.id}>
@@ -35,26 +29,17 @@ const PendingInvitationsModal = ({ invitations, onClose, show }) => {
             </tr>
           ))}
         </tbody>
-      </table> }
-      </Modal.Body>
-      <Modal.Footer>
-        <button type="button" className="btn btn-default" onClick={onClose}>
-          {gettext('Close')}
-        </button>
-      </Modal.Footer>
-    </Modal>
+      </table>
   )
 }
 
-PendingInvitationsModal.propTypes = {
+PendingInvitations.propTypes = {
   invitations: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.number.isRequired,
     project_title: PropTypes.string.isRequired,
     project: PropTypes.number.isRequired,
     role: PropTypes.string.isRequired,
   })),
-  onClose: PropTypes.func.isRequired,
-  show: PropTypes.bool.isRequired,
 }
 
-export default PendingInvitationsModal
+export default PendingInvitations

rdmo/projects/assets/js/components/helper/index.js

@@ -1,2 +1,2 @@
-export { default as PendingInvitationsModal } from './PendingInvitationsModal'
+export { default as PendingInvitations } from './PendingInvitations'
 export { default as Table } from './Table'

rdmo/projects/assets/js/components/main/Projects.js

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react'
 import PropTypes from 'prop-types'
-import { PendingInvitationsModal, Table } from '../helper'
-import { FileUploadButton, Link, SearchField } from 'rdmo/core/assets/js/components'
+import { PendingInvitations, Table } from '../helper'
+import { FileUploadButton, Link, Modal, SearchField } from 'rdmo/core/assets/js/components'
 import useModal from 'rdmo/core/assets/js/hooks/useModal'
 import { language } from 'rdmo/core/assets/js/utils'
 import { getTitlePath, userIsManager, DATE_OPTIONS, HEADER_FORMATTERS, SORTABLE_COLUMNS } from '../../utils'
@@ -13,6 +13,7 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
   const { myProjects } = config
 
   const [showModal, openModal, closeModal] = useModal()
+  const modalProps = {title: gettext('Pending invitations'), show: showModal, onClose: closeModal }
 
   const [showTopButton, setShowTopButton] = useState(false)
 
@@ -156,7 +157,7 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
           <FileUploadButton
            acceptedTypes={['application/xml', 'text/xml']}
            buttonProps={{'className': 'btn btn-link'}}
-           buttonText={gettext('Import project')}
+           buttonLabel={gettext('Import project')}
            onImportFile={handleImport}
           />
         </div>
@@ -192,11 +193,9 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
         sortableColumns={SORTABLE_COLUMNS}
         visibleColumns={visibleColumns}
       />
-      <PendingInvitationsModal
-          invitations={invites}
-          show={showModal}
-          onClose={closeModal}
-      />
+      <Modal {...modalProps}>
+        <PendingInvitations invitations={invites} />
+      </Modal>
     </>
   )
 }