invenio-app-rdm 8.0.0.dev9__py2.py3-none-any.whl → 14.0.0b4.dev4__py2.py3-none-any.whl

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/CommunitiesManagement.js

@@ -0,0 +1,179 @@
+// This file is part of InvenioRDM
+// Copyright (C) 2023-2025 CERN.
+//
+// Invenio App RDM 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 { RecordCommunitiesListModal } from "./RecordCommunitiesListModal";
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import _isEmpty from "lodash/isEmpty";
+import { RecordCommunitiesList } from "./RecordCommunitiesList";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+import { Header, Container, Button, Segment } from "semantic-ui-react";
+import { CommunitiesManagementDropdown } from "./CommunitiesManagementDropdown";
+import { http, withCancel } from "react-invenio-forms";
+
+const MAX_COMMUNITIES = 3;
+
+export class CommunitiesManagement extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      communities: undefined,
+      error: undefined,
+      manageCommunitiesModalOpen: false,
+    };
+  }
+
+  componentDidMount() {
+    this.getCommunities();
+  }
+
+  componentWillUnmount() {
+    this.cancellableFetchCommunities?.cancel();
+  }
+
+  toggleManageCommunitiesModal = (value) => {
+    if (!value) {
+      const modalDropdown = document.getElementById("modal-dropdown"); // A11y: Focus community management dropdown when modal closes
+      modalDropdown && modalDropdown.focus();
+    }
+    this.setState({ manageCommunitiesModalOpen: value });
+  };
+
+  fetchRecordCommunities = async () => {
+    const { recordCommunityEndpoint } = this.props;
+    return await http.get(recordCommunityEndpoint, {
+      headers: {
+        Accept: "application/vnd.inveniordm.v1+json",
+      },
+    });
+  };
+
+  getCommunities = async () => {
+    this.cancellableFetchCommunities = withCancel(this.fetchRecordCommunities());
+    this.setState({
+      loading: true,
+      error: null,
+    });
+    try {
+      const response = await this.cancellableFetchCommunities.promise;
+      const {
+        data: {
+          hits: { hits },
+        },
+      } = response;
+      this.setState({
+        communities: hits,
+        loading: false,
+      });
+    } catch (error) {
+      if (error !== "UNMOUNTED") {
+        this.setState({
+          loading: false,
+          error: i18next.t("An error occurred while fetching communities."),
+        });
+      }
+    }
+  };
+
+  handleRefresh = () => {
+    this.getCommunities();
+    this.toggleManageCommunitiesModal(false);
+  };
+
+  render() {
+    const {
+      recordCommunitySearchConfig,
+      permissions,
+      userCommunitiesMemberships,
+      recordCommunityEndpoint,
+      recordUserCommunitySearchConfig,
+      searchConfig,
+      record,
+      recordRequests,
+    } = this.props;
+    const { communities, loading, error, manageCommunitiesModalOpen } = this.state;
+    return (
+      (!_isEmpty(communities) || permissions.can_manage) && (
+        <>
+          <Header
+            size="medium"
+            as="h2"
+            className="flex align-items-baseline mt-0"
+            attached="top"
+          >
+            {i18next.t("Communities")}
+            {permissions.can_manage && (
+              <CommunitiesManagementDropdown
+                actionSucceed={this.handleRefresh}
+                userCommunitiesMemberships={userCommunitiesMemberships}
+                recordCommunityEndpoint={recordCommunityEndpoint}
+                searchConfig={searchConfig}
+                recordCommunitySearchConfig={recordCommunitySearchConfig}
+                recordUserCommunitySearchConfig={recordUserCommunitySearchConfig}
+                toggleManageCommunitiesModal={this.toggleManageCommunitiesModal}
+                record={record}
+              />
+            )}
+          </Header>
+          <Segment attached="bottom" className="rdm-sidebar">
+            <RecordCommunitiesList
+              permissions={permissions}
+              communities={communities}
+              error={error}
+              loading={loading}
+              maxDisplayedCommunities={MAX_COMMUNITIES}
+              branded={record.parent?.communities?.default}
+              recordRequests={recordRequests}
+            />
+            <RecordCommunitiesListModal
+              id="record-communities-list-modal"
+              modalOpen={manageCommunitiesModalOpen}
+              handleOnOpen={() => this.toggleManageCommunitiesModal(true)}
+              handleOnClose={() => this.toggleManageCommunitiesModal(false)}
+              successActionCallback={this.handleRefresh}
+              recordCommunityEndpoint={recordCommunityEndpoint}
+              permissions={permissions}
+              recordParent={record.parent}
+              recordRequests={recordRequests}
+            />
+
+            {!loading && communities?.length > MAX_COMMUNITIES && (
+              <Container align="center" className="mt-10">
+                <Button
+                  className="transparent"
+                  aria-haspopup="dialog"
+                  aria-expanded={manageCommunitiesModalOpen}
+                  aria-controls="record-communities-list-modal"
+                  onClick={() => this.toggleManageCommunitiesModal(true)}
+                >
+                  {i18next.t("View all {{count}} communities", {
+                    count: communities.length,
+                  })}
+                </Button>
+              </Container>
+            )}
+          </Segment>
+        </>
+      )
+    );
+  }
+}
+
+CommunitiesManagement.propTypes = {
+  recordCommunitySearchConfig: PropTypes.object.isRequired,
+  recordCommunityEndpoint: PropTypes.string.isRequired,
+  recordUserCommunitySearchConfig: PropTypes.object.isRequired,
+  permissions: PropTypes.object.isRequired,
+  userCommunitiesMemberships: PropTypes.object.isRequired,
+  searchConfig: PropTypes.object.isRequired,
+  record: PropTypes.object.isRequired,
+  recordRequests: PropTypes.object,
+};
+
+CommunitiesManagement.defaultProps = {
+  recordRequests: {},
+};

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/CommunitiesManagementDropdown.js

@@ -0,0 +1,186 @@
+// This file is part of InvenioRDM
+// Copyright (C) 2023 CERN.
+// Copyright (C) 2024 KTH Royal Institute of Technology.
+//
+// Invenio App RDM 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 { PendingCommunitiesModal } from "./PendingCommunitiesModal/PendingCommunitiesModal";
+import { RecordCommunitySubmissionModal } from "./RecordCommunitySubmission/RecordCommunitySubmissionModal";
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Dropdown, Icon } from "semantic-ui-react";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+import { SuccessIcon } from "@js/invenio_communities/members";
+
+export class CommunitiesManagementDropdown extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      submissionModalOpen: false,
+      pendingRequestModalOpen: false,
+      visibleSuccessAction: false,
+      actionFeedback: "",
+    };
+    this.dropdownRef = React.createRef();
+  }
+
+  focusDropdownRef = () => {
+    // A11y: Bring focus to the dropdown menu (e.g. when the modal closes)
+    const {
+      current: {
+        ref: { current: dropdownToggle },
+      },
+    } = this.dropdownRef;
+    dropdownToggle.focus();
+  };
+
+  handleSuccessAction = (data, text) => {
+    const { actionSucceed } = this.props;
+    this.setState({ actionFeedback: text, visibleSuccessAction: false });
+    this.toggleSubmissionModal(false);
+    this.togglePendingRequestsModal(false);
+    this.setState({ visibleSuccessAction: true });
+    this.focusDropdownRef();
+
+    actionSucceed();
+  };
+
+  toggleSubmissionModal = (value) => {
+    this.setState({ submissionModalOpen: value });
+    if (!value) this.focusDropdownRef();
+  };
+
+  togglePendingRequestsModal = (value) => {
+    this.setState({ pendingRequestModalOpen: value });
+    if (!value) this.focusDropdownRef();
+  };
+
+  handleChange = (event, data) => {
+    // A11y: Needed to trigger keyboard events as well as click events
+    const { toggleManageCommunitiesModal } = this.props;
+
+    switch (data.value) {
+      case "submit-to-community":
+        this.toggleSubmissionModal(true);
+        break;
+      case "pending-submissions":
+        this.togglePendingRequestsModal(true);
+        break;
+      case "manage-communities":
+        toggleManageCommunitiesModal(true);
+        break;
+      default:
+        return;
+    }
+  };
+
+  render() {
+    const {
+      visibleSuccessAction,
+      submissionModalOpen,
+      actionFeedback,
+      pendingRequestModalOpen,
+    } = this.state;
+
+    const {
+      userCommunitiesMemberships,
+      searchConfig,
+      recordCommunitySearchConfig,
+      recordCommunityEndpoint,
+      recordUserCommunitySearchConfig,
+      record,
+    } = this.props;
+
+    const options = [
+      {
+        id: "submit-to-community",
+        value: "submit-to-community",
+        text: i18next.t("Submit to community"),
+        icon: "plus",
+      },
+      {
+        id: "pending-submissions",
+        value: "pending-submissions",
+        text: i18next.t("Pending submissions"),
+        icon: "comments outline",
+      },
+      {
+        id: "manage-communities",
+        value: "manage-communities",
+        text: i18next.t("Manage communities"),
+        icon: "settings",
+      },
+    ];
+    return (
+      <>
+        <div className="flex align-items-baseline ml-auto rel-mr-1 green-color">
+          {visibleSuccessAction && (
+            <SuccessIcon
+              timeOutDelay={5000}
+              show={visibleSuccessAction}
+              content={
+                <div
+                  role="alert"
+                  className="half-width sub header small text size truncated"
+                >
+                  {actionFeedback}
+                </div>
+              }
+            />
+          )}
+        </div>
+        {!record.is_draft && (
+          <Dropdown
+            ref={this.dropdownRef}
+            id="modal-dropdown"
+            className="manage-menu-dropdown"
+            aria-label={i18next.t("Community management menu dropdown")}
+            closeOnChange
+            direction="left"
+            options={options}
+            onChange={this.handleChange}
+            selectOnBlur={false}
+            selectOnNavigation={false}
+            value={null} // A11y: needed to trigger the onChange (-triggers both mouse & keyboard) event on every select
+            trigger={<Icon name="cog" color="grey" className="ml-0" />}
+          />
+        )}
+
+        <RecordCommunitySubmissionModal
+          modalOpen={submissionModalOpen}
+          userCommunitiesMemberships={userCommunitiesMemberships}
+          toggleModal={this.toggleSubmissionModal}
+          handleClose={() => this.toggleSubmissionModal(false)}
+          handleSuccessAction={this.handleSuccessAction}
+          recordCommunityEndpoint={recordCommunityEndpoint}
+          recordCommunitySearchConfig={recordCommunitySearchConfig}
+          recordUserCommunitySearchConfig={recordUserCommunitySearchConfig}
+          record={record}
+        />
+        <PendingCommunitiesModal
+          modalOpen={pendingRequestModalOpen}
+          handleOnOpen={() => this.togglePendingRequestsModal(true)}
+          handleOnClose={() => this.togglePendingRequestsModal(false)}
+          successActionCallback={this.handleSuccessAction}
+          searchConfig={searchConfig}
+        />
+      </>
+    );
+  }
+}
+
+CommunitiesManagementDropdown.propTypes = {
+  userCommunitiesMemberships: PropTypes.object.isRequired,
+  recordCommunityEndpoint: PropTypes.string.isRequired,
+  recordCommunitySearchConfig: PropTypes.object.isRequired,
+  recordUserCommunitySearchConfig: PropTypes.string.isRequired,
+  toggleManageCommunitiesModal: PropTypes.func.isRequired,
+  actionSucceed: PropTypes.func,
+  searchConfig: PropTypes.object.isRequired,
+  record: PropTypes.object.isRequired,
+};
+
+CommunitiesManagementDropdown.defaultProps = {
+  actionSucceed: undefined,
+};

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/EditButton.js

@@ -8,35 +8,49 @@
 import React, { useState } from "react";
 import { Icon, Button } from "semantic-ui-react";
 import { i18next } from "@translations/invenio_app_rdm/i18next";
-import { axiosWithconfig } from "../utils";
+import { http } from "react-invenio-forms";
+import PropTypes from "prop-types";
 
-export const EditButton = (props) => {
+export const EditButton = ({ recid, onError }) => {
   const [loading, setLoading] = useState(false);
-  const recid = props.recid;
-  const handleError = props.onError;
-  const handleClick = () => {
+
+  const handleClick = async () => {
     setLoading(true);
-    axiosWithconfig
-      .post(`/api/records/${recid}/draft`)
-      .then((response) => {
-        window.location = `/uploads/${recid}`;
-      })
-      .catch((error) => {
-        setLoading(false);
-        handleError(error.response.data.message);
-      });
+    try {
+      await http.post(
+        `/api/records/${recid}/draft`,
+        {},
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "Accept": "application/vnd.inveniordm.v1+json",
+          },
+        }
+      );
+      window.location = `/uploads/${recid}`;
+    } catch (error) {
+      setLoading(false);
+      onError(error.response.data.message);
+    }
   };
 
   return (
     <Button
       fluid
-      color="orange"
-      size="mini"
+      className="warning"
+      size="medium"
       onClick={handleClick}
       loading={loading}
+      icon
+      labelPosition="left"
     >
       <Icon name="edit" />
       {i18next.t("Edit")}
     </Button>
   );
 };
+
+EditButton.propTypes = {
+  recid: PropTypes.string.isRequired,
+  onError: PropTypes.func.isRequired,
+};

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/ExportDropdown.js

@@ -0,0 +1,68 @@
+// This file is part of InvenioRDM
+// Copyright (C) 2023 CERN.
+// Copyright (C) 2023 Northwestern University.
+//
+// Invenio App RDM 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 React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Grid, Dropdown, Button } from "semantic-ui-react";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+import { CopyButton } from "@js/invenio_app_rdm/components/CopyButton";
+
+export class ExportDropdown extends Component {
+  constructor(props) {
+    super(props);
+    const { formats } = this.props;
+    this.state = {
+      selectedFormatUrl: formats[0]?.export_url,
+    };
+  }
+
+  render() {
+    const { formats } = this.props;
+    const { selectedFormatUrl } = this.state;
+    const exportOptions = formats.map((option, index) => {
+      return {
+        key: `option-${index}`,
+        text: option.name,
+        value: option.export_url,
+      };
+    });
+
+    return (
+      <Grid>
+        <Grid.Column width={10}>
+          <Dropdown
+            aria-label={i18next.t("Export selection")}
+            selection
+            fluid
+            selectOnNavigation={false}
+            options={exportOptions}
+            onChange={(event, data) => this.setState({ selectedFormatUrl: data.value })}
+            defaultValue={selectedFormatUrl}
+          />
+        </Grid.Column>
+        <Grid.Column width={4} className="pl-0">
+          <Button
+            as="a"
+            role="button"
+            fluid
+            href={selectedFormatUrl}
+            title={i18next.t("Download file")}
+          >
+            {i18next.t("Export")}
+          </Button>
+        </Grid.Column>
+        <Grid.Column width={2} className="pl-0">
+          <CopyButton url={selectedFormatUrl} />
+        </Grid.Column>
+      </Grid>
+    );
+  }
+}
+
+ExportDropdown.propTypes = {
+  formats: PropTypes.array.isRequired,
+};

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/ManageButton.js

@@ -0,0 +1,140 @@
+// This file is part of InvenioRDM
+// Copyright (C) 2023-2025 CERN.
+//
+// Invenio RDM Records 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 React from "react";
+import { Dropdown, Modal, Button, Message } from "semantic-ui-react";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+import PropTypes from "prop-types";
+import { http } from "react-invenio-forms";
+import { APIRoutes } from "../administration/users/api/routes";
+import { RecordDeletion } from "../components/RecordDeletion";
+
+export const ManageButton = ({
+  record,
+  recordOwnerID,
+  permissions,
+  recordDeletion,
+  recordDeletionOptions,
+}) => {
+  return (
+    <Dropdown
+      fluid
+      text={i18next.t("Manage")}
+      icon="cog"
+      floating
+      labeled
+      button
+      className="icon text-align-center"
+    >
+      <Dropdown.Menu>
+        {recordDeletion["valid_user"] && (
+          <>
+            <Dropdown.Item>
+              <RecordDeletion
+                record={record}
+                permissions={permissions}
+                recordDeletion={recordDeletion}
+                options={recordDeletionOptions}
+                disabled={!recordDeletion["allowed"]}
+              />
+            </Dropdown.Item>
+
+            {permissions.can_moderate && <Dropdown.Divider />}
+          </>
+        )}
+        {permissions.can_moderate && (
+          <>
+            <Dropdown.Item
+              as="a"
+              href={`/administration/records?q=id:${record["id"]}`}
+              target="_blank"
+              key="manage_record"
+              text={i18next.t("Manage record")}
+            />
+            <Dropdown.Item
+              as="a"
+              href={`/administration/users?q=id:${recordOwnerID}`}
+              target="_blank"
+              key="manage_user"
+              text={i18next.t("Manage user")}
+            />
+            <Dropdown.Divider />
+            {recordOwnerID && <BlockUserItem recordOwnerID={recordOwnerID} />}
+          </>
+        )}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+ManageButton.propTypes = {
+  record: PropTypes.object.isRequired,
+  recordOwnerID: PropTypes.string.isRequired,
+  permissions: PropTypes.object.isRequired,
+  recordDeletion: PropTypes.object,
+  recordDeletionOptions: PropTypes.array.isRequired,
+};
+
+ManageButton.defaultProps = {
+  recordDeletion: {},
+};
+
+const BlockUserItem = ({ recordOwnerID }) => {
+  const [modalOpen, setModalOpen] = React.useState(false);
+  const handleOpen = () => setModalOpen(true);
+  const handleClose = () => setModalOpen(false);
+  const blockUser = () => {
+    http.post(APIRoutes.block({ id: recordOwnerID }));
+    handleClose();
+  };
+
+  return (
+    <>
+      <Dropdown.Item
+        as="a"
+        className="error"
+        onClick={handleOpen}
+        key="block_user"
+        text={i18next.t("Block user")}
+      />
+      <Modal
+        open={modalOpen}
+        closeIcon
+        onClose={handleClose}
+        role="dialog"
+        closeOnDimmerClick={false}
+      >
+        <Modal.Header as="h2">{i18next.t("Block User")}</Modal.Header>
+        <Modal.Description>
+          <Message
+            warning
+            icon="warning sign"
+            content={i18next.t(
+              "Blocking the user will delete all existing records of the user."
+            )}
+          />
+        </Modal.Description>
+        <Modal.Actions>
+          <Button onClick={() => handleClose()} floated="left">
+            Cancel
+          </Button>
+          <Button
+            size="small"
+            labelPosition="left"
+            icon="warning"
+            color="red"
+            content={i18next.t("Block")}
+            onClick={blockUser}
+          />
+        </Modal.Actions>
+      </Modal>
+    </>
+  );
+};
+
+BlockUserItem.propTypes = {
+  recordOwnerID: PropTypes.string.isRequired,
+};