make the SidebarWarningPresenter retrieve validation for a client Id

packages/schema-blocks/src/functions/presenters/BlockSuggestionsPresenter.tsx

@@ -1,8 +1,7 @@
 import { ReactElement } from "react";
 import { BlockInstance, createBlock } from "@wordpress/blocks";
 import { PanelBody } from "@wordpress/components";
-import { BlockPresence, BlockValidation, BlockValidationResult } from "../../core/validation";
-import { getValidationResult } from "../validators";
+import { getValidationResults, getValidationResultForClientId } from "../validators";
 import { createElement } from "@wordpress/element";
 import { getBlockType } from "../BlockHelper";
 import { getInnerblocksByName, insertBlock } from "../innerBlocksHelper";
@@ -70,30 +69,7 @@ function BlockSuggestionAdded( { suggestedBlockTitle, isValid }: BlockSuggestion
 		</li>
 	);
 }
-/**
- * Finds a blockInstance's validation result in a tree of validation results based on the block's clientId.
- * @param clientId The ClientId of the block you want validation results for.
- * @param validationResults The ValidationResult tree to investigate.
- * @returns The BlockValidationResult matching the clientId or null if none were found.
- */
-function GetValidationForClientId( clientId: string, validationResults: BlockValidationResult[] ): BlockValidationResult {
-	for ( const validationResult of validationResults ) {
-		// When the validation result matches the client id. Just return it.
-		if ( validationResult.clientId === clientId ) {
-			return validationResult;
-		}
-
-		// Just keep it calling until we have found a result.
-		if ( validationResult.issues.length > 0 ) {
-			const validation = GetValidationForClientId( clientId, validationResult.issues );
-			if ( validation ) {
-				return validation;
-			}
-		}
-	}
 
-	return null;
-}
 /**
  * Renders a list of suggested blocks.
  *
@@ -112,36 +88,32 @@ export default function BlockSuggestionsPresenter( { heading, parentBlock, sugge
 	}
 
 	const presentBlocks = getInnerblocksByName( parentBlock, filteredSuggestedBlockNames );
-	const validationResult = getValidationResult( parentBlock.clientId );
-	let validationIssues: BlockValidationResult[] = [];
-	if ( validationResult ) {
-		validationIssues = validationResult.issues;
-	}
+	const validationResults = getValidationResults();
 
 	return (
 		<PanelBody key={ heading + parentBlock.clientId }>
-			<div className="yoast-block-sidebar-title">{ heading }</div>
+			<div className="yoast-block-sidebaryarn lint-fix-title">{ heading }</div>
 			<ul className="yoast-block-suggestions">
 				{
 					filteredSuggestedBlockNames.map( ( suggestedBlockName: string, index: number ) => {
 						const suggestedBlockType = getBlockType( suggestedBlockName );
+
 						const existingBlock = presentBlocks.find( block => block.name === suggestedBlockName );
 						if ( existingBlock ) {
-							const validation = GetValidationForClientId( existingBlock.clientId, validationIssues ) ||
-								new BlockValidationResult(
-									existingBlock.clientId,
-									existingBlock.name,
-									BlockValidation.Unknown,
-									BlockPresence.Unknown );
+							// Find the validation result for this block.
+							const validation = getValidationResultForClientId( existingBlock.clientId, validationResults );
+							// If the validation was found, and it is completely OK, we will add a check mark.
+							const isTheBlockValid = validation && isValidResult( validation.result );
 
-							const isTheBlockValid = isValidResult( validation.result );
+							// Show the validation result.
 							return <BlockSuggestionAdded
 								key={ index }
 								isValid={ isTheBlockValid }
 								suggestedBlockTitle={ suggestedBlockType.title }
 							/>;
 						}
 
+						// Show the suggestion to add an instance of this block.
 						return <BlockSuggestion
 							key={ index }
 							suggestedBlockTitle={ suggestedBlockType.title }

packages/schema-blocks/src/functions/presenters/SidebarWarningPresenter.ts

@@ -2,7 +2,7 @@ import { __, sprintf } from "@wordpress/i18n";
 import { BlockValidation, BlockValidationResult } from "../../core/validation";
 import { getHumanReadableBlockName } from "../BlockHelper";
 import { BlockPresence } from "../../core/validation/BlockValidationResult";
-import { getAllDescendantIssues, getValidationResult } from "../validators";
+import { getAllDescendantIssues } from "../validators";
 
 /**
  * A warning message for in the sidebar schema analysis.
@@ -124,19 +124,3 @@ export function sanitizeParentName( parent: string ): string {
 
 	return parent.toLowerCase();
 }
-
-/**
- * Converts the validation results for a block instance with the given clientId to a presentable text.
- *
- * @param clientId The clientId to request validation results for.
- *
- * @returns {string} The presentable warning message, or null if no warnings are found.
- */
-export default function getWarnings( clientId: string ): SidebarWarning[] {
-	const validation: BlockValidationResult = getValidationResult( clientId );
-	if ( ! validation ) {
-		return null;
-	}
-
-	return createAnalysisMessages( validation );
-}

packages/schema-blocks/src/functions/validators/getValidationResult.ts

@@ -9,13 +9,44 @@ type clientIdValidation = Record<string, BlockValidationResult>;
  *
  * @param clientId The clientId to request validation results for.
  *
- * @returns {BlockValidationResult} The validation results, or null if none were found.
+ * @returns The validation results, or null if none were found.
  */
-export default function getValidationResult( clientId: string ): BlockValidationResult | null {
+export function getValidationResults(): BlockValidationResult[] | null {
 	const validationResults: clientIdValidation = select( YOAST_SCHEMA_BLOCKS_STORE_NAME ).getSchemaBlocksValidationResults();
 	if ( ! validationResults ) {
 		return null;
 	}
 
-	return validationResults[ clientId ];
+	const validations: BlockValidationResult[] = Object.values( validationResults );
+	return validations;
+}
+
+/**
+ * Recursively traverses a BlockValidationResult's issues to finds the validation results for a specific clientId.
+ * @param clientId The ClientId of the block you want validation results for.
+ * @param validationResults The (partial) ValidationResult tree to investigate; reads the entire tree from the store by default.
+ * @returns The BlockValidationResult matching the clientId or null if none were found.
+ */
+export function getValidationResultForClientId( clientId: string, validationResults?: BlockValidationResult[] ): BlockValidationResult {
+	if ( ! validationResults ) {
+		validationResults = getValidationResults();
+	}
+
+	for ( const validationResult of validationResults ) {
+		// When the validation result matches the client id, return it.
+		if ( validationResult.clientId === clientId ) {
+			return validationResult;
+		}
+
+		// Just keep driving down the tree calling until we have found the result.
+		if ( validationResult.issues.length > 0 ) {
+			const validation = getValidationResultForClientId( clientId, validationResult.issues );
+			if ( validation ) {
+				return validation;
+			}
+		}
+	}
+
+	// We haven't found the result down this tree.
+	return null;
 }

packages/schema-blocks/src/functions/validators/index.ts

@@ -2,12 +2,13 @@ import attributeExists from "./attributeExists";
 import attributeNotEmpty from "./attributeNotEmpty";
 import getAllDescendantIssues from "./getAllDescendantIssues";
 import getInvalidInnerBlocks from "./innerBlocksValid";
-import getValidationResult from "./getValidationResult";
+import { getValidationResults, getValidationResultForClientId } from "./getValidationResult";
 
 export {
 	attributeExists,
 	attributeNotEmpty,
 	getAllDescendantIssues,
 	getInvalidInnerBlocks,
-	getValidationResult,
+	getValidationResults,
+	getValidationResultForClientId,
 };

packages/schema-blocks/tests/functions/presenters/BlockSuggestions.test.ts

@@ -14,7 +14,7 @@ jest.mock( "@wordpress/blocks", () => {
 
 jest.mock( "../../../src/functions/validators", () => {
 	return {
-		getValidationResult: jest.fn( () => {
+		getValidationResults: jest.fn( () => {
 			return new BlockValidationResult( "1", "yoast/valid-block", -1, BlockPresence.Required, "Is not that present" );
 		} ),
 		getAllDescendantIssues: jest.fn( () => {
@@ -34,7 +34,7 @@ jest.mock( "../../../src/functions/BlockHelper", () => {
 			}
 
 			return {
-				title: "The required block",
+				heading: "The required block",
 			};
 		} ),
 	};
@@ -47,6 +47,7 @@ jest.mock( "../../../src/functions/innerBlocksHelper", () => {
 			return [
 				{
 					name: "yoast/added-to-content",
+					clientId: "existingBlockClientId",
 				},
 			];
 		} ),
@@ -55,41 +56,41 @@ jest.mock( "../../../src/functions/innerBlocksHelper", () => {
 
 describe( "The required blocks in the sidebar", () => {
 	it( "doesn't have the required block being registered as a block", () => {
-		const block = { innerBlocks: [] } as BlockInstance;
+		const parentBlock = { innerBlocks: [] } as BlockInstance;
 		const requiredBlocks = [ "yoast/nonexisting" ];
 
-		const actual = BlockSuggestionsPresenter( { title: "Required blocks", block, suggestions: requiredBlocks } );
+		const actual = BlockSuggestionsPresenter( { heading: "Required blocks", parentBlock, suggestedBlockNames: requiredBlocks } );
 
 		expect( actual ).toBe( null );
 	} );
 
 	it( "renders the required block as an added one", () => {
-		const block = { innerBlocks: [] } as BlockInstance;
+		const parentBlock = { innerBlocks: [] } as BlockInstance;
 		const requiredBlocks = [ "yoast/added-to-content"  ];
 
 		const tree = renderer
-			.create( BlockSuggestionsPresenter( { title: "Required blocks", block, suggestions: requiredBlocks } ) )
+			.create( BlockSuggestionsPresenter( { heading: "Required blocks", parentBlock, suggestedBlockNames: requiredBlocks } ) )
 			.toJSON();
 
 		expect( tree ).toMatchSnapshot();
 	} );
 
 	it( "renders the required block as a non-added one", () => {
-		const block = { innerBlocks: [] } as BlockInstance;
+		const parentBlock = { innerBlocks: [] } as BlockInstance;
 		const requiredBlocks = [ "yoast/non-added-to-content" ];
 
 		const tree = renderer
-			.create( BlockSuggestionsPresenter( { title: "Required blocks", block, suggestions: requiredBlocks } ) )
+			.create( BlockSuggestionsPresenter( { heading: "Required blocks", parentBlock, suggestedBlockNames: requiredBlocks } ) )
 			.toJSON();
 
 		expect( tree ).toMatchSnapshot();
 	} );
 
 	it( "should call the function to add the block when the button is clicked.", () => {
-		const block = { innerBlocks: [], clientId: "1" } as BlockInstance;
+		const parentBlock = { innerBlocks: [], clientId: "1" } as BlockInstance;
 		const requiredBlocks = [ "yoast/non-added-to-content" ];
 
-		const tree = mount( BlockSuggestionsPresenter( { title: "Required blocks", block, suggestions: requiredBlocks } )  );
+		const tree = mount( BlockSuggestionsPresenter( { heading: "Required blocks", parentBlock, suggestedBlockNames: requiredBlocks } )  );
 
 		const addButton = tree.find( "button" ).first();
 

packages/schema-blocks/tests/functions/presenters/SidebarWarningPresenter.test.ts

@@ -1,5 +1,5 @@
 import { BlockValidation, BlockValidationResult } from "../../../src/core/validation";
-import getWarnings, { createAnalysisMessages } from "../../../src/functions/presenters/SidebarWarningPresenter";
+import { createAnalysisMessages } from "../../../src/functions/presenters/SidebarWarningPresenter";
 import { BlockPresence } from "../../../src/core/validation/BlockValidationResult";
 import { BlockInstance } from "@wordpress/blocks";
 
@@ -133,56 +133,4 @@ describe( "The SidebarWarningPresenter ", () => {
 			} );
 		} );
 	} );
-
-	describe( "The getWarnings method ", () => {
-		it( "creates a compliment for required valid blocks.", () => {
-			validations[ "1" ] = new BlockValidationResult( "1", "myBlock", BlockValidation.Valid, BlockPresence.Required );
-
-			const result = getWarnings( "1" );
-
-			expect( result ).toEqual( [ {
-				text: "Good job! All required blocks have been completed.",
-				color: "green",
-			} ] );
-		} );
-
-		it( "creates a compliment if we do not have copy for any of the validations of the required blocks.", () => {
-			const testcase = new BlockValidationResult( "1", "myBlock", BlockValidation.Invalid, BlockPresence.Required );
-			testcase.issues.push( new BlockValidationResult( "2", "innerblock1", BlockValidation.Skipped, BlockPresence.Required ) );
-			testcase.issues.push( new BlockValidationResult( "3", "anotherinnerblock", BlockValidation.TooMany, BlockPresence.Required ) );
-			testcase.issues.push( new BlockValidationResult( "4", "anotherinnerblock", BlockValidation.Unknown, BlockPresence.Required ) );
-			validations[ "1" ] = testcase;
-
-			const result = getWarnings( "1" );
-
-			expect( result ).toEqual( [ {
-				text: "Good job! All required blocks have been completed.",
-				color: "green",
-			} ] );
-		} );
-
-		it( "creates a warning for a required block with validation problems.", () => {
-			const testcase = new BlockValidationResult( "1", "myBlock", BlockValidation.Invalid, BlockPresence.Required );
-			testcase.issues.push( BlockValidationResult.MissingBlock( "innerblock1", BlockPresence.Required ) );
-			validations[ "1" ] = testcase;
-
-			const result = getWarnings( "1" );
-
-			expect( result.length ).toEqual( 2 );
-			expect( result[ 0 ] ).toEqual( {
-				text: "The `innerblock1` block is required but missing.",
-				color: "red",
-			} );
-			expect( result[ 1 ] ).toEqual( {
-				text: "Not all required blocks have been completed! No myblock schema will be generated for your page.",
-				color: "red",
-			} );
-		} );
-	} );
-
-	it( "creates no output when the validation results cannot be retrieved.", () => {
-		const result = getWarnings( "123" );
-
-		expect( result ).toBeNull();
-	} );
 } );