Hide and sort secondary device automations (#12496)

src/components/device/ha-device-automation-picker.ts

@@ -5,6 +5,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import {
   DeviceAutomation,
   deviceAutomationsEqual,
+  sortDeviceAutomations,
 } from "../../data/device_automation";
 import { HomeAssistant } from "../../types";
 import "../ha-select";
@@ -127,7 +128,9 @@ export abstract class HaDeviceAutomationPicker<
 
   private async _updateDeviceInfo() {
     this._automations = this.deviceId
-      ? await this._fetchDeviceAutomations(this.hass, this.deviceId)
+      ? (await this._fetchDeviceAutomations(this.hass, this.deviceId)).sort(
+          sortDeviceAutomations
+        )
       : // No device, clear the list of automations
         [];
 
@@ -161,8 +164,9 @@ export abstract class HaDeviceAutomationPicker<
     if (this.value && deviceAutomationsEqual(automation, this.value)) {
       return;
     }
-    fireEvent(this, "change");
-    fireEvent(this, "value-changed", { value: automation });
+    const value = { ...automation };
+    delete value.metadata;
+    fireEvent(this, "value-changed", { value });
   }
 
   static get styles(): CSSResultGroup {

src/data/device_automation.ts

@@ -11,6 +11,7 @@ export interface DeviceAutomation {
   type?: string;
   subtype?: string;
   event?: string;
+  metadata?: { secondary: boolean };
 }
 
 export interface DeviceAction extends DeviceAutomation {
@@ -179,3 +180,16 @@ export const localizeDeviceAutomationTrigger = (
     (trigger.subtype ? `"${trigger.subtype}" ${trigger.type}` : trigger.type!)
   );
 };
+
+export const sortDeviceAutomations = (
+  automationA: DeviceAutomation,
+  automationB: DeviceAutomation
+) => {
+  if (automationA.metadata?.secondary && !automationB.metadata?.secondary) {
+    return 1;
+  }
+  if (!automationA.metadata?.secondary && automationB.metadata?.secondary) {
+    return -1;
+  }
+  return 0;
+};

src/panels/config/devices/device-detail/ha-device-automation-card.ts

@@ -1,5 +1,5 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { property } from "lit/decorators";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
 import "../../../../components/ha-chip";
@@ -10,6 +10,7 @@ import {
   DeviceAutomation,
 } from "../../../../data/device_automation";
 import { showScriptEditor } from "../../../../data/script";
+import { buttonLinkStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 
 declare global {
@@ -29,6 +30,8 @@ export abstract class HaDeviceAutomationCard<
 
   @property() public automations: T[] = [];
 
+  @state() public _showSecondary = false;
+
   protected headerKey = "";
 
   protected type = "";
@@ -60,28 +63,47 @@ export abstract class HaDeviceAutomationCard<
     if (this.automations.length === 0) {
       return html``;
     }
+    const automations = this._showSecondary
+      ? this.automations
+      : this.automations.filter(
+          (automation) => automation.metadata?.secondary === false
+        );
     return html`
       <h3>${this.hass.localize(this.headerKey)}</h3>
       <div class="content">
         <ha-chip-set>
-          ${this.automations.map(
+          ${automations.map(
             (automation, idx) =>
               html`
-                <ha-chip .index=${idx} @click=${this._handleAutomationClicked}>
+                <ha-chip
+                  .index=${idx}
+                  @click=${this._handleAutomationClicked}
+                  class=${automation.metadata?.secondary ? "secondary" : ""}
+                >
                   ${this._localizeDeviceAutomation(this.hass, automation)}
                 </ha-chip>
               `
           )}
         </ha-chip-set>
+        ${!this._showSecondary && automations.length < this.automations.length
+          ? html`<button class="link" @click=${this._toggleSecondary}>
+              Show ${this.automations.length - automations.length} more...
+            </button>`
+          : ""}
       </div>
     `;
   }
 
+  private _toggleSecondary() {
+    this._showSecondary = !this._showSecondary;
+  }
+
   private _handleAutomationClicked(ev: CustomEvent) {
-    const automation = this.automations[(ev.currentTarget as any).index];
+    const automation = { ...this.automations[(ev.currentTarget as any).index] };
     if (!automation) {
       return;
     }
+    delete automation.metadata;
     if (this.script) {
       showScriptEditor({ sequence: [automation as DeviceAction] });
       fireEvent(this, "entry-selected");
@@ -93,11 +115,18 @@ export abstract class HaDeviceAutomationCard<
     fireEvent(this, "entry-selected");
   }
 
-  static get styles(): CSSResultGroup {
-    return css`
+  static styles = [
+    buttonLinkStyle,
+    css`
       h3 {
         color: var(--primary-text-color);
       }
-    `;
-  }
+      .secondary {
+        --ha-chip-background-color: rgba(var(--rgb-primary-text-color), 0.07);
+      }
+      button.link {
+        color: var(--primary-color);
+      }
+    `,
+  ];
 }

src/panels/config/devices/device-detail/ha-device-automation-dialog.ts

@@ -10,6 +10,7 @@ import {
   fetchDeviceActions,
   fetchDeviceConditions,
   fetchDeviceTriggers,
+  sortDeviceAutomations,
 } from "../../../../data/device_automation";
 import { haStyleDialog } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
@@ -63,16 +64,16 @@ export class DialogDeviceAutomation extends LitElement {
     const { device, script } = this._params;
 
     fetchDeviceActions(this.hass, device.id).then((actions) => {
-      this._actions = actions;
+      this._actions = actions.sort(sortDeviceAutomations);
     });
     if (script) {
       return;
     }
     fetchDeviceTriggers(this.hass, device.id).then((triggers) => {
-      this._triggers = triggers;
+      this._triggers = triggers.sort(sortDeviceAutomations);
     });
     fetchDeviceConditions(this.hass, device.id).then((conditions) => {
-      this._conditions = conditions;
+      this._conditions = conditions.sort(sortDeviceAutomations);
     });
   }