jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-12 03:46:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Some fixes for script picker and editor (#13635)

Browse Source 
* Show error when user try to delete or duplicate yaml only script

* Use same layout as automation
This commit is contained in:
Paul Bottein 2022-09-07 13:47:24 +02:00 committed by GitHub
parent a889969bb8
commit d1964e92ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 158 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/panels/config/script/blueprint-script-editor.ts
View File

@ -45,13 +45,14 @@ export class HaBlueprintScriptEditor extends LitElement {
protected render() { protected render() {
const blueprint = this._blueprint; const blueprint = this._blueprint;
return html` <ha-config-section vertical .isWide=${this.isWide}> return html`
<span slot="header" <ha-card
>${this.hass.localize( outlined
class="blueprint"
.header=${this.hass.localize(
"ui.panel.config.automation.editor.blueprint.header" "ui.panel.config.automation.editor.blueprint.header"
)}</span )}
> >
<ha-card outlined>
<div class="blueprint-picker-container"> <div class="blueprint-picker-container">
${this._blueprints ${this._blueprints
? Object.keys(this._blueprints).length ? Object.keys(this._blueprints).length
@ -118,7 +119,7 @@ export class HaBlueprintScriptEditor extends LitElement {
</p>`}` </p>`}`
: ""} : ""}
</ha-card> </ha-card>
</ha-config-section>`; `;
} }
private async _getBlueprints() { private async _getBlueprints() {
@ -173,22 +174,50 @@ export class HaBlueprintScriptEditor extends LitElement {
return [ return [
haStyle, haStyle,
css` css`
:host {
display: block;
}
ha-card.blueprint {
margin: 0 auto;
}
.padding { .padding {
padding: 16px; padding: 16px;
} }
.link-button-row {
padding: 14px;
}
.blueprint-picker-container { .blueprint-picker-container {
padding: 16px; padding: 0 16px 16px;
}
ha-textfield,
ha-blueprint-picker {
display: block;
}
h3 {
margin: 16px;
}
.introduction {
margin-top: 0;
margin-bottom: 12px;
}
.introduction a {
color: var(--primary-color);
} }
p { p {
margin-bottom: 0; margin-bottom: 0;
} }
.description {
margin-bottom: 16px;
}
ha-settings-row { ha-settings-row {
--paper-time-input-justify-content: flex-end; --paper-time-input-justify-content: flex-end;
--settings-row-content-width: 100%;
--settings-row-prefix-display: contents;
border-top: 1px solid var(--divider-color); border-top: 1px solid var(--divider-color);
} }
:host(:not([narrow])) ha-settings-row ha-textfield, ha-alert {
:host(:not([narrow])) ha-settings-row ha-selector { margin-bottom: 16px;
width: 60%; display: block;
} }
`, `,
]; ];

144
src/panels/config/script/ha-script-editor.ts
View File

@ -270,47 +270,49 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
> >
${this._config ${this._config
? html` ? html`
<ha-card outlined> <div class="config-container">
<div class="card-content"> <ha-card outlined>
<ha-form <div class="card-content">
.schema=${schema} <ha-form
.data=${data} .schema=${schema}
.hass=${this.hass} .data=${data}
.computeLabel=${this._computeLabelCallback} .hass=${this.hass}
.computeHelper=${this._computeHelperCallback} .computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged} .computeHelper=${this._computeHelperCallback}
></ha-form> @value-changed=${this._valueChanged}
</div> ></ha-form>
${this.scriptEntityId </div>
? html` ${this.scriptEntityId
<div ? html`
class="card-actions layout horizontal justified center" <div
> class="card-actions layout horizontal justified center"
<a
href="/config/script/trace/${this
.scriptEntityId}"
> >
<mwc-button> <a
href="/config/script/trace/${this
.scriptEntityId}"
>
<mwc-button>
${this.hass.localize(
"ui.panel.config.script.editor.show_trace"
)}
</mwc-button>
</a>
<mwc-button
@click=${this._runScript}
title=${this.hass.localize(
"ui.panel.config.script.picker.run_script"
)}
?disabled=${this._dirty}
>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.script.editor.show_trace" "ui.panel.config.script.picker.run_script"
)} )}
</mwc-button> </mwc-button>
</a> </div>
<mwc-button `
@click=${this._runScript} : ``}
title=${this.hass.localize( </ha-card>
"ui.panel.config.script.picker.run_script" </div>
)}
?disabled=${this._dirty}
>
${this.hass.localize(
"ui.panel.config.script.picker.run_script"
)}
</mwc-button>
</div>
`
: ``}
</ha-card>
${"use_blueprint" in this._config ${"use_blueprint" in this._config
? html` ? html`
@ -323,36 +325,38 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
></blueprint-script-editor> ></blueprint-script-editor>
` `
: html` : html`
<div class="header"> <div class="sequence-container">
<h2 id="sequence-heading" class="name"> <div class="header">
${this.hass.localize( <h2 id="sequence-heading" class="name">
"ui.panel.config.script.editor.sequence" ${this.hass.localize(
)} "ui.panel.config.script.editor.sequence"
</h2>
<a
href=${documentationUrl(
this.hass,
"/docs/scripts/"
)}
target="_blank"
rel="noreferrer"
>
<ha-icon-button
.path=${mdiHelpCircle}
.label=${this.hass.localize(
"ui.panel.config.script.editor.link_available_actions"
)} )}
></ha-icon-button> </h2>
</a> <a
</div> href=${documentationUrl(
this.hass,
"/docs/scripts/"
)}
target="_blank"
rel="noreferrer"
>
<ha-icon-button
.path=${mdiHelpCircle}
.label=${this.hass.localize(
"ui.panel.config.script.editor.link_available_actions"
)}
></ha-icon-button>
</a>
</div>
<ha-automation-action <ha-automation-action
role="region" role="region"
aria-labelledby="sequence-heading" aria-labelledby="sequence-heading"
.actions=${this._config.sequence} .actions=${this._config.sequence}
@value-changed=${this._sequenceChanged} @value-changed=${this._sequenceChanged}
.hass=${this.hass} .hass=${this.hass}
></ha-automation-action> ></ha-automation-action>
</div>
`} `}
` `
: ""} : ""}
@ -787,15 +791,19 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
font-weight: bold; font-weight: bold;
color: var(--error-color); color: var(--error-color);
} }
.content {
padding: 16px 16px 20px;
}
.yaml-mode { .yaml-mode {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-bottom: 0; padding-bottom: 0;
} }
blueprint-script-editor,
.config-container,
.sequence-container {
margin: 0 auto;
max-width: 1040px;
padding: 28px 20px 0;
}
ha-yaml-editor { ha-yaml-editor {
flex-grow: 1; flex-grow: 1;
--code-mirror-height: 100%; --code-mirror-height: 100%;

52
src/panels/config/script/ha-script-picker.ts
View File

@ -290,16 +290,31 @@ class HaScriptPicker extends LitElement {
} }
private async _duplicate(script: any) { private async _duplicate(script: any) {
const config = await getScriptConfig( try {
this.hass, const config = await getScriptConfig(
computeObjectId(script.entity_id) this.hass,
); computeObjectId(script.entity_id)
showScriptEditor({ );
...config, showScriptEditor({
alias: `${config?.alias} (${this.hass.localize( ...config,
"ui.panel.config.script.picker.duplicate" alias: `${config?.alias} (${this.hass.localize(
)})`, "ui.panel.config.script.picker.duplicate"
}); )})`,
});
} catch (err: any) {
await showAlertDialog(this, {
text:
err.status_code === 404
? this.hass.localize(
"ui.panel.config.script.editor.load_error_not_duplicable"
)
: this.hass.localize(
"ui.panel.config.script.editor.load_error_unknown",
"err_no",
err.status_code
),
});
}
} }
private async _deleteConfirm(script: any) { private async _deleteConfirm(script: any) {
@ -312,7 +327,22 @@ class HaScriptPicker extends LitElement {
} }
private async _delete(script: any) { private async _delete(script: any) {
await deleteScript(this.hass, computeObjectId(script.entity_id)); try {
await deleteScript(this.hass, computeObjectId(script.entity_id));
} catch (err: any) {
await showAlertDialog(this, {
text:
err.status_code === 400
? this.hass.localize(
"ui.panel.config.script.editor.load_error_not_deletable"
)
: this.hass.localize(
"ui.panel.config.script.editor.load_error_unknown",
"err_no",
err.status_code
),
});
}
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {

2
src/translations/en.json
View File

@ -2303,6 +2303,8 @@
"parallel": "Max number of parallel runs" "parallel": "Max number of parallel runs"
}, },
"load_error_not_editable": "Only scripts inside scripts.yaml are editable.", "load_error_not_editable": "Only scripts inside scripts.yaml are editable.",
"load_error_not_duplicable": "Only scripts in scripts.yaml can be duplicated.",
"load_error_not_deletable": "Only scripts in scripts.yaml can be deleted.",
"load_error_unknown": "Error loading script ({err_no}).", "load_error_unknown": "Error loading script ({err_no}).",
"delete_confirm": "Are you sure you want to delete this script?", "delete_confirm": "Are you sure you want to delete this script?",
"save_script": "Save script", "save_script": "Save script",