@ebrains/components 2.4.1 → 3.1.0

package/dist/collection/shared-ui/eds-gitlab-contributors/eds-gitlab-contributors.js

@@ -0,0 +1,447 @@
+import { h } from "@stencil/core";
+/**
+ * `EdsGitlabContributors` fetches and displays GitLab project contributors with avatars and contribution stats.
+ *
+ * This component queries the GitLab API to retrieve repository contributors.
+ * It's designed for internal EBRAINS projects requiring authentication.
+ *
+ * Key features:
+ * - Fetches contributors from GitLab API with access token authentication
+ * - Supports multiple projects - provide comma-separated project IDs to aggregate contributions
+ * - Optional path filtering to show contributors for specific directories
+ * - Extracts username from email address (part before @)
+ * - Displays contributor avatars with initials using eds-avatar component
+ * - Shows username and commit statistics (commits, additions, deletions)
+ * - Aggregates duplicate contributors by extracted username across all projects
+ * - Responsive grid layout
+ * - Loading and error states
+ * - Configurable display limits and sorting
+ */
+/**
+ * @internal
+ */
+export class EdsGitlabContributors {
+    constructor() {
+        this.accessToken = undefined;
+        this.projectId = '3360';
+        this.apiUrl = 'https://gitlab.ebrains.eu/api/v4';
+        this.path = undefined;
+        this.limit = 50;
+        this.minCommits = 1;
+        this.showStats = true;
+        this.columns = '4';
+        this.sortBy = 'commits';
+        this.contributors = [];
+        this.loading = true;
+        this.error = '';
+    }
+    async componentWillLoad() {
+        await this.fetchContributors();
+    }
+    /**
+     * Parses projectId prop to handle single or multiple project IDs
+     */
+    getProjectIds() {
+        return this.projectId
+            .split(',')
+            .map(id => id.trim())
+            .filter(id => id.length > 0);
+    }
+    /**
+     * Fetches commits by path and aggregates by author for a single project
+     */
+    async fetchCommitsByPathForProject(projectId) {
+        const commits = [];
+        let page = 1;
+        const perPage = 100; // GitLab max per page
+        // Fetch all commits with pagination
+        while (true) {
+            const url = `${this.apiUrl}/projects/${encodeURIComponent(projectId)}/repository/commits?path=${encodeURIComponent(this.path)}&per_page=${perPage}&page=${page}`;
+            const response = await fetch(url, {
+                headers: {
+                    'PRIVATE-TOKEN': this.accessToken
+                }
+            });
+            if (!response.ok) {
+                throw new Error(`GitLab API error: ${response.status} ${response.statusText}`);
+            }
+            const pageCommits = await response.json();
+            if (pageCommits.length === 0) {
+                break; // No more pages
+            }
+            commits.push(...pageCommits);
+            // Stop if we have enough commits or no more pages
+            if (pageCommits.length < perPage) {
+                break;
+            }
+            page++;
+        }
+        // Aggregate commits by author email
+        const authorMap = new Map();
+        for (const commit of commits) {
+            const email = commit.author_email.toLowerCase();
+            if (authorMap.has(email)) {
+                authorMap.get(email).commits++;
+            }
+            else {
+                authorMap.set(email, {
+                    name: commit.author_name,
+                    email: commit.author_email,
+                    commits: 1
+                });
+            }
+        }
+        // Convert to GitLabContributor format
+        return Array.from(authorMap.values()).map(author => ({
+            name: author.name,
+            email: author.email,
+            commits: author.commits,
+            additions: 0, // Not available from commits API
+            deletions: 0 // Not available from commits API
+        }));
+    }
+    /**
+     * Fetches contributors from a single project
+     * For project 1505 (monorepo), applies path filter if provided
+     * For other projects, fetches all contributors
+     */
+    async fetchContributorsForProject(projectId) {
+        // Only apply path filter for project 1505 (the monorepo)
+        const shouldUsePath = this.path && projectId === '1505';
+        if (shouldUsePath) {
+            // Fetch commits by path and aggregate by author (for monorepo)
+            return await this.fetchCommitsByPathForProject(projectId);
+        }
+        else {
+            // Use contributors API for entire repository
+            const contributorsResponse = await fetch(`${this.apiUrl}/projects/${encodeURIComponent(projectId)}/repository/contributors?per_page=100`, {
+                headers: {
+                    'PRIVATE-TOKEN': this.accessToken
+                }
+            });
+            if (!contributorsResponse.ok) {
+                throw new Error(`GitLab API error: ${contributorsResponse.status} ${contributorsResponse.statusText}`);
+            }
+            return await contributorsResponse.json();
+        }
+    }
+    /**
+     * Fetches contributors from GitLab API (supports multiple projects)
+     */
+    async fetchContributors() {
+        if (!this.accessToken) {
+            this.error = 'Access token is required for internal projects';
+            this.loading = false;
+            return;
+        }
+        try {
+            this.loading = true;
+            this.error = '';
+            const projectIds = this.getProjectIds();
+            let allContributorsData = [];
+            // Fetch contributors from all projects
+            for (const projectId of projectIds) {
+                const contributorsData = await this.fetchContributorsForProject(projectId);
+                allContributorsData.push(...contributorsData);
+            }
+            // Filter by minimum commits and exclude bot contributors
+            const filteredContributors = allContributorsData.filter(c => {
+                // Exclude if commits are below minimum
+                if (c.commits < this.minCommits)
+                    return false;
+                // Exclude GitLab CI and other bots
+                const email = c.email.toLowerCase();
+                const name = c.name.toLowerCase();
+                // Common bot identifiers
+                const botPatterns = [
+                    'gitlab-ci',
+                    'gitlab ci',
+                    'noreply@gitlab',
+                    'bot@',
+                    'automation@'
+                ];
+                return !botPatterns.some(pattern => email.includes(pattern) || name.includes(pattern));
+            });
+            // Aggregate duplicate contributors by username
+            const aggregatedContributors = this.aggregateContributors(filteredContributors);
+            // Sort contributors
+            if (this.sortBy === 'commits') {
+                aggregatedContributors.sort((a, b) => b.commits - a.commits);
+            }
+            else {
+                aggregatedContributors.sort((a, b) => a.username.localeCompare(b.username));
+            }
+            // Apply limit after sorting
+            this.contributors = aggregatedContributors.slice(0, this.limit);
+            this.loading = false;
+        }
+        catch (err) {
+            this.error = err instanceof Error ? err.message : 'Failed to fetch contributors';
+            this.loading = false;
+            console.error('Error fetching GitLab contributors:', err);
+        }
+    }
+    /**
+     * Extracts username from email address (part before @)
+     */
+    extractUsernameFromEmail(email) {
+        if (!email || !email.includes('@')) {
+            return email || 'unknown';
+        }
+        return email.split('@')[0];
+    }
+    /**
+     * Aggregates duplicate contributors by username (extracted from email)
+     * Combines commits, additions, and deletions for the same person
+     */
+    aggregateContributors(contributors) {
+        const aggregated = new Map();
+        for (const contributor of contributors) {
+            // Extract username from email
+            const username = this.extractUsernameFromEmail(contributor.email);
+            const key = username.toLowerCase();
+            if (aggregated.has(key)) {
+                // Aggregate with existing contributor
+                const existing = aggregated.get(key);
+                existing.commits += contributor.commits;
+                existing.additions += contributor.additions;
+                existing.deletions += contributor.deletions;
+            }
+            else {
+                // Add new contributor with extracted username
+                aggregated.set(key, Object.assign(Object.assign({}, contributor), { username }));
+            }
+        }
+        return Array.from(aggregated.values());
+    }
+    /**
+     * Gets first and last name from full name
+     */
+    parseName(fullName) {
+        const parts = fullName.trim().split(' ');
+        if (parts.length === 1) {
+            return { firstName: parts[0], lastName: '' };
+        }
+        const firstName = parts[0];
+        const lastName = parts.slice(1).join(' ');
+        return { firstName, lastName };
+    }
+    /**
+     * Format large numbers with K suffix
+     */
+    formatNumber(num) {
+        if (num >= 1000) {
+            return `${(num / 1000).toFixed(1)}K`;
+        }
+        return num.toString();
+    }
+    render() {
+        if (this.loading) {
+            // Spinner placeholder mirrors eds-kg-learning-resources exactly —
+            // same `.loading` wrapper (position: relative + min-height so the
+            // absolutely-positioned spinner anchors inside the box instead of
+            // escaping to the page), same eds-spinner props (sm/primary/
+            // transparent + message-as-prop), and the same role+aria-live for
+            // screen-reader announcement. Keep these two components in sync if
+            // the loading affordance ever changes.
+            return (h("div", { class: "loading", role: "status", "aria-live": "polite" }, h("eds-spinner", { size: "sm", variant: "primary", background: "transparent", message: "Loading contributors..." })));
+        }
+        if (this.error) {
+            return (h("eds-alert", { message: "Error loading contributors", intent: "error" }));
+        }
+        if (this.contributors.length === 0) {
+            return (h("eds-alert", { message: "No contributors found for this project.", intent: "error" }));
+        }
+        const gridClass = `grid gap-6 w-full ${this.columns === '2' ? 'grid-cols-1 sm:grid-cols-2' :
+            this.columns === '3' ? 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3' :
+                this.columns === '4' ? 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4' :
+                    'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5'}`;
+        return (h("div", { class: "w-full" }, h("div", { class: gridClass }, this.contributors.map((contributor) => {
+            const { firstName, lastName } = this.parseName(contributor.name);
+            return (h("div", { class: "contributor-card flex flex-row gap-4 p-5 bg-white border border-gray-200 rounded-lg transition-all duration-200", key: contributor.email }, h("div", { class: "flex-shrink-0" }, h("eds-avatar", { firstName: firstName, lastName: lastName, color: "black" })), h("div", { class: "min-w-0 flex flex-col gap-2" }, h("span", { class: "f-ui-01 text-default pb-2 m-0 whitespace-nowrap overflow-hidden text-ellipsis" }, "@", contributor.username), h("div", { class: "flex flex-col gap-2 mt-auto" }, h("div", { class: "flex items-center gap-2 font-semibold" }, h("span", { class: "text-light" }, this.formatNumber(contributor.commits)), h("span", { class: "text-lighter" }, contributor.commits === 1 ? 'commit' : 'commits'))))));
+        }))));
+    }
+    static get is() { return "eds-gitlab-contributors"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-gitlab-contributors.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-gitlab-contributors.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accessToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "GitLab personal access token for API authentication (required for internal projects)"
+                },
+                "attribute": "access-token",
+                "reflect": false
+            },
+            "projectId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "GitLab project ID(s) - single ID or comma-separated IDs for multiple projects\nExample: \"3360\" or \"3360,1770\" or \"ri%2Ftech-hub%2Febrains-ui-ecosystem\""
+                },
+                "attribute": "project-id",
+                "reflect": false,
+                "defaultValue": "'3360'"
+            },
+            "apiUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "GitLab API base URL"
+                },
+                "attribute": "api-url",
+                "reflect": false,
+                "defaultValue": "'https://gitlab.ebrains.eu/api/v4'"
+            },
+            "path": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional path to filter commits (e.g., \"apps/live/handbook\")\nOnly applied to project 1505 (monorepo). Other projects fetch all contributors."
+                },
+                "attribute": "path",
+                "reflect": false
+            },
+            "limit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of contributors to display"
+                },
+                "attribute": "limit",
+                "reflect": false,
+                "defaultValue": "50"
+            },
+            "minCommits": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum commits to be included in the list"
+                },
+                "attribute": "min-commits",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "showStats": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show contribution statistics (commits, additions, deletions)"
+                },
+                "attribute": "show-stats",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'2' | '3' | '4' | '5'",
+                    "resolved": "\"2\" | \"3\" | \"4\" | \"5\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Grid columns for responsive layout\nOptions: '2', '3', '4', '5'"
+                },
+                "attribute": "columns",
+                "reflect": false,
+                "defaultValue": "'4'"
+            },
+            "sortBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'commits' | 'name'",
+                    "resolved": "\"commits\" | \"name\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sort contributors by commits (desc) or username (asc)"
+                },
+                "attribute": "sort-by",
+                "reflect": false,
+                "defaultValue": "'commits'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "contributors": {},
+            "loading": {},
+            "error": {}
+        };
+    }
+}