@truedat/bg 7.0.4 → 7.0.6

package/src/taxonomy/components/DomainCrumbs.js

@@ -1,57 +1,65 @@
 import React, { Fragment } from "react";
 import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
 import { Breadcrumb } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { DOMAINS, linkTo } from "@truedat/core/routes";
-import { getAncestorDomains } from "../selectors";
+import { ascendants } from "@truedat/core/services/tree";
 
-export const DomainCrumbs = ({ parents, domain, actionCrumb }) => (
-  <Breadcrumb>
-    <Breadcrumb.Section as={Link} to={DOMAINS} active={!domain}>
-      <FormattedMessage id="navigation.glossary.taxonomy" />
-    </Breadcrumb.Section>
-    {parents.map((p, i) => (
-      <Fragment key={i}>
-        <Breadcrumb.Divider icon="right angle" />
-        <Breadcrumb.Section key={i} as={Link} to={linkTo.DOMAIN({ id: p.id })}>
-          {p.name}
-        </Breadcrumb.Section>
-      </Fragment>
-    ))}
-    {domain && domain.id && (
-      <>
-        <Breadcrumb.Divider icon="right angle" />
-        {actionCrumb ? (
-          <Breadcrumb.Section as={Link} to={linkTo.DOMAIN({ id: domain.id })}>
-            {domain.name}
+import { useDomains } from "../../hooks/useDomains";
+
+export const DomainCrumbs = ({ domain, actionCrumb }) => {
+  const { data: domains } = useDomains();
+
+  const ancestorsAndDomainIds = domain
+    ? ascendants(domain?.id, domains)
+    : undefined;
+  return (
+    <Breadcrumb>
+      <Breadcrumb.Section as={Link} to={DOMAINS} active={!domain}>
+        <FormattedMessage id="navigation.glossary.taxonomy" />
+      </Breadcrumb.Section>
+      {ancestorsAndDomainIds
+        ? ancestorsAndDomainIds.slice(0, -1).map((p, i) => (
+            <Fragment key={i}>
+              <Breadcrumb.Divider icon="right angle" />
+              <Breadcrumb.Section
+                key={i}
+                as={Link}
+                to={linkTo.DOMAIN({ id: parseInt(p) })}
+              >
+                {domains.find((d) => d.id === parseInt(p)).name}
+              </Breadcrumb.Section>
+            </Fragment>
+          ))
+        : null}
+      {domain ? (
+        <>
+          <Breadcrumb.Divider icon="right angle" />
+          {actionCrumb ? (
+            <Breadcrumb.Section as={Link} to={linkTo.DOMAIN({ id: domain.id })}>
+              {domain.name}
+            </Breadcrumb.Section>
+          ) : (
+            <Breadcrumb.Section active>{domain.name}</Breadcrumb.Section>
+          )}
+        </>
+      ) : null}
+      {actionCrumb ? (
+        <>
+          <Breadcrumb.Divider icon="right angle" />
+          <Breadcrumb.Section active>
+            <FormattedMessage id={actionCrumb} />
           </Breadcrumb.Section>
-        ) : (
-          <Breadcrumb.Section active>{domain.name}</Breadcrumb.Section>
-        )}
-      </>
-    )}
-    {actionCrumb && (
-      <>
-        <Breadcrumb.Divider icon="right angle" />
-        <Breadcrumb.Section active>
-          <FormattedMessage id={actionCrumb} />
-        </Breadcrumb.Section>
-      </>
-    )}
-  </Breadcrumb>
-);
+        </>
+      ) : null}
+    </Breadcrumb>
+  );
+};
 
 DomainCrumbs.propTypes = {
   actionCrumb: PropTypes.string,
   domain: PropTypes.object,
-  parents: PropTypes.array,
 };
 
-const mapStateToProps = (state) => ({
-  domain: state.domain,
-  parents: getAncestorDomains(state),
-});
-
-export default connect(mapStateToProps)(DomainCrumbs);
+export default DomainCrumbs;

package/src/taxonomy/components/DomainDetail.js

@@ -1,63 +1,105 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { Icon, Item, Header, Grid } from "semantic-ui-react";
-import { connect } from "react-redux";
-import { FormattedMessage } from "react-intl";
+import { Icon, Header, Grid, GridRow } from "semantic-ui-react";
+import { useHistory } from "react-router-dom";
+import { FormattedMessage, useIntl } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
+import { DOMAINS_QUERY } from "@truedat/core/api/queries";
+import { useQuery } from "@apollo/client";
+import { useDomain, useDomainDelete } from "../../hooks/useDomains";
 
 import DomainActions from "./DomainActions";
 
-export const DomainDetail = ({ type, name, description, domain_group }) => {
-  const available_actions = {
-    update: {
-      order: 2,
-      icon: "edit",
-      messageId: "actions.edit",
-      action: (id) => linkTo.DOMAIN_EDIT({ id }),
-    },
-    deleteOption: true,
+export const DomainDetail = ({ id }) => {
+  const { data: domain, actions: domainAllActions, loading } = useDomain(id);
+  const { trigger: deleteDomain } = useDomainDelete(id);
+  const { client } = useQuery(DOMAINS_QUERY, {
+    variables: { action: "viewDomain", fetchPolicy: "no-cache" },
+  });
+
+  const history = useHistory();
+  const { formatMessage } = useIntl();
+
+  const available_actions = domain
+    ? {
+        create: {
+          id: id,
+          order: 1,
+          icon: "cube",
+          messageId: "domain.actions.create",
+          action: () => linkTo.DOMAIN_NEW({ id }),
+        },
+        update: {
+          id: id,
+          order: 2,
+          icon: "edit",
+          messageId: "actions.edit",
+          action: () => linkTo.DOMAIN_EDIT({ id }),
+        },
+        deleteOption: true,
+      }
+    : null;
+
+  const handleDeleteDomain = async () => {
+    const { id, parent_id } = domain;
+    await deleteDomain(id);
+    if (parent_id) {
+      history.push(linkTo.DOMAIN_CONCEPTS({ id: parent_id }));
+    } else {
+      history.push(linkTo.DOMAINS());
+    }
+    client.resetStore();
   };
-  return (
+
+  return !loading ? (
     <>
       <Grid>
-        <Grid.Column width={8}>
-          <Header as="h2">
-            <Icon name="cube" />
-            <Header.Content>
-              {name}
-              <Header.Subheader>
-                {type || <FormattedMessage id="domain" />}
-              </Header.Subheader>
-            </Header.Content>
-          </Header>
-        </Grid.Column>
-        <Grid.Column width={8} textAlign="right">
-          <DomainActions availableActions={available_actions} />
-        </Grid.Column>
+        <GridRow>
+          <Grid.Column width={8}>
+            <Header as="h2">
+              <Icon name="cube" />
+              <Header.Content>
+                {domain.name}
+                <Header.Subheader>
+                  {domain.type || <FormattedMessage id="domain" />}
+                </Header.Subheader>
+              </Header.Content>
+            </Header>
+          </Grid.Column>
+          <Grid.Column width={8} textAlign="right">
+            <DomainActions
+              availableActions={available_actions}
+              domain={domain}
+              domainAllActions={domainAllActions}
+              onDeleteDomain={handleDeleteDomain}
+            />
+          </Grid.Column>
+        </GridRow>
+        {domain.description ? (
+          <GridRow>
+            <Grid.Column>{domain.description}</Grid.Column>
+          </GridRow>
+        ) : null}
+        {domain.domain_group ? (
+          <GridRow>
+            <Grid.Column>
+              <Header sub>
+                {formatMessage({
+                  id: "domain.props.domain_group",
+                })}
+              </Header>
+              <span>{_.get("name")(domain.domain_group)}</span>
+            </Grid.Column>
+          </GridRow>
+        ) : null}
       </Grid>
-      <p>{description}</p>
-      {domain_group && (
-        <Item>
-          <Item.Content>
-            <Item.Header as="h5">
-              <FormattedMessage id="domain.props.domain_group" />
-            </Item.Header>
-            <Item.Description>{_.get("name")(domain_group)}</Item.Description>
-          </Item.Content>
-        </Item>
-      )}
     </>
-  );
+  ) : null;
 };
 
 DomainDetail.propTypes = {
-  type: PropTypes.string,
-  name: PropTypes.string,
-  description: PropTypes.string,
-  domain_group: PropTypes.object,
+  id: PropTypes.number,
 };
 
-const mapStateToProps = ({ domain }) => ({ ...domain });
-
-export default connect(mapStateToProps)(DomainDetail);
+export default DomainDetail;

package/src/taxonomy/components/DomainForm.js

@@ -2,16 +2,11 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { Button, Form } from "semantic-ui-react";
-import { connect } from "react-redux";
 import { useIntl } from "react-intl";
 import { useForm, Controller } from "react-hook-form";
 import { HistoryBackButton } from "@truedat/core/components";
 import { accentInsensitiveOrder } from "@truedat/core/services/sort";
-import {
-  getDomainGroups,
-  getDomainTypes,
-  domainParentOptionsSelector,
-} from "../selectors";
+import { useDomains } from "../../hooks/useDomains";
 
 const toOption = (t, i) => ({ key: i, text: t, value: t });
 
@@ -24,6 +19,25 @@ const buildOptions = (collection, value) =>
     _.map.convert({ cap: false })(toOption)
   )(collection);
 
+const getDomainGroups = _.flow(
+  _.map(_.path("domain_group.name")),
+  _.filter(_.isString),
+  _.sortBy(_.toLower)
+);
+
+const getDomainTypes = _.flow(
+  _.map("type"),
+  _.filter(_.isString),
+  _.uniq,
+  _.sortBy(_.toLower)
+);
+
+const getDomainParentOptions = (parentableIds = []) =>
+  _.flow(
+    _.filter((d) => _.includes(d.id)(parentableIds)),
+    _.map(({ id, name }) => ({ key: id, text: name, value: id }))
+  );
+
 const DEFAULTS = {
   description: "",
   external_id: "",
@@ -33,16 +47,10 @@ const DEFAULTS = {
   domain_group: null,
 };
 
-export const DomainForm = ({
-  domain = {},
-  isSubmitting,
-  domainGroups,
-  domainParentOptions,
-  domainTypes,
-  onSubmit,
-}) => {
+export const DomainForm = ({ domain = {}, onSubmit }) => {
+  const { data: domains } = useDomains();
+
   const { formatMessage } = useIntl();
-  // const domainGroup = domain?.domain_group;
   const { handleSubmit, control, formState, watch } = useForm({
     mode: "all",
     defaultValues: {
@@ -52,12 +60,19 @@ export const DomainForm = ({
     },
   });
   const [group, type] = watch(["domain_group", "type"]);
+  const domainTypes = getDomainTypes(domains);
+  const domainGroups = getDomainGroups(domains);
   const domainGroupOptions = buildOptions(domainGroups, group);
   const domainTypeOptions = buildOptions(domainTypes, type);
   const groupClearable =
     domain?.domain_group?.status === "root" || !domain?.domain_group;
 
   const { errors, isDirty, isValid } = formState;
+
+  const parentableIds = domain.parentable_ids || [];
+  const domainParentOptions =
+    domain?.id && domains ? getDomainParentOptions(parentableIds)(domains) : [];
+
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
       <Controller
@@ -199,7 +214,7 @@ export const DomainForm = ({
             placeholder={formatMessage({
               id: "domain.props.description.placeholder",
             })}
-            value={value}
+            value={value || ""}
           />
         )}
       />
@@ -208,14 +223,10 @@ export const DomainForm = ({
           floated="right"
           type="submit"
           primary
-          loading={isSubmitting}
-          disabled={isSubmitting || !isDirty || !isValid}
+          disabled={!isDirty || !isValid}
           content={formatMessage({ id: "actions.save" })}
         />
-        <HistoryBackButton
-          content={formatMessage({ id: "actions.cancel" })}
-          disabled={isSubmitting}
-        />
+        <HistoryBackButton content={formatMessage({ id: "actions.cancel" })} />
       </div>
     </Form>
   );
@@ -223,20 +234,7 @@ export const DomainForm = ({
 
 DomainForm.propTypes = {
   domain: PropTypes.object,
-  isSubmitting: PropTypes.bool,
-  domainGroups: PropTypes.array,
-  domainParentOptions: PropTypes.array,
-  domainTypes: PropTypes.array,
   onSubmit: PropTypes.func.isRequired,
 };
 
-const mapStateToProps = (state, ownProps) => ({
-  domainTypes: getDomainTypes(state),
-  domainGroups: getDomainGroups(state),
-  domainParentOptions: ownProps.domain?.id
-    ? domainParentOptionsSelector(state)
-    : [],
-  isSubmitting: state.domainCreating || state.domainUpdating,
-});
-
-export default connect(mapStateToProps)(DomainForm);
+export default DomainForm;

package/src/taxonomy/components/DomainImplementations.js

@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
 
 const ImplementationFiltersLoader = React.lazy(() =>
   import("@truedat/dq/components/ImplementationFiltersLoader")
@@ -32,6 +31,4 @@ DomainImplementations.propTypes = {
   domain: PropTypes.object.isRequired,
 };
 
-export const mapStateToProps = ({ domain }) => ({ domain });
-
-export default connect(mapStateToProps)(DomainImplementations);
+export default DomainImplementations;

package/src/taxonomy/components/DomainMembers.js

@@ -1,6 +1,13 @@
 import React from "react";
 import ResourceMembers from "@truedat/core/components/ResourceMembers";
+import PropTypes from "prop-types";
 
-export const DomainMembers = () => <ResourceMembers type="domain" />;
+export const DomainMembers = ({ domainId }) => (
+  <ResourceMembers type="domain" id={domainId} />
+);
+
+DomainMembers.propTypes = {
+  domainId: PropTypes.number,
+};
 
 export default DomainMembers;

package/src/taxonomy/components/DomainRoutes.js

@@ -2,66 +2,19 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 import { Unauthorized } from "@truedat/core/components";
 import { useAuthorized } from "@truedat/core/hooks";
-import {
-  DOMAIN,
-  DOMAIN_CONCEPTS,
-  DOMAINS,
-  DOMAINS_NEW,
-  DOMAINS_SEARCH,
-  DOMAIN_EDIT,
-  DOMAIN_IMPLEMENTATIONS,
-  DOMAIN_MEMBERS,
-  DOMAIN_MEMBERS_NEW,
-  DOMAIN_NEW,
-  DOMAIN_STRUCTURES,
-} from "@truedat/core/routes";
-import Domain from "./Domain";
-import DomainLoader from "./DomainLoader";
-import DomainMembersLoader from "./DomainMembersLoader";
-import Domains from "./Domains";
-import DomainsLoader from "./DomainsLoader";
-import EditDomain from "./EditDomain";
+import { DOMAINS, DOMAIN, DOMAINS_NEW } from "@truedat/core/routes";
 import NewDomain from "./NewDomain";
-import AddDomainMember from "./AddDomainMember";
-
-const RolesLoader = React.lazy(() =>
-  import("@truedat/auth/roles/components/RolesLoader")
-);
+import Domains from "./Domains";
 
 const DomainRoutes = () => (
-  <>
-    <Route component={DomainLoader} />
-    <Route component={DomainMembersLoader} />
-    <Route exact path={DOMAIN} component={Domain} />
-    <Route exact path={DOMAIN_CONCEPTS} component={Domain} />
-    <Route exact path={DOMAIN_IMPLEMENTATIONS} component={Domain} />
-    <Route exact path={DOMAIN_STRUCTURES} component={Domain} />
-    <Route exact path={DOMAIN_MEMBERS} component={Domain} />
-    <Route exact path={DOMAIN_EDIT} render={() => <EditDomain />} />
-    <Route exact path={DOMAIN_NEW} component={NewDomain} />
-    <Route
-      path={DOMAIN_MEMBERS_NEW}
-      render={({ match }) => (
-        <>
-          <RolesLoader />
-          <AddDomainMember id={parseInt(match?.params?.id)} />
-        </>
-      )}
-    />
-  </>
+  <Switch>
+    <Route exact path={DOMAINS_NEW} render={() => <NewDomain />} />
+    <Route path={DOMAIN} render={() => <Domains />} />
+    <Route exact path={DOMAINS} render={() => <Domains />} />
+  </Switch>
 );
 
-const AuthorizedRoutes = () => (
-  <>
-    <Route component={DomainsLoader} />
-    <Route path={DOMAINS} component={Domains} exact />
-    <Switch>
-      <Route path={DOMAINS_SEARCH} component={Domains} exact />
-      <Route path={DOMAINS_NEW} component={NewDomain} exact />
-      <Route path={DOMAIN} render={() => <DomainRoutes />} />
-    </Switch>
-  </>
-);
+const AuthorizedRoutes = () => <DomainRoutes />;
 
 const DomainsRoutes = () => {
   const authorized = useAuthorized(["taxonomy", "taxonomy_membership"]);

package/src/taxonomy/components/DomainStructures.js

@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
 import StructuresView from "@truedat/dd/components/StructuresView";
 
 export const DomainStructures = ({ domain = {} }) => {
@@ -14,6 +13,4 @@ DomainStructures.propTypes = {
   domain: PropTypes.object.isRequired,
 };
 
-export const mapStateToProps = ({ domain }) => ({ domain });
-
-export default connect(mapStateToProps)(DomainStructures);
+export default DomainStructures;

package/src/taxonomy/components/DomainTabs.js

@@ -1,45 +1,29 @@
-import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
-import { connect } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { Menu } from "semantic-ui-react";
-import { useAuthorized, usePath } from "@truedat/core/hooks";
+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,
   linkTo,
 } from "@truedat/core/routes";
 
 const DomainTabs = ({ domain }) => {
-  const path = usePath();
+  const { pathname: path } = useLocation();
   const ddAuthorized = useAuthorized("data_dictionary");
   const dqAuthorized = useAuthorized("quality");
-  const id = domain?.id;
+  const id = domain.id;
+
   return (
     <Menu attached="top" pointing secondary tabular>
       <Menu.Item
-        active={path === DOMAIN}
-        as={Link}
-        to={linkTo.DOMAIN(domain)}
-        replace
-      >
-        <FormattedMessage id="tabs.subdomains" />
-      </Menu.Item>
-      <Menu.Item
-        active={path === DOMAIN_MEMBERS}
-        as={Link}
-        to={linkTo.DOMAIN_MEMBERS({ id })}
-        replace
-      >
-        <FormattedMessage id="tabs.members" />
-      </Menu.Item>
-      <Menu.Item
-        active={path === DOMAIN_CONCEPTS}
+        active={path === compile(DOMAIN_CONCEPTS)({ id })}
         as={Link}
         to={linkTo.DOMAIN_CONCEPTS({ id })}
         replace
@@ -48,7 +32,7 @@ const DomainTabs = ({ domain }) => {
       </Menu.Item>
       {ddAuthorized ? (
         <Menu.Item
-          active={path === DOMAIN_STRUCTURES}
+          active={path === compile(DOMAIN_STRUCTURES)({ id })}
           as={Link}
           to={linkTo.DOMAIN_STRUCTURES({ id })}
           replace
@@ -58,7 +42,7 @@ const DomainTabs = ({ domain }) => {
       ) : null}
       {dqAuthorized ? (
         <Menu.Item
-          active={path === DOMAIN_IMPLEMENTATIONS}
+          active={path === compile(DOMAIN_IMPLEMENTATIONS)({ id })}
           as={Link}
           to={linkTo.DOMAIN_IMPLEMENTATIONS({ id })}
           replace
@@ -66,6 +50,17 @@ const DomainTabs = ({ domain }) => {
           <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>
     </Menu>
   );
 };
@@ -74,6 +69,4 @@ DomainTabs.propTypes = {
   domain: PropTypes.object,
 };
 
-const mapStateToProps = ({ domain }) => ({ domain });
-
-export default connect(mapStateToProps)(DomainTabs);
+export default DomainTabs;