From 69470b0a2711e5e86a6525f3f76fb95782f1f14f Mon Sep 17 00:00:00 2001
From: Rohit Malhotra <rohitvinodmalhotra@gmail.com>
Date: Wed, 18 Dec 2024 12:32:21 -0500
Subject: [PATCH] [Bug]: Settings modal opens on every refresh (#5670)

Co-authored-by: openhands <openhands@all-hands.dev>
---
 frontend/__tests__/routes/_oh.test.tsx |  6 ------
 frontend/src/routes/_oh/route.tsx      | 15 +++++++++------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/frontend/__tests__/routes/_oh.test.tsx b/frontend/__tests__/routes/_oh.test.tsx
index 8897b5dd8bd3..e22d959446a8 100644
--- a/frontend/__tests__/routes/_oh.test.tsx
+++ b/frontend/__tests__/routes/_oh.test.tsx
@@ -39,12 +39,6 @@ describe("frontend/routes/_oh", () => {
     await screen.findByTestId("root-layout");
   });
 
-  it("should render the AI config modal if the user is authed", async () => {
-    // Our mock return value is true by default
-    renderWithProviders(<RouteStub />);
-    await screen.findByTestId("ai-config-modal");
-  });
-
   it("should render the AI config modal if settings are not up-to-date", async () => {
     settingsAreUpToDateMock.mockReturnValue(false);
     renderWithProviders(<RouteStub />);
diff --git a/frontend/src/routes/_oh/route.tsx b/frontend/src/routes/_oh/route.tsx
index 5055e24d2383..27058be55c94 100644
--- a/frontend/src/routes/_oh/route.tsx
+++ b/frontend/src/routes/_oh/route.tsx
@@ -45,12 +45,15 @@ export function ErrorBoundary() {
 
 export default function MainApp() {
   const { gitHubToken, clearToken } = useAuth();
-  const { settings } = useUserPrefs();
+  const { settings, settingsAreUpToDate } = useUserPrefs();
 
   const [consentFormIsOpen, setConsentFormIsOpen] = React.useState(
     !localStorage.getItem("analytics-consent"),
   );
 
+  const [aiConfigModalIsOpen, setAiConfigModalIsOpen] =
+    React.useState(!settingsAreUpToDate);
+
   const config = useConfig();
   const {
     data: isAuthed,
@@ -77,9 +80,6 @@ export default function MainApp() {
   const isInWaitlist =
     !isFetchingAuth && !isAuthed && config.data?.APP_MODE === "saas";
 
-  const { settingsAreUpToDate } = useUserPrefs();
-  const [showAIConfig, setShowAIConfig] = React.useState(true);
-
   return (
     <div
       data-testid="root-layout"
@@ -101,8 +101,11 @@ export default function MainApp() {
         />
       )}
 
-      {(isAuthed || !settingsAreUpToDate) && showAIConfig && (
-        <SettingsModal onClose={() => setShowAIConfig(false)} />
+      {aiConfigModalIsOpen && (
+        <SettingsModal
+          onClose={() => setAiConfigModalIsOpen(false)}
+          data-testid="ai-config-modal"
+        />
       )}
     </div>
   );