@reltio/dashboard 1.4.1584 → 1.4.1586-mui5

package/src/components/StatsChart/__tests__/StatsChart.test.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import {act} from 'react-dom/test-utils';
+import {shallow} from 'enzyme';
+
+import {PeriodStep} from '../../../types/PeriodStep';
+import StatsChart from '../StatsChart';
+import {CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis} from 'recharts';
+import CustomLegend from '../customized/CustomLegend';
+import * as stats from '../../../services/stats';
+
+describe('StatsChart tests', () => {
+    const props = {
+        data: [
+            {
+                event: 'created',
+                total: 12,
+                data: [
+                    {term: '05/01/21', count: 0},
+                    {term: '05/03/21', count: 12},
+                    {term: '05/04/21', count: 0}
+                ]
+            },
+            {
+                event: 'deleted',
+                total: 1,
+                data: [
+                    {term: '05/02/21', count: 0},
+                    {term: '05/03/21', count: 1},
+                    {term: '05/04/21', count: 0}
+                ]
+            }
+        ],
+        width: 600,
+        height: 300,
+        step: PeriodStep.DAY
+    };
+
+    beforeAll(() => {
+        jest.spyOn(stats, 'calibrateStatsData').mockImplementation((step, data) => data);
+    });
+
+    it('should render LineChart correctly', () => {
+        const wrapper = shallow(<StatsChart {...props} />);
+        expect(wrapper.find(LineChart).props()).toMatchObject({
+            width: props.width,
+            height: props.height
+        });
+        expect(wrapper.find(CartesianGrid)).toHaveLength(1);
+        expect(wrapper.find(XAxis).prop('dataKey')).toBe('term');
+        expect(wrapper.find(YAxis)).toHaveLength(1);
+        const lines = wrapper.find(Line);
+        expect(lines.length).toBe(props.data.length);
+        lines.forEach((line, i) => {
+            expect(line.prop('name')).toBe(props.data[i].event);
+            expect(line.prop('data')).toBe(props.data[i].data);
+            expect(line.prop('strokeOpacity')).toBe(1);
+            expect(line.prop('activeDot')).not.toBe(false);
+            expect(line.prop('dot')).not.toBe(false);
+        });
+        expect(wrapper.find(Tooltip).shallow().find('CustomTooltip').prop('events')).toEqual(['created', 'deleted']);
+        expect(wrapper.find(Legend).prop('payload')).toEqual([
+            expect.objectContaining({id: 'created', value: 12}),
+            expect.objectContaining({id: 'deleted', value: 1})
+        ]);
+    });
+
+    it('should render YAxis for big numbers correctly', () => {
+        const wrapper = shallow(<StatsChart {...props} />);
+        expect(wrapper.find(YAxis)).toHaveLength(1);
+        const formatter = wrapper.find(YAxis).prop('tickFormatter');
+        expect(formatter(100100)).toBe('100.1K');
+    });
+
+    it('should calibrate stats data by step', () => {
+        shallow(<StatsChart {...props} />);
+        expect(stats.calibrateStatsData).toBeCalledWith(props.step, props.data);
+    });
+
+    it('should toggle event on legend item click', () => {
+        const wrapper = shallow(<StatsChart {...props} />);
+        act(() => {
+            wrapper.find(Legend).shallow().find(CustomLegend).prop('onClick')('created');
+        });
+        expect(
+            wrapper
+                .find(Line)
+                .filterWhere((line) => line.prop('name') === 'created')
+                .props()
+        ).toMatchObject({
+            strokeOpacity: 0,
+            activeDot: false,
+            dot: false
+        });
+        expect(wrapper.find(Tooltip).shallow().find('CustomTooltip').prop('events')).toEqual(['deleted']);
+
+        act(() => {
+            wrapper.find(Legend).shallow().find(CustomLegend).prop('onClick')('created');
+        });
+
+        const line = wrapper.find(Line).filterWhere((line) => line.prop('name') === 'created');
+        expect(line.prop('strokeOpacity')).toBe(1);
+        expect(line.prop('activeDot')).not.toBe(false);
+        expect(line.prop('dot')).not.toBe(false);
+        expect(wrapper.find(Tooltip).shallow().find('CustomTooltip').prop('events')).toEqual(['deleted', 'created']);
+    });
+});

package/src/components/StatsChart/customized/CustomAxisTick.tsx

@@ -0,0 +1,28 @@
+import React, {SVGProps} from 'react';
+import {PeriodStep} from '../../../types/PeriodStep';
+import {always, cond, equals} from 'ramda';
+import i18n from 'ui-i18n';
+
+const getStepValueFormat = cond([
+    [equals(PeriodStep.HOUR), always('LT')],
+    [equals(PeriodStep.DAY), always('MMM D')]
+]);
+
+type AxisTickProps = SVGProps<SVGElement> & {
+    step: PeriodStep;
+    payload?: {
+        value: string;
+    };
+};
+
+const CustomAxisTick = ({x, y, payload, step}: AxisTickProps) => {
+    return (
+        <g transform={`translate(${x},${y})`}>
+            <text x={0} y={0} dy={16} textAnchor="middle" fill="#666">
+                {i18n.date(payload?.value, getStepValueFormat(step))}
+            </text>
+        </g>
+    );
+};
+
+export default CustomAxisTick;

package/src/components/StatsChart/customized/CustomLegend.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {LegendProps} from 'recharts';
+import {getStatsEventName} from '../../../services/stats';
+import Tooltip from '@mui/material/Tooltip';
+import i18n from 'ui-i18n';
+
+import {useStyles} from './styles';
+
+type Props = LegendProps & {
+    selectedItems: string[];
+};
+
+const CustomLegend = ({payload, selectedItems, onClick}: Props) => {
+    const styles = useStyles();
+    return (
+        <div className={styles.legend}>
+            {payload.map(({id, color, value}) => {
+                const isSelected = selectedItems.includes(id);
+                return (
+                    <div key={id} className={styles.legendItem}>
+                        <Tooltip title={isSelected ? i18n.text('Hide') : i18n.text('Show')}>
+                            <div
+                                style={isSelected ? {background: color} : {border: `${color} 1px solid`}}
+                                className={styles.legendItemColor}
+                                onClick={() => onClick(id)}
+                            />
+                        </Tooltip>
+                        {getStatsEventName(id)}
+                        <span className={styles.legendItemValue}>{value}</span>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+export default CustomLegend;

package/src/components/StatsChart/customized/CustomTooltip.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {TooltipProps} from 'recharts';
+import {PeriodStep} from '../../../types/PeriodStep';
+import i18n from 'ui-i18n';
+import {always, cond, equals} from 'ramda';
+import {getStatsEventName} from '../../../services/stats';
+
+import {useStyles} from './styles';
+
+type Props = TooltipProps & {
+    step: PeriodStep;
+    events: string[];
+};
+
+const getStepValueFormat = cond([
+    [equals(PeriodStep.HOUR), always('LT MMM D')],
+    [equals(PeriodStep.DAY), always('ll')]
+]);
+
+const CustomTooltip = ({active, payload, label, step, events}: Props) => {
+    const styles = useStyles();
+    return (
+        active && (
+            <div className={styles.tooltipWrapper}>
+                <p className={styles.tooltipTitle}>{i18n.date(label, getStepValueFormat(step))}</p>
+                {payload
+                    .filter(({name}) => events.includes(name))
+                    .map(({color, name, value}) => {
+                        return (
+                            <p key={name}>
+                                <span style={{background: color}} className={styles.tooltipItemColor} />
+                                {`${getStatsEventName(name)}: ${value}`}
+                            </p>
+                        );
+                    })}
+            </div>
+        )
+    );
+};
+
+export default CustomTooltip;

package/src/components/StatsChart/customized/styles.ts

@@ -0,0 +1,53 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    tooltipWrapper: {
+        borderRadius: '4px',
+        background: 'rgba(0, 0, 0, 0.54)',
+        padding: '6px 8px 7px 8px',
+        color: '#FFFFFF',
+        '& p': {
+            fontSize: '12px',
+            lineHeight: '18px',
+            padding: 0,
+            margin: 0
+        }
+    },
+    tooltipTitle: {
+        fontWeight: 500
+    },
+    tooltipItemColor: {
+        width: 8,
+        height: 8,
+        marginRight: 10,
+        display: 'inline-block'
+    },
+    legend: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        marginLeft: '20px',
+        marginTop: '10px'
+    },
+    legendItem: {
+        display: 'flex',
+        alignItems: 'baseline',
+        '&:not(:last-child)': {
+            marginRight: 10
+        },
+        width: '140px',
+        marginBottom: '5px',
+        fontSize: '13px',
+        color: 'rgba(0, 0, 0, 0.54)'
+    },
+    legendItemColor: {
+        width: 12,
+        height: 12,
+        marginRight: 10,
+        flexShrink: 0,
+        boxSizing: 'border-box'
+    },
+    legendItemValue: {
+        color: 'rgba(0, 0, 0, 0.87)',
+        marginLeft: '10px'
+    }
+});

package/src/components/StatsChart/getStatsChartSettings.ts

@@ -0,0 +1,65 @@
+import {CartesianGridProps, LegendProps, LineProps, TooltipProps, XAxisProps, YAxisProps} from 'recharts';
+import {formatNumberAsMetric} from '@reltio/mdm-sdk';
+
+type StatsChartSettings = {
+    xAxis: XAxisProps;
+    yAxis: YAxisProps;
+    cartesianGrid: CartesianGridProps;
+    tooltip: TooltipProps;
+    line: LineProps;
+    legend: LegendProps;
+};
+
+const getStatsChartSettings = (): StatsChartSettings => {
+    return {
+        xAxis: {
+            type: 'category',
+            dataKey: 'term',
+            tick: {
+                fill: '#000',
+                opacity: '0.54'
+            },
+            angle: 0,
+            textAnchor: 'middle',
+            stroke: '#666',
+            allowDuplicatedCategory: false
+        },
+        yAxis: {
+            dataKey: '',
+            type: 'number',
+            tick: {
+                fill: '#000',
+                opacity: '0.54',
+                width: undefined
+            },
+            stroke: '#666',
+            tickFormatter: formatNumberAsMetric,
+            width: 50
+        },
+        cartesianGrid: {
+            strokeDasharray: '3 3',
+            stroke: '#666',
+            strokeOpacity: '0.4'
+        },
+        tooltip: {
+            cursor: {
+                fill: '#000',
+                opacity: '0.1'
+            }
+        },
+        line: {
+            type: 'linear',
+            dataKey: 'count',
+            strokeWidth: 3
+        },
+        legend: {
+            wrapperStyle: {
+                display: 'flex',
+                overflowY: 'auto',
+                maxHeight: '25%'
+            }
+        }
+    };
+};
+
+export default getStatsChartSettings;

package/src/components/WorkflowTaskItem/WorkflowTaskItem.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import {useSelector} from 'react-redux';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import {EntityTypeIcon} from '@reltio/components';
+import mdmModule from '@reltio/mdm-module';
+import {getEntityType} from '@reltio/mdm-sdk';
+import FlagIcon from '@mui/icons-material/Flag';
+import Typography from '@mui/material/Typography';
+import {EnrichedWorkflowTaskData} from '../../types';
+import {isOverdueTask} from '../../services/workflowTasks';
+import WorkflowTaskObject from './WorkflowTaskObject';
+import {useStyles} from './styles';
+
+type Props = {
+    showAssignee: boolean;
+    task: EnrichedWorkflowTaskData;
+};
+
+const WorkflowTaskItem = ({task, showAssignee}: Props) => {
+    const styles = useStyles();
+    const objects = task.objects || [];
+    const [firstObject] = objects;
+    const metadata = useSelector(mdmModule.selectors.getMetadata);
+    const entityType = firstObject && getEntityType(metadata, firstObject.type);
+
+    return (
+        <div className={classnames(styles.taskItem, task.priorityClass)}>
+            <EntityTypeIcon entityType={entityType} />
+            <div className={styles.taskInfo}>
+                <Typography className={styles.taskTitle} variant={'subtitle1'}>
+                    {i18n.text(task.processDefinitionDisplayName)}
+                </Typography>
+                {objects.map((object) => (
+                    <p key={object.uri} className={styles.taskDetail}>
+                        <WorkflowTaskObject object={object} processType={task.processType} metadata={metadata} />
+                    </p>
+                ))}
+                <p className={styles.taskDetail}>
+                    <span className={styles.taskDetailTitle}>{`${i18n.text('Created by')}:`}</span>
+                    {task.createdBy} {i18n.text('on')} {i18n.date(task.createTime, 'L')}
+                </p>
+                {showAssignee && task.assignee && (
+                    <p className={styles.taskDetail}>
+                        <span className={styles.taskDetailTitle}>{`${i18n.text('Assigned to')}:`}</span>
+                        {task.assignee}
+                    </p>
+                )}
+                <p className={styles.taskDetail}>
+                    <span className={styles.taskDetailTitle}>{`${i18n.text('Step')}:`}</span>
+                    {task.displayName}
+                </p>
+            </div>
+            <div
+                className={classnames(styles.taskDueDate, {
+                    [styles.overdue]: isOverdueTask(task),
+                    [styles.hidden]: !task.dueDate
+                })}
+            >
+                <FlagIcon className={styles.flag} />
+                {i18n.date(task.dueDate, 'L')}
+            </div>
+        </div>
+    );
+};
+
+export default WorkflowTaskItem;

package/src/components/WorkflowTaskItem/WorkflowTaskObject.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import {always, cond, equals, propSatisfies, T} from 'ramda';
+import {EnrichedWorkflowTaskData, WorkflowTaskObjectData} from '../../types/WorkflowTasks';
+import {EntityUriLink} from '@reltio/components';
+import {
+    getEntityUriForLink,
+    getLabel,
+    getRelationType,
+    isDCRUri,
+    Metadata,
+    PredefinedWorkflowProcessType
+} from '@reltio/mdm-sdk';
+import i18n from 'ui-i18n';
+import {useStyles} from './styles';
+
+type Props = {
+    object: WorkflowTaskObjectData;
+    metadata: Metadata;
+    processType: EnrichedWorkflowTaskData['processType'];
+};
+
+const EntityLink = ({uri, label, screen}: {uri: string; label: string; screen?: string}) => {
+    const styles = useStyles();
+    return (
+        <EntityUriLink value={uri} screen={screen} className={styles.entityLabel}>
+            {getLabel(label)}
+        </EntityUriLink>
+    );
+};
+
+const WorkflowTaskObject = ({object, metadata, processType}: Props) => {
+    if ('startObjectUri' in object && 'endObjectUri' in object) {
+        const relationType = getRelationType(metadata, object.type);
+        return (
+            <>
+                {relationType.label} {i18n.text('from')}{' '}
+                <EntityLink uri={object.startObjectUri} label={object.startObjectLabel} /> {i18n.text('to')}{' '}
+                <EntityLink uri={object.endObjectUri} label={object.endObjectLabel} />
+            </>
+        );
+    } else {
+        const screen = cond([
+            [
+                always(equals(processType, PredefinedWorkflowProcessType.potentialMatchReview)),
+                always('potentialMatches')
+            ],
+            [propSatisfies(isDCRUri, 'uri'), always('dcrReview')],
+            [T, always('profile')]
+        ])(object);
+        return <EntityLink uri={getEntityUriForLink(object)} label={object.label} screen={screen} />;
+    }
+};
+
+export default WorkflowTaskObject;

package/src/components/WorkflowTaskItem/__tests__/WorkflowTaskItem.test.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import * as reactRedux from 'react-redux';
+
+import WorkflowTaskItem from '../WorkflowTaskItem';
+import {EnrichedWorkflowTaskData} from '../../../types/WorkflowTasks';
+import WorkflowTaskObject from '../WorkflowTaskObject';
+import i18n from 'ui-i18n';
+import {PredefinedWorkflowProcessType} from '@reltio/mdm-sdk';
+
+describe('WorkflowTaskItem tests', () => {
+    const metadata = {
+        entityTypes: [
+            {
+                uri: 'configuration/entityTypes/HCP'
+            }
+        ]
+    };
+
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockReturnValue(metadata);
+    });
+
+    const props = {
+        task: {
+            assignee: 'johnconnor1131',
+            objectURIs: ['changeRequests/7ZotlRoP', 'entities/1aAyKH7k'],
+            createdBy: 'sairam.singireesu@reltio.com',
+            priorityClass: 'Medium',
+            createTime: 1620897479535,
+            dueDate: 1621070279536,
+            displayName: 'DCR Review',
+            processDefinitionDisplayName: 'Data Change Request Review',
+            processType: PredefinedWorkflowProcessType.potentialMatchReview,
+            objects: [
+                {
+                    uri: 'entities/1aAyKH7k',
+                    type: 'configuration/entityTypes/HCP',
+                    label: 'Bahrain'
+                }
+            ]
+        } as EnrichedWorkflowTaskData,
+        showAssignee: true
+    };
+
+    it('should render correctly', () => {
+        const wrapper = shallow(<WorkflowTaskItem {...props} />);
+        expect(wrapper.find('EntityTypeIcon').prop('entityType')).toEqual({
+            uri: 'configuration/entityTypes/HCP'
+        });
+        expect(wrapper.find('.taskTitle').text()).toEqual(props.task.processDefinitionDisplayName);
+        const details = wrapper.find('.taskDetail');
+        expect(details.length).toBe(4);
+        expect(details.at(0).find(WorkflowTaskObject).props()).toEqual({
+            metadata,
+            object: props.task.objects[0],
+            processType: PredefinedWorkflowProcessType.potentialMatchReview
+        });
+        expect(details.at(1).text()).toBe(
+            `Created by:${props.task.createdBy} on ${i18n.date(props.task.createTime, 'L')}`
+        );
+        expect(details.at(2).text()).toBe(`Assigned to:${props.task.assignee}`);
+        expect(details.at(3).text()).toBe(`Step:${props.task.displayName}`);
+        expect(wrapper.find('.taskDueDate').text()).toBe(i18n.date(props.task.dueDate, 'L'));
+    });
+
+    it('should render assignee if props.showAssignee is false', () => {
+        const wrapper = shallow(<WorkflowTaskItem {...props} showAssignee={false} />);
+        expect(
+            wrapper.find('.taskDetail').filterWhere((detail) => detail.text().startsWith('Assigned to:'))
+        ).toHaveLength(0);
+    });
+});

package/src/components/WorkflowTaskItem/__tests__/WorkflowTaskObject.test.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import WorkflowTaskObject from '../WorkflowTaskObject';
+import {PredefinedWorkflowProcessType} from '@reltio/mdm-sdk';
+
+describe('WorkflowTaskObject tests', () => {
+    const metadata = {
+        entityTypes: [
+            {
+                uri: 'configuration/entityTypes/HCP',
+                attributes: []
+            }
+        ],
+        relationTypes: [
+            {
+                uri: 'configuration/relationTypes/HasAddress',
+                label: 'hasAddress',
+                attributes: []
+            }
+        ]
+    };
+
+    it('should render entity link for entity', () => {
+        const entity = {
+            uri: 'entities/1aAyKH7k',
+            type: 'configuration/entityTypes/HCP',
+            label: 'Bahrain'
+        };
+        const wrapper = shallow(<WorkflowTaskObject object={entity} metadata={metadata} processType="some" />);
+        expect(wrapper.find('EntityLink').props()).toEqual({
+            uri: 'entities/1aAyKH7k',
+            label: 'Bahrain',
+            screen: 'profile'
+        });
+    });
+
+    it('should render entity link leading to entity PM screen if processType is "potentialMatchReview"', () => {
+        const entity = {
+            uri: 'entities/1aAyKH7k',
+            type: 'configuration/entityTypes/HCP',
+            label: 'Bahrain'
+        };
+        const wrapper = shallow(
+            <WorkflowTaskObject
+                object={entity}
+                metadata={metadata}
+                processType={PredefinedWorkflowProcessType.potentialMatchReview}
+            />
+        );
+        expect(wrapper.find('EntityLink').props()).toEqual({
+            uri: 'entities/1aAyKH7k',
+            label: 'Bahrain',
+            screen: 'potentialMatches'
+        });
+    });
+
+    it('should render entity link leading to entity dcr review if uri is dcr', () => {
+        const entity = {
+            uri: 'changeRequests/EetzZOl6/changes/entities/3E2sfZkO',
+            type: 'configuration/entityTypes/HCP',
+            label: 'Bahrain'
+        };
+        const wrapper = shallow(
+            <WorkflowTaskObject object={entity} metadata={metadata} processType="dataChangeRequestReview" />
+        );
+        expect(wrapper.find('EntityLink').props()).toEqual({
+            uri: 'changeRequests/EetzZOl6/changes/entities/3E2sfZkO',
+            label: 'Bahrain',
+            screen: 'dcrReview'
+        });
+    });
+
+    it('should render start entity and end entity links for relation', () => {
+        const relation = {
+            uri: 'relations/uxQ1bqZ',
+            type: 'configuration/relationTypes/HasAddress',
+            startObjectUri: 'entities/j8K1vc9',
+            startObjectLabel: 'label 1',
+            endObjectUri: 'entities/1MXzYxGR',
+            endObjectLabel: 'label 2'
+        };
+        const wrapper = shallow(<WorkflowTaskObject object={relation} metadata={metadata} processType="some" />);
+        expect(wrapper.text()).toBe('hasAddress from <EntityLink /> to <EntityLink />');
+        const links = wrapper.find('EntityLink');
+        expect(links.length).toEqual(2);
+        expect(links.at(0).props()).toEqual({
+            uri: 'entities/j8K1vc9',
+            label: 'label 1'
+        });
+        expect(links.at(1).props()).toEqual({
+            uri: 'entities/1MXzYxGR',
+            label: 'label 2'
+        });
+    });
+});