Merge pull request #453 from LesWardwell/master_angular15

TFS 432694: Update Angular 15, Secrets Broker
OneIdentity · Oct 6, 2023 · e8f8733 · e8f8733
2 parents ec90ade + 13b7802
commit e8f8733
Show file tree

Hide file tree

Showing 40 changed files with 1,029 additions and 943 deletions.
diff --git a/SafeguardDevOpsService/ClientApp/.eslintrc.json b/SafeguardDevOpsService/ClientApp/.eslintrc.json
@@ -20,6 +20,7 @@
         "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
+      "plugins": ["rxjs"],
       "rules": {
         "@angular-eslint/component-selector": [
           "error",
@@ -97,7 +98,11 @@
         "prefer-const": "off",
         "prefer-arrow/prefer-arrow-functions": "off",
         "quote-props": "off",
-        "unused-imports/no-unused-imports": "warn"
+        "unused-imports/no-unused-imports": "warn",
+        "rxjs/prefer-observer": [
+          "error",
+          { "allowNext": false }
+        ]
       }
     },
     {

diff --git a/SafeguardDevOpsService/ClientApp/package.json b/SafeguardDevOpsService/ClientApp/package.json
@@ -11,35 +11,35 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~14.2.12",
-    "@angular/cdk": "^14.2.7",
-    "@angular/common": "~14.2.12",
-    "@angular/compiler": "~14.2.12",
-    "@angular/core": "~14.2.12",
-    "@angular/forms": "~14.2.12",
-    "@angular/material": "^14.2.7",
-    "@angular/platform-browser": "~14.2.12",
-    "@angular/platform-browser-dynamic": "~14.2.12",
-    "@angular/router": "~14.2.12",
+    "@angular/animations": "^15.2.9",
+    "@angular/cdk": "^15.2.9",
+    "@angular/common": "^15.2.9",
+    "@angular/compiler": "^15.2.9",
+    "@angular/core": "^15.2.9",
+    "@angular/forms": "^15.2.9",
+    "@angular/material": "^15.2.9",
+    "@angular/platform-browser": "^15.2.9",
+    "@angular/platform-browser-dynamic": "^15.2.9",
+    "@angular/router": "^15.2.9",
     "@ngneat/until-destroy": "^9.2.3",
     "@types/jquery": "^3.5.14",
     "file-saver": "^2.0.5",
     "jquery": "^3.6.0",
     "moment-timezone": "^0.5.38",
-    "rxjs": "~6.6.7",
+    "rxjs": "~7.5.7",
     "save": "^2.4.0",
     "tslib": "^2.3.1",
     "zone.js": "~0.11.8"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.10",
-    "@angular-eslint/builder": "~14.4.0",
-    "@angular-eslint/eslint-plugin": "~14.4.0",
-    "@angular-eslint/eslint-plugin-template": "~14.4.0",
-    "@angular-eslint/schematics": "~14.4.0",
-    "@angular-eslint/template-parser": "~14.4.0",
-    "@angular/cli": "~14.2.10",
-    "@angular/compiler-cli": "~14.2.12",
+    "@angular-devkit/build-angular": "^15.2.9",
+    "@angular-eslint/builder": "^15.2.1",
+    "@angular-eslint/eslint-plugin": "^15.2.1",
+    "@angular-eslint/eslint-plugin-template": "^15.2.1",
+    "@angular-eslint/schematics": "^15.2.1",
+    "@angular-eslint/template-parser": "^15.2.1",
+    "@angular/cli": "^15.2.9",
+    "@angular/compiler-cli": "^15.2.9",
     "@types/jasmine": "~4.0.2",
     "@types/jasminewd2": "~2.0.10",
     "@types/node": "^12.20.47",
@@ -51,6 +51,7 @@
     "eslint-plugin-jsdoc": "41.1.2",
     "eslint-plugin-prefer-arrow": "1.2.3",
     "eslint-plugin-unused-imports": "~2.0.0",
+    "eslint-plugin-rxjs": "5.0.3",
     "jasmine-core": "~4.0.1",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.3.17",

diff --git a/SafeguardDevOpsService/ClientApp/src/app/auth.service.ts b/SafeguardDevOpsService/ClientApp/src/app/auth.service.ts
@@ -30,11 +30,11 @@ export class AuthService {
         return of();
       }
       return this.getLoginResponse(applianceAddress, accessToken)
-        .pipe(tap((data) => {
+        .pipe(tap({ next: (data) => {
           if (data?.Status === 'Success') {
             this.window.sessionStorage.setItem('UserToken', data.UserToken);
           }
-        }));
+        } }));
     } else {
       this.window.sessionStorage.removeItem('AccessToken');
       return of({ Status: 'Success', UserToken: userToken });

diff --git a/SafeguardDevOpsService/ClientApp/src/app/confirm-dialog/confirm-dialog.component.html b/SafeguardDevOpsService/ClientApp/src/app/confirm-dialog/confirm-dialog.component.html
@@ -1,33 +1,42 @@
 <div mat-dialog-title>
    <div class='dialog-title-elements'>
       <div class='title-text'>{{title}}</div>
-      <div class='close-button'><button *ngIf='!showCancel' mat-icon-button class='link-button' mat-dialog-close
-            tabindex='-1'>
+      <div class='close-button'>
+         <button *ngIf='!showCancel' mat-icon-button class='link-button' mat-dialog-close tabindex='-1'>
             <mat-icon>close</mat-icon>
-         </button></div>
+         </button>
+      </div>
    </div>
 </div>
+
 <div class='dialog-content' mat-dialog-content>
    <div [innerHTML]="message"></div>
 </div>
-<mat-checkbox color="primary" *ngIf="showSecretsBrokerOnly" [(ngModel)]="secretsBrokerOnly">Reset Safeguard Secrets Broker for DevOps Only
-</mat-checkbox>
-<br/>
-<mat-checkbox color="primary" *ngIf="showRestart" [(ngModel)]="restart">Restart Safeguard Secrets Broker for DevOps Service
-</mat-checkbox>
-<mat-form-field *ngIf="showPassphrase && passwordHidden" appearance="outline">
-  <mat-label><span>Passphrase</span></mat-label>
-  <input matInput type="password" autocomplete='off' name="Passphrase" [(ngModel)]="passphrase" />
-  <mat-icon matSuffix (click)="passwordHidden = false" [matTooltip]="show">visibility</mat-icon>
-</mat-form-field>
-<mat-form-field *ngIf="showPassphrase && !passwordHidden" appearance="outline">
-  <mat-label><span>Passphrase</span></mat-label>
-  <input matInput autocomplete='off' name="Passphrase" [(ngModel)]="passphrase" />
-  <mat-icon matSuffix (click)="passwordHidden = true" [matTooltip]="hide">visibility_off</mat-icon>
-</mat-form-field>
+
+<div class="padding">
+   <mat-checkbox color="primary" *ngIf="showSecretsBrokerOnly" [(ngModel)]="secretsBrokerOnly">
+      Reset Safeguard Secrets Broker for DevOps Only
+   </mat-checkbox>
+   <br />
+   <mat-checkbox color="primary" *ngIf="showRestart" [(ngModel)]="restart">
+      Restart Safeguard Secrets Broker for DevOps Service
+   </mat-checkbox>
+
+   <mat-form-field *ngIf="showPassphrase && passwordHidden" appearance="outline">
+      <mat-label><span>Passphrase</span></mat-label>
+      <input matInput type="password" autocomplete='off' name="Passphrase" [(ngModel)]="passphrase" />
+      <mat-icon matSuffix (click)="passwordHidden = false" [matTooltip]="show">visibility</mat-icon>
+   </mat-form-field>
+
+   <mat-form-field *ngIf="showPassphrase && !passwordHidden" appearance="outline">
+      <mat-label><span>Passphrase</span></mat-label>
+      <input matInput autocomplete='off' name="Passphrase" [(ngModel)]="passphrase" />
+      <mat-icon matSuffix (click)="passwordHidden = true" [matTooltip]="hide">visibility_off</mat-icon>
+   </mat-form-field>
+</div>
 
 <div mat-dialog-actions align='end'>
    <button mat-button (click)="close()" cdkFocusInitial *ngIf="showCancel">Cancel</button>
    <button mat-button (click)="confirm(false)" *ngIf="showNo">No</button>
    <button mat-flat-button color='primary' (click)="confirm(true)">{{confirmText}}</button>
-</div>
+</div>
diff --git a/SafeguardDevOpsService/ClientApp/src/app/confirm-dialog/confirm-dialog.component.scss b/SafeguardDevOpsService/ClientApp/src/app/confirm-dialog/confirm-dialog.component.scss
@@ -4,3 +4,12 @@
   max-width: 600px;
   width: 400px;
 }
+
+.padding {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+mat-form-field {
+  width: 100%;
+}
diff --git a/SafeguardDevOpsService/ClientApp/src/app/create-csr/create-csr.component.html b/SafeguardDevOpsService/ClientApp/src/app/create-csr/create-csr.component.html
@@ -7,7 +7,7 @@
    </div>
 </div>
 
-<app-progress-spinner diameter="20" color="warn" message="Creating CSR" [visible]="creatingCSR"></app-progress-spinner>
+<app-progress-spinner diameter="16" color="warn" message="Creating CSR" [visible]="creatingCSR"></app-progress-spinner>
 
 <app-error-bar [error]='error' (dismissed)='this.error=null'></app-error-bar>
 
@@ -79,18 +79,18 @@ <h1>Distinguished Name Builder</h1>
             (keydown)="addSubjectAlt('name',$event)" (blur)="addSubjectAlt('name')" />
       </mat-form-field>
       <div class='subject-alt-chip-list' *ngIf='csr.DnsNames?.length'>
-         <mat-chip-list>
+         <mat-chip-listbox>
             <ng-container *ngFor='let altname of csr.DnsNames'>
-               <mat-chip (removed)='removeSubjectAlt("name",altname)'>
+               <mat-chip-option (removed)='removeSubjectAlt("name",altname)'>
                   {{altname}}
                   <mat-icon matChipRemove>cancel</mat-icon>
-               </mat-chip>
+               </mat-chip-option>
             </ng-container>
-            <mat-chip *ngIf='csr.DnsNames?.length > 1' (removed)='removeSubjectAlt("name","",true)'>
+            <mat-chip-option *ngIf='csr.DnsNames?.length > 1' (removed)='removeSubjectAlt("name","",true)'>
                Clear List
                <mat-icon matChipRemove>cancel</mat-icon>
-            </mat-chip>
-         </mat-chip-list>
+            </mat-chip-option>
+         </mat-chip-listbox>
       </div>
 
       <mat-form-field appearance="outline" class="text-with-chips">
@@ -99,18 +99,18 @@ <h1>Distinguished Name Builder</h1>
             (keydown)="addSubjectAlt('ip',$event)" (blur)="addSubjectAlt('ip')" />
       </mat-form-field>
       <div class='subject-alt-chip-list' *ngIf='csr.IpAddresses?.length'>
-         <mat-chip-list>
+         <mat-chip-listbox>
             <ng-container *ngFor='let altname of csr.IpAddresses'>
-               <mat-chip (removed)='removeSubjectAlt("ip",altname)'>
+               <mat-chip-option (removed)='removeSubjectAlt("ip",altname)'>
                   {{altname}}
                   <mat-icon matChipRemove>cancel</mat-icon>
-               </mat-chip>
+               </mat-chip-option>
             </ng-container>
-            <mat-chip *ngIf='csr.IpAddresses?.length > 1' (removed)='removeSubjectAlt("ip","",true)'>
+            <mat-chip-option *ngIf='csr.IpAddresses?.length > 1' (removed)='removeSubjectAlt("ip","",true)'>
                Clear List
                <mat-icon matChipRemove>cancel</mat-icon>
-            </mat-chip>
-         </mat-chip-list>
+            </mat-chip-option>
+         </mat-chip-listbox>
       </div>
 
       <mat-form-field appearance="outline">
@@ -126,7 +126,7 @@ <h1>Distinguished Name Builder</h1>
 
 <div *ngIf='!showDistinguishedNameBuilder'>
    <div mat-dialog-actions align="left" class='buttons'>
-      <button mat-button class="link-button" disableRipple (click)="goBack()" color="primary">&lt; &nbsp; Back</button>
+      <button mat-button class="link-button" (click)="goBack()" color="primary">&lt; &nbsp; Back</button>
    </div>
 
    <div mat-dialog-actions align="end" class='buttons'>

diff --git a/SafeguardDevOpsService/ClientApp/src/app/create-csr/create-csr.component.scss b/SafeguardDevOpsService/ClientApp/src/app/create-csr/create-csr.component.scss
@@ -5,6 +5,8 @@
   flex-direction: column;
   margin-top: 10px;
   min-width: 400px;
+  padding: 20px;
+  overflow: hidden;
 }
 
 .dn-builder-container {
@@ -38,7 +40,7 @@
   }
 }
 
-.mat-dialog-actions {
+.mat-mdc-dialog-actions {
   display: inline-block;
 
   &[align='end'] {
@@ -52,10 +54,12 @@
   }
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
 :host ::ng-deep .text-with-chips > .mat-form-field-wrapper {
   padding-bottom: 10px;
 }
 
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
 :host ::ng-deep .subject-entry > .mat-form-field-wrapper {
   padding-bottom: 0;
 }
@@ -64,7 +68,8 @@
   margin-bottom: 20px;
 }
 
-:host ::ng-deep .mat-form-field.short-height .mat-form-field-wrapper {
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+:host ::ng-deep .mat-mdc-form-field.short-height .mat-form-field-wrapper {
   padding-bottom: 0 !important;
 }
 
diff --git a/SafeguardDevOpsService/ClientApp/src/app/create-csr/create-csr.component.ts b/SafeguardDevOpsService/ClientApp/src/app/create-csr/create-csr.component.ts
@@ -298,8 +298,8 @@ export class CreateCsrComponent implements OnInit {
     this.creatingCSR = true;
     this.serviceClient
       .getCSR(csrType, this.subjectName, this.csr.DnsNames.join(','), this.csr.IpAddresses.join(','), this.keySize)
-      .subscribe(
-        (csr) => {
+      .subscribe({
+        next: (csr) => {
           this.csr.Text = csr;
           const saveModal = this.dialog.open(SaveCsrComponent,
             {
@@ -317,10 +317,10 @@ export class CreateCsrComponent implements OnInit {
               }
             });
         },
-        (error) => {
+        error: (error) => {
           this.error = error;
         }
-      )
+      })
       .add(() => { this.creatingCSR = false; });
   }