@pb33f/cowboy-components 0.0.14 → 0.1.1

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

@@ -0,0 +1,57 @@
+import '@shoelace-style/shoelace/dist/components/split-panel/split-panel.js';
+import '@shoelace-style/shoelace/dist/components/tab-group/tab-group.js';
+import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js';
+import '@shoelace-style/shoelace/dist/components/tab/tab.js';
+import '@shoelace-style/shoelace/dist/components/switch/switch.js';
+import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
+import { LitElement } from "lit";
+import { EditorUpdatedEvent, ProblemRuleFilterChangedEvent } from "@/events/doctor";
+import { ProblemDrawerEvent } from "@/components/problem-list/details-drawer.js";
+import { SlSwitch, SlTab, SlTabGroup } from "@shoelace-style/shoelace";
+export declare const DoctorDocumentBag = "pb33f-doctor-editor";
+export declare const HowToFixBag = "pb33f-doctor-howtofix";
+export declare const RuleDocumentationBag = "pb33f-doctor-ruledocs";
+export declare const DiagnosticBag = "pb33f-doctor-diagnostic";
+export declare const OWASPBag = "pb33f-doctor-owasp";
+export declare const DefaultDocument = "document";
+export declare const DocumentProblems = "problems";
+export declare class TheDoctor extends LitElement {
+    static styles: import("lit").CSSResult[];
+    overviewPanel: SlTab;
+    problemsPanel: SlTab;
+    tabGroup: SlTabGroup;
+    owaspSwitch: SlSwitch;
+    private unavailable;
+    private errorBanner;
+    private bagManager;
+    private readonly editor;
+    private docBag;
+    private problemBag;
+    private diagnosticBag;
+    private OWASPBag;
+    private howToFixBag;
+    private ruleDocsBag;
+    private readonly problemsOverview;
+    private readonly problemList;
+    private readonly detailsDrawer;
+    private ruleDocsWorker;
+    private debounceTime;
+    private bounceId;
+    private problems;
+    private OWASPEnabled;
+    private readonly statusBar;
+    private session;
+    private doctorEndpoint;
+    constructor();
+    ruleGroupClicked(event: CustomEvent<ProblemRuleFilterChangedEvent>): void;
+    ruleDocsClicked(event: CustomEvent<ProblemDrawerEvent>): void;
+    private lintSpec;
+    private platformUnavailable;
+    private specClicked;
+    private problemClicked;
+    private loadState;
+    private fetchDocs;
+    specChanged(event: CustomEvent<EditorUpdatedEvent>): void;
+    toggleOWASP(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,340 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import '@shoelace-style/shoelace/dist/components/split-panel/split-panel.js';
+import '@shoelace-style/shoelace/dist/components/tab-group/tab-group.js';
+import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js';
+import '@shoelace-style/shoelace/dist/components/tab/tab.js';
+import '@shoelace-style/shoelace/dist/components/switch/switch.js';
+import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
+import { customElement, property, query } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import { SpecEditor } from "@/components/editor/editor.js";
+import { ActiveView, EditorClicked, EditorUpdated, OpenProblemDrawer, ProblemClicked, ProblemRuleFilterChangedManual, RuleClicked } from "@/events/doctor";
+import { CreateBagManager } from "@pb33f/saddlebag";
+import { LintingService } from "@/services/linting-service";
+import { ProblemList } from "@/components/problem-list/problem-list.js";
+import { Problem } from "@/model/problem.js";
+import { ProblemDetailsDrawer, ProblemDrawerEventType } from "@/components/problem-list/details-drawer.js";
+import RuleDocumentationWorker from "@/workers/rule-documentation.worker.js?worker";
+import theDoctorCss from "./the-doctor.css.js";
+import { ProblemsOverview } from "@/components/problems-overview/problems-overview.js";
+import { ErrorBanner } from "@/components/error-banner/error-banner.js";
+import { StatusBar } from "@/components/the-doctor/status-bar.js";
+export const DoctorDocumentBag = "pb33f-doctor-editor";
+export const HowToFixBag = "pb33f-doctor-howtofix";
+export const RuleDocumentationBag = "pb33f-doctor-ruledocs";
+export const DiagnosticBag = "pb33f-doctor-diagnostic";
+export const OWASPBag = "pb33f-doctor-owasp";
+export const DefaultDocument = "document";
+export const DocumentProblems = "problems";
+let TheDoctor = class TheDoctor extends LitElement {
+    //private doctorEndpoint: string = "http://localhost:9090";
+    constructor() {
+        super();
+        this.debounceTime = 300;
+        this.bounceId = 0;
+        this.doctorEndpoint = "https://doctor.pb33f.io";
+        // create a stateful bag manager
+        this.bagManager = CreateBagManager(true);
+        this.bagManager.loadStatefulBags().then(this.loadState.bind(this));
+        this.editor = new SpecEditor();
+        this.problemList = new ProblemList();
+        this.detailsDrawer = new ProblemDetailsDrawer();
+        this.problemsOverview = new ProblemsOverview();
+        this.errorBanner = new ErrorBanner();
+        this.statusBar = new StatusBar();
+        this.ruleDocsWorker = new RuleDocumentationWorker();
+        this.unavailable = false;
+        // TODO: make this configurable
+        this.editor.language = "yaml";
+        //@ts-ignore
+        this.addEventListener(EditorUpdated, this.specChanged);
+        //@ts-ignore
+        this.addEventListener(EditorClicked, this.specClicked);
+        //@ts-ignore
+        this.addEventListener(ProblemClicked, this.problemClicked);
+        // @ts-ignore
+        this.addEventListener(OpenProblemDrawer, this.ruleDocsClicked);
+        // @ts-ignore
+        this.addEventListener(RuleClicked, this.ruleGroupClicked);
+        // hijack navigation buttons.
+        window.addEventListener('popstate', (e) => {
+            const state = e.state;
+            if (state) {
+                switch (state.view) {
+                    case ActiveView.Problems:
+                        this.tabGroup.show(ActiveView.Problems);
+                        break;
+                    case ActiveView.Overview:
+                        this.tabGroup.show(ActiveView.Overview);
+                        break;
+                }
+            }
+        });
+        history.pushState({ view: ActiveView.Overview }, "", ActiveView.Overview);
+    }
+    ruleGroupClicked(event) {
+        this.problemsPanel.focus();
+        const simEvent = new CustomEvent(ProblemRuleFilterChangedManual, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                rule: event.detail.rule
+            }
+        });
+        this.problemsPanel.focus();
+        this.problemList.dispatchEvent(simEvent);
+        history.pushState({ rule: event.detail.rule }, "", `/${ActiveView.Problems}?rule=${event.detail.rule}`);
+        this.tabGroup.show(ActiveView.Problems);
+    }
+    ruleDocsClicked(event) {
+        const ruleId = event.detail.rule;
+        if (ruleId) {
+            switch (event.detail.type) {
+                case ProblemDrawerEventType.RULE_DOCS:
+                    const ruleDoc = this.ruleDocsBag?.get(ruleId);
+                    if (ruleDoc) {
+                        event.detail.body = ruleDoc.body;
+                        this.detailsDrawer.open(event.detail);
+                    }
+                    break;
+                case ProblemDrawerEventType.HOW_TO_FIX:
+                    const howToFix = this.howToFixBag?.get(ruleId);
+                    if (howToFix) {
+                        event.detail.body = howToFix.howToFix;
+                        this.detailsDrawer.open(event.detail);
+                    }
+            }
+        }
+    }
+    lintSpec(value) {
+        LintingService.lintFile(value, this.OWASPEnabled).then((result) => {
+            if (result && !Array.isArray(result)) {
+                this.editor.setMarkers([result]);
+                this.problemBag?.set(DocumentProblems, [result]);
+                this.problemList.problems = [result];
+                this.problems = [result];
+                this.problemsOverview.problems = this.problemList.problemItems;
+            }
+            if (result && Array.isArray(result)) {
+                this.editor.setMarkers(result);
+                this.problemBag?.set(DocumentProblems, result);
+                this.problemList.problems = result;
+                this.problems = result;
+                this.problemsOverview.problems = this.problemList.problemItems;
+            }
+            // update the overview statistics
+            LintingService.fetchStatistics().then((result) => {
+                this.problemsOverview.statistics = result;
+                this.diagnosticBag?.set(DiagnosticBag, result);
+                if (result?.remainingCredit <= 10) {
+                    this.statusBar.callsRemaining = result.remainingCredit;
+                    this.statusBar.visible = true;
+                    console.warn("You are running low on credit, you will need to authenticate soon. " +
+                        "" + result.remainingCredit + " credits remaining.");
+                }
+            }).catch((e) => {
+                console.error("statistics service is down");
+                this.platformUnavailable(e);
+            });
+        }).catch((e) => {
+            this.platformUnavailable(e);
+            console.error("so sorry, the doctor cannot see you right now, the clinic is closed.");
+            if (e) {
+                console.error(e.detail);
+                if (e.instance === 'https://pb33f.io/errors/no-credit-remaining') {
+                    this.statusBar.callsRemaining = 0;
+                    this.statusBar.visible = true;
+                }
+            }
+        });
+    }
+    platformUnavailable(error) {
+        if (!this.unavailable) {
+            this.errorBanner.errorTitle = "The doctor is out.";
+            if (!error) {
+                this.errorBanner.errorMessage = "The clinic is <strong>closed!</strong> " +
+                    "The doctor is currently unavailable" +
+                    " because there is no response from the platform.";
+            }
+            else {
+                this.errorBanner.errorMessage = "The clinic is <strong>closed!</strong> " +
+                    "The doctor is currently unavailable because " + error.detail;
+            }
+            this.errorBanner.visible = true;
+            this.unavailable = true;
+            this.problemsOverview.unavailable = true;
+            this.tabGroup.show(ActiveView.Overview);
+        }
+    }
+    specClicked(event) {
+        this.detailsDrawer.close();
+        for (let i = 0; i < this.problems?.length; i++) {
+            if (this.problems[i].startLineNumber === event.detail.line) {
+                this.problemList.lineClicked(event.detail.line, true);
+                this.tabGroup.show(ActiveView.Problems);
+                break;
+            }
+        }
+    }
+    problemClicked(event) {
+        this.editor.editor?.revealLineInCenter(event.detail.problem.line);
+        this.editor.editor?.setPosition({
+            lineNumber: event.detail.problem.line,
+            column: event.detail.problem.column
+        });
+        this.detailsDrawer.close();
+        if (!event.detail.launchedFromProblems) {
+            this.problemList.lineClicked(event.detail.problem.problemObject.startLineNumber);
+        }
+        this.tabGroup.show(ActiveView.Problems);
+    }
+    loadState() {
+        LintingService.doctorEndpoint = this.doctorEndpoint;
+        this.docBag = this.bagManager.getBag(DoctorDocumentBag);
+        if (this.docBag) {
+            const doc = this.docBag.get(DefaultDocument);
+            if (doc) {
+                this.editor.setValue(doc, true);
+            }
+        }
+        this.problemBag = this.bagManager.getBag(DocumentProblems);
+        if (this.problemBag) {
+            const markers = this.problemBag.get(DocumentProblems);
+            if (markers) {
+                this.problems = markers;
+                this.editor.setMarkers(markers);
+                for (let i = 0; i < markers.length; i++) {
+                    markers[i] = Problem.reconstruct(markers[i]);
+                }
+                this.problemList.problems = markers;
+                this.problemsOverview.problems = this.problemList.problemItems;
+            }
+        }
+        this.howToFixBag = this.bagManager.getBag(HowToFixBag);
+        this.diagnosticBag = this.bagManager.getBag(DiagnosticBag);
+        if (this.diagnosticBag) {
+            const stats = this.diagnosticBag.get(DiagnosticBag);
+            if (stats) {
+                this.problemsOverview.statistics = stats;
+            }
+        }
+        this.OWASPBag = this.bagManager.getBag(OWASPBag);
+        if (this.OWASPBag) {
+            this.OWASPEnabled = this.OWASPBag.get(OWASPBag);
+            this.owaspSwitch.checked = this.OWASPEnabled;
+        }
+        // refresh state for how to fix.
+        this.fetchDocs();
+    }
+    fetchDocs() {
+        // the first this we need to do is start a session
+        LintingService.startSession().then((session) => {
+            this.session = session;
+            LintingService.fetchAllHowToFix().then((result) => {
+                if (result) {
+                    result.forEach((howToFix) => {
+                        this.howToFixBag?.set(howToFix.ruleId, howToFix);
+                    });
+                }
+            }).catch((e) => {
+                this.platformUnavailable(e);
+                console.error("documentation service is down");
+            });
+            this.ruleDocsBag = this.bagManager.getBag(RuleDocumentationBag);
+            // populate docs via worker.
+            this.ruleDocsWorker.addEventListener("message", (event) => {
+                const data = event.data;
+                if (data) {
+                    data.forEach((doc) => {
+                        this.ruleDocsBag?.set(doc.ruleId, doc);
+                    });
+                }
+            });
+            this.ruleDocsWorker.postMessage({ start: true, endpoint: this.doctorEndpoint });
+        }).catch((e) => {
+            this.platformUnavailable(e);
+            console.error("cannot start session");
+        });
+    }
+    specChanged(event) {
+        if (this.docBag) {
+            this.docBag.set(DefaultDocument, event.detail.content);
+        }
+        clearTimeout(this.bounceId);
+        this.bounceId = window.setTimeout(() => {
+            this.lintSpec(event.detail.content);
+        }, this.debounceTime);
+    }
+    toggleOWASP() {
+        this.OWASPEnabled = this.owaspSwitch.checked;
+        this.OWASPBag?.set(OWASPBag, this.OWASPEnabled);
+        if (this.docBag) {
+            const doc = this.docBag.get(DefaultDocument);
+            this.lintSpec(doc);
+        }
+    }
+    render() {
+        let overlay = html ``;
+        if (this.unavailable) {
+            overlay = html `
+                <div class="overlay" @click="return false"></div>`;
+        }
+        return html `
+            <div class="doctor">
+                ${this.errorBanner}
+                ${overlay}
+                <sl-split-panel class="split-panel ${this.unavailable ? 'unavailable' : ''}">
+                    <sl-icon slot="divider" name="grip-vertical"></sl-icon>
+                    <div class="editor" slot="start">
+                        ${this.detailsDrawer}
+                        ${this.editor}
+                    </div>
+                    <div class="problems" slot="end">
+                        <sl-tab-group class="tab-group ">
+                            <sl-tab slot="nav" panel="overview" class="tab" id="overviewPanel">Overview</sl-tab>
+                            <sl-tab slot="nav" panel="problems" class="tab" id="problemsPanel">Problems</sl-tab>
+                            <sl-tab slot="nav" panel="ruleset" class="tab" id="rulesetPanel">Rules</sl-tab>
+                            <sl-tab-panel name="overview" class="tab-panel">${this.problemsOverview}</sl-tab-panel>
+                            <sl-tab-panel name="problems" class="tab-panel">${this.problemList}</sl-tab-panel>
+                            <sl-tab-panel name="ruleset" class="tab-panel">
+                                <div class="ruleset">
+                                <pb33f-attention-box type="info" headerText="Manage RuleSets">
+                                    Feature coming soon, you will be able to manage your ruleset(s) here.
+                                </pb33f-attention-box>
+                                    <sl-switch size="small" @sl-change="${this.toggleOWASP}" id="owasp">Enable <a href="https://quobix.com/vacuum/rulesets/owasp/">OWASP</a>
+                                        Rules</a>?</sl-switch>
+                                </div>
+                            </sl-tab-panel>
+                        </sl-tab-group>
+                    </div>
+                </sl-split-panel>
+                ${this.statusBar}
+            </div>
+        `;
+    }
+};
+TheDoctor.styles = [theDoctorCss];
+__decorate([
+    query('#overviewPanel')
+], TheDoctor.prototype, "overviewPanel", void 0);
+__decorate([
+    query('#problemsPanel')
+], TheDoctor.prototype, "problemsPanel", void 0);
+__decorate([
+    query('sl-tab-group')
+], TheDoctor.prototype, "tabGroup", void 0);
+__decorate([
+    query('sl-switch#owasp')
+], TheDoctor.prototype, "owaspSwitch", void 0);
+__decorate([
+    property({ type: Boolean })
+], TheDoctor.prototype, "unavailable", void 0);
+TheDoctor = __decorate([
+    customElement("pb33f-doctor")
+], TheDoctor);
+export { TheDoctor };