From 17effb677c88244e0a7474b1499ee51a94c6c16a Mon Sep 17 00:00:00 2001
From: Tyler Ohlsen <ohltyler@amazon.com>
Date: Wed, 5 Jun 2024 12:41:20 -0700
Subject: [PATCH 1/4] Implement deprovision/update/provision fn for preparing
 ingest execution

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>
---
 .../ingest_inputs/ingest_data.tsx             |  49 +-----
 .../workflow_inputs/workflow_inputs.tsx       | 139 ++++++++++++------
 2 files changed, 97 insertions(+), 91 deletions(-)

diff --git a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_data.tsx b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_data.tsx
index d8259f1f..e961881b 100644
--- a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_data.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/ingest_data.tsx
@@ -18,36 +18,10 @@ interface IngestDataProps {
   onFormChange: () => void;
 }
 
-enum OPTION {
-  NEW = 'new',
-  EXISTING = 'existing',
-}
-
-const options = [
-  {
-    id: OPTION.NEW,
-    label: 'Create a new index',
-  },
-  {
-    id: OPTION.EXISTING,
-    label: 'Choose existing index',
-  },
-];
-
 /**
  * Input component for configuring the data ingest (the OpenSearch index)
  */
 export function IngestData(props: IngestDataProps) {
-  const [selectedOption, setSelectedOption] = useState<OPTION>(OPTION.NEW);
-
-  useEffect(() => {
-    const indexName =
-      props.workflow.ui_metadata?.config?.ingest?.index?.name?.value;
-    if (indexName) {
-      setSelectedOption(OPTION.EXISTING);
-    }
-  }, [props.workflow.ui_metadata?.config?.ingest?.index]);
-
   return (
     <EuiFlexGroup direction="column">
       <EuiFlexItem grow={false}>
@@ -56,24 +30,15 @@ export function IngestData(props: IngestDataProps) {
         </EuiTitle>
       </EuiFlexItem>
       <EuiFlexItem>
-        <EuiRadioGroup
-          options={options}
-          idSelected={selectedOption}
-          onChange={(optionId) => setSelectedOption(optionId as OPTION)}
+        <TextField
+          field={
+            props.workflow.ui_metadata?.config?.ingest?.index
+              ?.name as IConfigField
+          }
+          fieldPath={'ingest.index.name'}
+          onFormChange={props.onFormChange}
         />
       </EuiFlexItem>
-      <EuiFlexItem>
-        {selectedOption === OPTION.NEW ? (
-          <TextField
-            field={
-              props.workflow.ui_metadata?.config?.ingest?.index
-                ?.name as IConfigField
-            }
-            fieldPath={'ingest.index.name'}
-            onFormChange={props.onFormChange}
-          />
-        ) : null}
-      </EuiFlexItem>
     </EuiFlexGroup>
   );
 }
diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
index 0eddf53f..b0f8b7fc 100644
--- a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
@@ -22,7 +22,12 @@ import {
 } from '../../../../common';
 import { IngestInputs } from './ingest_inputs';
 import { SearchInputs } from './search_inputs';
-import { updateWorkflow, useAppDispatch } from '../../../store';
+import {
+  deprovisionWorkflow,
+  provisionWorkflow,
+  updateWorkflow,
+  useAppDispatch,
+} from '../../../store';
 import { formikToUiConfig, reduceToTemplate } from '../../../utils';
 import { configToTemplateFlows } from '../utils';
 
@@ -57,73 +62,109 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
   // we do not need/want to persist this in form state or in backend
   const [ingestDocs, setIngestDocs] = useState<{}[]>([]);
 
-  // Utility fn to update the workflow
-  function executeUpdate(updatedWorkflow: Workflow): void {
-    dispatch(
-      updateWorkflow({
-        workflowId: updatedWorkflow.id as string,
-        workflowTemplate: reduceToTemplate(updatedWorkflow),
-      })
-    )
+  // Utility fn to update the workflow, including any updated/new resources
+  // Eventually, should be able to use fine-grained provisioning to do a single API call
+  // instead of the currently-implemented deprovision -> update -> provision
+  async function updateWorkflowAndResources(
+    updatedWorkflow: Workflow
+  ): Promise<boolean> {
+    let success = false;
+    await dispatch(deprovisionWorkflow(updatedWorkflow.id as string))
       .unwrap()
-      .then((result) => {})
-      .catch((error: any) => {});
+      .then(async (result) => {
+        await dispatch(
+          updateWorkflow({
+            workflowId: updatedWorkflow.id as string,
+            workflowTemplate: reduceToTemplate(updatedWorkflow),
+          })
+        )
+          .unwrap()
+          .then(async (result) => {
+            await dispatch(provisionWorkflow(updatedWorkflow.id as string))
+              .unwrap()
+              .then((result) => {
+                success = true;
+              })
+              .catch((error: any) => {
+                console.error('Error provisioning updated workflow: ', error);
+              });
+          })
+          .catch((error: any) => {
+            console.error('Error updating workflow: ', error);
+          });
+      })
+      .catch((error: any) => {
+        console.error('Error deprovisioning workflow: ', error);
+      });
+    return success;
   }
 
   // Utility fn to validate the form and update the workflow if valid
-  function validateAndUpdateWorkflow(
+  async function validateAndUpdateWorkflow(
     formikProps: FormikProps<WorkflowFormValues>
-  ): void {
+  ): Promise<boolean> {
+    let success = false;
     // Submit the form to bubble up any errors.
     // Ideally we handle Promise accept/rejects with submitForm(), but there is
     // open issues for that - see https://github.com/jaredpalmer/formik/issues/2057
     // The workaround is to additionally execute validateForm() which will return any errors found.
     formikProps.submitForm();
-    formikProps.validateForm().then((validationResults: {}) => {
-      if (Object.keys(validationResults).length > 0) {
-        console.error('Form invalid');
-      } else {
-        const updatedConfig = formikToUiConfig(
-          formikProps.values,
-          props.workflow?.ui_metadata?.config as WorkflowConfig
-        );
-        const updatedWorkflow = {
-          ...props.workflow,
-          ui_metadata: {
-            ...props.workflow?.ui_metadata,
-            config: updatedConfig,
-          },
-          workflows: configToTemplateFlows(updatedConfig),
-        } as Workflow;
-        executeUpdate(updatedWorkflow);
-      }
-    });
+    await formikProps
+      .validateForm()
+      .then(async (validationResults: {}) => {
+        if (Object.keys(validationResults).length > 0) {
+          console.error('Form invalid');
+        } else {
+          const updatedConfig = formikToUiConfig(
+            formikProps.values,
+            props.workflow?.ui_metadata?.config as WorkflowConfig
+          );
+          const updatedWorkflow = {
+            ...props.workflow,
+            ui_metadata: {
+              ...props.workflow?.ui_metadata,
+              config: updatedConfig,
+            },
+            workflows: configToTemplateFlows(updatedConfig),
+          } as Workflow;
+          success = await updateWorkflowAndResources(updatedWorkflow);
+        }
+      })
+      .catch((error) => {
+        console.error('Error validating form: ', error);
+      });
+
+    return success;
   }
 
   // TODO: running props.validateAndSubmit(props.formikProps) will need to be ran before every ingest and
   // search, if the form is dirty / values have changed. This will update the workflow if needed.
   // Note that the temporary data (the ingest docs and the search query) will not need to be persisted
   // in the form (need to confirm if query-side / using search template, will need to persist something)
-  function validateAndRunIngestion(): void {
-    console.log('running ingestion...');
+  async function validateAndRunIngestion(): Promise<boolean> {
+    let success = false;
     try {
-      validateAndUpdateWorkflow(props.formikProps);
-      const indexName = props.formikProps.values.ingest.index.name;
-      const doc = ingestDocs[0];
-      // dispatch(ingest({ index: indexName, doc: docObj }))
-      //   .unwrap()
-      //   .then(async (resp) => {
-      //     //setResponse(result);
-      //     console.log('response: ', resp);
-      //   })
-      //   .catch((error: any) => {
-      //     getCore().notifications.toasts.addDanger(error);
-      //     // setResponse({});
-      //     console.log('error: ', error);
-      //   });
+      success = await validateAndUpdateWorkflow(props.formikProps);
+      if (success) {
+        const indexName = props.formikProps.values.ingest.index.name;
+        const doc = ingestDocs[0];
+        // dispatch(ingest({ index: indexName, doc: docObj }))
+        //   .unwrap()
+        //   .then(async (resp) => {
+        //     //setResponse(result);
+        //     console.log('response: ', resp);
+        //   })
+        //   .catch((error: any) => {
+        //     getCore().notifications.toasts.addDanger(error);
+        //     // setResponse({});
+        //     console.log('error: ', error);
+        //   });
+      }
     } catch (err) {
-      console.log('error: ', err);
+      console.log('Error ingesting documents: ', err);
     }
+
+    return success;
   }
 
   function validateAndRunQuery(): void {

From bfe171212e4f47da98a5de2286605835a4be4256 Mon Sep 17 00:00:00 2001
From: Tyler Ohlsen <ohltyler@amazon.com>
Date: Thu, 6 Jun 2024 09:52:44 -0700
Subject: [PATCH 2/4] Implement ingest; persist ingest state to tools ingest
 tab

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>
---
 .../workflow_detail/resizable_workspace.tsx   |  9 ++++-
 public/pages/workflow_detail/tools/tools.tsx  | 33 +++++++++++++++++--
 .../workflow_inputs/workflow_inputs.tsx       | 33 ++++++++++---------
 3 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/public/pages/workflow_detail/resizable_workspace.tsx b/public/pages/workflow_detail/resizable_workspace.tsx
index 51037344..2ce8d39a 100644
--- a/public/pages/workflow_detail/resizable_workspace.tsx
+++ b/public/pages/workflow_detail/resizable_workspace.tsx
@@ -69,6 +69,9 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
     setIsWorkflowInputsPanelOpen(!isWorkflowInputsPanelOpen);
   };
 
+  // ingest state
+  const [ingestResponse, setIngestResponse] = useState<string>('');
+
   // Tools side panel state
   const [isToolsPanelOpen, setIsToolsPanelOpen] = useState<boolean>(true);
   const collapseFnVertical = useRef(
@@ -160,6 +163,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                       workflow={props.workflow}
                       formikProps={formikProps}
                       onFormChange={onFormChange}
+                      setIngestResponse={setIngestResponse}
                     />
                   </EuiResizablePanel>
                   <EuiResizableButton />
@@ -242,7 +246,10 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                               >
                                 <EuiFlexItem>
                                   <EuiPanel paddingSize="m">
-                                    <Tools workflow={workflow} />
+                                    <Tools
+                                      workflow={workflow}
+                                      ingestResponse={ingestResponse}
+                                    />
                                   </EuiPanel>
                                 </EuiFlexItem>
                               </EuiFlexGroup>
diff --git a/public/pages/workflow_detail/tools/tools.tsx b/public/pages/workflow_detail/tools/tools.tsx
index 3e0308c7..dcf672b6 100644
--- a/public/pages/workflow_detail/tools/tools.tsx
+++ b/public/pages/workflow_detail/tools/tools.tsx
@@ -5,6 +5,7 @@
 
 import React, { useState } from 'react';
 import {
+  EuiCodeEditor,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
@@ -18,6 +19,7 @@ import { Resources } from './resources';
 
 interface ToolsProps {
   workflow?: Workflow;
+  ingestResponse: string;
 }
 
 enum TAB_ID {
@@ -77,10 +79,35 @@ export function Tools(props: ToolsProps) {
           })}
         </EuiTabs>
         <EuiSpacer size="m" />
-        <EuiFlexGroup direction="column">
+        <EuiFlexGroup
+          direction="column"
+          justifyContent="spaceBetween"
+          style={{
+            height: '80%',
+          }}
+        >
           {selectedTabId === TAB_ID.INGEST && (
-            <EuiFlexItem>
-              <EuiText>TODO: Run ingestion placeholder</EuiText>
+            <EuiFlexItem
+              grow={true}
+              style={{
+                overflowY: 'scroll',
+                overflowX: 'hidden',
+              }}
+            >
+              <EuiCodeEditor
+                mode="json"
+                theme="textmate"
+                width="100%"
+                height="100%"
+                value={props.ingestResponse}
+                onChange={(input) => {}}
+                readOnly={true}
+                setOptions={{
+                  fontSize: '14px',
+                }}
+                aria-label="Code Editor"
+                tabSize={2}
+              />
             </EuiFlexItem>
           )}
           {selectedTabId === TAB_ID.QUERY && (
diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
index b0f8b7fc..cce3d516 100644
--- a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
@@ -24,10 +24,12 @@ import { IngestInputs } from './ingest_inputs';
 import { SearchInputs } from './search_inputs';
 import {
   deprovisionWorkflow,
+  ingest,
   provisionWorkflow,
   updateWorkflow,
   useAppDispatch,
 } from '../../../store';
+import { getCore } from '../../../services';
 import { formikToUiConfig, reduceToTemplate } from '../../../utils';
 import { configToTemplateFlows } from '../utils';
 
@@ -38,6 +40,7 @@ interface WorkflowInputsProps {
   workflow: Workflow | undefined;
   formikProps: FormikProps<WorkflowFormValues>;
   onFormChange: () => void;
+  setIngestResponse: (ingestResponse: string) => void;
 }
 
 export enum CREATE_STEP {
@@ -58,8 +61,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
     CREATE_STEP.INGEST
   );
 
-  // ingestion data state. We need to persist separately from the form, since
-  // we do not need/want to persist this in form state or in backend
+  // ingest state
   const [ingestDocs, setIngestDocs] = useState<{}[]>([]);
 
   // Utility fn to update the workflow, including any updated/new resources
@@ -145,23 +147,22 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
     let success = false;
     try {
       success = await validateAndUpdateWorkflow(props.formikProps);
-      if (success) {
+      if (success && ingestDocs.length > 0) {
         const indexName = props.formikProps.values.ingest.index.name;
         const doc = ingestDocs[0];
-        // dispatch(ingest({ index: indexName, doc: docObj }))
-        //   .unwrap()
-        //   .then(async (resp) => {
-        //     //setResponse(result);
-        //     console.log('response: ', resp);
-        //   })
-        //   .catch((error: any) => {
-        //     getCore().notifications.toasts.addDanger(error);
-        //     // setResponse({});
-        //     console.log('error: ', error);
-        //   });
+        dispatch(ingest({ index: indexName, doc }))
+          .unwrap()
+          .then(async (resp) => {
+            props.setIngestResponse(JSON.stringify(resp));
+          })
+          .catch((error: any) => {
+            getCore().notifications.toasts.addDanger(error);
+            props.setIngestResponse('');
+            throw error;
+          });
       }
-    } catch (err) {
-      console.log('Error ingesting documents: ', err);
+    } catch (error) {
+      console.error('Error ingesting documents: ', error);
     }
 
     return success;

From 6dc177d4f8d1cbad62ae0ebf9cc6bdacb8e3cbc5 Mon Sep 17 00:00:00 2001
From: Tyler Ohlsen <ohltyler@amazon.com>
Date: Thu, 6 Jun 2024 10:59:14 -0700
Subject: [PATCH 3/4] Get base tools body working with dynamic height

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>
---
 .../workflow_detail/resizable_workspace.tsx   |  22 +--
 public/pages/workflow_detail/tools/tools.tsx  | 158 +++++++++++-------
 .../workflow_inputs/workflow_inputs.tsx       |   2 +-
 3 files changed, 99 insertions(+), 83 deletions(-)

diff --git a/public/pages/workflow_detail/resizable_workspace.tsx b/public/pages/workflow_detail/resizable_workspace.tsx
index 2ce8d39a..12cb99d0 100644
--- a/public/pages/workflow_detail/resizable_workspace.tsx
+++ b/public/pages/workflow_detail/resizable_workspace.tsx
@@ -235,24 +235,12 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                               onToggleCollapsedInternal={() =>
                                 onToggleToolsChange()
                               }
-                              style={{ marginBottom: '-24px' }}
+                              style={{ marginBottom: '-16px' }}
                             >
-                              <EuiFlexGroup
-                                direction="column"
-                                gutterSize="s"
-                                style={{
-                                  height: '100%',
-                                }}
-                              >
-                                <EuiFlexItem>
-                                  <EuiPanel paddingSize="m">
-                                    <Tools
-                                      workflow={workflow}
-                                      ingestResponse={ingestResponse}
-                                    />
-                                  </EuiPanel>
-                                </EuiFlexItem>
-                              </EuiFlexGroup>
+                              <Tools
+                                workflow={workflow}
+                                ingestResponse={ingestResponse}
+                              />
                             </EuiResizablePanel>
                           </>
                         );
diff --git a/public/pages/workflow_detail/tools/tools.tsx b/public/pages/workflow_detail/tools/tools.tsx
index dcf672b6..c11528f4 100644
--- a/public/pages/workflow_detail/tools/tools.tsx
+++ b/public/pages/workflow_detail/tools/tools.tsx
@@ -5,9 +5,11 @@
 
 import React, { useState } from 'react';
 import {
+  EuiCodeBlock,
   EuiCodeEditor,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiPanel,
   EuiSpacer,
   EuiTab,
   EuiTabs,
@@ -57,76 +59,102 @@ const inputTabs = [
  */
 export function Tools(props: ToolsProps) {
   const [selectedTabId, setSelectedTabId] = useState<string>(TAB_ID.INGEST);
+
+  console.log('ingestresponse in tools: ', props.ingestResponse);
   return (
-    <>
-      <EuiTitle>
-        <h2>Tools</h2>
-      </EuiTitle>
-      <EuiSpacer size="m" />
-      <>
-        <EuiTabs size="m" expand={false}>
-          {inputTabs.map((tab, idx) => {
-            return (
-              <EuiTab
-                onClick={() => setSelectedTabId(tab.id)}
-                isSelected={tab.id === selectedTabId}
-                disabled={tab.disabled}
-                key={idx}
-              >
-                {tab.name}
-              </EuiTab>
-            );
-          })}
-        </EuiTabs>
-        <EuiSpacer size="m" />
-        <EuiFlexGroup
-          direction="column"
-          justifyContent="spaceBetween"
-          style={{
-            height: '80%',
-          }}
+    <EuiPanel paddingSize="m" grow={true} style={{ height: '100%' }}>
+      <EuiFlexGroup
+        direction="column"
+        //justifyContent="spaceBetween"
+        style={{
+          height: '100%',
+        }}
+      >
+        <EuiFlexItem grow={false}>
+          <EuiTitle>
+            <h2>Tools</h2>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiTabs size="m" expand={false}>
+            {inputTabs.map((tab, idx) => {
+              return (
+                <EuiTab
+                  onClick={() => setSelectedTabId(tab.id)}
+                  isSelected={tab.id === selectedTabId}
+                  disabled={tab.disabled}
+                  key={idx}
+                >
+                  {tab.name}
+                </EuiTab>
+              );
+            })}
+          </EuiTabs>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={true}
+          style={
+            {
+              // overflowY: 'scroll',
+              // overflowX: 'hidden',
+            }
+          }
         >
-          {selectedTabId === TAB_ID.INGEST && (
+          <EuiFlexGroup direction="column">
             <EuiFlexItem
               grow={true}
-              style={{
-                overflowY: 'scroll',
-                overflowX: 'hidden',
-              }}
+              // style={{
+              //   overflowY: 'scroll',
+              //   overflowX: 'hidden',
+              // }}
             >
-              <EuiCodeEditor
-                mode="json"
-                theme="textmate"
-                width="100%"
-                height="100%"
-                value={props.ingestResponse}
-                onChange={(input) => {}}
-                readOnly={true}
-                setOptions={{
-                  fontSize: '14px',
-                }}
-                aria-label="Code Editor"
-                tabSize={2}
-              />
-            </EuiFlexItem>
-          )}
-          {selectedTabId === TAB_ID.QUERY && (
-            <EuiFlexItem>
-              <EuiText>TODO: Run queries placeholder</EuiText>
-            </EuiFlexItem>
-          )}
-          {selectedTabId === TAB_ID.ERRORS && (
-            <EuiFlexItem>
-              <EuiText>TODO: View errors placeholder</EuiText>
-            </EuiFlexItem>
-          )}
-          {selectedTabId === TAB_ID.RESOURCES && (
-            <EuiFlexItem>
-              <Resources workflow={props.workflow} />
+              <>
+                {selectedTabId === TAB_ID.INGEST && (
+                  //TODO: investigate existing editor more
+                  <EuiCodeEditor
+                    mode="json"
+                    theme="textmate"
+                    width="100%"
+                    height="100%"
+                    onScroll={(event) => {
+                      console.log('scroll event fired!');
+                    }}
+                    value={props.ingestResponse}
+                    onChange={(input) => {}}
+                    readOnly={true}
+                    setOptions={{
+                      fontSize: '14px',
+                    }}
+                    aria-label="Code Editor"
+                    tabSize={2}
+                  />
+                  // <EuiCodeBlock
+                  //   language="json"
+                  //   fontSize="m"
+                  //   paddingSize="m"
+                  //   // TODO: dynamically fetch the available space to determine the overflow height.
+                  //   overflowHeight={100}
+                  //   // style={{
+                  //   //   height: '100%',
+                  //   // }}
+                  // >
+                  //   {props.ingestResponse}
+                  // </EuiCodeBlock>
+                )}
+                {selectedTabId === TAB_ID.QUERY && (
+                  <EuiText>TODO: Run queries placeholder</EuiText>
+                )}
+                {selectedTabId === TAB_ID.ERRORS && (
+                  <EuiText>TODO: View errors placeholder</EuiText>
+                )}
+                {selectedTabId === TAB_ID.RESOURCES && (
+                  <Resources workflow={props.workflow} />
+                )}
+              </>
             </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-      </>
-    </>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
   );
 }
diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
index cce3d516..2acb7ef3 100644
--- a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
@@ -153,7 +153,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
         dispatch(ingest({ index: indexName, doc }))
           .unwrap()
           .then(async (resp) => {
-            props.setIngestResponse(JSON.stringify(resp));
+            props.setIngestResponse(JSON.stringify(resp, undefined, 2));
           })
           .catch((error: any) => {
             getCore().notifications.toasts.addDanger(error);

From c0b0934d3e16b28f1beeffecc7cc944673764b27 Mon Sep 17 00:00:00 2001
From: Tyler Ohlsen <ohltyler@amazon.com>
Date: Thu, 6 Jun 2024 14:17:54 -0700
Subject: [PATCH 4/4] Formatting cleanup

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>
---
 public/pages/workflow_detail/tools/tools.tsx | 45 +++-----------------
 1 file changed, 7 insertions(+), 38 deletions(-)

diff --git a/public/pages/workflow_detail/tools/tools.tsx b/public/pages/workflow_detail/tools/tools.tsx
index c11528f4..e363d238 100644
--- a/public/pages/workflow_detail/tools/tools.tsx
+++ b/public/pages/workflow_detail/tools/tools.tsx
@@ -5,12 +5,10 @@
 
 import React, { useState } from 'react';
 import {
-  EuiCodeBlock,
   EuiCodeEditor,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPanel,
-  EuiSpacer,
   EuiTab,
   EuiTabs,
   EuiText,
@@ -60,12 +58,10 @@ const inputTabs = [
 export function Tools(props: ToolsProps) {
   const [selectedTabId, setSelectedTabId] = useState<string>(TAB_ID.INGEST);
 
-  console.log('ingestresponse in tools: ', props.ingestResponse);
   return (
     <EuiPanel paddingSize="m" grow={true} style={{ height: '100%' }}>
       <EuiFlexGroup
         direction="column"
-        //justifyContent="spaceBetween"
         style={{
           height: '100%',
         }}
@@ -91,55 +87,28 @@ export function Tools(props: ToolsProps) {
             })}
           </EuiTabs>
         </EuiFlexItem>
-        <EuiFlexItem
-          grow={true}
-          style={
-            {
-              // overflowY: 'scroll',
-              // overflowX: 'hidden',
-            }
-          }
-        >
+        <EuiFlexItem grow={true}>
           <EuiFlexGroup direction="column">
-            <EuiFlexItem
-              grow={true}
-              // style={{
-              //   overflowY: 'scroll',
-              //   overflowX: 'hidden',
-              // }}
-            >
+            <EuiFlexItem grow={true}>
               <>
                 {selectedTabId === TAB_ID.INGEST && (
-                  //TODO: investigate existing editor more
+                  // TODO: known issue with the editor where resizing the resizablecontainer does not
+                  // trigger vertical scroll updates. Updating the window, or reloading the component
+                  // by switching tabs etc. will refresh it correctly.
                   <EuiCodeEditor
                     mode="json"
                     theme="textmate"
                     width="100%"
                     height="100%"
-                    onScroll={(event) => {
-                      console.log('scroll event fired!');
-                    }}
                     value={props.ingestResponse}
                     onChange={(input) => {}}
                     readOnly={true}
                     setOptions={{
-                      fontSize: '14px',
+                      fontSize: '12px',
+                      autoScrollEditorIntoView: true,
                     }}
-                    aria-label="Code Editor"
                     tabSize={2}
                   />
-                  // <EuiCodeBlock
-                  //   language="json"
-                  //   fontSize="m"
-                  //   paddingSize="m"
-                  //   // TODO: dynamically fetch the available space to determine the overflow height.
-                  //   overflowHeight={100}
-                  //   // style={{
-                  //   //   height: '100%',
-                  //   // }}
-                  // >
-                  //   {props.ingestResponse}
-                  // </EuiCodeBlock>
                 )}
                 {selectedTabId === TAB_ID.QUERY && (
                   <EuiText>TODO: Run queries placeholder</EuiText>