Add Zigbee group removal to the ZHA config panel

src/data/zha.ts

@@ -164,3 +164,12 @@ export const fetchGroups = (hass: HomeAssistant): Promise<ZHAGroup[]> =>
   hass.callWS({
     type: "zha/groups",
   });
+
+export const removeGroups = (
+  hass: HomeAssistant,
+  groupIdsToRemove: number[]
+): Promise<ZHAGroup[]> =>
+  hass.callWS({
+    type: "zha/group/remove",
+    group_ids: groupIdsToRemove,
+  });

src/panels/config/zha/zha-groups-dashboard.ts

@@ -9,20 +9,37 @@ import {
   customElement,
   CSSResult,
   css,
+  PropertyValues,
 } from "lit-element";
 import { HomeAssistant } from "../../../types";
-import { ZHAGroup, fetchGroups } from "../../../data/zha";
+import { ZHAGroup, fetchGroups, removeGroups } from "../../../data/zha";
 import { sortZHAGroups } from "./functions";
+import { SelectionChangedEvent } from "../../../components/data-table/ha-data-table";
+import "@material/mwc-button";
+import "@polymer/paper-spinner/paper-spinner";
 
 @customElement("zha-groups-dashboard")
 export class ZHAGroupsDashboard extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public narrow = false;
-  @property() public _groups!: ZHAGroup[];
+  @property() public _groups?: ZHAGroup[];
+  @property() private _processingRemove: boolean = false;
+  @property() private _selectedGroupsToRemove: number[] = [];
+  private _firstUpdatedCalled: boolean = false;
 
   public connectedCallback(): void {
     super.connectedCallback();
-    this._fetchGroups();
+    if (this.hass && this._firstUpdatedCalled) {
+      this._fetchGroups();
+    }
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+    if (this.hass) {
+      this._fetchGroups();
+    }
+    this._firstUpdatedCalled = true;
   }
 
   protected render(): TemplateResult {
@@ -33,12 +50,41 @@ export class ZHAGroupsDashboard extends LitElement {
         )}
       >
         <div class="content">
-          <zha-groups-data-table
-            .hass=${this.hass}
-            .narrow=${this.narrow}
-            .groups=${this._groups}
-            class="table"
-          ></zha-groups-data-table>
+          ${this._groups
+            ? html`
+                <zha-groups-data-table
+                  .hass=${this.hass}
+                  .narrow=${this.narrow}
+                  .groups=${this._groups}
+                  .selectable=${true}
+                  @selection-changed=${this._handleRemoveSelectionChanged}
+                  class="table"
+                ></zha-groups-data-table>
+              `
+            : html`
+                <paper-spinner
+                  active
+                  alt=${this.hass!.localize("ui.common.loading")}
+                ></paper-spinner>
+              `}
+        </div>
+        <div class="paper-dialog-buttons">
+          <mwc-button
+            ?disabled="${!this._selectedGroupsToRemove.length ||
+              this._processingRemove}"
+            @click="${this._removeGroup}"
+            class="button"
+          >
+            <paper-spinner
+              ?active="${this._processingRemove}"
+              alt=${this.hass!.localize(
+                "ui.panel.config.zha.groups.removing_groups"
+              )}
+            ></paper-spinner>
+            ${this.hass!.localize(
+              "ui.panel.config.zha.groups.remove_groups"
+            )}</mwc-button
+          >
         </div>
       </hass-subpage>
     `;
@@ -48,6 +94,27 @@ export class ZHAGroupsDashboard extends LitElement {
     this._groups = (await fetchGroups(this.hass!)).sort(sortZHAGroups);
   }
 
+  private _handleRemoveSelectionChanged(ev: CustomEvent): void {
+    const changedSelection = ev.detail as SelectionChangedEvent;
+    const groupId = Number(changedSelection.id);
+    if (changedSelection.selected) {
+      this._selectedGroupsToRemove.push(groupId);
+    } else {
+      const index = this._selectedGroupsToRemove.indexOf(groupId);
+      if (index !== -1) {
+        this._selectedGroupsToRemove.splice(index, 1);
+      }
+    }
+    this._selectedGroupsToRemove = [...this._selectedGroupsToRemove];
+  }
+
+  private async _removeGroup(): Promise<void> {
+    this._processingRemove = true;
+    this._groups = await removeGroups(this.hass, this._selectedGroupsToRemove);
+    this._selectedGroupsToRemove = [];
+    this._processingRemove = false;
+  }
+
   static get styles(): CSSResult[] {
     return [
       css`
@@ -60,11 +127,28 @@ export class ZHAGroupsDashboard extends LitElement {
         .button {
           float: right;
         }
-
         .table {
           height: 200px;
           overflow: auto;
         }
+        mwc-button paper-spinner {
+          width: 14px;
+          height: 14px;
+          margin-right: 20px;
+        }
+        paper-spinner {
+          display: none;
+        }
+        paper-spinner[active] {
+          display: block;
+        }
+        .paper-dialog-buttons {
+          align-items: flex-end;
+          padding: 8px;
+        }
+        .paper-dialog-buttons .warning {
+          --mdc-theme-primary: var(--google-red-500);
+        }
       `,
     ];
   }

src/panels/config/zha/zha-groups-data-table.ts

@@ -27,6 +27,7 @@ export class ZHAGroupsDataTable extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public narrow = false;
   @property() public groups: ZHAGroup[] = [];
+  @property() public selectable = false;
 
   private _columns = memoizeOne(
     (narrow: boolean): DataTableColumnContainer =>
@@ -73,6 +74,7 @@ export class ZHAGroupsDataTable extends LitElement {
         .columns=${this._columns(this.narrow)}
         .data=${this.groups}
         .id=${"group_id"}
+        .selectable=${this.selectable}
       ></ha-data-table>
     `;
   }

src/translations/en.json

@@ -1445,7 +1445,9 @@
             "group_id": "Group ID",
             "members": "Members",
             "header": "Zigbee Group Management",
-            "introduction": "Create and modify zigbee groups"
+            "introduction": "Create and modify zigbee groups",
+            "remove_groups": "Remove Groups",
+            "removing_groups": "Removing Groups"
           }
         },
         "zwave": {