@truedat/dd 4.51.2 → 4.51.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [4.51.3] 2022-09-16
+
+### Changed
+
+- [TD-4794] Replace `DomainDropdownSelector` and `DomainMenuSelector` with
+  common `DomainSelector`
+
 ## [4.50.4] 2022-08-31
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.51.2",
+  "version": "4.51.3",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.47.9",
+    "@truedat/test": "4.51.3",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.6.4",
-    "@truedat/auth": "4.51.2",
-    "@truedat/core": "4.51.2",
-    "@truedat/df": "4.51.2",
+    "@truedat/auth": "4.51.3",
+    "@truedat/core": "4.51.3",
+    "@truedat/df": "4.51.3",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -112,5 +112,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "9bdc76f3ee59a6e28fb2312e26d0cba2807f069b"
+  "gitHead": "69d6cf8f7379eb2ef5744a4fdd357a7dd662b115"
 }

package/src/api/queries.js

@@ -95,3 +95,27 @@ export const LATEST_GRANT_REQUEST_QUERY = gql`
     }
   }
 `;
+
+export const STRUCTURE_NOTES_QUERY = gql`
+  query StructureNotes($filter: StructureNotesFilter) {
+    structureNotes(filter: $filter) {
+      id
+      status
+      dataStructure {
+        id
+        currentVersion {
+          id
+          name
+          path
+          version
+        }
+        system {
+          name
+        }
+        domains {
+          name
+        }
+      }
+    }
+  }
+`;

package/src/api.js

@@ -43,7 +43,6 @@ const API_STRUCTURES_UPLOAD_EVENTS =
   "/api/data_structures/bulk_update_template_content_events";
 const API_STRUCTURE_NOTE = "/api/data_structures/:data_structure_id/notes/:id";
 const API_STRUCTURE_NOTES = "/api/data_structures/:data_structure_id/notes";
-const API_UNIT_DOMAINS = "/api/unit_domains";
 
 export {
   API_DATA_STRUCTURE,
@@ -88,5 +87,4 @@ export {
   API_STRUCTURES_UPLOAD_EVENTS,
   API_STRUCTURE_NOTE,
   API_STRUCTURE_NOTES,
-  API_UNIT_DOMAINS,
 };

package/src/components/DictionaryRoutes.js

@@ -33,10 +33,6 @@ const TemplatesLoader = React.lazy(() =>
   import("@truedat/df/templates/components/TemplatesLoader")
 );
 
-const DomainsLoader = React.lazy(() =>
-  import("@truedat/bg/taxonomy/components/DomainsLoader")
-);
-
 const Loaders = () => (
   <>
     <StructuresLoader />
@@ -93,7 +89,6 @@ export const DictionaryRoutes = () => {
         render={() => (
           <>
             <SystemsLoader />
-            <DomainsLoader />
             <PendingStructureNotes />
           </>
         )}

package/src/components/EditDomainForm.js

@@ -12,8 +12,7 @@ import { linkTo } from "@truedat/core/routes";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
-import { DomainMenuSelector } from "@truedat/bg/taxonomy/components/DomainMenuSelector";
-import { getDomainSelectorOptions } from "@truedat/bg/taxonomy/selectors";
+import { DomainSelector } from "@truedat/core/components";
 import { updateStructure } from "../routines";
 
 export const EditDomainForm = ({
@@ -21,9 +20,9 @@ export const EditDomainForm = ({
   title,
   updateStructure,
   structure,
-  domainOptions,
 }) => {
   const { formatMessage } = useIntl();
+  const [loading, setLoading] = useState(true);
   const [domainIds, setDomainIds] = useState(structure?.domain_ids || []);
   const [inherit, setInherit] = useState(true);
 
@@ -34,23 +33,22 @@ export const EditDomainForm = ({
     updateStructure({ data_structure, inherit, redirect });
   };
 
-  const handleDomainSelected = (e, { value }) => {
-    setDomainIds(value);
-  };
-
   return (
     <Container style={{ width: "400px" }}>
       <Header as="h2" content={title} />
 
       <Form onSubmit={saving ? null : onSubmit}>
-        <Segment>
-          <DomainMenuSelector
-            domainOptions={domainOptions}
-            onChange={handleDomainSelected}
+        <Segment loading={loading}>
+          <DomainSelector
+            action="manageStructuresDomain"
+            label={formatMessage({ id: "domain.multiple.placeholder" })}
+            labels
+            multiple
+            onChange={(_e, { value }) => setDomainIds(value)}
+            onLoad={() => setLoading(false)}
             value={domainIds}
           />
         </Segment>
-
         <Checkbox
           label={formatMessage({
             id: "structureDomain.actions.update.inherit",
@@ -66,6 +64,7 @@ export const EditDomainForm = ({
             type="submit"
             loading={saving}
             disabled={
+              loading ||
               saving ||
               _.isEmpty(domainIds) ||
               domainIds == [structure?.domain_ids]
@@ -80,19 +79,15 @@ export const EditDomainForm = ({
 };
 
 EditDomainForm.propTypes = {
-  domainOptions: PropTypes.array,
   structure: PropTypes.object,
   updateStructure: PropTypes.func,
   title: PropTypes.string,
   saving: PropTypes.bool,
 };
 
-const mapStateToProps = (state) => {
-  return {
-    structure: _.pick(["id", "domain_ids"])(state.structure),
-    saving: state.structureUpdating,
-    domainOptions: getDomainSelectorOptions(state),
-  };
-};
+const mapStateToProps = ({ structure, structureUpdating }) => ({
+  structure: _.pick(["id", "domain_ids"])(structure),
+  saving: structureUpdating,
+});
 
 export default connect(mapStateToProps, { updateStructure })(EditDomainForm);

package/src/components/LineageForm.js

@@ -11,16 +11,15 @@ import {
   Header,
   Button,
 } from "semantic-ui-react";
+import { DomainSelector } from "@truedat/core/components";
 import {
   clearNodes,
   selectGroup,
   fetchNodes,
-  fetchUnitDomains,
   createGraph,
   selectResources,
 } from "../routines";
 import {
-  getDomainOptions,
   groupOptionsSelector,
   resourceOptionsSelector,
   levelsSelection,
@@ -28,17 +27,10 @@ import {
 } from "../selectors";
 import LineageDownloadButton from "./LineageDownloadButton";
 
-const DomainDropdownSelector = React.lazy(() =>
-  import("@truedat/bg/taxonomy/components/DomainDropdownSelector")
-);
-
 export const LineageForm = ({
-  domain,
-  domainOptions,
   createGraph,
   clearNodes,
   fetchNodes,
-  fetchUnitDomains,
   graph,
   graphLoading,
   groupOptions,
@@ -51,6 +43,7 @@ export const LineageForm = ({
   selectedGroups,
   selectedResources,
 }) => {
+  const [domainId, setDomainId] = useState(null);
   const [open, setOpen] = useState(true);
   const [selectLevels, setSelectLevels] = useState(levelsSelection);
   const [levels, setLevels] = useState(lineageLevels);
@@ -67,11 +60,8 @@ export const LineageForm = ({
     selectLevels === "all" && setLevels();
   }, [selectLevels]);
   useEffect(() => {
-    _.isEmpty(groupOptions) && fetchUnitDomains();
-  }, [fetchUnitDomains, groupOptions]);
-  useEffect(() => {
-    domain && _.isEmpty(groupOptions) && fetchNodes({ domain_id: domain.id });
-  }, [domain, fetchNodes, groupOptions]);
+    domainId && _.isEmpty(groupOptions) && fetchNodes({ domain_id: domainId });
+  }, [domainId, fetchNodes, groupOptions]);
   useEffect(() => {
     return () => {
       clearNodes();
@@ -86,11 +76,15 @@ export const LineageForm = ({
     _.isInteger(intValue) && setLevels(intValue);
     _.isEmpty(value) && setLevels();
   };
-  const onDomainChange = (e, { value }) => {
+
+  const handleDomainChange = (e, { value }) => {
     e && e.preventDefault();
     e && e.stopPropagation();
-    _.isNumber(value) && fetchNodes({ domain_id: value });
-    _.isString(value) && _.isEmpty(value) && clearNodes();
+    if (_.isEmpty(value)) {
+      clearNodes();
+    } else {
+      fetchNodes({ domain_id: value });
+    }
   };
 
   const handleKeyDown = (e) => {
@@ -99,6 +93,12 @@ export const LineageForm = ({
     }
   };
 
+  const handleDomainsLoaded = ({ domains }) => {
+    if (domains?.length == 1) {
+      setDomainId(domains[0].id);
+    }
+  };
+
   return (
     <Segment>
       <Accordion>
@@ -117,13 +117,12 @@ export const LineageForm = ({
         </Accordion.Title>
         <Accordion.Content active={open}>
           <Form size="small" loading={loading}>
-            {!domain && (
-              <DomainDropdownSelector
-                domainOptions={domainOptions}
-                hideLabel
-                onChange={onDomainChange}
-              />
-            )}
+            <DomainSelector
+              action="viewLineage"
+              labels
+              onChange={handleDomainChange}
+              onLoad={handleDomainsLoaded}
+            />
             {_.map.convert({ cap: false })((options, level) => (
               <Form.Dropdown
                 key={level}
@@ -254,12 +253,9 @@ export const LineageForm = ({
 };
 
 LineageForm.propTypes = {
-  domain: PropTypes.object,
-  domainOptions: PropTypes.array,
   clearNodes: PropTypes.func.isRequired,
   createGraph: PropTypes.func.isRequired,
   fetchNodes: PropTypes.func,
-  fetchUnitDomains: PropTypes.func,
   graph: PropTypes.object,
   graphLoading: PropTypes.bool,
   groupOptions: PropTypes.array,
@@ -273,13 +269,7 @@ LineageForm.propTypes = {
   selectedResources: PropTypes.array,
 };
 
-const getDefaultDomain = (domains) => {
-  const filtered = _.filter((d) => !_.isNil(d.unit))(domains);
-  return _.size(filtered) == 1 && _.head(filtered);
-};
 const mapStateToProps = (state) => ({
-  domain: getDefaultDomain(state.unitDomains),
-  domainOptions: getDomainOptions(state),
   groupOptions: groupOptionsSelector(state),
   resourceOptions: resourceOptionsSelector(state),
   levelsSelection: levelsSelection(state),
@@ -295,7 +285,6 @@ export default connect(mapStateToProps, {
   clearNodes,
   createGraph,
   fetchNodes,
-  fetchUnitDomains,
   selectGroup,
   selectResources,
 })(LineageForm);

package/src/components/PendingStructureNoteRow.js

@@ -9,15 +9,12 @@ import { linkTo } from "@truedat/core/routes";
 const PendingStructureNoteRow = ({ structureNote }) => {
   const { formatMessage } = useIntl();
   const history = useHistory();
-  const dataStructure = _.prop("data_structure")(structureNote);
-  const path = _.propOr(
-    [],
-    "data_structure.current_version.path"
-  )(structureNote);
-  const name = _.prop("data_structure.current_version.name")(structureNote);
-  const system = _.prop("data_structure.system.name")(structureNote);
+  const dataStructure = structureNote?.dataStructure;
+  const path = _.propOr([], "dataStructure.currentVersion.path")(structureNote);
+  const name = dataStructure?.currentVersion?.name;
+  const system = dataStructure?.system?.name;
   const domainsNames = _.flow(
-    _.prop("data_structure.domains"),
+    _.prop("dataStructure.domains"),
     _.map("name")
   )(structureNote);
 

package/src/components/PendingStructureNotes.js

@@ -3,51 +3,26 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { FormattedMessage, useIntl } from "react-intl";
-import { gql, useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client";
 import { Checkbox, Form, Header, Icon, Segment } from "semantic-ui-react";
 import { useForm, Controller } from "react-hook-form";
+import { DomainSelector } from "@truedat/core/components";
+import { STRUCTURE_NOTES_QUERY } from "../api/queries";
 import PendingStructureNotesTable from "./PendingStructureNotesTable";
 
-const DomainDropdownSelector = React.lazy(() =>
-  import("@truedat/bg/taxonomy/components/DomainDropdownSelector")
-);
-
-export const STRUCTURE_NOTES = gql`
-  query STRUCTURE_NOTES($filter: StructureNotesFilter) {
-    structure_notes(filter: $filter) {
-      id
-      status
-      data_structure {
-        id
-        current_version {
-          id
-          name
-          path
-          version
-        }
-        system {
-          name
-        }
-        domains {
-          name
-        }
-      }
-    }
-  }
-`;
-
 const STATUS = ["pending_approval", "draft", "rejected"];
 
 export const PendingStructureNotes = ({ systems }) => {
   const { formatMessage } = useIntl();
+  const [domainsLoading, setDomainsLoading] = useState(true);
   const [filter, setFilter] = useState({
     statuses: STATUS,
   });
-  const { loading, error, data } = useQuery(STRUCTURE_NOTES, {
+  const { loading, error, data } = useQuery(STRUCTURE_NOTES_QUERY, {
     variables: { filter },
     fetchPolicy: "cache-and-network",
   });
-  const items = loading || error ? [] : data?.structure_notes;
+  const items = loading || error ? [] : data?.structureNotes;
   const { control } = useForm({
     mode: "all",
     defaultValues: {
@@ -66,7 +41,7 @@ export const PendingStructureNotes = ({ systems }) => {
           </Header.Subheader>
         </Header.Content>
       </Header>
-      <Form>
+      <Form loading={domainsLoading}>
         <Header
           as="h5"
           content={formatMessage({ id: "pendingStructureNotes.filters" })}
@@ -104,6 +79,24 @@ export const PendingStructureNotes = ({ systems }) => {
             </Form.Field>
           )}
         />
+        <Controller
+          control={control}
+          name="domain_ids"
+          render={({ field: { onChange, value } }) => (
+            <DomainSelector
+              label={formatMessage({ id: "domain.selector.label" })}
+              labels
+              action="publishStructureNote"
+              value={value}
+              onChange={(_e, { value }) => {
+                const domain_ids = _.isEmpty(value) ? [] : [value];
+                setFilter({ ...filter, domain_ids });
+                onChange(value);
+              }}
+              onLoad={() => setDomainsLoading(false)}
+            />
+          )}
+        />
         <Controller
           control={control}
           name="system_ids"
@@ -129,20 +122,6 @@ export const PendingStructureNotes = ({ systems }) => {
             />
           )}
         />
-        <Controller
-          control={control}
-          name="domain_ids"
-          render={({ field: { onChange, value } }) => (
-            <DomainDropdownSelector
-              value={value}
-              onChange={(_e, { value }) => {
-                const domain_ids = _.isNumber(value) ? [value] : [];
-                setFilter({ ...filter, domain_ids });
-                onChange(value);
-              }}
-            />
-          )}
-        />
       </Form>
       <PendingStructureNotesTable structureNotes={items} loading={loading} />
     </Segment>

package/src/components/PendingStructureNotesTable.js

@@ -1,67 +1,56 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { Table, Header, Icon } from "semantic-ui-react";
 import PendingStructureNoteRow from "./PendingStructureNoteRow";
 
 const PendingStructureNotesTable = ({ structureNotes, loading }) => {
-  return (
-    <>
-      {!_.isEmpty(structureNotes) && (
-        <Table selectable>
-          <Table.Header>
-            <Table.Row>
-              <Table.HeaderCell
-                content={
-                  <FormattedMessage
-                    id={"pendingStructureNotes.props.structure"}
-                  />
-                }
-              />
-              <Table.HeaderCell
-                content={
-                  <FormattedMessage id={"pendingStructureNotes.props.status"} />
-                }
-              />
-              <Table.HeaderCell
-                content={
-                  <FormattedMessage id={"pendingStructureNotes.props.system"} />
-                }
-              />
-              <Table.HeaderCell
-                content={
-                  <FormattedMessage
-                    id={"pendingStructureNotes.props.domains"}
-                  />
-                }
-              />
-              <Table.HeaderCell
-                content={
-                  <FormattedMessage id={"pendingStructureNotes.props.path"} />
-                }
-              />
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            {structureNotes.map((structureNote, key) => (
-              <PendingStructureNoteRow
-                key={key}
-                structureNote={structureNote}
-              />
-            ))}
-          </Table.Body>
-        </Table>
-      )}
-      {_.isEmpty(structureNotes) && !loading && (
-        <Header as="h4">
-          <Icon name="search" />
-          <Header.Content>
-            <FormattedMessage id="pendingStructureNotes.search.results.empty" />
-          </Header.Content>
-        </Header>
-      )}
-    </>
+  const { formatMessage } = useIntl();
+  return loading ? null : _.isEmpty(structureNotes) ? (
+    <Header as="h4">
+      <Icon name="search" />
+      <Header.Content>
+        <FormattedMessage id="pendingStructureNotes.search.results.empty" />
+      </Header.Content>
+    </Header>
+  ) : (
+    <Table selectable>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell
+            content={formatMessage({
+              id: "pendingStructureNotes.props.structure",
+            })}
+          />
+          <Table.HeaderCell
+            content={formatMessage({
+              id: "pendingStructureNotes.props.status",
+            })}
+          />
+          <Table.HeaderCell
+            content={formatMessage({
+              id: "pendingStructureNotes.props.system",
+            })}
+          />
+          <Table.HeaderCell
+            content={formatMessage({
+              id: "pendingStructureNotes.props.domains",
+            })}
+          />
+          <Table.HeaderCell
+            content={formatMessage({
+              id: "pendingStructureNotes.props.path",
+            })}
+          />
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {structureNotes.map((structureNote, key) => (
+          <PendingStructureNoteRow key={key} structureNote={structureNote} />
+        ))}
+      </Table.Body>
+    </Table>
   );
 };
 

package/src/components/StructuresRoutes.js

@@ -11,7 +11,6 @@ import {
   STRUCTURE_EVENTS,
   STRUCTURE_VERSION,
 } from "@truedat/core/routes";
-import DomainsLoader from "@truedat/bg/taxonomy/components/DomainsLoader";
 import StructureCrumbs from "./StructureCrumbs";
 import StructureLoader from "./StructureLoader";
 import UserSearchFiltersLoader from "./UserSearchFiltersLoader";
@@ -122,16 +121,7 @@ export const StructuresRoutes = () => {
   return (
     <Route
       path={STRUCTURES}
-      render={() =>
-        authorized ? (
-          <>
-            <AuthorizedRoutes />
-            <DomainsLoader actions="manage_structures_domain" />
-          </>
-        ) : (
-          <Unauthorized />
-        )
-      }
+      render={() => (authorized ? <AuthorizedRoutes /> : <Unauthorized />)}
     />
   );
 };