Automatically open repo connection modal after app installation

Author: myftija

apps/webapp/app/routes/_app.github.callback/route.tsx

@@ -1,9 +1,13 @@
-import { type LoaderFunctionArgs } from "@remix-run/node";
+import { type LoaderFunctionArgs, redirect } from "@remix-run/node";
 import { z } from "zod";
 import { validateGitHubAppInstallSession } from "~/services/gitHubSession.server";
 import { linkGitHubAppInstallation, updateGitHubAppInstallation } from "~/services/gitHub.server";
 import { logger } from "~/services/logger.server";
-import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
+import {
+  redirectWithErrorMessage,
+  setRequestSuccessMessage,
+  commitSession,
+} from "~/models/message.server";
 import { tryCatch } from "@trigger.dev/core";
 import { $replica } from "~/db.server";
 import { requireUser } from "~/services/session.server";
@@ -88,7 +92,14 @@ export async function loader({ request }: LoaderFunctionArgs) {
         return redirectWithErrorMessage(redirectTo, request, "Failed to install GitHub App");
       }
 
-      return redirectWithSuccessMessage(redirectTo, request, "GitHub App installed successfully");
+      const session = await setRequestSuccessMessage(request, "GitHub App installed successfully");
+      session.flash("gitHubAppInstalled", true);
+
+      return redirect(redirectTo, {
+        headers: {
+          "Set-Cookie": await commitSession(session),
+        },
+      });
     }
 
     case "update": {
@@ -101,7 +112,14 @@ export async function loader({ request }: LoaderFunctionArgs) {
         return redirectWithErrorMessage(redirectTo, request, "Failed to update GitHub App");
       }
 
-      return redirectWithSuccessMessage(redirectTo, request, "GitHub App updated successfully");
+      const session = await setRequestSuccessMessage(request, "GitHub App updated successfully");
+      session.flash("gitHubAppInstalled", true);
+
+      return redirect(redirectTo, {
+        headers: {
+          "Set-Cookie": await commitSession(session),
+        },
+      });
     }
 
     case "request": {
@@ -111,7 +129,13 @@ export async function loader({ request }: LoaderFunctionArgs) {
         callbackData,
       });
 
-      return redirectWithSuccessMessage(redirectTo, request, "GitHub App installation requested");
+      const session = await setRequestSuccessMessage(request, "GitHub App installation requested");
+
+      return redirect(redirectTo, {
+        headers: {
+          "Set-Cookie": await commitSession(session),
+        },
+      });
     }
 
     default:

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

@@ -51,6 +51,7 @@ import {
   redirectBackWithSuccessMessage,
   redirectWithErrorMessage,
   redirectWithSuccessMessage,
+  getSession,
 } from "~/models/message.server";
 import { findProjectBySlug } from "~/models/project.server";
 import { DeleteProjectService } from "~/services/deleteProject.server";
@@ -92,11 +93,15 @@ export const meta: MetaFunction = () => {
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const githubAppEnabled = env.GITHUB_APP_ENABLED === "1";
 
+  const session = await getSession(request.headers.get("Cookie"));
+  const openGitHubRepoConnectionModal = session.get("gitHubAppInstalled") === true;
+
   if (!githubAppEnabled) {
     return typedjson({
       githubAppEnabled,
       githubAppInstallations: undefined,
       connectedGithubRepository: undefined,
+      openGitHubRepoConnectionModal,
     });
   }
 
@@ -143,6 +148,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
         branchTracking: branchTrackingOrFailure.success ? branchTrackingOrFailure.data : undefined,
       },
       githubAppInstallations: undefined,
+      openGitHubRepoConnectionModal,
     });
   }
 
@@ -181,6 +187,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     githubAppEnabled,
     githubAppInstallations,
     connectedGithubRepository: undefined,
+    openGitHubRepoConnectionModal,
   });
 };
 
@@ -466,8 +473,12 @@ export const action: ActionFunction = async ({ request, params }) => {
 };
 
 export default function Page() {
-  const { githubAppInstallations, connectedGithubRepository, githubAppEnabled } =
-    useTypedLoaderData<typeof loader>();
+  const {
+    githubAppInstallations,
+    connectedGithubRepository,
+    githubAppEnabled,
+    openGitHubRepoConnectionModal,
+  } = useTypedLoaderData<typeof loader>();
   const project = useProject();
   const organization = useOrganization();
   const environment = useEnvironment();
@@ -600,6 +611,7 @@ export default function Page() {
                       organizationSlug={organization.slug}
                       projectSlug={project.slug}
                       environmentSlug={environment.slug}
+                      openGitHubRepoConnectionModal={openGitHubRepoConnectionModal}
                     />
                   )}
                 </div>
@@ -674,13 +686,15 @@ function ConnectGitHubRepoModal({
   organizationSlug,
   projectSlug,
   environmentSlug,
+  open = false,
 }: {
   gitHubAppInstallations: GitHubAppInstallation[];
   organizationSlug: string;
   projectSlug: string;
   environmentSlug: string;
+  open?: boolean;
 }) {
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(open);
   const lastSubmission = useActionData() as any;
   const navigate = useNavigate();
 
@@ -861,11 +875,13 @@ function GitHubConnectionPrompt({
   organizationSlug,
   projectSlug,
   environmentSlug,
+  openGitHubRepoConnectionModal = false,
 }: {
   gitHubAppInstallations: GitHubAppInstallation[];
   organizationSlug: string;
   projectSlug: string;
   environmentSlug: string;
+  openGitHubRepoConnectionModal?: boolean;
 }) {
   return (
     <Fieldset>
@@ -893,6 +909,7 @@ function GitHubConnectionPrompt({
               organizationSlug={organizationSlug}
               projectSlug={projectSlug}
               environmentSlug={environmentSlug}
+              open={openGitHubRepoConnectionModal}
             />
             <span className="flex items-center gap-1 text-xs text-text-dimmed">
               <CheckCircleIcon className="size-4 text-success" /> GitHub app is installed