ref(onboarding): Add onLoad & onProductSelectionLoad props (#77773)

static/app/components/onboarding/gettingStartedDoc/onboardingLayout.tsx

@@ -74,6 +74,7 @@ export function OnboardingLayout({
     onPlatformOptionsChange,
     onProductSelectionChange,
     onPageLoad,
+    onProductSelectionLoad,
   } = useMemo(() => {
     const doc = docsConfig[configType] ?? docsConfig.onboarding;
 
@@ -112,6 +113,7 @@ export function OnboardingLayout({
       nextSteps: doc.nextSteps?.(docParams) || [],
       onPlatformOptionsChange: doc.onPlatformOptionsChange?.(docParams),
       onProductSelectionChange: doc.onProductSelectionChange?.(docParams),
+      onProductSelectionLoad: doc.onProductSelectionLoad?.(docParams),
       onPageLoad: doc.onPageLoad?.(docParams),
     };
   }, [
@@ -149,6 +151,7 @@ export function OnboardingLayout({
               platform={platformKey}
               projectId={projectId}
               onChange={onProductSelectionChange}
+              onLoad={onProductSelectionLoad}
             />
           )}
           {platformOptions && !['customMetricsOnboarding'].includes(configType) ? (

static/app/components/onboarding/gettingStartedDoc/types.ts

@@ -94,6 +94,7 @@ export interface OnboardingConfig<
         platformOptions: SelectedPlatformOptions<PlatformOptions>
       ) => void;
       onProductSelectionChange?: (products: ProductSolution[]) => void;
+      onProductSelectionLoad?: (products: ProductSolution[]) => void;
     },
     DocsParams<PlatformOptions>
   > {}

static/app/components/onboarding/productSelection.tsx

@@ -297,7 +297,11 @@ export type ProductSelectionProps = {
   /**
    * Fired when the product selection changes
    */
-  onChange?: (product: ProductSolution[]) => void;
+  onChange?: (products: ProductSolution[]) => void;
+  /**
+   * Triggered when the component is loaded
+   */
+  onLoad?: (products: ProductSolution[]) => void;
   /**
    * The platform key of the project (e.g. javascript-react, python-django, etc.)
    */
@@ -306,10 +310,6 @@ export type ProductSelectionProps = {
    * A custom list of products per platform. If not provided, the default list is used.
    */
   productsPerPlatform?: Record<PlatformKey, ProductSolution[]>;
-  /**
-   * If true, the component has a bottom margin of 20px
-   */
-  withBottomMargin?: boolean;
 };
 
 export function ProductSelection({
@@ -319,6 +319,7 @@ export function ProductSelection({
   productsPerPlatform = platformProductAvailability,
   projectId,
   onChange,
+  onLoad,
 }: ProductSelectionProps) {
   const [params, setParams] = useOnboardingQueryParams();
   const urlProducts = useMemo(() => params.product ?? [], [params.product]);
@@ -337,6 +338,7 @@ export function ProductSelection({
   }, [products, disabledProducts]);
 
   useEffect(() => {
+    onLoad?.(defaultProducts);
     setParams({
       showLoader:
         supportLoader && params.showLoader === undefined ? true : params.showLoader,

static/app/types/hooks.tsx

@@ -123,12 +123,10 @@ type OrganizationHeaderProps = {
   organization: Organization;
 };
 
-type ProductSelectionAvailabilityProps = Pick<
+type ProductSelectionAvailabilityProps = Omit<
   ProductSelectionProps,
-  'platform' | 'withBottomMargin' | 'projectId' | 'onChange'
-> & {
-  organization: Organization;
-};
+  'disabledProducts' | 'productsPerPlatform'
+>;
 
 type FirstPartyIntegrationAlertProps = {
   integrations: Integration[];