['Modal' popups] fixup for popups which couldn't be closed via clicking outside (#5801)

frontend/src/components/dialog/change-repo-password-dialog.js

@@ -96,7 +96,7 @@ class ChangeRepoPasswordDialog extends React.Component {
     const { repoName, toggleDialog } = this.props;
 
     return (
-      <Modal isOpen={true} centered={true} style={{height: 'auto'}}>
+      <Modal isOpen={true} style={{height: 'auto'}} toggle={toggleDialog}>
         <ModalHeader toggle={toggleDialog}>
           <span>
             {Utils.generateDialogTitle(gettext('Change Password of Library {placeholder}'), repoName)}

frontend/src/components/dialog/copy-move-dirent-progress-dialog.js

@@ -23,7 +23,7 @@ class CopyMoveDirentProgressDialog extends React.Component {
       textAlign: 'left',
     };
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>{title}</ModalHeader>
         <ModalBody style={{minHeight: '80px'}}>
           <div className="progress" style={{height: '40px'}}>

frontend/src/components/dialog/lib-decrypt-dialog.js

@@ -54,7 +54,7 @@ class LibDecryptDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.toggle}>
         <ModalBody>
           <button type="button" className="close" onClick={this.toggle}><span aria-hidden="true">×</span></button>
           <Form className="lib-decrypt-form text-center">

frontend/src/components/dialog/lib-history-setting-dialog.js

@@ -110,7 +110,7 @@ class LibHistorySetting extends React.Component {
   render() {
     const itemName = this.props.itemName;
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
           <span className="op-target" title={itemName}>{itemName}</span>{' '}
           {gettext('History Setting')}

frontend/src/components/dialog/lib-old-files-auto-del-dialog.js

@@ -93,7 +93,7 @@ class LibOldFilesAutoDelDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
           {gettext('Auto deletion')}
         </ModalHeader>

frontend/src/components/dialog/list-created-files-dialog.js

@@ -19,7 +19,7 @@ class ListCreatedFileDialog extends React.Component {
   render() {
     let activity = this.props.activity;
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>{gettext('Created Files')}</ModalHeader>
         <ModalBody>
           <Table>

frontend/src/components/dialog/list-repo-drafts-dialog.js

@@ -57,7 +57,7 @@ class ListRepoDraftsDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>{gettext('Drafts')}</ModalHeader>
         <ModalBody className="dialog-list-container">
           <table>

frontend/src/components/dialog/new-wiki-dialog.js

@@ -50,7 +50,7 @@ class NewWikiDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} autoFocus={false}>
+      <Modal isOpen={true} autoFocus={false} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>{gettext('New Wiki')}</ModalHeader>
         <ModalBody>
           <label className="form-label">{gettext('Name')}</label>

frontend/src/components/dialog/org-admin-invite-user-dialog.js

@@ -27,7 +27,7 @@ class InviteUserDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.props.toggle}>
         <ModalHeader toggle={this.props.toggle}>{gettext('Invite user')}</ModalHeader>
         <ModalBody>
           <p>{gettext('Send the invitation link to the others, and they will be able to join the organization via scanning the QR code.')}</p>

frontend/src/components/dialog/reset-encrypted-repo-password-dialog.js

@@ -42,7 +42,7 @@ class ResetEncryptedRepoPasswordDialog extends React.Component {
     let message = gettext('New password has been sent to your email {mail}. Please check your mailbox. If you don’t receive the password, please check if your email address is properly configured.').replace('{mail}', user_email);
 
     return (
-      <Modal isOpen={true}  centered={true}>
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
           {gettext('Reset library password')}
         </ModalHeader>

frontend/src/components/dialog/save-shared-dir-dialog.js

@@ -51,7 +51,7 @@ class SaveSharedDirDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} className="sf-save-file">
+      <Modal isOpen={true} className="sf-save-file" toggle={this.props.toggleCancel}>
         <ModalHeader toggle={this.props.toggleCancel}>{gettext('Save to:')}</ModalHeader>
         <ModalBody>
           <FileChooser

frontend/src/components/dialog/share-repo-dialog.js

@@ -117,7 +117,7 @@ class ShareRepoDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>{gettext('Select libraries to share')}</ModalHeader>
         <ModalBody className="dialog-list-container">
           <table>

frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-add-member-dialog.js

@@ -35,7 +35,7 @@ class SysAdminGroupAddMemberDialog extends React.Component {
   render() {
     const { isSubmitBtnDisabled } = this.state;
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.props.toggle}>
         <ModalHeader toggle={this.props.toggle}>{gettext('Add Member')}</ModalHeader>
         <ModalBody>
           <UserSelect

frontend/src/components/dialog/sysadmin-dialog/sysadmin-group-transfer-dialog.js

@@ -39,7 +39,7 @@ class SysAdminTransferGroupDialog extends React.Component {
     const groupName = '<span class="op-target">' + Utils.HTMLescape(this.props.groupName) +'</span>';
     const msg = gettext('Transfer Group {placeholder} to').replace('{placeholder}', groupName);
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
           <span dangerouslySetInnerHTML={{__html: msg}}></span>
         </ModalHeader>

frontend/src/components/dialog/sysadmin-dialog/sysadmin-lib-history-setting-dialog.js

@@ -108,7 +108,7 @@ class SysAdminLibHistorySettingDialog extends React.Component {
   render() {
     const itemName = this.props.itemName;
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
           <span className="op-target" title={itemName}>{itemName}</span>{' '}
           {gettext('History Setting')}

frontend/src/components/dialog/sysadmin-dialog/sysadmin-repo-transfer-dialog.js

@@ -34,7 +34,7 @@ class SysAdminRepoTransferDialog extends React.Component {
     let msg = gettext('Transfer Library {library_name}');
     let message = msg.replace('{library_name}', innerSpan);
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.props.toggle}>
         <ModalHeader toggle={this.props.toggle}>
           <div dangerouslySetInnerHTML={{__html:message}} />
         </ModalHeader>

frontend/src/components/dialog/transfer-dialog.js

@@ -66,7 +66,7 @@ class TransferDialog extends React.Component {
       canTransferToDept = this.props.canTransferToDept;
     }
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>
           <span>{gettext('Transfer Library {library_name}').replace('{library_name}', itemName)}</span>
         </ModalHeader>

frontend/src/components/dialog/wiki-select-dialog.js

@@ -67,7 +67,7 @@ class WikiSelectDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true}>
+      <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>{gettext('Publish a Library')}</ModalHeader>
         <ModalBody className="dialog-list-container">
           <table>