Merge pull request #966 from rocket-admin/upgrade-angular

Upgrade angular

Author: lyubov-voloshko

frontend/angular.json

@@ -130,24 +130,24 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "dissendium-v0:build"
+            "buildTarget": "dissendium-v0:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "dissendium-v0:build:production"
+              "buildTarget": "dissendium-v0:build:production"
             },
             "saas": {
-              "browserTarget": "dissendium-v0:build:saas"
+              "buildTarget": "dissendium-v0:build:saas"
             },
             "development": {
-              "browserTarget": "dissendium-v0:build:development"
+              "buildTarget": "dissendium-v0:build:development"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "dissendium-v0:build"
+            "buildTarget": "dissendium-v0:build"
           }
         },
         "test": {

frontend/package.json

@@ -14,68 +14,65 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~17.3.9",
-    "@angular/cdk": "~17.3.9",
-    "@angular/common": "~17.3.9",
-    "@angular/compiler": "~17.3.9",
-    "@angular/core": "~17.3.12",
-    "@angular/forms": "~17.3.9",
-    "@angular/material": "~17.3.9",
-    "@angular/platform-browser": "~17.3.9",
-    "@angular/platform-browser-dynamic": "~17.3.9",
-    "@angular/router": "~17.3.9",
+    "@angular/animations": "~19.0.4",
+    "@angular/cdk": "~19.0.3",
+    "@angular/common": "~19.0.4",
+    "@angular/compiler": "~19.0.4",
+    "@angular/core": "~19.0.4",
+    "@angular/forms": "~19.0.4",
+    "@angular/material": "~19.0.3",
+    "@angular/platform-browser": "~19.0.4",
+    "@angular/platform-browser-dynamic": "~19.0.4",
+    "@angular/router": "~19.0.4",
     "@brumeilde/ngx-theme": "^1.2.1",
-    "@jsonurl/jsonurl": "^1.1.7",
-    "@ngstack/code-editor": "^7.2.0",
-    "@sentry-internal/rrweb": "^2.16.0",
+    "@jsonurl/jsonurl": "^1.1.8",
+    "@ngstack/code-editor": "^9.0.0",
+    "@sentry-internal/rrweb": "^2.31.0",
     "@sentry/angular-ivy": "^7.116.0",
     "@sentry/tracing": "^7.116.0",
-    "@stripe/stripe-js": "^3.4.0",
+    "@stripe/stripe-js": "^5.3.0",
     "@types/google-one-tap": "^1.2.6",
-    "@types/lodash": "^4.17.4",
+    "@types/lodash": "^4.17.13",
     "@zxcvbn-ts/core": "^3.0.4",
     "@zxcvbn-ts/language-en": "^3.0.2",
     "amplitude-js": "^8.21.9",
-    "angular-password-strength-meter": "^11.0.0",
-    "angulartics2": "^13.0.0",
-    "date-fns": "^3.6.0",
+    "angular-password-strength-meter": "^12.0.0",
+    "angulartics2": "^14.1.0",
+    "date-fns": "^4.1.0",
     "ipaddr.js": "^2.2.0",
     "json5": "^2.2.3",
     "lodash": "^4.17.21",
     "ng-dynamic-component": "^10.7.0",
-    "ngx-cookie-service": "^17.1.0",
+    "ngx-cookie-service": "^19.0.0",
     "ngx-markdown": "^19.0.0",
-    "ngx-stripe": "^17.2.0",
+    "ngx-stripe": "^19.0.0",
     "pluralize": "^8.0.0",
     "postgres-interval": "^4.0.2",
     "private-ip": "^3.0.2",
-    "puppeteer": "^22.9.0",
-    "rxjs": "~7.8.1",
-    "tslib": "^2.6.2",
+    "puppeteer": "^23.10.4",
+    "rxjs": "^7.4.0",
+    "tslib": "^2.8.1",
     "validator": "^13.12.0",
-    "webpack-bundle-analyzer": "^4.10.2",
-    "zone.js": "~0.14.6"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~17.3.7",
-    "@angular/cli": "~17.3.7",
-    "@angular/compiler-cli": "~17.3.9",
-    "@angular/language-service": "~17.3.9",
+    "@angular-devkit/build-angular": "~19.0.5",
+    "@angular/cli": "~19.0.5",
+    "@angular/compiler-cli": "~19.0.4",
+    "@angular/language-service": "~19.0.4",
     "@sentry-internal/rrweb": "^2.16.0",
-    "@types/jasmine": "~5.1.4",
+    "@types/jasmine": "~5.1.5",
     "@types/jasminewd2": "~2.0.13",
-    "@types/node": "^20.12.12",
-    "codelyzer": "^6.0.2",
-    "jasmine-core": "~5.1.2",
+    "@types/node": "^22.10.2",
+    "jasmine-core": "~5.5.0",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.4.3",
+    "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage-istanbul-reporter": "~3.0.3",
+    "karma-coverage": "^2.2.1",
+    "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "protractor": "~7.0.0",
     "ts-node": "~10.9.2",
-    "tslint": "~6.1.3",
-    "typescript": "~5.4.5"
+    "typescript": "~5.6.0"
   }
 }

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

@@ -16,13 +16,12 @@ import { DbTableWidgetsComponent } from './components/dashboard/db-table-widgets
 import { EmailChangeComponent } from './components/email-change/email-change.component';
 import { EmailVerificationComponent } from './components/email-verification/email-verification.component';
 import { LoginComponent } from './components/login/login.component';
-import { NewVersionComponent } from './components/new-version/new-version.component';
 import { NgModule } from '@angular/core';
 import { PageLoaderComponent } from './components/page-loader/page-loader.component';
 import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
 import { PasswordChangeComponent } from './components/password-change/password-change.component';
 import { PasswordRequestComponent } from './components/password-request/password-request.component';
-import { PasswordResetComponent } from './components/password-reset/password-change.component';
+import { PasswordResetComponent } from './components/password-reset/password-reset.component';
 import { PaymentFormComponent } from './components/payment-form/payment-form.component';
 import { RegistrationComponent } from './components/registration/registration.component';
 import { UpgradeComponent } from './components/upgrade/upgrade.component';
@@ -41,7 +40,6 @@ 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: 'new-version', component: NewVersionComponent, title: 'New version | 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'},

frontend/src/app/app.component.css

@@ -55,19 +55,20 @@
 }
 
 .nav-bar__account-button ::ng-deep .mat-badge-content {
-    top: 6px;
-    right: 6px !important;
+    top: 14px;
+    left: 32px;
     color: var(--color-accentedPalette);
-    height: 8px !important;
-    width: 8px !important;
+    height: 7px !important;
+    width: 7px !important;
+    z-index: 1;
 }
 
 .nav-menu__list-link-icon ::ng-deep .mat-badge-content {
-    top: 0;
-    right: 0 !important;
+    top: 6px;
+    left: 26px;
     color: var(--color-accentedPalette);
-    height: 8px !important;
-    width: 8px !important;
+    height: 7px !important;
+    width: 7px !important;
 }
 
 .nav-bar__button_active {

frontend/src/app/app.component.html

@@ -45,7 +45,7 @@
                 <div matListItemTitle>Log out</div>
             </mat-list-item>
         </mat-nav-list>
-        <a mat-flat-button color="accent" *ngIf="isSaas" class="connection-navigation__upgrade-button" routerLink="/upgrade"
+        <a mat-flat-button color="accent" *ngIf="isSaas && currentUser && currentUser.role === 'ADMIN'" class="connection-navigation__upgrade-button" routerLink="/upgrade"
             routerLinkActive="nav-bar__button_active">
             Upgrade
         </a>
@@ -101,7 +101,7 @@
             </button>
 
             <div *ngIf="userLoggedIn === true" class="actions actions_auth">
-                <a routerLink="/upgrade" *ngIf="isSaas"
+                <a routerLink="/upgrade" *ngIf="isSaas && currentUser && currentUser.role === 'ADMIN'"
                     mat-flat-button color="accent"
                     data-testid="upgrade-header-link"
                     routerLinkActive="mat-accent" class="nav-bar__upgrade-button">

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

@@ -1,6 +1,5 @@
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 import { Angulartics2Module } from 'angulartics2';
 import { AppComponent } from './app.component';
@@ -9,6 +8,8 @@ import { ConnectionsService } from './services/connections.service';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatMenuModule } from '@angular/material/menu';
 import { RouterTestingModule } from '@angular/router/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { provideHttpClient } from '@angular/common/http';
 
 describe('AppComponent', () => {
   let app: AppComponent;
@@ -37,27 +38,20 @@ describe('AppComponent', () => {
     "externalRegistrationProvider": null
   }
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
-        HttpClientTestingModule,
         MatSnackBarModule,
         MatDialogModule,
         MatMenuModule,
-        Angulartics2Module.forRoot()
+        Angulartics2Module.forRoot(),
+        AppComponent,
+        BrowserAnimationsModule
       ],
-      // providers: [
-      //   {
-      //     provide: ConnectionsService,
-      //     useValue: fakeConnectionsSevice
-      //   }
-      // ]
+      providers: [provideHttpClient()]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AppComponent);

frontend/src/app/app.component.ts

@@ -16,6 +16,17 @@ import amplitude from 'amplitude-js';
 import { differenceInMilliseconds } from 'date-fns';
 import { environment } from '../environments/environment';
 import { normalizeTableName } from './lib/normalize';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { MatTabsModule } from '@angular/material/tabs';
 
 //@ts-ignore
 window.amplitude = amplitude;
@@ -24,7 +35,20 @@ amplitude.getInstance().init("9afd282be91f94da735c11418d5ff4f5");
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
+  imports: [
+    CommonModule,
+    RouterModule,
+    MatTabsModule,
+    MatSidenavModule,
+    MatToolbarModule,
+    MatListModule,
+    MatIconModule,
+    MatButtonModule,
+    MatBadgeModule,
+    MatMenuModule,
+    MatTooltipModule,
+  ],
 })
 
 export class AppComponent {