Merge pull request #1136 from rocket-admin/custom-favicon

Custom favicon

Author: lyubov-voloshko

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.html

@@ -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.spec.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/company/company.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/connect-db/connect-db.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;