refactor(wizards/reportcontrol): remove mwc-button from dialog content

Author: JakobVogelsang

src/wizards/reportcontrol.ts

@@ -20,8 +20,6 @@ import {
   identity,
   isPublic,
   newSubWizardEvent,
-  newWizardEvent,
-  newActionEvent,
   selector,
   SimpleAction,
   Wizard,
@@ -30,6 +28,9 @@ import {
   Delete,
   getUniqueElementName,
   ComplexAction,
+  WizardMenuActor,
+  WizardAction,
+  MenuAction,
 } from '../foundation.js';
 import { FinderList } from '../finder-list.js';
 import { dataAttributePicker, iEDPicker } from './foundation/finder.js';
@@ -399,6 +400,32 @@ function getRptEnabledAction(
   };
 }
 
+export function removeReportControl(element: Element): WizardMenuActor {
+  return (): WizardAction[] => {
+    const complexAction = removeReportControlAction(element);
+    if (complexAction) return [complexAction];
+    return [];
+  };
+}
+
+function openDataSetWizard(element: Element): WizardMenuActor {
+  return (): WizardAction[] => {
+    return [() => editDataSetWizard(element)];
+  };
+}
+
+function openTrgOpsWizard(element: Element): WizardMenuActor {
+  return (): WizardAction[] => {
+    return [() => editTrgOpsWizard(element)];
+  };
+}
+
+function openOptFieldsWizard(element: Element): WizardMenuActor {
+  return (): WizardAction[] => {
+    return [() => editOptFieldsWizard(element)];
+  };
+}
+
 function updateReportControlAction(element: Element): WizardActor {
   return (inputs: WizardInput[]): EditorAction[] => {
     const attributes: Record<string, string | null> = {};
@@ -476,6 +503,34 @@ export function editReportControlWizard(element: Element): Wizard {
     `DataSet[name="${element.getAttribute('datSet')}"]`
   );
 
+  const menuActions: MenuAction[] = [];
+  menuActions.push({
+    icon: 'delete',
+    label: get('remove'),
+    action: removeReportControl(element),
+  });
+
+  if (dataSet)
+    menuActions.push({
+      icon: 'edit',
+      label: get('scl.DataSet'),
+      action: openDataSetWizard(dataSet),
+    });
+
+  if (trgOps)
+    menuActions.push({
+      icon: 'edit',
+      label: get('scl.TrgOps'),
+      action: openTrgOpsWizard(trgOps),
+    });
+
+  if (optFields)
+    menuActions.push({
+      icon: 'edit',
+      label: get('scl.OptFields'),
+      action: openOptFieldsWizard(optFields),
+    });
+
   return [
     {
       title: get('wizard.title.edit', { tagName: element.tagName }),
@@ -485,6 +540,7 @@ export function editReportControlWizard(element: Element): Wizard {
         label: get('save'),
         action: updateReportControlAction(element),
       },
+      menuActions,
       content: [
         ...contentReportControlWizard({
           name,
@@ -496,53 +552,6 @@ export function editReportControlWizard(element: Element): Wizard {
           bufTime,
           intgPd,
         }),
-        dataSet
-          ? html`<mwc-button
-              label=${translate('scl.DataSet')}
-              icon="edit"
-              id="editdataset"
-              @click=${(e: MouseEvent) => {
-                e.target?.dispatchEvent(
-                  newSubWizardEvent(() => editDataSetWizard(dataSet))
-                );
-              }}
-            ></mwc-button>`
-          : html``,
-        trgOps
-          ? html`<mwc-button
-              label=${translate('scl.TrgOps')}
-              icon="edit"
-              id="edittrgops"
-              @click=${(e: MouseEvent) => {
-                e.target?.dispatchEvent(
-                  newSubWizardEvent(() => editTrgOpsWizard(trgOps))
-                );
-              }}
-            ></mwc-button>`
-          : html``,
-        optFields
-          ? html`<mwc-button
-              label=${translate('scl.OptFields')}
-              icon="edit"
-              id="editoptfields"
-              @click=${(e: MouseEvent) => {
-                e.target?.dispatchEvent(
-                  newSubWizardEvent(() => editOptFieldsWizard(optFields))
-                );
-              }}
-            ></mwc-button>`
-          : html``,
-        html`<mwc-button
-          label="${translate('remove')}"
-          icon="delete"
-          @click=${(e: MouseEvent) => {
-            const complexAction = removeReportControlAction(element);
-            if (complexAction)
-              e.target?.dispatchEvent(newActionEvent(complexAction));
-
-            e.target?.dispatchEvent(newWizardEvent());
-          }}
-        ></mwc-button>`,
       ],
     },
   ];

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

@@ -235,11 +235,15 @@ describe('Wizards for SCL element ReportControl', () => {
     });
 
     it('opens edit wizard for DataSet element on edit dataset button click', async () => {
-      const editDataSetButton = <Button>(
-        element.wizardUI.dialog!.querySelector('mwc-button[id="editdataset"]')!
+      const editDataSetButton = <HTMLElement>(
+        Array.from(
+          element.wizardUI.dialog!.querySelectorAll<ListItemBase>(
+            'mwc-menu > mwc-list-item'
+          )
+        ).find(item => item.innerHTML.includes(`[scl.DataSet]`))
       );
 
-      await editDataSetButton.updateComplete;
+      await element.wizardUI.dialog?.requestUpdate();
       editDataSetButton.click();
       await new Promise(resolve => setTimeout(resolve, 100)); // await animation
 
@@ -254,11 +258,15 @@ describe('Wizards for SCL element ReportControl', () => {
     });
 
     it('opens edit wizard for TrgOps element on edit trigger options button click', async () => {
-      const editTrgOpsButton = <Button>(
-        element.wizardUI.dialog!.querySelector('mwc-button[id="edittrgops"]')!
+      const editTrgOpsButton = <HTMLElement>(
+        Array.from(
+          element.wizardUI.dialog!.querySelectorAll<ListItemBase>(
+            'mwc-menu > mwc-list-item'
+          )
+        ).find(item => item.innerHTML.includes(`[scl.TrgOps]`))
       );
 
-      await editTrgOpsButton.updateComplete;
+      await element.wizardUI.dialog?.requestUpdate();
       editTrgOpsButton.click();
       await new Promise(resolve => setTimeout(resolve, 100)); // await animation
 
@@ -271,13 +279,15 @@ describe('Wizards for SCL element ReportControl', () => {
     });
 
     it('opens edit wizard for OptFields element on edit optional fields button click', async () => {
-      const editOptFieldsButton = <Button>(
-        element.wizardUI.dialog!.querySelector(
-          'mwc-button[id="editoptfields"]'
-        )!
+      const editOptFieldsButton = <HTMLElement>(
+        Array.from(
+          element.wizardUI.dialog!.querySelectorAll<ListItemBase>(
+            'mwc-menu > mwc-list-item'
+          )
+        ).find(item => item.innerHTML.includes(`[scl.OptFields]`))
       );
 
-      await editOptFieldsButton.updateComplete;
+      await element.wizardUI.dialog?.requestUpdate();
       editOptFieldsButton.click();
       await new Promise(resolve => setTimeout(resolve, 100)); // await animation
 
@@ -302,11 +312,17 @@ describe('Wizards for SCL element ReportControl', () => {
           'IED[name="IED2"] LN[lnClass="XSWI"][inst="1"] DataSet[name="dataSet"]'
         )
       ).to.exist;
-      const deleteButton = <Button>(
-        element.wizardUI.dialog!.querySelector('mwc-button[icon="delete"]')!
+
+      const deleteElement = <HTMLElement>(
+        Array.from(
+          element.wizardUI.dialog!.querySelectorAll<ListItemBase>(
+            'mwc-menu > mwc-list-item'
+          )
+        ).find(item => item.innerHTML.includes(`[remove]`))
       );
-      await deleteButton.updateComplete;
-      deleteButton.click();
+      await element.wizardUI.dialog?.requestUpdate();
+      deleteElement.click();
+
       expect(
         doc.querySelector(
           'IED[name="IED2"] LN[lnClass="XSWI"][inst="1"] ReportControl[name="ReportCb2"]'

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

@@ -7,6 +7,72 @@ snapshots["Wizards for SCL ReportControl element define an edit wizard that for
   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.TrgOps]
+        </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.OptFields]
+        </span>
+        <mwc-icon slot="graphic">
+          edit
+        </mwc-icon>
+      </mwc-list-item>
+    </mwc-menu>
+  </nav>
   <div id="wizard-content">
     <wizard-textfield
       dialoginitialfocus=""
@@ -72,29 +138,6 @@ snapshots["Wizards for SCL ReportControl element define an edit wizard that for
       type="number"
     >
     </wizard-textfield>
-    <mwc-button
-      icon="edit"
-      id="editdataset"
-      label="[scl.DataSet]"
-    >
-    </mwc-button>
-    <mwc-button
-      icon="edit"
-      id="edittrgops"
-      label="[scl.TrgOps]"
-    >
-    </mwc-button>
-    <mwc-button
-      icon="edit"
-      id="editoptfields"
-      label="[scl.OptFields]"
-    >
-    </mwc-button>
-    <mwc-button
-      icon="delete"
-      label="[remove]"
-    >
-    </mwc-button>
   </div>
   <mwc-button
     dialogaction="close"
@@ -121,6 +164,29 @@ snapshots["Wizards for SCL ReportControl element define an edit wizard that for
   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>
+          [remove]
+        </span>
+        <mwc-icon slot="graphic">
+          delete
+        </mwc-icon>
+      </mwc-list-item>
+    </mwc-menu>
+  </nav>
   <div id="wizard-content">
     <wizard-textfield
       dialoginitialfocus=""
@@ -189,11 +255,6 @@ snapshots["Wizards for SCL ReportControl element define an edit wizard that for
       type="number"
     >
     </wizard-textfield>
-    <mwc-button
-      icon="delete"
-      label="[remove]"
-    >
-    </mwc-button>
   </div>
   <mwc-button
     dialogaction="close"