@reltio/dashboard 1.4.1584 → 1.4.1586-mui5

package/src/views/tableBased/__tests__/FIlteredEntitiesViewFacet.specs.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {
+    BasicTablePagination,
+    BasicView,
+    BasicViewContent,
+    BasicViewHeader,
+    RequestStates,
+    ReloadFacetProvider,
+    useReloadFacet
+} from '@reltio/components';
+import * as useFilteredEntitiesRequestHook from '../../../hooks/useFilteredEntitiesRequest';
+import {DashboardPopupMenu, DashboardLayoutItemHeader} from '../../../components';
+import FilteredEntitiesViewFacet from '../FilteredEntitiesViewFacet';
+import {DashboardViewTypes} from '@reltio/mdm-sdk';
+import EntityTable from '../../../components/EntityTable/EntityTable';
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    TableWithBars: () => null,
+    BasicTablePagination: () => null,
+    useReloadFacet: jest.fn()
+}));
+
+describe('FilteredEntitiesViewFacet tests', () => {
+    const props = {
+        config: {
+            id: 'id',
+            title: 'title',
+            component: DashboardViewTypes.FilteredEntitiesViewFacet,
+            options: {
+                countResults: true
+            }
+        },
+        onToggleFullscreen: jest.fn(),
+        isUpdated: false,
+        isFullscreen: false,
+        onRemove: jest.fn()
+    };
+    const data = [
+        {label: 'first', uri: 'savedSearch/1'},
+        {label: 'second', uri: 'savedSearch/2'}
+    ];
+    const dispatch = jest.fn();
+    const reload = jest.fn();
+
+    beforeEach(() => {
+        (useReloadFacet as jest.Mock).mockReturnValue({
+            state: RequestStates.LOADED,
+            reload
+        });
+    });
+    beforeAll(() => {
+        jest.spyOn(useFilteredEntitiesRequestHook, 'useFilteredEntitiesRequest').mockImplementation(() => ({
+            state: RequestStates.LOADED,
+            data,
+            reload,
+            total: 2
+        }));
+        jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(dispatch);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render basic table with pagination', () => {
+        const wrapper = mount(
+            <ReloadFacetProvider>
+                <FilteredEntitiesViewFacet {...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(EntityTable).prop('data')).toEqual(data);
+        expect(wrapper.find(BasicTablePagination).prop('count')).toBe(2);
+    });
+});

package/src/views/tableBased/__tests__/FilteredSavedSearchesFacet.specs.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import * as reactRedux from 'react-redux';
+import {
+    BasicTablePagination,
+    BasicView,
+    BasicViewContent,
+    BasicViewHeader,
+    TableWithBars,
+    RequestStates,
+    ReloadFacetProvider
+} from '@reltio/components';
+import {ui} from '@reltio/mdm-module';
+import * as useSavedSearchesRequestHook from '../../../hooks/useSavedSearchesRequest';
+import {DashboardPopupMenu, DashboardLayoutItemHeader} from '../../../components';
+import FilteredSavedSearchesFacet from '../FilteredSavedSearchesFacet';
+import {DashboardViewTypes} from '@reltio/mdm-sdk';
+
+jest.mock('@reltio/components', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/components'),
+    TableWithBars: () => null,
+    BasicTablePagination: () => null
+}));
+
+describe('FilteredSavedSearchesFacet tests', () => {
+    const props = {
+        config: {
+            id: 'id',
+            title: 'title',
+            component: DashboardViewTypes.FilteredSavedSearchesFacet,
+            options: {
+                countResults: true
+            }
+        },
+        onToggleFullscreen: jest.fn(),
+        isUpdated: false,
+        isFullscreen: false,
+        onRemove: jest.fn()
+    };
+
+    const dispatch = jest.fn();
+    const reload = jest.fn();
+
+    beforeAll(() => {
+        jest.spyOn(useSavedSearchesRequestHook, 'useSavedSearchesRequest').mockImplementation(() => {
+            return {
+                state: RequestStates.LOADED,
+                data: [
+                    {name: 'Crazy-mini', count: 0, uri: 'savedSearch/1', uiState: {someState: 1, version: '2.0'}},
+                    {name: 'crazySS', count: 2, uri: 'savedSearch/2', uiState: {state: {someState: 2}}}
+                ],
+                reload,
+                total: 2
+            };
+        });
+        jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(dispatch);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render basic table with pagination', () => {
+        const wrapper = mount(
+            <ReloadFacetProvider>
+                <FilteredSavedSearchesFacet {...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(TableWithBars).prop('data')).toEqual([
+            {label: 'Crazy-mini', value: 0, group: 'savedSearch/1'},
+            {label: 'crazySS', value: 2, group: 'savedSearch/2'}
+        ]);
+        expect(wrapper.find(TableWithBars).prop('options')).toEqual({headers: ['Name'], showValues: true});
+        expect(wrapper.find(BasicTablePagination).prop('count')).toBe(2);
+    });
+
+    it('should render table with correct options if config options are undefined', () => {
+        const configWithEmptyOptions = {
+            ...props.config,
+            options: undefined
+        };
+        const wrapper = mount(
+            <ReloadFacetProvider>
+                <FilteredSavedSearchesFacet {...props} config={configWithEmptyOptions} />
+            </ReloadFacetProvider>
+        );
+        expect(wrapper.find(TableWithBars).prop('options')).toEqual({headers: ['Name'], showValues: undefined});
+    });
+
+    it('should open search on new SS click correctly', () => {
+        const wrapper = mount(
+            <ReloadFacetProvider>
+                <FilteredSavedSearchesFacet {...props} />
+            </ReloadFacetProvider>
+        );
+        wrapper.find(TableWithBars).prop('onItemClick')('savedSearch/1');
+        expect(dispatch).toBeCalledWith(
+            ui.actions.openSearch({
+                someState: 1,
+                version: '2.0',
+                currentSavedSearchUri: 'savedSearch/1'
+            })
+        );
+    });
+
+    it('should open search on old SS click correctly', () => {
+        const wrapper = mount(
+            <ReloadFacetProvider>
+                <FilteredSavedSearchesFacet {...props} />
+            </ReloadFacetProvider>
+        );
+        wrapper.find(TableWithBars).prop('onItemClick')('savedSearch/2');
+        expect(dispatch).toBeCalledWith(
+            ui.actions.openSearch({
+                someState: 2,
+                curSavedSearchUri: 'savedSearch/2'
+            })
+        );
+    });
+});

package/src/views/tableBased/helpers.ts

@@ -0,0 +1,8 @@
+import {subtract} from 'ramda';
+
+const ROWS_PER_PAGE_OPTIONS = [10, 25, 50, 100];
+export const [DEFAULT_ROWS_PER_PAGE] = ROWS_PER_PAGE_OPTIONS;
+export const getRowsPerPageOptions = (defaultRowsPerPage) =>
+    ROWS_PER_PAGE_OPTIONS.filter((option) => option !== defaultRowsPerPage)
+        .concat(defaultRowsPerPage)
+        .sort(subtract);

package/src/views/tableBased/styles.ts

@@ -0,0 +1,7 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles(() => ({
+    activityLogFilter: {
+        padding: '0 9px'
+    }
+}));

package/stories/Dashboards.stories.js

@@ -0,0 +1,118 @@
+import {DashboardPerspective} from '../src/';
+import {ThemeProvider, StyledEngineProvider, createTheme} from '@mui/material/styles';
+import {facetResponse, lookupsResponse, totalResponse} from './utils/responses';
+import {setRequestProvider, theme} from '@reltio/mdm-sdk';
+import {Provider} from 'react-redux';
+import React from 'react';
+import dashboardPerspectiveConfig from './utils/dashboardPerspectiveConfig';
+import dashboardsViewConfig from './utils/dashboardsViewConfig';
+import mdmStore from './utils/mdmStore';
+import {storiesOf} from '@storybook/react';
+import DashboardFacet from '../src/views/chartBased/DashboardFacet';
+
+const muiTheme = createTheme(theme);
+
+const request = () => Promise.resolve({});
+
+setRequestProvider(request);
+
+storiesOf('DashboardPerspective', module)
+    .add('Dashboard facet view', () => {
+        const request = (url) => {
+            let data;
+            if (url.includes('facet')) {
+                data = facetResponse;
+            } else if (url.includes('total')) {
+                data = totalResponse;
+            } else if (url.includes('resolveList')) {
+                data = lookupsResponse;
+            }
+            return Promise.resolve(data);
+        };
+        setRequestProvider(request);
+        return (
+            <Provider store={mdmStore}>
+                <StyledEngineProvider injectFirst>
+                    <ThemeProvider theme={muiTheme}>
+                        <div style={{width: 600, height: 400}}>
+                            <DashboardFacet config={dashboardsViewConfig} />
+                        </div>
+                    </ThemeProvider>
+                </StyledEngineProvider>
+            </Provider>
+        );
+    })
+    .add('Dashboard perspective', () => {
+        const request = (url) => {
+            let data;
+            if (url.includes('facet')) {
+                data = facetResponse;
+            } else if (url.includes('total')) {
+                data = totalResponse;
+            } else if (url.includes('resolveList')) {
+                data = lookupsResponse;
+            }
+            return Promise.resolve(data);
+        };
+        setRequestProvider(request);
+        return (
+            <StyledEngineProvider injectFirst>
+                <ThemeProvider theme={muiTheme}>
+                    <DashboardPerspective
+                        config={dashboardPerspectiveConfig}
+                        store={mdmStore}
+                        saveState={() => {}}
+                        getSavedState={(resolve) => resolve()}
+                        onResize={() => {}}
+                    />
+                </ThemeProvider>
+            </StyledEngineProvider>
+        );
+    })
+    .add('No data', () => {
+        const request = () => Promise.resolve([]);
+        setRequestProvider(request);
+        return (
+            <Provider store={mdmStore}>
+                <StyledEngineProvider injectFirst>
+                    <ThemeProvider theme={muiTheme}>
+                        <div style={{width: 600, height: 400}}>
+                            <DashboardFacet config={dashboardsViewConfig} />
+                        </div>
+                    </ThemeProvider>
+                </StyledEngineProvider>
+            </Provider>
+        );
+    })
+    .add('Loading', () => {
+        const request = () => new Promise(() => {});
+        setRequestProvider(request);
+        return (
+            <StyledEngineProvider injectFirst>
+                <ThemeProvider theme={muiTheme}>
+                    <DashboardPerspective
+                        config={dashboardPerspectiveConfig}
+                        store={mdmStore}
+                        saveState={() => {}}
+                        getSavedState={(resolve) => resolve()}
+                        onResize={() => {}}
+                    />
+                </ThemeProvider>
+            </StyledEngineProvider>
+        );
+    })
+    .add('Error', () => {
+        const request = () => Promise.reject('error');
+        setRequestProvider(request);
+        return (
+            <Provider store={mdmStore}>
+                <StyledEngineProvider injectFirst>
+                    <ThemeProvider theme={muiTheme}>
+                        <div style={{width: 600, height: 400}}>
+                            <DashboardFacet config={dashboardsViewConfig} />
+                        </div>
+                    </ThemeProvider>
+                </StyledEngineProvider>
+            </Provider>
+        );
+    });

package/stories/utils/dashboardPerspectiveConfig.js

@@ -0,0 +1,78 @@
+import DashboardViewConfig from './dashboardsViewConfig';
+
+export default {
+    width: 1000,
+    views: [
+        {
+            id: 'MyDashboard',
+            component: 'DashboardFacet',
+            ...DashboardViewConfig
+        },
+        {
+            id: 'MyDashboard2',
+            component: 'DashboardFacet',
+            ...DashboardViewConfig,
+            chartType: 'pie'
+        },
+        {
+            id: 'MyDashboard3',
+            component: 'DashboardFacet',
+            ...DashboardViewConfig,
+            chartType: 'table'
+        },
+        {
+            id: 'MyDashboard4',
+            component: 'DashboardFacet',
+            ...DashboardViewConfig,
+            chartType: 'cloud'
+        },
+        {
+            id: 'CustomView',
+            component: 'CustomActionViewFacet',
+            title: 'Custom view',
+            url: 'http://localhost:6006/?path=/settings/about'
+        }
+    ],
+    layout: [
+        {
+            x: 0,
+            y: 0,
+            width: 2,
+            minHeight: 10,
+            height: 10,
+            id: 'MyDashboard'
+        },
+        {
+            x: 2,
+            y: 0,
+            width: 2,
+            minHeight: 10,
+            height: 10,
+            id: 'MyDashboard2'
+        },
+        {
+            x: 0,
+            y: 10,
+            width: 2,
+            minHeight: 5,
+            height: 10,
+            id: 'MyDashboard3'
+        },
+        {
+            x: 2,
+            y: 10,
+            width: 2,
+            minHeight: 5,
+            height: 10,
+            id: 'MyDashboard4'
+        },
+        {
+            x: 0,
+            y: 20,
+            width: 2,
+            minHeight: 5,
+            height: 10,
+            id: 'CustomView'
+        }
+    ]
+};

package/stories/utils/dashboardsViewConfig.js

@@ -0,0 +1,17 @@
+export default {
+    attributeUri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+    chartType: 'bar',
+    title: 'Country codes',
+    filters: [
+        {
+            filter: 'not equals',
+            fieldName: 'attributes.Country',
+            values: ['United States']
+        },
+        {
+            filter: 'not equals',
+            fieldName: 'attributes.Country',
+            values: ['US']
+        }
+    ]
+};

package/stories/utils/mdmStore.js

@@ -0,0 +1,73 @@
+import mdm from '@reltio/mdm-module';
+import {createStore} from 'redux-dynamic-modules';
+
+const tenant = 'mZ87U4Ofxrv6WnS';
+const initialState = {
+    metadata: {
+        [tenant]: {
+            entityTypes: [
+                {
+                    uri: 'configuration/entityTypes/HCP',
+                    label: 'HCP',
+                    attributes: [
+                        {
+                            label: 'String',
+                            name: 'CountryCode',
+                            description: '',
+                            type: 'String',
+                            hidden: false,
+                            faceted: true,
+                            attributeOrdering: {orderType: 'ASC', orderingStrategy: 'LUD'},
+                            uri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                            dependentLookupCode: 'COUNTRY_CD',
+                            lookupCode: 'COUNTRY_CD',
+                            access: ['DELETE', 'READ', 'CREATE', 'UPDATE']
+                        }
+                    ],
+                    abstract: false,
+                    businessCardAttributeURIs: []
+                }
+            ]
+        }
+    },
+    tenant: {id: tenant},
+    profile: {
+        lookups: {},
+        modifiedEntities: {}
+    },
+    ui: {
+        numberFormat: {
+            thousandSeparator: ',',
+            decimalSeparator: '.',
+            prefix: '',
+            suffix: '',
+            decimalScale: null
+        },
+        attributePresentations: {},
+        paths: {
+            apiPath: 'https://tst-01.reltio.com/reltio',
+            imagePath: 'https://s3.amazonaws.com/reltio.images/api',
+            dtssPath: 'https://tst-01.reltio.com/dtss/',
+            workflowPath: 'https://tst-01-workflow.reltio.com/workflow-adapter',
+            workflowEnvironmentURL: 'https://tst-01.reltio.com',
+            uiPath: 'http://localhost:3000/ui/ms2/',
+            servicesPath: 'http://localhost:3000/services'
+        }
+    },
+    search: {
+        searchResults: [],
+        keyword: null,
+        searchOptions: {
+            searchByOv: false,
+            ovOnly: false
+        },
+        activityFilter: 'active',
+        globalFilter: {
+            query: "(containsWordStartingWith(attributes,'ttt')",
+            savedSearchesUris: ['savedSearches/7DlPB4Dt'],
+            isMuted: false
+        }
+    }
+};
+
+export default createStore({initialState}, mdm.getModule());

package/stories/utils/responses.js

@@ -0,0 +1,10 @@
+export const facetResponse = {'attributes.CountryCode': {US: 30, BQ: 11, BM: 1, DZ: 1}};
+
+export const totalResponse = {total: 10};
+
+export const lookupsResponse = [
+    {COUNTRY_CD: {US: {displayName: 'USA'}}},
+    {COUNTRY_CD: {BQ: {displayName: 'Bonaire, Sint Eustatius and Saba'}}},
+    {COUNTRY_CD: {BM: {displayName: 'Bermuda'}}},
+    {COUNTRY_CD: {DZ: {displayName: 'Algeria'}}}
+];

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "noEmit": false,
+        "declaration": true,
+        "outDir": "public/types",
+        "rootDir": "src"
+    },
+    "include": ["src", "../../custom.d.ts"],
+    "exclude": [
+        "**/node_modules",
+        "**/__tests__"
+    ]
+}

package/webpack.config.js

@@ -0,0 +1,10 @@
+const {merge} = require('webpack-merge');
+const qxComponents = require('../../webpack.qx.components');
+
+const devServerPort = 8890;
+
+module.exports = merge(qxComponents, {
+    devServer: {
+        port: devServerPort
+    }
+});