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

@@ -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,
           }}
         />
       )}

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,
       }}
     />,
   );

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>