Merge pull request #4346 from Ombi-app/angular-upgrade

Angular upgrade

src/Ombi/ClientApp/package.json

@@ -9,28 +9,28 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^11.2.6",
-    "@angular/cdk": "^11.2.5",
-    "@angular/common": "^11.2.6",
-    "@angular/compiler": "^11.2.6",
-    "@angular/core": "^11.2.6",
-    "@angular/forms": "^11.2.6",
-    "@angular/localize": "^11.2.6",
-    "@angular/material": "^11.2.5",
-    "@angular/platform-browser": "^11.2.6",
-    "@angular/platform-browser-dynamic": "^11.2.6",
-    "@angular/platform-server": "^11.2.6",
-    "@angular/router": "^11.2.6",
-    "@angularclass/hmr": "^2.1.3",
+    "@angular/animations": "^12.2.10",
+    "@angular/cdk": "^12.2.9",
+    "@angular/common": "^12.2.10",
+    "@angular/compiler": "^12.2.10",
+    "@angular/core": "^12.2.10",
+    "@angular/forms": "^12.2.10",
+    "@angular/localize": "^12.2.10",
+    "@angular/material": "^12.2.9",
+    "@angular/platform-browser": "^12.2.10",
+    "@angular/platform-browser-dynamic": "^12.2.10",
+    "@angular/platform-server": "^12.2.10",
+    "@angular/router": "^12.2.10",
+    "@angularclass/hmr": "^3.0.0",
     "@aspnet/signalr": "^1.1.0",
-    "@auth0/angular-jwt": "^2.1.0",
-    "@fortawesome/fontawesome-free": "^5.15.3",
+    "@auth0/angular-jwt": "^5.0.2",
+    "@fortawesome/fontawesome-free": "^5.15.4",
     "@fullcalendar/core": "^4.2.0",
     "@fullcalendar/daygrid": "^4.4.0",
     "@fullcalendar/interaction": "^4.2.0",
-    "@ngu/carousel": "^1.4.9-beta-2",
-    "@ngx-translate/core": "^11.0.1",
-    "@ngx-translate/http-loader": "^4.0.0",
+    "@ngu/carousel": "^3.0.2",
+    "@ngx-translate/core": "^13.0.0",
+    "@ngx-translate/http-loader": "^6.0.0",
     "@types/jquery": "^3.3.29",
     "@yellowspot/ng-truncate": "^1.4.0",
     "angular-bootstrap-md": "^7.5.4",
@@ -42,18 +42,18 @@
     "eventemitter2": "^5.0.1",
     "fullcalendar": "^4.0.0-alpha.4",
     "jquery": "3.3.1",
-    "lodash": "^4.17.20",
-    "moment": "^2.23.0",
+    "lodash": "^4.17.21",
+    "moment": "^2.29.1",
     "ng2-cookies": "^1.0.12",
     "ngx-clipboard": "^12.1.0",
     "ngx-infinite-scroll": "^9.0.0",
     "ngx-moment": "^3.0.1",
-    "ngx-order-pipe": "^2.0.1",
+    "ngx-order-pipe": "^2.1.1",
     "please-wait": "^0.0.5",
     "popper.js": "^1.14.3",
-    "primeicons": "^4.0.0",
-    "primeng": "^11.3.1",
-    "rxjs": "^6.6.6",
+    "primeicons": "^4.1.0",
+    "primeng": "^12.2.0",
+    "rxjs": "^7.4.0",
     "sass-recursive-map-merge": "^1.0.1",
     "spinkit": "^1.2.5",
     "store": "^2.0.12",
@@ -63,18 +63,17 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1102.5",
-    "@angular/cli": "~11.2.5",
-    "@angular/compiler-cli": "^11.2.6",
-    "@angular/language-service": "^11.2.6",
+    "@angular-devkit/build-angular": "~12.2.10",
+    "@angular/cli": "~12.2.10",
+    "@angular/compiler-cli": "^12.2.10",
+    "@angular/language-service": "^12.2.10",
     "@types/jasmine": "~3.6.7",
     "@types/jasminewd2": "~2.0.8",
-    "@types/node": "^14.14.35",
+    "@types/node": "^16.10.9",
     "codelyzer": "^6.0.1",
-    "typescript": "~4.1.5"
+    "typescript": "~4.3.4"
   },
   "optionalDependencies": {
-    "node-sass": "^4.12.0",
     "protractor": "~5.4.0",
     "ts-node": "~5.0.1",
     "tslint": "^5.12.0"

src/Ombi/ClientApp/src/app/auth/unauthorized.interceptor.ts

@@ -1,8 +1,9 @@
-import { Injectable } from '@angular/core';
-import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse } from '@angular/common/http';
+import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
 import { Observable, Subject, throwError } from 'rxjs';
 import { catchError, throttleTime } from 'rxjs/operators';
+
 import { AuthService } from './auth.service';
+import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 
 @Injectable()
@@ -20,7 +21,7 @@ export class UnauthorizedInterceptor implements HttpInterceptor {
         return next.handle(request).pipe(
             catchError((response: HttpErrorResponse) => {
                 if (response.status === 401) {
-                    this.throttleLogout.next();
+                    this.throttleLogout.next(request.url);
                 }
                 return throwError(response);
             }

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html

@@ -57,7 +57,7 @@
         </div>
     </mat-sidenav>
 
-    <mat-sidenav-content class="content-container">
+    <mat-sidenav-content autosize class="content-container">
         <mat-toolbar color="primary" class="top-bar-container">
             <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
                 *ngIf="isHandset$ | async">

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss

@@ -151,6 +151,7 @@
     color:#FFF;
     font-family: 'Montserrat', sans-serif;
 
+
     .application-name{
         font-family: 'Montserrat', sans-serif;
         text-transform: uppercase;
@@ -207,6 +208,10 @@
     }
 }
 
+.sidenav {
+    width: 230px;
+}
+
 .outer-profile .profile-img-container {
     background: inherit;
 }
@@ -251,4 +256,10 @@
     ::ng-deep .dialog-responsive {
         width: 100%;
     }
+}
+@media only screen and (min-width: 1025px) {
+
+    .content-container{
+        margin-left: 223px !important;
+    }
 }

src/Ombi/ClientApp/src/index.html

@@ -11,12 +11,8 @@
     <base href="/" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
-    <link href="styles/please-wait.css" rel="stylesheet">
-    <link href="styles/spinkit.css" rel="stylesheet">
-    <link href="styles/11-folding-cube.css" rel="stylesheet">
     <link rel="icon" type="image/png" href="images/favicon/favicon.ico"/>
     <link rel="apple-touch-icon" type="image/png" href="images/favicon/apple-touch-icon.png"/>
-    <script src="styles/please-wait.js"></script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta property="og:image:height" content="375" />

tests/cypress/tests/01-wizard/01-wizard.spec.ts

@@ -22,15 +22,8 @@ describe("Wizard Setup", () => {
     // Verify we end back up on the user page
     Page.matStepsHeader.then((items) => {
 
-      const results = items.filter((index, html) => {
-        var attributes = Cypress.$(html).attr('ng-reflect-index');
-        return attributes === "2"; // 2nd index
-      }).get()[0];
+      cy.get('#cdk-step-label-0-2').should('have.attr', 'aria-selected', 'true');
 
-      console.log(results);
-
-      var attr = Cypress.$(results).attr('ng-reflect-selected');
-      assert.equal(attr, 'true');
     });
 
   });

tests/cypress/tests/user-preferences/user-preferences-profile.spec.ts

@@ -45,8 +45,6 @@ streamingCountries.forEach((country) => {
       Page.profile.streamingSelectBox.click();
       Page.profile.streamingSelectBoxOption(country).click();
 
-      Page.profile.streamingSelectBox.should('have.attr','ng-reflect-value', country);
-
       cy.wait('@countryApiSave').then((intercept) => {
         expect(intercept.request.body.code).equal(country);
       })

tests/cypress/tests/usermanagement/usermanagement.spec.ts

@@ -106,9 +106,9 @@ describe('User Management Page', () => {
       // Verify that the limits are set
       cy.get('#edituserToEdit').click();
       cy.contains('Request Limits').click();
-      cy.get('#movieRequestLimit').should('have.attr', 'ng-reflect-model', '2')
-      cy.get('#musicRequestLimit').should('have.attr', 'ng-reflect-model', '3')
-      cy.get('#episodeRequestLimit').should('have.attr', 'ng-reflect-model', '4')
+      cy.get('#movieRequestLimit').should('have.value', '2')
+      cy.get('#musicRequestLimit').should('have.value', '3')
+      cy.get('#episodeRequestLimit').should('have.value', '4')
 
     });
 
@@ -134,14 +134,14 @@ describe('User Management Page', () => {
       // Verify that the limits are set 
       cy.get('#edituserToEdit').click();
       cy.contains('Notification Preferences').click();
-      cy.get('#Discord').should('have.attr', 'ng-reflect-model', "Discord");
-      cy.get('#Pushbullet').should('have.attr', 'ng-reflect-model', "Pushbullet");
-      cy.get('#Pushover').should('have.attr', 'ng-reflect-model', "Pushover");
-      cy.get('#Telegram').should('have.attr', 'ng-reflect-model', "Telegram");
-      cy.get('#Slack').should('have.attr', 'ng-reflect-model', "Slack");
-      cy.get('#Mattermost').should('have.attr', 'ng-reflect-model', "Mattermost");
-      cy.get('#Gotify').should('have.attr', 'ng-reflect-model', "Gotify");
-      cy.get('#WhatsApp').should('have.attr', 'ng-reflect-model', "Whatsapp");
+      cy.get('#Discord').should('have.value', "Discord");
+      cy.get('#Pushbullet').should('have.value', "Pushbullet");
+      cy.get('#Pushover').should('have.value', "Pushover");
+      cy.get('#Telegram').should('have.value', "Telegram");
+      cy.get('#Slack').should('have.value', "Slack");
+      cy.get('#Mattermost').should('have.value', "Mattermost");
+      cy.get('#Gotify').should('have.value', "Gotify");
+      cy.get('#WhatsApp').should('have.value', "Whatsapp");
 
     });
 
@@ -158,6 +158,6 @@ describe('User Management Page', () => {
       cy.verifyNotification('successfully');
 
       cy.get('#edituserToEdit').click();
-      cy.get('#rolePowerUser').should('have.attr',  'ng-reflect-model', 'true');
+      cy.get('#rolePowerUser').should('have.class', 'mat-checked');
     });
   });