@truedat/core 6.3.1 → 6.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "6.3.1",
+  "version": "6.3.3",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,8 +34,9 @@
     "@babel/preset-react": "^7.18.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "6.2.3",
+    "@truedat/test": "6.3.3",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -117,5 +118,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "0c8183f86f4fe56211b82d2f2427c64f983f0b81"
+  "gitHead": "ee40175932833d26f2d0ca297ce5a3a26fb71cb2"
 }

package/src/api.js

@@ -6,3 +6,5 @@ export const API_MESSAGE = "/api/messages/:id";
 export const API_MESSAGES = "/api/messages";
 export const API_REINDEX_GRANTS = "/api/grants/search/reindex_all";
 export const API_REINDEX_STRUCTURES = "/api/data_structures/search/reindex_all";
+export const API_ACL_ENTRY = "/api/acl_entries/:id";
+export const API_ACL_RESOURCE_ENTRIES = "/api/acl_entries/:type/:id";

package/src/components/AddMemberForm.js

@@ -0,0 +1,178 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Button, Form } from "semantic-ui-react";
+import { useForm, Controller } from "react-hook-form";
+import { useIntl } from "react-intl";
+import { connect } from "react-redux";
+import {
+  accentInsensitivePathOrder,
+  lowerDeburrTrim,
+} from "@truedat/core/services/sort";
+import { HistoryBackButton } from "@truedat/core/components";
+import { getRecipients } from "@truedat/audit/selectors";
+import { useAclEntryCreate } from "@truedat/core/hooks/useAclEntries";
+
+const UsersSearchLoader = React.lazy(() =>
+  import("@truedat/auth/users/components/UsersSearchLoader")
+);
+const GroupsSearchLoader = React.lazy(() =>
+  import("@truedat/auth/groups/components/GroupsSearchLoader")
+);
+
+const MIN_SEARCH_CHARACTERS = 2;
+
+const roleOption = ({ id, name }) => ({ key: id, text: name, value: name });
+
+const roleOptions = (roles) =>
+  _.flow(
+    _.uniqBy("name"),
+    _.sortBy(accentInsensitivePathOrder("name")),
+    _.map(roleOption)
+  )(roles);
+
+export const AddMemberForm = ({ resource, onSuccess, roles, options }) => {
+  const { trigger: addDomainMember, isMutating: isSubmitting } =
+    useAclEntryCreate(resource);
+  const { formatMessage } = useIntl();
+  const [usersGroupsQuery, setUsersGroupsQuery] = useState("");
+  const { handleSubmit, control, formState } = useForm({
+    mode: "all",
+    defaultValues: { id: null, role: null, description: "" },
+  });
+  const onSubmit = ({ id, role, description }) => {
+    const [principal_type, principal_id] = _.split("_")(id);
+    const acl_entry = {
+      role_name: role,
+      resource_type: resource.type,
+      principal_type,
+      principal_id: _.toNumber(principal_id),
+      description,
+    };
+    addDomainMember({ acl_entry }, { onSuccess });
+  };
+  const { isDirty, isValid } = formState;
+
+  const onSearch = (_currentOptions, { searchQuery }) =>
+    setUsersGroupsQuery(lowerDeburrTrim(searchQuery));
+
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)}>
+      {_.size(usersGroupsQuery) >= MIN_SEARCH_CHARACTERS && (
+        <>
+          <UsersSearchLoader query={usersGroupsQuery} hideLoading />
+          <GroupsSearchLoader query={usersGroupsQuery} hideLoading />
+        </>
+      )}
+      <Controller
+        control={control}
+        name="id"
+        rules={{ required: true }}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Dropdown
+            placeholder={formatMessage({
+              id: "domain.member",
+            })}
+            clearable
+            onChange={(_e, { value }) => onChange(value)}
+            deburr
+            minCharacters={MIN_SEARCH_CHARACTERS}
+            onSearchChange={onSearch}
+            search={_.identity}
+            selection
+            options={options}
+            required
+            label={{
+              children: formatMessage({ id: "domain.member" }),
+              htmlFor: "principal",
+            }}
+            error={!!error}
+            onBlur={onBlur}
+            value={value}
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="role"
+        rules={{ required: true }}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Select
+            basic
+            clearable
+            error={!!error}
+            label={{
+              children: formatMessage({ id: "domain.role" }),
+              htmlFor: "role",
+            }}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            options={roles}
+            placeholder={formatMessage({ id: "domain.role" })}
+            required
+            search
+            searchInput={{ id: "role" }}
+            value={value}
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="description"
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            autoComplete="off"
+            error={!!error}
+            id="description"
+            label={formatMessage({ id: "domain.role.member.description" })}
+            maxLength="120"
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({
+              id: "domain.role.member.description",
+            })}
+            value={value}
+          />
+        )}
+      />
+      <div className="actions">
+        <Button
+          floated="right"
+          type="submit"
+          primary
+          loading={isSubmitting}
+          disabled={isSubmitting || !isDirty || !isValid}
+        >
+          {formatMessage({ id: "domain.actions.add_member" })}
+        </Button>
+        <HistoryBackButton
+          content={formatMessage({ id: "actions.cancel" })}
+          disabled={isSubmitting}
+        />
+      </div>
+    </Form>
+  );
+};
+
+AddMemberForm.propTypes = {
+  resource: PropTypes.object,
+  onSuccess: PropTypes.func,
+  roles: PropTypes.array,
+  options: PropTypes.array,
+};
+
+const mapStateToProps = (state) => ({
+  roles: roleOptions(state.roles),
+  options: getRecipients(state),
+});
+
+export default connect(mapStateToProps)(AddMemberForm);

package/src/components/AddResourceMember.js

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { Container, Header, Icon, Segment } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+
+import AddMemberForm from "./AddMemberForm";
+
+export const AddResourceMember = ({ type, id, onSuccess }) => (
+  <Container as={Segment} text>
+    <Header as="h2">
+      <Icon name="id card outline" />
+      <Header.Content>
+        <FormattedMessage id="domain.actions.add_member" />
+      </Header.Content>
+    </Header>
+    <AddMemberForm resource={{ type, id }} onSuccess={onSuccess} />
+  </Container>
+);
+
+AddResourceMember.propTypes = {
+  type: PropTypes.string,
+  onSuccess: PropTypes.func,
+  id: PropTypes.string,
+};
+
+export default AddResourceMember;

package/src/components/ResourceMember.js

@@ -0,0 +1,203 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import { useIntl } from "react-intl";
+import { Card, Form, Icon, Button, Popup } from "semantic-ui-react";
+import PropTypes from "prop-types";
+import { useAclEntryUpdate, useAclEntryDelete } from "../hooks/useAclEntries";
+
+import { ConfirmModal } from "./ConfirmModal";
+
+const memberTypeToIcon = {
+  group: "users",
+  user: "user",
+};
+
+const memberTypeToPopup = {
+  group: "Group",
+  user: "User",
+};
+
+const retrieveNameFromMember = (principal_type, principal) => {
+  switch (principal_type) {
+    case "group":
+      return null;
+    case "user":
+      return principal.user_name;
+  }
+};
+
+const retrieveFullNameFromMember = (principal_type, principal) => {
+  switch (principal_type) {
+    case "group":
+      return principal.name;
+    case "user":
+      return principal.full_name;
+  }
+};
+
+const DescriptionInput = ({
+  canUpdate,
+  description: currentDescription,
+  updateDescription,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const [description, setDescription] = useState(currentDescription || "");
+  const [editing, setEditing] = useState(false);
+
+  const handleChange = (_, { value }) => setDescription(value);
+
+  const handleSubmit = () => {
+    setEditing(false);
+    updateDescription(description);
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      setEditing(false);
+      setDescription(currentDescription);
+    }
+  };
+
+  return editing ? (
+    <Form onSubmit={handleSubmit}>
+      <Form.Group>
+        <Form.Input
+          autoComplete="off"
+          name="description"
+          value={description}
+          onKeyDown={handleKeyDown}
+          onChange={handleChange}
+          focus
+          inline
+          action={{
+            icon: "check",
+            type: "submit",
+          }}
+        />
+      </Form.Group>
+    </Form>
+  ) : (
+    <>
+      <span>{description}</span>{" "}
+      {canUpdate && (
+        <Popup
+          content={formatMessage({
+            id: "domain.member.update_description.tooltip",
+          })}
+          trigger={
+            <Icon
+              name="pencil alternate"
+              link
+              onClick={() => setEditing(true)}
+            />
+          }
+        />
+      )}
+    </>
+  );
+};
+
+DescriptionInput.propTypes = {
+  canUpdate: PropTypes.bool,
+  description: PropTypes.string,
+  updateDescription: PropTypes.func,
+};
+
+export const ResourceMember = ({
+  description,
+  role_name,
+  principal,
+  principal_type,
+  acl_entry_id,
+  onUpdate,
+  _links,
+}) => {
+  const { formatMessage } = useIntl();
+  const { trigger: updateDescription } = useAclEntryUpdate(acl_entry_id);
+  const { trigger: deleteMember, isMutating: isMemberDeleting } =
+    useAclEntryDelete(acl_entry_id);
+  const memberName = retrieveNameFromMember(principal_type, principal);
+  const fullName = retrieveFullNameFromMember(principal_type, principal);
+  const canDelete = _.flow(
+    _.path("self.methods"),
+    _.includes("DELETE")
+  )(_links);
+  const canUpdate = _.flow(
+    _.path("self.methods"),
+    _.includes("UPDATE")
+  )(_links);
+  return (
+    <Card className="domain-member">
+      <Card.Content className="domain-member__content">
+        <Card.Header>
+          <Popup
+            key={role_name}
+            trigger={<Icon name={memberTypeToIcon[principal_type]} />}
+            content={memberTypeToPopup[principal_type]}
+          />
+          {fullName}
+        </Card.Header>
+        <Card.Description>{memberName}</Card.Description>
+      </Card.Content>
+      {canDelete && (
+        <Card.Content
+          extra
+          className={
+            description
+              ? "domain-member__content-with-description"
+              : "domain-member__content-without-description"
+          }
+        >
+          <Card.Description className="domain-member__description">
+            <DescriptionInput
+              canUpdate={canUpdate}
+              description={description}
+              updateDescription={(description) => {
+                updateDescription(
+                  {
+                    id: acl_entry_id,
+                    acl_entry: { description },
+                  },
+                  { onSuccess: onUpdate }
+                );
+              }}
+            />
+          </Card.Description>
+
+          <ConfirmModal
+            header={formatMessage({ id: "domain.members.delete" })}
+            content={formatMessage({ id: "domain.members.delete.question" })}
+            onConfirm={() => deleteMember({}, { onSuccess: onUpdate })}
+            trigger={
+              <Button
+                className={
+                  description
+                    ? "button-domain_delete_description"
+                    : "button-domain_delete_without_description"
+                }
+                basic
+                floated="right"
+                icon="trash"
+                negative
+                loading={isMemberDeleting}
+              />
+            }
+          />
+        </Card.Content>
+      )}
+    </Card>
+  );
+};
+
+ResourceMember.propTypes = {
+  _links: PropTypes.object,
+  acl_entry_id: PropTypes.number,
+  description: PropTypes.string,
+  principal: PropTypes.object,
+  principal_type: PropTypes.string,
+  role_name: PropTypes.string,
+  onUpdate: PropTypes.func,
+};
+
+export default ResourceMember;

package/src/components/ResourceMembers.js

@@ -0,0 +1,105 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import { useParams } from "react-router-dom";
+import PropTypes from "prop-types";
+import { Card, Header, Input, Message, Grid } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { accentInsensitivePathOrder } from "../services/sort";
+import { useAclEntries } from "../hooks/useAclEntries";
+import { Loading } from "./Loading";
+
+import ResourceMember from "./ResourceMember";
+import ResourceMembersActions from "./ResourceMembersActions";
+
+const toSearchable = _.flow(_.deburr, _.toLower, _.trim);
+
+const matchesFilter = (filter) =>
+  _.flow(
+    _.at([
+      "principal.user_name",
+      "principal.full_name",
+      "role_name",
+      "principal.name",
+    ]),
+    _.map(toSearchable),
+    _.some(_.includes(toSearchable(filter)))
+  );
+
+const filterData = (filter, data) => {
+  return _.filter(matchesFilter(filter))(data);
+};
+
+export const ResourceMembers = ({ type }) => {
+  const { id } = useParams();
+  const {
+    data,
+    loading,
+    mutate: refreshAclEntries,
+  } = useAclEntries({ type, id });
+  const { aclEntries, actions } = data;
+  // debugger
+  const { formatMessage } = useIntl();
+  const [searchFilter, setSearchFilter] = useState("");
+
+  const filteredResourceMembers = filterData(searchFilter, aclEntries);
+  const groupedResourceMembers = _.flow(
+    _.sortBy(accentInsensitivePathOrder("role_name")),
+    _.groupBy("role_name"),
+    _.toPairs
+  )(filteredResourceMembers);
+
+  const handleFilterUsers = (_e, { value }) => {
+    setSearchFilter(value);
+  };
+  return (
+    <>
+      {!loading && (
+        <Grid centered columns={1}>
+          <Grid.Column>
+            <Input
+              onChange={handleFilterUsers}
+              value={searchFilter}
+              icon={{ name: "search", link: true }}
+              placeholder={formatMessage({ id: "user.search.placeholder" })}
+            />
+            <ResourceMembersActions resource={{ type, id }} actions={actions} />
+          </Grid.Column>
+        </Grid>
+      )}
+      {loading && <Loading inline="centered" />}
+      {_.isEmpty(filteredResourceMembers) && !loading && (
+        <Message
+          icon="warning"
+          header={formatMessage({ id: "domain.members.empty" })}
+        />
+      )}
+      {groupedResourceMembers.map(([groupName, members], groupIndex) => {
+        return (
+          <React.Fragment key={`fragment_${groupIndex}`}>
+            <Header as="h3" key={`group_${groupIndex}`} dividing>
+              {groupName}
+            </Header>
+            <Card.Group key={`card_group_${groupIndex}`}>
+              {_.sortBy(["principal.name", "principal.user_name"])(members).map(
+                (m) => (
+                  <ResourceMember
+                    key={`group_${groupIndex}.${m.acl_entry_id}`}
+                    resourceId={id}
+                    onUpdate={() => refreshAclEntries()}
+                    {...m}
+                  />
+                )
+              )}
+            </Card.Group>
+          </React.Fragment>
+        );
+      })}
+    </>
+  );
+};
+
+ResourceMembers.propTypes = {
+  type: PropTypes.string,
+};
+
+export default ResourceMembers;

package/src/components/ResourceMembersActions.js

@@ -0,0 +1,34 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+import { Button } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { linkTo } from "../routes";
+
+const newMemberLinks = {
+  domain: linkTo.DOMAIN_MEMBERS_NEW,
+  structure: linkTo.STRUCTURE_MEMBERS_NEW,
+};
+
+export const ResourceMembersActions = ({ resource: { type, id }, actions }) => {
+  const to = newMemberLinks[type]({ id });
+  return to && actions.canCreate ? (
+    <Button
+      floated="right"
+      primary
+      content={<FormattedMessage id="domain.actions.add_member" />}
+      icon="add user"
+      as={Link}
+      to={to}
+    />
+  ) : null;
+};
+
+ResourceMembersActions.propTypes = {
+  resource: PropTypes.object,
+  actions: PropTypes.shape({
+    canCreate: PropTypes.bool,
+  }),
+};
+
+export default ResourceMembersActions;

package/src/components/__tests__/AddMemberForm.spec.js

@@ -0,0 +1,92 @@
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
+import { intl } from "@truedat/test/intl-stub";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import { apiJsonPost } from "@truedat/core/services/api";
+import { AddMemberForm } from "../AddMemberForm";
+
+// workaround for enzyme issue with React.useContext
+// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
+jest.spyOn(React, "useContext").mockImplementation(() => intl);
+
+jest.mock("@truedat/core/services/api", () => {
+  const originalModule = jest.requireActual("@truedat/core/services/api");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    apiJsonPost: jest.fn(),
+  };
+});
+
+describe("<AddMemberForm />", () => {
+  const onSuccess = jest.fn();
+  const resource = {
+    type: "domain",
+    id: 1,
+  };
+  const options = [
+    { key: 1, text: "john", value: "user_1", id: 1 },
+    { key: 2, text: "mambo", value: "group_2", id: 2 },
+  ];
+  const roles = [
+    { key: 1, text: "role1", value: "role1" },
+    { key: 2, text: "role2", value: "role2" },
+  ];
+  const props = { onSuccess, resource, options, roles };
+
+  it("matches the latest snapshot", async () => {
+    const { container, findByRole } = render(
+      <MemoryRouter>
+        <AddMemberForm {...props} />
+      </MemoryRouter>
+    );
+    await findByRole("button", { name: /add_member/ });
+    expect(container).toMatchSnapshot();
+  });
+
+  it("calls onSuccess with acl data on submit correctly", async () => {
+    const { findByRole, getByRole, findByText } = render(
+      <MemoryRouter>
+        <AddMemberForm {...props} />
+      </MemoryRouter>
+    );
+
+    // Submit button should initially be disabled
+    await waitFor(() =>
+      expect(getByRole("button", { name: /add_member/ })).toBeDisabled()
+    );
+
+    // Select principal
+    userEvent.click(await findByText(/john/));
+
+    // Select role
+    userEvent.click(await findByRole("textbox", { name: "domain.role" }));
+    userEvent.click(await findByRole("option", { name: "role2" }));
+
+    // Submit button should now be enabled
+    await waitFor(() =>
+      expect(getByRole("button", { name: /add_member/ })).not.toBeDisabled()
+    );
+
+    // Description
+    userEvent.type(await findByRole("textbox", { name: /description/ }), "foo");
+
+    // Submit
+    userEvent.click(await findByRole("button", { name: /add_member/ }));
+
+    await waitFor(() =>
+      expect(apiJsonPost).toHaveBeenCalledWith("/api/acl_entries/domain/1", {
+        acl_entry: {
+          role_name: "role2",
+          resource_type: "domain",
+          principal_type: "user",
+          principal_id: 1,
+          description: "foo",
+        },
+      })
+    );
+  });
+});

package/src/components/__tests__/AddResourceMember.spec.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { AddResourceMember } from "../AddResourceMember";
+
+const props = {
+  type: "domain",
+  id: 1,
+  onSuccess: jest.fn(),
+};
+
+describe("<AddResourceMember />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<AddResourceMember {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+});