feat(wizards/function): add edit wizard

src/editors/substation/function-editor.ts

@@ -50,6 +50,11 @@ export class FunctionEditor extends LitElement {
   @query('mwc-menu') addMenu!: Menu;
   @query('mwc-icon-button[icon="playlist_add"]') addButton!: IconButton;
 
+  private openEditWizard(): void {
+    const wizard = wizards['Function'].edit(this.element);
+    if (wizard) this.dispatchEvent(newWizardEvent(wizard));
+  }
+
   remove(): void {
     if (this.element.parentElement)
       this.dispatchEvent(
@@ -109,6 +114,11 @@ export class FunctionEditor extends LitElement {
       icon="functions"
       secondary
       highlighted
+      ><abbr slot="action" title="${translate('edit')}">
+        <mwc-icon-button
+          icon="edit"
+          @click=${() => this.openEditWizard()}
+        ></mwc-icon-button> </abbr
       ><abbr slot="action" title="${translate('remove')}">
         <mwc-icon-button
           icon="delete"
@@ -137,6 +147,11 @@ export class FunctionEditor extends LitElement {
   }
 
   static styles = css`
+    abbr {
+      text-decoration: none;
+      border-bottom: none;
+    }
+
     .container.lnode {
       display: grid;
       grid-gap: 12px;

src/wizards/function.ts

@@ -2,8 +2,11 @@ import { html, TemplateResult } from 'lit-element';
 import { get, translate } from 'lit-translate';
 
 import {
+  cloneElement,
   createElement,
+  getChildElementsByTagName,
   getValue,
+  SimpleAction,
   Wizard,
   WizardActor,
   WizardInputElement,
@@ -44,6 +47,61 @@ export function contentFunctionWizard(
   ];
 }
 
+function updateFunctionAction(element: Element): WizardActor {
+  return (inputs: WizardInputElement[]): SimpleAction[] => {
+    const functionAttrs: Record<string, string | null> = {};
+    const functionKeys = ['name', 'desc', 'type'];
+    functionKeys.forEach(key => {
+      functionAttrs[key] = getValue(inputs.find(i => i.label === key)!);
+    });
+
+    if (
+      functionKeys.some(key => functionAttrs[key] !== element.getAttribute(key))
+    ) {
+      const newElement = cloneElement(element, functionAttrs);
+      return [
+        {
+          old: { element },
+          new: { element: newElement },
+        },
+      ];
+    }
+
+    return [];
+  };
+}
+
+export function editFunctionWizard(element: Element): Wizard {
+  const name = element.getAttribute('name');
+  const desc = element.getAttribute('desc');
+  const type = element.getAttribute('type');
+  const reservedNames: string[] = getChildElementsByTagName(
+    element.parentElement!,
+    'Function'
+  )
+    .filter(sibling => sibling !== element)
+    .map(sibling => sibling.getAttribute('name')!);
+
+  return [
+    {
+      title: get('wizard.title.edit', { tagName: 'Function' }),
+      primary: {
+        icon: 'save',
+        label: get('save'),
+        action: updateFunctionAction(element),
+      },
+      content: [
+        ...contentFunctionWizard({
+          name,
+          desc,
+          type,
+          reservedNames,
+        }),
+      ],
+    },
+  ];
+}
+
 function createFunctionAction(parent: Element): WizardActor {
   return (inputs: WizardInputElement[]) => {
     const functionAttrs: Record<string, string | null> = {};

src/wizards/wizard-library.ts

@@ -25,7 +25,7 @@ import { editTrgOpsWizard } from './trgops.js';
 import { createDaWizard } from './da.js';
 import { editDAIWizard } from './dai.js';
 import { editGseControlWizard } from './gsecontrol.js';
-import { createFunctionWizard } from './function.js';
+import { createFunctionWizard, editFunctionWizard } from './function.js';
 import { createEqSubFunctionWizard } from './eqsubfunction.js';
 import { createEqFunctionWizard } from './eqfunction.js';
 import { createSubFunctionWizard } from './subfunction.js';
@@ -211,7 +211,7 @@ export const wizards: Record<
     create: emptyWizard,
   },
   Function: {
-    edit: emptyWizard,
+    edit: editFunctionWizard,
     create: createFunctionWizard,
   },
   GeneralEquipment: {

test/integration/editors/substation/function-editor.test.ts

@@ -88,6 +88,65 @@ describe('function-editor wizarding editing integration', () => {
     });
   });
 
+  describe('open edit wizard', () => {
+    let nameField: WizardTextField;
+    let primaryAction: HTMLElement;
+
+    beforeEach(async () => {
+      element!.element = doc.querySelector(
+        'Bay[name="COUPLING_BAY"] > Function[name="bayName"]'
+      )!;
+
+      (<HTMLElement>(
+        element?.shadowRoot?.querySelector('mwc-icon-button[icon="edit"]')
+      )).click();
+      await parent.updateComplete;
+
+      nameField = <WizardTextField>(
+        parent.wizardUI.dialog?.querySelector('wizard-textfield[label="name"]')
+      );
+
+      primaryAction = <HTMLElement>(
+        parent.wizardUI.dialog?.querySelector(
+          'mwc-button[slot="primaryAction"]'
+        )
+      );
+    });
+
+    it('does not update Function if name attribute is not unique', async () => {
+      expect(
+        doc.querySelectorAll(
+          'Bay[name="COUPLING_BAY"] > Function[name="bay2Func"]'
+        )
+      ).to.lengthOf(1);
+
+      nameField.value = 'bay2Func';
+      primaryAction.click();
+      await parent.updateComplete;
+
+      expect(
+        doc.querySelectorAll(
+          'Bay[name="COUPLING_BAY"] > Function[name="bay2Func"]'
+        )
+      ).to.lengthOf(1);
+    });
+
+    it('does update Function if name attribute is unique', async () => {
+      nameField.value = 'someNewFunction';
+      await parent.updateComplete;
+      primaryAction.click();
+
+      expect(
+        doc.querySelector(
+          'Bay[name="COUPLING_BAY"] > Function[name="someNewFunction"]'
+        )
+      ).to.exist;
+      expect(
+        doc.querySelector('Bay[name="COUPLING_BAY"] > Function[name="bayName"]')
+      ).to.not.exist;
+    });
+  });
+
   describe('has a delete icon button that', () => {
     let deleteButton: HTMLElement;
 

test/testfiles/zeroline/functions.scd

@@ -31,7 +31,7 @@
                 </EqFunction> 
 			</PowerTransformer>
 			<Bay name="COUPLING_BAY" desc="Bay">
-				<Function name="bayName">
+				<Function name="bayName" desc="myDesc" type="myFuncType">
 					<SubFunction name="myBaySubFunc" desc="myDesc" type="myBaySubFuncType">
 						<LNode iedName="None" prefix="DC" lnClass="XSWI" lnInst="1"/>
 						<LNode iedName="None" prefix="DC" lnClass="CSWI" lnInst="1"/>

test/unit/editors/substation/__snapshots__/function-editor.test.snap.js

@@ -9,6 +9,13 @@ snapshots["web component rendering Function element with complete attribute set
   secondary=""
   tabindex="0"
 >
+  <abbr
+    slot="action"
+    title="[edit]"
+  >
+    <mwc-icon-button icon="edit">
+    </mwc-icon-button>
+  </abbr>
   <abbr
     slot="action"
     title="[remove]"
@@ -76,6 +83,13 @@ snapshots["web component rendering Function element with missing desc and type a
   secondary=""
   tabindex="0"
 >
+  <abbr
+    slot="action"
+    title="[edit]"
+  >
+    <mwc-icon-button icon="edit">
+    </mwc-icon-button>
+  </abbr>
   <abbr
     slot="action"
     title="[remove]"
@@ -143,6 +157,13 @@ snapshots["web component rendering Function element with existing LNode children
   secondary=""
   tabindex="0"
 >
+  <abbr
+    slot="action"
+    title="[edit]"
+  >
+    <mwc-icon-button icon="edit">
+    </mwc-icon-button>
+  </abbr>
   <abbr
     slot="action"
     title="[remove]"

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

@@ -50,3 +50,50 @@ snapshots["Wizards for SCL Function element define an create wizard that looks l
 `;
 /* end snapshot Wizards for SCL Function element define an create wizard that looks like the the latest snapshot */
 
+snapshots["Wizards for SCL Function element define an edit wizard that looks like the the latest snapshot"] = 
+`<mwc-dialog
+  defaultaction="close"
+  heading="[wizard.title.edit]"
+  open=""
+  style="--mdc-dialog-min-width:calc(100% + 0px)"
+>
+  <div id="wizard-content">
+    <wizard-textfield
+      dialoginitialfocus=""
+      helper="[scl.name]"
+      label="name"
+      required=""
+      validationmessage="[textfield.required]"
+    >
+    </wizard-textfield>
+    <wizard-textfield
+      helper="[scl.desc]"
+      label="desc"
+      nullable=""
+    >
+    </wizard-textfield>
+    <wizard-textfield
+      helper="[scl.type]"
+      label="type"
+      nullable=""
+    >
+    </wizard-textfield>
+  </div>
+  <mwc-button
+    dialogaction="close"
+    label="[cancel]"
+    slot="secondaryAction"
+    style="--mdc-theme-primary: var(--mdc-theme-error)"
+  >
+  </mwc-button>
+  <mwc-button
+    icon="save"
+    label="[save]"
+    slot="primaryAction"
+    trailingicon=""
+  >
+  </mwc-button>
+</mwc-dialog>
+`;
+/* end snapshot Wizards for SCL Function element define an edit wizard that looks like the the latest snapshot */
+