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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "0.9.1",
+    "version": "0.11.0",
     "license": "MIT",
     "scripts": {
         "test": "jest",
@@ -21,7 +21,7 @@
         "invariant": "^2.2.4",
         "moment": "^2.29.4",
         "moment-timezone": "^0.5.43",
-        "next-auth": "^4.23.1",
+        "next-auth": "^4.24.5",
         "next-intl": "^3.4.1",
         "next-query-params": "^5.0.0",
         "object-hash": "^3.0.0",

package/src/components/WfoAuth/WfoAuth.tsx

@@ -1,22 +1,50 @@
-import React, { JSX, useContext } from 'react';
-
-import { useSession } from 'next-auth/react';
+import React, { ReactNode, useContext } from 'react';
 
 import { WfoLoading } from '@/components';
 import { OrchestratorConfigContext } from '@/contexts';
+import { PolicyContextProvider } from '@/contexts/PolicyContext';
+import { useWfoSession } from '@/hooks';
 
 interface AuthProps {
-    children: JSX.Element;
+    children: ReactNode;
+    isAllowedHandler?: (routerPath: string, resource?: string) => boolean;
 }
 
-export const WfoAuth = ({ children }: AuthProps): JSX.Element => {
+/**
+ * The WfoAuth component exposes a function isAllowedHandler to apply policy checks.
+ * In components in this library a usePolicy hook is available that exposes a function isAllowed
+ * with 1 optional parameter "resource".
+ *
+ * For convenience there is also a WfoIsAllowedToRender component available. In both hook
+ * and component the current route is determined in the usePolicy hook and passed as
+ * first parameter in the isAllowedHandler function in this WfoAuth component.
+ *
+ * Example for usage in any component:
+ * const { isAllowed } = usePolicy();
+ * const isAllowedToDoOrSeeSomething: boolean = isAllowed('something')
+ *
+ * Example for implementing the isAllowed function:
+ * const isAllowed = (routerPath: string, resource?: string) => {
+ *     // Your own rules to determine if something is allowed or not
+ *     // The useWfoSession hook can be used to get the current user profile
+ * }
+ */
+export const WfoAuth = ({
+    children,
+    isAllowedHandler = () => true,
+}: AuthProps) => {
     const { authActive } = useContext(OrchestratorConfigContext);
-    const { status } = useSession({
+    const { status } = useWfoSession({
         required: authActive,
     });
 
     if (status === 'loading') {
         return <WfoLoading />;
     }
-    return children;
+
+    return (
+        <PolicyContextProvider isAllowedHandler={isAllowedHandler}>
+            {children}
+        </PolicyContextProvider>
+    );
 };

package/src/components/WfoAuth/WfoIsAllowedToRender.tsx

@@ -0,0 +1,17 @@
+import React, { FC, ReactNode } from 'react';
+
+import { usePolicy } from '@/hooks';
+
+export type WfoIsAllowedToRenderProps = {
+    resource?: string;
+    children: ReactNode;
+};
+
+export const WfoIsAllowedToRender: FC<WfoIsAllowedToRenderProps> = ({
+    resource,
+    children,
+}) => {
+    const { isAllowed } = usePolicy();
+
+    return isAllowed(resource) ? <>{children}</> : null;
+};

package/src/components/WfoAuth/index.ts

@@ -1 +1,2 @@
 export * from './WfoAuth';
+export * from './WfoIsAllowedToRender';

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/ApiClientContext.tsx

@@ -2,7 +2,7 @@ import React, { createContext, useContext } from 'react';
 import type { ReactNode } from 'react';
 
 import { ApiClient, getApiClient } from '@/api';
-import { useSessionWithToken } from '@/hooks';
+import { useWfoSession } from '@/hooks';
 
 import { OrchestratorConfigContext } from './OrchestratorConfigContext';
 
@@ -22,7 +22,7 @@ export const ApiClientContextProvider = ({
     children,
 }: ApiClientContextProviderProps) => {
     const { orchestratorApiBaseUrl } = useContext(OrchestratorConfigContext);
-    const { session } = useSessionWithToken();
+    const { session } = useWfoSession();
     const accessToken = session?.accessToken;
     const apiClient = getApiClient(orchestratorApiBaseUrl, accessToken);
 

package/src/contexts/OrchestratorConfigContext.tsx

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

package/src/contexts/PolicyContext.tsx

@@ -0,0 +1,23 @@
+import React, { FC, ReactNode, createContext } from 'react';
+
+export type Policy = {
+    isAllowedHandler: (routerPath: string, resource?: string) => boolean;
+};
+
+export const PolicyContext = createContext<Policy>({
+    isAllowedHandler: () => true,
+});
+
+export type PolicyProviderProps = {
+    isAllowedHandler: (routerPath: string, resource?: string) => boolean;
+    children: ReactNode;
+};
+
+export const PolicyContextProvider: FC<PolicyProviderProps> = ({
+    isAllowedHandler,
+    children,
+}) => (
+    <PolicyContext.Provider value={{ isAllowedHandler }}>
+        {children}
+    </PolicyContext.Provider>
+);

package/src/contexts/index.ts

@@ -1,4 +1,5 @@
+export * from './ApiClientContext';
 export * from './ConfirmationDialogProvider';
 export * from './OrchestratorConfigContext';
+export * from './PolicyContext';
 export * from './TreeContext';
-export * from './ApiClientContext';

package/src/hooks/DataFetchHooks.ts

@@ -5,7 +5,7 @@ import { OrchestratorConfigContext } from '@/contexts';
 import { GraphqlFilter, ProcessDetailResultRaw } from '@/types';
 
 import { useQueryWithFetch } from './useQueryWithFetch';
-import { useSessionWithToken } from './useSessionWithToken';
+import { useWfoSession } from './useWfoSession';
 
 export type CacheNames = { [key: string]: string };
 
@@ -48,7 +48,7 @@ export const useFilterQueryWithRest = <Type>(
     filters?: GraphqlFilter<Type>[],
     refetchInterval?: number,
 ) => {
-    const { session } = useSessionWithToken();
+    const { session } = useWfoSession();
 
     const fetchFromApi = async () => {
         const response = await fetch(url, {

package/src/hooks/index.ts

@@ -3,6 +3,7 @@ export * from './useQueryWithGraphql';
 export * from './useMutateProcess';
 export * from './useOrchestratorConfig';
 export * from './useOrchestratorTheme';
+export * from './usePolicy';
 export * from './useProcessStatusCountsQuery';
 export * from './DataFetchHooks';
 export * from './useSubscriptionActions';
@@ -10,5 +11,5 @@ export * from './useDataDisplayParams';
 export * from './useShowToastMessage';
 export * from './useStoredTableConfig';
 export * from './useWithOrchestratorTheme';
-export * from './useSessionWithToken';
+export * from './useWfoSession';
 export * from './useQueryWithFetch';

package/src/hooks/useMutateProcess.ts

@@ -4,11 +4,11 @@ import { useMutation, useQueryClient } from 'react-query';
 import { signOut } from 'next-auth/react';
 
 import { OrchestratorConfigContext } from '@/contexts';
-import { useSessionWithToken } from '@/hooks/index';
+import { useWfoSession } from '@/hooks/index';
 
 export const useMutateProcess = () => {
     const { processesEndpoint } = useContext(OrchestratorConfigContext);
-    const { session } = useSessionWithToken();
+    const { session } = useWfoSession();
     const queryClient = useQueryClient();
 
     const genericRequestHeaders = {

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/usePolicy.ts

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+
+import { useRouter } from 'next/router';
+
+import { PolicyContext } from '@/contexts';
+
+export const usePolicy = () => {
+    const { isAllowedHandler } = useContext(PolicyContext);
+    const router = useRouter();
+
+    return {
+        isAllowed: (resource?: string) =>
+            isAllowedHandler(router.asPath, resource),
+    };
+};

package/src/hooks/useQueryWithFetch.ts

@@ -3,14 +3,14 @@ import { useQuery } from 'react-query';
 import { Variables } from 'graphql-request/build/cjs/types';
 import { signOut } from 'next-auth/react';
 
-import { useSessionWithToken } from './useSessionWithToken';
+import { useWfoSession } from './useWfoSession';
 
 export const useQueryWithFetch = <T, V extends Variables>(
     url: string,
     queryVars: V,
     queryKey: string,
 ) => {
-    const { session } = useSessionWithToken();
+    const { session } = useWfoSession();
     const requestHeaders = {
         authorization: session ? `Bearer ${session.accessToken}` : '',
     };

package/src/hooks/useQueryWithGraphql.ts

@@ -8,7 +8,7 @@ import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 
 import { OrchestratorConfigContext } from '@/contexts';
 
-import { useSessionWithToken } from './useSessionWithToken';
+import { useWfoSession } from './useWfoSession';
 
 export const useQueryWithGraphql = <U, V extends Variables>(
     query: TypedDocumentNode<U, V>,
@@ -17,7 +17,7 @@ export const useQueryWithGraphql = <U, V extends Variables>(
     options: UseQueryOptions<U> = {},
 ) => {
     const { graphqlEndpointCore } = useContext(OrchestratorConfigContext);
-    const { session } = useSessionWithToken();
+    const { session } = useWfoSession();
 
     const graphQLClient = new GraphQLClient(graphqlEndpointCore);