@truedat/bg 6.0.2 → 6.0.4

package/src/concepts/components/ConceptRoutes.js

@@ -10,6 +10,7 @@ import {
   CONCEPT_LINKS_MANAGEMENT,
   CONCEPT_VERSION,
   CONCEPTS_BULK_UPDATE,
+  CONCEPTS_BULK_UPLOAD_EVENTS,
   CONCEPTS_NEW,
   CONCEPTS_PENDING,
   CONCEPTS_DEPRECATED,
@@ -29,6 +30,7 @@ import Concepts from "./Concepts";
 import ConceptsBulkUpdate from "./ConceptsBulkUpdate";
 import ConceptsLoader from "./ConceptsLoader";
 import ConceptSubscriptionLoader from "./ConceptSubscriptionLoader";
+import ConceptsUploadEvents from "./ConceptsUploadEvents";
 
 const RelationTagsLoader = React.lazy(() =>
   import("@truedat/lm/components/RelationTagsLoader")
@@ -56,6 +58,13 @@ export const ConceptRoutes = ({ concept, conceptLoaded, templatesLoaded }) => {
   };
   return (
     <>
+      <Route
+        exact
+        path={CONCEPTS_BULK_UPLOAD_EVENTS}
+        render={() =>
+          authorized ? <ConceptsUploadEvents /> : <Unauthorized />
+        }
+      />
       <Route
         exact
         path={CONCEPT_LINKS_MANAGEMENT}

package/src/concepts/components/ConceptsActions.js

@@ -18,6 +18,7 @@ export const ConceptsActions = ({
   hidden,
   upload,
   update,
+  canAutoPublish,
 }) => {
   const { formatMessage, locale } = useIntl();
 
@@ -42,7 +43,7 @@ export const ConceptsActions = ({
           id: "concepts.actions.download.tooltip",
         })}
       />
-      {upload ? <ConceptsUploadButton /> : null}
+      {upload ? <ConceptsUploadButton canAutoPublish={canAutoPublish} /> : null}
       {update ? <ConceptsUpdateButton /> : null}
     </div>
   );
@@ -56,6 +57,7 @@ ConceptsActions.propTypes = {
   downloadConcepts: PropTypes.func,
   upload: PropTypes.bool,
   update: PropTypes.bool,
+  canAutoPublish: PropTypes.bool,
 };
 
 ConceptsActions.defaultProps = {
@@ -71,6 +73,7 @@ const mapStateToProps = ({
     _.isEmpty(conceptActions) && conceptsActions?.create ? CONCEPTS_NEW : null,
   conceptsDownloading: conceptsDownloading,
   hidden: _.isEmpty(conceptsActions),
+  canAutoPublish: conceptsActions?.autoPublish && true,
 });
 
 export default connect(mapStateToProps, { downloadConcepts, uploadConcepts })(

package/src/concepts/components/ConceptsUpdateButton.js

@@ -58,8 +58,9 @@ const mapStateToProps = ({
   updateUrl:
     conceptCount !== 0 &&
     !conceptsLoading &&
-    existingTemplate(conceptFilters, conceptActiveFilters) &&
-    CONCEPTS_BULK_UPDATE,
+    existingTemplate(conceptFilters, conceptActiveFilters)
+      ? CONCEPTS_BULK_UPDATE
+      : null,
 });
 
 export default connect(mapStateToProps)(ConceptsUpdateButton);

package/src/concepts/components/ConceptsUploadButton.js

@@ -11,11 +11,29 @@ const uploadAction = {
   method: "POST",
   href: API_BUSINESS_CONCEPT_VERSIONS_UPLOAD,
 };
-
-export const ConceptsUploadButton = ({ uploadConcepts, loading }) => {
+export const ConceptsUploadButton = ({
+  uploadConcepts,
+  loading,
+  canAutoPublish,
+}) => {
   const { formatMessage, locale } = useIntl();
+  const extraAction = {
+    key: "yesWithAutoPublish",
+    primary: true,
+    content: formatMessage({ id: "uploadModal.accept.publish" }),
+    onClick: (data) => {
+      data.append("auto_publish", canAutoPublish);
+      return uploadConcepts({
+        action: "upload",
+        data,
+        lang: locale,
+        ...uploadAction,
+      });
+    },
+  };
   return (
     <UploadModal
+      extraAction={canAutoPublish && extraAction}
       icon="upload"
       trigger={
         <Button
@@ -50,6 +68,7 @@ export const ConceptsUploadButton = ({ uploadConcepts, loading }) => {
 ConceptsUploadButton.propTypes = {
   uploadConcepts: PropTypes.func,
   loading: PropTypes.bool,
+  canAutoPublish: PropTypes.bool,
 };
 
 const mapStateToProps = ({ uploadConceptsFile: { loading } }) => ({

package/src/concepts/components/ConceptsUploadEvents.js

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { Header, Icon, Segment } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import ConceptsUploadEventsTable from "./ConceptsUploadEventsTable";
+
+export const ConceptsUploadEvents = () => (
+  <Segment>
+    <Header as="h2">
+      <Icon circular name="cogs" />
+      <Header.Content>
+        <FormattedMessage id="concepts.upload.header" />
+        <Header.Subheader>
+          <FormattedMessage id="concepts.upload.subheader" />
+        </Header.Subheader>
+      </Header.Content>
+    </Header>
+    <Segment attached="bottom">
+      <ConceptsUploadEventsTable />
+    </Segment>
+  </Segment>
+);
+
+export default ConceptsUploadEvents;

package/src/concepts/components/ConceptsUploadEventsTable.js

@@ -0,0 +1,166 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+
+import _ from "lodash/fp";
+
+import { FormattedMessage } from "react-intl";
+import { Table } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { columnDecorator } from "@truedat/core/services";
+
+import { useUploadEvents } from "../hooks/useUploadEvents";
+import { getConceptUploadEventColumns } from "../selectors";
+
+import "../styles/conceptsUploadEventColumns.less";
+
+const getColumnsWithData = (conceptsResults, columns) =>
+  _.filter((column) =>
+    _.any(_.flow(columnDecorator(column), _.negate(_.isEmpty)))(conceptsResults)
+  )(columns);
+
+const messagesImp = (data) => {
+  return _.has("errors")(data)
+    ? _.flow(
+        _.propOr([], "errors"),
+        _.map((error) => ({
+          id: error.body.message,
+          context: {
+            ...error.body.context,
+          },
+          defaultMessage: "concepts.upload.failed.success.errors",
+        }))
+      )(data)
+    : [];
+};
+
+const ConceptsUploadEventsTable = ({ getColumns }) => {
+  const { formatMessage } = useIntl();
+  const [eventExpandedIndex, setEventExpandedIndex] = useState(null);
+
+  const { data, loading } = useUploadEvents();
+
+  const events =
+    data && !loading
+      ? _.reduce(
+          (acc, event) => ({
+            ...acc,
+            [`${event.task_reference}_${event.status}`]: {
+              ...event,
+              response: {
+                ...event.response,
+                translatedHeader: !event.response
+                  ? ""
+                  : formatMessage(
+                      {
+                        id: _.isEmpty(event.response.errors)
+                          ? "concepts.upload.success.header"
+                          : "concepts.upload.success.header_with_errors",
+                      },
+                      {
+                        count_created: event.response.created.length,
+                        count_updated: event.response.updated.length,
+                        count_errors: event.response.errors.length,
+                      }
+                    ),
+                translatedErrors: _.map((error) =>
+                  formatMessage({ id: error.id }, error.context)
+                )(messagesImp(event.response)),
+              },
+              expanded: false,
+            },
+          }),
+          {},
+          data.data
+        )
+      : [];
+
+  const columns = getColumnsWithData(events, getColumns());
+
+  const toggleExpanded = (eventKey) =>
+    eventExpandedIndex === eventKey
+      ? setEventExpandedIndex(null)
+      : setEventExpandedIndex(eventKey);
+
+  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: `concepts.upload.props.${column.name}`,
+                      defaultMessage: column.name,
+                    })}
+                  />
+                );
+              })}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {_.map(
+              (eventKey) => (
+                <Table.Row
+                  className={
+                    eventKey === eventExpandedIndex ? "expanded" : "contracted"
+                  }
+                  key={eventKey}
+                  onClick={() => toggleExpanded(eventKey)}
+                >
+                  {eventKey !== eventExpandedIndex ? (
+                    columns &&
+                    columns.map((column, key) => (
+                      <Table.Cell
+                        key={key}
+                        textAlign={column.textAlign}
+                        content={columnDecorator(column)({
+                          ...events[eventKey],
+                          formatMessage,
+                        })}
+                      />
+                    ))
+                  ) : (
+                    <Table.Cell colSpan={columns.length}>
+                      {events[eventKey].file_hash ? (
+                        <>
+                          <FormattedMessage
+                            id={`concepts.upload.props.file_hash`}
+                          />
+                          :&nbsp;{events[eventKey].file_hash}
+                        </>
+                      ) : null}
+                      {columns.map((column, key) => (
+                        <div key={key}>
+                          {columnDecorator(column)({
+                            ...events[eventKey],
+                            formatMessage,
+                          })}
+                        </div>
+                      ))}
+                    </Table.Cell>
+                  )}
+                </Table.Row>
+              ),
+              Object.keys(events)
+            )}
+          </Table.Body>
+        </Table>
+      )}
+    </>
+  );
+};
+
+ConceptsUploadEventsTable.propTypes = {
+  getColumns: PropTypes.func,
+};
+
+const mapStateToProps = (state) => ({
+  getColumns: () => getConceptUploadEventColumns(state),
+});
+
+export default connect(mapStateToProps)(ConceptsUploadEventsTable);

package/src/concepts/components/__tests__/ConceptForm.spec.js

@@ -9,6 +9,27 @@ import {
 } from "@truedat/test/mocks";
 import ConceptForm from "../ConceptForm";
 
+jest.mock("@truedat/ai/hooks/useSuggestions", () => {
+  const originalModule = jest.requireActual("@truedat/ai/hooks/useSuggestions");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useAvailabilityCheck: () => ({
+      trigger: jest.fn(
+        () =>
+          new Promise(() => ({
+            data: {
+              data: {
+                status: "ok",
+              },
+            },
+          }))
+      ),
+    }),
+  };
+});
+
 const state = {
   conceptActions: { create: {} },
   conceptActionLoading: "",
@@ -39,13 +60,14 @@ describe("<ConceptForm />", () => {
     });
 
     it("renders dynamic fields when template is selected", async () => {
-      const { findByText, getByText, queryByText } = render(
+      const { findByText, getByText, queryByText, getAllByRole } = render(
         <ConceptForm />,
         renderOpts
       );
       await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
       await waitFor(() => expect(queryByText(/fooDomain/)).toBeInTheDocument());
       userEvent.click(await findByText("fooDomain"));
+      userEvent.type(getAllByRole("textbox")[1], "name");
       userEvent.click(await findByText("template1"));
       expect(getByText("field1")).toBeInTheDocument();
     });

package/src/concepts/components/__tests__/ConceptsActions.spec.js

@@ -16,6 +16,7 @@ describe("<ConceptsActions />", () => {
       en: {
         "concepts.actions.create": "Create",
         "concepts.actions.download.tooltip": "Download",
+        "concepts.actions.upload.tooltip": "concepts.actions.upload.tooltip",
       },
     },
     state: {

package/src/concepts/components/__tests__/ConceptsUploadButton.spec.js

@@ -1,23 +1,45 @@
 // only admin user
 import React from "react";
-import { intl } from "@truedat/test/intl-stub";
-import { shallow } from "enzyme";
-import { ConceptsUploadButton } from "../ConceptsUploadButton";
+import { render } from "@truedat/test/render";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
+import { ConceptsUploadButton } from "../ConceptsUploadButton";
 
 jest.mock("@truedat/core/hooks", () => ({
-  useAuthorized: jest.fn(() => true)
+  useAuthorized: jest.fn(() => true),
 }));
 
+const props = {
+  uploadConcepts: jest.fn(),
+  loading: false,
+  canAutoPublish: false,
+};
+
 describe("<ConceptsUploadButton />", () => {
-  it("matches the latest snapshot", () => {
-    const uploadConcepts = jest.fn();
-    const loading = false;
-    const props = { uploadConcepts, loading };
-    const wrapper = shallow(<ConceptsUploadButton {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const { getByRole } = render(<ConceptsUploadButton {...props} />);
+    userEvent.click(getByRole("button"));
+    await waitFor(() =>
+      expect(screen.getByRole("presentation")).toBeInTheDocument()
+    );
+
+    expect(screen.getByRole("presentation")).toMatchSnapshot();
+  });
+
+  it("autopublish button is displayed if canAutoPublish is true", async () => {
+    const customProps = {
+      ...props,
+      canAutoPublish: true,
+    };
+    const { getByRole } = render(<ConceptsUploadButton {...customProps} />);
+    userEvent.click(getByRole("button"));
+    await waitFor(() =>
+      expect(screen.getByRole("presentation")).toBeInTheDocument()
+    );
+
+    expect(
+      screen.getByRole("button", { name: /publish/i })
+    ).toBeInTheDocument();
   });
 });

package/src/concepts/components/__tests__/ConceptsUploadEventsTable.spec.js

@@ -0,0 +1,98 @@
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import ConceptsUploadEventsTable from "../ConceptsUploadEventsTable";
+
+const events = [
+  {
+    file_hash: "99E400B91D164F8F0A39F400CA323C8F",
+    inserted_at: "2022-04-23T15:53:24.638484Z",
+    message: null,
+    response: {
+      errors: [],
+      created: [4825521, 4825561, 4825593],
+      updated: [4825522, 4825562, 4825594],
+    },
+    status: "COMPLETED",
+    task_reference: "0.3225053307.1609564164.100549",
+    user_id: 467,
+  },
+  {
+    file_hash: "47D90FDF1AD967BD7DBBDAE28664278E",
+    inserted_at: "2022-04-23T15:14:48.770275Z",
+    message: null,
+    response: {
+      errors: [
+        {
+          error_type: "test_field_error",
+          body: {
+            message: "concepts.upload.failed.invalid_field_value",
+            context: {
+              field: "gdpr",
+              type: "grpd_template",
+              row: 4,
+              error: "Missing value",
+            },
+          },
+        },
+        {
+          error_type: "test_forbidden_update",
+          body: {
+            message: "concepts.upload.failed.forbidden_update",
+            context: {
+              type: "test_template",
+              row: 2,
+              domain: "forbidden_domain",
+            },
+          },
+        },
+        {
+          error_type: "test_name_not_available",
+          body: {
+            message: "concepts.upload.failed.name_not_available",
+            context: {
+              type: "test_template",
+              row: 7,
+              name: "test_name_not_available",
+            },
+          },
+        },
+      ],
+      created: [],
+      updated: [],
+    },
+    status: "COMPLETED",
+    task_reference: "0.3225053307.1609564162.101463",
+    user_id: 467,
+  },
+];
+
+jest.mock("../../hooks/useUploadEvents.js", () => {
+  const originalModule = jest.requireActual("../../hooks/useUploadEvents.js");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useUploadEvents: jest.fn(() => ({
+      data: {
+        data: events,
+      },
+      loading: false,
+    })),
+  };
+});
+
+describe("<ConceptsUploadEventsTable />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<ConceptsUploadEventsTable />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("toggles row horizontal view when row is clicked", () => {
+    const { getAllByRole } = render(<ConceptsUploadEventsTable />);
+    const dataRow = getAllByRole("row")[1];
+    expect(dataRow).toHaveClass("contracted");
+    userEvent.click(dataRow);
+    expect(dataRow).toHaveClass("expanded");
+  });
+});

package/src/concepts/components/__tests__/__snapshots__/ConceptsUploadButton.spec.js.snap

@@ -1,29 +1,80 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ConceptsUploadButton /> matches the latest snapshot 1`] = `
-<UploadModal
-  content={
-    <Memo(MemoizedFormattedMessage)
-      id="concepts.actions.upload.confirmation.content"
-    />
-  }
-  handleSubmit={[Function]}
-  header={
-    <Memo(MemoizedFormattedMessage)
-      id="concepts.actions.upload.confirmation.header"
-    />
-  }
+<div
+  class="ui small modal transition visible active"
   icon="upload"
-  param="business_concepts"
-  trigger={
-    <Button
-      as="button"
-      data-tooltip="concepts.actions.upload.tooltip"
-      floated="right"
-      icon="upload"
-      loading={false}
-      secondary={true}
-    />
-  }
-/>
+  role="presentation"
+>
+  <i
+    aria-hidden="true"
+    class="close icon"
+  />
+  <div
+    class="header"
+  >
+    Confirm bulk upload
+  </div>
+  <div
+    class="content"
+  >
+    <div
+      aria-disabled="false"
+      class=""
+      data-testid="fileDropZone"
+      style="position: relative; width: 100%; margin-bottom: 10px; border: 1px dashed gray; border-radius: 5px;"
+    >
+      <div
+        style="padding: 20px; width: 100%; height: 100%;"
+      >
+        <div
+          class="ui center aligned container"
+        >
+          <i
+            aria-hidden="true"
+            class="cloud upload huge icon"
+          />
+          <p>
+            Drag an drop file or click to select file
+          </p>
+          <button
+            class="ui secondary button"
+          >
+            <i
+              aria-hidden="true"
+              class="upload icon"
+            />
+            Upload file
+          </button>
+        </div>
+      </div>
+      <input
+        autocomplete="off"
+        multiple=""
+        style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.00001; pointer-events: none;"
+        type="file"
+      />
+    </div>
+    <h2>
+      Selected file
+    </h2>
+    <ul />
+  </div>
+  <div
+    class="actions"
+  >
+    <button
+      class="ui secondary button"
+    >
+      Cancel
+    </button>
+    <button
+      class="ui primary disabled button"
+      disabled=""
+      tabindex="-1"
+    >
+      Upload and update
+    </button>
+  </div>
+</div>
 `;