@reltio/graph 1.4.1585 → 1.4.1586-mui5

package/src/components/RightPanelRelationship/components/RelationshipTable/RelationshipTable.tsx

@@ -0,0 +1,126 @@
+import React, {useEffect, useMemo, useRef} from 'react';
+import i18n from 'ui-i18n';
+import {BasicTablePagination, LinearLoadIndicator, withContext} from '@reltio/components';
+import classnames from 'classnames';
+
+import {GraphStateContext} from '../../../../contexts/GraphStateContext';
+import {RelationshipRow, RelationshipTableState} from '../../../../types/graphDataTypes';
+import CollapsibleTable from '../CollapsibleTable/CollapsibleTable';
+import HeadCellRenderer from './cell-renderers/HeadCellRenderer';
+import DefaultCellRenderer from './cell-renderers/DefaultCellRenderer';
+import ProfileCellRenderer from './cell-renderers/ProfileCellRenderer';
+import ExpandedRowRenderer from './cell-renderers/ExpandedRowRenderer';
+import ControlsCellRenderer from './cell-renderers/ControlsCellRenderer';
+import {ROWS_PER_PAGE_OPTIONS} from '../../../../constants';
+import {collapsibleTableRowClassName, useStyles} from './styles';
+
+export const getRowKey = (index: number, data: RelationshipRow[]) => {
+    const row = data[index];
+    return row.relation.uri || `${index}`;
+};
+
+const RelationshipTable = ({
+    rowsData,
+    sorting,
+    onSort,
+    total,
+    page,
+    rowsPerPage,
+    onPageChange,
+    onRowsPerPageChange,
+    editingRelations,
+    loading
+}: RelationshipTableState) => {
+    const styles = useStyles();
+
+    const columnsData = useMemo(
+        () => [
+            {
+                id: 'entityLabel',
+                label: i18n.text('Profile'),
+                headCellRenderer: HeadCellRenderer,
+                rowCellValueRenderer: ProfileCellRenderer,
+                sortable: true,
+                columnClassName: styles.profileColumn
+            },
+            {
+                id: 'relationTypeLabel',
+                label: i18n.text('Relationship type'),
+                headCellRenderer: HeadCellRenderer,
+                rowCellValueRenderer: DefaultCellRenderer,
+                sortable: true,
+                columnClassName: styles.relationshipTypeColumn
+            },
+            {
+                id: 'entityTypeLabel',
+                label: i18n.text('Entity Type'),
+                headCellRenderer: HeadCellRenderer,
+                rowCellValueRenderer: DefaultCellRenderer,
+                sortable: true,
+                columnClassName: styles.entityTypeColumn
+            },
+            {
+                id: 'controls',
+                label: '',
+                headCellRenderer: HeadCellRenderer,
+                rowCellValueRenderer: ControlsCellRenderer
+            }
+        ],
+        [styles]
+    );
+
+    const tableRef = useRef(null);
+
+    useEffect(() => {
+        tableRef.current?.resetScrollbarPosition();
+    }, [rowsData]);
+
+    const rowsDataWithExpandedInfo = useMemo(
+        () =>
+            rowsData.map((row) =>
+                editingRelations?.some((rel) => rel.initialRelation.uri === row?.relation?.uri)
+                    ? {...row, expanded: true}
+                    : row
+            ),
+        [rowsData, editingRelations]
+    );
+
+    const tableClasses = useMemo(
+        () => ({
+            tableRow: classnames(styles.row, collapsibleTableRowClassName)
+        }),
+        [styles]
+    );
+
+    return (
+        <div className={styles.tableWithPagination}>
+            <div className={styles.tableContainer}>
+                <CollapsibleTable
+                    ref={tableRef}
+                    columnsData={columnsData}
+                    rowsData={rowsDataWithExpandedInfo}
+                    sorting={sorting}
+                    onSort={onSort}
+                    getRowKey={getRowKey}
+                    ExpandedRowRenderer={ExpandedRowRenderer}
+                    defaultRowHeight={28}
+                    classes={tableClasses}
+                />
+            </div>
+            {total > ROWS_PER_PAGE_OPTIONS[0] && (
+                <BasicTablePagination
+                    count={total}
+                    rowsPerPageOptions={ROWS_PER_PAGE_OPTIONS}
+                    rowsPerPage={rowsPerPage}
+                    onChangeRowsPerPage={onRowsPerPageChange}
+                    page={page}
+                    onChangePage={onPageChange}
+                    basicTableRef={tableRef}
+                />
+            )}
+            {loading && <LinearLoadIndicator />}
+        </div>
+    );
+};
+
+export default withContext(GraphStateContext, ({relationshipTable}) => ({...relationshipTable}), RelationshipTable);

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

@@ -0,0 +1,176 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import {identity} from 'ramda';
+import {BasicTablePagination, LinearLoadIndicator} from '@reltio/components';
+
+import RelationshipTable from '../RelationshipTable';
+import {GraphStateContext} from '../../../../../contexts/GraphStateContext';
+import {GraphState} from '../../../../../types/graphDataTypes';
+import CollapsibleTable from '../../CollapsibleTable/CollapsibleTable';
+import HeadCellRenderer from '../cell-renderers/HeadCellRenderer';
+import ProfileCellRenderer from '../cell-renderers/ProfileCellRenderer';
+import DefaultCellRenderer from '../cell-renderers/DefaultCellRenderer';
+import ControlsCellRenderer from '../cell-renderers/ControlsCellRenderer';
+import ExpandedRowRenderer from '../cell-renderers/ExpandedRowRenderer';
+import {ROWS_PER_PAGE_OPTIONS} from '../../../../../constants';
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    BasicTablePagination: () => null
+}));
+
+jest.mock('../../CollapsibleTable/CollapsibleTable', () => () => null);
+
+const setUp = ({
+    rowsData = [],
+    editingRelations = [],
+    onSort = identity,
+    sorting = {order: 'asc'},
+    total = 0,
+    page = 0,
+    rowsPerPage = 25,
+    onPageChange = identity,
+    onRowsPerPageChange = identity,
+    loading = false
+} = {}) => {
+    const relationshipTable = {
+        rowsData,
+        sorting,
+        onSort,
+        total,
+        page,
+        rowsPerPage,
+        onPageChange,
+        onRowsPerPageChange,
+        editingRelations,
+        loading
+    };
+    return mount(
+        <GraphStateContext.Provider value={{relationshipTable} as GraphState}>
+            <RelationshipTable />
+        </GraphStateContext.Provider>
+    );
+};
+
+describe('RelationshipTable tests', () => {
+    it('should render CollapsibleTable and BasicTablePagination', () => {
+        const component = setUp({total: 26});
+        expect(component.find(CollapsibleTable)).toHaveLength(1);
+        expect(component.find(BasicTablePagination)).toHaveLength(1);
+    });
+
+    it('should provide correct props for CollapsibleTable', () => {
+        const rowsData = [
+            {
+                entity: {uri: '1', type: '1'},
+                relation: {uri: 'r1', type: '1'},
+                entityLabel: 'entity label',
+                entityTypeLabel: 'entity type label',
+                relationTypeLabel: 'relation type label'
+            },
+            {
+                entity: {uri: '2', type: '2'},
+                relation: {uri: 'r2', type: '2'},
+                entityLabel: 'entity label2',
+                entityTypeLabel: 'entity type label2',
+                relationTypeLabel: 'relation type label2'
+            }
+        ];
+        const sorting = {
+            field: '1',
+            order: 'desc'
+        };
+        const editingRelations = [{initialRelation: {uri: 'r1'}, relation: {uri: 'r1'}}];
+        const onSort = jest.fn();
+        const component = setUp({rowsData, sorting, onSort, editingRelations});
+        const collapsibleTable = component.find(CollapsibleTable);
+        expect(collapsibleTable.prop('columnsData')).toEqual([
+            {
+                id: 'entityLabel',
+                label: 'Profile',
+                headCellRenderer: HeadCellRenderer,
+                rowCellValueRenderer: ProfileCellRenderer,
+                sortable: true,
+                columnClassName: 'profileColumn'
+            },
+            {
+                id: 'relationTypeLabel',
+                label: 'Relationship type',
+                headCellRenderer: HeadCellRenderer,
+                rowCellValueRenderer: DefaultCellRenderer,
+                sortable: true,
+                columnClassName: 'relationshipTypeColumn'
+            },
+            {
+                id: 'entityTypeLabel',
+                label: 'Entity Type',
+                headCellRenderer: HeadCellRenderer,
+                rowCellValueRenderer: DefaultCellRenderer,
+                sortable: true,
+                columnClassName: 'entityTypeColumn'
+            },
+            {
+                id: 'controls',
+                label: '',
+                headCellRenderer: HeadCellRenderer,
+                rowCellValueRenderer: ControlsCellRenderer
+            }
+        ]);
+        expect(collapsibleTable.prop('rowsData')).toEqual([
+            {
+                ...rowsData[0],
+                expanded: true
+            },
+            rowsData[1]
+        ]);
+        expect(collapsibleTable.prop('sorting')).toBe(sorting);
+        expect(collapsibleTable.prop('onSort')).toBe(onSort);
+        expect(collapsibleTable.prop('ExpandedRowRenderer')).toBe(ExpandedRowRenderer);
+        expect(collapsibleTable.prop('defaultRowHeight')).toBe(28);
+        expect(collapsibleTable.prop('getRowKey')(0, rowsData)).toBe('r1');
+    });
+
+    it('should provide correct props for BasicTablePagination', () => {
+        const total = 26;
+        const rowsPerPage = 25;
+        const page = 1;
+        const onPageChange = jest.fn();
+        const onRowsPerPageChange = jest.fn();
+        const component = setUp({
+            total,
+            rowsPerPage,
+            page,
+            onPageChange,
+            onRowsPerPageChange
+        });
+        const basicTablePagination = component.find(BasicTablePagination);
+        expect(basicTablePagination.prop('count')).toBe(total);
+        expect(basicTablePagination.prop('rowsPerPageOptions')).toBe(ROWS_PER_PAGE_OPTIONS);
+        expect(basicTablePagination.prop('rowsPerPage')).toBe(rowsPerPage);
+        expect(basicTablePagination.prop('onChangeRowsPerPage')).toBe(onRowsPerPageChange);
+        expect(basicTablePagination.prop('page')).toBe(page);
+        expect(basicTablePagination.prop('onChangePage')).toBe(onPageChange);
+    });
+
+    it('should not render BasicTablePagination if total is not more than ROWS_PER_PAGE_OPTIONS[0]', () => {
+        const component = setUp({total: 25});
+        expect(component.find(CollapsibleTable)).toHaveLength(1);
+        expect(component.find(BasicTablePagination)).toHaveLength(0);
+    });
+
+    it('should still render BasicTablePagination if total is not more than rowsPerPage but more than ROWS_PER_PAGE_OPTIONS[0]', () => {
+        const component = setUp({total: 26, rowsPerPage: 50});
+        expect(component.find(CollapsibleTable)).toHaveLength(1);
+        expect(component.find(BasicTablePagination)).toHaveLength(1);
+    });
+
+    it('should render LinearLoadIndicator if loading prop is passed', () => {
+        const component = setUp({loading: true});
+        expect(component.find(LinearLoadIndicator)).toHaveLength(1);
+    });
+
+    it('should not render LinearLoadIndicator if loading prop is not passed', () => {
+        const component = setUp();
+        expect(component.find(LinearLoadIndicator)).toHaveLength(0);
+    });
+});

package/src/components/RightPanelRelationship/components/RelationshipTable/cell-renderers/ControlsCellRenderer.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import {useSelector} from 'react-redux';
+import {SmallIconButtonWithTooltip, withContext} from '@reltio/components';
+import mdmModule from '@reltio/mdm-module';
+import {checkMetadataForUpdate, checkMetadataForDelete, getRelationType, Mode} from '@reltio/mdm-sdk';
+import EditIcon from '@mui/icons-material/Edit';
+
+import {GraphStateContext} from '../../../../../contexts/GraphStateContext';
+import {RelationshipRow} from '../../../../../types/graphDataTypes';
+import DeleteRelationButton from './components/DeleteRelationButton';
+import {useStyles} from './styles';
+
+type Props = {
+    rowValue: RelationshipRow;
+    className?: string;
+    onEdit?: (uri: string) => void;
+    isEditing?: boolean;
+};
+
+const ControlsCellRenderer = ({
+    rowValue: {
+        relation: {uri, type}
+    },
+    className,
+    onEdit,
+    isEditing
+}: Props) => {
+    const styles = useStyles();
+    const metadata = useSelector(mdmModule.selectors.getMetadata);
+    const relationType = getRelationType(metadata, type);
+    const canEdit = checkMetadataForUpdate(Mode.Editing, relationType);
+    const canDelete = checkMetadataForDelete(Mode.Editing, relationType);
+    return (
+        <div className={classnames(styles.controlsCell, className, {[styles.editingMode]: isEditing})}>
+            {canEdit && (
+                <SmallIconButtonWithTooltip
+                    className={classnames(styles.editButton, {[styles.hidden]: isEditing})}
+                    icon={EditIcon}
+                    size={'XXS'}
+                    tooltipTitle={i18n.text('Edit')}
+                    data-reltio-id="reltio-edit-relationship-button"
+                    onClick={() => onEdit(uri)}
+                />
+            )}
+            {canDelete && <DeleteRelationButton uri={uri} />}
+        </div>
+    );
+};
+
+export default withContext(
+    GraphStateContext,
+    ({relationshipTable: {onStartRelationEditing, editingRelations}}, props) => ({
+        onEdit: onStartRelationEditing,
+        isEditing: editingRelations.some((rel) => rel.initialRelation.uri === props?.rowValue.relation?.uri)
+    }),
+    ControlsCellRenderer
+);

package/src/components/RightPanelRelationship/components/RelationshipTable/cell-renderers/DefaultCellRenderer.tsx

@@ -0,0 +1,29 @@
+import React, {memo, ReactNode} from 'react';
+import classnames from 'classnames';
+import {ExpandedValueTooltip} from '@reltio/components';
+
+import {useStyles} from './styles';
+
+type Props = {
+    value?: ReactNode | string;
+    tooltip?: string;
+    className?: string;
+    onClick?: () => void;
+};
+
+const DefaultCellRenderer = ({value = '', tooltip, onClick, className}: Props) => {
+    const styles = useStyles();
+    tooltip = tooltip || (value as string);
+    return (
+        <ExpandedValueTooltip value={tooltip}>
+            <div
+                className={classnames(styles.defaultCell, className, {[styles.clickable]: !!onClick})}
+                onClick={onClick}
+            >
+                {value}
+            </div>
+        </ExpandedValueTooltip>
+    );
+};
+
+export default memo(DefaultCellRenderer);

package/src/components/RightPanelRelationship/components/RelationshipTable/cell-renderers/ExpandedRowRenderer.tsx

@@ -0,0 +1,94 @@
+import React, {useCallback, useMemo} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import Button from '@mui/material/Button';
+import {equals} from 'ramda';
+import i18n from 'ui-i18n';
+
+import {EditingConnection, Relation, validateConnectionRelation} from '@reltio/mdm-sdk';
+import mdm, {profile} from '@reltio/mdm-module';
+import {withContext, ConnectionEditor, useEditableConnection} from '@reltio/components';
+
+import {RelationshipRow} from '../../../../../types/graphDataTypes';
+import {GraphStateContext} from '../../../../../contexts/GraphStateContext';
+
+import {useStyles} from './styles';
+
+type Props = {
+    open: boolean;
+    rowValue: RelationshipRow;
+    editingRelationObject?: {initialRelation: Relation; relation: Relation};
+    onUpdateEditingRelation?: (relation: Relation) => void;
+    onCancelRelationEditing?: (uri: string) => void;
+    onSaveEditingRelation?: (oldRelation: Relation, newRelation: Relation) => void;
+    loading?: boolean;
+};
+
+export const ExpandedRowRenderer = ({
+    open,
+    editingRelationObject,
+    onUpdateEditingRelation,
+    onCancelRelationEditing,
+    onSaveEditingRelation
+}: Props) => {
+    const dispatch = useDispatch();
+    const metadata = useSelector(mdm.selectors.getMetadata);
+    const {relation: editingRelation, initialRelation} = editingRelationObject;
+    const hasChanges = useMemo(() => !equals(initialRelation, editingRelation), [editingRelation, initialRelation]);
+    const styles = useStyles();
+    const onUpdateConnection = useCallback(
+        ({relation}: EditingConnection) => onUpdateEditingRelation(relation),
+        [onUpdateEditingRelation]
+    );
+
+    const handleCancelRelationEditing = useCallback(
+        () => onCancelRelationEditing(editingRelation.uri),
+        [onCancelRelationEditing, editingRelation.uri]
+    );
+    const connection = useMemo(() => ({relation: editingRelation}), [editingRelation]);
+    const {onAddAttributes, onChangeAttribute, onRemoveAttribute} = useEditableConnection({
+        connection,
+        onConnectionChange: onUpdateConnection
+    });
+
+    const validate = (relation: Relation) => {
+        const errors = validateConnectionRelation(metadata, {relation: {object: relation}});
+        dispatch(profile.errors.actions.errorsSet(errors));
+        return errors.length === 0;
+    };
+
+    const onSave = () => {
+        if (validate(editingRelation)) {
+            onSaveEditingRelation(initialRelation, editingRelation);
+        }
+    };
+
+    return open ? (
+        <div className={styles.expandedRow}>
+            <ConnectionEditor
+                connection={connection}
+                onAddAttributes={onAddAttributes}
+                onChangeAttribute={onChangeAttribute}
+                onRemoveAttribute={onRemoveAttribute}
+            />
+            <div className={styles.actionButtons}>
+                <Button onClick={handleCancelRelationEditing}>{i18n.text('Cancel')}</Button>
+                <Button color="primary" disabled={!hasChanges} onClick={onSave}>
+                    {i18n.text('Save')}
+                </Button>
+            </div>
+        </div>
+    ) : null;
+};
+
+export default withContext(
+    GraphStateContext,
+    ({relationshipTable}, props) => ({
+        editingRelationObject: relationshipTable.editingRelations.find(
+            (rel) => rel.initialRelation.uri === props?.rowValue.relation?.uri
+        ),
+        onUpdateEditingRelation: relationshipTable.onUpdateEditingRelation,
+        onCancelRelationEditing: relationshipTable.onCancelRelationEditing,
+        onSaveEditingRelation: relationshipTable.onSaveEditingRelation
+    }),
+    ExpandedRowRenderer
+);

package/src/components/RightPanelRelationship/components/RelationshipTable/cell-renderers/HeadCellRenderer.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import classnames from 'classnames';
+import DefaultHeadCellRenderer from 'react-components/dist/Table/DefaultHeadCellRenderer/DefaultHeadCellRenderer';
+import {ExpandedValueTooltip} from '@reltio/components';
+
+import {ColumnsDataItem} from '../../CollapsibleTable/types';
+import {useStyles} from './styles';
+
+type Props = {
+    className?: string;
+    headCellData: ColumnsDataItem;
+};
+
+const HeadCellRenderer = ({className, headCellData, ...otherProps}: Props) => {
+    const styles = useStyles();
+
+    return (
+        <div className={classnames(styles.headCell, className)}>
+            <DefaultHeadCellRenderer
+                {...otherProps}
+                headCellData={{
+                    ...headCellData,
+                    label: (
+                        <ExpandedValueTooltip value={headCellData.label}>
+                            <div className={styles.headLabel}>{headCellData.label}</div>
+                        </ExpandedValueTooltip>
+                    )
+                }}
+            />
+        </div>
+    );
+};
+
+export default HeadCellRenderer;

package/src/components/RightPanelRelationship/components/RelationshipTable/cell-renderers/ProfileCellRenderer.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {EntityAvatar, withContext} from '@reltio/components';
+import classnames from 'classnames';
+
+import DefaultCellRenderer from './DefaultCellRenderer';
+import {GraphStateContext} from '../../../../../contexts/GraphStateContext';
+import {RelationshipRow} from '../../../../../types/graphDataTypes';
+import {useStyles} from './styles';
+
+type Props = {
+    value: string;
+    className?: string;
+    rowValue: RelationshipRow;
+    onClick?: (entityUri: string) => void;
+};
+
+export const ProfileCellRenderer = ({value, rowValue: {entity}, className, onClick}: Props) => {
+    const styles = useStyles();
+    const cellValue = (
+        <>
+            <EntityAvatar entity={entity} avatarClassName={styles.entityAvatar} />
+            {value}
+        </>
+    );
+    return (
+        <DefaultCellRenderer
+            value={cellValue}
+            tooltip={value}
+            className={classnames(styles.profileCell, className)}
+            onClick={() => onClick(entity.uri)}
+        />
+    );
+};
+
+export default withContext(
+    GraphStateContext,
+    ({onEntitySelect}) => ({
+        onClick: onEntitySelect
+    }),
+    ProfileCellRenderer
+);

package/src/components/RightPanelRelationship/components/RelationshipTable/cell-renderers/__tests__/ControlsCellRenderer.test.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {identity} from 'ramda';
+import {SmallIconButtonWithTooltip} from '@reltio/components';
+
+import ControlsCellRenderer from '../ControlsCellRenderer';
+import {GraphStateContext} from '../../../../../../contexts/GraphStateContext';
+import {GraphState, RelationshipRow} from '../../../../../../types/graphDataTypes';
+import DeleteRelationButton from '../components/DeleteRelationButton';
+
+const relation = {
+    uri: '1',
+    type: 'configuration/relationTypes/Family'
+};
+
+const setUp = ({rowValue = {relation}, onStartRelationEditing = identity} = {}) => {
+    const relationshipTable = {
+        onStartRelationEditing,
+        editingRelations: []
+    };
+    return mount(
+        <GraphStateContext.Provider value={{relationshipTable} as GraphState}>
+            <ControlsCellRenderer rowValue={rowValue as RelationshipRow} />
+        </GraphStateContext.Provider>
+    );
+};
+
+describe('ControlsCellRenderer tests', () => {
+    let store;
+    beforeEach(() => {
+        store = {
+            metadata: {
+                t1: {
+                    relationTypes: [
+                        {
+                            access: ['READ', 'DELETE', 'UPDATE'],
+                            uri: 'configuration/relationTypes/Family'
+                        }
+                    ]
+                }
+            },
+            tenant: {
+                id: 't1'
+            }
+        };
+    });
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+
+    it('should not render edit button if there is no UPDATE permission', () => {
+        store.metadata.t1.relationTypes[0].access = ['READ', 'DELETE'];
+        const component = setUp();
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(1);
+        expect(component.find(SmallIconButtonWithTooltip)).not.toBe('Edit');
+    });
+
+    it('should not render delete button if there is no DELETE permission', () => {
+        store.metadata.t1.relationTypes[0].access = ['READ', 'UPDATE'];
+        const component = setUp();
+        expect(component.find(DeleteRelationButton)).toHaveLength(0);
+    });
+
+    it('should render edit button', () => {
+        const onEdit = jest.fn();
+        const component = setUp({onStartRelationEditing: onEdit});
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(2);
+        const editButton = component.find(SmallIconButtonWithTooltip).at(0);
+        expect(editButton.prop('tooltipTitle')).toBe('Edit');
+        (editButton.prop('onClick') as () => void)();
+        expect(onEdit).toHaveBeenCalledWith(relation.uri);
+    });
+
+    it('should render delete button', () => {
+        const component = setUp();
+        expect(component.find(DeleteRelationButton)).toHaveLength(1);
+        expect(component.find(DeleteRelationButton).prop('uri')).toBe(relation.uri);
+    });
+});