@pb33f/cowboy-components 0.7.18 → 0.8.0

package/dist/components/github/github-workspace-view.js

@@ -0,0 +1,525 @@
+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 { html, LitElement, nothing } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+import { GitHubAttachRepository, GitHubClaimRepository, GitHubInstallationsLoaded, GitHubRefreshInstallations, GitHubRefreshRepositories, GitHubRepositoriesLoaded, GitHubRepositoryAttached, GitHubRepositoriesAsync, GitHubInstallationsAsync, GitHubCacheLoaded, ImportedRepoFileHoverOver, ImportedRepoFileHoverOut } from "../../events/doctor.js";
+import listsCss from "../../css/lists.css.js";
+import buttonCss from "../../css/button.css.js";
+import githubViewCss from "./github-workspace-view.css.js";
+import tooltipCss from "../../css/tooltip.css.js";
+import { FilenameColorizer } from "../../helpers/filename-colorizer.js";
+import { DoctorIcon } from "../model-icon/doctor-icon.js";
+import { FileSizeFormatter } from "../../helpers/file-size-formatter.js";
+import badgesCss from "../../css/badges.css.js";
+import "../indeterminate-loader/indeterminate-loader.js";
+import '@shoelace-style/shoelace/dist/components/relative-time/relative-time.js';
+// Constants
+const ICON_SIZE = 20;
+const SHA_DISPLAY_LENGTH = 6;
+const PREVIEW_GRID_COLUMNS = '150px 250px';
+const PREVIEW_WIDTH = '400px';
+const LOADER_HEIGHT = 28;
+const LOADER_BLOCK_SIZE = 10;
+const LOADER_SPEED = 1;
+const CYCLE_DURATION_MULTIPLIER = 1000;
+const CYCLE_DURATION_OFFSET = 100;
+const HOVER_DEBOUNCE_DELAY = 20; // milliseconds
+let GitHubWorkspaceView = class GitHubWorkspaceView extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.installations = [];
+        this.repositories = [];
+        this.refreshing = false;
+        this.importingFiles = new Set(); // Track files being imported by their path
+        this.workspaceReadOnly = false;
+        // Track loading states separately
+        this.installationsLoading = false;
+        this.repositoriesLoading = false;
+        // Debounce timers
+        this.hoverDebounceTimers = new Map();
+        // Bound event handlers to ensure proper cleanup
+        this.boundHandleInstallationsLoaded = this.handleInstallationsLoaded.bind(this);
+        this.boundHandleRepositoriesLoaded = this.handleRepositoriesLoaded.bind(this);
+        this.boundHandleInstallationsAsync = this.handleInstallationsAsync.bind(this);
+        this.boundHandleRepositoriesAsync = this.handleRepositoriesAsync.bind(this);
+        this.boundHandleRepositoryAttached = this.handleRepositoryAttached.bind(this);
+        this.boundHandleCacheLoaded = this.handleCacheLoaded.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupEventListeners();
+    }
+    firstUpdated() {
+        // Initialization is now handled by the parent WorkspacesView
+        // to ensure proper timing and avoid race conditions
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListeners();
+        // Clear all pending hover timers
+        this.hoverDebounceTimers.forEach(timerId => clearTimeout(timerId));
+        this.hoverDebounceTimers.clear();
+    }
+    setupEventListeners() {
+        this.githubController.addEventListener(GitHubInstallationsLoaded, this.boundHandleInstallationsLoaded);
+        this.githubController.addEventListener(GitHubRepositoriesLoaded, this.boundHandleRepositoriesLoaded);
+        this.githubController.addEventListener(GitHubInstallationsAsync, this.boundHandleInstallationsAsync);
+        this.githubController.addEventListener(GitHubRepositoriesAsync, this.boundHandleRepositoriesAsync);
+        this.githubController.addEventListener(GitHubRepositoryAttached, this.boundHandleRepositoryAttached);
+        this.githubController.addEventListener(GitHubCacheLoaded, this.boundHandleCacheLoaded);
+    }
+    removeEventListeners() {
+        this.githubController.removeEventListener(GitHubInstallationsLoaded, this.boundHandleInstallationsLoaded);
+        this.githubController.removeEventListener(GitHubRepositoriesLoaded, this.boundHandleRepositoriesLoaded);
+        this.githubController.removeEventListener(GitHubInstallationsAsync, this.boundHandleInstallationsAsync);
+        this.githubController.removeEventListener(GitHubRepositoriesAsync, this.boundHandleRepositoriesAsync);
+        this.githubController.removeEventListener(GitHubRepositoryAttached, this.boundHandleRepositoryAttached);
+        this.githubController.removeEventListener(GitHubCacheLoaded, this.boundHandleCacheLoaded);
+    }
+    handleInstallationsLoaded(event) {
+        this.installations = event.detail;
+        this.installationsLastRefreshed = this.githubController.getInstallationsLastRefreshed();
+        this.installationsLoading = false;
+        this.checkIfLoadingComplete();
+    }
+    handleRepositoriesLoaded(event) {
+        this.repositories = event.detail;
+        this.repositoriesLastRefreshed = this.githubController.getRepositoriesLastRefreshed();
+        this.repositoriesLoading = false;
+        this.checkIfLoadingComplete();
+    }
+    handleCacheLoaded(event) {
+        const detail = event.detail;
+        this.installations = detail.installations || [];
+        this.repositories = detail.repositories || [];
+        this.installationsLastRefreshed = detail.installationsLastRefreshed;
+        this.repositoriesLastRefreshed = detail.repositoriesLastRefreshed;
+        this.requestUpdate();
+    }
+    handleInstallationsAsync(_) {
+        // Installations operation is async (202) - keep loading state
+        // The actual data will come later via WebSocket
+        this.installationsLoading = true;
+    }
+    handleRepositoriesAsync(_) {
+        // Repositories operation is async (202) - keep loading state
+        // The actual data will come later via WebSocket
+        this.repositoriesLoading = true;
+    }
+    checkIfLoadingComplete() {
+        // Only stop the loader if both installations and repositories are done loading
+        if (!this.installationsLoading && !this.repositoriesLoading) {
+            this.stopRefreshLoader();
+        }
+    }
+    handleRepositoryAttached(event) {
+        const detail = event.detail;
+        // Clear all importing files when attachment completes
+        // The controller will handle refreshing the repos which will update the UI
+        this.importingFiles.clear();
+        this.requestUpdate();
+    }
+    calculateCycleDuration() {
+        if (!this.loader)
+            return 0;
+        const multiplier = this.loader.constantFlow ? 1 : 2;
+        return (1 / this.loader.speed) * CYCLE_DURATION_MULTIPLIER * multiplier;
+    }
+    stopRefreshLoader() {
+        if (this.loader) {
+            // Let the loader handle its minimum cycle, then hide the container
+            this.loader.stop();
+            const cycleDuration = this.calculateCycleDuration();
+            setTimeout(() => {
+                this.refreshing = false;
+            }, cycleDuration + CYCLE_DURATION_OFFSET);
+        }
+        else {
+            this.refreshing = false;
+        }
+    }
+    isStale(timestamp) {
+        if (!timestamp)
+            return false;
+        const lastRefreshed = new Date(timestamp);
+        const now = new Date();
+        const hoursSince = (now.getTime() - lastRefreshed.getTime()) / (1000 * 60 * 60);
+        return hoursSince > 24;
+    }
+    handleLoadRepositories() {
+        this.refreshing = true;
+        this.repositoriesLoading = true;
+        if (this.loader) {
+            this.loader.start();
+        }
+        this.githubController.dispatchEvent(new CustomEvent(GitHubRefreshRepositories));
+    }
+    handleInstallGitHub() {
+        window.location.href = '/github/install';
+    }
+    handleClaimRepository(installation) {
+        this.githubController.dispatchEvent(new CustomEvent(GitHubClaimRepository, {
+            bubbles: true,
+            composed: true,
+            detail: installation.gitHubInstallationId
+        }));
+    }
+    handleAttachRepository(repo, filePath, branch) {
+        // Create a unique key for this file
+        const fileKey = `${repo.repository.repositoryId}:${filePath}`;
+        // Add to importing set to show loader
+        this.importingFiles.add(fileKey);
+        this.requestUpdate();
+        this.githubController.dispatchEvent(new CustomEvent(GitHubAttachRepository, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                repositoryId: repo.repository.repositoryId,
+                branch: branch || repo.repository.defaultBranch,
+                filePath: filePath
+            }
+        }));
+    }
+    handleRefresh() {
+        this.refreshing = true;
+        this.installationsLoading = true;
+        this.repositoriesLoading = true;
+        // Start the loader animation
+        if (this.loader) {
+            this.loader.start();
+        }
+        this.githubController.dispatchEvent(new CustomEvent(GitHubRefreshInstallations));
+        this.githubController.dispatchEvent(new CustomEvent(GitHubRefreshRepositories));
+    }
+    toggleElementHighlight(elementId, highlight) {
+        const element = this.shadowRoot?.querySelector(`#${elementId}`);
+        if (element) {
+            element.classList.toggle('active', highlight);
+        }
+    }
+    lightElement(elementId) {
+        this.toggleElementHighlight(elementId, true);
+    }
+    dimElement(elementId) {
+        this.toggleElementHighlight(elementId, false);
+    }
+    renderFilePreview(file) {
+        return html `
+            <div style="display: grid; grid-template-columns: ${PREVIEW_GRID_COLUMNS}; width: ${PREVIEW_WIDTH};">
+                <div class="preview-label">Size:</div>
+                <div>${FileSizeFormatter.formatBytes(file.size)}</div>
+                <div class="preview-label">SHA:</div>
+                <div>${file.sha.substring(0, SHA_DISPLAY_LENGTH)}</div>
+                <div class="preview-label">Last author:</div>
+                <div>${file.lastAuthor}</div>
+                <div class="preview-label">Last modified:</div>
+                <div>
+                    <sl-format-date date="${file.lastModifiedAt}" month="long"
+                                    day="numeric" year="numeric" hour="2-digit"
+                                    minute="2-digit"></sl-format-date>
+                    <br/>
+                </div>
+                ${file.isImported ? html `
+                    <div class="preview-label"></div>
+                    <div class="imported-value">&uarr; [imported to workspace]</div>
+                ` : null}
+            </div>`;
+    }
+    handleImportedFileHover(workspaceId) {
+        if (this.githubController) {
+            this.githubController.dispatchEvent(new CustomEvent(ImportedRepoFileHoverOver, {
+                bubbles: true,
+                composed: true,
+                detail: workspaceId
+            }));
+        }
+    }
+    handleImportedFileUnhover(workspaceId) {
+        if (this.githubController) {
+            this.githubController.dispatchEvent(new CustomEvent(ImportedRepoFileHoverOut, {
+                bubbles: true,
+                composed: true,
+                detail: workspaceId
+            }));
+        }
+    }
+    render() {
+        const hasInstallations = this.installations.length > 0;
+        const hasRepositories = this.repositories.length > 0;
+        const unclaimedInstallations = this.installations.filter(i => !i.claimed);
+        const hasUnclaimedInstallations = unclaimedInstallations.length > 0;
+        const showInstallButton = !hasInstallations && !hasRepositories && !this.refreshing;
+        const neverLoadedRepos = hasInstallations && !this.repositoriesLastRefreshed;
+        const loadedButEmpty = hasInstallations && this.repositoriesLastRefreshed && !hasRepositories;
+        const isRepoStale = this.isStale(this.repositoriesLastRefreshed);
+        return html `
+            <h3>GitHub</h3>
+
+            ${this.refreshing ? html `
+                <pb33f-indeterminate-loader
+                    constantFlow
+                    height="${LOADER_HEIGHT}"
+                    blockSize="${LOADER_BLOCK_SIZE}"
+                    speed="${LOADER_SPEED}"
+                    active="true"
+                    label="refreshing github repositories...">
+                </pb33f-indeterminate-loader>
+            ` : nothing}
+
+            ${showInstallButton ? html `
+                <p>Connect your GitHub repositories to import OpenAPI specifications.</p>
+                <sl-button @click="${this.handleInstallGitHub}">
+                    Install GitHub App
+                </sl-button>
+            ` : nothing}
+
+            ${hasUnclaimedInstallations ? html `
+                <p>Unclaimed GitHub installations:</p>
+                <ul>
+                    ${unclaimedInstallations.map(installation => html `
+                        <li>
+                            ${installation.accountLogin} (${installation.accountType})
+                            <sl-button size="small" @click="${() => this.handleClaimRepository(installation)}">
+                                Claim
+                            </sl-button>
+                        </li>
+                    `)}
+                </ul>
+            ` : nothing}
+
+            ${neverLoadedRepos && !this.refreshing ? html `
+                <div class="first-load-prompt">
+                    <p>You have GitHub installations connected. Load your repositories to see available OpenAPI specifications.</p>
+                    <sl-button variant="primary" @click="${this.handleLoadRepositories}">
+                        <sl-icon slot="prefix" name="cloud-download" aria-hidden="true"></sl-icon>
+                        Load Repositories
+                    </sl-button>
+                </div>
+            ` : nothing}
+
+            ${loadedButEmpty && !this.refreshing ? html `
+                <div class="empty-repos-message">
+                    <p>No repositories with OpenAPI specifications found.</p>
+                    <div class="last-refreshed">
+                        Last checked: <sl-relative-time date="${this.repositoriesLastRefreshed}" format="long"></sl-relative-time>
+                    </div>
+                    <sl-button class="refresh-button" size="small" @click="${this.handleRefresh}">
+                        <sl-icon slot="prefix" name="arrow-clockwise" aria-hidden="true"></sl-icon>
+                        Refresh
+                    </sl-button>
+                </div>
+            ` : nothing}
+
+            ${hasRepositories && !this.refreshing ? html `
+                <div class="github-controls">
+                    <sl-button class="refresh-button" size="small" @click="${this.handleRefresh}">
+                        <sl-icon slot="prefix" name="arrow-clockwise" aria-hidden="true"></sl-icon>
+                        refresh
+                    </sl-button>
+                    ${this.repositoriesLastRefreshed ? html `
+                        <span class="last-refreshed">
+                            Last refreshed: <sl-relative-time date="${this.repositoriesLastRefreshed}" format="long"></sl-relative-time>
+                            ${isRepoStale ? html `<sl-badge variant="warning" class="stale-tag">stale</sl-badge>` : nothing}
+                        </span>
+                    ` : nothing}
+                </div>
+                <p>The doctor currently has access to the following repositories and entry (root) specifications.</p>
+                <ul>
+                    ${this.repositories.map((repo) => {
+            return html `
+                            <li class="repo" id="repo-${repo.repository.repositoryId}">
+                                <strong>${repo.repository.fullName}</strong>
+                                ${repo.repository.private ? html `<span class="private-badge">(private)</span>` : ''}
+                                
+                                ${repo.availableRootDocuments && repo.availableRootDocuments.length > 0 ? html `
+                                    <ul class="github-file-list">
+                                        ${repo.availableRootDocuments.map((file, fileIndex) => {
+                // Use workspaceId for imported files, otherwise use repo-file index
+                const fileId = file.isImported && file.workspaceId
+                    ? `file-${file.workspaceId}`
+                    : `file-${repo.repository.repositoryId}-${fileIndex}`;
+                const preview = this.renderFilePreview(file);
+                const handleMouseOver = () => {
+                    this.handleMouseOver(fileId, file);
+                };
+                const handleMouseOut = () => {
+                    this.handleMouseOut(fileId, file);
+                };
+                // Check if this file is currently being imported
+                const fileKey = `${repo.repository.repositoryId}:${file.path}`;
+                const isImporting = this.importingFiles.has(fileKey);
+                return html `
+                                                <li class="spec" id="${fileId}"
+                                                    @mouseover="${handleMouseOver}"
+                                                    @mouseout="${handleMouseOut}"
+                                                    style="${isImporting ? 'display: flex; align-items: center;' : ''}">
+                                                    ${DoctorIcon.getOpenAPIIcon(ICON_SIZE)}
+                                                    ${isImporting ? html `
+                                                        <pb33f-indeterminate-loader
+                                                            constantFlow    
+                                                            height="16"
+                                                            blockSize="5" 
+                                                            speed="1" 
+                                                            active="true"
+                                                            label="importing ${file.path}"
+                                                            style="display: inline; margin-left: 5px; flex: 1;">
+                                                        </pb33f-indeterminate-loader>
+                                                    ` : html `
+                                                        ${FilenameColorizer.renderOpenAPIFile(file.path, preview)}
+                                                        <div style="display: inline-block; float: right;">
+                                                            ${file.isImported ? html `
+                                                                <span class="imported-indicator">[imported]</span>
+                                                            ` : html `
+                                                                <sl-tooltip content="${this.workspaceReadOnly
+                    ? 'Import disabled - workspace is read-only'
+                    : 'Import this specification and its entire change history into to a new workspace.'}">
+                                                                    <sl-icon-button style="font-size: 1.1rem"
+                                                                        class="import-file"
+                                                                        name="cloud-download"
+                                                                        label="Import"
+                                                                        ?disabled="${this.workspaceReadOnly}"
+                                                                        @click="${(e) => {
+                    e.stopPropagation();
+                    if (!this.workspaceReadOnly) {
+                        this.handleAttachRepository(repo, file.path);
+                    }
+                }}">
+                                                                    </sl-icon-button>
+                                                                </sl-tooltip>
+                                                            `}
+                                                        </div>
+                                                    `}
+                                                </li>
+                                            `;
+            })}
+                                    </ul>
+                                ` : html `
+                                    <div class="no-specs">&nbsp;&nbsp;No OpenAPI specifications located in repository</div>
+                                `}
+                            </li>
+                        `;
+        })}
+                </ul>
+            ` : nothing}
+
+        `;
+    }
+    handleMouseOver(fileId, file) {
+        // Clear any pending mouseout for this element
+        const outTimerKey = `out-${fileId}`;
+        if (this.hoverDebounceTimers.has(outTimerKey)) {
+            clearTimeout(this.hoverDebounceTimers.get(outTimerKey));
+            this.hoverDebounceTimers.delete(outTimerKey);
+        }
+        // Debounce the mouseover
+        const overTimerKey = `over-${fileId}`;
+        if (!this.hoverDebounceTimers.has(overTimerKey)) {
+            const timerId = window.setTimeout(() => {
+                // Only highlight if there's a valid fileId
+                if (fileId) {
+                    this.lightElement(fileId);
+                }
+                if (file.isImported && file.workspaceId) {
+                    this.handleImportedFileHover(file.workspaceId);
+                }
+                this.hoverDebounceTimers.delete(overTimerKey);
+            }, HOVER_DEBOUNCE_DELAY);
+            this.hoverDebounceTimers.set(overTimerKey, timerId);
+        }
+    }
+    handleMouseOut(fileId, file) {
+        // Clear any pending mouseover for this element
+        const overTimerKey = `over-${fileId}`;
+        if (this.hoverDebounceTimers.has(overTimerKey)) {
+            clearTimeout(this.hoverDebounceTimers.get(overTimerKey));
+            this.hoverDebounceTimers.delete(overTimerKey);
+        }
+        // Debounce the mouseout
+        const outTimerKey = `out-${fileId}`;
+        if (!this.hoverDebounceTimers.has(outTimerKey)) {
+            const timerId = window.setTimeout(() => {
+                // Only dim if there's a valid fileId
+                if (fileId) {
+                    this.dimElement(fileId);
+                }
+                if (file.isImported && file.workspaceId) {
+                    this.handleImportedFileUnhover(file.workspaceId);
+                }
+                this.hoverDebounceTimers.delete(outTimerKey);
+            }, HOVER_DEBOUNCE_DELAY);
+            this.hoverDebounceTimers.set(outTimerKey, timerId);
+        }
+    }
+    toggleRepositoryHighlight(repositoryId, workspaceName, highlight) {
+        if (workspaceName) {
+            // Find specific file and toggle highlight
+            this.repositories.forEach((repo) => {
+                if (repo.repository.repositoryId === repositoryId) {
+                    const repoFullName = repo.repository.fullName;
+                    if (workspaceName.startsWith(repoFullName + '/')) {
+                        const filePath = workspaceName.substring(repoFullName.length + 1);
+                        if (repo.availableRootDocuments) {
+                            repo.availableRootDocuments.forEach((file) => {
+                                if (file.path === filePath && file.workspaceId) {
+                                    const fileElementId = `file-${file.workspaceId}`;
+                                    if (highlight) {
+                                        this.lightElement(fileElementId);
+                                    }
+                                    else {
+                                        this.dimElement(fileElementId);
+                                    }
+                                }
+                            });
+                        }
+                    }
+                }
+            });
+        }
+        else {
+            // Fallback to toggling the entire repo
+            this.toggleElementHighlight(`repo-${repositoryId}`, highlight);
+        }
+    }
+    highlightRepository(repositoryId, workspaceName) {
+        this.toggleRepositoryHighlight(repositoryId, workspaceName, true);
+    }
+    unhighlightRepository(repositoryId, workspaceName) {
+        this.toggleRepositoryHighlight(repositoryId, workspaceName, false);
+    }
+};
+GitHubWorkspaceView.styles = [listsCss, buttonCss, tooltipCss, badgesCss, githubViewCss];
+__decorate([
+    property({ type: Object })
+], GitHubWorkspaceView.prototype, "githubController", void 0);
+__decorate([
+    state()
+], GitHubWorkspaceView.prototype, "installations", void 0);
+__decorate([
+    state()
+], GitHubWorkspaceView.prototype, "repositories", void 0);
+__decorate([
+    state()
+], GitHubWorkspaceView.prototype, "refreshing", void 0);
+__decorate([
+    state()
+], GitHubWorkspaceView.prototype, "importingFiles", void 0);
+__decorate([
+    state()
+], GitHubWorkspaceView.prototype, "repositoriesLastRefreshed", void 0);
+__decorate([
+    state()
+], GitHubWorkspaceView.prototype, "installationsLastRefreshed", void 0);
+__decorate([
+    property({ type: Boolean })
+], GitHubWorkspaceView.prototype, "workspaceReadOnly", void 0);
+__decorate([
+    query('pb33f-indeterminate-loader')
+], GitHubWorkspaceView.prototype, "loader", void 0);
+GitHubWorkspaceView = __decorate([
+    customElement("pb33f-github-workspace-view")
+], GitHubWorkspaceView);
+export { GitHubWorkspaceView };

package/dist/components/global-task/global-task-view.css.d.ts

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