@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/ProfileSingleAttributeView/components/SingleAttributeEditableContent/__tests__/SingleAttributeEditableContent.specs.tsx

@@ -0,0 +1,559 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import * as reactReduxImports from 'react-redux';
+import * as componentsImport from '@reltio/components';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import {AttributeError, AttributeItem, ErrorType, Mode} from '@reltio/mdm-sdk';
+import {profile} from '@reltio/mdm-module';
+import {
+    CardinalityMessage,
+    EditableAttribute,
+    ErrorMessage,
+    ScrollType,
+    ScrollToElementContext
+} from '@reltio/components';
+import SingleAttributeEditableContent from '../SingleAttributeEditableContent';
+
+jest.mock('@reltio/components', () => ({
+    ...(jest.requireActual('@reltio/components') as Record<string, unknown>),
+    EditableAttribute: () => null,
+    useScrollToAttributeError: jest.fn()
+}));
+
+describe('SingleAttributeEditableContent tests', () => {
+    let store;
+    const dispatch = jest.fn();
+    const attributeType = {
+        uri: 'configuration/entityTypes/HCP/attributes/Simple',
+        type: 'String',
+        name: 'Simple',
+        label: 'Simple label'
+    };
+    const values = [
+        {
+            type: attributeType.uri,
+            uri: 'entities/sIeHttl/attributes/Simple/u123',
+            value: '123',
+            ov: true
+        },
+        {
+            type: attributeType.uri,
+            uri: 'entities/sIeHttl/attributes/Simple/u456',
+            value: '456',
+            ov: false
+        }
+    ];
+
+    const entityUri = 'entities/sIeHttl';
+    const defaultProps = {
+        attributeType,
+        values,
+        parentUri: entityUri,
+        showInactive: false,
+        noDataText: 'No data found'
+    };
+    const crosswalks = [{}];
+
+    const scrollToAttributeError = {
+        ref: React.createRef() as React.MutableRefObject<HTMLDivElement>,
+        errorClassName: 'errorClassName',
+        path: []
+    };
+    const useScrollToAttributeErrorSpy = jest.spyOn(componentsImport, 'useScrollToAttributeError');
+
+    beforeEach(() => {
+        store = {
+            tenant: {
+                id: 't1'
+            },
+            metadata: {
+                t1: {
+                    entityTypes: [],
+                    relationTypes: [
+                        {
+                            uri: 'configuration/relationTypes/relation',
+                            label: 'Relation'
+                        }
+                    ]
+                }
+            },
+            profile: {
+                mode: Mode.Editing,
+                entity: {
+                    uri: entityUri,
+                    attributes: {
+                        Simple: [...values]
+                    },
+                    crosswalks
+                },
+                modifiedEntities: {
+                    [entityUri]: {
+                        uri: entityUri,
+                        attributes: {
+                            Simple: [...values]
+                        },
+                        crosswalks
+                    }
+                },
+                errors: []
+            }
+        };
+        jest.spyOn(reactReduxImports, 'useSelector').mockImplementation((selector) => selector(store));
+        jest.spyOn(reactReduxImports, 'useDispatch').mockImplementation(() => dispatch);
+        useScrollToAttributeErrorSpy.mockReturnValue(scrollToAttributeError);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const findAddButton = (component) => component.find(Button).filterWhere((button) => button.text() === 'Add');
+
+    const highlightErrorSpy = jest.fn();
+    const scrollIntoRefSpy = jest.fn();
+
+    const setUp = (props, error: AttributeError | null = null) => {
+        return mount(
+            <ScrollToElementContext.Provider
+                value={{
+                    element: error,
+                    highlightError: highlightErrorSpy,
+                    scrollIntoRef: scrollIntoRefSpy,
+                    type: ScrollType.Error
+                }}
+            >
+                <SingleAttributeEditableContent {...props} />
+            </ScrollToElementContext.Provider>
+        );
+    };
+
+    it('should render main parts', () => {
+        const component = setUp(defaultProps);
+        expect(component.find(CardinalityMessage).length).toBe(1);
+        expect(component.find(ErrorMessage).length).toBe(1);
+        expect(findAddButton(component).length).toBe(1);
+        expect(component.find(Divider).length).toBe(0);
+        expect(component.find(EditableAttribute).length).toBe(2);
+    });
+
+    it('should render Divider if there are both existing and new values', () => {
+        store.profile.modifiedEntities[entityUri].attributes.Simple = [
+            {
+                type: attributeType.uri,
+                uri: 'entities/sIeHttl/attributes/Simple/uri$$123',
+                value: '123',
+                ov: true
+            }
+        ];
+        const component = setUp(defaultProps);
+        expect(component.find(CardinalityMessage).length).toBe(1);
+        expect(component.find(ErrorMessage).length).toBe(1);
+        expect(findAddButton(component).length).toBe(1);
+        expect(component.find(Divider).length).toBe(1);
+        expect(component.find(EditableAttribute).length).toBe(3);
+    });
+
+    it('should set correct props for EditableAttribute component (new attributes section)', () => {
+        const newVales = [
+            {
+                type: attributeType.uri,
+                uri: 'entities/sIeHttl/attributes/Simple/uri$$123',
+                value: '123',
+                ov: true
+            },
+            {
+                type: attributeType.uri,
+                uri: 'entities/sIeHttl/attributes/Simple/uri$$456',
+                value: '456',
+                ov: true
+            }
+        ];
+        store.profile.modifiedEntities[entityUri].attributes.Simple = newVales;
+        store.profile.errors = [
+            {
+                parentUri: defaultProps.parentUri,
+                uri: newVales[1].uri,
+                attributeTypeUri: attributeType.uri,
+                message: 'Attribute is invalid',
+                type: ErrorType.invalid
+            }
+        ];
+        const props = {
+            ...defaultProps,
+            values: []
+        };
+        const component = setUp(props);
+        expect(component.find(Divider).length).toBe(0);
+        const attributes = component.find(EditableAttribute);
+        expect(attributes.length).toBe(2);
+        attributes.forEach((attribute, i) => {
+            expect(attribute.prop('attributeValue')).toBe(newVales[i]);
+            expect(attribute.prop('attributeType')).toBe(props.attributeType);
+            expect(attribute.prop('lazy')).toBeFalsy();
+            expect(attribute.prop('showEmptyEditors')).toBeFalsy();
+            expect(attribute.prop('mode')).toBe(store.profile.mode);
+            expect(attribute.prop('crosswalks')).toBe(crosswalks);
+            expect(attribute.prop('errors')).toEqual(store.profile.errors);
+            expect(attribute.prop('ownError')).toBe(i === 1 ? store.profile.errors[0] : undefined);
+            expect(attribute.prop('state')).toBeUndefined();
+            expect(attribute.prop('onDeleteAttribute')).toEqual(expect.any(Function));
+            expect(attribute.prop('onAddAttributes')).toEqual(expect.any(Function));
+            expect(attribute.prop('onChangeAttribute')).toEqual(expect.any(Function));
+            expect(attribute.prop('onDeactivateError')).toEqual(expect.any(Function));
+        });
+    });
+
+    it('should set correct props for EditableAttribute component (existing attributes section)', () => {
+        store.profile.errors = [
+            {
+                parentUri: defaultProps.parentUri,
+                uri: values[1].uri,
+                attributeTypeUri: attributeType.uri,
+                message: 'Attribute is invalid',
+                type: ErrorType.invalid
+            }
+        ];
+        const component = setUp(defaultProps);
+        const attributes = component.find(EditableAttribute);
+        expect(attributes.length).toBe(2);
+        attributes.forEach((attribute, i) => {
+            expect(attribute.prop('attributeValue')).toBe(defaultProps.values[i]);
+            expect(attribute.prop('attributeType')).toBe(defaultProps.attributeType);
+            expect(attribute.prop('lazy')).toBeFalsy();
+            expect(attribute.prop('showEmptyEditors')).toBeFalsy();
+            expect(attribute.prop('mode')).toBe(store.profile.mode);
+            expect(attribute.prop('crosswalks')).toBe(crosswalks);
+            expect(attribute.prop('errors')).toEqual(store.profile.errors);
+            expect(attribute.prop('ownError')).toBe(i === 1 ? store.profile.errors[0] : undefined);
+            expect(attribute.prop('state')).toBeUndefined();
+            expect(attribute.prop('onDeleteAttribute')).toEqual(expect.any(Function));
+            expect(attribute.prop('onAddAttributes')).toEqual(expect.any(Function));
+            expect(attribute.prop('onChangeAttribute')).toEqual(expect.any(Function));
+            expect(attribute.prop('onDeactivateError')).toEqual(expect.any(Function));
+        });
+    });
+
+    it('should set correct "state" (edited/deleted) prop for EditableAttribute component (existing attributes section)', () => {
+        store.profile.modifiedEntities[entityUri].attributes.Simple[1] = {
+            ...store.profile.modifiedEntities[entityUri].attributes.Simple[1],
+            value: '42'
+        };
+        store.profile.modifiedEntities[entityUri].attributes.Simple =
+            store.profile.modifiedEntities[entityUri].attributes.Simple.slice(1);
+
+        const component = setUp(defaultProps);
+        const attributes = component.find(EditableAttribute);
+        expect(attributes.length).toBe(2);
+        attributes.forEach((attribute, i) => {
+            expect(attribute.prop('state')).toBe(i === 0 ? 'deleted' : 'edited');
+        });
+    });
+
+    it('should dispatch correct actions on EditableAttribute component callback props calling (existing attributes section)', () => {
+        const component = setUp(defaultProps);
+        const attributes = component.find(EditableAttribute);
+        expect(attributes.length).toBe(2);
+        attributes.forEach((attribute, i) => {
+            const onDeleteAttribute = attribute.prop('onDeleteAttribute') as (param: AttributeItem) => void;
+            onDeleteAttribute({
+                attributeType,
+                uri: values[i].uri
+            });
+            expect(dispatch).toHaveBeenCalledWith(
+                profile.actions.removeAttribute({
+                    attributeType,
+                    uri: values[i].uri,
+                    viewId: null
+                })
+            );
+
+            const onChangeAttribute = attribute.prop('onChangeAttribute') as (param: AttributeItem) => void;
+            onChangeAttribute({
+                attributeType,
+                uri: values[i].uri,
+                value: '12345'
+            });
+            expect(dispatch).toHaveBeenCalledWith(
+                profile.actions.modifyAttribute({
+                    attributeType,
+                    uri: values[i].uri,
+                    value: '12345',
+                    viewId: null
+                })
+            );
+
+            const onAddAttributes = attribute.prop('onAddAttributes') as (params: AttributeItem[]) => void;
+            onAddAttributes([
+                {
+                    attributeType,
+                    parentUri: entityUri
+                }
+            ]);
+            expect(dispatch).toHaveBeenCalledWith(
+                profile.actions.addAttributes([
+                    {
+                        attributeType,
+                        parentUri: entityUri,
+                        viewId: null
+                    }
+                ])
+            );
+
+            const onDeactivateError = attribute.prop('onDeactivateError') as (param: string) => void;
+            onDeactivateError('id');
+            expect(dispatch).toHaveBeenCalledWith(profile.errors.actions.errorDeactivated('id'));
+        });
+    });
+
+    it('should display type-related error inside ErrorMessage component', () => {
+        store.profile.errors = [
+            {
+                parentUri: defaultProps.parentUri,
+                uri: '',
+                attributeTypeUri: attributeType.uri,
+                message: 'Cardinality error',
+                type: 'invalid'
+            }
+        ];
+        const component = setUp(defaultProps);
+        expect(component.find(ErrorMessage).prop('message')).toBe('Cardinality error');
+    });
+
+    it('should map "missed" error with appropriate attributeTypeUri to first special "empty" attribute value (new attributes section)', () => {
+        const attributeType = {
+            uri: 'configuration/entityTypes/HCP/attributes/Simple',
+            type: 'String',
+            name: 'Simple',
+            label: 'Simple label',
+            required: true
+        };
+        const entityUri = 'entities/uri$$e1';
+        store.profile.entity = {
+            ...store.profile.entity,
+            uri: entityUri,
+            attributes: {}
+        };
+        store.profile.modifiedEntities[entityUri] = {
+            attributes: {}
+        };
+        store.profile.errors = [
+            {
+                parentUri: entityUri,
+                uri: '',
+                attributeTypeUri: attributeType.uri,
+                message: 'Attribute is invalid',
+                type: ErrorType.invalid
+            },
+            {
+                parentUri: entityUri,
+                uri: '',
+                attributeTypeUri: attributeType.uri,
+                message: 'Attribute is required',
+                type: ErrorType.missed
+            }
+        ];
+        const props = {
+            ...defaultProps,
+            values: [],
+            parentUri: entityUri,
+            attributeType
+        };
+        const component = setUp(props);
+        expect(component.find(EditableAttribute).prop('ownError')).toBe(store.profile.errors[1]);
+    });
+
+    it('should not render special "empty" attribute if there are no values in modified entity and entity is temporary', () => {
+        const entityUri = 'entities/uri$$e1';
+        store.profile.entity = {
+            ...store.profile.entity,
+            uri: entityUri,
+            attributes: {}
+        };
+        store.profile.modifiedEntities[entityUri] = {
+            attributes: {}
+        };
+        const props = {
+            ...defaultProps,
+            values: [],
+            parentUri: entityUri,
+            attributeType
+        };
+        const component = setUp(props);
+        const attribute = component.find(EditableAttribute);
+        expect(attribute.length).toBe(0);
+    });
+
+    it('should render special "empty" attribute if there are no values in modified entity and attribute is required', () => {
+        const props = {
+            ...defaultProps,
+            attributeType: {
+                ...attributeType,
+                required: true
+            },
+            values: []
+        };
+        store.profile.modifiedEntities[entityUri] = {
+            attributes: {}
+        };
+        const component = setUp(props);
+        const attribute = component.find(EditableAttribute);
+        expect(attribute.length).toBe(1);
+        expect(attribute.prop('attributeValue')).toEqual({
+            type: attributeType.uri,
+            uri: expect.stringContaining(`${entityUri}/attributes/Simple/uri$$`),
+            value: '',
+            ov: true
+        });
+    });
+
+    it('should not render Add button if there is no CREATE permission', () => {
+        const props = {
+            ...defaultProps,
+            attributeType: {
+                ...attributeType,
+                access: ['READ', 'UPDATE']
+            },
+            values: []
+        };
+        const component = setUp(props);
+        expect(findAddButton(component).length).toBe(0);
+    });
+
+    it('should add 2 attributes on Add button click if there is simple "empty" attribute value', () => {
+        const props = {
+            ...defaultProps,
+            attributeType: {
+                ...attributeType,
+                required: true
+            },
+            values: []
+        };
+        store.profile.modifiedEntities[entityUri] = {
+            attributes: {}
+        };
+        const component = setUp(props);
+        expect(component.find(EditableAttribute).length).toBe(1);
+        findAddButton(component).prop('onClick')();
+        expect(dispatch).toHaveBeenCalledTimes(1);
+        expect(dispatch).toHaveBeenCalledWith(
+            profile.actions.addAttributes([
+                {
+                    parentUri: props.parentUri,
+                    attributeType: props.attributeType,
+                    viewId: null
+                },
+                {
+                    parentUri: props.parentUri,
+                    attributeType: props.attributeType,
+                    viewId: null
+                }
+            ])
+        );
+    });
+
+    it('should add 1 attribute on Add button click if there are no values', () => {
+        const props = {
+            ...defaultProps,
+            values: []
+        };
+        store.profile.modifiedEntities[entityUri] = {
+            attributes: {}
+        };
+        const component = setUp(props);
+        expect(component.find(EditableAttribute).length).toBe(0);
+        findAddButton(component).prop('onClick')();
+        expect(dispatch).toHaveBeenCalledTimes(1);
+        expect(dispatch).toHaveBeenCalledWith(
+            profile.actions.addAttributes([
+                {
+                    parentUri: props.parentUri,
+                    attributeType: props.attributeType,
+                    viewId: null
+                }
+            ])
+        );
+    });
+
+    it('should add 1 attribute on Add button click if there is Nested "empty" attribute value', () => {
+        const props = {
+            ...defaultProps,
+            attributeType: {
+                ...attributeType,
+                type: 'Nested',
+                required: true
+            },
+            values: []
+        };
+        store.profile.modifiedEntities[entityUri] = {
+            attributes: {}
+        };
+        const component = setUp(props);
+        expect(component.find(EditableAttribute).length).toBe(1);
+        findAddButton(component).prop('onClick')();
+        expect(dispatch).toHaveBeenCalledTimes(1);
+        expect(dispatch).toHaveBeenCalledWith(
+            profile.actions.addAttributes([
+                {
+                    parentUri: props.parentUri,
+                    attributeType: props.attributeType,
+                    viewId: null
+                }
+            ])
+        );
+    });
+
+    it('should set correct class name for attribute wrapper if ov:false', () => {
+        const component = setUp(defaultProps);
+        expect(component.find('div.ovFalse').length).toBe(1);
+    });
+
+    it('should render "No data found" if there are no values and new values', () => {
+        const props = {
+            ...defaultProps,
+            values: []
+        };
+        const component = setUp(props);
+        const attributes = component.find(EditableAttribute);
+        expect(attributes.length).toBe(0);
+        expect(component.find('p.noData').text()).toBe('No data found');
+    });
+
+    describe('useScrollToAttributeError tests', () => {
+        const fullError = {
+            type: 'invalid',
+            attributeTypeUri: attributeType.uri,
+            parentUri: defaultProps.parentUri,
+            uri: 'entities/sIeHttl/attributes/Address',
+            source: 'validationService',
+            severity: 'ERROR'
+        } as AttributeError;
+        it('should not highlight error if it have uri', () => {
+            const component = setUp(defaultProps, fullError);
+            expect(component.find('SingleAttributeEditableContent').prop('highlightedError')).toBe(null);
+            expect(useScrollToAttributeErrorSpy.mock.calls[0][0]).toMatchObject({
+                highlightedError: null
+            });
+        });
+        it('should highlight error if it have same parent uri, empty uri, and attribute type uri', () => {
+            const error = {...fullError, uri: ''};
+            const component = setUp(defaultProps, error);
+            const highlightedError = {
+                element: error,
+                highlightError: highlightErrorSpy,
+                scrollIntoRef: scrollIntoRefSpy,
+                type: ScrollType.Error
+            };
+            expect(component.find('SingleAttributeEditableContent').prop('highlightedError')).toMatchObject(
+                highlightedError
+            );
+            expect(useScrollToAttributeErrorSpy.mock.calls[0][0]).toMatchObject({highlightedError});
+        });
+    });
+
+    it('should render nothing if there is no modified entity in store', () => {
+        store.profile.modifiedEntities = {};
+        const component = setUp(defaultProps);
+        expect(component.find('SingleAttributeEditableContent').children()).toHaveLength(0);
+    });
+});

package/src/components/ProfileSingleAttributeView/components/SingleAttributeEditableContent/styles.ts

@@ -0,0 +1,28 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    moreButton: {
+        padding: '9px 16px 9px 12px',
+        backgroundColor: 'rgba(98, 2, 238, 0)',
+        marginBottom: '4px'
+    },
+    buttonLabel: {
+        fontSize: '14px',
+        fontWeight: 500,
+        lineHeight: '16px'
+    },
+    icon: {
+        fontSize: '18px',
+        marginRight: '8px'
+    },
+    divider: {
+        margin: '0 -16px 8px',
+        borderColor: 'rgba(0,0,0,0.12)'
+    },
+    ovFalse: theme.inactive,
+    noData: {
+        fontSize: '13px',
+        color: theme.palette.text.secondary,
+        padding: '8px 16px 8px 0'
+    }
+}));

package/src/components/ProfileSingleAttributeView/components/SingleAttributeHeader/SingleAttributeHeader.tsx

@@ -0,0 +1,58 @@
+import React, {useContext} from 'react';
+import i18n from 'ui-i18n';
+import {
+    FacetViewHeader,
+    HideOnShrink,
+    ExpandableSearchInput,
+    VerticalDivider,
+    OvIcon,
+    DescriptionIcon,
+    RequiredMark
+} from '@reltio/components';
+import Typography from '@mui/material/Typography';
+import {SingleAttributeContext} from '../../contexts/SingleAttributeContext';
+import FilterButton from '../FilterButton/FilterButton';
+import {useStyles} from './styles';
+
+type Props = {
+    caption: string;
+    totalVisibleValues: number;
+    showInactiveValuesMenu: boolean;
+    isEditableMode: boolean;
+};
+
+export const SingleAttributeHeader = ({caption, totalVisibleValues, showInactiveValuesMenu, isEditableMode}: Props) => {
+    const styles = useStyles();
+
+    const {searchQuery, setSearchQuery, setPage, totalNonVisibleValues, nonVisibleValues, attributeType} =
+        useContext(SingleAttributeContext);
+
+    const handleChangeSearchQuery = (query: string) => {
+        setSearchQuery(query);
+        setPage(0);
+    };
+    const showRequiredMark = isEditableMode && attributeType?.required;
+    return (
+        <FacetViewHeader title={caption} className={styles.root}>
+            {showRequiredMark && <RequiredMark />}
+            <DescriptionIcon description={attributeType?.description} />
+            <HideOnShrink widthToHide={500}>
+                <VerticalDivider height={24} margin={16} />
+                <Typography className={styles.totalCaption} variant="caption">
+                    {i18n.number(totalVisibleValues)}{' '}
+                    {totalVisibleValues === 1 ? i18n.text('item') : i18n.text('items')}
+                </Typography>
+            </HideOnShrink>
+            {
+                <OvIcon
+                    nonOvTotal={totalNonVisibleValues}
+                    className={styles.ovIcon}
+                    nonOvValues={nonVisibleValues}
+                    attributeType={attributeType}
+                />
+            }
+            <ExpandableSearchInput query={searchQuery} onChange={handleChangeSearchQuery} />
+            {showInactiveValuesMenu && <FilterButton />}
+        </FacetViewHeader>
+    );
+};