fix: Use runtime envs and pass to fe (#11)

ctrlplanedev · Aug 31, 2024 · 933eea0 · 933eea0
1 parent 4dbe83f
commit 933eea0
Show file tree

Hide file tree

Showing 14 changed files with 398 additions and 1,166 deletions.
diff --git a/apps/webservice/src/app/[workspaceSlug]/(job)/job-agents/add/GithubConfig.tsx b/apps/webservice/src/app/[workspaceSlug]/(job)/job-agents/add/GithubConfig.tsx
diff --git a/...Slug]/settings/(settings)/workspace/integrations/(integration)/github/GithubOrgConfig.tsx b/...Slug]/settings/(settings)/workspace/integrations/(integration)/github/GithubOrgConfig.tsx
@@ -31,15 +31,27 @@ import { Popover, PopoverContent, PopoverTrigger } from "@ctrlplane/ui/popover";
 import { Separator } from "@ctrlplane/ui/separator";
 import { Skeleton } from "@ctrlplane/ui/skeleton";
 
-import { env } from "~/env";
 import { api } from "~/trpc/react";
 
-export const GithubOrgConfig: React.FC<{
+interface GithubOrgConfigProps {
   githubUser?: GithubUser | null;
   workspaceSlug?: string;
   workspaceId?: string;
   loading: boolean;
-}> = ({ githubUser, workspaceSlug, workspaceId, loading }) => {
+  githubConfig: {
+    url: string;
+    botName: string;
+    clientId: string;
+  };
+}
+
+export const GithubOrgConfig: React.FC<GithubOrgConfigProps> = ({
+  githubUser,
+  workspaceSlug,
+  workspaceId,
+  loading,
+  githubConfig,
+}) => {
   const githubOrgs = api.github.organizations.byGithubUserId.useQuery(
     githubUser?.githubUserId ?? 0,
     { enabled: !loading && githubUser != null },
@@ -58,6 +70,8 @@ export const GithubOrgConfig: React.FC<{
   const [value, setValue] = useState<string | null>(null);
   const [image, setImage] = useState<string | null>(null);
 
+  const baseUrl = api.runtime.baseUrl.useQuery();
+
   return (
     <Card className="rounded-md">
       <CardContent className="flex justify-between p-0 pr-4">
@@ -138,7 +152,7 @@ export const GithubOrgConfig: React.FC<{
 
                       <CommandItem>
                         <a
-                          href={`${env.NEXT_PUBLIC_GITHUB_URL}/apps/${env.NEXT_PUBLIC_GITHUB_BOT_NAME}/installations/select_target?target_id=${githubUser?.githubUserId}?redirect_uri=${env.NEXT_PUBLIC_BASE_URL}/${workspaceSlug}/job-agents/add`}
+                          href={`${githubConfig.url}/apps/${githubConfig.botName}/installations/select_target?target_id=${githubUser?.githubUserId}?redirect_uri=${baseUrl.data}/${workspaceSlug}/settings/workspace/integrations/github`}
                           className="flex items-center gap-2"
                         >
                           <TbPlus />
@@ -254,7 +268,7 @@ export const GithubOrgConfig: React.FC<{
                   <DropdownMenuContent>
                     <DropdownMenuItem>
                       <a
-                        href={`${env.NEXT_PUBLIC_GITHUB_URL}/organizations/${github_organization.organizationName}/settings/installations/${github_organization.installationId}`}
+                        href={`${githubConfig.url}/organizations/${github_organization.organizationName}/settings/installations/${github_organization.installationId}`}
                         target="_blank"
                         rel="noopener noreferrer"
                         onClick={(e) => {

diff --git a/.../[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/github/page.tsx b/.../[workspaceSlug]/settings/(settings)/workspace/integrations/(integration)/github/page.tsx
@@ -7,13 +7,18 @@ import { SiGithub } from "react-icons/si";
 import { Button } from "@ctrlplane/ui/button";
 import { Card } from "@ctrlplane/ui/card";
 
-import { env } from "~/env";
 import { api } from "~/trpc/react";
 import { GithubConfigFileSync } from "./GithubConfigFile";
 import { GithubOrgConfig } from "./GithubOrgConfig";
 
-const githubAuthUrl = (userId?: string, workspaceSlug?: string) =>
-  `${env.NEXT_PUBLIC_GITHUB_URL}/login/oauth/authorize?response_type=code&client_id=${env.NEXT_PUBLIC_GITHUB_BOT_CLIENT_ID}&redirect_uri=${env.NEXT_PUBLIC_BASE_URL}/api/github/${userId}/${workspaceSlug}&state=sLtHqpxQ6FiUtBWJ&scope=repo%2Cread%3Auser`;
+const githubAuthUrl = (
+  baseUrl: string,
+  githubUrl: string,
+  clientId: string,
+  userId?: string,
+  workspaceSlug?: string,
+) =>
+  `${githubUrl}/login/oauth/authorize?response_type=code&client_id=${clientId}&redirect_uri=${baseUrl}/api/github/${userId}/${workspaceSlug}&state=sLtHqpxQ6FiUtBWJ&scope=repo%2Cread%3Auser`;
 
 export default function GitHubIntegrationPage({
   params,
@@ -24,6 +29,15 @@ export default function GitHubIntegrationPage({
   const workspace = api.workspace.bySlug.useQuery(workspaceSlug);
   const session = useSession();
   const router = useRouter();
+  const baseUrl = api.runtime.baseUrl.useQuery();
+
+  const githubUrl = api.runtime.github.url.useQuery();
+  const githubBotName = api.runtime.github.botName.useQuery();
+  const githubBotClientId = api.runtime.github.clientId.useQuery();
+  const isGithubConfigured =
+    githubUrl.data != null &&
+    githubBotName.data != null &&
+    githubBotClientId.data != null;
 
   const githubUser = api.github.user.byUserId.useQuery(session.data!.user.id, {
     enabled: session.status === "authenticated",
@@ -64,7 +78,15 @@ export default function GitHubIntegrationPage({
           <Button
             variant="secondary"
             onClick={() =>
-              router.push(githubAuthUrl(session.data!.user.id, workspaceSlug))
+              router.push(
+                githubAuthUrl(
+                  baseUrl.data ?? "",
+                  githubUrl.data ?? "",
+                  githubBotClientId.data ?? "",
+                  session.data!.user.id,
+                  workspaceSlug,
+                ),
+              )
             }
           >
             Connect
@@ -75,12 +97,19 @@ export default function GitHubIntegrationPage({
         )}
       </Card>
 
-      <GithubOrgConfig
-        githubUser={githubUser.data}
-        workspaceId={workspace.data?.id}
-        workspaceSlug={workspaceSlug}
-        loading={workspace.isLoading || githubUser.isLoading}
-      />
+      {isGithubConfigured && (
+        <GithubOrgConfig
+          githubUser={githubUser.data}
+          workspaceId={workspace.data?.id}
+          workspaceSlug={workspaceSlug}
+          loading={workspace.isLoading || githubUser.isLoading}
+          githubConfig={{
+            url: githubUrl.data ?? "",
+            botName: githubBotName.data ?? "",
+            clientId: githubBotClientId.data ?? "",
+          }}
+        />
+      )}
 
       <GithubConfigFileSync configFiles={configFiles.data ?? []} />
     </div>

diff --git a/...e/src/app/[workspaceSlug]/settings/(settings)/workspace/members/WorkspaceMembersTable.tsx b/...e/src/app/[workspaceSlug]/settings/(settings)/workspace/members/WorkspaceMembersTable.tsx
@@ -32,7 +32,6 @@ import {
 import { Input } from "@ctrlplane/ui/input";
 import { Table, TableBody, TableCell, TableRow } from "@ctrlplane/ui/table";
 
-import { env } from "~/env";
 import { api } from "~/trpc/react";
 
 interface Member {
@@ -54,7 +53,8 @@ const InviteLinkSection: React.FC<{
   const [clickedCopy, setClickedCopy] = useState(false);
 
   const [token] = useState(inviteLink ?? v4());
-  const link = `${env.NEXT_PUBLIC_BASE_URL}/join/${token}`;
+  const baseUrl = api.runtime.baseUrl.useQuery();
+  const link = `${baseUrl.data}/join/${token}`;
 
   const handleCopyClick = () => {
     navigator.clipboard.writeText(link).then(() => {

diff --git a/apps/webservice/src/app/api/github/[userId]/[workspaceSlug]/route.ts b/apps/webservice/src/app/api/github/[userId]/[workspaceSlug]/route.ts
@@ -14,21 +14,21 @@ export const GET = async (
   const code = searchParams.get("code");
   const { userId, workspaceSlug } = params;
 
-  const tokenResponse = await fetch(
-    `${env.NEXT_PUBLIC_GITHUB_URL}/login/oauth/access_token`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-      },
-      body: JSON.stringify({
-        client_id: env.GITHUB_BOT_CLIENT_ID,
-        client_secret: env.GITHUB_BOT_CLIENT_SECRET,
-        code,
-      }),
+  const baseUrl = await api.runtime.baseUrl();
+  const githubUrl = await api.runtime.github.url();
+
+  const tokenResponse = await fetch(`${githubUrl}/login/oauth/access_token`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
     },
-  );
+    body: JSON.stringify({
+      client_id: env.GITHUB_BOT_CLIENT_ID,
+      client_secret: env.GITHUB_BOT_CLIENT_SECRET,
+      code,
+    }),
+  });
 
   if (!tokenResponse.ok) throw new Error("Failed to fetch access token");
   const tokenData = await tokenResponse.json();
@@ -53,6 +53,6 @@ export const GET = async (
   });
 
   return NextResponse.redirect(
-    `${env.NEXT_PUBLIC_BASE_URL}/${workspaceSlug}/settings/workspace/integrations/github`,
+    `${baseUrl}/${workspaceSlug}/settings/workspace/integrations/github`,
   );
 };