@reltio/graph 1.4.1585 → 1.4.1586-mui5

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import {ReactWrapper, shallow} from 'enzyme';
+import {ExpandedValueTooltip} from '@reltio/components';
+
+import DefaultCellRenderer from '../DefaultCellRenderer';
+
+describe('DefaultCellRenderer tests', () => {
+    it('should render main parts', () => {
+        const wrapper = shallow(<DefaultCellRenderer />);
+        const cell = wrapper.find(ExpandedValueTooltip);
+        expect(cell).toHaveLength(1);
+        expect(cell.prop('value')).toEqual('');
+        expect(new ReactWrapper(cell.prop('children')).text()).toBe('');
+    });
+
+    it('should render correct value', () => {
+        const value = 'Test';
+        const wrapper = shallow(<DefaultCellRenderer value={value} />);
+        const expandedValueTooltip = wrapper.find(ExpandedValueTooltip);
+        expect(expandedValueTooltip).toHaveLength(1);
+        expect(expandedValueTooltip.prop('value')).toEqual(value);
+        const cell = expandedValueTooltip.find('.defaultCell');
+        expect(cell.text()).toBe(value);
+        expect(cell.hasClass('clickable')).toBe(false);
+        expect(cell.prop('onClick')).toBeUndefined();
+    });
+
+    it('should support onClick', () => {
+        const value = 'Test';
+        const onClick = jest.fn();
+        const wrapper = shallow(<DefaultCellRenderer value={value} onClick={onClick} />);
+        const cell = wrapper.find(ExpandedValueTooltip).find('.defaultCell');
+        expect(cell.text()).toBe(value);
+        expect(cell.hasClass('clickable')).toBe(true);
+        expect(cell.prop('onClick')).toBe(onClick);
+    });
+
+    it('should support tooltip prop', () => {
+        const value = 'Test';
+        const tooltip = 'Tooltip';
+        const wrapper = shallow(<DefaultCellRenderer value={value} tooltip={tooltip} />);
+        const expandedValueTooltip = wrapper.find(ExpandedValueTooltip);
+        expect(expandedValueTooltip).toHaveLength(1);
+        expect(expandedValueTooltip.prop('value')).toEqual(tooltip);
+        expect(expandedValueTooltip.find('.defaultCell').text()).toBe(value);
+    });
+});

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

@@ -0,0 +1,166 @@
+import {mount} from 'enzyme';
+import ExpandedRowRenderer from '../ExpandedRowRenderer';
+import React from 'react';
+import {ConnectionEditor} from '@reltio/components';
+import Button from '@mui/material/Button';
+import {GraphStateContext} from '../../../../../../contexts/GraphStateContext';
+import {GraphState, RelationshipTableState} from '../../../../../../types/graphDataTypes';
+import * as reactRedux from 'react-redux';
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    useEditableConnection: jest.fn().mockImplementation(({onConnectionChange}) => ({
+        onChangeAttribute: (attribute) => onConnectionChange({relation: {type: 'onChange', payload: attribute}}),
+        onAddAttributes: (attributes) => onConnectionChange({relation: {type: 'onAdd', payload: attributes}}),
+        onRemoveAttribute: (attribute) => onConnectionChange({relation: {type: 'onRemove', payload: attribute}})
+    })),
+    ConnectionEditor: () => null
+}));
+
+const relation = {
+    attributes: {
+        FirstName: [
+            {
+                type: 'configuration/entityTypes/HCP/attributes/FirstName',
+                ov: true,
+                value: 'HCP_5',
+                uri: 'entities/19oYeyx1/attributes/FirstName/1dg2njmxf'
+            }
+        ]
+    },
+    uri: 'relation/uri',
+    type: 'configuration/relationTypes/HCPtoHCA',
+    startDate: 123
+};
+
+const props = {
+    open: true,
+    rowValue: {
+        relation: {
+            uri: 'relation/uri',
+            type: 'configuration/relationTypes/HCPtoHCA'
+        },
+        entity: {uri: 'entity', label: 'label', type: 'HCP'},
+        entityLabel: '',
+        entityTypeLabel: '',
+        relationTypeLabel: ''
+    }
+};
+
+const relationshipTable: RelationshipTableState = {
+    onSaveEditingRelation: jest.fn(),
+    onCancelRelationEditing: jest.fn(),
+    onUpdateEditingRelation: jest.fn(),
+    editingRelations: [
+        {
+            initialRelation: relation,
+            relation
+        }
+    ]
+};
+
+const store = {
+    metadata: {
+        t1: {
+            relationTypes: [
+                {
+                    uri: 'configuration/relationTypes/HCPtoHCA'
+                }
+            ]
+        }
+    },
+    tenant: {id: 't1'}
+};
+
+const setUp = () =>
+    mount(
+        <GraphStateContext.Provider value={{relationshipTable} as GraphState}>
+            <ExpandedRowRenderer {...props} />
+        </GraphStateContext.Provider>
+    );
+
+describe('ExpandedRowRenderer tests', () => {
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+        jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(jest.fn());
+    });
+    it('should render ConnectionEditor', () => {
+        const component = setUp();
+        const payloadItem = {
+            parentUri: 'relations/8908',
+            attributeType: {
+                label: 'Role',
+                name: 'Role',
+                type: 'String',
+                uri: 'configuration/relationTypes/knowledge/attributes/Role'
+            },
+            index: 0
+        };
+        expect(component.find(ConnectionEditor)).toHaveLength(1);
+        expect(component.find(ConnectionEditor).prop('connection')).toEqual({
+            relation: relationshipTable.editingRelations[0].relation
+        });
+        component.find(ConnectionEditor).prop('onAddAttributes')([payloadItem, payloadItem]);
+        expect(relationshipTable.onUpdateEditingRelation).toHaveBeenCalledWith({
+            type: 'onAdd',
+            payload: [payloadItem, payloadItem]
+        });
+        component.find(ConnectionEditor).prop('onChangeAttribute')(payloadItem);
+        expect(relationshipTable.onUpdateEditingRelation).toHaveBeenCalledWith({
+            type: 'onChange',
+            payload: payloadItem
+        });
+        component.find(ConnectionEditor).prop('onRemoveAttribute')(payloadItem);
+        expect(relationshipTable.onUpdateEditingRelation).toHaveBeenCalledWith({
+            type: 'onRemove',
+            payload: payloadItem
+        });
+    });
+
+    it('should call onSaveEditingRelation on click saving button', () => {
+        const component = setUp();
+        const button = component.find(Button).at(1);
+        expect(button.prop('children')).toEqual('Save');
+        expect(button.prop('disabled')).toBe(true);
+        expect(button.prop('children')).toEqual('Save');
+        component.setProps({
+            value: {
+                relationshipTable: {
+                    ...relationshipTable,
+                    editingRelations: [
+                        {
+                            ...relationshipTable.editingRelations[0],
+                            relation: {
+                                ...relationshipTable.editingRelations[0].relation,
+                                attributes: {}
+                            }
+                        }
+                    ]
+                }
+            }
+        });
+
+        component.update();
+
+        const buttonAfterUpdating = component.find(Button).at(1);
+        expect(buttonAfterUpdating.prop('children')).toEqual('Save');
+        expect(buttonAfterUpdating.prop('disabled')).toBe(false);
+        expect(relationshipTable.onSaveEditingRelation).not.toHaveBeenCalled();
+        buttonAfterUpdating.simulate('click');
+        expect(relationshipTable.onSaveEditingRelation).toHaveBeenCalledWith(
+            relationshipTable.editingRelations[0].initialRelation,
+            {
+                ...relationshipTable.editingRelations[0].relation,
+                attributes: {}
+            }
+        );
+    });
+
+    it('should call onCancelRelationEditing on click cancel button', () => {
+        const component = setUp();
+        const button = component.find(Button).at(0);
+        expect(button.prop('children')).toEqual('Cancel');
+        button.simulate('click');
+        expect(relationshipTable.onCancelRelationEditing).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import {ReactWrapper, shallow} from 'enzyme';
+import DefaultHeadCellRenderer from 'react-components/dist/Table/DefaultHeadCellRenderer/DefaultHeadCellRenderer';
+import {ExpandedValueTooltip} from '@reltio/components';
+
+import HeadCellRenderer from '../HeadCellRenderer';
+import {ColumnsDataItem} from '../../../CollapsibleTable/types';
+
+describe('HeadCellRenderer tests', () => {
+    it('should render main parts', () => {
+        const header = 'Test header';
+        const wrapper = shallow(<HeadCellRenderer headCellData={{label: header} as ColumnsDataItem} />);
+        const cell = wrapper.find(DefaultHeadCellRenderer);
+        expect(cell).toHaveLength(1);
+        const headCellData = cell.prop('headCellData') as {label: JSX.Element};
+        const cellData = new ReactWrapper(headCellData.label);
+        expect(cellData).toHaveLength(1);
+        const labelWrapper = cellData.find(ExpandedValueTooltip);
+        expect(labelWrapper).toHaveLength(1);
+        expect(labelWrapper.prop('value')).toEqual(header);
+        expect(new ReactWrapper(labelWrapper.prop('children')).text()).toBe(header);
+    });
+});

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import {mount, ReactWrapper} from 'enzyme';
+import {identity} from 'ramda';
+
+import ProfileCellRenderer from '../ProfileCellRenderer';
+import {GraphStateContext} from '../../../../../../contexts/GraphStateContext';
+import {GraphState, RelationshipRow} from '../../../../../../types/graphDataTypes';
+import DefaultCellRenderer from '../DefaultCellRenderer';
+import {EntityAvatar} from '@reltio/components';
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    EntityAvatar: () => null
+}));
+
+const profileValue = 'Profile1';
+const entity = {uri: '1'};
+
+const setUp = ({value = profileValue, className = 'class1', rowValue = {entity}, onEntitySelect = identity} = {}) =>
+    mount(
+        <GraphStateContext.Provider value={{onEntitySelect} as GraphState}>
+            <ProfileCellRenderer value={value} rowValue={rowValue as RelationshipRow} className={className} />
+        </GraphStateContext.Provider>
+    );
+
+describe('ProfileCellRenderer tests', () => {
+    it('should render DefaultCellRenderer with correct props', () => {
+        const component = setUp();
+        const defaultCellRenderer = component.find(DefaultCellRenderer);
+        expect(defaultCellRenderer).toHaveLength(1);
+        expect(defaultCellRenderer.prop('tooltip')).toBe(profileValue);
+        expect(defaultCellRenderer.hasClass('class1')).toBe(true);
+        const cellValue = new ReactWrapper(defaultCellRenderer.prop('value') as JSX.Element);
+        expect(cellValue.find(EntityAvatar)).toHaveLength(1);
+        expect(cellValue.find(EntityAvatar).prop('entity')).toBe(entity);
+        expect(cellValue.at(1).text()).toBe(profileValue);
+    });
+
+    it('should render DefaultCellRenderer with correct props', () => {
+        const onEntitySelect = jest.fn();
+        const component = setUp({onEntitySelect});
+        const defaultCellRenderer = component.find(DefaultCellRenderer);
+        expect(defaultCellRenderer).toHaveLength(1);
+        defaultCellRenderer.prop('onClick')();
+        expect(onEntitySelect).toHaveBeenCalledWith(entity.uri);
+    });
+});

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

@@ -0,0 +1,32 @@
+import React, {memo, useCallback, useState} from 'react';
+import i18n from 'ui-i18n';
+import {SmallIconButtonWithTooltip} from '@reltio/components';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+import DeleteRelationDialog from '../../../DeleteRelationDialog/DeleteRelationDialog';
+
+type Props = {
+    uri: string;
+};
+
+const DeleteRelationButton = memo(({uri}: Props) => {
+    const [open, setOpen] = useState(false);
+    const onOpen = useCallback(() => setOpen(true), []);
+    const onClose = useCallback(() => setOpen(false), []);
+    return (
+        <>
+            <SmallIconButtonWithTooltip
+                icon={DeleteIcon}
+                size={'XXS'}
+                tooltipTitle={i18n.text('Delete')}
+                data-reltio-id="reltio-delete-relation-button"
+                onClick={onOpen}
+            />
+            <DeleteRelationDialog open={open} onClose={onClose} uri={uri} />
+        </>
+    );
+});
+
+DeleteRelationButton.displayName = 'DeleteRelationButton';
+
+export default DeleteRelationButton;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {act} from 'react-dom/test-utils';
+import {SmallIconButtonWithTooltip} from '@reltio/components';
+
+import DeleteRelationButton from '../DeleteRelationButton';
+import DeleteRelationDialog from '../../../../DeleteRelationDialog/DeleteRelationDialog';
+import {rerenderWrapper} from '../../../../../../../../../../__mocks__/test-utils';
+
+const setUp = ({uri = ''} = {}) => {
+    return shallow(<DeleteRelationButton uri={uri} />);
+};
+
+describe('DeleteRelationButton tests', () => {
+    it('should open DeleteRelationDialog on SmallIconButtonWithTooltip click', () => {
+        const component = setUp({uri: '1'});
+        expect(component.find(SmallIconButtonWithTooltip)).toHaveLength(1);
+        expect(component.find(DeleteRelationDialog)).toHaveLength(1);
+        const deleteButton = component.find(SmallIconButtonWithTooltip);
+        expect(deleteButton.prop('tooltipTitle')).toBe('Delete');
+        expect(component.find(DeleteRelationDialog).prop('open')).toBe(false);
+        act(() => {
+            (deleteButton.prop('onClick') as () => void)();
+        });
+        rerenderWrapper(component);
+        expect(component.find(DeleteRelationDialog).prop('open')).toBe(true);
+    });
+});

package/src/components/RightPanelRelationship/components/RelationshipTable/cell-renderers/styles.ts

@@ -0,0 +1,113 @@
+import {makeStyles} from '@mui/styles';
+import {collapsibleTableRowClassName, hoverBackground} from '../styles';
+
+const textOverflow = {
+    content: '""',
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    width: '40px',
+    height: '100%',
+    background: 'linear-gradient(to right, rgba(255, 255, 255, 0.2), #fff 100%)',
+    pointerEvents: 'none'
+};
+
+const hoverRule = `.${collapsibleTableRowClassName}:hover &`;
+
+const textOverflowWithHover = {
+    ...textOverflow,
+    [hoverRule]: {
+        background: `linear-gradient(to right, rgba(238, 238, 238, 0), ${hoverBackground} 100%)`
+    }
+};
+
+export const useStyles = makeStyles((theme) => ({
+    headCell: {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        height: '33px',
+        padding: '6px 0 6px 16px',
+        '&>div': {
+            flexDirection: 'row'
+        },
+        '&>div>span[role=button]': {
+            width: 'calc(100% + 49px)'
+        }
+    },
+    headLabel: {
+        color: theme.palette.text.primary,
+        fontSize: '12px',
+        fontWeight: 500,
+        lineHeight: '16px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        '&:after': textOverflow
+    },
+    defaultCell: {
+        position: 'relative',
+        color: theme.palette.text.primary,
+        fontSize: '13px',
+        fontWeight: 'normal',
+        lineHeight: '15px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+        padding: '6px 16px',
+        '&:after': textOverflowWithHover
+    },
+    clickable: {
+        cursor: 'pointer'
+    },
+    profileCell: {
+        paddingTop: '3px',
+        paddingBottom: '4px'
+    },
+    controlsCell: {
+        position: 'absolute',
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+        flexShrink: 0,
+        top: 0,
+        right: '9px',
+        visibility: 'hidden',
+        [hoverRule]: {
+            visibility: 'visible',
+            background: hoverBackground
+        }
+    },
+    editingMode: {
+        visibility: 'visible'
+    },
+    hidden: {
+        visibility: 'hidden'
+    },
+    editButton: {
+        marginRight: '7px'
+    },
+    entityAvatar: {
+        width: '20px',
+        height: '20px',
+        marginRight: '8px'
+    },
+    actionButtons: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        margin: '0 8px 10px',
+
+        '& > button': {
+            fontSize: '14px',
+            lineHeight: '16px',
+            marginLeft: '8px',
+            padding: '10px 8px',
+            backgroundColor: 'rgba(98, 2, 238, 0)'
+        }
+    },
+    expandedRow: {
+        padding: '0 16px 6px',
+        fontSize: '13px'
+    }
+}));

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

@@ -0,0 +1,36 @@
+import {makeStyles} from '@mui/styles';
+
+export const collapsibleTableRowClassName = 'collapsibleTableRow';
+export const hoverBackground = 'rgba(238, 238, 238, 1)';
+
+export const useStyles = makeStyles({
+    tableWithPagination: {
+        flex: 1,
+        overflow: 'hidden',
+        paddingRight: '1px',
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    tableContainer: {
+        flex: 1,
+        overflow: 'hidden'
+    },
+    profileColumn: {
+        minWidth: '180px',
+        flex: 3
+    },
+    relationshipTypeColumn: {
+        minWidth: '70px',
+        flex: 1
+    },
+    entityTypeColumn: {
+        minWidth: '70px',
+        flex: 1
+    },
+    row: {
+        position: 'relative',
+        '&:hover': {
+            background: hoverBackground
+        }
+    }
+});

package/src/components/RightPanelRelationship/components/RelationshipsFilters/RelationshipsFilters.tsx

@@ -0,0 +1,41 @@
+import React, {useState} from 'react';
+import {pick, pipe, prop} from 'ramda';
+import {withContext} from '@reltio/components';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import IconButton from '@mui/material/IconButton';
+import RelationshipsSearchTextField from './RelationshipsSearchTextField/RelationshipsSearchTextField';
+import RelationshipsFiltersDialog from './RelationshipsFiltersDialog/RelationshipsFiltersDialog';
+import {RelationshipTableState} from '../../../../types/graphDataTypes';
+import {GraphStateContext} from '../../../../contexts/GraphStateContext';
+import {useStyles} from './styles';
+
+type Props = Partial<Pick<RelationshipTableState, 'filters'>>;
+
+const RelationshipsFilters = ({filters}: Props) => {
+    const styles = useStyles();
+    const [open, setOpen] = useState(false);
+
+    const handleOpenDialog = () => setOpen(true);
+    const handleCloseDialog = () => setOpen(false);
+
+    const {entityTypesUris, relationTypesUris} = filters;
+
+    const hasAppliedFilters = entityTypesUris.length || relationTypesUris.length;
+
+    return (
+        <div className={styles.wrapper}>
+            <RelationshipsSearchTextField />
+            <IconButton
+                data-reltio-id="reltio-filter-relationship-button"
+                className={styles.iconButton}
+                onClick={handleOpenDialog}
+                size="large"
+            >
+                <FilterListIcon className={hasAppliedFilters ? styles.activeFiltersIcon : styles.inactiveFiltersIcon} />
+            </IconButton>
+            <RelationshipsFiltersDialog open={open} onClose={handleCloseDialog} />
+        </div>
+    );
+};
+
+export default withContext(GraphStateContext, pipe(prop('relationshipTable'), pick(['filters'])), RelationshipsFilters);

package/src/components/RightPanelRelationship/components/RelationshipsFilters/RelationshipsFiltersDialog/RelationshipsFiltersDialog.tsx

@@ -0,0 +1,91 @@
+import React, {useEffect, useState} from 'react';
+import i18n from 'ui-i18n';
+import {pipe, pick, prop} from 'ramda';
+import {EntityTypesSelector, RelationTypesSelector, withContext} from '@reltio/components';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import Typography from '@mui/material/Typography';
+import {GraphStateContext} from '../../../../../contexts/GraphStateContext';
+import {RelationshipTableState} from '../../../../../types/graphDataTypes';
+import {useStyles} from './styles';
+
+type Props = {
+    open: boolean;
+    onClose: () => void;
+} & Partial<Pick<RelationshipTableState, 'filters' | 'onFilter' | 'entityTypesOptions' | 'relationTypesOptions'>>;
+
+const RelationshipsFiltersDialog = ({
+    open,
+    onClose,
+    filters,
+    onFilter,
+    entityTypesOptions,
+    relationTypesOptions
+}: Props) => {
+    const styles = useStyles();
+
+    const [localSelectedEntityTypes, setLocalSelectedEntityTypes] = useState([]);
+    const [localSelectedRelationTypes, setLocalSelectedRelationTypes] = useState([]);
+
+    const handleCancel = () => {
+        setLocalSelectedEntityTypes(filters.entityTypesUris);
+        setLocalSelectedRelationTypes(filters.relationTypesUris);
+        onClose();
+    };
+
+    const handleApply = () => {
+        onFilter({entityTypesUris: localSelectedEntityTypes, relationTypesUris: localSelectedRelationTypes});
+        onClose();
+    };
+
+    const handleClear = () => {
+        setLocalSelectedEntityTypes([]);
+        setLocalSelectedRelationTypes([]);
+    };
+
+    useEffect(() => {
+        setLocalSelectedEntityTypes(filters.entityTypesUris);
+        setLocalSelectedRelationTypes(filters.relationTypesUris);
+    }, [filters.entityTypesUris, filters.relationTypesUris]);
+
+    return (
+        <Dialog classes={{paper: styles.dialogPaper}} onClose={handleCancel} open={open}>
+            <Typography className={styles.title}>{i18n.text('Filter')}</Typography>
+            <EntityTypesSelector
+                classes={{
+                    root: styles.entityTypesSelector
+                }}
+                entityTypes={entityTypesOptions}
+                selectedEntityTypes={localSelectedEntityTypes}
+                enableEmptyValueUnderline
+                onChange={setLocalSelectedEntityTypes}
+            />
+            <RelationTypesSelector
+                classes={{
+                    root: styles.relationTypesSelector
+                }}
+                relationTypes={relationTypesOptions}
+                selectedRelationTypes={localSelectedRelationTypes}
+                enableEmptyValueUnderline
+                onChange={setLocalSelectedRelationTypes}
+            />
+            <div className={styles.footer}>
+                <Button className={styles.clearAllButton} onClick={handleClear}>
+                    {i18n.text('Clear All')}
+                </Button>
+                <Button className={styles.cancelButton} onClick={handleCancel}>
+                    {i18n.text('Cancel')}
+                </Button>
+                <Button onClick={handleApply} color="primary">
+                    {i18n.text('Apply')}
+                </Button>
+            </div>
+        </Dialog>
+    );
+};
+
+export default withContext(
+    GraphStateContext,
+    pipe(prop('relationshipTable'), pick(['onFilter', 'filters', 'entityTypesOptions', 'relationTypesOptions'])),
+    RelationshipsFiltersDialog
+);