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

package/src/components/WfoBackendUnavailable/WfoBackendUnavailable.tsx

@@ -2,108 +2,85 @@ import React, { FC } from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import {
-    EuiButton,
-    EuiCallOut,
-    EuiCode,
-    EuiSpacer,
-    EuiText,
-} from '@elastic/eui';
+import { EuiButton, EuiCallOut, EuiCode, EuiSpacer, EuiText } from '@elastic/eui';
 
 interface WfoBackendUnavailableProps {
-    featureType: 'search' | 'agent';
-    onRetry?: () => void;
+  featureType: 'search' | 'agent';
+  onRetry?: () => void;
 }
 
-export const WfoBackendUnavailable: FC<WfoBackendUnavailableProps> = ({
-    featureType,
-    onRetry,
-}) => {
-    const t = useTranslations(`${featureType}.availability.unavailable`);
+export const WfoBackendUnavailable: FC<WfoBackendUnavailableProps> = ({ featureType, onRetry }) => {
+  const t = useTranslations(`${featureType}.availability.unavailable`);
 
-    const getInstructionSteps = () => {
-        if (featureType === 'search') {
-            return [
-                'setEnvironmentVariable',
-                'checkVersion',
-                'restartService',
-                'checkDockerConfig',
-            ];
-        } else {
-            return [
-                'setAgentEnvironment',
-                'setSearchEnvironment',
-                'checkVersion',
-                'configureOpenAI',
-                'restartService',
-                'checkDockerConfig',
-            ];
-        }
-    };
+  const getInstructionSteps = () => {
+    if (featureType === 'search') {
+      return ['setEnvironmentVariable', 'checkVersion', 'restartService', 'checkDockerConfig'];
+    } else {
+      return [
+        'setAgentEnvironment',
+        'setSearchEnvironment',
+        'checkVersion',
+        'configureOpenAI',
+        'restartService',
+        'checkDockerConfig',
+      ];
+    }
+  };
 
-    const renderInstruction = (step: string) => {
-        if (step === 'setEnvironmentVariable') {
-            return (
-                <>
-                    {t('instructions.setEnvironmentVariable.before')}
-                    <EuiCode>SEARCH_ENABLED=True</EuiCode>
-                    {t('instructions.setEnvironmentVariable.after')}
-                </>
-            );
-        } else if (step === 'setAgentEnvironment') {
-            return (
-                <>
-                    {t('instructions.setAgentEnvironment.before')}
-                    <EuiCode>AGENT_ENABLED=True</EuiCode>
-                    {t('instructions.setAgentEnvironment.after')}
-                </>
-            );
-        } else if (step === 'setSearchEnvironment') {
-            return (
-                <>
-                    {t('instructions.setSearchEnvironment.before')}
-                    <EuiCode>SEARCH_ENABLED=True</EuiCode>
-                    {t('instructions.setSearchEnvironment.after')}
-                </>
-            );
-        } else {
-            return t(`instructions.${step}`);
-        }
-    };
+  const renderInstruction = (step: string) => {
+    if (step === 'setEnvironmentVariable') {
+      return (
+        <>
+          {t('instructions.setEnvironmentVariable.before')}
+          <EuiCode>SEARCH_ENABLED=True</EuiCode>
+          {t('instructions.setEnvironmentVariable.after')}
+        </>
+      );
+    } else if (step === 'setAgentEnvironment') {
+      return (
+        <>
+          {t('instructions.setAgentEnvironment.before')}
+          <EuiCode>AGENT_ENABLED=True</EuiCode>
+          {t('instructions.setAgentEnvironment.after')}
+        </>
+      );
+    } else if (step === 'setSearchEnvironment') {
+      return (
+        <>
+          {t('instructions.setSearchEnvironment.before')}
+          <EuiCode>SEARCH_ENABLED=True</EuiCode>
+          {t('instructions.setSearchEnvironment.after')}
+        </>
+      );
+    } else {
+      return t(`instructions.${step}`);
+    }
+  };
 
-    return (
-        <EuiCallOut
-            title={t('title')}
-            color="warning"
-            iconType="alert"
-            data-testid={`backend-unavailable-${featureType}`}
-        >
-            <EuiText size="s">
-                <ul>
-                    {getInstructionSteps().map((step, index) => (
-                        <li key={index}>{renderInstruction(step)}</li>
-                    ))}
-                </ul>
-            </EuiText>
+  return (
+    <EuiCallOut title={t('title')} color="warning" iconType="alert" data-testid={`backend-unavailable-${featureType}`}>
+      <EuiText size="s">
+        <ul>
+          {getInstructionSteps().map((step, index) => (
+            <li key={index}>{renderInstruction(step)}</li>
+          ))}
+        </ul>
+      </EuiText>
 
-            <EuiSpacer size="s" />
+      <EuiSpacer size="s" />
 
-            <EuiText size="s" color="subdued">
-                {t('documentation')}
-            </EuiText>
+      <EuiText size="s" color="subdued">
+        {t('documentation')}
+      </EuiText>
 
-            {onRetry && (
-                <>
-                    <EuiSpacer size="m" />
-                    <EuiButton
-                        size="s"
-                        onClick={onRetry}
-                        data-testid={`retry-${featureType}-backend`}
-                    >
-                        {t('retryButton')}
-                    </EuiButton>
-                </>
-            )}
-        </EuiCallOut>
-    );
+      {onRetry && (
+        <>
+          <EuiSpacer size="m" />
+          <EuiButton size="s" onClick={onRetry} data-testid={`retry-${featureType}-backend`}>
+            {t('retryButton')}
+          </EuiButton>
+        </>
+      )}
+    </EuiCallOut>
+  );
 };

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

@@ -3,20 +3,20 @@ import type { Meta } from '@storybook/react';
 import { WfoBadge } from './WfoBadge';
 
 const Story: Meta<typeof WfoBadge> = {
-    component: WfoBadge,
-    title: 'Badges/WfoBadge',
+  component: WfoBadge,
+  title: 'Badges/WfoBadge',
 };
 export default Story;
 
 export const Default = {
-    args: {
-        children: 'Badge text',
-    },
+  args: {
+    children: 'Badge text',
+  },
 };
 
 export const DefaultWithIcon = {
-    args: {
-        children: 'Badge text with icon',
-        iconType: 'plus',
-    },
+  args: {
+    children: 'Badge text with icon',
+    iconType: 'plus',
+  },
 };

package/src/components/WfoBadges/WfoBadge/WfoBadge.tsx

@@ -6,20 +6,17 @@ import { TextSize } from '@elastic/eui/src/components/text/text';
 import { TextColor } from '@elastic/eui/src/components/text/text_color';
 
 export type WfoBadgeProps = EuiBadgeProps & {
-    textColor: TextColor | string;
-    children: ReactNode;
-    size?: TextSize;
+  textColor: TextColor | string;
+  children: ReactNode;
+  size?: TextSize;
 };
 
-export const WfoBadge: FC<WfoBadgeProps> = ({
-    textColor,
-    children,
-    size,
-    ...restProps
-}) => (
-    <EuiBadge title="" {...restProps}>
-        <EuiText color={textColor} size={size ?? 'xs'}>
-            <b>{children}</b>
-        </EuiText>
+export const WfoBadge: FC<WfoBadgeProps> = ({ textColor, children, size, ...restProps }) => {
+  return (
+    <EuiBadge title="" {...restProps} css={{ borderRadius: '2px', backgroundColor: '' }}>
+      <EuiText color={textColor} size={size ?? 'xs'}>
+        <b>{children}</b>
+      </EuiText>
     </EuiBadge>
-);
+  );
+};

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

@@ -5,25 +5,25 @@ import type { Meta } from '@storybook/react';
 import { WfoEngineStatusBadge } from './WfoEngineStatusBadge';
 
 const Story: Meta<typeof WfoEngineStatusBadge> = {
-    component: (args) => (
-        <div style={{ display: 'flex' }}>
-            <WfoEngineStatusBadge {...args} />
-        </div>
-    ),
-    title: 'Badges/WfoEngineStatusBadge',
-    parameters: {
-        mockData: [
-            {
-                url: 'https://testing.test/settings/status',
-                method: 'GET',
-                status: 200,
-                response: { global_status: 'RUNNING' },
-            },
-        ],
-    },
+  component: (args) => (
+    <div style={{ display: 'flex' }}>
+      <WfoEngineStatusBadge {...args} />
+    </div>
+  ),
+  title: 'Badges/WfoEngineStatusBadge',
+  parameters: {
+    mockData: [
+      {
+        url: 'https://testing.test/settings/status',
+        method: 'GET',
+        status: 200,
+        response: { global_status: 'RUNNING' },
+      },
+    ],
+  },
 };
 export default Story;
 
 export const Primary = {
-    args: {},
+  args: {},
 };

package/src/components/WfoBadges/WfoEngineStatusBadge/WfoEngineStatusBadge.tsx

@@ -9,33 +9,27 @@ import { EngineStatus } from '@/types';
 import { WfoHeaderBadge } from '../WfoHeaderBadge';
 
 export const WfoEngineStatusBadge = () => {
-    const { theme } = useOrchestratorTheme();
-    const { data } = useGetEngineStatusQuery();
-    const { engineStatus } = data || {};
-    const { useWebSockets } = useGetOrchestratorConfig();
-    const [websocketTrigger, { isUninitialized }] =
-        useLazyStreamMessagesQuery();
+  const { theme } = useOrchestratorTheme();
+  const { data } = useGetEngineStatusQuery();
+  const { engineStatus } = data || {};
+  const { useWebSockets } = useGetOrchestratorConfig();
+  const [websocketTrigger, { isUninitialized }] = useLazyStreamMessagesQuery();
 
-    if (useWebSockets && isUninitialized) {
-        websocketTrigger();
-    }
+  if (useWebSockets && isUninitialized) {
+    websocketTrigger();
+  }
 
-    const engineStatusText: string = engineStatus
-        ? `Engine is ${engineStatus}`
-        : 'Engine status is unavailable';
+  const engineStatusText: string = engineStatus ? `Engine is ${engineStatus}` : 'Engine status is unavailable';
 
-    const engineColor =
-        engineStatus === EngineStatus.RUNNING
-            ? theme.colors.success
-            : theme.colors.warning;
+  const engineColor = engineStatus === EngineStatus.RUNNING ? theme.colors.success : theme.colors.warning;
 
-    return (
-        <WfoHeaderBadge
-            color={theme.colors.backgroundBaseNeutral}
-            textColor={theme.colors.textParagraph}
-            iconType={() => <WfoStatusDotIcon color={engineColor} />}
-        >
-            {engineStatusText}
-        </WfoHeaderBadge>
-    );
+  return (
+    <WfoHeaderBadge
+      color={theme.colors.backgroundBaseNeutral}
+      textColor={theme.colors.textParagraph}
+      iconType={() => <WfoStatusDotIcon color={engineColor} />}
+    >
+      {engineStatusText}
+    </WfoHeaderBadge>
+  );
 };

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

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

package/src/components/WfoBadges/WfoEnvironmentBadge/WfoEnvironmentBadge.tsx

@@ -7,23 +7,20 @@ import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme';
 import { WfoHeaderBadge } from '../WfoHeaderBadge/WfoHeaderBadge';
 
 export const WfoEnvironmentBadge = () => {
-    const { environmentName } = useContext(OrchestratorConfigContext);
-    const { theme, toSecondaryColor } = useOrchestratorTheme();
-
-    if (environmentName !== Environment.PRODUCTION) {
-        return (
-            <WfoHeaderBadge color="warning" textColor={theme.colors.shadow}>
-                {environmentName}
-            </WfoHeaderBadge>
-        );
-    }
+  const { environmentName } = useContext(OrchestratorConfigContext);
+  const { theme, toSecondaryColor } = useOrchestratorTheme();
 
+  if (environmentName !== Environment.PRODUCTION) {
     return (
-        <WfoHeaderBadge
-            color={toSecondaryColor(theme.colors.primary)}
-            textColor={theme.colors.primary}
-        >
-            {environmentName}
-        </WfoHeaderBadge>
+      <WfoHeaderBadge color="warning" fill={true} textColor={theme.colors.shadow}>
+        {environmentName}
+      </WfoHeaderBadge>
     );
+  }
+
+  return (
+    <WfoHeaderBadge color={toSecondaryColor(theme.colors.primary)} textColor={theme.colors.primary}>
+      {environmentName}
+    </WfoHeaderBadge>
+  );
 };

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

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

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

@@ -8,104 +8,87 @@ import { EuiToolTip } from '@elastic/eui';
 import { PATH_TASKS, WfoHeaderBadge } from '@/components';
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { WfoCheckmarkCircleFill, WfoXCircleFill } from '@/icons';
-import {
-    ProcessStatusCounts,
-    useProcessStatusCountsQuery,
-} from '@/rtk/endpoints/processStatusCounts';
+import { ProcessStatusCounts, useProcessStatusCountsQuery } from '@/rtk/endpoints/processStatusCounts';
 
 import { getTasksBadgeStyles } from './styles';
 
 type TaskCountsSummary = {
-    failed: number;
-    inconsistentData: number;
-    apiUnavailable: number;
-    total: number;
+  failed: number;
+  inconsistentData: number;
+  apiUnavailable: number;
+  total: number;
 };
 
-const getTaskCountsSummary = (
-    processStatusCounts?: ProcessStatusCounts,
-): TaskCountsSummary => {
-    const failed = processStatusCounts?.task_counts.failed || 0;
-    const inconsistentData =
-        processStatusCounts?.task_counts.inconsistent_data || 0;
-    const apiUnavailable =
-        processStatusCounts?.task_counts.api_unavailable || 0;
+const getTaskCountsSummary = (processStatusCounts?: ProcessStatusCounts): TaskCountsSummary => {
+  const failed = processStatusCounts?.task_counts.failed || 0;
+  const inconsistentData = processStatusCounts?.task_counts.inconsistent_data || 0;
+  const apiUnavailable = processStatusCounts?.task_counts.api_unavailable || 0;
 
-    return {
-        failed,
-        inconsistentData,
-        apiUnavailable,
-        total: failed + inconsistentData + apiUnavailable,
-    };
+  return {
+    failed,
+    inconsistentData,
+    apiUnavailable,
+    total: failed + inconsistentData + apiUnavailable,
+  };
 };
 
 const WfoTasksLink = ({ children }: { children: ReactNode }) => (
-    <Link
-        href={PATH_TASKS}
-        onClick={(e) => {
-            e.currentTarget.blur();
-        }}
-    >
-        {children}
-    </Link>
+  <Link
+    href={PATH_TASKS}
+    onClick={(e) => {
+      e.currentTarget.blur();
+    }}
+  >
+    {children}
+  </Link>
 );
 
 export const WfoFailedTasksBadge = () => {
-    const t = useTranslations('common');
-    const { theme } = useOrchestratorTheme();
-    const { failedTaskBadgeStyle } =
-        useWithOrchestratorTheme(getTasksBadgeStyles);
-    const { data: processStatusCounts } = useProcessStatusCountsQuery();
+  const t = useTranslations('common');
+  const { theme } = useOrchestratorTheme();
+  const { failedTaskBadgeStyle } = useWithOrchestratorTheme(getTasksBadgeStyles);
+  const { data: processStatusCounts } = useProcessStatusCountsQuery();
 
-    const taskCountsSummary = getTaskCountsSummary(processStatusCounts);
-
-    if (taskCountsSummary.total != 0) {
-        return (
-            <EuiToolTip
-                position="bottom"
-                content={
-                    <>
-                        <div>Failed: {taskCountsSummary.failed}</div>
-                        <div>
-                            Inconsistent data:{' '}
-                            {taskCountsSummary.inconsistentData}
-                        </div>
-                        <div>
-                            API unavailable: {taskCountsSummary.apiUnavailable}
-                        </div>
-                    </>
-                }
-            >
-                <WfoTasksLink>
-                    <WfoHeaderBadge
-                        css={failedTaskBadgeStyle}
-                        color={theme.colors.backgroundBaseNeutral}
-                        textColor={theme.colors.textParagraph}
-                        iconType={() => (
-                            <WfoXCircleFill color={theme.colors.danger} />
-                        )}
-                    >
-                        {taskCountsSummary.total}
-                    </WfoHeaderBadge>
-                </WfoTasksLink>
-            </EuiToolTip>
-        );
-    }
+  const taskCountsSummary = getTaskCountsSummary(processStatusCounts);
 
+  if (taskCountsSummary.total != 0) {
     return (
-        <EuiToolTip position="bottom" content={<div>{t('noFailedTasks')}</div>}>
-            <WfoTasksLink>
-                <WfoHeaderBadge
-                    css={failedTaskBadgeStyle}
-                    color={theme.colors.backgroundBaseNeutral}
-                    textColor={theme.colors.textParagraph}
-                    iconType={() => (
-                        <WfoCheckmarkCircleFill color={theme.colors.success} />
-                    )}
-                >
-                    0
-                </WfoHeaderBadge>
-            </WfoTasksLink>
-        </EuiToolTip>
+      <EuiToolTip
+        position="bottom"
+        content={
+          <>
+            <div>Failed: {taskCountsSummary.failed}</div>
+            <div>Inconsistent data: {taskCountsSummary.inconsistentData}</div>
+            <div>API unavailable: {taskCountsSummary.apiUnavailable}</div>
+          </>
+        }
+      >
+        <WfoTasksLink>
+          <WfoHeaderBadge
+            css={failedTaskBadgeStyle}
+            color={theme.colors.backgroundBaseNeutral}
+            textColor={theme.colors.textParagraph}
+            iconType={() => <WfoXCircleFill color={theme.colors.danger} />}
+          >
+            {taskCountsSummary.total}
+          </WfoHeaderBadge>
+        </WfoTasksLink>
+      </EuiToolTip>
     );
+  }
+
+  return (
+    <EuiToolTip position="bottom" content={<div>{t('noFailedTasks')}</div>}>
+      <WfoTasksLink>
+        <WfoHeaderBadge
+          css={failedTaskBadgeStyle}
+          color={theme.colors.backgroundBaseNeutral}
+          textColor={theme.colors.textParagraph}
+          iconType={() => <WfoCheckmarkCircleFill color={theme.colors.success} />}
+        >
+          0
+        </WfoHeaderBadge>
+      </WfoTasksLink>
+    </EuiToolTip>
+  );
 };

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

@@ -1,10 +1,10 @@
 import { css } from '@emotion/react';
 
 export const getTasksBadgeStyles = () => {
-    const failedTaskBadgeStyle = css({
-        cursor: 'pointer',
-        '&:hover': { textDecoration: 'underline' },
-    });
+  const failedTaskBadgeStyle = css({
+    cursor: 'pointer',
+    '&:hover': { textDecoration: 'underline' },
+  });
 
-    return { failedTaskBadgeStyle };
+  return { failedTaskBadgeStyle };
 };

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

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