From d39e6c4c4391c1a3cd96f791b47d66b043da7f51 Mon Sep 17 00:00:00 2001
From: Tim Becker <tim.becker@mni.thm.de>
Date: Wed, 24 Mar 2021 23:26:14 +0100
Subject: [PATCH 01/11] Add label menu to bug detail page

Also support label color in label filter menu on bug list page
---
 webui/src/components/Label.tsx              |  41 +--
 webui/src/pages/bug/Bug.tsx                 |  15 +-
 webui/src/pages/bug/labels/LabelMenu.tsx    | 356 ++++++++++++++++++++
 webui/src/pages/bug/labels/SetLabel.graphql |  13 +
 webui/src/pages/list/BugRow.tsx             |   3 -
 webui/src/pages/list/Filter.tsx             |  31 +-
 webui/src/pages/list/FilterToolbar.tsx      |   1 +
 webui/src/pages/list/ListLabels.graphql     |   3 +-
 8 files changed, 424 insertions(+), 39 deletions(-)
 create mode 100644 webui/src/pages/bug/labels/LabelMenu.tsx
 create mode 100644 webui/src/pages/bug/labels/SetLabel.graphql

diff --git a/webui/src/components/Label.tsx b/webui/src/components/Label.tsx
index 111f6d7ff2b46ab09a20c7430ec41bdc47452b0c..13c913c92fcd633f45505e3b0f35761e9de4c2db 100644
--- a/webui/src/components/Label.tsx
+++ b/webui/src/components/Label.tsx
@@ -1,56 +1,43 @@
 import React from 'react';
 
+import { Chip } from '@material-ui/core';
 import { common } from '@material-ui/core/colors';
-import { makeStyles } from '@material-ui/core/styles';
 import {
-  getContrastRatio,
   darken,
+  getContrastRatio,
 } from '@material-ui/core/styles/colorManipulator';
 
-import { LabelFragment } from '../graphql/fragments.generated';
-import { Color } from 'src/gqlTypes';
+import { Color } from '../gqlTypes';
+
+import { LabelFragment } from './fragments.generated';
+
+const _rgb = (color: Color) =>
+  'rgb(' + color.R + ',' + color.G + ',' + color.B + ')';
 
 // Minimum contrast between the background and the text color
 const contrastThreshold = 2.5;
-
 // Guess the text color based on the background color
 const getTextColor = (background: string) =>
   getContrastRatio(background, common.white) >= contrastThreshold
     ? common.white // White on dark backgrounds
     : common.black; // And black on light ones
 
-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),
   color: getTextColor(_rgb(color)),
   borderBottomColor: darken(_rgb(color), 0.2),
+  margin: '3px',
 });
 
-const useStyles = makeStyles((theme) => ({
-  label: {
-    ...theme.typography.body1,
-    padding: '1px 6px 0.5px',
-    fontSize: '0.9em',
-    fontWeight: 500,
-    margin: '0.05em 1px calc(-1.5px + 0.05em)',
-    borderRadius: '3px',
-    display: 'inline-block',
-    borderBottom: 'solid 1.5px',
-    verticalAlign: 'bottom',
-  },
-}));
-
 type Props = { label: LabelFragment };
 function Label({ label }: Props) {
-  const classes = useStyles();
   return (
-    <span className={classes.label} style={createStyle(label.color)}>
-      {label.name}
-    </span>
+    <Chip
+      size={'small'}
+      label={label.name}
+      style={createStyle(label.color)}
+    ></Chip>
   );
 }
-
 export default Label;
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index 25281f963082de500ba3610ec8793bc9bc56e2f6..3cb48ecde214cd24675ebb7d73bc9106e3a19e29 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -9,6 +9,7 @@ import Label from 'src/components/Label';
 import { BugFragment } from './Bug.generated';
 import CommentForm from './CommentForm';
 import TimelineQuery from './TimelineQuery';
+import LabelMenu from './labels/LabelMenu';
 
 /**
  * Css in JS Styles
@@ -53,13 +54,13 @@ const useStyles = makeStyles((theme) => ({
     listStyle: 'none',
     padding: 0,
     margin: 0,
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
   },
   label: {
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
-    '& > *': {
-      display: 'block',
-    },
+    marginTop: theme.spacing(0.1),
+    marginBottom: theme.spacing(0.1),
   },
   noLabel: {
     ...theme.typography.body2,
@@ -94,7 +95,9 @@ function Bug({ bug }: Props) {
           </IfLoggedIn>
         </div>
         <div className={classes.rightSidebar}>
-          <span className={classes.rightSidebarTitle}>Labels</span>
+          <span className={classes.rightSidebarTitle}>
+            <LabelMenu bug={bug} />
+          </span>
           <ul className={classes.labelList}>
             {bug.labels.length === 0 && (
               <span className={classes.noLabel}>None yet</span>
diff --git a/webui/src/pages/bug/labels/LabelMenu.tsx b/webui/src/pages/bug/labels/LabelMenu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8213d15b8d6399af06728616eedbfb0558bdad47
--- /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<SvgIconProps>;
+  hasFilter?: boolean;
+  itemActive: (key: string) => boolean;
+  onClose: () => void;
+  toggleLabel: (key: string, active: boolean) => void;
+  onNewItem: (name: string) => void;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+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<string>('');
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const searchRef = useRef<HTMLButtonElement>(null);
+  const classes = useStyles({ active: false });
+
+  useEffect(() => {
+    searchRef && searchRef.current && searchRef.current.focus();
+  }, [filter]);
+
+  return (
+    <>
+      <div className={classes.labelsheader}>
+        Labels
+        <IconButton
+          ref={buttonRef}
+          onClick={() => setOpen(!open)}
+          className={classes.element}
+        >
+          <SettingsIcon fontSize={'small'} />
+        </IconButton>
+      </div>
+
+      <Menu
+        getContentAnchorEl={null}
+        ref={searchRef}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        open={open}
+        onClose={() => {
+          setOpen(false);
+          onClose();
+        }}
+        onExited={() => setFilter('')}
+        anchorEl={buttonRef.current}
+        PaperProps={{
+          style: {
+            maxHeight: ITEM_HEIGHT * 4.5,
+            width: '25ch',
+          },
+        }}
+      >
+        {hasFilter && (
+          <CustomTextField
+            onChange={(e) => {
+              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]) => (
+            <MenuItem
+              style={{ whiteSpace: 'normal', wordBreak: 'break-all' }}
+              onClick={() => {
+                toggleLabel(key, itemActive(key));
+              }}
+              key={key}
+              className={itemActive(key) ? classes.itemActive : undefined}
+            >
+              <div className={classes.menuRow}>
+                {itemActive(key) ? <CheckIcon fontSize={'small'} /> : null}
+                <div
+                  className={classes.labelcolor}
+                  style={createStyle(color)}
+                />
+                {value}
+              </div>
+            </MenuItem>
+          ))}
+        {filter !== '' &&
+          dropdown.filter((d) => d[1].toLowerCase() === filter.toLowerCase())
+            .length <= 0 && (
+            <MenuItem
+              style={{ whiteSpace: 'normal', wordBreak: 'break-all' }}
+              onClick={() => {
+                onNewItem(filter);
+                setFilter('');
+                setOpen(false);
+              }}
+            >
+              Create new label '{filter}'
+            </MenuItem>
+          )}
+      </Menu>
+    </>
+  );
+}
+
+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 (
+    <FilterDropdown
+      onClose={changeBugLabels}
+      itemActive={isActive}
+      toggleLabel={toggleLabel}
+      dropdown={labels}
+      onNewItem={createNewLabel}
+      hasFilter
+    >
+      Labels
+    </FilterDropdown>
+  );
+}
+
+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 0000000000000000000000000000000000000000..44dfae11d963486496af6e538e92910a28442a5a
--- /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}
+            }
+        }
+    }
+}
diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx
index 1f5d22aae2626eea582b8b311a59d4b374959c0b..190370b0872f79fe52c8f17b0f6ab43463282cb3 100644
--- a/webui/src/pages/list/BugRow.tsx
+++ b/webui/src/pages/list/BugRow.tsx
@@ -71,9 +71,6 @@ const useStyles = makeStyles((theme) => ({
   },
   labels: {
     paddingLeft: theme.spacing(1),
-    '& > *': {
-      display: 'inline-block',
-    },
   },
   commentCount: {
     fontSize: '1rem',
diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx
index 2e99eedf08dcfa78f3151e5d6cb2f57eaea17f49..119480e77b77358269cf8c78ad5a32eb5f7a826f 100644
--- a/webui/src/pages/list/Filter.tsx
+++ b/webui/src/pages/list/Filter.tsx
@@ -8,8 +8,11 @@ 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 ArrowDropDown from '@material-ui/icons/ArrowDropDown';
 
+import { Color } from '../../gqlTypes';
+
 const CustomTextField = withStyles((theme) => ({
   root: {
     margin: '0 8px 12px 8px',
@@ -99,9 +102,26 @@ const useStyles = makeStyles((theme) => ({
   icon: {
     paddingRight: theme.spacing(0.5),
   },
+  labelcolor: {
+    minWidth: '15px',
+    minHeight: '15px',
+    display: 'flex',
+    backgroundColor: 'blue',
+    borderRadius: '0.25rem',
+    marginRight: '5px',
+    marginLeft: '3px',
+  },
 }));
+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),
+});
 
-type DropdownTuple = [string, string];
+type DropdownTuple = [string, string, Color?];
 
 type FilterDropdownProps = {
   children: React.ReactNode;
@@ -183,14 +203,21 @@ function FilterDropdown({
         )}
         {dropdown
           .filter((d) => d[1].toLowerCase().includes(filter.toLowerCase()))
-          .map(([key, value]) => (
+          .map(([key, value, color]) => (
             <MenuItem
+              style={{ whiteSpace: 'normal', wordBreak: 'break-all' }}
               component={Link}
               to={to(key)}
               className={itemActive(key) ? classes.itemActive : undefined}
               onClick={() => setOpen(false)}
               key={key}
             >
+              {color && (
+                <div
+                  className={classes.labelcolor}
+                  style={createStyle(color)}
+                />
+              )}
               {value}
             </MenuItem>
           ))}
diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx
index 979bf5309ab85822d16d5be9ddbfbc7fd7ad66c4..e109578db87b27c88869cc05dbd0efb96349bd99 100644
--- a/webui/src/pages/list/FilterToolbar.tsx
+++ b/webui/src/pages/list/FilterToolbar.tsx
@@ -89,6 +89,7 @@ function FilterToolbar({ query, queryLocation }: Props) {
     labels = labelsData.repository.validLabels.nodes.map((node) => [
       node.name,
       node.name,
+      node.color,
     ]);
   }
 
diff --git a/webui/src/pages/list/ListLabels.graphql b/webui/src/pages/list/ListLabels.graphql
index dcb44b67279e531492be110f9e9ac85f50b251f1..8b2f561a60626605dbc26a8a142fb91529e8af06 100644
--- a/webui/src/pages/list/ListLabels.graphql
+++ b/webui/src/pages/list/ListLabels.graphql
@@ -2,7 +2,8 @@ query ListLabels {
     repository {
         validLabels {
             nodes {
-                name
+                name,
+                color{R,G,B}
             }
         }
     }

From 41418c912d5521708e5f3fbdea2415a5e95c72c0 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Tue, 30 Mar 2021 10:22:10 +0200
Subject: [PATCH 02/11] Let CreateNewLabel-Btn appear as first element in list

---
 webui/src/pages/bug/labels/LabelMenu.tsx | 28 ++++++++++++------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/webui/src/pages/bug/labels/LabelMenu.tsx b/webui/src/pages/bug/labels/LabelMenu.tsx
index 8213d15b8d6399af06728616eedbfb0558bdad47..2422e865a41921564c3a878c14c7ce7ff8994aac 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 && (
+            <MenuItem
+              style={{ whiteSpace: 'normal', wordBreak: 'break-all' }}
+              onClick={() => {
+                onNewItem(filter);
+                setFilter('');
+                setOpen(false);
+              }}
+            >
+              Create new label '{filter}'
+            </MenuItem>
+          )}
         {dropdown
           .sort(function (x, y) {
             // true values first
@@ -193,20 +207,6 @@ function FilterDropdown({
               </div>
             </MenuItem>
           ))}
-        {filter !== '' &&
-          dropdown.filter((d) => d[1].toLowerCase() === filter.toLowerCase())
-            .length <= 0 && (
-            <MenuItem
-              style={{ whiteSpace: 'normal', wordBreak: 'break-all' }}
-              onClick={() => {
-                onNewItem(filter);
-                setFilter('');
-                setOpen(false);
-              }}
-            >
-              Create new label '{filter}'
-            </MenuItem>
-          )}
       </Menu>
     </>
   );

From 9b2cf1ba32c4760e4febe3ad2a6d7af7661b23d9 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Tue, 30 Mar 2021 11:45:26 +0200
Subject: [PATCH 03/11] Add/Remove from filtering while creating new label
 works

---
 webui/src/pages/bug/labels/LabelMenu.tsx | 58 +++++-------------------
 1 file changed, 12 insertions(+), 46 deletions(-)

diff --git a/webui/src/pages/bug/labels/LabelMenu.tsx b/webui/src/pages/bug/labels/LabelMenu.tsx
index 2422e865a41921564c3a878c14c7ce7ff8994aac..3551ecd6006bfaf517d58e11fec589bc697f5488 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 (
     <FilterDropdown
-      onClose={changeBugLabels}
+      onClose={() => changeBugLabels(selectedLabels)}
       itemActive={isActive}
       toggleLabel={toggleLabel}
       dropdown={labels}

From 4517de919ac82d9eb00230003cbe59a24d4c8f2e Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Tue, 30 Mar 2021 13:48:49 +0200
Subject: [PATCH 04/11] LabelMenu prefer break-on-word-boundary

---
 webui/src/pages/bug/labels/LabelMenu.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/webui/src/pages/bug/labels/LabelMenu.tsx b/webui/src/pages/bug/labels/LabelMenu.tsx
index 3551ecd6006bfaf517d58e11fec589bc697f5488..5a70bd8a22c5dc689d3fd0cf4a8523c1f9f5f9e1 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<SvgIconProps>;
   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({
       </div>
 
       <Menu
+        className={classes.menu}
         getContentAnchorEl={null}
         ref={searchRef}
         anchorOrigin={{
@@ -190,7 +188,7 @@ function FilterDropdown({
           .filter((d) => d[1].toLowerCase().includes(filter.toLowerCase()))
           .map(([key, value, color]) => (
             <MenuItem
-              style={{ whiteSpace: 'normal', wordBreak: 'break-all' }}
+              style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}
               onClick={() => {
                 toggleLabel(key, itemActive(key));
               }}

From f5df854def95e35e6fc2b408ecf746dcc0a8d38a Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Tue, 30 Mar 2021 15:51:36 +0200
Subject: [PATCH 05/11] 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(-)

diff --git a/webui/src/pages/bug/labels/LabelMenu.tsx b/webui/src/pages/bug/labels/LabelMenu.tsx
index 5a70bd8a22c5dc689d3fd0cf4a8523c1f9f5f9e1..01be11d8e317225113eb4fd67cb628ff87a359a4 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({
         <IconButton
           ref={buttonRef}
           onClick={() => setOpen(!open)}
-          className={classes.element}
+          className={classes.gearBtn}
         >
           <SettingsIcon fontSize={'small'} />
         </IconButton>
@@ -193,10 +191,10 @@ function FilterDropdown({
                 toggleLabel(key, itemActive(key));
               }}
               key={key}
-              className={itemActive(key) ? classes.itemActive : undefined}
+              selected={itemActive(key)}
             >
               <div className={classes.menuRow}>
-                {itemActive(key) ? <CheckIcon fontSize={'small'} /> : null}
+                {itemActive(key) && <CheckIcon fontSize={'small'} />}
                 <div
                   className={classes.labelcolor}
                   style={createStyle(color)}

From 4d4172bb4c7bac5f801ef67f60ff9c58021d3080 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Tue, 30 Mar 2021 16:25:44 +0200
Subject: [PATCH 06/11] Cut of very long labels with an ellipse

---
 webui/src/components/Label.tsx      | 12 ++++++++----
 webui/src/pages/bug/Bug.tsx         |  2 +-
 webui/src/pages/bug/LabelChange.tsx |  4 ++--
 webui/src/pages/list/BugRow.tsx     |  2 +-
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/webui/src/components/Label.tsx b/webui/src/components/Label.tsx
index 13c913c92fcd633f45505e3b0f35761e9de4c2db..bbe7c1588ac994dca046046c360960816ef966c2 100644
--- a/webui/src/components/Label.tsx
+++ b/webui/src/components/Label.tsx
@@ -23,20 +23,24 @@ const getTextColor = (background: string) =>
     : common.black; // And black on light ones
 
 // Create a style object from the label RGB colors
-const createStyle = (color: Color) => ({
+const createStyle = (color: Color, maxWidth?: string) => ({
   backgroundColor: _rgb(color),
   color: getTextColor(_rgb(color)),
   borderBottomColor: darken(_rgb(color), 0.2),
   margin: '3px',
+  maxWidth: maxWidth,
 });
 
-type Props = { label: LabelFragment };
-function Label({ label }: Props) {
+type Props = {
+  label: LabelFragment;
+  maxWidth?: string;
+};
+function Label({ label, maxWidth }: Props) {
   return (
     <Chip
       size={'small'}
       label={label.name}
-      style={createStyle(label.color)}
+      style={createStyle(label.color, maxWidth)}
     ></Chip>
   );
 }
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index 3cb48ecde214cd24675ebb7d73bc9106e3a19e29..5f3dfd035fe03f152c472da0a9a81d62c0fd52e7 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -104,7 +104,7 @@ function Bug({ bug }: Props) {
             )}
             {bug.labels.map((l) => (
               <li className={classes.label} key={l.name}>
-                <Label label={l} key={l.name} />
+                <Label label={l} key={l.name} maxWidth="25ch" />
               </li>
             ))}
           </ul>
diff --git a/webui/src/pages/bug/LabelChange.tsx b/webui/src/pages/bug/LabelChange.tsx
index c40636c115c79068a99ea0ada4a68e56de057a05..fd466ab88fc34c4191a4bbf86c53f66fa4b6dbb0 100644
--- a/webui/src/pages/bug/LabelChange.tsx
+++ b/webui/src/pages/bug/LabelChange.tsx
@@ -30,12 +30,12 @@ function LabelChange({ op }: Props) {
       <Author author={op.author} className={classes.author} />
       {added.length > 0 && <span> added the </span>}
       {added.map((label, index) => (
-        <Label key={index} label={label} />
+        <Label key={index} label={label} maxWidth="50ch" />
       ))}
       {added.length > 0 && removed.length > 0 && <span> and</span>}
       {removed.length > 0 && <span> removed the </span>}
       {removed.map((label, index) => (
-        <Label key={index} label={label} />
+        <Label key={index} label={label} maxWidth="50ch" />
       ))}
       <span>
         {' '}
diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx
index 190370b0872f79fe52c8f17b0f6ab43463282cb3..62f8df97fc59d26aa3fbd20c49c4dcfe06907440 100644
--- a/webui/src/pages/list/BugRow.tsx
+++ b/webui/src/pages/list/BugRow.tsx
@@ -100,7 +100,7 @@ function BugRow({ bug }: Props) {
               {bug.labels.length > 0 && (
                 <span className={classes.labels}>
                   {bug.labels.map((l) => (
-                    <Label key={l.name} label={l} />
+                    <Label key={l.name} label={l} maxWidth="40ch" />
                   ))}
                 </span>
               )}

From cb609c28b5d1fa6cde79e2ef6b884988182f57c2 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Tue, 30 Mar 2021 17:02:15 +0200
Subject: [PATCH 07/11] Increase width of list/labelmenu and stretch color for
 menuitems

---
 webui/src/pages/bug/labels/LabelMenu.tsx |  9 +++------
 webui/src/pages/list/Filter.tsx          | 23 ++++++++++++++++++-----
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/webui/src/pages/bug/labels/LabelMenu.tsx b/webui/src/pages/bug/labels/LabelMenu.tsx
index 01be11d8e317225113eb4fd67cb628ff87a359a4..8834731686500176cb334f8842c136bd0ef0f428 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)}
             >
               <div className={classes.menuRow}>
-                {itemActive(key) && <CheckIcon fontSize={'small'} />}
+                {itemActive(key) && <CheckIcon />}
                 <div
                   className={classes.labelcolor}
                   style={createStyle(color)}
diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx
index 119480e77b77358269cf8c78ad5a32eb5f7a826f..3559b3ce8005f22f6ce4165c2c882b784059126a 100644
--- a/webui/src/pages/list/Filter.tsx
+++ b/webui/src/pages/list/Filter.tsx
@@ -10,6 +10,7 @@ import TextField from '@material-ui/core/TextField';
 import { makeStyles, withStyles } from '@material-ui/core/styles';
 import { darken } from '@material-ui/core/styles/colorManipulator';
 import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
+import CheckIcon from '@material-ui/icons/Check';
 
 import { Color } from '../../gqlTypes';
 
@@ -102,11 +103,21 @@ const useStyles = makeStyles((theme) => ({
   icon: {
     paddingRight: theme.spacing(0.5),
   },
+  labelMenu: {
+    '& .MuiMenu-paper': {
+      //somehow using "width" won't override the default width...
+      minWidth: '35ch',
+    },
+  },
+  labelMenuItem: {
+    whiteSpace: 'normal',
+    wordBreak: 'break-word',
+    display: 'flex',
+    alignItems: 'initial',
+  },
   labelcolor: {
-    minWidth: '15px',
-    minHeight: '15px',
+    minWidth: '0.5rem',
     display: 'flex',
-    backgroundColor: 'blue',
     borderRadius: '0.25rem',
     marginRight: '5px',
     marginLeft: '3px',
@@ -170,6 +181,7 @@ function FilterDropdown({
         <ArrowDropDown fontSize="small" />
       </button>
       <Menu
+        className={classes.labelMenu}
         getContentAnchorEl={null}
         ref={searchRef}
         anchorOrigin={{
@@ -205,13 +217,14 @@ function FilterDropdown({
           .filter((d) => d[1].toLowerCase().includes(filter.toLowerCase()))
           .map(([key, value, color]) => (
             <MenuItem
-              style={{ whiteSpace: 'normal', wordBreak: 'break-all' }}
               component={Link}
               to={to(key)}
-              className={itemActive(key) ? classes.itemActive : undefined}
+              className={classes.labelMenuItem}
+              selected={itemActive(key)}
               onClick={() => setOpen(false)}
               key={key}
             >
+              {itemActive(key) && <CheckIcon />}
               {color && (
                 <div
                   className={classes.labelcolor}

From 5bad12bed24d5602f39b02ad39cac63facfa4cfd Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Tue, 30 Mar 2021 17:05:12 +0200
Subject: [PATCH 08/11] 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

diff --git a/webui/src/pages/bug/labels/FilterDropdown.tsx b/webui/src/pages/bug/labels/FilterDropdown.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..44874aafb0af436a85b2bce0d6f6a0068f877e38
--- /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<T> = {
+  render: (item: T) => React.ReactNode;
+};
+
+type FilterDropdownProps<T> = {
+  items?: FilterMenuItem<T>[];
+  hasFilter?: boolean;
+  onFilterChange: (filter: string) => void;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+function FilterDropdown<T>({
+  items,
+  hasFilter,
+  onFilterChange,
+}: FilterDropdownProps<T>) {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const searchRef = useRef<HTMLButtonElement>(null);
+  const classes = useStyles({ active: false });
+
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState<string>('');
+
+  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 (
+    <>
+      <div className={classes.labelsheader}>
+        Labels
+        <IconButton
+          ref={buttonRef}
+          onClick={() => setOpen(!open)}
+          className={classes.element}
+        >
+          <SettingsIcon fontSize={'small'} />
+        </IconButton>
+      </div>
+
+      <Menu
+        getContentAnchorEl={null}
+        ref={searchRef}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        open={open}
+        onClose={() => {
+          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 && (
+          <CustomTextField
+            onChange={(e) => {
+              const { value } = e.target;
+              setFilter(value);
+              onFilterChange(value);
+            }}
+            onKeyDown={(e) => e.stopPropagation()}
+            value={filter}
+            label={`Filter Labels`}
+          />
+        )}
+        {items &&
+          items.map((item, index) => {
+            return <MenuItem key={index}>{item}</MenuItem>;
+          })}
+      </Menu>
+    </>
+  );
+}
+
+export default FilterDropdown;
diff --git a/webui/src/pages/bug/labels/LabelMenu.tsx b/webui/src/pages/bug/labels/LabelMenu.tsx
index 8834731686500176cb334f8842c136bd0ef0f428..5c5a3ae95fae679b13f265b704aabc1afef68ce9 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]));
   }
 

From 2f7c29153bb9628062aa883a369f6430beddb082 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Tue, 30 Mar 2021 17:24:45 +0200
Subject: [PATCH 09/11] Fix pipeline fail and remove unused file

---
 webui/src/components/Label.tsx                |   3 +-
 webui/src/pages/bug/labels/FilterDropdown.tsx | 144 ------------------
 2 files changed, 1 insertion(+), 146 deletions(-)
 delete mode 100644 webui/src/pages/bug/labels/FilterDropdown.tsx

diff --git a/webui/src/components/Label.tsx b/webui/src/components/Label.tsx
index bbe7c1588ac994dca046046c360960816ef966c2..e719eee05a08ff33310c4a4544559f81493e926f 100644
--- a/webui/src/components/Label.tsx
+++ b/webui/src/components/Label.tsx
@@ -8,8 +8,7 @@ import {
 } from '@material-ui/core/styles/colorManipulator';
 
 import { Color } from '../gqlTypes';
-
-import { LabelFragment } from './fragments.generated';
+import { LabelFragment } from '../graphql/fragments.generated';
 
 const _rgb = (color: Color) =>
   'rgb(' + color.R + ',' + color.G + ',' + color.B + ')';
diff --git a/webui/src/pages/bug/labels/FilterDropdown.tsx b/webui/src/pages/bug/labels/FilterDropdown.tsx
deleted file mode 100644
index 44874aafb0af436a85b2bce0d6f6a0068f877e38..0000000000000000000000000000000000000000
--- 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<T> = {
-  render: (item: T) => React.ReactNode;
-};
-
-type FilterDropdownProps<T> = {
-  items?: FilterMenuItem<T>[];
-  hasFilter?: boolean;
-  onFilterChange: (filter: string) => void;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
-
-function FilterDropdown<T>({
-  items,
-  hasFilter,
-  onFilterChange,
-}: FilterDropdownProps<T>) {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const searchRef = useRef<HTMLButtonElement>(null);
-  const classes = useStyles({ active: false });
-
-  const [open, setOpen] = useState(false);
-  const [filter, setFilter] = useState<string>('');
-
-  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 (
-    <>
-      <div className={classes.labelsheader}>
-        Labels
-        <IconButton
-          ref={buttonRef}
-          onClick={() => setOpen(!open)}
-          className={classes.element}
-        >
-          <SettingsIcon fontSize={'small'} />
-        </IconButton>
-      </div>
-
-      <Menu
-        getContentAnchorEl={null}
-        ref={searchRef}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'left',
-        }}
-        open={open}
-        onClose={() => {
-          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 && (
-          <CustomTextField
-            onChange={(e) => {
-              const { value } = e.target;
-              setFilter(value);
-              onFilterChange(value);
-            }}
-            onKeyDown={(e) => e.stopPropagation()}
-            value={filter}
-            label={`Filter Labels`}
-          />
-        )}
-        {items &&
-          items.map((item, index) => {
-            return <MenuItem key={index}>{item}</MenuItem>;
-          })}
-      </Menu>
-    </>
-  );
-}
-
-export default FilterDropdown;

From 116e0533b651a19523d69af79ac618b6cd986289 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Thu, 8 Apr 2021 13:54:20 +0200
Subject: [PATCH 10/11] Remove elliptic background from gear icon

---
 webui/src/pages/bug/labels/LabelMenu.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/webui/src/pages/bug/labels/LabelMenu.tsx b/webui/src/pages/bug/labels/LabelMenu.tsx
index 5c5a3ae95fae679b13f265b704aabc1afef68ce9..645f472ca7988d93d18904817b2041380dca25be 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
         >
           <SettingsIcon fontSize={'small'} />
         </IconButton>

From c37d3d771806f9709c0c9fc77b5bbf8806a2ec23 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Thu, 8 Apr 2021 18:02:33 +0200
Subject: [PATCH 11/11] Fix label alignment to title on bug list page

Also add className support for custom label component.
This allows to set the margin of an label where the label is used instead of
defining a fixed margin in the label component.
---
 webui/src/components/Label.tsx      |  7 +++--
 webui/src/pages/bug/Bug.tsx         |  2 ++
 webui/src/pages/bug/LabelChange.tsx |  9 ++++--
 webui/src/pages/list/BugRow.tsx     | 44 ++++++++++++++++++-----------
 4 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/webui/src/components/Label.tsx b/webui/src/components/Label.tsx
index e719eee05a08ff33310c4a4544559f81493e926f..a1d3c6f9dce60b2dab3857220ba251966057411b 100644
--- a/webui/src/components/Label.tsx
+++ b/webui/src/components/Label.tsx
@@ -26,21 +26,22 @@ const createStyle = (color: Color, maxWidth?: string) => ({
   backgroundColor: _rgb(color),
   color: getTextColor(_rgb(color)),
   borderBottomColor: darken(_rgb(color), 0.2),
-  margin: '3px',
   maxWidth: maxWidth,
 });
 
 type Props = {
   label: LabelFragment;
   maxWidth?: string;
+  className?: string;
 };
-function Label({ label, maxWidth }: Props) {
+function Label({ label, maxWidth, className }: Props) {
   return (
     <Chip
       size={'small'}
       label={label.name}
+      className={className}
       style={createStyle(label.color, maxWidth)}
-    ></Chip>
+    />
   );
 }
 export default Label;
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index 5f3dfd035fe03f152c472da0a9a81d62c0fd52e7..b32b094845f24be2f0c8788a94649b1891be38df 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -61,6 +61,8 @@ const useStyles = makeStyles((theme) => ({
   label: {
     marginTop: theme.spacing(0.1),
     marginBottom: theme.spacing(0.1),
+    marginLeft: theme.spacing(0.25),
+    marginRight: theme.spacing(0.25),
   },
   noLabel: {
     ...theme.typography.body2,
diff --git a/webui/src/pages/bug/LabelChange.tsx b/webui/src/pages/bug/LabelChange.tsx
index fd466ab88fc34c4191a4bbf86c53f66fa4b6dbb0..712c33fabdb2280baca87170027e0c054ff2edb2 100644
--- a/webui/src/pages/bug/LabelChange.tsx
+++ b/webui/src/pages/bug/LabelChange.tsx
@@ -16,6 +16,11 @@ const useStyles = makeStyles((theme) => ({
   author: {
     fontWeight: 'bold',
   },
+  label: {
+    maxWidth: '50ch',
+    marginLeft: theme.spacing(0.25),
+    marginRight: theme.spacing(0.25),
+  },
 }));
 
 type Props = {
@@ -30,12 +35,12 @@ function LabelChange({ op }: Props) {
       <Author author={op.author} className={classes.author} />
       {added.length > 0 && <span> added the </span>}
       {added.map((label, index) => (
-        <Label key={index} label={label} maxWidth="50ch" />
+        <Label key={index} label={label} className={classes.label} />
       ))}
       {added.length > 0 && removed.length > 0 && <span> and</span>}
       {removed.length > 0 && <span> removed the </span>}
       {removed.map((label, index) => (
-        <Label key={index} label={label} maxWidth="50ch" />
+        <Label key={index} label={label} className={classes.label} />
       ))}
       <span>
         {' '}
diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx
index 62f8df97fc59d26aa3fbd20c49c4dcfe06907440..87e45581113da61164fa2bed61d876dd57a6b625 100644
--- a/webui/src/pages/list/BugRow.tsx
+++ b/webui/src/pages/list/BugRow.tsx
@@ -59,25 +59,36 @@ const useStyles = makeStyles((theme) => ({
     width: '100%',
     lineHeight: '20px',
   },
+  bugTitleWrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    //alignItems: 'center',
+  },
   title: {
     display: 'inline',
     color: theme.palette.text.primary,
     fontSize: '1.3rem',
     fontWeight: 500,
+    marginBottom: theme.spacing(1),
+  },
+  label: {
+    maxWidth: '40ch',
+    marginLeft: theme.spacing(0.25),
+    marginRight: theme.spacing(0.25),
   },
   details: {
     lineHeight: '1.5rem',
     color: theme.palette.text.secondary,
   },
-  labels: {
-    paddingLeft: theme.spacing(1),
-  },
   commentCount: {
     fontSize: '1rem',
     marginLeft: theme.spacing(0.5),
   },
   commentCountCell: {
     display: 'inline-flex',
+    minWidth: theme.spacing(5),
+    marginLeft: theme.spacing(0.5),
   },
 }));
 
@@ -95,15 +106,12 @@ function BugRow({ bug }: Props) {
         <BugStatus status={bug.status} className={classes.status} />
         <div className={classes.expand}>
           <Link to={'bug/' + bug.humanId}>
-            <div className={classes.expand}>
+            <div className={classes.bugTitleWrapper}>
               <span className={classes.title}>{bug.title}</span>
-              {bug.labels.length > 0 && (
-                <span className={classes.labels}>
-                  {bug.labels.map((l) => (
-                    <Label key={l.name} label={l} maxWidth="40ch" />
-                  ))}
-                </span>
-              )}
+              {bug.labels.length > 0 &&
+                bug.labels.map((l) => (
+                  <Label key={l.name} label={l} className={classes.label} />
+                ))}
             </div>
           </Link>
           <div className={classes.details}>
@@ -112,12 +120,14 @@ function BugRow({ bug }: Props) {
             &nbsp;by {bug.author.displayName}
           </div>
         </div>
-        {commentCount > 0 && (
-          <span className={classes.commentCountCell}>
-            <CommentOutlinedIcon aria-label="Comment count" />
-            <span className={classes.commentCount}>{commentCount}</span>
-          </span>
-        )}
+        <span className={classes.commentCountCell}>
+          {commentCount > 0 && (
+            <>
+              <CommentOutlinedIcon aria-label="Comment count" />
+              <span className={classes.commentCount}>{commentCount}</span>
+            </>
+          )}
+        </span>
       </TableCell>
     </TableRow>
   );