@reltio/dashboard 1.4.1584 → 1.4.1586-mui5

package/src/components/DashboardLayoutPanel/DashboardLayoutPanel.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import IconButton from '@mui/material/IconButton';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import CloseIcon from '@mui/icons-material/Close';
+import {DashboardView as DashboardViewConfig, ReltioGridLayoutItem} from '@reltio/mdm-sdk';
+import {ViewStatus, DashboardView} from '../../types';
+import DashboardConfigItem from '../DashboardConfigItem/DashboardConfigItem';
+import {useStyles} from './styles';
+
+const DOC_PORTAL_URL = 'https://docs.reltio.com/hub/addremovecharts.html';
+
+type Props = {
+    views: DashboardView[];
+    layout: ReltioGridLayoutItem[];
+    onRemove: (id: string) => void;
+    onAdd: (id: string) => void;
+    onClose: () => void;
+};
+
+export const DashboardLayoutPanel = ({views, layout, onRemove, onAdd, onClose}: Props) => {
+    const styles = useStyles();
+    const isViewAdded = (config: DashboardViewConfig) => layout.some((layoutItem) => layoutItem.id === config.id);
+
+    return (
+        <div className={styles.root}>
+            <div className={styles.header}>
+                <IconButton className={styles.closeButton} onClick={onClose} size="large">
+                    <CloseIcon />
+                </IconButton>
+                <Typography className={styles.headerTitle} variant="h6">
+                    {i18n.text('Add / remove charts')}
+                </Typography>
+            </div>
+            <Typography className={styles.description} variant="body2">
+                {i18n.text('Select the charts you want to add to your dashboard. To create or edit chart, visit the')}{' '}
+                <Link href={DOC_PORTAL_URL} target="_blank" underline="hover">
+                    {i18n.text('Documentation Portal')}
+                </Link>{' '}
+                {i18n.text('for more information')}
+            </Typography>
+            <div className={styles.items}>
+                {views.map(({config, status}) => {
+                    return (
+                        <DashboardConfigItem
+                            key={config.id}
+                            view={config}
+                            isAdded={isViewAdded(config)}
+                            isNew={status === ViewStatus.NEW}
+                            onRemove={onRemove}
+                            onAdd={onAdd}
+                        />
+                    );
+                })}
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import {mount} from 'enzyme';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import {DashboardLayoutPanel} from '../DashboardLayoutPanel';
+import {ViewStatus} from '../../../types';
+import DashboardConfigItem from '../../DashboardConfigItem/DashboardConfigItem';
+
+describe('DashboardLayoutPanel tests', () => {
+    const views = [
+        {config: {id: 'view1', title: 'title1', component: 'Component'}, status: ViewStatus.PERSISTED},
+        {config: {id: 'view2', title: 'title2', component: 'Component'}, status: ViewStatus.NEW}
+    ];
+
+    const defaultProps = {
+        views,
+        layout: [{id: 'view1', height: 1, x: 0, y: 0, width: 1}],
+        onRemove: jest.fn(),
+        onAdd: jest.fn(),
+        onClose: jest.fn()
+    };
+
+    const viewsState = [
+        {isAdded: true, isNew: false},
+        {isAdded: false, isNew: true}
+    ];
+
+    it('should render DashboardLayoutPanel', () => {
+        const wrapper = mount(<DashboardLayoutPanel {...defaultProps} />);
+
+        const header = wrapper.find('.header');
+        const link = wrapper.find(Link);
+        const items = wrapper.find(DashboardConfigItem);
+
+        expect(header.find(IconButton)).toHaveLength(1);
+        expect(header.find(IconButton).prop('onClick')).toBe(defaultProps.onClose);
+
+        expect(header.find(Typography).text()).toBe('Add / remove charts');
+        expect(wrapper.find('.description').find(Typography).at(0).text()).toBe(
+            'Select the charts you want to add to your dashboard. \
+To create or edit chart, visit the Documentation Portal for more information'
+        );
+        expect(link.prop('href')).toBe('https://docs.reltio.com/hub/addremovecharts.html');
+        expect(link.text()).toBe('Documentation Portal');
+
+        expect(items).toHaveLength(2);
+        items.forEach((item, i) => {
+            expect(item.props()).toMatchObject({
+                view: views[i].config,
+                onRemove: defaultProps.onRemove,
+                onAdd: defaultProps.onAdd,
+                isAdded: viewsState[i].isAdded,
+                isNew: viewsState[i].isNew
+            });
+        });
+    });
+});

package/src/components/DashboardLayoutPanel/styles.ts

@@ -0,0 +1,43 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        overflow: 'hidden'
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        borderBottom: 'solid 1px rgba(0, 0, 0, 0.12)'
+    },
+    closeButton: {
+        height: 36,
+        width: 36,
+        marginLeft: '15px'
+    },
+    headerTitle: {
+        lineHeight: '18px',
+        fontSize: '18px',
+        fontWeight: 500,
+        color: 'rgba(0,0,0, 0.87)',
+        letterSpacing: 'normal',
+        padding: '16px'
+    },
+    description: {
+        color: 'rgba(0,0,0,0.54)',
+        fontWeight: 400,
+        fontSize: '12px',
+        lineHeight: '16px',
+        padding: '10px 10px 5px 10px'
+    },
+    items: {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        width: '450px',
+        gap: '20px',
+        padding: '20px',
+        overflowY: 'auto'
+    }
+});

package/src/components/DashboardLinearLoader/DashboardLinearLoader.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import LinearProgress from '@mui/material/LinearProgress';
+import {useStyles} from './styles';
+
+const DashboardLinearLoader = () => {
+    const styles = useStyles();
+    return <LinearProgress color="primary" className={styles.loader} data-reltio-id="dashboard-item-loader" />;
+};
+
+export default DashboardLinearLoader;

package/src/components/DashboardLinearLoader/__tests__/DashboardLinearLoader.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import LinearProgress from '@mui/material/LinearProgress';
+import DashboardLinearLoader from '../DashboardLinearLoader';
+
+describe('DashboardLinearLoader', () => {
+    it('should render DashboardLinearLoader', () => {
+        const wrapper = shallow(<DashboardLinearLoader />);
+        expect(wrapper.find(LinearProgress)).toHaveLength(1);
+    });
+});

package/src/components/DashboardLinearLoader/styles.ts

@@ -0,0 +1,11 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles({
+    loader: {
+        width: '100%',
+        top: 0,
+        left: 0,
+        position: 'absolute',
+        borderRadius: '2px'
+    }
+});

package/src/components/DashboardNoData/DashboardNoData.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import Typography from '@mui/material/Typography';
+import NoDataIcon from './icons/noData.svg';
+import {useStyles} from './styles';
+
+type DashboardNoDataProps = {
+    height?: number;
+};
+
+const DashboardNoData = ({height}: DashboardNoDataProps) => {
+    const styles = useStyles({height});
+    return (
+        <div className={styles.noDataContainer}>
+            <NoDataIcon className={styles.icon} />
+            <Typography>{i18n.text('No Data')}</Typography>
+        </div>
+    );
+};
+
+export default DashboardNoData;

package/src/components/DashboardNoData/__tests__/DashboardNoData.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import Typography from '@mui/material/Typography';
+
+import DashboardNoData from '../DashboardNoData';
+import NoDataIcon from '../icons/noData.svg';
+
+describe('DashboardNoData tests', () => {
+    it('should render DashboardNoData', () => {
+        const wrapper = shallow(<DashboardNoData />);
+        expect(wrapper.find('.noDataContainer').length).toBe(1);
+        expect(wrapper.find(NoDataIcon).length).toBe(1);
+        expect(wrapper.find(Typography).text()).toBe('No Data');
+    });
+});

package/src/components/DashboardNoData/icons/noData.svg

@@ -0,0 +1,68 @@
+<svg width="148" height="148" viewBox="0 0 148 148" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="nodata__mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="148" height="148">
+<path d="M74 148C114.869 148 148 114.869 148 74C148 33.1309 114.869 0 74 0C33.1309 0 0 33.1309 0 74C0 114.869 33.1309 148 74 148Z" fill="white"/>
+</mask>
+<g mask="url(#nodata__mask0)">
+<path d="M74 148C114.869 148 148 114.869 148 74C148 33.1309 114.869 0 74 0C33.1309 0 0 33.1309 0 74C0 114.869 33.1309 148 74 148Z" fill="#0072CE" fill-opacity="0.1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 5.20312H148V148H0V5.20312Z" fill="url(#nodata__paint0_linear)"/>
+<g opacity="0.9">
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M25.186 26.0156H157.082V128.041H25.186V26.0156Z" fill="white" fill-opacity="0.8"/>
+<path opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" d="M16.7656 26.0214C16.7656 23.4639 18.8332 21.3906 21.3887 21.3906H150.795C153.348 21.3906 155.418 23.458 155.418 26.0214V114.128C155.418 116.686 153.351 118.759 150.795 118.759H21.3887C18.8355 118.759 16.7656 116.692 16.7656 114.128V26.0214Z" fill="white"/>
+</g>
+<path opacity="0.5" d="M141.553 50.9491C142.829 50.9491 143.864 49.9112 143.864 48.6308C143.864 47.3504 142.829 46.3125 141.553 46.3125C140.277 46.3125 139.242 47.3504 139.242 48.6308C139.242 49.9112 140.277 50.9491 141.553 50.9491Z" fill="#6DBCFF"/>
+<path opacity="0.5" d="M133.465 50.9491C134.741 50.9491 135.776 49.9112 135.776 48.6308C135.776 47.3504 134.741 46.3125 133.465 46.3125C132.188 46.3125 131.154 47.3504 131.154 48.6308C131.154 49.9112 132.188 50.9491 133.465 50.9491Z" fill="#6DBCFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.8082 46.3125C36.8393 46.3125 39.2965 48.7697 39.2965 51.8008V51.8361C39.2965 54.8672 36.8393 57.3244 33.8082 57.3244C30.777 57.3244 28.3198 54.8672 28.3198 51.8361V51.8008C28.3198 48.7697 30.777 46.3125 33.8082 46.3125Z" fill="#E3EBF4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M47.1022 46.1904H84.156C85.2763 46.1904 86.1845 47.0986 86.1845 48.2189C86.1845 49.3393 85.2763 50.2474 84.156 50.2474H47.1022C45.9819 50.2474 45.0737 49.3393 45.0737 48.2189C45.0737 47.0986 45.9819 46.1904 47.1022 46.1904Z" fill="#B1AABD"/>
+<path opacity="0.43" fill-rule="evenodd" clip-rule="evenodd" d="M46.5227 53.7246H113.529C114.329 53.7246 114.978 54.3733 114.978 55.1735C114.978 55.9738 114.329 56.6225 113.529 56.6225H46.5227C45.7224 56.6225 45.0737 55.9738 45.0737 55.1735C45.0737 54.3733 45.7224 53.7246 46.5227 53.7246Z" fill="#B1AABD"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M45.9431 58.9414H67.5628C68.0429 58.9414 68.4321 59.3306 68.4321 59.8108C68.4321 60.2909 68.0429 60.6801 67.5628 60.6801H45.9431C45.463 60.6801 45.0737 60.2909 45.0737 59.8108C45.0737 59.3306 45.463 58.9414 45.9431 58.9414Z" fill="#B1AABD"/>
+<path opacity="0.5" d="M71.3497 30.6641H31.5075C29.747 30.6641 28.3198 32.0912 28.3198 33.8517C28.3198 35.6122 29.747 37.0394 31.5075 37.0394H71.3497C73.1102 37.0394 74.5374 35.6122 74.5374 33.8517C74.5374 32.0912 73.1102 30.6641 71.3497 30.6641Z" fill="#645F6D"/>
+<path opacity="0.5" d="M141.553 72.9725C142.829 72.9725 143.864 71.9346 143.864 70.6542C143.864 69.3739 142.829 68.3359 141.553 68.3359C140.277 68.3359 139.242 69.3739 139.242 70.6542C139.242 71.9346 140.277 72.9725 141.553 72.9725Z" fill="#6DBCFF"/>
+<path opacity="0.5" d="M133.465 72.9725C134.741 72.9725 135.776 71.9346 135.776 70.6542C135.776 69.3739 134.741 68.3359 133.465 68.3359C132.188 68.3359 131.154 69.3739 131.154 70.6542C131.154 71.9346 132.188 72.9725 133.465 72.9725Z" fill="#6DBCFF"/>
+<path d="M39.2965 73.8243C39.2965 70.7931 36.8393 68.3359 33.8082 68.3359C30.777 68.3359 28.3198 70.7931 28.3198 73.8243V73.8595C28.3198 76.8906 30.777 79.3478 33.8082 79.3478C36.8393 79.3478 39.2965 76.8906 39.2965 73.8595V73.8243Z" fill="#E3EBF4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M47.1022 68.2139H90.9959C92.1162 68.2139 93.0244 69.1221 93.0244 70.2424C93.0244 71.3627 92.1162 72.2709 90.9959 72.2709H47.1022C45.9819 72.2709 45.0737 71.3627 45.0737 70.2424C45.0737 69.1221 45.9819 68.2139 47.1022 68.2139Z" fill="#B1AABD"/>
+<path opacity="0.43" fill-rule="evenodd" clip-rule="evenodd" d="M46.5227 75.748H121.039C121.839 75.748 122.488 76.3968 122.488 77.197C122.488 77.9972 121.839 78.6459 121.039 78.6459H46.5227C45.7224 78.6459 45.0737 77.9972 45.0737 77.197C45.0737 76.3968 45.7224 75.748 46.5227 75.748Z" fill="#B1AABD"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M45.9431 80.9648H106.02C106.5 80.9648 106.89 81.3541 106.89 81.8342C106.89 82.3143 106.5 82.7036 106.02 82.7036H45.9431C45.463 82.7036 45.0737 82.3143 45.0737 81.8342C45.0737 81.3541 45.463 80.9648 45.9431 80.9648Z" fill="#B1AABD"/>
+<path opacity="0.5" d="M141.553 94.996C142.829 94.996 143.864 93.958 143.864 92.6777C143.864 91.3973 142.829 90.3594 141.553 90.3594C140.277 90.3594 139.242 91.3973 139.242 92.6777C139.242 93.958 140.277 94.996 141.553 94.996Z" fill="#6DBCFF"/>
+<path opacity="0.5" d="M133.465 94.996C134.741 94.996 135.776 93.958 135.776 92.6777C135.776 91.3973 134.741 90.3594 133.465 90.3594C132.188 90.3594 131.154 91.3973 131.154 92.6777C131.154 93.958 132.188 94.996 133.465 94.996Z" fill="#6DBCFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.8082 90.3594C36.8393 90.3594 39.2965 92.8166 39.2965 95.8477V95.8829C39.2965 98.9141 36.8393 101.371 33.8082 101.371C30.777 101.371 28.3198 98.9141 28.3198 95.8829V95.8477C28.3198 92.8166 30.777 90.3594 33.8082 90.3594Z" fill="#E3EBF4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M47.1022 90.2373H106.017C107.137 90.2373 108.045 91.1455 108.045 92.2658C108.045 93.3861 107.137 94.2943 106.017 94.2943H47.1022C45.9819 94.2943 45.0737 93.3861 45.0737 92.2658C45.0737 91.1455 45.9819 90.2373 47.1022 90.2373Z" fill="#B1AABD"/>
+<path opacity="0.43" fill-rule="evenodd" clip-rule="evenodd" d="M46.5227 97.7715H95.6195C96.4198 97.7715 97.0685 98.4202 97.0685 99.2204C97.0685 100.021 96.4198 100.669 95.6195 100.669H46.5227C45.7224 100.669 45.0737 100.021 45.0737 99.2204C45.0737 98.4202 45.7224 97.7715 46.5227 97.7715Z" fill="#B1AABD"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M45.9431 102.988H67.5628C68.0429 102.988 68.4321 103.378 68.4321 103.858C68.4321 104.338 68.0429 104.727 67.5628 104.727H45.9431C45.463 104.727 45.0737 104.338 45.0737 103.858C45.0737 103.378 45.463 102.988 45.9431 102.988Z" fill="#B1AABD"/>
+<path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M102.927 64.7495L147.463 141.889L88.474 175.946L43.9376 98.8067L44.3434 98.5723C48.4036 107.835 56.4168 115.284 66.8054 118.188C84.9076 123.247 103.367 112.589 108.037 94.3826C110.716 83.934 108.272 73.2698 102.28 65.1223L102.927 64.7495Z" fill="url(#nodata__paint1_linear)"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M56.3516 103.62C66.7371 114.231 83.5754 114.231 93.9609 103.62C104.346 93.0084 104.346 75.8041 93.9609 65.1928C83.5754 54.5816 66.7371 54.5816 56.3516 65.1928C45.9661 75.8041 45.9661 93.0084 56.3516 103.62Z" fill="url(#nodata__paint2_linear)"/>
+<g filter="url(#nodata__filter0_d)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M74.981 49.7188C94.0417 49.7188 109.493 65.1811 109.493 84.2549C109.493 93.0338 106.22 101.048 100.828 107.141L130.431 136.764C128.629 138.72 126.677 140.537 124.594 142.194L94.8894 112.469C89.2642 116.451 82.3957 118.791 74.981 118.791C55.9204 118.791 40.4688 103.329 40.4688 84.2549C40.4688 65.1811 55.9204 49.7188 74.981 49.7188ZM74.981 59.984C61.5859 59.984 50.7269 70.8505 50.7269 84.2549C50.7269 97.6594 61.5859 108.526 74.981 108.526C88.3762 108.526 99.2352 97.6594 99.2352 84.2549C99.2352 70.8505 88.3762 59.984 74.981 59.984Z" fill="#B5C8C9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M52.9029 110.801C45.3046 104.466 40.4688 94.9255 40.4688 84.2549C40.4688 65.1811 55.9204 49.7188 74.981 49.7188C85.6442 49.7188 95.1779 54.558 101.509 62.1615L95.8465 67.8276C90.9852 61.653 83.4458 57.6886 74.981 57.6886C60.319 57.6886 48.4331 69.5828 48.4331 84.2549C48.4331 92.7255 52.3947 100.27 58.565 105.135L52.9029 110.801Z" fill="white" fill-opacity="0.4"/>
+</g>
+<g style="mix-blend-mode:soft-light" opacity="0.4">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56.3516 103.62C66.7371 114.231 83.5754 114.231 93.9609 103.62C104.346 93.0084 104.346 75.8041 93.9609 65.1928C83.5754 54.5816 66.7371 54.5816 56.3516 65.1928C45.9661 75.8041 45.9661 93.0084 56.3516 103.62Z" fill="#D9F5FF"/>
+</g>
+<g style="mix-blend-mode:overlay">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M71.621 91.7688C71.621 89.4975 71.8777 87.7045 72.3911 86.3899C72.9045 85.0753 73.7368 83.9358 74.888 82.9712C76.0392 82.0067 76.9143 81.1238 77.5133 80.3226C78.1122 79.5214 78.4117 78.6386 78.4117 77.674C78.4117 75.3249 77.4005 74.1503 75.3781 74.1503C74.4446 74.1503 73.6901 74.4926 73.1145 75.1771C72.5389 75.8616 72.2355 76.7872 72.2044 77.954H64.3169C64.348 74.8426 65.3281 72.4196 67.2572 70.6849C69.1863 68.9503 71.8932 68.083 75.3781 68.083C78.8473 68.083 81.5348 68.8842 83.4406 70.4866C85.3463 72.089 86.2992 74.3681 86.2992 77.324C86.2992 78.6152 86.0425 79.7898 85.5291 80.8477C85.0157 81.9056 84.1912 82.9868 83.0555 84.0913L80.3719 86.5883C79.6096 87.3195 79.0807 88.0701 78.7851 88.8402C78.4895 89.6103 78.3261 90.5865 78.295 91.7688H71.621ZM70.6642 98.8629C70.6642 97.7117 71.0804 96.7666 71.9127 96.0276C72.745 95.2886 73.7834 94.9191 75.028 94.9191C76.2726 94.9191 77.311 95.2886 78.1433 96.0276C78.9757 96.7666 79.3918 97.7117 79.3918 98.8629C79.3918 100.014 78.9757 100.959 78.1433 101.698C77.311 102.437 76.2726 102.807 75.028 102.807C73.7834 102.807 72.745 102.437 71.9127 101.698C71.0804 100.959 70.6642 100.014 70.6642 98.8629Z" fill="black" fill-opacity="0.87"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M71.621 91.7688C71.621 89.4975 71.8777 87.7045 72.3911 86.3899C72.9045 85.0753 73.7368 83.9358 74.888 82.9712C76.0392 82.0067 76.9143 81.1238 77.5133 80.3226C78.1122 79.5214 78.4117 78.6386 78.4117 77.674C78.4117 75.3249 77.4005 74.1503 75.3781 74.1503C74.4446 74.1503 73.6901 74.4926 73.1145 75.1771C72.5389 75.8616 72.2355 76.7872 72.2044 77.954H64.3169C64.348 74.8426 65.3281 72.4196 67.2572 70.6849C69.1863 68.9503 71.8932 68.083 75.3781 68.083C78.8473 68.083 81.5348 68.8842 83.4406 70.4866C85.3463 72.089 86.2992 74.3681 86.2992 77.324C86.2992 78.6152 86.0425 79.7898 85.5291 80.8477C85.0157 81.9056 84.1912 82.9868 83.0555 84.0913L80.3719 86.5883C79.6096 87.3195 79.0807 88.0701 78.7851 88.8402C78.4895 89.6103 78.3261 90.5865 78.295 91.7688H71.621ZM70.6642 98.8629C70.6642 97.7117 71.0804 96.7666 71.9127 96.0276C72.745 95.2886 73.7834 94.9191 75.028 94.9191C76.2726 94.9191 77.311 95.2886 78.1433 96.0276C78.9757 96.7666 79.3918 97.7117 79.3918 98.8629C79.3918 100.014 78.9757 100.959 78.1433 101.698C77.311 102.437 76.2726 102.807 75.028 102.807C73.7834 102.807 72.745 102.437 71.9127 101.698C71.0804 100.959 70.6642 100.014 70.6642 98.8629Z" fill="#3C74B4" fill-opacity="0.38"/>
+</g>
+<defs>
+<filter id="nodata__filter0_d" x="36.4688" y="47.7188" width="97.9619" height="100.475" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="nodata__paint0_linear" x1="74" y1="5.20312" x2="74" y2="148" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FAFAFA" stop-opacity="0"/>
+<stop offset="1" stop-color="#F4F4F4"/>
+</linearGradient>
+<linearGradient id="nodata__paint1_linear" x1="123.612" y1="142.028" x2="76.7287" y2="122.717" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="1"/>
+</linearGradient>
+<linearGradient id="nodata__paint2_linear" x1="75.1562" y1="57.2344" x2="75.1562" y2="111.578" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EEFBFF"/>
+<stop offset="1" stop-color="#0072CE"/>
+</linearGradient>
+</defs>
+</svg>

package/src/components/DashboardNoData/styles.ts

@@ -0,0 +1,21 @@
+import {makeStyles} from '@mui/styles';
+
+type NoDataContainer = {
+    height?: number;
+};
+
+export const useStyles = makeStyles(() => ({
+    noDataContainer: ({height}: NoDataContainer) => ({
+        height: height ? `${height}px` : 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: 'rgba(0, 0, 0, 0.54)'
+    }),
+    icon: {
+        height: '88px',
+        width: '88px',
+        marginBottom: '20px'
+    }
+}));

package/src/components/DashboardPerspectiveHeader/DashboardPerspectiveHeader.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import AddIcon from '@mui/icons-material/Add';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import {DropDownMenuButton, MultilineMenuItem, SmallIconButton} from '@reltio/components';
+
+import {useStyles} from './styles';
+
+type MultilineMenuItemProps = React.ComponentProps<typeof MultilineMenuItem>;
+type Props = {
+    title: string;
+    onToggleConfig: () => void;
+    menuItems: MultilineMenuItemProps['item'][];
+};
+
+export const DashboardPerspectiveHeader = ({title, onToggleConfig, menuItems}: Props) => {
+    const styles = useStyles();
+
+    return (
+        <div className={styles.header}>
+            <Typography className={styles.headerText} variant="body2">
+                {i18n.text(title)}
+            </Typography>
+            <Button className={styles.toggleButton} onClick={onToggleConfig} startIcon={<AddIcon />}>
+                {i18n.text('Add / remove charts')}
+            </Button>
+            <DropDownMenuButton
+                menuId="dashboard-header-menu"
+                buttonComponent={SmallIconButton}
+                buttonProps={{
+                    icon: MoreVertIcon,
+                    size: 'L',
+                    'data-reltio-id': 'reltio-dashboard-header-menu',
+                    className: styles.menuButton
+                }}
+                menuItems={menuItems}
+                MenuItemRenderer={MultilineMenuItem}
+            />
+        </div>
+    );
+};

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {DashboardPerspectiveHeader} from '../DashboardPerspectiveHeader';
+
+describe('DashboardPerspectiveHeader tests', () => {
+    const menuItems = [
+        {primary: 'Option 1', secondary: 'description 1', onClick: jest.fn()},
+        {primary: 'Option 2', secondary: 'description 2', onClick: jest.fn()}
+    ];
+    const props = {title: 'Title', menuItems, onToggleConfig: jest.fn()};
+
+    const setUp = () => {
+        const user = userEvent.setup();
+        return {user, ...render(<DashboardPerspectiveHeader {...props} />)};
+    };
+
+    it('should render DashboardPerspectiveHeader with default title', () => {
+        setUp();
+        expect(screen.getByText(props.title)).toBeInTheDocument();
+        expect(screen.getByRole('button', {name: 'Add / remove charts'})).toBeInTheDocument();
+        expect(screen.getByTestId('reltio-dashboard-header-menu')).toBeInTheDocument();
+    });
+
+    it('should call onToggleConfig after click on Add / remove charts button', async () => {
+        const {user} = setUp();
+        await user.click(screen.getByRole('button', {name: 'Add / remove charts'}));
+        expect(props.onToggleConfig).toHaveBeenCalled();
+    });
+
+    it('should render correct header menu', async () => {
+        const {user} = setUp();
+        for (const {primary, secondary, onClick} of menuItems) {
+            await user.click(screen.getByTestId('reltio-dashboard-header-menu'));
+            expect(screen.getByText(primary)).toBeInTheDocument();
+            expect(screen.getByText(secondary)).toBeInTheDocument();
+            await user.click(screen.getByText(primary));
+            expect(onClick).toHaveBeenCalled();
+        }
+    });
+});

package/src/components/DashboardPerspectiveHeader/styles.ts

@@ -0,0 +1,24 @@
+import {makeStyles} from '@mui/styles';
+
+const useStyles = makeStyles((theme) => ({
+    header: {
+        height: '50px',
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 20px',
+        flexShrink: 0,
+        borderBottom: 'solid 1px rgba(0, 0, 0, 0.12)'
+    },
+    headerText: {
+        fontSize: '18px',
+        marginRight: 'auto'
+    },
+    toggleButton: {
+        color: theme.palette.primary.main
+    },
+    menuButton: {
+        marginLeft: 8
+    }
+}));
+
+export {useStyles};

package/src/components/DashboardPopupMenu/DashboardPopupMenu.tsx

@@ -0,0 +1,75 @@
+import React, {useState, ReactNode, MouseEvent} from 'react';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import IconButton from '@mui/material/IconButton';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import {useStyles} from './styles';
+
+interface MenuItem {
+    id: string;
+    title: string;
+    icon: ReactNode;
+    active: boolean;
+    action: () => void;
+}
+
+type DashboardPopupMenuProps = {
+    items: MenuItem[];
+};
+
+const DashboardPopupMenu = ({items}: DashboardPopupMenuProps) => {
+    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+    const isMenuOpen = Boolean(anchorEl);
+    const styles = useStyles();
+
+    const handleMenuClick = (e: MouseEvent<HTMLButtonElement>) => setAnchorEl(e.currentTarget);
+
+    const handleMenuClose = () => setAnchorEl(null);
+
+    const handleItemClick = (action: () => void) => () => {
+        handleMenuClose();
+        action();
+    };
+
+    return (
+        <>
+            <IconButton
+                className={styles.openIcon}
+                aria-controls="menu"
+                aria-haspopup="true"
+                onClick={handleMenuClick}
+                size="large"
+            >
+                <MoreVertIcon />
+            </IconButton>
+            <Menu
+                id="menu"
+                anchorEl={anchorEl}
+                open={isMenuOpen}
+                onClose={handleMenuClose}
+                transitionDuration={0}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right'
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right'
+                }}
+            >
+                {items
+                    .filter((item) => item.active)
+                    .map(({id, icon, title, action}) => (
+                        <MenuItem key={id} onClick={handleItemClick(action)} className={styles.menuItem}>
+                            <ListItemIcon className={styles.itemIcon}>{icon}</ListItemIcon>
+                            <Typography className={styles.itemTitle}>{title}</Typography>
+                        </MenuItem>
+                    ))}
+            </Menu>
+        </>
+    );
+};
+
+export default DashboardPopupMenu;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import DashboardPopupMenu from '../DashboardPopupMenu';
+import {Add, Clear, Remove} from '@mui/icons-material';
+import {IconButton, ListItemIcon, Menu, MenuItem, Typography} from '@mui/material';
+
+describe('DashboardPopupMenu', () => {
+    const items = [
+        {
+            id: 'first',
+            title: 'First',
+            icon: <Add />,
+            active: true,
+            action: jest.fn()
+        },
+        {
+            id: 'second',
+            title: 'Second',
+            icon: <Clear />,
+            active: true,
+            action: jest.fn()
+        },
+        {
+            id: 'third',
+            title: 'Third',
+            icon: <Remove />,
+            active: false,
+            action: jest.fn()
+        }
+    ];
+    it('should render Dashboard popup menu', () => {
+        const wrapper = shallow(<DashboardPopupMenu items={items} />);
+        expect(wrapper.find(IconButton).length).toBe(1);
+        expect(wrapper.find(Menu).length).toBe(1);
+        expect(wrapper.find(MenuItem).length).toBe(2);
+        expect(wrapper.find(ListItemIcon).length).toBe(2);
+        const typography = wrapper.find(Typography);
+        expect(typography.length).toBe(2);
+        wrapper.find(IconButton).simulate('click', {currentTarget: {}});
+        expect(wrapper.find(Menu).prop('open')).toBe(true);
+        items.forEach((item, i) => {
+            if (item.active) {
+                expect(typography.at(i).text()).toBe(item.title);
+                wrapper.find(MenuItem).at(i).simulate('click');
+                expect(item.action).toBeCalledTimes(1);
+            }
+        });
+        wrapper.find(Menu).prop('onClose')({}, 'escapeKeyDown');
+        expect(wrapper.find(Menu).prop('open')).toBe(false);
+    });
+});

package/src/components/DashboardPopupMenu/styles.ts

@@ -0,0 +1,20 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles(() => ({
+    itemTitle: {
+        fontSize: '13px'
+    },
+    itemIcon: {
+        minWidth: '49px'
+    },
+    menuItem: {
+        padding: '12px 16px',
+        minWidth: '177px'
+    },
+    openIcon: {
+        padding: '4px',
+        borderRadius: '2px',
+        marginTop: '-6px',
+        marginRight: '-10px'
+    }
+}));

package/src/components/EntityTable/EntityTable.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {BasicTable} from '@reltio/components';
+import HeadCellRenderer from './cell-renderers/HeadCellRenderer';
+import EntityLabelRenderer from './cell-renderers/EntityLabelRenderer';
+import {EntityData} from '../../types/EntityData';
+import i18n from 'ui-i18n';
+
+import {useStyles} from './styles';
+
+type Props = {
+    width: number;
+    height: number;
+    basicTableRef?: React.MutableRefObject<any> | null;
+    data: EntityData[];
+};
+
+const EntityTable = ({height, width, basicTableRef, data}: Props) => {
+    const styles = useStyles({width, height});
+    const headData = [
+        {
+            id: 'label',
+            label: i18n.text('Entity'),
+            resizable: false,
+            headCellRenderer: HeadCellRenderer,
+            rowCellValueRenderer: EntityLabelRenderer,
+            initialWidth: width
+        }
+    ];
+    const tableClasses = {
+        cellBorder: styles.cellBorder
+    };
+
+    return (
+        <div className={styles.tableContainer}>
+            <BasicTable
+                columnsData={headData}
+                rowsData={data}
+                headRowHeight={48}
+                getRowCellHeight={null}
+                classes={tableClasses}
+                defaultColumnWidth={100}
+                defaultColumnMinWidth={100}
+                ref={basicTableRef}
+            />
+        </div>
+    );
+};
+
+export default EntityTable;