From 759f0d1c0c8acdc05a22b2851383faa4cc681414 Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Fri, 15 May 2026 10:25:00 +0000 Subject: [PATCH 1/4] fix: load mermaid library and fix mermaidOptions provider config Add mermaid.min.js to angular.json scripts so ngx-markdown can use the mermaid attribute, and add the required `provide: MERMAID_OPTIONS` key to satisfy the TypedValueProvider type constraint. Co-Authored-By: Claude Sonnet 4.6 --- frontend/angular.json | 2 +- frontend/src/main.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/angular.json b/frontend/angular.json index f6c38e8b9..e5aff6974 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -47,7 +47,7 @@ "stylePreprocessorOptions": { "includePaths": ["node_modules/@brumeilde/ngx-theme/presets/material"] }, - "scripts": [], + "scripts": ["node_modules/mermaid/dist/mermaid.min.js"], "extractLicenses": false, "sourceMap": true, "optimization": false, diff --git a/frontend/src/main.ts b/frontend/src/main.ts index a4ef81e1e..33f96b990 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -15,7 +15,7 @@ import { DynamicModule } from 'ng-dynamic-component'; import { SignalComponentIoModule } from 'ng-dynamic-component/signal-component-io'; import { provideCharts, withDefaultRegisterables } from 'ng2-charts'; import { CookieService } from 'ngx-cookie-service'; -import { MarkdownModule, provideMarkdown } from 'ngx-markdown'; +import { MERMAID_OPTIONS, MarkdownModule, provideMarkdown } from 'ngx-markdown'; import { NgxStripeModule } from 'ngx-stripe'; import { AppComponent } from './app/app.component'; import { AppRoutingModule } from './app/app-routing.module'; @@ -127,6 +127,7 @@ bootstrapApplication(AppComponent, { CookieService, provideMarkdown({ mermaidOptions: { + provide: MERMAID_OPTIONS, useValue: { startOnLoad: false, theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default', From 7d4e9defbc260fb466428b250a86d6f620770845 Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Fri, 15 May 2026 10:40:51 +0000 Subject: [PATCH 2/4] feat: add membership popup on Access column hover in company members table Shows a CDK overlay popup on hover of the check_circle icon listing each connection (title + database name) and its groups for the member. Co-Authored-By: Claude Sonnet 4.6 --- .../components/company/company.component.css | 47 +++++++++++++++++++ .../components/company/company.component.html | 34 ++++++++++++-- .../components/company/company.component.ts | 3 ++ frontend/src/app/models/company.ts | 13 +++++ frontend/src/styles.scss | 1 + 5 files changed, 95 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/components/company/company.component.css b/frontend/src/app/components/company/company.component.css index 23dbbed2e..d3533604e 100644 --- a/frontend/src/app/components/company/company.component.css +++ b/frontend/src/app/components/company/company.component.css @@ -112,6 +112,53 @@ color: var(--color-successPalette-500); } +.access-popup { + background: var(--mat-menu-container-color, #fff); + border-radius: 4px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + padding: 8px 12px; + min-width: 160px; + white-space: nowrap; + display: flex; + flex-direction: column; + gap: 8px; +} + +.access-popup__connection { + display: flex; + flex-direction: column; + gap: 2px; +} + +.access-popup__connection-title { + font-weight: 500; + font-size: 13px; +} + +.access-popup__connection-db { + font-size: 11px; + color: rgba(0, 0, 0, 0.45); + padding-left: 2px; +} + +@media (prefers-color-scheme: dark) { + .access-popup__connection-db { + color: rgba(255, 255, 255, 0.45); + } +} + +.access-popup__group { + font-size: 12px; + color: rgba(0, 0, 0, 0.6); + padding-left: 8px; +} + +@media (prefers-color-scheme: dark) { + .access-popup__group { + color: rgba(255, 255, 255, 0.6); + } +} + .company-member-cell_not-accessed { color: var(--color-warnPalette-500); } diff --git a/frontend/src/app/components/company/company.component.html b/frontend/src/app/components/company/company.component.html index 814269bbf..3ef3e3c58 100644 --- a/frontend/src/app/components/company/company.component.html +++ b/frontend/src/app/components/company/company.component.html @@ -199,14 +199,42 @@

Members Access - check_circle - cancel + @if (element.has_groups) { + check_circle + +
+ @for (conn of element.user_membership; track conn.id) { +
+ {{ conn.title }} + {{ conn.database }} + @for (group of conn.groups; track group.id) { + {{ group.title }} + } +
+ } +
+ + } @else { + cancel + } diff --git a/frontend/src/app/components/company/company.component.ts b/frontend/src/app/components/company/company.component.ts index 676df1aad..e6ad0d6e0 100644 --- a/frontend/src/app/components/company/company.component.ts +++ b/frontend/src/app/components/company/company.component.ts @@ -1,4 +1,5 @@ import { NgIf } from '@angular/common'; +import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay'; import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; @@ -37,6 +38,8 @@ import { RevokeInvitationDialogComponent } from './revoke-invitation-dialog/revo styleUrls: ['./company.component.css'], imports: [ NgIf, + CdkOverlayOrigin, + CdkConnectedOverlay, FormsModule, MatFormFieldModule, MatInputModule, diff --git a/frontend/src/app/models/company.ts b/frontend/src/app/models/company.ts index 5c3a8fd7b..5fb6e8970 100644 --- a/frontend/src/app/models/company.ts +++ b/frontend/src/app/models/company.ts @@ -34,6 +34,18 @@ export interface Company { show_test_connections: boolean; } +export interface CompanyMembershipGroup { + id: string; + title: string; +} + +export interface CompanyMembershipConnection { + id: string; + title: string; + database: string; + groups: CompanyMembershipGroup[]; +} + export interface CompanyMember { id: string; isActive: boolean; @@ -42,6 +54,7 @@ export interface CompanyMember { is_2fa_enabled: boolean; role: CompanyMemberRole; has_groups: boolean; + user_membership: CompanyMembershipConnection[]; } export enum CompanyMemberRole { diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 94e915b48..3b59f785a 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -1,6 +1,7 @@ // @import 'codemirror/lib/codemirror'; // @import 'codemirror/theme/ttcn'; + * { margin: 0; padding: 0; From bd8c045be3d3ace79f5b4a9395147622a305c0a9 Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Fri, 15 May 2026 10:47:31 +0000 Subject: [PATCH 3/4] style: adjust access popup font and spacing Use Material font tokens for font-family/size and tighten gaps between connections. Co-Authored-By: Claude Sonnet 4.6 --- .../src/app/components/company/company.component.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/components/company/company.component.css b/frontend/src/app/components/company/company.component.css index d3533604e..d59c01c4e 100644 --- a/frontend/src/app/components/company/company.component.css +++ b/frontend/src/app/components/company/company.component.css @@ -121,22 +121,21 @@ white-space: nowrap; display: flex; flex-direction: column; - gap: 8px; + font-family: var(--mat-menu-item-label-text-font, inherit); + font-size: var(--mat-menu-item-label-text-size, 14px); } .access-popup__connection { display: flex; flex-direction: column; - gap: 2px; } .access-popup__connection-title { font-weight: 500; - font-size: 13px; } .access-popup__connection-db { - font-size: 11px; + font-size: 0.786em; color: rgba(0, 0, 0, 0.45); padding-left: 2px; } @@ -148,7 +147,7 @@ } .access-popup__group { - font-size: 12px; + font-size: 0.857em; color: rgba(0, 0, 0, 0.6); padding-left: 8px; } From af9e2099700617d43fe592cc079f0376f28df50e Mon Sep 17 00:00:00 2001 From: Lyubov Voloshko Date: Fri, 15 May 2026 10:53:07 +0000 Subject: [PATCH 4/4] fix: add user_membership field to CompanyMember mock in spec Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/app/components/company/company.component.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/app/components/company/company.component.spec.ts b/frontend/src/app/components/company/company.component.spec.ts index 5c93d822f..dace78a13 100644 --- a/frontend/src/app/components/company/company.component.spec.ts +++ b/frontend/src/app/components/company/company.component.spec.ts @@ -263,6 +263,7 @@ describe('CompanyComponent', () => { is_2fa_enabled: false, role: CompanyMemberRole.Member, has_groups: false, + user_membership: [], }; component.handleDeleteMemberDialogOpen(fakeMember);