@reltio/components 1.4.908 → 1.4.912

package/cjs/hooks/useMarkAsNotMatchRequest.d.ts

@@ -0,0 +1,12 @@
+import { Entity } from '@reltio/mdm-sdk';
+declare type Props = {
+    entities: Entity[];
+    entity: Entity;
+    onFinishRequest?: () => void;
+    onStartRequest?: () => void;
+};
+export declare const useMarkAsNotMatchRequest: ({ entities, entity, onFinishRequest, onStartRequest }: Props) => {
+    isPending: boolean;
+    sendMarkAsNotMatchRequest: () => void;
+};
+export {};

package/cjs/hooks/useMarkAsNotMatchRequest.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 });
+exports.useMarkAsNotMatchRequest = void 0;
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var react_redux_1 = require("react-redux");
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var react_1 = require("react");
+var useMarkAsNotMatchRequest = function (_a) {
+    var entities = _a.entities, entity = _a.entity, onFinishRequest = _a.onFinishRequest, onStartRequest = _a.onStartRequest;
+    var tenant = react_redux_1.useSelector(mdm_module_1.default.selectors.getTenant);
+    var dtssPath = react_redux_1.useSelector(mdm_module_1.default.selectors.getDtssPath);
+    var _b = react_1.useState(false), isPending = _b[0], setIsPending = _b[1];
+    var sendMarkAsNotMatchRequest = react_1.useCallback(function () {
+        onStartRequest === null || onStartRequest === void 0 ? void 0 : onStartRequest();
+        setIsPending(true);
+        var params = { dtssPath: dtssPath, customerTenant: tenant, entity: entity, entities: entities };
+        (mdm_sdk_1.isDataTenantEntity(entity)
+            ? mdm_sdk_1.markDataTenantEntityAsNotMatch(params)
+            : mdm_sdk_1.markMixedEntitiesAsNotMatches(params)).finally(function () {
+            onFinishRequest === null || onFinishRequest === void 0 ? void 0 : onFinishRequest();
+            setIsPending(false);
+        });
+    }, [dtssPath, entities, entity, onFinishRequest, onStartRequest, tenant]);
+    return { isPending: isPending, sendMarkAsNotMatchRequest: sendMarkAsNotMatchRequest };
+};
+exports.useMarkAsNotMatchRequest = useMarkAsNotMatchRequest;

package/cjs/hooks/useMergeAllRequest.d.ts

@@ -0,0 +1,12 @@
+import { Entity } from '@reltio/mdm-sdk';
+declare type Props = {
+    entities: Entity[];
+    entity: Entity;
+    onFinishRequest?: () => void;
+    onStartRequest?: () => void;
+};
+export declare const useMergeAllRequest: ({ entities, entity, onFinishRequest, onStartRequest }: Props) => {
+    isPending: boolean;
+    sendMergeAllRequest: () => void;
+};
+export {};

package/cjs/hooks/useMergeAllRequest.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 });
+exports.useMergeAllRequest = void 0;
+var react_1 = require("react");
+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 useMergeAllRequest = function (_a) {
+    var entities = _a.entities, entity = _a.entity, onFinishRequest = _a.onFinishRequest, onStartRequest = _a.onStartRequest;
+    var tenant = react_redux_1.useSelector(mdm_module_1.default.selectors.getTenant);
+    var dtssPath = react_redux_1.useSelector(mdm_module_1.default.selectors.getDtssPath);
+    var _b = react_1.useState(false), isPending = _b[0], setIsPending = _b[1];
+    var sendMergeAllRequest = react_1.useCallback(function () {
+        onStartRequest === null || onStartRequest === void 0 ? void 0 : onStartRequest();
+        setIsPending(true);
+        var params = { dtssPath: dtssPath, customerTenant: tenant, entity: entity, entities: entities };
+        (mdm_sdk_1.isDataTenantEntity(entity)
+            ? mdm_sdk_1.mergeDataTenantEntity(params)
+            : mdm_sdk_1.mergeCustomerTenantEntityWithMixedEntities(params)).finally(function () {
+            onFinishRequest === null || onFinishRequest === void 0 ? void 0 : onFinishRequest();
+            setIsPending(false);
+        });
+    }, [dtssPath, entities, entity, onFinishRequest, onStartRequest, tenant]);
+    return { isPending: isPending, sendMergeAllRequest: sendMergeAllRequest };
+};
+exports.useMergeAllRequest = useMergeAllRequest;

package/esm/components/ActionButton/ActionButton.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export declare enum ActionButtonMode {
+    iconButton = "iconButton",
+    button = "button",
+    menuItem = "menuItem"
+}
+export declare type Props = {
+    className?: string;
+    disabled?: boolean;
+    icon: React.ElementType;
+    label: string;
+    mode: ActionButtonMode;
+    onClick: () => void;
+    onMenuClose?: () => void;
+};
+export declare const ActionButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;

package/esm/components/ActionButton/ActionButton.js

@@ -0,0 +1,65 @@
+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 __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;
+};
+import React, { forwardRef } from 'react';
+import classnames from 'classnames';
+import Button from '@material-ui/core/Button';
+import MenuItem from '@material-ui/core/MenuItem';
+import Typography from '@material-ui/core/Typography';
+import { useStyles } from './styles';
+import { noop } from '../../core';
+import ExpandedValueTooltip from '../ExpandedValueTooltip/ExpandedValueTooltip';
+import { SmallIconButtonWithTooltip } from '../SmallIconButton';
+export var ActionButtonMode;
+(function (ActionButtonMode) {
+    ActionButtonMode["iconButton"] = "iconButton";
+    ActionButtonMode["button"] = "button";
+    ActionButtonMode["menuItem"] = "menuItem";
+})(ActionButtonMode || (ActionButtonMode = {}));
+export var ActionButton = forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.mode, mode = _b === void 0 ? ActionButtonMode.iconButton : _b, label = _a.label, disabled = _a.disabled, Icon = _a.icon, _c = _a.onClick, onClick = _c === void 0 ? noop : _c, _d = _a.onMenuClose, onMenuClose = _d === void 0 ? noop : _d, otherProps = __rest(_a, ["className", "mode", "label", "disabled", "icon", "onClick", "onMenuClose"]);
+    var styles = useStyles();
+    var getButtonView = function () {
+        switch (mode) {
+            case 'iconButton': {
+                return (React.createElement(SmallIconButtonWithTooltip, __assign({ disabled: disabled, className: classnames(styles.iconButton, className), size: "S", tooltipTitle: label, onClick: onClick, icon: Icon }, otherProps)));
+            }
+            case 'button': {
+                return (React.createElement(Button, __assign({ className: classnames(styles.button, className), disabled: disabled, startIcon: React.createElement(Icon, null), onClick: onClick, color: "primary", classes: { startIcon: styles.startIcon, label: styles.label } }, otherProps),
+                    React.createElement(ExpandedValueTooltip, { value: label },
+                        React.createElement("div", { className: styles.overflowStyle }, label))));
+            }
+            case 'menuItem': {
+                var handleClick = function () {
+                    onMenuClose();
+                    onClick();
+                };
+                return (React.createElement(MenuItem, __assign({ classes: { root: styles.menuItem }, onClick: handleClick, disabled: disabled, ref: ref }, otherProps),
+                    React.createElement(React.Fragment, null,
+                        React.createElement(Icon, { className: styles.menuIcon }),
+                        React.createElement(Typography, { classes: { root: styles.menuText } }, label))));
+            }
+        }
+    };
+    return getButtonView();
+});
+ActionButton.displayName = 'ActionButton';

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

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "button" | "startIcon" | "menuItem" | "menuText" | "iconButton" | "overflowStyle" | "menuIcon">;

package/esm/components/ActionButton/styles.js

@@ -0,0 +1,47 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function (theme) { return ({
+    button: {
+        padding: '9px 16px 9px 12px',
+        '& svg g path': {
+            fill: theme.palette.primary.main,
+            fillOpacity: 1
+        }
+    },
+    iconButton: {
+        '& svg g path': {
+            fill: theme.palette.primary.main,
+            fillOpacity: 1
+        }
+    },
+    startIcon: {
+        marginLeft: 0,
+        marginRight: '8px',
+        width: '18px',
+        height: '18px',
+        alignItems: 'center'
+    },
+    label: {
+        whiteSpace: 'nowrap',
+        fontSize: '14px',
+        lineHeight: '16px',
+        letterSpacing: 0
+    },
+    overflowStyle: {
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+    },
+    menuIcon: {
+        marginRight: '12px'
+    },
+    menuItem: {
+        minHeight: '28px',
+        padding: '2px 16px 2px 12px'
+    },
+    menuText: {
+        color: theme.palette.text.primary,
+        fontSize: '13px',
+        lineHeight: '15px',
+        letterSpacing: 0
+    }
+}); });

package/esm/components/MergeButton/MergeButton.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ActionButtonMode } from '../ActionButton/ActionButton';
+import { Entity } from '@reltio/mdm-sdk';
+declare type Props = {
+    className?: string;
+    entities: Entity[];
+    entity: Entity;
+    mode?: ActionButtonMode;
+    onMenuClose?: () => void;
+    disabled?: boolean;
+    onStartRequest?: () => void;
+    onFinishRequest?: () => void;
+};
+export declare const MergeButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
+export {};

package/esm/components/MergeButton/MergeButton.js

@@ -0,0 +1,39 @@
+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 __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;
+};
+import React, { forwardRef } from 'react';
+import i18n from 'ui-i18n';
+import MergeIcon from './mergeIcon.svg';
+import { noop } from '../../core';
+import { ActionButton, ActionButtonMode } from '../ActionButton/ActionButton';
+import { useMergeAllRequest } from '../../hooks';
+export var MergeButton = forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.mode, mode = _b === void 0 ? ActionButtonMode.iconButton : _b, _c = _a.onMenuClose, onMenuClose = _c === void 0 ? noop : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, entity = _a.entity, entities = _a.entities, onStartRequest = _a.onStartRequest, onFinishRequest = _a.onFinishRequest, otherProps = __rest(_a, ["className", "mode", "onMenuClose", "disabled", "entity", "entities", "onStartRequest", "onFinishRequest"]);
+    var sendMergeAllRequest = useMergeAllRequest({
+        entity: entity,
+        entities: entities,
+        onStartRequest: onStartRequest,
+        onFinishRequest: onFinishRequest
+    }).sendMergeAllRequest;
+    return (React.createElement(ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: i18n.text('Merge'), icon: MergeIcon, onClick: sendMergeAllRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
+});
+MergeButton.displayName = 'mergeButton';

package/esm/components/NotMatchButton/NotMatchButton.d.ts

@@ -0,0 +1,15 @@
+import { Entity } from '@reltio/mdm-sdk';
+import { ActionButtonMode } from '../ActionButton/ActionButton';
+import React from 'react';
+declare type Props = {
+    className?: string;
+    entities: Entity[];
+    entity: Entity;
+    mode?: ActionButtonMode;
+    onMenuClose?: () => void;
+    disabled?: boolean;
+    onStartRequest?: () => void;
+    onFinishRequest?: () => void;
+};
+export declare const NotMatchButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
+export {};

package/esm/components/NotMatchButton/NotMatchButton.js

@@ -0,0 +1,39 @@
+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 __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;
+};
+import { ActionButton, ActionButtonMode } from '../ActionButton/ActionButton';
+import React, { forwardRef } from 'react';
+import NotMatchIcon from './notMatch.svg';
+import { noop } from '../../core';
+import i18n from 'ui-i18n';
+import { useMarkAsNotMatchRequest } from '../../hooks/useMarkAsNotMatchRequest';
+export var NotMatchButton = forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.mode, mode = _b === void 0 ? ActionButtonMode.iconButton : _b, _c = _a.onMenuClose, onMenuClose = _c === void 0 ? noop : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, entity = _a.entity, entities = _a.entities, onStartRequest = _a.onStartRequest, onFinishRequest = _a.onFinishRequest, otherProps = __rest(_a, ["className", "mode", "onMenuClose", "disabled", "entity", "entities", "onStartRequest", "onFinishRequest"]);
+    var sendMarkAsNotMatchRequest = useMarkAsNotMatchRequest({
+        entity: entity,
+        entities: entities,
+        onStartRequest: onStartRequest,
+        onFinishRequest: onFinishRequest
+    }).sendMarkAsNotMatchRequest;
+    return (React.createElement(ActionButton, __assign({ className: className, disabled: disabled, mode: mode, label: i18n.text('Not a match'), icon: NotMatchIcon, onClick: sendMarkAsNotMatchRequest, onMenuClose: onMenuClose, ref: ref }, otherProps)));
+});
+NotMatchButton.displayName = 'notMatchButton';

package/esm/components/ProfileMatchCard/ProfileMatchCard.d.ts

@@ -8,6 +8,7 @@ declare type Props = {
     match: PotentialMatch;
     metadata: Metadata;
     children?: React.ReactNode;
+    className?: string;
 };
-export declare const ProfileMatchCard: ({ children, entitiesMap, entity, match, metadata }: Props) => JSX.Element;
+export declare const ProfileMatchCard: ({ children, entitiesMap, entity, match, metadata, className }: Props) => JSX.Element;
 export {};

package/esm/components/ProfileMatchCard/ProfileMatchCard.js

@@ -2,10 +2,11 @@ import React from 'react';
 import { useStyles } from './styles';
 import ProfileCard from '../ProfileCard/ProfileCard';
 import MatchRulesBlock from '../MatchRulesBlock/MatchRulesBlock';
+import classnames from 'classnames';
 export var ProfileMatchCard = function (_a) {
-    var children = _a.children, entitiesMap = _a.entitiesMap, entity = _a.entity, match = _a.match, metadata = _a.metadata;
+    var children = _a.children, entitiesMap = _a.entitiesMap, entity = _a.entity, match = _a.match, metadata = _a.metadata, className = _a.className;
     var styles = useStyles();
-    return (React.createElement("div", { className: styles.root },
+    return (React.createElement("div", { className: classnames(styles.root, className) },
         React.createElement("div", { className: styles.profileCardWrapper },
             React.createElement(ProfileCard, { entity: match.object, classes: { container: styles.profileCardContainer }, disableEntityTypeColor: true }),
             children),

package/esm/components/attributes/AttributesView/AttributesView.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { AttributesViewOwnProps } from '../types';
-declare const AttributesView: ({ mode, attributesCount, ...restProps }: AttributesViewOwnProps) => JSX.Element;
+declare const AttributesView: ({ mode, attributesCount, pinnedAttributes, ...restProps }: AttributesViewOwnProps) => JSX.Element;
 export default AttributesView;

package/esm/components/attributes/AttributesView/AttributesView.js

@@ -25,7 +25,7 @@ import { isViewMode, Mode } from '@reltio/mdm-sdk';
 import ReadModeAttributesView from '../readMode/AttributesView';
 import EditModeAttributesView from '../editMode/AttributesView';
 var AttributesView = function (_a) {
-    var _b = _a.mode, mode = _b === void 0 ? Mode.Viewing : _b, attributesCount = _a.attributesCount, restProps = __rest(_a, ["mode", "attributesCount"]);
-    return isViewMode(mode) ? (React.createElement(ReadModeAttributesView, __assign({ attributesCount: attributesCount }, restProps))) : (React.createElement(EditModeAttributesView, __assign({ mode: mode }, restProps)));
+    var _b = _a.mode, mode = _b === void 0 ? Mode.Viewing : _b, attributesCount = _a.attributesCount, pinnedAttributes = _a.pinnedAttributes, restProps = __rest(_a, ["mode", "attributesCount", "pinnedAttributes"]);
+    return isViewMode(mode) ? (React.createElement(ReadModeAttributesView, __assign({ attributesCount: attributesCount }, restProps))) : (React.createElement(EditModeAttributesView, __assign({ mode: mode, pinnedAttributes: pinnedAttributes }, restProps)));
 };
 export default AttributesView;

package/esm/components/attributes/AttributesView/index.d.ts

@@ -3,5 +3,5 @@ import { AttributesViewOwnProps } from '../types';
 import AttributesView from './AttributesView';
 declare type Props = Pick<AttributesViewOwnProps, 'entity' | 'mode'>;
 export { AttributesView };
-declare const _default: import("react-redux").ConnectedComponent<({ mode, attributesCount, ...restProps }: AttributesViewOwnProps) => JSX.Element, import("react-redux").Omit<AttributesViewOwnProps, "entity" | "mode"> & Props>;
+declare const _default: import("react-redux").ConnectedComponent<({ mode, attributesCount, pinnedAttributes, ...restProps }: AttributesViewOwnProps) => JSX.Element, import("react-redux").Omit<AttributesViewOwnProps, "entity" | "mode"> & Props>;
 export default _default;

package/esm/components/attributes/editMode/AttributesList/AttributesList.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import i18n from 'ui-i18n';
 import { getCreatableAttributeTypes, getAttributesListForEditMode, ModeType } from '@reltio/mdm-sdk';
@@ -20,12 +20,14 @@ import MoreAttributesButton from '../MoreAttributesButton';
 import { ALWAYS_VISIBLE_TYPE_URIS } from '../../../../constants';
 import { splitPagersData } from '../../helpers/attributesView';
 import { getMoreAttrTypes } from './helpers';
+import { PinnedAttributesContext } from '../contexts/PinnedAttributesContext';
 var AttributesList = function (_a) {
     var attrTypes = _a.attrTypes, entity = _a.entity, parentUri = _a.parentUri, showEmptyEditors = _a.showEmptyEditors, mode = _a.mode, crosswalks = _a.crosswalks, drawLines = _a.drawLines, children = _a.children, className = _a.className, _b = _a.alwaysVisibleTypeUris, alwaysVisibleTypeUris = _b === void 0 ? ALWAYS_VISIBLE_TYPE_URIS : _b, onAddAttributes = _a.onAddAttributes, onChangeAttribute = _a.onChangeAttribute, onDeleteAttribute = _a.onDeleteAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, showNonOv = _a.showNonOv;
     var _c = entity.attributes, attributes = _c === void 0 ? {} : _c;
     var creatableAttrTypes = useMemo(function () { return getCreatableAttributeTypes(mode, attrTypes); }, [attrTypes, mode]);
     var moreAttrTypes = getMoreAttrTypes(creatableAttrTypes, entity);
-    var pagersData = useMemo(function () { return getAttributesListForEditMode(attrTypes, mode, entity, showEmptyEditors, showNonOv); }, [attrTypes, mode, entity, showEmptyEditors, showNonOv]);
+    var pinnedAttributes = useContext(PinnedAttributesContext);
+    var pagersData = useMemo(function () { return getAttributesListForEditMode(attrTypes, mode, entity, showEmptyEditors, showNonOv, pinnedAttributes); }, [attrTypes, mode, entity, showEmptyEditors, showNonOv, pinnedAttributes]);
     var _d = useMemo(function () { return splitPagersData(alwaysVisibleTypeUris, pagersData); }, [pagersData, alwaysVisibleTypeUris]), alwaysVisiblePagersData = _d[0], regularPagersData = _d[1];
     var onAddMoreAttributes = useCallback(function (attributeTypes) {
         onAddAttributes(attributeTypes.map(function (attributeType) { return ({ attributeType: attributeType, parentUri: parentUri }); }));

package/esm/components/attributes/editMode/AttributesPager/AttributeRenderer.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState, useContext, useMemo } from 'react';
 import { createNewAttribute, getAttributeOwnError, isComplexAttribute, isEditableMode as checkIsEditableMode, isEmptyValue } from '@reltio/mdm-sdk';
 import { add, always, has, ifElse, min, pipe, prop, T } from 'ramda';
 import BranchDecorator from '../../BranchDecorator/BranchDecorator';
@@ -10,6 +10,7 @@ import Attribute from '../AttributesFactory/Attribute';
 import Cardinality from './CardinalityMessage';
 import { useStyles } from './styles';
 import { filterNewValues } from './utils';
+import { PinnedAttributesContext } from '../contexts/PinnedAttributesContext';
 var AttributeRenderer = function (_a) {
     var max = _a.max, values = _a.values, attributeType = _a.attributeType, parentUri = _a.parentUri, mode = _a.mode, drawLines = _a.drawLines, showEmptyEditors = _a.showEmptyEditors, errorMessage = _a.errorMessage, errors = _a.errors, paging = _a.paging, crosswalks = _a.crosswalks, showNonOv = _a.showNonOv, onAddAttributes = _a.onAddAttributes, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, onDeactivateError = _a.onDeactivateError, additionalControlsRenderer = _a.additionalControlsRenderer, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues;
     var styles = useStyles();
@@ -17,8 +18,10 @@ var AttributeRenderer = function (_a) {
     var _c = useState(false), hadDeletions = _c[0], setHadDeletions = _c[1];
     var label = attributeType.label, isRequired = attributeType.required, cardinality = attributeType.cardinality, name = attributeType.name, attributeTypeUri = attributeType.uri;
     var isEditableMode = checkIsEditableMode(mode);
+    var pinnedAttributes = useContext(PinnedAttributesContext);
+    var isPinned = useMemo(function () { return pinnedAttributes === null || pinnedAttributes === void 0 ? void 0 : pinnedAttributes.includes(attributeTypeUri); }, [attributeTypeUri, pinnedAttributes]);
     var isEmptyValues = isEmptyValue(values);
-    var showEmpty = ((!hadDeletions && showEmptyEditors) || isRequired) && isEmptyValues;
+    var showEmpty = ((!hadDeletions && showEmptyEditors) || isRequired || isPinned) && isEmptyValues;
     var emptyEditorValue = useRef(createNewAttribute({
         parentUri: parentUri,
         attributeType: attributeType

package/esm/components/attributes/editMode/AttributesView/AttributesView.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { AttributesViewProps } from '../../types';
 declare type Props = Omit<AttributesViewProps, 'attributesCount'>;
-declare const AttributesView: ({ className, entity, mode, metadata, caption, excludeUris, includeUris }: Props) => JSX.Element;
+declare const AttributesView: ({ className, entity, mode, metadata, caption, excludeUris, includeUris, pinnedAttributes }: Props) => JSX.Element;
 export default AttributesView;

package/esm/components/attributes/editMode/AttributesView/AttributesView.js

@@ -14,7 +14,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import classnames from 'classnames';
 import { pipe } from 'ramda';
 import mdmModule, { profile } from '@reltio/mdm-module';
-import { isTempUri } from '@reltio/mdm-sdk';
+import { isTempUri, getPinnedAttributesForUser } from '@reltio/mdm-sdk';
 import Box from '@material-ui/core/Box';
 import BasicView from '../../../BasicView/BasicView';
 import FacetViewHeader from '../../../FacetViewHeader/FacetViewHeader';
@@ -22,12 +22,18 @@ import AttributesList from '../AttributesList';
 import { ViewIdContext } from '../../../../contexts';
 import { getFilteredAttrTypes } from '../../helpers/attributesView';
 import { useStyles } from './styles';
+import { PinnedAttributesContext } from '../contexts/PinnedAttributesContext';
 var AttributesView = function (_a) {
     var _b;
-    var className = _a.className, _c = _a.entity, entity = _c === void 0 ? {} : _c, mode = _a.mode, metadata = _a.metadata, _d = _a.caption, caption = _d === void 0 ? '' : _d, _e = _a.excludeUris, excludeUris = _e === void 0 ? [] : _e, _f = _a.includeUris, includeUris = _f === void 0 ? [] : _f;
+    var className = _a.className, _c = _a.entity, entity = _c === void 0 ? {} : _c, mode = _a.mode, metadata = _a.metadata, _d = _a.caption, caption = _d === void 0 ? '' : _d, _e = _a.excludeUris, excludeUris = _e === void 0 ? [] : _e, _f = _a.includeUris, includeUris = _f === void 0 ? [] : _f, pinnedAttributes = _a.pinnedAttributes;
     var styles = useStyles();
     var dispatch = useDispatch();
     var viewId = useContext(ViewIdContext);
+    var userRoles = useSelector(mdmModule.selectors.getUserRoles);
+    var pinnedAttributeUris = useMemo(function () { return getPinnedAttributesForUser(pinnedAttributes, userRoles); }, [
+        pinnedAttributes,
+        userRoles
+    ]);
     var modifiedEntity = useSelector(function (state) { return mdmModule.selectors.getModifiedEntity(state, entity.uri) || {}; });
     var filteredAttrTypes = useMemo(function () { return getFilteredAttrTypes(metadata, modifiedEntity.type, includeUris, excludeUris); }, [excludeUris, includeUris, metadata, modifiedEntity.type]);
     var onAddAttributes = useCallback(function (params) {
@@ -38,6 +44,7 @@ var AttributesView = function (_a) {
     return (React.createElement(BasicView, { className: className },
         caption && React.createElement(FacetViewHeader, { className: styles.header, title: caption }),
         React.createElement(Box, { className: classnames(styles.attributesContainer, (_b = {}, _b[styles.noCaption] = !caption, _b)) },
-            React.createElement(AttributesList, { entity: modifiedEntity, attrTypes: filteredAttrTypes, parentUri: modifiedEntity.uri, drawLines: false, mode: mode, showEmptyEditors: isTempUri(modifiedEntity.uri), crosswalks: modifiedEntity.crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute }))));
+            React.createElement(PinnedAttributesContext.Provider, { value: pinnedAttributeUris },
+                React.createElement(AttributesList, { entity: modifiedEntity, attrTypes: filteredAttrTypes, parentUri: modifiedEntity.uri, drawLines: false, mode: mode, showEmptyEditors: isTempUri(modifiedEntity.uri), crosswalks: modifiedEntity.crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute })))));
 };
 export default AttributesView;

package/esm/components/attributes/editMode/AttributesView/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import AttributesView from './AttributesView';
 export { AttributesView };
-declare const _default: import("react-redux").ConnectedComponent<({ className, entity, mode, metadata, caption, excludeUris, includeUris }: {
+declare const _default: import("react-redux").ConnectedComponent<({ className, entity, mode, metadata, caption, excludeUris, includeUris, pinnedAttributes }: {
     entity?: import("@reltio/mdm-sdk").Entity | Record<string, never>;
     metadata: import("@reltio/mdm-sdk").Metadata;
     mode?: import("@reltio/mdm-sdk").Mode;
@@ -9,6 +9,10 @@ declare const _default: import("react-redux").ConnectedComponent<({ className, e
     includeUris?: string[];
     excludeUris?: string[];
     className?: string;
+    pinnedAttributes?: {
+        attributes: string[];
+        roles?: string[];
+    }[];
 }) => JSX.Element, import("react-redux").Omit<{
     entity?: import("@reltio/mdm-sdk").Entity | Record<string, never>;
     metadata: import("@reltio/mdm-sdk").Metadata;
@@ -17,5 +21,9 @@ declare const _default: import("react-redux").ConnectedComponent<({ className, e
     includeUris?: string[];
     excludeUris?: string[];
     className?: string;
+    pinnedAttributes?: {
+        attributes: string[];
+        roles?: string[];
+    }[];
 }, "metadata">>;
 export default _default;

package/esm/components/attributes/editMode/contexts/PinnedAttributesContext.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const PinnedAttributesContext: React.Context<string[]>;

package/esm/components/attributes/editMode/contexts/PinnedAttributesContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export var PinnedAttributesContext = React.createContext(null);

package/esm/components/attributes/readMode/AttributesView/index.d.ts

@@ -9,6 +9,10 @@ declare const _default: import("react-redux").ConnectedComponent<({ className, e
     excludeUris?: string[];
     className?: string;
     attributesCount?: number;
+    pinnedAttributes?: {
+        attributes: string[];
+        roles?: string[];
+    }[];
 }) => JSX.Element, import("react-redux").Omit<{
     entity?: import("@reltio/mdm-sdk").Entity | Record<string, never>;
     metadata: import("@reltio/mdm-sdk").Metadata;
@@ -17,5 +21,9 @@ declare const _default: import("react-redux").ConnectedComponent<({ className, e
     excludeUris?: string[];
     className?: string;
     attributesCount?: number;
+    pinnedAttributes?: {
+        attributes: string[];
+        roles?: string[];
+    }[];
 }, "metadata">>;
 export default _default;

package/esm/components/attributes/types/attributesView.d.ts

@@ -6,6 +6,10 @@ declare type OwnProps = {
     entity?: Entity | Record<string, never>;
     excludeUris?: string[];
     includeUris?: string[];
+    pinnedAttributes?: {
+        attributes: string[];
+        roles?: string[];
+    }[];
     mode?: Mode;
 };
 declare type StateProps = {

package/esm/components/history/HistoryMenuButton/HistoryMenuButton.js

@@ -1,9 +1,35 @@
 import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import i18n from 'ui-i18n';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
+import mdmModule, { HistoryMode, profile } from '@reltio/mdm-module';
 import { SmallIconButton } from '../../SmallIconButton';
+import DropDownMenuButton from '../../DropDownMenuButton/DropDownMenuButton';
+import MenuItemRenderer from './MenuItemRenderer';
 import { useStyles } from './styles';
 var HistoryMenuButton = function () {
     var styles = useStyles();
-    return React.createElement(SmallIconButton, { icon: MoreVertIcon, size: "XS", onClick: function () { }, className: styles.icon });
+    var mode = useSelector(mdmModule.selectors.getHistoryMode);
+    var dispatch = useDispatch();
+    var handleModeChange = function (selectedMode) {
+        dispatch(profile.history.actions.setHistoryMode(selectedMode));
+    };
+    var menuItems = [
+        {
+            text: i18n.text('Compare to Current view'),
+            selected: mode === HistoryMode.Current,
+            onClick: function () { return handleModeChange(HistoryMode.Current); }
+        },
+        {
+            text: i18n.text('Compare to Previous view'),
+            selected: mode === HistoryMode.Previous,
+            onClick: function () { return handleModeChange(HistoryMode.Previous); }
+        }
+    ];
+    return (React.createElement(DropDownMenuButton, { MenuItemRenderer: MenuItemRenderer, buttonComponent: SmallIconButton, buttonProps: {
+            icon: MoreVertIcon,
+            size: 'L',
+            className: styles.icon
+        }, menuId: 'history-menu', menuItems: menuItems }));
 };
 export default HistoryMenuButton;

package/esm/components/history/HistoryMenuButton/MenuItemRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare type Item = {
+    text: string;
+    selected: boolean;
+    onClick: (e: any) => void;
+};
+declare type Props = {
+    item: Item;
+    onMenuClose?: () => void;
+};
+declare const MenuItemRenderer: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
+export default MenuItemRenderer;

package/esm/components/history/HistoryMenuButton/MenuItemRenderer.js

@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+import MenuItem from '@material-ui/core/MenuItem';
+import Typography from '@material-ui/core/Typography';
+import CheckIcon from '@material-ui/icons/Check';
+import { noop } from '../../../core';
+import { useStyles } from './styles';
+var MenuItemRenderer = forwardRef(function (_a, ref) {
+    var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? noop : _b;
+    var styles = useStyles();
+    var text = item.text, selected = item.selected, onClick = item.onClick;
+    var handleClick = function (e) {
+        onMenuClose();
+        onClick(e);
+    };
+    return (React.createElement(MenuItem, { classes: { root: styles.menuItem }, onClick: handleClick, ref: ref },
+        selected && React.createElement(CheckIcon, { className: styles.checkIcon }),
+        React.createElement(Typography, { classes: { root: styles.menuText } }, text)));
+});
+MenuItemRenderer.displayName = 'MenuItemRenderer';
+export default MenuItemRenderer;