@truedat/bg 7.2.4 → 7.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "7.2.4",
+  "version": "7.2.6",
   "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.2.4",
+    "@truedat/test": "7.2.6",
     "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.2.4",
-    "@truedat/df": "7.2.4",
-    "@truedat/lm": "7.2.4",
+    "@truedat/core": "7.2.6",
+    "@truedat/df": "7.2.6",
+    "@truedat/lm": "7.2.6",
     "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": "3371f59270a344803524395e395f6a422d879d01"
+  "gitHead": "488b8216a78852f55db6e7e28a83c4d3fec0b890"
 }

package/src/concepts/components/Concept.js

@@ -1,11 +1,14 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Route } from "react-router-dom";
 import { Grid, Segment } from "semantic-ui-react";
 import { Comments, CommentsLoader } from "@truedat/core/components";
 import { CONCEPT_VERSION } from "@truedat/core/routes";
+import { useIntl } from "react-intl";
+import { useLanguage } from "@truedat/core/i18n";
+import { splitTranslatableFields } from "@truedat/core/services/i18nContent";
 import ConceptRelationsSummary from "../relations/components/ConceptRelationsSummary";
 import ConceptArchiveLoader from "./ConceptArchiveLoader";
 import ConceptCompleteness from "./ConceptCompleteness";
@@ -29,52 +32,121 @@ const ConceptRulesLoader = React.lazy(() =>
   import("@truedat/dq/components/ConceptRulesLoader")
 );
 
-export const Concept = ({ id }) => (
-  <>
-    <ConceptCrumbs />
-    <ConceptArchiveLoader />
-    <CommentsLoader resource_id={id} resource_type="business_concept" />
-    <EventsLoader resource_id={id} resource_type="concept" />
-    <ConceptRulesLoader />
-    <RelationsLoader
-      resource_id={id}
-      resource_type="business_concept"
-      target_type="business_concept"
-    />
-    <Grid columns="equal" style={{ marginTop: 0 }}>
-      <Grid.Column width={12}>
-        <Segment>
-          <ConceptHeader />
-          <ConceptTabs />
-          <ConceptTabPane />
-        </Segment>
-        <Route
-          path={CONCEPT_VERSION}
-          exact
-          render={() => (
-            <Segment>
-              <Comments />
-            </Segment>
-          )}
-        />
-      </Grid.Column>
-      <Grid.Column width={4}>
-        <ConceptSummary />
-        <ConceptRelationsSummary />
-        <ConceptTaxonomy />
-        <SharedToDomains />
-        <ConceptCompleteness />
-      </Grid.Column>
-    </Grid>
-  </>
-);
+export const Concept = ({ id, concept }) => {
+  const { locales } = useLanguage();
+  const { locale } = useIntl();
+
+  const defaultLang = _.flow(
+    _.find({ is_default: true }),
+    _.prop("lang")
+  )(locales);
+
+  const initialLang = concept.status == "published" ? locale : defaultLang;
+
+  const [selectedLang, setSelectedLang] = useState(initialLang);
+  useEffect(() => {
+    setSelectedLang(initialLang);
+  }, [initialLang]);
+
+  const content = _.getOr({}, "dynamic_content")(concept);
+
+  const { noTranslatable: noTranslatableFields } = splitTranslatableFields(
+    concept.template
+  );
+  const noTranslatableContent = _.pick(_.keys(noTranslatableFields))(
+    concept.dynamic_content
+  );
+
+  const i18nContent = concept.i18n_content || {};
+
+  const i18nConcept = _.flow(
+    _.filter(({ is_enabled }) => is_enabled),
+    _.map((locale) => {
+      const { id, lang, is_default, is_required, local_name } = locale;
+      const contentLang = _.get(lang)(i18nContent);
+      const publishedWithoutLang =
+        _.isNil(contentLang) && concept.status == "published";
+      const langContent =
+        is_default || publishedWithoutLang
+          ? content
+          : _.isEmpty(contentLang?.content)
+          ? { ...noTranslatableContent }
+          : { ...noTranslatableContent, ...contentLang?.content };
+
+      const langName = is_default ? concept.name : contentLang?.name || "";
+
+      return {
+        id,
+        lang,
+        isDefault: is_default,
+        isRequired: is_required,
+        name: langName,
+        langLocalName: local_name,
+        content: langContent,
+      };
+    }),
+    _.orderBy(["isDefault", "isRequired", "lang"], ["desc", "desc", "asc"]),
+    _.keyBy("lang")
+  )(locales);
+
+  const selectedContent = i18nConcept[selectedLang]?.content || concept.content;
+
+  return (
+    <>
+      <ConceptCrumbs />
+      <ConceptArchiveLoader />
+      <CommentsLoader resource_id={id} resource_type="business_concept" />
+      <EventsLoader resource_id={id} resource_type="concept" />
+      <ConceptRulesLoader />
+      <RelationsLoader
+        resource_id={id}
+        resource_type="business_concept"
+        target_type="business_concept"
+      />
+      <Grid columns="equal" style={{ marginTop: 0 }}>
+        <Grid.Column width={12}>
+          <Segment>
+            <ConceptHeader
+              selectedLang={selectedLang}
+              setSelectedLang={setSelectedLang}
+              i18nConcept={i18nConcept}
+            />
+            <ConceptTabs />
+            <ConceptTabPane
+              lang={selectedLang}
+              selectedContent={selectedContent}
+            />
+          </Segment>
+          <Route
+            path={CONCEPT_VERSION}
+            exact
+            render={() => (
+              <Segment>
+                <Comments />
+              </Segment>
+            )}
+          />
+        </Grid.Column>
+        <Grid.Column width={4}>
+          <ConceptSummary />
+          <ConceptRelationsSummary />
+          <ConceptTaxonomy />
+          <SharedToDomains />
+          <ConceptCompleteness />
+        </Grid.Column>
+      </Grid>
+    </>
+  );
+};
 
 Concept.propTypes = {
   id: PropTypes.number.isRequired,
+  concept: PropTypes.object,
 };
 
 const mapStateToProps = ({ concept }) => ({
   id: _.prop("business_concept_id")(concept),
+  concept: concept,
 });
 
 export default connect(mapStateToProps)(Concept);

package/src/concepts/components/ConceptDetails.js

@@ -1,105 +1,34 @@
-import _ from "lodash/fp";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Button, ButtonGroup, Segment } from "semantic-ui-react";
-import { useIntl } from "react-intl";
-import { useLanguage } from "@truedat/core/i18n";
-import { splitTranslatableFields } from "@truedat/core/services/i18nContent";
+import { Segment } from "semantic-ui-react";
+import { I18nProvider } from "@truedat/core/i18n";
 
 const DynamicFormViewer = React.lazy(() =>
   import("@truedat/df/components/DynamicFormViewer")
 );
 
-export const ConceptDetails = ({ concept }) => {
-  const { locale } = useIntl();
-  const { locales } = useLanguage();
-
-  const defaultLang = _.flow(
-    _.find({ is_default: true }),
-    _.prop("lang")
-  )(locales);
-
-  const initialLang = concept.status == "published" ? locale : defaultLang;
-
-  const [selectedLang, setSelectedLang] = useState(initialLang);
-  useEffect(() => {
-    setSelectedLang(initialLang);
-  }, [initialLang]);
-
-  const content = _.getOr({}, "dynamic_content")(concept);
-
-  const { noTranslatable: noTranslatableFields } = splitTranslatableFields(
-    concept.template
-  );
-  const noTranslatableContent = _.pick(_.keys(noTranslatableFields))(
-    concept.dynamic_content
-  );
-
-  const i18nContent = concept.i18n_content || {};
-
-  const i18nConcept = _.flow(
-    _.filter(({ is_enabled }) => is_enabled),
-    _.map((locale) => {
-      const { id, lang, is_default, is_required, local_name } = locale;
-      const contentLang = _.get(lang)(i18nContent);
-      const publishedWithoutLang =
-        _.isNil(contentLang) && concept.status == "published";
-      const langContent =
-        is_default || publishedWithoutLang
-          ? content
-          : _.isEmpty(contentLang?.content)
-          ? { ...noTranslatableContent }
-          : { ...noTranslatableContent, ...contentLang?.content };
-
-      const langName = is_default ? concept.name : contentLang?.name || "";
-
-      return {
-        id,
-        lang,
-        isDefault: is_default,
-        isRequired: is_required,
-        name: langName,
-        langLocalName: local_name,
-        content: langContent,
-      };
-    }),
-    _.orderBy(["isDefault", "isRequired", "lang"], ["desc", "desc", "asc"]),
-    _.keyBy("lang")
-  )(locales);
-
+export const ConceptDetails = ({ concept, selectedContent, lang }) => {
   return (
     <Segment attached="bottom">
-      {!_.includes(concept.status)(["published", "versioned"]) &&
-      _.size(i18nConcept) > 1 ? (
-        <ButtonGroup floated="right">
-          {_.flow(
-            _.map(({ lang, content }) => {
-              return !_.isEmpty(content) ? (
-                <Button
-                  key={lang}
-                  content={lang}
-                  size="mini"
-                  onClick={() => setSelectedLang(lang)}
-                  active={selectedLang == lang}
-                />
-              ) : null;
-            })
-          )(i18nConcept)}
-        </ButtonGroup>
-      ) : null}
-      <DynamicFormViewer
-        template={concept.template}
-        content={i18nConcept[selectedLang]?.content || concept.content}
-      />
+      <I18nProvider lang={lang}>
+        <DynamicFormViewer
+          template={concept.template}
+          content={selectedContent}
+        />
+      </I18nProvider>
     </Segment>
   );
 };
 
 ConceptDetails.propTypes = {
   concept: PropTypes.object,
+  selectedContent: PropTypes.object,
+  lang: PropTypes.string,
 };
 
-const mapStateToProps = ({ concept }) => ({ concept });
+const mapStateToProps = ({ concept }) => ({
+  concept,
+});
 
 export default connect(mapStateToProps)(ConceptDetails);

package/src/concepts/components/ConceptHeader.js

@@ -3,7 +3,14 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { FormattedMessage, useIntl } from "react-intl";
-import { Grid, Header, Icon } from "semantic-ui-react";
+import {
+  Grid,
+  Header,
+  Icon,
+  Button,
+  ButtonGroup,
+  GridRow,
+} from "semantic-ui-react";
 import { linkTo } from "@truedat/core/routes";
 import ShareLinkPopup from "@truedat/audit/components/ShareLinkPopup";
 import ConceptConfidentialButton from "./ConceptConfidentialButton";
@@ -15,16 +22,22 @@ export const ConceptHeader = ({
   concept,
   setConfidentialConcept,
   share,
-  template,
+  selectedLang,
+  setSelectedLang,
+  i18nConcept,
 }) => {
-  const { locale, formatMessage } = useIntl();
+  const { formatMessage } = useIntl();
+  const template = concept.template;
 
   const path = linkTo.CONCEPT_VERSION({
     business_concept_id: _.prop("business_concept_id")(concept),
     id: "current",
   });
 
-  const i18nContent = _.flow(_.get("i18n_content"), _.get(locale))(concept);
+  const i18nContent = _.flow(
+    _.get("i18n_content"),
+    _.get(selectedLang)
+  )(concept);
 
   const name = _.isUndefined(i18nContent) ? concept?.name : i18nContent?.name;
   const shareUrl = `${location.protocol}//${location.host}${path}`;
@@ -33,63 +46,80 @@ export const ConceptHeader = ({
 
   return (
     <Grid>
-      <Grid.Column width={8}>
-        <Header as="h2">
-          <Icon circular name="book" />
-          <Header.Content>
-            {name}
-            <Header.Subheader>
-              <FormattedMessage
-                id={`templates.${templateLabel}`}
-                defaultMessage={templateLabel}
-              />
-            </Header.Subheader>
-          </Header.Content>
-        </Header>
-      </Grid.Column>
-      <Grid.Column width={8} textAlign="right">
-        <Grid>
-          <Grid.Row>
-            <Grid.Column textAlign="right">
-              <ShareLinkPopup
-                url={shareUrl}
-                title={shareTitle}
-                name={name}
-                icon="concepts"
-                popupType="concepts"
-              />
-              {share && <SharedToDomainsPopup />}
-              <ConceptSubscription />
-              {!_.isEmpty(setConfidentialConcept) && (
-                <ConceptConfidentialButton concept={concept} />
-              )}
-            </Grid.Column>
-          </Grid.Row>
-          <Grid.Row textAlign="right">
-            <Grid.Column textAlign="right">
-              <ConceptActions />
-            </Grid.Column>
-          </Grid.Row>
-        </Grid>
-      </Grid.Column>
+      <GridRow>
+        <Grid.Column width={8}>
+          <Header as="h2">
+            <Icon circular name="book" />
+            <Header.Content>
+              {name}
+              <Header.Subheader>
+                <FormattedMessage
+                  id={`templates.${templateLabel}`}
+                  defaultMessage={templateLabel}
+                />
+              </Header.Subheader>
+            </Header.Content>
+          </Header>
+        </Grid.Column>
+        <Grid.Column width={8} textAlign="right">
+          <ShareLinkPopup
+            url={shareUrl}
+            title={shareTitle}
+            name={name}
+            icon="concepts"
+            popupType="concepts"
+          />
+          {share && <SharedToDomainsPopup />}
+          <ConceptSubscription />
+          {!_.isEmpty(setConfidentialConcept) ? (
+            <ConceptConfidentialButton concept={concept} />
+          ) : null}
+        </Grid.Column>
+      </GridRow>
+      <GridRow>
+        <Grid.Column width={8}>
+          {!_.includes(concept.status)(["published", "versioned"]) &&
+          _.size(i18nConcept) > 1 ? (
+            <ButtonGroup floated="left">
+              {_.flow(
+                _.map(({ lang, content }) => {
+                  return !_.isEmpty(content) ? (
+                    <Button
+                      key={lang}
+                      content={
+                        <FormattedMessage id={"i18n.messages.lang." + lang} />
+                      }
+                      size="mini"
+                      onClick={() => setSelectedLang(lang)}
+                      active={selectedLang == lang}
+                    />
+                  ) : null;
+                })
+              )(i18nConcept)}
+            </ButtonGroup>
+          ) : null}
+        </Grid.Column>
+        <Grid.Column width={8} textAlign="right">
+          <ConceptActions />
+        </Grid.Column>
+      </GridRow>
     </Grid>
   );
 };
 
 ConceptHeader.propTypes = {
   setConfidentialConcept: PropTypes.object,
-  share: PropTypes.bool,
+  share: PropTypes.object,
   concept: PropTypes.object,
-  template: PropTypes.object,
+  selectedLang: PropTypes.string,
+  setSelectedLang: PropTypes.func,
+  i18nConcept: PropTypes.object,
 };
 
-const EMPTY = {};
-
 const mapStateToProps = ({ concept, conceptActions, conceptPermissions }) => ({
   share: _.prop("share")(conceptPermissions),
   concept,
   setConfidentialConcept: _.prop("set_confidential")(conceptActions),
-  template: concept.template || EMPTY,
 });
 
 export default connect(mapStateToProps)(ConceptHeader);

package/src/concepts/components/ConceptTabPane.js

@@ -11,6 +11,7 @@ import {
   CONCEPT_RULES_NEW,
   CONCEPT_VERSION,
 } from "@truedat/core/routes";
+import PropTypes from "prop-types";
 import ConceptRelationsRoutes from "../relations/components/ConceptRelationsRoutes";
 import ConceptArchive from "./ConceptArchive";
 import ConceptDetails from "./ConceptDetails";
@@ -22,10 +23,16 @@ const ConceptRules = React.lazy(() =>
 
 const NewRule = React.lazy(() => import("@truedat/dq/components/NewRule"));
 
-export const ConceptTabPane = () => (
+export const ConceptTabPane = ({ selectedContent, lang }) => (
   <ErrorBoundary>
     <Switch>
-      <Route path={CONCEPT_VERSION} exact render={() => <ConceptDetails />} />
+      <Route
+        path={CONCEPT_VERSION}
+        exact
+        render={() => (
+          <ConceptDetails selectedContent={selectedContent} lang={lang} />
+        )}
+      />
       <Route
         path={CONCEPT_LINKS_STRUCTURES}
         render={() => <ConceptRelationsRoutes />}
@@ -53,4 +60,9 @@ export const ConceptTabPane = () => (
   </ErrorBoundary>
 );
 
+ConceptTabPane.propTypes = {
+  lang: PropTypes.string,
+  selectedContent: PropTypes.object,
+};
+
 export default ConceptTabPane;

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

@@ -1,12 +1,131 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import { LangProviderWrapper } from "@truedat/core/i18n";
 import { Concept } from "../Concept";
 
+beforeAll(() => {
+  jest.useFakeTimers();
+  jest.setSystemTime(new Date("2025-01-01T10:00:00Z"));
+});
+
+afterAll(() => {
+  jest.useRealTimers();
+});
+
+const renderOpts = {
+  messages: {
+    en: {
+      "concepts.crumbs.top": "Business Glossary",
+      "concepts.crumbs.pending": "Draft",
+      "i18n.messages.lang.es": "Spanish",
+      "i18n.messages.lang.en": "English",
+      "tabs.bg.concept": "Concept",
+      "tabs.bg.relations_data_field": "Linkage",
+      "tabs.bg.qualityRules": "Quality Rules",
+      "tabs.bg.history": "History",
+      "tabs.bg.audit": "Audit",
+      "concept.props.status": "Status",
+      "concept.props.version": "Version",
+      "concept.props.last_update_at": "Update",
+      "concept.props.last_update_by": "User",
+    },
+  },
+  state: {
+    concept: {
+      id: 1,
+      business_concept_id: 1,
+      name: "Concept_en",
+      type: "type",
+      status: "draft",
+      last_change_at: "2025-01-01T10:00:00Z",
+      template: {
+        content: [
+          {
+            name: "foo_group",
+            fields: [
+              { name: "field", label: "field_label", values: ["value1"] },
+            ],
+          },
+        ],
+      },
+      i18n_content: {
+        es: {
+          field: "field_label",
+          content: { values: ["value"] },
+          completeness: 1.0,
+          name: "Concept_es",
+        },
+        en: {
+          field: "field_label",
+          content: { values: ["value1"] },
+          completeness: 1.0,
+          name: "Concept_en",
+        },
+      },
+      dynamic_content: {
+        field: { value: "value1", origin: "user" },
+      },
+    },
+    locales: [
+      { id: 1, lang: "en", is_default: true, is_required: true },
+      { id: 2, lang: "es", is_default: false, is_required: false },
+    ],
+  },
+  fallback: "lazy",
+};
+
 describe("<Concept />", () => {
-  const props = { id: 1 };
+  const props = {
+    id: 1,
+    concept: {
+      id: 1,
+      business_concept_id: 1,
+      name: "Concept1",
+      type: "type",
+      status: "draft",
+      last_change_at: "2024-01-01T10:00:00Z",
+      template: {
+        content: [
+          {
+            name: "foo_group",
+            fields: [
+              { name: "field", label: "field_label", values: ["value1"] },
+            ],
+          },
+        ],
+      },
+      i18n_content: {
+        es: {
+          field: "field_label",
+          content: { values: ["value1"] },
+          completeness: 1.0,
+          name: "Concepto1",
+        },
+        en: {
+          field: "field_label",
+          content: { values: ["value1"] },
+          completeness: 1.0,
+          name: "Concept1",
+        },
+      },
+      dynamic_content: {
+        field: { value: "value1", origin: "user" },
+      },
+    },
+  };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<Concept {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(
+      <LangProviderWrapper langs={["es", "en"]}>
+        <Concept {...props} />
+      </LangProviderWrapper>,
+      renderOpts
+    );
+    await waitFor(() => {
+      expect(queryByText(/lazy/i)).not.toBeInTheDocument();
+      expect(container.querySelector(".loading")).not.toBeInTheDocument();
+    });
+    expect(container).toMatchSnapshot();
   });
 });