refactor(wizards/dataset): remove mwc-button from wizard content (openscd#631)

Author: JakobVogelsang

src/wizards/dataset.ts

@@ -11,16 +11,22 @@ import {
   cloneElement,
   getValue,
   identity,
-  newSubWizardEvent,
   selector,
   Replace,
   Wizard,
   WizardAction,
   WizardActor,
   WizardInput,
+  WizardMenuActor,
 } from '../foundation.js';
 import { createFCDAsWizard } from './fcda.js';
 
+function openFcdaWizard(element: Element): WizardMenuActor {
+  return (): WizardAction[] => {
+    return [() => createFCDAsWizard(element)];
+  };
+}
+
 function updateDataSetAction(element: Element): WizardActor {
   return (inputs: WizardInput[], wizard: Element): WizardAction[] => {
     const name = inputs.find(i => i.label === 'name')!.value!;
@@ -89,6 +95,13 @@ export function editDataSetWizard(element: Element): Wizard {
         icon: 'save',
         action: updateDataSetAction(element),
       },
+      menuActions: [
+        {
+          icon: 'add',
+          label: get('dataset.fcda.add'),
+          action: openFcdaWizard(element),
+        },
+      ],
       content: [
         html`<wizard-textfield
           label="name"
@@ -116,15 +129,6 @@ export function editDataSetWizard(element: Element): Wizard {
               >`
           )}</filtered-list
         >`,
-        html`<mwc-button
-          icon="add"
-          label="${translate('wizard.title.add', { tagName: 'FCDA' })}"
-          @click="${(e: Event) => {
-            e.target?.dispatchEvent(
-              newSubWizardEvent(() => createFCDAsWizard(element))
-            );
-          }}"
-        ></mwc-button>`,
       ],
     },
   ];

test/unit/wizards/__snapshots__/dataset.test.snap.js

@@ -7,6 +7,29 @@ snapshots["dataset wizards include a dataset edit wizard looks like the latest s
   heading="[wizard.title.edit]"
   open=""
 >
+  <nav>
+    <mwc-icon-button icon="more_vert">
+    </mwc-icon-button>
+    <mwc-menu
+      class="actions-menu"
+      corner="BOTTOM_RIGHT"
+      menucorner="END"
+    >
+      <mwc-list-item
+        aria-disabled="false"
+        graphic="icon"
+        mwc-list-item=""
+        tabindex="-1"
+      >
+        <span>
+          [dataset.fcda.add]
+        </span>
+        <mwc-icon slot="graphic">
+          add
+        </mwc-icon>
+      </mwc-list-item>
+    </mwc-menu>
+  </nav>
   <div id="wizard-content">
     <wizard-textfield
       disabled=""
@@ -55,11 +78,6 @@ snapshots["dataset wizards include a dataset edit wizard looks like the latest s
         CBSW/ XSWI 2.OpSlc.dsd sasd.ads.asd (ST)
       </mwc-check-list-item>
     </filtered-list>
-    <mwc-button
-      icon="add"
-      label="[wizard.title.add]"
-    >
-    </mwc-button>
   </div>
   <mwc-button
     dialogaction="close"

test/unit/wizards/dataset.test.ts

@@ -4,6 +4,8 @@ import { SinonSpy, spy } from 'sinon';
 import '../../mock-wizard.js';
 import { MockWizard } from '../../mock-wizard.js';
 
+import { ListItemBase } from '@material/mwc-list/mwc-list-item-base';
+
 import { editDataSetWizard } from '../../../src/wizards/dataset.js';
 import { WizardTextField } from '../../../src/wizard-textfield.js';
 import {
@@ -47,7 +49,11 @@ describe('dataset wizards', () => {
 
     it('allows to add a new FCDA on add FCDA button click', async () => {
       const addButton = <HTMLElement>(
-        element.wizardUI.dialog?.querySelector('mwc-button[icon="add"]')
+        Array.from(
+          element.wizardUI.dialog!.querySelectorAll<ListItemBase>(
+            'mwc-menu > mwc-list-item'
+          )
+        ).find(item => item.innerHTML.includes('dataset.fcda.add'))
       );
       await addButton.click();
       expect(wizardEvent).to.be.calledOnce;