@truedat/bg 4.38.7 → 4.40.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.40.0] 2022-03-27
+
+### Changed
+
+- [TD-4491] Simplified `getDomainSelectorOptions` selector
+
+## [4.38.8] 2022-02-22
+
+### Added
+
+- [TD-4481] Allow domain change on business concept
+
 ## [4.37.4] 2022-02-04
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "4.38.7",
+  "version": "4.40.0",
   "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.38.7",
+    "@truedat/test": "4.39.0",
     "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.38.7",
-    "@truedat/df": "4.38.7",
+    "@truedat/core": "4.40.0",
+    "@truedat/df": "4.40.0",
     "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": "840c799ecdd6b8440112ac803119482e688142ed"
+  "gitHead": "0bd677584da73a5021a5c96f2e5525fde9a1958a"
 }

package/src/concepts/components/ConceptActions.js

@@ -228,6 +228,7 @@ const hiddenActions = [
   "upload",
   "bulk_update",
   "set_confidential",
+  "update_domain",
 ];
 
 const editUrl = (conceptActions, concept) =>

package/src/concepts/components/ConceptHeader.js

@@ -16,12 +16,12 @@ export const ConceptHeader = ({
   setConfidentialConcept,
   share,
   domain,
-  template
+  template,
 }) => {
   const { formatMessage } = useIntl();
   const path = linkTo.CONCEPT_VERSION({
     business_concept_id: _.prop("business_concept_id")(concept),
-    id: "current"
+    id: "current",
   });
   const name = concept?.name;
   const description = concept?.description;
@@ -78,15 +78,15 @@ ConceptHeader.propTypes = {
   share: PropTypes.bool,
   concept: PropTypes.object,
   domain: PropTypes.object,
-  template: PropTypes.object
+  template: PropTypes.object,
 };
 
 const mapStateToProps = ({ concept, conceptActions, conceptPermissions }) => ({
-  share: _.has("share")(conceptPermissions),
+  share: _.prop("share")(conceptPermissions),
   concept,
   setConfidentialConcept: _.prop("set_confidential")(conceptActions),
   domain: concept.domain || {},
-  template: concept.template || {}
+  template: concept.template || {},
 });
 
 export default connect(mapStateToProps)(ConceptHeader);

package/src/concepts/components/ConceptManageDomain.js

@@ -0,0 +1,87 @@
+import _ from "lodash/fp";
+import React 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 { conceptAction } from "../routines";
+
+const actionKey = "update_domain";
+
+export const ConceptManageDomain = ({
+  domainOptions,
+  conceptAction,
+  action,
+  setToDomain,
+}) => {
+  const { formatMessage } = useIntl();
+  const { handleSubmit, control, formState } = useForm({
+    mode: "all",
+    defaultValues: {
+      setToDomain: _.prop("id")(setToDomain),
+    },
+  });
+  const { isDirty, isValid } = formState;
+  const onSubmit = ({ setToDomain }) => {
+    conceptAction({
+      action: actionKey,
+      ...action,
+      domain_id: setToDomain,
+    });
+  };
+
+  return (
+    <Container style={{ width: "400px" }}>
+      <Header
+        as="h2"
+        content={formatMessage({
+          id: "concept.changeDomain.header",
+        })}
+      />
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <Controller
+          control={control}
+          name="setToDomain"
+          render={({ onBlur, onChange, value }, { invalid }) => (
+            <DomainDropdownSelector
+              domainOptions={domainOptions}
+              name="setToDomain"
+              clearable={false}
+              error={invalid}
+              label={formatMessage({ id: "concept.changeDomain.label" })}
+              onBlur={onBlur}
+              required
+              onChange={(_e, { value }) => onChange(value)}
+              value={value}
+            />
+          )}
+        />
+        <div className="actions">
+          <Button
+            type="submit"
+            disabled={!isDirty || !isValid}
+            primary
+            content={formatMessage({ id: "conceptDomain.actions.update" })}
+          />
+        </div>
+      </Form>
+    </Container>
+  );
+};
+
+ConceptManageDomain.propTypes = {
+  domainOptions: PropTypes.array,
+  conceptAction: PropTypes.func,
+  setToDomain: PropTypes.array,
+};
+
+const mapStateToProps = (state) => ({
+  domainOptions: getDomainConceptSelectorOptions(state),
+  action: _.prop(actionKey)(state.conceptActions),
+  setToDomain: state.concept.domain,
+});
+
+export default connect(mapStateToProps, { conceptAction })(ConceptManageDomain);

package/src/concepts/components/ConceptManageDomainPopup.js

@@ -0,0 +1,50 @@
+import _ from "lodash/fp";
+import React, { useState, useEffect } from "react";
+import { Button, Icon, Popup } from "semantic-ui-react";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+import ConceptManageDomain from "./ConceptManageDomain";
+
+export const ConceptManageDomainPopup = ({ update_domain, saving }) => {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (saving === false) {
+      setOpen(false);
+    }
+  }, [saving]);
+
+  return update_domain ? (
+    <Popup
+      on="click"
+      basic
+      flowing
+      content={<ConceptManageDomain />}
+      onOpen={() => setOpen(true)}
+      onClose={() => setOpen(false)}
+      open={open}
+      position="bottom right"
+      size="large"
+      positionFixed
+      trigger={
+        <Button
+          basic
+          icon={<Icon name={"pencil alternate"} />}
+          style={{ boxShadow: "none" }}
+        />
+      }
+    />
+  ) : null;
+};
+
+ConceptManageDomainPopup.propTypes = {
+  update_domain: PropTypes.bool,
+  saving: PropTypes.bool,
+};
+
+export const mapStateToProps = ({
+  conceptActions,
+  updatingDomain: saving,
+}) => ({ update_domain: _.has("update_domain")(conceptActions), saving });
+
+export default connect(mapStateToProps)(ConceptManageDomainPopup);

package/src/concepts/components/ConceptTaxonomy.js

@@ -6,6 +6,11 @@ import { List, Header, Segment } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { getConceptDomainPath } from "../selectors";
 import DomainItem from "../../taxonomy/components/DomainItem";
+import ConceptManageDomainPopup from "./ConceptManageDomainPopup";
+
+const DomainsConceptLoader = React.lazy(() =>
+  import("../../taxonomy/components/DomainsConceptLoader")
+);
 
 export const ConceptTaxonomy = ({ domainPath }) =>
   _.negate(_.isEmpty)(domainPath) && (
@@ -13,6 +18,9 @@ export const ConceptTaxonomy = ({ domainPath }) =>
       <Header as="h3" dividing>
         <FormattedMessage id="concepts.taxonomy" defaultMessage="Taxonomía" />
       </Header>
+      <DomainsConceptLoader actions="manage_business_concepts_domain" />
+      <ConceptManageDomainPopup conceptAction="concepts.actions.edit" />
+
       <List horizontal>
         {_.map.convert({ cap: false })((domain, i) => (
           <DomainItem
@@ -27,11 +35,11 @@ export const ConceptTaxonomy = ({ domainPath }) =>
   );
 
 ConceptTaxonomy.propTypes = {
-  domainPath: PropTypes.array
+  domainPath: PropTypes.array,
 };
 
-const mapStateToProps = state => ({
-  domainPath: getConceptDomainPath(state)
+const mapStateToProps = (state) => ({
+  domainPath: getConceptDomainPath(state),
 });
 
 export default connect(mapStateToProps)(ConceptTaxonomy);

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

@@ -0,0 +1,43 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { ConceptManageDomain } from "../ConceptManageDomain";
+
+describe("<ConceptManageDomain />", () => {
+  // const id = 5;
+  const domainOptions = [
+    { id: 1, name: "foo", level: 0 },
+    { id: 2, name: "bar", level: 0 },
+    { id: 3, name: "baz", level: 0 },
+  ];
+  const conceptAction = jest.fn();
+  // const saving = false;
+  const setToDomain = [{ id: 2, name: "bar" }];
+  const props = {
+    domainOptions,
+    // id,
+    conceptAction,
+    // saving,
+    setToDomain,
+  };
+  const renderOpts = {
+    messages: {
+      en: {
+        "concept.changeDomain.header": "edit domain",
+        "concept.changeDomain.label": "domain",
+        "conceptDomain.actions.update": "update",
+        "domain.selector.label": "domain",
+        "domain.selector.placeholder": "select a domain...",
+      },
+    },
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <ConceptManageDomain {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { mount } from "enzyme";
+import { intl } from "@truedat/test/intl-stub";
+import { ConceptManageDomainPopup } from "../ConceptManageDomainPopup";
+
+// workaround for enzyme issue with React.useContext
+// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
+jest.spyOn(React, "useContext").mockImplementation(() => intl);
+jest.mock("../ConceptManageDomain");
+
+describe("<ConceptManageDomainPopup />", () => {
+  const props = {
+    saving: false,
+    update_domain: true,
+  };
+
+  it("matches the latest snapshot", () => {
+    const wrapper = mount(<ConceptManageDomainPopup {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("manages open and close popup", () => {
+    const wrapper = mount(<ConceptManageDomainPopup {...props} />);
+    wrapper.setProps({ saving: true, update_domain: true });
+    expect(wrapper.find("Popup").prop("open")).toBeFalsy();
+    wrapper.find("Popup").find("Portal").find("Button").simulate("click");
+    expect(wrapper.find("Popup").prop("open")).toBeTruthy();
+    wrapper.find("Popup").find("Portal").find("Button").simulate("click");
+    expect(wrapper.find("Popup").prop("open")).toBeFalsy();
+    wrapper.find("Popup").find("Portal").find("Button").simulate("click");
+    expect(wrapper.find("Popup").prop("open")).toBeTruthy();
+    wrapper.setProps({ saving: false, update_domain: true });
+    wrapper.update();
+    expect(wrapper.find("Popup").prop("open")).toBeFalsy();
+  });
+});

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

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ConceptManageDomain /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui container"
+    style="width: 400px;"
+  >
+    <h2
+      class="ui header"
+    >
+      edit domain
+    </h2>
+    <form
+      class="ui form"
+    >
+      <div
+        class="required field"
+      >
+        <label>
+          domain
+        </label>
+        <div
+          class="field"
+        >
+          <div
+            aria-expanded="false"
+            class="ui fluid search selection dropdown"
+            name="domain"
+            role="combobox"
+          >
+            <input
+              aria-autocomplete="list"
+              autocomplete="off"
+              class="search"
+              tabindex="0"
+              type="text"
+              value=""
+            />
+            <div
+              aria-atomic="true"
+              aria-live="polite"
+              class="divider default text"
+              role="alert"
+            >
+              select a domain...
+            </div>
+            <i
+              aria-hidden="true"
+              class="dropdown icon"
+            />
+            <div
+              class="menu transition"
+              role="listbox"
+            >
+              <div
+                aria-checked="false"
+                aria-selected="true"
+                class="selected item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <div
+                  class="text"
+                  style="margin-left: 0px;"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="icon"
+                  />
+                  foo
+                </div>
+              </div>
+              <div
+                aria-checked="false"
+                aria-selected="false"
+                class="item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <div
+                  class="text"
+                  style="margin-left: 0px;"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="icon"
+                  />
+                  bar
+                </div>
+              </div>
+              <div
+                aria-checked="false"
+                aria-selected="false"
+                class="item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <div
+                  class="text"
+                  style="margin-left: 0px;"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="icon"
+                  />
+                  baz
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="actions"
+      >
+        <button
+          class="ui primary disabled button"
+          disabled=""
+          tabindex="-1"
+          type="submit"
+        >
+          update
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,171 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ConceptManageDomainPopup /> matches the latest snapshot 1`] = `
+<ConceptManageDomainPopup
+  saving={false}
+  update_domain={true}
+>
+  <Popup
+    basic={true}
+    content={<Memo(Connect(ConceptManageDomain)) />}
+    disabled={false}
+    eventsEnabled={true}
+    flowing={true}
+    on="click"
+    onClose={[Function]}
+    onOpen={[Function]}
+    open={false}
+    pinned={false}
+    popperModifiers={Array []}
+    position="bottom right"
+    positionFixed={true}
+    size="large"
+    trigger={
+      <Button
+        as="button"
+        basic={true}
+        icon={
+          <Icon
+            as="i"
+            name="pencil alternate"
+          />
+        }
+        style={
+          Object {
+            "boxShadow": "none",
+          }
+        }
+      />
+    }
+  >
+    <Portal
+      closeOnDocumentClick={true}
+      closeOnEscape={true}
+      closeOnTriggerClick={true}
+      eventPool="default"
+      onClose={[Function]}
+      onMount={[Function]}
+      onOpen={[Function]}
+      onUnmount={[Function]}
+      open={false}
+      openOnTriggerClick={true}
+      trigger={
+        <Button
+          as="button"
+          basic={true}
+          icon={
+            <Icon
+              as="i"
+              name="pencil alternate"
+            />
+          }
+          style={
+            Object {
+              "boxShadow": "none",
+            }
+          }
+        />
+      }
+      triggerRef={
+        Object {
+          "current": <button
+            class="ui basic icon button"
+            style="box-shadow: none;"
+          >
+            <i
+              aria-hidden="true"
+              class="pencil alternate icon"
+            />
+          </button>,
+        }
+      }
+    >
+      <Ref
+        innerRef={[Function]}
+      >
+        <RefFindNode
+          innerRef={[Function]}
+        >
+          <Button
+            as="button"
+            basic={true}
+            icon={
+              <Icon
+                as="i"
+                name="pencil alternate"
+              />
+            }
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            style={
+              Object {
+                "boxShadow": "none",
+              }
+            }
+          >
+            <Ref
+              innerRef={
+                Object {
+                  "current": <button
+                    class="ui basic icon button"
+                    style="box-shadow: none;"
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="pencil alternate icon"
+                    />
+                  </button>,
+                }
+              }
+            >
+              <RefFindNode
+                innerRef={
+                  Object {
+                    "current": <button
+                      class="ui basic icon button"
+                      style="box-shadow: none;"
+                    >
+                      <i
+                        aria-hidden="true"
+                        class="pencil alternate icon"
+                      />
+                    </button>,
+                  }
+                }
+              >
+                <button
+                  className="ui basic icon button"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  style={
+                    Object {
+                      "boxShadow": "none",
+                    }
+                  }
+                >
+                  <Icon
+                    as="i"
+                    name="pencil alternate"
+                  >
+                    <i
+                      aria-hidden="true"
+                      className="pencil alternate icon"
+                      onClick={[Function]}
+                    />
+                  </Icon>
+                </button>
+              </RefFindNode>
+            </Ref>
+          </Button>
+        </RefFindNode>
+      </Ref>
+    </Portal>
+  </Popup>
+</ConceptManageDomainPopup>
+`;

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

@@ -11,6 +11,12 @@ exports[`<ConceptTaxonomy /> matches the latest snapshot 1`] = `
       id="concepts.taxonomy"
     />
   </Header>
+  <lazy
+    actions="manage_business_concepts_domain"
+  />
+  <Connect(ConceptManageDomainPopup)
+    conceptAction="concepts.actions.edit"
+  />
   <List
     horizontal={true}
   >

package/src/concepts/reducers/index.js

@@ -28,6 +28,7 @@ import { conceptUserFilters } from "./conceptUserFilters";
 import { conceptSelectedUserFilter } from "./conceptSelectedUserFilter";
 import { sharedToDomains } from "./sharedToDomains";
 import { savingSharedTo } from "./savingSharedTo";
+import { updatingDomain } from "./updatingDomain";
 
 export {
   bulkUpdateLoading,
@@ -59,7 +60,8 @@ export {
   conceptUpdating,
   conceptUserFilters,
   sharedToDomains,
-  savingSharedTo
+  savingSharedTo,
+  updatingDomain,
 };
 
 export * from "../relations/reducers";