Add no device option to device filter

src/components/ha-filter-devices.ts

@@ -20,6 +20,8 @@ import "./ha-check-list-item";
 import "./ha-expansion-panel";
 import "./search-input-outlined";
 
+export const FILTER_NO_DEVICE = "__NO_DEVICE__";
+
 @customElement("ha-filter-devices")
 export class HaFilterDevices extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -32,6 +34,9 @@ export class HaFilterDevices extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ type: Boolean, attribute: "no-device-option" })
+  public noDeviceOption = false;
+
   @state() private _shouldRender = false;
 
   @state() private _filter?: string;
@@ -74,6 +79,7 @@ export class HaFilterDevices extends LitElement {
                   .items=${this._devices(
                     this.hass.devices,
                     this._filter || "",
+                    this.noDeviceOption,
                     this.value
                   )}
                   .keyFunction=${this._keyFunction}
@@ -137,9 +143,13 @@ export class HaFilterDevices extends LitElement {
   }
 
   private _devices = memoizeOne(
-    (devices: HomeAssistant["devices"], filter: string, _value) => {
-      const values = Object.values(devices);
-      return values
+    (
+      devices: HomeAssistant["devices"],
+      filter: string,
+      noDeviceOption: boolean,
+      _value
+    ) => {
+      const values = Object.values(devices)
         .filter(
           (device) =>
             !filter ||
@@ -152,6 +162,28 @@ export class HaFilterDevices extends LitElement {
             this.hass.locale.language
           )
         );
+      if (noDeviceOption) {
+        values.unshift({
+          id: FILTER_NO_DEVICE,
+          name: this.hass.localize("ui.panel.config.devices.no_device"),
+          area_id: null,
+          configuration_url: null,
+          config_entries: [],
+          connections: [],
+          disabled_by: null,
+          entry_type: null,
+          identifiers: [],
+          manufacturer: null,
+          model: null,
+          name_by_user: null,
+          sw_version: null,
+          hw_version: null,
+          via_device_id: null,
+          serial_number: null,
+          labels: [],
+        });
+      }
+      return values;
     }
   );
 
@@ -171,7 +203,7 @@ export class HaFilterDevices extends LitElement {
 
     for (const deviceId of this.value) {
       value.push(deviceId);
-      if (this.type) {
+      if (this.type && deviceId !== FILTER_NO_DEVICE) {
         relatedPromises.push(findRelated(this.hass, "device", deviceId));
       }
     }

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

@@ -52,7 +52,6 @@ import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/ha-alert";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-check-list-item";
-import "../../../components/ha-filter-devices";
 import "../../../components/ha-filter-floor-areas";
 import "../../../components/ha-filter-integrations";
 import "../../../components/ha-filter-labels";
@@ -97,6 +96,7 @@ import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
 import { showAddIntegrationDialog } from "../integrations/show-add-integration-dialog";
 import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
+import { FILTER_NO_DEVICE } from "../../../components/ha-filter-devices";
 
 export interface StateEntity
   extends Omit<EntityRegistryEntry, "id" | "unique_id"> {
@@ -448,8 +448,12 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
             entity.labels.some((lbl) => filter.value!.includes(lbl))
           );
         } else if (filter.items) {
-          filteredEntities = filteredEntities.filter((entity) =>
-            filter.items!.has(entity.entity_id)
+          filteredEntities = filteredEntities.filter(
+            (entity) =>
+              filter.items!.has(entity.entity_id) ||
+              (key === "ha-filter-devices" &&
+                filter.value?.includes(FILTER_NO_DEVICE) &&
+                !entity.device_id)
           );
         }
       });
@@ -781,6 +785,7 @@ ${
           .expanded=${this._expandedFilter === "ha-filter-devices"}
           .narrow=${this.narrow}
           @expanded-changed=${this._filterExpanded}
+          no-device-option
         ></ha-filter-devices>
         <ha-filter-integrations
           .hass=${this.hass}

src/translations/en.json

@@ -3941,6 +3941,7 @@
           "name": "Name",
           "update": "Update",
           "no_devices": "No devices",
+          "no_device": "No device",
           "enabled_label": "Enable {type}",
           "enabled_cause": "The {type} is disabled by {cause}.",
           "disabled_by": {