@reltio/interactions 1.4.1585 → 1.4.1586-mui5

package/src/InteractionsTableView/InteractionsTable/cell-renderers/__tests__/AttributesRenderer.test.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {act} from 'react-dom/test-utils';
+
+import * as reactRedux from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+import AttributesRenderer from '../AttributesRenderer';
+import {ReadOnlyAttributesList, ViewMoreToggle} from '@reltio/components';
+
+describe('AttributesRenderer tests', () => {
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector());
+        jest.spyOn(mdmModule.selectors, 'getMetadata').mockReturnValue({
+            interactionTypes: [
+                {
+                    uri: 'configuration/interactionsTypes/1',
+                    attributes: [
+                        {
+                            uri: 'configuration/interactionsTypes/1/attributes/String',
+                            name: 'String'
+                        },
+                        {
+                            uri: 'configuration/interactionsTypes/1/attributes/Number',
+                            name: 'Number'
+                        }
+                    ]
+                }
+            ]
+        });
+    });
+
+    const props = {
+        value: {
+            Number: {
+                uri: 'configuration/interactionsTypes/1/attributes/Number/1',
+                value: '1'
+            },
+            String: {
+                uri: 'configuration/interactionsTypes/1/attributes/String/1',
+                value: '1'
+            }
+        },
+        rowValue: {
+            rawValue: {
+                uri: 'interactions/1',
+                type: 'configuration/interactionsTypes/1',
+                attributes: {
+                    String: {
+                        uri: 'configuration/interactionsTypes/1/attributes/String/1',
+                        value: '1'
+                    },
+                    Number: {
+                        uri: 'configuration/interactionsTypes/1/attributes/Number/1',
+                        value: '1'
+                    }
+                }
+            }
+        },
+        columnData: {
+            maxAttrsToShow: 2
+        }
+    };
+
+    it('should render ReadOnlyAttributesList with correct props', () => {
+        const wrapper = shallow(<AttributesRenderer {...props} />);
+        expect(wrapper.find(ReadOnlyAttributesList).props()).toMatchObject({
+            entity: {attributes: props.value},
+            attrTypes: [
+                {
+                    uri: 'configuration/interactionsTypes/1/attributes/Number',
+                    name: 'Number'
+                },
+                {
+                    uri: 'configuration/interactionsTypes/1/attributes/String',
+                    name: 'String'
+                }
+            ],
+            drawLines: false
+        });
+    });
+
+    it('should render ViewMoreToggle if attributes count exceeds maxAttrsToShow', () => {
+        const wrapper = shallow(<AttributesRenderer {...props} />);
+        expect(wrapper.find(ViewMoreToggle)).toHaveLength(0);
+        wrapper.setProps({columnData: {maxAttrsToShow: 1}});
+        expect(wrapper.find(ViewMoreToggle)).toHaveLength(1);
+    });
+
+    it('should collapse/expand attributes on view more/view less click', () => {
+        const wrapper = shallow(<AttributesRenderer {...props} columnData={{maxAttrsToShow: 1}} />);
+        expect(wrapper.find(ViewMoreToggle).prop('active')).toBe(false);
+        expect(wrapper.find(ReadOnlyAttributesList).prop('entity')).toEqual({
+            attributes: {
+                Number: {
+                    uri: 'configuration/interactionsTypes/1/attributes/Number/1',
+                    value: '1'
+                }
+            }
+        });
+        act(() => {
+            wrapper.find(ViewMoreToggle).simulate('click');
+        });
+        expect(wrapper.find(ViewMoreToggle).prop('active')).toBe(true);
+        expect(wrapper.find(ReadOnlyAttributesList).prop('entity')).toEqual({attributes: props.value});
+        act(() => {
+            wrapper.find(ViewMoreToggle).simulate('click');
+        });
+        expect(wrapper.find(ViewMoreToggle).prop('active')).toBe(false);
+        expect(wrapper.find(ReadOnlyAttributesList).prop('entity')).toEqual({
+            attributes: {
+                Number: {
+                    uri: 'configuration/interactionsTypes/1/attributes/Number/1',
+                    value: '1'
+                }
+            }
+        });
+    });
+});

package/src/InteractionsTableView/InteractionsTable/cell-renderers/__tests__/DefaultCellValueRenderer.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import {DataTypeValue} from '@reltio/components';
+import DefaultCellValueRenderer from '../DefaultCellValueRenderer';
+
+describe('Default cell value renderer tests', () => {
+    it('should render DataTypeValue with correct props', () => {
+        const props = {
+            value: 'value',
+            columnData: {
+                dataTypeDefinition: {
+                    type: 'String'
+                }
+            }
+        };
+        const wrapper = shallow(<DefaultCellValueRenderer {...props} />);
+        expect(wrapper.find(DataTypeValue).props()).toEqual({
+            value: props.value,
+            dataTypeDefinition: props.columnData.dataTypeDefinition
+        });
+    });
+});

package/src/InteractionsTableView/InteractionsTable/cell-renderers/__tests__/LinkRenderer.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import LinkRenderer from '../LinkRenderer';
+import Link from '@mui/material/Link';
+
+describe('LinkRenderer tests', () => {
+    it('should render MUI Link with correct props', () => {
+        const props = {
+            value: 'http://some.url'
+        };
+        const wrapper = shallow(<LinkRenderer {...props} />);
+        expect(wrapper.find(Link).props()).toMatchObject({
+            href: props.value,
+            target: '_blank',
+            underline: 'none',
+            children: props.value
+        });
+    });
+});

package/src/InteractionsTableView/InteractionsTable/cell-renderers/__tests__/RowCellRenderer.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import RowCellRenderer from '../RowCellRenderer';
+import {pluck, prop} from 'ramda';
+import {isActiveObject} from '@reltio/mdm-sdk';
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual('@reltio/mdm-sdk'),
+    isActiveObject: jest.fn()
+}));
+
+describe('Row cell renderer scenario', () => {
+    let wrapper, props, interaction;
+    beforeAll(() => {
+        isActiveObject.mockReturnValue(true);
+
+        interaction = {
+            uri: '123'
+        };
+
+        props = {
+            cell: {values: [1, 2, 3]},
+            CellValueRenderer: jest.fn(({value}) => value),
+            rowValue: {interaction},
+            isSorted: false
+        };
+    });
+    beforeEach(() => {
+        wrapper = mount(<RowCellRenderer {...props} />);
+    });
+
+    afterAll(() => {
+        jest.restoreAllMocks();
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should call CellValueRenderer for all cell values', () => {
+        expect(pluck(0, props.CellValueRenderer.mock.calls).map(prop('value'))).toEqual([1, 2, 3]);
+        expect(wrapper.text()).toBe('123');
+    });
+
+    it('should apply sorted styles if cell is sorted', () => {
+        const sortedClass = '--sorted';
+        expect(wrapper.find('div').prop('className').includes(sortedClass)).toBe(false);
+        wrapper.setProps({
+            isSorted: true
+        });
+        expect(wrapper.find('div').prop('className').includes(sortedClass)).toBe(true);
+    });
+});

package/src/InteractionsTableView/InteractionsTable/cell-renderers/styles.js

@@ -0,0 +1,67 @@
+import {makeStyles} from '@mui/styles';
+
+const defaultWrapperStyles = {
+    padding: '15px 25px 0 25px',
+    '&:last-child': {
+        paddingBottom: '15px'
+    }
+};
+
+export const useStyles = makeStyles((theme) => ({
+    headCell: {
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+        fontSize: '12px'
+    },
+    rowCell: {
+        fontSize: '13px',
+        overflow: 'hidden',
+        overflowWrap: 'break-word',
+        wordWrap: 'break-word' // for IE
+    },
+    'row-cell--sorted': {
+        color: 'rgba(0,0,0,0.87)'
+    },
+    actorsWrapper: {
+        paddingRight: '25px',
+        paddingLeft: '15px',
+        '&:last-child': {
+            paddingBottom: '15px'
+        }
+    },
+    memberWrapper: {
+        display: 'flex',
+        paddingTop: '15px',
+        boxSizing: 'border-box',
+        position: 'relative'
+    },
+    entityLabel: {
+        fontSize: '15px',
+        display: 'inline-block',
+        overflowX: 'hidden',
+        margin: '-2px 0 -1px 45px'
+    },
+    entityAvatar: {
+        transform: 'scale(0.5)',
+        position: 'absolute',
+        left: 0,
+        top: '2px'
+    },
+    defaultWrapper: defaultWrapperStyles,
+    blobWrapper: {
+        ...defaultWrapperStyles,
+        whiteSpace: 'pre-wrap'
+    },
+    link: {
+        cursor: 'pointer',
+        color: theme.palette.primary.main
+    },
+    attributesWrapper: {
+        padding: '15px 25px 10px 25px',
+        color: 'rgba(0,0,0,0.87)'
+    },
+    viewMore: {
+        marginLeft: '-5px'
+    }
+}));

package/src/InteractionsTableView/InteractionsTable/helpers/__tests__/dataHelpers.spec.js

@@ -0,0 +1,286 @@
+import {getBasicTableColumnsData, getBasicTableRowsData, getStaticRowCellHeight} from '../dataHelpers';
+import {DataTypes} from '@reltio/mdm-sdk';
+import {defaultGetRowCellHeight} from '@reltio/components';
+import HeadCellRenderer from '../../cell-renderers/HeadCellRenderer';
+import ActorsRenderer from '../../cell-renderers/ActorsRenderer';
+import {ACTORS_COLUMN_ID, ATTRIBUTES_COLUMN_ID, INTERACTION_TYPE_COLUMN_ID} from '../../../helpers/tableHelpers';
+import {pick, pluck} from 'ramda';
+import LinkRenderer from '../../cell-renderers/LinkRenderer';
+import BlobRender from '../../cell-renderers/BlobRenderer';
+import DefaultCellValueRenderer from '../../cell-renderers/DefaultCellValueRenderer';
+import AttributesRenderer from '../../cell-renderers/AttributesRenderer';
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual('@reltio/components'),
+    defaultGetRowCellHeight: jest.fn()
+}));
+
+describe('getBasicTableColumnsData scenario', () => {
+    it('should mark columns as resizable and sortable', () => {
+        const columnsData = [
+            {
+                id: 'members',
+                label: 'Entity label',
+                dataTypeDefinition: {
+                    type: DataTypes.TYPE_STRING
+                }
+            }
+        ];
+        expect(getBasicTableColumnsData(columnsData)[0]).toMatchObject({
+            ...columnsData[0],
+            resizable: true,
+            sortable: true
+        });
+    });
+
+    it('should calculate nested path for columns', () => {
+        const columnsData = [
+            {
+                id: 'attributes.Nested.String',
+                label: 'Nested String',
+                dataTypeDefinition: {
+                    type: DataTypes.TYPE_STRING
+                }
+            }
+        ];
+        expect(getBasicTableColumnsData(columnsData)[0]).toMatchObject({
+            ...columnsData[0],
+            nestedPath: ['Nested']
+        });
+    });
+
+    it('should assign head cell renderer for columns', () => {
+        const columnsData = [
+            {
+                id: 'attributes.Nested.String',
+                label: 'Nested String',
+                dataTypeDefinition: {
+                    type: DataTypes.TYPE_STRING
+                }
+            }
+        ];
+        expect(getBasicTableColumnsData(columnsData)[0]).toMatchObject({
+            ...columnsData[0],
+            headCellRenderer: HeadCellRenderer
+        });
+    });
+
+    it('should assign row cell value renderer for columns', () => {
+        const columnsData = [
+            {
+                id: ACTORS_COLUMN_ID,
+                dataTypeDefinition: {
+                    type: DataTypes.TYPE_STRING
+                }
+            },
+            {
+                id: 'attributes.URL',
+                dataTypeDefinition: {
+                    type: DataTypes.TYPE_URL
+                }
+            },
+            {
+                id: 'attributes.BLOG_URL',
+                dataTypeDefinition: {
+                    type: DataTypes.TYPE_BLOG_URL
+                }
+            },
+            {
+                id: 'attributes.IMAGE_URL',
+                dataTypeDefinition: {
+                    type: DataTypes.TYPE_IMAGE_URL
+                }
+            },
+            {
+                id: 'attributes.EMAIL',
+                dataTypeDefinition: {
+                    type: DataTypes.TYPE_EMAIL
+                }
+            },
+            {
+                id: 'attributes.BLOB',
+                dataTypeDefinition: {
+                    type: DataTypes.TYPE_BLOB
+                }
+            },
+            {
+                id: 'attributes.Nested.String',
+                dataTypeDefinition: {
+                    type: DataTypes.TYPE_STRING
+                }
+            },
+            {id: ATTRIBUTES_COLUMN_ID}
+        ];
+        const result = getBasicTableColumnsData(columnsData);
+        expect(pluck('rowCellValueRenderer', result)).toEqual([
+            ActorsRenderer,
+            LinkRenderer,
+            LinkRenderer,
+            LinkRenderer,
+            LinkRenderer,
+            BlobRender,
+            DefaultCellValueRenderer,
+            AttributesRenderer
+        ]);
+    });
+});
+
+describe('row cell height scenario', () => {
+    it('should return height based on values count for actors', () => {
+        const member1 = {};
+        const member2 = {};
+        const value = {
+            columnData: {
+                id: ACTORS_COLUMN_ID
+            },
+            cell: {
+                values: [
+                    [
+                        {
+                            members: [member1, member2]
+                        }
+                    ]
+                ]
+            }
+        };
+        expect(getStaticRowCellHeight(value)).toBe(2 * 33 + 15);
+    });
+    it('should return height based on attributes count for attributes', () => {
+        const value = {
+            columnData: {
+                id: ATTRIBUTES_COLUMN_ID,
+                maxAttrsToShow: 2
+            },
+            cell: {
+                values: [
+                    {
+                        name1: {},
+                        name2: {}
+                    }
+                ]
+            }
+        };
+        expect(getStaticRowCellHeight(value)).toBe(2 * 26 + 25);
+    });
+    it('should return height based on max attributes to show count for attributes', () => {
+        const value = {
+            columnData: {
+                id: ATTRIBUTES_COLUMN_ID,
+                maxAttrsToShow: 2
+            },
+            cell: {
+                values: [
+                    {
+                        name1: {},
+                        name2: {},
+                        name3: {}
+                    }
+                ]
+            }
+        };
+        expect(getStaticRowCellHeight(value)).toBe(2 * 26 + 49);
+    });
+    it('should return default height for other cells', () => {
+        const DEFAULT_HEIGHT = 48;
+        defaultGetRowCellHeight.mockReturnValueOnce(DEFAULT_HEIGHT);
+        const value = {
+            columnData: {
+                id: 'attributes.Nested.String'
+            }
+        };
+        expect(getStaticRowCellHeight(value)).toBe(DEFAULT_HEIGHT);
+    });
+});
+
+describe('get table data scenario', () => {
+    it('should return correct table data', () => {
+        const columnsData = [
+            {
+                id: 'timestamp'
+            },
+            {
+                id: INTERACTION_TYPE_COLUMN_ID
+            },
+            {
+                id: ACTORS_COLUMN_ID
+            },
+            {
+                id: 'attributes.String',
+                label: 'String',
+                dataTypeDefinition: {
+                    type: DataTypes.TYPE_STRING
+                }
+            },
+            {
+                id: ATTRIBUTES_COLUMN_ID,
+                attrsToShow: {
+                    'configuration/interactionTypes/Interaciton': [
+                        'configuration/interactionTypes/Interaciton/attributes/Number'
+                    ]
+                }
+            }
+        ];
+        const interactions = [
+            {
+                type: 'configuration/interactionTypes/Interaciton',
+                timestamp: 12345,
+                members: {
+                    EntityType: {
+                        members: [{type: 'configuration/entityTypes/EntityType', label: 'Entity'}],
+                        type: 'configuration/interactionTypes/Interaciton/memberTypes/EntityType',
+                        uri: 'interactions/Reltio+8778306289485/members/EntityType'
+                    }
+                },
+                attributes: {
+                    String: [
+                        {
+                            ov: true,
+                            value: 'String',
+                            uri: 'interactions/Reltio+8778306289485/attributes/String/6',
+                            type: 'configuration/interactionTypes/Interaciton/attributes/String'
+                        }
+                    ],
+                    Number: [
+                        {
+                            ov: true,
+                            value: 'Number',
+                            uri: 'interactions/Reltio+8778306289485/attributes/Number/6',
+                            type: 'configuration/interactionTypes/Interaciton/attributes/Number'
+                        }
+                    ]
+                }
+            }
+        ];
+        const metadata = {
+            entityTypes: [{uri: 'configuration/entityTypes/EntityType'}],
+            interactionTypes: [
+                {
+                    uri: 'configuration/interactionTypes/Interaciton',
+                    memberTypes: [
+                        {
+                            name: 'EntityType'
+                        }
+                    ],
+                    attributes: [
+                        {
+                            type: 'String',
+                            name: 'String',
+                            uri: 'configuration/interactionTypes/Interaciton/attributes/String'
+                        }
+                    ]
+                }
+            ]
+        };
+        const rowsData = getBasicTableRowsData(interactions, columnsData, metadata);
+        expect(rowsData).toEqual([
+            expect.objectContaining({
+                timestamp: interactions[0].timestamp,
+                [INTERACTION_TYPE_COLUMN_ID]: interactions[0].type,
+                [ACTORS_COLUMN_ID]: interactions[0].members,
+                'attributes.String': [interactions[0].attributes.String[0].value],
+                [ATTRIBUTES_COLUMN_ID]: pick(['Number'], interactions[0].attributes),
+                rawValue: interactions[0]
+            })
+        ]);
+    });
+});

package/src/InteractionsTableView/InteractionsTable/helpers/dataHelpers.ts

@@ -0,0 +1,120 @@
+import HeadCellRenderer from '../cell-renderers/HeadCellRenderer';
+import ActorsRenderer from '../cell-renderers/ActorsRenderer';
+import DefaultCellValueRenderer from '../cell-renderers/DefaultCellValueRenderer';
+import {ColumnData, defaultGetRowCellHeight} from '@reltio/components';
+import {assoc, cond, length, map, path, pathEq, pickBy, pipe, prop, reduce, slice, split, T, values} from 'ramda';
+import {
+    DataTypes,
+    getActorsForInteraction,
+    getAttributeValuesByPath,
+    Interaction,
+    makeAttrTypeUri,
+    Metadata
+} from '@reltio/mdm-sdk';
+import {ACTORS_COLUMN_ID, ATTRIBUTES_COLUMN_ID, INTERACTION_TYPE_COLUMN_ID} from '../../helpers/tableHelpers';
+import BlobRender from '../cell-renderers/BlobRenderer';
+import LinkRenderer from '../cell-renderers/LinkRenderer';
+import AttributesRenderer from '../cell-renderers/AttributesRenderer';
+
+const getInteractionAttributeValues = (attrPath, interaction) =>
+    pipe(path(['attributes']), getAttributeValuesByPath(attrPath))(interaction);
+
+const getAttrPathFromColumnId = pipe(split('.'), slice(1, Infinity));
+
+const getRowValueByColumn = (columnData: ColumnData, interaction: Interaction, metadata: Metadata) => {
+    switch (columnData.id) {
+        case ACTORS_COLUMN_ID:
+            return getActorsForInteraction(metadata, interaction);
+        case 'timestamp':
+            return interaction.timestamp;
+        case INTERACTION_TYPE_COLUMN_ID:
+            return interaction.type;
+        case ATTRIBUTES_COLUMN_ID: {
+            const urisToShow = path(['attrsToShow', interaction.type], columnData);
+            const isAttrToShow = (values, name) => urisToShow.includes(makeAttrTypeUri(interaction.type, name));
+            return urisToShow ? pickBy(isAttrToShow, interaction.attributes) : interaction.attributes;
+        }
+        default: {
+            const attrPath = getAttrPathFromColumnId(columnData.id);
+            return getInteractionAttributeValues(attrPath, interaction);
+        }
+    }
+};
+
+const getBasicTableRowsData = (interactions: Interaction[], columnsData: ColumnData, metadata: Metadata) =>
+    interactions.map((interaction) =>
+        pipe(
+            reduce(
+                (acc, columnData) => assoc(columnData.id, getRowValueByColumn(columnData, interaction, metadata), acc),
+                {}
+            ),
+            assoc('rawValue', interaction)
+        )(columnsData)
+    );
+
+const getNestedPathByColumnId = (columnId) => {
+    if (columnId.startsWith('attributes.')) {
+        const attrPath = getAttrPathFromColumnId(columnId);
+        return attrPath.length > 1 ? attrPath.slice(0, -1) : null;
+    } else {
+        return null;
+    }
+};
+
+const getCellValueRenderer = (columnData) => {
+    if (columnData.id === ACTORS_COLUMN_ID) {
+        return ActorsRenderer;
+    }
+    if (columnData.id === ATTRIBUTES_COLUMN_ID) {
+        return AttributesRenderer;
+    }
+    switch (columnData.dataTypeDefinition.type) {
+        case DataTypes.TYPE_URL:
+        case DataTypes.TYPE_BLOG_URL:
+        case DataTypes.TYPE_IMAGE_URL:
+        case DataTypes.TYPE_EMAIL:
+            return LinkRenderer;
+        case DataTypes.TYPE_BLOB:
+            return BlobRender;
+        default:
+            return DefaultCellValueRenderer;
+    }
+};
+
+const getColumnDataByColumnId = (columnData) => ({
+    sortable: true,
+    ...columnData,
+    resizable: true,
+    nestedPath: getNestedPathByColumnId(columnData.id),
+    headCellRenderer: HeadCellRenderer,
+    rowCellValueRenderer: getCellValueRenderer(columnData)
+});
+
+const getBasicTableColumnsData = map(getColumnDataByColumnId);
+
+const getMembersCount = pipe(prop('members'), length);
+const getMemberCellHeight = pipe(
+    map(getMembersCount),
+    values,
+    reduce((acc, count) => acc + count * 33, 15)
+);
+
+const calculateMembersCellHeight = pipe(
+    path(['cell', 'values']),
+    reduce((acc, actors) => acc + getMemberCellHeight(actors), 0)
+);
+
+const calculateAttributesCellHeight = ({columnData, cell}) => {
+    const attributesCount = pipe(path(['values', 0]), values, length)(cell);
+    return attributesCount > columnData.maxAttrsToShow
+        ? columnData.maxAttrsToShow * 26 + 49
+        : attributesCount * 26 + 25;
+};
+
+const getStaticRowCellHeight = cond([
+    [pathEq(['columnData', 'id'], ACTORS_COLUMN_ID), calculateMembersCellHeight],
+    [pathEq(['columnData', 'id'], ATTRIBUTES_COLUMN_ID), calculateAttributesCellHeight],
+    [T, defaultGetRowCellHeight]
+]);
+
+export {getBasicTableRowsData, getBasicTableColumnsData, getStaticRowCellHeight};