@truedat/bg 7.3.3 → 7.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "7.3.3",
+  "version": "7.4.0",
   "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": "7.3.3",
+    "@truedat/test": "7.4.0",
     "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": "7.3.3",
-    "@truedat/df": "7.3.3",
-    "@truedat/lm": "7.3.3",
+    "@truedat/core": "7.4.0",
+    "@truedat/df": "7.4.0",
+    "@truedat/lm": "7.4.0",
     "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": "23b3cc6b8c2749a173f779390866b715d653d377"
+  "gitHead": "65eb6322cc8478fd4c35f2268c8ac1a41e8f129d"
 }

package/src/concepts/components/ConceptForm.js

@@ -23,6 +23,9 @@ import {
 } from "@truedat/core/components";
 import { useLanguage, I18nProvider } from "@truedat/core/i18n";
 import SuggestionsWidget from "@truedat/ai/components/suggestions/SuggestionsWidget";
+import { useAvailabilityCheck as useTranslatableCheck } from "@truedat/ai/hooks/useTranslations";
+import { splitTranslatableFields } from "@truedat/core/services/i18nContent";
+import { TranslationModal } from "@truedat/ai/components";
 
 const SelectDynamicFormWithTranslations = lazy(() =>
   import("@truedat/df/components/SelectDynamicFormWithTranslations")
@@ -51,9 +54,14 @@ const ConceptForm = ({
   const [domains, setDomains] = useState();
   const [domainsLoading, setDomainsLoading] = useState(true);
   const [hasSuggestions, setHasSuggestions] = useState(false);
+  const [canTranslate, setCanTranslate] = useState(false);
+  const [showTranslationModal, setShowTranslationModal] = useState(false);
   const isNonEmptyString = useCallback(_.flow(_.trim, _.negate(_.isEmpty)), []);
   const { trigger: checkSuggestionAvailability } = useAvailabilityCheck();
   const templateId = template?.id;
+  const { trigger: checkTranslationAvailability } = useTranslatableCheck();
+  const { translatable: translatableFields } =
+    splitTranslatableFields(template);
 
   const handleDomainChange = (_e, { value }) => setDomainId(_.toInteger(value));
   const handleTemplateChange = (value) => setTemplate(value);
@@ -66,6 +74,10 @@ const ConceptForm = ({
     });
   };
 
+  useEffect(() => {
+    checkCanTranslate();
+  }, []);
+
   useEffect(() => {
     if (templateId && domainId) {
       checkSuggestionAvailability({
@@ -75,6 +87,7 @@ const ConceptForm = ({
       }).then((res) =>
         setHasSuggestions(_.get("data.data.status", res) === "ok")
       );
+      checkCanTranslate();
     }
   }, [templateId, domainId, checkSuggestionAvailability]);
 
@@ -107,6 +120,28 @@ const ConceptForm = ({
     });
   };
 
+  const checkCanTranslate = () => {
+    if (templateId && domainId) {
+      checkTranslationAvailability({
+        domain_ids: [domainId],
+        resource_type: "business_concept",
+      }).then((res) =>
+        setCanTranslate(
+          _.get("data.data.status", res) === "ok" &&
+            isMultilingual &&
+            !_.isEmpty(translatableFields)
+        )
+      );
+    }
+  };
+
+  const setTranslations = (translations) => {
+    setI18nConcept({
+      ...i18nConcept,
+      ...translations,
+    });
+  };
+
   const renderNameField = useCallback(
     (lang, value, onChange, showValidation = false) => (
       <I18nProvider lang={lang}>
@@ -254,6 +289,15 @@ const ConceptForm = ({
       />
     ));
 
+  const isThereAnyTranslatableField =
+    _.flow(
+      _.keys,
+      _.some((key) => !_.isEmpty(i18nConcept[defaultLang]?.content?.[key]))
+    )(translatableFields) || !_.isEmpty(i18nConcept[defaultLang]?.name);
+
+  const disableTranslationButton =
+    !domainId || !template?.name || !isThereAnyTranslatableField;
+
   const commonForm = (
     <>
       {isMultilingual ? (
@@ -275,6 +319,16 @@ const ConceptForm = ({
       />
       <div className="concept-forms-actions actions">
         <HistoryBackButton content={formatMessage({ id: "actions.cancel" })} />
+        {canTranslate ? (
+          <Button
+            disabled={disableTranslationButton}
+            onClick={() => setShowTranslationModal(true)}
+            content={formatMessage({
+              id: `actions.translate`,
+              defaultMessageMessage: "Translate",
+            })}
+          />
+        ) : null}
         <Button
           primary
           disabled={isInvalid}
@@ -300,12 +354,25 @@ const ConceptForm = ({
     </Header>
   );
 
+  const renderTranslationModal = (
+    <TranslationModal
+      open={showTranslationModal}
+      onClose={() => setShowTranslationModal(false)}
+      i18nContent={i18nConcept}
+      template={template}
+      domainId={domainId}
+      resourceType="business_concept"
+      setTranslations={setTranslations}
+    />
+  );
+
   return isMultilingual ? (
     <>
       {renderHeader()}
       <Form loading={Boolean(loading) || Boolean(domainsLoading)}>
         {commonForm}
       </Form>
+      {canTranslate ? renderTranslationModal : null}
     </>
   ) : (
     <Container as={Segment} text>

package/src/concepts/components/ConceptsActions.js

@@ -13,6 +13,7 @@ import ConceptsUploadButton from "./ConceptsUploadButton";
 
 export const ConceptsActions = ({
   create,
+  download,
   conceptsDownloading,
   downloadConcepts,
   upload,
@@ -24,7 +25,6 @@ export const ConceptsActions = ({
   const createUrl = conceptsActions?.create ? CONCEPTS_NEW : null;
   const canAutoPublish = conceptsActions?.autoPublish && true;
   const { formatMessage, locale } = useIntl();
-
   return hidden ? null : (
     <div>
       {create && createUrl ? (
@@ -36,16 +36,19 @@ export const ConceptsActions = ({
           content={formatMessage({ id: "concepts.actions.create" })}
         />
       ) : null}
-      <Button
-        floated="right"
-        secondary
-        icon="download"
-        onClick={() => downloadConcepts({ lang: locale, searchParams })}
-        loading={conceptsDownloading}
-        data-tooltip={formatMessage({
-          id: "concepts.actions.download.tooltip",
-        })}
-      />
+      {create || download ? (
+        <Button
+          floated="right"
+          secondary
+          icon="download"
+          onClick={() => downloadConcepts({ lang: locale, searchParams })}
+          loading={conceptsDownloading}
+          data-tooltip={formatMessage({
+            id: "concepts.actions.download.tooltip",
+          })}
+        />
+      ) : null}
+
       {upload ? <ConceptsUploadButton canAutoPublish={canAutoPublish} /> : null}
       {update ? <ConceptsUpdateButton /> : null}
     </div>
@@ -55,6 +58,7 @@ export const ConceptsActions = ({
 ConceptsActions.propTypes = {
   conceptsDownloading: PropTypes.bool,
   create: PropTypes.bool,
+  download: PropTypes.bool,
   downloadConcepts: PropTypes.func,
   upload: PropTypes.bool,
   update: PropTypes.bool,

package/src/concepts/components/ConceptsPanel.js

@@ -18,12 +18,17 @@ import ConceptsLabelResults from "./ConceptsLabelResults";
 import ConceptsPagination from "./ConceptsPagination";
 import ConceptsTable from "./ConceptsTable";
 
-export function ConceptsPanelContent({ actions, subscope }) {
-  const { loading } = useSearchContext();
+export function ConceptsPanelContent({ subscope }) {
+  const { loading, searchData } = useSearchContext();
+  const actions = _.propOr({}, "_actions")(searchData);
+  const download = (actions) =>
+    "downloadPublishedConcepts" in actions ||
+    "downloadDeprecatedConcepts" in actions ||
+    "downloadDraftConcepts" in actions;
 
   return (
     <>
-      <ConceptsActions {...actions} />
+      <ConceptsActions {...actions} download={download(actions)} />
       <SearchWidget />
       <Dimmer.Dimmable dimmed={loading}>
         <Dimmer active={loading} inverted>

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

@@ -1,10 +1,34 @@
 import React from "react";
+import { act } from "react-dom/test-utils";
 import { render } from "@truedat/test/render";
 import { waitFor } from "@testing-library/react";
 import { LangProviderWrapper } from "@truedat/core/i18n";
 import ConceptEdit from "../ConceptEdit";
 
-const template1 = {
+jest.mock("@truedat/ai/hooks/useTranslations", () => {
+  const originalModule = jest.requireActual(
+    "@truedat/ai/hooks/useTranslations"
+  );
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useAvailabilityCheck: () => ({
+      trigger: jest.fn(
+        () =>
+          new Promise(() => ({
+            data: {
+              data: {
+                status: "ok",
+              },
+            },
+          }))
+      ),
+    }),
+  };
+});
+
+const template = {
   id: 1,
   name: "template1",
   label: "template1",
@@ -30,7 +54,7 @@ const template1 = {
 jest.mock("@truedat/core/hooks", () => ({
   useTemplate: jest.fn(() => ({
     loading: false,
-    data: { template: template1 },
+    data: { template },
   })),
 }));
 
@@ -99,6 +123,7 @@ describe("<ConceptEdit />", () => {
   };
   it("matches the latest snapshot", async () => {
     const { container, queryByText } = renderComponent(props);
+
     await waitFor(() => expect(queryByText(/foo_user/i)).toBeInTheDocument());
     expect(container).toMatchSnapshot();
   });

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

@@ -25,6 +25,13 @@ jest.mock("@truedat/ai/hooks/useSuggestions", () => {
   };
 });
 
+jest.mock("@truedat/ai/hooks/useTranslations", () => ({
+  useAvailabilityCheck: jest.fn(() => ({
+    reason: null,
+    status: "ok",
+  })),
+}));
+
 const props = {
   actionKey: "create",
   domainId: 1,

package/src/taxonomy/components/__tests__/DomainForm.spec.js

@@ -1,7 +1,6 @@
 import React from "react";
 import userEvent from "@testing-library/user-event";
-import { fireEvent } from "@testing-library/react";
-import { waitFor } from "@testing-library/react";
+import { fireEvent, waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import { DomainForm } from "../DomainForm";
 import { useDomains } from "../../../hooks/useDomains";