[Onboarding] Scroll to the featured cards when clicking on the category (#181438)

Closes https://github.com/elastic/kibana/issues/180827

Adds the logic to wait for the packages to load and scroll them into
view.


38a36c39-c851-449d-ab31-28dccbfd8825

x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx

@@ -6,7 +6,7 @@
  */
 import { i18n } from '@kbn/i18n';
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { FunctionComponent } from 'react';
 import {
@@ -82,8 +82,29 @@ export const OnboardingFlowForm: FunctionComponent = () => {
 
   const [searchParams, setSearchParams] = useSearchParams();
 
-  const packageListRef = React.useRef<HTMLDivElement | null>(null);
+  const [hasPackageListLoaded, setHasPackageListLoaded] = useState<boolean>(false);
+  const onPackageListLoaded = useCallback(() => {
+    setHasPackageListLoaded(true);
+  }, []);
+  const packageListRef = useRef<HTMLDivElement | null>(null);
+  const customCardsRef = useRef<HTMLDivElement | null>(null);
   const [integrationSearch, setIntegrationSearch] = useState(searchParams.get('search') ?? '');
+  const selectedCategory: Category | null = searchParams.get('category') as Category | null;
+
+  useEffect(() => {
+    if (selectedCategory === null || !hasPackageListLoaded) {
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      customCardsRef.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+      });
+    }, 10);
+
+    return () => clearTimeout(timeout);
+  }, [selectedCategory, hasPackageListLoaded]);
 
   useEffect(() => {
     const searchParam = searchParams.get('search') ?? '';
@@ -168,9 +189,11 @@ export const OnboardingFlowForm: FunctionComponent = () => {
 
           {Array.isArray(customCards) && (
             <OnboardingFlowPackageList
+              ref={customCardsRef}
               customCards={customCards}
               flowSearch={integrationSearch}
               flowCategory={searchParams.get('category')}
+              onLoaded={onPackageListLoaded}
             />
           )}
 

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 } from 'react';
+import React, { useRef, Suspense, useEffect } from 'react';
 import useAsyncRetry from 'react-use/lib/useAsyncRetry';
 import { PackageList, fetchAvailablePackagesHook } from './lazy';
 import { useIntegrationCardList } from './use_integration_card_list';
@@ -38,6 +38,7 @@ interface Props {
    * When enabled, custom and integration cards are joined into a single list.
    */
   joinCardLists?: boolean;
+  onLoaded?: () => void;
 }
 
 type WrapperProps = Props & {
@@ -57,6 +58,7 @@ const PackageListGridWrapper = ({
   flowCategory,
   flowSearch,
   joinCardLists = false,
+  onLoaded,
 }: WrapperProps) => {
   const customMargin = useCustomMargin();
   const { filteredCards, isLoading } = useAvailablePackages({
@@ -72,6 +74,12 @@ const PackageListGridWrapper = ({
     joinCardLists
   );
 
+  useEffect(() => {
+    if (!isLoading && onLoaded !== undefined) {
+      onLoaded();
+    }
+  }, [isLoading, onLoaded]);
+
   if (isLoading) return <Loading />;
 
   const showPackageList = (showSearchBar && !!searchQuery) || showSearchBar === false;