@truedat/dd 4.43.2 → 4.43.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.43.4] 2022-05-05
+
+### Added
+
+- [TD-4586] CSV bulk update events table
+
+## [4.43.3] 2022-05-04
+
+### Changed
+
+- [TD-3936] Updated `react-hook-form`
+
 ## [4.43.0] 2022-04-26
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.43.2",
+  "version": "4.43.5",
   "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.43.2",
+    "@truedat/test": "4.43.5",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -84,13 +84,13 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.43.2",
-    "@truedat/core": "4.43.2",
-    "@truedat/df": "4.43.2",
+    "@truedat/auth": "4.43.5",
+    "@truedat/core": "4.43.5",
+    "@truedat/df": "4.43.5",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.7.2",
-    "react-hook-form": "^6.15.8",
+    "react-hook-form": "^7.30.0",
     "react-intl": "^5.20.10",
     "react-moment": "^0.9.7",
     "react-redux": "^7.2.4",
@@ -107,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "26f59c4d36ab1ecfae705bbce4320ff443cce304"
+  "gitHead": "ab63882af7d0c31643f56b9c7eafca813763dd9e"
 }

package/src/api.js

@@ -40,6 +40,8 @@ const API_USER_SEARCH_FILTER = "/api/user_search_filters/:id";
 const API_GET_USER_SEARCH_FILTERS = "/api/user_search_filters/me";
 const API_STRUCTURES_UPLOAD =
   "/api/data_structures/bulk_update_template_content";
+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";
@@ -85,6 +87,7 @@ export {
   API_STRUCTURES_TAG,
   API_STRUCTURES_TAGS,
   API_STRUCTURES_UPLOAD,
+  API_STRUCTURES_UPLOAD_EVENTS,
   API_STRUCTURE_NOTE,
   API_STRUCTURE_NOTES,
   API_UNIT_DOMAINS,

package/src/components/DictionaryRoutes.js

@@ -8,6 +8,7 @@ import {
   STRUCTURE_TAGS,
   STRUCTURE_TYPES,
   STRUCTURES,
+  STRUCTURES_UPLOAD_EVENTS,
   SYSTEMS,
 } from "@truedat/core/routes";
 import PendingStructureNotes from "./PendingStructureNotes";
@@ -19,6 +20,7 @@ import ProfileGroup from "./ProfileGroup";
 import StructureFiltersLoader from "./StructureFiltersLoader";
 import StructuresLoader from "./StructuresLoader";
 import StructuresRoutes from "./StructuresRoutes";
+import StructuresUploadEvents from "./StructuresUploadEvents";
 import StructureTypesLoader from "./StructureTypesLoader";
 import StructureTagsRoutes from "./StructureTagsRoutes";
 import StructureTypesRoutes from "./StructureTypesRoutes";
@@ -88,6 +90,14 @@ export const DictionaryRoutes = () => {
           </>
         )}
       />
+      <Route
+        path={STRUCTURES_UPLOAD_EVENTS}
+        render={() => (
+          <>
+            <StructuresUploadEvents />
+          </>
+        )}
+      />
       <Route
         path={PENDING_STRUCTURE_NOTES}
         render={() => (

package/src/components/GrantRequestApprovalForm.js

@@ -55,7 +55,10 @@ export const GrantRequestApprovalForm = ({
           control={control}
           name="role"
           rules={{ validate: (v) => !_.isEmpty(v) }}
-          render={({ onBlur, onChange, value }, { invalid }) => (
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
             <Form.Dropdown
               placeholder={formatMessage({
                 id: "grantRequestApproval.form.role.placeholder",
@@ -63,7 +66,7 @@ export const GrantRequestApprovalForm = ({
               label={formatMessage({
                 id: "grantRequestApproval.form.role.label",
               })}
-              error={invalid}
+              error={!!error}
               onBlur={onBlur}
               value={value}
               onChange={(_, { value }) => onChange(value)}
@@ -76,7 +79,10 @@ export const GrantRequestApprovalForm = ({
         <Controller
           control={control}
           name="comment"
-          render={({ onBlur, onChange, value }, { invalid }) => (
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
             <Form.TextArea
               data-testid="comment-id"
               label={formatMessage({
@@ -87,7 +93,7 @@ export const GrantRequestApprovalForm = ({
               })}
               value={value}
               onBlur={onBlur}
-              error={invalid}
+              error={!!error}
               onChange={(_, { value }) => onChange(value)}
             />
           )}

package/src/components/LinkStructureTagForm.js

@@ -16,7 +16,7 @@ export const LinkStructureTagForm = ({
   linkStructureTag,
   structureId,
   structureTags,
-  tagId
+  tagId,
 }) => {
   const { formatMessage } = useIntl();
   const allTags = _.map("id")(structureTags);
@@ -39,11 +39,11 @@ export const LinkStructureTagForm = ({
   const submitTitle = _.isNil(tagId)
     ? "structure.tag.add"
     : "structure.tag.edit";
-  const onSubmit = params => {
+  const onSubmit = (params) => {
     const payload = {
       structureId,
       tagId: params.tag,
-      tag: { description: params.description }
+      tag: { description: params.description },
     };
     linkStructureTag(payload);
   };
@@ -52,8 +52,8 @@ export const LinkStructureTagForm = ({
     mode: "all",
     defaultValues: {
       description: description || "",
-      tag: defaultTag
-    }
+      tag: defaultTag,
+    },
   });
   const { isDirty, isValid } = formState;
   return (
@@ -63,13 +63,16 @@ export const LinkStructureTagForm = ({
           control={control}
           name="tag"
           rules={{ required: true }}
-          render={({ onBlur, onChange, value }, { invalid }) => (
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
             <Form.Dropdown
               name="tag"
               disabled={_.negate(_.isNil)(tagId)}
-              error={invalid}
+              error={!!error}
               placeholder={formatMessage({
-                id: "structure.tag.dropdown.placeholder"
+                id: "structure.tag.dropdown.placeholder",
               })}
               label={formatMessage({ id: "structure.tag.dropdown.label" })}
               onBlur={onBlur}
@@ -86,14 +89,17 @@ export const LinkStructureTagForm = ({
           control={control}
           name="description"
           rules={{ required: true }}
-          render={({ onBlur, onChange, value }, { invalid }) => (
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
             <Form.TextArea
               data-testid="description-id"
-              error={invalid}
+              error={!!error}
               name="description"
               label={formatMessage({ id: "structure.tag.textArea.label" })}
               placeholder={formatMessage({
-                id: "structure.tag.textArea.placeholder"
+                id: "structure.tag.textArea.placeholder",
               })}
               onBlur={onBlur}
               onChange={(_e, { value }) => onChange(value)}
@@ -130,22 +136,22 @@ LinkStructureTagForm.propTypes = {
   linkStructureTag: PropTypes.func,
   structureId: PropTypes.number,
   structureTags: PropTypes.array,
-  tagId: PropTypes.number
+  tagId: PropTypes.number,
 };
 
 const mapStateToProps = ({
   linkedStructureTags,
   structure,
-  structureTags
+  structureTags,
 }) => ({
   linkedStructureTags,
   structureId: _.prop("id")(structure),
-  structureTags
+  structureTags,
 });
 
 const mapDispatchToProps = {
   deleteLinkStructureTag,
-  linkStructureTag
+  linkStructureTag,
 };
 
 export default connect(

package/src/components/MetadataFiltersInput.js

@@ -12,7 +12,7 @@ export const MetadataFiltersInput = ({ control, fieldOptions, fields }) => {
       control={control}
       name="filters"
       defaultValue={_.isArray(fields) ? fields : []}
-      render={({ onBlur, onChange, value }) => (
+      render={({ field: { onBlur, onChange, value } }) => (
         <Form.Dropdown
           name="filters"
           label={formatMessage({ id: "structureType.filters" })}

package/src/components/MetadataViewForm.js

@@ -26,7 +26,7 @@ export const MetadataViewForm = ({
         control={control}
         name={`metadata_views.${idx}.name`}
         defaultValue={name || ""}
-        render={({ onBlur, onChange, value }) => (
+        render={({ field: { onBlur, onChange, value } }) => (
           <Form.Input
             autoComplete="off"
             name={`metadata_views.${idx}.name`}
@@ -45,7 +45,7 @@ export const MetadataViewForm = ({
         control={control}
         name={`metadata_views.${idx}.fields`}
         defaultValue={_.isArray(fields) ? fields : []}
-        render={({ onBlur, onChange, value }) => (
+        render={({ field: { onBlur, onChange, value } }) => (
           <Form.Dropdown
             name={`metadata_views.${idx}.fields`}
             label={formatMessage({ id: "metadataView.fields" })}

package/src/components/MyGrantRequests.js

@@ -50,7 +50,7 @@ export const MyGrantRequests = ({
         <Controller
           control={control}
           name="status"
-          render={({ onBlur, onChange, value }) => (
+          render={({ field: { onBlur, onChange, value } }) => (
             <Form.Field className="subscriptions-checkbox-filters">
               <label>
                 {formatMessage({ id: "grantRequest.header.status" })}

package/src/components/PendingStructureNotes.js

@@ -74,7 +74,7 @@ export const PendingStructureNotes = () => {
         <Controller
           control={control}
           name="status"
-          render={({ onBlur, onChange, value }) => (
+          render={({ field: { onBlur, onChange, value } }) => (
             <Form.Field className="subscriptions-checkbox-filters">
               <label>
                 {formatMessage({ id: "pendingStructureNotes.props.status" })}
@@ -104,7 +104,7 @@ export const PendingStructureNotes = () => {
         <Controller
           control={control}
           name="system_ids"
-          render={({ onBlur, onChange, value }) => (
+          render={({ field: { onBlur, onChange, value } }) => (
             <Form.Dropdown
               label={formatMessage({
                 id: "pendingStructureNotes.props.system",
@@ -129,7 +129,7 @@ export const PendingStructureNotes = () => {
         <Controller
           control={control}
           name="domain_ids"
-          render={({ onChange, value }) => (
+          render={({ field: { onChange, value } }) => (
             <DomainDropdownSelector
               value={value}
               onChange={(_e, { value }) => {

package/src/components/StructureTagForm.js

@@ -37,10 +37,13 @@ export const StructureTagForm = ({
         control={control}
         name="name"
         rules={{ required: true }}
-        render={({ onBlur, onChange, value }, { invalid }) => (
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
           <Form.Input
             autoComplete="off"
-            error={invalid}
+            error={!!error}
             id="name"
             label={formatMessage({ id: "structureTagForm.props.name" })}
             onBlur={onBlur}

package/src/components/StructureTypeForm.js

@@ -62,7 +62,7 @@ export const StructureTypeForm = ({
         control={control}
         defaultValue=""
         name="translation"
-        render={({ onBlur, onChange, value }) => (
+        render={({ field: { onBlur, onChange, value } }) => (
           <Form.Input
             autoComplete="off"
             label={formatMessage({ id: "structureType.translation" })}
@@ -77,7 +77,7 @@ export const StructureTypeForm = ({
         control={control}
         name="template_id"
         defaultValue=""
-        render={({ onBlur, onChange, value }) => (
+        render={({ field: { onBlur, onChange, value } }) => (
           <Form.Dropdown
             label={formatMessage({ id: "structureType.template" })}
             name="template_id"

package/src/components/StructuresUploadEvents.js

@@ -0,0 +1,38 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Header, Icon, Segment, Dimmer, Loader } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import StructuresUploadEventsTable from "./StructuresUploadEventsTable";
+
+export const StructuresUploadEvents = ({ structuresUploadEventsLoading }) => (
+  <Segment>
+    <Header as="h2">
+      <Icon circular name="cogs" />
+      <Header.Content>
+        <FormattedMessage id="structures.bulkUploadEvents.header" />
+        <Header.Subheader>
+          <FormattedMessage id="structures.bulkUploadEvents.subheader" />
+        </Header.Subheader>
+      </Header.Content>
+    </Header>
+    <Dimmer.Dimmable dimmed={structuresUploadEventsLoading}>
+      <Segment attached="bottom">
+        <StructuresUploadEventsTable />
+        <Dimmer inverted active={structuresUploadEventsLoading}>
+          <Loader />
+        </Dimmer>
+      </Segment>
+    </Dimmer.Dimmable>
+  </Segment>
+);
+
+StructuresUploadEvents.propTypes = {
+  structuresUploadEventsLoading: PropTypes.bool,
+};
+
+const mapStateToProps = ({ structuresUploadEventsLoading }) => ({
+  structuresUploadEventsLoading,
+});
+
+export default connect(mapStateToProps)(StructuresUploadEvents);

package/src/components/StructuresUploadEventsTable.js

@@ -0,0 +1,183 @@
+import _ from "lodash/fp";
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { Header, Icon, Table } from "semantic-ui-react";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { columnDecorator } from "@truedat/core/services";
+import { fetchStructuresUploadEvents } from "../routines";
+import { getStructuresUploadEventColumns } from "../selectors";
+
+import "../styles/structuresUploadEventColumns.less";
+
+export const getColumnsWithData = (ruleResults, columns) =>
+  _.filter((column) =>
+    _.any(_.flow(columnDecorator(column), _.negate(_.isEmpty)))(ruleResults)
+  )(columns);
+
+export const StructuresUploadEventsTable = ({
+  columns,
+  fetchStructuresUploadEvents,
+  structuresUploadEvents,
+  structuresUploadEventsLoading,
+}) => {
+  const { formatMessage } = useIntl();
+  const [events, setEvents] = useState();
+
+  useEffect(() => {
+    fetchStructuresUploadEvents();
+  }, [fetchStructuresUploadEvents]);
+
+  const messagesImp = (data) => {
+    return _.has("errors")(data)
+      ? _.flow(
+          _.propOr([], "errors"),
+          _.map((error) => ({
+            id: `structures.bulkUpdateStructures.failed.note.${error.message}`,
+            fields: {
+              row: error.row,
+              id: error.id,
+              field: error.field,
+              externalId: error.external_id,
+              message: error.message,
+            },
+            defaultMessage: "structures.bulkUploadStructures.success.errors",
+          }))
+        )(data)
+      : [];
+  };
+
+  useEffect(() => {
+    const events = _.reduce(
+      (acc, event) => ({
+        ...acc,
+        [`${event.task_reference}_${event.status}`]: {
+          ...event,
+          response: {
+            ...event.response,
+            translatedHeader: !event.response
+              ? ""
+              : formatMessage(
+                  { id: "structures.bulkUpdateStructures.success.header" },
+                  {
+                    count_ids: event.response.ids.length,
+                    count_errors: event.response.errors.length,
+                  }
+                ),
+            translatedErrors: _.map((error) => {
+              return formatMessage({ id: error.id }, error.fields);
+            })(messagesImp(event.response)),
+          },
+          expanded: false,
+        },
+      }),
+      {},
+      structuresUploadEvents
+    );
+
+    setEvents(events);
+  }, [structuresUploadEvents, formatMessage]);
+
+  const toggleExpanded = (eventKey) => {
+    setEvents({
+      ...events,
+      [eventKey]: {
+        ...events[eventKey],
+        expanded: !events[eventKey].expanded,
+      },
+    });
+  };
+
+  return (
+    <>
+      {!_.isEmpty(events) && (
+        <Table sortable selectable>
+          <Table.Header>
+            <Table.Row>
+              {columns.map((column, i) => {
+                return (
+                  <Table.HeaderCell
+                    key={i}
+                    width={column.width}
+                    content={formatMessage({
+                      id: `structures.bulkUploadEvents.props.${column.name}`,
+                      defaultMessage: column.name,
+                    })}
+                  />
+                );
+              })}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {_.map((eventKey) => {
+              return (
+                <Table.Row
+                  className={
+                    events[eventKey].expanded ? "expanded" : "contracted"
+                  }
+                  key={eventKey}
+                  onClick={() => toggleExpanded(eventKey)}
+                >
+                  {!events[eventKey].expanded ? (
+                    columns &&
+                    columns.map((column, key) => (
+                      <Table.Cell
+                        key={key}
+                        textAlign={column.textAlign}
+                        content={columnDecorator(column)({
+                          ...events[eventKey],
+                          formatMessage,
+                        })}
+                      />
+                    ))
+                  ) : (
+                    <Table.Cell
+                      colSpan={columns.length}
+                      content={columns.map((column, key) => (
+                        <div key={key}>
+                          {columnDecorator(column)({
+                            ...events[eventKey],
+                            formatMessage,
+                          })}
+                        </div>
+                      ))}
+                    />
+                  )}
+                </Table.Row>
+              );
+            }, Object.keys(events))}
+          </Table.Body>
+        </Table>
+      )}
+      {_.isEmpty(structuresUploadEvents) && !structuresUploadEventsLoading && (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            <FormattedMessage id="structures.bulkUploadEvents.results.empty" />
+          </Header.Content>
+        </Header>
+      )}
+    </>
+  );
+};
+
+StructuresUploadEventsTable.propTypes = {
+  columns: PropTypes.array,
+  structuresUploadEvents: PropTypes.array,
+  fetchStructuresUploadEvents: PropTypes.func,
+  structuresUploadEventsLoading: PropTypes.bool,
+};
+
+const mapStateToProps = (state) => ({
+  columns: getColumnsWithData(
+    state.structuresUploadEvents,
+    getStructuresUploadEventColumns(state)
+  ),
+  structuresUploadEvents: state.structuresUploadEvents,
+  structuresUploadEventsLoading: state.structuresUploadEventsLoading,
+});
+
+export default connect(mapStateToProps, { fetchStructuresUploadEvents })(
+  StructuresUploadEventsTable
+);

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

@@ -0,0 +1,84 @@
+import _ from "lodash/fp";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import en from "../../messages/en";
+import StructuresUploadEventsTable from "../StructuresUploadEventsTable";
+
+
+
+const events = [
+  {
+    "csv_hash": "99E400B91D164F8F0A39F400CA323C8F",
+    "inserted_at": "2022-04-23T15:53:24.638484Z",
+    "message": null,
+    "response": {
+      "errors": [],
+      "ids": [
+        4825521,
+        4825561,
+        4825593
+      ]
+    },
+    "status": "COMPLETED",
+    "task_reference": "0.3225053307.1609564164.100549",
+    "user_id": 467
+  },
+  {
+    "csv_hash": "47D90FDF1AD967BD7DBBDAE28664278E",
+    "inserted_at": "2022-04-23T15:14:48.770275Z",
+    "message": null,
+    "response": {
+      "errors": [
+        {
+          "external_id": "file://corporate-landing-s3/cep-pro-ld-cor/batch/SAP/FSCM/vendor_issue/SAP_FSCM_CM_VENDOR_ISUE/ZFSCM_AC",
+          "field": "gdpr",
+          "message": "df_content.inclusion",
+          "row": 4
+        },
+        {
+          "external_id": "file://corporate-landing-s3/cep-pro-ld-cor/batch/SAP/FSCM/vendor_issue/SAP_FSCM_CM_VENDOR_ISUE/ZFSCM_FN",
+          "field": "business_description",
+          "message": "df_content.required",
+          "row": 2
+        },
+        {
+          "external_id": "file://corporate-landing-s3/cep-pro-ld-cor/batch/SAP/FSCM/vendor_issue/SAP_FSCM_CM_VENDOR_ISUE/ZFSCM_PC",
+          "field": "business_description",
+          "message": "df_content.required",
+          "row": 3
+        }
+      ],
+      "ids": []
+    },
+    "status": "COMPLETED",
+    "task_reference": "0.3225053307.1609564162.101463",
+    "user_id": 467
+  }
+];
+
+const renderOpts = {
+  messages: { en },
+  state: { structuresUploadEvents: events },
+};
+
+
+describe("<StructuresUploadEventsTable />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<StructuresUploadEventsTable />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("toggles row horizontal view when row is clicked", () => {
+    const { getAllByRole } = render(
+      <StructuresUploadEventsTable />,
+      renderOpts
+    );
+    const dataRow = getAllByRole("row")[1];
+    expect(dataRow).toHaveClass("contracted");
+    userEvent.click(dataRow);
+    expect(dataRow).toHaveClass("expanded");
+  });
+
+
+});

package/src/components/__tests__/__snapshots__/DictionaryRoutes.spec.js.snap

@@ -21,6 +21,10 @@ exports[`<DictionaryRoutes /> matches the latest snapshot 1`] = `
     path="/structure_types"
     render={[Function]}
   />
+  <Route
+    path="/bulk_update_template_content_events"
+    render={[Function]}
+  />
   <Route
     path="/structure_notes"
     render={[Function]}