aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src/pages/bug
diff options
context:
space:
mode:
Diffstat (limited to 'webui/src/pages/bug')
-rw-r--r--webui/src/pages/bug/Bug.tsx19
-rw-r--r--webui/src/pages/bug/CommentForm.tsx8
-rw-r--r--webui/src/pages/bug/LabelChange.tsx9
-rw-r--r--webui/src/pages/bug/Message.tsx3
-rw-r--r--webui/src/pages/bug/MessageHistoryDialog.tsx8
-rw-r--r--webui/src/pages/bug/labels/LabelMenu.tsx309
-rw-r--r--webui/src/pages/bug/labels/SetLabel.graphql13
7 files changed, 350 insertions, 19 deletions
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index 25281f96..b32b0948 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,15 @@ 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),
+ marginLeft: theme.spacing(0.25),
+ marginRight: theme.spacing(0.25),
},
noLabel: {
...theme.typography.body2,
@@ -94,14 +97,16 @@ 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>
)}
{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/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx
index e70348a6..a8ce4319 100644
--- a/webui/src/pages/bug/CommentForm.tsx
+++ b/webui/src/pages/bug/CommentForm.tsx
@@ -17,14 +17,6 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
container: {
padding: theme.spacing(0, 2, 2, 2),
},
- textarea: {},
- tabContent: {
- margin: theme.spacing(2, 0),
- },
- preview: {
- borderBottom: `solid 3px ${theme.palette.grey['200']}`,
- minHeight: '5rem',
- },
actions: {
display: 'flex',
gap: '1em',
diff --git a/webui/src/pages/bug/LabelChange.tsx b/webui/src/pages/bug/LabelChange.tsx
index c40636c1..712c33fa 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} />
+ <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} />
+ <Label key={index} label={label} className={classes.label} />
))}
<span>
{' '}
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 2f4cbc59..39b11ccd 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -57,7 +57,8 @@ const useStyles = makeStyles((theme) => ({
},
body: {
...theme.typography.body2,
- padding: '0.5rem',
+ paddingLeft: theme.spacing(1),
+ paddingRight: theme.spacing(1),
},
headerActions: {
color: theme.palette.info.contrastText,
diff --git a/webui/src/pages/bug/MessageHistoryDialog.tsx b/webui/src/pages/bug/MessageHistoryDialog.tsx
index 0ed33642..5879a373 100644
--- a/webui/src/pages/bug/MessageHistoryDialog.tsx
+++ b/webui/src/pages/bug/MessageHistoryDialog.tsx
@@ -22,6 +22,8 @@ import {
import CloseIcon from '@material-ui/icons/Close';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import Content from '../../components/Content';
+
import { AddCommentFragment } from './MessageCommentFragment.generated';
import { CreateFragment } from './MessageCreateFragment.generated';
import { useMessageHistoryQuery } from './MessageHistory.generated';
@@ -108,6 +110,7 @@ const AccordionSummary = withStyles((theme) => ({
const AccordionDetails = withStyles((theme) => ({
root: {
+ display: 'block',
padding: theme.spacing(2),
},
}))(MuiAccordionDetails);
@@ -214,6 +217,7 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
{history?.map((edit, index) => (
<Accordion
square
+ key={index}
expanded={expanded === 'panel' + index}
onChange={handleChange('panel' + index)}
>
@@ -224,7 +228,9 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
>
<Typography>{getSummary(index, edit.date)}</Typography>
</AccordionSummary>
- <AccordionDetails>{edit.message}</AccordionDetails>
+ <AccordionDetails>
+ <Content markdown={edit.message} />
+ </AccordionDetails>
</Accordion>
))}
</DialogContent>
diff --git a/webui/src/pages/bug/labels/LabelMenu.tsx b/webui/src/pages/bug/labels/LabelMenu.tsx
new file mode 100644
index 00000000..645f472c
--- /dev/null
+++ b/webui/src/pages/bug/labels/LabelMenu.tsx
@@ -0,0 +1,309 @@
+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 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[];
+ 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) => ({
+ gearBtn: {
+ ...theme.typography.body2,
+ color: theme.palette.text.secondary,
+ padding: theme.spacing(0, 1),
+ fontWeight: 400,
+ textDecoration: 'none',
+ display: 'flex',
+ background: 'none',
+ border: 'none',
+ '&:hover': {
+ backgroundColor: 'transparent',
+ color: theme.palette.text.primary,
+ },
+ },
+ menu: {
+ '& .MuiMenu-paper': {
+ //somehow using "width" won't override the default width...
+ minWidth: '35ch',
+ },
+ },
+ labelcolor: {
+ minWidth: '0.5rem',
+ display: 'flex',
+ borderRadius: '0.25rem',
+ marginRight: '5px',
+ marginLeft: '3px',
+ },
+ labelsheader: {
+ display: 'flex',
+ flexDirection: 'row',
+ },
+ menuRow: {
+ display: 'flex',
+ alignItems: 'initial',
+ },
+}));
+
+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,
+ 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.gearBtn}
+ disableRipple
+ >
+ <SettingsIcon fontSize={'small'} />
+ </IconButton>
+ </div>
+
+ <Menu
+ className={classes.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}`}
+ />
+ )}
+ {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
+ 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-word' }}
+ onClick={() => {
+ toggleLabel(key, itemActive(key));
+ }}
+ key={key}
+ selected={itemActive(key)}
+ >
+ <div className={classes.menuRow}>
+ {itemActive(key) && <CheckIcon />}
+ <div
+ className={classes.labelcolor}
+ style={createStyle(color)}
+ />
+ {value}
+ </div>
+ </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();
+
+ function toggleLabel(key: string, active: boolean) {
+ const labels: string[] = active
+ ? selectedLabels.filter((label) => label !== key)
+ : selectedLabels.concat([key]);
+ setSelectedLabels(labels);
+ }
+
+ function diff(oldState: string[], newState: string[]) {
+ const added = newState.filter((x) => !oldState.includes(x));
+ const removed = oldState.filter((x) => !newState.includes(x));
+ return {
+ added: added,
+ removed: removed,
+ };
+ }
+
+ const changeBugLabels = (selectedLabels: string[]) => {
+ const labels = diff(bugLabelNames, selectedLabels);
+ 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) => {
+ setSelectedLabels(selectedLabels);
+ setBugLabelNames(selectedLabels);
+ })
+ .catch((e) => console.log(e));
+ }
+ };
+
+ function isActive(key: string) {
+ return selectedLabels.includes(key);
+ }
+
+ function createNewLabel(name: string) {
+ changeBugLabels(selectedLabels.concat([name]));
+ }
+
+ 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(selectedLabels)}
+ 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 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}
+ }
+ }
+ }
+}
generated by cgit (git 2.34.1) at 2024-11-01 06:29:28 +0000