1import React, { useEffect, useRef, useState } from 'react';
2
3import { IconButton } from '@material-ui/core';
4import Menu from '@material-ui/core/Menu';
5import MenuItem from '@material-ui/core/MenuItem';
6import TextField from '@material-ui/core/TextField';
7import { makeStyles, withStyles } from '@material-ui/core/styles';
8import { darken } from '@material-ui/core/styles/colorManipulator';
9import CheckIcon from '@material-ui/icons/Check';
10import SettingsIcon from '@material-ui/icons/Settings';
11
12import { Color } from '../../../gqlTypes';
13import {
14 ListLabelsDocument,
15 useListLabelsQuery,
16} from '../../list/ListLabels.generated';
17import { BugFragment } from '../Bug.generated';
18import { GetBugDocument } from '../BugQuery.generated';
19
20import { useSetLabelMutation } from './SetLabel.generated';
21
22type DropdownTuple = [string, string, Color];
23
24type FilterDropdownProps = {
25 children: React.ReactNode;
26 dropdown: DropdownTuple[];
27 hasFilter?: boolean;
28 itemActive: (key: string) => boolean;
29 onClose: () => void;
30 toggleLabel: (key: string, active: boolean) => void;
31 onNewItem: (name: string) => void;
32} & React.ButtonHTMLAttributes<HTMLButtonElement>;
33
34const CustomTextField = withStyles((theme) => ({
35 root: {
36 margin: '0 8px 12px 8px',
37 '& label.Mui-focused': {
38 margin: '0 2px',
39 color: theme.palette.text.secondary,
40 },
41 '& .MuiInput-underline::before': {
42 borderBottomColor: theme.palette.divider,
43 },
44 '& .MuiInput-underline::after': {
45 borderBottomColor: theme.palette.divider,
46 },
47 },
48}))(TextField);
49
50const ITEM_HEIGHT = 48;
51
52const useStyles = makeStyles((theme) => ({
53 gearBtn: {
54 ...theme.typography.body2,
55 color: theme.palette.text.secondary,
56 padding: theme.spacing(0, 1),
57 fontWeight: 400,
58 textDecoration: 'none',
59 display: 'flex',
60 background: 'none',
61 border: 'none',
62 },
63 menu: {
64 '& .MuiMenu-paper': {
65 //somehow using "width" won't override the default width...
66 minWidth: '35ch',
67 },
68 },
69 labelcolor: {
70 minWidth: '0.5rem',
71 display: 'flex',
72 borderRadius: '0.25rem',
73 marginRight: '5px',
74 marginLeft: '3px',
75 },
76 labelsheader: {
77 display: 'flex',
78 flexDirection: 'row',
79 },
80 menuRow: {
81 display: 'flex',
82 alignItems: 'initial',
83 },
84}));
85
86const _rgb = (color: Color) =>
87 'rgb(' + color.R + ',' + color.G + ',' + color.B + ')';
88
89// Create a style object from the label RGB colors
90const createStyle = (color: Color) => ({
91 backgroundColor: _rgb(color),
92 borderBottomColor: darken(_rgb(color), 0.2),
93});
94
95function FilterDropdown({
96 children,
97 dropdown,
98 hasFilter,
99 itemActive,
100 onClose,
101 toggleLabel,
102 onNewItem,
103}: FilterDropdownProps) {
104 const [open, setOpen] = useState(false);
105 const [filter, setFilter] = useState<string>('');
106 const buttonRef = useRef<HTMLButtonElement>(null);
107 const searchRef = useRef<HTMLButtonElement>(null);
108 const classes = useStyles({ active: false });
109
110 useEffect(() => {
111 searchRef && searchRef.current && searchRef.current.focus();
112 }, [filter]);
113
114 return (
115 <>
116 <div className={classes.labelsheader}>
117 Labels
118 <IconButton
119 ref={buttonRef}
120 onClick={() => setOpen(!open)}
121 className={classes.gearBtn}
122 >
123 <SettingsIcon fontSize={'small'} />
124 </IconButton>
125 </div>
126
127 <Menu
128 className={classes.menu}
129 getContentAnchorEl={null}
130 ref={searchRef}
131 anchorOrigin={{
132 vertical: 'bottom',
133 horizontal: 'left',
134 }}
135 transformOrigin={{
136 vertical: 'top',
137 horizontal: 'left',
138 }}
139 open={open}
140 onClose={() => {
141 setOpen(false);
142 onClose();
143 }}
144 onExited={() => setFilter('')}
145 anchorEl={buttonRef.current}
146 PaperProps={{
147 style: {
148 maxHeight: ITEM_HEIGHT * 4.5,
149 width: '25ch',
150 },
151 }}
152 >
153 {hasFilter && (
154 <CustomTextField
155 onChange={(e) => {
156 const { value } = e.target;
157 setFilter(value);
158 }}
159 onKeyDown={(e) => e.stopPropagation()}
160 value={filter}
161 label={`Filter ${children}`}
162 />
163 )}
164 {filter !== '' &&
165 dropdown.filter((d) => d[1].toLowerCase() === filter.toLowerCase())
166 .length <= 0 && (
167 <MenuItem
168 style={{ whiteSpace: 'normal', wordBreak: 'break-all' }}
169 onClick={() => {
170 onNewItem(filter);
171 setFilter('');
172 setOpen(false);
173 }}
174 >
175 Create new label '{filter}'
176 </MenuItem>
177 )}
178 {dropdown
179 .sort(function (x, y) {
180 // true values first
181 return itemActive(x[1]) === itemActive(y[1]) ? 0 : x ? -1 : 1;
182 })
183 .filter((d) => d[1].toLowerCase().includes(filter.toLowerCase()))
184 .map(([key, value, color]) => (
185 <MenuItem
186 style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}
187 onClick={() => {
188 toggleLabel(key, itemActive(key));
189 }}
190 key={key}
191 selected={itemActive(key)}
192 >
193 <div className={classes.menuRow}>
194 {itemActive(key) && <CheckIcon />}
195 <div
196 className={classes.labelcolor}
197 style={createStyle(color)}
198 />
199 {value}
200 </div>
201 </MenuItem>
202 ))}
203 </Menu>
204 </>
205 );
206}
207
208type Props = {
209 bug: BugFragment;
210};
211function LabelMenu({ bug }: Props) {
212 const { data: labelsData } = useListLabelsQuery();
213 const [bugLabelNames, setBugLabelNames] = useState(
214 bug.labels.map((l) => l.name)
215 );
216 const [selectedLabels, setSelectedLabels] = useState(
217 bug.labels.map((l) => l.name)
218 );
219
220 const [setLabelMutation] = useSetLabelMutation();
221
222 function toggleLabel(key: string, active: boolean) {
223 const labels: string[] = active
224 ? selectedLabels.filter((label) => label !== key)
225 : selectedLabels.concat([key]);
226 setSelectedLabels(labels);
227 }
228
229 function diff(oldState: string[], newState: string[]) {
230 const added = newState.filter((x) => !oldState.includes(x));
231 const removed = oldState.filter((x) => !newState.includes(x));
232 return {
233 added: added,
234 removed: removed,
235 };
236 }
237
238 const changeBugLabels = (selectedLabels: string[]) => {
239 const labels = diff(bugLabelNames, selectedLabels);
240 if (labels.added.length > 0 || labels.removed.length > 0) {
241 setLabelMutation({
242 variables: {
243 input: {
244 prefix: bug.id,
245 added: labels.added,
246 Removed: labels.removed,
247 },
248 },
249 refetchQueries: [
250 // TODO: update the cache instead of refetching
251 {
252 query: GetBugDocument,
253 variables: { id: bug.id },
254 },
255 {
256 query: ListLabelsDocument,
257 },
258 ],
259 awaitRefetchQueries: true,
260 })
261 .then((res) => {
262 setSelectedLabels(selectedLabels);
263 setBugLabelNames(selectedLabels);
264 })
265 .catch((e) => console.log(e));
266 }
267 };
268
269 function isActive(key: string) {
270 return selectedLabels.includes(key);
271 }
272
273 function createNewLabel(name: string) {
274 changeBugLabels(selectedLabels.concat([name]));
275 }
276
277 let labels: any = [];
278 if (
279 labelsData?.repository &&
280 labelsData.repository.validLabels &&
281 labelsData.repository.validLabels.nodes
282 ) {
283 labels = labelsData.repository.validLabels.nodes.map((node) => [
284 node.name,
285 node.name,
286 node.color,
287 ]);
288 }
289
290 return (
291 <FilterDropdown
292 onClose={() => changeBugLabels(selectedLabels)}
293 itemActive={isActive}
294 toggleLabel={toggleLabel}
295 dropdown={labels}
296 onNewItem={createNewLabel}
297 hasFilter
298 >
299 Labels
300 </FilterDropdown>
301 );
302}
303
304export default LabelMenu;