@truedat/bg 4.51.1 → 4.51.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [4.51.3] 2022-09-16
+
+### Changed
+
+- [TD-4794] Replace `DomainDropdownSelector` and `DomainMenuSelector` with
+  common `DomainSelector`
+
 ## [4.49.7] 2022-11-08
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "4.51.1",
+  "version": "4.51.3",
   "description": "Truedat Web Business Glossary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.47.9",
+    "@truedat/test": "4.51.3",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -86,8 +86,8 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "4.51.1",
-    "@truedat/df": "4.51.1",
+    "@truedat/core": "4.51.3",
+    "@truedat/df": "4.51.3",
     "file-saver": "^2.0.5",
     "moment": "^2.24.0",
     "path-to-regexp": "^1.7.0",
@@ -107,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "2f5c5f130f1fd84a103c8a97096eb2c191d06446"
+  "gitHead": "69d6cf8f7379eb2ef5744a4fdd357a7dd662b115"
 }

package/src/concepts/components/ConceptForm.js

@@ -13,9 +13,12 @@ import {
 import { compose } from "redux";
 import { connect } from "react-redux";
 import { injectIntl, FormattedMessage } from "react-intl";
-import { HistoryBackButton, RichTextEditor } from "@truedat/core/components";
+import {
+  DomainSelector,
+  HistoryBackButton,
+  RichTextEditor,
+} from "@truedat/core/components";
 import { conceptAction } from "../routines";
-import DomainDropdownSelector from "../../taxonomy/components/DomainDropdownSelector";
 
 const SelectableDynamicForm = React.lazy(() =>
   import("@truedat/df/components/SelectableDynamicForm")
@@ -25,10 +28,11 @@ const actionKey = "create";
 
 const staticFields = ["name", "description"];
 
-const initialState = {
+const INITIAL_STATE = {
   name: "",
   description: {},
   content: {},
+  domainsLoading: true,
 };
 
 const isNonEmptyString = _.flow(_.trim, _.negate(_.isEmpty));
@@ -47,11 +51,10 @@ export class ConceptForm extends React.Component {
     intl: PropTypes.object,
   };
 
-  state = initialState;
+  state = INITIAL_STATE;
 
   handleDomainSelected = (_e, { value }) => {
-    const domain_id = value;
-    this.setState({ domain_id });
+    this.setState({ domain_id: _.toInteger(value) });
   };
 
   handleEditorChange = (e, { value }) => {
@@ -68,6 +71,8 @@ export class ConceptForm extends React.Component {
 
   handleContentChange = ({ content }) => this.setState({ content });
 
+  handleDomainsLoaded = () => this.setState({ domainsLoading: false });
+
   isInvalid = () => _.negate(isValid)(this.state);
 
   handleSubmit = (e) => {
@@ -94,7 +99,8 @@ export class ConceptForm extends React.Component {
       intl: { formatMessage },
     } = this.props;
 
-    const { name, description, content, type, domain_id } = this.state;
+    const { name, description, content, type, domain_id, domainsLoading } =
+      this.state;
 
     const loading =
       action && action.href && conceptActionLoading === action.href;
@@ -107,15 +113,19 @@ export class ConceptForm extends React.Component {
             <FormattedMessage id="concepts.actions.create" />
           </Header.Content>
         </Header>
-        <Form loading={loading}>
+        <Form loading={loading || domainsLoading}>
           <Header
             as="h3"
             content={formatMessage({ id: "concepts.form.required_fields" })}
           />
-          <DomainDropdownSelector
-            name="domain"
-            invalid={!_.isFinite(domain_id)}
+          <DomainSelector
+            action="createBusinessConcept"
+            label={formatMessage({ id: "domain.selector.label" })}
+            labels
+            required
             onChange={this.handleDomainSelected}
+            onLoad={this.handleDomainsLoaded}
+            value={domain_id}
           />
           <Form.Field required>
             <label>

package/src/concepts/components/ConceptManageDomain.js

@@ -1,35 +1,25 @@
-import _ from "lodash/fp";
-import React from "react";
+import React, { useState } from "react";
 import { Button, Container, Form, Header } from "semantic-ui-react";
 import { connect } from "react-redux";
 import { useForm, Controller } from "react-hook-form";
 import { useIntl } from "react-intl";
 import PropTypes from "prop-types";
-import DomainDropdownSelector from "../../taxonomy/components/DomainDropdownSelector";
-import { getDomainConceptSelectorOptions } from "../../taxonomy/selectors/getDomainsConcept";
+import { DomainSelector } from "@truedat/core/components";
 import { conceptAction } from "../routines";
 
-const actionKey = "update_domain";
-
-export const ConceptManageDomain = ({
-  domainOptions,
-  conceptAction,
-  action,
-  setToDomain,
-}) => {
+export const ConceptManageDomain = ({ domainId, conceptAction, action }) => {
   const { formatMessage } = useIntl();
+  const [loading, setLoading] = useState(true);
   const { handleSubmit, control, formState } = useForm({
     mode: "all",
-    defaultValues: {
-      setToDomain: _.prop("id")(setToDomain),
-    },
+    defaultValues: { domainId },
   });
   const { isDirty, isValid } = formState;
-  const onSubmit = ({ setToDomain }) => {
+  const onSubmit = ({ domainId }) => {
     conceptAction({
-      action: actionKey,
+      action: "update_domain",
       ...action,
-      domain_id: setToDomain,
+      domain_id: domainId,
     });
   };
 
@@ -37,27 +27,21 @@ export const ConceptManageDomain = ({
     <Container style={{ width: "400px" }}>
       <Header
         as="h2"
-        content={formatMessage({
-          id: "concept.changeDomain.header",
-        })}
+        content={formatMessage({ id: "concept.changeDomain.header" })}
       />
-      <Form onSubmit={handleSubmit(onSubmit)}>
+      <Form loading={loading} onSubmit={handleSubmit(onSubmit)}>
         <Controller
           control={control}
-          name="setToDomain"
-          render={({
-            field: { onBlur, onChange, value },
-            fieldState: { error },
-          }) => (
-            <DomainDropdownSelector
-              domainOptions={domainOptions}
-              name="setToDomain"
-              clearable={false}
-              error={!!error}
-              label={formatMessage({ id: "concept.changeDomain.label" })}
+          name="domainId"
+          rules={{ required: true }}
+          render={({ field: { onBlur, onChange, value } }) => (
+            <DomainSelector
+              action="manageConcept"
+              labels
               onBlur={onBlur}
-              required
               onChange={(_e, { value }) => onChange(value)}
+              onLoad={() => setLoading(false)}
+              required
               value={value}
             />
           )}
@@ -76,15 +60,14 @@ export const ConceptManageDomain = ({
 };
 
 ConceptManageDomain.propTypes = {
-  domainOptions: PropTypes.array,
+  action: PropTypes.object,
   conceptAction: PropTypes.func,
-  setToDomain: PropTypes.array,
+  domainId: PropTypes.number,
 };
 
-const mapStateToProps = (state) => ({
-  domainOptions: getDomainConceptSelectorOptions(state),
-  action: _.prop(actionKey)(state.conceptActions),
-  setToDomain: state.concept.domain,
+const mapStateToProps = ({ concept, conceptActions }) => ({
+  action: conceptActions?.update_domain,
+  domainId: concept?.domain?.id,
 });
 
 export default connect(mapStateToProps, { conceptAction })(ConceptManageDomain);

package/src/concepts/components/ConceptRoutes.js

@@ -2,7 +2,6 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { Route, Switch } from "react-router-dom";
-import { useActiveRoutes } from "@truedat/core/hooks";
 import { connect } from "react-redux";
 import { Unauthorized } from "@truedat/core/components";
 import { useAuthorized } from "@truedat/core/hooks";
@@ -14,7 +13,6 @@ import {
   CONCEPT_EDIT,
   CONCEPT_VERSION,
 } from "@truedat/core/routes";
-import DomainsLoader from "../../taxonomy/components/DomainsLoader";
 import Concept from "./Concept";
 import ConceptCrumbs from "./ConceptCrumbs";
 import ConceptEdit from "./ConceptEdit";
@@ -79,11 +77,7 @@ export const ConceptRoutes = ({ concept, conceptLoaded, templatesLoaded }) => {
       <Route
         path={CONCEPTS}
         render={() => (
-          <ConceptsLoader
-            defaultFilters={{
-              status: ["published"],
-            }}
-          />
+          <ConceptsLoader defaultFilters={{ status: ["published"] }} />
         )}
       />
       <Route
@@ -97,9 +91,7 @@ export const ConceptRoutes = ({ concept, conceptLoaded, templatesLoaded }) => {
                 render={() => (
                   <>
                     <ConceptFiltersLoader
-                      defaultFilters={{
-                        status: ["published"],
-                      }}
+                      defaultFilters={{ status: ["published"] }}
                     />
                     <ConceptUserFiltersLoader />
                     <Concepts
@@ -115,7 +107,6 @@ export const ConceptRoutes = ({ concept, conceptLoaded, templatesLoaded }) => {
                 path={CONCEPTS_BULK_UPDATE}
                 render={() => (
                   <>
-                    <DomainsLoader />
                     <ConceptCrumbs conceptAction="actions.update" />
                     <TemplatesLoader scope="bg" />
                     {templatesLoaded && <ConceptsBulkUpdate />}
@@ -127,7 +118,6 @@ export const ConceptRoutes = ({ concept, conceptLoaded, templatesLoaded }) => {
                 path={CONCEPTS_NEW}
                 render={() => (
                   <>
-                    <DomainsLoader actions="create_business_concept" />
                     <ConceptCrumbs conceptAction="concepts.actions.create" />
                     <ConceptForm />
                   </>
@@ -141,7 +131,7 @@ export const ConceptRoutes = ({ concept, conceptLoaded, templatesLoaded }) => {
                     <ConceptCrumbs conceptAction="concepts.actions.edit" />
                     <TemplatesLoader scope="bg" />
                     <ConceptLoader />
-                    {conceptLoaded && templatesLoaded && <ConceptEdit />}
+                    {conceptLoaded && templatesLoaded ? <ConceptEdit /> : null}
                   </>
                 )}
               />
@@ -150,15 +140,16 @@ export const ConceptRoutes = ({ concept, conceptLoaded, templatesLoaded }) => {
                 render={() => (
                   <>
                     <ConceptLoader />
-                    <DomainsLoader />
-                    {conceptLoaded && <ConceptSubscriptionLoader />}
                     <RelationTagsLoader />
-                    {conceptLoaded && (
-                      <RelationsGraphLoader
-                        resource_id={_.prop("business_concept_id")(concept)}
-                      />
-                    )}
-                    {conceptLoaded && <Concept />}
+                    {conceptLoaded ? (
+                      <>
+                        <ConceptSubscriptionLoader />
+                        <RelationsGraphLoader
+                          resource_id={concept?.business_concept_id}
+                        />
+                        <Concept />
+                      </>
+                    ) : null}
                   </>
                 )}
               />

package/src/concepts/components/ConceptsBulkUpdate.js

@@ -12,11 +12,14 @@ import {
 } from "semantic-ui-react";
 import { connect } from "react-redux";
 import { FormattedMessage } from "react-intl";
-import { ConfirmModal, HistoryBackButton } from "@truedat/core/components";
-import { selectTemplate, selectDomain } from "@truedat/df/routines";
+import {
+  ConfirmModal,
+  DomainSelector,
+  HistoryBackButton,
+} from "@truedat/core/components";
+import { selectTemplate } from "@truedat/df/routines";
 import { applyTemplateWithoutDefaults } from "@truedat/df/utils";
 import { bulkUpdate } from "../routines";
-import DomainDropdownSelector from "./../../taxonomy/components/DomainDropdownSelector";
 
 const DynamicForm = React.lazy(() =>
   import("@truedat/df/components/DynamicForm")
@@ -27,6 +30,9 @@ const TemplateLoader = React.lazy(() =>
 
 const initialState = {
   content: {},
+  domainsLoading: true,
+  domains: [],
+  selectedDomain: null,
 };
 
 const isValid = _.conforms({
@@ -51,7 +57,6 @@ const actions = (handleSubmit) => [
 export class ConceptsBulkUpdate extends React.Component {
   static propTypes = {
     loading: PropTypes.bool,
-    selectDomain: PropTypes.func,
     selectTemplate: PropTypes.func,
     conceptCount: PropTypes.number,
     concepts: PropTypes.array,
@@ -59,7 +64,6 @@ export class ConceptsBulkUpdate extends React.Component {
     template: PropTypes.object,
     applyTemplate: PropTypes.func,
     bulkUpdate: PropTypes.func,
-    selectedDomain: PropTypes.object,
   };
 
   state = initialState;
@@ -69,22 +73,17 @@ export class ConceptsBulkUpdate extends React.Component {
     selectTemplate({ id: templateId });
   }
 
-  componentDidUpdate(prevProps) {
-    const { selectedDomain: prevSelectedDomain } = prevProps;
-    const { applyTemplate, selectedDomain } = this.props;
-    const { content } = this.state;
-    if (selectedDomain && selectedDomain !== prevSelectedDomain) {
-      this.setState({ content: applyTemplate(content, selectedDomain) });
-    }
-  }
+  handleDomainsLoaded = (data) => {
+    this.setState({ domains: data.domains, domainsLoading: false });
+  };
 
   handleDomainSelected = (e, { value }) => {
-    const domain_id = value;
-
-    const { selectDomain } = this.props;
-    selectDomain({ id: domain_id });
-
-    this.setState({ domain_id });
+    const selectedDomain = _.find({ id: value })(this.state.domains);
+    if (selectedDomain && selectedDomain !== this.state.selectedDomain) {
+      const domain_id = selectedDomain ? _.toInteger(selectedDomain.id) : null;
+      const content = this.props.applyTemplate(this.state.content, domain_id);
+      this.setState({ selectedDomain, content, domain_id });
+    }
   };
 
   handleContentChange = (content) => this.setState({ content });
@@ -109,15 +108,9 @@ export class ConceptsBulkUpdate extends React.Component {
   };
 
   render() {
-    const {
-      loading,
-      template,
-      templateId,
-      conceptCount,
-      concepts,
-      selectedDomain,
-    } = this.props;
-    const { content } = this.state;
+    const { loading, template, templateId, conceptCount, concepts } =
+      this.props;
+    const { content, domainsLoading, selectedDomain, domain_id } = this.state;
     const validConcepts = _.size(_.uniq(_.map(_.prop("type"))(concepts))) == 1;
 
     return (
@@ -145,21 +138,23 @@ export class ConceptsBulkUpdate extends React.Component {
                 <FormattedMessage id="concepts.header.edit.bulk.info_message" />
               </Header.Content>
             </Header>
-            <Form loading={loading}>
-              <DomainDropdownSelector
+            <Form loading={loading || domainsLoading}>
+              <DomainSelector
+                action="manageConcept"
                 onChange={this.handleDomainSelected}
-                invalid={!_.isFinite(this.state.domain_id)}
+                onLoad={this.handleDomainsLoaded}
+                required
+                value={domain_id}
+                labels
               />
-              {template &&
-                templateId &&
-                _.negate(_.isEmpty)(selectedDomain) && (
-                  <DynamicForm
-                    onChange={this.handleContentChange}
-                    content={content}
-                    fieldsToOmit={fieldsToOmit}
-                    applyTemplate={applyTemplateWithoutDefaults}
-                  />
-                )}
+              {template && templateId && !_.isEmpty(selectedDomain) ? (
+                <DynamicForm
+                  onChange={this.handleContentChange}
+                  content={content}
+                  fieldsToOmit={fieldsToOmit}
+                  applyTemplate={applyTemplateWithoutDefaults}
+                />
+              ) : null}
               <ConfirmModal
                 actions={actions(this.handleSubmit)}
                 trigger={
@@ -200,15 +195,17 @@ export class ConceptsBulkUpdate extends React.Component {
   }
 }
 
-const mapStateToProps = ({
-  bulkUpdateLoading,
-  templateLoading,
-  conceptCount,
-  templates,
-  template,
-  concepts,
-  selectedDomain,
-}) => {
+const mapStateToProps = (
+  {
+    bulkUpdateLoading,
+    templateLoading,
+    conceptCount,
+    templates,
+    template,
+    concepts,
+  },
+  { applyTemplate } // ownProps only used for testing
+) => {
   const concept = _.head(concepts);
   const templateId =
     templates && concept?.type
@@ -218,8 +215,7 @@ const mapStateToProps = ({
     loading: templateLoading || bulkUpdateLoading,
     template,
     templateId,
-    applyTemplate: applyTemplateWithoutDefaults(template),
-    selectedDomain,
+    applyTemplate: applyTemplate || applyTemplateWithoutDefaults(template),
     concepts,
     conceptCount,
   };
@@ -228,5 +224,4 @@ const mapStateToProps = ({
 export default connect(mapStateToProps, {
   bulkUpdate,
   selectTemplate,
-  selectDomain,
 })(ConceptsBulkUpdate);

package/src/concepts/components/SharedToForm.js

@@ -5,18 +5,12 @@ import { useForm, Controller } from "react-hook-form";
 import { Button, Container, Form, Header } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
+import { DomainSelector } from "@truedat/core/components";
 import { saveSharedTo } from "../routines";
-import { getDomainSelectorOptions } from "../../taxonomy/selectors";
-import DomainMenuSelector from "../../taxonomy/components/DomainMenuSelector";
 
-export const SharedToForm = ({
-  domainOptions,
-  id,
-  saveSharedTo,
-  saving,
-  sharedTo,
-}) => {
+export const SharedToForm = ({ id, saveSharedTo, saving, sharedTo }) => {
   const { formatMessage } = useIntl();
+  const [loading, setLoading] = React.useState(true);
   const { handleSubmit, control, formState } = useForm({
     mode: "all",
     defaultValues: {
@@ -30,27 +24,23 @@ export const SharedToForm = ({
     <Container style={{ width: "400px" }}>
       <Header
         as="h2"
-        content={formatMessage({
-          id: "concept.sharedTo.header",
-        })}
+        content={formatMessage({ id: "concept.sharedTo.header" })}
       />
-      <Form onSubmit={handleSubmit(onSubmit)}>
+      <Form loading={loading} onSubmit={handleSubmit(onSubmit)}>
         <Controller
           control={control}
           name="sharedTo"
-          rules={{ validate: (v) => !_.isEmpty(v) }}
-          render={({
-            field: { onBlur, onChange, value },
-            fieldState: { error },
-          }) => (
-            <DomainMenuSelector
-              domainOptions={domainOptions}
-              name="sharedTo"
-              error={!!error}
-              label={formatMessage({ id: "concept.sharedTo.dropdown.label" })}
-              onBlur={onBlur}
+          render={({ field: { onBlur, onChange, value } }) => (
+            <DomainSelector
+              action="shareConcept"
+              placeholder={formatMessage({
+                id: "concept.sharedTo.dropdown.label",
+              })}
+              labels
+              multiple
               onChange={(_e, { value }) => onChange(value)}
-              required
+              onBlur={onBlur}
+              onLoad={() => setLoading(false)}
               value={value}
             />
           )}
@@ -70,7 +60,6 @@ export const SharedToForm = ({
 };
 
 SharedToForm.propTypes = {
-  domainOptions: PropTypes.array,
   id: PropTypes.number,
   saveSharedTo: PropTypes.func,
   saving: PropTypes.bool,
@@ -78,7 +67,6 @@ SharedToForm.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  domainOptions: getDomainSelectorOptions(state),
   id: state.concept.business_concept_id,
   saving: state.savingSharedTo,
   sharedTo: state.sharedToDomains,

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

@@ -2,7 +2,11 @@ import React from "react";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
-import { multipleTemplatesMock, singleTemplateMock } from "@truedat/test/mocks";
+import {
+  domainsMock,
+  multipleTemplatesMock,
+  singleTemplateMock,
+} from "@truedat/test/mocks";
 import ConceptForm from "../ConceptForm";
 
 const state = {
@@ -10,12 +14,16 @@ const state = {
   conceptActionLoading: "",
   domains: [{ id: 1, name: "domain1" }],
 };
-const variables = { scope: "bg", domainIds: [1] };
+const templateVariables = { scope: "bg", domainIds: [1] };
+const domainVariables = { action: "createBusinessConcept" };
 
 describe("<ConceptForm />", () => {
   describe("with multiple templates", () => {
     const renderOpts = {
-      mocks: [multipleTemplatesMock(variables)],
+      mocks: [
+        multipleTemplatesMock(templateVariables),
+        domainsMock(domainVariables),
+      ],
       state,
       fallback: "lazy",
     };
@@ -26,6 +34,7 @@ describe("<ConceptForm />", () => {
       await waitFor(() =>
         expect(queryByText(/loading/i)).not.toBeInTheDocument()
       );
+      await waitFor(() => expect(queryByText(/fooDomain/)).toBeInTheDocument());
       expect(container).toMatchSnapshot();
     });
 
@@ -35,6 +44,8 @@ describe("<ConceptForm />", () => {
         renderOpts
       );
       await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+      await waitFor(() => expect(queryByText(/fooDomain/)).toBeInTheDocument());
+      userEvent.click(await findByText("fooDomain"));
       userEvent.click(await findByText("template1"));
       expect(getByText("field1")).toBeInTheDocument();
     });
@@ -42,7 +53,7 @@ describe("<ConceptForm />", () => {
 
   describe("with a single template", () => {
     const renderOpts = {
-      mocks: [singleTemplateMock(variables)],
+      mocks: [singleTemplateMock(templateVariables)],
       state,
       fallback: "lazy",
     };
@@ -53,6 +64,9 @@ describe("<ConceptForm />", () => {
       await waitFor(() =>
         expect(queryByText(/loading/i)).not.toBeInTheDocument()
       );
+      await waitFor(() =>
+        expect(queryByText(/fooDomain/)).not.toBeInTheDocument()
+      );
       expect(container).toMatchSnapshot();
     });