@pb33f/cowboy-components 0.7.4 → 0.7.6

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

@@ -21,6 +21,7 @@ export declare class UploadArchiveComponent extends LitElement {
     fileSize: number;
     fileTooBig: boolean;
     noSpecFilesFound: boolean;
+    cannotParseSpecError: string;
     constructor();
     show(): void;
     hide(): void;

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

@@ -33,6 +33,13 @@ let UploadArchiveComponent = class UploadArchiveComponent extends LitElement {
     }
     hide() {
         this.visible = false;
+        this.file = null;
+        this.files = [];
+        this.fileSize = 0;
+        this.fileTooBig = false;
+        this.noSpecFilesFound = false;
+        this.cannotParseSpecError = '';
+        this.invalid = false;
         this.dialog?.hide();
     }
     handleFileChange(event) {
@@ -40,6 +47,7 @@ let UploadArchiveComponent = class UploadArchiveComponent extends LitElement {
         if (file) {
             this.noSpecFilesFound = false;
             // check if the file is over 5mb (which is too big for free tier)
+            // TODO: prompt user to auth, and then skip this check for authenticated users.
             if (file.size > 5242880) {
                 this.invalid = true;
                 this.fileName = file.name;
@@ -51,7 +59,13 @@ let UploadArchiveComponent = class UploadArchiveComponent extends LitElement {
             this.fileName = file.name;
             this.fileType = file.type;
             this.fileSize = file.size;
-            if (file.type === 'application/zip' || file.type === 'application/gzip' || file.type === 'application/x-gzip') {
+            if (file.type === 'application/zip' ||
+                file.type === 'application/zip-compressed' ||
+                file.type === 'application/x-zip' ||
+                file.type === 'multipart/zip' ||
+                file.type === 'application/x-zip-compressed' ||
+                file.type === 'application/gzip' ||
+                file.type === 'application/x-gzip') {
                 this.file = file;
                 this.invalid = false;
                 const formData = new FormData();
@@ -59,10 +73,9 @@ let UploadArchiveComponent = class UploadArchiveComponent extends LitElement {
                 ModelService.uploadArchive(formData).then((response) => {
                     // count the number of openapi files, if there is only one - automatically select it to avoid
                     // a step. Thanks to @francois for the suggestion.
-                    this.files = response.files;
                     let count = 0;
                     let found = [];
-                    this.files.forEach((file) => {
+                    response.files.forEach((file) => {
                         if (file.isOpenAPI) {
                             count++;
                             found.push(file);
@@ -77,6 +90,7 @@ let UploadArchiveComponent = class UploadArchiveComponent extends LitElement {
                         this.selectFile(found[0].name);
                         return;
                     }
+                    this.files = found;
                 }).catch((error) => {
                     console.error(error);
                 });
@@ -100,7 +114,8 @@ let UploadArchiveComponent = class UploadArchiveComponent extends LitElement {
             this.files = [];
             this.hide();
         }).catch((error) => {
-            console.error(error);
+            this.invalid = true;
+            this.cannotParseSpecError = error.detail;
         });
     }
     fetchUrl() {
@@ -155,9 +170,9 @@ let UploadArchiveComponent = class UploadArchiveComponent extends LitElement {
         `;
     }
     render() {
-        let files = html ``;
-        if (this.files.length > 0) {
-            files = html `
+        let renderFiles = html ``;
+        if (this.files.length > 0 && !this.cannotParseSpecError) {
+            renderFiles = html `
                 <div class="files">
                     <h4>Select the Entry Document</h4>
                     <p>
@@ -179,7 +194,7 @@ let UploadArchiveComponent = class UploadArchiveComponent extends LitElement {
                 </div>`;
         }
         if (this.noSpecFilesFound) {
-            files = html ` <p class="invalid"><strong>No OpenAPI files found in archive!</strong></p>
+            renderFiles = html ` <p class="invalid"><strong>No OpenAPI files found in archive!</strong></p>
             <p class="invalid">The doctor was unable to detect any OpenAPI YAML or JSON files in the archive you selected.</p>
             <p>Try another file, or check your archive.</p>`;
         }
@@ -214,17 +229,25 @@ let UploadArchiveComponent = class UploadArchiveComponent extends LitElement {
                         <label for="fileInput" class="upload-archive-button">
                             Upload .zip or .tar.gz
                         </label>
-                        <input ${this.invalid ? 'invalid-file invalid' : ''}" type="file" id="fileInput"
-                            @change="${this.handleFileChange}"/>
+                        <input ${this.invalid ? 'invalid-file invalid' : ''}" type="file" id="fileInput" @change="${this.handleFileChange}"/>
 
-                        ${this.invalid && !this.fileTooBig ? html `
+                        ${this.invalid && this.cannotParseSpecError != '' ? html `
+                            <p class="invalid">Oh dear, '<strong>${this.fileName}</strong>' is very sick.</p>
+                            <p class="invalid">I'm unable to proceed with this file:
+                                <br/>
+                                <br/>
+                                ${this.cannotParseSpecError}
+                            </p>
+                        ` : ''}
+                        
+                        ${this.invalid && !this.fileTooBig && this.cannotParseSpecError == '' ? html `
                             <p class="invalid">'<strong>${this.fileName}</strong>' has a type of
                                 '<strong>${this.fileType}</strong>'
                                 which is an invalid file type.</p>
                             <p class="invalid">Please upload a <strong>valid</strong> zip archive or a tarball.</p>
                         ` : ''}
 
-                        ${this.invalid && this.fileTooBig ? html `
+                        ${this.invalid && this.fileTooBig && this.cannotParseSpecError == '' ? html `
                             <p class="invalid">'<strong>${this.fileName}</strong>' is too big!
                                 '<strong>
                                     <sl-format-bytes value="${this.fileSize}"></sl-format-bytes>
@@ -238,7 +261,7 @@ let UploadArchiveComponent = class UploadArchiveComponent extends LitElement {
                     </div>
                 </div>
 
-                ${files}
+                ${renderFiles}
                 <sl-button slot="footer" variant="primary" @click="${this.hide}">Close</sl-button>
             </sl-dialog>
         `;

package/dist/controllers/auth-controller.d.ts

@@ -0,0 +1,25 @@
+import { AuthenticationMeta } from "../events/doctor.js";
+import { AuthenticationState } from "../model/auth.js";
+import { Session } from "../model/session.js";
+export declare class AuthController extends EventTarget {
+    private static _instance;
+    static getInstance(): AuthController | null;
+    doctorEndpoint: string;
+    state: AuthenticationState | null;
+    authenticated: boolean;
+    urlCapture: string | null;
+    session: Session;
+    sessionCallback: Function;
+    startSessionAutomatically: boolean;
+    brokerStarted: boolean;
+    hosts: any[];
+    callbackIdx: number;
+    constructor(host: any, sessionCallback?: Function, autoStart?: boolean);
+    start(): void;
+    private startSession;
+    associateBroker(brokerId: string): Promise<boolean>;
+    authGithub(e: CustomEvent<AuthenticationMeta>): void;
+    logout(e: CustomEvent<AuthenticationMeta>): void;
+    private notifyStateChange;
+    checkState(): Promise<AuthenticationState>;
+}

package/dist/controllers/auth-controller.js

@@ -0,0 +1,154 @@
+import { AuthenticationGithubRequested, AuthenticationStateChange, LogoutRequested, NukeWorkspaceEvent, StartSessionFailed } from "../events/doctor.js";
+import { AuthService } from "../services/auth-service.js";
+import { HeaderService } from "../services/header-service";
+export class AuthController extends EventTarget {
+    static getInstance() {
+        const t = AuthController._instance;
+        if (t) {
+            return t;
+        }
+        return null;
+    }
+    constructor(host, sessionCallback, autoStart = false) {
+        super();
+        if (AuthController._instance) {
+            const t = AuthController._instance;
+            t.hosts.push(host);
+            if (sessionCallback) {
+                t.sessionCallback = sessionCallback;
+                t.callbackIdx = t.hosts.length - 1;
+            }
+            t.startSessionAutomatically = autoStart;
+            t.brokerStarted = false;
+            t.start();
+            return t;
+        }
+        this.doctorEndpoint = 'https://doctor.pb33f.io';
+        const sessionEndpoint = sessionStorage.getItem("doctor-endpoint");
+        if (sessionEndpoint) {
+            this.doctorEndpoint = sessionEndpoint;
+        }
+        AuthService.doctorEndpoint = this.doctorEndpoint;
+        if (sessionCallback) {
+            this.sessionCallback = sessionCallback;
+        }
+        this.startSessionAutomatically = autoStart;
+        this.brokerStarted = false;
+        this.hosts = [host];
+        if (sessionCallback) {
+            this.start();
+        }
+        // cache the one and only instance
+        AuthController._instance = this;
+        // @ts-ignore
+        window.addEventListener(AuthenticationGithubRequested, this.authGithub.bind(this));
+        // @ts-ignore
+        window.addEventListener(LogoutRequested, this.logout.bind(this));
+    }
+    start() {
+        if (!this.brokerStarted) {
+            const startBroker = () => {
+                this.brokerStarted = true;
+                this.startSession().then((session) => {
+                    this.session = session;
+                    if (this.sessionCallback) {
+                        // call back if defined.
+                        this.sessionCallback.call(this.hosts[this.callbackIdx], session);
+                        this.hosts[this.callbackIdx].requestUpdate();
+                    }
+                }).catch((err) => {
+                    console.error("something went wrong with starting session", err);
+                    this.dispatchEvent(new Event(StartSessionFailed));
+                });
+            };
+            this.checkState().then((state) => {
+                this.authenticated = true;
+                this.state = state;
+                this.hosts.forEach(host => {
+                    host.requestUpdate();
+                });
+                startBroker();
+                if (this.urlCapture) {
+                    const c = this.urlCapture;
+                    this.urlCapture = null;
+                    window.location.href = c;
+                }
+            }).catch(() => {
+                if (this.startSessionAutomatically) {
+                    startBroker();
+                }
+            });
+        }
+    }
+    async startSession() {
+        return new Promise(async (resolve, reject) => {
+            try {
+                const sessionJSON = await fetch(this.doctorEndpoint + '/start-session', {
+                    method: 'GET',
+                    credentials: 'include',
+                });
+                const session = await sessionJSON.json();
+                if (session.type && session.title && session.status) {
+                    reject();
+                }
+                resolve(session);
+            }
+            catch (e) {
+                reject({ detail: "the pb33f platform returned an error: " + e });
+            }
+        });
+    }
+    async associateBroker(brokerId) {
+        return new Promise(async (resolve, reject) => {
+            try {
+                const headers = HeaderService.buildDefaultHeaders(brokerId);
+                const sessionJSON = await fetch(this.doctorEndpoint + '/associate-broker', {
+                    method: 'GET',
+                    credentials: 'include',
+                    headers: headers
+                });
+                if (!sessionJSON.ok) {
+                    reject(false);
+                }
+                resolve(true);
+            }
+            catch (e) {
+                reject({ detail: "cannot associate broker with session" });
+            }
+        });
+    }
+    authGithub(e) {
+        if (e.detail.redirectURL != '') {
+            window.location.href = this.doctorEndpoint + '/auth/github/start?returnUrl=' + e.detail.redirectURL;
+        }
+        else {
+            window.location.href = this.doctorEndpoint + '/auth/github/start';
+        }
+    }
+    logout(e) {
+        AuthService.logout().then(() => {
+            if (e.detail.redirectURL != '') {
+                this.dispatchEvent(new CustomEvent(NukeWorkspaceEvent, {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        resetFiles: false
+                    }
+                }));
+            }
+        });
+    }
+    notifyStateChange(state) {
+        const event = new CustomEvent(AuthenticationStateChange, {
+            detail: { state }
+        });
+        this.dispatchEvent(event);
+    }
+    async checkState() {
+        return AuthService.checkAuth().then(state => {
+            this.notifyStateChange(state);
+            return state;
+        });
+    }
+}
+AuthController._instance = null;

package/dist/controllers/broker-controller.d.ts

@@ -0,0 +1,22 @@
+import { TheDoctor } from "../components/the-doctor/the-doctor.js";
+import { BusCallback, CommandResponse } from "@pb33f/ranch";
+export declare class BrokerController extends EventTarget {
+    private readonly specStreamChannel;
+    private readonly creditStreamChannel;
+    private readonly doctorServiceChannel;
+    private readonly busPort;
+    private readonly busHost;
+    private readonly busVersion;
+    private readonly bus;
+    readonly doc: TheDoctor;
+    readonly useTLS: boolean;
+    brokerConnectionId: string;
+    currentVersion: string;
+    constructor(doc: TheDoctor);
+    connectToBroker(): void;
+    doctorServiceHandler(): BusCallback<CommandResponse>;
+    whoAmI(): void;
+    startTheDoctor(): void;
+    specStreamHandler(): BusCallback<CommandResponse>;
+    creditStreamHandler(): BusCallback<CommandResponse>;
+}

package/dist/controllers/broker-controller.js

@@ -0,0 +1,107 @@
+import { DefaultDocument } from "../components/the-doctor/the-doctor.js";
+import { Command, CreditStreamChannel, DoctorServiceChannel, isBrokerResponse, QueuePrefix, SpecStreamChannel } from "../model/channels.js";
+export class BrokerController extends EventTarget {
+    constructor(doc) {
+        super();
+        this.useTLS = false;
+        this.doc = doc;
+        this.bus = doc.bus;
+        this.doctorServiceChannel = this.bus.createChannel(DoctorServiceChannel);
+        this.specStreamChannel = this.bus.createChannel(SpecStreamChannel);
+        this.creditStreamChannel = this.bus.createChannel(CreditStreamChannel);
+        this.bus.mapChannelToBrokerDestination(QueuePrefix + DoctorServiceChannel, DoctorServiceChannel);
+        this.doctorServiceChannel.subscribe(this.doctorServiceHandler());
+        // extract port from session storage.
+        this.busPort = sessionStorage.getItem("pb33f-doctor-port");
+        this.busHost = sessionStorage.getItem("pb33f-doctor-host");
+        if (!this.busPort) {
+            this.busPort = "443"; // default port
+        }
+        if (!this.busHost) {
+            this.busHost = "doctor.pb33f.io"; // default host
+        }
+        const useTLS = sessionStorage.getItem("pb33f-doctor-tls");
+        if (useTLS && useTLS == 'true') {
+            this.useTLS = true;
+        }
+    }
+    connectToBroker() {
+        let protocol = "ws://";
+        if (this.useTLS) {
+            protocol = "wss://";
+        }
+        // configure wiretap broker.
+        const config = {
+            brokerURL: protocol + this.busHost + ':' + this.busPort + '/ranch',
+            heartbeatIncoming: 0,
+            heartbeatOutgoing: 0,
+            onConnect: () => {
+                console.log("💊 Connected to the %cOpenAPI Doctor%c, we are ready to communicate.", 'background: #0d1117; color: #62C4FFFF; font-weight: bold', 'color: default');
+                this.bus.mapChannels();
+                this.whoAmI();
+            }
+        };
+        this.bus.connectToBroker(config);
+    }
+    doctorServiceHandler() {
+        return (msg) => {
+            if (msg.payload?.payload != null) {
+                if (isBrokerResponse(msg.payload.payload)) {
+                    this.brokerConnectionId = msg.payload.payload.broker;
+                    this.doc.authController.associateBroker(this.brokerConnectionId).then(() => {
+                        // check version from the server
+                        const version = msg.payload.payload.version;
+                        if (version !== "") {
+                            this.currentVersion = version;
+                        }
+                        const memVersion = localStorage.getItem("pb33f-doctor-version");
+                        if (memVersion) {
+                            if (this.currentVersion != memVersion) {
+                                this.doc.nukeWorkspaceHandler();
+                                return;
+                            }
+                        }
+                        else {
+                            localStorage.setItem("pb33f-doctor-version", this.currentVersion);
+                        }
+                        console.log("💊 Welcome to the clinic, the %cdoctor %cis ready to see you. [" + "v" + version + "]", 'color: #62C4FFFF; font-weight: bold', 'color: default');
+                        this.startTheDoctor();
+                    });
+                }
+            }
+        };
+    }
+    whoAmI() {
+        this.bus.publish({
+            destination: "/p/q/" + DoctorServiceChannel,
+            body: JSON.stringify({ request: Command.WhoAmI }),
+        });
+    }
+    startTheDoctor() {
+        this.specStreamChannel.subscribe(this.specStreamHandler());
+        this.creditStreamChannel.subscribe(this.creditStreamHandler());
+        this.bus.mapChannelToBrokerDestination(QueuePrefix + SpecStreamChannel, SpecStreamChannel);
+        this.bus.mapChannelToBrokerDestination(QueuePrefix + CreditStreamChannel, CreditStreamChannel);
+        this.doc.boostrap();
+    }
+    specStreamHandler() {
+        return (msg) => {
+            if (msg.payload?.payload != null) {
+                // base64 decode the payload and update the editor!
+                const decoded = atob(msg.payload.payload);
+                if (this.doc.docBag) {
+                    this.doc.docBag.set(DefaultDocument, decoded);
+                }
+                this.doc.editor?.setValue(decoded, true);
+                this.doc.requestUpdate();
+            }
+        };
+    }
+    creditStreamHandler() {
+        return (msg) => {
+            if (msg.payload?.payload != null) {
+                this.doc.creditTicker.credits = parseInt(msg.payload.payload);
+            }
+        };
+    }
+}

package/dist/controllers/diagnostic-controller.d.ts

@@ -0,0 +1,6 @@
+import { TheDoctor } from "../components/the-doctor/the-doctor.js";
+export declare class DiagnosticController extends EventTarget {
+    doc: TheDoctor;
+    constructor(doc: TheDoctor);
+    lintSpec(value: string, url?: string): void;
+}