feat: implement info panel (#622)

* feat: implement info panel

Author: shadowusr

lib/gui/constants/client-events.ts

@@ -9,7 +9,9 @@ export const ClientEvents = {
     RETRY: 'retry',
     ERROR: 'err',
 
-    END: 'end'
+    END: 'end',
+
+    CONNECTED: 'connected'
 } as const;
 
 export type ClientEvents = typeof ClientEvents;

lib/gui/event-source.ts

@@ -1,21 +1,28 @@
 import {Response} from 'express';
 import stringify from 'json-stringify-safe';
+import {ClientEvents} from './constants';
 
 export class EventSource {
     private _connections: Response[];
     constructor() {
         this._connections = [];
     }
 
+    private _write(connection: Response, event: string, data?: unknown): void {
+        connection.write('event: ' + event + '\n');
+        connection.write('data: ' + stringify(data) + '\n');
+        connection.write('\n\n');
+    }
+
     addConnection(connection: Response): void {
         this._connections.push(connection);
+
+        this._write(connection, ClientEvents.CONNECTED, 1);
     }
 
     emit(event: string, data?: unknown): void {
-        this._connections.forEach(function(connection) {
-            connection.write('event: ' + event + '\n');
-            connection.write('data: ' + stringify(data) + '\n');
-            connection.write('\n\n');
+        this._connections.forEach((connection) => {
+            this._write(connection, event, data);
         });
     }
 }

lib/static/modules/action-names.ts

@@ -78,5 +78,6 @@ export default {
     SELECT_ALL: 'SELECT_ALL',
     DESELECT_ALL: 'DESELECT_ALL',
     SORT_TESTS_SET_CURRENT_EXPRESSION: 'SORT_TESTS_SET_CURRENT_EXPRESSION',
-    SORT_TESTS_SET_DIRECTION: 'SORT_TESTS_SET_DIRECTION'
+    SORT_TESTS_SET_DIRECTION: 'SORT_TESTS_SET_DIRECTION',
+    SET_GUI_SERVER_CONNECTION_STATUS: 'SET_GUI_SERVER_CONNECTION_STATUS'
 } as const;

lib/static/modules/actions/gui-server-connection.ts

@@ -0,0 +1,10 @@
+import {Action} from '@/static/modules/actions/types';
+import actionNames from '@/static/modules/action-names';
+
+type SetGuiServerConnectionStatusAction = Action<typeof actionNames.SET_GUI_SERVER_CONNECTION_STATUS, {
+    isConnected: boolean;
+}>;
+export const setGuiServerConnectionStatus = (payload: SetGuiServerConnectionStatusAction['payload']): SetGuiServerConnectionStatusAction =>
+    ({type: actionNames.SET_GUI_SERVER_CONNECTION_STATUS, payload});
+
+export type GuiServerConnectionAction = SetGuiServerConnectionStatusAction;

lib/static/modules/actions/types.ts

@@ -8,6 +8,7 @@ import {State} from '@/static/new-ui/types/store';
 import {LifecycleAction} from '@/static/modules/actions/lifecycle';
 import {SuitesPageAction} from '@/static/modules/actions/suites-page';
 import {SortTestsAction} from '@/static/modules/actions/sort-tests';
+import {GuiServerConnectionAction} from '@/static/modules/actions/gui-server-connection';
 
 export type {Dispatch} from 'redux';
 
@@ -23,5 +24,6 @@ export type AppThunk<ReturnType = Promise<void>> = ThunkAction<ReturnType, State
 export type SomeAction =
     | GroupTestsAction
     | LifecycleAction
+    | SortTestsAction
     | SuitesPageAction
-    | SortTestsAction;
+    | GuiServerConnectionAction;

lib/static/modules/default-state.ts

@@ -126,6 +126,9 @@ export default Object.assign({config: configDefaults}, {
             availableExpressions: [],
             currentExpressionIds: [],
             currentDirection: SortDirection.Asc
+        },
+        guiServerConnection: {
+            isConnected: false
         }
     },
     ui: {
@@ -139,5 +142,6 @@ export default Object.assign({config: configDefaults}, {
         staticImageAccepterToolbar: {
             offset: {x: 0, y: 0}
         }
-    }
+    },
+    timestamp: 0
 }) satisfies State;

lib/static/modules/reducers/gui-server-connection.ts

@@ -0,0 +1,20 @@
+import {State} from '@/static/new-ui/types/store';
+import {SomeAction} from '@/static/modules/actions/types';
+import actionNames from '@/static/modules/action-names';
+import {applyStateUpdate} from '@/static/modules/utils';
+
+export default (state: State, action: SomeAction): State => {
+    switch (action.type) {
+        case actionNames.SET_GUI_SERVER_CONNECTION_STATUS: {
+            return applyStateUpdate(state, {
+                app: {
+                    guiServerConnection: {
+                        isConnected: action.payload.isConnected
+                    }
+                }
+            });
+        }
+        default:
+            return state;
+    }
+};

lib/static/modules/reducers/index.js

@@ -31,6 +31,7 @@ import visualChecksPage from './visual-checks-page';
 import isInitialized from './is-initialized';
 import newUiGroupedTests from './new-ui-grouped-tests';
 import sortTests from './sort-tests';
+import guiServerConnection from './gui-server-connection';
 
 // The order of specifying reducers is important.
 // At the top specify reducers that does not depend on other state fields.
@@ -66,5 +67,6 @@ export default reduceReducers(
     progressBar,
     suitesPage,
     visualChecksPage,
-    isInitialized
+    isInitialized,
+    guiServerConnection
 );

lib/static/new-ui/app/gui.tsx

@@ -5,6 +5,8 @@ import {ClientEvents} from '@/gui/constants';
 import {App} from './App';
 import store from '../../modules/store';
 import {finGuiReport, thunkInitGuiReport, suiteBegin, testBegin, testResult, testsEnd} from '../../modules/actions';
+import {setGuiServerConnectionStatus} from '@/static/modules/actions/gui-server-connection';
+import actionNames from '@/static/modules/action-names';
 
 const rootEl = document.getElementById('app') as HTMLDivElement;
 const root = createRoot(rootEl);
@@ -13,6 +15,20 @@ function Gui(): ReactNode {
     const subscribeToEvents = (): void => {
         const eventSource = new EventSource('/events');
 
+        eventSource.addEventListener(ClientEvents.CONNECTED, (): void => {
+            store.dispatch({type: actionNames.UPDATE_LOADING_VISIBILITY, payload: false});
+
+            store.dispatch(setGuiServerConnectionStatus({isConnected: true}));
+        });
+
+        eventSource.onerror = (): void => {
+            store.dispatch({type: actionNames.UPDATE_LOADING_IS_IN_PROGRESS, payload: true});
+            store.dispatch({type: actionNames.UPDATE_LOADING_TITLE, payload: 'Lost connection to Testplane UI server. Trying to reconnect'});
+            store.dispatch({type: actionNames.UPDATE_LOADING_VISIBILITY, payload: true});
+
+            store.dispatch(setGuiServerConnectionStatus({isConnected: false}));
+        };
+
         eventSource.addEventListener(ClientEvents.BEGIN_SUITE, (e) => {
             const data = JSON.parse(e.data);
             store.dispatch(suiteBegin(data));

lib/static/new-ui/components/AsidePanel/index.module.css

@@ -0,0 +1,14 @@
+.container {
+    background-color: #fff;
+    padding: 20px;
+    width: 440px;
+    height: 100%;
+    overflow-x: scroll;
+
+    --g-text-body-font-weight: 450;
+    --g-text-body-short-font-size: 15px;
+}
+
+.divider {
+    margin: 12px 0 20px 0;
+}