Refactor CoMPAS Versions Tab, added help content.

Signed-off-by: Dennis Labordus <[email protected]>

Author: Dennis Labordus

__snapshots__/compas-versions-plugin.md

@@ -121,6 +121,9 @@
           slot="graphic"
           style="width: 90px"
         >
+          <mwc-icon>
+            restore
+          </mwc-icon>
         </span>
       </mwc-list-item>
     </mwc-list>

public/md/CoMPAS-Versions-Editor.md

@@ -0,0 +1,13 @@
+In the CoMPAS Editor the different versions of an SCL XML File are shown that are stored in CoMPAS.
+
+- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M13 3c-4.97 0-9 4.03-9 9H1l4 3.99L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z"/></svg>: 
+  Restore a specific version from CoMPAS. <br/>
+  By pressing the icon and confirming the action that specific version will be loaded in OpenSCD.
+  That version isn't saved yet in CoMPAS as the latest version. By saving it using the menu 'Save CoMPAS' 
+  the loaded version can be saved as the latest version. 
+- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>: 
+  Remove a specific version from CoMPAS.<br/>
+  By pressing the icon and confirming the action that specific version will be removed from CoMPAS.
+- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.12 10.47L12 12.59l-2.13-2.12-1.41 1.41L10.59 14l-2.12 2.12 1.41 1.41L12 15.41l2.12 2.12 1.41-1.41L13.41 14l2.12-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4zM6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9z"/></svg>:
+  Remove the SCL XML File completely from CoMPAS, all versions.<br/>
+  By pressing the icon and confirming the action all versions will be removed from CoMPAS.

public/md/Home.md

@@ -1,3 +1,4 @@
 This is an open repository of information on OpenSCD and IEC 61850-6. You are welcome to share your knowledge with the rest of the world at https://github.com/openscd/open-scd/wiki/Home/_edit 😄 . Welcome aboard!
 
-So far we have documented some essential [general OpenSCD editor features](https://github.com/openscd/open-scd/wiki/OpenSCD-Editor-Features) and features regarding the individual [sections of an SCL file](https://github.com/openscd/open-scd/wiki/SCL-Sections) .
+So far we have documented some essential [general OpenSCD editor features](https://github.com/openscd/open-scd/wiki/OpenSCD-Editor-Features) and features regarding the individual [sections of an SCL file](https://github.com/openscd/open-scd/wiki/SCL-Sections).
+And for CoMPAS there is also some documentation about the [CoMPAS Version Editor](https://github.com/openscd/open-scd/wiki/CoMPAS-Versions-Editor).

public/md/_Sidebar.md

@@ -21,3 +21,7 @@
 ### DataTypeTemplates
 
 - [DataTypeTemplate editor](https://github.com/openscd/open-scd/wiki/DataTypeTemplate-editor)
+
+## CoMPASS
+
+- [CoMPAS Versions Editor](https://github.com/openscd/open-scd/wiki/CoMPAS-Versions-Editor)

src/compas-editors/CompasVersions.ts

@@ -89,7 +89,11 @@ export default class CompasVersionsPlugin extends LitElement {
                 if (items.length - 1 === index) {
                   return html`<mwc-list-item tabindex="0" graphic="control">
                                 ${name} (${version})
-                                <span slot="graphic" style="width: 90px"></span>
+                                <span slot="graphic" style="width: 90px">
+                                  <mwc-icon @click=${() => {
+                                              this.confirmRestoreCompas(version);
+                                            }}>restore</mwc-icon>
+                                </span>
                               </mwc-list-item>`
                 }
                 return html`<mwc-list-item tabindex="0"

test/integration/compas-editors/CompasVersions.test.ts

@@ -118,7 +118,28 @@ describe('compas-versions-plugin', () => {
 
     it('has 3 item entries', () => {
       expect(element.shadowRoot!.querySelectorAll('mwc-list > mwc-list-item'))
-        .to.have.length(3)
+        .to.have.length(3);
+    });
+
+    it('first entry has correct buttons', () => {
+      expect(element.shadowRoot!.querySelectorAll('mwc-list > mwc-list-item').length)
+        .to.be.greaterThan(1);
+      // Retrieve the first item after checking that there are items.
+      const item = element.shadowRoot!.querySelectorAll('mwc-list > mwc-list-item')[0];
+      // There should be 2 buttons, first the restore, second the delete.
+      expect(item.querySelectorAll('span > mwc-icon')).to.have.length(2);
+      expect(item.querySelectorAll('span > mwc-icon')[0].textContent).to.be.equal('restore');
+      expect(item.querySelectorAll('span > mwc-icon')[1].textContent).to.be.equal('delete');
+    });
+
+    it('last entry has one buttons', () => {
+      expect(element.shadowRoot!.querySelectorAll('mwc-list > mwc-list-item'))
+        .to.have.length(3);
+      // Retrieve the last item after checking that there are 3 items.
+      const item = element.shadowRoot!.querySelectorAll('mwc-list > mwc-list-item')[2];
+      // There should be 1 buttons, the restore button.
+      expect(item.querySelectorAll('span > mwc-icon')).to.have.length(1);
+      expect(item.querySelectorAll('span > mwc-icon')[0].textContent).to.be.equal('restore');
     });
 
     it('looks like the latest snapshot', async () => {