@reltio/dashboard 1.4.1584 → 1.4.1586-mui5

package/src/hooks/useSavedSearchesRequest.ts

@@ -0,0 +1,82 @@
+import {useCallback, useEffect, useState} from 'react';
+import {RequestStates} from '@reltio/components';
+import {assocPath} from 'ramda';
+import {
+    getSavedSearches,
+    getTotalsForQuery,
+    promiseAllSettled,
+    replacePlaceholdersInQuery,
+    SavedSearchesOptions,
+    SavedSearchesResponse
+} from '@reltio/mdm-sdk';
+import {SavedSearchData} from '../types/SavedSearchData';
+
+type Props = {
+    options: SavedSearchesOptions;
+    offset: number;
+    max: number;
+};
+
+export const useSavedSearchesRequest = ({options, offset, max}: Props) => {
+    const [data, setData] = useState<SavedSearchData[]>([]);
+    const [total, setTotal] = useState<number>(0);
+    const [requestState, setRequestState] = useState<RequestStates>(RequestStates.INIT);
+    const onError = (error) => {
+        console.error(error); // eslint-disable-line
+        setRequestState(RequestStates.ERROR);
+        setData([]);
+    };
+    const loadData = useCallback(() => {
+        setRequestState(RequestStates.LOADING);
+        const onRequestFinished = (data) => {
+            setData(data.result || []);
+            setTotal(data.total);
+            setRequestState(RequestStates.LOADED);
+        };
+        const {countResults, ...restOptions} = (options || {}) as Required<SavedSearchesOptions>;
+        const getData = async () => {
+            const {result = [], total}: SavedSearchesResponse = await getSavedSearches({
+                offset,
+                max,
+                ...restOptions
+            });
+            if (countResults) {
+                const totalRequests: Array<Promise<{total: number}>> = result.map((search) =>
+                    getTotalsForQuery(replacePlaceholdersInQuery(search.query))
+                );
+                const totalResults = await promiseAllSettled(totalRequests);
+                const searchesWithCount: SavedSearchData[] = totalResults.reduce(
+                    (searchesWithTotal, {status, value, reason}, searchIndex) => {
+                        switch (status) {
+                            case 'fulfilled':
+                                return assocPath([searchIndex, 'count'], value.total, searchesWithTotal);
+                            case 'rejected':
+                                console.error(reason);
+                                break;
+                        }
+                        return searchesWithTotal;
+                    },
+                    result
+                );
+                onRequestFinished({result: searchesWithCount, total});
+            } else {
+                onRequestFinished({result, total});
+            }
+        };
+        getData().catch(onError);
+    }, [options, max, offset]);
+
+    const refreshAction = () => {
+        try {
+            loadData();
+        } catch (e) {
+            onError(e);
+        }
+    };
+
+    useEffect(() => {
+        refreshAction();
+    }, [loadData]);
+
+    return {state: requestState, data, reload: refreshAction, total};
+};

package/src/hooks/useStatsRequest.ts

@@ -0,0 +1,47 @@
+import {useCallback, useEffect, useState} from 'react';
+import {andThen, otherwise, pipe} from 'ramda';
+import {requestStats} from '../services/stats';
+import {getStepForPeriod} from '../services/period';
+import {StatsData} from '../types/StatsData';
+import {DatePeriod} from '@reltio/mdm-sdk';
+import {useSafePromise, RequestStates} from '@reltio/components';
+
+export const useStatsRequest = (period: DatePeriod) => {
+    const [data, setData] = useState<StatsData[]>([]);
+    const [step, setStep] = useState(getStepForPeriod(period));
+    const [requestState, setRequestState] = useState<RequestStates>(RequestStates.INIT);
+    const safePromise = useSafePromise();
+
+    const onError = (error) => {
+        console.error(error); // eslint-disable-line
+        setRequestState(RequestStates.ERROR);
+        setData([]);
+    };
+
+    const loadData = useCallback(() => {
+        setRequestState(RequestStates.LOADING);
+        setStep(getStepForPeriod(period));
+        setData([]);
+        const onRequestFinished = (data: StatsData[]) => {
+            setRequestState(RequestStates.LOADED);
+            setData(data);
+        };
+
+        const getData = pipe(requestStats, safePromise, andThen(onRequestFinished), otherwise(onError));
+        getData(period);
+    }, [period.toString()]); // eslint-disable-line
+
+    const refreshAction = () => {
+        try {
+            loadData();
+        } catch (e) {
+            onError(e);
+        }
+    };
+
+    useEffect(() => {
+        refreshAction();
+    }, [loadData]);
+
+    return {state: requestState, data, step, reload: refreshAction};
+};

package/src/hooks/useWorkflowTasksRequest.ts

@@ -0,0 +1,66 @@
+import {useCallback, useEffect, useMemo, useState} from 'react';
+import {useSelector} from 'react-redux';
+import {andThen, otherwise, pipe, pick} from 'ramda';
+import mdmModule from '@reltio/mdm-module';
+import {useSafePromise, RequestStates} from '@reltio/components';
+import {EnrichedWorkflowTaskData, WorkflowTasksCategories} from '../types/WorkflowTasks';
+
+import {requestWorkflowTasks} from '../services/workflowTasks';
+
+type Options = {
+    tasksCategory: WorkflowTasksCategories;
+    max?: number;
+    offset?: number;
+};
+
+export const useWorkflowTasksRequest = (options: Options) => {
+    const {tasksCategory} = options;
+    const requestParams = useMemo(() => pick(['max', 'offset'], options), [options]);
+    const [data, setData] = useState<EnrichedWorkflowTaskData[]>([]);
+    const [requestState, setRequestState] = useState<RequestStates>(RequestStates.INIT);
+    const [total, setTotal] = useState<number>();
+    const workflowPath = useSelector(mdmModule.selectors.getWorkflowPath);
+    const environment = useSelector(mdmModule.selectors.getWorkflowEnvironmentUrl);
+    const tenant = useSelector(mdmModule.selectors.getTenant);
+    const userName = useSelector(mdmModule.selectors.getUserName);
+
+    const assignee = tasksCategory === WorkflowTasksCategories.MY ? userName : undefined;
+    const safePromise = useSafePromise();
+
+    const onError = (error) => {
+        console.error(error); // eslint-disable-line
+        setRequestState(RequestStates.ERROR);
+        setData([]);
+    };
+
+    const loadData = useCallback(() => {
+        setRequestState(RequestStates.LOADING);
+        const onRequestFinished = ({data, total}: {data: EnrichedWorkflowTaskData[]; total?: number}) => {
+            setRequestState(RequestStates.LOADED);
+            setData(data);
+            setTotal(total);
+        };
+
+        const getData = pipe(
+            requestWorkflowTasks(tasksCategory),
+            safePromise,
+            andThen(onRequestFinished),
+            otherwise(onError)
+        );
+        getData({workflowPath, environment, tenant, assignee, ...requestParams});
+    }, [workflowPath, environment, tenant, tasksCategory, requestParams]); // eslint-disable-line
+
+    const refreshAction = () => {
+        try {
+            loadData();
+        } catch (e) {
+            onError(e);
+        }
+    };
+
+    useEffect(() => {
+        refreshAction();
+    }, [loadData]);
+
+    return {state: requestState, data, reload: refreshAction, total};
+};

package/src/index.ts

@@ -0,0 +1,25 @@
+import {DashboardPerspective} from './perspective';
+import {
+    DashboardLayoutItemView,
+    DashboardLayoutItemHeader,
+    DashboardLayoutItemContent,
+    DashboardLinearLoader,
+    DashboardNoData,
+    DashboardError,
+    StatsChart
+} from './components';
+import ViewsFactory from './views/ViewsFactory';
+import {useFacetRequest} from './hooks/useFacetRequest';
+
+export {
+    DashboardPerspective,
+    DashboardLayoutItemView,
+    DashboardLayoutItemHeader,
+    DashboardLayoutItemContent,
+    DashboardLinearLoader,
+    DashboardNoData,
+    DashboardError,
+    ViewsFactory,
+    StatsChart,
+    useFacetRequest
+};

package/src/perspective/DashboardPerspectiveView.tsx

@@ -0,0 +1,132 @@
+import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {indexBy, prop, pipe, pick, map} from 'ramda';
+import hash from 'object-hash';
+import i18n from 'ui-i18n';
+
+import {
+    DashboardPerspectiveConfig,
+    removeUnsupportedLayoutItems,
+    setMinHeightForDashboardWidgets,
+    ReltioGridLayoutItem,
+    debounce
+} from '@reltio/mdm-sdk';
+import {useConfigPermissions, useSavedState, useReloadAllFacets, useLayoutResetter} from '@reltio/components';
+import {createReltioLayout, getViewStatus} from './helpers';
+import DashboardLayout from '../components/DashboardLayout/DashboardLayout';
+import {DashboardSavedState} from '../types/DashboardSavedState';
+import {DashboardPerspectiveHeader} from '../components/DashboardPerspectiveHeader/DashboardPerspectiveHeader';
+
+import {useStyles} from './styles';
+
+type DashboardPerspectiveView = {
+    config: DashboardPerspectiveConfig;
+    saveState: (state: DashboardSavedState) => void;
+    getSavedState: () => Promise<DashboardSavedState>;
+};
+
+const SAVE_STATE_DEBOUNCE_DELAY = 100;
+
+const DashboardPerspectiveView = ({config: dashboardConfig, saveState, getSavedState}: DashboardPerspectiveView) => {
+    const styles = useStyles();
+
+    const refreshAll = useReloadAllFacets();
+    const {canRead} = useConfigPermissions();
+    const {isLoaded, savedState} = useSavedState<DashboardSavedState>(getSavedState);
+    const debouncedSaveState = useCallback(debounce(saveState, SAVE_STATE_DEBOUNCE_DELAY), [saveState]) as (
+        state: DashboardSavedState
+    ) => void;
+
+    const config: DashboardPerspectiveConfig = useMemo(() => {
+        const validatedViews = dashboardConfig.views.filter((view) => canRead(view) && view.id);
+        const validatedLayout = removeUnsupportedLayoutItems(dashboardConfig.layout, validatedViews);
+        return {...dashboardConfig, views: validatedViews, layout: validatedLayout};
+    }, [dashboardConfig, canRead]);
+
+    const viewsHashMap = useMemo(() => pipe(indexBy(prop('id')), map(hash))(config.views), [config.views]);
+    const configHash = useMemo(() => pipe(pick(['views', 'layout', 'id']), hash)(config), [config]);
+    const dashboardViews = useMemo(
+        () =>
+            config.views.map((view) => ({
+                config: view,
+                status: getViewStatus(viewsHashMap[view.id], savedState.viewsHashMap?.[view.id])
+            })),
+        [config.views, viewsHashMap, savedState.viewsHashMap]
+    );
+
+    const [layout, setLayout] = useState<ReltioGridLayoutItem[]>();
+    const [openConfigPanel, setOpenConfigPanel] = useState<boolean>(false);
+
+    useEffect(() => {
+        if (isLoaded) {
+            const isConfigChanged = configHash !== savedState.configHash;
+            const newLayout = isConfigChanged ? config.layout : savedState.layout;
+            const resizedLayout = setMinHeightForDashboardWidgets(newLayout, config.views);
+            setLayout(resizedLayout);
+        }
+    }, [isLoaded]); // eslint-disable-line
+
+    useEffect(() => {
+        if (isLoaded) debouncedSaveState({layout, viewsHashMap, configHash});
+    }, [layout]); // eslint-disable-line
+
+    const handleLayoutChange = useCallback((layout: ReltioGridLayoutItem[]) => {
+        setLayout(layout);
+    }, []);
+
+    const handleRemove = useCallback(
+        (id: string) => setLayout((layout) => layout.filter((layout) => layout.id !== id)),
+        []
+    );
+    const handleAdd = useCallback((id: string) => setLayout((layout) => [...layout, createReltioLayout(id)]), []);
+
+    const handleCloseConfigPanel = useCallback(() => setOpenConfigPanel(false), []);
+
+    const tempLayout = useRef<ReltioGridLayoutItem[]>();
+    const onLayoutReset = useCallback(() => {
+        tempLayout.current = layout;
+        setLayout(setMinHeightForDashboardWidgets(config.layout, config.views));
+    }, [config, layout]);
+    const onResetUndo = useCallback(() => {
+        setLayout(tempLayout.current);
+    }, []);
+    const {SnackbarRenderer, resetLayout} = useLayoutResetter({onLayoutReset, onResetUndo});
+    const menuItems = useMemo(
+        () => [
+            {
+                primary: i18n.text('Refresh all'),
+                secondary: i18n.text('Update all facets'),
+                onClick: refreshAll
+            },
+            {
+                primary: i18n.text('Reset layout'),
+                secondary: i18n.text('Restore the default layout without saving any changes'),
+                onClick: resetLayout
+            }
+        ],
+        [refreshAll, resetLayout]
+    );
+
+    return (
+        <div className={styles.perspectiveView}>
+            <DashboardPerspectiveHeader
+                onToggleConfig={() => setOpenConfigPanel(!openConfigPanel)}
+                title={i18n.text('Profile stats')}
+                menuItems={menuItems}
+            />
+            {isLoaded && (
+                <DashboardLayout
+                    layout={layout}
+                    onLayoutChanged={handleLayoutChange}
+                    views={dashboardViews}
+                    openConfigPanel={openConfigPanel}
+                    onCloseConfigPanel={handleCloseConfigPanel}
+                    onAdd={handleAdd}
+                    onRemove={handleRemove}
+                />
+            )}
+            <SnackbarRenderer />
+        </div>
+    );
+};
+
+export default memo(DashboardPerspectiveView);

package/src/perspective/__tests__/DashboardPerspectiveView.specs.tsx

@@ -0,0 +1,276 @@
+import React, {ReactNode} from 'react';
+import {indexBy, prop, pipe, pick, map} from 'ramda';
+import {render, screen, act, within} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import hash from 'object-hash';
+import {Provider} from 'react-redux';
+import {getFacets} from '@reltio/mdm-sdk';
+import {mockResizeObserver} from 'jsdom-testing-mocks';
+import DashboardPerspectiveView from '../DashboardPerspectiveView';
+import {createInitialState} from './data/store.data';
+import {createTestStore} from '../../../../../__mocks__/store-utils';
+import {ReloadFacetProvider} from '@reltio/components';
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    getFacets: jest.fn(),
+    debounce: (x) => x
+}));
+
+describe('DashboardPerspectiveView tests', () => {
+    const views = [
+        {
+            component: 'DashboardFacet',
+            attributeUri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+            chartType: 'bar',
+            id: 'MyDashboard',
+            title: 'Country codes 1'
+        },
+        {
+            component: 'DashboardFacet',
+            attributeUri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+            chartType: 'pie',
+            id: 'MyDashboard2',
+            title: 'Country codes 2'
+        },
+        {
+            component: 'DashboardFacet',
+            attributeUri: 'configuration/entityTypes/HCP/attributes/TypeCode',
+            chartType: 'bar',
+            id: 'ActiveHCPsByCustomer',
+            filters: [{attribute: 'attributes.CustomerStatusCode', type: 'not equals', value: 'ACTI'}],
+            title: 'Active HCPs'
+        }
+    ];
+    const layout = [
+        {minHeight: 10, x: 0, width: 2, y: 0, id: 'ActiveHCPsByCustomer', height: 10},
+        {minHeight: 10, x: 2, width: 2, y: 0, id: 'MyDashboard2', height: 10}
+    ];
+    const config = {id: 'com.reltio.plugins.newDashboard.NewDashboardView', layout, views};
+
+    const getSavedStateSpy = jest.fn();
+    const saveStateSpy = jest.fn();
+    const defaultProps = {config, getSavedState: getSavedStateSpy, saveState: saveStateSpy};
+    const resizeObserver = mockResizeObserver();
+
+    const configHash = pipe(pick(['views', 'layout', 'id']), hash)(config);
+    const viewsHashMap = map(hash, indexBy(prop('id'), views));
+
+    const setUp = async (props = {}, initialState = createInitialState()) => {
+        const user = userEvent.setup();
+        const store = createTestStore(initialState);
+        const Providers = ({children}: {children: ReactNode}) => (
+            <Provider store={store}>
+                <ReloadFacetProvider>{children}</ReloadFacetProvider>
+            </Provider>
+        );
+        const renderer = render(<DashboardPerspectiveView {...defaultProps} {...props} />, {wrapper: Providers});
+        const grid = await screen.findByTestId('reltio-dashboard-grid');
+        resizeObserver.mockElementSize(grid, {contentBoxSize: {inlineSize: 400, blockSize: 600}});
+        act(() => {
+            resizeObserver.resize();
+        });
+        const layoutItems = await screen.findAllByTestId('reltio-dashboard-layout-item');
+        return {user, layoutItems, ...renderer};
+    };
+
+    beforeEach(() => {
+        getSavedStateSpy.mockResolvedValue(null);
+        (getFacets as jest.Mock).mockResolvedValue(null);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render dashboard layout correctly', async () => {
+        const {user, layoutItems} = await setUp();
+
+        expect(screen.getByText('Profile stats')).toBeInTheDocument();
+        layoutItems.forEach((item, index) => {
+            const viewId = config.layout[index].id;
+            const title = views.find((view) => view.id === viewId)?.title as string;
+            expect(within(item).getByText(title)).toBeInTheDocument();
+        });
+
+        await user.click(screen.getByRole('button', {name: 'Add / remove charts'}));
+
+        const configItems = screen.getAllByTestId('reltio-dashboard-config-item');
+        configItems.forEach((item, index) => {
+            expect(within(item).getByText(views[index].title)).toBeInTheDocument();
+            expect(within(item).getByText('New')).toBeInTheDocument();
+        });
+    });
+
+    it('should apply layout on change', async () => {
+        getSavedStateSpy.mockResolvedValueOnce(null);
+        const {user, layoutItems} = await setUp();
+        expect(layoutItems).toHaveLength(2);
+        const menuButton = within(layoutItems[0]).getByRole('button', {name: ''});
+        await user.click(menuButton);
+        await user.click(screen.getByRole('menuitem', {name: 'Remove'}));
+        const newLayoutItem = await screen.findByTestId('reltio-dashboard-layout-item');
+        expect(within(newLayoutItem).getByText('Country codes 2'));
+    });
+
+    it('should filter not readable views, views without id and change layout', async () => {
+        const config = {
+            id: 'com.reltio.plugins.newDashboard.NewDashboardView',
+            layout: [
+                {minHeight: 10, x: 0, width: 2, y: 0, id: 'MyDashboard', height: 10},
+                {minHeight: 10, x: 2, width: 2, y: 0, id: 'MyDashboard2', height: 10}
+            ],
+            views: [
+                {
+                    component: 'DashboardFacet',
+                    attributeUri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                    chartType: 'bar',
+                    id: 'MyDashboard',
+                    title: 'Country codes',
+                    canRead: {
+                        roles: ['UI_ADMIN']
+                    }
+                },
+                {
+                    component: 'DashboardFacet',
+                    attributeUri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                    chartType: 'pie',
+                    title: 'No id'
+                },
+                {
+                    component: 'DashboardFacet',
+                    attributeUri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                    chartType: 'pie',
+                    id: 'MyDashboard2',
+                    title: 'Country codes'
+                }
+            ]
+        };
+        const {user, layoutItems} = await setUp({config});
+
+        expect(layoutItems).toHaveLength(1);
+        expect(within(layoutItems[0]).getByText('Country codes')).toBeInTheDocument();
+
+        await user.click(screen.getByRole('button', {name: 'Add / remove charts'}));
+
+        const configItem = screen.getByTestId('reltio-dashboard-config-item');
+        expect(within(configItem).getByText('Country codes')).toBeInTheDocument();
+    });
+
+    it('should render Reset button and reset layout correct', async () => {
+        const savedState = {
+            layout: [{minHeight: 5, x: 0, width: 2, y: 0, id: 'MyDashboard', height: 5}],
+            configHash: '90794365b836fedf4384383c374eb0d7725e11be'
+        };
+        getSavedStateSpy.mockResolvedValueOnce(savedState);
+        const {user} = await setUp();
+
+        await screen.findByText('Country codes 1');
+        expect(screen.queryByText('Country codes 2')).not.toBeInTheDocument();
+
+        await user.click(screen.getByTestId('reltio-dashboard-header-menu'));
+        await user.click(
+            screen.getByRole('menuitem', {name: 'Reset layout Restore the default layout without saving any changes'})
+        );
+        await screen.findByText('Country codes 2');
+        expect(screen.queryByText('Country codes 1')).not.toBeInTheDocument();
+
+        await user.click(screen.getByRole('button', {name: 'Undo'}));
+        await screen.findByText('Country codes 1');
+        expect(screen.queryByText('Country codes 2')).not.toBeInTheDocument();
+    });
+
+    it('should reload facets on click Refresh all', async () => {
+        const {user} = await setUp();
+        (getFacets as jest.Mock).mockClear();
+        await user.click(screen.getByTestId('reltio-dashboard-header-menu'));
+        await user.click(screen.getByRole('menuitem', {name: 'Refresh all Update all facets'}));
+        expect(getFacets).toBeCalledTimes(layout.length);
+    });
+
+    describe('saved state scenario', () => {
+        it('should request saved state on mount', async () => {
+            await setUp();
+            expect(getSavedStateSpy).toBeCalled();
+        });
+
+        it('should apply saved layout if config has same hash', async () => {
+            const newLayout = [{minHeight: 10, x: 0, width: 1, y: 0, id: 'ActiveHCPsByCustomer', height: 10}];
+            getSavedStateSpy.mockResolvedValueOnce({layout: newLayout, configHash});
+            const {layoutItems} = await setUp();
+
+            expect(layoutItems).toHaveLength(1);
+            expect(within(layoutItems[0]).getByText('Active HCPs')).toBeInTheDocument();
+        });
+
+        it('should apply config layout if config has new hash', async () => {
+            const newLayout = [{minHeight: 10, x: 0, width: 1, y: 0, id: 'ActiveHCPsByCustomer', height: 10}];
+            getSavedStateSpy.mockResolvedValueOnce({layout: newLayout, configHash: 'newHash'});
+            const {layoutItems} = await setUp();
+            expect(layoutItems).toHaveLength(layout.length);
+        });
+
+        it('should save layout on mount and on change', async () => {
+            const staticLayout = layout.map((item) => ({...item, isStatic: false}));
+            const savedState = {layout: staticLayout, configHash, viewsHashMap};
+            getSavedStateSpy.mockResolvedValueOnce(savedState);
+            const {user, layoutItems} = await setUp();
+            expect(saveStateSpy).toBeCalledWith(savedState);
+            expect(layoutItems).toHaveLength(2);
+            const menuButton = within(layoutItems[0]).getByRole('button', {name: ''});
+            await user.click(menuButton);
+            await user.click(screen.getByRole('menuitem', {name: 'Remove'}));
+            const newLayoutItems = await screen.findAllByTestId('reltio-dashboard-layout-item');
+            expect(newLayoutItems).toHaveLength(1);
+            expect(saveStateSpy).toBeCalledWith({layout: [staticLayout[1]], configHash, viewsHashMap});
+        });
+
+        it('should add correct state to view', async () => {
+            const views = [
+                {
+                    component: 'DashboardFacet',
+                    chartType: 'bar',
+                    id: 'MyDashboard',
+                    attributeUri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                    title: 'first'
+                },
+                {
+                    component: 'DashboardFacet',
+                    chartType: 'pie',
+                    id: 'MyDashboard2',
+                    attributeUri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                    title: 'second'
+                },
+                {
+                    component: 'DashboardFacet',
+                    chartType: 'bar',
+                    id: 'ActiveHCPsByCustomer',
+                    attributeUri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                    title: 'third'
+                }
+            ];
+            const savedViewHashMap = {MyDashboard: hash(views[0]), ActiveHCPsByCustomer: 'difHash'};
+            const savedState = {layout, configHash, viewsHashMap: savedViewHashMap};
+            getSavedStateSpy.mockResolvedValueOnce(savedState);
+            const {user, layoutItems} = await setUp({config: {...config, views}});
+
+            await user.click(screen.getByRole('button', {name: 'Add / remove charts'}));
+
+            expect(within(layoutItems[0]).getByText('third')).toBeInTheDocument();
+            expect(within(layoutItems[0]).getByText('Updated')).toBeInTheDocument();
+            expect(within(layoutItems[1]).getByText('second')).toBeInTheDocument();
+            expect(within(layoutItems[1]).queryByText('Updated')).not.toBeInTheDocument();
+
+            const configItems = screen.getAllByTestId('reltio-dashboard-config-item');
+            configItems.forEach((item, index) => {
+                const title = views[index].title;
+                expect(within(item).getByText(title)).toBeInTheDocument();
+                if (title === 'second') {
+                    expect(within(item).getByText('New')).toBeInTheDocument();
+                } else {
+                    expect(within(item).queryByText('New')).not.toBeInTheDocument();
+                }
+            });
+        });
+    });
+});

package/src/perspective/__tests__/data/metadata.data.ts

@@ -0,0 +1,33 @@
+export const getMetadata = ({tenant}) => ({
+    [tenant]: {
+        uri: 'configuration',
+        entityTypes: [
+            {
+                uri: 'configuration/entityTypes/HCP',
+                attributes: [
+                    {
+                        label: 'CountryCode',
+                        name: 'CountryCode',
+                        uri: 'configuration/entityTypes/HCP/attributes/CountryCode',
+                        type: 'String',
+                        required: true
+                    },
+                    {
+                        label: 'TypeCode',
+                        name: 'TypeCode',
+                        uri: 'configuration/entityTypes/HCP/attributes/TypeCode',
+                        type: 'String',
+                        required: true
+                    },
+                    {
+                        label: 'SimpleString',
+                        name: 'SimpleString',
+                        uri: 'configuration/entityTypes/HCP/attributes/SimpleString',
+                        type: 'String'
+                    }
+                ]
+            }
+        ],
+        relationTypes: []
+    }
+});

package/src/perspective/__tests__/data/store.data.ts

@@ -0,0 +1,15 @@
+import {getMetadata} from './metadata.data';
+
+export const createInitialState = () => {
+    const tenant = 'alenat';
+
+    return {
+        metadata: getMetadata({tenant}),
+        tenant: {
+            id: tenant
+        },
+        user: {
+            roles: ['UI_USER']
+        }
+    };
+};