[ACS-6081] Reduce references to internal Angular material CSS classes (#3534)

* [ACS-6081] Reduce references to internal Angular material CSS classes

* [ACS-6081] rollback default scrollable value [ci:force]

* [ACS-6081] linting

* [ACS-6081] fix e2es

* [ACS-6081] cr fix

* [ACS-6081] remove adf-cli logger from e2es
This commit is contained in:
Mykyta Maliarchuk
2023-11-24 14:59:57 +01:00
committed by GitHub
parent 7468111d19
commit 7c95b53c8b
82 changed files with 390 additions and 471 deletions

View File

@@ -4,8 +4,9 @@
flex-direction: row;
gap: 20px;
adf-card-view .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem .mat-form-field .mat-form-field-infix {
width: 280px;
adf-card-view .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
display: inline-block;
width: 300px;
}
}

View File

@@ -2,11 +2,11 @@
display: block;
border-radius: 8px;
&.childCompositeCondition {
&.aca-childCompositeCondition {
padding: 8px 16px;
background-color: hsl(0deg, 0%, 100%);
&.secondaryBackground {
&.aca-secondaryBackground {
background-color: hsl(0deg, 0%, 95%);
}
}

View File

@@ -62,10 +62,10 @@ import { RuleSimpleConditionUiComponent } from './rule-simple-condition.ui-compo
]
})
export class RuleCompositeConditionUiComponent implements ControlValueAccessor, OnDestroy, OnChanges {
@HostBinding('class.secondaryBackground')
@HostBinding('class.aca-secondaryBackground')
@Input()
secondaryBackground = false;
@HostBinding('class.childCompositeCondition')
@HostBinding('class.aca-childCompositeCondition')
@Input()
childCondition = false;

View File

@@ -11,7 +11,7 @@
</mat-select>
</mat-form-field>
<mat-form-field class="aca-rule-simple-condition__form__comparator-input" [class]="{ hidden: isComparatorHidden }" data-automation-id="comparator-form-field">
<mat-form-field class="aca-rule-simple-condition__form__comparator-input" [class]="{ 'aca-hidden': isComparatorHidden }" data-automation-id="comparator-form-field">
<mat-select formControlName="comparator" data-automation-id="comparator-select">
<mat-option
*ngFor="let comparator of selectedFieldComparators"

View File

@@ -10,7 +10,7 @@
}
&__comparator-input {
&.hidden {
&.aca-hidden {
display: none;
}
}

View File

@@ -1,16 +1,14 @@
.aca-edit-rule-dialog-container {
--edit-rule-dialog-padding: 8px 20px;
.mat-dialog-container {
padding: 0;
}
}
.aca-edit-rule-dialog {
margin: -24px;
&__header {
display: flex;
align-items: center;
margin: 0;
margin: -43px -24px 0;
padding: var(--edit-rule-dialog-padding);
box-sizing: border-box;
border-bottom: 1px solid var(--theme-border-color);
@@ -29,7 +27,7 @@
}
&__content {
margin: 0;
margin: 0 -24px;
padding: 0;
&__spinner {
@@ -41,7 +39,7 @@
}
&__footer {
margin: 0;
margin: 0 -24px -43px;
padding: var(--edit-rule-dialog-padding);
box-sizing: border-box;
border-top: 1px solid var(--theme-border-color);

View File

@@ -3,6 +3,7 @@
<mat-checkbox
formControlName="isAsynchronous"
(change)="toggleErrorScriptDropdown($event)"
class="aca-rule-options__checkbox"
data-automation-id="rule-option-checkbox-asynchronous">
{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.IS_ASYNCHRONOUS' | translate }}
</mat-checkbox>
@@ -10,7 +11,7 @@
<mat-form-field
data-automation-id="rule-option-form-field-errorScript"
floatLabel="always"
[ngClass]="{ 'hide-error-script-dropdown': hideErrorScriptDropdown }">
[ngClass]="{ 'aca-hide-error-script-dropdown': hideErrorScriptDropdown }">
<mat-select
formControlName="errorScript"
@@ -31,6 +32,7 @@
<div class="aca-rule-options__option" *ngIf="!readOnly || isInheritableChecked">
<mat-checkbox
formControlName="isInheritable"
class="aca-rule-options__checkbox"
data-automation-id="rule-option-checkbox-inheritable">
{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.IS_INHERITABLE' | translate }}
</mat-checkbox>
@@ -39,6 +41,7 @@
<div class="aca-rule-options__option" *ngIf="!readOnly">
<mat-checkbox
formControlName="isDisabled"
class="aca-rule-options__checkbox"
data-automation-id="rule-option-checkbox-disabled">
{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.DISABLE_RULE' | translate }}
</mat-checkbox>

View File

@@ -8,11 +8,11 @@
flex-direction: column;
}
&.read-only .mat-checkbox-inner-container {
&.aca-read-only &__checkbox label > span:first-child {
display: none;
}
.hide-error-script-dropdown {
.aca-hide-error-script-dropdown {
visibility: hidden;
}
}

View File

@@ -45,11 +45,11 @@ describe('RuleOptionsUiComponent', () => {
const testErrorScriptFormFieldVisibility = (isVisible: boolean) => {
if (isVisible) {
expect((getByDataAutomationId('rule-option-form-field-errorScript').nativeElement as HTMLElement).classList).not.toContain(
'hide-error-script-dropdown'
'aca-hide-error-script-dropdown'
);
} else {
expect((getByDataAutomationId('rule-option-form-field-errorScript').nativeElement as HTMLElement).classList).toContain(
'hide-error-script-dropdown'
'aca-hide-error-script-dropdown'
);
}
};

View File

@@ -74,7 +74,7 @@ export class RuleOptionsUiComponent implements ControlValueAccessor, OnChanges,
@Input()
errorScriptConstraint: ActionParameterConstraint;
@HostBinding('class.read-only')
@HostBinding('class.aca-read-only')
readOnly = false;
onChange: (options: RuleOptions) => void = () => undefined;

View File

@@ -1,10 +1,10 @@
<form class="aca-rule-details__form" [ngClass]="{ 'read-only': readOnly }" [formGroup]="form">
<form class="aca-rule-details__form" [ngClass]="{ 'aca-read-only': readOnly }" [formGroup]="form">
<ng-container *ngIf="!preview">
<div class="aca-rule-details__form__row aca-rule-details__form__name">
<label for="rule-details-name-input">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.NAME' | translate }}</label>
<div>
<mat-form-field floatLabel='never'>
<mat-form-field floatLabel='never' class="aca-rule-details__form__row__field">
<input
id="rule-details-name-input"
matInput type="text" formControlName="name" data-automation-id="rule-details-name-input"
@@ -17,8 +17,9 @@
<div class="aca-rule-details__form__row aca-rule-details__form__description">
<label for="rule-details-description-textarea">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.DESCRIPTION' | translate }}</label>
<div>
<mat-form-field floatLabel='never'>
<mat-form-field floatLabel='never' class="aca-rule-details__form__row__field">
<textarea
class="aca-rule-details__form__row__field__textarea"
id="rule-details-description-textarea"
matInput formControlName="description" data-automation-id="rule-details-description-textarea"
[placeholder]="descriptionPlaceHolder | translate">
@@ -29,20 +30,20 @@
</ng-container>
<div class="aca-rule-details__form__row aca-rule-details__form__triggers">
<div class="label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.WHEN' | translate }}</div>
<div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.WHEN' | translate }}</div>
<div>
<aca-rule-triggers formControlName="triggers" data-automation-id="rule-details-triggers-component"></aca-rule-triggers>
<mat-error class="rule-details-error" *ngIf="triggers.hasError('required')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.INSUFFICIENT_TRIGGERS_SELECTED' | translate }}</mat-error>
<mat-error class="aca-rule-details-error" *ngIf="triggers.hasError('required')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.INSUFFICIENT_TRIGGERS_SELECTED' | translate }}</mat-error>
</div>
</div>
<div class="aca-rule-details__form__conditions">
<aca-rule-composite-condition formControlName="conditions"></aca-rule-composite-condition>
<mat-error class="rule-details-error" *ngIf="conditions.hasError('ruleCompositeConditionInvalid')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.RULE_COMPOSITE_CONDITION_INVALID' | translate }}</mat-error>
<mat-error class="aca-rule-details-error" *ngIf="conditions.hasError('ruleCompositeConditionInvalid')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.RULE_COMPOSITE_CONDITION_INVALID' | translate }}</mat-error>
</div>
<div class="aca-rule-details__form__row aca-rule-details__form__actions">
<div class="label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.PERFORM_ACTIONS' | translate }}</div>
<div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.PERFORM_ACTIONS' | translate }}</div>
<aca-rule-action-list
formControlName="actions"
[actionDefinitions]="actionDefinitions"
@@ -53,7 +54,7 @@
</div>
<div class="aca-rule-details__form__row" *ngIf="showOptionsSection">
<div class="label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.OPTIONS' | translate }}</div>
<div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.OPTIONS' | translate }}</div>
<aca-rule-options
formControlName="options"
data-automation-id="rule-details-options-component"

View File

@@ -25,7 +25,7 @@
gap: 8px;
& > label,
& > .label {
& > .aca-label {
font-weight: bold;
width: 20%;
min-width: 100px;
@@ -35,15 +35,16 @@
& > div {
flex-grow: 1;
}
mat-form-field {
width: 100%;
max-width: 400px;
font-size: inherit;
&__field {
width: 100%;
max-width: 400px;
margin-top: -11px;
font-size: inherit;
.mat-form-field-infix {
border: none;
}
&__textarea {
min-height: 4em;
}
}
}
@@ -55,17 +56,13 @@
&__conditions {
width: 100%;
& > .rule-details-error {
& > .aca-rule-details-error {
margin-left: 16px;
color: inherit;
}
}
textarea {
min-height: 4em;
}
.rule-details-error {
.aca-rule-details-error {
font-size: 75%;
height: 1em;
}
@@ -76,7 +73,7 @@
}
}
&.read-only,
&.aca-read-only,
.mat-form-field-disabled {
.mat-form-field-underline,
.mat-select-arrow-wrapper {