[ALL-571] chore(frontend): Move `saas`-related configs to `config.json` (#4496)

frontend/.env.sample

@@ -1,5 +1,2 @@
 VITE_BACKEND_BASE_URL="localhost:3000" # Backend URL without protocol (e.g. localhost:3000)
 VITE_MOCK_API="false" # true or false
-
-# GitHub OAuth
-VITE_GITHUB_CLIENT_ID=""

frontend/global.d.ts

@@ -1,3 +1,4 @@
 interface Window {
   __APP_MODE__?: "saas" | "oss";
+  __GITHUB_CLIENT_ID__?: string | null;
 }

frontend/public/config.json

@@ -1,3 +1,4 @@
 {
-  "APP_MODE": "oss"
+  "APP_MODE": "oss",
+  "GITHUB_CLIENT_ID": ""
 }

frontend/src/api/open-hands.ts

@@ -6,6 +6,7 @@ import {
   FeedbackResponse,
   GitHubAccessTokenResponse,
   ErrorResponse,
+  GetConfigResponse,
 } from "./open-hands.types";
 
 /**
@@ -60,7 +61,7 @@ class OpenHands {
     return response.json();
   }
 
-  static async getConfig(): Promise<{ APP_MODE: "saas" | "oss" }> {
+  static async getConfig(): Promise<GetConfigResponse> {
     const response = await fetch(`${OpenHands.BASE_URL}/config.json`, {
       headers: {
         "Cache-Control": "no-cache",

frontend/src/api/open-hands.types.ts

@@ -35,3 +35,8 @@ export interface Feedback {
   permissions: "public" | "private";
   trajectory: unknown[];
 }
+
+export interface GetConfigResponse {
+  APP_MODE: "saas" | "oss";
+  GITHUB_CLIENT_ID: string | null;
+}

frontend/src/components/modals/connect-to-github-modal.tsx

@@ -26,7 +26,7 @@ export function ConnectToGitHubModal({ onClose }: ConnectToGitHubModalProps) {
             <span>
               Get your token{" "}
               <a
-                href="https://github.com/settings/tokens/new?description=openhands-app&scopes=repo,user"
+                href="https://github.com/settings/tokens/new?description=openhands-app&scopes=repo,user,workflow"
                 target="_blank"
                 rel="noreferrer noopener"
                 className="text-[#791B80] underline"

frontend/src/routes/_oh._index/route.tsx

@@ -82,10 +82,13 @@ export const clientLoader = async ({ request }: ClientLoaderFunctionArgs) => {
     }
   }
 
-  const clientId = import.meta.env.VITE_GITHUB_CLIENT_ID;
-  const requestUrl = new URL(request.url);
-  const redirectUri = `${requestUrl.origin}/oauth/github/callback`;
-  const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&scope=repo,user,workflow`;
+  let githubAuthUrl: string | null = null;
+  if (window.__APP_MODE__ === "saas") {
+    const clientId = window.__GITHUB_CLIENT_ID__;
+    const requestUrl = new URL(request.url);
+    const redirectUri = `${requestUrl.origin}/oauth/github/callback`;
+    githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&scope=repo,user,workflow`;
+  }
 
   return json({ repositories, githubAuthUrl });
 };
@@ -110,9 +113,7 @@ function Home() {
   const { files } = useSelector((state: RootState) => state.initalQuery);
 
   const handleConnectToGitHub = () => {
-    const isSaas = window.__APP_MODE__ === "saas";
-
-    if (isSaas) {
+    if (githubAuthUrl) {
       window.location.href = githubAuthUrl;
     } else {
       setConnectToGitHubModalOpen(true);

frontend/src/routes/_oh.tsx

@@ -29,8 +29,10 @@ export const clientLoader = async () => {
   try {
     const config = await OpenHands.getConfig();
     window.__APP_MODE__ = config.APP_MODE;
+    window.__GITHUB_CLIENT_ID__ = config.GITHUB_CLIENT_ID;
   } catch (error) {
     window.__APP_MODE__ = "oss";
+    window.__GITHUB_CLIENT_ID__ = null;
   }
 
   let token = localStorage.getItem("token");