@truedat/bg 5.7.1 → 5.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "5.7.1",
+  "version": "5.7.3",
   "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": "5.7.1",
+    "@truedat/test": "5.7.3",
     "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": "5.7.1",
-    "@truedat/df": "5.7.1",
-    "@truedat/lm": "5.7.1",
+    "@truedat/core": "5.7.3",
+    "@truedat/df": "5.7.3",
+    "@truedat/lm": "5.7.3",
     "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": "88ae546acbe935babaa0b583fb6eb6950c86fd55"
+  "gitHead": "adaa367000214d1d4200c98b62aadfc84a29da07"
 }

package/src/concepts/components/ConceptsBulkUpdate.js

@@ -1,6 +1,9 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { useLocation } from "react-router-dom";
+import { connect } from "react-redux";
 import {
   Button,
   Container,
@@ -10,217 +13,277 @@ import {
   Segment,
   Message,
 } from "semantic-ui-react";
-import { connect } from "react-redux";
-import { FormattedMessage } from "react-intl";
+
 import {
   ConfirmModal,
   DomainSelector,
   HistoryBackButton,
+  Loading,
 } from "@truedat/core/components";
-import { selectTemplate } from "@truedat/df/routines";
+import { useTemplate } from "@truedat/core/hooks";
+import { makeSearchQuerySelector } from "@truedat/core/selectors";
+
 import { applyTemplateWithoutDefaults } from "@truedat/df/utils";
-import { bulkUpdate } from "../routines";
+import { bulkUpdate, fetchConcepts } from "../routines";
 
 const DynamicForm = React.lazy(() =>
   import("@truedat/df/components/DynamicForm")
 );
-const TemplateLoader = React.lazy(() =>
-  import("@truedat/df/templates/components/TemplateLoader")
-);
 
-const initialState = {
-  content: {},
-  domainsLoading: true,
-  domains: [],
-  selectedDomain: null,
+const isEmptyValue = (value) => !_.isNumber(value) && _.isEmpty(value);
+const fieldsToOmit = ["_confidential"];
+const pendingConceptsFilters = {
+  status: ["pending_approval", "draft", "rejected"],
+};
+const conceptFilters = {
+  status: ["published"],
 };
 
-const isValid = _.conforms({
-  domain_id: _.isFinite,
-});
+const TemplateLoader = ({
+  templateName,
+  domainId,
+  onChange,
+  content,
+  fieldsToOmit,
+  setTemplate,
+}) => {
+  const { data, loading } = useTemplate({
+    name: templateName,
+    domainIds: [domainId],
+  });
 
-const fieldsToOmit = ["_confidential"];
+  const template = _.prop("template")(data);
 
-const actions = (handleSubmit) => [
-  {
-    key: "no",
-    secondary: true,
-    content: <FormattedMessage id="confirmation.no" />,
-  },
-  {
-    key: "yes",
-    primary: true,
-    content: <FormattedMessage id="confirmation.yes" />,
-    onClick: handleSubmit,
-  },
-];
+  useEffect(() => {
+    setTemplate(template);
+  }, [template]);
 
-const isEmptyValue = (value) => !_.isNumber(value) && _.isEmpty(value);
+  return loading || !template ? (
+    <Loading />
+  ) : template ? (
+    <DynamicForm
+      onChange={onChange}
+      template={template}
+      applyTemplate={applyTemplateWithoutDefaults}
+      content={content}
+      fieldsToOmit={fieldsToOmit}
+    />
+  ) : null;
+};
 
-export class ConceptsBulkUpdate extends React.Component {
-  static propTypes = {
-    loading: PropTypes.bool,
-    selectTemplate: PropTypes.func,
-    conceptCount: PropTypes.number,
-    concepts: PropTypes.array,
-    templateId: PropTypes.number,
-    template: PropTypes.object,
-    applyTemplate: PropTypes.func,
-    bulkUpdate: PropTypes.func,
-  };
+TemplateLoader.propTypes = {
+  templateName: PropTypes.string,
+  domainId: PropTypes.number,
+  onChange: PropTypes.func,
+  content: PropTypes.object,
+  fieldsToOmit: PropTypes.array,
+  setTemplate: PropTypes.func,
+};
 
-  state = initialState;
+export const ConceptsBulkUpdate = ({
+  loading,
+  conceptCount,
+  concepts,
+  templateName,
+  bulkUpdate,
+  fetchConcepts,
+  conceptPayload,
+}) => {
+  const [content, setContent] = useState({});
+  const [domains, setDomains] = useState([]);
+  const [domainsLoading, setDomainsLoading] = useState(true);
+  const [selectedDomain, setSelectedDomain] = useState();
+  const [domainId, setDomainId] = useState(null);
+  const [template, setTemplate] = useState(null);
 
-  componentDidMount() {
-    const { templateId, selectTemplate } = this.props;
-    selectTemplate({ id: templateId });
-  }
+  const { search } = useLocation();
+  const path = search.split("?").pop();
 
-  handleDomainsLoaded = (data) => {
-    this.setState({ domains: data.domains, domainsLoading: false });
-  };
+  useEffect(() => {
+    const defaultFilters =
+      path === "pendingConcepts" ? pendingConceptsFilters : conceptFilters;
+    const subscope =
+      path !== "concepts" && path !== "pendingConcepts" ? [path] : "";
+    fetchConcepts({
+      ...conceptPayload,
+      filters: {
+        ...conceptPayload.filters,
+        ...defaultFilters,
+        "template.subscope": subscope,
+      },
+      size: 20,
+    });
+  }, []);
 
-  handleDomainSelected = (e, { value }) => {
-    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 });
+  const handleDomainsLoaded = (domains) => {
+    setDomainsLoading(false);
+    setDomains(domains);
+  };
+  const handleDomainSelected = (value) => {
+    const domain = _.find({ id: value })(domains);
+    if (domain && domain.id !== selectedDomain) {
+      const intDomainId = domain ? _.toInteger(domain.id) : null;
+      setSelectedDomain(domain);
+      setDomainId(intDomainId);
+    } else {
+      setSelectedDomain([]);
+      setDomainId(null);
     }
   };
 
-  handleContentChange = (content) => this.setState({ content });
-
-  isInvalid = () => _.negate(isValid)(this.state);
+  const handleContentChange = (content) => {
+    setContent(content);
+  };
 
-  handleSubmit = (e) => {
+  const handleSubmit = (e) => {
     e.preventDefault();
-    const { applyTemplate, bulkUpdate } = this.props;
-    const domain_id = _.prop("domain_id")(this.state);
-    const content = _.flow(
-      _.prop("content"),
-      (content) => applyTemplate(content, domain_id),
+
+    const parsedContent = _.flow(
+      applyTemplateWithoutDefaults(template, domainId),
       _.omit(fieldsToOmit),
       _.omitBy(isEmptyValue)
-    )(this.state);
-    bulkUpdate({ update_attributes: { content, domain_id } });
+    )(content);
+
+    bulkUpdate({
+      update_attributes: { content: parsedContent, domain_id: domainId },
+    });
   };
 
-  render() {
-    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 (
-      <Container as={Segment} text>
-        <Header as="h2">
-          <Icon name="book" />
-          <Header.Content>
-            <FormattedMessage id="concepts.header.edit.bulk" />
-          </Header.Content>
-        </Header>
-        <Header as="h3">
-          <Header.Content>
-            <FormattedMessage
-              id="concepts.header.edit.bulk.concepts_count"
-              values={{ concepts_count: validConcepts ? conceptCount : 0 }}
+  const validConcepts = _.size(_.uniq(_.map(_.prop("type"))(concepts))) == 1;
+
+  const isInvalid = () => !_.isFinite(domainId);
+
+  const actions = (handleSubmit) => [
+    {
+      key: "no",
+      secondary: true,
+      content: <FormattedMessage id="confirmation.no" />,
+    },
+    {
+      key: "yes",
+      primary: true,
+      content: <FormattedMessage id="confirmation.yes" />,
+      onClick: handleSubmit,
+    },
+  ];
+
+  return (
+    <Container as={Segment} text>
+      <Header as="h2">
+        <Icon name="book" />
+        <Header.Content>
+          <FormattedMessage id="concepts.header.edit.bulk" />
+        </Header.Content>
+      </Header>
+      <Header as="h3">
+        <Header.Content>
+          <FormattedMessage
+            id="concepts.header.edit.bulk.concepts_count"
+            values={{ concepts_count: validConcepts ? conceptCount : 0 }}
+          />
+        </Header.Content>
+      </Header>
+
+      {validConcepts && conceptCount != 0 ? (
+        <>
+          <Header as="h4">
+            <Header.Content>
+              <FormattedMessage id="concepts.header.edit.bulk.info_message" />
+            </Header.Content>
+          </Header>
+          <Form loading={loading || domainsLoading}>
+            <DomainSelector
+              action="manageConcept"
+              onChange={(_e, { value }) => handleDomainSelected(value)}
+              onLoad={(data) => handleDomainsLoaded(data.domains)}
+              required
+              value={domainId}
+              labels
             />
-          </Header.Content>
-        </Header>
-
-        <TemplateLoader />
-        {validConcepts && conceptCount != 0 ? (
-          <>
-            <Header as="h4">
-              <Header.Content>
-                <FormattedMessage id="concepts.header.edit.bulk.info_message" />
-              </Header.Content>
-            </Header>
-            <Form loading={loading || domainsLoading}>
-              <DomainSelector
-                action="manageConcept"
-                onChange={this.handleDomainSelected}
-                onLoad={this.handleDomainsLoaded}
-                required
-                value={domain_id}
-                labels
+            {templateName && !_.isEmpty(selectedDomain) ? (
+              <TemplateLoader
+                onChange={handleContentChange}
+                templateName={templateName}
+                content={content}
+                domainId={domainId}
+                fieldsToOmit={fieldsToOmit}
+                setTemplate={setTemplate}
               />
-              {template && templateId && !_.isEmpty(selectedDomain) ? (
-                <DynamicForm
-                  onChange={this.handleContentChange}
-                  content={content}
-                  fieldsToOmit={fieldsToOmit}
-                  applyTemplate={applyTemplateWithoutDefaults}
+            ) : null}
+
+            <ConfirmModal
+              actions={actions(handleSubmit)}
+              trigger={
+                <Button
+                  primary
+                  disabled={isInvalid()}
+                  content={<FormattedMessage id="actions.save" />}
                 />
-              ) : null}
-              <ConfirmModal
-                actions={actions(this.handleSubmit)}
-                trigger={
-                  <Button
-                    primary
-                    disabled={this.isInvalid()}
-                    content={<FormattedMessage id="actions.save" />}
-                  />
-                }
-                header={
-                  <FormattedMessage id="concepts.edit.bulk.confirmation.header" />
-                }
-                content={
-                  <FormattedMessage
-                    id="concepts.edit.bulk.confirmation.content"
-                    values={{ concepts_count: conceptCount }}
-                  />
-                }
-                onConfirm={this.handleSubmit}
-              />
-              <HistoryBackButton
-                content={<FormattedMessage id="actions.cancel" />}
-              />
-            </Form>
-          </>
-        ) : (
-          <Message>
-            <Message.Header>
-              <FormattedMessage id="bulkUpdate.no.concepts.header" />
-            </Message.Header>
-            <p>
-              <FormattedMessage id="bulkUpdate.no.concepts.body" />
-            </p>
-          </Message>
-        )}
-      </Container>
-    );
-  }
-}
-
-const mapStateToProps = (
-  {
-    bulkUpdateLoading,
-    templateLoading,
-    conceptCount,
-    templates,
-    template,
-    concepts,
-  },
-  { applyTemplate } // ownProps only used for testing
-) => {
-  const concept = _.head(concepts);
-  const templateId =
-    templates && concept?.type
-      ? _.flow(_.find(_.propEq("name", concept.type)), _.prop("id"))(templates)
-      : null;
-  return {
-    loading: templateLoading || bulkUpdateLoading,
-    template,
-    templateId,
-    applyTemplate: applyTemplate || applyTemplateWithoutDefaults(template),
-    concepts,
-    conceptCount,
-  };
+              }
+              header={
+                <FormattedMessage id="concepts.edit.bulk.confirmation.header" />
+              }
+              content={
+                <FormattedMessage
+                  id="concepts.edit.bulk.confirmation.content"
+                  values={{ concepts_count: conceptCount }}
+                />
+              }
+              onConfirm={handleSubmit}
+            />
+            <HistoryBackButton
+              content={<FormattedMessage id="actions.cancel" />}
+            />
+          </Form>
+        </>
+      ) : (
+        <Message>
+          <Message.Header>
+            <FormattedMessage id="bulkUpdate.no.concepts.header" />
+          </Message.Header>
+          <p>
+            <FormattedMessage id="bulkUpdate.no.concepts.body" />
+          </p>
+        </Message>
+      )}
+    </Container>
+  );
 };
 
-export default connect(mapStateToProps, {
-  bulkUpdate,
-  selectTemplate,
-})(ConceptsBulkUpdate);
+ConceptsBulkUpdate.propTypes = {
+  loading: PropTypes.bool,
+  conceptCount: PropTypes.number,
+  concepts: PropTypes.array,
+  templateName: PropTypes.string,
+  bulkUpdate: PropTypes.func,
+  fetchConcepts: PropTypes.func,
+  conceptPayload: PropTypes.object,
+};
+
+const makeMapStateToProps = () => {
+  const searchQuerySelector = makeSearchQuerySelector(
+    "conceptQuery",
+    "conceptActiveFilters"
+  );
+  const mapStateToProps = (state, props) => {
+    const concept = _.head(state.concepts);
+    const templateName =
+      state.templates && concept?.type
+        ? _.flow(
+            _.find(_.propEq("name", concept.type)),
+            _.prop("name")
+          )(state.templates)
+        : null;
+    return {
+      conceptPayload: searchQuerySelector(state, props),
+      loading: state.templateLoading || state.bulkUpdateLoading,
+      templateName,
+      concepts: state.concepts,
+      conceptCount: state.conceptCount,
+    };
+  };
+  return mapStateToProps;
+};
+export default connect(makeMapStateToProps, { bulkUpdate, fetchConcepts })(
+  ConceptsBulkUpdate
+);

package/src/concepts/components/ConceptsUpdateButton.js

@@ -3,13 +3,16 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Button, Popup } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
 import { useAuthorized } from "@truedat/core/hooks";
 import { CONCEPTS_BULK_UPDATE } from "@truedat/core/routes";
 
 export const ConceptsUpdateButton = ({ updateUrl }) => {
+  const { pathname } = useLocation();
   const authorized = useAuthorized();
+  const pathNameWithoutSlash = pathname.split("/").pop();
+
   return authorized ? (
     <Popup
       content={<FormattedMessage id="concepts.actions.bulk_update.popup" />}
@@ -20,7 +23,7 @@ export const ConceptsUpdateButton = ({ updateUrl }) => {
           <Button
             primary
             as={Link}
-            to={updateUrl || ""}
+            to={updateUrl + `?${pathNameWithoutSlash}` || ""}
             content={<FormattedMessage id="actions.update" />}
             disabled={_.isEmpty(updateUrl)}
           />

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

@@ -2,25 +2,40 @@ import React from "react";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
-import { domainsMock } from "@truedat/test/mocks";
+import { domainsMock, templateByNameMock } from "@truedat/test/mocks";
 import { bulkUpdate } from "../../routines";
 import ConceptsBulkUpdate from "../ConceptsBulkUpdate";
 
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useLocation: () => ({ search: "?concepts" }),
+}));
+
 const content = [
-  { name: "g1", fields: [{ name: "f1", label: "f1", placeholder: "p1" }] },
+  {
+    name: "g1",
+    fields: [{ name: "field1", label: "field1", placeholder: "field1" }],
+  },
 ];
-const template = { name: "t1", id: 123, content };
+const template = { name: "template1", id: 1, content: content };
+
 const state = {
   conceptCount: 1,
-  concepts: [{ type: "t1" }],
-  template,
+  concepts: [{ type: "template1" }],
   templates: [template],
+  loading: false,
+  templateLoading: false,
+  bulkUpdateLoading: false,
+  domainsLoading: false,
 };
 
 const renderOpts = {
-  fallback: "lazy",
-  mocks: [domainsMock({ action: "manageConcept" })],
+  mocks: [
+    domainsMock({ action: "manageConcept" }),
+    templateByNameMock({ name: "template1", domainIds: [1] }),
+  ],
   state,
+  fallback: "lazy",
 };
 
 describe("<ConceptsBulkUpdate />", () => {
@@ -29,23 +44,13 @@ describe("<ConceptsBulkUpdate />", () => {
       <ConceptsBulkUpdate />,
       renderOpts
     );
-    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    expect(container).toMatchSnapshot();
-  });
 
-  it("calls applyTemplate when selectedDomain changes", async () => {
-    const applyTemplate = jest.fn();
-    const { findByText, queryByText } = render(
-      <ConceptsBulkUpdate applyTemplate={applyTemplate} />,
-      renderOpts
-    );
     await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
-    await waitFor(() => expect(queryByText(/fooDomain/)).toBeInTheDocument());
-    expect(applyTemplate).toHaveBeenCalledTimes(0);
-    userEvent.click(await findByText("fooDomain"));
-    expect(applyTemplate).toHaveBeenCalledTimes(1);
-    userEvent.click(await findByText("barDomain"));
-    expect(applyTemplate).toHaveBeenCalledTimes(2);
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+
+    expect(container).toMatchSnapshot();
   });
 
   it("DynamicForm rendered if template, template_id, selectedDomain informed", async () => {
@@ -56,7 +61,7 @@ describe("<ConceptsBulkUpdate />", () => {
     );
     await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
     userEvent.click(await findByText("fooDomain"));
-    await waitFor(() => expect(queryByText(/f1/)).toBeInTheDocument());
+    await waitFor(() => expect(queryByText(/field1/)).toBeInTheDocument());
   });
 
   it("calls bulkUpdate on onClick", async () => {
@@ -70,15 +75,15 @@ describe("<ConceptsBulkUpdate />", () => {
     );
     await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
     userEvent.click(await findByText("fooDomain"));
-    await waitFor(() => expect(queryByText(/f1/)).toBeInTheDocument());
-    userEvent.type(await findByPlaceholderText("p1"), "abc123456");
+    await waitFor(() => expect(queryByText(/field1/)).toBeInTheDocument());
+    userEvent.type(await findByPlaceholderText("field1"), "abc123456");
     await waitFor(() => expect(queryByText(/Save/)).toBeEnabled());
     userEvent.click(await findByText("Save"));
     userEvent.click(await findByText("Yes"));
     await waitFor(() => {
       expect(dispatch).toHaveBeenLastCalledWith(
         bulkUpdate({
-          update_attributes: { content: { f1: "abc123456" }, domain_id: 1 },
+          update_attributes: { content: { field1: "abc123456" }, domain_id: 1 },
         })
       );
     });

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

@@ -4,13 +4,18 @@ import { shallow } from "enzyme";
 import { ConceptsUpdateButton } from "../ConceptsUpdateButton";
 
 jest.mock("@truedat/core/hooks", () => ({
-  useAuthorized: jest.fn(() => true)
+  useAuthorized: jest.fn(() => true),
+}));
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useLocation: () => ({ pathname: "/concept" }),
 }));
 
 describe("<ConceptsUpdateButton />", () => {
   it("button will appear disabled if template is empty", () => {
     const props = {
-      updateUrl: ""
+      updateUrl: "",
     };
     const wrapper = shallow(<ConceptsUpdateButton {...props} />);
     wrapper.find("Popup").props().content;
@@ -19,7 +24,7 @@ describe("<ConceptsUpdateButton />", () => {
 
   it("matches the latest snapshot", () => {
     const props = {
-      updateUrl: "url"
+      updateUrl: "url",
     };
     const wrapper = shallow(<ConceptsUpdateButton {...props} />);
     expect(wrapper).toMatchSnapshot();

package/src/concepts/components/__tests__/__snapshots__/ConceptsBulkUpdate.spec.js.snap

@@ -4,7 +4,6 @@ exports[`<ConceptsBulkUpdate /> matches the latest snapshot 1`] = `
 <div>
   <div
     class="ui segment ui text container"
-    style=""
   >
     <h2
       class="ui header"

package/src/concepts/components/__tests__/__snapshots__/ConceptsUpdateButton.spec.js.snap

@@ -44,7 +44,7 @@ exports[`<ConceptsUpdateButton /> matches the latest snapshot 1`] = `
         }
         disabled={false}
         primary={true}
-        to="url"
+        to="url?concept"
       />
     </span>
   }