@reltio/profile 1.4.1585 → 1.4.1586-mui5

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

@@ -0,0 +1,222 @@
+import React from 'react';
+import {ReactWrapper, shallow} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {act} from 'react-dom/test-utils';
+import {CommentsContainer, EntityTypeIcon, EntityUriLink} from '@reltio/components';
+import RelationItem from '../RelationItem';
+import RelationTooltip from '../../../RelationTooltip/RelationTooltip';
+import {ShowDetailsButton} from '../../ShowDetailsButton/ShowDetailsButton';
+import {RelationAttributes} from '../../RelationAttributes/RelationAttributes';
+import {SuggestedButtons} from '../../../SuggestedButtons/SuggestedButtons';
+import {rerenderWrapper} from '../../../../../../../../../__mocks__/test-utils';
+
+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
+    },
+    profile: {
+        entity: {
+            uri: 'currentEntityUri'
+        }
+    }
+};
+
+const renderRelationArrowButton = jest.fn();
+
+describe('RelationItem tests', () => {
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+
+    it('should render main parts', () => {
+        const connection = {};
+        const component = shallow(
+            <RelationItem renderRelationArrowButton={renderRelationArrowButton} connection={connection} />
+        );
+
+        expect(component.find(EntityTypeIcon)).toHaveLength(1);
+        expect(component.find(EntityUriLink)).toHaveLength(1);
+        expect(component.find(ShowDetailsButton)).toHaveLength(1);
+    });
+
+    it('should render components with correct props', () => {
+        const connection = {
+            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'
+                    }
+                }
+            }
+        };
+        const component = shallow(
+            <RelationItem renderRelationArrowButton={renderRelationArrowButton} connection={connection} />
+        );
+
+        const entityTypeIcon = component.find(EntityTypeIcon);
+        expect(entityTypeIcon).toHaveLength(1);
+        expect(entityTypeIcon.prop('entityType')).toBe(store.metadata[tenant].entityTypes[0]);
+
+        const entityUriLink = component.find(EntityUriLink);
+        expect(entityUriLink).toHaveLength(1);
+        expect(entityUriLink.prop('value')).toBe(connection.entity.entityUri);
+        expect(entityUriLink.find('.relationLabel').text()).toBe(`, ${connection.relation.relationLabel}`);
+
+        const relationTooltip = entityUriLink.find(RelationTooltip);
+        expect(relationTooltip).toHaveLength(1);
+        expect(relationTooltip.props()).toMatchObject({
+            label: connection.entity.entityLabel,
+            entity: connection.entity
+        });
+        expect(new ReactWrapper(relationTooltip.prop('children')).text()).toBe(connection.entity.entityLabel);
+
+        const detailsButton = component.find(ShowDetailsButton);
+        expect(detailsButton).toHaveLength(1);
+
+        const commentContainer = component.find(CommentsContainer);
+        expect(commentContainer).toHaveLength(1);
+        expect(commentContainer.props()).toMatchObject({
+            objectType: 'relation',
+            relatedObjectUris: [store.profile.entity.uri, 'entities/uri1', 'configuration/relationTypes/HasAddress'],
+            uri: connection.relation.relationUri,
+            allowOnlyOneComment: true
+        });
+    });
+
+    it('show details button behavior', () => {
+        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(
+            <RelationItem renderRelationArrowButton={renderRelationArrowButton} connection={connection} />
+        );
+
+        let showDetails = component.find(ShowDetailsButton);
+        expect(showDetails.prop('show')).toBe(false);
+        expect(showDetails).toHaveLength(1);
+        let onToggle = showDetails.prop('onToggle') as () => void;
+        act(() => {
+            onToggle();
+        });
+        rerenderWrapper(component);
+
+        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();
+        });
+        rerenderWrapper(component);
+
+        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 = {
+            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'
+                    }
+                }
+            },
+            suggested: true
+        };
+        const acceptRelation = jest.fn().mockImplementation(() => jest.fn());
+        const ignoreRelation = jest.fn().mockImplementation(() => jest.fn());
+        const component = shallow(
+            <RelationItem
+                renderRelationArrowButton={renderRelationArrowButton}
+                connection={connection}
+                acceptRelation={acceptRelation}
+                ignoreRelation={ignoreRelation}
+            />
+        );
+        expect(component.find(SuggestedButtons)).toHaveLength(1);
+        expect(component.find(SuggestedButtons).props()).toMatchObject({
+            size: 'small',
+            acceptRelation: expect.any(Function),
+            ignoreRelation: expect.any(Function)
+        });
+    });
+    it('render arrow button correctly', () => {
+        const renderRelationArrowButton = () => <div className="arrowButton"></div>;
+        const connection = {};
+        const component = shallow(
+            <RelationItem renderRelationArrowButton={renderRelationArrowButton} connection={connection} />
+        );
+        expect(component.find('.arrowButton')).toHaveLength(1);
+    });
+});

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

@@ -0,0 +1,72 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        paddingBottom: '2px'
+    },
+    row: {
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'row',
+        minHeight: '16px',
+        padding: '3px 11px 3px 16px'
+    },
+    rowInactive: {
+        background: theme.inactiveBackground
+    },
+    entityAvatar: {
+        height: '12px',
+        width: '12px',
+        fontSize: '11px',
+        marginRight: '8px'
+    },
+    entityLabelContainer: {
+        textDecoration: 'none',
+        cursor: 'pointer',
+        wordBreak: 'break-all',
+        paddingRight: '8px'
+    },
+    entityLabel: {
+        color: theme.palette.primary.main,
+        fontSize: '13px',
+        letterSpacing: 0,
+        lineHeight: '15px'
+    },
+    relationLabel: {
+        color: theme.palette.text.secondary,
+        fontSize: '13px',
+        letterSpacing: 0,
+        lineHeight: '15px'
+    },
+    showDetails: {
+        marginLeft: 'auto',
+        paddingRight: '5px'
+    },
+    attributesList: {
+        paddingLeft: '46px',
+        marginBottom: '10px',
+        color: theme.palette.text.secondary,
+        fontSize: '13px',
+        letterSpacing: 0
+    },
+    suggestedWrapper: {
+        backgroundColor: theme.suggested
+    },
+    commentsContainer: {
+        marginLeft: 'auto',
+        alignItems: 'center',
+        '& + $showDetails': {
+            marginLeft: '4px'
+        }
+    },
+    additionalButtonsWrapper: {
+        marginLeft: 'auto',
+        display: 'flex'
+    },
+    labelWrapper: {
+        display: 'flex',
+        alignItems: 'center'
+    }
+}));

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

@@ -0,0 +1,69 @@
+import React, {useMemo, useContext, useEffect} from 'react';
+import {Connection, getRelationshipsObjectIdsForCollaboration, RelationsViewConfig} from '@reltio/mdm-sdk';
+import {CollaborationContext} from '@reltio/components';
+import RelationItem from './RelationItem/RelationItem';
+import {RelationComplexItem} from './RelationCompexItem/RelationComplexItem';
+import {useSuggestedRelations} from '../../hooks/useSuggestedRelations';
+import {SecondLevelWrapper} from '../SecondLevelWrapper/SecondLevelWrapper';
+
+type Props = {
+    className?: string;
+    connections: Array<Connection>;
+    loadRelations: () => void;
+    config?: RelationsViewConfig;
+    mainEnityUri?: string;
+};
+
+const RelationsList = ({className, connections = [], loadRelations, config, mainEnityUri}: Props) => {
+    const {isComplex, content} = config;
+    const {ignoreRelation, acceptRelation} = useSuggestedRelations(content, loadRelations, mainEnityUri);
+
+    const objectIds = useMemo(() => {
+        return getRelationshipsObjectIdsForCollaboration(connections);
+    }, [connections]);
+
+    const {getCommentsCount} = useContext(CollaborationContext);
+
+    useEffect(() => {
+        getCommentsCount(objectIds);
+    }, [getCommentsCount, objectIds]);
+
+    return (
+        <div className={className}>
+            {connections.map((connection) => {
+                const itemKey = `${connection?.relation?.relationUri}-${connection?.relation?.direction}`;
+
+                return (
+                    <SecondLevelWrapper config={config} connection={connection} key={itemKey}>
+                        {(renderRelationArrowButton) => {
+                            if (isComplex) {
+                                return (
+                                    <RelationComplexItem
+                                        loadRelations={loadRelations}
+                                        connection={connection}
+                                        acceptRelation={acceptRelation}
+                                        ignoreRelation={ignoreRelation}
+                                        renderRelationArrowButton={renderRelationArrowButton}
+                                    />
+                                );
+                            }
+
+                            return (
+                                <RelationItem
+                                    acceptRelation={acceptRelation}
+                                    ignoreRelation={ignoreRelation}
+                                    connection={connection}
+                                    renderRelationArrowButton={renderRelationArrowButton}
+                                />
+                            );
+                        }}
+                    </SecondLevelWrapper>
+                );
+            })}
+        </div>
+    );
+};
+
+RelationsList.displayName = 'RelationsList';
+
+export default RelationsList;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import {SmallIconButtonWithTooltip} from '@reltio/components';
+import InfoIconSelected from '@mui/icons-material/InfoRounded';
+import InfoIcon from '@mui/icons-material/InfoOutlined';
+
+type Props = {
+    show: boolean;
+    onToggle: () => void;
+    className?: string;
+};
+
+export const ShowDetailsButton = ({show, onToggle, className}: Props) => {
+    return (
+        <SmallIconButtonWithTooltip
+            className={className}
+            tooltipTitle={
+                show
+                    ? i18n.text('Hide attributes of the relationship')
+                    : i18n.text('Show attributes of the relationship')
+            }
+            tooltipPlacement="bottom-end"
+            size="XXS"
+            icon={show ? InfoIconSelected : InfoIcon}
+            onClick={onToggle}
+        />
+    );
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {SmallIconButtonWithTooltip} from '@reltio/components';
+import InfoIconSelected from '@mui/icons-material/InfoRounded';
+import InfoIcon from '@mui/icons-material/InfoOutlined';
+import {ShowDetailsButton} from '../ShowDetailsButton';
+
+describe('ShowDetailsButton tests', () => {
+    it('should pass main props correctly', () => {
+        const onToggle = jest.fn();
+        const component = shallow(<ShowDetailsButton show={true} onToggle={onToggle} className="className" />);
+        expect(component.find(SmallIconButtonWithTooltip).prop('onClick')).toEqual(onToggle);
+        expect(component.find(SmallIconButtonWithTooltip).prop('className')).toBe('className');
+    });
+
+    it('should render correctly if show is "true"', () => {
+        const onToggle = jest.fn();
+        const component = shallow(<ShowDetailsButton show={true} onToggle={onToggle} />);
+        expect(component.find(SmallIconButtonWithTooltip).prop('icon')).toEqual(InfoIconSelected);
+        expect(component.find(SmallIconButtonWithTooltip).prop('tooltipTitle')).toEqual(
+            'Hide attributes of the relationship'
+        );
+    });
+
+    it('should render correctly if show is "false"', () => {
+        const onToggle = jest.fn();
+        const component = shallow(<ShowDetailsButton show={false} onToggle={onToggle} />);
+        expect(component.find(SmallIconButtonWithTooltip).prop('icon')).toEqual(InfoIcon);
+        expect(component.find(SmallIconButtonWithTooltip).prop('tooltipTitle')).toEqual(
+            'Show attributes of the relationship'
+        );
+    });
+});

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

@@ -0,0 +1,143 @@
+import React from 'react';
+import {mount, shallow} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {Connection, ProfileViewTypes, RelationsViewConfig} from '@reltio/mdm-sdk';
+import RelationsList from '../RelationsList';
+import {CollaborationContext} from '@reltio/components';
+import {act} from 'react-dom/test-utils';
+import {SecondLevelWrapper} from '../../SecondLevelWrapper/SecondLevelWrapper';
+
+const SecondLevelWrapperMock = () => <div className="SecondLevelWrapperMock" />;
+jest.mock('../../SecondLevelWrapper/SecondLevelWrapper', () => ({
+    ...(jest.requireActual('../../SecondLevelWrapper/SecondLevelWrapper') as Record<string, unknown>),
+    SecondLevelWrapper: SecondLevelWrapperMock
+}));
+
+const loadRelations = jest.fn();
+const config: RelationsViewConfig = {
+    point: 'com.reltio.plugins.ui.view',
+    id: 'com.reltio.plugins.entity.org.amv2.HCPs_Rating',
+    class: ProfileViewTypes.Relations,
+    recordClass: 'com.reltio.plugins.entity.relations.ComplexRelationRecord',
+    type: 'rating',
+    sortOptions: {
+        consolidatedRating: 'Consolidated Rating'
+    },
+    sortOrder: 'desc',
+    caption: 'HCPs affiliated with this HCO',
+    defaultRelationType: {
+        name: 'configuration/relationTypes/HasHealthCareRole',
+        direction: 'inRelations'
+    },
+    content: {
+        inRelations: ['configuration/relationTypes/HasHealthCareRole'],
+        entityTypes: ['configuration/entityTypes/HCP']
+    },
+    suggested: [
+        {
+            outRelations: ['configuration/relationTypes/HasAddress'],
+            entityTypes: ['configuration/entityTypes/Location'],
+            nextEntry: {
+                inRelations: [
+                    {
+                        uri: 'configuration/relationTypes/HasAddress',
+                        label: 'suggested'
+                    }
+                ],
+                entityTypes: ['configuration/entityTypes/HCP']
+            }
+        }
+    ]
+};
+
+const getRenderedChildrenOfSecondLevelWrapperByName = (component, name) => {
+    return component
+        .find(SecondLevelWrapper)
+        .filterWhere((node) => {
+            return node.renderProp('children')(jest.fn()).name() === name;
+        })
+        .map((node) => node.renderProp('children')(jest.fn()));
+};
+
+describe('RelationsList tests', () => {
+    const dispatch = jest.fn();
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(dispatch);
+    });
+    it('should render nothing in case empty connections', () => {
+        const component = shallow(<RelationsList config={config} loadRelations={loadRelations} connections={[]} />);
+        const relationItem = getRenderedChildrenOfSecondLevelWrapperByName(component, 'RelationItem');
+        expect(relationItem).toHaveLength(0);
+    });
+
+    it('should render not complext RelationItems if isComplex is "false"', () => {
+        const connections = [
+            {relation: {relationUri: 'relations/1'}, entity: {entityUri: '1'}},
+            {relation: {relationUri: 'relations/2'}, entity: {entityUri: '2'}},
+            {relation: {relationUri: 'relations/3'}, entity: {entityUri: '3'}}
+        ] as Connection[];
+        const component = shallow(
+            <RelationsList loadRelations={loadRelations} connections={connections} config={config} />
+        );
+
+        const relationItem = getRenderedChildrenOfSecondLevelWrapperByName(component, 'RelationItem');
+
+        expect(relationItem).toHaveLength(3);
+    });
+
+    it('should render complex RelationItems if isComplex is "true"', () => {
+        const connections = [
+            {relation: {relationUri: 'relations/1'}, entity: {entityUri: '1'}},
+            {relation: {relationUri: 'relations/2'}, entity: {entityUri: '2'}},
+            {relation: {relationUri: 'relations/3'}, entity: {entityUri: '3'}}
+        ] as Connection[];
+
+        const component = shallow(
+            <RelationsList
+                loadRelations={loadRelations}
+                connections={connections}
+                config={{...config, isComplex: true}}
+            />
+        );
+        const relationComplexItem = getRenderedChildrenOfSecondLevelWrapperByName(component, 'RelationComplexItem');
+        expect(relationComplexItem).toHaveLength(3);
+    });
+
+    it('should SecondLevelWrapper use direction value for key', () => {
+        const connections = [
+            {relation: {relationUri: 'relations/1', direction: 'in'}, entity: {entityUri: '1'}},
+            {relation: {relationUri: 'relations/1', direction: 'out'}, entity: {entityUri: '2'}}
+        ] as Connection[];
+        const component = shallow(
+            <RelationsList loadRelations={loadRelations} connections={connections} config={config} />
+        );
+        const items = component.find(SecondLevelWrapper);
+
+        expect(items.at(0).key()).toBe('relations/1-in');
+        expect(items.at(1).key()).toBe('relations/1-out');
+    });
+
+    it('should call getCommentsCount with correct ids', async () => {
+        const getCommentsCount = jest.fn();
+        const connections = [
+            {relation: {relationUri: 'relations/1'}, entity: {entityUri: '1'}},
+            {relation: {relationUri: 'relations/2'}, entity: {entityUri: '2'}},
+            {relation: {relationUri: 'relations/3'}, entity: {entityUri: '3'}}
+        ] as Connection[];
+        const collaborationContext = ({
+            getCommentsCount
+        } as unknown) as React.ContextType<typeof CollaborationContext>;
+        await act(async () => {
+            mount(
+                <CollaborationContext.Provider value={collaborationContext}>
+                    <RelationsList loadRelations={loadRelations} connections={connections} config={config} />
+                </CollaborationContext.Provider>
+            );
+        });
+        expect(getCommentsCount).toHaveBeenCalledWith([
+            connections[0].relation.relationUri,
+            connections[1].relation.relationUri,
+            connections[2].relation.relationUri
+        ]);
+    });
+});

package/src/components/ProfileRelationsView/components/RelationsView/RelationsView.tsx

@@ -0,0 +1,108 @@
+import React, {useContext, useEffect, useMemo} from 'react';
+import {useSelector} from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+import {ActivityFilter, Connection, getEntitiesMapForConnections, RelationsViewConfig} from '@reltio/mdm-sdk';
+import {
+    BasicTablePagination,
+    BasicView,
+    EntitiesMapContext,
+    useRelationsLoader,
+    EntityContext
+} from '@reltio/components';
+import RelationsHeader from '../RelationsHeader/RelationsHeader';
+import {RelationsViewStateContext} from '../../contexts/RelationsViewStateContext';
+import {ImportDTContext} from '../../contexts/ImportDTContext';
+import {buildRelationsFilter} from '../../helpers/filters';
+import {RelationsContent} from '../RelationsContent/RelationsContent';
+import {pick} from 'ramda';
+import {useStyles} from './styles';
+
+type Props = {
+    config: RelationsViewConfig;
+    className?: string;
+};
+
+const RelationsView = ({config, className}: Props) => {
+    const styles = useStyles();
+
+    const {page, setPage, rowsPerPage, sortOrder, sortOption, showInactive, searchQuery, changeSearchQuery} =
+        useContext(RelationsViewStateContext);
+    const {selectors} = mdmModule;
+    const connections = useSelector((state) =>
+        selectors.getConnectionsWithDraftsByViewId(state, config.id)
+    ) as Connection[];
+    const entity = useSelector(selectors.getEntity);
+    const total = useSelector((state) => selectors.getTotalByViewId(state, config.id));
+    const mode = useSelector(selectors.getMode);
+    const sorting = useMemo(
+        () => ({
+            order: sortOrder,
+            field: sortOption
+        }),
+        [sortOrder, sortOption]
+    );
+
+    useEffect(() => {
+        changeSearchQuery('');
+    }, [entity?.uri]); //eslint-disable-line react-hooks/exhaustive-deps
+
+    const filter = useMemo(() => buildRelationsFilter(searchQuery), [searchQuery]);
+
+    const {isLoading, reload: loadRelations} = useRelationsLoader({
+        sorting,
+        filter,
+        page,
+        rowsPerPage,
+        config,
+        entity,
+        relationActivityFilter: showInactive ? ActivityFilter.ALL : ActivityFilter.ACTIVE_ONLY,
+        mode
+    });
+
+    const entitiesMap = useMemo(() => getEntitiesMapForConnections(connections), [connections]);
+
+    const importDTContextValue = useMemo(
+        () => ({
+            reloadRelations: loadRelations,
+            config: pick(['content', 'importFromDT', 'maxDtssImport'], config)
+        }),
+        [loadRelations, config]
+    );
+
+    return (
+        <EntityContext.Provider value={entity}>
+            <EntitiesMapContext.Provider value={entitiesMap}>
+                <BasicView className={className}>
+                    <div className={styles.container}>
+                        <ImportDTContext.Provider value={importDTContextValue}>
+                            <RelationsHeader title={config.caption} total={total} />
+                        </ImportDTContext.Provider>
+                        <div className={styles.content}>
+                            <RelationsContent
+                                isLoading={isLoading}
+                                config={config}
+                                loadRelations={loadRelations}
+                                connections={connections}
+                                total={total}
+                            />
+                            {total > rowsPerPage && (
+                                <BasicTablePagination
+                                    classes={{root: styles.pagination}}
+                                    count={total}
+                                    rowsPerPageOptions={[]}
+                                    rowsPerPage={rowsPerPage}
+                                    page={page}
+                                    onChangePage={setPage}
+                                />
+                            )}
+                        </div>
+                    </div>
+                </BasicView>
+            </EntitiesMapContext.Provider>
+        </EntityContext.Provider>
+    );
+};
+
+RelationsView.displayName = 'RelationsView';
+
+export {RelationsView};