@orchestrator-ui/orchestrator-ui-components 7.4.1 → 7.5.1

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

@@ -5,23 +5,23 @@ 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',
+  component: (args) => (
+    <div style={{ display: 'flex' }}>
+      <WfoSubscriptionSyncStatusBadge {...args} />
+    </div>
+  ),
+  title: 'Badges/WfoSubscriptionSyncStatusBadge',
 };
 export default Story;
 
 export const Primary = {
-    args: {
-        insync: true,
-    },
+  args: {
+    insync: true,
+  },
 };
 
 export const Secondary = {
-    args: {
-        insync: false,
-    },
+  args: {
+    insync: false,
+  },
 };

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

@@ -7,40 +7,37 @@ import { useOrchestratorTheme } from '@/hooks';
 import { WfoBadge } from '../WfoBadge';
 
 export type WfoSubscriptionSyncStatusBadgeProps = {
-    insync: boolean;
+  insync: boolean;
 };
 
-export const WfoSubscriptionSyncStatusBadge: FC<
-    WfoSubscriptionSyncStatusBadgeProps
-> = ({ insync }) => {
-    const { theme, toSecondaryColor } = useOrchestratorTheme();
-
-    const t = useTranslations('common');
-
-    const getBadgePropertiesFromStatus = (insync: boolean) => {
-        const { danger, textDanger, success, textSuccess } = theme.colors;
-
-        if (insync) {
-            return {
-                badgeColor: toSecondaryColor(success),
-                textColor: textSuccess,
-                insyncText: t('insyncTrue'),
-            };
-        } else {
-            return {
-                badgeColor: toSecondaryColor(danger),
-                textColor: textDanger,
-                insyncText: t('insyncFalse'),
-            };
-        }
-    };
-
-    const { badgeColor, textColor, insyncText } =
-        getBadgePropertiesFromStatus(insync);
-
-    return (
-        <WfoBadge textColor={textColor} color={badgeColor}>
-            {insyncText}
-        </WfoBadge>
-    );
+export const WfoSubscriptionSyncStatusBadge: FC<WfoSubscriptionSyncStatusBadgeProps> = ({ insync }) => {
+  const { theme, toSecondaryColor } = useOrchestratorTheme();
+
+  const t = useTranslations('common');
+
+  const getBadgePropertiesFromStatus = (insync: boolean) => {
+    const { danger, textDanger, success, textSuccess } = theme.colors;
+
+    if (insync) {
+      return {
+        badgeColor: toSecondaryColor(success),
+        textColor: textSuccess,
+        insyncText: t('insyncTrue'),
+      };
+    } else {
+      return {
+        badgeColor: toSecondaryColor(danger),
+        textColor: textDanger,
+        insyncText: t('insyncFalse'),
+      };
+    }
+  };
+
+  const { badgeColor, textColor, insyncText } = getBadgePropertiesFromStatus(insync);
+
+  return (
+    <WfoBadge textColor={textColor} color={badgeColor}>
+      {insyncText}
+    </WfoBadge>
+  );
 };

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

@@ -5,15 +5,15 @@ import type { Meta } from '@storybook/react';
 import { WfoVersionIncompatibleBadge } from './WfoVersionIncompatibleBadge';
 
 const Story: Meta<typeof WfoVersionIncompatibleBadge> = {
-    component: (args) => (
-        <div style={{ display: 'flex' }}>
-            <WfoVersionIncompatibleBadge {...args} />
-        </div>
-    ),
-    title: 'Badges/WfoVersionIncompatibleBadge',
+  component: (args) => (
+    <div style={{ display: 'flex' }}>
+      <WfoVersionIncompatibleBadge {...args} />
+    </div>
+  ),
+  title: 'Badges/WfoVersionIncompatibleBadge',
 };
 export default Story;
 
 export const Primary = {
-    args: {},
+  args: {},
 };

package/src/components/WfoBadges/WfoVersionIncompatibleBadge/WfoVersionIncompatibleBadge.tsx

@@ -12,54 +12,51 @@ import { getOrchestratorCoreVersionIfNotCompatible } from '@/utils/compareVersio
 import versionCompatibility from '../../../../../../version-compatibility.json';
 
 interface WfoVersionIncompatibleBadgeProps {
-    orchestratorUiVersion: string;
-    orchestratorCoreVersion: string;
+  orchestratorUiVersion: string;
+  orchestratorCoreVersion: string;
 }
 
-export const WfoVersionIncompatibleBadge: FC<
-    WfoVersionIncompatibleBadgeProps
-> = ({ orchestratorUiVersion, orchestratorCoreVersion }) => {
-    const t = useTranslations('main');
-    const { theme } = useOrchestratorTheme();
-    const mappedVersions: MappedVersion[] = versionCompatibility;
-    const minimumOrchestratorCoreVersion =
-        getOrchestratorCoreVersionIfNotCompatible(
-            orchestratorUiVersion,
-            orchestratorCoreVersion,
-            mappedVersions,
-        );
+export const WfoVersionIncompatibleBadge: FC<WfoVersionIncompatibleBadgeProps> = ({
+  orchestratorUiVersion,
+  orchestratorCoreVersion,
+}) => {
+  const t = useTranslations('main');
+  const { theme } = useOrchestratorTheme();
+  const mappedVersions: MappedVersion[] = versionCompatibility;
+  const minimumOrchestratorCoreVersion = getOrchestratorCoreVersionIfNotCompatible(
+    orchestratorUiVersion,
+    orchestratorCoreVersion,
+    mappedVersions,
+  );
 
-    return (
-        <EuiToolTip
-            content={
-                <>
-                    <p>{t('incompatibleVersionText')}</p>
-                    <EuiSpacer size="s" />
-                    <p>
-                        WFO UI: <b>{orchestratorUiVersion}</b>
-                    </p>
-                    <p>
-                        orchestrator-core: <b>{orchestratorCoreVersion}</b>
-                    </p>
-                    <p>
-                        {t('minimumOrchestratorCoreVersion')}:{' '}
-                        <b>{minimumOrchestratorCoreVersion}</b>
-                    </p>
-                </>
-            }
-        >
-            <WfoHeaderBadge
-                color="danger"
-                textColor={theme.colors.ghost}
-                css={{
-                    marginLeft: theme.size.s,
-                    visibility: minimumOrchestratorCoreVersion
-                        ? 'visible'
-                        : 'hidden',
-                }}
-            >
-                {t('incompatibleVersion')}
-            </WfoHeaderBadge>
-        </EuiToolTip>
-    );
+  return (
+    <EuiToolTip
+      content={
+        <>
+          <p>{t('incompatibleVersionText')}</p>
+          <EuiSpacer size="s" />
+          <p>
+            WFO UI: <b>{orchestratorUiVersion}</b>
+          </p>
+          <p>
+            orchestrator-core: <b>{orchestratorCoreVersion}</b>
+          </p>
+          <p>
+            {t('minimumOrchestratorCoreVersion')}: <b>{minimumOrchestratorCoreVersion}</b>
+          </p>
+        </>
+      }
+    >
+      <WfoHeaderBadge
+        color="danger"
+        textColor={theme.colors.textGhost}
+        css={{
+          marginLeft: theme.size.s,
+          visibility: minimumOrchestratorCoreVersion ? 'visible' : 'hidden',
+        }}
+      >
+        {t('incompatibleVersion')}
+      </WfoHeaderBadge>
+    </EuiToolTip>
+  );
 };

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

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

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

@@ -15,85 +15,62 @@ import { useStreamMessagesQuery } from '@/rtk/endpoints/streamMessages';
 import { getStyles } from './styles';
 
 interface WfoWebsocketStatusBadgeProps {
-    hideWhenConnected?: boolean;
+  hideWhenConnected?: boolean;
 }
 
-export const WfoWebsocketStatusBadge: FC<WfoWebsocketStatusBadgeProps> = ({
-    hideWhenConnected = false,
-}) => {
-    const dispatch = useDispatch();
-    const { connectedStyle, disconnectedStyle } =
-        useWithOrchestratorTheme(getStyles);
+export const WfoWebsocketStatusBadge: FC<WfoWebsocketStatusBadgeProps> = ({ hideWhenConnected = false }) => {
+  const dispatch = useDispatch();
+  const { connectedStyle, disconnectedStyle } = useWithOrchestratorTheme(getStyles);
 
-    const t = useTranslations('main');
-    const { theme } = useOrchestratorTheme();
-    const { data: websocketConnected } = useStreamMessagesQuery();
+  const t = useTranslations('main');
+  const { theme } = useOrchestratorTheme();
+  const { data: websocketConnected } = useStreamMessagesQuery();
 
-    const showBadge = !(websocketConnected && hideWhenConnected);
+  const showBadge = !(websocketConnected && hideWhenConnected);
 
-    const reconnect = useCallback(() => {
-        dispatch(orchestratorApi.util.resetApiState());
-    }, [dispatch]);
+  const reconnect = useCallback(() => {
+    dispatch(orchestratorApi.util.resetApiState());
+  }, [dispatch]);
 
-    useEffect(() => {
-        // This handles the case where a tab or page is suspended and reactivated
-        // We force the store to reset and the websocket to reconnect if it's disconnected
-        const handleVisibilityChange = () => {
-            if (document.visibilityState === 'visible' && !websocketConnected) {
-                reconnect();
-            }
-        };
+  useEffect(() => {
+    // This handles the case where a tab or page is suspended and reactivated
+    // We force the store to reset and the websocket to reconnect if it's disconnected
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible' && !websocketConnected) {
+        reconnect();
+      }
+    };
 
-        if (typeof document !== 'undefined' && document.addEventListener) {
-            document.addEventListener(
-                'visibilitychange',
-                handleVisibilityChange,
-            );
-        }
+    if (typeof document !== 'undefined' && document.addEventListener) {
+      document.addEventListener('visibilitychange', handleVisibilityChange);
+    }
 
-        return () => {
-            if (
-                typeof document !== 'undefined' &&
-                document.removeEventListener
-            ) {
-                document.removeEventListener(
-                    'visibilitychange',
-                    handleVisibilityChange,
-                );
-            }
-        };
-    }, [reconnect, websocketConnected]);
+    return () => {
+      if (typeof document !== 'undefined' && document.removeEventListener) {
+        document.removeEventListener('visibilitychange', handleVisibilityChange);
+      }
+    };
+  }, [reconnect, websocketConnected]);
 
-    return showBadge ? (
-        <EuiToolTip
-            position="bottom"
-            content={
-                websocketConnected
-                    ? t('websocketConnected')
-                    : t('websocketDisconnected')
+  return showBadge ?
+      <EuiToolTip position="bottom" content={websocketConnected ? t('websocketConnected') : t('websocketDisconnected')}>
+        <WfoHeaderBadge
+          textColor={theme.colors.shadow}
+          iconType={() =>
+            websocketConnected ?
+              <WfoBoltFill color={theme.colors.success} />
+            : <WfoBoltSlashFill color={theme.colors.warning} />
+          }
+          css={websocketConnected ? connectedStyle : disconnectedStyle}
+          onClick={() => {
+            if (!websocketConnected) {
+              reconnect();
             }
-        >
-            <WfoHeaderBadge
-                textColor={theme.colors.shadow}
-                iconType={() =>
-                    websocketConnected ? (
-                        <WfoBoltFill color={theme.colors.success} />
-                    ) : (
-                        <WfoBoltSlashFill color={theme.colors.warning} />
-                    )
-                }
-                css={websocketConnected ? connectedStyle : disconnectedStyle}
-                onClick={() => {
-                    if (!websocketConnected) {
-                        reconnect();
-                    }
-                }}
-                onClickAriaLabel={'undefined'}
-                iconOnClick={undefined}
-                iconOnClickAriaLabel={undefined}
-            />
-        </EuiToolTip>
-    ) : (
-        <></>
-    );
+          }}
+          onClickAriaLabel={'undefined'}
+          iconOnClick={undefined}
+          iconOnClickAriaLabel={undefined}
+        />
+      </EuiToolTip>
+    : <></>;
 };

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

@@ -3,22 +3,20 @@ import { css } from '@emotion/react';
 import { WfoThemeHelpers } from '@/hooks';
 
 export const getStyles = ({ theme, isDarkModeActive }: WfoThemeHelpers) => {
-    const connectedStyle = css({
-        paddingLeft: theme.base / 2,
-        cursor: 'default',
-        backgroundColor: isDarkModeActive
-            ? theme.colors.backgroundBaseNeutral
-            : theme.colors.ghost,
-    });
+  const connectedStyle = css({
+    paddingLeft: theme.base / 2,
+    cursor: 'default',
+    backgroundColor: isDarkModeActive ? theme.colors.backgroundBaseNeutral : theme.colors.textGhost,
+  });
 
-    const disconnectedStyle = css({
-        paddingLeft: theme.base / 2,
-        cursor: 'pointer',
-        backgroundColor: theme.colors.danger,
-    });
+  const disconnectedStyle = css({
+    paddingLeft: theme.base / 2,
+    cursor: 'pointer',
+    backgroundColor: theme.colors.danger,
+  });
 
-    return {
-        connectedStyle,
-        disconnectedStyle,
-    };
+  return {
+    connectedStyle,
+    disconnectedStyle,
+  };
 };

package/src/components/WfoBadges/WfoWorkflowTargetBadge/WfoWorkflowTargetBadge.tsx

@@ -6,69 +6,57 @@ import { WorkflowTarget } from '@/types';
 import { WfoBadge } from '../WfoBadge';
 
 export type WfoWorkflowTargetBadgeProps = {
-    target: WorkflowTarget;
+  target: WorkflowTarget;
 };
 
-export const WfoWorkflowTargetBadge: FC<WfoWorkflowTargetBadgeProps> = ({
-    target,
-}) => {
-    const { theme, toSecondaryColor } = useOrchestratorTheme();
-    if (!target) return null;
-
-    const getBadgeColorFromTarget = (_target: string) => {
-        const {
-            primary,
-            danger,
-            textDanger,
-            textPrimary,
-            success,
-            textSuccess,
-            warning,
-            textWarning,
-            accent,
-            textAccent,
-        } = theme.colors;
-
-        switch (_target?.toLowerCase()) {
-            case WorkflowTarget.CREATE:
-                return {
-                    badgeColor: toSecondaryColor(success),
-                    textColor: textSuccess,
-                };
-            case WorkflowTarget.MODIFY:
-                return {
-                    badgeColor: toSecondaryColor(primary),
-                    textColor: textPrimary,
-                };
-            case WorkflowTarget.SYSTEM:
-            case WorkflowTarget.VALIDATE:
-                return {
-                    badgeColor: toSecondaryColor(warning),
-                    textColor: textWarning,
-                };
-            case WorkflowTarget.TERMINATE:
-                return {
-                    badgeColor: toSecondaryColor(danger),
-                    textColor: textDanger,
-                };
-            case WorkflowTarget.RECONCILE:
-                return {
-                    badgeColor: toSecondaryColor(accent),
-                    textColor: textAccent,
-                };
-            default:
-                return {
-                    badgeColor: toSecondaryColor(primary),
-                    textColor: textPrimary,
-                };
-        }
-    };
-
-    const { badgeColor, textColor } = getBadgeColorFromTarget(target);
-
-    return (
-        <WfoBadge textColor={textColor} color={badgeColor}>
-            {target?.toLowerCase()}
-        </WfoBadge>
-    );
+export const WfoWorkflowTargetBadge: FC<WfoWorkflowTargetBadgeProps> = ({ target }) => {
+  const { theme, toSecondaryColor } = useOrchestratorTheme();
+  if (!target) return null;
+
+  const getBadgeColorFromTarget = (_target: string) => {
+    const { primary, danger, textDanger, textPrimary, success, textSuccess, warning, textWarning, accent, textAccent } =
+      theme.colors;
+
+    switch (_target?.toLowerCase()) {
+      case WorkflowTarget.CREATE:
+        return {
+          badgeColor: toSecondaryColor(success),
+          textColor: textSuccess,
+        };
+      case WorkflowTarget.MODIFY:
+        return {
+          badgeColor: toSecondaryColor(primary),
+          textColor: textPrimary,
+        };
+      case WorkflowTarget.SYSTEM:
+      case WorkflowTarget.VALIDATE:
+        return {
+          badgeColor: toSecondaryColor(warning),
+          textColor: textWarning,
+        };
+      case WorkflowTarget.TERMINATE:
+        return {
+          badgeColor: toSecondaryColor(danger),
+          textColor: textDanger,
+        };
+      case WorkflowTarget.RECONCILE:
+        return {
+          badgeColor: toSecondaryColor(accent),
+          textColor: textAccent,
+        };
+      default:
+        return {
+          badgeColor: toSecondaryColor(primary),
+          textColor: textPrimary,
+        };
+    }
+  };
+
+  const { badgeColor, textColor } = getBadgeColorFromTarget(target);
+
+  return (
+    <WfoBadge textColor={textColor} color={badgeColor}>
+      {target?.toLowerCase()}
+    </WfoBadge>
+  );
 };