From 4ce49f5183428c89ca3181b69f94e419b09fdc6b Mon Sep 17 00:00:00 2001
From: Nicholas Ung <nicholasung22@gmail.com>
Date: Tue, 21 Nov 2023 16:02:14 -0800
Subject: [PATCH] Update tests and snapshots

Signed-off-by: Nicholas Ung <nicholasung22@gmail.com>
---
 .../result_component.test.tsx.snap            |   80 +-
 .../__snapshots__/result_grid.test.tsx.snap   |   40 +-
 .../__snapshots__/search_config.test.tsx.snap |  530 +++++++--
 .../search_configs.test.tsx.snap              | 1060 +++++++++++++----
 .../__tests__/search_config.test.tsx          |    3 +
 5 files changed, 1287 insertions(+), 426 deletions(-)

diff --git a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap
index 13b3f52..b1b64a1 100644
--- a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap
+++ b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap
@@ -1457,11 +1457,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-2"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         arr:
@@ -1710,11 +1710,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-4"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         nestObj:
@@ -1972,11 +1972,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-6"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         id:
@@ -2225,11 +2225,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-8"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         id:
@@ -2469,11 +2469,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-10"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         id:
@@ -2713,11 +2713,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-12"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         id:
@@ -2957,11 +2957,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-14"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         id:
@@ -3210,11 +3210,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-16"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         id:
@@ -3454,11 +3454,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-18"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         id:
@@ -3707,11 +3707,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-20"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         id:
@@ -4434,11 +4434,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-22"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         arr:
@@ -4687,11 +4687,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-24"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         nestObj:
@@ -4949,11 +4949,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-26"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         id:
@@ -5202,11 +5202,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-28"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         id:
@@ -5446,11 +5446,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-30"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         id:
@@ -5690,11 +5690,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-32"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         id:
@@ -5934,11 +5934,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-34"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         id:
@@ -6187,11 +6187,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-36"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         id:
@@ -6431,11 +6431,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-38"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         id:
@@ -6684,11 +6684,11 @@ exports[`Result component Renders result component 1`] = `
                                 key="datagrid-cell-40"
                               >
                                 <div
-                                  className="truncate-by-height"
+                                  className="truncate-by-heights"
                                 >
                                   <span>
                                     <dl
-                                      className="source truncate-by-height"
+                                      className="source truncate-by-heights"
                                     >
                                       <dt>
                                         id:
diff --git a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap
index b8e073d..61eb552 100644
--- a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap
+++ b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap
@@ -311,11 +311,11 @@ exports[`Result grid component Renders result grid component 1`] = `
               key="datagrid-cell-2"
             >
               <div
-                className="truncate-by-height"
+                className="truncate-by-heights"
               >
                 <span>
                   <dl
-                    className="source truncate-by-height"
+                    className="source truncate-by-heights"
                   >
                     <dt>
                       arr:
@@ -503,11 +503,11 @@ exports[`Result grid component Renders result grid component 1`] = `
               key="datagrid-cell-4"
             >
               <div
-                className="truncate-by-height"
+                className="truncate-by-heights"
               >
                 <span>
                   <dl
-                    className="source truncate-by-height"
+                    className="source truncate-by-heights"
                   >
                     <dt>
                       nestObj:
@@ -704,11 +704,11 @@ exports[`Result grid component Renders result grid component 1`] = `
               key="datagrid-cell-6"
             >
               <div
-                className="truncate-by-height"
+                className="truncate-by-heights"
               >
                 <span>
                   <dl
-                    className="source truncate-by-height"
+                    className="source truncate-by-heights"
                   >
                     <dt>
                       id:
@@ -896,11 +896,11 @@ exports[`Result grid component Renders result grid component 1`] = `
               key="datagrid-cell-8"
             >
               <div
-                className="truncate-by-height"
+                className="truncate-by-heights"
               >
                 <span>
                   <dl
-                    className="source truncate-by-height"
+                    className="source truncate-by-heights"
                   >
                     <dt>
                       id:
@@ -1140,11 +1140,11 @@ exports[`Result grid component Renders result grid component 1`] = `
               key="datagrid-cell-10"
             >
               <div
-                className="truncate-by-height"
+                className="truncate-by-heights"
               >
                 <span>
                   <dl
-                    className="source truncate-by-height"
+                    className="source truncate-by-heights"
                   >
                     <dt>
                       id:
@@ -1384,11 +1384,11 @@ exports[`Result grid component Renders result grid component 1`] = `
               key="datagrid-cell-12"
             >
               <div
-                className="truncate-by-height"
+                className="truncate-by-heights"
               >
                 <span>
                   <dl
-                    className="source truncate-by-height"
+                    className="source truncate-by-heights"
                   >
                     <dt>
                       id:
@@ -1628,11 +1628,11 @@ exports[`Result grid component Renders result grid component 1`] = `
               key="datagrid-cell-14"
             >
               <div
-                className="truncate-by-height"
+                className="truncate-by-heights"
               >
                 <span>
                   <dl
-                    className="source truncate-by-height"
+                    className="source truncate-by-heights"
                   >
                     <dt>
                       id:
@@ -1881,11 +1881,11 @@ exports[`Result grid component Renders result grid component 1`] = `
               key="datagrid-cell-16"
             >
               <div
-                className="truncate-by-height"
+                className="truncate-by-heights"
               >
                 <span>
                   <dl
-                    className="source truncate-by-height"
+                    className="source truncate-by-heights"
                   >
                     <dt>
                       id:
@@ -2125,11 +2125,11 @@ exports[`Result grid component Renders result grid component 1`] = `
               key="datagrid-cell-18"
             >
               <div
-                className="truncate-by-height"
+                className="truncate-by-heights"
               >
                 <span>
                   <dl
-                    className="source truncate-by-height"
+                    className="source truncate-by-heights"
                   >
                     <dt>
                       id:
@@ -2378,11 +2378,11 @@ exports[`Result grid component Renders result grid component 1`] = `
               key="datagrid-cell-20"
             >
               <div
-                className="truncate-by-height"
+                className="truncate-by-heights"
               >
                 <span>
                   <dl
-                    className="source truncate-by-height"
+                    className="source truncate-by-heights"
                   >
                     <dt>
                       id:
diff --git a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap
index 36d1e46..2d2c967 100644
--- a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap
+++ b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Flyout component Renders flyout component 1`] = `
 <SearchRelevanceContextProvider>
   <SearchConfig
+    pipeline=""
     queryError={
       Object {
         "errorResponse": Object {
@@ -16,6 +17,7 @@ exports[`Flyout component Renders flyout component 1`] = `
     queryNumber={1}
     queryString="{}"
     selectedIndex=""
+    setPipeline={[MockFunction]}
     setQueryError={[MockFunction]}
     setQueryString={[MockFunction]}
     setSelectedIndex={[MockFunction]}
@@ -43,154 +45,438 @@ exports[`Flyout component Renders flyout component 1`] = `
         className="euiSpacer euiSpacer--m"
       />
     </EuiSpacer>
-    <EuiFormRow
-      describedByIds={Array []}
-      display="row"
-      error={false}
-      fullWidth={true}
-      hasChildLabel={true}
-      hasEmptyLabelSpace={false}
-      isInvalid={false}
-      label="Index"
-      labelType="label"
-    >
+    <EuiFlexGroup>
       <div
-        className="euiFormRow euiFormRow--fullWidth"
-        id="random_html_id-row"
+        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        <div
-          className="euiFormRow__labelWrapper"
-        >
-          <EuiFormLabel
-            aria-invalid={false}
-            className="euiFormRow__label"
-            htmlFor="random_html_id"
-            isFocused={false}
-            isInvalid={false}
-            type="label"
+        <EuiFlexItem>
+          <div
+            className="euiFlexItem"
           >
-            <label
-              aria-invalid={false}
-              className="euiFormLabel euiFormRow__label"
-              htmlFor="random_html_id"
-            >
-              Index
-            </label>
-          </EuiFormLabel>
-        </div>
-        <div
-          className="euiFormRow__fieldWrapper"
-        >
-          <EuiSelect
-            aria-label="Search Index"
-            hasNoInitialSelection={true}
-            id="random_html_id"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            options={Array []}
-            value=""
-          >
-            <EuiFormControlLayout
-              compressed={false}
-              fullWidth={false}
-              icon={
-                Object {
-                  "side": "right",
-                  "type": "arrowDown",
-                }
-              }
-              inputId="random_html_id"
-              isLoading={false}
+            <EuiFormRow
+              describedByIds={Array []}
+              display="row"
+              error={false}
+              fullWidth={true}
+              hasChildLabel={true}
+              hasEmptyLabelSpace={false}
+              isInvalid={false}
+              label="Index"
+              labelType="label"
             >
               <div
-                className="euiFormControlLayout"
+                className="euiFormRow euiFormRow--fullWidth"
+                id="random_html_id-row"
               >
                 <div
-                  className="euiFormControlLayout__childrenWrapper"
+                  className="euiFormRow__labelWrapper"
                 >
-                  <EuiValidatableControl>
-                    <select
-                      aria-label="Search Index"
-                      className="euiSelect"
-                      id="random_html_id"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      onMouseUp={[Function]}
-                      value=""
+                  <EuiFormLabel
+                    aria-invalid={false}
+                    className="euiFormRow__label"
+                    htmlFor="random_html_id"
+                    isFocused={false}
+                    isInvalid={false}
+                    type="label"
+                  >
+                    <label
+                      aria-invalid={false}
+                      className="euiFormLabel euiFormRow__label"
+                      htmlFor="random_html_id"
                     >
-                      <option
-                        disabled={true}
-                        hidden={true}
-                        style={
-                          Object {
-                            "display": "none",
-                          }
+                      Index
+                    </label>
+                  </EuiFormLabel>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
+                  <EuiSelect
+                    aria-label="Search Index"
+                    hasNoInitialSelection={true}
+                    id="random_html_id"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    options={Array []}
+                    value=""
+                  >
+                    <EuiFormControlLayout
+                      compressed={false}
+                      fullWidth={false}
+                      icon={
+                        Object {
+                          "side": "right",
+                          "type": "arrowDown",
                         }
-                        value=""
+                      }
+                      inputId="random_html_id"
+                      isLoading={false}
+                    >
+                      <div
+                        className="euiFormControlLayout"
                       >
-                         
-                      </option>
-                    </select>
-                  </EuiValidatableControl>
-                  <EuiFormControlLayoutIcons
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
+                        >
+                          <EuiValidatableControl>
+                            <select
+                              aria-label="Search Index"
+                              className="euiSelect"
+                              id="random_html_id"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              onMouseUp={[Function]}
+                              value=""
+                            >
+                              <option
+                                disabled={true}
+                                hidden={true}
+                                style={
+                                  Object {
+                                    "display": "none",
+                                  }
+                                }
+                                value=""
+                              >
+                                 
+                              </option>
+                            </select>
+                          </EuiValidatableControl>
+                          <EuiFormControlLayoutIcons
+                            compressed={false}
+                            icon={
+                              Object {
+                                "side": "right",
+                                "type": "arrowDown",
+                              }
+                            }
+                            isLoading={false}
+                          >
+                            <div
+                              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                            >
+                              <EuiFormControlLayoutCustomIcon
+                                size="m"
+                                type="arrowDown"
+                              >
+                                <span
+                                  className="euiFormControlLayoutCustomIcon"
+                                >
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
+                                    type="arrowDown"
+                                  >
+                                    <EuiIconEmpty
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                </span>
+                              </EuiFormControlLayoutCustomIcon>
+                            </div>
+                          </EuiFormControlLayoutIcons>
+                        </div>
+                      </div>
+                    </EuiFormControlLayout>
+                  </EuiSelect>
+                </div>
+              </div>
+            </EuiFormRow>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <div
+            className="euiFlexItem"
+          >
+            <EuiFormRow
+              describedByIds={Array []}
+              display="row"
+              fullWidth={true}
+              hasChildLabel={true}
+              hasEmptyLabelSpace={false}
+              helpText="Optional"
+              label="Pipeline"
+              labelType="label"
+            >
+              <div
+                className="euiFormRow euiFormRow--fullWidth"
+                id="random_html_id-row"
+              >
+                <div
+                  className="euiFormRow__labelWrapper"
+                >
+                  <EuiFormLabel
+                    className="euiFormRow__label"
+                    htmlFor="random_html_id"
+                    isFocused={false}
+                    type="label"
+                  >
+                    <label
+                      className="euiFormLabel euiFormRow__label"
+                      htmlFor="random_html_id"
+                    >
+                      Pipeline
+                    </label>
+                  </EuiFormLabel>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
+                  <EuiComboBox
+                    aria-describedby="random_html_id-help-0"
+                    async={false}
                     compressed={false}
-                    icon={
+                    fullWidth={false}
+                    id="random_html_id"
+                    isClearable={true}
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    options={Array []}
+                    placeholder="No pipeline"
+                    selectedOptions={Array []}
+                    singleSelection={
                       Object {
-                        "side": "right",
-                        "type": "arrowDown",
+                        "asPlainText": true,
                       }
                     }
-                    isLoading={false}
+                    sortMatchesBy="none"
                   >
                     <div
-                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                      aria-describedby="random_html_id-help-0"
+                      aria-expanded={false}
+                      aria-haspopup="listbox"
+                      className="euiComboBox"
+                      onKeyDown={[Function]}
+                      role="combobox"
                     >
-                      <EuiFormControlLayoutCustomIcon
-                        size="m"
-                        type="arrowDown"
+                      <EuiComboBoxInput
+                        autoSizeInputRef={[Function]}
+                        compressed={false}
+                        fullWidth={false}
+                        hasSelectedOptions={false}
+                        id="random_html_id"
+                        inputRef={[Function]}
+                        isListOpen={false}
+                        noIcon={false}
+                        onChange={[Function]}
+                        onClear={[Function]}
+                        onClick={[Function]}
+                        onCloseListClick={[Function]}
+                        onFocus={[Function]}
+                        onOpenListClick={[Function]}
+                        onRemoveOption={[Function]}
+                        placeholder="No pipeline"
+                        rootId={[Function]}
+                        searchValue=""
+                        selectedOptions={Array []}
+                        singleSelection={
+                          Object {
+                            "asPlainText": true,
+                          }
+                        }
+                        toggleButtonRef={[Function]}
+                        updatePosition={[Function]}
+                        value=""
                       >
-                        <span
-                          className="euiFormControlLayoutCustomIcon"
+                        <EuiFormControlLayout
+                          compressed={false}
+                          fullWidth={false}
+                          icon={
+                            Object {
+                              "aria-label": "Open list of options",
+                              "data-test-subj": "comboBoxToggleListButton",
+                              "disabled": undefined,
+                              "onClick": [Function],
+                              "ref": [Function],
+                              "side": "right",
+                              "type": "arrowDown",
+                            }
+                          }
                         >
-                          <EuiIcon
-                            aria-hidden="true"
-                            className="euiFormControlLayoutCustomIcon__icon"
-                            size="m"
-                            type="arrowDown"
+                          <div
+                            className="euiFormControlLayout"
                           >
-                            <EuiIconEmpty
-                              aria-hidden={true}
-                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                              focusable="false"
-                              role="img"
-                              style={null}
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
                             >
-                              <svg
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                focusable="false"
-                                height={16}
-                                role="img"
-                                style={null}
-                                viewBox="0 0 16 16"
-                                width={16}
-                                xmlns="http://www.w3.org/2000/svg"
-                              />
-                            </EuiIconEmpty>
-                          </EuiIcon>
-                        </span>
-                      </EuiFormControlLayoutCustomIcon>
+                              <div
+                                className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                                data-test-subj="comboBoxInput"
+                                onClick={[Function]}
+                                tabIndex={-1}
+                              >
+                                <p
+                                  className="euiComboBoxPlaceholder"
+                                >
+                                  No pipeline
+                                </p>
+                                <AutosizeInput
+                                  aria-controls=""
+                                  className="euiComboBox__input"
+                                  data-test-subj="comboBoxSearchInput"
+                                  id="random_html_id"
+                                  injectStyles={true}
+                                  inputRef={[Function]}
+                                  minWidth={1}
+                                  onBlur={[Function]}
+                                  onChange={[Function]}
+                                  onFocus={[Function]}
+                                  role="textbox"
+                                  style={
+                                    Object {
+                                      "fontSize": 14,
+                                    }
+                                  }
+                                  value=""
+                                >
+                                  <div
+                                    className="euiComboBox__input"
+                                    style={
+                                      Object {
+                                        "display": "inline-block",
+                                        "fontSize": 14,
+                                      }
+                                    }
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      onBlur={[Function]}
+                                      onChange={[Function]}
+                                      onFocus={[Function]}
+                                      role="textbox"
+                                      style={
+                                        Object {
+                                          "boxSizing": "content-box",
+                                          "width": "2px",
+                                        }
+                                      }
+                                      value=""
+                                    />
+                                    <div
+                                      style={
+                                        Object {
+                                          "height": 0,
+                                          "left": 0,
+                                          "overflow": "scroll",
+                                          "position": "absolute",
+                                          "top": 0,
+                                          "visibility": "hidden",
+                                          "whiteSpace": "pre",
+                                        }
+                                      }
+                                    />
+                                  </div>
+                                </AutosizeInput>
+                              </div>
+                              <EuiFormControlLayoutIcons
+                                compressed={false}
+                                icon={
+                                  Object {
+                                    "aria-label": "Open list of options",
+                                    "data-test-subj": "comboBoxToggleListButton",
+                                    "disabled": undefined,
+                                    "onClick": [Function],
+                                    "ref": [Function],
+                                    "side": "right",
+                                    "type": "arrowDown",
+                                  }
+                                }
+                              >
+                                <div
+                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <EuiFormControlLayoutCustomIcon
+                                    aria-label="Open list of options"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    iconRef={[Function]}
+                                    onClick={[Function]}
+                                    size="m"
+                                    type="arrowDown"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiFormControlLayoutCustomIcon__icon"
+                                        size="m"
+                                        type="arrowDown"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiFormControlLayoutCustomIcon>
+                                </div>
+                              </EuiFormControlLayoutIcons>
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </EuiComboBoxInput>
                     </div>
-                  </EuiFormControlLayoutIcons>
+                  </EuiComboBox>
+                  <EuiFormHelpText
+                    className="euiFormRow__text"
+                    id="random_html_id-help-0"
+                    key="Optional"
+                  >
+                    <div
+                      className="euiFormHelpText euiFormRow__text"
+                      id="random_html_id-help-0"
+                    >
+                      Optional
+                    </div>
+                  </EuiFormHelpText>
                 </div>
               </div>
-            </EuiFormControlLayout>
-          </EuiSelect>
-        </div>
+            </EuiFormRow>
+          </div>
+        </EuiFlexItem>
       </div>
-    </EuiFormRow>
+    </EuiFlexGroup>
     <EuiFormRow
       describedByIds={Array []}
       display="row"
diff --git a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
index 163ffbb..46c9c30 100644
--- a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
+++ b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
@@ -51,6 +51,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                 className="euiFlexItem search-relevance-config"
               >
                 <SearchConfig
+                  pipeline=""
                   queryError={
                     Object {
                       "errorResponse": Object {
@@ -64,6 +65,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                   queryNumber={1}
                   queryString="{}"
                   selectedIndex=""
+                  setPipeline={[Function]}
                   setQueryError={[Function]}
                   setQueryString={[Function]}
                   setSelectedIndex={[Function]}
@@ -91,154 +93,438 @@ exports[`Flyout component Renders flyout component 1`] = `
                       className="euiSpacer euiSpacer--m"
                     />
                   </EuiSpacer>
-                  <EuiFormRow
-                    describedByIds={Array []}
-                    display="row"
-                    error={false}
-                    fullWidth={true}
-                    hasChildLabel={true}
-                    hasEmptyLabelSpace={false}
-                    isInvalid={false}
-                    label="Index"
-                    labelType="label"
-                  >
+                  <EuiFlexGroup>
                     <div
-                      className="euiFormRow euiFormRow--fullWidth"
-                      id="random_html_id-row"
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                     >
-                      <div
-                        className="euiFormRow__labelWrapper"
-                      >
-                        <EuiFormLabel
-                          aria-invalid={false}
-                          className="euiFormRow__label"
-                          htmlFor="random_html_id"
-                          isFocused={false}
-                          isInvalid={false}
-                          type="label"
+                      <EuiFlexItem>
+                        <div
+                          className="euiFlexItem"
                         >
-                          <label
-                            aria-invalid={false}
-                            className="euiFormLabel euiFormRow__label"
-                            htmlFor="random_html_id"
-                          >
-                            Index
-                          </label>
-                        </EuiFormLabel>
-                      </div>
-                      <div
-                        className="euiFormRow__fieldWrapper"
-                      >
-                        <EuiSelect
-                          aria-label="Search Index"
-                          hasNoInitialSelection={true}
-                          id="random_html_id"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          options={Array []}
-                          value=""
-                        >
-                          <EuiFormControlLayout
-                            compressed={false}
-                            fullWidth={false}
-                            icon={
-                              Object {
-                                "side": "right",
-                                "type": "arrowDown",
-                              }
-                            }
-                            inputId="random_html_id"
-                            isLoading={false}
+                          <EuiFormRow
+                            describedByIds={Array []}
+                            display="row"
+                            error={false}
+                            fullWidth={true}
+                            hasChildLabel={true}
+                            hasEmptyLabelSpace={false}
+                            isInvalid={false}
+                            label="Index"
+                            labelType="label"
                           >
                             <div
-                              className="euiFormControlLayout"
+                              className="euiFormRow euiFormRow--fullWidth"
+                              id="random_html_id-row"
                             >
                               <div
-                                className="euiFormControlLayout__childrenWrapper"
+                                className="euiFormRow__labelWrapper"
                               >
-                                <EuiValidatableControl>
-                                  <select
-                                    aria-label="Search Index"
-                                    className="euiSelect"
-                                    id="random_html_id"
-                                    onBlur={[Function]}
-                                    onChange={[Function]}
-                                    onFocus={[Function]}
-                                    onMouseUp={[Function]}
-                                    value=""
+                                <EuiFormLabel
+                                  aria-invalid={false}
+                                  className="euiFormRow__label"
+                                  htmlFor="random_html_id"
+                                  isFocused={false}
+                                  isInvalid={false}
+                                  type="label"
+                                >
+                                  <label
+                                    aria-invalid={false}
+                                    className="euiFormLabel euiFormRow__label"
+                                    htmlFor="random_html_id"
                                   >
-                                    <option
-                                      disabled={true}
-                                      hidden={true}
-                                      style={
-                                        Object {
-                                          "display": "none",
-                                        }
+                                    Index
+                                  </label>
+                                </EuiFormLabel>
+                              </div>
+                              <div
+                                className="euiFormRow__fieldWrapper"
+                              >
+                                <EuiSelect
+                                  aria-label="Search Index"
+                                  hasNoInitialSelection={true}
+                                  id="random_html_id"
+                                  onBlur={[Function]}
+                                  onChange={[Function]}
+                                  onFocus={[Function]}
+                                  options={Array []}
+                                  value=""
+                                >
+                                  <EuiFormControlLayout
+                                    compressed={false}
+                                    fullWidth={false}
+                                    icon={
+                                      Object {
+                                        "side": "right",
+                                        "type": "arrowDown",
                                       }
-                                      value=""
+                                    }
+                                    inputId="random_html_id"
+                                    isLoading={false}
+                                  >
+                                    <div
+                                      className="euiFormControlLayout"
                                     >
-                                       
-                                    </option>
-                                  </select>
-                                </EuiValidatableControl>
-                                <EuiFormControlLayoutIcons
+                                      <div
+                                        className="euiFormControlLayout__childrenWrapper"
+                                      >
+                                        <EuiValidatableControl>
+                                          <select
+                                            aria-label="Search Index"
+                                            className="euiSelect"
+                                            id="random_html_id"
+                                            onBlur={[Function]}
+                                            onChange={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseUp={[Function]}
+                                            value=""
+                                          >
+                                            <option
+                                              disabled={true}
+                                              hidden={true}
+                                              style={
+                                                Object {
+                                                  "display": "none",
+                                                }
+                                              }
+                                              value=""
+                                            >
+                                               
+                                            </option>
+                                          </select>
+                                        </EuiValidatableControl>
+                                        <EuiFormControlLayoutIcons
+                                          compressed={false}
+                                          icon={
+                                            Object {
+                                              "side": "right",
+                                              "type": "arrowDown",
+                                            }
+                                          }
+                                          isLoading={false}
+                                        >
+                                          <div
+                                            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                          >
+                                            <EuiFormControlLayoutCustomIcon
+                                              size="m"
+                                              type="arrowDown"
+                                            >
+                                              <span
+                                                className="euiFormControlLayoutCustomIcon"
+                                              >
+                                                <EuiIcon
+                                                  aria-hidden="true"
+                                                  className="euiFormControlLayoutCustomIcon__icon"
+                                                  size="m"
+                                                  type="arrowDown"
+                                                >
+                                                  <EuiIconEmpty
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                    focusable="false"
+                                                    role="img"
+                                                    style={null}
+                                                  >
+                                                    <svg
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                      focusable="false"
+                                                      height={16}
+                                                      role="img"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    />
+                                                  </EuiIconEmpty>
+                                                </EuiIcon>
+                                              </span>
+                                            </EuiFormControlLayoutCustomIcon>
+                                          </div>
+                                        </EuiFormControlLayoutIcons>
+                                      </div>
+                                    </div>
+                                  </EuiFormControlLayout>
+                                </EuiSelect>
+                              </div>
+                            </div>
+                          </EuiFormRow>
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem>
+                        <div
+                          className="euiFlexItem"
+                        >
+                          <EuiFormRow
+                            describedByIds={Array []}
+                            display="row"
+                            fullWidth={true}
+                            hasChildLabel={true}
+                            hasEmptyLabelSpace={false}
+                            helpText="Optional"
+                            label="Pipeline"
+                            labelType="label"
+                          >
+                            <div
+                              className="euiFormRow euiFormRow--fullWidth"
+                              id="random_html_id-row"
+                            >
+                              <div
+                                className="euiFormRow__labelWrapper"
+                              >
+                                <EuiFormLabel
+                                  className="euiFormRow__label"
+                                  htmlFor="random_html_id"
+                                  isFocused={false}
+                                  type="label"
+                                >
+                                  <label
+                                    className="euiFormLabel euiFormRow__label"
+                                    htmlFor="random_html_id"
+                                  >
+                                    Pipeline
+                                  </label>
+                                </EuiFormLabel>
+                              </div>
+                              <div
+                                className="euiFormRow__fieldWrapper"
+                              >
+                                <EuiComboBox
+                                  aria-describedby="random_html_id-help-0"
+                                  async={false}
                                   compressed={false}
-                                  icon={
+                                  fullWidth={false}
+                                  id="random_html_id"
+                                  isClearable={true}
+                                  onBlur={[Function]}
+                                  onChange={[Function]}
+                                  onFocus={[Function]}
+                                  options={Array []}
+                                  placeholder="No pipeline"
+                                  selectedOptions={Array []}
+                                  singleSelection={
                                     Object {
-                                      "side": "right",
-                                      "type": "arrowDown",
+                                      "asPlainText": true,
                                     }
                                   }
-                                  isLoading={false}
+                                  sortMatchesBy="none"
                                 >
                                   <div
-                                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                    aria-describedby="random_html_id-help-0"
+                                    aria-expanded={false}
+                                    aria-haspopup="listbox"
+                                    className="euiComboBox"
+                                    onKeyDown={[Function]}
+                                    role="combobox"
                                   >
-                                    <EuiFormControlLayoutCustomIcon
-                                      size="m"
-                                      type="arrowDown"
+                                    <EuiComboBoxInput
+                                      autoSizeInputRef={[Function]}
+                                      compressed={false}
+                                      fullWidth={false}
+                                      hasSelectedOptions={false}
+                                      id="random_html_id"
+                                      inputRef={[Function]}
+                                      isListOpen={false}
+                                      noIcon={false}
+                                      onChange={[Function]}
+                                      onClear={[Function]}
+                                      onClick={[Function]}
+                                      onCloseListClick={[Function]}
+                                      onFocus={[Function]}
+                                      onOpenListClick={[Function]}
+                                      onRemoveOption={[Function]}
+                                      placeholder="No pipeline"
+                                      rootId={[Function]}
+                                      searchValue=""
+                                      selectedOptions={Array []}
+                                      singleSelection={
+                                        Object {
+                                          "asPlainText": true,
+                                        }
+                                      }
+                                      toggleButtonRef={[Function]}
+                                      updatePosition={[Function]}
+                                      value=""
                                     >
-                                      <span
-                                        className="euiFormControlLayoutCustomIcon"
+                                      <EuiFormControlLayout
+                                        compressed={false}
+                                        fullWidth={false}
+                                        icon={
+                                          Object {
+                                            "aria-label": "Open list of options",
+                                            "data-test-subj": "comboBoxToggleListButton",
+                                            "disabled": undefined,
+                                            "onClick": [Function],
+                                            "ref": [Function],
+                                            "side": "right",
+                                            "type": "arrowDown",
+                                          }
+                                        }
                                       >
-                                        <EuiIcon
-                                          aria-hidden="true"
-                                          className="euiFormControlLayoutCustomIcon__icon"
-                                          size="m"
-                                          type="arrowDown"
+                                        <div
+                                          className="euiFormControlLayout"
                                         >
-                                          <EuiIconEmpty
-                                            aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                            focusable="false"
-                                            role="img"
-                                            style={null}
+                                          <div
+                                            className="euiFormControlLayout__childrenWrapper"
                                           >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                              focusable="false"
-                                              height={16}
-                                              role="img"
-                                              style={null}
-                                              viewBox="0 0 16 16"
-                                              width={16}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            />
-                                          </EuiIconEmpty>
-                                        </EuiIcon>
-                                      </span>
-                                    </EuiFormControlLayoutCustomIcon>
+                                            <div
+                                              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                                              data-test-subj="comboBoxInput"
+                                              onClick={[Function]}
+                                              tabIndex={-1}
+                                            >
+                                              <p
+                                                className="euiComboBoxPlaceholder"
+                                              >
+                                                No pipeline
+                                              </p>
+                                              <AutosizeInput
+                                                aria-controls=""
+                                                className="euiComboBox__input"
+                                                data-test-subj="comboBoxSearchInput"
+                                                id="random_html_id"
+                                                injectStyles={true}
+                                                inputRef={[Function]}
+                                                minWidth={1}
+                                                onBlur={[Function]}
+                                                onChange={[Function]}
+                                                onFocus={[Function]}
+                                                role="textbox"
+                                                style={
+                                                  Object {
+                                                    "fontSize": 14,
+                                                  }
+                                                }
+                                                value=""
+                                              >
+                                                <div
+                                                  className="euiComboBox__input"
+                                                  style={
+                                                    Object {
+                                                      "display": "inline-block",
+                                                      "fontSize": 14,
+                                                    }
+                                                  }
+                                                >
+                                                  <input
+                                                    aria-controls=""
+                                                    data-test-subj="comboBoxSearchInput"
+                                                    id="random_html_id"
+                                                    onBlur={[Function]}
+                                                    onChange={[Function]}
+                                                    onFocus={[Function]}
+                                                    role="textbox"
+                                                    style={
+                                                      Object {
+                                                        "boxSizing": "content-box",
+                                                        "width": "2px",
+                                                      }
+                                                    }
+                                                    value=""
+                                                  />
+                                                  <div
+                                                    style={
+                                                      Object {
+                                                        "height": 0,
+                                                        "left": 0,
+                                                        "overflow": "scroll",
+                                                        "position": "absolute",
+                                                        "top": 0,
+                                                        "visibility": "hidden",
+                                                        "whiteSpace": "pre",
+                                                      }
+                                                    }
+                                                  />
+                                                </div>
+                                              </AutosizeInput>
+                                            </div>
+                                            <EuiFormControlLayoutIcons
+                                              compressed={false}
+                                              icon={
+                                                Object {
+                                                  "aria-label": "Open list of options",
+                                                  "data-test-subj": "comboBoxToggleListButton",
+                                                  "disabled": undefined,
+                                                  "onClick": [Function],
+                                                  "ref": [Function],
+                                                  "side": "right",
+                                                  "type": "arrowDown",
+                                                }
+                                              }
+                                            >
+                                              <div
+                                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                              >
+                                                <EuiFormControlLayoutCustomIcon
+                                                  aria-label="Open list of options"
+                                                  data-test-subj="comboBoxToggleListButton"
+                                                  iconRef={[Function]}
+                                                  onClick={[Function]}
+                                                  size="m"
+                                                  type="arrowDown"
+                                                >
+                                                  <button
+                                                    aria-label="Open list of options"
+                                                    className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                                    data-test-subj="comboBoxToggleListButton"
+                                                    onClick={[Function]}
+                                                    type="button"
+                                                  >
+                                                    <EuiIcon
+                                                      aria-hidden="true"
+                                                      className="euiFormControlLayoutCustomIcon__icon"
+                                                      size="m"
+                                                      type="arrowDown"
+                                                    >
+                                                      <EuiIconEmpty
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                        focusable="false"
+                                                        role="img"
+                                                        style={null}
+                                                      >
+                                                        <svg
+                                                          aria-hidden={true}
+                                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                          focusable="false"
+                                                          height={16}
+                                                          role="img"
+                                                          style={null}
+                                                          viewBox="0 0 16 16"
+                                                          width={16}
+                                                          xmlns="http://www.w3.org/2000/svg"
+                                                        />
+                                                      </EuiIconEmpty>
+                                                    </EuiIcon>
+                                                  </button>
+                                                </EuiFormControlLayoutCustomIcon>
+                                              </div>
+                                            </EuiFormControlLayoutIcons>
+                                          </div>
+                                        </div>
+                                      </EuiFormControlLayout>
+                                    </EuiComboBoxInput>
                                   </div>
-                                </EuiFormControlLayoutIcons>
+                                </EuiComboBox>
+                                <EuiFormHelpText
+                                  className="euiFormRow__text"
+                                  id="random_html_id-help-0"
+                                  key="Optional"
+                                >
+                                  <div
+                                    className="euiFormHelpText euiFormRow__text"
+                                    id="random_html_id-help-0"
+                                  >
+                                    Optional
+                                  </div>
+                                </EuiFormHelpText>
                               </div>
                             </div>
-                          </EuiFormControlLayout>
-                        </EuiSelect>
-                      </div>
+                          </EuiFormRow>
+                        </div>
+                      </EuiFlexItem>
                     </div>
-                  </EuiFormRow>
+                  </EuiFlexGroup>
                   <EuiFormRow
                     describedByIds={Array []}
                     display="row"
@@ -515,6 +801,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                 className="euiFlexItem search-relevance-config"
               >
                 <SearchConfig
+                  pipeline=""
                   queryError={
                     Object {
                       "errorResponse": Object {
@@ -528,6 +815,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                   queryNumber={2}
                   queryString="{}"
                   selectedIndex=""
+                  setPipeline={[Function]}
                   setQueryError={[Function]}
                   setQueryString={[Function]}
                   setSelectedIndex={[Function]}
@@ -555,154 +843,438 @@ exports[`Flyout component Renders flyout component 1`] = `
                       className="euiSpacer euiSpacer--m"
                     />
                   </EuiSpacer>
-                  <EuiFormRow
-                    describedByIds={Array []}
-                    display="row"
-                    error={false}
-                    fullWidth={true}
-                    hasChildLabel={true}
-                    hasEmptyLabelSpace={false}
-                    isInvalid={false}
-                    label="Index"
-                    labelType="label"
-                  >
+                  <EuiFlexGroup>
                     <div
-                      className="euiFormRow euiFormRow--fullWidth"
-                      id="random_html_id-row"
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                     >
-                      <div
-                        className="euiFormRow__labelWrapper"
-                      >
-                        <EuiFormLabel
-                          aria-invalid={false}
-                          className="euiFormRow__label"
-                          htmlFor="random_html_id"
-                          isFocused={false}
-                          isInvalid={false}
-                          type="label"
+                      <EuiFlexItem>
+                        <div
+                          className="euiFlexItem"
                         >
-                          <label
-                            aria-invalid={false}
-                            className="euiFormLabel euiFormRow__label"
-                            htmlFor="random_html_id"
-                          >
-                            Index
-                          </label>
-                        </EuiFormLabel>
-                      </div>
-                      <div
-                        className="euiFormRow__fieldWrapper"
-                      >
-                        <EuiSelect
-                          aria-label="Search Index"
-                          hasNoInitialSelection={true}
-                          id="random_html_id"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          options={Array []}
-                          value=""
-                        >
-                          <EuiFormControlLayout
-                            compressed={false}
-                            fullWidth={false}
-                            icon={
-                              Object {
-                                "side": "right",
-                                "type": "arrowDown",
-                              }
-                            }
-                            inputId="random_html_id"
-                            isLoading={false}
+                          <EuiFormRow
+                            describedByIds={Array []}
+                            display="row"
+                            error={false}
+                            fullWidth={true}
+                            hasChildLabel={true}
+                            hasEmptyLabelSpace={false}
+                            isInvalid={false}
+                            label="Index"
+                            labelType="label"
                           >
                             <div
-                              className="euiFormControlLayout"
+                              className="euiFormRow euiFormRow--fullWidth"
+                              id="random_html_id-row"
                             >
                               <div
-                                className="euiFormControlLayout__childrenWrapper"
+                                className="euiFormRow__labelWrapper"
                               >
-                                <EuiValidatableControl>
-                                  <select
-                                    aria-label="Search Index"
-                                    className="euiSelect"
-                                    id="random_html_id"
-                                    onBlur={[Function]}
-                                    onChange={[Function]}
-                                    onFocus={[Function]}
-                                    onMouseUp={[Function]}
-                                    value=""
+                                <EuiFormLabel
+                                  aria-invalid={false}
+                                  className="euiFormRow__label"
+                                  htmlFor="random_html_id"
+                                  isFocused={false}
+                                  isInvalid={false}
+                                  type="label"
+                                >
+                                  <label
+                                    aria-invalid={false}
+                                    className="euiFormLabel euiFormRow__label"
+                                    htmlFor="random_html_id"
                                   >
-                                    <option
-                                      disabled={true}
-                                      hidden={true}
-                                      style={
-                                        Object {
-                                          "display": "none",
-                                        }
+                                    Index
+                                  </label>
+                                </EuiFormLabel>
+                              </div>
+                              <div
+                                className="euiFormRow__fieldWrapper"
+                              >
+                                <EuiSelect
+                                  aria-label="Search Index"
+                                  hasNoInitialSelection={true}
+                                  id="random_html_id"
+                                  onBlur={[Function]}
+                                  onChange={[Function]}
+                                  onFocus={[Function]}
+                                  options={Array []}
+                                  value=""
+                                >
+                                  <EuiFormControlLayout
+                                    compressed={false}
+                                    fullWidth={false}
+                                    icon={
+                                      Object {
+                                        "side": "right",
+                                        "type": "arrowDown",
                                       }
-                                      value=""
+                                    }
+                                    inputId="random_html_id"
+                                    isLoading={false}
+                                  >
+                                    <div
+                                      className="euiFormControlLayout"
                                     >
-                                       
-                                    </option>
-                                  </select>
-                                </EuiValidatableControl>
-                                <EuiFormControlLayoutIcons
+                                      <div
+                                        className="euiFormControlLayout__childrenWrapper"
+                                      >
+                                        <EuiValidatableControl>
+                                          <select
+                                            aria-label="Search Index"
+                                            className="euiSelect"
+                                            id="random_html_id"
+                                            onBlur={[Function]}
+                                            onChange={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseUp={[Function]}
+                                            value=""
+                                          >
+                                            <option
+                                              disabled={true}
+                                              hidden={true}
+                                              style={
+                                                Object {
+                                                  "display": "none",
+                                                }
+                                              }
+                                              value=""
+                                            >
+                                               
+                                            </option>
+                                          </select>
+                                        </EuiValidatableControl>
+                                        <EuiFormControlLayoutIcons
+                                          compressed={false}
+                                          icon={
+                                            Object {
+                                              "side": "right",
+                                              "type": "arrowDown",
+                                            }
+                                          }
+                                          isLoading={false}
+                                        >
+                                          <div
+                                            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                          >
+                                            <EuiFormControlLayoutCustomIcon
+                                              size="m"
+                                              type="arrowDown"
+                                            >
+                                              <span
+                                                className="euiFormControlLayoutCustomIcon"
+                                              >
+                                                <EuiIcon
+                                                  aria-hidden="true"
+                                                  className="euiFormControlLayoutCustomIcon__icon"
+                                                  size="m"
+                                                  type="arrowDown"
+                                                >
+                                                  <EuiIconEmpty
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                    focusable="false"
+                                                    role="img"
+                                                    style={null}
+                                                  >
+                                                    <svg
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                      focusable="false"
+                                                      height={16}
+                                                      role="img"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    />
+                                                  </EuiIconEmpty>
+                                                </EuiIcon>
+                                              </span>
+                                            </EuiFormControlLayoutCustomIcon>
+                                          </div>
+                                        </EuiFormControlLayoutIcons>
+                                      </div>
+                                    </div>
+                                  </EuiFormControlLayout>
+                                </EuiSelect>
+                              </div>
+                            </div>
+                          </EuiFormRow>
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem>
+                        <div
+                          className="euiFlexItem"
+                        >
+                          <EuiFormRow
+                            describedByIds={Array []}
+                            display="row"
+                            fullWidth={true}
+                            hasChildLabel={true}
+                            hasEmptyLabelSpace={false}
+                            helpText="Optional"
+                            label="Pipeline"
+                            labelType="label"
+                          >
+                            <div
+                              className="euiFormRow euiFormRow--fullWidth"
+                              id="random_html_id-row"
+                            >
+                              <div
+                                className="euiFormRow__labelWrapper"
+                              >
+                                <EuiFormLabel
+                                  className="euiFormRow__label"
+                                  htmlFor="random_html_id"
+                                  isFocused={false}
+                                  type="label"
+                                >
+                                  <label
+                                    className="euiFormLabel euiFormRow__label"
+                                    htmlFor="random_html_id"
+                                  >
+                                    Pipeline
+                                  </label>
+                                </EuiFormLabel>
+                              </div>
+                              <div
+                                className="euiFormRow__fieldWrapper"
+                              >
+                                <EuiComboBox
+                                  aria-describedby="random_html_id-help-0"
+                                  async={false}
                                   compressed={false}
-                                  icon={
+                                  fullWidth={false}
+                                  id="random_html_id"
+                                  isClearable={true}
+                                  onBlur={[Function]}
+                                  onChange={[Function]}
+                                  onFocus={[Function]}
+                                  options={Array []}
+                                  placeholder="No pipeline"
+                                  selectedOptions={Array []}
+                                  singleSelection={
                                     Object {
-                                      "side": "right",
-                                      "type": "arrowDown",
+                                      "asPlainText": true,
                                     }
                                   }
-                                  isLoading={false}
+                                  sortMatchesBy="none"
                                 >
                                   <div
-                                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                    aria-describedby="random_html_id-help-0"
+                                    aria-expanded={false}
+                                    aria-haspopup="listbox"
+                                    className="euiComboBox"
+                                    onKeyDown={[Function]}
+                                    role="combobox"
                                   >
-                                    <EuiFormControlLayoutCustomIcon
-                                      size="m"
-                                      type="arrowDown"
+                                    <EuiComboBoxInput
+                                      autoSizeInputRef={[Function]}
+                                      compressed={false}
+                                      fullWidth={false}
+                                      hasSelectedOptions={false}
+                                      id="random_html_id"
+                                      inputRef={[Function]}
+                                      isListOpen={false}
+                                      noIcon={false}
+                                      onChange={[Function]}
+                                      onClear={[Function]}
+                                      onClick={[Function]}
+                                      onCloseListClick={[Function]}
+                                      onFocus={[Function]}
+                                      onOpenListClick={[Function]}
+                                      onRemoveOption={[Function]}
+                                      placeholder="No pipeline"
+                                      rootId={[Function]}
+                                      searchValue=""
+                                      selectedOptions={Array []}
+                                      singleSelection={
+                                        Object {
+                                          "asPlainText": true,
+                                        }
+                                      }
+                                      toggleButtonRef={[Function]}
+                                      updatePosition={[Function]}
+                                      value=""
                                     >
-                                      <span
-                                        className="euiFormControlLayoutCustomIcon"
+                                      <EuiFormControlLayout
+                                        compressed={false}
+                                        fullWidth={false}
+                                        icon={
+                                          Object {
+                                            "aria-label": "Open list of options",
+                                            "data-test-subj": "comboBoxToggleListButton",
+                                            "disabled": undefined,
+                                            "onClick": [Function],
+                                            "ref": [Function],
+                                            "side": "right",
+                                            "type": "arrowDown",
+                                          }
+                                        }
                                       >
-                                        <EuiIcon
-                                          aria-hidden="true"
-                                          className="euiFormControlLayoutCustomIcon__icon"
-                                          size="m"
-                                          type="arrowDown"
+                                        <div
+                                          className="euiFormControlLayout"
                                         >
-                                          <EuiIconEmpty
-                                            aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                            focusable="false"
-                                            role="img"
-                                            style={null}
+                                          <div
+                                            className="euiFormControlLayout__childrenWrapper"
                                           >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                              focusable="false"
-                                              height={16}
-                                              role="img"
-                                              style={null}
-                                              viewBox="0 0 16 16"
-                                              width={16}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            />
-                                          </EuiIconEmpty>
-                                        </EuiIcon>
-                                      </span>
-                                    </EuiFormControlLayoutCustomIcon>
+                                            <div
+                                              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                                              data-test-subj="comboBoxInput"
+                                              onClick={[Function]}
+                                              tabIndex={-1}
+                                            >
+                                              <p
+                                                className="euiComboBoxPlaceholder"
+                                              >
+                                                No pipeline
+                                              </p>
+                                              <AutosizeInput
+                                                aria-controls=""
+                                                className="euiComboBox__input"
+                                                data-test-subj="comboBoxSearchInput"
+                                                id="random_html_id"
+                                                injectStyles={true}
+                                                inputRef={[Function]}
+                                                minWidth={1}
+                                                onBlur={[Function]}
+                                                onChange={[Function]}
+                                                onFocus={[Function]}
+                                                role="textbox"
+                                                style={
+                                                  Object {
+                                                    "fontSize": 14,
+                                                  }
+                                                }
+                                                value=""
+                                              >
+                                                <div
+                                                  className="euiComboBox__input"
+                                                  style={
+                                                    Object {
+                                                      "display": "inline-block",
+                                                      "fontSize": 14,
+                                                    }
+                                                  }
+                                                >
+                                                  <input
+                                                    aria-controls=""
+                                                    data-test-subj="comboBoxSearchInput"
+                                                    id="random_html_id"
+                                                    onBlur={[Function]}
+                                                    onChange={[Function]}
+                                                    onFocus={[Function]}
+                                                    role="textbox"
+                                                    style={
+                                                      Object {
+                                                        "boxSizing": "content-box",
+                                                        "width": "2px",
+                                                      }
+                                                    }
+                                                    value=""
+                                                  />
+                                                  <div
+                                                    style={
+                                                      Object {
+                                                        "height": 0,
+                                                        "left": 0,
+                                                        "overflow": "scroll",
+                                                        "position": "absolute",
+                                                        "top": 0,
+                                                        "visibility": "hidden",
+                                                        "whiteSpace": "pre",
+                                                      }
+                                                    }
+                                                  />
+                                                </div>
+                                              </AutosizeInput>
+                                            </div>
+                                            <EuiFormControlLayoutIcons
+                                              compressed={false}
+                                              icon={
+                                                Object {
+                                                  "aria-label": "Open list of options",
+                                                  "data-test-subj": "comboBoxToggleListButton",
+                                                  "disabled": undefined,
+                                                  "onClick": [Function],
+                                                  "ref": [Function],
+                                                  "side": "right",
+                                                  "type": "arrowDown",
+                                                }
+                                              }
+                                            >
+                                              <div
+                                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                              >
+                                                <EuiFormControlLayoutCustomIcon
+                                                  aria-label="Open list of options"
+                                                  data-test-subj="comboBoxToggleListButton"
+                                                  iconRef={[Function]}
+                                                  onClick={[Function]}
+                                                  size="m"
+                                                  type="arrowDown"
+                                                >
+                                                  <button
+                                                    aria-label="Open list of options"
+                                                    className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                                    data-test-subj="comboBoxToggleListButton"
+                                                    onClick={[Function]}
+                                                    type="button"
+                                                  >
+                                                    <EuiIcon
+                                                      aria-hidden="true"
+                                                      className="euiFormControlLayoutCustomIcon__icon"
+                                                      size="m"
+                                                      type="arrowDown"
+                                                    >
+                                                      <EuiIconEmpty
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                        focusable="false"
+                                                        role="img"
+                                                        style={null}
+                                                      >
+                                                        <svg
+                                                          aria-hidden={true}
+                                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                          focusable="false"
+                                                          height={16}
+                                                          role="img"
+                                                          style={null}
+                                                          viewBox="0 0 16 16"
+                                                          width={16}
+                                                          xmlns="http://www.w3.org/2000/svg"
+                                                        />
+                                                      </EuiIconEmpty>
+                                                    </EuiIcon>
+                                                  </button>
+                                                </EuiFormControlLayoutCustomIcon>
+                                              </div>
+                                            </EuiFormControlLayoutIcons>
+                                          </div>
+                                        </div>
+                                      </EuiFormControlLayout>
+                                    </EuiComboBoxInput>
                                   </div>
-                                </EuiFormControlLayoutIcons>
+                                </EuiComboBox>
+                                <EuiFormHelpText
+                                  className="euiFormRow__text"
+                                  id="random_html_id-help-0"
+                                  key="Optional"
+                                >
+                                  <div
+                                    className="euiFormHelpText euiFormRow__text"
+                                    id="random_html_id-help-0"
+                                  >
+                                    Optional
+                                  </div>
+                                </EuiFormHelpText>
                               </div>
                             </div>
-                          </EuiFormControlLayout>
-                        </EuiSelect>
-                      </div>
+                          </EuiFormRow>
+                        </div>
+                      </EuiFlexItem>
                     </div>
-                  </EuiFormRow>
+                  </EuiFlexGroup>
                   <EuiFormRow
                     describedByIds={Array []}
                     display="row"
diff --git a/public/components/query_compare/search_result/search_components/__tests__/search_config.test.tsx b/public/components/query_compare/search_result/search_components/__tests__/search_config.test.tsx
index 5b2bd79..20804ad 100644
--- a/public/components/query_compare/search_result/search_components/__tests__/search_config.test.tsx
+++ b/public/components/query_compare/search_result/search_components/__tests__/search_config.test.tsx
@@ -18,6 +18,7 @@ describe('Flyout component', () => {
   it('Renders flyout component', async () => {
     const setQueryString = jest.fn();
     const setSelectedIndex = jest.fn();
+    const setPipeline = jest.fn();
     const setQueryError = jest.fn();
     const wrapper = mount(
       <SearchRelevanceContextProvider>
@@ -27,6 +28,8 @@ describe('Flyout component', () => {
           setQueryString={setQueryString}
           selectedIndex={''}
           setSelectedIndex={setSelectedIndex}
+          pipeline={''}
+          setPipeline={setPipeline}
           queryError={initialQueryErrorState}
           setQueryError={setQueryError}
         />