@truedat/core 4.36.4 → 4.36.8

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [4.36.8] 2022-01-24
+
+### Changed
+
+- [TD-4125] Renamed `ConfirmModal` prop `handleSubmit` to `onConfirm`
+
+## [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.4",
+  "version": "4.36.8",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -44,7 +44,7 @@
     "jest-localstorage-mock": "^2.4.14",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "redux-saga-test-plan": "^4.0.1",
+    "redux-saga-test-plan": "^4.0.4",
     "rimraf": "^3.0.2",
     "semantic-ui-react": "^2.0.3"
   },
@@ -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": "4dbf4f9e5188b82b17d053b65e76506e60aa6722"
+  "gitHead": "b9b8ee80998b230697593b5d207d187971bc0724"
 }

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/ConfirmModal.js

@@ -3,18 +3,18 @@ import PropTypes from "prop-types";
 import { Modal } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 
-const predefined_actions = handleSubmit => [
+const defaultActions = (onConfirm) => [
   {
     key: "no",
     secondary: true,
-    content: <FormattedMessage id="confirmation.no" />
+    content: <FormattedMessage id="confirmation.no" />,
   },
   {
     key: "yes",
     negative: true,
     content: <FormattedMessage id="confirmation.yes" />,
-    onClick: handleSubmit
-  }
+    onClick: onConfirm,
+  },
 ];
 
 const CoolHeader = ({ header, subHeader }) => (
@@ -25,7 +25,7 @@ const CoolHeader = ({ header, subHeader }) => (
 );
 CoolHeader.propTypes = {
   header: PropTypes.any,
-  subHeader: PropTypes.any
+  subHeader: PropTypes.any,
 };
 
 export const ConfirmModal = ({
@@ -37,22 +37,22 @@ export const ConfirmModal = ({
   subHeader,
   content,
   onClose,
-  handleSubmit,
+  onConfirm,
   trigger,
-  size
+  size,
 }) => (
   <Modal
     icon={icon}
     open={open}
     onOpen={onOpen}
     onClose={onClose}
-    actions={actions || predefined_actions(handleSubmit)}
+    actions={actions || defaultActions(onConfirm)}
     trigger={trigger}
     closeIcon
     size={size || "small"}
     header={<CoolHeader header={header} subHeader={subHeader} />}
     content={
-      content.type === "string" ? (
+      content?.type === "string" ? (
         content
       ) : (
         <Modal.Content>{content}</Modal.Content>
@@ -69,10 +69,10 @@ ConfirmModal.propTypes = {
   header: PropTypes.any,
   subHeader: PropTypes.any,
   content: PropTypes.any,
-  handleSubmit: PropTypes.func,
+  onConfirm: PropTypes.func,
   onClose: PropTypes.func,
   trigger: PropTypes.element,
-  size: PropTypes.string
+  size: PropTypes.string,
 };
 
 export default ConfirmModal;

package/src/components/ModalSaveFilter.js

@@ -6,7 +6,7 @@ import { FormattedMessage } from "react-intl";
 import { ConfirmModal } from "./ConfirmModal";
 
 export const SaveFilterForm = ({ setFilterName }) => {
-  const onChange = value => {
+  const onChange = (value) => {
     setFilterName(value);
   };
 
@@ -26,32 +26,32 @@ export const SaveFilterForm = ({ setFilterName }) => {
 };
 
 SaveFilterForm.propTypes = {
-  setFilterName: PropTypes.func
+  setFilterName: PropTypes.func,
 };
 
 export const ModalSaveFilter = ({ saveFilters, activeFilters }) => {
   const [filterName, setFilterName] = useState("");
 
-  const actions = handleSubmit => [
+  const actions = (handleSubmit) => [
     {
       key: "no",
       secondary: true,
-      content: <FormattedMessage id="search.save_filter.cancel" />
+      content: <FormattedMessage id="search.save_filter.cancel" />,
     },
     {
       key: "yes",
       primary: true,
       disabled: _.isEmpty(filterName),
       content: <FormattedMessage id="search.save_filter.save" />,
-      onClick: handleSubmit
-    }
+      onClick: handleSubmit,
+    },
   ];
 
-  const handleSubmit = e => {
+  const handleSubmit = (e) => {
     e.preventDefault();
     saveFilters({
       filters: activeFilters,
-      filterName: filterName
+      filterName: filterName,
     });
   };
 
@@ -70,14 +70,14 @@ export const ModalSaveFilter = ({ saveFilters, activeFilters }) => {
       content={
         <SaveFilterForm setFilterName={setFilterName} filterName={filterName} />
       }
-      handleSubmit={handleSubmit}
+      onConfirm={handleSubmit}
     />
   );
 };
 
 ModalSaveFilter.propTypes = {
   saveFilters: PropTypes.func,
-  activeFilters: PropTypes.object
+  activeFilters: PropTypes.object,
 };
 
 export default ModalSaveFilter;

package/src/components/UserFilters.js

@@ -10,7 +10,7 @@ export const UserFilters = ({
   deleteUserFilter,
   resetFilters,
   selectedUserFilter,
-  userFilters
+  userFilters,
 }) => {
   return (
     <>
@@ -23,7 +23,7 @@ export const UserFilters = ({
               key={`label${userFilter.id}.${i}`}
             >
               <span
-                onClick={e => {
+                onClick={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
                   if (selectedUserFilter == userFilter.name) {
@@ -58,13 +58,11 @@ export const UserFilters = ({
                         <b>
                           <i>{userFilter.name}</i>
                         </b>
-                      )
+                      ),
                     }}
                   />
                 }
-                handleSubmit={() => {
-                  deleteUserFilter({ id: userFilter.id });
-                }}
+                onConfirm={() => deleteUserFilter({ id: userFilter.id })}
               />
             </Label>
           ))}
@@ -79,7 +77,7 @@ UserFilters.propTypes = {
   deleteUserFilter: PropTypes.func,
   resetFilters: PropTypes.func,
   selectedUserFilter: PropTypes.string,
-  userFilters: PropTypes.array
+  userFilters: PropTypes.array,
 };
 
 export default UserFilters;

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

@@ -14,7 +14,7 @@ describe("<Alert />", () => {
     content: "content.message.id",
     header: "header.message.id",
     text: "some text",
-    icon: "warning"
+    icon: "warning",
   };
   const props = { message, dismissAlert };
 
@@ -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", () => {
@@ -39,13 +40,13 @@ describe("<Alert />", () => {
       text: "",
       messages: [
         {
-          id: "message.0.id"
+          id: "message.0.id",
         },
         {
           id: "message.1.id",
-          fields: { count: 1 }
-        }
-      ]
+          fields: { count: 1 },
+        },
+      ],
     };
     const props = { message, dismissAlert };
     const wrapper = shallow(<Alert {...props} />);

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/components/__tests__/__snapshots__/ModalSaveFilter.spec.js.snap

@@ -28,13 +28,13 @@ exports[`<ModalSaveFilter /> matches the latest snapshot 1`] = `
       setFilterName={[Function]}
     />
   }
-  handleSubmit={[Function]}
   header={
     <Memo(MemoizedFormattedMessage)
       id="search.filters.actions.save.confirmation.header"
     />
   }
   icon="save"
+  onConfirm={[Function]}
   trigger={
     <a
       className="resetFilters"

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

@@ -31,13 +31,13 @@ exports[`<UserFilters /> matches the latest snapshot 1`] = `
             }
           />
         }
-        handleSubmit={[Function]}
         header={
           <Memo(MemoizedFormattedMessage)
             id="search.filters.actions.delete.confirmation.header"
           />
         }
         icon="trash"
+        onConfirm={[Function]}
         trigger={
           <Icon
             as="i"
@@ -75,13 +75,13 @@ exports[`<UserFilters /> matches the latest snapshot 1`] = `
             }
           />
         }
-        handleSubmit={[Function]}
         header={
           <Memo(MemoizedFormattedMessage)
             id="search.filters.actions.delete.confirmation.header"
           />
         }
         icon="trash"
+        onConfirm={[Function]}
         trigger={
           <Icon
             as="i"

package/src/routes.js

@@ -112,7 +112,7 @@ export const SEARCH_RESULTS = "/search/results";
 export const SEARCH_STRUCTURES = "/search/structures";
 export const SOURCE = "/sources/:external_id";
 export const SOURCES = "/sources";
-export const SOURCE_CREATE = "/sources/new";
+export const SOURCES_NEW = "/sources/new";
 export const SOURCE_EDIT = "/sources/:external_id/edit";
 export const SOURCE_JOBS = "/sources/:external_id/jobs";
 export const SOURCE_JOBS_NEW = "/sources/:external_id/jobs/new";
@@ -252,7 +252,7 @@ const routes = {
   SEARCH_RESULTS,
   SEARCH_STRUCTURES,
   SEARCH,
-  SOURCE_CREATE,
+  SOURCES_NEW,
   SOURCE_EDIT,
   SOURCE_JOBS_NEW,
   SOURCE_JOBS,