Merge pull request #627 from GlancingMind/upstream-set-bug-labels

WebUI: Set bug labels

4 files changed, 73 insertions, 24 deletions

diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx
index 1f5d22aa..87e45581 100644
--- a/webui/src/pages/list/BugRow.tsx
+++ b/webui/src/pages/list/BugRow.tsx
@@ -59,28 +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),
-    '& > *': {
-      display: 'inline-block',
-    },
-  },
   commentCount: {
     fontSize: '1rem',
     marginLeft: theme.spacing(0.5),
   },
   commentCountCell: {
     display: 'inline-flex',
+    minWidth: theme.spacing(5),
+    marginLeft: theme.spacing(0.5),
   },
 }));
 
@@ -98,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} />
-                  ))}
-                </span>
-              )}
+              {bug.labels.length > 0 &&
+                bug.labels.map((l) => (
+                  <Label key={l.name} label={l} className={classes.label} />
+                ))}
             </div>
           </Link>
           <div className={classes.details}>
@@ -115,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>
   );
diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx
index 2e99eedf..3559b3ce 100644
--- a/webui/src/pages/list/Filter.tsx
+++ b/webui/src/pages/list/Filter.tsx
@@ -8,7 +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 CheckIcon from '@material-ui/icons/Check';
+
+import { Color } from '../../gqlTypes';
 
 const CustomTextField = withStyles((theme) => ({
   root: {
@@ -99,9 +103,36 @@ 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: '0.5rem',
+    display: 'flex',
+    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;
@@ -150,6 +181,7 @@ function FilterDropdown({
         <ArrowDropDown fontSize="small" />
       </button>
       <Menu
+        className={classes.labelMenu}
         getContentAnchorEl={null}
         ref={searchRef}
         anchorOrigin={{
@@ -183,14 +215,22 @@ function FilterDropdown({
         )}
         {dropdown
           .filter((d) => d[1].toLowerCase().includes(filter.toLowerCase()))
-          .map(([key, value]) => (
+          .map(([key, value, color]) => (
             <MenuItem
               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}
+                  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}
             }
         }
     }