@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/PerspectiveProfileBand/__tests__/data/store.data.ts

@@ -0,0 +1,162 @@
+import {History, HistoryMode} from '@reltio/mdm-module';
+import {MetadataPermissions, Mode, Operation} from '@reltio/mdm-sdk';
+
+type Props = {
+    mode?: Mode;
+    access?: MetadataPermissions[];
+    hasNavigationData?: boolean;
+    hasWorkflowPath?: boolean;
+    workflowConfigEnabled?: boolean;
+    isTempUri?: boolean;
+    dataTenant?: boolean;
+    operation?: Operation;
+    history?: History;
+};
+
+export const createInitialState = ({
+    mode = Mode.Viewing,
+    access,
+    hasNavigationData,
+    hasWorkflowPath = true,
+    workflowConfigEnabled = true,
+    isTempUri,
+    dataTenant,
+    operation,
+    history = {mode: HistoryMode.Previous}
+}: Props = {}) => {
+    const entityUri = `entities/${isTempUri ? 'uri$$' : ''}HMcnV19`;
+    const searchNavigationData = {
+        uri: entityUri,
+        index: 1,
+        total: 3,
+        tenant: 'alenat',
+        cache: ['entities/1', entityUri, 'entities/3']
+    };
+    const user = {
+        userPermissions: {
+            permissions: {
+                'workflow:data.process': {
+                    CREATE: ['alenat']
+                }
+            }
+        }
+    };
+
+    return {
+        profile: {
+            mode,
+            entity: {
+                attributes: {
+                    FirstName: [
+                        {
+                            ov: true,
+                            value: 'Test First Name',
+                            uri: `${entityUri}/attributes/FirstName/adfRGFDS`,
+                            type: 'configuration/entityTypes/Employee/attributes/FirstName'
+                        }
+                    ]
+                },
+                dataTenant,
+                analyticsAttributes: {},
+                label: 'Test',
+                secondaryLabel: '',
+                type: 'configuration/entityTypes/Employee',
+                uri: entityUri
+            },
+            modifiedEntities: {
+                [entityUri]: {
+                    attributes: {},
+                    dataTenant,
+                    analyticsAttributes: {},
+                    label: 'Modified entity',
+                    secondaryLabel: '',
+                    type: 'configuration/entityTypes/Employee',
+                    uri: entityUri
+                }
+            },
+            operation,
+            history
+        },
+        metadata: {
+            alenat: {
+                entityTypes: [
+                    {
+                        uri: `${isTempUri ? 'uri$$/' : ''}configuration/entityTypes/Employee`,
+                        attributes: [
+                            {
+                                name: 'FirstName',
+                                uri: 'configuration/entityTypes/Employee/attributes/FirstName'
+                            },
+                            {
+                                name: 'Address',
+                                type: 'Reference',
+                                uri: 'configuration/entityTypes/Employee/attributes/Address',
+                                relationshipTypeURI: 'configuration/relationTypes/HasAddress'
+                            },
+                            {
+                                name: 'Affiliations',
+                                type: 'Reference',
+                                uri: 'configuration/entityTypes/Employee/attributes/Affiliations',
+                                relationshipTypeURI: 'configuration/relationTypes/EmployeetoHCA'
+                            }
+                        ],
+                        access
+                    }
+                ],
+                relationTypes: [
+                    {
+                        uri: 'configuration/relationTypes/uri1',
+                        startObject: {
+                            uri: 'configuration/relationTypes/uri1/startObject',
+                            objectTypeURI: 'configuration/entityTypes/HCP'
+                        },
+                        endObject: {
+                            uri: 'configuration/relationTypes/uri1/endObject',
+                            objectTypeURI: 'configuration/entityTypes/Employee'
+                        }
+                    },
+                    {
+                        uri: 'configuration/relationTypes/uri2',
+                        startObject: {
+                            uri: 'configuration/relationTypes/uri2/startObject',
+                            objectTypeURI: 'configuration/entityTypes/HCP'
+                        },
+                        endObject: {
+                            uri: 'configuration/relationTypes/uri2/endObject',
+                            objectTypeURI: 'configuration/entityTypes/HCA'
+                        }
+                    },
+                    {
+                        uri: 'configuration/relationTypes/OMGToREGISTRY',
+                        startObject: {
+                            uri: 'configuration/relationTypes/OMGToREGISTRY/startObject',
+                            objectTypeURI: 'configuration/entityTypes/Employee'
+                        },
+                        endObject: {
+                            uri: 'configuration/relationTypes/OMGToREGISTRY/endObject',
+                            objectTypeURI: 'configuration/entityTypes/HCA'
+                        }
+                    }
+                ]
+            }
+        },
+        tenant: {
+            id: 'alenat'
+        },
+        ui: {
+            paths: {
+                workflowPath: hasWorkflowPath ? 'https://tst-01-workflow.reltio.com/workflow-adapter' : undefined
+            },
+            config: {
+                'com.reltio.plugins.workflow.configuration': {
+                    enabled: workflowConfigEnabled
+                }
+            }
+        },
+        search: {
+            keyword: null,
+            searchNavigationData: hasNavigationData ? searchNavigationData : undefined
+        },
+        user: hasWorkflowPath ? user : {}
+    };
+};

package/src/components/PerspectiveProfileBand/copy.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icon / Copy</title>
+    <defs>
+        <path d="M20.2222222,6 C21.2088889,6 22,6.8 22,7.77777778 L22,20.2222222 C22,21.2 21.2088889,22 20.2222222,22 L7.77777778,22 C6.79111111,22 6,21.2 6,20.2222222 L6,7.77777778 C6,6.8 6.79111111,6 7.77777778,6 L20.2222222,6 Z M20,8 L8,8 L8,20 L20,20 L20,8 Z M4,18 L2,18 L2,4 C2,2.9 2.9,2 4,2 L18,2 L18,4 L4,4 L4,18 Z" id="path-1"></path>
+    </defs>
+    <g id="Icon-/-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="Shape" fill-rule="nonzero"></g>
+        <rect id="↳-Icon-Color" fill-opacity="0.54" fill="#000000" mask="url(#mask-2)" x="0" y="0" width="24" height="24"></rect>
+    </g>
+</svg>

package/src/components/PerspectiveProfileBand/hooks/useCloneAction.ts

@@ -0,0 +1,94 @@
+import {useCallback, useMemo} from 'react';
+import {
+    includes,
+    pipe,
+    isNil,
+    propOr,
+    filter,
+    map,
+    prop,
+    cond,
+    identity,
+    omit,
+    find,
+    complement,
+    when,
+    either,
+    pick,
+    always,
+    T
+} from 'ramda';
+import {
+    BaseCloneAction,
+    CloneAction,
+    Entity,
+    getEntityType,
+    isReference,
+    isRelationWithEntityType,
+    getRelationTypeUriFromAttrType
+} from '@reltio/mdm-sdk';
+import mdm, {profile} from '@reltio/mdm-module';
+import {useDispatch, useSelector} from 'react-redux';
+
+type Props = {
+    cloneAction?: CloneAction[];
+    onCloneDiscard: () => void;
+};
+
+export const useCloneAction = ({cloneAction: cloneActionProp, onCloneDiscard}: Props) => {
+    const entity: Entity = useSelector(mdm.selectors.getEntityWithoutDiff);
+    const metadata = useSelector(mdm.selectors.getMetadata);
+    const dispatch = useDispatch();
+    const entityTypeUri = entity?.type;
+    const relationTypes = metadata.relationTypes;
+    const isRelationSuitableForEntityType = useCallback(isRelationWithEntityType(metadata, entityTypeUri), [
+        metadata,
+        entityTypeUri
+    ]);
+    const entityType = getEntityType(metadata, entityTypeUri);
+    const cloneAction = useMemo<BaseCloneAction>(
+        () =>
+            when(
+                complement(isNil),
+                pipe(
+                    find(pipe(propOr([], 'entityTypeUris'), either(includes(entityTypeUri), includes('*')))),
+                    when(complement(isNil), omit(['entityTypeUris']))
+                )
+            )(cloneActionProp),
+        [cloneActionProp, entityTypeUri]
+    );
+    const onClone = useCallback(() => {
+        if (cloneAction) {
+            const modifiedRelationTypes: string[] = pipe(
+                prop('relationshipTypesToCopy'),
+                cond([
+                    [
+                        isNil,
+                        pipe(
+                            always(entityType),
+                            propOr([], 'attributes'),
+                            filter(isReference),
+                            map(getRelationTypeUriFromAttrType)
+                        )
+                    ],
+                    [
+                        includes('*'),
+                        pipe(always(relationTypes || []), map(prop('uri')), filter(isRelationSuitableForEntityType))
+                    ],
+                    [T, identity]
+                ])
+            )(cloneAction);
+            dispatch(
+                profile.entity.actions.entityCloneRequested({
+                    data: {
+                        ...pick(['attributeReplacementMapping'], cloneAction),
+                        relationshipTypesToCopy: modifiedRelationTypes
+                    },
+                    entityUri: entity.uri
+                })
+            );
+        }
+        onCloneDiscard();
+    }, [cloneAction, onCloneDiscard, entityType, relationTypes, entity.uri, isRelationSuitableForEntityType]);
+    return cloneAction ? onClone : undefined;
+};

package/src/components/PerspectiveProfileBand/index.ts

@@ -0,0 +1 @@
+export {PerspectiveProfileBand} from './PerspectiveProfileBand';

package/src/components/PerspectiveProfileBand/styles.ts

@@ -0,0 +1,27 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    editingButtons: {
+        display: 'flex',
+        '& button + button': {
+            minWidth: '88px',
+            marginLeft: '8px'
+        }
+    },
+    searchResults: {
+        width: '150px',
+        height: '25px',
+        backgroundColor: '#ccc'
+    },
+    comments: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        marginTop: '10px'
+    },
+    menuButton: {
+        marginLeft: 8
+    },
+    cancelButton: {
+        border: '1px solid rgba(0, 0, 0, 0.23)'
+    }
+});

package/src/components/PerspectiveProfileBand/suggest.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="19px" height="17px" viewBox="0 0 19 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icon / Suggest</title>
+    <defs>
+        <path d="M14,17 L14,19 L4,19 L4,17 L14,17 Z M20,13 L20,15 L4,15 L4,13 L16.8838736,13.0010281 C16.9225317,13.0015543 16.9612411,13.0018182 17,13.0018182 L17.116,12.9994951 L20,13 Z M11.5428099,11.0000694 L4,11 L4,9 L9.81972777,9.0006627 C10.2895736,9.75897853 10.8727488,10.432214 11.5428099,11.0000694 Z M9.13927083,6.17763769 L8.8503051,6.91090909 L8.885,6.99949507 L4,7 L4,5 L9.71283163,4.99849507 C9.49349031,5.37266404 9.30129724,5.76648396 9.13927083,6.17763769 Z M17,2.82 C14.2727273,2.82 11.9436364,4.51636364 11,6.91090909 C11.9436364,9.30545455 14.2727273,11.0018182 17,11.0018182 C19.7272727,11.0018182 22.0563636,9.30545455 23,6.91090909 C22.0563636,4.51636364 19.7272727,2.82 17,2.82 Z M17,9.63454545 C15.4945455,9.63454545 14.2727273,8.41272727 14.2727273,6.90727273 C14.2727273,5.40181818 15.4945455,4.18 17,4.18 C18.5054545,4.18 19.7272727,5.40181818 19.7272727,6.90727273 C19.7272727,8.41272727 18.5054545,9.63454545 17,9.63454545 Z M17,5.27 C16.0945455,5.27 15.3636364,6.00090909 15.3636364,6.90636364 C15.3636364,7.81181818 16.0945455,8.54272727 17,8.54272727 C17.9054545,8.54272727 18.6363636,7.81181818 18.6363636,6.90636364 C18.6363636,6.00090909 17.9054545,5.27 17,5.27 Z" id="path-1"></path>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(-4.000000, -2.500000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="Shape" fill-rule="nonzero"></g>
+            <rect id="↳-Icon-Color" fill-opacity="0.54" fill="#000000" mask="url(#mask-2)" x="0" y="0" width="24" height="24"></rect>
+        </g>
+    </g>
+</svg>

package/src/components/ProfileAttributesView/ProfileAttributesView.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {AttributesView} from '@reltio/components';
+import {AttributeViewConfig} from '@reltio/mdm-sdk';
+
+type ProfileAttributesViewProps = {
+    config: AttributeViewConfig;
+    className?: string;
+};
+
+export const ProfileAttributesView = ({className, config}: ProfileAttributesViewProps) => {
+    return (
+        <AttributesView
+            className={className}
+            caption={config.caption}
+            excludeUris={config.excludeUris}
+            includeUris={config.includeUris}
+            attributesCount={config.attributesCount}
+            pinnedAttributes={config.pinnedAttributes}
+        />
+    );
+};

package/src/components/ProfileAttributesView/__tests__/ProfileAttributesView.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import {AttributesView} from '@reltio/components';
+import {shallow} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {AttributeViewConfig, ProfileViewTypes} from '@reltio/mdm-sdk';
+import {ProfileAttributesView} from '../ProfileAttributesView';
+
+const config: AttributeViewConfig = {
+    point: 'com.reltio.plugins.ui.view',
+    id: 'id',
+    class: ProfileViewTypes.Attributes,
+    excludeUris: ['configuration/entityTypes/HCP/analyticsAttributes/AnalyticsAttributesName'],
+    includeUris: ['configuration/entityTypes/HCP/attributes/Name'],
+    caption: 'Attributes View(Test123)',
+    attributesCount: 10,
+    pinnedAttributes: [
+        {
+            roles: ['ROLE_ADMIN'],
+            attributes: [
+                'configuration/entityTypes/HCA/attributes/SubTypeCode',
+                'configuration/entityTypes/HCA/attributes/Department'
+            ]
+        }
+    ]
+};
+
+const appearance = {
+    entityUri1: 'UNDO_IGNORE_ATTRIBUTE'
+};
+
+const attributes = {
+    entityUri1: [
+        {
+            value: '123',
+            type: 'superType',
+            uri: 'entityUri1'
+        }
+    ]
+};
+
+describe('ProfileAttributesView tests', () => {
+    beforeEach(() => {
+        const store = {
+            profile: {
+                history: {
+                    diff: {
+                        appearance,
+                        attributes
+                    }
+                }
+            }
+        };
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render ProfileAttributesView', () => {
+        const component = shallow(<ProfileAttributesView config={config} />);
+        const attributesView = component.find(AttributesView);
+        expect(attributesView.length).toBe(1);
+        expect(attributesView.prop('caption')).toBe(config.caption);
+        expect(attributesView.prop('excludeUris')).toBe(config.excludeUris);
+        expect(attributesView.prop('includeUris')).toBe(config.includeUris);
+        expect(attributesView.prop('attributesCount')).toBe(config.attributesCount);
+        expect(attributesView.prop('pinnedAttributes')).toBe(config.pinnedAttributes);
+    });
+});

package/src/components/ProfileErrorsPanel/ProfileErrorsPanel.tsx

@@ -0,0 +1,70 @@
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import classnames from 'classnames';
+import {useSelector} from 'react-redux';
+import i18n from 'ui-i18n';
+import {partition} from 'ramda';
+import ErrorIcon from '@mui/icons-material/Warning';
+import WarningIcon from '@mui/icons-material/Error';
+import mdmModule from '@reltio/mdm-module';
+import {AttributeError, isCriticalError} from '@reltio/mdm-sdk';
+
+import useStyles from './styles';
+
+import {ErrorsPanel} from './components/ErrorsPanel';
+import {Error} from './components/Error';
+import {useCachedErrors} from './useCachedErrors';
+
+export const ProfileErrorsPanel = () => {
+    const styles = useStyles();
+    const allErrors = useSelector(mdmModule.selectors.getProfileErrors);
+    const cachedAllErrors = useCachedErrors(allErrors);
+
+    const [errors, warnings]: [AttributeError[], AttributeError[]] = useMemo(
+        () => partition(isCriticalError, cachedAllErrors),
+        [cachedAllErrors]
+    );
+    const [expandedPanelId, setExpandedPanelId] = useState(null);
+    const panels = useMemo(
+        () =>
+            [
+                {
+                    id: 'errors',
+                    title: i18n.text('${number} ${errors}', {
+                        number: errors.length,
+                        errors: errors.length === 1 ? i18n.text('error') : i18n.text('errors')
+                    }),
+                    icon: <ErrorIcon className={classnames(styles.icon, styles.errorIcon)} />,
+                    items: errors,
+                    accordionClassName: styles.errorsAccordion,
+                    accordionDetailsClassName: styles.errorsAccordionDetails
+                },
+                {
+                    id: 'warnings',
+                    title: i18n.text('${number} ${warnings}', {
+                        number: warnings.length,
+                        warnings: warnings.length === 1 ? i18n.text('warning') : i18n.text('warnings')
+                    }),
+                    icon: <WarningIcon className={classnames(styles.icon, styles.warningIcon)} />,
+                    items: warnings,
+                    accordionClassName: styles.warningsAccordion,
+                    accordionDetailsClassName: styles.warningsAccordionDetails
+                }
+            ].filter(({items}) => items.length > 0),
+        [errors, warnings, styles]
+    );
+
+    useEffect(() => {
+        setExpandedPanelId('errors');
+    }, [errors]);
+
+    const handleChange = useCallback(
+        (panelId: string) => (event, isExpanded: boolean) => {
+            setExpandedPanelId(isExpanded ? panelId : null);
+        },
+        []
+    );
+
+    return panels.length > 0 ? (
+        <ErrorsPanel panels={panels} expandedPanelId={expandedPanelId} onToggle={handleChange} ErrorComponent={Error} />
+    ) : null;
+};

package/src/components/ProfileErrorsPanel/__tests__/ProfileErrorsPanel.specs.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+import * as reactReduxImports from 'react-redux';
+import {ErrorSeverity, ErrorSource, ErrorType} from '@reltio/mdm-sdk';
+
+import {ProfileErrorsPanel} from '../ProfileErrorsPanel';
+import {ErrorsPanel} from '../components/ErrorsPanel';
+import {Error} from '../components/Error';
+
+describe('ProfileErrorsPanel tests', () => {
+    let store;
+
+    const error = {
+        type: ErrorType.invalid,
+        uri: null,
+        attributeTypeUri: 'configuration/entityTypes/HCP/attributes/Name',
+        parentUri: 'entities/123',
+        message: 'Error 1',
+        severity: ErrorSeverity.ERROR,
+        source: ErrorSource.validationService,
+        path: []
+    };
+    const warning = {
+        type: ErrorType.invalid,
+        uri: null,
+        attributeTypeUri: 'configuration/entityTypes/HCP/attributes/RDMLookup',
+        parentUri: 'entities/123',
+        message: 'Warning 1',
+        severity: ErrorSeverity.WARNING,
+        source: ErrorSource.validationService,
+        path: []
+    };
+
+    beforeEach(() => {
+        store = {
+            profile: {
+                errors: []
+            }
+        };
+        jest.spyOn(reactReduxImports, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+
+    const setErrors = (component, errors) => {
+        store.profile.errors = errors;
+        component.setProps({});
+        component.update();
+    };
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render nothing if there are no errors', () => {
+        const component = shallow(<ProfileErrorsPanel />);
+        expect(component.isEmptyRender()).toBe(true);
+    });
+
+    it('should render ErrorsPanel with 2 panels when there are both errors and warnings', () => {
+        store.profile.errors = [error, error, warning];
+        const component = shallow(<ProfileErrorsPanel />);
+        expect(component.isEmptyRender()).toBe(false);
+        const errorsPanel = component.find(ErrorsPanel);
+        expect(errorsPanel.length).toBe(1);
+        const panels = errorsPanel.prop('panels');
+        expect(panels.length).toBe(2);
+        expect(panels[0].title).toBe('2 errors');
+        expect(panels[0].items).toEqual([error, error]);
+        expect(panels[1].title).toBe('1 warning');
+        expect(panels[1].items).toEqual([warning]);
+        expect(errorsPanel.prop('ErrorComponent')).toBe(Error);
+    });
+
+    it('should render ErrorsPanel with only error panel when there are only error(s)', () => {
+        store.profile.errors = [error];
+        const component = shallow(<ProfileErrorsPanel />);
+        const errorsPanel = component.find(ErrorsPanel);
+        expect(errorsPanel.length).toBe(1);
+        const panels = errorsPanel.prop('panels');
+        expect(panels.length).toBe(1);
+        expect(panels[0].title).toBe('1 error');
+        expect(panels[0].items).toEqual([error]);
+        expect(errorsPanel.prop('ErrorComponent')).toBe(Error);
+    });
+
+    it('should render ErrorsPanel with only warning panel when there are only warning(s)', () => {
+        store.profile.errors = [warning, warning];
+        const component = shallow(<ProfileErrorsPanel />);
+        const errorsPanel = component.find(ErrorsPanel);
+        expect(errorsPanel.length).toBe(1);
+        const panels = errorsPanel.prop('panels');
+        expect(panels.length).toBe(1);
+        expect(panels[0].title).toBe('2 warnings');
+        expect(panels[0].items).toEqual([warning, warning]);
+        expect(errorsPanel.prop('ErrorComponent')).toBe(Error);
+    });
+
+    it('should toggle panels', () => {
+        store.profile.errors = [error, warning];
+        const component = shallow(<ProfileErrorsPanel />);
+        expect(component.find(ErrorsPanel).prop('expandedPanelId')).toBe(null);
+        component.find(ErrorsPanel).prop('onToggle')('error')({}, true);
+        expect(component.find(ErrorsPanel).prop('expandedPanelId')).toBe('error');
+        component.find(ErrorsPanel).prop('onToggle')('warning')({}, true);
+        expect(component.find(ErrorsPanel).prop('expandedPanelId')).toBe('warning');
+        component.find(ErrorsPanel).prop('onToggle')('warning')({}, false);
+        expect(component.find(ErrorsPanel).prop('expandedPanelId')).toBe(null);
+    });
+
+    it('should expand error panel on new errors appearing', () => {
+        store.profile.errors = [];
+        const component = mount(<ProfileErrorsPanel />);
+        expect(component.find(ErrorsPanel).length).toBe(0);
+
+        setErrors(component, [error, warning]);
+        expect(component.find(ErrorsPanel).length).toBe(1);
+        expect(component.find(ErrorsPanel).prop('expandedPanelId')).toBe('errors');
+        component.find(ErrorsPanel).prop('onToggle')('error')({}, false);
+        component.update();
+        expect(component.find(ErrorsPanel).prop('expandedPanelId')).toBe(null);
+
+        setErrors(component, [{...error, message: 'new message'}, warning]);
+        expect(component.find(ErrorsPanel).prop('expandedPanelId')).toBe('errors');
+    });
+
+    it('should not expand error panel after error deactivating', () => {
+        store.profile.errors = [];
+        const component = mount(<ProfileErrorsPanel />);
+        expect(component.find(ErrorsPanel).length).toBe(0);
+
+        setErrors(component, [error, warning]);
+        expect(component.find(ErrorsPanel).length).toBe(1);
+        expect(component.find(ErrorsPanel).prop('expandedPanelId')).toBe('errors');
+        component.find(ErrorsPanel).prop('onToggle')('error')({}, false);
+        component.update();
+        expect(component.find(ErrorsPanel).prop('expandedPanelId')).toBe(null);
+
+        setErrors(component, [{...error, deactivated: true}, warning]);
+        expect(component.find(ErrorsPanel).prop('expandedPanelId')).toBe(null);
+    });
+});

package/src/components/ProfileErrorsPanel/components/Error.tsx

@@ -0,0 +1,50 @@
+import React, {memo, useContext} from 'react';
+import i18n from 'ui-i18n';
+import {useSelector} from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+import {AttributeError, Metadata} from '@reltio/mdm-sdk';
+import HyperlinkIcon from '../icons/hyperlink.svg';
+import {SmallIconButtonWithTooltip, ScrollToElementContext} from '@reltio/components';
+import {getDisplayedAttributeTypesPath, getDisplayedErrorMessage, getDisplayedErrorPath} from '../helpers';
+
+import useStyles from '../styles';
+
+type Props = {
+    error: AttributeError;
+};
+
+export const Error = memo(({error}: Props) => {
+    const styles = useStyles();
+    const metadata: Metadata = useSelector(mdmModule.selectors.getMetadata);
+    const isEditableMode: boolean = useSelector(mdmModule.selectors.getIsEditableMode);
+    const displayedMessage = getDisplayedErrorMessage(metadata, error);
+    const displayedErrorPath = getDisplayedErrorPath(error);
+    const displayedAttributeTypesPath = getDisplayedAttributeTypesPath(error);
+    const {highlightError} = useContext(ScrollToElementContext);
+    const showLink = error.uri || (error.parentUri && error.attributeTypeUri);
+
+    return (
+        <li>
+            <div className={styles.errorWrapper}>
+                {displayedAttributeTypesPath && (
+                    <span className={styles.attributeTypesPath}>{displayedAttributeTypesPath}</span>
+                )}
+                <span className={styles.errorTitle}>
+                    {displayedMessage}
+                    {showLink && isEditableMode && (
+                        <SmallIconButtonWithTooltip
+                            icon={HyperlinkIcon}
+                            size="XXS"
+                            onClick={() => highlightError(error)}
+                            tooltipTitle={i18n.text('Go to error')}
+                            className={styles.goToIcon}
+                        />
+                    )}
+                </span>
+                {displayedErrorPath && <span className={styles.parents}>{displayedErrorPath}</span>}
+            </div>
+        </li>
+    );
+});
+
+Error.displayName = 'Error';