@truedat/bg 7.0.5 → 7.0.6

package/src/taxonomy/components/Domains.js

@@ -1,17 +1,40 @@
+import _ from "lodash/fp";
 import React from "react";
-import PropTypes from "prop-types";
 import { FormattedMessage, useIntl } from "react-intl";
-import { connect } from "react-redux";
-import { Route, Switch } from "react-router-dom";
-import { Header, Icon, Segment } from "semantic-ui-react";
-import { DOMAINS, DOMAINS_NEW } from "@truedat/core/routes";
-import { createDomain } from "../routines";
-import DomainCards from "./DomainCards";
-import DomainForm from "./DomainForm";
+import { Grid, Header, Icon, Image, Segment } from "semantic-ui-react";
+import HierarchyNodeFinder from "@truedat/core/components/HierarchyNodeFinder";
+import { linkTo } from "@truedat/core/routes";
+import { useHistory, useParams } from "react-router-dom";
+import searchImage from "assets/searching.png";
+import { useDomains } from "../../hooks/useDomains";
+import Domain from "./Domain";
+import DomainCrumbs from "./DomainCrumbs";
 import DomainsActions from "./DomainsActions";
 
-export const Domains = ({ domainsLoading, createDomain }) => {
+export const Domains = () => {
   const { formatMessage } = useIntl();
+  const history = useHistory();
+  const { data: domains, actions } = useDomains();
+  const { id: urlId } = useParams();
+  const domainId = !isNaN(parseInt(urlId)) ? parseInt(urlId) : undefined;
+  const domain = _.find((d) => d.id == domainId)(domains);
+  const EmptyImage = () => (
+    <div
+      style={{
+        textAlign: "center",
+        paddingBottom: "100px",
+      }}
+    >
+      <Image className="search" src={searchImage} />
+      <span className="system-domains-search__text">
+        <FormattedMessage id="domains.general.message" />
+      </span>
+    </div>
+  );
+
+  const onClick = (id) => {
+    history.push(linkTo.DOMAIN_CONCEPTS({ id }));
+  };
   return (
     <Segment>
       <Header as="h2">
@@ -29,26 +52,42 @@ export const Domains = ({ domainsLoading, createDomain }) => {
           </Header.Subheader>
         </Header.Content>
       </Header>
-      <Segment attached="bottom" loading={domainsLoading}>
-        <DomainsActions />
-        <Switch>
-          <Route path={DOMAINS} component={DomainCards} exact />
-          <Route
-            exact
-            path={DOMAINS_NEW}
-            render={() => <DomainForm onSubmit={createDomain} />}
-          />
-        </Switch>
+      <Segment attached="bottom">
+        <Grid>
+          <Grid.Row>
+            <Grid.Column width={16}>
+              {domain ? <DomainCrumbs domain={domain} /> : null}
+            </Grid.Column>
+          </Grid.Row>
+          <Grid.Row stretched>
+            <Grid.Column width={3}>
+              <HierarchyNodeFinder
+                nodes={domains}
+                onClick={onClick}
+                idSelectedNode={domainId}
+              />
+            </Grid.Column>
+            <Grid.Column width={13}>
+              {domainId ? (
+                <Domain domainId={domainId} />
+              ) : (
+                <Segment>
+                  <Grid.Row>
+                    <Grid.Column style={{ textAlign: "right" }}>
+                      <DomainsActions actions={actions} />
+                    </Grid.Column>
+                  </Grid.Row>
+                  <Grid.Row>
+                    <EmptyImage />
+                  </Grid.Row>
+                </Segment>
+              )}
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
       </Segment>
     </Segment>
   );
 };
 
-Domains.propTypes = {
-  domainsLoading: PropTypes.bool,
-  createDomain: PropTypes.func.isRequired,
-};
-
-const mapStateToProps = ({ domainsLoading }) => ({ domainsLoading });
-
-export default connect(mapStateToProps, { createDomain })(Domains);
+export default Domains;

package/src/taxonomy/components/DomainsActions.js

@@ -2,20 +2,18 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { Button } from "semantic-ui-react";
 import { DOMAINS_NEW } from "@truedat/core/routes";
-import DomainSearch from "./DomainSearch";
 
-export const DomainsActions = ({ createUrl }) => {
+export const DomainsActions = ({ actions }) => {
+  const createUrl = () =>
+    !_.isEmpty(actions) && _.has("create")(actions) ? DOMAINS_NEW : undefined;
   const { formatMessage } = useIntl();
   return (
     <>
-      <DomainSearch />
       {createUrl && (
         <Button
-          floated="right"
           primary
           content={formatMessage({ id: "domains.actions.create" })}
           icon="cube"
@@ -28,14 +26,7 @@ export const DomainsActions = ({ createUrl }) => {
 };
 
 DomainsActions.propTypes = {
-  createUrl: PropTypes.string
+  actions: PropTypes.object,
 };
 
-const mapStateToProps = ({ domainsActions }) => ({
-  createUrl:
-    !_.isEmpty(domainsActions) && _.has("create")(domainsActions)
-      ? DOMAINS_NEW
-      : undefined
-});
-
-export default connect(mapStateToProps)(DomainsActions);
+export default DomainsActions;

package/src/taxonomy/components/EditDomain.js

@@ -1,34 +1,48 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
 import { Container, Header, Icon, Segment } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
-import { updateDomain } from "../routines";
+import { useHistory } from "react-router-dom";
+import { linkTo } from "@truedat/core/routes";
+
+import { useQuery } from "@apollo/client";
+import { DOMAINS_QUERY } from "@truedat/core/api/queries";
+
+import { useDomainUpdate } from "../../hooks/useDomains";
 import DomainForm from "./DomainForm";
-import DomainCrumbs from "./DomainCrumbs";
 
-export const EditDomain = ({ domain, updateDomain }) =>
-  _.isEmpty(domain) ? null : (
-    <>
-      <DomainCrumbs actionCrumb="domain.actions.edit.header" />
-      <Container as={Segment} text>
-        <Header as="h2">
-          <Icon name="cube" />
-          <Header.Content>
-            <FormattedMessage id="domain.actions.edit.header" />
-          </Header.Content>
-        </Header>
-        <DomainForm onSubmit={updateDomain} domain={domain} />
-      </Container>
-    </>
+export const EditDomain = ({ domain }) => {
+  const { trigger: updateDomain } = useDomainUpdate(domain.id);
+  const history = useHistory();
+  const { client } = useQuery(DOMAINS_QUERY, {
+    variables: { action: "viewDomain", fetchPolicy: "no-cache" },
+  });
+
+  const handleUpdateDomain = async (data) => {
+    await updateDomain({ domain: data });
+    const response = await updateDomain({ domain: data });
+    if (response?.data?.data) {
+      history.push(linkTo.DOMAIN_CONCEPTS({ id: response?.data?.data?.id }));
+      client.resetStore();
+    }
+  };
+
+  return _.isEmpty(domain) ? null : (
+    <Container as={Segment} text>
+      <Header as="h2">
+        <Icon name="cube" />
+        <Header.Content>
+          <FormattedMessage id="domain.actions.edit.header" />
+        </Header.Content>
+      </Header>
+      <DomainForm onSubmit={handleUpdateDomain} domain={domain} />
+    </Container>
   );
+};
 
 EditDomain.propTypes = {
   domain: PropTypes.object,
-  updateDomain: PropTypes.func.isRequired,
 };
 
-const mapStateToProps = ({ domain }) => ({ domain });
-
-export default connect(mapStateToProps, { updateDomain })(EditDomain);
+export default EditDomain;

package/src/taxonomy/components/NewDomain.js

@@ -1,33 +1,58 @@
-import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
+
 import { Container, Header, Icon, Segment } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
-import { createDomain } from "../routines";
+import { linkTo } from "@truedat/core/routes";
+import { useHistory } from "react-router-dom";
+
+import { useQuery } from "@apollo/client";
+import { DOMAINS_QUERY } from "@truedat/core/api/queries";
+
+import { useDomainCreate } from "../../hooks/useDomains";
 import DomainCrumbs from "./DomainCrumbs";
 import DomainForm from "./DomainForm";
 
-export const NewDomain = ({ domain, createDomain }) => (
-  <>
-    <DomainCrumbs actionCrumb="domains.actions.create" />
-    <Container as={Segment} text>
-      <Header as="h2">
-        <Icon name="cube" />
-        <Header.Content>
-          <FormattedMessage id="domain.actions.create" />
-        </Header.Content>
-      </Header>
-      <DomainForm onSubmit={createDomain} domain={{ parent_id: domain.id }} />
-    </Container>
-  </>
-);
+export const NewDomain = ({ domain }) => {
+  const { trigger: createDomain } = useDomainCreate();
+  const history = useHistory();
+  const { client } = useQuery(DOMAINS_QUERY, {
+    variables: { action: "viewDomain", fetchPolicy: "no-cache" },
+  });
 
-NewDomain.propTypes = {
-  domain: PropTypes.object.isRequired,
-  createDomain: PropTypes.func.isRequired,
+  const handleCreateDomain = async (data) => {
+    const response = await createDomain({ domain: data });
+    if (response?.data?.data) {
+      history.push(linkTo.DOMAIN_CONCEPTS({ id: response?.data?.data?.id }));
+    }
+    client.resetStore();
+  };
+
+  return (
+    <>
+      {!domain ? (
+        <DomainCrumbs domain={domain} actionCrumb="domains.actions.create" />
+      ) : null}
+      <Container as={Segment} text>
+        <Header as="h2">
+          <Icon name="cube" />
+          <Header.Content>
+            <FormattedMessage
+              id={!domain ? "domains.actions.create" : "domain.actions.create"}
+            />
+          </Header.Content>
+        </Header>
+        <DomainForm
+          onSubmit={handleCreateDomain}
+          domain={domain?.id ? { parent_id: domain?.id } : {}}
+        />
+      </Container>
+    </>
+  );
 };
 
-const mapStateToProps = ({ domain }) => ({ domain });
+NewDomain.propTypes = {
+  domain: PropTypes.object,
+};
 
-export default connect(mapStateToProps, { createDomain })(NewDomain);
+export default NewDomain;

package/src/taxonomy/components/__tests__/Domain.spec.js

@@ -4,19 +4,28 @@ import Domain from "../Domain";
 
 jest.mock("@truedat/core/hooks", () => ({
   useAuthorized: jest.fn(() => true),
-  usePath: jest.fn(() => "/domains/:id"),
 }));
 
-describe("<Domain />", () => {
-  const renderOpts = {
-    state: {
-      domainLoading: false,
-      domain: { id: 3, name: "DOMAIN NAME" },
+jest.mock("../../../hooks/useDomains", () => ({
+  ...jest.requireActual("../../../hooks/useDomains"),
+  useDomain: jest.fn((domainId) => ({
+    data: {
+      description: "DOMAIN DESCRIPTION",
+      domain_group: null,
+      external_id: "EXTERNAL ID",
+      id: domainId,
+      name: "DOMAIN NAME",
+      parent_id: 6,
+      parents: null,
+      type: null,
     },
-  };
+  })),
+}));
 
+describe("<Domain />", () => {
+  const domainId = 3;
   it("matches the latest snapshot", () => {
-    const { container } = render(<Domain />, renderOpts);
+    const { container } = render(<Domain domainId={domainId} />);
     expect(container).toMatchSnapshot();
   });
 });

package/src/taxonomy/components/__tests__/DomainActions.spec.js

@@ -1,16 +1,71 @@
+import _ from "lodash/fp";
 import React from "react";
 import { render } from "@truedat/test/render";
-import { DomainActions } from "../DomainActions";
+import DomainActions from "../DomainActions";
+
+const domain = { id: 3, name: "domain" };
+
+const domainAllActions = {
+  delete: { href: "/api/domains/3", method: "DELETE" },
+  create: { href: "/api/domains", method: "POST" },
+  update: { href: "/api/domains/3", method: "PATCH" },
+};
+
+const availableActions = {
+  create: {
+    id: domain.id,
+    order: 1,
+    icon: "cube",
+    messageId: "domain.actions.create",
+    action: jest.fn((id) => `/domains/${id}/edit`),
+  },
+  update: {
+    id: domain.id,
+    order: 2,
+    icon: "edit",
+    messageId: "actions.edit",
+    action: jest.fn((id) => `/domains/${id}/new`),
+  },
+  deleteOption: true,
+};
+
+const renderOpts = {
+  messages: {
+    en: {
+      "domain.actions.delete": "DeleteDomain",
+      "domain.actions.delete.question": "WantToDelete?",
+      "actions.delete": "ActionDelete",
+      "domain.actions.create": "CreateDomain",
+      "actions.edit": "EditDomain",
+    },
+  },
+};
 
 describe("<DomainActions />", () => {
-  const _delete = jest.fn();
-  const create = jest.fn();
-  const domain = { id: 3, name: "domain" };
-  const domainActions = { delete: _delete, create };
-  const props = { domain, domainActions };
+  const props = {
+    availableActions,
+    domain,
+    domainAllActions,
+    onDeleteDomain: jest.fn(),
+  };
 
   it("matches the latest snapshot", () => {
-    const { container } = render(<DomainActions {...props} />);
+    const { container } = render(<DomainActions {...props} />, renderOpts);
     expect(container).toMatchSnapshot();
   });
+
+  it("When it does not have the delete action", () => {
+    const newAvailableActions = _.omit("deleteOption")(availableActions);
+    const newProps = { ...props, availableActions: newAvailableActions };
+    const { queryByText } = render(<DomainActions {...newProps} />, renderOpts);
+
+    expect(queryByText(/ActionDelete/i)).not.toBeInTheDocument();
+  });
+
+  it("When it does not have domain actions", () => {
+    const newProps = { ...props, domainAllActions: {} };
+    const { queryByText } = render(<DomainActions {...newProps} />, renderOpts);
+
+    expect(queryByText(/ActionDelete/i)).not.toBeInTheDocument();
+  });
 });

package/src/taxonomy/components/__tests__/DomainCrumbs.spec.js

@@ -1,14 +1,27 @@
 import React from "react";
 import { render } from "@truedat/test/render";
+import { useDomains } from "../../../hooks/useDomains";
 import { DomainCrumbs } from "../DomainCrumbs";
 
+jest.mock("../../../hooks/useDomains", () => ({
+  ...jest.requireActual("../../../hooks/useDomains"),
+  useDomains: jest.fn(),
+}));
+
 describe("<DomainCrumbs />", () => {
-  const parents = [
-    { id: 1, name: "p1" },
-    { id: 2, text: "p2" },
-  ];
   const domain = { id: 3, name: "domain" };
-  const props = { parents, domain };
+  const props = { domain, actionCrumb: "domain" };
+
+  beforeEach(() => {
+    require("../../../hooks/useDomains").useDomains.mockReturnValue({
+      data: [
+        { id: 1, name: "foo", parent_id: null },
+        { id: 2, name: "bar", parent_id: 1 },
+        { id: 3, name: "baz", parent_id: 2 },
+        { id: 4, name: "qux", parent_id: null },
+      ],
+    });
+  });
 
   it("matches the latest snapshot", () => {
     const { container } = render(<DomainCrumbs {...props} />);

package/src/taxonomy/components/__tests__/DomainDetail.spec.js

@@ -1,12 +1,95 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { DomainDetail } from "../DomainDetail";
 
+jest.mock("@apollo/client", () => ({
+  ...jest.requireActual("@apollo/client"),
+  useQuery: jest.fn(),
+}));
+
+jest.mock("../../../hooks/useDomains", () => ({
+  ...jest.requireActual("../../../hooks/useDomains"),
+  useDomainDelete: jest.fn(),
+  useDomain: jest.fn(),
+}));
+
 describe("<DomainDetail />", () => {
-  const props = { id: 1, type: "type", name: "name", description: "desc" };
+  const id = 7;
+  const props = { id };
+
+  beforeEach(() => {
+    require("../../../hooks/useDomains").useDomain.mockReturnValue({
+      data: {
+        description: "el padre es element_6",
+        domain_group: null,
+        external_id: "7",
+        id: 7,
+        name: "element_7",
+        parent_id: 6,
+        parents: null,
+        type: null,
+      },
+      actions: {
+        create: {
+          href: "/api/domains",
+          input: {},
+          method: "POST",
+        },
+        update: {
+          href: "/api/domains/:id",
+          input: {},
+          method: "PATCH",
+        },
+        index: {
+          href: "/api/domains",
+          input: {},
+          method: "GET",
+        },
+      },
+      loading: false,
+    });
+
+    require("../../../hooks/useDomains").useDomainDelete.mockReturnValue({
+      trigger: jest.fn(),
+    });
+
+    require("@apollo/client").useQuery.mockReturnValue({
+      loading: false,
+      error: null,
+      data: {
+        domains: [
+          {
+            __typename: "Domain",
+            id: "5",
+            external_id: "element_5",
+            name: "element_5",
+            parentId: null,
+            actions: [],
+          },
+          {
+            __typename: "Domain",
+            id: "6",
+            external_id: "element_6",
+            name: "element_6",
+            parentId: "5",
+            actions: [],
+          },
+          {
+            __typename: "Domain",
+            id: "7",
+            external_id: "element_7",
+            name: "element_7",
+            parentId: "6",
+            actions: [],
+          },
+        ],
+      },
+    });
+  });
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<DomainDetail {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<DomainDetail {...props} />);
+
+    expect(container).toMatchSnapshot();
   });
 });