Add Blueprint Editor

[jpitlor]

Proposed change

I wanted to add an editor for Blueprints, similar to Automations and Scripts. Essentially, this creates a page that has an editor for blueprintObject.metadata.input, then embeds the existing automation/script editor.

There was a WTH forum post asking for this. I'm not sure if there were any formal feature requests/roadmap plans, but truthfully this is mostly inspired by my own desire for this feature to exist.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

I don't think any particular configuration is needed to test this, especially since HA comes with a couple blueprints out of the box.

Additional information

• This PR fixes or closes issue: N/A
• This PR is related to issue or discussion: https://community.home-assistant.io/t/wth-cant-we-create-or-edit-blueprints-with-the-ui/469776/5
• Link to documentation pull request: Add Blueprint Editor home-assistant.io#39316
• Link to core pull request: Add websocket command which returns the content of a blueprint core#145863

Additionally, I have concerns about the size of this MR. I think it's quite large. If it should be broken up, I'd love to do that. I just need guidance on the best strategy. However, there are parts of this feature I left out explicitly because of the size:

• a /show route
• Adding support for !inputs in visual selectors
• Selector Configuration Implemented, thanks to feedback from karwosts!
• Validation/testing (of the blueprints, not the code)

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works. I did not do this because it doesn't seem like there's a way to test UI components. At least, I didn't see anything in the test directory. Let me know if there's something I can look at!

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[home-assistant]

Hi @jpitlor

It seems you haven't yet signed a CLA. Please do so here.

Once you do that we will be able to review and accept this pull request.

Thanks!

[home-assistant]

Please take a look at the requested changes, and use the Ready for review button when you are done, thanks 👍

Learn more about our pull request process.

Stale

[jpitlor]

yeesh! sorry gang, that took way longer than I expected. I suppose these things happen with open source development. Thanks again for your patience, this should be ready for review again.

[silamon]

Things will move faster now that core is already approved, I'll give it a review this weekend. Feel free to resolve the linting issues in the meantime.

[jpitlor]

Thanks for pointing that out, I totally missed the email telling me the lint failed! And I haven't been able to run it locally - I'm sure it's user error

[jpitlor]

I totally missed the email that the lint was failing, so sorry about that!

[silamon]

I've had a first test run on this, thank you for working on this.

• Confirmation dialog should be presented when you want to reset to ensure that it's something they want to do and not accidently clicked upon
• Save button could be a fab button on the bottom for ux experience
• Confirmation dialog when you want to pick another blueprint but when the blueprint editor is dirty
• Reset button could be moved to the footer of the card (should be a secondary button)
• Similar to other editors, we can hide the yaml after a switch to yaml/visual menu (is the yaml readonly?)
• After choosing to make a new blueprint, the loadBlueprint is invoked which throws an error that it fails to load the blueprint (same for script);
• We should stay on the page when it goes into fault (no history back)
• Leave the editor fields name and path empty upon creating a new blueprint. (That ensure attention to the fact they need to fill it in correctly.)
• In the add new input, make the cancel button a secondary action.

We'll probably want to make it work the same as the automation editor (so the action and triggers pop up on the right), but we need to look into what changes are needed to make it work correctly.

[silamon]

Linting issues

[silamon]

Place this right after the other lit imports.

[silamon]

I've left some fine tunings in the comments above. If you need help on some of the topics, don't hesitate to ask.

[jpitlor]

Thanks for the feedback! All good points. I'm hoping to address it soon

[silamon]

Thanks for the feedback! All good points. I'm hoping to address it soon

Take your time. Beta cut is on wednesday, but it will probably be after that to merge since it's a big feature you're pulling in.

[jpitlor]

I believe I addressed everything! Let me know if there's something I missed.

Regarding

Similar to other editors, we can hide the yaml after a switch to yaml/visual menu (is the yaml readonly?)

The yaml is readonly - the intention is that this is just a place where you can generate the yaml to then copy to github (or other platforms), and seeing both at the same time is something I introduced when this page moved from the automations/scripts page to the blueprints page. I can implement a yaml/ui switch if that's preferred.