remove legacy dialog usage and fix conflicting dependencies (#1684)

* remove legacy dialog usage

* updated more styles related to dialog

* updating more modal styles

* using mixin for legacy dialog styles

src/interface/src/app/account/delete-account-dialog/delete-account-dialog.component.scss

@@ -1,3 +1,9 @@
+@import "mixins";
+
+:host {
+  @include legacy-dialog-margin();
+}
+
 .delete-account-dialog {
   align-items: center;
   display: flex;

src/interface/src/app/account/delete-account-dialog/delete-account-dialog.component.spec.ts

@@ -3,17 +3,18 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatLegacyButtonHarness as MatButtonHarness } from '@angular/material/legacy-button/testing';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialog as MatDialog,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
+
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
 import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { AuthService } from '@services';
 
 import { DeleteAccountDialogComponent } from './delete-account-dialog.component';
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogRef,
+} from '@angular/material/dialog';
 
 describe('DeleteAccountDialogComponent', () => {
   let component: DeleteAccountDialogComponent;

src/interface/src/app/account/delete-account-dialog/delete-account-dialog.component.ts

@@ -1,11 +1,9 @@
 import { Component, Inject } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
+
 import { AuthService } from '@services';
 import { User } from '@types';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-delete-account-dialog',

src/interface/src/app/account/delete-account/delete-account.component.spec.ts

@@ -2,10 +2,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DeleteAccountComponent } from './delete-account.component';
 import { LegacyMaterialModule } from '../../material/legacy-material.module';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+
 import { MockProvider } from 'ng-mocks';
 import { AuthService } from '@services';
 import { Router } from '@angular/router';
+import { MatDialogModule } from '@angular/material/dialog';
 
 describe('DeleteAccountComponent', () => {
   let component: DeleteAccountComponent;

src/interface/src/app/account/delete-account/delete-account.component.ts

@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 import { AuthService } from '@services';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { Router } from '@angular/router';
 import { DeleteAccountDialogComponent } from '../delete-account-dialog/delete-account-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-delete-account',

src/interface/src/app/app.module.ts

@@ -23,7 +23,6 @@ import { FeaturesModule } from './features/features.module';
 import { HomeComponent } from './home/home.component';
 import { JwtInterceptor, WINDOW_PROVIDERS } from '@services';
 import { MapModule } from './map/map.module';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 
 import { LegacyMaterialModule } from './material/legacy-material.module';
 
@@ -37,6 +36,7 @@ import { environment } from 'src/environments/environment';
 import { DeleteDialogComponent } from './standalone/delete-dialog/delete-dialog.component';
 import { LegacyPlanningAreasComponent } from './home/legacy-planning-areas/legacy-planning-areas.component';
 import { PlanningAreasComponent } from './standalone/planning-areas/planning-areas.component';
+import { MatDialogModule } from '@angular/material/dialog';
 
 @NgModule({
   declarations: [

src/interface/src/app/home/plan-table/plan-table.component.spec.ts

@@ -6,13 +6,14 @@ import { DeleteDialogComponent } from '../../standalone/delete-dialog/delete-dia
 import { FeaturesModule } from '../../features/features.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MOCK_PLAN } from '@services/mocks';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+
 import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { MockComponent } from 'ng-mocks';
 import { Plan } from '@types';
 import { PlanTableComponent } from './plan-table.component';
 import { Router } from '@angular/router';
 import { SectionLoaderComponent } from '@shared';
+import { MatDialog } from '@angular/material/dialog';
 
 describe('PlanTableComponent', () => {
   const fakePlan1: Plan = MOCK_PLAN;

src/interface/src/app/home/plan-table/plan-table.component.ts

@@ -1,8 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import {
-  MatLegacyDialog as MatDialog,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
+
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { MatSort } from '@angular/material/sort';
 import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
@@ -19,6 +16,7 @@ import {
 } from '../../plan/permissions';
 import { Plan, PreviewPlan } from '@types';
 import { DeleteDialogComponent } from '../../standalone/delete-dialog/delete-dialog.component';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-plan-table',

src/interface/src/app/home/share-plan-dialog/share-plan-dialog.component.spec.ts

@@ -3,16 +3,14 @@ import { SharePlanDialogComponent } from './share-plan-dialog.component';
 import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { MockComponents, MockProvider } from 'ng-mocks';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
+
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { AuthService, InvitesService, PlanStateService } from '@services';
 import { BehaviorSubject, NEVER, of } from 'rxjs';
 import { User } from '@types';
 import { ChipInputComponent } from '../chip-input/chip-input.component';
 import { SectionLoaderComponent } from '@shared';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 describe('SharePlanDialogComponent', () => {
   let component: SharePlanDialogComponent;

src/interface/src/app/home/share-plan-dialog/share-plan-dialog.component.ts

@@ -1,13 +1,11 @@
 import { Component, Inject } from '@angular/core';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
+
 import { FormMessageType, Invite, INVITE_ROLE, User } from '@types';
 import { SNACK_BOTTOM_NOTICE_CONFIG } from '@shared';
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { AuthService, InvitesService, PlanStateService } from '@services';
 import { filter, map, shareReplay, switchMap, tap } from 'rxjs';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 const Roles: Record<INVITE_ROLE, INVITE_ROLE> = {
   Viewer: 'Viewer',

src/interface/src/app/map/invalid-link-dialog/invalid-link-dialog.component.scss

@@ -2,6 +2,7 @@
 @import "colors";
 
 :host {
+  @include legacy-dialog-margin();
   display: block;
   max-width: 535px;
 }

src/interface/src/app/map/invalid-link-dialog/invalid-link-dialog.component.spec.ts

@@ -1,8 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { InvalidLinkDialogComponent } from './invalid-link-dialog.component';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 import { LegacyMaterialModule } from '../../material/legacy-material.module';
+import { MatDialogRef } from '@angular/material/dialog';
 
 describe('InvalidLinkDialogComponent', () => {
   let component: InvalidLinkDialogComponent;

src/interface/src/app/map/invalid-link-dialog/invalid-link-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-invalid-link-dialog',

src/interface/src/app/map/map.component.spec.ts

@@ -11,10 +11,7 @@ import {
 } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { MatLegacyButtonHarness as MatButtonHarness } from '@angular/material/legacy-button/testing';
-import {
-  MatLegacyDialog as MatDialog,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
+
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ActivatedRoute, Router } from '@angular/router';
 import { featureCollection, point } from '@turf/helpers';
@@ -57,6 +54,7 @@ import {
 import * as esri from 'esri-leaflet';
 import { MockProvider } from 'ng-mocks';
 import { MOCK_FEATURE_COLLECTION, MOCK_PLAN } from '@services/mocks';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 
 describe('MapComponent', () => {
   let component: MapComponent;

src/interface/src/app/map/map.component.ts

@@ -15,7 +15,7 @@ import {
   OnInit,
 } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Feature, FeatureCollection, Geometry } from 'geojson';
@@ -78,6 +78,7 @@ import { getPlanPath } from '../plan/plan-helpers';
 import { InvalidLinkDialogComponent } from './invalid-link-dialog/invalid-link-dialog.component';
 import { Location } from '@angular/common';
 import { HomeParametersStorageService } from '@services/local-storage.service';
+import { MatDialog } from '@angular/material/dialog';
 
 @UntilDestroy()
 @Component({

src/interface/src/app/map/outside-region-dialog/outside-region-dialog.component.scss

@@ -0,0 +1,5 @@
+@import "mixins";
+
+:host {
+  @include legacy-dialog-margin();
+}

src/interface/src/app/map/outside-region-dialog/outside-region-dialog.component.spec.ts

@@ -5,7 +5,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { LegacyMaterialModule } from '../../material/legacy-material.module';
 import { DialogModule } from '@angular/cdk/dialog';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 
 describe('OutsideRegionDialogComponent', () => {
   let component: OutsideRegionDialogComponent;

src/interface/src/app/map/outside-region-dialog/outside-region-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-outside-region-dialog',

src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.html

@@ -1,4 +1,4 @@
-<h3 mat-dialog-title>Name your plan</h3>
+<h3 mat-dialog-title class="title">Name your plan</h3>
 <form [formGroup]="planForm" (ngSubmit)="submit()">
   <mat-dialog-content>
     <div class="info">

src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.scss

@@ -1,3 +1,7 @@
+:host {
+  display: block;
+}
+
 mat-form-field {
   min-width: 480px;
 }
@@ -18,3 +22,11 @@ mat-form-field {
 mat-icon {
   flex-shrink: 0;
 }
+
+.title {
+  margin: 24px 24px 0;
+}
+
+mat-dialog-actions {
+  padding: 0 24px 16px;
+}

src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.spec.ts

@@ -5,10 +5,6 @@ import {
   TestBed,
   tick,
 } from '@angular/core/testing';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
 
 import {
   PlanCreateDialogComponent,
@@ -23,6 +19,7 @@ import { DialogModule } from '@angular/cdk/dialog';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Region, regionToString } from '@types';
 import { Geometry } from 'geojson';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 describe('PlanCreateDialogComponent', () => {
   let component: PlanCreateDialogComponent;

src/interface/src/app/map/plan-create-dialog/plan-create-dialog.component.ts

@@ -1,7 +1,3 @@
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Component, Inject } from '@angular/core';
 import { PlanService, SessionService } from '@services';
@@ -11,6 +7,7 @@ import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack
 import { Region, regionToString } from '@types';
 import { isValidTotalArea } from '../../plan/plan-helpers';
 import { Geometry } from 'geojson';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 export interface PlanCreateDialogData {
   shape: Geometry;

src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.html

@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>Sign in or create an account to continue</h1>
+<h3 mat-dialog-title>Sign in or create an account to continue</h3>
 
 <div mat-dialog-content>
   <p>You must be signed in to save plans and collaborate with others.</p>

src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.scss

@@ -0,0 +1,9 @@
+@import "mixins";
+
+:host {
+  @include legacy-dialog-margin();
+}
+
+.mdc-dialog__content {
+  padding: 0 0 32px;
+}

src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 
 import { SignInDialogComponent } from './sign-in-dialog.component';
+import { MatDialogRef } from '@angular/material/dialog';
 
 describe('SignInCardComponent', () => {
   let component: SignInDialogComponent;

src/interface/src/app/map/sign-in-dialog/sign-in-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-sign-in-dialog',

src/interface/src/app/material/legacy-material.module.ts

@@ -3,7 +3,7 @@ import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/lega
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+
 import { MatDividerModule } from '@angular/material/divider';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
@@ -27,6 +27,7 @@ import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-t
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { MatTreeModule } from '@angular/material/tree';
+import { MatDialogModule } from '@angular/material/dialog';
 
 @NgModule({
   exports: [

src/interface/src/app/plan/area-notes/area-notes.component.spec.ts

@@ -1,11 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AuthService, PlanNotesService } from '@services';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+
 import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 
 import { AreaNotesComponent } from './area-notes.component';
 import { MockProvider } from 'ng-mocks';
 import { of } from 'rxjs';
+import { MatDialogModule } from '@angular/material/dialog';
 
 describe('AreaNotesComponent', () => {
   let component: AreaNotesComponent;

src/interface/src/app/plan/area-notes/area-notes.component.ts

@@ -1,11 +1,12 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { DeleteNoteDialogComponent } from '../delete-note-dialog/delete-note-dialog.component';
 import { take } from 'rxjs';
 import { Plan } from '@types';
 import { AuthService, Note, PlanNotesService } from '@services';
 import { SNACK_ERROR_CONFIG, SNACK_NOTICE_CONFIG } from '@shared';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-area-notes',

src/interface/src/app/plan/delete-note-dialog/delete-note-dialog.component.spec.ts

@@ -1,9 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { DeleteNoteDialogComponent } from './delete-note-dialog.component';
-import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialogRef as MatDialogRef,
-} from '@angular/material/legacy-dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 describe('DeleteNoteDialogComponent', () => {
   let component: DeleteNoteDialogComponent;