From 7962532206da6d5e42d981a3a4dc8b95edbc0358 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Mon, 26 Aug 2024 19:35:46 +0200
Subject: [PATCH] fix: fix GitHub installation URL (#1358)

---
 apps/frontend/src/containers/GitHub.tsx       | 32 +++++++++++++++----
 .../containers/GithubInstallationsSelect.tsx  |  4 +--
 .../src/containers/GithubRepositoryList.tsx   |  7 ++--
 .../containers/Project/ConnectRepository.tsx  |  5 ++-
 .../src/containers/Team/GitHubLight.tsx       | 11 ++-----
 5 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/apps/frontend/src/containers/GitHub.tsx b/apps/frontend/src/containers/GitHub.tsx
index c1b29e946..d5be3b17c 100644
--- a/apps/frontend/src/containers/GitHub.tsx
+++ b/apps/frontend/src/containers/GitHub.tsx
@@ -16,19 +16,37 @@ function useLoginUrl(redirect: string | null | undefined) {
   )}`;
 }
 
-export function getInstallationUrl(app: "main" | "light") {
-  const baseURL = () => {
+/**
+ * Get the URL to install the GitHub app.
+ */
+export function getGitHubAppManageURL(app: "main" | "light") {
+  const baseURL = (() => {
     switch (app) {
       case "main":
-        return config.get("github.appUrl");
+        return new URL(config.get("github.appUrl"));
       case "light":
-        return config.get("githubLight.appUrl");
+        return new URL(config.get("githubLight.appUrl"));
       default:
         assertNever(app);
     }
-  };
-  const url = new URL("/installations/new", baseURL());
-  url.searchParams.set("state", window.location.pathname);
+  })();
+  // /installations/new let you manage the installed app
+  // that's why we use it here
+  return new URL(
+    `${baseURL.pathname}/installations/new`,
+    baseURL.origin,
+  ).toString();
+}
+
+export function getGitHubMainAppInstallUrl(input: { pathname: string }) {
+  const url = new URL(getGitHubAppManageURL("main"));
+  url.searchParams.set("state", input.pathname);
+  return url.toString();
+}
+
+export function getGitHubLightAppInstallUrl(input: { accountId: string }) {
+  const url = new URL(getGitHubAppManageURL("light"));
+  url.searchParams.set("state", JSON.stringify({ accountId: input.accountId }));
   return url.toString();
 }
 
diff --git a/apps/frontend/src/containers/GithubInstallationsSelect.tsx b/apps/frontend/src/containers/GithubInstallationsSelect.tsx
index b7c65ff41..5fd270dc1 100644
--- a/apps/frontend/src/containers/GithubInstallationsSelect.tsx
+++ b/apps/frontend/src/containers/GithubInstallationsSelect.tsx
@@ -13,7 +13,7 @@ import {
 import { Popover } from "@/ui/Popover";
 import { Select, SelectButton } from "@/ui/Select";
 
-import { getInstallationUrl } from "./GitHub";
+import { getGitHubAppManageURL } from "./GitHub";
 
 const InstallationFragment = graphql(`
   fragment GithubInstallationsSelect_GhApiInstallation on GhApiInstallation {
@@ -95,7 +95,7 @@ export const GithubInstallationsSelect = React.forwardRef<
           })}
           <ListBoxSeparator />
           <ListBoxItem
-            href={getInstallationUrl(props.app)}
+            href={getGitHubAppManageURL(props.app)}
             target="_blank"
             textValue="Add GitHub Account"
           >
diff --git a/apps/frontend/src/containers/GithubRepositoryList.tsx b/apps/frontend/src/containers/GithubRepositoryList.tsx
index f55bfdd15..be87cbb05 100644
--- a/apps/frontend/src/containers/GithubRepositoryList.tsx
+++ b/apps/frontend/src/containers/GithubRepositoryList.tsx
@@ -16,7 +16,7 @@ import {
 import { Time } from "@/ui/Time";
 
 import { Query } from "./Apollo";
-import { getInstallationUrl } from "./GitHub";
+import { getGitHubAppManageURL } from "./GitHub";
 
 const InstallationQuery = graphql(`
   query GithubRepositoryList_ghApiInstallationRepositories(
@@ -186,7 +186,10 @@ export function GithubRepositoryList(props: {
                 <ListRow className="p-4 text-sm">
                   <div>
                     Repository not in the list?{" "}
-                    <Link href={getInstallationUrl(props.app)} target="_blank">
+                    <Link
+                      href={getGitHubAppManageURL(props.app)}
+                      target="_blank"
+                    >
                       Manage repositories
                     </Link>
                   </div>
diff --git a/apps/frontend/src/containers/Project/ConnectRepository.tsx b/apps/frontend/src/containers/Project/ConnectRepository.tsx
index badbe3712..0ca355cb3 100644
--- a/apps/frontend/src/containers/Project/ConnectRepository.tsx
+++ b/apps/frontend/src/containers/Project/ConnectRepository.tsx
@@ -25,6 +25,7 @@ import { PageLoader } from "@/ui/PageLoader";
 import { TextInput } from "@/ui/TextInput";
 import { getItem, removeItem, setItem } from "@/util/storage";
 
+import { getGitHubMainAppInstallUrl } from "../GitHub";
 import { GitLabLogo } from "../GitLab";
 import {
   GitlabProjectList,
@@ -207,9 +208,7 @@ function GitHubButton(props: {
       <LinkButton
         variant="github"
         size={props.size}
-        href={`${config.get(
-          "github.appUrl",
-        )}/installations/new?state=${encodeURIComponent(pathname)}`}
+        href={getGitHubMainAppInstallUrl({ pathname })}
       >
         <ButtonIcon>
           <MarkGithubIcon />
diff --git a/apps/frontend/src/containers/Team/GitHubLight.tsx b/apps/frontend/src/containers/Team/GitHubLight.tsx
index 4a762d855..7110e6cd8 100644
--- a/apps/frontend/src/containers/Team/GitHubLight.tsx
+++ b/apps/frontend/src/containers/Team/GitHubLight.tsx
@@ -1,7 +1,6 @@
 import * as React from "react";
 import { MarkGithubIcon } from "@primer/octicons-react";
 
-import config from "@/config";
 import { FragmentType, graphql, useFragment } from "@/gql";
 import { LinkButton } from "@/ui/Button";
 import {
@@ -13,6 +12,7 @@ import {
 } from "@/ui/Card";
 import { Link } from "@/ui/Link";
 
+import { getGitHubAppManageURL, getGitHubLightAppInstallUrl } from "../GitHub";
 import { AccountLink } from "../GithubAccountLink";
 
 const TeamFragment = graphql(`
@@ -76,17 +76,12 @@ export function TeamGitHubLight(props: {
           .
         </p>
         {team.githubLightInstallation ? (
-          <LinkButton
-            variant="secondary"
-            href={`${config.get("githubLight.appUrl")}/installations/new`}
-          >
+          <LinkButton variant="secondary" href={getGitHubAppManageURL("light")}>
             Uninstall
           </LinkButton>
         ) : (
           <LinkButton
-            href={`${config.get(
-              "githubLight.appUrl",
-            )}/installations/new?state=${encodeURIComponent(JSON.stringify({ accountId: team.id }))}`}
+            href={getGitHubLightAppInstallUrl({ accountId: team.id })}
           >
             Install GitHub App
           </LinkButton>