invenio-app-rdm 12.0.0.dev8__py2.py3-none-any.whl → 14.0.0b1.dev8__py2.py3-none-any.whl

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/RemoveFromCommunity/RemoveFromCommunityAction.js

@@ -0,0 +1,188 @@
+// This file is part of InvenioRDM
+// Copyright (C) 2023 CERN.
+// Copyright (C) 2023 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 React, { Component } from "react";
+import { Button, Modal, Message, Icon, Checkbox } from "semantic-ui-react";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+import { http, ErrorMessage } from "react-invenio-forms";
+import PropTypes from "prop-types";
+
+export class RemoveFromCommunityAction extends Component {
+  constructor(props) {
+    super(props);
+    this.INITIAL_STATE = {
+      modalOpen: false,
+      loading: false,
+      error: undefined,
+      checkboxMembers: false,
+      checkboxRecords: false,
+      buttonDisabled: true,
+    };
+    this.state = this.INITIAL_STATE;
+
+    this.checkBoxRef = React.createRef();
+  }
+
+  componentDidUpdate() {
+    const { modalOpen } = this.state;
+    if (modalOpen && this.checkBoxRef) {
+      const {
+        current: { inputRef },
+      } = this.checkBoxRef;
+      inputRef?.current?.focus(); // A11y: Focus first interactive element when modal opens
+    }
+  }
+
+  openConfirmModal = () => this.setState({ modalOpen: true });
+  closeConfirmModal = () => this.setState(this.INITIAL_STATE);
+
+  handleDelete = async () => {
+    const { result, recordCommunityEndpoint, successCallback } = this.props;
+
+    this.setState({ loading: true });
+    const payload = {
+      communities: [{ id: result.id }],
+    };
+
+    try {
+      const response = await http.delete(recordCommunityEndpoint, {
+        data: payload,
+      });
+      successCallback(response.data);
+      this.closeConfirmModal();
+    } catch (e) {
+      this.setState({ error: e, loading: false });
+    }
+  };
+
+  handleCheckboxChange = (e, { id, checked }) => {
+    const { checkboxRecords, checkboxMembers } = this.state;
+
+    if (id === "members-confirm") {
+      this.setState({
+        checkboxMembers: checked,
+        buttonDisabled: !(checked && checkboxRecords),
+      });
+    }
+    if (id === "records-confirm") {
+      this.setState({
+        checkboxRecords: checked,
+        buttonDisabled: !(checkboxMembers && checked),
+      });
+    }
+  };
+
+  render() {
+    const {
+      modalOpen,
+      loading,
+      error,
+      checkboxMembers,
+      checkboxRecords,
+      buttonDisabled,
+    } = this.state;
+    const { result } = this.props;
+    const communityTitle = result.metadata.title;
+
+    return (
+      <>
+        <Button
+          size="tiny"
+          negative
+          labelPosition="left"
+          icon="trash"
+          floated="right"
+          onClick={this.openConfirmModal}
+          content={i18next.t("Remove")}
+          aria-label={i18next.t("Remove {{communityTitle}} from this record", {
+            communityTitle,
+          })}
+        />
+        <Modal size="tiny" dimmer="blurring" open={modalOpen}>
+          <Modal.Header as="h2">{i18next.t("Remove community")}</Modal.Header>
+          <Modal.Content>
+            <p>
+              {i18next.t(
+                "Are you sure you want to remove the record from the community?"
+              )}
+            </p>
+
+            <Message negative>
+              <Message.Header className="rel-mb-1">
+                <Icon name="warning sign" className="rel-mr-1" />
+                {i18next.t("I understand the consequences:")}
+              </Message.Header>
+              <>
+                <Checkbox
+                  ref={this.checkBoxRef}
+                  id="members-confirm"
+                  label={
+                    /* eslint-disable-next-line jsx-a11y/label-has-associated-control */
+                    <label>
+                      {i18next.t("Members of the community ")}
+                      <b>"{communityTitle}"</b>
+                      {i18next.t(" will ")}
+                      <u>{i18next.t("lose their access")}</u>
+                      {i18next.t(" to the record.")}
+                    </label>
+                  }
+                  checked={checkboxMembers}
+                  onChange={this.handleCheckboxChange}
+                  className="mb-5"
+                />
+                <Checkbox
+                  id="records-confirm"
+                  label={i18next.t(
+                    "The record can only be re-included in the community by going through a new review by the community curators."
+                  )}
+                  checked={checkboxRecords}
+                  onChange={this.handleCheckboxChange}
+                  className="mb-5"
+                />
+              </>
+            </Message>
+          </Modal.Content>
+
+          <Modal.Actions>
+            {error && (
+              <ErrorMessage
+                header={i18next.t("Something went wrong")}
+                content={error.response?.data?.errors?.[0]?.message || error.message}
+                icon="exclamation"
+                className="text-align-left"
+                negative
+              />
+            )}
+            <Button
+              onClick={() => this.closeConfirmModal()}
+              floated="left"
+              disabled={loading}
+              loading={loading}
+              aria-label={i18next.t("Cancel removal")}
+            >
+              {i18next.t("Cancel")}
+            </Button>
+            <Button
+              disabled={buttonDisabled || loading}
+              negative
+              onClick={() => this.handleDelete()}
+              loading={loading}
+              content={i18next.t("Remove")}
+              aria-label={i18next.t("Confirm removal")}
+            />
+          </Modal.Actions>
+        </Modal>
+      </>
+    );
+  }
+}
+
+RemoveFromCommunityAction.propTypes = {
+  result: PropTypes.object.isRequired,
+  recordCommunityEndpoint: PropTypes.object.isRequired,
+  successCallback: PropTypes.func.isRequired,
+};

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/ShareOptions/AccessLinks/AccessDropdown.js

@@ -0,0 +1,93 @@
+/*
+ * This file is part of Invenio.
+ * Copyright (C) 2023-2024 CERN.
+ *
+ * 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 React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Dropdown } from "semantic-ui-react";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+import { http } from "react-invenio-forms";
+import { SuccessIcon, ErrorPopup } from "@js/invenio_communities/members";
+import { withCancel } from "react-invenio-forms";
+
+export const errorSerializer = (error) =>
+  error?.response?.data?.message || error?.message;
+
+const MIN_LOADING_DURATION = 400;
+
+export class AccessDropdown extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: undefined, loading: false, actionSuccess: undefined };
+  }
+
+  componentWillUnmount() {
+    this.cancellableAction && this.cancellableAction.cancel();
+  }
+
+  onSuccess = () =>
+    this.setState({ loading: false, actionSuccess: true, error: undefined });
+
+  handleUpdate = async (permission) => {
+    const { updateEndpoint, onPermissionChanged, result, entityType } = this.props;
+    const data = { permission: permission };
+    this.setState({ loading: true, actionSuccess: false });
+    this.cancellableAction = withCancel(http.patch(updateEndpoint, data));
+
+    try {
+      // prolong loading to make sure UI displays to the end user for long enough that the action was completed
+      await Promise.all([
+        new Promise((resolve) => setTimeout(resolve, MIN_LOADING_DURATION)),
+        this.cancellableAction.promise,
+      ]);
+      this.onSuccess();
+      onPermissionChanged(
+        result?.subject?.id ?? result.id,
+        data.permission,
+        entityType
+      );
+    } catch (error) {
+      if (error === "UNMOUNTED") return;
+      this.setState({
+        loading: false,
+        actionSuccess: false,
+        error: errorSerializer(error),
+      });
+      console.error(error);
+    }
+  };
+
+  render() {
+    const { result, dropdownOptions } = this.props;
+    const { loading, actionSuccess, error } = this.state;
+    return (
+      <div className="flex align-items-center access-dropdown-container">
+        <Dropdown
+          className="overflow-scroll"
+          placeholder={i18next.t("Select permissions")}
+          fluid
+          loading={loading}
+          selection
+          options={dropdownOptions}
+          onChange={(event, data) => this.handleUpdate(data.value)}
+          defaultValue={result.permission}
+        />
+        <div className="ml-5 action-status-container">
+          {actionSuccess && <SuccessIcon timeOutDelay={3000} show={actionSuccess} />}
+          {error && <ErrorPopup error={error} />}
+        </div>
+      </div>
+    );
+  }
+}
+
+AccessDropdown.propTypes = {
+  result: PropTypes.object.isRequired,
+  dropdownOptions: PropTypes.array.isRequired,
+  updateEndpoint: PropTypes.string.isRequired,
+  entityType: PropTypes.string.isRequired,
+  onPermissionChanged: PropTypes.func.isRequired,
+};

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/ShareOptions/AccessLinks/CreateAccessLink.js

@@ -0,0 +1,98 @@
+/*
+ * This file is part of Invenio.
+ * Copyright (C) 2023-2024 CERN.
+ *
+ * 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 React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Table, Input, Dropdown, Button, Icon, Grid } from "semantic-ui-react";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+import { dropdownOptions } from "./LinksSearchResultContainer";
+
+export class CreateAccessLink extends Component {
+  constructor(props) {
+    super(props);
+    const { record } = this.props;
+    const isDraft = record?.is_draft || record?.is_draft === null;
+    this.state = {
+      description: undefined,
+      expiresAt: undefined,
+      permission: isDraft ? dropdownOptions[1].key : dropdownOptions[0].key, // "can view" option is disabled for drafts
+    };
+  }
+
+  render() {
+    const { permission, expiresAt, description } = this.state;
+    const { handleCreation, loading, dropdownOptions } = this.props;
+    return (
+      <Table.Row>
+        <Table.Cell width={16}>
+          <Grid>
+            <Grid.Column width={4}>
+              <Input
+                id="access-request-description"
+                onChange={(e, data) => this.setState({ description: data.value })}
+                fluid
+              />
+              <label
+                htmlFor="access-request-description"
+                className="helptext mb-0 mt-10"
+              >
+                {i18next.t("Short name for your link (optional).")}
+              </label>
+            </Grid.Column>
+            <Grid.Column width={4}>
+              <Input
+                id="access-request-expires-at"
+                onChange={(e, data) => {
+                  this.setState({ expiresAt: data.value });
+                }}
+                fluid
+                placeholder={i18next.t("Expiration date format: YYYY-MM-DD")}
+              />
+              <label
+                htmlFor="access-request-expires-at"
+                className="helptext mb-0 mt-10"
+              >
+                {i18next.t("Expiration date: YYYY-MM-DD or never if blank (optional).")}
+              </label>
+            </Grid.Column>
+            <Grid.Column width={4}>
+              <Dropdown
+                placeholder={i18next.t("Select permissions")}
+                fluid
+                selection
+                onChange={(event, data) => this.setState({ permission: data.value })}
+                options={dropdownOptions}
+                defaultValue={permission}
+              />
+            </Grid.Column>
+
+            <Grid.Column width={4} textAlign="right">
+              <Button
+                onClick={() => handleCreation(permission, expiresAt, description)}
+                icon
+                loading={loading}
+                disabled={loading}
+                labelPosition="left"
+                positive
+              >
+                <Icon name="code branch" />
+                {i18next.t("Create a new link")}
+              </Button>
+            </Grid.Column>
+          </Grid>
+        </Table.Cell>
+      </Table.Row>
+    );
+  }
+}
+
+CreateAccessLink.propTypes = {
+  handleCreation: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired,
+  dropdownOptions: PropTypes.array.isRequired,
+  record: PropTypes.object.isRequired,
+};

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/ShareOptions/AccessLinks/LinksSearchItem.js

@@ -0,0 +1,170 @@
+/*
+ * This file is part of Invenio.
+ * Copyright (C) 2023-2024 CERN.
+ * Copyright (C) 2024 KTH Royal Institute of Technology.
+ *
+ * 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 React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { Table, Popup, Icon, Button } from "semantic-ui-react";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+import { timestampToRelativeTime } from "../../../utils";
+import { AccessDropdown } from "./AccessDropdown";
+import _truncate from "lodash/truncate";
+import { isEmpty } from "lodash";
+import { withCancel, http, ErrorMessage } from "react-invenio-forms";
+
+export const LinksSearchItem = ({
+  result,
+  record,
+  onItemAddedOrDeleted,
+  onPermissionChanged,
+  dropdownOptions,
+}) => {
+  const [copied, setCopied] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(undefined);
+  var cancellableAction = undefined;
+
+  useEffect(() => {
+    return () => {
+      cancellableAction && cancellableAction.cancel();
+    };
+  }, [cancellableAction]);
+
+  const handleDelete = async () => {
+    setLoading(true);
+    cancellableAction = withCancel(
+      http.delete(`${record.links.access_links}/${result.id}`)
+    );
+    try {
+      await cancellableAction.promise;
+      setLoading(false);
+      onItemAddedOrDeleted(record.links.access_links, "links");
+    } catch (error) {
+      setLoading(false);
+      setError(error);
+      console.error(error);
+    }
+  };
+
+  const copyButtonRef = React.createRef();
+
+  useEffect(() => {
+    copyButtonRef.current?.focus(); // Accessiblity: focus the copy-button when modal opens
+  }, [copyButtonRef]);
+
+  useEffect(() => {
+    let popupTimeout = setTimeout(() => {
+      setCopied(false);
+    }, 1500);
+
+    return () => {
+      clearTimeout(popupTimeout);
+    };
+  }, [copied]);
+
+  const copyAccessLink = () => {
+    let selfLink = "";
+
+    if (result?.permission === "view") {
+      // point to `/records/<id>` even for drafts
+      selfLink = `${record.links.record_html || record.links.self_html}?`;
+    } else if (result?.permission === "preview") {
+      // point to `/records/<id>?preview=1` even for published records
+      selfLink = `${record.links.preview_html}&`;
+    } else if (result?.permission === "edit") {
+      selfLink = `${record.links.self_html}?`;
+    }
+
+    const accessLink = `${selfLink}token=${result.token}`;
+    navigator.clipboard.writeText(accessLink);
+    setCopied(true);
+  };
+
+  return (
+    <Table.Row key={result.id}>
+      {error && (
+        <ErrorMessage
+          header={i18next.t("Something went wrong")}
+          content={error?.response?.data?.message || error.message}
+          icon="exclamation"
+          negative
+          size="mini"
+        />
+      )}
+
+      {!error && (
+        <>
+          <Table.Cell width={3} data-label={i18next.t("Link title")}>
+            {isEmpty(result.description)
+              ? "-"
+              : _truncate(result.description, { length: 60 })}
+          </Table.Cell>
+          <Table.Cell width={3} data-label={i18next.t("Created")}>
+            {timestampToRelativeTime(result.created_at)}
+          </Table.Cell>
+          <Table.Cell width={3} data-label={i18next.t("Expires at")}>
+            {isEmpty(result.expires_at)
+              ? i18next.t("Never")
+              : `${timestampToRelativeTime(result.expires_at)} (${result.expires_at})`}
+          </Table.Cell>
+          <Table.Cell width={3} data-label={i18next.t("Access")}>
+            <AccessDropdown
+              updateEndpoint={`${record.links.access_links}/${result.id}`}
+              dropdownOptions={dropdownOptions}
+              result={result}
+              onPermissionChanged={onPermissionChanged}
+              entityType="links"
+            />
+          </Table.Cell>
+          <Table.Cell width={4}>
+            <Button
+              loading={loading}
+              disabled={loading}
+              onClick={handleDelete}
+              icon
+              labelPosition="left"
+              negative
+              size="small"
+            >
+              <Icon name="trash" />
+              {i18next.t("Delete")}
+            </Button>
+            <Popup
+              position="top center"
+              content={i18next.t("Copied!")}
+              inverted
+              open={copied}
+              on="click"
+              size="small"
+              trigger={
+                <Button
+                  ref={copyButtonRef}
+                  onClick={() => copyAccessLink(result?.id)}
+                  aria-label={i18next.t("Copy link")}
+                  size="small"
+                  icon
+                  labelPosition="left"
+                >
+                  <Icon name="copy outline" />
+                  {i18next.t("Copy link")}
+                </Button>
+              }
+            />
+          </Table.Cell>
+        </>
+      )}
+    </Table.Row>
+  );
+};
+
+LinksSearchItem.propTypes = {
+  result: PropTypes.object.isRequired,
+  record: PropTypes.object.isRequired,
+  onItemAddedOrDeleted: PropTypes.func.isRequired,
+  onPermissionChanged: PropTypes.func.isRequired,
+  dropdownOptions: PropTypes.array.isRequired,
+};