@reltio/dashboard 1.4.1585 → 1.4.1586-mui5

package/src/components/DashboardError/DashboardError.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import Typography from '@mui/material/Typography';
+import ReplayIcon from '@mui/icons-material/Replay';
+import Button from '@mui/material/Button';
+import ErrorIcon from './icons/error.svg';
+import {useStyles} from './styles';
+
+type DashboardErrorProps = {
+    height?: number;
+    onRefresh?: () => void;
+    message?: string;
+};
+
+const DashboardError = ({height, onRefresh, message}: DashboardErrorProps) => {
+    const styles = useStyles({height});
+    return (
+        <div className={styles.errorContainer}>
+            <ErrorIcon className={styles.errorIcon} />
+            <Typography>{message}</Typography>
+            {onRefresh && (
+                <Button
+                    className={styles.refreshButton}
+                    startIcon={<ReplayIcon color="primary" className={styles.refreshIcon} />}
+                    onClick={onRefresh}
+                >
+                    <Typography variant="button">{i18n.text('Refresh')}</Typography>
+                </Button>
+            )}
+        </div>
+    );
+};
+
+export default DashboardError;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+
+import DashboardError from '../DashboardError';
+import ErrorIcon from '../icons/error.svg';
+
+describe('DashboardError tests', () => {
+    it('should render DashboardError', () => {
+        const onRefresh = jest.fn();
+        const wrapper = shallow(<DashboardError message={'Error Loading Data'} onRefresh={onRefresh} />);
+        const button = wrapper.find(Button);
+
+        expect(wrapper.find('.errorContainer').length).toBe(1);
+        expect(wrapper.find(ErrorIcon).length).toBe(1);
+        expect(wrapper.find(Typography).first().text()).toBe('Error Loading Data');
+        expect(button).toHaveLength(1);
+        expect(button.text().includes('Refresh')).toBe(true);
+    });
+
+    it('should call onRefresh prop when click on Refresh button', () => {
+        const onRefresh = jest.fn();
+        const wrapper = shallow(<DashboardError onRefresh={onRefresh} />);
+        wrapper.find(Button).simulate('click');
+        expect(onRefresh).toBeCalled();
+    });
+
+    it('should not render button when onRefresh prop is undefined', () => {
+        const wrapper = shallow(<DashboardError />);
+        const button = wrapper.find(Button);
+        expect(button).toHaveLength(0);
+    });
+});

package/src/components/DashboardError/icons/error.svg

@@ -0,0 +1,113 @@
+<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="88" height="88">
+<path d="M44 88C68.3005 88 88 68.3005 88 44C88 19.6995 68.3005 0 44 0C19.6995 0 0 19.6995 0 44C0 68.3005 19.6995 88 44 88Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M44 88C68.3005 88 88 68.3005 88 44C88 19.6995 68.3005 0 44 0C19.6995 0 0 19.6995 0 44C0 68.3005 19.6995 88 44 88Z" fill="#CAC4D5" fill-opacity="0.3"/>
+<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M19.987 6.73083L69.4355 12.8023C69.8111 12.8485 70.0781 13.1913 70.0317 13.5691L62.1873 77.4572C62.1409 77.8346 61.7977 78.1029 61.4208 78.0567L7.21427 71.4009C6.83729 71.3547 6.56946 71.0095 6.61511 70.6377L7.02348 67.3117L19.987 6.73083Z" fill="white"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M1.26706 25.9213L47.1265 6.45515C47.4748 6.30729 47.8775 6.4707 48.0262 6.82109L73.1768 66.0721C73.3253 66.422 73.1547 66.7972 72.7913 66.9114L22.3393 82.7659C21.9779 82.8795 21.5823 82.6849 21.452 82.321L1.26706 25.9213Z" fill="white"/>
+<path d="M65.6311 9.22949H11.0171C10.6374 9.22949 10.3296 9.5373 10.3296 9.91699V74.2867C10.3296 74.6664 10.6374 74.9742 11.0171 74.9742H65.6311C66.0108 74.9742 66.3186 74.6664 66.3186 74.2867V9.91699C66.3186 9.5373 66.0108 9.22949 65.6311 9.22949Z" fill="#F9F9F9"/>
+<path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M14.8853 34.95L17.9899 33.2839L25.3003 29.2586L34.1521 32.7315L42.0411 27.5081L50.0776 24.8803L58.191 30.0726L61.5428 19.8184V36.7847H14.9355L14.8853 34.95Z" fill="#9C6CF0"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M14.8853 32.3311L17.9899 28.5698L25.3003 32.8802L34.1521 34.5364L42.0411 32.3311L50.0776 34.1582L58.191 21.5146L61.5428 22.2574V36.3602H14.9355L14.8853 32.3311Z" fill="#FA82AA"/>
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M14.8853 34.9461L17.9899 35.3781L25.3003 36.3872L34.1521 31.2705L42.0411 34.9461L50.0776 36.7846L58.191 34.9461L61.5428 35.7573V36.7846H14.9355L14.8853 34.9461Z" fill="#4DBEE9"/>
+<path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M61.5428 35.288L61.4925 36.7846H14.8853L14.8853 31.5464L18.2371 31.2705L26.3505 35.9667L34.3869 35.288L42.2759 36.1071L51.1278 35.492L58.4381 33.891L61.5428 35.288Z" fill="#4DBEE9"/>
+<path d="M21.0357 40.1777H15.9458C15.5944 40.1777 15.3096 40.4626 15.3096 40.814C15.3096 41.1654 15.5944 41.4502 15.9458 41.4502H21.0357C21.3871 41.4502 21.672 41.1654 21.672 40.814C21.672 40.4626 21.3871 40.1777 21.0357 40.1777Z" fill="#ACACAC"/>
+<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M16.582 55.8721C17.2848 55.8721 17.8545 56.4418 17.8545 57.1445V69.021C17.8545 69.7238 17.2848 70.2935 16.582 70.2935C15.8793 70.2935 15.3096 69.7238 15.3096 69.021V57.1445C15.3096 56.4418 15.8793 55.8721 16.582 55.8721Z" fill="#BDBDBD"/>
+<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M25.9136 55.8721C26.6164 55.8721 27.1861 56.4418 27.1861 57.1445V69.021C27.1861 69.7238 26.6164 70.2935 25.9136 70.2935C25.2108 70.2935 24.6411 69.7238 24.6411 69.021V57.1445C24.6411 56.4418 25.2108 55.8721 25.9136 55.8721Z" fill="#BDBDBD"/>
+<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M39.9107 55.8721C40.6134 55.8721 41.1831 56.4418 41.1831 57.1445V69.021C41.1831 69.7238 40.6134 70.2935 39.9107 70.2935C39.2079 70.2935 38.6382 69.7238 38.6382 69.021V57.1445C38.6382 56.4418 39.2079 55.8721 39.9107 55.8721Z" fill="#BDBDBD"/>
+<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M21.2476 55.8721C21.9503 55.8721 22.5201 56.4418 22.5201 57.1445V69.021C22.5201 69.7238 21.9503 70.2935 21.2476 70.2935C20.5448 70.2935 19.9751 69.7238 19.9751 69.021V57.1445C19.9751 56.4418 20.5448 55.8721 21.2476 55.8721Z" fill="#BDBDBD"/>
+<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M35.2451 55.8721C35.9479 55.8721 36.5176 56.4418 36.5176 57.1445V69.021C36.5176 69.7238 35.9479 70.2935 35.2451 70.2935C34.5424 70.2935 33.9727 69.7238 33.9727 69.021V57.1445C33.9727 56.4418 34.5424 55.8721 35.2451 55.8721Z" fill="#BDBDBD"/>
+<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M30.5791 55.8721C31.2819 55.8721 31.8516 56.4418 31.8516 57.1445V69.021C31.8516 69.7238 31.2819 70.2935 30.5791 70.2935C29.8763 70.2935 29.3066 69.7238 29.3066 69.021V57.1445C29.3066 56.4418 29.8763 55.8721 30.5791 55.8721Z" fill="#BDBDBD"/>
+<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M44.5767 55.8721C45.2794 55.8721 45.8492 56.4418 45.8492 57.1445V69.021C45.8492 69.7238 45.2794 70.2935 44.5767 70.2935C43.8739 70.2935 43.3042 69.7238 43.3042 69.021V57.1445C43.3042 56.4418 43.8739 55.8721 44.5767 55.8721Z" fill="#BDBDBD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.582 65.6279C17.2848 65.6279 17.8545 66.1976 17.8545 66.9004V69.0212C17.8545 69.724 17.2848 70.2937 16.582 70.2937C15.8793 70.2937 15.3096 69.724 15.3096 69.0212V66.9004C15.3096 66.1976 15.8793 65.6279 16.582 65.6279Z" fill="#4DBEE9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.9136 62.6582C26.6164 62.6582 27.1861 63.2279 27.1861 63.9307V69.0206C27.1861 69.7234 26.6164 70.2931 25.9136 70.2931C25.2108 70.2931 24.6411 69.7234 24.6411 69.0206V63.9307C24.6411 63.2279 25.2108 62.6582 25.9136 62.6582Z" fill="#4DBEE9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.9107 65.6279C40.6134 65.6279 41.1831 66.1976 41.1831 66.9004V69.0212C41.1831 69.724 40.6134 70.2937 39.9107 70.2937C39.2079 70.2937 38.6382 69.724 38.6382 69.0212V66.9004C38.6382 66.1976 39.2079 65.6279 39.9107 65.6279Z" fill="#4DBEE9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.2476 66.4766C21.9503 66.4766 22.5201 67.0463 22.5201 67.749V69.0215C22.5201 69.7243 21.9503 70.294 21.2476 70.294C20.5448 70.294 19.9751 69.7243 19.9751 69.0215V67.749C19.9751 67.0463 20.5448 66.4766 21.2476 66.4766Z" fill="#4DBEE9"/>
+<path d="M36.5176 65.6279C36.5176 64.9252 35.9479 64.3555 35.2451 64.3555C34.5424 64.3555 33.9727 64.9252 33.9727 65.6279V69.0212C33.9727 69.724 34.5424 70.2937 35.2451 70.2937C35.9479 70.2937 36.5176 69.724 36.5176 69.0212V65.6279Z" fill="#4DBEE9"/>
+<path d="M31.8516 62.2344C31.8516 61.5316 31.2819 60.9619 30.5791 60.9619C29.8763 60.9619 29.3066 61.5316 29.3066 62.2344V69.0209C29.3066 69.7237 29.8763 70.2934 30.5791 70.2934C31.2819 70.2934 31.8516 69.7237 31.8516 69.0209V62.2344Z" fill="#4DBEE9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M44.5767 60.9619C45.2794 60.9619 45.8492 61.5316 45.8492 62.2344V69.0209C45.8492 69.7237 45.2794 70.2934 44.5767 70.2934C43.8739 70.2934 43.3042 69.7237 43.3042 69.0209V62.2344C43.3042 61.5316 43.8739 60.9619 44.5767 60.9619Z" fill="#4DBEE9"/>
+<path d="M18.9146 18.5459C19.9687 18.5459 20.8233 17.6914 20.8233 16.6372C20.8233 15.5831 19.9687 14.7285 18.9146 14.7285C17.8604 14.7285 17.0059 15.5831 17.0059 16.6372C17.0059 17.6914 17.8604 18.5459 18.9146 18.5459Z" fill="#9C6CF0"/>
+<path opacity="0.5" d="M34.1846 18.5459C35.2388 18.5459 36.0933 17.6914 36.0933 16.6372C36.0933 15.5831 35.2388 14.7285 34.1846 14.7285C33.1304 14.7285 32.2759 15.5831 32.2759 16.6372C32.2759 17.6914 33.1304 18.5459 34.1846 18.5459Z" fill="#4DBEE9"/>
+<path opacity="0.3" d="M49.4541 18.5459C50.5083 18.5459 51.3628 17.6914 51.3628 16.6372C51.3628 15.5831 50.5083 14.7285 49.4541 14.7285C48.4 14.7285 47.5454 15.5831 47.5454 16.6372C47.5454 17.6914 48.4 18.5459 49.4541 18.5459Z" fill="#4DBEE9"/>
+<path opacity="0.8" d="M26.5498 18.5459C27.604 18.5459 28.4585 17.6914 28.4585 16.6372C28.4585 15.5831 27.604 14.7285 26.5498 14.7285C25.4957 14.7285 24.6411 15.5831 24.6411 16.6372C24.6411 17.6914 25.4957 18.5459 26.5498 18.5459Z" fill="#FB6597"/>
+<path d="M41.8194 18.5459C42.8735 18.5459 43.7281 17.6914 43.7281 16.6372C43.7281 15.5831 42.8735 14.7285 41.8194 14.7285C40.7652 14.7285 39.9106 15.5831 39.9106 16.6372C39.9106 17.6914 40.7652 18.5459 41.8194 18.5459Z" fill="#4DBEE9"/>
+<path opacity="0.2" d="M57.0894 18.5459C58.1435 18.5459 58.9981 17.6914 58.9981 16.6372C58.9981 15.5831 58.1435 14.7285 57.0894 14.7285C56.0352 14.7285 55.1807 15.5831 55.1807 16.6372C55.1807 17.6914 56.0352 18.5459 57.0894 18.5459Z" fill="#4DBEE9"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M16.5819 19.8184H21.2476C21.4819 19.8184 21.6718 20.0083 21.6718 20.2425C21.6718 20.4768 21.4819 20.6667 21.2476 20.6667H16.5819C16.3476 20.6667 16.1577 20.4768 16.1577 20.2425C16.1577 20.0083 16.3476 19.8184 16.5819 19.8184Z" fill="#ACACAC"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M31.8514 19.8184H36.5172C36.7514 19.8184 36.9413 20.0083 36.9413 20.2425C36.9413 20.4768 36.7514 20.6667 36.5172 20.6667H31.8514C31.6171 20.6667 31.4272 20.4768 31.4272 20.2425C31.4272 20.0083 31.6171 19.8184 31.8514 19.8184Z" fill="#ACACAC"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M47.1214 19.8184H51.7872C52.0214 19.8184 52.2113 20.0083 52.2113 20.2425C52.2113 20.4768 52.0214 20.6667 51.7872 20.6667H47.1214C46.8872 20.6667 46.6973 20.4768 46.6973 20.2425C46.6973 20.0083 46.8872 19.8184 47.1214 19.8184Z" fill="#ACACAC"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M24.2166 19.8184H28.8824C29.1166 19.8184 29.3065 20.0083 29.3065 20.2425C29.3065 20.4768 29.1166 20.6667 28.8824 20.6667H24.2166C23.9824 20.6667 23.7925 20.4768 23.7925 20.2425C23.7925 20.0083 23.9824 19.8184 24.2166 19.8184Z" fill="#ACACAC"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M39.4862 19.8184H44.1519C44.3862 19.8184 44.5761 20.0083 44.5761 20.2425C44.5761 20.4768 44.3862 20.6667 44.1519 20.6667H39.4862C39.2519 20.6667 39.062 20.4768 39.062 20.2425C39.062 20.0083 39.2519 19.8184 39.4862 19.8184Z" fill="#ACACAC"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M54.7562 19.8184H59.4219C59.6562 19.8184 59.8461 20.0083 59.8461 20.2425C59.8461 20.4768 59.6562 20.6667 59.4219 20.6667H54.7562C54.5219 20.6667 54.332 20.4768 54.332 20.2425C54.332 20.0083 54.5219 19.8184 54.7562 19.8184Z" fill="#ACACAC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9458 43.5713H21.0357C21.3871 43.5713 21.672 43.8561 21.672 44.2075C21.672 44.5589 21.3871 44.8438 21.0357 44.8438H15.9458C15.5944 44.8438 15.3096 44.5589 15.3096 44.2075C15.3096 43.8561 15.5944 43.5713 15.9458 43.5713Z" fill="#E9E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9458 46.1162H21.0357C21.3871 46.1162 21.672 46.4011 21.672 46.7524C21.672 47.1038 21.3871 47.3887 21.0357 47.3887H15.9458C15.5944 47.3887 15.3096 47.1038 15.3096 46.7524C15.3096 46.4011 15.5944 46.1162 15.9458 46.1162Z" fill="#E9E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9458 48.6611H21.0357C21.3871 48.6611 21.672 48.946 21.672 49.2974C21.672 49.6488 21.3871 49.9336 21.0357 49.9336H15.9458C15.5944 49.9336 15.3096 49.6488 15.3096 49.2974C15.3096 48.946 15.5944 48.6611 15.9458 48.6611Z" fill="#E9E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.5806 43.5713H28.6705C29.0219 43.5713 29.3067 43.8561 29.3067 44.2075C29.3067 44.5589 29.0219 44.8438 28.6705 44.8438H23.5806C23.2292 44.8438 22.9443 44.5589 22.9443 44.2075C22.9443 43.8561 23.2292 43.5713 23.5806 43.5713Z" fill="#E9E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.5806 46.1162H28.6705C29.0219 46.1162 29.3067 46.4011 29.3067 46.7524C29.3067 47.1038 29.0219 47.3887 28.6705 47.3887H23.5806C23.2292 47.3887 22.9443 47.1038 22.9443 46.7524C22.9443 46.4011 23.2292 46.1162 23.5806 46.1162Z" fill="#E9E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.5806 48.6611H28.6705C29.0219 48.6611 29.3067 48.946 29.3067 49.2974C29.3067 49.6488 29.0219 49.9336 28.6705 49.9336H23.5806C23.2292 49.9336 22.9443 49.6488 22.9443 49.2974C22.9443 48.946 23.2292 48.6611 23.5806 48.6611Z" fill="#E9E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.4541 43.5713H60.4823C60.8336 43.5713 61.1185 43.8561 61.1185 44.2075C61.1185 44.5589 60.8336 44.8438 60.4823 44.8438H49.4541C49.1027 44.8438 48.8179 44.5589 48.8179 44.2075C48.8179 43.8561 49.1027 43.5713 49.4541 43.5713Z" fill="#E9E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.4541 46.1162H60.4823C60.8336 46.1162 61.1185 46.4011 61.1185 46.7524C61.1185 47.1038 60.8336 47.3887 60.4823 47.3887H49.4541C49.1027 47.3887 48.8179 47.1038 48.8179 46.7524C48.8179 46.4011 49.1027 46.1162 49.4541 46.1162Z" fill="#E9E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.4541 48.6611H60.4823C60.8336 48.6611 61.1185 48.946 61.1185 49.2974C61.1185 49.6488 60.8336 49.9336 60.4823 49.9336H49.4541C49.1027 49.9336 48.8179 49.6488 48.8179 49.2974C48.8179 48.946 49.1027 48.6611 49.4541 48.6611Z" fill="#E9E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.2153 43.5713H46.4851C46.8365 43.5713 47.1213 43.8561 47.1213 44.2075C47.1213 44.5589 46.8365 44.8438 46.4851 44.8438H31.2153C30.864 44.8438 30.5791 44.5589 30.5791 44.2075C30.5791 43.8561 30.864 43.5713 31.2153 43.5713Z" fill="#E9E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.2153 46.1162H46.4851C46.8365 46.1162 47.1213 46.4011 47.1213 46.7524C47.1213 47.1038 46.8365 47.3887 46.4851 47.3887H31.2153C30.864 47.3887 30.5791 47.1038 30.5791 46.7524C30.5791 46.4011 30.864 46.1162 31.2153 46.1162Z" fill="#E9E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.2153 48.6611H46.4851C46.8365 48.6611 47.1213 48.946 47.1213 49.2974C47.1213 49.6488 46.8365 49.9336 46.4851 49.9336H31.2153C30.864 49.9336 30.5791 49.6488 30.5791 49.2974C30.5791 48.946 30.864 48.6611 31.2153 48.6611Z" fill="#E9E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9458 51.2061H21.0357C21.3871 51.2061 21.672 51.4909 21.672 51.8423C21.672 52.1937 21.3871 52.4785 21.0357 52.4785H15.9458C15.5944 52.4785 15.3096 52.1937 15.3096 51.8423C15.3096 51.4909 15.5944 51.2061 15.9458 51.2061Z" fill="#E9E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.5806 51.2061H28.6705C29.0219 51.2061 29.3067 51.4909 29.3067 51.8423C29.3067 52.1937 29.0219 52.4785 28.6705 52.4785H23.5806C23.2292 52.4785 22.9443 52.1937 22.9443 51.8423C22.9443 51.4909 23.2292 51.2061 23.5806 51.2061Z" fill="#E9E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.4541 51.2061H60.4823C60.8336 51.2061 61.1185 51.4909 61.1185 51.8423C61.1185 52.1937 60.8336 52.4785 60.4823 52.4785H49.4541C49.1027 52.4785 48.8179 52.1937 48.8179 51.8423C48.8179 51.4909 49.1027 51.2061 49.4541 51.2061Z" fill="#E9E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.2153 51.2061H46.4851C46.8365 51.2061 47.1213 51.4909 47.1213 51.8423C47.1213 52.1937 46.8365 52.4785 46.4851 52.4785H31.2153C30.864 52.4785 30.5791 52.1937 30.5791 51.8423C30.5791 51.4909 30.864 51.2061 31.2153 51.2061Z" fill="#E9E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.8784 55.8721H54.9683C55.3197 55.8721 55.6046 56.1569 55.6046 56.5083C55.6046 56.8597 55.3197 57.1445 54.9683 57.1445H49.8784C49.527 57.1445 49.2422 56.8597 49.2422 56.5083C49.2422 56.1569 49.527 55.8721 49.8784 55.8721Z" fill="#ACACAC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.8784 59.6895H60.9066C61.2579 59.6895 61.5428 59.9743 61.5428 60.3257C61.5428 60.6771 61.2579 60.9619 60.9066 60.9619H49.8784C49.527 60.9619 49.2422 60.6771 49.2422 60.3257C49.2422 59.9743 49.527 59.6895 49.8784 59.6895Z" fill="#E9E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.8784 62.2344H60.9066C61.2579 62.2344 61.5428 62.5192 61.5428 62.8706C61.5428 63.222 61.2579 63.5069 60.9066 63.5069H49.8784C49.527 63.5069 49.2422 63.222 49.2422 62.8706C49.2422 62.5192 49.527 62.2344 49.8784 62.2344Z" fill="#E9E9E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.8784 64.7793H60.9066C61.2579 64.7793 61.5428 65.0642 61.5428 65.4155C61.5428 65.7669 61.2579 66.0518 60.9066 66.0518H49.8784C49.527 66.0518 49.2422 65.7669 49.2422 65.4155C49.2422 65.0642 49.527 64.7793 49.8784 64.7793Z" fill="#E9E9E9"/>
+<path d="M54.9683 67.3242H49.8784C49.527 67.3242 49.2422 67.6091 49.2422 67.9605C49.2422 68.3118 49.527 68.5967 49.8784 68.5967H54.9683C55.3197 68.5967 55.6046 68.3118 55.6046 67.9605C55.6046 67.6091 55.3197 67.3242 54.9683 67.3242Z" fill="#E9E9E9"/>
+<g filter="url(#error__filter0_d)">
+<path d="M57.4062 74.25C66.8986 74.25 74.5938 66.5549 74.5938 57.0625C74.5938 47.5701 66.8986 39.875 57.4062 39.875C47.9139 39.875 40.2188 47.5701 40.2188 57.0625C40.2188 66.5549 47.9139 74.25 57.4062 74.25Z" fill="black"/>
+</g>
+<path d="M57.4062 74.25C66.8986 74.25 74.5938 66.5549 74.5938 57.0625C74.5938 47.5701 66.8986 39.875 57.4062 39.875C47.9139 39.875 40.2188 47.5701 40.2188 57.0625C40.2188 66.5549 47.9139 74.25 57.4062 74.25Z" fill="#F25252"/>
+<path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M57.4062 34.7188C69.7464 34.7188 79.75 44.7224 79.75 57.0625C79.75 69.4026 69.7464 79.4062 57.4062 79.4062C45.0661 79.4062 35.0625 69.4026 35.0625 57.0625C35.0625 44.7224 45.0661 34.7188 57.4062 34.7188ZM57.2344 37.125C46.3181 37.125 37.4688 45.9744 37.4688 56.8906C37.4688 67.8069 46.3181 76.6562 57.2344 76.6562C68.1506 76.6562 77 67.8069 77 56.8906C77 45.9744 68.1506 37.125 57.2344 37.125Z" fill="#F25252"/>
+<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M57.4062 38.8438C67.4682 38.8438 75.625 47.0006 75.625 57.0625C75.625 67.1244 67.4682 75.2812 57.4062 75.2812C47.3443 75.2812 39.1875 67.1244 39.1875 57.0625C39.1875 47.0006 47.3443 38.8438 57.4062 38.8438ZM57.4062 40.887C48.4728 40.887 41.2307 48.129 41.2307 57.0625C41.2307 65.996 48.4728 73.238 57.4062 73.238C66.3397 73.238 73.5818 65.996 73.5818 57.0625C73.5818 48.129 66.3397 40.887 57.4062 40.887Z" fill="#F25252"/>
+<path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd" d="M57.4062 26.4688C74.3027 26.4688 88 40.166 88 57.0625C88 73.959 74.3027 87.6562 57.4062 87.6562C40.5098 87.6562 26.8125 73.959 26.8125 57.0625C26.8125 40.166 40.5098 26.4688 57.4062 26.4688ZM57.2344 29.9062C42.3313 29.9062 30.25 41.9876 30.25 56.8906C30.25 71.7937 42.3313 83.875 57.2344 83.875C72.1374 83.875 84.2188 71.7937 84.2188 56.8906C84.2188 41.9876 72.1374 29.9062 57.2344 29.9062Z" fill="#F25252"/>
+<path d="M57.4062 71.8438C65.5697 71.8438 72.1875 65.226 72.1875 57.0625C72.1875 48.899 65.5697 42.2812 57.4062 42.2812C49.2428 42.2812 42.625 48.899 42.625 57.0625C42.625 65.226 49.2428 71.8438 57.4062 71.8438Z" fill="#FF6A6A"/>
+<path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd" d="M58.2981 46.4482L75.1804 63.3306L66.066 75.4091H64.0373L56.4551 67.8268L57.4611 64.6492L58.2981 46.4482Z" fill="url(#error__paint0_linear)"/>
+<g filter="url(#error__filter1_d)">
+<path d="M57.4062 68.0625C58.3555 68.0625 59.125 67.293 59.125 66.3438C59.125 65.3945 58.3555 64.625 57.4062 64.625C56.457 64.625 55.6875 65.3945 55.6875 66.3438C55.6875 67.293 56.457 68.0625 57.4062 68.0625Z" fill="black"/>
+</g>
+<path d="M57.4062 68.0625C58.3555 68.0625 59.125 67.293 59.125 66.3438C59.125 65.3945 58.3555 64.625 57.4062 64.625C56.457 64.625 55.6875 65.3945 55.6875 66.3438C55.6875 67.293 56.457 68.0625 57.4062 68.0625Z" fill="white"/>
+<g filter="url(#error__filter2_d)">
+<path d="M57.4062 46.0625C58.3555 46.0625 59.125 46.832 59.125 47.7812V60.1562C59.125 61.1055 58.3555 61.875 57.4062 61.875C56.457 61.875 55.6875 61.1055 55.6875 60.1562V47.7812C55.6875 46.832 56.457 46.0625 57.4062 46.0625Z" fill="black"/>
+</g>
+<path d="M57.4062 46.0625C58.3555 46.0625 59.125 46.832 59.125 47.7812V60.1562C59.125 61.1055 58.3555 61.875 57.4062 61.875C56.457 61.875 55.6875 61.1055 55.6875 60.1562V47.7812C55.6875 46.832 56.457 46.0625 57.4062 46.0625Z" fill="white"/>
+</g>
+<defs>
+<filter id="error__filter0_d" x="36.2188" y="37.875" width="42.375" height="42.375" 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>
+<filter id="error__filter1_d" x="51.6875" y="62.625" width="11.4375" height="11.4375" 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>
+<filter id="error__filter2_d" x="51.6875" y="44.0625" width="11.4375" height="23.8125" 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="error__paint0_linear" x1="68.4379" y1="71.5709" x2="60.1189" y2="58.8006" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="1"/>
+</linearGradient>
+</defs>
+</svg>

package/src/components/DashboardError/styles.ts

@@ -0,0 +1,30 @@
+import {makeStyles} from '@mui/styles';
+
+type ErrorContainerProps = {
+    height?: number;
+};
+
+export const useStyles = makeStyles((theme) => ({
+    errorContainer: ({height}: ErrorContainerProps) => ({
+        height: height ? `${height}px` : 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: 'rgba(0, 0, 0, 0.54)'
+    }),
+    errorIcon: {
+        height: '88px',
+        width: '88px',
+        marginBottom: '20px',
+        paddingTop: '36px'
+    },
+    refreshButton: {
+        color: theme.palette.primary.main,
+        marginTop: '10px'
+    },
+    refreshIcon: {
+        width: '24px',
+        height: '24px'
+    }
+}));

package/src/components/DashboardLayout/DashboardLayout.tsx

@@ -0,0 +1,59 @@
+import React, {memo} from 'react';
+import {ReltioGridLayoutItem} from '@reltio/mdm-sdk';
+import {ReltioGridLayout} from '@reltio/components';
+import {DashboardView} from '../../types';
+import {DashboardLayoutItem} from '../DashboardLayoutItem/DashboardLayoutItem';
+import {DashboardLayoutPanel} from '../DashboardLayoutPanel/DashboardLayoutPanel';
+import {useStyles} from './styles';
+
+type DashboardLayoutProps = {
+    views: DashboardView[];
+    layout?: ReltioGridLayoutItem[];
+    onLayoutChanged: (layout: ReltioGridLayoutItem[]) => void;
+    openConfigPanel?: boolean;
+    onCloseConfigPanel: () => void;
+    onRemove: (id: string) => void;
+    onAdd: (id: string) => void;
+};
+
+const DashboardLayout = ({
+    views,
+    layout,
+    onLayoutChanged,
+    openConfigPanel = false,
+    onCloseConfigPanel,
+    onRemove,
+    onAdd
+}: DashboardLayoutProps) => {
+    const styles = useStyles();
+
+    return (
+        <div className={styles.pageWrapper} data-reltio-id="reltio-dashboard-layout">
+            <div className={styles.content}>
+                <div className={styles.mainPanel} data-reltio-id="reltio-dashboard-grid">
+                    <ReltioGridLayout
+                        LayoutItem={DashboardLayoutItem}
+                        views={views}
+                        layout={layout}
+                        onLayoutChanged={onLayoutChanged}
+                        onRemove={onRemove}
+                        draggableHandle=".viewDraggableHandle"
+                    />
+                </div>
+                {openConfigPanel && (
+                    <div className={styles.rightPanel}>
+                        <DashboardLayoutPanel
+                            views={views}
+                            layout={layout}
+                            onAdd={onAdd}
+                            onRemove={onRemove}
+                            onClose={onCloseConfigPanel}
+                        />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default memo(DashboardLayout);

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+import {ViewStatus} from '../../../types';
+import DashboardLayout from '../DashboardLayout';
+import DashboardConfigItem from '../../DashboardConfigItem/DashboardConfigItem';
+import {ReltioGridLayout} from '@reltio/components';
+import * as reactRedux from 'react-redux';
+
+describe('DashboardLayout tests', () => {
+    const onLayoutChangedSpy = jest.fn();
+    const onAddSpy = jest.fn();
+    const onRemoveSpy = jest.fn();
+    const defaultProps = {
+        views: [
+            {config: {id: 'view1', title: 'title1', component: 'Component'}, status: ViewStatus.PERSISTED},
+            {config: {id: 'view2', title: 'title2', component: 'Component'}, status: ViewStatus.PERSISTED},
+            {config: {id: 'view3', title: 'title3', component: 'Component'}, status: ViewStatus.PERSISTED}
+        ],
+        layout: [
+            {id: 'view1', height: 1, x: 0, y: 0, width: 1},
+            {id: 'view2', height: 1, x: 0, y: 1, width: 1}
+        ],
+        openConfigPanel: false,
+        onLayoutChanged: onLayoutChangedSpy,
+        onAdd: onAddSpy,
+        onRemove: onRemoveSpy,
+        onCloseConfigPanel: jest.fn()
+    };
+
+    it('should render DashboardLayout', () => {
+        const wrapper = shallow(<DashboardLayout {...defaultProps} />);
+        const grid = wrapper.find(ReltioGridLayout);
+        expect(grid.length).toBe(1);
+        expect(grid.prop('views')).toEqual(defaultProps.views);
+    });
+
+    it('should render configuration panel if openConfigPanel is true', () => {
+        const wrapper = shallow(<DashboardLayout {...defaultProps} />);
+        expect(wrapper.find('DashboardLayoutPanel')).toHaveLength(0);
+        wrapper.setProps({openConfigPanel: true});
+        expect(wrapper.find('DashboardLayoutPanel')).toHaveLength(1);
+    });
+
+    it('should proper adding and removing a view', () => {
+        jest.spyOn(reactRedux, 'useSelector').mockImplementation((selector) => selector({}));
+
+        const wrapper = mount(<DashboardLayout {...defaultProps} />);
+        wrapper.setProps({openConfigPanel: true});
+        wrapper.find(DashboardConfigItem).at(2).find('BasicView').simulate('mouseenter');
+        wrapper.find(DashboardConfigItem).at(2).find('button').simulate('click');
+        expect(onAddSpy).toHaveBeenCalledWith(defaultProps.views[2].config.id);
+        wrapper.find(DashboardConfigItem).at(1).find('BasicView').simulate('mouseenter');
+        wrapper.find(DashboardConfigItem).at(1).find('button').simulate('click');
+        expect(onRemoveSpy).toHaveBeenCalledWith(defaultProps.views[1].config.id);
+    });
+});

package/src/components/DashboardLayout/styles.ts

@@ -0,0 +1,30 @@
+import {makeStyles} from '@mui/styles';
+
+const configWidth = 490;
+
+export const useStyles = makeStyles({
+    pageWrapper: {
+        height: '100%',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    content: {
+        display: 'flex',
+        overflow: 'hidden',
+        height: '100%'
+    },
+    rightPanel: {
+        overflowY: 'auto',
+        backgroundColor: '#FFF',
+        borderLeft: 'solid 1px rgba(0, 0, 0, 0.12)',
+        width: `${configWidth}px`,
+        minWidth: `${configWidth}px`,
+        maxWidth: `${configWidth}px`
+    },
+    mainPanel: {
+        flex: '1 1 auto',
+        overflow: 'auto',
+        backgroundColor: '#F9F9F9'
+    }
+});

package/src/components/DashboardLayoutItem/DashboardLayoutItem.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import classnames from 'classnames';
+import ViewsFactory from '../../views/ViewsFactory';
+import {ReactGridLayoutItem} from '@reltio/components';
+import {useSelector} from 'react-redux';
+import {DashboardView, ViewStatus} from '../../types';
+import mdmModule from '@reltio/mdm-module';
+import {useStyles} from './styles';
+
+type Props = {
+    className?: string;
+    isFullscreen: boolean;
+    style: React.CSSProperties;
+    onRemove: (id: string) => void;
+    onToggleFullscreen: (id: string) => void;
+    views: DashboardView[];
+    layoutItemConfig: ReactGridLayoutItem;
+    children: React.ReactNode;
+};
+
+export const DashboardLayoutItem = ({
+    layoutItemConfig,
+    views,
+    onToggleFullscreen,
+    onRemove,
+    isFullscreen,
+    children: ResizeComponent,
+    className,
+    ...props
+}: Props) => {
+    const styles = useStyles();
+    const view = views.find(({config}) => layoutItemConfig.i === config.id);
+    const isWorkflowEnabled = useSelector(mdmModule.selectors.isWorkflowEnabled);
+    if (!view) {
+        return null;
+    }
+    const {config, status} = view;
+    const isUpdated = status === ViewStatus.UPDATED;
+    const isNotificationView = config.component === ViewsFactory.ViewTypes.NotificationInboxFacet;
+    if (isNotificationView && !isWorkflowEnabled) {
+        return null;
+    }
+
+    return (
+        <div data-reltio-id="reltio-dashboard-layout-item" className={classnames(styles.item, className)} {...props}>
+            <div className={styles.overflowContainer}>
+                {ViewsFactory.getComponent({
+                    type: config.component,
+                    config,
+                    onToggleFullscreen,
+                    isUpdated,
+                    isFullscreen,
+                    onRemove
+                })}
+                {ResizeComponent}
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,145 @@
+import React from 'react';
+import {Provider} from 'react-redux';
+import {ViewStatus} from '../../../types';
+import {ChartTypes, getFacets, getTasksForTenant} from '@reltio/mdm-sdk';
+import {render, screen, waitForElementToBeRemoved} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {createTestStore} from '../../../../../../__mocks__/store-utils';
+import ViewsFactory from '../../../views/ViewsFactory';
+import {DashboardLayoutItem} from '../DashboardLayoutItem';
+
+const createInitialState = ({tenant = 'tenant', workflow = {}} = {}) => ({
+    metadata: {
+        [tenant]: {
+            entityTypes: [
+                {
+                    uri: 'configuration/entityTypes/HCP',
+                    label: 'HCP',
+                    attributes: [],
+                    abstract: false,
+                    businessCardAttributeURIs: []
+                }
+            ]
+        }
+    },
+    ui: {
+        newConfig: {
+            properties: {workflow}
+        }
+    },
+    tenant: {id: tenant}
+});
+
+jest.mock('@reltio/mdm-sdk', () => ({
+    ...jest.requireActual<Record<string, unknown>>('@reltio/mdm-sdk'),
+    getFacets: jest.fn(),
+    getTasksForTenant: jest.fn()
+}));
+
+describe('DashboardLayoutItems tests', () => {
+    const config = {
+        id: 'ViewID',
+        component: ViewsFactory.ViewTypes.EntitiesByTypeViewFacet,
+        chartType: ChartTypes.BAR,
+        title: 'Facet'
+    };
+    const views = [{config, status: ViewStatus.PERSISTED}];
+    const layoutItemConfig = {i: 'ViewID', x: 0, y: 0, w: 100, h: 100};
+    const emptyResponse = {data: [], total: 0};
+    const initialProps = {
+        children: <div data-reltio-id="resize-component" />,
+        views,
+        layoutItemConfig,
+        style: {},
+        isFullscreen: false,
+        onRemove: jest.fn(),
+        onToggleFullscreen: jest.fn()
+    };
+
+    beforeAll(() => {
+        (getTasksForTenant as jest.Mock).mockResolvedValue(emptyResponse);
+        (getFacets as jest.Mock).mockResolvedValue(emptyResponse);
+    });
+
+    const setUp = ({initialState = createInitialState(), props = {}} = {}) => {
+        const user = userEvent.setup();
+        const store = createTestStore(initialState);
+        const Providers = ({children}: {children: React.ReactNode}) => <Provider store={store}>{children}</Provider>;
+        return {user, ...render(<DashboardLayoutItem {...initialProps} {...props} />, {wrapper: Providers})};
+    };
+
+    it('should create layout item based on config', async () => {
+        setUp();
+        await waitForElementToBeRemoved(screen.queryByTestId('dashboard-item-loader'));
+        expect(screen.getByText(views[0].config.title)).toBeInTheDocument();
+        expect(screen.getByRole('button')).toBeInTheDocument();
+        expect(screen.queryByText('Updated')).not.toBeInTheDocument();
+        expect(screen.getByTestId('resize-component')).toBeInTheDocument();
+        expect(screen.getByTestId(`layout-item-${views[0].config.id}`)).toBeInTheDocument();
+    });
+
+    it('should not render if view is not found', () => {
+        const props = {views: []};
+        const {container} = setUp({props});
+        expect(container).toBeEmptyDOMElement();
+    });
+
+    it('should pass styles correctly', async () => {
+        const props = {style: {backgroundColor: 'red'}};
+        setUp({props});
+        await waitForElementToBeRemoved(screen.queryByTestId('dashboard-item-loader'));
+        expect(screen.getByTestId('reltio-dashboard-layout-item')).toHaveStyle('backgroundColor: red');
+    });
+
+    it('should pass onRemove prop correctly', async () => {
+        const props = {onRemove: jest.fn()};
+        const {user} = setUp({props});
+        await waitForElementToBeRemoved(screen.queryByTestId('dashboard-item-loader'));
+        await user.click(screen.getByRole('button'));
+        await user.click(screen.getByText('Remove'));
+        expect(props.onRemove).toBeCalledWith(views[0].config.id);
+    });
+
+    it('should pass isFullscreen and onToggleFullscreen prop correctly', async () => {
+        const props = {onToggleFullscreen: jest.fn(), isFullscreen: true};
+        const {user} = setUp({props});
+        await waitForElementToBeRemoved(screen.queryByTestId('dashboard-item-loader'));
+        await user.click(screen.getByRole('button'));
+        await user.click(screen.getByText('Exit fullscreen'));
+        expect(props.onToggleFullscreen).toBeCalledWith(views[0].config.id);
+    });
+
+    it('should pass isUpdated prop correctly', async () => {
+        const props = {views: [{...views[0], status: ViewStatus.UPDATED}]};
+        setUp({props});
+        await waitForElementToBeRemoved(screen.queryByTestId('dashboard-item-loader'));
+        expect(screen.getByText('Updated')).toBeInTheDocument();
+    });
+
+    describe('notifications inbox facet', () => {
+        const config = {
+            id: 'ViewID',
+            title: 'test',
+            component: ViewsFactory.ViewTypes.NotificationInboxFacet,
+            config: 'config'
+        };
+        const props = {views: [{config, status: ViewStatus.PERSISTED}]};
+
+        it('should not render notifications inbox facet if workflow is disabled', () => {
+            const {container} = setUp({props});
+            expect(container).toBeEmptyDOMElement();
+        });
+
+        it('should render notifications inbox facet if workflow is enabled', async () => {
+            const initialState = createInitialState({
+                workflow: {
+                    path: 'newWorkflowPath',
+                    enabled: true
+                }
+            });
+            setUp({props, initialState});
+            await waitForElementToBeRemoved(screen.queryByTestId('dashboard-item-loader'));
+            expect(screen.getByTestId(`layout-item-${config.id}`)).toBeInTheDocument();
+        });
+    });
+});

package/src/components/DashboardLayoutItem/styles.ts

@@ -0,0 +1,10 @@
+import {makeStyles} from '@mui/styles';
+
+export const useStyles = makeStyles((theme) => ({
+    item: theme.basicView,
+    overflowContainer: {
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden'
+    }
+}));