Refactor da bda wizards use menu actions (openscd#630)

* refactor(wizards/da): remove mwc-button from wizard content

* refactor(wizards/bda): remove mwc-button from wizard content

* fix: merge issue

Author: JakobVogelsang

src/wizards/bda.ts

@@ -1,5 +1,4 @@
-import { html } from 'lit-html';
-import { get, translate } from 'lit-translate';
+import { get } from 'lit-translate';
 
 import '@material/mwc-button';
 
@@ -9,14 +8,19 @@ import {
   EditorAction,
   getValue,
   isPublic,
-  newActionEvent,
-  newWizardEvent,
   Wizard,
   WizardActor,
   WizardInput,
+  WizardMenuActor,
 } from '../foundation.js';
 import { getValAction, wizardContent } from './abstractda.js';
 
+function remove(element: Element): WizardMenuActor {
+  return (): EditorAction[] => {
+    return [{ old: { parent: element.parentElement!, element } }];
+  };
+}
+
 export function updateBDaAction(element: Element): WizardActor {
   return (inputs: WizardInput[]): EditorAction[] => {
     const name = getValue(inputs.find(i => i.label === 'name')!)!;
@@ -80,24 +84,6 @@ export function updateBDaAction(element: Element): WizardActor {
 export function editBDAWizard(element: Element): Wizard {
   const doc = element.ownerDocument;
   const type = element.getAttribute('type');
-  const deleteButton = html`<mwc-button
-    icon="delete"
-    trailingIcon
-    label="${translate('remove')}"
-    @click=${(e: MouseEvent) => {
-      e.target!.dispatchEvent(newWizardEvent());
-      e.target!.dispatchEvent(
-        newActionEvent({
-          old: {
-            parent: element.parentElement!,
-            element: element,
-            reference: element.nextSibling,
-          },
-        })
-      );
-    }}
-    fullwidth
-  ></mwc-button>`;
   const name = element.getAttribute('name');
   const desc = element.getAttribute('desc');
   const bType = element.getAttribute('bType') ?? '';
@@ -121,8 +107,14 @@ export function editBDAWizard(element: Element): Wizard {
         label: get('save'),
         action: updateBDaAction(element),
       },
+      menuActions: [
+        {
+          icon: 'delete',
+          label: get('remove'),
+          action: remove(element),
+        },
+      ],
       content: [
-        deleteButton,
         ...wizardContent(
           name,
           desc,

src/wizards/da.ts

@@ -12,15 +12,20 @@ import {
   EditorAction,
   getValue,
   isPublic,
-  newActionEvent,
-  newWizardEvent,
   Wizard,
   WizardActor,
   WizardInput,
+  WizardMenuActor,
 } from '../foundation.js';
 import { getValAction, wizardContent } from './abstractda.js';
 import { functionalConstraintEnum } from './foundation/enums.js';
 
+function remove(element: Element): WizardMenuActor {
+  return (): EditorAction[] => {
+    return [{ old: { parent: element.parentElement!, element } }];
+  };
+}
+
 export function renderDa(
   fc: string,
   dchg: string | null,
@@ -149,25 +154,6 @@ export function editDAWizard(element: Element): Wizard {
   const qchg = element.getAttribute('qchg');
   const dupd = element.getAttribute('dupd');
 
-  const deleteButton = html`<mwc-button
-    icon="delete"
-    trailingIcon
-    label="${translate('remove')}"
-    @click=${(e: MouseEvent) => {
-      e.target!.dispatchEvent(newWizardEvent());
-      e.target!.dispatchEvent(
-        newActionEvent({
-          old: {
-            parent: element.parentElement!,
-            element: element,
-            reference: element.nextSibling,
-          },
-        })
-      );
-    }}
-    fullwidth
-  ></mwc-button>`;
-
   const types = Array.from(doc.querySelectorAll('DAType, EnumType'))
     .filter(isPublic)
     .filter(type => type.getAttribute('id'));
@@ -183,8 +169,14 @@ export function editDAWizard(element: Element): Wizard {
         label: get('save'),
         action: updateDaAction(element),
       },
+      menuActions: [
+        {
+          icon: 'delete',
+          label: get('remove'),
+          action: remove(element),
+        },
+      ],
       content: [
-        deleteButton,
         ...wizardContent(
           name,
           desc,

test/integration/wizards/__snapshots__/bda-wizarding-editing.test.snap.js

@@ -7,14 +7,31 @@ snapshots["BDA wizarding editing integration defines a editBDaWizard to edit an
   heading="[bda.wizard.title.edit]"
   open=""
 >
-  <div id="wizard-content">
-    <mwc-button
-      fullwidth=""
-      icon="delete"
-      label="[remove]"
-      trailingicon=""
+  <nav>
+    <mwc-icon-button icon="more_vert">
+    </mwc-icon-button>
+    <mwc-menu
+      class="actions-menu"
+      corner="BOTTOM_RIGHT"
+      menucorner="END"
     >
-    </mwc-button>
+      <mwc-list-item
+        aria-disabled="false"
+        graphic="icon"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="0"
+      >
+        <span>
+          [remove]
+        </span>
+        <mwc-icon slot="graphic">
+          delete
+        </mwc-icon>
+      </mwc-list-item>
+    </mwc-menu>
+  </nav>
+  <div id="wizard-content">
     <wizard-textfield
       dialoginitialfocus=""
       helper="[scl.name]"

test/integration/wizards/__snapshots__/da-wizarding-editing.test.snap.js

@@ -7,14 +7,31 @@ snapshots["DA wizarding editing integration defines a editDaWizard to edit an ex
   heading="[da.wizard.title.edit]"
   open=""
 >
-  <div id="wizard-content">
-    <mwc-button
-      fullwidth=""
-      icon="delete"
-      label="[remove]"
-      trailingicon=""
+  <nav>
+    <mwc-icon-button icon="more_vert">
+    </mwc-icon-button>
+    <mwc-menu
+      class="actions-menu"
+      corner="BOTTOM_RIGHT"
+      menucorner="END"
     >
-    </mwc-button>
+      <mwc-list-item
+        aria-disabled="false"
+        graphic="icon"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="0"
+      >
+        <span>
+          [remove]
+        </span>
+        <mwc-icon slot="graphic">
+          delete
+        </mwc-icon>
+      </mwc-list-item>
+    </mwc-menu>
+  </nav>
+  <div id="wizard-content">
     <wizard-textfield
       dialoginitialfocus=""
       helper="[scl.name]"

test/integration/wizards/bda-wizarding-editing.test.ts

@@ -4,6 +4,7 @@ import '../../mock-wizard-editor.js';
 import { MockWizardEditor } from '../../mock-wizard-editor.js';
 
 import { ListItem } from '@material/mwc-list/mwc-list-item';
+import { ListItemBase } from '@material/mwc-list/mwc-list-item-base';
 
 import { FilteredList } from '../../../src/filtered-list.js';
 import { WizardSelect } from '../../../src/wizard-select.js';
@@ -66,13 +67,18 @@ describe('BDA wizarding editing integration', () => {
         )
       );
       deleteButton = <HTMLElement>(
-        parent.wizardUI.dialog?.querySelector('mwc-button[icon="delete"]')
+        Array.from(
+          parent.wizardUI.dialog!.querySelectorAll<ListItemBase>(
+            'mwc-menu > mwc-list-item'
+          )
+        ).find(item => item.innerHTML.includes('[remove]'))
       );
     });
 
     it('looks like the latest snapshot', async () => {
       await expect(parent.wizardUI.dialog).to.equalSnapshot();
     });
+
     it('edits BDA element', async () => {
       expect(
         doc.querySelector(
@@ -94,6 +100,7 @@ describe('BDA wizarding editing integration', () => {
         )
       ).to.exist;
     });
+
     it('deletes the BDA element on delete button click', async () => {
       expect(
         doc.querySelector(

test/integration/wizards/da-wizarding-editing.test.ts

@@ -67,7 +67,11 @@ describe('DA wizarding editing integration', () => {
         )
       );
       deleteButton = <HTMLElement>(
-        parent.wizardUI.dialog?.querySelector('mwc-button[icon="delete"]')
+        Array.from(
+          parent.wizardUI.dialog!.querySelectorAll<ListItemBase>(
+            'mwc-menu > mwc-list-item'
+          )
+        ).find(item => item.innerHTML.includes('[remove]'))
       );
     });
 
@@ -133,7 +137,6 @@ describe('DA wizarding editing integration', () => {
     let descField: WizardTextField;
     let sAddrField: WizardTextField;
     let bTypeSelect: WizardSelect;
-    let typeSelect: WizardSelect;
     let valKindSelect: WizardSelect;
     let valImportSelect: WizardCheckbox;
     let fcSelect: WizardSelect;
@@ -169,9 +172,6 @@ describe('DA wizarding editing integration', () => {
       bTypeSelect = <WizardSelect>(
         parent.wizardUI.dialog?.querySelector('wizard-select[label="bType"]')
       );
-      typeSelect = <WizardSelect>(
-        parent.wizardUI.dialog?.querySelector('wizard-select[label="type"]')
-      );
       valKindSelect = <WizardSelect>(
         parent.wizardUI.dialog?.querySelector('wizard-select[label="valKind"]')
       );