@truedat/bg 7.2.0 → 7.2.2

package/src/taxonomy/components/Domain.js

@@ -2,37 +2,16 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Route, Switch } from "react-router-dom";
 import { Segment } from "semantic-ui-react";
-import { Unauthorized } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
-import {
-  DOMAIN_CONCEPTS,
-  DOMAIN_IMPLEMENTATIONS,
-  DOMAIN_MEMBERS,
-  DOMAIN_MEMBERS_NEW,
-  DOMAIN_STRUCTURES,
-  DOMAIN_NEW,
-  DOMAIN_EDIT,
-} from "@truedat/core/routes";
-import UserSearchFiltersLoader from "@truedat/dd/components/UserSearchFiltersLoader";
-import DomainConcepts from "../../concepts/components/DomainConcepts";
+import { DOMAIN_NEW, DOMAIN_EDIT } from "@truedat/core/routes";
 import { useDomain } from "../../hooks/useDomains";
 import DomainDetail from "./DomainDetail";
-import DomainImplementations from "./DomainImplementations";
-import DomainMembers from "./DomainMembers";
-import DomainStructures from "./DomainStructures";
 import DomainTabs from "./DomainTabs";
 import EditDomain from "./EditDomain";
 import NewDomain from "./NewDomain";
-import AddDomainMember from "./AddDomainMember";
+import DomainContent from "./DomainContent";
 
-const RolesLoader = React.lazy(() =>
-  import("@truedat/auth/roles/components/RolesLoader")
-);
-
-export const Domain = ({ domainId }) => {
+export const Domain = ({ domainId, domains, taxonomyConfig }) => {
   const { data: domain } = useDomain(domainId);
-  const ddAuthorized = useAuthorized("data_dictionary");
-  const dqAuthorized = useAuthorized("quality");
 
   return domain ? (
     <Segment>
@@ -49,54 +28,13 @@ export const Domain = ({ domainId }) => {
         />
         <>
           <DomainDetail id={domain.id} />
-          <DomainTabs domain={domain} />
+          <DomainTabs domain={domain} taxonomyConfig={taxonomyConfig} />
           <Segment attached="bottom">
-            <Switch>
-              <Route
-                exact
-                path={DOMAIN_CONCEPTS}
-                render={() => <DomainConcepts domain={domain} />}
-              />
-              <Route
-                exact
-                path={DOMAIN_STRUCTURES}
-                render={() =>
-                  ddAuthorized ? (
-                    <DomainStructures domain={domain} />
-                  ) : (
-                    <Unauthorized />
-                  )
-                }
-              />
-              <Route
-                exact
-                path={DOMAIN_IMPLEMENTATIONS}
-                render={() =>
-                  dqAuthorized ? (
-                    <>
-                      <UserSearchFiltersLoader scope="rule_implementation" />
-                      <DomainImplementations domain={domain} />
-                    </>
-                  ) : (
-                    <Unauthorized />
-                  )
-                }
-              />
-              <Route
-                exact
-                path={DOMAIN_MEMBERS}
-                render={() => <DomainMembers domainId={domain.id} />}
-              />
-              <Route
-                path={DOMAIN_MEMBERS_NEW}
-                render={({ match }) => (
-                  <>
-                    <RolesLoader />
-                    <AddDomainMember id={parseInt(match?.params?.id)} />
-                  </>
-                )}
-              />
-            </Switch>
+            <DomainContent
+              domain={domain}
+              domains={domains}
+              taxonomyConfig={taxonomyConfig}
+            />
           </Segment>
         </>
       </Switch>
@@ -106,6 +44,8 @@ export const Domain = ({ domainId }) => {
 
 Domain.propTypes = {
   domainId: PropTypes.number,
+  domains: PropTypes.array,
+  taxonomyConfig: PropTypes.object,
 };
 
 export default Domain;

package/src/taxonomy/components/DomainCards.js

@@ -0,0 +1,113 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+import { Card, Header, Icon, Message, Input } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { linkTo } from "@truedat/core/routes";
+import DomainsActions from "./DomainsActions";
+
+export const DomainCard = ({
+  id,
+  name,
+  type,
+  description,
+  childCount,
+  domain_group,
+}) => (
+  <Card key={id} link as={Link} to={linkTo.DOMAIN({ id })}>
+    <Card.Content>
+      <Card.Header>
+        <Icon name="cube" />
+        {name}
+      </Card.Header>
+      <Card.Meta>
+        {_.get("name")(domain_group) && (
+          <>
+            <Icon name="object group" /> {_.get("name")(domain_group)}
+            <br />
+          </>
+        )}
+        <span>{type || <FormattedMessage id="domain" />}</span>
+      </Card.Meta>
+    </Card.Content>
+    <Card.Content description={description} />
+    <Card.Content extra>
+      <Icon name="cubes" />
+      <FormattedMessage
+        id="domain.props.children"
+        values={{ count: childCount }}
+      />
+    </Card.Content>
+  </Card>
+);
+
+DomainCard.propTypes = {
+  id: PropTypes.number,
+  name: PropTypes.string,
+  type: PropTypes.string,
+  childCount: PropTypes.number,
+  description: PropTypes.string,
+  domain_group: PropTypes.object,
+};
+
+export const DomainCards = ({ actions, domain, domains }) => {
+  const [domainsFilter, setDomainFilter] = useState("");
+  const { formatMessage } = useIntl();
+
+  const domainChildren = _.filter(["parent_id", domain?.id || null])(domains);
+  const visibleDomains = _.flow(
+    _.map((domain) => {
+      const children = _.filter(({ parent_id }) => parent_id == domain.id)(
+        domains
+      );
+      return { childCount: children.length, ...domain };
+    }),
+    _.filter((domain) =>
+      domain.name.toLowerCase().includes(domainsFilter.toLowerCase())
+    ),
+    _.orderBy("name", "asc")
+  )(domainChildren);
+  return (
+    <>
+      <Header as="h4">
+        <Header.Content className="taxonomy-domains-domaincards-header-content">
+          <div>
+            <Input
+              icon="search"
+              value={domainsFilter}
+              placeholder={formatMessage({
+                id: "domains.search.placeholder",
+              })}
+              onChange={(_e, { value }) => setDomainFilter(value)}
+            />
+          </div>
+          {_.isEmpty(domain) ? <DomainsActions actions={actions} /> : null}
+        </Header.Content>
+      </Header>
+
+      {_.isEmpty(visibleDomains) && !_.isEmpty(domainChildren) ? (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            <FormattedMessage id="domains.search.results.empty" />
+          </Header.Content>
+        </Header>
+      ) : null}
+
+      {_.isEmpty(domainChildren) && domain && domain.id ? (
+        <Message header={formatMessage({ id: "domain.children.empty" })} />
+      ) : null}
+
+      <Card.Group>{visibleDomains.map(DomainCard)}</Card.Group>
+    </>
+  );
+};
+
+DomainCards.propTypes = {
+  actions: PropTypes.object,
+  domains: PropTypes.array,
+  domain: PropTypes.object,
+};
+
+export default DomainCards;

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;