@truedat/bg 4.48.9 → 4.48.12

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.48.12] 2022-07-22
+
+### Changed
+
+- [TD-3584] Allow longer domain descriptions
+
+## [4.48.10] 2022-07-19
+
+### Added
+
+- [TD-4975] Structures tab in Domain's view
+
 ## [4.48.4] 2022-07-11
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "4.48.9",
+  "version": "4.48.12",
   "description": "Truedat Web Business Glossary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -86,8 +86,8 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "4.48.9",
-    "@truedat/df": "4.48.9",
+    "@truedat/core": "4.48.12",
+    "@truedat/df": "4.48.12",
     "file-saver": "^2.0.5",
     "moment": "^2.24.0",
     "path-to-regexp": "^1.7.0",
@@ -107,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "82d6ab8fb0b3000bf4b8975670d3e5cf15b14487"
+  "gitHead": "4a36e50c99882caf8be2d2d59e13e4fde1759302"
 }

package/src/taxonomy/components/Domain.js

@@ -8,15 +8,17 @@ import {
   DOMAIN,
   DOMAIN_CONCEPTS,
   DOMAIN_MEMBERS,
+  DOMAIN_STRUCTURES,
   linkTo,
 } from "@truedat/core/routes";
 import DomainConcepts from "../../concepts/components/DomainConcepts";
 import DomainActions from "./DomainActions";
-import DomainCrumbs from "./DomainCrumbs";
 import DomainCards from "./DomainCards";
+import DomainCrumbs from "./DomainCrumbs";
 import DomainDetail from "./DomainDetail";
 import DomainMembers from "./DomainMembers";
 import DomainSearch from "./DomainSearch";
+import DomainStructures from "./DomainStructures";
 import DomainTabs from "./DomainTabs";
 
 export const Domain = ({ hasChildren, domain, domainLoading }) => {
@@ -58,6 +60,11 @@ export const Domain = ({ hasChildren, domain, domainLoading }) => {
               render={() => <DomainConcepts />}
               exact
             />
+            <Route
+              path={DOMAIN_STRUCTURES}
+              render={() => <DomainStructures />}
+              exact
+            />
           </Switch>
         </Segment>
       </Segment>

package/src/taxonomy/components/DomainForm.js

@@ -1,261 +1,242 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import {
-  Accordion,
-  Button,
-  Form,
-  Icon,
-  Label,
-  Segment
-} from "semantic-ui-react";
-import { compose } from "redux";
+import { Button, Form } from "semantic-ui-react";
 import { connect } from "react-redux";
-import { injectIntl } from "react-intl";
+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
+  domainParentOptionsSelector,
 } from "../selectors";
 
 const toOption = (t, i) => ({ key: i, text: t, value: t });
 
-const domainStringOptions = (collection, value) =>
+const buildOptions = (collection, value) =>
   _.flow(
     _.concat(value),
     _.filter(_.isString),
     _.uniq,
-    _.sortBy(_.lowerCase),
+    _.sortBy(accentInsensitiveOrder),
     _.map.convert({ cap: false })(toOption)
   )(collection);
 
-export class DomainForm extends React.Component {
-  static propTypes = {
-    domain: PropTypes.object,
-    isSubmitting: PropTypes.bool,
-    domainGroups: PropTypes.array,
-    domainParentOptions: PropTypes.array,
-    domainTypes: PropTypes.array,
-    handleSubmit: PropTypes.func.isRequired,
-    intl: PropTypes.object
-  };
-
-  constructor(props) {
-    super(props);
-    const defaults = {
-      description: "",
-      external_id: "",
-      name: "",
-      parent_id: null,
-      type: "",
-      domain_group: null
-    };
-
-    const domain_group = _.path("domain.domain_group.name")(props);
-    const domain = Object.assign({}, defaults, {
-      ...(props.domain || {}),
-      domain_group
-    });
-    const touched = false;
-    this.state = {
-      domain,
-      touched,
-      default_group: _.path("domain.domain_group")(props)
-    };
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
-
-  handleChange(event, data) {
-    const { name, value } = data;
-    const domain = Object.assign({}, this.state.domain, { [name]: value });
-    this.setState({ domain, touched: true });
-    event.preventDefault();
-  }
-
-  handleSelectionClick = () => {
-    const { activeSelection } = this.state;
-    this.setState({ activeSelection: !activeSelection });
-  };
-
-  handleSubmit(event) {
-    const { domain } = this.state;
-    this.props.handleSubmit({ domain });
-    event.preventDefault();
-  }
-
-  validForm() {
-    const { domain } = this.state;
-    return _.flow(
-      _.pick(["name", "external_id", "description"]),
-      _.toPairs,
-      _.every(([, v]) => _.negate(_.isEmpty)(v) && _.negate(_.isNil)(v))
-    )(domain);
-  }
+const DEFAULTS = {
+  description: "",
+  external_id: "",
+  name: "",
+  parent_id: null,
+  type: "",
+  domain_group: null,
+};
 
-  clearableGroup() {
-    const { default_group } = this.state;
-    return _.isNil(default_group) || _.prop("status")(default_group) == "root";
-  }
+export const DomainForm = ({
+  domain = {},
+  isSubmitting,
+  domainGroups,
+  domainParentOptions,
+  domainTypes,
+  onSubmit,
+}) => {
+  const { formatMessage } = useIntl();
+  // const domainGroup = domain?.domain_group;
+  const { handleSubmit, control, formState, watch } = useForm({
+    mode: "all",
+    defaultValues: {
+      ...DEFAULTS,
+      ...domain,
+      domain_group: domain?.domain_group?.name || null,
+    },
+  });
+  const [group, type] = watch(["domain_group", "type"]);
+  const domainGroupOptions = buildOptions(domainGroups, group);
+  const domainTypeOptions = buildOptions(domainTypes, type);
+  const groupClearable =
+    domain?.domain_group?.status === "root" || !domain?.domain_group;
 
-  clearGroup() {
-    const { domain } = this.state;
-    this.setState({
-      ...this.state,
-      domain: { ...domain, domain_group: null },
-      touched: true
-    });
-  }
-  render() {
-    const {
-      isSubmitting,
-      domainGroups,
-      domainTypes,
-      domainParentOptions,
-      intl
-    } = this.props;
-    const { formatMessage } = intl;
-    const { activeSelection, domain } = this.state;
-    return (
-      <Form onSubmit={this.handleSubmit}>
-        <Form.Input
-          name="name"
-          label={formatMessage({ id: "domain.props.name" })}
-          onChange={this.handleChange}
-          value={domain.name}
-          placeholder={formatMessage({ id: "domain.props.name.placeholder" })}
-          autoComplete="off"
-          required
-        />
-        <Form.Input
-          name="external_id"
-          label={formatMessage({ id: "domain.props.external_id" })}
-          onChange={this.handleChange}
-          value={domain.external_id || ""}
-          placeholder={formatMessage({
-            id: "domain.props.external_id.placeholder"
-          })}
-          autoComplete="off"
-          required
+  const { errors, isDirty, isValid } = formState;
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name="name"
+        rules={{
+          required: formatMessage(
+            { id: "form.validation.required" },
+            { prop: formatMessage({ id: "domain.props.name" }) }
+          ),
+        }}
+        render={({ field: { onBlur, onChange, value } }) => (
+          <Form.Input
+            id="name"
+            autoComplete="off"
+            error={errors?.name?.message}
+            label={{
+              children: formatMessage({ id: "domain.props.name" }),
+              htmlFor: "name",
+            }}
+            name="name"
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({ id: "domain.props.name.placeholder" })}
+            required
+            value={value}
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="external_id"
+        rules={{
+          required: formatMessage(
+            { id: "form.validation.required" },
+            { prop: formatMessage({ id: "domain.props.external_id" }) }
+          ),
+        }}
+        render={({ field: { onBlur, onChange, value } }) => (
+          <Form.Input
+            id="external_id"
+            autoComplete="off"
+            error={errors?.external_id?.message}
+            label={{
+              children: formatMessage({ id: "domain.props.external_id" }),
+              htmlFor: "external_id",
+            }}
+            name="external_id"
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({
+              id: "domain.props.external_id.placeholder",
+            })}
+            required
+            value={value}
+          />
+        )}
+      />
+      {_.isEmpty(domainParentOptions) ? null : (
+        <Controller
+          control={control}
+          name="parent_id"
+          render={({ field: { onBlur, onChange, value } }) => (
+            <Form.Dropdown
+              name="parent_id"
+              label={formatMessage({ id: "domain.props.parent" })}
+              basic
+              search
+              selection
+              clearable
+              options={domainParentOptions}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              placeholder={formatMessage({ id: "domain.selector.placeholder" })}
+              value={value || ""}
+            />
+          )}
         />
-        {!_.isEmpty(domainParentOptions) && (
+      )}
+      <Controller
+        control={control}
+        name="domain_group"
+        render={({ field: { onBlur, onChange, value } }) => (
           <Form.Dropdown
-            name="parent_id"
-            label={formatMessage({ id: "domain.props.parent" })}
+            name="domain_group"
+            label={formatMessage({ id: "domain.props.domain_group" })}
             basic
-            clearable
-            onChange={this.handleChange}
-            value={domain.parent_id}
-            placeholder={formatMessage({ id: "domain.selector.placeholder" })}
-            options={domainParentOptions}
             search
             selection
+            clearable={groupClearable}
+            options={domainGroupOptions}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({
+              id: "domain.props.domain_group.placeholder",
+            })}
+            value={value || ""}
+            allowAdditions
+            additionLabel={
+              <i style={{ color: "red" }}>
+                {formatMessage({ id: "domain.label.domain_group" })}
+              </i>
+            }
           />
         )}
-        <Segment>
-          <Form.Group inline>
-            <label>{formatMessage({ id: "domain.props.domain_group" })}</label>
-            {_.prop("domain_group")(domain) && (
-              <Label size={"medium"}>
-                {_.flow(
-                  _.prop("domain_group"),
-                  _.truncate({ length: 90 })
-                )(domain)}
-                {this.clearableGroup() && (
-                  <Icon name="delete" onClick={() => this.clearGroup()} />
-                )}
-              </Label>
-            )}
-          </Form.Group>
-          <Accordion>
-            <Accordion.Title
-              active={activeSelection}
-              onClick={this.handleSelectionClick}
-            >
-              <Icon name="dropdown" />
-              {formatMessage({ id: "domain.domain_group.select" })}{" "}
-            </Accordion.Title>
-
-            <Accordion.Content active={activeSelection}>
-              <Form.Dropdown
-                name="domain_group"
-                label={formatMessage({ id: "domain.props.domain_group" })}
-                basic
-                clearable={this.clearableGroup()}
-                onChange={this.handleChange}
-                value={domain.domain_group || ""}
-                placeholder={formatMessage({
-                  id: "domain.props.domain_group.placeholder"
-                })}
-                options={domainStringOptions(domainGroups, domain.domain_group)}
-                search
-                selection
-                allowAdditions
-                onAddItem={this.handleAddItem}
-                additionLabel={
-                  <i style={{ color: "red" }}>
-                    {formatMessage({
-                      id: "domain.label.domain_group"
-                    })}
-                  </i>
-                }
-              />
-            </Accordion.Content>
-          </Accordion>
-        </Segment>
-        <Form.Dropdown
-          name="type"
-          label={formatMessage({ id: "domain.props.type" })}
-          basic
-          clearable
-          onChange={this.handleChange}
-          value={domain.type}
-          placeholder={formatMessage({ id: "domain.props.type.placeholder" })}
-          options={domainStringOptions(domainTypes, domain.type)}
-          search
-          selection
-          allowAdditions
-          onAddItem={this.handleAddItem}
-          additionLabel={<i style={{ color: "red" }}>New Domain Type: </i>}
-        />
-        <Form.TextArea
-          name="description"
-          label={formatMessage({ id: "domain.props.description" })}
-          onChange={this.handleChange}
-          value={domain.description}
-          placeholder={formatMessage({
-            id: "domain.props.description.placeholder"
-          })}
-          autoComplete="off"
-          maxLength={255}
-          required
-        />
-        <div className="actions">
-          <HistoryBackButton
-            content={formatMessage({ id: "actions.cancel" })}
-            disabled={isSubmitting}
+      />
+      <Controller
+        control={control}
+        name="type"
+        render={({ field: { onBlur, onChange, value } }) => (
+          <Form.Dropdown
+            name="type"
+            label={formatMessage({ id: "domain.props.type" })}
+            basic
+            search
+            selection
+            clearable
+            options={domainTypeOptions}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({ id: "domain.props.type.placeholder" })}
+            value={value || ""}
+            allowAdditions
+            additionLabel={<i style={{ color: "red" }}>New Domain Type: </i>}
           />
-          <Button
-            type="submit"
-            primary
-            loading={isSubmitting}
-            disabled={isSubmitting || !this.state.touched || !this.validForm()}
-            content={formatMessage({ id: "actions.save" })}
+        )}
+      />
+      <Controller
+        control={control}
+        name="description"
+        render={({ field: { onBlur, onChange, value } }) => (
+          <Form.TextArea
+            autoComplete="off"
+            error={errors?.description?.message}
+            label={formatMessage({ id: "domain.props.description" })}
+            name="description"
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({
+              id: "domain.props.description.placeholder",
+            })}
+            value={value}
           />
-        </div>
-      </Form>
-    );
-  }
-}
+        )}
+      />
+      <div className="actions">
+        <Button
+          floated="right"
+          type="submit"
+          primary
+          loading={isSubmitting}
+          disabled={isSubmitting || !isDirty || !isValid}
+          content={formatMessage({ id: "actions.save" })}
+        />
+        <HistoryBackButton
+          content={formatMessage({ id: "actions.cancel" })}
+          disabled={isSubmitting}
+        />
+      </div>
+    </Form>
+  );
+};
+
+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: _.path("domain.id")(ownProps)
+  domainParentOptions: ownProps.domain?.id
     ? domainParentOptionsSelector(state)
     : [],
-  isSubmitting: state.domainCreating || state.domainUpdating
+  isSubmitting: state.domainCreating || state.domainUpdating,
 });
 
-export default compose(injectIntl, connect(mapStateToProps))(DomainForm);
+export default connect(mapStateToProps)(DomainForm);

package/src/taxonomy/components/DomainRoutes.js

@@ -12,6 +12,7 @@ import {
   DOMAIN_MEMBERS,
   DOMAIN_MEMBERS_NEW,
   DOMAIN_NEW,
+  DOMAIN_STRUCTURES,
 } from "@truedat/core/routes";
 import AddDomainMember from "./AddMember";
 import Domain from "./Domain";
@@ -26,6 +27,28 @@ const RolesLoader = React.lazy(() =>
   import("@truedat/auth/roles/components/RolesLoader")
 );
 
+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_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={() => (
+        <>
+          <Route component={RolesLoader} />
+          <Route path={DOMAIN_MEMBERS_NEW} component={AddDomainMember} exact />
+        </>
+      )}
+    />
+  </>
+);
+
 const AuthorizedRoutes = () => (
   <>
     <Route component={DomainsLoader} />
@@ -33,38 +56,12 @@ const AuthorizedRoutes = () => (
     <Switch>
       <Route path={DOMAINS_SEARCH} component={Domains} exact />
       <Route path={DOMAINS_NEW} component={NewDomain} exact />
-      <Route
-        path={DOMAIN}
-        render={() => (
-          <>
-            <Route component={DomainLoader} />
-            <Route component={DomainMembersLoader} />
-            <Route path={DOMAIN} component={Domain} exact />
-            <Route path={DOMAIN_CONCEPTS} component={Domain} exact />
-            <Route path={DOMAIN_MEMBERS} component={Domain} exact />
-            <Route path={DOMAIN_EDIT} component={EditDomain} exact />
-            <Route path={DOMAIN_NEW} component={NewDomain} exact />
-            <Route
-              path={DOMAIN_MEMBERS_NEW}
-              render={() => (
-                <>
-                  <Route component={RolesLoader} />
-                  <Route
-                    path={DOMAIN_MEMBERS_NEW}
-                    component={AddDomainMember}
-                    exact
-                  />
-                </>
-              )}
-            />
-          </>
-        )}
-      />
+      <Route path={DOMAIN} render={() => <DomainRoutes />} />
     </Switch>
   </>
 );
 
-const DomainRoutes = () => {
+const DomainsRoutes = () => {
   const authorized = useAuthorized(["taxonomy", "taxonomy_membership"]);
   return (
     <Route
@@ -74,4 +71,4 @@ const DomainRoutes = () => {
   );
 };
 
-export default DomainRoutes;
+export default DomainsRoutes;

package/src/taxonomy/components/DomainStructures.js

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import StructureFiltersLoader from "@truedat/dd/components/StructureFiltersLoader";
+import StructuresLoader from "@truedat/dd/components/StructuresLoader";
+import StructuresView from "@truedat/dd/components/StructuresView";
+
+export const DomainStructures = ({ domain = {} }) => {
+  const defaultFilters = {
+    taxonomy: [domain.id],
+  };
+  return (
+    <>
+      <StructureFiltersLoader defaultFilters={defaultFilters} />
+      <StructuresLoader defaultFilters={defaultFilters} />
+      <StructuresView embedded />
+    </>
+  );
+};
+
+DomainStructures.propTypes = {
+  domain: PropTypes.object.isRequired,
+};
+
+export const mapStateToProps = ({ domain }) => ({ domain });
+
+export default connect(mapStateToProps)(DomainStructures);

package/src/taxonomy/components/DomainTabs.js

@@ -10,6 +10,7 @@ import {
   DOMAIN,
   DOMAIN_CONCEPTS,
   DOMAIN_MEMBERS,
+  DOMAIN_STRUCTURES,
   linkTo,
 } from "@truedat/core/routes";
 
@@ -42,6 +43,15 @@ const DomainTabs = ({ domain }) => {
       >
         <FormattedMessage id="tabs.concepts" />
       </Menu.Item>
+
+      <Menu.Item
+        active={path === DOMAIN_STRUCTURES}
+        as={Link}
+        to={linkTo.DOMAIN_STRUCTURES({ id })}
+        replace
+      >
+        <FormattedMessage id="tabs.structures" />
+      </Menu.Item>
     </Menu>
   );
 };