Merge pull request #1778 from rocket-admin/company-member-access-group

Company member access group

Author: lyubov-voloshko

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,

frontend/src/app/components/company/company.component.css

@@ -112,6 +112,52 @@
 	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;
+	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;
+}
+
+.access-popup__connection-title {
+	font-weight: 500;
+}
+
+.access-popup__connection-db {
+	font-size: 0.786em;
+	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: 0.857em;
+	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);
 }

frontend/src/app/components/company/company.component.html

@@ -199,14 +199,42 @@ <h2 class="heading-2 tableHeader__heading">Members <span *ngIf="currentPlan ===
             </td>
         </ng-container>
 
-        <!-- Active Column -->
+        <!-- Access Column -->
         <ng-container matColumnDef="access">
             <th mat-header-cell *matHeaderCellDef matTooltip="Access to connection">Access</th>
             <td mat-cell *matCellDef="let element; let i = index"
                 data-label="Access"
                 class="company-member-cell company-member-cell_content-center">
-                <mat-icon *ngIf="element.has_groups" class="company-member-cell_accessed" fontSet="material-symbols-outlined">check_circle</mat-icon>
-                <mat-icon *ngIf="!element.has_groups" class="company-member-cell_not-accessed" fontSet="material-symbols-outlined">cancel</mat-icon>
+                @if (element.has_groups) {
+                    <mat-icon class="company-member-cell_accessed" fontSet="material-symbols-outlined"
+                        #overlayOrigin="cdkOverlayOrigin"
+                        cdkOverlayOrigin
+                        (mouseenter)="element._popupOpen = true"
+                        (mouseleave)="element._popupOpen = false">check_circle</mat-icon>
+                    <ng-template
+                        cdkConnectedOverlay
+                        [cdkConnectedOverlayOrigin]="overlayOrigin"
+                        [cdkConnectedOverlayOpen]="element._popupOpen"
+                        [cdkConnectedOverlayPositions]="[
+                            { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -4 },
+                            { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 4 }
+                        ]"
+                        [cdkConnectedOverlayHasBackdrop]="false">
+                        <div class="access-popup" (mouseleave)="element._popupOpen = false">
+                            @for (conn of element.user_membership; track conn.id) {
+                                <div class="access-popup__connection">
+                                    <span class="access-popup__connection-title">{{ conn.title }}</span>
+                                    <span class="access-popup__connection-db">{{ conn.database }}</span>
+                                    @for (group of conn.groups; track group.id) {
+                                        <span class="access-popup__group">{{ group.title }}</span>
+                                    }
+                                </div>
+                            }
+                        </div>
+                    </ng-template>
+                } @else {
+                    <mat-icon class="company-member-cell_not-accessed" fontSet="material-symbols-outlined">cancel</mat-icon>
+                }
             </td>
         </ng-container>
 

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);

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,

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 {

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',

frontend/src/styles.scss

@@ -1,6 +1,7 @@
 // @import 'codemirror/lib/codemirror';
 // @import 'codemirror/theme/ttcn';
 
+
 * {
     margin: 0;
     padding: 0;