fix(projects): handle GitHub token revocation

When a GitHub request is made with a revoked token, the end user is
informed and asked to sign in again.

Author: e18r

apps/projects/app/App.js

@@ -16,12 +16,12 @@ import {
   REQUESTED_GITHUB_TOKEN_FAILURE,
 } from './store/eventTypes'
 
-import { initApolloClient } from './utils/apollo-client'
+import { useApolloClient } from './utils/apollo-client'
 import { getToken, githubPopup, STATUS } from './utils/github'
 import Unauthorized from './components/Content/Unauthorized'
 import { LoadingAnimation } from './components/Shared'
 import { EmptyWrapper } from './components/Shared'
-import { Error } from './components/Card'
+import { Error, Revoked } from './components/Card'
 import { DecoratedReposProvider } from './context/DecoratedRepos'
 import usePathSegments from './hooks/usePathSegments'
 
@@ -50,13 +50,14 @@ const App = () => {
   const [ githubLoading, setGithubLoading ] = useState(false)
   const [ panel, setPanel ] = useState(null)
   const [ panelProps, setPanelProps ] = useState(null)
+  const initApolloClient = useApolloClient()
 
   const {
     github = { status : STATUS.INITIAL },
     isSyncing = true,
   } = appState
 
-  const client = github.token ? initApolloClient(github.token) : null
+  const client = initApolloClient(github.token)
 
   const handlePopupMessage = useCallback(message => {
     if (!popupRef) return
@@ -136,6 +137,12 @@ const App = () => {
         <Error action={noop} />
       </Main>
     )
+  } else if (github.status === STATUS.REVOKED) {
+    return (
+      <Main>
+        <Revoked action={handleGithubSignIn} />
+      </Main>
+    )
   }
 
   return (

apps/projects/app/assets/revoked.svg

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Button, EmptyStateCard, GU, Text, useTheme } from '@aragon/ui'
+import { EmptyWrapper } from '../Shared'
+import revoked from '../../assets/revoked.svg'
+
+const Illustration = () => <img src={revoked} alt="" />
+
+
+const Revoked = ({ action }) => {
+  const theme = useTheme()
+  return (
+    <EmptyWrapper>
+      <EmptyStateCard
+        text={
+          <>
+            <Text css={`margin: ${GU}px`}>
+              Reconnect to GitHub
+            </Text>
+            <Text.Block
+              size="small"
+              color={`${theme.surfaceContentSecondary}`}
+            >
+              It seems that your connection to GitHub has been revoked; please
+              reconnect.
+            </Text.Block>
+          </>
+        }
+        illustration={<Illustration />}
+        action={<Button label="Sign in" onClick={action} />}
+      />
+    </EmptyWrapper>
+  )
+}
+
+Revoked.propTypes = {
+  action: PropTypes.func.isRequired,
+}
+
+export default Revoked

apps/projects/app/components/Card/Revoked.js

@@ -2,4 +2,5 @@ import Empty from './Empty'
 import Project from './Project'
 import Issue from './Issue'
 import Error from './Error'
-export { Empty, Project, Issue, Error }
+import Revoked from './Revoked'
+export { Empty, Project, Issue, Error, Revoked }

apps/projects/app/components/Card/index.js

@@ -12,7 +12,7 @@ import {
 import { useQuery } from '@apollo/react-hooks'
 import useShapedIssue from '../../../hooks/useShapedIssue'
 import { GET_ISSUE } from '../../../utils/gql-queries.js'
-import { initApolloClient } from '../../../utils/apollo-client'
+import { useApolloClient } from '../../../utils/apollo-client'
 import EventsCard from './EventsCard'
 import DetailsCard from './DetailsCard'
 import BountyCard from './BountyCard'
@@ -45,12 +45,12 @@ Wrap.propTypes = {
 
 const IssueDetail = ({ issueId }) => {
   const { appState: { github } } = useAragonApi()
+  const initApolloClient = useApolloClient()
   const client = useMemo(() => initApolloClient(github.token), [])
   const { layoutName } = useLayout()
   const shapeIssue = useShapedIssue()
   const { loading, error, data } = useQuery(GET_ISSUE, {
     client,
-    onError: console.error,
     variables: { id: issueId },
   })
   if (loading) return <Wrap>Loading...</Wrap>

apps/projects/app/components/Content/IssueDetail/index.js

@@ -7,7 +7,7 @@ import { useAragonApi } from '../../api-react'
 import { Button, GU, Header, IconPlus, Text } from '@aragon/ui'
 import { compareAsc, compareDesc } from 'date-fns'
 
-import { initApolloClient } from '../../utils/apollo-client'
+import { useApolloClient } from '../../utils/apollo-client'
 import useShapedIssue from '../../hooks/useShapedIssue'
 import usePathSegments from '../../hooks/usePathSegments'
 import { STATUS } from '../../utils/github'
@@ -350,7 +350,7 @@ class Issues extends React.PureComponent {
 }
 
 const IssuesQuery = ({ client, query, ...props }) => {
-  const graphqlQuery = useQuery(query, { client, onError: console.error })
+  const graphqlQuery = useQuery(query, { client })
   return <Issues graphqlQuery={graphqlQuery} {...props} />
 }
 
@@ -360,6 +360,7 @@ IssuesQuery.propTypes = {
 }
 
 const IssuesWrap = props => {
+  const initApolloClient = useApolloClient()
   const { appState } = useAragonApi()
   const {
     repos,
@@ -417,7 +418,8 @@ const IssuesWrap = props => {
   }, [ downloadedRepos, filters, repos ])
 
   useEffect(() => {
-    setClient(github.token ? initApolloClient(github.token) : null)
+    const apolloClient = initApolloClient(github.token)
+    setClient(apolloClient)
   }, [github.token])
 
   return (

apps/projects/app/components/Content/Issues.js

@@ -110,7 +110,6 @@ class NewIssue extends React.PureComponent {
         <Mutation
           mutation={NEW_ISSUE}
           variables={{ title, description, id }}
-          onError={console.error}
         >
           {(newIssue, result) => {
             const { data, loading, error, called } = result

apps/projects/app/components/Panel/NewIssue/NewIssue.js

@@ -123,7 +123,6 @@ const NewProject = () => {
           <Query
             fetchPolicy="cache-first"
             query={GET_REPOSITORIES}
-            onError={console.error}
           >
             {({ data, loading, error, refetch }) => {
               if (data && data.viewer) {

apps/projects/app/components/Panel/NewProject/NewProject.js

@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react'
 import { useAragonApi } from '../api-react'
-import { initApolloClient } from '../utils/apollo-client'
+import { useApolloClient } from '../utils/apollo-client'
 import { CURRENT_USER } from '../utils/gql-queries'
 
 const useGithubAuth = () => {
   const { appState } = useAragonApi()
+  const initApolloClient = useApolloClient()
   const token = appState.github && appState.github.token
 
   const [ githubCurrentUser, setGithubCurrentUser ] = useState({})

apps/projects/app/hooks/useGithubAuth.js

@@ -3,6 +3,7 @@ export const REQUESTING_GITHUB_TOKEN = 'Requesting_GitHub_Token'
 export const REQUESTED_GITHUB_TOKEN_SUCCESS = 'Requesting_GitHub_Token_Success'
 export const REQUESTED_GITHUB_TOKEN_FAILURE = 'Requesting_GitHub_Token_Failure'
 export const REQUESTED_GITHUB_DISCONNECT = 'Requested_GitHub_Disconnect'
+export const GITHUB_TOKEN_REVOKED = 'Github_Token_Revoked'
 
 /* Projects.sol events */
 export const REPO_ADDED = 'RepoAdded'