Make Navbar and side-menu fixed on page, add websocket disconnected icon (#1697)

* Make Navbar and side-menu fixed on page, add websocket disconnected icon in navbar

* Resolved comments, cleanup

* Renamed some variables for better clarity

Author: Georgi2704

.changeset/wild-otters-laugh.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': minor
+---
+
+1662 Make the navbar fixed when scrolling and notify user for failing websocket there.

packages/orchestrator-ui-components/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.tsx

@@ -1,20 +1,26 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { FC, useCallback, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { useTranslations } from 'next-intl';
 
 import { EuiToolTip } from '@elastic/eui';
 
+import { WfoHeaderBadge } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { useOrchestratorTheme } from '@/hooks/useOrchestratorTheme';
 import { WfoBoltFill, WfoBoltSlashFill } from '@/icons';
 import { orchestratorApi } from '@/rtk';
 import { useStreamMessagesQuery } from '@/rtk/endpoints/streamMessages';
 
-import { WfoHeaderBadge } from '../WfoHeaderBadge';
 import { getStyles } from './styles';
 
-export const WfoWebsocketStatusBadge = () => {
+interface WfoWebsocketStatusBadgeProps {
+    hideWhenConnected?: boolean;
+}
+
+export const WfoWebsocketStatusBadge: FC<WfoWebsocketStatusBadgeProps> = ({
+    hideWhenConnected = false,
+}) => {
     const dispatch = useDispatch();
     const { connectedStyle, disconnectedStyle } =
         useWithOrchestratorTheme(getStyles);
@@ -23,6 +29,8 @@ export const WfoWebsocketStatusBadge = () => {
     const { theme } = useOrchestratorTheme();
     const { data: websocketConnected } = useStreamMessagesQuery();
 
+    const showBadge = !(websocketConnected && hideWhenConnected);
+
     const reconnect = useCallback(() => {
         dispatch(orchestratorApi.util.resetApiState());
     }, [dispatch]);
@@ -56,7 +64,7 @@ export const WfoWebsocketStatusBadge = () => {
         };
     }, [reconnect, websocketConnected]);
 
-    return (
+    return showBadge ? (
         <EuiToolTip
             position="bottom"
             content={
@@ -85,5 +93,7 @@ export const WfoWebsocketStatusBadge = () => {
                 iconOnClickAriaLabel={undefined}
             />
         </EuiToolTip>
+    ) : (
+        <></>
     );
 };

packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx

@@ -17,6 +17,7 @@ import {
     WfoEngineStatusBadge,
     WfoEnvironmentBadge,
     WfoFailedTasksBadge,
+    WfoWebsocketStatusBadge,
 } from '@/components';
 import { WfoAppLogo } from '@/components/WfoPageTemplate/WfoPageHeader/WfoAppLogo';
 import { getWfoPageHeaderStyles } from '@/components/WfoPageTemplate/WfoPageHeader/styles';
@@ -70,6 +71,7 @@ export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
             <EuiHeaderSection>
                 <EuiHeaderSectionItem>
                     <EuiBadgeGroup css={{ marginRight: multiplyByBaseUnit(1) }}>
+                        <WfoWebsocketStatusBadge hideWhenConnected={true} />
                         <WfoEngineStatusBadge />
                         <WfoFailedTasksBadge />
                     </EuiBadgeGroup>

packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageTemplate/WfoPageTemplate.tsx

@@ -1,13 +1,11 @@
 import React, { FC, ReactElement, ReactNode, useState } from 'react';
 
-import { EuiPageTemplate } from '@elastic/eui';
 import type { EuiThemeColorMode } from '@elastic/eui';
+import { EuiPageTemplate } from '@elastic/eui';
 import { EuiSideNavItemType } from '@elastic/eui/src/components/side_nav/side_nav_types';
 
-import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme';
-import { WfoBreadcrumbs } from '../WfoBreadcrumbs';
-import { WfoPageHeader } from '../WfoPageHeader';
-import { WfoSidebar } from '../WfoSidebar';
+import { WfoBreadcrumbs, WfoPageHeader, WfoSidebar } from '@/components';
+import { useOrchestratorTheme } from '@/hooks';
 
 export interface WfoPageTemplateProps {
     getAppLogo: (navigationHeight: number) => ReactElement;
@@ -35,7 +33,6 @@ export const WfoPageTemplate: FC<WfoPageTemplateProps> = ({
                 navigationHeight={navigationHeight}
                 onThemeSwitch={onThemeSwitch}
             />
-
             {/* Sidebar and content area */}
             <EuiPageTemplate
                 panelled={false}
@@ -48,6 +45,8 @@ export const WfoPageTemplate: FC<WfoPageTemplateProps> = ({
                     <EuiPageTemplate.Sidebar
                         css={{
                             backgroundColor: theme.colors.body,
+                            overflowY: 'auto',
+                            maxHeight: `calc(100vh - ${navigationHeight}px)`,
                         }}
                     >
                         <WfoSidebar overrideMenuItems={overrideMenuItems} />
@@ -56,6 +55,8 @@ export const WfoPageTemplate: FC<WfoPageTemplateProps> = ({
                 <EuiPageTemplate.Section
                     css={{
                         backgroundColor: theme.colors.emptyShade,
+                        overflowY: 'auto',
+                        maxHeight: `calc(100vh - ${navigationHeight}px)`,
                     }}
                 >
                     <WfoBreadcrumbs

packages/orchestrator-ui-components/src/messages/en-GB.json

@@ -20,6 +20,7 @@
         "lightMode": "Light mode",
         "websocketConnected": "This page receives live updates from the server",
         "websocketDisconnected": "The connection to the server is lost, click the icon or refresh the page",
+        "websocketDisconnectedShort": "WebSocket disconnected, click the icon to reconnect",
         "resetToDefault": "Reset to default",
         "savePreferences": "Save preferences",
         "numberOfRows": "Number of rows",

packages/orchestrator-ui-components/src/messages/nl-NL.json

@@ -20,6 +20,7 @@
         "lightMode": "Light mode",
         "websocketConnected": "De pagina ontvangt live updates van de server",
         "websocketDisconnected": "De websocket verbinding is verbroken, klik op het icoon of ververs de pagina.",
+        "websocketDisconnectedShort": "WebSocket verbroken, klik op het icoon om opnieuw te verbinden.",
         "resetToDefault": "Reset naar standaard",
         "savePreferences": "Voorkeuren opslaan",
         "numberOfRows": "Aantal rijen",

packages/orchestrator-ui-components/src/rtk/endpoints/streamMessages.ts

@@ -50,7 +50,7 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
     endpoints: (build) => ({
         streamMessages: build.query<boolean, void>({
             queryFn: () => {
-                return { data: false };
+                return { data: true };
             },
             async onCacheEntryAdded(
                 _,