Enhancement/12555 kmw extended

assets/js/components/KeyMetrics/KeyMetricsPDF.test.tsx

@@ -144,29 +144,29 @@ describe( 'KeyMetricsPDF', () => {
 		} );
 	} );
 
-	it( 'drops a tile whose data is null rather than showing a placeholder', () => {
-		const TileComponent = jest.fn( () => null );
-
+	it( 'renders exactly the tiles it is given, so the grid reflows with no gaps', () => {
+		// The aggregate loader drops no-data tiles before this component, so every
+		// tile here renders and there is no per-tile placeholder.
 		const tree = render( [
 			{
 				slug: 'metricA',
 				title: 'New visitors',
-				TileComponent,
+				TileComponent: NumericTile,
 				data: { value: '42' },
 			},
 			{
-				slug: 'metricB',
-				title: 'Returning visitors',
-				TileComponent,
-				data: null,
+				slug: 'metricC',
+				title: 'Visit length',
+				TileComponent: NumericTile,
+				data: { value: '3m' },
 			},
 		] );
 
 		const text = findTextStrings( tree ).join( ' ' );
+		expect( text ).toContain( 'New visitors: 42' );
+		expect( text ).toContain( 'Visit length: 3m' );
 		// No placeholder copy is ever rendered.
 		expect( text ).not.toContain( 'Data unavailable' );
-		// The failed tile is dropped; only the tile with data renders.
-		expect( TileComponent ).toHaveBeenCalledTimes( 1 );
 	} );
 
 	it( 'renders no tiles when the tile list is empty', () => {

assets/js/components/KeyMetrics/KeyMetricsPDF.tsx

@@ -40,7 +40,10 @@ const styles = createPDFStyles( {
 		marginBottom: 24,
 	},
 	tileInner: {
-		// A small gutter between the grid columns.
+		// Fills the tile's height so its card stretches to the row's tallest tile,
+		// giving every tile in a row a uniform height as on the dashboard. The
+		// margin is a small gutter between the grid columns.
+		flexGrow: 1,
 		marginRight: 24,
 	},
 } );
@@ -50,25 +53,23 @@ const KeyMetricsPDF: FC< PDFWidgetComponentProps > = ( { data } ) => {
 
 	return (
 		<View style={ styles.container }>
-			{ tiles
-				.filter( ( tile ) => tile.data )
-				.map( ( tile ) => {
-					const TileComponent = tile.TileComponent;
+			{ tiles.map( ( tile ) => {
+				const TileComponent = tile.TileComponent;
 
-					return (
-						<View key={ tile.slug } style={ styles.tile }>
-							<View style={ styles.tileInner }>
-								<TileComponent
-									title={ tile.title }
-									{ ...( tile.data as Record<
-										string,
-										unknown
-									> ) }
-								/>
-							</View>
+				return (
+					<View key={ tile.slug } style={ styles.tile }>
+						<View style={ styles.tileInner }>
+							<TileComponent
+								title={ tile.title }
+								{ ...( tile.data as Record<
+									string,
+									unknown
+								> ) }
+							/>
 						</View>
-					);
-				} ) }
+					</View>
+				);
+			} ) }
 		</View>
 	);
 };

assets/js/components/KeyMetrics/create-key-metric-tile-data-loader.test.ts

@@ -66,7 +66,7 @@ describe( 'createKeyMetricTileDataLoader', () => {
 		);
 		const result = await getTileData( { registry, dates: DATES, signal } );
 
-		expect( buildReports ).toHaveBeenCalledWith( DATES );
+		expect( buildReports ).toHaveBeenCalledWith( DATES, registry );
 		expect( dispatch ).toHaveBeenCalledWith( 'test/store-a' );
 		expect( dispatch ).toHaveBeenCalledWith( 'test/store-b' );
 		expect( fetchGetReport ).toHaveBeenCalledWith(

assets/js/components/KeyMetrics/create-key-metric-tile-data-loader.ts

@@ -52,18 +52,28 @@ interface FetchReportResult {
  * threading the export's abort `signal` through each request, then hands the
  * resolved report responses (in the same order) to `extract`, which normalises
  * them into the shape the tile's `TileComponent` consumes. It returns `null`
- * early when the export is canceled, and throws when any report fails so the
- * aggregate loader can skip just that tile.
+ * early when the export is canceled, and throws when one of those fetched
+ * reports fails so the aggregate loader can skip just that tile. `extract`
+ * returns `null` when its report has no data, which the aggregate loader treats
+ * the same way — the tile is left out of the report entirely.
+ *
+ * Note this covers only the reports `buildReports` returns. A report a tile
+ * resolves inside `buildReports` (e.g. to discover page paths) is fetched via
+ * `resolveSelect`, which yields `undefined` rather than throwing on failure, so
+ * such a failure reads as no data, not as a thrown error.
  *
  * @since n.e.x.t
  *
- * @param buildReports Returns the reports to fetch for the given date range.
- * @param extract      Maps the resolved report responses to the tile's data.
+ * @param buildReports Returns the reports to fetch for the date range. It receives the registry too, so a tile whose report options depend on resolved state can await it; it may return a promise.
+ * @param extract      Maps the resolved report responses to the tile's data, or `null` when the report has no data.
  * @return A `getTileData( { registry, dates, signal } )` loader.
  */
 export default function createKeyMetricTileDataLoader< TData >(
-	buildReports: ( dates: PDFReportDates ) => TileReportRequest[],
-	extract: ( reports: unknown[] ) => TData
+	buildReports: (
+		dates: PDFReportDates,
+		registry: GetPDFDataParams[ 'registry' ]
+	) => TileReportRequest[] | Promise< TileReportRequest[] >,
+	extract: ( reports: unknown[] ) => TData | null
 ): ( params: GetPDFDataParams ) => Promise< TData | null > {
 	return async function getTileData( {
 		registry,
@@ -74,7 +84,11 @@ export default function createKeyMetricTileDataLoader< TData >(
 			return null;
 		}
 
-		const requests = buildReports( dates );
+		const requests = await buildReports( dates, registry );
+
+		if ( signal.aborted ) {
+			return null;
+		}
 
 		const results: FetchReportResult[] = await Promise.all(
 			requests.map( ( { moduleStore, options } ) =>