Add duplicate scene functionality (#9175)

src/data/scene.ts

@@ -39,6 +39,7 @@ export interface SceneEntity extends HassEntityBase {
 }
 
 export interface SceneConfig {
+  id?: string;
   name: string;
   icon?: string;
   entities: SceneEntities;

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

@@ -1,4 +1,11 @@
-import { mdiContentSave } from "@mdi/js";
+import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
+import "@material/mwc-list/mwc-list-item";
+import {
+  mdiContentDuplicate,
+  mdiContentSave,
+  mdiDelete,
+  mdiDotsVertical,
+} from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
@@ -48,6 +55,7 @@ import {
   SceneEntities,
   SceneEntity,
   SCENE_IGNORED_DOMAINS,
+  showSceneEditor,
 } from "../../../data/scene";
 import {
   showAlertDialog,
@@ -83,7 +91,7 @@ export class HaSceneEditor extends SubscribeMixin(
 
   @property() public route!: Route;
 
-  @property() public sceneId?: string;
+  @property() public sceneId: string | null = null;
 
   @property() public scenes!: SceneEntity[];
 
@@ -198,19 +206,52 @@ export class HaSceneEditor extends SubscribeMixin(
         .backCallback=${() => this._backTapped()}
         .tabs=${configSections.automation}
       >
-        ${!this.sceneId
-          ? ""
-          : html`
-              <ha-icon-button
-                class="warning"
-                slot="toolbar-icon"
-                title="${this.hass.localize(
-                  "ui.panel.config.scene.picker.delete_scene"
-                )}"
-                icon="hass:delete"
-                @click=${this._deleteTapped}
-              ></ha-icon-button>
-            `}
+        <ha-button-menu
+          corner="BOTTOM_START"
+          slot="toolbar-icon"
+          @action=${this._handleMenuAction}
+          activatable
+        >
+          <mwc-icon-button
+            slot="trigger"
+            .title=${this.hass.localize("ui.common.menu")}
+            .label=${this.hass.localize("ui.common.overflow_menu")}
+            ><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
+          </mwc-icon-button>
+
+          <mwc-list-item
+            .disabled=${!this.sceneId}
+            aria-label=${this.hass.localize(
+              "ui.panel.config.scene.picker.duplicate_scene"
+            )}
+            graphic="icon"
+          >
+            ${this.hass.localize(
+              "ui.panel.config.scene.picker.duplicate_scene"
+            )}
+            <ha-svg-icon
+              slot="graphic"
+              .path=${mdiContentDuplicate}
+            ></ha-svg-icon>
+          </mwc-list-item>
+
+          <mwc-list-item
+            .disabled=${!this.sceneId}
+            aria-label=${this.hass.localize(
+              "ui.panel.config.scene.picker.delete_scene"
+            )}
+            class=${classMap({ warning: Boolean(this.sceneId) })}
+            graphic="icon"
+          >
+            ${this.hass.localize("ui.panel.config.scene.picker.delete_scene")}
+            <ha-svg-icon
+              class=${classMap({ warning: Boolean(this.sceneId) })}
+              slot="graphic"
+              .path=${mdiDelete}
+            >
+            </ha-svg-icon>
+          </mwc-list-item>
+        </ha-button-menu>
         ${this._errors ? html` <div class="errors">${this._errors}</div> ` : ""}
         ${this.narrow ? html` <span slot="header">${name}</span> ` : ""}
         <div
@@ -479,6 +520,17 @@ export class HaSceneEditor extends SubscribeMixin(
     }
   }
 
+  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        this._duplicate();
+        break;
+      case 1:
+        this._deleteTapped();
+        break;
+    }
+  }
+
   private async _setScene() {
     const scene = this.scenes.find(
       (entity: SceneEntity) => entity.attributes.id === this.sceneId
@@ -683,6 +735,31 @@ export class HaSceneEditor extends SubscribeMixin(
     history.back();
   }
 
+  private async _duplicate() {
+    if (this._dirty) {
+      if (
+        !(await showConfirmationDialog(this, {
+          text: this.hass!.localize(
+            "ui.panel.config.scene.editor.unsaved_confirm"
+          ),
+          confirmText: this.hass!.localize("ui.common.leave"),
+          dismissText: this.hass!.localize("ui.common.stay"),
+        }))
+      ) {
+        return;
+      }
+      // Wait for dialog to complete closing
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    }
+    showSceneEditor(this, {
+      ...this._config,
+      id: undefined,
+      name: `${this._config?.name} (${this.hass.localize(
+        "ui.panel.config.scene.picker.duplicate"
+      )})`,
+    });
+  }
+
   private _calculateStates(): SceneEntities {
     const output: SceneEntities = {};
     this._entities.forEach((entityId) => {

src/translations/en.json

@@ -1680,6 +1680,8 @@
             "show_info_scene": "Show info about scene",
             "delete_scene": "Delete scene",
             "delete_confirm": "Are you sure you want to delete this scene?",
+            "duplicate_scene": "Duplicate scene",
+            "duplicate": "Duplicate",
             "headers": {
               "name": "Name"
             }