feat(batches): Add "check" action to validate Github apps connection (#63705)

Closes SRCH-702

![CleanShot 2024-07-09 at 03 28
15@2x](https://github.com/sourcegraph/sourcegraph/assets/25608335/b6011864-fc4e-429c-b320-51c5a0c7b9e1)

This button adds a check button to the `GitHubApps` control that enables
users to check if their GitHub app connection is accessible.

## Test plan

Manual testing.

## Changelog

<!-- OPTIONAL; info at
https://www.notion.so/sourcegraph/Writing-a-changelog-entry-dd997f411d524caabf0d8d38a24a878c
-->

client/web/src/enterprise/batches/settings/CodeHostConnectionNode.tsx

@@ -156,6 +156,7 @@ export const CodeHostConnectionNode: React.FunctionComponent<React.PropsWithChil
                                     config={gitHubApp}
                                     refetch={refetchAll}
                                     gitHubAppKind={gitHubAppKind}
+                                    credentialID={node.credential?.id}
                                 />
                             ) : (
                                 <>

client/web/src/enterprise/batches/settings/GitHubAppControls.tsx

@@ -1,10 +1,11 @@
 import React, { useRef, useState } from 'react'
 
-import { mdiDotsHorizontal, mdiGithub, mdiOpenInNew, mdiPencil, mdiRefresh, mdiTrashCan } from '@mdi/js'
+import { mdiConnection, mdiDotsHorizontal, mdiGithub, mdiOpenInNew, mdiPencil, mdiRefresh, mdiTrashCan } from '@mdi/js'
 import classNames from 'classnames'
 import { useNavigate } from 'react-router-dom'
 import { animated, useSpring } from 'react-spring'
 
+import { useLazyQuery } from '@sourcegraph/http-client'
 import { convertREMToPX } from '@sourcegraph/shared/src/components/utils/size'
 import {
     Alert,
@@ -23,9 +24,14 @@ import {
 
 import { AppLogo } from '../../../components/gitHubApps/AppLogo'
 import { RemoveGitHubAppModal } from '../../../components/gitHubApps/RemoveGitHubAppModal'
-import { GitHubAppByIDFields, GitHubAppKind } from '../../../graphql-operations'
+import {
+    type CheckBatchChangesCredentialResult,
+    type CheckBatchChangesCredentialVariables,
+    type GitHubAppByIDFields,
+    GitHubAppKind,
+} from '../../../graphql-operations'
 
-import { useRefreshGitHubApp } from './backend'
+import { useRefreshGitHubApp, CHECK_BATCH_CHANGES_CREDENTIAL } from './backend'
 
 import styles from './CommitSigningIntegrationNode.module.scss'
 
@@ -34,6 +40,12 @@ interface GitHubAppControlsProps {
     config: Pick<GitHubAppByIDFields, 'id' | 'name' | 'appURL' | 'logo' | 'appID'> | null
     refetch: () => void
     gitHubAppKind?: GitHubAppKind
+
+    /**
+     * If the GitHub app is used as a credential, we need the credential ID, so we can use that
+     * to check if the GitHub app connection is still active.
+     * */
+    credentialID?: string
 }
 
 export const GitHubAppControls: React.FunctionComponent<GitHubAppControlsProps> = ({
@@ -41,12 +53,18 @@ export const GitHubAppControls: React.FunctionComponent<GitHubAppControlsProps>
     config,
     refetch,
     gitHubAppKind,
+    credentialID,
 }) => {
     const [removeModalOpen, setRemoveModalOpen] = useState<boolean>(false)
     const [refreshGitHubApp, { loading, error, data }] = useRefreshGitHubApp()
     const createURL = `/site-admin/batch-changes/github-apps/new?baseURL=${encodeURIComponent(baseURL)}`
     const navigate = useNavigate()
 
+    const [checkCredFn, { data: checkCredResult, loading: checkCredLoading, error: checkCredErr }] = useLazyQuery<
+        CheckBatchChangesCredentialResult,
+        CheckBatchChangesCredentialVariables
+    >(CHECK_BATCH_CHANGES_CREDENTIAL, {})
+
     return config ? (
         <>
             {removeModalOpen && (
@@ -80,6 +98,17 @@ export const GitHubAppControls: React.FunctionComponent<GitHubAppControlsProps>
                         View on GitHub <Icon inline={true} svgPath={mdiOpenInNew} aria-hidden={true} />
                     </MenuItem>
                     <MenuDivider />
+                    {credentialID && (
+                        <MenuItem
+                            as={Button}
+                            disabled={checkCredLoading}
+                            onSelect={() => checkCredFn({ variables: { id: credentialID } })}
+                            className="p-2"
+                        >
+                            <Icon aria-hidden={true} svgPath={mdiConnection} className="mr-1" />
+                            Check
+                        </MenuItem>
+                    )}
                     <MenuItem
                         as={Button}
                         disabled={loading}
@@ -110,6 +139,11 @@ export const GitHubAppControls: React.FunctionComponent<GitHubAppControlsProps>
                     Installations for <span className="font-weight-bold">"{config.name}"</span> successfully refreshed.
                 </NodeAlert>
             )}
+            {!checkCredLoading && (checkCredResult || checkCredErr) && (
+                <NodeAlert variant={checkCredErr ? 'danger' : 'success'}>
+                    <span className="font-weight-bold">"{config.name}"</span> is {checkCredErr ? 'not' : ''} accessible.
+                </NodeAlert>
+            )}
         </>
     ) : (
         <ButtonLink to={createURL} className="ml-auto text-nowrap" variant="success" as={Link} size="sm">