[ACS-7570] [ADF] Create generic dialog component (#9724)

This commit is contained in:
Darya Blavanovich
2024-06-03 14:34:57 +02:00
committed by GitHub
parent 0ea35b1f12
commit f1167b1bc5
17 changed files with 232 additions and 94 deletions

View File

@@ -22,7 +22,6 @@ export * from './category-selector.dialog';
export * from './dialog.module';
export * from './library/library.dialog';
export * from './dialog';
export * from './download-zip/download-zip.dialog';
export * from './download-zip/download-zip.dialog.module';

View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { TemplateRef } from '@angular/core';
import { TemplateRef, Type } from '@angular/core';
import { Subject } from 'rxjs';
import { DialogSizes } from './dialog.model';
@@ -28,8 +28,17 @@ export interface DialogData {
isCloseButtonHidden?: boolean;
isCancelButtonHidden?: boolean;
dialogSize?: DialogSizes;
contentText?: string;
contentComponent?: Type<any>;
contentTemplate?: TemplateRef<any>;
actionsTemplate?: TemplateRef<any>;
descriptionTemplate?: TemplateRef<any>;
headerIcon?: string;
additionalActionButtons?: AdditionalDialogActionButton[];
}
export interface AdditionalDialogActionButton {
title: string;
onClick: (args?: any) => void;
class?: string;
}

View File

@@ -1,12 +1,12 @@
<div
data-automation-id="adf-dialog-container"
class="adf-dialog-container {{dialogSize}}"
class="adf-dialog-container {{ dialogSize }}"
>
<div
mat-dialog-title
data-automation-id="adf-dialog-header"
class="adf-dialog-header"
[ngClass]="{'adf-centered-header': data.headerIcon}"
[ngClass]="{ 'adf-centered-header': data.headerIcon }"
>
<div class="adf-dialog-title-container" [ngClass]="{ 'adf-centered-title': data.headerIcon }">
<mat-icon
@@ -14,9 +14,9 @@
color="primary"
class="adf-dialog-header-icon"
>
{{data.headerIcon}}
{{ data.headerIcon }}
</mat-icon>
<h2 class="adf-dialog-title">{{data.title}}</h2>
<h2 class="adf-dialog-title">{{ data.title | translate }}</h2>
</div>
<button
*ngIf="!isCloseButtonHidden"
@@ -32,26 +32,45 @@
[ngTemplateOutlet]="data.descriptionTemplate"
[ngClass]="{ 'adf-description': data.description || data.descriptionTemplate }"
>
<ng-container>{{data.description}}</ng-container>
<ng-container>{{ data.description }}</ng-container>
</div>
<mat-dialog-content class="adf-dialog-content">
<mat-dialog-content *ngIf="data.contentTemplate || data.contentComponent || data.contentText" class="adf-dialog-content">
<ng-container [ngTemplateOutlet]="data.contentTemplate"></ng-container>
<ng-container [ngComponentOutlet]="data.contentComponent"></ng-container>
<ng-container>{{ data.contentText }}</ng-container>
</mat-dialog-content>
<mat-dialog-actions class="adf-dialog-actions" [ngClass]="{ 'adf-additional-actions': data.actionsTemplate }">
<div>
<mat-dialog-actions
class="adf-dialog-actions"
[ngClass]="{ 'adf-additional-actions': data.actionsTemplate || additionalActionButtons }"
>
<div *ngIf="!additionalActionButtons && data.actionsTemplate">
<ng-container [ngTemplateOutlet]="data.actionsTemplate"></ng-container>
</div>
<div *ngIf="!data.actionsTemplate && additionalActionButtons">
<button
*ngFor="let additionalButton of additionalActionButtons"
mat-button
color="primary"
class="{{ additionalButton.class }}"
(click)="additionalButton.onClick()"
>
{{ additionalButton.title | translate }}
</button>
</div>
<div>
<button
*ngIf="!isCancelButtonHidden"
mat-button
mat-stroked-button
color="primary"
mat-dialog-close
adf-auto-focus
data-automation-id="adf-dialog-actions-cancel"
>
{{cancelButtonTitle | translate}}
{{ cancelButtonTitle | translate }}
</button>
<button
@@ -61,7 +80,7 @@
[disabled]="isConfirmButtonDisabled$ | async"
(click)="onConfirm()"
>
{{confirmButtonTitle | translate}}
{{ confirmButtonTitle | translate }}
</button>
</div>
</mat-dialog-actions>

View File

@@ -12,21 +12,97 @@ $dialog-small-s-height: 360px;
$l-screen: 1920px;
$m-screen: 1680px;
$s-screen: 1440px;
$xs-screen: 375px;
$xs-screen: 500px;
$xxs-screen: 375px;
$breakpoint-alert-with-additional-buttons-centered: 1469px;
$breakpoint-medium-with-additional-buttons-centered: 1469px;
$breakpoint-alert-with-additional-buttons-centered: 1501px;
$breakpoint-medium-with-additional-buttons-centered: 1002px;
$breakpoint-large-with-additional-buttons-centered: 642px;
$breakpoint-medium-screen: 920px;
$dialog-padding: 24px;
.adf-large-dialog-panel,
.adf-medium-dialog-panel,
.adf-alert-dialog-panel {
min-width: calc(269px - $dialog-padding * 2);
@media screen and (max-width: $xxs-screen) {
.adf-additional-actions {
justify-content: center;
}
}
}
.adf-large-dialog-panel {
max-width: calc(56vw);
@media screen and (min-width: $l-screen) {
max-width: calc($dialog-large-l-width);
}
@media screen and (max-width: $xs-screen) {
max-width: calc(100vw);
}
@media screen and (max-width: $breakpoint-large-with-additional-buttons-centered) {
.adf-additional-actions {
justify-content: center;
}
}
}
.adf-medium-dialog-panel {
max-width: calc(36vw);
@media screen and (min-width: $l-screen) {
max-width: calc($dialog-medium-l-width);
}
@media screen and (max-width: $breakpoint-medium-screen) {
max-width: calc(84vw);
}
@media screen and (max-width: $xxs-screen) {
max-width: calc(100vw);
}
@media screen and (max-width: $breakpoint-medium-with-additional-buttons-centered) {
.adf-additional-actions {
justify-content: center;
}
}
}
.adf-alert-dialog-panel {
max-width: 24vw;
@media screen and (min-width: $m-screen) {
max-width: $dialog-small-l-width;
}
@media screen and (max-width: $s-screen) {
max-width: $dialog-small-s-width;
}
@media screen and (max-width: $xxs-screen) {
max-width: 84vw;
}
@media screen and (max-width: $breakpoint-alert-with-additional-buttons-centered) {
.adf-additional-actions {
justify-content: center;
}
}
}
.adf-dialog-container {
min-width: calc(269px - $dialog-padding * 2);
min-height: calc(300px - $dialog-padding * 2);
min-height: calc(188px - $dialog-padding * 2);
max-height: calc(84vh - $dialog-padding * 2);
position: relative;
display: flex;
flex-direction: column;
max-height: calc(84vh - $dialog-padding * 2);
.adf-dialog-header,
.adf-dialog-content,
@@ -99,40 +175,16 @@ $dialog-padding: 24px;
padding-top: $dialog-padding;
text-transform: capitalize;
min-height: auto;
// TODO: Update after migration to Angular 15
/* stylelint-disable-next-line selector-class-pattern */
.mat-button.mat-button-base + .mat-button-base {
margin-left: 16px;
}
// TODO: Update after migration to Angular 15
/* stylelint-disable-next-line selector-class-pattern */
.mat-button {
text-transform: capitalize;
}
}
// TODO: Update after migration to Angular 15
/* stylelint-disable-next-line selector-class-pattern */
.mat-dialog-container {
border-radius: 8px;
}
&.adf-large {
max-width: calc(56vw - $dialog-padding * 2);
max-height: calc(84vh - $dialog-padding * 2);
@media screen and (min-width: $l-screen) {
max-width: calc($dialog-large-l-width - $dialog-padding * 2);
}
@media screen and (min-height: $dialog-large-l-width) {
max-height: calc($dialog-large-l-height - $dialog-padding * 2);
}
@media screen and (max-width: $xs-screen) {
max-width: calc(100vw - $dialog-padding * 2);
@media screen and (max-width: $xxs-screen) {
max-height: calc(100vh - $dialog-padding * 2);
}
@@ -144,15 +196,9 @@ $dialog-padding: 24px;
}
&.adf-medium {
max-width: calc(36vw - $dialog-padding * 2);
max-height: calc(72vh - $dialog-padding * 2);
@media screen and (min-width: $l-screen) {
max-width: calc($dialog-medium-l-width - $dialog-padding * 2);
}
@media screen and (max-width: $xs-screen) {
max-width: calc(100vw - $dialog-padding * 2);
@media screen and (max-width: $xxs-screen) {
max-height: calc(100vh - $dialog-padding * 2);
}
@@ -189,26 +235,22 @@ $dialog-padding: 24px;
}
}
max-width: calc(24vw - $dialog-padding * 2);
max-height: calc(40vh - $dialog-padding * 2);
@media screen and (min-width: $m-screen) {
max-width: calc($dialog-small-l-width - $dialog-padding * 2);
max-height: calc($dialog-small-l-height - $dialog-padding * 2);
}
@media screen and (max-width: $s-screen) {
max-width: calc($dialog-small-s-width - $dialog-padding * 2);
max-height: calc($dialog-small-s-height - $dialog-padding * 2);
}
@media screen and (max-width: $xs-screen) {
max-width: calc(84vw - $dialog-padding * 2);
max-height: calc(41vh - $dialog-padding * 2);
@media screen and (max-width: $xxs-screen) {
max-height: calc(56vh - $dialog-padding * 2);
}
@media screen and (max-height: $dialog-small-l-height) {
max-height: calc(84vh - $dialog-padding * 2);
@media screen and (max-height: $xxs-screen) {
max-height: 84vh;
}
@media screen and (max-width: $breakpoint-alert-with-additional-buttons-centered) {
@@ -218,9 +260,25 @@ $dialog-padding: 24px;
}
}
@media screen and (max-width: $xs-screen) {
@media screen and (max-width: $xxs-screen) {
.adf-additional-actions {
justify-content: center;
}
}
}
.adf-additional-actions {
color: var(--theme-primary-color);
}
// TODO: Update after migration to Angular 15
/* stylelint-disable-next-line selector-class-pattern */
.mat-dialog-actions .mat-button-base + .mat-button-base {
margin-left: 16px;
}
// TODO: Update after migration to Angular 15
/* stylelint-disable-next-line selector-class-pattern */
.mat-dialog-container {
border-radius: 8px;
}

View File

@@ -17,10 +17,10 @@
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ContentTestingModule } from '../../testing/content.testing.module';
import { DialogComponent } from './dialog.component';
import { DialogData } from './dialog-data.interface';
import { DialogSize } from './dialog.model';
import { CoreTestingModule } from '../../testing';
describe('DialogComponent', () => {
let component: DialogComponent;
@@ -36,12 +36,13 @@ describe('DialogComponent', () => {
};
const dialogRef = {
close: jasmine.createSpy('close')
close: jasmine.createSpy('close'),
addPanelClass: jasmine.createSpy('addPanelClass')
};
const setupBeforeEach = (dialogOptions: DialogData = data) => {
TestBed.configureTestingModule({
imports: [ContentTestingModule],
imports: [CoreTestingModule],
providers: [
{ provide: MAT_DIALOG_DATA, useValue: dialogOptions },
{ provide: MatDialogRef, useValue: dialogRef }
@@ -54,8 +55,7 @@ describe('DialogComponent', () => {
confirmButton = fixture.nativeElement.querySelector('[data-automation-id="adf-dialog-actions-confirm"]');
closeButton = fixture.nativeElement.querySelector('[data-automation-id="adf-dialog-close-button"]');
cancelButton = fixture.nativeElement.querySelector(
'[data-automation-id="adf-dialog-actions-cancel"]');
cancelButton = fixture.nativeElement.querySelector('[data-automation-id="adf-dialog-actions-cancel"]');
dialogContainer = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-dialog-container"]');
};
@@ -85,7 +85,7 @@ describe('DialogComponent', () => {
describe('confirm action', () => {
const mockButtonTitle = 'mockTitle';
beforeEach(() => {
setupBeforeEach({ ...data, confirmButtonTitle: mockButtonTitle});
setupBeforeEach({ ...data, confirmButtonTitle: mockButtonTitle });
fixture.detectChanges();
});
@@ -115,7 +115,7 @@ describe('DialogComponent', () => {
it('should close dialog', () => {
component.onConfirm();
expect(dialogRef.close).toHaveBeenCalled();
expect(dialogRef.close).toHaveBeenCalledWith(true);
});
it('should set correct button title', () => {
@@ -145,24 +145,23 @@ describe('DialogComponent', () => {
beforeEach(() => {
setupBeforeEach({
...data,
isCloseButtonHidden: true,
isCloseButtonHidden: true,
isCancelButtonHidden: true
});
});
it ('should hide close button', () => {
it('should hide close button', () => {
expect(closeButton).toBeNull();
});
it ('should hide close button', () => {
it('should hide close button', () => {
expect(cancelButton).toBeNull();
});
});
describe('when dialog has large size', () => {
beforeEach(() => {
setupBeforeEach({ ...data, dialogSize: DialogSize.Large});
setupBeforeEach({ ...data, dialogSize: DialogSize.Large });
});
it('should have correct dialogSize value', () => {
@@ -184,7 +183,7 @@ describe('DialogComponent', () => {
describe('when dialog has medium size', () => {
beforeEach(() => {
setupBeforeEach({ ...data, dialogSize: DialogSize.Medium});
setupBeforeEach({ ...data, dialogSize: DialogSize.Medium });
});
it('should have correct dialogSize value', () => {
@@ -207,7 +206,7 @@ describe('DialogComponent', () => {
describe('when dialog has alert size', () => {
describe('when dialog has not an ican', () => {
beforeEach(() => {
setupBeforeEach({ ...data, dialogSize: DialogSize.Alert});
setupBeforeEach({ ...data, dialogSize: DialogSize.Alert });
});
it('should have correct dialogSize value', () => {
@@ -237,7 +236,7 @@ describe('DialogComponent', () => {
beforeEach(() => {
setupBeforeEach({
...data,
dialogSize: DialogSize.Alert,
dialogSize: DialogSize.Alert,
headerIcon: 'access_time'
});
});
@@ -248,7 +247,6 @@ describe('DialogComponent', () => {
expect(headerIcon).toBeDefined();
});
it('should center header content', () => {
const header = fixture.nativeElement.querySelector('.adf-centered-header');

View File

@@ -17,7 +17,7 @@
import { Component, Inject, OnDestroy, ViewEncapsulation } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { DialogData } from './dialog-data.interface';
import { AdditionalDialogActionButton, DialogData } from './dialog-data.interface';
import { BehaviorSubject, Subject } from 'rxjs';
import { DialogSize, DialogSizes } from './dialog.model';
import { MaterialModule } from '../../material.module';
@@ -37,10 +37,10 @@ export class DialogComponent implements OnDestroy {
isConfirmButtonDisabled$ = new BehaviorSubject<boolean>(false);
isCloseButtonHidden: boolean;
isCancelButtonHidden: boolean;
dialogSize: DialogSizes;
confirmButtonTitle: string;
cancelButtonTitle: string;
disableSubmitButton = false;
dialogSize: DialogSizes;
additionalActionButtons: AdditionalDialogActionButton[];
private onDestroy$ = new Subject<void>();
@@ -55,6 +55,8 @@ export class DialogComponent implements OnDestroy {
this.dialogSize = data.dialogSize || DialogSize.Medium;
this.confirmButtonTitle = data.confirmButtonTitle || 'COMMON.APPLY';
this.cancelButtonTitle = data.cancelButtonTitle || 'COMMON.CANCEL';
this.additionalActionButtons = data.additionalActionButtons;
this.dialogRef.addPanelClass(`${this.dialogSize}-dialog-panel`);
if (data.isConfirmButtonDisabled$) {
data.isConfirmButtonDisabled$.pipe(takeUntil(this.onDestroy$)).subscribe((value) => this.isConfirmButtonDisabled$.next(value));
@@ -64,7 +66,7 @@ export class DialogComponent implements OnDestroy {
onConfirm() {
this.isConfirmButtonDisabled$.next(true);
this.dialogRef.close();
this.dialogRef.close(true);
}
ngOnDestroy() {

View File

@@ -21,4 +21,4 @@ export const DialogSize = {
Alert: 'adf-alert'
} as const;
export type DialogSizes = typeof DialogSize[keyof typeof DialogSize];
export type DialogSizes = (typeof DialogSize)[keyof typeof DialogSize];

View File

@@ -20,3 +20,4 @@ export * from './edit-json/edit-json.dialog.module';
export * from './unsaved-changes-dialog/unsaved-changes-dialog.component';
export * from './unsaved-changes-dialog/unsaved-changes-dialog.module';
export * from './unsaved-changes-dialog/unsaved-changes.guard';
export * from './dialog';