@reltio/interactions 1.4.1585 → 1.4.1586-mui5

package/public/bundle.js.LICENSE.txt

@@ -0,0 +1,79 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @mui/material v5.13.4
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @mui/styled-engine v5.13.2
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * A better abstraction over CSS.
+ *
+ * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
+ * @website https://github.com/cssinjs/jss
+ * @license MIT
+ */
+
+/**
+ * React Router DOM v6.2.1
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router v6.2.1
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/public/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@reltio/interactions",
+  "version": "1.4.1586-mui5",
+  "license": "SEE LICENSE IN LICENSE FILE",
+  "main": "bundle.js",
+  "dependencies": {
+    "@date-io/moment": "^1.3.5",
+    "@reltio/mdm-module": "^1.4.1586-mui5",
+    "@reltio/mdm-sdk": "^1.4.1586-mui5",
+    "classnames": "^2.2.5",
+    "memoize-one": "^5.1.0",
+    "prop-types": "^15.6.2",
+    "ramda": "^0.28.0",
+    "react-redux": "^7.2.3",
+    "react-resize-detector": "^4.2.0",
+    "redux": "^4.1.2",
+    "ui-i18n": "bitbucket:reltio-ondemand/ui-i18n#v1.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/scripts/build/index.js

@@ -0,0 +1,20 @@
+const path = require('path');
+const fs = require('fs');
+const outputDir = path.resolve(process.cwd(), 'public');
+
+const generatePackageJson = () => {
+    const packageJson = require('../../package.json');
+    const result = {
+        name: packageJson.name,
+        version: packageJson.version,
+        license: 'SEE LICENSE IN LICENSE FILE',
+        main: 'bundle.js',
+        dependencies: packageJson.dependencies,
+        peerDependencies: packageJson.peerDependencies,
+        publishConfig: packageJson.publishConfig
+    };
+    const source = JSON.stringify(result, null, 2);
+    fs.writeFileSync(path.join(outputDir, 'package.json'), source);
+};
+
+generatePackageJson();

package/src/InteractionsTableView/InteractionsTable/InteractionsTable.tsx

@@ -0,0 +1,87 @@
+import React, {ForwardedRef, useCallback, useLayoutEffect, useMemo} from 'react';
+import RowCellRenderer from './cell-renderers/RowCellRenderer';
+import {BasicTable, ColumnData, ColumnFilter, RowCellAutoSizer} from '@reltio/components';
+import {getBasicTableColumnsData, getBasicTableRowsData, getStaticRowCellHeight} from './helpers/dataHelpers';
+import {Interaction, Metadata, SortingField} from '@reltio/mdm-sdk';
+import {useDynamicRowCellHeight} from '@reltio/components';
+import {either} from 'ramda';
+
+import {useStyles} from './styles';
+
+type Props = {
+    columnsData: ColumnData;
+    interactions: Interaction[];
+    metadata: Metadata;
+    sorting: SortingField;
+    onSort: (field: string) => void;
+    filters?: Record<string, ColumnFilter>;
+    onFilter: (event: {columnId: string; filter: ColumnFilter}) => void;
+    basicTableRef: ForwardedRef<unknown>;
+};
+const InteractionsTable = ({
+    columnsData,
+    interactions,
+    metadata,
+    sorting,
+    onSort,
+    filters,
+    onFilter,
+    basicTableRef
+}: Props) => {
+    const tableRowsData = useMemo(
+        () => getBasicTableRowsData(interactions, columnsData, metadata),
+        [interactions, columnsData, metadata]
+    );
+    const tableColumnsData = useMemo(() => getBasicTableColumnsData(columnsData), [columnsData]);
+
+    const styles = useStyles();
+
+    const {getDynamicRowCellHeight, changeRowCellHeight, clearHeightsCache} = useDynamicRowCellHeight();
+
+    useLayoutEffect(clearHeightsCache, [interactions]);
+
+    const renderRowCell = useCallback(
+        (props) => (
+            <RowCellAutoSizer onChangeHeight={changeRowCellHeight} {...props}>
+                <RowCellRenderer
+                    {...props}
+                    isSorted={
+                        !!sorting && sorting.field === props.columnData.id /* eslint-disable-line react/prop-types */
+                    }
+                />
+            </RowCellAutoSizer>
+        ),
+        [sorting, changeRowCellHeight]
+    );
+
+    const getRowCellHeight = useCallback(either(getDynamicRowCellHeight, getStaticRowCellHeight), [
+        getDynamicRowCellHeight,
+        getStaticRowCellHeight
+    ]);
+
+    return (
+        <div className={styles.tableContainer}>
+            <BasicTable
+                columnsData={tableColumnsData}
+                rowsData={tableRowsData}
+                sorting={sorting}
+                onSort={onSort}
+                filters={filters}
+                onFilter={onFilter}
+                hoverStateEnabled={true}
+                defaultColumnWidth={250}
+                defaultColumnMinWidth={200}
+                getRowCellHeight={getRowCellHeight}
+                headRowHeight={56}
+                renderRowCell={renderRowCell}
+                classes={{
+                    hoveredRowRightContentWrapper: styles['row-cell__buttons-wrapper'],
+                    hoveredRowRightContentContainer: styles['row-cell__buttons-container']
+                }}
+                ref={basicTableRef}
+            />
+        </div>
+    );
+};
+
+export default InteractionsTable;

package/src/InteractionsTableView/InteractionsTable/__tests__/InteractionsTable.test.js

@@ -0,0 +1,146 @@
+import React from 'react';
+import {mount, ReactWrapper} from 'enzyme';
+import {act} from 'react-dom/test-utils';
+
+import InteractionsTable from '../InteractionsTable';
+import * as dataHelpers from '../helpers/dataHelpers';
+import {ACTORS_COLUMN_ID, INTERACTION_TYPE_COLUMN_ID} from '../../helpers/tableHelpers';
+import * as mdmSdk from '@reltio/mdm-sdk';
+import {DataTypes} from '@reltio/mdm-sdk';
+import {BasicTable} from '@reltio/components';
+
+jest.mock('@reltio/mdm-sdk');
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual('@reltio/components'),
+    BasicTable: () => null
+}));
+
+describe('Interactions table tests', () => {
+    const props = {
+        columnsData: [
+            {
+                id: 'timestamp'
+            },
+            {
+                id: INTERACTION_TYPE_COLUMN_ID
+            },
+            {
+                id: ACTORS_COLUMN_ID
+            }
+        ],
+        interactions: [],
+        metadata: {
+            entityTypes: [],
+            interactionTypes: []
+        },
+        filters: null,
+        onFilter: jest.fn(),
+        sorting: {
+            field: 'timestamp',
+            order: 'desc'
+        },
+        onSort: jest.fn()
+    };
+
+    const ROWS_DATA_MOCK = [];
+    const COLUMNS_DATA_MOCK = [];
+
+    beforeAll(() => {
+        jest.spyOn(dataHelpers, 'getBasicTableRowsData').mockReturnValue(ROWS_DATA_MOCK);
+        jest.spyOn(dataHelpers, 'getBasicTableColumnsData').mockReturnValue(COLUMNS_DATA_MOCK);
+        jest.spyOn(mdmSdk, 'debounce').mockImplementation((func) => func);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render basic table with correct params', () => {
+        const wrapper = mount(<InteractionsTable {...props} />);
+        expect(wrapper.find(BasicTable).props()).toMatchObject({
+            columnsData: COLUMNS_DATA_MOCK,
+            rowsData: ROWS_DATA_MOCK,
+            sorting: props.sorting,
+            onSort: props.onSort,
+            filters: props.filters,
+            onFilter: props.onFilter,
+            hoverStateEnabled: true
+        });
+    });
+
+    it('should use static height for cell if dynamic has not been computed', () => {
+        const STATIC_HEIGHT = 48;
+        jest.spyOn(dataHelpers, 'getStaticRowCellHeight').mockReturnValue(STATIC_HEIGHT);
+        const wrapper = mount(<InteractionsTable {...props} />);
+        const cellProps = {
+            rowIndex: 0,
+            columnIndex: 0,
+            cellIndex: 0,
+            columnData: {
+                id: 'timestamp',
+                dataTypeDefinition: {
+                    type: DataTypes.TYPE_TIMESTAMP
+                }
+            },
+            cell: {values: []}
+        };
+        const height = wrapper.find(BasicTable).prop('getRowCellHeight')(cellProps);
+        expect(dataHelpers.getStaticRowCellHeight).toBeCalledWith(cellProps);
+        expect(height).toBe(STATIC_HEIGHT);
+    });
+
+    it('should wrap each cell in autosizer to compute dynamic height', () => {
+        const wrapper = mount(<InteractionsTable {...props} />);
+        const cellProps = {
+            rowIndex: 0,
+            columnIndex: 0,
+            cellIndex: 0,
+            columnData: {
+                id: 'timestamp',
+                dataTypeDefinition: {
+                    type: DataTypes.TYPE_TIMESTAMP
+                }
+            },
+            cell: {values: []},
+            rowValue: {
+                rawValue: {uri: 'interactions/1'}
+            }
+        };
+        const cell = new ReactWrapper(wrapper.find(BasicTable).prop('renderRowCell')(cellProps));
+        expect(cell.find('RowCellAutoSizer').props()).toMatchObject({
+            ...cellProps
+        });
+    });
+
+    it('should use dynamic height for cell if it has been computed', () => {
+        jest.spyOn(dataHelpers, 'getStaticRowCellHeight');
+        const wrapper = mount(<InteractionsTable {...props} />);
+        const cellProps = {
+            rowIndex: 0,
+            columnIndex: 0,
+            cellIndex: 0,
+            columnData: {
+                id: 'timestamp',
+                dataTypeDefinition: {
+                    type: DataTypes.TYPE_TIMESTAMP
+                }
+            },
+            cell: {values: []},
+            rowValue: {
+                rawValue: {uri: 'interactions/1'}
+            }
+        };
+        const cell = new ReactWrapper(wrapper.find(BasicTable).prop('renderRowCell')(cellProps));
+        const DYNAMIC_HEIGHT = 32;
+
+        act(() => {
+            cell.find('RowCellAutoSizer').prop('onChangeHeight')(cellProps, DYNAMIC_HEIGHT);
+        });
+
+        wrapper.update();
+        const height = wrapper.find('BasicTable').prop('getRowCellHeight')(cellProps);
+        expect(dataHelpers.getStaticRowCellHeight).not.toBeCalled();
+        expect(height).toBe(DYNAMIC_HEIGHT);
+    });
+});

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

@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types';
+import React, {useContext} from 'react';
+import mdm, {ui} from '@reltio/mdm-module';
+import {chain, pipe, prop, uniqBy, values} from 'ramda';
+import {useDispatch, useSelector} from 'react-redux';
+import {useStyles} from './styles';
+import {EntityTypeType, getEntityType, getLabel} from '@reltio/mdm-sdk';
+import {EntityTypeIcon, ViewIdContext} from '@reltio/components';
+import classnames from 'classnames';
+
+const MemberItem = ({entityType, label, onClick}) => {
+    const styles = useStyles();
+    const labelCaption = getLabel(label);
+    return (
+        <div className={styles.memberWrapper}>
+            <EntityTypeIcon className={styles.entityAvatar} entityType={entityType} />
+            <span className={classnames(styles.entityLabel, styles.link)} onClick={onClick}>
+                {labelCaption}
+            </span>
+        </div>
+    );
+};
+MemberItem.propTypes = {
+    entityType: EntityTypeType,
+    label: PropTypes.string,
+    onClick: PropTypes.func
+};
+
+const getActorsMembers = pipe(values, chain(prop('members')), uniqBy(prop('objectURI')));
+
+const ActorsRenderer = ({value}) => {
+    const styles = useStyles();
+    const members = getActorsMembers(value);
+    const dispatch = useDispatch();
+    const viewId = useContext(ViewIdContext);
+    const metadata = useSelector(mdm.selectors.getMetadata);
+    const openEntityWithUri = (uri) => dispatch(ui.actions.openEntity({uri, viewId}));
+
+    return (
+        <div className={styles.actorsWrapper}>
+            {members.map(({objectURI, type, label}) => (
+                <MemberItem
+                    key={objectURI}
+                    entityType={getEntityType(metadata, type)}
+                    label={label}
+                    onClick={() => openEntityWithUri(objectURI)}
+                />
+            ))}
+        </div>
+    );
+};
+
+ActorsRenderer.propTypes = {
+    value: PropTypes.object
+};
+
+export default ActorsRenderer;

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

@@ -0,0 +1,50 @@
+import React, {useMemo, useState} from 'react';
+import PropTypes from 'prop-types';
+import {useSelector} from 'react-redux';
+
+import {ReadOnlyAttributesList, ViewMoreToggle} from '@reltio/components';
+import {useStyles} from './styles';
+import mdmModule from '@reltio/mdm-module';
+import {getInteractionType} from '@reltio/mdm-sdk';
+import {pick, propEq} from 'ramda';
+
+const AttributesRenderer = ({value, rowValue, columnData}) => {
+    const styles = useStyles();
+
+    const metadata = useSelector(mdmModule.selectors.getMetadata);
+    const interaction = rowValue.rawValue;
+    const attrTypes = useMemo(() => {
+        const interactionType = getInteractionType(metadata, interaction.type);
+        return interactionType.attributes;
+    }, [interaction, metadata]);
+
+    const [expanded, setExpanded] = useState(false);
+    const toggleExpanded = () => setExpanded((expanded) => !expanded);
+
+    const attributes = value;
+    const attrNames = Object.keys(attributes);
+
+    const visibleCountLimit = columnData.maxAttrsToShow;
+    const hasExtraValuesToShow = attrNames.length > visibleCountLimit;
+    const attrNamesToShow = expanded ? attrNames : attrNames.slice(0, visibleCountLimit);
+
+    const attrsToShow = pick(attrNamesToShow, attributes);
+    const attrTypesToShow = attrNamesToShow.map((name) => attrTypes.find(propEq('name', name)));
+
+    return (
+        <div className={styles.attributesWrapper}>
+            <ReadOnlyAttributesList entity={{attributes: attrsToShow}} attrTypes={attrTypesToShow} drawLines={false} />
+            {hasExtraValuesToShow && (
+                <ViewMoreToggle active={expanded} onClick={toggleExpanded} className={styles.viewMore} />
+            )}
+        </div>
+    );
+};
+
+AttributesRenderer.propTypes = {
+    value: PropTypes.object,
+    rowValue: PropTypes.object,
+    columnData: PropTypes.object
+};
+
+export default AttributesRenderer;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {useStyles} from './styles';
+
+const BlobRender = ({value}) => {
+    const styles = useStyles();
+    return <div className={styles.blobWrapper}>{value}</div>;
+};
+
+BlobRender.propTypes = {
+    value: PropTypes.any
+};
+
+export default BlobRender;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {useStyles} from './styles';
+import {DataTypeValue} from '@reltio/components';
+
+const DefaultCellValueRenderer = ({value, columnData: {dataTypeDefinition}}) => {
+    const styles = useStyles();
+    return (
+        <div className={styles.defaultWrapper}>
+            <DataTypeValue value={value} dataTypeDefinition={dataTypeDefinition} />
+        </div>
+    );
+};
+
+DefaultCellValueRenderer.propTypes = {
+    value: PropTypes.any,
+    columnData: PropTypes.shape({
+        dataTypeDefinition: PropTypes.object
+    })
+};
+
+export default DefaultCellValueRenderer;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import DefaultHeadCellRenderer from 'react-components/dist/Table/DefaultHeadCellRenderer/DefaultHeadCellRenderer';
+import {withFilterAtBottom} from '@reltio/components';
+import {useStyles} from './styles';
+
+const HeadCellRenderer = (props) => {
+    const styles = useStyles();
+    return (
+        <div className={styles.headCell}>
+            <DefaultHeadCellRenderer {...props} />
+        </div>
+    );
+};
+
+export default withFilterAtBottom(HeadCellRenderer);

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {useStyles} from './styles';
+import Link from '@mui/material/Link';
+
+const LinkRenderer = ({value}) => {
+    const styles = useStyles();
+    return (
+        <div className={styles.defaultWrapper}>
+            <Link className={styles.link} href={value} target="_blank" underline="none">
+                {value}
+            </Link>
+        </div>
+    );
+};
+
+LinkRenderer.propTypes = {
+    value: PropTypes.any
+};
+
+export default LinkRenderer;

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

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+import {useStyles} from './styles';
+
+const RowCellRenderer = ({cell, CellValueRenderer, isSorted, ...otherProps}) => {
+    const styles = useStyles();
+    return (
+        <div
+            className={classnames(
+                {
+                    [styles['row-cell--sorted']]: isSorted
+                },
+                styles.rowCell
+            )}
+        >
+            {cell.values.map((value, index) => (
+                <CellValueRenderer key={index} value={value} {...otherProps} />
+            ))}
+        </div>
+    );
+};
+
+RowCellRenderer.propTypes = {
+    rowValue: PropTypes.object,
+    cell: PropTypes.object,
+    CellValueRenderer: PropTypes.elementType,
+    isSorted: PropTypes.bool
+};
+
+export default RowCellRenderer;

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import ActorsRenderer from '../ActorsRenderer';
+import mdm, {ui} from '@reltio/mdm-module';
+import * as reactRedux from 'react-redux';
+import {EntityTypeIcon, ViewIdContext} from '@reltio/components';
+
+describe('Actors Renderer scenario', () => {
+    const NO_LABEL = '<No label>';
+    const dispatch = jest.fn();
+    const metadata = {
+        entityTypes: [
+            {
+                uri: 'configuration/entityTypes/Type',
+                label: 'Type label',
+                name: 'Type'
+            }
+        ]
+    };
+
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(dispatch);
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector());
+        jest.spyOn(mdm.selectors, 'getAbsoluteImagePath').mockReturnValue('/some/image/path');
+        jest.spyOn(mdm.selectors, 'getMetadata').mockReturnValue(metadata);
+    });
+
+    it('should render actor member icon and label', () => {
+        const actors = {
+            Type: {
+                members: [
+                    {
+                        objectURI: 'uri',
+                        label: 'Type Actor',
+                        type: 'configuration/entityTypes/Type'
+                    }
+                ]
+            }
+        };
+        const wrapper = mount(<ActorsRenderer value={actors} />);
+        const entityTypeIcon = wrapper.find(EntityTypeIcon);
+        expect(entityTypeIcon).toHaveLength(1);
+        expect(entityTypeIcon.props()).toMatchObject({
+            entityType: metadata.entityTypes[0]
+        });
+        expect(wrapper.find('.entityLabel').text()).toBe(actors.Type.members[0].label);
+    });
+
+    it('should render <No label> if entity label is empty', () => {
+        const actors = {
+            Type: {
+                members: [
+                    {
+                        objectURI: 'uri',
+                        type: 'configuration/entityTypes/Type'
+                    }
+                ]
+            }
+        };
+        const wrapper = mount(<ActorsRenderer value={actors} />);
+        expect(wrapper.find('.entityLabel').text()).toBe(NO_LABEL);
+    });
+
+    it('should dispatch open entity action on entity label click', () => {
+        const actors = {
+            Type: {
+                members: [
+                    {
+                        objectURI: 'uri',
+                        label: 'Type Actor',
+                        type: 'configuration/entityTypes/Type'
+                    }
+                ]
+            }
+        };
+        const wrapper = mount(
+            <ViewIdContext.Provider value="view123">
+                <ActorsRenderer value={actors} />
+            </ViewIdContext.Provider>
+        );
+        expect(dispatch).not.toBeCalled();
+        wrapper.find('.entityLabel').simulate('click');
+        expect(dispatch).toHaveBeenCalledWith(
+            ui.actions.openEntity({uri: actors.Type.members[0].objectURI, viewId: 'view123'})
+        );
+    });
+});