Add add device fab to devices page (#13931)

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

@@ -38,6 +38,7 @@ import { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
 import { showZWaveJSAddNodeDialog } from "../integrations/integration-panels/zwave_js/show-dialog-zwave_js-add-node";
+import { showAddIntegrationDialog } from "../integrations/show-add-integration-dialog";
 
 interface DeviceRowData extends DeviceRegistryEntry {
   device?: DeviceRowData;
@@ -363,16 +364,15 @@ export class HaConfigDeviceDashboard extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const { devicesOutput, filteredConfigEntry } =
-      this._devicesAndFilterDomains(
-        this.devices,
-        this.entries,
-        this.entities,
-        this.areas,
-        this._searchParms,
-        this._showDisabled,
-        this.hass.localize
-      );
+    const { devicesOutput } = this._devicesAndFilterDomains(
+      this.devices,
+      this.entries,
+      this.entities,
+      this.areas,
+      this._searchParms,
+      this._showDisabled,
+      this.hass.localize
+    );
     const activeFilters = this._activeFilters(
       this.entries,
       this._searchParms,
@@ -405,39 +405,21 @@ export class HaConfigDeviceDashboard extends LitElement {
         @search-changed=${this._handleSearchChange}
         @row-click=${this._handleRowClicked}
         clickable
-        .hasFab=${filteredConfigEntry &&
-        (filteredConfigEntry.domain === "zha" ||
-          filteredConfigEntry.domain === "zwave_js")}
+        hasFab
       >
         <ha-integration-overflow-menu
           .hass=${this.hass}
           slot="toolbar-icon"
         ></ha-integration-overflow-menu>
-        ${!filteredConfigEntry
-          ? ""
-          : filteredConfigEntry.domain === "zwave_js"
-          ? html`
-              <ha-fab
-                slot="fab"
-                .label=${this.hass.localize("ui.panel.config.zha.add_device")}
-                extended
-                ?rtl=${computeRTL(this.hass)}
-                @click=${this._showZJSAddDeviceDialog}
-              >
-                <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-              </ha-fab>
-            `
-          : filteredConfigEntry.domain === "zha"
-          ? html`<a href="/config/zha/add" slot="fab">
-              <ha-fab
-                .label=${this.hass.localize("ui.panel.config.zha.add_device")}
-                extended
-                ?rtl=${computeRTL(this.hass)}
-              >
-                <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-              </ha-fab>
-            </a>`
-          : html``}
+        <ha-fab
+          slot="fab"
+          .label=${this.hass.localize("ui.panel.config.devices.add_device")}
+          extended
+          @click=${this._addDevice}
+          ?rtl=${computeRTL(this.hass)}
+        >
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+        </ha-fab>
         <ha-button-menu slot="filter-menu" corner="BOTTOM_START" multi>
           <ha-icon-button
             slot="trigger"
@@ -516,7 +498,7 @@ export class HaConfigDeviceDashboard extends LitElement {
     this._showDisabled = true;
   }
 
-  private _showZJSAddDeviceDialog() {
+  private _addDevice() {
     const { filteredConfigEntry } = this._devicesAndFilterDomains(
       this.devices,
       this.entries,
@@ -526,7 +508,18 @@ export class HaConfigDeviceDashboard extends LitElement {
       this._showDisabled,
       this.hass.localize
     );
+    if (filteredConfigEntry?.domain === "zha") {
+      navigate(`/config/zha/add`);
+      return;
+    }
+    if (filteredConfigEntry?.domain === "zwave_js") {
+      this._showZJSAddDeviceDialog(filteredConfigEntry);
+      return;
+    }
+    showAddIntegrationDialog(this);
+  }
 
+  private _showZJSAddDeviceDialog(filteredConfigEntry: ConfigEntry) {
     showZWaveJSAddNodeDialog(this, {
       entry_id: filteredConfigEntry!.entry_id,
     });

src/panels/config/integrations/dialog-add-integration.ts

@@ -80,10 +80,10 @@ class AddIntegrationDialog extends LitElement {
 
   private _height?: number;
 
-  public showDialog(params: AddIntegrationDialogParams): void {
+  public showDialog(params?: AddIntegrationDialogParams): void {
     this._open = true;
-    this._pickedBrand = params.brand;
-    this._initialFilter = params.initialFilter;
+    this._pickedBrand = params?.brand;
+    this._initialFilter = params?.initialFilter;
     this._narrow = matchMedia(
       "all and (max-width: 450px), all and (max-height: 500px)"
     ).matches;

src/translations/en.json

@@ -2610,6 +2610,7 @@
         },
         "devices": {
           "add_prompt": "No {name} have been added using this {type} yet. You can add one by clicking the + button above.",
+          "add_device": "Add Device",
           "caption": "Devices",
           "description": "Manage configured devices",
           "device_info": "{type} info",