From eb94326bb64552dbd7df62ae201ccca37f368467 Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Mon, 5 Sep 2022 01:29:11 +0200
Subject: feat(frontend): show connection status

---
 subprojects/frontend/src/editor/ConnectButton.tsx  |  68 +++++++++++++
 .../src/editor/ConnectionStatusNotification.tsx    | 108 +++++++++++++++++++++
 subprojects/frontend/src/editor/EditorButtons.tsx  |   4 +-
 subprojects/frontend/src/editor/EditorPane.tsx     |   2 +
 subprojects/frontend/src/editor/EditorStore.ts     |  20 ++++
 subprojects/frontend/src/editor/GenerateButton.tsx |   1 +
 subprojects/frontend/src/index.tsx                 |   4 +-
 .../frontend/src/xtext/ContentAssistService.ts     |   7 ++
 .../frontend/src/xtext/HighlightingService.ts      |   4 +
 .../frontend/src/xtext/OccurrencesService.ts       |  11 ++-
 subprojects/frontend/src/xtext/UpdateService.ts    |   4 +
 .../frontend/src/xtext/ValidationService.ts        |   4 +
 subprojects/frontend/src/xtext/XtextClient.ts      |  16 ++-
 .../frontend/src/xtext/XtextWebSocketClient.ts     |  12 +++
 14 files changed, 260 insertions(+), 5 deletions(-)
 create mode 100644 subprojects/frontend/src/editor/ConnectButton.tsx
 create mode 100644 subprojects/frontend/src/editor/ConnectionStatusNotification.tsx

diff --git a/subprojects/frontend/src/editor/ConnectButton.tsx b/subprojects/frontend/src/editor/ConnectButton.tsx
new file mode 100644
index 00000000..52e7b854
--- /dev/null
+++ b/subprojects/frontend/src/editor/ConnectButton.tsx
@@ -0,0 +1,68 @@
+import CloudIcon from '@mui/icons-material/Cloud';
+import CloudOffIcon from '@mui/icons-material/CloudOff';
+import SyncIcon from '@mui/icons-material/Sync';
+import SyncProblemIcon from '@mui/icons-material/SyncProblem';
+import IconButton from '@mui/material/IconButton';
+import { keyframes, styled } from '@mui/material/styles';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import type EditorStore from './EditorStore';
+
+const rotateKeyframe = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+`;
+
+const AnimatedSyncIcon = styled(SyncIcon)`
+  animation: ${rotateKeyframe} 1.4s linear infinite;
+`;
+
+export default observer(function ConnectButton({
+  editorStore,
+}: {
+  editorStore: EditorStore | undefined;
+}): JSX.Element {
+  if (
+    editorStore !== undefined &&
+    (editorStore.opening || editorStore.opened)
+  ) {
+    return (
+      <IconButton
+        onClick={() => editorStore.disconnect()}
+        aria-label="Disconnect"
+        color="inherit"
+      >
+        {editorStore.opening ? (
+          <AnimatedSyncIcon fontSize="small" />
+        ) : (
+          <CloudIcon fontSize="small" />
+        )}
+      </IconButton>
+    );
+  }
+
+  let disconnectedIcon: JSX.Element;
+  if (editorStore === undefined) {
+    disconnectedIcon = <SyncIcon fontSize="small" />;
+  } else if (editorStore.connectionErrors.length > 0) {
+    disconnectedIcon = <SyncProblemIcon fontSize="small" />;
+  } else {
+    disconnectedIcon = <CloudOffIcon fontSize="small" />;
+  }
+
+  return (
+    <IconButton
+      disabled={editorStore === undefined}
+      onClick={() => editorStore?.connect()}
+      aria-label="Connect"
+      color="inherit"
+    >
+      {disconnectedIcon}
+    </IconButton>
+  );
+});
diff --git a/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx b/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx
new file mode 100644
index 00000000..e402e296
--- /dev/null
+++ b/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx
@@ -0,0 +1,108 @@
+import Button from '@mui/material/Button';
+import { observer } from 'mobx-react-lite';
+import { type SnackbarKey, useSnackbar } from 'notistack';
+import React, { useEffect } from 'react';
+
+import { ContrastThemeProvider } from '../theme/ThemeProvider';
+
+import type EditorStore from './EditorStore';
+
+const CONNECTING_DEBOUNCE_TIMEOUT = 250;
+
+export default observer(function ConnectionStatusNotification({
+  editorStore,
+}: {
+  editorStore: EditorStore;
+}): null {
+  const { opened, opening, connectionErrors } = editorStore;
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+
+  useEffect(() => {
+    if (opening) {
+      let key: SnackbarKey | undefined;
+      let timeout: number | undefined = setTimeout(() => {
+        timeout = undefined;
+        key = enqueueSnackbar('Connecting to Refinery', {
+          persist: true,
+          action: (
+            <Button onClick={() => editorStore.disconnect()} color="inherit">
+              Cancel
+            </Button>
+          ),
+        });
+      }, CONNECTING_DEBOUNCE_TIMEOUT);
+      return () => {
+        if (timeout !== undefined) {
+          clearTimeout(timeout);
+        }
+        if (key !== undefined) {
+          closeSnackbar(key);
+        }
+      };
+    }
+
+    if (connectionErrors.length >= 1) {
+      const key = enqueueSnackbar(
+        <div>
+          Connection error: <b>{connectionErrors[0]}</b>
+          {connectionErrors.length >= 2 && (
+            <>
+              {' '}
+              and <b>{connectionErrors.length - 1}</b> more{' '}
+              {connectionErrors.length >= 3 ? 'errors' : 'error'}
+            </>
+          )}
+        </div>,
+        {
+          persist: !opened,
+          variant: 'error',
+          action: opened ? (
+            <ContrastThemeProvider>
+              <Button onClick={() => editorStore.disconnect()} color="inherit">
+                Disconnect
+              </Button>
+            </ContrastThemeProvider>
+          ) : (
+            <ContrastThemeProvider>
+              <Button onClick={() => editorStore.connect()} color="inherit">
+                Reconnect
+              </Button>
+              <Button onClick={() => editorStore.disconnect()} color="inherit">
+                Cancel
+              </Button>
+            </ContrastThemeProvider>
+          ),
+        },
+      );
+      return () => closeSnackbar(key);
+    }
+
+    if (!opened) {
+      const key = enqueueSnackbar(
+        <div>
+          <b>Not connected to Refinery:</b> Some editing features might be
+          degraded
+        </div>,
+        {
+          action: (
+            <ContrastThemeProvider>
+              <Button onClick={() => editorStore.connect()}>Reconnect</Button>
+            </ContrastThemeProvider>
+          ),
+        },
+      );
+      return () => closeSnackbar(key);
+    }
+
+    return () => {};
+  }, [
+    editorStore,
+    opened,
+    opening,
+    connectionErrors,
+    closeSnackbar,
+    enqueueSnackbar,
+  ]);
+
+  return null;
+});
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
index d2273c6c..fd046d46 100644
--- a/subprojects/frontend/src/editor/EditorButtons.tsx
+++ b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -15,6 +15,7 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
+import ConnectButton from './ConnectButton';
 import type EditorStore from './EditorStore';
 
 // Exhastive switch as proven by TypeScript.
@@ -93,13 +94,14 @@ export default observer(function EditorButtons({
         </ToggleButton>
       </ToggleButtonGroup>
       <IconButton
-        disabled={editorStore === undefined}
+        disabled={editorStore === undefined || !editorStore.opened}
         onClick={() => editorStore?.formatText()}
         aria-label="Automatic format"
         color="inherit"
       >
         <FormatPaint fontSize="small" />
       </IconButton>
+      <ConnectButton editorStore={editorStore} />
     </Stack>
   );
 });
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx
index 2651726c..079ebcdc 100644
--- a/subprojects/frontend/src/editor/EditorPane.tsx
+++ b/subprojects/frontend/src/editor/EditorPane.tsx
@@ -7,6 +7,7 @@ import React, { useState } from 'react';
 
 import { useRootStore } from '../RootStore';
 
+import ConnectionStatusNotification from './ConnectionStatusNotification';
 import EditorArea from './EditorArea';
 import EditorButtons from './EditorButtons';
 import GenerateButton from './GenerateButton';
@@ -43,6 +44,7 @@ export default observer(function EditorPane(): JSX.Element {
           <EditorLoading />
         ) : (
           <>
+            <ConnectionStatusNotification editorStore={editorStore} />
             <SearchPanelPortal editorStore={editorStore} />
             <EditorArea editorStore={editorStore} />
           </>
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts
index 4407376b..3ec33b2c 100644
--- a/subprojects/frontend/src/editor/EditorStore.ts
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -69,6 +69,26 @@ export default class EditorStore {
     });
   }
 
+  get opened(): boolean {
+    return this.client.webSocketClient.opened;
+  }
+
+  get opening(): boolean {
+    return this.client.webSocketClient.opening;
+  }
+
+  get connectionErrors(): string[] {
+    return this.client.webSocketClient.errors;
+  }
+
+  connect(): void {
+    this.client.webSocketClient.connect();
+  }
+
+  disconnect(): void {
+    this.client.webSocketClient.disconnect();
+  }
+
   setDarkMode(darkMode: boolean): void {
     log.debug('Update editor dark mode', darkMode);
     this.dispatch({
diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx
index 5254f6cb..2ffb1a94 100644
--- a/subprojects/frontend/src/editor/GenerateButton.tsx
+++ b/subprojects/frontend/src/editor/GenerateButton.tsx
@@ -46,6 +46,7 @@ export default observer(function GenerateButton({
 
   return (
     <Button
+      disabled={!editorStore.opened}
       color={warningCount > 0 ? 'warning' : 'primary'}
       className="rounded"
       startIcon={<PlayArrowIcon />}
diff --git a/subprojects/frontend/src/index.tsx b/subprojects/frontend/src/index.tsx
index 602a68ef..5760327e 100644
--- a/subprojects/frontend/src/index.tsx
+++ b/subprojects/frontend/src/index.tsx
@@ -1,5 +1,6 @@
 import Box from '@mui/material/Box';
 import CssBaseline from '@mui/material/CssBaseline';
+import Grow from '@mui/material/Grow';
 import { configure } from 'mobx';
 import { SnackbarProvider } from 'notistack';
 import React, { Suspense, lazy } from 'react';
@@ -77,7 +78,8 @@ const app = (
       <ThemeProvider>
         <CssBaseline enableColorScheme />
         <WindowControlsOverlayColor />
-        <SnackbarProvider>
+        {/* @ts-expect-error -- notistack has problems with `exactOptionalPropertyTypes` */}
+        <SnackbarProvider TransitionComponent={Grow}>
           <RegisterServiceWorker />
           <Box height="100vh" overflow="auto">
             <Suspense fallback={<Loading />}>
diff --git a/subprojects/frontend/src/xtext/ContentAssistService.ts b/subprojects/frontend/src/xtext/ContentAssistService.ts
index 9e41f57b..101990af 100644
--- a/subprojects/frontend/src/xtext/ContentAssistService.ts
+++ b/subprojects/frontend/src/xtext/ContentAssistService.ts
@@ -115,6 +115,13 @@ export default class ContentAssistService {
   }
 
   async contentAssist(context: CompletionContext): Promise<CompletionResult> {
+    if (!this.updateService.opened) {
+      this.lastCompletion = undefined;
+      return {
+        from: context.pos,
+        options: [],
+      };
+    }
     const tokenBefore = findToken(context);
     if (!context.explicit && !shouldCompleteImplicitly(tokenBefore, context)) {
       return {
diff --git a/subprojects/frontend/src/xtext/HighlightingService.ts b/subprojects/frontend/src/xtext/HighlightingService.ts
index f9ab7b7e..a126ee40 100644
--- a/subprojects/frontend/src/xtext/HighlightingService.ts
+++ b/subprojects/frontend/src/xtext/HighlightingService.ts
@@ -31,4 +31,8 @@ export default class HighlightingService {
     });
     this.store.updateSemanticHighlighting(ranges);
   }
+
+  onDisconnect(): void {
+    this.store.updateSemanticHighlighting([]);
+  }
 }
diff --git a/subprojects/frontend/src/xtext/OccurrencesService.ts b/subprojects/frontend/src/xtext/OccurrencesService.ts
index c8d6fd7b..9d738d76 100644
--- a/subprojects/frontend/src/xtext/OccurrencesService.ts
+++ b/subprojects/frontend/src/xtext/OccurrencesService.ts
@@ -41,6 +41,15 @@ export default class OccurrencesService {
     private readonly updateService: UpdateService,
   ) {}
 
+  onReconnect(): void {
+    this.clearOccurrences();
+    this.findOccurrencesLater();
+  }
+
+  onDisconnect(): void {
+    this.clearOccurrences();
+  }
+
   onTransaction(transaction: Transaction): void {
     if (transaction.docChanged) {
       // Must clear occurrences asynchronously from `onTransaction`,
@@ -91,7 +100,7 @@ export default class OccurrencesService {
   }
 
   private async updateOccurrences() {
-    if (!this.needsOccurrences) {
+    if (!this.needsOccurrences || !this.updateService.opened) {
       this.clearOccurrences();
       return;
     }
diff --git a/subprojects/frontend/src/xtext/UpdateService.ts b/subprojects/frontend/src/xtext/UpdateService.ts
index d7471cdc..63e28652 100644
--- a/subprojects/frontend/src/xtext/UpdateService.ts
+++ b/subprojects/frontend/src/xtext/UpdateService.ts
@@ -82,6 +82,10 @@ export default class UpdateService {
     }
   }
 
+  get opened(): boolean {
+    return this.webSocketClient.opened;
+  }
+
   private idleUpdate(): void {
     if (!this.webSocketClient.opened || !this.tracker.needsUpdate) {
       return;
diff --git a/subprojects/frontend/src/xtext/ValidationService.ts b/subprojects/frontend/src/xtext/ValidationService.ts
index e78318f7..72414590 100644
--- a/subprojects/frontend/src/xtext/ValidationService.ts
+++ b/subprojects/frontend/src/xtext/ValidationService.ts
@@ -28,4 +28,8 @@ export default class ValidationService {
     });
     this.store.updateDiagnostics(diagnostics);
   }
+
+  onDisconnect(): void {
+    this.store.updateDiagnostics([]);
+  }
 }
diff --git a/subprojects/frontend/src/xtext/XtextClient.ts b/subprojects/frontend/src/xtext/XtextClient.ts
index 6351c9fd..c02afb3b 100644
--- a/subprojects/frontend/src/xtext/XtextClient.ts
+++ b/subprojects/frontend/src/xtext/XtextClient.ts
@@ -18,7 +18,7 @@ import type { XtextWebPushService } from './xtextMessages';
 const log = getLogger('xtext.XtextClient');
 
 export default class XtextClient {
-  private readonly webSocketClient: XtextWebSocketClient;
+  readonly webSocketClient: XtextWebSocketClient;
 
   private readonly updateService: UpdateService;
 
@@ -32,7 +32,8 @@ export default class XtextClient {
 
   constructor(store: EditorStore) {
     this.webSocketClient = new XtextWebSocketClient(
-      () => this.updateService.onReconnect(),
+      () => this.onReconnect(),
+      () => this.onDisconnect(),
       (resource, stateId, service, push) =>
         this.onPush(resource, stateId, service, push),
     );
@@ -46,6 +47,17 @@ export default class XtextClient {
     this.occurrencesService = new OccurrencesService(store, this.updateService);
   }
 
+  private onReconnect(): void {
+    this.updateService.onReconnect();
+    this.occurrencesService.onReconnect();
+  }
+
+  private onDisconnect(): void {
+    this.highlightingService.onDisconnect();
+    this.validationService.onDisconnect();
+    this.occurrencesService.onDisconnect();
+  }
+
   onTransaction(transaction: Transaction): void {
     // `ContentAssistService.prototype.onTransaction` needs the dirty change desc
     // _before_ the current edit, so we call it before `updateService`.
diff --git a/subprojects/frontend/src/xtext/XtextWebSocketClient.ts b/subprojects/frontend/src/xtext/XtextWebSocketClient.ts
index eedfa365..b69e1d6c 100644
--- a/subprojects/frontend/src/xtext/XtextWebSocketClient.ts
+++ b/subprojects/frontend/src/xtext/XtextWebSocketClient.ts
@@ -22,6 +22,8 @@ const log = getLogger('xtext.XtextWebSocketClient');
 
 export type ReconnectHandler = () => void;
 
+export type DisconnectHandler = () => void;
+
 export type PushHandler = (
   resourceId: string,
   stateId: string,
@@ -136,6 +138,7 @@ export default class XtextWebSocketClient {
 
   constructor(
     private readonly onReconnect: ReconnectHandler,
+    private readonly onDisconnect: DisconnectHandler,
     private readonly onPush: PushHandler,
   ) {
     this.interpreter
@@ -179,10 +182,18 @@ export default class XtextWebSocketClient {
     return this.interpreter.state;
   }
 
+  get opening(): boolean {
+    return this.state.matches('connection.socketCreated.open.opening');
+  }
+
   get opened(): boolean {
     return this.state.matches('connection.socketCreated.open.opened');
   }
 
+  get errors(): string[] {
+    return this.state.context.errors;
+  }
+
   connect(): void {
     this.interpreter.send('CONNECT');
   }
@@ -261,6 +272,7 @@ export default class XtextWebSocketClient {
   }
 
   private cancelPendingRequests(): void {
+    this.onDisconnect();
     this.pendingRequests.forEach((task) =>
       task.reject(new CancelledError('Closing connection')),
     );
-- 
cgit v1.2.3-54-g00ecf