@reltio/components 1.4.1896 → 1.4.1898

package/esm/ModeSwitcherSelect/ModeSwitcherSelect.test.js

@@ -1,3 +1,50 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -8,105 +55,201 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import React from 'react';
-import { shallow } from 'enzyme';
-import Select from '@mui/material/Select';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import AddIcon from '@mui/icons-material/Add';
 import CreateIcon from '@mui/icons-material/Create';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import DeleteIcon from '@mui/icons-material/Delete';
+import { getMuiIconByName } from '../test-utils';
 import { ModeSwitcherSelect } from './ModeSwitcherSelect';
+var optionsGroup = [
+    {
+        label: 'Editing label',
+        value: 'Editing',
+        description: 'Edit profile directly',
+        icon: CreateIcon
+    },
+    {
+        label: 'Suggesting label',
+        value: 'Suggesting',
+        description: 'Suggest changes and initiate a workflow review',
+        icon: AddIcon
+    },
+    {
+        label: 'Viewing label',
+        value: 'Viewing',
+        description: 'Read or print profile',
+        icon: VisibilityIcon
+    }
+];
+var buttonsGroup = [
+    {
+        label: 'Delete label',
+        value: 'Delete',
+        description: 'Permanently delete profile',
+        icon: DeleteIcon,
+        onClick: jest.fn()
+    },
+    {
+        label: 'Clone label',
+        value: 'Clone',
+        description: 'Clone profile',
+        icon: CreateIcon,
+        onClick: jest.fn()
+    }
+];
+var defaultProps = {
+    optionsGroup: optionsGroup,
+    buttonsGroup: buttonsGroup,
+    value: 'Viewing',
+    onChange: jest.fn()
+};
+var setUp = function (props) {
+    if (props === void 0) { props = {}; }
+    var user = userEvent.setup();
+    return __assign({ user: user }, render(React.createElement(ModeSwitcherSelect, __assign({}, defaultProps, props))));
+};
 describe('ModeSwitcherSelect tests', function () {
-    var onClick = jest.fn();
-    var optionsGroup = [
-        {
-            label: 'Editing label',
-            value: 'Editing',
-            description: 'Edit profile directly',
-            icon: CreateIcon
-        },
-        {
-            label: 'Suggesting label',
-            value: 'Suggesting',
-            description: 'Suggest changes and initiate a workflow review',
-            icon: CreateIcon
-        },
-        {
-            label: 'Viewing label',
-            value: 'Viewing',
-            description: 'Read or print profile',
-            icon: VisibilityIcon
-        }
-    ];
-    var buttonsGroup = [
-        {
-            label: 'Delete label',
-            value: 'Delete',
-            description: 'Permanently delete profile',
-            icon: DeleteIcon,
-            onClick: onClick
-        }
-    ];
-    it('should render optionsGroups', function () {
-        var component = shallow(React.createElement(ModeSwitcherSelect, { optionsGroup: optionsGroup, buttonsGroup: [], value: "Viewing" }));
-        var menuItems = component.find('.menuItem');
-        expect(menuItems.length).toBe(3);
-        menuItems.forEach(function (node, idx) {
-            expect(node.find(optionsGroup[idx].icon)).toHaveLength(1);
-            expect(node.find('.menuItemLabel').text()).toBe(optionsGroup[idx].label);
-            expect(node.find('.menuItemDescription').text()).toBe(optionsGroup[idx].description);
-        });
+    beforeEach(function () {
+        jest.clearAllMocks();
     });
-    it('should render optionsGroup and buttonsGroup', function () {
-        var component = shallow(React.createElement(ModeSwitcherSelect, { optionsGroup: optionsGroup, buttonsGroup: buttonsGroup, value: "Viewing" }));
-        var menuItems = component.find('.menuItem');
-        expect(menuItems.length).toBe(4);
-        var optionsAndButtonsGroup = __spreadArray(__spreadArray([], optionsGroup, true), buttonsGroup, true);
-        menuItems.forEach(function (node, idx) {
-            expect(node.find(optionsAndButtonsGroup[idx].icon)).toHaveLength(1);
-            expect(node.find('.menuItemLabel').text()).toBe(optionsAndButtonsGroup[idx].label);
-            expect(node.find('.menuItemDescription').text()).toBe(optionsAndButtonsGroup[idx].description);
+    it('should render optionsGroups', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, button, options;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({ buttonsGroup: [] }).user;
+                    button = screen.getByText('Viewing label');
+                    return [4 /*yield*/, user.click(button)];
+                case 1:
+                    _a.sent();
+                    options = screen.getAllByRole('option');
+                    expect(options.length).toBe(3);
+                    expect(getMuiIconByName('Create', options[0])).toBeInTheDocument();
+                    expect(getMuiIconByName('Add', options[1])).toBeInTheDocument();
+                    expect(getMuiIconByName('Visibility', options[2])).toBeInTheDocument();
+                    options.forEach(function (item, i) {
+                        within(item).getByText(optionsGroup[i].label);
+                        within(item).getByText(optionsGroup[i].description);
+                    });
+                    return [2 /*return*/];
+            }
         });
-    });
-    it('should get current value on ModeSwitcherSelect change', function () {
-        var onChange = jest.fn();
-        var component = shallow(React.createElement(ModeSwitcherSelect, { optionsGroup: optionsGroup, buttonsGroup: buttonsGroup, value: "Editing", onChange: onChange }));
-        var select = component.find(Select);
-        select.simulate('change', { target: { value: 'Viewing' } });
-        expect(onChange.mock.calls.length).toBe(1);
-        expect(onChange).toHaveBeenCalledWith('Viewing');
-    });
-    it('button onClick event should work correctly', function () {
-        var component = shallow(React.createElement(ModeSwitcherSelect, { optionsGroup: optionsGroup, buttonsGroup: buttonsGroup, value: "Editing" }));
-        var button = component.find('.menuItem').findWhere(function (n) { return n.prop('value') === 'Delete'; });
-        button.simulate('click');
-        expect(onClick.mock.calls.length).toBe(1);
-        expect(onClick).toHaveBeenCalledWith('Delete');
-    });
-    it('should first button has .firstMenuItemButton className and options hasn`t', function () {
-        var component = shallow(React.createElement(ModeSwitcherSelect, { optionsGroup: optionsGroup, buttonsGroup: buttonsGroup, value: "Viewing" }));
-        var menuItems = component.find('.menuItem');
-        menuItems.forEach(function (node, idx) {
-            var isFirstButton = idx === 3;
-            if (isFirstButton) {
-                expect(node.hasClass('firstMenuItemButton')).toBe(true);
+    }); });
+    it('should render optionsGroup and buttonsGroup', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, button, options, allOptions;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    button = screen.getByText('Viewing label');
+                    return [4 /*yield*/, user.click(button)];
+                case 1:
+                    _a.sent();
+                    options = screen.getAllByRole('option');
+                    expect(options.length).toBe(5);
+                    expect(getMuiIconByName('Create', options[0])).toBeInTheDocument();
+                    expect(getMuiIconByName('Add', options[1])).toBeInTheDocument();
+                    expect(getMuiIconByName('Visibility', options[2])).toBeInTheDocument();
+                    expect(getMuiIconByName('Delete', options[3])).toBeInTheDocument();
+                    expect(getMuiIconByName('Create', options[4])).toBeInTheDocument();
+                    allOptions = __spreadArray(__spreadArray([], optionsGroup, true), buttonsGroup, true);
+                    options.forEach(function (item, i) {
+                        within(item).getByText(allOptions[i].label);
+                        within(item).getByText(allOptions[i].description);
+                    });
+                    return [2 /*return*/];
             }
-            else {
-                expect(node.hasClass('firstMenuItemButton')).toBe(false);
+        });
+    }); });
+    it('should call onChange with correct value', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, button;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    button = screen.getByText('Viewing label');
+                    return [4 /*yield*/, user.click(button)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('Suggesting label'))];
+                case 2:
+                    _a.sent();
+                    expect(defaultProps.onChange).toHaveBeenCalledWith('Suggesting');
+                    return [2 /*return*/];
             }
         });
+    }); });
+    it('button onClick event should work correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, button;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    button = screen.getByText('Viewing label');
+                    return [4 /*yield*/, user.click(button)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('Delete label'))];
+                case 2:
+                    _a.sent();
+                    expect(defaultProps.onChange).not.toHaveBeenCalled();
+                    expect(buttonsGroup[0].onClick).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should first button has .firstMenuItemButton className and options hasn`t', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, button, options;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    button = screen.getByText('Viewing label');
+                    return [4 /*yield*/, user.click(button)];
+                case 1:
+                    _a.sent();
+                    options = screen.getAllByRole('option');
+                    expect(options[2]).not.toHaveClass('firstMenuItemButton');
+                    expect(options[3]).toHaveClass('firstMenuItemButton');
+                    expect(options[4]).not.toHaveClass('firstMenuItemButton');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render current value correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({ value: 'Suggesting' }).user;
+                    return [4 /*yield*/, user.click(screen.getByText('Suggesting label'))];
+                case 1:
+                    _a.sent();
+                    screen.getByRole('option', {
+                        name: 'Suggesting label Suggest changes and initiate a workflow review',
+                        selected: true
+                    });
+                    screen.getByRole('option', { name: 'Viewing label Read or print profile', selected: false });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should not crash when current value is not from options/buttons', function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            setUp({ value: 'NonExisting' });
+            expect(screen.getByRole('button')).toHaveTextContent('NonExisting');
+            return [2 /*return*/];
+        });
+    }); });
+    it('should disable button', function () {
+        setUp({ disabled: true });
+        expect(screen.getByRole('button')).toHaveClass('Mui-disabled');
     });
-    it('should render current value correctly', function () {
-        var component = shallow(React.createElement(ModeSwitcherSelect, { optionsGroup: optionsGroup, buttonsGroup: buttonsGroup, value: "Viewing" }));
-        var select = component.find(Select);
-        var renderValue = function () { return select.renderProp('renderValue')(select.prop('value')); };
-        expect(renderValue().find('.currentValue')).toHaveLength(1);
-        expect(renderValue().find(VisibilityIcon)).toHaveLength(1);
-        expect(renderValue().find('.currentValueText').text()).toBe('Viewing label');
-    });
-    it('should not crash when current value is not from options/buttons', function () {
-        var component = shallow(React.createElement(ModeSwitcherSelect, { optionsGroup: optionsGroup, buttonsGroup: buttonsGroup, value: "Viewing1" }));
-        var select = component.find(Select);
-        var renderValue = function () { return select.renderProp('renderValue')(select.prop('value')); };
-        expect(renderValue().find('.currentValue')).toHaveLength(1);
-        expect(renderValue().find('.currentValueText').text()).toBe('Viewing1');
+    it('should show loader instead of icon', function () {
+        setUp({ loading: true });
+        screen.getByTestId('mode-loading-spinner');
+        expect(getMuiIconByName('Visibility', screen.getByRole('button'))).not.toBeInTheDocument();
     });
 });

package/esm/ModeSwitcherSelect/styles.d.ts

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

package/esm/ModeSwitcherSelect/styles.js

@@ -7,6 +7,8 @@ export var useStyles = makeStyles(function (theme) { return ({
     normal: {},
     thin: {},
     root: {
+        display: 'inline-flex',
+        alignItems: 'center',
         maxWidth: CALCULATED_MAX_WIDTH_SELECT,
         '&$outlined': {
             minHeight: '1.1876em'
@@ -20,6 +22,16 @@ export var useStyles = makeStyles(function (theme) { return ({
             paddingBottom: '6px'
         }
     },
+    select: {
+        '&.Mui-disabled': {
+            '& .MuiOutlinedInput-notchedOutline': {
+                borderColor: theme.palette.text.disabled
+            },
+            '& $currentValueIcon, & $currentValueText': {
+                color: theme.palette.text.disabled
+            }
+        }
+    },
     outlined: {
         paddingRight: SELECT_PADDING_RIGHT,
         paddingLeft: SELECT_PADDING_LEFT
@@ -38,6 +50,9 @@ export var useStyles = makeStyles(function (theme) { return ({
         alignItems: 'center'
     },
     currentValueIcon: {
+        width: '1em',
+        height: '1em',
+        display: 'inline-block',
         fontSize: '18px',
         marginRight: '8px',
         color: theme.palette.text.secondary
@@ -63,6 +78,9 @@ export var useStyles = makeStyles(function (theme) { return ({
         alignItems: 'flex-start'
     },
     menuItemIcon: {
+        width: '1em',
+        height: '1em',
+        display: 'inline-block',
         fontSize: '18px',
         color: theme.palette.text.secondary,
         marginRight: '9px'

package/esm/contexts/MdmModuleContext/context.d.ts

@@ -93,6 +93,7 @@ export type MdmModuleActionsContextProps = Partial<{
     errorSet: (payload: string) => void;
     setHistoryMode: (payload: HistoryMode) => void;
     modeUpdated: (payload: Mode) => void;
+    modeUpdateRequested: (payload: Mode) => void;
     setHistoryEvent: (payload: HistoryEvent) => void;
     clearHistoryEvent: () => void;
     clearHistoryDiff: () => void;
@@ -162,6 +163,7 @@ export declare const MdmModuleActionsContext: import("@fluentui/react-context-se
     errorSet: (payload: string) => void;
     setHistoryMode: (payload: HistoryMode) => void;
     modeUpdated: (payload: Mode) => void;
+    modeUpdateRequested: (payload: Mode) => void;
     setHistoryEvent: (payload: HistoryEvent) => void;
     clearHistoryEvent: () => void;
     clearHistoryDiff: () => void;

package/esm/contexts/MdmModuleContext/hooks.d.ts

@@ -71,7 +71,7 @@ export declare const useMdmDependentLookupEditorContext: (attributeValue: Simple
 };
 export declare const useMdmGlobalSearchRequestOptions: (omittingFields?: string[]) => import("@reltio/mdm-sdk").GlobalSearchRequestOptions;
 export declare const useMdmAuthoringItemsByEntityType: (entityTypeUri: string) => import("@reltio/mdm-sdk").AuthoringItem[];
-export declare const useMdmAction: <T extends "openSearch" | "openHistoryEvent" | "openConsoleApp" | "addAttributes" | "modifyAttribute" | "removeAttribute" | "entityDeleted" | "entityCreated" | "errorDeactivated" | "requestNextPageOfAttributeValues" | "openEntity" | "setDefaultProfilePicForModifiedEntity" | "setDefaultProfilePicForEntity" | "dependentLookupsEditorTouched" | "openPivotingPerspective" | "lookupsLoaded" | "lookupsForTypeResolved" | "errorSet" | "setHistoryMode" | "modeUpdated" | "setHistoryEvent" | "clearHistoryEvent" | "clearHistoryDiff" | "setHistoryDiff" | "setHistorySlice" | "updateSearchNavigationDataFields" | "openPerspective" | "entityDeletionFinished" | "loadEntity" | "updateSearchNavigationDataOnMerge" | "lookupsListResolved" | "relationsLoaded" | "setInitialInfo" | "setRelationType" | "closeRelationEditor" | "openRelationEditor" | "setRelationEntity" | "errorsSet" | "addRelation" | "editRelation" | "updateHiddenAttributes" | "resetHiddenAttributes" | "updateControlAttributes">(action: T) => Partial<{
+export declare const useMdmAction: <T extends "openSearch" | "openHistoryEvent" | "openConsoleApp" | "addAttributes" | "modifyAttribute" | "removeAttribute" | "entityDeleted" | "entityCreated" | "errorDeactivated" | "requestNextPageOfAttributeValues" | "openEntity" | "setDefaultProfilePicForModifiedEntity" | "setDefaultProfilePicForEntity" | "dependentLookupsEditorTouched" | "openPivotingPerspective" | "lookupsLoaded" | "lookupsForTypeResolved" | "errorSet" | "setHistoryMode" | "modeUpdated" | "modeUpdateRequested" | "setHistoryEvent" | "clearHistoryEvent" | "clearHistoryDiff" | "setHistoryDiff" | "setHistorySlice" | "updateSearchNavigationDataFields" | "openPerspective" | "entityDeletionFinished" | "loadEntity" | "updateSearchNavigationDataOnMerge" | "lookupsListResolved" | "relationsLoaded" | "setInitialInfo" | "setRelationType" | "closeRelationEditor" | "openRelationEditor" | "setRelationEntity" | "errorsSet" | "addRelation" | "editRelation" | "updateHiddenAttributes" | "resetHiddenAttributes" | "updateControlAttributes">(action: T) => Partial<{
     openSearch: (payload: import("@reltio/mdm-sdk").SearchState) => void;
     openHistoryEvent: (payload: {
         entityUri: string;
@@ -108,6 +108,7 @@ export declare const useMdmAction: <T extends "openSearch" | "openHistoryEvent"
     errorSet: (payload: string) => void;
     setHistoryMode: (payload: import("@reltio/mdm-sdk").HistoryMode) => void;
     modeUpdated: (payload: import("@reltio/mdm-sdk").Mode) => void;
+    modeUpdateRequested: (payload: import("@reltio/mdm-sdk").Mode) => void;
     setHistoryEvent: (payload: import("@reltio/mdm-sdk").HistoryEvent) => void;
     clearHistoryEvent: () => void;
     clearHistoryDiff: () => void;

package/esm/features/history/HistoryGraph/components/HistoryCircle/HistoryCircle.js

@@ -25,7 +25,7 @@ import { BUMP_RADIUS, LINE_MARGIN } from './constants';
 export var HistoryCircle = forwardRef(function (_a, ref) {
     var x = _a.x, y = _a.y, color = _a.color, isDashed = _a.isDashed, isCollapsed = _a.isCollapsed, showCollapseIcon = _a.showCollapseIcon, showLine = _a.showLine, otherProps = __rest(_a, ["x", "y", "color", "isDashed", "isCollapsed", "showCollapseIcon", "showLine"]);
     var radius = showCollapseIcon ? BUMP_RADIUS * 2 : BUMP_RADIUS;
-    return (React.createElement("g", __assign({}, otherProps, { ref: ref }),
+    return (React.createElement("g", __assign({ "data-reltio-id": "history-circle" }, otherProps, { ref: ref }),
         showLine && (React.createElement("rect", { id: "line", x: x - radius - LINE_MARGIN, y: y - radius - LINE_MARGIN, width: radius * 2 + LINE_MARGIN * 2, height: 2, fill: color })),
         React.createElement("circle", { cx: x, cy: y, r: radius, fill: isDashed ? '#fff' : color, stroke: color, strokeDasharray: isDashed ? '1,1' : undefined, strokeWidth: 2 }),
         showCollapseIcon && (React.createElement("g", { id: "icon" },

package/esm/features/history/HistoryRow/HistoryRow.js

@@ -12,7 +12,9 @@ export var HistoryRow = function (_a) {
     var colorUri = fakeType && uris ? uris[0] : uri;
     var color = getContributorColor(colorUri);
     var styles = useStyles({ color: color });
-    return (React.createElement("div", { className: classnames(styles.historyRow, (_b = {}, _b[styles.selected] = isSelected, _b)), onClick: onClick },
+    return (React.createElement("div", { "data-reltio-id": "history-row", className: classnames(styles.historyRow, (_b = {},
+            _b[styles.selected] = isSelected,
+            _b)), onClick: onClick },
         React.createElement("div", { className: styles.rowHeader },
             React.createElement("div", { className: styles.badge }),
             React.createElement(Typography, { className: classnames(styles.title, { bold: isCurrent }) }, isCurrent ? i18n.text('Current view') : getActivityLabel(type)),

package/esm/features/history/HistoryTree/HistoryTree.js

@@ -30,7 +30,7 @@ export var HistoryTree = function (_a) {
     var _e = useState(-1), selectedIndex = _e[0], setSelectedIndex = _e[1];
     var setHistoryEvent = useMdmAction('setHistoryEvent');
     var clearHistoryEvent = useMdmAction('clearHistoryEvent');
-    var modeUpdated = useMdmAction('modeUpdated');
+    var modeUpdateRequested = useMdmAction('modeUpdateRequested');
     var metadata = useMdmMetadata();
     var isEditableMode = useMdmIsEditableMode();
     useEffect(function () {
@@ -77,12 +77,7 @@ export var HistoryTree = function (_a) {
     };
     var handleHistoryRowClick = function (index, change, isSelected, isCurrent) {
         if (isEditableMode) {
-            if (window.confirm(i18n.text('Are you sure you want to go in history mode? All your changes will be lost.'))) {
-                modeUpdated(Mode.Viewing);
-            }
-            else {
-                return;
-            }
+            modeUpdateRequested(Mode.Viewing);
         }
         if ((isCurrent && !isSelected) || (!isCurrent && isSelected)) {
             clearHistoryEvent();