Skip to content

refactor: migrate cedar policy and group management to Angular signals #1688

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lyubov-voloshko merged 19 commits into from
Apr 8, 2026
Merged

refactor: migrate cedar policy and group management to Angular signals #1688

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
97a90d6
refactor: migrate cedar policy and group management to Angular signals
gugu Mar 25, 2026
cba862f
feat: add cedar-wasm policy validation and permission service
gugu Mar 25, 2026
3a692f0
refactor: replace old permission checks with CedarPermissionService.canI
gugu Mar 25, 2026
7948498
refactor: replace remaining permission checks with CedarPermissionSer…
gugu Mar 25, 2026
54b9a6e
refactor: simplify permission handling by centralizing canEditConnect…
gugu Mar 26, 2026
9069b24
fix: refresh groups directly in saveCedarPolicy to ensure permissions…
gugu Mar 26, 2026
d012a4c
fix: dashboard:create action should not require a resource parameter
gugu Mar 26, 2026
9993894
permissions: fix tracking field of member object
lyubov-voloshko Mar 27, 2026
8482771
fix: add-user-to-group button was not submitting the form
gugu Mar 27, 2026
e652dd1
merge: resolve conflict keeping both canEditConnection and !isConfigu…
gugu Mar 27, 2026
4b5dba4
partial permissions support
gugu Mar 28, 2026
8c4397c
extract demo-login into separate component, improve hostname validator
gugu Apr 3, 2026
5de6a06
Merge branch 'main' into migrate-cedar-policy-groups-to-signals
gugu Apr 6, 2026
2e79f6e
permissions: add View as group + make merged Cedar policies resilient
gugu Apr 7, 2026
d7c4ab7
Merge branch 'main' into migrate-cedar-policy-groups-to-signals
gugu Apr 7, 2026
b76ba10
fix: avoid < in own-connections @if to satisfy Angular and Biome
gugu Apr 7, 2026
15c7ffb
fix: wrap empty-password early return in Promise.resolve
gugu Apr 8, 2026
ac0960a
Merge branch 'main' into migrate-cedar-policy-groups-to-signals
gugu Apr 8, 2026
759336d
Merge branch 'main' into migrate-cedar-policy-groups-to-signals
gugu Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions frontend/angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,11 @@
"glob": "**/*",
"input": "./node_modules/monaco-editor/min",
"output": "./assets/monaco"
},
{
"glob": "cedar_wasm_bg.wasm",
"input": "./node_modules/@cedar-policy/cedar-wasm/web",
"output": "./assets/cedar-wasm"
}
],
"styles": [
Expand Down
1 change: 1 addition & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"@angular/platform-browser-dynamic": "~20.3.16",
"@angular/router": "~20.3.16",
"@brumeilde/ngx-theme": "^1.2.1",
"@cedar-policy/cedar-wasm": "^4.9.1",
"@fontsource/ibm-plex-mono": "^5.2.7",
"@fontsource/noto-sans": "^5.2.10",
"@jsonurl/jsonurl": "^1.1.8",
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/connect-db/connect-db.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,7 +333,7 @@ <h1 class="mat-h1 connectForm__fullLine">
</div>

<!-- edit connection actions -->
<div class="actions" *ngIf="accessLevel && db.id && accessLevel === 'edit' && !db.isTestConnection">
<div class="actions" *ngIf="canEditConnection() && db.id && !db.isTestConnection">
<button type="button" mat-button color="warn"
class="delete-button"
data-testid="edit-connection-actions-delete-button"
Expand Down
14 changes: 12 additions & 2 deletions frontend/src/app/components/connect-db/connect-db.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
import { CommonModule } from '@angular/common';
import { Component, NgZone, OnInit } from '@angular/core';
import { Component, inject, NgZone, OnInit } from '@angular/core';
import { FormsModule, NgForm } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
Expand All @@ -22,6 +22,7 @@ import googlIPsList from 'src/app/consts/google-IP-addresses';
import { Alert, AlertActionType, AlertType } from 'src/app/models/alert';
import { Connection, ConnectionType, DBtype, TestConnection } from 'src/app/models/connection';
import { AccessLevel } from 'src/app/models/user';
import { CedarPermissionService } from 'src/app/services/cedar-permission.service';
import { CompanyService } from 'src/app/services/company.service';
import { ConnectionsService } from 'src/app/services/connections.service';
import { NotificationsService } from 'src/app/services/notifications.service';
Expand Down Expand Up @@ -129,7 +130,13 @@ export class ConnectDBComponent implements OnInit {
public dialog: MatDialog,
private angulartics2: Angulartics2,
private title: Title,
) {}
) {
this.canEditConnection = this._permissions.canI(
'connection:edit',
'Connection',
this._connections.currentConnectionID,
);
}

get isDemo() {
return this._user.isDemo;
Expand Down Expand Up @@ -169,6 +176,9 @@ export class ConnectDBComponent implements OnInit {
return this._connections.currentConnection;
}

private _permissions = inject(CedarPermissionService);
protected canEditConnection: ReturnType<CedarPermissionService['canI']>;

get accessLevel(): AccessLevel {
return this._connections.currentConnectionAccessLevel;
}
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/app/components/connection-settings/connection-settings.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
<p class="mat-body-1">{{serverError.abstract}}</p>
</ng-template>
<div class="error-actions">
<a mat-stroked-button *ngIf="accessLevel === 'edit'"
<a mat-stroked-button *ngIf="canEditConnection()"
routerLink="/edit-db/{{connectionID}}">
Check database credentials
</a>
<button *ngIf="isSaas" mat-flat-button color="warn" (click)="openIntercome()">Chat with support</button>
<button type="button" *ngIf="isSaas" mat-flat-button color="warn" (click)="openIntercome()">Chat with support</button>
<a *ngIf="!isSaas" mat-flat-button color="warn"
href="https://github.com/rocket-admin/rocketadmin/issues" target="_blank">
Report a bug
Expand Down Expand Up @@ -147,7 +147,7 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
Log changes in tables
</mat-slide-toggle>
</div>
<div *ngIf="accessLevel !== 'readonly'" class="actions">
<div *ngIf="canEditConnection()" class="actions">
<button mat-flat-button color="warn"
type="button"
[disabled]="!isSettingsExist || submitting || connectionSettingsForm.form.invalid"
Expand Down
17 changes: 11 additions & 6 deletions frontend/src/app/components/connection-settings/connection-settings.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { CommonModule } from '@angular/common';
import { Component, Inject, OnInit } from '@angular/core';
import { Component, Inject, inject, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
Expand All @@ -15,7 +15,7 @@ import { take } from 'rxjs';
import { ServerError } from 'src/app/models/alert';
import { ConnectionSettings } from 'src/app/models/connection';
import { TableProperties } from 'src/app/models/table';
import { AccessLevel } from 'src/app/models/user';
import { CedarPermissionService } from 'src/app/services/cedar-permission.service';
import { CompanyService } from 'src/app/services/company.service';
import { ConnectionsService } from 'src/app/services/connections.service';
import { TablesService } from 'src/app/services/tables.service';
Expand Down Expand Up @@ -74,7 +74,13 @@ export class ConnectionSettingsComponent implements OnInit {
private _company: CompanyService,
private title: Title,
@Inject(Angulartics2) private angulartics2: Angulartics2,
) {}
) {
this.canEditConnection = this._permissions.canI(
'connection:edit',
'Connection',
this._connections.currentConnectionID,
);
}

ngOnInit(): void {
this._connections
Expand Down Expand Up @@ -113,9 +119,8 @@ export class ConnectionSettingsComponent implements OnInit {
return this._connections.currentConnection.title || this._connections.currentConnection.database;
}

get accessLevel(): AccessLevel {
return this._connections.currentConnectionAccessLevel;
}
private _permissions = inject(CedarPermissionService);
protected canEditConnection: ReturnType<CedarPermissionService['canI']>;
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Dependency injection and signal declarations are misplaced in class structure.

The _permissions injection and canEditConnection declaration are placed in the middle of the class (after the constructor, before methods), violating the component structure guideline. Move these to the top of the class, right after the existing property declarations.

♻️ Suggested reorganization 
 export class ConnectionSettingsComponent implements OnInit {
   protected posthog = posthog;
   public isSaas = (environment as any).saas;
+  private _permissions = inject(CedarPermissionService);
+  protected canEditConnection: ReturnType<CedarPermissionService['canI']>;
   public connectionID: string | null = null;
   // ... other properties ...

-  private _permissions = inject(CedarPermissionService);
-  protected canEditConnection: ReturnType<CedarPermissionService['canI']>;

   getSettings() {
     // ...
   }

As per coding guidelines: "Structure components with dependency injection at the top, followed by signals, computed signals, effects, lifecycle hooks, public methods, then private methods"

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In
`@frontend/src/app/components/connection-settings/connection-settings.component.ts`
around lines 122 - 123, Move the dependency injection and signal declaration to
the top of the component class: relocate the private _permissions =
inject(CedarPermissionService) and the protected canEditConnection:
ReturnType<CedarPermissionService['canI']> declarations so they appear
immediately after the other property declarations (before the constructor and
any methods); this ensures dependency injection and signal declarations are
grouped at the top of the class per the component structure guideline.


getSettings() {
this._connections.getConnectionSettings(this.connectionID).subscribe((res: any) => {
Expand Down
8 changes: 3 additions & 5 deletions frontend/src/app/components/dashboard/dashboard.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@
<p class="mat-body-1">{{serverError.abstract}}</p>
</ng-template>
<div class="error-actions">
<a mat-stroked-button *ngIf="currentConnectionAccessLevel === 'edit'"
<a mat-stroked-button *ngIf="canEditConnection()"
routerLink="/edit-db/{{connectionID}}">
Check database credentials
</a>
<button *ngIf="isSaas" mat-flat-button color="warn" (click)="openIntercome()">Chat with support</button>
<button type="button" *ngIf="isSaas" mat-flat-button color="warn" (click)="openIntercome()">Chat with support</button>
<a *ngIf="!isSaas" mat-flat-button color="warn"
href="https://github.com/rocket-admin/rocketadmin/issues" target="_blank">
Report a bug
Expand Down Expand Up @@ -74,15 +74,14 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
[connectionID]="connectionID"
[selectedTable]="selectedTableName"
[uiSettings]="uiSettings"
[accessLevel]="currentConnectionAccessLevel"
(expandSidebar)="toggleSideBar()">
</app-db-tables-list>
</mat-sidenav>
<mat-sidenav-content class="table-preview">
<div class="table-preview-content">
<div class="alerts">
<app-alert></app-alert>
<div *ngIf="dataSource.alert_settingsInfo" class="ai-config-alert">
<div *ngIf="dataSource.alert_settingsInfo && canEditConnection()" class="ai-config-alert">
<mat-icon class="ai-config-alert__icon">auto_awesome</mat-icon>
<div class="ai-config-alert__message mat-body-1">
<strong class="ai-config-alert__title">New: AI Configuration</strong>
Expand All @@ -106,7 +105,6 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
[selection]="selection"
[connectionID]="connectionID"
[isTestConnection]="currentConnectionIsTest"
[accessLevel]="currentConnectionAccessLevel"
[tableFolders]="tableFolders"
(openFilters)="openTableFilters($event)"
(removeFilter)="removeFilter($event)"
Expand Down
132 changes: 72 additions & 60 deletions frontend/src/app/components/dashboard/dashboard.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { SelectionModel } from '@angular/cdk/collections';
import { CommonModule } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Component, inject, OnDestroy, OnInit } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
Expand All @@ -17,6 +17,7 @@ import { ServerError } from 'src/app/models/alert';
import { CustomEvent, TableProperties } from 'src/app/models/table';
import { ConnectionSettingsUI, UiSettings } from 'src/app/models/ui-settings';
import { User } from 'src/app/models/user';
import { CedarPermissionService } from 'src/app/services/cedar-permission.service';
import { CompanyService } from 'src/app/services/company.service';
import { ConnectionsService } from 'src/app/services/connections.service';
import { TableRowService } from 'src/app/services/table-row.service';
Expand Down Expand Up @@ -112,7 +113,16 @@ export class DashboardComponent implements OnInit, OnDestroy {
public dialog: MatDialog,
private title: Title,
private angulartics2: Angulartics2,
) {}
) {
this.canEditConnection = this._permissions.canI(
'connection:edit',
'Connection',
this._connections.currentConnectionID,
);
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
}

private _permissions = inject(CedarPermissionService);
protected canEditConnection: ReturnType<CedarPermissionService['canI']>;

get currentConnectionAccessLevel() {
return this._connections.currentConnectionAccessLevel;
Expand Down Expand Up @@ -159,66 +169,68 @@ export class DashboardComponent implements OnInit, OnDestroy {
getData() {
console.log('getData');

this._tables.fetchTablesFolders(this.connectionID).subscribe((res) => {
const tables = res.find((item) => item.category_id === 'all-tables-kitten')?.tables || [];

this.tableFolders = res;

if (tables && tables.length === 0) {
this.noTablesError = true;
this.loading = false;
this.title.setTitle(`No tables | ${this._company.companyTabTitle || 'Rocketadmin'}`);
} else if (tables) {
this.formatTableNames();
this.route.paramMap
.pipe(
map((params: ParamMap) => {
let tableName = params.get('table-name');
if (tableName) {
this.selectedTableName = tableName;
this.setTable(tableName);
console.log('setTable from getData paramMap');
this.title.setTitle(
`${this.selectedTableDisplayName} table | ${this._company.companyTabTitle || 'Rocketadmin'}`,
);
this.selection.clear();
} else {
if (this.defaultTableToOpen) {
tableName = this.defaultTableToOpen;
this._tables.fetchTablesFolders(this.connectionID).subscribe(
(res) => {
const tables = res.find((item) => item.category_id === 'all-tables-kitten')?.tables || [];

this.tableFolders = res;

if (tables && tables.length === 0) {
this.noTablesError = true;
this.loading = false;
this.title.setTitle(`No tables | ${this._company.companyTabTitle || 'Rocketadmin'}`);
} else if (tables) {
this.formatTableNames();
this.route.paramMap
.pipe(
map((params: ParamMap) => {
let tableName = params.get('table-name');
if (tableName) {
this.selectedTableName = tableName;
this.setTable(tableName);
console.log('setTable from getData paramMap');
this.title.setTitle(
`${this.selectedTableDisplayName} table | ${this._company.companyTabTitle || 'Rocketadmin'}`,
);
this.selection.clear();
} else {
tableName = this.allTables[0]?.table;
if (this.defaultTableToOpen) {
tableName = this.defaultTableToOpen;
} else {
tableName = this.allTables[0]?.table;
}
this.router.navigate([`/dashboard/${this.connectionID}/${tableName}`], { replaceUrl: true });
this.selectedTableName = tableName;
}
this.router.navigate([`/dashboard/${this.connectionID}/${tableName}`], { replaceUrl: true });
this.selectedTableName = tableName;
}
}),
)
.subscribe();
this._tableRow.cast.subscribe((arg) => {
if (arg === 'delete row' && this.selectedTableName) {
this.setTable(this.selectedTableName);
console.log('setTable from getData _tableRow cast');
this.selection.clear();
}
});
this._tables.cast.subscribe((arg) => {
if ((arg === 'delete rows' || arg === 'import') && this.selectedTableName) {
this.setTable(this.selectedTableName);
console.log('setTable from getData _tables cast');
this.selection.clear();
}
if (arg === 'activate actions') {
this.selection.clear();
}
});
}
},
(err) => {
this.isServerError = true;
this.serverError = { abstract: err.error?.message || err.message, details: err.error?.originalMessage };
this.loading = false;
this.title.setTitle(`Error | ${this._company.companyTabTitle || 'Rocketadmin'}`);
});
}),
)
.subscribe();
this._tableRow.cast.subscribe((arg) => {
if (arg === 'delete row' && this.selectedTableName) {
this.setTable(this.selectedTableName);
console.log('setTable from getData _tableRow cast');
this.selection.clear();
}
});
this._tables.cast.subscribe((arg) => {
if ((arg === 'delete rows' || arg === 'import') && this.selectedTableName) {
this.setTable(this.selectedTableName);
console.log('setTable from getData _tables cast');
this.selection.clear();
}
if (arg === 'activate actions') {
this.selection.clear();
}
});
Comment on lines +183 to +223
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

getData() is accumulating subscriptions on every refresh.

Each successful fetch adds fresh subscriptions to route.paramMap, TableRowService.cast, and TablesService.cast. Because getData() is called again from the UI settings stream, those handlers start firing multiple times and none of them are torn down on destroy.

Based on learnings, frontend/**/*.component.ts: Use takeUntil pattern for memory leak prevention with proper subscription management.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/app/components/dashboard/dashboard.component.ts` around lines
184 - 224, getData() is re-subscribing to route.paramMap, this._tableRow.cast
and this._tables.cast each time it's called, leaking handlers; fix by
introducing a component-level destroy notifier (e.g., private destroy$ = new
Subject<void>()), pipe each subscription through takeUntil(this.destroy$) where
you subscribe to route.paramMap, this._tableRow.cast and this._tables.cast
inside getData(), and implement ngOnDestroy to call this.destroy$.next() and
this.destroy$.complete(); alternatively ensure those subscriptions are created
once (outside repeated getData() calls) and still use takeUntil to guarantee
teardown.

}
},
(err) => {
this.isServerError = true;
this.serverError = { abstract: err.error?.message || err.message, details: err.error?.originalMessage };
this.loading = false;
this.title.setTitle(`Error | ${this._company.companyTabTitle || 'Rocketadmin'}`);
},
);
}

formatTableNames() {
Expand Down
Loading
Loading