import { useEffect, useMemo } from 'react' import { mdiPlus } from '@mdi/js' import classNames from 'classnames' import { useLocation } from 'react-router-dom' import { useQuery } from '@sourcegraph/http-client' import type { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry' import { EVENT_LOGGER } from '@sourcegraph/shared/src/telemetry/web/eventLogger' import { ButtonLink, Container, ErrorAlert, Icon, Link, LoadingSpinner, PageHeader } from '@sourcegraph/wildcard' import { GitHubAppDomain, type GitHubAppsResult, type GitHubAppsVariables } from '../../graphql-operations' import { ConnectionContainer, ConnectionList, ConnectionLoading, ConnectionSummary, SummaryContainer, } from '../FilteredConnection/ui' import { PageTitle } from '../PageTitle' import { GITHUB_APPS_QUERY } from './backend' import { GitHubAppCard } from './GitHubAppCard' import { GitHubAppFailureAlert } from './GitHubAppFailureAlert' import styles from './GitHubAppsPage.module.scss' interface Props extends TelemetryV2Props { batchChangesEnabled: boolean } export const GitHubAppsPage: React.FC = ({ batchChangesEnabled, telemetryRecorder }) => { const { data, loading, error, refetch } = useQuery(GITHUB_APPS_QUERY, { variables: { domain: GitHubAppDomain.REPOS, }, }) const gitHubApps = useMemo(() => data?.gitHubApps?.nodes ?? [], [data]) useEffect(() => { EVENT_LOGGER.logPageView('SiteAdminGitHubApps') telemetryRecorder.recordEvent('admin.GitHubApps', 'view') }, [telemetryRecorder]) const location = useLocation() const success = new URLSearchParams(location.search).get('success') === 'true' const setupError = new URLSearchParams(location.search).get('error') const reloadApps = async (): Promise => { await refetch({}) } if (loading && !data) { return } return ( <> Create and connect a GitHub App to better manage GitHub code host connections.{' '} See how GitHub App configuration works. {batchChangesEnabled && ( <> {' '} To create a GitHub App to sign Batch Changes commits, visit{' '} Batch Changes settings. )} } actions={ Create GitHub App } /> {!success && setupError && } {error && } {loading && !data && } {gitHubApps?.map(app => ( ))} You haven't created any GitHub Apps yet. } noSummaryIfAllNodesVisible={false} centered={true} connection={{ nodes: gitHubApps ?? [], totalCount: gitHubApps?.length ?? 0, }} noun="GitHub App" pluralNoun="GitHub Apps" hasNextPage={false} /> ) }