@truedat/core 5.0.1 → 5.0.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [5.0.2] 2023-01-26
+
+### Added
+
+- [TD-3805]
+  - SwrMiddleware for error handling
+  - CSVFileModal and descriptionInput components used for hierarchy functionality
+
 ## [5.0.0] 2023-01-24
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "5.0.1",
+    "@truedat/test": "5.0.2",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -117,5 +117,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "7eda377af42b503fda5e1f0e8cebcaf4d38dec32"
+  "gitHead": "627767d6f31541ef09a077d7e535fb488a05700c"
 }

package/src/components/AdminMenu.js

@@ -2,8 +2,9 @@ import React from "react";
 import { useAuthorized } from "../hooks";
 import {
   CONFIGURATIONS,
-  JOBS,
+  HIERARCHIES,
   I18N_MESSAGES,
+  JOBS,
   RELATION_TAGS,
   SOURCES,
   SUBSCRIPTIONS,
@@ -13,6 +14,7 @@ import Submenu from "./Submenu";
 
 const items = [
   { name: "templates", routes: [TEMPLATES] },
+  { name: "hierarchies", routes: [HIERARCHIES] },
   { name: "relations", routes: [RELATION_TAGS] },
   { name: "subscriptions", routes: [SUBSCRIPTIONS] },
   { name: "sources", routes: [SOURCES] },

package/src/components/CSVFileModal.js

@@ -0,0 +1,63 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Button } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { UploadModal } from "./UploadModal";
+
+const CSVFileModal = ({ onSubmit, param }) => {
+  const { formatMessage } = useIntl();
+  const [processing, setProcessing] = useState(false);
+
+  const processCSV = (str, delim = ",") => {
+    const breakLine = "\n";
+    const lines = _.split(breakLine)(str);
+    const headers = _.flow(_.head, _.split(delim))(lines);
+    const rows = _.tail(lines);
+
+    const csvMap = rows.map((row) => {
+      const values = _.split(delim)(row);
+      return headers.reduce(
+        (map, header, pos) => _.set(header, values[pos])(map),
+        {}
+      );
+    });
+
+    return csvMap;
+  };
+
+  const onload = _.flow(_.pathOr("", "target.result"), processCSV, onSubmit);
+
+  const reader = new FileReader();
+  // eslint-disable-next-line fp/no-mutation
+  reader.onload = onload;
+
+  const process = (data) => {
+    setProcessing(true);
+    const file = data.get(param);
+    reader.readAsText(file);
+    setProcessing(false);
+  };
+
+  return (
+    <UploadModal
+      icon="upload"
+      trigger={
+        <Button secondary floated="right" icon="upload" loading={processing} />
+      }
+      header={formatMessage({ id: "uploadModal.actions.upload" })}
+      content={formatMessage({
+        id: "uploadModal.actions.upload.confirmation.content",
+      })}
+      param={param}
+      handleSubmit={process}
+    />
+  );
+};
+
+CSVFileModal.propTypes = {
+  onSubmit: PropTypes.func,
+  param: PropTypes.object,
+};
+
+export default CSVFileModal;

package/src/components/DescriptionInput.js

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Input } from "semantic-ui-react";
+
+const DescriptionInput = ({ value, onChange, disabled = false }) => {
+  const { formatMessage } = useIntl();
+  const [editionMode, setEditMode] = useState();
+  return !editionMode ? (
+    <div
+      onClick={() => setEditMode(true && !disabled)}
+      onFocus={() => setEditMode(true && !disabled)}
+      className={disabled ? "description disabled" : "description"}
+    >
+      {!value || typeof value !== "string"
+        ? disabled
+          ? ""
+          : formatMessage({ id: "hierarchy.add_description" })
+        : value}
+    </div>
+  ) : (
+    <Input
+      style={{ width: "100%" }}
+      onBlur={() => setEditMode(false)}
+      placeholder={formatMessage({ id: "hierarchy.add_description" })}
+      onChange={onChange}
+      value={value == null ? "" : value}
+      autoFocus
+    />
+  );
+};
+
+DescriptionInput.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+};
+
+export default DescriptionInput;

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

@@ -43,6 +43,19 @@ exports[`<AdminMenu /> matches the latest snapshot 1`] = `
             Templates
           </span>
         </a>
+        <a
+          aria-checked="false"
+          class="item"
+          href="/hierarchies"
+          name="hierarchies"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            Hierarchies
+          </span>
+        </a>
         <a
           aria-checked="false"
           class="item"

package/src/components/index.js

@@ -1,6 +1,5 @@
 import ActiveRoute from "./ActiveRoute";
 import AdminMenu from "./AdminMenu";
-import MembersMenu from "./MembersMenu";
 import Alert from "./Alert";
 import Authorized from "./Authorized";
 import AvailableFilters from "./AvailableFilters";
@@ -9,12 +8,14 @@ import CatalogMenu from "./CatalogMenu";
 import Comments from "./Comments";
 import CommentsLoader from "./CommentsLoader";
 import ConfirmModal from "./ConfirmModal";
+import CSVFileModal from "./CSVFileModal";
 import CursorPagination from "./CursorPagination";
 import DashboardMenu from "./DashboardMenu";
 import Date from "./Date";
 import DateFilter from "./DateFilter";
 import DateRangeFilter from "./DateRangeFilter";
 import DateTime from "./DateTime";
+import DescriptionInput from "./DescriptionInput";
 import DomainSelector from "./DomainSelector";
 import DropdownMenuItem from "./DropdownMenuItem";
 import ErrorBoundary from "./ErrorBoundary";
@@ -26,6 +27,7 @@ import HistoryBackButton from "./HistoryBackButton";
 import IngestMenu from "./IngestMenu";
 import LineageMenu from "./LineageMenu";
 import Loading from "./Loading";
+import MembersMenu from "./MembersMenu";
 import OptionGroup from "./OptionGroup";
 import OptionModal from "./OptionModal";
 import Pagination from "./Pagination";
@@ -50,7 +52,6 @@ import UploadModal from "./UploadModal";
 export {
   ActiveRoute,
   AdminMenu,
-  MembersMenu,
   Alert,
   Authorized,
   AvailableFilters,
@@ -59,12 +60,14 @@ export {
   Comments,
   CommentsLoader,
   ConfirmModal,
+  CSVFileModal,
   CursorPagination,
   DashboardMenu,
   Date,
   DateFilter,
   DateRangeFilter,
   DateTime,
+  DescriptionInput,
   DomainSelector,
   DropdownMenuItem,
   ErrorBoundary,
@@ -76,6 +79,7 @@ export {
   IngestMenu,
   LineageMenu,
   Loading,
+  MembersMenu,
   OptionGroup,
   OptionModal,
   Pagination,

package/src/messages/en.js

@@ -107,6 +107,7 @@ export default {
   "sidemenu.grant_request_approvals": "Approve Grant Requests",
   "sidemenu.grant_requests": "Grant Requests",
   "sidemenu.grants": "Grants",
+  "sidemenu.hierarchies": "Hierarchies",
   "sidemenu.hide": "Collapse sidebar",
   "sidemenu.i18nMessages": "Translations",
   "sidemenu.implementations": "Implementations",

package/src/messages/es.js

@@ -110,6 +110,7 @@ export default {
   "sidemenu.grant_request_approvals": "Aprobar Peticiones de Accesos",
   "sidemenu.grant_requests": "Peticiones de Accesos",
   "sidemenu.grants": "Accesos",
+  "sidemenu.hierarchies": "Jerarquías",
   "sidemenu.hide": "Ocultar",
   "sidemenu.i18nMessages": "Traducciones",
   "sidemenu.implementations": "Implementaciones",

package/src/routes.js

@@ -62,6 +62,10 @@ export const GROUP = "/groups/:id";
 export const GROUPS = "/groups";
 export const GROUP_CREATE = "/groups/new";
 export const GROUP_EDIT = "/groups/:id/edit";
+export const HIERARCHIES = "/hierarchies";
+export const HIERARCHY = "/hierarchies/:hierarchyId";
+export const HIERARCHY_EDIT = "/hierarchies/:hierarchyId/edit";
+export const HIERARCHY_CREATE = "/hierarchies/new";
 export const I18N = "/i18n";
 export const I18N_MESSAGES = "/i18n/messages";
 export const I18N_MESSAGES_NEW = "/i18n/messages/new";
@@ -261,6 +265,10 @@ const routes = {
   GROUPS,
   GROUP_CREATE,
   GROUP_EDIT,
+  HIERARCHIES,
+  HIERARCHY,
+  HIERARCHY_EDIT,
+  HIERARCHY_CREATE,
   I18N,
   I18N_MESSAGES,
   I18N_MESSAGES_NEW,

package/src/services/message.js

@@ -14,6 +14,9 @@ export const defaultMessage = (state, type, payload) => {
   if (type === "LOG_ERROR/TRIGGER" && _.has("graphQLErrors")(payload))
     return graphQLErrors(payload);
 
+  if (type === "LOG_ERROR/TRIGGER" && _.has("swrErrors")(payload))
+    return swrErrors(payload);
+
   if (_.endsWith("/TRIGGER")(type)) return state;
 
   if (_.endsWith("/FAILURE")(type)) {
@@ -27,6 +30,24 @@ export const defaultMessage = (state, type, payload) => {
   return state;
 };
 
+const swrErrors = ({ swrErrors, prefix }) => {
+  const errors = _.flow(
+    _.toPairs,
+    _.flatMap(([field, errors]) =>
+      _.map((v) => `${prefix}.${field}.${v}`)(errors)
+    ),
+    _.map((name) => ({ name }))
+  )(swrErrors);
+
+  return {
+    error: true,
+    header: "Error",
+    icon: "attention",
+    errorList: errors,
+    text: "List of errors",
+  };
+};
+
 export const graphQLErrors = (payload) => {
   const errorList = _.map(_.pick(["path", "field", "message"]))(
     payload.graphQLErrors

package/src/services/swr.js

@@ -0,0 +1,43 @@
+import _ from "lodash/fp";
+import { unauthorized, logError } from "../routines";
+
+function isNumeric(str) {
+  if (typeof str != "string") return false;
+  return !isNaN(str) && !isNaN(parseInt(str));
+}
+
+const getPrefix = _.flow(
+  _.replace("/api/", ""),
+  _.split("/"),
+  _.reject(isNumeric),
+  _.join(".")
+);
+
+const createErrorMiddleware = ({ dispatch }) => {
+  return (useSWRNext) => {
+    return (key, fetcher, config) => {
+      return useSWRNext(key, fetcher, {
+        ...config,
+        onError: (error) => {
+          config.onError(error);
+          const statusCode = _.pathOr(null, "response.status")(error);
+          const swrErrors = _.pathOr(null, "response.data.errors")(error);
+
+          if (statusCode === 401) {
+            dispatch(unauthorized());
+          } else if (swrErrors !== null) {
+            const prefix = getPrefix(key);
+            dispatch(logError({ swrErrors, prefix }));
+          }
+        },
+      });
+    };
+  };
+};
+
+export const createSwrConfig = (store) => {
+  const errorMiddleware = createErrorMiddleware(store);
+  return {
+    use: [errorMiddleware],
+  };
+};