@reltio/dashboard 1.4.1585 → 1.4.1586-mui5

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import EntityTable from '../EntityTable';
+import {BasicTable} from '@reltio/components';
+import HeadCellRenderer from '../cell-renderers/HeadCellRenderer';
+import EntityLabelRenderer from '../cell-renderers/EntityLabelRenderer';
+
+describe('EntityTable tests', () => {
+    const data = [
+        {label: 'entity 1', uri: 'entities/1'},
+        {label: 'entity 2', uri: 'entities/2'},
+        {label: 'entity 3', uri: 'entities/3'}
+    ];
+
+    it('should render BasicTable', () => {
+        const expectedColumnsData = [
+            {
+                headCellRenderer: HeadCellRenderer,
+                id: 'label',
+                label: 'Entity',
+                initialWidth: 600,
+                resizable: false,
+                rowCellValueRenderer: EntityLabelRenderer
+            }
+        ];
+
+        const wrapper = shallow(<EntityTable width={600} height={300} data={data} />);
+        const tableChart = wrapper.find(BasicTable);
+        expect(tableChart).toHaveLength(1);
+        expect(tableChart.prop('columnsData')).toEqual(expectedColumnsData);
+        expect(tableChart.prop('rowsData')).toEqual(data);
+    });
+});

package/src/components/EntityTable/cell-renderers/EntityLabelRenderer.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {EntityUriLink, ExpandedValueTooltip} from '@reltio/components';
+import {EntityData} from '../../../types/EntityData';
+import {getLabel, getEntityUriForLink} from '@reltio/mdm-sdk';
+import {useStyles} from './styles';
+
+type Props = {
+    value: string;
+    rowValue: EntityData;
+};
+
+const EntityLabelRenderer = ({value, rowValue: entity}: Props) => {
+    const styles = useStyles();
+    const label = getLabel(value);
+    return (
+        <ExpandedValueTooltip value={label}>
+            <EntityUriLink value={getEntityUriForLink(entity)} className={styles.entityLabel}>
+                {label}
+            </EntityUriLink>
+        </ExpandedValueTooltip>
+    );
+};
+
+export default EntityLabelRenderer;

package/src/components/EntityTable/cell-renderers/HeadCellRenderer.tsx

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

package/src/components/EntityTable/cell-renderers/__tests__/EntityLabelRenderer.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {ExpandedValueTooltip} from '@reltio/components';
+import EntityLabelRenderer from '../EntityLabelRenderer';
+
+describe('EntityLabelRenderer tests', () => {
+    const props = {
+        value: 'entity 1',
+        rowValue: {
+            label: 'entity 1',
+            uri: 'entities/1'
+        }
+    };
+
+    it('should render correctly', () => {
+        const wrapper = shallow(<EntityLabelRenderer {...props} />);
+        const cell = wrapper.find(ExpandedValueTooltip);
+        expect(cell).toHaveLength(1);
+        expect(cell.prop('value')).toEqual('entity 1');
+        expect(cell.find('EntityUriLink').props()).toMatchObject({
+            value: 'entities/1',
+            children: 'entity 1'
+        });
+    });
+});

package/src/components/EntityTable/cell-renderers/styles.ts

@@ -0,0 +1,46 @@
+import {makeStyles} from '@mui/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'
+};
+
+export const useStyles = makeStyles((theme) => ({
+    headCell: {
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+        '&>div': {
+            padding: '0 16px'
+        }
+    },
+    headLabel: {
+        color: theme.palette.text.primary,
+        fontSize: '12px',
+        fontWeight: 500,
+        lineHeight: '16px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        '&:after': textOverflow
+    },
+    entityLabel: {
+        color: theme.palette.primary.main,
+        textDecoration: 'none',
+        fontSize: '13px',
+        fontWeight: 500,
+        lineHeight: '15px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+        padding: '0 16px',
+        '&:after': textOverflow
+    }
+}));

package/src/components/EntityTable/styles.ts

@@ -0,0 +1,19 @@
+import {makeStyles} from '@mui/styles';
+
+type Dimensions = {
+    width: number | string;
+    height: number | string;
+};
+
+export const useStyles = makeStyles({
+    tableContainer: ({width, height}: Dimensions) => ({
+        height: height,
+        width: width,
+        display: 'flex',
+        flexDirection: 'column'
+    }),
+    cellBorder: {
+        borderLeft: 'none',
+        borderRight: 'none'
+    }
+});

package/src/components/LayoutItemContent/LayoutItemContent.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import classnames from 'classnames';
+import i18n from 'ui-i18n';
+import {BasicViewContent, ErrorBoundary, RequestStates} from '@reltio/components';
+import {DashboardError, DashboardLinearLoader, DashboardNoData} from '../index';
+import ReactResizeDetector from 'react-resize-detector';
+import {useStyles} from './styles';
+
+type ChildrenProps<T> = {data: T[]; width: number; height: number};
+
+type Props<T> = {
+    loadingState: RequestStates;
+    children: (props: ChildrenProps<T>) => React.ReactNode;
+    onRefresh: () => void;
+    data: T[];
+    className?: string;
+    EmptyPlaceholder?: React.ReactNode;
+};
+
+const LayoutItemContent = <T extends unknown>({
+    loadingState,
+    onRefresh,
+    children,
+    data,
+    className,
+    EmptyPlaceholder
+}: Props<T>) => {
+    const styles = useStyles();
+
+    const renderContent = ({width, height}: {width: number; height: number}) => {
+        switch (loadingState) {
+            case RequestStates.LOADED:
+                if (!data || data.length === 0) {
+                    return EmptyPlaceholder || <DashboardNoData height={height} />;
+                }
+                return (
+                    <ErrorBoundary
+                        error={<DashboardError message={i18n.text('Something went wrong')} height={height} />}
+                    >
+                        {children({data, width, height})}
+                    </ErrorBoundary>
+                );
+            case RequestStates.LOADING:
+                return <DashboardLinearLoader />;
+            case RequestStates.ERROR:
+                return (
+                    <DashboardError message={i18n.text('Error Loading Data')} height={height} onRefresh={onRefresh} />
+                );
+            default:
+                return <div>Loading...</div>;
+        }
+    };
+
+    return (
+        <BasicViewContent className={classnames(styles.viewContent, className)}>
+            <ReactResizeDetector refreshMode="debounce" refreshRate={100} handleWidth handleHeight>
+                {renderContent}
+            </ReactResizeDetector>
+        </BasicViewContent>
+    );
+};
+
+export default LayoutItemContent;

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

@@ -0,0 +1,71 @@
+import {mount} from 'enzyme';
+import React from 'react';
+import {ErrorBoundary, RequestStates} from '@reltio/components';
+import {DashboardError, DashboardLinearLoader, DashboardNoData} from '../../index';
+import LayoutItemContent from '../LayoutItemContent';
+
+describe('LayoutItemContent', () => {
+    const onRefresh = jest.fn();
+    const defaultProps = {
+        loadingState: RequestStates.LOADED,
+        onRefresh,
+        data: [1, 2, 3],
+        EmptyPlaceholder: undefined
+    };
+
+    const getComponent = (props = defaultProps) => {
+        return mount(
+            <LayoutItemContent {...props}>
+                {({data}) => <div className="childrenComponent" data-data={data} />}
+            </LayoutItemContent>
+        );
+    };
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should show loader in "loading" state', () => {
+        const wrapper = getComponent({...defaultProps, loadingState: RequestStates.LOADING});
+
+        expect(wrapper.find('.childrenComponent')).toHaveLength(0);
+        expect(wrapper.find(DashboardLinearLoader)).toHaveLength(1);
+    });
+
+    it('should show error component in "error" state and call onRefresh prop', () => {
+        const wrapper = getComponent({...defaultProps, loadingState: RequestStates.ERROR});
+
+        expect(wrapper.find('.childrenComponent')).toHaveLength(0);
+        expect(wrapper.find(DashboardError)).toHaveLength(1);
+
+        wrapper.find(DashboardError).prop('onRefresh')();
+        expect(onRefresh).toHaveBeenCalled();
+    });
+
+    it('should show no data component if data is loaded and empty', () => {
+        const wrapper = getComponent({...defaultProps, data: []});
+
+        expect(wrapper.find('.childrenComponent')).toHaveLength(0);
+        expect(wrapper.find(DashboardNoData)).toHaveLength(1);
+    });
+
+    it('should show EmptyPlaceholder component if data is loaded, and empty', () => {
+        const wrapper = getComponent({
+            ...defaultProps,
+            data: [],
+            EmptyPlaceholder: <div className="placeholder">emptyPlaceholder</div>
+        });
+
+        expect(wrapper.find('.childrenComponent')).toHaveLength(0);
+        const placeholder = wrapper.find('.placeholder');
+        expect(placeholder).toHaveLength(1);
+        expect(placeholder.text()).toBe('emptyPlaceholder');
+    });
+
+    it('should show children component if data is loaded and not empty', () => {
+        const wrapper = getComponent({...defaultProps});
+
+        expect(wrapper.find('.childrenComponent')).toHaveLength(1);
+        expect(wrapper.find(ErrorBoundary)).toHaveLength(1);
+        expect(wrapper.find('.childrenComponent').prop('data-data')).toEqual(defaultProps.data);
+    });
+});

package/src/components/LayoutItemContent/styles.ts

@@ -0,0 +1,36 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles(() => ({
+    viewContent: {
+        height: '100%',
+        overflow: 'hidden',
+        position: 'relative',
+        padding: '0 16px 16px'
+    },
+    toolbarRoot: {
+        padding: '16px',
+        minHeight: '18px',
+        lineHeight: '18px',
+        marginBottom: '8px',
+        '&:hover .viewDraggableHandle': {
+            visibility: 'visible'
+        }
+    },
+    title: {
+        fontSize: '16px',
+        lineHeight: '19px',
+        fontWeight: 'normal',
+        color: 'rgba(0, 0, 0, 0.87)',
+        letterSpacing: '0.15px'
+    },
+    dragIcon: {
+        position: 'absolute',
+        left: '50%',
+        top: '-3px',
+        transform: 'translateX(-50%) rotate(90deg)',
+        color: 'rgba(0, 0, 0, 0.3)',
+        cursor: 'move',
+        zIndex: 8,
+        visibility: 'hidden'
+    }
+}));

package/src/components/LayoutItemHeader/LayoutItemHeader.tsx

@@ -0,0 +1,86 @@
+import React, {useContext, useMemo} from 'react';
+import {BasicViewHeader} from '@reltio/components';
+import {DashboardViewIdContext} from '../../contexts/DashboardViewIdContext';
+import {DashboardPopupMenu} from '../index';
+import Chip from '@mui/material/Chip';
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import ReplayIcon from '@mui/icons-material/Replay';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import i18n from 'ui-i18n';
+
+import classnames from 'classnames';
+import {useStyles} from './styles';
+
+type Props = {
+    title: string;
+    onToggleFullscreen: (id: string) => void;
+    isFullscreen: boolean;
+    isUpdated?: boolean;
+    onRefresh?: () => void;
+    onRemove?: (id: string) => void;
+    children?: React.ReactNode;
+};
+
+const LayoutItemHeader = ({
+    title,
+    onToggleFullscreen,
+    isUpdated = false,
+    isFullscreen,
+    onRemove,
+    onRefresh,
+    children
+}: Props) => {
+    const id = useContext(DashboardViewIdContext);
+    const menuItems = useMemo(
+        () => [
+            {
+                id: 'refresh',
+                title: i18n.text('Refresh'),
+                icon: <ReplayIcon />,
+                active: !!onRefresh,
+                action: () => onRefresh()
+            },
+            {
+                id: 'fullscreen',
+                title: i18n.text('Fullscreen'),
+                icon: <FullscreenIcon />,
+                active: !isFullscreen,
+                action: () => onToggleFullscreen(id)
+            },
+            {
+                id: 'exitFullscreen',
+                title: i18n.text('Exit fullscreen'),
+                icon: <FullscreenExitIcon />,
+                active: isFullscreen,
+                action: () => onToggleFullscreen(id)
+            },
+            {
+                id: 'remove',
+                title: i18n.text('Remove'),
+                icon: <HighlightOffIcon />,
+                active: !!onRemove,
+                action: () => {
+                    onRemove(id);
+                    if (isFullscreen) onToggleFullscreen(id);
+                }
+            }
+        ],
+        [id, isFullscreen, onRemove, onToggleFullscreen, onRefresh]
+    );
+    const styles = useStyles();
+
+    return (
+        <BasicViewHeader title={title} className={styles.toolbarRoot} classes={{title: styles.title}}>
+            {isUpdated && <Chip label={i18n.text('Updated')} size="small" className={styles.updatedChip} />}
+            <div className={styles.rightMenu}>
+                {children}
+                <DashboardPopupMenu items={menuItems} />
+            </div>
+            <DragIndicatorIcon className={classnames('viewDraggableHandle', styles.dragIcon)} />
+        </BasicViewHeader>
+    );
+};
+
+export default LayoutItemHeader;

package/src/components/LayoutItemHeader/__tests__/LayoutItemHeader.specs.tsx

@@ -0,0 +1,48 @@
+import LayoutItemHeader from '../LayoutItemHeader';
+import React from 'react';
+import {mount, shallow} from 'enzyme';
+import {BasicViewHeader} from '@reltio/components';
+import DashboardPopupMenu from '../../DashboardPopupMenu/DashboardPopupMenu';
+import Chip from '@mui/material/Chip';
+import MenuItem from '@mui/material/MenuItem';
+import IconButton from '@mui/material/IconButton';
+
+describe('LayoutItemHeader tests', () => {
+    const props = {
+        title: 'Test',
+        isUpdated: false,
+        isFullscreen: false,
+        onRemove: jest.fn(),
+        onRefresh: jest.fn(),
+        onToggleFullscreen: jest.fn()
+    };
+
+    it('should proper render header', () => {
+        const wrapper = shallow(<LayoutItemHeader {...props} />);
+        const header = wrapper.find(BasicViewHeader);
+        expect(header).toHaveLength(1);
+        expect(header.prop('title')).toEqual(props.title);
+        expect(wrapper.find(DashboardPopupMenu)).toHaveLength(1);
+        expect(wrapper.find('.viewDraggableHandle')).toHaveLength(1);
+        expect(wrapper.find(Chip)).toHaveLength(0);
+    });
+
+    it('should not render optional menu items when related functions is not passed', () => {
+        const props = {
+            title: 'Test',
+            isUpdated: false,
+            isFullscreen: false,
+            onToggleFullscreen: jest.fn()
+        };
+
+        const wrapper = mount(<LayoutItemHeader {...props} />);
+
+        wrapper.find(IconButton).simulate('click');
+        expect(wrapper.find(MenuItem)).toHaveLength(1);
+    });
+
+    it('should show "Updated" chip when isUpdated === true', () => {
+        const wrapper = shallow(<LayoutItemHeader {...props} isUpdated />);
+        expect(wrapper.find(Chip)).toHaveLength(1);
+    });
+});

package/src/components/LayoutItemHeader/styles.ts

@@ -0,0 +1,44 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles(() => ({
+    toolbarRoot: {
+        padding: '16px',
+        minHeight: '18px',
+        lineHeight: '18px',
+        marginBottom: '8px'
+    },
+    title: {
+        fontSize: '16px',
+        lineHeight: '20px',
+        fontWeight: 'normal',
+        color: 'rgba(0, 0, 0, 0.87)',
+        letterSpacing: '0.15px',
+        marginRight: '6px'
+    },
+    dragIcon: {
+        position: 'absolute',
+        left: '50%',
+        top: '-3px',
+        transform: 'translateX(-50%) rotate(90deg)',
+        color: 'rgba(0, 0, 0, 0.3)',
+        cursor: 'move',
+        zIndex: 8,
+        visibility: 'hidden',
+        '.react-draggable $toolbarRoot:hover &.viewDraggableHandle': {
+            visibility: 'visible'
+        }
+    },
+    rightMenu: {
+        display: 'flex',
+        flexGrow: 1,
+        justifyContent: 'flex-end',
+        alignItems: 'baseline'
+    },
+    updatedChip: {
+        background: '#FF9E1B',
+        height: 20,
+        fontSize: '10px',
+        color: 'white',
+        marginRight: '6px'
+    }
+}));

package/src/components/LayoutItemView/LayoutItemView.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {BasicView} from '@reltio/components';
+import {DashboardViewIdContext} from '../../contexts/DashboardViewIdContext';
+
+import {useStyles} from './styles';
+
+type Props = {
+    id: string;
+    children: React.ReactNode;
+};
+
+const LayoutItemView = ({id, children}: Props) => {
+    const styles = useStyles();
+
+    return (
+        <DashboardViewIdContext.Provider value={id}>
+            <BasicView className={styles.view} data-reltio-id={`layout-item-${id}`}>
+                {children}
+            </BasicView>
+        </DashboardViewIdContext.Provider>
+    );
+};
+
+export default LayoutItemView;

package/src/components/LayoutItemView/styles.ts

@@ -0,0 +1,11 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles(() => ({
+    view: {
+        flex: 1,
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+        boxShadow: 'none'
+    }
+}));

package/src/components/StatsChart/StatsChart.tsx

@@ -0,0 +1,77 @@
+import React, {useMemo, useState} from 'react';
+import {CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis} from 'recharts';
+import {append, ifElse, includes, pluck, without} from 'ramda';
+import getStatsChartSettings from './getStatsChartSettings';
+import {PeriodStep} from '../../types/PeriodStep';
+import {StatsData} from '../../types/StatsData';
+import {calibrateStatsData, getStatsEventColor, getChartDomain} from '../../services/stats';
+import CustomAxisTick from './customized/CustomAxisTick';
+import CustomTooltip from './customized/CustomTooltip';
+import CustomLegend from './customized/CustomLegend';
+
+type Props = {
+    data: StatsData[];
+    width: number;
+    height: number;
+    step: PeriodStep;
+};
+
+const StatsChart = ({data, width, height, step}: Props) => {
+    const [selectedEvents, setSelectedEvents] = useState<string[]>(pluck('event', data));
+    const toggleEvent = (event) => {
+        setSelectedEvents(ifElse(includes(event), without([event]), append(event)));
+    };
+
+    const [tooltipEvent, setTooltipEvent] = useState<string | null>(null);
+
+    const tickCount = 8;
+    const {cartesianGrid, tooltip, xAxis, yAxis, line, legend} = getStatsChartSettings();
+    const chartData = useMemo(() => calibrateStatsData(step, data), [step, data]);
+    const domain = useMemo(() => getChartDomain(chartData, tickCount), [chartData]);
+
+    return (
+        <LineChart width={width} height={height}>
+            <CartesianGrid {...cartesianGrid} />
+            <XAxis {...xAxis} tick={<CustomAxisTick step={step} />} />
+            <YAxis {...yAxis} tickCount={tickCount} domain={domain} />
+            {chartData.map(({event, data}) => {
+                const isSelected = selectedEvents.includes(event);
+                return (
+                    <Line
+                        key={event}
+                        stroke={getStatsEventColor(event)}
+                        name={event}
+                        data={data}
+                        dot={isSelected && {r: 5, strokeWidth: 2}}
+                        activeDot={
+                            isSelected && {
+                                r: 5,
+                                strokeWidth: 2,
+                                onMouseEnter: () => setTooltipEvent(event),
+                                onMouseLeave: () => setTooltipEvent(null)
+                            }
+                        }
+                        strokeOpacity={isSelected ? 1 : 0}
+                        {...line}
+                    />
+                );
+            })}
+            <Legend
+                content={<CustomLegend selectedItems={selectedEvents} onClick={toggleEvent} />}
+                payload={chartData.map(({event, total}) => ({
+                    id: event,
+                    type: 'square',
+                    color: getStatsEventColor(event),
+                    value: total
+                }))}
+                {...legend}
+            />
+            <Tooltip
+                {...tooltip}
+                content={<CustomTooltip step={step} events={tooltipEvent ? [tooltipEvent] : selectedEvents} />}
+            />
+        </LineChart>
+    );
+};
+
+export default StatsChart;