Add UI flow to connect gh repos

Author: myftija

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsx

@@ -1,17 +1,34 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
-import { ExclamationTriangleIcon, FolderIcon, TrashIcon } from "@heroicons/react/20/solid";
-import { Form, type MetaFunction, useActionData, useNavigation } from "@remix-run/react";
+import {
+  CheckCircleIcon,
+  ExclamationTriangleIcon,
+  FolderIcon,
+  TrashIcon,
+  LockClosedIcon,
+} from "@heroicons/react/20/solid";
+import {
+  Form,
+  type MetaFunction,
+  useActionData,
+  useLocation,
+  useNavigation,
+} from "@remix-run/react";
+import { type LoaderFunctionArgs } from "@remix-run/router";
 import { type ActionFunction, json } from "@remix-run/server-runtime";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { InlineCode } from "~/components/code/InlineCode";
+import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components/primitives/Dialog";
+import { DialogClose, DialogDescription } from "@radix-ui/react-dialog";
+import { OctoKitty } from "~/components/GitHubLoginButton";
 import {
   MainHorizontallyCenteredContainer,
   PageBody,
   PageContainer,
 } from "~/components/layout/AppLayout";
-import { Button } from "~/components/primitives/Buttons";
+import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { ClipboardField } from "~/components/primitives/ClipboardField";
 import { Fieldset } from "~/components/primitives/Fieldset";
 import { FormButtons } from "~/components/primitives/FormButtons";
@@ -26,12 +43,21 @@ import { Paragraph } from "~/components/primitives/Paragraph";
 import * as Property from "~/components/primitives/PropertyTable";
 import { SpinnerWhite } from "~/components/primitives/Spinner";
 import { prisma } from "~/db.server";
+import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
+import { findProjectBySlug } from "~/models/project.server";
 import { DeleteProjectService } from "~/services/deleteProject.server";
 import { logger } from "~/services/logger.server";
 import { requireUserId } from "~/services/session.server";
-import { organizationPath, v3ProjectPath } from "~/utils/pathBuilder";
+import {
+  organizationPath,
+  v3ProjectPath,
+  githubAppInstallPath,
+  EnvironmentParamSchema,
+} from "~/utils/pathBuilder";
+import { useState } from "react";
+import { Select, SelectItem } from "~/components/primitives/Select";
 
 export const meta: MetaFunction = () => {
   return [
@@ -41,6 +67,51 @@ export const meta: MetaFunction = () => {
   ];
 };
 
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+  const userId = await requireUserId(request);
+  const { projectParam, organizationSlug } = EnvironmentParamSchema.parse(params);
+
+  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+  if (!project) {
+    throw new Response(undefined, {
+      status: 404,
+      statusText: "Project not found",
+    });
+  }
+
+  const githubAppInstallations = await prisma.githubAppInstallation.findMany({
+    where: {
+      organizationId: project.organizationId,
+      deletedAt: null,
+      suspendedAt: null,
+    },
+    select: {
+      id: true,
+      targetType: true,
+      repositories: {
+        select: {
+          id: true,
+          name: true,
+          private: true,
+        },
+        where: {
+          removedAt: null,
+        },
+        // Most installations will only have a couple of repos so loading them here should be fine.
+        // However, there might be outlier organizations so it's best to expose the installation repos
+        // via a resource endpoint and filter on user input.
+        take: 100,
+      },
+    },
+    take: 20,
+    orderBy: {
+      createdAt: "desc",
+    },
+  });
+
+  return typedjson({ githubAppInstallations });
+};
+
 export function createSchema(
   constraints: {
     getSlugMatch?: (slug: string) => { isMatch: boolean; projectSlug: string };
@@ -148,9 +219,12 @@ export const action: ActionFunction = async ({ request, params }) => {
 };
 
 export default function Page() {
+  const { githubAppInstallations } = useTypedLoaderData<typeof loader>();
   const project = useProject();
+  const organization = useOrganization();
   const lastSubmission = useActionData();
   const navigation = useNavigation();
+  const location = useLocation();
 
   const [renameForm, { projectName }] = useForm({
     id: "rename-project",
@@ -212,7 +286,7 @@ export default function Page() {
       </NavBar>
 
       <PageBody>
-        <MainHorizontallyCenteredContainer>
+        <MainHorizontallyCenteredContainer className="md:mt-6">
           <div className="flex flex-col gap-6">
             <div>
               <Header2 spacing>General</Header2>
@@ -259,6 +333,41 @@ export default function Page() {
               </div>
             </div>
 
+            <div>
+              <Header2 spacing>Git settings</Header2>
+              <div className="w-full rounded-sm border border-grid-dimmed p-4">
+                <Fieldset>
+                  <InputGroup fullWidth>
+                    {githubAppInstallations.length === 0 && (
+                      <LinkButton
+                        to={githubAppInstallPath(organization.slug, location.pathname)}
+                        variant={"secondary/medium"}
+                        LeadingIcon={OctoKitty}
+                      >
+                        Install GitHub App
+                      </LinkButton>
+                    )}
+                    {githubAppInstallations.length !== 0 && (
+                      <div className="flex items-center gap-3">
+                        <ConnectGitHubRepoModal
+                          gitHubAppInstallations={githubAppInstallations}
+                          projectId={project.id}
+                        />
+                        <span className="flex items-center gap-1 text-xs text-text-dimmed">
+                          <CheckCircleIcon className="size-4 text-success" /> GitHub app is
+                          installed
+                        </span>
+                      </div>
+                    )}
+
+                    <Hint>
+                      Connect your GitHub repository to automatically deploy your changes.
+                    </Hint>
+                  </InputGroup>
+                </Fieldset>
+              </div>
+            </div>
+
             <div>
               <Header2 spacing>Danger zone</Header2>
               <div className="w-full rounded-sm border border-rose-500/40 p-4">
@@ -304,3 +413,167 @@ export default function Page() {
     </PageContainer>
   );
 }
+
+const ConnectGitHubRepoFormSchema = z.object({
+  installationId: z.string(),
+  repositoryId: z.string(),
+  projectId: z.string(),
+});
+
+type GitHubRepository = {
+  id: string;
+  name: string;
+  private: boolean;
+};
+
+type GitHubAppInstallation = {
+  id: string;
+  targetType: string;
+  repositories: GitHubRepository[];
+};
+
+function ConnectGitHubRepoModal({
+  gitHubAppInstallations,
+  projectId: triggerProjectId,
+}: {
+  gitHubAppInstallations: GitHubAppInstallation[];
+  projectId: string;
+}) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const lastSubmission = useActionData();
+
+  const [selectedInstallation, setSelectedInstallation] = useState<
+    GitHubAppInstallation | undefined
+  >(gitHubAppInstallations.at(0));
+
+  const [selectedRepository, setSelectedRepository] = useState<GitHubRepository | undefined>(
+    undefined
+  );
+
+  const navigation = useNavigation();
+  const isConnectRepositoryLoading =
+    navigation.formData?.get("action") === "connect-repository" &&
+    (navigation.state === "submitting" || navigation.state === "loading");
+
+  const [form, { installationId, repositoryId, projectId }] = useForm({
+    id: "connect-repository",
+    // TODO: type this
+    lastSubmission: lastSubmission as any,
+    shouldRevalidate: "onSubmit",
+    onValidate({ formData }) {
+      return parse(formData, {
+        schema: ConnectGitHubRepoFormSchema,
+      });
+    },
+  });
+
+  return (
+    <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+      <DialogTrigger asChild>
+        <Button type="button" variant={"secondary/medium"} LeadingIcon={OctoKitty}>
+          Connect GitHub repo
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>Connect GitHub repository</DialogHeader>
+        <div className="mt-2 flex flex-col gap-4">
+          <Form method="post" {...form.props} className="w-full">
+            <input {...conform.input(projectId, { type: "hidden" })} value={triggerProjectId} />
+            <Paragraph className="mb-3">
+              Choose a GitHub repository to connect to your project.
+            </Paragraph>
+            <Fieldset className="max-w-full gap-y-3">
+              <InputGroup className="max-w-full">
+                <Label htmlFor={installationId.id}>Account</Label>
+                <Select
+                  name={installationId.name}
+                  id={installationId.id}
+                  value={selectedInstallation?.id}
+                  defaultValue={gitHubAppInstallations.at(0)?.id}
+                  setValue={(value) => {
+                    if (Array.isArray(value)) return;
+                    const installation = gitHubAppInstallations.find((i) => i.id === value);
+                    setSelectedInstallation(installation);
+                    setSelectedRepository(undefined);
+                  }}
+                  items={gitHubAppInstallations}
+                  variant="tertiary/small"
+                  placeholder="Select account"
+                  dropdownIcon
+                  text={
+                    selectedInstallation
+                      ? `${selectedInstallation.targetType} ${selectedInstallation.id}`
+                      : undefined
+                  }
+                >
+                  {gitHubAppInstallations.map((installation) => (
+                    <SelectItem key={installation.id} value={installation.id}>
+                      {installation.targetType} ({installation.id})
+                    </SelectItem>
+                  ))}
+                </Select>
+                <FormError id={installationId.errorId}>{installationId.error}</FormError>
+              </InputGroup>
+              <InputGroup className="max-w-full">
+                <Label htmlFor={repositoryId.id}>Repository</Label>
+                <Select
+                  name={repositoryId.name}
+                  id={repositoryId.id}
+                  value={selectedRepository ? selectedRepository.id : undefined}
+                  setValue={(value) => {
+                    if (Array.isArray(value)) return;
+                    const repository = selectedInstallation?.repositories.find(
+                      (r) => r.id === value
+                    );
+                    setSelectedRepository(repository);
+                  }}
+                  variant="tertiary/small"
+                  placeholder="Select repository"
+                  heading="Filter repositories"
+                  dropdownIcon
+                  items={selectedInstallation?.repositories ?? []}
+                  filter={{ keys: ["name"] }}
+                  disabled={!selectedInstallation || selectedInstallation.repositories.length === 0}
+                  text={selectedRepository ? selectedRepository.name : null}
+                >
+                  {(matches) =>
+                    matches.map((repo) => (
+                      <SelectItem key={repo.id} value={repo.id}>
+                        <div className="flex items-center gap-1">
+                          {repo.name}
+                          {repo.private && <LockClosedIcon className="size-3 text-text-dimmed" />}
+                        </div>
+                      </SelectItem>
+                    ))
+                  }
+                </Select>
+                <FormError id={repositoryId.errorId}>{repositoryId.error}</FormError>
+              </InputGroup>
+              <FormError>{form.error}</FormError>
+              <FormButtons
+                confirmButton={
+                  <Button
+                    type="submit"
+                    name="action"
+                    value="connect-repository"
+                    variant="primary/medium"
+                    LeadingIcon={isConnectRepositoryLoading ? SpinnerWhite : undefined}
+                    leadingIconClassName="text-white"
+                    disabled={isConnectRepositoryLoading}
+                  >
+                    Connect repository
+                  </Button>
+                }
+                cancelButton={
+                  <DialogClose asChild>
+                    <Button variant="tertiary/medium">Cancel</Button>
+                  </DialogClose>
+                }
+              />
+            </Fieldset>
+          </Form>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/webapp/app/utils/pathBuilder.ts

@@ -141,6 +141,10 @@ export function v3ProjectPath(organization: OrgForPath, project: ProjectForPath)
   return `/orgs/${organizationParam(organization)}/projects/${projectParam(project)}`;
 }
 
+export function githubAppInstallPath(organizationSlug: string, redirectTo: string) {
+  return `/github/install?org_slug=${organizationSlug}&redirect_to=${redirectTo}`;
+}
+
 export function v3EnvironmentPath(
   organization: OrgForPath,
   project: ProjectForPath,