Propagate errors UI (#1369)

* Pass engine connection state to NetworkHealthIndicator

* Create the basis for styling and further work

* Add icons

* Update styles on network health indicator

* Cleanup styles and unused state

* Rename State to NetworkHealthState

* Update tests

* fmt

---------

Co-authored-by: 49lf <ircsurfer33@gmail.com>

src/components/NetworkHealthIndicator.test.tsx

@@ -3,8 +3,9 @@ import { BrowserRouter } from 'react-router-dom'
 import { GlobalStateProvider } from './GlobalStateProvider'
 import CommandBarProvider from './CommandBar/CommandBar'
 import {
-  NETWORK_CONTENT,
+  NETWORK_HEALTH_TEXT,
   NetworkHealthIndicator,
+  NetworkHealthState,
 } from './NetworkHealthIndicator'
 
 function TestWrap({ children }: { children: React.ReactNode }) {
@@ -28,8 +29,8 @@ describe('NetworkHealthIndicator tests', () => {
 
     fireEvent.click(screen.getByTestId('network-toggle'))
 
-    expect(screen.getByTestId('network-good')).toHaveTextContent(
-      NETWORK_CONTENT.good
+    expect(screen.getByTestId('network')).toHaveTextContent(
+      NETWORK_HEALTH_TEXT[NetworkHealthState.Ok]
     )
   })
 
@@ -43,8 +44,8 @@ describe('NetworkHealthIndicator tests', () => {
     fireEvent.offline(window)
     fireEvent.click(screen.getByTestId('network-toggle'))
 
-    expect(screen.getByTestId('network-bad')).toHaveTextContent(
-      NETWORK_CONTENT.bad
+    expect(screen.getByTestId('network')).toHaveTextContent(
+      NETWORK_HEALTH_TEXT[NetworkHealthState.Disconnected]
     )
   })
 })