feat: add member name to kommunity member removal modal

Author: Ducica

invenio_communities/assets/semantic-ui/js/invenio_communities/members/components/RemoveMemberModal.js

@@ -26,8 +26,14 @@ class RemoveMemberModal extends Component {
       error: "",
       loading: false,
     };
+  }
+
+  static contextType = ModalContext;
+
+  getContentMap = () => {
+    const { member } = this.context;
 
-    this.contentMap = {
+    return {
       [modalModeEnum.leave]: {
         headerText: i18next.t("Leave community"),
         bodyText: i18next.t("You are about to leave this community."),
@@ -36,14 +42,16 @@ class RemoveMemberModal extends Component {
       },
       [modalModeEnum.remove]: {
         headerText: i18next.t("Remove user"),
-        bodyText: i18next.t("You are about to remove this user from this community."),
+        bodyText: member
+          ? i18next.t("You are about to remove {{name}} from this community.", {
+              name: member.name,
+            })
+          : i18next.t("You are about to remove this user from this community."),
         buttonText: i18next.t("Remove"),
         buttonIcon: "user delete",
       },
     };
-  }
-
-  static contextType = ModalContext;
+  };
 
   onActionHandler = async () => {
     const { modalAction } = this.context;
@@ -69,7 +77,7 @@ class RemoveMemberModal extends Component {
     const { loading, error } = this.state;
     const { modalOpen, modalMode } = this.context;
 
-    const content = this.contentMap[modalMode];
+    const content = this.getContentMap()[modalMode];
 
     return (
       <Overridable
@@ -78,7 +86,7 @@ class RemoveMemberModal extends Component {
         modalMode={modalMode}
         modalAction={this.onActionHandler}
         closeModal={this.onCloseHandler}
-        contentMap={this.contentMap}
+        contentMap={this.getContentMap()}
       >
         <Modal open={modalOpen} role="dialog" aria-label={i18next.t("Remove user")}>
           <Modal.Header>{content?.headerText}</Modal.Header>

invenio_communities/assets/semantic-ui/js/invenio_communities/members/components/modal_manager/ModalContextProvider.js

@@ -18,11 +18,12 @@ export class ModalContextProvider extends Component {
       modalMode: null,
       modalAction: null,
       modalOpen: false,
+      member: null,
     };
   }
 
-  openModal = ({ modalAction, modalMode }) => {
-    this.setState({ modalOpen: true, modalAction, modalMode });
+  openModal = ({ modalAction, modalMode, member }) => {
+    this.setState({ modalOpen: true, modalAction, modalMode, member });
   };
 
   closeModal = () => {
@@ -31,7 +32,7 @@ export class ModalContextProvider extends Component {
 
   render() {
     const { children } = this.props;
-    const { modalMode, modalAction, modalOpen } = this.state;
+    const { modalMode, modalAction, modalOpen, member } = this.state;
 
     return (
       <ModalContext.Provider
@@ -41,6 +42,7 @@ export class ModalContextProvider extends Component {
           modalMode,
           modalAction,
           modalOpen,
+          member,
         }}
       >
         {children}

invenio_communities/assets/semantic-ui/js/invenio_communities/members/members/manager_view/ManagerMembersResultItem.js

@@ -55,7 +55,7 @@ export class ManagerMembersResultItem extends Component {
     const modalAction = () => api.removeMember(member);
     const modalMode = isRemoving ? modalModeEnum.remove : modalModeEnum.leave;
 
-    openModalCallback({ modalMode, modalAction });
+    openModalCallback({ modalMode, modalAction, member });
   };
 
   render() {