fix(webapp): toast message issue after gh app installation

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

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

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

@@ -14,6 +14,7 @@ import {
   useActionData,
   useNavigation,
   useNavigate,
+  useSearchParams,
 } from "@remix-run/react";
 import { type ActionFunction, type LoaderFunctionArgs, json } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
@@ -49,8 +50,6 @@ import {
   redirectBackWithSuccessMessage,
   redirectWithErrorMessage,
   redirectWithSuccessMessage,
-  getSession,
-  commitSession,
 } from "~/models/message.server";
 import { ProjectSettingsService } from "~/services/projectSettings.server";
 import { logger } from "~/services/logger.server";
@@ -123,22 +122,12 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
   const { gitHubApp, buildSettings } = resultOrFail.value;
 
-  const session = await getSession(request.headers.get("Cookie"));
-  const openGitHubRepoConnectionModal = session.get("gitHubAppInstalled") === true;
-  const headers = new Headers({
-    "Set-Cookie": await commitSession(session),
+  return typedjson({
+    githubAppEnabled: gitHubApp.enabled,
+    githubAppInstallations: gitHubApp.installations,
+    connectedGithubRepository: gitHubApp.connectedRepository,
+    buildSettings,
   });
-
-  return typedjson(
-    {
-      githubAppEnabled: gitHubApp.enabled,
-      githubAppInstallations: gitHubApp.installations,
-      connectedGithubRepository: gitHubApp.connectedRepository,
-      openGitHubRepoConnectionModal,
-      buildSettings,
-    },
-    { headers }
-  );
 };
 
 const ConnectGitHubRepoFormSchema = z.object({
@@ -444,13 +433,8 @@ export const action: ActionFunction = async ({ request, params }) => {
 };
 
 export default function Page() {
-  const {
-    githubAppInstallations,
-    connectedGithubRepository,
-    githubAppEnabled,
-    openGitHubRepoConnectionModal,
-    buildSettings,
-  } = useTypedLoaderData<typeof loader>();
+  const { githubAppInstallations, connectedGithubRepository, githubAppEnabled, buildSettings } =
+    useTypedLoaderData<typeof loader>();
   const project = useProject();
   const organization = useOrganization();
   const environment = useEnvironment();
@@ -584,7 +568,6 @@ export default function Page() {
                         organizationSlug={organization.slug}
                         projectSlug={project.slug}
                         environmentSlug={environment.slug}
-                        openGitHubRepoConnectionModal={openGitHubRepoConnectionModal}
                       />
                     )}
                   </div>
@@ -667,15 +650,14 @@ function ConnectGitHubRepoModal({
   organizationSlug,
   projectSlug,
   environmentSlug,
-  open = false,
 }: {
   gitHubAppInstallations: GitHubAppInstallation[];
   organizationSlug: string;
   projectSlug: string;
   environmentSlug: string;
   open?: boolean;
 }) {
-  const [isModalOpen, setIsModalOpen] = useState(open);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const lastSubmission = useActionData() as any;
   const navigate = useNavigate();
 
@@ -703,6 +685,17 @@ function ConnectGitHubRepoModal({
     },
   });
 
+  const [searchParams, setSearchParams] = useSearchParams();
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams);
+
+    if (params.get("openGithubRepoModal") === "1") {
+      setIsModalOpen(true);
+      params.delete("openGithubRepoModal");
+      setSearchParams(params);
+    }
+  }, [searchParams, setSearchParams]);
+
   useEffect(() => {
     if (lastSubmission && "success" in lastSubmission && lastSubmission.success === true) {
       setIsModalOpen(false);
@@ -759,11 +752,11 @@ function ConnectGitHubRepoModal({
                         navigate(
                           githubAppInstallPath(
                             organizationSlug,
-                            v3ProjectSettingsPath(
+                            `${v3ProjectSettingsPath(
                               { slug: organizationSlug },
                               { slug: projectSlug },
                               { slug: environmentSlug }
-                            )
+                            )}?openGithubRepoModal=1`
                           )
                         );
                       }}
@@ -856,13 +849,11 @@ function GitHubConnectionPrompt({
   organizationSlug,
   projectSlug,
   environmentSlug,
-  openGitHubRepoConnectionModal = false,
 }: {
   gitHubAppInstallations: GitHubAppInstallation[];
   organizationSlug: string;
   projectSlug: string;
   environmentSlug: string;
-  openGitHubRepoConnectionModal?: boolean;
 }) {
   return (
     <Fieldset>
@@ -871,11 +862,11 @@ function GitHubConnectionPrompt({
           <LinkButton
             to={githubAppInstallPath(
               organizationSlug,
-              v3ProjectSettingsPath(
+              `${v3ProjectSettingsPath(
                 { slug: organizationSlug },
                 { slug: projectSlug },
                 { slug: environmentSlug }
-              )
+              )}?openGithubRepoModal=1`
             )}
             variant={"secondary/medium"}
             LeadingIcon={OctoKitty}
@@ -890,7 +881,6 @@ 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

apps/webapp/app/services/projectSettings.server.ts

@@ -90,7 +90,7 @@ export class ProjectSettingsService {
             repositoryId: repositoryId,
             branchTracking: {
               prod: { branch: defaultBranch },
-              staging: { branch: defaultBranch },
+              staging: {},
             } satisfies BranchTrackingConfig,
             previewDeploymentsEnabled: true,
           },