feat(editors/subscriber-later-binding): Add plugin with filterable FCDA list (openscd#945)

* refactor(smv-laterbinding-list): created a reusable clone called later-binding-list

* feat: GooseSubscriberLaterBindingPlugin with filterable FCDA list

* refactor: implemented suggested changes from @dlabordus and @JakobVogelsang and refactored translations obj structure

* test: refactored svc test file and implemented missing GooseLaterBinding tests

* chore: renaming controlBlockElement to controlElement and missing snapshot test file

Author: juancho0202

public/js/plugins.js

@@ -27,6 +27,13 @@ export const officialPlugins = [
     default: true,
     kind: 'editor',
   },
+  {
+    name: 'Subscriber Later Binding (GOOSE)',
+    src: '/src/editors/GooseSubscriberLaterBinding.js',
+    icon: 'link',
+    default: false,
+    kind: 'editor',
+  },
   {
     name: 'Subscriber (SMV)',
     src: '/src/editors/SampledValuesSubscription.js',

src/editors/GooseSubscriberLaterBinding.ts

@@ -0,0 +1,27 @@
+import { LitElement, property, html, TemplateResult, css } from 'lit-element';
+
+import './subscription/later-binding/fcda-later-binding-list.js';
+
+export default class GooseSubscribeLaterBindingPlugin extends LitElement {
+  @property({ attribute: false })
+  doc!: XMLDocument;
+
+  render(): TemplateResult {
+    return html`<div>
+      <div class="container">
+        <fcda-later-binding-list .doc=${this.doc} controlTag="GSEControl">
+        </fcda-later-binding-list>
+      </div>
+    </div>`;
+  }
+
+  static styles = css`
+    :host {
+      width: 100vw;
+    }
+
+    .container {
+      padding: 8px 6px 16px;
+    }
+  `;
+}

src/editors/SMVSubscriberLaterBinding.ts

@@ -1,6 +1,6 @@
 import { css, html, LitElement, property, TemplateResult } from 'lit-element';
 
-import './subscription/smv-laterbinding/svc-laterbinding-list.js';
+import './subscription/later-binding/fcda-later-binding-list.js';
 import './subscription/smv-laterbinding/ext-ref-laterbinding-list.js';
 
 /** An editor [[`plugin`]] for Subscribe Later Binding (SMV). */
@@ -11,8 +11,12 @@ export default class SMVSubscribeLaterBindingPlugin extends LitElement {
   render(): TemplateResult {
     return html`<div>
       <div class="container">
-        <svc-later-binding-list class="column" .doc=${this.doc}>
-        </svc-later-binding-list>
+        <fcda-later-binding-list
+          class="column"
+          .doc=${this.doc}
+          controlTag="SampledValueControl"
+        >
+        </fcda-later-binding-list>
         <extref-later-binding-list class="column" .doc=${this.doc}>
         </extref-later-binding-list>
       </div>

src/editors/subscription/smv-laterbinding/svc-laterbinding-list.ts renamed to src/editors/subscription/later-binding/fcda-later-binding-list.ts

@@ -27,21 +27,26 @@ import { wizards } from '../../../wizards/wizard-library.js';
 
 import { styles } from '../foundation.js';
 
-import { getFcdaTitleValue, newFcdaSelectEvent } from './foundation.js';
+import {
+  getFcdaTitleValue,
+  newFcdaSelectEvent,
+} from '../smv-laterbinding/foundation.js';
 
 /**
- * A sub element for showing all Sampled Value Controls.
- * A Sample Value Control can be edited using the standard wizard.
+ * A sub element for showing all Goose/Sampled Value Controls.
+ * A control can be edited using the standard wizard.
  * And when selecting a FCDA Element a custom event is fired, so other list can be updated.
  */
-@customElement('svc-later-binding-list')
-export class SVCLaterBindingList extends LitElement {
+@customElement('fcda-later-binding-list')
+export class FCDALaterBindingList extends LitElement {
   @property({ attribute: false })
   doc!: XMLDocument;
+  @property()
+  controlTag!: 'SampledValueControl' | 'GSEControl';
 
   // The selected Elements when a FCDA Line is clicked.
   @state()
-  selectedSvcElement: Element | undefined;
+  selectedControlElement: Element | undefined;
   @state()
   selectedFcdaElement: Element | undefined;
 
@@ -52,41 +57,43 @@ export class SVCLaterBindingList extends LitElement {
     parent.addEventListener('open-doc', this.resetSelection);
   }
 
-  private getSvcElements(): Element[] {
+  private getControlElements(): Element[] {
     if (this.doc) {
       return Array.from(
-        this.doc.querySelectorAll('LN0 > SampledValueControl')
+        this.doc.querySelectorAll(`LN0 > ${this.controlTag}`)
       ).sort((a, b) => compareNames(`${identity(a)}`, `${identity(b)}`));
     }
     return [];
   }
 
-  private getFcdaElements(svcElement: Element): Element[] {
-    const lnElement = svcElement.parentElement;
+  private getFcdaElements(controlElement: Element): Element[] {
+    const lnElement = controlElement.parentElement;
     if (lnElement) {
       return Array.from(
         lnElement.querySelectorAll(
-          `:scope > DataSet[name=${svcElement.getAttribute('datSet')}] > FCDA`
+          `:scope > DataSet[name=${controlElement.getAttribute(
+            'datSet'
+          )}] > FCDA`
         )
       ).sort((a, b) => compareNames(`${identity(a)}`, `${identity(b)}`));
     }
     return [];
   }
 
-  private openEditWizard(svcElement: Element): void {
-    const wizard = wizards['SampledValueControl'].edit(svcElement);
+  private openEditWizard(controlElement: Element): void {
+    const wizard = wizards[this.controlTag].edit(controlElement);
     if (wizard) this.dispatchEvent(newWizardEvent(wizard));
   }
 
   private resetSelection(): void {
-    this.selectedSvcElement = undefined;
+    this.selectedControlElement = undefined;
     this.selectedFcdaElement = undefined;
   }
 
-  private onFcdaSelect(svcElement: Element, fcdaElement: Element) {
+  private onFcdaSelect(controlElement: Element, fcdaElement: Element) {
     this.resetSelection();
 
-    this.selectedSvcElement = svcElement;
+    this.selectedControlElement = controlElement;
     this.selectedFcdaElement = fcdaElement;
   }
 
@@ -96,22 +103,25 @@ export class SVCLaterBindingList extends LitElement {
     // When the document is updated, we will fire the event again.
     if (
       _changedProperties.has('doc') ||
-      _changedProperties.has('selectedSvcElement') ||
+      _changedProperties.has('selectedControlElement') ||
       _changedProperties.has('selectedFcdaElement')
     ) {
       this.dispatchEvent(
-        newFcdaSelectEvent(this.selectedSvcElement, this.selectedFcdaElement)
+        newFcdaSelectEvent(
+          this.selectedControlElement,
+          this.selectedFcdaElement
+        )
       );
     }
   }
 
-  renderFCDA(svcElement: Element, fcdaElement: Element): TemplateResult {
+  renderFCDA(controlElement: Element, fcdaElement: Element): TemplateResult {
     return html`<mwc-list-item
       graphic="large"
       twoline
       class="subitem"
-      @click=${() => this.onFcdaSelect(svcElement, fcdaElement)}
-      value="${identity(svcElement)} ${identity(fcdaElement)}"
+      @click=${() => this.onFcdaSelect(controlElement, fcdaElement)}
+      value="${identity(controlElement)} ${identity(fcdaElement)}"
     >
       <span>${getFcdaTitleValue(fcdaElement)}</span>
       <span slot="secondary">
@@ -128,49 +138,53 @@ export class SVCLaterBindingList extends LitElement {
   }
 
   render(): TemplateResult {
-    const svcElements = this.getSvcElements();
+    const controlElements = this.getControlElements();
     return html` <section tabindex="0">
-      ${svcElements.length > 0
+      ${controlElements.length > 0
         ? html`<h1>
-              ${translate('subscription.smvLaterBinding.svcList.title')}
+              ${translate(
+                `subscription.laterBinding.${this.controlTag}.controlBlockList.title`
+              )}
             </h1>
             <filtered-list>
-              ${svcElements.map(svcElement => {
-                const fcdaElements = this.getFcdaElements(svcElement);
+              ${controlElements.map(controlElement => {
+                const fcdaElements = this.getFcdaElements(controlElement);
                 return html`
                   <mwc-list-item
                     noninteractive
                     graphic="icon"
                     twoline
                     hasMeta
-                    value="${identity(svcElement)} ${fcdaElements
+                    value="${identity(controlElement)} ${fcdaElements
                       .map(fcdaElement => identity(fcdaElement) as string)
                       .join(' ')}"
                   >
                     <mwc-icon-button
                       slot="meta"
                       icon="edit"
                       class="interactive"
-                      @click=${() => this.openEditWizard(svcElement)}
+                      @click=${() => this.openEditWizard(controlElement)}
                     ></mwc-icon-button>
                     <span
-                      >${getNameAttribute(svcElement)}
-                      ${getDescriptionAttribute(svcElement)
-                        ? html`${getDescriptionAttribute(svcElement)}`
+                      >${getNameAttribute(controlElement)}
+                      ${getDescriptionAttribute(controlElement)
+                        ? html`${getDescriptionAttribute(controlElement)}`
                         : nothing}</span
                     >
-                    <span slot="secondary">${identity(svcElement)}</span>
+                    <span slot="secondary">${identity(controlElement)}</span>
                     <mwc-icon slot="graphic">${smvIcon}</mwc-icon>
                   </mwc-list-item>
                   <li divider role="separator"></li>
                   ${fcdaElements.map(fcdaElement =>
-                    this.renderFCDA(svcElement, fcdaElement)
+                    this.renderFCDA(controlElement, fcdaElement)
                   )}
                 `;
               })}
             </filtered-list>`
         : html`<h1>
-            ${translate('subscription.smvLaterBinding.svcList.noSvcFound')}
+            ${translate(
+              `subscription.laterBinding.${this.controlTag}.controlBlockList.noControlBlockFound`
+            )}
           </h1>`}
     </section>`;
   }

src/editors/subscription/smv-laterbinding/ext-ref-laterbinding-list.ts

@@ -213,10 +213,13 @@ export class ExtRefLaterBindingList extends LitElement {
       : undefined;
 
     return html`<h1>
-      ${translate('subscription.smvLaterBinding.extRefList.title', {
-        svcName: svcName ?? '-',
-        fcdaName: fcdaName ?? '-',
-      })}
+      ${translate(
+        'subscription.laterBinding.extRefList.SampledValueControl.title',
+        {
+          svcName: svcName ?? '-',
+          fcdaName: fcdaName ?? '-',
+        }
+      )}
     </h1>`;
   }
 
@@ -261,7 +264,7 @@ export class ExtRefLaterBindingList extends LitElement {
           )}`
         : html`<mwc-list-item graphic="large" noninteractive>
             ${translate(
-              'subscription.smvLaterBinding.extRefList.noSubscribedExtRefs'
+              'subscription.laterBinding.extRefList.noSubscribedExtRefs'
             )}
           </mwc-list-item>`}
     `;
@@ -312,7 +315,7 @@ export class ExtRefLaterBindingList extends LitElement {
           )}`
         : html`<mwc-list-item graphic="large" noninteractive>
             ${translate(
-              'subscription.smvLaterBinding.extRefList.noAvailableExtRefs'
+              'subscription.laterBinding.extRefList.noAvailableExtRefs'
             )}
           </mwc-list-item>`}
     `;
@@ -329,9 +332,7 @@ export class ExtRefLaterBindingList extends LitElement {
           `
         : html`
             <h1>
-              ${translate(
-                'subscription.smvLaterBinding.extRefList.noSelection'
-              )}
+              ${translate('subscription.laterBinding.extRefList.noSelection')}
             </h1>
           `}
     </section>`;

src/translations/de.ts

@@ -371,14 +371,24 @@ export const de: Translations = {
           'Zeigt verbundene Sampled Value(s) des ausgewählten IED',
       },
     },
-    smvLaterBinding: {
-      svcList: {
-        title: 'Sampled Values and verknüpfte Datensätze im Projekt',
-        noSvcFound: 'Kein Sampled-Value-Kontrolblock im Projekt',
+    laterBinding: {
+      SampledValueControl: {
+        controlBlockList: {
+          title: 'Sampled Values and verknüpfte Datensätze im Projekt',
+          noControlBlockFound: 'Kein Sampled-Value-Kontrolblock im Projekt',
+        },
+      },
+      GSEControl: {
+        controlBlockList: {
+          title: '???',
+          noControlBlockFound: '???',
+        },
       },
       extRefList: {
-        title:
-          'Ausgewählter Sampled Value Datenpunkt "{{ svcName }}" / "{{ fcdaName }}"',
+        SampledValueControl: {
+          title:
+            'Ausgewählter Sampled Value Datenpunkt "{{ svcName }}" / "{{ fcdaName }}"',
+        },
         noSelection: 'Kein Daten-Attribut ausgewählt',
         noSubscribedExtRefs: 'Keine verknüpften externen Referenzen',
         noAvailableExtRefs:

src/translations/en.ts

@@ -368,14 +368,24 @@ export const en = {
           'Show subscribed Sampled Value(s) publisher for selected IED',
       },
     },
-    smvLaterBinding: {
-      svcList: {
-        title: 'List of Sampled Values Controls with linked FCDAs',
-        noSvcFound: 'No Sampled Value Controls found',
+    laterBinding: {
+      SampledValueControl: {
+        controlBlockList: {
+          title: 'List of Sampled Values Controls with linked FCDAs',
+          noControlBlockFound: 'No Sampled Value Controls found',
+        },
+      },
+      GSEControl: {
+        controlBlockList: {
+          title: 'List of Goose Controls with linked FCDAs',
+          noControlBlockFound: 'No Goose Controls found',
+        },
       },
       extRefList: {
-        title:
-          'Selected Sampled Value data "{{ svcName }}" / FCDA "{{ fcdaName }}"',
+        SampledValueControl: {
+          title:
+            'Selected Sampled Value data "{{ svcName }}" / FCDA "{{ fcdaName }}"',
+        },
         noSelection: 'No data attribute selected',
         noSubscribedExtRefs: 'No subscribed ExtRefs',
         noAvailableExtRefs: 'No available ExtRefs to subscribe',

test/integration/__snapshots__/open-scd.test.snap.js

@@ -1,7 +1,8 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots['open-scd looks like its snapshot'] = `<mwc-drawer
+snapshots["open-scd looks like its snapshot"] = 
+`<mwc-drawer
   class="mdc-theme--surface"
   hasheader=""
   id="menu"
@@ -635,6 +636,21 @@ snapshots['open-scd looks like its snapshot'] = `<mwc-drawer
       </mwc-icon>
       Subscriber (GOOSE)
     </mwc-check-list-item>
+    <mwc-check-list-item
+      aria-disabled="false"
+      class="official"
+      graphic="control"
+      hasmeta=""
+      left=""
+      mwc-list-item=""
+      tabindex="-1"
+      value="/src/editors/GooseSubscriberLaterBinding.js"
+    >
+      <mwc-icon slot="meta">
+        link
+      </mwc-icon>
+      Subscriber Later Binding (GOOSE)
+    </mwc-check-list-item>
     <mwc-check-list-item
       aria-disabled="false"
       class="official"
@@ -1364,3 +1380,4 @@ snapshots['open-scd looks like its snapshot'] = `<mwc-drawer
 </mwc-dialog>
 `;
 /* end snapshot open-scd looks like its snapshot */
+