@orchestrator-ui/orchestrator-ui-components 6.8.0 → 7.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "6.8.0",
+    "version": "7.0.1",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -54,16 +54,13 @@
         "next-query-params": "^5.0.0",
         "object-hash": "^3.0.0",
         "prism-themes": "^1.9.0",
-        "pydantic-forms": "^0.10.2",
+        "pydantic-forms": "^1.0.0",
         "react-diff-view": "^3.2.0",
         "react-draggable": "^4.4.6",
         "react-redux": "^9.1.2",
         "react-select": "^5.8.0",
         "scroll-into-view": "^1.16.2",
         "unidiff": "^1.0.4",
-        "uniforms": "^3.8.1",
-        "uniforms-bridge-json-schema": "^3.8.1",
-        "uniforms-unstyled": "^3.8.1",
         "use-query-params": "2.2.1"
     },
     "devDependencies": {
@@ -82,11 +79,10 @@
         "jest-environment-jsdom": "^30.2.0",
         "jest-watch-typeahead": "^3.0.1",
         "tsup": "^8.5.0",
-        "typescript": "^5.5.2",
-        "uniforms-bridge-simple-schema-2": "^3.8.1"
+        "typescript": "^5.5.2"
     },
     "peerDependencies": {
-        "next": "^15.5.7",
+        "next": "^15.5.9",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },

package/src/components/WfoPydanticForm/Footer.tsx

@@ -3,7 +3,7 @@
  *
  * Form footer component
  */
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 
 import { useTranslations } from 'next-intl';
 import type { PydanticFormFooterProps } from 'pydantic-forms';
@@ -21,6 +21,10 @@ type FooterProps = PydanticFormFooterProps & {
     isTask?: boolean;
 };
 
+const submitButtonId = 'button-submit-form-submit';
+const previousButtonId = 'button-submit-form-previous';
+const cancelButtonId = 'button-submit-form-cancel';
+
 export const Footer = ({
     onCancel,
     onPrevious,
@@ -44,6 +48,29 @@ export const Footer = ({
 
     const { next, previous } = buttons || {};
 
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            const isPrimary = event.metaKey || event.ctrlKey;
+
+            if (isPrimary && event.key === 'ArrowLeft') {
+                event.preventDefault();
+
+                if (hasPrevious) {
+                    onPrevious?.();
+                } else {
+                    handlePrevious();
+                }
+            }
+
+            if (isPrimary && event.key === 'ArrowRight') {
+                event.preventDefault();
+                document.getElementById(submitButtonId)?.click();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [hasPrevious, hasNext, onPrevious, onCancel, handlePrevious]);
+
     const PreviousButton = () => {
         const previousButtonColor =
             theme.colors[
@@ -53,8 +80,8 @@ export const Footer = ({
 
         return (
             <EuiButton
-                data-testid="button-submit-form-previous"
-                id="button-submit-form-submit"
+                data-testid={previousButtonId}
+                id={previousButtonId}
                 tabIndex={0}
                 fill
                 onClick={() => {
@@ -76,7 +103,7 @@ export const Footer = ({
 
     const CancelButton = () => (
         <div
-            data-testid="button-submit-form-cancel"
+            data-testid={cancelButtonId}
             onClick={handlePrevious}
             css={{
                 cursor: 'pointer',
@@ -120,8 +147,8 @@ export const Footer = ({
 
         return (
             <EuiButton
-                data-testid="button-submit-form-submit"
-                id="button-submit-form-submit"
+                data-testid={submitButtonId}
+                id={submitButtonId}
                 tabIndex={0}
                 fill
                 css={{

package/src/components/WfoPydanticForm/RenderFormErrors.tsx

@@ -8,9 +8,10 @@ import React from 'react';
 import { useTranslations } from 'next-intl';
 import { useGetValidationErrors } from 'pydantic-forms';
 
-import { getCommonFormFieldStyles } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
 
+import { getCommonFormFieldStyles } from './fields/styles';
+
 export const RenderFormErrors = () => {
     const { errorStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
 

package/src/components/WfoPydanticForm/Row.tsx

@@ -4,9 +4,11 @@ import type { RowRenderComponent } from 'pydantic-forms';
 
 import { EuiFormRow, EuiText } from '@elastic/eui';
 
-import { getCommonFormFieldStyles, getDataTestId } from '@/components';
+import { getDataTestId } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
 
+import { getCommonFormFieldStyles } from './fields/styles';
+
 export const Row: RowRenderComponent = ({
     title,
     description,

package/src/components/WfoPydanticForm/fields/WfoInteger.tsx

@@ -47,7 +47,11 @@ export const WfoInteger: PydanticFormControlledElement = ({
             data-testid={pydanticFormField.id}
             css={formFieldBaseStyle}
             name={pydanticFormField.id}
-            onChange={(event) => onChange(parseInt(event.target.value))}
+            onChange={(event) =>
+                onChange(
+                    event.target.value ? parseInt(event.target.value) : null,
+                )
+            }
             value={fieldValue}
             disabled={disabled}
         />

package/src/components/WfoPydanticForm/fields/WfoSummary.tsx

@@ -5,14 +5,12 @@ import type { PydanticFormElement } from 'pydantic-forms';
 
 import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
 
-import {
-    getCommonFormFieldStyles,
-    getNestedSummaryLabel,
-    summaryFieldStyles,
-} from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { snakeToHuman } from '@/utils';
 
+import { getCommonFormFieldStyles, summaryFieldStyles } from './styles';
+import { getNestedSummaryLabel } from './wfoPydanticFormUtils';
+
 export const WfoSummary: PydanticFormElement = ({ pydanticFormField }) => {
     const { summaryFieldStyle } = useWithOrchestratorTheme(summaryFieldStyles);
     const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);

package/src/components/WfoPydanticForm/fields/styles.ts

@@ -1,5 +1,7 @@
 import { css } from '@emotion/react';
 
+import type { WfoTheme } from '@/hooks';
+
 export const getWfoObjectFieldStyles = () => {
     const wfoObjectFieldStyles = css({
         width: '100%',
@@ -11,3 +13,73 @@ export const getWfoObjectFieldStyles = () => {
         wfoObjectFieldStyles,
     };
 };
+
+export const getCommonFormFieldStyles = ({ theme }: WfoTheme) => {
+    const formRowStyle = css({
+        marginBottom: theme.base * 2,
+
+        '.euiText': {
+            color: theme.colors.text,
+        },
+        '.euiFormLabel': {
+            color: theme.colors.text,
+            cursor: 'text',
+            '&.euiFormLabel-isFocused': {
+                color: theme.colors.primaryText,
+            },
+        },
+        '.euiFormRow__labelWrapper': {
+            display: 'flex',
+            flexDirection: 'column',
+        },
+    });
+
+    const errorStyle = css({
+        color: theme.colors.dangerText,
+    });
+    return {
+        errorStyle,
+        formRowStyle,
+    };
+};
+
+export const summaryFieldStyles = ({ theme }: WfoTheme) => {
+    const summaryFieldStyle = css({
+        'div.emailMessage': {
+            td: {
+                color: theme.colors.textParagraph,
+            },
+            p: {
+                color: theme.colors.textParagraph,
+            },
+            html: {
+                marginLeft: '-10px',
+            },
+        },
+        'section.table-summary': {
+            marginTop: '20px',
+            width: '100%',
+            td: {
+                padding: '10px',
+                verticalAlign: 'top',
+            },
+            'td:not(:first-child):not(:last-child)': {
+                borderRight: `1px solid ${theme.colors.borderBasePlain}`,
+            },
+            '.label': {
+                fontWeight: 'bold',
+                color: theme.colors.backgroundBaseSubdued,
+                backgroundColor: theme.colors.primary,
+                borderRight: `2px solid ${theme.colors.borderBasePlain}`,
+                borderBottom: `1px solid ${theme.colors.borderBasePlain}`,
+            },
+            '.value': {
+                backgroundColor: theme.colors.backgroundBasePrimary,
+                borderBottom: `1px solid ${theme.colors.borderBasePlain}`,
+            },
+        },
+    });
+    return {
+        summaryFieldStyle: summaryFieldStyle,
+    };
+};

package/src/components/WfoSearchPage/WfoSearch/WfoSearch.tsx

@@ -9,6 +9,7 @@ import {
     EuiFlexGroup,
     EuiFlexItem,
     EuiPanel,
+    EuiSelect,
     EuiSpacer,
     EuiTab,
     EuiTabs,
@@ -17,19 +18,14 @@ import {
 
 import { WfoSubscription } from '@/components';
 import { WfoAvailabilityCheck } from '@/components/WfoAvailabilityCheck';
-import { WfoBadge } from '@/components/WfoBadges';
-import {
-    ENTITY_TABS,
-    isSubscriptionSearchResult,
-} from '@/components/WfoSearchPage/utils';
+import { ENTITY_TABS } from '@/components/WfoSearchPage/utils';
 import { TreeProvider } from '@/contexts';
-import { useOrchestratorTheme } from '@/hooks';
 import { useSearchAvailability } from '@/hooks/useBackendAvailability';
 import { useDebounce } from '@/hooks/useDebounce';
 import { useSearch } from '@/hooks/useSearch';
 import { useSearchPagination } from '@/hooks/useSearchPagination';
 import { useUrlParams } from '@/hooks/useUrlParams';
-import { EntityKind, Group } from '@/types';
+import { EntityKind, Group, RetrieverType } from '@/types';
 
 import { FilterGroup } from '../WfoFilterGroup';
 import { WfoSearchResults } from '../WfoSearchResults';
@@ -44,7 +40,6 @@ import {
 
 export const WfoSearch = () => {
     const t = useTranslations('search.page');
-    const { theme } = useOrchestratorTheme();
     const searchAvailability = useSearchAvailability();
 
     const {
@@ -69,6 +64,9 @@ export const WfoSearch = () => {
     });
 
     const [showDetailPanel, setShowDetailPanel] = useState<boolean>(false);
+    const [retrieverType, setRetrieverType] = useState<RetrieverType>(
+        RetrieverType.Auto,
+    );
 
     const debouncedQuery = useDebounce(query, DEFAULT_DEBOUNCE_DELAY);
     const { results, loading, setResults } = useSearch(
@@ -76,6 +74,7 @@ export const WfoSearch = () => {
         selectedEntityTab,
         filterGroup,
         pageSize,
+        retrieverType,
     );
 
     const [hasSearchBeenAttempted, setHasSearchBeenAttempted] = useState(false);
@@ -109,6 +108,7 @@ export const WfoSearch = () => {
         pageSize,
         results,
         setResults,
+        retrieverType,
     );
 
     const [searchValue, setSearchValue] = useState(() => {
@@ -195,9 +195,11 @@ export const WfoSearch = () => {
 
     useEffect(() => {
         setShowDetailPanel(
-            results?.data?.length > 0 && selectedRecordIndex >= 0,
+            results?.data?.length > 0 &&
+                selectedRecordIndex >= 0 &&
+                selectedEntityTab === 'SUBSCRIPTION',
         );
-    }, [results?.data?.length, selectedRecordIndex]);
+    }, [results?.data?.length, selectedRecordIndex, selectedEntityTab]);
 
     useEffect(() => {
         resetPagination();
@@ -250,6 +252,35 @@ export const WfoSearch = () => {
                         {showFilters ? t('hideFilters') : t('showFilters')}
                     </EuiButton>
                 </EuiFlexItem>
+                <EuiFlexItem grow={true} />
+                <EuiFlexItem grow={false}>
+                    <EuiSelect
+                        options={[
+                            {
+                                value: RetrieverType.Auto,
+                                text: t('retrieverAuto'),
+                            },
+                            {
+                                value: RetrieverType.Fuzzy,
+                                text: t('retrieverFuzzy'),
+                            },
+                            {
+                                value: RetrieverType.Semantic,
+                                text: t('retrieverSemantic'),
+                            },
+                            {
+                                value: RetrieverType.Hybrid,
+                                text: t('retrieverHybrid'),
+                            },
+                        ]}
+                        value={retrieverType}
+                        onChange={(e) =>
+                            setRetrieverType(e.target.value as RetrieverType)
+                        }
+                        compressed
+                        prepend={t('retrieval')}
+                    />
+                </EuiFlexItem>
             </EuiFlexGroup>
 
             {showFilters && (
@@ -389,11 +420,7 @@ export const WfoSearch = () => {
                                     hasShadow={false}
                                     color="transparent"
                                 >
-                                    {selectedEntityTab === 'SUBSCRIPTION' &&
-                                    results.data[selectedRecordIndex] &&
-                                    isSubscriptionSearchResult(
-                                        results.data[selectedRecordIndex],
-                                    ) ? (
+                                    {results.data[selectedRecordIndex] && (
                                         <TreeProvider>
                                             <WfoSubscription
                                                 subscriptionId={
@@ -403,45 +430,6 @@ export const WfoSearch = () => {
                                                 }
                                             />
                                         </TreeProvider>
-                                    ) : (
-                                        <>
-                                            <EuiText>
-                                                <h4>{t('details')}</h4>
-                                            </EuiText>
-                                            <EuiSpacer size="m" />
-                                            <EuiText
-                                                color={theme.colors.textSubdued}
-                                            >
-                                                <p>
-                                                    {t(
-                                                        'showingDetailsForResult',
-                                                        {
-                                                            resultNumber:
-                                                                selectedRecordIndex +
-                                                                1,
-                                                        },
-                                                    )}
-                                                </p>
-                                                <EuiSpacer size="s" />
-                                                <WfoBadge
-                                                    color={theme.colors.primary}
-                                                    textColor={
-                                                        theme.colors.ghost
-                                                    }
-                                                >
-                                                    {selectedEntityTab} #
-                                                    {selectedRecordIndex + 1}
-                                                </WfoBadge>
-                                                <EuiSpacer size="m" />
-                                                <p>
-                                                    <em>
-                                                        {t(
-                                                            'selectResultInstruction',
-                                                        )}
-                                                    </em>
-                                                </p>
-                                            </EuiText>
-                                        </>
                                     )}
                                 </EuiPanel>
                             </EuiFlexItem>

package/src/components/WfoSearchPage/utils.ts

@@ -1,4 +1,10 @@
-import { Condition, EntityKind, Group, SearchResult } from '@/types';
+import {
+    Condition,
+    EntityKind,
+    Group,
+    RetrieverType,
+    SearchResult,
+} from '@/types';
 
 export function isSubscriptionSearchResult(item: SearchResult): boolean {
     return item.entity_type === 'SUBSCRIPTION';
@@ -155,6 +161,7 @@ export const buildSearchParams = (
     selectedEntityTab: EntityKind,
     filterGroup: Group,
     pageSize: number,
+    retriever?: Exclude<RetrieverType, 'auto'>,
 ) => {
     const queryText =
         typeof debouncedQuery === 'string'
@@ -167,5 +174,6 @@ export const buildSearchParams = (
         query: queryText || '',
         filters: filterGroup?.children.length > 0 ? filterGroup : undefined,
         limit: pageSize,
+        retriever,
     };
 };

package/src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx

@@ -9,16 +9,10 @@ import {
     WfoMonacoCodeBlock,
     WfoTableCodeBlock,
 } from '@/components';
-import { WfoStepFormOld } from '@/components/WfoWorkflowSteps/WfoStep/WfoStepFormOld';
-import {
-    useGetOrchestratorConfig,
-    useOrchestratorTheme,
-    useWithOrchestratorTheme,
-} from '@/hooks';
+import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { WfoChevronDown, WfoChevronUp } from '@/icons';
-import type { EmailState } from '@/types';
+import type { EmailState, FormUserPermissions } from '@/types';
 import { StepStatus } from '@/types';
-import { FormUserPermissions } from '@/types/forms';
 import { calculateTimeDifference, formatDate } from '@/utils';
 
 import { WfoStepStatusIcon } from '../WfoStepStatusIcon';
@@ -55,8 +49,6 @@ export const WfoStep = React.forwardRef(
         }: WfoStepProps,
         ref: LegacyRef<HTMLDivElement>,
     ) => {
-        const config = useGetOrchestratorConfig();
-        const usePydanticForms: boolean = config.activatePydanticForms ?? false;
         const { isExpanded, step, userInputForm } = stepListItem;
         const [codeView, setCodeView] = useState<CodeView>(CodeView.JSON);
 
@@ -213,23 +205,14 @@ export const WfoStep = React.forwardRef(
                             )}
                         </div>
                     )}
-                    {step.status === StepStatus.SUSPEND &&
-                        userInputForm &&
-                        (usePydanticForms ? (
-                            <WfoStepForm
-                                userInputForm={userInputForm}
-                                isTask={isTask}
-                                processId={processId ?? ''}
-                                userPermissions={userPermissions}
-                            />
-                        ) : (
-                            <WfoStepFormOld
-                                userInputForm={userInputForm}
-                                isTask={isTask}
-                                processId={processId}
-                                userPermissions={userPermissions}
-                            />
-                        ))}
+                    {step.status === StepStatus.SUSPEND && userInputForm && (
+                        <WfoStepForm
+                            userInputForm={userInputForm}
+                            isTask={isTask}
+                            processId={processId ?? ''}
+                            userPermissions={userPermissions}
+                        />
+                    )}
                 </EuiPanel>
             </div>
         );

package/src/components/WfoWorkflowSteps/WfoStep/WfoStepForm.tsx

@@ -9,7 +9,7 @@ import { StepFormFooter } from '@/components/WfoWorkflowSteps/WfoStep/WfoStepFor
 import { useOrchestratorTheme } from '@/hooks';
 import { HttpStatus } from '@/rtk';
 import { useResumeProcessMutation } from '@/rtk/endpoints/forms';
-import { FormUserPermissions, InputForm } from '@/types/forms';
+import { FormUserPermissions, InputForm } from '@/types';
 
 interface WfoStepFormProps {
     userInputForm: InputForm;

package/src/components/index.ts

@@ -14,7 +14,6 @@ export * from './WfoTable';
 export * from './WfoTimeline';
 export * from './WfoLoading';
 export * from './WfoToastsList';
-export * from './WfoForms';
 export * from './WfoDateTime';
 export * from './WfoAuth';
 export * from './WfoDropdownButton';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '6.8.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '7.0.1';

package/src/contexts/OrchestratorConfigContext.tsx

@@ -18,7 +18,6 @@ export const emptyOrchestratorConfig: OrchestratorConfig = {
     supportMenuItemUrl: '',
     enableAoStackStatus: false,
     aoStackStatusUrl: '',
-    activatePydanticForms: false,
 };
 
 export const OrchestratorConfigContext = createContext<OrchestratorConfig>(

package/src/hooks/useSearch.ts

@@ -3,13 +3,19 @@ import { useEffect, useState } from 'react';
 import { Query } from '@elastic/eui';
 
 import { useSearchMutation } from '@/rtk/endpoints';
-import { EntityKind, Group, PaginatedSearchResults } from '@/types';
+import {
+    EntityKind,
+    Group,
+    PaginatedSearchResults,
+    RetrieverType,
+} from '@/types';
 
 export const useSearch = (
     query: Query | string,
     entityType: EntityKind,
     filterGroup?: Group,
     limit?: number,
+    retriever: RetrieverType = RetrieverType.Auto,
 ) => {
     const [results, setResults] = useState<PaginatedSearchResults>({
         data: [],
@@ -44,6 +50,10 @@ export const useSearch = (
                             ? filterGroup
                             : undefined,
                     limit: limit,
+                    retriever:
+                        retriever === RetrieverType.Auto
+                            ? undefined
+                            : retriever,
                 }).unwrap();
 
                 setResults({
@@ -71,7 +81,7 @@ export const useSearch = (
         };
 
         performSearch();
-    }, [query, entityType, filterGroup, limit, triggerSearch]);
+    }, [query, entityType, filterGroup, limit, retriever, triggerSearch]);
 
     return {
         results,

package/src/hooks/useSearchPagination.ts

@@ -8,6 +8,7 @@ import {
     EntityKind,
     Group,
     PaginatedSearchResults,
+    RetrieverType,
     SearchResult,
 } from '@/types';
 
@@ -35,6 +36,7 @@ export const useSearchPagination = (
     pageSize: number,
     results: PaginatedSearchResults,
     setResults: (results: PaginatedSearchResults) => void,
+    retriever?: RetrieverType,
 ): UseSearchPaginationReturn => {
     const [currentPage, setCurrentPage] = useState<number>(1);
     const [pageHistory, setPageHistory] = useState<PageHistoryItem[]>([]);
@@ -65,6 +67,7 @@ export const useSearchPagination = (
                     selectedEntityTab,
                     filterGroup,
                     pageSize,
+                    retriever === RetrieverType.Auto ? undefined : retriever,
                 );
 
                 const res = await triggerSearchPagination({
@@ -105,6 +108,7 @@ export const useSearchPagination = (
             selectedEntityTab,
             filterGroup,
             pageSize,
+            retriever,
             setResults,
             triggerSearchPagination,
         ],

package/src/messages/en-GB.json

@@ -562,10 +562,12 @@
             "hideFilters": "Hide filters",
             "showFilters": "Show filters",
             "structuredFilters": "Structured filters",
+            "retrieval": "Retrieval",
+            "retrieverAuto": "Auto",
+            "retrieverFuzzy": "Fuzzy",
+            "retrieverSemantic": "Semantic",
+            "retrieverHybrid": "Hybrid",
             "searchError": "Error",
-            "selectResultInstruction": "Detail content will be implemented here...",
-            "showingDetailsForResult": "Showing details for result #{resultNumber}",
-            "details": "Details",
             "dismiss": "Dismiss",
             "searchPlaceholder": "Search for {entityType}…",
             "noResults": "No Results",