Add label menu to bug detail page

Also support label color in label filter menu on bug list page

4 files changed, 32 insertions, 6 deletions

diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx
index 1f5d22aa..190370b0 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 2e99eedf..119480e7 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 979bf530..e109578d 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 dcb44b67..8b2f561a 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}
             }
         }
     }