@reltio/profile 1.4.1585 → 1.4.1586-mui5

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

@@ -0,0 +1,109 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import {Crosswalk, Rating} from '@reltio/mdm-sdk';
+import {ColoredSourceIcon, PopupWithArrow} from '@reltio/components';
+import PersonIcon from '@mui/icons-material/Person';
+import ThumbUpIcon from '@mui/icons-material/ThumbUp';
+import ThumbDownIcon from '@mui/icons-material/ThumbDown';
+import Avatar from '@mui/material/Avatar';
+import LinearProgress from '@mui/material/LinearProgress';
+import {
+    calcAverageRating,
+    calcRatingsScale,
+    getCountOfDislikes,
+    getCountOfLikes,
+    sortRatingsByTime
+} from '../../../helpers/ratings';
+
+import {useStyles} from './styles';
+
+type Props = {
+    open: boolean;
+    ratings: Rating[];
+    crosswalks: Crosswalk[];
+    className?: string;
+    anchorEl: HTMLElement | null;
+    onClose: () => void;
+};
+
+export const RatingsPopup = ({ratings, crosswalks, open, anchorEl, onClose}: Props) => {
+    const styles = useStyles();
+
+    const sortedRatings = sortRatingsByTime(ratings);
+    const {percentOfLikes, percentOfDislikes} = calcRatingsScale(ratings);
+    const agreeCount = `${getCountOfLikes(ratings)} (${percentOfLikes}%)`;
+    const disagreeCount = `${getCountOfDislikes(ratings)} (${percentOfDislikes}%)`;
+
+    return (
+        <PopupWithArrow open={open} anchorEl={anchorEl} onClose={onClose} placement="top-start" transition>
+            <div className={styles.wrapper}>
+                <div className={styles.info}>
+                    <span className={styles.title}>
+                        {i18n.text('Score:')}
+                        <span className="boldValue">{calcAverageRating(ratings)}</span>
+                    </span>
+                    <span className={styles.title}>
+                        {i18n.text('No. of responses:')}
+                        <span className="value">{ratings.length}</span>
+                    </span>
+                </div>
+                <div>
+                    <LinearProgress
+                        variant="determinate"
+                        value={percentOfLikes}
+                        classes={{bar: styles.scaleBar}}
+                        className={classnames(styles.scale, {empty: !ratings.length})}
+                    />
+                    <div className={styles.axis}>
+                        <span>0</span>
+                        <span>100%</span>
+                    </div>
+                </div>
+                <div className={styles.scaleHistory}>
+                    <span className={styles.title}>
+                        <div className={styles.greenBadge} />
+                        <ThumbUpIcon className={styles.icon} />
+                        {i18n.text('Agree:')}
+                        <span className="value">{agreeCount}</span>
+                    </span>
+                    <span className={styles.title}>
+                        <div className={styles.redBadge} />
+                        <ThumbDownIcon className={styles.icon} />
+                        {i18n.text('Disagree:')}
+                        <span className="value">{disagreeCount}</span>
+                    </span>
+                </div>
+                {!!sortedRatings.length && (
+                    <div className={styles.ratingsList} data-reltio-id="reltio-ratings-list">
+                        {sortedRatings.map(({user, comment, timestamp, value}, i) => (
+                            <div key={i} className={styles.rating} data-reltio-id="reltio-rating-item">
+                                <Avatar className={styles.avatar}>
+                                    <PersonIcon className="icon" />
+                                </Avatar>
+                                <div className={styles.userInfo}>
+                                    <div className={styles.user}>{user}</div>
+                                    <div className={styles.title}>{comment || i18n.text('No comment')}</div>
+                                </div>
+                                <div className={styles.ratingDateWrapper}>
+                                    <span className={styles.ratingDate}>{i18n.date(timestamp, 'L LT')}</span>
+                                    {value === 1 ? (
+                                        <ThumbDownIcon className={styles.icon} data-reltio-id="reltio-dislike-icon" />
+                                    ) : (
+                                        <ThumbUpIcon className={styles.icon} data-reltio-id="reltio-like-icon" />
+                                    )}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+                <div className={styles.sourcesWrapper}>
+                    <span className={styles.title}>{i18n.text('Sources:')}</span>
+                    {crosswalks.map((crosswalk, i) => (
+                        <ColoredSourceIcon key={i} crosswalk={crosswalk} />
+                    ))}
+                </div>
+            </div>
+        </PopupWithArrow>
+    );
+};

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import {Provider} from 'react-redux';
+import {render, screen, within} 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 {RatingsPopup} from '../RatingsPopup';
+
+describe('RatingsPopup tests', () => {
+    const ratings = [
+        {user: 'test1', value: 1, comment: 'Other', timestamp: '2023-05-01T09:57:18.066+0000'},
+        {user: 'test2', value: 1, comment: 'Comment', timestamp: '2023-05-02T09:57:18.066+0000'},
+        {user: 'test3', value: 5, comment: '', timestamp: '2023-05-03T09:57:18.066+0000'}
+    ] 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 onCloseSpy = jest.fn();
+
+    const setUp = ({emptyRatings}: {emptyRatings?: boolean} = {}) => {
+        const user = userEvent.setup();
+        const store = createTestStore(createInitialState());
+        const Providers = ({children}: {children: React.ReactNode}) => <Provider store={store}>{children}</Provider>;
+        const renderer = render(
+            <RatingsPopup
+                ratings={emptyRatings ? [] : ratings}
+                crosswalks={crosswalks}
+                open={true}
+                anchorEl={document.body}
+                onClose={onCloseSpy}
+            />,
+            {wrapper: Providers}
+        );
+        return {user, ...renderer};
+    };
+
+    it('should render main parts correctly and sort ratings', () => {
+        setUp();
+
+        expect(screen.getByText('Score:')).toBeInTheDocument();
+        expect(screen.getByText('2.3')).toBeInTheDocument();
+
+        expect(screen.getByText('No. of responses:')).toBeInTheDocument();
+        expect(screen.getByText('3')).toBeInTheDocument();
+
+        const progressbar = screen.getByRole('progressbar');
+        expect(progressbar).toHaveAttribute('aria-valuenow', '33');
+        expect(progressbar).not.toHaveClass('empty');
+        expect(screen.getByText('0')).toBeInTheDocument();
+        expect(screen.getByText('100%')).toBeInTheDocument();
+
+        expect(screen.getByText('Agree:')).toBeInTheDocument();
+        expect(screen.getByText('1 (33.3%)')).toBeInTheDocument();
+        expect(screen.getByText('Disagree:')).toBeInTheDocument();
+        expect(screen.getByText('2 (66.7%)')).toBeInTheDocument();
+
+        expect(screen.getByTestId('reltio-ratings-list')).toBeInTheDocument();
+        const ratingsItems = screen.getAllByTestId('reltio-rating-item');
+        ratings.forEach((rating, i) => {
+            const item = within(ratingsItems[ratingsItems.length - 1 - i]);
+            const icon = rating.value === 1 ? 'reltio-dislike-icon' : 'reltio-like-icon';
+            expect(item.getByText(rating.user)).toBeInTheDocument();
+            expect(item.getByText(rating.comment || 'No comment')).toBeInTheDocument();
+            expect(item.getByText(i18n.date(rating.timestamp, 'L LT'))).toBeInTheDocument();
+            expect(item.getByTestId(icon)).toBeInTheDocument();
+        });
+
+        expect(screen.getByText('Sources:')).toBeInTheDocument();
+        crosswalks.forEach((crosswalk) => {
+            expect(screen.getByText(crosswalk.type.split('configuration/sources/')[1][0])).toBeInTheDocument();
+        });
+    });
+
+    it('should not render ratings and clear progressbar if ratings are empty ', () => {
+        setUp({emptyRatings: true});
+        expect(screen.getByRole('progressbar')).toHaveClass('empty');
+        expect(screen.queryByTestId('reltio-ratings-list')).not.toBeInTheDocument();
+    });
+
+    it('should call onClose on backdrop click', async () => {
+        const {user} = setUp();
+
+        await user.click(document.querySelector('.backdrop') as Element);
+        expect(onCloseSpy).toBeCalled();
+    });
+});

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

@@ -0,0 +1,133 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    wrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        padding: 12,
+        width: 355,
+        gap: 12
+    },
+    info: {
+        background: 'rgba(0, 0, 0, 0.05)',
+        display: 'flex',
+        padding: '6px 12px',
+        fontSize: 13,
+        gap: 16
+    },
+    axis: {
+        position: 'relative',
+        display: 'flex',
+        justifyContent: 'space-between',
+        fontSize: 12,
+        color: theme.palette.text.secondary,
+        paddingTop: 4,
+        '&::before': {
+            content: '""',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            background: theme.palette.divider,
+            width: '1px',
+            height: '4px'
+        },
+        '&::after': {
+            content: '""',
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            background: theme.palette.divider,
+            width: '1px',
+            height: '4px'
+        }
+    },
+    scaleHistory: {
+        display: 'flex',
+        justifyContent: 'space-between'
+    },
+    title: {
+        fontSize: 13,
+        display: 'flex',
+        alignItems: 'center',
+        color: theme.palette.text.secondary,
+        gap: 8,
+        '& .value': {
+            color: theme.palette.text.primary
+        },
+        '& .boldValue': {
+            color: theme.palette.text.primary,
+            fontWeight: 700
+        }
+    },
+    greenBadge: {
+        width: 12,
+        height: 12,
+        background: 'rgb(151, 192, 97)'
+    },
+    redBadge: {
+        width: 12,
+        height: 12,
+        background: 'rgb(255, 112, 112)'
+    },
+    scale: {
+        width: '100%',
+        height: 16,
+        background: 'rgba(255, 112, 112)',
+        '&.empty': {
+            background: '#F9F9F9'
+        }
+    },
+    scaleBar: {
+        background: 'rgba(151,192,97)'
+    },
+    icon: {
+        width: '14px',
+        height: '14px',
+        color: 'rgba(0,0,0,0.54)'
+    },
+    ratingsList: {
+        borderTop: '1px solid #ccc',
+        borderBottom: '1px solid #ccc',
+        padding: '12px 0',
+        maxHeight: 140,
+        boxSizing: 'border-box',
+        overflow: 'auto'
+    },
+    rating: {
+        display: 'flex',
+        padding: '4px 0px',
+        alignItems: 'center'
+    },
+    avatar: {
+        width: 24,
+        height: 24,
+        marginRight: 12,
+        '& .icon': {
+            fontSize: 18
+        }
+    },
+    userInfo: {
+        overflow: 'hidden'
+    },
+    user: {
+        fontSize: 13,
+        color: theme.palette.text.primary,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    },
+    ratingDateWrapper: {
+        display: 'flex',
+        alignSelf: 'start',
+        marginLeft: 'auto'
+    },
+    ratingDate: {
+        fontSize: 10,
+        color: theme.palette.text.secondary,
+        marginRight: 4
+    },
+    sourcesWrapper: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4
+    }
+}));

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

@@ -0,0 +1,81 @@
+import React, {useContext, useEffect, useMemo} from 'react';
+import classnames from 'classnames';
+import i18n from 'ui-i18n';
+import {useSelector} from 'react-redux';
+import mdmModule, {profile} from '@reltio/mdm-module';
+import {
+    AttributeType,
+    CollaborationObjectTypes,
+    Connection,
+    createRelatedObjectUris,
+    Entity,
+    getActivenessAttributes,
+    getAttributesListForReadMode,
+    getAttributeValuesUris,
+    getRelationAttributesList,
+    isEmptyValue,
+    Metadata
+} from '@reltio/mdm-sdk';
+import {CollaborationContext, ReadOnlyAttributesList, RelatedObjectUrisContext} from '@reltio/components';
+import {useStyles} from './styles';
+import {isEmpty} from 'ramda';
+
+type Props = {
+    connection: Connection;
+    className?: string;
+};
+
+export const RelationAttributes = ({connection, className}: Props) => {
+    const styles = useStyles();
+
+    const {relation} = connection;
+    const currentEntityUri = useSelector(mdmModule.selectors.getEntityUriWithDataTenant);
+
+    const metadata = useSelector(mdmModule.selectors.getMetadata) as Metadata;
+
+    const firstLevelRelationAttrTypes = useMemo(
+        () => getRelationAttributesList(metadata, relation?.relationType) as AttributeType[],
+        [relation?.relationType, metadata]
+    );
+
+    const attributeListEntity = useMemo(
+        () => ({
+            attributes: {
+                ...profile.relations.selectors.getRelationAttributesFromConnection(connection)
+            },
+            ...getActivenessAttributes(connection?.relation || {})
+        }),
+        [connection]
+    );
+
+    const attributesList = useMemo(
+        () => getAttributesListForReadMode(firstLevelRelationAttrTypes, attributeListEntity as Entity),
+        [firstLevelRelationAttrTypes, attributeListEntity]
+    );
+
+    const showAttributesList = attributesList.filter(({values}) => !isEmptyValue(values)).length > 0;
+
+    const objectIds = useMemo(() => getAttributeValuesUris(attributeListEntity.attributes), [attributeListEntity]);
+
+    const {getCommentsCount} = useContext(CollaborationContext);
+    useEffect(() => {
+        !isEmpty(objectIds) && getCommentsCount(objectIds);
+    }, [getCommentsCount, objectIds]);
+
+    const additionalRelatedObjectUris = useMemo(
+        () => createRelatedObjectUris(CollaborationObjectTypes.RELATION, {entityUri: currentEntityUri, connection}),
+        [connection, currentEntityUri]
+    );
+
+    return showAttributesList ? (
+        <RelatedObjectUrisContext.Provider value={additionalRelatedObjectUris}>
+            <ReadOnlyAttributesList
+                className={classnames(styles.attributesList, className)}
+                entity={attributeListEntity}
+                attrTypes={firstLevelRelationAttrTypes}
+            />
+        </RelatedObjectUrisContext.Provider>
+    ) : (
+        <div className={classnames(styles.attributesList, className)}>{i18n.text('No attributes')}</div>
+    );
+};

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

@@ -0,0 +1,218 @@
+import React from 'react';
+import {mount, shallow} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {ACTIVENESS_ATTR_TYPES} from '@reltio/mdm-sdk';
+import {CollaborationContext, ReadOnlyAttributesList, RelatedObjectUrisContext} from '@reltio/components';
+import {RelationAttributes} from '../RelationAttributes';
+import {act} from 'react-dom/test-utils';
+
+const ReadOnlyAttributesListMock = () => <div className="ReadOnlyAttributesListMock" />;
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    ReadOnlyAttributesList: ReadOnlyAttributesListMock
+}));
+
+const tenant = 't1';
+
+const metadata = {
+    uri: 'configuration',
+    entityTypes: [
+        {
+            uri: 'configuration/entityTypes/HCP',
+            attributes: [
+                {
+                    uri: 'configuration/entityTypes/HCP/attributes/Address'
+                }
+            ]
+        }
+    ],
+    relationTypes: [
+        {
+            uri: 'configuration/relationTypes/HCPtoHCP',
+            attributes: [
+                {
+                    uri: 'configuration/relationTypes/HCPtoHCP/attributes/AffiliationSubType',
+                    name: 'AffiliationSubType'
+                }
+            ]
+        }
+    ]
+};
+
+const store = {
+    metadata: {
+        [tenant]: metadata
+    },
+    tenant: {
+        id: tenant
+    },
+    profile: {
+        entity: {
+            uri: 'currentEntityUri'
+        }
+    }
+};
+
+describe('RelationAttributes tests', () => {
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+
+    it('should render correctly attributes list', () => {
+        const connection = {
+            entity: {
+                entityUri: 'entities/uri1',
+                entityType: 'configuration/entityTypes/HCP',
+                entityLabel: 'Label'
+            },
+            relation: {
+                relationUri: 'relations/uri1',
+                relationLabel: 'Relation Label',
+                object: {
+                    uri: 'relationUri',
+                    type: 'relationType',
+                    attributes: {
+                        attrName: [{uri: 'uri1', value: ''}]
+                    }
+                },
+                startDate: 1627066800000
+            }
+        };
+
+        const component = shallow(<RelationAttributes connection={connection} />);
+
+        const attributesList = component.find(ReadOnlyAttributesList);
+        expect(attributesList).toHaveLength(1);
+        expect(attributesList.props()).toMatchObject({
+            entity: {attributes: connection.relation.object.attributes, startDate: connection.relation.startDate},
+            attrTypes: ACTIVENESS_ATTR_TYPES
+        });
+    });
+
+    it('should render "No attributes" if list of attributes is empty', () => {
+        const connection = {
+            entity: {
+                entityUri: 'entities/uri1',
+                entityType: 'configuration/entityTypes/HCP',
+                entityLabel: 'Label'
+            },
+            relation: {
+                relationUri: 'relations/uri1',
+                relationLabel: 'Relation Label'
+            }
+        };
+        const component = shallow(<RelationAttributes connection={connection} />);
+        expect(component.find(ReadOnlyAttributesList)).toHaveLength(0);
+        expect(component.find('.attributesList').text()).toBe('No attributes');
+    });
+
+    it('should call getCommentsCount with attributes uri', async () => {
+        const connection = {
+            entity: {
+                entityUri: 'entities/uri1',
+                entityType: 'configuration/entityTypes/HCP',
+                entityLabel: 'Label'
+            },
+            relation: {
+                relationUri: 'relations/uri1',
+                relationType: 'configuration/relationTypes/HCPtoHCP',
+                relationLabel: 'Relation Label',
+                object: {
+                    uri: 'relationUri',
+                    type: 'relationType',
+                    attributes: {
+                        AffiliationSubType: [
+                            {
+                                type: 'configuration/relationTypes/HCPtoHCP/attributes/AffiliationSubType',
+                                ov: true,
+                                value: 'Child to Parent',
+                                uri: 'relations/gqN8AHJ/attributes/AffiliationSubType/26IHkHqXG'
+                            }
+                        ]
+                    }
+                },
+                startDate: 1627066800000
+            }
+        };
+        const getCommentsCount = jest.fn();
+        const collaborationContext = {
+            getCommentsCount
+        } as unknown as React.ContextType<typeof CollaborationContext>;
+        await act(async () => {
+            mount(
+                <CollaborationContext.Provider value={collaborationContext}>
+                    <RelationAttributes connection={connection} />
+                </CollaborationContext.Provider>
+            );
+        });
+        expect(getCommentsCount).toHaveBeenCalledWith(['relations/gqN8AHJ/attributes/AffiliationSubType/26IHkHqXG']);
+    });
+
+    it('should not call getCommentsCount for empty attributes ', async () => {
+        const connection = {
+            entity: {
+                entityUri: 'entities/uri1',
+                entityType: 'configuration/entityTypes/HCP',
+                entityLabel: 'Label'
+            },
+            relation: {
+                relationUri: 'relations/uri1',
+                relationType: 'configuration/relationTypes/HCPtoHCP',
+                relationLabel: 'Relation Label',
+                object: {
+                    uri: 'relationUri',
+                    type: 'relationType',
+                    attributes: {}
+                },
+                startDate: 1627066800000
+            }
+        };
+        const getCommentsCount = jest.fn();
+        const collaborationContext = {
+            getCommentsCount
+        } as unknown as React.ContextType<typeof CollaborationContext>;
+        await act(async () => {
+            mount(
+                <CollaborationContext.Provider value={collaborationContext}>
+                    <RelationAttributes connection={connection} />
+                </CollaborationContext.Provider>
+            );
+        });
+        expect(getCommentsCount).not.toHaveBeenCalled();
+    });
+
+    it('should set value for RelatedObjectUrisContext', () => {
+        const connection = {
+            entity: {
+                entityUri: 'entities/uri1',
+                entityType: 'configuration/entityTypes/HCP',
+                entityLabel: 'Label'
+            },
+            relation: {
+                relationUri: 'relations/uri1',
+                relationType: 'configuration/relationTypes/HCPtoHCP',
+                relationLabel: 'Relation Label',
+                object: {
+                    uri: 'relationUri',
+                    type: 'relationType',
+                    attributes: {
+                        AffiliationSubType: [
+                            {
+                                type: 'configuration/relationTypes/HCPtoHCP/attributes/AffiliationSubType',
+                                ov: true,
+                                value: 'Child to Parent',
+                                uri: 'relations/gqN8AHJ/attributes/AffiliationSubType/26IHkHqXG'
+                            }
+                        ]
+                    }
+                }
+            }
+        };
+        const component = shallow(<RelationAttributes connection={connection} />);
+        expect(component.find(RelatedObjectUrisContext.Provider).prop('value')).toEqual([
+            store.profile.entity.uri,
+            connection.entity.entityUri,
+            connection.relation.relationType
+        ]);
+    });
+});

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

@@ -0,0 +1,12 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    attributesList: {
+        paddingLeft: '46px',
+        paddingRight: '16px',
+        marginBottom: '10px',
+        color: theme.palette.text.secondary,
+        fontSize: '13px',
+        letterSpacing: 0
+    }
+}));