[Observability Onboarding] Hide integrations grid when search term is…

… cleared (elastic#180979)

## Summary

Resolves elastic#180821.
Resolves elastic#180813.
Resolves [elastic#180811](elastic#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>

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: [
             {

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>
         )}

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,