From 0be567e397da44107a27a25ed7e0e0b7b0af5b1c Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Fri, 18 Sep 2026 12:26:48 +0200 Subject: [PATCH 01/23] =?UTF-8?q?=F0=9F=90=9B=20Fix=20tooltip=20content=20?= =?UTF-8?q?adaptation,=20helper=20expansion=20and=20viewport=20boundaries?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../graphs/commits/commits.component.scss | 28 +++++++++++----- src/app/services/tooltip.service.ts | 32 +++++++++++-------- .../shared/ui/tooltip/tooltip.component.html | 10 ++++-- .../shared/ui/tooltip/tooltip.component.scss | 24 +++++++++++++- 4 files changed, 70 insertions(+), 24 deletions(-) diff --git a/src/app/components/graphs/commits/commits.component.scss b/src/app/components/graphs/commits/commits.component.scss index e2c3c92d..7839e358 100644 --- a/src/app/components/graphs/commits/commits.component.scss +++ b/src/app/components/graphs/commits/commits.component.scss @@ -24,7 +24,7 @@ width: 100%; --chart-width-left-spacing-ratio: 85%; --chart-width-max-left-spacing: 150px; - // to change chart-with + /* to change chart-width */ flex: 1; } @@ -87,8 +87,9 @@ flex-direction: column; gap: 2px; user-select: none; - min-width: 200px; - max-width: 300px; + width: max-content; + min-width: max-content; + max-width: min(420px, calc(100vw - 32px)); .repo-name { font-weight: 600; @@ -118,14 +119,29 @@ } .tooltip-helpers { - gap: 0.75rem; + display: flex; + align-items: center; + justify-content: flex-end; + gap: 0.5rem 0.75rem; font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; + width: 100%; + min-width: max-content; + flex-wrap: wrap; + + > span { + white-space: nowrap; + flex-shrink: 0; + } } .tooltip-helper-item { + display: inline-flex; + align-items: center; gap: 0.25rem; + white-space: nowrap; + flex-shrink: 0; .ext-icon { width: 12px; @@ -135,7 +151,3 @@ } } -#commit_hover { - max-width: 340px; -} - diff --git a/src/app/services/tooltip.service.ts b/src/app/services/tooltip.service.ts index 61ae8415..2ab05755 100644 --- a/src/app/services/tooltip.service.ts +++ b/src/app/services/tooltip.service.ts @@ -186,28 +186,36 @@ export class TooltipService { ): { top: number; left: number } { let { t: top, l: left } = this.calculatePosition(rect, tooltipRect, placement, offset); - // Dynamic placement adjustment to prevent hiding the hovered item + // Dynamic placement adjustment to prevent hiding the hovered item or overflowing the viewport if (placement === "right" && left + tooltipRect.width > window.innerWidth - 8) { const alternative = this.calculatePosition(rect, tooltipRect, "left", offset); - if (alternative.l >= 8) { + const roomRight = window.innerWidth - 8 - (rect.right + offset); + const roomLeft = rect.left - offset - 8; + if (alternative.l >= 8 || roomLeft > roomRight) { top = alternative.t; left = alternative.l; } } else if (placement === "left" && left < 8) { const alternative = this.calculatePosition(rect, tooltipRect, "right", offset); - if (alternative.l + tooltipRect.width <= window.innerWidth - 8) { + const roomLeft = rect.left - offset - 8; + const roomRight = window.innerWidth - 8 - (rect.right + offset); + if (alternative.l + tooltipRect.width <= window.innerWidth - 8 || roomRight > roomLeft) { top = alternative.t; left = alternative.l; } } else if (placement === "top" && top < 8) { const alternative = this.calculatePosition(rect, tooltipRect, "bottom", offset); - if (alternative.t + tooltipRect.height <= window.innerHeight - 8) { + const roomTop = rect.top - offset - 8; + const roomBottom = window.innerHeight - 8 - (rect.bottom + offset); + if (alternative.t + tooltipRect.height <= window.innerHeight - 8 || roomBottom > roomTop) { top = alternative.t; left = alternative.l; } } else if (placement === "bottom" && top + tooltipRect.height > window.innerHeight - 8) { const alternative = this.calculatePosition(rect, tooltipRect, "top", offset); - if (alternative.t >= 8) { + const roomBottom = window.innerHeight - 8 - (rect.bottom + offset); + const roomTop = rect.top - offset - 8; + if (alternative.t >= 8 || roomTop > roomBottom) { top = alternative.t; left = alternative.l; } @@ -217,14 +225,12 @@ export class TooltipService { } private ensureWithinBounds(top: number, left: number, tooltipRect: DOMRect): { top: number; left: number } { - if (left < 8) left = 8; - if (top < 8) top = 8; - if (left + tooltipRect.width > window.innerWidth - 8) { - left = window.innerWidth - tooltipRect.width - 8; - } - if (top + tooltipRect.height > window.innerHeight - 8) { - top = window.innerHeight - tooltipRect.height - 8; - } + const maxLeft = Math.max(8, window.innerWidth - tooltipRect.width - 8); + const maxTop = Math.max(8, window.innerHeight - tooltipRect.height - 8); + + left = Math.min(Math.max(8, left), maxLeft); + top = Math.min(Math.max(8, top), maxTop); + return { top, left }; } diff --git a/src/app/shared/ui/tooltip/tooltip.component.html b/src/app/shared/ui/tooltip/tooltip.component.html index 33fa5a7f..2de0e2ce 100644 --- a/src/app/shared/ui/tooltip/tooltip.component.html +++ b/src/app/shared/ui/tooltip/tooltip.component.html @@ -1,5 +1,11 @@ -
- +
+ diff --git a/src/app/shared/ui/tooltip/tooltip.component.scss b/src/app/shared/ui/tooltip/tooltip.component.scss index d00a1465..dbd68a5d 100644 --- a/src/app/shared/ui/tooltip/tooltip.component.scss +++ b/src/app/shared/ui/tooltip/tooltip.component.scss @@ -6,14 +6,17 @@ position: absolute; z-index: $zindex-tooltip; pointer-events: none; + max-width: calc(100vw - 16px); } .tooltip-container { display: flex; align-items: center; gap: 8px; + box-sizing: border-box; width: max-content; - max-width: var(--tooltip-max-width, 300px); + /* Default text tooltips have a readable compact width */ + max-width: var(--tooltip-max-width, min(360px, calc(100vw - 24px))); background-color: var(--tooltip-glass-bg, var(--color-surface)); color: var(--text-color); padding: 6px 12px; @@ -30,6 +33,12 @@ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); + &.has-template { + /* Template tooltips can expand to fit their rich content & helpers while bounded safely */ + max-width: var(--tooltip-max-width, min(480px, calc(100vw - 24px))); + align-items: stretch; + } + &.top { transform: translateY(4px) scale(0.97); transform-origin: bottom center; @@ -63,5 +72,18 @@ overflow-wrap: break-word; word-break: normal; text-align: left; + + &.w-100 { + display: block; + width: 100%; + } +} + +.shortcut-combo { + display: inline-flex; + align-items: center; + gap: 3px; + flex-shrink: 0; + white-space: nowrap; } From bf7d6c1c2397061ed2cfb0994db4681380b17e1b Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Fri, 18 Sep 2026 12:36:06 +0200 Subject: [PATCH 02/23] =?UTF-8?q?=E2=9C=A8=20Add=20student=20repository=20?= =?UTF-8?q?navigation=20and=20tooltip=20feedback=20in=20students=20view?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../graphs/students/students.component.html | 24 +++++ .../graphs/students/students.component.scss | 57 ++++++++++ .../graphs/students/students.component.ts | 101 ++++++++++++------ 3 files changed, 151 insertions(+), 31 deletions(-) diff --git a/src/app/components/graphs/students/students.component.html b/src/app/components/graphs/students/students.component.html index 66832b8a..b8363eb6 100644 --- a/src/app/components/graphs/students/students.component.html +++ b/src/app/components/graphs/students/students.component.html @@ -137,3 +137,27 @@
{{ "OVERVIEW-GRA {{ 'DATE' | translate }} + + +
+
{{ hovered_repository?.name }}
+
+
+ {{ 'OVERVIEW-GRAPH.OPEN-REPO' | translate }} + +
+
+
+ + + + + + + + + + + + + diff --git a/src/app/components/graphs/students/students.component.scss b/src/app/components/graphs/students/students.component.scss index 41ae79fe..5831fa8b 100644 --- a/src/app/components/graphs/students/students.component.scss +++ b/src/app/components/graphs/students/students.component.scss @@ -61,3 +61,60 @@ } } } + +#repository_hover { + display: flex; + flex-direction: column; + gap: 2px; + user-select: none; + width: max-content; + min-width: max-content; + max-width: min(420px, calc(100vw - 32px)); + + .repo-name { + font-weight: 600; + color: var(--color-text-primary); + font-size: 0.9rem; + white-space: normal; + word-break: break-word; + } + + .tooltip-helpers { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 0.5rem 0.75rem; + font-size: 0.75rem; + color: var(--color-text-muted); + white-space: nowrap; + width: 100%; + min-width: max-content; + flex-wrap: wrap; + + > span { + white-space: nowrap; + flex-shrink: 0; + } + } + + .tooltip-helper-item { + display: inline-flex; + align-items: center; + gap: 0.25rem; + white-space: nowrap; + flex-shrink: 0; + } +} + +text.repo_name { + cursor: pointer; + transition: fill var(--transition-fast); + + &:hover { + fill: var(--color-primary); + } + + &:active { + opacity: 0.8; + } +} diff --git a/src/app/components/graphs/students/students.component.ts b/src/app/components/graphs/students/students.component.ts index 2f703a89..1051a9ee 100644 --- a/src/app/components/graphs/students/students.component.ts +++ b/src/app/components/graphs/students/students.component.ts @@ -1,4 +1,4 @@ -import { Component, ElementRef, HostListener, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from "@angular/core"; +import { Component, ElementRef, HostListener, NgZone, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from "@angular/core"; import { CommitColor } from "@models/Commit.model"; import { TranslateService } from "@ngx-translate/core"; import { AssignmentsService } from "@services/assignments.service"; @@ -24,6 +24,7 @@ export class StudentsComponent extends BaseGraphComponent implements OnInit, OnD @ViewChild("leftAxisContainer", { static: true }) leftAxisContainer: ElementRef; @ViewChild("rightAxisContainer", { static: true }) rightAxisContainer: ElementRef; @ViewChild("d3TooltipTemplate") d3TooltipTemplate!: TemplateRef; + @ViewChild("repoTooltipTemplate") repoTooltipTemplate!: TemplateRef; readonly slider_step = Utils.SLIDER_STEP; assignmentsModified$: Subscription; @@ -37,6 +38,8 @@ export class StudentsComponent extends BaseGraphComponent implements OnInit, OnD commitColors = [CommitColor.INTERMEDIATE, CommitColor.BEFORE, CommitColor.BETWEEN, CommitColor.AFTER]; hiddenCategories = new Set(); showProgressionLine = true; + pressedShortcut: string = null; + hovered_repository: { name: string; url: string } | null = null; private svg: any; private resizeObserver: any; @@ -49,10 +52,26 @@ export class StudentsComponent extends BaseGraphComponent implements OnInit, OnD protected assignmentsService: AssignmentsService, private tooltipService: TooltipService, public themeService: ThemeService, + private ngZone: NgZone, ) { super(loaderService, assignmentsService, dataService); } + @HostListener("document:keydown", ["$event"]) + handleGlobalShortcuts(event: KeyboardEvent) { + if (OsUtils.isTypingInInput(event)) { + return; + } + + const key = event.key.toLowerCase(); + + if (key === "r") { + event.preventDefault(); + this.loadGraph(this.dataService.startDate, this.dataService.endDate); + this.triggerShortcut("r"); + } + } + ngOnInit() { setTimeout(() => { this.assignmentsModified$ = this.subscribeAssignmentModified(); @@ -189,17 +208,54 @@ export class StudentsComponent extends BaseGraphComponent implements OnInit, OnD .padding(0); // Axes - this.svg - .append("g") - .attr("transform", `translate(0,${height})`) - .call(d3.axisBottom(x)) + const xAxis = this.svg.append("g").attr("transform", `translate(0,${height})`).call(d3.axisBottom(x)); + + xAxis + .selectAll(".tick") .selectAll("text") + .call((g) => g.classed("repo_name", true)) .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-45)") - .style("fill", "var(--color-text-primary)") - .style("font-size", "11px"); + .style("font-size", "11px") + .each(function (this: SVGTextElement) { + let textStr = this.textContent || ""; + this.textContent = Utils.truncateMiddle(textStr, Utils.OVERVIEW_NAME_LENGTH_LIMIT); + }) + .on("click", (event: MouseEvent, d: any) => { + event.stopPropagation(); + const repo = this.dataService.repositories.find((r) => r.name === d) || this.chartData.find((cd) => cd.student === d); + if (repo?.url) { + window.open(repo.url, "_blank"); + } + }) + .on("mouseenter", (event: MouseEvent, d: any) => { + event.stopPropagation(); + const repo = this.dataService.repositories.find((r) => r.name === d) || this.chartData.find((cd) => cd.student === d); + if (repo) { + this.ngZone.run(() => { + this.hovered_repository = { + name: repo.name || (repo as any).student || d, + url: repo.url, + }; + this.tooltipService.showAtPosition(this.repoTooltipTemplate, event.clientX, event.clientY, "right", undefined, true); + }); + } + }) + .on("mousemove", (event: MouseEvent) => { + event.stopPropagation(); + if (this.tooltipService.isShowing()) { + this.tooltipService.moveTooltip(event.clientX, event.clientY, "right"); + } + }) + .on("mouseleave", (event: MouseEvent) => { + event.stopPropagation(); + this.ngZone.run(() => { + this.hovered_repository = undefined; + this.tooltipService.hide(); + }); + }); const svgLeft = d3 .select(leftElement) @@ -485,30 +541,6 @@ export class StudentsComponent extends BaseGraphComponent implements OnInit, OnD return Math.ceil((this.max - this.min) / this.slider_step) * this.slider_step + this.min; } - pressedShortcut: string = null; - - @HostListener("document:keydown", ["$event"]) - handleGlobalShortcuts(event: KeyboardEvent) { - if (OsUtils.isTypingInInput(event)) { - return; - } - - const key = event.key.toLowerCase(); - - if (key === "r") { - event.preventDefault(); - this.loadGraph(this.dataService.startDate, this.dataService.endDate); - this.triggerShortcut("r"); - } - } - - private triggerShortcut(key: string) { - this.pressedShortcut = key; - setTimeout(() => { - if (this.pressedShortcut === key) this.pressedShortcut = null; - }, 150); - } - toggleCategory(label: string) { if (this.hiddenCategories.has(label)) { this.hiddenCategories.delete(label); @@ -524,4 +556,11 @@ export class StudentsComponent extends BaseGraphComponent implements OnInit, OnD this.showProgressionLine = !this.showProgressionLine; this.drawGraph(); } + + private triggerShortcut(key: string) { + this.pressedShortcut = key; + setTimeout(() => { + if (this.pressedShortcut === key) this.pressedShortcut = null; + }, 150); + } } From 7e4811c2315b85d0b7207fefc0d0820f35c38ce0 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Fri, 18 Sep 2026 12:51:30 +0200 Subject: [PATCH 03/23] =?UTF-8?q?=E2=9C=A8=20Add=20collapsible=20animated?= =?UTF-8?q?=20search=20bar=20in=20assignment=20chooser?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assignment-chooser.component.html | 48 ++++-- .../assignment-chooser.component.scss | 148 +++++++++++++++--- .../assignment-chooser.component.ts | 60 ++++++- src/assets/i18n/en.json | 1 + src/assets/i18n/fr.json | 1 + src/assets/i18n/ru.json | 1 + 6 files changed, 230 insertions(+), 29 deletions(-) diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.html b/src/app/components/home/assignment-chooser/assignment-chooser.component.html index 07eada2a..ccf14301 100644 --- a/src/app/components/home/assignment-chooser/assignment-chooser.component.html +++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.html @@ -69,18 +69,48 @@
-
+
-
- - - - - +
diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.scss b/src/app/components/home/assignment-chooser/assignment-chooser.component.scss index d2c472c2..45cc7a01 100644 --- a/src/app/components/home/assignment-chooser/assignment-chooser.component.scss +++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.scss @@ -400,43 +400,153 @@ .search-filters-group { - .search-input-wrapper { - position: relative; + display: flex; + align-items: center; + gap: 6px; - .search-icon { + .search-expandable-container { + position: relative; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + width: 34px; + height: 34px; + box-sizing: border-box; + border: 1px solid transparent; + border-radius: 8px; + background-color: transparent; + cursor: pointer; + overflow: hidden; + user-select: none; + will-change: width, background-color, border-color, box-shadow; + transition: width 380ms cubic-bezier(0.2, 0.8, 0.2, 1), + background-color 240ms ease, + border-color 240ms ease, + box-shadow 240ms ease, + transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1); + + .search-icon-wrapper { position: absolute; - left: 12px; top: 50%; - transform: translateY(-50%); - color: var(--color-text-muted); + left: 9px; z-index: 5; + display: flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + color: var(--color-text-secondary); pointer-events: none; + transform: translateY(-50%); + transition: left 380ms cubic-bezier(0.2, 0.8, 0.2, 1), color 240ms ease; + + .search-icon { + width: 16px; + height: 16px; + } } - .modern-search-input { - padding-left: 36px; - border-radius: 8px; - border: 1px solid var(--color-border); - background-color: var(--color-surface); + .search-input { + width: 100%; + height: 100%; + padding: 0 8px 0 32px; + border: none; + outline: none; + background: transparent; color: var(--color-text-primary); - transition: border-color 0.15s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out; - font-size: 0.9rem; + font-size: 0.85rem; + font-weight: 400; + pointer-events: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + user-select: text; &::placeholder { color: var(--color-text-muted); - transition: color 0.2s ease; + opacity: 0; + transition: opacity 120ms ease; } + } - &:focus { - box-shadow: none !important; - outline: none; - border-color: var(--color-border) !important; + .clear-search-btn { + position: absolute; + top: 50%; + right: 6px; + z-index: 6; + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + padding: 0; + border: none; + border-radius: 50%; + background: var(--color-surface-hover); + color: var(--color-text-muted); + cursor: pointer; + transform: translateY(-50%); + transition: background-color 150ms ease, color 150ms ease, transform 120ms ease; + + &:hover { + background-color: var(--color-hover); + color: var(--color-text-primary); + } + + &:active { + transform: translateY(-50%) scale(0.9); + } + } + + &.expanded { + width: 240px; + cursor: default; + background-color: var(--color-surface); + border-color: var(--color-border); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); + + .search-icon-wrapper { + left: 10px; + color: var(--color-text-muted); + } + + .search-input { + padding-right: 28px; + cursor: text; + pointer-events: auto; &::placeholder { - color: transparent; + opacity: 1; + transition: opacity 240ms ease 120ms; + } + } + + &.focused { + border-color: var(--color-primary); + box-shadow: 0 0 0 3px var(--color-primary-bg); + + .search-icon-wrapper { + color: var(--color-primary); } } } + + &:not(.expanded):hover { + background-color: var(--filter-bg); + + .search-icon-wrapper { + color: var(--color-text-primary); + } + } + + &:not(.expanded):active { + transform: scale(0.94); + } + + &:not(.expanded):focus-visible { + outline: none; + box-shadow: 0 0 0 2px var(--color-primary-bg); + } } .filter-dropdown-container { diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.ts b/src/app/components/home/assignment-chooser/assignment-chooser.component.ts index 5427ae95..f4db7abb 100644 --- a/src/app/components/home/assignment-chooser/assignment-chooser.component.ts +++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, TemplateRef, ViewChild, ChangeDetectorRef, OnDestroy, HostListener } from "@angular/core"; +import { Component, OnInit, TemplateRef, ViewChild, ChangeDetectorRef, OnDestroy, HostListener, ElementRef } from "@angular/core"; import { Router } from "@angular/router"; import { Assignment } from "@models/Assignment.model"; import { GitProviderType } from "@models/GitAuthProvider.model"; @@ -20,6 +20,8 @@ import * as moment from "moment"; styleUrls: ["./assignment-chooser.component.scss"], }) export class AssignmentChooserComponent implements OnInit, OnDestroy { + @ViewChild("searchInput") searchInputRef?: ElementRef; + assignments: any[]; // Using any to attach UI-specific properties temporarily sortField = "lastModificationDate"; @@ -28,6 +30,7 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { filterType: "all" | "github" | "gitlab" = "all"; searchQuery = ""; + searchFocused = false; advancedFilters = { status: { @@ -98,6 +101,10 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { this.closeAllCreationPopovers(); } + get isSearchExpanded(): boolean { + return this.searchFocused || Boolean(this.searchQuery && this.searchQuery.trim().length > 0); + } + get filteredAssignments() { let result = this.assignments; @@ -178,6 +185,57 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { this.savePreferences(); } + onSearchContainerClick(event: MouseEvent): void { + if (!this.isSearchExpanded) { + event.preventDefault(); + this.searchFocused = true; + this.cdr.markForCheck(); + requestAnimationFrame(() => { + this.searchInputRef?.nativeElement?.focus(); + }); + } else if (document.activeElement !== this.searchInputRef?.nativeElement) { + this.searchInputRef?.nativeElement?.focus(); + } + } + + onSearchContainerEnter(event: Event): void { + if (!this.isSearchExpanded) { + event.preventDefault(); + this.searchFocused = true; + this.cdr.markForCheck(); + requestAnimationFrame(() => { + this.searchInputRef?.nativeElement?.focus(); + }); + } + } + + onSearchFocus(): void { + this.searchFocused = true; + } + + onSearchBlur(): void { + this.searchFocused = false; + } + + onSearchEscape(event?: Event): void { + if (event) { + event.stopPropagation(); + } + this.searchQuery = ""; + this.searchFocused = false; + this.searchInputRef?.nativeElement?.blur(); + } + + clearSearch(focusAfter = true): void { + this.searchQuery = ""; + if (focusAfter) { + this.searchInputRef?.nativeElement?.focus(); + } else { + this.searchFocused = false; + this.searchInputRef?.nativeElement?.blur(); + } + } + setFilter(type: "all" | "github" | "gitlab") { this.filterType = type; } diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 2de1aaec..51eab778 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -62,6 +62,7 @@ }, "HOME": { "SEARCH-PLACEHOLDER": "Search assignments...", + "CLEAR-SEARCH": "Clear search", "FILTERS": "Filters", "COPY": "Copy", "COPY-TOOLTIP": "Copy to clipboard", diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index 4b99d25a..753b1912 100644 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -61,6 +61,7 @@ }, "HOME": { "SEARCH-PLACEHOLDER": "Rechercher un devoir...", + "CLEAR-SEARCH": "Effacer la recherche", "FILTERS": "Filtres", "COPY": "Copier", "COPY-TOOLTIP": "Copier dans le presse-papier", diff --git a/src/assets/i18n/ru.json b/src/assets/i18n/ru.json index 07c456fc..060867fc 100644 --- a/src/assets/i18n/ru.json +++ b/src/assets/i18n/ru.json @@ -60,6 +60,7 @@ }, "HOME": { "SEARCH-PLACEHOLDER": "Поиск заданий...", + "CLEAR-SEARCH": "Очистить поиск", "FILTERS": "Фильтры", "COPY": "Копировать", "COPY-TOOLTIP": "Копировать в буфер обмена", From 0580f8cd298cc602166057ec2757efb19c95abb4 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Fri, 18 Sep 2026 13:12:26 +0200 Subject: [PATCH 04/23] =?UTF-8?q?=E2=9C=A8=20Add=20secure=20automatic=20Gi?= =?UTF-8?q?tLab=20OAuth=20token=20refresh=20with=20rotation=20and=20interc?= =?UTF-8?q?eptor?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.module.ts | 8 +- .../gitlab-auth.interceptor.spec.ts | 113 ++++++++++++++++ .../interceptors/gitlab-auth.interceptor.ts | 59 ++++++++ src/app/services/gitlab-auth.service.spec.ts | 87 ++++++++++++ src/app/services/gitlab-auth.service.ts | 128 +++++++++++++++++- .../services/token-storage.service.spec.ts | 33 +++++ src/app/services/token-storage.service.ts | 126 +++++++++++------ tsconfig.json | 3 + 8 files changed, 509 insertions(+), 48 deletions(-) create mode 100644 src/app/interceptors/gitlab-auth.interceptor.spec.ts create mode 100644 src/app/interceptors/gitlab-auth.interceptor.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 298d7696..52bd13bc 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,7 +1,8 @@ import { LOCATION_INITIALIZED, registerLocaleData } from "@angular/common"; -import { HttpClient, HttpClientModule } from "@angular/common/http"; +import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from "@angular/common/http"; import localeFr from "@angular/common/locales/fr"; import localeRu from "@angular/common/locales/ru"; +import { GitlabAuthInterceptor } from "@interceptors/gitlab-auth.interceptor"; import { APP_INITIALIZER, Injector, LOCALE_ID, NgModule } from "@angular/core"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { SharedUiModule } from "./shared/ui/shared-ui.module"; @@ -174,6 +175,11 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj }, DatabaseService, NgbActiveModal, + { + provide: HTTP_INTERCEPTORS, + useClass: GitlabAuthInterceptor, + multi: true, + }, ], bootstrap: [AppComponent], }) diff --git a/src/app/interceptors/gitlab-auth.interceptor.spec.ts b/src/app/interceptors/gitlab-auth.interceptor.spec.ts new file mode 100644 index 00000000..a12c7019 --- /dev/null +++ b/src/app/interceptors/gitlab-auth.interceptor.spec.ts @@ -0,0 +1,113 @@ +import { TestBed } from "@angular/core/testing"; +import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing"; +import { HTTP_INTERCEPTORS, HttpClient } from "@angular/common/http"; +import { GitlabAuthInterceptor } from "./gitlab-auth.interceptor"; +import { GitlabAuthService } from "@services/gitlab-auth.service"; + +describe("GitlabAuthInterceptor", () => { + let httpClient: HttpClient; + let httpMock: HttpTestingController; + let gitlabAuthServiceSpy: jasmine.SpyObj; + + beforeEach(() => { + gitlabAuthServiceSpy = jasmine.createSpyObj( + "GitlabAuthService", + ["ensureValidToken", "refreshAccessToken", "isSignedIn"], + { instanceHost: "gitlab.com" }, + ); + + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule], + providers: [ + { provide: GitlabAuthService, useValue: gitlabAuthServiceSpy }, + { + provide: HTTP_INTERCEPTORS, + useClass: GitlabAuthInterceptor, + multi: true, + }, + ], + }); + + httpClient = TestBed.inject(HttpClient); + httpMock = TestBed.inject(HttpTestingController); + }); + + afterEach(() => { + httpMock.verify(); + }); + + it("should not intercept non-GitLab requests", () => { + httpClient.get("/assets/i18n/fr.json").subscribe(); + + const req = httpMock.expectOne("/assets/i18n/fr.json"); + expect(req.request.headers.has("Authorization")).toBeFalse(); + expect(gitlabAuthServiceSpy.ensureValidToken).not.toHaveBeenCalled(); + req.flush({}); + }); + + it("should not intercept /oauth/token requests to prevent recursive loop", () => { + httpClient.post("https://gitlab.com/oauth/token", {}).subscribe(); + + const req = httpMock.expectOne("https://gitlab.com/oauth/token"); + expect(gitlabAuthServiceSpy.ensureValidToken).not.toHaveBeenCalled(); + req.flush({}); + }); + + it("should attach Authorization header on GitLab API requests after ensuring valid token", async () => { + gitlabAuthServiceSpy.ensureValidToken.and.returnValue(Promise.resolve("valid-token-123")); + + httpClient.get("https://gitlab.com/api/v4/projects").subscribe(); + + // Wait for promise resolution from ensureValidToken + await Promise.resolve(); + + const req = httpMock.expectOne("https://gitlab.com/api/v4/projects"); + expect(req.request.headers.get("Authorization")).toBe("Bearer valid-token-123"); + req.flush([]); + }); + + it("should retry request on 401 response if refreshAccessToken succeeds", async () => { + gitlabAuthServiceSpy.ensureValidToken.and.returnValue(Promise.resolve("stale-token")); + gitlabAuthServiceSpy.isSignedIn.and.returnValue(true); + gitlabAuthServiceSpy.refreshAccessToken.and.returnValue(Promise.resolve("fresh-token-456")); + + httpClient.get("https://gitlab.com/api/v4/projects").subscribe(); + + await Promise.resolve(); + + // Initial request fails with 401 + const req1 = httpMock.expectOne("https://gitlab.com/api/v4/projects"); + expect(req1.request.headers.get("Authorization")).toBe("Bearer stale-token"); + req1.flush({ message: "401 Unauthorized" }, { status: 401, statusText: "Unauthorized" }); + + await Promise.resolve(); + + // Retried request with new token + const req2 = httpMock.expectOne("https://gitlab.com/api/v4/projects"); + expect(req2.request.headers.get("Authorization")).toBe("Bearer fresh-token-456"); + req2.flush([{ id: 1, name: "my-project" }]); + }); + + it("should forward 401 error if refreshAccessToken returns null", async () => { + gitlabAuthServiceSpy.ensureValidToken.and.returnValue(Promise.resolve("stale-token")); + gitlabAuthServiceSpy.isSignedIn.and.returnValue(true); + gitlabAuthServiceSpy.refreshAccessToken.and.returnValue(Promise.resolve(null)); + + let errorReceived: any = null; + httpClient.get("https://gitlab.com/api/v4/projects").subscribe({ + error: (err) => { + errorReceived = err; + }, + }); + + await Promise.resolve(); + + const req = httpMock.expectOne("https://gitlab.com/api/v4/projects"); + req.flush({ message: "401 Unauthorized" }, { status: 401, statusText: "Unauthorized" }); + + await Promise.resolve(); + + expect(errorReceived).not.toBeNull(); + expect(errorReceived.status).toBe(401); + }); +}); diff --git a/src/app/interceptors/gitlab-auth.interceptor.ts b/src/app/interceptors/gitlab-auth.interceptor.ts new file mode 100644 index 00000000..afb09739 --- /dev/null +++ b/src/app/interceptors/gitlab-auth.interceptor.ts @@ -0,0 +1,59 @@ +import { Injectable } from "@angular/core"; +import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http"; +import { from, Observable, throwError } from "rxjs"; +import { catchError, switchMap } from "rxjs/operators"; +import { GitlabAuthService } from "@services/gitlab-auth.service"; + +@Injectable() +export class GitlabAuthInterceptor implements HttpInterceptor { + constructor(private gitlabAuthService: GitlabAuthService) {} + + intercept(req: HttpRequest, next: HttpHandler): Observable> { + if (!this.isGitlabApiRequest(req)) { + return next.handle(req); + } + + return from(this.gitlabAuthService.ensureValidToken()).pipe( + switchMap((token) => { + const authorizedReq = token ? this.cloneWithAuth(req, token) : req; + + return next.handle(authorizedReq).pipe( + catchError((error: any) => { + if (error instanceof HttpErrorResponse && error.status === 401 && this.gitlabAuthService.isSignedIn()) { + return from(this.gitlabAuthService.refreshAccessToken()).pipe( + switchMap((newToken) => { + if (newToken) { + const retriedReq = this.cloneWithAuth(req, newToken); + return next.handle(retriedReq); + } + return throwError(error); + }), + ); + } + return throwError(error); + }), + ); + }), + ); + } + + private isGitlabApiRequest(req: HttpRequest): boolean { + const url = req.url; + + // Do not intercept oauth token requests to prevent recursive calls + if (url.includes("/oauth/token")) { + return false; + } + + const host = this.gitlabAuthService.instanceHost; + return url.includes("/api/v4/") || (host ? url.includes(host) : false); + } + + private cloneWithAuth(req: HttpRequest, token: string): HttpRequest { + return req.clone({ + setHeaders: { + Authorization: `Bearer ${token}`, + }, + }); + } +} diff --git a/src/app/services/gitlab-auth.service.spec.ts b/src/app/services/gitlab-auth.service.spec.ts index 054f6345..8fa94413 100644 --- a/src/app/services/gitlab-auth.service.spec.ts +++ b/src/app/services/gitlab-auth.service.spec.ts @@ -110,4 +110,91 @@ describe("GitlabAuthService", () => { expect(freshService.token).toBe("stored-gl-token"); expect(freshService.currentUser?.username).toBe("stored_user"); }); + + it("should successfully refresh access token and rotate refresh token", async () => { + const tokenStorage = TestBed.inject(GitlabAuthService)["tokenStorageService"]; + tokenStorage.saveToken("gitlab", "old-access-token", true, 7200, "old-refresh-token"); + service.currentUser = { id: 1, username: "tanuki", name: "Tanuki", avatar_url: "", web_url: "" }; + + const refreshPromise = service.refreshAccessToken(); + + const req = httpMock.expectOne("https://gitlab.com/oauth/token"); + expect(req.request.method).toBe("POST"); + expect(req.request.body).toContain("grant_type=refresh_token"); + expect(req.request.body).toContain("refresh_token=old-refresh-token"); + + req.flush({ + access_token: "new-access-token", + token_type: "Bearer", + expires_in: 7200, + refresh_token: "new-refresh-token", + }); + + const result = await refreshPromise; + expect(result).toBe("new-access-token"); + expect(service.token).toBe("new-access-token"); + expect(tokenStorage.getToken("gitlab")).toBe("new-access-token"); + expect(tokenStorage.getRefreshToken("gitlab")).toBe("new-refresh-token"); + }); + + it("should deduplicate concurrent refresh calls into a single HTTP request (mutex)", async () => { + const tokenStorage = TestBed.inject(GitlabAuthService)["tokenStorageService"]; + tokenStorage.saveToken("gitlab", "old-token", true, 7200, "initial-refresh-token"); + service.currentUser = { id: 1, username: "tanuki", name: "Tanuki", avatar_url: "", web_url: "" }; + + // Fire 3 simultaneous refresh calls + const promise1 = service.refreshAccessToken(); + const promise2 = service.refreshAccessToken(); + const promise3 = service.refreshAccessToken(); + + // Exactly one HTTP request should be sent + const req = httpMock.expectOne("https://gitlab.com/oauth/token"); + req.flush({ + access_token: "deduped-access-token", + token_type: "Bearer", + expires_in: 7200, + refresh_token: "rotated-refresh-token", + }); + + const [res1, res2, res3] = await Promise.all([promise1, promise2, promise3]); + expect(res1).toBe("deduped-access-token"); + expect(res2).toBe("deduped-access-token"); + expect(res3).toBe("deduped-access-token"); + expect(service.token).toBe("deduped-access-token"); + }); + + it("should sign out when refresh token is invalid or revoked (invalid_grant)", async () => { + const tokenStorage = TestBed.inject(GitlabAuthService)["tokenStorageService"]; + tokenStorage.saveToken("gitlab", "stale-access", true, 7200, "revoked-refresh"); + service.token = "stale-access"; + service.currentUser = { id: 1, username: "tanuki", name: "Tanuki", avatar_url: "", web_url: "" }; + + const refreshPromise = service.refreshAccessToken(); + + const req = httpMock.expectOne("https://gitlab.com/oauth/token"); + req.flush( + { error: "invalid_grant", error_description: "The provided authorization grant is invalid, expired, or revoked" }, + { status: 400, statusText: "Bad Request" }, + ); + + const result = await refreshPromise; + expect(result).toBeNull(); + expect(service.isSignedIn()).toBeFalse(); + expect(service.token).toBeNull(); + expect(service.currentUser).toBeNull(); + expect(tokenStorage.getToken("gitlab")).toBeNull(); + expect(tokenStorage.getRefreshToken("gitlab")).toBeNull(); + }); + + it("should ensure valid token without refresh if token is still valid and not expiring soon", async () => { + const tokenStorage = TestBed.inject(GitlabAuthService)["tokenStorageService"]; + // Token valid for 2 hours (7200s) + tokenStorage.saveToken("gitlab", "current-valid-token", true, 7200, "valid-refresh"); + service.token = "current-valid-token"; + service.currentUser = { id: 1, username: "tanuki", name: "Tanuki", avatar_url: "", web_url: "" }; + + const token = await service.ensureValidToken(); + expect(token).toBe("current-valid-token"); + httpMock.expectNone("https://gitlab.com/oauth/token"); + }); }); diff --git a/src/app/services/gitlab-auth.service.ts b/src/app/services/gitlab-auth.service.ts index 7243e698..34c8d2fd 100644 --- a/src/app/services/gitlab-auth.service.ts +++ b/src/app/services/gitlab-auth.service.ts @@ -52,13 +52,16 @@ export class GitlabAuthService implements GitAuthProvider { private redirectUri = environment.gitlab?.redirectUri || "/auth/callback"; private instanceUrl = (environment.gitlab?.instanceUrl || "https://gitlab.com").replace(/\/+$/, ""); private scope = environment.gitlab?.scope || "read_api read_user"; + private refreshPromise: Promise | null = null; + private refreshTimer: any = null; + private readonly refreshBufferSeconds = 300; constructor(private http: HttpClient, private tokenStorageService: TokenStorageService) { this.restoreSession(); } isSignedIn(): boolean { - return !!(this.token && this.currentUser); + return !!((this.token || this.tokenStorageService.getRefreshToken("gitlab")) && this.currentUser); } getAccount(): Account | null { @@ -130,9 +133,10 @@ export class GitlabAuthService implements GitAuthProvider { this.token = accessToken; this.currentUser = user; - this.tokenStorageService.saveToken("gitlab", accessToken, rememberMe, tokenResponse.expires_in); + this.tokenStorageService.saveToken("gitlab", accessToken, rememberMe, tokenResponse.expires_in, tokenResponse.refresh_token); this.tokenStorageService.saveUserData("gitlab", user, rememberMe); + this.scheduleProactiveRefresh(tokenResponse.expires_in); this.notifyAuthChange(); return user; } finally { @@ -142,7 +146,33 @@ export class GitlabAuthService implements GitAuthProvider { } } + async refreshAccessToken(): Promise { + if (this.refreshPromise) { + return this.refreshPromise; + } + + this.refreshPromise = this.performTokenRefresh().finally(() => { + this.refreshPromise = null; + }); + + return this.refreshPromise; + } + + async ensureValidToken(): Promise { + const isExpiring = this.tokenStorageService.isTokenExpired("gitlab", this.refreshBufferSeconds); + if (this.token && !isExpiring) { + return this.token; + } + + if (this.tokenStorageService.getRefreshToken("gitlab")) { + return this.refreshAccessToken(); + } + + return this.token; + } + signOut(): void { + this.clearRefreshTimer(); this.token = null; this.currentUser = null; this.tokenStorageService.clearAll("gitlab"); @@ -306,6 +336,83 @@ export class GitlabAuthService implements GitAuthProvider { return this.http.post(tokenUrl, body.toString(), { headers }).toPromise(); } + private refreshCodeForToken(refreshToken: string): Promise { + const tokenUrl = `${this.instanceUrl}/oauth/token`; + const body = new HttpParams() + .set("client_id", this.clientId) + .set("grant_type", "refresh_token") + .set("refresh_token", refreshToken) + .set("redirect_uri", this.effectiveRedirectUri); + + const headers = new HttpHeaders({ + "Content-Type": "application/x-www-form-urlencoded", + }); + + return this.http.post(tokenUrl, body.toString(), { headers }).toPromise(); + } + + private async performTokenRefresh(): Promise { + const storedRefreshToken = this.tokenStorageService.getRefreshToken("gitlab"); + if (!storedRefreshToken) { + return null; + } + + try { + const response = await this.refreshCodeForToken(storedRefreshToken); + const newAccessToken = response.access_token; + const newRefreshToken = response.refresh_token || storedRefreshToken; + const expiresIn = response.expires_in; + const rememberMe = this.tokenStorageService.isRemembered("gitlab"); + + this.token = newAccessToken; + this.tokenStorageService.saveToken("gitlab", newAccessToken, rememberMe, expiresIn, newRefreshToken); + + this.scheduleProactiveRefresh(expiresIn); + this.notifyAuthChange(); + + return newAccessToken; + } catch (err: any) { + const status = err?.status || err?.statusCode; + const errorPayload = err?.error; + const isGrantInvalid = + status === 400 && + (errorPayload?.error === "invalid_grant" || (typeof errorPayload === "string" && errorPayload.includes("invalid_grant"))); + + if (status === 401 || isGrantInvalid) { + console.warn("[GitLab Auth] Refresh token expired or revoked, signing out:", err?.message || err); + this.signOut(); + } else { + console.error("[GitLab Auth] Failed to refresh GitLab token:", err?.message || err); + } + return null; + } + } + + private scheduleProactiveRefresh(expiresInSeconds?: number): void { + this.clearRefreshTimer(); + + if (!expiresInSeconds || expiresInSeconds <= 0) { + return; + } + + const delayMs = Math.max((expiresInSeconds - this.refreshBufferSeconds) * 1000, 10000); + + this.refreshTimer = setTimeout(() => { + if (this.isSignedIn()) { + this.refreshAccessToken().catch((err) => { + console.warn("[GitLab Auth] Background silent refresh failed:", err); + }); + } + }, delayMs); + } + + private clearRefreshTimer(): void { + if (this.refreshTimer) { + clearTimeout(this.refreshTimer); + this.refreshTimer = null; + } + } + private fetchUserProfile(token: string): Promise { const userUrl = `${this.instanceUrl}/api/v4/user`; const headers = new HttpHeaders({ @@ -317,13 +424,26 @@ export class GitlabAuthService implements GitAuthProvider { private restoreSession(): void { const storedToken = this.tokenStorageService.getToken("gitlab"); + const storedRefreshToken = this.tokenStorageService.getRefreshToken("gitlab"); const storedUser = this.tokenStorageService.getUserData("gitlab"); - if (storedToken && storedUser) { + if ((storedToken || storedRefreshToken) && storedUser) { this.token = storedToken; this.currentUser = storedUser; this.notifyAuthChange(); - } else if (storedToken || storedUser) { + + if (!storedToken || this.tokenStorageService.isTokenExpired("gitlab", this.refreshBufferSeconds)) { + this.refreshAccessToken().catch((err) => { + console.warn("[GitLab Auth] Initial session restore refresh failed:", err); + }); + } else { + const expiresAt = this.tokenStorageService.getAccessTokenExpiresAt("gitlab"); + if (expiresAt) { + const remainingSeconds = Math.round((expiresAt - Date.now()) / 1000); + this.scheduleProactiveRefresh(remainingSeconds); + } + } + } else if (storedToken || storedRefreshToken || storedUser) { this.tokenStorageService.clearAll("gitlab"); } } diff --git a/src/app/services/token-storage.service.spec.ts b/src/app/services/token-storage.service.spec.ts index 90f2cb2d..6882d6dd 100644 --- a/src/app/services/token-storage.service.spec.ts +++ b/src/app/services/token-storage.service.spec.ts @@ -96,4 +96,37 @@ describe("TokenStorageService", () => { expect(localStorage.getItem("g4s_auth_v1_github")).toBeNull(); expect(localStorage.getItem("g4s_user_v1_github")).toBeNull(); }); + + it("should securely store and retrieve encrypted refreshToken", () => { + service.saveToken("gitlab", "gl_access_token_123", true, 7200, "gl_refresh_token_xyz"); + + const raw = localStorage.getItem("g4s_auth_v1_gitlab"); + expect(raw).toBeTruthy(); + expect(raw).not.toContain("gl_access_token_123"); + expect(raw).not.toContain("gl_refresh_token_xyz"); + + expect(service.getToken("gitlab")).toBe("gl_access_token_123"); + expect(service.getRefreshToken("gitlab")).toBe("gl_refresh_token_xyz"); + }); + + it("should return null for expired token without wiping storage when refreshToken is present", () => { + service.saveToken("gitlab", "expired_access_token", true, -10, "valid_refresh_token"); + + expect(service.getToken("gitlab")).toBeNull(); + expect(localStorage.getItem("g4s_auth_v1_gitlab")).toBeTruthy(); + expect(service.getRefreshToken("gitlab")).toBe("valid_refresh_token"); + }); + + it("should accurately report isTokenExpired with and without margin", () => { + // Token expiring in 60 seconds + service.saveToken("gitlab", "expiring_token", true, 60, "some_refresh"); + + expect(service.isTokenExpired("gitlab", 0)).toBeFalse(); + // With 300s margin, 60s is considered expiring + expect(service.isTokenExpired("gitlab", 300)).toBeTrue(); + + // Already expired token + service.saveToken("gitlab", "already_expired", true, -5, "some_refresh"); + expect(service.isTokenExpired("gitlab", 0)).toBeTrue(); + }); }); diff --git a/src/app/services/token-storage.service.ts b/src/app/services/token-storage.service.ts index c77027a4..2e765ea1 100644 --- a/src/app/services/token-storage.service.ts +++ b/src/app/services/token-storage.service.ts @@ -15,6 +15,7 @@ export interface StoredTokenPayload { provider: GitProviderType; createdAt: number; expiresAt: number | null; + refreshToken?: string | null; } @Injectable({ @@ -27,7 +28,7 @@ export class TokenStorageService { constructor() {} - saveToken(provider: GitProviderType, token: string, rememberMe: boolean, expiresInSeconds?: number): void { + saveToken(provider: GitProviderType, token: string, rememberMe: boolean, expiresInSeconds?: number, refreshToken?: string): void { if (!token) { this.clearToken(provider); return; @@ -36,14 +37,21 @@ export class TokenStorageService { const now = Date.now(); const expiresAt = typeof expiresInSeconds === "number" && !isNaN(expiresInSeconds) ? now + expiresInSeconds * 1000 : null; + // If refreshToken is not explicitly provided, preserve existing refreshToken if one was stored + const existingRefreshToken = this.getRefreshToken(provider); + const effectiveRefreshToken = refreshToken !== undefined ? refreshToken : existingRefreshToken; + const payload: StoredTokenPayload = { token, provider, createdAt: now, expiresAt, + refreshToken: effectiveRefreshToken || null, }; - const envelope = this.encryptPayload(payload, rememberMe); + // If a refresh token is present, do not expire the envelope itself upon access token expiration + const envelopeExp = effectiveRefreshToken ? null : expiresAt; + const envelope = this.encryptPayload(payload, rememberMe, envelopeExp); const key = this.getTokenKey(provider); // Always clear both storages first to prevent stale contradictory states @@ -55,53 +63,42 @@ export class TokenStorageService { } getToken(provider: GitProviderType): string | null { - const key = this.getTokenKey(provider); - - // 1. Check sessionStorage first (active session) - let raw = this.getStorageItem(sessionStorage, key); - let isFromSession = true; - - // 2. Fall back to localStorage (remembered device) - if (!raw) { - raw = this.getStorageItem(localStorage, key); - isFromSession = false; - } - - if (!raw) { + const entry = this.getDecryptedEntry(provider); + if (!entry) { return null; } - try { - const envelope: StoredTokenEnvelope = JSON.parse(raw); - - // Check envelope expiration - if (envelope.exp !== null && Date.now() > envelope.exp) { + const { payload } = entry; + if (payload.expiresAt !== null && Date.now() > payload.expiresAt) { + // Clear token completely only if there is no refresh token available + if (!payload.refreshToken) { this.clearToken(provider); - return null; } + return null; + } - const payload = this.decryptPayload(envelope); - if (!payload || payload.provider !== provider) { - this.clearToken(provider); - return null; - } + return payload.token; + } - // Check inner payload expiration if present - if (payload.expiresAt !== null && Date.now() > payload.expiresAt) { - this.clearToken(provider); - return null; - } + getRefreshToken(provider: GitProviderType): string | null { + const entry = this.getDecryptedEntry(provider); + return entry?.payload.refreshToken || null; + } - return payload.token; - } catch { - // If parsing or decrypting fails (e.g. data tampering), clear corrupt entry - if (isFromSession) { - this.removeStorageItem(sessionStorage, key); - } else { - this.removeStorageItem(localStorage, key); - } - return null; + getAccessTokenExpiresAt(provider: GitProviderType): number | null { + const entry = this.getDecryptedEntry(provider); + return entry?.payload.expiresAt ?? null; + } + + isTokenExpired(provider: GitProviderType, marginSeconds = 0): boolean { + const entry = this.getDecryptedEntry(provider); + if (!entry) { + return true; } + if (entry.payload.expiresAt === null) { + return false; + } + return Date.now() + marginSeconds * 1000 >= entry.payload.expiresAt; } clearToken(provider: GitProviderType): void { @@ -165,6 +162,45 @@ export class TokenStorageService { } } + private getDecryptedEntry(provider: GitProviderType): { envelope: StoredTokenEnvelope; payload: StoredTokenPayload } | null { + const key = this.getTokenKey(provider); + let raw = this.getStorageItem(sessionStorage, key); + let isFromSession = true; + + if (!raw) { + raw = this.getStorageItem(localStorage, key); + isFromSession = false; + } + + if (!raw) { + return null; + } + + try { + const envelope: StoredTokenEnvelope = JSON.parse(raw); + + if (envelope.exp !== null && Date.now() > envelope.exp) { + this.clearToken(provider); + return null; + } + + const payload = this.decryptPayload(envelope); + if (!payload || payload.provider !== provider) { + this.clearToken(provider); + return null; + } + + return { envelope, payload }; + } catch { + if (isFromSession) { + this.removeStorageItem(sessionStorage, key); + } else { + this.removeStorageItem(localStorage, key); + } + return null; + } + } + private getTokenKey(provider: GitProviderType): string { return `${this.storagePrefix}${provider}`; } @@ -173,7 +209,11 @@ export class TokenStorageService { return `${this.userPrefix}${provider}`; } - private encryptPayload(payload: StoredTokenPayload, rememberMe: boolean): StoredTokenEnvelope { + private encryptPayload( + payload: StoredTokenPayload, + rememberMe: boolean, + envelopeExp: number | null = payload.expiresAt, + ): StoredTokenEnvelope { const jsonStr = JSON.stringify(payload); const iv = this.generateRandomHex(16); const keyStream = this.deriveKeystream(iv, jsonStr.length); @@ -185,14 +225,14 @@ export class TokenStorageService { } const data = this.encodeBase64(cipherChars.join("")); - const sig = this.computeSignature(iv, jsonStr, payload.expiresAt); + const sig = this.computeSignature(iv, jsonStr, envelopeExp); return { v: 1, iv, data, sig, - exp: payload.expiresAt, + exp: envelopeExp, rm: rememberMe, }; } diff --git a/tsconfig.json b/tsconfig.json index 58e8067d..f9a2529b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -44,6 +44,9 @@ ], "@environments/*": [ "environments/*" + ], + "@interceptors/*": [ + "app/interceptors/*" ] } } From 2676a8a0dfeb04a71274915d308084679a81a9c1 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Fri, 18 Sep 2026 19:31:35 +0200 Subject: [PATCH 05/23] =?UTF-8?q?=E2=9C=A8=20Add=20support=20for=20self-ho?= =?UTF-8?q?sted=20GitLab=20instances=20with=20multi-account=20management?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.module.ts | 6 + .../assignment-chooser.component.html | 128 +++--- .../assignment-chooser.component.scss | 118 +++++- .../assignment-chooser.component.ts | 368 ++++++++++++++++-- .../edit-repositories.component.ts | 3 +- .../modal-add-repositories.component.ts | 11 +- .../add-account-modal.component.html | 298 ++++++++++---- .../add-account-modal.component.scss | 155 ++++++++ .../add-account-modal.component.spec.ts | 68 ++++ .../add-account-modal.component.ts | 228 +++++++++-- .../sidebar-settings.component.ts | 2 +- .../dev-mock/mock-gitlab-instance.service.ts | 83 ++++ src/app/dev-mock/mock-gitlab.interceptor.ts | 227 +++++++++++ src/app/models/Account.model.ts | 2 + src/app/models/Assignment.model.ts | 48 ++- src/app/services/accounts.service.ts | 45 ++- src/app/services/commits.service.ts | 21 +- src/app/services/database.service.spec.ts | 101 +++++ src/app/services/database.service.ts | 74 +++- src/app/services/dev-flags.service.ts | 8 +- .../gitlab-custom-auth.service.spec.ts | 132 +++++++ .../services/gitlab-custom-auth.service.ts | 189 +++++++++ src/app/services/gitlab-data.service.ts | 133 +++++-- .../services/token-storage.service.spec.ts | 21 + src/app/services/token-storage.service.ts | 108 +++-- .../shared/ui/dev-bar/dev-bar.component.html | 23 +- .../shared/ui/dev-bar/dev-bar.component.ts | 18 +- src/assets/i18n/en.json | 16 +- src/assets/i18n/fr.json | 16 +- src/assets/i18n/ru.json | 16 +- 30 files changed, 2335 insertions(+), 331 deletions(-) create mode 100644 src/app/dev-mock/mock-gitlab-instance.service.ts create mode 100644 src/app/dev-mock/mock-gitlab.interceptor.ts create mode 100644 src/app/services/database.service.spec.ts create mode 100644 src/app/services/gitlab-custom-auth.service.spec.ts create mode 100644 src/app/services/gitlab-custom-auth.service.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 52bd13bc..d25addb5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -54,6 +54,7 @@ import { SidebarSettingsComponent } from "./components/nav-layouts/sidebar-setti import { AccountsComponent } from "./components/nav-layouts/sidebar-settings/accounts/accounts.component"; import { AddAccountModalComponent } from "./components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component"; import { GitlabCallbackComponent } from "@components/auth-callback/gitlab-callback.component"; +import { MockGitlabInterceptor } from "./dev-mock/mock-gitlab.interceptor"; /** * Firebase configuration file @@ -180,6 +181,11 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj useClass: GitlabAuthInterceptor, multi: true, }, + { + provide: HTTP_INTERCEPTORS, + useClass: MockGitlabInterceptor, + multi: true, + }, ], bootstrap: [AppComponent], }) diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.html b/src/app/components/home/assignment-chooser/assignment-chooser.component.html index ccf14301..00efb141 100644 --- a/src/app/components/home/assignment-chooser/assignment-chooser.component.html +++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.html @@ -2,16 +2,23 @@
-
- - - +
+
- -
@@ -114,7 +121,7 @@
-
- +
- -
+ +
- -
- -
- - +
@@ -341,29 +339,48 @@
{{ 'HOME.FILTER.YEAR' | translate }}
[disabled]="!isGithubConnected" [appTooltip]="(!isGithubConnected ? ('HOME.MUST-LOGIN-GITHUB' | translate) : '')" placement="left" - (click)="createAssignment('github', $event)"> + (click)="createAssignment('github', 'github.com', undefined, $event)"> GitHub - + GitLab - + GitLab (gitlab.com) + + + +
@@ -401,7 +418,9 @@
{{ 'HOME.FILTER.YEAR' | translate }}
'is-editing': editingAssignmentId === assignment.id, 'is-shrunk': (hoveredAssignment === assignment.id || isSelected(assignment.id)) && editingAssignmentId !== assignment.id, 'status-preview-dimmed': hoveredStatusPreview && assignment.id !== -1 && assignment.uiStatus !== hoveredStatusPreview - }"> + }" + [appTooltip]="!isAssignmentConnected(assignment) && assignment.id !== -1 ? getDisconnectedTooltip(assignment) : null" + placement="top">
@@ -413,6 +432,11 @@
{{ 'HOME.FILTER.YEAR' | translate }}
+ + + + +
@@ -516,18 +540,18 @@
{{ 'HOME.FILTER.YEAR' | translate }}
diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.scss b/src/app/components/home/assignment-chooser/assignment-chooser.component.scss index 45cc7a01..131eb208 100644 --- a/src/app/components/home/assignment-chooser/assignment-chooser.component.scss +++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.scss @@ -6,6 +6,7 @@ .filter-group { display: inline-flex; + align-items: center; background: var(--filter-bg); border-radius: 10px; padding: 4px; @@ -21,22 +22,19 @@ background: var(--filter-indicator); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); border-radius: 6px; - transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); - z-index: -1; + transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); + z-index: 0; + pointer-events: none; } - &[data-active="all"] .filter-indicator { transform: translateX(0); } - - &[data-active="github"] .filter-indicator { transform: translateX(100px); } - - &[data-active="gitlab"] .filter-indicator { transform: translateX(200px); } - .filter-btn { + position: relative; + z-index: 1; background: transparent !important; box-shadow: none !important; border: none; - width: 100px; - padding: 0.5rem 0; + min-width: 100px; + padding: 0.5rem 0.75rem; text-align: center; font-size: 0.85rem; font-weight: 500; @@ -44,6 +42,11 @@ cursor: pointer; border-radius: 6px; transition: color 0.2s ease; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + white-space: nowrap; &:hover:not(.active) { color: var(--color-text-primary); @@ -268,6 +271,23 @@ align-items: center; justify-content: center; line-height: 1; + + .custom-gitlab-icon-wrap { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + + .sub-server-icon { + position: absolute; + bottom: -2px; + right: -3px; + width: 8px; + height: 8px; + color: currentColor; + opacity: 0.9; + } + } } .split-text { @@ -361,6 +381,25 @@ flex-shrink: 0; } + .custom-gitlab-dropdown-icon { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + width: 14px; + height: 14px; + flex-shrink: 0; + + .sub-server-svg { + position: absolute; + bottom: -2px; + right: -3px; + width: 8px; + height: 8px; + color: var(--color-text-secondary); + } + } + .provider-name { flex: 1; white-space: nowrap; @@ -550,6 +589,42 @@ } .filter-dropdown-container { + .btn-outline-ghost { + box-sizing: border-box; + height: 34px; + min-width: 34px; + padding: 0; + border-radius: 8px; + border: 1px solid transparent; + display: inline-flex; + align-items: center; + justify-content: center; + transition: background-color 240ms ease, + border-color 240ms ease, + box-shadow 240ms ease, + transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1), + color 240ms ease; + + &:not(.has-active-filters) { + width: 34px; + } + + &.has-active-filters { + width: auto; + padding: 0 8px; + gap: 6px; + } + + &:active { + transform: scale(0.94); + } + + &:hover:not([aria-expanded="true"]) { + background-color: var(--filter-bg); + color: var(--color-text-primary); + } + } + .filter-badge { background-color: var(--filter-bg); color: var(--color-text-primary); @@ -557,7 +632,7 @@ padding: 0.1rem 0.4rem; border-radius: 99px; font-weight: 600; - margin-left: 0.5rem; + margin-left: 0.25rem; } } @@ -796,6 +871,27 @@ &.github .fa-github { color: var(--color-github, #24292e); } &.gitlab .fa-gitlab { color: var(--color-gitlab, #fc6d26); } + + .custom-gitlab-card-badge { + position: absolute; + bottom: -1px; + right: -1px; + width: 14px; + height: 14px; + border-radius: 50%; + background-color: var(--color-surface); + border: 1px solid var(--color-border); + color: var(--color-text-secondary); + display: flex; + align-items: center; + justify-content: center; + box-shadow: var(--shadow-sm); + + .card-server-svg { + width: 7px; + height: 7px; + } + } } .selection-checkbox-overlay { diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.ts b/src/app/components/home/assignment-chooser/assignment-chooser.component.ts index f4db7abb..5b6e2341 100644 --- a/src/app/components/home/assignment-chooser/assignment-chooser.component.ts +++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.ts @@ -1,4 +1,16 @@ -import { Component, OnInit, TemplateRef, ViewChild, ChangeDetectorRef, OnDestroy, HostListener, ElementRef } from "@angular/core"; +import { + Component, + OnInit, + AfterViewInit, + TemplateRef, + ViewChild, + ViewChildren, + QueryList, + ChangeDetectorRef, + OnDestroy, + HostListener, + ElementRef, +} from "@angular/core"; import { Router } from "@angular/router"; import { Assignment } from "@models/Assignment.model"; import { GitProviderType } from "@models/GitAuthProvider.model"; @@ -14,20 +26,33 @@ import { ToastService } from "@services/toast.service"; import { Subscription } from "rxjs"; import * as moment from "moment"; +export interface ProviderFilterPill { + key: string; + label: string; + provider?: GitProviderType; + instanceHost?: string; + instanceName?: string; + isCustom?: boolean; +} + @Component({ selector: "assignment-chooser", templateUrl: "./assignment-chooser.component.html", styleUrls: ["./assignment-chooser.component.scss"], }) -export class AssignmentChooserComponent implements OnInit, OnDestroy { +export class AssignmentChooserComponent implements OnInit, AfterViewInit, OnDestroy { @ViewChild("searchInput") searchInputRef?: ElementRef; + @ViewChildren("pillBtn") pillButtons?: QueryList>; + + indicatorLeft = 0; + indicatorWidth = 100; assignments: any[]; // Using any to attach UI-specific properties temporarily sortField = "lastModificationDate"; sortDirection: "asc" | "desc" = "desc"; - filterType: "all" | "github" | "gitlab" = "all"; + filterType = "all"; searchQuery = ""; searchFocused = false; @@ -58,6 +83,8 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { // Provider split button dropdown state isProviderDropdownOpen = false; lastUsedProvider: GitProviderType = "github"; + lastUsedHost = "github.com"; + lastUsedInstanceName = ""; // Inline edit state editingAssignmentId: number | null = null; @@ -69,6 +96,7 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { private dbSubscription?: Subscription; private overlaySub: Subscription | null = null; private accountsSub?: Subscription; + private pillButtonsSub?: Subscription; private statusPreviewTimeout: any = null; constructor( @@ -101,19 +129,152 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { this.closeAllCreationPopovers(); } + @HostListener("window:resize") + onWindowResize(): void { + this.updateIndicator(); + } + get isSearchExpanded(): boolean { return this.searchFocused || Boolean(this.searchQuery && this.searchQuery.trim().length > 0); } + get providerFilterPills(): ProviderFilterPill[] { + const pills: ProviderFilterPill[] = [{ key: "all", label: "HOME.FILTER.ALL" }]; + + const hasGithub = + this.accountsService.isGithubConnected || (this.assignments && this.assignments.some((a) => !a.provider || a.provider === "github")); + if (hasGithub) { + pills.push({ + key: "github", + label: "HOME.FILTER.GITHUB", + provider: "github", + instanceHost: "github.com", + }); + } + + const hasGitlabCloud = + this.accountsService.isGitlabConnected || + (this.assignments && + this.assignments.some( + (a) => a.provider === "gitlab" && (!a.instanceHost || a.instanceHost === "gitlab.com" || a.resolvedInstanceHost === "gitlab.com"), + )); + if (hasGitlabCloud) { + pills.push({ + key: "gitlab", + label: "HOME.FILTER.GITLAB", + provider: "gitlab", + instanceHost: "gitlab.com", + }); + } + + const customHostMap = new Map(); + + const connectedCustom = this.accountsService.gitlabCustomAuthService?.getAccounts() || []; + connectedCustom.forEach((acc) => { + if (acc.instanceHost) { + customHostMap.set(acc.instanceHost, { + name: acc.instanceName || this.cleanHostname(acc.instanceHost), + isConnected: true, + }); + } + }); + + if (this.assignments) { + this.assignments.forEach((a) => { + const host = a.instanceHost || (a.provider === "gitlab" && a.resolvedInstanceHost !== "gitlab.com" ? a.resolvedInstanceHost : null); + if (a.provider === "gitlab" && host && host !== "gitlab.com" && !customHostMap.has(host)) { + customHostMap.set(host, { + name: a.instanceName || this.cleanHostname(host), + isConnected: this.accountsService.hasAccountForHost("gitlab", host), + }); + } + }); + } + + customHostMap.forEach((info, host) => { + pills.push({ + key: `gitlab:${host}`, + label: `GitLab (${info.name})`, + provider: "gitlab", + instanceHost: host, + instanceName: info.name, + isCustom: true, + }); + }); + + return pills; + } + + get selectedFilterPill(): ProviderFilterPill | undefined { + return this.providerFilterPills.find((p) => p.key === this.filterType); + } + + get isCustomLastUsed(): boolean { + return this.lastUsedProvider === "gitlab" && Boolean(this.lastUsedHost && this.lastUsedHost !== "gitlab.com"); + } + + get canCreateLastUsed(): boolean { + return this.accountsService.hasAccountForHost(this.lastUsedProvider, this.lastUsedHost); + } + + get createButtonLabel(): string { + if (this.lastUsedProvider === "github") { + return this.translateService.instant("HOME.CREATE-ASSIGNMENT-GITHUB"); + } + if (this.lastUsedProvider === "gitlab") { + if (this.isCustomLastUsed) { + return this.translateService.instant("HOME.CREATE-ASSIGNMENT-GITLAB-CUSTOM", { + host: this.lastUsedInstanceName || this.lastUsedHost, + }); + } + return this.translateService.instant("HOME.CREATE-ASSIGNMENT-GITLAB"); + } + return this.translateService.instant("HOME.CREATE-ASSIGNMENT"); + } + + get createButtonTooltip(): string { + if (!this.canCreateLastUsed) { + if (this.lastUsedProvider === "gitlab") { + if (this.isCustomLastUsed) { + return this.translateService.instant("HOME.MUST-LOGIN-ASSIGNMENT-GITLAB-CUSTOM", { + host: this.lastUsedInstanceName || this.lastUsedHost, + }); + } + return this.translateService.instant("HOME.MUST-LOGIN-GITLAB"); + } + return this.translateService.instant("HOME.MUST-LOGIN-GITHUB"); + } + return ""; + } + + get connectedCustomGitlabAccounts(): any[] { + return this.accountsService.gitlabCustomAuthService?.getAccounts() || []; + } + get filteredAssignments() { let result = this.assignments; // Always show the assignment currently being created at the top, even if it doesn't match filters const newAssignment = this.assignments.find((a) => a.id === -1); - // Apply old filterType + // Apply filterType if (this.filterType !== "all") { - result = result.filter((a) => (a as any).uiType === this.filterType || a.id === -1); + if (this.filterType === "github") { + result = result.filter((a) => a.id === -1 || !a.provider || a.provider === "github"); + } else if (this.filterType === "gitlab" || this.filterType === "gitlab-cloud") { + result = result.filter( + (a) => + a.id === -1 || + (a.provider === "gitlab" && (!a.instanceHost || a.instanceHost === "gitlab.com" || a.resolvedInstanceHost === "gitlab.com")), + ); + } else if (this.filterType.startsWith("gitlab:")) { + const targetHost = this.filterType.substring(7); + result = result.filter( + (a) => a.id === -1 || (a.provider === "gitlab" && (a.instanceHost === targetHost || a.resolvedInstanceHost === targetHost)), + ); + } else { + result = result.filter((a) => (a as any).uiType === this.filterType || a.id === -1); + } } // Apply search query @@ -236,8 +397,84 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { } } - setFilter(type: "all" | "github" | "gitlab") { + setFilter(type: string): void { this.filterType = type; + this.updateIndicator(); + this.cdr.markForCheck(); + } + + updateIndicator(): void { + if (!this.pillButtons || this.pillButtons.length === 0) { + return; + } + const pills = this.providerFilterPills; + let activeIndex = pills.findIndex((p) => p.key === this.filterType); + if (activeIndex === -1) { + activeIndex = 0; + } + const buttonsArray = this.pillButtons.toArray(); + const targetBtn = buttonsArray[activeIndex]; + if (targetBtn && targetBtn.nativeElement) { + const el = targetBtn.nativeElement; + const groupEl = el.parentElement; + const groupPaddingLeft = groupEl ? parseFloat(getComputedStyle(groupEl).paddingLeft) || 4 : 4; + this.indicatorLeft = Math.max(0, el.offsetLeft - groupPaddingLeft); + this.indicatorWidth = el.offsetWidth || 100; + this.cdr.markForCheck(); + } + } + + isAssignmentConnected(assignment: any): boolean { + if (!assignment) { + return false; + } + const provider = (assignment.provider || assignment.uiType || "github") as GitProviderType; + const host = assignment.instanceHost || (assignment.resolvedInstanceHost ? assignment.resolvedInstanceHost : undefined); + return this.accountsService.hasAccountForHost(provider, host); + } + + isCustomGitlab(assignment: any): boolean { + if (!assignment) { + return false; + } + const provider = assignment.provider || assignment.uiType; + const host = assignment.instanceHost || assignment.resolvedInstanceHost; + return provider === "gitlab" && Boolean(host && host !== "gitlab.com"); + } + + getAssignmentTooltip(assignment: any): string { + if (this.isAssignmentConnected(assignment)) { + return "HOME.SELECT-ASSIGNMENT-TOOLTIP"; + } + return this.getDisconnectedTooltip(assignment); + } + + getAssignmentEditTooltip(assignment: any): string { + if (this.isAssignmentConnected(assignment)) { + return "HOME.EDIT-ASSIGNMENT-TOOLTIP"; + } + return this.getDisconnectedTooltip(assignment); + } + + getAssignmentDeleteTooltip(assignment: any): string { + if (this.isAssignmentConnected(assignment)) { + return "HOME.DELETE-ASSIGNMENT-TOOLTIP"; + } + return this.getDisconnectedTooltip(assignment); + } + + getDisconnectedTooltip(assignment: any): string { + const provider = assignment?.provider || "github"; + const host = assignment?.instanceHost || assignment?.resolvedInstanceHost; + if (provider === "gitlab") { + if (host && host !== "gitlab.com") { + return this.translateService.instant("HOME.MUST-LOGIN-ASSIGNMENT-GITLAB-CUSTOM", { + host: assignment?.instanceName || host, + }); + } + return this.translateService.instant("HOME.MUST-LOGIN-ASSIGNMENT-GITLAB"); + } + return this.translateService.instant("HOME.MUST-LOGIN-ASSIGNMENT-GITHUB"); } onStatusMouseEnter(status: string) { @@ -298,14 +535,6 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { this.cdr.markForCheck(); } - isAssignmentConnected(assignment: any): boolean { - if (!assignment) { - return false; - } - const provider = (assignment.provider || assignment.uiType || "github") as GitProviderType; - return this.accountsService.hasAccount(provider); - } - get isGithubConnected(): boolean { return this.accountsService.isGithubConnected; } @@ -340,9 +569,28 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { this.accountsSub = this.accountsService.accounts$.subscribe(() => { this.cdr.markForCheck(); + requestAnimationFrame(() => { + this.updateIndicator(); + }); }); } + ngAfterViewInit(): void { + requestAnimationFrame(() => { + requestAnimationFrame(() => { + this.updateIndicator(); + }); + }); + + if (this.pillButtons) { + this.pillButtonsSub = this.pillButtons.changes.subscribe(() => { + requestAnimationFrame(() => { + this.updateIndicator(); + }); + }); + } + } + ngOnDestroy(): void { if (this.dbSubscription) { this.dbSubscription.unsubscribe(); @@ -353,6 +601,9 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { if (this.accountsSub) { this.accountsSub.unsubscribe(); } + if (this.pillButtonsSub) { + this.pillButtonsSub.unsubscribe(); + } if (this.statusPreviewTimeout) { clearTimeout(this.statusPreviewTimeout); } @@ -374,6 +625,14 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { if (savedProvider && (savedProvider === "github" || savedProvider === "gitlab")) { this.lastUsedProvider = savedProvider; } + const savedHost = localStorage.getItem("git4school_last_host"); + if (savedHost) { + this.lastUsedHost = savedHost; + } + const savedName = localStorage.getItem("git4school_last_instance_name"); + if (savedName) { + this.lastUsedInstanceName = savedName; + } } savePreferences() { @@ -426,6 +685,8 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { const lastAssignment = this.assignments.find((a) => a.provider && a.id !== -1); if (lastAssignment && lastAssignment.provider) { this.lastUsedProvider = lastAssignment.provider; + this.lastUsedHost = lastAssignment.instanceHost || (lastAssignment.provider === "gitlab" ? "gitlab.com" : "github.com"); + this.lastUsedInstanceName = lastAssignment.instanceName || ""; } } @@ -434,6 +695,9 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { this.assignments.unshift(newAssignmentObj); } this.cdr.detectChanges(); + requestAnimationFrame(() => { + this.updateIndicator(); + }); }); } @@ -696,9 +960,9 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { selectAssignment(assignment: any) { const provider = assignment.provider || "github"; - if (!this.accountsService.hasAccount(provider)) { - const errorKey = provider === "gitlab" ? "HOME.MUST-LOGIN-ASSIGNMENT-GITLAB" : "HOME.MUST-LOGIN-ASSIGNMENT-GITHUB"; - const msg = this.translateService.instant(errorKey); + const host = assignment.instanceHost || (assignment.resolvedInstanceHost ? assignment.resolvedInstanceHost : undefined); + if (!this.accountsService.hasAccountForHost(provider, host)) { + const msg = this.getDisconnectedTooltip(assignment); this.toastService.warning(this.translateService.instant("WARNING"), msg); return; } @@ -710,24 +974,39 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { } deleteAssignment(assignment: any) { - if (!this.isAssignmentConnected(assignment)) return; + if (!this.isAssignmentConnected(assignment)) { + const msg = this.getDisconnectedTooltip(assignment); + this.toastService.warning(this.translateService.instant("WARNING"), msg); + return; + } this.databaseService.deleteAssignment(assignment.id); } - createAssignment(provider?: GitProviderType, event?: MouseEvent) { + createAssignment(provider?: GitProviderType, instanceHost?: string, instanceName?: string, event?: MouseEvent) { if (event) { event.stopPropagation(); } - const targetProvider: GitProviderType = provider || (this.filterType !== "all" ? this.filterType : this.lastUsedProvider) || "github"; + const targetProvider: GitProviderType = provider || (this.filterType === "github" ? "github" : this.lastUsedProvider) || "github"; + const targetHost = instanceHost || (targetProvider === "gitlab" ? this.lastUsedHost || "gitlab.com" : "github.com"); - if (!this.accountsService.hasAccount(targetProvider)) { + if (!this.accountsService.hasAccountForHost(targetProvider, targetHost)) { if (this.accountsService.isEmpty()) { const msg = this.translateService.instant("HOME.MUST-LOGIN"); this.toastService.warning(this.translateService.instant("WARNING"), msg); return; } - const errorKey = targetProvider === "gitlab" ? "HOME.MUST-LOGIN-GITLAB" : "HOME.MUST-LOGIN-GITHUB"; - const msg = this.translateService.instant(errorKey); + let msg = ""; + if (targetProvider === "gitlab") { + if (targetHost !== "gitlab.com") { + msg = this.translateService.instant("HOME.MUST-LOGIN-ASSIGNMENT-GITLAB-CUSTOM", { + host: instanceName || targetHost, + }); + } else { + msg = this.translateService.instant("HOME.MUST-LOGIN-GITLAB"); + } + } else { + msg = this.translateService.instant("HOME.MUST-LOGIN-GITHUB"); + } this.toastService.warning(this.translateService.instant("WARNING"), msg); return; } @@ -736,13 +1015,25 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { this.closeAllCreationPopovers(); this.lastUsedProvider = targetProvider; + this.lastUsedHost = targetHost; + this.lastUsedInstanceName = instanceName || ""; try { localStorage.setItem("git4school_last_provider", targetProvider); + localStorage.setItem("git4school_last_host", targetHost); + if (instanceName) { + localStorage.setItem("git4school_last_instance_name", instanceName); + } else { + localStorage.removeItem("git4school_last_instance_name"); + } } catch (e) {} let assignment = new Assignment(); assignment.id = -1; // Temporary ID for creation assignment.provider = targetProvider; + assignment.instanceHost = targetHost; + if (instanceName) { + assignment.instanceName = instanceName; + } (assignment as any).uiType = targetProvider; (assignment as any).uiStatus = "prepared"; this.assignments.unshift(assignment); // Add to the top @@ -761,17 +1052,12 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { return; } - /* If a specific provider filter is active, create directly with that provider */ - if (this.filterType === "github") { - this.createAssignment("github"); - return; - } - if (this.filterType === "gitlab") { - this.createAssignment("gitlab"); + if (this.selectedFilterPill && this.selectedFilterPill.key !== "all") { + this.createAssignment(this.selectedFilterPill.provider, this.selectedFilterPill.instanceHost, this.selectedFilterPill.instanceName); return; } - this.createAssignment(this.lastUsedProvider); + this.createAssignment(this.lastUsedProvider, this.lastUsedHost, this.lastUsedInstanceName); } toggleProviderDropdown(event?: MouseEvent): void { @@ -790,6 +1076,10 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { return item?.id !== undefined ? item.id : index; } + trackByPillKey(index: number, pill: ProviderFilterPill): string { + return pill.key; + } + editAssignment(assignment: any) { if (!this.isAssignmentConnected(assignment) && assignment.id !== -1) return; @@ -824,8 +1114,16 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { onAssignmentSaved(assignment: Assignment) { if (assignment && assignment.provider) { this.lastUsedProvider = assignment.provider; + this.lastUsedHost = assignment.instanceHost || (assignment.provider === "gitlab" ? "gitlab.com" : "github.com"); + this.lastUsedInstanceName = assignment.instanceName || ""; try { localStorage.setItem("git4school_last_provider", assignment.provider); + localStorage.setItem("git4school_last_host", this.lastUsedHost); + if (assignment.instanceName) { + localStorage.setItem("git4school_last_instance_name", assignment.instanceName); + } else { + localStorage.removeItem("git4school_last_instance_name"); + } } catch (e) {} } this.isCreatingNew = false; @@ -862,4 +1160,12 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { this.importDB(file); } } + + private cleanHostname(host: string): string { + return host + .replace(/^https?:\/\//, "") + .replace(/^www\./, "") + .replace(/^gitlab\./, "") + .replace(/\/$/, ""); + } } diff --git a/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.ts b/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.ts index ced73f68..101137c6 100644 --- a/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.ts +++ b/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.ts @@ -51,7 +51,7 @@ export class EditRepositoriesComponent extends BaseTabEditConfigurationComponent } get isConnectedToProvider(): boolean { - return this.accountsService.hasAccount(this.provider); + return this.accountsService.hasAccountForHost(this.provider, this.assignment?.instanceHost || this.assignment?.resolvedInstanceHost); } private rotateMatrix: { [key: string]: SortDirection } = { @@ -288,6 +288,7 @@ export class EditRepositoriesComponent extends BaseTabEditConfigurationComponent let modalReference: CustomModalRef = this.modalService.open(ModalAddRepositoriesComponent, { size: "lg" }); modalReference.componentInstance.repoList = this.getFormControls.map((row) => Repository.withJSON(row.value)); modalReference.componentInstance.provider = this.provider; + modalReference.componentInstance.instanceHost = this.assignment?.instanceHost || this.assignment?.resolvedInstanceHost; modalReference.result.then( (result) => { diff --git a/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.ts b/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.ts index d5d455ef..da43eb9f 100644 --- a/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.ts +++ b/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.ts @@ -16,6 +16,7 @@ export class ModalAddRepositoriesComponent implements OnInit, OnDestroy, AfterVi @ViewChild("reposTable", { read: ElementRef }) datatable: ElementRef; @Input() repoList: Repository[]; @Input() provider: GitProviderType = "github"; + @Input() instanceHost?: string; rows: Repository[]; nameMatches: Repository[] = []; contentMatches: Repository[] = []; @@ -304,11 +305,17 @@ export class ModalAddRepositoriesComponent implements OnInit, OnDestroy, AfterVi } private updateResultsWithAuthenticatedUser(cursor?: string, isFirstPage = false) { - this.processIntermediateResponse(this.commitsService.getRepositoriesByAuthenticatedUser(cursor, 100, this.provider), isFirstPage); + this.processIntermediateResponse( + this.commitsService.getRepositoriesByAuthenticatedUser(cursor, 100, this.provider, this.instanceHost), + isFirstPage, + ); } private updateResultsWithSearchFilter(searchFilter: string, cursor?: string, isFirstPage = false) { - this.processIntermediateResponse(this.commitsService.getRepositoriesBySearch(searchFilter, cursor, 100, this.provider), isFirstPage); + this.processIntermediateResponse( + this.commitsService.getRepositoriesBySearch(searchFilter, cursor, 100, this.provider, this.instanceHost), + isFirstPage, + ); } private loadResults() { diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html index 33ae8ae1..1ba9d327 100644 --- a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html +++ b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html @@ -35,7 +35,7 @@
- +
- +
@@ -104,13 +104,44 @@
- - {{ 'ACCOUNTS.COMING_SOON' | translate }} - +
+ + + {{ customInstancesCountText }} + + +
{{ 'ACCOUNTS.PLATFORM_GITLAB_SELF_TITLE' | translate }}
+ + +
+ +
+ +
@@ -137,7 +168,12 @@
- {{ (selectedPlatform === 'github' ? 'ACCOUNTS.PLATFORM_GITHUB_TITLE' : (selectedPlatform === 'gitlab-cloud' ? 'ACCOUNTS.PLATFORM_GITLAB_TITLE' : 'ACCOUNTS.PLATFORM_GITLAB_SELF_TITLE')) | translate }} + {{ 'ACCOUNTS.PLATFORM_GITHUB_TITLE' | translate }} + {{ 'ACCOUNTS.PLATFORM_GITLAB_TITLE' | translate }} + + GitLab ({{ acc.instanceName || acc.instanceHost }}) + {{ 'ACCOUNTS.PLATFORM_GITLAB_SELF_TITLE' | translate }} + {{ platformAuthTypeKey | translate }} @@ -155,7 +191,7 @@
- + @@ -166,80 +202,187 @@
-
-

- {{ 'ACCOUNTS.CUSTOM_GITLAB_INFO' | translate }} -

+ + +
+ -
- - -
+
+ -
- - - {{ 'ACCOUNTS.PAT_HELP' | translate }} + +
+ + + + +
+

+ {{ 'ACCOUNTS.CUSTOM_GITLAB_INFO' | translate }} +

+ +
+ + +
- -
-
- -
- +
+ + +
-
+ @@ -293,7 +436,6 @@
- - - - - diff --git a/src/app/shared/ui/dev-bar/dev-bar.component.ts b/src/app/shared/ui/dev-bar/dev-bar.component.ts index dc9bae93..c9b56bda 100644 --- a/src/app/shared/ui/dev-bar/dev-bar.component.ts +++ b/src/app/shared/ui/dev-bar/dev-bar.component.ts @@ -4,6 +4,7 @@ import { Subscription } from "rxjs"; import { filter } from "rxjs/operators"; import { environment } from "@environments/environment"; import { DevFlagsService } from "@services/dev-flags.service"; +import { MockGitlabInstanceService } from "@app/dev-mock/mock-gitlab-instance.service"; import { ToastService } from "@services/toast.service"; import { ThemeService } from "@services/theme.service"; import { GithubAuthService } from "@services/github-auth.service"; @@ -35,6 +36,7 @@ export class DevBarComponent implements OnInit, OnDestroy { constructor( public devFlagsService: DevFlagsService, + public mockGitlabInstanceService: MockGitlabInstanceService, public toastService: ToastService, public themeService: ThemeService, public githubAuthService: GithubAuthService, @@ -138,17 +140,11 @@ export class DevBarComponent implements OnInit, OnDestroy { this.closePopover(); } - /* Feature Flags */ - toggleGitlabCloud(): void { - this.devFlagsService.toggleGitlabCloud(); - const state = this.devFlagsService.gitlabCloudEnabled ? "activé" : "désactivé"; - this.toastService.success("Feature Flag", `GitLab ${state}`); - } - - toggleGitlabCustom(): void { - this.devFlagsService.toggleGitlabCustom(); - const state = this.devFlagsService.gitlabCustomEnabled ? "activé" : "désactivé"; - this.toastService.success("Feature Flag", `GitLab Auto-hébergé ${state}`); + /* Mock GitLab Instance */ + async toggleMockGitlab(): Promise { + const active = await this.mockGitlabInstanceService.toggleMock(); + const state = active ? "activé (prof.turing @ gitlab.univ-tlse3.fr)" : "désactivé"; + this.toastService.success("Mock GitLab", `Mock d'instance GitLab ${state}`); } /* Quick Utilities */ diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 51eab778..44c46e12 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -167,6 +167,8 @@ "MUST-LOGIN-GITLAB": "Connect a GitLab account to create an assignment", "MUST-LOGIN-ASSIGNMENT-GITHUB": "Connect a GitHub account to access this assignment", "MUST-LOGIN-ASSIGNMENT-GITLAB": "Connect a GitLab account to access this assignment", + "MUST-LOGIN-ASSIGNMENT-GITLAB-CUSTOM": "Connect the GitLab {{host}} account to access this assignment", + "CREATE-ASSIGNMENT-GITLAB-CUSTOM": "New GitLab Assignment ({{host}})", "FILTER": { "STATUS": "Status", "COURSE": "Course", @@ -178,7 +180,8 @@ "RESET": "Reset", "ALL": "All", "GITHUB": "GitHub", - "GITLAB": "GitLab" + "GITLAB": "GitLab", + "GITLAB_CLOUD": "GitLab.com" }, "DURATION": { "DAYS": "d", @@ -620,7 +623,16 @@ "AUTH_TYPE_OAUTH_PKCE": "OAuth 2.0 PKCE", "AUTH_TYPE_PAT": "Token PAT", "REMEMBER_ME": "Stay signed in on this device", - "REMEMBER_ME_TOOLTIP": "The token is stored in the browser's localStorage. Convenient to avoid signing in repeatedly, but vulnerable to XSS and physical device access. Only enable on a trusted personal computer." + "REMEMBER_ME_TOOLTIP": "The token is stored in the browser's localStorage. Convenient to avoid signing in repeatedly, but vulnerable to XSS and physical device access. Only enable on a trusted personal computer.", + "INSTANCE_ALIAS_LABEL": "Server Name / Alias (optional)", + "INSTANCE_ALIAS_PLACEHOLDER": "E.g., University, Lab...", + "ADD_ANOTHER_INSTANCE": "Connect another instance", + "INSTANCES_COUNT_SINGULAR": "1 instance", + "INSTANCES_COUNT_PLURAL": "{{count}} instances", + "INVALID_PAT": "Invalid or expired Personal Access Token (PAT) (required scopes: read_api, read_user).", + "SERVER_UNREACHABLE": "Unable to reach the GitLab server. Please verify the instance URL.", + "INVALID_HOST": "For gitlab.com, please use the GitLab Cloud option above.", + "SWITCH_INSTANCE": "Switch instance" }, "QUESTIONS-ASSISTANT": { "TRIGGER_BUTTON": "Options & generator", diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index 753b1912..bc712b9b 100644 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -166,6 +166,8 @@ "MUST-LOGIN-GITLAB": "Connectez un compte GitLab pour créer un devoir", "MUST-LOGIN-ASSIGNMENT-GITHUB": "Connectez un compte GitHub pour accéder à ce devoir", "MUST-LOGIN-ASSIGNMENT-GITLAB": "Connectez un compte GitLab pour accéder à ce devoir", + "MUST-LOGIN-ASSIGNMENT-GITLAB-CUSTOM": "Connectez le compte GitLab {{host}} pour accéder à ce devoir", + "CREATE-ASSIGNMENT-GITLAB-CUSTOM": "Nouveau devoir GitLab ({{host}})", "FILTER": { "STATUS": "Statut", "COURSE": "Cours", @@ -177,7 +179,8 @@ "RESET": "Réinitialiser", "ALL": "Tous", "GITHUB": "GitHub", - "GITLAB": "GitLab" + "GITLAB": "GitLab", + "GITLAB_CLOUD": "GitLab.com" }, "DURATION": { "DAYS": "j", @@ -620,7 +623,16 @@ "AUTH_TYPE_OAUTH_PKCE": "OAuth 2.0 PKCE", "AUTH_TYPE_PAT": "Token PAT", "REMEMBER_ME": "Rester connecté sur cet appareil", - "REMEMBER_ME_TOOLTIP": "Le jeton sera stocké dans le localStorage du navigateur. Pratique pour éviter de vous reconnecter, mais sensible aux failles XSS et à l'accès physique à l'ordinateur. À n'activer que sur votre machine personnelle." + "REMEMBER_ME_TOOLTIP": "Le jeton sera stocké dans le localStorage du navigateur. Pratique pour éviter de vous reconnecter, mais sensible aux failles XSS et à l'accès physique à l'ordinateur. À n'activer que sur votre machine personnelle.", + "INSTANCE_ALIAS_LABEL": "Nom / Alias du serveur (facultatif)", + "INSTANCE_ALIAS_PLACEHOLDER": "Ex: Université, Labo...", + "ADD_ANOTHER_INSTANCE": "Connecter une autre instance", + "INSTANCES_COUNT_SINGULAR": "1 instance", + "INSTANCES_COUNT_PLURAL": "{{count}} instances", + "INVALID_PAT": "Jeton d'accès personnel (PAT) invalide ou expiré (droits requis : read_api, read_user).", + "SERVER_UNREACHABLE": "Impossible de joindre le serveur GitLab. Vérifiez l'URL de l'instance.", + "INVALID_HOST": "Pour gitlab.com, utilisez l'option GitLab Cloud ci-dessus.", + "SWITCH_INSTANCE": "Changer d'instance" }, "QUESTIONS-ASSISTANT": { "TRIGGER_BUTTON": "Options & générateur", diff --git a/src/assets/i18n/ru.json b/src/assets/i18n/ru.json index 060867fc..e3289877 100644 --- a/src/assets/i18n/ru.json +++ b/src/assets/i18n/ru.json @@ -165,6 +165,8 @@ "MUST-LOGIN-GITLAB": "Подключите GitLab для создания задания", "MUST-LOGIN-ASSIGNMENT-GITHUB": "Подключите аккаунт GitHub для доступа к этому заданию", "MUST-LOGIN-ASSIGNMENT-GITLAB": "Подключите аккаунт GitLab для доступа к этому заданию", + "MUST-LOGIN-ASSIGNMENT-GITLAB-CUSTOM": "Подключите аккаунт GitLab {{host}} для доступа к этому заданию", + "CREATE-ASSIGNMENT-GITLAB-CUSTOM": "Новое задание GitLab ({{host}})", "FILTER": { "STATUS": "Статус", "COURSE": "Курс", @@ -176,7 +178,8 @@ "RESET": "Сбросить", "ALL": "Все", "GITHUB": "GitHub", - "GITLAB": "GitLab" + "GITLAB": "GitLab", + "GITLAB_CLOUD": "GitLab.com" }, "DURATION": { "DAYS": "дн", @@ -617,7 +620,16 @@ "AUTH_TYPE_OAUTH_PKCE": "OAuth 2.0 PKCE", "AUTH_TYPE_PAT": "Токен PAT", "REMEMBER_ME": "Оставаться в системе на этом устройстве", - "REMEMBER_ME_TOOLTIP": "Токен сохраняется в localStorage браузера. Удобно, чтобы не входить повторно, но уязвимо к XSS и физическому доступу к компьютеру. Включайте только на личном доверенном устройстве." + "REMEMBER_ME_TOOLTIP": "Токен сохраняется в localStorage браузера. Удобно, чтобы не входить повторно, но уязвимо к XSS и физическому доступу к компьютеру. Включайте только на личном доверенном устройстве.", + "INSTANCE_ALIAS_LABEL": "Имя / Псевдоним сервера (необязательно)", + "INSTANCE_ALIAS_PLACEHOLDER": "Напр., Университет, Лаборатория...", + "ADD_ANOTHER_INSTANCE": "Подключить другой инстанс", + "INSTANCES_COUNT_SINGULAR": "1 инстанс", + "INSTANCES_COUNT_PLURAL": "{{count}} инстансов", + "INVALID_PAT": "Недействительный или просроченный Personal Access Token (PAT) (требуются права: read_api, read_user).", + "SERVER_UNREACHABLE": "Не удается подключиться к серверу GitLab. Проверьте URL инстанса.", + "INVALID_HOST": "Для gitlab.com используйте опцию GitLab Cloud выше.", + "SWITCH_INSTANCE": "Сменить инстанс" }, "QUESTIONS-ASSISTANT": { "TRIGGER_BUTTON": "Опции и генератор", From a738343966602568f7d59dc228c52a9e346acb13 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Fri, 18 Sep 2026 21:19:29 +0200 Subject: [PATCH 06/23] =?UTF-8?q?=F0=9F=90=9B=20Fix=20unit=20test=20suites?= =?UTF-8?q?=20for=20DevFlagsService,=20AccountsService,=20and=20AddAccount?= =?UTF-8?q?ModalComponent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../add-account-modal.component.spec.ts | 15 ++-- .../add-account-modal.component.ts | 25 +++--- src/app/services/accounts.service.spec.ts | 79 ++++++++++++++++++- src/app/services/accounts.service.ts | 44 ++++++----- src/app/services/dev-flags.service.ts | 8 +- 5 files changed, 129 insertions(+), 42 deletions(-) diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.spec.ts b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.spec.ts index 28c778f9..6a8757d3 100644 --- a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.spec.ts +++ b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.spec.ts @@ -68,13 +68,13 @@ describe("AddAccountModalComponent", () => { gitlabAuthSpy.getAccount.and.returnValue(null); gitlabAuthSpy.getProfileUrl.and.returnValue("https://gitlab.com"); - gitlabCustomAuthSpy = jasmine.createSpyObj("GitlabCustomAuthService", [ - "getAccounts", - "getAccount", - "getProfileUrl", - "connectInstance", - "disconnectInstance", - ]); + gitlabCustomAuthSpy = jasmine.createSpyObj( + "GitlabCustomAuthService", + ["getAccounts", "getAccount", "getProfileUrl", "connectInstance", "disconnectInstance"], + { + accountsChange$: new BehaviorSubject([]).asObservable(), + }, + ); gitlabCustomAuthSpy.getAccounts.and.returnValue([]); gitlabCustomAuthSpy.getAccount.and.returnValue(null); gitlabCustomAuthSpy.getProfileUrl.and.returnValue("https://gitlab.example.com"); @@ -85,6 +85,7 @@ describe("AddAccountModalComponent", () => { isGithubConnected: true, isGitlabConnected: false, }); + (accountsServiceSpy as any).gitlabAuthService = gitlabAuthSpy; (accountsServiceSpy as any).gitlabCustomAuthService = gitlabCustomAuthSpy; accountsServiceSpy.getProvider.and.callFake((type: string) => { if (type === "github") return githubAuthSpy; diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.ts b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.ts index f5861107..0a4ed9f2 100644 --- a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.ts +++ b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.ts @@ -18,7 +18,7 @@ export class AddAccountModalComponent implements OnInit, OnDestroy { isConnecting = false; isConfirmingDisconnect = false; errorMessage = ""; - rememberMe = true; + rememberMe = false; gitlabInstanceUrl = ""; gitlabInstanceAlias = ""; @@ -64,11 +64,11 @@ export class AddAccountModalComponent implements OnInit, OnDestroy { } get isGitlabConnected(): boolean { - return this.accountsService.gitlabAuthService.isSignedIn(); + return Boolean(this.accountsService.gitlabAuthService?.isSignedIn() || this.accountsService.getProvider("gitlab")?.isSignedIn()); } get customGitlabAccounts(): Account[] { - return this.accountsService.gitlabCustomAuthService.getAccounts(); + return this.accountsService.gitlabCustomAuthService?.getAccounts() || []; } get hasConnectedCustomInstances(): boolean { @@ -85,7 +85,7 @@ export class AddAccountModalComponent implements OnInit, OnDestroy { get selectedCustomAccount(): Account | null { if (this.selectedCustomInstanceHost) { - return this.accountsService.gitlabCustomAuthService.getAccount(this.selectedCustomInstanceHost); + return this.accountsService.gitlabCustomAuthService?.getAccount(this.selectedCustomInstanceHost) || null; } return this.customGitlabAccounts[0] || null; } @@ -177,9 +177,16 @@ export class AddAccountModalComponent implements OnInit, OnDestroy { } selectPlatform(platform: "github" | "gitlab-cloud" | "gitlab-custom"): void { - this.selectedPlatform = platform; - this.errorMessage = ""; - this.isCustomDropdownOpen = false; + const allowed: Record = { + github: true, + "gitlab-cloud": true, + "gitlab-custom": this.devFlagsService.gitlabCustomEnabled, + }; + if (allowed[platform]) { + this.selectedPlatform = platform; + this.errorMessage = ""; + this.isCustomDropdownOpen = false; + } } onCustomCardClick(event: MouseEvent): void { @@ -188,15 +195,13 @@ export class AddAccountModalComponent implements OnInit, OnDestroy { return; } - const clickedChevronOrBadge = Boolean(target?.closest(".card-chevron") || target?.closest(".status-pill")); - if (this.selectedPlatform !== "gitlab-custom") { this.selectedPlatform = "gitlab-custom"; this.errorMessage = ""; if (this.hasConnectedCustomInstances) { this.selectedCustomInstanceHost = this.customGitlabAccounts[0].instanceHost; this.showAddCustomInstanceForm = false; - this.isCustomDropdownOpen = clickedChevronOrBadge; + this.isCustomDropdownOpen = true; } else { this.showAddCustomInstanceForm = true; this.isCustomDropdownOpen = false; diff --git a/src/app/services/accounts.service.spec.ts b/src/app/services/accounts.service.spec.ts index a51244b3..8d5ebab7 100644 --- a/src/app/services/accounts.service.spec.ts +++ b/src/app/services/accounts.service.spec.ts @@ -2,16 +2,20 @@ import { TestBed } from "@angular/core/testing"; import { AccountsService } from "./accounts.service"; import { GithubAuthService, AuthState } from "./github-auth.service"; import { GitlabAuthService, GitlabAuthState } from "./gitlab-auth.service"; +import { GitlabCustomAuthService } from "./gitlab-custom-auth.service"; import { GithubDataService } from "./github-data.service"; import { GitlabDataService } from "./gitlab-data.service"; +import { Account } from "@models/Account.model"; import { BehaviorSubject } from "rxjs"; describe("AccountsService", () => { let service: AccountsService; let authChangeMock$: BehaviorSubject; let gitlabAuthChangeMock$: BehaviorSubject; + let customAuthChangeMock$: BehaviorSubject; let githubAuthServiceSpy: jasmine.SpyObj; let gitlabAuthServiceSpy: jasmine.SpyObj; + let gitlabCustomAuthSpy: jasmine.SpyObj; beforeEach(() => { authChangeMock$ = new BehaviorSubject({ @@ -28,6 +32,8 @@ describe("AccountsService", () => { user: null, }); + customAuthChangeMock$ = new BehaviorSubject([]); + githubAuthServiceSpy = { provider: "github", name: "GitHub", @@ -56,11 +62,29 @@ describe("AccountsService", () => { currentUser: null, } as any; + gitlabCustomAuthSpy = jasmine.createSpyObj( + "GitlabCustomAuthService", + ["getAccounts", "getAccount", "hasAccount", "getProfileUrl", "connectInstance", "disconnectInstance"], + { + accountsChange$: customAuthChangeMock$.asObservable(), + }, + ); + gitlabCustomAuthSpy.getAccounts.and.returnValue([]); + gitlabCustomAuthSpy.getAccount.and.returnValue(null); + gitlabCustomAuthSpy.getProfileUrl.and.callFake((host: string, u: string) => { + const clean = (host || "") + .trim() + .replace(/^https?:\/\//i, "") + .replace(/\/.*$/, ""); + return `https://${clean}/${encodeURIComponent(u)}`; + }); + TestBed.configureTestingModule({ providers: [ AccountsService, { provide: GithubAuthService, useValue: githubAuthServiceSpy }, { provide: GitlabAuthService, useValue: gitlabAuthServiceSpy }, + { provide: GitlabCustomAuthService, useValue: gitlabCustomAuthSpy }, { provide: GithubDataService, useValue: null }, { provide: GitlabDataService, useValue: null }, ], @@ -229,9 +253,62 @@ describe("AccountsService", () => { it("should return data service if registered", () => { const fakeGithubData = { provider: "github" } as any; const fakeGitlabData = { provider: "gitlab" } as any; - const customService = new AccountsService(githubAuthServiceSpy, gitlabAuthServiceSpy, fakeGithubData, fakeGitlabData); + const customService = new AccountsService( + githubAuthServiceSpy, + gitlabAuthServiceSpy, + gitlabCustomAuthSpy, + fakeGithubData, + fakeGitlabData, + ); expect(customService.getDataService("github")).toBe(fakeGithubData); expect(customService.getDataService("gitlab")).toBe(fakeGitlabData); }); + + it("should emit custom GitLab accounts and consider GitLab connected", (done) => { + const customAccount: Account = { + id: "acc-gitlab-custom", + provider: "gitlab", + instanceHost: "gitlab.univ-tlse3.fr", + instanceName: "UT3", + username: "prof.turing", + avatarUrl: null, + isCurrent: false, + authType: "pat", + }; + + gitlabCustomAuthSpy.getAccounts.and.returnValue([customAccount]); + gitlabCustomAuthSpy.hasAccount.and.callFake((host: string) => host === "gitlab.univ-tlse3.fr"); + + customAuthChangeMock$.next([customAccount]); + + service.accounts$.subscribe((accounts) => { + const found = accounts.find((a) => a.instanceHost === "gitlab.univ-tlse3.fr"); + if (found) { + expect(found.username).toBe("prof.turing"); + expect(service.isGitlabConnected).toBeTrue(); + expect(service.hasAccountForHost("gitlab", "gitlab.univ-tlse3.fr")).toBeTrue(); + done(); + } + }); + }); + + it("should disconnect custom GitLab account via gitlabCustomAuthService", () => { + const customAccount: Account = { + id: "acc-gitlab-custom", + provider: "gitlab", + instanceHost: "gitlab.univ-tlse3.fr", + instanceName: "UT3", + username: "prof.turing", + avatarUrl: null, + isCurrent: false, + authType: "pat", + }; + + gitlabCustomAuthSpy.getAccounts.and.returnValue([customAccount]); + customAuthChangeMock$.next([customAccount]); + + service.disconnectAccount("acc-gitlab-custom"); + expect(gitlabCustomAuthSpy.disconnectInstance).toHaveBeenCalledWith("gitlab.univ-tlse3.fr"); + }); }); diff --git a/src/app/services/accounts.service.ts b/src/app/services/accounts.service.ts index fbda5147..d4d230cc 100644 --- a/src/app/services/accounts.service.ts +++ b/src/app/services/accounts.service.ts @@ -23,7 +23,7 @@ export class AccountsService implements OnDestroy { constructor( public githubAuthService: GithubAuthService, public gitlabAuthService: GitlabAuthService, - public gitlabCustomAuthService: GitlabCustomAuthService, + @Optional() public gitlabCustomAuthService?: GitlabCustomAuthService, @Optional() public githubDataService?: GithubDataService, @Optional() public gitlabDataService?: GitlabDataService, ) { @@ -32,11 +32,13 @@ export class AccountsService implements OnDestroy { this.registerProvider(this.githubAuthService); this.registerProvider(this.gitlabAuthService); - this.authSubscription.add( - this.gitlabCustomAuthService.accountsChange$.subscribe(() => { - this.updateAccounts(); - }), - ); + if (this.gitlabCustomAuthService?.accountsChange$) { + this.authSubscription.add( + this.gitlabCustomAuthService.accountsChange$.subscribe(() => { + this.updateAccounts(); + }), + ); + } if (this.githubDataService) { this.dataServices.set("github", this.githubDataService); @@ -57,12 +59,14 @@ export class AccountsService implements OnDestroy { } get isGitlabConnected(): boolean { - return this.gitlabAuthService.isSignedIn() || this.gitlabCustomAuthService.getAccounts().length > 0; + const customCount = this.gitlabCustomAuthService?.getAccounts?.()?.length || 0; + return this.gitlabAuthService.isSignedIn() || customCount > 0; } hasAccount(providerType: GitProviderType): boolean { if (providerType === "gitlab") { - return Boolean(this.gitlabAuthService.isSignedIn() || this.gitlabCustomAuthService.getAccounts().length > 0); + const customCount = this.gitlabCustomAuthService?.getAccounts?.()?.length || 0; + return Boolean(this.gitlabAuthService.isSignedIn() || customCount > 0); } return Boolean(this.providers.get(providerType)?.isSignedIn()); } @@ -75,7 +79,7 @@ export class AccountsService implements OnDestroy { if (!instanceHost || instanceHost === "gitlab.com") { return this.gitlabAuthService.isSignedIn(); } - return this.gitlabCustomAuthService.hasAccount(instanceHost); + return !!this.gitlabCustomAuthService?.hasAccount?.(instanceHost); } return false; } @@ -99,17 +103,17 @@ export class AccountsService implements OnDestroy { disconnectAccount(id: string): void { const account = this.currentAccounts.find((a) => a.id === id); if (account) { - if (account.authType === "pat" || (account.instanceHost && account.instanceHost !== "gitlab.com")) { - this.gitlabCustomAuthService.disconnectInstance(account.instanceHost); + if (account.authType === "pat" || (account.provider === "gitlab" && account.instanceHost && account.instanceHost !== "gitlab.com")) { + this.gitlabCustomAuthService?.disconnectInstance(account.instanceHost); return; } this.providers.get(account.provider)?.signOut(); return; } - const customMatch = this.gitlabCustomAuthService.getAccounts().find((a) => a.id === id || a.instanceHost === id); + const customMatch = this.gitlabCustomAuthService?.getAccounts?.()?.find((a) => a.id === id || a.instanceHost === id); if (customMatch) { - this.gitlabCustomAuthService.disconnectInstance(customMatch.instanceHost); + this.gitlabCustomAuthService?.disconnectInstance(customMatch.instanceHost); return; } @@ -129,17 +133,17 @@ export class AccountsService implements OnDestroy { if (!account?.username) { return "#"; } + const cleanHost = account.instanceHost ? account.instanceHost.replace(/^https?:\/\//i, "").replace(/\/.*$/, "") : ""; const provider = account.provider ? this.providers.get(account.provider as GitProviderType) : undefined; - if (account.provider === "gitlab" && account.instanceHost && account.instanceHost !== "gitlab.com") { - return this.gitlabCustomAuthService.getProfileUrl(account.instanceHost, account.username); + if (account.provider === "gitlab" && cleanHost && cleanHost !== "gitlab.com" && this.gitlabCustomAuthService?.getProfileUrl) { + return this.gitlabCustomAuthService.getProfileUrl(cleanHost, account.username); } - if (provider && (!account.instanceHost || account.instanceHost === provider.instanceHost)) { + if (provider && (!cleanHost || cleanHost === provider.instanceHost)) { return provider.getProfileUrl(account.username); } const fallbackHost = provider?.instanceHost || (account.provider === "gitlab" ? "gitlab.com" : "github.com"); - const host = account.instanceHost || fallbackHost; - const cleanHost = host.replace(/^https?:\/\//i, "").replace(/\/.*$/, ""); - return `https://${cleanHost}/${encodeURIComponent(account.username)}`; + const host = cleanHost || fallbackHost; + return `https://${host}/${encodeURIComponent(account.username)}`; } private registerProvider(provider: GitAuthProvider): void { @@ -160,7 +164,7 @@ export class AccountsService implements OnDestroy { accounts.push(acc); } } - const customAccounts = this.gitlabCustomAuthService.getAccounts(); + const customAccounts = this.gitlabCustomAuthService?.getAccounts?.() || []; for (const cAcc of customAccounts) { cAcc.isCurrent = false; accounts.push(cAcc); diff --git a/src/app/services/dev-flags.service.ts b/src/app/services/dev-flags.service.ts index e50e7dda..9c6acefb 100644 --- a/src/app/services/dev-flags.service.ts +++ b/src/app/services/dev-flags.service.ts @@ -10,8 +10,8 @@ export interface DevFlagsState { const STORAGE_KEY = "git4school_dev_flags"; const DEFAULT_FLAGS: DevFlagsState = { - gitlabCloudEnabled: true, - gitlabCustomEnabled: true, + gitlabCloudEnabled: false, + gitlabCustomEnabled: false, }; @Injectable({ @@ -21,8 +21,8 @@ export class DevFlagsService { public gitlabCloudEnabled$: Observable; public gitlabCustomEnabled$: Observable; - private gitlabCloudSubject = new BehaviorSubject(true); - private gitlabCustomSubject = new BehaviorSubject(true); + private gitlabCloudSubject = new BehaviorSubject(false); + private gitlabCustomSubject = new BehaviorSubject(false); constructor() { this.gitlabCloudEnabled$ = this.gitlabCloudSubject.asObservable(); From ec46d4aad4f3ea4af1cfc855186a9a0010eb0074 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Mon, 21 Sep 2026 13:10:20 +0200 Subject: [PATCH 07/23] =?UTF-8?q?=E2=9C=A8=20Add=20visual=20anonymization?= =?UTF-8?q?=20mode=20for=20classroom=20presentations?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../graphs/commits/commits.component.html | 6 +- .../graphs/commits/commits.component.ts | 33 +++- .../questions-completion.component.ts | 160 +++++++--------- .../graphs/students/students.component.html | 2 +- .../graphs/students/students.component.ts | 29 ++- .../app-nav-layout.component.html | 18 ++ .../app-nav-layout.component.ts | 7 + .../sidebar-settings.component.html | 15 ++ .../sidebar-settings.component.ts | 2 + .../services/anonymization.service.spec.ts | 92 +++++++++ src/app/services/anonymization.service.ts | 94 +++++++++ .../shortcuts-modal.component.html | 4 + src/assets/i18n/en.json | 13 +- src/assets/i18n/fr.json | 13 +- src/assets/i18n/ru.json | 13 +- src/styles/_components.scss | 181 +++++++++++++++++- 16 files changed, 563 insertions(+), 119 deletions(-) create mode 100644 src/app/services/anonymization.service.spec.ts create mode 100644 src/app/services/anonymization.service.ts diff --git a/src/app/components/graphs/commits/commits.component.html b/src/app/components/graphs/commits/commits.component.html index 2fa36eb8..2f49d2a2 100644 --- a/src/app/components/graphs/commits/commits.component.html +++ b/src/app/components/graphs/commits/commits.component.html @@ -339,9 +339,9 @@
{{ "OVERVIEW-GRA >

{{ commit_date_format(hovered_commit.commitDate) }}

{{ hovered_commit.message }}

-

{{ hovered_commit.author }}

+

{{ getCommitAuthorDisplayName(hovered_commit) }}

-
+
{{ 'COMMIT-TOOLTIP.OPEN_COMMIT' | translate }}
@@ -357,7 +357,7 @@
{{ "OVERVIEW-GRA id="repository_hover" >
{{ hovered_repository.name }}
-
+
{{ 'OVERVIEW-GRAPH.OPEN-REPO' | translate }} diff --git a/src/app/components/graphs/commits/commits.component.ts b/src/app/components/graphs/commits/commits.component.ts index 1a1565d4..1a8914f5 100644 --- a/src/app/components/graphs/commits/commits.component.ts +++ b/src/app/components/graphs/commits/commits.component.ts @@ -25,6 +25,7 @@ import { ToastService } from "@services/toast.service"; import { ThemeService } from "@services/theme.service"; import { TooltipService } from "@services/tooltip.service"; import { OverlayManagerService, OverlayType } from "@services/overlay-manager.service"; +import { AnonymizationService } from "@services/anonymization.service"; import { Subject, Subscription, concat } from "rxjs"; import { takeUntil } from "rxjs/operators"; import { BaseGraphComponent } from "../base-graph.component"; @@ -243,6 +244,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte protected assignmentsService: AssignmentsService, public themeService: ThemeService, private tooltipService: TooltipService, + public anonymizationService: AnonymizationService, private ngZone: NgZone, public overlayManagerService: OverlayManagerService, ) { @@ -276,6 +278,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte this.updateLang(); }); + this.anonymizationService.isAnonymous$.pipe(takeUntil(this.destroy$)).subscribe(() => { + this.loadGraphDataAndRefresh(true); + }); + this.overlayManagerService.dismiss$.pipe(takeUntil(this.destroy$)).subscribe((event) => { if (OverlayManagerService.shouldDismiss(OverlayType.DROPDOWN, event)) { if (this.groupDropdown && this.groupDropdown.isOpen()) { @@ -544,7 +550,8 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte if (context && repos.length > 0) { context.font = "13px " + (style.getPropertyValue("--font-family-sans") || "sans-serif"); for (const repo of repos) { - const w = context.measureText(repo.name || "").width; + const displayName = this.anonymizationService.getDisplayName(repo); + const w = context.measureText(displayName || "").width; if (w > maxNameWidth) maxNameWidth = w; } } @@ -2373,7 +2380,8 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .axisLeft(this.y_scale) .tickValues([...Array(repositories.length + 1).keys()]) .tickFormat((d) => { - return repositories[d.valueOf() - 1]?.name || ""; + const repo = repositories[d.valueOf() - 1]; + return repo ? this.anonymizationService.getDisplayName(repo) : ""; }) .tickSize(-this.inner_width); @@ -2401,6 +2409,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte }) .on("click", function (event: MouseEvent, d: any) { event.stopPropagation(); + if (overview.anonymizationService.isAnonymous) { + return; + } const repo = repositories[d.valueOf() - 1]; if (repo?.url) { window.open(repo.url, "_blank"); @@ -2411,7 +2422,11 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte const repo = repositories[d.valueOf() - 1]; if (repo?.name) { overview.ngZone.run(() => { - overview.hovered_repository = repo; + overview.hovered_repository = { + ...repo, + name: overview.anonymizationService.getDisplayName(repo), + url: overview.anonymizationService.isAnonymous ? null : repo.url, + } as Repository; overview.hovered_commit = undefined; overview.hovered_group_commit = undefined; overview.hovered_session = undefined; @@ -2599,10 +2614,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte let x = this.xScaledTimeZoned(commit.commitDate); - let comp: d3.Selection = g - .append("a") - .attr("href", (d) => d[0].url) - .attr("target", "_blank"); + let comp: d3.Selection = g.append("a"); + if (!this.anonymizationService.isAnonymous) { + comp.attr("href", (d) => d[0].url).attr("target", "_blank"); + } if (commit.isCloture) { comp = comp.append("circle").attr("class", "commit-cloture"); @@ -2629,6 +2644,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte return g; } + getCommitAuthorDisplayName(commit: Commit): string { + return this.anonymizationService.getCommitAuthorDisplayName(commit); + } + shouldGroupCommit(commit_before: Commit, commit_after: Commit): boolean { return ( !commit_before.isCloture && diff --git a/src/app/components/graphs/questions-completion/questions-completion.component.ts b/src/app/components/graphs/questions-completion/questions-completion.component.ts index d5c3fbd3..998f0eff 100644 --- a/src/app/components/graphs/questions-completion/questions-completion.component.ts +++ b/src/app/components/graphs/questions-completion/questions-completion.component.ts @@ -1,13 +1,4 @@ -import { - Component, - ElementRef, - HostListener, - OnDestroy, - OnInit, - TemplateRef, - ViewChild, - ViewEncapsulation, -} from "@angular/core"; +import { Component, ElementRef, HostListener, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from "@angular/core"; import { CommitColor } from "@models/Commit.model"; import { TranslateService } from "@ngx-translate/core"; import { AssignmentsService } from "@services/assignments.service"; @@ -16,6 +7,7 @@ import { DataService } from "@services/data.service"; import { LoaderService } from "@services/loader.service"; import { TooltipService } from "@services/tooltip.service"; import { ThemeService } from "@services/theme.service"; +import { AnonymizationService } from "@services/anonymization.service"; import { Subscription } from "rxjs"; import { BaseGraphComponent } from "../base-graph.component"; import { Utils } from "../../../services/utils"; @@ -28,10 +20,7 @@ import * as d3 from "d3"; styleUrls: ["./questions-completion.component.scss"], encapsulation: ViewEncapsulation.None, }) -export class QuestionsCompletionComponent - extends BaseGraphComponent - implements OnInit, OnDestroy -{ +export class QuestionsCompletionComponent extends BaseGraphComponent implements OnInit, OnDestroy { @ViewChild("chartContainer", { static: true }) chartContainer: ElementRef; @ViewChild("leftAxisContainer", { static: true }) leftAxisContainer: ElementRef; @ViewChild("d3TooltipTemplate") d3TooltipTemplate!: TemplateRef; @@ -44,14 +33,8 @@ export class QuestionsCompletionComponent max: number; dict = {}; chartData: any[] = []; - - commitColors = [ - CommitColor.INTERMEDIATE, - CommitColor.BEFORE, - CommitColor.BETWEEN, - CommitColor.AFTER, - CommitColor.NOCOMMIT, - ]; + + commitColors = [CommitColor.INTERMEDIATE, CommitColor.BEFORE, CommitColor.BETWEEN, CommitColor.AFTER, CommitColor.NOCOMMIT]; hiddenCategories = new Set(); private svg: any; @@ -64,7 +47,8 @@ export class QuestionsCompletionComponent protected loaderService: LoaderService, protected assignmentsService: AssignmentsService, private tooltipService: TooltipService, - public themeService: ThemeService + public themeService: ThemeService, + public anonymizationService: AnonymizationService, ) { super(loaderService, assignmentsService, dataService); } @@ -75,6 +59,9 @@ export class QuestionsCompletionComponent this.translateService.onLangChange.subscribe(() => { this.loadGraphDataAndRefresh(); }); + this.anonymizationService.isAnonymous$.subscribe(() => { + this.loadGraphDataAndRefresh(); + }); if (this.dataService.repoToLoad) { this.loadGraph(this.dataService.startDate, this.dataService.endDate); @@ -85,7 +72,7 @@ export class QuestionsCompletionComponent this.dataService.repositories, this.dataService.reviews, this.dataService.corrections, - this.dataService.questions + this.dataService.questions, ); this.loading = false; } @@ -107,39 +94,21 @@ export class QuestionsCompletionComponent } loadGraphDataAndRefresh(conserveZoom?: boolean) { - let translations = this.translateService.instant([ - "QUESTION", - "COMMITS-COUNT", - "COMMITS-PERCENTAGE", - "STUDENTS" - ]); - - let colors = [ - CommitColor.BEFORE, - CommitColor.BETWEEN, - CommitColor.AFTER, - CommitColor.NOCOMMIT, - ]; - - let dict = this.commitsService.initQuestionsDict( - this.dataService.questions, - colors - ); + let translations = this.translateService.instant(["QUESTION", "COMMITS-COUNT", "COMMITS-PERCENTAGE", "STUDENTS"]); + + let colors = [CommitColor.BEFORE, CommitColor.BETWEEN, CommitColor.AFTER, CommitColor.NOCOMMIT]; + + let dict = this.commitsService.initQuestionsDict(this.dataService.questions, colors); dict = this.commitsService.loadQuestionsDict( dict, this.dataService.repositories, this.dataService.questions, colors, this.dataService.groupFilter, - this.date + this.date, ); - this.chartData = this.commitsService.loadQuestions( - dict, - colors, - this.dataService.questions, - translations - ); + this.chartData = this.commitsService.loadQuestions(dict, colors, this.dataService.questions, translations); this.drawGraph(); } @@ -169,14 +138,9 @@ export class QuestionsCompletionComponent .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); - const colors = [ - CommitColor.BEFORE, - CommitColor.BETWEEN, - CommitColor.AFTER, - CommitColor.NOCOMMIT, - ]; + const colors = [CommitColor.BEFORE, CommitColor.BETWEEN, CommitColor.AFTER, CommitColor.NOCOMMIT]; - const keys = colors.map((c) => c.label).filter(k => !this.hiddenCategories.has(k)); + const keys = colors.map((c) => c.label).filter((k) => !this.hiddenCategories.has(k)); const stackedData = d3.stack().keys(keys)(this.chartData); // Scales @@ -201,36 +165,41 @@ export class QuestionsCompletionComponent .style("fill", "var(--color-text-primary)") .style("font-size", "12px"); - const svgLeft = d3.select(leftElement).append("svg") + const svgLeft = d3 + .select(leftElement) + .append("svg") .style("display", "block") .attr("width", margin.left) .attr("height", height + margin.top + margin.bottom) .style("pointer-events", "none"); - const leftPath = `M 0 0 L ${margin.left} 0 L ${margin.left} ${margin.top + height} L ${margin.left - margin.bottom} ${margin.top + height + margin.bottom} L 0 ${margin.top + height + margin.bottom} Z`; - svgLeft.append("path") - .attr("d", leftPath) - .attr("fill", "var(--color-bg-body)") - .style("pointer-events", "auto"); + const leftPath = `M 0 0 L ${margin.left} 0 L ${margin.left} ${margin.top + height} L ${margin.left - margin.bottom} ${ + margin.top + height + margin.bottom + } L 0 ${margin.top + height + margin.bottom} Z`; + svgLeft.append("path").attr("d", leftPath).attr("fill", "var(--color-bg-body)").style("pointer-events", "auto"); - const leftG = svgLeft - .append("g") - .attr("transform", `translate(${margin.left},${margin.top})`) - .style("pointer-events", "auto"); - - leftG.call(d3.axisLeft(y).ticks(10).tickFormat((d) => d + "%")) + const leftG = svgLeft.append("g").attr("transform", `translate(${margin.left},${margin.top})`).style("pointer-events", "auto"); + + leftG + .call( + d3 + .axisLeft(y) + .ticks(10) + .tickFormat((d) => d + "%"), + ) .selectAll("text") .style("fill", "var(--color-text-primary)") .style("font-size", "12px"); - + leftG.selectAll(".domain").remove(); leftG.selectAll(".tick line").remove(); // Left Y-Axis Label - leftG.append("text") + leftG + .append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - 60 + 5) - .attr("x", 0 - (height / 2)) + .attr("x", 0 - height / 2) .attr("dy", "1em") .style("text-anchor", "middle") .style("fill", "var(--color-text-secondary)") @@ -238,7 +207,11 @@ export class QuestionsCompletionComponent .text(this.translateService.instant("PERCENT-COMMITS")); // Gridlines - const yAxisGrid = d3.axisLeft(y).tickSize(-width).tickFormat(() => "").ticks(10); + const yAxisGrid = d3 + .axisLeft(y) + .tickSize(-width) + .tickFormat(() => "") + .ticks(10); this.svg .append("g") .attr("class", "grid") @@ -264,7 +237,7 @@ export class QuestionsCompletionComponent .style("stroke-dasharray", "5,5"); // Draw Bars - const visibleColors = colors.filter(c => !this.hiddenCategories.has(c.label)); + const visibleColors = colors.filter((c) => !this.hiddenCategories.has(c.label)); const groups = this.svg .selectAll("g.layer") @@ -294,30 +267,30 @@ export class QuestionsCompletionComponent // Find which key this data point belongs to const layerData = d3.select(event.currentTarget.parentNode).datum() as any; const key = layerData.key; - const colorObj = colors.find(c => c.label === key); + const colorObj = colors.find((c) => c.label === key); const dataObj = d.data[key + "_data"]; - + if (dataObj) { - const colorObj = this.commitColors.find(c => c.label === key); + const colorObj = this.commitColors.find((c) => c.label === key); const tooltipData = { question: d.data.question, category: key, categoryKey: colorObj ? colorObj.labelKey : key, count: dataObj.count, percentage: d.data[key], - students: dataObj.students.map((s) => Utils.truncateMiddle(s.name, 25)), + students: dataObj.students.map((s) => { + const repo = this.dataService.repositories?.find((r) => r.name === s.name || (s.url && r.url === s.url)); + const displayName = repo + ? this.anonymizationService.getDisplayName(repo) + : this.anonymizationService.getAnonymizedName(s.name); + return Utils.truncateMiddle(displayName, 25); + }), }; if (!this.tooltipService.isShowing()) { - this.tooltipService.showAtPosition( - this.d3TooltipTemplate, - event.clientX, - event.clientY, - "right", - undefined, - true, - { tooltipData } - ); + this.tooltipService.showAtPosition(this.d3TooltipTemplate, event.clientX, event.clientY, "right", undefined, true, { + tooltipData, + }); } else { this.tooltipService.moveTooltip(event.clientX, event.clientY, "right"); } @@ -327,7 +300,7 @@ export class QuestionsCompletionComponent d3.select(event.currentTarget).style("opacity", 1); this.tooltipService.hide(); }); - + // Add text labels inside bars if large enough groups .selectAll("text.bar-label") @@ -339,7 +312,7 @@ export class QuestionsCompletionComponent .attr("y", (d) => y(d[1]) + (y(d[0]) - y(d[1])) / 2) .attr("dy", ".35em") .attr("text-anchor", "middle") - .style("fill", function() { + .style("fill", function () { const layerData = d3.select(this.parentNode).datum() as any; if (layerData.key === "Not finished") { return "var(--color-text-primary)"; @@ -349,7 +322,7 @@ export class QuestionsCompletionComponent .style("font-size", "11px") .style("font-weight", "bold") .style("pointer-events", "none") - .text(function(d) { + .text(function (d) { const percentage = d[1] - d[0]; if (percentage > 5) { // Find the actual count @@ -384,7 +357,7 @@ export class QuestionsCompletionComponent this.dataService.repositories, this.dataService.reviews, this.dataService.corrections, - this.dataService.questions + this.dataService.questions, ); this.loading = false; }); @@ -400,7 +373,7 @@ export class QuestionsCompletionComponent .map((v) => v.commits) .filter(Boolean) .reduce((a, b) => a.concat(b), []), - (v) => v.commitDate + (v) => v.commitDate, ); this.min = interval[0].getTime(); @@ -410,10 +383,7 @@ export class QuestionsCompletionComponent } getAdjustedMaxTimestamp() { - return ( - Math.ceil((this.max - this.min) / this.slider_step) * this.slider_step + - this.min - ); + return Math.ceil((this.max - this.min) / this.slider_step) * this.slider_step + this.min; } pressedShortcut: string = null; diff --git a/src/app/components/graphs/students/students.component.html b/src/app/components/graphs/students/students.component.html index b8363eb6..60392ab4 100644 --- a/src/app/components/graphs/students/students.component.html +++ b/src/app/components/graphs/students/students.component.html @@ -141,7 +141,7 @@
{{ "OVERVIEW-GRA
{{ hovered_repository?.name }}
-
+
{{ 'OVERVIEW-GRAPH.OPEN-REPO' | translate }} diff --git a/src/app/components/graphs/students/students.component.ts b/src/app/components/graphs/students/students.component.ts index 1051a9ee..07be25b4 100644 --- a/src/app/components/graphs/students/students.component.ts +++ b/src/app/components/graphs/students/students.component.ts @@ -7,6 +7,7 @@ import { DataService } from "@services/data.service"; import { LoaderService } from "@services/loader.service"; import { TooltipService } from "@services/tooltip.service"; import { ThemeService } from "@services/theme.service"; +import { AnonymizationService } from "@services/anonymization.service"; import { Subscription } from "rxjs"; import { BaseGraphComponent } from "../base-graph.component"; import { Utils } from "../../../services/utils"; @@ -52,6 +53,7 @@ export class StudentsComponent extends BaseGraphComponent implements OnInit, OnD protected assignmentsService: AssignmentsService, private tooltipService: TooltipService, public themeService: ThemeService, + public anonymizationService: AnonymizationService, private ngZone: NgZone, ) { super(loaderService, assignmentsService, dataService); @@ -78,6 +80,9 @@ export class StudentsComponent extends BaseGraphComponent implements OnInit, OnD this.translateService.onLangChange.subscribe(() => { this.loadGraphDataAndRefresh(); }); + this.anonymizationService.isAnonymous$.subscribe(() => { + this.loadGraphDataAndRefresh(); + }); if (this.dataService.repoToLoad) { this.loadGraph(this.dataService.startDate, this.dataService.endDate); @@ -129,8 +134,11 @@ export class StudentsComponent extends BaseGraphComponent implements OnInit, OnD // Convert dict back to an ordered array according to labels this.chartData = labels.map((label) => { let studentData = dict[label]; + let repo = this.dataService.repositories?.find((r) => r.name === label); + let displayName = repo ? this.anonymizationService.getDisplayName(repo) : label; let result: any = { - student: studentData.name, + student: displayName, + rawName: label, commitsCount: studentData.commitsCount, lastQuestionDone: studentData.lastQuestionDone, url: studentData.url, @@ -225,19 +233,28 @@ export class StudentsComponent extends BaseGraphComponent implements OnInit, OnD }) .on("click", (event: MouseEvent, d: any) => { event.stopPropagation(); - const repo = this.dataService.repositories.find((r) => r.name === d) || this.chartData.find((cd) => cd.student === d); + if (this.anonymizationService.isAnonymous) { + return; + } + const matchedItem = this.chartData.find((cd) => cd.student === d); + const repo = this.dataService.repositories.find( + (r) => r.name === d || (matchedItem && (r.name === matchedItem.rawName || r.url === matchedItem.url)), + ); if (repo?.url) { window.open(repo.url, "_blank"); } }) .on("mouseenter", (event: MouseEvent, d: any) => { event.stopPropagation(); - const repo = this.dataService.repositories.find((r) => r.name === d) || this.chartData.find((cd) => cd.student === d); - if (repo) { + const matchedItem = this.chartData.find((cd) => cd.student === d); + const repo = this.dataService.repositories.find( + (r) => r.name === d || (matchedItem && (r.name === matchedItem.rawName || r.url === matchedItem.url)), + ); + if (repo || matchedItem) { this.ngZone.run(() => { this.hovered_repository = { - name: repo.name || (repo as any).student || d, - url: repo.url, + name: d, + url: this.anonymizationService.isAnonymous ? null : repo?.url || matchedItem?.url, }; this.tooltipService.showAtPosition(this.repoTooltipTemplate, event.clientX, event.clientY, "right", undefined, true); }); diff --git a/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.html b/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.html index a1b39ca6..7eda8413 100644 --- a/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.html +++ b/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.html @@ -52,6 +52,24 @@
+
diff --git a/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.ts b/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.ts index 683c906a..2fc37ec1 100644 --- a/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.ts +++ b/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.ts @@ -7,6 +7,7 @@ import { ConfigurationService } from "@services/configuration.service"; import { DataService } from "@services/data.service"; import { DatabaseService } from "@services/database.service"; import { ThemeService } from "@services/theme.service"; +import { AnonymizationService } from "@services/anonymization.service"; import { CustomModalService } from "@shared/ui/custom-modal/custom-modal.service"; import { CustomModalRef } from "@shared/ui/custom-modal/custom-modal-ref"; import { ShortcutsModalComponent } from "@shared/ui/shortcuts-modal/shortcuts-modal.component"; @@ -34,6 +35,7 @@ export class AppNavLayoutComponent implements OnInit { private databaseService: DatabaseService, private configurationService: ConfigurationService, public themeService: ThemeService, + public anonymizationService: AnonymizationService, private router: Router, private customModalService: CustomModalService, ) {} @@ -126,6 +128,11 @@ export class AppNavLayoutComponent implements OnInit { this.openCurrentAssignmentConfig(); } } + } else if (key === "a" && !event.ctrlKey && !event.metaKey && !event.altKey) { + if (this.dataService.dataLoaded() && !this.isHome && !this.hasActiveModal) { + event.preventDefault(); + this.anonymizationService.toggleAnonymousMode(); + } } } diff --git a/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.html b/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.html index 5e8ca5bb..f271a3d0 100644 --- a/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.html +++ b/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.html @@ -131,6 +131,21 @@
+ +
+
+ + + + + {{ "SETTINGS.ANONYMOUS-MODE" | translate }} +
+ +
+
{{ 'SETTINGS.HELP-TUTORIAL' | translate }} diff --git a/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.ts b/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.ts index 4f9c71e6..195d9f9b 100644 --- a/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.ts +++ b/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.ts @@ -14,6 +14,7 @@ import { TourService } from "@services/tour.service"; import { CustomModalService } from "@shared/ui/custom-modal/custom-modal.service"; import { ShortcutsModalComponent } from "@shared/ui/shortcuts-modal/shortcuts-modal.component"; import { AccountsService } from "@services/accounts.service"; +import { AnonymizationService } from "@services/anonymization.service"; import { environment } from "@environments/environment"; @Component({ @@ -41,6 +42,7 @@ export class SidebarSettingsComponent implements OnInit, OnDestroy, OnChanges { constructor( public themeService: ThemeService, + public anonymizationService: AnonymizationService, private databaseService: DatabaseService, private dataService: DataService, private router: Router, diff --git a/src/app/services/anonymization.service.spec.ts b/src/app/services/anonymization.service.spec.ts new file mode 100644 index 00000000..cc4d69b0 --- /dev/null +++ b/src/app/services/anonymization.service.spec.ts @@ -0,0 +1,92 @@ +import { TestBed } from "@angular/core/testing"; +import { Commit } from "@models/Commit.model"; +import { Repository } from "@models/Repository.model"; +import { TranslateModule, TranslateService } from "@ngx-translate/core"; +import { AnonymizationService } from "@services/anonymization.service"; +import { DataService } from "@services/data.service"; + +describe("AnonymizationService", () => { + let service: AnonymizationService; + let dataService: DataService; + let translateService: TranslateService; + + const mockRepositories = [ + new Repository("https://github.com/org/tp-alice", "Alice Dupont"), + new Repository("https://github.com/org/tp-bob", "Bob Martin"), + new Repository("https://github.com/org/tp-charlie", "Charlie Durand"), + ]; + + beforeEach(() => { + localStorage.removeItem("git4school_anonymous_mode"); + TestBed.configureTestingModule({ + imports: [TranslateModule.forRoot()], + providers: [ + AnonymizationService, + { + provide: DataService, + useValue: { + repositories: mockRepositories, + }, + }, + ], + }); + + service = TestBed.inject(AnonymizationService); + dataService = TestBed.inject(DataService); + translateService = TestBed.inject(TranslateService); + + translateService.setTranslation("fr", { + ANONYMOUS: { + STUDENT_LABEL: "Étudiant·e {{index}}", + STUDENT_PREFIX: "Étudiant·e", + STUDENT_FALLBACK: "Étudiant·e", + ANONYMOUS_AUTHOR: "Auteur masqué", + ACTIVE_BADGE: "Anonymat actif", + }, + }); + translateService.use("fr"); + }); + + afterEach(() => { + localStorage.removeItem("git4school_anonymous_mode"); + }); + + it("should be created with anonymous mode disabled by default", () => { + expect(service).toBeTruthy(); + expect(service.isAnonymous).toBeFalse(); + }); + + it("should toggle anonymous mode and notify subscribers", (done) => { + service.toggleAnonymousMode(); + expect(service.isAnonymous).toBeTrue(); + + service.isAnonymous$.subscribe((isAnon) => { + expect(isAnon).toBeTrue(); + done(); + }); + }); + + it("should return real name when anonymous mode is disabled", () => { + service.setAnonymousMode(false); + const repo = mockRepositories[0]; + expect(service.getDisplayName(repo)).toBe("Alice Dupont"); + }); + + it("should return stable pseudonym when anonymous mode is enabled", () => { + service.setAnonymousMode(true); + expect(service.getDisplayName(mockRepositories[0])).toBe("Étudiant·e 1"); + expect(service.getDisplayName(mockRepositories[1])).toBe("Étudiant·e 2"); + expect(service.getDisplayName(mockRepositories[2])).toBe("Étudiant·e 3"); + }); + + it("should anonymize commit author appropriately", () => { + const commit = new Commit("feat: solution", "Alice Dupont", new Date(), "https://github.com/org/tp-alice/commit/123"); + mockRepositories[0].commits = [commit]; + + service.setAnonymousMode(false); + expect(service.getCommitAuthorDisplayName(commit, mockRepositories[0])).toBe("Alice Dupont"); + + service.setAnonymousMode(true); + expect(service.getCommitAuthorDisplayName(commit, mockRepositories[0])).toBe("Étudiant·e 1"); + }); +}); diff --git a/src/app/services/anonymization.service.ts b/src/app/services/anonymization.service.ts new file mode 100644 index 00000000..474af94e --- /dev/null +++ b/src/app/services/anonymization.service.ts @@ -0,0 +1,94 @@ +import { Injectable } from "@angular/core"; +import { Commit } from "@models/Commit.model"; +import { Repository } from "@models/Repository.model"; +import { TranslateService } from "@ngx-translate/core"; +import { DataService } from "@services/data.service"; +import { BehaviorSubject, Observable } from "rxjs"; + +@Injectable({ + providedIn: "root", +}) +export class AnonymizationService { + private static readonly STORAGE_KEY = "git4school_anonymous_mode"; + + public isAnonymous$: Observable; + + private isAnonymousSubject: BehaviorSubject; + + constructor(private translateService: TranslateService, private dataService: DataService) { + const savedState = localStorage.getItem(AnonymizationService.STORAGE_KEY) === "true"; + this.isAnonymousSubject = new BehaviorSubject(savedState); + this.isAnonymous$ = this.isAnonymousSubject.asObservable(); + } + + public get isAnonymous(): boolean { + return this.isAnonymousSubject.value; + } + + public toggleAnonymousMode(): boolean { + const newState = !this.isAnonymous; + this.setAnonymousMode(newState); + return newState; + } + + public setAnonymousMode(value: boolean): void { + if (this.isAnonymousSubject.value === value) { + return; + } + + this.isAnonymousSubject.next(value); + localStorage.setItem(AnonymizationService.STORAGE_KEY, String(value)); + } + + public getDisplayName(repository: Repository | null | undefined): string { + if (!repository) { + return ""; + } + + if (!this.isAnonymous) { + return repository.name || repository.getNameFromUrl() || ""; + } + + return this.getAnonymizedName(repository); + } + + public getAnonymizedName(repoOrName: Repository | string): string { + if (!repoOrName) { + return this.translateService.instant("ANONYMOUS.STUDENT_FALLBACK"); + } + + const index = this.findRepositoryIndex(repoOrName); + const studentNumber = index >= 0 ? index + 1 : 1; + return this.translateService.instant("ANONYMOUS.STUDENT_LABEL", { index: studentNumber }); + } + + public getCommitAuthorDisplayName(commit: Commit | null | undefined, repository?: Repository): string { + if (!commit) { + return ""; + } + + if (!this.isAnonymous) { + return commit.author || ""; + } + + const targetRepo = repository || this.findRepositoryForCommit(commit); + if (targetRepo) { + return this.getAnonymizedName(targetRepo); + } + + return this.translateService.instant("ANONYMOUS.ANONYMOUS_AUTHOR"); + } + + private findRepositoryIndex(repoOrName: Repository | string): number { + const repos = this.dataService.repositories || []; + if (typeof repoOrName === "string") { + return repos.findIndex((r) => r.name === repoOrName || r.url === repoOrName); + } + return repos.findIndex((r) => Repository.isEqual(r, repoOrName) || r.name === repoOrName.name); + } + + private findRepositoryForCommit(commit: Commit): Repository | undefined { + const repos = this.dataService.repositories || []; + return repos.find((r) => r.commits && r.commits.some((c) => c === commit || (commit.url && c.url === commit.url))); + } +} diff --git a/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.html b/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.html index dca770ec..e8ae4ab3 100644 --- a/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.html +++ b/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.html @@ -48,6 +48,10 @@
{{ 'MODAL-SHORTCUTS.NAV_SHORTCUTS' | translate }} ?
+
+ {{ 'MODAL-SHORTCUTS.TOGGLE_ANONYMOUS' | translate }} + A +
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 44c46e12..4d7b5dc0 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -39,12 +39,15 @@ "METADATA": "Metadata", "SIGN-IN": "Sign in", "SIGN-OUT": "Sign out", - "CONFIGURATION": "Configuration" + "CONFIGURATION": "Configuration", + "ANONYMOUS-MODE": "Anonymize", + "ANONYMOUS-MODE-TOOLTIP": "Toggle anonymous mode" }, "SETTINGS": { "TITLE": "Settings", "NO-ASSIGNMENTS-DISCONNECTED": "Log in to see your assignments", "THEME": "Theme", + "ANONYMOUS-MODE": "Anonymous mode", "SHOW-LEGEND": "Show graphs legend", "HELP": "Help", "SHORTCUTS": "Keyboard shortcuts", @@ -261,6 +264,7 @@ "NAV_QUESTIONS": "Questions Tab", "NAV_CONFIG": "Configure assignment", "NAV_SHORTCUTS": "Toggle shortcuts panel", + "TOGGLE_ANONYMOUS": "Toggle anonymous mode", "SECTION_GRAPHS": "Graphs & Visualizations", "GRAPH_ZOOM_IN": "Zoom in", "GRAPH_ZOOM_OUT": "Zoom out", @@ -661,5 +665,12 @@ "TOOLTIP_CLOSING_STANDARD": "Closing rule: Standard GitHub", "TOOLTIP_CLOSING_CUSTOM": "Closing rule: Custom ({{keywords}})", "TOOLTIP_CLOSING_NONE": "Closing rule: No keyword" + }, + "ANONYMOUS": { + "STUDENT_LABEL": "Student {{index}}", + "STUDENT_PREFIX": "Student", + "STUDENT_FALLBACK": "Student", + "ANONYMOUS_AUTHOR": "Hidden author", + "ACTIVE_BADGE": "Anonymous mode active" } } diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index bc712b9b..eff103d8 100644 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -38,12 +38,15 @@ "METADATA": "Métadonnées", "SIGN-IN": "S'identifier", "SIGN-OUT": "Se déconnecter", - "CONFIGURATION": "Configuration" + "CONFIGURATION": "Configuration", + "ANONYMOUS-MODE": "Anonymat", + "ANONYMOUS-MODE-TOOLTIP": "Basculer le mode anonymat" }, "SETTINGS": { "TITLE": "Paramètres", "NO-ASSIGNMENTS-DISCONNECTED": "Connectez-vous pour voir vos devoirs", "THEME": "Thème", + "ANONYMOUS-MODE": "Mode anonymat", "SHOW-LEGEND": "Afficher la légende des graphes", "HELP": "Aide", "SHORTCUTS": "Raccourcis clavier", @@ -260,6 +263,7 @@ "NAV_QUESTIONS": "Vue Questions", "NAV_CONFIG": "Configurer le devoir", "NAV_SHORTCUTS": "Afficher / masquer les raccourcis", + "TOGGLE_ANONYMOUS": "Basculer le mode anonymat", "SECTION_GRAPHS": "Graphiques & Visualisations", "GRAPH_ZOOM_IN": "Zoomer", "GRAPH_ZOOM_OUT": "Dézoomer", @@ -661,5 +665,12 @@ "TOOLTIP_CLOSING_STANDARD": "Règle de clôture : Standard GitHub", "TOOLTIP_CLOSING_CUSTOM": "Règle de clôture : Personnalisée ({{keywords}})", "TOOLTIP_CLOSING_NONE": "Règle de clôture : Sans mot-clé" + }, + "ANONYMOUS": { + "STUDENT_LABEL": "Étudiant·e {{index}}", + "STUDENT_PREFIX": "Étudiant·e", + "STUDENT_FALLBACK": "Étudiant·e", + "ANONYMOUS_AUTHOR": "Auteur masqué", + "ACTIVE_BADGE": "Anonymat actif" } } diff --git a/src/assets/i18n/ru.json b/src/assets/i18n/ru.json index e3289877..ff7f4cde 100644 --- a/src/assets/i18n/ru.json +++ b/src/assets/i18n/ru.json @@ -39,12 +39,15 @@ "METADATA": "Метаданные", "SIGN-IN": "Войти", "SIGN-OUT": "Выйти", - "CONFIGURATION": "Конфигурация" + "CONFIGURATION": "Конфигурация", + "ANONYMOUS-MODE": "Анонимность", + "ANONYMOUS-MODE-TOOLTIP": "Переключить режим анонимности" }, "SETTINGS": { "TITLE": "Настройки", "NO-ASSIGNMENTS-DISCONNECTED": "Войдите, чтобы увидеть свои задания", "THEME": "Тема", + "ANONYMOUS-MODE": "Режим анонимности", "SHOW-LEGEND": "Показать легенду графиков", "HELP": "Помощь", "SHORTCUTS": "Сочетания клавиш", @@ -259,6 +262,7 @@ "NAV_QUESTIONS": "Вкладка Вопросы", "NAV_CONFIG": "Настроить задание", "NAV_SHORTCUTS": "Показать / скрыть горячие клавиши", + "TOGGLE_ANONYMOUS": "Включить / выключить анонимный режим", "SECTION_GRAPHS": "Графики и визуализации", "GRAPH_ZOOM_IN": "Увеличить", "GRAPH_ZOOM_OUT": "Уменьшить", @@ -658,5 +662,12 @@ "TOOLTIP_CLOSING_STANDARD": "Правило закрытия: Стандарт GitHub", "TOOLTIP_CLOSING_CUSTOM": "Правило закрытия: Пользовательское ({{keywords}})", "TOOLTIP_CLOSING_NONE": "Правило закрытия: Без ключевого слова" + }, + "ANONYMOUS": { + "STUDENT_LABEL": "Студент {{index}}", + "STUDENT_PREFIX": "Студент", + "STUDENT_FALLBACK": "Студент", + "ANONYMOUS_AUTHOR": "Скрытый автор", + "ACTIVE_BADGE": "Анонимный режим активен" } } diff --git a/src/styles/_components.scss b/src/styles/_components.scss index 2684e263..e8410160 100644 --- a/src/styles/_components.scss +++ b/src/styles/_components.scss @@ -408,6 +408,131 @@ border-radius: 99px; } + .anonymize-toggle-pill { + position: relative; + display: inline-flex; + align-items: center; + gap: 0.45rem; + padding: 0.35rem 0.8rem; + font-size: 0.8125rem; + font-weight: 500; + letter-spacing: -0.01em; + line-height: 1; + color: var(--color-text-secondary); + background-color: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: 9999px; + box-shadow: var(--shadow-sm); + cursor: pointer; + user-select: none; + outline: none; + will-change: transform; + transition: transform $transition-tactile, + background-color $transition-fast, + border-color $transition-fast, + color $transition-fast, + box-shadow $transition-fast; + + .anonymize-icon-wrapper { + position: relative; + width: 15px; + height: 15px; + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + + svg { + position: absolute; + top: 0; + left: 0; + width: 15px; + height: 15px; + will-change: transform, opacity; + transition: transform $transition-snap, opacity $transition-fast; + } + + .icon-eye-off { + transform: scale(1) rotate(0deg); + opacity: 1; + } + + .icon-eye-on { + transform: scale(0.85) rotate(-15deg); + opacity: 0; + } + } + + .anonymize-label { + font-size: 0.8125rem; + font-weight: 500; + white-space: nowrap; + transition: color $transition-fast; + } + + &:focus { + outline: none; + box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); + } + + &:active:not(:disabled) { + transform: scale(0.96); + } + + /* Active State (Anonymous Mode ON) */ + &.active { + background-color: var(--color-primary-bg); + color: var(--color-primary); + border-color: rgba(37, 99, 235, 0.35); + box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15), var(--shadow-sm); + + .anonymize-icon-wrapper { + .icon-eye-off { + transform: scale(0.85) rotate(15deg); + opacity: 0; + } + + .icon-eye-on { + transform: scale(1) rotate(0deg); + opacity: 1; + color: var(--color-primary); + } + } + + .anonymize-label { + color: var(--color-primary); + } + } + + @media (hover: hover) and (pointer: fine) { + &:hover:not(.active) { + background-color: var(--color-hover); + color: var(--color-text-primary); + border-color: var(--color-border); + box-shadow: var(--shadow-md); + } + + &.active:hover { + background-color: rgba(37, 99, 235, 0.18); + border-color: var(--color-primary); + box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25), var(--shadow-md); + } + } + + @media (prefers-reduced-motion: reduce) { + transform: none !important; + transition: background-color $transition-fast, + border-color $transition-fast, + color $transition-fast, + box-shadow $transition-fast; + + .anonymize-icon-wrapper svg { + transform: none !important; + transition: opacity $transition-fast; + } + } + } + /* Left Side Group */ z-index: 1000; } @@ -471,6 +596,7 @@ transform: scale(1) rotate(0deg); opacity: 1; } + .icon-moon { transform: scale(0.8) rotate(-45deg); opacity: 0; @@ -488,6 +614,7 @@ transform: scale(0.8) rotate(45deg); opacity: 0; } + .icon-moon { transform: scale(1) rotate(0deg); opacity: 1; @@ -500,6 +627,7 @@ transform: scale(0.8) rotate(45deg); opacity: 0; } + .icon-moon { transform: scale(1) rotate(0deg); opacity: 1; @@ -511,6 +639,7 @@ transform: scale(0.8) rotate(-45deg); opacity: 0; } + .icon-sun { transform: scale(1) rotate(0deg); opacity: 1; @@ -787,6 +916,7 @@ @media (max-width: 1200px) { .date-full { display: none; } + .date-short { display: inline; } } } @@ -982,6 +1112,7 @@ .custom-control { margin-bottom: 0.5rem; + &:last-child { margin-bottom: 0; } @@ -1307,7 +1438,7 @@ width: 16px; height: 16px; border-radius: 50%; - background: #ffffff; + background: #fff; border: 3px solid #3b82f6; cursor: pointer; box-shadow: 0 0 0 2px transparent; @@ -1322,7 +1453,7 @@ width: 16px; height: 16px; border-radius: 50%; - background: #ffffff; + background: #fff; border: 3px solid #3b82f6; cursor: pointer; box-shadow: 0 0 0 2px transparent; @@ -1420,11 +1551,11 @@ box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3); svg { - stroke: #ffffff; + stroke: #fff; } span { - color: #ffffff; + color: #fff; } } @@ -1445,6 +1576,7 @@ stroke-dashoffset: 12; transition: stroke-dashoffset 0.4s cubic-bezier(0.4, 0, 0.2, 1); } + .cal-pin { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @@ -1458,6 +1590,7 @@ transition: stroke-dashoffset 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-origin: 12px 12px; } + .check-circle { stroke-dasharray: 63 63; transition: stroke-dasharray 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -1470,6 +1603,7 @@ .eye-pupil { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } + .eye-lid { transition: transform 0.3s ease; transform-origin: 12px 12px; @@ -1481,8 +1615,11 @@ .dot { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } + .d1 { transition-delay: 0s; } + .d2 { transition-delay: 0.05s; } + .d3 { transition-delay: 0.1s; } } @@ -1498,6 +1635,7 @@ fill-opacity 0.4s ease; transform-origin: 12px 12px; } + .op-outer, .op-mid, .op-inner { x: 4px; y: 4px; @@ -1515,8 +1653,11 @@ transition: y 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } + .bar-1 { y: 10px; height: 4px; } + .bar-2 { y: 10px; height: 4px; } + .bar-3 { y: 10px; height: 4px; } } @@ -1528,29 +1669,43 @@ input[type="checkbox"]:checked + .chip-content, .btn-group .btn.show-hover:not(.active) { .icon-calendar { .cal-check { stroke-dashoffset: 0; } + .cal-pin { transform: translateY(-2px); } } + .icon-check { .check-tick { stroke-dashoffset: 0; transform: scale(1.15); } + .check-circle { stroke-dasharray: 51 63; transform: scale(0.9); } } + .icon-eye { .eye-pupil { transform: translateX(3px); } + .eye-lid { transform: scaleY(0.85); } } + .icon-dots { .d1 { transform: translateY(-2px); } + .d2 { transform: translateY(2px); } + .d3 { transform: translateY(-2px); } } + .icon-opacity { .op-outer { x: 2px; y: 2px; width: 20px; height: 20px; rx: 6px; stroke-opacity: 0.3; fill-opacity: 0.3; } + .op-mid { x: 6px; y: 6px; width: 12px; height: 12px; rx: 4px; stroke-opacity: 0.7; fill-opacity: 0.7; } + .op-inner { x: 10px; y: 10px; width: 4px; height: 4px; rx: 1px; stroke-opacity: 1; fill-opacity: 1; } } + .icon-height { .bar-1 { y: 10px; height: 4px; } + .bar-2 { y: 7px; height: 10px; } + .bar-3 { y: 4px; height: 16px; } } } @@ -1560,27 +1715,39 @@ input[type="checkbox"]:checked + .chip-content, .btn-group .btn.show-hover.active { .icon-calendar { .cal-check { stroke-dashoffset: 12; } + .cal-pin { transform: none; } } + .icon-check { .check-tick { stroke-dashoffset: 20; transform: none; } + .check-circle { stroke-dasharray: 63 63; transform: none; } } + .icon-eye { .eye-pupil { transform: none; } + .eye-lid { transform: none; } } + .icon-dots { .d1 { transform: none; } + .d2 { transform: none; } + .d3 { transform: none; } } + .icon-opacity { .op-outer, .op-mid, .op-inner { x: 4px; y: 4px; width: 16px; height: 16px; rx: 4px; stroke-opacity: 1; fill-opacity: 1; } } + .icon-height { .bar-1 { y: 10px; height: 4px; } + .bar-2 { y: 10px; height: 4px; } + .bar-3 { y: 10px; height: 4px; } } } @@ -2215,6 +2382,7 @@ body:has(app-custom-modal-container) ngb-typeahead-window { 0% { background-position-x: 200%; } + 100% { background-position-x: 0%; } @@ -2387,16 +2555,19 @@ body:has(app-custom-modal-container) ngb-typeahead-window { color: var(--badge-prepared-text); border-color: var(--badge-prepared-border); } + &.status-ongoing { background-color: var(--badge-ongoing-bg); color: var(--badge-ongoing-text); border-color: var(--badge-ongoing-border); } + &.status-finished { background-color: var(--badge-finished-bg); color: var(--badge-finished-text); border-color: var(--badge-finished-border); } + &.status-default { background-color: var(--badge-default-bg); color: var(--badge-default-text); @@ -2409,10 +2580,12 @@ body:has(app-custom-modal-container) ngb-typeahead-window { transform: scale(1); opacity: 0.45; } + 60% { transform: scale(1.8); opacity: 0; } + 100% { transform: scale(1.8); opacity: 0; From c4eb0a5030ed34f1fd23a30fce961a7f4e074deb Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Mon, 21 Sep 2026 13:59:52 +0200 Subject: [PATCH 08/23] =?UTF-8?q?=F0=9F=93=9D=20Update=20CHANGELOG=20with?= =?UTF-8?q?=20all=20versions=20from=201.4.1=20to=20Unreleased?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 428 ++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 427 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1d8ce799..8394bbf3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,26 @@ -# Change log for Git4School +## [Unreleased] + +### Added + +#### Overview graph + +- ⭐ Student repository navigation with tooltip feedback in the students view + +#### Home + +- ⭐ Collapsible animated search bar in the assignment chooser + +#### General + +- ⭐ Support for self-hosted GitLab instances with multi-account management +- Automatic GitLab OAuth token refresh with rotation and HTTP interceptor +- ⭐ Visual **anonymization mode** for classroom presentations — student names, repositories and authors are hidden on demand via `AnonymizationService` + +### Fixed + +- Tooltip content adaptation, helper expansion and viewport boundaries + +--- ## 2.5.1 @@ -9,6 +31,8 @@ - **TP Group Extraction from README**: Correctly extract TP group located after a checked markdown checkbox (`- [x]` or `- [X]`) instead of capturing brackets. - **Multilingual Name Parsing**: Fix line-by-line parsing to properly extract student names when colons are placed inside bold/italic markdown formatting (e.g. `**Nom :** **Durand**`). +--- + ## 2.5.0 ### Added @@ -27,6 +51,408 @@ - Added ADR 0009 (`docs/adr/0009-detection-multilingue-et-reaffectation-noms-depots.md`). - Added unit test suite for multilingual name detection in `Utils`. +--- + +## 2.4.0 + +### Added + +#### General + +- ⭐ **GitLab support**: users can now connect to GitLab via OAuth 2.0 PKCE, in addition to GitHub + - Strategy Pattern architecture for multi-provider authentication (ADR-0006) + - ⭐ Dedicated split button UI to choose the authentication provider + - Secure _remember-me_ token storage and clean legacy auth flow +- Architecture Decision Records (ADR) showcase page published on the GitHub Wiki + +### Fixed + +- Unit test failures in `AccountsService`, token storage and GitLab callback specs + +--- + +## 2.3.0 + +### Modified + +#### General + +- Views have been renamed for consistency and clarity +- ⭐ Student repository navigation added to the students view + +--- + +## 2.2.1 + +### Added + +#### Questions chooser + +- ⭐ Improved dropdown, assistant and accordion button click feedback with chevron rotation animation + +### Fixed + +- Fixed a crash in the question completion graph caused by a question casing mismatch +- Prevented typeahead selection jumps during arrow navigation via a dedicated directive (ADR-0005) + +--- + +## 2.2.0 + +### Added + +#### Questions chooser + +- ⭐ A **questions assistant popover** with contextual help for commit closing rules configuration + - The panel moves alongside the suggestions popover so it is always visible +- ⭐ Support for **pasting multiple questions** at once using a delimiter separator +- Advanced mode for adding questions with finer-grained configuration + +### Fixed + +- Popover stacking above the navbar and hover flickering +- Outside click dismissal of the questions assistant popover inside modals +- Popover viewport overflow — auto-dropup and polished layout +- i18n label overflow in various UI elements + +--- + +## 2.1.1 + +### Fixed + +- Fixed animation lag on the disconnect button in the sidebar + +--- + +## 2.1.0 + +### Added + +#### Sidebar & Navigation + +- ⭐ **Git accounts management**: connected accounts are now displayed and managed directly in the sidebar and the connection modal + +#### Developer tools + +- A **developer toolbar** for debugging and toggling feature flags (hidden in production) + +### Modified + +#### General + +- Cyclomatic complexity reduced across several components; regression test suite added +- Codacy metrics configured; Stylelint integrated for SCSS quality +- Codacy issues resolved across the codebase + +### Fixed + +- Fixed a 1-month offset in the commit tooltip date format + +--- + +## 2.0.5 + +### Added + +#### Overview graph + +- ⭐ Milestone labels redesigned with **chronological overlap masking** to avoid visual clutter + +### Modified + +#### Home + +- ⭐ Assignment status badges improved; status filters interaction polished + +### Fixed + +- Milestone bar thickness, text width and cutout bounds aligned precisely + +--- + +## 2.0.4 + +### Modified + +#### Overview graph + +- ⭐ Session visualization redesigned with **sticky header badges**, custom labels, and a responsive layout +- Milestone and session updates are now applied smoothly without recreating the graph +- Overlay management refactored into `OverlayManagerService` to coordinate dropdown and popover closing +- Search input focus is maintained after pressing Enter + +### Fixed + +- Milestone drag pill clipping and dark mode text contrast +- Popovers no longer stack above the navbar +- Popovers auto-close when interacting with the overview graph +- Sidebar z-index stacking order corrected (above popovers and dropdowns, below modals) +- Zoom reset is restored after loading or filtering; search input focus is maintained +- Milestone drag progress circle color now matches the milestone type + +--- + +## 2.0.3 + +### Fixed + +- Date preview corrected when moving a milestone in the overview graph +- Milestone drag pill clipping and dark mode text contrast + +--- + +## 2.0.2 + +### Modified + +#### Overview graph + +- ⭐ Milestone types order inverted to better match the expected workflow +- ⭐ Milestone label upper strip is now clickable; strip hidden when no milestone to display +- Delete milestone/session shown in red in the context menu +- More subtle required-field message for milestone type +- Long-press is now required to drag milestones (prevents accidental drags) + +### Fixed + +- Click date calculation corrected on sessions and milestones + +--- + +## 2.0.1 + +### Fixed + +#### Assignment editor + +- Repositories search fixed (including forked repos) +- Toggling cycling between a repo and its forks works correctly +- Repository rows details finalized + +--- + +## 2.0.0 + +### Added + +#### General + +- ⭐ **Full UI redesign** — modern sidebar navigation, floating panel, custom modal system, dark theme overhaul +- ⭐ **Keyboard shortcuts** accessible from a dedicated modal with uniformized keycap style +- **Skeleton loading** for commits and repository search results +- Custom **toast service** and **tooltip service** replacing third-party libraries +- ⭐ **Onboarding tutorial** (initially automatic, then triggered manually from the sidebar) + +#### Home + +- ⭐ Assignment list now shows **search and filter** controls (saved in LocalStorage) +- ⭐ Assignments can be **filtered by forge** (only assignments from the connected forge are shown) +- Assignment tabs organized by forge +- Number of assignments displayed in the sidebar is configurable +- ⭐ Sidebar is **resizable**; width is saved in LocalStorage + +#### Overview graph + +- ⭐ **Drag milestones** directly on the graph (requires long-press) +- ⭐ Click on **grouped commits** to zoom in on them +- Graphs **fully adapt** to any screen size +- ⭐ Horizontal scroll possible with trackpad or Ctrl+scroll on macOS +- ⭐ Filter criteria support **exclusion** using `!` +- Filter criteria can be **moved** with Cmd+Arrow +- Same criteria can be **added multiple times** +- ⭐ Filter criteria visually **grouped** into pills +- ⭐ Rich **filter suggestions popover** with contextual help +- Legend elements are **clickable** to toggle visibility +- Personal notes icon shown on sessions that have notes +- ⭐ Personal notes shown in milestone tooltip on hover +- Message displayed in overview when there are no repos or commits + +#### Students / Questions graphs + +- Student names display fixed in commits and questions graphs +- Students now displayed with their names adjusted and truncated if too long + +### Modified + +#### General + +- All charts migrated from Chart.js to **D3.js** +- GraphQL API used for retrieving commits and user repositories (performance improvement) +- ⭐ Modals redesigned: slide-in from bottom, blurred backdrop +- Toast animations improved + +#### Assignment editor + +- ⭐ Repository search redesigned with a floating selection bar tool and modal +- Repository avatar now shown in the assignment repositories list +- Auto-scroll to the edited assignment when opening it from the list + +### Fixed + +- Fixed calendar popover placement and TP group selector +- Fixed scroll issue in the Home page +- Fixed question renaming and adding more than 14 questions +- Fixed display order of elements in the overview graph +- Fixed date picker calendar displaying below viewport boundaries +- Fixed question chooser in milestone edit + +--- + +## 1.6.2 + +### Fixed + +- Fixed session activity line display + +--- + +## 1.6.1 + +### Fixed + +- Fixed session display, milestone line length, and zoom on WebKit-based browsers + +--- + +## 1.6.0 + +### Modified + +#### Overview graph + +- Commits and questions graphs migrated from **Chart.js to D3.js** for more control and performance +- ⭐ Overview is now **responsive** and adapts to the screen size +- ⭐ GitHub authentication now uses a **popup** instead of a redirect + +### Fixed + +- Fixed scroll issues and contextual menu positioning +- Fixed tooltip rendered at wrong time and position +- Fixed zoom and size issues +- Fixed commit filter not working +- Fixed commit links opening in the same tab +- Fixed date alignment and display offset issues + +--- + +## 1.5.3 + +### Added + +#### Overview graph + +- ⭐ Teachers can now **add personal notes** to a milestone or session +- ⭐ Repository URL in the assignment editor is now **clickable** (opens in a new tab) + +#### Commits / Questions graphs + +- The maximum date of the sliders now adjusts to the latest commit date + +### Modified + +#### Overview graph + +- Long student names are now **truncated** in the overview graph + +### Deleted + +- Confirmation modal when importing multiple assignments has been removed + +### Fixed + +- Date slider maximum date corrected to reach the last commit (fix #119) + +--- + +## 1.5.2 + +### Modified + +#### General + +- ⭐ Now **loads more than 100 commits per repository** using GitHub API pagination +- Upload and download assignment icons updated + +### Fixed + +- Fixed commits not being retrieved when there are fewer than 100 +- Fixed live deploy to Firebase + +--- + +## 1.5.1 + +### Fixed + +- Firebase configuration updated + +--- + +## 1.5.0 + +### Added + +#### General + +- ⭐ Support for reading an **IDENTITY file** to retrieve student identity information from repositories + +#### Overview graph + +- ⭐ The currently filtered group is used when **adding a milestone or session** (fix #124) +- ⭐ Group filter is **kept active** for a session (fix #120) +- `"All"` milestones remain visible on a filtered overview graph + +### Modified + +#### CI/CD + +- A comment with the **staging link** is automatically added when deployed + +--- + +## 1.4.3 + +### Fixed + +- Zoom level is no longer reset on graph manipulation +- Fixed `repoAlreadyAddedValidator` — the validator was detecting itself as already present, preventing editing a repository + +--- + +## 1.4.2 + +### Added + +#### Assignment editor + +- Repository list is now **scrollable** +- ⭐ Repositories can be **sorted** by name and other properties +- Pressing **Enter** while editing a repository validates the row +- Confirmation dialog added when **deleting a repository** + +### Fixed + +- Fixed error when importing an assignment with a milestone (fix #106) +- Fixed save occurring when cancelling an empty row +- Fixed bug when sorting repositories with no name + +--- + +## 1.4.1 + +### Added + +#### Overview graph + +- ⭐ **Time picker** restored in the milestone edition modal (lost during the datepicker library change) + +### Fixed + +- Fixed error when importing an assignment with a milestone (fix #106) + +--- + ## 1.4.0 ### Modified From 1e77ecc7d5fad8dfc29de16733f1aa10bcdfc220 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Mon, 21 Sep 2026 15:14:55 +0200 Subject: [PATCH 09/23] =?UTF-8?q?=E2=9C=A8=20add=20generic=20token=20valid?= =?UTF-8?q?ity=20check=20and=20expired=20token=20indicators=20in=20account?= =?UTF-8?q?s=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../accounts/accounts.component.html | 13 +++ .../accounts/accounts.component.scss | 28 +++++ .../add-account-modal.component.html | 40 ++++++- .../add-account-modal.component.scss | 110 +++++++++++++----- .../add-account-modal.component.spec.ts | 36 +++--- .../add-account-modal.component.ts | 35 +++++- src/app/models/Account.model.ts | 2 + src/app/models/GitAuthProvider.model.ts | 6 +- src/app/services/accounts.service.spec.ts | 19 ++- src/app/services/accounts.service.ts | 36 +++++- src/app/services/github-auth.service.ts | 67 ++++++++++- src/app/services/github-data.service.ts | 9 ++ src/app/services/gitlab-auth.service.ts | 59 +++++++++- .../services/gitlab-custom-auth.service.ts | 86 +++++++++++++- src/app/services/loader.service.ts | 58 ++++++++- src/assets/i18n/en.json | 9 +- src/assets/i18n/fr.json | 9 +- src/assets/i18n/ru.json | 9 +- 18 files changed, 556 insertions(+), 75 deletions(-) diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.html b/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.html index 312b8cb0..b6a140c6 100644 --- a/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.html +++ b/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.html @@ -20,6 +20,19 @@ + + + + diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.scss b/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.scss index 4dc49494..d79d62f1 100644 --- a/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.scss +++ b/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.scss @@ -60,6 +60,32 @@ $ease-spring-out: cubic-bezier(0.25, 1, 0.4, 1); border: 1px solid var(--color-border); } + .account-avatar-invalid-overlay { + position: absolute; + top: 0; + left: 0; + width: 34px; + height: 34px; + border-radius: 50%; + background-color: var(--color-danger-bg); + backdrop-filter: blur(1.5px); + -webkit-backdrop-filter: blur(1.5px); + color: var(--color-danger); + display: flex; + align-items: center; + justify-content: center; + border: 1.5px solid var(--color-danger-subtle); + box-shadow: 0 1px 4px rgba(220, 38, 38, 0.15); + cursor: default; + z-index: 1; + + svg { + width: 17px; + height: 17px; + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); + } + } + .provider-badge-icon { position: absolute; bottom: -3px; @@ -73,6 +99,7 @@ $ease-spring-out: cubic-bezier(0.25, 1, 0.4, 1); font-size: 0.6rem; background-color: var(--color-surface); border: 1px solid var(--color-border); + z-index: 2; svg { width: 10px; @@ -425,3 +452,4 @@ $ease-spring-out: cubic-bezier(0.25, 1, 0.4, 1); } } } + diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html index 1ba9d327..fcea464c 100644 --- a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html +++ b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html @@ -49,10 +49,14 @@
- + {{ 'ACCOUNTS.ACTIVE' | translate }} + + + {{ 'ACCOUNTS.STATUS_INVALID' | translate }} +
{{ 'ACCOUNTS.PLATFORM_GITHUB_TITLE' | translate }} @@ -73,10 +77,14 @@
- + {{ 'ACCOUNTS.ACTIVE' | translate }} + + + {{ 'ACCOUNTS.STATUS_INVALID' | translate }} +
{{ 'ACCOUNTS.PLATFORM_GITLAB_TITLE' | translate }} @@ -105,7 +113,7 @@
- + {{ customInstancesCountText }} @@ -126,7 +134,7 @@
(click)="selectCustomInstance(acc.instanceHost)" >
- +
{{ acc.instanceName || acc.instanceHost }} @{{ acc.username }} @@ -204,7 +212,7 @@
-
+
@@ -400,7 +418,7 @@
-
+
diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.scss b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.scss index 0c0bc525..93dfc7bb 100644 --- a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.scss +++ b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.scss @@ -54,6 +54,53 @@ } } +/* Status Pill */ +.status-pill { + display: inline-flex; + align-items: center; + gap: 0.25rem; + padding: 0.1rem 0.45rem; + border-radius: 9999px; + font-size: 0.6rem; + font-weight: 600; + line-height: 1.2; + + .dot { + width: 5px; + height: 5px; + border-radius: 50%; + } + + &.connected { + background-color: var(--badge-ongoing-bg); + color: var(--badge-ongoing-text); + border: 1px solid var(--badge-ongoing-border); + + .dot { + background-color: var(--color-success); + } + } + + &.invalid, + &.expired { + background-color: var(--color-danger-bg); + color: var(--color-danger); + border: 1px solid var(--color-danger-subtle); + + .dot { + background-color: var(--color-danger); + } + } + + &.coming-soon { + background-color: var(--color-hover); + color: var(--color-text-muted); + border: 1px solid var(--color-border); + font-weight: 500; + font-size: 0.58rem; + } +} + /* Platform Cards Grid (3 cards row) */ .platform-cards-grid { display: grid; @@ -152,38 +199,6 @@ height: 14px; } - .status-pill { - display: inline-flex; - align-items: center; - gap: 0.25rem; - padding: 0.1rem 0.45rem; - border-radius: 9999px; - font-size: 0.6rem; - font-weight: 600; - line-height: 1.2; - - &.connected { - background-color: var(--badge-ongoing-bg); - color: var(--badge-ongoing-text); - border: 1px solid var(--badge-ongoing-border); - - .dot { - width: 5px; - height: 5px; - border-radius: 50%; - background-color: var(--color-success); - } - } - - &.coming-soon { - background-color: var(--color-hover); - color: var(--color-text-muted); - border: 1px solid var(--color-border); - font-weight: 500; - font-size: 0.58rem; - } - } - .platform-info { display: flex; flex-direction: column; @@ -300,6 +315,11 @@ border-radius: 50%; background-color: var(--color-gitlab); flex-shrink: 0; + + &.is-invalid { + background-color: var(--color-danger); + box-shadow: 0 0 0 2px var(--color-danger-subtle); + } } .instance-text { @@ -482,6 +502,32 @@ border: 1px solid var(--color-border); } + .account-avatar-invalid-overlay { + position: absolute; + top: 0; + left: 0; + width: 38px; + height: 38px; + border-radius: 50%; + background-color: var(--color-danger-bg); + backdrop-filter: blur(1.5px); + -webkit-backdrop-filter: blur(1.5px); + color: var(--color-danger); + display: flex; + align-items: center; + justify-content: center; + border: 1.5px solid var(--color-danger-subtle); + box-shadow: 0 1px 4px rgba(220, 38, 38, 0.15); + cursor: default; + z-index: 1; + + .invalid-mark-svg { + width: 18px; + height: 18px; + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); + } + } + .online-dot { position: absolute; bottom: -1px; diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.spec.ts b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.spec.ts index 6a8757d3..8fc3b994 100644 --- a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.spec.ts +++ b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.spec.ts @@ -26,21 +26,27 @@ describe("AddAccountModalComponent", () => { cloudFlag$ = new BehaviorSubject(false); customFlag$ = new BehaviorSubject(false); - githubAuthSpy = jasmine.createSpyObj("GithubAuthService", ["signIn", "signOut", "isSignedIn", "getAccount", "getProfileUrl"], { - provider: "github", - name: "GitHub", - instanceHost: "github.com", - token: "mock-token", - username: "testuser", - avatarUrl: "https://example.com/avatar.jpg", - authChange$: new BehaviorSubject({ - isSignedIn: true, + githubAuthSpy = jasmine.createSpyObj( + "GithubAuthService", + ["signIn", "signOut", "isSignedIn", "getAccount", "getProfileUrl", "checkTokenValidity"], + { + provider: "github", + name: "GitHub", + instanceHost: "github.com", token: "mock-token", username: "testuser", avatarUrl: "https://example.com/avatar.jpg", - displayName: "Test User", - }).asObservable(), - }); + tokenStatus: "valid", + authChange$: new BehaviorSubject({ + isSignedIn: true, + token: "mock-token", + username: "testuser", + avatarUrl: "https://example.com/avatar.jpg", + displayName: "Test User", + tokenStatus: "valid", + }).asObservable(), + }, + ); githubAuthSpy.isSignedIn.and.returnValue(true); githubAuthSpy.getAccount.and.returnValue({ id: "acc-github-real", @@ -49,19 +55,21 @@ describe("AddAccountModalComponent", () => { username: "testuser", avatarUrl: "https://example.com/avatar.jpg", isCurrent: true, + tokenStatus: "valid", }); githubAuthSpy.getProfileUrl.and.returnValue("https://github.com/testuser"); gitlabAuthSpy = jasmine.createSpyObj( "GitlabAuthService", - ["signIn", "loginWithPopup", "signOut", "isSignedIn", "getAccount", "getProfileUrl"], + ["signIn", "loginWithPopup", "signOut", "isSignedIn", "getAccount", "getProfileUrl", "checkTokenValidity"], { provider: "gitlab", name: "GitLab", instanceHost: "gitlab.com", token: null, currentUser: null, - authChange$: new BehaviorSubject({ isSignedIn: false, token: null, user: null }).asObservable(), + tokenStatus: "unknown", + authChange$: new BehaviorSubject({ isSignedIn: false, token: null, user: null, tokenStatus: "unknown" }).asObservable(), }, ); gitlabAuthSpy.isSignedIn.and.returnValue(false); diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.ts b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.ts index 0a4ed9f2..025f654b 100644 --- a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.ts +++ b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.ts @@ -5,7 +5,7 @@ import { AccountsService } from "@services/accounts.service"; import { DevFlagsService } from "@services/dev-flags.service"; import { OverlayManagerService, OverlayType } from "@services/overlay-manager.service"; import { GitAuthProvider } from "@models/GitAuthProvider.model"; -import { Account } from "@models/Account.model"; +import { Account, TokenStatus } from "@models/Account.model"; import { Subscription } from "rxjs"; @Component({ @@ -67,6 +67,35 @@ export class AddAccountModalComponent implements OnInit, OnDestroy { return Boolean(this.accountsService.gitlabAuthService?.isSignedIn() || this.accountsService.getProvider("gitlab")?.isSignedIn()); } + get githubTokenStatus(): TokenStatus { + return this.accountsService.githubAuthService?.tokenStatus || "unknown"; + } + + get gitlabTokenStatus(): TokenStatus { + return this.accountsService.gitlabAuthService?.tokenStatus || "unknown"; + } + + get isGithubTokenInvalid(): boolean { + return this.githubTokenStatus === "invalid"; + } + + get isGitlabTokenInvalid(): boolean { + return this.gitlabTokenStatus === "invalid"; + } + + get isCurrentTokenInvalid(): boolean { + if (this.selectedPlatform === "github") { + return this.isGithubTokenInvalid; + } + if (this.selectedPlatform === "gitlab-cloud") { + return this.isGitlabTokenInvalid; + } + if (this.selectedPlatform === "gitlab-custom" && this.selectedCustomAccount) { + return this.selectedCustomAccount.tokenStatus === "invalid"; + } + return false; + } + get customGitlabAccounts(): Account[] { return this.accountsService.gitlabCustomAuthService?.getAccounts() || []; } @@ -75,6 +104,10 @@ export class AddAccountModalComponent implements OnInit, OnDestroy { return Boolean(this.customGitlabAccounts && this.customGitlabAccounts.length > 0); } + get hasInvalidCustomInstance(): boolean { + return this.customGitlabAccounts.some((acc) => acc.tokenStatus === "invalid"); + } + get customInstancesCountText(): string { const count = this.customGitlabAccounts.length; if (count === 1) { diff --git a/src/app/models/Account.model.ts b/src/app/models/Account.model.ts index 78f2ba4d..75eb6b26 100644 --- a/src/app/models/Account.model.ts +++ b/src/app/models/Account.model.ts @@ -1,4 +1,5 @@ export type GitProviderType = "github" | "gitlab"; +export type TokenStatus = "valid" | "invalid" | "unknown"; export interface Account { id: string; @@ -11,4 +12,5 @@ export interface Account { tokenExpiresInDays?: number | null; lastSync?: string; isCurrent?: boolean; + tokenStatus?: TokenStatus; } diff --git a/src/app/models/GitAuthProvider.model.ts b/src/app/models/GitAuthProvider.model.ts index a017c7b7..d8cb2804 100644 --- a/src/app/models/GitAuthProvider.model.ts +++ b/src/app/models/GitAuthProvider.model.ts @@ -1,17 +1,19 @@ import { Observable } from "rxjs"; -import { Account, GitProviderType } from "./Account.model"; +import { Account, GitProviderType, TokenStatus } from "./Account.model"; -export { GitProviderType } from "./Account.model"; +export { GitProviderType, TokenStatus } from "./Account.model"; export interface GitAuthProvider { readonly provider: GitProviderType; readonly name: string; readonly instanceHost: string; readonly authChange$: Observable; + tokenStatus: TokenStatus; isSignedIn(): boolean; getAccount(): Account | null; signIn(rememberMe?: boolean): Promise; signOut(): Promise | void; getProfileUrl(username?: string): string; + checkTokenValidity(): Observable; } diff --git a/src/app/services/accounts.service.spec.ts b/src/app/services/accounts.service.spec.ts index 8d5ebab7..28e64e73 100644 --- a/src/app/services/accounts.service.spec.ts +++ b/src/app/services/accounts.service.spec.ts @@ -6,7 +6,7 @@ import { GitlabCustomAuthService } from "./gitlab-custom-auth.service"; import { GithubDataService } from "./github-data.service"; import { GitlabDataService } from "./gitlab-data.service"; import { Account } from "@models/Account.model"; -import { BehaviorSubject } from "rxjs"; +import { BehaviorSubject, of } from "rxjs"; describe("AccountsService", () => { let service: AccountsService; @@ -42,11 +42,13 @@ describe("AccountsService", () => { isSignedIn: jasmine.createSpy("isSignedIn").and.returnValue(false), getAccount: jasmine.createSpy("getAccount").and.returnValue(null), getProfileUrl: jasmine.createSpy("getProfileUrl").and.callFake((u?: string) => `https://github.com/${u || ""}`), + checkTokenValidity: jasmine.createSpy("checkTokenValidity").and.returnValue(of(true)), authChange$: authChangeMock$.asObservable(), token: null, username: null, avatarUrl: null, displayName: null, + tokenStatus: "unknown", } as any; gitlabAuthServiceSpy = { @@ -57,20 +59,33 @@ describe("AccountsService", () => { isSignedIn: jasmine.createSpy("isSignedIn").and.returnValue(false), getAccount: jasmine.createSpy("getAccount").and.returnValue(null), getProfileUrl: jasmine.createSpy("getProfileUrl").and.callFake((u?: string) => `https://gitlab.com/${u || ""}`), + checkTokenValidity: jasmine.createSpy("checkTokenValidity").and.returnValue(of(true)), authChange$: gitlabAuthChangeMock$.asObservable(), token: null, currentUser: null, + tokenStatus: "unknown", } as any; gitlabCustomAuthSpy = jasmine.createSpyObj( "GitlabCustomAuthService", - ["getAccounts", "getAccount", "hasAccount", "getProfileUrl", "connectInstance", "disconnectInstance"], + [ + "getAccounts", + "getAccount", + "hasAccount", + "getTokenStatus", + "getProfileUrl", + "connectInstance", + "disconnectInstance", + "checkTokenValidity", + ], { accountsChange$: customAuthChangeMock$.asObservable(), }, ); gitlabCustomAuthSpy.getAccounts.and.returnValue([]); gitlabCustomAuthSpy.getAccount.and.returnValue(null); + gitlabCustomAuthSpy.getTokenStatus.and.returnValue("unknown"); + gitlabCustomAuthSpy.checkTokenValidity.and.returnValue(of(true)); gitlabCustomAuthSpy.getProfileUrl.and.callFake((host: string, u: string) => { const clean = (host || "") .trim() diff --git a/src/app/services/accounts.service.ts b/src/app/services/accounts.service.ts index d4d230cc..9804f322 100644 --- a/src/app/services/accounts.service.ts +++ b/src/app/services/accounts.service.ts @@ -1,11 +1,11 @@ import { Injectable, OnDestroy, Optional } from "@angular/core"; -import { BehaviorSubject, Observable, Subscription } from "rxjs"; +import { BehaviorSubject, Observable, Subscription, of } from "rxjs"; import { GithubAuthService } from "@services/github-auth.service"; import { GitlabAuthService } from "@services/gitlab-auth.service"; import { GitlabCustomAuthService } from "@services/gitlab-custom-auth.service"; import { GithubDataService } from "@services/github-data.service"; import { GitlabDataService } from "@services/gitlab-data.service"; -import { Account, GitProviderType } from "@models/Account.model"; +import { Account, GitProviderType, TokenStatus } from "@models/Account.model"; import { GitAuthProvider } from "@models/GitAuthProvider.model"; import { GitDataService } from "@models/GitDataService.model"; @@ -100,6 +100,38 @@ export class AccountsService implements OnDestroy { return this.providers.get(providerType); } + getActiveProvider(providerType: GitProviderType = "github"): GitAuthProvider | undefined { + return this.providers.get(providerType); + } + + getTokenStatus(providerType: GitProviderType = "github", instanceHost?: string): TokenStatus { + if (providerType === "gitlab" && instanceHost && instanceHost !== "gitlab.com" && this.gitlabCustomAuthService) { + return this.gitlabCustomAuthService.getTokenStatus(instanceHost); + } + const provider = this.providers.get(providerType); + return provider?.tokenStatus || "unknown"; + } + + checkTokenValidity(providerType: GitProviderType = "github", instanceHost?: string): Observable { + if (providerType === "gitlab" && instanceHost && instanceHost !== "gitlab.com" && this.gitlabCustomAuthService) { + return this.gitlabCustomAuthService.checkTokenValidity(instanceHost); + } + const provider = this.providers.get(providerType); + if (provider) { + return provider.checkTokenValidity(); + } + return of(false); + } + + checkAllTokens(): void { + for (const provider of this.providers.values()) { + if (provider.isSignedIn()) { + provider.checkTokenValidity().subscribe(); + } + } + this.gitlabCustomAuthService?.checkTokenValidity().subscribe(); + } + disconnectAccount(id: string): void { const account = this.currentAccounts.find((a) => a.id === id); if (account) { diff --git a/src/app/services/github-auth.service.ts b/src/app/services/github-auth.service.ts index c5da93e0..0aa53532 100644 --- a/src/app/services/github-auth.service.ts +++ b/src/app/services/github-auth.service.ts @@ -5,8 +5,9 @@ import { TranslateService } from "@ngx-translate/core"; import * as firebase from "firebase/app"; import { auth } from "firebase/app"; import "firebase/auth"; -import { BehaviorSubject, Observable } from "rxjs"; -import { Account, GitProviderType } from "@models/Account.model"; +import { BehaviorSubject, Observable, of } from "rxjs"; +import { catchError, map, shareReplay, tap } from "rxjs/operators"; +import { Account, GitProviderType, TokenStatus } from "@models/Account.model"; import { GitAuthProvider } from "@models/GitAuthProvider.model"; import { TokenStorageService } from "@services/token-storage.service"; import { ToastService } from "./toast.service"; @@ -17,6 +18,7 @@ export interface AuthState { username: string | null; avatarUrl: string | null; displayName: string | null; + tokenStatus?: TokenStatus; } /** @@ -36,6 +38,7 @@ export class GithubAuthService implements GitAuthProvider { avatarUrl: string | null = null; displayName: string | null = null; loading = false; + tokenStatus: TokenStatus = "unknown"; public authChange$ = new BehaviorSubject({ isSignedIn: false, @@ -43,8 +46,11 @@ export class GithubAuthService implements GitAuthProvider { username: null, avatarUrl: null, displayName: null, + tokenStatus: "unknown", }); + private validityCheck$: Observable | null = null; + constructor( private router: Router, private http: HttpClient, @@ -81,6 +87,7 @@ export class GithubAuthService implements GitAuthProvider { username, avatarUrl: this.avatarUrl || `https://avatars.githubusercontent.com/${username}`, isCurrent: true, + tokenStatus: this.tokenStatus, }; } @@ -119,6 +126,7 @@ export class GithubAuthService implements GitAuthProvider { this.username = null; this.avatarUrl = null; this.displayName = null; + this.tokenStatus = "unknown"; this.tokenStorageService.clearAll("github"); localStorage.removeItem("dev_github_token"); localStorage.removeItem("github_username"); @@ -150,6 +158,52 @@ export class GithubAuthService implements GitAuthProvider { return this.http.get(url, httpOptions); } + checkTokenValidity(): Observable { + if (!this.token) { + this.tokenStatus = "unknown"; + this.notifyAuthChange(); + return of(false); + } + + if (this.validityCheck$) { + return this.validityCheck$; + } + + const httpOptions = { + headers: new HttpHeaders({ + Authorization: "token " + this.token, + }), + }; + + this.validityCheck$ = this.http.get("https://api.github.com/rate_limit", httpOptions).pipe( + map(() => { + this.tokenStatus = "valid"; + this.notifyAuthChange(); + return true; + }), + catchError((error) => { + if (error?.status === 401 || error?.status === 403) { + this.tokenStatus = "invalid"; + this.notifyAuthChange(); + } + return of(false); + }), + tap(() => { + this.validityCheck$ = null; + }), + shareReplay(1), + ); + + return this.validityCheck$; + } + + markTokenInvalid(): void { + if (this.tokenStatus !== "invalid") { + this.tokenStatus = "invalid"; + this.notifyAuthChange(); + } + } + async fetchUserProfile(rememberMe?: boolean): Promise { if (!this.token) { return; @@ -171,7 +225,10 @@ export class GithubAuthService implements GitAuthProvider { }, isRemembered, ); - } catch (e) { + } catch (e: any) { + if (e?.status === 401 || e?.status === 403) { + this.markTokenInvalid(); + } console.warn("Could not fetch GitHub profile via API:", e); } } @@ -189,11 +246,13 @@ export class GithubAuthService implements GitAuthProvider { this.username = storedUser?.username || null; this.avatarUrl = storedUser?.avatarUrl || null; this.displayName = storedUser?.displayName || null; + this.checkTokenValidity().subscribe(); } else { this.token = null; this.username = null; this.avatarUrl = null; this.displayName = null; + this.tokenStatus = "unknown"; } this.notifyAuthChange(); @@ -236,6 +295,7 @@ export class GithubAuthService implements GitAuthProvider { private handleAuthResult(result: any, rememberMe = false): void { this.token = result?.credential?.accessToken ?? this.token; if (this.token) { + this.tokenStatus = "valid"; this.tokenStorageService.saveToken("github", this.token, rememberMe); } this.updateProfile( @@ -258,6 +318,7 @@ export class GithubAuthService implements GitAuthProvider { username: this.username, avatarUrl: this.avatarUrl, displayName: this.displayName, + tokenStatus: this.tokenStatus, }); } } diff --git a/src/app/services/github-data.service.ts b/src/app/services/github-data.service.ts index 063aed8e..8b27ee8c 100644 --- a/src/app/services/github-data.service.ts +++ b/src/app/services/github-data.service.ts @@ -178,6 +178,9 @@ export class GithubDataService implements GitDataService { }; }), catchError((err) => { + if (err?.status === 401 || err?.status === 403) { + this.githubAuthService.markTokenInvalid(); + } console.error("Error fetching authenticated GitHub user repositories", err); return of({ completed: true, @@ -645,6 +648,9 @@ ${this.getCommitHistoryQueryFragment(historyArgs)} } }), catchError((error) => { + if (error?.status === 401 || error?.status === 403) { + this.githubAuthService.markTokenInvalid(); + } console.error("GraphQL batch error", error); return of(repoTab); }), @@ -711,6 +717,9 @@ ${this.getCommitHistoryQueryFragment(`first: 100, after: "${info.cursor}", since } }), catchError((error) => { + if (error?.status === 401 || error?.status === 403) { + this.githubAuthService.markTokenInvalid(); + } console.error("fetchRemainingCommits batch error", error); return of(null); }), diff --git a/src/app/services/gitlab-auth.service.ts b/src/app/services/gitlab-auth.service.ts index 34c8d2fd..07d3ab6b 100644 --- a/src/app/services/gitlab-auth.service.ts +++ b/src/app/services/gitlab-auth.service.ts @@ -1,7 +1,8 @@ import { HttpClient, HttpHeaders, HttpParams } from "@angular/common/http"; import { Injectable } from "@angular/core"; -import { BehaviorSubject, Observable } from "rxjs"; -import { Account, GitProviderType } from "@models/Account.model"; +import { BehaviorSubject, Observable, from, of } from "rxjs"; +import { catchError, map, switchMap } from "rxjs/operators"; +import { Account, GitProviderType, TokenStatus } from "@models/Account.model"; import { GitAuthProvider } from "@models/GitAuthProvider.model"; import { TokenStorageService } from "@services/token-storage.service"; import { environment } from "../../environments/environment"; @@ -18,6 +19,7 @@ export interface GitlabAuthState { isSignedIn: boolean; token: string | null; user: GitlabUser | null; + tokenStatus?: TokenStatus; } interface TokenResponse { @@ -41,11 +43,13 @@ export class GitlabAuthService implements GitAuthProvider { token: string | null = null; currentUser: GitlabUser | null = null; loading = false; + tokenStatus: TokenStatus = "unknown"; public authChange$ = new BehaviorSubject({ isSignedIn: false, token: null, user: null, + tokenStatus: "unknown", }); private clientId = environment.gitlab?.clientId || ""; @@ -75,6 +79,7 @@ export class GitlabAuthService implements GitAuthProvider { username: this.currentUser.username, avatarUrl: this.currentUser.avatar_url || null, isCurrent: false, + tokenStatus: this.tokenStatus, }; } @@ -132,6 +137,7 @@ export class GitlabAuthService implements GitAuthProvider { this.token = accessToken; this.currentUser = user; + this.tokenStatus = "valid"; this.tokenStorageService.saveToken("gitlab", accessToken, rememberMe, tokenResponse.expires_in, tokenResponse.refresh_token); this.tokenStorageService.saveUserData("gitlab", user, rememberMe); @@ -171,10 +177,54 @@ export class GitlabAuthService implements GitAuthProvider { return this.token; } + checkTokenValidity(): Observable { + if (!this.isSignedIn()) { + this.tokenStatus = "unknown"; + this.notifyAuthChange(); + return of(false); + } + + return from(this.ensureValidToken()).pipe( + switchMap((validToken) => { + if (!validToken) { + this.tokenStatus = "invalid"; + this.notifyAuthChange(); + return of(false); + } + const userUrl = `${this.instanceUrl}/api/v4/user`; + const headers = new HttpHeaders({ + Authorization: `Bearer ${validToken}`, + }); + return this.http.get(userUrl, { headers }).pipe( + map(() => { + this.tokenStatus = "valid"; + this.notifyAuthChange(); + return true; + }), + catchError((err) => { + if (err?.status === 401 || err?.status === 403) { + this.tokenStatus = "invalid"; + this.notifyAuthChange(); + } + return of(false); + }), + ); + }), + ); + } + + markTokenInvalid(): void { + if (this.tokenStatus !== "invalid") { + this.tokenStatus = "invalid"; + this.notifyAuthChange(); + } + } + signOut(): void { this.clearRefreshTimer(); this.token = null; this.currentUser = null; + this.tokenStatus = "unknown"; this.tokenStorageService.clearAll("gitlab"); this.notifyAuthChange(); } @@ -443,8 +493,12 @@ export class GitlabAuthService implements GitAuthProvider { this.scheduleProactiveRefresh(remainingSeconds); } } + this.checkTokenValidity().subscribe(); } else if (storedToken || storedRefreshToken || storedUser) { + this.tokenStatus = "unknown"; this.tokenStorageService.clearAll("gitlab"); + } else { + this.tokenStatus = "unknown"; } } @@ -453,6 +507,7 @@ export class GitlabAuthService implements GitAuthProvider { isSignedIn: this.isSignedIn(), token: this.token, user: this.currentUser, + tokenStatus: this.tokenStatus, }); } } diff --git a/src/app/services/gitlab-custom-auth.service.ts b/src/app/services/gitlab-custom-auth.service.ts index 7c72977c..111ea974 100644 --- a/src/app/services/gitlab-custom-auth.service.ts +++ b/src/app/services/gitlab-custom-auth.service.ts @@ -1,7 +1,8 @@ import { HttpClient, HttpHeaders } from "@angular/common/http"; import { Injectable } from "@angular/core"; -import { BehaviorSubject, Observable } from "rxjs"; -import { Account } from "@models/Account.model"; +import { BehaviorSubject, Observable, forkJoin, of } from "rxjs"; +import { catchError, map } from "rxjs/operators"; +import { Account, TokenStatus } from "@models/Account.model"; import { TokenStorageService } from "@services/token-storage.service"; export interface GitlabCustomUser { @@ -25,6 +26,7 @@ export class GitlabCustomAuthService { private accountsSubject = new BehaviorSubject([]); private accounts: Account[] = []; + private tokenStatusMap = new Map(); constructor(private http: HttpClient, private tokenStorageService: TokenStorageService) { this.accountsChange$ = this.accountsSubject.asObservable(); @@ -45,6 +47,11 @@ export class GitlabCustomAuthService { return this.accounts.some((a) => a.instanceHost === cleanHost); } + getTokenStatus(instanceHost: string): TokenStatus { + const cleanHost = this.cleanHostName(instanceHost); + return this.tokenStatusMap.get(cleanHost) || "unknown"; + } + normalizeUrl(rawUrl: string): { cleanUrl: string; host: string } { let trimmed = (rawUrl || "").trim(); if (!trimmed) { @@ -106,6 +113,17 @@ export class GitlabCustomAuthService { throw new Error("INVALID_USER_DATA"); } + let tokenExpiresInDays: number | null = null; + try { + const patData: any = await this.http.get(`${cleanUrl}/api/v4/personal_access_tokens/self`, { headers }).toPromise(); + if (patData?.expires_at) { + const diffMs = new Date(patData.expires_at).getTime() - Date.now(); + tokenExpiresInDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24)); + } + } catch { + /* Token self endpoint is optional on older GitLab versions */ + } + const instanceName = alias && alias.trim() ? alias.trim() : host; const account: Account = { id: `acc-gitlab-host-${host}`, @@ -116,8 +134,11 @@ export class GitlabCustomAuthService { instanceName, authType: "pat", isCurrent: false, + tokenStatus: "valid", + tokenExpiresInDays, }; + this.tokenStatusMap.set(host, "valid"); this.tokenStorageService.saveToken("gitlab", cleanPat, rememberMe, undefined, undefined, host); const userData: GitlabCustomUserData = { user, @@ -136,8 +157,55 @@ export class GitlabCustomAuthService { return account; } + checkTokenValidity(instanceHost?: string): Observable { + if (instanceHost) { + const cleanHost = this.cleanHostName(instanceHost); + const token = this.tokenStorageService.getToken("gitlab", cleanHost); + if (!token) { + this.tokenStatusMap.set(cleanHost, "unknown"); + this.updateAccountStatus(cleanHost, "unknown"); + return of(false); + } + + const headers = new HttpHeaders({ + "PRIVATE-TOKEN": token, + }); + + return this.http.get(`https://${cleanHost}/api/v4/user`, { headers }).pipe( + map(() => { + this.tokenStatusMap.set(cleanHost, "valid"); + this.updateAccountStatus(cleanHost, "valid"); + return true; + }), + catchError((err) => { + if (err?.status === 401 || err?.status === 403) { + this.tokenStatusMap.set(cleanHost, "invalid"); + this.updateAccountStatus(cleanHost, "invalid"); + } + return of(false); + }), + ); + } + + if (this.accounts.length === 0) { + return of(true); + } + + const checks = this.accounts.map((acc) => this.checkTokenValidity(acc.instanceHost)); + return forkJoin(checks).pipe(map((results) => results.every(Boolean))); + } + + markTokenInvalid(instanceHost: string): void { + const cleanHost = this.cleanHostName(instanceHost); + if (this.tokenStatusMap.get(cleanHost) !== "invalid") { + this.tokenStatusMap.set(cleanHost, "invalid"); + this.updateAccountStatus(cleanHost, "invalid"); + } + } + disconnectInstance(instanceHost: string): void { const cleanHost = this.cleanHostName(instanceHost); + this.tokenStatusMap.delete(cleanHost); this.tokenStorageService.clearAll("gitlab", cleanHost); this.accounts = this.accounts.filter((a) => a.instanceHost !== cleanHost); this.accountsSubject.next(this.getAccounts()); @@ -151,6 +219,14 @@ export class GitlabCustomAuthService { return `https://${cleanHost}/${encodeURIComponent(username)}`; } + private updateAccountStatus(cleanHost: string, status: TokenStatus): void { + const account = this.accounts.find((a) => a.instanceHost === cleanHost); + if (account) { + account.tokenStatus = status; + this.accountsSubject.next(this.getAccounts()); + } + } + private cleanHostName(host: string): string { return (host || "") .trim() @@ -168,6 +244,7 @@ export class GitlabCustomAuthService { const data = this.tokenStorageService.getUserData("gitlab", host); if (token && data?.user?.username) { + this.tokenStatusMap.set(host, "unknown"); restoredAccounts.push({ id: `acc-gitlab-host-${host}`, provider: "gitlab", @@ -177,6 +254,7 @@ export class GitlabCustomAuthService { instanceName: data.alias || host, authType: "pat", isCurrent: false, + tokenStatus: "unknown", }); } else if (token || data) { this.tokenStorageService.clearAll("gitlab", host); @@ -185,5 +263,9 @@ export class GitlabCustomAuthService { this.accounts = restoredAccounts; this.accountsSubject.next(this.getAccounts()); + + for (const host of customHosts) { + this.checkTokenValidity(host).subscribe(); + } } } diff --git a/src/app/services/loader.service.ts b/src/app/services/loader.service.ts index 4f60856f..9da30235 100644 --- a/src/app/services/loader.service.ts +++ b/src/app/services/loader.service.ts @@ -3,8 +3,9 @@ import { Milestone } from "@models/Milestone.model"; import { QuestionClosingMode } from "@models/Metadata.model"; import { Repository } from "@models/Repository.model"; import { TranslateService } from "@ngx-translate/core"; -import { Observable } from "rxjs"; -import { map } from "rxjs/operators"; +import { Observable, of } from "rxjs"; +import { map, switchMap } from "rxjs/operators"; +import { AccountsService } from "./accounts.service"; import { CommitsService } from "./commits.service"; import { DataService } from "./data.service"; import { ToastService } from "./toast.service"; @@ -21,12 +22,14 @@ export class LoaderService { * @param dataService The service that stores the data * @param translateService The translation service * @param toastService The service displaying error or warning toasts + * @param accountsService The service managing accounts and token status */ constructor( private commitsService: CommitsService, private dataService: DataService, private translateService: TranslateService, private toastService: ToastService, + private accountsService: AccountsService, ) {} /** @@ -45,25 +48,61 @@ export class LoaderService { corrections: Milestone[], questions: string[], closingMode?: QuestionClosingMode, - customClosingKeywords?: string[], + customKeywords?: string[], ) { const mode = closingMode || this.dataService.closingMode; - const customKeywords = customClosingKeywords !== undefined ? customClosingKeywords : this.dataService.customClosingKeywords; + const keywords = customKeywords !== undefined ? customKeywords : this.dataService.customClosingKeywords; repositories.forEach((repository) => { let filteredReviews = reviews?.filter((review) => review.tpGroup === repository.tpGroup || !review.tpGroup); let filteredCorrections = corrections?.filter((correction) => correction.tpGroup === repository.tpGroup || !correction.tpGroup); - repository.commits?.forEach((commit) => commit.updateMetadata(filteredReviews, filteredCorrections, questions, mode, customKeywords)); + repository.commits?.forEach((commit) => commit.updateMetadata(filteredReviews, filteredCorrections, questions, mode, keywords)); }); } /** - * Fetch the repositories from Github and loads their commits with [loadCommitsMetadata]{@link LoaderService#loadCommitsMetadata} + * Fetch the repositories from Git provider and loads their commits with [loadCommitsMetadata]{@link LoaderService#loadCommitsMetadata} * @param startDate The date from which commits are retrieved * @param endDate The date up to which commits are retrieved */ loadRepositories(startDate?: string, endDate?: string): Observable { + const firstRepo = this.dataService.repositories?.[0]; + if (!firstRepo) { + return of(undefined); + } + + const provider = firstRepo.provider || "github"; + let instanceHost: string | undefined; + if (firstRepo.url) { + try { + instanceHost = new URL(firstRepo.url).hostname; + } catch {} + } + + const tokenStatus = this.accountsService.getTokenStatus(provider, instanceHost); + + if (tokenStatus === "invalid") { + this.showInvalidTokenToast(provider); + return of(undefined); + } + + if (tokenStatus === "unknown") { + return this.accountsService.checkTokenValidity(provider, instanceHost).pipe( + switchMap((isValid) => { + if (!isValid) { + this.showInvalidTokenToast(provider); + return of(undefined); + } + return this.executeLoadRepositories(startDate, endDate); + }), + ); + } + + return this.executeLoadRepositories(startDate, endDate); + } + + private executeLoadRepositories(startDate?: string, endDate?: string): Observable { let translations = this.translateService.instant([ "ERRORS.REPOSITORY-NOT-FOUND", "ERRORS.README-NOT-FOUND", @@ -102,4 +141,11 @@ export class LoaderService { }), ); } + + private showInvalidTokenToast(provider: string): void { + const title = this.translateService.instant("TOKEN_HEALTH.ERROR_TITLE"); + const messageKey = provider === "gitlab" ? "TOKEN_HEALTH.ERROR_MSG_GITLAB" : "TOKEN_HEALTH.ERROR_MSG_GITHUB"; + const message = this.translateService.instant(messageKey); + this.toastService.error(title, message); + } } diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 4d7b5dc0..32c49fc9 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -636,7 +636,8 @@ "INVALID_PAT": "Invalid or expired Personal Access Token (PAT) (required scopes: read_api, read_user).", "SERVER_UNREACHABLE": "Unable to reach the GitLab server. Please verify the instance URL.", "INVALID_HOST": "For gitlab.com, please use the GitLab Cloud option above.", - "SWITCH_INSTANCE": "Switch instance" + "SWITCH_INSTANCE": "Switch instance", + "STATUS_INVALID": "Expired" }, "QUESTIONS-ASSISTANT": { "TRIGGER_BUTTON": "Options & generator", @@ -672,5 +673,11 @@ "STUDENT_FALLBACK": "Student", "ANONYMOUS_AUTHOR": "Hidden author", "ACTIVE_BADGE": "Anonymous mode active" + }, + "TOKEN_HEALTH": { + "INVALID_TOOLTIP": "Invalid or revoked token – please reconnect", + "ERROR_TITLE": "Authentication Expired", + "ERROR_MSG_GITHUB": "Your GitHub token is invalid or has expired. Please reconnect in the Accounts section.", + "ERROR_MSG_GITLAB": "Your GitLab token is invalid or has expired. Please reconnect in the Accounts section." } } diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index eff103d8..61e83024 100644 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -636,7 +636,8 @@ "INVALID_PAT": "Jeton d'accès personnel (PAT) invalide ou expiré (droits requis : read_api, read_user).", "SERVER_UNREACHABLE": "Impossible de joindre le serveur GitLab. Vérifiez l'URL de l'instance.", "INVALID_HOST": "Pour gitlab.com, utilisez l'option GitLab Cloud ci-dessus.", - "SWITCH_INSTANCE": "Changer d'instance" + "SWITCH_INSTANCE": "Changer d'instance", + "STATUS_INVALID": "Expiré" }, "QUESTIONS-ASSISTANT": { "TRIGGER_BUTTON": "Options & générateur", @@ -672,5 +673,11 @@ "STUDENT_FALLBACK": "Étudiant·e", "ANONYMOUS_AUTHOR": "Auteur masqué", "ACTIVE_BADGE": "Anonymat actif" + }, + "TOKEN_HEALTH": { + "INVALID_TOOLTIP": "Token invalide ou révoqué – reconnectez-vous", + "ERROR_TITLE": "Authentification expirée", + "ERROR_MSG_GITHUB": "Votre token GitHub est invalide ou a expiré. Reconnectez-vous depuis la section Comptes.", + "ERROR_MSG_GITLAB": "Votre token GitLab est invalide ou a expiré. Reconnectez-vous depuis la section Comptes." } } diff --git a/src/assets/i18n/ru.json b/src/assets/i18n/ru.json index ff7f4cde..9c02ff07 100644 --- a/src/assets/i18n/ru.json +++ b/src/assets/i18n/ru.json @@ -633,7 +633,8 @@ "INVALID_PAT": "Недействительный или просроченный Personal Access Token (PAT) (требуются права: read_api, read_user).", "SERVER_UNREACHABLE": "Не удается подключиться к серверу GitLab. Проверьте URL инстанса.", "INVALID_HOST": "Для gitlab.com используйте опцию GitLab Cloud выше.", - "SWITCH_INSTANCE": "Сменить инстанс" + "SWITCH_INSTANCE": "Сменить инстанс", + "STATUS_INVALID": "Истек" }, "QUESTIONS-ASSISTANT": { "TRIGGER_BUTTON": "Опции и генератор", @@ -669,5 +670,11 @@ "STUDENT_FALLBACK": "Студент", "ANONYMOUS_AUTHOR": "Скрытый автор", "ACTIVE_BADGE": "Анонимный режим активен" + }, + "TOKEN_HEALTH": { + "INVALID_TOOLTIP": "Токен недействителен или отозван – выполните повторный вход", + "ERROR_TITLE": "Аутентификация истекла", + "ERROR_MSG_GITHUB": "Ваш токен GitHub недействителен или истек. Выполните повторный вход в разделе «Учетные записи».", + "ERROR_MSG_GITLAB": "Ваш токен GitLab недействителен или истек. Выполните повторный вход в разделе «Учетные записи»." } } From dd279d4f7dce783eab8b94c798a0bcc99f36e50a Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Wed, 23 Sep 2026 10:42:50 +0200 Subject: [PATCH 10/23] =?UTF-8?q?=E2=9C=A8=20Add=20overlapping=20session?= =?UTF-8?q?=20navigation=20with=20edge=20arrows=20and=20contextual=20menu?= =?UTF-8?q?=20option?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/graphs/commits/chart.scss | 34 +++ .../graphs/commits/commits.component.ts | 230 ++++++++++++------ .../graphs/commits/session-header-renderer.ts | 197 +++++++++++++++ ...rview-graph-contextual-menu.component.html | 2 +- ...verview-graph-contextual-menu.component.ts | 45 +--- 5 files changed, 405 insertions(+), 103 deletions(-) create mode 100644 src/app/components/graphs/commits/session-header-renderer.ts diff --git a/src/app/components/graphs/commits/chart.scss b/src/app/components/graphs/commits/chart.scss index 5f1483ee..6537c78f 100644 --- a/src/app/components/graphs/commits/chart.scss +++ b/src/app/components/graphs/commits/chart.scss @@ -397,4 +397,38 @@ body.dark-theme .commit { font-weight: 600; user-select: none; } +} + +/* Session edge arrows — Navigation entre séances superposées + * Ghost par défaut, reveal au hover, feedback physique au clic. + * Padding étendu pour une zone de clic confortable sans encombrer. */ +.session-edge-arrow { + background: transparent; + border: 1px solid transparent; + border-radius: 6px; + color: var(--color-text-secondary); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + /* Larger padding = larger hit area, CSS clip-path keeps visual size small */ + padding: 4px 6px; + flex-shrink: 0; + will-change: transform; + transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform 120ms ease-out; + + svg { + display: block; + flex-shrink: 0; + } + + &:hover { + background: var(--color-background-secondary); + border-color: var(--color-border); + color: var(--color-primary); + } + + &:active { + transform: scale(0.88); + } } \ No newline at end of file diff --git a/src/app/components/graphs/commits/commits.component.ts b/src/app/components/graphs/commits/commits.component.ts index 1a8914f5..2fc85425 100644 --- a/src/app/components/graphs/commits/commits.component.ts +++ b/src/app/components/graphs/commits/commits.component.ts @@ -34,10 +34,9 @@ import { OsUtils } from "@utils/os.utils"; import * as d3 from "d3"; import * as moment from "moment"; import { Repository } from "../../../models/Repository.model"; -import { tick } from "@angular/core/testing"; -import { rejects } from "assert"; -import { Utils } from "../../../services/utils"; +import { Utils } from "@services/utils"; import { FilterGroup } from "@components/questions-chooser/questions-chooser.component"; +import { SessionHeaderRenderer } from "./session-header-renderer"; @Component({ selector: "commits", @@ -117,6 +116,8 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte other_g: d3.Selection; session_g: d3.Selection; session_header_g: d3.Selection; + overlapGroups: Session[][] = []; + activeSessionIndices: Map = new Map(); review_g: d3.Selection; correction_g: d3.Selection; milestones_g: d3.Selection; @@ -224,6 +225,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte } } + saveMarkerPreferences() { const preferences = { showSessions: this.showSessions, @@ -639,7 +641,8 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte } if (this.hovered_g && (this.hovered_commit || this.hovered_group_commit)) { - if (this.hovered_g.select(":hover").empty()) { + const node = this.hovered_g.node(); + if (!node || !node.isConnected || this.hovered_g.select(":hover").empty()) { this.hovered_commit = undefined; this.hovered_group_commit = undefined; this.hovered_g = null; @@ -677,9 +680,11 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte this.zoom = d3 .zoom() .on("start", (event) => { - if (event.sourceEvent != null) { - overview.overlayManagerService.dismissAll({ blurInput: true }); - } + overview.hovered_commit = undefined; + overview.hovered_group_commit = undefined; + overview.hovered_g = null; + overview.tooltipService.hide(); + overview.overlayManagerService.dismissAll({ blurInput: true }); }) .on("zoom", (event) => { if (overview.drag || !overview.x_scale) { @@ -1311,7 +1316,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .style("display", rawX2 >= 0 && rawX2 <= this.inner_width ? "inline" : "none"); } - buildSessionHeader(g: d3.Selection, session: Session) { + buildSessionHeader(g: d3.Selection, session: Session, overlapGroup?: Session[]) { const overview = this; const sessionKey = session.startDate instanceof Date ? session.startDate.getTime() : new Date(session.startDate).getTime(); @@ -1349,14 +1354,17 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte const hasNotes = !!(session.notes && session.notes.trim().length > 0); const groupName = session.tpGroup || ""; - const usersSvg = - ''; + /* prettier-ignore */ + // eslint-disable-next-line @typescript-eslint/quotes, max-len + const usersSvg = ''; - const calendarSvg = - ''; + /* prettier-ignore */ + // eslint-disable-next-line @typescript-eslint/quotes, max-len + const calendarSvg = ''; - const noteSvg = - ''; + /* prettier-ignore */ + // eslint-disable-next-line @typescript-eslint/quotes, max-len + const noteSvg = ''; // 1. Continuous header background filling top strip behind pills group @@ -1415,42 +1423,18 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .style("pointer-events", "auto") .style("overflow", "hidden"); - fo.html(` -
- - - ${calendarSvg} - ${displayName} - - - ${ - groupName - ? ` - - ${usersSvg} - ${groupName} - ` - : "" - } - - ${ - hasNotes - ? ` - - ${noteSvg} - ` - : "" - } - - -
- `); + SessionHeaderRenderer.renderHeader({ + session, + overlapGroup, + overview, + displayName, + groupName, + hasNotes, + fo, + calendarSvg, + usersSvg, + noteSvg, + }); if (hasNotes) { group @@ -1522,6 +1506,17 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte (session) => !this.dataService.groupFilter || !session.tpGroup || session.tpGroup === this.dataService.groupFilter, ); + this.overlapGroups = this.computeOverlapGroups(loaded_sessions); + const newActiveIndices = new Map(); + for (const group of this.overlapGroups) { + if (group.length > 1) { + const groupId = this.getGroupId(group); + const existingIdx = this.activeSessionIndices.get(groupId); + newActiveIndices.set(groupId, existingIdx !== undefined && existingIdx < group.length ? existingIdx : 0); + } + } + this.activeSessionIndices = newActiveIndices; + this.session_g = this.data_g.insert("g", () => (this.repository_g ? this.repository_g.node() : null)); if (this.chart_abs_g) { @@ -1557,11 +1552,12 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .data(loaded_sessions) .enter() .each(function (d: Session) { - overview.buildSessionHeader(d3.select(this), d); + overview.buildSessionHeader(d3.select(this), d, overview.getSessionOverlapGroup(d)); }); } this.updateSessionsTransforms(); + this.updateSessionVisibility(); } private resolveMilestoneType(m?: Milestone, g?: d3.Selection): string { @@ -2526,8 +2522,8 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte this.hovered_repository = undefined; }) .on("mouseleave", () => { - if (this.hovered_g === g) { - this.hovered_g = undefined; + if (this.hovered_g?.node() === g.node()) { + this.hovered_g = null; this.hovered_group_commit = undefined; } }) @@ -2557,9 +2553,17 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .style("--y-offset", `${-CommitsComponent.GROUP_HEIGHT / 2}px`) .attr("fill", commit.color.color) .attr("class", "data") - .on("mouseenter", (e, d) => (this.hovered_group_commit = d)) + .on("mouseenter", (e, d) => { + this.hovered_commit = undefined; + this.hovered_group_commit = d; + this.hovered_g = g; + this.hovered_repository = undefined; + }) .on("mouseleave", () => { - this.hovered_group_commit = undefined; + if (this.hovered_g?.node() === g.node()) { + this.hovered_g = null; + this.hovered_group_commit = undefined; + } }); g.on("click", (e, d) => { @@ -2805,9 +2809,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte } private splitCommitGroup(g: any, commits: Commit[], repo_g: any) { - if (this.hovered_g === g) { - this.hovered_g = undefined; + if (this.hovered_g?.node() === g.node() || this.hovered_group_commit === commits) { + this.hovered_g = null; this.hovered_group_commit = undefined; + this.tooltipService.hide(); } let before = undefined; g.remove(); @@ -3122,7 +3127,12 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte namePill.select(".session-name-text").text(displayName); } - if (foWidth < 28) { + const overlapGroup = overview.getSessionOverlapGroup(s); + const isOverlap = !!(overlapGroup && overlapGroup.length > 1); + const navReservedWidth = isOverlap ? 74 : 0; // Left arrow (~22px) + Right arrow (~22px) + Counter (~22px) + gaps (~8px) + const minFoWidth = isOverlap ? 48 : 28; + + if (foWidth < minFoWidth) { // Extremely narrow: hide badges completely fo.style("display", "none").style("visibility", "hidden"); return; @@ -3130,6 +3140,8 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte fo.style("display", null).style("visibility", "visible"); + const availWidth = Math.max(0, foWidth - navReservedWidth); + // Width estimations const charWidth = 6.2; const iconAndPadding = 29; // 11px icon + 4px gap + 14px padding @@ -3143,7 +3155,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte // Total needed to display all available session elements in full const neededAll = nameNeeded + (hasGroup ? gap + groupNeeded : 0) + (hasNotes ? gap + noteBtnWidth : 0) + padTotal; - if (foWidth >= neededAll) { + if (availWidth >= neededAll) { // Case 1: Everything fits without truncation if (!namePill.empty()) { namePill.style("display", "inline-flex").style("max-width", "none"); @@ -3163,7 +3175,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte const neededNameAndGroup = nameNeeded + (hasGroup ? gap + groupNeeded : 0) + padTotal; const neededNameGroupMore = neededNameAndGroup + (hasNotes ? gap + moreBtnWidth : 0); - if (hasGroup && foWidth >= neededNameGroupMore) { + if (hasGroup && availWidth >= neededNameGroupMore) { // Name full, Group full, Note dropped -> show "..." if hasNotes if (!namePill.empty()) { namePill.style("display", "inline-flex").style("max-width", "none"); @@ -3177,9 +3189,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte if (!moreBtn.empty()) { moreBtn.style("display", hasNotes ? "inline-flex" : "none"); } - } else if (hasGroup && foWidth >= nameNeeded + gap + 38 + (hasNotes ? gap + moreBtnWidth : 0) + padTotal) { + } else if (hasGroup && availWidth >= nameNeeded + gap + 38 + (hasNotes ? gap + moreBtnWidth : 0) + padTotal) { // Name full, Group truncated with ellipsis, Note dropped -> show "..." if hasNotes - const availableForGroup = foWidth - nameNeeded - (hasNotes ? gap + moreBtnWidth : 0) - gap - padTotal; + const availableForGroup = availWidth - nameNeeded - (hasNotes ? gap + moreBtnWidth : 0) - gap - padTotal; if (!namePill.empty()) { namePill.style("display", "inline-flex").style("max-width", "none"); } @@ -3190,9 +3202,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte noteBtn.style("display", "none"); } if (!moreBtn.empty()) { - moreBtn.style("display", hasNotes ? "inline-flex" : "none"); + moreBtn.style("display", "inline-flex"); } - } else if (foWidth >= nameNeeded + (hasGroup || hasNotes ? gap + moreBtnWidth : 0) + padTotal) { + } else if (availWidth >= nameNeeded + (hasGroup || hasNotes ? gap + moreBtnWidth : 0) + padTotal) { // Name full, Group dropped, Note dropped -> show "..." if hasGroup or hasNotes if (!namePill.empty()) { namePill.style("display", "inline-flex").style("max-width", "none"); @@ -3206,9 +3218,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte if (!moreBtn.empty()) { moreBtn.style("display", hasGroup || hasNotes ? "inline-flex" : "none"); } - } else if (foWidth >= 38 + (hasGroup || hasNotes ? gap + moreBtnWidth : 0) + padTotal) { + } else if (availWidth >= 38 + (hasGroup || hasNotes ? gap + moreBtnWidth : 0) + padTotal) { // Name truncated with ellipsis, Group & Note dropped -> show "..." if hasGroup or hasNotes - const availableForName = foWidth - (hasGroup || hasNotes ? gap + moreBtnWidth : 0) - padTotal; + const availableForName = availWidth - (hasGroup || hasNotes ? gap + moreBtnWidth : 0) - padTotal; if (!namePill.empty()) { namePill.style("display", "inline-flex").style("max-width", `${Math.max(34, availableForName)}px`); } @@ -3221,10 +3233,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte if (!moreBtn.empty()) { moreBtn.style("display", hasGroup || hasNotes ? "inline-flex" : "none"); } - } else if (foWidth >= 38) { + } else if (availWidth >= 38) { // Only enough room for Name truncated with ellipsis if (!namePill.empty()) { - namePill.style("display", "inline-flex").style("max-width", `${foWidth - 6}px`); + namePill.style("display", "inline-flex").style("max-width", `${availWidth - 6}px`); } if (!groupPill.empty()) { groupPill.style("display", "none"); @@ -3236,7 +3248,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte moreBtn.style("display", "none"); } } else { - // Width between 28px and 38px: + // Width between minFoWidth and 38px: // Too small for Name pill, show "..." badge representing the hidden session info if (!namePill.empty()) { namePill.style("display", "none"); @@ -3255,6 +3267,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte }); } this.updateMilestoneCutoutMask(); + this.updateSessionVisibility(); } private updateMilestoneTransforms() { @@ -3383,6 +3396,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte zoomToGroup(commits: Commit[], range: number) { if (!commits || commits.length < 2 || range <= 0) return; + this.hovered_commit = undefined; + this.hovered_group_commit = undefined; + this.hovered_g = null; + this.tooltipService.hide(); this.overlayManagerService.dismissAll(); let time_domain = this.x_scale.domain(); @@ -3500,4 +3517,79 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte private saveData() { this.updateAfterMilestoneChange(); } + + private computeOverlapGroups(sessions: Session[]): Session[][] { + const sorted = [...sessions].sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime()); + const groups: Session[][] = []; + const visited = new Set(); + for (const session of sorted) { + if (visited.has(session)) continue; + const group: Session[] = [session]; + visited.add(session); + let changed = true; + while (changed) { + changed = false; + for (const other of sorted) { + if (visited.has(other)) continue; + if (group.some((s) => this.sessionsOverlap(s, other))) { + group.push(other); + visited.add(other); + changed = true; + } + } + } + groups.push(group.sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime())); + } + return groups; + } + + private sessionsOverlap(a: Session, b: Session): boolean { + const aStart = new Date(a.startDate).getTime(); + const aEnd = new Date(a.endDate).getTime(); + const bStart = new Date(b.startDate).getTime(); + const bEnd = new Date(b.endDate).getTime(); + return aStart < bEnd && bStart < aEnd; + } + + public getGroupId(group: Session[]): string { + return String(new Date(group[0].startDate).getTime()); + } + + public getSessionKeyNum(session: Session): number { + return session.startDate instanceof Date ? session.startDate.getTime() : new Date(session.startDate).getTime(); + } + + public getSessionOverlapGroup(session: Session): Session[] | null { + return this.overlapGroups.find((g) => g.includes(session)) || null; + } + + public updateSessionVisibility() { + if (!this.overlapGroups || !this.session_g) return; + for (const group of this.overlapGroups) { + if (group.length <= 1) continue; + const groupId = this.getGroupId(group); + const activeIdx = this.activeSessionIndices.get(groupId) ?? 0; + group.forEach((session, idx) => { + const key = this.getSessionKeyNum(session); + const isActive = idx === activeIdx; + this.session_g.select(`.session-group-${key}`).style("opacity", isActive ? null : "0.25"); + if (!this.session_header_g) return; + const hdrGroup = this.session_header_g.select(`.session-hdr-group-${key}`); + if (hdrGroup.empty()) return; + if (!isActive) { + hdrGroup.style("display", "none").style("visibility", "hidden"); + } else { + const rawX1 = this.xScaledTimeZoned(session.startDate); + const rawX2 = this.xScaledTimeZoned(session.endDate); + const isInViewport = + !isNaN(rawX1) && !isNaN(rawX2) && rawX2 > 0 && rawX1 < this.inner_width && Math.max(0, rawX2 - Math.max(0, rawX1)) > 0; + if (isInViewport) { + hdrGroup.style("display", null).style("visibility", null); + } else { + hdrGroup.style("display", "none").style("visibility", "hidden"); + } + } + }); + } + } } diff --git a/src/app/components/graphs/commits/session-header-renderer.ts b/src/app/components/graphs/commits/session-header-renderer.ts new file mode 100644 index 00000000..621e55f0 --- /dev/null +++ b/src/app/components/graphs/commits/session-header-renderer.ts @@ -0,0 +1,197 @@ +/* eslint-disable max-len */ +import * as d3 from "d3"; +import { Session } from "@models/Session.model"; + +export interface SessionHeaderRenderContext { + session: Session; + overlapGroup: Session[] | null; + overview: any; + displayName: string; + groupName: string; + hasNotes: boolean; + fo: d3.Selection; + calendarSvg: string; + usersSvg: string; + noteSvg: string; +} + +export class SessionHeaderRenderer { + public static renderHeader(ctx: SessionHeaderRenderContext): void { + const isOverlap = !!(ctx.overlapGroup && ctx.overlapGroup.length > 1); + if (isOverlap) { + this.renderOverlappingSession(ctx); + } else { + this.renderSingleSession(ctx); + } + } + + /* ------------------------------------------------------------- + * Séance non superposée (rendu standard sans flèches) + * ------------------------------------------------------------- */ + private static renderSingleSession(ctx: SessionHeaderRenderContext): void { + const { displayName, groupName, hasNotes, fo, calendarSvg, usersSvg, noteSvg } = ctx; + + fo.html(` +
+ + + ${calendarSvg} + ${displayName} + + + ${ + groupName + ? ` + + ${usersSvg} + ${groupName} + ` + : "" + } + + ${ + hasNotes + ? ` + + ${noteSvg} + ` + : "" + } + + +
+ `); + } + + /* ------------------------------------------------------------- + * Séance superposée (flèches d'arête aux extrémités + badges centrés) + * ------------------------------------------------------------- */ + private static renderOverlappingSession(ctx: SessionHeaderRenderContext): void { + const { session, overlapGroup, overview, displayName, groupName, hasNotes, fo, calendarSvg, usersSvg, noteSvg } = ctx; + + if (!overlapGroup || overlapGroup.length <= 1) { + this.renderSingleSession(ctx); + return; + } + + const sessionIdxInGroup = overlapGroup.indexOf(session); + const groupSize = overlapGroup.length; + + /* SVG chevrons — stroke cohérent avec les icônes de l'app */ + /* prettier-ignore */ + // eslint-disable-next-line @typescript-eslint/quotes + const chevronLeft = ''; + /* prettier-ignore */ + // eslint-disable-next-line @typescript-eslint/quotes + const chevronRight = ''; + + fo.html(` +
+ + + + +
+ + + ${calendarSvg} + ${displayName} + + + + ${ + groupName + ? ` + + ${usersSvg} + ${groupName} + ` + : "" + } + + + ${ + hasNotes + ? ` + + ${noteSvg} + ` + : "" + } + + + + + + ${ + sessionIdxInGroup + 1 + }/${groupSize} +
+ + + +
+ `); + + const groupId = overview.getGroupId(overlapGroup); + const svc = overview.tooltipService; + const len = overlapGroup.length; + + const getIdx = () => overview.activeSessionIndices.get(groupId) ?? 0; + + this.attachTooltip(fo.select(".session-edge-prev"), svc, () => { + const prev = (getIdx() - 1 + len) % len; + return `Séance précédente (${prev + 1}/${len})`; + }); + fo.select(".session-edge-prev").on("click", (e: MouseEvent) => { + e.stopPropagation(); + svc.hide(); + overview.activeSessionIndices.set(groupId, (getIdx() - 1 + len) % len); + overview.updateSessionsTransforms(); + }); + + this.attachTooltip(fo.select(".session-edge-next"), svc, () => { + const next = (getIdx() + 1) % len; + return `Séance suivante (${next + 1}/${len})`; + }); + fo.select(".session-edge-next").on("click", (e: MouseEvent) => { + e.stopPropagation(); + svc.hide(); + overview.activeSessionIndices.set(groupId, (getIdx() + 1) % len); + overview.updateSessionsTransforms(); + }); + } + + /* ------------------------------------------------------------- + * Helper : Attache les events de tooltip sur une sélection D3 HTML. + * ------------------------------------------------------------- */ + private static attachTooltip( + selection: d3.Selection, + svc: any, + getText: () => string, + placement: "top" | "bottom" | "left" | "right" = "bottom", + ): void { + selection + .on("mouseenter", function (this: HTMLElement) { + svc.show(getText(), this, placement); + }) + .on("mouseleave", () => svc.hide()) + .on("mousedown", () => svc.hide()); + } +} diff --git a/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.html b/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.html index e04ea175..e90a94a4 100644 --- a/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.html +++ b/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.html @@ -12,7 +12,7 @@ - diff --git a/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.ts b/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.ts index a086f60d..8a78dd5f 100644 --- a/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.ts +++ b/src/app/components/overview-graph-contextual-menu/overview-graph-contextual-menu.component.ts @@ -1,13 +1,4 @@ -import { - Component, - EventEmitter, - Input, - NgZone, - OnDestroy, - OnInit, - Output, - ViewChild, -} from "@angular/core"; +import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output, ViewChild } from "@angular/core"; import { EditMilestoneComponent } from "@components/edit-milestone/edit-milestone.component"; import { EditSessionComponent } from "@components/edit-session/edit-session.component"; import { Milestone } from "@models/Milestone.model"; @@ -55,23 +46,16 @@ export class OverviewGraphContextualMenuComponent implements OnInit, OnDestroy { constructor( private customModalService: CustomModalService, private overlayManagerService: OverlayManagerService, - private ngZone: NgZone + private ngZone: NgZone, ) {} ngOnInit(): void { this.setEditModes(false, false); - this.overlayManagerService.dismiss$ - .pipe(takeUntil(this.destroy$)) - .subscribe((event) => { - if ( - OverlayManagerService.shouldDismiss( - OverlayType.CONTEXT_MENU, - event - ) - ) { - this.close(); - } - }); + this.overlayManagerService.dismiss$.pipe(takeUntil(this.destroy$)).subscribe((event) => { + if (OverlayManagerService.shouldDismiss(OverlayType.CONTEXT_MENU, event)) { + this.close(); + } + }); } ngOnDestroy(): void { @@ -151,14 +135,13 @@ export class OverviewGraphContextualMenuComponent implements OnInit, OnDestroy { addMilestone() { this.milestone = null; - this.openMilestoneModal( - new Milestone(this.date, "", void 0, this.groupFilter) - ); + this.openMilestoneModal(new Milestone(this.date, "", void 0, this.groupFilter)); } addSession() { this.session = null; - let endDate = Utils.addTimeToDate(this.date, this.defaultSessionDuration); + this.editSessionMode = false; + const endDate = Utils.addTimeToDate(this.date, this.defaultSessionDuration); this.openSessionModal(new Session(this.date, endDate, this.groupFilter)); } @@ -171,10 +154,7 @@ export class OverviewGraphContextualMenuComponent implements OnInit, OnDestroy { } openMilestoneModal(milestone: Milestone) { - let modalReference = this.customModalService.open( - EditMilestoneComponent, - {} - ); + let modalReference = this.customModalService.open(EditMilestoneComponent, {}); modalReference.componentInstance.milestone = milestone; modalReference.componentInstance.addMode = !this.editMilestoneMode; modalReference.componentInstance.tpGroups = this.tpGroups; @@ -190,8 +170,7 @@ export class OverviewGraphContextualMenuComponent implements OnInit, OnDestroy { openSessionModal(session: Session) { let modalReference = this.customModalService.open(EditSessionComponent, {}); modalReference.componentInstance.session = session; - modalReference.componentInstance.defaultSessionDuration = - this.defaultSessionDuration; + modalReference.componentInstance.defaultSessionDuration = this.defaultSessionDuration; modalReference.componentInstance.addMode = !this.editSessionMode; modalReference.componentInstance.tpGroups = this.tpGroups; modalReference.result From da628a6e0b5841dda2f60e08eee4b975be0b48d6 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Wed, 23 Sep 2026 12:23:19 +0200 Subject: [PATCH 11/23] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20Add=20session=20navi?= =?UTF-8?q?gation=20shortcuts,=20fix=20search=20bar=20focus,=20and=20optim?= =?UTF-8?q?ize=20assignment=20load?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../graphs/commits/commits.component.ts | 244 +++++++++++++++--- .../graphs/commits/session-header-renderer.ts | 96 ++++++- .../questions-completion.component.ts | 3 +- .../graphs/students/students.component.ts | 3 +- .../questions-chooser.component.ts | 19 +- src/app/services/loader.service.ts | 12 +- src/app/utils/os.utils.ts | 33 ++- 7 files changed, 336 insertions(+), 74 deletions(-) diff --git a/src/app/components/graphs/commits/commits.component.ts b/src/app/components/graphs/commits/commits.component.ts index 2fc85425..9a38d561 100644 --- a/src/app/components/graphs/commits/commits.component.ts +++ b/src/app/components/graphs/commits/commits.component.ts @@ -27,7 +27,7 @@ import { TooltipService } from "@services/tooltip.service"; import { OverlayManagerService, OverlayType } from "@services/overlay-manager.service"; import { AnonymizationService } from "@services/anonymization.service"; import { Subject, Subscription, concat } from "rxjs"; -import { takeUntil } from "rxjs/operators"; +import { skip, takeUntil } from "rxjs/operators"; import { BaseGraphComponent } from "../base-graph.component"; import { OsUtils } from "@utils/os.utils"; @@ -118,6 +118,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte session_header_g: d3.Selection; overlapGroups: Session[][] = []; activeSessionIndices: Map = new Map(); + lastFocusedSession: Session = null; review_g: d3.Selection; correction_g: d3.Selection; milestones_g: d3.Selection; @@ -225,7 +226,6 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte } } - saveMarkerPreferences() { const preferences = { showSessions: this.showSessions, @@ -280,7 +280,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte this.updateLang(); }); - this.anonymizationService.isAnonymous$.pipe(takeUntil(this.destroy$)).subscribe(() => { + this.anonymizationService.isAnonymous$.pipe(skip(1), takeUntil(this.destroy$)).subscribe(() => { this.loadGraphDataAndRefresh(true); }); @@ -304,6 +304,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte return; } + if (OsUtils.isTypingInInput(event)) { + return; + } + const key = event.key.toLowerCase(); if (key === "escape") { @@ -313,10 +317,6 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte return; } - if (OsUtils.isTypingInInput(event)) { - return; - } - if (key === "f" && !event.ctrlKey && !event.metaKey && !event.altKey) { event.preventDefault(); if (this.questionsChooser && typeof this.questionsChooser.focus === "function") { @@ -343,6 +343,12 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte event.preventDefault(); this.resetZoom(false); this.triggerShortcut("space"); + } else if (event.key === "ArrowLeft" && !event.ctrlKey && !event.metaKey && !event.altKey) { + event.preventDefault(); + this.navigateToNextSession(-1); + } else if (event.key === "ArrowRight" && !event.ctrlKey && !event.metaKey && !event.altKey) { + event.preventDefault(); + this.navigateToNextSession(1); } } @@ -621,13 +627,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte this.current_zoom = null; this.loaderService.loadRepositories(startDate, endDate).subscribe(() => { - this.loadGraphMetadata( - this.dataService.repositories, - this.dataService.reviews, - this.dataService.corrections, - this.dataService.questions, - false, - ); + this.loadGraphDataAndRefresh(false); this.loading = false; }); } catch (error) { @@ -684,7 +684,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte overview.hovered_group_commit = undefined; overview.hovered_g = null; overview.tooltipService.hide(); - overview.overlayManagerService.dismissAll({ blurInput: true }); + if (event.sourceEvent != null) { + overview.overlayManagerService.dismissAll({ blurInput: true }); + } }) .on("zoom", (event) => { if (overview.drag || !overview.x_scale) { @@ -1264,20 +1266,28 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .on("contextmenu", (e) => { e.preventDefault(); e.stopPropagation(); + const targetSession = overview.getActiveSession(session); + overview.lastFocusedSession = targetSession; const rawDate = overview.getDateFromMouseEvent(e); - overview.openEditSessionContextMenu(session, e.pageX, e.pageY, rawDate); + overview.openEditSessionContextMenu(targetSession, e.pageX, e.pageY, rawDate); }) .on("click", (e) => { + const targetSession = overview.getActiveSession(session); + overview.lastFocusedSession = targetSession; const rawDate = overview.getDateFromMouseEvent(e); - overview.openEditSessionContextMenu(session, e.pageX, e.pageY, rawDate); + overview.openEditSessionContextMenu(targetSession, e.pageX, e.pageY, rawDate); }) .on("mouseenter", () => { - d3.selectAll(`.session-bg-${sessionKey}`).style("fill-opacity", "0.14"); - d3.selectAll(`.session-edge-${sessionKey}`).style("stroke-opacity", "0.55"); + const targetSession = overview.getActiveSession(session); + const activeKey = overview.getSessionKeyNum(targetSession); + d3.selectAll(`.session-bg-${activeKey}`).style("fill-opacity", "0.14"); + d3.selectAll(`.session-edge-${activeKey}`).style("stroke-opacity", "0.55"); }) .on("mouseleave", () => { - d3.selectAll(`.session-bg-${sessionKey}`).style("fill-opacity", null); - d3.selectAll(`.session-edge-${sessionKey}`).style("stroke-opacity", null); + const targetSession = overview.getActiveSession(session); + const activeKey = overview.getSessionKeyNum(targetSession); + d3.selectAll(`.session-bg-${activeKey}`).style("fill-opacity", null); + d3.selectAll(`.session-edge-${activeKey}`).style("stroke-opacity", null); }); const rawX1 = this.xScaledTimeZoned(session.startDate); @@ -1328,20 +1338,28 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .on("contextmenu", (e) => { e.preventDefault(); e.stopPropagation(); + const targetSession = overview.getActiveSession(session); + overview.lastFocusedSession = targetSession; const rawDate = overview.getDateFromMouseEvent(e); - overview.openEditSessionContextMenu(session, e.pageX, e.pageY, rawDate); + overview.openEditSessionContextMenu(targetSession, e.pageX, e.pageY, rawDate); }) .on("click", (e) => { + const targetSession = overview.getActiveSession(session); + overview.lastFocusedSession = targetSession; const rawDate = overview.getDateFromMouseEvent(e); - overview.openEditSessionContextMenu(session, e.pageX, e.pageY, rawDate); + overview.openEditSessionContextMenu(targetSession, e.pageX, e.pageY, rawDate); }) .on("mouseenter", () => { - d3.selectAll(`.session-bg-${sessionKey}`).style("fill-opacity", "0.14"); - d3.selectAll(`.session-edge-${sessionKey}`).style("stroke-opacity", "0.55"); + const targetSession = overview.getActiveSession(session); + const activeKey = overview.getSessionKeyNum(targetSession); + d3.selectAll(`.session-bg-${activeKey}`).style("fill-opacity", "0.14"); + d3.selectAll(`.session-edge-${activeKey}`).style("stroke-opacity", "0.55"); }) .on("mouseleave", () => { - d3.selectAll(`.session-bg-${sessionKey}`).style("fill-opacity", null); - d3.selectAll(`.session-edge-${sessionKey}`).style("stroke-opacity", null); + const targetSession = overview.getActiveSession(session); + const activeKey = overview.getSessionKeyNum(targetSession); + d3.selectAll(`.session-bg-${activeKey}`).style("fill-opacity", null); + d3.selectAll(`.session-edge-${activeKey}`).style("stroke-opacity", null); }); const rawX1 = this.xScaledTimeZoned(session.startDate); @@ -1441,8 +1459,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .select(".session-note-btn") .on("mouseenter", (e: MouseEvent) => { e.stopPropagation(); + const targetSession = overview.getActiveSession(session); overview.ngZone.run(() => { - overview.hovered_session = session; + overview.hovered_session = targetSession; overview.hovered_commit = undefined; overview.hovered_group_commit = undefined; overview.hovered_milestone = undefined; @@ -1464,8 +1483,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte }) .on("click", (e: MouseEvent) => { e.stopPropagation(); + const targetSession = overview.getActiveSession(session); + overview.lastFocusedSession = targetSession; const rawDate = overview.getDateFromMouseEvent(e); - overview.openEditSessionContextMenu(session, e.pageX, e.pageY, rawDate); + overview.openEditSessionContextMenu(targetSession, e.pageX, e.pageY, rawDate); }); } @@ -1473,8 +1494,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .select(".session-more-btn") .on("mouseenter", (e: MouseEvent) => { e.stopPropagation(); + const targetSession = overview.getActiveSession(session); overview.ngZone.run(() => { - overview.hovered_session = session; + overview.hovered_session = targetSession; overview.hovered_commit = undefined; overview.hovered_group_commit = undefined; overview.hovered_milestone = undefined; @@ -1496,8 +1518,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte }) .on("click", (e: MouseEvent) => { e.stopPropagation(); + const targetSession = overview.getActiveSession(session); + overview.lastFocusedSession = targetSession; const rawDate = overview.getDateFromMouseEvent(e); - overview.openEditSessionContextMenu(session, e.pageX, e.pageY, rawDate); + overview.openEditSessionContextMenu(targetSession, e.pageX, e.pageY, rawDate); }); } @@ -1557,7 +1581,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte } this.updateSessionsTransforms(); - this.updateSessionVisibility(); + this.updateSessionVisibility(true); } private resolveMilestoneType(m?: Milestone, g?: d3.Selection): string { @@ -1854,6 +1878,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte } private readonly FA_ARROWS_ALT_PATH = + // eslint-disable-next-line max-len "M352.201 425.775l-79.196 79.196c-9.373 9.373-24.568 9.373-33.941 0l-79.196-79.196c-15.119-15.119-4.411-40.971 16.971-40.97h51.162L228 284H127.196v51.162c0 21.382-25.851 32.09-40.971 16.971L7.029 272.937c-9.373-9.373-9.373-24.569 0-33.941L86.225 159.8c15.119-15.119 40.971-4.411 40.971 16.971V228H228V127.196h-51.23c-21.382 0-32.09-25.851-16.971-40.971l79.196-79.196c9.373-9.373 24.568-9.373 33.941 0l79.196 79.196c15.119 15.119 4.411 40.971-16.971 40.971h-51.162V228h100.804v-51.162c0-21.382 25.851-32.09 40.97-16.971l79.196 79.196c9.373 9.373 9.373 24.569 0 33.941L425.773 352.2c-15.119 15.119-40.971 4.411-40.97-16.971V284H284v100.804h51.23c21.382 0 32.09 25.851 16.971 40.971z"; private createMilestoneLongPressBadge(g: d3.Selection, m: Milestone): d3.Selection { @@ -3029,7 +3054,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte }); } - private updateSessionsTransforms() { + public updateSessionsTransforms() { if (!this.session_g) return; const overview = this; @@ -3266,8 +3291,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte } }); } - this.updateMilestoneCutoutMask(); - this.updateSessionVisibility(); + this.updateSessionVisibility(false); } private updateMilestoneTransforms() { @@ -3418,6 +3442,126 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte this.data_g.transition().duration(750).call(this.zoom.transform, transform); } + zoomToSession(session: Session, marginRatio = 0.1) { + if (!session || !this.data_g || !this.zoom || !this.x_scale) return; + this.hovered_commit = undefined; + this.hovered_group_commit = undefined; + this.hovered_g = null; + this.tooltipService.hide(); + this.overlayManagerService.dismissAll(); + + const time_domain = this.x_scale.domain(); + const minDate = time_domain[0].valueOf() as number; + const maxDate = time_domain[1].valueOf() as number; + const dt = maxDate - minDate; + + const startTime = session.startDate instanceof Date ? session.startDate.getTime() : new Date(session.startDate).getTime(); + const endTime = session.endDate instanceof Date ? session.endDate.getTime() : new Date(session.endDate).getTime(); + const sessionDuration = Math.max(1, endTime - startTime); + + if (isNaN(minDate) || isNaN(maxDate) || isNaN(startTime) || isNaN(endTime) || dt <= 0) return; + + const visibleRatio = Math.max(0.1, 1 - 2 * marginRatio); + let target_k = (dt * visibleRatio) / sessionDuration; + target_k = Math.max(1, Math.min(target_k, this.maxZoom)); + + let translate_x = 0; + if (target_k > 1) { + const centerTime = (startTime + endTime) / 2; + translate_x = this.inner_width / 2 - ((centerTime - minDate) / dt) * this.inner_width * target_k; + } + + const transform = d3.zoomIdentity.translate(translate_x, 0).scale(target_k); + + this.data_g.transition().duration(750).call(this.zoom.transform, transform); + } + + getVisibleSessions(): Session[] { + if (!this.dataService || !this.dataService.sessions) return []; + return this.dataService.sessions + .filter((session) => !this.dataService.groupFilter || !session.tpGroup || session.tpGroup === this.dataService.groupFilter) + .slice() + .sort((a, b) => { + const aStart = a.startDate instanceof Date ? a.startDate.getTime() : new Date(a.startDate).getTime(); + const bStart = b.startDate instanceof Date ? b.startDate.getTime() : new Date(b.startDate).getTime(); + const diffStart = aStart - bStart; + if (diffStart !== 0) return diffStart; + const aEnd = a.endDate instanceof Date ? a.endDate.getTime() : new Date(a.endDate).getTime(); + const bEnd = b.endDate instanceof Date ? b.endDate.getTime() : new Date(b.endDate).getTime(); + const diffEnd = aEnd - bEnd; + if (diffEnd !== 0) return diffEnd; + return (a.id || "").localeCompare(b.id || ""); + }); + } + + navigateToNextSession(direction: 1 | -1) { + const sessions = this.getVisibleSessions(); + if (!sessions || sessions.length === 0) return; + + let targetSession: Session | null = null; + let currentIndex = -1; + + if (this.lastFocusedSession) { + currentIndex = sessions.findIndex( + (s) => + this.getSessionKeyNum(s) === this.getSessionKeyNum(this.lastFocusedSession) && + s.tpGroup === this.lastFocusedSession.tpGroup && + (s.id && this.lastFocusedSession.id ? s.id === this.lastFocusedSession.id : true), + ); + } + + if (currentIndex !== -1) { + const nextIndex = currentIndex + direction; + if (nextIndex >= 0 && nextIndex < sessions.length) { + targetSession = sessions[nextIndex]; + } + } else { + const scale = this.x_scale_copy || this.x_scale; + if (scale) { + const viewportCenterTime = scale.invert(this.inner_width / 2).getTime(); + let bestDiff = Infinity; + let bestIndex = 0; + sessions.forEach((s, idx) => { + const sStart = s.startDate instanceof Date ? s.startDate.getTime() : new Date(s.startDate).getTime(); + const sEnd = s.endDate instanceof Date ? s.endDate.getTime() : new Date(s.endDate).getTime(); + const centerTime = (sStart + sEnd) / 2; + const diff = Math.abs(centerTime - viewportCenterTime); + if (diff < bestDiff) { + bestDiff = diff; + bestIndex = idx; + } + }); + targetSession = sessions[bestIndex]; + } else { + targetSession = direction === 1 ? sessions[0] : sessions[sessions.length - 1]; + } + } + + if (targetSession) { + this.lastFocusedSession = targetSession; + + if (this.overlapGroups) { + for (const group of this.overlapGroups) { + const sessionIdx = group.findIndex( + (s) => + this.getSessionKeyNum(s) === this.getSessionKeyNum(targetSession) && + s.tpGroup === targetSession.tpGroup && + (s.id && targetSession.id ? s.id === targetSession.id : true), + ); + if (sessionIdx !== -1) { + const groupId = this.getGroupId(group); + this.activeSessionIndices.set(groupId, sessionIdx); + break; + } + } + } + + this.updateSessionsTransforms(); + this.updateSessionVisibility(true); + this.zoomToSession(targetSession); + } + } + searchSubmit() { this.loadGraphDataAndRefresh(false); } @@ -3563,7 +3707,16 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte return this.overlapGroups.find((g) => g.includes(session)) || null; } - public updateSessionVisibility() { + public getActiveSession(session: Session): Session { + if (!session) return session; + const group = this.getSessionOverlapGroup(session); + if (!group || group.length <= 1) return session; + const groupId = this.getGroupId(group); + const activeIdx = this.activeSessionIndices.get(groupId) ?? 0; + return group[activeIdx] ?? session; + } + + public updateSessionVisibility(shouldRaise = false) { if (!this.overlapGroups || !this.session_g) return; for (const group of this.overlapGroups) { if (group.length <= 1) continue; @@ -3572,21 +3725,32 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte group.forEach((session, idx) => { const key = this.getSessionKeyNum(session); const isActive = idx === activeIdx; - this.session_g.select(`.session-group-${key}`).style("opacity", isActive ? null : "0.25"); + const bodyGroup = this.session_g.select(`.session-group-${key}`); + if (isActive) { + bodyGroup.style("opacity", null).style("pointer-events", "auto"); + if (shouldRaise) { + bodyGroup.raise(); + } + } else { + bodyGroup.style("opacity", "0.25").style("pointer-events", "none"); + } if (!this.session_header_g) return; const hdrGroup = this.session_header_g.select(`.session-hdr-group-${key}`); if (hdrGroup.empty()) return; if (!isActive) { - hdrGroup.style("display", "none").style("visibility", "hidden"); + hdrGroup.style("display", "none").style("visibility", "hidden").style("pointer-events", "none"); } else { + if (shouldRaise) { + hdrGroup.raise(); + } const rawX1 = this.xScaledTimeZoned(session.startDate); const rawX2 = this.xScaledTimeZoned(session.endDate); const isInViewport = !isNaN(rawX1) && !isNaN(rawX2) && rawX2 > 0 && rawX1 < this.inner_width && Math.max(0, rawX2 - Math.max(0, rawX1)) > 0; if (isInViewport) { - hdrGroup.style("display", null).style("visibility", null); + hdrGroup.style("display", null).style("visibility", null).style("pointer-events", "auto"); } else { - hdrGroup.style("display", "none").style("visibility", "hidden"); + hdrGroup.style("display", "none").style("visibility", "hidden").style("pointer-events", "none"); } } }); diff --git a/src/app/components/graphs/commits/session-header-renderer.ts b/src/app/components/graphs/commits/session-header-renderer.ts index 621e55f0..231f9e47 100644 --- a/src/app/components/graphs/commits/session-header-renderer.ts +++ b/src/app/components/graphs/commits/session-header-renderer.ts @@ -155,29 +155,102 @@ export class SessionHeaderRenderer { const getIdx = () => overview.activeSessionIndices.get(groupId) ?? 0; - this.attachTooltip(fo.select(".session-edge-prev"), svc, () => { - const prev = (getIdx() - 1 + len) % len; - return `Séance précédente (${prev + 1}/${len})`; - }); + this.attachTooltip( + fo.select(".session-edge-prev"), + svc, + () => { + const prevIdx = (getIdx() - 1 + len) % len; + const targetSession = overlapGroup[prevIdx]; + const title = `Séance précédente (${prevIdx + 1}/${len})`; + return this.buildSessionTooltipHtml(title, targetSession, overview); + }, + "bottom", + "270px", + ); fo.select(".session-edge-prev").on("click", (e: MouseEvent) => { e.stopPropagation(); svc.hide(); - overview.activeSessionIndices.set(groupId, (getIdx() - 1 + len) % len); + const prevIdx = (getIdx() - 1 + len) % len; + overview.activeSessionIndices.set(groupId, prevIdx); + const targetSession = overlapGroup[prevIdx]; + overview.lastFocusedSession = targetSession; overview.updateSessionsTransforms(); + overview.updateSessionVisibility(true); + overview.zoomToSession(targetSession); }); - this.attachTooltip(fo.select(".session-edge-next"), svc, () => { - const next = (getIdx() + 1) % len; - return `Séance suivante (${next + 1}/${len})`; - }); + this.attachTooltip( + fo.select(".session-edge-next"), + svc, + () => { + const nextIdx = (getIdx() + 1) % len; + const targetSession = overlapGroup[nextIdx]; + const title = `Séance suivante (${nextIdx + 1}/${len})`; + return this.buildSessionTooltipHtml(title, targetSession, overview); + }, + "bottom", + "270px", + ); fo.select(".session-edge-next").on("click", (e: MouseEvent) => { e.stopPropagation(); svc.hide(); - overview.activeSessionIndices.set(groupId, (getIdx() + 1) % len); + const nextIdx = (getIdx() + 1) % len; + overview.activeSessionIndices.set(groupId, nextIdx); + const targetSession = overlapGroup[nextIdx]; + overview.lastFocusedSession = targetSession; overview.updateSessionsTransforms(); + overview.updateSessionVisibility(true); + overview.zoomToSession(targetSession); }); } + /* ------------------------------------------------------------- + * Helper : Construit la carte tooltip riche d'une séance cible + * ------------------------------------------------------------- */ + private static buildSessionTooltipHtml(title: string, session: Session, overview: any): string { + const sName = this.escapeHtml(overview.getSessionDisplayName(session)); + const sGroup = session.tpGroup ? this.escapeHtml(session.tpGroup) : ""; + const timeFormatted = this.escapeHtml(overview.formatSessionTime(session)); + const hasNotes = !!(session.notes && session.notes.trim().length > 0); + const notesEscaped = hasNotes ? this.escapeHtml(session.notes.trim()) : ""; + + return ` +
+
+ ${title} +
+
+ + ${sName} + + ${ + sGroup + ? `${sGroup}` + : "" + } +
+
+ + ${timeFormatted} +
+ ${ + hasNotes + ? `
+

${notesEscaped}

+
` + : "" + } +
+ `; + } + + private static escapeHtml(str: string): string { + if (!str) return ""; + return str.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """).replace(/'/g, "'"); + } + /* ------------------------------------------------------------- * Helper : Attache les events de tooltip sur une sélection D3 HTML. * ------------------------------------------------------------- */ @@ -186,10 +259,11 @@ export class SessionHeaderRenderer { svc: any, getText: () => string, placement: "top" | "bottom" | "left" | "right" = "bottom", + maxWidth?: string | number, ): void { selection .on("mouseenter", function (this: HTMLElement) { - svc.show(getText(), this, placement); + svc.show(getText(), this, placement, undefined, maxWidth); }) .on("mouseleave", () => svc.hide()) .on("mousedown", () => svc.hide()); diff --git a/src/app/components/graphs/questions-completion/questions-completion.component.ts b/src/app/components/graphs/questions-completion/questions-completion.component.ts index 998f0eff..b842a8b1 100644 --- a/src/app/components/graphs/questions-completion/questions-completion.component.ts +++ b/src/app/components/graphs/questions-completion/questions-completion.component.ts @@ -9,6 +9,7 @@ import { TooltipService } from "@services/tooltip.service"; import { ThemeService } from "@services/theme.service"; import { AnonymizationService } from "@services/anonymization.service"; import { Subscription } from "rxjs"; +import { skip } from "rxjs/operators"; import { BaseGraphComponent } from "../base-graph.component"; import { Utils } from "../../../services/utils"; import { OsUtils } from "@utils/os.utils"; @@ -59,7 +60,7 @@ export class QuestionsCompletionComponent extends BaseGraphComponent implements this.translateService.onLangChange.subscribe(() => { this.loadGraphDataAndRefresh(); }); - this.anonymizationService.isAnonymous$.subscribe(() => { + this.anonymizationService.isAnonymous$.pipe(skip(1)).subscribe(() => { this.loadGraphDataAndRefresh(); }); diff --git a/src/app/components/graphs/students/students.component.ts b/src/app/components/graphs/students/students.component.ts index 07be25b4..4301a7e8 100644 --- a/src/app/components/graphs/students/students.component.ts +++ b/src/app/components/graphs/students/students.component.ts @@ -9,6 +9,7 @@ import { TooltipService } from "@services/tooltip.service"; import { ThemeService } from "@services/theme.service"; import { AnonymizationService } from "@services/anonymization.service"; import { Subscription } from "rxjs"; +import { skip } from "rxjs/operators"; import { BaseGraphComponent } from "../base-graph.component"; import { Utils } from "../../../services/utils"; import { OsUtils } from "@utils/os.utils"; @@ -80,7 +81,7 @@ export class StudentsComponent extends BaseGraphComponent implements OnInit, OnD this.translateService.onLangChange.subscribe(() => { this.loadGraphDataAndRefresh(); }); - this.anonymizationService.isAnonymous$.subscribe(() => { + this.anonymizationService.isAnonymous$.pipe(skip(1)).subscribe(() => { this.loadGraphDataAndRefresh(); }); diff --git a/src/app/components/questions-chooser/questions-chooser.component.ts b/src/app/components/questions-chooser/questions-chooser.component.ts index 7a002fdb..7ebbca0e 100644 --- a/src/app/components/questions-chooser/questions-chooser.component.ts +++ b/src/app/components/questions-chooser/questions-chooser.component.ts @@ -379,7 +379,7 @@ export class QuestionsChooserComponent implements OnInit, ControlValueAccessor, dropPosition: "left" | "right" | null = null; trackByFn(index: number, item: any): any { - return item; + return item ? `${item.type}_${item.value}_${index}` : index; } public clearAll() { @@ -473,9 +473,11 @@ export class QuestionsChooserComponent implements OnInit, ControlValueAccessor, } else if (event.key === "ArrowLeft") { this.navigateLeft(); event.preventDefault(); + event.stopPropagation(); } else if (event.key === "ArrowRight") { this.navigateRight(); event.preventDefault(); + event.stopPropagation(); } else if (event.key === "Delete" || event.key === "Backspace") { this.deleteItem(this.selectedPillIndex); this.focusAfterDelete(); @@ -745,6 +747,9 @@ export class QuestionsChooserComponent implements OnInit, ControlValueAccessor, setTimeout(() => { this.focus(); }, 0); + requestAnimationFrame(() => { + this.focus(); + }); } addQuestions(tokens: string[]) { @@ -825,6 +830,7 @@ export class QuestionsChooserComponent implements OnInit, ControlValueAccessor, onBackspace() { if (!this.question && this.items.length > 0) { this.deleteItem(this.items.length - 1); + this.focus(); } } @@ -845,6 +851,7 @@ export class QuestionsChooserComponent implements OnInit, ControlValueAccessor, event.preventDefault(); } else if (this.items.length > 0) { this.deleteItem(this.items.length - 1); + this.focus(); event.preventDefault(); } } else if (event.key === "ArrowLeft" && this.items.length > 0) { @@ -880,6 +887,9 @@ export class QuestionsChooserComponent implements OnInit, ControlValueAccessor, } onCloseClick(index: number, event: MouseEvent) { + event.preventDefault(); + event.stopPropagation(); + // Find the start of the merged group let start = index; while (start > 0 && this.items[start - 1].operatorAfter === "AND") { @@ -893,8 +903,9 @@ export class QuestionsChooserComponent implements OnInit, ControlValueAccessor, if (this.selectedPillIndex !== null) { this.focusAfterDelete(); + } else { + this.focus(); } - event.stopPropagation(); } @ViewChildren("editInputs") editInputs: QueryList; @@ -1471,6 +1482,10 @@ export class QuestionsChooserComponent implements OnInit, ControlValueAccessor, writeValue(obj: any): void { if (obj) { + const areEqual = Array.isArray(obj) && obj.length === this.questions.length && obj.every((q, idx) => q === this.questions[idx]); + if (areEqual && this.items.length > 0) { + return; + } this.questions = [...obj]; // Re-sync items since questions changed externally this.syncItemsFromInputs(); diff --git a/src/app/services/loader.service.ts b/src/app/services/loader.service.ts index 9da30235..2d589ae2 100644 --- a/src/app/services/loader.service.ts +++ b/src/app/services/loader.service.ts @@ -4,7 +4,7 @@ import { QuestionClosingMode } from "@models/Metadata.model"; import { Repository } from "@models/Repository.model"; import { TranslateService } from "@ngx-translate/core"; import { Observable, of } from "rxjs"; -import { map, switchMap } from "rxjs/operators"; +import { map } from "rxjs/operators"; import { AccountsService } from "./accounts.service"; import { CommitsService } from "./commits.service"; import { DataService } from "./data.service"; @@ -88,15 +88,7 @@ export class LoaderService { } if (tokenStatus === "unknown") { - return this.accountsService.checkTokenValidity(provider, instanceHost).pipe( - switchMap((isValid) => { - if (!isValid) { - this.showInvalidTokenToast(provider); - return of(undefined); - } - return this.executeLoadRepositories(startDate, endDate); - }), - ); + this.accountsService.checkTokenValidity(provider, instanceHost).subscribe(); } return this.executeLoadRepositories(startDate, endDate); diff --git a/src/app/utils/os.utils.ts b/src/app/utils/os.utils.ts index c6fcf051..f6fe4b85 100644 --- a/src/app/utils/os.utils.ts +++ b/src/app/utils/os.utils.ts @@ -14,20 +14,35 @@ export class OsUtils { } static isTypingInInput(event: Event | KeyboardEvent): boolean { + const selector = "input, textarea, select, [contenteditable='true'], questions-chooser, ngb-typeahead-window, .typeahead-dropdown"; const target = event.target as HTMLElement; - return ( - !!target && + if ( + target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || - target.isContentEditable) - ); + target.tagName === "SELECT" || + target.isContentEditable || + Boolean(target.closest(selector))) + ) { + return true; + } + + const active = document.activeElement as HTMLElement; + if ( + active && + (active.tagName === "INPUT" || + active.tagName === "TEXTAREA" || + active.tagName === "SELECT" || + active.isContentEditable || + Boolean(active.closest(selector))) + ) { + return true; + } + + return false; } - private static resolveKeyTranslation( - key: string, - fallback: string, - translateService?: TranslateService - ): string { + private static resolveKeyTranslation(key: string, fallback: string, translateService?: TranslateService): string { if (translateService) { const trans = translateService.instant(key); if (trans && trans !== key) return trans; From 80dba4a154cde3f4ba7dbdec1b4e648677768d50 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Wed, 23 Sep 2026 13:01:13 +0200 Subject: [PATCH 12/23] =?UTF-8?q?=F0=9F=90=9B=20Fix=20zoom=20bounce=20on?= =?UTF-8?q?=20session=20focus?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../graphs/commits/commits.component.ts | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/app/components/graphs/commits/commits.component.ts b/src/app/components/graphs/commits/commits.component.ts index 9a38d561..61f3548b 100644 --- a/src/app/components/graphs/commits/commits.component.ts +++ b/src/app/components/graphs/commits/commits.component.ts @@ -679,6 +679,20 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte d3.select(document.body).on("wheel.body", (e) => {}); this.zoom = d3 .zoom() + .interpolate((p0: [number, number, number], p1: [number, number, number]) => { + const x0 = p0[0], + y0 = p0[1], + w0 = Math.max(1e-6, p0[2]); + const x1 = p1[0], + y1 = p1[1], + w1 = Math.max(1e-6, p1[2]); + const dx = x1 - x0, + dy = y1 - y0; + return (t: number) => { + const wt = w0 === w1 ? w0 : w0 * Math.pow(w1 / w0, t); + return [x0 + t * dx, y0 + t * dy, wt]; + }; + }) .on("start", (event) => { overview.hovered_commit = undefined; overview.hovered_group_commit = undefined; @@ -3490,7 +3504,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte const bEnd = b.endDate instanceof Date ? b.endDate.getTime() : new Date(b.endDate).getTime(); const diffEnd = aEnd - bEnd; if (diffEnd !== 0) return diffEnd; - return (a.id || "").localeCompare(b.id || ""); + return (a.label || "").localeCompare(b.label || ""); }); } @@ -3506,7 +3520,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte (s) => this.getSessionKeyNum(s) === this.getSessionKeyNum(this.lastFocusedSession) && s.tpGroup === this.lastFocusedSession.tpGroup && - (s.id && this.lastFocusedSession.id ? s.id === this.lastFocusedSession.id : true), + (s.label && this.lastFocusedSession.label ? s.label === this.lastFocusedSession.label : true), ); } @@ -3546,7 +3560,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte (s) => this.getSessionKeyNum(s) === this.getSessionKeyNum(targetSession) && s.tpGroup === targetSession.tpGroup && - (s.id && targetSession.id ? s.id === targetSession.id : true), + (s.label && targetSession.label ? s.label === targetSession.label : true), ); if (sessionIdx !== -1) { const groupId = this.getGroupId(group); From adc33fcbdfa69767f5353c7695f86b86c6be1f31 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Wed, 23 Sep 2026 15:03:55 +0200 Subject: [PATCH 13/23] =?UTF-8?q?=E2=9C=A8=20Improve=20overlapping=20sessi?= =?UTF-8?q?on=20selection,=20hit-testing=20and=20priority=20management?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../graphs/commits/commits.component.ts | 158 ++++++++++++++---- 1 file changed, 121 insertions(+), 37 deletions(-) diff --git a/src/app/components/graphs/commits/commits.component.ts b/src/app/components/graphs/commits/commits.component.ts index 61f3548b..d0aed9f5 100644 --- a/src/app/components/graphs/commits/commits.component.ts +++ b/src/app/components/graphs/commits/commits.component.ts @@ -889,11 +889,21 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte event.preventDefault(); event.stopPropagation(); const rawDate = overview.getDateFromMouseEvent(event); - overview.openContextMenu(event.pageX, event.pageY, rawDate); + const session = overview.resolveSessionAtDate(rawDate); + if (session) { + overview.selectAndActivateSession(session, event.pageX, event.pageY, rawDate); + } else { + overview.openContextMenu(event.pageX, event.pageY, rawDate); + } }) .on("click", (event: MouseEvent) => { const rawDate = overview.getDateFromMouseEvent(event); - overview.openContextMenu(event.pageX, event.pageY, rawDate); + const session = overview.resolveSessionAtDate(rawDate); + if (session) { + overview.selectAndActivateSession(session, event.pageX, event.pageY, rawDate); + } else { + overview.openContextMenu(event.pageX, event.pageY, rawDate); + } }) .on("wheel", (event: WheelEvent) => { if (event.shiftKey) return; @@ -924,11 +934,21 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte event.preventDefault(); event.stopPropagation(); const rawDate = this.getDateFromMouseEvent(event); - this.openContextMenu(event.pageX, event.pageY, rawDate); + const session = this.resolveSessionAtDate(rawDate); + if (session) { + this.selectAndActivateSession(session, event.pageX, event.pageY, rawDate); + } else { + this.openContextMenu(event.pageX, event.pageY, rawDate); + } }) .on("click", (event: MouseEvent) => { const rawDate = this.getDateFromMouseEvent(event); - this.openContextMenu(event.pageX, event.pageY, rawDate); + const session = this.resolveSessionAtDate(rawDate); + if (session) { + this.selectAndActivateSession(session, event.pageX, event.pageY, rawDate); + } else { + this.openContextMenu(event.pageX, event.pageY, rawDate); + } }); d3.select(".chart-container") @@ -1280,28 +1300,24 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .on("contextmenu", (e) => { e.preventDefault(); e.stopPropagation(); - const targetSession = overview.getActiveSession(session); - overview.lastFocusedSession = targetSession; const rawDate = overview.getDateFromMouseEvent(e); - overview.openEditSessionContextMenu(targetSession, e.pageX, e.pageY, rawDate); + const targetSession = overview.resolveSessionAtDate(rawDate, session) || session; + overview.selectAndActivateSession(targetSession, e.pageX, e.pageY, rawDate); }) .on("click", (e) => { - const targetSession = overview.getActiveSession(session); - overview.lastFocusedSession = targetSession; const rawDate = overview.getDateFromMouseEvent(e); - overview.openEditSessionContextMenu(targetSession, e.pageX, e.pageY, rawDate); + const targetSession = overview.resolveSessionAtDate(rawDate, session) || session; + overview.selectAndActivateSession(targetSession, e.pageX, e.pageY, rawDate); }) .on("mouseenter", () => { - const targetSession = overview.getActiveSession(session); - const activeKey = overview.getSessionKeyNum(targetSession); - d3.selectAll(`.session-bg-${activeKey}`).style("fill-opacity", "0.14"); - d3.selectAll(`.session-edge-${activeKey}`).style("stroke-opacity", "0.55"); + const key = overview.getSessionKeyNum(session); + d3.selectAll(`.session-bg-${key}`).style("fill-opacity", "0.14"); + d3.selectAll(`.session-edge-${key}`).style("stroke-opacity", "0.55"); }) .on("mouseleave", () => { - const targetSession = overview.getActiveSession(session); - const activeKey = overview.getSessionKeyNum(targetSession); - d3.selectAll(`.session-bg-${activeKey}`).style("fill-opacity", null); - d3.selectAll(`.session-edge-${activeKey}`).style("stroke-opacity", null); + const key = overview.getSessionKeyNum(session); + d3.selectAll(`.session-bg-${key}`).style("fill-opacity", null); + d3.selectAll(`.session-edge-${key}`).style("stroke-opacity", null); }); const rawX1 = this.xScaledTimeZoned(session.startDate); @@ -1352,28 +1368,24 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .on("contextmenu", (e) => { e.preventDefault(); e.stopPropagation(); - const targetSession = overview.getActiveSession(session); - overview.lastFocusedSession = targetSession; const rawDate = overview.getDateFromMouseEvent(e); - overview.openEditSessionContextMenu(targetSession, e.pageX, e.pageY, rawDate); + const targetSession = overview.resolveSessionAtDate(rawDate, session) || session; + overview.selectAndActivateSession(targetSession, e.pageX, e.pageY, rawDate); }) .on("click", (e) => { - const targetSession = overview.getActiveSession(session); - overview.lastFocusedSession = targetSession; const rawDate = overview.getDateFromMouseEvent(e); - overview.openEditSessionContextMenu(targetSession, e.pageX, e.pageY, rawDate); + const targetSession = overview.resolveSessionAtDate(rawDate, session) || session; + overview.selectAndActivateSession(targetSession, e.pageX, e.pageY, rawDate); }) .on("mouseenter", () => { - const targetSession = overview.getActiveSession(session); - const activeKey = overview.getSessionKeyNum(targetSession); - d3.selectAll(`.session-bg-${activeKey}`).style("fill-opacity", "0.14"); - d3.selectAll(`.session-edge-${activeKey}`).style("stroke-opacity", "0.55"); + const key = overview.getSessionKeyNum(session); + d3.selectAll(`.session-bg-${key}`).style("fill-opacity", "0.14"); + d3.selectAll(`.session-edge-${key}`).style("stroke-opacity", "0.55"); }) .on("mouseleave", () => { - const targetSession = overview.getActiveSession(session); - const activeKey = overview.getSessionKeyNum(targetSession); - d3.selectAll(`.session-bg-${activeKey}`).style("fill-opacity", null); - d3.selectAll(`.session-edge-${activeKey}`).style("stroke-opacity", null); + const key = overview.getSessionKeyNum(session); + d3.selectAll(`.session-bg-${key}`).style("fill-opacity", null); + d3.selectAll(`.session-edge-${key}`).style("stroke-opacity", null); }); const rawX1 = this.xScaledTimeZoned(session.startDate); @@ -1498,9 +1510,8 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .on("click", (e: MouseEvent) => { e.stopPropagation(); const targetSession = overview.getActiveSession(session); - overview.lastFocusedSession = targetSession; const rawDate = overview.getDateFromMouseEvent(e); - overview.openEditSessionContextMenu(targetSession, e.pageX, e.pageY, rawDate); + overview.selectAndActivateSession(targetSession, e.pageX, e.pageY, rawDate); }); } @@ -1533,9 +1544,8 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .on("click", (e: MouseEvent) => { e.stopPropagation(); const targetSession = overview.getActiveSession(session); - overview.lastFocusedSession = targetSession; const rawDate = overview.getDateFromMouseEvent(e); - overview.openEditSessionContextMenu(targetSession, e.pageX, e.pageY, rawDate); + overview.selectAndActivateSession(targetSession, e.pageX, e.pageY, rawDate); }); } @@ -3730,6 +3740,80 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte return group[activeIdx] ?? session; } + public sessionCoversTime(session: Session, time: number): boolean { + if (!session || !session.startDate || !session.endDate) return false; + const start = session.startDate instanceof Date ? session.startDate.getTime() : new Date(session.startDate).getTime(); + const end = session.endDate instanceof Date ? session.endDate.getTime() : new Date(session.endDate).getTime(); + return time >= Math.min(start, end) && time <= Math.max(start, end); + } + + public resolveSessionAtDate(rawDate: Date, preferredSession?: Session): Session | null { + if (!rawDate || isNaN(rawDate.getTime())) return preferredSession || null; + const time = rawDate.getTime(); + + // 1. If preferredSession is provided: + if (preferredSession) { + const activeSession = this.getActiveSession(preferredSession); + if (activeSession && activeSession !== preferredSession && this.sessionCoversTime(activeSession, time)) { + return activeSession; + } + if (this.sessionCoversTime(preferredSession, time)) { + return preferredSession; + } + const group = this.getSessionOverlapGroup(preferredSession); + if (group) { + const covering = group.find((s) => this.sessionCoversTime(s, time)); + if (covering) return covering; + } + } + + // 2. No preferredSession or preferredSession does not cover time: + const visibleSessions = (this.dataService.sessions || []).filter( + (s) => !this.dataService.groupFilter || !s.tpGroup || s.tpGroup === this.dataService.groupFilter, + ); + const candidates = visibleSessions.filter((s) => this.sessionCoversTime(s, time)); + if (candidates.length === 0) return null; + if (candidates.length === 1) return candidates[0]; + + // If multiple candidates overlap at this time, prioritize currently active session + for (const cand of candidates) { + const active = this.getActiveSession(cand); + if (active === cand) { + return cand; + } + } + + if (this.lastFocusedSession && candidates.includes(this.lastFocusedSession)) { + return this.lastFocusedSession; + } + + return candidates[0]; + } + + public selectAndActivateSession(session: Session, x: number, y: number, date: Date) { + if (!session) return; + const group = this.getSessionOverlapGroup(session); + if (group && group.length > 1) { + const idx = group.findIndex( + (s) => + this.getSessionKeyNum(s) === this.getSessionKeyNum(session) && + s.tpGroup === session.tpGroup && + (s.label && session.label ? s.label === session.label : true), + ); + if (idx !== -1) { + const groupId = this.getGroupId(group); + const currentIdx = this.activeSessionIndices.get(groupId); + if (currentIdx !== idx) { + this.activeSessionIndices.set(groupId, idx); + this.updateSessionsTransforms(); + this.updateSessionVisibility(true); + } + } + } + this.lastFocusedSession = session; + this.openEditSessionContextMenu(session, x, y, date); + } + public updateSessionVisibility(shouldRaise = false) { if (!this.overlapGroups || !this.session_g) return; for (const group of this.overlapGroups) { @@ -3746,7 +3830,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte bodyGroup.raise(); } } else { - bodyGroup.style("opacity", "0.25").style("pointer-events", "none"); + bodyGroup.style("opacity", "0.25").style("pointer-events", "auto"); } if (!this.session_header_g) return; const hdrGroup = this.session_header_g.select(`.session-hdr-group-${key}`); From 04620df5018b34b4aa7374907649816f9fbac3f0 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Fri, 25 Sep 2026 09:43:09 +0200 Subject: [PATCH 14/23] =?UTF-8?q?=F0=9F=9A=A7=20specific=20areas=20for=20s?= =?UTF-8?q?essions=20infos=20and=20milestone=20names=20to=20avoid=20overla?= =?UTF-8?q?pping?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/graphs/commits/chart.scss | 12 +- .../graphs/commits/commits.component.html | 2 + .../graphs/commits/commits.component.ts | 139 ++++++++++------ .../graphs/commits/session-header-renderer.ts | 157 ++++++++++-------- src/assets/i18n/en.json | 1 + src/assets/i18n/fr.json | 1 + src/assets/i18n/ru.json | 1 + 7 files changed, 182 insertions(+), 131 deletions(-) diff --git a/src/app/components/graphs/commits/chart.scss b/src/app/components/graphs/commits/chart.scss index 6537c78f..7a7ce1ef 100644 --- a/src/app/components/graphs/commits/chart.scss +++ b/src/app/components/graphs/commits/chart.scss @@ -144,13 +144,12 @@ body.dark-theme .commit { .session-header-fo { pointer-events: auto; - overflow: hidden; + overflow: visible; cursor: default; - mask: url(#milestone-badges-cutout-mask); - -webkit-mask: url(#milestone-badges-cutout-mask); } .session-pill { + box-sizing: border-box; cursor: default; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); min-width: 0; @@ -403,6 +402,7 @@ body.dark-theme .commit { * Ghost par défaut, reveal au hover, feedback physique au clic. * Padding étendu pour une zone de clic confortable sans encombrer. */ .session-edge-arrow { + box-sizing: border-box; background: transparent; border: 1px solid transparent; border-radius: 6px; @@ -411,8 +411,8 @@ body.dark-theme .commit { display: flex; align-items: center; justify-content: center; - /* Larger padding = larger hit area, CSS clip-path keeps visual size small */ - padding: 4px 6px; + height: 18px; + padding: 2px 4px; flex-shrink: 0; will-change: transform; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform 120ms ease-out; @@ -431,4 +431,4 @@ body.dark-theme .commit { &:active { transform: scale(0.88); } -} \ No newline at end of file +} diff --git a/src/app/components/graphs/commits/commits.component.html b/src/app/components/graphs/commits/commits.component.html index 2f49d2a2..c4da423a 100644 --- a/src/app/components/graphs/commits/commits.component.html +++ b/src/app/components/graphs/commits/commits.component.html @@ -497,3 +497,5 @@
{{ "OVERVIEW-GRA (saveSession)="onSaveSession($event)" > + + diff --git a/src/app/components/graphs/commits/commits.component.ts b/src/app/components/graphs/commits/commits.component.ts index d0aed9f5..90496ab7 100644 --- a/src/app/components/graphs/commits/commits.component.ts +++ b/src/app/components/graphs/commits/commits.component.ts @@ -37,6 +37,7 @@ import { Repository } from "../../../models/Repository.model"; import { Utils } from "@services/utils"; import { FilterGroup } from "@components/questions-chooser/questions-chooser.component"; import { SessionHeaderRenderer } from "./session-header-renderer"; +import { ActivatedRoute } from "@angular/router"; @Component({ selector: "commits", @@ -211,11 +212,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte onMarkerChange(marker: string) { this.markerHoverState[marker].wasClicked = true; - const chartDiv = document.getElementById("chart"); - const currentlyHasNoMilestonesClass = chartDiv?.classList.contains("no-milestones") ?? false; - const willHaveNoStrip = this.loading || !this.hasTopStrip(); + const currentInnerTop = this.inner_margin?.top ?? 0; + const nextStripHeight = this.loading ? 0 : this.getTopStripHeight(); - if (currentlyHasNoMilestonesClass !== willHaveNoStrip) { + if (currentInnerTop !== nextStripHeight) { this.loadGraphDataAndRefresh(true); } else { if (marker === "sessions") { @@ -465,11 +465,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte if (label === "OTHER") this.showOthers = !this.showOthers; this.saveMarkerPreferences(); - const chartDiv = document.getElementById("chart"); - const currentlyHasNoMilestonesClass = chartDiv?.classList.contains("no-milestones") ?? false; - const willHaveNoStrip = this.loading || !this.hasTopStrip(); + const currentInnerTop = this.inner_margin?.top ?? 0; + const nextStripHeight = this.loading ? 0 : this.getTopStripHeight(); - if (currentlyHasNoMilestonesClass !== willHaveNoStrip) { + if (currentInnerTop !== nextStripHeight) { this.loadGraphDataAndRefresh(true); } else { if (label === "SESSION") { @@ -522,19 +521,32 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte return !!this.dataService.sessions?.some(session_filter); } + getTopStripHeight(): number { + const hasMilestones = this.hasDisplayedMilestones(); + const hasSessions = this.hasDisplayedSessions(); + if (hasMilestones && hasSessions) { + return 48; + } else if (hasMilestones || hasSessions) { + return 24; + } + return 0; + } + hasTopStrip(): boolean { - return this.hasDisplayedMilestones() || this.hasDisplayedSessions(); + return this.getTopStripHeight() > 0; } updateVariableFromCss(): void { let chart_div = document.getElementById("chart"); if (!chart_div) return; - const noTopStrip = this.loading || !this.hasTopStrip(); - if (noTopStrip) { + const stripHeight = this.loading ? 0 : this.getTopStripHeight(); + if (stripHeight === 0) { chart_div.classList.add("no-milestones"); + chart_div.style.setProperty("--top-inner", "0px"); } else { chart_div.classList.remove("no-milestones"); + chart_div.style.setProperty("--top-inner", `${stripHeight}px`); } var style = getComputedStyle(chart_div); @@ -1103,6 +1115,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte }); this.updateMilestoneCutoutMask(); + if (this.session_header_g) { + this.session_header_g.raise(); + } } isContextualMenuShown() { @@ -1158,9 +1173,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte this.hovered_milestone = undefined; this.tooltipService.hide(); } - const hadStripBefore = this.hasTopStrip(); + const stripHeightBefore = this.getTopStripHeight(); this.saveMilestone(result.oldMilestone, result.newMilestone); - this.updateAfterMilestoneChange(hadStripBefore); + this.updateAfterMilestoneChange(stripHeightBefore); let translations = this.translateService.instant(["SUCCESS", "MILESTONE-SAVED", "MILESTONE-DELETED"]); this.toastService.success( @@ -1188,9 +1203,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte this.hovered_session = undefined; this.tooltipService.hide(); } - const hadStripBefore = this.hasTopStrip(); + const stripHeightBefore = this.getTopStripHeight(); this.saveSession(result.oldSession, result.newSession); - this.updateAfterSessionChange(hadStripBefore); + this.updateAfterSessionChange(stripHeightBefore); let translations = this.translateService.instant(["SUCCESS", "SESSION-SAVED", "SESSION-DELETED"]); this.toastService.success( @@ -1218,9 +1233,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte this.hovered_session = undefined; this.tooltipService.hide(); } - const hadStripBefore = this.hasTopStrip(); + const stripHeightBefore = this.getTopStripHeight(); this.deleteSession(session); - this.updateAfterSessionChange(hadStripBefore); + this.updateAfterSessionChange(stripHeightBefore); let translations = this.translateService.instant(["SUCCESS", "SESSION-DELETED"]); this.toastService.success(translations["SUCCESS"], translations["SESSION-DELETED"]); @@ -1236,9 +1251,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte this.hovered_milestone = undefined; this.tooltipService.hide(); } - const hadStripBefore = this.hasTopStrip(); + const stripHeightBefore = this.getTopStripHeight(); this.deleteMilestone(milestone); - this.updateAfterMilestoneChange(hadStripBefore); + this.updateAfterMilestoneChange(stripHeightBefore); let translations = this.translateService.instant(["SUCCESS", "MILESTONE-DELETED"]); this.toastService.success(translations["SUCCESS"], translations["MILESTONE-DELETED"]); @@ -1411,12 +1426,15 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte const noteSvg = ''; // 1. Continuous header background filling top strip behind pills + const bgY = 0; + const bgH = this.inner_margin.top; + group .append("rect") .attr("class", `session-header-bg session-bg-${sessionKey}`) .attr("x", visX1) - .attr("y", 0) - .attr("height", this.inner_margin.top) + .attr("y", bgY) + .attr("height", bgH) .attr("width", visWidth) .style("pointer-events", "auto"); @@ -1445,24 +1463,25 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .append("rect") .attr("class", `session-header-top-bar session-bar-${sessionKey}`) .attr("x", visX1) - .attr("y", 0) - .attr("height", 3) + .attr("y", bgY) + .attr("height", 2.5) .attr("width", visWidth) - .attr("rx", 1.5) - .attr("ry", 1.5); + .attr("rx", 1.25) + .attr("ry", 1.25); // 5. Sticky foreignObject for pills const foX = visX1; const foWidth = Math.max(0, visX2 - foX); + const foY = 3; + const foH = 22; const fo = group .append("foreignObject") .attr("class", "session-header-fo") .attr("x", foX) - .attr("y", 3) + .attr("y", foY) .attr("width", foWidth) - .attr("height", 23) - .attr("mask", "url(#milestone-badges-cutout-mask)") + .attr("height", foH) .style("visibility", foWidth < 28 ? "hidden" : "visible") .style("pointer-events", "auto") .style("overflow", "hidden"); @@ -1606,6 +1625,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte this.updateSessionsTransforms(); this.updateSessionVisibility(true); + if (this.session_header_g) { + this.session_header_g.raise(); + } } private resolveMilestoneType(m?: Milestone, g?: d3.Selection): string { @@ -1625,13 +1647,19 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte m.type = this.resolveMilestoneType(m, g); } + const milestoneType = this.resolveMilestoneType(m, g); + const milestoneColor = this.getMilestoneColor(milestoneType); + // 1. Line + const lineY = 0; + const lineH = this.inner_height; + g.append("rect") .attr("class", "milestone-vertical-line") .attr("x", 0) - .attr("y", 0) + .attr("y", lineY) .attr("width", 1) - .attr("height", this.inner_height) + .attr("height", lineH) .attr("transform", "translate(" + [-0.5, 0] + ")"); // 2. Label group (anchored, masked when overlapping newer milestones) @@ -1640,7 +1668,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte // Text const labelText = m.label || (m.type.endsWith("s") ? m.type.slice(0, -1) : m.type) + " " + index; - let text = labelGroup.append("text").attr("class", "milestone-text").attr("y", -7).text(labelText).attr("text-anchor", "middle"); + let text = labelGroup.append("text").attr("class", "milestone-text").text(labelText).attr("text-anchor", "middle"); let textWidth = 40; try { @@ -1655,10 +1683,11 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte textWidth = labelText.length * 7.5; } - const paddingX = 2; - const barWidth = Math.max(16, textWidth + paddingX * 2); + const paddingX = 4; + const barWidth = Math.max(20, textWidth + paddingX * 2); + + text.attr("y", -10); - // Horizontal bottom accent bar (same 2px visual thickness as vertical line, rounded ends like session bar) labelGroup .append("rect") .attr("class", "milestone-bottom-bar") @@ -1670,17 +1699,17 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .attr("ry", 1.5); const badgeX = barWidth / 2 - 2; - const badgeY = -5; - g.attr("data-badge-x", badgeX).attr("data-badge-y", badgeY); + const badgeY = -10; - // Hitbox (transparent, covering the label and top of line) g.append("rect") .attr("class", "hitbox") .attr("width", barWidth + 30) - .attr("height", 32) + .attr("height", 24) .attr("x", -(barWidth + 30) / 2) .attr("y", -24) .attr("style", "cursor: pointer; pointer-events: all;"); + + g.attr("data-badge-x", badgeX).attr("data-badge-y", badgeY); } updateMilestoneCutoutMask() { @@ -1767,10 +1796,8 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte const sessionMaskCutoutsGroup = sessionMask.select("#milestone-mask-cutouts"); if (!sessionMaskCutoutsGroup.empty()) { - const sessionCutouts = visibleItems.map((item) => ({ - x: item.x - item.width / 2, - width: item.width, - })); + // With double-rail layout, session headers and milestone labels do not overlap + const sessionCutouts: { x: number; width: number }[] = []; const sRects = sessionMaskCutoutsGroup.selectAll("rect").data(sessionCutouts); sRects.exit().remove(); @@ -3138,10 +3165,13 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte g.style("display", null).style("visibility", "visible"); // 1. Continuous header background (clamped to 0..inner_width) - g.select(".session-header-bg").attr("x", visX1).attr("y", 0).attr("height", overview.inner_margin.top).attr("width", visWidth); + const headerY = 0; + const headerH = overview.inner_margin.top; + + g.select(".session-header-bg").attr("x", visX1).attr("y", headerY).attr("height", headerH).attr("width", visWidth); // 2. Top blue accent bar (above milestone labels) - g.select(".session-header-top-bar").attr("x", visX1).attr("y", 0).attr("height", 3).attr("width", visWidth); + g.select(".session-header-top-bar").attr("x", visX1).attr("y", headerY).attr("height", 2.5).attr("width", visWidth); // 3. Dashed vertical lines going all the way to y = 0 const showLeft = rawX1 >= 0 && rawX1 <= overview.inner_width; @@ -3159,8 +3189,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte // 4. Sticky badges: stick to x = 0 if rawX1 < 0, otherwise sit at rawX1 const foX = visX1; const foWidth = Math.max(0, visX2 - foX); + const foY = 3; + const foH = 22; - fo.attr("x", foX).attr("width", foWidth); + fo.attr("x", foX).attr("y", foY).attr("width", foWidth).attr("height", foH); const displayName = overview.getSessionDisplayName(s); const groupName = s.tpGroup || ""; @@ -3322,6 +3354,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte this.chart_abs_g .selectAll(".milestone") .attr("transform", (m: Milestone) => `translate(${this.xScaledTimeZoned(m.date)}, ${this.inner_margin.top})`); + this.updateMilestoneCutoutMask(); } @@ -3638,12 +3671,12 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte }); } - updateAfterMilestoneChange(hadStripBefore?: boolean) { + updateAfterMilestoneChange(stripHeightBefore?: number) { this.dataService.saveData(); - const hasStripAfter = this.hasTopStrip(); - if (hadStripBefore !== undefined && hadStripBefore !== hasStripAfter) { - // The top strip appeared or disappeared, requiring layout recalculation + const stripHeightAfter = this.getTopStripHeight(); + if (stripHeightBefore !== undefined && stripHeightBefore !== stripHeightAfter) { + // The top strip height changed (0 <-> 24 <-> 48), requiring layout recalculation this.loadGraphMetadata( this.dataService.repositories, this.dataService.reviews, @@ -3665,11 +3698,11 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte this.updateCommitColors(); } - updateAfterSessionChange(hadStripBefore?: boolean) { + updateAfterSessionChange(stripHeightBefore?: number) { this.dataService.saveData(); - const hasStripAfter = this.hasTopStrip(); - if (hadStripBefore !== undefined && hadStripBefore !== hasStripAfter) { - // The top strip appeared or disappeared, requiring layout recalculation + const stripHeightAfter = this.getTopStripHeight(); + if (stripHeightBefore !== undefined && stripHeightBefore !== stripHeightAfter) { + // The top strip height changed (0 <-> 24 <-> 48), requiring layout recalculation this.loadGraphMetadata( this.dataService.repositories, this.dataService.reviews, diff --git a/src/app/components/graphs/commits/session-header-renderer.ts b/src/app/components/graphs/commits/session-header-renderer.ts index 231f9e47..76a34243 100644 --- a/src/app/components/graphs/commits/session-header-renderer.ts +++ b/src/app/components/graphs/commits/session-header-renderer.ts @@ -32,39 +32,47 @@ export class SessionHeaderRenderer { const { displayName, groupName, hasNotes, fo, calendarSvg, usersSvg, noteSvg } = ctx; fo.html(` -
- - - ${calendarSvg} - ${displayName} - - - ${ - groupName - ? ` - - ${usersSvg} - ${groupName} - ` - : "" - } - - ${ - hasNotes - ? ` - - ${noteSvg} - ` - : "" - } - - +
+
+ +
+ + ${calendarSvg} + ${displayName} + +
+ + +
+ + ${ + groupName + ? ` + + ${usersSvg} + ${groupName} + ` + : "" + } + + ${ + hasNotes + ? ` + + ${noteSvg} + ` + : "" + } + + +
+
`); } @@ -92,54 +100,59 @@ export class SessionHeaderRenderer { const chevronRight = ''; fo.html(` -
+
- -
- - - ${calendarSvg} - ${displayName} - + +
+ +
+ + ${calendarSvg} + ${displayName} + +
- - ${ - groupName - ? ` - - ${usersSvg} - ${groupName} - ` - : "" - } + +
+ + ${ + groupName + ? ` + + ${usersSvg} + ${groupName} + ` + : "" + } - - ${ - hasNotes - ? ` - - ${noteSvg} - ` - : "" - } + + ${ + hasNotes + ? ` + + ${noteSvg} + ` + : "" + } - - + + - - ${ - sessionIdxInGroup + 1 - }/${groupSize} + + ${ + sessionIdxInGroup + 1 + }/${groupSize} +
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 32c49fc9..200d22cd 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -681,3 +681,4 @@ "ERROR_MSG_GITLAB": "Your GitLab token is invalid or has expired. Please reconnect in the Accounts section." } } + diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index 61e83024..8ae2e645 100644 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -681,3 +681,4 @@ "ERROR_MSG_GITLAB": "Votre token GitLab est invalide ou a expiré. Reconnectez-vous depuis la section Comptes." } } + diff --git a/src/assets/i18n/ru.json b/src/assets/i18n/ru.json index 9c02ff07..c5744caf 100644 --- a/src/assets/i18n/ru.json +++ b/src/assets/i18n/ru.json @@ -678,3 +678,4 @@ "ERROR_MSG_GITLAB": "Ваш токен GitLab недействителен или истек. Выполните повторный вход в разделе «Учетные записи»." } } + From 144f16453d5d251e226a1136e4a77c56e8d94431 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Fri, 25 Sep 2026 14:34:20 +0200 Subject: [PATCH 15/23] =?UTF-8?q?=F0=9F=90=9B=20Fix=20commit=20grouping=20?= =?UTF-8?q?on=20strip=20toggle=20and=20center=20session=20counter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/graphs/commits/chart.scss | 20 ++- .../graphs/commits/commits.component.ts | 24 ++- .../graphs/commits/session-header-renderer.ts | 162 +++++++++--------- 3 files changed, 115 insertions(+), 91 deletions(-) diff --git a/src/app/components/graphs/commits/chart.scss b/src/app/components/graphs/commits/chart.scss index 7a7ce1ef..5190f535 100644 --- a/src/app/components/graphs/commits/chart.scss +++ b/src/app/components/graphs/commits/chart.scss @@ -192,6 +192,24 @@ body.dark-theme .commit { } } + .session-counter { + box-sizing: border-box; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: 600; + color: var(--color-text-secondary); + white-space: nowrap; + height: 18px; + line-height: 18px; + padding: 0 2px; + margin: 0; + vertical-align: middle; + align-self: center; + user-select: none; + } + &:hover { .session-header-top-bar { opacity: 1; @@ -208,7 +226,7 @@ body.dark-theme .commit { } } -// Fallback legacy .session class +/* Fallback legacy .session class */ .session { stroke-width: 1px; stroke: var(--color-info); diff --git a/src/app/components/graphs/commits/commits.component.ts b/src/app/components/graphs/commits/commits.component.ts index 90496ab7..0fab1932 100644 --- a/src/app/components/graphs/commits/commits.component.ts +++ b/src/app/components/graphs/commits/commits.component.ts @@ -1472,8 +1472,8 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte // 5. Sticky foreignObject for pills const foX = visX1; const foWidth = Math.max(0, visX2 - foX); - const foY = 3; - const foH = 22; + const foY = 0; + const foH = 24; const fo = group .append("foreignObject") @@ -2422,7 +2422,12 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte this.x_scale = d3.scaleTime().domain([minDate, maxDate]).range([0, this.inner_width]); - this.x_scale_copy = this.x_scale.copy(); + if (this.current_zoom) { + this.x_scale_copy = this.current_zoom.rescaleX(this.x_scale); + } else { + this.x_scale_copy = this.x_scale.copy(); + } + this.last_zoom_k = this.current_zoom ? this.current_zoom.k : 1; this.x_axis = d3.axisBottom(this.x_scale_copy).ticks(6).tickSize(-this.inner_height); @@ -3189,8 +3194,8 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte // 4. Sticky badges: stick to x = 0 if rawX1 < 0, otherwise sit at rawX1 const foX = visX1; const foWidth = Math.max(0, visX2 - foX); - const foY = 3; - const foH = 22; + const foY = 0; + const foH = 24; fo.attr("x", foX).attr("y", foY).attr("width", foWidth).attr("height", foH); @@ -3213,6 +3218,15 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte const navReservedWidth = isOverlap ? 74 : 0; // Left arrow (~22px) + Right arrow (~22px) + Counter (~22px) + gaps (~8px) const minFoWidth = isOverlap ? 48 : 28; + if (isOverlap && overlapGroup) { + const groupId = overview.getGroupId(overlapGroup); + const currentIdx = overview.activeSessionIndices.get(groupId) ?? 0; + const counterText = g.select(".session-counter-text, .session-counter"); + if (!counterText.empty()) { + counterText.text(`${currentIdx + 1}/${overlapGroup.length}`); + } + } + if (foWidth < minFoWidth) { // Extremely narrow: hide badges completely fo.style("display", "none").style("visibility", "hidden"); diff --git a/src/app/components/graphs/commits/session-header-renderer.ts b/src/app/components/graphs/commits/session-header-renderer.ts index 76a34243..d36f338b 100644 --- a/src/app/components/graphs/commits/session-header-renderer.ts +++ b/src/app/components/graphs/commits/session-header-renderer.ts @@ -32,46 +32,43 @@ export class SessionHeaderRenderer { const { displayName, groupName, hasNotes, fo, calendarSvg, usersSvg, noteSvg } = ctx; fo.html(` -
-
- -
- - ${calendarSvg} - ${displayName} - -
+
+
+ + + ${calendarSvg} + ${displayName} + + + + ${ + groupName + ? ` + + ${usersSvg} + ${groupName} + ` + : "" + } + + + ${ + hasNotes + ? ` + + ${noteSvg} + ` + : "" + } - -
- - ${ - groupName - ? ` - - ${usersSvg} - ${groupName} - ` - : "" - } - - ${ - hasNotes - ? ` - - ${noteSvg} - ` - : "" - } - - -
+ +
`); @@ -100,63 +97,58 @@ export class SessionHeaderRenderer { const chevronRight = ''; fo.html(` -
+
- - -
- -
- - ${calendarSvg} - ${displayName} - -
+ +
+ + + ${calendarSvg} + ${displayName} + - -
- - ${ - groupName - ? ` - - ${usersSvg} - ${groupName} - ` - : "" - } + + ${ + groupName + ? ` + + ${usersSvg} + ${groupName} + ` + : "" + } - - ${ - hasNotes - ? ` - - ${noteSvg} - ` - : "" - } + + ${ + hasNotes + ? ` + + ${noteSvg} + ` + : "" + } - - + + - - ${ - sessionIdxInGroup + 1 - }/${groupSize} -
+ + ${ + sessionIdxInGroup + 1 + }/${groupSize}
-
From 772c79360840728acd2a4e339656c775bdac3ebb Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Fri, 25 Sep 2026 17:16:17 +0200 Subject: [PATCH 16/23] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Fix=20member=20order?= =?UTF-8?q?ing=20in=20GitlabDataService?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/services/gitlab-data.service.ts | 82 ++++++++++++------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/src/app/services/gitlab-data.service.ts b/src/app/services/gitlab-data.service.ts index cf2f09cd..04b66175 100644 --- a/src/app/services/gitlab-data.service.ts +++ b/src/app/services/gitlab-data.service.ts @@ -74,47 +74,6 @@ export class GitlabDataService implements GitDataService { return forkJoin(observables); } - private fetchSingleRepositoryMetadata(repo: Repository): Observable { - const { origin, path } = this.extractRepoPathAndOrigin(repo.url); - if (!path) { - return of({ url: repo.url, name: "", tpGroup: "" }); - } - - const host = new URL(origin).hostname; - const headers = this.getHeadersForHost(host); - const projectUrl = `${origin}/api/v4/projects/${encodeURIComponent(path)}`; - - return this.http.get(projectUrl, { headers }).pipe( - switchMap((project) => { - const defaultBranch = project?.default_branch || "main"; - const readmeUrl = `${origin}/api/v4/projects/${encodeURIComponent(path)}/repository/files/README%2Emd/raw?ref=${encodeURIComponent( - defaultBranch, - )}`; - const identityUrl = `${origin}/api/v4/projects/${encodeURIComponent( - path, - )}/repository/files/IDENTITY%2Ejson/raw?ref=${encodeURIComponent(defaultBranch)}`; - - return forkJoin({ - readme: this.http.get(readmeUrl, { headers, responseType: "text" }).pipe(catchError(() => of(null))), - identity: this.http.get(identityUrl, { headers, responseType: "text" }).pipe(catchError(() => of(null))), - }).pipe( - map(({ readme, identity }) => { - const { name, tpGroup } = Utils.extractRepositoryMetadata(identity, readme); - return { - url: repo.url, - name, - tpGroup, - }; - }), - ); - }), - catchError((err) => { - console.error(`Error fetching GitLab repo metadata for ${repo.url}`, err); - return of({ url: repo.url, name: "", tpGroup: "" }); - }), - ); - } - getRepositoriesByAuthenticatedUser(cursor?: string, pageLimit = 100, instanceHost?: string): Observable { const baseApi = this.getBaseApi(instanceHost); const headers = this.getHeadersForHost(instanceHost); @@ -266,6 +225,47 @@ export class GitlabDataService implements GitDataService { ); } + private fetchSingleRepositoryMetadata(repo: Repository): Observable { + const { origin, path } = this.extractRepoPathAndOrigin(repo.url); + if (!path) { + return of({ url: repo.url, name: "", tpGroup: "" }); + } + + const host = new URL(origin).hostname; + const headers = this.getHeadersForHost(host); + const projectUrl = `${origin}/api/v4/projects/${encodeURIComponent(path)}`; + + return this.http.get(projectUrl, { headers }).pipe( + switchMap((project) => { + const defaultBranch = project?.default_branch || "main"; + const readmeUrl = `${origin}/api/v4/projects/${encodeURIComponent(path)}/repository/files/README%2Emd/raw?ref=${encodeURIComponent( + defaultBranch, + )}`; + const identityUrl = `${origin}/api/v4/projects/${encodeURIComponent( + path, + )}/repository/files/IDENTITY%2Ejson/raw?ref=${encodeURIComponent(defaultBranch)}`; + + return forkJoin({ + readme: this.http.get(readmeUrl, { headers, responseType: "text" }).pipe(catchError(() => of(null))), + identity: this.http.get(identityUrl, { headers, responseType: "text" }).pipe(catchError(() => of(null))), + }).pipe( + map(({ readme, identity }) => { + const { name, tpGroup } = Utils.extractRepositoryMetadata(identity, readme); + return { + url: repo.url, + name, + tpGroup, + }; + }), + ); + }), + catchError((err) => { + console.error(`Error fetching GitLab repo metadata for ${repo.url}`, err); + return of({ url: repo.url, name: "", tpGroup: "" }); + }), + ); + } + private fetchSingleRepositoryData(repo: Repository, startDate?: string, endDate?: string): Observable { const { origin, path } = this.extractRepoPathAndOrigin(repo.url); if (!path) { From c504479e012e6d0939b8dcdf2bc3cfada2f5aa33 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Fri, 25 Sep 2026 17:51:23 +0200 Subject: [PATCH 17/23] =?UTF-8?q?=F0=9F=90=9B=20Fix=20unit=20tests=20for?= =?UTF-8?q?=20GitHub=20and=20GitLab=20auth=20services?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/services/github-auth.service.spec.ts | 1 + src/app/services/gitlab-auth.service.spec.ts | 4 +++- src/app/services/gitlab-custom-auth.service.spec.ts | 9 +++++++++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/app/services/github-auth.service.spec.ts b/src/app/services/github-auth.service.spec.ts index a5238bce..bb23e7f8 100644 --- a/src/app/services/github-auth.service.spec.ts +++ b/src/app/services/github-auth.service.spec.ts @@ -151,6 +151,7 @@ describe("GithubAuthService", () => { ); const newService = new GithubAuthService(routerSpy, TestBed.inject(HttpClient), toastSpy, tokenStorageService); + httpMock.expectOne("https://api.github.com/rate_limit").flush({}); expect(newService.isSignedIn()).toBeTrue(); expect(newService.token).toBe("gho_saved_token"); diff --git a/src/app/services/gitlab-auth.service.spec.ts b/src/app/services/gitlab-auth.service.spec.ts index 8fa94413..cfb3101e 100644 --- a/src/app/services/gitlab-auth.service.spec.ts +++ b/src/app/services/gitlab-auth.service.spec.ts @@ -1,3 +1,4 @@ +import { HttpClient } from "@angular/common/http"; import { TestBed } from "@angular/core/testing"; import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing"; import { GitlabAuthService } from "./gitlab-auth.service"; @@ -105,7 +106,8 @@ describe("GitlabAuthService", () => { tokenStorage.saveToken("gitlab", "stored-gl-token", true); tokenStorage.saveUserData("gitlab", { id: 123, username: "stored_user", name: "Stored", avatar_url: "", web_url: "" }, true); - const freshService = new GitlabAuthService(httpMock as any, tokenStorage); + const httpClient = TestBed.inject(HttpClient); + const freshService = new GitlabAuthService(httpClient, tokenStorage); expect(freshService.isSignedIn()).toBeTrue(); expect(freshService.token).toBe("stored-gl-token"); expect(freshService.currentUser?.username).toBe("stored_user"); diff --git a/src/app/services/gitlab-custom-auth.service.spec.ts b/src/app/services/gitlab-custom-auth.service.spec.ts index 612a9c8a..c6d6c437 100644 --- a/src/app/services/gitlab-custom-auth.service.spec.ts +++ b/src/app/services/gitlab-custom-auth.service.spec.ts @@ -64,6 +64,11 @@ describe("GitlabCustomAuthService", () => { web_url: "https://gitlab.univ-tlse3.fr/prof.turing", }); + await Promise.resolve(); + + const tokenReq = httpMock.expectOne("https://gitlab.univ-tlse3.fr/api/v4/personal_access_tokens/self"); + tokenReq.flush({ expires_at: "2026-12-31" }); + const account = await connectPromise; expect(account.username).toBe("prof.turing"); expect(account.instanceHost).toBe("gitlab.univ-tlse3.fr"); @@ -108,6 +113,8 @@ describe("GitlabCustomAuthService", () => { avatar_url: "", web_url: "", }); + await Promise.resolve(); + httpMock.expectOne("https://gitlab.univ-tlse3.fr/api/v4/personal_access_tokens/self").flush({}); await p1; const p2 = service.connectInstance("https://gitlab.irit.fr", "tok2", "IRIT"); @@ -118,6 +125,8 @@ describe("GitlabCustomAuthService", () => { avatar_url: "", web_url: "", }); + await Promise.resolve(); + httpMock.expectOne("https://gitlab.irit.fr/api/v4/personal_access_tokens/self").flush({}); await p2; expect(service.getAccounts().length).toBe(2); From 285aeb037281c235bbfd22dbadb6f5cb2f3c6189 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Mon, 28 Sep 2026 12:33:31 +0200 Subject: [PATCH 18/23] =?UTF-8?q?=E2=9C=A8=20Apply=20Emil=20Kowalski=20too?= =?UTF-8?q?ltip=20warm-up=20animation=20principles=20and=20clean=20up=20le?= =?UTF-8?q?gacy=20tooltips?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assignment-chooser.component.html | 6 +- .../modal-add-repositories.component.html | 2 +- .../sidebar-settings.component.html | 8 +- .../questions-chooser.component.html | 2 +- src/app/services/tooltip.service.ts | 84 ++++++++++--- .../shared/ui/dev-bar/dev-bar.component.html | 30 +++-- .../shared/ui/tooltip/tooltip.component.html | 2 + .../shared/ui/tooltip/tooltip.component.scss | 25 +++- .../shared/ui/tooltip/tooltip.component.ts | 1 + src/styles.scss | 1 - src/styles/_tooltips.scss | 112 ------------------ 11 files changed, 120 insertions(+), 153 deletions(-) delete mode 100644 src/styles/_tooltips.scss diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.html b/src/app/components/home/assignment-chooser/assignment-chooser.component.html index 00efb141..dae44baf 100644 --- a/src/app/components/home/assignment-chooser/assignment-chooser.component.html +++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.html @@ -197,7 +197,7 @@
{{ 'HOME.FILTER.COURSE' | translate }}
@@ -224,7 +224,7 @@
{{ 'HOME.FILTER.PROGRAM' | translate }}
@@ -251,7 +251,7 @@
{{ 'HOME.FILTER.YEAR' | translate }}
diff --git a/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.html b/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.html index 5e94aa6a..919cbe59 100644 --- a/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.html +++ b/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.html @@ -256,7 +256,7 @@
{{ 'EDIT-REPOSITORIES.NO-REPOSITORIES' | translate }}
- +
diff --git a/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.html b/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.html index f271a3d0..91f5e0f6 100644 --- a/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.html +++ b/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.html @@ -4,7 +4,7 @@
{{ 'SETTINGS.RECENT-ASSIGNMENTS' | translate }} -
- {{ assignment.title }} - {{ assignment.metadata?.course }} + {{ assignment.title }} + {{ assignment.metadata?.course }}
- diff --git a/src/app/shared/ui/tooltip/tooltip.component.html b/src/app/shared/ui/tooltip/tooltip.component.html index 2de0e2ce..2ce29011 100644 --- a/src/app/shared/ui/tooltip/tooltip.component.html +++ b/src/app/shared/ui/tooltip/tooltip.component.html @@ -1,6 +1,8 @@
Date: Mon, 28 Sep 2026 13:33:30 +0200 Subject: [PATCH 19/23] =?UTF-8?q?=E2=9C=A8=20refine=20commits=20graph=20in?= =?UTF-8?q?teractions=20with=20session=20info=20click,=20focus=20dblclick?= =?UTF-8?q?=20and=20subtle=20shift-drag=20zoom?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/graphs/commits/chart.scss | 63 +++ .../graphs/commits/commits.component.ts | 406 ++++++++++++++++-- 2 files changed, 435 insertions(+), 34 deletions(-) diff --git a/src/app/components/graphs/commits/chart.scss b/src/app/components/graphs/commits/chart.scss index 5190f535..247dc7e8 100644 --- a/src/app/components/graphs/commits/chart.scss +++ b/src/app/components/graphs/commits/chart.scss @@ -450,3 +450,66 @@ body.dark-theme .commit { transform: scale(0.88); } } + +/* Zone de sélection de zoom (Shift + Drag) — Craft & Subtle style */ +.chart-selection-group { + pointer-events: none; + animation: selectionFadeIn 120ms cubic-bezier(0.23, 1, 0.32, 1) forwards; + + &.selection-exiting { + animation: selectionFadeOut 180ms ease-out forwards; + } +} + +.chart-selection-bg { + fill: var(--color-primary); + fill-opacity: 0.07; + stroke: none; +} + +.chart-selection-edge { + stroke: var(--color-primary); + stroke-width: 1.5px; + stroke-opacity: 0.7; +} + +.chart-selection-top-bar { + fill: var(--color-primary); + opacity: 0.9; +} + +.chart-selection-badge-bg { + fill: var(--color-surface); + stroke: var(--color-border); + stroke-width: 1px; + filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.04)); +} + +.chart-selection-badge-text { + fill: var(--color-text-primary); + font-family: var(--font-family-sans); + font-size: 11px; + font-weight: 600; + letter-spacing: 0.02em; + user-select: none; +} + +@keyframes selectionFadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes selectionFadeOut { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} diff --git a/src/app/components/graphs/commits/commits.component.ts b/src/app/components/graphs/commits/commits.component.ts index 0fab1932..b230ee2b 100644 --- a/src/app/components/graphs/commits/commits.component.ts +++ b/src/app/components/graphs/commits/commits.component.ts @@ -175,6 +175,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte readonly MILESTONE_HOLD_DURATION = 700; readonly MILESTONE_DRAG_JITTER_TOLERANCE = 5; readonly MILESTONE_CLICK_SUPPRESSION_DELAY = 300; + isSessionTooltipPinned = false; + isShiftDragging = false; + private sessionClickTimer: any = null; + private lastClickedSession: Session | null = null; //////////////////////// public modeHoverState: any = { @@ -293,6 +297,15 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte this.legendDropdown.close(); } } + if (OverlayManagerService.shouldDismiss(OverlayType.TOOLTIP, event)) { + if (this.sessionClickTimer) { + clearTimeout(this.sessionClickTimer); + this.sessionClickTimer = null; + this.lastClickedSession = null; + } + this.isSessionTooltipPinned = false; + this.hovered_session = undefined; + } }); } @@ -392,6 +405,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte cancelAnimationFrame(this.zoomRafId); this.zoomRafId = null; } + if (this.sessionClickTimer) { + clearTimeout(this.sessionClickTimer); + this.sessionClickTimer = null; + } this.clearMilestoneHoverTimer(); this.cancelMilestoneLongPress(); this.stopDragScrollTimer(); @@ -652,6 +669,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte return; } + if (this.isSessionTooltipPinned) { + return; + } + if (this.hovered_g && (this.hovered_commit || this.hovered_group_commit)) { const node = this.hovered_g.node(); if (!node || !node.isConnected || this.hovered_g.select(":hover").empty()) { @@ -746,6 +767,9 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte overview.refreshElementState(); }) .filter((event) => { + if (event.type === "mousedown" && event.shiftKey) { + return false; + } return event.shiftKey || !(event instanceof WheelEvent); }) .scaleExtent([0.5, overview.maxZoom]); @@ -897,6 +921,11 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .attr("opacity", "0") .style("cursor", "default") .style("pointer-events", "all") + .on("mousedown", (event: MouseEvent) => { + if (event.shiftKey && event.button === 0) { + overview.initiateShiftDragZoom(event); + } + }) .on("contextmenu", (event: MouseEvent) => { event.preventDefault(); event.stopPropagation(); @@ -909,12 +938,20 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte } }) .on("click", (event: MouseEvent) => { + if (event.shiftKey) return; const rawDate = overview.getDateFromMouseEvent(event); const session = overview.resolveSessionAtDate(rawDate); if (session) { - overview.selectAndActivateSession(session, event.pageX, event.pageY, rawDate); + overview.handleSessionClick(session, event.clientX, event.clientY); } else { - overview.openContextMenu(event.pageX, event.pageY, rawDate); + overview.overlayManagerService.dismissAll({ blurInput: true }); + } + }) + .on("dblclick", (event: MouseEvent) => { + const rawDate = overview.getDateFromMouseEvent(event); + const session = overview.resolveSessionAtDate(rawDate); + if (session) { + overview.handleSessionDblClick(session); } }) .on("wheel", (event: WheelEvent) => { @@ -942,6 +979,11 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .attr("width", this.inner_width) .attr("height", this.scrollable_height) .attr("opacity", "0") + .on("mousedown", (event: MouseEvent) => { + if (event.shiftKey && event.button === 0) { + this.initiateShiftDragZoom(event); + } + }) .on("contextmenu", (event: MouseEvent) => { event.preventDefault(); event.stopPropagation(); @@ -954,16 +996,29 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte } }) .on("click", (event: MouseEvent) => { + if (event.shiftKey) return; const rawDate = this.getDateFromMouseEvent(event); const session = this.resolveSessionAtDate(rawDate); if (session) { - this.selectAndActivateSession(session, event.pageX, event.pageY, rawDate); + this.handleSessionClick(session, event.clientX, event.clientY); } else { - this.openContextMenu(event.pageX, event.pageY, rawDate); + this.overlayManagerService.dismissAll({ blurInput: true }); + } + }) + .on("dblclick", (event: MouseEvent) => { + const rawDate = this.getDateFromMouseEvent(event); + const session = this.resolveSessionAtDate(rawDate); + if (session) { + this.handleSessionDblClick(session); } }); d3.select(".chart-container") + .on("mousedown", (event: MouseEvent) => { + if (event.shiftKey && event.button === 0) { + overview.initiateShiftDragZoom(event); + } + }) .on("mousemove", function (e) { overview.refreshTooltip(e.clientX, e.clientY); }) @@ -1148,7 +1203,7 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte } } - getDateFromMouseEvent(event: MouseEvent): Date { + getRelativeXFromMouseEvent(event: MouseEvent): number { const dataElement = (this.data_g?.select("#data")?.node() as SVGRectElement) || (document.getElementById("data") as unknown as SVGRectElement); let x = 0; @@ -1162,7 +1217,11 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte const [px] = (d3 as any).pointer(event, this.chart_svg.node()); x = px; } - x = Math.max(0, Math.min(this.inner_width, x)); + return Math.max(0, Math.min(this.inner_width || 0, x)); + } + + getDateFromMouseEvent(event: MouseEvent): Date { + const x = this.getRelativeXFromMouseEvent(event); return this.x_scale_copy ? this.x_scale_copy.invert(x) : this.x_scale ? this.x_scale.invert(x) : new Date(); } @@ -1312,6 +1371,11 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .datum(session) .attr("class", `session-container session-group-${sessionKey}`) .attr("clip-path", "url(#clip)") + .on("mousedown", (e: MouseEvent) => { + if (e.shiftKey && e.button === 0) { + overview.initiateShiftDragZoom(e); + } + }) .on("contextmenu", (e) => { e.preventDefault(); e.stopPropagation(); @@ -1320,9 +1384,15 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte overview.selectAndActivateSession(targetSession, e.pageX, e.pageY, rawDate); }) .on("click", (e) => { + if (e.shiftKey) return; const rawDate = overview.getDateFromMouseEvent(e); const targetSession = overview.resolveSessionAtDate(rawDate, session) || session; - overview.selectAndActivateSession(targetSession, e.pageX, e.pageY, rawDate); + overview.handleSessionClick(targetSession, e.clientX, e.clientY); + }) + .on("dblclick", (e) => { + const rawDate = overview.getDateFromMouseEvent(e); + const targetSession = overview.resolveSessionAtDate(rawDate, session) || session; + overview.handleSessionDblClick(targetSession); }) .on("mouseenter", () => { const key = overview.getSessionKeyNum(session); @@ -1380,6 +1450,11 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte .datum(session) .attr("class", `session-header-container session-hdr-group-${sessionKey}`) .style("pointer-events", "auto") + .on("mousedown", (e: MouseEvent) => { + if (e.shiftKey && e.button === 0) { + overview.initiateShiftDragZoom(e); + } + }) .on("contextmenu", (e) => { e.preventDefault(); e.stopPropagation(); @@ -1388,9 +1463,15 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte overview.selectAndActivateSession(targetSession, e.pageX, e.pageY, rawDate); }) .on("click", (e) => { + if (e.shiftKey) return; const rawDate = overview.getDateFromMouseEvent(e); const targetSession = overview.resolveSessionAtDate(rawDate, session) || session; - overview.selectAndActivateSession(targetSession, e.pageX, e.pageY, rawDate); + overview.handleSessionClick(targetSession, e.clientX, e.clientY); + }) + .on("dblclick", (e) => { + const rawDate = overview.getDateFromMouseEvent(e); + const targetSession = overview.resolveSessionAtDate(rawDate, session) || session; + overview.handleSessionDblClick(targetSession); }) .on("mouseenter", () => { const key = overview.getSessionKeyNum(session); @@ -1506,31 +1587,40 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte e.stopPropagation(); const targetSession = overview.getActiveSession(session); overview.ngZone.run(() => { - overview.hovered_session = targetSession; - overview.hovered_commit = undefined; - overview.hovered_group_commit = undefined; - overview.hovered_milestone = undefined; + if (!overview.isSessionTooltipPinned) { + overview.hovered_session = targetSession; + overview.hovered_commit = undefined; + overview.hovered_group_commit = undefined; + overview.hovered_milestone = undefined; + overview.refreshTooltip(e.clientX, e.clientY); + } }); - overview.refreshTooltip(e.clientX, e.clientY); }) .on("mousemove", (e: MouseEvent) => { e.stopPropagation(); - if (overview.hovered_session) { + if (overview.hovered_session && !overview.isSessionTooltipPinned) { overview.refreshTooltip(e.clientX, e.clientY); } }) .on("mouseleave", (e: MouseEvent) => { e.stopPropagation(); overview.ngZone.run(() => { - overview.hovered_session = undefined; + if (!overview.isSessionTooltipPinned) { + overview.hovered_session = undefined; + overview.tooltipService.hide(); + } }); - overview.tooltipService.hide(); }) .on("click", (e: MouseEvent) => { + if (e.shiftKey) return; + e.stopPropagation(); + const targetSession = overview.getActiveSession(session); + overview.handleSessionClick(targetSession, e.clientX, e.clientY); + }) + .on("dblclick", (e: MouseEvent) => { e.stopPropagation(); const targetSession = overview.getActiveSession(session); - const rawDate = overview.getDateFromMouseEvent(e); - overview.selectAndActivateSession(targetSession, e.pageX, e.pageY, rawDate); + overview.handleSessionDblClick(targetSession); }); } @@ -1540,31 +1630,40 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte e.stopPropagation(); const targetSession = overview.getActiveSession(session); overview.ngZone.run(() => { - overview.hovered_session = targetSession; - overview.hovered_commit = undefined; - overview.hovered_group_commit = undefined; - overview.hovered_milestone = undefined; + if (!overview.isSessionTooltipPinned) { + overview.hovered_session = targetSession; + overview.hovered_commit = undefined; + overview.hovered_group_commit = undefined; + overview.hovered_milestone = undefined; + overview.refreshTooltip(e.clientX, e.clientY); + } }); - overview.refreshTooltip(e.clientX, e.clientY); }) .on("mousemove", (e: MouseEvent) => { e.stopPropagation(); - if (overview.hovered_session) { + if (overview.hovered_session && !overview.isSessionTooltipPinned) { overview.refreshTooltip(e.clientX, e.clientY); } }) .on("mouseleave", (e: MouseEvent) => { e.stopPropagation(); overview.ngZone.run(() => { - overview.hovered_session = undefined; + if (!overview.isSessionTooltipPinned) { + overview.hovered_session = undefined; + overview.tooltipService.hide(); + } }); - overview.tooltipService.hide(); }) .on("click", (e: MouseEvent) => { + if (e.shiftKey) return; e.stopPropagation(); const targetSession = overview.getActiveSession(session); - const rawDate = overview.getDateFromMouseEvent(e); - overview.selectAndActivateSession(targetSession, e.pageX, e.pageY, rawDate); + overview.handleSessionClick(targetSession, e.clientX, e.clientY); + }) + .on("dblclick", (e: MouseEvent) => { + e.stopPropagation(); + const targetSession = overview.getActiveSession(session); + overview.handleSessionDblClick(targetSession); }); } @@ -3547,6 +3646,239 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte this.data_g.transition().duration(750).call(this.zoom.transform, transform); } + zoomToDateRange(startDate: Date, endDate: Date, marginRatio = 0.05) { + if (!startDate || !endDate || !this.data_g || !this.zoom || !this.x_scale) return; + this.hovered_commit = undefined; + this.hovered_group_commit = undefined; + this.hovered_session = undefined; + this.hovered_milestone = undefined; + this.hovered_repository = undefined; + this.hovered_g = null; + this.isSessionTooltipPinned = false; + this.tooltipService.hide(); + this.overlayManagerService.dismissAll(); + + const time_domain = this.x_scale.domain(); + const minDate = time_domain[0].valueOf() as number; + const maxDate = time_domain[1].valueOf() as number; + const dt = maxDate - minDate; + + const t1 = startDate.getTime(); + const t2 = endDate.getTime(); + const selectedDuration = Math.max(1000, Math.abs(t2 - t1)); + + if (isNaN(minDate) || isNaN(maxDate) || isNaN(t1) || isNaN(t2) || dt <= 0) return; + + const minSelected = Math.min(t1, t2); + const maxSelected = Math.max(t1, t2); + const margin = selectedDuration * marginRatio; + + const targetStart = minSelected - margin; + const targetEnd = maxSelected + margin; + const targetDuration = targetEnd - targetStart; + + let target_k = dt / targetDuration; + target_k = Math.max(1, Math.min(target_k, this.maxZoom)); + + const translate_x = -((targetStart - minDate) / dt) * this.inner_width * target_k; + + const transform = d3.zoomIdentity.translate(translate_x, 0).scale(target_k); + + /* Animation réactive fluide : décélération cubic-bezier(0.23, 1, 0.32, 1) en 480ms */ + this.data_g.transition().duration(480).ease(d3.easeCubicOut).call(this.zoom.transform, transform); + } + + handleSessionClick(session: Session, clientX: number, clientY: number) { + if (!session) return; + const targetSession = this.activateSession(session); + + if (this.sessionClickTimer && this.lastClickedSession === targetSession) { + clearTimeout(this.sessionClickTimer); + this.sessionClickTimer = null; + this.lastClickedSession = null; + this.isSessionTooltipPinned = false; + this.tooltipService.hide(); + this.zoomToSession(targetSession); + return; + } + + if (this.sessionClickTimer) { + clearTimeout(this.sessionClickTimer); + } + this.lastClickedSession = targetSession; + this.sessionClickTimer = setTimeout(() => { + this.sessionClickTimer = null; + this.lastClickedSession = null; + this.showSessionInfoTooltip(targetSession, clientX, clientY); + }, 250); + } + + handleSessionDblClick(session: Session) { + if (!session) return; + if (this.sessionClickTimer) { + clearTimeout(this.sessionClickTimer); + this.sessionClickTimer = null; + } + this.lastClickedSession = null; + this.isSessionTooltipPinned = false; + const targetSession = this.activateSession(session); + this.tooltipService.hide(); + this.zoomToSession(targetSession); + } + + showSessionInfoTooltip(session: Session, clientX: number, clientY: number) { + this.ngZone.run(() => { + this.isSessionTooltipPinned = true; + this.hovered_session = session; + this.hovered_commit = undefined; + this.hovered_group_commit = undefined; + this.hovered_milestone = undefined; + this.hovered_repository = undefined; + this.tooltipService.showAtPosition(this.d3TooltipTemplate, clientX, clientY, "right", undefined, true); + }); + } + + private formatSelectionDuration(d1: Date, d2: Date): string { + const t1 = Math.min(d1.getTime(), d2.getTime()); + const t2 = Math.max(d1.getTime(), d2.getTime()); + const diffMs = t2 - t1; + const dur = moment.duration(diffMs); + const days = Math.floor(dur.asDays()); + const hours = dur.hours(); + const minutes = dur.minutes(); + + let text = ""; + if (days > 0) { + text += `${days}j `; + } + if (hours > 0 || days > 0) { + text += `${hours}h `; + } + if (minutes > 0 || (days === 0 && hours === 0)) { + text += `${minutes}min`; + } + return text.trim(); + } + + initiateShiftDragZoom(event: MouseEvent) { + if (event.button !== 0 || !event.shiftKey || !this.chart_abs_g || !this.x_scale_copy) return; + event.preventDefault(); + event.stopPropagation(); + this.overlayManagerService.dismissAll(); + + const startX = this.getRelativeXFromMouseEvent(event); + const clampedStartX = Math.max(0, Math.min(this.inner_width, startX)); + + const selectionGroup = this.chart_abs_g.append("g").attr("class", "chart-selection-group").style("pointer-events", "none"); + + const selectionBg = selectionGroup + .append("rect") + .attr("class", "chart-selection-bg") + .attr("x", clampedStartX) + .attr("y", 0) + .attr("width", 0) + .attr("height", this.height); + + const leftLine = selectionGroup + .append("line") + .attr("class", "chart-selection-edge chart-selection-edge-left") + .attr("x1", clampedStartX) + .attr("y1", 0) + .attr("x2", clampedStartX) + .attr("y2", this.height); + + const rightLine = selectionGroup + .append("line") + .attr("class", "chart-selection-edge chart-selection-edge-right") + .attr("x1", clampedStartX) + .attr("y1", 0) + .attr("x2", clampedStartX) + .attr("y2", this.height); + + const topBar = selectionGroup + .append("rect") + .attr("class", "chart-selection-top-bar") + .attr("x", clampedStartX) + .attr("y", 0) + .attr("width", 0) + .attr("height", 2.5) + .attr("rx", 1.25) + .attr("ry", 1.25); + + const badge = selectionGroup.append("g").attr("class", "chart-selection-badge").style("opacity", "0"); + + const badgeBg = badge.append("rect").attr("class", "chart-selection-badge-bg").attr("height", 20).attr("rx", 10).attr("ry", 10); + + const badgeText = badge.append("text").attr("class", "chart-selection-badge-text").attr("y", 14).attr("text-anchor", "middle"); + + document.body.style.cursor = "crosshair"; + this.isShiftDragging = true; + let hasMovedEnough = false; + + const onWindowMouseMove = (e: MouseEvent) => { + const currentX = this.getRelativeXFromMouseEvent(e); + const minX = Math.max(0, Math.min(clampedStartX, currentX)); + const maxX = Math.min(this.inner_width, Math.max(clampedStartX, currentX)); + const w = Math.max(0, maxX - minX); + + if (Math.abs(currentX - clampedStartX) >= 8) { + hasMovedEnough = true; + } + + selectionBg.attr("x", minX).attr("width", w); + leftLine.attr("x1", minX).attr("x2", minX); + rightLine.attr("x1", maxX).attr("x2", maxX); + topBar.attr("x", minX).attr("width", w); + + if (w >= 16 && this.x_scale_copy) { + const d1 = this.x_scale_copy.invert(minX); + const d2 = this.x_scale_copy.invert(maxX); + const durText = this.formatSelectionDuration(d1, d2); + badgeText.text(durText); + + const textNode = badgeText.node() as SVGTextContentElement; + const textWidth = textNode ? textNode.getComputedTextLength() : durText.length * 6.5; + const badgeWidth = Math.max(50, textWidth + 16); + + badgeBg.attr("width", badgeWidth).attr("x", -badgeWidth / 2); + + let badgeX = minX + w / 2; + badgeX = Math.max(badgeWidth / 2 + 6, Math.min(this.inner_width - badgeWidth / 2 - 6, badgeX)); + const badgeY = Math.max(6, this.inner_margin?.top ? this.inner_margin.top + 8 : 12); + + badge.attr("transform", `translate(${badgeX}, ${badgeY})`).style("opacity", "1"); + } else { + badge.style("opacity", "0"); + } + }; + + const onWindowMouseUp = (e: MouseEvent) => { + window.removeEventListener("mousemove", onWindowMouseMove); + window.removeEventListener("mouseup", onWindowMouseUp); + document.body.style.cursor = ""; + this.isShiftDragging = false; + + const currentX = this.getRelativeXFromMouseEvent(e); + const distance = Math.abs(currentX - clampedStartX); + + if (distance >= 8 && hasMovedEnough) { + selectionGroup.classed("selection-exiting", true); + setTimeout(() => selectionGroup.remove(), 180); + + const minX = Math.max(0, Math.min(clampedStartX, currentX)); + const maxX = Math.min(this.inner_width, Math.max(clampedStartX, currentX)); + const d1 = this.x_scale_copy.invert(minX); + const d2 = this.x_scale_copy.invert(maxX); + this.zoomToDateRange(d1, d2, 0.05); + } else { + selectionGroup.remove(); + } + }; + + window.addEventListener("mousemove", onWindowMouseMove); + window.addEventListener("mouseup", onWindowMouseUp); + } + getVisibleSessions(): Session[] { if (!this.dataService || !this.dataService.sessions) return []; return this.dataService.sessions @@ -3800,10 +4132,6 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte // 1. If preferredSession is provided: if (preferredSession) { - const activeSession = this.getActiveSession(preferredSession); - if (activeSession && activeSession !== preferredSession && this.sessionCoversTime(activeSession, time)) { - return activeSession; - } if (this.sessionCoversTime(preferredSession, time)) { return preferredSession; } @@ -3812,6 +4140,10 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte const covering = group.find((s) => this.sessionCoversTime(s, time)); if (covering) return covering; } + const activeSession = this.getActiveSession(preferredSession); + if (activeSession && this.sessionCoversTime(activeSession, time)) { + return activeSession; + } } // 2. No preferredSession or preferredSession does not cover time: @@ -3837,8 +4169,8 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte return candidates[0]; } - public selectAndActivateSession(session: Session, x: number, y: number, date: Date) { - if (!session) return; + public activateSession(session: Session): Session { + if (!session) return session; const group = this.getSessionOverlapGroup(session); if (group && group.length > 1) { const idx = group.findIndex( @@ -3858,6 +4190,12 @@ export class CommitsComponent extends BaseGraphComponent implements OnInit, Afte } } this.lastFocusedSession = session; + return session; + } + + public selectAndActivateSession(session: Session, x: number, y: number, date: Date) { + if (!session) return; + this.activateSession(session); this.openEditSessionContextMenu(session, x, y, date); } From 4ab979fa88aa5b5ab0b7d15d6a4c9564d1c920c1 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Mon, 28 Sep 2026 13:47:58 +0200 Subject: [PATCH 20/23] =?UTF-8?q?=E2=9C=A8=20polish=20shortcuts=20modal=20?= =?UTF-8?q?with=20structured=20cards,=20dotted=20leaders=20and=20mouse=20S?= =?UTF-8?q?VG=20icons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shortcuts-modal.component.html | 169 +++++++++++++++--- .../shortcuts-modal.component.scss | 56 ++++-- src/assets/i18n/en.json | 19 +- src/assets/i18n/fr.json | 19 +- src/assets/i18n/ru.json | 19 +- 5 files changed, 227 insertions(+), 55 deletions(-) diff --git a/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.html b/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.html index e8ae4ab3..322211bf 100644 --- a/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.html +++ b/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.html @@ -21,7 +21,7 @@
-
+
{{ 'MODAL-SHORTCUTS.SECTION_GLOBAL_NAV' | translate }} @@ -30,34 +30,91 @@
{{ 'MODAL-SHORTCUTS.NAV_OVERVIEW' | translate }} + 1
{{ 'MODAL-SHORTCUTS.NAV_STUDENTS' | translate }} + 2
{{ 'MODAL-SHORTCUTS.NAV_QUESTIONS' | translate }} + 3
{{ 'MODAL-SHORTCUTS.NAV_CONFIG' | translate }} + C
{{ 'MODAL-SHORTCUTS.NAV_SHORTCUTS' | translate }} + ?
{{ 'MODAL-SHORTCUTS.TOGGLE_ANONYMOUS' | translate }} + A
- +
-
+
+ + + {{ 'MODAL-SHORTCUTS.SECTION_FILTERS' | translate }} + +
+
+
+ {{ 'MODAL-SHORTCUTS.FILTER_FOCUS' | translate }} + + F +
+
+ {{ 'MODAL-SHORTCUTS.FILTER_CLEAR' | translate }} + + {{ 'MODAL-SHORTCUTS.KEY_ESC' | translate }} +
+
+ {{ 'MODAL-SHORTCUTS.FILTER_NAVIGATE' | translate }} + +
+ ← + → +
+
+
+ {{ 'MODAL-SHORTCUTS.FILTER_MOVE' | translate }} + +
+ {{ modifierKey }} + + + ← + / + → +
+
+
+ {{ 'MODAL-SHORTCUTS.FILTER_DELETE' | translate }} + + {{ 'MODAL-SHORTCUTS.KEY_DELETE' | translate }} +
+
+ {{ 'MODAL-SHORTCUTS.FILTER_EXCLUDE' | translate }} + + ! +
+
+
+ + +
+
{{ 'MODAL-SHORTCUTS.SECTION_GRAPHS' | translate }} @@ -66,68 +123,84 @@
{{ 'MODAL-SHORTCUTS.GRAPH_ZOOM_IN' | translate }} + +
{{ 'MODAL-SHORTCUTS.GRAPH_ZOOM_OUT' | translate }} + -
{{ 'MODAL-SHORTCUTS.GRAPH_RESET_ZOOM' | translate }} + {{ 'MODAL-SHORTCUTS.KEY_SPACE' | translate }}
+
+ {{ 'MODAL-SHORTCUTS.GRAPH_SESSION_NAV' | translate }} + +
+ ← + → +
+
{{ 'MODAL-SHORTCUTS.GRAPH_RELOAD' | translate }} + R
{{ 'MODAL-SHORTCUTS.GRAPH_COPY_HASH' | translate }} + H
- +
-
- +
+ - {{ 'MODAL-SHORTCUTS.SECTION_FILTERS' | translate }} + {{ 'MODAL-SHORTCUTS.SECTION_GESTURES' | translate }}
- {{ 'MODAL-SHORTCUTS.FILTER_FOCUS' | translate }} - F -
-
- {{ 'MODAL-SHORTCUTS.FILTER_CLEAR' | translate }} - {{ 'MODAL-SHORTCUTS.KEY_ESC' | translate }} + {{ 'MODAL-SHORTCUTS.GESTURE_SESSION_INFO' | translate }} + +
- {{ 'MODAL-SHORTCUTS.FILTER_NAVIGATE' | translate }} + {{ 'MODAL-SHORTCUTS.GESTURE_SESSION_FOCUS' | translate }} +
- ← - → + + 2×
- {{ 'MODAL-SHORTCUTS.FILTER_MOVE' | translate }} + {{ 'MODAL-SHORTCUTS.GESTURE_BOX_ZOOM' | translate }} +
- {{ modifierKey }} + {{ 'MODAL-SHORTCUTS.KEY_SHIFT' | translate }} + - ← - / - → +
- {{ 'MODAL-SHORTCUTS.FILTER_DELETE' | translate }} - {{ 'MODAL-SHORTCUTS.KEY_DELETE' | translate }} + {{ 'MODAL-SHORTCUTS.GESTURE_WHEEL_ZOOM' | translate }} + +
+ {{ 'MODAL-SHORTCUTS.KEY_SHIFT' | translate }} + + + +
- {{ 'MODAL-SHORTCUTS.FILTER_EXCLUDE' | translate }} - ! + {{ 'MODAL-SHORTCUTS.GESTURE_CONTEXT_MENU' | translate }} + +
@@ -139,3 +212,49 @@
{{ 'MODAL-SHORTCUTS.CLOSE_HINT' | translate:{ key1: '?', key2: ('MODAL-SHORTCUTS.KEY_ESC' | translate) } }}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.scss b/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.scss index 3b1dbe75..ecfcb04f 100644 --- a/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.scss +++ b/src/app/shared/ui/shortcuts-modal/shortcuts-modal.component.scss @@ -53,28 +53,31 @@ .shortcuts-grid { display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 2rem; + grid-template-columns: repeat(2, 1fr); + gap: 1rem 1.25rem; - @media (max-width: 860px) { + @media (max-width: 720px) { grid-template-columns: 1fr; - gap: 1.5rem; + gap: 1rem; } } .shortcuts-column { display: flex; flex-direction: column; - - &:not(:last-child) { - @media (min-width: 861px) { - padding-right: 2rem; - border-right: 1px solid var(--color-border); - } - } + background: var(--color-bg-body); + border: 1px solid var(--color-border); + border-radius: 16px; + padding: 0.85rem 1rem; } .shortcuts-column-header { + display: flex; + align-items: center; + padding-bottom: 0.5rem; + margin-bottom: 0.35rem; + border-bottom: 1px solid var(--color-border); + .column-icon { font-size: 0.8rem; color: var(--color-primary); @@ -82,10 +85,10 @@ } .column-title { - font-size: 0.775rem; + font-size: 0.725rem; font-weight: 600; text-transform: uppercase; - letter-spacing: 0.04em; + letter-spacing: 0.05em; color: var(--color-text-secondary); } } @@ -93,24 +96,41 @@ .shortcuts-list { display: flex; flex-direction: column; - gap: 0.15rem; + gap: 0.1rem; } .shortcut-row { display: flex; align-items: center; justify-content: space-between; - padding: 0.375rem 0; - gap: 0.75rem; + padding: 0.25rem 0.35rem; + border-radius: 8px; + transition: background-color $transition-fast; + + &:hover { + background-color: var(--color-hover); + } .shortcut-label { - font-size: 0.825rem; + font-size: 0.815rem; color: var(--color-text-primary); font-weight: 400; line-height: 1.35; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -} + .shortcut-dots { + flex: 1; + border-bottom: 1px dashed var(--color-border); + margin: 0 0.5rem; + opacity: 0.5; + min-width: 10px; + height: 1px; + align-self: center; + } +} .footer-hint { font-size: 0.75rem; diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 200d22cd..bc58a290 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -254,8 +254,8 @@ "ZOOM": "Zoom" }, "MODAL-SHORTCUTS": { - "TITLE": "Keyboard Shortcuts", - "SUBTITLE": "Cheatsheet of shortcuts and interactions across the app", + "TITLE": "Shortcuts & Interactions", + "SUBTITLE": "Cheatsheet of keyboard shortcuts and gestures across the app", "CLOSE": "Close", "CLOSE_HINT": "Press {{key1}} or {{key2}} to close", "SECTION_GLOBAL_NAV": "Global Navigation", @@ -265,12 +265,19 @@ "NAV_CONFIG": "Configure assignment", "NAV_SHORTCUTS": "Toggle shortcuts panel", "TOGGLE_ANONYMOUS": "Toggle anonymous mode", - "SECTION_GRAPHS": "Graphs & Visualizations", + "SECTION_GRAPHS": "Graphs & Sessions", "GRAPH_ZOOM_IN": "Zoom in", "GRAPH_ZOOM_OUT": "Zoom out", "GRAPH_RESET_ZOOM": "Reset zoom", + "GRAPH_SESSION_NAV": "Previous / next session", "GRAPH_RELOAD": "Reload data", "GRAPH_COPY_HASH": "Copy hovered commit hash", + "SECTION_GESTURES": "Mouse & Gestures", + "GESTURE_SESSION_INFO": "Show session details", + "GESTURE_SESSION_FOCUS": "Focus on session", + "GESTURE_BOX_ZOOM": "Time range box zoom", + "GESTURE_WHEEL_ZOOM": "Zoom graph timeline", + "GESTURE_CONTEXT_MENU": "Context menu (milestone / session)", "SECTION_FILTERS": "Filter Bar & Search", "FILTER_FOCUS": "Focus search bar", "FILTER_CLEAR": "Clear active filters", @@ -281,7 +288,11 @@ "KEY_SPACE": "Space", "KEY_ESC": "Esc", "KEY_DELETE": "Del", - "KEY_SHIFT": "Shift" + "KEY_SHIFT": "Shift", + "KEY_CLICK": "Click", + "KEY_DBLCLICK": "Double-click", + "KEY_RIGHT_CLICK": "Right click", + "KEY_DRAG": "Drag" }, "TOAST": { "HASH_COPIED": "Commit hash copied!" diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index 8ae2e645..5cef6373 100644 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -253,8 +253,8 @@ "ZOOM": "Zoomer" }, "MODAL-SHORTCUTS": { - "TITLE": "Raccourcis clavier", - "SUBTITLE": "Aide-mémoire des raccourcis et interactions de l'application", + "TITLE": "Raccourcis & Interactions", + "SUBTITLE": "Aide-mémoire des raccourcis clavier et gestes de l'application", "CLOSE": "Fermer", "CLOSE_HINT": "Appuyez sur {{key1}} ou {{key2}} pour fermer", "SECTION_GLOBAL_NAV": "Navigation globale", @@ -264,12 +264,19 @@ "NAV_CONFIG": "Configurer le devoir", "NAV_SHORTCUTS": "Afficher / masquer les raccourcis", "TOGGLE_ANONYMOUS": "Basculer le mode anonymat", - "SECTION_GRAPHS": "Graphiques & Visualisations", + "SECTION_GRAPHS": "Graphiques & Séances", "GRAPH_ZOOM_IN": "Zoomer", "GRAPH_ZOOM_OUT": "Dézoomer", "GRAPH_RESET_ZOOM": "Réinitialiser le zoom", + "GRAPH_SESSION_NAV": "Séance précédente / suivante", "GRAPH_RELOAD": "Recharger les données", "GRAPH_COPY_HASH": "Copier le hash du commit survolé", + "SECTION_GESTURES": "Souris & Gestes", + "GESTURE_SESSION_INFO": "Afficher les infos d'une séance", + "GESTURE_SESSION_FOCUS": "Zoomer sur la séance", + "GESTURE_BOX_ZOOM": "Sélectionner une zone de zoom", + "GESTURE_WHEEL_ZOOM": "Zoomer sur le graphique", + "GESTURE_CONTEXT_MENU": "Menu contextuel (jalon / séance)", "SECTION_FILTERS": "Barre de filtres & Recherche", "FILTER_FOCUS": "Activer la barre de recherche", "FILTER_CLEAR": "Réinitialiser les filtres", @@ -280,7 +287,11 @@ "KEY_SPACE": "Espace", "KEY_ESC": "Échap", "KEY_DELETE": "Suppr", - "KEY_SHIFT": "Maj" + "KEY_SHIFT": "Shift", + "KEY_CLICK": "Clic", + "KEY_DBLCLICK": "Double-clic", + "KEY_RIGHT_CLICK": "Clic droit", + "KEY_DRAG": "Glisser" }, "TOAST": { "HASH_COPIED": "Hash du commit copié !" diff --git a/src/assets/i18n/ru.json b/src/assets/i18n/ru.json index c5744caf..32c8ecf9 100644 --- a/src/assets/i18n/ru.json +++ b/src/assets/i18n/ru.json @@ -252,8 +252,8 @@ "ZOOM": "Увеличить" }, "MODAL-SHORTCUTS": { - "TITLE": "Сочетания клавиш", - "SUBTITLE": "Шпаргалка по горячим клавишам и действиям в приложении", + "TITLE": "Горячие клавиши и жесты", + "SUBTITLE": "Шпаргалка по сочетаниям клавиш и взаимодействию в приложении", "CLOSE": "Закрыть", "CLOSE_HINT": "Нажмите {{key1}} или {{key2}}, чтобы закрыть", "SECTION_GLOBAL_NAV": "Глобальная навигация", @@ -263,12 +263,19 @@ "NAV_CONFIG": "Настроить задание", "NAV_SHORTCUTS": "Показать / скрыть горячие клавиши", "TOGGLE_ANONYMOUS": "Включить / выключить анонимный режим", - "SECTION_GRAPHS": "Графики и визуализации", + "SECTION_GRAPHS": "Графики и занятия", "GRAPH_ZOOM_IN": "Увеличить", "GRAPH_ZOOM_OUT": "Уменьшить", "GRAPH_RESET_ZOOM": "Сбросить масштаб", + "GRAPH_SESSION_NAV": "Предыдущее / следующее занятие", "GRAPH_RELOAD": "Обновить данные", "GRAPH_COPY_HASH": "Копировать хеш коммита", + "SECTION_GESTURES": "Мышь и жесты", + "GESTURE_SESSION_INFO": "Показать сведения о занятии", + "GESTURE_SESSION_FOCUS": "Сфокусироваться на занятии", + "GESTURE_BOX_ZOOM": "Выделение области масштабирования", + "GESTURE_WHEEL_ZOOM": "Масштабирование шкалы времени", + "GESTURE_CONTEXT_MENU": "Контекстное меню (веха / занятие)", "SECTION_FILTERS": "Панель фильтров и поиск", "FILTER_FOCUS": "Активировать строку поиска", "FILTER_CLEAR": "Очистить фильтры", @@ -279,7 +286,11 @@ "KEY_SPACE": "Пробел", "KEY_ESC": "Esc", "KEY_DELETE": "Удал.", - "KEY_SHIFT": "Shift" + "KEY_SHIFT": "Shift", + "KEY_CLICK": "Клик", + "KEY_DBLCLICK": "Двойной клик", + "KEY_RIGHT_CLICK": "Правый клик", + "KEY_DRAG": "Перетаскивание" }, "TOAST": { "HASH_COPIED": "Хеш коммита скопирован!" From 181fd2e7719817aa0195c394f56372c8f21dc6e1 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Mon, 28 Sep 2026 14:04:37 +0200 Subject: [PATCH 21/23] =?UTF-8?q?=F0=9F=90=9B=20Fix=20button=20hover=20fli?= =?UTF-8?q?ckering=20and=20stabilize=20subpixel=20rendering=20transitions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assignment-chooser.component.html | 7 +- .../assignment-chooser.component.scss | 16 +- .../assignment-chooser.component.ts | 14 -- src/styles/_components.scss | 214 ++++++++++-------- src/styles/_variables.scss | 16 +- 5 files changed, 149 insertions(+), 118 deletions(-) diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.html b/src/app/components/home/assignment-chooser/assignment-chooser.component.html index dae44baf..7c187fb0 100644 --- a/src/app/components/home/assignment-chooser/assignment-chooser.component.html +++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.html @@ -29,7 +29,7 @@ }}:
-
-