@truedat/bg 4.44.2 → 4.44.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.44.5] 2022-05-20
+
+### Changed
+
+- [TD-4230] Refactored `ConceptForm` to use `SelectableDynamicForm`
+
+## [4.44.4] 2022-05-19
+
+### Changed
+
+- Use `lowerDeburrTrim` function from `@truedat/core`
+
 ## [4.43.3] 2022-05-04
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "4.44.2",
+  "version": "4.44.5",
   "description": "Truedat Web Business Glossary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -22,20 +22,20 @@
     "eslint:fix": "eslint --fix src/**"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.8",
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.0",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.17.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-react": "^7.14.5",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.0",
+    "@babel/preset-env": "^7.18.0",
+    "@babel/preset-react": "^7.17.12",
+    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.44.2",
-    "babel-jest": "^27.0.6",
+    "@truedat/test": "4.44.5",
+    "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-react-intl": "^5.1.18",
@@ -43,7 +43,8 @@
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.0.6",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "redux-saga-test-plan": "^4.0.4",
@@ -51,6 +52,8 @@
     "semantic-ui-react": "^2.0.3"
   },
   "jest": {
+    "maxWorkers": "50%",
+    "testTimeout": 10000,
     "moduleDirectories": [
       "<rootDir>/src",
       "../../node_modules"
@@ -83,15 +86,15 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "4.44.2",
-    "@truedat/df": "4.44.2",
+    "@truedat/core": "4.44.5",
+    "@truedat/df": "4.44.5",
     "file-saver": "^2.0.5",
     "moment": "^2.24.0",
     "path-to-regexp": "^1.7.0",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react-hook-form": "^7.30.0",
     "react-intl": "^5.20.10",
-    "react-moment": "^0.9.7",
+    "react-moment": "^1.1.2",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "redux": "^4.1.1",
@@ -104,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "ca0c5fffcba96736f7a2054f3c37789da8c30a9e"
+  "gitHead": "5a339468198c803592b285eddd0dd0c0b0eced93"
 }

package/src/concepts/components/ConceptEdit.js

@@ -50,12 +50,14 @@ export class ConceptEdit extends React.Component {
   static propTypes = {
     action: PropTypes.object,
     applyTemplate: PropTypes.func,
-    conceptAction: PropTypes.func.isRequired,
     concept: PropTypes.object,
+    conceptAction: PropTypes.func.isRequired,
     intl: PropTypes.object,
     loading: PropTypes.bool,
-    templateId: PropTypes.number,
+    selectDomain: PropTypes.func,
+    selectTemplate: PropTypes.func,
     template: PropTypes.object,
+    templateId: PropTypes.number,
   };
 
   state = initialState;
@@ -162,7 +164,7 @@ export class ConceptEdit extends React.Component {
               onChange={this.handleEditorChange}
             />
           </Form.Field>
-          {!_.isEmpty(template) && !_.isNil(content) && (
+          {_.isEmpty(template) || _.isNil(content) ? null : (
             <DynamicForm
               onChange={this.handleContentChange}
               content={content}

package/src/concepts/components/ConceptFiltersDefault.js

@@ -1,13 +1,9 @@
-import React from "react";
 import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
+import { AvailableFilters } from "@truedat/core/components";
 import { addConceptFilter, resetConceptFilters } from "../routines";
 import { getConceptAvailableFilters } from "../selectors";
 
-const AvailableFilters = React.lazy(() =>
-  import("@truedat/core/components/AvailableFilters")
-);
-
 const mapStateToProps = (state) => ({
   filters: getConceptAvailableFilters(state),
   disabled: state.conceptFiltersLoading,

package/src/concepts/components/ConceptFiltersPublished.js

@@ -1,14 +1,10 @@
 import _ from "lodash/fp";
-import React from "react";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
+import { AvailableFilters } from "@truedat/core/components";
 import { addConceptFilter, resetConceptFilters } from "../routines";
 import { getConceptAvailableFilters } from "../selectors";
 
-const AvailableFilters = React.lazy(() =>
-  import("@truedat/core/components/AvailableFilters")
-);
-
 const mapStateToProps = (state) => ({
   filters: _.flow(getConceptAvailableFilters, _.without(["status"]))(state),
   disabled: state.conceptFiltersLoading,

package/src/concepts/components/ConceptForm.js

@@ -14,27 +14,17 @@ import { compose } from "redux";
 import { connect } from "react-redux";
 import { injectIntl, FormattedMessage } from "react-intl";
 import { HistoryBackButton } from "@truedat/core/components";
-import { selectTemplate, selectDomain } from "@truedat/df/routines";
-import { applyTemplate } from "@truedat/df/utils";
 import { conceptAction } from "../routines";
 import DomainDropdownSelector from "../../taxonomy/components/DomainDropdownSelector";
 
-const DynamicForm = React.lazy(() =>
-  import("@truedat/df/components/DynamicForm")
+const SelectableDynamicForm = React.lazy(() =>
+  import("@truedat/df/components/SelectableDynamicForm")
 );
 
 const RichTextEditor = React.lazy(() =>
   import("@truedat/core/components/RichTextEditor")
 );
 
-const TemplateLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplateLoader")
-);
-
-const TemplateSelector = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplateSelector")
-);
-
 const actionKey = "create";
 
 const staticFields = ["name", "description"];
@@ -50,59 +40,24 @@ const isValid = _.conforms({
   name: isNonEmptyString,
   domain_id: _.isFinite,
   description: _.negate(_.isEmpty),
+  type: isNonEmptyString,
 });
 
 export class ConceptForm extends React.Component {
   static propTypes = {
     action: PropTypes.object,
-    applyTemplate: PropTypes.func,
     conceptAction: PropTypes.func,
     conceptActionLoading: PropTypes.string,
     intl: PropTypes.object,
-    selectDomain: PropTypes.func,
-    selectTemplate: PropTypes.func,
-    template: PropTypes.object,
-    templateLoading: PropTypes.bool,
-    templates: PropTypes.array,
   };
 
   state = initialState;
 
-  componentDidMount() {
-    const { templates } = this.props;
-    if (_.size(templates) == 1) {
-      const { selectTemplate } = this.props;
-      const id = _.flow(_.head, _.prop("id"))(templates);
-      selectTemplate({ id });
-    }
-  }
-
-  componentDidUpdate() {
-    const { applyTemplate, template } = this.props;
-    const { type, content, domain_id } = this.state;
-
-    if (_.has("name")(template) && !_.propEq("name", type)(template))
-      this.setState({
-        type: _.prop("name")(template),
-        content: applyTemplate(content, domain_id),
-      });
-  }
-
-  handleDomainSelected = (e, { value }) => {
+  handleDomainSelected = (_e, { value }) => {
     const domain_id = value;
-
-    const { selectDomain } = this.props;
-    selectDomain({ id: domain_id });
-
     this.setState({ domain_id });
   };
 
-  handleTemplateSelected = (e, data) => {
-    const { value } = data;
-    const { selectTemplate } = this.props;
-    selectTemplate({ id: value });
-  };
-
   handleEditorChange = (e, { value }) => {
     this.handleChange(null, { name: "description", value });
   };
@@ -115,27 +70,24 @@ export class ConceptForm extends React.Component {
     }
   };
 
-  handleContentChange = (content) => {
-    this.setState({ content });
-  };
+  handleContentChange = ({ content }) => this.setState({ content });
 
   isInvalid = () => _.negate(isValid)(this.state);
 
   handleSubmit = (e) => {
     e.preventDefault();
-    const { action, applyTemplate, conceptAction } = this.props;
-    const businessConceptVersion = _.pick([
+    const { action, conceptAction } = this.props;
+    const business_concept_version = _.pick([
       "domain_id",
       "type",
+      "content",
       ...staticFields,
     ])(this.state);
 
-    const content = applyTemplate(this.state?.content, this.state?.domain_id);
-
     conceptAction({
       action: actionKey,
       ...action,
-      business_concept_version: { ...businessConceptVersion, content },
+      business_concept_version,
     });
   };
 
@@ -144,124 +96,97 @@ export class ConceptForm extends React.Component {
       action,
       conceptActionLoading,
       intl: { formatMessage },
-      template,
-      templateLoading,
-      templates,
     } = this.props;
 
-    const { name, description, content } = this.state;
+    const { name, description, content, type, domain_id } = this.state;
 
     const loading =
-      templateLoading ||
-      (action && action.href && conceptActionLoading === action.href);
+      action && action.href && conceptActionLoading === action.href;
 
     return (
-      <>
-        <TemplateLoader />
-        <Container as={Segment} text>
-          <Header as="h2">
-            <Icon name="book" />
-            <Header.Content>
-              <FormattedMessage id="concepts.actions.create" />
-            </Header.Content>
-          </Header>
-          <Form loading={loading}>
-            <Header
-              as="h3"
-              content={<FormattedMessage id="concepts.form.required_fields" />}
-            />
-            <DomainDropdownSelector
-              name="domain"
-              invalid={!_.isFinite(this.state.domain_id)}
-              onChange={this.handleDomainSelected}
+      <Container as={Segment} text>
+        <Header as="h2">
+          <Icon name="book" />
+          <Header.Content>
+            <FormattedMessage id="concepts.actions.create" />
+          </Header.Content>
+        </Header>
+        <Form loading={loading}>
+          <Header
+            as="h3"
+            content={formatMessage({ id: "concepts.form.required_fields" })}
+          />
+          <DomainDropdownSelector
+            name="domain"
+            invalid={!_.isFinite(domain_id)}
+            onChange={this.handleDomainSelected}
+          />
+          <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>
+          <Form.Field required>
+            <label>
+              <FormattedMessage id="concepts.props.description" />
+              {_.isEmpty(description) ? (
+                <Label pointing="left">
+                  <FormattedMessage id="template.form.validation.empty_required" />
+                </Label>
+              ) : null}
+            </label>
+            <RichTextEditor
+              name="description"
+              value={description}
+              onChange={this.handleEditorChange}
             />
-            {_.size(templates) > 1 && (
-              <TemplateSelector
-                name="template"
-                selectedValue={_.prop("id")(template)}
-                onChange={this.handleTemplateSelected}
+          </Form.Field>
+          <SelectableDynamicForm
+            scope="bg"
+            domainIds={_.isNil(domain_id) ? null : [domain_id]}
+            required
+            header={
+              <Header
+                as="h3"
+                content={formatMessage({
+                  id: "concepts.form.aditional_fields",
+                })}
               />
-            )}
-
-            <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>
-
-            <Form.Field required>
-              <label>
-                {formatMessage({ id: "concepts.props.description" })}
-                {_.isEmpty(description) ? (
-                  <Label pointing="left">
-                    <FormattedMessage id="template.form.validation.empty_required" />
-                  </Label>
-                ) : null}
-              </label>
-              <RichTextEditor
-                name="description"
-                value={description}
-                onChange={this.handleEditorChange}
-              />
-            </Form.Field>
-            {template && template.id && (
-              <>
-                <Header
-                  as="h3"
-                  content={
-                    <FormattedMessage id="concepts.form.aditional_fields" />
-                  }
-                />
-                <DynamicForm
-                  onChange={this.handleContentChange}
-                  content={content}
-                />
-              </>
-            )}
-            <div className="actions">
-              <HistoryBackButton
-                content={formatMessage({ id: "actions.cancel" })}
-              />
-              <Button
-                primary
-                disabled={this.isInvalid()}
-                onClick={this.handleSubmit}
-                content={<FormattedMessage id="actions.create" />}
-              />
-            </div>
-          </Form>
-        </Container>
-      </>
+            }
+            content={content}
+            name={type}
+            onChange={this.handleContentChange}
+            onNameChange={(type) => this.setState({ type })}
+          />
+          <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>
     );
   }
 }
 
-const mapStateToProps = ({
-  conceptActionLoading,
-  conceptsActions,
-  template,
-  templateLoading,
-  templates,
-}) => ({
+const mapStateToProps = ({ conceptActionLoading, conceptsActions }) => ({
   action: _.prop(actionKey)(conceptsActions),
-  applyTemplate: applyTemplate(template),
   conceptActionLoading,
-  template,
-  templateLoading,
-  templates,
 });
 
 export default compose(
   injectIntl,
-  connect(mapStateToProps, { conceptAction, selectDomain, selectTemplate })
+  connect(mapStateToProps, { conceptAction })
 )(ConceptForm);

package/src/concepts/components/ConceptRoutes.js

@@ -12,7 +12,7 @@ import {
   CONCEPTS_NEW,
   CONCEPTS_PENDING,
   CONCEPT_EDIT,
-  CONCEPT_VERSION
+  CONCEPT_VERSION,
 } from "@truedat/core/routes";
 import DomainsLoader from "../../taxonomy/components/DomainsLoader";
 import Concept from "./Concept";
@@ -43,7 +43,7 @@ const RelationsGraphLoader = React.lazy(() =>
 export const ConceptRoutes = ({ concept, conceptLoaded, templatesLoaded }) => {
   const authorized = useAuthorized([
     "business_glossary_view",
-    "business_glossary_management"
+    "business_glossary_management",
   ]);
   const conceptsActive = useActiveRoutes([CONCEPTS, CONCEPTS_PENDING]);
   return (
@@ -58,12 +58,17 @@ export const ConceptRoutes = ({ concept, conceptLoaded, templatesLoaded }) => {
               <ConceptUserFiltersLoader />
               <ConceptsDefaultFiltersLoader
                 defaultFilters={{
-                  status: ["pending_approval", "draft", "rejected"]
+                  status: ["pending_approval", "draft", "rejected"],
                 }}
               />
               <ConceptFiltersLoader
                 defaultFilters={{
-                  status: ["pending_approval", "draft", "rejected", "published"]
+                  status: [
+                    "pending_approval",
+                    "draft",
+                    "rejected",
+                    "published",
+                  ],
                 }}
               />
               <Concepts
@@ -93,12 +98,12 @@ export const ConceptRoutes = ({ concept, conceptLoaded, templatesLoaded }) => {
                       <ConceptUserFiltersLoader />
                       <ConceptsDefaultFiltersLoader
                         defaultFilters={{
-                          status: ["published"]
+                          status: ["published"],
                         }}
                       />
                       <ConceptFiltersLoader
                         defaultFilters={{
-                          status: ["published"]
+                          status: ["published"],
                         }}
                       />
                       <Concepts
@@ -128,8 +133,7 @@ export const ConceptRoutes = ({ concept, conceptLoaded, templatesLoaded }) => {
                     <>
                       <DomainsLoader actions="create_business_concept" />
                       <ConceptCrumbs conceptAction="concepts.actions.create" />
-                      <TemplatesLoader scope="bg" />
-                      {templatesLoaded && <ConceptForm />}
+                      <ConceptForm />
                     </>
                   )}
                 />
@@ -176,13 +180,13 @@ export const ConceptRoutes = ({ concept, conceptLoaded, templatesLoaded }) => {
 ConceptRoutes.propTypes = {
   concept: PropTypes.object,
   conceptLoaded: PropTypes.bool,
-  templatesLoaded: PropTypes.bool
+  templatesLoaded: PropTypes.bool,
 };
 
 const mapStateToProps = ({ concept, templatesLoading, templates }) => ({
   conceptLoaded: !_.isEmpty(concept),
   templatesLoaded: !templatesLoading && !_.isEmpty(templates),
-  concept
+  concept,
 });
 
 export default connect(mapStateToProps)(ConceptRoutes);

package/src/concepts/components/ConceptsBulkUpdate.js

@@ -211,7 +211,7 @@ const mapStateToProps = ({
 }) => {
   const concept = _.head(concepts);
   const templateId =
-    templates && concept && concept.type
+    templates && concept?.type
       ? _.flow(_.find(_.propEq("name", concept.type)), _.prop("id"))(templates)
       : null;
   return {

package/src/concepts/components/SharedToForm.js

@@ -61,7 +61,7 @@ export const SharedToForm = ({
             disabled={!isDirty || !isValid}
             loading={saving}
             primary
-            content={formatMessage({ id: "share.actions.submit" })}
+            content={formatMessage({ id: "actions.share" })}
           />
         </div>
       </Form>

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

@@ -1,10 +1,16 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { ConceptFilters } from "../ConceptFilters";
+import { render } from "@truedat/test/render";
+import ConceptFilters from "../ConceptFilters";
+
+const state = {
+  conceptFilters: { domain_id: [1, 2], confidential: ["yes", "no"] },
+  conceptActiveFilters: { domain_id: [1] },
+};
+const renderOpts = { state };
 
 describe("<ConceptFilters />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<ConceptFilters />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<ConceptFilters />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });