@truedat/dd 4.40.12 → 4.41.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.41.0] 2022-03-25
+
+### Added
+
+- [TD-4535] Structures domains CSV upload bulk update
+
+## [4.40.14] 2022-03-22
+
+### Added
+
+- [TD-4577] View for Pending `StructureNotes`
+
 ## [4.40.10] 2022-03-21
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.40.12",
+  "version": "4.41.0",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.40.12",
+    "@truedat/test": "4.41.0",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -84,9 +84,9 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.40.12",
-    "@truedat/core": "4.40.12",
-    "@truedat/df": "4.40.12",
+    "@truedat/auth": "4.41.0",
+    "@truedat/core": "4.41.0",
+    "@truedat/df": "4.41.0",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.7.2",
@@ -107,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "f8f89f659e97ba1eeb39d9f86c9b8c2c8934518a"
+  "gitHead": "f4d8bc5e536b847c7b562a84bfa70955a93166ea"
 }

package/src/api.js

@@ -31,6 +31,8 @@ const API_STRUCTURE_TAG = "/api/data_structure_tags/:id";
 const API_STRUCTURE_TAGS = "/api/data_structure_tags";
 const API_STRUCTURE_TYPE = "/api/data_structure_types/:id";
 const API_STRUCTURE_TYPES = "/api/data_structure_types";
+const API_STRUCTURES_DOMAINS_UPLOAD =
+  "/api/data_structures/bulk_upload_domains";
 const API_STRUCTURES_TAG = "/api/data_structures/:data_structure_id/tags/:id";
 const API_STRUCTURES_TAGS = "/api/data_structures/:data_structure_id/tags";
 const API_USER_SEARCH_FILTERS = "/api/user_search_filters";
@@ -79,6 +81,7 @@ export {
   API_USER_SEARCH_FILTERS,
   API_USER_SEARCH_FILTER,
   API_GET_USER_SEARCH_FILTERS,
+  API_STRUCTURES_DOMAINS_UPLOAD,
   API_STRUCTURES_TAG,
   API_STRUCTURES_TAGS,
   API_STRUCTURES_UPLOAD,

package/src/components/DictionaryRoutes.js

@@ -2,13 +2,15 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 import { useActiveRoute } from "@truedat/core/hooks";
 import {
+  PENDING_STRUCTURE_NOTES,
   PROFILE_EXECUTION,
   PROFILE_GROUP,
-  STRUCTURES,
   STRUCTURE_TAGS,
   STRUCTURE_TYPES,
+  STRUCTURES,
   SYSTEMS,
 } from "@truedat/core/routes";
+import PendingStructureNotes from "./PendingStructureNotes";
 import ProfileExecution from "./ProfileExecution";
 import ProfileExecutionBreadcrumbs from "./ProfileExecutionBreadcrumbs";
 import ProfileExecutionLoader from "./ProfileExecutionLoader";
@@ -27,6 +29,10 @@ const TemplatesLoader = React.lazy(() =>
   import("@truedat/df/templates/components/TemplatesLoader")
 );
 
+const DomainsLoader = React.lazy(() =>
+  import("@truedat/bg/taxonomy/components/DomainsLoader")
+);
+
 const Loaders = () => (
   <>
     <StructuresLoader />
@@ -82,6 +88,16 @@ export const DictionaryRoutes = () => {
           </>
         )}
       />
+      <Route
+        path={PENDING_STRUCTURE_NOTES}
+        render={() => (
+          <>
+            <SystemsLoader />
+            <DomainsLoader />
+            <PendingStructureNotes />
+          </>
+        )}
+      />
       <Route
         path={PROFILE_GROUP}
         render={() => (

package/src/components/PendingStructureNoteRow.js

@@ -0,0 +1,45 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Table } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { useHistory } from "react-router-dom";
+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 domainsNames = _.flow(
+    _.prop("data_structure.domains"),
+    _.map("name")
+  )(structureNote);
+
+  return (
+    <Table.Row
+      onClick={() => history.push(linkTo.STRUCTURE_NOTES(dataStructure))}
+    >
+      <Table.Cell content={name} />
+      <Table.Cell
+        content={formatMessage({
+          id: `structure.notes.status.${structureNote.status}`,
+        })}
+      />
+      <Table.Cell content={system} />
+      <Table.Cell content={domainsNames.join(", ")} />
+      <Table.Cell content={path.join(" > ")} />
+    </Table.Row>
+  );
+};
+
+PendingStructureNoteRow.propTypes = {
+  structureNote: PropTypes.object,
+};
+
+export default PendingStructureNoteRow;

package/src/components/PendingStructureNotes.js

@@ -0,0 +1,149 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import { FormattedMessage, useIntl } from "react-intl";
+import { gql, useQuery } from "@apollo/client";
+import { Checkbox, Form, Header, Icon, Segment } from "semantic-ui-react";
+import { useForm, Controller } from "react-hook-form";
+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 = () => {
+  const { formatMessage } = useIntl();
+  const { systems } = useSelector(_.pick(["systems"]));
+  const [filter, setFilter] = useState({
+    statuses: STATUS,
+  });
+  const { loading, error, data } = useQuery(STRUCTURE_NOTES, {
+    variables: { filter },
+    fetchPolicy: "network-only",
+  });
+  const items = loading || error ? [] : data?.structure_notes;
+  const { control } = useForm({
+    mode: "all",
+    defaultValues: {
+      status: STATUS,
+    },
+  });
+
+  return (
+    <Segment>
+      <Header as="h2">
+        <Icon name="sticky note outline" circular />
+        <Header.Content>
+          <FormattedMessage id="pendingStructureNotes.header" />
+          <Header.Subheader>
+            <FormattedMessage id="pendingStructureNotes.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+      <Form>
+        <Header
+          as="h5"
+          content={formatMessage({ id: "pendingStructureNotes.filters" })}
+        />
+        <Controller
+          control={control}
+          name="status"
+          render={({ onBlur, onChange, value }) => (
+            <Form.Field className="subscriptions-checkbox-filters">
+              <label>
+                {formatMessage({ id: "pendingStructureNotes.props.status" })}
+              </label>
+              {STATUS.map((type, idx) => (
+                <Checkbox
+                  onBlur={onBlur}
+                  key={idx}
+                  label={
+                    <label>
+                      {formatMessage({ id: `structure.notes.status.${type}` })}
+                    </label>
+                  }
+                  onChange={() => {
+                    const statuses = _.includes(type)(value)
+                      ? _.filter((t) => t !== type)(value)
+                      : [...value, type];
+                    setFilter({ ...filter, statuses });
+                    onChange(statuses);
+                  }}
+                  checked={_.includes(type)(value)}
+                />
+              ))}
+            </Form.Field>
+          )}
+        />
+        <Controller
+          control={control}
+          name="system_ids"
+          render={({ onBlur, onChange, value }) => (
+            <Form.Dropdown
+              label={formatMessage({
+                id: "pendingStructureNotes.props.system",
+              })}
+              onBlur={onBlur}
+              onChange={(e, { value }) => {
+                setFilter({ ...filter, system_ids: value });
+                onChange(value);
+              }}
+              options={systems.map(({ name, id }) => ({
+                text: name,
+                key: id,
+                value: id,
+              }))}
+              selection
+              clearable
+              multiple
+              value={value || []}
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="domain_ids"
+          render={({ 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>
+  );
+};
+
+export default PendingStructureNotes;

package/src/components/PendingStructureNotesTable.js

@@ -0,0 +1,73 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } 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>
+      )}
+    </>
+  );
+};
+
+PendingStructureNotesTable.propTypes = {
+  structureNotes: PropTypes.array,
+  loading: PropTypes.bool,
+};
+
+export default PendingStructureNotesTable;

package/src/components/StructuresDomainsUploadOption.js

@@ -0,0 +1,52 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Dropdown } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { UploadModal } from "@truedat/core/components";
+import { uploadStructuresDomains } from "../routines";
+
+export const StructuresDomainsUploadOption = ({
+  uploadStructuresDomains,
+  loading,
+}) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <UploadModal
+      icon="upload"
+      trigger={
+        <Dropdown.Item
+          icon="upload"
+          text={formatMessage({ id: "structures.actions.uploadDomains.tooltip" })}
+          disabled={loading}
+        />
+      }
+      header={formatMessage({
+        id: "structures.actions.uploadDomains.confirmation.header",
+      })}
+      content={formatMessage({
+        id: "structures.actions.uploadDomains.confirmation.content",
+      })}
+      param={"structures_domains"}
+      handleSubmit={(data) =>
+        uploadStructuresDomains({
+          data,
+        })
+      }
+    />
+  );
+};
+
+StructuresDomainsUploadOption.propTypes = {
+  uploadStructuresDomains: PropTypes.func,
+  loading: PropTypes.bool,
+};
+
+const mapStateToProps = ({ uploadingStructuresDomainsFile }) => ({
+  loading: uploadingStructuresDomainsFile,
+});
+
+export default connect(mapStateToProps, { uploadStructuresDomains })(
+  StructuresDomainsUploadOption
+);

package/src/components/StructuresOptions.js

@@ -6,10 +6,12 @@ import StructuresDownloadOption from "./StructuresDownloadOption";
 import StructuresEditableDownloadOption from "./StructuresEditableDownloadOption";
 import StructuresUpdateOption from "./StructuresUpdateOption";
 import StructuresUploadOption from "./StructuresUploadOption";
+import StructuresDomainsUploadOption from "./StructuresDomainsUploadOption";
 
 export const StructuresOptions = ({
   autoPublish,
   bulkUpload,
+  bulkUploadDomains,
   hasFilterApplied,
 }) => (
   <Dropdown
@@ -26,6 +28,7 @@ export const StructuresOptions = ({
       {bulkUpload ? (
         <StructuresUploadOption canAutoPublish={!!autoPublish} />
       ) : null}
+      {bulkUploadDomains ? <StructuresDomainsUploadOption /> : null}
       <Dropdown.Divider />
       <StructuresUpdateOption />
     </Dropdown.Menu>
@@ -35,6 +38,7 @@ export const StructuresOptions = ({
 StructuresOptions.propTypes = {
   autoPublish: PropTypes.object,
   bulkUpload: PropTypes.object,
+  bulkUploadDomains: PropTypes.object,
   hasFilterApplied: PropTypes.bool,
 };
 

package/src/components/__tests__/PendingStructureNoteRow.spec.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import PendingStructureNoteRow from "../PendingStructureNoteRow";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "pendingStructureNotes.search.results.empty": "Empty",
+      "pendingStructureNotes.props.structure": "Structure",
+      "pendingStructureNotes.props.status": "Status",
+      "pendingStructureNotes.props.system": "System",
+      "pendingStructureNotes.props.domains": "Domains",
+      "structure.notes.status.deprecated": "Deprecated",
+      "structure.notes.status.draft": "Draft",
+      "structure.notes.status.rejected": "Rejected",
+    },
+  },
+};
+
+const props = {
+  structureNote: {
+    id: "7207",
+    status: "draft",
+    data_structure: {
+      current_version: {
+        name: "bar",
+        path: ["bar rute"],
+      },
+      domains: [{ name: "bar domain" }],
+      system: { name: "bar system" },
+    },
+  },
+};
+
+describe("<PendingStructureNoteRow />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(
+      <PendingStructureNoteRow {...props} />,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+
+    await waitFor(() => {
+      expect(queryByText(/bar system/)).toBeTruthy();
+    });
+  });
+});

package/src/components/__tests__/PendingStructureNotes.spec.js

@@ -0,0 +1,102 @@
+import React, { Suspense } from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import {
+  PendingStructureNotes,
+  STRUCTURE_NOTES,
+} from "../PendingStructureNotes";
+
+jest.mock("react-redux", () => ({
+  ...jest.requireActual("react-redux"),
+  useSelector: jest.fn((selector) =>
+    selector({
+      systems: [
+        { external_id: "some_external_id", id: 10, name: "some system" },
+      ],
+    })
+  ),
+}));
+
+const domains = [
+  { id: 1, name: "Domain 1", level: 0 },
+  { id: 2, name: "Domain 2", level: 0 },
+];
+
+const messages = {
+  en: {
+    "structure.notes.status.pending_approval": "Empty",
+    "pendingStructureNotes.filters": "Filters",
+    "pendingStructureNotes.props.status": "Status",
+    "pendingStructureNotes.props.system": "System",
+    "pendingStructureNotes.props.domains": "Domains",
+    "structure.notes.status.draft": "Draft",
+    "structure.notes.status.rejected": "Rejected",
+    "pendingStructureNotes.header": "Header",
+    "pendingStructureNotes.subheader": "Sub header",
+    "pendingStructureNotes.search.results.empty": "Serch Empty",
+    "domain.selector.placeholder": "Place Holder",
+    "domain.selector.label": "label",
+    "template.form.validation.empty_required": "empty required",
+  },
+};
+
+const structureNotes = {
+  loading: false,
+  structureNotes: [
+    {
+      id: "7207",
+      status: "draft",
+      data_structure: {
+        current_version: {
+          name: "bar",
+          path: ["bar rute"],
+        },
+        domains: [{ name: "bar domain" }],
+        system: { name: "bar system" },
+      },
+    },
+    {
+      id: "665214",
+      status: "rejected",
+      data_structure: {
+        current_version: {
+          name: "foo",
+          path: ["foo rute", "other route"],
+        },
+        domains: [{ name: "foo domain 1" }, { name: "foo domain 2" }],
+        system: { name: "foo system" },
+      },
+    },
+  ],
+};
+
+const StructureNotesMock = {
+  request: { query: STRUCTURE_NOTES },
+  result: { data: { structureNotes } },
+};
+
+const renderOpts = {
+  mocks: [StructureNotesMock],
+  messages,
+  state: { domains },
+};
+
+describe("<PendingStructureNotes />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(
+      <Suspense fallback={null}>
+        <PendingStructureNotes />
+      </Suspense>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+
+    await waitFor(() => {
+      expect(queryByText(/some system/)).toBeTruthy();
+    });
+
+    await waitFor(() => {
+      expect(queryByText(/Domain 1/)).toBeTruthy();
+    });
+  });
+});