refactor(wizards/sampledvaluecontrol): remove mwc-button from wizards content (openscd#625)

Author: JakobVogelsang

src/wizards/sampledvaluecontrol.ts

@@ -18,18 +18,20 @@ import {
   getValue,
   identity,
   isPublic,
-  newActionEvent,
+  MenuAction,
   newSubWizardEvent,
-  newWizardEvent,
   selector,
   Wizard,
+  WizardAction,
   WizardActor,
   WizardInput,
+  WizardMenuActor,
 } from '../foundation.js';
 import { securityEnableEnum, smpModEnum } from './foundation/enums.js';
 import { maxLength, patterns } from './foundation/limits.js';
 import { editSMvWizard } from './smv.js';
 import { editSmvOptsWizard } from './smvopts.js';
+import { editDataSetWizard } from './dataset.js';
 
 function getSMV(element: Element): Element | null {
   const cbName = element.getAttribute('name');
@@ -192,6 +194,32 @@ function contentSampledValueControlWizard(
   ];
 }
 
+function removeSampledValueControl(element: Element): WizardMenuActor {
+  return (): WizardAction[] => {
+    const complexAction = removeSampledValueControlAction(element);
+    if (complexAction) return [complexAction];
+    return [];
+  };
+}
+
+function openDataSetWizard(element: Element): WizardMenuActor {
+  return (): WizardAction[] => {
+    return [() => editDataSetWizard(element)];
+  };
+}
+
+function openSmvOptsWizard(element: Element): WizardMenuActor {
+  return (): WizardAction[] => {
+    return [() => editSmvOptsWizard(element)];
+  };
+}
+
+function openSMvWizard(element: Element): WizardMenuActor {
+  return (): WizardAction[] => {
+    return [() => editSMvWizard(element)];
+  };
+}
+
 function updateSampledValueControlAction(element: Element): WizardActor {
   return (inputs: WizardInput[]): EditorAction[] => {
     const attributes: Record<string, string | null> = {};
@@ -240,6 +268,38 @@ export function editSampledValueControlWizard(element: Element): Wizard {
   const sMV = getSMV(element);
   const smvOpts = element.querySelector('SmvOpts')!;
 
+  const dataSet = element.parentElement?.querySelector(
+    `DataSet[name="${element.getAttribute('datSet')}"]`
+  );
+
+  const menuActions: MenuAction[] = [];
+  menuActions.push({
+    icon: 'delete',
+    label: get('remove'),
+    action: removeSampledValueControl(element),
+  });
+
+  if (dataSet)
+    menuActions.push({
+      icon: 'edit',
+      label: get('scl.DataSet'),
+      action: openDataSetWizard(dataSet),
+    });
+
+  if (smvOpts)
+    menuActions.push({
+      icon: 'edit',
+      label: get('scl.SmvOpts'),
+      action: openSmvOptsWizard(smvOpts),
+    });
+
+  if (sMV)
+    menuActions.push({
+      icon: 'edit',
+      label: get('scl.Communication'),
+      action: openSMvWizard(sMV),
+    });
+
   return [
     {
       title: get('wizard.title.edit', { tagName: element.tagName }),
@@ -249,6 +309,7 @@ export function editSampledValueControlWizard(element: Element): Wizard {
         label: get('save'),
         action: updateSampledValueControlAction(element),
       },
+      menuActions,
       content: [
         ...contentSampledValueControlWizard({
           name,
@@ -260,40 +321,6 @@ export function editSampledValueControlWizard(element: Element): Wizard {
           nofASDU,
           securityEnable,
         }),
-        sMV
-          ? html`<mwc-button
-              id="editsmv"
-              label=${translate('scl.Communication')}
-              icon="edit"
-              @click="${(e: MouseEvent) => {
-                e.target?.dispatchEvent(
-                  newSubWizardEvent(() => editSMvWizard(sMV))
-                );
-              }}}"
-            ></mwc-button>`
-          : html``,
-        html`<mwc-button
-          id="editsmvopts"
-          label=${translate('scl.SmvOpts')}
-          icon="edit"
-          @click="${(e: MouseEvent) => {
-            e.target?.dispatchEvent(
-              newSubWizardEvent(() => editSmvOptsWizard(smvOpts))
-            );
-          }}}"
-        ></mwc-button>`,
-        html`<mwc-button
-          label="${translate('remove')}"
-          icon="delete"
-          @click=${(e: MouseEvent) => {
-            const complexAction = removeSampledValueControlAction(element);
-
-            if (complexAction)
-              e.target?.dispatchEvent(newActionEvent(complexAction));
-
-            e.target?.dispatchEvent(newWizardEvent());
-          }}
-        ></mwc-button>`,
       ],
     },
   ];

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

@@ -3,7 +3,6 @@ import { expect, fixture, html } from '@open-wc/testing';
 import '../../mock-wizard-editor.js';
 import { MockWizardEditor } from '../../mock-wizard-editor.js';
 
-import { Button } from '@material/mwc-button';
 import { ListItemBase } from '@material/mwc-list/mwc-list-item-base';
 
 import { FilteredList } from '../../../src/filtered-list.js';
@@ -177,9 +176,15 @@ describe('Wizards for SCL element SampledValueControl', () => {
       });
 
       it('does not render SMV edit button', async () => {
-        const editSMvButton = <Button>(
-          element.wizardUI.dialog!.querySelector('mwc-button[id="editsmv"]')!
+        const editSMvButton = <HTMLElement>(
+          Array.from(
+            element.wizardUI.dialog!.querySelectorAll<ListItemBase>(
+              'mwc-menu > mwc-list-item'
+            )
+          ).find(item => item.innerHTML.includes(`[scl.Communication]`))
         );
+
+        await element.wizardUI.dialog?.requestUpdate();
         expect(editSMvButton).not.to.exist;
       });
     });
@@ -217,12 +222,17 @@ describe('Wizards for SCL element SampledValueControl', () => {
       });
 
       it('opens a edit wizard for SMV on edit SMV button click', async () => {
-        const editSMvButton = <Button>(
-          element.wizardUI.dialog!.querySelector('mwc-button[id="editsmv"]')!
+        const editSMvButton = <HTMLElement>(
+          Array.from(
+            element.wizardUI.dialog!.querySelectorAll<ListItemBase>(
+              'mwc-menu > mwc-list-item'
+            )
+          ).find(item => item.innerHTML.includes(`[scl.Communication]`))
         );
+
+        await element.wizardUI.dialog?.requestUpdate();
         expect(editSMvButton).to.exist;
 
-        await editSMvButton.updateComplete;
         editSMvButton.click();
         await new Promise(resolve => setTimeout(resolve, 100)); // await animation
 
@@ -241,14 +251,17 @@ describe('Wizards for SCL element SampledValueControl', () => {
       });
 
       it('opens a edit wizard for SMV on edit SMV button click', async () => {
-        const editSmvOptsButton = <Button>(
-          element.wizardUI.dialog!.querySelector(
-            'mwc-button[id="editsmvopts"]'
-          )!
+        const editSmvOptsButton = <HTMLElement>(
+          Array.from(
+            element.wizardUI.dialog!.querySelectorAll<ListItemBase>(
+              'mwc-menu > mwc-list-item'
+            )
+          ).find(item => item.innerHTML.includes(`[scl.SmvOpts]`))
         );
+
+        await element.wizardUI.dialog?.requestUpdate();
         expect(editSmvOptsButton).to.exist;
 
-        await editSmvOptsButton.updateComplete;
         editSmvOptsButton.click();
         await new Promise(resolve => setTimeout(resolve, 100)); // await animation
 
@@ -272,10 +285,15 @@ describe('Wizards for SCL element SampledValueControl', () => {
           .to.exist;
         expect(doc.querySelector('SMV[cbName="MSVCB01"]')).to.exist;
 
-        const deleteButton = <Button>(
-          element.wizardUI.dialog!.querySelector('mwc-button[icon="delete"]')!
+        const deleteButton = <HTMLElement>(
+          Array.from(
+            element.wizardUI.dialog!.querySelectorAll<ListItemBase>(
+              'mwc-menu > mwc-list-item'
+            )
+          ).find(item => item.innerHTML.includes(`[remove]`))
         );
-        await deleteButton.updateComplete;
+
+        await element.wizardUI.dialog?.requestUpdate();
         deleteButton.click();
 
         expect(

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

@@ -7,6 +7,58 @@ snapshots["Wizards for SCL element SampledValueControl define an edit wizard tha
   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=""
+        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.DataSet]
+        </span>
+        <mwc-icon slot="graphic">
+          edit
+        </mwc-icon>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        graphic="icon"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+      >
+        <span>
+          [scl.SmvOpts]
+        </span>
+        <mwc-icon slot="graphic">
+          edit
+        </mwc-icon>
+      </mwc-list-item>
+    </mwc-menu>
+  </nav>
   <div id="wizard-content">
     <wizard-textfield
       dialoginitialfocus=""
@@ -125,17 +177,6 @@ snapshots["Wizards for SCL element SampledValueControl define an edit wizard tha
         SignatureAndEncryption
       </mwc-list-item>
     </wizard-select>
-    <mwc-button
-      icon="edit"
-      id="editsmvopts"
-      label="[scl.SmvOpts]"
-    >
-    </mwc-button>
-    <mwc-button
-      icon="delete"
-      label="[remove]"
-    >
-    </mwc-button>
   </div>
   <mwc-button
     dialogaction="close"