@reltio/components 1.4.842 → 1.4.846

package/components/activityLog/ActivityFilterEditor/styles.js

@@ -38,31 +38,13 @@ exports.useStyles = styles_1.makeStyles({
         marginRight: '30px'
     },
     dateOptionAgo: {
-        display: 'flex'
+        display: 'flex',
+        marginBottom: '10px'
     },
     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%'
+        marginBottom: '10px'
     },
     dateOptionLabel: {
         minWidth: '100px'
@@ -73,10 +55,6 @@ exports.useStyles = styles_1.makeStyles({
         backgroundColor: 'rgba(0, 0, 0, 0.03)',
         borderTop: '4px'
     },
-    activityPlaceholder: {
-        paddingLeft: '10px',
-        color: 'rgba(0,0,0,0.87)'
-    },
     filterControls: {
         display: 'flex',
         paddingTop: '30px'
@@ -84,18 +62,11 @@ exports.useStyles = styles_1.makeStyles({
     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/ActivityLogFilter/helpers.js

@@ -7,7 +7,7 @@ exports.getFilterLabel = void 0;
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var types_1 = require("../types");
+var types_1 = require("../../../types");
 var activities_1 = require("../utils/activities");
 var getFilterLabel = function (filters) {
     var getLabel = ramda_1.curry(function (unit, pluralUnit, values) {

package/components/activityLog/types/ActivitiesFilter.d.ts

@@ -1,15 +1,10 @@
 import { Source } from '@reltio/mdm-sdk';
 import { ActivityTypes } from './ActivityTypes';
-import { AttributeOption } from './AttributeOption';
-import { DateRangeTypes } from './DateRangeTypes';
-export declare type ActivitiesFilterDateRange = {
-    type: DateRangeTypes;
-    period: [number, string] | [Date, Date];
-};
+import { AttributeOption, DateRangeFilter } from '../../../types';
 export declare type ActivitiesFilter = {
     users: string[];
     activities: ActivityTypes[];
-    dateRange: ActivitiesFilterDateRange;
+    dateRange: DateRangeFilter;
     attributes?: AttributeOption[];
     sources?: Source[];
     entityUri?: string;

package/components/activityLog/types/index.d.ts

@@ -1,9 +1,7 @@
-export type { ActivitiesFilter, ActivitiesFilterDateRange } from './ActivitiesFilter';
+export type { ActivitiesFilter } from './ActivitiesFilter';
 export type { ActivityData } from './ActivityData';
 export type { ActivityDelta } from './ActivityDelta';
 export type { ActivityItem } from './ActivityItem';
-export type { AttributeOption } from './AttributeOption';
 export type { DeltaValue } from './DeltaValue';
 export { ActivityTypes } from './ActivityTypes';
 export { DeltaTypes } from './DeltaTypes';
-export { DateRangeTypes } from './DateRangeTypes';

package/components/activityLog/types/index.js

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateRangeTypes = exports.DeltaTypes = exports.ActivityTypes = void 0;
+exports.DeltaTypes = exports.ActivityTypes = void 0;
 var ActivityTypes_1 = require("./ActivityTypes");
 Object.defineProperty(exports, "ActivityTypes", { enumerable: true, get: function () { return ActivityTypes_1.ActivityTypes; } });
 var DeltaTypes_1 = require("./DeltaTypes");
 Object.defineProperty(exports, "DeltaTypes", { enumerable: true, get: function () { return DeltaTypes_1.DeltaTypes; } });
-var DateRangeTypes_1 = require("./DateRangeTypes");
-Object.defineProperty(exports, "DateRangeTypes", { enumerable: true, get: function () { return DateRangeTypes_1.DateRangeTypes; } });

package/components/activityLog/utils/filters.d.ts

@@ -1,3 +1,3 @@
-import { ActivitiesFilterDateRange } from '../types';
+import { DateRangeFilter } from '../../../types';
 export declare const buildActivitiesFilterString: any;
-export declare const isDateRangeValid: (value: ActivitiesFilterDateRange) => boolean;
+export declare const isDateRangeValid: (value: DateRangeFilter) => boolean;

package/components/activityLog/utils/filters.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isDateRangeValid = exports.buildActivitiesFilterString = void 0;
 var ramda_1 = require("ramda");
 var moment_1 = __importDefault(require("moment"));
-var types_1 = require("../types");
+var types_1 = require("../../../types");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var wrapInBrackets = function (str) { return "(" + str + ")"; };
 var multiValueFilter = function (filterClauseFn) { return function (values) { return values.map(filterClauseFn).join(' or '); }; };

package/components/attributes/inline/SimpleAttributeEditor/styles.d.ts

@@ -2,5 +2,5 @@ declare type StylesProps = {
     color: string;
     containerWidth: number;
 };
-export declare const useStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"input" | "paper" | "inputMultiline" | "textField" | "popoverRoot" | "booleanEditor" | "timestampEditor">;
+export declare const useStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"input" | "inputMultiline" | "paper" | "textField" | "popoverRoot" | "booleanEditor" | "timestampEditor">;
 export {};

package/components/{activityLog/ActivityFilterEditor/ActivityDateRangeEditor.d.ts → editors/CustomDateRangeEditor/CustomDateRangeEditor.d.ts}

@@ -3,7 +3,7 @@ declare type DateValues = [Date, Date];
 declare type Props = {
     values: DateValues;
     onChange: (values: DateValues) => void;
-    onFocus: () => void;
+    onFocus?: () => void;
 };
-declare const ActivityDateRangeEditor: ({ values, onChange, onFocus }: Props) => JSX.Element;
-export default ActivityDateRangeEditor;
+declare const CustomDateRangeEditor: ({ values, onChange, onFocus }: Props) => JSX.Element;
+export default CustomDateRangeEditor;

package/components/{activityLog/ActivityFilterEditor/ActivityDateRangeEditor.js → editors/CustomDateRangeEditor/CustomDateRangeEditor.js}

@@ -38,7 +38,7 @@ var formatValue = function (value, placeholder) {
         ? "" + placeholder
         : "" + mdm_sdk_1.formatDataTypeValue({ dataTypeDefinition: { type: mdm_sdk_1.DataTypes.TYPE_ACTIVENESS_DATE } }, value);
 };
-var ActivityDateRangeEditor = function (_a) {
+var CustomDateRangeEditor = function (_a) {
     var values = _a.values, onChange = _a.onChange, onFocus = _a.onFocus;
     var placeholder = localeFormat;
     var inputRef = react_1.useRef(null);
@@ -55,13 +55,14 @@ var ActivityDateRangeEditor = function (_a) {
     var onCancel = function () {
         setOpen(false);
     };
-    return (react_1.default.createElement("div", { className: styles.dateRangeRoot },
-        react_1.default.createElement(TextField_1.default, { fullWidth: true, value: values.map(function (value) { return formatValue(value, placeholder); }).join(' \u2014 '), onClick: handleToggle, variant: "filled", margin: "dense", ref: inputRef, InputProps: {
+    return (react_1.default.createElement("div", { className: styles.root },
+        react_1.default.createElement(TextField_1.default, { fullWidth: true, value: values.map(function (value) { return formatValue(value, placeholder); }).join(' \u2014 '), onClick: handleToggle, variant: "filled", ref: inputRef, InputProps: {
                 endAdornment: (react_1.default.createElement(DropdownIndicatorWithIconButton_1.default, { selectProps: { classes: styles, menuIsOpen: open }, innerProps: {} })),
                 disableUnderline: ramda_1.isNil(values),
                 readOnly: true,
                 classes: {
-                    root: styles.labels
+                    root: styles.inputRoot,
+                    input: styles.input
                 }
             }, InputLabelProps: {
                 shrink: false
@@ -84,4 +85,4 @@ var ActivityDateRangeEditor = function (_a) {
                 // @ts-ignore
                 values: values, onCancel: onCancel, onApply: onApply, type: mdm_sdk_1.DataTypes.TYPE_ACTIVENESS_DATE }))));
 };
-exports.default = ActivityDateRangeEditor;
+exports.default = CustomDateRangeEditor;

package/components/editors/CustomDateRangeEditor/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"input" | "root" | "dateOptionLabel" | "dropdownIndicator" | "inputRoot" | "paper">;

package/components/editors/CustomDateRangeEditor/styles.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    root: {
+        flex: 1
+    },
+    dropdownIndicator: {
+        transition: 'transform .15s ease'
+    },
+    inputRoot: {
+        fontSize: '14px',
+        height: 46
+    },
+    input: {
+        padding: '0 12px 0'
+    },
+    dateOptionLabel: {
+        minWidth: '100px'
+    },
+    paper: {
+        minWidth: '112px'
+    }
+});

package/components/editors/DateRangeEditor/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"underline" | "paper" | "dropdownIndicator" | "adornedEnd" | "menuItem" | "menuText" | "inputRoot" | "inputLabel">;
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"underline" | "dropdownIndicator" | "adornedEnd" | "inputRoot" | "paper" | "menuItem" | "menuText" | "inputLabel">;

package/components/history/DateRangeSelector/DateRangeSelector.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DateRangeFilter } from '../../../types';
+declare type Props = {
+    value: DateRangeFilter;
+    onChange: (range: DateRangeFilter) => void;
+    className?: string;
+};
+declare const DateRangeSelector: ({ value, onChange, className }: Props) => JSX.Element;
+export default DateRangeSelector;

package/components/history/DateRangeSelector/DateRangeSelector.js

@@ -0,0 +1,91 @@
+"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 ui_i18n_1 = __importDefault(require("ui-i18n"));
+var classnames_1 = __importDefault(require("classnames"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var SimpleDropDownSelector_1 = __importDefault(require("../../SimpleDropDownSelector/SimpleDropDownSelector"));
+var utils_1 = require("./utils");
+var DateIntervalSelector_1 = __importDefault(require("../../DateIntervalSelector/DateIntervalSelector"));
+var hooks_1 = require("../../../hooks");
+var CustomDateRangeEditor_1 = __importDefault(require("../../editors/CustomDateRangeEditor/CustomDateRangeEditor"));
+var types_1 = require("../../../types");
+var styles_1 = require("./styles");
+var emptyDates = [null, null];
+var emptyInterval = [null, 'hours'];
+var DateRangeSelector = function (_a) {
+    var value = _a.value, onChange = _a.onChange, className = _a.className;
+    var styles = styles_1.useStyles();
+    var isIntervalType = function (type) { return type === types_1.DateRangeTypes.WITHIN || type === types_1.DateRangeTypes.AGO; };
+    var isBetweenType = function (type) { return type === types_1.DateRangeTypes.BETWEEN; };
+    var initDatesInterval = isBetweenType(value === null || value === void 0 ? void 0 : value.type) ? value.period : emptyDates;
+    var initInterval = isIntervalType(value === null || value === void 0 ? void 0 : value.type) ? value.period : emptyInterval;
+    var _b = react_1.useState(initDatesInterval), datesInterval = _b[0], setDatesInterval = _b[1];
+    var _c = react_1.useState(initInterval), interval = _c[0], setInterval = _c[1];
+    var selectedType = (value === null || value === void 0 ? void 0 : value.type) || types_1.DateRangeTypes.WITHIN;
+    var getCurrentPeriodByType = function (type) {
+        if (isIntervalType(type)) {
+            return interval;
+        }
+        else if (isBetweenType(type)) {
+            return datesInterval;
+        }
+    };
+    var changeType = function (_a) {
+        var type = _a.value;
+        if ((value === null || value === void 0 ? void 0 : value.type) !== type) {
+            onChange({ period: getCurrentPeriodByType(type), type: type });
+        }
+    };
+    var changePeriod = function (period) {
+        onChange({ type: selectedType, period: period });
+    };
+    hooks_1.useDidUpdateEffect(function () {
+        if (value) {
+            if (isIntervalType(value.type)) {
+                setInterval(value.period);
+            }
+            else if (isBetweenType(value.type)) {
+                setDatesInterval(value.period);
+            }
+        }
+        else {
+            setDatesInterval(emptyDates);
+            setInterval(emptyInterval);
+        }
+    }, [value]);
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.root, className) },
+        react_1.default.createElement(Typography_1.default, { className: styles.title, variant: 'subtitle1' }, ui_i18n_1.default.text('Date')),
+        react_1.default.createElement("div", { className: styles.intervalContainer },
+            react_1.default.createElement(SimpleDropDownSelector_1.default, { label: '', className: styles.typeInput, value: {
+                    value: selectedType,
+                    label: utils_1.getDateRangeTypeLabel(selectedType)
+                }, options: utils_1.dateRangeTypeOptions.map(function (option) { return ({
+                    value: option,
+                    label: utils_1.getDateRangeTypeLabel(option)
+                }); }), onChange: changeType }),
+            isIntervalType(selectedType) ? (react_1.default.createElement(DateIntervalSelector_1.default, { interval: interval, onChange: changePeriod })) : (react_1.default.createElement(CustomDateRangeEditor_1.default, { values: datesInterval, onChange: changePeriod })))));
+};
+exports.default = DateRangeSelector;

package/components/history/DateRangeSelector/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "root" | "intervalContainer" | "typeInput">;

package/components/history/DateRangeSelector/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    root: {
+        flex: 1
+    },
+    title: {
+        paddingBottom: '10px',
+        paddingLeft: '5px',
+        fontSize: '14px'
+    },
+    intervalContainer: {
+        display: 'flex',
+        justifyContent: 'space-between'
+    },
+    typeInput: {
+        width: 160,
+        marginRight: 10
+    }
+});

package/components/history/DateRangeSelector/utils.d.ts

@@ -0,0 +1,3 @@
+import { DateRangeTypes } from '../../../types';
+export declare const dateRangeTypeOptions: DateRangeTypes[];
+export declare const getDateRangeTypeLabel: (type: DateRangeTypes) => string;

package/components/history/DateRangeSelector/utils.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDateRangeTypeLabel = exports.dateRangeTypeOptions = void 0;
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var types_1 = require("../../../types");
+exports.dateRangeTypeOptions = [types_1.DateRangeTypes.WITHIN, types_1.DateRangeTypes.AGO, types_1.DateRangeTypes.BETWEEN];
+var getDateRangeTypeLabel = function (type) {
+    var _a;
+    var labels = (_a = {},
+        _a[types_1.DateRangeTypes.WITHIN] = ui_i18n_1.default.text('Within the last'),
+        _a[types_1.DateRangeTypes.AGO] = ui_i18n_1.default.text('More than'),
+        _a[types_1.DateRangeTypes.BETWEEN] = ui_i18n_1.default.text('Date range'),
+        _a);
+    return labels[type] || '';
+};
+exports.getDateRangeTypeLabel = getDateRangeTypeLabel;

package/components/history/HistoryActivitySelector/HistoryActivitySelector.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { HistoryActivityType } from '../types/HistoryFilter';
+declare type Props = {
+    selectedHistoryActivityTypes: HistoryActivityType[];
+    onChange: (activities: HistoryActivityType[]) => void;
+    className?: string;
+};
+declare const HistoryActivitySelector: ({ selectedHistoryActivityTypes, onChange, className }: Props) => JSX.Element;
+export default HistoryActivitySelector;

package/components/history/HistoryActivitySelector/HistoryActivitySelector.js

@@ -0,0 +1,27 @@
+"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 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 utils_1 = require("./utils");
+var styles_1 = require("./styles");
+var HistoryActivitySelector = function (_a) {
+    var selectedHistoryActivityTypes = _a.selectedHistoryActivityTypes, onChange = _a.onChange, className = _a.className;
+    var styles = styles_1.useStyles();
+    var valueToOption = function (value) { return ({ value: value, label: utils_1.getHistoryActivityLabel(value) }); };
+    var prepareValues = function (values) { return values.map(valueToOption); };
+    var options = prepareValues(utils_1.historyActivityOptions);
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.root, className) },
+        react_1.default.createElement(Typography_1.default, { className: styles.title, variant: 'subtitle1' }, ui_i18n_1.default.text('Activity')),
+        react_1.default.createElement(MultiSelect_1.default, { value: prepareValues(selectedHistoryActivityTypes), onChange: ramda_1.pipe(ramda_1.defaultTo([]), ramda_1.pluck('value'), onChange), options: options, TextFieldProps: { classes: { root: styles.dropDownInput } }, components: {
+                DropdownIndicator: DropdownIndicatorWithIconButton_1.default
+            }, styles: styles_1.customStyles, classes: styles, menuPlacement: "bottom" })));
+};
+exports.default = HistoryActivitySelector;

package/components/history/HistoryActivitySelector/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const customStyles: {
+    input: (currentStyles: any) => any;
+};
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"option" | "title" | "root" | "dropDownInput" | "valueContainer">;

package/components/history/HistoryActivitySelector/styles.js

@@ -0,0 +1,42 @@
+"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({
+    root: {
+        flex: 1
+    },
+    title: {
+        paddingBottom: '10px',
+        paddingLeft: '5px',
+        fontSize: '14px'
+    },
+    dropDownInput: {
+        width: '100%',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.03)',
+        borderTop: '4px'
+    },
+    valueContainer: {
+        overflowY: 'auto',
+        height: 44
+    },
+    option: {
+        fontSize: '14px',
+        height: '32px'
+    }
+});

package/components/history/HistoryActivitySelector/utils.d.ts

@@ -0,0 +1,3 @@
+import { HistoryActivityType } from '../types/HistoryFilter';
+export declare const historyActivityOptions: HistoryActivityType[];
+export declare const getHistoryActivityLabel: (type: HistoryActivityType) => string;

package/components/history/HistoryActivitySelector/utils.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHistoryActivityLabel = exports.historyActivityOptions = void 0;
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var HistoryFilter_1 = require("../types/HistoryFilter");
+exports.historyActivityOptions = [
+    HistoryFilter_1.HistoryActivityType.UPDATE,
+    HistoryFilter_1.HistoryActivityType.MERGE,
+    HistoryFilter_1.HistoryActivityType.UNMERGE
+];
+var getHistoryActivityLabel = function (type) {
+    var _a;
+    var labels = (_a = {},
+        _a[HistoryFilter_1.HistoryActivityType.UPDATE] = ui_i18n_1.default.text('Update'),
+        _a[HistoryFilter_1.HistoryActivityType.MERGE] = ui_i18n_1.default.text('Merge'),
+        _a[HistoryFilter_1.HistoryActivityType.UNMERGE] = ui_i18n_1.default.text('Unmerge'),
+        _a);
+    return labels[type] || '';
+};
+exports.getHistoryActivityLabel = getHistoryActivityLabel;

package/components/history/HistoryFilterButton/HistoryFilterButton.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TEntityType } from '@reltio/mdm-sdk';
+import { HistoryFilter } from '../types';
+declare type Props = {
+    filter: HistoryFilter;
+    onApplyFilter: (filter: HistoryFilter) => void;
+    entityType: TEntityType;
+};
+declare const HistoryFilterButton: ({ filter, onApplyFilter, entityType }: Props) => JSX.Element;
+export default HistoryFilterButton;

package/components/history/HistoryFilterButton/HistoryFilterButton.js

@@ -0,0 +1,87 @@
+"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 FilterList_1 = __importDefault(require("@material-ui/icons/FilterList"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var Popover_1 = __importDefault(require("@material-ui/core/Popover"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var SmallIconButton_1 = require("../../SmallIconButton");
+var UserSelector_1 = __importDefault(require("../../UserSelector/UserSelector"));
+var AttributeSelector_1 = __importDefault(require("../../AttributeSelector/AttributeSelector"));
+var DateRangeSelector_1 = __importDefault(require("../DateRangeSelector/DateRangeSelector"));
+var HistoryActivitySelector_1 = __importDefault(require("../HistoryActivitySelector/HistoryActivitySelector"));
+var styles_1 = require("./styles");
+var HistoryFilterButton = function (_a) {
+    var filter = _a.filter, onApplyFilter = _a.onApplyFilter, entityType = _a.entityType;
+    var styles = styles_1.useStyles();
+    var _b = react_1.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var openPopup = function (event) { return setAnchorEl(event.currentTarget); };
+    var closePopup = function () { return setAnchorEl(null); };
+    var _c = react_1.useState(filter), currentValue = _c[0], setCurrentValue = _c[1];
+    var clearCurrentValue = function () { return setCurrentValue(null); };
+    var handlePropChange = ramda_1.curry(function (propName, value) {
+        setCurrentValue(function (filterValue) {
+            var _a;
+            return (__assign(__assign({}, filterValue), (_a = {}, _a[propName] = value, _a)));
+        });
+    });
+    var _d = currentValue || {}, _e = _d.activities, activities = _e === void 0 ? [] : _e, _f = _d.attributes, attributes = _f === void 0 ? [] : _f, _g = _d.dateRange, dateRange = _g === void 0 ? null : _g, _h = _d.users, users = _h === void 0 ? [] : _h;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: FilterList_1.default, size: "XS", onClick: openPopup, className: styles.icon }),
+        react_1.default.createElement(Popover_1.default, { classes: { paper: styles.popup }, open: !!anchorEl, anchorEl: anchorEl, onClose: closePopup, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'right'
+            }, transformOrigin: {
+                vertical: 'top',
+                horizontal: 'right'
+            } },
+            react_1.default.createElement("div", { className: styles.filterContainer },
+                react_1.default.createElement(Typography_1.default, { variant: "h6" }, ui_i18n_1.default.text('Filter')),
+                react_1.default.createElement(DateRangeSelector_1.default, { value: dateRange, onChange: handlePropChange('dateRange'), className: styles.filterItem }),
+                react_1.default.createElement(UserSelector_1.default, { selectedUsers: users, onChange: handlePropChange('users'), className: styles.filterItem }),
+                react_1.default.createElement(HistoryActivitySelector_1.default, { selectedHistoryActivityTypes: activities, onChange: handlePropChange('activities'), className: styles.filterItem }),
+                react_1.default.createElement(AttributeSelector_1.default, { selectedAttributes: attributes, entityType: entityType, onChange: handlePropChange('attributes'), className: styles.filterItem, title: ui_i18n_1.default.text('Attribute updated'), menuPlacement: "top" })),
+            react_1.default.createElement("div", { className: styles.filterControls },
+                react_1.default.createElement(Button_1.default, { onClick: clearCurrentValue, className: styles.clearButton }, ui_i18n_1.default.text('Clear all')),
+                react_1.default.createElement(Button_1.default, { onClick: closePopup }, ui_i18n_1.default.text('Cancel')),
+                react_1.default.createElement(Button_1.default, { color: "primary", onClick: function () {
+                        onApplyFilter(currentValue);
+                        closePopup();
+                    } }, ui_i18n_1.default.text('Apply'))))));
+};
+exports.default = HistoryFilterButton;

package/components/history/HistoryFilterButton/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "input" | "popup" | "filterControls" | "clearButton" | "filterContainer" | "filterItem">;

package/components/history/HistoryFilterButton/styles.js

@@ -5,5 +5,31 @@ var styles_1 = require("@material-ui/core/styles");
 exports.useStyles = styles_1.makeStyles({
     icon: {
         margin: 5
+    },
+    popup: {
+        width: 500,
+        height: 500,
+        overflowY: 'hidden'
+    },
+    filterContainer: {
+        padding: 20,
+        height: 410,
+        overflowY: 'auto'
+    },
+    filterItem: {
+        marginTop: 15
+    },
+    filterControls: {
+        display: 'flex',
+        padding: '10px 12px 0',
+        borderTop: 'solid 1px rgba(0, 0, 0, 0.12)'
+    },
+    clearButton: {
+        marginRight: 'auto'
+    },
+    input: {
+        height: '100%',
+        paddingLeft: '12px',
+        paddingRight: '8px'
     }
 });