Merge pull request #4671 from home-assistant/device-page-fixes

Device info page fixes

src/components/ha-chips.ts

@@ -55,6 +55,10 @@ export class HaChips extends LitElement {
   static get styles(): CSSResult {
     return css`
       ${unsafeCSS(chipStyles)}
+      .mdc-chip {
+        background-color: rgba(var(--rgb-primary-text-color), 0.15);
+        color: var(--primary-text-color);
+      }
     `;
   }
 }

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

@@ -1,4 +1,11 @@
-import { LitElement, TemplateResult, html, property } from "lit-element";
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  property,
+  CSSResult,
+  css,
+} from "lit-element";
 import { HomeAssistant } from "../../../../types";
 import { DeviceAutomation } from "../../../../data/device_automation";
 
@@ -76,4 +83,12 @@ export abstract class HaDeviceAutomationCard<
     data[this.type] = [automation];
     showAutomationEditor(this, data);
   }
+
+  static get styles(): CSSResult {
+    return css`
+      h3 {
+        color: var(--primary-text-color);
+      }
+    `;
+  }
 }

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

@@ -113,7 +113,9 @@ export class DialogDeviceAutomation extends LitElement {
                     `
                   : ""}
               `
-            : html``}
+            : this.hass.localize(
+                "ui.panel.config.devices.automation.no_device_automations"
+              )}
         </div>
         <mwc-button slot="primaryAction" @click="${this._close}">
           Close
@@ -126,54 +128,17 @@ export class DialogDeviceAutomation extends LitElement {
     this._params = undefined;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResult {
-    return [
+    return css`
-      css`
       ha-dialog {
         --mdc-dialog-title-ink-color: var(--primary-text-color);
-          --justify-action-buttons: space-between;
       }
       @media only screen and (min-width: 600px) {
         ha-dialog {
           --mdc-dialog-min-width: 600px;
         }
       }
-        .form {
+    `;
-          padding-bottom: 24px;
-        }
-        .location {
-          display: flex;
-        }
-        .location > * {
-          flex-grow: 1;
-          min-width: 0;
-        }
-        .location > *:first-child {
-          margin-right: 4px;
-        }
-        .location > *:last-child {
-          margin-left: 4px;
-        }
-        ha-location-editor {
-          margin-top: 16px;
-        }
-        ha-user-picker {
-          margin-top: 16px;
-        }
-        mwc-button.warning {
-          --mdc-theme-primary: var(--google-red-500);
-        }
-        .error {
-          color: var(--google-red-500);
-        }
-        a {
-          color: var(--primary-color);
-        }
-        p {
-          color: var(--primary-text-color);
-        }
-      `,
-    ];
   }
 }
 

src/panels/config/devices/ha-config-device-page.ts

@@ -41,6 +41,7 @@ import { RelatedResult, findRelated } from "../../../data/search";
 import { SceneEntities, showSceneEditor } from "../../../data/scene";
 import { navigate } from "../../../common/navigate";
 import { showDeviceAutomationDialog } from "./device-detail/show-dialog-device-automation";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 
 export interface EntityRegistryStateEntry extends EntityRegistryEntry {
   stateName?: string;
@@ -152,12 +153,14 @@ export class HaConfigDevicePage extends LitElement {
           </div>
           <div class="right">
             <div class="column">
+            ${
+              isComponentLoaded(this.hass, "automation")
+                ? html`
                     <ha-card
                       .header=${this.hass.localize(
                         "ui.panel.config.devices.automation.automations"
                       )}
-                >${
+                      >${this._related?.automation?.length
-                  this._related?.automation?.length
                         ? this._related.automation.map((automation) => {
                             const state = this.hass.states[automation];
                             return state
@@ -193,8 +196,7 @@ export class HaConfigDevicePage extends LitElement {
                                 "ui.panel.config.devices.automation.no_automations"
                               )}</paper-item
                             >
-                      `
+                          `}
-                }
                       <div class="card-actions">
                         <mwc-button @click=${this._showAutomationDialog}>
                           ${this.hass.localize(
@@ -203,14 +205,19 @@ export class HaConfigDevicePage extends LitElement {
                         </mwc-button>
                       </div>
                     </ha-card>
+                  `
+                : ""
+            }
             </div>
             <div class="column">
+            ${
+              isComponentLoaded(this.hass, "scene")
+                ? html`
                     <ha-card
                       .header=${this.hass.localize(
                         "ui.panel.config.devices.scene.scenes"
                       )}
-                >${
+                      >${this._related?.scene?.length
-                  this._related?.scene?.length
                         ? this._related.scene.map((scene) => {
                             const state = this.hass.states[scene];
                             return state
@@ -222,7 +229,8 @@ export class HaConfigDevicePage extends LitElement {
                                       .disabled=${!state.attributes.id}
                                     >
                                       <paper-item-body>
-                                    ${state.attributes.friendly_name || scene}
+                                        ${state.attributes.friendly_name ||
+                                          scene}
                                       </paper-item-body>
                                       <ha-icon-next></ha-icon-next>
                                     </paper-item>
@@ -245,21 +253,30 @@ export class HaConfigDevicePage extends LitElement {
                                 "ui.panel.config.devices.scene.no_scenes"
                               )}</paper-item
                             >
-                      `
+                          `}
-                }
+                      ${entities.length
+                        ? html`
                             <div class="card-actions">
                               <mwc-button @click=${this._createScene}>
                                 ${this.hass.localize(
                                   "ui.panel.config.devices.scene.create"
-                  )}                  </mwc-button>
+                                )}
+                              </mwc-button>
                             </div>
+                          `
+                        : ""}
                     </ha-card>
+                  `
+                : ""
+            }
+              ${
+                isComponentLoaded(this.hass, "script")
+                  ? html`
                       <ha-card
                         .header=${this.hass.localize(
                           "ui.panel.config.devices.script.scripts"
                         )}
-                >${
+                        >${this._related?.script?.length
-                  this._related?.script?.length
                           ? this._related.script.map((script) => {
                               const state = this.hass.states[script];
                               return state
@@ -269,7 +286,8 @@ export class HaConfigDevicePage extends LitElement {
                                       @click=${this._openScript}
                                     >
                                       <paper-item-body>
-                                  ${state.attributes.friendly_name || script}
+                                        ${state.attributes.friendly_name ||
+                                          script}
                                       </paper-item-body>
                                       <ha-icon-next></ha-icon-next>
                                     </paper-item>
@@ -282,14 +300,18 @@ export class HaConfigDevicePage extends LitElement {
                                   "ui.panel.config.devices.script.no_scripts"
                                 )}</paper-item
                               >
-                      `
+                            `}
-                }
                         <div class="card-actions">
                           <mwc-button @click=${this._showScriptDialog}>
-                  ${this.hass.localize("ui.panel.config.devices.script.create")}
+                            ${this.hass.localize(
+                              "ui.panel.config.devices.script.create"
+                            )}
                           </mwc-button>
                         </div>
                       </ha-card>
+                    `
+                  : ""
+              }
             </div>
           </div>
         </div>

src/panels/config/scene/ha-config-scene.ts

@@ -50,6 +50,10 @@ class HaConfigScene extends HassRouterPage {
     });
   });
 
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
   protected updatePageEl(pageEl, changedProps: PropertyValues) {
     pageEl.hass = this.hass;
     pageEl.narrow = this.narrow;
@@ -65,6 +69,7 @@ class HaConfigScene extends HassRouterPage {
       (!changedProps || changedProps.has("route")) &&
       this._currentPage === "edit"
     ) {
+      pageEl.creatingNew = undefined;
       const sceneId = this.routeTail.path.substr(1);
       pageEl.creatingNew = sceneId === "new" ? true : false;
       pageEl.scene =

src/panels/config/scene/ha-scene-editor.ts

@@ -86,7 +86,7 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
   @property() private _entityRegistryEntries: EntityRegistryEntry[] = [];
   private _storedStates: SceneEntities = {};
   private _unsubscribeEvents?: () => void;
-  private _deviceEntityLookup: DeviceEntitiesLookup = {};
+  @property() private _deviceEntityLookup: DeviceEntitiesLookup = {};
   private _activateContextId?: string;
 
   private _getEntitiesDevices = memoizeOne(
@@ -411,8 +411,8 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
         entities: {},
         ...initData,
       };
-      if (initData) {
       this._initEntities(this._config);
+      if (initData) {
         this._dirty = true;
       }
     }
@@ -433,6 +433,12 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
         ) {
           this._deviceEntityLookup[entity.device_id].push(entity.entity_id);
         }
+        if (
+          this._entities.includes(entity.entity_id) &&
+          !this._devices.includes(entity.device_id)
+        ) {
+          this._devices = [...this._devices, entity.device_id];
+        }
       }
     }
   }

src/translations/en.json

@@ -1286,7 +1286,8 @@
             },
             "actions": {
               "caption": "When something is triggered..."
-            }
+            },
+            "no_device_automations": "There are no automations available for this device."
           },
           "script": {
             "scripts": "Scripts",