Add Blueprint Editor

src/data/blueprint.ts

@@ -1,24 +1,84 @@
+import {
+  mdiAlpha,
+  mdiCalendar,
+  mdiCalendarClock,
+  mdiChat,
+  mdiClock,
+  mdiCodeBraces,
+  mdiCog,
+  mdiCube,
+  mdiDetails,
+  mdiDevices,
+  mdiExclamation,
+  mdiFile,
+  mdiFloorPlan,
+  mdiFormatColorFill,
+  mdiFormDropdown,
+  mdiGestureDoubleTap,
+  mdiGestureTap,
+  mdiGlobeModel,
+  mdiHeadQuestion,
+  mdiLabel,
+  mdiMicrophone,
+  mdiNumeric,
+  mdiPalette,
+  mdiPin,
+  mdiPlayOutline,
+  mdiPuzzle,
+  mdiQrcode,
+  mdiShape,
+  mdiSimpleIcons,
+  mdiSofa,
+  mdiStateMachine,
+  mdiTarget,
+  mdiText,
+  mdiThermostat,
+  mdiTimer,
+  mdiToggleSwitch,
+} from "@mdi/js";
+import type { Schema } from "js-yaml";
+import yaml from "js-yaml";
+import { createContext } from "@lit/context";
 import type { HomeAssistant } from "../types";
-import type { ManualAutomationConfig } from "./automation";
+import type { AutomationClipboard, ManualAutomationConfig } from "./automation";
 import type { ManualScriptConfig } from "./script";
 import type { Selector } from "./selector";
+import { createSearchParam } from "../common/url/search-params";
+import { navigate } from "../common/navigate";
 
 export type BlueprintDomain = "automation" | "script";
 
 export type Blueprints = Record<string, BlueprintOrError>;
 
 export type BlueprintOrError = Blueprint | { error: string };
-export interface Blueprint {
+
+export interface BlueprintBase {
+  blueprint?: BlueprintMetaData;
   metadata: BlueprintMetaData;
 }
 
+export interface AutomationBlueprint
+  extends ManualAutomationConfig,
+    BlueprintBase {}
+export interface ScriptBlueprint extends ManualScriptConfig, BlueprintBase {}
+export type Blueprint = AutomationBlueprint | ScriptBlueprint;
+
+export interface BlueprintMetaDataEditorSchema {
+  name: string;
+  path: string;
+  description: string;
+  author: string;
+  minimum_version: string;
+}
+
 export interface BlueprintMetaData {
   domain: BlueprintDomain;
   name: string;
   input?: Record<string, BlueprintInput | BlueprintInputSection | null>;
   description?: string;
   source_url?: string;
   author?: string;
+  homeassistant?: { min_version: string };
 }
 
 export interface BlueprintInput {
@@ -49,25 +109,35 @@ export interface BlueprintSubstituteResults {
   script: { substituted_config: ManualScriptConfig };
 }
 
+export interface BlueprintGetResult {
+  yaml: string;
+}
+
 export const fetchBlueprints = (hass: HomeAssistant, domain: BlueprintDomain) =>
   hass.callWS<Blueprints>({ type: "blueprint/list", domain });
 
+export const getBlueprint = (
+  hass: HomeAssistant,
+  domain: BlueprintDomain,
+  path: string
+) => hass.callWS<BlueprintGetResult>({ type: "blueprint/get", domain, path });
+
 export const importBlueprint = (hass: HomeAssistant, url: string) =>
   hass.callWS<BlueprintImportResult>({ type: "blueprint/import", url });
 
 export const saveBlueprint = (
   hass: HomeAssistant,
   domain: BlueprintDomain,
   path: string,
-  yaml: string,
+  yamlSource: string,
   source_url?: string,
   allow_override?: boolean
 ) =>
   hass.callWS({
     type: "blueprint/save",
     domain,
     path,
-    yaml,
+    yaml: yamlSource,
     source_url,
     allow_override,
   });
@@ -113,3 +183,78 @@ export const substituteBlueprint = <
     path,
     input,
   });
+
+let initialBlueprintEditorData: Partial<Blueprint> | undefined;
+
+export const showBlueprintEditor = (
+  domain: BlueprintDomain,
+  data?: Partial<Blueprint>,
+  expanded?: boolean
+) => {
+  initialBlueprintEditorData = data;
+
+  const params: Record<string, string> = {};
+  if (expanded) {
+    params.expanded = "1";
+  }
+
+  navigate(`/config/blueprint/edit/${domain}/new?${createSearchParam(params)}`);
+};
+
+export const getBlueprintEditorInitData = () => {
+  const data = initialBlueprintEditorData;
+  initialBlueprintEditorData = undefined;
+  return data;
+};
+
+interface BlueprintClipboardBase {
+  input?: string;
+}
+type AutomationBlueprintClipboard = BlueprintClipboardBase &
+  AutomationClipboard;
+export type BlueprintClipboard = AutomationBlueprintClipboard;
+
+export const INPUT_ICONS = {
+  action: mdiGestureTap,
+  addOn: mdiPuzzle,
+  area: mdiSofa,
+  assistPipeline: mdiChat,
+  attribute: mdiDetails,
+  backupLocation: mdiPin,
+  boolean: mdiToggleSwitch,
+  colorTemperature: mdiThermostat,
+  condition: mdiHeadQuestion,
+  configEntry: mdiCog,
+  constant: mdiExclamation,
+  conversationAgent: mdiMicrophone,
+  country: mdiGlobeModel,
+  date: mdiCalendar,
+  dateAndTime: mdiCalendarClock,
+  device: mdiDevices,
+  duration: mdiTimer,
+  entity: mdiShape,
+  file: mdiFile,
+  floor: mdiFloorPlan,
+  icon: mdiSimpleIcons,
+  label: mdiLabel,
+  language: mdiAlpha,
+  location: mdiPin,
+  media: mdiPlayOutline,
+  number: mdiNumeric,
+  object: mdiCube,
+  qrCode: mdiQrcode,
+  rgbColor: mdiFormatColorFill,
+  select: mdiFormDropdown,
+  state: mdiStateMachine,
+  target: mdiTarget,
+  template: mdiCodeBraces,
+  text: mdiText,
+  theme: mdiPalette,
+  time: mdiClock,
+  trigger: mdiGestureDoubleTap,
+} as const;
+
+const inputTag = new yaml.Type("!input", { kind: "scalar" });
+export const BlueprintYamlSchema = yaml.DEFAULT_SCHEMA.extend([inputTag]);
+
+export const yamlSchemaContext = createContext<Schema>(Symbol("yaml-schema"));

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -183,6 +183,8 @@ export default class HaAutomationActionRow extends LitElement {
   @consume({ context: floorsContext, subscribe: true })
   _floorReg!: Record<string, FloorRegistryEntry>;
 
+  @state() private _warnings?: string[];
+
   @state() private _uiModeAvailable = true;
 
   @state() private _yamlMode = false;
@@ -191,8 +193,6 @@ export default class HaAutomationActionRow extends LitElement {
 
   @state() private _collapsed = true;
 
-  @state() private _warnings?: string[];
-
   @query("ha-automation-action-editor")
   private _actionEditor?: HaAutomationActionEditor;
 

src/panels/config/automation/action/types/ha-automation-action-event.ts

@@ -1,6 +1,9 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
+import type { Schema } from "js-yaml";
+import { DEFAULT_SCHEMA } from "js-yaml";
+import { consume } from "@lit/context";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/entity/ha-entity-picker";
 import "../../../../../components/ha-service-picker";
@@ -11,6 +14,7 @@ import type { EventAction } from "../../../../../data/script";
 import type { HomeAssistant } from "../../../../../types";
 import type { ActionElement } from "../ha-automation-action-row";
 import { handleChangeEvent } from "../ha-automation-action-row";
+import { yamlSchemaContext } from "../../../../../data/blueprint";
 
 @customElement("ha-automation-action-event")
 export class HaEventAction extends LitElement implements ActionElement {
@@ -22,6 +26,9 @@ export class HaEventAction extends LitElement implements ActionElement {
 
   @query("ha-yaml-editor", true) private _yamlEditor?: HaYamlEditor;
 
+  @consume({ context: yamlSchemaContext })
+  private _yamlSchema?: Schema;
+
   private _actionData?: EventAction["event_data"];
 
   public static get defaultConfig(): EventAction {
@@ -60,6 +67,7 @@ export class HaEventAction extends LitElement implements ActionElement {
         .name=${"event_data"}
         .readOnly=${this.disabled}
         .defaultValue=${event_data}
+        .yamlSchema=${this._yamlSchema ?? DEFAULT_SCHEMA}
         @value-changed=${this._dataChanged}
       ></ha-yaml-editor>
     `;

src/panels/config/automation/blueprint-automation-editor.ts

@@ -9,11 +9,11 @@ import "../../../components/ha-markdown";
 import "../../../components/ha-fab";
 import type { BlueprintAutomationConfig } from "../../../data/automation";
 import { fetchBlueprints } from "../../../data/blueprint";
-import { HaBlueprintGenericEditor } from "../blueprint/blueprint-generic-editor";
+import { BlueprintGenericEditor } from "../blueprint/blueprint-generic-editor";
 import { saveFabStyles } from "./styles";
 
 @customElement("blueprint-automation-editor")
-export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor {
+export class BlueprintAutomationEditor extends BlueprintGenericEditor {
   @property({ attribute: false }) public config!: BlueprintAutomationConfig;
 
   @property({ attribute: false }) public stateObj?: HassEntity;
@@ -88,7 +88,7 @@ export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor {
 
   static get styles(): CSSResultGroup {
     return [
-      HaBlueprintGenericEditor.styles,
+      BlueprintGenericEditor.styles,
       saveFabStyles,
       css`
         :host {
@@ -118,6 +118,6 @@ export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor {
 }
 declare global {
   interface HTMLElementTagNameMap {
-    "blueprint-automation-editor": HaBlueprintAutomationEditor;
+    "blueprint-automation-editor": BlueprintAutomationEditor;
   }
 }

src/panels/config/automation/condition/ha-automation-condition-editor.ts

@@ -2,6 +2,7 @@
 import { customElement, property, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
+import { DEFAULT_SCHEMA, Schema } from "js-yaml";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-yaml-editor";
@@ -13,6 +14,8 @@
 import "../ha-automation-editor-warning";
 import { editorStyles, indentStyle } from "../styles";
 import type { ConditionElement } from "./ha-automation-condition-row";
+import { consume } from "@lit/context";
+import { yamlSchemaContext } from "../../../../data/blueprint";
 
 @customElement("ha-automation-condition-editor")
 export default class HaAutomationConditionEditor extends LitElement {
@@ -40,6 +43,9 @@
   @query(COLLAPSIBLE_CONDITION_ELEMENTS.join(", "))
   private _collapsibleElement?: ConditionElement;
 
+  @consume({ context: yamlSchemaContext })
+  private _yamlSchema?: Schema;
+
   private _processedCondition = memoizeOne((condition) =>
     expandConditionWithShorthand(condition)
   );
@@ -74,22 +80,23 @@
                     ></ha-automation-editor-warning>
                   `
                 : nothing}
-              <ha-yaml-editor
-                .hass=${this.hass}
-                .defaultValue=${this.condition}
-                @value-changed=${this._onYamlChange}
-                .readOnly=${this.disabled}
-              ></ha-yaml-editor>
-            `
-          : html`
-              <div @value-changed=${this._onUiChanged}>
-                ${dynamicElement(
-                  `ha-automation-condition-${condition.condition}`,
-                  {
-                    hass: this.hass,
-                    condition: condition,
-                    disabled: this.disabled,
-                    optionsInSidebar: this.indent,
+            <ha-yaml-editor
+              .hass=${this.hass}
+              .defaultValue=${this.condition}
+              @value-changed=${this._onYamlChange}
+              .readOnly=${this.disabled}
+              .yamlSchema=${this._yamlSchema ?? DEFAULT_SCHEMA}
+            ></ha-yaml-editor>
+          `
+        : html`
+            <div @value-changed=${this._onUiChanged}>
+              ${dynamicElement(
+                `ha-automation-condition-${condition.condition}`,
+                {
+                  hass: this.hass,
+                  condition: condition,
+                  disabled: this.disabled,
+                optionsInSidebar: this.indent,
                     narrow: this.narrow,
                   }
                 )}

src/panels/config/automation/ha-automation-editor.ts

@@ -25,6 +25,8 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import type { Schema } from "js-yaml";
+import { DEFAULT_SCHEMA } from "js-yaml";
 import { transform } from "../../../common/decorators/transform";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { goBack, navigate } from "../../../common/navigate";
@@ -57,7 +59,10 @@ import {
   showAutomationEditor,
   triggerAutomationActions,
 } from "../../../data/automation";
-import { substituteBlueprint } from "../../../data/blueprint";
+import {
+  substituteBlueprint,
+  yamlSchemaContext,
+} from "../../../data/blueprint";
 import { validateConfig } from "../../../data/config";
 import { fullEntitiesContext } from "../../../data/context";
 import { UNAVAILABLE } from "../../../data/entity";
@@ -157,6 +162,9 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
   })
   private _registryEntry?: EntityRegistryEntry;
 
+  @consume({ context: yamlSchemaContext })
+  private _yamlSchema?: Schema;
+
   @state() private _saving = false;
 
   @state()
@@ -630,6 +638,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                     .hass=${this.hass}
                     .defaultValue=${this._preprocessYaml()}
                     .readOnly=${this._readOnly}
+                    .yamlSchema=${this._yamlSchema ?? DEFAULT_SCHEMA}
                     @value-changed=${this._yamlChanged}
                     @editor-save=${this._handleSaveAutomation}
                     .showErrors=${false}