@reltio/dashboard 1.4.1584 → 1.4.1586-mui5

package/src/views/chartBased/__tests__/DashboardFacet.specs.tsx

@@ -0,0 +1,358 @@
+import React from 'react';
+import {mount, shallow} from 'enzyme';
+import * as reactRedux from 'react-redux';
+
+import {BarChart, BasicView, BasicViewContent, BasicViewHeader, RequestStates} from '@reltio/components';
+import * as ReltioComponents from '@reltio/components';
+import {ChartTypes, DashboardViewTypes} from '@reltio/mdm-sdk';
+import * as useFacetRequestHook from '../../../hooks/useFacetRequest';
+import {DashboardPopupMenu, DashboardLayoutItemHeader} from '../../../components';
+import DashboardFacet from '../DashboardFacet';
+import mdmModule, {ui} from '@reltio/mdm-module';
+
+jest.mock('@reltio/components', () => ({
+    ...(jest.requireActual('@reltio/components') as Record<string, unknown>),
+    useReloadAllFacets: jest.fn()
+}));
+
+describe('DashboardFacet tests', () => {
+    const options = {
+        isLabelRotated: true
+    };
+    const config = {
+        id: 'MyDashboard',
+        component: DashboardViewTypes.DashboardFacet,
+        attributeUri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+        chartType: 'bar',
+        title: 'Country codes',
+        filters: [],
+        count: 1,
+        orderType: 'ASC',
+        ...options
+    };
+    const props = {
+        config,
+        onToggleFullscreen: jest.fn(),
+        isUpdated: false,
+        isFullscreen: false,
+        onRemove: jest.fn()
+    };
+    const dispatch = jest.fn();
+    const reload = jest.fn();
+    const metadata = {
+        entityTypes: [
+            {
+                uri: 'configuration/entityTypes/HCP',
+                attributes: [
+                    {
+                        uri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                        type: 'String',
+                        lookupCode: 'COUNTRY_CD'
+                    },
+                    {
+                        uri: 'configuration/entityTypes/HCP/attributes/Enumeration',
+                        type: 'Enum'
+                    },
+                    {
+                        uri: 'configuration/entityTypes/HCP/attributes/Date',
+                        type: 'Date'
+                    },
+                    {
+                        uri: 'configuration/entityTypes/HCP/attributes/Timestamp',
+                        type: 'Timestamp'
+                    }
+                ]
+            }
+        ]
+    };
+
+    beforeAll(() => {
+        jest.spyOn(mdmModule.selectors, 'getMetadata').mockReturnValue(metadata);
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector({}));
+        jest.spyOn(ReltioComponents, 'useReloadFacet').mockImplementation(() => {});
+        jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(dispatch);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render dashboard facet', () => {
+        jest.spyOn(useFacetRequestHook, 'useFacetRequest').mockImplementation(() => {
+            return {
+                state: RequestStates.LOADED,
+                data: [{label: 'USA', group: 'US', value: 30}],
+                reload
+            };
+        });
+        const wrapper = mount(<DashboardFacet {...props} />);
+        expect(wrapper.find(DashboardLayoutItemHeader).props()).toEqual({
+            title: config.title,
+            onToggleFullscreen: props.onToggleFullscreen,
+            isUpdated: props.isUpdated,
+            isFullscreen: props.isFullscreen,
+            onRefresh: reload,
+            onRemove: props.onRemove
+        });
+        expect(wrapper.find(BasicView).length).toBe(1);
+        expect(wrapper.find(BasicViewHeader).length).toBe(1);
+        expect(wrapper.find(BasicViewHeader).prop('title')).toEqual(props.config.title);
+        expect(wrapper.find(DashboardPopupMenu).length).toBe(1);
+        expect(wrapper.find(BasicViewContent).length).toBe(1);
+        const chart = wrapper.find(BarChart);
+        expect(chart.length).toBe(1);
+        expect(chart.prop('options')).toMatchObject(options);
+    });
+
+    it('should render dashboard facet with special attribute', () => {
+        jest.spyOn(useFacetRequestHook, 'useFacetRequest').mockImplementation((props) => {
+            expect(props.attributeUri).toBe('tags');
+            return {
+                state: RequestStates.LOADED,
+                data: [{label: 'test1', group: 'test1', value: 30}],
+                reload
+            };
+        });
+        const specialConfig = {
+            id: 'Test',
+            chartType: 'bar',
+            title: 'Profile tags',
+            component: 'DashboardFacet',
+            attributeUri: 'tags'
+        };
+        const wrapper = mount(<DashboardFacet {...props} config={specialConfig} />);
+        expect(wrapper.find(BasicView).length).toBe(1);
+        expect(wrapper.find(BasicViewHeader).length).toBe(1);
+        expect(wrapper.find(BasicViewHeader).prop('title')).toEqual(specialConfig.title);
+        const chart = wrapper.find(BarChart);
+        expect(chart.length).toBe(1);
+    });
+
+    it('should open search on facet item click correctly', () => {
+        jest.spyOn(useFacetRequestHook, 'useFacetRequest').mockImplementation(() => {
+            return {
+                state: RequestStates.LOADED,
+                data: [{label: 'USA', group: 'US', value: 30}],
+                reload
+            };
+        });
+        const wrapper = mount(<DashboardFacet {...props} />);
+        wrapper.find(BarChart).prop('onItemClick')('US');
+        expect(dispatch).toBeCalledWith(
+            ui.actions.openSearch({
+                facets: [
+                    {
+                        fieldName: 'type',
+                        filter: 'equals',
+                        values: ['configuration/entityTypes/HCP']
+                    },
+                    {
+                        fieldName: 'attributes.CountryCode',
+                        filter: 'equals',
+                        values: ['US'],
+                        entityType: 'configuration/entityTypes/HCP'
+                    }
+                ]
+            })
+        );
+    });
+
+    it('should open search on date facet item click correctly', () => {
+        jest.spyOn(useFacetRequestHook, 'useFacetRequest').mockImplementation(() => {
+            return {
+                state: RequestStates.LOADED,
+                data: [{label: '07-01-2021', group: '1625119557484', value: 30}],
+                reload: () => {}
+            };
+        });
+        const configWithDate = {
+            ...config,
+            attributeUri: 'configuration/entityTypes/HCP/attributes/Date',
+            title: 'Dates'
+        };
+        const wrapper = mount(<DashboardFacet {...props} config={configWithDate} />);
+        wrapper.find(BarChart).prop('onItemClick')('1625119557484');
+        expect(dispatch).toBeCalledWith(
+            ui.actions.openSearch({
+                facets: [
+                    {
+                        fieldName: 'type',
+                        filter: 'equals',
+                        values: ['configuration/entityTypes/HCP']
+                    },
+                    {
+                        fieldName: 'attributes.Date',
+                        filter: 'equals',
+                        values: [1625119557484],
+                        entityType: 'configuration/entityTypes/HCP'
+                    }
+                ]
+            })
+        );
+    });
+
+    it('should open search on other facet item click correctly', () => {
+        jest.spyOn(useFacetRequestHook, 'useFacetRequest').mockImplementation(() => {
+            return {
+                state: RequestStates.LOADED,
+                data: [
+                    {label: 'USA', group: 'US', value: 30},
+                    {label: 'Russia', group: 'RU', value: 20},
+                    {label: 'Other', group: 'Other', value: 12}
+                ],
+                reload
+            };
+        });
+        const configWithShowOthers = {
+            ...config,
+            showOthers: true
+        };
+        const wrapper = mount(<DashboardFacet {...props} config={configWithShowOthers} />);
+        wrapper.find(BarChart).prop('onItemClick')('Other');
+        expect(dispatch).toBeCalledWith(
+            ui.actions.openSearch({
+                facets: [
+                    {
+                        fieldName: 'type',
+                        filter: 'equals',
+                        values: ['configuration/entityTypes/HCP']
+                    },
+                    {
+                        fieldName: 'attributes.CountryCode',
+                        filter: 'not equals',
+                        values: ['US'],
+                        entityType: 'configuration/entityTypes/HCP'
+                    },
+                    {
+                        fieldName: 'attributes.CountryCode',
+                        filter: 'not equals',
+                        values: ['RU'],
+                        entityType: 'configuration/entityTypes/HCP'
+                    }
+                ]
+            })
+        );
+    });
+
+    it('should open search on facet item click correctly (config with filters)', () => {
+        jest.spyOn(useFacetRequestHook, 'useFacetRequest').mockImplementation(() => {
+            return {
+                state: RequestStates.LOADED,
+                data: [{label: 'USA', group: 'US', value: 30}],
+                reload
+            };
+        });
+        const configWithFilters = {
+            ...config,
+            filters: [
+                {
+                    filter: 'equals',
+                    fieldName: 'attributes.Enumeration',
+                    values: ['Test1']
+                },
+                {
+                    fieldName: 'roles',
+                    filter: 'equals',
+                    values: ['configuration/roles/PracticeManager']
+                },
+                {
+                    fieldName: 'attributes.Date',
+                    filter: 'range',
+                    values: ['1525737600000', '1525737700000']
+                },
+                {
+                    filter: 'gte',
+                    fieldName: 'attributes.Timestamp',
+                    values: ['1620414000000']
+                },
+                {
+                    filter: 'lte',
+                    fieldName: 'attributes.Timestamp',
+                    values: ['1620586799999']
+                }
+            ]
+        };
+        const wrapper = mount(<DashboardFacet {...props} config={configWithFilters} />);
+        wrapper.find(BarChart).prop('onItemClick')('US');
+        expect(dispatch).toBeCalledWith(
+            ui.actions.openSearch({
+                facets: [
+                    {
+                        fieldName: 'type',
+                        filter: 'equals',
+                        values: ['configuration/entityTypes/HCP']
+                    },
+                    {
+                        fieldName: 'attributes.Enumeration',
+                        filter: 'equals',
+                        values: ['Test1'],
+                        entityType: 'configuration/entityTypes/HCP'
+                    },
+                    {
+                        fieldName: 'roles',
+                        filter: 'equals',
+                        values: ['configuration/roles/PracticeManager']
+                    },
+                    {
+                        fieldName: 'attributes.Date',
+                        filter: 'range',
+                        values: [[1525737600000, 1525737700000]],
+                        entityType: 'configuration/entityTypes/HCP'
+                    },
+                    {
+                        fieldName: 'attributes.Timestamp',
+                        filter: 'gte',
+                        values: [1620414000000],
+                        entityType: 'configuration/entityTypes/HCP'
+                    },
+                    {
+                        fieldName: 'attributes.Timestamp',
+                        filter: 'lte',
+                        values: [1620586799999],
+                        entityType: 'configuration/entityTypes/HCP'
+                    },
+                    {
+                        filter: 'equals',
+                        fieldName: 'attributes.CountryCode',
+                        entityType: 'configuration/entityTypes/HCP',
+                        values: ['US']
+                    }
+                ]
+            })
+        );
+    });
+
+    it('should correctly choose count', () => {
+        const facetRequest = jest.spyOn(useFacetRequestHook, 'useFacetRequest').mockImplementation(() => {
+            return {
+                state: RequestStates.LOADED,
+                data: [{label: 'USA', group: 'US', value: 30}],
+                reload
+            };
+        });
+        const wrapper = shallow(<DashboardFacet {...props} />);
+        expect(facetRequest).lastCalledWith({
+            attributeUri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+            pageSize: 1,
+            filters: [],
+            options: {showOthers: undefined},
+            orderType: 'ASC'
+        });
+        wrapper.setProps({config: {...config, count: undefined}});
+        expect(facetRequest).lastCalledWith({
+            attributeUri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+            pageSize: 8,
+            filters: [],
+            options: {showOthers: undefined},
+            orderType: 'ASC'
+        });
+        wrapper.setProps({config: {...config, chartType: ChartTypes.MAP, count: undefined}});
+        expect(facetRequest).lastCalledWith({
+            attributeUri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+            pageSize: 100,
+            filters: [],
+            options: {showOthers: undefined},
+            orderType: 'ASC'
+        });
+    });
+});

package/src/views/chartBased/__tests__/EntitiesByTypeViewFacet.specs.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {BasicView, BasicViewContent, BasicViewHeader, TreeChart, RequestStates} from '@reltio/components';
+import {ui} from '@reltio/mdm-module';
+import * as useEntityByTypeRequestHook from '../../../hooks/useEntityByTypeRequest';
+import {DashboardPopupMenu, DashboardLayoutItemHeader} from '../../../components';
+import EntitiesByTypeViewFacet from '../EntitiesByTypeViewFacet';
+import * as ReltioComponents from '@reltio/components';
+import {DashboardViewTypes} from '@reltio/mdm-sdk';
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    TreeChart: () => null
+}));
+
+describe('EntitiesByTypeViewFacet tests', () => {
+    const props = {
+        config: {
+            id: 'id',
+            title: 'title',
+            component: DashboardViewTypes.EntitiesByTypeViewFacet,
+            hideEmpty: false,
+            inheritChildren: false
+        },
+        onToggleFullscreen: jest.fn(),
+        isUpdated: false,
+        isFullscreen: false,
+        onRemove: jest.fn()
+    };
+
+    const dispatch = jest.fn();
+    const reload = jest.fn();
+
+    beforeAll(() => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation(() => ({}));
+        jest.spyOn(useEntityByTypeRequestHook, 'useEntityByTypeRequest').mockImplementation(() => {
+            return {
+                state: RequestStates.LOADED,
+                data: [
+                    {group: 'Party', label: 'Сторона', value: 1761537},
+                    {group: 'REGISTRY', label: 'РЕЕСТР', value: 515},
+                    {group: 'Location', label: 'Address', value: 54},
+                    {group: 'ETLLOV', label: 'ETLLOV', value: 11},
+                    {group: 'OMG', label: 'OMG', value: 5},
+                    {group: 'HCPLongName', label: 'HCP Long Name', value: 4},
+                    {group: 'ForRDM', label: 'ForRDM', value: 1}
+                ],
+                reload,
+                total: 2
+            };
+        });
+        jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(dispatch);
+        jest.spyOn(ReltioComponents, 'useReloadFacet').mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render tree chart', () => {
+        const wrapper = mount(<EntitiesByTypeViewFacet {...props} />);
+        expect(wrapper.find(DashboardLayoutItemHeader).props()).toEqual({
+            title: props.config.title,
+            onToggleFullscreen: props.onToggleFullscreen,
+            isUpdated: props.isUpdated,
+            isFullscreen: props.isFullscreen,
+            onRefresh: reload,
+            onRemove: props.onRemove
+        });
+        expect(wrapper.find(BasicView).length).toBe(1);
+        expect(wrapper.find(BasicViewHeader).length).toBe(1);
+        expect(wrapper.find(BasicViewHeader).prop('title')).toEqual(props.config.title);
+        expect(wrapper.find(DashboardPopupMenu).length).toBe(1);
+        expect(wrapper.find(BasicViewContent).find(TreeChart).prop('data')).toEqual([
+            {group: 'Party', label: 'Сторона', value: 1761537},
+            {group: 'REGISTRY', label: 'РЕЕСТР', value: 515},
+            {group: 'Location', label: 'Address', value: 54},
+            {group: 'ETLLOV', label: 'ETLLOV', value: 11},
+            {group: 'OMG', label: 'OMG', value: 5},
+            {group: 'HCPLongName', label: 'HCP Long Name', value: 4},
+            {group: 'ForRDM', label: 'ForRDM', value: 1}
+        ]);
+    });
+
+    it('should open search on new type click correctly', () => {
+        const wrapper = mount(<EntitiesByTypeViewFacet {...props} />);
+        wrapper.find(TreeChart).prop('onItemClick')('Party');
+        expect(dispatch).toBeCalledWith(
+            ui.actions.openSearch({
+                facets: [
+                    {
+                        fieldName: 'type',
+                        filter: 'equals',
+                        values: ['configuration/entityTypes/Party']
+                    }
+                ]
+            })
+        );
+    });
+});

package/src/views/chartBased/__tests__/ProfileStatsFacet.specs.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import {act} from 'react-dom/test-utils';
+import {mount} from 'enzyme';
+
+import ProfileStatsFacet from '../ProfileStatsFacet';
+import * as useStatsRequest from '../../../hooks/useStatsRequest';
+import {PeriodStep} from '../../../types/PeriodStep';
+import * as StatsChartImport from '../../../components/StatsChart/StatsChart';
+import StatsChart from '../../../components/StatsChart/StatsChart';
+import {
+    BasicView,
+    BasicViewContent,
+    BasicViewHeader,
+    DateRangeEditor,
+    EmptyStub,
+    RequestStates,
+    ReloadFacetProvider
+} from '@reltio/components';
+import {DashboardPopupMenu, DashboardLayoutItemHeader} from '../../../components';
+import {DashboardViewTypes, DateRangeValue} from '@reltio/mdm-sdk';
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    DateRangeEditor: jest.fn().mockImplementation(() => null)
+}));
+
+describe('ProfileStatsFacet tests', () => {
+    const props = {
+        config: {
+            id: 'id',
+            component: DashboardViewTypes.ProfileStatsFacet,
+            title: 'ProfileStats'
+        },
+        onRemove: jest.fn(),
+        onToggleFullscreen: jest.fn(),
+        isUpdated: false,
+        isFullscreen: false
+    };
+    const statsData = [{event: 'created', total: 1234, data: []}];
+    const reload = jest.fn();
+
+    beforeAll(() => {
+        jest.spyOn(Date, 'now').mockImplementation(() => new Date(1667214303338).getTime());
+        jest.spyOn(useStatsRequest, 'useStatsRequest').mockImplementation((_) => {
+            return {
+                state: RequestStates.LOADED,
+                data: statsData,
+                step: PeriodStep.DAY,
+                reload
+            };
+        });
+        jest.spyOn(StatsChartImport, 'default').mockImplementation(EmptyStub);
+    });
+
+    afterAll(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render correct default state', () => {
+        const wrapper = mount(
+            <ReloadFacetProvider>
+                <ProfileStatsFacet {...props} />
+            </ReloadFacetProvider>
+        );
+        expect(wrapper.find(DashboardLayoutItemHeader).props()).toMatchObject({
+            title: props.config.title,
+            onToggleFullscreen: props.onToggleFullscreen,
+            isUpdated: props.isUpdated,
+            isFullscreen: props.isFullscreen,
+            onRefresh: reload,
+            onRemove: props.onRemove
+        });
+        expect(wrapper.find(BasicView).length).toBe(1);
+        expect(wrapper.find(BasicViewHeader).length).toBe(1);
+        expect(wrapper.find(BasicViewHeader).prop('title')).toEqual(props.config.title);
+        expect(wrapper.find(DashboardPopupMenu).length).toBe(1);
+        expect(wrapper.find(BasicViewContent).length).toBe(1);
+        expect(wrapper.find(DateRangeEditor).prop('values')).toEqual(DateRangeValue.LAST_WEEK);
+        expect(wrapper.find(StatsChart).props()).toMatchObject({
+            step: PeriodStep.DAY,
+            data: statsData
+        });
+        expect(useStatsRequest.useStatsRequest).toBeCalledWith(DateRangeValue.LAST_WEEK);
+    });
+
+    it('should apply changed period correctly', () => {
+        const wrapper = mount(
+            <ReloadFacetProvider>
+                <ProfileStatsFacet {...props} />
+            </ReloadFacetProvider>
+        );
+        jest.spyOn(useStatsRequest, 'useStatsRequest').mockReturnValueOnce({
+            state: RequestStates.LOADED,
+            data: statsData,
+            step: PeriodStep.HOUR,
+            reload
+        });
+        act(() => {
+            wrapper.find(DateRangeEditor).prop('onChange')(DateRangeValue.LAST_DAY);
+        });
+        wrapper.update();
+        expect(wrapper.find(DateRangeEditor).prop('values')).toEqual(DateRangeValue.LAST_DAY);
+        expect(wrapper.find(StatsChart).prop('step')).toBe(PeriodStep.HOUR);
+        expect(useStatsRequest.useStatsRequest).toBeCalledWith(DateRangeValue.LAST_DAY);
+    });
+});

package/src/views/chartBased/styles.ts

@@ -0,0 +1,13 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    periodSelector: {
+        position: 'relative',
+        margin: '0 6px 0 0',
+        flexBasis: '220px',
+        flexShrink: 1,
+        '& input[type="text"]': {
+            padding: '0 0 0 8px'
+        }
+    }
+});

package/src/views/custom/CustomActionViewFacet.tsx

@@ -0,0 +1,36 @@
+import React, {memo} from 'react';
+import {CustomActionViewFacetConfig} from '../../types/CustomActionViewFacetConfig';
+import LayoutItemView from '../../components/LayoutItemView/LayoutItemView';
+import LayoutItemHeader from '../../components/LayoutItemHeader/LayoutItemHeader';
+import {BasicViewContent} from '@reltio/components';
+import {useStyles} from './styles';
+
+type Props = {
+    config: CustomActionViewFacetConfig;
+    onToggleFullscreen: (id: string) => void;
+    isUpdated?: boolean;
+    isFullscreen: boolean;
+    onRemove?: (id: string) => void;
+};
+
+const CustomActionViewFacet = ({config, onToggleFullscreen, isUpdated, isFullscreen, onRemove}: Props) => {
+    const {id, title, url} = config;
+    const styles = useStyles();
+
+    return (
+        <LayoutItemView id={id}>
+            <LayoutItemHeader
+                title={title}
+                onToggleFullscreen={onToggleFullscreen}
+                isUpdated={isUpdated}
+                isFullscreen={isFullscreen}
+                onRemove={onRemove}
+            />
+            <BasicViewContent className={styles.viewContent}>
+                <iframe src={url} frameBorder="0" className={styles.iframe} />
+            </BasicViewContent>
+        </LayoutItemView>
+    );
+};
+
+export default memo(CustomActionViewFacet);