@pb33f/cowboy-components 0.3.2 → 0.3.3

package/dist/components/manage-ruleset/manage-ruleset.css.js

@@ -27,10 +27,21 @@ export default css `
         color: var(--primary-color);
         margin-top: 22px;
     }
+
+    sl-icon-button {
+        font-size: 1.2rem;
+        color: var(--primary-color);
+        margin-top: 22px;
+    }
+    
+    
+    sl-icon-button.sort {
+        margin: 0; 
+        padding: 0;
+    }
     
-    sl-icon-button#save-button  {
-        color: var(--warn-color);
-        animation: pulse-animation 1.5s infinite;
+    sl-icon-button.sort::part(base) {
+       padding: 7px 5px 2px 10px
     }
 
     @keyframes pulse-animation {

package/dist/components/manage-ruleset/manage-ruleset.d.ts

@@ -19,6 +19,8 @@ export declare class ManageRuleset extends LitElement {
     customWipeDialog: SlDialog;
     confirmWipeButton: SlButton;
     allRulesSwitch: SlSwitch;
+    sortAlpha: boolean;
+    sortSeverity: boolean;
     private _defaultRuleset;
     private _owaspRuleset;
     private _allRuleset;
@@ -43,6 +45,7 @@ export declare class ManageRuleset extends LitElement {
     clearRuleProblems(): void;
     processBadRules(ruleError: RuleError[]): void;
     rulesetSaved(ruleset: RuleSet, returnedRuleset: RuleSet): void;
+    private _noSort;
     private dirty;
     private copyActiveRulesetCustom;
     private buildConfig;

package/dist/components/manage-ruleset/manage-ruleset.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import '@shoelace-style/shoelace/dist/components/radio-group/radio-group.js';
 import '@shoelace-style/shoelace/dist/components/radio-button/radio-button.js';
 import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
-import { customElement, query } from "lit/decorators.js";
+import { customElement, property, query } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import manageRulesetCss from "./manage-ruleset.css.js";
 import { RuleComponent } from "./rule.js";
@@ -26,6 +26,7 @@ export const customRuleset = "custom";
 let ManageRuleset = class ManageRuleset extends LitElement {
     constructor() {
         super();
+        this._noSort = false;
         this._defaultRules = [];
         this._owaspRules = [];
         this._allRules = [];
@@ -33,6 +34,8 @@ let ManageRuleset = class ManageRuleset extends LitElement {
         this._rulesetConfig = { ruleMapping: new Map(), allRulesSwitch: true };
         this.currentRuleset = defaultRuleset;
         this.allRulesEnabled = true;
+        this.sortAlpha = true;
+        this.sortSeverity = false;
         // @ts-ignore
         this.addEventListener(RulesetDirty, this.dirty.bind(this));
         this.addEventListener(RulesetSaved, this.rulesetUpdated.bind(this));
@@ -165,6 +168,7 @@ let ManageRuleset = class ManageRuleset extends LitElement {
         else {
             this.copyActiveRulesetCustom();
         }
+        this._noSort = true;
     }
     copyActiveRulesetCustom(submittedRule) {
         const customRules = [];
@@ -493,10 +497,68 @@ let ManageRuleset = class ManageRuleset extends LitElement {
     }
     render() {
         let selectAll = html ``;
+        let sortBySeverity = html ``;
+        let sortByAlpha = html ``;
         let numRules = 0;
         if (this._activeRuleset) {
             numRules = this._activeRuleset.length;
         }
+        const priority = { error: 0, warn: 1, info: 2 };
+        // if sortSeverity or sortAlpha is true, sort the ruleset by alpha or severity, or both starting
+        // with severity and then alpha
+        if (this.sortSeverity && !this._noSort) {
+            console.log('yeah man');
+            this._activeRuleset?.sort((a, b) => {
+                if (a && b) {
+                    if (a.rule && b.rule) {
+                        if (a.rule.severity === b.rule.severity) {
+                            if (a.rule.id && b.rule.id) {
+                                if (this.sortAlpha) {
+                                    return a.rule.id.localeCompare(b.rule.id);
+                                }
+                                else {
+                                    return b.rule.id.localeCompare(a.rule.id);
+                                }
+                            }
+                        }
+                        if (a.rule.severity && b.rule.severity) {
+                            return priority[b.rule.severity] - priority[a.rule.severity];
+                        }
+                    }
+                }
+                return 0;
+            });
+        }
+        else {
+            if (!this._noSort) {
+                this._activeRuleset?.sort((a, b) => {
+                    if (a && b) {
+                        if (a.rule && b.rule) {
+                            if (a.rule.severity === b.rule.severity) {
+                                if (a.rule.id && b.rule.id) {
+                                    if (this.sortAlpha) {
+                                        return a.rule.id.localeCompare(b.rule.id);
+                                    }
+                                    else {
+                                        return b.rule.id.localeCompare(a.rule.id);
+                                    }
+                                }
+                            }
+                            if (a.rule.severity && b.rule.severity) {
+                                if (this.sortSeverity) {
+                                    return priority[b.rule.severity] - priority[a.rule.severity];
+                                }
+                                else {
+                                    return priority[a.rule.severity] - priority[b.rule.severity];
+                                }
+                            }
+                        }
+                    }
+                    return 0;
+                });
+            }
+        }
+        this._noSort = false;
         if (numRules > 0) {
             selectAll = html `
                 <div class="toggle-allcheck">
@@ -506,6 +568,14 @@ let ManageRuleset = class ManageRuleset extends LitElement {
                     </sl-switch>
                 </div>
             `;
+            sortByAlpha = html `<div class="sort-by-alpha">
+                <sl-icon-button @click="${() => { this.sortAlpha = !this.sortAlpha; }}" 
+                        name="${this.sortAlpha ? 'sort-alpha-down' : 'sort-alpha-down-alt'}" class="sort"></sl-icon-button>    
+            </div>`;
+            sortBySeverity = html `<div class="sort-by-severity">
+                <sl-icon-button @click="${() => { this.sortSeverity = !this.sortSeverity; }}" 
+                        name="${this.sortSeverity ? 'sort-down-alt' : 'sort-down'}" class="sort"></sl-icon-button>
+            </div>`;
         }
         let rules = html `
             <div class="pb33f-loader">
@@ -552,7 +622,11 @@ let ManageRuleset = class ManageRuleset extends LitElement {
                     </div>
                 </div>
                 <div class="ruleset-body">
-                    ${selectAll}
+                    <div style="display: flex;">
+                        ${selectAll}
+                        ${sortByAlpha}
+                        ${sortBySeverity}
+                    </div>
                     ${rules}
                 </div>
             </div>
@@ -594,6 +668,12 @@ __decorate([
 __decorate([
     query('sl-switch')
 ], ManageRuleset.prototype, "allRulesSwitch", void 0);
+__decorate([
+    property({ type: Boolean })
+], ManageRuleset.prototype, "sortAlpha", void 0);
+__decorate([
+    property({ type: Boolean })
+], ManageRuleset.prototype, "sortSeverity", void 0);
 ManageRuleset = __decorate([
     customElement('pb33f-manage-ruleset')
 ], ManageRuleset);

package/dist/components/manage-ruleset/rule-input.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, property, query, state } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import { ProblemDrawerEventType } from "../problem-list/details-drawer.js";
-import { OpenProblemDrawer, RuleNameUpdated, RulesetDirty } from "../../events/doctor";
+import { OpenProblemDrawer, RuleNameUpdated, RulesetDirty, SeverityChanged } from "../../events/doctor";
 import { RuleActionComponent } from "./rule-action.js";
 import ruleCss from "./rule.css.js";
 import formsCss from "../../css/forms.css.js";
@@ -112,6 +112,13 @@ let RuleInputComponent = class RuleInputComponent extends LitElement {
     }
     updateSeverity() {
         this.rule.severity = this.severity.value;
+        this.dispatchEvent(new CustomEvent(SeverityChanged, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                severity: this.rule.severity
+            }
+        }));
         this.dirty();
     }
     updateCategory() {

package/dist/components/manage-ruleset/rule.css.js

@@ -62,7 +62,9 @@ export default css `
 
     sl-details::part(header) {
         font-size: 0.9rem;
-        padding: 5px;
+        padding-top: 5px;
+        padding-bottom: 8px;
+        padding-left: 0;
         font-family: var(--font-stack-bold), monospace;
     }
 

package/dist/components/manage-ruleset/rule.js

@@ -15,10 +15,12 @@ import ruleCss from "./rule.css.js";
 import formsCss from "../../css/forms.css.js";
 import buttonCss from "../../css/button.css.js";
 import "./rule-action.js";
-import { RuleClicked, RuleNameUpdated, RulesetDirty } from "../../events/doctor.js";
+import { RuleClicked, RuleNameUpdated, RulesetDirty, SeverityChanged } from "../../events/doctor.js";
 import { RuleInputComponent } from "./rule-input.js";
 import linksCss from "../../css/links.css.js";
 import listsCss from "../../css/lists.css.js";
+import { NodeType } from "../../model/node_type.js";
+import { IconColor, IconSize } from "../model-icon/model-icon.js";
 let RuleComponent = class RuleComponent extends LitElement {
     constructor(rule, id, custom) {
         super();
@@ -35,6 +37,11 @@ let RuleComponent = class RuleComponent extends LitElement {
         this.ruleInput.addEventListener(RuleNameUpdated, (evt) => {
             this.nameUpdated(evt.detail.name);
         });
+        //@ts-ignore
+        this.ruleInput.addEventListener(SeverityChanged, (evt) => {
+            this.rule.severity = evt.detail.severity;
+            this.requestUpdate();
+        });
     }
     nameUpdated(name) {
         this.rule.id = name;
@@ -108,6 +115,38 @@ let RuleComponent = class RuleComponent extends LitElement {
                     </div>
                 </div>`;
         }
+        let summary = html ``;
+        switch (this.rule.severity) {
+            case 'error':
+                summary = html `
+                    <div slot="summary">
+                        <pb33f-model-icon style="margin-right: 5px;" 
+                                          icon="${NodeType.ERROR}" 
+                                          color="${IconColor.error}"
+                                          size="${IconSize.small}"></pb33f-model-icon>
+                        ${this.rule.id}
+                    </div>`;
+                break;
+            case 'warn':
+                summary = html `<div slot="summary">
+                    <pb33f-model-icon style="margin-right: 5px;" 
+                                      icon="${NodeType.WARNING}" 
+                                      color="${IconColor.warning}" 
+                                      size="${IconSize.small}"></pb33f-model-icon>
+                    ${this.rule.id}
+                </div>`;
+                break;
+            case 'info':
+                summary = html `
+                    <div slot="summary">
+                        <pb33f-model-icon style="margin-right: 5px;" 
+                                          icon="${NodeType.INFO}" 
+                                          color="${IconColor.primary}" 
+                                          size="${IconSize.small}"></pb33f-model-icon>
+                        ${this.rule.id}
+                    </div>`;
+                break;
+        }
         return html `
             <div class="rule">
                 <div class="check">
@@ -115,8 +154,8 @@ let RuleComponent = class RuleComponent extends LitElement {
                 </div>
                 ${errorCol}
                 <div class="details">
-                    <sl-details summary="${this.rule.id}"
-                                class="${this.error ? 'error-rule' : ''}" @sl-show="${this.opened}">
+                    <sl-details class="${this.error ? 'error-rule' : ''}" @sl-show="${this.opened}">
+                        ${summary}
                         ${errorBox}
                         ${this.ruleInput}
                     </sl-details>

package/dist/components/model-renderer/schema.js

@@ -61,6 +61,16 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
         if (typeof this.schema !== 'object') {
             return html `<div class="schema-item">${this.schema}</div>`;
         }
+        // check if this is just a string array, if so, just render it
+        if (Array.isArray(this.schema) && this.schema.every(item => typeof item === 'string')) {
+            return html `
+                <div class="schema-item" style="display: block">
+               
+                ${this.schema.map((item, index) => {
+                return html `<div>[${index}] <code class="root" style="margin-left: 2px">${item}</code></div>`;
+            })}
+            </div>`;
+        }
         const sch = this.schema;
         if (isHasRef(sch)) {
             const segs = this.schema.$ref?.split('/');

package/dist/components/problems-overview/diagnostic-evaluation.js

@@ -60,9 +60,6 @@ let DiagnosticEvaluation = class DiagnosticEvaluation extends LitElement {
     render() {
         this.links = [];
         let parsed = this.convertToLinks(marked.parse(this.diagnosis).toString());
-        this.links.sort((a, b) => {
-            return a.localeCompare(b);
-        });
         const renderedLinks = this.links.map((link) => {
             return html `<li><a href="#" @click=${() => { this.viewRuleDocs(link); }}>${link}</a></li>`;
         });

package/dist/components/problems-overview/problem-overview-group.d.ts

@@ -1,5 +1,6 @@
 import { LitElement, TemplateResult } from "lit";
 import { ProblemItem } from "../problem-list/problem-item.js";
+import { MarkerSeverity } from "monaco-editor";
 export declare class ProblemOverviewGroup extends LitElement {
     static styles: import("lit").CSSResult[];
     rank: number;
@@ -7,6 +8,7 @@ export declare class ProblemOverviewGroup extends LitElement {
     groupName: string;
     description: string;
     category: string;
+    severity: MarkerSeverity;
     violationPercent: number;
     problems: ProblemItem[];
     constructor();

package/dist/components/problems-overview/problem-overview-group.js

@@ -12,6 +12,7 @@ import { OpenProblemDrawer, ProblemClicked, RuleViolationClicked } from "../../e
 import sharedCss from "../../css/shared.css.js";
 import buttonCss from "../../css/button.css.js";
 import { ProblemItem } from "../problem-list/problem-item.js";
+import { MarkerSeverity } from "monaco-editor";
 let ProblemOverviewGroup = class ProblemOverviewGroup extends LitElement {
     constructor() {
         super();
@@ -64,13 +65,22 @@ let ProblemOverviewGroup = class ProblemOverviewGroup extends LitElement {
         if (!this.groupName || this.groupName === '') {
             this.groupName = 'invalid OpenAPI specification';
         }
+        let severity = html ``;
+        if (this.severity === MarkerSeverity.Error) {
+            clazz = "error";
+            severity = html `
+                <pb33f-model-icon color="error" size="small" icon="error"></pb33f-model-icon>
+            `;
+            pc = html `
+                <pb33f-percent-bar value="${this.violationPercent}" error></pb33f-percent-bar>`;
+        }
         return html `
             <div class="problem-overview-group">
                 <div class="group-rank">
-                    <span>${this.rank}</span>
+                    <span class="${clazz}">${this.rank}</span>
                 </div>
                 <div class="group-details">
-                    <span class="name ${clazz}" @click="${this.viewRuleDocs}">${this.groupName}</span>
+                    ${severity}<span class="name ${clazz}" @click="${this.viewRuleDocs}">${this.groupName}</span>
                     ${pc}
                 </div>
                 <div class="violations">
@@ -109,6 +119,9 @@ __decorate([
 __decorate([
     property()
 ], ProblemOverviewGroup.prototype, "category", void 0);
+__decorate([
+    property()
+], ProblemOverviewGroup.prototype, "severity", void 0);
 __decorate([
     property({ type: Number })
 ], ProblemOverviewGroup.prototype, "violationPercent", void 0);

package/dist/components/problems-overview/problems-overview.js

@@ -42,6 +42,7 @@ let ProblemsOverview = class ProblemsOverview extends LitElement {
                 const group = new ProblemOverviewGroup();
                 group.groupName = problem.problemObject.source;
                 group.totalViolations = 1;
+                group.severity = problem.problemObject.severity;
                 group.problems = [problem];
                 problemOverviewGroups.set(rule, group);
             }
@@ -52,9 +53,14 @@ let ProblemsOverview = class ProblemsOverview extends LitElement {
             group.violationPercent = Math.round((group.totalViolations / totalViolations) * 100);
         }
         const values = Array.from(problemOverviewGroups.values());
-        // order by violations
+        // order by violations, errors first.
         values.sort((a, b) => {
-            return b.totalViolations - a.totalViolations;
+            if (a.severity === b.severity) {
+                return b.totalViolations - a.totalViolations;
+            }
+            else {
+                return b.severity - a.severity;
+            }
         });
         // stack rank.
         for (let i = 0; i < values.length; i++) {

package/dist/components/the-doctor/the-doctor.d.ts

@@ -40,6 +40,7 @@ export declare class TheDoctor extends LitElement {
     overviewPanel: SlTab;
     problemsPanel: SlTab;
     viewerPanel: SlTab;
+    explorerPanel: SlTab;
     controlTabGroup: SlTabGroup;
     editorTabGroup: SlTabGroup;
     welcomeBox: AttentionBox;
@@ -109,6 +110,7 @@ export declare class TheDoctor extends LitElement {
     activeNode: Node;
     readonly nodeLimit: number;
     constructor(doctorEndpoint?: string);
+    addClickTrack(node: Node): void;
     filterTreeModel(event: CustomEvent<ExplorerEqualizerChangedEvent>): void;
     explorerReferenceClicked(evt: CustomEvent<NodeReferenceEvent>): void;
     modelTreeNodeClicked(evt: CustomEvent<NodeClickedEvent>): void;

package/dist/components/the-doctor/the-doctor.js

@@ -144,17 +144,19 @@ let TheDoctor = class TheDoctor extends LitElement {
         window.addEventListener('popstate', (e) => {
             const state = e.state;
             if (state) {
-                switch (state.view) {
-                    case ActiveView.Problems:
-                        this.controlTabGroup.show(ActiveView.Problems);
-                        break;
-                    case ActiveView.Overview:
-                        this.controlTabGroup.show(ActiveView.Overview);
-                        break;
+                if (state.activeNode) {
+                    this.modelTreeNodeClicked(new CustomEvent(ExplorerNodeClicked, {
+                        detail: {
+                            nodeHashId: state.activeNode,
+                            noState: true
+                        }
+                    }));
                 }
             }
         });
-        //history.pushState({view: ActiveView.Overview}, "", ActiveView.Overview);
+    }
+    addClickTrack(node) {
+        history.pushState({ activeNode: node.idHash }, "", `?view=explore&node=${node.idHash}`);
     }
     filterTreeModel(event) {
         this.filteredNodes = new Map();
@@ -206,6 +208,10 @@ let TheDoctor = class TheDoctor extends LitElement {
             if (renderedNode) {
                 this.renderedNode.node = renderedNode;
             }
+            if (!evt.detail.noState) {
+                this.addClickTrack(node);
+                evt.detail.noState = true;
+            }
             this.explorerNodeClicked(evt);
             this.viewerPanel.click();
         }
@@ -223,6 +229,9 @@ let TheDoctor = class TheDoctor extends LitElement {
                 this.activeNode = node.body.node;
                 this.explorer.activeNode = node.body.node;
                 found = true;
+                if (!evt.detail.noState) {
+                    this.addClickTrack(node.body.node);
+                }
             }
             else {
                 node.body.active = false;
@@ -1167,7 +1176,7 @@ let TheDoctor = class TheDoctor extends LitElement {
                 ${this.activitySpinner}
                 ${this.errorBanner}
                 ${overlay}
-                
+
                 <sl-split-panel class="split-panel-explorer" position="12">
                     <sl-icon id="split-divider-tree" slot="divider" name="grip-vertical"></sl-icon>
                     <div slot="start" class="model-tree">
@@ -1180,10 +1189,10 @@ let TheDoctor = class TheDoctor extends LitElement {
                                 ${this.detailsDrawer}
                                 <sl-tab-group class="tab-group" @sl-tab-show="${this.selectEditorTab}"
                                               id="editor-controls">
+
                                     <sl-tab slot="nav" panel="spec" class="tab" id="spec"
                                             @click="${this.closeExplorer}">
-                                        OpenAPI
-                                        Spec
+                                        OpenAPI Spec
                                     </sl-tab>
                                     <sl-tab slot="nav" panel="explorer" class="tab" id="explorer"
                                             @click="${this.toggleExplorer}">Explorer
@@ -1192,11 +1201,13 @@ let TheDoctor = class TheDoctor extends LitElement {
                                             @click="${this.closeExplorer}">
                                         Ruleset ${rulesetPulsePill}
                                     </sl-tab>
+                                 
                                     <sl-tab-panel name="spec" class="tab-panel">${this.editor}</sl-tab-panel>
                                     <sl-tab-panel name="ruleset" class="tab-panel">${this.rulesetEditor}</sl-tab-panel>
                                     <sl-tab-panel name="explorer" class="tab-panel"
                                                   @mouseleave="${this.ungrabExplorer}">${this.explorer}
                                     </sl-tab-panel>
+                                   
                                 </sl-tab-group>
                             </div>
                             ${mainPanelView}
@@ -1205,6 +1216,13 @@ let TheDoctor = class TheDoctor extends LitElement {
                 </sl-split-panel>
                 ${this.statusBar}
             </div>`;
+        // docs   <iframe src="/docs.html" width="100%" height="100%"
+        //                                                 style="border: none"></iframe>
+        //    <sl-tab slot="nav" panel="docs" class="tab" id="docs">
+        //                                         Docs
+        //                                     </sl-tab>
+        // <sl-tab-panel name="docs" class="tab-panel">
+        //                                     </sl-tab-panel>
     }
     ungrabExplorer() {
         this.explorer.grabbed = false;
@@ -1220,6 +1238,9 @@ __decorate([
 __decorate([
     query('#viewerPanel')
 ], TheDoctor.prototype, "viewerPanel", void 0);
+__decorate([
+    query('#explorer')
+], TheDoctor.prototype, "explorerPanel", void 0);
 __decorate([
     query('sl-tab-group#manager-controls')
 ], TheDoctor.prototype, "controlTabGroup", void 0);