From ad58d16dfa4248c925cdfad462cec24599d2753b Mon Sep 17 00:00:00 2001 From: Franck Nijhof Date: Thu, 25 Aug 2022 20:57:29 +0200 Subject: [PATCH] Move condition test button into overflow menu (#13478) --- .../condition/ha-automation-condition-row.ts | 105 +++++++++++++----- src/translations/en.json | 2 + 2 files changed, 77 insertions(+), 30 deletions(-) diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index 47ed4ba323..f141612697 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -5,6 +5,7 @@ import { mdiContentDuplicate, mdiDelete, mdiDotsVertical, + mdiFlask, mdiPlayCircleOutline, mdiRenameBox, mdiStopCircleOutline, @@ -15,8 +16,6 @@ import { classMap } from "lit/directives/class-map"; import { fireEvent } from "../../../../common/dom/fire_event"; import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter"; import { handleStructError } from "../../../../common/structs/handle-errors"; -import "../../../../components/buttons/ha-progress-button"; -import type { HaProgressButton } from "../../../../components/buttons/ha-progress-button"; import "../../../../components/ha-button-menu"; import "../../../../components/ha-card"; import "../../../../components/ha-expansion-panel"; @@ -75,6 +74,10 @@ export default class HaAutomationConditionRow extends LitElement { @state() private _warnings?: string[]; + @state() private _testing = false; + + @state() private _testingResult?: boolean; + protected render() { if (!this.condition) { return html``; @@ -100,11 +103,6 @@ export default class HaAutomationConditionRow extends LitElement { )} - - ${this.hass.localize( - "ui.panel.config.automation.editor.conditions.test" - )} - + + ${this.hass.localize( + "ui.panel.config.automation.editor.conditions.test" + )} + + ${this.hass.localize( "ui.panel.config.automation.editor.conditions.rename" @@ -223,6 +227,21 @@ export default class HaAutomationConditionRow extends LitElement { > +
+ ${this._testingResult + ? this.hass.localize( + "ui.panel.config.automation.editor.conditions.testing_pass" + ) + : this.hass.localize( + "ui.panel.config.automation.editor.conditions.testing_error" + )} +
`; } @@ -245,23 +264,26 @@ export default class HaAutomationConditionRow extends LitElement { private async _handleAction(ev: CustomEvent) { switch (ev.detail.index) { case 0: - await this._renameCondition(); + await this._testCondition(); break; case 1: - fireEvent(this, "duplicate"); + await this._renameCondition(); break; case 2: + fireEvent(this, "duplicate"); + break; + case 3: this._switchUiMode(); this.expand(); break; - case 3: + case 4: this._switchYamlMode(); this.expand(); break; - case 4: + case 5: this._onDisable(); break; - case 5: + case 6: this._onDelete(); break; } @@ -296,14 +318,13 @@ export default class HaAutomationConditionRow extends LitElement { this._yamlMode = true; } - private async _testCondition(ev) { - ev.preventDefault(); - const condition = this.condition; - const button = ev.target as HaProgressButton; - if (button.progress) { + private async _testCondition() { + if (this._testing) { return; } - button.progress = true; + this._testingResult = undefined; + this._testing = true; + const condition = this.condition; try { const validateResult = await validateConfig(this.hass, { @@ -312,6 +333,7 @@ export default class HaAutomationConditionRow extends LitElement { // Abort if condition changed. if (this.condition !== condition) { + this._testing = false; return; } @@ -322,13 +344,16 @@ export default class HaAutomationConditionRow extends LitElement { ), text: validateResult.condition.error, }); + this._testing = false; return; } + let result: { result: boolean }; try { result = await testCondition(this.hass, condition); } catch (err: any) { if (this.condition !== condition) { + this._testing = false; return; } @@ -338,20 +363,15 @@ export default class HaAutomationConditionRow extends LitElement { ), text: err.message, }); + this._testing = false; return; } - if (this.condition !== condition) { - return; - } - - if (result.result) { - button.actionSuccess(); - } else { - button.actionError(); - } + this._testingResult = result.result; } finally { - button.progress = false; + setTimeout(() => { + this._testing = false; + }, 2500); } } @@ -392,8 +412,7 @@ export default class HaAutomationConditionRow extends LitElement { return [ haStyle, css` - ha-button-menu, - ha-progress-button { + ha-button-menu { --mdc-theme-text-primary-on-background: var(--primary-text-color); } .disabled { @@ -420,6 +439,32 @@ export default class HaAutomationConditionRow extends LitElement { mwc-list-item[disabled] { --mdc-theme-text-primary-on-background: var(--disabled-text-color); } + .testing { + position: absolute; + top: 0px; + right: 0px; + left: 0px; + text-transform: uppercase; + font-weight: bold; + font-size: 14px; + background-color: var(--divider-color, #e0e0e0); + color: var(--text-primary-color); + max-height: 0px; + overflow: hidden; + transition: max-height 0.3s; + text-align: center; + border-top-right-radius: var(--ha-card-border-radius, 4px); + border-top-left-radius: var(--ha-card-border-radius, 4px); + } + .testing.active { + max-height: 100px; + } + .testing.error { + background-color: var(--accent-color); + } + .testing.pass { + background-color: var(--success-color); + } `, ]; } diff --git a/src/translations/en.json b/src/translations/en.json index ad888c9f3d..77745250a4 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1975,6 +1975,8 @@ "learn_more": "Learn more about conditions", "add": "Add condition", "test": "Test", + "testing_error": "Condition did not pass", + "testing_pass": "Condition passes", "invalid_condition": "Invalid condition configuration", "test_failed": "Error occurred while testing condition", "duplicate": "[%key:ui::panel::config::automation::editor::triggers::duplicate%]",