aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src/pages/bug/LabelChange.tsx
diff options
context:
space:
mode:
authorMichael Muré <batolettre@gmail.com>2020-02-23 14:49:09 +0100
committerGitHub <noreply@github.com>2020-02-23 14:49:09 +0100
commitf87d63b3c656f6efba3c62c121f66e513ca3efea (patch)
tree368886eb57bab83c76f73b3b7b0238b483733a30 /webui/src/pages/bug/LabelChange.tsx
parent4559af5e71a2d6d1c53329e565d101c3eadacf6e (diff)
parentf96484391ae817a18f503b5c31cd3bd2211553df (diff)
downloadgit-bug-f87d63b3c656f6efba3c62c121f66e513ca3efea.tar.gz
Merge pull request #331 from MichaelMure/webui/mutations
Webui: add comments
Diffstat (limited to 'webui/src/pages/bug/LabelChange.tsx')
-rw-r--r--webui/src/pages/bug/LabelChange.tsx50
1 files changed, 50 insertions, 0 deletions
diff --git a/webui/src/pages/bug/LabelChange.tsx b/webui/src/pages/bug/LabelChange.tsx
new file mode 100644
index 00000000..93fa8a32
--- /dev/null
+++ b/webui/src/pages/bug/LabelChange.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { makeStyles } from '@material-ui/core/styles';
+
+import Author from 'src/components/Author';
+import Date from 'src/components/Date';
+import Label from 'src/components/Label';
+
+import { LabelChangeFragment } from './LabelChangeFragment.generated';
+
+const useStyles = makeStyles(theme => ({
+ main: {
+ ...theme.typography.body2,
+ marginLeft: theme.spacing(1) + 40,
+ },
+ author: {
+ fontWeight: 'bold',
+ },
+}));
+
+type Props = {
+ op: LabelChangeFragment;
+};
+
+function LabelChange({ op }: Props) {
+ const { added, removed } = op;
+ const classes = useStyles();
+ return (
+ <div className={classes.main}>
+ <Author author={op.author} className={classes.author} />
+ {added.length > 0 && <span> added the </span>}
+ {added.map((label, index) => (
+ <Label key={index} label={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} />
+ ))}
+ <span>
+ {' '}
+ label
+ {added.length + removed.length > 1 && 's'}{' '}
+ </span>
+ <Date date={op.date} />
+ </div>
+ );
+}
+
+export default LabelChange;