members and invitations: Add invite button to members tab, a11y fixes…

…, UI fixes

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

@@ -32,11 +32,13 @@ class RemoveMemberModal extends Component {
         headerText: i18next.t("Leave community"),
         bodyText: i18next.t("You are about to leave this community."),
         buttonText: i18next.t("Leave"),
+        buttonIcon: "log out",
       },
       [modalModeEnum.remove]: {
         headerText: i18next.t("Remove user"),
         bodyText: i18next.t("You are about to remove this user from this community."),
         buttonText: i18next.t("Remove"),
+        buttonIcon: "user delete",
       },
     };
   }
@@ -91,12 +93,16 @@ class RemoveMemberModal extends Component {
               loading={loading}
               onClick={this.onCloseHandler}
               floated="left"
+              icon="cancel"
+              labelPosition="left"
             />
             <Button
               negative
               content={content?.buttonText}
               loading={loading}
               onClick={this.onActionHandler}
+              icon={content?.buttonIcon}
+              labelPosition="left"
             />
           </Modal.Actions>
         </Modal>

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

@@ -6,7 +6,9 @@ import PropTypes from "prop-types";
 const DropdownContent = ({ title, description, selected }) => (
   <Grid>
     <Grid.Row>
-      <Grid.Column width={1}>{selected && <Icon name="checkmark" />}</Grid.Column>
+      <Grid.Column width={1} verticalAlign="middle">
+        {selected && <Icon className="positive" name="checkmark" />}
+      </Grid.Column>
       <Grid.Column width={14}>
         <Item.Group unstackable>
           <Item>

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

@@ -0,0 +1,69 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Button, Header, Icon, Segment, Grid } from "semantic-ui-react";
+import { withState } from "react-searchkit";
+import { i18next } from "@translations/invenio_communities/i18next";
+import { InvitationsContextProvider } from "../../api/invitations/InvitationsContextProvider";
+import { InvitationsMembersModalWithSearchKit } from "./invitationsModal/InvitationsMembersModal";
+
+class InvitationsEmptyResultsCmp extends Component {
+  render() {
+    const {
+      resetQuery,
+      extraContent,
+      queryString,
+      community,
+      communityGroupsEnabled,
+      rolesCanInvite
+    } = this.props;
+
+    return (
+      <Segment.Group>
+        <Segment as={Grid} className="computer only">
+          <Grid.Column width="13" />
+          <Grid.Column width="3">
+            <InvitationsContextProvider community={community}>
+              <InvitationsMembersModalWithSearchKit
+                rolesCanInvite={rolesCanInvite}
+                groupsEnabled={communityGroupsEnabled}
+                community={community}
+              />
+            </InvitationsContextProvider>
+          </Grid.Column>
+        </Segment>
+        <Segment placeholder textAlign="center">
+          <Header icon>
+            <Icon name="search" />
+            {i18next.t("No matching members found.")}
+          </Header>
+          <p>
+            {queryString && (
+              <em>
+                {i18next.t("Current search")} "{queryString}"
+              </em>
+            )}
+          </p>
+          <Button primary onClick={() => resetQuery()}>
+            {i18next.t("Clear query")}
+          </Button>
+          {extraContent}
+        </Segment>
+      </Segment.Group>
+    );
+  }
+}
+
+InvitationsEmptyResultsCmp.propTypes = {
+  resetQuery: PropTypes.func.isRequired,
+  queryString: PropTypes.string.isRequired,
+  rolesCanInvite: PropTypes.object.isRequired,
+  community: PropTypes.object.isRequired,
+  communityGroupsEnabled: PropTypes.bool.isRequired,
+  extraContent: PropTypes.node,
+};
+
+InvitationsEmptyResultsCmp.defaultProps = {
+  extraContent: null,
+}
+
+export const InvitationsEmptyResults = withState(InvitationsEmptyResultsCmp);

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

@@ -6,21 +6,37 @@
  * under the terms of the MIT License; see LICENSE file for more details.
  */
 
-import React from "react";
-import { Table } from "semantic-ui-react";
 import { i18next } from "@translations/invenio_communities/i18next";
+import React from "react";
 import PropTypes from "prop-types";
+import { Table } from "semantic-ui-react";
+import { InvitationsContextProvider } from "../../api/invitations/InvitationsContextProvider";
+import { InvitationsMembersModalWithSearchKit } from "./invitationsModal/InvitationsMembersModal";
 
-export const InvitationsResultsContainer = ({ results }) => {
+export const InvitationsResultsContainer = ({
+  results,
+  rolesCanInvite,
+  community,
+  communityGroupsEnabled,
+ }) => {
   return (
     <Table>
       <Table.Header>
         <Table.Row>
           <Table.HeaderCell width={6}>{i18next.t("Name")}</Table.HeaderCell>
-          <Table.HeaderCell width={2}>{i18next.t("Status")}</Table.HeaderCell>
-          <Table.HeaderCell width={2}>{i18next.t("Expires")}</Table.HeaderCell>
-          <Table.HeaderCell width={4}>{i18next.t("Role")}</Table.HeaderCell>
-          <Table.HeaderCell width={2} />
+          <Table.HeaderCell width={3}>{i18next.t("Status")}</Table.HeaderCell>
+          <Table.HeaderCell width={3}>{i18next.t("Expires")}</Table.HeaderCell>
+          <Table.HeaderCell width={3}>{i18next.t("Role")}</Table.HeaderCell>
+          <Table.HeaderCell width={1} textAlign="right">
+            <InvitationsContextProvider community={community}>
+              <InvitationsMembersModalWithSearchKit
+                rolesCanInvite={rolesCanInvite}
+                groupsEnabled={communityGroupsEnabled}
+                community={community}
+                triggerButtonSize="tiny"
+              />
+            </InvitationsContextProvider>
+          </Table.HeaderCell>
         </Table.Row>
       </Table.Header>
       <Table.Body>{results}</Table.Body>
@@ -30,4 +46,7 @@ export const InvitationsResultsContainer = ({ results }) => {
 
 InvitationsResultsContainer.propTypes = {
   results: PropTypes.array.isRequired,
+  rolesCanInvite: PropTypes.object.isRequired,
+  community: PropTypes.object.isRequired,
+  communityGroupsEnabled: PropTypes.bool.isRequired,
 };

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

@@ -20,7 +20,7 @@ export const InvitationsSearchBarElement = ({
 }) => {
   return (
     <Input
-      className="invitation-searchbar rel-ml-2"
+      className="invitation-searchbar"
       action={{
         icon: "search",
         onClick: onBtnSearchClick,
@@ -43,5 +43,9 @@ InvitationsSearchBarElement.propTypes = {
   onInputChange: PropTypes.func.isRequired,
   onKeyPress: PropTypes.func.isRequired,
   queryString: PropTypes.string.isRequired,
-  uiProps: PropTypes.object.isRequired,
+  uiProps: PropTypes.object,
 };
+
+InvitationsSearchBarElement.defaultProps = {
+  uiProps: null,
+}

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

@@ -9,9 +9,9 @@
 import { SearchAppResultsPane } from "@js/invenio_search_ui/components";
 import PropTypes from "prop-types";
 import React, { Component } from "react";
-import { InvitationsContextProvider } from "../../api/invitations/InvitationsContextProvider";
 import { RequestStatusFilter } from "@js/invenio_requests/search";
 import { Filters } from "../Filters";
+import { InvitationsContextProvider } from "../../api/invitations/InvitationsContextProvider";
 import { InvitationsMembersModalWithSearchKit } from "./invitationsModal/InvitationsMembersModal";
 import { SearchBar, Sort } from "react-searchkit";
 import { FilterLabels } from "../components/FilterLabels";
@@ -33,25 +33,46 @@ export class InvitationsSearchLayout extends Component {
 
     return (
       <>
+
         {/* auto column grid used instead of SUI grid for better searchbar width adjustment */}
         <div className="auto-column-grid">
-          <div className="flex">
-            <RequestStatusFilter keepFiltersOnUpdate />
+          <div className="flex column-mobile">
+            <div className="mobile only rel-mb-1 flex align-items-center justify-space-between">
+                <RequestStatusFilter keepFiltersOnUpdate />
+                <div>
+                  <InvitationsContextProvider community={community}>
+                    <InvitationsMembersModalWithSearchKit
+                      rolesCanInvite={rolesCanInvite}
+                      groupsEnabled={communityGroupsEnabled}
+                      community={community}
+                      />
+                  </InvitationsContextProvider>
+                </div>
+            </div>
+
+            <div className="tablet computer only only rel-mr-2">
+              <RequestStatusFilter keepFiltersOnUpdate />
+            </div>
             <SearchBar fluid />
           </div>
-          <div>
-            <SearchFilters customFilters={customFilters} />
-            <Sort values={config.sortOptions} />
-            <InvitationsContextProvider community={community}>
-              <InvitationsMembersModalWithSearchKit
-                rolesCanInvite={rolesCanInvite}
-                groupsEnabled={communityGroupsEnabled}
-                community={community}
-              />
-            </InvitationsContextProvider>
+          <div className="flex align-items-center column-mobile">
+            <div className="tablet only mr-5">
+              <InvitationsContextProvider community={community}>
+                <InvitationsMembersModalWithSearchKit
+                  rolesCanInvite={rolesCanInvite}
+                  groupsEnabled={communityGroupsEnabled}
+                  community={community}
+
+                />
+              </InvitationsContextProvider>
+            </div>
+
+            <div className="full-width flex align-items-center justify-end column-mobile">
+              <SearchFilters customFilters={customFilters} />
+              <Sort values={config.sortOptions} />
+            </div>
           </div>
         </div>
-
         <div className="rel-mb-1">
           <FilterLabels ignoreFilters={["is_open"]} />
         </div>

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

@@ -15,6 +15,7 @@ import { InvitationsResults } from "./InvitationsResults";
 import { InvitationsResultsContainer } from "./InvitationsResultsContainer";
 import { InvitationsSearchBarElement } from "./InvitationsSearchBarElement";
 import { InvitationsSearchLayout } from "./InvitationsSearchLayout";
+import { InvitationsEmptyResults } from "./InvitationsEmptyResults";
 import {
   SubmitStatus,
   DeleteStatus,
@@ -52,12 +53,27 @@ const InvitationsContextProvider = parametrize(ContextProvider, {
   community: community,
 });
 
+const InvitationsResultsContainerWithConfig = parametrize(InvitationsResultsContainer, {
+  rolesCanInvite: communitiesRolesCanInvite,
+  community: community,
+  communityGroupsEnabled: communityGroupsEnabled,
+});
+
+const InvitationsEmptyResultsWithCommunity = parametrize(InvitationsEmptyResults,
+  {
+    community: community,
+    communityGroupsEnabled: communityGroupsEnabled,
+    rolesCanInvite: communitiesRolesCanInvite,
+  }
+);
+
 const defaultComponents = {
+  [`${appName}.EmptyResults.element`]: InvitationsEmptyResultsWithCommunity,
   [`${appName}.ResultsList.item`]: InvitationResultItemWithConfig,
   [`${appName}.SearchApp.layout`]: InvitationsSearchLayoutWithConfig,
   [`${appName}.SearchBar.element`]: InvitationsSearchBarElement,
   [`${appName}.SearchApp.results`]: InvitationsResults,
-  [`${appName}.ResultsList.container`]: InvitationsResultsContainer,
+  [`${appName}.ResultsList.container`]: InvitationsResultsContainerWithConfig,
   [`${appName}.Sort.element`]: DropdownSort,
   [`RequestStatus.layout.submitted`]: SubmitStatus,
   [`RequestStatus.layout.deleted`]: DeleteStatus,