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';
 
@@ -41,6 +40,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({
@@ -60,11 +60,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);
@@ -178,21 +176,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);
@@ -220,14 +214,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(),
@@ -237,7 +227,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);