@truedat/core 4.36.3 → 4.36.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.36.6] 2022-01-07
+
+### Fixed
+
+- [TD-4100] Move dependency from devDepencies to dependencies
+
+## [4.36.5] 2022-01-07
+
+### Added
+
+- [TD-4100] Long Alert error message CSV download link
+
 ## [4.35.8] 2022-01-07
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "4.36.3",
+  "version": "4.36.7",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -86,6 +86,7 @@
     "is-hotkey": "^0.1.6",
     "is-url": "^1.2.4",
     "prop-types": "^15.7.2",
+    "react-csv": "^2.2.2",
     "react-dropzone": "^4.2.13",
     "react-intl": "^5.20.10",
     "react-moment": "^0.9.7",
@@ -103,5 +104,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "ec1b0afc195462b78b1e9145cf705d9edd87a58b"
+  "gitHead": "f5b0b7da7d61e1e8fff39337fe411f4174055b73"
 }

package/src/components/Alert.js

@@ -1,11 +1,12 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
 import { Message } from "semantic-ui-react";
 import { dismissAlert } from "../routines";
 import { getMessage } from "../selectors";
+import { AlertExporter } from "./AlertExporter";
 
 const existingList = (list) => list && !_.isEmpty(list);
 
@@ -40,6 +41,8 @@ export const Alert = ({
     color,
     fields,
     messages,
+    downloadable = false,
+    initialMaxListItems = Infinity,
   },
   dismissAlert,
 }) => {
@@ -48,6 +51,9 @@ export const Alert = ({
   const formattedMessages = _.map((e) => formatMessages(e, formatMessage))(
     messages
   );
+  const list = _.isEmpty(errors) ? formattedMessages : errors;
+  const [maxListItems, setMaxListItems] = useState(initialMaxListItems);
+
   const message_content =
     content && !existingList(errors) && !existingList(formattedMessages)
       ? formatMessage(
@@ -55,18 +61,28 @@ export const Alert = ({
           { text, ...fields }
         )
       : undefined;
-  const list = _.isEmpty(errors) ? formattedMessages : errors;
   return content || header ? (
-    <Message
-      error={error}
-      header={formatMessage({ id: header, defaultMessage: header }, fields)}
-      content={message_content}
-      list={list}
-      icon={icon}
-      color={color}
-      onDismiss={dismissAlert}
-      visible
-    />
+    <>
+      {list.length > maxListItems ? (
+        <a
+          style={{ cursor: "pointer" }}
+          onClick={() => setMaxListItems(maxListItems + initialMaxListItems)}
+        >
+          {formatMessage({ id: "alert.show.more" })}
+        </a>
+      ) : null}
+      {downloadable ? AlertExporter({ list, messages }) : null}
+      <Message
+        error={error}
+        header={formatMessage({ id: header, defaultMessage: header }, fields)}
+        content={message_content}
+        list={list.length >= maxListItems ? list.slice(0, maxListItems) : list}
+        icon={icon}
+        color={color}
+        onDismiss={dismissAlert}
+        visible
+      />
+    </>
   ) : null;
 };
 

package/src/components/AlertExporter.js

@@ -0,0 +1,73 @@
+/* eslint-disable fp/no-mutation */
+/* eslint-disable fp/no-let */
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { CSVLink } from "react-csv";
+
+export const AlertExporter = ({ list, messages }) => {
+  const fullTranslations = joinTranslations({ list, messages });
+  const { formatMessage } = useIntl();
+  return (
+    <CSVLink
+      style={{ float: "right" }}
+      headers={generateCsvHeaders(fullTranslations)}
+      data={fullTranslations}
+      filename="errors.csv"
+      target="_blank"
+    >
+      {formatMessage({ id: "alert.export.csv" })}
+    </CSVLink>
+  );
+};
+
+AlertExporter.propTypes = {
+  list: PropTypes.array,
+  messages: PropTypes.array,
+};
+
+const joinTranslations = ({ list, messages }) => {
+  const renderedMessages = _.map((rm) => ({
+    renderedMessage: rm,
+  }))(list);
+  const full_messages = _.flow(
+    _.zip(renderedMessages),
+    _.map(
+      _.reduce(function (acc, ob) {
+        return _.assign(acc)(ob);
+      }, {})
+    )
+  )(messages);
+  return full_messages;
+};
+
+const flattenObj = (ob) => {
+  let result = {};
+  for (const i in ob) {
+    if (typeof ob[i] === "object" && !Array.isArray(ob[i])) {
+      const temp = flattenObj(ob[i]);
+      for (const j in temp) {
+        result[i + "." + j] = temp[j];
+      }
+    } else {
+      result[i] = ob[i];
+    }
+  }
+  return result;
+};
+
+const getAllUniqueKeys = _.flow(
+  _.map(flattenObj),
+  _.map(Object.keys),
+  _.flattenDeep,
+  _.uniq
+);
+
+const generateCsvHeaders = _.flow(
+  getAllUniqueKeys,
+  _.map((key) => ({
+    label: key.toUpperCase(),
+    key,
+  }))
+);

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

@@ -25,9 +25,10 @@ describe("<Alert />", () => {
 
   it("contains a formatted message with properties", () => {
     const wrapper = shallow(<Alert {...props} />);
-    expect(wrapper.find("Message")).toHaveLength(1);
-    expect(wrapper.prop("content")).toEqual("content.message.id");
-    expect(wrapper.prop("header")).toEqual("header.message.id");
+    const message = wrapper.find("Message");
+    expect(message).toHaveLength(1);
+    expect(message.prop("content")).toEqual("content.message.id");
+    expect(message.prop("header")).toEqual("header.message.id");
   });
 
   it("contains a list of messages", () => {

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

@@ -1,13 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Alert /> matches the latest snapshot 1`] = `
-<Message
-  content="content.message.id"
-  error={true}
-  header="header.message.id"
-  icon="warning"
-  list={Array []}
-  onDismiss={[MockFunction]}
-  visible={true}
-/>
+<Fragment>
+  <Message
+    content="content.message.id"
+    error={true}
+    header="header.message.id"
+    icon="warning"
+    list={Array []}
+    onDismiss={[MockFunction]}
+    visible={true}
+  />
+</Fragment>
 `;

package/src/routes.js

@@ -88,6 +88,8 @@ export const RULE_EDIT = "/rules/:id/edit";
 export const RULE_IMPLEMENTATION =
   "/rules/:id/implementations/:implementation_id";
 export const RULE_IMPLEMENTATIONS = "/rules/:id/implementations";
+export const RULE_IMPLEMENTATION_EVENTS =
+  "/rules/:id/implementations/:implementation_id/events";
 export const RULE_IMPLEMENTATION_NEW = "/rules/:id/implementations/new";
 export const RULE_IMPLEMENTATION_EDIT =
   "/rules/:id/implementations/:implementation_id/edit";
@@ -231,6 +233,7 @@ const routes = {
   ROLES_NEW,
   ROLES,
   RULE_EDIT,
+  RULE_IMPLEMENTATION_EVENTS,
   RULE_IMPLEMENTATION_CLONE,
   RULE_IMPLEMENTATION_EDIT,
   RULE_IMPLEMENTATION_MOVE,