@orchestrator-ui/orchestrator-ui-components 5.9.0 → 6.1.0

package/src/components/WfoSearchPage/WfoSearchResults/WfoHighlightedText.tsx

@@ -0,0 +1,63 @@
+import React, { FC, useMemo } from 'react';
+
+import { css } from '@emotion/react';
+
+import { useOrchestratorTheme } from '@/hooks';
+
+interface WfoHighlightedTextProps {
+    text: string;
+    highlight_indices: [number, number][];
+}
+
+export const WfoHighlightedText: FC<WfoHighlightedTextProps> = ({
+    text,
+    highlight_indices,
+}) => {
+    const { theme } = useOrchestratorTheme();
+
+    const highlightStyles = css`
+        background-color: ${theme.colors.warning};
+        color: ${theme.colors.plainDark};
+        padding: 0 ${theme.size.xs};
+        font-family: ${theme.font.family};
+        font-weight: ${theme.font.weight.bold};
+        border-radius: ${theme.size.xs};
+    `;
+
+    const highlightedParts = useMemo(() => {
+        if (!highlight_indices || highlight_indices.length === 0) {
+            return text;
+        }
+
+        const sorted = [...highlight_indices].sort((a, b) => a[0] - b[0]);
+        const parts: React.ReactNode[] = [];
+        let lastIndex = 0;
+
+        sorted.forEach(([start, end], idx) => {
+            // Plain text
+            if (start > lastIndex) {
+                parts.push(
+                    <span key={`plain-${idx}`}>
+                        {text.slice(lastIndex, start)}
+                    </span>,
+                );
+            }
+            // Highlighted text
+            parts.push(
+                <span key={`hl-${idx}`} css={highlightStyles}>
+                    {text.slice(start, end)}
+                </span>,
+            );
+            lastIndex = end;
+        });
+
+        // Remaining plain text
+        if (lastIndex < text.length) {
+            parts.push(<span key="plain-last">{text.slice(lastIndex)}</span>);
+        }
+
+        return parts;
+    }, [text, highlight_indices, highlightStyles]);
+
+    return <>{highlightedParts}</>;
+};

package/src/components/WfoSearchPage/WfoSearchResults/WfoPathBreadcrumb.tsx

@@ -0,0 +1,80 @@
+import React, { FC, Fragment } from 'react';
+
+import { EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
+
+import { WfoBadge } from '@/components/WfoBadges';
+import { useOrchestratorTheme } from '@/hooks';
+
+interface WfoPathBreadcrumbProps {
+    path: string;
+    size?: 's' | 'm';
+    maxSegments?: number;
+    showArrows?: boolean;
+    color?: string;
+    stripFirstSegment?: boolean;
+}
+
+export const WfoPathBreadcrumb: FC<WfoPathBreadcrumbProps> = ({
+    path,
+    size = 'm',
+    maxSegments,
+    showArrows = true,
+    color,
+    stripFirstSegment = false,
+}) => {
+    const { theme } = useOrchestratorTheme();
+
+    if (!path) {
+        return null;
+    }
+
+    let segments = path.split('.').filter((segment) => !/^\d+$/.test(segment));
+
+    // Strip the first segment (the entity type)
+    if (stripFirstSegment && segments.length > 1) {
+        segments = segments.slice(1);
+    }
+
+    const displaySegments =
+        maxSegments && segments.length > maxSegments
+            ? [
+                  ...segments.slice(0, maxSegments - 1),
+                  '...',
+                  segments[segments.length - 1],
+              ]
+            : segments;
+
+    const badgeColor = color || theme.colors.primary;
+
+    return (
+        <EuiFlexGroup
+            gutterSize={size}
+            alignItems="center"
+            wrap={false}
+            responsive={false}
+        >
+            {displaySegments.map((segment, index) => (
+                <Fragment key={index}>
+                    <EuiFlexItem grow={false}>
+                        <WfoBadge
+                            color={badgeColor}
+                            textColor={theme.colors.ghost}
+                            size={size}
+                        >
+                            {segment}
+                        </WfoBadge>
+                    </EuiFlexItem>
+                    {showArrows && index < displaySegments.length - 1 && (
+                        <EuiFlexItem grow={false}>
+                            <EuiIcon
+                                type="arrowRight"
+                                size={size}
+                                color={theme.colors.link}
+                            />
+                        </EuiFlexItem>
+                    )}
+                </Fragment>
+            ))}
+        </EuiFlexGroup>
+    );
+};

package/src/components/WfoSearchPage/WfoSearchResults/WfoSearchEmptyState.tsx

@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '@/hooks';
+
+export const WfoSearchEmptyState: FC = () => {
+    const t = useTranslations('search.page');
+    const { theme } = useOrchestratorTheme();
+
+    return (
+        <EuiPanel paddingSize="l" color="transparent" hasShadow={false}>
+            <EuiFlexGroup justifyContent="center" alignItems="center">
+                <EuiFlexItem grow={false}>
+                    <EuiText size="m" color={theme.colors.textSubdued}>
+                        {t('noResultsFound')}
+                    </EuiText>
+                </EuiFlexItem>
+            </EuiFlexGroup>
+        </EuiPanel>
+    );
+};

package/src/components/WfoSearchPage/WfoSearchResults/WfoSearchLoadingState.tsx

@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '@/hooks';
+
+export const WfoSearchLoadingState: FC = () => {
+    const t = useTranslations('search.page');
+    const { theme } = useOrchestratorTheme();
+
+    return (
+        <EuiPanel paddingSize="l" color="transparent" hasShadow={false}>
+            <EuiFlexGroup justifyContent="center" alignItems="center">
+                <EuiFlexItem grow={false}>
+                    <EuiText size="m" color={theme.colors.textSubdued}>
+                        {t('loadingSearchResults')}
+                    </EuiText>
+                </EuiFlexItem>
+            </EuiFlexGroup>
+        </EuiPanel>
+    );
+};

package/src/components/WfoSearchPage/WfoSearchResults/WfoSearchMetadataHeader.tsx

@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+
+import { WfoBadge, WfoToolTip } from '@/components';
+
+interface WfoSearchMetadataHeaderProps {
+    search_metadata: {
+        search_type: string | null;
+        description: string | null;
+    };
+}
+
+export const WfoSearchMetadataHeader: FC<WfoSearchMetadataHeaderProps> = ({
+    search_metadata,
+}) => {
+    if (!search_metadata.search_type) return null;
+
+    return (
+        <WfoToolTip tooltipContent={search_metadata.description || ''}>
+            <WfoBadge color="hollow" iconType="search" textColor="default">
+                {search_metadata.search_type}
+            </WfoBadge>
+        </WfoToolTip>
+    );
+};

package/src/components/WfoSearchPage/WfoSearchResults/WfoSearchPaginationInfo.tsx

@@ -0,0 +1,107 @@
+import React, { FC } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import {
+    EuiButtonIcon,
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiText,
+} from '@elastic/eui';
+
+import { WfoBadge } from '@/components/WfoBadges';
+import { useOrchestratorTheme } from '@/hooks';
+
+interface WfoSearchPaginationInfoProps {
+    has_next_page: boolean;
+    next_page_cursor: number | null;
+    onNextPage?: (nextPageCursor: number) => void;
+    onPrevPage?: () => void;
+    isLoading?: boolean;
+    currentPage?: number;
+    hasPrevPage?: boolean;
+    resultCount?: number;
+}
+
+export const WfoSearchPaginationInfo: FC<WfoSearchPaginationInfoProps> = ({
+    has_next_page,
+    next_page_cursor,
+    onNextPage,
+    onPrevPage,
+    isLoading = false,
+    currentPage = 1,
+    hasPrevPage = false,
+    resultCount,
+}) => {
+    const t = useTranslations('search.page');
+    const { theme } = useOrchestratorTheme();
+
+    const handleNextPage = () => {
+        if (!isLoading && next_page_cursor && onNextPage)
+            onNextPage(next_page_cursor);
+    };
+
+    const handlePrevPage = () => {
+        if (!isLoading && onPrevPage) onPrevPage();
+    };
+
+    if (!has_next_page && !hasPrevPage) return null;
+
+    return (
+        <EuiFlexGroup
+            justifyContent="flexEnd"
+            alignItems="center"
+            gutterSize="xs"
+            responsive={false}
+            style={{
+                whiteSpace: 'nowrap',
+                padding: 0,
+                background: 'transparent',
+                border: 'none',
+            }}
+            role="navigation"
+            aria-label={t('searchResultsPagination')}
+        >
+            <EuiFlexItem grow={false}>
+                <EuiButtonIcon
+                    iconType="arrowLeft"
+                    aria-label={t('previousPage')}
+                    onClick={handlePrevPage}
+                    disabled={!hasPrevPage || isLoading}
+                    color="text"
+                    size="s"
+                />
+            </EuiFlexItem>
+
+            <EuiFlexItem grow={false}>
+                <EuiText size="xs" color={theme.colors.textSubdued}>
+                    {t('page')} {currentPage}
+                </EuiText>
+            </EuiFlexItem>
+
+            <EuiFlexItem grow={false}>
+                <EuiButtonIcon
+                    iconType="arrowRight"
+                    aria-label={t('nextPage')}
+                    onClick={handleNextPage}
+                    disabled={!has_next_page || isLoading}
+                    color="text"
+                    size="s"
+                    isLoading={isLoading}
+                />
+            </EuiFlexItem>
+
+            {resultCount && resultCount > 0 && (
+                <EuiFlexItem grow={false}>
+                    <WfoBadge
+                        className="wfoPagination__badge"
+                        color="hollow"
+                        textColor="default"
+                    >
+                        {t('resultsOnPage', { resultCount })}
+                    </WfoBadge>
+                </EuiFlexItem>
+            )}
+        </EuiFlexGroup>
+    );
+};

package/src/components/WfoSearchPage/WfoSearchResults/WfoSearchResultItem.tsx

@@ -0,0 +1,157 @@
+import React, { FC, MouseEvent, useEffect, useRef } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import {
+    EuiButtonIcon,
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiPanel,
+    EuiSpacer,
+    EuiText,
+} from '@elastic/eui';
+
+import { WfoBadge } from '@/components/WfoBadges';
+import { useOrchestratorTheme } from '@/hooks';
+import { AnySearchResult } from '@/types';
+
+import { getDescription, getDetailUrl } from '../utils';
+import { WfoHighlightedText } from './WfoHighlightedText';
+import { WfoPathBreadcrumb } from './WfoPathBreadcrumb';
+
+interface WfoSearchResultItemProps {
+    result: AnySearchResult;
+    index: number;
+    isSelected?: boolean;
+    onSelect?: () => void;
+    onPositionChange?: (index: number, element: HTMLElement | null) => void;
+}
+
+export const WfoSearchResultItem: FC<WfoSearchResultItemProps> = ({
+    result,
+    isSelected = false,
+    onSelect,
+    onPositionChange,
+    index,
+}) => {
+    const t = useTranslations('search.page');
+    const matchingField = result.matching_field;
+    const { theme } = useOrchestratorTheme();
+    const baseUrl = `${window.location.protocol}//${window.location.host}`;
+    const detailUrl = getDetailUrl(result, baseUrl);
+    const itemRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (isSelected && onPositionChange && itemRef.current) {
+            onPositionChange(index, itemRef.current);
+        }
+    }, [isSelected, index, onPositionChange]);
+
+    return (
+        <EuiFlexItem>
+            <EuiPanel
+                panelRef={itemRef}
+                color={isSelected ? 'primary' : 'transparent'}
+                paddingSize="m"
+                data-record-index={index}
+                onClick={() => {
+                    onSelect?.();
+                }}
+                style={
+                    isSelected
+                        ? {
+                              borderTop: theme.border.thick,
+                              borderBottom: theme.border.thick,
+                              borderLeft: 'none',
+                              borderRight: 'none',
+                              borderColor: theme.colors.primary,
+                          }
+                        : undefined
+                }
+            >
+                <EuiFlexGroup alignItems="flexStart" gutterSize="m">
+                    <EuiFlexItem>
+                        <EuiFlexGroup direction="column" gutterSize="xs">
+                            <EuiFlexItem>
+                                <EuiText
+                                    size="m"
+                                    style={{
+                                        fontWeight: theme.font.weight.semiBold,
+                                    }}
+                                >
+                                    {getDescription(result)}
+                                </EuiText>
+                            </EuiFlexItem>
+                            {matchingField && (
+                                <>
+                                    {matchingField.path && (
+                                        <EuiFlexItem>
+                                            <WfoPathBreadcrumb
+                                                path={matchingField.path}
+                                                size="s"
+                                                maxSegments={4}
+                                                color={theme.colors.primary}
+                                            />
+                                        </EuiFlexItem>
+                                    )}
+                                    <EuiFlexItem>
+                                        <EuiText
+                                            style={{
+                                                backgroundColor: 'transparent',
+                                                borderRadius:
+                                                    theme.border.radius.medium,
+                                                fontSize: theme.size.base,
+                                            }}
+                                        >
+                                            <WfoHighlightedText
+                                                text={matchingField.text}
+                                                highlight_indices={
+                                                    matchingField.highlight_indices
+                                                }
+                                            />
+                                        </EuiText>
+                                    </EuiFlexItem>
+
+                                    <EuiSpacer size="xs" />
+                                </>
+                            )}
+                        </EuiFlexGroup>
+                    </EuiFlexItem>
+
+                    <EuiFlexItem grow={false}>
+                        <EuiFlexGroup
+                            direction="column"
+                            alignItems="flexEnd"
+                            gutterSize="xs"
+                        >
+                            <EuiFlexItem>
+                                <WfoBadge
+                                    color={theme.colors.primary}
+                                    textColor={theme.colors.ghost}
+                                >
+                                    {'score' in result && result.score
+                                        ? result.score.toFixed(4)
+                                        : 'N/A'}
+                                </WfoBadge>
+                            </EuiFlexItem>
+                            <EuiFlexItem>
+                                <EuiButtonIcon
+                                    iconType="popout"
+                                    aria-label={t('viewDetails')}
+                                    onClick={(
+                                        e: MouseEvent<HTMLButtonElement>,
+                                    ) => {
+                                        e.stopPropagation();
+                                        window.open(detailUrl, '_blank');
+                                    }}
+                                    color="text"
+                                    size="m"
+                                />
+                            </EuiFlexItem>
+                        </EuiFlexGroup>
+                    </EuiFlexItem>
+                </EuiFlexGroup>
+            </EuiPanel>
+        </EuiFlexItem>
+    );
+};

package/src/components/WfoSearchPage/WfoSearchResults/WfoSearchResults.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+
+import { EuiFlexGroup, EuiPanel } from '@elastic/eui';
+
+import { AnySearchResult } from '@/types';
+
+import { WfoSearchEmptyState } from './WfoSearchEmptyState';
+import { WfoSearchLoadingState } from './WfoSearchLoadingState';
+import { WfoSearchResultItem } from './WfoSearchResultItem';
+import { WfoSubscriptionDetailModal } from './WfoSubscriptionDetailModal';
+
+interface WfoSearchResultsProps {
+    results: AnySearchResult[];
+    loading: boolean;
+    selectedRecordIndex?: number;
+    onRecordSelect?: (index: number) => void;
+}
+
+export const WfoSearchResults = ({
+    results,
+    loading,
+    selectedRecordIndex = 0,
+    onRecordSelect,
+}: WfoSearchResultsProps) => {
+    const [modalData, setModalData] = useState<{
+        subscription: unknown;
+        matchingField?: unknown;
+    } | null>(null);
+
+    const handleCloseModal = () => {
+        setModalData(null);
+    };
+
+    if (loading) {
+        return <WfoSearchLoadingState />;
+    }
+
+    if (!results || results.length === 0) {
+        return <WfoSearchEmptyState />;
+    }
+
+    return (
+        <>
+            <EuiPanel paddingSize="m" hasShadow={false}>
+                <EuiFlexGroup direction="column" gutterSize="s">
+                    {results.map((result, idx) => (
+                        <WfoSearchResultItem
+                            key={idx}
+                            result={result}
+                            index={idx}
+                            isSelected={idx === selectedRecordIndex}
+                            onSelect={() => onRecordSelect?.(idx)}
+                        />
+                    ))}
+                </EuiFlexGroup>
+            </EuiPanel>
+            <WfoSubscriptionDetailModal
+                isVisible={!!modalData}
+                onClose={handleCloseModal}
+                subscriptionData={modalData?.subscription}
+                matchingField={modalData?.matchingField}
+            />
+        </>
+    );
+};

package/src/components/WfoSearchPage/WfoSearchResults/WfoSubscriptionDetailModal.tsx

@@ -0,0 +1,55 @@
+import React, { FC } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import {
+    EuiButton,
+    EuiModal,
+    EuiModalBody,
+    EuiModalFooter,
+    EuiModalHeader,
+    EuiModalHeaderTitle,
+} from '@elastic/eui';
+
+import { WfoSubscription } from '@/components';
+import { TreeProvider } from '@/contexts';
+
+interface WfoSubscriptionDetailModalProps {
+    isVisible: boolean;
+    onClose: () => void;
+    subscriptionData: unknown | null;
+    matchingField?: unknown;
+}
+
+export const WfoSubscriptionDetailModal: FC<
+    WfoSubscriptionDetailModalProps
+> = ({ isVisible, onClose, subscriptionData }) => {
+    const t = useTranslations('search.page');
+    if (!isVisible || !subscriptionData) return null;
+
+    const subscriptionId =
+        subscriptionData &&
+        (subscriptionData as { subscription_id: string }).subscription_id;
+
+    return (
+        <EuiModal onClose={onClose} maxWidth={800}>
+            <EuiModalHeader>
+                <EuiModalHeaderTitle>
+                    {t('subscriptionDetails')}
+                </EuiModalHeaderTitle>
+            </EuiModalHeader>
+
+            <EuiModalBody>
+                <TreeProvider>
+                    <WfoSubscription subscriptionId={subscriptionId} />
+                </TreeProvider>
+            </EuiModalBody>
+
+            <EuiModalFooter>
+                <EuiButton onClick={onClose} fill>
+                    {t('closeButton')}
+                </EuiButton>
+            </EuiModalFooter>
+        </EuiModal>
+    );
+};

package/src/components/WfoSearchPage/WfoSearchResults/index.ts

@@ -0,0 +1,10 @@
+export * from './WfoSearchResults';
+
+export * from './WfoSearchResultItem';
+export * from './WfoSearchEmptyState';
+export * from './WfoSearchLoadingState';
+export * from './WfoSearchMetadataHeader';
+export * from './WfoSearchPaginationInfo';
+export * from './WfoHighlightedText';
+export * from './WfoPathBreadcrumb';
+export * from './WfoSubscriptionDetailModal';