From 97f227ef714b3ffe83cbd6a9db5db9d11e6d23fd Mon Sep 17 00:00:00 2001
From: Mykola Harmash <mykola.harmash@gmail.com>
Date: Mon, 28 Oct 2024 12:21:07 +0100
Subject: [PATCH] [Observability Onboarding] Show search bar even when category
 is not selected (#197825)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes https://github.com/elastic/observability-dev/issues/4065 🔒

Fixes an issue when search bar is not visible unless a category is
selected.

![CleanShot 2024-10-25 at 14 53
44@2x](https://github.com/user-attachments/assets/774d2fe2-e4f0-4a46-a851-a0f756a96b12)
---
 .../onboarding_flow_form.tsx                  | 55 ++++++++++---------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
index 9a46cf885b28..eb5ee3bc9236 100644
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
@@ -316,33 +316,34 @@ export const OnboardingFlowForm: FunctionComponent = () => {
             flowCategory={searchParams.get('category')}
           />
         </div>
-        <div ref={searchResultsRef}>
-          <EuiSpacer size="m" />
-          <EuiText size="s" color="subdued">
-            <strong>
-              <FormattedMessage
-                id="xpack.observability_onboarding.experimentalOnboardingFlow.form.searchPromptText"
-                defaultMessage="Search through other ways of ingesting data:"
-              />
-            </strong>
-          </EuiText>
-          <EuiSpacer size="m" />
-          <OnboardingFlowPackageList
-            showSearchBar={true}
-            searchQuery={integrationSearch}
-            flowSearch={integrationSearch}
-            setSearchQuery={setIntegrationSearch}
-            flowCategory={searchParams.get('category')}
-            customCards={customCards
-              ?.filter(
-                // Filter out collection cards and regular integrations that show up via search anyway
-                (card) => card.type === 'virtual' && !card.isCollectionCard
-              )
-              .concat(virtualSearchResults)}
-            excludePackageIdList={searchExcludePackageIdList}
-            joinCardLists
-          />
-        </div>
+      </div>
+
+      <div ref={searchResultsRef}>
+        <EuiSpacer size="xxl" />
+        <EuiText size="s" color="subdued">
+          <strong>
+            <FormattedMessage
+              id="xpack.observability_onboarding.experimentalOnboardingFlow.form.searchPromptText"
+              defaultMessage="Search through other ways of ingesting data:"
+            />
+          </strong>
+        </EuiText>
+        <EuiSpacer size="m" />
+        <OnboardingFlowPackageList
+          showSearchBar={true}
+          searchQuery={integrationSearch}
+          flowSearch={integrationSearch}
+          setSearchQuery={setIntegrationSearch}
+          flowCategory={searchParams.get('category')}
+          customCards={customCards
+            ?.filter(
+              // Filter out collection cards and regular integrations that show up via search anyway
+              (card) => card.type === 'virtual' && !card.isCollectionCard
+            )
+            .concat(virtualSearchResults)}
+          excludePackageIdList={searchExcludePackageIdList}
+          joinCardLists
+        />
       </div>
     </EuiPanel>
   );