From 8aa7606a21e25741eb131b648733c3da67a56487 Mon Sep 17 00:00:00 2001
From: Justin Kambic <jk@elastic.co>
Date: Mon, 22 Apr 2024 12:56:15 -0400
Subject: [PATCH] [Observability Onboarding] Hide integrations grid when search
 term is cleared (#180979)

## Summary

Resolves #180821.
Resolves #180813.
Resolves [#180811](https://github.com/elastic/kibana/issues/180811).

As noted in the linked issue, we want to clear the integrations list
whenever the search bar's query is empty.

### Testing

You should see the list disappear whenever the search query is empty.
Collection selection and user-entered queries should continue to operate
normally.

### Note

A possible area of improvement is the janky behavior when clearing a
large list, or as the user is entering a query. This is captured a bit
in the attached GIF. I played with using the `visibility` property of
the list's container but this has the opposite negative side effect of
causing the page to stay very large when the list is hidden.


![20240416162832](https://github.com/elastic/kibana/assets/18429259/d8f01ec5-5cfa-42c3-9e30-a7c1dcf0dd37)

---------

Co-authored-by: Joe Reuter <johannes.reuter@elastic.co>
---
 .../use_custom_cards_for_category.ts          |  4 ++--
 .../application/packages_list/index.tsx       | 20 +++++--------------
 .../public/application/packages_list/utils.ts |  2 +-
 3 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/use_custom_cards_for_category.ts b/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/use_custom_cards_for_category.ts
index f6031ce97f1593..a9cc265b753afa 100644
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/use_custom_cards_for_category.ts
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/use_custom_cards_for_category.ts
@@ -132,11 +132,11 @@ export function useCustomCardsForCategory(
           integration: '',
         },
         {
-          id: 'logs-logs',
+          id: 'custom-logs',
           type: 'generated',
           title: 'Stream log files',
           description: 'Stream any logs into Elastic in a simple way and explore their data',
-          name: 'logs-logs-generated',
+          name: 'custom-logs-generated',
           categories: ['observability'],
           icons: [
             {
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/packages_list/index.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/packages_list/index.tsx
index 77d38e11596084..85627f9411bf32 100644
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/packages_list/index.tsx
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/packages_list/index.tsx
@@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiButton, EuiCallOut, EuiSearchBar, EuiSkeletonText } from '@elastic/eui';
 import { css } from '@emotion/react';
-import React, { useRef, Suspense, useState } from 'react';
+import React, { useRef, Suspense } from 'react';
 import useAsyncRetry from 'react-use/lib/useAsyncRetry';
 import { PackageList, fetchAvailablePackagesHook } from './lazy';
 import { useIntegrationCardList } from './use_integration_card_list';
@@ -54,7 +54,6 @@ const PackageListGridWrapper = ({
   customCards,
   joinCardLists = false,
 }: WrapperProps) => {
-  const [isInitialHidden, setIsInitialHidden] = useState(showSearchBar);
   const customMargin = useCustomMargin();
   const { filteredCards, isLoading } = useAvailablePackages({
     prereleaseIntegrationsEnabled: false,
@@ -67,15 +66,9 @@ const PackageListGridWrapper = ({
     joinCardLists
   );
 
-  React.useEffect(() => {
-    if (isInitialHidden && searchQuery) {
-      setIsInitialHidden(false);
-    }
-  }, [searchQuery, isInitialHidden]);
+  if (isLoading) return <Loading />;
 
-  if (!isInitialHidden && isLoading) return <Loading />;
-
-  const showPackageList = (showSearchBar && !isInitialHidden) || showSearchBar === false;
+  const showPackageList = (showSearchBar && !!searchQuery) || showSearchBar === false;
 
   return (
     <Suspense fallback={<Loading />}>
@@ -91,12 +84,9 @@ const PackageListGridWrapper = ({
                 incremental: true,
               }}
               onChange={(arg) => {
-                if (setSearchQuery) {
-                  setSearchQuery(arg.queryText);
-                }
-                setIsInitialHidden(false);
+                setSearchQuery?.(arg.queryText);
               }}
-              query={searchQuery}
+              query={searchQuery ?? ''}
             />
           </div>
         )}
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/packages_list/utils.ts b/x-pack/plugins/observability_solution/observability_onboarding/public/application/packages_list/utils.ts
index 014aa4314f104b..22552f9df44fab 100644
--- a/x-pack/plugins/observability_solution/observability_onboarding/public/application/packages_list/utils.ts
+++ b/x-pack/plugins/observability_solution/observability_onboarding/public/application/packages_list/utils.ts
@@ -7,7 +7,7 @@
 
 import { IntegrationCardItem } from '@kbn/fleet-plugin/public';
 
-export const QUICKSTART_FLOWS = ['kubernetes', 'nginx', 'system-logs-generated'];
+export const QUICKSTART_FLOWS = ['system-logs-generated', 'custom-logs-generated'];
 
 export const toCustomCard = (card: IntegrationCardItem) => ({
   ...card,