@truedat/dd 5.18.3 → 5.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "5.18.3",
+  "version": "5.19.0",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "5.18.3",
-    "@truedat/core": "5.18.3",
-    "@truedat/df": "5.18.3",
+    "@truedat/auth": "5.19.0",
+    "@truedat/core": "5.19.0",
+    "@truedat/df": "5.19.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "path-to-regexp": "^1.7.0",
@@ -115,5 +115,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "ba00f358149f00dcdabb3e3edd883c54c0bbd43a"
+  "gitHead": "df3fcd6655456c3468259d79762800c3c417147d"
 }

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__/StructureNoteSuggestions.spec.js

@@ -0,0 +1,151 @@
+import React, { Suspense } from "react";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import StructureNoteSuggestions from "../StructureNoteSuggestions";
+
+const mockSuggestions = {
+  editable_field: "editable_field_value",
+  non_editable_field: "non_editable_field_value",
+  unselect_field: "unselect_field_value",
+};
+jest.mock("@truedat/core/services/api", () => ({
+  apiJson: (url) => ({
+    then: (callback) =>
+      callback({
+        data: {
+          data: url.startsWith("suggestions")
+            ? mockSuggestions
+            : url.startsWith("error_message")
+            ? ["error", { error: { message: "ERROR MESSAGE" } }]
+            : ["error", "ERROR TEXT"],
+        },
+      }),
+  }),
+}));
+
+const messages = {
+  en: {
+    "actions.cancel": "cancel",
+    "actions.save": "save",
+    "structure_note.ai_suggestion.header": "header",
+    "actions.apply_ai_suggestion": "actions.apply_ai_suggestion",
+    "actions.ai_suggestion": "actions.ai_suggestion",
+    "structure_note.ai_suggestion.error": "error",
+  },
+};
+
+describe("<StructureNoteSuggestions />", () => {
+  it("matches the latest snapshot", () => {
+    const props = {
+      template: {},
+    };
+    const { container } = render(
+      <Suspense fallback={null}>
+        <StructureNoteSuggestions {...props} />
+      </Suspense>,
+      { messages }
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("component lifecycle", async () => {
+    const applySuggestions = jest.fn();
+    const props = {
+      aiSuggestionsAction: { href: "suggestions" },
+      applySuggestions,
+      template: {
+        content: [
+          {
+            fields: [
+              {
+                name: "editable_field",
+                label: "EditableField",
+                editable: true,
+              },
+            ],
+          },
+          {
+            name: "Group2",
+            fields: [
+              {
+                name: "non_editable_field",
+                label: "NonEditableField",
+                editable: false,
+              },
+              {
+                name: "unselect_field",
+                label: "UnselectedField",
+                editable: true,
+              },
+            ],
+          },
+        ],
+      },
+      isModification: true,
+    };
+    const { container, findByText, queryByText } = render(
+      <Suspense fallback={null}>
+        <StructureNoteSuggestions {...props} />
+      </Suspense>,
+      { messages }
+    );
+
+    userEvent.click(await findByText(/actions.ai_suggestion/i));
+    await waitFor(() =>
+      expect(queryByText(/actions.ai_suggestion/i)).not.toBeInTheDocument()
+    );
+
+    expect(container).toMatchSnapshot();
+
+    userEvent.click(await findByText(/UnselectedField/i));
+    userEvent.click(await findByText(/UnselectedField/i));
+    userEvent.click(await findByText(/UnselectedField/i));
+
+    userEvent.click(await findByText(/actions.apply_ai_suggestion/i));
+    await waitFor(() =>
+      expect(
+        queryByText(/actions.apply_ai_suggestion/i)
+      ).not.toBeInTheDocument()
+    );
+    expect(applySuggestions).toHaveBeenCalledWith(
+      expect.objectContaining({ editable_field: "editable_field_value" })
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders error with message", async () => {
+    const props = {
+      aiSuggestionsAction: { href: "error_message" },
+    };
+    const { container, findByText, queryByText } = render(
+      <Suspense fallback={null}>
+        <StructureNoteSuggestions {...props} />
+      </Suspense>,
+      { messages }
+    );
+
+    userEvent.click(await findByText(/actions.ai_suggestion/i));
+    await waitFor(() =>
+      expect(queryByText(/error message/i)).toBeInTheDocument()
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders error with message", async () => {
+    const props = {
+      aiSuggestionsAction: { href: "error_text" },
+    };
+    const { container, findByText, queryByText } = render(
+      <Suspense fallback={null}>
+        <StructureNoteSuggestions {...props} />
+      </Suspense>,
+      { messages }
+    );
+
+    userEvent.click(await findByText(/actions.ai_suggestion/i));
+    await waitFor(() => expect(queryByText(/error text/i)).toBeInTheDocument());
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -28,6 +28,40 @@ describe("<StructureNotesEdit />", () => {
     expect(container).toMatchSnapshot();
   });
 
+  it("matches the latest snapshot with ai suggestion action", () => {
+    const props = {
+      structure: { id: 1 },
+      template: { id: 2 },
+      doStructureNoteAction: () => {},
+      selectTemplate: () => {},
+      selectDomain: () => {},
+      structureNotes: {
+        _actions: {
+          ai_suggestions: { href: "suggestion" },
+        },
+        structureNotes: [],
+      },
+      latestDfContent: { foo: "bar" },
+      applyTemplate: applyTemplate({ id: 2 }),
+      selectDomains: jest.fn(),
+    };
+    const { container } = render(
+      <Suspense fallback={null}>
+        <StructureNotesEdit {...props} />
+      </Suspense>,
+      {
+        messages: {
+          en: {
+            "actions.cancel": "cancel",
+            "actions.save": "save",
+            "structure_note.ai_suggestion.header": "header",
+            "actions.ai_suggestion": "ai_suggestion",
+          },
+        },
+      }
+    );
+    expect(container).toMatchSnapshot();
+  });
   it("calls doStructureNoteAction when submit is clicked", async () => {
     const doStructureNoteAction = jest.fn();
     const template = {

package/src/components/__tests__/__snapshots__/StructureNoteSuggestions.spec.js.snap

@@ -0,0 +1,316 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<StructureNoteSuggestions /> component lifecycle 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <div
+      class="ui container"
+      style="display: flex; justify-content: space-between;"
+    >
+      <h4>
+        <i
+          aria-hidden="true"
+          class="lightbulb outline icon"
+        />
+        header
+      </h4>
+      <div
+        class="ui hidden divider"
+      />
+    </div>
+    <div
+      class="ui container"
+    >
+      <h5 />
+      <div
+        class="ui list"
+        role="list"
+      >
+        <div
+          class="item"
+          role="listitem"
+          style="display: flex; align-items: center; gap: 12px;"
+        >
+          <div
+            class="ui checked fitted checkbox"
+          >
+            <input
+              checked=""
+              class="hidden"
+              id="editable_field"
+              readonly=""
+              tabindex="0"
+              type="checkbox"
+              value=""
+            />
+            <label
+              for="editable_field"
+            />
+          </div>
+          <label
+            disabled=""
+            for="editable_field"
+            style="cursor: pointer;"
+          >
+            <div
+              class="header"
+            >
+              EditableField
+            </div>
+            <div
+              class="description"
+            >
+              editable_field_value
+            </div>
+          </label>
+        </div>
+      </div>
+      <div
+        class="ui hidden divider"
+      />
+    </div>
+    <div
+      class="ui container"
+    >
+      <h5>
+        Group2
+      </h5>
+      <div
+        class="ui list"
+        role="list"
+      >
+        <div
+          class="item"
+          role="listitem"
+          style="display: flex; align-items: center; gap: 12px;"
+        >
+          <div
+            class="ui disabled fitted checkbox"
+          >
+            <input
+              class="hidden"
+              disabled=""
+              id="non_editable_field"
+              readonly=""
+              tabindex="-1"
+              type="checkbox"
+              value=""
+            />
+            <label
+              for="non_editable_field"
+            />
+          </div>
+          <label
+            disabled=""
+            for="non_editable_field"
+            style="cursor: pointer;"
+          >
+            <div
+              class="header"
+            >
+              NonEditableField
+            </div>
+            <div
+              class="description"
+            >
+              non_editable_field_value
+            </div>
+          </label>
+        </div>
+        <div
+          class="item"
+          role="listitem"
+          style="display: flex; align-items: center; gap: 12px;"
+        >
+          <div
+            class="ui checked fitted checkbox"
+          >
+            <input
+              checked=""
+              class="hidden"
+              id="unselect_field"
+              readonly=""
+              tabindex="0"
+              type="checkbox"
+              value=""
+            />
+            <label
+              for="unselect_field"
+            />
+          </div>
+          <label
+            disabled=""
+            for="unselect_field"
+            style="cursor: pointer;"
+          >
+            <div
+              class="header"
+            >
+              UnselectedField
+            </div>
+            <div
+              class="description"
+            >
+              unselect_field_value
+            </div>
+          </label>
+        </div>
+      </div>
+      <div
+        class="ui hidden divider"
+      />
+    </div>
+    <div
+      class="ui right aligned container"
+    >
+      <button
+        class="ui primary button"
+      >
+        actions.apply_ai_suggestion
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<StructureNoteSuggestions /> component lifecycle 2`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <div
+      class="ui container"
+      style="display: flex; justify-content: space-between;"
+    >
+      <h4>
+        <i
+          aria-hidden="true"
+          class="lightbulb icon"
+        />
+        header
+      </h4>
+      <div
+        class="ui hidden divider"
+      />
+      <button
+        class="ui button"
+      >
+        actions.ai_suggestion
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<StructureNoteSuggestions /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <div
+      class="ui container"
+      style="display: flex; justify-content: space-between;"
+    >
+      <h4>
+        <i
+          aria-hidden="true"
+          class="lightbulb icon"
+        />
+        header
+      </h4>
+      <div
+        class="ui hidden divider"
+      />
+      <button
+        class="ui button"
+      >
+        actions.ai_suggestion
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<StructureNoteSuggestions /> renders error with message 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <div
+      class="ui container"
+      style="display: flex; justify-content: space-between;"
+    >
+      <h4>
+        <i
+          aria-hidden="true"
+          class="lightbulb icon"
+        />
+        header
+      </h4>
+      <div
+        class="ui hidden divider"
+      />
+      <button
+        class="ui button"
+      >
+        actions.ai_suggestion
+      </button>
+    </div>
+    <div
+      class="ui negative message"
+    >
+      <div
+        class="header"
+      >
+        error
+      </div>
+      <p>
+        ERROR MESSAGE
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<StructureNoteSuggestions /> renders error with message 2`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <div
+      class="ui container"
+      style="display: flex; justify-content: space-between;"
+    >
+      <h4>
+        <i
+          aria-hidden="true"
+          class="lightbulb icon"
+        />
+        header
+      </h4>
+      <div
+        class="ui hidden divider"
+      />
+      <button
+        class="ui button"
+      >
+        actions.ai_suggestion
+      </button>
+    </div>
+    <div
+      class="ui negative message"
+    >
+      <div
+        class="header"
+      >
+        error
+      </div>
+      <p>
+        ERROR TEXT
+      </p>
+    </div>
+  </div>
+</div>
+`;

package/src/components/__tests__/__snapshots__/StructureNotesEdit.spec.js.snap

@@ -25,3 +25,52 @@ exports[`<StructureNotesEdit /> matches the latest snapshot 1`] = `
   </div>
 </div>
 `;
+
+exports[`<StructureNotesEdit /> matches the latest snapshot with ai suggestion action 1`] = `
+<div>
+  <div
+    class="ui bottom attached segment"
+  >
+    <div
+      class="ui segment"
+    >
+      <div
+        class="ui container"
+        style="display: flex; justify-content: space-between;"
+      >
+        <h4>
+          <i
+            aria-hidden="true"
+            class="lightbulb icon"
+          />
+          header
+        </h4>
+        <div
+          class="ui hidden divider"
+        />
+        <button
+          class="ui button"
+        >
+          ai_suggestion
+        </button>
+      </div>
+    </div>
+    <form
+      class="ui form"
+    >
+      <button
+        class="ui primary button"
+      >
+        save
+      </button>
+      <a
+        class="ui secondary button"
+        href="/"
+        role="button"
+      >
+        cancel
+      </a>
+    </form>
+  </div>
+</div>
+`;