fix: make github issue creation creator-restricted and easier for others

prisma/migrations/20241223221420_github_installation_id/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "Project" ADD COLUMN     "githubInstallationId" TEXT,
+ALTER COLUMN "inviteCode" SET DEFAULT floor(random() * 90000000 + 10000000)::text;

prisma/schema.prisma

@@ -37,6 +37,7 @@ model Project {
   name                 String
   description          String
   github               String?
+  githubInstallationId String?
   customData           String[]
   rateLimitReq         Int      @default(5)
   rateLimitTime        Int      @default(60)

src/components/app/GithubRepoChooser/GithubRepoChooser.tsx

@@ -20,7 +20,7 @@ import { getRepos } from './getRepos';
 export default function GithubRepoChooser(props: Props) {
   const [open, setOpen] = React.useState(false);
   const [value, setValue] = React.useState('');
-  const [repos, setRepos] = React.useState<string[]>([]);
+  const [repos, setRepos] = React.useState<{ name: string, installationId: string }[]>([]);
   const [isLoading, setIsLoading] = React.useState(true);
   const [displayText, setDisplayText] = React.useState('Select a repository');
 
@@ -30,16 +30,22 @@ export default function GithubRepoChooser(props: Props) {
       if (response.success) {
         setRepos(response.repos!);
         setIsLoading(false);
+        if (props.selected) {
+          setValue(props.selected);
+        }
       }
     });
-    setValue(props.selected ?? '');
   }, []);
   React.useEffect(() => {
-    props.onSelect(value);
+    if (isLoading || !value) return;
-  }, [value]);
+    const repo = repos.find((repo) => repo.name === value);
+    if (repo) {
+      props.onSelect(value, repo.installationId);
+    }
+  }, [value, repos, isLoading, props.onSelect]);
   React.useEffect(() => {
-    if (value.length > 0) {
+    if (value.length > 0 && !isLoading) {
-      setDisplayText(repos.find((repo) => repo === value)!);
+      setDisplayText(repos.find((repo) => repo.name === value)!.name);
     } else if (repos.length === 0) {
       setDisplayText('No repositories found');
     } else {
@@ -69,16 +75,15 @@ export default function GithubRepoChooser(props: Props) {
             <CommandGroup>
               {repos.map((repo) => (
                 <CommandItem
-                  key={repo}
+                  key={repo.name}
-                  value={repo}
+                  value={repo.name}
                   onSelect={(currentValue) => {
-                    console.log(currentValue, value);
+                    setValue(currentValue);
-                    setValue(currentValue === value ? '' : currentValue);
                     setOpen(false);
                   }}
                 >
-                  {repo}
+                  {repo.name}
-                  <Check className={cn('ml-auto', value === repo ? 'opacity-100' : 'opacity-0')} />
+                  <Check className={cn('ml-auto', value === repo.name ? 'opacity-100' : 'opacity-0')} />
                 </CommandItem>
               ))}
             </CommandGroup>
@@ -90,6 +95,6 @@ export default function GithubRepoChooser(props: Props) {
 }
 
 interface Props {
-  onSelect: (repo: string) => void;
+  onSelect: (repo: string, installationId: string) => void;
   selected?: string;
 }

src/components/app/GithubRepoChooser/getRepos.ts

@@ -9,7 +9,7 @@ export async function getRepos() {
     return { success: false, error: 'You must be logged in' };
   }
 
-  const repoList: Array<{ name: string; pushed_at: string }> = [];
+  const repoList: Array<{ name: string; pushed_at: string; installationId: string }> = [];
 
   for (const installation of user.installations) {
     const octokit = await octokitApp.getInstallationOctokit(Number(installation));
@@ -28,6 +28,7 @@ export async function getRepos() {
     const repoData = repos.repositories.map((repo) => ({
       name: repo.full_name,
       pushed_at: repo.pushed_at ?? '1970-01-01T00:00:00Z',
+      installationId: installation,
     }));
 
     repoList.push(...repoData);
@@ -35,7 +36,9 @@ export async function getRepos() {
 
   const sortedRepos = repoList
     .sort((a, b) => new Date(b.pushed_at).getTime() - new Date(a.pushed_at).getTime())
-    .map((repo) => repo.name);
+    .map((repo) => {
+      return { name: repo.name, installationId: repo.installationId };
+    });
 
   return { success: true, repos: sortedRepos };
 }

src/components/app/ProjectSettings/ProjectSettings.tsx

@@ -25,9 +25,12 @@ import React from 'react';
 import Link from 'next/link';
 import InviteCodeViewer from '../InviteCodeViewer/InviteCodeViewer';
 import ProjectTeamUsers from '../ProjectTeamUsers/ProjectTeamUsers';
+import { useSession } from '@/lib/providers/SessionProvider';
 
 export default function ProjectSettings(project: ProjectWithUsers) {
+  const { user } = useSession();
   const [ghRepo, setGhRepo] = React.useState('');
+  const [ghInstallationId, setGhInstallationId] = React.useState('');
   const [hasSubmitted, setHasSubmitted] = React.useState(false);
   const apiUrl = `https://${window.location.hostname}/api/feedback/${project.id}`;
   React.useEffect(() => {
@@ -59,7 +62,9 @@ export default function ProjectSettings(project: ProjectWithUsers) {
       <Tabs defaultValue="project" className="w-full">
         <TabsList className="mb-4">
           <TabsTrigger value="project">Project</TabsTrigger>
+          {user?.id === project.UserProject.find((u) => u.isOwner)?.userId && (
             <TabsTrigger value="github">Github</TabsTrigger>
+          )}
           <TabsTrigger value="api">API</TabsTrigger>
         </TabsList>
 
@@ -161,6 +166,7 @@ export default function ProjectSettings(project: ProjectWithUsers) {
           </div>
         </TabsContent>
 
+        {user?.id === project.UserProject.find((u) => u.isOwner)?.userId && (
           <TabsContent value="github" className="grid gap-4">
             <Card>
               <CardHeader>
@@ -169,8 +175,9 @@ export default function ProjectSettings(project: ProjectWithUsers) {
               </CardHeader>
               <CardContent>
                 <GithubRepoChooser
-                onSelect={(repo) => {
+                  onSelect={(repo, id) => {
                     setGhRepo(`https://github.com/${repo}`);
+                    setGhInstallationId(id);
                   }}
                   selected={project.github ? project.github.replace('https://github.com/', '') : ''}
                 />
@@ -193,6 +200,12 @@ export default function ProjectSettings(project: ProjectWithUsers) {
                       type: 'hidden',
                       value: ghRepo,
                     },
+                    {
+                      name: 'installationId',
+                      label: 'Installation ID',
+                      type: 'hidden',
+                      value: ghInstallationId,
+                    },
                     {
                       name: 'id',
                       label: 'ID',
@@ -230,13 +243,14 @@ export default function ProjectSettings(project: ProjectWithUsers) {
                   />
                 ) : (
                   <p className="text-muted-foreground text-sm">
-                  You need to connect your project to a GitHub repository before you can test issue
+                    You need to connect your project to a GitHub repository before you can test
-                  submission.
+                    issue submission.
                   </p>
                 )}
               </CardContent>
             </Card>
           </TabsContent>
+        )}
 
         <TabsContent value="api" className="space-y-5">
           <Card>

src/components/app/ProjectTeamUsers/ProjectTeamUsers.tsx

@@ -31,9 +31,10 @@ export default function ProjectTeamUsers(userProject: ProjectTeamUsersProps) {
     });
   };
 
+  // toReversed shows the owner at the top, then at join order
   return (
     <ul className="space-y-2 pt-5">
-      {users.map((user) => (
+      {users.toReversed().map((user) => (
         <li
           key={user.userId}
           className="flex items-center justify-between p-3 rounded-lg shadow bg-accent"
@@ -46,7 +47,7 @@ export default function ProjectTeamUsers(userProject: ProjectTeamUsersProps) {
               />
               <AvatarFallback>{user.user.username.toUpperCase()}</AvatarFallback>
             </Avatar>
-            <span className="font-medium">{user.user.username}</span>
+            <span className="font-medium">{user.user.username}{user.isOwner && ' (owner)'}</span>
           </div>
           <Button
             variant="destructive"

src/components/app/UniversalForm/zod.ts

@@ -32,6 +32,10 @@ export const githubSettingsSchema = z.object({
       'Github URL must be "https://github.com/user/repo"'
     )
     .nonempty(),
+  installationId: z
+    .string()
+    .nonempty()
+    .transform((val) => parseInt(val, 10)),
 });
 
 export const githubTestIssueSchema = z.object({

src/lib/forms/actions.ts

@@ -107,6 +107,7 @@ export async function customData(prev: any, formData: FormData) {
 }
 
 export async function githubSettings(prev: any, formData: FormData) {
+  // @ts-ignore transforming string to number makes the types go crazy
   const zod = await zodVerify(githubSettingsSchema, formData);
   const { user, session } = await validateRequest();
   if (!user) {
@@ -122,6 +123,7 @@ export async function githubSettings(prev: any, formData: FormData) {
     },
     data: {
       github: zod.data.github,
+      githubInstallationId: zod.data.installationId.toString(),
     },
   });
   return { success: true, id: dbUpdate.id };
@@ -149,21 +151,21 @@ export async function githubTestIssue(prev: any, formData: FormData) {
         include: {
           user: true,
         },
-      }
+      },
     },
   });
   if (!project) {
     return { success: false, error: 'Project not found' };
   }
+  if (!project.github || !project.githubInstallationId) {
+    return { success: false, error: 'Github settings not found' };
+  }
 
   try {
     const [owner, repo] = project.github!.split('/').slice(-2);
-    let issueCreated = false;
+    const installation = await octokitApp.getInstallationOctokit(
-
+      parseInt(project.githubInstallationId!)
-    for (const installationId of project.UserProject[0].user.installations) {
+    );
-      if (issueCreated) break;
-
-      const installation = await octokitApp.getInstallationOctokit(Number(installationId));
     const getRepo = await installation
       .request('GET /repos/{owner}/{repo}', {
         owner,
@@ -171,18 +173,12 @@ export async function githubTestIssue(prev: any, formData: FormData) {
       })
       .catch(() => ({ status: 404 }));
     if (getRepo.status === 200) {
-        const createIssue = await installation.request('POST /repos/{owner}/{repo}/issues', {
+      await installation.request('POST /repos/{owner}/{repo}/issues', {
         owner,
         repo,
         title: 'Test issue',
         body: "### You are all set! 🎉\n\nIf you're reading this, the test issue has been created successfully!",
       });
-
-        if (createIssue.status === 201) {
-          issueCreated = true;
-          break;
-        }
-      }
     }
   } catch (e) {
     console.error(e);
@@ -213,7 +209,7 @@ export async function githubCreateIssue(prev: any, formData: FormData) {
         },
         include: {
           user: true,
-        }
+        },
       },
     },
   });
@@ -223,9 +219,9 @@ export async function githubCreateIssue(prev: any, formData: FormData) {
 
   try {
     const [owner, repo] = project.github!.split('/').slice(-2);
-
+    const installation = await octokitApp.getInstallationOctokit(
-    for (const installationId of project.UserProject[0].user.installations) {
+      Number(project.githubInstallationId)
-      const installation = await octokitApp.getInstallationOctokit(Number(installationId));
+    );
     const getRepo = await installation
       .request('GET /repos/{owner}/{repo}', {
         owner,
@@ -233,17 +229,12 @@ export async function githubCreateIssue(prev: any, formData: FormData) {
       })
       .catch(() => ({ status: 404 }));
     if (getRepo.status === 200) {
-        const createIssue = await installation.request('POST /repos/{owner}/{repo}/issues', {
+      await installation.request('POST /repos/{owner}/{repo}/issues', {
         owner,
         repo,
         title: zod.data.title,
         body: `### Feedback\n\nFeedback ID: ${zod.data.feedback}\n\n### Message\n\n${zod.data.message}`,
       });
-
-        if (createIssue.status === 201) {
-          break;
-        }
-      }
     }
   } catch (e) {
     console.error(e);