@reltio/graph 1.4.1585 → 1.4.1586-mui5

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

@@ -0,0 +1,121 @@
+import React, {useState, useCallback, useEffect} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import i18n from 'ui-i18n';
+
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import {ConnectionEditor, useEditableConnection, withContext} from '@reltio/components';
+import mdmModule, {profile} from '@reltio/mdm-module';
+import {Directions, EditingConnection, Entity, validateConnectionRelation} from '@reltio/mdm-sdk';
+import {GraphStateContext} from '../../../../contexts/GraphStateContext';
+import {GraphState} from '../../../../types/graphDataTypes';
+import {createNewConnection} from '../../../../helpers/relationsHelpers';
+import {useCreatableInOutRelationTypes} from './useCreatableInOutRelationTypes';
+
+import {useStyles} from './styles';
+
+type Props = {
+    selectedEntity?: Entity;
+    open: boolean;
+    onClose: () => void;
+    onAddRelation?: GraphState['onAddRelation'];
+};
+
+const GraphAddRelationDialog = ({selectedEntity, open, onClose, onAddRelation}: Props) => {
+    const styles = useStyles();
+    const metadata = useSelector(mdmModule.selectors.getMetadata);
+
+    const [connection, setConnection] = useState<EditingConnection>({});
+    const {relation, entity} = connection;
+    const {type: relationTypeUri, direction} = relation || {};
+
+    const [loading, setLoading] = useState(false);
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        if (open) {
+            setConnection(createNewConnection());
+        }
+    }, [open]);
+
+    const {inRelationTypes, outRelationTypes} = useCreatableInOutRelationTypes(selectedEntity?.type);
+
+    const validate = useCallback(() => {
+        const errors = validateConnectionRelation(metadata, {relation: {object: relation}});
+        dispatch(profile.errors.actions.errorsSet(errors));
+        return errors.length === 0;
+    }, [relation, metadata, dispatch]);
+
+    const handleAdd = () => {
+        const {type: relationType, attributes = {}, startDate, endDate} = relation;
+        const startEntityUri = direction === Directions.OUT ? selectedEntity.uri : entity.uri;
+        const endEntityUri = direction === Directions.OUT ? entity.uri : selectedEntity.uri;
+
+        if (validate()) {
+            setLoading(true);
+            onAddRelation({
+                startEntityUri,
+                endEntityUri,
+                relationType,
+                attributes,
+                startDate,
+                endDate
+            })
+                .then(() => {
+                    onClose();
+                })
+                .catch((e) => {
+                    console.error(e);
+                })
+                .finally(() => {
+                    setLoading(false);
+                });
+        }
+    };
+
+    const {onAddAttributes, onChangeAttribute, onRemoveAttribute, onChangeEntity, onChangeRelationType} =
+        useEditableConnection({connection, onConnectionChange: setConnection, relatedEntity: selectedEntity});
+
+    return (
+        <Dialog open={open} fullWidth maxWidth="sm" onClose={onClose} classes={{paper: styles.dialogPaper}}>
+            <DialogTitle classes={{root: styles.dialogTitle}}>
+                <Typography variant="subtitle1" classes={{root: styles.titleText}}>
+                    {i18n.text('Add relationship')}
+                </Typography>
+            </DialogTitle>
+            <DialogContent classes={{root: styles.content}}>
+                <ConnectionEditor
+                    connection={connection}
+                    onAddAttributes={onAddAttributes}
+                    onChangeAttribute={onChangeAttribute}
+                    onRemoveAttribute={onRemoveAttribute}
+                    relatedEntity={selectedEntity}
+                    inRelationTypes={inRelationTypes}
+                    outRelationTypes={outRelationTypes}
+                    onChangeRelationType={onChangeRelationType}
+                    onChangeEntity={onChangeEntity}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose}>{i18n.text('Cancel')}</Button>
+                <Button
+                    disabled={!connection?.entity || !relationTypeUri || loading}
+                    color="primary"
+                    onClick={handleAdd}
+                >
+                    {i18n.text('Add')}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default withContext(
+    GraphStateContext,
+    ({selectedEntity, onAddRelation}) => ({selectedEntity, onAddRelation}),
+    GraphAddRelationDialog
+);

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import {assoc, clone} from 'ramda';
+import * as reactRedux from 'react-redux';
+import AddIcon from '@mui/icons-material/Add';
+import {ActionButton, ActionButtonMode} from '@reltio/components';
+
+import GraphAddRelationDialog from '../GraphAddRelationDialog';
+import GraphAddRelationButton from '../GraphAddRelationButton';
+import {Entity} from '@reltio/mdm-sdk';
+import {GraphState} from '../../../../../types/graphDataTypes';
+import {GraphStateContext} from '../../../../../contexts/GraphStateContext';
+import {store as mockStore, tenant} from './mockdata';
+
+jest.mock('../GraphAddRelationDialog', () => () => null);
+
+const setUp = ({selectedEntity}: {selectedEntity: Entity}) =>
+    mount(
+        <GraphStateContext.Provider value={{selectedEntity} as GraphState}>
+            <GraphAddRelationButton />
+        </GraphStateContext.Provider>
+    );
+
+describe('GraphAddRelationButton tests', () => {
+    let store;
+    beforeEach(() => {
+        store = mockStore;
+    });
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+
+    const selectedEntity = {
+        uri: 'entities/uri1',
+        type: 'configuration/entityTypes/HCP'
+    };
+
+    it('should render nothing if there are no available relation types', () => {
+        const component = setUp({
+            selectedEntity: {
+                uri: 'entities/uri1',
+                type: 'configuration/entityTypes/HCA'
+            }
+        });
+        expect(component.find(ActionButton)).toHaveLength(0);
+        expect(component.find(GraphAddRelationDialog)).toHaveLength(0);
+    });
+
+    it('should render nothing if there are no creatable relation types', () => {
+        store = clone(mockStore);
+        store.metadata[tenant].relationTypes = store.metadata[tenant].relationTypes.map(
+            assoc('access', ['READ', 'UPDATE'])
+        );
+        const component = setUp({selectedEntity});
+        expect(component.find(ActionButton)).toHaveLength(0);
+        expect(component.find(GraphAddRelationDialog)).toHaveLength(0);
+    });
+
+    it('should render ActionButton and GraphAddRelationDialog', () => {
+        const component = setUp({selectedEntity});
+        expect(component.find(ActionButton)).toHaveLength(1);
+        expect(component.find(ActionButton).prop('mode')).toBe(ActionButtonMode.button);
+        expect(component.find(ActionButton).prop('icon')).toEqual(AddIcon);
+        expect(component.find(ActionButton).prop('label')).toBe('Add relationship');
+        expect(component.find(GraphAddRelationDialog)).toHaveLength(1);
+        expect(component.find(GraphAddRelationDialog).prop('open')).toBe(false);
+    });
+
+    it('should switch dialog to open and to close state', () => {
+        const component = setUp({selectedEntity});
+        expect(component.find(ActionButton)).toHaveLength(1);
+        expect(component.find(GraphAddRelationDialog)).toHaveLength(1);
+        expect(component.find(GraphAddRelationDialog).prop('open')).toBe(false);
+        component.find(ActionButton).simulate('click');
+        expect(component.find(GraphAddRelationDialog).prop('open')).toBe(true);
+        component.find(GraphAddRelationDialog).prop('onClose')();
+        component.update();
+        expect(component.find(GraphAddRelationDialog).prop('open')).toBe(false);
+    });
+});

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

@@ -0,0 +1,262 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import {act} from 'react-dom/test-utils';
+import * as reactRedux from 'react-redux';
+import {profile} from '@reltio/mdm-module';
+
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import GraphAddRelationDialog from '../GraphAddRelationDialog';
+
+import {validateConnectionRelation, Entity, AttributeError} from '@reltio/mdm-sdk';
+import {GraphStateContext} from '../../../../../contexts/GraphStateContext';
+import {GraphState} from '../../../../../../src/types/graphDataTypes';
+import {ConnectionEditor} from '@reltio/components';
+import {store, inRelationTypes, outRelationTypes} from './mockdata';
+
+const findButtonByLabel = (component, label) => component.find(Button).filterWhere((button) => button.text() === label);
+
+const findCancelButton = (component) => findButtonByLabel(component, 'Cancel');
+const findAddButton = (component) => findButtonByLabel(component, 'Add');
+
+const newRelationUri = 'relations/uri$$123';
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    createRelation: jest.fn(),
+    validateConnectionRelation: jest.fn().mockReturnValue([]),
+    generateNewRelationUri: jest.fn().mockReturnValue(newRelationUri)
+}));
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    ConnectionEditor: () => null
+}));
+
+const setUp = ({
+    selectedEntity,
+    handleClose,
+    onAddRelation
+}: {
+    selectedEntity: Entity;
+    handleClose: () => void;
+    onAddRelation?: GraphState['onAddRelation'];
+}) =>
+    mount(
+        <GraphStateContext.Provider value={{selectedEntity, onAddRelation} as GraphState}>
+            <GraphAddRelationDialog open={true} onClose={handleClose} />
+        </GraphStateContext.Provider>
+    );
+
+describe('GraphAddRelationDialog tests', () => {
+    const handleClose = jest.fn();
+    const selectedEntity = {
+        uri: 'entities/uri1',
+        type: 'configuration/entityTypes/HCP'
+    };
+    const dispatch = jest.fn();
+
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+        jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(dispatch);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render GraphAddRelationDialog for selectedEntity from context', () => {
+        const component = setUp({selectedEntity, handleClose});
+        expect(component.find(Typography).text()).toBe('Add relationship');
+
+        const dialogActions = component.find(DialogActions);
+        expect(dialogActions).toHaveLength(1);
+        expect(dialogActions.find(Button)).toHaveLength(2);
+
+        expect(findCancelButton(component)).toHaveLength(1);
+        expect(findAddButton(component)).toHaveLength(1);
+    });
+
+    it('should render ConnectionEditor with definite params', () => {
+        const component = setUp({selectedEntity, handleClose});
+        expect(component.find(ConnectionEditor).props()).toMatchObject({
+            inRelationTypes: inRelationTypes,
+            outRelationTypes: outRelationTypes,
+            relatedEntity: selectedEntity,
+            connection: {relation: {uri: newRelationUri}}
+        });
+    });
+
+    it('should call onClose after click on Close button', () => {
+        const component = setUp({selectedEntity, handleClose});
+        const cancelButton = findCancelButton(component);
+        cancelButton.simulate('click');
+        expect(handleClose).toHaveBeenCalled();
+    });
+
+    it('should call onAddRelation and onClose after click on Add button', async () => {
+        const onAddRelation = jest.fn().mockImplementation(() => Promise.resolve());
+        const component = setUp({selectedEntity, handleClose, onAddRelation});
+
+        act(() =>
+            component.find(ConnectionEditor).prop('onChangeRelationType')({
+                type: 'configuration/relationTypes/IsInCommittee',
+                direction: 'IN'
+            })
+        );
+        component.update();
+        act(() =>
+            component.find(ConnectionEditor).prop('onChangeEntity')({
+                uri: 'entities/entityCommittee',
+                type: 'configuration/entityTypes/Committee'
+            })
+        );
+        component.update();
+        const addButton = findAddButton(component);
+        await act(async () => {
+            addButton.simulate('click');
+        });
+        component.update();
+        expect(dispatch).toHaveBeenCalledWith(profile.errors.actions.errorsSet([]));
+        expect(onAddRelation).toHaveBeenCalledWith({
+            attributes: {},
+            endDate: undefined,
+            endEntityUri: 'entities/uri1',
+            relationType: 'configuration/relationTypes/IsInCommittee',
+            startDate: undefined,
+            startEntityUri: 'entities/entityCommittee'
+        });
+        expect(handleClose).toHaveBeenCalled();
+    });
+
+    it('should disable Add button if relationType is empty', () => {
+        const onAddRelation = jest.fn().mockImplementation(() => Promise.resolve());
+        const component = setUp({selectedEntity, handleClose, onAddRelation});
+        expect(findAddButton(component).prop('disabled')).toBe(true);
+
+        act(() =>
+            component.find(ConnectionEditor).prop('onChangeRelationType')({
+                type: 'configuration/relationTypes/IsInCommittee',
+                direction: 'IN'
+            })
+        );
+        component.update();
+        expect(findAddButton(component).prop('disabled')).toBe(true);
+        act(() =>
+            component.find(ConnectionEditor).prop('onChangeEntity')({
+                uri: 'entities/entityCommittee',
+                type: 'configuration/entityTypes/Committee'
+            })
+        );
+        component.update();
+        expect(findAddButton(component).prop('disabled')).toBe(false);
+
+        act(() =>
+            component.find(ConnectionEditor).prop('onChangeRelationType')({type: undefined, direction: undefined})
+        );
+        component.update();
+        expect(findAddButton(component).prop('disabled')).toBe(true);
+    });
+
+    it('should disable Add button if entity is empty', () => {
+        const onAddRelation = jest.fn().mockImplementation(() => Promise.resolve());
+        const component = setUp({selectedEntity, handleClose, onAddRelation});
+        expect(findAddButton(component).prop('disabled')).toBe(true);
+        act(() =>
+            component.find(ConnectionEditor).prop('onChangeRelationType')({
+                type: 'configuration/relationTypes/IsInCommittee',
+                direction: 'IN'
+            })
+        );
+        component.update();
+        expect(findAddButton(component).prop('disabled')).toBe(true);
+        act(() =>
+            component.find(ConnectionEditor).prop('onChangeEntity')({
+                uri: 'entities/entityCommittee',
+                type: 'configuration/entityTypes/Committee'
+            })
+        );
+        component.update();
+        expect(findAddButton(component).prop('disabled')).toBe(false);
+
+        act(() => component.find(ConnectionEditor).prop('onChangeEntity')(undefined));
+        component.update();
+        expect(findAddButton(component).prop('disabled')).toBe(true);
+    });
+
+    it('should fire error if onAddRelation is failed, form should stay open', async () => {
+        const onAddRelation = jest.fn().mockImplementation(() => Promise.reject('Bad relation'));
+
+        const component = setUp({selectedEntity, handleClose, onAddRelation});
+
+        act(() =>
+            component.find(ConnectionEditor).prop('onChangeRelationType')({
+                type: 'configuration/relationTypes/IsInCommittee',
+                direction: 'IN'
+            })
+        );
+        component.update();
+        act(() =>
+            component.find(ConnectionEditor).prop('onChangeEntity')({
+                uri: 'entities/entityCommittee',
+                type: 'configuration/entityTypes/Committee'
+            })
+        );
+        component.update();
+
+        await act(async () => {
+            findAddButton(component).simulate('click');
+        });
+        component.update();
+
+        expect(dispatch).toHaveBeenCalledWith(profile.errors.actions.errorsSet([]));
+        expect(handleClose).not.toHaveBeenCalled();
+    });
+
+    it('should not call onAddRelation and onClose on Add button click if relation has validation errors', async () => {
+        const onAddRelation = jest.fn().mockImplementation(() => Promise.resolve());
+        const errorsSet = [
+            {
+                type: 'missedRefEntity'
+            }
+        ] as AttributeError[];
+        (validateConnectionRelation as jest.Mock).mockReturnValue(errorsSet);
+        const component = setUp({selectedEntity, handleClose, onAddRelation});
+
+        // set connection
+        act(() =>
+            component.find(ConnectionEditor).prop('onChangeRelationType')({
+                type: 'configuration/relationTypes/IsInCommittee',
+                direction: ''
+            })
+        );
+        component.update();
+        act(() =>
+            component.find(ConnectionEditor).prop('onChangeEntity')({
+                uri: 'entities/entity',
+                type: 'configuration/entityTypes/C'
+            })
+        );
+        component.update();
+
+        await act(async () => {
+            findAddButton(component).simulate('click');
+        });
+
+        expect(validateConnectionRelation).toHaveBeenCalledWith(store.metadata.alenat, {
+            relation: {
+                object: {
+                    uri: newRelationUri,
+                    type: 'configuration/relationTypes/IsInCommittee',
+                    direction: '',
+                    attributes: {}
+                }
+            }
+        });
+
+        expect(dispatch).toHaveBeenCalledWith(profile.errors.actions.errorsSet(errorsSet));
+        expect(onAddRelation).not.toHaveBeenCalled();
+        expect(handleClose).not.toHaveBeenCalled();
+    });
+});

package/src/components/RightPanelRelationship/components/GraphAddRelationDialog/__tests__/mockdata.ts

@@ -0,0 +1,75 @@
+const tenant = 'alenat';
+
+const store = {
+    metadata: {
+        [tenant]: {
+            entityTypes: [
+                {
+                    uri: 'configuration/entityTypes/HCP'
+                },
+                {
+                    uri: 'configuration/entityTypes/HCO'
+                },
+                {
+                    uri: 'configuration/entityTypes/Committee'
+                },
+                {
+                    uri: 'configuration/entityTypes/Location'
+                }
+            ],
+            relationTypes: [
+                {
+                    uri: 'configuration/relationTypes/HasAddress',
+                    label: 'has address',
+                    startObject: {
+                        objectTypeURI: 'configuration/entityTypes/HCP',
+                        uri: 'configuration/relationTypes/HasAddress/startObject'
+                    },
+                    endObject: {
+                        objectTypeURI: 'configuration/entityTypes/Location',
+                        uri: 'configuration/relationTypes/HasAddress/endObject'
+                    }
+                },
+                {
+                    uri: 'configuration/relationTypes/HeadNursing',
+                    label: 'Head of Nursing',
+                    startObject: {
+                        objectTypeURI: 'configuration/entityTypes/HCP',
+                        uri: 'configuration/relationTypes/HeadNursing/startObject'
+                    },
+                    endObject: {
+                        objectTypeURI: 'configuration/entityTypes/HCO',
+                        uri: 'configuration/relationTypes/HeadNursing/endObject'
+                    }
+                },
+                {
+                    uri: 'configuration/relationTypes/IsInCommittee',
+                    label: 'is in committee',
+                    startObject: {
+                        objectTypeURI: 'configuration/entityTypes/Committee',
+                        uri: 'configuration/relationTypes/IsInCommittee/startObject'
+                    },
+                    endObject: {
+                        objectTypeURI: 'configuration/entityTypes/HCP',
+                        uri: 'configuration/relationTypes/IsInCommittee/endObject'
+                    }
+                }
+            ]
+        }
+    },
+    search: {
+        searchOptions: {
+            searchByOv: false,
+            ovOnly: false
+        }
+    },
+    tenant: {
+        id: tenant
+    }
+};
+
+const inRelationTypes = store.metadata[tenant].relationTypes.slice(2, 3);
+
+const outRelationTypes = store.metadata[tenant].relationTypes.slice(0, 2);
+
+export {tenant, store, inRelationTypes, outRelationTypes};

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

@@ -0,0 +1,25 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    dialogPaper: {
+        height: '600px',
+        maxWidth: '600px'
+    },
+    dialogTitle: {
+        padding: '12px 16px'
+    },
+    titleText: {
+        color: theme.palette.text.primary,
+        fontSize: '18px',
+        letterSpacing: 0,
+        lineHeight: '21px',
+        fontWeight: 'bold'
+    },
+    content: {
+        padding: '8px 16px 0px',
+        borderBottom: '1px solid rgba(0, 0, 0, 0.12)'
+    },
+    attributeList: {
+        paddingTop: '22px'
+    }
+}));

package/src/components/RightPanelRelationship/components/GraphAddRelationDialog/useCreatableInOutRelationTypes.ts

@@ -0,0 +1,13 @@
+import {useMemo} from 'react';
+import {checkMetadataForCreate, getInOutRelationTypesForEntityTypeUri, Mode} from '@reltio/mdm-sdk';
+import {useSelector} from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+
+export const useCreatableInOutRelationTypes = (entityTypeUri: string) => {
+    const metadata = useSelector(mdmModule.selectors.getMetadata);
+    const {inRelations: inRelationTypes = [], outRelations: outRelationTypes = []} = useMemo(
+        () => getInOutRelationTypesForEntityTypeUri(metadata, entityTypeUri, checkMetadataForCreate(Mode.Editing)),
+        [metadata, entityTypeUri]
+    );
+    return {inRelationTypes, outRelationTypes};
+};