@reltio/components 1.4.698 → 1.4.702

package/components/activityLog/ActivityFilterEditor/AttributeSelector.js

@@ -0,0 +1,103 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var react_redux_1 = require("react-redux");
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var MultiSelect_1 = __importDefault(require("../../ReactSelect/MultiSelect"));
+var MultiValue_1 = __importDefault(require("../../ReactSelect/commonComponents/MultiValue"));
+var DropdownIndicatorWithIconButton_1 = __importDefault(require("../../commonReactSelectComponents/DropdownIndicatorWithIconButton"));
+var AttributeListItem_1 = __importDefault(require("../../AttributeListItem/AttributeListItem"));
+var styles_1 = require("./styles");
+var AttributeSelector = function (_a) {
+    var selectedAttributes = _a.selectedAttributes, entityType = _a.entityType, onChange = _a.onChange;
+    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
+    var styles = styles_1.useStyles();
+    var prepareItems = react_1.useCallback(function (data, level, prevLabel) {
+        if (level === void 0) { level = 0; }
+        if (prevLabel === void 0) { prevLabel = ''; }
+        return data.reduce(function (acc, item) {
+            if (item.hidden)
+                return acc;
+            var chipLabel = "" + (prevLabel && prevLabel + ' / ') + item.label;
+            acc.push({
+                label: item.label,
+                value: item.uri,
+                attrType: item,
+                chipLabel: chipLabel,
+                level: level
+            });
+            var subAttributes = mdm_sdk_1.getAttributeTypeSubAttributes(metadata, item);
+            return acc.concat(subAttributes ? prepareItems(subAttributes, level + 1, chipLabel) : []);
+        }, []);
+    }, [metadata]);
+    var options = react_1.useMemo(function () { return prepareItems(entityType === null || entityType === void 0 ? void 0 : entityType.attributes); }, [entityType, prepareItems]);
+    var CustomOption = function (_a) {
+        var isFocused = _a.isFocused, isSelected = _a.isSelected, data = _a.data, label = _a.label, innerProps = _a.innerProps;
+        return (react_1.default.createElement("div", __assign({}, innerProps),
+            react_1.default.createElement(AttributeListItem_1.default, { checked: isSelected, level: data.level, data: data, label: label, labelInText: label, isFocused: isFocused })));
+    };
+    var CustomMultiValue = function (_a) {
+        var data = _a.data, props = __rest(_a, ["data"]);
+        return (react_1.default.createElement(MultiValue_1.default, __assign({}, props), data.chipLabel));
+    };
+    return (react_1.default.createElement("div", { className: styles.borderBottom },
+        react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, ui_i18n_1.default.text('Attribute')),
+        react_1.default.createElement(MultiSelect_1.default, { value: selectedAttributes, options: options, TextFieldProps: {
+                InputProps: { disableUnderline: true },
+                classes: { root: styles.dropDownInput }
+            }, components: {
+                DropdownIndicator: DropdownIndicatorWithIconButton_1.default,
+                MultiValue: CustomMultiValue,
+                Option: CustomOption
+            }, onChange: ramda_1.pipe(ramda_1.defaultTo([]), onChange), styles: styles_1.customStyles, classes: styles, menuPlacement: "bottom" })));
+};
+exports.default = AttributeSelector;

package/components/activityLog/ActivityFilterEditor/DateRangeSelector.js

@@ -0,0 +1,114 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
+var classnames_1 = __importDefault(require("classnames"));
+var FormControlLabel_1 = __importDefault(require("@material-ui/core/FormControlLabel"));
+var Radio_1 = __importDefault(require("@material-ui/core/Radio"));
+var RadioGroup_1 = __importDefault(require("@material-ui/core/RadioGroup"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var types_1 = require("../types");
+var IntervalSelector_1 = __importDefault(require("./IntervalSelector"));
+var utils_1 = require("../../../core/utils");
+var ActivityDateRangeEditor_1 = __importDefault(require("./ActivityDateRangeEditor"));
+var hooks_1 = require("../../../hooks");
+var styles_1 = require("./styles");
+var DateRangeSelector = function (_a) {
+    var value = _a.value, onChange = _a.onChange;
+    var styles = styles_1.useStyles();
+    var initInterval = [
+        typeof value.period[0] === 'number' ? value.period[0] : null,
+        typeof value.period[1] === 'string' ? value.period[1] : 'minutes'
+    ];
+    var initDates = [
+        value.period[0] instanceof Date ? value.period[0] : null,
+        value.period[1] instanceof Date ? value.period[1] : null
+    ];
+    var emptyInterval = [null, 'minutes'];
+    var initWithinInterval = value.type === types_1.DateRangeTypes.WITHIN ? initInterval : emptyInterval;
+    var initAgoInterval = value.type === types_1.DateRangeTypes.AGO ? initInterval : emptyInterval;
+    var _b = react_1.useState(initDates), datesInterval = _b[0], setDatesInterval = _b[1];
+    var _c = react_1.useState(initWithinInterval), withinInterval = _c[0], setWithinInterval = _c[1];
+    var _d = react_1.useState(initAgoInterval), agoInterval = _d[0], setAgoInterval = _d[1];
+    var getCurrentPeriodByType = function (type) {
+        if (type === types_1.DateRangeTypes.WITHIN) {
+            return withinInterval;
+        }
+        else if (type === types_1.DateRangeTypes.AGO) {
+            return agoInterval;
+        }
+        else if (type === types_1.DateRangeTypes.BETWEEN) {
+            return datesInterval;
+        }
+    };
+    var changeType = function (type) {
+        if (value.type !== type) {
+            onChange({ period: getCurrentPeriodByType(type), type: type });
+        }
+    };
+    var changePeriod = function (period) {
+        onChange(__assign(__assign({}, value), { period: period }));
+    };
+    hooks_1.useDidUpdateEffect(function () {
+        changePeriod(getCurrentPeriodByType(value.type));
+    }, [withinInterval, agoInterval, datesInterval]);
+    hooks_1.useDidUpdateEffect(function () {
+        if (value.type === types_1.DateRangeTypes.WITHIN) {
+            setWithinInterval(value.period);
+        }
+        else if (value.type === types_1.DateRangeTypes.AGO) {
+            setAgoInterval(value.period);
+        }
+        else if (value.type === types_1.DateRangeTypes.BETWEEN) {
+            setDatesInterval(value.period);
+        }
+    }, [value]);
+    return (react_1.default.createElement("div", { className: styles.borderBottom },
+        react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, ui_i18n_1.default.text('Date')),
+        react_1.default.createElement(RadioGroup_1.default, { value: value.type, onChange: ramda_1.pipe(utils_1.getValue, changeType) },
+            react_1.default.createElement("div", { className: styles.dateOptionWithin },
+                react_1.default.createElement(FormControlLabel_1.default, { value: types_1.DateRangeTypes.WITHIN, control: react_1.default.createElement(Radio_1.default, null), label: ui_i18n_1.default.text('Within the last'), classes: { label: classnames_1.default(styles.dateOptionLabel, styles.labels) } }),
+                react_1.default.createElement(IntervalSelector_1.default, { interval: withinInterval, onChange: setWithinInterval, onFocus: function () { return changeType(types_1.DateRangeTypes.WITHIN); } })),
+            react_1.default.createElement("div", { className: styles.dateOptionAgo },
+                react_1.default.createElement(FormControlLabel_1.default, { value: types_1.DateRangeTypes.AGO, control: react_1.default.createElement(Radio_1.default, null), label: ui_i18n_1.default.text('More than'), classes: { label: classnames_1.default(styles.dateOptionLabel, styles.labels) } }),
+                react_1.default.createElement(IntervalSelector_1.default, { interval: agoInterval, onChange: setAgoInterval, onFocus: function () { return changeType(types_1.DateRangeTypes.AGO); } }),
+                react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.agoLabel, styles.labels), variant: 'subtitle1' }, ui_i18n_1.default.text('Ago'))),
+            react_1.default.createElement("div", { className: styles.dateOption },
+                react_1.default.createElement(FormControlLabel_1.default, { value: types_1.DateRangeTypes.BETWEEN, control: react_1.default.createElement(Radio_1.default, null), label: ui_i18n_1.default.text('Date range'), classes: { label: classnames_1.default(styles.dateOptionLabel, styles.labels) } }),
+                react_1.default.createElement(ActivityDateRangeEditor_1.default, { values: datesInterval, onChange: setDatesInterval, onFocus: function () { return changeType(types_1.DateRangeTypes.BETWEEN); } })))));
+};
+exports.default = DateRangeSelector;

package/components/activityLog/ActivityFilterEditor/IntervalSelector.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var ramda_1 = require("ramda");
+var classnames_1 = __importDefault(require("classnames"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var capitalize_1 = __importDefault(require("@material-ui/core/utils/capitalize"));
+var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
+var SimpleDropDownSelector_1 = __importDefault(require("../../SimpleDropDownSelector/SimpleDropDownSelector"));
+var utils_1 = require("../../../core/utils");
+var styles_1 = require("./styles");
+var periods = [
+    ui_i18n_1.default.text('minutes'),
+    ui_i18n_1.default.text('hours'),
+    ui_i18n_1.default.text('days'),
+    ui_i18n_1.default.text('weeks'),
+    ui_i18n_1.default.text('months'),
+    ui_i18n_1.default.text('years')
+];
+var IntervalSelector = function (_a) {
+    var _b = _a.interval, value = _b[0], unit = _b[1], onChange = _a.onChange, onFocus = _a.onFocus;
+    var styles = styles_1.useStyles();
+    var getIntervalFromValue = function (newValue) { return [newValue, unit]; };
+    var getIntervalFromUnit = function (_a) {
+        var newUnit = _a.value;
+        return [value, newUnit];
+    };
+    var onNumberChange = ramda_1.pipe(utils_1.getValue, parseInt, getIntervalFromValue, onChange);
+    var onUnitChange = ramda_1.pipe(getIntervalFromUnit, onChange);
+    return (react_1.default.createElement("div", { className: styles.intervalContainer },
+        react_1.default.createElement(TextField_1.default, { type: "number", value: value || '', onChange: onNumberChange, inputProps: { min: 1, onFocus: onFocus }, InputProps: {
+                classes: {
+                    root: classnames_1.default(styles.input, styles.labels)
+                }
+            }, className: classnames_1.default(styles.dateInput, styles.dateInputNumber) }),
+        react_1.default.createElement(SimpleDropDownSelector_1.default, { label: '', placeholder: capitalize_1.default(unit), className: classnames_1.default(styles.dateInputPeriod), value: { value: unit, label: capitalize_1.default(unit) }, options: periods.map(function (value) { return ({
+                value: value,
+                label: capitalize_1.default(value)
+            }); }), onChange: onUnitChange, TextFieldProps: {
+                inputProps: { onFocus: onFocus },
+                InputProps: {
+                    classes: {
+                        root: classnames_1.default(styles.input, styles.labels)
+                    }
+                }
+            } })));
+};
+exports.default = IntervalSelector;

package/components/activityLog/ActivityFilterEditor/SourceSelector.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var MultiSelect_1 = __importDefault(require("../../ReactSelect/MultiSelect"));
+var react_redux_1 = require("react-redux");
+var classnames_1 = __importDefault(require("classnames"));
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var DropdownIndicatorWithIconButton_1 = __importDefault(require("../../commonReactSelectComponents/DropdownIndicatorWithIconButton"));
+var styles_1 = require("./styles");
+var SourceSelector = function (_a) {
+    var selectedSources = _a.selectedSources, onChange = _a.onChange;
+    var styles = styles_1.useStyles();
+    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
+    var options = ramda_1.sortBy(function (option) { return option.label; })(metadata.sources);
+    return (react_1.default.createElement("div", { className: styles.borderBottom },
+        react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, ui_i18n_1.default.text('Source')),
+        react_1.default.createElement(MultiSelect_1.default, { value: selectedSources, onChange: ramda_1.pipe(ramda_1.defaultTo([]), onChange), options: options, TextFieldProps: {
+                InputProps: { disableUnderline: true },
+                classes: { root: styles.dropDownInput }
+            }, components: {
+                DropdownIndicator: DropdownIndicatorWithIconButton_1.default
+            }, styles: styles_1.customStyles, classes: styles, getOptionValue: ramda_1.prop('abbreviation'), menuPlacement: "bottom" })));
+};
+exports.default = SourceSelector;

package/components/activityLog/ActivityFilterEditor/UserSelector.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_redux_1 = require("react-redux");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
+var classnames_1 = __importDefault(require("classnames"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var MultiSelect_1 = __importDefault(require("../../ReactSelect/MultiSelect"));
+var DropdownIndicatorWithIconButton_1 = __importDefault(require("../../commonReactSelectComponents/DropdownIndicatorWithIconButton"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var styles_1 = require("./styles");
+var UserSelector = function (_a) {
+    var selectedUsers = _a.selectedUsers, onChange = _a.onChange;
+    var styles = styles_1.useStyles();
+    var valueToOption = function (value) { return ({ value: value, label: value }); };
+    var prepareValues = function (values) { return values.map(valueToOption); };
+    var filterUsers = function (inputValue) { return function (users) {
+        return inputValue ? users.filter(function (username) { return mdm_sdk_1.utils.strings.search(username, inputValue); }) : users;
+    }; };
+    var tenant = react_redux_1.useSelector(mdm_module_1.default.selectors.getTenant);
+    var uiPath = react_redux_1.useSelector(mdm_module_1.default.selectors.getUIPath);
+    var cachedRequest = react_1.useRef();
+    var getOptions = function (inputValue) {
+        if (!cachedRequest.current) {
+            cachedRequest.current = mdm_sdk_1.getAllUsersForTenant(tenant, uiPath);
+        }
+        return cachedRequest.current.then(ramda_1.pipe(ramda_1.prop('array'), ramda_1.pluck('username'), filterUsers(inputValue), prepareValues));
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, ui_i18n_1.default.text('User')),
+        react_1.default.createElement(MultiSelect_1.default, { value: prepareValues(selectedUsers), onChange: ramda_1.pipe(ramda_1.defaultTo([]), ramda_1.pluck('value'), onChange), defaultOptions: true, getOptions: getOptions, TextFieldProps: {
+                InputProps: { disableUnderline: true },
+                className: styles.dropDownInput
+            }, components: {
+                DropdownIndicator: DropdownIndicatorWithIconButton_1.default
+            }, styles: styles_1.customStyles, classes: styles })));
+};
+exports.default = UserSelector;

package/components/activityLog/ActivityFilterEditor/styles.js

@@ -0,0 +1,103 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = exports.customStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.customStyles = {
+    input: function (currentStyles) { return (__assign(__assign({}, currentStyles), { fontSize: '14px' })); }
+};
+exports.useStyles = styles_1.makeStyles({
+    container: {
+        padding: '24px 10px 0px',
+        margin: '0 6px'
+    },
+    labels: {
+        fontSize: '14px'
+    },
+    filterSubtitle: {
+        paddingBottom: '10px',
+        paddingLeft: '5px'
+    },
+    agoLabel: {
+        minWidth: '30px',
+        textAlign: 'end',
+        margin: 'auto'
+    },
+    dateOption: {
+        display: 'flex',
+        marginRight: '30px'
+    },
+    dateOptionAgo: {
+        display: 'flex'
+    },
+    dateOptionWithin: {
+        display: 'flex',
+        marginRight: '30px',
+        paddingBottom: '10px'
+    },
+    dateRangeRoot: {
+        width: '100%'
+    },
+    dateInput: {
+        backgroundColor: 'rgba(0, 0, 0, 0.03)'
+    },
+    dateInputNumber: {
+        minWidth: '60px',
+        marginRight: '25px',
+        height: '100%'
+    },
+    input: {
+        height: '100%',
+        paddingLeft: '12px',
+        paddingRight: '8px'
+    },
+    dateInputPeriod: {
+        width: '100%'
+    },
+    dateOptionLabel: {
+        minWidth: '100px'
+    },
+    dropDownInput: {
+        width: '100%',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.03)',
+        borderTop: '4px'
+    },
+    activityPlaceholder: {
+        paddingLeft: '10px',
+        color: 'rgba(0,0,0,0.87)'
+    },
+    filterControls: {
+        display: 'flex',
+        paddingTop: '30px'
+    },
+    clearButton: {
+        marginRight: 'auto'
+    },
+    paper: {
+        minWidth: '112px'
+    },
+    borderBottom: {
+        borderBottom: 'solid 1px rgba(0, 0, 0, 0.12)',
+        paddingBottom: '10px',
+        marginBottom: '15px'
+    },
+    intervalContainer: {
+        display: 'flex',
+        width: '100%'
+    },
+    option: {
+        fontSize: '14px',
+        height: '32px'
+    }
+});

package/components/activityLog/ActivityFilterEditor/utils/getSelectorActivityTypes.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSelectorActivityTypes = void 0;
+var ramda_1 = require("ramda");
+var types_1 = require("../../types");
+var profileRelatedActivityTypes = [
+    types_1.ActivityTypes.ENTITY_CREATED,
+    types_1.ActivityTypes.ENTITY_CHANGED,
+    types_1.ActivityTypes.ENTITIES_MERGED,
+    types_1.ActivityTypes.ENTITIES_SPLITTED,
+    types_1.ActivityTypes.ENTITY_LOST_MERGE,
+    types_1.ActivityTypes.RELATIONSHIP_CREATED,
+    types_1.ActivityTypes.RELATIONSHIP_REMOVED,
+    types_1.ActivityTypes.RELATIONSHIP_CHANGED,
+    types_1.ActivityTypes.POTENTIAL_MATCHES_FOUND,
+    types_1.ActivityTypes.POTENTIAL_MATCHES_REMOVED,
+    types_1.ActivityTypes.NOT_MATCHES_SET,
+    types_1.ActivityTypes.NOT_MATCHES_RESET,
+    types_1.ActivityTypes.ENTITIES_MERGED_MANUALLY,
+    types_1.ActivityTypes.ENTITIES_MERGED_ON_THE_FLY
+];
+var groupRelatedActivityTypes = [
+    types_1.ActivityTypes.GROUP_CREATED,
+    types_1.ActivityTypes.GROUP_REMOVED,
+    types_1.ActivityTypes.GROUP_CHANGED
+];
+var getSelectorActivityTypes = function (metadata, entityType) {
+    return entityType
+        ? profileRelatedActivityTypes
+        : ramda_1.pipe(Object.keys, ramda_1.filter(function (option) {
+            return (ramda_1.has('groupTypes', metadata) && !ramda_1.isEmpty(metadata.groupTypes)) ||
+                !ramda_1.includes(option, groupRelatedActivityTypes);
+        }))(types_1.ActivityTypes);
+};
+exports.getSelectorActivityTypes = getSelectorActivityTypes;

package/components/activityLog/ActivityLog/ActivityLog.js

@@ -0,0 +1,67 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Divider_1 = __importDefault(require("@material-ui/core/Divider"));
+var react_1 = __importStar(require("react"));
+var BasicTablePagination_1 = __importDefault(require("../../BasicTableView/BasicTablePagination/BasicTablePagination"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var AutoSizeList_1 = __importDefault(require("../../AutoSizeList/AutoSizeList"));
+var helpers_1 = require("./helpers");
+var ramda_1 = require("ramda");
+var activities_1 = require("../utils/activities");
+var GroupItem_1 = __importDefault(require("./items/GroupItem/GroupItem"));
+var ActivityItem_1 = __importDefault(require("./items/ActivityItem/ActivityItem"));
+var classnames_1 = __importDefault(require("classnames"));
+var CollapsibleItemsContext_1 = require("../contexts/CollapsibleItemsContext");
+var styles_1 = require("./styles");
+var PAGINATION_HEIGHT = 60;
+var ActivityLog = function (_a) {
+    var width = _a.width, height = _a.height, activities = _a.activities, count = _a.count, page = _a.page, onChangePage = _a.onChangePage, rowsPerPage = _a.rowsPerPage, onChangeRowsPerPage = _a.onChangeRowsPerPage, rowsPerPageOptions = _a.rowsPerPageOptions;
+    var styles = styles_1.useStyles();
+    var _b = react_1.useState([]), groupedItems = _b[0], setGroupedItems = _b[1];
+    var toggleGroupedItem = function (index) {
+        setGroupedItems(ramda_1.adjust(index, ramda_1.evolve({ collapsed: ramda_1.not })));
+    };
+    react_1.useEffect(function () {
+        ramda_1.pipe(ramda_1.filter(activities_1.isValidActivity), helpers_1.buildGroupedItems, setGroupedItems)(activities);
+    }, [activities]);
+    var flatItems = react_1.useMemo(function () { return helpers_1.flattenGroupedItems(groupedItems); }, [groupedItems]);
+    var renderRow = react_1.useCallback(function (_a) {
+        var _b;
+        var data = _a.data, index = _a.index;
+        var item = data[index];
+        return (react_1.default.createElement("div", { className: classnames_1.default(styles.listRow, (_b = {},
+                _b[styles.singleRow] = data.length === 1,
+                _b[styles.firstRow] = index === 0,
+                _b[styles.lastRow] = index === data.length - 1,
+                _b)) }, helpers_1.isGroupItem(item) ? (react_1.default.createElement(GroupItem_1.default, { item: item, onToggle: toggleGroupedItem })) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(ActivityItem_1.default, { item: item }),
+            react_1.default.createElement(Divider_1.default, { className: styles.rowDivider, light: true, variant: 'inset' })))));
+    }, []); // eslint-disable-line
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(CollapsibleItemsContext_1.CollapsibleItemsProvider, null,
+            react_1.default.createElement(AutoSizeList_1.default, { width: width, height: height - PAGINATION_HEIGHT, data: flatItems, defaultItemSize: 40 }, renderRow)),
+        react_1.default.createElement(BasicTablePagination_1.default, { count: count, onChangePage: onChangePage, page: page, rowsPerPage: rowsPerPage, onChangeRowsPerPage: onChangeRowsPerPage, rowsPerPageOptions: rowsPerPageOptions, labelRowsPerPage: ui_i18n_1.default.text('Events per page:') })));
+};
+exports.default = ActivityLog;

package/components/activityLog/ActivityLog/helpers.js

@@ -0,0 +1,33 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isGroupItem = exports.flattenGroupedItems = exports.buildGroupedItems = void 0;
+var ramda_1 = require("ramda");
+var moment_1 = __importDefault(require("moment"));
+var buildGroupedItem = function (_a) {
+    var day = _a[0], children = _a[1];
+    return ({
+        timestamp: moment_1.default(day).valueOf(),
+        collapsed: false,
+        children: children
+    });
+};
+var getDay = function (_a) {
+    var timestamp = _a.timestamp;
+    return moment_1.default(timestamp).startOf('day');
+};
+exports.buildGroupedItems = ramda_1.pipe(ramda_1.groupBy(getDay), ramda_1.toPairs, ramda_1.map(buildGroupedItem));
+var chainIndexed = ramda_1.addIndex(ramda_1.chain);
+exports.flattenGroupedItems = chainIndexed(function (_a, index) {
+    var children = _a.children, collapsed = _a.collapsed, timestamp = _a.timestamp;
+    var groupItem = { collapsed: collapsed, timestamp: timestamp, index: index };
+    return collapsed ? [groupItem] : __spreadArray([groupItem], children);
+});
+exports.isGroupItem = ramda_1.has('collapsed');

package/components/activityLog/ActivityLog/items/ActivityItem/ActivityItem.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var activities_1 = require("../../../utils/activities");
+var ActivitiesFactory_1 = __importDefault(require("../../../activities/ActivitiesFactory"));
+var ramda_1 = require("ramda");
+var styles_1 = require("./styles");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ActivityItem = function (_a) {
+    var item = _a.item;
+    var styles = styles_1.useStyles();
+    var type = activities_1.getActivityType(item);
+    var activities = ramda_1.pipe(activities_1.splitActivityByType, ramda_1.filter(activities_1.isValidActivity))(item);
+    return (react_1.default.createElement("div", { className: styles.activityItem },
+        react_1.default.createElement("div", { className: styles.activityIcon }, ActivitiesFactory_1.default.getIcon(type)),
+        react_1.default.createElement("div", { className: styles.activityInfo },
+            react_1.default.createElement(Typography_1.default, { className: styles.activityUser }, item.user),
+            react_1.default.createElement("span", { className: styles.date }, ui_i18n_1.default.date(item.timestamp, 'LT')),
+            activities.map(function (activity, index) {
+                return (react_1.default.createElement("div", { key: index, className: styles.activityEvent }, ActivitiesFactory_1.default.getComponent({
+                    type: activities_1.getActivityType(activity),
+                    data: activity
+                })));
+            }))));
+};
+exports.default = ActivityItem;