refactor(editor/template/datype): use menu actions (openscd#621)

Author: JakobVogelsang

src/editors/templates/datype-wizards.ts

@@ -18,15 +18,15 @@ import {
   EditorAction,
   getValue,
   identity,
-  newActionEvent,
   newSubWizardEvent,
-  newWizardEvent,
   patterns,
   Replace,
   selector,
   Wizard,
+  WizardAction,
   WizardActor,
   WizardInput,
+  WizardMenuActor,
 } from '../../foundation.js';
 import { createBDAWizard, editBDAWizard } from '../../wizards/bda.js';
 import {
@@ -35,6 +35,18 @@ import {
   unifyCreateActionArray,
 } from './foundation.js';
 
+function remove(element: Element): WizardMenuActor {
+  return (): EditorAction[] => {
+    return [{ old: { parent: element.parentElement!, element } }];
+  };
+}
+
+function openAddBda(parent: Element): WizardMenuActor {
+  return (): WizardAction[] => {
+    return [() => createBDAWizard(parent)];
+  };
+}
+
 function updateDATpyeAction(element: Element): WizardActor {
   return (inputs: WizardInput[]): EditorAction[] => {
     const id = getValue(inputs.find(i => i.label === 'id')!)!;
@@ -88,25 +100,19 @@ export function editDaTypeWizard(
         label: get('save'),
         action: updateDATpyeAction(datype),
       },
+      menuActions: [
+        {
+          label: get('remove'),
+          icon: 'delete',
+          action: remove(datype),
+        },
+        {
+          label: get('scl.DA'),
+          icon: 'playlist_add',
+          action: openAddBda(datype),
+        },
+      ],
       content: [
-        html`<mwc-button
-          icon="delete"
-          trailingIcon
-          label="${translate('remove')}"
-          @click=${(e: MouseEvent) => {
-            e.target!.dispatchEvent(newWizardEvent());
-            e.target!.dispatchEvent(
-              newActionEvent({
-                old: {
-                  parent: datype.parentElement!,
-                  element: datype,
-                  reference: datype.nextSibling,
-                },
-              })
-            );
-          }}
-          fullwidth
-        ></mwc-button> `,
         html`<wizard-textfield
           label="id"
           helper="${translate('scl.id')}"
@@ -124,44 +130,29 @@ export function editDaTypeWizard(
           nullable
           pattern="${patterns.normalizedString}"
         ></wizard-textfield>`,
-        html`<mwc-button
-            slot="graphic"
-            icon="playlist_add"
-            trailingIcon
-            label="${translate('scl.DA')}"
-            @click=${(e: Event) => {
-              if (datype)
-                e.target!.dispatchEvent(
-                  newSubWizardEvent(createBDAWizard(datype))
-                );
-            }}
-          ></mwc-button>
-          <mwc-list
-            style="margin-top: 0px;"
-            @selected=${(e: SingleSelectedEvent) => {
-              const bdaIdentity = (<ListItem>(<List>e.target).selected).value;
-              const bda = doc.querySelector(selector('BDA', bdaIdentity));
+        html`<mwc-list
+          style="margin-top: 0px;"
+          @selected=${(e: SingleSelectedEvent) => {
+            const bdaIdentity = (<ListItem>(<List>e.target).selected).value;
+            const bda = doc.querySelector(selector('BDA', bdaIdentity));
 
-              if (bda)
-                e.target!.dispatchEvent(newSubWizardEvent(editBDAWizard(bda)));
-            }}
-          >
-            ${Array.from(datype.querySelectorAll('BDA')).map(
-              bda =>
-                html`<mwc-list-item
-                  twoline
-                  tabindex="0"
-                  value="${identity(bda)}"
-                  ><span>${bda.getAttribute('name')}</span
-                  ><span slot="secondary"
-                    >${bda.getAttribute('bType') === 'Enum' ||
-                    bda.getAttribute('bType') === 'Struct'
-                      ? '#' + bda.getAttribute('type')
-                      : bda.getAttribute('bType')}</span
-                  ></mwc-list-item
-                >`
-            )}
-          </mwc-list> `,
+            if (bda)
+              e.target!.dispatchEvent(newSubWizardEvent(editBDAWizard(bda)));
+          }}
+        >
+          ${Array.from(datype.querySelectorAll('BDA')).map(
+            bda =>
+              html`<mwc-list-item twoline tabindex="0" value="${identity(bda)}"
+                ><span>${bda.getAttribute('name')}</span
+                ><span slot="secondary"
+                  >${bda.getAttribute('bType') === 'Enum' ||
+                  bda.getAttribute('bType') === 'Struct'
+                    ? '#' + bda.getAttribute('type')
+                    : bda.getAttribute('bType')}</span
+                ></mwc-list-item
+              >`
+          )}
+        </mwc-list> `,
       ],
     },
   ];

test/integration/editors/templates/__snapshots__/datype-wizarding.test.snap.js

@@ -620,14 +620,45 @@ snapshots["DAType wizards defines a dATypeWizard looks like the latest snapshot"
   heading="[datype.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-list-item
+        aria-disabled="false"
+        graphic="icon"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+      >
+        <span>
+          [scl.DA]
+        </span>
+        <mwc-icon slot="graphic">
+          playlist_add
+        </mwc-icon>
+      </mwc-list-item>
+    </mwc-menu>
+  </nav>
+  <div id="wizard-content">
     <wizard-textfield
       dialoginitialfocus=""
       helper="[scl.id]"
@@ -646,13 +677,6 @@ snapshots["DAType wizards defines a dATypeWizard looks like the latest snapshot"
       pattern="([ -~]|[…]|[ -퟿]|[-�])*"
     >
     </wizard-textfield>
-    <mwc-button
-      icon="playlist_add"
-      label="[scl.DA]"
-      slot="graphic"
-      trailingicon=""
-    >
-    </mwc-button>
     <mwc-list style="margin-top: 0px;">
       <mwc-list-item
         aria-disabled="false"

test/integration/editors/templates/datype-wizarding.test.ts

@@ -135,7 +135,7 @@ describe('DAType wizards', () => {
         )
       );
       deleteButton = <HTMLElement>(
-        parent.wizardUI.dialog?.querySelector('mwc-button[icon="delete"]')
+        parent.wizardUI.dialog?.querySelector('mwc-menu > mwc-list-item')
       );
     });
 

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

@@ -132,7 +132,7 @@ describe('BDA wizarding editing integration', () => {
       await parent.requestUpdate();
       await new Promise(resolve => setTimeout(resolve, 100)); // await animation
       (<HTMLElement>(
-        parent.wizardUI.dialog?.querySelector('mwc-button[icon="playlist_add"]')
+        parent.wizardUI.dialog?.querySelectorAll('mwc-menu > mwc-list-item')[1]
       )).click();
       await parent.requestUpdate();
       await new Promise(resolve => setTimeout(resolve, 100)); // await animation