@pb33f/cowboy-components 0.1.16 → 0.2.0

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

@@ -0,0 +1,575 @@
+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/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 { html, LitElement } from "lit";
+import manageRulesetCss from "./manage-ruleset.css.js";
+import { RuleComponent } from "./rule.js";
+import buttonCss from "../../css/button.css.js";
+import spinnerCss from "../../css/spinner.css.js";
+import { AddToast, CustomRulesetEnabled, ExportRuleset, RulesetDirty, RulesetSaved } from "../../events/doctor.js";
+import modalCss from "../../css/modal.css.js";
+import { RulesetService } from "../../services/ruleset-service.js";
+import { ToastType } from "../../model/toast.js";
+import radioGroupsCss from "../../css/radiogroups.css.js";
+const defaultRuleset = "default";
+const owaspRuleset = "owasp";
+const allRuleset = "all";
+const customRuleset = "custom";
+let ManageRuleset = class ManageRuleset extends LitElement {
+    constructor() {
+        super();
+        this._defaultRules = [];
+        this._owaspRules = [];
+        this._allRules = [];
+        this._customRules = [];
+        this._rulesetConfig = { ruleMapping: new Map(), allRulesSwitch: true };
+        this.currentRuleset = defaultRuleset;
+        this.allRulesEnabled = true;
+        // @ts-ignore
+        this.addEventListener(RulesetDirty, this.dirty.bind(this));
+        this.addEventListener(RulesetSaved, this.rulesetUpdated.bind(this));
+    }
+    rulesetUpdated() {
+        this.saveButton.disabled = true;
+        this.saveButton.style.display = 'none';
+        this.dirtyRules = false;
+    }
+    exportRuleset() {
+        this.dispatchEvent(new CustomEvent(ExportRuleset, {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    compileRuleset() {
+        const rules = new Map();
+        const allRules = new Map();
+        // extract rules from components
+        this._activeRuleset.forEach(ruleComponent => {
+            const rule = ruleComponent.rule;
+            if (ruleComponent.ruleActive) {
+                ruleComponent.rule.active = true;
+                // have to convert the rule action function map into an object
+                if (rule && rule.then) {
+                    if (Array.isArray(rule.then)) {
+                        for (const action of rule.then) {
+                            if (action.functionOptions && action.functionOptions instanceof Map) {
+                                action.functionOptions = Object.fromEntries(action.functionOptions);
+                            }
+                        }
+                    }
+                    else {
+                        if (rule.then.functionOptions) {
+                            if (rule.then.functionOptions && rule.then.functionOptions instanceof Map) {
+                                rule.then.functionOptions = Object.fromEntries(rule.then.functionOptions);
+                            }
+                        }
+                    }
+                }
+                rules.set(ruleComponent.rule.id, rule);
+            }
+            allRules.set(ruleComponent.rule.id, rule);
+        });
+        const ruleset = { rules: Object.fromEntries(rules) };
+        const compiledRules = JSON.stringify(ruleset);
+        RulesetService.applyRuleset(compiledRules).then((rs) => {
+            this.clearRuleProblems();
+            this.rulesetSaved({ rules: allRules }, rs);
+        }).catch((error) => {
+            const e = error;
+            this.dispatchEvent(new CustomEvent(AddToast, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    toast: {
+                        id: crypto.randomUUID(),
+                        title: `Cannot save / apply ruleset`,
+                        type: ToastType.ERROR,
+                        body: `${e.detail}`,
+                    }
+                }
+            }));
+            if (e.body && e.body.length > 0) {
+                this.processBadRules(e.body);
+            }
+        });
+    }
+    clearRuleProblems() {
+        this._activeRuleset.forEach((ruleComp) => {
+            if (ruleComp) {
+                ruleComp.error = false;
+                ruleComp.ruleErrorFunctionOption = [];
+                ruleComp.ruleErrorFunction = [];
+            }
+        });
+    }
+    processBadRules(ruleError) {
+        ruleError.forEach((err) => {
+            const rule = this._activeRuleset.find(r => r.ruleId === err.ruleId);
+            if (rule) {
+                rule.error = true;
+                rule.ruleErrorMessage = [err.ruleError];
+                if (err.function) {
+                    rule.ruleErrorFunction = [err.function];
+                }
+                if (err.functionOption) {
+                    rule.ruleErrorFunctionOption = [err.functionOption];
+                }
+                rule.requestUpdate();
+            }
+        });
+    }
+    rulesetSaved(ruleset, returnedRuleset) {
+        this.dispatchEvent(new CustomEvent(RulesetSaved, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                rules: ruleset,
+                config: this._rulesetConfig,
+                returnedRules: returnedRuleset
+            }
+        }));
+        this.exportButton.style.display = 'inline-block';
+        this.exportButton.disabled = false;
+        this.dispatchEvent(new CustomEvent(AddToast, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                toast: {
+                    id: crypto.randomUUID(),
+                    title: `Ruleset saved / applied`,
+                    type: ToastType.INFO,
+                    body: `Ruleset has been saved and applied`,
+                }
+            }
+        }));
+    }
+    dirty(ruleEvent) {
+        if (!this.dirtyRules) {
+            this.dirtyRules = true;
+            this.saveButton.style.display = 'inline-block';
+            this.saveButton.disabled = false;
+            this.exportButton.style.display = 'none';
+            this.exportButton.disabled = true;
+        }
+        if (ruleEvent?.detail.rule) {
+            this.copyActiveRulesetCustom(ruleEvent.detail.rule);
+        }
+        else {
+            this.copyActiveRulesetCustom();
+        }
+    }
+    copyActiveRulesetCustom(submittedRule) {
+        const customRules = [];
+        this._activeRuleset.forEach(rule => {
+            if (submittedRule && rule.ruleId === submittedRule.rule.id) {
+                submittedRule.custom = true;
+                customRules.push(submittedRule);
+            }
+            else {
+                rule.custom = true;
+                customRules.push(rule);
+            }
+        });
+        this._activeRuleset = customRules;
+        this._customRules = customRules;
+        // switch to custom ruleset
+        this.rulesetSelector.value = customRuleset;
+        this.customRulesetSelector.disabled = false;
+        this.currentRuleset = customRuleset;
+        // iterate through active ruleset and set if the active flag is true, if it is, add it to the config
+        let config = this.buildConfig();
+        this._rulesetConfig = config;
+        this.dispatchEvent(new CustomEvent(CustomRulesetEnabled, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                rules: customRules,
+                ruleConfig: config
+            }
+        }));
+        this.requestUpdate();
+    }
+    buildConfig() {
+        let config = { ruleMapping: new Map(), allRulesSwitch: this.allRulesEnabled };
+        this._activeRuleset.forEach(rule => {
+            if (rule.ruleActive) {
+                config.ruleMapping.set(rule.ruleId, true);
+            }
+            else {
+                config.ruleMapping.set(rule.ruleId, false);
+            }
+        });
+        return config;
+    }
+    // private resetConfig() {
+    //     let config: RuleConfig = {ruleMapping: new Map<string, boolean>(), allRulesSwitch: true};
+    //     this._allRules.forEach(rule => {
+    //         config.ruleMapping.set(rule.ruleId, true);
+    //     });
+    //     return config;
+    // }
+    toggleAllRules() {
+        let config = this._rulesetConfig;
+        if (!config || !config.ruleMapping) {
+            config = { ruleMapping: new Map(), allRulesSwitch: true };
+        }
+        else {
+            config.allRulesSwitch = !this.allRulesEnabled;
+        }
+        if (this.allRulesEnabled) {
+            this._activeRuleset.forEach(rule => {
+                config?.ruleMapping.set(rule.ruleId, false);
+                rule.ruleActive = false;
+            });
+            config.allRulesSwitch = false;
+        }
+        else {
+            this._activeRuleset.forEach(rule => {
+                config?.ruleMapping.set(rule.ruleId, true);
+                rule.ruleActive = true;
+            });
+            config.allRulesSwitch = true;
+        }
+        this._rulesetConfig = config;
+        this.allRulesEnabled = !this.allRulesEnabled;
+        this.rulesetSelector.value = customRuleset;
+        this.customRulesetSelector.disabled = false;
+        this.dirty();
+    }
+    set defaultRuleset(rs) {
+        this._defaultRuleset = rs;
+    }
+    set owaspRuleset(rs) {
+        this._owaspRuleset = rs;
+    }
+    set allRuleset(rs) {
+        this._allRuleset = rs;
+    }
+    set customRuleset(rs) {
+        this._customRuleset = rs;
+        this.customRulesetSelector.disabled = false;
+        this.rulesetSelector.value = customRuleset;
+        this.buildCustomRuleset(false);
+        this.currentRuleset = customRuleset;
+    }
+    set customRulesetManual(rs) {
+        this._customRuleset = rs;
+        this.customRulesetSelector.disabled = false;
+        this.rulesetSelector.value = customRuleset;
+        this.buildCustomRuleset(true);
+        this.currentRuleset = customRuleset;
+    }
+    set rulesetConfig(config) {
+        this._rulesetConfig = config;
+        this.allRulesEnabled = config.allRulesSwitch;
+        this.requestUpdate();
+    }
+    set functions(funcs) {
+        this._functions = funcs;
+    }
+    buildCustomRuleset(dirty = true) {
+        if (this._customRuleset) {
+            this._customRules = [];
+            this._customRuleset.rules.forEach((rule, ruleId) => {
+                const builtIn = this._allRules.find(r => r.ruleId === ruleId);
+                let customRule = false;
+                if (!builtIn) {
+                    customRule = true;
+                }
+                this.buildRule(ruleId, rule, this._customRules, customRule);
+            });
+            this._activeRuleset = this._customRules;
+            this.enableOrDisableRules();
+            if (dirty)
+                this.dirty();
+        }
+    }
+    changeActiveRuleset(event) {
+        // if (!this.customWipeDialog.open) {
+        const button = event.target;
+        if (this.currentRuleset == customRuleset) {
+            this.confirmWipeButton.loading = false;
+            this.customWipeDialog.show().then(() => {
+                this.confirmNewRuleset = button.value; // what we're changing to.
+                // this.requestUpdate(); // render modal
+                return;
+            });
+        }
+        else {
+            this.switchRuleset(button.value);
+            this.requestUpdate();
+        }
+    }
+    cancelCustomOverride() {
+        // this.confirmWipeActive = false;
+        this.customWipeDialog.hide();
+    }
+    confirmCustomOverride() {
+        this.confirmWipeButton.loading = true;
+        this.customWipeDialog.hide();
+        this.allRulesEnabled = true;
+        setTimeout(() => {
+            this.confirmWipeActive = false;
+            this.rulesetSelector.value = this.confirmNewRuleset;
+            this.switchRuleset(this.confirmNewRuleset);
+            this._rulesetConfig = null;
+            this.dispatchEvent(new CustomEvent(CustomRulesetEnabled, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    rules: [],
+                    ruleConfig: null
+                }
+            }));
+            this._customRules = [];
+            this.customRulesetSelector.disabled = true;
+            this.dirtyRules = false;
+            this.saveButton.style.display = 'none';
+            this.saveButton.disabled = true;
+            this.exportButton.style.display = 'none';
+            this.exportButton.disabled = true;
+            this.allRulesSwitch.checked = true;
+            this.enableOrDisableRules();
+            this.requestUpdate();
+        }, 250);
+    }
+    switchRuleset(button) {
+        switch (button) {
+            case defaultRuleset:
+                this._activeRuleset = this._defaultRules;
+                this.currentRuleset = defaultRuleset;
+                break;
+            case owaspRuleset:
+                this._activeRuleset = this._owaspRules;
+                this.currentRuleset = owaspRuleset;
+                break;
+            case allRuleset:
+                this._activeRuleset = this._allRules;
+                this.currentRuleset = allRuleset;
+                break;
+            case customRuleset:
+                this._activeRuleset = this._customRules;
+                this.currentRuleset = customRuleset;
+                break;
+        }
+    }
+    buildRulesets() {
+        this._defaultRules = [];
+        this._owaspRules = [];
+        this._allRules = [];
+        // this._customRules = [];
+        if (this._defaultRuleset) {
+            for (const ruleId in this._defaultRuleset.rules) {
+                const rule = this._defaultRuleset.rules[ruleId];
+                this.buildRule(ruleId, rule, this._defaultRules);
+            }
+        }
+        if (this._owaspRuleset) {
+            for (const ruleId in this._owaspRuleset.rules) {
+                const rule = this._owaspRuleset.rules[ruleId];
+                this.buildRule(ruleId, rule, this._owaspRules);
+            }
+        }
+        if (this._allRuleset) {
+            for (const ruleId in this._allRuleset.rules) {
+                const rule = this._allRuleset.rules[ruleId];
+                this.buildRule(ruleId, rule, this._allRules);
+            }
+        }
+        // if (this._customRuleset) {
+        //     for (const ruleId in this._customRuleset.rules) {
+        //         const rule = this._customRuleset.rules[ruleId];
+        //         this.buildRule(ruleId, rule, this._customRules);
+        //     }
+        // }
+        //if (this._customRules.length <= 0) {
+        this._activeRuleset = this._defaultRules;
+        //} else {
+        //   this._activeRuleset = this._customRules;
+        //}
+        // if there is no config, turn on all the rules, otherwise, turn on the rules in the config
+        this.requestUpdate();
+    }
+    enableOrDisableRules() {
+        if (this._rulesetConfig && this._rulesetConfig.ruleMapping.size > 0) {
+            this._rulesetConfig.ruleMapping.forEach((enabled, key) => {
+                const rule = this._activeRuleset.find(r => r.ruleId === key);
+                if (rule && !enabled) {
+                    rule.ruleActive = false;
+                }
+            });
+        }
+        else {
+            this._allRules.forEach(rule => {
+                rule.ruleActive = true;
+            });
+            this._owaspRules.forEach(rule => {
+                rule.ruleActive = true;
+            });
+            this._defaultRules.forEach(rule => {
+                rule.ruleActive = true;
+            });
+            this.allRulesEnabled = true;
+        }
+    }
+    buildRule(ruleId, rule, rules, custom = false) {
+        if (rule && rule.id && rule.id.length <= 0) {
+            rule.id = ruleId;
+        }
+        const ruleComponent = new RuleComponent(rule, ruleId, custom);
+        ruleComponent.addEventListener('sl-show', (event) => {
+            // @ts-ignore
+            const openedRule = event.target?.ruleId;
+            for (const r of rules) {
+                if (r.ruleId !== openedRule && r.open) {
+                    r.close();
+                }
+            }
+        });
+        if (custom) {
+            rules.unshift(ruleComponent);
+        }
+        else {
+            rules.push(ruleComponent);
+        }
+        return ruleComponent;
+    }
+    addCustomRule() {
+        const ruleId = `custom-rule-${this._activeRuleset.length}`;
+        const rule = {
+            id: ruleId,
+            description: "Custom Rule check if title is defined is defined",
+            message: "Please make sure there is a `title` section in the info object",
+            given: "$.info",
+            resolved: false,
+            severity: "info",
+            formats: ["oas3_1"],
+            category: { id: "validation", name: "Validation" },
+            then: [
+                {
+                    field: "title",
+                    function: "defined",
+                },
+            ]
+        };
+        const rc = this.buildRule(ruleId, rule, this._activeRuleset, true);
+        this.dirty(new CustomEvent(RulesetDirty, { detail: { rule: rc } }));
+        this.requestUpdate();
+        setTimeout(() => {
+            rc.show();
+        });
+    }
+    render() {
+        let selectAll = html ``;
+        let numRules = 0;
+        if (this._activeRuleset) {
+            numRules = this._activeRuleset.length;
+        }
+        if (numRules > 0) {
+            selectAll = html `
+                <div class="toggle-allcheck">
+                    <sl-switch size="small" @sl-change="${this.toggleAllRules}" ?checked="${this.allRulesEnabled}">
+                        Toggle all
+                        rules (${numRules})
+                    </sl-switch>
+                </div>
+            `;
+        }
+        let rules = html `
+            <div class="pb33f-loader">
+                <div class="spin"></div>
+                loading rules, please wait a few moments...
+            </div>
+        `;
+        if (this._activeRuleset) {
+            rules = this._activeRuleset;
+        }
+        return html `
+            <div class="ruleset">
+                <div class="ruleset-header">
+                    <sl-radio-group label="Select a ruleset" name="ruleset" value="default">
+                        <sl-radio-button value=${defaultRuleset} @sl-focus="${this.changeActiveRuleset}">Default
+                        </sl-radio-button>
+                        <sl-radio-button value=${owaspRuleset} @sl-focus="${this.changeActiveRuleset}">OWASP
+                        </sl-radio-button>
+                        <sl-radio-button value=${allRuleset} @sl-focus="${this.changeActiveRuleset}">All
+                        </sl-radio-button>
+                        <sl-radio-button value=${customRuleset} disabled id="custom-ruleset"
+                                         @sl-focus="${this.changeActiveRuleset}">Custom
+                        </sl-radio-button>
+                    </sl-radio-group>
+                    <div class="ruleset-controls">
+                        <sl-tooltip content="Add a custom rule" placement="bottom">
+                            <sl-icon-button @click="${this.addCustomRule}" name="plus-square" label="Add Custom Rule"
+                                            id="add-button">
+                            </sl-icon-button>
+                        </sl-tooltip>
+
+                        <sl-tooltip content="Export / download ruleset" placement="bottom">
+                            <sl-icon-button @click="${this.exportRuleset}"
+                                            disabled name="cloud-download" label="Export Ruleset" class="hidden"
+                                            id="export-button">
+                            </sl-icon-button>
+                        </sl-tooltip>
+                        <sl-tooltip content="Apply / save ruleset" placement="bottom">
+                            <sl-icon-button disabled name="floppy" label="Apply Ruleset" class="pulse hidden"
+                                            id="save-button" @click="${this.compileRuleset}">
+                            </sl-icon-button>
+                        </sl-tooltip>
+
+                    </div>
+                </div>
+                <div class="ruleset-body">
+                    ${selectAll}
+                    ${rules}
+                </div>
+            </div>
+            <sl-dialog id="confirm-custom-wipe" label="Reset Custom Rules?" class="dialog-overview"
+                       style="--width: 50vw">
+                <h3>You have customized your ruleset.</h3>
+
+                <p>Are you sure you want to switch to a built-in ruleset?</p>
+
+                <sl-button @click=${this.cancelCustomOverride} slot="footer" variant="primary" style="float: left">No!
+                    Cancel
+                </sl-button>
+                <sl-button id="confirm-override-wipe-button" @click=${this.confirmCustomOverride} slot="footer"
+                           variant="danger" class="danger">Yes, Reset
+                </sl-button>
+            </sl-dialog>
+        `;
+    }
+};
+ManageRuleset.styles = [modalCss, spinnerCss, buttonCss, radioGroupsCss, manageRulesetCss];
+__decorate([
+    query('#save-button')
+], ManageRuleset.prototype, "saveButton", void 0);
+__decorate([
+    query('#export-button')
+], ManageRuleset.prototype, "exportButton", void 0);
+__decorate([
+    query('sl-radio-group')
+], ManageRuleset.prototype, "rulesetSelector", void 0);
+__decorate([
+    query('#custom-ruleset')
+], ManageRuleset.prototype, "customRulesetSelector", void 0);
+__decorate([
+    query('sl-dialog#confirm-custom-wipe')
+], ManageRuleset.prototype, "customWipeDialog", void 0);
+__decorate([
+    query('sl-button#confirm-override-wipe-button')
+], ManageRuleset.prototype, "confirmWipeButton", void 0);
+__decorate([
+    query('sl-switch')
+], ManageRuleset.prototype, "allRulesSwitch", void 0);
+ManageRuleset = __decorate([
+    customElement('pb33f-manage-ruleset')
+], ManageRuleset);
+export { ManageRuleset };

package/dist/components/manage-ruleset/rule-action.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

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

@@ -0,0 +1,56 @@
+import { css } from "lit";
+export default css `
+    
+    sl-input {
+        margin-bottom: 10px;
+    }
+    
+    sl-select {
+        margin-bottom: 10px;
+        flex-grow: 2;
+    }
+    sl-button {
+        font-size: 1.2rem;
+        margin-bottom: 10px;
+        margin-top: 10px;
+    }
+    
+    .function-input {
+        display: flex;
+        
+    }
+    
+    .function-docs {
+        display: inline-block;
+        padding-left: 10px;
+        padding-top: 25px;
+        font-size: 0.8rem;
+    }
+
+    sl-select.error::part(form-control-label) {
+        color: var(--error-color);
+    }
+
+    sl-select.error::part(combobox) {
+        color: var(--error-color);
+        border: 1px solid var(--error-color);
+    }
+    
+    .function-options {
+        
+    }
+    
+    .description {
+        font-size: 0.7rem;
+    }
+
+    sl-button.danger {
+        font-size: 1.2rem;
+        float: right;
+        margin-bottom: 15px;
+    }
+    
+    hr {
+        clear: right;
+    }
+`;

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

@@ -0,0 +1,37 @@
+import { LitElement } from "lit";
+import "./function-option.js";
+import { RuleAction } from "../../model/vacuum_rule.js";
+import { RuleActionFunctionOptionRemovedEvent } from "../../events/doctor.js";
+import { RuleComponent } from "./rule.js";
+import { SlDialog, SlInput, SlSelect } from "@shoelace-style/shoelace";
+export declare class RuleActionComponent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    fieldInput: SlInput;
+    fieldFunction: SlSelect;
+    addFunctionOptionDialog: SlDialog;
+    error: boolean;
+    ruleErrorFunction: string;
+    ruleErrorFunctionOption: string;
+    ruleAction: RuleAction;
+    private FunctionsBag;
+    private FunctionsSchemaBag;
+    private bagManager;
+    private functions;
+    private functionOptions;
+    private functionSchemas;
+    private readonly ruleComponent;
+    private ruleFunctionSchema;
+    constructor(action: RuleAction, rule: RuleComponent);
+    buildFunctionOptions(): void;
+    changeField(): void;
+    changeFunction(): void;
+    dirty(): void;
+    functionOptionRemoved(evt: CustomEvent<RuleActionFunctionOptionRemovedEvent>): void;
+    viewFunctionDocs(): void;
+    addFunctionOption(key?: string, value?: string, desc?: string, removeable?: boolean, dirty?: boolean): void;
+    removeSelf(): void;
+    closeFunctionOption(): void;
+    openFunctionOptionDialog(): void;
+    addFunctionOptionProperty(prop: string, desc?: string): void;
+    render(): import("lit-html").TemplateResult<1>;
+}