refactor(wizards/gsecontrol): remove button from wizard content (openscd#624)

JakobVogelsang · web-flow · commit 32d762943ae2 · 2022-03-21T10:34:28.000+01:00
diff --git a/src/wizards/gsecontrol.ts b/src/wizards/gsecontrol.ts
@@ -19,13 +19,14 @@ import {
   getValue,
   identity,
   isPublic,
-  newActionEvent,
+  MenuAction,
   newSubWizardEvent,
-  newWizardEvent,
   selector,
   Wizard,
+  WizardAction,
   WizardActor,
   WizardInput,
+  WizardMenuActor,
 } from '../foundation.js';
 import { maxLength, patterns } from './foundation/limits.js';
 import { editDataSetWizard } from './dataset.js';
@@ -107,7 +108,7 @@ export function renderGseAttributes(
   ];
 }
 
-export function removeGseControl(element: Element): ComplexAction | null {
+export function removeGseControlAction(element: Element): ComplexAction | null {
   if (!element.parentElement) return null;
 
   const dataSet = element.parentElement.querySelector(
@@ -166,6 +167,26 @@ export function removeGseControl(element: Element): ComplexAction | null {
   };
 }
 
+export function removeGseControl(element: Element): WizardMenuActor {
+  return (): WizardAction[] => {
+    const complexAction = removeGseControlAction(element);
+    if (complexAction) return [complexAction];
+    return [];
+  };
+}
+
+function openDataSetWizard(element: Element): WizardMenuActor {
+  return (): WizardAction[] => {
+    return [() => editDataSetWizard(element)];
+  };
+}
+
+function openGseWizard(element: Element): WizardMenuActor {
+  return (): WizardAction[] => {
+    return [() => editGseWizard(element)];
+  };
+}
+
 export function updateGseControlAction(element: Element): WizardActor {
   return (inputs: WizardInput[]): EditorAction[] => {
     const name = inputs.find(i => i.label === 'name')!.value!;
@@ -214,6 +235,27 @@ export function editGseControlWizard(element: Element): Wizard {
     `DataSet[name="${element.getAttribute('datSet')}"]`
   );
 
+  const menuActions: MenuAction[] = [];
+  menuActions.push({
+    icon: 'delete',
+    label: get('remove'),
+    action: removeGseControl(element),
+  });
+
+  if (dataSet)
+    menuActions.push({
+      icon: 'edit',
+      label: get('scl.DataSet'),
+      action: openDataSetWizard(dataSet),
+    });
+
+  if (gSE)
+    menuActions.push({
+      icon: 'edit',
+      label: get('scl.Communication'),
+      action: openGseWizard(gSE),
+    });
+
   return [
     {
       title: get('wizard.title.edit', { tagName: element.tagName }),
@@ -223,18 +265,8 @@ export function editGseControlWizard(element: Element): Wizard {
         label: get('save'),
         action: updateGseControlAction(element),
       },
+      menuActions,
       content: [
-        html`<mwc-button
-          label="${translate('remove')}"
-          icon="delete"
-          @click=${(e: MouseEvent) => {
-            const complexAction = removeGseControl(element);
-            if (complexAction)
-              e.target?.dispatchEvent(newActionEvent(complexAction));
-
-            e.target?.dispatchEvent(newWizardEvent());
-          }}
-        ></mwc-button>`,
         ...renderGseAttributes(
           name,
           desc,
@@ -243,32 +275,6 @@ export function editGseControlWizard(element: Element): Wizard {
           fixedOffs,
           securityEnabled
         ),
-        dataSet
-          ? html`<mwc-button
-              id="editdataset"
-              label=${translate('wizard.title.edit', {
-                tagName: get('scl.DataSet'),
-              })}
-              icon="edit"
-              @click="${(e: MouseEvent) => {
-                e.target?.dispatchEvent(
-                  newSubWizardEvent(() => editDataSetWizard(dataSet))
-                );
-              }}}"
-            ></mwc-button>`
-          : html``,
-        gSE
-          ? html`<mwc-button
-              id="editgse"
-              label=${translate('scl.Communication')}
-              icon="edit"
-              @click="${(e: MouseEvent) => {
-                e.target?.dispatchEvent(
-                  newSubWizardEvent(() => editGseWizard(gSE))
-                );
-              }}}"
-            ></mwc-button>`
-          : html``,
       ],
     },
   ];
diff --git a/test/integration/wizards/gsecontrolwizarding-editing.test.ts b/test/integration/wizards/gsecontrolwizarding-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 {
@@ -166,13 +165,15 @@ describe('Wizards for SCL element GSEControl', () => {
       });
 
       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
 
@@ -189,12 +190,15 @@ describe('Wizards for SCL element GSEControl', () => {
       });
 
       it('opens a editGseWizard on edit GSE button click', async () => {
-        const editGseButton = <Button>(
-          element.wizardUI.dialog!.querySelector('mwc-button[id="editgse"]')!
+        const editGseButton = <HTMLElement>(
+          Array.from(
+            element.wizardUI.dialog!.querySelectorAll<ListItemBase>(
+              'mwc-menu > mwc-list-item'
+            )
+          ).find(item => item.innerHTML.includes(`[scl.Communication]`))
         );
-        expect(editGseButton).to.exist;
 
-        await editGseButton.updateComplete;
+        await element.wizardUI.dialog?.requestUpdate();
         editGseButton.click();
         await new Promise(resolve => setTimeout(resolve, 100)); // await animation
         const macField = <WizardTextField>(
@@ -217,11 +221,17 @@ describe('Wizards for SCL element GSEControl', () => {
           doc.querySelector('IED[name="IED1"] DataSet[name="GooseDataSet1"]')
         ).to.exist;
         expect(doc.querySelector('GSE[cbName="GCB"]')).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(doc.querySelector('IED[name="IED1"] GSEControl[name="GCB"]')).to
           .not.exist;
         expect(
@@ -240,11 +250,14 @@ describe('Wizards for SCL element GSEControl', () => {
       });
 
       it('does not show edit DataSet button', async () => {
-        const editGseButton = <Button>(
-          element.wizardUI.dialog!.querySelector(
-            'mwc-button[id="editdataset"]'
-          )!
+        const editGseButton = <HTMLElement>(
+          Array.from(
+            element.wizardUI.dialog!.querySelectorAll<ListItemBase>(
+              'mwc-menu > mwc-list-item'
+            )
+          ).find(item => item.innerHTML.includes(`[scl.DataSet]`))
         );
+
         expect(editGseButton).to.not.exist;
       });
     });
@@ -260,9 +273,14 @@ describe('Wizards for SCL element GSEControl', () => {
       });
 
       it('does not show edit DataSet button', async () => {
-        const editGseButton = <Button>(
-          element.wizardUI.dialog!.querySelector('mwc-button[id="editgse"]')!
+        const editGseButton = <HTMLElement>(
+          Array.from(
+            element.wizardUI.dialog!.querySelectorAll<ListItemBase>(
+              'mwc-menu > mwc-list-item'
+            )
+          ).find(item => item.innerHTML.includes(`[scl.Communication]`))
         );
+
         expect(editGseButton).to.not.exist;
       });
     });
diff --git a/test/integration/wizards/reportcontrol-wizarding-editing.test.ts b/test/integration/wizards/reportcontrol-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';
diff --git a/test/unit/wizards/__snapshots__/gsecontrol.test.snap.js b/test/unit/wizards/__snapshots__/gsecontrol.test.snap.js
@@ -174,12 +174,56 @@ snapshots["gsecontrol wizards editGseControlWizard looks like the latest snapsho
   heading="[wizard.title.edit]"
   open=""
 >
-  <div id="wizard-content">
-    <mwc-button
-      icon="delete"
-      label="[remove]"
+  <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=""
+        tabindex="-1"
+      >
+        <span>
+          [remove]
+        </span>
+        <mwc-icon slot="graphic">
+          delete
+        </mwc-icon>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        graphic="icon"
+        mwc-list-item=""
+        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=""
+        tabindex="-1"
+      >
+        <span>
+          [scl.Communication]
+        </span>
+        <mwc-icon slot="graphic">
+          edit
+        </mwc-icon>
+      </mwc-list-item>
+    </mwc-menu>
+  </nav>
+  <div id="wizard-content">
     <wizard-textfield
       dialoginitialfocus=""
       helper="[scl.name]"
@@ -265,18 +309,6 @@ snapshots["gsecontrol wizards editGseControlWizard looks like the latest snapsho
         SignatureAndEncryption
       </mwc-list-item>
     </wizard-select>
-    <mwc-button
-      icon="edit"
-      id="editdataset"
-      label="[wizard.title.edit]"
-    >
-    </mwc-button>
-    <mwc-button
-      icon="edit"
-      id="editgse"
-      label="[scl.Communication]"
-    >
-    </mwc-button>
   </div>
   <mwc-button
     dialogaction="close"
diff --git a/test/unit/wizards/gsecontrol.test.ts b/test/unit/wizards/gsecontrol.test.ts
@@ -15,7 +15,7 @@ import {
 } from '../../../src/foundation.js';
 import {
   editGseControlWizard,
-  removeGseControl,
+  removeGseControlAction,
   renderGseAttributes,
   selectGseControlWizard,
   updateGseControlAction,
@@ -149,7 +149,7 @@ describe('gsecontrol wizards', () => {
 
     it('removes GSEControl and its refereced DataSet if no other GSEControl are aasinged', () => {
       const gseControl = ln01gse.querySelector('GSEControl')!;
-      const actions = <Delete[]>removeGseControl(gseControl)!.actions;
+      const actions = <Delete[]>removeGseControlAction(gseControl)!.actions;
       expect(actions.length).to.equal(2);
       expect(actions[0]).to.satisfy(isDelete);
       expect(actions[0].old.element).to.equal(gseControl);
@@ -159,36 +159,36 @@ describe('gsecontrol wizards', () => {
 
     it('removes GSEControl only if other GSEControl is assinged to the same DataSet', () => {
       const gseControl = ln02gse.querySelector('GSEControl')!;
-      const actions = <Delete[]>removeGseControl(gseControl)!.actions;
+      const actions = <Delete[]>removeGseControlAction(gseControl)!.actions;
       expect(actions.length).to.equal(1);
       expect(actions[0]).to.satisfy(isDelete);
       expect(actions[0].old.element).to.equal(gseControl);
     });
 
     it('removes GSEControl only if other ReportControlBlock is assinged to the same DataSet', () => {
       const gseControl = ln02rp.querySelector('GSEControl')!;
-      const actions = <Delete[]>removeGseControl(gseControl)!.actions;
+      const actions = <Delete[]>removeGseControlAction(gseControl)!.actions;
       expect(actions.length).to.equal(1);
       expect(actions[0]).to.satisfy(isDelete);
       expect(actions[0].old.element).to.equal(gseControl);
     });
 
     it('removes GSEControl only if other SMV is assinged to the same DataSet', () => {
       const gseControl = ln02smv.querySelector('GSEControl')!;
-      const actions = <Delete[]>removeGseControl(gseControl)!.actions;
+      const actions = <Delete[]>removeGseControlAction(gseControl)!.actions;
       expect(actions.length).to.equal(1);
       expect(actions[0]).to.satisfy(isDelete);
       expect(actions[0].old.element).to.equal(gseControl);
     });
 
     it('does not remove with missing parent element', () => {
-      const action = removeGseControl(missingparent);
+      const action = removeGseControlAction(missingparent);
       expect(action).to.be.null;
     });
 
     it('removes GSE element if present in the Communication section', () => {
       const gseControl = doc.querySelector('IED[name="IED1"] GSEControl')!;
-      const actions = <Delete[]>removeGseControl(gseControl)!.actions;
+      const actions = <Delete[]>removeGseControlAction(gseControl)!.actions;
       expect(actions.length).to.equal(3);
       expect(actions[0]).to.satisfy(isDelete);
       expect(actions[0].old.element).to.equal(gseControl);
