@orchestrator-ui/orchestrator-ui-components 7.2.0 → 7.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "7.2.0",
+    "version": "7.2.1",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -39,7 +39,6 @@
         "@copilotkit/react-ui": "1.10.6",
         "@copilotkit/runtime": "1.10.6",
         "@elastic/charts": "^64.1.0",
-        "@elastic/eui": "101.3.0",
         "@emotion/css": "^11.11.2",
         "@emotion/react": "^11.11.4",
         "@monaco-editor/react": "^4.7.0",
@@ -80,12 +79,14 @@
         "jest-environment-jsdom": "^30.2.0",
         "jest-watch-typeahead": "^3.0.1",
         "tsup": "^8.5.0",
-        "typescript": "^5.5.2"
+        "typescript": "^5.5.2",
+        "@elastic/eui": "^111.0.0"
     },
     "peerDependencies": {
         "next": "^15.5.9",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "@elastic/eui": "^111.0.0"
     },
     "type": "module",
     "main": "./dist/index.js",

package/src/components/WfoAgent/ExportButton/styles.ts

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getExportButtonStyles = ({ theme }: WfoTheme) => {
+export const getExportButtonStyles = ({ theme }: WfoThemeHelpers) => {
     const containerStyle = css({
         marginTop: theme.size.xl,
         marginBottom: theme.size.xl,
@@ -10,7 +10,7 @@ export const getExportButtonStyles = ({ theme }: WfoTheme) => {
     });
 
     const buttonWrapperStyle = css({
-        backgroundColor: theme.colors.lightestShade,
+        backgroundColor: theme.colors.backgroundBaseNeutral,
         padding: `${theme.size.xl} ${theme.size.xl}`,
         border: `${theme.border.width.thin} solid transparent`,
         display: 'flex',
@@ -21,7 +21,7 @@ export const getExportButtonStyles = ({ theme }: WfoTheme) => {
     const titleStyle = css({
         fontSize: theme.size.m,
         fontWeight: theme.font.weight.semiBold,
-        color: theme.colors.darkestShade,
+        color: theme.colors.textParagraph,
     });
 
     const fileRowStyle = css({
@@ -29,10 +29,10 @@ export const getExportButtonStyles = ({ theme }: WfoTheme) => {
         alignItems: 'center',
         justifyContent: 'space-between',
         gap: theme.size.m,
-        border: `${theme.border.width.thin} solid ${theme.colors.lightShade}`,
+        border: `${theme.border.width.thin} solid ${theme.colors.borderBaseSubdued}`,
         borderRadius: theme.border.radius.medium,
         padding: `${theme.size.m} ${theme.size.l}`,
-        backgroundColor: theme.colors.emptyShade,
+        backgroundColor: theme.colors.backgroundBaseNeutral,
         cursor: 'pointer',
     });
 
@@ -41,20 +41,20 @@ export const getExportButtonStyles = ({ theme }: WfoTheme) => {
         alignItems: 'center',
         gap: theme.size.m,
         flex: 1,
-        color: theme.colors.darkestShade,
+        color: theme.colors.textParagraph,
     });
 
     const filenameStyle = css({
         fontSize: theme.size.m,
         fontWeight: theme.font.weight.medium,
-        color: theme.colors.darkestShade,
+        color: theme.colors.textParagraph,
     });
 
     const downloadButtonStyle = css({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        color: theme.colors.darkestShade,
+        color: theme.colors.textParagraph,
     });
 
     return {

package/src/components/WfoAgent/ToolProgress/SetFilterTreeDisplay.styles.ts

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getFilterDisplayStyles = ({ theme }: WfoTheme) => {
+export const getFilterDisplayStyles = ({ theme }: WfoThemeHelpers) => {
     const wrapStyle = css({
         display: 'flex',
         flexWrap: 'wrap',
@@ -21,18 +21,18 @@ export const getFilterDisplayStyles = ({ theme }: WfoTheme) => {
         alignItems: 'center',
         borderRadius: theme.size.xl,
         border: `1px solid ${theme.border.color}`,
-        backgroundColor: theme.colors.body,
+        backgroundColor: theme.colors.backgroundBasePlain,
         padding: `${theme.size.s} ${theme.size.m}`,
         lineHeight: 1.1,
         gap: theme.size.s,
     });
 
     const groupStyle = css({
-        border: `1px solid ${theme.colors.lightShade}`,
+        border: `1px solid ${theme.colors.borderBaseSubdued}`,
         borderRadius: theme.border.radius.medium,
         padding: theme.size.s,
         margin: theme.size.xs,
-        backgroundColor: theme.colors.body,
+        backgroundColor: theme.colors.backgroundBasePlain,
     });
 
     const operatorStyle = css({

package/src/components/WfoAgent/ToolProgress/styles.ts

@@ -1,12 +1,12 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getToolProgressStyles = ({ theme }: WfoTheme) => {
+export const getToolProgressStyles = ({ theme }: WfoThemeHelpers) => {
     const containerStyle = css({
-        border: `${theme.border.width.thin} solid ${theme.colors.lightShade}`,
+        border: `${theme.border.width.thin} solid ${theme.colors.borderBaseSubdued}`,
         borderRadius: theme.border.radius.medium,
-        backgroundColor: theme.colors.emptyShade,
+        backgroundColor: theme.colors.backgroundBaseNeutral,
         transition: `all ${theme.animation.normal} ease`,
         maxWidth: '50%',
         marginRight: 'auto',
@@ -16,7 +16,7 @@ export const getToolProgressStyles = ({ theme }: WfoTheme) => {
         cursor: 'pointer',
         '&:hover': {
             borderColor: theme.colors.primary,
-            backgroundColor: theme.colors.lightestShade,
+            backgroundColor: theme.colors.backgroundBasePlain,
         },
     });
 
@@ -30,14 +30,14 @@ export const getToolProgressStyles = ({ theme }: WfoTheme) => {
     });
 
     const expandedContentStyle = css({
-        borderTop: `${theme.border.width.thin} solid ${theme.colors.lightShade}`,
+        borderTop: `${theme.border.width.thin} solid ${theme.colors.borderBaseSubdued}`,
         padding: `${theme.size.base} ${theme.size.l}`,
     });
 
     const iconSize = 18;
 
     const iconStyle = css({
-        color: theme.colors.subduedText,
+        color: theme.colors.textSubdued,
     });
 
     return {

package/src/components/WfoAgent/WfoAgentChart/WfoAgentLineChart.tsx

@@ -21,8 +21,8 @@ export type WfoAgentLineChartProps = {
 
 export function WfoAgentLineChart({ aggregationData }: WfoAgentLineChartProps) {
     const { results } = aggregationData;
-    const { isDarkThemeActive, multiplyByBaseUnit } = useOrchestratorTheme();
-    const chartBaseTheme = isDarkThemeActive ? DARK_THEME : LIGHT_THEME;
+    const { isDarkModeActive, multiplyByBaseUnit } = useOrchestratorTheme();
+    const chartBaseTheme = isDarkModeActive ? DARK_THEME : LIGHT_THEME;
 
     const firstResult = results[0];
     const groupKeys = Object.keys(firstResult.group_values);

package/src/components/WfoAgent/WfoAgentChart/WfoAgentPieChart.tsx

@@ -23,8 +23,8 @@ export type WfoAgentPieChartProps = {
 
 export function WfoAgentPieChart({ aggregationData }: WfoAgentPieChartProps) {
     const { results } = aggregationData;
-    const { isDarkThemeActive, multiplyByBaseUnit } = useOrchestratorTheme();
-    const chartBaseTheme = isDarkThemeActive ? DARK_THEME : LIGHT_THEME;
+    const { isDarkModeActive, multiplyByBaseUnit } = useOrchestratorTheme();
+    const chartBaseTheme = isDarkModeActive ? DARK_THEME : LIGHT_THEME;
 
     const firstResult = results[0];
     const groupKeys = Object.keys(firstResult.group_values);

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

@@ -31,8 +31,8 @@ export const WfoEngineStatusBadge = () => {
 
     return (
         <WfoHeaderBadge
-            color={theme.colors.ghost}
-            textColor={theme.colors.shadow}
+            color={theme.colors.backgroundBaseNeutral}
+            textColor={theme.colors.textParagraph}
             iconType={() => <WfoStatusDotIcon color={engineColor} />}
         >
             {engineStatusText}

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

@@ -30,6 +30,7 @@ const getTaskCountsSummary = (
         processStatusCounts?.task_counts.inconsistent_data || 0;
     const apiUnavailable =
         processStatusCounts?.task_counts.api_unavailable || 0;
+
     return {
         failed,
         inconsistentData,
@@ -40,7 +41,7 @@ const getTaskCountsSummary = (
 
 const WfoTasksLink = ({ children }: { children: ReactNode }) => (
     <Link
-        href={`${PATH_TASKS}`}
+        href={PATH_TASKS}
         onClick={(e) => {
             e.currentTarget.blur();
         }}
@@ -78,8 +79,8 @@ export const WfoFailedTasksBadge = () => {
                 <WfoTasksLink>
                     <WfoHeaderBadge
                         css={failedTaskBadgeStyle}
-                        color={theme.colors.ghost}
-                        textColor={theme.colors.shadow}
+                        color={theme.colors.backgroundBaseNeutral}
+                        textColor={theme.colors.textParagraph}
                         iconType={() => (
                             <WfoXCircleFill color={theme.colors.danger} />
                         )}
@@ -89,31 +90,22 @@ export const WfoFailedTasksBadge = () => {
                 </WfoTasksLink>
             </EuiToolTip>
         );
-    } else {
-        return (
-            <EuiToolTip
-                position="bottom"
-                content={
-                    <>
-                        <div>{t('noFailedTasks')}</div>
-                    </>
-                }
-            >
-                <WfoTasksLink>
-                    <WfoHeaderBadge
-                        css={failedTaskBadgeStyle}
-                        color={theme.colors.ghost}
-                        textColor={theme.colors.shadow}
-                        iconType={() => (
-                            <WfoCheckmarkCircleFill
-                                color={theme.colors.success}
-                            />
-                        )}
-                    >
-                        0
-                    </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/WfoProcessStatusBadge/WfoProcessStatusBadge.tsx

@@ -18,37 +18,37 @@ export const WfoProcessStatusBadge: FC<WfoProcessStatusBadgeProps> = ({
         const {
             primary,
             danger,
-            dangerText,
-            lightShade,
-            primaryText,
+            textDanger,
+            borderBaseSubdued,
+            textPrimary,
             success,
-            successText,
-            text,
+            textSuccess,
+            textParagraph,
             warning,
-            warningText,
+            textWarning,
         } = theme.colors;
 
         switch (status.toLowerCase()) {
             case ProcessStatus.COMPLETED:
                 return {
                     badgeColor: toSecondaryColor(success),
-                    textColor: successText,
+                    textColor: textSuccess,
                 };
             case ProcessStatus.FAILED:
             case ProcessStatus.ABORTED:
                 return {
                     badgeColor: toSecondaryColor(danger),
-                    textColor: dangerText,
+                    textColor: textDanger,
                 };
             case ProcessStatus.SUSPENDED:
                 return {
                     badgeColor: toSecondaryColor(warning),
-                    textColor: warningText,
+                    textColor: textWarning,
                 };
             case ProcessStatus.CREATED:
                 return {
-                    badgeColor: lightShade,
-                    textColor: text,
+                    badgeColor: borderBaseSubdued,
+                    textColor: textParagraph,
                 };
             case ProcessStatus.WAITING:
             case ProcessStatus.RESUMED:
@@ -58,7 +58,7 @@ export const WfoProcessStatusBadge: FC<WfoProcessStatusBadgeProps> = ({
             default:
                 return {
                     badgeColor: toSecondaryColor(primary),
-                    textColor: primaryText,
+                    textColor: textPrimary,
                 };
         }
     };

package/src/components/WfoBadges/WfoProductBlockBadge/WfoProductBlockBadge.tsx

@@ -23,46 +23,46 @@ export function WfoProductBlockBadge({
     const getBadgeColorFromType = (badgeType: BadgeType) => {
         const {
             danger,
-            dangerText,
-            lightShade,
+            textDanger,
+            borderBaseSubdued,
             primary,
-            primaryText,
+            textPrimary,
             success,
-            successText,
-            text,
+            textSuccess,
             warning,
-            warningText,
+            textWarning,
+            textParagraph,
         } = theme.colors;
 
         switch (badgeType) {
             case BadgeType.RESOURCE_TYPE:
                 return {
                     badgeColor: toSecondaryColor(success),
-                    textColor: successText,
+                    textColor: textSuccess,
                 };
             case BadgeType.PRODUCT_BLOCK_TAG:
             case BadgeType.PRODUCT_BLOCK:
                 return {
                     badgeColor: toSecondaryColor(primary),
-                    textColor: primaryText,
+                    textColor: textPrimary,
                 };
             case BadgeType.WORKFLOW:
             case BadgeType.TASK:
             case BadgeType.PRODUCT:
                 return {
                     badgeColor: toSecondaryColor(danger),
-                    textColor: dangerText,
+                    textColor: textDanger,
                 };
             case BadgeType.FIXED_INPUT:
                 return {
                     badgeColor: toSecondaryColor(warning),
-                    textColor: warningText,
+                    textColor: textWarning,
                 };
             case BadgeType.PRODUCT_TAG:
             default:
                 return {
-                    badgeColor: lightShade,
-                    textColor: text,
+                    badgeColor: borderBaseSubdued,
+                    textColor: textParagraph,
                 };
         }
     };

package/src/components/WfoBadges/WfoProductStatusBadge/WfoProductStatusBadge.tsx

@@ -16,29 +16,29 @@ export const WfoProductStatusBadge: FC<WfoProductStatusBadgeProps> = ({
     const getBadgeColorFromStatus = (status: string) => {
         const {
             primary,
-            darkestShade,
-            lightShade,
-            primaryText,
+            borderBaseSubdued,
+            textPrimary,
+            textParagraph,
             success,
-            successText,
+            textSuccess,
         } = theme.colors;
 
         switch (status.toLowerCase()) {
             case ProductLifecycleStatus.ACTIVE:
                 return {
                     badgeColor: toSecondaryColor(success),
-                    textColor: successText,
+                    textColor: textSuccess,
                 };
             case ProductLifecycleStatus.END_OF_LIFE:
                 return {
-                    badgeColor: lightShade,
-                    textColor: darkestShade,
+                    badgeColor: borderBaseSubdued,
+                    textColor: textParagraph,
                 };
 
             default:
                 return {
                     badgeColor: toSecondaryColor(primary),
-                    textColor: primaryText,
+                    textColor: textPrimary,
                 };
         }
     };

package/src/components/WfoBadges/WfoSubscriptionStatusBadge/WfoSubscriptionStatusBadge.tsx

@@ -17,29 +17,29 @@ export const WfoSubscriptionStatusBadge: FC<
     const getBadgeColorFromStatus = () => {
         const {
             primary,
-            darkestShade,
-            lightShade,
-            primaryText,
+            borderBaseSubdued,
+            textParagraph,
+            textPrimary,
             success,
-            successText,
+            textSuccess,
         } = theme.colors;
 
         switch (lowerCaseStatus) {
             case SubscriptionStatus.ACTIVE:
                 return {
                     badgeColor: toSecondaryColor(success),
-                    textColor: successText,
+                    textColor: textSuccess,
                 };
             case SubscriptionStatus.TERMINATED:
                 return {
-                    badgeColor: lightShade,
-                    textColor: darkestShade,
+                    badgeColor: borderBaseSubdued,
+                    textColor: textParagraph,
                 };
 
             default:
                 return {
                     badgeColor: toSecondaryColor(primary),
-                    textColor: primaryText,
+                    textColor: textPrimary,
                 };
         }
     };

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

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

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

@@ -1,12 +1,14 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const getStyles = ({ theme, isDarkModeActive }: WfoThemeHelpers) => {
     const connectedStyle = css({
         paddingLeft: theme.base / 2,
         cursor: 'default',
-        backgroundColor: theme.colors.ghost,
+        backgroundColor: isDarkModeActive
+            ? theme.colors.backgroundBaseNeutral
+            : theme.colors.ghost,
     });
 
     const disconnectedStyle = css({

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

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
 
-import { useOrchestratorTheme } from '../../../hooks';
-import { WorkflowTarget } from '../../../types';
+import { useOrchestratorTheme } from '@/hooks';
+import { WorkflowTarget } from '@/types';
+
 import { WfoBadge } from '../WfoBadge';
 
 export type WfoWorkflowTargetBadgeProps = {
@@ -18,47 +19,47 @@ export const WfoWorkflowTargetBadge: FC<WfoWorkflowTargetBadgeProps> = ({
         const {
             primary,
             danger,
-            dangerText,
-            primaryText,
+            textDanger,
+            textPrimary,
             success,
-            successText,
+            textSuccess,
             warning,
-            warningText,
+            textWarning,
             accent,
-            accentText,
+            textAccent,
         } = theme.colors;
 
         switch (_target?.toLowerCase()) {
             case WorkflowTarget.CREATE:
                 return {
                     badgeColor: toSecondaryColor(success),
-                    textColor: successText,
+                    textColor: textSuccess,
                 };
             case WorkflowTarget.MODIFY:
                 return {
                     badgeColor: toSecondaryColor(primary),
-                    textColor: primaryText,
+                    textColor: textPrimary,
                 };
             case WorkflowTarget.SYSTEM:
             case WorkflowTarget.VALIDATE:
                 return {
                     badgeColor: toSecondaryColor(warning),
-                    textColor: warningText,
+                    textColor: textWarning,
                 };
             case WorkflowTarget.TERMINATE:
                 return {
                     badgeColor: toSecondaryColor(danger),
-                    textColor: dangerText,
+                    textColor: textDanger,
                 };
             case WorkflowTarget.RECONCILE:
                 return {
                     badgeColor: toSecondaryColor(accent),
-                    textColor: accentText,
+                    textColor: textAccent,
                 };
             default:
                 return {
                     badgeColor: toSecondaryColor(primary),
-                    textColor: primaryText,
+                    textColor: textPrimary,
                 };
         }
     };

package/src/components/WfoButtonComboBox/styles.ts

@@ -1,19 +1,19 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getWfoButtonComboBoxStyles = ({ theme }: WfoTheme) => {
+export const getWfoButtonComboBoxStyles = ({ theme }: WfoThemeHelpers) => {
     const selectableStyle = css({
         '.euiFieldSearch': {
-            backgroundColor: theme.colors.body,
-            color: theme.colors.text,
+            backgroundColor: theme.colors.backgroundBasePlain,
+            color: theme.colors.textParagraph,
             '&:focus': {
-                backgroundColor: theme.colors.emptyShade,
+                backgroundColor: theme.colors.backgroundBaseNeutral,
             },
         },
 
         '.euiSelectableList .euiSelectableListItem': {
-            borderColor: theme.colors.lightShade,
+            borderColor: theme.colors.borderBaseSubdued,
         },
     });
 

package/src/components/WfoDiff/styles.ts

@@ -1,23 +1,23 @@
 import { shade, tint } from '@elastic/eui';
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
 export const getWfoDiffStyles = ({
     theme,
     toSecondaryColor,
-    isDarkThemeActive,
-}: WfoTheme) => {
+    isDarkModeActive,
+}: WfoThemeHelpers) => {
     const SHADE_FACTOR = 0.5;
     const TINT_FACTOR = 0.65;
 
     const insertGutterColor = toSecondaryColor(theme.colors.success);
-    const insertCodeColor = isDarkThemeActive
+    const insertCodeColor = isDarkModeActive
         ? shade(insertGutterColor, SHADE_FACTOR)
         : tint(insertGutterColor, TINT_FACTOR);
 
     const deleteColor = toSecondaryColor(theme.colors.danger);
-    const deleteSecondaryColor = isDarkThemeActive
+    const deleteSecondaryColor = isDarkModeActive
         ? shade(deleteColor, SHADE_FACTOR)
         : tint(deleteColor, TINT_FACTOR);
 
@@ -36,7 +36,7 @@ export const getWfoDiffStyles = ({
         },
 
         '.operator, .punctuation': {
-            color: theme.colors.text,
+            color: theme.colors.textParagraph,
         },
     });