Remove badges configuration from view settings (#21433)

src/panels/lovelace/editor/hui-badge-preview.ts

@@ -1,91 +0,0 @@
-import "../../../components/entity/ha-state-label-badge";
-import { LovelaceBadgeConfig } from "../../../data/lovelace/config/badge";
-import { HomeAssistant } from "../../../types";
-import { createErrorBadgeConfig } from "../badges/hui-error-badge";
-import { createBadgeElement } from "../create-element/create-badge-element";
-import { LovelaceBadge } from "../types";
-import { ConfigError } from "./types";
-
-export class HuiBadgePreview extends HTMLElement {
-  private _hass?: HomeAssistant;
-
-  private _element?: LovelaceBadge;
-
-  private _config?: LovelaceBadgeConfig;
-
-  private get _error() {
-    return this._element?.tagName === "HUI-ERROR-CARD";
-  }
-
-  constructor() {
-    super();
-    this.addEventListener("ll-rebuild", () => {
-      this._cleanup();
-      if (this._config) {
-        this.config = this._config;
-      }
-    });
-  }
-
-  set hass(hass: HomeAssistant) {
-    this._hass = hass;
-    if (this._element) {
-      this._element.hass = hass;
-    }
-  }
-
-  set error(error: ConfigError) {
-    this._createBadge(
-      createErrorBadgeConfig(`${error.type}: ${error.message}`)
-    );
-  }
-
-  set config(configValue: LovelaceBadgeConfig) {
-    const curConfig = this._config;
-    this._config = configValue;
-
-    if (!configValue) {
-      this._cleanup();
-      return;
-    }
-
-    if (!this._element) {
-      this._createBadge(configValue);
-      return;
-    }
-
-    // in case the element was an error element we always want to recreate it
-    if (!this._error && curConfig && configValue.type === curConfig.type) {
-      this._element.setConfig(configValue);
-    } else {
-      this._createBadge(configValue);
-    }
-  }
-
-  private _createBadge(configValue: LovelaceBadgeConfig): void {
-    this._cleanup();
-    this._element = createBadgeElement(configValue);
-
-    if (this._hass) {
-      this._element!.hass = this._hass;
-    }
-
-    this.appendChild(this._element!);
-  }
-
-  private _cleanup() {
-    if (!this._element) {
-      return;
-    }
-    this.removeChild(this._element);
-    this._element = undefined;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-badge-preview": HuiBadgePreview;
-  }
-}
-
-customElements.define("hui-badge-preview", HuiBadgePreview);

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -38,16 +38,9 @@ import {
   DEFAULT_VIEW_LAYOUT,
   PANEL_VIEW_LAYOUT,
   SECTION_VIEW_LAYOUT,
-  VIEWS_NO_BADGE_SUPPORT,
 } from "../../views/const";
 import { addView, deleteView, replaceView } from "../config-util";
-import "../hui-badge-preview";
+import { ViewEditEvent, ViewVisibilityChangeEvent } from "../types";
-import { processEditorEntities } from "../process-editor-entities";
-import {
-  EntitiesEditorEvent,
-  ViewEditEvent,
-  ViewVisibilityChangeEvent,
-} from "../types";
 import "./hui-view-editor";
 import "./hui-view-background-editor";
 import "./hui-view-visibility-editor";
@@ -165,38 +158,6 @@ export class HuiDialogEditView extends LitElement {
             ></hui-view-background-editor>
           `;
           break;
-        case "tab-badges":
-          content = html`
-            ${this._config?.badges?.length
-              ? html`
-                  ${VIEWS_NO_BADGE_SUPPORT.includes(this._type)
-                    ? html`
-                        <ha-alert alert-type="warning">
-                          ${this.hass!.localize(
-                            "ui.panel.lovelace.editor.edit_badges.view_no_badges"
-                          )}
-                        </ha-alert>
-                      `
-                    : nothing}
-                  <div class="preview-badges">
-                    ${this._config.badges.map(
-                      (badgeConfig) => html`
-                        <hui-badge-preview
-                          .hass=${this.hass}
-                          .config=${badgeConfig}
-                        ></hui-badge-preview>
-                      `
-                    )}
-                  </div>
-                `
-              : nothing}
-            <hui-entity-editor
-              .hass=${this.hass}
-              .entities=${this._config?.badges || []}
-              @entities-changed=${this._badgesChanged}
-            ></hui-entity-editor>
-          `;
-          break;
         case "tab-visibility":
           content = html`
             <hui-view-visibility-editor
@@ -307,11 +268,6 @@ export class HuiDialogEditView extends LitElement {
                     "ui.panel.lovelace.editor.edit_view.tab_background"
                   )}</paper-tab
                 >
-                <paper-tab id="tab-badges"
-                  >${this.hass!.localize(
-                    "ui.panel.lovelace.editor.edit_view.tab_badges"
-                  )}</paper-tab
-                >
                 <paper-tab id="tab-visibility"
                   >${this.hass!.localize(
                     "ui.panel.lovelace.editor.edit_view.tab_visibility"
@@ -437,10 +393,6 @@ export class HuiDialogEditView extends LitElement {
       viewConf.cards = [];
     }
 
-    if (!viewConf.badges?.length) {
-      delete viewConf.badges;
-    }
-
     const lovelace = this._params.lovelace!;
 
     try {
@@ -495,17 +447,6 @@ export class HuiDialogEditView extends LitElement {
     this._dirty = true;
   }
 
-  private _badgesChanged(ev: EntitiesEditorEvent): void {
-    if (!this.hass || !ev.detail || !ev.detail.entities) {
-      return;
-    }
-    this._config = {
-      ...this._config,
-      badges: processEditorEntities(ev.detail.entities),
-    };
-    this._dirty = true;
-  }
-
   private _viewYamlChanged(ev: CustomEvent) {
     ev.stopPropagation();
     if (!ev.detail.isValid) {
@@ -580,12 +521,6 @@ export class HuiDialogEditView extends LitElement {
           color: var(--error-color);
           border-bottom: 1px solid var(--error-color);
         }
-        .preview-badges {
-          display: flex;
-          justify-content: center;
-          margin: 12px 16px;
-          flex-wrap: wrap;
-        }
         .incompatible {
           display: block;
         }

src/panels/lovelace/views/const.ts

@@ -2,4 +2,3 @@ export const DEFAULT_VIEW_LAYOUT = "masonry";
 export const PANEL_VIEW_LAYOUT = "panel";
 export const SIDEBAR_VIEW_LAYOUT = "sidebar";
 export const SECTION_VIEW_LAYOUT = "sections";
-export const VIEWS_NO_BADGE_SUPPORT = [PANEL_VIEW_LAYOUT, SIDEBAR_VIEW_LAYOUT];

src/translations/en.json

@@ -5503,7 +5503,6 @@
             "move_right": "Move view right",
             "tab_settings": "Settings",
             "tab_background": "Background",
-            "tab_badges": "Badges",
             "tab_visibility": "Visibility",
             "visibility": {
               "select_users": "Select which users should see this view in the navigation"