@reltio/graph 1.4.1585 → 1.4.1586-mui5

package/src/components/RightPanelRelationship/components/CollapsibleTable/CollapsibleTable.tsx

@@ -0,0 +1,100 @@
+import React, {ElementType, forwardRef, memo, useCallback, useImperativeHandle, useRef, useState} from 'react';
+import classnames from 'classnames';
+import ReactResizeDetector from 'react-resize-detector';
+import {AutoSizeList} from '@reltio/components';
+
+import {ColumnsDataItem, RowsDataItem, Sorting} from './types';
+import TableHead from './TableHead';
+import {useStyles} from './styles';
+
+type Props = {
+    classes?: {
+        tableRowWrapper?: string;
+        tableRow?: string;
+    };
+    columnsData?: ColumnsDataItem[];
+    rowsData: RowsDataItem[];
+    sorting?: Sorting;
+    onSort?: ({field, order}: {field: string; order: string}) => void;
+    getRowKey?: (index: number, data: unknown) => string;
+    ExpandedRowRenderer?: ElementType;
+    defaultRowHeight?: number;
+};
+
+const CollapsibleTable = forwardRef(
+    (
+        {classes, columnsData, rowsData, sorting, onSort, getRowKey, ExpandedRowRenderer, defaultRowHeight}: Props,
+        ref
+    ) => {
+        const styles = useStyles();
+        const [dimensions, setDimensions] = useState({
+            width: 0,
+            height: 0
+        });
+
+        const renderRow = useCallback(
+            ({data, index}) => {
+                const item = data[index];
+                return (
+                    <div className={classnames(styles.tableRowWrapper, classes?.tableRowWrapper)}>
+                        <div
+                            className={classnames(styles.tableRow, classes?.tableRow, {
+                                [styles.editingRow]: item.expanded
+                            })}
+                        >
+                            {columnsData.map(({id, rowCellValueRenderer, columnClassName}) => {
+                                const Renderer = rowCellValueRenderer;
+                                return (
+                                    <div key={id} className={columnClassName}>
+                                        <Renderer value={item[id]} rowValue={item} />
+                                    </div>
+                                );
+                            })}
+                        </div>
+                        {item.expanded && ExpandedRowRenderer && (
+                            <ExpandedRowRenderer open={item.expanded} rowValue={item} />
+                        )}
+                    </div>
+                );
+            },
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            [columnsData, ExpandedRowRenderer]
+        );
+
+        const onTableBodyResize = useCallback((width, height) => {
+            setDimensions({width, height});
+        }, []);
+
+        const listRef = useRef(null);
+
+        useImperativeHandle(ref, () => ({
+            resetScrollbarPosition: () => {
+                listRef.current?.scrollTo(0);
+            }
+        }));
+
+        return (
+            <div className={styles.table}>
+                <TableHead columnsData={columnsData} sorting={sorting} onSort={onSort} />
+                <div className={styles.tableBodyWrapper}>
+                    <ReactResizeDetector handleHeight handleWidth onResize={onTableBodyResize} />
+                    <div className={styles.tableBody}>
+                        <AutoSizeList
+                            listRef={listRef}
+                            width={dimensions.width}
+                            height={dimensions.height}
+                            data={rowsData}
+                            defaultItemSize={defaultRowHeight}
+                            itemKey={getRowKey}
+                            showNotMeasuredItems
+                        >
+                            {renderRow}
+                        </AutoSizeList>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+);
+
+export default memo(CollapsibleTable);

package/src/components/RightPanelRelationship/components/CollapsibleTable/TableHead.tsx

@@ -0,0 +1,38 @@
+import React, {memo} from 'react';
+import classnames from 'classnames';
+import {toggleSortOrder} from '@reltio/components';
+
+import {ColumnsDataItem, Sorting} from './types';
+import {useStyles} from './styles';
+
+type Props = {
+    columnsData: ColumnsDataItem[];
+    sorting: Sorting;
+    onSort?: ({field, order}: {field: string; order: string}) => void;
+};
+
+const TableHead = ({columnsData, sorting, onSort}: Props) => {
+    const styles = useStyles();
+    return (
+        <div className={classnames(styles.tableRow, styles.headRow)}>
+            {columnsData.map((columnData) => {
+                const {id, sortable, headCellRenderer, columnClassName} = columnData;
+                const HeadCellRenderer = headCellRenderer;
+                const sortHandler = () => {
+                    onSort({
+                        field: id,
+                        order: sorting.field === id ? toggleSortOrder(sorting.order) : 'asc'
+                    });
+                };
+                const sortingProps = sortable ? {sortField: sorting.field, sortOrder: sorting.order, sortHandler} : {};
+                return (
+                    <div key={id} className={columnClassName}>
+                        <HeadCellRenderer headCellData={columnData} {...sortingProps} />
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+export default memo(TableHead);

package/src/components/RightPanelRelationship/components/CollapsibleTable/__tests__/CollapsibleTable.test.tsx

@@ -0,0 +1,169 @@
+import React, {useImperativeHandle} from 'react';
+import {mount, ReactWrapper, shallow} from 'enzyme';
+import ReactResizeDetector from 'react-resize-detector';
+import {AutoSizeList} from '@reltio/components';
+
+import CollapsibleTable from '../CollapsibleTable';
+import TableHead from '../TableHead';
+
+jest.mock('react', () => ({
+    ...jest.requireActual<Record<string, unknown>>('react'),
+    useImperativeHandle: jest.fn().mockImplementation(jest.requireActual('react').useImperativeHandle)
+}));
+
+describe('CollapsibleTable tests', () => {
+    const HeadCellRenderer = () => <span>head</span>;
+    const RowCellValueRenderer1 = () => <span>value1</span>;
+    const RowCellValueRenderer2 = () => <span>value2</span>;
+    const ExpandedRowRenderer = () => <span>Expanded content</span>;
+
+    const defaultProps = {
+        columnsData: [
+            {
+                id: 'id1',
+                label: 'Some id',
+                headCellRenderer: HeadCellRenderer,
+                rowCellValueRenderer: RowCellValueRenderer1,
+                sortable: true,
+                columnClassName: 'class2'
+            },
+            {
+                id: 'id2',
+                label: '',
+                headCellRenderer: HeadCellRenderer,
+                rowCellValueRenderer: RowCellValueRenderer2
+            }
+        ],
+        rowsData: [
+            {
+                id1: 1,
+                id2: 2
+            },
+            {
+                id1: 3,
+                id2: 4
+            }
+        ],
+        sorting: {
+            order: 'asc',
+            field: 'id1'
+        },
+        onSort: jest.fn(),
+        ExpandedRowRenderer,
+        defaultRowHeight: 30,
+        getRowKey: jest.fn().mockImplementation((index) => index)
+    };
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render main parts', () => {
+        const component = shallow(<CollapsibleTable {...defaultProps} />);
+        expect(component.find(TableHead)).toHaveLength(1);
+        expect(component.find(TableHead)).toHaveLength(1);
+        const tableBodyWrapper = component.find('.tableBodyWrapper');
+        expect(tableBodyWrapper).toHaveLength(1);
+        expect(tableBodyWrapper.find(ReactResizeDetector)).toHaveLength(1);
+        const tableBody = component.find('.tableBody');
+        expect(tableBody).toHaveLength(1);
+        expect(tableBody.find(AutoSizeList)).toHaveLength(1);
+    });
+
+    it('should provide correct props for TableHead', () => {
+        const component = shallow(<CollapsibleTable {...defaultProps} />);
+        expect(component.find(TableHead).props()).toEqual({
+            columnsData: defaultProps.columnsData,
+            sorting: defaultProps.sorting,
+            onSort: defaultProps.onSort
+        });
+    });
+
+    it('should provide correct props for AutoSizeList', () => {
+        const component = shallow(<CollapsibleTable {...defaultProps} />);
+        expect(component.find(AutoSizeList).props()).toMatchObject({
+            width: 0,
+            height: 0,
+            data: defaultProps.rowsData,
+            defaultItemSize: defaultProps.defaultRowHeight,
+            itemKey: defaultProps.getRowKey,
+            showNotMeasuredItems: true
+        });
+    });
+
+    it('should set correct width/height for AutoSizeList on parent element resizing', () => {
+        const component = shallow(<CollapsibleTable {...defaultProps} />);
+        expect(component.find(AutoSizeList).props()).toMatchObject({
+            width: 0,
+            height: 0
+        });
+        const resizeDetector = component.find(ReactResizeDetector);
+        expect(resizeDetector.props()).toMatchObject({
+            handleHeight: true,
+            handleWidth: true
+        });
+        (resizeDetector.prop('onResize') as (width: number, height: number) => void)(100, 200);
+        expect(component.find(AutoSizeList).props()).toMatchObject({
+            width: 100,
+            height: 200
+        });
+    });
+
+    it('should provide resetScrollbarPosition imperative handler', () => {
+        const component = mount(<CollapsibleTable {...defaultProps} />);
+        const useImperativeHandleCalls = (useImperativeHandle as jest.Mock).mock.calls;
+        const {resetScrollbarPosition} = useImperativeHandleCalls[useImperativeHandleCalls.length - 1][1]();
+        const listRef = component.find(AutoSizeList).prop('listRef');
+        const listScrollTo = jest.spyOn(listRef.current, 'scrollTo');
+        expect(listScrollTo).not.toHaveBeenCalled();
+        resetScrollbarPosition();
+        expect(listScrollTo).toHaveBeenCalledWith(0);
+    });
+
+    it('should render correct data rows', () => {
+        const component = shallow(<CollapsibleTable {...defaultProps} />);
+        const rowRenderer = component.find(AutoSizeList).prop('children');
+        const row = new ReactWrapper(rowRenderer({data: defaultProps.rowsData, index: 1}) as JSX.Element);
+        const columnWrapper = row.find(`.${defaultProps.columnsData[0].columnClassName}`);
+        const cellValue1 = columnWrapper.find(RowCellValueRenderer1);
+        expect(cellValue1).toHaveLength(1);
+        expect(cellValue1.props()).toEqual({
+            value: defaultProps.rowsData[1].id1,
+            rowValue: defaultProps.rowsData[1]
+        });
+        const cellValue2 = row.find(RowCellValueRenderer2);
+        expect(cellValue2).toHaveLength(1);
+        expect(cellValue2.props()).toEqual({
+            value: defaultProps.rowsData[1].id2,
+            rowValue: defaultProps.rowsData[1]
+        });
+        expect(row.find(ExpandedRowRenderer)).toHaveLength(0);
+    });
+
+    it('should render expanded row', () => {
+        const props = {
+            ...defaultProps,
+            rowsData: [
+                {
+                    id1: 1,
+                    id2: 2
+                },
+                {
+                    id1: 3,
+                    id2: 4,
+                    expanded: true
+                }
+            ]
+        };
+        const component = shallow(<CollapsibleTable {...props} />);
+        const rowRenderer = component.find(AutoSizeList).prop('children');
+        const row1 = new ReactWrapper(rowRenderer({data: props.rowsData, index: 0}) as JSX.Element);
+        expect(row1.find(ExpandedRowRenderer)).toHaveLength(0);
+        const row2 = new ReactWrapper(rowRenderer({data: props.rowsData, index: 1}) as JSX.Element);
+        expect(row2.find(ExpandedRowRenderer)).toHaveLength(1);
+        expect(row2.find(ExpandedRowRenderer).props()).toEqual({
+            open: true,
+            rowValue: props.rowsData[1]
+        });
+    });
+});

package/src/components/RightPanelRelationship/components/CollapsibleTable/__tests__/TableHead.test.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import TableHead from '../TableHead';
+
+describe('TableHead tests', () => {
+    const HeadCellRenderer1 = () => <span>head1</span>;
+    const HeadCellRenderer2 = () => <span>head2</span>;
+    const RowCellValueRenderer = () => <span>value</span>;
+
+    const defaultProps = {
+        columnsData: [
+            {
+                id: 'id1',
+                label: 'Some id',
+                headCellRenderer: HeadCellRenderer1,
+                rowCellValueRenderer: RowCellValueRenderer,
+                sortable: true,
+                columnClassName: 'class1'
+            },
+            {
+                id: 'id2',
+                label: '',
+                headCellRenderer: HeadCellRenderer2,
+                rowCellValueRenderer: RowCellValueRenderer,
+                columnClassName: 'class2'
+            }
+        ],
+        sorting: {
+            order: 'desc',
+            field: 'id1'
+        },
+        onSort: jest.fn()
+    };
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render each columns head cell in column wrapper', () => {
+        const component = shallow(<TableHead {...defaultProps} />);
+        const column1Wrapper = component.find(`.${defaultProps.columnsData[0].columnClassName}`);
+        expect(column1Wrapper).toHaveLength(1);
+        const headCell1 = column1Wrapper.find(defaultProps.columnsData[0].headCellRenderer);
+        expect(headCell1).toHaveLength(1);
+        expect(headCell1.prop('headCellData')).toBe(defaultProps.columnsData[0]);
+
+        const column2Wrapper = component.find(`.${defaultProps.columnsData[1].columnClassName}`);
+        expect(column2Wrapper).toHaveLength(1);
+        const headCell2 = column2Wrapper.find(defaultProps.columnsData[1].headCellRenderer);
+        expect(headCell2).toHaveLength(1);
+        expect(headCell2.prop('headCellData')).toBe(defaultProps.columnsData[1]);
+    });
+
+    it('should provide sorting props for sortable columns', () => {
+        const component = shallow(<TableHead {...defaultProps} />);
+        const headCell1 = component.find(defaultProps.columnsData[0].headCellRenderer);
+        expect(headCell1.props()).toEqual({
+            headCellData: defaultProps.columnsData[0],
+            sortField: defaultProps.sorting.field,
+            sortOrder: defaultProps.sorting.order,
+            sortHandler: expect.any(Function)
+        });
+    });
+
+    it('should toggle sort order on sortHandler calling if sorting.field was the same', () => {
+        const props = {
+            ...defaultProps,
+            sorting: {
+                order: 'asc',
+                field: 'id1'
+            }
+        };
+        const component = shallow(<TableHead {...props} />);
+        const headCell1 = component.find(props.columnsData[0].headCellRenderer);
+        (headCell1.prop('sortHandler') as () => void)();
+        expect(props.onSort).toHaveBeenCalledWith({
+            field: props.columnsData[0].id,
+            order: 'desc'
+        });
+    });
+
+    it('should set sort order as "asc" on sortHandler calling if sorting.field was not the same', () => {
+        const props = {
+            ...defaultProps,
+            sorting: {
+                order: 'asc',
+                field: 'id2'
+            }
+        };
+        const component = shallow(<TableHead {...props} />);
+        const headCell1 = component.find(props.columnsData[0].headCellRenderer);
+        (headCell1.prop('sortHandler') as () => void)();
+        expect(props.onSort).toHaveBeenCalledWith({
+            field: props.columnsData[0].id,
+            order: 'asc'
+        });
+    });
+
+    it('should not provide sorting props for non sortable columns', () => {
+        const component = shallow(<TableHead {...defaultProps} />);
+        const headCell2 = component.find(defaultProps.columnsData[1].headCellRenderer);
+        expect(headCell2.props()).toEqual({
+            headCellData: defaultProps.columnsData[1]
+        });
+    });
+});

package/src/components/RightPanelRelationship/components/CollapsibleTable/styles.ts

@@ -0,0 +1,38 @@
+import {makeStyles} from '@mui/styles';
+
+const border = '1px solid rgba(0, 0, 0, 0.05)';
+
+export const useStyles = makeStyles({
+    table: {
+        flex: 1,
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden'
+    },
+    tableBody: {
+        height: '100%',
+        overflow: 'auto'
+    },
+    tableBodyWrapper: {
+        height: '100%',
+        overflow: 'hidden'
+    },
+    tableRowWrapper: {
+        borderBottom: border
+    },
+    tableRow: {
+        display: 'flex',
+        alignItems: 'center',
+        '& > div': {
+            flexShrink: 0
+        }
+    },
+    editingRow: {
+        paddingTop: '8px',
+        paddingBottom: '8px'
+    },
+    headRow: {
+        borderBottom: border
+    }
+});

package/src/components/RightPanelRelationship/components/CollapsibleTable/types.ts

@@ -0,0 +1,20 @@
+import {ElementType} from 'react';
+
+export type ColumnsDataItem = {
+    id: string;
+    label: string;
+    headCellRenderer: ElementType;
+    rowCellValueRenderer: ElementType;
+    sortable?: boolean;
+    columnClassName?: string;
+};
+
+export type RowsDataItem = {
+    expanded?: boolean;
+    [id: string]: unknown;
+};
+
+export type Sorting = {
+    field: string;
+    order: string;
+};

package/src/components/RightPanelRelationship/components/DeleteRelationDialog/DeleteRelationDialog.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import {pick} from 'ramda';
+import {ConfirmationDialog, withContext} from '@reltio/components';
+
+import {GraphStateContext} from '../../../../contexts/GraphStateContext';
+
+type Props = {
+    uri: string;
+    open: boolean;
+    onClose: () => void;
+    onDeleteRelation?: (uri) => void;
+};
+
+const DeleteRelationDialog = ({uri, open, onClose, onDeleteRelation}: Props) => {
+    return (
+        <ConfirmationDialog
+            open={open}
+            title={i18n.text('Do you want to make a clean break?')}
+            content={i18n.text(
+                'To end this relationship, click Delete Relationship. To keep the connection, click Cancel.'
+            )}
+            saveCaption={i18n.text('Delete relationship')}
+            discardCaption={i18n.text('Cancel')}
+            onDiscard={onClose}
+            onSave={() => {
+                onDeleteRelation(uri);
+                onClose();
+            }}
+        />
+    );
+};
+
+export default withContext(GraphStateContext, pick(['onDeleteRelation']), DeleteRelationDialog);

package/src/components/RightPanelRelationship/components/DeleteRelationDialog/__tests__/DeleteRelationDialog.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import {identity} from 'ramda';
+import {ConfirmationDialog} from '@reltio/components';
+
+import DeleteRelationDialog from '../DeleteRelationDialog';
+import {GraphStateContext} from '../../../../../contexts/GraphStateContext';
+import {GraphState} from '../../../../../types/graphDataTypes';
+
+const setUp = ({uri = '', open = false, onClose = identity, onDeleteRelation = identity} = {}) => {
+    return mount(
+        <GraphStateContext.Provider value={{onDeleteRelation} as GraphState}>
+            <DeleteRelationDialog open={open} onClose={onClose} uri={uri} />
+        </GraphStateContext.Provider>
+    );
+};
+
+describe('DeleteRelationDialog tests', () => {
+    it('should render ConfirmationDialog', () => {
+        const open = true;
+        const onClose = jest.fn();
+        const component = setUp({open, onClose});
+        const dialog = component.find(ConfirmationDialog);
+        expect(dialog).toHaveLength(1);
+        expect(dialog.prop('title')).toBe('Do you want to make a clean break?');
+        expect(dialog.prop('content')).toBe(
+            'To end this relationship, click Delete Relationship. To keep the connection, click Cancel.'
+        );
+        expect(dialog.prop('saveCaption')).toBe('Delete relationship');
+        expect(dialog.prop('discardCaption')).toBe('Cancel');
+        expect(dialog.prop('open')).toBe(open);
+        expect(dialog.prop('onDiscard')).toBe(onClose);
+    });
+
+    it('should call onDeleteRelation and onClose on dialog "onSave" prop calling', () => {
+        const open = true;
+        const uri = 'uri1';
+        const onClose = jest.fn();
+        const onDeleteRelation = jest.fn();
+        const component = setUp({uri, open, onClose, onDeleteRelation});
+        const dialog = component.find(ConfirmationDialog);
+        dialog.prop('onSave')();
+        expect(onDeleteRelation).toHaveBeenCalledWith(uri);
+        expect(onClose).toHaveBeenCalled();
+    });
+});

package/src/components/RightPanelRelationship/components/GraphAddRelationDialog/GraphAddRelationButton.tsx

@@ -0,0 +1,43 @@
+import React, {useState} from 'react';
+import i18n from 'ui-i18n';
+import {pick} from 'ramda';
+import AddIcon from '@mui/icons-material/Add';
+import {ActionButton, ActionButtonMode, withContext} from '@reltio/components';
+import {Entity} from '@reltio/mdm-sdk';
+
+import {GraphStateContext} from '../../../../contexts/GraphStateContext';
+import GraphAddRelationDialog from './GraphAddRelationDialog';
+import {useCreatableInOutRelationTypes} from './useCreatableInOutRelationTypes';
+
+type Props = {
+    selectedEntity?: Entity;
+};
+
+const GraphAddRelationButton = ({selectedEntity}: Props) => {
+    const {inRelationTypes, outRelationTypes} = useCreatableInOutRelationTypes(selectedEntity?.type);
+    const canAddSomeRelation = inRelationTypes.length + outRelationTypes.length > 0;
+    const [openDialog, setOpenDialog] = useState(false);
+    const handleClick = () => {
+        setOpenDialog(true);
+    };
+    const onCancel = () => {
+        setOpenDialog(false);
+    };
+
+    return (
+        canAddSomeRelation && (
+            <>
+                <ActionButton
+                    data-reltio-id="reltio-add-relationship-button"
+                    mode={ActionButtonMode.button}
+                    label={i18n.text('Add relationship')}
+                    icon={AddIcon}
+                    onClick={handleClick}
+                />
+                <GraphAddRelationDialog open={openDialog} onClose={onCancel} />
+            </>
+        )
+    );
+};
+
+export default withContext(GraphStateContext, pick(['selectedEntity']), GraphAddRelationButton);