@truedat/bg 4.44.2 → 4.44.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "4.44.2",
+  "version": "4.44.3",
   "description": "Truedat Web Business Glossary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.44.2",
+    "@truedat/test": "4.44.3",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -83,8 +83,8 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "4.44.2",
-    "@truedat/df": "4.44.2",
+    "@truedat/core": "4.44.3",
+    "@truedat/df": "4.44.3",
     "file-saver": "^2.0.5",
     "moment": "^2.24.0",
     "path-to-regexp": "^1.7.0",
@@ -104,5 +104,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "ca0c5fffcba96736f7a2054f3c37789da8c30a9e"
+  "gitHead": "d5e72d523389c6e66d6f7168d7e3546b5d2ffdda"
 }

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/ConceptForm.js

@@ -13,8 +13,8 @@ import {
 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 { HistoryBackButton, TemplateSelector } from "@truedat/core/components";
+import { selectDomain } from "@truedat/df/routines";
 import { applyTemplate } from "@truedat/df/utils";
 import { conceptAction } from "../routines";
 import DomainDropdownSelector from "../../taxonomy/components/DomainDropdownSelector";
@@ -27,14 +27,6 @@ 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"];
@@ -43,6 +35,8 @@ const initialState = {
   name: "",
   description: {},
   content: {},
+  templatesLoading: true,
+  template: null,
 };
 
 const isNonEmptyString = _.flow(_.trim, _.negate(_.isEmpty));
@@ -55,38 +49,37 @@ const isValid = _.conforms({
 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;
+  handleTemplatesLoaded = ({ templates = [] } = {}) => {
+    const { type: name, content, domain_id } = this.state;
+    const template = name
+      ? _.find(_.propEq("name", name))(templates)
+      : _.size(templates) == 1
+      ? templates[0]
+      : null;
+    this.setState({
+      template,
+      templatesLoading: false,
+      type: template?.name || null,
+      content: template ? applyTemplate(template)(content, domain_id) : {},
+    });
+  };
 
-    if (_.has("name")(template) && !_.propEq("name", type)(template))
-      this.setState({
-        type: _.prop("name")(template),
-        content: applyTemplate(content, domain_id),
-      });
-  }
+  handleTemplateSelected = (e, { template }) => {
+    const { content, domain_id } = this.state;
+    this.setState({
+      template,
+      type: template?.name || null,
+      content: template ? applyTemplate(template)(content, domain_id) : {},
+    });
+  };
 
   handleDomainSelected = (e, { value }) => {
     const domain_id = value;
@@ -97,12 +90,6 @@ export class ConceptForm extends React.Component {
     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 });
   };
@@ -123,19 +110,21 @@ export class ConceptForm extends React.Component {
 
   handleSubmit = (e) => {
     e.preventDefault();
-    const { action, applyTemplate, conceptAction } = this.props;
+    const { action, conceptAction } = this.props;
     const businessConceptVersion = _.pick([
       "domain_id",
       "type",
       ...staticFields,
     ])(this.state);
-
-    const content = applyTemplate(this.state?.content, this.state?.domain_id);
+    const { template, content, domain_id } = this.state;
 
     conceptAction({
       action: actionKey,
       ...action,
-      business_concept_version: { ...businessConceptVersion, content },
+      business_concept_version: {
+        ...businessConceptVersion,
+        content: applyTemplate(template)(content, domain_id),
+      },
     });
   };
 
@@ -144,124 +133,104 @@ 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, template, templatesLoading } =
+      this.state;
 
     const loading =
-      templateLoading ||
+      templatesLoading ||
       (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" />}
+      <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(this.state.domain_id)}
+            onChange={this.handleDomainSelected}
+          />
+          <TemplateSelector
+            scope="bg"
+            selectedValue={template?.id}
+            onLoad={this.handleTemplatesLoaded}
+            onChange={this.handleTemplateSelected}
+            required
+          />
+          <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}
             />
-            <DomainDropdownSelector
-              name="domain"
-              invalid={!_.isFinite(this.state.domain_id)}
-              onChange={this.handleDomainSelected}
-            />
-            {_.size(templates) > 1 && (
-              <TemplateSelector
-                name="template"
-                selectedValue={_.prop("id")(template)}
-                onChange={this.handleTemplateSelected}
+          </Form.Field>
+          {template?.id ? (
+            <>
+              <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}
+              <DynamicForm
+                onChange={this.handleContentChange}
+                content={content}
+                template={template}
               />
-            </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>
-      </>
+            </>
+          ) : null}
+          <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, selectDomain })
 )(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>