Misc bug fixes and minor UX improvements III (#483)

* catch edge case NPEs on response parsing Signed-off-by: Tyler Ohlsen <[email protected]> * fix syntax Signed-off-by: Tyler Ohlsen <[email protected]> * Update button icons - fnf Signed-off-by: Tyler Ohlsen <[email protected]> * Change visual/json toggling to button group Signed-off-by: Tyler Ohlsen <[email protected]> * update resources empty prompt Signed-off-by: Tyler Ohlsen <[email protected]> * update errors empty prompt Signed-off-by: Tyler Ohlsen <[email protected]> --------- Signed-off-by: Tyler Ohlsen <[email protected]>
opensearch-project · Nov 19, 2024 · ebc01eb · ebc01eb
1 parent a810861
commit ebc01eb
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 52 deletions.
diff --git 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) ? (
-        <EuiText size="s">There are no errors.</EuiText>
+        <EuiEmptyPrompt title={<h2>No errors</h2>} titleSize="s" />
       ) : (
         <EuiCodeBlock fontSize="m" isCopyable={false}>
           {props.errorMessage}

diff --git 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) {
         </>
       ) : (
         <EuiEmptyPrompt
-          iconType={'cross'}
           title={<h2>No resources available</h2>}
           titleSize="s"
           body={
             <>
               <EuiText size="s">
-                Provision the workflow to generate resources in order to start
-                prototyping.
+                Run the pipeline to generate resources.
               </EuiText>
             </>
           }

diff --git 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
@@ -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/.../pages/workflow_detail/workflow_inputs/processor_inputs/modals/configure_prompt_modal.tsx b/.../pages/workflow_detail/workflow_inputs/processor_inputs/modals/configure_prompt_modal.tsx
@@ -106,6 +106,8 @@ export function ConfigurePromptModal(props: ConfigurePromptModalProps) {
                 button={
                   <EuiSmallButton
                     onClick={() => setPresetsPopoverOpen(!presetsPopoverOpen)}
+                    iconSide="right"
+                    iconType="arrowDown"
                   >
                     Choose from a preset
                   </EuiSmallButton>

diff --git a/...c/pages/workflow_detail/workflow_inputs/processor_inputs/modals/input_transform_modal.tsx b/...c/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/.../pages/workflow_detail/workflow_inputs/processor_inputs/modals/output_transform_modal.tsx b/.../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/...ic/pages/workflow_detail/workflow_inputs/processor_inputs/modals/override_query_modal.tsx b/...ic/pages/workflow_detail/workflow_inputs/processor_inputs/modals/override_query_modal.tsx
@@ -103,6 +103,8 @@ export function OverrideQueryModal(props: OverrideQueryModalProps) {
                 button={
                   <EuiSmallButton
                     onClick={() => setPresetsPopoverOpen(!presetsPopoverOpen)}
+                    iconSide="right"
+                    iconType="arrowDown"
                   >
                     Choose from a preset
                   </EuiSmallButton>

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
@@ -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
@@ -106,6 +106,8 @@ export function EditQueryModal(props: EditQueryModalProps) {
                   <EuiSmallButton
                     onClick={() => setPopoverOpen(!popoverOpen)}
                     data-testid="searchQueryPresetButton"
+                    iconSide="right"
+                    iconType="arrowDown"
                   >
                     Choose from a preset
                   </EuiSmallButton>

diff --git 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`}
                       </EuiSmallButton>
                     </EuiFlexItem>
                   ) : onIngest ? (
@@ -754,8 +756,10 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                           }}
                           data-testid="searchPipelineButton"
                           disabled={ingestToSearchButtonDisabled}
+                          iconSide="right"
+                          iconType="arrowRight"
                         >
-                          {`Search pipeline >`}
+                          {`Search pipeline`}
                         </EuiSmallButton>
                       </EuiFlexItem>
                     </>
@@ -768,8 +772,10 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                             props.setSelectedStep(CONFIG_STEP.INGEST)
                           }
                           data-testid="searchPipelineBackButton"
+                          iconSide="left"
+                          iconType="arrowLeft"
                         >
-                          Back
+                          Ingest pipeline
                         </EuiSmallButtonEmpty>
                       </EuiFlexItem>
                       <EuiFlexItem grow={false}>

diff --git 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<boolean>(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<string>('');
@@ -131,27 +144,18 @@ export function Workspace(props: WorkspaceProps) {
               </EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiFilterGroup>
-                <EuiFilterButton
-                  size="s"
-                  hasActiveFilters={visualSelected}
-                  onClick={() => toggleSelection()}
-                  data-testid="workspaceVisualButton"
-                >
-                  Visual
-                </EuiFilterButton>
-                <EuiFilterButton
-                  size="s"
-                  hasActiveFilters={!visualSelected}
-                  onClick={() => toggleSelection()}
-                  data-testid="workspaceJSONButton"
-                >
-                  JSON
-                </EuiFilterButton>
-              </EuiFilterGroup>
+              <EuiSmallButtonGroup
+                legend="Toggle between visual and JSON views"
+                options={toggleButtons}
+                idSelected={toggleButtonSelected}
+                onChange={(id) =>
+                  setToggleButtonSelected(id as TOGGLE_BUTTON_ID)
+                }
+                data-testid="visualJSONToggleButtonGroup"
+              />
             </EuiFlexItem>
             <EuiFlexItem grow={false} style={{ paddingTop: '8px' }}>
-              {visualSelected ? (
+              {toggleButtonSelected === TOGGLE_BUTTON_ID.VISUAL ? (
                 <EuiText size="s">
                   {`A basic visual view representing the configured ingest & search flows.`}
                 </EuiText>
@@ -168,7 +172,7 @@ export function Workspace(props: WorkspaceProps) {
         </div>
         <div className="reactflow-parent-wrapper">
           <div className="reactflow-wrapper" ref={reactFlowWrapper}>
-            {visualSelected ? (
+            {toggleButtonSelected === TOGGLE_BUTTON_ID.VISUAL ? (
               <ReactFlow
                 id="workspace"
                 nodes={nodes}