@orchestrator-ui/orchestrator-ui-components 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "0.10.0",
+    "version": "0.11.0",
     "license": "MIT",
     "scripts": {
         "test": "jest",

package/src/components/WfoBadges/WfoFailedTasksBadge/WfoFailedTasksBadge.tsx

@@ -86,9 +86,7 @@ export const WfoFailedTasksBadge = () => {
                     iconType={() => (
                         <WfoCheckmarkCircleFill color={theme.colors.success} />
                     )}
-                >
-                    {taskCountsSummary.total}
-                </WfoHeaderBadge>
+                />
             </EuiToolTip>
         );
     }

package/src/components/WfoBadges/WfoHeaderBadge/WfoHeaderBadge.tsx

@@ -7,7 +7,7 @@ import { WfoBadge } from '../WfoBadge/WfoBadge';
 
 export type HeaderBadgeProps = EuiBadgeProps & {
     textColor: TextColor | string;
-    children: ReactNode;
+    children?: ReactNode;
 };
 
 export const WfoHeaderBadge: FC<HeaderBadgeProps> = ({

package/src/components/WfoBadges/WfoSubscriptionSyncStatusBadge/WfoSubscriptionSyncStatusBadge.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import type { Meta } from '@storybook/react';
+
+import { WfoSubscriptionSyncStatusBadge } from './WfoSubscriptionSyncStatusBadge';
+
+const Story: Meta<typeof WfoSubscriptionSyncStatusBadge> = {
+    component: (args) => (
+        <div style={{ display: 'flex' }}>
+            <WfoSubscriptionSyncStatusBadge {...args} />
+        </div>
+    ),
+    title: 'Badges/WfoSubscriptionSyncStatusBadge',
+};
+export default Story;
+
+export const Primary = {
+    args: {
+        insync: true,
+    },
+};
+
+export const Secondary = {
+    args: {
+        insync: false,
+    },
+};

package/src/components/WfoBadges/WfoSubscriptionSyncStatusBadge/WfoSubscriptionSyncStatusBadge.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { useOrchestratorTheme } from '../../../hooks';
+import { WfoBadge } from '../WfoBadge';
+
+export type WfoSubscriptionSyncStatusBadgeProps = {
+    insync: boolean;
+};
+
+export const WfoSubscriptionSyncStatusBadge: FC<
+    WfoSubscriptionSyncStatusBadgeProps
+> = ({ insync }) => {
+    const { theme, toSecondaryColor } = useOrchestratorTheme();
+
+    const t = useTranslations('common');
+
+    const getBadgePropertiesFromStatus = (insync: boolean) => {
+        const { danger, dangerText, success, successText } = theme.colors;
+
+        if (insync) {
+            return {
+                badgeColor: toSecondaryColor(success),
+                textColor: successText,
+                insyncText: t('insyncTrue'),
+            };
+        } else {
+            return {
+                badgeColor: toSecondaryColor(danger),
+                textColor: dangerText,
+                insyncText: t('insyncFalse'),
+            };
+        }
+    };
+
+    const { badgeColor, textColor, insyncText } =
+        getBadgePropertiesFromStatus(insync);
+
+    return (
+        <WfoBadge textColor={textColor} color={badgeColor}>
+            {insyncText}
+        </WfoBadge>
+    );
+};

package/src/components/WfoBadges/WfoSubscriptionSyncStatusBadge/index.ts

@@ -0,0 +1 @@
+export * from './WfoSubscriptionSyncStatusBadge';

package/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoWebsocketStatusBadge } from './WfoWebsocketStatusBadge';
+
+const Story: Meta<typeof WfoWebsocketStatusBadge> = {
+    component: WfoWebsocketStatusBadge,
+    title: 'Badges/WfoWebsocketStatusBadge',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiToolTip } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '@/hooks/useOrchestratorTheme';
+import { WfoStatusDotIcon, WfoXCircleFill } from '@/icons';
+import { useStreamMessagesQuery } from '@/rtk/endpoints/streamMessages';
+
+import { WfoHeaderBadge } from '../WfoHeaderBadge';
+
+export const WfoWebsocketStatusBadge = () => {
+    const t = useTranslations('main');
+    const { theme } = useOrchestratorTheme();
+    const { data: websocketConnected = false } = useStreamMessagesQuery();
+
+    return (
+        <EuiToolTip
+            position="bottom"
+            content={
+                websocketConnected
+                    ? t('websocketConnected')
+                    : t('websocketDisconnected')
+            }
+        >
+            <WfoHeaderBadge
+                color={theme.colors.emptyShade}
+                textColor={theme.colors.shadow}
+                iconType={() =>
+                    websocketConnected ? (
+                        <WfoStatusDotIcon color={theme.colors.success} />
+                    ) : (
+                        <WfoXCircleFill color={theme.colors.danger} />
+                    )
+                }
+                style={{ paddingLeft: '8px' }}
+            />
+        </EuiToolTip>
+    );
+};

package/src/components/WfoBadges/WfoWebsocketStatusBadge/index.ts

@@ -0,0 +1 @@
+export * from './WfoWebsocketStatusBadge';

package/src/components/WfoForms/formFields/CustomerField.tsx

@@ -35,7 +35,10 @@ function Customer({ ...props }: CustomerFieldProps) {
 
     if (!isLoading && customers) {
         customers?.map((customer) => {
-            uuidCustomerNameMap.set(customer.customerId, customer.fullname);
+            uuidCustomerNameMap.set(
+                customer.customerId,
+                `${customer.shortcode} - ${customer.fullname}`,
+            );
         });
     }
 

package/src/components/WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx

@@ -1,5 +1,7 @@
 import React, { FC, ReactElement } from 'react';
 
+import { useTranslations } from 'next-intl';
+
 import {
     EuiBadgeGroup,
     EuiButtonIcon,
@@ -8,16 +10,19 @@ import {
     EuiHeaderSection,
     EuiHeaderSectionItem,
 } from '@elastic/eui';
+import type { EuiThemeColorMode } from '@elastic/eui';
 
 import {
     WfoEngineStatusBadge,
     WfoEnvironmentBadge,
     WfoFailedTasksBadge,
 } from '@/components';
+import { WfoWebsocketStatusBadge } from '@/components/WfoBadges/WfoWebsocketStatusBadge';
 import { WfoAppLogo } from '@/components/WfoPageTemplate/WfoPageHeader/WfoAppLogo';
 import { getWfoPageHeaderStyles } from '@/components/WfoPageTemplate/WfoPageHeader/styles';
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { WfoLogoutIcon, WfoSideMenu } from '@/icons';
+import { ColorModes } from '@/types';
 
 export interface WfoPageHeaderProps {
     // todo: should be part of theme!
@@ -25,15 +30,23 @@ export interface WfoPageHeaderProps {
     getAppLogo: (navigationHeight: number) => ReactElement;
     handleSideMenuClick: () => void;
     handleLogoutClick: () => void;
+    onThemeSwitch: (theme: EuiThemeColorMode) => void;
 }
 
+const ENABLE_THEME_SWITCH =
+    process.env.NEXT_PUBLIC_USE_THEME_TOGGLE === 'true' || false;
+const ENABLE_WEBSOCKET =
+    process.env.NEXT_PUBLIC_USE_WEBSOCKET === 'true' || false;
+
 export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
     navigationHeight,
     getAppLogo,
     handleSideMenuClick,
     handleLogoutClick,
+    onThemeSwitch,
 }) => {
-    const { theme, multiplyByBaseUnit } = useOrchestratorTheme();
+    const t = useTranslations('main');
+    const { theme, multiplyByBaseUnit, colorMode } = useOrchestratorTheme();
     const { getHeaderStyle, appNameStyle } = useWithOrchestratorTheme(
         getWfoPageHeaderStyles,
     );
@@ -63,11 +76,43 @@ export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
 
             <EuiHeaderSection>
                 <EuiHeaderSectionItem>
-                    <EuiBadgeGroup css={{ marginRight: multiplyByBaseUnit(2) }}>
+                    <EuiBadgeGroup css={{ marginRight: multiplyByBaseUnit(1) }}>
                         <WfoEngineStatusBadge />
                         <WfoFailedTasksBadge />
+                        {ENABLE_WEBSOCKET && <WfoWebsocketStatusBadge />}
                     </EuiBadgeGroup>
 
+                    {ENABLE_THEME_SWITCH && (
+                        <EuiButtonIcon
+                            aria-label={t(
+                                colorMode === ColorModes.LIGHT
+                                    ? 'darkMode'
+                                    : 'lightMode',
+                            )}
+                            display="empty"
+                            iconType={
+                                colorMode === ColorModes.LIGHT ? 'moon' : 'sun'
+                            }
+                            css={{
+                                width: '48px',
+                                height: '48px',
+                                color: 'white',
+                            }}
+                            title={t(
+                                colorMode === ColorModes.LIGHT
+                                    ? 'darkMode'
+                                    : 'lightMode',
+                            )}
+                            onClick={() =>
+                                onThemeSwitch(
+                                    colorMode === ColorModes.LIGHT
+                                        ? ColorModes.DARK
+                                        : ColorModes.LIGHT,
+                                )
+                            }
+                        />
+                    )}
+
                     <EuiButtonIcon
                         aria-label="Logout"
                         display="empty"

package/src/components/WfoPageTemplate/WfoPageTemplate/WfoPageTemplate.tsx

@@ -3,6 +3,7 @@ import React, { FC, ReactElement, ReactNode, useState } from 'react';
 import { signOut } from 'next-auth/react';
 
 import { EuiPageTemplate } from '@elastic/eui';
+import type { EuiThemeColorMode } from '@elastic/eui';
 import { EuiSideNavItemType } from '@elastic/eui/src/components/side_nav/side_nav_types';
 
 import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme';
@@ -15,6 +16,7 @@ export interface WfoPageTemplateProps {
     overrideMenuItems?: (
         defaultMenuItems: EuiSideNavItemType<object>[],
     ) => EuiSideNavItemType<object>[];
+    onThemeSwitch: (theme: EuiThemeColorMode) => void;
     children: ReactNode;
 }
 
@@ -22,10 +24,10 @@ export const WfoPageTemplate: FC<WfoPageTemplateProps> = ({
     children,
     getAppLogo,
     overrideMenuItems,
+    onThemeSwitch,
 }) => {
     const { theme, multiplyByBaseUnit } = useOrchestratorTheme();
     const [isSideMenuVisible, setIsSideMenuVisible] = useState(true);
-
     const navigationHeight = multiplyByBaseUnit(3);
 
     return (
@@ -37,6 +39,7 @@ export const WfoPageTemplate: FC<WfoPageTemplateProps> = ({
                     setIsSideMenuVisible((prevState) => !prevState)
                 }
                 handleLogoutClick={signOut}
+                onThemeSwitch={onThemeSwitch}
             />
 
             {/* Sidebar and content area */}

package/src/components/WfoSubscription/WfoSubscription.tsx

@@ -2,11 +2,18 @@ import React from 'react';
 
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
-import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import {
+    EuiBadgeGroup,
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiText,
+} from '@elastic/eui';
 
 import { GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY } from '@/graphqlQueries';
-import { useQueryWithGraphql } from '@/hooks';
+import { useOrchestratorTheme, useQueryWithGraphql } from '@/hooks';
 
+import { WfoSubscriptionStatusBadge } from '../WfoBadges';
+import { WfoSubscriptionSyncStatusBadge } from '../WfoBadges/WfoSubscriptionSyncStatusBadge';
 import { WfoError } from '../WfoError';
 import { WfoFilterTabs } from '../WfoFilterTabs';
 import { WfoLoading } from '../WfoLoading';
@@ -31,6 +38,8 @@ export const WfoSubscription = ({ subscriptionId }: WfoSubscriptionProps) => {
         ),
     );
 
+    const { multiplyByBaseUnit } = useOrchestratorTheme();
+
     const selectedTab = ((): SubscriptionDetailTab => {
         return (
             subscriptionDetailTabs.find(({ id }) => id === activeTab)?.id ||
@@ -68,6 +77,20 @@ export const WfoSubscription = ({ subscriptionId }: WfoSubscriptionProps) => {
                                 <EuiText>
                                     <h2>{subscriptionDetail.description}</h2>
                                 </EuiText>
+                                <EuiBadgeGroup
+                                    css={{ marginRight: multiplyByBaseUnit(1) }}
+                                >
+                                    <EuiFlexItem grow={false}>
+                                        <WfoSubscriptionStatusBadge
+                                            status={subscriptionDetail.status}
+                                        />
+                                    </EuiFlexItem>
+                                    <EuiFlexItem grow={false}>
+                                        <WfoSubscriptionSyncStatusBadge
+                                            insync={subscriptionDetail.insync}
+                                        />
+                                    </EuiFlexItem>
+                                </EuiBadgeGroup>
                             </EuiFlexItem>
                             <EuiFlexItem grow={false}>
                                 <WfoSubscriptionActions

package/src/contexts/OrchestratorConfigContext.tsx

@@ -9,6 +9,7 @@ export const OrchestratorConfigContext = createContext<OrchestratorConfig>({
     engineStatusEndpoint: '',
     graphqlEndpointCore: '',
     orchestratorApiBaseUrl: '',
+    orchestratorWebsocketUrl: '',
     processStatusCountsEndpoint: '',
     processesEndpoint: '',
     subscriptionActionsEndpoint: '',

package/src/hooks/useOrchestratorTheme.ts

@@ -1,7 +1,8 @@
 import { tint, useEuiTheme } from '@elastic/eui';
 
 export const useOrchestratorTheme = () => {
-    const { euiTheme } = useEuiTheme();
+    const { euiTheme, colorMode } = useEuiTheme();
+
     const baseUnit = euiTheme.base;
 
     const multiplyByBaseUnit = (multiplier: number) => baseUnit * multiplier;
@@ -12,5 +13,6 @@ export const useOrchestratorTheme = () => {
         theme: euiTheme,
         multiplyByBaseUnit,
         toSecondaryColor,
+        colorMode,
     };
 };

package/src/hooks/useShowToastMessage.ts

@@ -1,40 +1,18 @@
 import { useAppDispatch } from '@/rtk/hooks';
 import { addToastMessage } from '@/rtk/slices/toastMessages';
-import { Toast, ToastTypes } from '@/types';
+import { ToastTypes } from '@/types';
+import { getToastMessage } from '@/utils/getToastMessage';
 
 export const useShowToastMessage = () => {
     const dispatch = useAppDispatch();
 
-    const getTypeProps = (type: ToastTypes): Partial<Toast> => {
-        switch (type) {
-            case ToastTypes.ERROR:
-                return {
-                    color: 'danger',
-                    iconType: 'warning',
-                };
-            case ToastTypes.SUCCESS:
-                return {
-                    color: 'success',
-                    iconType: 'check',
-                };
-        }
-    };
-
     const showToastMessage = (
         type: ToastTypes,
         text: string, // We use string here instead of Toast['text'] because we want to prevent passing in react component because they trigger an "unsynchronizable values in payload detected" error',
         title: string, // same as above for string instead of Toast['title'],
     ) => {
-        const id = Math.floor(Math.random() * 10000000).toString();
-        const typeProps = getTypeProps(type);
-
-        const toast: Toast = {
-            id,
-            text,
-            title,
-            ...typeProps,
-        };
-        dispatch(addToastMessage(toast));
+        const toastMessage = getToastMessage(type, text, title);
+        dispatch(addToastMessage(toastMessage));
     };
 
     return {

package/src/icons/WfoSideMenu.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta } from '@storybook/react';
 
-import { WfoSideMenu } from './WfoSidemenu';
+import { WfoSideMenu } from './WfoSideMenu';
 
 const Story: Meta<typeof WfoSideMenu> = {
     component: WfoSideMenu,

package/src/messages/en-GB.json

@@ -12,7 +12,11 @@
         "tasks": "Tasks",
         "title": "Workflow Orchestrator",
         "welcome": "Welcome",
-        "workflows": "Workflows"
+        "workflows": "Workflows",
+        "darkMode": "Dark mode",
+        "lightMode": "Light mode",
+        "websocketConnected": "The websocket is connected",
+        "websocketDisconnected": "The websocket is disconnected, try refreshing the page"
     },
     "common": {
         "product": "Product",
@@ -26,7 +30,9 @@
         "noItemsFound": "No items found",
         "search": "Search",
         "errorMessage": "An error occurred",
-        "export": "Export"
+        "export": "Export",
+        "insyncTrue": "in-sync",
+        "insyncFalse": "out-of-sync"
     },
     "confirmationDialog": {
         "title": "Please confirm",

package/src/messages/nl-NL.json

@@ -12,7 +12,11 @@
         "tasks": "Taken",
         "title": "Workflow Orchestrator",
         "welcome": "Welkom",
-        "workflows": "Workflows"
+        "workflows": "Workflows",
+        "darkMode": "Dark mode",
+        "lightMode": "Light mode",
+        "websocketConnected": "De websocket is actief",
+        "websocketDisconnected": "De websocket verbinding is verbroken, probeer de pagina te verversen."
     },
     "common": {
         "product": "Produkt",
@@ -26,7 +30,9 @@
         "noItemsFound": "Geen items gevonden",
         "search": "Zoeken",
         "errorMessage": "Er is een fout opgetreden",
-        "export": "Exporteren"
+        "export": "Exporteren",
+        "insyncTrue": "in-sync",
+        "insyncFalse": "out-of-sync"
     },
     "confirmationDialog": {
         "title": "Graag bevestigen",

package/src/rtk/api.ts

@@ -13,6 +13,12 @@ export enum BaseQueryTypes {
     custom = 'custom',
 }
 
+export enum CacheTags {
+    engineStatus = 'engineStatus',
+    // This is a placeholder for now. Having only one messes up the type of the tag in the onCacheEntryAdded function.
+    testStatus = 'testStatus',
+}
+
 type ExtraOptions = {
     baseQueryType?: BaseQueryTypes;
 };
@@ -50,5 +56,5 @@ export const orchestratorApi = createApi({
         }
     },
     endpoints: () => ({}),
-    tagTypes: ['engineStatus'],
+    tagTypes: [CacheTags.engineStatus, CacheTags.testStatus],
 });

package/src/rtk/endpoints/index.ts

@@ -1,3 +1,4 @@
 export * from './customers';
 export * from './processList';
 export * from './settings';
+export * from './streamMessages';

package/src/rtk/endpoints/settings.ts

@@ -1,6 +1,6 @@
 import { EngineStatus } from '@/types';
 
-import { BaseQueryTypes, orchestratorApi } from '../api';
+import { BaseQueryTypes, CacheTags, orchestratorApi } from '../api';
 
 interface EngineStatusReturnValue {
     engineStatus: EngineStatus;
@@ -35,7 +35,7 @@ const statusApi = orchestratorApi.injectEndpoints({
                     runningProcesses: data?.running_processes || 0,
                 };
             },
-            providesTags: ['engineStatus'],
+            providesTags: [CacheTags.engineStatus],
         }),
         clearCache: build.mutation<void, string>({
             query: (settingName) => ({
@@ -60,7 +60,7 @@ const statusApi = orchestratorApi.injectEndpoints({
             extraOptions: {
                 baseQueryType: BaseQueryTypes.fetch,
             },
-            invalidatesTags: ['engineStatus'],
+            invalidatesTags: [CacheTags.engineStatus],
         }),
     }),
 });