fix(dialog): added dialog wrapper and replaced all places

src/app/app.component.ts

@@ -1,9 +1,5 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
-import { TranslateService } from '@ngx-translate/core';
-
-import { DialogService } from 'primeng/dynamicdialog';
-
 import { filter } from 'rxjs';
 
 import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, OnInit } from '@angular/core';
@@ -14,6 +10,7 @@ import { ENVIRONMENT } from '@core/provider/environment.provider';
 import { GetCurrentUser } from '@core/store/user';
 import { GetEmails, UserEmailsSelectors } from '@core/store/user-emails';
 import { ConfirmEmailComponent } from '@shared/components';
+import { CustomDialogService } from '@shared/services';
 
 import { FullScreenLoaderComponent, ToastComponent } from './shared/components';
 
@@ -25,14 +22,12 @@ import { GoogleTagManagerService } from 'angular-google-tag-manager';
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [DialogService],
 })
 export class AppComponent implements OnInit {
   private readonly googleTagManagerService = inject(GoogleTagManagerService);
   private readonly destroyRef = inject(DestroyRef);
-  private readonly dialogService = inject(DialogService);
+  private readonly customDialogService = inject(CustomDialogService);
   private readonly router = inject(Router);
-  private readonly translateService = inject(TranslateService);
   private readonly environment = inject(ENVIRONMENT);
 
   private readonly actions = createDispatchMap({ getCurrentUser: GetCurrentUser, getEmails: GetEmails });
@@ -67,12 +62,9 @@ export class AppComponent implements OnInit {
   }
 
   private showEmailDialog() {
-    this.dialogService.open(ConfirmEmailComponent, {
+    this.customDialogService.open(ConfirmEmailComponent, {
+      header: 'home.confirmEmail.title',
       width: '448px',
-      focusOnShow: false,
-      header: this.translateService.instant('home.confirmEmail.title'),
-      modal: true,
-      closable: false,
       data: this.unverifiedEmails(),
     });
   }

src/app/app.config.ts

@@ -5,6 +5,7 @@ import { TranslateModule } from '@ngx-translate/core';
 
 import { ConfirmationService, MessageService } from 'primeng/api';
 import { providePrimeNG } from 'primeng/config';
+import { DialogService } from 'primeng/dynamicdialog';
 
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import { ApplicationConfig, ErrorHandler, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
@@ -26,12 +27,13 @@ export const appConfig: ApplicationConfig = {
   providers: [
     APPLICATION_INITIALIZATION_PROVIDER,
     ConfirmationService,
+    DialogService,
+    MessageService,
     {
       provide: ErrorHandler,
       useFactory: () => Sentry.createErrorHandler({ showDialog: false }),
     },
     importProvidersFrom(TranslateModule.forRoot(provideTranslation())),
-    MessageService,
     provideAnimations(),
     providePrimeNG({
       theme: {

src/app/features/admin-institutions/components/admin-table/admin-table.component.html

@@ -110,60 +110,63 @@
           @for (col of columns; track col.field) {
             <td class="max-w-20rem hover-group">
               @let currentColumnField = rowData[col.field];
-              @if (col.isLink && isLink(currentColumnField)) {
-                <a [href]="currentColumnField.url" [target]="col.linkTarget ?? '_self'" class="font-bold">
-                  @if (col.dateFormat) {
-                    {{ getCellValue(currentColumnField) | date: col.dateFormat }}
+
+              <div class="flex align-items-center gap-1">
+                @if (col.isLink && isLink(currentColumnField)) {
+                  <a [href]="currentColumnField.url" [target]="col.linkTarget ?? '_self'" class="font-bold">
+                    @if (col.dateFormat) {
+                      {{ getCellValue(currentColumnField) | date: col.dateFormat }}
+                    } @else {
+                      {{ getCellValue(currentColumnField) }}
+                    }
+                  </a>
+                } @else if (col.isLink && col.isArray && isLinkArray(currentColumnField)) {
+                  <div class="flex gap-1 align-items-center flex-wrap">
+                    @for (link of currentColumnField; track $index) {
+                      <div class="flex align-items-center gap-1">
+                        <a [href]="link.url" [target]="col.linkTarget ?? '_self'" class="font-bold">
+                          {{ link.text }}<span>{{ $last ? '' : ',' }}</span>
+                        </a>
+                        @if (col.showIcon) {
+                          <p-button
+                            [pTooltip]="col.iconTooltip | translate"
+                            class="icon-button"
+                            [icon]="col.iconClass"
+                            variant="text"
+                            severity="info"
+                            [ariaLabel]="'common.accessibility.tooltipBtn' | translate"
+                            (onClick)="onIconClick(rowData, col, $index)"
+                          />
+                        }
+                      </div>
+                    }
+                  </div>
+                } @else {
+                  @if (col.dateFormat && currentColumnField) {
+                    <p>
+                      {{ getCellValue(currentColumnField) | date: col.dateFormat }}
+                    </p>
+                  } @else if (!col.dateFormat && currentColumnField) {
+                    <p class="overflow-hidden text-overflow-ellipsis">
+                      {{ getCellValue(currentColumnField) }}
+                    </p>
                   } @else {
-                    {{ getCellValue(currentColumnField) }}
+                    <p class="overflow-hidden text-overflow-ellipsis">{{ currentColumnField ?? '-' }}</p>
                   }
-                </a>
-              } @else if (col.isLink && col.isArray && isLinkArray(currentColumnField)) {
-                <div class="flex gap-1 align-items-center flex-wrap">
-                  @for (link of currentColumnField; track $index) {
-                    <div>
-                      <a [href]="link.url" [target]="col.linkTarget ?? '_self'" class="font-bold">
-                        {{ link.text }}<span>{{ $last ? '' : ',' }}</span>
-                      </a>
-                      @if (col.showIcon) {
-                        <p-button
-                          [pTooltip]="col.iconTooltip | translate"
-                          class="icon-button"
-                          [icon]="col.iconClass"
-                          variant="text"
-                          severity="info"
-                          [ariaLabel]="'common.accessibility.tooltipBtn' | translate"
-                          (onClick)="onIconClick(rowData, col, $index)"
-                        />
-                      }
-                    </div>
-                  }
-                </div>
-              } @else {
-                @if (col.dateFormat && currentColumnField) {
-                  <p>
-                    {{ getCellValue(currentColumnField) | date: col.dateFormat }}
-                  </p>
-                } @else if (!col.dateFormat && currentColumnField) {
-                  <p class="overflow-hidden text-overflow-ellipsis text-center">
-                    {{ getCellValue(currentColumnField) }}
-                  </p>
-                } @else {
-                  <p class="overflow-hidden text-overflow-ellipsis text-center">{{ currentColumnField ?? '-' }}</p>
                 }
-              }
 
-              @if (col.showIcon && !col.isArray) {
-                <p-button
-                  [pTooltip]="col.iconTooltip | translate"
-                  class="icon-button"
-                  [icon]="col.iconClass"
-                  variant="text"
-                  severity="info"
-                  [ariaLabel]="'common.accessibility.tooltipBtn' | translate"
-                  (onClick)="onIconClick(rowData, col, $index)"
-                />
-              }
+                @if (col.showIcon && !col.isArray) {
+                  <p-button
+                    [pTooltip]="col.iconTooltip | translate"
+                    class="icon-button"
+                    [icon]="col.iconClass"
+                    variant="text"
+                    severity="info"
+                    [ariaLabel]="'common.accessibility.tooltipBtn' | translate"
+                    (onClick)="onIconClick(rowData, col, $index)"
+                  />
+                }
+              </div>
             </td>
           }
         </tr>

src/app/features/admin-institutions/pages/institutions-projects/institutions-projects.component.ts

@@ -1,9 +1,8 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
-import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
-import { DialogService } from 'primeng/dynamicdialog';
 
 import { filter } from 'rxjs';
 
@@ -22,7 +21,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { UserSelectors } from '@core/store/user';
 import { ResourceType, SortOrder } from '@osf/shared/enums';
 import { PaginationLinksModel, ResourceModel, SearchFilters } from '@osf/shared/models';
-import { ToastService } from '@osf/shared/services';
+import { CustomDialogService, ToastService } from '@osf/shared/services';
 import {
   FetchResources,
   FetchResourcesByLink,
@@ -49,13 +48,11 @@ import { InstitutionsAdminSelectors, RequestProjectAccess, SendUserMessage } fro
   templateUrl: './institutions-projects.component.html',
   styleUrl: './institutions-projects.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [DialogService],
 })
 export class InstitutionsProjectsComponent implements OnInit, OnDestroy {
-  private dialogService = inject(DialogService);
+  private customDialogService = inject(CustomDialogService);
   private destroyRef = inject(DestroyRef);
   private toastService = inject(ToastService);
-  private translate = inject(TranslateService);
 
   private actions = createDispatchMap({
     sendUserMessage: SendUserMessage,
@@ -137,14 +134,10 @@ export class InstitutionsProjectsComponent implements OnInit, OnDestroy {
       return;
     }
 
-    this.dialogService
+    this.customDialogService
       .open(ContactDialogComponent, {
+        header: 'adminInstitutions.institutionUsers.sendEmail',
         width: '448px',
-        focusOnShow: false,
-        header: this.translate.instant('adminInstitutions.institutionUsers.sendEmail'),
-        closeOnEscape: true,
-        modal: true,
-        closable: true,
         data: this.currentUser()?.fullName,
       })
       .onClose.pipe(

src/app/features/admin-institutions/pages/institutions-users/institutions-users.component.ts

@@ -3,7 +3,6 @@ import { createDispatchMap, select } from '@ngxs/store';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
 import { CheckboxModule } from 'primeng/checkbox';
-import { DialogService } from 'primeng/dynamicdialog';
 import { PaginatorState } from 'primeng/paginator';
 
 import { filter } from 'rxjs';
@@ -18,7 +17,7 @@ import { SelectComponent } from '@osf/shared/components';
 import { DEFAULT_TABLE_PARAMS } from '@osf/shared/constants';
 import { Primitive } from '@osf/shared/helpers';
 import { SearchFilters } from '@osf/shared/models';
-import { ToastService } from '@osf/shared/services';
+import { CustomDialogService, ToastService } from '@osf/shared/services';
 import { SortOrder } from '@shared/enums';
 
 import { AdminTableComponent } from '../../components';
@@ -36,11 +35,10 @@ import { FetchInstitutionUsers, InstitutionsAdminSelectors, SendUserMessage } fr
   templateUrl: './institutions-users.component.html',
   styleUrl: './institutions-users.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [DialogService],
 })
 export class InstitutionsUsersComponent {
-  private readonly translate = inject(TranslateService);
-  private readonly dialogService = inject(DialogService);
+  private readonly translateService = inject(TranslateService);
+  private readonly customDialogService = inject(CustomDialogService);
   private readonly destroyRef = inject(DestroyRef);
   private readonly toastService = inject(ToastService);
   private readonly environment = inject(ENVIRONMENT);
@@ -76,7 +74,7 @@ export class InstitutionsUsersComponent {
 
   amountText = computed(() => {
     const count = this.totalCount();
-    return count + ' ' + this.translate.instant('adminInstitutions.summary.totalUsers').toLowerCase();
+    return count + ' ' + this.translateService.instant('adminInstitutions.summary.totalUsers').toLowerCase();
   });
 
   constructor() {
@@ -109,14 +107,10 @@ export class InstitutionsUsersComponent {
   onIconClick(event: TableIconClickEvent): void {
     switch (event.action) {
       case 'sendMessage': {
-        this.dialogService
+        this.customDialogService
           .open(SendEmailDialogComponent, {
+            header: 'adminInstitutions.institutionUsers.sendEmail',
             width: '448px',
-            focusOnShow: false,
-            header: this.translate.instant('adminInstitutions.institutionUsers.sendEmail'),
-            closeOnEscape: true,
-            modal: true,
-            closable: true,
             data: this.currentUser()?.fullName,
           })
           .onClose.pipe(

src/app/features/analytics/components/view-duplicates/view-duplicates.component.ts

@@ -1,9 +1,8 @@
 import { createDispatchMap, select } from '@ngxs/store';
 
-import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
-import { DialogService } from 'primeng/dynamicdialog';
 import { Menu } from 'primeng/menu';
 import { PaginatorState } from 'primeng/paginator';
 
@@ -42,6 +41,7 @@ import { ResourceType, UserPermissions } from '@osf/shared/enums';
 import { IS_SMALL } from '@osf/shared/helpers';
 import { ToolbarResource } from '@osf/shared/models';
 import { Duplicate } from '@osf/shared/models/duplicates';
+import { CustomDialogService } from '@osf/shared/services';
 import { ClearDuplicates, DuplicatesSelectors, GetAllDuplicates } from '@osf/shared/stores';
 
 @Component({
@@ -62,11 +62,9 @@ import { ClearDuplicates, DuplicatesSelectors, GetAllDuplicates } from '@osf/sha
   templateUrl: './view-duplicates.component.html',
   styleUrl: './view-duplicates.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [DialogService],
 })
 export class ViewDuplicatesComponent {
-  private dialogService = inject(DialogService);
-  private translateService = inject(TranslateService);
+  private customDialogService = inject(CustomDialogService);
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private destroyRef = inject(DestroyRef);
@@ -180,21 +178,17 @@ export class ViewDuplicatesComponent {
     const dialogWidth = !this.isSmall() ? '95vw' : '450px';
 
     if (toolbarResource) {
-      this.dialogService
+      this.customDialogService
         .open(ForkDialogComponent, {
+          header: 'project.overview.dialog.fork.headerProject',
           width: dialogWidth,
-          focusOnShow: false,
-          header: this.translateService.instant('project.overview.dialog.fork.headerProject'),
-          closeOnEscape: true,
-          modal: true,
-          closable: true,
           data: {
             resource: toolbarResource,
             resourceType: this.resourceType(),
           },
         })
         .onClose.subscribe((result) => {
-          if (result.success) {
+          if (result?.success) {
             const resource = this.currentResource();
             if (resource) {
               this.actions.getDuplicates(resource.id, resource.type, parseInt(this.currentPage()), this.pageSize);
@@ -222,14 +216,10 @@ export class ViewDuplicatesComponent {
   private handleDeleteFork(id: string): void {
     const dialogWidth = !this.isSmall() ? '95vw' : '650px';
 
-    this.dialogService
+    this.customDialogService
       .open(DeleteComponentDialogComponent, {
+        header: 'project.overview.dialog.deleteComponent.header',
         width: dialogWidth,
-        focusOnShow: false,
-        header: this.translateService.instant('project.overview.dialog.deleteComponent.header'),
-        closeOnEscape: true,
-        modal: true,
-        closable: true,
         data: {
           componentId: id,
           resourceType: this.resourceType(),
@@ -239,7 +229,7 @@ export class ViewDuplicatesComponent {
         },
       })
       .onClose.subscribe((result) => {
-        if (result && result.success) {
+        if (result?.success) {
           const resource = this.currentResource();
           if (resource) {
             this.actions.getDuplicates(resource.id, resource.type, parseInt(this.currentPage()), this.pageSize);