@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/ProfileErrorsPanel/components/ErrorsPanel.tsx

@@ -0,0 +1,65 @@
+import React, {memo, ReactNode, ElementType} from 'react';
+import classnames from 'classnames';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Typography from '@mui/material/Typography';
+
+import useStyles from '../styles';
+
+import {AttributeError} from '@reltio/mdm-sdk';
+
+type Props = {
+    panels: {
+        id: string;
+        title: string;
+        icon: ReactNode;
+        items: AttributeError[];
+        accordionClassName: string;
+        accordionDetailsClassName: string;
+    }[];
+    expandedPanelId: string;
+    onToggle: (id: string) => (e, isExpanded: boolean) => void;
+    ErrorComponent: ElementType;
+};
+
+export const ErrorsPanel = memo(({panels, expandedPanelId, onToggle, ErrorComponent}: Props) => {
+    const styles = useStyles();
+
+    return panels.length > 0 ? (
+        <div>
+            {panels.map(({id, icon, title, items, accordionClassName, accordionDetailsClassName}) => (
+                <Accordion
+                    key={id}
+                    square
+                    expanded={expandedPanelId === id}
+                    onChange={onToggle(id)}
+                    className={accordionClassName}
+                    classes={{root: styles.accordion, expanded: styles.accordionExpanded}}
+                >
+                    <AccordionSummary
+                        classes={{
+                            root: styles.accordionSummary,
+                            expanded: styles.accordionSummaryExpanded,
+                            content: styles.accordionSummaryContent
+                        }}
+                        expandIcon={<ExpandMoreIcon />}
+                    >
+                        {icon}
+                        <Typography className={styles.accordionSummaryHeading}>{title}</Typography>
+                    </AccordionSummary>
+                    <AccordionDetails className={classnames(styles.accordionDetails, accordionDetailsClassName)}>
+                        <ul>
+                            {items.map((error, i) => (
+                                <ErrorComponent key={i} error={error} />
+                            ))}
+                        </ul>
+                    </AccordionDetails>
+                </Accordion>
+            ))}
+        </div>
+    ) : null;
+});
+
+ErrorsPanel.displayName = 'ErrorsPanel';

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

@@ -0,0 +1,264 @@
+import React, * as react from 'react';
+import {shallow} from 'enzyme';
+import {act} from '@testing-library/react';
+import * as reactReduxImports from 'react-redux';
+import {SmallIconButtonWithTooltip} from '@reltio/components';
+import {AttributeValuePathItemType, ErrorPathItem, ErrorSeverity, ErrorSource, ErrorType, Mode} from '@reltio/mdm-sdk';
+
+import {Error} from '../Error';
+
+jest.mock('react', () => ({
+    ...jest.requireActual<Record<string, unknown>>('react'),
+    useContext: jest.fn().mockImplementation((f) => f())
+}));
+
+describe('Error tests', () => {
+    const createStore = (mode: Mode) => ({
+        tenant: {
+            id: 't1'
+        },
+        metadata: {
+            t1: {
+                entityTypes: [
+                    {
+                        uri: 'configuration/entityTypes/HCP',
+                        attributes: [attributeType]
+                    }
+                ]
+            }
+        },
+        profile: {
+            mode
+        }
+    });
+
+    const mockStore = (mode: Mode) =>
+        jest.spyOn(reactReduxImports, 'useSelector').mockImplementation((selector) => selector(createStore(mode)));
+
+    const highlightErrorSpy = jest.fn();
+    beforeAll(() => {
+        jest.spyOn(react, 'useContext').mockReturnValue({
+            highlightError: highlightErrorSpy
+        });
+    });
+
+    beforeEach(() => {
+        mockStore(Mode.Viewing);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const attributeType = {
+        uri: 'configuration/entityTypes/HCP/attributes/FirstName',
+        label: 'First Name',
+        name: 'FirstName',
+        type: 'String',
+        required: true
+    };
+
+    it('should render error message for validation service errors', () => {
+        const error = {
+            type: ErrorType.missed,
+            uri: null,
+            attributeType,
+            attributeTypeUri: 'configuration/entityTypes/HCP/attributes/Name',
+            parentUri: 'entities/123',
+            message: 'Error 1',
+            severity: ErrorSeverity.ERROR,
+            source: ErrorSource.validationService,
+            path: []
+        };
+        const component = shallow(<Error error={error} />);
+        expect(component.text()).toBe('Error 1');
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(0);
+    });
+
+    it('should render error message for local errors', () => {
+        const error = {
+            type: ErrorType.invalid,
+            uri: 'entities/123/attributes/Name/1',
+            attributeType,
+            attributeTypeUri: 'configuration/entityTypes/HCP/attributes/Name',
+            parentUri: 'entities/123',
+            message: 'Error 1',
+            severity: ErrorSeverity.ERROR,
+            source: ErrorSource.local,
+            path: []
+        };
+        const component = shallow(<Error error={error} />);
+        expect(component.text()).toBe('Error 1');
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(0);
+    });
+
+    it('should render special message with attribute type label for local missed errors', () => {
+        const error = {
+            type: ErrorType.missed,
+            uri: null,
+            attributeType,
+            attributeTypeUri: attributeType.uri,
+            parentUri: 'entities/123',
+            message: 'Attribute is required',
+            source: ErrorSource.local,
+            path: []
+        };
+        const component = shallow(<Error error={error} />);
+        expect(component.text()).toBe('First Name is required');
+    });
+
+    it('should render special message with attribute type label for local missed errors even if attributeType is not defined', () => {
+        const error = {
+            type: ErrorType.missed,
+            uri: null,
+            attributeType: null,
+            attributeTypeUri: attributeType.uri,
+            parentUri: 'entities/123',
+            message: 'Attribute is required',
+            source: ErrorSource.local,
+            path: []
+        };
+        const component = shallow(<Error error={error} />);
+        expect(component.text()).toBe('First Name is required');
+    });
+
+    it('should render parents path for missed errors if error.path is defined', () => {
+        const error = {
+            type: ErrorType.missed,
+            uri: null,
+            attributeType,
+            attributeTypeUri: 'configuration/entityTypes/HCP/attributes/Name',
+            parentUri: 'entities/uri$$123',
+            message: 'Error 1_',
+            severity: ErrorSeverity.ERROR,
+            source: ErrorSource.validationService,
+            path: [
+                {
+                    type: AttributeValuePathItemType.relationConnection,
+                    label: 'Connection 1'
+                },
+                {
+                    type: AttributeValuePathItemType.tempEntity,
+                    label: 'Temp Entity 1'
+                },
+                {
+                    type: AttributeValuePathItemType.attributeValue,
+                    label: 'Reference 1'
+                },
+                {
+                    type: AttributeValuePathItemType.tempEntity,
+                    label: 'Temp Entity 2'
+                },
+                {
+                    type: AttributeValuePathItemType.attributeValue,
+                    label: 'Name1'
+                }
+            ] as ErrorPathItem[]
+        };
+        const component = shallow(<Error error={error} />);
+        expect(component.text()).toBe('Error 1_Connection 1 / Reference 1 / Name1');
+    });
+
+    it('should render attribute types path for errors if error.path is defined', () => {
+        const error = {
+            type: ErrorType.missed,
+            uri: null,
+            attributeType,
+            attributeTypeUri: 'configuration/entityTypes/HCP/attributes/Name',
+            parentUri: 'entities/uri$$123',
+            message: 'Error 1_',
+            severity: ErrorSeverity.ERROR,
+            source: ErrorSource.validationService,
+            path: [
+                {
+                    type: AttributeValuePathItemType.relationConnection,
+                    label: 'Connection 1',
+                    valueType: {label: 'Relation Type 1'}
+                },
+                {
+                    type: AttributeValuePathItemType.tempEntity,
+                    label: 'Temp Entity 1',
+                    valueType: {label: 'Entity Type 1'}
+                },
+                {
+                    type: AttributeValuePathItemType.attributeValue,
+                    label: 'Reference 1',
+                    valueType: {name: 'ReferenceType1'}
+                },
+                {
+                    type: AttributeValuePathItemType.tempEntity,
+                    label: 'Temp Entity 2',
+                    valueType: {label: 'Entity Type 2'}
+                },
+                {
+                    type: AttributeValuePathItemType.attributeValue,
+                    label: 'Name1',
+                    valueType: {label: 'Name Type 1__', name: 'NameType1'}
+                }
+            ] as ErrorPathItem[]
+        };
+        const component = shallow(<Error error={error} />);
+        expect(component.text()).toBe('ReferenceType1 > Name Type 1__Error 1_Connection 1 / Reference 1 / Name1');
+    });
+
+    it('should render parents path for invalid errors if error.path is defined', () => {
+        const error = {
+            type: ErrorType.invalid,
+            uri: 'some uri',
+            attributeType,
+            attributeTypeUri: 'configuration/entityTypes/HCP/attributes/Name',
+            parentUri: 'entities/uri$$123',
+            message: 'Error 1_',
+            severity: ErrorSeverity.ERROR,
+            source: ErrorSource.validationService,
+            path: [
+                {
+                    type: AttributeValuePathItemType.relationConnection,
+                    label: 'Connection 1'
+                },
+                {
+                    type: AttributeValuePathItemType.tempEntity,
+                    label: 'Temp Entity 1'
+                },
+                {
+                    type: AttributeValuePathItemType.attributeValue,
+                    label: 'Reference 1'
+                },
+                {
+                    type: AttributeValuePathItemType.tempEntity,
+                    label: 'Temp Entity 2'
+                },
+                {
+                    type: AttributeValuePathItemType.attributeValue,
+                    label: 'Name1'
+                }
+            ] as ErrorPathItem[]
+        };
+        const component = shallow(<Error error={error} />);
+        expect(component.text()).toBe('Error 1_Connection 1 / Reference 1');
+    });
+
+    it('should render button when editing mode and correct error', () => {
+        mockStore(Mode.Editing);
+        const error = {
+            type: ErrorType.invalid,
+            uri: 'some uri',
+            attributeType,
+            attributeTypeUri: 'configuration/entityTypes/HCP/attributes/Name',
+            parentUri: 'entities/uri$$123',
+            message: 'Error 1_',
+            severity: ErrorSeverity.ERROR,
+            source: ErrorSource.validationService,
+            path: []
+        };
+        const component = shallow(<Error error={error} />);
+        expect(component.text()).toBe('Error 1_');
+        const button = component.find(SmallIconButtonWithTooltip);
+        expect(button).toHaveLength(1);
+        expect(button.prop('tooltipTitle')).toBe('Go to error');
+        act(() => {
+            button.simulate('click');
+        });
+        expect(highlightErrorSpy).toBeCalledWith(error);
+    });
+});

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+import {AttributeError, ErrorSeverity, ErrorSource, ErrorType} from '@reltio/mdm-sdk';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+
+import {ErrorsPanel} from '../ErrorsPanel';
+
+describe('ErrorsPanel tests', () => {
+    const ErrorIcon = () => <div>ErrorIcon_</div>;
+    const WarningIcon = () => <div>WarningIcon_</div>;
+    const TestError = ({error}: {error: AttributeError}) => <div>{error.message}</div>;
+
+    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: []
+    };
+
+    const defaultProps = {
+        panels: [
+            {
+                id: 'errors',
+                title: 'Errors Title',
+                icon: <ErrorIcon />,
+                items: [error, error],
+                accordionClassName: 'errorAccordion',
+                accordionDetailsClassName: 'errorAccordionDetails'
+            },
+            {
+                id: 'warnings',
+                title: 'Warnings Title',
+                icon: <WarningIcon />,
+                items: [warning],
+                accordionClassName: 'warningAccordion',
+                accordionDetailsClassName: 'warningAccordionDetails'
+            }
+        ],
+        expandedPanelId: null,
+        onToggle: jest.fn(),
+        ErrorComponent: TestError
+    };
+
+    it('should render nothing if there are no panels', () => {
+        const props = {
+            ...defaultProps,
+            panels: []
+        };
+        const component = shallow(<ErrorsPanel {...props} />);
+        expect(component.isEmptyRender()).toBe(true);
+    });
+
+    it('should render panels as accordions', () => {
+        const props = {
+            ...defaultProps
+        };
+        const component = mount(<ErrorsPanel {...props} />);
+        const panels = component.find(Accordion);
+        expect(panels.length).toBe(2);
+        expect(panels.at(0).prop('className')).toBe(props.panels[0].accordionClassName);
+        expect(panels.at(0).find(AccordionSummary).length).toBe(1);
+        expect(panels.at(0).find(AccordionSummary).text()).toBe('ErrorIcon_Errors Title');
+        const errorsDetails = panels.at(0).find(AccordionDetails);
+        expect(errorsDetails.length).toBe(1);
+        expect(errorsDetails.prop('className').includes(props.panels[0].accordionDetailsClassName)).toBe(true);
+        expect(errorsDetails.text()).toBe('Error 1Error 1');
+
+        expect(panels.at(1).prop('className')).toBe(props.panels[1].accordionClassName);
+        expect(panels.at(1).find(AccordionSummary).length).toBe(1);
+        expect(panels.at(1).find(AccordionSummary).text()).toBe('WarningIcon_Warnings Title');
+        expect(panels.at(1).find(AccordionDetails).length).toBe(1);
+        const warningsDetails = panels.at(1).find(AccordionDetails);
+        expect(warningsDetails.length).toBe(1);
+        expect(warningsDetails.prop('className').includes(props.panels[1].accordionDetailsClassName)).toBe(true);
+        expect(warningsDetails.text()).toBe('Warning 1');
+    });
+});

package/src/components/ProfileErrorsPanel/helpers.ts

@@ -0,0 +1,45 @@
+import {either, equals, identity, omit, path} from 'ramda';
+import i18n from 'ui-i18n';
+import {
+    AttributeError,
+    AttributeType,
+    AttributeValuePathItemType,
+    ErrorSource,
+    ErrorType,
+    findAttributeTypeByUri,
+    Metadata
+} from '@reltio/mdm-sdk';
+
+const clearError = omit(['deactivated', 'path']);
+export const areErrorsEqual = (errors1: AttributeError[] = [], errors2: AttributeError[] = []) =>
+    errors1.length === errors2.length && equals(errors1.map(clearError), errors2.map(clearError));
+
+export const getDisplayedErrorMessage = (
+    metadata: Metadata,
+    {type, source, message, attributeTypeUri = '', attributeType}: AttributeError
+) => {
+    if (type === ErrorType.missed && source === ErrorSource.local) {
+        const attrType: AttributeType = attributeType || findAttributeTypeByUri(metadata, attributeTypeUri);
+        return attrType ? i18n.text('${attribute} is required', {attribute: attrType.label}) : message;
+    }
+    return message;
+};
+
+export const getDisplayedErrorPath = ({path: errorPath, uri}: AttributeError) => {
+    return errorPath
+        ?.slice(0, uri ? errorPath.length - 1 : errorPath.length)
+        .filter(({type}) =>
+            [AttributeValuePathItemType.attributeValue, AttributeValuePathItemType.relationConnection].includes(type)
+        )
+        .map(({label}) => label)
+        .filter(identity)
+        .join(' / ');
+};
+
+export const getDisplayedAttributeTypesPath = ({path: errorPath}: AttributeError) => {
+    return errorPath
+        ?.filter(({type}) => type === AttributeValuePathItemType.attributeValue)
+        .map(either(path(['valueType', 'label']), path(['valueType', 'name'])))
+        .filter(identity)
+        .join(' > ');
+};

package/src/components/ProfileErrorsPanel/icons/hyperlink.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2448 12.75C14.2448 13.575 13.7775 14.25 13.2 14.25H4.8C4.21725 14.25 3.75 13.575 3.75 12.75V5.25C3.75 4.4175 4.21725 3.75 4.8 3.75H13.2C13.7775 3.75 14.25 4.4175 14.25 5.25L14.2448 12.75ZM9.75 9.96V11.6025L12.75 8.7975L9.75 6V7.5975C6.8325 8.0025 5.67 9.9975 5.25 12C6.2925 10.5975 7.665 9.96 9.75 9.96Z" fill="black" fill-opacity="0.54"/>
+</svg>

package/src/components/ProfileErrorsPanel/index.ts

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

package/src/components/ProfileErrorsPanel/styles.ts

@@ -0,0 +1,100 @@
+import {makeStyles} from '@mui/styles';
+
+const accordionSummaryHeight = '48px';
+const defaultBorderStyle = '1px solid rgba(0, 0, 0, .125)';
+
+const useStyles = makeStyles((theme) => ({
+    accordion: {
+        borderTop: defaultBorderStyle,
+        borderBottom: defaultBorderStyle,
+        fontSize: '13px',
+        boxShadow: 'none',
+        '&:not(:first-child)': {
+            borderTop: 0
+        },
+        '&:before': {
+            display: 'none'
+        },
+        '&$accordionExpanded': {
+            margin: 'auto'
+        }
+    },
+    accordionExpanded: {},
+    accordionSummary: {
+        display: 'flex',
+        alignItems: 'center',
+        height: accordionSummaryHeight,
+        minHeight: accordionSummaryHeight,
+        '&$accordionSummaryExpanded': {
+            height: accordionSummaryHeight,
+            minHeight: accordionSummaryHeight
+        }
+    },
+    accordionSummaryHeading: {
+        flex: 1,
+        fontSize: theme.typography.pxToRem(13),
+        fontWeight: theme.typography.fontWeightRegular
+    },
+    accordionSummaryExpanded: {},
+    accordionSummaryContent: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    accordionDetails: {
+        maxHeight: '21vh',
+        overflow: 'auto',
+        paddingTop: 0,
+        paddingBottom: 0,
+        '& ul': {
+            paddingLeft: '23px',
+            marginTop: '3px'
+        },
+        '& li': {
+            paddingLeft: '9px',
+            paddingBottom: '8px'
+        }
+    },
+    parents: {
+        color: theme.palette.text.primary
+    },
+    errorWrapper: {
+        lineHeight: '18px',
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    errorTitle: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    attributeTypesPath: {
+        color: theme.palette.text.secondary
+    },
+    goToIcon: {
+        marginLeft: '4px'
+    },
+    errorsAccordion: {
+        backgroundColor: '#FFF4F6',
+        borderColor: '#FFB8B3'
+    },
+    errorsAccordionDetails: {
+        color: '#DD2C00'
+    },
+    warningsAccordion: {
+        backgroundColor: '#FFF9ED',
+        borderColor: '#FFDD91'
+    },
+    warningsAccordionDetails: {
+        color: '#CC7500'
+    },
+    icon: {
+        marginRight: '8px'
+    },
+    errorIcon: {
+        fill: '#FF1744'
+    },
+    warningIcon: {
+        fill: '#F9A825'
+    }
+}));
+
+export default useStyles;

package/src/components/ProfileErrorsPanel/useCachedErrors.ts

@@ -0,0 +1,11 @@
+import {useRef} from 'react';
+import {areErrorsEqual} from './helpers';
+
+export const useCachedErrors = (allErrors) => {
+    const cacheForAllErrors = useRef(allErrors);
+    const areEqualErrors = areErrorsEqual(allErrors, cacheForAllErrors.current);
+    if (!areEqualErrors) {
+        cacheForAllErrors.current = allErrors;
+    }
+    return cacheForAllErrors.current;
+};

package/src/components/ProfileLayout/ProfileLayout.tsx

@@ -0,0 +1,56 @@
+import React, {useEffect, useMemo, useRef} from 'react';
+import {PopupBoundariesContext, ReltioGridLayout} from '@reltio/components';
+import {ProfileViewConfig} from '@reltio/mdm-sdk';
+import {ProfileLayoutItem} from '../ProfileLayoutItem';
+import {Layout} from '../../types';
+
+import {useStyles} from './styles';
+
+type Props = {
+    views: ProfileViewConfig[];
+    layout?: Layout;
+    frozen?: boolean;
+    entityUri?: string;
+    maxWidth?: number;
+    onLayoutChanged: (layout: Layout) => void;
+};
+
+const calcScrollbarWidth = (element: HTMLDivElement) => (element ? element.offsetWidth - element.clientWidth : 0);
+
+const ProfileLayout = ({views, layout, frozen, entityUri, maxWidth, onLayoutChanged}: Props) => {
+    const scrollWrapperRef = useRef<HTMLDivElement>();
+    const scrollbarWidth = calcScrollbarWidth(scrollWrapperRef.current);
+    const boundariesElement = scrollWrapperRef.current;
+
+    const styles = useStyles({maxWidth, scrollbarWidth});
+
+    const popupBoundariesValue = useMemo(
+        () => ({element: boundariesElement, priority: ['left', 'right', 'top', 'bottom']}),
+        [boundariesElement]
+    );
+
+    useEffect(() => {
+        if (scrollWrapperRef.current) {
+            scrollWrapperRef.current.scrollTop = 0;
+        }
+    }, [entityUri]);
+
+    return (
+        <div ref={scrollWrapperRef} className={styles.scrollWrapper}>
+            <div className={styles.scrollableContent} data-reltio-id="reltio-profile-grid">
+                <PopupBoundariesContext.Provider value={popupBoundariesValue}>
+                    <ReltioGridLayout
+                        LayoutItem={ProfileLayoutItem}
+                        views={views}
+                        layout={layout}
+                        onLayoutChanged={onLayoutChanged}
+                        draggableHandle=".viewDraggableHandle"
+                        isStatic={frozen}
+                    />
+                </PopupBoundariesContext.Provider>
+            </div>
+        </div>
+    );
+};
+
+export {ProfileLayout};