aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src
diff options
context:
space:
mode:
authorludovicm67 <ludovicmuller1@gmail.com>2020-01-23 23:37:59 +0100
committerludovicm67 <ludovicmuller1@gmail.com>2020-01-23 23:37:59 +0100
commitdef48e53f4ae206a10d0973439efdd7769e91100 (patch)
tree16ecb40f2cdcfba6e5ba0bda8a2e1d751a04a05e /webui/src
parent8f6bc245038ce7197034877bf0fd5ddcb8d3e24d (diff)
downloadgit-bug-def48e53f4ae206a10d0973439efdd7769e91100.tar.gz
webui: display current identity in the AppBar
Diffstat (limited to 'webui/src')
-rw-r--r--webui/src/App.js12
-rw-r--r--webui/src/CurrentIdentity.js51
2 files changed, 60 insertions, 3 deletions
diff --git a/webui/src/App.js b/webui/src/App.js
index 145cd90d..35778268 100644
--- a/webui/src/App.js
+++ b/webui/src/App.js
@@ -9,6 +9,7 @@ import { Link } from 'react-router-dom';
import BugQuery from './bug/BugQuery';
import ListQuery from './list/ListQuery';
+import CurrentIdentity from './CurrentIdentity';
const theme = createMuiTheme({
palette: {
@@ -24,6 +25,8 @@ const useStyles = makeStyles(theme => ({
...theme.typography.h6,
color: 'white',
textDecoration: 'none',
+ },
+ headerLeft: {
flexGrow: 1,
},
}));
@@ -36,9 +39,12 @@ export default function App() {
<CssBaseline />
<AppBar position="fixed" color="primary">
<Toolbar>
- <Link to="/" className={classes.appTitle}>
- git-bug webui
- </Link>
+ <div className={classes.headerLeft}>
+ <Link to="/" className={classes.appTitle}>
+ git-bug webui
+ </Link>
+ </div>
+ <CurrentIdentity />
</Toolbar>
</AppBar>
<div className={classes.offset} />
diff --git a/webui/src/CurrentIdentity.js b/webui/src/CurrentIdentity.js
new file mode 100644
index 00000000..c8afc531
--- /dev/null
+++ b/webui/src/CurrentIdentity.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import gql from 'graphql-tag';
+import { Query } from 'react-apollo';
+import Avatar from '@material-ui/core/Avatar';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles(theme => ({
+ displayName: {
+ marginLeft: theme.spacing(2),
+ },
+}));
+
+const QUERY = gql`
+ {
+ defaultRepository {
+ userIdentity {
+ displayName
+ avatarUrl
+ }
+ }
+ }
+`;
+
+const CurrentIdentity = () => {
+ const classes = useStyles();
+ return (
+ <Query query={QUERY}>
+ {({ error, data }) => {
+ if (
+ error ||
+ !data ||
+ !data.defaultRepository ||
+ !data.defaultRepository.userIdentity ||
+ !data.defaultRepository.userIdentity.displayName
+ )
+ return <></>;
+ const displayName =
+ data.defaultRepository.userIdentity.displayName || '';
+ const avatar = data.defaultRepository.userIdentity.avatarUrl;
+ return (
+ <>
+ <Avatar src={avatar}>{displayName.charAt(0).toUpperCase()}</Avatar>
+ <div className={classes.displayName}>{displayName}</div>
+ </>
+ );
+ }}
+ </Query>
+ );
+};
+
+export default CurrentIdentity;