fix(Pluggin/Hosting): allow using own dialogs in menu plugins (openscd#843)

* fix(Pluggin/Hosting): allocate menu plugin content next to its list item

* fix(open-scd): snapshots

* fix(Hosting): hack to make sure menu plugins not triggering run

Author: JakobVogelsang

src/Hosting.ts

@@ -73,7 +73,7 @@ export function Hosting<
               newPendingStateEvent(
                 (<MenuPlugin>(
                   (<unknown>(
-                    (<List>ae.target).items[ae.detail.index].lastElementChild
+                    (<List>ae.target).items[ae.detail.index].nextElementSibling
                   ))
                 )).run()
               )
@@ -94,7 +94,7 @@ export function Hosting<
               newPendingStateEvent(
                 (<MenuPlugin>(
                   (<unknown>(
-                    (<List>ae.target).items[ae.detail.index].lastElementChild
+                    (<List>ae.target).items[ae.detail.index].nextElementSibling
                   ))
                 )).run()
               )
@@ -115,7 +115,7 @@ export function Hosting<
               newPendingStateEvent(
                 (<MenuPlugin>(
                   (<unknown>(
-                    (<List>ae.target).items[ae.detail.index].lastElementChild
+                    (<List>ae.target).items[ae.detail.index].nextElementSibling
                   ))
                 )).run()
               )
@@ -139,7 +139,7 @@ export function Hosting<
               newPendingStateEvent(
                 (<Validator>(
                   (<unknown>(
-                    (<List>ae.target).items[ae.detail.index].lastElementChild
+                    (<List>ae.target).items[ae.detail.index].nextElementSibling
                   ))
                 )).validate()
               )
@@ -224,7 +224,7 @@ export function Hosting<
             .querySelector('mwc-list')!
             .items.filter(item => item.className === 'validator')
             .map(item =>
-              (<Validator>(<unknown>item.lastElementChild)).validate()
+              (<Validator>(<unknown>item.nextElementSibling)).validate()
             )
         ).then();
         this.dispatchEvent(newPendingStateEvent(this.validated));
@@ -245,8 +245,8 @@ export function Hosting<
           ${me.hint
             ? html`<span slot="secondary"><tt>${me.hint}</tt></span>`
             : ''}
-          ${me.content ?? ''}
         </mwc-list-item>
+        ${me.content ?? ''}
       `;
     }
 
@@ -280,10 +280,14 @@ export function Hosting<
             : ''}
           <mwc-list
             wrapFocus
-            @action=${(ae: CustomEvent<ActionDetail>) =>
-              (<MenuItem>(
-                this.menu.filter(item => item !== 'divider')[ae.detail.index]
-              ))?.action?.(ae)}
+            @action=${(ae: CustomEvent<ActionDetail>) => {
+              //FIXME: dirty hack to be fixed in open-scd-core
+              //       if clause not neccassary when oscd... compenents in open-scd not list
+              if (ae.target instanceof List)
+                (<MenuItem>(
+                  this.menu.filter(item => item !== 'divider')[ae.detail.index]
+                ))?.action?.(ae);
+            }}
           >
             ${this.menu.map(this.renderMenuItem)}
           </mwc-list>

src/Plugging.ts

@@ -1,4 +1,5 @@
 import { html, query, TemplateResult } from 'lit-element';
+import { classMap } from 'lit-html/directives/class-map';
 import { translate } from 'lit-translate';
 
 import '@material/mwc-button';
@@ -291,6 +292,12 @@ export function Plugging<TBase extends new (...args: any[]) => EditingElement>(
             .docId=${this.docId}
             .pluginId=${plugin.src}
             .nsdoc=${this.nsdoc}
+            class="${classMap({
+              plugin: true,
+              menu: plugin.kind === 'menu',
+              validator: plugin.kind === 'validator',
+              editor: plugin.kind === 'editor',
+            })}"
           ></${tag}>`,
       };
     }

src/open-scd.ts

@@ -170,5 +170,13 @@ export class OpenSCD extends Hosting(
       margin-left: -30px;
       font-family: 'Roboto', sans-serif;
     }
+
+    .plugin.menu {
+      display: flex;
+    }
+
+    .plugin.validator {
+      display: flex;
+    }
   `;
 }

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

@@ -32,9 +32,9 @@ snapshots["open-scd looks like its snapshot"] =
       <span>
         Open project
       </span>
-      <oscd-plugina2b400fc5f053cb1>
-      </oscd-plugina2b400fc5f053cb1>
     </mwc-list-item>
+    <oscd-plugina2b400fc5f053cb1 class="plugin">
+    </oscd-plugina2b400fc5f053cb1>
     <mwc-list-item
       aria-disabled="false"
       class="top"
@@ -49,9 +49,9 @@ snapshots["open-scd looks like its snapshot"] =
       <span>
         New project
       </span>
-      <oscd-plugin679d81826289fb9a>
-      </oscd-plugin679d81826289fb9a>
     </mwc-list-item>
+    <oscd-plugin679d81826289fb9a class="plugin">
+    </oscd-plugin679d81826289fb9a>
     <mwc-list-item
       aria-disabled="true"
       class="top"
@@ -67,9 +67,9 @@ snapshots["open-scd looks like its snapshot"] =
       <span>
         Save project
       </span>
-      <oscd-plugin1cb4a5367ff1f6a1>
-      </oscd-plugin1cb4a5367ff1f6a1>
     </mwc-list-item>
+    <oscd-plugin1cb4a5367ff1f6a1 class="plugin">
+    </oscd-plugin1cb4a5367ff1f6a1>
     <li
       divider=""
       padded=""
@@ -123,9 +123,9 @@ snapshots["open-scd looks like its snapshot"] =
       <span>
         Validate Schema
       </span>
-      <oscd-plugin3aa68346726da1cd>
-      </oscd-plugin3aa68346726da1cd>
     </mwc-list-item>
+    <oscd-plugin3aa68346726da1cd class="plugin">
+    </oscd-plugin3aa68346726da1cd>
     <mwc-list-item
       aria-disabled="true"
       class="validator"
@@ -141,9 +141,9 @@ snapshots["open-scd looks like its snapshot"] =
       <span>
         Validate Templates
       </span>
-      <oscd-plugin186320cdd626e422>
-      </oscd-plugin186320cdd626e422>
     </mwc-list-item>
+    <oscd-plugin186320cdd626e422 class="plugin">
+    </oscd-plugin186320cdd626e422>
     <mwc-list-item
       aria-disabled="false"
       class="static"
@@ -195,9 +195,9 @@ snapshots["open-scd looks like its snapshot"] =
       <span>
         Import IEDs
       </span>
-      <oscd-plugin4fed39e69404009b>
-      </oscd-plugin4fed39e69404009b>
     </mwc-list-item>
+    <oscd-plugin4fed39e69404009b class="plugin">
+    </oscd-plugin4fed39e69404009b>
     <mwc-list-item
       aria-disabled="true"
       class="middle"
@@ -213,9 +213,9 @@ snapshots["open-scd looks like its snapshot"] =
       <span>
         Subscriber Update
       </span>
-      <oscd-plugin90bf5c90b69b347b>
-      </oscd-plugin90bf5c90b69b347b>
     </mwc-list-item>
+    <oscd-plugin90bf5c90b69b347b class="plugin">
+    </oscd-plugin90bf5c90b69b347b>
     <mwc-list-item
       aria-disabled="true"
       class="middle"
@@ -231,9 +231,9 @@ snapshots["open-scd looks like its snapshot"] =
       <span>
         Merge Project
       </span>
-      <oscd-plugin2b4693cc19da2446>
-      </oscd-plugin2b4693cc19da2446>
     </mwc-list-item>
+    <oscd-plugin2b4693cc19da2446 class="plugin">
+    </oscd-plugin2b4693cc19da2446>
     <mwc-list-item
       aria-disabled="true"
       class="middle"
@@ -249,9 +249,9 @@ snapshots["open-scd looks like its snapshot"] =
       <span>
         Update Substation
       </span>
-      <oscd-plugin2a662bacb120083f>
-      </oscd-plugin2a662bacb120083f>
     </mwc-list-item>
+    <oscd-plugin2a662bacb120083f class="plugin">
+    </oscd-plugin2a662bacb120083f>
     <li
       divider=""
       padded=""
@@ -287,9 +287,9 @@ snapshots["open-scd looks like its snapshot"] =
       <span>
         Help
       </span>
-      <oscd-plugin48ab1a46d409bed9>
-      </oscd-plugin48ab1a46d409bed9>
     </mwc-list-item>
+    <oscd-plugin48ab1a46d409bed9 class="plugin">
+    </oscd-plugin48ab1a46d409bed9>
     <li
       divider=""
       padded=""