[#855] 2) header-ui: request flow ui start inert (no backend nor frontend integration with it)

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

@@ -0,0 +1,104 @@
+/*
+ * 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, Modal } from "semantic-ui-react";
+
+export function RequestMembershipModal(props) {
+  const { isOpen, onClose } = props;
+
+  const onSubmit = async (values, { setSubmitting, setFieldError }) => {
+    // TODO: implement me
+    console.log("RequestMembershipModal.onSubmit(args) called");
+    console.log("TODO: implement me", arguments);
+  };
+
+  let confirmed = true;
+
+  return (
+    <Formik
+      initialValues={{
+        requestMembershipComment: "",
+      }}
+      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>
+            <Form>
+              <TextAreaField
+                fieldPath="requestMembershipComment"
+                label={i18next.t("Message to managers (optional)")}
+              />
+            </Form>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button onClick={onClose} floated="left">
+              {i18next.t("Cancel")}
+            </Button>
+            <Button
+              onClick={(event) => {
+                // TODO: Implement me
+                console.log("RequestMembershipModal button clicked.");
+              }}
+              positive={confirmed}
+              primary
+            >
+              {i18next.t("Request Membership")}
+            </Button>
+          </Modal.Actions>
+        </Modal>
+      )}
+    </Formik>
+  );
+}
+
+RequestMembershipModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export function RequestMembershipButton(props) {
+  const [isModalOpen, setModalOpen] = useState(false);
+
+  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} />
+      )}
+    </>
+  );
+}

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/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."""

invenio_communities/templates/semantic-ui/invenio_communities/details/base.html

@@ -9,6 +9,11 @@
 
 {% extends "invenio_communities/base.html" %}
 
+{%- block javascript %}
+{{ super() }}
+{{ webpack['invenio-communities-header.js'] }}
+{%- endblock javascript %}
+
 {%- block page_body %}
   {% set community_menu_active = True %}
   {% include "invenio_communities/details/header.html" %}

invenio_communities/templates/semantic-ui/invenio_communities/details/header.html

@@ -2,6 +2,7 @@
 
   This file is part of Invenio.
   Copyright (C) 2016-2020 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.
@@ -10,12 +11,25 @@
 {%- from "invenio_theme/macros/truncate.html" import truncate_text %}
 {%- from "invenio_communities/details/macros/access-status-label.html" import access_status_label -%}
 
+{% macro button_to_request_membership(community) %}
+  {# TODO: replace by permission check when permissions implemented #}
+  {% if config.COMMUNITIES_ALLOW_MEMBERSHIP_REQUESTS %}
+  <div
+    id="request-membership-app"
+    data-community='{{ community | tojson }}'
+    class="display-inline-block"
+    >
+  </div>
+  {% endif %}
+{% endmacro %}
+
+
 <div
   class="ui container fluid page-subheader-outer with-submenu rel-pt-2 ml-0-mobile mr-0-mobile">
   <div class="ui container relaxed grid page-subheader mr-0-mobile ml-0-mobile">
     <div class="row pb-0">
       <div
-        class="sixteen wide mobile sixteen wide tablet thirteen wide computer column">
+        class="sixteen wide mobile sixteen wide tablet eleven wide computer column">
         <div
           class="community-header flex align-items-center column-mobile align-items-start-mobile">
           <div class="flex align-items-center">
@@ -105,7 +119,8 @@ <h1 class="ui medium header mb-0">{{ community.metadata.title }}</h1>
         </div>
       </div>
       <div
-        class="sixteen wide mobile sixteen wide tablet three wide computer right aligned middle aligned column">
+        class="sixteen wide mobile sixteen wide tablet five wide computer right aligned middle aligned column">
+        {{ button_to_request_membership(community) }}
         {%- if not community_use_jinja_header %}
           <a href="/uploads/new?community={{ community.slug }}"
              class="ui positive button labeled icon rel-mt-1 theme-secondary">

invenio_communities/views/communities.py

@@ -22,6 +22,7 @@
 from invenio_communities.proxies import current_communities
 
 from ..communities.resources.ui_schema import TypesSchema
+from ..members.records.api import Member
 from .decorators import pass_community
 from .template_loader import CommunityThemeChoiceJinjaLoader
 
@@ -82,6 +83,24 @@
 ]
 
 
+MEMBER_POLICY_FIELDS = [
+    {
+        "text": "Open",
+        "value": "open",
+        "icon": "user plus",
+        "helpText": _("Users can request to join your community."),
+    },
+    {
+        "text": "Closed",
+        "value": "closed",
+        "icon": "user times",
+        "helpText": _(
+            "Users cannot request to join your community. Only invited users can become members of your community."
+        ),
+    },
+]
+
+
 HEADER_PERMISSIONS = {
     "read",
     "update",
@@ -341,6 +360,12 @@ def communities_settings_privileges(pid_value, community, community_ui):
     if not permissions["can_manage_access"]:
         raise PermissionDeniedError()
 
+    member_policy = (
+        MEMBER_POLICY_FIELDS
+        if current_app.config["COMMUNITIES_ALLOW_MEMBERSHIP_REQUESTS"]
+        else {}
+    )
+
     return render_community_theme_template(
         "invenio_communities/details/settings/privileges.html",
         theme=community_ui.get("theme", {}),
@@ -349,6 +374,7 @@ def communities_settings_privileges(pid_value, community, community_ui):
             access=dict(
                 visibility=VISIBILITY_FIELDS,
                 members_visibility=MEMBERS_VISIBILITY_FIELDS,
+                member_policy=member_policy,
             ),
         ),
         permissions=permissions,

invenio_communities/webpack.py

@@ -26,6 +26,7 @@
     themes={
         "semantic-ui": dict(
             entry={
+                "invenio-communities-header": "./js/invenio_communities/community/header/index.js",
                 "invenio-communities-new": "./js/invenio_communities/community/new.js",
                 "invenio-communities-privileges": "./js/invenio_communities/settings/privileges/index.js",
                 "invenio-communities-profile": "./js/invenio_communities/settings/profile/index.js",