@reltio/components 1.4.1173 → 1.4.1174

package/cjs/components/ModeSwitcherSelect/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"root" | "outlined" | "menuItem" | "currentValue" | "arrowIcon" | "currentValueIcon" | "currentValueText" | "firstMenuItemButton" | "menuItemInner" | "menuItemIcon" | "menuItemLabel" | "menuItemDescription">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"root" | "outlined" | "menuItem" | "arrowIcon" | "currentValue" | "currentValueIcon" | "currentValueText" | "firstMenuItemButton" | "menuItemInner" | "menuItemIcon" | "menuItemLabel" | "menuItemDescription">;

package/cjs/components/activityLog/ActivityFilterEditor/ActivityFilterEditor.js

@@ -1,15 +1,4 @@
 "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]; } });
@@ -34,49 +23,44 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
 var react_redux_1 = require("react-redux");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var classnames_1 = __importDefault(require("classnames"));
 var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var Divider_1 = __importDefault(require("@material-ui/core/Divider"));
 var types_1 = require("../types");
 var getSelectorActivityTypes_1 = require("./utils/getSelectorActivityTypes");
 var ActivitySelector_1 = __importDefault(require("./ActivitySelector"));
-var AttributeSelector_1 = __importDefault(require("../../AttributeSelector/AttributeSelector"));
-var SourceSelector_1 = __importDefault(require("./SourceSelector"));
 var UserSelector_1 = __importDefault(require("../../UserSelector/UserSelector"));
 var DateRangeSelector_1 = __importDefault(require("./DateRangeSelector"));
+var EntityChangedSelectors_1 = __importDefault(require("./EntityChangedSelectors"));
 var hooks_1 = require("../../../hooks");
-var ramda_1 = require("ramda");
 var styles_1 = require("./styles");
 var ActivityFilterEditor = function (_a) {
     var value = _a.value, open = _a.open, entityType = _a.entityType, onApply = _a.onApply, onCancel = _a.onCancel, onClear = _a.onClear;
     var styles = styles_1.useStyles();
     var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
-    var _b = react_1.useState(value), currentValue = _b[0], setCurrentValue = _b[1];
-    var clearCurrentValue = function () { return setCurrentValue(null); };
+    var _b = react_1.useState(value), currentFilter = _b[0], setCurrentFilter = _b[1];
+    var clearCurrentFilter = function () { return setCurrentFilter(null); };
     var handlePropChange = ramda_1.curry(function (propName, value) {
-        setCurrentValue(function (filterValue) {
-            var _a;
-            return (__assign(__assign({}, filterValue), (_a = {}, _a[propName] = value, _a)));
-        });
+        setCurrentFilter(ramda_1.pipe(ramda_1.when(ramda_1.always(propName === 'entityTypes'), ramda_1.assoc('attributes', [])), ramda_1.when(ramda_1.always(propName === 'activities'), ramda_1.mergeLeft({ attributes: [], entityTypes: [], sources: [] })), ramda_1.assoc(propName, value)));
     });
     hooks_1.useDidUpdateEffect(function () {
-        setCurrentValue(value);
+        setCurrentFilter(value);
     }, [value]);
-    var _c = currentValue || {}, _d = _c.activities, activities = _d === void 0 ? [] : _d, _e = _c.attributes, attributes = _e === void 0 ? [] : _e, _f = _c.sources, sources = _f === void 0 ? [] : _f, _g = _c.dateRange, dateRange = _g === void 0 ? null : _g, _h = _c.users, users = _h === void 0 ? [] : _h;
-    var hasEntityChanged = activities.includes(types_1.ActivityTypes.ENTITY_CHANGED);
-    var ActivityFilterRenderer = (react_1.default.createElement(react_1.default.Fragment, null,
+    var _c = currentFilter || {}, _d = _c.activities, activities = _d === void 0 ? [] : _d, _e = _c.dateRange, dateRange = _e === void 0 ? null : _e, _f = _c.users, users = _f === void 0 ? [] : _f;
+    var isEntityChangedActivity = activities.length === 1 && activities.includes(types_1.ActivityTypes.ENTITY_CHANGED);
+    return open ? (react_1.default.createElement("div", { className: styles.container },
         react_1.default.createElement(ActivitySelector_1.default, { activityTypes: getSelectorActivityTypes_1.getSelectorActivityTypes(metadata, entityType), selectedActivityTypes: activities, onChange: handlePropChange('activities') }),
-        hasEntityChanged && entityType && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(AttributeSelector_1.default, { selectedAttributes: attributes, entityType: entityType, onChange: handlePropChange('attributes'), className: styles.borderBottom, disableUnderline: true }),
-            react_1.default.createElement(SourceSelector_1.default, { selectedSources: sources, onChange: handlePropChange('sources') }))),
+        isEntityChangedActivity && (react_1.default.createElement(EntityChangedSelectors_1.default, { filter: currentFilter, entityType: entityType, onPropChange: handlePropChange })),
+        react_1.default.createElement(Divider_1.default, { light: true, className: styles.divider }),
         react_1.default.createElement(DateRangeSelector_1.default, { value: dateRange, onChange: handlePropChange('dateRange') }),
+        react_1.default.createElement(Divider_1.default, { light: true, className: styles.divider }),
         react_1.default.createElement(UserSelector_1.default, { selectedUsers: users, onChange: handlePropChange('users'), disableUnderline: true }),
-        react_1.default.createElement("div", { className: classnames_1.default(styles.borderBottom, styles.filterControls) },
-            react_1.default.createElement(Button_1.default, { onClick: ramda_1.pipe(clearCurrentValue, onClear), className: styles.clearButton }, ui_i18n_1.default.text('Clear all')),
+        react_1.default.createElement("div", { className: styles.filterControls },
+            react_1.default.createElement(Button_1.default, { onClick: ramda_1.pipe(clearCurrentFilter, onClear), className: styles.clearButton }, ui_i18n_1.default.text('Clear all')),
             react_1.default.createElement(Button_1.default, { onClick: onCancel }, ui_i18n_1.default.text('Cancel')),
-            react_1.default.createElement(Button_1.default, { color: "primary", onClick: function () { return onApply(currentValue); } }, ui_i18n_1.default.text('Apply')))));
-    return open && react_1.default.createElement("div", { className: styles.container }, ActivityFilterRenderer);
+            react_1.default.createElement(Button_1.default, { color: "primary", onClick: function () { return onApply(currentFilter); } }, ui_i18n_1.default.text('Apply'))))) : null;
 };
 exports.default = ActivityFilterEditor;

package/cjs/components/activityLog/ActivityFilterEditor/ActivitySelector.js

@@ -8,6 +8,7 @@ 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 ActivityTypes_1 = require("../types/ActivityTypes");
 var MultiSelect_1 = __importDefault(require("../../ReactSelect/MultiSelect"));
 var DropdownIndicatorWithIconButton_1 = __importDefault(require("../../commonReactSelectComponents/DropdownIndicatorWithIconButton"));
 var activities_1 = require("../utils/activities");
@@ -17,14 +18,16 @@ var ActivitySelector = function (_a) {
     var styles = styles_1.useStyles();
     var valueToOption = function (value) { return ({ value: value, label: activities_1.getActivityLabel(value) }); };
     var prepareValues = function (values) { return values.map(valueToOption); };
+    var showHint = selectedActivityTypes.length > 1 && selectedActivityTypes.includes(ActivityTypes_1.ActivityTypes.ENTITY_CHANGED);
     var options = ramda_1.pipe(ramda_1.sortBy(function (option) { return activities_1.getActivityLabel(option); }), prepareValues)(activityTypes);
-    return (react_1.default.createElement("div", { className: styles.borderBottom },
+    return (react_1.default.createElement("div", { className: styles.selectorWrapper },
         react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, ui_i18n_1.default.text('Activity')),
         react_1.default.createElement(MultiSelect_1.default, { value: prepareValues(selectedActivityTypes), onChange: ramda_1.pipe(ramda_1.defaultTo([]), ramda_1.pluck('value'), onChange), options: options, TextFieldProps: {
                 InputProps: { disableUnderline: true },
                 classes: { root: styles.dropDownInput }
             }, components: {
                 DropdownIndicator: DropdownIndicatorWithIconButton_1.default
-            }, styles: styles_1.customStyles, classes: styles, menuPlacement: "bottom" })));
+            }, styles: styles_1.customStyles, classes: styles, menuPlacement: "bottom" }),
+        showHint && (react_1.default.createElement("span", { className: styles.selectorHint }, ui_i18n_1.default.text('One at a time! Select a single Activity and any of its filters -OR- multiple Activities with no filters.')))));
 };
 exports.default = ActivitySelector;

package/cjs/components/activityLog/ActivityFilterEditor/DateRangeSelector.js

@@ -103,7 +103,7 @@ var DateRangeSelector = function (_a) {
             setAgoInterval(emptyInterval);
         }
     }, [value]);
-    return (react_1.default.createElement("div", { className: styles.borderBottom },
+    return (react_1.default.createElement("div", { className: styles.selectorWrapper },
         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 === null || value === void 0 ? void 0 : value.type) || null, onChange: ramda_1.pipe(utils_1.getValue, changeType) },
             react_1.default.createElement("div", { className: styles.dateOptionWithin },

package/cjs/components/activityLog/ActivityFilterEditor/EntityChangedSelectors.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TEntityType } from '@reltio/mdm-sdk';
+import { ActivitiesFilter } from '../types';
+declare type Props = {
+    filter: ActivitiesFilter;
+    entityType?: TEntityType;
+    onPropChange: (propName: string) => (value: unknown) => void;
+};
+declare const EntityChangedSelectors: ({ filter, entityType, onPropChange }: Props) => JSX.Element;
+export default EntityChangedSelectors;

package/cjs/components/activityLog/ActivityFilterEditor/EntityChangedSelectors.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 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 AttributeSelector_1 = __importDefault(require("../../AttributeSelector/AttributeSelector"));
+var EntityTypesSelector_1 = __importDefault(require("./EntityTypesSelector"));
+var SourceSelector_1 = __importDefault(require("./SourceSelector"));
+var styles_1 = require("./styles");
+var EntityChangedSelectors = function (_a) {
+    var filter = _a.filter, entityType = _a.entityType, onPropChange = _a.onPropChange;
+    var styles = styles_1.useStyles();
+    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
+    var _b = filter || {}, _c = _b.attributes, attributes = _c === void 0 ? [] : _c, _d = _b.sources, sources = _d === void 0 ? [] : _d, _e = _b.entityTypes, entityTypes = _e === void 0 ? [] : _e;
+    var closestEntityTypeAncestor = mdm_sdk_1.findClosestCommonAncestor(metadata, ramda_1.map(ramda_1.prop('uri'), entityTypes));
+    var attributesEntityType = entityType || mdm_sdk_1.getEntityType(metadata, closestEntityTypeAncestor);
+    return (react_1.default.createElement("div", { className: styles.selectorsGroup },
+        !entityType && (react_1.default.createElement(EntityTypesSelector_1.default, { entityTypes: metadata.entityTypes, selectedEntityTypes: entityTypes, onChange: onPropChange('entityTypes') })),
+        react_1.default.createElement(AttributeSelector_1.default, { selectedAttributes: attributes, entityType: attributesEntityType, onChange: onPropChange('attributes'), className: styles.selectorWrapper, disableUnderline: true }),
+        react_1.default.createElement(SourceSelector_1.default, { selectedSources: sources, onChange: onPropChange('sources') })));
+};
+exports.default = EntityChangedSelectors;

package/cjs/components/activityLog/ActivityFilterEditor/EntityTypesSelector.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TEntityType } from '@reltio/mdm-sdk';
+declare type Props = {
+    entityTypes: TEntityType[];
+    selectedEntityTypes: TEntityType[];
+    onChange: (entityTypes: TEntityType[]) => void;
+};
+declare const EntityTypesSelector: ({ entityTypes, selectedEntityTypes, onChange }: Props) => JSX.Element;
+export default EntityTypesSelector;

package/cjs/components/activityLog/ActivityFilterEditor/EntityTypesSelector.js

@@ -0,0 +1,29 @@
+"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 styles_1 = require("./styles");
+var EntityTypesSelector = function (_a) {
+    var entityTypes = _a.entityTypes, selectedEntityTypes = _a.selectedEntityTypes, onChange = _a.onChange;
+    var styles = styles_1.useStyles();
+    var valueToOption = function (entityType) { return ({ value: entityType.uri, label: entityType.label, entityType: entityType }); };
+    var prepareValues = function (values) { return values.map(valueToOption); };
+    var options = ramda_1.pipe(ramda_1.sortBy(function (option) { return option.label; }), prepareValues)(entityTypes);
+    return (react_1.default.createElement("div", { className: styles.selectorWrapper },
+        react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, ui_i18n_1.default.text('Type')),
+        react_1.default.createElement(MultiSelect_1.default, { value: prepareValues(selectedEntityTypes), onChange: ramda_1.pipe(ramda_1.defaultTo([]), ramda_1.pluck('entityType'), onChange), options: options, TextFieldProps: {
+                InputProps: { disableUnderline: true },
+                classes: { root: styles.dropDownInput }
+            }, components: {
+                DropdownIndicator: DropdownIndicatorWithIconButton_1.default
+            }, styles: styles_1.customStyles, classes: styles, menuPlacement: "bottom" })));
+};
+exports.default = EntityTypesSelector;

package/cjs/components/activityLog/ActivityFilterEditor/SourceSelector.js

@@ -18,7 +18,7 @@ var SourceSelector = function (_a) {
     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 },
+    return (react_1.default.createElement("div", { className: styles.selectorWrapper },
         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 },

package/cjs/components/activityLog/ActivityFilterEditor/styles.d.ts

@@ -1,4 +1,4 @@
 export declare const customStyles: {
     input: (currentStyles: any) => any;
 };
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"option" | "labels" | "borderBottom" | "container" | "filterSubtitle" | "agoLabel" | "dateOption" | "dateOptionAgo" | "dateOptionWithin" | "dateOptionLabel" | "dropDownInput" | "filterControls" | "clearButton">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"option" | "labels" | "container" | "divider" | "filterSubtitle" | "agoLabel" | "dateOption" | "dateOptionAgo" | "dateOptionWithin" | "dateOptionLabel" | "dropDownInput" | "filterControls" | "clearButton" | "selectorWrapper" | "selectorsGroup" | "selectorHint">;

package/cjs/components/activityLog/ActivityFilterEditor/styles.js

@@ -18,8 +18,8 @@ exports.customStyles = {
 };
 exports.useStyles = styles_1.makeStyles({
     container: {
-        padding: '24px 10px 0px',
-        margin: '0 6px'
+        padding: '12px 7px 0px',
+        borderBottom: 'solid 1px rgba(0, 0, 0, 0.12)'
     },
     labels: {
         fontSize: '14px'
@@ -57,18 +57,29 @@ exports.useStyles = styles_1.makeStyles({
     },
     filterControls: {
         display: 'flex',
-        paddingTop: '30px'
+        paddingTop: '30px',
+        marginBottom: 8
     },
     clearButton: {
         marginRight: 'auto'
     },
-    borderBottom: {
-        borderBottom: 'solid 1px rgba(0, 0, 0, 0.12)',
-        paddingBottom: '10px',
-        marginBottom: '15px'
+    selectorWrapper: {
+        marginBottom: '12px'
     },
     option: {
         fontSize: '14px',
         height: '32px'
+    },
+    selectorsGroup: {
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    selectorHint: {
+        fontSize: 12,
+        lineHeight: '16px',
+        color: 'rgba(0,0,0,0.54)'
+    },
+    divider: {
+        marginBottom: 12
     }
 });

package/cjs/components/activityLog/ActivityLogFilter/helpers.js

@@ -17,8 +17,9 @@ var getFilterLabel = function (filters) {
     });
     var activityLabel = ramda_1.pipe(ramda_1.map(activities_1.getActivityLabel), getLabel(ui_i18n_1.default.text('activity'), ui_i18n_1.default.text('activities')))(filters.activities);
     var userLabel = getLabel(ui_i18n_1.default.text('user'), ui_i18n_1.default.text('users'), filters.users);
-    var attributesLabel = ramda_1.pipe(ramda_1.defaultTo([]), ramda_1.map(function (attribute) { return attribute.label; }), ramda_1.sortBy(ramda_1.identity), getLabel(ui_i18n_1.default.text('attribute'), ui_i18n_1.default.text('attributes')))(filters.attributes);
-    var sourcesLabel = ramda_1.pipe(ramda_1.defaultTo([]), ramda_1.map(function (source) { return source.label; }), getLabel(ui_i18n_1.default.text('source'), ui_i18n_1.default.text('sources')))(filters.sources);
+    var entityTypesLabel = ramda_1.pipe(ramda_1.defaultTo([]), ramda_1.pluck('label'), ramda_1.sortBy(ramda_1.identity), getLabel(ui_i18n_1.default.text('type'), ui_i18n_1.default.text('types')))(filters.entityTypes);
+    var attributesLabel = ramda_1.pipe(ramda_1.defaultTo([]), ramda_1.pluck('label'), ramda_1.sortBy(ramda_1.identity), getLabel(ui_i18n_1.default.text('attribute'), ui_i18n_1.default.text('attributes')))(filters.attributes);
+    var sourcesLabel = ramda_1.pipe(ramda_1.defaultTo([]), ramda_1.pluck('label'), getLabel(ui_i18n_1.default.text('source'), ui_i18n_1.default.text('sources')))(filters.sources);
     var getDateLabel = function (date) {
         var formatDateValue = function (value) {
             return "" + mdm_sdk_1.formatDataTypeValue({ dataTypeDefinition: { type: mdm_sdk_1.DataTypes.TYPE_ACTIVENESS_DATE } }, value);
@@ -37,6 +38,6 @@ var getFilterLabel = function (filters) {
                 return null;
         }
     };
-    return ramda_1.pipe(ramda_1.reject(ramda_1.isNil), ramda_1.join(' | '))([activityLabel, attributesLabel, sourcesLabel, getDateLabel(filters.dateRange), userLabel]);
+    return ramda_1.pipe(ramda_1.reject(ramda_1.isNil), ramda_1.join(' | '))([activityLabel, entityTypesLabel, attributesLabel, sourcesLabel, getDateLabel(filters.dateRange), userLabel]);
 };
 exports.getFilterLabel = getFilterLabel;

package/cjs/components/activityLog/ActivityLogFilter/styles.js

@@ -16,6 +16,7 @@ exports.useStyles = styles_1.makeStyles(function () { return ({
         margin: '4px'
     },
     buttonsWrapper: {
-        marginLeft: 'auto'
+        marginLeft: 'auto',
+        display: 'flex'
     }
 }); });

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

@@ -1,4 +1,4 @@
-import { Source } from '@reltio/mdm-sdk';
+import { Source, TEntityType } from '@reltio/mdm-sdk';
 import { ActivityTypes } from './ActivityTypes';
 import { AttributeOption, DateRangeFilter } from '../../../types';
 export declare type ActivitiesFilter = {
@@ -7,5 +7,6 @@ export declare type ActivitiesFilter = {
     dateRange: DateRangeFilter;
     attributes?: AttributeOption[];
     sources?: Source[];
+    entityTypes?: TEntityType[];
     entityUri?: string;
 };

package/cjs/components/activityLog/utils/filters.js

@@ -22,6 +22,9 @@ var buildActivityFilterClause = function (activityType) {
 var buildSourceFilterClause = function (source) {
     return "equals(items.delta.sources, '" + source.abbreviation + "')";
 };
+var buildEntityTypeFilterClause = function (entityType) {
+    return "equals(items.objectType, '" + entityType.uri + "')";
+};
 var buildAttributeFilterClause = function (attribute) {
     return "equals(items.delta.attributeType, '" + attribute.value + "')";
 };
@@ -60,6 +63,7 @@ var getFilterClauseBuilder = ramda_1.cond([
     [ramda_1.equals('activities'), function () { return multiValueFilter(buildActivityFilterClause); }],
     [ramda_1.equals('sources'), function () { return multiValueFilter(buildSourceFilterClause); }],
     [ramda_1.equals('attributes'), function () { return multiValueFilter(buildAttributeFilterClause); }],
+    [ramda_1.equals('entityTypes'), function () { return multiValueFilter(buildEntityTypeFilterClause); }],
     [ramda_1.equals('dateRange'), function () { return buildDateRangeFilterClause; }],
     [ramda_1.equals('entityUri'), function () { return buildEntityUriFilterClause; }]
 ]);

package/esm/components/ModeSwitcherSelect/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"root" | "outlined" | "menuItem" | "currentValue" | "arrowIcon" | "currentValueIcon" | "currentValueText" | "firstMenuItemButton" | "menuItemInner" | "menuItemIcon" | "menuItemLabel" | "menuItemDescription">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"root" | "outlined" | "menuItem" | "arrowIcon" | "currentValue" | "currentValueIcon" | "currentValueText" | "firstMenuItemButton" | "menuItemInner" | "menuItemIcon" | "menuItemLabel" | "menuItemDescription">;

package/esm/components/activityLog/ActivityFilterEditor/ActivityFilterEditor.js

@@ -1,58 +1,42 @@
-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);
-};
 import React, { useState } from 'react';
+import { curry, pipe, assoc, when, mergeLeft, always } from 'ramda';
 import { useSelector } from 'react-redux';
 import mdmModule from '@reltio/mdm-module';
 import i18n from 'ui-i18n';
-import classnames from 'classnames';
 import Button from '@material-ui/core/Button';
+import Divider from '@material-ui/core/Divider';
 import { ActivityTypes } from '../types';
 import { getSelectorActivityTypes } from './utils/getSelectorActivityTypes';
 import ActivitySelector from './ActivitySelector';
-import AttributeSelector from '../../AttributeSelector/AttributeSelector';
-import SourceSelector from './SourceSelector';
 import UserSelector from '../../UserSelector/UserSelector';
 import DateRangeSelector from './DateRangeSelector';
+import EntityChangedSelectors from './EntityChangedSelectors';
 import { useDidUpdateEffect } from '../../../hooks';
-import { curry, pipe } from 'ramda';
 import { useStyles } from './styles';
 var ActivityFilterEditor = function (_a) {
     var value = _a.value, open = _a.open, entityType = _a.entityType, onApply = _a.onApply, onCancel = _a.onCancel, onClear = _a.onClear;
     var styles = useStyles();
     var metadata = useSelector(mdmModule.selectors.getMetadata);
-    var _b = useState(value), currentValue = _b[0], setCurrentValue = _b[1];
-    var clearCurrentValue = function () { return setCurrentValue(null); };
+    var _b = useState(value), currentFilter = _b[0], setCurrentFilter = _b[1];
+    var clearCurrentFilter = function () { return setCurrentFilter(null); };
     var handlePropChange = curry(function (propName, value) {
-        setCurrentValue(function (filterValue) {
-            var _a;
-            return (__assign(__assign({}, filterValue), (_a = {}, _a[propName] = value, _a)));
-        });
+        setCurrentFilter(pipe(when(always(propName === 'entityTypes'), assoc('attributes', [])), when(always(propName === 'activities'), mergeLeft({ attributes: [], entityTypes: [], sources: [] })), assoc(propName, value)));
     });
     useDidUpdateEffect(function () {
-        setCurrentValue(value);
+        setCurrentFilter(value);
     }, [value]);
-    var _c = currentValue || {}, _d = _c.activities, activities = _d === void 0 ? [] : _d, _e = _c.attributes, attributes = _e === void 0 ? [] : _e, _f = _c.sources, sources = _f === void 0 ? [] : _f, _g = _c.dateRange, dateRange = _g === void 0 ? null : _g, _h = _c.users, users = _h === void 0 ? [] : _h;
-    var hasEntityChanged = activities.includes(ActivityTypes.ENTITY_CHANGED);
-    var ActivityFilterRenderer = (React.createElement(React.Fragment, null,
+    var _c = currentFilter || {}, _d = _c.activities, activities = _d === void 0 ? [] : _d, _e = _c.dateRange, dateRange = _e === void 0 ? null : _e, _f = _c.users, users = _f === void 0 ? [] : _f;
+    var isEntityChangedActivity = activities.length === 1 && activities.includes(ActivityTypes.ENTITY_CHANGED);
+    return open ? (React.createElement("div", { className: styles.container },
         React.createElement(ActivitySelector, { activityTypes: getSelectorActivityTypes(metadata, entityType), selectedActivityTypes: activities, onChange: handlePropChange('activities') }),
-        hasEntityChanged && entityType && (React.createElement(React.Fragment, null,
-            React.createElement(AttributeSelector, { selectedAttributes: attributes, entityType: entityType, onChange: handlePropChange('attributes'), className: styles.borderBottom, disableUnderline: true }),
-            React.createElement(SourceSelector, { selectedSources: sources, onChange: handlePropChange('sources') }))),
+        isEntityChangedActivity && (React.createElement(EntityChangedSelectors, { filter: currentFilter, entityType: entityType, onPropChange: handlePropChange })),
+        React.createElement(Divider, { light: true, className: styles.divider }),
         React.createElement(DateRangeSelector, { value: dateRange, onChange: handlePropChange('dateRange') }),
+        React.createElement(Divider, { light: true, className: styles.divider }),
         React.createElement(UserSelector, { selectedUsers: users, onChange: handlePropChange('users'), disableUnderline: true }),
-        React.createElement("div", { className: classnames(styles.borderBottom, styles.filterControls) },
-            React.createElement(Button, { onClick: pipe(clearCurrentValue, onClear), className: styles.clearButton }, i18n.text('Clear all')),
+        React.createElement("div", { className: styles.filterControls },
+            React.createElement(Button, { onClick: pipe(clearCurrentFilter, onClear), className: styles.clearButton }, i18n.text('Clear all')),
             React.createElement(Button, { onClick: onCancel }, i18n.text('Cancel')),
-            React.createElement(Button, { color: "primary", onClick: function () { return onApply(currentValue); } }, i18n.text('Apply')))));
-    return open && React.createElement("div", { className: styles.container }, ActivityFilterRenderer);
+            React.createElement(Button, { color: "primary", onClick: function () { return onApply(currentFilter); } }, i18n.text('Apply'))))) : null;
 };
 export default ActivityFilterEditor;

package/esm/components/activityLog/ActivityFilterEditor/ActivitySelector.js

@@ -3,6 +3,7 @@ import i18n from 'ui-i18n';
 import { defaultTo, pipe, pluck, sortBy } from 'ramda';
 import classnames from 'classnames';
 import Typography from '@material-ui/core/Typography';
+import { ActivityTypes } from '../types/ActivityTypes';
 import MultiSelect from '../../ReactSelect/MultiSelect';
 import DropdownIndicatorWithIconButton from '../../commonReactSelectComponents/DropdownIndicatorWithIconButton';
 import { getActivityLabel } from '../utils/activities';
@@ -12,14 +13,16 @@ var ActivitySelector = function (_a) {
     var styles = useStyles();
     var valueToOption = function (value) { return ({ value: value, label: getActivityLabel(value) }); };
     var prepareValues = function (values) { return values.map(valueToOption); };
+    var showHint = selectedActivityTypes.length > 1 && selectedActivityTypes.includes(ActivityTypes.ENTITY_CHANGED);
     var options = pipe(sortBy(function (option) { return getActivityLabel(option); }), prepareValues)(activityTypes);
-    return (React.createElement("div", { className: styles.borderBottom },
+    return (React.createElement("div", { className: styles.selectorWrapper },
         React.createElement(Typography, { className: classnames(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, i18n.text('Activity')),
         React.createElement(MultiSelect, { value: prepareValues(selectedActivityTypes), onChange: pipe(defaultTo([]), pluck('value'), onChange), options: options, TextFieldProps: {
                 InputProps: { disableUnderline: true },
                 classes: { root: styles.dropDownInput }
             }, components: {
                 DropdownIndicator: DropdownIndicatorWithIconButton
-            }, styles: customStyles, classes: styles, menuPlacement: "bottom" })));
+            }, styles: customStyles, classes: styles, menuPlacement: "bottom" }),
+        showHint && (React.createElement("span", { className: styles.selectorHint }, i18n.text('One at a time! Select a single Activity and any of its filters -OR- multiple Activities with no filters.')))));
 };
 export default ActivitySelector;

package/esm/components/activityLog/ActivityFilterEditor/DateRangeSelector.js

@@ -79,7 +79,7 @@ var DateRangeSelector = function (_a) {
             setAgoInterval(emptyInterval);
         }
     }, [value]);
-    return (React.createElement("div", { className: styles.borderBottom },
+    return (React.createElement("div", { className: styles.selectorWrapper },
         React.createElement(Typography, { className: classnames(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, i18n.text('Date')),
         React.createElement(RadioGroup, { value: (value === null || value === void 0 ? void 0 : value.type) || null, onChange: pipe(getValue, changeType) },
             React.createElement("div", { className: styles.dateOptionWithin },

package/esm/components/activityLog/ActivityFilterEditor/EntityChangedSelectors.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TEntityType } from '@reltio/mdm-sdk';
+import { ActivitiesFilter } from '../types';
+declare type Props = {
+    filter: ActivitiesFilter;
+    entityType?: TEntityType;
+    onPropChange: (propName: string) => (value: unknown) => void;
+};
+declare const EntityChangedSelectors: ({ filter, entityType, onPropChange }: Props) => JSX.Element;
+export default EntityChangedSelectors;

package/esm/components/activityLog/ActivityFilterEditor/EntityChangedSelectors.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { map, prop } from 'ramda';
+import { useSelector } from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+import { findClosestCommonAncestor, getEntityType } from '@reltio/mdm-sdk';
+import AttributeSelector from '../../AttributeSelector/AttributeSelector';
+import EntityTypesSelector from './EntityTypesSelector';
+import SourceSelector from './SourceSelector';
+import { useStyles } from './styles';
+var EntityChangedSelectors = function (_a) {
+    var filter = _a.filter, entityType = _a.entityType, onPropChange = _a.onPropChange;
+    var styles = useStyles();
+    var metadata = useSelector(mdmModule.selectors.getMetadata);
+    var _b = filter || {}, _c = _b.attributes, attributes = _c === void 0 ? [] : _c, _d = _b.sources, sources = _d === void 0 ? [] : _d, _e = _b.entityTypes, entityTypes = _e === void 0 ? [] : _e;
+    var closestEntityTypeAncestor = findClosestCommonAncestor(metadata, map(prop('uri'), entityTypes));
+    var attributesEntityType = entityType || getEntityType(metadata, closestEntityTypeAncestor);
+    return (React.createElement("div", { className: styles.selectorsGroup },
+        !entityType && (React.createElement(EntityTypesSelector, { entityTypes: metadata.entityTypes, selectedEntityTypes: entityTypes, onChange: onPropChange('entityTypes') })),
+        React.createElement(AttributeSelector, { selectedAttributes: attributes, entityType: attributesEntityType, onChange: onPropChange('attributes'), className: styles.selectorWrapper, disableUnderline: true }),
+        React.createElement(SourceSelector, { selectedSources: sources, onChange: onPropChange('sources') })));
+};
+export default EntityChangedSelectors;

package/esm/components/activityLog/ActivityFilterEditor/EntityTypesSelector.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TEntityType } from '@reltio/mdm-sdk';
+declare type Props = {
+    entityTypes: TEntityType[];
+    selectedEntityTypes: TEntityType[];
+    onChange: (entityTypes: TEntityType[]) => void;
+};
+declare const EntityTypesSelector: ({ entityTypes, selectedEntityTypes, onChange }: Props) => JSX.Element;
+export default EntityTypesSelector;

package/esm/components/activityLog/ActivityFilterEditor/EntityTypesSelector.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import { defaultTo, pipe, pluck, sortBy } from 'ramda';
+import classnames from 'classnames';
+import Typography from '@material-ui/core/Typography';
+import MultiSelect from '../../ReactSelect/MultiSelect';
+import DropdownIndicatorWithIconButton from '../../commonReactSelectComponents/DropdownIndicatorWithIconButton';
+import { customStyles, useStyles } from './styles';
+var EntityTypesSelector = function (_a) {
+    var entityTypes = _a.entityTypes, selectedEntityTypes = _a.selectedEntityTypes, onChange = _a.onChange;
+    var styles = useStyles();
+    var valueToOption = function (entityType) { return ({ value: entityType.uri, label: entityType.label, entityType: entityType }); };
+    var prepareValues = function (values) { return values.map(valueToOption); };
+    var options = pipe(sortBy(function (option) { return option.label; }), prepareValues)(entityTypes);
+    return (React.createElement("div", { className: styles.selectorWrapper },
+        React.createElement(Typography, { className: classnames(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, i18n.text('Type')),
+        React.createElement(MultiSelect, { value: prepareValues(selectedEntityTypes), onChange: pipe(defaultTo([]), pluck('entityType'), onChange), options: options, TextFieldProps: {
+                InputProps: { disableUnderline: true },
+                classes: { root: styles.dropDownInput }
+            }, components: {
+                DropdownIndicator: DropdownIndicatorWithIconButton
+            }, styles: customStyles, classes: styles, menuPlacement: "bottom" })));
+};
+export default EntityTypesSelector;

package/esm/components/activityLog/ActivityFilterEditor/SourceSelector.js

@@ -13,7 +13,7 @@ var SourceSelector = function (_a) {
     var styles = useStyles();
     var metadata = useSelector(mdmModule.selectors.getMetadata);
     var options = sortBy(function (option) { return option.label; })(metadata.sources);
-    return (React.createElement("div", { className: styles.borderBottom },
+    return (React.createElement("div", { className: styles.selectorWrapper },
         React.createElement(Typography, { className: classnames(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, i18n.text('Source')),
         React.createElement(MultiSelect, { value: selectedSources, onChange: pipe(defaultTo([]), onChange), options: options, TextFieldProps: {
                 InputProps: { disableUnderline: true },

package/esm/components/activityLog/ActivityFilterEditor/styles.d.ts

@@ -1,4 +1,4 @@
 export declare const customStyles: {
     input: (currentStyles: any) => any;
 };
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"option" | "labels" | "borderBottom" | "container" | "filterSubtitle" | "agoLabel" | "dateOption" | "dateOptionAgo" | "dateOptionWithin" | "dateOptionLabel" | "dropDownInput" | "filterControls" | "clearButton">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"option" | "labels" | "container" | "divider" | "filterSubtitle" | "agoLabel" | "dateOption" | "dateOptionAgo" | "dateOptionWithin" | "dateOptionLabel" | "dropDownInput" | "filterControls" | "clearButton" | "selectorWrapper" | "selectorsGroup" | "selectorHint">;

package/esm/components/activityLog/ActivityFilterEditor/styles.js

@@ -15,8 +15,8 @@ export var customStyles = {
 };
 export var useStyles = makeStyles({
     container: {
-        padding: '24px 10px 0px',
-        margin: '0 6px'
+        padding: '12px 7px 0px',
+        borderBottom: 'solid 1px rgba(0, 0, 0, 0.12)'
     },
     labels: {
         fontSize: '14px'
@@ -54,18 +54,29 @@ export var useStyles = makeStyles({
     },
     filterControls: {
         display: 'flex',
-        paddingTop: '30px'
+        paddingTop: '30px',
+        marginBottom: 8
     },
     clearButton: {
         marginRight: 'auto'
     },
-    borderBottom: {
-        borderBottom: 'solid 1px rgba(0, 0, 0, 0.12)',
-        paddingBottom: '10px',
-        marginBottom: '15px'
+    selectorWrapper: {
+        marginBottom: '12px'
     },
     option: {
         fontSize: '14px',
         height: '32px'
+    },
+    selectorsGroup: {
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    selectorHint: {
+        fontSize: 12,
+        lineHeight: '16px',
+        color: 'rgba(0,0,0,0.54)'
+    },
+    divider: {
+        marginBottom: 12
     }
 });

package/esm/components/activityLog/ActivityLogFilter/helpers.js

@@ -1,5 +1,5 @@
 import i18n from 'ui-i18n';
-import { curry, join, identity, isNil, map, pipe, reject, sortBy, defaultTo } from 'ramda';
+import { curry, join, identity, isNil, map, pipe, reject, sortBy, defaultTo, pluck } from 'ramda';
 import { DataTypes, formatDataTypeValue } from '@reltio/mdm-sdk';
 import { DateRangeTypes } from '../../../types';
 import { getActivityLabel } from '../utils/activities';
@@ -11,8 +11,9 @@ export var getFilterLabel = function (filters) {
     });
     var activityLabel = pipe(map(getActivityLabel), getLabel(i18n.text('activity'), i18n.text('activities')))(filters.activities);
     var userLabel = getLabel(i18n.text('user'), i18n.text('users'), filters.users);
-    var attributesLabel = pipe(defaultTo([]), map(function (attribute) { return attribute.label; }), sortBy(identity), getLabel(i18n.text('attribute'), i18n.text('attributes')))(filters.attributes);
-    var sourcesLabel = pipe(defaultTo([]), map(function (source) { return source.label; }), getLabel(i18n.text('source'), i18n.text('sources')))(filters.sources);
+    var entityTypesLabel = pipe(defaultTo([]), pluck('label'), sortBy(identity), getLabel(i18n.text('type'), i18n.text('types')))(filters.entityTypes);
+    var attributesLabel = pipe(defaultTo([]), pluck('label'), sortBy(identity), getLabel(i18n.text('attribute'), i18n.text('attributes')))(filters.attributes);
+    var sourcesLabel = pipe(defaultTo([]), pluck('label'), getLabel(i18n.text('source'), i18n.text('sources')))(filters.sources);
     var getDateLabel = function (date) {
         var formatDateValue = function (value) {
             return "" + formatDataTypeValue({ dataTypeDefinition: { type: DataTypes.TYPE_ACTIVENESS_DATE } }, value);
@@ -31,5 +32,5 @@ export var getFilterLabel = function (filters) {
                 return null;
         }
     };
-    return pipe(reject(isNil), join(' | '))([activityLabel, attributesLabel, sourcesLabel, getDateLabel(filters.dateRange), userLabel]);
+    return pipe(reject(isNil), join(' | '))([activityLabel, entityTypesLabel, attributesLabel, sourcesLabel, getDateLabel(filters.dateRange), userLabel]);
 };

package/esm/components/activityLog/ActivityLogFilter/styles.js

@@ -13,6 +13,7 @@ export var useStyles = makeStyles(function () { return ({
         margin: '4px'
     },
     buttonsWrapper: {
-        marginLeft: 'auto'
+        marginLeft: 'auto',
+        display: 'flex'
     }
 }); });

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

@@ -1,4 +1,4 @@
-import { Source } from '@reltio/mdm-sdk';
+import { Source, TEntityType } from '@reltio/mdm-sdk';
 import { ActivityTypes } from './ActivityTypes';
 import { AttributeOption, DateRangeFilter } from '../../../types';
 export declare type ActivitiesFilter = {
@@ -7,5 +7,6 @@ export declare type ActivitiesFilter = {
     dateRange: DateRangeFilter;
     attributes?: AttributeOption[];
     sources?: Source[];
+    entityTypes?: TEntityType[];
     entityUri?: string;
 };

package/esm/components/activityLog/utils/filters.js

@@ -16,6 +16,9 @@ var buildActivityFilterClause = function (activityType) {
 var buildSourceFilterClause = function (source) {
     return "equals(items.delta.sources, '" + source.abbreviation + "')";
 };
+var buildEntityTypeFilterClause = function (entityType) {
+    return "equals(items.objectType, '" + entityType.uri + "')";
+};
 var buildAttributeFilterClause = function (attribute) {
     return "equals(items.delta.attributeType, '" + attribute.value + "')";
 };
@@ -54,6 +57,7 @@ var getFilterClauseBuilder = cond([
     [equals('activities'), function () { return multiValueFilter(buildActivityFilterClause); }],
     [equals('sources'), function () { return multiValueFilter(buildSourceFilterClause); }],
     [equals('attributes'), function () { return multiValueFilter(buildAttributeFilterClause); }],
+    [equals('entityTypes'), function () { return multiValueFilter(buildEntityTypeFilterClause); }],
     [equals('dateRange'), function () { return buildDateRangeFilterClause; }],
     [equals('entityUri'), function () { return buildEntityUriFilterClause; }]
 ]);

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1173",
+  "version": "1.4.1174",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-module": "^1.4.1173",
-    "@reltio/mdm-sdk": "^1.4.1173",
+    "@reltio/mdm-module": "^1.4.1174",
+    "@reltio/mdm-sdk": "^1.4.1174",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",