From 41c61a289553239f4e87639e0bfae4d9ce145ee2 Mon Sep 17 00:00:00 2001
From: Zack Barett <zackbarett@hey.com>
Date: Thu, 26 May 2022 15:05:17 -0500
Subject: [PATCH] Update Narrow Order on Device Page (#12801)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 .../config/devices/ha-config-device-page.ts   | 532 +++++++++---------
 1 file changed, 263 insertions(+), 269 deletions(-)

diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts
index cfca8b845e..e5cb27109d 100644
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@@ -332,6 +332,267 @@ export class HaConfigDevicePage extends LitElement {
 
     this._renderIntegrationInfo(device, integrations, deviceInfo);
 
+    const automationCard = isComponentLoaded(this.hass, "automation")
+      ? html`
+          <ha-card outlined>
+            <h1 class="card-header">
+              ${this.hass.localize(
+                "ui.panel.config.devices.automation.automations_heading"
+              )}
+              <ha-icon-button
+                @click=${this._showAutomationDialog}
+                .disabled=${device.disabled_by}
+                .label=${device.disabled_by
+                  ? this.hass.localize(
+                      "ui.panel.config.devices.automation.create_disabled",
+                      "type",
+                      this.hass.localize(
+                        `ui.panel.config.devices.type.${
+                          device.entry_type || "device"
+                        }`
+                      )
+                    )
+                  : this.hass.localize(
+                      "ui.panel.config.devices.automation.create",
+                      "type",
+                      this.hass.localize(
+                        `ui.panel.config.devices.type.${
+                          device.entry_type || "device"
+                        }`
+                      )
+                    )}
+                .path=${mdiPlusCircle}
+              ></ha-icon-button>
+            </h1>
+            ${this._related?.automation?.length
+              ? html`
+                  <div class="items">
+                    ${this._related.automation.map((automation) => {
+                      const entityState = this.hass.states[automation];
+                      return entityState
+                        ? html`<div>
+                            <a
+                              href=${ifDefined(
+                                entityState.attributes.id
+                                  ? `/config/automation/edit/${entityState.attributes.id}`
+                                  : undefined
+                              )}
+                            >
+                              <paper-item
+                                .automation=${entityState}
+                                .disabled=${!entityState.attributes.id}
+                              >
+                                <paper-item-body>
+                                  ${computeStateName(entityState)}
+                                </paper-item-body>
+                                <ha-icon-next></ha-icon-next>
+                              </paper-item>
+                            </a>
+                            ${!entityState.attributes.id
+                              ? html`
+                                  <paper-tooltip animation-delay="0">
+                                    ${this.hass.localize(
+                                      "ui.panel.config.devices.cant_edit"
+                                    )}
+                                  </paper-tooltip>
+                                `
+                              : ""}
+                          </div> `
+                        : "";
+                    })}
+                  </div>
+                `
+              : html`
+                  <div class="card-content">
+                    ${this.hass.localize(
+                      "ui.panel.config.devices.add_prompt",
+                      "name",
+                      this.hass.localize(
+                        "ui.panel.config.devices.automation.automations"
+                      ),
+                      "type",
+                      this.hass.localize(
+                        `ui.panel.config.devices.type.${
+                          device.entry_type || "device"
+                        }`
+                      )
+                    )}
+                  </div>
+                `}
+          </ha-card>
+        `
+      : "";
+
+    const sceneCard =
+      isComponentLoaded(this.hass, "scene") && entities.length
+        ? html`
+            <ha-card outlined>
+              <h1 class="card-header">
+                ${this.hass.localize(
+                  "ui.panel.config.devices.scene.scenes_heading"
+                )}
+
+                <ha-icon-button
+                  @click=${this._createScene}
+                  .disabled=${device.disabled_by}
+                  .label=${device.disabled_by
+                    ? this.hass.localize(
+                        "ui.panel.config.devices.scene.create_disabled",
+                        "type",
+                        this.hass.localize(
+                          `ui.panel.config.devices.type.${
+                            device.entry_type || "device"
+                          }`
+                        )
+                      )
+                    : this.hass.localize(
+                        "ui.panel.config.devices.scene.create",
+                        "type",
+                        this.hass.localize(
+                          `ui.panel.config.devices.type.${
+                            device.entry_type || "device"
+                          }`
+                        )
+                      )}
+                  .path=${mdiPlusCircle}
+                ></ha-icon-button>
+              </h1>
+              ${this._related?.scene?.length
+                ? html`
+                    <div class="items">
+                      ${this._related.scene.map((scene) => {
+                        const entityState = this.hass.states[scene];
+                        return entityState
+                          ? html`
+                              <div>
+                                <a
+                                  href=${ifDefined(
+                                    entityState.attributes.id
+                                      ? `/config/scene/edit/${entityState.attributes.id}`
+                                      : undefined
+                                  )}
+                                >
+                                  <paper-item
+                                    .scene=${entityState}
+                                    .disabled=${!entityState.attributes.id}
+                                  >
+                                    <paper-item-body>
+                                      ${computeStateName(entityState)}
+                                    </paper-item-body>
+                                    <ha-icon-next></ha-icon-next>
+                                  </paper-item>
+                                </a>
+                                ${!entityState.attributes.id
+                                  ? html`
+                                      <paper-tooltip animation-delay="0">
+                                        ${this.hass.localize(
+                                          "ui.panel.config.devices.cant_edit"
+                                        )}
+                                      </paper-tooltip>
+                                    `
+                                  : ""}
+                              </div>
+                            `
+                          : "";
+                      })}
+                    </div>
+                  `
+                : html`
+                    <div class="card-content">
+                      ${this.hass.localize(
+                        "ui.panel.config.devices.add_prompt",
+                        "name",
+                        this.hass.localize(
+                          "ui.panel.config.devices.scene.scenes"
+                        ),
+                        "type",
+                        this.hass.localize(
+                          `ui.panel.config.devices.type.${
+                            device.entry_type || "device"
+                          }`
+                        )
+                      )}
+                    </div>
+                  `}
+            </ha-card>
+          `
+        : "";
+
+    const scriptCard = isComponentLoaded(this.hass, "script")
+      ? html`
+          <ha-card outlined>
+            <h1 class="card-header">
+              ${this.hass.localize(
+                "ui.panel.config.devices.script.scripts_heading"
+              )}
+              <ha-icon-button
+                @click=${this._showScriptDialog}
+                .disabled=${device.disabled_by}
+                .label=${device.disabled_by
+                  ? this.hass.localize(
+                      "ui.panel.config.devices.script.create_disabled",
+                      "type",
+                      this.hass.localize(
+                        `ui.panel.config.devices.type.${
+                          device.entry_type || "device"
+                        }`
+                      )
+                    )
+                  : this.hass.localize(
+                      "ui.panel.config.devices.script.create",
+                      "type",
+                      this.hass.localize(
+                        `ui.panel.config.devices.type.${
+                          device.entry_type || "device"
+                        }`
+                      )
+                    )}
+                .path=${mdiPlusCircle}
+              ></ha-icon-button>
+            </h1>
+            ${this._related?.script?.length
+              ? html`
+                  <div class="items">
+                    ${this._related.script.map((script) => {
+                      const entityState = this.hass.states[script];
+                      return entityState
+                        ? html`
+                            <a
+                              href=${`/config/script/edit/${entityState.entity_id}`}
+                            >
+                              <paper-item .script=${script}>
+                                <paper-item-body>
+                                  ${computeStateName(entityState)}
+                                </paper-item-body>
+                                <ha-icon-next></ha-icon-next>
+                              </paper-item>
+                            </a>
+                          `
+                        : "";
+                    })}
+                  </div>
+                `
+              : html`
+                  <div class="card-content">
+                    ${this.hass.localize(
+                      "ui.panel.config.devices.add_prompt",
+                      "name",
+                      this.hass.localize(
+                        "ui.panel.config.devices.script.scripts"
+                      ),
+                      "type",
+                      this.hass.localize(
+                        `ui.panel.config.devices.type.${
+                          device.entry_type || "device"
+                        }`
+                      )
+                    )}
+                  </div>
+                `}
+          </ha-card>
+        `
+      : "";
+
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
@@ -507,275 +768,7 @@ export class HaConfigDevicePage extends LitElement {
                     : ""
                 }
               </ha-device-info-card>
-
-            ${
-              isComponentLoaded(this.hass, "automation")
-                ? html`
-                    <ha-card outlined>
-                      <h1 class="card-header">
-                        ${this.hass.localize(
-                          "ui.panel.config.devices.automation.automations_heading"
-                        )}
-                        <ha-icon-button
-                          @click=${this._showAutomationDialog}
-                          .disabled=${device.disabled_by}
-                          .label=${device.disabled_by
-                            ? this.hass.localize(
-                                "ui.panel.config.devices.automation.create_disabled",
-                                "type",
-                                this.hass.localize(
-                                  `ui.panel.config.devices.type.${
-                                    device.entry_type || "device"
-                                  }`
-                                )
-                              )
-                            : this.hass.localize(
-                                "ui.panel.config.devices.automation.create",
-                                "type",
-                                this.hass.localize(
-                                  `ui.panel.config.devices.type.${
-                                    device.entry_type || "device"
-                                  }`
-                                )
-                              )}
-                          .path=${mdiPlusCircle}
-                        ></ha-icon-button>
-                      </h1>
-                      ${this._related?.automation?.length
-                        ? html`
-                            <div class="items">
-                              ${this._related.automation.map((automation) => {
-                                const entityState =
-                                  this.hass.states[automation];
-                                return entityState
-                                  ? html`<div>
-                                      <a
-                                        href=${ifDefined(
-                                          entityState.attributes.id
-                                            ? `/config/automation/edit/${entityState.attributes.id}`
-                                            : undefined
-                                        )}
-                                      >
-                                        <paper-item
-                                          .automation=${entityState}
-                                          .disabled=${!entityState.attributes
-                                            .id}
-                                        >
-                                          <paper-item-body>
-                                            ${computeStateName(entityState)}
-                                          </paper-item-body>
-                                          <ha-icon-next></ha-icon-next>
-                                        </paper-item>
-                                      </a>
-                                      ${!entityState.attributes.id
-                                        ? html`
-                                            <paper-tooltip animation-delay="0">
-                                              ${this.hass.localize(
-                                                "ui.panel.config.devices.cant_edit"
-                                              )}
-                                            </paper-tooltip>
-                                          `
-                                        : ""}
-                                    </div> `
-                                  : "";
-                              })}
-                            </div>
-                          `
-                        : html`
-                            <div class="card-content">
-                              ${this.hass.localize(
-                                "ui.panel.config.devices.add_prompt",
-                                "name",
-                                this.hass.localize(
-                                  "ui.panel.config.devices.automation.automations"
-                                ),
-                                "type",
-                                this.hass.localize(
-                                  `ui.panel.config.devices.type.${
-                                    device.entry_type || "device"
-                                  }`
-                                )
-                              )}
-                            </div>
-                          `}
-                    </ha-card>
-                  `
-                : ""
-            }
-            ${
-              isComponentLoaded(this.hass, "scene") && entities.length
-                ? html`
-                    <ha-card outlined>
-                      <h1 class="card-header">
-                        ${this.hass.localize(
-                          "ui.panel.config.devices.scene.scenes_heading"
-                        )}
-
-                        <ha-icon-button
-                          @click=${this._createScene}
-                          .disabled=${device.disabled_by}
-                          .label=${device.disabled_by
-                            ? this.hass.localize(
-                                "ui.panel.config.devices.scene.create_disabled",
-                                "type",
-                                this.hass.localize(
-                                  `ui.panel.config.devices.type.${
-                                    device.entry_type || "device"
-                                  }`
-                                )
-                              )
-                            : this.hass.localize(
-                                "ui.panel.config.devices.scene.create",
-                                "type",
-                                this.hass.localize(
-                                  `ui.panel.config.devices.type.${
-                                    device.entry_type || "device"
-                                  }`
-                                )
-                              )}
-                          .path=${mdiPlusCircle}
-                        ></ha-icon-button>
-                      </h1>
-                      ${this._related?.scene?.length
-                        ? html`
-                            <div class="items">
-                              ${this._related.scene.map((scene) => {
-                                const entityState = this.hass.states[scene];
-                                return entityState
-                                  ? html`
-                                      <div>
-                                        <a
-                                          href=${ifDefined(
-                                            entityState.attributes.id
-                                              ? `/config/scene/edit/${entityState.attributes.id}`
-                                              : undefined
-                                          )}
-                                        >
-                                          <paper-item
-                                            .scene=${entityState}
-                                            .disabled=${!entityState.attributes
-                                              .id}
-                                          >
-                                            <paper-item-body>
-                                              ${computeStateName(entityState)}
-                                            </paper-item-body>
-                                            <ha-icon-next></ha-icon-next>
-                                          </paper-item>
-                                        </a>
-                                        ${!entityState.attributes.id
-                                          ? html`
-                                              <paper-tooltip
-                                                animation-delay="0"
-                                              >
-                                                ${this.hass.localize(
-                                                  "ui.panel.config.devices.cant_edit"
-                                                )}
-                                              </paper-tooltip>
-                                            `
-                                          : ""}
-                                      </div>
-                                    `
-                                  : "";
-                              })}
-                            </div>
-                          `
-                        : html`
-                            <div class="card-content">
-                              ${this.hass.localize(
-                                "ui.panel.config.devices.add_prompt",
-                                "name",
-                                this.hass.localize(
-                                  "ui.panel.config.devices.scene.scenes"
-                                ),
-                                "type",
-                                this.hass.localize(
-                                  `ui.panel.config.devices.type.${
-                                    device.entry_type || "device"
-                                  }`
-                                )
-                              )}
-                            </div>
-                          `}
-                    </ha-card>
-                  `
-                : ""
-            }
-              ${
-                isComponentLoaded(this.hass, "script")
-                  ? html`
-                      <ha-card outlined>
-                        <h1 class="card-header">
-                          ${this.hass.localize(
-                            "ui.panel.config.devices.script.scripts_heading"
-                          )}
-                          <ha-icon-button
-                            @click=${this._showScriptDialog}
-                            .disabled=${device.disabled_by}
-                            .label=${device.disabled_by
-                              ? this.hass.localize(
-                                  "ui.panel.config.devices.script.create_disabled",
-                                  "type",
-                                  this.hass.localize(
-                                    `ui.panel.config.devices.type.${
-                                      device.entry_type || "device"
-                                    }`
-                                  )
-                                )
-                              : this.hass.localize(
-                                  "ui.panel.config.devices.script.create",
-                                  "type",
-                                  this.hass.localize(
-                                    `ui.panel.config.devices.type.${
-                                      device.entry_type || "device"
-                                    }`
-                                  )
-                                )}
-                            .path=${mdiPlusCircle}
-                          ></ha-icon-button>
-                        </h1>
-                        ${this._related?.script?.length
-                          ? html`
-                              <div class="items">
-                                ${this._related.script.map((script) => {
-                                  const entityState = this.hass.states[script];
-                                  return entityState
-                                    ? html`
-                                        <a
-                                          href=${`/config/script/edit/${entityState.entity_id}`}
-                                        >
-                                          <paper-item .script=${script}>
-                                            <paper-item-body>
-                                              ${computeStateName(entityState)}
-                                            </paper-item-body>
-                                            <ha-icon-next></ha-icon-next>
-                                          </paper-item>
-                                        </a>
-                                      `
-                                    : "";
-                                })}
-                              </div>
-                            `
-                          : html`
-                              <div class="card-content">
-                                ${this.hass.localize(
-                                  "ui.panel.config.devices.add_prompt",
-                                  "name",
-                                  this.hass.localize(
-                                    "ui.panel.config.devices.script.scripts"
-                                  ),
-                                  "type",
-                                  this.hass.localize(
-                                    `ui.panel.config.devices.type.${
-                                      device.entry_type || "device"
-                                    }`
-                                  )
-                                )}
-                              </div>
-                            `}
-                      </ha-card>
-                    `
-                  : ""
-              }
+            ${!this.narrow ? [automationCard, sceneCard, scriptCard] : ""} 
           </div>
           <div class="column">
             ${["control", "sensor", "config", "diagnostic"].map((category) =>
@@ -798,6 +791,7 @@ export class HaConfigDevicePage extends LitElement {
             )}
           </div>
           <div class="column">
+            ${this.narrow ? [automationCard, sceneCard, scriptCard] : ""}
             ${
               isComponentLoaded(this.hass, "logbook")
                 ? html`