pass onClose props

packages/app/src/client/services/AdminUserGroupDetailContainer.js

@@ -36,7 +36,7 @@ export default class AdminUserGroupDetailContainer extends Container {
 
       childUserGroupRelations: [], // TODO 85062: fetch data on init (findRelationsByGroupIds) For child group list users
       // relatedPages: [], // For page list
-      isUserGroupUserModalOpen: false,
+      // isUserGroupUserModalOpen: false,
       isAlsoMailSearched: false,
       isAlsoNameSearched: false,
     };
@@ -45,8 +45,8 @@ export default class AdminUserGroupDetailContainer extends Container {
 
     this.switchIsAlsoMailSearched = this.switchIsAlsoMailSearched.bind(this);
     this.switchIsAlsoNameSearched = this.switchIsAlsoNameSearched.bind(this);
-    this.openUserGroupUserModal = this.openUserGroupUserModal.bind(this);
-    this.closeUserGroupUserModal = this.closeUserGroupUserModal.bind(this);
+    // this.openUserGroupUserModal = this.openUserGroupUserModal.bind(this);
+    // this.closeUserGroupUserModal = this.closeUserGroupUserModal.bind(this);
   }
 
   /**
@@ -71,22 +71,22 @@ export default class AdminUserGroupDetailContainer extends Container {
     this.setState({ isAlsoNameSearched: !this.state.isAlsoNameSearched });
   }
 
-  /**
-   * open a modal
-   *
-   * @memberOf AdminUserGroupDetailContainer
-   */
-  async openUserGroupUserModal() {
-    await this.setState({ isUserGroupUserModalOpen: true });
-  }
-
-  /**
-   * close a modal
-   *
-   * @memberOf AdminUserGroupDetailContainer
-   */
-  async closeUserGroupUserModal() {
-    await this.setState({ isUserGroupUserModalOpen: false });
-  }
+  // /**
+  //  * open a modal
+  //  *
+  //  * @memberOf AdminUserGroupDetailContainer
+  //  */
+  // async openUserGroupUserModal() {
+  //   await this.setState({ isUserGroupUserModalOpen: true });
+  // }
+
+  // /**
+  //  * close a modal
+  //  *
+  //  * @memberOf AdminUserGroupDetailContainer
+  //  */
+  // async closeUserGroupUserModal() {
+  //   await this.setState({ isUserGroupUserModalOpen: false });
+  // }
 
 }

packages/app/src/components/Admin/UserGroupDetail/UserGroupDetailPage.tsx

@@ -193,14 +193,6 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
     }
   }, [currentUserGroup?.name, currentUserGroupId, mutateUserGroupRelations, xss]);
 
-  const openUserGroupUserModal = useCallback(() => {
-    setIsUserGroupUserModalShown(true);
-  }, []);
-
-  const closeUserGroupUserModal = useCallback(() => {
-    setIsUserGroupUserModalShown(false);
-  }, []);
-
   const showUpdateModal = useCallback((group: IUserGroupHasId) => {
     setUpdateModalShown(true);
     setSelectedUserGroup(group);
@@ -360,7 +352,7 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
         />
       </div>
       <h2 className="admin-setting-header mt-4">{t('admin:user_group_management.user_list')}</h2>
-      <UserGroupUserTable userGroup={currentUserGroup} userGroupRelati onClickPlusBtn={openUserGroupUserModal} />
+      <UserGroupUserTable userGroup={currentUserGroup} userGroupRelati onClickPlusBtn={() => setIsUserGroupUserModalShown(true)} />
       <UserGroupUserModal
         isOpen={isUserGroupUserModalShown}
         userGroup={currentUserGroup}
@@ -368,6 +360,7 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
         onClickAddUserBtn={addUserByUsername}
         onSearchApplicableUsers={fetchApplicableUsers}
         onChangeSearchType={switchSearchType}
+        onClose={() => setIsUserGroupUserModalShown(false)}
       />
 
       <h2 className="admin-setting-header mt-4">{t('admin:user_group_management.child_group_list')}</h2>

packages/app/src/components/Admin/UserGroupDetail/UserGroupUserModal.tsx

@@ -24,17 +24,18 @@ type Props = {
   onClickAddUserBtn: () => void,
   onSearchApplicableUsers: () => void,
   onChangeSearchType: (searchType: SearchType) => void
+  onClose: () => void,
 }
 
 const UserGroupUserModal = (props: Props) => {
   const { t } = useTranslation();
   const {
-    isOpen, adminUserGroupDetailContainer, userGroup, searchType, onClickAddUserBtn, onSearchApplicableUsers, onChangeSearchType,
+    isOpen, adminUserGroupDetailContainer, userGroup, searchType, onClickAddUserBtn, onSearchApplicableUsers, onChangeSearchType, onClose,
   } = props;
 
   return (
-    <Modal isOpen={isOpen} toggle={adminUserGroupDetailContainer.closeUserGroupUserModal}>
-      <ModalHeader tag="h4" toggle={adminUserGroupDetailContainer.closeUserGroupUserModal} className="bg-info text-light">
+    <Modal isOpen={isOpen} toggle={onClose}>
+      <ModalHeader tag="h4" toggle={onClose} className="bg-info text-light">
         {t('admin:user_group_management.add_modal.add_user') }
       </ModalHeader>
       <ModalBody>