invitations: rework for the groups invitations

* deprecate COMMUNITIES_GROUPS_ENABLED (moved to USERS_RESOURCES_GROUPS_ENABLED)
* closes inveniosoftware/invenio-app-rdm#2592

invenio_communities/assets/semantic-ui/js/invenio_communities/api/index.js

@@ -7,3 +7,5 @@
 export { CommunityInvitationsApi } from "./invitations/api";
 export { CommunityApi } from "./CommunityApi";
 export { CommunityMembersApi } from "./members/api";
+export { GroupsApi } from "./GroupsApi";
+export { UsersApi } from "./UsersApi";

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

@@ -13,14 +13,12 @@ import PropTypes from "prop-types";
 import React, { Component } from "react";
 import { Trans } from "react-i18next";
 import { Button, Form, Modal } from "semantic-ui-react";
-import { UsersApi } from "../../api/UsersApi";
 import { MembersSearchBar } from "../invitations/invitationsModal/MemberSearchBar";
 import { SelectedMembers } from "./bulk_actions/SelectedMembers";
 
 export class SearchWithRoleSelection extends Component {
   constructor(props) {
     super(props);
-    this.usersApi = new UsersApi();
     this.state = {
       role: undefined,
       selected: {},
@@ -69,8 +67,12 @@ export class SearchWithRoleSelection extends Component {
       messageComponent,
       existingEntities,
       existingEntitiesDescription,
+      fetchMembers,
+      searchType,
+      searchBarPlaceholder,
+      doneButtonTipType,
     } = this.props;
-    const { selected, loading, error } = this.state;
+    const { selected, loading, error, role } = this.state;
     const selectedCount = Object.keys(selected).length;
 
     return (
@@ -88,11 +90,11 @@ export class SearchWithRoleSelection extends Component {
               <MembersSearchBar
                 existingEntities={existingEntities}
                 existingEntitiesDescription={existingEntitiesDescription}
-                fetchMembers={this.usersApi.getUsers}
+                fetchMembers={fetchMembers}
                 selectedMembers={selected}
                 handleChange={this.addEntityToSelected}
-                searchType="user"
-                placeholder={i18next.t("Search by email, full name or username")}
+                searchType={searchType}
+                placeholder={searchBarPlaceholder}
               />
               <label className="helptext rel-mt-1">{searchBarTooltip}</label>
             </Form.Field>
@@ -102,7 +104,15 @@ export class SearchWithRoleSelection extends Component {
               onOptionChangeCallback={this.handleRoleUpdate}
               checked={false}
             />
-            <Form.Field>{messageComponent}</Form.Field>
+            {searchType === "group" || searchType === "role" ? (
+              <i>
+                {i18next.t(
+                  "Note: upon addition, selected groups will have access to the record without any kind of notification."
+                )}
+              </i>
+            ) : (
+              <Form.Field>{messageComponent}</Form.Field>
+            )}
           </Form>
         </Modal.Content>
         <Modal.Actions>
@@ -117,14 +127,14 @@ export class SearchWithRoleSelection extends Component {
           />
           {selectedCount > 0 && (
             <Trans key="entitiesSelected" count={selectedCount}>
-              {doneButtonTip} {{ selectedCount }} users
+              {doneButtonTip} {{ selectedCount }} {doneButtonTipType}
             </Trans>
           )}
           <Button
             content={doneButtonText}
             labelPosition="left"
             loading={loading}
-            disabled={loading || selectedCount === 0}
+            disabled={loading || selectedCount === 0 || role === undefined}
             icon={doneButtonIcon}
             primary
             onClick={this.handleActionClick}
@@ -142,16 +152,20 @@ SearchWithRoleSelection.propTypes = {
   onSuccessCallback: PropTypes.func.isRequired,
   searchBarTitle: PropTypes.object,
   searchBarTooltip: PropTypes.string,
+  searchBarPlaceholder: PropTypes.string,
   doneButtonText: PropTypes.string,
   doneButtonIcon: PropTypes.string,
   doneButtonTip: PropTypes.string,
+  doneButtonTipType: PropTypes.string,
   radioLabel: PropTypes.string,
   selectedItemsHeader: PropTypes.string,
   message: PropTypes.string,
   messageComponent: PropTypes.object,
   notify: PropTypes.bool,
   existingEntities: PropTypes.array.isRequired,
   existingEntitiesDescription: PropTypes.string,
+  fetchMembers: PropTypes.func.isRequired,
+  searchType: PropTypes.oneOf(["group", "role", "user"]).isRequired,
 };
 
 SearchWithRoleSelection.defaultProps = {
@@ -160,6 +174,8 @@ SearchWithRoleSelection.defaultProps = {
   doneButtonText: "",
   doneButtonIcon: "",
   doneButtonTip: "",
+  doneButtonTipType: "",
+  searchBarPlaceholder: "",
   radioLabel: "",
   selectedItemsHeader: "",
   message: "",

invenio_communities/assets/semantic-ui/js/invenio_communities/members/invitations/InvitationsEmptyResults.js

@@ -13,7 +13,7 @@ class InvitationsEmptyResultsCmp extends Component {
       extraContent,
       queryString,
       community,
-      communityGroupsEnabled,
+      groupsEnabled,
       rolesCanInvite,
     } = this.props;
 
@@ -25,7 +25,7 @@ class InvitationsEmptyResultsCmp extends Component {
             <InvitationsContextProvider community={community}>
               <InvitationsMembersModalWithSearchKit
                 rolesCanInvite={rolesCanInvite}
-                groupsEnabled={communityGroupsEnabled}
+                groupsEnabled={groupsEnabled}
                 community={community}
               />
             </InvitationsContextProvider>
@@ -58,7 +58,7 @@ InvitationsEmptyResultsCmp.propTypes = {
   queryString: PropTypes.string.isRequired,
   rolesCanInvite: PropTypes.object.isRequired,
   community: PropTypes.object.isRequired,
-  communityGroupsEnabled: PropTypes.bool.isRequired,
+  groupsEnabled: PropTypes.bool.isRequired,
   extraContent: PropTypes.node,
 };
 

invenio_communities/assets/semantic-ui/js/invenio_communities/members/invitations/InvitationsResultsContainer.js

@@ -17,7 +17,7 @@ export const InvitationsResultsContainer = ({
   results,
   rolesCanInvite,
   community,
-  communityGroupsEnabled,
+  groupsEnabled,
 }) => {
   return (
     <Table>
@@ -31,7 +31,7 @@ export const InvitationsResultsContainer = ({
             <InvitationsContextProvider community={community}>
               <InvitationsMembersModalWithSearchKit
                 rolesCanInvite={rolesCanInvite}
-                groupsEnabled={communityGroupsEnabled}
+                groupsEnabled={groupsEnabled}
                 community={community}
                 triggerButtonSize="tiny"
               />
@@ -48,5 +48,5 @@ InvitationsResultsContainer.propTypes = {
   results: PropTypes.array.isRequired,
   rolesCanInvite: PropTypes.object.isRequired,
   community: PropTypes.object.isRequired,
-  communityGroupsEnabled: PropTypes.bool.isRequired,
+  groupsEnabled: PropTypes.bool.isRequired,
 };

invenio_communities/assets/semantic-ui/js/invenio_communities/members/invitations/InvitationsSearchLayout.js

@@ -19,14 +19,8 @@ import { SearchFilters } from "@js/invenio_search_ui/components/SearchFilters";
 
 export class InvitationsSearchLayout extends Component {
   render() {
-    const {
-      config,
-      roles,
-      rolesCanInvite,
-      community,
-      communityGroupsEnabled,
-      appName,
-    } = this.props;
+    const { config, roles, rolesCanInvite, community, groupsEnabled, appName } =
+      this.props;
 
     const filtersClass = new Filters(roles);
     const customFilters = filtersClass.getInvitationFilters();
@@ -42,7 +36,7 @@ export class InvitationsSearchLayout extends Component {
                 <InvitationsContextProvider community={community}>
                   <InvitationsMembersModalWithSearchKit
                     rolesCanInvite={rolesCanInvite}
-                    groupsEnabled={communityGroupsEnabled}
+                    groupsEnabled={groupsEnabled}
                     community={community}
                   />
                 </InvitationsContextProvider>
@@ -59,7 +53,7 @@ export class InvitationsSearchLayout extends Component {
               <InvitationsContextProvider community={community}>
                 <InvitationsMembersModalWithSearchKit
                   rolesCanInvite={rolesCanInvite}
-                  groupsEnabled={communityGroupsEnabled}
+                  groupsEnabled={groupsEnabled}
                   community={community}
                 />
               </InvitationsContextProvider>
@@ -86,7 +80,7 @@ InvitationsSearchLayout.propTypes = {
   roles: PropTypes.array.isRequired,
   rolesCanInvite: PropTypes.object.isRequired,
   community: PropTypes.object.isRequired,
-  communityGroupsEnabled: PropTypes.bool.isRequired,
+  groupsEnabled: PropTypes.bool.isRequired,
   appName: PropTypes.string,
 };
 

invenio_communities/assets/semantic-ui/js/invenio_communities/members/invitations/index.js

@@ -33,7 +33,7 @@ const permissions = JSON.parse(dataAttr.permissions);
 
 const appName = "InvenioCommunities.InvitationsSearch";
 
-const communityGroupsEnabled = JSON.parse(dataAttr.communityGroupsEnabled);
+const groupsEnabled = JSON.parse(dataAttr.groupsEnabled);
 
 const InvitationResultItemWithConfig = parametrize(InvitationResultItem, {
   config: { rolesCanInvite: communitiesRolesCanInvite },
@@ -45,7 +45,7 @@ const InvitationsSearchLayoutWithConfig = parametrize(InvitationsSearchLayout, {
   rolesCanInvite: communitiesRolesCanInvite,
   community: community,
   permissions: permissions,
-  communityGroupsEnabled: communityGroupsEnabled,
+  groupsEnabled: groupsEnabled,
   appName: appName,
 });
 
@@ -56,12 +56,12 @@ const InvitationsContextProvider = parametrize(ContextProvider, {
 const InvitationsResultsContainerWithConfig = parametrize(InvitationsResultsContainer, {
   rolesCanInvite: communitiesRolesCanInvite,
   community: community,
-  communityGroupsEnabled: communityGroupsEnabled,
+  groupsEnabled: groupsEnabled,
 });
 
 const InvitationsEmptyResultsWithCommunity = parametrize(InvitationsEmptyResults, {
   community: community,
-  communityGroupsEnabled: communityGroupsEnabled,
+  groupsEnabled: groupsEnabled,
   rolesCanInvite: communitiesRolesCanInvite,
 });
 

invenio_communities/assets/semantic-ui/js/invenio_communities/members/invitations/invitationsModal/GroupTabPane.js

@@ -15,7 +15,7 @@ import { i18next } from "@translations/invenio_communities/i18next";
 import { MembersSearchBar } from "./MemberSearchBar";
 import { GroupsApi } from "../../../api/GroupsApi";
 import { Trans } from "react-i18next";
-import { RichEditor, http, withCancel } from "react-invenio-forms";
+import { http, withCancel } from "react-invenio-forms";
 
 export class GroupTabPane extends Component {
   constructor(props) {
@@ -79,7 +79,7 @@ export class GroupTabPane extends Component {
 
   render() {
     const { roleOptions, modalClose } = this.props;
-    const { selectedMembers, loading, error, existingIds } = this.state;
+    const { selectedMembers, loading, error, existingIds, role } = this.state;
     const selectedCount = Object.keys(selectedMembers).length;
     const client = new GroupsApi();
 
@@ -90,7 +90,7 @@ export class GroupTabPane extends Component {
           <SelectedMembers
             updateSelectedMembers={this.updateSelectedMembers}
             selectedMembers={selectedMembers}
-            headerText={i18next.t("Selected groups")}
+            headerText={i18next.t("No selected groups")}
           />
           <Form>
             <Form.Field>
@@ -112,12 +112,11 @@ export class GroupTabPane extends Component {
                 onOptionChangeCallback={this.handleRoleUpdate}
               />
             </Form.Field>
-            <Form.Field disabled>
-              <>
-                <label>{i18next.t("Message")}</label>
-                <RichEditor />
-              </>
-            </Form.Field>
+            <i>
+              {i18next.t(
+                "Note: upon addition, selected groups will become community members immediately without any kind of notification or invitation approval."
+              )}
+            </i>
           </Form>
         </div>
         <Modal.Actions>
@@ -140,7 +139,7 @@ export class GroupTabPane extends Component {
             content={i18next.t("Add")}
             labelPosition="left"
             loading={loading}
-            disabled={loading || selectedCount === 0}
+            disabled={loading || selectedCount === 0 || role === undefined}
             icon="checkmark"
             primary
             onClick={this.handleActionClick}

invenio_communities/assets/semantic-ui/js/invenio_communities/members/invitations/invitationsModal/InvitationsMembersModal.js

@@ -16,6 +16,7 @@ import { InvitationsContext } from "../../../api/invitations/InvitationsContextP
 import { GroupTabPane } from "./GroupTabPane";
 import { SearchWithRoleSelection } from "../../components/SearchWithRoleSelection";
 import { RichEditor, withCancel, http } from "react-invenio-forms";
+import { UsersApi } from "../../../api";
 
 export class InvitationsMembersModal extends Component {
   constructor(props) {
@@ -75,6 +76,7 @@ export class InvitationsMembersModal extends Component {
     const { activeIndex, message, existingIds } = this.state;
     const { api } = this.context;
     const userRoles = rolesCanInvite["user"];
+    const client = new UsersApi();
 
     const peopleTab = {
       menuItem: (
@@ -98,6 +100,8 @@ export class InvitationsMembersModal extends Component {
         >
           <SearchWithRoleSelection
             key="members-users"
+            searchType="user"
+            fetchMembers={client.getUsers}
             roleOptions={userRoles}
             modalClose={this.handleCloseModal}
             action={api.createInvite}
@@ -109,23 +113,25 @@ export class InvitationsMembersModal extends Component {
             doneButtonText={i18next.t("Invite")}
             doneButtonIcon="checkmark"
             radioLabel={i18next.t("Role")}
-            selectedItemsHeader={i18next.t("Selected members")}
+            selectedItemsHeader={i18next.t("No selected members")}
             message={message}
             messageComponent={
               <>
-                <label>{i18next.t("Message")}</label>
+                <label>{i18next.t("Invitation message")}</label>
                 <RichEditor
                   onBlur={(event, editor) => {
                     this.updateMessage(editor.getContent());
                   }}
                 />
               </>
             }
-            doneButtonTip="You are about to invite"
+            doneButtonTip={i18next.t("You are about to invite")}
+            doneButtonTipType={i18next.t("users")}
             existingEntities={existingIds}
             existingEntitiesDescription={i18next.t(
               "Already a member or invitation pending"
             )}
+            searchBarPlaceholder={i18next.t("Search by email, full name or username")}
           />
         </Tab.Pane>
       ),