Add support for read-only mode for web UI.

Fixes #402.

6 files changed, 57 insertions, 17 deletions

diff --git a/webui/src/layout/CurrentIdentity.tsx b/webui/src/layout/CurrentIdentity.tsx
index 21f489ef..55060179 100644
--- a/webui/src/layout/CurrentIdentity.tsx
+++ b/webui/src/layout/CurrentIdentity.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Avatar from '@material-ui/core/Avatar';
 import { makeStyles } from '@material-ui/core/styles';
 
-import { useCurrentIdentityQuery } from './CurrentIdentity.generated';
+import CurrentIdentityContext from './CurrentIdentityContext';
 
 const useStyles = makeStyles(theme => ({
   displayName: {
@@ -13,18 +13,26 @@ const useStyles = makeStyles(theme => ({
 
 const CurrentIdentity = () => {
   const classes = useStyles();
-  const { loading, error, data } = useCurrentIdentityQuery();
 
-  if (error || loading || !data?.repository?.userIdentity) return null;
-
-  const user = data.repository.userIdentity;
   return (
-    <>
-      <Avatar src={user.avatarUrl ? user.avatarUrl : undefined}>
-        {user.displayName.charAt(0).toUpperCase()}
-      </Avatar>
-      <div className={classes.displayName}>{user.displayName}</div>
-    </>
+    <CurrentIdentityContext.Consumer>
+      {context => {
+        if (!context) return null;
+        const { loading, error, data } = context as any;
+
+        if (error || loading || !data?.repository?.userIdentity) return null;
+
+        const user = data.repository.userIdentity;
+        return (
+          <>
+            <Avatar src={user.avatarUrl ? user.avatarUrl : undefined}>
+              {user.displayName.charAt(0).toUpperCase()}
+            </Avatar>
+            <div className={classes.displayName}>{user.displayName}</div>
+          </>
+        );
+      }}
+    </CurrentIdentityContext.Consumer>
   );
 };
 
diff --git a/webui/src/layout/CurrentIdentityContext.tsx b/webui/src/layout/CurrentIdentityContext.tsx
new file mode 100644
index 00000000..78f2f263
--- /dev/null
+++ b/webui/src/layout/CurrentIdentityContext.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+
+import { CurrentIdentityQueryResult } from './CurrentIdentity.generated';
+
+const Context = React.createContext(null as CurrentIdentityQueryResult | null);
+export default Context;
diff --git a/webui/src/layout/ReadonlyHidden.tsx b/webui/src/layout/ReadonlyHidden.tsx
new file mode 100644
index 00000000..9ed0af6a
--- /dev/null
+++ b/webui/src/layout/ReadonlyHidden.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import CurrentIdentityContext from './CurrentIdentityContext';
+
+type Props = { children: React.ReactNode };
+const ReadonlyHidden = ({ children }: Props) => (
+  <CurrentIdentityContext.Consumer>
+    {context => {
+      if (!context) return null;
+      const { loading, error, data } = context;
+
+      if (error || loading || !data?.repository?.userIdentity) return null;
+
+      return <>{children}</>;
+    }}
+  </CurrentIdentityContext.Consumer>
+);
+
+export default ReadonlyHidden;
diff --git a/webui/src/layout/index.tsx b/webui/src/layout/index.tsx
index 42a0cfc1..78ff5ae8 100644
--- a/webui/src/layout/index.tsx
+++ b/webui/src/layout/index.tsx
@@ -2,16 +2,18 @@ import React from 'react';
 
 import CssBaseline from '@material-ui/core/CssBaseline';
 
+import { useCurrentIdentityQuery } from './CurrentIdentity.generated';
+import CurrentIdentityContext from './CurrentIdentityContext';
 import Header from './Header';
 
 type Props = { children: React.ReactNode };
 function Layout({ children }: Props) {
   return (
-    <>
+    <CurrentIdentityContext.Provider value={useCurrentIdentityQuery()}>
       <CssBaseline />
       <Header />
       {children}
-    </>
+    </CurrentIdentityContext.Provider>
   );
 }
 
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index 1bc128dd..99b9bddd 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -6,6 +6,7 @@ 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 ReadonlyHidden from 'src/layout/ReadonlyHidden';
 
 import { BugFragment } from './Bug.generated';
 import CommentForm from './CommentForm';
@@ -88,9 +89,11 @@ function Bug({ bug }: Props) {
       <div className={classes.container}>
         <div className={classes.timeline}>
           <TimelineQuery id={bug.id} />
-          <div className={classes.commentForm}>
-            <CommentForm bugId={bug.id} />
-          </div>
+          <ReadonlyHidden>
+            <div className={classes.commentForm}>
+              <CommentForm bugId={bug.id} />
+            </div>
+          </ReadonlyHidden>
         </div>
         <div className={classes.sidebar}>
           <span className={classes.sidebarTitle}>Labels</span>
diff --git a/webui/src/pages/bug/CommentForm.graphql b/webui/src/pages/bug/CommentForm.graphql
index 33d21193..f4b61850 100644
--- a/webui/src/pages/bug/CommentForm.graphql
+++ b/webui/src/pages/bug/CommentForm.graphql
@@ -1,5 +1,7 @@
 mutation AddComment($input: AddCommentInput!) {
   addComment(input: $input) {
-    operation { id }
+    operation {
+      id
+    }
   }
 }