2747955571

Committed 27 Jul 2022 03:59PM UTC coverage: 41.216% (-0.4%) from 41.614%

Build Type

github

Committed by GitHub

Commit Message

Merge 5e82c0b7d into 36f7569bc

Pull Request Pull Request #4035: Customizable Dashboard & Safe widgets POC

Run Details

1756 of 5145 branches covered (34.13%)

Branch coverage included in aggregate %.

0 of 113 new or added lines in 6 files covered. (0.0%)

1 existing line in 1 file now uncovered.

4581 of 10230 relevant lines covered (44.78%)

38.05 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/components/Dashboard/CustomizableDashboard.tsx

1	import { ReactElement, useState } from 'react'
2	import styled from 'styled-components'
3	import SettingsIcon from '@material-ui/icons/Settings'
4	import { IconButton } from '@material-ui/core'
5	import { Responsive, WidthProvider } from 'react-grid-layout'
6	import { Tooltip, Button, Card } from '@gnosis.pm/safe-react-components'
7
NEW 8	const ResponsiveGridLayout = WidthProvider(Responsive)	×
9
10	import { black500, extraLargeFontSize } from 'src/theme/variables'
11	import SafeWidget, { ROW_HEIGHT } from './SafeWidget/SafeWidget'
12	import useSafeWidgets from 'src/logic/hooks/useSafeWidgets'
13
NEW 14	const CustomizableDashboard = (): ReactElement => {	×
NEW 15	const { widgets, updateWidgets } = useSafeWidgets()	×
16
NEW 17	const [isEditMode, setIsEditMode] = useState(false)	×
NEW 18	const [editedWidgets, setEditedWidgets] = useState(widgets)	×
19
NEW 20	const onSaveEditDashboard = () => {	×
NEW 21	updateWidgets(editedWidgets)	×
NEW 22	setIsEditMode(false)	×
23	}
24
NEW 25	const onCancelEditDashboard = () => {	×
NEW 26	setEditedWidgets([...widgets])	×
NEW 27	setIsEditMode(false)	×
28	}
29
NEW 30	const onLayoutChange = (layouts) => {	×
NEW 31	const newWidgets = editedWidgets.map((currentWidget) => {	×
NEW 32	const layout = layouts.find(({ i }) => i === currentWidget.widgetId)	×
NEW 33	return {	×
34	...currentWidget,
35	widgetLayout: {
36	row: layout.y,
37	column: layout.x,
38	width: layout.w,
39	minWidth: layout.minW,
40	maxWidth: layout.maxW,
41	minHeight: layout.minH,
42	height: layout.h,
43	maxHeight: layout.maxH,
44	},
45	}
46	})
47
NEW 48	setEditedWidgets(newWidgets)	×
49	}
50
NEW 51	return (	×
52	<StyledGridContainer>
53	<DashboardHeader>
54	<DashboardTitle>customizable Dashboard POC</DashboardTitle>
55
56	{!isEditMode && (	×
57	<Tooltip placement="top" title="Customize your dashboard!" backgroundColor="primary" textColor="white" arrow>
NEW 58	<StyledIcon onClick={() => setIsEditMode(true)}>	×
59	<SettingsIcon />
60	</StyledIcon>
61	</Tooltip>
62	)}
63	</DashboardHeader>
64	{isEditMode && (	×
65	<>
66	<WidgetCatalog>Widget Catalog</WidgetCatalog>
67	<StyledBtn size={'md'} onClick={onSaveEditDashboard}>
68	Save
69	</StyledBtn>
70	<StyledBtn color={'secondary'} variant="bordered" size={'md'} onClick={onCancelEditDashboard}>
71	Cancel
72	</StyledBtn>
73	</>
74	)}
75	<ResponsiveGridLayout
76	breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
77	cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
78	onLayoutChange={onLayoutChange}
79	key={isEditMode}
80	rowHeight={ROW_HEIGHT}
81	compactType={null}
82	layouts={{
NEW 83	lg: widgets.map((widget) => ({	×
84	i: widget.widgetId,
85	x: widget.widgetLayout.column,
86	y: widget.widgetLayout.row,
87	minW: widget.widgetLayout.minWidth,
88	w: widget.widgetLayout.width,
89	maxW: widget.widgetLayout.maxWidth,
90	minH: widget.widgetLayout.minHeight,
91	h: widget.widgetLayout.height,
92	maxH: widget.widgetLayout.maxHeight,
93	})),
94	}}
95	isDraggable={isEditMode}
96	isResizable={isEditMode}
97	>
98	{widgets.map((widget) => {
NEW 99	return (	×
100	<div key={widget.widgetId}>
101	<SafeWidget widget={widget} isEditWidgetEnabled={isEditMode} />
102	</div>
103	)
104	})}
105	</ResponsiveGridLayout>
106	</StyledGridContainer>
107	)
108	}
109
110	export default CustomizableDashboard
111
NEW 112	const StyledGridContainer = styled.div`	×
113	max-width: 1300px;
114	margin: 0 auto;
115	`
116
NEW 117	const DashboardHeader = styled.div`	×
118	display: flex;
119	justify-content: space-between;
120	padding-right: 12px;
121	`
122
NEW 123	const StyledIcon = styled(IconButton)`	×
124	height: 42px;
125	width: 42px;
126	`
127
NEW 128	export const DashboardTitle = styled.h1`	×
129	color: ${black500};
130	font-size: ${extraLargeFontSize};
131	`
132
NEW 133	const WidgetCatalog = styled(Card)`	×
134	margin: 8px;
135	`
136
NEW 137	const StyledBtn = styled(Button)`	×
138	margin-left: 8px;
139	`

safe-global / safe-react / 2747955571

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous