aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src
diff options
context:
space:
mode:
Diffstat (limited to 'webui/src')
-rw-r--r--webui/src/__tests__/query.ts121
-rw-r--r--webui/src/components/CloseBugButton/index.tsx (renamed from webui/src/components/CloseBugButton/CloseBugButton.tsx)5
-rw-r--r--webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql11
-rw-r--r--webui/src/components/CloseBugWithCommentButton/index.tsx75
-rw-r--r--webui/src/components/CommentInput/CommentInput.tsx20
-rw-r--r--webui/src/components/Header/Header.tsx9
-rw-r--r--webui/src/components/ReopenBugButton/index.tsx (renamed from webui/src/components/ReopenBugButton/ReopenBugButton.tsx)5
-rw-r--r--webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql11
-rw-r--r--webui/src/components/ReopenBugWithCommentButton/index.tsx65
-rw-r--r--webui/src/components/Themer.tsx21
-rw-r--r--webui/src/pages/bug/CommentForm.tsx37
-rw-r--r--webui/src/pages/bug/Message.tsx7
-rw-r--r--webui/src/pages/bug/MessageHistoryDialog.tsx7
-rw-r--r--webui/src/pages/list/BugRow.tsx2
-rw-r--r--webui/src/pages/list/Filter.tsx44
-rw-r--r--webui/src/pages/list/FilterToolbar.tsx13
16 files changed, 376 insertions, 77 deletions
diff --git a/webui/src/__tests__/query.ts b/webui/src/__tests__/query.ts
index 2f04817c..97ec75a6 100644
--- a/webui/src/__tests__/query.ts
+++ b/webui/src/__tests__/query.ts
@@ -7,49 +7,136 @@ it('parses a simple query', () => {
});
it('parses a query with multiple filters', () => {
- expect(parse('foo:bar baz:foo-bar')).toEqual({
+ expect(parse(`foo:bar baz:foo-bar`)).toEqual({
foo: ['bar'],
baz: ['foo-bar'],
});
+
+ expect(parse(`label:abc freetext`)).toEqual({
+ label: [`abc`],
+ freetext: [''],
+ });
+
+ expect(parse(`label:abc with "quotes" 'in' freetext`)).toEqual({
+ label: [`abc`],
+ with: [''],
+ '"quotes"': [''],
+ "'in'": [''],
+ freetext: [''],
+ });
});
it('parses a quoted query', () => {
- expect(parse('foo:"bar"')).toEqual({
- foo: ['bar'],
+ expect(parse(`foo:"bar"`)).toEqual({
+ foo: [`"bar"`],
});
- expect(parse("foo:'bar'")).toEqual({
- foo: ['bar'],
+ expect(parse(`foo:'bar'`)).toEqual({
+ foo: [`'bar'`],
+ });
+
+ expect(parse(`label:'multi word label'`)).toEqual({
+ label: [`'multi word label'`],
+ });
+
+ expect(parse(`label:"multi word label"`)).toEqual({
+ label: [`"multi word label"`],
+ });
+
+ expect(parse(`label:'multi word label with "nested" quotes'`)).toEqual({
+ label: [`'multi word label with "nested" quotes'`],
+ });
+
+ expect(parse(`label:"multi word label with 'nested' quotes"`)).toEqual({
+ label: [`"multi word label with 'nested' quotes"`],
+ });
+
+ expect(parse(`label:"with:quoated:colon"`)).toEqual({
+ label: [`"with:quoated:colon"`],
+ });
+
+ expect(parse(`label:'name ends after this ->' quote'`)).toEqual({
+ label: [`'name ends after this ->'`],
+ "quote'": [``],
});
- expect(parse('foo:\'bar "nested" quotes\'')).toEqual({
- foo: ['bar "nested" quotes'],
+ expect(parse(`label:"name ends after this ->" quote"`)).toEqual({
+ label: [`"name ends after this ->"`],
+ 'quote"': [``],
});
- expect(parse("foo:'escaped\\' quotes'")).toEqual({
- foo: ["escaped' quotes"],
+ expect(parse(`label:'this ->"<- quote belongs to label name'`)).toEqual({
+ label: [`'this ->"<- quote belongs to label name'`],
+ });
+
+ expect(parse(`label:"this ->'<- quote belongs to label name"`)).toEqual({
+ label: [`"this ->'<- quote belongs to label name"`],
+ });
+
+ expect(parse(`label:'names end with'whitespace not with quotes`)).toEqual({
+ label: [`'names end with'whitespace`],
+ not: [``],
+ with: [``],
+ quotes: [``],
+ });
+
+ expect(parse(`label:"names end with"whitespace not with quotes`)).toEqual({
+ label: [`"names end with"whitespace`],
+ not: [``],
+ with: [``],
+ quotes: [``],
+ });
+});
+
+it('should not escape nested quotes', () => {
+ expect(parse(`foo:'do not escape this ->'<- quote'`)).toEqual({
+ foo: [`'do not escape this ->'<-`],
+ "quote'": [``],
+ });
+
+ expect(parse(`foo:'do not escape this ->"<- quote'`)).toEqual({
+ foo: [`'do not escape this ->"<- quote'`],
+ });
+
+ expect(parse(`foo:"do not escape this ->"<- quote"`)).toEqual({
+ foo: [`"do not escape this ->"<-`],
+ 'quote"': [``],
+ });
+
+ expect(parse(`foo:"do not escape this ->'<- quote"`)).toEqual({
+ foo: [`"do not escape this ->'<- quote"`],
});
});
it('parses a query with repetitions', () => {
- expect(parse('foo:bar foo:baz')).toEqual({
+ expect(parse(`foo:bar foo:baz`)).toEqual({
foo: ['bar', 'baz'],
});
});
it('parses a complex query', () => {
- expect(parse('foo:bar foo:baz baz:"foobar" idont:\'know\'')).toEqual({
+ expect(parse(`foo:bar foo:baz baz:"foobar" idont:'know'`)).toEqual({
foo: ['bar', 'baz'],
- baz: ['foobar'],
- idont: ['know'],
+ baz: [`"foobar"`],
+ idont: [`'know'`],
});
});
+it('parses a key:value:value query', () => {
+ expect(parse(`meta:github:"https://github.com/MichaelMure/git-bug"`)).toEqual(
+ {
+ meta: [`github:"https://github.com/MichaelMure/git-bug"`],
+ }
+ );
+});
+
it('quotes values', () => {
- expect(quote('foo')).toEqual('foo');
- expect(quote('foo bar')).toEqual('"foo bar"');
- expect(quote('foo "bar"')).toEqual(`'foo "bar"'`);
- expect(quote(`foo "bar" 'baz'`)).toEqual(`"foo \\"bar\\" 'baz'"`);
+ expect(quote(`foo`)).toEqual(`foo`);
+ expect(quote(`foo bar`)).toEqual(`"foo bar"`);
+ expect(quote(`foo "bar"`)).toEqual(`"foo "bar""`);
+ expect(quote(`foo 'bar'`)).toEqual(`"foo "bar""`);
+ expect(quote(`'foo'`)).toEqual(`"foo"`);
+ expect(quote(`foo "bar" 'baz'`)).toEqual(`"foo "bar" "baz""`);
});
it('stringifies params', () => {
diff --git a/webui/src/components/CloseBugButton/CloseBugButton.tsx b/webui/src/components/CloseBugButton/index.tsx
index 9f098483..bb154ea7 100644
--- a/webui/src/components/CloseBugButton/CloseBugButton.tsx
+++ b/webui/src/components/CloseBugButton/index.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
import { makeStyles, Theme } from '@material-ui/core/styles';
import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
@@ -18,7 +19,7 @@ const useStyles = makeStyles((theme: Theme) => ({
interface Props {
bug: BugFragment;
- disabled: boolean;
+ disabled?: boolean;
}
function CloseBugButton({ bug, disabled }: Props) {
@@ -46,7 +47,7 @@ function CloseBugButton({ bug, disabled }: Props) {
});
}
- if (loading) return <div>Loading...</div>;
+ if (loading) return <CircularProgress />;
if (error) return <div>Error</div>;
return (
diff --git a/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql b/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql
new file mode 100644
index 00000000..eb736f53
--- /dev/null
+++ b/webui/src/components/CloseBugWithCommentButton/CloseBugWithComment.graphql
@@ -0,0 +1,11 @@
+mutation AddCommentAndCloseBug($input: AddCommentAndCloseBugInput!) {
+ addCommentAndClose(input: $input) {
+ statusOperation {
+ status
+ }
+ commentOperation {
+ message
+ }
+ }
+}
+
diff --git a/webui/src/components/CloseBugWithCommentButton/index.tsx b/webui/src/components/CloseBugWithCommentButton/index.tsx
new file mode 100644
index 00000000..a0fefa4a
--- /dev/null
+++ b/webui/src/components/CloseBugWithCommentButton/index.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+
+import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
+
+import { BugFragment } from 'src/pages/bug/Bug.generated';
+import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
+
+import { useAddCommentAndCloseBugMutation } from './CloseBugWithComment.generated';
+
+const useStyles = makeStyles((theme: Theme) => ({
+ closeIssueIcon: {
+ color: theme.palette.secondary.dark,
+ paddingTop: '0.1rem',
+ },
+}));
+
+interface Props {
+ bug: BugFragment;
+ comment: string;
+ postClick?: () => void;
+}
+
+function CloseBugWithCommentButton({ bug, comment, postClick }: Props) {
+ const [
+ addCommentAndCloseBug,
+ { loading, error },
+ ] = useAddCommentAndCloseBugMutation();
+ const classes = useStyles();
+
+ function addCommentAndCloseBugAction() {
+ addCommentAndCloseBug({
+ variables: {
+ input: {
+ prefix: bug.id,
+ message: comment,
+ },
+ },
+ refetchQueries: [
+ // TODO: update the cache instead of refetching
+ {
+ query: TimelineDocument,
+ variables: {
+ id: bug.id,
+ first: 100,
+ },
+ },
+ ],
+ awaitRefetchQueries: true,
+ }).then(() => {
+ if (postClick) {
+ postClick();
+ }
+ });
+ }
+
+ if (loading) return <CircularProgress />;
+ if (error) return <div>Error</div>;
+
+ return (
+ <div>
+ <Button
+ variant="contained"
+ onClick={() => addCommentAndCloseBugAction()}
+ startIcon={<ErrorOutlineIcon className={classes.closeIssueIcon} />}
+ >
+ Close bug with comment
+ </Button>
+ </div>
+ );
+}
+
+export default CloseBugWithCommentButton;
diff --git a/webui/src/components/CommentInput/CommentInput.tsx b/webui/src/components/CommentInput/CommentInput.tsx
index f12ee8d8..babd495c 100644
--- a/webui/src/components/CommentInput/CommentInput.tsx
+++ b/webui/src/components/CommentInput/CommentInput.tsx
@@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react';
+import { Typography } from '@material-ui/core';
import Tab from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs';
import TextField from '@material-ui/core/TextField';
@@ -15,14 +16,23 @@ const useStyles = makeStyles((theme) => ({
margin: theme.spacing(2, 0),
padding: theme.spacing(0, 2, 2, 2),
},
- textarea: {},
+ textarea: {
+ '& textarea.MuiInputBase-input': {
+ resize: 'vertical',
+ },
+ },
tabContent: {
margin: theme.spacing(2, 0),
},
preview: {
+ overflow: 'auto',
borderBottom: `solid 3px ${theme.palette.grey['200']}`,
minHeight: '5rem',
},
+ previewPlaceholder: {
+ color: theme.palette.text.secondary,
+ fontStyle: 'italic',
+ },
}));
type TabPanelProps = {
@@ -98,7 +108,13 @@ function CommentInput({ inputProps, inputText, loading, onChange }: Props) {
/>
</TabPanel>
<TabPanel value={tab} index={1} className={classes.preview}>
- <Content markdown={input} />
+ {input !== '' ? (
+ <Content markdown={input} />
+ ) : (
+ <Typography className={classes.previewPlaceholder}>
+ Nothing to preview.
+ </Typography>
+ )}
</TabPanel>
</div>
</div>
diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 56b35968..866e52db 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -6,7 +6,7 @@ import Tab, { TabProps } from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs';
import Toolbar from '@material-ui/core/Toolbar';
import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-import { makeStyles } from '@material-ui/core/styles';
+import { fade, makeStyles } from '@material-ui/core/styles';
import CurrentIdentity from '../Identity/CurrentIdentity';
import { LightSwitch } from '../Themer';
@@ -30,7 +30,8 @@ const useStyles = makeStyles((theme) => ({
alignItems: 'center',
},
lightSwitch: {
- padding: '0 20px',
+ marginRight: '20px',
+ color: fade(theme.palette.primary.contrastText, 0.5),
},
logo: {
height: '42px',
@@ -85,9 +86,7 @@ function Header() {
git-bug
</Link>
<div className={classes.filler} />
- <div className={classes.lightSwitch}>
- <LightSwitch />
- </div>
+ <LightSwitch className={classes.lightSwitch} />
<CurrentIdentity />
</Toolbar>
</AppBar>
diff --git a/webui/src/components/ReopenBugButton/ReopenBugButton.tsx b/webui/src/components/ReopenBugButton/index.tsx
index e3e792fc..e62c58df 100644
--- a/webui/src/components/ReopenBugButton/ReopenBugButton.tsx
+++ b/webui/src/components/ReopenBugButton/index.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
import { BugFragment } from 'src/pages/bug/Bug.generated';
import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
@@ -9,7 +10,7 @@ import { useOpenBugMutation } from './OpenBug.generated';
interface Props {
bug: BugFragment;
- disabled: boolean;
+ disabled?: boolean;
}
function ReopenBugButton({ bug, disabled }: Props) {
@@ -36,7 +37,7 @@ function ReopenBugButton({ bug, disabled }: Props) {
});
}
- if (loading) return <div>Loading...</div>;
+ if (loading) return <CircularProgress />;
if (error) return <div>Error</div>;
return (
diff --git a/webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql b/webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql
new file mode 100644
index 00000000..4c220208
--- /dev/null
+++ b/webui/src/components/ReopenBugWithCommentButton/ReopenBugWithComment.graphql
@@ -0,0 +1,11 @@
+mutation AddCommentAndReopenBug($input: AddCommentAndReopenBugInput!) {
+ addCommentAndReopen(input: $input) {
+ statusOperation {
+ status
+ }
+ commentOperation {
+ message
+ }
+ }
+}
+
diff --git a/webui/src/components/ReopenBugWithCommentButton/index.tsx b/webui/src/components/ReopenBugWithCommentButton/index.tsx
new file mode 100644
index 00000000..0a534f27
--- /dev/null
+++ b/webui/src/components/ReopenBugWithCommentButton/index.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+import { BugFragment } from 'src/pages/bug/Bug.generated';
+import { TimelineDocument } from 'src/pages/bug/TimelineQuery.generated';
+
+import { useAddCommentAndReopenBugMutation } from './ReopenBugWithComment.generated';
+
+interface Props {
+ bug: BugFragment;
+ comment: string;
+ postClick?: () => void;
+}
+
+function ReopenBugWithCommentButton({ bug, comment, postClick }: Props) {
+ const [
+ addCommentAndReopenBug,
+ { loading, error },
+ ] = useAddCommentAndReopenBugMutation();
+
+ function addCommentAndReopenBugAction() {
+ addCommentAndReopenBug({
+ variables: {
+ input: {
+ prefix: bug.id,
+ message: comment,
+ },
+ },
+ refetchQueries: [
+ // TODO: update the cache instead of refetching
+ {
+ query: TimelineDocument,
+ variables: {
+ id: bug.id,
+ first: 100,
+ },
+ },
+ ],
+ awaitRefetchQueries: true,
+ }).then(() => {
+ if (postClick) {
+ postClick();
+ }
+ });
+ }
+
+ if (loading) return <CircularProgress />;
+ if (error) return <div>Error</div>;
+
+ return (
+ <div>
+ <Button
+ variant="contained"
+ type="submit"
+ onClick={() => addCommentAndReopenBugAction()}
+ >
+ Reopen bug with comment
+ </Button>
+ </div>
+ );
+}
+
+export default ReopenBugWithCommentButton;
diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx
index b4877974..edf1f352 100644
--- a/webui/src/components/Themer.tsx
+++ b/webui/src/components/Themer.tsx
@@ -1,35 +1,30 @@
import React, { createContext, useContext, useState } from 'react';
-import { fade, ThemeProvider } from '@material-ui/core';
-import IconButton from '@material-ui/core/IconButton/IconButton';
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
+import { ThemeProvider } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
import { Theme } from '@material-ui/core/styles';
import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons';
-import { makeStyles } from '@material-ui/styles';
const ThemeContext = createContext({
toggleMode: () => {},
mode: '',
});
-const useStyles = makeStyles((theme: Theme) => ({
- iconButton: {
- color: fade(theme.palette.primary.contrastText, 0.5),
- },
-}));
-
-const LightSwitch = () => {
+type LightSwitchProps = {
+ className?: string;
+};
+const LightSwitch = ({ className }: LightSwitchProps) => {
const { mode, toggleMode } = useContext(ThemeContext);
const nextMode = mode === 'light' ? 'dark' : 'light';
const description = `Switch to ${nextMode} theme`;
- const classes = useStyles();
return (
<Tooltip title={description}>
<IconButton
onClick={toggleMode}
aria-label={description}
- className={classes.iconButton}
+ className={className}
>
{mode === 'light' ? <WbSunnyRounded /> : <NightsStayRounded />}
</IconButton>
diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx
index a8ce4319..6d917889 100644
--- a/webui/src/pages/bug/CommentForm.tsx
+++ b/webui/src/pages/bug/CommentForm.tsx
@@ -5,8 +5,10 @@ import Paper from '@material-ui/core/Paper';
import { makeStyles, Theme } from '@material-ui/core/styles';
import CommentInput from '../../components/CommentInput/CommentInput';
-import CloseBugButton from 'src/components/CloseBugButton/CloseBugButton';
-import ReopenBugButton from 'src/components/ReopenBugButton/ReopenBugButton';
+import CloseBugButton from 'src/components/CloseBugButton';
+import CloseBugWithCommentButton from 'src/components/CloseBugWithCommentButton';
+import ReopenBugButton from 'src/components/ReopenBugButton';
+import ReopenBugWithCommentButton from 'src/components/ReopenBugWithCommentButton';
import { BugFragment } from './Bug.generated';
import { useAddCommentMutation } from './CommentForm.generated';
@@ -77,12 +79,29 @@ function CommentForm({ bug }: Props) {
if (issueComment.length > 0) submit();
};
- function getCloseButton() {
- return <CloseBugButton bug={bug} disabled={issueComment.length > 0} />;
- }
-
- function getReopenButton() {
- return <ReopenBugButton bug={bug} disabled={issueComment.length > 0} />;
+ function getBugStatusButton() {
+ if (bug.status === 'OPEN' && issueComment.length > 0) {
+ return (
+ <CloseBugWithCommentButton
+ bug={bug}
+ comment={issueComment}
+ postClick={resetForm}
+ />
+ );
+ }
+ if (bug.status === 'OPEN') {
+ return <CloseBugButton bug={bug} />;
+ }
+ if (bug.status === 'CLOSED' && issueComment.length > 0) {
+ return (
+ <ReopenBugWithCommentButton
+ bug={bug}
+ comment={issueComment}
+ postClick={resetForm}
+ />
+ );
+ }
+ return <ReopenBugButton bug={bug} />;
}
return (
@@ -94,7 +113,7 @@ function CommentForm({ bug }: Props) {
onChange={(comment: string) => setIssueComment(comment)}
/>
<div className={classes.actions}>
- {bug.status === 'OPEN' ? getCloseButton() : getReopenButton()}
+ {getBugStatusButton()}
<Button
className={classes.greenButton}
variant="contained"
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 808bb525..51087faa 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -57,6 +57,7 @@ const useStyles = makeStyles((theme) => ({
marginLeft: '0.5rem',
},
body: {
+ overflow: 'auto',
...theme.typography.body2,
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
@@ -156,7 +157,11 @@ function Message({ bug, op }: Props) {
</IfLoggedIn>
</header>
<section className={classes.body}>
- <Content markdown={comment.message} />
+ {comment.message !== '' ? (
+ <Content markdown={comment.message} />
+ ) : (
+ <Content markdown="*No description provided.*" />
+ )}
</section>
</Paper>
);
diff --git a/webui/src/pages/bug/MessageHistoryDialog.tsx b/webui/src/pages/bug/MessageHistoryDialog.tsx
index 5879a373..df8915d9 100644
--- a/webui/src/pages/bug/MessageHistoryDialog.tsx
+++ b/webui/src/pages/bug/MessageHistoryDialog.tsx
@@ -111,6 +111,7 @@ const AccordionSummary = withStyles((theme) => ({
const AccordionDetails = withStyles((theme) => ({
root: {
display: 'block',
+ overflow: 'auto',
padding: theme.spacing(2),
},
}))(MuiAccordionDetails);
@@ -229,7 +230,11 @@ function MessageHistoryDialog({ bugId, commentId, open, onClose }: Props) {
<Typography>{getSummary(index, edit.date)}</Typography>
</AccordionSummary>
<AccordionDetails>
- <Content markdown={edit.message} />
+ {edit.message !== '' ? (
+ <Content markdown={edit.message} />
+ ) : (
+ <Content markdown="*No description provided.*" />
+ )}
</AccordionDetails>
</Accordion>
))}
diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx
index 562149f3..68a3b299 100644
--- a/webui/src/pages/list/BugRow.tsx
+++ b/webui/src/pages/list/BugRow.tsx
@@ -84,7 +84,9 @@ const useStyles = makeStyles((theme) => ({
},
commentCount: {
fontSize: '1rem',
+ minWidth: '2rem',
marginLeft: theme.spacing(0.5),
+ marginRight: theme.spacing(1),
},
commentCountCell: {
display: 'inline-flex',
diff --git a/webui/src/pages/list/Filter.tsx b/webui/src/pages/list/Filter.tsx
index 3559b3ce..496fb3ba 100644
--- a/webui/src/pages/list/Filter.tsx
+++ b/webui/src/pages/list/Filter.tsx
@@ -35,52 +35,50 @@ const ITEM_HEIGHT = 48;
export type Query = { [key: string]: string[] };
function parse(query: string): Query {
- // TODO: extract the rest of the query?
const params: Query = {};
-
- // TODO: support escaping without quotes
- const re = /(\w+):([A-Za-z0-9-]+|(["'])(([^\3]|\\.)*)\3)+/g;
+ let re = new RegExp(/([^:\s]+)(:('[^']*'\S*|"[^"]*"\S*|\S*))?/, 'g');
let matches;
while ((matches = re.exec(query)) !== null) {
if (!params[matches[1]]) {
params[matches[1]] = [];
}
-
- let value;
- if (matches[4]) {
- value = matches[4];
+ if (matches[3] !== undefined) {
+ params[matches[1]].push(matches[3]);
} else {
- value = matches[2];
+ params[matches[1]].push('');
}
- value = value.replace(/\\(.)/g, '$1');
- params[matches[1]].push(value);
}
return params;
}
function quote(value: string): string {
- const hasSingle = value.includes("'");
- const hasDouble = value.includes('"');
const hasSpaces = value.includes(' ');
- if (!hasSingle && !hasDouble && !hasSpaces) {
- return value;
- }
+ const isSingleQuotedRegEx = RegExp(/^'.*'$/);
+ const isDoubleQuotedRegEx = RegExp(/^".*"$/);
+ const isQuoted = () =>
+ isDoubleQuotedRegEx.test(value) || isSingleQuotedRegEx.test(value);
- if (!hasDouble) {
- return `"${value}"`;
+ //Test if label name contains whitespace between quotes. If no quoates but
+ //whitespace, then quote string.
+ if (!isQuoted() && hasSpaces) {
+ value = `"${value}"`;
}
- if (!hasSingle) {
- return `'${value}'`;
+ //Convert single quote (tick) to double quote. This way quoting is always
+ //uniform and can be relied upon by the label menu
+ const hasSingle = value.includes(`'`);
+ if (hasSingle) {
+ value = value.replace(/'/g, `"`);
}
- value = value.replace(/"/g, '\\"');
- return `"${value}"`;
+ return value;
}
function stringify(params: Query): string {
const parts: string[][] = Object.entries(params).map(([key, values]) => {
- return values.map((value) => `${key}:${quote(value)}`);
+ return values.map((value) =>
+ value.length > 0 ? `${key}:${quote(value)}` : key
+ );
});
return new Array<string>().concat(...parts).join(' ');
}
diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx
index e109578d..4ac579f5 100644
--- a/webui/src/pages/list/FilterToolbar.tsx
+++ b/webui/src/pages/list/FilterToolbar.tsx
@@ -56,6 +56,16 @@ function CountingFilter({ query, children, ...props }: CountingFilterProps) {
);
}
+function quoteLabel(value: string) {
+ const hasUnquotedColon = RegExp(/^[^'"].*:.*[^'"]$/);
+ if (hasUnquotedColon.test(value)) {
+ //quote values which contain a colon but are not quoted.
+ //E.g. abc:abc becomes "abc:abc"
+ return `"${value}"`;
+ }
+ return value;
+}
+
type Props = {
query: string;
queryLocation: (query: string) => LocationDescriptor;
@@ -87,7 +97,7 @@ function FilterToolbar({ query, queryLocation }: Props) {
labelsData.repository.validLabels.nodes
) {
labels = labelsData.repository.validLabels.nodes.map((node) => [
- node.name,
+ quoteLabel(node.name),
node.name,
node.color,
]);
@@ -131,7 +141,6 @@ function FilterToolbar({ query, queryLocation }: Props) {
[key]: [],
});
- // TODO: author/label filters
return (
<Toolbar className={classes.toolbar}>
<CountingFilter