Display category dialog in category picker

src/components/ha-filter-categories.ts

@@ -12,8 +12,10 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import {
   CategoryRegistryEntry,
+  createCategoryRegistryEntry,
   deleteCategoryRegistryEntry,
   subscribeCategoryRegistry,
+  updateCategoryRegistryEntry,
 } from "../data/category_registry";
 import { showConfirmationDialog } from "../dialogs/generic/show-dialog-box";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
@@ -174,6 +176,8 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
     showCategoryRegistryDetailDialog(this, {
       scope: this.scope!,
       entry: this._categories.find((cat) => cat.category_id === id),
+      updateEntry: (updates) =>
+        updateCategoryRegistryEntry(this.hass, this.scope!, id, updates),
     });
   }
 
@@ -206,7 +210,11 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
     if (!this.scope) {
       return;
     }
-    showCategoryRegistryDetailDialog(this, { scope: this.scope });
+    showCategoryRegistryDetailDialog(this, {
+      scope: this.scope,
+      createEntry: (values) =>
+        createCategoryRegistryEntry(this.hass, this.scope!, values),
+    });
   }
 
   private _expandedWillChange(ev) {

src/panels/config/category/dialog-category-registry-detail.ts

@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
-import { property, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-alert";
 import { createCloseHeading } from "../../../components/ha-dialog";
@@ -8,14 +8,14 @@ import "../../../components/ha-icon-picker";
 import "../../../components/ha-settings-row";
 import "../../../components/ha-textfield";
 import {
+  CategoryRegistryEntry,
   CategoryRegistryEntryMutableParams,
-  createCategoryRegistryEntry,
-  updateCategoryRegistryEntry,
 } from "../../../data/category_registry";
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { CategoryRegistryDetailDialogParams } from "./show-dialog-category-registry-detail";
 
+@customElement("dialog-category-registry-detail")
 class DialogCategoryDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -123,24 +123,16 @@ class DialogCategoryDetail extends LitElement {
   private async _updateEntry() {
     const create = !this._params!.entry;
     this._submitting = true;
+    let newValue: CategoryRegistryEntry | undefined;
     try {
       const values: CategoryRegistryEntryMutableParams = {
         name: this._name.trim(),
         icon: this._icon || (create ? undefined : null),
       };
       if (create) {
-        await createCategoryRegistryEntry(
-          this.hass,
-          this._params!.scope,
-          values
-        );
+        newValue = await this._params!.createEntry!(values);
       } else {
-        await updateCategoryRegistryEntry(
-          this.hass,
-          this._params!.scope,
-          this._params!.entry!.category_id,
-          values
-        );
+        newValue = await this._params!.updateEntry!(values);
       }
       this.closeDialog();
     } catch (err: any) {
@@ -150,6 +142,7 @@ class DialogCategoryDetail extends LitElement {
     } finally {
       this._submitting = false;
     }
+    return newValue;
   }
 
   static get styles(): CSSResultGroup {
@@ -171,5 +164,3 @@ declare global {
     "dialog-category-registry-detail": DialogCategoryDetail;
   }
 }
-
-customElements.define("dialog-category-registry-detail", DialogCategoryDetail);

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

@@ -20,12 +20,9 @@ import {
   createCategoryRegistryEntry,
   subscribeCategoryRegistry,
 } from "../../../data/category_registry";
-import {
-  showAlertDialog,
-  showPromptDialog,
-} from "../../../dialogs/generic/show-dialog-box";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { HomeAssistant, ValueChangedEvent } from "../../../types";
+import { showCategoryRegistryDetailDialog } from "./show-dialog-category-registry-detail";
 
 type ScorableCategoryRegistryEntry = ScorableTextItem & CategoryRegistryEntry;
 
@@ -216,54 +213,29 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
     }
 
     (ev.target as any).value = this._value;
-    showPromptDialog(this, {
-      title: this.hass.localize(
-        "ui.components.category-picker.add_dialog.title"
-      ),
-      text: this.hass.localize("ui.components.category-picker.add_dialog.text"),
-      confirmText: this.hass.localize(
-        "ui.components.category-picker.add_dialog.add"
-      ),
-      inputLabel: this.hass.localize(
-        "ui.components.category-picker.add_dialog.name"
-      ),
-      defaultValue:
-        newValue === "add_new_suggestion" ? this._suggestion : undefined,
-      confirm: async (name) => {
-        if (!name) {
-          return;
-        }
-        try {
-          const category = await createCategoryRegistryEntry(
-            this.hass,
-            this.scope!,
-            {
-              name,
-            }
-          );
-          this._categories = [...this._categories!, category];
-          this.comboBox.filteredItems = this._getCategories(
-            this._categories,
-            this.noAdd
-          );
-          await this.updateComplete;
-          await this.comboBox.updateComplete;
-          this._setValue(category.category_id);
-        } catch (err: any) {
-          showAlertDialog(this, {
-            title: this.hass.localize(
-              "ui.components.category-picker.add_dialog.failed_create_category"
-            ),
-            text: err.message,
-          });
-        }
-      },
-      cancel: () => {
-        this._setValue(undefined);
-        this._suggestion = undefined;
-        this.comboBox.setInputValue("");
+
+    showCategoryRegistryDetailDialog(this, {
+      scope: this.scope!,
+      createEntry: async (values) => {
+        const category = await createCategoryRegistryEntry(
+          this.hass,
+          this.scope!,
+          values
+        );
+        this._categories = [...this._categories!, category];
+        this.comboBox.filteredItems = this._getCategories(
+          this._categories,
+          this.noAdd
+        );
+        await this.updateComplete;
+        await this.comboBox.updateComplete;
+        this._setValue(category.category_id);
+        return category;
       },
     });
+
+    this._suggestion = undefined;
+    this.comboBox.setInputValue("");
   }
 
   private _setValue(value?: string) {

src/panels/config/category/show-dialog-category-registry-detail.ts

@@ -1,9 +1,19 @@
 import { fireEvent } from "../../../common/dom/fire_event";
-import { CategoryRegistryEntry } from "../../../data/category_registry";
+import {
+  CategoryRegistryEntry,
+  CategoryRegistryEntryMutableParams,
+} from "../../../data/category_registry";
 
 export interface CategoryRegistryDetailDialogParams {
   entry?: CategoryRegistryEntry;
   scope: string;
+  suggestedName?: string;
+  createEntry?: (
+    values: CategoryRegistryEntryMutableParams
+  ) => Promise<CategoryRegistryEntry>;
+  updateEntry?: (
+    updates: Partial<CategoryRegistryEntryMutableParams>
+  ) => Promise<CategoryRegistryEntry>;
 }
 
 export const loadCategoryRegistryDetailDialog = () =>