@reltio/sources 1.4.1585 → 1.4.1586-mui5

package/src/components/LegendView/LegendView.tsx

@@ -0,0 +1,201 @@
+import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {useSelector} from 'react-redux';
+import InfoIcon from '@mui/icons-material/Info';
+import i18n from 'ui-i18n';
+import {isEmpty} from 'ramda';
+import mdmModule from '@reltio/mdm-module';
+import {
+    AttributeType,
+    calculateCrosswalkTreeDeep,
+    checkMetadataPermission,
+    Contributor,
+    Crosswalk,
+    CrosswalkBase,
+    CrosswalkTree,
+    DataTenant,
+    Entity,
+    getEntityType,
+    getLabel,
+    Metadata,
+    MetadataPermissions,
+    TEntityType,
+    UnmergeOperation
+} from '@reltio/mdm-sdk';
+import {
+    AddCrosswalkEvent,
+    DeleteCrosswalkEvent,
+    EditCrosswalkEvent,
+    ModeSwitcher,
+    noop,
+    ResizablePanes
+} from '@reltio/components';
+import {LegendMode, UnmergeContributorEvent, UnsubscribeContributorEvent} from '../../types';
+import CrosswalkTreeView from '../CrosswalkTreeView/CrosswalkTreeView';
+import LegendTable from '../LegendTable/LegendTable';
+import {UnmergeDialog} from '../UnmergeDialog/UnmergeDialog';
+import {UnsubscribeDialog} from '../UnsubscribeDialog/UnsubscribeDialog';
+
+import {useStyles} from './styles';
+
+export const DEFAULT_LINK_HEIGHT = 60;
+export const MIN_PANE1_SIZE = 170;
+export const MIN_PANE2_SIZE = 170;
+
+type Props = {
+    activeMode: LegendMode;
+    onChangeMode: (mode: LegendMode) => void;
+    crosswalkTree: CrosswalkTree;
+    entity: Entity;
+    contributors: Contributor[];
+    selectedAttributeTypes?: AttributeType[];
+    readOnly?: boolean;
+    onAddCrosswalk?: (event: AddCrosswalkEvent) => void;
+    onEditCrosswalk?: (event: EditCrosswalkEvent) => void;
+    onDeleteCrosswalk?: (event: DeleteCrosswalkEvent) => void;
+    onUnmergeContributor?: (event: UnmergeContributorEvent) => void;
+    onUnsubscribeContributor?: (event: UnsubscribeContributorEvent) => void;
+};
+
+const LegendView = ({
+    activeMode,
+    contributors,
+    crosswalkTree,
+    entity,
+    onChangeMode,
+    onUnmergeContributor = noop,
+    onUnsubscribeContributor = noop,
+    ...tableProps
+}: Props) => {
+    const styles = useStyles();
+
+    const metadata: Metadata = useSelector(mdmModule.selectors.getMetadata);
+    const entityType: TEntityType = getEntityType(metadata, entity?.type);
+
+    const viewRef = useRef<HTMLDivElement>();
+    const [paneSize, setPaneSize] = useState(MIN_PANE1_SIZE);
+    const handlePaneSizeChange = useCallback(({percentageSize}) => setPaneSize(percentageSize), []);
+
+    const [contributorForUnmerge, setContributorForUnmerge] = useState<string>();
+    const [unsubscribeInfo, setUnsubscribeInfo] = useState<{
+        contributorUri: string;
+        dataTenant: DataTenant;
+        crosswalk: Crosswalk;
+    }>();
+
+    const crosswalkTreeDeep = useMemo(() => calculateCrosswalkTreeDeep(crosswalkTree), [crosswalkTree]);
+    const canUnmerge = crosswalkTreeDeep > 1;
+
+    useEffect(() => {
+        const height = Math.max(MIN_PANE1_SIZE, crosswalkTreeDeep * DEFAULT_LINK_HEIGHT);
+        const maxPaneHeight = viewRef.current?.clientHeight - MIN_PANE2_SIZE;
+        setPaneSize(Math.min(maxPaneHeight, height));
+    }, [crosswalkTreeDeep]);
+
+    const modes = useMemo(
+        () => [
+            {
+                id: LegendMode.Crosswalk,
+                title: i18n.text('Crosswalk')
+            },
+            {
+                id: LegendMode.Source,
+                title: i18n.text('Source')
+            },
+            {
+                id: LegendMode.Contributor,
+                title: i18n.text('Contributor')
+            }
+        ],
+        []
+    );
+
+    const [visibleCrosswalks, setVisibleCrosswalks] = useState<CrosswalkBase[]>();
+    const accentContributors = activeMode === LegendMode.Contributor;
+    const disableUnmerge = tableProps.readOnly || !checkMetadataPermission(MetadataPermissions.UNMERGE, entityType);
+
+    return (
+        <div className={styles.root} ref={viewRef}>
+            {contributorForUnmerge && (
+                <UnmergeDialog
+                    canUnmerge={canUnmerge}
+                    onClose={() => setContributorForUnmerge(null)}
+                    onUnmergeContributor={(operationType: UnmergeOperation) => {
+                        onUnmergeContributor({
+                            entityUri: entity.uri,
+                            contributorUri: contributorForUnmerge,
+                            operationType
+                        });
+                    }}
+                    crosswalkTree={crosswalkTree}
+                    contributor={contributors.find(({uri}) => uri === contributorForUnmerge)}
+                />
+            )}
+            {unsubscribeInfo && (
+                <UnsubscribeDialog
+                    canUnsubscribe={canUnmerge}
+                    onClose={() => setUnsubscribeInfo(null)}
+                    onUnsubscribeContributor={() =>
+                        onUnsubscribeContributor({
+                            dataTenant: unsubscribeInfo.dataTenant,
+                            crosswalk: unsubscribeInfo.crosswalk
+                        })
+                    }
+                    crosswalkTree={crosswalkTree}
+                    contributor={contributors.find(({uri}) => uri === unsubscribeInfo.contributorUri)}
+                />
+            )}
+            <ModeSwitcher<LegendMode>
+                modes={modes}
+                modeId={activeMode}
+                className={styles.modeSwitcher}
+                onChange={onChangeMode}
+            />
+            <ResizablePanes
+                className={styles.resizablePanesWrapper}
+                orientation="horizontal"
+                size={paneSize}
+                minSize={MIN_PANE1_SIZE}
+                maxSize={-MIN_PANE2_SIZE}
+                allowResize
+                onChange={handlePaneSizeChange}
+            >
+                <div className={styles.pane}>
+                    {crosswalkTree && !isEmpty(visibleCrosswalks) && (
+                        <CrosswalkTreeView
+                            entityLabel={getLabel(entity?.label)}
+                            crosswalkTree={crosswalkTree}
+                            visibleCrosswalks={visibleCrosswalks}
+                            accentContributors={accentContributors}
+                            disableUnmerge={disableUnmerge || !canUnmerge}
+                            onUnmerge={setContributorForUnmerge}
+                        />
+                    )}
+                </div>
+                <div className={styles.pane}>
+                    <div className={styles.hint}>
+                        <InfoIcon className={styles.infoIcon} />
+                        <span className={styles.hintText}>
+                            {i18n.text('You can drag a crosswalk to add values to attributes swimlanes')}
+                        </span>
+                    </div>
+                    {entity && (
+                        <LegendTable
+                            onUnmergeContributor={setContributorForUnmerge}
+                            onUnsubscribeContributor={setUnsubscribeInfo}
+                            accentContributors={accentContributors}
+                            contributors={contributors}
+                            entity={entity}
+                            entityType={entityType}
+                            onChangeVisibleCrosswalks={setVisibleCrosswalks}
+                            canUnmerge={canUnmerge}
+                            disableUnmerge={disableUnmerge}
+                            {...tableProps}
+                        />
+                    )}
+                </div>
+            </ResizablePanes>
+        </div>
+    );
+};
+
+export default memo(LegendView);

package/src/components/LegendView/__tests__/LegendView.test.tsx

@@ -0,0 +1,307 @@
+import React from 'react';
+import * as reactRedux from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+import {mount, shallow} from 'enzyme';
+import LegendView, {DEFAULT_LINK_HEIGHT, MIN_PANE1_SIZE, MIN_PANE2_SIZE} from '../LegendView';
+import {ModeSwitcher, ResizablePanes} from '@reltio/components';
+import {LegendMode} from '../../../types';
+import CrosswalkTreeView from '../../CrosswalkTreeView/CrosswalkTreeView';
+import LegendTable from '../../LegendTable/LegendTable';
+import {UnmergeDialog} from '../../UnmergeDialog/UnmergeDialog';
+import {act} from 'react-dom/test-utils';
+import * as mdmSdk from '@reltio/mdm-sdk';
+import {CrosswalkTree, UnmergeOperation} from '@reltio/mdm-sdk';
+import {UnsubscribeDialog} from '../../UnsubscribeDialog/UnsubscribeDialog';
+import {rerenderWrapper} from '../../../../../../__mocks__/test-utils';
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    calculateCrosswalkTreeDeep: jest.fn()
+}));
+
+jest.mock('../../LegendTable/LegendTable', () => {
+    const LegendTable = () => <div />;
+    return LegendTable;
+});
+
+const PANE_HEIGHT = 800;
+
+describe('LegendView tests', () => {
+    const entityTypes = [
+        {
+            uri: 'configuration/entityTypes/HCP',
+            label: 'Label',
+            attributes: [],
+            type: 'testType'
+        }
+    ];
+    const props = {
+        activeMode: LegendMode.Crosswalk,
+        onChangeMode: jest.fn(),
+        entity: {uri: 'testUri', type: 'configuration/entityTypes/HCP', label: 'Label'},
+        crosswalkTree: {
+            uri: 'test',
+            crosswalks: [],
+            merges: [
+                {
+                    losers: [
+                        {
+                            merges: []
+                        }
+                    ]
+                }
+            ]
+        } as CrosswalkTree,
+        contributors: [{uri: 'test', crosswalks: []}],
+        onAddCrosswalk: jest.fn(),
+        onEditCrosswalk: jest.fn(),
+        onDeleteCrosswalk: jest.fn(),
+        selectedAttrTypes: [],
+        onUnmergeContributor: jest.fn(),
+        onToggleCrosswalkFocus: jest.fn(),
+        onUnsubscribeContributor: jest.fn()
+    };
+
+    const crosswalkTreeDeepSpy = jest.spyOn(mdmSdk, 'calculateCrosswalkTreeDeep').mockReturnValue(2);
+    const getMetadataSpy = jest.spyOn(mdmModule.selectors, 'getMetadata');
+
+    beforeAll(() => {
+        jest.spyOn(Element.prototype, 'clientHeight', 'get').mockReturnValue(PANE_HEIGHT);
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector({}));
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    beforeEach(() => {
+        getMetadataSpy.mockReturnValue({entityTypes});
+    });
+
+    it('should render component correctly', () => {
+        const component = shallow(<LegendView {...props} />);
+
+        expect(component.find(ModeSwitcher).prop('modeId')).toBe(props.activeMode);
+        const panes = component.find(ResizablePanes).find('.pane');
+        expect(panes.at(0).find(CrosswalkTreeView).props()).toMatchObject({
+            accentContributors: false,
+            entityLabel: 'Label',
+            crosswalkTree: props.crosswalkTree
+        });
+        expect(panes.at(1).find(LegendTable).props()).toMatchObject({
+            accentContributors: false,
+            entity: props.entity,
+            entityType: entityTypes[0],
+            disableUnmerge: false,
+            canUnmerge: true,
+            contributors: props.contributors,
+            onAddCrosswalk: props.onAddCrosswalk,
+            onDeleteCrosswalk: props.onDeleteCrosswalk,
+            onEditCrosswalk: props.onEditCrosswalk,
+            onToggleCrosswalkFocus: props.onToggleCrosswalkFocus
+        });
+    });
+
+    it('should not render crosswalk tree if it is nil', () => {
+        const component = shallow(<LegendView {...props} crosswalkTree={null} />);
+        expect(component.find(CrosswalkTreeView)).toHaveLength(0);
+    });
+
+    it('should not render legend table if entity is nil', () => {
+        const component = shallow(<LegendView {...props} entity={null} />);
+        expect(component.find(LegendTable)).toHaveLength(0);
+    });
+
+    it('should show crosswalks in tree that are visible in table', () => {
+        const component = shallow(<LegendView {...props} />);
+        expect(component.find(CrosswalkTreeView).prop('visibleCrosswalks')).toBe(undefined);
+        const visibleCrosswalks = [
+            {
+                uri: 'crosswalks/1',
+                value: '123',
+                type: 'configuration/sources/Reltio'
+            }
+        ];
+        component.find(LegendTable).prop('onChangeVisibleCrosswalks')(visibleCrosswalks);
+        rerenderWrapper(component);
+        expect(component.find(CrosswalkTreeView).prop('visibleCrosswalks')).toBe(visibleCrosswalks);
+    });
+
+    it('should not render CrosswalkTreeView if visibleCrosswalks is empty', () => {
+        const component = shallow(<LegendView {...props} />);
+        expect(component.find(CrosswalkTreeView).prop('visibleCrosswalks')).toBe(undefined);
+        const visibleCrosswalks = [];
+        component.find(LegendTable).prop('onChangeVisibleCrosswalks')(visibleCrosswalks);
+        rerenderWrapper(component);
+        expect(component.find(CrosswalkTreeView)).toHaveLength(0);
+    });
+
+    it('should call onChangeMode callback when switching mode', () => {
+        const component = shallow(<LegendView {...props} />);
+        const onChange = component.find(ModeSwitcher).prop('onChange') as (mode: LegendMode) => void;
+        onChange(LegendMode.Contributor);
+        expect(props.onChangeMode).toHaveBeenCalledWith(LegendMode.Contributor);
+    });
+
+    it('should accent contributors in Contributor mode', () => {
+        const component = shallow(<LegendView {...props} activeMode={LegendMode.Contributor} />);
+        expect(component.find(LegendTable).prop('accentContributors')).toBe(true);
+        expect(component.find(CrosswalkTreeView).prop('accentContributors')).toBe(true);
+    });
+
+    it('should not render UnmergeDialog if contributorForUnmerge is not defined', () => {
+        const component = shallow(<LegendView {...props} />);
+        expect(component.find(UnmergeDialog)).toHaveLength(0);
+    });
+
+    it('should render UnmergeDialog if contributorForUnmerge is defined correctly', () => {
+        const component = shallow(<LegendView {...props} />);
+        act(() => {
+            component.find(LegendTable).prop('onUnmergeContributor')('test');
+        });
+        rerenderWrapper(component);
+        const unmergeDialog = component.find(UnmergeDialog);
+        expect(unmergeDialog.prop('crosswalkTree')).toEqual(props.crosswalkTree);
+        expect(unmergeDialog.prop('contributor')).toEqual(props.contributors[0]);
+        expect(unmergeDialog.prop('canUnmerge')).toBeTruthy();
+    });
+
+    it('should call onUnmergeContributor on UnmergeDialog "onUnmergeContributor" prop calling', () => {
+        const component = shallow(<LegendView {...props} />);
+        act(() => {
+            component.find(LegendTable).prop('onUnmergeContributor')('test');
+        });
+        rerenderWrapper(component);
+        component.find(UnmergeDialog).prop('onUnmergeContributor')(UnmergeOperation.TreeUnmerge);
+        expect(props.onUnmergeContributor).toHaveBeenCalledWith({
+            entityUri: props.entity.uri,
+            contributorUri: 'test',
+            operationType: UnmergeOperation.TreeUnmerge
+        });
+    });
+
+    it('should unmount UnmergeDialog on UnmergeDialog "onClose" prop calling', () => {
+        const component = shallow(<LegendView {...props} />);
+        act(() => {
+            component.find(LegendTable).prop('onUnmergeContributor')('test');
+        });
+        rerenderWrapper(component);
+        expect(component.find(UnmergeDialog)).toHaveLength(1);
+
+        act(() => {
+            component.find(UnmergeDialog).prop('onClose')();
+        });
+        rerenderWrapper(component);
+        expect(component.find(UnmergeDialog)).toHaveLength(0);
+    });
+
+    it('should not render UnsubscribeDialog if contributorForUnsubscribe is not defined', () => {
+        const component = shallow(<LegendView {...props} />);
+        expect(component.find(UnsubscribeDialog)).toHaveLength(0);
+    });
+
+    it('should provide canUnmerge === false to unmergeDialog if deep crosswalksTree === 1', () => {
+        crosswalkTreeDeepSpy.mockReturnValueOnce(1);
+        const component = shallow(<LegendView {...props} crosswalkTree={{uri: '123213'}} />);
+        act(() => {
+            component.find(LegendTable).prop('onUnmergeContributor')('test');
+        });
+        rerenderWrapper(component);
+        expect(component.find(UnmergeDialog).prop('canUnmerge')).toBeFalsy();
+        expect(component.find(LegendTable).prop('canUnmerge')).toBeFalsy();
+    });
+
+    it('should render UnsubscribeDialog if contributorForUnsubscribe is defined correctly', () => {
+        const component = shallow(<LegendView {...props} />);
+        act(() => {
+            component.find(LegendTable).prop('onUnsubscribeContributor')({
+                contributorUri: 'test',
+                dataTenant: {id: 'id1', label: 'label1', name: 'name1'},
+                crosswalk: {uri: 'crUri1', type: 'type1', value: 'value1'}
+            });
+        });
+        rerenderWrapper(component);
+        const unsubscribeDialog = component.find(UnsubscribeDialog);
+        expect(unsubscribeDialog.prop('crosswalkTree')).toEqual(props.crosswalkTree);
+        expect(unsubscribeDialog.prop('contributor')).toEqual(props.contributors[0]);
+        expect(unsubscribeDialog.prop('canUnsubscribe')).toBeTruthy();
+    });
+
+    it('should call onUnsubscribeContributor on UnsubscribeDialog "onUnsubscribeContributor" prop calling', () => {
+        const component = shallow(<LegendView {...props} />);
+        act(() => {
+            component.find(LegendTable).prop('onUnsubscribeContributor')({
+                contributorUri: 'test',
+                dataTenant: {id: 'id1', label: 'label1', name: 'name1'},
+                crosswalk: {uri: 'crUri1', type: 'type1', value: 'value1'}
+            });
+        });
+        rerenderWrapper(component);
+
+        component.find(UnsubscribeDialog).prop('onUnsubscribeContributor')();
+        expect(props.onUnsubscribeContributor).toHaveBeenCalledWith({
+            dataTenant: {id: 'id1', label: 'label1', name: 'name1'},
+            crosswalk: {uri: 'crUri1', type: 'type1', value: 'value1'}
+        });
+    });
+
+    it('should unmount UnsubscribeDialog on UnsubscribeDialog "onClose" prop calling', () => {
+        const component = shallow(<LegendView {...props} />);
+        act(() => {
+            component.find(LegendTable).prop('onUnsubscribeContributor')({
+                contributorUri: 'test',
+                dataTenant: {id: 'id1', label: 'label1', name: 'name1'},
+                crosswalk: {uri: 'crUri1', type: 'type1', value: 'value1'}
+            });
+        });
+        rerenderWrapper(component);
+        expect(component.find(UnsubscribeDialog)).toHaveLength(1);
+
+        act(() => {
+            component.find(UnsubscribeDialog).prop('onClose')();
+        });
+        rerenderWrapper(component);
+        expect(component.find(UnsubscribeDialog)).toHaveLength(0);
+    });
+
+    it('should provide canUnsubscribe === false to UnsubscribeDialog if deep crosswalksTree === 1', () => {
+        crosswalkTreeDeepSpy.mockReturnValueOnce(1);
+        const component = shallow(<LegendView {...props} crosswalkTree={{uri: '123213'}} />);
+        act(() => {
+            component.find(LegendTable).prop('onUnsubscribeContributor')({
+                contributorUri: 'test',
+                dataTenant: {id: 'id1', label: 'label1', name: 'name1'},
+                crosswalk: {uri: 'crUri1', type: 'type1', value: 'value1'}
+            });
+        });
+        rerenderWrapper(component);
+        expect(component.find(UnsubscribeDialog).prop('canUnsubscribe')).toBeFalsy();
+    });
+
+    it('should render read only legend table if props.readOnly is true', () => {
+        const component = shallow(<LegendView {...props} readOnly />);
+        expect(component.find(LegendTable).prop('readOnly')).toBe(true);
+        component.setProps({readOnly: false});
+        expect(component.find(LegendTable).prop('readOnly')).toBe(false);
+    });
+
+    describe('pane size tests', () => {
+        it('should use min pane size for small crosswalk tree', () => {
+            crosswalkTreeDeepSpy.mockReturnValueOnce(1);
+            const component = mount(<LegendView {...props} />);
+            expect(component.find(ResizablePanes).prop('size')).toBe(MIN_PANE1_SIZE);
+        });
+
+        it('should use correct pane size for medium crosswalk tree', () => {
+            crosswalkTreeDeepSpy.mockReturnValueOnce(4);
+            const component = mount(<LegendView {...props} />);
+            expect(component.find(ResizablePanes).prop('size')).toBe(DEFAULT_LINK_HEIGHT * 4);
+        });
+
+        it('should use max pane size for large crosswalk tree', () => {
+            crosswalkTreeDeepSpy.mockReturnValueOnce(12);
+            const component = mount(<LegendView {...props} />);
+            expect(component.find(ResizablePanes).prop('size')).toBe(PANE_HEIGHT - MIN_PANE2_SIZE);
+        });
+    });
+});

package/src/components/LegendView/styles.ts

@@ -0,0 +1,51 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        height: '100%'
+    },
+    modeSwitcher: {
+        backgroundColor: theme.palette.background.paper,
+        marginTop: '8px'
+    },
+    infoIcon: {
+        fontSize: '18px',
+        marginRight: '8px'
+    },
+    hint: {
+        color: theme.palette.text.secondary,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+        margin: '5px 12px 10px 12px'
+    },
+    hintText: {
+        fontSize: '12px',
+        lineHeight: '16px'
+    },
+    crosswalksList: {
+        height: '100%',
+        width: 'calc(100% - 24px)',
+        margin: '8px 12px',
+        background: theme.palette.divider,
+        opacity: 0.2
+    },
+    pane: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden'
+    },
+    resizablePanesWrapper: {
+        flexGrow: 1,
+        width: '100%'
+    }
+}));

package/src/components/RightSidePanel/RightSidePanel.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import CloseIcon from '@mui/icons-material/Close';
+import {RightPanelTab, SmallIconButton} from '@reltio/components';
+import {useStyles} from './styles';
+
+type Props = {
+    onClose?: () => void;
+    active?: number;
+    tabs: RightPanelTab[];
+};
+
+export const RightSidePanel = ({active, onClose, tabs}: Props) => {
+    const styles = useStyles();
+    const {content, title} = tabs[active] || {};
+
+    return (
+        <>
+            <div className={styles.header}>
+                <SmallIconButton className={styles.closeButton} icon={CloseIcon} onClick={onClose} />
+                {title}
+            </div>
+            {content}
+        </>
+    );
+};

package/src/components/RightSidePanel/__tests__/RightSidePanel.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {SmallIconButton} from '@reltio/components';
+import {RightSidePanel} from '../RightSidePanel';
+
+describe('RightSidePanel', () => {
+    it('should render correctly', () => {
+        const onClose = jest.fn();
+        const props = {
+            active: 0,
+            tabs: [
+                {
+                    content: <div>RSP Content</div>,
+                    title: <div>Title</div>
+                }
+            ],
+            onClose
+        };
+        const component = shallow(<RightSidePanel {...props} />);
+
+        expect(component.findWhere((node) => node.text() === 'Title').exists()).toBe(true);
+        expect(component.findWhere((node) => node.text() === 'RSP Content').exists()).toBe(true);
+
+        const button = component.find(SmallIconButton);
+        button.simulate('click');
+        expect(onClose).toHaveBeenCalled();
+    });
+});

package/src/components/RightSidePanel/styles.ts

@@ -0,0 +1,14 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    header: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: '16px 12px',
+        borderBottom: '1px solid rgba(0, 0, 0, 0.12);'
+    },
+    closeButton: {
+        marginRight: '12px'
+    }
+});

package/src/components/RulesestsSelector/RulesestsSelector.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import {pipe, propEq, prop} from 'ramda';
+import {DropDownSelector} from '@reltio/components';
+import {getLabel, SurvivorshipGroupType} from '@reltio/mdm-sdk';
+import {RulesetOption} from './RulesetOption/RulesetOption';
+import {RulesetsMenuList} from './RulesetsMenuList/RulesetsMenuList';
+import {useStyles} from './styles';
+
+type Props = {
+    survivorshipGroups: SurvivorshipGroupType[];
+    currentSurvivorshipGroupUri: string;
+    onChange: (uri: string) => void;
+};
+
+export const RulesetsSelector = ({survivorshipGroups, currentSurvivorshipGroupUri, onChange}: Props) => {
+    const styles = useStyles();
+    const options = survivorshipGroups.map((group) => ({...group, label: getLabel(group.label)}));
+    const value = options.find(propEq('uri', currentSurvivorshipGroupUri));
+    return (
+        <DropDownSelector
+            height={40}
+            className={styles.root}
+            components={{Option: RulesetOption, MenuList: RulesetsMenuList}}
+            label={i18n.text('Rulesets')}
+            options={options}
+            value={value}
+            onChange={pipe(prop('uri'), onChange)}
+        />
+    );
+};

package/src/components/RulesestsSelector/RulesetOption/RulesetOption.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {SurvivorshipGroupType} from '@reltio/mdm-sdk';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import {useStyles} from './styles';
+
+type MenuItemProps = React.ComponentPropsWithoutRef<typeof MenuItem>;
+
+type Props = {
+    innerRef: React.Ref<HTMLLIElement>;
+    innerProps: MenuItemProps;
+    data: SurvivorshipGroupType;
+};
+
+export const RulesetOption = ({innerRef, innerProps, data}: Props) => {
+    const styles = useStyles();
+    const {label, description} = data;
+
+    return (
+        <MenuItem className={styles.root} ref={innerRef} {...innerProps}>
+            <Typography className={styles.label}>{label}</Typography>
+            {description && <Typography className={styles.description}>{description}</Typography>}
+        </MenuItem>
+    );
+};