Disable actions when stream disconnected (#1483)

* pull out network indicator logic

* rename callbacks

* re-execute on reconnection

* make sure tool bar is disabled on start up

* clean up

* node safety

* disable toolbar buttons properly

* grey scale action icon icons dodgy

* test tweaks

* Revert "grey scale action icon icons dodgy"

This reverts commit c3d12a0f05.

* Disable modeling commands when network is bad (#1486)

* Disable modeling commands when network is bad

* disabel on execute too

* fmt

---------

Co-authored-by: Kurt Hutten Irev-Dev <k.hutten@protonmail.ch>

* disable playwright snapshots temporarily

* disable export test instead

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

---------

Co-authored-by: Frank Noirot <frank@zoo.dev>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/components/NetworkHealthIndicator.tsx

@@ -80,7 +80,7 @@ const overallConnectionStateIcon: Record<
   [NetworkHealthState.Disconnected]: 'networkCrossedOut',
 }
 
-export const NetworkHealthIndicator = () => {
+export function useNetworkStatus() {
   const [steps, setSteps] = useState(initialConnectingTypeGroupState)
   const [internetConnected, setInternetConnected] = useState<boolean>(true)
   const [overallState, setOverallState] = useState<NetworkHealthState>(
@@ -118,18 +118,18 @@ export const NetworkHealthIndicator = () => {
   }, [hasIssues, internetConnected])
 
   useEffect(() => {
-    const cb1 = () => {
+    const onlineCallback = () => {
       setSteps(initialConnectingTypeGroupState)
       setInternetConnected(true)
     }
-    const cb2 = () => {
+    const offlineCallback = () => {
       setInternetConnected(false)
     }
-    window.addEventListener('online', cb1)
-    window.addEventListener('offline', cb2)
+    window.addEventListener('online', onlineCallback)
+    window.addEventListener('offline', offlineCallback)
     return () => {
-      window.removeEventListener('online', cb1)
-      window.removeEventListener('offline', cb2)
+      window.removeEventListener('online', onlineCallback)
+      window.removeEventListener('offline', offlineCallback)
     }
   }, [])
 
@@ -183,6 +183,30 @@ export const NetworkHealthIndicator = () => {
     )
   }, [])
 
+  return {
+    hasIssues,
+    overallState,
+    internetConnected,
+    steps,
+    issues,
+    error,
+    setHasCopied,
+    hasCopied,
+  }
+}
+
+export const NetworkHealthIndicator = () => {
+  const {
+    hasIssues,
+    overallState,
+    internetConnected,
+    steps,
+    issues,
+    error,
+    setHasCopied,
+    hasCopied,
+  } = useNetworkStatus()
+
   return (
     <Popover className="relative">
       <Popover.Button