feat(menu/history): move history from log to own menu plugin

Author: juancho0202

public/js/plugins.js

@@ -186,6 +186,15 @@ export const officialPlugins = [
     requireDoc: true,
     position: 'middle',
   },
+  {
+    name: 'Show SCL History',
+    src: '/src/menu/SclHistory.js',
+    icon: 'history_toggle_off',
+    default: true,
+    kind: 'menu',
+    requireDoc: true,
+    position: 'bottom',
+  },
   {
     name: 'Help',
     src: '/src/menu/Help.js',

src/Logging.ts

@@ -32,8 +32,6 @@ import {
   LogEvent,
   Mixin,
   newActionEvent,
-  OpenDocEvent,
-  SclhistoryEntry,
 } from './foundation.js';
 import { getFilterIcon, iconColors } from './icons/icons.js';
 import { Plugin } from './Plugging.js';
@@ -43,7 +41,6 @@ const icons = {
   warning: 'warning',
   error: 'report',
   action: 'history',
-  sclhistory: 'history_toggle_off',
 };
 
 function getPluginName(src: string): string {
@@ -113,58 +110,6 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
       return index;
     }
 
-    private convertToDate(when: string | null): Date | null {
-      const convertedTime = new Date(when ?? '');
-      if (!isNaN(convertedTime.getTime())) {
-        return convertedTime;
-      }
-      return null;
-    }
-
-    private createMessage(
-      who: string | null,
-      why: string | null
-    ): string | undefined {
-      let message = who;
-      if (message !== null && why !== null) {
-        message += ' : ' + why;
-      } else if (why !== null) {
-        message = why;
-      }
-      return message ?? undefined;
-    }
-
-    private createSclHistoryEntry(
-      who: string | null,
-      what: string | null,
-      why: string | null,
-      when: string | null
-    ): SclhistoryEntry {
-      return {
-        kind: 'sclhistory',
-        title: what ?? 'UNDEFINED',
-        message: this.createMessage(who, why),
-        time: this.convertToDate(when),
-      };
-    }
-
-    private async onLoadHistoryFromDoc(event: OpenDocEvent) {
-      const doc = event.detail.doc;
-
-      Array.from(
-        doc.querySelectorAll(':root > Header > History > Hitem')
-      ).forEach(historyItem => {
-        this.history.push(
-          this.createSclHistoryEntry(
-            historyItem.getAttribute('who'),
-            historyItem.getAttribute('what'),
-            historyItem.getAttribute('why'),
-            historyItem.getAttribute('when')
-          )
-        );
-      });
-    }
-
     private onIssue(de: IssueEvent): void {
       const issues = this.diagnoses.get(de.detail.validatorId);
 
@@ -249,7 +194,6 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
 
       this.addEventListener('log', this.onLog);
       this.addEventListener('issue', this.onIssue);
-      this.addEventListener('open-doc', this.onLoadHistoryFromDoc);
     }
 
     renderLogEntry(
@@ -330,9 +274,7 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
 
     private renderFilterButtons() {
       return (<LogEntryType[]>Object.keys(icons)).map(
-        kind => html`<mwc-icon-button-toggle
-          id="${kind}filter"
-          ?on=${kind !== 'sclhistory'}
+        kind => html`<mwc-icon-button-toggle id="${kind}filter" on
           >${getFilterIcon(kind, false)}
           ${getFilterIcon(kind, true)}</mwc-icon-button-toggle
         >`
@@ -362,8 +304,7 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
           #content mwc-list-item.info,
           #content mwc-list-item.warning,
           #content mwc-list-item.error,
-          #content mwc-list-item.action,
-          #content mwc-list-item.sclhistory {
+          #content mwc-list-item.action {
             display: none;
           }
           #infofilter[on] ~ #content mwc-list-item.info {
@@ -378,9 +319,6 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
           #actionfilter[on] ~ #content mwc-list-item.action {
             display: flex;
           }
-          #sclhistoryfilter[on] ~ #content mwc-list-item.sclhistory {
-            display: flex;
-          }
 
           #log {
             --mdc-dialog-min-width: 92vw;

src/foundation.ts

@@ -362,13 +362,7 @@ export function newSubWizardEvent(
 
 type InfoEntryKind = 'info' | 'warning' | 'error';
 
-export type LogEntryType =
-  | 'info'
-  | 'warning'
-  | 'error'
-  | 'action'
-  | 'reset'
-  | 'sclhistory';
+export type LogEntryType = 'info' | 'warning' | 'error' | 'action' | 'reset';
 
 /** The basic information contained in each [[`LogEntry`]]. */
 export interface LogDetailBase {
@@ -385,10 +379,6 @@ export interface InfoDetail extends LogDetailBase {
   kind: InfoEntryKind;
   cause?: LogEntry;
 }
-/** A [[`LogEntry`]] create from the HItem Line (History) of the SCD File */
-export interface SclhistoryDetail extends LogDetailBase {
-  kind: 'sclhistory';
-}
 
 export interface ResetDetail {
   kind: 'reset';
@@ -431,9 +421,8 @@ interface Timestamped {
 
 export type CommitEntry = Timestamped & CommitDetail;
 export type InfoEntry = Timestamped & InfoDetail;
-export type SclhistoryEntry = Timestamped & SclhistoryDetail;
 
-export type LogEntry = InfoEntry | CommitEntry | SclhistoryEntry;
+export type LogEntry = InfoEntry | CommitEntry;
 
 /** Represents some work pending completion, upon which `promise` resolves. */
 export interface PendingStateDetail {

src/icons/icons.ts

@@ -60,7 +60,6 @@ export const iconColors: { [key: string]: string;} = {
   warning: '--yellow',
   error: '--red',
   action: '--blue',
-  sclhistory: '--cyan',
 };
 
 export function getFilterIcon(

src/menu/SclHistory.ts

@@ -0,0 +1,103 @@
+import {
+  html,
+  css,
+  property,
+  query,
+  TemplateResult,
+  LitElement,
+} from 'lit-element';
+import { translate } from 'lit-translate';
+
+import '@material/mwc-button';
+import '@material/mwc-dialog';
+import '@material/mwc-list';
+import '@material/mwc-list/mwc-list-item';
+import { Dialog } from '@material/mwc-dialog';
+
+export default class SclHistoryPlugin extends LitElement {
+  @property({ attribute: false })
+  doc!: XMLDocument;
+
+  @query('#historyLog') historyLog!: Dialog;
+
+  private createMessage(
+    who: string | null,
+    why: string | null
+  ): string | undefined {
+    let message = who;
+    if (message !== null && why !== null) {
+      message += ' : ' + why;
+    } else if (why !== null) {
+      message = why;
+    }
+    return message ?? undefined;
+  }
+
+  get sclHistory(): Element[] {
+    if (this.doc) {
+      return Array.from(
+        this.doc.querySelectorAll(':root > Header > History > Hitem')
+      );
+    }
+    return [];
+  }
+
+  async run(): Promise<void> {
+    this.historyLog.open = true;
+  }
+
+  renderSclHistoryEntry(element: Element): TemplateResult {
+    const message = this.createMessage(
+      element.getAttribute('who'),
+      element.getAttribute('why')
+    );
+    const title = element.getAttribute('what');
+    return html` <abbr title="${title}">
+      <mwc-list-item class="sclHistory" ?twoline=${!!message}>
+        <span>
+          <tt>${element.getAttribute('when')}</tt>
+          ${title}</span
+        >
+        <span slot="secondary">${message}</span>
+      </mwc-list-item></abbr
+    >`;
+  }
+
+  private renderSclHistory(): TemplateResult[] | TemplateResult {
+    if (this.sclHistory.length > 0)
+      return this.sclHistory
+        .slice()
+        .reverse()
+        .map(this.renderSclHistoryEntry, this);
+    else
+      return html`<mwc-list-item disabled>
+        <span>${translate('history.noEntries')}</span>
+      </mwc-list-item>`;
+  }
+
+  render(): TemplateResult {
+    return html` <mwc-dialog
+      id="historyLog"
+      heading="${translate('history.name')}"
+    >
+      <mwc-list id="historyLogContent" wrapFocus
+        >${this.renderSclHistory()}</mwc-list
+      >
+      <mwc-button slot="secondaryAction" dialogaction="close"
+        >${translate('close')}</mwc-button
+      >
+    </mwc-dialog>`;
+  }
+
+  static styles = css`
+    .sclHistory {
+      display: flex;
+    }
+    #historyLog {
+      --mdc-dialog-min-width: 92vw;
+    }
+    abbr {
+      text-decoration: none;
+    }
+  `;
+}

src/translations/de.ts

@@ -165,6 +165,10 @@ export const de: Translations = {
       placeholder: 'Keine Fehler',
     },
   },
+  history: {
+    name: 'SCL History',
+    noEntries: 'Keine Einträge in der SCL History',
+  },
   diag: {
     name: 'Daignoseübersicht',
     zeroissues: 'Es konnten keine Fehler in dem Projekt gefunden werden.',

src/translations/en.ts

@@ -142,6 +142,10 @@ export const en = {
       placeholder: 'No errors',
     },
   },
+  history: {
+    name: 'SCL History',
+    noEntries: 'No SCL history entries',
+  },
   diag: {
     name: 'Diagnostics',
     zeroissues: 'No errors found in the project',

test/integration/Setting.test.ts

@@ -1,4 +1,4 @@
-import { html, fixture, expect } from '@open-wc/testing';
+import { expect, fixture, html } from '@open-wc/testing';
 
 import '../mock-setter-logger.js';
 import { MockSetterLogger } from '../mock-setter-logger.js';
@@ -28,7 +28,10 @@ describe('Setting', () => {
     await element.updateComplete;
 
     expect(localStorage.getItem('IEC 61850-7-2')).to.eql(nsdocFile);
-    await expect(element).shadowDom.to.equalSnapshot();
+    // Create a snapshot of the Settings Dialog only, not the whole Mock Component.
+    await expect(
+      element.shadowRoot!.querySelector('mwc-dialog[id="settings"]')
+    ).to.equalSnapshot();
   });
 
   it('upload invalid .nsdoc file using event and log event fired', async () => {