@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/ProfileRelationsView/components/RelationsHeader/FilterButton/styles.ts

@@ -0,0 +1,43 @@
+import {makeStyles} from '@mui/styles';
+
+const popupHorizontalPadding = '23px';
+
+export const useStyles = makeStyles((theme) => ({
+    button: {
+        color: theme.palette.text.secondary,
+        width: '36px',
+        minWidth: '36px'
+    },
+    popupContent: {
+        padding: `19px ${popupHorizontalPadding}`
+    },
+    checkboxControlLabel: {
+        fontSize: '0.85rem'
+    },
+    checkboxControlCheckbox: {
+        marginRight: '5px'
+    },
+    divider: {
+        borderColor: 'rgba(0,0,0,0.1)',
+        margin: `19px -${popupHorizontalPadding}`
+    },
+    title: {
+        marginBottom: '30px'
+    },
+    sortControls: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    sortSelectorRoot: {
+        flex: 1,
+        padding: '13px 16px',
+        fontSize: '0.85rem'
+    },
+    sortSelectorMenuItem: {
+        fontSize: '0.85rem'
+    },
+    sortOrderButton: {
+        flexShrink: 0,
+        margin: '0 8px 0 7px'
+    }
+}));

package/src/components/ProfileRelationsView/components/RelationsHeader/ImportFromDT/ImportFromDT.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import CloudDownloadIcon from '@mui/icons-material/CloudDownload';
+import {DropDownMenuButton, SmallIconButtonWithTooltip} from '@reltio/components';
+import {useImportFromDTLoader} from './hooks/useImportFromDTLoader';
+import {useStyles} from './styles';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import {ConfirmationDialog} from '@reltio/components';
+import {MultipleImportIcon} from './MultipleImportIcon';
+
+export const ImportFromDT = () => {
+    const {tenants, selectedTenant, onConfirmImport, onCancelConfirmation, onImportClick} = useImportFromDTLoader();
+    const styles = useStyles();
+    const oneTenant = tenants.length === 1;
+    const labelOnButton = oneTenant
+        ? tenants[0].label.indexOf('DT:') === 0
+            ? tenants[0].label[3]
+            : tenants[0].label[0]
+        : tenants.length;
+    return (
+        <>
+            {!!tenants.length && (
+                <>
+                    {oneTenant ? (
+                        <div className={styles.button}>
+                            <SmallIconButtonWithTooltip
+                                size={'L'}
+                                icon={CloudDownloadIcon}
+                                tooltipTitle={i18n.text('Import connections from ${label}', {label: tenants[0].label})}
+                                onClick={() => onImportClick(tenants[0])}
+                            />
+                            <div className={classnames(styles.tenant)}>{labelOnButton}</div>
+                        </div>
+                    ) : (
+                        <DropDownMenuButton
+                            menuId={'importDT-table-actions'}
+                            buttonComponent={SmallIconButtonWithTooltip}
+                            buttonProps={{
+                                tooltipTitle: i18n.text('Import connections'),
+                                size: 'L',
+                                // eslint-disable-next-line react/display-name
+                                icon: () => <MultipleImportIcon label={labelOnButton} />
+                            }}
+                            menuItems={tenants.map((tenant) => ({
+                                onClick: () => {
+                                    onImportClick(tenant);
+                                },
+                                text: tenant.label
+                            }))}
+                        />
+                    )}
+                    <ConfirmationDialog
+                        open={!!selectedTenant}
+                        title={i18n.text('Confirmation')}
+                        content={i18n.text('Import connections from ${label}?', {label: selectedTenant?.label})}
+                        discardCaption={i18n.text('Cancel')}
+                        saveCaption={i18n.text('Import')}
+                        onDiscard={onCancelConfirmation}
+                        onSave={onConfirmImport}
+                    />
+                </>
+            )}
+        </>
+    );
+};

package/src/components/ProfileRelationsView/components/RelationsHeader/ImportFromDT/MultipleImportIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import CloudDownloadIcon from '@mui/icons-material/CloudDownload';
+import Badge from '@mui/material/Badge';
+import {useStyles} from './styles';
+
+interface Props {
+    label: number | string;
+}
+
+export const MultipleImportIcon = ({label}: Props) => {
+    const styles = useStyles();
+    return (
+        <Badge
+            classes={{
+                anchorOriginTopRightRectangular: styles.badgePosition,
+                badge: styles.badge
+            }}
+            badgeContent={label}
+        >
+            <CloudDownloadIcon />
+        </Badge>
+    );
+};

package/src/components/ProfileRelationsView/components/RelationsHeader/ImportFromDT/__tests__/ImportFromDT.test.tsx

@@ -0,0 +1,500 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import {act} from 'react-dom/test-utils';
+import {ImportFromDT} from '../ImportFromDT';
+import {ImportDTContext} from '../../../../contexts/ImportDTContext';
+import * as reactRedux from 'react-redux';
+import {SmallIconButtonWithTooltip, ConfirmationDialog, DropDownMenuButton} from '@reltio/components';
+import {getRequestErrorMessage, hasNonImportedRelations, importDTConnections} from '@reltio/mdm-sdk';
+import MenuItem from '@mui/material/MenuItem';
+import Menu from '@mui/material/Menu';
+import {MultipleImportIcon} from '../MultipleImportIcon';
+import {ui} from '@reltio/mdm-module';
+
+const createStore = (
+    dataTenants = [
+        {
+            id: 'uitest3',
+            label: 'DT:TEST'
+        },
+        {
+            id: 'hmcyo4cu',
+            label: 'DT:hmcyo4cu'
+        }
+    ],
+    isTempEntity = false
+) => ({
+    dataTenants,
+    profile: {
+        entity: {
+            uri: isTempEntity ? 'entities/uri$$temp' : 'entities/1h7IGu2y'
+        }
+    },
+    tenant: {
+        id: 'uitest1'
+    },
+    ui: {
+        paths: {
+            dtssPath: 'https://tst-01.reltio.com/dtss/'
+        }
+    }
+});
+
+const mockStore = (store = createStore()) => {
+    jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+};
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    hasNonImportedRelations: jest.fn().mockImplementation(
+        ({dataTenant}) =>
+            new Promise((res) => {
+                if (dataTenant === 'uitest3' || dataTenant === 'uitest4' || dataTenant === 'tenantWithExcept') {
+                    return res({hasNonImportedConnections: true});
+                }
+                return res({hasNonImportedConnections: false});
+            })
+    ),
+    importDTConnections: jest.fn().mockImplementation(
+        ({dataTenant}) =>
+            new Promise((res, rej) => {
+                dataTenant === 'tenantWithExcept' ? rej({error: 'error'}) : res({});
+            })
+    )
+}));
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    SmallIconButtonWithTooltip: () => null
+}));
+
+const reloadRelations = jest.fn();
+const config = {
+    importFromDT: true,
+    content: {
+        entityTypes: ['configuration/entityTypes/HCO'],
+        inRelations: [
+            {
+                uri: 'configuration/relationTypes/Managed',
+                label: '{directionalLabel}'
+            }
+        ],
+        outRelations: []
+    }
+};
+
+const setUp = (customConfig = config) =>
+    mount(
+        <ImportDTContext.Provider value={{config: customConfig, reloadRelations}}>
+            <ImportFromDT />
+        </ImportDTContext.Provider>
+    );
+
+describe('ImportFromDT tests', () => {
+    const dispatch = jest.fn();
+
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(dispatch);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render importDT button only if request returned true', async () => {
+        mockStore();
+        const component = setUp();
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(0);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        expect(hasNonImportedRelations).toHaveBeenCalledTimes(2);
+        expect(hasNonImportedRelations).toHaveBeenCalledWith({
+            entityUri: 'entities/1h7IGu2y',
+            content: [
+                {
+                    ...config.content,
+                    offset: 0,
+                    max: 2147483647
+                }
+            ],
+            dtssPath: 'https://tst-01.reltio.com/dtss/',
+            customerTenant: 'uitest1',
+            dataTenant: 'uitest3'
+        });
+        expect(hasNonImportedRelations).toHaveBeenCalledWith({
+            entityUri: 'entities/1h7IGu2y',
+            content: [
+                {
+                    ...config.content,
+                    offset: 0,
+                    max: 2147483647
+                }
+            ],
+            dtssPath: 'https://tst-01.reltio.com/dtss/',
+            customerTenant: 'uitest1',
+            dataTenant: 'hmcyo4cu'
+        });
+        component.update();
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(1);
+        expect(component.find(SmallIconButtonWithTooltip).prop('tooltipTitle')).toBe('Import connections from DT:TEST');
+    });
+
+    it('should not send any requests if entity is temporary', async () => {
+        mockStore(createStore(undefined, true));
+        const component = setUp();
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(0);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        expect(hasNonImportedRelations).toHaveBeenCalledTimes(0);
+        component.update();
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(0);
+    });
+
+    it('should not fail if dataTenants is null', async () => {
+        mockStore(createStore(null));
+        const component = setUp();
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(0);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        expect(hasNonImportedRelations).not.toHaveBeenCalled();
+        component.update();
+        expect(component.isEmptyRender()).toBe(true);
+    });
+
+    it('should render ConfirmationDialog', async () => {
+        mockStore();
+        const component = setUp();
+        expect(component.find(Menu)).toHaveLength(0);
+        expect(component.find(ConfirmationDialog)).toHaveLength(0);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(Menu)).toHaveLength(0);
+        expect(component.find(ConfirmationDialog)).toHaveLength(1);
+        expect(component.find(ConfirmationDialog).prop('open')).toBeFalsy();
+    });
+
+    it('should add label on button with first letter of tenant has connections', async () => {
+        mockStore();
+        const component = setUp();
+        expect(component.find('.tenant')).toHaveLength(0);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find('.tenant')).toHaveLength(1);
+        expect(component.find('.tenant').html()).toBe('<div class="tenant">T</div>');
+        expect(component.find(DropDownMenuButton)).toHaveLength(0);
+        expect(component.find(Menu)).toHaveLength(0);
+    });
+
+    it('should call importDTConnections and reloadRelations after on click import button', async () => {
+        mockStore();
+        const component = setUp();
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(0);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(1);
+        expect(importDTConnections).not.toHaveBeenCalled();
+        expect(reloadRelations).not.toHaveBeenCalled();
+        const onClickBtn = component.find(SmallIconButtonWithTooltip).prop('onClick') as () => void;
+        expect(component.find(ConfirmationDialog)).toHaveLength(1);
+        expect(component.find(ConfirmationDialog).prop('open')).toBeFalsy();
+        onClickBtn();
+        component.update();
+        expect(component.find(ConfirmationDialog).prop('open')).toBeTruthy();
+        const onImport = component.find(ConfirmationDialog).prop('onSave') as () => void;
+        onImport();
+        await act(async () => {
+            await Promise.resolve();
+        });
+        expect(importDTConnections).toHaveBeenCalledWith({
+            entityUri: 'entities/1h7IGu2y',
+            content: [
+                {
+                    ...config.content,
+                    offset: 0,
+                    max: 2147483647
+                }
+            ],
+            dtssPath: 'https://tst-01.reltio.com/dtss/',
+            customerTenant: 'uitest1',
+            dataTenant: 'uitest3'
+        });
+        expect(reloadRelations).toHaveBeenCalled();
+        expect(dispatch).not.toHaveBeenCalled();
+    });
+
+    it('should dispatch ui.actions.errorSet on error import', async () => {
+        mockStore(
+            createStore([
+                {
+                    id: 'tenantWithExcept',
+                    label: 'DT:TEST'
+                }
+            ])
+        );
+        const component = setUp();
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(0);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(importDTConnections).not.toHaveBeenCalled();
+        expect(reloadRelations).not.toHaveBeenCalled();
+        const onClickBtn = component.find(SmallIconButtonWithTooltip).prop('onClick') as () => void;
+        onClickBtn();
+        component.update();
+        const onImport = component.find(ConfirmationDialog).prop('onSave') as () => void;
+        onImport();
+        await act(async () => {
+            await Promise.resolve();
+        });
+        expect(importDTConnections).toHaveBeenCalledWith({
+            entityUri: 'entities/1h7IGu2y',
+            content: [
+                {
+                    ...config.content,
+                    offset: 0,
+                    max: 2147483647
+                }
+            ],
+            dtssPath: 'https://tst-01.reltio.com/dtss/',
+            customerTenant: 'uitest1',
+            dataTenant: 'tenantWithExcept'
+        });
+        expect(dispatch).toHaveBeenCalledWith(
+            ui.actions.errorSet(getRequestErrorMessage({error: 'error'}, 'Something went wrong'))
+        );
+        expect(reloadRelations).not.toHaveBeenCalled();
+    });
+
+    it('should not render importDT button if no importFromDT in config', async () => {
+        mockStore();
+        const component = setUp({...config, importFromDT: undefined});
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(0);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        expect(hasNonImportedRelations).not.toHaveBeenCalled();
+        component.update();
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(0);
+    });
+
+    it('should not render importDT button if every hasNonImported request returned false', async () => {
+        mockStore(
+            createStore([
+                {
+                    id: 'wrongId',
+                    label: 'DT:TEST'
+                },
+                {
+                    id: 'hmcyo4cu',
+                    label: 'DT:hmcyo4cu'
+                }
+            ])
+        );
+        const component = setUp();
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(0);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        expect(hasNonImportedRelations).toHaveBeenCalledTimes(2);
+        expect(hasNonImportedRelations).toHaveBeenCalledWith({
+            entityUri: 'entities/1h7IGu2y',
+            content: [
+                {
+                    ...config.content,
+                    offset: 0,
+                    max: 2147483647
+                }
+            ],
+            dtssPath: 'https://tst-01.reltio.com/dtss/',
+            customerTenant: 'uitest1',
+            dataTenant: 'wrongId'
+        });
+        expect(hasNonImportedRelations).toHaveBeenCalledWith({
+            entityUri: 'entities/1h7IGu2y',
+            content: [
+                {
+                    ...config.content,
+                    offset: 0,
+                    max: 2147483647
+                }
+            ],
+            dtssPath: 'https://tst-01.reltio.com/dtss/',
+            customerTenant: 'uitest1',
+            dataTenant: 'hmcyo4cu'
+        });
+        component.update();
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(0);
+    });
+
+    it('should not call hasNotImportedConnections if no dataTenants', async () => {
+        mockStore(createStore([]));
+        const component = setUp();
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(0);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        expect(hasNonImportedRelations).not.toHaveBeenCalled();
+        component.update();
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(0);
+    });
+
+    it('should render ConfirmationDialog, DropDownMenuButton if more than one tenant have connections', async () => {
+        mockStore(
+            createStore([
+                {
+                    id: 'uitest3',
+                    label: 'DT:TEST3'
+                },
+                {
+                    id: 'uitest4',
+                    label: 'DT:TEST4'
+                },
+                {
+                    id: 'hmcyo4cu',
+                    label: 'DT:hmcyo4cu'
+                }
+            ])
+        );
+        const component = setUp();
+        expect(component.find(Menu)).toHaveLength(0);
+        expect(component.find(ConfirmationDialog)).toHaveLength(0);
+        expect(component.find(MenuItem)).toHaveLength(0);
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(Menu)).toHaveLength(1);
+        expect(component.find(Menu).prop('open')).toBeFalsy();
+        expect(component.find(ConfirmationDialog)).toHaveLength(1);
+        expect(component.find(ConfirmationDialog).prop('open')).toBeFalsy();
+        expect(component.find(DropDownMenuButton)).toHaveLength(1);
+        expect(component.find(DropDownMenuButton).prop('menuId')).toBe('importDT-table-actions');
+        expect(component.find(DropDownMenuButton).prop('buttonComponent')).toEqual(SmallIconButtonWithTooltip);
+        const buttonProps = component.find(DropDownMenuButton).prop('buttonProps') as {
+            tooltipTitle: string;
+            size: string;
+            icon: () => React.ReactElement;
+        };
+        expect(buttonProps.tooltipTitle).toBe('Import connections');
+        expect(buttonProps.size).toBe('L');
+        expect(buttonProps.icon()).toEqual(<MultipleImportIcon label={2} />);
+    });
+
+    it('should open confirmation dialog on choose dataTenant and discard on cancel', async () => {
+        mockStore(
+            createStore([
+                {
+                    id: 'uitest3',
+                    label: 'DT:TEST3'
+                },
+                {
+                    id: 'uitest4',
+                    label: 'DT:TEST4'
+                },
+                {
+                    id: 'hmcyo4cu',
+                    label: 'DT:hmcyo4cu'
+                }
+            ])
+        );
+        const component = setUp();
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(Menu)).toHaveLength(1);
+        expect(component.find(Menu).prop('open')).toBeFalsy();
+        expect(component.find(ConfirmationDialog)).toHaveLength(1);
+        expect(component.find(ConfirmationDialog).prop('open')).toBeFalsy();
+        expect(component.find(MenuItem)).toHaveLength(0);
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(1);
+        const onClickBtn = component.find(SmallIconButtonWithTooltip).prop('onClick') as () => void;
+        onClickBtn();
+        component.update();
+        expect(component.find(Menu).prop('open')).toBeTruthy();
+        expect(component.find(DropDownMenuButton).prop('menuItems')).toHaveLength(2);
+        expect(component.find(MenuItem)).toHaveLength(2);
+        expect(component.find(DropDownMenuButton).prop('menuItems')[0].text).toBe('DT:TEST3');
+        expect(component.find(DropDownMenuButton).prop('menuItems')[1].text).toBe('DT:TEST4');
+        component.find(MenuItem).at(0).find('li').simulate('click');
+        component.update();
+        expect(component.find(Menu).prop('open')).toBeFalsy();
+        expect(component.find(ConfirmationDialog).prop('open')).toBeTruthy();
+        expect(component.find(ConfirmationDialog).prop('content')).toBe('Import connections from DT:TEST3?');
+        expect(component.find(ConfirmationDialog).prop('discardCaption')).toBe('Cancel');
+        expect(component.find(ConfirmationDialog).prop('saveCaption')).toBe('Import');
+        component.find(ConfirmationDialog).prop('onDiscard')();
+        component.update();
+        expect(component.find(Menu).prop('open')).toBeFalsy();
+        expect(component.find(ConfirmationDialog).prop('open')).toBeFalsy();
+        expect(importDTConnections).not.toHaveBeenCalled();
+    });
+
+    it('should open confirmation dialog on choose dataTenant and send import request on save', async () => {
+        mockStore(
+            createStore([
+                {
+                    id: 'uitest3',
+                    label: 'DT:TEST3'
+                },
+                {
+                    id: 'uitest4',
+                    label: 'DT:TEST4'
+                },
+                {
+                    id: 'hmcyo4cu',
+                    label: 'DT:hmcyo4cu'
+                }
+            ])
+        );
+        const component = setUp();
+        await act(async () => {
+            await Promise.resolve();
+        });
+        component.update();
+        expect(component.find(Menu)).toHaveLength(1);
+        expect(component.find(Menu).prop('open')).toBeFalsy();
+        expect(component.find(ConfirmationDialog)).toHaveLength(1);
+        expect(component.find(ConfirmationDialog).prop('open')).toBeFalsy();
+        expect(component.find(MenuItem)).toHaveLength(0);
+        const onClickBtn = component.find(SmallIconButtonWithTooltip).prop('onClick') as () => void;
+        onClickBtn();
+        component.update();
+        expect(component.find(Menu).prop('open')).toBeTruthy();
+        component.find(MenuItem).at(0).find('li').simulate('click');
+        component.update();
+        expect(component.find(Menu).prop('open')).toBeFalsy();
+        expect(component.find(ConfirmationDialog).prop('open')).toBeTruthy();
+        component.find(ConfirmationDialog).prop('onSave')();
+        component.update();
+        expect(component.find(Menu).prop('open')).toBeFalsy();
+        expect(component.find(ConfirmationDialog).prop('open')).toBeFalsy();
+        expect(importDTConnections).toHaveBeenCalledWith({
+            entityUri: 'entities/1h7IGu2y',
+            content: [
+                {
+                    ...config.content,
+                    offset: 0,
+                    max: 2147483647
+                }
+            ],
+            dtssPath: 'https://tst-01.reltio.com/dtss/',
+            customerTenant: 'uitest1',
+            dataTenant: 'uitest3'
+        });
+        await act(async () => {
+            await Promise.resolve();
+        });
+        expect(reloadRelations).toHaveBeenCalled();
+        expect(dispatch).not.toHaveBeenCalled();
+    });
+});

package/src/components/ProfileRelationsView/components/RelationsHeader/ImportFromDT/__tests__/MultipleImportIcon.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {MultipleImportIcon} from '../MultipleImportIcon';
+import CloudDownloadIcon from '@mui/icons-material/CloudDownload';
+import Badge from '@mui/material/Badge';
+
+const setUp = (label) => shallow(<MultipleImportIcon label={label} />);
+
+describe('MultipleImportIcon', () => {
+    it('should render CloudDownloadIcon with Badge', () => {
+        const component = setUp(8);
+        expect(component.find(Badge)).toHaveLength(1);
+        expect(component.find(Badge).prop('badgeContent')).toBe(8);
+        expect(component.find(Badge).prop('classes')).toEqual({
+            anchorOriginTopRightRectangular: 'badgePosition',
+            badge: 'badge'
+        });
+        expect(component.find(CloudDownloadIcon)).toHaveLength(1);
+    });
+});