@truedat/dd 5.18.3 → 5.20.0

package/src/components/StructureGrantDropdown.js

@@ -8,11 +8,11 @@ import { linkTo } from "@truedat/core/routes";
 import { Date } from "@truedat/core/components";
 
 import GrantChangeRequest from "./GrantChangeRequest";
-import GrantRemoval from "./GrantRemoval";
 import GrantRequestCancel from "./GrantRequestCancel";
 import StructureGrantRequestAddCart from "./StructureGrantRequestAddCart";
 
 const isNilOrEmpty = (value) => _.isEmpty(value) || _.isNil(value);
+
 export const StructureGrantDropdown = ({
   grantRequest,
   grantRequestStatus,
@@ -54,38 +54,10 @@ export const StructureGrantDropdown = ({
         }
         icon="info"
         text={formatMessage({
-          id: `grant.actions.view_request.confirmation.header`,
+          id: `grant.actions.viewRequest.confirmation.header`,
         })}
       />
     ),
-    requestRemoval: (
-      <GrantRemoval
-        grant={grant}
-        previousStructureQuery={previousStructureQuery}
-        key="requestRemoval"
-      >
-        <Dropdown.Item
-          icon="delete"
-          text={formatMessage({
-            id: `grant.actions.request_removal.confirmation.header`,
-          })}
-        />
-      </GrantRemoval>
-    ),
-    cancelRemoval: (
-      <GrantRemoval
-        grant={grant}
-        previousStructureQuery={previousStructureQuery}
-        key="cancelRemoval"
-      >
-        <Dropdown.Item
-          icon="delete"
-          text={formatMessage({
-            id: `grant.actions.cancel_removal.confirmation.header`,
-          })}
-        />
-      </GrantRemoval>
-    ),
     requestChange: (
       <GrantChangeRequest
         structure={structure}
@@ -133,14 +105,9 @@ export const StructureGrantDropdown = ({
         ? "structure.grant.modification.attended"
         : "structure.grant.access.attended",
     },
-    pendingRemovalGrant: {
-      color: "red",
-      options: [actions["cancelRemoval"]],
-      header: "structure.grant.has_grant_pending_removal",
-    },
     activeGrant: {
       color: "green",
-      options: [actions["requestChange"], actions["requestRemoval"]],
+      options: [actions["requestChange"]],
       header: "structure.grant.has_grant",
     },
   };
@@ -149,8 +116,6 @@ export const StructureGrantDropdown = ({
     ? "pendingRequest"
     : hasProcessingGrantRequest
     ? "processingRequest"
-    : grant?.pending_removal
-    ? "pendingRemovalGrant"
     : "activeGrant";
 
   const stateProps = dropdownStates[currentState];
@@ -173,7 +138,9 @@ export const StructureGrantDropdown = ({
 
   const popupContent = (
     <>
-      <Header as="h6">{formatMessage({ id: stateProps.header })}</Header>
+      {stateProps?.header ? (
+        <Header as="h6">{formatMessage({ id: stateProps.header })}</Header>
+      ) : null}
       {grantRequest ? grantRequestDetails : grantDetails}
     </>
   );
@@ -181,7 +148,7 @@ export const StructureGrantDropdown = ({
   const optionsWithCart =
     authorized && !requested
       ? [actions["addToCart"], ...stateProps.options]
-      : stateProps.options;
+      : stateProps?.options;
 
   const trigger = (
     <Dropdown

package/src/components/StructureGrantSummaryButton.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { useQuery } from "@apollo/client";
 import { connect } from "react-redux";
 import { Loading } from "@truedat/core/components";
-import { LATEST_GRANT_REQUEST_QUERY } from "../api/queries";
+import { LATEST_GRANT_REQUEST_BY_DS_QUERY } from "../api/queries";
 import StructureGrantRequestButton from "./StructureGrantRequestButton";
 import StructureGrantDropdown from "./StructureGrantDropdown";
 
@@ -17,7 +17,7 @@ export const StructureGrantSummaryButton = ({
 }) => {
   const { grant, id } = structure;
 
-  const { loading, error, data } = useQuery(LATEST_GRANT_REQUEST_QUERY, {
+  const { loading, error, data } = useQuery(LATEST_GRANT_REQUEST_BY_DS_QUERY, {
     fetchPolicy: "cache-and-network",
     variables: { id },
   });

package/src/components/StructureGrants.js

@@ -2,35 +2,25 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { Table, Button } from "semantic-ui-react";
+import { Table } from "semantic-ui-react";
 import { connect } from "react-redux";
+import { useHistory } from "react-router-dom";
 import { columnDecorator } from "@truedat/core/services";
+import { linkTo } from "@truedat/core/routes";
 import { getGrantsColumns } from "../selectors";
 import GrantRemoval from "./GrantRemoval";
 
-export const RemovalButton = ({ grant }) => (
-  <GrantRemoval grant={grant}>
-    {grant.pending_removal ? (
-      <Button size="mini" color="olive" icon="undo" />
-    ) : (
-      <Button size="mini" color="red" icon="delete" />
-    )}
-  </GrantRemoval>
-);
-
-RemovalButton.propTypes = {
-  grant: PropTypes.object,
-};
-
 const matchesStructure = ({ id }) => _.pathEq("data_structure.id", id);
 
 export const StructureGrants = ({
   columns,
   grants,
+  grantsActions,
   structure,
   userPermissions,
 }) => {
   const { formatMessage } = useIntl();
+  const history = useHistory();
   const canUpdateRemoval =
     userPermissions?.update_grant_removal &&
     _.any(matchesStructure(structure))(grants);
@@ -54,19 +44,31 @@ export const StructureGrants = ({
       </Table.Header>
       <Table.Body>
         {grants.map((grant, i) => (
-          <Table.Row key={i}>
+          // Move style to file after task to create "CSS entrypoint" is done
+          <Table.Row key={i} style={{ cursor: "pointer" }}>
             {columns.map((column, key) => (
               <Table.Cell
                 key={key}
                 textAlign={column.textAlign}
                 content={columnDecorator(column)(grant)}
+                onClick={(ev) => {
+                  /* Only do history.push if the table cell but not
+                   * some possibly contained anchor (or an element
+                   * inside an anchor, such as an icon) is clicked
+                   */
+                  !ev.target.closest("a") && history.push(linkTo.GRANT(grant));
+                }}
               />
             ))}
             {canUpdateRemoval ? (
               <Table.Cell
                 content={
                   matchesStructure(structure)(grant) ? (
-                    <RemovalButton grant={grant} />
+                    <GrantRemoval
+                      grant={grant}
+                      actions={grantsActions}
+                      userPermissions={userPermissions}
+                    />
                   ) : null
                 }
               />
@@ -80,6 +82,7 @@ export const StructureGrants = ({
 
 StructureGrants.propTypes = {
   grants: PropTypes.array,
+  grantsActions: PropTypes.object,
   columns: PropTypes.array,
   structure: PropTypes.object,
   userPermissions: PropTypes.object,
@@ -90,6 +93,7 @@ const mapStateToProps = (state) => ({
   structure: state.structure,
   columns: getGrantsColumns(state),
   userPermissions: state.userPermissions,
+  grantsActions: state?.structure?._actions?._grants,
 });
 
 export default connect(mapStateToProps)(StructureGrants);

package/src/components/StructureNoteActions.js

@@ -67,6 +67,7 @@ export const StructureNoteActions = ({
 
   const parsedActions = _.flow(
     _.toPairs,
+    _.reject(([action, _data]) => !_.get(action)(actionToIcon)),
     _.map(([action, data]) => {
       const baseAction = {
         key: action,

package/src/components/StructureNoteSuggestions.js

@@ -0,0 +1,179 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import {
+  Button,
+  Checkbox,
+  Container,
+  Divider,
+  Icon,
+  List,
+  Message,
+  Segment,
+} from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { apiJson } from "@truedat/core/services/api";
+
+export default function StructureNoteSuggestions({
+  aiSuggestionsAction,
+  applySuggestions,
+  template,
+  isModification,
+}) {
+  const [loadingSuggestion, setLoadingSuggestion] = useState();
+  const [suggestions, setSuggestions] = useState();
+  const [suggestionsError, setSuggestionsError] = useState();
+  const [selectedSuggestions, setSelectedSuggestions] = useState([]);
+
+  const { locale } = useIntl();
+
+  const suggestionKeys = _.keys(suggestions);
+  const fieldInSuggestions = ({ name }) => _.includes(name)(suggestionKeys);
+  const templateFields = _.flow(
+    _.prop("content"),
+    _.filter(({ fields }) => _.any(fieldInSuggestions)(fields)),
+    _.map(({ name, fields }) => ({
+      name,
+      fields: _.filter(fieldInSuggestions)(fields),
+    }))
+  )(template);
+  const validFields = _.flow(
+    _.prop("content"),
+    _.flatMap(({ fields }) =>
+      _.flow(
+        _.filter(({ editable }) => editable || !isModification),
+        _.map(({ name }) => name)
+      )(fields)
+    )
+  )(template);
+
+  const handleRequestSuggestions = () => {
+    setLoadingSuggestion(true);
+    setSuggestionsError(null);
+    setSelectedSuggestions([]);
+    setSuggestions(null);
+    const url = `${aiSuggestionsAction.href}?language=${locale}`;
+    apiJson(url).then(({ data: { data: suggestions } }) => {
+      if (_.prop("[0]")(suggestions) === "error") {
+        setSuggestionsError(
+          _.prop("[1].error.message")(suggestions) || _.prop("[1]")(suggestions)
+        );
+      } else {
+        setSuggestions(suggestions);
+        const selectedFields = _.flow(
+          _.keys,
+          _.filter(
+            (key) =>
+              _.includes(key)(validFields) && !_.isEmpty(suggestions[key])
+          )
+        )(suggestions);
+        setSelectedSuggestions(selectedFields);
+      }
+      setLoadingSuggestion(false);
+    });
+  };
+  const handleApplySuggestions = () => {
+    applySuggestions(_.pick(selectedSuggestions)(suggestions));
+    setSelectedSuggestions([]);
+    setSuggestions(null);
+  };
+
+  const toggleSelectedSuggestion = (name) => {
+    setSelectedSuggestions(
+      _.includes(name)(selectedSuggestions)
+        ? _.reject((v) => v == name)(selectedSuggestions)
+        : [...selectedSuggestions, name]
+    );
+  };
+
+  return (
+    <Segment loading={loadingSuggestion}>
+      <Container style={{ display: "flex", justifyContent: "space-between" }}>
+        <h4>
+          {suggestions ? (
+            <Icon name="lightbulb outline" />
+          ) : (
+            <Icon name="lightbulb" />
+          )}
+          <FormattedMessage id="structure_note.ai_suggestion.header" />
+        </h4>
+        <Divider hidden />
+        {suggestions ? null : (
+          <Button onClick={handleRequestSuggestions}>
+            <FormattedMessage id="actions.ai_suggestion" />
+          </Button>
+        )}
+      </Container>
+      {suggestionsError ? (
+        <Message negative>
+          <Message.Header>
+            <FormattedMessage id="structure_note.ai_suggestion.error" />
+          </Message.Header>
+          <p>{suggestionsError}</p>
+        </Message>
+      ) : null}
+      {suggestions ? (
+        <>
+          {_.map(({ name: groupName, fields }) => (
+            <Container key={`group-${groupName}`}>
+              <>
+                <h5>{groupName ? groupName : ""}</h5>
+                <List>
+                  {_.map(({ name, label, editable }) => (
+                    <List.Item
+                      key={name}
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "12px",
+                      }}
+                    >
+                      <Checkbox
+                        id={name}
+                        disabled={
+                          (isModification && !editable) ||
+                          _.isEmpty(suggestions[name])
+                        }
+                        checked={_.includes(name)(selectedSuggestions)}
+                        onChange={() => toggleSelectedSuggestion(name)}
+                      />
+                      <label
+                        htmlFor={name}
+                        style={{ cursor: "pointer" }}
+                        disabled
+                      >
+                        <List.Header>{label}</List.Header>
+                        <List.Description>
+                          {_.isEmpty(suggestions[name])
+                            ? "-"
+                            : suggestions[name]}
+                        </List.Description>
+                      </label>
+                    </List.Item>
+                  ))(fields)}
+                </List>
+                <Divider hidden />
+              </>
+            </Container>
+          ))(templateFields)}
+          <Container textAlign="right">
+            <Button
+              primary
+              onClick={handleApplySuggestions}
+              disabled={_.isEmpty(selectedSuggestions)}
+            >
+              <FormattedMessage id="actions.apply_ai_suggestion" />
+            </Button>
+          </Container>
+        </>
+      ) : null}
+    </Segment>
+  );
+}
+
+StructureNoteSuggestions.propTypes = {
+  aiSuggestionsAction: PropTypes.object,
+  applySuggestions: PropTypes.func,
+  template: PropTypes.object,
+  isModification: PropTypes.bool,
+};

package/src/components/StructureNotesEdit.js

@@ -9,6 +9,7 @@ import { selectTemplate, selectDomains } from "@truedat/df/routines";
 import { applyTemplate, validateContent } from "@truedat/df/utils";
 import { doStructureNoteAction } from "../routines";
 import { getLatestDfContent } from "../selectors/getSortedStructureNotes";
+import StructureNoteSuggestions from "./StructureNoteSuggestions";
 
 const DynamicForm = React.lazy(() =>
   import("@truedat/df/components/DynamicForm")
@@ -29,6 +30,9 @@ export const StructureNotesEdit = ({
   latestDfContent,
 }) => {
   const [content, setContent] = useState(latestDfContent);
+  const aiSuggestionsAction = _.prop("_actions.ai_suggestions")(structureNotes);
+
+  const isModification = !_.isEmpty(latestDfContent);
 
   useEffect(() => {
     selectDomains(structure.domain_ids);
@@ -41,7 +45,7 @@ export const StructureNotesEdit = ({
     }
   }, [applyTemplate, template, latestDfContent, structure.domain_id]);
 
-  const { formatMessage } = useIntl();
+  const { formatMessage, locale } = useIntl();
 
   const submitDisabled =
     !template || _.size(validateContent(template)(content)) > 0;
@@ -67,14 +71,27 @@ export const StructureNotesEdit = ({
     doStructureNoteAction(payload);
   };
 
+  const applySuggestions = (suggestions) => {
+    setContent({ ...content, ...suggestions });
+  };
+
   return (
     <Segment attached="bottom">
       <TemplateLoader />
+
+      {aiSuggestionsAction ? (
+        <StructureNoteSuggestions
+          aiSuggestionsAction={aiSuggestionsAction}
+          template={template}
+          applySuggestions={applySuggestions}
+          isModification={isModification}
+        />
+      ) : null}
       <Form>
         <DynamicForm
           onChange={setContent}
           content={content}
-          isModification={true}
+          isModification={isModification}
         />
         <Button
           primary

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

@@ -1,6 +1,7 @@
 import React from "react";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
 import { Grant } from "../Grant";
 import en from "../../messages/en";
 
@@ -45,7 +46,7 @@ describe("<Grant />", () => {
     },
   };
   const actions = {
-    request_removal: {},
+    manage_grant_removal: {},
   };
 
   const defaultProps = {
@@ -71,25 +72,28 @@ describe("<Grant />", () => {
     expect(container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot with cancel_removal action", () => {
+  it("matches the latest snapshot with manage_grant_removal action", async () => {
     const props = {
       ...defaultProps,
+      grant: { ...grant, pending_removal: true },
       actions: {
-        cancel_removal: {},
+        manage_grant_removal: {},
       },
     };
-    const { container } = render(<Grant {...props} />, renderOpts);
+    const { container, queryByText } = render(<Grant {...props} />, renderOpts);
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
     expect(container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot with update action", () => {
+  it("matches the latest snapshot with update action", async () => {
     const props = {
       ...defaultProps,
       actions: {
         update: {},
       },
     };
-    const { container } = render(<Grant {...props} />, renderOpts);
+    const { container, queryByText } = render(<Grant {...props} />, renderOpts);
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
     expect(container).toMatchSnapshot();
   });
 
@@ -102,7 +106,7 @@ describe("<Grant />", () => {
     userEvent.click(await findByText("yes"));
 
     expect(defaultProps.onStatusChange).toHaveBeenLastCalledWith({
-      action: "request_removal",
+      action: "mark_pending_removal",
       data_structure_id: 2,
       id: 1,
     });

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

@@ -1,68 +1,33 @@
 import React from "react";
-import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
-import { requestGrantRemoval } from "../../routines";
 import GrantRemoval from "../GrantRemoval";
 
 describe("<GrantRemoval />", () => {
   const grant = {
-    id: 1,
-    detail: { foo: "bar" },
-    data_structure: { id: 2 },
-    data_structure_version: { id: 3 },
+    id: 17,
   };
-  it("matches the latest snapshot", () => {
-    const { container } = render(
-      <GrantRemoval grant={grant}>
-        <p>child</p>
-      </GrantRemoval>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it("on click calls requestGrantRemoval routine if onConfirm si undefined", async () => {
-    const dispatch = jest.fn();
-    const { findByText } = render(
-      <GrantRemoval grant={grant}>
-        <p>child</p>
-      </GrantRemoval>,
-      { dispatch }
-    );
-
-    userEvent.click(await findByText("child"));
-    expect(await findByText("Request grant removal")).toBeInTheDocument();
 
-    userEvent.click(await findByText("Yes"));
+  const actions_with_request_cancel = {
+    manage_grant_removal: {},
+  };
 
-    expect(dispatch).toHaveBeenLastCalledWith({
-      ...requestGrantRemoval(),
-      payload: {
-        action: "request_removal",
-        data_structure_id: 2,
-        id: 1,
-        version: 3,
-      },
-    });
+  it("Mounts grant removal/reactivation button if user has permissions, remove", () => {
+    const { queryByText } = render(
+      <GrantRemoval
+        grant={{ ...grant, pending_removal: false }}
+        actions={actions_with_request_cancel}
+      />
+    );
+    expect(queryByText(/Remove/)).toBeInTheDocument();
   });
 
-  it("on click calls onConfirm prop", async () => {
-    const onConfirm = jest.fn();
-    const { findByText } = render(
-      <GrantRemoval grant={grant} onConfirm={onConfirm}>
-        <p>child</p>
-      </GrantRemoval>
+  it("Mounts grant removal/reactivation button if user has permissions, reactivate", () => {
+    const { queryByText } = render(
+      <GrantRemoval
+        grant={{ ...grant, pending_removal: true }}
+        actions={actions_with_request_cancel}
+      />
     );
-
-    userEvent.click(await findByText("child"));
-    expect(await findByText("Request grant removal")).toBeInTheDocument();
-
-    userEvent.click(await findByText("Yes"));
-
-    expect(onConfirm).toHaveBeenLastCalledWith({
-      action: "request_removal",
-      data_structure_id: 2,
-      id: 1,
-      version: 3,
-    });
+    expect(queryByText(/Reactivate/)).toBeInTheDocument();
   });
 });

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

@@ -0,0 +1,66 @@
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+
+import GrantRemovalDirectButton from "../GrantRemovalDirectButton";
+
+describe("<GrantRemovalDirectButton />", () => {
+  const grant = {
+    id: 1,
+    detail: { foo: "bar" },
+    data_structure: { id: 2 },
+    data_structure_version: { id: 3 },
+  };
+
+  it("on click calls requestGrantRemoval routine if onConfirm is undefined", async () => {
+    const requestGrantRemoval = jest.fn();
+    const { findByText } = render(
+      <GrantRemovalDirectButton
+        grant={grant}
+        operation="markPendingRemoval"
+        actions={{ manage_grant_removal: {} }}
+        requestGrantRemoval={requestGrantRemoval}
+        previousStructureQuery={{}}
+      />
+    );
+
+    userEvent.click(await findByText("Remove"));
+    expect(await findByText("Request grant removal")).toBeInTheDocument();
+
+    userEvent.click(await findByText("Yes"));
+
+    expect(requestGrantRemoval).toHaveBeenCalledWith({
+      action: "mark_pending_removal",
+      data_structure_id: 2,
+      id: 1,
+      version: 3,
+      previousStructureQuery: {},
+    });
+  });
+
+  it("on click calls onConfirm prop", async () => {
+    const onConfirm = jest.fn();
+    const { findByText } = render(
+      <GrantRemovalDirectButton
+        grant={grant}
+        operation="markPendingRemoval"
+        actions={{ manage_grant_removal: {} }}
+        onConfirm={onConfirm}
+        previousStructureQuery={{}}
+      />
+    );
+
+    userEvent.click(await findByText("Remove"));
+    expect(await findByText("Request grant removal")).toBeInTheDocument();
+
+    userEvent.click(await findByText("Yes"));
+
+    expect(onConfirm).toHaveBeenLastCalledWith({
+      action: "mark_pending_removal",
+      data_structure_id: 2,
+      id: 1,
+      version: 3,
+      previousStructureQuery: {},
+    });
+  });
+});