Add descriptions to automation page sections (#19081)

* Add descriptions to automation page sections

* add name key

* Update manual-automation-editor.ts

* hide explanation if there is content

* Update src/translations/en.json

* hide when advanced

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

@@ -486,7 +486,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
       value.valid
         ? ""
         : html`${this.hass.localize(
-              `ui.panel.config.automation.editor.${key}s.header`
+              `ui.panel.config.automation.editor.${key}s.name`
             )}:
             ${value.error}<br />`
     );

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

@@ -1,8 +1,9 @@
 import "@material/mwc-button/mwc-button";
 import { mdiHelpCircle } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement } from "lit";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import { ensureArray } from "../../../common/array/ensure-array";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
@@ -83,6 +84,14 @@ export class HaManualAutomationEditor extends LitElement {
           ></ha-icon-button>
         </a>
       </div>
+      ${!this.hass.userData?.showAdvanced &&
+      !ensureArray(this.config.trigger)?.length
+        ? html`<p>
+            ${this.hass.localize(
+              "ui.panel.config.automation.editor.triggers.description"
+            )}
+          </p>`
+        : nothing}
 
       <ha-automation-trigger
         role="region"
@@ -98,6 +107,9 @@ export class HaManualAutomationEditor extends LitElement {
           ${this.hass.localize(
             "ui.panel.config.automation.editor.conditions.header"
           )}
+          <span class="small"
+            >(${this.hass.localize("ui.common.optional")})</span
+          >
         </h2>
         <a
           href=${documentationUrl(this.hass, "/docs/automation/condition/")}
@@ -112,6 +124,15 @@ export class HaManualAutomationEditor extends LitElement {
           ></ha-icon-button>
         </a>
       </div>
+      ${!this.hass.userData?.showAdvanced &&
+      !ensureArray(this.config.condition)?.length
+        ? html`<p>
+            ${this.hass.localize(
+              "ui.panel.config.automation.editor.conditions.description",
+              { user: this.hass.user?.name }
+            )}
+          </p>`
+        : nothing}
 
       <ha-automation-condition
         role="region"
@@ -143,6 +164,14 @@ export class HaManualAutomationEditor extends LitElement {
           </a>
         </div>
       </div>
+      ${!this.hass.userData?.showAdvanced &&
+      !ensureArray(this.config.action)?.length
+        ? html`<p>
+            ${this.hass.localize(
+              "ui.panel.config.automation.editor.actions.description"
+            )}
+          </p>`
+        : nothing}
 
       <ha-automation-action
         role="region"
@@ -207,9 +236,11 @@ export class HaManualAutomationEditor extends LitElement {
           margin: 0;
         }
         p {
-          margin-bottom: 0;
+          margin-top: 0;
         }
         .header {
+          margin-top: 16px;
+
           display: flex;
           align-items: center;
         }
@@ -217,13 +248,18 @@ export class HaManualAutomationEditor extends LitElement {
           margin-top: -16px;
         }
         .header .name {
-          font-size: 20px;
           font-weight: 400;
           flex: 1;
+          margin-bottom: 16px;
         }
         .header a {
           color: var(--secondary-text-color);
         }
+        .header .small {
+          font-size: small;
+          font-weight: normal;
+          line-height: 0;
+        }
       `,
     ];
   }

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

@@ -538,7 +538,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
       value.valid
         ? ""
         : html`${this.hass.localize(
-              `ui.panel.config.automation.editor.${key}s.header`
+              `ui.panel.config.automation.editor.${key}s.name`
             )}:
             ${value.error}<br />`
     );

src/translations/en.json

@@ -349,7 +349,8 @@
       "error_required": "Required",
       "copied": "Copied",
       "copied_clipboard": "Copied to clipboard",
-      "name": "Name"
+      "name": "Name",
+      "optional": "optional"
     },
     "components": {
       "selectors": {
@@ -2441,7 +2442,9 @@
             "edit_ui": "Edit in visual editor",
             "copy_to_clipboard": "Copy to clipboard",
             "triggers": {
-              "header": "Triggers",
+              "name": "Triggers",
+              "header": "When",
+              "description": "This list of triggers is what starts your automation. A trigger is a specific event happening in or around your home, for example: ''When the sun sets''.",
               "learn_more": "Learn more about triggers",
               "triggered": "Triggered",
               "add": "Add trigger",
@@ -2635,7 +2638,9 @@
               }
             },
             "conditions": {
-              "header": "Conditions",
+              "name": "Conditions",
+              "header": "And if",
+              "description": "This list of conditions needs to be satisfied for the automation to run. A condition can be satisfied or not at any given time, for example: ''If {user} is home''. You can use building blocks to create more complex conditions.",
               "learn_more": "Learn more about conditions",
               "add": "Add condition",
               "test": "Test",
@@ -2771,7 +2776,9 @@
               }
             },
             "actions": {
-              "header": "Actions",
+              "name": "Actions",
+              "header": "Then do",
+              "description": "This list of actions will be performed in sequence when the automation runs. An action usually controls one of your areas, devices, or entities, for example: 'Turn on the lights'. You can use building blocks to create more complex sequences of actions.",
               "learn_more": "Learn more about actions",
               "add": "Add action",
               "invalid_action": "Invalid action",