add to basic editor and update advanced style

src/panels/config/entities/entity-registry-basic-editor.ts

@@ -1,3 +1,5 @@
+import "../../../components/ha-expansion-panel";
+import "@material/mwc-formfield/mwc-formfield";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -5,6 +7,7 @@ import { computeDomain } from "../../../common/entity/compute_domain";
 import "../../../components/ha-area-picker";
 import "../../../components/ha-switch";
 import "../../../components/ha-textfield";
+import "../../../components/ha-radio";
 import type { HaSwitch } from "../../../components/ha-switch";
 import {
   DeviceRegistryEntry,
@@ -33,6 +36,8 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
 
   @state() private _disabledBy!: string | null;
 
+  @state() private _hiddenBy!: string | null;
+
   private _deviceLookup?: Record<string, DeviceRegistryEntry>;
 
   @state() private _device?: DeviceRegistryEntry;
@@ -51,6 +56,12 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
     ) {
       params.disabled_by = this._disabledBy;
     }
+    if (
+      this.entry.hidden_by !== this._hiddenBy &&
+      (this._hiddenBy === null || this._hiddenBy === "user")
+    ) {
+      params.hidden_by = this._hiddenBy;
+    }
     try {
       const result = await updateEntityRegistryEntry(
         this.hass!,
@@ -101,6 +112,7 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
       this._origEntityId = this.entry.entity_id;
       this._entityId = this.entry.entity_id;
       this._disabledBy = this.entry.disabled_by;
+      this._hiddenBy = this.entry.hidden_by;
       this._areaId = this.entry.area_id;
       this._device =
         this.entry.device_id && this._deviceLookup
@@ -138,37 +150,95 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
         .placeholder=${this._device?.area_id}
         @value-changed=${this._areaPicked}
       ></ha-area-picker>
-      <div class="row">
-        <ha-switch
-          .checked=${!this._disabledBy}
-          @change=${this._disabledByChanged}
-        >
-        </ha-switch>
-        <div>
-          <div>
-            ${this.hass.localize(
+
+      <ha-expansion-panel
+        .header=${this.hass.localize(
+          "ui.dialogs.entity_registry.editor.advanced"
+        )}
+        outlined
+      >
+        <div class="label">
+          ${this.hass.localize(
+            "ui.dialogs.entity_registry.editor.view_status"
+          )}:
+        </div>
+        <div class="secondary">
+          ${this._disabledBy && this._disabledBy !== "user"
+            ? this.hass.localize(
+                "ui.dialogs.entity_registry.editor.enabled_cause",
+                "cause",
+                this.hass.localize(
+                  `config_entry.disabled_by.${this._disabledBy}`
+                )
+              )
+            : ""}
+        </div>
+        <div class="row">
+          <mwc-formfield
+            .label=${this.hass.localize(
               "ui.dialogs.entity_registry.editor.enabled_label"
             )}
-          </div>
-          <div class="secondary">
-            ${this._disabledBy && this._disabledBy !== "user"
-              ? this.hass.localize(
-                  "ui.dialogs.entity_registry.editor.enabled_cause",
-                  "cause",
-                  this.hass.localize(
-                    `config_entry.disabled_by.${this._disabledBy}`
-                  )
-                )
-              : ""}
-            ${this.hass.localize(
-              "ui.dialogs.entity_registry.editor.enabled_description"
+          >
+            <ha-radio
+              name="hiddendisabled"
+              value="enabled"
+              .checked=${!this._hiddenBy && !this._disabledBy}
+              .disabled=${(this._hiddenBy && this._hiddenBy !== "user") ||
+              this._device?.disabled_by ||
+              (this._disabledBy && this._disabledBy !== "user")}
+              @change=${this._viewStatusChanged}
+            ></ha-radio>
+          </mwc-formfield>
+          <mwc-formfield
+            .label=${this.hass.localize(
+              "ui.dialogs.entity_registry.editor.hidden_label"
             )}
-            <br />${this.hass.localize(
-              "ui.dialogs.entity_registry.editor.note"
+          >
+            <ha-radio
+              name="hiddendisabled"
+              value="hidden"
+              .checked=${this._hiddenBy !== null}
+              .disabled=${(this._hiddenBy && this._hiddenBy !== "user") ||
+              Boolean(this._device?.disabled_by) ||
+              (this._disabledBy && this._disabledBy !== "user")}
+              @change=${this._viewStatusChanged}
+            ></ha-radio>
+          </mwc-formfield>
+          <mwc-formfield
+            .label=${this.hass.localize(
+              "ui.dialogs.entity_registry.editor.disabled_label"
             )}
-          </div>
+          >
+            <ha-radio
+              name="hiddendisabled"
+              value="disabled"
+              .checked=${this._disabledBy !== null}
+              .disabled=${(this._hiddenBy && this._hiddenBy !== "user") ||
+              Boolean(this._device?.disabled_by) ||
+              (this._disabledBy && this._disabledBy !== "user")}
+              @change=${this._viewStatusChanged}
+            ></ha-radio>
+          </mwc-formfield>
         </div>
-      </div>
+
+        ${this._disabledBy !== null
+          ? html`
+              <div class="secondary">
+                ${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.enabled_description"
+                )}
+              </div>
+            `
+          : this._hiddenBy !== null
+          ? html`
+              <div class="secondary">
+                ${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.hidden_description"
+                )}
+              </div>
+            `
+          : ""}
+      </ha-expansion-panel>
     `;
   }
 
@@ -184,6 +254,23 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
     this._disabledBy = (ev.target as HaSwitch).checked ? null : "user";
   }
 
+  private _viewStatusChanged(ev: CustomEvent): void {
+    switch ((ev.target as any).value) {
+      case "enabled":
+        this._disabledBy = null;
+        this._hiddenBy = null;
+        break;
+      case "disabled":
+        this._disabledBy = "user";
+        this._hiddenBy = null;
+        break;
+      case "hidden":
+        this._hiddenBy = "user";
+        this._disabledBy = null;
+        break;
+    }
+  }
+
   static get styles() {
     return css`
       ha-switch {
@@ -202,6 +289,9 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
         display: block;
         margin-bottom: 8px;
       }
+      ha-expansion-panel {
+        margin-top: 8px;
+      }
     `;
   }
 }

src/panels/config/entities/entity-registry-settings.ts

@@ -304,6 +304,11 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
             : ""}
           ${this.entry.device_id
             ? html`
+                <div class="label">
+                  ${this.hass.localize(
+                    "ui.dialogs.entity_registry.editor.change_area"
+                  )}:
+                </div>
                 <ha-area-picker
                   .hass=${this.hass}
                   .value=${this._areaId}
@@ -317,20 +322,16 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
                   ${this.hass.localize(
                     "ui.dialogs.entity_registry.editor.area_note"
                   )}
+                  ${this._device
+                    ? html`
+                        <button class="link" @click=${this._openDeviceSettings}>
+                          ${this.hass.localize(
+                            "ui.dialogs.entity_registry.editor.change_device_area"
+                          )}
+                        </button>
+                      `
+                    : ""}
                 </div>
-                ${this._areaId
-                  ? html`<mwc-button @click=${this._clearArea}
-                      >${this.hass.localize(
-                        "ui.dialogs.entity_registry.editor.follow_device_area"
-                      )}</mwc-button
-                    >`
-                  : this._device
-                  ? html`<mwc-button @click=${this._openDeviceSettings}
-                      >${this.hass.localize(
-                        "ui.dialogs.entity_registry.editor.change_device_area"
-                      )}</mwc-button
-                    >`
-                  : ""}
               `
             : ""}
         </ha-expansion-panel>
@@ -530,7 +531,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
           align-items: center;
         }
         .label {
-          margin-top: 8px;
+          margin-top: 16px;
         }
         .secondary {
           margin: 8px 0;

src/translations/en.json

@@ -790,6 +790,7 @@
           },
           "unavailable": "This entity is unavailable.",
           "view_status": "Entity view status",
+          "change_area": "Change Area",
           "enabled_label": "Enabled",
           "disabled_label": "Disabled",
           "enabled_cause": "Cannot change view status. Disabled by {cause}.",