Merge pull request #58 from filecoin-project/feat/github-installation…

…-id-setup feat: added success / failure page for github installation id recordi…
filecoin-project · Mar 13, 2024 · 5887ab9 · 5887ab9
2 parents 8b5a6d2 + 23bec74
commit 5887ab9
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 4 deletions.
diff --git a/src/app/app-setup/page.tsx b/src/app/app-setup/page.tsx
@@ -0,0 +1,99 @@
+'use client'
+
+import { Spinner } from '@/components/ui/spinner'
+import { submitGitHubInstallationId } from '@/lib/apiClient'
+import { useSearchParams } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { toast } from 'react-toastify'
+
+const AppSetupSuccess: React.FC = () => {
+  const [isLoading, setIsLoading] = useState(true)
+  const [isSuccess, setIsSuccess] = useState(false)
+  const [repositories, setRepositories] = useState<string[]>([])
+  const params = useSearchParams()
+
+  useEffect(() => {
+    const githubInstallationId = params.get('installation_id')
+    if (!githubInstallationId) {
+      toast.error('No installation ID found')
+      setIsSuccess(false)
+      setIsLoading(false)
+    } else {
+      void (async () => {
+        const response = await submitGitHubInstallationId(githubInstallationId)
+        setRepositories(
+          response.repositories.map((repo) => `${repo.owner}/${repo.slug}`),
+        )
+        setIsSuccess(true)
+        setIsLoading(false)
+      })()
+    }
+  }, [])
+
+  if (isLoading)
+    return (
+      <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-20">
+        <Spinner />
+      </div>
+    )
+
+  if (!isSuccess) {
+    return (
+      <div
+        style={{ height: 'calc(100% - 4rem)' }}
+        className="bg-gray-100 flex flex-col items-center justify-center"
+      >
+        <div className="text-center p-4">
+          <h1 className="text-2xl font-bold text-red-600 mb-2">
+            Installation Failed
+          </h1>
+          {params.get('installation_id') ? (
+            <p className="text-lg text-gray-600">
+              We encountered an issue recording the GitHub app installation in
+              the repositories.
+            </p>
+          ) : (
+            <p className="text-lg text-gray-600">No installation ID found</p>
+          )}
+        </div>
+
+        {params.get('installation_id') && (
+          <div className="mt-6 text-red-600">Please try again later</div>
+        )}
+      </div>
+    )
+  } else {
+    return (
+      <div
+        style={{ height: 'calc(100% - 4rem)' }}
+        className="bg-gray-100 flex flex-col items-center justify-center"
+      >
+        <div className="text-center p-4">
+          <h1 className="text-2xl font-bold text-gray-800 mb-2">
+            Installation Successful!
+          </h1>
+          <p className="text-lg text-gray-600">
+            The GitHub App has been successfully recorded in the following
+            repositories:
+          </p>
+        </div>
+
+        <div className="mt-4 p-4 bg-white shadow-md rounded-lg w-3/4 md:w-1/2">
+          <ul>
+            {repositories.map((repo, index) => (
+              <li
+                key={index}
+                style={{ color: 'rgb(1,146,255)' }}
+                className="text-lg list-none p-2 border-b border-gray-200"
+              >
+                {repo}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default AppSetupSuccess
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout({
 }): JSX.Element {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={inter.className + ' h-screen'}>
         <ReactQueryProvider>
           <AuthProvider>
             <AllocatorProvider>

diff --git a/src/lib/AllocatorProvider.tsx b/src/lib/AllocatorProvider.tsx
@@ -44,6 +44,7 @@ export const AllocatorProvider: React.FunctionComponent<
   const { data: allocatorsData } = useQuery({
     queryKey: ['allocator'],
     queryFn: getAllocators,
+    refetchOnWindowFocus: false,
   })
 
   useEffect(() => {
@@ -52,9 +53,11 @@ export const AllocatorProvider: React.FunctionComponent<
 
     const allocatorsDataParsed = allocatorsData.filter((e) =>
       e.verifiers_gh_handles
-        .split(',')
-        .map((handle) => handle.trim().toLowerCase())
-        .includes(githubUsername),
+        ? e.verifiers_gh_handles
+            .split(',')
+            .map((handle) => handle.trim().toLowerCase())
+            .includes(githubUsername)
+        : false,
     )
 
     setAllocators(allocatorsDataParsed)

diff --git a/src/lib/apiClient.ts b/src/lib/apiClient.ts
@@ -287,3 +287,28 @@ export const getAllocators = async (): Promise<Allocator[]> => {
     throw e
   }
 }
+
+/**
+ * Sends the new GitHub Installation ID to the backend.
+ */
+export const submitGitHubInstallationId = async (
+  installationId: string | number,
+): Promise<{
+  installation_id: string
+  repositories: Array<{
+    owner: string
+    slug: string
+  }>
+}> => {
+  try {
+    const response = await apiClient.get('allocator/update_installation_id', {
+      params: {
+        installation_id: installationId,
+      },
+    })
+    return response.data
+  } catch (e) {
+    console.error(e)
+    throw e
+  }
+}