refactor(wizards/gsecontrol): use dynamic sub-wizards (#507)

* test(testfiles/gsecontrol): remove unused information

* refactor(wizards/gsecontrol): use dynamic sub-wizards

* refactor(zeroline-pane): use dynamic sub-wizard for GSEControl select wizard

* refactor(zeroline/ied-editor): use dynamic sub-wizard for GSEControl select wizard

* refactor(wizards/gse,dataset): fix primary action icon, label

* refactor(wizards/dataset): little sugar for the linter, well done linter

src/wizards/dataset.ts

@@ -85,7 +85,7 @@ export function editDataSetWizard(element: Element): Wizard {
       title: get('wizard.title.edit', { tagName: element.tagName }),
       element,
       primary: {
-        label: get('edit'),
+        label: get('save'),
         icon: 'save',
         action: updateDataSetAction(element),
       },

src/wizards/gse.ts

@@ -107,16 +107,16 @@ export function updateGSEAction(element: Element): WizardActor {
 }
 
 export function editGseWizard(element: Element): Wizard {
-  const minTime = element.querySelector('MinTime')?.innerHTML.trim();
-  const maxTime = element.querySelector('MaxTime')?.innerHTML.trim();
+  const minTime = element.querySelector('MinTime')?.innerHTML.trim() ?? null;
+  const maxTime = element.querySelector('MaxTime')?.innerHTML.trim() ?? null;
 
   return [
     {
       title: get('wizard.title.edit', { tagName: element.tagName }),
       element,
       primary: {
         label: get('save'),
-        icon: 'edit',
+        icon: 'save',
         action: updateGSEAction(element),
       },
       content: [

src/wizards/gsecontrol.ts

@@ -18,6 +18,7 @@ import {
   identity,
   isPublic,
   newActionEvent,
+  newSubWizardEvent,
   newWizardEvent,
   selector,
   Wizard,
@@ -238,14 +239,11 @@ export function editGseControlWizard(element: Element): Wizard {
                 tagName: get('scl.DataSet'),
               })}
               icon="edit"
-              @click=${(e: MouseEvent) => {
-                if (dataSet) {
-                  e.target?.dispatchEvent(newWizardEvent());
-                  e.target?.dispatchEvent(
-                    newWizardEvent(editDataSetWizard(dataSet))
-                  );
-                }
-              }}
+              @click="${(e: MouseEvent) => {
+                e.target?.dispatchEvent(
+                  newSubWizardEvent(() => editDataSetWizard(dataSet))
+                );
+              }}}"
             ></mwc-button>`
           : html``,
         gSE
@@ -254,8 +252,9 @@ export function editGseControlWizard(element: Element): Wizard {
               label=${translate('scl.Communication')}
               icon="edit"
               @click="${(e: MouseEvent) => {
-                e.target?.dispatchEvent(newWizardEvent());
-                e.target?.dispatchEvent(newWizardEvent(editGseWizard(gSE)));
+                e.target?.dispatchEvent(
+                  newSubWizardEvent(() => editGseWizard(gSE))
+                );
               }}}"
             ></mwc-button>`
           : html``,
@@ -282,9 +281,8 @@ export function selectGseControlWizard(element: Element): Wizard {
             );
             if (gseControl) {
               e.target!.dispatchEvent(
-                newWizardEvent(editGseControlWizard(gseControl))
+                newSubWizardEvent(() => editGseControlWizard(gseControl))
               );
-              e.target!.dispatchEvent(newWizardEvent());
             }
           }}
           >${gseControls.map(

src/zeroline-pane.ts

@@ -73,8 +73,9 @@ export class ZerolinePane extends LitElement {
   }
 
   openGseControlSelection(): void {
-    const wizard = selectGseControlWizard(this.doc.documentElement);
-    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+    this.dispatchEvent(
+      newSubWizardEvent(() => selectGseControlWizard(this.doc.documentElement))
+    );
   }
 
   openSampledValueControlSelection(): void {

src/zeroline/ied-editor.ts

@@ -46,8 +46,9 @@ export class IedEditor extends LitElement {
   }
 
   private openGseControlSelection(): void {
-    const wizard = selectGseControlWizard(this.element);
-    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+    this.dispatchEvent(
+      newSubWizardEvent(() => selectGseControlWizard(this.element))
+    );
   }
 
   private openSmvControlSelection(): void {

test/integration/wizards/gsecontrolwizarding-editing.test.ts

@@ -13,7 +13,7 @@ import {
 import { FilteredList } from '../../../src/filtered-list.js';
 import { WizardTextField } from '../../../src/wizard-textfield.js';
 
-describe('gsecontrol wizarding editing integration', () => {
+describe('Wizards for SCL element GSEControl', () => {
   let doc: XMLDocument;
   let element: MockWizardEditor;
 
@@ -24,7 +24,7 @@ describe('gsecontrol wizarding editing integration', () => {
       .then(str => new DOMParser().parseFromString(str, 'application/xml'));
   });
 
-  describe('selectGseControlWizard', () => {
+  describe('define a select wizards that', () => {
     let gseControlList: FilteredList;
 
     beforeEach(async () => {
@@ -36,38 +36,70 @@ describe('gsecontrol wizarding editing integration', () => {
       );
       await gseControlList.updateComplete;
     });
-    it('shows all GSEControl within an IED or SCL', () => {
+
+    it('shows all GSEControl within an IED or SCL', () =>
       expect(gseControlList.items.length).to.equal(
         doc.querySelectorAll('GSEControl').length
+      ));
+
+    it('allows to filter GSEControl elements per IED', async () => {
+      const wizard = selectGseControlWizard(doc.querySelector('IED')!);
+      element.workflow.pop();
+      element.workflow.push(() => wizard);
+      await element.requestUpdate();
+
+      gseControlList = <FilteredList>(
+        element.wizardUI.dialog?.querySelector('filtered-list')
+      );
+      await gseControlList.updateComplete;
+
+      expect(gseControlList.items.length).to.equal(
+        doc.querySelector('IED')!.querySelectorAll('GSEControl').length
       );
     });
-    it('opens editGseControlWizard on filtered-list item click', async () => {
+
+    it('opens edit wizard for selected GSEControl on filtered-list item click', async () => {
       const gse2 = <ListItemBase>gseControlList.items[1];
       await gse2.updateComplete;
       gse2.click();
       await new Promise(resolve => setTimeout(resolve, 100)); // await animation
       await element.wizardUI.dialog?.updateComplete;
+
       const nameField = <WizardTextField>(
         element.wizardUI.dialog?.querySelector('wizard-textfield[label="name"]')
       );
       await nameField.updateComplete;
+
       expect(nameField.value).to.equal(
         doc.querySelectorAll('GSEControl')[1].getAttribute('name')
       );
     });
   });
 
-  describe('editGseControlWizard', () => {
+  describe('define an edit wizard that', () => {
     let nameField: WizardTextField;
     let primaryAction: HTMLElement;
+    let secondaryAction: HTMLElement;
     let gseControl: Element;
+    let parentIED: Element;
 
     describe('loading a GSEControl with connected DataSet and GSE element', () => {
       beforeEach(async () => {
-        gseControl = doc.querySelector('GSEControl[name="GCB"]')!;
-        const wizard = editGseControlWizard(gseControl);
-        element.workflow.push(() => wizard);
+        element.workflow.length = 0; // remove all wizard from FIFO queue
+
+        parentIED = doc.querySelector('IED')!;
+        element.workflow.push(() => selectGseControlWizard(parentIED));
         await element.requestUpdate();
+        await new Promise(resolve => setTimeout(resolve, 20)); // await animation
+
+        const gsecontrol = <ListItemBase>(
+          (<FilteredList>(
+            element.wizardUI.dialog?.querySelector('filtered-list')
+          )).items[0]
+        );
+        gsecontrol.click();
+        await new Promise(resolve => setTimeout(resolve, 20)); // await animation
+
         nameField = element.wizardUI.dialog!.querySelector(
           'wizard-textfield[label="name"]'
         )!;
@@ -76,35 +108,80 @@ describe('gsecontrol wizarding editing integration', () => {
             'mwc-button[slot="primaryAction"]'
           )
         );
+        secondaryAction = <HTMLElement>(
+          element.wizardUI.dialog?.querySelector(
+            'mwc-button[slot="secondaryAction"]'
+          )
+        );
         await nameField.updateComplete;
       });
 
       it('rejects name attribute starting with decimals', async () => {
+        expect(doc.querySelector('GSEControl[name="4adsasd"]')).to.not.exist;
+
         nameField.value = '4adsasd';
+        await element.requestUpdate();
         primaryAction.click();
-        expect(gseControl.getAttribute('name')).to.not.equal('4adsasd');
+
+        expect(doc.querySelector('GSEControl[name="4adsasd"]')).to.not.exist;
       });
 
       it('edits name attribute on primary action', async () => {
+        expect(doc.querySelector('GSEControl[name="myNewName"]')!).to.not.exist;
+
+        nameField.value = 'myNewName';
+        await element.requestUpdate();
+        primaryAction.click();
+
+        expect(doc.querySelector('GSEControl[name="myNewName"]')!).to.exist;
+      });
+
+      it('dynamically updates wizards after attribute change', async () => {
         nameField.value = 'myNewName';
         primaryAction.click();
-        expect(gseControl.getAttribute('name')).to.not.equal('myNewName');
+
+        await new Promise(resolve => setTimeout(resolve, 100)); // await animation
+
+        const gsecontrol = <ListItemBase>(
+          (<FilteredList>(
+            element.wizardUI.dialog?.querySelector('filtered-list')
+          )).items[0]
+        );
+
+        expect(gsecontrol.innerHTML).to.contain('myNewName');
+      });
+
+      it('returns back to its starting wizard on secondary action', async () => {
+        secondaryAction.click();
+
+        await new Promise(resolve => setTimeout(resolve, 100)); // await animation
+
+        const report = <ListItemBase>(
+          (<FilteredList>(
+            element.wizardUI.dialog?.querySelector('filtered-list')
+          )).items[0]
+        );
+
+        expect(report.innerHTML).to.contain('GCB');
       });
 
-      it('opens editDataSetWizard on edit dataset button click', async () => {
+      it('opens edit wizard for DataSet element on edit dataset button click', async () => {
         const editDataSetButton = <Button>(
           element.wizardUI.dialog!.querySelector(
             'mwc-button[id="editdataset"]'
           )!
         );
+
         await editDataSetButton.updateComplete;
         editDataSetButton.click();
         await new Promise(resolve => setTimeout(resolve, 100)); // await animation
+
         const nameField = <WizardTextField>(
           element.wizardUI.dialog?.querySelector(
             'wizard-textfield[label="name"]'
           )
         );
+
         await nameField.updateComplete;
         expect(nameField.value).to.equal(
           doc.querySelectorAll('DataSet')[1].getAttribute('name')
@@ -132,6 +209,7 @@ describe('gsecontrol wizarding editing integration', () => {
             ?.textContent?.trim()
         );
       });
+
       it('removes the GSEControl and its referenced elements on remove button click', async () => {
         expect(doc.querySelector('IED[name="IED1"] GSEControl[name="GCB"]')).to
           .exist;