@reltio/profile 1.4.1585 → 1.4.1586-mui5

package/src/components/ProfileRelationsView/components/RelationArrowButton/RelationArrowButton.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import {checkNew, Connection, RelationsViewConfig} from '@reltio/mdm-sdk';
+import {useStyles} from './styles';
+
+type Props = {
+    onClick: () => void;
+    connection: Connection;
+    config: RelationsViewConfig;
+    showSecondLevel: boolean;
+};
+
+export const RelationArrowButton = ({onClick, connection, config, showSecondLevel}: Props) => {
+    const styles = useStyles();
+    const {parentEntityUri} = connection;
+    const {contentSecondLevel} = config;
+
+    const props = {
+        onClick,
+        className: styles.arrowIcon
+    };
+
+    if (parentEntityUri || !contentSecondLevel || checkNew(connection)) {
+        return null;
+    }
+
+    return showSecondLevel ? <ArrowDropDownIcon {...props} /> : <ArrowRightIcon {...props} />;
+};

package/src/components/ProfileRelationsView/components/RelationArrowButton/__tests__/RelationArrowButton.specs.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import {RelationArrowButton} from '../RelationArrowButton';
+
+describe('RelationArrowButton tests', () => {
+    it('should return ArrowDropDownIcon if showSecondLevel is true', () => {
+        const config = {
+            contentSecondLevel: {
+                entityTypes: []
+            }
+        } as any;
+
+        const onClick = jest.fn();
+
+        const props = {
+            connection: {},
+            config,
+            onClick,
+            showSecondLevel: true
+        };
+
+        const component = shallow(<RelationArrowButton {...props} />);
+
+        expect(component.find(ArrowDropDownIcon)).toHaveLength(1);
+        expect(component.find(ArrowDropDownIcon).prop('onClick')).toEqual(onClick);
+    });
+
+    it('should return ArrowRightIcon if showSecondLevel is false', () => {
+        const config = {
+            contentSecondLevel: {
+                entityTypes: []
+            }
+        } as any;
+
+        const onClick = jest.fn();
+
+        const props = {
+            connection: {},
+            config,
+            onClick,
+            showSecondLevel: false
+        };
+
+        const component = shallow(<RelationArrowButton {...props} />);
+
+        expect(component.find(ArrowRightIcon)).toHaveLength(1);
+        expect(component.find(ArrowRightIcon).prop('onClick')).toEqual(onClick);
+    });
+
+    it('should return null if parentEntityUri exists', () => {
+        const config = {
+            contentSecondLevel: {
+                entityTypes: []
+            }
+        } as any;
+
+        const props = {
+            connection: {parentEntityUri: 'entities/123'},
+            config,
+            onClick: jest.fn(),
+            showSecondLevel: true
+        };
+
+        const component = shallow(<RelationArrowButton {...props} />);
+        expect(component.isEmptyRender()).toBe(true);
+    });
+
+    it('should return null if contentSecondLevel not exists', () => {
+        const props = {
+            connection: {},
+            config: {} as any,
+            onClick: jest.fn(),
+            showSecondLevel: true
+        };
+
+        const component = shallow(<RelationArrowButton {...props} />);
+        expect(component.isEmptyRender()).toBe(true);
+    });
+
+    it('should return null if connection is new', () => {
+        const config = {
+            contentSecondLevel: {
+                entityTypes: []
+            }
+        } as any;
+
+        const props = {
+            connection: {__metadata: {draft: 'new'}},
+            config,
+            onClick: jest.fn(),
+            showSecondLevel: true
+        };
+
+        const component = shallow(<RelationArrowButton {...props} />);
+        expect(component.isEmptyRender()).toBe(true);
+    });
+});

package/src/components/ProfileRelationsView/components/RelationArrowButton/styles.ts

@@ -0,0 +1,8 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    arrowIcon: {
+        fontSize: '16px',
+        marginRight: '6px'
+    }
+});

package/src/components/ProfileRelationsView/components/RelationTooltip/RelationTooltip.tsx

@@ -0,0 +1,83 @@
+import React, {useCallback, useEffect, useState} from 'react';
+import {isNil, ifElse} from 'ramda';
+import {useSelector} from 'react-redux';
+import {
+    ConnectionEntity,
+    getDataTenantEntitySecondaryLabel,
+    getEntitySecondaryLabel,
+    isDataTenantEntity,
+    isTempUri
+} from '@reltio/mdm-sdk';
+import mdm from '@reltio/mdm-module';
+import {useSafePromise} from '@reltio/components';
+import CircularProgress from '@mui/material/CircularProgress';
+import Tooltip from '@mui/material/Tooltip';
+import {useStyles} from './styles';
+
+const PROGRESS_ICON_SIZE = 16;
+
+type Props = {
+    label: string;
+    entity?: ConnectionEntity;
+    children: React.ReactElement;
+};
+
+const RelationTooltip = ({label, entity, children, ...tooltipProps}: Props) => {
+    const styles = useStyles();
+    const safePromise = useSafePromise();
+    const tenant = useSelector(mdm.selectors.getTenant);
+    const dtssPath = useSelector(mdm.selectors.getDtssPath) as string;
+    const [isLoading, setIsLoading] = useState(false);
+    const [secondaryLabel, setSecondaryLabel] = useState<string>(null);
+
+    useEffect(() => {
+        setSecondaryLabel(null);
+    }, [entity]);
+
+    const onOpen = useCallback(() => {
+        if (entity?.entityUri && !isTempUri(entity?.entityUri) && isNil(secondaryLabel)) {
+            const request = ifElse(
+                isDataTenantEntity,
+                (entity: ConnectionEntity) =>
+                    getDataTenantEntitySecondaryLabel({
+                        entityUri: entity.entityUri,
+                        dataTenant: entity.dataTenant,
+                        customerTenant: tenant,
+                        dtssPath
+                    }),
+                (entity: ConnectionEntity) => getEntitySecondaryLabel(entity.entityUri)
+            );
+
+            setIsLoading(true);
+            safePromise(request(entity))
+                .then(({secondaryLabel}) => {
+                    setSecondaryLabel(secondaryLabel);
+                })
+                .finally(() => {
+                    setIsLoading(false);
+                });
+        }
+    }, [dtssPath, entity, tenant, safePromise, secondaryLabel]);
+
+    const tooltipContent = (
+        <div className={styles.tooltipContent}>
+            <div className={styles.label}>{label}</div>
+            {isLoading && <CircularProgress size={PROGRESS_ICON_SIZE} classes={{colorPrimary: styles.progress}} />}
+            {secondaryLabel && <div className={styles.secondaryLabel}>{secondaryLabel}</div>}
+        </div>
+    );
+
+    return (
+        <Tooltip
+            onOpen={onOpen}
+            title={tooltipContent}
+            disableFocusListener
+            classes={{tooltip: styles.tooltip}}
+            {...tooltipProps}
+        >
+            {children}
+        </Tooltip>
+    );
+};
+
+export default RelationTooltip;

package/src/components/ProfileRelationsView/components/RelationTooltip/__tests__/RelationTooltip.test.tsx

@@ -0,0 +1,155 @@
+import React, {ChangeEvent, ReactElement} from 'react';
+import {ReactWrapper, shallow} from 'enzyme';
+import * as reactReduxImports from 'react-redux';
+import Tooltip from '@mui/material/Tooltip';
+import {act} from 'react-dom/test-utils';
+
+import RelationTooltip from '../RelationTooltip';
+import {ConnectionEntity, getDataTenantEntitySecondaryLabel, getEntitySecondaryLabel} from '@reltio/mdm-sdk';
+import CircularProgress from '@mui/material/CircularProgress';
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    getEntitySecondaryLabel: jest.fn(),
+    getDataTenantEntitySecondaryLabel: jest.fn()
+}));
+
+describe('RelationTooltip behaviour', () => {
+    const children = <div>children</div>;
+    const label = 'Main Label';
+
+    const entity = {
+        entityUri: 'entities/uri1'
+    } as ConnectionEntity;
+
+    let store;
+
+    beforeEach(() => {
+        store = {
+            tenant: {id: 'customerTenant'},
+            ui: {}
+        };
+        jest.spyOn(reactReduxImports, 'useSelector').mockImplementation((selector) => selector(store));
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+    it('should render main parts', () => {
+        const component = shallow(
+            <RelationTooltip label={label} entity={entity}>
+                {children}
+            </RelationTooltip>
+        );
+
+        const tooltip = component.find(Tooltip);
+        expect(tooltip).toHaveLength(1);
+        expect(new ReactWrapper(tooltip.prop('title') as ReactElement).text()).toEqual(label);
+        expect(tooltip.prop('children')).toBe(children);
+    });
+
+    it('load secondary label behaviour', async () => {
+        const secondaryLabel = 'Secondary Label';
+        (getEntitySecondaryLabel as jest.Mock).mockReturnValue(Promise.resolve({secondaryLabel}));
+        const component = shallow(
+            <RelationTooltip label={label} entity={entity}>
+                {children}
+            </RelationTooltip>
+        );
+
+        act(() => {
+            component.find(Tooltip).prop('onOpen')({} as ChangeEvent);
+        });
+        component.update();
+
+        let tooltipContent = new ReactWrapper(component.find(Tooltip).prop('title') as ReactElement);
+        expect(getEntitySecondaryLabel).toHaveBeenCalledWith(entity.entityUri);
+        expect(tooltipContent.text()).toEqual(label);
+        expect(tooltipContent.find(CircularProgress)).toHaveLength(1);
+
+        await act(async () => {
+            await Promise.resolve();
+        });
+
+        tooltipContent = new ReactWrapper(component.find(Tooltip).prop('title') as ReactElement);
+
+        expect(tooltipContent.find('.label').text()).toEqual(label);
+        expect(tooltipContent.find('.secondaryLabel').text()).toEqual(secondaryLabel);
+        expect(tooltipContent.find(CircularProgress)).toHaveLength(0);
+    });
+
+    it('load secondary label behaviour for dtss entity', async () => {
+        const secondaryLabel = 'Secondary Label';
+        const dtssPath = 'dtssPath/';
+        const dtssEntity = {
+            ...entity,
+            dataTenant: 'dtssTenant'
+        };
+        store.ui = {paths: {dtssPath}};
+
+        (getDataTenantEntitySecondaryLabel as jest.Mock).mockReturnValue(Promise.resolve({secondaryLabel}));
+
+        const component = shallow(
+            <RelationTooltip label={label} entity={dtssEntity}>
+                {children}
+            </RelationTooltip>
+        );
+
+        act(() => {
+            component.find(Tooltip).prop('onOpen')({} as ChangeEvent);
+        });
+        component.update();
+
+        let tooltipContent = new ReactWrapper(component.find(Tooltip).prop('title') as ReactElement);
+        expect(getDataTenantEntitySecondaryLabel).toHaveBeenCalledWith({
+            entityUri: dtssEntity.entityUri,
+            dataTenant: dtssEntity.dataTenant,
+            customerTenant: store.tenant.id,
+            dtssPath: dtssPath
+        });
+        expect(tooltipContent.text()).toEqual(label);
+        expect(tooltipContent.find(CircularProgress)).toHaveLength(1);
+        expect(tooltipContent.find('.secondaryLabel')).toHaveLength(0);
+
+        await act(async () => {
+            await Promise.resolve();
+        });
+
+        tooltipContent = new ReactWrapper(component.find(Tooltip).prop('title') as ReactElement);
+
+        expect(tooltipContent.find('.label').text()).toEqual(label);
+        expect(tooltipContent.find('.secondaryLabel').text()).toEqual(secondaryLabel);
+        expect(tooltipContent.find(CircularProgress)).toHaveLength(0);
+    });
+
+    it('should not show empty secondary label', async () => {
+        const secondaryLabel = '';
+        (getEntitySecondaryLabel as jest.Mock).mockReturnValue(Promise.resolve({secondaryLabel}));
+        const component = shallow(
+            <RelationTooltip label={label} entity={entity}>
+                {children}
+            </RelationTooltip>
+        );
+
+        act(() => {
+            component.find(Tooltip).prop('onOpen')({} as ChangeEvent);
+        });
+        component.update();
+
+        let tooltipContent = new ReactWrapper(component.find(Tooltip).prop('title') as ReactElement);
+        expect(getEntitySecondaryLabel).toHaveBeenCalledWith(entity.entityUri);
+        expect(tooltipContent.text()).toEqual(label);
+        expect(tooltipContent.find(CircularProgress)).toHaveLength(1);
+        expect(tooltipContent.find('.secondaryLabel')).toHaveLength(0);
+
+        await act(async () => {
+            await Promise.resolve();
+        });
+
+        tooltipContent = new ReactWrapper(component.find(Tooltip).prop('title') as ReactElement);
+
+        expect(tooltipContent.find('.label').text()).toEqual(label);
+        expect(tooltipContent.find('.secondaryLabel')).toHaveLength(0);
+        expect(tooltipContent.find(CircularProgress)).toHaveLength(0);
+    });
+});

package/src/components/ProfileRelationsView/components/RelationTooltip/styles.ts

@@ -0,0 +1,27 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    tooltip: theme.tooltip,
+    tooltipContent: {
+        minWidth: '165px',
+        padding: '4px 2px 2px'
+    },
+    label: {
+        fontSize: '11px',
+        lineHeight: '13px',
+        fontWeight: 500,
+        margin: 0,
+        color: 'white'
+    },
+    secondaryLabel: {
+        color: 'rgba(255, 255, 255, 0.7)',
+        fontSize: '10px',
+        marginTop: '4px',
+        fontWeight: 500,
+        lineHeight: '11px'
+    },
+    progress: {
+        marginTop: '4px',
+        color: '#FFFFFF'
+    }
+}));

package/src/components/ProfileRelationsView/components/RelationsContent/RelationsContent.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import {useSelector} from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
+import {isEditableMode, Connection, RelationsViewConfig} from '@reltio/mdm-sdk';
+import {LinearLoadIndicator} from '@reltio/components';
+import Typography from '@mui/material/Typography';
+import RelationsEditableContent from '../RelationsEditableContent/RelationsEditableContent';
+import RelationsList from '../RelationsList/RelationsList';
+import {useStyles} from './styles';
+
+type Props = {
+    isLoading: boolean;
+    config: RelationsViewConfig;
+    loadRelations: () => void;
+    connections: Connection[];
+    total: number;
+    parentEntityUri?: string;
+};
+
+export const RelationsContent = ({isLoading, config, loadRelations, connections, total, parentEntityUri}: Props) => {
+    const styles = useStyles();
+
+    const {selectors} = mdmModule;
+    const entity = useSelector(selectors.getEntity);
+    const mode = useSelector(selectors.getMode);
+
+    const noDataText = config['text-empty'] || i18n.text('No data found');
+
+    if (isLoading) {
+        return <LinearLoadIndicator />;
+    }
+
+    if (isEditableMode(mode)) {
+        return (
+            <RelationsEditableContent
+                connections={connections}
+                className={styles.list}
+                key={entity?.uri}
+                config={config}
+                mode={mode}
+                noDataText={noDataText}
+                parentEntityUri={parentEntityUri}
+            />
+        );
+    }
+
+    if (total > 0) {
+        return (
+            <RelationsList
+                config={config}
+                loadRelations={loadRelations}
+                connections={connections}
+                className={styles.list}
+                key={entity?.uri}
+                mainEnityUri={entity.uri}
+            />
+        );
+    }
+
+    return <Typography className={styles.noData}>{noDataText}</Typography>;
+};

package/src/components/ProfileRelationsView/components/RelationsContent/__tests__/RelationsContent.specs.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {Mode, RelationsViewConfig} from '@reltio/mdm-sdk';
+import {LinearLoadIndicator} from '@reltio/components';
+import RelationsEditableContent from '../../RelationsEditableContent/RelationsEditableContent';
+import {RelationsContent} from '../RelationsContent';
+import RelationsList from '../../RelationsList/RelationsList';
+
+const config = {
+    point: 'com.reltio.plugins.ui.view',
+    id: 'com.reltio.plugins.entity.relations.RelationsView.1',
+    content: null,
+    caption: 'Relations view title',
+    isComplex: false
+} as RelationsViewConfig;
+
+let store;
+
+const loadRelations = jest.fn();
+
+describe('RelationsContent tests', () => {
+    const dispatch = jest.fn();
+    beforeEach(() => {
+        store = {
+            profile: {
+                mode: Mode.Viewing,
+                entity: {
+                    uri: 'entities/1',
+                    type: 'configuration/entityTypes/HCP'
+                }
+            }
+        };
+    });
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector(store));
+        jest.spyOn(reactRedux, 'useDispatch').mockImplementation(() => dispatch);
+    });
+
+    it('should render RelationsList correctly if mode is Viewing', () => {
+        store.profile.mode = Mode.Viewing;
+        const connections = [{entity: {uri: '1'}, relations: {uri: '2'}}] as any;
+        const component = shallow(
+            <RelationsContent
+                total={25}
+                connections={connections}
+                isLoading={false}
+                config={config}
+                loadRelations={loadRelations}
+            />
+        );
+
+        const relationsList = component.find(RelationsList);
+        expect(relationsList).toHaveLength(1);
+        expect(relationsList.props()).toMatchObject({
+            connections,
+            config: config,
+            loadRelations
+        });
+    });
+
+    it('should render RelationsEditableContent correctly if mode is editable', () => {
+        store.profile.mode = Mode.Editing;
+        const connections = [{entity: {uri: '1'}, relations: {uri: '2'}}] as any;
+        const parentEntityUri = 'entities/123';
+        const component = shallow(
+            <RelationsContent
+                total={25}
+                connections={connections}
+                isLoading={false}
+                config={config}
+                loadRelations={loadRelations}
+                parentEntityUri={parentEntityUri}
+            />
+        );
+        const editableContent = component.find(RelationsEditableContent);
+        expect(editableContent).toHaveLength(1);
+        expect(editableContent.props()).toMatchObject({
+            connections,
+            config: config,
+            mode: Mode.Editing,
+            noDataText: 'No data found',
+            parentEntityUri
+        });
+    });
+
+    it('should render RelationsEditableContent correctly if relation list is empty', () => {
+        store.profile.mode = Mode.Editing;
+        const connections = [];
+        const component = shallow(
+            <RelationsContent
+                isLoading={false}
+                total={0}
+                connections={connections}
+                config={config}
+                loadRelations={loadRelations}
+            />
+        );
+        const editableContent = component.find(RelationsEditableContent);
+        expect(editableContent).toHaveLength(1);
+    });
+
+    it('should show default empty text', () => {
+        const connections = [];
+        const component = shallow(
+            <RelationsContent
+                connections={connections}
+                total={0}
+                config={config}
+                isLoading={false}
+                loadRelations={loadRelations}
+            />
+        );
+        expect(component.find(RelationsList)).toHaveLength(0);
+        expect(component.find('.noData').text()).toBe('No data found');
+    });
+
+    it('should show the empty text from config', () => {
+        const emptyText = 'No data';
+        config['text-empty'] = emptyText;
+        const connections = [];
+        const component = shallow(
+            <RelationsContent
+                connections={connections}
+                config={config}
+                isLoading={false}
+                loadRelations={loadRelations}
+                total={0}
+            />
+        );
+        expect(component.find(RelationsList)).toHaveLength(0);
+        expect(component.find('.noData').text()).toBe(emptyText);
+    });
+
+    it('should render LinearLoadIndicator', () => {
+        const component = shallow(
+            <RelationsContent
+                isLoading={true}
+                connections={[]}
+                config={config}
+                total={0}
+                loadRelations={loadRelations}
+            />
+        );
+
+        expect(component.find(LinearLoadIndicator)).toHaveLength(1);
+    });
+});

package/src/components/ProfileRelationsView/components/RelationsContent/styles.ts

@@ -0,0 +1,15 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    list: {
+        paddingTop: '8px',
+        paddingBottom: '10px',
+        overflow: 'auto',
+        flexGrow: 1
+    },
+    noData: {
+        fontSize: '13px',
+        color: theme.palette.text.secondary,
+        padding: '8px 16px'
+    }
+}));