Fix lint warnings (#10157)

.eslintrc.json

@@ -111,8 +111,7 @@
     ],
     "unused-imports/no-unused-imports": "error",
     "lit/attribute-value-entities": "off",
-    "lit/no-template-map": "off",
+    "lit/no-template-map": "off"
-    "lit/no-template-arrow": "warn"
   },
   "plugins": ["disable", "unused-imports"],
   "processor": "disable/disable"

src/components/ha-selector/ha-selector-device.ts

@@ -34,7 +34,7 @@ export class HaDeviceSelector extends LitElement {
       .hass=${this.hass}
       .value=${this.value}
       .label=${this.label}
-      .deviceFilter=${(device) => this._filterDevices(device)}
+      .deviceFilter=${this._filterDevices}
       .includeDeviceClasses=${this.selector.device.entity?.device_class
         ? [this.selector.device.entity.device_class]
         : undefined}
@@ -46,7 +46,7 @@ export class HaDeviceSelector extends LitElement {
     ></ha-device-picker>`;
   }
 
-  private _filterDevices(device: DeviceRegistryEntry): boolean {
+  private _filterDevices = (device: DeviceRegistryEntry): boolean => {
     if (
       this.selector.device?.manufacturer &&
       device.manufacturer !== this.selector.device.manufacturer
@@ -70,7 +70,7 @@ export class HaDeviceSelector extends LitElement {
       }
     }
     return true;
-  }
+  };
 
   private async _loadConfigEntries() {
     this._configEntries = (await getConfigEntries(this.hass)).filter(

src/components/ha-selector/ha-selector-entity.ts

@@ -27,7 +27,7 @@ export class HaEntitySelector extends SubscribeMixin(LitElement) {
       .hass=${this.hass}
       .value=${this.value}
       .label=${this.label}
-      .entityFilter=${(entity) => this._filterEntities(entity)}
+      .entityFilter=${this._filterEntities}
       .disabled=${this.disabled}
       allow-custom-entity
     ></ha-entity-picker>`;
@@ -48,7 +48,7 @@ export class HaEntitySelector extends SubscribeMixin(LitElement) {
     ];
   }
 
-  private _filterEntities(entity: HassEntity): boolean {
+  private _filterEntities = (entity: HassEntity): boolean => {
     if (this.selector.entity?.domain) {
       if (computeStateDomain(entity) !== this.selector.entity.domain) {
         return false;
@@ -72,7 +72,7 @@ export class HaEntitySelector extends SubscribeMixin(LitElement) {
       }
     }
     return true;
-  }
+  };
 }
 
 declare global {

src/components/ha-selector/ha-selector-target.ts

@@ -69,10 +69,9 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
     return html`<ha-target-picker
       .hass=${this.hass}
       .value=${this.value}
-      .deviceFilter=${(device) => this._filterDevices(device)}
+      .deviceFilter=${this._filterDevices}
-      .entityRegFilter=${(entity: EntityRegistryEntry) =>
+      .entityRegFilter=${this._filterRegEntities}
-        this._filterRegEntities(entity)}
+      .entityFilter=${this._filterEntities}
-      .entityFilter=${(entity: HassEntity) => this._filterEntities(entity)}
       .includeDeviceClasses=${this.selector.target.entity?.device_class
         ? [this.selector.target.entity.device_class]
         : undefined}
@@ -83,7 +82,7 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
     ></ha-target-picker>`;
   }
 
-  private _filterEntities(entity: HassEntity): boolean {
+  private _filterEntities = (entity: HassEntity): boolean => {
     if (
       this.selector.target.entity?.integration ||
       this.selector.target.device?.integration
@@ -98,18 +97,18 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
       }
     }
     return true;
-  }
+  };
 
-  private _filterRegEntities(entity: EntityRegistryEntry): boolean {
+  private _filterRegEntities = (entity: EntityRegistryEntry): boolean => {
     if (this.selector.target.entity?.integration) {
       if (entity.platform !== this.selector.target.entity.integration) {
         return false;
       }
     }
     return true;
-  }
+  };
 
-  private _filterDevices(device: DeviceRegistryEntry): boolean {
+  private _filterDevices = (device: DeviceRegistryEntry): boolean => {
     if (
       this.selector.target.device?.manufacturer &&
       device.manufacturer !== this.selector.target.device.manufacturer
@@ -135,7 +134,7 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
       }
     }
     return true;
-  }
+  };
 
   private async _loadConfigEntries() {
     this._configEntries = (await getConfigEntries(this.hass)).filter(

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

@@ -113,7 +113,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
-        .backCallback=${() => this._backTapped()}
+        .backCallback=${this._backTapped}
         .tabs=${configSections.automation}
       >
         <ha-button-menu
@@ -435,7 +435,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     this._dirty = true;
   }
 
-  private _backTapped(): void {
+  private _backTapped = (): void => {
     if (this._dirty) {
       showConfirmationDialog(this, {
         text: this.hass!.localize(
@@ -448,7 +448,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     } else {
       history.back();
     }
-  }
+  };
 
   private async _duplicate() {
     if (this._dirty) {

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

@@ -135,7 +135,7 @@ class HaAutomationPicker extends LitElement {
           template: (_info, automation: any) => html`
             <mwc-button
               .automation=${automation}
-              @click=${(ev) => this._runActions(ev)}
+              @click=${this._runActions}
               .disabled=${UNAVAILABLE_STATES.includes(automation.state)}
             >
               ${this.hass.localize("ui.card.automation.trigger")}
@@ -313,10 +313,10 @@ class HaAutomationPicker extends LitElement {
     });
   }
 
-  private _runActions(ev) {
+  private _runActions = (ev) => {
     const entityId = ev.currentTarget.automation.entity_id;
     triggerAutomationActions(this.hass, entityId);
-  }
+  };
 
   private _createNew() {
     if (

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

@@ -90,7 +90,7 @@ export class HaAutomationTrace extends LitElement {
     }
 
     const actionButtons = html`
-      <mwc-icon-button label="Refresh" @click=${() => this._loadTraces()}>
+      <mwc-icon-button label="Refresh" @click=${this._refreshTraces}>
         <ha-svg-icon .path=${mdiRefresh}></ha-svg-icon>
       </mwc-icon-button>
       <mwc-icon-button
@@ -111,7 +111,7 @@ export class HaAutomationTrace extends LitElement {
         .tabs=${configSections.automation}
       >
         ${this.narrow
-          ? html`<span slot="header"> ${title} </span>
+          ? html`<span slot="header">${title}</span>
               <div slot="toolbar-icon">${actionButtons}</div>`
           : ""}
         <div class="toolbar">
@@ -335,6 +335,10 @@ export class HaAutomationTrace extends LitElement {
     this._selected = ev.detail;
   }
 
+  private _refreshTraces() {
+    this._loadTraces();
+  }
+
   private async _loadTraces(runId?: string) {
     this._traces = await loadTraces(this.hass, "automation", this.automationId);
     // Newest will be on top.

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

@@ -78,7 +78,7 @@ class DialogThingtalk extends LitElement {
           .hass=${this.hass}
           .placeholders=${this._placeholders}
           .opened=${this._opened}
-          .skip=${() => this._skip()}
+          .skip=${this._skip}
           @opened-changed=${this._openedChanged}
           @placeholders-filled=${this._handlePlaceholders}
         >
@@ -229,10 +229,10 @@ class DialogThingtalk extends LitElement {
     this.closeDialog();
   }
 
-  private _skip() {
+  private _skip = () => {
     this._params!.callback(undefined);
     this.closeDialog();
-  }
+  };
 
   private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
     if (!ev.detail.value) {

src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts

@@ -1,3 +1,4 @@
+/* eslint-disable lit/no-template-arrow */
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -127,13 +127,13 @@ class HaBlueprintOverview extends LitElement {
                 title=${this.hass.localize(
                   "ui.panel.config.blueprint.overview.use_blueprint"
                 )}
-                @click=${(ev) => this._createNew(ev)}
+                @click=${this._createNew}
               >
                 <ha-svg-icon .path=${mdiRobot}></ha-svg-icon>
               </mwc-icon-button>`
             : html`<mwc-button
                 .blueprint=${blueprint}
-                @click=${(ev) => this._createNew(ev)}
+                @click=${this._createNew}
               >
                 ${this.hass.localize(
                   "ui.panel.config.blueprint.overview.use_blueprint"
@@ -154,7 +154,7 @@ class HaBlueprintOverview extends LitElement {
                     ? "ui.panel.config.blueprint.overview.share_blueprint"
                     : "ui.panel.config.blueprint.overview.share_blueprint_no_url"
                 )}
-                @click=${(ev) => this._share(ev)}
+                @click=${this._share}
                 ><ha-svg-icon .path=${mdiShareVariant}></ha-svg-icon
               ></mwc-icon-button>`,
       },
@@ -169,7 +169,7 @@ class HaBlueprintOverview extends LitElement {
                 .label=${this.hass.localize(
                   "ui.panel.config.blueprint.overview.delete_blueprint"
                 )}
-                @click=${(ev) => this._delete(ev)}
+                @click=${this._delete}
                 ><ha-svg-icon .path=${mdiDelete}></ha-svg-icon
               ></mwc-icon-button>`,
       },
@@ -275,12 +275,12 @@ class HaBlueprintOverview extends LitElement {
     fireEvent(this, "reload-blueprints");
   }
 
-  private _createNew(ev) {
+  private _createNew = (ev) => {
     const blueprint = ev.currentTarget.blueprint as BlueprintMetaDataPath;
     createNewFunctions[blueprint.domain](blueprint);
-  }
+  };
 
-  private _share(ev) {
+  private _share = (ev) => {
     const blueprint = ev.currentTarget.blueprint;
     const params = new URLSearchParams();
     params.append("redirect", "blueprint_import");
@@ -288,9 +288,9 @@ class HaBlueprintOverview extends LitElement {
     window.open(
       `https://my.home-assistant.io/create-link/?${params.toString()}`
     );
-  }
+  };
 
-  private async _delete(ev) {
+  private _delete = async (ev) => {
     const blueprint = ev.currentTarget.blueprint;
     if (
       !(await showConfirmationDialog(this, {
@@ -306,7 +306,7 @@ class HaBlueprintOverview extends LitElement {
     }
     await deleteBlueprint(this.hass, blueprint.domain, blueprint.path);
     fireEvent(this, "reload-blueprints");
-  }
+  };
 
   static get styles(): CSSResultGroup {
     return haStyle;

src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts

@@ -173,7 +173,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
             .label=${this.hass.localize(
               "ui.panel.config.zha.visualization.zoom_label"
             )}
-            .deviceFilter=${(device) => this._filterDevices(device)}
+            .deviceFilter=${this._filterDevices}
             @value-changed=${this._onZoomToDevice}
           ></ha-device-picker>
           <div class="controls">
@@ -359,7 +359,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
     await refreshTopology(this.hass);
   }
 
-  private _filterDevices(device: DeviceRegistryEntry): boolean {
+  private _filterDevices = (device: DeviceRegistryEntry): boolean => {
     if (!this.hass) {
       return false;
     }
@@ -371,7 +371,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
       }
     }
     return false;
-  }
+  };
 
   private _handleCheckboxChange(ev: Event) {
     this._autoZoom = (ev.target as HaCheckbox).checked;

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

@@ -77,7 +77,7 @@ class HaSceneDashboard extends LitElement {
               title=${this.hass.localize(
                 "ui.panel.config.scene.picker.activate_scene"
               )}
-              @click=${(ev: Event) => this._activateScene(ev)}
+              @click=${this._activateScene}
             >
               <ha-svg-icon .path=${mdiPlay}></ha-svg-icon>
             </mwc-icon-button>
@@ -213,7 +213,7 @@ class HaSceneDashboard extends LitElement {
     fireEvent(this, "hass-more-info", { entityId });
   }
 
-  private async _activateScene(ev) {
+  private _activateScene = async (ev) => {
     ev.stopPropagation();
     const scene = ev.currentTarget.scene as SceneEntity;
     await activateScene(this.hass, scene.entity_id);
@@ -225,7 +225,7 @@ class HaSceneDashboard extends LitElement {
       ),
     });
     forwardHaptic("light");
-  }
+  };
 
   private _showHelp() {
     showAlertDialog(this, {

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

@@ -201,7 +201,7 @@ export class HaSceneEditor extends SubscribeMixin(
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
-        .backCallback=${() => this._backTapped()}
+        .backCallback=${this._backTapped}
         .tabs=${configSections.automation}
       >
         <ha-button-menu
@@ -698,7 +698,7 @@ export class HaSceneEditor extends SubscribeMixin(
     }
   }
 
-  private _backTapped(): void {
+  private _backTapped = (): void => {
     if (this._dirty) {
       showConfirmationDialog(this, {
         text: this.hass!.localize(
@@ -711,7 +711,7 @@ export class HaSceneEditor extends SubscribeMixin(
     } else {
       this._goBack();
     }
-  }
+  };
 
   private _goBack(): void {
     applyScene(this.hass, this._storedStates);

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

@@ -87,7 +87,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
-        .backCallback=${() => this._backTapped()}
+        .backCallback=${this._backTapped}
         .tabs=${configSections.automation}
       >
         <ha-button-menu
@@ -578,7 +578,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     this._dirty = true;
   }
 
-  private _backTapped(): void {
+  private _backTapped = (): void => {
     if (this._dirty) {
       showConfirmationDialog(this, {
         text: this.hass!.localize(
@@ -591,7 +591,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     } else {
       history.back();
     }
-  }
+  };
 
   private async _duplicate() {
     if (this._dirty) {

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

@@ -79,7 +79,7 @@ class HaScriptPicker extends LitElement {
               title=${this.hass.localize(
                 "ui.panel.config.script.picker.run_script"
               )}
-              @click=${(ev: Event) => this._runScript(ev)}
+              @click=${this._runScript}
             >
               <ha-svg-icon .path=${mdiPlay}></ha-svg-icon>
             </mwc-icon-button>
@@ -234,7 +234,7 @@ class HaScriptPicker extends LitElement {
     this._filterValue = undefined;
   }
 
-  private async _runScript(ev) {
+  private _runScript = async (ev) => {
     ev.stopPropagation();
     const script = ev.currentTarget.script as HassEntity;
     await triggerScript(this.hass, script.entity_id);
@@ -245,7 +245,7 @@ class HaScriptPicker extends LitElement {
         computeStateName(script)
       ),
     });
-  }
+  };
 
   private _showInfo(ev) {
     ev.stopPropagation();

src/panels/config/script/ha-script-trace.ts

@@ -88,7 +88,7 @@ export class HaScriptTrace extends LitElement {
     }
 
     const actionButtons = html`
-      <mwc-icon-button label="Refresh" @click=${() => this._loadTraces()}>
+      <mwc-icon-button label="Refresh" @click=${this._refreshTraces}>
         <ha-svg-icon .path=${mdiRefresh}></ha-svg-icon>
       </mwc-icon-button>
       <mwc-icon-button
@@ -321,6 +321,10 @@ export class HaScriptTrace extends LitElement {
     this._selected = ev.detail;
   }
 
+  private _refreshTraces() {
+    this._loadTraces();
+  }
+
   private async _loadTraces(runId?: string) {
     this._traces = await loadTraces(
       this.hass,

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

@@ -107,8 +107,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
           type: "icon-button",
           template: (_write, tag: any) => html` <mwc-icon-button
             .tag=${tag}
-            @click=${(ev: Event) =>
+            @click=${this._handleWriteClick}
-              this._openWrite((ev.currentTarget as any).tag)}
             title=${this.hass.localize("ui.panel.config.tag.write")}
           >
             <ha-svg-icon .path=${mdiContentDuplicate}></ha-svg-icon>
@@ -120,8 +119,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
         type: "icon-button",
         template: (_automation, tag: any) => html` <mwc-icon-button
           .tag=${tag}
-          @click=${(ev: Event) =>
+          @click=${this._handleAutomationClick}
-            this._createAutomation((ev.currentTarget as any).tag)}
           title=${this.hass.localize("ui.panel.config.tag.create_automation")}
         >
           <ha-svg-icon .path=${mdiRobot}></ha-svg-icon>
@@ -132,8 +130,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
         type: "icon-button",
         template: (_settings, tag: any) => html` <mwc-icon-button
           .tag=${tag}
-          @click=${(ev: Event) =>
+          @click=${this._handleEditClick}
-            this._openDialog((ev.currentTarget as any).tag)}
           title=${this.hass.localize("ui.panel.config.tag.edit")}
         >
           <ha-svg-icon .path=${mdiCog}></ha-svg-icon>
@@ -209,6 +206,25 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
     `;
   }
 
+  private _handleWriteClick = (ev: Event) =>
+    this._openWrite((ev.currentTarget as any).tag);
+
+  private _handleAutomationClick = (ev: Event) => {
+    const tag = (ev.currentTarget as any).tag;
+    const data = {
+      alias: this.hass.localize(
+        "ui.panel.config.tag.automation_title",
+        "name",
+        tag.name || tag.id
+      ),
+      trigger: [{ platform: "tag", tag_id: tag.id } as TagTrigger],
+    };
+    showAutomationEditor(data);
+  };
+
+  private _handleEditClick = (ev: Event) =>
+    this._openDialog((ev.currentTarget as any).tag);
+
   private _showHelp() {
     showAlertDialog(this, {
       title: this.hass.localize("ui.panel.config.tag.caption"),
@@ -251,18 +267,6 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
     });
   }
 
-  private _createAutomation(tag: Tag) {
-    const data = {
-      alias: this.hass.localize(
-        "ui.panel.config.tag.automation_title",
-        "name",
-        tag.name || tag.id
-      ),
-      trigger: [{ platform: "tag", tag_id: tag.id } as TagTrigger],
-    };
-    showAutomationEditor(data);
-  }
-
   private _addTag() {
     this._openDialog();
   }

src/panels/developer-tools/statistics/developer-tools-statistics.ts

@@ -41,7 +41,6 @@ class HaPanelDevStatistics extends LitElement {
     this._validateStatistics();
   }
 
-  /* eslint-disable lit/no-template-arrow */
   private _columns = memoizeOne(
     (localize): DataTableColumnContainer => ({
       state: {
@@ -88,10 +87,7 @@ class HaPanelDevStatistics extends LitElement {
         title: "",
         template: (_, data: any) =>
           html`${data.issues
-            ? html`<mwc-button
+            ? html`<mwc-button @click=${this._fixIssue} .data=${data.issues}>
-                @click=${(ev) => this._fixIssue(ev)}
-                .data=${data.issues}
-              >
                 Fix issue
               </mwc-button>`
             : ""}`,
@@ -99,7 +95,6 @@ class HaPanelDevStatistics extends LitElement {
       },
     })
   );
-  /* eslint-enable lit/no-template-arrow */
 
   protected render() {
     return html`
@@ -150,7 +145,7 @@ class HaPanelDevStatistics extends LitElement {
     });
   }
 
-  private _fixIssue(ev) {
+  private _fixIssue = (ev) => {
     const issues = (ev.currentTarget.data as StatisticsValidationResult[]).sort(
       (itemA, itemB) =>
         (FIX_ISSUES_ORDER[itemA.type] ?? 99) -
@@ -236,7 +231,7 @@ class HaPanelDevStatistics extends LitElement {
           text: "Fixing this issue is not supported yet.",
         });
     }
-  }
+  };
 
   static get styles(): CSSResultGroup {
     return [

src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts

@@ -90,8 +90,7 @@ export class HuiCreateDialogCard
           </ha-header-bar>
           <mwc-tab-bar
             .activeIndex=${this._currTabIndex}
-            @MDCTabBar:activated=${(ev: CustomEvent) =>
+            @MDCTabBar:activated=${this._handleTabChanged}
-              this._handleTabChanged(ev)}
           >
             <mwc-tab
               .label=${this.hass!.localize(