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/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,
+};

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

@@ -0,0 +1,236 @@
+/*
+ * 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 { i18next } from "@translations/invenio_app_rdm/i18next";
+import React, { Component } from "react";
+import _isEmpty from "lodash/isEmpty";
+import { Table, Message, Loader } from "semantic-ui-react";
+import PropTypes from "prop-types";
+import { withCancel } from "react-invenio-forms";
+import { http } from "react-invenio-forms";
+import { CreateAccessLink } from "./CreateAccessLink";
+import { LinksSearchItem } from "./LinksSearchItem";
+import { dropdownOptionsGenerator } from "react-invenio-forms";
+import _cloneDeep from "lodash/cloneDeep";
+
+export const dropdownOptions = [
+  {
+    key: "view",
+    name: "view",
+    text: i18next.t("Can view"),
+    title: i18next.t("Can view"),
+    value: "view",
+    description: i18next.t("Can view restricted files of all versions of this record."),
+  },
+  {
+    key: "preview",
+    name: "preview",
+    text: i18next.t("Can preview drafts"),
+    title: i18next.t("Can preview drafts"),
+    value: "preview",
+    description: i18next.t(
+      "Can view drafts, restricted files, and comment on associated draft requests of all versions of this record."
+    ),
+  },
+  {
+    key: "edit",
+    name: "edit",
+    text: i18next.t("Can edit"),
+    title: i18next.t("Can edit"),
+    value: "edit",
+    description: i18next.t(
+      "Can edit drafts, view restricted files, and comment on associated draft requests of all versions of this record."
+    ),
+  },
+];
+
+export class LinksSearchResultContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+      error: undefined,
+    };
+  }
+
+  componentWillUnmount() {
+    this.cancellableAction && this.cancellableAction.cancel();
+  }
+
+  renderErrorMessages(messages) {
+    const uniqueMessages = [...new Set(messages)];
+    if (uniqueMessages.length === 1) {
+      return messages[0];
+    } else {
+      return (
+        <ul>
+          {uniqueMessages.map((m) => (
+            <li key={m}>{m}</li>
+          ))}
+        </ul>
+      );
+    }
+  }
+
+  errorMessage = () => {
+    const { error } = this.state;
+    const errorMessage = error?.response?.data?.message || error?.message;
+    const listOfErrors = error?.response?.data?.errors;
+    return (
+      <Message className="mb-30" negative>
+        {errorMessage}
+        {listOfErrors &&
+          listOfErrors.map((element) => (
+            <Message.Item key={element.field}>
+              <b>
+                {element.field.charAt(0).toUpperCase() +
+                  element.field.slice(1).replace("_", " ")}
+              </b>
+              : {this.renderErrorMessages(element.messages)}
+            </Message.Item>
+          ))}
+      </Message>
+    );
+  };
+
+  handleCreation = async (permission, expiresAt, description) => {
+    const { onItemAddedOrDeleted, record } = this.props;
+    this.setState({ loading: true });
+    try {
+      const data = {
+        permission: permission,
+        expires_at: expiresAt,
+        description: description,
+      };
+      this.cancellableAction = withCancel(http.post(record.links.access_links, data));
+      await this.cancellableAction.promise;
+      onItemAddedOrDeleted(record.links.access_links, "links");
+      this.setState({ loading: false, error: undefined });
+    } catch (error) {
+      if (error === "UNMOUNTED") return;
+      this.setState({
+        loading: false,
+        error: error,
+      });
+      console.error(error);
+    }
+  };
+
+  generateDropdownOptions = () => {
+    const { record } = this.props;
+
+    // "can view" option is disabled for drafts
+    const dropdownOptionsCopy = _cloneDeep(dropdownOptions);
+    if (record?.is_draft || record?.is_draft === null) {
+      const viewOption = dropdownOptionsCopy.find((item) => item.key === "view");
+      viewOption.text = i18next.t(
+        "Can view (view access link can be created only after the record is published)"
+      );
+    }
+
+    const options = dropdownOptionsGenerator(dropdownOptionsCopy);
+    if (record?.is_draft || record?.is_draft === null) {
+      const viewOption = options.find((item) => item.key === "view");
+      viewOption.disabled = true;
+    }
+    return options;
+  };
+
+  checkIfLinkExpirationError = (error) => {
+    const response = error?.response;
+    const data = response?.data;
+    const errors = data?.errors;
+    const hasExpirationError = errors?.some(
+      (errorObject) => errorObject?.field === "expires_at"
+    );
+    return hasExpirationError;
+  };
+
+  render() {
+    const {
+      results,
+      record,
+      onItemAddedOrDeleted,
+      onPermissionChanged,
+      isAccessLinksExpirationRequired,
+    } = this.props;
+    const { loading, error } = this.state;
+    const hasLinkExpirationDateError = this.checkIfLinkExpirationError(error);
+    return (
+      <>
+        {error && this.errorMessage()}
+
+        <Table className="fixed-header">
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell data-label="Link title" width={3}>
+                {i18next.t("Link title")}
+              </Table.HeaderCell>
+              <Table.HeaderCell data-label="Created" width={3}>
+                {i18next.t("Created")}
+              </Table.HeaderCell>
+              <Table.HeaderCell data-label="Expires at" width={3}>
+                {i18next.t("Expires")}
+              </Table.HeaderCell>
+              <Table.HeaderCell data-label="Access" width={3}>
+                {i18next.t("Access")}
+              </Table.HeaderCell>
+              <Table.HeaderCell width={4} />
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {loading ? (
+              <Loader />
+            ) : !_isEmpty(results) ? (
+              results.map((result) => (
+                <LinksSearchItem
+                  key={result.id}
+                  result={result}
+                  record={record}
+                  onItemAddedOrDeleted={onItemAddedOrDeleted}
+                  onPermissionChanged={onPermissionChanged}
+                  dropdownOptions={
+                    result.permission === "view"
+                      ? dropdownOptionsGenerator(dropdownOptions)
+                      : this.generateDropdownOptions()
+                  }
+                />
+              ))
+            ) : (
+              <Table.Row textAlign="center">
+                <p className="mt-10">
+                  <i>
+                    <h5>{i18next.t("This record has no links generated yet.")}</h5>
+                  </i>
+                </p>
+              </Table.Row>
+            )}
+          </Table.Body>
+        </Table>
+
+        <Table color="green">
+          <CreateAccessLink
+            hasLinkExpirationError={hasLinkExpirationDateError}
+            handleCreation={this.handleCreation}
+            loading={loading}
+            record={record}
+            dropdownOptions={this.generateDropdownOptions()}
+            isAccessLinksExpirationRequired={isAccessLinksExpirationRequired}
+          />
+        </Table>
+      </>
+    );
+  }
+}
+
+LinksSearchResultContainer.propTypes = {
+  results: PropTypes.array.isRequired,
+  record: PropTypes.object.isRequired,
+  onItemAddedOrDeleted: PropTypes.func.isRequired,
+  onPermissionChanged: PropTypes.func.isRequired,
+  isAccessLinksExpirationRequired: PropTypes.bool.isRequired,
+};

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

@@ -0,0 +1,106 @@
+// This file is part of InvenioRDM
+// Copyright (C) 2023-2024 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, { Component } from "react";
+import { Modal, Loader } from "semantic-ui-react";
+import PropTypes from "prop-types";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+import { ErrorMessage } from "react-invenio-forms";
+import { LinksSearchResultContainer } from "./LinksSearchResultContainer";
+import { withCancel } from "react-invenio-forms";
+import { http } from "react-invenio-forms";
+
+export class LinksTab extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+      error: undefined,
+    };
+  }
+
+  componentDidMount() {
+    this.fetchLinks();
+  }
+
+  componentWillUnmount() {
+    this.cancellableAction && this.cancellableAction.cancel();
+  }
+
+  onLinksAddedOrDeleted = async () => {
+    await this.fetchLinks(true);
+  };
+
+  onPermissionChanged = (id, permission) => {
+    const { results } = this.props;
+    results.forEach((result) => {
+      if (result.id === id) {
+        result.permission = permission;
+      }
+    });
+  };
+
+  fetchLinks = async (isDataChanged) => {
+    const { record, results, updateLinksState } = this.props;
+    if (results && !isDataChanged) return;
+
+    this.setState({ loading: true });
+    try {
+      this.cancellableAction = withCancel(http.get(record.links.access_links));
+      const response = await this.cancellableAction.promise;
+
+      this.setState({
+        loading: false,
+        error: undefined,
+      });
+      updateLinksState(response.data.hits.hits, isDataChanged);
+    } catch (error) {
+      if (error === "UNMOUNTED") return;
+      this.setState({
+        loading: false,
+        error: error,
+      });
+      console.error(error);
+    }
+  };
+
+  render() {
+    const { record, results, isAccessLinksExpirationRequired } = this.props;
+    const { loading, error } = this.state;
+    return (
+      <>
+        {error && (
+          <ErrorMessage
+            header={i18next.t("Something went wrong")}
+            content={error?.response?.data?.message || error.message}
+            icon="exclamation"
+            negative
+            size="mini"
+          />
+        )}
+        <Modal.Content className="share-content">
+          {loading && <Loader />}
+          {!loading && results !== undefined && (
+            <LinksSearchResultContainer
+              results={results}
+              record={record}
+              onItemAddedOrDeleted={this.onLinksAddedOrDeleted}
+              onPermissionChanged={this.onPermissionChanged}
+              isAccessLinksExpirationRequired={isAccessLinksExpirationRequired}
+            />
+          )}
+        </Modal.Content>
+      </>
+    );
+  }
+}
+
+LinksTab.propTypes = {
+  record: PropTypes.string.isRequired,
+  results: PropTypes.array.isRequired,
+  updateLinksState: PropTypes.func.isRequired,
+  isAccessLinksExpirationRequired: PropTypes.bool.isRequired,
+};