fix(ui): make the connectivity issues overlay closable

e2e/src/test/scala/routes/HealthCheckSpec.scala

@@ -23,3 +23,23 @@ class HealthCheckSpec extends DekafSuite:
     page.unroute(healthCheckUrl)
     assertThat(page.getByTestId("health-overlay")).hasCount(0, new LocatorAssertions.HasCountOptions().setTimeout(20000))
   }
+
+  test("NAV-15: the health overlay can be dismissed while connectivity is still down") {
+    page.navigate("/overview")
+
+    page.route(healthCheckUrl, route => route.abort())
+    assertThat(page.getByTestId("health-overlay")).isVisible(new LocatorAssertions.IsVisibleOptions().setTimeout(20000))
+
+    // The overlay used to have no way out, which made the UI unusable - in particular it
+    // covered the credentials button, so a cluster that needs auth couldn't be authenticated
+    // from the UI at all. See #353.
+    page.getByTestId("health-overlay").press("Escape")
+    assertThat(page.getByTestId("health-overlay")).hasCount(0, new LocatorAssertions.HasCountOptions().setTimeout(10000))
+
+    // Connectivity is still down here: the next poll must not bring the overlay back.
+    page.waitForTimeout(8000)
+    assertThat(page.getByTestId("health-overlay")).hasCount(0)
+
+    // The UI underneath stays usable - the credentials button is reachable again.
+    assertThat(page.getByTestId("credentials-button")).isVisible()
+  }

ui/components/app/contexts/HealthCheckContext/HealthCheckContext.tsx

@@ -1,12 +1,12 @@
-import React, { CSSProperties, ReactNode, useEffect, useState } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import * as GrpcClient from '../GrpcClient/GrpcClient';
 import useSWR from 'swr';
 import { swrKeys } from '../../../swrKeys';
 import * as pb from '../../../../grpc-web/tools/teal/pulsar/ui/brokers/v1/brokers_pb';
 import { Code } from '../../../../grpc-web/google/rpc/code_pb';
 import { createPortal } from 'react-dom';
 import HealthCheck from '../../../InstancePage/Overview/HealthCheck/HealthCheck';
-import { H3 } from '../../../ui/H/H';
+import { ModalElement } from '../Modals/Modals';
 
 type Status = 'unknown' | 'ok' | 'failed';
 type HealthCheckResult = {
@@ -37,6 +37,7 @@ export const DefaultProvider: React.FC<DefaultProviderProps> = (props) => {
   const { brokersServiceClient } = GrpcClient.useContext();
   const [result, setResult] = useState<HealthCheckResult>(defaultValue.healthCheckResult);
   const [brokerVersion, setBrokerVersion] = useState<Value['brokerVersion']>();
+  const [isDismissed, setIsDismissed] = useState(false);
   const lastChecked = React.useRef<number>(0);
 
   useSWR(
@@ -86,43 +87,45 @@ export const DefaultProvider: React.FC<DefaultProviderProps> = (props) => {
     getBrokerVersion();
   }, []);
 
-  const style: CSSProperties = {
-    width: '100vw',
-    height: '100vh',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '48rem',
-    zIndex: 1000,
-    backgroundColor: 'rgba(0, 0, 0, 0.85)',
-    position: 'fixed',
-    top: 0,
-    left: 0
-  };
-
-  const isShowOverlay = result.uiServerConnection === 'failed' || result.brokerConnection === 'failed';
+  const isConnectionFailed = result.uiServerConnection === 'failed' || result.brokerConnection === 'failed';
+
+  // Re-arm the overlay once the connection is restored, so that a new outage is
+  // reported again even if the user dismissed the previous one.
+  useEffect(() => {
+    if (!isConnectionFailed) {
+      setIsDismissed(false);
+    }
+  }, [isConnectionFailed]);
+
+  const isShowOverlay = isConnectionFailed && !isDismissed;
   const overlay = isShowOverlay ? createPortal(
-    <div style={style} data-testid="health-overlay">
-      <div style={{ background: '#fff', borderRadius: '12rem', padding: '24rem 48rem', display: 'flex', flexDirection: 'column', gap: '12rem' }}>
-        <div>
-          <H3>
-            There are connectivity issues
-          </H3>
-
-          <ul>
-            <li>
-              If the problem persists, contact your administrator.
-            </li>
-            <li>
-              <a target="_blank" href='https://github.com/visortelle/dekaf/issues'>🛟 Get community support</a> if you are an administrator and not sure how to fix the problem.
-            </li>
-          </ul>
-        </div>
-        <HealthCheck />
-        <div><strong>Last checked at:</strong> {new Date(lastChecked.current).toLocaleTimeString()}</div>
-      </div>
-    </div>,
+    <ModalElement
+      entry={{
+        id: 'health-check',
+        testId: 'health-overlay',
+        title: 'There are connectivity issues',
+        content: (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '12rem' }}>
+            <ul>
+              <li>
+                If your Pulsar cluster requires authentication, close this dialog and set your
+                credentials using the 🔑 button in the navigation sidebar on the left.
+              </li>
+              <li>
+                If the problem persists, contact your administrator.
+              </li>
+              <li>
+                <a target="_blank" href='https://github.com/visortelle/dekaf/issues'>🛟 Get community support</a> if you are an administrator and not sure how to fix the problem.
+              </li>
+            </ul>
+            <HealthCheck />
+            <div><strong>Last checked at:</strong> {new Date(lastChecked.current).toLocaleTimeString()}</div>
+          </div>
+        )
+      }}
+      isVisible
+      onClose={() => setIsDismissed(true)}
+    />,
     document.body
   ) : null;
 

ui/components/app/contexts/Modals/Modals.tsx

@@ -16,6 +16,8 @@ export type ModalStackEntry = {
   content: ReactNode,
   isNotCloseable?: boolean,
   styleMode?: 'no-content-padding',
+  /** Overrides the default "modal" test id, for dialogs tests need to tell apart. */
+  testId?: string,
 }
 
 export type ModalStack = ModalStackEntry[];
@@ -83,7 +85,10 @@ type ModalElementProps = {
   onClose: () => void;
 }
 
-const ModalElement: React.FC<ModalElementProps> = (props) => {
+/** The presentational part of a modal: backdrop, card, title bar with the close
+  * icon, and Esc handling. Exported so overlays that live above this provider in
+  * the tree (e.g. the health check overlay) can render the same dialog. */
+export const ModalElement: React.FC<ModalElementProps> = (props) => {
   const isVisible = props.isVisible;
   const rootRef = useRef<HTMLDivElement>(null);
 
@@ -106,7 +111,7 @@ const ModalElement: React.FC<ModalElementProps> = (props) => {
       exit={{ opacity: 0, scale: 0.5 }}
       transition={{ duration: 0.25, ease: 'easeInOut', delay: 0.1 }}
       tabIndex={0}
-      data-testid="modal"
+      data-testid={props.entry.testId ?? "modal"}
       onKeyDown={(e) => {
         if (!props.entry.isNotCloseable && e.key === 'Escape') {
           props.onClose();