diff --git a/public/pages/workflow_detail/tools/errors/errors.tsx b/public/pages/workflow_detail/tools/errors/errors.tsx index a1ca60d5..bb78a355 100644 --- a/public/pages/workflow_detail/tools/errors/errors.tsx +++ b/public/pages/workflow_detail/tools/errors/errors.tsx @@ -4,7 +4,7 @@ */ import React from 'react'; -import { EuiCodeBlock, EuiText } from '@elastic/eui'; +import { EuiCodeBlock, EuiEmptyPrompt } from '@elastic/eui'; import { isEmpty } from 'lodash'; interface ErrorsProps { @@ -19,7 +19,7 @@ export function Errors(props: ErrorsProps) { return ( <> {isEmpty(props.errorMessage) ? ( - There are no errors. + No errors} titleSize="s" /> ) : ( {props.errorMessage} diff --git a/public/pages/workflow_detail/tools/resources/resources.tsx b/public/pages/workflow_detail/tools/resources/resources.tsx index 7ad2e80e..fb844302 100644 --- a/public/pages/workflow_detail/tools/resources/resources.tsx +++ b/public/pages/workflow_detail/tools/resources/resources.tsx @@ -35,14 +35,12 @@ export function Resources(props: ResourcesProps) { > ) : ( No resources available} titleSize="s" body={ <> - Provision the workflow to generate resources in order to start - prototyping. + Run the pipeline to generate resources. > } diff --git a/public/pages/workflow_detail/workflow_detail.test.tsx b/public/pages/workflow_detail/workflow_detail.test.tsx index 679c3dbb..ddb9f3fe 100644 --- a/public/pages/workflow_detail/workflow_detail.test.tsx +++ b/public/pages/workflow_detail/workflow_detail.test.tsx @@ -126,18 +126,8 @@ describe('WorkflowDetail Page Functionality (Custom Workflow)', () => { // Close the export component userEvent.click(getByTestId('exportCloseButton')); - // Check workspace buttons (Visual and JSON) - const visualButton = getByTestId('workspaceVisualButton'); - await waitFor(() => { - expect(visualButton).toBeVisible(); - }); - expect(visualButton).toHaveClass('euiFilterButton-hasActiveFilters'); - const jsonButton = getByTestId('workspaceJSONButton'); - expect(jsonButton).toBeVisible(); - userEvent.click(jsonButton); - await waitFor(() => { - expect(jsonButton).toHaveClass('euiFilterButton-hasActiveFilters'); - }); + // Check workspace button group exists (Visual and JSON) + getByTestId('visualJSONToggleButtonGroup'); // Tools panel should collapse and expand on toggle const toolsPanel = container.querySelector('#tools_panel_id'); diff --git a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data_modal.tsx b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data_modal.tsx index 2f74402e..54ba6e33 100644 --- a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data_modal.tsx +++ b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data_modal.tsx @@ -175,7 +175,7 @@ export function SourceDataModal(props: SourceDataProps) { ) .unwrap() .then((resp) => { - const docObjs = resp.hits?.hits + const docObjs = resp?.hits?.hits ?.slice(0, 5) ?.map((hit: SearchHit) => hit?._source); formikProps.setFieldValue('docs', customStringify(docObjs)); diff --git a/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/configure_prompt_modal.tsx b/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/configure_prompt_modal.tsx index 82f9d6cc..12dc9ca1 100644 --- a/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/configure_prompt_modal.tsx +++ b/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/configure_prompt_modal.tsx @@ -106,6 +106,8 @@ export function ConfigurePromptModal(props: ConfigurePromptModalProps) { button={ setPresetsPopoverOpen(!presetsPopoverOpen)} + iconSide="right" + iconType="arrowDown" > Choose from a preset diff --git a/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/input_transform_modal.tsx b/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/input_transform_modal.tsx index 50fec356..b135caea 100644 --- a/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/input_transform_modal.tsx +++ b/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/input_transform_modal.tsx @@ -451,8 +451,8 @@ export function InputTransformModal(props: InputTransformModalProps) { ) .unwrap() .then(async (resp) => { - const hits = resp.hits.hits - .map((hit: SearchHit) => hit._source) + const hits = resp?.hits?.hits + ?.map((hit: SearchHit) => hit._source) .slice(0, MAX_INPUT_DOCS); if (hits.length > 0) { setSourceInput( diff --git a/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/output_transform_modal.tsx b/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/output_transform_modal.tsx index 94e2e2d0..7d9b7c41 100644 --- a/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/output_transform_modal.tsx +++ b/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/output_transform_modal.tsx @@ -367,7 +367,7 @@ export function OutputTransformModal(props: OutputTransformModalProps) { ) .unwrap() .then(async (resp) => { - const hits = resp.hits.hits.map( + const hits = resp?.hits?.hits?.map( (hit: SearchHit) => hit._source ) as any[]; if (hits.length > 0) { diff --git a/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/override_query_modal.tsx b/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/override_query_modal.tsx index 561ff8ee..57a1d001 100644 --- a/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/override_query_modal.tsx +++ b/public/pages/workflow_detail/workflow_inputs/processor_inputs/modals/override_query_modal.tsx @@ -103,6 +103,8 @@ export function OverrideQueryModal(props: OverrideQueryModalProps) { button={ setPresetsPopoverOpen(!presetsPopoverOpen)} + iconSide="right" + iconType="arrowDown" > Choose from a preset diff --git a/public/pages/workflow_detail/workflow_inputs/search_inputs/configure_search_request.tsx b/public/pages/workflow_detail/workflow_inputs/search_inputs/configure_search_request.tsx index b71e988e..04fbaee4 100644 --- a/public/pages/workflow_detail/workflow_inputs/search_inputs/configure_search_request.tsx +++ b/public/pages/workflow_detail/workflow_inputs/search_inputs/configure_search_request.tsx @@ -152,7 +152,7 @@ export function ConfigureSearchRequest(props: ConfigureSearchRequestProps) { .then(async (resp) => { props.setQueryResponse( customStringify( - resp.hits.hits.map( + resp?.hits?.hits?.map( (hit: SearchHit) => hit._source ) ) diff --git a/public/pages/workflow_detail/workflow_inputs/search_inputs/edit_query_modal.tsx b/public/pages/workflow_detail/workflow_inputs/search_inputs/edit_query_modal.tsx index 444f8c97..d6db7816 100644 --- a/public/pages/workflow_detail/workflow_inputs/search_inputs/edit_query_modal.tsx +++ b/public/pages/workflow_detail/workflow_inputs/search_inputs/edit_query_modal.tsx @@ -106,6 +106,8 @@ export function EditQueryModal(props: EditQueryModalProps) { setPopoverOpen(!popoverOpen)} data-testid="searchQueryPresetButton" + iconSide="right" + iconType="arrowDown" > Choose from a preset diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx index 7f50395c..109876e8 100644 --- a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx +++ b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx @@ -530,7 +530,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) { .then(async (resp) => { props.setQueryResponse( customStringify( - resp.hits.hits.map((hit: SearchHit) => hit._source) + resp?.hits?.hits?.map((hit: SearchHit) => hit._source) ) ); }) @@ -727,8 +727,10 @@ export function WorkflowInputs(props: WorkflowInputsProps) { props.setSelectedStep(CONFIG_STEP.SEARCH); }} data-testid="searchPipelineButton" + iconSide="right" + iconType="arrowRight" > - {`Search pipeline >`} + {`Search pipeline`} ) : onIngest ? ( @@ -754,8 +756,10 @@ export function WorkflowInputs(props: WorkflowInputsProps) { }} data-testid="searchPipelineButton" disabled={ingestToSearchButtonDisabled} + iconSide="right" + iconType="arrowRight" > - {`Search pipeline >`} + {`Search pipeline`} > @@ -768,8 +772,10 @@ export function WorkflowInputs(props: WorkflowInputsProps) { props.setSelectedStep(CONFIG_STEP.INGEST) } data-testid="searchPipelineBackButton" + iconSide="left" + iconType="arrowLeft" > - Back + Ingest pipeline diff --git a/public/pages/workflow_detail/workspace/workspace.tsx b/public/pages/workflow_detail/workspace/workspace.tsx index 47b69d50..d9daf1d2 100644 --- a/public/pages/workflow_detail/workspace/workspace.tsx +++ b/public/pages/workflow_detail/workspace/workspace.tsx @@ -16,11 +16,10 @@ import ReactFlow, { import { EuiFlexItem, EuiFlexGroup, - EuiFilterGroup, - EuiFilterButton, EuiCodeEditor, EuiText, EuiLink, + EuiSmallButtonGroup, } from '@elastic/eui'; import { IComponentData, @@ -55,12 +54,26 @@ const nodeTypes = { }; const edgeTypes = { customEdge: DeletableEdge }; +enum TOGGLE_BUTTON_ID { + VISUAL = 'workspaceVisualButton', + JSON = 'workspaceJSONButton', +} + export function Workspace(props: WorkspaceProps) { // Visual/JSON toggle states - const [visualSelected, setVisualSelected] = useState(true); - function toggleSelection(): void { - setVisualSelected(!visualSelected); - } + const [toggleButtonSelected, setToggleButtonSelected] = useState< + TOGGLE_BUTTON_ID + >(TOGGLE_BUTTON_ID.VISUAL); + const toggleButtons = [ + { + id: `workspaceVisualButton`, + label: 'Visual', + }, + { + id: `workspaceJSONButton`, + label: 'JSON', + }, + ]; // JSON state const [provisionTemplate, setProvisionTemplate] = useState(''); @@ -131,27 +144,18 @@ export function Workspace(props: WorkspaceProps) { - - toggleSelection()} - data-testid="workspaceVisualButton" - > - Visual - - toggleSelection()} - data-testid="workspaceJSONButton" - > - JSON - - + + setToggleButtonSelected(id as TOGGLE_BUTTON_ID) + } + data-testid="visualJSONToggleButtonGroup" + /> - {visualSelected ? ( + {toggleButtonSelected === TOGGLE_BUTTON_ID.VISUAL ? ( {`A basic visual view representing the configured ingest & search flows.`} @@ -168,7 +172,7 @@ export function Workspace(props: WorkspaceProps) { - {visualSelected ? ( + {toggleButtonSelected === TOGGLE_BUTTON_ID.VISUAL ? (