Add support for automation description

src/components/ha-textarea.js

@@ -21,14 +21,19 @@ class HaTextarea extends PolymerElement {
           display: block;
         }
       </style>
-      <paper-textarea label="[[label]]" value="{{value}}"></paper-textarea>
+      <paper-textarea
+        label="[[label]]"
+        placeholder="[[placeholder]]"
+        value="{{value}}"
+      ></paper-textarea>
     `;
   }
 
   static get properties() {
     return {
       name: String,
       label: String,
+      placeholder: String,
       value: {
         type: String,
         notify: true,

src/data/automation.ts

@@ -13,6 +13,7 @@ export interface AutomationEntity extends HassEntityBase {
 
 export interface AutomationConfig {
   alias: string;
+  description: string;
   trigger: any[];
   condition?: any[];
   action: any[];

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

@@ -183,6 +183,7 @@ class HaAutomationEditor extends LitElement {
         alias: this.hass.localize(
           "ui.panel.config.automation.editor.default_name"
         ),
+        description: "",
         trigger: [{ platform: "state" }],
         condition: [],
         action: [{ service: "" }],

src/panels/config/js/automation.tsx

@@ -3,6 +3,7 @@ import { h, Component } from "preact";
 import "@polymer/paper-input/paper-input";
 import "../ha-config-section";
 import "../../../components/ha-card";
+import "../../../components/ha-textarea";
 
 import Trigger from "./trigger/index";
 import Condition from "./condition/index";
@@ -38,7 +39,7 @@ export default class Automation extends Component<any> {
   }
 
   public render({ automation, isWide, hass, localize }) {
-    const { alias, trigger, condition, action } = automation;
+    const { alias, description, trigger, condition, action } = automation;
 
     return (
       <div>
@@ -55,6 +56,17 @@ export default class Automation extends Component<any> {
                 value={alias}
                 onvalue-changed={this.onChange}
               />
+              <ha-textarea
+                label={localize(
+                  "ui.panel.config.automation.editor.description.label"
+                )}
+                placeholder={localize(
+                  "ui.panel.config.automation.editor.description.placeholder"
+                )}
+                name="description"
+                value={description}
+                onvalue-changed={this.onChange}
+              />
             </div>
           </ha-card>
         </ha-config-section>

src/translations/en.json

@@ -699,13 +699,17 @@
             "add_automation": "Add automation"
           },
           "editor": {
-            "introduction": "Use automations to bring your home alive",
+            "introduction": "Use automations to bring your home alive.",
             "default_name": "New Automation",
             "load_error_not_editable": "Only automations in automations.yaml are editable.",
             "load_error_unknown": "Error loading automation ({err_no}).",
             "save": "Save",
             "unsaved_confirm": "You have unsaved changes. Are you sure you want to leave?",
             "alias": "Name",
+            "description": {
+              "label": "Description",
+              "placeholder": "Optional description"
+            },
             "triggers": {
               "header": "Triggers",
               "introduction": "Triggers are what starts the processing of an automation rule. It is possible to specify multiple triggers for the same rule. Once a trigger starts, Home Assistant will validate the conditions, if any, and call the action.",