Remove thingtalk cleanup create new automation dialog (#10748)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

src/components/ha-blueprint-picker.ts

@@ -23,6 +23,10 @@ class HaBluePrintPicker extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  public open() {
+    this.shadowRoot!.querySelector("paper-dropdown-menu-light")!.open();
+  }
+
   private _processedBlueprints = memoizeOne((blueprints?: Blueprints) => {
     if (!blueprints) {
       return [];

src/panels/config/automation/dialog-new-automation.ts

@@ -1,24 +1,19 @@
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { nextRender } from "../../../common/util/render-status";
 import "../../../components/ha-blueprint-picker";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
 import { createCloseHeading } from "../../../components/ha-dialog";
-import {
-  AutomationConfig,
-  showAutomationEditor,
-} from "../../../data/automation";
-import {
-  HassDialog,
-  replaceDialog,
-} from "../../../dialogs/make-dialog-manager";
+import { showAutomationEditor } from "../../../data/automation";
+import { HassDialog } from "../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
-import { showThingtalkDialog } from "./thingtalk/show-dialog-thingtalk";
+import "@material/mwc-list/mwc-list-item";
+import "../../../components/ha-icon-next";
+import "@material/mwc-list/mwc-list";
 
 @customElement("ha-dialog-new-automation")
 class DialogNewAutomation extends LitElement implements HassDialog {
@@ -42,84 +37,52 @@ class DialogNewAutomation extends LitElement implements HassDialog {
     return html`
       <ha-dialog
         open
+        hideActions
         @closed=${this.closeDialog}
         .heading=${createCloseHeading(
           this.hass,
-          this.hass.localize("ui.panel.config.automation.dialog_new.header")
+          this.hass.localize("ui.panel.config.automation.dialog_new.how")
         )}
       >
-        <div>
-          ${this.hass.localize("ui.panel.config.automation.dialog_new.how")}
-          <div class="container">
-            ${isComponentLoaded(this.hass, "cloud")
-              ? html`<ha-card outlined>
-                  <div>
-                    <h3>
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.dialog_new.thingtalk.header"
-                      )}
-                    </h3>
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.dialog_new.thingtalk.intro"
-                    )}
-                    <div class="side-by-side">
-                      <paper-input
-                        id="input"
-                        .label=${this.hass.localize(
-                          "ui.panel.config.automation.dialog_new.thingtalk.input_label"
-                        )}
-                      ></paper-input>
-                      <mwc-button @click=${this._thingTalk}
-                        >${this.hass.localize(
-                          "ui.panel.config.automation.dialog_new.thingtalk.create"
-                        )}</mwc-button
-                      >
-                    </div>
-                  </div>
-                </ha-card>`
-              : html``}
-            ${isComponentLoaded(this.hass, "blueprint")
-              ? html`<ha-card outlined>
-                  <div>
-                    <h3>
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.dialog_new.blueprint.use_blueprint"
-                      )}
-                    </h3>
-                    <ha-blueprint-picker
-                      @value-changed=${this._blueprintPicked}
-                      .hass=${this.hass}
-                    ></ha-blueprint-picker>
-                  </div>
-                </ha-card>`
-              : html``}
-          </div>
-        </div>
-        <mwc-button slot="primaryAction" @click=${this._blank}>
-          ${this.hass.localize(
-            "ui.panel.config.automation.dialog_new.start_empty"
-          )}
-        </mwc-button>
+        <mwc-list>
+          <mwc-list-item twoline class="blueprint" @click=${this._blueprint}>
+            ${this.hass.localize(
+              "ui.panel.config.automation.dialog_new.blueprint.use_blueprint"
+            )}
+            <span slot="secondary">
+              <ha-blueprint-picker
+                @value-changed=${this._blueprintPicked}
+                .hass=${this.hass}
+              ></ha-blueprint-picker>
+            </span>
+          </mwc-list-item>
+          <li divider role="separator"></li>
+          <mwc-list-item hasmeta twoline @click=${this._blank}>
+            ${this.hass.localize(
+              "ui.panel.config.automation.dialog_new.start_empty"
+            )}
+            <span slot="secondary">
+              ${this.hass.localize(
+                "ui.panel.config.automation.dialog_new.start_empty_description"
+              )}
+            </span>
+            <ha-icon-next slot="meta"></ha-icon-next
+          ></mwc-list-item>
+        </mwc-list>
       </ha-dialog>
     `;
   }
 
-  private _thingTalk() {
-    replaceDialog();
-    showThingtalkDialog(this, {
-      callback: (config: Partial<AutomationConfig> | undefined) =>
-        showAutomationEditor(config),
-      input: this.shadowRoot!.querySelector("paper-input")!.value as string,
-    });
-    this.closeDialog();
-  }
-
   private async _blueprintPicked(ev: CustomEvent) {
     this.closeDialog();
     await nextRender();
     showAutomationEditor({ use_blueprint: { path: ev.detail.value } });
   }
 
+  private async _blueprint() {
+    this.shadowRoot!.querySelector("ha-blueprint-picker")!.open();
+  }
+
   private async _blank() {
     this.closeDialog();
     await nextRender();
@@ -131,38 +94,14 @@ class DialogNewAutomation extends LitElement implements HassDialog {
       haStyle,
       haStyleDialog,
       css`
-        .container {
-          display: flex;
-        }
-        ha-card {
-          width: calc(50% - 8px);
-          margin: 4px;
-        }
-        ha-card div {
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-        }
-        ha-card {
-          box-sizing: border-box;
-          padding: 8px;
+        mwc-list-item.blueprint {
+          height: 92px;
         }
         ha-blueprint-picker {
-          width: 100%;
+          margin-top: -16px;
         }
-        .side-by-side {
-          display: flex;
-          flex-direction: row;
-          align-items: flex-end;
-        }
-        @media all and (max-width: 500px) {
-          .container {
-            flex-direction: column;
-          }
-          ha-card {
-            width: 100%;
-          }
+        ha-dialog {
+          --dialog-content-padding: 0;
         }
       `,
     ];

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

@@ -315,10 +315,7 @@ class HaAutomationPicker extends LitElement {
   };
 
   private _createNew() {
-    if (
-      isComponentLoaded(this.hass, "cloud") ||
-      isComponentLoaded(this.hass, "blueprint")
-    ) {
+    if (isComponentLoaded(this.hass, "blueprint")) {
       showNewAutomationDialog(this);
     } else {
       navigate("/config/automation/edit/new");