WIP: start updating the share modal

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

@@ -11,7 +11,7 @@ import React, { Component } from "react";
 import { Button, Grid, Icon, Message } from "semantic-ui-react";
 
 import { EditButton } from "./EditButton";
-import { ShareButton } from "./ShareButton";
+import { ShareButton } from "./ShareOptions/ShareButton";
 import { NewVersionButton } from "@js/invenio_rdm_records/";
 import PropTypes from "prop-types";
 import Overridable from "react-overridable";

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/landing_page/ShareOptions/GrantsTab.js

@@ -0,0 +1,101 @@
+// This file is part of InvenioRDM
+// Copyright (C) 2021 Northwestern University.
+// 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, { useEffect, useState } from "react";
+import { Dropdown, Icon, List, Button, Modal, Tab } from "semantic-ui-react";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+import { http } from "react-invenio-forms";
+import PropTypes from "prop-types";
+
+export const GrantsTab = ({ recid, dropdownOptions }) => {
+  const [accessGrants, setAccessGrants] = useState({});
+
+  useEffect(async () => {
+    try {
+      const result = await http.get(`/api/records/${recid}/access/grants?expand=1`);
+      const { hits } = result.data.hits;
+      setAccessGrants(hits);
+    } catch (err) {
+      console.log(err);
+    }
+  }, []);
+
+  const grantIconDict = {
+    edit: "edit",
+    view: "eye",
+    preview: "file alternate",
+  };
+
+  const handleGrantModeChange = (id, permission) => {
+    http
+      .patch(`/api/records/${recid}/access/grants/${id}?expand=1`, {
+        permission: permission,
+      })
+      .then((result) => {
+        let newAccessGrants = { ...accessGrants };
+        delete newAccessGrants[id];
+        newAccessGrants[result.data.id ?? id] = result.data;
+        setAccessGrants(newAccessGrants);
+      });
+  };
+
+  const handleDeleteGrant = (id) => {
+    http.delete(`/api/records/${recid}/access/grants/${id}`).then((_result) => {
+      const newAccessGrants = [...accessGrants];
+      delete newAccessGrants[id];
+      setAccessGrants(newAccessGrants);
+    });
+  };
+
+  return (
+    <>
+      <p>Access shared with users and groups</p>
+
+      <List>
+        {Object.keys(accessGrants).map((grantId) => (
+          <List.Item key={grantId}>
+            <List.Content>
+              <List.Icon name={grantIconDict[accessGrants[grantId].permission]} />
+              {accessGrants[grantId].expanded.subject.profile?.full_name ??
+                `Unknown user (#${accessGrants[grantId].expanded.subject.id})`}{" "}
+              {accessGrants[grantId].origin.startsWith("request:")
+                ? "(created via request)"
+                : "(created manually)"}
+              <Dropdown
+                className="ui small access-grant-dropdown"
+                size="small"
+                selectOnNavigation={false}
+                button
+                options={dropdownOptions}
+                defaultValue={accessGrants[grantId].permission}
+                onChange={(_event, { value }) => {
+                  handleGrantModeChange(grantId, value);
+                }}
+              />
+              <Button
+                size="small"
+                negative
+                icon
+                onClick={() => {
+                  handleDeleteGrant(grantId);
+                }}
+              >
+                <Icon name="trash alternate outline" />
+                {i18next.t("Revoke access")}
+              </Button>
+            </List.Content>
+          </List.Item>
+        ))}
+      </List>
+    </>
+  );
+};
+
+GrantsTab.propTypes = {
+  recid: PropTypes.string.isRequired,
+  dropdownOptions: PropTypes.array.isRequired,
+};