Gutenboarding: Squash type errors (#38401)

* Don't create/clone/create for StepperWizard

* Assert correct addQueryArgs type

Author: sirreal

client/landing/gutenboarding/onboarding-block/edit.tsx

@@ -44,10 +44,9 @@ const OnboardingEdit: FunctionComponent< BlockEditProps< Attributes > > = ( {
 								! siteTitle &&
 								NO__( "Let's set up your website – it takes only a moment." ) }
 						</h2>
-						<StepperWizard>
-							<VerticalSelect />
-							{ ( siteVertical || siteTitle ) && <SiteTitle /> }
-						</StepperWizard>
+						<StepperWizard
+							stepComponents={ [ VerticalSelect, ( siteVertical || siteTitle ) && SiteTitle ] }
+						/>
 						{ siteVertical && (
 							<div className="onboarding-block__footer">
 								<Button className="onboarding-block__question-skip" isLink>

client/landing/gutenboarding/onboarding-block/site-title.tsx

@@ -9,10 +9,10 @@ import { __ as NO__ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { STORE_KEY } from '../stores/onboard';
-import { InjectedStepProps } from './stepper-wizard';
+import { StepProps } from './stepper-wizard';
 import Question from './question';
 
-const SiteTitle: FunctionComponent< InjectedStepProps > = ( {
+const SiteTitle: FunctionComponent< StepProps > = ( {
 	onSelect,
 	inputClass,
 	isActive,

client/landing/gutenboarding/onboarding-block/stepper-wizard.tsx

@@ -1,34 +1,41 @@
 /**
  * External dependencies
  */
-import React, { FunctionComponent, useState } from 'react';
+import React, { FunctionComponent, useState, ComponentType } from 'react';
+import { Falsy } from 'utility-types';
 
-export interface InjectedStepProps {
+export interface StepProps {
 	isActive: boolean;
 	onExpand: () => void;
 	onSelect: () => void;
 	inputClass: string;
 }
 
-const StepperWizard: FunctionComponent = ( { children } ) => {
+interface Props {
+	stepComponents: Array< ComponentType< StepProps > | Falsy >;
+	children?: never;
+}
+
+const StepperWizard: FunctionComponent< Props > = ( { stepComponents } ) => {
 	const [ activeStep, setActiveStep ] = useState( 0 );
 
 	const handleNext = () => setActiveStep( activeStep + 1 );
 
 	return (
 		<>
-			{ React.Children.map(
-				children,
-				( child, index ) =>
-					React.isValidElement( child ) &&
-					React.cloneElement< InjectedStepProps >( child, {
-						isActive: index === activeStep,
-						onExpand: () => setActiveStep( index ),
-						onSelect: handleNext,
-						inputClass: 'onboarding-block__question-input',
-					} )
-			) }
+			{ stepComponents.map( ( Komponent, index ) => {
+				return Komponent ? (
+					<Komponent
+						inputClass="onboarding-block__question-input"
+						isActive={ index === activeStep }
+						key={ index }
+						onExpand={ () => setActiveStep( index ) }
+						onSelect={ handleNext }
+					/>
+				) : null;
+			} ) }
 		</>
 	);
 };
+
 export default StepperWizard;

client/landing/gutenboarding/onboarding-block/vertical-select/index.tsx

@@ -12,7 +12,7 @@ import { ENTER } from '@wordpress/keycodes';
  */
 import { STORE_KEY } from '../../stores/onboard';
 import { SiteVertical } from '../../stores/onboard/types';
-import { InjectedStepProps } from '../stepper-wizard';
+import { StepProps } from '../stepper-wizard';
 import Question from '../question';
 import { __TodoAny__ } from '../../../../types';
 
@@ -21,7 +21,7 @@ import { __TodoAny__ } from '../../../../types';
  */
 import './style.scss';
 
-const VerticalSelect: FunctionComponent< InjectedStepProps > = ( {
+const VerticalSelect: FunctionComponent< StepProps > = ( {
 	onSelect,
 	inputClass,
 	isActive,

client/landing/gutenboarding/stores/domain-suggestions/resolvers.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { addQueryArgs } from '@wordpress/url';
+import { addQueryArgs, InputArgsObject } from '@wordpress/url';
 import { apiFetch } from '@wordpress/data-controls';
 
 /**
@@ -25,7 +25,10 @@ export function* __internalGetDomainSuggestions(
 	const suggestions = yield apiFetch( {
 		credentials: 'same-origin',
 		mode: 'cors',
-		url: addQueryArgs( url, queryObject ),
+		// Cast so we can use our closed interface without an index type.
+		// It's likely the type definitions could be improved upstream to allow this:
+		// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/dd4b4bf26c3bf43ea2df913efe70a427969f3731/types/wordpress__url/index.d.ts#L7-L54
+		url: addQueryArgs( url, ( queryObject as unknown ) as InputArgsObject ),
 	} );
 
 	return receiveDomainSuggestions( queryObject, suggestions );