@truedat/bg 7.0.5 → 7.0.7

package/src/taxonomy/components/DomainActions.js

@@ -2,39 +2,14 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
-import { Dropdown, Button } from "semantic-ui-react";
-import { bindActionCreators } from "redux";
-import { connect } from "react-redux";
+import { Button } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { ConfirmModal, GroupActions } from "@truedat/core/components";
-import { deleteDomain, filterDomains } from "../routines";
-import { getPrimaryActions, getSecondaryActions } from "../selectors";
-
-const DomainAction = ({ action, icon, messageId, id, ...rest }) => {
-  const { formatMessage } = useIntl();
-  return (
-    <Dropdown.Item
-      text={formatMessage({ id: messageId })}
-      icon={icon}
-      as={Link}
-      to={action(id)}
-      {...rest}
-    />
-  );
-};
-
-DomainAction.propTypes = {
-  action: PropTypes.func,
-  icon: PropTypes.string,
-  messageId: PropTypes.string,
-  id: PropTypes.number,
-};
 
 const DomainActionButton = ({ action, icon, messageId, id, ...rest }) => {
   const { formatMessage } = useIntl();
   return (
     <Button
-      floated="right"
       primary
       content={formatMessage({ id: messageId })}
       icon={icon}
@@ -56,12 +31,11 @@ const ModalDelete = ({ onConfirm }) => {
   const { formatMessage } = useIntl();
   return (
     <ConfirmModal
-      header={formatMessage({ id: "domain" })}
-      content={formatMessage({ id: "actions.confirm" })}
+      header={formatMessage({ id: "domain.actions.delete" })}
+      content={formatMessage({ id: "domain.actions.delete.question" })}
       onConfirm={onConfirm}
       trigger={
         <Button
-          floated="right"
           negative
           content={formatMessage({ id: "actions.delete" })}
           icon="trash"
@@ -103,7 +77,10 @@ const ActionButtons = ({
 }) => {
   const availableActions = _.flow(
     composeAvailableActions,
-    _.map(({ action, ...rest }) => ({ ...rest, to: action(id) })),
+    _.map(({ action, ...rest }) => ({
+      ...rest,
+      to: action(id),
+    })),
     (actions) => (deleteAction ? withDelete(actions, onConfirm) : actions)
   )(secondaryActions);
 
@@ -121,61 +98,57 @@ const ActionButtons = ({
 
 ActionButtons.propTypes = {
   id: PropTypes.number,
+  primaryActions: PropTypes.array,
+  secondaryActions: PropTypes.array,
+  deleteAction: PropTypes.bool,
   onConfirm: PropTypes.func,
 };
 
-export class DomainActions extends React.Component {
-  static propTypes = {
-    domain: PropTypes.object,
-    deleteDomain: PropTypes.func,
-    domainActions: PropTypes.object,
-  };
-
-  handleConfirm = () => {
-    this.setState({ open: false });
-    this.props.deleteDomain(this.props.domain);
-  };
-
-  render = () => {
-    const {
-      domain,
-      domainActions,
-      primaryActions,
-      secondaryActions,
-      deleteAction,
-    } = this.props;
-    const { id } = domain;
-    return _.isEmpty(domainActions) ? null : (
-      <ActionButtons
-        domainActions={domainActions}
-        primaryActions={primaryActions}
-        secondaryActions={secondaryActions}
-        deleteAction={deleteAction}
-        show={this.show}
-        id={id}
-        onConfirm={this.handleConfirm}
-      />
-    );
-  };
-}
-
-const hiddenActions = ["show", "index"];
-
-const mapDispatchToProps = (dispatch) => ({
-  ...bindActionCreators({ deleteDomain }, dispatch),
-  handleFilterDomains: (event) => {
-    const query = event.target.value;
-    return dispatch(filterDomains({ query }));
-  },
-});
-
-const mapStateToProps = ({ domain, domainActions }, { availableActions }) => ({
+const DomainActions = ({
+  availableActions,
   domain,
-  domainActions: _.omit(hiddenActions)(domainActions),
-  primaryActions: getPrimaryActions({ domainActions, availableActions }),
-  secondaryActions: getSecondaryActions({ domainActions, availableActions }),
-  deleteAction:
-    _.has("delete")(domainActions) && _.has("deleteOption")(availableActions),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(DomainActions);
+  domainAllActions,
+  onDeleteDomain,
+}) => {
+  const hiddenActions = ["show", "index"];
+  const secondaryActionsKeys = ["delete", "update"];
+
+  const notHiddenActions = _.flow(
+    _.omit(hiddenActions),
+    _.toPairs,
+    _.map(([key, actionProps]) => ({ key, ...actionProps })),
+    _.filter(({ key }) => _.has(key)(availableActions)),
+    _.map((a) => ({ ...a, ..._.prop(_.prop("key")(a))(availableActions) }))
+  )(domainAllActions);
+
+  const primaryActions = _.filter(
+    ({ key }) => !_.includes(key)(secondaryActionsKeys)
+  )(notHiddenActions);
+
+  const secondaryActions = _.filter(({ key }) =>
+    _.includes(key)(secondaryActionsKeys)
+  )(notHiddenActions);
+
+  const deleteAction =
+    _.has("delete")(domainAllActions) &&
+    _.has("deleteOption")(availableActions);
+
+  return _.isEmpty(domainAllActions) ? null : (
+    <ActionButtons
+      primaryActions={primaryActions}
+      secondaryActions={secondaryActions}
+      deleteAction={deleteAction}
+      id={domain.id}
+      onConfirm={onDeleteDomain}
+    />
+  );
+};
+
+DomainActions.propTypes = {
+  availableActions: PropTypes.object,
+  domain: PropTypes.object,
+  domainAllActions: PropTypes.object,
+  onDeleteDomain: PropTypes.func,
+};
+
+export default DomainActions;

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"]);