feat: move gse smv between connectedAPs (openscd#1680)

* feat: add wizard to move gse or smv

* add unit tests

* fix failing tests

* add smv unit tests

* feat: implement GSE/SMV move dialog and related functionality in editors

* add styles for selected ap

* rename helpers.ts. to foundation.ts

* implement review comments

Author: noraeb

packages/openscd/src/translations/de.ts

@@ -93,6 +93,7 @@ export const de: Translations = {
       select: '{{tagName}} auswählen',
       edit: '{{tagName}} bearbeiten',
       add: '{{tagName}} hinzufügen',
+      selectAp: 'ConnectedAP auswählen'
     },
   },
   openSCD: {

packages/openscd/src/translations/en.ts

@@ -91,6 +91,7 @@ export const en = {
       select: 'Select {{tagName}}',
       edit: 'Edit {{tagName}}',
       add: 'Add {{tagName}}',
+      selectAp: 'Select New ConnectedAP'
     },
   },
   openSCD: {

packages/plugins/src/editors/communication/foundation.ts

@@ -0,0 +1,35 @@
+/**
+ * Returns the first element of type ConnectedAP in the provided element's hierarchy.
+ * @param element - The reference element to search from
+ * @returns An element of type ConnectedAP or null
+ */
+export function getCurrentConnectedAP(element: Element): Element | null {
+  return element.closest('ConnectedAP');
+}
+
+/**
+ * Retrieves all ConnectedAP elements within the same IED as the provided element.
+ *
+ * @param element - The reference element to find the current ConnectedAP and its IED.
+ * @param doc - The XML document containing the SubNetwork and ConnectedAP elements.
+ * @returns An array of ConnectedAP elements belonging to the same IED as the provided element.
+ */
+export function getAllConnectedAPsOfSameIED(
+  element: Element,
+  doc: XMLDocument
+): Element[] {
+  if (!element || !doc) {
+    return [];
+  }
+
+  const currentConnectedAP = getCurrentConnectedAP(element);
+  if (!currentConnectedAP) {
+    return [];
+  }
+
+  const iedName = currentConnectedAP.getAttribute('iedName');
+
+  return Array.from(
+    doc.querySelectorAll(`SubNetwork > ConnectedAP[iedName=${iedName}`)
+  );
+}

packages/plugins/src/editors/communication/gse-editor.ts

@@ -5,6 +5,7 @@ import {
   customElement,
   property,
   state,
+  css,
 } from 'lit-element';
 
 import '@material/mwc-icon';
@@ -14,6 +15,7 @@ import { newWizardEvent } from '@openscd/open-scd/src/foundation.js';
 import { newActionEvent } from '@openscd/core/foundation/deprecated/editor.js';
 import { sizableGooseIcon } from '@openscd/open-scd/src/icons/icons.js';
 import { editGseWizard } from '../../wizards/gse.js';
+import { getAllConnectedAPsOfSameIED } from './foundation.js';
 
 @customElement('gse-editor')
 export class GseEditor extends LitElement {
@@ -36,6 +38,16 @@ export class GseEditor extends LitElement {
     this.dispatchEvent(newWizardEvent(editGseWizard(this.element)));
   }
 
+  private openGseMoveDialog(): void {
+    this.dispatchEvent(
+      new CustomEvent('request-gse-move', {
+        detail: { element: this.element },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   remove(): void {
     if (this.element)
       this.dispatchEvent(
@@ -50,6 +62,12 @@ export class GseEditor extends LitElement {
   }
 
   render(): TemplateResult {
+    const allConnectedAPsOfSameIED = getAllConnectedAPsOfSameIED(
+      this.element,
+      this.doc
+    );
+    const hasMoreThanOneConnectedAP = allConnectedAPsOfSameIED.length > 1;
+
     return html`<action-icon label="${this.label}" .icon="${sizableGooseIcon}"
       ><mwc-fab
         slot="action"
@@ -61,8 +79,26 @@ export class GseEditor extends LitElement {
         slot="action"
         mini
         icon="delete"
-        @click="${() => this.remove()}}"
-      ></mwc-fab
-    ></action-icon>`;
+        @click="${() => this.remove()}"
+      ></mwc-fab>
+      <mwc-fab
+        slot="action"
+        mini
+        icon="forward"
+        class="gse-move-button"
+        ?disabled="${!hasMoreThanOneConnectedAP}"
+        @click="${() => this.openGseMoveDialog()}"
+      >
+      </mwc-fab>
+    </action-icon> `;
   }
+
+  static styles = css`
+    :host(:focus-within) .gse-move-button[disabled] {
+      color: var(--mdc-theme-text-disabled-on-light, #9e9e9e);
+      pointer-events: none;
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  `;
 }

packages/plugins/src/editors/communication/smv-editor.ts

@@ -5,6 +5,7 @@ import {
   customElement,
   property,
   state,
+  css,
 } from 'lit-element';
 
 import '@material/mwc-icon';
@@ -14,6 +15,7 @@ import { sizableSmvIcon } from '@openscd/open-scd/src/icons/icons.js';
 import { newWizardEvent } from '@openscd/open-scd/src/foundation.js';
 import { newActionEvent } from '@openscd/core/foundation/deprecated/editor.js';
 import { editSMvWizard } from '../../wizards/smv.js';
+import { getAllConnectedAPsOfSameIED } from './foundation.js';
 
 @customElement('smv-editor')
 export class SmvEditor extends LitElement {
@@ -36,6 +38,16 @@ export class SmvEditor extends LitElement {
     this.dispatchEvent(newWizardEvent(editSMvWizard(this.element)));
   }
 
+  private openSmvMoveDialog(): void {
+    this.dispatchEvent(
+      new CustomEvent('request-smv-move', {
+        detail: { element: this.element },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   remove(): void {
     if (this.element)
       this.dispatchEvent(
@@ -50,6 +62,12 @@ export class SmvEditor extends LitElement {
   }
 
   render(): TemplateResult {
+    const allConnectedAPsOfSameIED = getAllConnectedAPsOfSameIED(
+      this.element,
+      this.doc
+    );
+    const hasMoreThanOneConnectedAP = allConnectedAPsOfSameIED.length > 1;
+
     return html`<action-icon label="${this.label}" .icon="${sizableSmvIcon}"
       ><mwc-fab
         slot="action"
@@ -61,8 +79,26 @@ export class SmvEditor extends LitElement {
         slot="action"
         mini
         icon="delete"
-        @click="${() => this.remove()}}"
-      ></mwc-fab
-    ></action-icon>`;
+        @click="${() => this.remove()}"
+      ></mwc-fab>
+      <mwc-fab
+        slot="action"
+        mini
+        icon="forward"
+        class="smv-move-button"
+        ?disabled=${!hasMoreThanOneConnectedAP}
+        @click="${() => this.openSmvMoveDialog()}"
+      >
+      </mwc-fab>
+    </action-icon>`;
   }
+
+  static styles = css`
+    :host(:focus-within) .smv-move-button[disabled] {
+      color: var(--mdc-theme-text-disabled-on-light, #9e9e9e);
+      pointer-events: none;
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  `;
 }