@reltio/components 1.4.1585 → 1.4.1586-mui5

package/src/components/attributes/readMode/NestedAttribute/NestedAttribute.js

@@ -0,0 +1,54 @@
+import React, {memo, useContext, useMemo} from 'react';
+import Box from '@mui/material/Box';
+import classnames from 'classnames';
+import {
+    evaluateDeepEntityLabel,
+    getAttributeTypeSubAttributes,
+    getHistoryAppearanceByUri,
+    getHistoryAttributeClassName,
+    getLabel,
+    NestedAttributeType
+} from '@reltio/mdm-sdk';
+import {HistoryDiffContext} from '../../../../contexts';
+import ComplexAttribute from '../ComplexAttribute/ComplexAttribute';
+import {PivotingTooltip} from '../../PivotingAttributes/PivotingTooltip';
+import SearchHighlighter from '../../../SearchHighlighter/SearchHighlighter';
+
+import useStyles from './styles';
+
+const NestedAttribute = ({attributeValue, attributeType, ...otherProps}) => {
+    const styles = useStyles();
+
+    const {appearance} = useContext(HistoryDiffContext);
+
+    const attributeLabel = useMemo(() => {
+        const attributeAppearance = getHistoryAppearanceByUri(attributeValue.uri, appearance);
+        const historyAttributesClassName = getHistoryAttributeClassName(attributeAppearance);
+
+        const label = attributeValue.label
+            ? attributeValue.label
+            : evaluateDeepEntityLabel(attributeValue, attributeType.dataLabelPattern);
+
+        return (
+            <PivotingTooltip className={styles.pivotingTooltip} value={attributeValue} attributeType={attributeType}>
+                <Box component="span" className={classnames(styles[historyAttributesClassName], styles.label)}>
+                    <SearchHighlighter text={getLabel(label)} />
+                </Box>
+            </PivotingTooltip>
+        );
+    }, [appearance, styles, attributeValue, attributeType]);
+
+    return (
+        <ComplexAttribute
+            label={attributeLabel}
+            attributeValue={attributeValue}
+            attributeTypesList={getAttributeTypeSubAttributes({}, attributeType)}
+            attributeType={attributeType}
+            {...otherProps}
+        />
+    );
+};
+
+NestedAttribute.propTypes = NestedAttributeType;
+
+export default memo(NestedAttribute);

package/src/components/attributes/readMode/NestedAttribute/__tests__/NestedAttribute.test.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import {mount, ReactWrapper, shallow} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import NestedAttribute from '../NestedAttribute';
+import {nestedAttributeType, nestedAttributeValue} from '../../__tests__/common';
+import ComplexAttribute from '../../ComplexAttribute/ComplexAttribute';
+import {HistoryDiffContext} from '../../../../../contexts/HistoryAppearanceContext';
+import {SearchValueContext} from '../../../../../contexts/SearchValueContext';
+import {PivotingTooltip} from '../../../PivotingAttributes/PivotingTooltip';
+import SearchHighlighter from '../../../../SearchHighlighter/SearchHighlighter';
+
+const store = {
+    metadata: {
+        alenat: {}
+    },
+    ui: {
+        paths: {
+            collaborationPath: 'https://cservice-dev.reltio.com/reltio-collaboration/tst-01',
+            uiPath: 'https://localhost:3000/ui/aleant'
+        }
+    },
+    tenant: {
+        id: 'alenat'
+    }
+};
+
+describe('read mode NestedAttribute', () => {
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+        jest.spyOn(reactRedux, 'useDispatch').mockImplementation(() => jest.fn());
+    });
+    const getComplexAttribute = (component) => component.find(ComplexAttribute);
+    it('should provide props to ComplexAttribute correctly', () => {
+        const component = shallow(
+            <NestedAttribute attributeValue={nestedAttributeValue} attributeType={nestedAttributeType} />
+        );
+        const complexAttribute = getComplexAttribute(component);
+        expect(new ReactWrapper(complexAttribute.prop('label')).text()).toBe(nestedAttributeValue.label);
+        expect(complexAttribute.prop('attributeValue')).toBe(nestedAttributeValue);
+        expect(complexAttribute.prop('attributeTypesList')).toBe(nestedAttributeType.attributes);
+    });
+
+    it('should provide history className', () => {
+        const appearance = {
+            [nestedAttributeValue.value.SubNested[0].uri]: 'INSERT_ATTRIBUTE'
+        };
+        const component = mount(
+            <HistoryDiffContext.Provider value={{appearance}}>
+                <NestedAttribute attributeValue={nestedAttributeValue} attributeType={nestedAttributeType} />
+            </HistoryDiffContext.Provider>
+        );
+        const complexAttribute = getComplexAttribute(component);
+
+        const pivotingTooltip = new ReactWrapper(new ReactWrapper(complexAttribute.prop('label')).prop('children'));
+        expect(pivotingTooltip.prop('className')).toContain('updateAttribute');
+    });
+
+    it('should render PivotingTooltip', () => {
+        const component = mount(
+            <NestedAttribute attributeValue={nestedAttributeValue} attributeType={nestedAttributeType} />
+        );
+
+        expect(component.find(PivotingTooltip).length).toEqual(1);
+    });
+
+    it('should render PivotingTooltip with highlights', () => {
+        const highlightedValue = '1';
+
+        const component = mount(
+            <SearchValueContext.Provider value={highlightedValue}>
+                <NestedAttribute attributeValue={nestedAttributeValue} attributeType={nestedAttributeType} />
+            </SearchValueContext.Provider>
+        );
+        expect(component.find(SearchHighlighter).prop('text')).toBe('Nested 1 Label');
+        expect(component.find(PivotingTooltip).length).toEqual(1);
+    });
+});

package/src/components/attributes/readMode/NestedAttribute/index.js

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

package/src/components/attributes/readMode/NestedAttribute/styles.js

@@ -0,0 +1,30 @@
+import {makeStyles} from '@mui/styles';
+import {HistoryOperations, historyPalettes} from '@reltio/mdm-sdk';
+
+const styles = makeStyles({
+    label: {
+        textDecoration: 'none'
+    },
+    updateAttribute: {
+        width: 'fit-content',
+        padding: '0 4px',
+        marginLeft: '-4px',
+        ...historyPalettes[HistoryOperations.updateAttribute]
+    },
+    insertAttribute: {
+        width: 'fit-content',
+        ...historyPalettes[HistoryOperations.insertAttribute]
+    },
+    deleteAttribute: {
+        width: 'fit-content',
+        textDecoration: 'line-through',
+        padding: '0 4px',
+        marginLeft: '-4px',
+        ...historyPalettes[HistoryOperations.deleteAttribute]
+    },
+    pivotingTooltip: {
+        marginLeft: '4px'
+    }
+});
+
+export default styles;

package/src/components/attributes/readMode/ReferenceAttribute/ReferenceAttribute.tsx

@@ -0,0 +1,74 @@
+import React, {memo, useContext, useMemo} from 'react';
+import classnames from 'classnames';
+import {
+    getAttributeTypeSubAttributes,
+    getHistoryAppearanceByUri,
+    getHistoryAttributeClassName,
+    getLabel,
+    getReferencedEntityUriFromAttrValue,
+    isEmptyValue,
+    isOv,
+    ReferenceAttributeValue
+} from '@reltio/mdm-sdk';
+import mdmModule from '@reltio/mdm-module';
+import {useSelector} from 'react-redux';
+import {HistoryDiffContext, UrlGeneratorsContext} from '../../../../contexts';
+import ComplexAttribute from '../ComplexAttribute/ComplexAttribute';
+import InternalLink from '../../../InternalLink/InternalLink';
+import SearchHighlighter from '../../../SearchHighlighter/SearchHighlighter';
+import {useOvValueStyles} from '../helpers/commonStyles';
+import {ComplexAttributeProps} from '../../types';
+
+import useStyles from './styles';
+
+const ReferenceAttribute = ({
+    attributeValue,
+    attributeType,
+    ...otherProps
+}: ComplexAttributeProps<ReferenceAttributeValue>) => {
+    const metadata = useSelector(mdmModule.selectors.getMetadata);
+    const uiPath = useSelector(mdmModule.selectors.getUIPath);
+    const styles = useStyles();
+    const ovValueStyles = useOvValueStyles();
+    const refEntityURI = getReferencedEntityUriFromAttrValue(attributeValue);
+    const attributeTypeList = useMemo(
+        () => getAttributeTypeSubAttributes(metadata, attributeType),
+        [attributeType, metadata]
+    );
+
+    const {appearance} = useContext(HistoryDiffContext);
+    const {generateEntityUrl} = useContext(UrlGeneratorsContext);
+
+    const entityLabel = useMemo(() => {
+        const attributeAppearance = getHistoryAppearanceByUri(attributeValue.uri, appearance);
+        const historyAttributesClassName = getHistoryAttributeClassName(attributeAppearance);
+        const screen = refEntityURI?.startsWith('changeRequests') ? 'dcrReview' : 'profile';
+        return (
+            <InternalLink
+                href={isEmptyValue(appearance) ? generateEntityUrl({uiPath, uri: refEntityURI, screen}) : undefined}
+                className={classnames(styles[historyAttributesClassName], {
+                    [ovValueStyles.ovFalse]: !isOv(attributeValue)
+                })}
+            >
+                <SearchHighlighter text={getLabel(attributeValue.label)} />
+                {attributeValue.relationshipLabel && (
+                    <span className={styles.relationshipLabel}>
+                        <SearchHighlighter text={attributeValue.relationshipLabel} />
+                    </span>
+                )}
+            </InternalLink>
+        );
+    }, [attributeValue, appearance, uiPath, refEntityURI, styles, ovValueStyles.ovFalse, generateEntityUrl]);
+
+    return (
+        <ComplexAttribute
+            attributeTypesList={attributeTypeList}
+            attributeValue={attributeValue}
+            label={entityLabel}
+            attributeType={attributeType}
+            {...otherProps}
+        />
+    );
+};
+
+export default memo(ReferenceAttribute);

package/src/components/attributes/readMode/ReferenceAttribute/__tests__/ReferenceAttribute.test.tsx

@@ -0,0 +1,258 @@
+import React, {ReactNode} from 'react';
+import {AttributeType, HistoryDiff, ReferenceAttributeValue} from '@reltio/mdm-sdk';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {createTestStore} from '../../../../../../../../__mocks__/store-utils';
+import {HistoryDiffContext} from '../../../../../contexts/HistoryAppearanceContext';
+import {SearchValueContext} from '../../../../../contexts/SearchValueContext';
+import ReferenceAttribute from '../index';
+import {Provider} from 'react-redux';
+import {UrlGeneratorsContext} from '../../../../../contexts';
+
+describe('read mode ReferenceAttribute', () => {
+    const testUiPath = 'https://uiPath.com/ui/tenant/';
+    const attributeType = {
+        label: 'Address',
+        name: 'Address',
+        access: ['READ'],
+        type: 'Reference',
+        referencedAttributeURIs: [
+            'configuration/entityTypes/Location/attributes/AddressLine1',
+            'configuration/entityTypes/Location/attributes/AddressLine2',
+            'configuration/entityTypes/Location/attributes/AddressLine3'
+        ],
+        uri: 'configuration/entityTypes/Location/attributes/Address'
+    };
+    const attributeValue = {
+        label: 'Reference Address',
+        relationshipLabel: ',new address',
+        refEntity: {
+            objectURI: 'entities/2EpaVt0k',
+            type: 'configuration/entityTypes/Location',
+            crosswalks: []
+        },
+        refRelation: {
+            objectURI: 'relations/1GrMXM4O',
+            type: 'configuration/relationTypes/HasAddress',
+            crosswalks: []
+        },
+        uri: 'entities/2Vek4DnE/attributes/Address/1GrMXM4O',
+        value: {
+            AddressLine1: [
+                {
+                    ov: true,
+                    type: 'configuration/entityTypes/Location/attributes/AddressLine1',
+                    uri: 'entities/2Vek4DnE/attributes/Address/1GrMXM4O/AddressLine1/2GcBL4K00',
+                    value: 'gZmgecvaaMtFwti'
+                }
+            ],
+            AddressLine2: [
+                {
+                    ov: true,
+                    type: 'configuration/entityTypes/Location/attributes/AddressLine1',
+                    uri: 'entities/2Vek4DnE/attributes/Address/1GrMXM4O/AddressLine1/2GcBL4K00',
+                    value: 'AddressLine2 value'
+                }
+            ]
+        },
+        startObjectCrosswalks: []
+    };
+    const metadata = {
+        entityTypes: [
+            {
+                access: ['READ'],
+                label: 'Address',
+                name: 'Address',
+                uri: 'configuration/entityTypes/Location',
+                attributes: [
+                    {
+                        access: ['READ'],
+                        label: 'Address Line 1',
+                        name: 'AddressLine1',
+                        type: 'configuration/attributeTypes/AddressLine',
+                        uri: 'configuration/entityTypes/Location/attributes/AddressLine1'
+                    },
+                    {
+                        access: ['READ'],
+                        label: 'Address Line 2',
+                        name: 'AddressLine2',
+                        type: 'configuration/attributeTypes/AddressLine',
+                        uri: 'configuration/entityTypes/Location/attributes/AddressLine2'
+                    },
+                    {
+                        access: ['READ'],
+                        label: 'Address Line 3',
+                        name: 'AddressLine3',
+                        type: 'configuration/attributeTypes/AddressLine',
+                        uri: 'configuration/entityTypes/Location/attributes/AddressLine3'
+                    }
+                ]
+            }
+        ]
+    };
+    const createInitialState = () => ({
+        profile: {
+            entity: {
+                uri: 'entities/1mGpgPSC',
+                type: 'configuration/entityTypes/HCP',
+                attributes: {
+                    Address: [attributeValue]
+                }
+            }
+        },
+        metadata: {
+            tenant: metadata
+        },
+        ui: {
+            config: {},
+            paths: {
+                collaborationPath: 'https://cservice-dev.reltio.com/reltio-collaboration/tst-01',
+                uiPath: testUiPath
+            }
+        },
+        tenant: {
+            id: 'tenant'
+        },
+        dataTenants: []
+    });
+    let initialState;
+    beforeEach(() => {
+        initialState = createInitialState();
+    });
+    type Props = {
+        attributeValue: ReferenceAttributeValue;
+        attributeType: AttributeType;
+        state?: 'edited' | 'deleted';
+        searchValue?: string;
+        historyDiff?: HistoryDiff;
+    };
+    const defaultHistoryDiff = {
+        appearance: {},
+        attributes: {},
+        roles: [],
+        tags: []
+    };
+    const generateEntityUrl = ({uiPath, uri, screen}: {uiPath: string; uri: string; screen?: string}) =>
+        `${uiPath}${screen}/${uri}`;
+    const setUp = ({
+        attributeValue,
+        attributeType,
+        state,
+        searchValue = '',
+        historyDiff = defaultHistoryDiff
+    }: Props) => {
+        const user = userEvent.setup();
+        const store = createTestStore(initialState);
+        const Providers = ({children}: {children: ReactNode}) => (
+            <Provider store={store}>
+                <UrlGeneratorsContext.Provider value={{generateEntityUrl}}>
+                    <HistoryDiffContext.Provider value={historyDiff}>
+                        <SearchValueContext.Provider value={searchValue}>{children}</SearchValueContext.Provider>
+                    </HistoryDiffContext.Provider>
+                </UrlGeneratorsContext.Provider>
+            </Provider>
+        );
+        const renderer = render(
+            <ReferenceAttribute
+                attributeValue={attributeValue}
+                attributeType={attributeType}
+                showEmptyEditors={false}
+                onAddAttributes={jest.fn}
+                onAddOneMore={jest.fn}
+                onDeleteAttribute={jest.fn}
+                onChangeAttribute={jest.fn}
+                state={state}
+            />,
+            {
+                wrapper: Providers
+            }
+        );
+        return {...renderer, user};
+    };
+
+    it('should create label for ComplexAttribute correctly', () => {
+        setUp({
+            attributeType,
+            attributeValue
+        });
+        const element = screen.getByTestId('reltio-attribute-complex-label');
+        expect(element).toHaveTextContent('Reference Address,new address');
+        expect(element.querySelector('a')?.getAttribute('href')).toBe(testUiPath + 'profile/entities/2EpaVt0k');
+    });
+
+    it('should highlight label for ComplexAttribute correctly according to search text', () => {
+        setUp({
+            attributeType,
+            attributeValue,
+            searchValue: 'new'
+        });
+        const element = screen.getByTestId('reltio-attribute-complex-label');
+        expect(element.getElementsByClassName('highlightedText')[0]).toHaveTextContent('new');
+    });
+
+    it('should create label for ov false value correctly', () => {
+        setUp({
+            attributeType,
+            attributeValue: {...attributeValue, ov: false}
+        });
+        const element = screen.getByTestId('reltio-attribute-complex-label');
+        const href = element.querySelector('a.ovFalse');
+        expect(href).toBeInTheDocument();
+    });
+
+    it('should not create link for ComplexAttribute label in history mode', () => {
+        setUp({
+            attributeType,
+            attributeValue,
+            historyDiff: {
+                ...defaultHistoryDiff,
+                appearance: {testAttribute: 'INSERT_ATTRIBUTE'}
+            }
+        });
+        const element = screen.getByTestId('reltio-attribute-complex-label');
+        expect(element).toHaveTextContent('Reference Address,new address');
+        expect(element.querySelector('a')?.getAttribute('href')).toBeNull();
+    });
+
+    it('should provide attributeTypeList and attributeValue for ComplexAttribute correctly', async () => {
+        const {user} = setUp({
+            attributeType,
+            attributeValue
+        });
+        await user.click(screen.getByTestId('arrow-expand-button'));
+        const elements = screen.getAllByTestId('reltio-attribute-value');
+        expect(elements[0]).toHaveTextContent('gZmgecvaaMtFwti');
+        expect(elements[1]).toHaveTextContent('AddressLine2 value');
+    });
+
+    it('should highligh history changes', async () => {
+        const {user} = setUp({
+            attributeType,
+            attributeValue,
+            historyDiff: {
+                ...defaultHistoryDiff,
+                appearance: {[attributeValue.value.AddressLine1[0].uri]: 'INSERT_ATTRIBUTE'}
+            }
+        });
+        await user.click(screen.getByTestId('arrow-expand-button'));
+        const label = screen.getByTestId('reltio-attribute-complex-label');
+        expect(label.firstChild).toHaveClass('updateAttribute');
+        const value = screen.getAllByTestId('reltio-attribute-value');
+        expect(value[0]).toHaveClass('insertAttribute');
+    });
+
+    it('should generate correct uri for change request', async () => {
+        setUp({
+            attributeType,
+            attributeValue: {
+                ...attributeValue,
+                refEntity: {
+                    ...attributeValue.refEntity,
+                    objectURI: 'changeRequests/2EpaVt0k'
+                }
+            }
+        });
+        const element = screen.getByTestId('reltio-attribute-complex-label');
+        expect(element.querySelector('a')?.getAttribute('href')).toBe(testUiPath + 'dcrReview/changeRequests/2EpaVt0k');
+    });
+});

package/src/components/attributes/readMode/ReferenceAttribute/index.ts

@@ -0,0 +1,3 @@
+import ReferenceAttribute from './ReferenceAttribute';
+
+export default ReferenceAttribute;

package/src/components/attributes/readMode/ReferenceAttribute/styles.js

@@ -0,0 +1,28 @@
+import {makeStyles} from '@mui/styles';
+import {HistoryOperations, historyPalettes} from '@reltio/mdm-sdk';
+
+const styles = makeStyles((theme) => ({
+    relationshipLabel: {
+        marginLeft: '4px',
+        color: theme.palette.text.primary
+    },
+    updateAttribute: {
+        width: 'fit-content',
+        padding: '0 4px',
+        marginLeft: '-4px',
+        ...historyPalettes[HistoryOperations.updateAttribute]
+    },
+    insertAttribute: {
+        width: 'fit-content',
+        ...historyPalettes[HistoryOperations.insertAttribute]
+    },
+    deleteAttribute: {
+        width: 'fit-content',
+        textDecoration: 'line-through',
+        padding: '0 4px',
+        marginLeft: '-4px',
+        ...historyPalettes[HistoryOperations.deleteAttribute]
+    }
+}));
+
+export default styles;

package/src/components/attributes/readMode/SimpleAttribute/SimpleAttribute.tsx

@@ -0,0 +1,97 @@
+import React, {useContext} from 'react';
+import {
+    AttributeType,
+    getAttrDataTypeDefinition,
+    getHistoryAppearanceByUri,
+    getAttributeValue,
+    SimpleAttributeValue,
+    CollaborationObjectTypes,
+    createRelatedObjectUris,
+    isOv,
+    isRelationAttrType,
+    getHistoryAttributeClassName
+} from '@reltio/mdm-sdk';
+import classnames from 'classnames';
+
+import {COMMENTS_CONTAINER_VISIBILITY_AREA} from '../../../../constants/classnames';
+import {HistoryDiffContext} from '../../../../contexts/HistoryAppearanceContext';
+import CommentsContainer from '../../../CommentsContainer/CommentsContainer';
+import DataTypeValue from '../../../DataTypeValue/DataTypeValue';
+import {PivotingTooltip} from '../../PivotingAttributes/PivotingTooltip';
+import {useStyles} from './styles';
+import {HighlightedValuesContext} from '../../../../contexts';
+import {useOvValueStyles} from '../helpers/commonStyles';
+
+type Props = {
+    className?: string;
+    attributeValue: SimpleAttributeValue;
+    attributeType: AttributeType;
+    inlined?: boolean;
+};
+
+const SimpleAttribute = ({className, attributeType = null, attributeValue, inlined}: Props) => {
+    const styles = useStyles();
+    const ovValueStyles = useOvValueStyles();
+    const {highlightedValuesUris = [], highlightedClassName} = useContext(HighlightedValuesContext);
+    const {appearance} = useContext(HistoryDiffContext);
+    const attributeAppearance = getHistoryAppearanceByUri(attributeValue.uri, appearance);
+    const historyClassName = getHistoryAttributeClassName(attributeAppearance);
+
+    const dataTypeValue = (
+        <DataTypeValue
+            value={getAttributeValue(attributeValue)}
+            dataTypeDefinition={getAttrDataTypeDefinition(attributeType)}
+        />
+    );
+
+    const objectType = isRelationAttrType(attributeType)
+        ? CollaborationObjectTypes.RELATION_ATTRIBUTE
+        : CollaborationObjectTypes.ENTITY_ATTRIBUTE;
+
+    return inlined || historyClassName ? (
+        <div
+            className={classnames(className, {
+                [highlightedClassName]: highlightedValuesUris.includes(attributeValue.uri)
+            })}
+        >
+            <PivotingTooltip
+                value={attributeValue}
+                attributeType={attributeType}
+                key={attributeValue.uri}
+                className={classnames({[styles.multilineAttribute]: !inlined})}
+            >
+                <span
+                    className={classnames(styles[historyClassName], {[ovValueStyles.ovFalse]: !isOv(attributeValue)})}
+                    data-reltio-id="reltio-attribute-value"
+                >
+                    {dataTypeValue}
+                </span>
+            </PivotingTooltip>
+        </div>
+    ) : (
+        <div
+            className={classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA, {
+                [highlightedClassName]: highlightedValuesUris.includes(attributeValue.uri)
+            })}
+        >
+            <PivotingTooltip value={attributeValue} attributeType={attributeType} key={attributeValue.uri}>
+                <span
+                    className={classnames(styles.attributeValue, {[ovValueStyles.ovFalse]: !isOv(attributeValue)})}
+                    data-reltio-id="reltio-attribute-value"
+                >
+                    {dataTypeValue}
+                </span>
+            </PivotingTooltip>
+            <CommentsContainer
+                className={styles.commentsContainer}
+                uri={attributeValue.uri}
+                relatedObjectUris={createRelatedObjectUris(objectType, {
+                    uri: attributeValue.uri
+                })}
+                objectType={objectType}
+            />
+        </div>
+    );
+};
+
+export default SimpleAttribute;