@truedat/bg 6.0.2 → 6.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "description": "Truedat Web Business Glossary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "6.0.2",
+    "@truedat/test": "6.0.3",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -86,9 +86,9 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "6.0.2",
-    "@truedat/df": "6.0.2",
-    "@truedat/lm": "6.0.2",
+    "@truedat/core": "6.0.3",
+    "@truedat/df": "6.0.3",
+    "@truedat/lm": "6.0.3",
     "decode-uri-component": "^0.2.2",
     "file-saver": "^2.0.5",
     "moment": "^2.29.4",
@@ -111,5 +111,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "dab67cd6f569ca6de2fd8e0b5de260cb5ee261c3"
+  "gitHead": "c88ddc501214b8c4e2732654ca0052ebbcc802c9"
 }

package/src/concepts/components/ConceptDetails.js

@@ -1,9 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Segment, Header } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
-import { RichTextEditor } from "@truedat/core/components";
+import { Segment } from "semantic-ui-react";
 
 const DynamicFormViewer = React.lazy(() =>
   import("@truedat/df/components/DynamicFormViewer")

package/src/concepts/components/ConceptEdit.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import {
   Button,
@@ -14,8 +14,12 @@ import { compose } from "redux";
 import { connect } from "react-redux";
 import { injectIntl, FormattedMessage } from "react-intl";
 import { HistoryBackButton } from "@truedat/core/components";
+import { apiJsonPost } from "@truedat/core/services/api";
 import { selectTemplate, selectDomain } from "@truedat/df/routines";
 import { applyTemplate } from "@truedat/df/utils";
+import { useAvailabilityCheck } from "@truedat/ai/hooks/useSuggestions";
+import { API_SUGGESTIONS_REQUEST } from "@truedat/ai/api";
+import SuggestionsWidget from "@truedat/ai/components/suggestions/SuggestionsWidget";
 import { conceptAction } from "../routines";
 
 const DynamicForm = React.lazy(() =>
@@ -28,135 +32,145 @@ const TemplateLoader = React.lazy(() =>
 
 const actionKey = "update";
 
-const staticFields = ["type", "name"];
-
-const initialState = {
-  type: "",
-  name: "",
-};
-
 const isNonEmptyString = _.flow(_.trim, _.negate(_.isEmpty));
 const isValid = _.conforms({
   name: isNonEmptyString,
 });
 
-export class ConceptEdit extends React.Component {
-  static propTypes = {
-    action: PropTypes.object,
-    applyTemplate: PropTypes.func,
-    concept: PropTypes.object,
-    conceptAction: PropTypes.func.isRequired,
-    intl: PropTypes.object,
-    loading: PropTypes.bool,
-    selectDomain: PropTypes.func,
-    selectTemplate: PropTypes.func,
-    template: PropTypes.object,
-    templateId: PropTypes.number,
-  };
-
-  state = initialState;
-
-  componentDidMount() {
-    this.setStateFromProps();
-  }
-
-  componentDidUpdate() {
-    this.setStateFromProps();
-  }
+export const ConceptEdit = ({
+  concept,
+  loading,
+  intl: { formatMessage },
+  template,
+  action,
+  conceptAction,
+  applyTemplate,
+  selectDomain,
+  selectTemplate,
+  templateId,
+}) => {
+  const { content: propContent, name: propName, domain } = concept;
+  const [content, setContent] = useState(propContent);
+  const [name, setName] = useState(propName);
+  const [hasSuggestions, setHasSuggestions] = useState(false);
+
+  const { trigger: checkSuggestionAvailability } = useAvailabilityCheck();
+
+  useEffect(() => {
+    const domain_id = _.prop("id")(domain);
+    selectDomain({ id: domain_id });
+    selectTemplate({ id: templateId });
+    checkSuggestionAvailability({
+      template_id: templateId,
+      domain_ids: [domain.id],
+      resource_type: "business_concept",
+    }).then((prop) =>
+      setHasSuggestions(_.prop("data.data.status")(prop) == "ok")
+    );
+  }, []);
 
-  setStateFromProps() {
-    if (
-      _.isUndefined(this.state.content) &&
-      !_.isUndefined(this.props.concept.content)
-    ) {
-      const { content, domain, name, type } = this.props.concept;
-      this.setState({ content, name, type });
-      const { selectDomain, selectTemplate, templateId } = this.props;
-      const domain_id = _.prop("id")(domain);
-      selectDomain({ id: domain_id });
-      selectTemplate({ id: templateId });
-    }
+  if (_.isNil(content)) {
+    return null;
   }
-  handleChange = (e, { name, value }) => {
-    e && e.preventDefault();
-
-    if (staticFields.includes(name)) {
-      this.setState({ [name]: value });
-    }
-  };
 
-  handleContentChange = (content) => this.setState({ content });
+  const isInvalid = () => _.negate(isValid)({ name });
 
-  isInvalid = () => _.negate(isValid)(this.state);
-
-  handleSubmit = (e) => {
+  const handleSubmit = (e) => {
     e.preventDefault();
-    const { action, concept, conceptAction, applyTemplate } = this.props;
-    const businessConceptVersion = _.pick(["name", "type"])(this.state);
 
-    const content = applyTemplate(this.state?.content, concept?.domain?.id);
+    const businessConceptVersion = { name, type: concept.type };
+    const newContent = applyTemplate(content, domain?.id);
 
     conceptAction({
       action: actionKey,
       ...action,
-      business_concept_version: { ...businessConceptVersion, content },
+      business_concept_version: {
+        ...businessConceptVersion,
+        content: newContent,
+      },
     });
   };
 
-  render() {
-    const {
-      loading,
-      intl: { formatMessage },
-      template,
-    } = this.props;
-
-    const { content, name } = this.state;
-    if (_.isNil(content)) {
-      return null;
-    }
-
-    return (
-      <Container as={Segment} text>
-        <Header as="h2">
-          <Icon name="book" />
-          <Header.Content>
-            <FormattedMessage id="concepts.header.edit" />
-          </Header.Content>
-        </Header>
-        <TemplateLoader />
-        <Form loading={loading}>
-          <Form.Field required>
-            <label>
-              {formatMessage({ id: "concepts.props.name" })}
-              {_.isEmpty(name) ? (
-                <Label pointing="left">
-                  <FormattedMessage id="template.form.validation.empty_required" />
-                </Label>
-              ) : null}
-            </label>
-            <Form.Input name="name" value={name} onChange={this.handleChange} />
-          </Form.Field>
-          {_.isEmpty(template) || _.isNil(content) ? null : (
-            <DynamicForm
-              onChange={this.handleContentChange}
-              content={content}
-              isModification={true}
-            />
-          )}
-          <Button
-            primary
-            onClick={this.handleSubmit}
-            disabled={this.isInvalid()}
-            content={formatMessage({ id: "actions.save" })}
+  const requestAiSuggestion = (callback) => {
+    const body = {
+      resource_type: "business_concept",
+      resource_body: {
+        name,
+        domain: domain.name,
+        type: template.name,
+      },
+      domain_ids: [domain.id],
+      template_id: templateId,
+    };
+    apiJsonPost(API_SUGGESTIONS_REQUEST, body).then(callback);
+  };
+
+  return (
+    <Container as={Segment} text>
+      <Header as="h2">
+        <Icon name="book" />
+        <Header.Content>
+          <FormattedMessage id="concepts.header.edit" />
+        </Header.Content>
+      </Header>
+      <TemplateLoader />
+      <Form loading={loading}>
+        <Form.Field required>
+          <label>
+            {formatMessage({ id: "concepts.props.name" })}
+            {_.isEmpty(name) ? (
+              <Label pointing="left">
+                <FormattedMessage id="template.form.validation.empty_required" />
+              </Label>
+            ) : null}
+          </label>
+          <Form.Input
+            name="name"
+            value={name}
+            onChange={(_e, { value }) => setName(value)}
           />
-          <HistoryBackButton
-            content={formatMessage({ id: "actions.cancel" })}
+        </Form.Field>
+        {hasSuggestions ? (
+          <SuggestionsWidget
+            requestAiSuggestion={requestAiSuggestion}
+            template={template}
+            applySuggestions={(suggestions) =>
+              setContent({ ...content, ...suggestions })
+            }
+            isModification={true}
           />
-        </Form>
-      </Container>
-    );
-  }
-}
+        ) : null}
+        {_.isEmpty(template) || _.isNil(content) ? null : (
+          <DynamicForm
+            onChange={setContent}
+            content={content}
+            isModification={true}
+          />
+        )}
+        <Button
+          primary
+          onClick={handleSubmit}
+          disabled={isInvalid()}
+          content={formatMessage({ id: "actions.save" })}
+        />
+        <HistoryBackButton content={formatMessage({ id: "actions.cancel" })} />
+      </Form>
+    </Container>
+  );
+};
+
+ConceptEdit.propTypes = {
+  action: PropTypes.object,
+  applyTemplate: PropTypes.func,
+  concept: PropTypes.object,
+  conceptAction: PropTypes.func.isRequired,
+  intl: PropTypes.object,
+  loading: PropTypes.bool,
+  selectDomain: PropTypes.func,
+  selectTemplate: PropTypes.func,
+  template: PropTypes.object,
+  templateId: PropTypes.number,
+};
 
 const mapStateToProps = ({
   concept,

package/src/concepts/components/ConceptForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import {
   Button,
@@ -13,11 +13,11 @@ import {
 import { compose } from "redux";
 import { connect } from "react-redux";
 import { injectIntl, FormattedMessage } from "react-intl";
-import {
-  DomainSelector,
-  HistoryBackButton,
-  RichTextEditor,
-} from "@truedat/core/components";
+import { apiJsonPost } from "@truedat/core/services/api";
+import { DomainSelector, HistoryBackButton } from "@truedat/core/components";
+import { useAvailabilityCheck } from "@truedat/ai/hooks/useSuggestions";
+import { API_SUGGESTIONS_REQUEST } from "@truedat/ai/api";
+import SuggestionsWidget from "@truedat/ai/components/suggestions/SuggestionsWidget";
 import { conceptAction } from "../routines";
 
 const SelectableDynamicForm = React.lazy(() =>
@@ -26,64 +26,66 @@ const SelectableDynamicForm = React.lazy(() =>
 
 const actionKey = "create";
 
-const staticFields = ["name", "description"];
-
-const INITIAL_STATE = {
-  name: "",
-  description: {},
-  content: {},
-  domainsLoading: true,
-};
-
 const isNonEmptyString = _.flow(_.trim, _.negate(_.isEmpty));
 const isValid = _.conforms({
   name: isNonEmptyString,
   domain_id: _.isFinite,
-  description: _.negate(_.isEmpty),
   type: isNonEmptyString,
 });
 
-export class ConceptForm extends React.Component {
-  static propTypes = {
-    action: PropTypes.object,
-    conceptAction: PropTypes.func,
-    conceptActionLoading: PropTypes.string,
-    intl: PropTypes.object,
-  };
-
-  state = INITIAL_STATE;
-
-  handleDomainSelected = (_e, { value }) => {
-    this.setState({ domain_id: _.toInteger(value) });
-  };
-
-  handleEditorChange = (e, { value }) => {
-    this.handleChange(null, { name: "description", value });
-  };
-
-  handleChange = (e, { name, value }) => {
-    e && e.preventDefault();
-
-    if (staticFields.includes(name)) {
-      this.setState({ [name]: value });
+const ConceptForm = ({
+  action,
+  conceptActionLoading,
+  conceptAction,
+  intl: { formatMessage },
+}) => {
+  const [name, setName] = useState("");
+  const [content, setContent] = useState({});
+  const [type, setType] = useState();
+  const [template, setTemplate] = useState();
+  const [domainId, setDomainId] = useState();
+  const [domains, setDomains] = useState();
+  const [domainsLoading, setDomainsLoading] = useState(true);
+  const [hasSuggestions, setHasSuggestions] = useState(false);
+
+  const { trigger: checkSuggestionAvailability } = useAvailabilityCheck();
+
+  const loading = action && action.href && conceptActionLoading === action.href;
+  const templateDisabled = !domainId || !name;
+  const templateId = template?.id;
+
+  useEffect(() => {
+    if (templateId && domainId) {
+      checkSuggestionAvailability({
+        template_id: templateId,
+        domain_ids: [domainId],
+        resource_type: "business_concept",
+      }).then((prop) =>
+        setHasSuggestions(_.prop("data.data.status")(prop) == "ok")
+      );
     }
+  }, [templateId, domainId]);
+
+  const handleDomainSelected = (_e, { value }) =>
+    setDomainId(_.toInteger(value));
+  const handleContentChange = ({ content }) => setContent(content);
+  const handleDomainsLoaded = ({ domains }) => {
+    setDomains(domains);
+    setDomainsLoading(false);
   };
 
-  handleContentChange = ({ content }) => this.setState({ content });
+  const isInvalid = () =>
+    _.negate(isValid)({ name, domain_id: domainId, type });
 
-  handleDomainsLoaded = () => this.setState({ domainsLoading: false });
-
-  isInvalid = () => _.negate(isValid)(this.state);
-
-  handleSubmit = (e) => {
+  const handleSubmit = (e) => {
     e.preventDefault();
-    const { action, conceptAction } = this.props;
-    const business_concept_version = _.pick([
-      "domain_id",
-      "type",
-      "content",
-      ...staticFields,
-    ])(this.state);
+
+    const business_concept_version = {
+      name,
+      domain_id: domainId,
+      type,
+      content,
+    };
 
     conceptAction({
       action: actionKey,
@@ -92,85 +94,114 @@ export class ConceptForm extends React.Component {
     });
   };
 
-  render() {
-    const {
-      action,
-      conceptActionLoading,
-      intl: { formatMessage },
-    } = this.props;
-
-    const { name, description, content, type, domain_id, domainsLoading } =
-      this.state;
-
-    const loading =
-      action && action.href && conceptActionLoading === action.href;
-
-    return (
-      <Container as={Segment} text>
-        <Header as="h2">
-          <Icon name="book" />
-          <Header.Content>
-            <FormattedMessage id="concepts.actions.create" />
-          </Header.Content>
-        </Header>
-        <Form loading={loading || domainsLoading}>
-          <Header
-            as="h3"
-            content={formatMessage({ id: "concepts.form.required_fields" })}
-          />
-          <DomainSelector
-            action="createBusinessConcept"
-            label={formatMessage({ id: "domain.selector.label" })}
-            labels
-            required
-            onChange={this.handleDomainSelected}
-            onLoad={this.handleDomainsLoaded}
-            value={domain_id}
+  const requestAiSuggestion = (callback) => {
+    const domainName = _.flow(
+      _.find({ id: domainId }),
+      _.prop("name")
+    )(domains);
+    const body = {
+      resource_type: "business_concept",
+      resource_body: {
+        name,
+        domain: domainName,
+        type,
+      },
+      domain_ids: [domainId],
+      template_id: templateId,
+    };
+    apiJsonPost(API_SUGGESTIONS_REQUEST, body).then(callback);
+  };
+
+  return (
+    <Container as={Segment} text>
+      <Header as="h2">
+        <Icon name="book" />
+        <Header.Content>
+          <FormattedMessage id="concepts.actions.create" />
+        </Header.Content>
+      </Header>
+      <Form loading={loading || domainsLoading}>
+        <Header
+          as="h3"
+          content={formatMessage({ id: "concepts.form.required_fields" })}
+        />
+        <DomainSelector
+          action="createBusinessConcept"
+          label={formatMessage({ id: "domain.selector.label" })}
+          labels
+          required
+          onChange={handleDomainSelected}
+          onLoad={handleDomainsLoaded}
+          value={domainId}
+        />
+        <Form.Field required>
+          <label>
+            <FormattedMessage id="concepts.props.name" />
+            {_.isEmpty(name) ? (
+              <Label pointing="left">
+                <FormattedMessage id="template.form.validation.empty_required" />
+              </Label>
+            ) : null}
+          </label>
+          <Form.Input
+            name="name"
+            value={name}
+            onChange={(_e, { value }) => setName(value)}
           />
-          <Form.Field required>
-            <label>
-              <FormattedMessage id="concepts.props.name" />
-              {_.isEmpty(name) ? (
-                <Label pointing="left">
-                  <FormattedMessage id="template.form.validation.empty_required" />
-                </Label>
-              ) : null}
-            </label>
-            <Form.Input name="name" value={name} onChange={this.handleChange} />
-          </Form.Field>
-          <SelectableDynamicForm
-            scope="bg"
-            domainIds={_.isNil(domain_id) ? null : [domain_id]}
-            required
-            header={
+        </Form.Field>
+        <SelectableDynamicForm
+          disabled={templateDisabled}
+          scope="bg"
+          domainIds={_.isNil(domainId) ? null : [domainId]}
+          required
+          header={
+            <>
               <Header
                 as="h3"
                 content={formatMessage({
                   id: "concepts.form.aditional_fields",
                 })}
               />
-            }
-            content={content}
-            name={type}
-            onChange={this.handleContentChange}
-            onNameChange={(type) => this.setState({ type })}
+              {hasSuggestions ? (
+                <SuggestionsWidget
+                  requestAiSuggestion={requestAiSuggestion}
+                  template={template}
+                  applySuggestions={(suggestions) =>
+                    setContent({ ...content, ...suggestions })
+                  }
+                  isModification={true}
+                />
+              ) : null}
+            </>
+          }
+          content={content}
+          name={type}
+          onChange={handleContentChange}
+          onNameChange={setType}
+          onTemplateChange={setTemplate}
+        />
+        <div className="actions">
+          <HistoryBackButton
+            content={formatMessage({ id: "actions.cancel" })}
+          />
+          <Button
+            primary
+            disabled={isInvalid()}
+            onClick={handleSubmit}
+            content={formatMessage({ id: "actions.create" })}
           />
-          <div className="actions">
-            <HistoryBackButton
-              content={formatMessage({ id: "actions.cancel" })}
-            />
-            <Button
-              primary
-              disabled={this.isInvalid()}
-              onClick={this.handleSubmit}
-              content={formatMessage({ id: "actions.create" })}
-            />
-          </div>
-        </Form>
-      </Container>
-    );
-  }
-}
+        </div>
+      </Form>
+    </Container>
+  );
+};
+
+ConceptForm.propTypes = {
+  action: PropTypes.object,
+  conceptAction: PropTypes.func,
+  conceptActionLoading: PropTypes.string,
+  intl: PropTypes.object,
+};
 
 const mapStateToProps = ({ conceptActionLoading, conceptsActions }) => ({
   action: _.prop(actionKey)(conceptsActions),

package/src/concepts/components/ConceptsUpdateButton.js

@@ -58,8 +58,9 @@ const mapStateToProps = ({
   updateUrl:
     conceptCount !== 0 &&
     !conceptsLoading &&
-    existingTemplate(conceptFilters, conceptActiveFilters) &&
-    CONCEPTS_BULK_UPDATE,
+    existingTemplate(conceptFilters, conceptActiveFilters)
+      ? CONCEPTS_BULK_UPDATE
+      : null,
 });
 
 export default connect(mapStateToProps)(ConceptsUpdateButton);

package/src/concepts/components/__tests__/ConceptForm.spec.js

@@ -9,6 +9,27 @@ import {
 } from "@truedat/test/mocks";
 import ConceptForm from "../ConceptForm";
 
+jest.mock("@truedat/ai/hooks/useSuggestions", () => {
+  const originalModule = jest.requireActual("@truedat/ai/hooks/useSuggestions");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useAvailabilityCheck: () => ({
+      trigger: jest.fn(
+        () =>
+          new Promise(() => ({
+            data: {
+              data: {
+                status: "ok",
+              },
+            },
+          }))
+      ),
+    }),
+  };
+});
+
 const state = {
   conceptActions: { create: {} },
   conceptActionLoading: "",
@@ -39,13 +60,14 @@ describe("<ConceptForm />", () => {
     });
 
     it("renders dynamic fields when template is selected", async () => {
-      const { findByText, getByText, queryByText } = render(
+      const { findByText, getByText, queryByText, getAllByRole } = render(
         <ConceptForm />,
         renderOpts
       );
       await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
       await waitFor(() => expect(queryByText(/fooDomain/)).toBeInTheDocument());
       userEvent.click(await findByText("fooDomain"));
+      userEvent.type(getAllByRole("textbox")[1], "name");
       userEvent.click(await findByText("template1"));
       expect(getByText("field1")).toBeInTheDocument();
     });

package/src/concepts/components/__tests__/ConceptsActions.spec.js

@@ -16,6 +16,7 @@ describe("<ConceptsActions />", () => {
       en: {
         "concepts.actions.create": "Create",
         "concepts.actions.download.tooltip": "Download",
+        "concepts.actions.upload.tooltip": "concepts.actions.upload.tooltip",
       },
     },
     state: {