From 9dccd066c271f54b3a8fcef82f7dc51c4a4bd1e0 Mon Sep 17 00:00:00 2001
From: Asier Isayas <aisayas@microsoft.com>
Date: Wed, 19 Aug 2026 09:22:11 -0700
Subject: [PATCH] Keep the connect form login error local to ConnectExplorer

The error state was lifted into HostedExplorer so a postMessage login could report failures, which meant the connect screen needed a second copy of the error markup for the AAD view. That copy fell outside the connectExplorerContent selector the tooltip styles are scoped to, so it rendered the message as unstyled inline text.

Move the state back into ConnectExplorer and let connectWithConnectionString log the failure as it did before. A failed postMessage login still leaves the user on the connect screen either way.
---
 src/HostedExplorer.tsx                              |  8 +-------
 .../Hosted/Components/ConnectExplorer.test.tsx      |  4 ----
 src/Platform/Hosted/Components/ConnectExplorer.tsx  | 13 ++-----------
 3 files changed, 3 insertions(+), 22 deletions(-)

diff --git a/src/HostedExplorer.tsx b/src/HostedExplorer.tsx
index 5f17348db..d764c3635 100644
--- a/src/HostedExplorer.tsx
+++ b/src/HostedExplorer.tsx
@@ -52,7 +52,6 @@ const App: React.FunctionComponent = () => {
   const [databaseAccount, setDatabaseAccount] = React.useState<DatabaseAccount>();
   const [authType, setAuthType] = React.useState<AuthType>(encryptedToken ? AuthType.EncryptedToken : undefined);
   const [connectionString, setConnectionString] = React.useState<string>();
-  const [errorMessage, setErrorMessage] = React.useState<string>();
 
   const ref = React.useRef<HTMLIFrameElement>();
 
@@ -61,7 +60,6 @@ const App: React.FunctionComponent = () => {
       if (!connStr || authType) {
         return;
       }
-      setErrorMessage(undefined);
       setConnectionString(connStr);
       if (isResourceTokenConnectionString(connStr)) {
         setAuthType(AuthType.ResourceToken);
@@ -83,12 +81,10 @@ const App: React.FunctionComponent = () => {
           setAuthType(AuthType.ConnectionString);
         })
         .catch((error) => {
-          const message = getErrorMessage(error);
           logError(
-            `Failed to connect with connection string: ${message}`,
+            `Failed to connect with connection string: ${getErrorMessage(error)}`,
             "HostedExplorer/connectWithConnectionString",
           );
-          setErrorMessage(message);
         });
     },
     [authType],
@@ -230,8 +226,6 @@ const App: React.FunctionComponent = () => {
             connectionString,
             setConnectionString,
             setAccountMetadata,
-            errorMessage,
-            setErrorMessage,
           }}
         />
       )}
diff --git a/src/Platform/Hosted/Components/ConnectExplorer.test.tsx b/src/Platform/Hosted/Components/ConnectExplorer.test.tsx
index 3c8c40cb7..a98a89ccc 100644
--- a/src/Platform/Hosted/Components/ConnectExplorer.test.tsx
+++ b/src/Platform/Hosted/Components/ConnectExplorer.test.tsx
@@ -13,7 +13,6 @@ it("shows the connect form", () => {
   const setEncryptedToken = jest.fn();
   const setAuthType = jest.fn();
   const setAccountMetadata = jest.fn();
-  const setErrorMessage = jest.fn();
 
   render(
     <ConnectExplorer
@@ -24,7 +23,6 @@ it("shows the connect form", () => {
         connectionString,
         setConnectionString,
         setAccountMetadata,
-        setErrorMessage,
       }}
     />,
   );
@@ -40,7 +38,6 @@ it("hides the connection string link when feature.disableConnectionStringLogin i
   const setEncryptedToken = jest.fn();
   const setAuthType = jest.fn();
   const setAccountMetadata = jest.fn();
-  const setErrorMessage = jest.fn();
   const oldFeatures = userContext.features;
 
   const params = new URLSearchParams({
@@ -59,7 +56,6 @@ it("hides the connection string link when feature.disableConnectionStringLogin i
         connectionString,
         setConnectionString,
         setAccountMetadata,
-        setErrorMessage,
       }}
     />,
   );
diff --git a/src/Platform/Hosted/Components/ConnectExplorer.tsx b/src/Platform/Hosted/Components/ConnectExplorer.tsx
index 98778ad9d..b0b474ded 100644
--- a/src/Platform/Hosted/Components/ConnectExplorer.tsx
+++ b/src/Platform/Hosted/Components/ConnectExplorer.tsx
@@ -19,8 +19,6 @@ interface Props {
   setConnectionString: (connectionString: string) => void;
   setAuthType: (authType: AuthType) => void;
   setAccountMetadata: (metadata: AccessInputMetadata) => void;
-  errorMessage?: string;
-  setErrorMessage: (message: string) => void;
 }
 
 // Turns a failed Portal Backend response into an error that carries the message returned by the service.
@@ -60,10 +58,9 @@ export const ConnectExplorer: React.FunctionComponent<Props> = ({
   connectionString,
   setConnectionString,
   setAccountMetadata,
-  errorMessage,
-  setErrorMessage,
 }: Props) => {
   const [isFormVisible, { setTrue: showForm }] = useBoolean(false);
+  const [errorMessage, setErrorMessage] = React.useState("");
   const enableConnectionStringLogin = !userContext.features.disableConnectionStringLogin;
 
   return (
@@ -128,7 +125,7 @@ export const ConnectExplorer: React.FunctionComponent<Props> = ({
                     setConnectionString(event.target.value);
                   }}
                 />
-                {errorMessage && (
+                {errorMessage.length > 0 && (
                   <span className="errorDetailsInfoTooltip">
                     <img className="errorImg" src={ErrorImage} alt="Error notification" />
                     <span className="errorDetails">{errorMessage}</span>
@@ -150,12 +147,6 @@ export const ConnectExplorer: React.FunctionComponent<Props> = ({
                   Connect to your account with connection string
                 </p>
               )}
-              {errorMessage && (
-                <span className="errorDetailsInfoTooltip">
-                  <img className="errorImg" src={ErrorImage} alt="Error notification" />
-                  <span className="errorDetails">{errorMessage}</span>
-                </span>
-              )}
             </div>
           )}
         </div>