rocket-admin · lyubov-voloshko · Apr 13, 2025 · Apr 13, 2025
diff --git a/frontend/src/app/components/audit/audit.component.ts b/frontend/src/app/components/audit/audit.component.ts
@@ -1,9 +1,12 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
 import { AsyncPipe, NgClass, NgForOf, NgIf } from '@angular/common';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Subscription, merge } from 'rxjs';
+import { take, tap } from 'rxjs/operators';
 
 import { Angulartics2OnModule } from 'angulartics2';
 import { AuditDataSource } from './audit-data-source';
+import { BannerComponent } from '../ui-components/banner/banner.component';
+import { CompanyService } from 'src/app/services/company.service';
 import { ConnectionsService } from 'src/app/services/connections.service';
 import { FormsModule } from '@angular/forms';
 import { InfoDialogComponent } from './info-dialog/info-dialog.component';
@@ -15,6 +18,7 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
+import { PlaceholderTableDataComponent } from '../skeletons/placeholder-table-data/placeholder-table-data.component';
 import { RouterModule } from '@angular/router';
 import { ServerError } from 'src/app/models/alert';
 import { TableProperties } from 'src/app/models/table';
@@ -24,10 +28,6 @@ import { User } from '@sentry/angular-ivy';
 import { UsersService } from 'src/app/services/users.service';
 import { environment } from 'src/environments/environment';
 import { normalizeTableName } from 'src/app/lib/normalize';
-import { tap } from 'rxjs/operators';
-import { BannerComponent } from '../ui-components/banner/banner.component';
-import { PlaceholderTableDataComponent } from '../skeletons/placeholder-table-data/placeholder-table-data.component';
-import { CompanyService } from 'src/app/services/company.service';
 
 @Component({
   selector: 'app-audit',
@@ -90,11 +90,11 @@ export class AuditComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.getTitleSubscription = this._connections.getCurrentConnectionTitle().subscribe(connectionTitle => {
-      this.title.setTitle(`Audit - ${connectionTitle} | ${this._companyService.companyTabTitle || 'Rocketadmin'}`);
-
-      this.getTitleSubscription.unsubscribe();
-    });
+    this._companyService.getCurrentTabTitle()
+      .pipe(take(1))
+      .subscribe(tabTitle => {
+        this.title.setTitle(`Connections | ${tabTitle || 'Rocketadmin'}`);
+      });
     this.connectionID = this._connections.currentConnectionID;
     this.accesLevel = this._connections.currentConnectionAccessLevel;
     this.columns = ['Table', 'User', 'Action', 'Date', 'Status', 'Details'];

diff --git a/frontend/src/app/components/connect-db/connect-db.component.ts b/frontend/src/app/components/connect-db/connect-db.component.ts
@@ -4,11 +4,13 @@ import { Alert, AlertActionType, AlertType } from 'src/app/models/alert';
 import { Angulartics2, Angulartics2Module } from 'angulartics2';
 import { Component, NgZone, OnInit } from '@angular/core';
 import { Connection, ConnectionType, DBtype, TestConnection } from 'src/app/models/connection';
+import { Subscription, take } from 'rxjs';
 
 import { AccessLevel } from 'src/app/models/user';
 import { AlertComponent } from '../ui-components/alert/alert.component';
 import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
+import { CompanyService } from 'src/app/services/company.service';
 import { ConnectionsService } from 'src/app/services/connections.service';
 import { Db2CredentialsFormComponent } from './db-credentials-forms/db2-credentials-form/db2-credentials-form.component';
 import { DbConnectionConfirmDialogComponent } from './db-connection-confirm-dialog/db-connection-confirm-dialog.component';
@@ -36,13 +38,11 @@ import { OracledbCredentialsFormComponent } from './db-credentials-forms/oracled
 import { PostgresCredentialsFormComponent } from './db-credentials-forms/postgres-credentials-form/postgres-credentials-form.component';
 import { Router } from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { Subscription } from 'rxjs';
 import { Title } from '@angular/platform-browser';
 import { UserService } from 'src/app/services/user.service';
 import { environment } from 'src/environments/environment';
 import googlIPsList from 'src/app/consts/google-IP-addresses';
 import isIP from 'validator/lib/isIP';
-import { CompanyService } from 'src/app/services/company.service';
 
 @Component({
   selector: 'app-connect-db',
@@ -115,15 +115,15 @@ export class ConnectDBComponent implements OnInit {
   ngOnInit() {
     this.connectionID = this._connections.currentConnectionID;
 
-    this.getTitleSubscription = this._connections.getCurrentConnectionTitle().subscribe(connectionTitle => {
-      if (this.connectionID) {
-        this.title.setTitle(`Credentials — ${connectionTitle} | ${this._company.companyTabTitle || 'Rocketadmin'}`);
-      } else {
-        this.title.setTitle(`Add new database | ${this._company.companyTabTitle || 'Rocketadmin'}`);
-      }
-
-      this.getTitleSubscription.unsubscribe();
-    });
+    this._connections.getCurrentConnectionTitle()
+      .pipe(take(1))
+      .subscribe(connectionTitle => {
+        if (this.connectionID) {
+          this.title.setTitle(`Credentials — ${connectionTitle} | ${this._company.companyTabTitle || 'Rocketadmin'}`);
+        } else {
+          this.title.setTitle(`Add new database | ${this._company.companyTabTitle || 'Rocketadmin'}`);
+        }
+      });
 
     if (!this.connectionID) {
       this._user.sendUserAction('CONNECTION_CREATION_NOT_FINISHED').subscribe();

diff --git a/frontend/src/app/components/connection-settings/connection-settings.component.ts b/frontend/src/app/components/connection-settings/connection-settings.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
 
 import { AccessLevel } from 'src/app/models/user';
 import { Angulartics2Module, Angulartics2 } from 'angulartics2';
@@ -14,7 +14,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { RouterModule } from '@angular/router';
 import { ServerError } from 'src/app/models/alert';
-import { Subscription } from 'rxjs';
+import { Subscription, take } from 'rxjs';
 import { TableProperties } from 'src/app/models/table';
 import { TablesService } from 'src/app/services/tables.service';
 import { Title } from '@angular/platform-browser';
@@ -49,7 +49,7 @@ import { CompanyService } from 'src/app/services/company.service';
     ZapierComponent
   ]
 })
-export class ConnectionSettingsComponent implements OnInit, OnDestroy {
+export class ConnectionSettingsComponent implements OnInit {
 
   public isSaas = (environment as any).saas;
   public connectionID: string | null = null;
@@ -83,9 +83,11 @@ export class ConnectionSettingsComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit(): void {
-    this.getTitleSubscription = this._connections.getCurrentConnectionTitle().subscribe(connectionTitle => {
-      this.title.setTitle(`Settings - ${connectionTitle} | ${this._company.companyTabTitle || 'Rocketadmin'}`);
-    });
+    this._connections.getCurrentConnectionTitle()
+      .pipe(take(1))
+      .subscribe(connectionTitle => {
+        this.title.setTitle(`Settings - ${connectionTitle} | ${this._company.companyTabTitle || 'Rocketadmin'}`);
+      });
 
     this.connectionID = this._connections.currentConnectionID;
 
@@ -113,10 +115,6 @@ export class ConnectionSettingsComponent implements OnInit, OnDestroy {
       )
   }
 
-  ngOnDestroy() {
-    this.getTitleSubscription.unsubscribe();
-  }
-
   get connectionName() {
     return this._connections.currentConnection.title || this._connections.currentConnection.database;
   }

diff --git a/frontend/src/app/components/connections-list/connections-list.component.ts b/frontend/src/app/components/connections-list/connections-list.component.ts
@@ -12,12 +12,13 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { PlaceholderConnectionsComponent } from '../skeletons/placeholder-connections/placeholder-connections.component';
 import { RouterModule } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { Title } from '@angular/platform-browser';
 import { UiSettings } from 'src/app/models/ui-settings';
 import { UiSettingsService } from 'src/app/services/ui-settings.service';
 import { User } from 'src/app/models/user';
 import { UserService } from 'src/app/services/user.service';
-import { Title } from '@angular/platform-browser';
-import { Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
 
 @Component({
   selector: 'app-connections-list',
@@ -56,11 +57,11 @@ export class ConnectionsListComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
-    this.getTitleSubscription = this._companyService.getCurrentTabTitle().subscribe(tabTitle => {
-      this.title.setTitle(`Connections | ${tabTitle || 'Rocketadmin'}`);
-
-      this.getTitleSubscription.unsubscribe();
-    });
+    this._companyService.getCurrentTabTitle()
+      .pipe(take(1))
+      .subscribe(tabTitle => {
+        this.title.setTitle(`Connections | ${tabTitle || 'Rocketadmin'}`);
+      });
 
     this._userService.cast.subscribe(user => {
       this.currentUser = user;

diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts
@@ -2,16 +2,18 @@ import * as JSON5 from 'json5';
 
 import { ActivatedRoute, Router } from '@angular/router';
 import { Alert, AlertType, ServerError } from 'src/app/models/alert';
-import { Component, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { Component, NgZone, OnInit } from '@angular/core';
 import { CustomAction, CustomEvent, TableField, TableForeignKey, TablePermissions, Widget } from 'src/app/models/table';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatProgressSpinnerModule, MatSpinner } from '@angular/material/progress-spinner';
 import { UIwidgets, defaultTimestampValues, fieldTypes, timestampTypes } from 'src/app/consts/field-types';
 
 import { AlertComponent } from '../ui-components/alert/alert.component';
 import { BannerComponent } from '../ui-components/banner/banner.component';
 import { BbBulkActionConfirmationDialogComponent } from '../dashboard/db-bulk-action-confirmation-dialog/db-bulk-action-confirmation-dialog.component';
 import { BreadcrumbsComponent } from '../ui-components/breadcrumbs/breadcrumbs.component';
 import { CommonModule } from '@angular/common';
+import { CompanyService } from 'src/app/services/company.service';
 import { ConnectionsService } from 'src/app/services/connections.service';
 import { DBtype } from 'src/app/models/connection';
 import { DbActionLinkDialogComponent } from '../dashboard/db-action-link-dialog/db-action-link-dialog.component';
@@ -37,8 +39,6 @@ import { TablesService } from 'src/app/services/tables.service';
 import { Title } from '@angular/platform-browser';
 import { getTableTypes } from 'src/app/lib/setup-table-row-structure';
 import { normalizeTableName } from '../../lib/normalize';
-import { MatProgressSpinnerModule, MatSpinner } from '@angular/material/progress-spinner';
-import { CompanyService } from 'src/app/services/company.service';
 
 @Component({
   selector: 'app-db-table-row-edit',

diff --git a/frontend/src/app/components/users/users.component.ts b/frontend/src/app/components/users/users.component.ts
@@ -1,21 +1,22 @@
+import { CommonModule, NgClass, NgForOf, NgIf } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { GroupUser, User, UserGroup, UserGroupInfo } from 'src/app/models/user';
-import { Observable, Subscription, first, forkJoin, tap } from 'rxjs';
+import { MatAccordion, MatExpansionModule } from '@angular/material/expansion';
+import { Observable, Subscription, first, forkJoin, take, tap } from 'rxjs';
 
 import { Angulartics2 } from 'angulartics2';
 import { Angulartics2OnModule } from 'angulartics2';
+import { CompanyService } from 'src/app/services/company.service';
 import { Connection } from 'src/app/models/connection';
 import { ConnectionsService } from 'src/app/services/connections.service';
 import { GroupAddDialogComponent } from './group-add-dialog/group-add-dialog.component';
 import { GroupDeleteDialogComponent } from './group-delete-dialog/group-delete-dialog.component';
 import { GroupNameEditDialogComponent } from './group-name-edit-dialog/group-name-edit-dialog.component';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
-import { MatAccordion, MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { CommonModule, NgClass, NgForOf, NgIf } from '@angular/common';
 import { PermissionsAddDialogComponent } from './permissions-add-dialog/permissions-add-dialog.component';
 import { PlaceholderUserGroupComponent } from '../skeletons/placeholder-user-group/placeholder-user-group.component';
 import { PlaceholderUserGroupsComponent } from '../skeletons/placeholder-user-groups/placeholder-user-groups.component';
@@ -24,7 +25,6 @@ import { UserAddDialogComponent } from './user-add-dialog/user-add-dialog.compon
 import { UserDeleteDialogComponent } from './user-delete-dialog/user-delete-dialog.component';
 import { UserService } from 'src/app/services/user.service';
 import { UsersService } from '../../services/users.service';
-import { CompanyService } from 'src/app/services/company.service';
 import { differenceBy } from "lodash";
 
 @Component({
@@ -71,9 +71,11 @@ export class UsersComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
-    this.getTitleSubscription = this._connections.getCurrentConnectionTitle().subscribe(connectionTitle => {
-      this.title.setTitle(`User permissions - ${connectionTitle} | ${this._company.companyTabTitle || 'Rocketadmin'}`);
-    });
+    this._connections.getCurrentConnectionTitle()
+      .pipe(take(1))
+      .subscribe(connectionTitle => {
+        this.title.setTitle(`User permissions - ${connectionTitle} | ${this._company.companyTabTitle || 'Rocketadmin'}`);
+      });
     this.connectionID = this._connections.currentConnectionID;
     this.getUsersGroups();
 
@@ -108,7 +110,6 @@ export class UsersComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.getTitleSubscription.unsubscribe();
     this.usersSubscription.unsubscribe();
   }