@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/ProfileRelationsView/components/RelationsList/RelationCompexItem/RelationComplexItem.tsx

@@ -0,0 +1,129 @@
+import React, {useState} from 'react';
+import {useSelector} from 'react-redux';
+import classnames from 'classnames';
+import {isEmpty} from 'ramda';
+import {COMMENTS_CONTAINER_VISIBILITY_AREA, CommentsContainer, EntityTypeIcon, EntityUriLink} from '@reltio/components';
+import {
+    Metadata,
+    Connection,
+    rateRelation,
+    createRelatedObjectUris,
+    CollaborationObjectTypes,
+    getConnectionRelationUriForLink
+} from '@reltio/mdm-sdk';
+import mdmModule from '@reltio/mdm-module';
+import Box from '@mui/material/Box';
+import RelationTooltip from '../../RelationTooltip/RelationTooltip';
+import {RelationAttributes} from '../RelationAttributes/RelationAttributes';
+import {ShowDetailsButton} from '../ShowDetailsButton/ShowDetailsButton';
+import {Ratings} from '../Ratings/Ratings';
+import {useRelationInfo} from '../../../hooks/useRelationInfo';
+import {RatingsButtons} from '../RatingsButtons/RatingsButtons';
+import {SuggestedButtons} from '../../SuggestedButtons/SuggestedButtons';
+import {useStyles} from './styles';
+
+type Props = {
+    connection: Connection;
+    loadRelations: () => void;
+    acceptRelation?: (connection: Connection) => () => void;
+    ignoreRelation?: (connection: Connection) => () => void;
+    renderRelationArrowButton: () => React.ReactNode;
+};
+
+export const RelationComplexItem = ({
+    connection,
+    loadRelations,
+    renderRelationArrowButton,
+    acceptRelation,
+    ignoreRelation
+}: Props) => {
+    const styles = useStyles();
+    const isSuggested = connection.suggested;
+
+    const [showDetails, setShowDetails] = useState(false);
+
+    const {entity, relation} = connection;
+    const metadata = useSelector(mdmModule.selectors.getMetadata) as Metadata;
+    const {entityLabel, entityType, preparedUri, relationLabel} = useRelationInfo(connection, metadata);
+    const ratings = relation?.ratings || [];
+    const crosswalks = relation?.object?.crosswalks || [];
+
+    const toggleShowDetails = () => {
+        setShowDetails((show) => !show);
+    };
+
+    const handleAgree = () => {
+        rateRelation(relation?.relationUri, {
+            comment: '',
+            value: 5
+        }).then(loadRelations);
+    };
+
+    const handleDisagree = (comment: string) => {
+        rateRelation(relation?.relationUri, {
+            comment,
+            value: 1
+        }).then(loadRelations);
+    };
+    const currentEntityUri = useSelector(mdmModule.selectors.getEntityUriWithDataTenant);
+    const relatedObjectUris =
+        (entity &&
+            relation &&
+            createRelatedObjectUris(CollaborationObjectTypes.RELATION, {
+                entityUri: currentEntityUri,
+                connection
+            })) ||
+        [];
+
+    return (
+        <div className={classnames(styles.wrapper, {[styles.suggestedWrapper]: isSuggested})}>
+            <Box display="flex" minHeight="44px" className={COMMENTS_CONTAINER_VISIBILITY_AREA}>
+                <Box display="flex" alignItems="center">
+                    <Box display="flex" alignItems="center">
+                        {renderRelationArrowButton && renderRelationArrowButton()}
+                        <EntityTypeIcon entityType={entityType} className={styles.entityTypeIcon} />
+                    </Box>
+                    <Box display="flex" flexDirection="column">
+                        <EntityUriLink value={preparedUri} className={styles.entityLabelContainer}>
+                            <RelationTooltip label={entityLabel} entity={entity}>
+                                <span className={styles.entityLabel}>{entityLabel}</span>
+                            </RelationTooltip>
+                        </EntityUriLink>
+                        {relationLabel && <span className={styles.relationLabel}>{relationLabel}</span>}
+                        {!isSuggested && (
+                            <RatingsButtons ratings={ratings} onAgree={handleAgree} onDisagree={handleDisagree} />
+                        )}
+                    </Box>
+                </Box>
+                <div className={styles.additionalButtonsWrapper}>
+                    {!isEmpty(relatedObjectUris) && (
+                        <CommentsContainer
+                            className={styles.commentsContainer}
+                            uri={getConnectionRelationUriForLink(relation)}
+                            relatedObjectUris={relatedObjectUris}
+                            objectType={CollaborationObjectTypes.RELATION}
+                            allowOnlyOneComment
+                        />
+                    )}
+                    {isSuggested && (
+                        <SuggestedButtons
+                            acceptRelation={acceptRelation(connection)}
+                            ignoreRelation={ignoreRelation(connection)}
+                        />
+                    )}
+                    {!isSuggested && (
+                        <>
+                            <Ratings ratings={ratings} crosswalks={crosswalks} className={styles.ratings} />
+                            <ShowDetailsButton
+                                show={showDetails}
+                                onToggle={toggleShowDetails}
+                                className={styles.showDetailsButton}
+                            />
+                        </>
+                    )}
+                </div>
+            </Box>
+            {showDetails && <RelationAttributes connection={connection} className={styles.relationAttributes} />}
+        </div>
+    );
+};

package/src/components/ProfileRelationsView/components/RelationsList/RelationCompexItem/__tests__/RelationComplexItem.test.tsx

@@ -0,0 +1,303 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {act} from 'react-dom/test-utils';
+import {CommentsContainer, EntityTypeIcon, EntityUriLink} from '@reltio/components';
+import {Rating, rateRelation} from '@reltio/mdm-sdk';
+import {RelationComplexItem} from '../RelationComplexItem';
+import RelationTooltip from '../../../RelationTooltip/RelationTooltip';
+import {ShowDetailsButton} from '../../ShowDetailsButton/ShowDetailsButton';
+import {Ratings} from '../../Ratings/Ratings';
+import {RelationAttributes} from '../../RelationAttributes/RelationAttributes';
+import {RatingsButtons} from '../../RatingsButtons/RatingsButtons';
+import {SuggestedButtons} from '../../../SuggestedButtons/SuggestedButtons';
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...(jest.requireActual('@reltio/mdm-sdk') as Record<string, unknown>),
+    rateRelation: jest.fn(() => Promise.resolve())
+}));
+
+const tenant = 't1';
+
+const metadata = {
+    uri: 'configuration',
+    entityTypes: [
+        {
+            uri: 'configuration/entityTypes/HCP',
+            attributes: [
+                {
+                    uri: 'configuration/entityTypes/HCP/attributes/Address'
+                }
+            ]
+        }
+    ],
+    relationTypes: []
+};
+
+const store = {
+    metadata: {
+        [tenant]: metadata
+    },
+    tenant: {
+        id: tenant
+    },
+    user: {
+        username: 'ivan.ivanov'
+    },
+    profile: {
+        entity: {
+            uri: 'currentEntityUri'
+        }
+    }
+};
+
+const createConnection = (ratings?: Rating[]) => {
+    const defaultRatings = [
+        {
+            value: 1,
+            comment: 'Other'
+        },
+        {
+            value: 5,
+            comment: ''
+        }
+    ] as Rating[];
+
+    return {
+        entity: {
+            entityUri: 'entities/uri1',
+            entityType: 'configuration/entityTypes/HCP',
+            entityLabel: 'Label'
+        },
+        relation: {
+            relationUri: 'relations/uri1',
+            relationLabel: 'Relation Label',
+            relationType: 'configuration/relationTypes/HasAddress',
+            object: {
+                uri: 'relations/uri1',
+                type: 'configuration/relationTypes/HasAddress',
+                startObject: {
+                    objectURI: 'entities/uri1'
+                },
+                endObject: {
+                    objectURI: 'entities/uri2'
+                }
+            },
+            ratings: ratings || defaultRatings
+        }
+    };
+};
+
+const loadRelations = jest.fn();
+const renderRelationArrowButton = jest.fn();
+
+describe('RelationComplexItem tests', () => {
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+
+    it('should render EntityTypeIcon correctly', () => {
+        const connection = createConnection();
+        const component = shallow(
+            <RelationComplexItem
+                renderRelationArrowButton={renderRelationArrowButton}
+                connection={connection}
+                loadRelations={loadRelations}
+            />
+        );
+        expect(component.find(EntityTypeIcon).prop('entityType')).toEqual({
+            uri: 'configuration/entityTypes/HCP',
+            attributes: [
+                {
+                    uri: 'configuration/entityTypes/HCP/attributes/Address'
+                }
+            ]
+        });
+    });
+
+    it('should render EntityUriLink correctly', () => {
+        const connection = createConnection();
+        const component = shallow(
+            <RelationComplexItem
+                renderRelationArrowButton={renderRelationArrowButton}
+                connection={connection}
+                loadRelations={loadRelations}
+            />
+        );
+
+        const entityUriLink = component.find(EntityUriLink);
+        expect(entityUriLink.prop('value')).toBe('entities/uri1');
+        const relationTooltip = entityUriLink.find(RelationTooltip);
+        expect(relationTooltip.props()).toMatchObject({
+            label: 'Label',
+            entity: {
+                entityUri: 'entities/uri1',
+                entityType: 'configuration/entityTypes/HCP',
+                entityLabel: 'Label'
+            }
+        });
+        expect(relationTooltip.find('.entityLabel').text()).toBe('Label');
+    });
+
+    it('should render relation label correctly', () => {
+        const connection = createConnection();
+        const component = shallow(
+            <RelationComplexItem
+                renderRelationArrowButton={renderRelationArrowButton}
+                connection={connection}
+                loadRelations={loadRelations}
+            />
+        );
+        expect(component.find('.relationLabel').text()).toBe('Relation Label');
+    });
+
+    it('should render Ratings correctly', () => {
+        const connection = createConnection();
+        const component = shallow(
+            <RelationComplexItem
+                renderRelationArrowButton={renderRelationArrowButton}
+                connection={connection}
+                loadRelations={loadRelations}
+            />
+        );
+        expect(component.find(Ratings).prop('ratings')).toBe(connection.relation.ratings);
+    });
+
+    it('show details button behavior', () => {
+        const connection = createConnection();
+        const component = shallow(
+            <RelationComplexItem
+                renderRelationArrowButton={renderRelationArrowButton}
+                connection={connection}
+                loadRelations={loadRelations}
+            />
+        );
+
+        let showDetails = component.find(ShowDetailsButton);
+        expect(showDetails.prop('show')).toBe(false);
+        expect(showDetails).toHaveLength(1);
+        let onToggle = showDetails.prop('onToggle') as () => void;
+        act(() => {
+            onToggle();
+        });
+        component.update();
+
+        const relationAttributes = component.find(RelationAttributes);
+        expect(relationAttributes).toHaveLength(1);
+        expect(relationAttributes.props()).toMatchObject({
+            connection
+        });
+
+        showDetails = component.find(ShowDetailsButton);
+        expect(showDetails.prop('show')).toBe(true);
+
+        onToggle = showDetails.prop('onToggle') as () => void;
+        act(() => {
+            onToggle();
+        });
+        component.update();
+
+        expect(component.find(RelationAttributes)).toHaveLength(0);
+
+        showDetails = component.find(ShowDetailsButton);
+        expect(showDetails.prop('show')).toBe(false);
+    });
+
+    it('should render SuggestedButtons if suggested property is true', () => {
+        const connection = createConnection();
+        const acceptRelation = jest.fn().mockImplementation(() => jest.fn());
+        const ignoreRelation = jest.fn().mockImplementation(() => jest.fn());
+        const component = shallow(
+            <RelationComplexItem
+                renderRelationArrowButton={renderRelationArrowButton}
+                connection={{...connection, suggested: true}}
+                loadRelations={loadRelations}
+                acceptRelation={acceptRelation}
+                ignoreRelation={ignoreRelation}
+            />
+        );
+        expect(component.find(SuggestedButtons)).toHaveLength(1);
+        expect(component.find(SuggestedButtons).props()).toMatchObject({
+            acceptRelation: expect.any(Function),
+            ignoreRelation: expect.any(Function)
+        });
+    });
+
+    it('handleAgree handler should work correctly', async () => {
+        const connection = createConnection();
+        const component = shallow(
+            <RelationComplexItem
+                renderRelationArrowButton={renderRelationArrowButton}
+                connection={connection}
+                loadRelations={loadRelations}
+            />
+        );
+
+        act(() => {
+            component.find(RatingsButtons).prop('onAgree')();
+        });
+
+        expect(rateRelation).toHaveBeenLastCalledWith('relations/uri1', {comment: '', value: 5});
+
+        await act(async () => {
+            await Promise.resolve();
+        });
+
+        expect(loadRelations).toHaveBeenCalled();
+    });
+
+    it('handleDisagree handler should work correctly', async () => {
+        const connection = createConnection();
+        const component = shallow(
+            <RelationComplexItem
+                renderRelationArrowButton={renderRelationArrowButton}
+                connection={connection}
+                loadRelations={loadRelations}
+            />
+        );
+
+        act(() => {
+            component.find(RatingsButtons).prop('onDisagree')('comment');
+        });
+
+        expect(rateRelation).toHaveBeenLastCalledWith('relations/uri1', {comment: 'comment', value: 1});
+
+        await act(async () => {
+            await Promise.resolve();
+        });
+
+        expect(loadRelations).toHaveBeenCalled();
+    });
+
+    it('should render CommentsContainer correctly', () => {
+        const connection = createConnection();
+        const component = shallow(
+            <RelationComplexItem
+                renderRelationArrowButton={renderRelationArrowButton}
+                connection={connection}
+                loadRelations={loadRelations}
+            />
+        );
+        const commentsContainer = component.find(CommentsContainer);
+        expect(commentsContainer).toHaveLength(1);
+        expect(commentsContainer.props()).toMatchObject({
+            objectType: 'relation',
+            relatedObjectUris: [store.profile.entity.uri, 'entities/uri1', 'configuration/relationTypes/HasAddress'],
+            uri: 'relations/uri1',
+            allowOnlyOneComment: true
+        });
+    });
+
+    it('render arrow button correctly', () => {
+        const renderRelationArrowButton = () => <div className="arrowButton"></div>;
+        const connection = createConnection();
+        const component = shallow(
+            <RelationComplexItem
+                renderRelationArrowButton={renderRelationArrowButton}
+                connection={connection}
+                loadRelations={loadRelations}
+            />
+        );
+        expect(component.find('.arrowButton')).toHaveLength(1);
+    });
+});

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

@@ -0,0 +1,51 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    wrapper: {
+        padding: '3px 16px'
+    },
+    entityTypeIcon: {
+        marginRight: '16px'
+    },
+    entityLabel: {
+        color: theme.palette.primary.main,
+        fontSize: '14px',
+        lineHeight: '16px'
+    },
+    entityLabelContainer: {
+        display: 'flex',
+        wordBreak: 'break-all',
+        textDecoration: 'none'
+    },
+    relationLabel: {
+        color: theme.palette.text.secondary,
+        fontSize: '14px',
+        lineHeight: '16px'
+    },
+    ratings: {
+        marginLeft: 'auto'
+    },
+    showDetailsButton: {
+        marginLeft: '16px',
+        marginTop: '8px'
+    },
+    relationAttributes: {
+        paddingLeft: '60px'
+    },
+    suggestedWrapper: {
+        padding: '6px 8px 6px 16px',
+        backgroundColor: theme.suggested
+    },
+    commentsContainer: {
+        alignSelf: 'center',
+        marginTop: '8px',
+        '& + $ratings': {
+            marginLeft: '16px'
+        }
+    },
+    additionalButtonsWrapper: {
+        marginLeft: 'auto',
+        display: 'flex',
+        alignItems: 'center'
+    }
+}));

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

@@ -0,0 +1,103 @@
+import React, {memo, useState} from 'react';
+import classnames from 'classnames';
+import {useSelector} from 'react-redux';
+import {
+    Connection,
+    Metadata,
+    isActiveObject,
+    createRelatedObjectUris,
+    CollaborationObjectTypes,
+    getConnectionRelationUriForLink
+} from '@reltio/mdm-sdk';
+import {isEmpty} from 'ramda';
+import {COMMENTS_CONTAINER_VISIBILITY_AREA, CommentsContainer, EntityTypeIcon, EntityUriLink} from '@reltio/components';
+import mdmModule from '@reltio/mdm-module';
+import RelationTooltip from '../../RelationTooltip/RelationTooltip';
+import {RelationAttributes} from '../RelationAttributes/RelationAttributes';
+import {ShowDetailsButton} from '../ShowDetailsButton/ShowDetailsButton';
+import {useRelationInfo} from '../../../hooks/useRelationInfo';
+import {useStyles} from './styles';
+import {SuggestedButtons} from '../../SuggestedButtons/SuggestedButtons';
+
+type Props = {
+    connection: Connection;
+    acceptRelation?: (connection: Connection) => () => void;
+    ignoreRelation?: (connection: Connection) => () => void;
+    renderRelationArrowButton: () => React.ReactNode;
+};
+
+const RelationItem = memo(({connection, renderRelationArrowButton, acceptRelation, ignoreRelation}: Props) => {
+    const styles = useStyles();
+    const isSuggested = connection.suggested;
+    const {entity, relation} = connection;
+    const [showDetails, setShowDetails] = useState(false);
+
+    const metadata = useSelector(mdmModule.selectors.getMetadata) as Metadata;
+    const {entityType, entityLabel, preparedUri, relationLabel} = useRelationInfo(connection, metadata);
+    const isActive = isActiveObject(relation) && isActiveObject(entity);
+
+    const toggleShowDetails = () => {
+        setShowDetails((show) => !show);
+    };
+    const currentEntityUri = useSelector(mdmModule.selectors.getEntityUriWithDataTenant);
+    const relatedObjectUris =
+        (entity &&
+            relation &&
+            createRelatedObjectUris(CollaborationObjectTypes.RELATION, {
+                entityUri: currentEntityUri,
+                connection
+            })) ||
+        [];
+    return (
+        <div
+            className={classnames(
+                styles.container,
+                {[styles.rowInactive]: !isActive},
+                {[styles.suggestedWrapper]: isSuggested}
+            )}
+        >
+            <div className={classnames(styles.row, COMMENTS_CONTAINER_VISIBILITY_AREA)}>
+                {renderRelationArrowButton && renderRelationArrowButton()}
+                <div className={styles.labelWrapper}>
+                    <EntityTypeIcon className={styles.entityAvatar} entityType={entityType} />
+                    <EntityUriLink value={preparedUri} className={styles.entityLabelContainer}>
+                        <RelationTooltip label={entityLabel} entity={entity}>
+                            <span className={styles.entityLabel}>{entityLabel}</span>
+                        </RelationTooltip>
+                        {relationLabel && <span className={styles.relationLabel}>{`, ${relationLabel}`}</span>}
+                    </EntityUriLink>
+                </div>
+                <div className={styles.additionalButtonsWrapper}>
+                    {!isEmpty(relatedObjectUris) && (
+                        <CommentsContainer
+                            className={styles.commentsContainer}
+                            uri={getConnectionRelationUriForLink(relation)}
+                            relatedObjectUris={relatedObjectUris}
+                            objectType={CollaborationObjectTypes.RELATION}
+                            allowOnlyOneComment
+                        />
+                    )}
+                    {isSuggested && (
+                        <SuggestedButtons
+                            size="small"
+                            acceptRelation={acceptRelation(connection)}
+                            ignoreRelation={ignoreRelation(connection)}
+                        />
+                    )}
+                    {!isSuggested && (
+                        <ShowDetailsButton
+                            show={showDetails}
+                            onToggle={toggleShowDetails}
+                            className={styles.showDetails}
+                        />
+                    )}
+                </div>
+            </div>
+            {showDetails && <RelationAttributes connection={connection} />}
+        </div>
+    );
+});
+
+RelationItem.displayName = 'RelationItem';
+
+export default RelationItem;