@truedat/core 4.28.2 → 4.28.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.28.6] 2021-09-20
+
+### Added
+
+- [TD-3950] My grants table
+
 ## [4.27.5] 2021-08-31
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "4.28.2",
+  "version": "4.28.6",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -32,7 +32,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
-    "@truedat/test": "4.28.2",
+    "@truedat/test": "4.28.6",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -103,5 +103,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "b781ac2283e04337d5754ff1e0a28a8f2a4ffdfe"
+  "gitHead": "c1ed65b6c8440e73e478f07db743c0fd3a473c24"
 }

package/src/components/CatalogMenu.js

@@ -5,15 +5,21 @@ import {
   STRUCTURES,
   SYSTEMS,
   STRUCTURE_TAGS,
-  STRUCTURE_TYPES
+  STRUCTURE_TYPES,
+  MY_GRANTS,
+  GRANTS,
 } from "../routes";
 import Submenu from "./Submenu";
 
-const items = [{ name: "structures", routes: [STRUCTURES, SYSTEMS] }];
+const items = [
+  { name: "structures", routes: [STRUCTURES, SYSTEMS] },
+  { name: "my_grants", routes: [MY_GRANTS] },
+  { name: "grants", routes: [GRANTS] },
+];
 
 const adminItems = [
   { name: "structure_types", routes: [STRUCTURE_TYPES] },
-  { name: "structure_tags", routes: [STRUCTURE_TAGS] }
+  { name: "structure_tags", routes: [STRUCTURE_TAGS] },
 ];
 
 export const CatalogMenu = () => {

package/src/components/DateRangeFilter.js

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from "react";
+import moment from "moment";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Form, Input, Label, Dropdown } from "semantic-ui-react";
+import { DatesRangeInput } from "semantic-ui-calendar-react";
+
+const validNumber = (value) => RegExp("^\\d+$").test(value);
+const validRange = (value) =>
+  RegExp("^\\d{4}-\\d\\d-\\d\\d *- *\\d{4}-\\d\\d-\\d\\d$").test(value);
+
+export const DateRangeFilter = ({
+  label,
+  onChange,
+  defaultValues,
+  size = "small",
+  name = "date",
+  dateFormat = "YYYY-MM-DD",
+}) => {
+  const type = "range";
+  const unit = defaultValues?.unit || "d";
+  const value = defaultValues?.value || "1";
+  const [range, setRange] = useState(defaultValues?.range || "");
+  useEffect(() => {
+    const valid = type === "range" ? validRange(range) : validNumber(value);
+    if (valid) {
+      onChange({ name, type, range, unit, value });
+    }
+  }, [name, type, unit, value, range, onChange]);
+  const currentDate = moment();
+  return (
+    <DatesRangeInput
+      animation={null}
+      name="range"
+      placeholder="yyyy-mm-dd - yyyy-mm-dd"
+      iconPosition="left"
+      icon="calendar alternate outline"
+      allowSameEndDate
+      value={range}
+      maxDate={currentDate}
+      onChange={(_e, { value }) => setRange(value)}
+      dateFormat={dateFormat}
+    />
+  );
+};
+
+DateRangeFilter.propTypes = {
+  dateFormat: PropTypes.string,
+  defaultValues: PropTypes.object,
+  label: PropTypes.node,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  size: PropTypes.string,
+};
+
+export default DateRangeFilter;

package/src/components/FilterDropdown.js

@@ -15,7 +15,7 @@ export const FilterDropdown = ({
   openFilter,
   options,
   removeFilter,
-  toggleFilterValue
+  toggleFilterValue,
 }) => (
   <Dropdown
     item
@@ -28,7 +28,7 @@ export const FilterDropdown = ({
         <FormattedMessage id={`filters.${filter}`} defaultMessage={filter} />
         <Icon
           name="delete"
-          onClick={e => {
+          onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
             removeFilter({ filter });
@@ -71,7 +71,7 @@ FilterDropdown.propTypes = {
   openFilter: PropTypes.func,
   options: PropTypes.array,
   removeFilter: PropTypes.func,
-  toggleFilterValue: PropTypes.func
+  toggleFilterValue: PropTypes.func,
 };
 
 export default FilterDropdown;

package/src/components/MembersMenu.js

@@ -5,7 +5,7 @@ import Submenu from "./Submenu";
 
 const items = [
   { name: "users", routes: [USERS, GROUPS] },
-  { name: "roles", routes: [ROLES] }
+  { name: "roles", routes: [ROLES] },
 ];
 
 export const MembersMenu = () => {

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

@@ -12,6 +12,18 @@ exports[`<CatalogMenu /> matches the latest snapshot 1`] = `
           "/systems",
         ],
       },
+      Object {
+        "name": "my_grants",
+        "routes": Array [
+          "/my_grants",
+        ],
+      },
+      Object {
+        "name": "grants",
+        "routes": Array [
+          "/grants",
+        ],
+      },
       Object {
         "name": "structure_types",
         "routes": Array [

package/src/components/index.js

@@ -10,6 +10,7 @@ import CommentsLoader from "./CommentsLoader";
 import ConfirmModal from "./ConfirmModal";
 import DashboardMenu from "./DashboardMenu";
 import DateFilter from "./DateFilter";
+import DateRangeFilter from "./DateRangeFilter";
 import DateTime from "./DateTime";
 import DropdownMenuItem from "./DropdownMenuItem";
 import ErrorBoundary from "./ErrorBoundary";
@@ -50,6 +51,7 @@ export {
   ConfirmModal,
   DashboardMenu,
   DateFilter,
+  DateRangeFilter,
   DateTime,
   DropdownMenuItem,
   ErrorBoundary,

package/src/hooks/useAuthorized.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import { useSelector } from "react-redux";
 
-export const useAuthorized = allowedRoles => {
+export const useAuthorized = (allowedRoles) => {
   const authentication = useSelector(_.propOr({}, "authentication"));
   const { role, groups } = authentication;
   return role === "admin"
@@ -9,14 +9,14 @@ export const useAuthorized = allowedRoles => {
     : _.flow(
         _.defaultTo([]),
         _.castArray,
-        _.some(r => _.includes(r)(groups))
+        _.some((r) => _.includes(r)(groups))
       )(allowedRoles);
 };
 
-const filterByGroups = groups => itemGroups =>
-  _.isEmpty(itemGroups) || _.some(r => _.includes(r)(groups))(itemGroups);
+const filterByGroups = (groups) => (itemGroups) =>
+  _.isEmpty(itemGroups) || _.some((r) => _.includes(r)(groups))(itemGroups);
 
-export const useAuthorizedItems = items => {
+export const useAuthorizedItems = (items) => {
   const authentication = useSelector(_.propOr({}, "authentication"));
   const { role, groups } = authentication;
 
@@ -25,6 +25,8 @@ export const useAuthorizedItems = items => {
     : _.flow(
         _.defaultTo([]),
         _.castArray,
-        _.filter(i => _.flow(_.pathOr([], "groups"), filterByGroups(groups))(i))
+        _.filter((i) =>
+          _.flow(_.pathOr([], "groups"), filterByGroups(groups))(i)
+        )
       )(items);
 };

package/src/messages/en.js

@@ -73,11 +73,13 @@ export default {
   "sidemenu.configurations": "Configuration",
   "sidemenu.dashboard": "Dashboard",
   "sidemenu.glossary": "Glossary",
+  "sidemenu.grants": "Grants",
   "sidemenu.hide": "Collapse sidebar",
   "sidemenu.ingests": "Data Requests",
   "sidemenu.implementations": "Implementations",
   "sidemenu.jobs": "Jobs",
   "sidemenu.lineage": "Lineage Analysis",
+  "sidemenu.my_grants": "My grants",
   "sidemenu.quality": "Data Quality",
   "sidemenu.quality_dashboard": "Quality Dashboard",
   "sidemenu.roles": "Roles",

package/src/messages/es.js

@@ -76,11 +76,13 @@ export default {
   "sidemenu.configurations": "Configuración",
   "sidemenu.dashboard": "Dashboard",
   "sidemenu.glossary": "Glosario",
+  "sidemenu.grants": "Accesos",
   "sidemenu.hide": "Ocultar",
   "sidemenu.implementations": "Implementaciones",
   "sidemenu.ingests": "Peticiones de datos",
   "sidemenu.jobs": "Jobs",
   "sidemenu.lineage": "Linaje",
+  "sidemenu.my_grants": "Mis accesos",
   "sidemenu.quality": "Calidad",
   "sidemenu.quality_dashboard": "Dashboard de Calidad",
   "sidemenu.roles": "Roles",

package/src/routes.js

@@ -40,6 +40,7 @@ export const DOMAIN_MEMBERS = "/domains/:id/members";
 export const DOMAIN_MEMBERS_NEW = "/domains/:id/members/new";
 export const DOMAIN_NEW = "/domains/:id/new";
 export const EXECUTION_GROUP = "/executionGroups/:id";
+export const GRANTS = "/grants";
 export const GRANTS_REQUESTS_CHECKOUT = "/grants_requests/checkout";
 export const GRAPH = "/graphs/:id";
 export const GRAPHS = "/graphs";
@@ -66,6 +67,7 @@ export const INGEST_RELATIONS_STRUCTURES_NEW =
 export const JOB = "/jobs/:id";
 export const JOBS = "/jobs";
 export const LOGIN = "/login";
+export const MY_GRANTS = "/my_grants";
 export const PASSWORD = "/password";
 export const PROFILE_EXECUTION =
   "/profileGroups/:group_id/profileExecutions/:id";
@@ -180,6 +182,7 @@ const routes = {
   DOMAINS_SEARCH,
   DOMAINS,
   EXECUTION_GROUP,
+  GRANTS,
   GRANTS_REQUESTS_CHECKOUT,
   GRAPH,
   GRAPHS,
@@ -204,6 +207,7 @@ const routes = {
   JOB,
   JOBS,
   LOGIN,
+  MY_GRANTS,
   PASSWORD,
   PROFILE_EXECUTION,
   PROFILE_GROUP,

package/src/selectors/makeDateFiltersSelector.js

@@ -6,33 +6,48 @@ import {
   propEq,
   propOr,
   split,
-  stubTrue
+  stubTrue,
 } from "lodash/fp";
 import { createSelector } from "reselect";
 
 const relativeDate = ({ unit, value }) => `now-${value}${unit}`;
 const toDateRange = ([from, to]) => ({ gte: from, lt: `${to}||+1d` });
 const sinceDate = ({ name, ...props }) => ({
-  [name]: { gte: relativeDate(props) }
+  [name]: { gte: relativeDate(props) },
 });
 const untilDate = ({ name, ...props }) => ({
-  [name]: { lt: relativeDate(props) }
+  [name]: { lt: relativeDate(props) },
 });
 const dateRange = ({ name, range }) => ({
-  [name]: toDateRange(split(" - ")(range))
+  [name]: toDateRange(split(" - ")(range)),
 });
 
+const grantDateRange = ({ name, range }) => {
+  const [start_date, end_date] = split(",")(name);
+  const [from, to] = split(" - ")(range);
+
+  return from && to
+    ? {
+        [start_date]: { gte: from },
+        [end_date]: { lt: to },
+      }
+    : constant(empty);
+};
+
 const empty = {};
 
-export const makeDateFiltersSelector = dateFilterProp =>
-  createSelector(
+export const makeDateFiltersSelector = (dateFilterProp) => {
+  const dateRangeFilter =
+    dateFilterProp === "grantDateFilter" ? grantDateRange : dateRange;
+  return createSelector(
     propOr(empty, dateFilterProp),
     cond([
       [negate(propEq("active", true)), constant(empty)],
       [negate(has("name")), constant(empty)],
       [propEq("type", "since"), sinceDate],
       [propEq("type", "before"), untilDate],
-      [propEq("type", "range"), dateRange],
-      [stubTrue, constant(empty)]
+      [propEq("type", "range"), dateRangeFilter],
+      [stubTrue, constant(empty)],
     ])
   );
+};

package/src/services/axios.js

@@ -2,14 +2,20 @@ import axios from "axios";
 import { readToken } from "./storage";
 
 axios.interceptors.request.use(
-  function(config) {
+  function (config) {
     const token = readToken();
     if (token != null && !config.url.match(/\/sessions/)) {
-      config.headers.Authorization = `Bearer ${token}`;
+      return {
+        ...config,
+        headers: {
+          ...config.headers,
+          Authorization: `Bearer ${token}`,
+        },
+      };
     }
     return config;
   },
-  function(err) {
+  function (err) {
     return Promise.reject(err);
   }
 );

package/src/services/columnDecorator.js

@@ -1,6 +1,6 @@
 import _ from "lodash/fp";
 
-export const columnDecorator = column => obj => {
+export const columnDecorator = (column) => (obj) => {
   const { fieldSelector, fieldDecorator, name } = column || {};
   const field = _.isFunction(fieldSelector)
     ? fieldSelector(obj)

package/src/services/columnDecoratorComponent.js

@@ -0,0 +1,24 @@
+import _ from "lodash/fp";
+import React from "react";
+
+export const columnDecoratorComponent = (column) => (obj) => {
+  const { fieldSelector, fieldDecorator, name } = column || {};
+
+  if (_.isFunction(fieldSelector)) {
+    fieldSelector(obj);
+  }
+  const field = _.isFunction(fieldSelector)
+    ? fieldSelector(obj)
+    : _.path(_.defaultTo(name)(fieldSelector))(obj);
+
+  /*
+   * React.createElement to svoid warning "React has detected a change in the order of Hooks"
+   * caused by child fieldDecorator component calls to useIntl hook.
+   * https://stackoverflow.com/a/57456179
+   */
+  return _.isFunction(fieldDecorator)
+    ? React.createElement(fieldDecorator, field)
+    : field;
+};
+
+export default columnDecoratorComponent;

package/src/services/format.js

@@ -1 +1 @@
-export const formatNumber = value => value?.toLocaleString();
+export const formatNumber = (value) => value?.toLocaleString();

package/src/services/index.js

@@ -6,14 +6,16 @@ import * as message from "./message";
 import * as sort from "./sort";
 import * as format from "./format";
 import columnDecorator from "./columnDecorator";
+import columnDecoratorComponent from "./columnDecoratorComponent";
 
 export {
   api,
   arrays,
   columnDecorator,
+  columnDecoratorComponent,
   fieldType,
   filters,
   format,
   message,
-  sort
+  sort,
 };

package/src/services/sort.js

@@ -2,23 +2,24 @@ import _ from "lodash/fp";
 
 export const lowerDeburr = _.flow(_.toLower, _.deburr);
 
-export const lowerDeburrPath = path =>
+export const lowerDeburrPath = (path) =>
   _.flow(_.path(path), _.toLower, _.deburr);
 
 export const accentInsensitiveOrder = [lowerDeburr, _.identity];
 
-export const accentInsensitivePathOrder = path => [
+export const accentInsensitivePathOrder = (path) => [
   lowerDeburrPath(path),
-  _.identity
+  _.identity,
 ];
 
 export const i18nOrder = (formatMessage, prefix) =>
   _.flow(
-    value => formatMessage({ id: `${prefix}.${value}`, defaultMessage: value }),
+    (value) =>
+      formatMessage({ id: `${prefix}.${value}`, defaultMessage: value }),
     lowerDeburr
   );
 
-export const getSortInfo = sorting => {
+export const getSortInfo = (sorting) => {
   const columnSorted = _.flow(_.nth(0), _.keys, _.nth(0))(sorting);
 
   const direction =
@@ -44,14 +45,14 @@ export const sortColumn = (
     setColumn(clickedColumn.sort.name);
     setDirection("ascending");
     const sortValues = {
-      [columnName]: "asc"
+      [columnName]: "asc",
     };
     sort([sortValues]);
     return;
   } else {
     setDirection(currentDirection === "ascending" ? "descending" : "ascending");
     const sortValues = {
-      [columnName]: currentDirection === "ascending" ? "desc" : "asc"
+      [columnName]: currentDirection === "ascending" ? "desc" : "asc",
     };
     sort([sortValues]);
     return;

package/src/services/storage.js

@@ -1,5 +1,5 @@
 const token_key = "td_access_token";
 
 export const readToken = () => localStorage.getItem(token_key);
-export const saveToken = token => localStorage.setItem(token_key, token);
+export const saveToken = (token) => localStorage.setItem(token_key, token);
 export const clearToken = () => localStorage.removeItem(token_key);