@reltio/sources 1.4.1585 → 1.4.1586-mui5

package/src/components/SourcesView/__tests__/data/metadata.data.ts

@@ -0,0 +1,27 @@
+export const getMetadata = ({tenant, access}) => ({
+    [tenant]: {
+        entityTypes: [
+            {
+                uri: 'configuration/entityTypes/HCP',
+                label: 'HCP',
+                attributes: [
+                    {
+                        label: 'Country Code',
+                        name: 'CountryCode',
+                        type: 'String',
+                        uri: 'configuration/entityTypes/HCP/attributes/CountryCode'
+                    }
+                ],
+                ...(access ? {access} : {})
+            }
+        ],
+        sources: [
+            {
+                uri: 'configuration/sources/Reltio',
+                label: 'Reltio',
+                icon: 'images/source/reltio.png',
+                abbreviation: 'Reltio'
+            }
+        ]
+    }
+});

package/src/components/SourcesView/__tests__/data/store.data.ts

@@ -0,0 +1,65 @@
+import {getMetadata} from './metadata.data';
+
+export const createInitialState = ({access = null} = {}) => {
+    const tenant = 'alenat';
+    return {
+        profile: {
+            entity: {
+                uri: 'entities/1mGpgPSC',
+                type: 'configuration/entityTypes/HCP',
+                attributes: {
+                    CountryCode: [
+                        {
+                            uri: 'entities/1mGpgPSC/attributes/CountryCode/1',
+                            type: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                            value: 'Italy',
+                            lookupCode: 'IT'
+                        }
+                    ]
+                },
+                crosswalks: [
+                    {
+                        uri: 'entities/1mGpgPSC/crosswalks/4eQNj0MiJ',
+                        type: 'configuration/sources/Reltio',
+                        value: '1OCFJIn5',
+                        reltioLoadDate: '2021-06-11T08:24:31.726Z',
+                        createDate: '2018-11-19T12:14:00.735Z',
+                        updateDate: '2018-11-19T12:14:00.735Z',
+                        attributes: [
+                            'entities/1mGpgPSC/attributes/CountryCode/12jf9nc37',
+                            'entities/1mGpgPSC/attributes/Name/1dl1LhLwS'
+                        ],
+                        singleAttributeUpdateDates: {}
+                    },
+                    {
+                        uri: 'entities/1mGpgPSC/crosswalks/5JS297jHk',
+                        type: 'configuration/sources/Reltio',
+                        value: '1mGpgPSC',
+                        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/1mGpgPSC/attributes/Address/ZxOfYYo',
+                            'entities/1mGpgPSC/attributes/Name/1CwTindWI'
+                        ],
+                        singleAttributeUpdateDates: {
+                            'entities/1mGpgPSC/attributes/Name/1CwTindWI': '2021-06-09T11:32:16.434Z'
+                        }
+                    }
+                ]
+            },
+            history: {
+                mode: 'Current'
+            }
+        },
+        metadata: getMetadata({tenant, access}),
+        ui: {
+            config: {}
+        },
+        tenant: {
+            id: tenant
+        },
+        dataTenants: []
+    };
+};

package/src/components/SourcesView/icons/LegendIcon.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" masktype="alpha" maskUnits="userSpaceOnUse" x="2" y="3" width="19" height="17">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 5C2.5 4.17 3.17 3.5 4 3.5C4.83 3.5 5.5 4.17 5.5 5C5.5 5.83 4.83 6.5 4 6.5C3.17 6.5 2.5 5.83 2.5 5ZM21 20H8V18H21V20ZM8 10H21V8H8V10ZM8 6V4H21V6H8ZM8 16H21V14H8V16ZM5.5 16.5V13.5H2.5V16.5H5.5Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<rect width="24" height="24" fill-opacity="0.54" fill="#000000"/>
+</g>
+</svg>

package/src/components/SourcesView/index.tsx

@@ -0,0 +1,57 @@
+import React, {useCallback} from 'react';
+import {Provider} from 'react-redux';
+import {Store} from 'redux';
+
+import {AdapterMoment} from '@mui/x-date-pickers/AdapterMoment';
+import createGenerateClassName from '@mui/styles/createGenerateClassName';
+import StylesProvider from '@mui/styles/StylesProvider';
+import ReactResizeDetector from 'react-resize-detector';
+import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
+import {ErrorPopup, ViewIdContext} from '@reltio/components';
+import {SourcesSavedState} from '../../types';
+import SourcesView from './SourcesView';
+import {promisifyCallback, SourcesPerspectiveConfig} from '@reltio/mdm-sdk';
+
+const generateClassName = createGenerateClassName({
+    productionPrefix: 'sourcesPerspective',
+    disableGlobal: true,
+    seed: 'srcs'
+});
+
+type Props = {
+    config: SourcesPerspectiveConfig;
+    store: Store<unknown>;
+    onResize?: (width: number, height: number) => void;
+    saveState: (state: SourcesSavedState) => void;
+    getSavedState: (clb: (state: SourcesSavedState) => void) => void;
+};
+
+const SourcesPerspective = ({config, store, onResize, saveState, getSavedState}: Props) => {
+    const getSavedStatePromisified: () => Promise<SourcesSavedState> = useCallback(promisifyCallback(getSavedState), [
+        getSavedState
+    ]);
+    return (
+        <Provider store={store}>
+            <ViewIdContext.Provider value={config.id}>
+                <StylesProvider generateClassName={generateClassName}>
+                    <LocalizationProvider dateAdapter={AdapterMoment}>
+                        <ReactResizeDetector
+                            handleHeight
+                            onResize={(width, height) => onResize?.(Math.floor(width), Math.floor(height))}
+                        />
+                        {config && (
+                            <SourcesView
+                                config={config}
+                                saveState={saveState}
+                                getSavedState={getSavedStatePromisified}
+                            />
+                        )}
+                        <ErrorPopup />
+                    </LocalizationProvider>
+                </StylesProvider>
+            </ViewIdContext.Provider>
+        </Provider>
+    );
+};
+
+export default SourcesPerspective;

package/src/components/SourcesView/styles.ts

@@ -0,0 +1,44 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    sourcesView: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+        display: 'flex'
+    },
+    '@global div[role=tooltip]': {
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif'
+    },
+    '@global div[role=presentation]': {
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif'
+    },
+    resizablePanesWrapper: {
+        flexGrow: 1,
+        height: '100%'
+    },
+    pane: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden'
+    },
+    headerDivider: {
+        marginLeft: '16px',
+        marginRight: '8px',
+        height: '32px',
+        borderColor: 'rgba(0, 0, 0, 0.12)'
+    },
+    attributesTable: {
+        backgroundColor: '#fff'
+    }
+});

package/src/components/TreeActionSnackbar/TreeActionSnackbar.tsx

@@ -0,0 +1,38 @@
+import React, {useContext} from 'react';
+import i18n from 'ui-i18n';
+import {useSelector} from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+import {Entity, getLabel} from '@reltio/mdm-sdk';
+import {UrlGeneratorsContext} from '@reltio/components';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import InfoIcon from '@mui/icons-material/Info';
+
+import {useStyles} from './styles';
+
+type Props = {
+    entity: Entity;
+    message: string;
+};
+
+const TreeActionSnackbar = ({entity, message}: Props) => {
+    const styles = useStyles();
+    const uiPath = useSelector(mdmModule.selectors.getUIPath);
+    const {generateEntityUrl} = useContext(UrlGeneratorsContext);
+    const entityLink = generateEntityUrl({uiPath, uri: entity.uri});
+
+    return (
+        <div className={styles.snackbarMessage}>
+            <InfoIcon className={styles.snackbarIcon} />
+            <Typography>
+                {getLabel(entity.label)}{' '}
+                <Link href={entityLink} target="_blank" underline="hover">
+                    {i18n.text('lookup profile')}
+                </Link>{' '}
+                {message}
+            </Typography>
+        </div>
+    );
+};
+
+export default TreeActionSnackbar;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import TreeActionSnackbar from '../TreeActionSnackbar';
+
+describe('TreeActionSnackbar tests', () => {
+    const store = {
+        ui: {
+            paths: {
+                uiPath: 'https://tst-01.reltio.com/reltio/api/uitest1'
+            }
+        }
+    };
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+    it('should render correctly', () => {
+        const entity = {
+            uri: 'entities/123',
+            type: 'configuration/entityTypes/HCP',
+            label: 'Entity label'
+        };
+        const message = 'has been unmerged';
+        const wrapper = shallow(<TreeActionSnackbar entity={entity} message={message} />);
+        expect(wrapper.find('.snackbarMessage')).toHaveLength(1);
+        expect(wrapper.find('.snackbarIcon')).toHaveLength(1);
+
+        const typography = wrapper.find(Typography);
+        expect(typography).toHaveLength(1);
+        expect(typography.find(Link).props()).toMatchObject({
+            href: `${store.ui.paths.uiPath}#p~com.reltio.plugins.entity.default.DefaultPerspective_e~${entity.uri}`,
+            target: '_blank'
+        });
+        expect(typography.text()).toBe(`${entity.label} lookup profile ${message}`);
+    });
+});

package/src/components/TreeActionSnackbar/styles.ts

@@ -0,0 +1,11 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    snackbarMessage: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    snackbarIcon: {
+        paddingRight: 16
+    }
+});

package/src/components/UnmergeDialog/UnmergeDialog.tsx

@@ -0,0 +1,78 @@
+import React, {useCallback, useState} from 'react';
+import i18n from 'ui-i18n';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Typography from '@mui/material/Typography';
+import {SelectableTree} from '../SelectableTree/SelectableTree';
+import {
+    collectCrosswalksFromContributor,
+    Contributor,
+    CrosswalkTree,
+    getLastUriPart,
+    UnmergeOperation
+} from '@reltio/mdm-sdk';
+
+import {useStyles} from './styles';
+
+type Props = {
+    contributor: Contributor;
+    crosswalkTree: CrosswalkTree;
+    canUnmerge?: boolean;
+    onClose: () => void;
+    onUnmergeContributor: (operationType: UnmergeOperation) => void;
+};
+
+export const UnmergeDialog = ({canUnmerge, contributor, crosswalkTree, onClose, onUnmergeContributor}: Props) => {
+    const styles = useStyles();
+
+    const [unmergeOperation, setUnmergeOperation] = useState(UnmergeOperation.Unmerge);
+
+    const getColoredCrosswalks = useCallback(
+        (includeMerges: boolean) => collectCrosswalksFromContributor(contributor, includeMerges).map(({uri}) => uri),
+        [contributor]
+    );
+
+    const unmergeContributor = () => {
+        onUnmergeContributor(unmergeOperation);
+        onClose();
+    };
+
+    return (
+        <Dialog open={true} onClose={onClose} classes={{paper: styles.dialogContainer}}>
+            <DialogTitle classes={{root: styles.dialogTitle}}>{i18n.text('Unmerge')}</DialogTitle>
+            <DialogContent classes={{root: styles.dialogContent}}>
+                <Typography variant={'body2'} className={styles.uri}>
+                    <span className={styles.title}>{i18n.text('Entity URI:')}</span>
+                    {getLastUriPart(contributor.uri).toUpperCase()}
+                </Typography>
+                <div className={styles.trees}>
+                    <SelectableTree
+                        onSelect={() => setUnmergeOperation(UnmergeOperation.Unmerge)}
+                        selected={unmergeOperation === UnmergeOperation.Unmerge}
+                        title={i18n.text('Unmerge')}
+                        crosswalkTree={crosswalkTree}
+                        coloredCrosswalks={getColoredCrosswalks(true)}
+                    />
+                    {contributor.merges && contributor.uri !== crosswalkTree.uri && (
+                        <SelectableTree
+                            onSelect={() => setUnmergeOperation(UnmergeOperation.TreeUnmerge)}
+                            selected={unmergeOperation === UnmergeOperation.TreeUnmerge}
+                            title={i18n.text('Tree unmerge')}
+                            crosswalkTree={crosswalkTree}
+                            coloredCrosswalks={getColoredCrosswalks(false)}
+                        />
+                    )}
+                </div>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose}>{i18n.text('Cancel')}</Button>
+                <Button disabled={!canUnmerge} onClick={unmergeContributor} color="primary">
+                    {i18n.text('Unmerge')}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};

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

@@ -0,0 +1,124 @@
+import React from 'react';
+import Button from '@mui/material/Button';
+import {UnmergeOperation} from '@reltio/mdm-sdk';
+import {shallow} from 'enzyme';
+import {act} from 'react-dom/test-utils';
+import Typography from '@mui/material/Typography';
+import {UnmergeDialog} from '../UnmergeDialog';
+import {SelectableTree} from '../../SelectableTree/SelectableTree';
+import {contributors, crosswalkTree} from './testData.data';
+
+describe('UnmergeDialog tests', () => {
+    const contributorUri = 'entities/p6u3cIz';
+    const props = {
+        contributor: contributors.find(({uri}) => uri === contributorUri),
+        crosswalkTree,
+        canUnmerge: true,
+        onClose: jest.fn(),
+        onUnmergeContributor: jest.fn()
+    };
+
+    it('should render unmerge and Tree unmerge', () => {
+        const component = shallow(<UnmergeDialog {...props} />);
+        const selectableTrees = component.find(SelectableTree);
+        const expectedValues = [
+            {
+                selected: true,
+                crosswalkTree: props.crosswalkTree,
+                coloredCrosswalks: [],
+                title: 'Unmerge'
+            },
+            {
+                selected: false,
+                crosswalkTree: props.crosswalkTree,
+                coloredCrosswalks: ['entities/j8K1vc9/crosswalks/1CwTipUbG'],
+                title: 'Tree unmerge'
+            }
+        ];
+        expect(component.find(Typography).text()).toBe('Entity URI:P6U3CIZ');
+        expect(selectableTrees).toHaveLength(2);
+        selectableTrees.forEach((tree, i) => {
+            expect(tree.prop('selected')).toBe(expectedValues[i].selected);
+            expect(tree.prop('crosswalkTree')).toEqual(expectedValues[i].crosswalkTree);
+            expect(tree.prop('coloredCrosswalks')).toEqual(expectedValues[i].coloredCrosswalks);
+            expect(tree.prop('title')).toBe(expectedValues[i].title);
+        });
+
+        const unmergeButton = component.find(Button).filterWhere((button) => button.text() === 'Unmerge');
+        expect(unmergeButton.prop('disabled')).toBeFalsy();
+    });
+
+    it('should render only unmerge if contributor.uri === crosswalkTree.uri', () => {
+        const modifiedProps = {
+            ...props,
+            contributor: contributors.find(({uri}) => uri === crosswalkTree.uri)
+        };
+        const component = shallow(<UnmergeDialog {...modifiedProps} />);
+        const selectableTree = component.find(SelectableTree);
+        expect(selectableTree.prop('selected')).toBe(true);
+        expect(selectableTree.prop('title')).toBe('Unmerge');
+    });
+
+    it('should render only unmerge if contributor has not got any merges', () => {
+        const modifiedProps = {
+            ...props,
+            contributor: contributors.find(({uri}) => uri === 'entities/1N1mfYja')
+        };
+        const component = shallow(<UnmergeDialog {...modifiedProps} />);
+        const selectableTree = component.find(SelectableTree);
+        expect(selectableTree.prop('selected')).toBe(true);
+        expect(selectableTree.prop('title')).toBe('Unmerge');
+    });
+
+    it('should change unmergeOperation', () => {
+        const component = shallow(<UnmergeDialog {...props} />);
+        const selectableTrees = component.find(SelectableTree);
+        const expectedValues = [
+            {selected: true, title: 'Unmerge'},
+            {selected: false, title: 'Tree unmerge'}
+        ];
+        expect(selectableTrees).toHaveLength(2);
+        selectableTrees.forEach((tree, i) => {
+            expect(tree.prop('selected')).toBe(expectedValues[i].selected);
+            expect(tree.prop('title')).toBe(expectedValues[i].title);
+        });
+        const treeUnmerge = selectableTrees.filterWhere((tree) => tree.prop('title') === 'Tree unmerge');
+        act(() => {
+            treeUnmerge.prop('onSelect')();
+        });
+
+        const newSelectableTrees = component.find(SelectableTree);
+        newSelectableTrees.forEach((tree, i) => {
+            expect(tree.prop('selected')).toBe(!expectedValues[i].selected);
+            expect(tree.prop('title')).toBe(expectedValues[i].title);
+        });
+    });
+
+    it('should call onUnmergeContributor and onClose on Unmerge Button click', () => {
+        const component = shallow(<UnmergeDialog {...props} />);
+        const unmergeContributor = component
+            .find(Button)
+            .filterWhere((button) => button.text() === 'Unmerge')
+            .prop('onClick') as () => void;
+        unmergeContributor();
+        expect(props.onUnmergeContributor).toHaveBeenCalledWith(UnmergeOperation.Unmerge);
+        expect(props.onClose).toHaveBeenCalled();
+    });
+
+    it('should call onClose on Cancel Button click', () => {
+        const component = shallow(<UnmergeDialog {...props} />);
+        const closeDialog = component
+            .find(Button)
+            .filterWhere((button) => button.text() === 'Cancel')
+            .prop('onClick') as () => void;
+        closeDialog();
+        expect(props.onClose).toHaveBeenCalled();
+    });
+
+    it('should disable unmerge button if canUnmerge === false', () => {
+        const component = shallow(<UnmergeDialog {...props} canUnmerge={false} />);
+
+        const unmergeButton = component.find(Button).filterWhere((button) => button.text() === 'Unmerge');
+        expect(unmergeButton.prop('disabled')).toBeTruthy();
+    });
+});