[#855] 4) membership request flow frontend integration

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

@@ -35,4 +35,12 @@ export class CommunityLinksExtractor {
     }
     return this.#urls.invitations;
   }
+
+  url(key) {
+    const urlOfKey = this.#urls[key];
+    if (!urlOfKey) {
+      throw TypeError(`"${key}" link missing from resource.`);
+    }
+    return urlOfKey;
+  }
 }

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

@@ -0,0 +1,29 @@
+// This file is part of Invenio-communities
+// Copyright (C) 2024 Northwestern University.
+//
+// Invenio-communities is free software; you can redistribute it and/or modify it
+// under the terms of the MIT License; see LICENSE file for more details.
+
+export class RequestLinksExtractor {
+  #urls;
+
+  constructor(request) {
+    if (!request?.links) {
+      throw TypeError("Request resource links are undefined");
+    }
+    this.#urls = request.links;
+  }
+
+  url(key) {
+    const urlOfKey = this.#urls[key];
+    if (!urlOfKey) {
+      throw TypeError(`"${key}" link missing from resource.`);
+    }
+    return urlOfKey;
+  }
+
+  get userDiscussionUrl() {
+    const result = this.url("self_html");
+    return result.replace("/requests/", "/me/requests/");
+  }
+}

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

@@ -0,0 +1,26 @@
+// This file is part of Invenio-communities
+// Copyright (C) 2022 CERN.
+// Copyright (C) 2024 Northwestern University.
+//
+// Invenio-communities is free software; you can redistribute it and/or modify it
+// under the terms of the MIT License; see LICENSE file for more details.
+
+import { CommunityLinksExtractor } from "../CommunityLinksExtractor";
+import { http } from "react-invenio-forms";
+
+/**
+ * API Client for community membership requests.
+ *
+ * It mostly uses the API links passed to it from initial community.
+ *
+ */
+export class CommunityMembershipRequestsApi {
+  constructor(community) {
+    this.community = community;
+    this.linksExtractor = new CommunityLinksExtractor(community);
+  }
+
+  requestMembership = async (payload) => {
+    return await http.post(this.linksExtractor.url("membership_requests"), payload);
+  };
+}

invenio_communities/assets/semantic-ui/js/invenio_communities/community/header/RequestMembershipButton.js

@@ -0,0 +1,148 @@
+/*
+ * This file is part of Invenio.
+ * Copyright (C) 2024 CERN.
+ * Copyright (C) 2024 Northwestern University.
+ *
+ * Invenio is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import { i18next } from "@translations/invenio_communities/i18next";
+import { Formik } from "formik";
+import PropTypes from "prop-types";
+import React, { useState } from "react";
+import { TextAreaField } from "react-invenio-forms";
+import { Button, Form, Grid, Message, Modal } from "semantic-ui-react";
+
+import { CommunityMembershipRequestsApi } from "../../api/membershipRequests/api";
+import { communityErrorSerializer } from "../../api/serializers";
+import { RequestLinksExtractor } from "../../api/RequestLinksExtractor";
+
+export function RequestMembershipModal(props) {
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const { community, isOpen, onClose } = props;
+
+  const onSubmit = async (values, { setSubmitting, setFieldError }) => {
+    /**Submit callback called from Formik. */
+    setSubmitting(true);
+
+    const client = new CommunityMembershipRequestsApi(community);
+
+    try {
+      const response = await client.requestMembership(values);
+      const linksExtractor = new RequestLinksExtractor(response.data);
+      window.location.href = linksExtractor.userDiscussionUrl;
+    } catch (error) {
+      setSubmitting(false);
+
+      console.log("Error");
+      console.dir(error);
+
+      const { errors, message } = communityErrorSerializer(error);
+
+      if (message) {
+        setErrorMsg(message);
+      }
+
+      if (errors) {
+        errors.forEach(({ field, messages }) => setFieldError(field, messages[0]));
+      }
+    }
+  };
+
+  return (
+    <Formik
+      initialValues={{
+        message: "",
+      }}
+      onSubmit={onSubmit}
+    >
+      {({ values, isSubmitting, handleSubmit }) => (
+        <Modal
+          open={isOpen}
+          onClose={onClose}
+          size="small"
+          closeIcon
+          closeOnDimmerClick={false}
+        >
+          <Modal.Header>{i18next.t("Request Membership")}</Modal.Header>
+          <Modal.Content>
+            <Message hidden={errorMsg === ""} negative className="flashed">
+              <Grid container>
+                <Grid.Column mobile={16} tablet={12} computer={8} textAlign="left">
+                  <strong>{errorMsg}</strong>
+                </Grid.Column>
+              </Grid>
+            </Message>
+
+            <Form>
+              <TextAreaField
+                fieldPath="message"
+                label={i18next.t("Message to managers (optional)")}
+              />
+            </Form>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button onClick={onClose} floated="left">
+              {i18next.t("Cancel")}
+            </Button>
+            <Button
+              disabled={isSubmitting}
+              loading={isSubmitting}
+              onClick={handleSubmit}
+              positive
+              primary
+              type="button"
+            >
+              {i18next.t("Request Membership")}
+            </Button>
+          </Modal.Actions>
+        </Modal>
+      )}
+    </Formik>
+  );
+}
+
+RequestMembershipModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  community: PropTypes.object.isRequired,
+};
+
+export function RequestMembershipButton(props) {
+  const [isModalOpen, setModalOpen] = useState(false);
+  const { community } = props;
+
+  const handleClick = () => {
+    setModalOpen(true);
+  };
+
+  const handleClose = () => {
+    setModalOpen(false);
+  };
+
+  return (
+    <>
+      <Button
+        name="request-membership"
+        onClick={handleClick}
+        positive
+        icon="sign-in"
+        labelPosition="left"
+        content={i18next.t("Request Membership")}
+      />
+      {isModalOpen && (
+        <RequestMembershipModal
+          isOpen={isModalOpen}
+          onClose={handleClose}
+          community={community}
+        />
+      )}
+    </>
+  );
+}
+
+RequestMembershipButton.propTypes = {
+  community: PropTypes.object.isRequired,
+};

invenio_communities/assets/semantic-ui/js/invenio_communities/community/header/index.js

@@ -0,0 +1,21 @@
+/*
+ * This file is part of Invenio.
+ * Copyright (C) 2024 Northwestern University.
+ *
+ * Invenio is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import ReactDOM from "react-dom";
+
+import React from "react";
+
+import { RequestMembershipButton } from "./RequestMembershipButton";
+
+const domContainer = document.getElementById("request-membership-app");
+
+const community = JSON.parse(domContainer.dataset.community);
+
+if (domContainer) {
+  ReactDOM.render(<RequestMembershipButton community={community} />, domContainer);
+}

invenio_communities/assets/semantic-ui/js/invenio_communities/settings/privileges/CommunityPriviledgesForm.js → invenio_communities/assets/semantic-ui/js/invenio_communities/settings/privileges/CommunityPrivilegesForm.js

@@ -10,6 +10,7 @@
 import { i18next } from "@translations/invenio_communities/i18next";
 import { CommunitySettingsForm } from "..//components/CommunitySettingsForm";
 import _get from "lodash/get";
+import _isEmpty from "lodash/isEmpty";
 import { useField } from "formik";
 import React, { Component } from "react";
 import { RadioField } from "react-invenio-forms";
@@ -18,17 +19,31 @@ import PropTypes from "prop-types";
 
 const VisibilityField = ({ label, formConfig, ...props }) => {
   const [field] = useField(props);
+  const fieldPath = "access.visibility";
+
+  function createHandleChange(radioValue) {
+    function handleChange({ event, data, formikProps }) {
+      formikProps.form.setFieldValue(fieldPath, radioValue);
+      // dependent fields
+      if (radioValue === "restricted") {
+        formikProps.form.setFieldValue("access.member_policy", "closed");
+      }
+    }
+    return handleChange;
+  }
+
   return (
     <>
       {formConfig.access.visibility.map((item) => (
         <React.Fragment key={item.value}>
           <RadioField
             key={item.value}
-            fieldPath="access.visibility"
+            fieldPath={fieldPath}
             label={item.text}
             labelIcon={item.icon}
-            checked={_get(field.value, "access.visibility") === item.value}
+            checked={_get(field.value, fieldPath) === item.value}
             value={item.value}
+            onChange={createHandleChange(item.value)}
           />
           <label className="helptext">{item.helpText}</label>
         </React.Fragment>
@@ -76,14 +91,47 @@ MembersVisibilityField.defaultProps = {
   label: "",
 };
 
+const MemberPolicyField = ({ label, formConfig, ...props }) => {
+  const [field] = useField(props);
+  const isDisabled = _get(field.value, "access.visibility") === "restricted";
+
+  return (
+    <>
+      {formConfig.access.member_policy.map((item) => (
+        <React.Fragment key={item.value}>
+          <RadioField
+            key={item.value}
+            fieldPath="access.member_policy"
+            label={item.text}
+            labelIcon={item.icon}
+            checked={item.value === _get(field.value, "access.member_policy")}
+            value={item.value}
+            disabled={isDisabled}
+          />
+          <label className="helptext">{item.helpText}</label>
+        </React.Fragment>
+      ))}
+    </>
+  );
+};
+
+MemberPolicyField.propTypes = {
+  label: PropTypes.string,
+  formConfig: PropTypes.object.isRequired,
+};
+
+MemberPolicyField.defaultProps = {
+  label: "",
+};
+
 class CommunityPrivilegesForm extends Component {
   getInitialValues = () => {
     return {
       access: {
         visibility: "public",
         members_visibility: "public",
+        member_policy: "closed",
         // TODO: Re-enable once properly integrated to be displayed
-        // member_policy: "open",
         // record_policy: "open",
       },
     };
@@ -105,6 +153,7 @@ class CommunityPrivilegesForm extends Component {
           </Header.Subheader>
         </Header>
         <VisibilityField formConfig={formConfig} />
+
         <Header as="h2" size="small">
           {i18next.t("Members visibility")}
           <Header.Subheader className="mt-5">
@@ -114,6 +163,19 @@ class CommunityPrivilegesForm extends Component {
           </Header.Subheader>
         </Header>
         <MembersVisibilityField formConfig={formConfig} />
+
+        {!_isEmpty(formConfig.access.member_policy) && (
+          <>
+            <Header as="h2" size="small">
+              {i18next.t("Membership Policy")}
+              <Header.Subheader className="mt-5">
+                {i18next.t("Controls if anyone can request to join your community.")}
+              </Header.Subheader>
+            </Header>
+            <MemberPolicyField formConfig={formConfig} />
+          </>
+        )}
+
         {/* TODO: Re-enable once properly integrated to be displayed */}
         {/*
               <Grid.Column width={6}>

invenio_communities/assets/semantic-ui/js/invenio_communities/settings/privileges/index.js

@@ -1,4 +1,4 @@
-import CommunityPrivilegesForm from "./CommunityPriviledgesForm";
+import CommunityPrivilegesForm from "./CommunityPrivilegesForm";
 import ReactDOM from "react-dom";
 import React from "react";
 

invenio_communities/communities/services/config.py

@@ -114,6 +114,9 @@ class CommunityServiceConfig(RecordServiceConfig, ConfiguratorMixin):
         "invitations": CommunityLink("{+api}/communities/{id}/invitations"),
         "requests": CommunityLink("{+api}/communities/{id}/requests"),
         "records": CommunityLink("{+api}/communities/{id}/records"),
+        "membership_requests": CommunityLink(
+            "{+api}/communities/{id}/membership-requests"
+        ),
     }
 
     action_link = CommunityLink(

invenio_communities/config.py

@@ -314,3 +314,6 @@
 
 COMMUNITIES_ALWAYS_SHOW_CREATE_LINK = False
 """Controls visibility of 'New Community' btn based on user's permission when set to True."""
+
+COMMUNITIES_ALLOW_MEMBERSHIP_REQUESTS = False
+"""Feature flag for membership request."""