feat(editors/later-binding): Improve supervision visibility and remove clutter (openscd#1141)

* Improve supervision visibility and later binding information display.

* Remove clutter in later binding (closes openscd#1024)
* Add subscription information (closes openscd#1037)

* Add snapshots

Author: danyill

src/editors/subscription/later-binding/ext-ref-later-binding-list.ts

@@ -256,7 +256,11 @@ export class ExtRefLaterBindingList extends LitElement {
           ? html` (${getDescriptionAttribute(extRefElement)})`
           : nothing}
       </span>
-      <span slot="secondary">${identity(extRefElement)}</span>
+      <span slot="secondary"
+        >${identity(extRefElement.parentElement)}${supervisionNode !== null
+          ? ` (${identity(supervisionNode)})`
+          : ''}</span
+      >
       <mwc-icon slot="graphic">swap_horiz</mwc-icon>
       ${supervisionNode !== null
         ? html`<mwc-icon title="${identity(supervisionNode)}" slot="meta"
@@ -329,7 +333,9 @@ export class ExtRefLaterBindingList extends LitElement {
                   ? html` (${getDescriptionAttribute(extRefElement)})`
                   : nothing}
               </span>
-              <span slot="secondary">${identity(extRefElement)}</span>
+              <span slot="secondary"
+                >${identity(extRefElement.parentElement)}</span
+              >
               <mwc-icon slot="graphic">arrow_back</mwc-icon>
             </mwc-list-item>`
           )}`

test/integration/editors/GooseSubscriberLaterBinding.test.ts

@@ -9,6 +9,7 @@ import {
   getSelectedSubItemValue,
   selectFCDAItem,
 } from './test-support.js';
+import { ExtRefLaterBindingList } from '../../../src/editors/subscription/later-binding/ext-ref-later-binding-list.js';
 
 describe('GOOSE Subscribe Later Binding Plugin', () => {
   customElements.define(
@@ -31,6 +32,33 @@ describe('GOOSE Subscribe Later Binding Plugin', () => {
     );
   });
 
+  it('when selecting an FCDA element with subscriptions it looks like the latest snapshot', async () => {
+    doc = await fetch('/test/testfiles/editors/LaterBindingGOOSE-LGOS.scd')
+      .then(response => response.text())
+      .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+
+    element = await fixture(
+      html`<goose-subscriber-later-binding-plugin
+        .doc="${doc}"
+      ></goose-subscriber-later-binding-plugin>`
+    );
+
+    const fcdaListElement = getFCDABindingList(element);
+    selectFCDAItem(
+      fcdaListElement,
+      'GOOSE_Publisher>>QB2_Disconnector>GOOSE2',
+      'GOOSE_Publisher>>QB2_Disconnector>GOOSE2sDataSet>QB2_Disconnector/ CSWI 1.Pos stVal (ST)'
+    );
+    await element.requestUpdate();
+
+    const extRefListElement = <ExtRefLaterBindingList>(
+      element.shadowRoot?.querySelector('extref-later-binding-list')
+    );
+    await extRefListElement.requestUpdate();
+
+    await expect(extRefListElement).shadowDom.to.equalSnapshot();
+  });
+
   it('when subscribing an available ExtRef then the lists are changed', async () => {
     const fcdaListElement = getFCDABindingList(element);
     const extRefListElement = getExtrefLaterBindingList(element);

test/integration/editors/SMVSubscriberLaterBinding.test.ts

@@ -10,6 +10,7 @@ import {
   getSelectedSubItemValue,
   selectFCDAItem,
 } from './test-support.js';
+import { ExtRefLaterBindingList } from '../../../src/editors/subscription/later-binding/ext-ref-later-binding-list.js';
 
 describe('SMV Subscribe Later Binding plugin', () => {
   customElements.define(
@@ -32,6 +33,33 @@ describe('SMV Subscribe Later Binding plugin', () => {
     await element.requestUpdate();
   });
 
+  it('when selecting an FCDA element with subscriptions it looks like the latest snapshot', async () => {
+    doc = await fetch('/test/testfiles/editors/LaterBindingSMV-LSVS.scd')
+      .then(response => response.text())
+      .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+
+    element = await fixture(
+      html`<smv-subscribe-later-binding-plugin
+        .doc="${doc}"
+      ></smv-subscribe-later-binding-plugin>`
+    );
+
+    const fcdaListElement = getFCDABindingList(element);
+    selectFCDAItem(
+      fcdaListElement,
+      'SMV_Publisher>>CurrentTransformer>currrentOnly',
+      'SMV_Publisher>>CurrentTransformer>currrentOnlysDataSet>CurrentTransformer/L1 TCTR 1.AmpSv instMag.i (MX)'
+    );
+    await element.requestUpdate();
+
+    const extRefListElement = <ExtRefLaterBindingList>(
+      element.shadowRoot?.querySelector('extref-later-binding-list')
+    );
+    await extRefListElement.requestUpdate();
+
+    await expect(extRefListElement).shadowDom.to.equalSnapshot();
+  });
+
   it('when subscribing an available ExtRef then the lists are changed', async () => {
     const fcdaListElement = getFCDABindingList(element);
     const extRefListElement = getExtrefLaterBindingList(element);