[ACS-6693] Migration to NG15 (#3959)

* [ACS-6693] Angular 15 migration initial point * [ACS-6693] Angular 15 - update ADF dependencies from the ng15-start branch (#3712) * [ACS-6693] Angular 15 - adding mat core (#3715) * Stylelint fix * Migration - added stylePrepocessor for material selectors * Skip unit tests from branch release until errors are fixed * [ACS-7285] - [ACA] Angular 15 - Left sidebar + table (#3719) * [ACS-7286] Fix topbar user info issues (#3720) * [ACS-6693] Bump peerDependencies in ACA libs * [ACS-7330] edit rules dialog fixes (#3723) * [ACS-6693] Fix peer dependencies in ACA packages * [ACS-7328] Fix searchbar display (#3729) * [ACS-7631] Fix broken filters (#3735) * [ACS-7331] - Angular 15 - Edit aspects modal [ACA] * [ACS-7449] Fix broken filter labels styling (#3745) * [ACS-7351] ng15 Manage rules fixes (#3751) * [ACS-7351] ng15 manage rules fixes * [ACS-7351] cr fix * [ACS-7351] cr fix * [ACS-7370] - [ACA] Leave library dialog misses some padding (#3749) * [ACS-6693] Bump ADF version * [ACS-7372] - user profile page issues (#3757) * [ACS-7372] - [ACA] User profile page issues * [ACS-7415] - Move file dialog (#3755) * [ACS-7452] - Small screen notification banner [ACS-7418] About page (#3760) * [ACS-7452] - Small screen notification banner * [ACS-7452] - Small screen notification banner [ACS-7418] About page * [ACS-7511] Subfont for dialogs, make darker (#3765) * [ACS-7448] Fix wrong notifications colors (#3761) * [ACS-7448] Fix notifications colors, move them from adf to aca (#3771) * [ACS-7375] - Share link dialog issues (#3774) * [ACS-7517] - Notifications box (#3775) * [ACS-7373] ng15 permission tab fixes (#3762) * [ACS-7368] Fix unit tests for aca-content (#3779) * [ACS-7410] - Locked files overflow issues (#3780) * [ACS-7528] - Notification and user icons are a bit different (#3782) * [ACS-7529] - Columns visibility dropdown has broken styles (#3783) * [ACS-7537] - Share dialog (#3789) * Use latest ADF alpha * Post rebase unit test fix * Disable stylelint * Calendar button fix * [ACS-7369] ng15 migration - fix e2es (#3796) * [ACS-7369] e2e fixes * [ACS-7369] cr fix * [ACS-7331] - Angular 15 - View details sidebar (#3731) * [ACS-7542] - Upload new version dialog (#3800) * [ACS-7575] create library dialog e2e fix (#3803) * [ACS-7534] folder dialog e2e fixes (#3804) * [ACS-7574] Rules dialog edit (#3801) * [ACS-7571] Comments (#3810) * [ACS-7555] Added blue outline to focused checkboxes (#3813) * [ACS-7582] File upload dialog, fix button weight label globally (#3814) * [ACS-7531] - Search page (#3816) * [ACS-7559] Conext menus icons (#3818) * [ACS-6693] Bump ADF * Temporary lint disable * [ACS-7572] link rules dialog (#3817) * [ACS-7533] - Advanced search chips dropdowns (#3821) * [ACS-7560] Corrected background color for info snackbar (#3824) * [ACS-7558] - Toolbar and buttons (#3833) * [ACS-7573] folder rules fixes (#3836) * [ACS-7573] folder rules fixes * [ACS-7573] cr fix * [ACS-7561] - Permissions page (#3840) * [ACS-7768] unify inputs and selects across the app (#3845) * ACS-7768 Style inputs in create from template dialog * ACS-7768 Used globally configured outline appearance for inputs * ACS-7768 Style inputs for profile page * ACS-7768 Style inputs for library metadata form * ACS-7768 Style inputs for folder rules dialog * ACS-7768 Style inputs for manage rules page * ACS-7768 Set outline appearance for input, fix small issue * ACS-7768 Addressed comment * Revert "[ACS-7768] unify inputs and selects across the app (#3845)" (#3850) This reverts commit 6a5ef73283. * [ACS-8043] fix js api dependencies (#3855) * [ACS-8020] Fixed inputs for create from template dialog (#3857) * [ACS-8027] Inputs for create rules (#3860) * [ACS-8052] inputs for general info for libraries (#3863) * [ACS-8052] Inputs for general info for libraries * Fix after CR * [ACS-8059] Inputs for view rules (#3865) * [ACS-8026] Fixed Task form rendering (#3864) * Updating to the latest package of 6.10 from ADF * Updating to the latest ADF/JS-API - updating dependency rule * Regenerated package lock * [ACS-8082] fix search e2e (#3876) * Using latest ADF with BC of ConfirmDialogComponent * [ACS-8099] [ACA] Testing Angular 15 - Accessibility for search text area (#3883) * [ACS-8100] [ACA] Testing Angular 15 - Accessibility for search facet and filter (#3887) * [ACS-8158] Resolved issue where long tag names were not getting word wrapped in ACA. Fixed alignment issue with tag chip cross button (#3890) * [ACS-8101] [ACA] Testing Angular 15 - Manage rule popup visual changes (#3891) * [ACS-8191] Updated codebase to use variables from mat-selectors.scss file (#3889) * [ACS-8191] Updated ACA codebase to use selectors from mat-selectors.scss file instead of hardcoded selectors * [ACS-8191] Resolved configuration issue where running unit test on aca-shared failed due to not finding adf-core styles * Update ADF dependencies (#3897) * Upgrading ADF packages * Use latest ADF * Updated packages version * Updated packages version * Updated packages version * Updated packages version * Updated packages version * Updated packages version * Updated packages version * [ACS-8253] viewer file name change position on navigation (#3914) * Updated ADF version * Use latest ADF * Package lock fix * Build fix * Restore release branch build and unit tests * E2Es fix * Fix SonarCloud issues * Stylelint fix * Stylelint fix * [ACS-8442] Remove additional checkbox label * First batch of E2E fixes * Bump ADF * Second round of E2E locators fixes * Locator fix * [ACS-8443] Fix incorrect focus style for checkboxes * E2Es locators fixes * E2E locator fixes * [ACS-6693] locator fix upload new version title * E2E locator fix * E2E locator fix * [ACS-6693] locator fix upload new version file --------- Co-authored-by: jacekpluta <73617938+jacekpluta@users.noreply.github.com> Co-authored-by: Vito Albano <vito.albano@hyland.com> Co-authored-by: tomson <nastalytomasz@gmail.com> Co-authored-by: Mykyta Maliarchuk <84377976+nikita-web-ua@users.noreply.github.com> Co-authored-by: Jacek Pluta <jacek.pluta@hyland.com> Co-authored-by: dominikiwanekhyland <141320833+dominikiwanekhyland@users.noreply.github.com> Co-authored-by: tomson <tomasz.nastaly@hyland.com> Co-authored-by: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com> Co-authored-by: swapnil-verma-gl <92505353+swapnil-verma-gl@users.noreply.github.com> Co-authored-by: VitoAlbano <vito.albano.123@gmail.com> Co-authored-by: Akash Rathod <41251473+akashrathod28@users.noreply.github.com> Co-authored-by: Ehsan Rezaei <ehsan.rezaei@hyland.com> Co-authored-by: akash.rathod@hyland.com <akash.rathod@hyland.com>
2025-07-24 17:31:52 +00:00 · 2024-07-22 07:08:01 +02:00
parent 847fcf4c36
commit 02b6757ea3
104 changed files with 10902 additions and 9852 deletions
--- a/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss
+++ b/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss
@@ -1,4 +1,14 @@
+@import '@alfresco/adf-core/lib/styles/mat-selectors';
+
 .aca-manage-rules {
+  #{$mat-slide-toggle}:is(mat-slide-toggle) #{$mat-switch}:enabled #{$mat-switch-track}::after {
+    background: var(--mdc-switch-selected-track-color);
+  }
+
+  #{$mat-slide-toggle} #{$mat-switch} #{$mat-switch-handle}::before {
+    background: var(--mdc-switch-selected-pressed-handle-color);
+  }
+
  &__actions-bar {
    padding: 0 30px;
    display: flex;
@@ -75,7 +85,7 @@
          }
        }

-        &__buttons {
+        .aca-manage-rules__container__rule-details__header__buttons {
          display: flex;
          flex-direction: row;
          align-items: stretch;
@@ -86,7 +96,16 @@

            &#delete-rule-btn {
              padding: 0 8px;
+              margin: 0;
              min-width: unset;
+
+              mat-icon {
+                margin: 0;
+                padding: 0;
+                width: 24px;
+                height: 24px;
+                font-size: 24px;
+              }
            }
          }
        }
--- a/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.ts
+++ b/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.ts
@@ -32,8 +32,7 @@ import { NodeInfo } from '@alfresco/aca-shared/store';
 import { delay, takeUntil } from 'rxjs/operators';
 import { EditRuleDialogUiComponent } from '../rule-details/edit-rule-dialog.ui-component';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { ConfirmDialogComponent } from '@alfresco/adf-content-services';
-import { NotificationService, TemplateModule, ToolbarModule } from '@alfresco/adf-core';
+import { NotificationService, TemplateModule, ToolbarModule, ConfirmDialogComponent } from '@alfresco/adf-core';
 import { ActionDefinitionTransformed } from '../model/rule-action.model';
 import { ActionsService } from '../services/actions.service';
 import { FolderRuleSetsService } from '../services/folder-rule-sets.service';
--- a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.html
+++ b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.html
@@ -27,7 +27,7 @@
  </mat-menu>
 </div>

-<button mat-button data-automation-id="rule-action-list-add-action-button" (click)="addAction()" *ngIf="!readOnly">
-  <mat-icon>add</mat-icon>
+<button mat-flat-button class="aca-rule-action-list-add-action-button" data-automation-id="rule-action-list-add-action-button" (click)="addAction()" *ngIf="!readOnly">
+  <mat-icon class="aca-rule-action-list-add-action-button-icon">add</mat-icon>
  <span>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ACTION_BUTTONS.ADD_ACTION' | translate }}</span>
 </button>
--- a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.scss
+++ b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.scss
@@ -1,6 +1,26 @@
+/* stylelint-disable selector-class-pattern */
 .aca-rule-action-list {
+  .aca-rule-action-list__item .aca-rule-action .mat-mdc-form-field-flex .mat-mdc-form-field-infix {
+    padding-top: 24px;
+  }
+
+  .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+  }
+
+  .aca-rule-action-list-add-action-button {
+    margin: 4px 0 20px;
+
+    .aca-rule-action-list-add-action-button-icon {
+      width: 24px;
+      height: 24px;
+      font-size: 24px;
+      margin-right: 0;
+      margin-left: 1px;
+    }
+  }
+
  &__item {
-    padding: 4px 8px;
    border-radius: 8px;
    display: flex;

@@ -10,6 +30,10 @@

    &:nth-child(2n) {
      background-color: hsl(0deg, 0%, 95%);
+
+      &:last-of-type {
+        margin-bottom: 8px;
+      }
    }
  }
 }
--- a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.html
+++ b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.html
@@ -1,6 +1,6 @@
 <form class="aca-rule-action__form" [formGroup]="form">

-  <mat-form-field class="aca-rule-action-full-width" appearance="standard">
+  <mat-form-field class="aca-rule-action-full-width" appearance="fill" subscriptSizing="dynamic">
    <mat-select
      formControlName="actionDefinitionId"
      data-automation-id="rule-action-select"
--- a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.scss
+++ b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.scss
@@ -4,13 +4,26 @@
    flex-direction: row;
    gap: 20px;

-    adf-card-view .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
-      display: inline-block;
-      width: 300px;
+    adf-card-view {
+      margin-top: -15px;
+
+      .adf-property-list {
+        background: var(--adf-card-view-background);
+      }
+
+      .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
+        display: inline-block;
+        width: 300px;
+
+        .adf-textitem-clickable {
+          padding-top: 0;
+        }
+      }
    }
  }

  &-full-width {
+    height: fit-content;
    flex: 1;
  }
 }
--- a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.ts
+++ b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.ts
@@ -192,8 +192,13 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
  ngOnChanges(changes: SimpleChanges): void {
    const readOnly = changes['readOnly']?.currentValue;
    if (readOnly !== undefined && readOnly !== null) {
-      this.readOnly = readOnly;
-      this.setDisabledState(readOnly);
+      if (readOnly) {
+        this.readOnly = true;
+        this.form.disable();
+      } else {
+        this.readOnly = false;
+        this.form.enable();
+      }
    }
  }

@@ -360,16 +365,6 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
    });
  }

-  setDisabledState(isDisabled: boolean) {
-    if (isDisabled) {
-      this.readOnly = true;
-      this.form.disable();
-    } else {
-      this.readOnly = false;
-      this.form.enable();
-    }
-  }
-
  private parseConstraintsToSelectOptions(constraints: ConstraintValue[]): CardViewSelectItemOption<unknown>[] {
    return constraints
      .sort((a, b) => {
--- a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.html
+++ b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.html
@@ -7,7 +7,7 @@
    class="aca-rule-composite-condition__form__row"
    *ngFor="let control of conditionFormControls; let i = index">

-    <mat-form-field *ngIf="i === 0">
+    <mat-form-field *ngIf="i === 0" subscriptSizing="dynamic">
      <mat-select
        [formControl]="invertedControl"
        [disabled]="readOnly">
@@ -16,9 +16,8 @@
      </mat-select>
    </mat-form-field>

-    <mat-form-field *ngIf="i > 0">
+    <mat-form-field *ngIf="i > 0" subscriptSizing="dynamic">
      <mat-select
-        [disabled]="!isOrImplemented || i > 1 || readOnly"
        [formControl]="booleanModeControl">
        <mat-option value="and">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LOGIC_OPERATORS.AND' | translate }}</mat-option>
        <mat-option value="or">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LOGIC_OPERATORS.OR' | translate }}</mat-option>
@@ -56,12 +55,12 @@
  </div>

  <div class="aca-rule-composite-condition__form__actions" *ngIf="!readOnly" data-automation-id="add-actions">
-    <button mat-button (click)="addSimpleCondition()" data-automation-id="add-condition-button">
-      <mat-icon>add</mat-icon>
+    <button mat-flat-button (click)="addSimpleCondition()" data-automation-id="add-condition-button">
+      <mat-icon class="aca-rule-composite-condition__form__actions-add">add</mat-icon>
      <span>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.CONDITION_BUTTONS.ADD_CONDITION' | translate }}</span>
    </button>
-    <button mat-button (click)="addCompositeCondition()" data-automation-id="add-group-button">
-      <mat-icon>add</mat-icon>
+    <button mat-flat-button (click)="addCompositeCondition()" data-automation-id="add-group-button">
+      <mat-icon class="aca-rule-composite-condition__form__actions-add">add</mat-icon>
      <span>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.CONDITION_BUTTONS.ADD_GROUP' | translate }}</span>
    </button>
  </div>
--- a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss
+++ b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss
@@ -1,3 +1,5 @@
+@import '@alfresco/adf-core/lib/styles/mat-selectors';
+
 .aca-rule-composite-condition {
  display: block;
  border-radius: 8px;
@@ -16,17 +18,19 @@
    flex-direction: column;
    gap: 8px;

-    &__no-conditions {
-      color: var(--theme-disabled-text-color);
-      margin: 0.5em 0;
-    }
-
-    &__row {
+    .aca-rule-composite-condition__form__row {
      display: flex;
      gap: 8px;

+      #{$mat-form-field} {
+        #{$mat-form-field-infix} {
+          padding-bottom: 4px;
+        }
+      }
+
      & > :nth-child(1) {
-        width: 5em;
+        width: 7em;
+        height: fit-content;
        font-size: inherit;
      }

@@ -34,5 +38,25 @@
        flex: 1;
      }
    }
+
+    &__no-conditions {
+      color: var(--theme-disabled-text-color);
+      margin: 0.5em 0;
+    }
+
+    &__actions {
+      padding-left: 8px;
+
+      button:not(:disabled) {
+        background-color: unset;
+      }
+
+      .aca-rule-composite-condition__form__actions-add {
+        width: 24px;
+        height: 24px;
+        font-size: 24px;
+        margin-right: 0;
+      }
+    }
  }
 }
--- a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.spec.ts
+++ b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.spec.ts
@@ -76,7 +76,7 @@ describe('RuleCompositeConditionUiComponent', () => {

  describe('Read only mode', () => {
    it('should hide the add buttons in read only mode', () => {
-      fixture.componentInstance.setDisabledState(true);
+      fixture.componentInstance.readOnly = true;
      fixture.detectChanges();
      const actionsElement = fixture.debugElement.query(By.css(`[data-automation-id="add-actions"]`));

@@ -85,7 +85,7 @@ describe('RuleCompositeConditionUiComponent', () => {

    it('should hide the more actions button on the right side of the condition', () => {
      fixture.componentInstance.writeValue(compositeConditionWithOneGroupMock);
-      fixture.componentInstance.setDisabledState(true);
+      fixture.componentInstance.readOnly = true;
      fixture.detectChanges();
      const actionsButtonElements = fixture.debugElement.queryAll(By.css(`[data-automation-id="condition-actions-button"]`));

--- a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.ts
+++ b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.ts
@@ -68,18 +68,17 @@ export class RuleCompositeConditionUiComponent implements ControlValueAccessor,
  @HostBinding('class.aca-childCompositeCondition')
  @Input()
  childCondition = false;
-
-  form = new FormGroup({
-    inverted: new FormControl(),
-    booleanMode: new FormControl(),
-    compositeConditions: new FormArray([]),
-    simpleConditions: new FormArray([])
-  });
+  @Input()
+  readOnly = false;

  readonly isOrImplemented = false;

-  @Input()
-  public readOnly = false;
+  form = new FormGroup({
+    inverted: new FormControl(),
+    booleanMode: new FormControl({ value: 'and', disabled: !this.isOrImplemented || this.readOnly }),
+    compositeConditions: new FormArray([]),
+    simpleConditions: new FormArray([])
+  });

  private formSubscription = this.form.valueChanges.subscribe((value: any) => {
    this.onChange(value);
@@ -120,16 +119,6 @@ export class RuleCompositeConditionUiComponent implements ControlValueAccessor,
    this.onTouch = fn;
  }

-  setDisabledState(isDisabled: boolean) {
-    if (isDisabled) {
-      this.readOnly = true;
-      this.form.disable();
-    } else {
-      this.readOnly = false;
-      this.form.enable();
-    }
-  }
-
  isFormControlSimpleCondition(control: FormControl): boolean {
    // eslint-disable-next-line no-prototype-builtins
    return control.value.hasOwnProperty('field');
@@ -164,11 +153,17 @@ export class RuleCompositeConditionUiComponent implements ControlValueAccessor,
    this.formSubscription.unsubscribe();
  }

-  ngOnChanges(changes: SimpleChanges): void {
-    const readOnly = changes['readOnly'].currentValue;
+  ngOnChanges(changes: SimpleChanges) {
+    const readOnly = changes['readOnly']?.currentValue;
+
    if (readOnly !== undefined && readOnly !== null) {
-      this.readOnly = readOnly;
-      this.setDisabledState(readOnly);
+      if (this.readOnly) {
+        this.readOnly = true;
+        this.form.disable();
+      } else {
+        this.readOnly = false;
+        this.form.enable();
+      }
    }
  }
 }
--- a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html
+++ b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html
@@ -1,5 +1,5 @@
 <form class="aca-rule-simple-condition__form" [formGroup]="form">
-  <mat-form-field class="aca-rule-simple-condition__form__field-input">
+  <mat-form-field class="aca-rule-simple-condition__form__field-input" subscriptSizing="dynamic">
    <mat-select formControlName="field" data-automation-id="field-select"
      (selectionChange)="onChangeField()">
      <mat-option *ngIf="!isSelectedFieldKnown" [value]="selectedField.name" data-automation-id="unknown-field-option">
@@ -11,7 +11,8 @@
    </mat-select>
  </mat-form-field>

-  <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__comparator-input" [class]="{ 'aca-hidden': isComparatorHidden }" data-automation-id="comparator-form-field">
+  <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__comparator-input" subscriptSizing="dynamic"
+                  [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"
@@ -21,7 +22,8 @@
    </mat-select>
  </mat-form-field>

-  <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__parameter-input" [ngSwitch]="selectedField.type">
+  <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__parameter-input"
+                  subscriptSizing="dynamic" [ngSwitch]="selectedField.type">
    <mat-select formControlName="parameter" data-automation-id="simple-condition-value-select" *ngSwitchCase="'mimeType'">
      <mat-option *ngFor="let mimeType of mimeTypes"
        [value]="mimeType.value">
--- a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.ts
+++ b/projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.ts
@@ -22,7 +22,7 @@
 * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
 */

-import { Component, forwardRef, inject, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, forwardRef, inject, Input, OnDestroy, OnInit, ViewEncapsulation, OnChanges, SimpleChanges } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { RuleSimpleCondition } from '../../model/rule-simple-condition.model';
 import { comparatorHiddenForConditionFieldType, RuleConditionField, ruleConditionFields } from './rule-condition-fields';
@@ -75,7 +75,7 @@ const AUTOCOMPLETE_OPTIONS_DEBOUNCE_TIME = 500;
    }
  ]
 })
-export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAccessor, OnDestroy {
+export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAccessor, OnChanges, OnDestroy {
  private appSettings = inject(AppSettingsService);
  private categoryService = inject(CategoryService);
  private tagService = inject(TagService);
@@ -90,17 +90,10 @@ export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAcces
  autoCompleteOptions: AutoCompleteOption[] = [];
  showLoadingSpinner: boolean;

+  @Input() readOnly = false;
+
  private onDestroy$ = new Subject<void>();
  private autoCompleteOptionsSubscription: Subscription;
-  private _readOnly = false;
-
-  @Input()
-  get readOnly(): boolean {
-    return this._readOnly;
-  }
-  set readOnly(isReadOnly: boolean) {
-    this.setDisabledState(isReadOnly);
-  }

  private readonly disabledTags = !this.tagService.areTagsEnabled();
  private readonly disabledCategories = !this.categoryService.areCategoriesEnabled();
@@ -171,16 +164,6 @@ export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAcces
    this.onTouch = fn;
  }

-  setDisabledState(isDisabled: boolean) {
-    if (isDisabled) {
-      this._readOnly = true;
-      this.form.disable();
-    } else {
-      this._readOnly = false;
-      this.form.enable();
-    }
-  }
-
  onChangeField() {
    if (!this.selectedFieldComparators.find((comparator) => comparator.name === this.comparatorControl.value)) {
      this.comparatorControl.setValue('equals');
@@ -221,6 +204,20 @@ export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAcces
      });
  }

+  ngOnChanges(changes: SimpleChanges) {
+    const readOnly = changes['readOnly']?.currentValue;
+
+    if (readOnly !== undefined && readOnly !== null) {
+      if (this.readOnly) {
+        this.readOnly = true;
+        this.form.disable();
+      } else {
+        this.readOnly = false;
+        this.form.enable();
+      }
+    }
+  }
+
  private getCategories(categoryName: string) {
    this.showLoadingSpinner = true;
    this.categoryService
--- a/projects/aca-content/folder-rules/src/rule-details/edit-rule-dialog.ui-component.scss
+++ b/projects/aca-content/folder-rules/src/rule-details/edit-rule-dialog.ui-component.scss
@@ -5,7 +5,11 @@
 .aca-edit-rule-dialog {
  margin: -24px;

-  &__header {
+  input {
+    box-sizing: border-box;
+  }
+
+  .aca-edit-rule-dialog__header {
    display: flex;
    align-items: center;
    margin: -43px -24px 0;
@@ -26,7 +30,7 @@
    }
  }

-  &__content {
+  .aca-edit-rule-dialog__content {
    margin: 0 -24px;
    padding: 0;

@@ -38,8 +42,8 @@
    }
  }

-  &__footer {
-    margin: 0 -24px -43px;
+  .aca-edit-rule-dialog__footer {
+    margin: 0 -24px -27px;
    padding: var(--edit-rule-dialog-padding);
    box-sizing: border-box;
    border-top: 1px solid var(--theme-border-color);
--- a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.html
+++ b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.html
@@ -11,15 +11,17 @@
    <mat-form-field
      data-automation-id="rule-option-form-field-errorScript"
      floatLabel="always"
+      appearance="fill"
+      class="aca-rule-options__error-script-dropdown"
      [ngClass]="{ 'aca-hide-error-script-dropdown': hideErrorScriptDropdown }">
-
+      <mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.ERROR_SCRIPT' | translate }}</mat-label>
      <mat-select
        formControlName="errorScript"
-        placeholder="{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.ERROR_SCRIPT' | translate}}"
        data-automation-id="rule-option-select-errorScript">

-        <mat-option value="">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.NO_SCRIPT' | translate }}</mat-option>
+        <mat-option class="aca-rule-options__error-script-option" value="">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.NO_SCRIPT' | translate }}</mat-option>
          <mat-option *ngFor="let option of errorScriptOptions"
+            class="aca-rule-options__error-script-option"
            [value]="option.value">
            {{ option.label }}
          </mat-option>
--- a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss
+++ b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss
@@ -8,10 +8,18 @@
    flex-direction: column;
  }

-  &.aca-read-only &__checkbox label > span:first-child {
+  &__error-script-dropdown {
+    margin-top: 4px;
+  }
+
+  &.aca-read-only &__checkbox > div > div:first-child {
    display: none;
  }

+  &.aca-read-only &__error-script-dropdown {
+    margin-left: -13px;
+  }
+
  .aca-hide-error-script-dropdown {
    visibility: hidden;
  }
--- a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.spec.ts
+++ b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.spec.ts
@@ -43,7 +43,7 @@ describe('RuleOptionsUiComponent', () => {
    fixture.debugElement.query(By.css(`[data-automation-id="${dataAutomationId}"]`));

  const toggleMatCheckbox = (dataAutomationId: string) => {
-    ((getByDataAutomationId(dataAutomationId).nativeElement as HTMLElement).children[0] as HTMLElement).click();
+    (getByDataAutomationId(dataAutomationId).nativeElement as HTMLElement).querySelector('input').click();
  };

  const testErrorScriptFormFieldVisibility = (isVisible: boolean) => {
@@ -62,7 +62,7 @@ describe('RuleOptionsUiComponent', () => {
    TestBed.configureTestingModule({
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      imports: [FormsModule, ReactiveFormsModule, CoreTestingModule, RuleOptionsUiComponent],
-      providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'never' } }]
+      providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'auto' } }]
    });

    fixture = TestBed.createComponent(RuleOptionsUiComponent);
@@ -153,7 +153,7 @@ describe('RuleOptionsUiComponent', () => {
    expect((await matOptions[2].getText()).trim()).toBe('Script 2');
  });

-  it('should always show a label for the error script dropdown even when MAT_FORM_FIELD_DEFAULT_OPTIONS sets floatLabel to never', () => {
+  it('should always show a label for the error script dropdown', () => {
    component.writeValue({
      isEnabled: true,
      isInheritable: false,
--- a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html
+++ b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html
@@ -1,10 +1,10 @@
 <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 class="aca-rule-details__form__row">
+      <label class="aca-rule-details__name__label" for="rule-details-name-input">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.NAME' | translate }}</label>
      <div>
-        <mat-form-field floatLabel='never' class="aca-rule-details__form__row__field">
+        <mat-form-field appearance="fill" floatLabel='auto' 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,7 +17,7 @@
    <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' class="aca-rule-details__form__row__field">
+        <mat-form-field floatLabel='auto' appearance="fill" class="aca-rule-details__form__row__field">
        <textarea
          class="aca-rule-details__form__row__field__textarea"
          id="rule-details-description-textarea"
@@ -38,7 +38,7 @@
  </div>

  <div class="aca-rule-details__form__conditions">
-    <aca-rule-composite-condition formControlName="conditions"></aca-rule-composite-condition>
+    <aca-rule-composite-condition [readOnly]="readOnly" formControlName="conditions"></aca-rule-composite-condition>
    <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>

@@ -53,7 +53,7 @@
    </aca-rule-action-list>
  </div>

-  <div class="aca-rule-details__form__row" *ngIf="showOptionsSection">
+  <div class="aca-rule-details__form__row aca-rule-details__form__others" *ngIf="showOptionsSection">
    <div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.OPTIONS' | translate }}</div>
    <aca-rule-options
      formControlName="options"
--- a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss
+++ b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss
@@ -1,16 +1,25 @@
+@import '@alfresco/adf-core/lib/styles/mat-selectors';
+
 .aca-rule-details {
+  .aca-rule-details__form__triggers {
+    margin-top: 10px;
+  }
+
+  .aca-rule-details__name__label {
+    padding-top: 1.5em;
+  }
+
+  .aca-rule-details__form__others {
+    margin-bottom: 12px;
+  }
+
  &__form {
    position: relative;

    & > div {
-      padding: 8px 20px;
+      padding: 0 20px;
      width: 100%;
      box-sizing: border-box;
-      overflow-x: auto;
-
-      &.aca-rule-details__form__name {
-        padding-bottom: 0;
-      }

      &.aca-rule-details__form__description {
        padding-top: 0;
@@ -30,7 +39,7 @@
        width: 20%;
        min-width: 100px;
        max-width: 150px;
-        padding: 0.75em 0;
+        padding: 0.5em 0;
      }

      & > div {
@@ -40,7 +49,6 @@
      &__field {
        width: 100%;
        max-width: 400px;
-        margin-top: -11px;
        font-size: inherit;

        &__textarea {
@@ -55,6 +63,7 @@

    &__conditions {
      width: 100%;
+      margin: 14px 0 36px;

      & > .aca-rule-details-error {
        margin-left: 16px;
@@ -73,18 +82,39 @@
      }
    }

-    /* stylelint-disable selector-class-pattern */
    &.aca-read-only,
-    .mat-form-field-disabled {
-      .mat-form-field-underline,
-      .mat-select-arrow-wrapper {
-        display: none;
+    #{$mat-form-field-disabled} {
+      #{$mat-notched-outline-leading},
+      #{$mat-notched-outline-trailing},
+      #{$mat-notched-outline-notch} {
+        border: none;
+      }
+
+      #{$mat-line-ripple} {
+        &::before,
+        &::after {
+          display: none;
+        }
      }

      *:disabled,
-      .mat-select-disabled .mat-select-value {
+      #{$mat-select-disabled} #{$mat-select-value} {
        color: inherit;
      }
+
+      #{$mat-select-arrow-wrapper} {
+        display: none;
+      }
+    }
+
+    .aca-rule-details__form__row #{$mat-form-field-flex} #{$mat-form-field-infix} {
+      padding-top: 0.375em;
+      padding-bottom: 0.375em;
+    }
+
+    .aca-rule-details__form__row aca-rule-action #{$mat-form-field-flex} #{$mat-form-field-infix} {
+      padding-top: 0.1em;
+      padding-bottom: 0.1em;
    }
  }
 }
--- a/projects/aca-content/folder-rules/src/rule-details/triggers/rule-triggers.ui-component.spec.ts
+++ b/projects/aca-content/folder-rules/src/rule-details/triggers/rule-triggers.ui-component.spec.ts
@@ -36,7 +36,7 @@ describe('RuleTriggerUiComponent', () => {
    fixture.debugElement.query(By.css(`[data-automation-id="${dataAutomationId}"]`));

  const toggleMatCheckbox = (dataAutomationId: string) => {
-    ((getByDataAutomationId(dataAutomationId).nativeElement as HTMLElement).children[0] as HTMLElement).click();
+    (getByDataAutomationId(dataAutomationId).nativeElement as HTMLElement).querySelector('input').click();
  };

  beforeEach(() => {
--- a/projects/aca-content/folder-rules/src/rule-set-picker/rule-set-picker.smart-component.scss
+++ b/projects/aca-content/folder-rules/src/rule-set-picker/rule-set-picker.smart-component.scss
@@ -1,13 +1,15 @@
+@import '@alfresco/adf-core/lib/styles/mat-selectors';
+
 .aca-rule-set-picker-container {
  --rule-set-picker-padding: 8px 20px;

-  & > * {
+  #{$mdc-dialog} #{$mat-dialog-surface} {
    padding: 0;
  }
 }

 .aca-rule-set-picker {
-  &__header {
+  & &__header {
    display: flex;
    align-items: center;
    margin: 0;
@@ -28,7 +30,7 @@
    }
  }

-  &__content {
+  & &__content {
    position: relative;
    height: 80vh;
    margin: 0;
@@ -66,7 +68,7 @@
    }
  }

-  &__footer {
+  & &__footer {
    margin: 0;
    padding: var(--rule-set-picker-padding);
    box-sizing: border-box;