Blueprints: Add validation warning display to the deeplink flow

[ivan-ottinger]

Related issues

• STU-1047

Proposed Changes

• add warning notice to the blueprint deeplink flow if the related blueprint includes unsupported features
• extract out BlueprintWarningNotice and BlueprintIssuesModal components into separate file
• adjust related unit tests

Testing Instructions

1. Check out the PR branch and build the app with npm install && npm start.
2. Try to open a blueprint deeplink that has some unsupported features, e.g.:

wp-studio://add-site?blueprint=eyJtZXRhIjp7InRpdGxlIjoiVGhpcyBpcyBhIHRlc3QgYmx1ZXByaW50IiwiZGVzY3JpcHRpb24iOiJJdCBpbnN0YWxscyBBc3RyYSB0aGVtZSBhbmQgWW9hc3QgU0VPIHBsdWdpbiIsImF1dGhvciI6Iml2YW4iLCJjYXRlZ29yaWVzIjpbInJzcyIsInNvY2lhbCB3ZWIiXX0sInByZWZlcnJlZFZlcnNpb25zIjp7InBocCI6IjguMyIsIndwIjoibGF0ZXN0In0sInN0ZXBzIjpbeyJzdGVwIjoiaW5zdGFsbFRoZW1lIiwidGhlbWVEYXRhIjp7InJlc291cmNlIjoid29yZHByZXNzLm9yZy90aGVtZXMiLCJzbHVnIjoiYXN0cmEifSwib3B0aW9ucyI6eyJhY3RpdmF0ZSI6dHJ1ZX19LHsic3RlcCI6Imluc3RhbGxQbHVnaW4iLCJwbHVnaW5EYXRhIjp7InJlc291cmNlIjoid29yZHByZXNzLm9yZy9wbHVnaW5zIiwic2x1ZyI6IndvcmRwcmVzcy1zZW8ifSwib3B0aW9ucyI6eyJhY3RpdmF0ZSI6dHJ1ZX19LHsic3RlcCI6ImxvZ2luIiwidXNlcm5hbWUiOiJhZG1pbiIsInBhc3N3b3JkIjoicGFzc3dvcmQifV19

3. The blueprint deeplink flow should start and display the related warning in the modal (as can be seen in the screenshot above). The warning should render correctly and open up details without any issues.
4. Close the flow and try to add a new site with the existing blueprint flow. Select one of the blueprint files that has unsupported features from 39a4e-pb (e.g. blueprint-portfolio-v1.json).
5. Similarly as in the deeplink flow, the warning should render correctly and open up details without any issues.

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[github-actions]

📊 Performance Test Results

Comparing a1fb2db vs trunk

site-editor

Metric	trunk	a1fb2db	Diff	Change
load	13762.00 ms	12183.00 ms	-1579.00 ms	🟢 -11.5%

site-startup

Metric	trunk	a1fb2db	Diff	Change
siteCreation	25320.00 ms	25411.00 ms	+91.00 ms	🔴 0.4%
siteStartup	9008.00 ms	9018.00 ms	+10.00 ms	🔴 0.1%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change

[gcsecsey]

Thanks @ivan-ottinger, this refactor is really solid IMO. I tested opening Blueprints with unsupported features, and also tested uploading Blueprints in the earlier flow. Everything works as described. 👍

I only have minor, non-blocking comments.

[gcsecsey]

Let's use the same mb-5 rule on the Heading as in blueprints.tsx to make these pages consistent. We could also increase the bottom margin on the notice itself to a mb-6 to make the layout more consistent.

PR	Suggestion	Start from Blueprint

Suggested change

	<Heading className="text-center text-[32px] text-gray-900 mb-5" weight={ 500 }>
	{ __( 'Start from a Blueprint' ) }
	</Heading>
	<BlueprintWarningNotice
	warnings={ warnings }
	fileName={ blueprintTitle }
	className="w-full max-w-4xl mx-auto mb-6"
	/>

[gcsecsey]

WDYT about moving this to a shared place, eg. to blueprint-validation.tsx, and reuse it in BlueprintValidationSuccess and for all other occurences in this PR where we specify { feature: string; reason: string; }?

[gavande1]

Thanks @ivan-ottinger for adding warnings. I have tested and It looks great. LGTM 👍

We definitely need to do something about the modal in terms of designs. Let's add a task to revisit the designs as soon as we have them. But before that, do you think it makes sense to make some changes to improve it even without the designs? Currently, it looks a bit cramped.