Replace all DevExtreme dialogs with material (#65)

* First dialog in place

* Replace all DevExtreme dialogs with material

prdeploy-app/src/app/app.component.html

@@ -4,8 +4,3 @@
     <app-footer></app-footer>
   </app-side-nav-outer-toolbar>
 </ng-container>
-
-<div class="dialogs">
-  <nav-dialog></nav-dialog>
-  <status-dialog></status-dialog>
-</div>

prdeploy-app/src/app/app.component.ts

@@ -1,11 +1,5 @@
-import { AfterViewInit, Component, HostBinding, ViewChild } from '@angular/core';
-import {
-  ScreenService,
-  AppInfoService,
-  DialogComponent,
-  StatusDialogComponent,
-  DialogService
-} from './shared/services';
+import { Component, HostBinding } from '@angular/core';
+import { ScreenService, AppInfoService } from './shared/services';
 import { RouterOutlet } from '@angular/router';
 import { SideNavOuterToolbarComponent, FooterComponent } from './shared/components';
 
@@ -14,27 +8,17 @@ import { SideNavOuterToolbarComponent, FooterComponent } from './shared/componen
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   standalone: true,
-  imports: [RouterOutlet, SideNavOuterToolbarComponent, FooterComponent, DialogComponent, StatusDialogComponent]
+  imports: [RouterOutlet, SideNavOuterToolbarComponent, FooterComponent]
 })
-export class AppComponent implements AfterViewInit {
+export class AppComponent {
   @HostBinding('class') get getClass() {
     return Object.keys(this.screen.sizes)
       .filter(cl => this.screen.sizes[cl])
       .join(' ');
   }
 
-  @ViewChild(DialogComponent) dialogComponent: DialogComponent;
-  @ViewChild(StatusDialogComponent) statusDialogComponent: StatusDialogComponent;
-
   constructor(
     private screen: ScreenService,
-    public appInfo: AppInfoService,
-    private _dialogService: DialogService
+    public appInfo: AppInfoService
   ) {}
-
-  ngAfterViewInit() {
-    // TODO GBJ: We should be able to dynamically create these.
-    this._dialogService.dialogComponent = this.dialogComponent;
-    this._dialogService.statusDialogComponent = this.statusDialogComponent;
-  }
 }

prdeploy-app/src/app/deployments/add-pr-service-dialog/add-pr-service-dialog.component.html

@@ -1,14 +1,5 @@
-<dx-popup
-  [width]="500"
-  [height]="320"
-  [showTitle]="true"
-  title="Add Services to Pull Request"
-  [dragEnabled]="false"
-  [hideOnOutsideClick]="true"
-  [showCloseButton]="true"
-  container=".dx-viewport"
-  [(visible)]="visible"
-  (visibleChange)="onVisibleChange()">
+<h2 mat-dialog-title>Add Services to Pull Request</h2>
+<mat-dialog-content>
   <div class="form">
     <label class="pull-request-lbl">Pull Request</label>
     <dx-select-box
@@ -43,15 +34,15 @@
           (selectedItemsChange)="onSelectedServicesChange()"></dx-list>
       </div>
     </dx-drop-down-box>
-    <div class="dialog-actions">
-      <button mat-stroked-button color="primary" (click)="cancel()">Cancel</button>
-      <button
-        mat-flat-button
-        color="primary"
-        (click)="addServicesToPr()"
-        [disabled]="!selectedPullRequest || processing || !selectedServices?.length">
-        Add Services
-      </button>
-    </div>
   </div>
-</dx-popup>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-stroked-button color="primary" (click)="cancel()">Cancel</button>
+  <button
+    mat-flat-button
+    color="primary"
+    (click)="addServicesToPr()"
+    [disabled]="!selectedPullRequest || processing || !selectedServices?.length">
+    Add Services
+  </button>
+</mat-dialog-actions>

prdeploy-app/src/app/deployments/add-pr-service-dialog/add-pr-service-dialog.component.ts

@@ -1,10 +1,17 @@
-import { ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, DestroyRef, ViewChild } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
+import {
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle
+} from '@angular/material/dialog';
 import {
   DxDropDownBoxModule,
   DxListComponent,
   DxListModule,
-  DxPopupModule,
   DxSelectBoxComponent,
   DxSelectBoxModule
 } from 'devextreme-angular';
@@ -17,56 +24,58 @@ import {
   RepositoryServicesGQL
 } from 'src/app/shared/graphql';
 import { NotificationManager, RepoManager } from 'src/app/shared/managers';
+import { DialogResult } from 'src/app/shared/models';
 import { LoggingService } from 'src/app/shared/services';
 
 @Component({
   selector: 'app-add-pr-service-dialog',
   standalone: true,
-  imports: [DxPopupModule, DxSelectBoxModule, DxListModule, DxDropDownBoxModule, MatButtonModule],
+  imports: [
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose,
+    DxSelectBoxModule,
+    DxListModule,
+    DxDropDownBoxModule,
+    MatButtonModule
+  ],
   templateUrl: './add-pr-service-dialog.component.html',
   styleUrl: './add-pr-service-dialog.component.scss'
 })
 export class AddPrServiceDialogComponent {
   @ViewChild('selectPullRequest') selectPullRequestComponent: DxSelectBoxComponent;
   @ViewChild(DxListComponent, { static: false }) listView: DxListComponent;
 
-  private _visible = false;
-
-  get visible() {
-    return this._visible;
-  }
-
   selectedPullRequest: PullRequest;
   openPullRequests: CustomStore<PullRequest, number>;
   repositoryServices: string[];
   selectedServices: string[] = [];
   processing = false;
 
-  @Input()
-  set visible(value: boolean) {
-    this._visible = value;
-    this.clearFields();
-
-    if (this.visible) {
-      firstValueFrom(
-        this._repositoryServicesGQL.fetch({ input: { owner: this._repoManager.owner, repo: this._repoManager.repo } })
-      ).then(response => {
-        this.repositoryServices = response.data.repositoryServices;
-      });
-    }
-  }
-
-  @Output() visibleChange = new EventEmitter<boolean>();
-
   constructor(
     private _openPullRequestsGQL: OpenPullRequestsGQL,
     private _pullRequestAddServicesGQL: PullRequestAddServicesGQL,
     private _repositoryServicesGQL: RepositoryServicesGQL,
-    private _changeDetectorRef: ChangeDetectorRef,
+    private _destroyRef: DestroyRef,
     private _notificationManager: NotificationManager,
     private _repoManager: RepoManager,
+    private _dialogRef: MatDialogRef<AddPrServiceDialogComponent>,
     private _loggingService: LoggingService
   ) {
+    this._dialogRef
+      .afterOpened()
+      .pipe(takeUntilDestroyed(this._destroyRef))
+      .subscribe(() => {
+        this.clearFields();
+
+        firstValueFrom(
+          this._repositoryServicesGQL.fetch({ input: { owner: this._repoManager.owner, repo: this._repoManager.repo } })
+        ).then(response => {
+          this.repositoryServices = response.data.repositoryServices;
+        });
+      });
+
     this.openPullRequests = new CustomStore<PullRequest, number>({
       key: 'number',
       load: async options => {
@@ -104,18 +113,14 @@ export class AddPrServiceDialogComponent {
       );
 
       this._notificationManager.show(`Add services comment added, it may take a minute to update.`);
-      this.visible = false;
+      this._dialogRef.close(DialogResult.Save);
     } catch (error) {
       this._loggingService.error(error);
     }
 
     this.processing = false;
   }
 
-  onVisibleChange(): void {
-    this.visibleChange.emit(this.visible);
-  }
-
   onDropDownBoxValueChanged(): void {
     this.updateListSelection();
   }
@@ -135,8 +140,7 @@ export class AddPrServiceDialogComponent {
   }
 
   cancel(): void {
-    this.visible = false;
-    this._changeDetectorRef.detectChanges();
+    this._dialogRef.close(DialogResult.Cancel);
   }
 
   private clearFields() {
@@ -147,6 +151,5 @@ export class AddPrServiceDialogComponent {
     if (this.selectPullRequestComponent) {
       this.selectPullRequestComponent.value = null;
     }
-    this._changeDetectorRef.detectChanges();
   }
 }

prdeploy-app/src/app/deployments/deployments.component.html

@@ -50,5 +50,3 @@ <h3>
     Add Services to Pull Request
   </button>
 </div>
-
-<app-add-pr-service-dialog [(visible)]="addServiceToPrVisible"></app-add-pr-service-dialog>