From d39e6c4c4391c1a3cd96f791b47d66b043da7f51 Mon Sep 17 00:00:00 2001 From: Tim Becker Date: Wed, 24 Mar 2021 23:26:14 +0100 Subject: Add label menu to bug detail page Also support label color in label filter menu on bug list page --- webui/src/pages/bug/labels/LabelMenu.tsx | 356 ++++++++++++++++++++++++++++ webui/src/pages/bug/labels/SetLabel.graphql | 13 + 2 files changed, 369 insertions(+) create mode 100644 webui/src/pages/bug/labels/LabelMenu.tsx create mode 100644 webui/src/pages/bug/labels/SetLabel.graphql (limited to 'webui/src/pages/bug/labels') diff --git a/webui/src/pages/bug/labels/LabelMenu.tsx b/webui/src/pages/bug/labels/LabelMenu.tsx new file mode 100644 index 00000000..8213d15b --- /dev/null +++ b/webui/src/pages/bug/labels/LabelMenu.tsx @@ -0,0 +1,356 @@ +import React, { useEffect, useRef, useState } from 'react'; + +import { IconButton } from '@material-ui/core'; +import Menu from '@material-ui/core/Menu'; +import MenuItem from '@material-ui/core/MenuItem'; +import { SvgIconProps } from '@material-ui/core/SvgIcon'; +import TextField from '@material-ui/core/TextField'; +import { makeStyles, withStyles } from '@material-ui/core/styles'; +import { darken } from '@material-ui/core/styles/colorManipulator'; +import CheckIcon from '@material-ui/icons/Check'; +import SettingsIcon from '@material-ui/icons/Settings'; + +import { Color } from '../../../gqlTypes'; +import { + ListLabelsDocument, + useListLabelsQuery, +} from '../../list/ListLabels.generated'; +import { BugFragment } from '../Bug.generated'; +import { GetBugDocument } from '../BugQuery.generated'; + +import { useSetLabelMutation } from './SetLabel.generated'; + +type DropdownTuple = [string, string, Color]; + +type FilterDropdownProps = { + children: React.ReactNode; + dropdown: DropdownTuple[]; + icon?: React.ComponentType; + hasFilter?: boolean; + itemActive: (key: string) => boolean; + onClose: () => void; + toggleLabel: (key: string, active: boolean) => void; + onNewItem: (name: string) => void; +} & React.ButtonHTMLAttributes; + +const CustomTextField = withStyles((theme) => ({ + root: { + margin: '0 8px 12px 8px', + '& label.Mui-focused': { + margin: '0 2px', + color: theme.palette.text.secondary, + }, + '& .MuiInput-underline::before': { + borderBottomColor: theme.palette.divider, + }, + '& .MuiInput-underline::after': { + borderBottomColor: theme.palette.divider, + }, + }, +}))(TextField); + +const ITEM_HEIGHT = 48; + +const useStyles = makeStyles((theme) => ({ + element: { + ...theme.typography.body2, + color: theme.palette.text.secondary, + padding: theme.spacing(0, 1), + fontWeight: 400, + textDecoration: 'none', + display: 'flex', + background: 'none', + border: 'none', + }, + itemActive: { + fontWeight: 600, + color: theme.palette.text.primary, + }, + icon: { + paddingRight: theme.spacing(0.5), + }, + labelcolor: { + width: '15px', + height: '15px', + display: 'flex', + backgroundColor: 'blue', + borderRadius: '0.25rem', + marginRight: '5px', + marginLeft: '3px', + }, + labelsheader: { + display: 'flex', + flexDirection: 'row', + }, + menuRow: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + flexWrap: 'wrap', + }, +})); + +const _rgb = (color: Color) => + 'rgb(' + color.R + ',' + color.G + ',' + color.B + ')'; + +// Create a style object from the label RGB colors +const createStyle = (color: Color) => ({ + backgroundColor: _rgb(color), + borderBottomColor: darken(_rgb(color), 0.2), +}); + +function FilterDropdown({ + children, + dropdown, + icon: Icon, + hasFilter, + itemActive, + onClose, + toggleLabel, + onNewItem, +}: FilterDropdownProps) { + const [open, setOpen] = useState(false); + const [filter, setFilter] = useState(''); + const buttonRef = useRef(null); + const searchRef = useRef(null); + const classes = useStyles({ active: false }); + + useEffect(() => { + searchRef && searchRef.current && searchRef.current.focus(); + }, [filter]); + + return ( + <> +
+ Labels + setOpen(!open)} + className={classes.element} + > + + +
+ + { + setOpen(false); + onClose(); + }} + onExited={() => setFilter('')} + anchorEl={buttonRef.current} + PaperProps={{ + style: { + maxHeight: ITEM_HEIGHT * 4.5, + width: '25ch', + }, + }} + > + {hasFilter && ( + { + const { value } = e.target; + setFilter(value); + }} + onKeyDown={(e) => e.stopPropagation()} + value={filter} + label={`Filter ${children}`} + /> + )} + {dropdown + .sort(function (x, y) { + // true values first + return itemActive(x[1]) === itemActive(y[1]) ? 0 : x ? -1 : 1; + }) + .filter((d) => d[1].toLowerCase().includes(filter.toLowerCase())) + .map(([key, value, color]) => ( + { + toggleLabel(key, itemActive(key)); + }} + key={key} + className={itemActive(key) ? classes.itemActive : undefined} + > +
+ {itemActive(key) ? : null} +
+ {value} +
+ + ))} + {filter !== '' && + dropdown.filter((d) => d[1].toLowerCase() === filter.toLowerCase()) + .length <= 0 && ( + { + onNewItem(filter); + setFilter(''); + setOpen(false); + }} + > + Create new label '{filter}' + + )} +
+ + ); +} + +type Props = { + bug: BugFragment; +}; +function LabelMenu({ bug }: Props) { + const { data: labelsData } = useListLabelsQuery(); + const [bugLabelNames, setBugLabelNames] = useState( + bug.labels.map((l) => l.name) + ); + const [selectedLabels, setSelectedLabels] = useState( + bug.labels.map((l) => l.name) + ); + + const [setLabelMutation] = useSetLabelMutation(); + + useEffect(() => {}); + function toggleLabel(key: string, active: boolean) { + const labels: string[] = active + ? selectedLabels.filter((label) => label !== key) + : selectedLabels.concat([key]); + setSelectedLabels(labels); + console.log('toggle (selected)'); + console.log(labels); + } + + function diff(oldState: string[], newState: string[]) { + console.log('oldState / Buglabels'); + console.log(oldState); + console.log('newState / Selected'); + console.log(newState); + const added = newState.filter((x) => !oldState.includes(x)); + const removed = oldState.filter((x) => !newState.includes(x)); + return { + added: added, + removed: removed, + }; + } + + const changeBugLabels = ( + bugLabels = bug.labels.map((l) => l.name), + selectedLabel = selectedLabels + ) => { + const labels = diff(bugLabels, selectedLabel); + console.log('changeBugLabels'); + console.log(labels); + console.log('bugLabelNames'); + console.log(bugLabelNames); + if (labels.added.length > 0 || labels.removed.length > 0) { + setLabelMutation({ + variables: { + input: { + prefix: bug.id, + added: labels.added, + Removed: labels.removed, + }, + }, + refetchQueries: [ + // TODO: update the cache instead of refetching + { + query: GetBugDocument, + variables: { id: bug.id }, + }, + { + query: ListLabelsDocument, + }, + ], + awaitRefetchQueries: true, + }) + .then((res) => { + console.log(res); + setBugLabelNames(selectedLabels); + }) + .catch((e) => console.log(e)); + } + }; + + function isActive(key: string) { + return selectedLabels.includes(key); + } + + function createNewLabel(name: string) { + console.log('CREATE NEW LABEL'); + setLabelMutation({ + variables: { + input: { + prefix: bug.id, + added: [name], + }, + }, + refetchQueries: [ + // TODO: update the cache instead of refetching + { + query: GetBugDocument, + variables: { id: bug.id }, + }, + { + query: ListLabelsDocument, + }, + ], + awaitRefetchQueries: true, + }) + .then((res) => { + console.log(res); + + const tmp = selectedLabels.concat([name]); + console.log(tmp); + console.log('tmp'); + setSelectedLabels(tmp); + setBugLabelNames(bugLabelNames.concat([name])); + + changeBugLabels(bugLabelNames.concat([name]), tmp); + }) + .catch((e) => console.log('createnewLabelError' + e)); + } + + let labels: any = []; + if ( + labelsData?.repository && + labelsData.repository.validLabels && + labelsData.repository.validLabels.nodes + ) { + labels = labelsData.repository.validLabels.nodes.map((node) => [ + node.name, + node.name, + node.color, + ]); + } + + return ( + + Labels + + ); +} + +export default LabelMenu; diff --git a/webui/src/pages/bug/labels/SetLabel.graphql b/webui/src/pages/bug/labels/SetLabel.graphql new file mode 100644 index 00000000..44dfae11 --- /dev/null +++ b/webui/src/pages/bug/labels/SetLabel.graphql @@ -0,0 +1,13 @@ +mutation SetLabel($input: ChangeLabelInput) { + changeLabels(input: $input) { + results{ + status, + label{ + name, + color{R}, + color{G}, + color{B} + } + } + } +} -- cgit From 41418c912d5521708e5f3fbdea2415a5e95c72c0 Mon Sep 17 00:00:00 2001 From: Sascha Date: Tue, 30 Mar 2021 10:22:10 +0200 Subject: Let CreateNewLabel-Btn appear as first element in list --- webui/src/pages/bug/labels/LabelMenu.tsx | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'webui/src/pages/bug/labels') diff --git a/webui/src/pages/bug/labels/LabelMenu.tsx b/webui/src/pages/bug/labels/LabelMenu.tsx index 8213d15b..2422e865 100644 --- a/webui/src/pages/bug/labels/LabelMenu.tsx +++ b/webui/src/pages/bug/labels/LabelMenu.tsx @@ -168,6 +168,20 @@ function FilterDropdown({ label={`Filter ${children}`} /> )} + {filter !== '' && + dropdown.filter((d) => d[1].toLowerCase() === filter.toLowerCase()) + .length <= 0 && ( + { + onNewItem(filter); + setFilter(''); + setOpen(false); + }} + > + Create new label '{filter}' + + )} {dropdown .sort(function (x, y) { // true values first @@ -193,20 +207,6 @@ function FilterDropdown({ ))} - {filter !== '' && - dropdown.filter((d) => d[1].toLowerCase() === filter.toLowerCase()) - .length <= 0 && ( - { - onNewItem(filter); - setFilter(''); - setOpen(false); - }} - > - Create new label '{filter}' - - )} ); -- cgit From 9b2cf1ba32c4760e4febe3ad2a6d7af7661b23d9 Mon Sep 17 00:00:00 2001 From: Sascha Date: Tue, 30 Mar 2021 11:45:26 +0200 Subject: Add/Remove from filtering while creating new label works --- webui/src/pages/bug/labels/LabelMenu.tsx | 58 +++++++------------------------- 1 file changed, 12 insertions(+), 46 deletions(-) (limited to 'webui/src/pages/bug/labels') diff --git a/webui/src/pages/bug/labels/LabelMenu.tsx b/webui/src/pages/bug/labels/LabelMenu.tsx index 2422e865..3551ecd6 100644 --- a/webui/src/pages/bug/labels/LabelMenu.tsx +++ b/webui/src/pages/bug/labels/LabelMenu.tsx @@ -226,7 +226,6 @@ function LabelMenu({ bug }: Props) { const [setLabelMutation] = useSetLabelMutation(); - useEffect(() => {}); function toggleLabel(key: string, active: boolean) { const labels: string[] = active ? selectedLabels.filter((label) => label !== key) @@ -237,10 +236,6 @@ function LabelMenu({ bug }: Props) { } function diff(oldState: string[], newState: string[]) { - console.log('oldState / Buglabels'); - console.log(oldState); - console.log('newState / Selected'); - console.log(newState); const added = newState.filter((x) => !oldState.includes(x)); const removed = oldState.filter((x) => !newState.includes(x)); return { @@ -249,15 +244,14 @@ function LabelMenu({ bug }: Props) { }; } - const changeBugLabels = ( - bugLabels = bug.labels.map((l) => l.name), - selectedLabel = selectedLabels - ) => { - const labels = diff(bugLabels, selectedLabel); - console.log('changeBugLabels'); - console.log(labels); - console.log('bugLabelNames'); + const changeBugLabels = (selectedLabels: string[]) => { + console.log('CBL'); + console.log('selected labels'); + console.log(selectedLabels); + console.log('buglabels'); console.log(bugLabelNames); + const labels = diff(bugLabelNames, selectedLabels); + console.log(labels); if (labels.added.length > 0 || labels.removed.length > 0) { setLabelMutation({ variables: { @@ -281,6 +275,7 @@ function LabelMenu({ bug }: Props) { }) .then((res) => { console.log(res); + setSelectedLabels(selectedLabels); setBugLabelNames(selectedLabels); }) .catch((e) => console.log(e)); @@ -291,39 +286,10 @@ function LabelMenu({ bug }: Props) { return selectedLabels.includes(key); } + //TODO label wont removed, if a filter hides it! function createNewLabel(name: string) { - console.log('CREATE NEW LABEL'); - setLabelMutation({ - variables: { - input: { - prefix: bug.id, - added: [name], - }, - }, - refetchQueries: [ - // TODO: update the cache instead of refetching - { - query: GetBugDocument, - variables: { id: bug.id }, - }, - { - query: ListLabelsDocument, - }, - ], - awaitRefetchQueries: true, - }) - .then((res) => { - console.log(res); - - const tmp = selectedLabels.concat([name]); - console.log(tmp); - console.log('tmp'); - setSelectedLabels(tmp); - setBugLabelNames(bugLabelNames.concat([name])); - - changeBugLabels(bugLabelNames.concat([name]), tmp); - }) - .catch((e) => console.log('createnewLabelError' + e)); + console.log('CREATE NEW LABEL: ' + name); + changeBugLabels(selectedLabels.concat([name])); } let labels: any = []; @@ -341,7 +307,7 @@ function LabelMenu({ bug }: Props) { return ( changeBugLabels(selectedLabels)} itemActive={isActive} toggleLabel={toggleLabel} dropdown={labels} -- cgit From 4517de919ac82d9eb00230003cbe59a24d4c8f2e Mon Sep 17 00:00:00 2001 From: Sascha Date: Tue, 30 Mar 2021 13:48:49 +0200 Subject: LabelMenu prefer break-on-word-boundary --- webui/src/pages/bug/labels/LabelMenu.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) (limited to 'webui/src/pages/bug/labels') diff --git a/webui/src/pages/bug/labels/LabelMenu.tsx b/webui/src/pages/bug/labels/LabelMenu.tsx index 3551ecd6..5a70bd8a 100644 --- a/webui/src/pages/bug/labels/LabelMenu.tsx +++ b/webui/src/pages/bug/labels/LabelMenu.tsx @@ -3,7 +3,6 @@ import React, { useEffect, useRef, useState } from 'react'; import { IconButton } from '@material-ui/core'; import Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem'; -import { SvgIconProps } from '@material-ui/core/SvgIcon'; import TextField from '@material-ui/core/TextField'; import { makeStyles, withStyles } from '@material-ui/core/styles'; import { darken } from '@material-ui/core/styles/colorManipulator'; @@ -25,7 +24,6 @@ type DropdownTuple = [string, string, Color]; type FilterDropdownProps = { children: React.ReactNode; dropdown: DropdownTuple[]; - icon?: React.ComponentType; hasFilter?: boolean; itemActive: (key: string) => boolean; onClose: () => void; @@ -62,13 +60,13 @@ const useStyles = makeStyles((theme) => ({ background: 'none', border: 'none', }, + menu: { + witdh: 'auto', + }, itemActive: { fontWeight: 600, color: theme.palette.text.primary, }, - icon: { - paddingRight: theme.spacing(0.5), - }, labelcolor: { width: '15px', height: '15px', @@ -102,7 +100,6 @@ const createStyle = (color: Color) => ({ function FilterDropdown({ children, dropdown, - icon: Icon, hasFilter, itemActive, onClose, @@ -133,6 +130,7 @@ function FilterDropdown({ d[1].toLowerCase().includes(filter.toLowerCase())) .map(([key, value, color]) => ( { toggleLabel(key, itemActive(key)); }} -- cgit From f5df854def95e35e6fc2b408ecf746dcc0a8d38a Mon Sep 17 00:00:00 2001 From: Sascha Date: Tue, 30 Mar 2021 15:51:36 +0200 Subject: Some changes to the label menu - Increase width of label menu - Use default selection styling instead of bold text - Use rem unit for labelcolor - Remove some tenary operator usage --- webui/src/pages/bug/labels/LabelMenu.tsx | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) (limited to 'webui/src/pages/bug/labels') diff --git a/webui/src/pages/bug/labels/LabelMenu.tsx b/webui/src/pages/bug/labels/LabelMenu.tsx index 5a70bd8a..01be11d8 100644 --- a/webui/src/pages/bug/labels/LabelMenu.tsx +++ b/webui/src/pages/bug/labels/LabelMenu.tsx @@ -50,7 +50,7 @@ const CustomTextField = withStyles((theme) => ({ const ITEM_HEIGHT = 48; const useStyles = makeStyles((theme) => ({ - element: { + gearBtn: { ...theme.typography.body2, color: theme.palette.text.secondary, padding: theme.spacing(0, 1), @@ -61,15 +61,14 @@ const useStyles = makeStyles((theme) => ({ border: 'none', }, menu: { - witdh: 'auto', - }, - itemActive: { - fontWeight: 600, - color: theme.palette.text.primary, + '& .MuiMenu-paper': { + //somehow using "width" won't override the default width... + minWidth: '35ch', + }, }, labelcolor: { - width: '15px', - height: '15px', + minWidth: '1rem', + minHeight: '1rem', display: 'flex', backgroundColor: 'blue', borderRadius: '0.25rem', @@ -82,7 +81,6 @@ const useStyles = makeStyles((theme) => ({ }, menuRow: { display: 'flex', - flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', }, @@ -123,7 +121,7 @@ function FilterDropdown({ setOpen(!open)} - className={classes.element} + className={classes.gearBtn} > @@ -193,10 +191,10 @@ function FilterDropdown({ toggleLabel(key, itemActive(key)); }} key={key} - className={itemActive(key) ? classes.itemActive : undefined} + selected={itemActive(key)} >
- {itemActive(key) ? : null} + {itemActive(key) && }
Date: Tue, 30 Mar 2021 17:02:15 +0200 Subject: Increase width of list/labelmenu and stretch color for menuitems --- webui/src/pages/bug/labels/LabelMenu.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) (limited to 'webui/src/pages/bug/labels') diff --git a/webui/src/pages/bug/labels/LabelMenu.tsx b/webui/src/pages/bug/labels/LabelMenu.tsx index 01be11d8..88347316 100644 --- a/webui/src/pages/bug/labels/LabelMenu.tsx +++ b/webui/src/pages/bug/labels/LabelMenu.tsx @@ -67,10 +67,8 @@ const useStyles = makeStyles((theme) => ({ }, }, labelcolor: { - minWidth: '1rem', - minHeight: '1rem', + minWidth: '0.5rem', display: 'flex', - backgroundColor: 'blue', borderRadius: '0.25rem', marginRight: '5px', marginLeft: '3px', @@ -81,8 +79,7 @@ const useStyles = makeStyles((theme) => ({ }, menuRow: { display: 'flex', - alignItems: 'center', - flexWrap: 'wrap', + alignItems: 'initial', }, })); @@ -194,7 +191,7 @@ function FilterDropdown({ selected={itemActive(key)} >
- {itemActive(key) && } + {itemActive(key) && }
Date: Tue, 30 Mar 2021 17:05:12 +0200 Subject: Remove console.logs --- webui/src/pages/bug/labels/FilterDropdown.tsx | 144 ++++++++++++++++++++++++++ webui/src/pages/bug/labels/LabelMenu.tsx | 11 -- 2 files changed, 144 insertions(+), 11 deletions(-) create mode 100644 webui/src/pages/bug/labels/FilterDropdown.tsx (limited to 'webui/src/pages/bug/labels') diff --git a/webui/src/pages/bug/labels/FilterDropdown.tsx b/webui/src/pages/bug/labels/FilterDropdown.tsx new file mode 100644 index 00000000..44874aaf --- /dev/null +++ b/webui/src/pages/bug/labels/FilterDropdown.tsx @@ -0,0 +1,144 @@ +import React, { useEffect, useRef, useState } from 'react'; + +import { IconButton, MenuItem } from '@material-ui/core'; +import Menu from '@material-ui/core/Menu'; +import TextField from '@material-ui/core/TextField'; +import { makeStyles, withStyles } from '@material-ui/core/styles'; +import SettingsIcon from '@material-ui/icons/Settings'; + +const CustomTextField = withStyles((theme) => ({ + root: { + margin: '0 8px 12px 8px', + '& label.Mui-focused': { + margin: '0 2px', + color: theme.palette.text.secondary, + }, + '& .MuiInput-underline::before': { + borderBottomColor: theme.palette.divider, + }, + '& .MuiInput-underline::after': { + borderBottomColor: theme.palette.divider, + }, + }, +}))(TextField); + +const ITEM_HEIGHT = 48; + +const useStyles = makeStyles((theme) => ({ + element: { + ...theme.typography.body2, + color: theme.palette.text.secondary, + padding: theme.spacing(0, 1), + fontWeight: 400, + textDecoration: 'none', + display: 'flex', + background: 'none', + border: 'none', + }, + labelsheader: { + display: 'flex', + flexDirection: 'row', + }, +})); + +export type FilterMenuItem = { + render: (item: T) => React.ReactNode; +}; + +type FilterDropdownProps = { + items?: FilterMenuItem[]; + hasFilter?: boolean; + onFilterChange: (filter: string) => void; +} & React.ButtonHTMLAttributes; + +function FilterDropdown({ + items, + hasFilter, + onFilterChange, +}: FilterDropdownProps) { + const buttonRef = useRef(null); + const searchRef = useRef(null); + const classes = useStyles({ active: false }); + + const [open, setOpen] = useState(false); + const [filter, setFilter] = useState(''); + + useEffect(() => { + searchRef && searchRef.current && searchRef.current.focus(); + }, [filter]); + + /*function sortBySelection(x: FilterMenuItem, y: FilterMenuItem) { + if (x.isSelected() === y.isSelected()) { + return 0; + } else if (x.isSelected()) { + return -1; + } else { + return 1; + } + } + + const sortedItems = items.sort(sortBySelection);*/ + + return ( + <> +
+ Labels + setOpen(!open)} + className={classes.element} + > + + +
+ + { + setOpen(false); + //const selectedLabels = dropdown + // .map(([key]) => (itemActive(key) ? key : '')) + // .filter((entry) => entry !== ''); + //onClose(selectedLabels); + }} + onExited={() => setFilter('')} + anchorEl={buttonRef.current} + PaperProps={{ + style: { + maxHeight: ITEM_HEIGHT * 4.5, + width: '25ch', + }, + }} + > + {hasFilter && ( + { + const { value } = e.target; + setFilter(value); + onFilterChange(value); + }} + onKeyDown={(e) => e.stopPropagation()} + value={filter} + label={`Filter Labels`} + /> + )} + {items && + items.map((item, index) => { + return {item}; + })} + + + ); +} + +export default FilterDropdown; diff --git a/webui/src/pages/bug/labels/LabelMenu.tsx b/webui/src/pages/bug/labels/LabelMenu.tsx index 88347316..5c5a3ae9 100644 --- a/webui/src/pages/bug/labels/LabelMenu.tsx +++ b/webui/src/pages/bug/labels/LabelMenu.tsx @@ -224,8 +224,6 @@ function LabelMenu({ bug }: Props) { ? selectedLabels.filter((label) => label !== key) : selectedLabels.concat([key]); setSelectedLabels(labels); - console.log('toggle (selected)'); - console.log(labels); } function diff(oldState: string[], newState: string[]) { @@ -238,13 +236,7 @@ function LabelMenu({ bug }: Props) { } const changeBugLabels = (selectedLabels: string[]) => { - console.log('CBL'); - console.log('selected labels'); - console.log(selectedLabels); - console.log('buglabels'); - console.log(bugLabelNames); const labels = diff(bugLabelNames, selectedLabels); - console.log(labels); if (labels.added.length > 0 || labels.removed.length > 0) { setLabelMutation({ variables: { @@ -267,7 +259,6 @@ function LabelMenu({ bug }: Props) { awaitRefetchQueries: true, }) .then((res) => { - console.log(res); setSelectedLabels(selectedLabels); setBugLabelNames(selectedLabels); }) @@ -279,9 +270,7 @@ function LabelMenu({ bug }: Props) { return selectedLabels.includes(key); } - //TODO label wont removed, if a filter hides it! function createNewLabel(name: string) { - console.log('CREATE NEW LABEL: ' + name); changeBugLabels(selectedLabels.concat([name])); } -- cgit From 2f7c29153bb9628062aa883a369f6430beddb082 Mon Sep 17 00:00:00 2001 From: Sascha Date: Tue, 30 Mar 2021 17:24:45 +0200 Subject: Fix pipeline fail and remove unused file --- webui/src/pages/bug/labels/FilterDropdown.tsx | 144 -------------------------- 1 file changed, 144 deletions(-) delete mode 100644 webui/src/pages/bug/labels/FilterDropdown.tsx (limited to 'webui/src/pages/bug/labels') diff --git a/webui/src/pages/bug/labels/FilterDropdown.tsx b/webui/src/pages/bug/labels/FilterDropdown.tsx deleted file mode 100644 index 44874aaf..00000000 --- a/webui/src/pages/bug/labels/FilterDropdown.tsx +++ /dev/null @@ -1,144 +0,0 @@ -import React, { useEffect, useRef, useState } from 'react'; - -import { IconButton, MenuItem } from '@material-ui/core'; -import Menu from '@material-ui/core/Menu'; -import TextField from '@material-ui/core/TextField'; -import { makeStyles, withStyles } from '@material-ui/core/styles'; -import SettingsIcon from '@material-ui/icons/Settings'; - -const CustomTextField = withStyles((theme) => ({ - root: { - margin: '0 8px 12px 8px', - '& label.Mui-focused': { - margin: '0 2px', - color: theme.palette.text.secondary, - }, - '& .MuiInput-underline::before': { - borderBottomColor: theme.palette.divider, - }, - '& .MuiInput-underline::after': { - borderBottomColor: theme.palette.divider, - }, - }, -}))(TextField); - -const ITEM_HEIGHT = 48; - -const useStyles = makeStyles((theme) => ({ - element: { - ...theme.typography.body2, - color: theme.palette.text.secondary, - padding: theme.spacing(0, 1), - fontWeight: 400, - textDecoration: 'none', - display: 'flex', - background: 'none', - border: 'none', - }, - labelsheader: { - display: 'flex', - flexDirection: 'row', - }, -})); - -export type FilterMenuItem = { - render: (item: T) => React.ReactNode; -}; - -type FilterDropdownProps = { - items?: FilterMenuItem[]; - hasFilter?: boolean; - onFilterChange: (filter: string) => void; -} & React.ButtonHTMLAttributes; - -function FilterDropdown({ - items, - hasFilter, - onFilterChange, -}: FilterDropdownProps) { - const buttonRef = useRef(null); - const searchRef = useRef(null); - const classes = useStyles({ active: false }); - - const [open, setOpen] = useState(false); - const [filter, setFilter] = useState(''); - - useEffect(() => { - searchRef && searchRef.current && searchRef.current.focus(); - }, [filter]); - - /*function sortBySelection(x: FilterMenuItem, y: FilterMenuItem) { - if (x.isSelected() === y.isSelected()) { - return 0; - } else if (x.isSelected()) { - return -1; - } else { - return 1; - } - } - - const sortedItems = items.sort(sortBySelection);*/ - - return ( - <> -
- Labels - setOpen(!open)} - className={classes.element} - > - - -
- - { - setOpen(false); - //const selectedLabels = dropdown - // .map(([key]) => (itemActive(key) ? key : '')) - // .filter((entry) => entry !== ''); - //onClose(selectedLabels); - }} - onExited={() => setFilter('')} - anchorEl={buttonRef.current} - PaperProps={{ - style: { - maxHeight: ITEM_HEIGHT * 4.5, - width: '25ch', - }, - }} - > - {hasFilter && ( - { - const { value } = e.target; - setFilter(value); - onFilterChange(value); - }} - onKeyDown={(e) => e.stopPropagation()} - value={filter} - label={`Filter Labels`} - /> - )} - {items && - items.map((item, index) => { - return {item}; - })} - - - ); -} - -export default FilterDropdown; -- cgit From 116e0533b651a19523d69af79ac618b6cd986289 Mon Sep 17 00:00:00 2001 From: Sascha Date: Thu, 8 Apr 2021 13:54:20 +0200 Subject: Remove elliptic background from gear icon --- webui/src/pages/bug/labels/LabelMenu.tsx | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'webui/src/pages/bug/labels') diff --git a/webui/src/pages/bug/labels/LabelMenu.tsx b/webui/src/pages/bug/labels/LabelMenu.tsx index 5c5a3ae9..645f472c 100644 --- a/webui/src/pages/bug/labels/LabelMenu.tsx +++ b/webui/src/pages/bug/labels/LabelMenu.tsx @@ -59,6 +59,10 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', background: 'none', border: 'none', + '&:hover': { + backgroundColor: 'transparent', + color: theme.palette.text.primary, + }, }, menu: { '& .MuiMenu-paper': { @@ -119,6 +123,7 @@ function FilterDropdown({ ref={buttonRef} onClick={() => setOpen(!open)} className={classes.gearBtn} + disableRipple > -- cgit