@truedat/bg 7.2.0 → 7.2.2

package/src/taxonomy/components/Domains.js

@@ -1,7 +1,18 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
 import { FormattedMessage, useIntl } from "react-intl";
-import { Grid, Header, Icon, Image, Segment } from "semantic-ui-react";
+import {
+  Button,
+  ButtonGroup,
+  Grid,
+  Header,
+  Icon,
+  Image,
+  Segment,
+} from "semantic-ui-react";
+import { Loading } from "@truedat/core/components";
 import HierarchyNodeFinder from "@truedat/core/components/HierarchyNodeFinder";
 import { linkTo } from "@truedat/core/routes";
 import { useHistory, useParams } from "react-router-dom";
@@ -9,15 +20,27 @@ import searchImage from "assets/searching.png";
 import { useDomains } from "../../hooks/useDomains";
 import Domain from "./Domain";
 import DomainCrumbs from "./DomainCrumbs";
-import DomainsActions from "./DomainsActions";
+import DomainCards from "./DomainCards";
 
-export const Domains = () => {
+export const Domains = ({ taxonomyConfig }) => {
+  const { minDomainsListWidth, maxDomainsListWidth, defaultDomainsListWidth } =
+    taxonomyConfig;
+  const [gridControl, setGridControl] = useState({
+    list: defaultDomainsListWidth,
+    content: 16 - defaultDomainsListWidth,
+    animated: defaultDomainsListWidth > 0,
+  });
   const { formatMessage } = useIntl();
   const history = useHistory();
-  const { data: domains, actions } = useDomains();
+  const { data: domains, actions, loading } = useDomains();
   const { id: urlId } = useParams();
   const domainId = !isNaN(parseInt(urlId)) ? parseInt(urlId) : undefined;
   const domain = _.find((d) => d.id == domainId)(domains);
+
+  if (!loading && domainId && !domain) {
+    history.push(linkTo.DOMAINS());
+  }
+
   const EmptyImage = () => (
     <div
       style={{
@@ -32,9 +55,30 @@ export const Domains = () => {
     </div>
   );
 
-  const onClick = (id) => {
-    history.push(linkTo.DOMAIN_CONCEPTS({ id }));
+  const handleHide = () => {
+    setGridControl({
+      list: 0,
+      content: 16,
+      animated: false,
+    });
+  };
+  const handleMinimize = () => {
+    const shouldAnimate = gridControl.list > 0;
+    setGridControl({
+      list: minDomainsListWidth,
+      content: 16 - minDomainsListWidth,
+      animated: shouldAnimate,
+    });
+  };
+  const handleMaximize = () => {
+    const shouldAnimate = gridControl.list > 0;
+    setGridControl({
+      list: maxDomainsListWidth,
+      content: 16 - maxDomainsListWidth,
+      animated: shouldAnimate,
+    });
   };
+
   return (
     <Segment>
       <Header as="h2">
@@ -55,30 +99,87 @@ export const Domains = () => {
       <Segment attached="bottom">
         <Grid>
           <Grid.Row>
-            <Grid.Column width={16}>
+            <Grid.Column
+              width={16}
+              verticalAlign="bottom"
+              className="taxonomy-domains-breadcrumb"
+            >
+              <ButtonGroup icon className="taxonomy-domains-breadcrumb-control">
+                <Button
+                  icon="eye slash"
+                  basic={gridControl.content < 16}
+                  onClick={handleHide}
+                  data-tooltip={formatMessage({ id: "domains.list.hide" })}
+                  data-position="top left"
+                />
+                <Button
+                  icon="compress"
+                  basic={
+                    gridControl.content >= 16 ||
+                    gridControl.list > minDomainsListWidth
+                  }
+                  onClick={handleMinimize}
+                  data-tooltip={formatMessage({ id: "domains.list.minimize" })}
+                  data-position="top left"
+                />
+                <Button
+                  icon="expand"
+                  basic={
+                    gridControl.content >= 16 ||
+                    gridControl.list <= minDomainsListWidth
+                  }
+                  onClick={handleMaximize}
+                  data-tooltip={formatMessage({ id: "domains.list.maximize" })}
+                  data-position="top left"
+                />
+              </ButtonGroup>
               {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}>
+          <Grid.Row stretched className="taxonomy-domains-content">
+            {gridControl.list > 0 ? (
+              <Grid.Column
+                width={gridControl.list}
+                className={`${
+                  gridControl.animated
+                    ? "taxonomy-domains-grid-animation"
+                    : null
+                } `}
+              >
+                {loading ? (
+                  <Loading />
+                ) : (
+                  <HierarchyNodeFinder
+                    nodes={domains}
+                    idSelectedNode={domainId}
+                  />
+                )}
+              </Grid.Column>
+            ) : null}
+            <Grid.Column
+              width={gridControl.list > 0 ? gridControl.content : 16}
+              className={`${
+                gridControl.animated ? "taxonomy-domains-grid-animation" : null
+              } `}
+            >
               {domainId ? (
-                <Domain domainId={domainId} />
+                <Domain
+                  domainId={domainId}
+                  domains={domains}
+                  taxonomyConfig={taxonomyConfig}
+                />
               ) : (
                 <Segment>
                   <Grid.Row>
-                    <Grid.Column style={{ textAlign: "right" }}>
-                      <DomainsActions actions={actions} />
-                    </Grid.Column>
-                  </Grid.Row>
-                  <Grid.Row>
-                    <EmptyImage />
+                    {domains && _.size(domains) > 0 ? (
+                      <DomainCards
+                        domain={domain}
+                        domains={domains}
+                        actions={actions}
+                      />
+                    ) : (
+                      <EmptyImage />
+                    )}
                   </Grid.Row>
                 </Segment>
               )}
@@ -90,4 +191,22 @@ export const Domains = () => {
   );
 };
 
-export default Domains;
+Domains.propTypes = {
+  taxonomyConfig: PropTypes.object,
+};
+
+const mapStateToProps = ({ taxonomyConfig: stateTaxonomyConfig }) => {
+  const taxonomyConfig = _.merge({
+    priorityTabs: [],
+    hiddenTabs: [],
+    minDomainsListWidth: 3,
+    maxDomainsListWidth: 6,
+    defaultDomainsListWidth: 3,
+  })(stateTaxonomyConfig);
+
+  return {
+    taxonomyConfig,
+  };
+};
+
+export default connect(mapStateToProps)(Domains);

package/src/taxonomy/components/DomainsActions.js

@@ -7,12 +7,12 @@ import { Button } from "semantic-ui-react";
 import { DOMAINS_NEW } from "@truedat/core/routes";
 
 export const DomainsActions = ({ actions }) => {
-  const createUrl = () =>
-    !_.isEmpty(actions) && _.has("create")(actions) ? DOMAINS_NEW : undefined;
+  const canCreate = !_.isEmpty(actions) && _.has("create")(actions);
+  const createUrl = () => DOMAINS_NEW;
   const { formatMessage } = useIntl();
   return (
     <>
-      {createUrl && (
+      {canCreate ? (
         <Button
           primary
           content={formatMessage({ id: "domains.actions.create" })}
@@ -20,7 +20,7 @@ export const DomainsActions = ({ actions }) => {
           as={Link}
           to={createUrl}
         />
-      )}
+      ) : null}
     </>
   );
 };

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

@@ -1,5 +1,10 @@
 import React from "react";
 import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import { DOMAIN_NEW, DOMAIN_EDIT } from "@truedat/core/routes";
+import { MemoryRouter } from "react-router-dom/cjs/react-router-dom.min";
+import { DOMAINS_QUERY } from "@truedat/core/api/queries";
+import { useDomain } from "../../../hooks/useDomains";
 import Domain from "../Domain";
 
 jest.mock("@truedat/core/hooks", () => ({
@@ -22,10 +27,130 @@ jest.mock("../../../hooks/useDomains", () => ({
   })),
 }));
 
+const domains = [
+  {
+    id: "3",
+    name: "DOMAIN NAME",
+    parentId: "6",
+    actions: [],
+    externalId: "EXTERNAL ID",
+  },
+];
+
+const variables = {
+  action: "viewDomain",
+  fetchPolicy: "no-cache",
+};
+
+const domainsMock = {
+  request: { query: DOMAINS_QUERY, variables },
+  result: { data: { domains: domains } },
+};
+
+const renderOpts = {
+  mocks: [domainsMock],
+  fallback: "lazy",
+};
+
 describe("<Domain />", () => {
   const domainId = 3;
-  it("matches the latest snapshot", () => {
-    const { container } = render(<Domain domainId={domainId} />);
+  const taxonomyConfig = {
+    priorityTabs: [],
+    hiddenTabs: [],
+  };
+
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(
+      <Domain domainId={domainId} taxonomyConfig={taxonomyConfig} />,
+      renderOpts
+    );
+
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders DomainDetail component", async () => {
+    const { getByText, queryByText } = render(
+      <Domain domainId={domainId} taxonomyConfig={taxonomyConfig} />,
+      renderOpts
+    );
+
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    expect(getByText("DOMAIN NAME")).toBeInTheDocument();
+  });
+
+  it("renders DomainTabs component", async () => {
+    const { getByText, queryByText } = render(
+      <Domain domainId={domainId} taxonomyConfig={taxonomyConfig} />,
+      renderOpts
+    );
+
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+
+    expect(getByText("DOMAIN DESCRIPTION")).toBeInTheDocument();
+  });
+
+  it("renders DomainContent component", async () => {
+    const { getByText, queryByText } = render(
+      <Domain domainId={domainId} taxonomyConfig={taxonomyConfig} />,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+
+    expect(getByText("DOMAIN DESCRIPTION")).toBeInTheDocument();
+  });
+
+  it("renders Edit Domain component when path is DOMAIN_EDIT", async () => {
+    const { getByText, queryByText } = render(
+      <MemoryRouter initialEntries={[DOMAIN_EDIT]}>
+        <Domain domainId={domainId} taxonomyConfig={taxonomyConfig} />
+      </MemoryRouter>,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+
+    expect(getByText("Edit Domain")).toBeInTheDocument();
+  });
+
+  it("renders New Subdomain component when path is DOMAIN_NEW", async () => {
+    const { getByText, queryByText } = render(
+      <MemoryRouter initialEntries={[DOMAIN_NEW]}>
+        <Domain taxonomyConfig={taxonomyConfig} />
+      </MemoryRouter>,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+
+    expect(getByText("New Subdomain")).toBeInTheDocument();
+  });
+
+  it("renders null when no has any domain", async () => {
+    useDomain.mockImplementationOnce(() => ({
+      data: undefined,
+    }));
+
+    const { container } = render(
+      <Domain domainId={domainId} taxonomyConfig={taxonomyConfig} />,
+      renderOpts
+    );
     expect(container).toMatchSnapshot();
   });
 });

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

@@ -0,0 +1,148 @@
+import _ from "lodash/fp";
+import React from "react";
+import { render } from "@truedat/test/render";
+import { fireEvent } from "@testing-library/react";
+import { DomainCards } from "../DomainCards";
+
+describe("<DomainCards />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        "domain.children.empty": "No subdomains found",
+        "domain.props.children": "Subdomains: {count}",
+        "domains.actions.create": "New Domain",
+        "domains.search.placeholder": "Search domains...",
+        "domains.search.results.count": "Results: {count}",
+        domain: "Domain",
+      },
+    },
+  };
+  const domains = [
+    {
+      id: 1,
+      name: "rootNoSub",
+      type: null,
+      description: "Root domain with no subdomains",
+      parents: [
+        {
+          id: 1,
+          name: "rootNoSub",
+          external_id: "rootNoSub",
+        },
+      ],
+      domain_group: {
+        id: 1,
+        name: "DomainGroup",
+      },
+      parent_id: null,
+      external_id: "rootNoSub",
+    },
+    {
+      id: 2,
+      name: "rootWithSub",
+      type: null,
+      description: null,
+      parents: [
+        {
+          id: 2,
+          name: "rootWithSub",
+          external_id: "rootWithSub",
+        },
+      ],
+      domain_group: {
+        id: 1,
+        name: "DomainGroup",
+      },
+      parent_id: null,
+      external_id: "rootWithSub",
+    },
+    {
+      id: 3,
+      name: "rootOtherGroup",
+      type: null,
+      description: null,
+      parents: [
+        {
+          id: 3,
+          name: "rootOtherGroup",
+          external_id: "rootOtherGroup",
+        },
+      ],
+      domain_group: {
+        id: 2,
+        name: "OtherDomainGroup",
+      },
+      parent_id: null,
+      external_id: "rootOtherGroup",
+    },
+    {
+      id: 4,
+      name: "subdomain",
+      type: null,
+      description: null,
+      parents: [
+        {
+          id: 3,
+          name: "subdomain",
+          external_id: "subdomain",
+        },
+        {
+          id: 2,
+          name: "rootWithSub",
+          external_id: "rootWithSub",
+        },
+      ],
+      domain_group: {
+        id: 1,
+        name: "DomainGroup",
+      },
+      parent_id: 2,
+      external_id: "subdomain",
+    },
+  ];
+  it("matches the latest snapshot front page", () => {
+    const props = { domains };
+    const { container } = render(<DomainCards {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot domain without subdomain", () => {
+    const domain = _.find(["id", 1])(domains);
+    const props = { domains, domain };
+    const { container } = render(<DomainCards {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot domain with subdomain", () => {
+    const domain = _.find(["id", 2])(domains);
+    const props = { domains, domain };
+    const { container } = render(<DomainCards {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("filters domains based on search input", () => {
+    const props = { domains };
+    const { getByPlaceholderText, getByText } = render(
+      <DomainCards {...props} />,
+      renderOpts
+    );
+
+    const searchInput = getByPlaceholderText("Search domains...");
+    fireEvent.change(searchInput, { target: { value: "other" } });
+
+    expect(getByText("rootOtherGroup")).toBeInTheDocument();
+  });
+
+  it("displays 'No subdomains found' message when no subdomains are present", () => {
+    const domain = _.find(["id", 1])(domains);
+    const props = { domains, domain };
+    const { getByText } = render(<DomainCards {...props} />, renderOpts);
+    expect(getByText("No subdomains found")).toBeInTheDocument();
+  });
+
+  it("renders DomainsActions component when no domain is selected", () => {
+    const props = { domains, actions: { create: { href: "" } } };
+    const { getByText } = render(<DomainCards {...props} />, renderOpts);
+    expect(getByText("New Domain")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,168 @@
+import _ from "lodash/fp";
+import React from "react";
+import { render } from "@truedat/test/render";
+import { MemoryRouter } from "react-router-dom";
+import DomainContent from "../DomainContent";
+
+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("<DomainContent />", () => {
+  const domains = [
+    {
+      id: 1,
+      name: "rootNoSub",
+      type: null,
+      description: "Root domain with no subdomains",
+      parents: [
+        {
+          id: 1,
+          name: "rootNoSub",
+          external_id: "rootNoSub",
+        },
+      ],
+      domain_group: {
+        id: 1,
+        name: "DomainGroup",
+      },
+      parent_id: null,
+      external_id: "rootNoSub",
+    },
+    {
+      id: 2,
+      name: "rootWithSub",
+      type: null,
+      description: null,
+      parents: [
+        {
+          id: 2,
+          name: "rootWithSub",
+          external_id: "rootWithSub",
+        },
+      ],
+      domain_group: {
+        id: 1,
+        name: "DomainGroup",
+      },
+      parent_id: null,
+      external_id: "rootWithSub",
+    },
+    {
+      id: 3,
+      name: "rootOtherGroup",
+      type: null,
+      description: null,
+      parents: [
+        {
+          id: 3,
+          name: "rootOtherGroup",
+          external_id: "rootOtherGroup",
+        },
+      ],
+      domain_group: {
+        id: 2,
+        name: "OtherDomainGroup",
+      },
+      parent_id: null,
+      external_id: "rootOtherGroup",
+    },
+    {
+      id: 4,
+      name: "childSubdomain",
+      type: null,
+      description: null,
+      parents: [
+        {
+          id: 3,
+          name: "childSubdomain",
+          external_id: "subdomain",
+        },
+        {
+          id: 2,
+          name: "rootWithSub",
+          external_id: "rootWithSub",
+        },
+      ],
+      domain_group: {
+        id: 1,
+        name: "DomainGroup",
+      },
+      parent_id: 2,
+      external_id: "subdomain",
+    },
+  ];
+
+  const taxonomyConfig = {
+    priorityTabs: [],
+    hiddenTabs: [],
+  };
+
+  const testList = [
+    {
+      content: "subdomains",
+      domainId: 1,
+      textToSearch: "This domain has no subdomains",
+    },
+    {
+      content: "subdomains",
+      domainId: 2,
+      textToSearch: "childSubdomain",
+    },
+    {
+      content: "concepts",
+      domainId: 1,
+      textToSearch: "Searching...",
+    },
+    {
+      content: "structures",
+      domainId: 1,
+      textToSearch: "You are not authorized to view this content",
+    },
+    {
+      content: "implementations",
+      domainId: 1,
+      textToSearch: "You are not authorized to view this content",
+    },
+    {
+      content: "members",
+      domainId: 1,
+      textToSearch: "This domain has no members",
+    },
+  ];
+  const renderOpts = {
+    mocks: [],
+    fallback: "lazy",
+  };
+
+  test.each(testList)(
+    "Render %s content for %s domain with text %s",
+    ({ content, domainId, textToSearch }) => {
+      const domain = _.find(["id", domainId])(domains);
+      const { container, getByText } = render(
+        <MemoryRouter initialEntries={[`/domains/${domainId}/${content}`]}>
+          <DomainContent
+            domain={domain}
+            domains={domains}
+            taxonomyConfig={taxonomyConfig}
+          />
+        </MemoryRouter>,
+        renderOpts
+      );
+      expect(container).toMatchSnapshot();
+      expect(getByText(textToSearch)).toBeInTheDocument();
+    }
+  );
+});