@reltio/sources 1.4.1585 → 1.4.1586-mui5

package/src/components/LegendTable/LegendTableRow/LegendTableRow.tsx

@@ -0,0 +1,179 @@
+import React, {useEffect, useRef, useState} from 'react';
+import i18n from 'ui-i18n';
+import {useSelector} from 'react-redux';
+import {
+    CrosswalkEditor,
+    SourceCrosswalksRow,
+    CrosswalksByTypes,
+    CrosswalkType,
+    useCrosswalkFocus,
+    useHighlightedCrosswalks
+} from '@reltio/components';
+import mdm from '@reltio/mdm-module';
+import {
+    Crosswalk,
+    DataTenant,
+    eqCrosswalks,
+    getContributorColor,
+    getDataTenantFromCrosswalks,
+    RelationCrosswalk
+} from '@reltio/mdm-sdk';
+import classnames from 'classnames';
+import {chain, find, flatten, head, pipe, pluck, propOr, props, values} from 'ramda';
+import AddIcon from '@mui/icons-material/Add';
+import UnmergeIcon from '../../../icons/notMatch.svg';
+import UnsubscribeIcon from '@mui/icons-material/Delete';
+import ContributorRow from './ContributorRow/ContributorRow';
+
+import {useStyles} from './styles';
+
+type Props = {
+    className?: string;
+    contributorUri: string;
+    accentContributor?: boolean;
+    crosswalksBySources: {
+        source: string;
+        crosswalksByTypes: CrosswalksByTypes;
+    }[];
+    canUnmerge: boolean;
+    disableAddCrosswalk: boolean;
+    disableEditCrosswalk: boolean;
+    disableDeleteCrosswalk: boolean;
+    disableUnmergeContributor: boolean;
+    onAdd: (event: {contributorCrosswalk: Crosswalk; crosswalk: Omit<Crosswalk, 'uri'>}) => void;
+    onDelete: (crosswalkId: string) => void;
+    onEdit: (event: {crosswalkId: string; attributeName: string; value?: string}) => void;
+    onUnmerge: () => void;
+    expandedSources?: string[];
+    onToggleSourceExpanded: (sourceUri: string) => void;
+    onUnsubscribeContributor: (event: {contributorUri: string; dataTenant: DataTenant; crosswalk: Crosswalk}) => void;
+};
+
+const LegendTableRow = ({
+    className,
+    contributorUri,
+    accentContributor,
+    crosswalksBySources,
+    expandedSources,
+    canUnmerge,
+    disableAddCrosswalk,
+    disableEditCrosswalk,
+    disableDeleteCrosswalk,
+    disableUnmergeContributor,
+    onUnmerge,
+    onEdit,
+    onDelete,
+    onAdd,
+    onToggleSourceExpanded,
+    onUnsubscribeContributor
+}: Props) => {
+    const contributorColor = accentContributor ? getContributorColor(contributorUri) : 'rgba(0, 0, 0, 0.38)';
+    const styles = useStyles({contributorColor});
+    const dataTenants = useSelector(mdm.selectors.getDataTenants);
+
+    const ref = useRef(null);
+    const [scrollToCrosswalk] = useHighlightedCrosswalks();
+    useEffect(() => {
+        if (accentContributor && scrollToCrosswalk) {
+            const crosswalks = pipe(
+                find(({source}) => source === scrollToCrosswalk.type),
+                propOr({}, 'crosswalksByTypes'),
+                values,
+                flatten
+            )(crosswalksBySources);
+            if (
+                crosswalks.some(
+                    (crosswalk) => eqCrosswalks(scrollToCrosswalk, crosswalk) && crosswalk !== scrollToCrosswalk
+                )
+            ) {
+                ref?.current?.scrollIntoView({behavior: 'smooth'});
+            }
+        }
+    }, [scrollToCrosswalk]);
+
+    const [showEditor, setShowEditor] = useState(false);
+
+    const contributorCrosswalk: Crosswalk = pipe(
+        pluck('crosswalksByTypes'),
+        find((crosswalks) => crosswalks[CrosswalkType.Simple].length || crosswalks[CrosswalkType.Empty].length),
+        props([CrosswalkType.Simple, CrosswalkType.Empty]),
+        flatten,
+        head
+    )(crosswalksBySources);
+    const {toggleCrosswalkFocus, isFocused} = useCrosswalkFocus(contributorCrosswalk);
+
+    const allContributorCrosswalks: (Crosswalk | RelationCrosswalk)[] = pipe(
+        pluck('crosswalksByTypes'),
+        chain(values),
+        flatten
+    )(crosswalksBySources);
+
+    const dataTenantForExternalCrosswalk = getDataTenantFromCrosswalks(allContributorCrosswalks, dataTenants);
+
+    const unsubscribeContributor = () =>
+        onUnsubscribeContributor({
+            contributorUri,
+            dataTenant: dataTenantForExternalCrosswalk,
+            crosswalk: contributorCrosswalk
+        });
+
+    const contributorActions = [
+        {
+            icon: AddIcon,
+            tooltipTitle: i18n.text('Add crosswalk'),
+            onClick: () => setShowEditor(true),
+            disabled: disableAddCrosswalk,
+            show: !!contributorCrosswalk
+        },
+        {
+            icon: UnmergeIcon,
+            tooltipTitle: i18n.text('Unmerge'),
+            onClick: () => onUnmerge(),
+            disabled: disableUnmergeContributor,
+            show: canUnmerge
+        },
+        {
+            icon: UnsubscribeIcon,
+            tooltipTitle: i18n.text('Unsubscribe'),
+            onClick: () => unsubscribeContributor(),
+            disabled: disableUnmergeContributor,
+            show: canUnmerge && !!dataTenantForExternalCrosswalk
+        }
+    ];
+
+    return (
+        <div ref={ref} className={classnames(styles.root, className)}>
+            <ContributorRow
+                contributorUri={contributorUri}
+                focusable={accentContributor && !!contributorCrosswalk}
+                isFocused={accentContributor && isFocused}
+                onToggleFocus={toggleCrosswalkFocus}
+                contributorActions={contributorActions}
+            />
+            {crosswalksBySources.map(({source, crosswalksByTypes}) => (
+                <SourceCrosswalksRow
+                    key={source}
+                    source={source}
+                    crosswalksByTypes={crosswalksByTypes}
+                    showCrosswalkColors={!accentContributor}
+                    crosswalksFocusEnabled={!accentContributor}
+                    expanded={expandedSources?.includes(source)}
+                    disableEditCrosswalk={disableEditCrosswalk}
+                    disableDeleteCrosswalk={disableDeleteCrosswalk}
+                    onEdit={onEdit}
+                    onDelete={onDelete}
+                    onToggleExpanded={() => onToggleSourceExpanded(source)}
+                />
+            ))}
+            {showEditor && (
+                <CrosswalkEditor
+                    className={styles.editor}
+                    onAdd={(crosswalk) => onAdd({contributorCrosswalk, crosswalk})}
+                    onClose={() => setShowEditor(false)}
+                />
+            )}
+        </div>
+    );
+};
+
+export default LegendTableRow;

package/src/components/LegendTable/LegendTableRow/__tests__/LegendTableRow.test.tsx

@@ -0,0 +1,371 @@
+import React from 'react';
+import * as reactRedux from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+import {mount, shallow} from 'enzyme';
+import {act} from 'react-dom/test-utils';
+import * as reltioComponents from '@reltio/components';
+import {CrosswalkEditor, SourceCrosswalksRow} from '@reltio/components';
+
+import LegendTableRow from '../LegendTableRow';
+import ContributorRow from '../ContributorRow/ContributorRow';
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    useHighlightedCrosswalks: jest.fn(),
+    useCrosswalkFocus: jest.fn(),
+    SourceCrosswalksRow: () => null
+}));
+
+describe('LegendTableRow tests', () => {
+    const props = {
+        contributorUri: 'entities/2',
+        canUnmerge: true,
+        crosswalksBySources: [
+            {
+                source: 'configuration/sources/Reltio',
+                crosswalksByTypes: {
+                    empty: [],
+                    simple: [
+                        {
+                            uri: 'entities/2/crosswalks/1',
+                            value: '123',
+                            type: 'configuration/sources/Reltio'
+                        }
+                    ],
+                    dependent: []
+                }
+            },
+            {
+                source: 'configuration/sources/FB',
+                crosswalksByTypes: {
+                    empty: [],
+                    simple: [],
+                    dependent: [
+                        {
+                            uri: 'entities/2/crosswalks/1',
+                            value: '456',
+                            type: 'configuration/sources/FB'
+                        }
+                    ]
+                }
+            }
+        ],
+        accentContributor: false,
+        expandedSources: ['configuration/sources/Reltio'],
+        disableAddCrosswalk: false,
+        disableEditCrosswalk: false,
+        disableDeleteCrosswalk: false,
+        onUnmerge: jest.fn(),
+        onAdd: jest.fn(),
+        onEdit: jest.fn(),
+        onDelete: jest.fn(),
+        onToggleSourceExpanded: jest.fn(),
+        onUnsubscribeContributor: jest.fn(),
+        disableUnmergeContributor: false
+    };
+
+    const toggleCrosswalkFocus = jest.fn();
+    const useHighlightedCrosswalksMock = jest.spyOn(reltioComponents, 'useHighlightedCrosswalks').mockReturnValue([]);
+
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector({}));
+        jest.spyOn(mdmModule.selectors, 'getDataTenants').mockReturnValue([
+            {id: 'uitest3', label: 'DT:TEST', name: 'DT_TEST', availableEntityTypes: null},
+            {id: 'hmcyo4cu', label: 'DT:hmcyo4cu', name: 'DT_hmcyo4cu', availableEntityTypes: null}
+        ]);
+        jest.spyOn(reltioComponents, 'useCrosswalkFocus').mockReturnValue({
+            isFocused: false,
+            toggleCrosswalkFocus
+        });
+    });
+
+    it('should render correctly', () => {
+        const wrapper = shallow(<LegendTableRow {...props} />);
+        const contributorRow = wrapper.find(ContributorRow);
+        expect(contributorRow.props()).toMatchObject({
+            contributorUri: props.contributorUri,
+            onToggleFocus: toggleCrosswalkFocus,
+            focusable: false,
+            isFocused: false,
+            contributorActions: [
+                {
+                    tooltipTitle: 'Add crosswalk',
+                    disabled: props.disableAddCrosswalk,
+                    show: true
+                },
+                {
+                    tooltipTitle: 'Unmerge',
+                    disabled: props.disableUnmergeContributor,
+                    show: props.canUnmerge
+                },
+                {
+                    tooltipTitle: 'Unsubscribe',
+                    disabled: props.disableUnmergeContributor,
+                    show: false
+                }
+            ]
+        });
+        const sourceRows = wrapper.find(SourceCrosswalksRow);
+        expect(sourceRows.length).toBe(2);
+        sourceRows.forEach((sourceRow, index) => {
+            const source = props.crosswalksBySources[index].source;
+            expect(sourceRow.props()).toMatchObject({
+                source,
+                showCrosswalkColors: true,
+                crosswalksByTypes: props.crosswalksBySources[index].crosswalksByTypes,
+                disableDeleteCrosswalk: props.disableDeleteCrosswalk,
+                disableEditCrosswalk: props.disableEditCrosswalk,
+                onEdit: props.onEdit,
+                onDelete: props.onDelete,
+                expanded: props.expandedSources.includes(source),
+                crosswalksFocusEnabled: true
+            });
+        });
+    });
+
+    it('should call props.onToggleSourceExpanded on source toggle', () => {
+        const wrapper = shallow(<LegendTableRow {...props} />);
+        wrapper.find(SourceCrosswalksRow).at(1).prop('onToggleExpanded')();
+        expect(props.onToggleSourceExpanded).toBeCalledWith('configuration/sources/FB');
+    });
+
+    it('should disable editing in SourceRow if props.disableEditCrosswalk = true', () => {
+        const wrapper = shallow(<LegendTableRow {...props} disableEditCrosswalk={true} />);
+        wrapper.find(SourceCrosswalksRow).forEach((sourceRow) => {
+            expect(sourceRow.prop('disableEditCrosswalk')).toBeTruthy();
+        });
+    });
+
+    it('should disable deleting in SourceRow if props.disableDeleteCrosswalk = true', () => {
+        const wrapper = shallow(<LegendTableRow {...props} disableDeleteCrosswalk={true} />);
+        wrapper.find(SourceCrosswalksRow).forEach((sourceRow) => {
+            expect(sourceRow.prop('disableDeleteCrosswalk')).toBeTruthy();
+        });
+    });
+
+    it('should not show crosswalk colors if contributor is accented', () => {
+        const wrapper = shallow(<LegendTableRow {...props} accentContributor={true} />);
+        wrapper.find(SourceCrosswalksRow).forEach((row) => {
+            expect(row.prop('showCrosswalkColors')).toBe(false);
+        });
+    });
+
+    it('should scroll to LegendTableRow if accentContributors and crosswalk is highlighted ', () => {
+        const wrapper = mount(<LegendTableRow {...props} accentContributor className={'legendTableRow'} />);
+        const node = wrapper.find('.root.legendTableRow').getDOMNode();
+        node.scrollIntoView = jest.fn();
+        expect(node.scrollIntoView).not.toBeCalled();
+        useHighlightedCrosswalksMock.mockReturnValueOnce([
+            {
+                uri: 'entities/2/crosswalks/1',
+                value: '123',
+                type: 'configuration/sources/Reltio'
+            }
+        ]);
+        wrapper.setProps({});
+        expect(node.scrollIntoView).toBeCalled();
+    });
+
+    describe('Add action tests', () => {
+        const getButton = (wrapper) => wrapper.find(ContributorRow).prop('contributorActions')[0];
+
+        it('should not show action when contributor has no simple or empty crosswalks', () => {
+            const crosswalksBySources = [
+                {
+                    source: 'configuration/sources/Reltio',
+                    crosswalksByTypes: {
+                        empty: [],
+                        simple: [],
+                        dependent: []
+                    }
+                },
+                {
+                    source: 'configuration/sources/FB',
+                    crosswalksByTypes: {
+                        empty: [],
+                        simple: [],
+                        dependent: [
+                            {
+                                uri: 'entities/2/crosswalks/1',
+                                value: '456',
+                                type: 'configuration/sources/FB'
+                            }
+                        ]
+                    }
+                }
+            ];
+            const wrapper = shallow(<LegendTableRow {...props} />);
+            expect(getButton(wrapper).show).toBeTruthy();
+            wrapper.setProps({crosswalksBySources});
+            expect(getButton(wrapper).show).toBeFalsy();
+        });
+
+        it('should disable action if disableAddCrosswalk = true', () => {
+            const wrapper = shallow(<LegendTableRow {...props} disableAddCrosswalk={false} />);
+            expect(getButton(wrapper).disabled).toBeFalsy();
+            wrapper.setProps({disableAddCrosswalk: true});
+            expect(getButton(wrapper).disabled).toBeTruthy();
+        });
+
+        it('should render CrosswalkEditor on click action', () => {
+            const wrapper = shallow(<LegendTableRow {...props} />);
+            expect(wrapper.find(CrosswalkEditor).length).toBe(0);
+            act(() => {
+                getButton(wrapper).onClick(null);
+            });
+            expect(wrapper.find(CrosswalkEditor).length).toBe(1);
+        });
+
+        it('should not render CrosswalkEditor on CrosswalkEditor "onClose" prop calling', () => {
+            const wrapper = shallow(<LegendTableRow {...props} />);
+            act(() => {
+                getButton(wrapper).onClick(null);
+            });
+            act(() => {
+                wrapper.find(CrosswalkEditor).prop('onClose')();
+            });
+            expect(wrapper.find(CrosswalkEditor).length).toBe(0);
+        });
+
+        it('should call "onAdd" prop of CrosswalkEditor on click action', () => {
+            const newCrosswalk = {
+                type: 'someType',
+                value: 'test'
+            };
+            const contributorCrosswalk = {
+                uri: 'entities/2/crosswalks/1',
+                value: '123',
+                type: 'configuration/sources/Reltio'
+            };
+            const wrapper = shallow(<LegendTableRow {...props} />);
+            act(() => {
+                getButton(wrapper).onClick(null);
+            });
+            wrapper.find(CrosswalkEditor).prop('onAdd')(newCrosswalk);
+            expect(props.onAdd).toHaveBeenCalledWith({
+                crosswalk: newCrosswalk,
+                contributorCrosswalk
+            });
+        });
+    });
+
+    describe('Unmerge action tests', () => {
+        const getButton = (wrapper) => wrapper.find(ContributorRow).prop('contributorActions')[1];
+
+        it('should not show action if canUnmerge is false', () => {
+            const wrapper = shallow(<LegendTableRow {...props} canUnmerge={true} />);
+            expect(getButton(wrapper).show).toBeTruthy();
+            wrapper.setProps({canUnmerge: false});
+            expect(getButton(wrapper).show).toBeFalsy();
+        });
+
+        it('should disable action if disableUnmergeContributor is true', () => {
+            const wrapper = shallow(<LegendTableRow {...props} disableUnmergeContributor={false} />);
+            expect(getButton(wrapper).disabled).toBeFalsy();
+            wrapper.setProps({disableUnmergeContributor: true});
+            expect(getButton(wrapper).disabled).toBeTruthy();
+        });
+
+        it('should call onUnmerge on click', () => {
+            const wrapper = shallow(<LegendTableRow {...props} />);
+            expect(props.onUnmerge).toBeCalledTimes(0);
+            getButton(wrapper).onClick(null);
+            expect(props.onUnmerge).toBeCalledTimes(1);
+        });
+    });
+
+    describe('Unsubscribe action tests', () => {
+        const getButton = (wrapper) => wrapper.find(ContributorRow).prop('contributorActions')[2];
+        const crosswalksBySources = [
+            {
+                source: 'configuration/sources/Reltio',
+                crosswalksByTypes: {
+                    simple: [
+                        {
+                            ownerType: 'entity',
+                            uri: 'entities/122cdcTF/crosswalks/2AHh0FKzN',
+                            type: 'configuration/sources/Reltio',
+                            value: '122cdcTF',
+                            reltioLoadDate: '2021-09-01T18:08:02.220Z',
+                            createDate: '2019-02-07T05:25:22.305Z',
+                            updateDate: '2019-02-07T05:25:22.305Z',
+                            attributes: [
+                                'entities/122cdcTF/attributes/Address/1Gv0Y74N',
+                                'entities/122cdcTF/attributes/Name/3l7yIw69b'
+                            ],
+                            singleAttributeUpdateDates: {}
+                        }
+                    ],
+                    empty: [],
+                    dependent: [
+                        {
+                            ownerType: 'relation',
+                            uri: 'entities/122cdcTF/crosswalks/1Gv0Y74N.3l7yIqbAx',
+                            type: 'configuration/sources/Reltio',
+                            value: '1Gv0Y74N',
+                            createDate: '2019-07-04T10:42:51.413Z',
+                            updateDate: '2019-07-04T10:42:51.413Z',
+                            attributeURIs: [
+                                'entities/122cdcTF/attributes/Address/1Gv0Y74N',
+                                'entities/122cdcTF/attributes/Address/1Gv0Y74N/AddressType/2Ytk6Tf220'
+                            ],
+                            crosswalkExternalInfo: {
+                                dtssInfo: {
+                                    tenantId: 'uitest3',
+                                    operationId: '9701e541-2df9-4015-8e8b-edf871bd80f6',
+                                    updatedBy: 'alexander.kirsanov',
+                                    updatedTime: 1630519681682,
+                                    status: 'MANUAL_MERGED'
+                                }
+                            }
+                        }
+                    ]
+                }
+            }
+        ];
+
+        it('should not show action if crosswalk from another dataTenant does not exist and canUnmerge is false', () => {
+            const wrapper = shallow(<LegendTableRow {...props} canUnmerge={false} />);
+            expect(getButton(wrapper).show).toBeFalsy();
+            wrapper.setProps({crosswalksBySources});
+            expect(getButton(wrapper).show).toBeFalsy();
+            wrapper.setProps({canUnmerge: true});
+            expect(getButton(wrapper).show).toBeTruthy();
+        });
+
+        it('should disable action if disableUnmergeContributor is true', () => {
+            const wrapper = shallow(<LegendTableRow {...props} disableUnmergeContributor={false} />);
+            expect(getButton(wrapper).disabled).toBeFalsy();
+            wrapper.setProps({disableUnmergeContributor: true});
+            expect(getButton(wrapper).disabled).toBeTruthy();
+        });
+
+        it('should call onUnsubscribe on click and call it with correct params', () => {
+            const wrapper = shallow(<LegendTableRow {...props} crosswalksBySources={crosswalksBySources} />);
+            getButton(wrapper).onClick(null);
+            expect(props.onUnsubscribeContributor).toHaveBeenCalledWith({
+                contributorUri: props.contributorUri,
+                crosswalk: {
+                    attributes: [
+                        'entities/122cdcTF/attributes/Address/1Gv0Y74N',
+                        'entities/122cdcTF/attributes/Name/3l7yIw69b'
+                    ],
+                    createDate: '2019-02-07T05:25:22.305Z',
+                    ownerType: 'entity',
+                    reltioLoadDate: '2021-09-01T18:08:02.220Z',
+                    singleAttributeUpdateDates: {},
+                    type: 'configuration/sources/Reltio',
+                    updateDate: '2019-02-07T05:25:22.305Z',
+                    uri: 'entities/122cdcTF/crosswalks/2AHh0FKzN',
+                    value: '122cdcTF'
+                },
+                dataTenant: {
+                    availableEntityTypes: null,
+                    id: 'uitest3',
+                    label: 'DT:TEST',
+                    name: 'DT_TEST'
+                }
+            });
+        });
+    });
+});

package/src/components/LegendTable/LegendTableRow/styles.ts

@@ -0,0 +1,31 @@
+import {makeStyles} from '@mui/styles';
+
+type StylesProps = {
+    contributorColor: string;
+};
+
+export const useStyles = makeStyles(() => ({
+    root: ({contributorColor}: StylesProps) => ({
+        fontSize: '13px',
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'stretch',
+        border: '1px solid rgba(0, 0, 0, 0.05)',
+        paddingLeft: '8px',
+        '&:before': {
+            content: '" "',
+            borderLeft: `8px solid ${contributorColor}`,
+            position: 'absolute',
+            top: -1,
+            left: 0,
+            bottom: -1
+        },
+        '& > div + div': {
+            marginTop: '1px'
+        }
+    }),
+    editor: {
+        padding: '0px 30px 0px 25px'
+    }
+}));