@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/ProfileRelationsView/components/RelationsHeader/ImportFromDT/hooks/useImportFromDTLoader.ts

@@ -0,0 +1,84 @@
+import {useSelector, useDispatch} from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+import {useCallback, useContext, useEffect, useState} from 'react';
+import {getRequestErrorMessage, hasNonImportedRelations, importDTConnections, isTempUri} from '@reltio/mdm-sdk';
+import {ui} from '@reltio/mdm-module';
+import {ImportDTContext} from '../../../../contexts/ImportDTContext';
+import i18n from 'ui-i18n';
+
+const MAX = Math.pow(2, 31) - 1;
+type Tenant = {id: string; label: string};
+
+export const useImportFromDTLoader = () => {
+    const dataTenants: Array<Tenant> = useSelector(mdmModule.selectors.getDataTenants);
+    const dispatch = useDispatch();
+    const {config, reloadRelations} = useContext(ImportDTContext);
+    const entityUri = useSelector(mdmModule.selectors.getEntityUri);
+    const [tenants, setTenants] = useState<Array<Tenant>>([]);
+    const [selectedTenant, setSelectedTenant] = useState<Tenant>(null);
+    const dtssPath = useSelector(mdmModule.selectors.getDtssPath);
+    const customerTenant = useSelector(mdmModule.selectors.getTenant);
+    const content = [{...config.content, offset: 0, max: config.maxDtssImport ?? MAX}];
+
+    const checkHasNonImportedConnections = useCallback(() => {
+        setTenants([]);
+        if (config.importFromDT && !isTempUri(entityUri)) {
+            Promise.all(
+                (dataTenants || []).map((tenant) =>
+                    hasNonImportedRelations({
+                        entityUri,
+                        content,
+                        dtssPath,
+                        customerTenant,
+                        dataTenant: tenant.id
+                    }).then(({hasNonImportedConnections}) => ({
+                        ...tenant,
+                        hasNonImportedConnections
+                    }))
+                )
+            )
+                .then((modifiedTenants) => modifiedTenants.filter((tenant) => tenant.hasNonImportedConnections))
+                .then(setTenants);
+        }
+    }, [entityUri, dtssPath, customerTenant, config, dataTenants]);
+
+    const onConfirmImport = useCallback(() => {
+        importDTConnections({
+            entityUri,
+            content,
+            dtssPath,
+            customerTenant,
+            dataTenant: selectedTenant.id
+        })
+            .then(() => {
+                reloadRelations();
+                checkHasNonImportedConnections();
+            })
+            .catch((error) =>
+                dispatch(ui.actions.errorSet(getRequestErrorMessage(error, i18n.text('Something went wrong'))))
+            );
+        setSelectedTenant(null);
+    }, [
+        entityUri,
+        dtssPath,
+        customerTenant,
+        config,
+        checkHasNonImportedConnections,
+        reloadRelations,
+        selectedTenant,
+        setSelectedTenant
+    ]);
+
+    useEffect(() => {
+        checkHasNonImportedConnections();
+    }, [checkHasNonImportedConnections]);
+    const onCancelConfirmation = useCallback(() => setSelectedTenant(null), []);
+    const onImportClick = useCallback((tenant: Tenant) => setSelectedTenant(tenant), []);
+    return {
+        tenants,
+        selectedTenant,
+        onConfirmImport,
+        onCancelConfirmation,
+        onImportClick
+    };
+};

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

@@ -0,0 +1,37 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles(() => ({
+    tenant: {
+        backgroundColor: '#0000EE',
+        cursor: 'pointer',
+        position: 'absolute',
+        top: '8px',
+        left: '22px',
+        width: '10px',
+        height: '10px',
+        color: 'white',
+        fontSize: '10px',
+        fontWeight: 'bold',
+        userSelect: 'text',
+        zIndex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    button: {
+        position: 'relative'
+    },
+    badge: {
+        fontSize: '10px',
+        height: '14px',
+        minWidth: '14px',
+        width: '14px',
+        fontWeight: 'bold',
+        backgroundColor: '#FF4081',
+        color: '#FFF'
+    },
+    badgePosition: {
+        right: '5px',
+        top: '4px'
+    }
+}));

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

@@ -0,0 +1,39 @@
+import React, {useContext} from 'react';
+import i18n from 'ui-i18n';
+import {ExpandableSearchInput, FacetViewHeader, HideOnShrink, VerticalDivider} from '@reltio/components';
+import Typography from '@mui/material/Typography';
+import FilterButton from './FilterButton/FilterButton';
+import {RelationsViewStateContext} from '../../contexts/RelationsViewStateContext';
+import {useStyles} from './styles';
+import {ImportFromDT} from './ImportFromDT/ImportFromDT';
+
+type Props = {
+    title?: string;
+    total?: number;
+};
+
+const RelationsHeader = ({title, total}: Props) => {
+    const styles = useStyles();
+
+    const {searchQuery, changeSearchQuery} = useContext(RelationsViewStateContext);
+
+    return (
+        <FacetViewHeader title={title || ''} className={styles.header}>
+            {total > 0 && (
+                <HideOnShrink widthToHide={400}>
+                    <VerticalDivider height={24} margin={16} />
+                    <Typography className={styles.totalCaption} variant="caption">
+                        {total > 1
+                            ? i18n.text('${count} items', {count: total})
+                            : i18n.text('${count} item', {count: total})}
+                    </Typography>
+                </HideOnShrink>
+            )}
+            <ExpandableSearchInput query={searchQuery} onChange={changeSearchQuery} />
+            <ImportFromDT />
+            <FilterButton />
+        </FacetViewHeader>
+    );
+};
+
+export default RelationsHeader;

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

@@ -0,0 +1,82 @@
+import React, * as react from 'react';
+import {shallow} from 'enzyme';
+import {act} from 'react-dom/test-utils';
+import {FacetViewHeader, HideOnShrink, ExpandableSearchInput, VerticalDivider} from '@reltio/components';
+import RelationsHeader from '../RelationsHeader';
+import FilterButton from '../FilterButton/FilterButton';
+import {ImportFromDT} from '../ImportFromDT/ImportFromDT';
+
+jest.mock('react', () => ({
+    ...(jest.requireActual('react') as Record<string, unknown>),
+    useContext: jest.fn().mockImplementation((f) => f())
+}));
+
+const searchQuery = 'te';
+const changeSearchQuery = jest.fn();
+const setPage = jest.fn();
+
+const mockRelationsViewStateContext = () =>
+    jest.spyOn(react, 'useContext').mockImplementation(() => ({
+        searchQuery,
+        changeSearchQuery,
+        setPage
+    }));
+
+const caption = 'Relations view';
+const total = 15;
+
+describe('RelationsAttributeHeader tests', () => {
+    beforeAll(() => {
+        mockRelationsViewStateContext();
+    });
+
+    it('should render main parts', () => {
+        const component = shallow(<RelationsHeader total={total} title={caption} />);
+
+        const header = component.find(FacetViewHeader);
+        expect(header).toHaveLength(1);
+        expect(header.prop('title')).toBe(caption);
+
+        const shrinkedHeader = header.find(HideOnShrink);
+        expect(shrinkedHeader).toHaveLength(1);
+        expect(shrinkedHeader.find(VerticalDivider)).toHaveLength(1);
+        expect(shrinkedHeader.find('.totalCaption').text()).toBe(`${total} items`);
+
+        expect(component.find(ExpandableSearchInput)).toHaveLength(1);
+        expect(component.find(FilterButton)).toHaveLength(1);
+        expect(component.find(ImportFromDT)).toHaveLength(1);
+    });
+
+    it('should render total items', () => {
+        const component = shallow(<RelationsHeader total={0} title={caption} />);
+
+        expect(component.find(FacetViewHeader).prop('title')).toBe(caption);
+        expect(component.find('.totalCaption')).toHaveLength(0);
+
+        component.setProps({total: 1});
+        component.update();
+        expect(component.find('.totalCaption').text()).toBe('1 item');
+
+        component.setProps({total: 10});
+        component.update();
+        expect(component.find('.totalCaption').text()).toBe('10 items');
+    });
+
+    it('should render ExpandableSearchInput with props', () => {
+        const caption = 'Relations view';
+        const component = shallow(<RelationsHeader total={10} title={caption} />);
+        expect(component.find(ExpandableSearchInput).prop('query')).toBe(searchQuery);
+        expect(component.find(ExpandableSearchInput).prop('onChange')).toBeDefined();
+    });
+
+    it('should call changeSearchQuery on search', () => {
+        const caption = 'Relations view';
+        const component = shallow(<RelationsHeader total={10} title={caption} />);
+
+        act(() => {
+            component.find(ExpandableSearchInput).prop('onChange')('query');
+        });
+
+        expect(changeSearchQuery).toHaveBeenCalledWith('query');
+    });
+});

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

@@ -0,0 +1,18 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    header: {
+        padding: '0 6px 0 16px'
+    },
+    totalCaption: {
+        lineHeight: '19px',
+        fontSize: '14px',
+        letterSpacing: '0.24px',
+        color: 'rgba(0,0,0,0.6)',
+        flexShrink: 0,
+        marginRight: '5px',
+        justifyContent: 'flex-start',
+        paddingTop: '16px',
+        paddingBottom: '13px'
+    }
+});

package/src/components/ProfileRelationsView/components/RelationsList/Ratings/Ratings.tsx

@@ -0,0 +1,60 @@
+import React, {useRef, useState} from 'react';
+import classnames from 'classnames';
+import {Crosswalk, Rating} from '@reltio/mdm-sdk';
+import Typography from '@mui/material/Typography';
+import ThumbUpIcon from '@mui/icons-material/ThumbUp';
+import ThumbDownIcon from '@mui/icons-material/ThumbDown';
+import LinearProgress from '@mui/material/LinearProgress';
+import {RatingsPopup} from '../RatingsPopup/RatingsPopup';
+import {calcAverageRating, calcRatingsScale, getCountOfDislikes, getCountOfLikes} from '../../../helpers/ratings';
+
+import {useStyles} from './styles';
+
+type Props = {
+    ratings: Rating[];
+    crosswalks: Crosswalk[];
+    className?: string;
+};
+
+export const Ratings = ({ratings, crosswalks, className}: Props) => {
+    const styles = useStyles();
+    const ratingsRef = useRef();
+    const [open, setOpen] = useState(false);
+    const {percentOfLikes} = calcRatingsScale(ratings);
+
+    return (
+        <>
+            <div
+                data-reltio-id="reltio-ratings"
+                className={classnames(styles.wrapper, className)}
+                ref={ratingsRef}
+                onClick={() => setOpen(true)}
+            >
+                <Typography className={styles.averageRating}>{calcAverageRating(ratings)}</Typography>
+                <LinearProgress
+                    variant="determinate"
+                    value={percentOfLikes}
+                    classes={{bar: styles.scaleBar}}
+                    className={classnames(styles.scale, {empty: !ratings.length})}
+                />
+                <div className={styles.counts}>
+                    <div className={styles.count}>
+                        <ThumbUpIcon className={styles.icon} />
+                        {getCountOfLikes(ratings)}
+                    </div>
+                    <div className={styles.count}>
+                        <ThumbDownIcon className={styles.icon} />
+                        {getCountOfDislikes(ratings)}
+                    </div>
+                </div>
+            </div>
+            <RatingsPopup
+                ratings={ratings}
+                open={open}
+                crosswalks={crosswalks}
+                anchorEl={ratingsRef.current}
+                onClose={() => setOpen(false)}
+            />
+        </>
+    );
+};

package/src/components/ProfileRelationsView/components/RelationsList/Ratings/__tests__/Ratings.test.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import {Provider} from 'react-redux';
+import {render, screen, waitForElementToBeRemoved} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {Crosswalk, Metadata, Rating} from '@reltio/mdm-sdk';
+import {createTestStore} from '../../../../../../../../../__mocks__/store-utils';
+import {Ratings} from '../Ratings';
+
+describe('Ratings tests', () => {
+    const ratings = [
+        {value: 1, comment: 'Other'},
+        {value: 1, comment: 'Comment'},
+        {value: 5, comment: ''}
+    ] as Rating[];
+
+    const crosswalks = [{type: 'configuration/sources/FB'}, {type: 'configuration/sources/Reltio'}] as Crosswalk[];
+
+    const createInitialState = () => ({
+        metadata: {
+            tenant: {
+                sources: [
+                    {
+                        uri: 'configuration/sources/FB',
+                        label: 'Facebook'
+                    },
+                    {
+                        uri: 'configuration/sources/Reltio'
+                    }
+                ]
+            } as Metadata
+        },
+        tenant: {
+            id: 'tenant'
+        }
+    });
+
+    const setUp = () => {
+        const user = userEvent.setup();
+        const store = createTestStore(createInitialState());
+        const Providers = ({children}: {children: React.ReactNode}) => <Provider store={store}>{children}</Provider>;
+        return {user, ...render(<Ratings ratings={ratings} crosswalks={crosswalks} />, {wrapper: Providers})};
+    };
+
+    it('should render main parts correctly', () => {
+        setUp();
+
+        expect(screen.getByTestId('reltio-ratings')).toBeInTheDocument();
+        expect(screen.getByText('2.3')).toBeInTheDocument();
+        expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '33');
+        expect(screen.getByText('1')).toBeInTheDocument();
+        expect(screen.getByText('2')).toBeInTheDocument();
+    });
+
+    it('should open popup on click and close on click backdrop', async () => {
+        const {user} = setUp();
+        expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+
+        await user.click(screen.getByTestId('reltio-ratings'));
+        expect(screen.getByRole('tooltip')).toBeInTheDocument();
+
+        await user.click(document.querySelector('.backdrop') as Element);
+        await waitForElementToBeRemoved(screen.queryByRole('tooltip'));
+    });
+});

package/src/components/ProfileRelationsView/components/RelationsList/Ratings/styles.ts

@@ -0,0 +1,48 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    wrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-end',
+        width: 128,
+        cursor: 'pointer'
+    },
+    averageRating: {
+        marginBottom: 4,
+        fontSize: '16px',
+        letterSpacing: '0.15px',
+        lineHeight: '24px',
+        color: theme.palette.text.primary
+    },
+    counts: {
+        display: 'flex',
+        marginTop: 4,
+        gap: 32
+    },
+    count: {
+        display: 'flex',
+        alignItems: 'center',
+        color: theme.palette.text.secondary,
+        fontSize: '13px',
+        letterSpacing: 0,
+        lineHeight: '15px'
+    },
+    icon: {
+        marginRight: '4px',
+        width: '14px',
+        height: '14px',
+        color: theme.palette.text.secondary
+    },
+    scale: {
+        height: 3,
+        width: '100%',
+        background: 'rgba(255, 112, 112)',
+        '&.empty': {
+            background: '#F9F9F9'
+        }
+    },
+    scaleBar: {
+        background: 'rgba(151,192,97)'
+    }
+}));

package/src/components/ProfileRelationsView/components/RelationsList/RatingsButtons/RatingsButtons.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import {useSelector} from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+import {Rating} from '@reltio/mdm-sdk';
+import {DropDownMenuButton} from '@reltio/components';
+import Button from '@mui/material/Button';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import {useStyles} from './styles';
+
+type Props = {
+    ratings: Rating[];
+    onAgree: () => void;
+    onDisagree: (comment: string) => void;
+};
+
+export const RatingsButtons = ({ratings, onAgree, onDisagree}: Props) => {
+    const styles = useStyles();
+
+    const username = useSelector(mdmModule.selectors.getUserName) as string;
+    const ratingOfCurrentUser = ratings.find(({user}) => user === username);
+
+    const menuItems = [
+        {
+            text: i18n.text('Has left the practice'),
+            onClick: () => onDisagree(i18n.text('Has left the practice'))
+        },
+        {
+            text: i18n.text('Has moved away'),
+            onClick: () => onDisagree(i18n.text('Has moved away'))
+        },
+        {
+            text: i18n.text('Has passed away'),
+            onClick: () => onDisagree(i18n.text('Has passed away'))
+        },
+        {
+            text: i18n.text('Has retired'),
+            onClick: () => onDisagree(i18n.text('Has retired'))
+        },
+        {
+            text: i18n.text('Other'),
+            onClick: () => onDisagree(i18n.text('Other'))
+        }
+    ];
+
+    return (
+        <div className={styles.wrapper}>
+            <Button
+                onClick={onAgree}
+                variant="text"
+                size="small"
+                className={classnames(styles.button, {
+                    [styles.isActive]: ratingOfCurrentUser?.value === 5
+                })}
+            >
+                Agree
+            </Button>
+            <DropDownMenuButton
+                buttonProps={{
+                    endIcon: <ArrowDropDownIcon />,
+                    variant: 'text',
+                    size: 'small',
+                    className: classnames(styles.button, {
+                        [styles.isActive]: ratingOfCurrentUser?.value === 1
+                    })
+                }}
+                buttonContent={ratingOfCurrentUser?.value === 1 ? ratingOfCurrentUser.comment : 'Disagree'}
+                menuItems={menuItems}
+                menuId="disagree-dropdown-menu-button"
+            />
+        </div>
+    );
+};

package/src/components/ProfileRelationsView/components/RelationsList/RatingsButtons/__tests__/RatingsButtons.test.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import {Provider} from 'react-redux';
+import {Rating} from '@reltio/mdm-sdk';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {createTestStore} from '../../../../../../../../../__mocks__/store-utils';
+import {RatingsButtons} from '../RatingsButtons';
+
+describe('RatingButtons tests', () => {
+    const createInitialState = () => ({
+        user: {
+            username: 'ivan.ivanov'
+        }
+    });
+
+    const onAgreeSpy = jest.fn();
+    const onDisagreeSpy = jest.fn();
+
+    const setUp = ({ratings}) => {
+        const user = userEvent.setup();
+        const store = createTestStore(createInitialState());
+        const Providers = ({children}: {children: React.ReactNode}) => <Provider store={store}>{children}</Provider>;
+        const renderer = render(<RatingsButtons ratings={ratings} onAgree={onAgreeSpy} onDisagree={onDisagreeSpy} />, {
+            wrapper: Providers
+        });
+        return {user, ...renderer};
+    };
+
+    it('should render buttons correctly if agree is active', () => {
+        const ratings = [
+            {value: 1, comment: 'Other', user: 'other.other'},
+            {value: 5, comment: '', user: 'ivan.ivanov'}
+        ] as Rating[];
+
+        setUp({ratings});
+        expect(screen.getByRole('button', {name: 'Agree'})).toHaveClass('isActive');
+        expect(screen.getByRole('button', {name: 'Disagree'})).not.toHaveClass('isActive');
+    });
+
+    it('should render buttons correctly if disagree is active', () => {
+        const ratings = [
+            {value: 1, comment: 'Other', user: 'ivan.ivanov'},
+            {value: 5, comment: '', user: 'other.other'}
+        ] as Rating[];
+        setUp({ratings});
+        expect(screen.getByRole('button', {name: 'Agree'})).not.toHaveClass('isActive');
+        expect(screen.getByRole('button', {name: 'Other'})).toHaveClass('isActive');
+    });
+
+    it('should render correct disagree menu', async () => {
+        const {user} = setUp({ratings: []});
+        await user.click(screen.getByRole('button', {name: 'Disagree'}));
+        const menuItemLabels = ['Has left the practice', 'Has moved away', 'Has passed away', 'Has retired', 'Other'];
+        const menuItems = screen.getAllByRole('menuitem');
+        menuItems.forEach((item, i) => {
+            expect(item).toHaveTextContent(menuItemLabels[i]);
+        });
+    });
+
+    it('onAgree handler should work correctly', async () => {
+        const {user} = setUp({ratings: []});
+        await user.click(screen.getByRole('button', {name: 'Agree'}));
+        expect(onAgreeSpy).toHaveBeenCalled();
+    });
+
+    it('onDisagree handler should work correctly', async () => {
+        const {user} = setUp({ratings: []});
+        await user.click(screen.getByRole('button', {name: 'Disagree'}));
+        await user.click(screen.getByRole('menuitem', {name: 'Has left the practice'}));
+        expect(onDisagreeSpy).toHaveBeenCalledWith('Has left the practice');
+    });
+});

package/src/components/ProfileRelationsView/components/RelationsList/RatingsButtons/styles.ts

@@ -0,0 +1,20 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    wrapper: {
+        display: 'flex',
+        marginLeft: -8,
+        gap: 8
+    },
+    button: {
+        minWidth: 0,
+        padding: 8,
+        fontSize: '14px',
+        lineHeight: '16px',
+        textTransform: 'none',
+        color: theme.palette.text.secondary
+    },
+    isActive: {
+        color: theme.palette.text.primary
+    }
+}));