aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'webui/src/pages')
-rw-r--r--webui/src/pages/bug/LabelChange.tsx8
-rw-r--r--webui/src/pages/bug/Message.tsx1
-rw-r--r--webui/src/pages/bug/SetStatus.tsx8
-rw-r--r--webui/src/pages/bug/SetTitle.tsx8
-rw-r--r--webui/src/pages/identity/BugList.tsx73
-rw-r--r--webui/src/pages/identity/GetBugsByUser.graphql12
-rw-r--r--webui/src/pages/identity/GetUserStatistic.graphql13
-rw-r--r--webui/src/pages/identity/Identity.tsx147
-rw-r--r--webui/src/pages/identity/IdentityQuery.tsx24
-rw-r--r--webui/src/pages/identity/index.tsx1
-rw-r--r--webui/src/pages/list/BugRow.tsx6
-rw-r--r--webui/src/pages/list/ListQuery.tsx2
-rw-r--r--webui/src/pages/new/NewBug.graphql4
-rw-r--r--webui/src/pages/new/NewBugPage.tsx2
14 files changed, 294 insertions, 15 deletions
diff --git a/webui/src/pages/bug/LabelChange.tsx b/webui/src/pages/bug/LabelChange.tsx
index 712c33fa..868d8c9b 100644
--- a/webui/src/pages/bug/LabelChange.tsx
+++ b/webui/src/pages/bug/LabelChange.tsx
@@ -1,5 +1,6 @@
import React from 'react';
+import { Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import Author from 'src/components/Author';
@@ -10,11 +11,12 @@ import { LabelChangeFragment } from './LabelChangeFragment.generated';
const useStyles = makeStyles((theme) => ({
main: {
- ...theme.typography.body2,
+ color: theme.palette.text.secondary,
marginLeft: theme.spacing(1) + 40,
},
author: {
fontWeight: 'bold',
+ color: theme.palette.text.secondary,
},
label: {
maxWidth: '50ch',
@@ -31,7 +33,7 @@ function LabelChange({ op }: Props) {
const { added, removed } = op;
const classes = useStyles();
return (
- <div className={classes.main}>
+ <Typography className={classes.main}>
<Author author={op.author} className={classes.author} />
{added.length > 0 && <span> added the </span>}
{added.map((label, index) => (
@@ -48,7 +50,7 @@ function LabelChange({ op }: Props) {
{added.length + removed.length > 1 && 's'}{' '}
</span>
<Date date={op.date} />
- </div>
+ </Typography>
);
}
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 39b11ccd..808bb525 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -21,6 +21,7 @@ import MessageHistoryDialog from './MessageHistoryDialog';
const useStyles = makeStyles((theme) => ({
author: {
fontWeight: 'bold',
+ color: theme.palette.info.contrastText,
},
container: {
display: 'flex',
diff --git a/webui/src/pages/bug/SetStatus.tsx b/webui/src/pages/bug/SetStatus.tsx
index 855848f9..f231b917 100644
--- a/webui/src/pages/bug/SetStatus.tsx
+++ b/webui/src/pages/bug/SetStatus.tsx
@@ -1,5 +1,6 @@
import React from 'react';
+import { Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { Status } from '../../gqlTypes';
@@ -10,11 +11,12 @@ import { SetStatusFragment } from './SetStatusFragment.generated';
const useStyles = makeStyles((theme) => ({
main: {
- ...theme.typography.body2,
+ color: theme.palette.text.secondary,
marginLeft: theme.spacing(1) + 40,
},
author: {
fontWeight: 'bold',
+ color: theme.palette.text.secondary,
},
}));
@@ -29,11 +31,11 @@ function SetStatus({ op }: Props) {
];
return (
- <div className={classes.main}>
+ <Typography className={classes.main}>
<Author author={op.author} className={classes.author} />
<span> {status} this </span>
<Date date={op.date} />
- </div>
+ </Typography>
);
}
diff --git a/webui/src/pages/bug/SetTitle.tsx b/webui/src/pages/bug/SetTitle.tsx
index 98bea928..057062f7 100644
--- a/webui/src/pages/bug/SetTitle.tsx
+++ b/webui/src/pages/bug/SetTitle.tsx
@@ -1,5 +1,6 @@
import React from 'react';
+import { Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import Author from 'src/components/Author';
@@ -9,11 +10,12 @@ import { SetTitleFragment } from './SetTitleFragment.generated';
const useStyles = makeStyles((theme) => ({
main: {
- ...theme.typography.body2,
+ color: theme.palette.text.secondary,
marginLeft: theme.spacing(1) + 40,
},
author: {
fontWeight: 'bold',
+ color: theme.palette.text.secondary,
},
before: {
fontWeight: 'bold',
@@ -31,14 +33,14 @@ type Props = {
function SetTitle({ op }: Props) {
const classes = useStyles();
return (
- <div className={classes.main}>
+ <Typography className={classes.main}>
<Author author={op.author} className={classes.author} />
<span> changed the title from </span>
<span className={classes.before}>{op.was}</span>
<span> to </span>
<span className={classes.after}>{op.title}</span>&nbsp;
<Date date={op.date} />
- </div>
+ </Typography>
);
}
diff --git a/webui/src/pages/identity/BugList.tsx b/webui/src/pages/identity/BugList.tsx
new file mode 100644
index 00000000..fbddb0fe
--- /dev/null
+++ b/webui/src/pages/identity/BugList.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+
+import { Card, Divider, Link, Typography } from '@material-ui/core';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { makeStyles } from '@material-ui/core/styles';
+
+import Date from '../../components/Date';
+
+import { useGetBugsByUserQuery } from './GetBugsByUser.generated';
+
+const useStyles = makeStyles((theme) => ({
+ main: {
+ ...theme.typography.body2,
+ },
+ bugLink: {
+ ...theme.typography.button,
+ },
+ cards: {
+ backgroundColor: theme.palette.background.default,
+ color: theme.palette.info.contrastText,
+ padding: theme.spacing(1),
+ margin: theme.spacing(1),
+ },
+}));
+
+type Props = {
+ id: string;
+};
+
+function BugList({ id }: Props) {
+ const classes = useStyles();
+ const { loading, error, data } = useGetBugsByUserQuery({
+ variables: {
+ query: 'author:' + id + ' sort:creation',
+ },
+ });
+
+ if (loading) return <CircularProgress />;
+ if (error) return <p>Error: {error}</p>;
+ const bugs = data?.repository?.allBugs.nodes;
+
+ return (
+ <div className={classes.main}>
+ {bugs?.map((bug, index) => {
+ return (
+ <Card className={classes.cards} key={index}>
+ <Typography variant="overline" component="h2">
+ <Link
+ className={classes.bugLink}
+ href={'/bug/' + bug.id}
+ color={'inherit'}
+ >
+ {bug.title}
+ </Link>
+ </Typography>
+ <Divider />
+ <Typography variant="subtitle2">
+ Created&nbsp;
+ <Date date={bug.createdAt} />
+ </Typography>
+ <Typography variant="subtitle2">
+ Last edited&nbsp;
+ <Date date={bug.createdAt} />
+ </Typography>
+ </Card>
+ );
+ })}
+ {bugs?.length === 0 && <p>No authored bugs by this user found.</p>}
+ </div>
+ );
+}
+
+export default BugList;
diff --git a/webui/src/pages/identity/GetBugsByUser.graphql b/webui/src/pages/identity/GetBugsByUser.graphql
new file mode 100644
index 00000000..0f170dc1
--- /dev/null
+++ b/webui/src/pages/identity/GetBugsByUser.graphql
@@ -0,0 +1,12 @@
+query GetBugsByUser ($query: String){
+ repository {
+ allBugs(query: $query) {
+ nodes {
+ id
+ title
+ createdAt
+ lastEdit
+ }
+ }
+ }
+}
diff --git a/webui/src/pages/identity/GetUserStatistic.graphql b/webui/src/pages/identity/GetUserStatistic.graphql
new file mode 100644
index 00000000..318b860d
--- /dev/null
+++ b/webui/src/pages/identity/GetUserStatistic.graphql
@@ -0,0 +1,13 @@
+query GetUserStatistic($authorQuery: String!, $participantQuery: String!, $actionQuery: String!) {
+ repository {
+ authored: allBugs(query: $authorQuery) {
+ totalCount
+ },
+ participated: allBugs(query: $participantQuery) {
+ totalCount
+ }
+ actions: allBugs(query: $actionQuery) {
+ totalCount
+ }
+ }
+}
diff --git a/webui/src/pages/identity/Identity.tsx b/webui/src/pages/identity/Identity.tsx
new file mode 100644
index 00000000..5170eeea
--- /dev/null
+++ b/webui/src/pages/identity/Identity.tsx
@@ -0,0 +1,147 @@
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+
+import { Link, Paper, Typography } from '@material-ui/core';
+import Avatar from '@material-ui/core/Avatar';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
+import InfoIcon from '@material-ui/icons/Info';
+import MailOutlineIcon from '@material-ui/icons/MailOutline';
+
+import { IdentityFragment } from '../../components/Identity/IdentityFragment.generated';
+
+import { useGetUserStatisticQuery } from './GetUserStatistic.generated';
+
+const useStyles = makeStyles((theme) => ({
+ main: {
+ maxWidth: 1000,
+ margin: 'auto',
+ marginTop: theme.spacing(3),
+ },
+ content: {
+ padding: theme.spacing(0.5, 2, 2, 2),
+ wordWrap: 'break-word',
+ },
+ large: {
+ minWidth: 200,
+ minHeight: 200,
+ margin: 'auto',
+ maxWidth: '100%',
+ maxHeight: '100%',
+ },
+ heading: {
+ marginTop: theme.spacing(3),
+ },
+ header: {
+ ...theme.typography.h4,
+ wordBreak: 'break-word',
+ },
+ infoIcon: {
+ verticalAlign: 'bottom',
+ },
+}));
+
+type Props = {
+ identity: IdentityFragment;
+};
+const Identity = ({ identity }: Props) => {
+ const classes = useStyles();
+ const user = identity;
+
+ const { loading, error, data } = useGetUserStatisticQuery({
+ variables: {
+ authorQuery: 'author:' + user?.id,
+ participantQuery: 'participant:' + user?.id,
+ actionQuery: 'actor:' + user?.id,
+ },
+ });
+
+ if (loading) return <CircularProgress />;
+ if (error) return <p>Error: {error}</p>;
+ const statistic = data?.repository;
+ const authoredCount = statistic?.authored?.totalCount;
+ const participatedCount = statistic?.participated?.totalCount;
+ const actionCount = statistic?.actions?.totalCount;
+
+ return (
+ <main className={classes.main}>
+ <Paper elevation={3} className={classes.content}>
+ <Grid spacing={2} container direction="row">
+ <Grid xs={12} sm={4} className={classes.heading} item>
+ <Avatar
+ src={user?.avatarUrl ? user.avatarUrl : undefined}
+ className={classes.large}
+ >
+ {user?.displayName.charAt(0).toUpperCase()}
+ </Avatar>
+ </Grid>
+ <Grid xs={12} sm={4} item>
+ <section>
+ <h1 className={classes.header}>{user?.name}</h1>
+ <Typography variant="subtitle1">
+ Name: {user?.displayName ? user?.displayName : '---'}
+ </Typography>
+ <Typography variant="subtitle1">
+ Id (truncated): {user?.humanId ? user?.humanId : '---'}
+ <InfoIcon
+ titleAccess={user?.id ? user?.id : '---'}
+ className={classes.infoIcon}
+ />
+ </Typography>
+ {user?.email && (
+ <Typography
+ variant="subtitle1"
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ flexWrap: 'wrap',
+ }}
+ >
+ <MailOutlineIcon />
+ <Link href={'mailto:' + user?.email} color={'inherit'}>
+ {user?.email}
+ </Link>
+ </Typography>
+ )}
+ </section>
+ </Grid>
+ <Grid xs={12} sm={4} item>
+ <section>
+ <h1 className={classes.header}>Statistics</h1>
+ <Link
+ component={RouterLink}
+ to={`/?q=author%3A${user?.id}+sort%3Acreation`}
+ color={'inherit'}
+ >
+ <Typography variant="subtitle1">
+ Created {authoredCount} bugs.
+ </Typography>
+ </Link>
+ <Link
+ component={RouterLink}
+ to={`/?q=participant%3A${user?.id}+sort%3Acreation`}
+ color={'inherit'}
+ >
+ <Typography variant="subtitle1">
+ Participated to {participatedCount} bugs.
+ </Typography>
+ </Link>
+ <Link
+ component={RouterLink}
+ to={`/?q=actor%3A${user?.id}+sort%3Acreation`}
+ color={'inherit'}
+ >
+ <Typography variant="subtitle1">
+ Interacted with {actionCount} bugs.
+ </Typography>
+ </Link>
+ </section>
+ </Grid>
+ </Grid>
+ </Paper>
+ </main>
+ );
+};
+
+export default Identity;
diff --git a/webui/src/pages/identity/IdentityQuery.tsx b/webui/src/pages/identity/IdentityQuery.tsx
new file mode 100644
index 00000000..964a9bac
--- /dev/null
+++ b/webui/src/pages/identity/IdentityQuery.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+import { useGetUserByIdQuery } from '../../components/Identity/UserIdentity.generated';
+
+import Identity from './Identity';
+
+type Props = RouteComponentProps<{
+ id: string;
+}>;
+
+const UserQuery: React.FC<Props> = ({ match }: Props) => {
+ const { loading, error, data } = useGetUserByIdQuery({
+ variables: { userId: match.params.id },
+ });
+ if (loading) return <CircularProgress />;
+ if (error) return <p>Error: {error}</p>;
+ if (!data?.repository?.identity) return <p>404.</p>;
+ return <Identity identity={data.repository.identity} />;
+};
+
+export default UserQuery;
diff --git a/webui/src/pages/identity/index.tsx b/webui/src/pages/identity/index.tsx
new file mode 100644
index 00000000..06208687
--- /dev/null
+++ b/webui/src/pages/identity/index.tsx
@@ -0,0 +1 @@
+export { default } from './IdentityQuery';
diff --git a/webui/src/pages/list/BugRow.tsx b/webui/src/pages/list/BugRow.tsx
index 87e45581..562149f3 100644
--- a/webui/src/pages/list/BugRow.tsx
+++ b/webui/src/pages/list/BugRow.tsx
@@ -9,6 +9,7 @@ import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
import CommentOutlinedIcon from '@material-ui/icons/CommentOutlined';
import ErrorOutline from '@material-ui/icons/ErrorOutline';
+import Author from 'src/components/Author';
import Date from 'src/components/Date';
import Label from 'src/components/Label';
import { Status } from 'src/gqlTypes';
@@ -105,7 +106,7 @@ function BugRow({ bug }: Props) {
<TableCell className={classes.cell}>
<BugStatus status={bug.status} className={classes.status} />
<div className={classes.expand}>
- <Link to={'bug/' + bug.humanId}>
+ <Link to={'bug/' + bug.id}>
<div className={classes.bugTitleWrapper}>
<span className={classes.title}>{bug.title}</span>
{bug.labels.length > 0 &&
@@ -117,7 +118,8 @@ function BugRow({ bug }: Props) {
<div className={classes.details}>
{bug.humanId} opened&nbsp;
<Date date={bug.createdAt} />
- &nbsp;by {bug.author.displayName}
+ &nbsp;by&nbsp;
+ <Author className={classes.details} author={bug.author} />
</div>
</div>
<span className={classes.commentCountCell}>
diff --git a/webui/src/pages/list/ListQuery.tsx b/webui/src/pages/list/ListQuery.tsx
index 2b46dca5..9aefd02d 100644
--- a/webui/src/pages/list/ListQuery.tsx
+++ b/webui/src/pages/list/ListQuery.tsx
@@ -14,7 +14,7 @@ import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import Skeleton from '@material-ui/lab/Skeleton';
-import { useCurrentIdentityQuery } from '../../components/CurrentIdentity/CurrentIdentity.generated';
+import { useCurrentIdentityQuery } from '../../components/Identity/CurrentIdentity.generated';
import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
import { parse, Query, stringify } from './Filter';
diff --git a/webui/src/pages/new/NewBug.graphql b/webui/src/pages/new/NewBug.graphql
index 92df016e..ef024e41 100644
--- a/webui/src/pages/new/NewBug.graphql
+++ b/webui/src/pages/new/NewBug.graphql
@@ -1,7 +1,7 @@
mutation newBug($input: NewBugInput!) {
newBug(input: $input) {
bug {
- humanId
+ id
}
}
-} \ No newline at end of file
+}
diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx
index 4dc60e3c..cdec3558 100644
--- a/webui/src/pages/new/NewBugPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -62,7 +62,7 @@ function NewBugPage() {
},
},
}).then(function (data) {
- const id = data.data?.newBug.bug.humanId;
+ const id = data.data?.newBug.bug.id;
history.push('/bug/' + id);
});
issueTitleInput.value = '';