From 94ff6056ea0b471d50ec16f81123f890236a08ab Mon Sep 17 00:00:00 2001
From: Tyler Ohlsen <ohltyler@amazon.com>
Date: Wed, 16 Oct 2024 09:59:53 -0700
Subject: [PATCH] Move create/skip toggle in scrollable area

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>
---
 .../workflow_inputs/workflow_inputs.tsx       | 161 +++++++++---------
 1 file changed, 77 insertions(+), 84 deletions(-)

diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
index f8087377..e88545df 100644
--- a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
@@ -20,7 +20,6 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiPanel,
-  EuiSpacer,
   EuiStepsHorizontal,
   EuiText,
   EuiTitle,
@@ -711,98 +710,92 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                 </EuiModalFooter>
               </EuiModal>
             )}
-            {onIngestAndUnprovisioned && (
-              <>
-                <EuiSpacer size="m" />
-                <BooleanField
-                  fieldPath="ingest.enabled"
-                  enabledOption={{
-                    id: INGEST_OPTION.CREATE,
-                    label: (
-                      <EuiFlexGroup direction="column" gutterSize="none">
-                        <EuiText color="default">
-                          Create an ingest pipeline
-                        </EuiText>
-                        <EuiText size="xs" color="subdued">
-                          Configure and ingest data into an index.
-                        </EuiText>
-                      </EuiFlexGroup>
-                    ),
-                  }}
-                  disabledOption={{
-                    id: INGEST_OPTION.SKIP,
-                    label: (
-                      <EuiFlexGroup direction="column" gutterSize="none">
-                        <EuiText color="default">
-                          Skip ingestion pipeline
-                        </EuiText>
-                        <EuiText size="xs" color="subdued">
-                          Use an existing index with data ingested.
-                        </EuiText>
-                      </EuiFlexGroup>
-                    ),
-                  }}
-                  showLabel={false}
-                />
-              </>
-            )}
           </EuiFlexItem>
-          {!onIngestAndDisabled && (
-            <>
-              <EuiFlexItem grow={false}>
-                <EuiTitle>
-                  <h2>
-                    {onIngestAndUnprovisioned ? (
-                      'Define ingest pipeline'
-                    ) : onIngestAndProvisioned ? (
-                      <EuiFlexGroup
-                        direction="row"
-                        justifyContent="spaceBetween"
+          <EuiFlexItem grow={false} style={{ marginBottom: '-8px' }}>
+            <EuiTitle>
+              <h2>
+                {onIngestAndUnprovisioned ? (
+                  'Define ingest pipeline'
+                ) : onIngestAndProvisioned ? (
+                  <EuiFlexGroup direction="row" justifyContent="spaceBetween">
+                    <EuiFlexItem grow={false}>Edit ingest pipeline</EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiSmallButtonEmpty
+                        color="danger"
+                        onClick={() => setIsModalOpen(true)}
                       >
-                        <EuiFlexItem grow={false}>
-                          Edit ingest pipeline
-                        </EuiFlexItem>
-                        <EuiFlexItem grow={false}>
-                          <EuiSmallButtonEmpty
-                            color="danger"
-                            onClick={() => setIsModalOpen(true)}
-                          >
-                            <EuiIcon type="trash" />
-                            {`    `}Delete resources
-                          </EuiSmallButtonEmpty>
-                        </EuiFlexItem>
-                      </EuiFlexGroup>
-                    ) : (
-                      'Define search pipeline'
-                    )}
-                  </h2>
-                </EuiTitle>
-              </EuiFlexItem>
-              <EuiFlexItem
-                grow={true}
-                style={{
-                  overflowY: 'scroll',
-                  overflowX: 'hidden',
-                }}
-              >
-                {onIngest ? (
+                        <EuiIcon type="trash" />
+                        {`    `}Delete resources
+                      </EuiSmallButtonEmpty>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                ) : (
+                  'Define search pipeline'
+                )}
+              </h2>
+            </EuiTitle>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={true}
+            style={{
+              overflowY: 'scroll',
+              overflowX: 'hidden',
+            }}
+          >
+            {onIngest ? (
+              <>
+                {onIngestAndUnprovisioned && (
+                  <>
+                    <BooleanField
+                      fieldPath="ingest.enabled"
+                      enabledOption={{
+                        id: INGEST_OPTION.CREATE,
+                        label: (
+                          <EuiFlexGroup direction="column" gutterSize="none">
+                            <EuiText color="default">
+                              Create an ingest pipeline
+                            </EuiText>
+                            <EuiText size="xs" color="subdued">
+                              Configure and ingest data into an index.
+                            </EuiText>
+                          </EuiFlexGroup>
+                        ),
+                      }}
+                      disabledOption={{
+                        id: INGEST_OPTION.SKIP,
+                        label: (
+                          <EuiFlexGroup direction="column" gutterSize="none">
+                            <EuiText color="default">
+                              Skip ingestion pipeline
+                            </EuiText>
+                            <EuiText size="xs" color="subdued">
+                              Use an existing index with data ingested.
+                            </EuiText>
+                          </EuiFlexGroup>
+                        ),
+                      }}
+                      showLabel={false}
+                    />
+                  </>
+                )}
+                {!onIngestAndDisabled && (
                   <IngestInputs
                     setIngestDocs={props.setIngestDocs}
                     uiConfig={props.uiConfig}
                     setUiConfig={props.setUiConfig}
                     workflow={props.workflow}
                   />
-                ) : (
-                  <SearchInputs
-                    uiConfig={props.uiConfig}
-                    setUiConfig={props.setUiConfig}
-                    setQuery={props.setQuery}
-                    setQueryResponse={props.setQueryResponse}
-                  />
                 )}
-              </EuiFlexItem>
-            </>
-          )}
+              </>
+            ) : (
+              <SearchInputs
+                uiConfig={props.uiConfig}
+                setUiConfig={props.setUiConfig}
+                setQuery={props.setQuery}
+                setQueryResponse={props.setQueryResponse}
+              />
+            )}
+          </EuiFlexItem>
           <EuiFlexItem grow={false} style={{ marginBottom: '-10px' }}>
             <EuiFlexGroup direction="column" gutterSize="none">
               <EuiFlexItem>