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/ShareOptions/AccessUsersGroups/AccessUsersGroups.js

@@ -0,0 +1,178 @@
+// 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 _isEmpty from "lodash/isEmpty";
+import React, { Component } from "react";
+import { Modal, Loader, Container, Table, Grid, Item, Label } from "semantic-ui-react";
+import PropTypes from "prop-types";
+import { ErrorMessage, Image } from "react-invenio-forms";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+import { AddUserGroupAccessModal } from "./AddUserGroupAccessModal";
+import {
+  accessDropdownOptions,
+  UserGroupAccessSearchResultItem,
+} from "./UserGroupAccessSearchResultItem";
+
+export class AccessUsersGroups extends Component {
+  componentWillUnmount() {
+    this.cancellableAction && this.cancellableAction.cancel();
+  }
+
+  render() {
+    const {
+      record,
+      permissions,
+      endpoint,
+      searchType,
+      results,
+      loading,
+      error,
+      onGrantAddedOrDeleted,
+      onPermissionChanged,
+    } = this.props;
+    const recOwner = record?.expanded?.parent?.access?.owned_by;
+
+    let emptyResultText = "";
+    let tableHeaderText = "";
+    if (searchType === "user") {
+      emptyResultText = i18next.t("No user has access to this record yet.");
+      tableHeaderText = i18next.t("People with access");
+    }
+    if (searchType === "role") {
+      emptyResultText = i18next.t("No group has access to this record yet.");
+      tableHeaderText = i18next.t("Groups with access");
+    }
+
+    return (
+      <>
+        {error && (
+          <ErrorMessage
+            header={i18next.t("Something went wrong")}
+            content={error?.response?.data?.message || error.message}
+            icon="exclamation"
+            className="text-align-left"
+            negative
+            size="mini"
+          />
+        )}
+        <Modal.Content className="share-content">
+          {loading && <Loader isLoading active />}
+          {!loading && results !== undefined && (
+            <>
+              <AddUserGroupAccessModal
+                isComputer={false}
+                accessDropdownOptions={accessDropdownOptions}
+                results={results}
+                record={record}
+                onGrantAddedOrDeleted={onGrantAddedOrDeleted}
+                searchType={searchType}
+                endpoint={endpoint}
+              />
+              <Table className="fixed-header">
+                <Table.Header>
+                  <Table.Row>
+                    <Table.HeaderCell width={8}>{tableHeaderText}</Table.HeaderCell>
+                    <Table.HeaderCell data-label="Access" width={4}>
+                      {i18next.t("Access")}
+                    </Table.HeaderCell>
+                    <Table.HeaderCell textAlign="center" width={3}>
+                      <AddUserGroupAccessModal
+                        isComputer
+                        accessDropdownOptions={accessDropdownOptions}
+                        results={results}
+                        record={record}
+                        onGrantAddedOrDeleted={onGrantAddedOrDeleted}
+                        searchType={searchType}
+                        endpoint={endpoint}
+                      />
+                    </Table.HeaderCell>
+                  </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                  {searchType === "user" && recOwner && (
+                    <Table.Row>
+                      <Table.Cell width={8}>
+                        <Grid textAlign="left" verticalAlign="middle">
+                          <Grid.Column>
+                            <Item className="flex">
+                              <Image
+                                src={recOwner.links?.avatar}
+                                avatar
+                                className="rel-ml-1"
+                                alt=""
+                              />
+                              <Item.Content className="ml-10 p-0">
+                                <Item.Header
+                                  className={`flex align-items-center ${
+                                    !recOwner.description ? "mt-5" : ""
+                                  }`}
+                                >
+                                  <b className="mr-10">
+                                    {recOwner.profile?.full_name || recOwner.username}
+                                  </b>
+                                  {recOwner.is_current_user && (
+                                    <Label size="tiny" className="primary">
+                                      {i18next.t("You")}
+                                    </Label>
+                                  )}
+                                </Item.Header>
+                                {recOwner.profile?.affiliations && (
+                                  <Item.Meta>
+                                    {recOwner.profile?.affiliations}
+                                  </Item.Meta>
+                                )}
+                              </Item.Content>
+                            </Item>
+                          </Grid.Column>
+                        </Grid>
+                      </Table.Cell>
+
+                      <Table.Cell
+                        textAlign="left"
+                        data-label={i18next.t("Access")}
+                        width={4}
+                      >
+                        {i18next.t("Owner")}
+                      </Table.Cell>
+                      <Table.Cell width={3} />
+                    </Table.Row>
+                  )}
+                  {results.map((result) => (
+                    <UserGroupAccessSearchResultItem
+                      key={result.subject.id}
+                      result={result}
+                      permissions={permissions}
+                      onGrantAddedOrDeleted={onGrantAddedOrDeleted}
+                      onPermissionChanged={onPermissionChanged}
+                      endpoint={endpoint}
+                      searchType={searchType}
+                    />
+                  ))}
+                </Table.Body>
+              </Table>
+            </>
+          )}
+          {!loading && !error && _isEmpty(results) && (
+            <Container className="mt-10" textAlign="center">
+              <h5>{emptyResultText}</h5>
+            </Container>
+          )}
+        </Modal.Content>
+      </>
+    );
+  }
+}
+
+AccessUsersGroups.propTypes = {
+  record: PropTypes.object.isRequired,
+  permissions: PropTypes.object.isRequired,
+  endpoint: PropTypes.string.isRequired,
+  searchType: PropTypes.oneOf(["group", "role", "user"]).isRequired,
+  onGrantAddedOrDeleted: PropTypes.func.isRequired,
+  onPermissionChanged: PropTypes.func.isRequired,
+  results: PropTypes.array.isRequired,
+  loading: PropTypes.bool.isRequired,
+  error: PropTypes.object.isRequired,
+};

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/ShareOptions/AccessUsersGroups/AddUserGroupAccessModal.js

@@ -0,0 +1,172 @@
+// This file is part of InvenioRDM
+// Copyright (C) 2024 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 React, { Component } from "react";
+import { Button, Modal, Checkbox } from "semantic-ui-react";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+import PropTypes from "prop-types";
+import { SearchWithRoleSelection } from "@js/invenio_communities/members";
+import { RichEditor } from "react-invenio-forms";
+import { GrantAccessApi } from "../api/api";
+import { UsersApi } from "@js/invenio_communities/api";
+import { GroupsApi } from "@js/invenio_communities/api";
+
+export class AddUserGroupAccessModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { open: false, notifyUser: true, message: undefined };
+  }
+
+  onSuccess = () => {
+    const { onGrantAddedOrDeleted, endpoint, searchType } = this.props;
+    onGrantAddedOrDeleted(`${endpoint}?expand=true`, searchType);
+    this.handleCloseModal();
+  };
+
+  updateMessage = (message) => {
+    this.setState({ message: message });
+  };
+
+  handleNotifyCheckboxClick = () => {
+    const { notifyUser } = this.state;
+    this.setState({ notifyUser: !notifyUser });
+  };
+
+  handleOpenModal = () => this.setState({ open: true });
+  handleCloseModal = () => {
+    this.setState({ open: false, notifyUser: true });
+  };
+
+  searchEntities = () => {
+    const { searchType } = this.props;
+    if (searchType === "user") {
+      const usersClient = new UsersApi();
+      return usersClient.suggestUsers;
+    }
+    if (searchType === "role") {
+      const groupsClient = new GroupsApi();
+      return groupsClient.getGroups;
+    }
+  };
+
+  render() {
+    const { results, record, isComputer, accessDropdownOptions, searchType } =
+      this.props;
+    const { open, notifyUser, message } = this.state;
+
+    const api = new GrantAccessApi(record);
+
+    const existingIds = [record.parent?.access?.owned_by?.user];
+    results.forEach((result) => {
+      existingIds.push(result?.subject?.id);
+    });
+
+    let addButtonText = "";
+    let searchBarTitle = "";
+    let selectedItemsHeader = "";
+    let searchBarTooltip = "";
+    let searchBarPlaceholder = "";
+    let doneButtonTipType = "";
+    if (searchType === "user") {
+      addButtonText = i18next.t("Add people");
+      searchBarTitle = i18next.t("User");
+      selectedItemsHeader = i18next.t("No selected users");
+      searchBarTooltip = i18next.t(
+        "Search for users to grant access (only users with a public profile can be invited)"
+      );
+      searchBarPlaceholder = i18next.t("Search by email, full name or username");
+      doneButtonTipType = i18next.t("users");
+    }
+    if (searchType === "role") {
+      addButtonText = i18next.t("Add groups");
+      searchBarTitle = i18next.t("Group");
+      selectedItemsHeader = i18next.t("No selected groups");
+      searchBarPlaceholder = i18next.t("Search for groups");
+      doneButtonTipType = i18next.t("groups");
+    }
+
+    return (
+      <Modal
+        role="dialog"
+        closeIcon
+        onClose={this.handleCloseModal}
+        onOpen={this.handleOpenModal}
+        closeOnDimmerClick={false}
+        open={open}
+        aria-label={addButtonText}
+        trigger={
+          <Button
+            className={!isComputer ? "mobile only tablet only mb-15" : ""}
+            content={addButtonText}
+            positive
+            size="medium"
+            icon="plus"
+            labelPosition="left"
+            floated={!isComputer ? "right" : undefined}
+          />
+        }
+      >
+        <Modal.Header as="h2">{addButtonText}</Modal.Header>
+        <SearchWithRoleSelection
+          key="access-users"
+          roleOptions={accessDropdownOptions}
+          modalClose={this.handleCloseModal}
+          action={api.createGrants}
+          fetchMembers={this.searchEntities()}
+          onSuccessCallback={this.onSuccess}
+          searchBarTitle={<label>{searchBarTitle}</label>}
+          searchBarTooltip={searchBarTooltip}
+          doneButtonText={i18next.t("Add")}
+          doneButtonIcon="plus"
+          radioLabel={i18next.t("Access")}
+          selectedItemsHeader={selectedItemsHeader}
+          message={message}
+          searchType={searchType}
+          messageComponent={
+            <>
+              <Checkbox
+                checked={notifyUser}
+                className="mb-20 mt-10"
+                label={i18next.t("Notify people")}
+                onClick={this.handleNotifyCheckboxClick}
+              />
+              {notifyUser && (
+                <>
+                  <p>
+                    <b>{i18next.t("Notification message")}</b>
+                  </p>
+                  <RichEditor
+                    inputValue={() => message} // () =>  Avoid re-rendering
+                    onBlur={(event, editor) => {
+                      this.updateMessage(editor.getContent());
+                    }}
+                  />
+                </>
+              )}
+            </>
+          }
+          notify={notifyUser}
+          doneButtonTip={i18next.t("You are about to add")}
+          doneButtonTipType={doneButtonTipType}
+          existingEntities={existingIds}
+          existingEntitiesDescription={i18next.t("Access already granted")}
+          searchBarPlaceholder={searchBarPlaceholder}
+        />
+      </Modal>
+    );
+  }
+}
+
+AddUserGroupAccessModal.propTypes = {
+  record: PropTypes.object.isRequired,
+  results: PropTypes.array.isRequired,
+  isComputer: PropTypes.bool.isRequired,
+  accessDropdownOptions: PropTypes.array.isRequired,
+  onGrantAddedOrDeleted: PropTypes.func.isRequired,
+  endpoint: PropTypes.string.isRequired,
+  searchType: PropTypes.oneOf(["group", "role", "user"]).isRequired,
+};

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/ShareOptions/AccessUsersGroups/GroupsTab.js

@@ -0,0 +1,88 @@
+// This file is part of InvenioRDM
+// Copyright (C) 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 PropTypes from "prop-types";
+import { AccessUsersGroups } from "./AccessUsersGroups";
+import { withCancel } from "react-invenio-forms";
+import { http } from "react-invenio-forms";
+
+export class GroupsTab extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+      error: undefined,
+    };
+  }
+
+  componentDidMount() {
+    this.fetchGroups();
+  }
+
+  onGroupAddedOrDeleted = async () => {
+    await this.fetchGroups(true);
+  };
+
+  onPermissionChanged = (id, permission) => {
+    const { results } = this.props;
+    results.forEach((result) => {
+      if (result.subject.id === id) {
+        result.permission = permission;
+      }
+    });
+  };
+
+  fetchGroups = async (isDataChanged) => {
+    const { record, results, updateGroupsState } = this.props;
+    if (results && !isDataChanged) return;
+
+    this.setState({ loading: true });
+    try {
+      this.cancellableAction = withCancel(
+        http.get(`${record.links.access_groups}?expand=true`)
+      );
+      const response = await this.cancellableAction.promise;
+      this.setState({
+        loading: false,
+        error: undefined,
+      });
+      updateGroupsState(response.data.hits.hits, isDataChanged);
+    } catch (error) {
+      if (error === "UNMOUNTED") return;
+      this.setState({
+        loading: false,
+        error: error,
+      });
+      console.error(error);
+    }
+  };
+
+  render() {
+    const { loading, error } = this.state;
+    const { record, permissions, results } = this.props;
+    return (
+      <AccessUsersGroups
+        searchType="role"
+        record={record}
+        permissions={permissions}
+        endpoint={`${record.links.access_groups}`}
+        results={results}
+        loading={loading}
+        error={error}
+        onGrantAddedOrDeleted={this.onGroupAddedOrDeleted}
+        onPermissionChanged={this.onPermissionChanged}
+      />
+    );
+  }
+}
+
+GroupsTab.propTypes = {
+  record: PropTypes.object.isRequired,
+  permissions: PropTypes.object.isRequired,
+  results: PropTypes.array.isRequired,
+  updateGroupsState: PropTypes.func.isRequired,
+};

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/ShareOptions/AccessUsersGroups/PeopleTab.js

@@ -0,0 +1,88 @@
+// This file is part of InvenioRDM
+// Copyright (C) 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 PropTypes from "prop-types";
+import { AccessUsersGroups } from "./AccessUsersGroups";
+import { withCancel } from "react-invenio-forms";
+import { http } from "react-invenio-forms";
+
+export class PeopleTab extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+      error: undefined,
+    };
+  }
+
+  componentDidMount() {
+    this.fetchUsers();
+  }
+
+  onUserAddedOrDeleted = async () => {
+    await this.fetchUsers(true);
+  };
+
+  onPermissionChanged = (id, permission) => {
+    const { results } = this.props;
+    results.forEach((result) => {
+      if (result.subject.id === id) {
+        result.permission = permission;
+      }
+    });
+  };
+
+  fetchUsers = async (isDataChanged) => {
+    const { record, results, updateUsersState } = this.props;
+    if (results && !isDataChanged) return;
+
+    this.setState({ loading: true });
+    try {
+      this.cancellableAction = withCancel(
+        http.get(`${record.links.access_users}?expand=true`)
+      );
+      const response = await this.cancellableAction.promise;
+      this.setState({
+        loading: false,
+        error: undefined,
+      });
+      updateUsersState(response.data.hits.hits, isDataChanged);
+    } catch (error) {
+      if (error === "UNMOUNTED") return;
+      this.setState({
+        loading: false,
+        error: error,
+      });
+      console.error(error);
+    }
+  };
+
+  render() {
+    const { loading, error } = this.state;
+    const { record, permissions, results } = this.props;
+    return (
+      <AccessUsersGroups
+        searchType="user"
+        record={record}
+        permissions={permissions}
+        endpoint={`${record.links.access_users}`}
+        results={results}
+        loading={loading}
+        error={error}
+        onGrantAddedOrDeleted={this.onUserAddedOrDeleted}
+        onPermissionChanged={this.onPermissionChanged}
+      />
+    );
+  }
+}
+
+PeopleTab.propTypes = {
+  record: PropTypes.object.isRequired,
+  permissions: PropTypes.object.isRequired,
+  results: PropTypes.array.isRequired,
+  updateUsersState: PropTypes.func.isRequired,
+};

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/ShareOptions/AccessUsersGroups/UserGroupAccessSearchResultItem.js

@@ -0,0 +1,158 @@
+// This file is part of InvenioRDM
+// Copyright (C) 2021-2024 CERN.
+// Copyright (C) 2021 Northwestern University.
+// Copyright (C) 2021 Graz University of Technology.
+// Copyright (C) 2023 TU Wien.
+//
+// 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 { Table, Button, Item, Label, Grid } from "semantic-ui-react";
+import { withCancel, http } from "react-invenio-forms";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+import PropTypes from "prop-types";
+import { SuccessIcon } from "@js/invenio_communities/members";
+import { Image, dropdownOptionsGenerator, ErrorMessage } from "react-invenio-forms";
+import { AccessDropdown } from "../AccessLinks/AccessDropdown";
+import { dropdownOptions } from "../AccessLinks/LinksSearchResultContainer";
+
+export const accessDropdownOptions = [
+  ...dropdownOptions,
+  {
+    key: "manage",
+    name: "manage",
+    text: i18next.t("Can manage"),
+    title: i18next.t("Can manage"),
+    value: "manage",
+    description: i18next.t(
+      "Can manage access, edit drafts, view restricted files, and comment on associated draft requests of all versions of this record."
+    ),
+  },
+];
+
+export class UserGroupAccessSearchResultItem extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { loading: false, success: undefined, error: undefined };
+  }
+  handleDelete = async () => {
+    const { result, endpoint } = this.props;
+    this.setState({ loading: true });
+    const cancellableAction = withCancel(
+      http.delete(`${endpoint}/${result?.expanded?.subject?.id}`)
+    );
+    try {
+      await cancellableAction.promise;
+      this.setState({ loading: false, success: true });
+      this.handleSuccess();
+    } catch (error) {
+      this.setState({ loading: false, error: error });
+      console.error(error);
+    }
+  };
+  handleSuccess = () => {
+    const { onGrantAddedOrDeleted, endpoint, searchType } = this.props;
+    onGrantAddedOrDeleted(`${endpoint}?expand=true`, searchType);
+  };
+
+  render() {
+    const { result, permissions, endpoint, searchType, onPermissionChanged } =
+      this.props;
+    const { loading, success, error } = this.state;
+    const entity = result.expanded.subject;
+    return (
+      <Table.Row>
+        {error && (
+          <ErrorMessage
+            header={i18next.t("Something went wrong")}
+            content={error?.response?.data?.message || error.message}
+            icon="exclamation"
+            negative
+            size="mini"
+          />
+        )}
+        {!error && (
+          <>
+            <Table.Cell width={8}>
+              <Grid textAlign="left" verticalAlign="middle">
+                <Grid.Column>
+                  <Item className="flex" key={result.id}>
+                    <Image
+                      src={entity.links?.avatar}
+                      avatar
+                      className="rel-ml-1"
+                      alt=""
+                    />
+                    <Item.Content className="ml-10 p-0">
+                      <Item.Header
+                        className={`flex align-items-center ${
+                          !entity.description ? "mt-5" : ""
+                        }`}
+                      >
+                        <b className="mr-10">
+                          {entity.profile?.full_name ||
+                            entity?.username ||
+                            entity?.name}
+                        </b>
+
+                        {entity.is_current_user && (
+                          <Label size="tiny" className="primary">
+                            {i18next.t("You")}
+                          </Label>
+                        )}
+                      </Item.Header>
+                      {entity.profile?.affiliations && (
+                        <Item.Meta>{entity.profile?.affiliations}</Item.Meta>
+                      )}
+                    </Item.Content>
+                  </Item>
+                </Grid.Column>
+              </Grid>
+            </Table.Cell>
+
+            <Table.Cell data-label={i18next.t("Access")} width={4}>
+              <AccessDropdown
+                updateEndpoint={`${endpoint}/${result?.expanded?.subject?.id}`}
+                dropdownOptions={dropdownOptionsGenerator(accessDropdownOptions)}
+                result={result}
+                onPermissionChanged={onPermissionChanged}
+                entityType={searchType}
+              />
+            </Table.Cell>
+
+            <Table.Cell data-label={i18next.t("Actions")} textAlign="center" width={3}>
+              <div>
+                {permissions.can_manage && (
+                  <>
+                    {success && <SuccessIcon timeOutDelay={3000} show={success} />}
+                    <Button
+                      size="small"
+                      labelPosition="left"
+                      icon="trash"
+                      className="fluid-computer-only"
+                      compact
+                      negative
+                      disabled={loading}
+                      loading={loading}
+                      content={i18next.t("Delete")}
+                      onClick={this.handleDelete}
+                    />
+                  </>
+                )}
+              </div>
+            </Table.Cell>
+          </>
+        )}
+      </Table.Row>
+    );
+  }
+}
+
+UserGroupAccessSearchResultItem.propTypes = {
+  result: PropTypes.object.isRequired,
+  permissions: PropTypes.object.isRequired,
+  onGrantAddedOrDeleted: PropTypes.func.isRequired,
+  onPermissionChanged: PropTypes.func.isRequired,
+  endpoint: PropTypes.string.isRequired,
+  searchType: PropTypes.oneOf(["group", "role", "user"]).isRequired,
+};