@reltio/sources 1.4.1585 → 1.4.1586-mui5

package/src/components/SourcesView/__tests__/SourcesView.spec.tsx

@@ -0,0 +1,903 @@
+import React from 'react';
+import {createStore} from 'redux';
+import {Provider} from 'react-redux';
+import {act} from 'react-dom/test-utils';
+import {mount, ReactWrapper, shallow} from 'enzyme';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+
+import * as components from '@reltio/components';
+import {
+    AttributesTable,
+    CrosswalkDragLayer,
+    EmptyStub,
+    ErrorPopup,
+    ExpandedAttributesProvider,
+    HistoryActivityType,
+    HistoryFilter,
+    HistoryHeader,
+    HistoryPanelEmptyState,
+    HistoryView,
+    PerspectivesSettingsContext,
+    ResizablePanes,
+    ScreenProfileBand,
+    SideButtonsPanel
+} from '@reltio/components';
+import * as mdmSdk from '@reltio/mdm-sdk';
+import {DateRangeTypes, UnmergeOperation} from '@reltio/mdm-sdk';
+import SourcesView from '../SourcesView';
+import {RulesetsSelector} from '../../RulesestsSelector/RulesestsSelector';
+import * as RightSidePanelImport from '../../RightSidePanel/RightSidePanel';
+import {RightSidePanel} from '../../RightSidePanel/RightSidePanel';
+import {LegendMode, SourcesSavedState} from '../../../types';
+import * as useCrosswalkTreeImport from '../../../hooks/useCrosswalkTree';
+import * as useCrosswalksDisplayImport from '../../../hooks/useCrosswalksDisplay';
+import * as useCrosswalkTreeActionsImport from '../../../hooks/useCrosswalkTreeActions';
+import * as useEntityWithSurvivorshipGroupsImport from '../../../hooks/useEntityWithSurvivorshipGroups';
+import {profile} from '@reltio/mdm-module';
+import LegendView from '../../LegendView/LegendView';
+import EmptyState from '../../EmptyState/EmptyState';
+import TreeActionSnackbar from '../../TreeActionSnackbar/TreeActionSnackbar';
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    getCrosswalkTree: jest.fn(),
+    isDataTenantEntity: jest.fn(),
+    getHistoricUris: jest.fn(),
+    getHistoryWithTotal: jest.fn()
+}));
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    ScreenProfileBand: () => null,
+    AttributesTable: () => null,
+    useModifiedEntity: jest.fn(),
+    CrosswalkDragLayer: () => null,
+    useHistory: jest.fn(),
+    HistoryHeader: () => null,
+    HistoryView: () => null,
+    useHistorySlice: jest.fn(),
+    useSnackbar: jest.fn()
+}));
+
+describe('SourcesView tests', () => {
+    let initialState;
+    let resolveSavedState;
+    const dispatch = jest.fn();
+    const createTestStore = (customInitialState?) => {
+        const reducer = (state = {...initialState, ...customInitialState}) => {
+            return state;
+        };
+        const store = createStore(reducer);
+        store.dispatch = dispatch;
+        return store;
+    };
+    const saveState = jest.fn();
+    const props = {
+        config: {
+            id: 'SourcesViewId'
+        },
+        saveState,
+        getSavedState: jest.fn(
+            () =>
+                new Promise((_resolve) => {
+                    resolveSavedState = _resolve;
+                })
+        ) as () => Promise<SourcesSavedState>
+    };
+    const attributeActions = {
+        onPinAttribute: jest.fn(),
+        onDeleteAttribute: jest.fn(),
+        onIgnoreAttribute: jest.fn(),
+        onEditAttribute: jest.fn(),
+        onAddAttribute: jest.fn()
+    };
+    const modifiedEntity = {
+        uri: 'entities/1',
+        type: 'configuration/entityTypes/HCP'
+    };
+    const crosswalksMap = {
+        entity: {},
+        relation: {}
+    };
+    const crosswalkTree = {
+        crosswalks: [],
+        uri: 'test'
+    };
+    const crosswalksDisplayProps = {
+        getCrosswalkColor: jest.fn(),
+        focusedCrosswalks: [],
+        highlightedCrosswalks: [],
+        toggleCrosswalkFocus: jest.fn(),
+        setCrosswalkHighlighted: jest.fn()
+    };
+    const showSnackbarMessageMock = jest.fn();
+    const SnackbarRendererMock = () => <div />;
+    const useSnackbarMock = jest.spyOn(components, 'useSnackbar').mockReturnValue({
+        SnackbarRenderer: SnackbarRendererMock,
+        showSnackbarMessage: showSnackbarMessageMock
+    });
+
+    const newlyCreatedAttributes = [];
+    const useModifiedEntityMock = jest.spyOn(components, 'useModifiedEntity').mockReturnValue({
+        modifiedEntity,
+        crosswalksMap,
+        newlyCreatedAttributes,
+        ...attributeActions
+    });
+    const useCrosswalksDisplayMock = jest
+        .spyOn(useCrosswalksDisplayImport, 'useCrosswalksDisplay')
+        .mockReturnValue(crosswalksDisplayProps);
+    const showErrorMock = jest.spyOn(ErrorPopup, 'addError');
+    const isDataTenantEntityMock = jest.spyOn(mdmSdk, 'isDataTenantEntity').mockReturnValue(false);
+
+    const useCrosswalkTreeMock = jest.spyOn(useCrosswalkTreeImport, 'useCrosswalkTree');
+    const crosswalkTreeActions = {
+        addCrosswalk: jest.fn(),
+        unmergeContributor: jest.fn(),
+        editCrosswalk: jest.fn(),
+        deleteCrosswalk: jest.fn(),
+        unsubscribeContributor: jest.fn()
+    };
+    const useCrosswalkTreeActionsMock = jest
+        .spyOn(useCrosswalkTreeActionsImport, 'useCrosswalkTreeActions')
+        .mockReturnValue(crosswalkTreeActions);
+    const onReloadCrosswalkTree = jest.fn();
+
+    const onChangeSurvivorshipGroup = jest.fn();
+
+    const historicUris = ['entities/12345', 'entities/54321'];
+    const historyWithTotal = {
+        total: 3,
+        changes: [
+            {
+                timestamp: 1636456567409,
+                user: 'user1',
+                type: 'ENTITY_CHANGED'
+            },
+            {
+                timestamp: 1633089195406,
+                user: 'user2',
+                type: 'ENTITIES_SPLITTED'
+            },
+            {
+                timestamp: 1633089195000,
+                user: 'user3',
+                type: 'ENTITIES_SPLITTED'
+            }
+        ]
+    };
+
+    const onApplyFilterMock = jest.fn();
+    const onClearFilterMock = jest.fn();
+
+    const useHistoryResult = {
+        isLoading: false,
+        canLoadMore: false,
+        onLoadMore: jest.fn(),
+        historicUris,
+        historyFilter: {
+            users: ['username2'],
+            activities: [HistoryActivityType.UNMERGE]
+        },
+        historyWithTotal,
+        onApplyFilter: onApplyFilterMock,
+        onClearFilter: onClearFilterMock
+    };
+    const useHistoryMock = jest.spyOn(components, 'useHistory');
+    const useHistorySliceMock = jest
+        .spyOn(components, 'useHistorySlice')
+        .mockReturnValue({historySlice: null, isLoading: false});
+
+    beforeEach(() => {
+        initialState = {
+            tenant: {
+                id: 'tenant'
+            },
+            profile: {
+                entity: {
+                    uri: 'entities/1',
+                    type: 'configuration/entityTypes/HCP',
+                    attributes: {
+                        CountryCode: [
+                            {
+                                uri: 'entities/1/attributes/CountryCode/1',
+                                type: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                                value: 'Italy',
+                                lookupCode: 'IT'
+                            }
+                        ]
+                    },
+                    crosswalks: [
+                        {
+                            uri: 'entities/j8K1vc9/crosswalks/12jf9nL05',
+                            type: 'configuration/sources/Reltio',
+                            value: 'nQpZyQt',
+                            reltioLoadDate: '2021-06-11T08:24:31.726Z',
+                            createDate: '2018-11-19T12:14:00.735Z',
+                            updateDate: '2018-11-19T12:14:00.735Z',
+                            attributes: [
+                                'entities/j8K1vc9/attributes/CountryCode/12jf9nc37',
+                                'entities/j8K1vc9/attributes/Name/1dl1LhLwS'
+                            ],
+                            singleAttributeUpdateDates: {
+                                'entities/j8K1vc9/attributes/Name/1dl1LhLwS': '2018-11-29T05:39:56.445Z'
+                            }
+                        },
+                        {
+                            uri: 'entities/j8K1vc9/crosswalks/1CwTinUzm',
+                            type: 'configuration/sources/AHA',
+                            value: 'AHA_LEV',
+                            reltioLoadDate: '2021-06-09T11:32:16.434Z',
+                            sourcePublishDate: '1970-01-01T00:00:00.000Z',
+                            createDate: '2018-11-28T13:16:18.540Z',
+                            updateDate: '2018-11-28T13:16:18.540Z',
+                            attributes: [
+                                'entities/j8K1vc9/attributes/Address/ZxOfYYo',
+                                'entities/j8K1vc9/attributes/Name/1CwTindWI'
+                            ],
+                            singleAttributeUpdateDates: {
+                                'entities/j8K1vc9/attributes/Name/1CwTindWI': '2021-06-09T11:32:16.434Z'
+                            }
+                        }
+                    ]
+                },
+                history: {
+                    event: {
+                        aStamp: 1637128261696
+                    }
+                }
+            },
+            metadata: {
+                tenant: {
+                    entityTypes: [
+                        {
+                            uri: 'configuration/entityTypes/HCP',
+                            label: 'HCP',
+                            attributes: [
+                                {
+                                    label: 'Country Code',
+                                    name: 'CountryCode',
+                                    type: 'String',
+                                    uri: 'configuration/entityTypes/HCP/attributes/CountryCode'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            },
+            ui: {
+                config: {}
+            }
+        };
+    });
+
+    beforeAll(() => {
+        useCrosswalkTreeMock.mockReturnValue({
+            crosswalkTree: {
+                crosswalks: [],
+                uri: 'test'
+            },
+            reload: onReloadCrosswalkTree
+        });
+        jest.spyOn(RightSidePanelImport, 'RightSidePanel').mockImplementation(EmptyStub);
+        useHistoryMock.mockReturnValue(useHistoryResult);
+        jest.spyOn(useEntityWithSurvivorshipGroupsImport, 'useEntityWithSurvivorshipGroups').mockImplementation(
+            (entity) => ({
+                survivorshipGroups: [{uri: 'uri1', mapping: [], label: 'label'}],
+                currentSurvivorshipGroupUri: 'uri1',
+                onChangeSurvivorshipGroup,
+                entity,
+                isDefaultSurvivorshipGroupUri: true,
+                isLoading: false
+            })
+        );
+    });
+
+    it('should render correctly', () => {
+        const store = createTestStore();
+        const settingsContext = {settings: {source: {active: 0, width: 480}}, onChange: () => {}};
+        const wrapper = mount(
+            <Provider store={store}>
+                <PerspectivesSettingsContext.Provider value={settingsContext}>
+                    <SourcesView {...props} />
+                </PerspectivesSettingsContext.Provider>
+            </Provider>
+        );
+        expect(wrapper.find(ResizablePanes).prop('size')).toBe(480);
+        expect(useCrosswalksDisplayMock).toBeCalledWith({
+            activeMode: 'crosswalks',
+            contributors: [crosswalkTree],
+            entity: initialState.profile.entity
+        });
+        expect(useModifiedEntityMock).toBeCalledWith(
+            expect.objectContaining({
+                entity: initialState.profile.entity
+            })
+        );
+        expect(useSnackbarMock).toBeCalledWith({
+            anchorOrigin: {vertical: 'top', horizontal: 'center'},
+            showDismiss: true
+        });
+        expect(useCrosswalkTreeMock).toBeCalledWith({
+            entityUri: initialState.profile.entity.uri,
+            onSuccess: expect.any(Function)
+        });
+        expect(wrapper.find(ExpandedAttributesProvider).prop('attributeUris')).toBe(newlyCreatedAttributes);
+        const attributeTable = wrapper.find(ExpandedAttributesProvider).find(AttributesTable);
+        expect(attributeTable.prop('entity')).toBe(modifiedEntity);
+        expect(attributeTable.prop('crosswalksMap')).toBe(crosswalksMap);
+        expect(attributeTable.prop('onDelete')).toBe(attributeActions.onDeleteAttribute);
+        expect(attributeTable.prop('onPin')).toBe(attributeActions.onPinAttribute);
+        expect(attributeTable.prop('onIgnore')).toBe(attributeActions.onIgnoreAttribute);
+        expect(attributeTable.prop('onEdit')).toBe(attributeActions.onEditAttribute);
+        expect(attributeTable.prop('onAdd')).toBe(attributeActions.onAddAttribute);
+        expect(attributeTable.prop('isLoading')).toBe(false);
+
+        const additionalHeaderItems = new ReactWrapper(attributeTable.prop('additionalHeaderItems') as any);
+        expect(additionalHeaderItems.find(RulesetsSelector).props()).toEqual({
+            survivorshipGroups: [{uri: 'uri1', mapping: [], label: 'label'}],
+            currentSurvivorshipGroupUri: 'uri1',
+            onChange: onChangeSurvivorshipGroup
+        });
+        expect(additionalHeaderItems.find(Divider)).toHaveLength(1);
+
+        const profileBand = wrapper.find(ScreenProfileBand);
+        expect(profileBand.prop('entity')).toBe(initialState.profile.entity);
+        expect(profileBand.prop('historySlice')).toBe(null);
+
+        expect(wrapper.find(SideButtonsPanel).prop('activeIndexId')).toBe(0);
+
+        expect(wrapper.find(CrosswalkDragLayer)).toHaveLength(1);
+    });
+
+    it('should pass correct isLoading prop to AttributesTable', () => {
+        jest.spyOn(useEntityWithSurvivorshipGroupsImport, 'useEntityWithSurvivorshipGroups').mockImplementation(
+            (entity) => ({
+                survivorshipGroups: [],
+                currentSurvivorshipGroupUri: null,
+                onChangeSurvivorshipGroup,
+                entity,
+                isDefaultSurvivorshipGroupUri: false,
+                isLoading: true
+            })
+        );
+
+        const store = createTestStore();
+        const wrapper = mount(
+            <Provider store={store}>
+                <SourcesView {...props} />
+            </Provider>
+        );
+
+        const attributeTable = wrapper.find(ExpandedAttributesProvider).find(AttributesTable);
+        expect(attributeTable.prop('isLoading')).toBe(true);
+    });
+
+    it('should pass readOnly prop equals true to AttributesTable if current survivorshipGroup is not default', () => {
+        jest.spyOn(useEntityWithSurvivorshipGroupsImport, 'useEntityWithSurvivorshipGroups').mockImplementation(
+            (entity) => ({
+                survivorshipGroups: [],
+                currentSurvivorshipGroupUri: null,
+                onChangeSurvivorshipGroup,
+                entity,
+                isDefaultSurvivorshipGroupUri: false,
+                isLoading: false
+            })
+        );
+
+        const store = createTestStore();
+        const wrapper = mount(
+            <Provider store={store}>
+                <SourcesView {...props} />
+            </Provider>
+        );
+
+        const attributeTable = wrapper.find(ExpandedAttributesProvider).find(AttributesTable);
+        expect(attributeTable.prop('readOnly')).toBe(true);
+    });
+
+    describe('Legend tab', () => {
+        it('should render LegendView in side panel and close it on tab click', async () => {
+            const store = createTestStore();
+            let wrapper;
+            const settingsContext = {settings: {source: {active: 0, width: 480}}, onChange: () => {}};
+            await act(async () => {
+                wrapper = mount(
+                    <Provider store={store}>
+                        <PerspectivesSettingsContext.Provider value={settingsContext}>
+                            <SourcesView {...props} />
+                        </PerspectivesSettingsContext.Provider>
+                    </Provider>
+                );
+            });
+
+            const rightSidePanel = wrapper.find(RightSidePanel);
+            const titleBlock = shallow(<div>{rightSidePanel.prop('tabs')[0].title}</div>);
+            expect(titleBlock.find(Typography).text()).toBe('Legend');
+            const legendBlock = shallow(<div>{rightSidePanel.prop('tabs')[0].content}</div>).find(LegendView);
+            expect(legendBlock.props()).toMatchObject({
+                entity: initialState.profile.entity,
+                activeMode: 'crosswalks',
+                crosswalkTree,
+                contributors: [{uri: 'test', crosswalks: []}],
+                selectedAttributeTypes: undefined,
+                onAddCrosswalk: crosswalkTreeActions.addCrosswalk,
+                onUnmergeContributor: crosswalkTreeActions.unmergeContributor,
+                onUnsubscribeContributor: crosswalkTreeActions.unsubscribeContributor,
+                onEditCrosswalk: crosswalkTreeActions.editCrosswalk,
+                onDeleteCrosswalk: crosswalkTreeActions.deleteCrosswalk
+            });
+        });
+
+        it('should change legend mode correctly', () => {
+            const store = createTestStore();
+            const settingsContext = {settings: {source: {active: 0, width: 480}}, onChange: () => {}};
+            const wrapper = mount(
+                <Provider store={store}>
+                    <PerspectivesSettingsContext.Provider value={settingsContext}>
+                        <SourcesView {...props} />
+                    </PerspectivesSettingsContext.Provider>
+                </Provider>
+            );
+
+            const rightSidePanel = wrapper.find(RightSidePanel);
+            const legendBlock = shallow(<div>{rightSidePanel.prop('tabs')[0].content}</div>).find(LegendView);
+            act(() => {
+                legendBlock.prop('onChangeMode')(LegendMode.Source);
+            });
+            wrapper.update();
+
+            const newRightSidePanel = wrapper.find(RightSidePanel);
+            const newLegendBlock = shallow(<div>{newRightSidePanel.prop('tabs')[0].content}</div>).find(LegendView);
+            expect(newLegendBlock.prop('activeMode')).toBe(LegendMode.Source);
+        });
+
+        it('should apply selected attributes from table to legend view', () => {
+            const store = createTestStore();
+            const settingsContext = {settings: {source: {active: 0, width: 480}}, onChange: () => {}};
+            const wrapper = mount(
+                <Provider store={store}>
+                    <PerspectivesSettingsContext.Provider value={settingsContext}>
+                        <SourcesView {...props} />
+                    </PerspectivesSettingsContext.Provider>
+                </Provider>
+            );
+
+            const selectedAttributeTypes = [
+                {
+                    label: 'Country Code',
+                    name: 'CountryCode',
+                    type: 'String',
+                    uri: 'configuration/entityTypes/HCP/attributes/CountryCode'
+                }
+            ];
+            act(() => {
+                wrapper.find(AttributesTable).prop('onSelectAttributeTypes')(selectedAttributeTypes);
+            });
+            wrapper.update();
+
+            const rightSidePanel = wrapper.find(RightSidePanel);
+            const titleBlock = shallow(<div>{rightSidePanel.prop('tabs')[0].title}</div>);
+            expect(titleBlock.find(Typography).text()).toBe('Legend');
+            const legendBlock = shallow(<div>{rightSidePanel.prop('tabs')[0].content}</div>).find(LegendView);
+            expect(legendBlock.prop('selectedAttributeTypes')).toBe(selectedAttributeTypes);
+        });
+    });
+
+    it('should provide correct visibleColumns to AttributeTable and change it', async () => {
+        const store = createTestStore();
+        const wrapper = mount(
+            <Provider store={store}>
+                <SourcesView {...props} />
+            </Provider>
+        );
+        await act(async () => {
+            resolveSavedState({visibleColumns: ['name1', 'name2']});
+        });
+        wrapper.update();
+
+        const attributeTable = wrapper.find(AttributesTable);
+        expect(attributeTable.prop('visibleColumns')).toEqual(['name1', 'name2']);
+
+        act(() => {
+            attributeTable.prop('onChangeVisibleColumns')(['name3']);
+        });
+        wrapper.update();
+        expect(wrapper.find(AttributesTable).prop('visibleColumns')).toEqual(['name3']);
+        expect(saveState).toHaveBeenCalledWith({visibleColumns: ['name3']});
+    });
+
+    it('should refresh entity and reload crosswalk tree on successful attribute action', () => {
+        const store = createTestStore();
+        mount(
+            <Provider store={store}>
+                <SourcesView {...props} />
+            </Provider>
+        );
+        const {onModify} = useModifiedEntityMock.mock.calls[0][0];
+        onModify();
+        expect(dispatch).toBeCalledWith(
+            profile.entity.actions.loadEntity({
+                viewId: 'SourcesViewId',
+                uri: 'entities/1'
+            })
+        );
+        expect(onReloadCrosswalkTree).toHaveBeenCalled();
+    });
+
+    it('should show error on entity attribute action error', () => {
+        const store = createTestStore();
+        mount(
+            <Provider store={store}>
+                <SourcesView {...props} />
+            </Provider>
+        );
+        const {onError} = useModifiedEntityMock.mock.calls[0][0];
+        onError({errorMessage: 'Some error'});
+        expect(showErrorMock).toBeCalledWith({
+            title: 'Error',
+            message: 'Some error'
+        });
+    });
+
+    it('should refresh entity and reload crosswalk tree on successful crosswalk tree action', () => {
+        const store = createTestStore();
+        mount(
+            <Provider store={store}>
+                <SourcesView {...props} />
+            </Provider>
+        );
+        const {onSuccess} = useCrosswalkTreeActionsMock.mock.calls[0][0];
+        onSuccess();
+        expect(dispatch).toBeCalledWith(
+            profile.entity.actions.loadEntity({
+                viewId: 'SourcesViewId',
+                uri: 'entities/1'
+            })
+        );
+        expect(onReloadCrosswalkTree).toHaveBeenCalled();
+    });
+
+    it('should show correct snackbar when onShowMessage prop of useCrosswalkTreeActions calls', () => {
+        const store = createTestStore();
+        const options = {
+            message: 'some message',
+            entity: {
+                uri: 'entities/123',
+                type: 'configuration/entityTypes/HCP',
+                label: 'Entity label'
+            }
+        };
+        mount(
+            <Provider store={store}>
+                <SourcesView {...props} />
+            </Provider>
+        );
+        const {onShowMessage} = useCrosswalkTreeActionsMock.mock.calls[0][0];
+        onShowMessage(options.message, options.entity);
+        expect(showSnackbarMessageMock).toBeCalledWith(
+            <TreeActionSnackbar message={options.message} entity={options.entity} />
+        );
+
+        onShowMessage(options.message);
+        expect(showSnackbarMessageMock).toBeCalledWith(options.message);
+    });
+
+    it('should show error on crosswalk tree action error', () => {
+        const store = createTestStore();
+        mount(
+            <Provider store={store}>
+                <SourcesView {...props} />
+            </Provider>
+        );
+        const {onError} = useCrosswalkTreeActionsMock.mock.calls[0][0];
+        onError({errorMessage: 'Some error'});
+        expect(showErrorMock).toBeCalledWith({
+            title: 'Error',
+            message: 'Some error'
+        });
+    });
+
+    it('should show error and reload data on crosswalk not found error', () => {
+        const store = createTestStore();
+        mount(
+            <Provider store={store}>
+                <SourcesView {...props} />
+            </Provider>
+        );
+        const {onError} = useCrosswalkTreeActionsMock.mock.calls[0][0];
+        onError({errorMessage: 'Crosswalk not found', errorCode: 102});
+        expect(showErrorMock).toBeCalledWith({
+            title: 'Error',
+            message: 'Crosswalk not found'
+        });
+        expect(dispatch).toBeCalledWith(
+            profile.entity.actions.loadEntity({
+                viewId: 'SourcesViewId',
+                uri: 'entities/1'
+            })
+        );
+        expect(onReloadCrosswalkTree).toHaveBeenCalled();
+    });
+
+    it('should render correctly for data tenant entity', () => {
+        isDataTenantEntityMock.mockReturnValueOnce(true);
+        const store = createTestStore();
+        const settingsContext = {settings: {source: {active: 0, width: 480}}, onChange: () => {}};
+        const wrapper = mount(
+            <Provider store={store}>
+                <PerspectivesSettingsContext.Provider value={settingsContext}>
+                    <SourcesView {...props} />
+                </PerspectivesSettingsContext.Provider>
+            </Provider>
+        );
+        expect(useCrosswalkTreeImport.useCrosswalkTree).toBeCalledWith({
+            entityUri: undefined,
+            onSuccess: expect.any(Function)
+        });
+        expect(wrapper.find(AttributesTable)).toHaveLength(0);
+        expect(wrapper.find(EmptyState)).toHaveLength(1);
+
+        isDataTenantEntityMock.mockReturnValueOnce(true);
+
+        const rightSidePanel = wrapper.find(RightSidePanel);
+
+        const legendBlock = shallow(<div>{rightSidePanel.prop('tabs')[0].content}</div>).find(LegendView);
+        expect(legendBlock.prop('entity')).toBeNull();
+    });
+
+    describe('History tab', () => {
+        it('should render History tab', () => {
+            const store = createTestStore();
+            const wrapper = mount(
+                <Provider store={store}>
+                    <SourcesView {...props} config={{id: 'SourcesViewId'}} />
+                </Provider>
+            );
+            const sideButtonsPanelButtons = wrapper.find(SideButtonsPanel).prop('buttonsProps');
+            expect(sideButtonsPanelButtons.length).toBe(2);
+            expect(sideButtonsPanelButtons[0].tooltipTitle).toBe('Legend');
+            expect(sideButtonsPanelButtons[1].tooltipTitle).toBe('History');
+        });
+
+        it('should render HistoryView in side panel if click on History tab', () => {
+            const store = createTestStore();
+            const settingsContext = {settings: {source: {active: 1, width: 480}}, onChange: () => {}};
+            const wrapper = mount(
+                <Provider store={store}>
+                    <PerspectivesSettingsContext.Provider value={settingsContext}>
+                        <SourcesView {...props} config={{id: 'SourcesViewId'}} />
+                    </PerspectivesSettingsContext.Provider>
+                </Provider>
+            );
+
+            const rightSidePanel = wrapper.find(RightSidePanel);
+            const titleBlock = shallow(<div>{rightSidePanel.prop('tabs')[1].title}</div>);
+            expect(titleBlock.find(HistoryHeader)).toHaveLength(1);
+            expect(titleBlock.find(HistoryHeader).props()).toMatchObject({
+                total: historicUris.length + 1,
+                entityType: initialState.metadata.tenant.entityTypes[0],
+                filter: useHistoryResult.historyFilter
+            });
+
+            const historyBlock = shallow(<div>{rightSidePanel.prop('tabs')[1].content}</div>).find(HistoryView);
+            expect(historyBlock).toHaveLength(1);
+            expect(historyBlock.props()).toMatchObject({
+                isLoading: useHistoryResult.isLoading,
+                historyWithTotal: useHistoryResult.historyWithTotal,
+                entityUri: initialState.profile.entity.uri,
+                historyEvent: initialState.profile.history.event,
+                contributorsUris: useHistoryResult.historicUris,
+                onLoadMore: useHistoryResult.onLoadMore,
+                canLoadMore: useHistoryResult.canLoadMore
+            });
+        });
+
+        it('should render HistoryPanelEmptyState in side panel for data tenant entity', () => {
+            const store = createTestStore();
+            isDataTenantEntityMock.mockReturnValue(true);
+            const settingsContext = {settings: {source: {active: 1, width: 480}}, onChange: () => {}};
+            const wrapper = mount(
+                <Provider store={store}>
+                    <PerspectivesSettingsContext.Provider value={settingsContext}>
+                        <SourcesView {...props} config={{id: 'SourcesViewId'}} />
+                    </PerspectivesSettingsContext.Provider>
+                </Provider>
+            );
+            expect(useHistoryMock).toBeCalledWith({entity: null, enabled: false});
+
+            const rightSidePanel = wrapper.find(RightSidePanel);
+            const titleBlock = shallow(<div>{rightSidePanel.prop('tabs')[1].title}</div>);
+            expect(titleBlock.find(HistoryHeader)).toHaveLength(1);
+            const historyBlock = shallow(<div>{rightSidePanel.prop('tabs')[1].content}</div>);
+            expect(historyBlock.find(HistoryView).length).toBe(0);
+            expect(historyBlock.find(HistoryPanelEmptyState).length).toBe(1);
+            isDataTenantEntityMock.mockReset();
+        });
+
+        it('should render HistoryPanelEmptyState in side panel for temp entity', () => {
+            const store = createTestStore({
+                profile: {
+                    entity: {
+                        uri: 'entities/uri$$1644994321193',
+                        type: 'configuration/entityTypes/HCP',
+                        attributes: {},
+                        crosswalks: []
+                    },
+                    history: {
+                        event: {
+                            aStamp: 1637128261696
+                        }
+                    }
+                }
+            });
+            const settingsContext = {settings: {source: {active: 1, width: 480}}, onChange: () => {}};
+            const wrapper = mount(
+                <Provider store={store}>
+                    <PerspectivesSettingsContext.Provider value={settingsContext}>
+                        <SourcesView {...props} config={{id: 'SourcesViewId'}} />
+                    </PerspectivesSettingsContext.Provider>
+                </Provider>
+            );
+            expect(useHistoryMock).toBeCalledWith({entity: null, enabled: false});
+
+            act(() => {
+                wrapper.find(SideButtonsPanel).prop('onButtonClick')(1);
+            });
+            wrapper.update();
+
+            const rightSidePanel = wrapper.find(RightSidePanel);
+            const titleBlock = shallow(<div>{rightSidePanel.prop('tabs')[1].title}</div>);
+            expect(titleBlock.find(HistoryHeader)).toHaveLength(1);
+            const historyBlock = shallow(<div>{rightSidePanel.prop('tabs')[1].content}</div>);
+            expect(historyBlock.find(HistoryView).length).toBe(0);
+            expect(historyBlock.find(HistoryPanelEmptyState).length).toBe(1);
+        });
+
+        it('should set history filter in useHistory hook when call onApplyFilter of HistoryHeader', () => {
+            const store = createTestStore();
+            const settingsContext = {settings: {source: {active: 1, width: 480}}, onChange: () => {}};
+            const wrapper = mount(
+                <Provider store={store}>
+                    <PerspectivesSettingsContext.Provider value={settingsContext}>
+                        <SourcesView {...props} config={{id: 'SourcesViewId'}} />
+                    </PerspectivesSettingsContext.Provider>
+                </Provider>
+            );
+
+            const rightSidePanel = wrapper.find(RightSidePanel);
+            const titleBlock = shallow(<div>{rightSidePanel.prop('tabs')[1].title}</div>);
+            expect(titleBlock.find(HistoryHeader).prop('filter')).toBe(useHistoryResult.historyFilter);
+            const newFilter: HistoryFilter = {
+                dateRange: {
+                    type: DateRangeTypes.AGO,
+                    period: [4, 'month']
+                },
+                users: ['username1', 'username3'],
+                activities: [HistoryActivityType.UPDATE, HistoryActivityType.UNMERGE],
+                attributes: []
+            };
+
+            act(() => {
+                titleBlock.find(HistoryHeader).prop('onApplyFilter')(newFilter);
+            });
+            wrapper.update();
+            expect(onApplyFilterMock).toBeCalledWith(newFilter);
+        });
+    });
+
+    it('should render correctly if history slice is opened', () => {
+        const historySlice = {
+            aEntity: {
+                uri: 'entities/sliceA',
+                type: 'configuration/entityTypes/HCP',
+                attributes: {}
+            },
+            bEntity: {
+                uri: 'entities/sliceB',
+                type: 'configuration/entityTypes/HCP',
+                attributes: {}
+            }
+        };
+        useHistorySliceMock.mockReturnValue({isLoading: false, historySlice});
+        const store = createTestStore();
+        const settingsContext = {settings: {source: {active: 0, width: 480}}, onChange: () => {}};
+        const wrapper = mount(
+            <Provider store={store}>
+                <PerspectivesSettingsContext.Provider value={settingsContext}>
+                    <SourcesView {...props} />
+                </PerspectivesSettingsContext.Provider>
+            </Provider>
+        );
+        const profileBand = wrapper.find(ScreenProfileBand);
+        expect(profileBand.prop('entity')).toBe(initialState.profile.entity);
+        expect(profileBand.prop('historySlice')).toBe(historySlice);
+
+        expect(useModifiedEntityMock).toBeCalledWith(
+            expect.objectContaining({
+                entity: historySlice.aEntity
+            })
+        );
+        expect(wrapper.find(AttributesTable).prop('readOnly')).toBe(true);
+
+        expect(useCrosswalkTreeMock).toBeCalledWith({
+            entityUri: historySlice.aEntity.uri,
+            onSuccess: expect.any(Function)
+        });
+        const rightSidePanel = wrapper.find(RightSidePanel);
+        const legendView = shallow(<div>{rightSidePanel.prop('tabs')[0].content}</div>).find(LegendView);
+        expect(legendView.prop('entity')).toBe(historySlice.aEntity);
+        expect(legendView.prop('readOnly')).toBe(true);
+        useHistorySliceMock.mockClear();
+    });
+
+    it('should pass readOnly prop equals true to if unmerge or unsubscribe request is in process', async () => {
+        const getLegendBlock = (wrapper: ReactWrapper) => {
+            const rightSidePanel = wrapper.find(RightSidePanel);
+            return shallow(<div>{rightSidePanel.prop('tabs')[0].content}</div>).find(LegendView);
+        };
+        useHistorySliceMock.mockReturnValue({isLoading: false, historySlice: null});
+        useCrosswalkTreeActionsMock.mockImplementation((params) => {
+            const crosswalkTreeActions = {
+                addCrosswalk: jest.fn(),
+                unmergeContributor: (_event) => {
+                    params.onLoad();
+                    params.onSuccess();
+                },
+                editCrosswalk: jest.fn(),
+                deleteCrosswalk: jest.fn(),
+                unsubscribeContributor: jest.fn()
+            };
+            return crosswalkTreeActions;
+        });
+
+        const reloadData = () =>
+            new Promise<void>((resolve) => {
+                resolve();
+            });
+
+        useCrosswalkTreeMock.mockImplementation((params) => {
+            return {
+                crosswalkTree: {
+                    crosswalks: [],
+                    uri: 'test'
+                },
+                reload: () => {
+                    reloadData().finally(() => {
+                        params.onSuccess();
+                    });
+                }
+            };
+        });
+
+        const store = createTestStore();
+        const settingsContext = {settings: {source: {active: 0, width: 480}}, onChange: () => {}};
+        const wrapper = mount(
+            <Provider store={store}>
+                <PerspectivesSettingsContext.Provider value={settingsContext}>
+                    <SourcesView {...props} />
+                </PerspectivesSettingsContext.Provider>
+            </Provider>
+        );
+        const legendBlock = getLegendBlock(wrapper);
+        expect(legendBlock.prop('readOnly')).toBe(false);
+
+        legendBlock.prop('onUnmergeContributor')({
+            contributorUri: 'contributorUri',
+            entityUri: 'entityUri',
+            operationType: UnmergeOperation.Unmerge
+        });
+
+        wrapper.setProps({});
+
+        expect(getLegendBlock(wrapper).prop('readOnly')).toBe(true);
+
+        await act(async () => {
+            reloadData();
+        });
+        wrapper.setProps({});
+
+        expect(getLegendBlock(wrapper).prop('readOnly')).toBe(false);
+    });
+});