@pb33f/cowboy-components 0.1.7 → 0.1.9

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

@@ -21,10 +21,14 @@ import { ProblemList } from "../../components/problem-list/problem-list.js";
 import { Problem } from "../../model/problem.js";
 import { ProblemDetailsDrawer, ProblemDrawerEventType } from "../problem-list/details-drawer.js";
 import RuleDocumentationWorker from "../../workers/rule-documentation.worker.js?worker";
-import theDoctorCss from "./the-doctor.css.js";
 import { ProblemsOverview } from "../problems-overview/problems-overview.js";
 import { ErrorBanner } from "../error-banner/error-banner.js";
 import { StatusBar } from "../the-doctor/status-bar.js";
+import { FeedbackComponent } from "./feedback.js";
+import theDoctorCss from "./the-doctor.css.js";
+import linksCss from "../../css/links.css";
+import { FeedbackService } from "@/services/feedback-service";
+import { ActivitySpinner } from "@/components/the-doctor/activity-spinner";
 export const DoctorDocumentBag = "pb33f-doctor-editor";
 export const HowToFixBag = "pb33f-doctor-howtofix";
 export const RuleDocumentationBag = "pb33f-doctor-ruledocs";
@@ -32,8 +36,9 @@ export const DiagnosticBag = "pb33f-doctor-diagnostic";
 export const OWASPBag = "pb33f-doctor-owasp";
 export const DefaultDocument = "document";
 export const DocumentProblems = "problems";
+export const DoctorEndpoint = "doctor-endpoint";
 let TheDoctor = class TheDoctor extends LitElement {
-    constructor() {
+    constructor(doctorEndpoint = "https://doctor.pb33f.io") {
         super();
         this.debounceTime = 300;
         this.bounceId = 0;
@@ -48,7 +53,16 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.statusBar = new StatusBar();
         this.ruleDocsWorker = new RuleDocumentationWorker();
         this.unavailable = false;
-        this.doctorEndpoint = "https://doctor.pb33f.io";
+        this.feedback = new FeedbackComponent();
+        this.activitySpinner = new ActivitySpinner();
+        // extract the doctor endpoint from session storage.
+        const sessionEndpoint = sessionStorage.getItem(DoctorEndpoint);
+        if (sessionEndpoint) {
+            this.doctorEndpoint = sessionEndpoint;
+        }
+        else {
+            this.doctorEndpoint = doctorEndpoint;
+        }
         // TODO: make this configurable
         this.editor.language = "yaml";
         //@ts-ignore
@@ -112,6 +126,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         }
     }
     lintSpec(value) {
+        this.activitySpinner.show();
         LintingService.lintFile(value, this.OWASPEnabled).then((result) => {
             if (result && !Array.isArray(result)) {
                 this.editor.setMarkers([result]);
@@ -131,6 +146,7 @@ let TheDoctor = class TheDoctor extends LitElement {
             LintingService.fetchStatistics().then((result) => {
                 this.problemsOverview.statistics = result;
                 this.diagnosticBag?.set(DiagnosticBag, result);
+                this.activitySpinner.hide();
                 if (result?.remainingCredit <= 10) {
                     this.statusBar.callsRemaining = result.remainingCredit;
                     this.statusBar.visible = true;
@@ -195,6 +211,7 @@ let TheDoctor = class TheDoctor extends LitElement {
     }
     loadState() {
         LintingService.doctorEndpoint = this.doctorEndpoint;
+        FeedbackService.doctorEndpoint = this.doctorEndpoint;
         this.docBag = this.bagManager.getBag(DoctorDocumentBag);
         if (this.docBag) {
             const doc = this.docBag.get(DefaultDocument);
@@ -232,9 +249,14 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.fetchDocs();
     }
     fetchDocs() {
+        this.activitySpinner.show();
         // the first this we need to do is start a session
         LintingService.startSession().then((session) => {
             this.session = session;
+            // bootstrap async
+            setTimeout(() => {
+                this.boostrap();
+            });
             LintingService.fetchAllHowToFix().then((result) => {
                 if (result) {
                     result.forEach((howToFix) => {
@@ -252,6 +274,7 @@ let TheDoctor = class TheDoctor extends LitElement {
                 if (data) {
                     data.forEach((doc) => {
                         this.ruleDocsBag?.set(doc.ruleId, doc);
+                        this.activitySpinner.hide();
                     });
                 }
             });
@@ -278,14 +301,37 @@ let TheDoctor = class TheDoctor extends LitElement {
             this.lintSpec(doc);
         }
     }
+    boostrap() {
+        if (this.editor.getValue() === '') {
+            LintingService.bootstrapEditor().then((result) => {
+                this.editor.setValue(result, true);
+                this.specChanged(new CustomEvent(EditorUpdated, {
+                    detail: {
+                        content: result
+                    }
+                }));
+            });
+        }
+    }
     render() {
         let overlay = html ``;
         if (this.unavailable) {
             overlay = html `
                 <div class="overlay" @click="return false"></div>`;
         }
+        let welcomeBox = html ` <pb33f-attention-box id="welcome" type="success" headerText="Welcome to the clinic, I am the OpenAPI doctor." closeable>
+                This is an <strong>early preview</strong> of a new <a href="https://pb33f.io">pb33f</a> product, built on top of our very own open source and free software. 
+                If you find a bug, please let us know in the <strong>feedback</strong> tab. <br/><br/>
+                <a href="#" @click="${this.closeWelcome}">[Close this message]</a>
+            </pb33f-attention-box>`;
+        const welcomeClosed = localStorage.getItem("pb33f-doctor-welcome");
+        if (welcomeClosed) {
+            welcomeBox = html ``;
+        }
         return html `
+            ${welcomeBox}
             <div class="doctor">
+                ${this.activitySpinner}
                 ${this.errorBanner}
                 ${overlay}
                 <sl-split-panel class="split-panel ${this.unavailable ? 'unavailable' : ''}">
@@ -299,17 +345,23 @@ let TheDoctor = class TheDoctor extends LitElement {
                             <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 slot="nav" panel="feedback" class="tab" id="feedbackPanel">Feedback</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>
+                                    <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-panel name="feedback" class="tab-panel">
+                                ${this.feedback}
+                            </sl-tab-panel>
                         </sl-tab-group>
                     </div>
                 </sl-split-panel>
@@ -317,8 +369,12 @@ let TheDoctor = class TheDoctor extends LitElement {
             </div>
         `;
     }
+    closeWelcome() {
+        this.welcomeBox.hide();
+        localStorage.setItem("pb33f-doctor-welcome", "closed");
+    }
 };
-TheDoctor.styles = [theDoctorCss];
+TheDoctor.styles = [theDoctorCss, linksCss];
 __decorate([
     query('#overviewPanel')
 ], TheDoctor.prototype, "overviewPanel", void 0);
@@ -331,6 +387,9 @@ __decorate([
 __decorate([
     query('sl-switch#owasp')
 ], TheDoctor.prototype, "owaspSwitch", void 0);
+__decorate([
+    query('pb33f-attention-box#welcome')
+], TheDoctor.prototype, "welcomeBox", void 0);
 __decorate([
     property({ type: Boolean })
 ], TheDoctor.prototype, "unavailable", void 0);

package/dist/cowboy-components.d.ts

@@ -14,6 +14,7 @@ import './components/changelog/release.js';
 import './components/attention-box/attention-box.js';
 import './components/render-operation-path/render-operation-path.js';
 import './components/render-json-path/render-json-path.js';
+import './components/footer/footer.js';
 import './components/problem-list/problem-list.js';
 import './components/problem-list/problem-item.js';
 import './components/the-doctor/the-doctor.js';

package/dist/cowboy-components.js

@@ -14,6 +14,7 @@ import './components/changelog/release.js';
 import './components/attention-box/attention-box.js';
 import './components/render-operation-path/render-operation-path.js';
 import './components/render-json-path/render-json-path.js';
+import './components/footer/footer.js';
 // problems
 import './components/problem-list/problem-list.js';
 import './components/problem-list/problem-item.js';