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

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

Fixes an issue with displaying toasts messages in the project settings
page. The github callback cookie was interfering with the flash cookie used
for toast messages.

* Do not set a tracking branch in the staging env by default

Author: myftija

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,
           },