Custom favicon

frontend/src/app/app-routing.module.ts

@@ -40,12 +40,12 @@ const routes: Routes = [
   {path: 'external/user/email/verify/:verification-token', component: EmailVerificationComponent, title: 'Email verification | Rocketadmin'},
   {path: 'external/user/email/change/verify/:change-token', component: EmailChangeComponent, title: 'Email updating | Rocketadmin'},
   {path: 'deleted', component: UserDeletedSuccessComponent, title: 'User deleted | Rocketadmin'},
-  {path: 'connect-db', component: ConnectDBComponent, canActivate: [AuthGuard], title: 'Add new database | Rocketadmin'},
-  {path: 'connections-list', component: ConnectionsListComponent, canActivate: [AuthGuard], title: 'Connections | Rocketadmin'},
-  {path: 'user-settings', component: UserSettingsComponent, canActivate: [AuthGuard], title: 'User settings | Rocketadmin'},
+  {path: 'connect-db', component: ConnectDBComponent, canActivate: [AuthGuard]},
+  {path: 'connections-list', component: ConnectionsListComponent, canActivate: [AuthGuard]},
+  {path: 'user-settings', component: UserSettingsComponent, canActivate: [AuthGuard]},
   // company routes have to be in this specific order
   {path: 'company/:company-id/verify/:verification-token', pathMatch: 'full', component: CompanyMemberInvitationComponent, title: 'Invitation | Rocketadmin'},
-  {path: 'company', pathMatch: 'full', component: CompanyComponent, title: 'Company settings | Rocketadmin', canActivate: [AuthGuard]},
+  {path: 'company', pathMatch: 'full', component: CompanyComponent, canActivate: [AuthGuard]},
   {path: 'change-password', component: PasswordChangeComponent, canActivate: [AuthGuard]},
   {path: 'upgrade', component: UpgradeComponent, canActivate: [AuthGuard], title: 'Upgrade | Rocketadmin'},
   {path: 'upgrade/payment', component: PaymentFormComponent, canActivate: [AuthGuard], title: 'Payment | Rocketadmin'},

frontend/src/app/app.component.spec.ts

@@ -244,6 +244,8 @@ describe('AppComponent', () => {
   });
 
   it('should handle user login flow when cast emits user with expires', fakeAsync(() => {
+    mockCompanyService.getWhiteLabelProperties.and.returnValue(of({logo: '', favicon: ''}));
+
     const expirationDate = new Date(Date.now() + 10_000); // 10s from now
     app['currentFeatureNotificationId'] = 'some-id';
 

frontend/src/app/app.component.ts

@@ -260,8 +260,6 @@ export class AppComponent {
             document.head.appendChild(favicon16);
             document.head.appendChild(favicon32);
           }
-
-          // this.whiteLabelSettingsLoaded = true;
         })
         this._uiSettings.getUiSettings().subscribe(settings => {
           this.isFeatureNotificationShown = (settings?.globalSettings?.lastFeatureNotificationId !== this.currentFeatureNotificationId)

frontend/src/app/components/audit/audit.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { AsyncPipe, NgClass, NgForOf, NgIf } from '@angular/common';
 import { Subscription, merge } from 'rxjs';
 
@@ -27,6 +27,7 @@ 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',
@@ -50,7 +51,7 @@ import { PlaceholderTableDataComponent } from '../skeletons/placeholder-table-da
   templateUrl: './audit.component.html',
   styleUrls: ['./audit.component.css']
 })
-export class AuditComponent implements OnInit, OnDestroy {
+export class AuditComponent implements OnInit {
   public isSaas = (environment as any).saas;
   public connectionID: string;
   public accesLevel: string;
@@ -73,6 +74,7 @@ export class AuditComponent implements OnInit, OnDestroy {
     private _connections: ConnectionsService,
     private _tables: TablesService,
     private _users: UsersService,
+    private _companyService: CompanyService,
     public dialog: MatDialog,
     private title: Title
   ) { }
@@ -89,7 +91,9 @@ export class AuditComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.getTitleSubscription = this._connections.getCurrentConnectionTitle().subscribe(connectionTitle => {
-      this.title.setTitle(`Audit - ${connectionTitle} | Rocketadmin`);
+      this.title.setTitle(`Audit - ${connectionTitle} | ${this._companyService.companyTabTitle || 'Rocketadmin'}`);
+
+      this.getTitleSubscription.unsubscribe();
     });
     this.connectionID = this._connections.currentConnectionID;
     this.accesLevel = this._connections.currentConnectionAccessLevel;
@@ -120,10 +124,6 @@ export class AuditComponent implements OnInit, OnDestroy {
       })
   }
 
-  ngOnDestroy() {
-    this.getTitleSubscription.unsubscribe();
-  }
-
   loadLogsPage() {
     this.dataSource.fetchLogs({
       connectionID: this.connectionID,

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

@@ -263,16 +263,22 @@
     position: relative;
 }
 
+.white-label-settings-images {
+    display: flex;
+    gap: 24px;
+    margin-top: 16px;
+    margin-bottom: 24px;
+}
+
 .upload-logo-form {
     display: flex;
     align-items: center;
     gap: 8px;
-    margin-top: 8px;
 }
 
 .white-label-preview {
     height: auto;
-    margin-top: 20px;
+    margin-top: 8px;
     width: 100%;
 }
 

frontend/src/app/components/company/company.component.spec.ts

@@ -113,6 +113,7 @@ describe('CompanyComponent', () => {
   fakeCompanyService.getCustomDomain.and.returnValue(of(mockCompanyDomain));
   fakeCompanyService.updateCompanyName.and.returnValue(of({}));
   fakeCompanyService.updateCompanyMemberRole.and.returnValue(of({}));
+  fakeCompanyService.getCurrentTabTitle = jasmine.createSpy().and.returnValue(of('Rocketadmin'));
   fakeUserService.cast = of(mockMembers[1]);
 
   beforeEach(async () => {

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

@@ -26,6 +26,8 @@ import { PlaceholderTableDataComponent } from '../skeletons/placeholder-table-da
 import { NgIf } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { DeleteDomainDialogComponent } from './delete-domain-dialog/delete-domain-dialog.component';
+import { Title } from '@angular/platform-browser';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-company',
@@ -68,11 +70,11 @@ export class CompanyComponent {
   public companyCustomDomain: {
     id: string,
     companyId: string,
-    hostname: string
+    hostname: string,
   } = {
     id: null,
     companyId: '',
-    hostname: ''
+    hostname: '',
   };
 
   public companyCustomDomainHostname: string;
@@ -84,17 +86,21 @@ export class CompanyComponent {
   public submittingLogo: boolean = false;
   public submittingFavicon: boolean = false;
 
-  get whiteLabelSettings(): {logo: string, favicon: string} {
-    return this._company.whiteLabelSettings || { logo: '', favicon: '' };
+  public companyTabTitle: string;
+  public submittingTabTitle: boolean = false;
+
+  get whiteLabelSettings(): {logo: string, favicon: string, tabTitle: string} {
+    return this._company.whiteLabelSettings || { logo: '', favicon: '', tabTitle	: '' };
   }
 
+  private getTitleSubscription: Subscription;
+
   constructor(
     public _company: CompanyService,
     public _user: UserService,
-    // private _notifications: NotificationsService,
     public dialog: MatDialog,
     private angulartics2: Angulartics2,
-    // private title: Title
+    private title: Title
   ) { }
 
   ngOnInit() {
@@ -103,6 +109,11 @@ export class CompanyComponent {
       this.isCustomDomain = true;
     }
 
+    this.getTitleSubscription = this._company.getCurrentTabTitle().subscribe(title => {
+      this.companyTabTitle = title;
+      this.title.setTitle(`Company settings | ${title || 'Rocketadmin'}`);
+    });
+
     this._company.fetchCompany().subscribe(res => {
       this.company = res;
       this.setCompanyPlan(res.subscriptionLevel);
@@ -127,14 +138,19 @@ export class CompanyComponent {
         this.getCompanyMembers(this.company.id);
       } else if (arg === 'domain') {
         this.getCompanyCustomDomain(this.company.id);
-      }
-      else if (arg === 'updated-white-label-settings') {
+      } else if (arg === 'updated-white-label-settings') {
         // this.submittingLogo = true;
         this._company.getWhiteLabelProperties(this.company.id).subscribe();
-      };
+      }
     });
   }
 
+  ngOnDestroy() {
+    if (this.getTitleSubscription) {
+      this.getTitleSubscription.unsubscribe();
+    }
+  }
+
   getCompanyMembers(companyId: string) {
     this._company.fetchCompanyMembers(companyId).subscribe(res => {
       if (this.company.invitations) {
@@ -372,4 +388,26 @@ export class CompanyComponent {
       this.submittingFavicon = false;
     });
   }
+
+  updateTabTitle() {
+    this.submittingTabTitle = true;
+    this._company.updateTabTitle(this.company.id, this.companyTabTitle).subscribe(() => {
+      this.submittingTabTitle = false;
+      this.angulartics2.eventTrack.next({
+        action: 'Company: tab title is updated successfully',
+      });
+    }, err => {
+      this.submittingTabTitle = false;
+    });
+  }
+
+  deleteTabTitle() {
+    this.submittingTabTitle = true;
+    this._company.removeTabTitle(this.company.id).subscribe(() => {
+      this.submittingTabTitle = false;
+      this.angulartics2.eventTrack.next({
+        action: 'Company: tab title is deleted successfully',
+      });
+    });
+  }
 }

frontend/src/app/components/connect-db/connect-db.component.ts

@@ -2,7 +2,7 @@ import * as ipaddr from 'ipaddr.js';
 
 import { Alert, AlertActionType, AlertType } from 'src/app/models/alert';
 import { Angulartics2, Angulartics2Module } from 'angulartics2';
-import { Component, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { Component, NgZone, OnInit } from '@angular/core';
 import { Connection, ConnectionType, DBtype, TestConnection } from 'src/app/models/connection';
 
 import { AccessLevel } from 'src/app/models/user';
@@ -42,6 +42,7 @@ 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',
@@ -73,7 +74,7 @@ import isIP from 'validator/lib/isIP';
     Angulartics2Module
   ]
 })
-export class ConnectDBComponent implements OnInit, OnDestroy {
+export class ConnectDBComponent implements OnInit {
 
   public isSaas = (environment as any).saas;
   public connectionID: string | null = null;
@@ -103,6 +104,7 @@ export class ConnectDBComponent implements OnInit, OnDestroy {
     private _connections: ConnectionsService,
     private _notifications: NotificationsService,
     public _user: UserService,
+    private _company: CompanyService,
     private ngZone: NgZone,
     public router: Router,
     public dialog: MatDialog,
@@ -113,8 +115,14 @@ export class ConnectDBComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.connectionID = this._connections.currentConnectionID;
 
-    if (this.connectionID) this.getTitleSubscription = this._connections.getCurrentConnectionTitle().subscribe(connectionTitle => {
-      this.title.setTitle(`Edit connection ${connectionTitle} | Rocketadmin`);
+    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();
     });
 
     if (!this.connectionID) {
@@ -126,10 +134,6 @@ export class ConnectDBComponent implements OnInit, OnDestroy {
     };
   }
 
-  ngOnDestroy() {
-    if (this.connectionID && !this.connectionToken) this.getTitleSubscription.unsubscribe();
-  }
-
   get db():Connection {
     return this._connections.currentConnection;
   }

frontend/src/app/components/connection-settings/connection-settings.component.ts

@@ -25,6 +25,7 @@ import { PlaceholderConnectionSettingsComponent } from '../skeletons/placeholder
 import { AlertComponent } from '../ui-components/alert/alert.component';
 import { ZapierComponent } from './zapier/zapier.component';
 import { MatTabsModule } from '@angular/material/tabs';
+import { CompanyService } from 'src/app/services/company.service';
 
 @Component({
   selector: 'app-connection-settings',
@@ -76,13 +77,14 @@ export class ConnectionSettingsComponent implements OnInit, OnDestroy {
   constructor(
     private _connections: ConnectionsService,
     private _tables: TablesService,
+    private _company: CompanyService,
     private title: Title,
     @Inject(Angulartics2) private angulartics2: Angulartics2
   ) { }
 
   ngOnInit(): void {
     this.getTitleSubscription = this._connections.getCurrentConnectionTitle().subscribe(connectionTitle => {
-      this.title.setTitle(`Settings - ${connectionTitle} | Rocketadmin`);
+      this.title.setTitle(`Settings - ${connectionTitle} | ${this._company.companyTabTitle || 'Rocketadmin'}`);
     });
 
     this.connectionID = this._connections.currentConnectionID;

frontend/src/app/components/connections-list/connections-list.component.ts

@@ -16,6 +16,8 @@ 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';
 
 @Component({
   selector: 'app-connections-list',
@@ -42,15 +44,24 @@ export class ConnectionsListComponent implements OnInit {
   public companyName: string;
   public currentUser: User;
 
+  private getTitleSubscription: Subscription;
+
   constructor(
     private _connectionsServise: ConnectionsService,
     public deleteDialog: MatDialog,
     private _userService: UserService,
     private _companyService: CompanyService,
     private _uiSettings: UiSettingsService,
+    private title: Title
   ) { }
 
   ngOnInit(): void {
+    this.getTitleSubscription = this._companyService.getCurrentTabTitle().subscribe(tabTitle => {
+      this.title.setTitle(`Connections | ${tabTitle || 'Rocketadmin'}`);
+
+      this.getTitleSubscription.unsubscribe();
+    });
+
     this._userService.cast.subscribe(user => {
       this.currentUser = user;
       user.id && this._companyService.fetchCompanyName(user.company.id)

frontend/src/app/components/dashboard/dashboard.component.ts

@@ -39,6 +39,7 @@ import { environment } from 'src/environments/environment';
 import { getComparatorsFromUrl } from 'src/app/lib/parse-filter-params';
 import { normalizeTableName } from '../../lib/normalize'
 import { omitBy } from "lodash";
+import { CompanyService } from 'src/app/services/company.service';
 
 interface DataToActivateActions {
   action: CustomEvent,
@@ -107,6 +108,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
     private _tableRow: TableRowService,
     private _uiSettings: UiSettingsService,
     private _tableState: TableStateService,
+    private _company: CompanyService,
     public router: Router,
     private route: ActivatedRoute,
     public dialog: MatDialog,
@@ -163,7 +165,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
     } catch(err) {
       this.loading = false;
       this.isServerError = true;
-      this.title.setTitle('Dashboard | Rocketadmin');
+      this.title.setTitle(`Dashboard | ${this._company.companyTabTitle || 'Rocketadmin'}`);
 
       if (err instanceof HttpErrorResponse) {
         this.serverError = {abstract: err.error.message || err.message, details: err.error.originalMessage};
@@ -173,7 +175,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
     if (tables && tables.length === 0) {
       this.noTablesError = true;
       this.loading = false;
-      this.title.setTitle('No tables | Rocketadmin');
+      this.title.setTitle(`No tables | ${this._company.companyTabTitle || 'Rocketadmin'}`);
     } else if (tables) {
       this.formatTableNames(tables);
       this.route.paramMap
@@ -183,7 +185,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
             if (tableName) {
               this.selectedTableName = tableName;
               this.setTable(tableName);
-              this.title.setTitle(`${this.selectedTableDisplayName} table | Rocketadmin`);
+              this.title.setTitle(`${this.selectedTableDisplayName} table | ${this._company.companyTabTitle || 'Rocketadmin'}`);
               this.selection.clear();
             } else {
               if (this.defaultTableToOpen) {