@truedat/bg 7.2.1 → 7.2.3

package/src/taxonomy/components/DomainContent.js

@@ -0,0 +1,119 @@
+import _ from "lodash/fp";
+import React from "react";
+import { Unauthorized } from "@truedat/core/components";
+import { useAuthorized } from "@truedat/core/hooks";
+import UserSearchFiltersLoader from "@truedat/dd/components/UserSearchFiltersLoader";
+import PropTypes from "prop-types";
+import { Route, Switch } from "react-router-dom/cjs/react-router-dom.min";
+import {
+  DOMAIN,
+  DOMAIN_CONCEPTS,
+  DOMAIN_IMPLEMENTATIONS,
+  DOMAIN_MEMBERS,
+  DOMAIN_MEMBERS_NEW,
+  DOMAIN_STRUCTURES,
+  DOMAIN_SUBDOMAINS,
+} from "@truedat/core/routes";
+import DomainConcepts from "../../concepts/components/DomainConcepts";
+import DomainCards from "./DomainCards";
+import DomainStructures from "./DomainStructures";
+import DomainImplementations from "./DomainImplementations";
+import DomainMembers from "./DomainMembers";
+import AddDomainMember from "./AddDomainMember";
+
+const RolesLoader = React.lazy(() =>
+  import("@truedat/auth/roles/components/RolesLoader")
+);
+
+const DomainContent = ({
+  domain,
+  domains,
+  taxonomyConfig: { priorityTabs, hiddenTabs },
+}) => {
+  const ddAuthorized = useAuthorized("data_dictionary");
+  const dqAuthorized = useAuthorized("quality");
+
+  const routes = [
+    {
+      key: "subdomains",
+      path: DOMAIN_SUBDOMAINS,
+      component: <DomainCards domain={domain} domains={domains} />,
+    },
+    {
+      key: "concepts",
+      path: DOMAIN_CONCEPTS,
+      component: <DomainConcepts domain={domain} />,
+    },
+    {
+      key: "structures",
+      path: DOMAIN_STRUCTURES,
+      component: ddAuthorized ? (
+        <DomainStructures domain={domain} />
+      ) : (
+        <Unauthorized />
+      ),
+    },
+    {
+      key: "implementations",
+      path: DOMAIN_IMPLEMENTATIONS,
+      component: dqAuthorized ? (
+        <>
+          <UserSearchFiltersLoader scope="rule_implementation" />
+          <DomainImplementations domain={domain} />
+        </>
+      ) : (
+        <Unauthorized />
+      ),
+    },
+    {
+      key: "members",
+      path: DOMAIN_MEMBERS,
+      component: <DomainMembers domainId={domain.id} />,
+    },
+    {
+      key: "members-new",
+      path: DOMAIN_MEMBERS_NEW,
+      component: (
+        <>
+          <RolesLoader />
+          <AddDomainMember id={parseInt(domain.id)} />
+        </>
+      ),
+    },
+  ];
+
+  const getPaths = ({ key, path }) =>
+    _.cond([
+      [
+        (key) => !_.head(priorityTabs) && key === _.head(routes).key,
+        () => [path, DOMAIN],
+      ],
+      [(key) => key === _.head(priorityTabs), () => [path, DOMAIN]],
+      [_.stubTrue, () => path],
+    ])(key);
+
+  return (
+    <Switch>
+      {_.map((route) =>
+        _.includes(route.key, hiddenTabs) && false ? (
+          <Unauthorized key={route.key} />
+        ) : (
+          <Route
+            exact
+            key={route.key}
+            path={getPaths(route)}
+            render={() => route.component}
+          />
+        )
+      )(routes)}
+    </Switch>
+  );
+};
+
+DomainContent.propTypes = {
+  domain: PropTypes.object,
+  domains: PropTypes.array,
+  taxonomyConfig: PropTypes.object,
+};
+
+export default DomainContent;

package/src/taxonomy/components/DomainTabs.js

@@ -1,3 +1,4 @@
+import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
@@ -6,67 +7,118 @@ import { Menu } from "semantic-ui-react";
 import { compile } from "path-to-regexp";
 import { useAuthorized } from "@truedat/core/hooks";
 import {
+  DOMAIN,
   DOMAIN_CONCEPTS,
   DOMAIN_IMPLEMENTATIONS,
   DOMAIN_MEMBERS,
   DOMAIN_MEMBERS_NEW,
   DOMAIN_STRUCTURES,
+  DOMAIN_SUBDOMAINS,
   linkTo,
 } from "@truedat/core/routes";
 
-const DomainTabs = ({ domain }) => {
+const DomainTabs = ({
+  domain,
+  taxonomyConfig: { priorityTabs, hiddenTabs },
+}) => {
   const { pathname: path } = useLocation();
   const ddAuthorized = useAuthorized("data_dictionary");
   const dqAuthorized = useAuthorized("quality");
   const id = domain.id;
 
+  const getPriority = (key) =>
+    _.includes(key, priorityTabs)
+      ? _.indexOf(key, priorityTabs)
+      : priorityTabs.length;
+
+  const tabs = [
+    {
+      key: "subdomains",
+      priority: getPriority("subdomains"),
+      url: DOMAIN_SUBDOMAINS,
+      to: linkTo.DOMAIN_SUBDOMAINS({ id }),
+      label: "tabs.subdomains",
+    },
+    {
+      key: "concepts",
+      priority: getPriority("concepts"),
+      url: DOMAIN_CONCEPTS,
+      to: linkTo.DOMAIN_CONCEPTS({ id }),
+      label: "tabs.concepts",
+    },
+    {
+      key: "structures",
+      priority: getPriority("structures"),
+      url: DOMAIN_STRUCTURES,
+      to: linkTo.DOMAIN_STRUCTURES({ id }),
+      label: "tabs.structures",
+    },
+    {
+      key: "implementations",
+      priority: getPriority("implementations"),
+      url: DOMAIN_IMPLEMENTATIONS,
+      to: linkTo.DOMAIN_IMPLEMENTATIONS({ id }),
+      label: "tabs.implementations",
+    },
+    {
+      key: "members",
+      priority: getPriority("members"),
+      url: [DOMAIN_MEMBERS, DOMAIN_MEMBERS_NEW],
+      to: linkTo.DOMAIN_MEMBERS({ id }),
+      label: "tabs.members",
+    },
+  ];
+
+  const setMainTab = (orderedTabs) =>
+    _.flow(_.head, _.set("to", linkTo.DOMAIN({ id })), (mainTab) => [
+      mainTab,
+      ..._.tail(orderedTabs),
+    ])(orderedTabs);
+
+  const orderedTabs = _.flow(
+    _.filter((tab) => ddAuthorized || tab.key !== "structures"),
+    _.filter((tab) => dqAuthorized || tab.key !== "implementations"),
+    _.reject((tab) => hiddenTabs.includes(tab.key)),
+    _.sortBy("priority"),
+    setMainTab
+  )(tabs);
+
+  const getActived = (key, url, id) => {
+    const tabUrls = _.isArray(url) ? url : [url];
+
+    const maybeAddMain =
+      key === _.head(orderedTabs).key
+        ? _.concat([compile(DOMAIN)({ id })], tabUrls)
+        : tabUrls;
+
+    return _.flow(
+      _.map((url) => compile(url)({ id })),
+      _.some((url) => path === url)
+    )(maybeAddMain);
+  };
+
   return (
     <Menu attached="top" pointing secondary tabular>
-      <Menu.Item
-        active={path === compile(DOMAIN_CONCEPTS)({ id })}
-        as={Link}
-        to={linkTo.DOMAIN_CONCEPTS({ id })}
-        replace
-      >
-        <FormattedMessage id="tabs.concepts" />
-      </Menu.Item>
-      {ddAuthorized ? (
-        <Menu.Item
-          active={path === compile(DOMAIN_STRUCTURES)({ id })}
-          as={Link}
-          to={linkTo.DOMAIN_STRUCTURES({ id })}
-          replace
-        >
-          <FormattedMessage id="tabs.structures" />
-        </Menu.Item>
-      ) : null}
-      {dqAuthorized ? (
-        <Menu.Item
-          active={path === compile(DOMAIN_IMPLEMENTATIONS)({ id })}
-          as={Link}
-          to={linkTo.DOMAIN_IMPLEMENTATIONS({ id })}
-          replace
-        >
-          <FormattedMessage id="tabs.implementations" />
-        </Menu.Item>
-      ) : null}
-      <Menu.Item
-        active={
-          path === compile(DOMAIN_MEMBERS)({ id }) ||
-          path === compile(DOMAIN_MEMBERS_NEW)({ id })
-        }
-        as={Link}
-        to={linkTo.DOMAIN_MEMBERS({ id })}
-        replace
-      >
-        <FormattedMessage id="tabs.members" />
-      </Menu.Item>
+      {_.map(({ key, url, to, label }) => {
+        return (
+          <Menu.Item
+            key={key}
+            active={getActived(key, url, id)}
+            as={Link}
+            to={to}
+            replace
+          >
+            <FormattedMessage id={label} />
+          </Menu.Item>
+        );
+      }, orderedTabs)}
     </Menu>
   );
 };
 
 DomainTabs.propTypes = {
   domain: PropTypes.object,
+  taxonomyConfig: PropTypes.object,
 };
 
 export default DomainTabs;

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();
   });
 });