[ACS-7573] folder rules fixes

projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss

@@ -1,4 +1,13 @@
 .aca-manage-rules {
+  /* stylelint-disable selector-class-pattern */
+  .mat-mdc-slide-toggle:is(mat-slide-toggle) .mdc-switch:enabled .mdc-switch__track::after {
+    background: var(--mdc-switch-selected-track-color);
+  }
+
+  .mat-mdc-slide-toggle .mdc-switch .mdc-switch__handle::before {
+    background: var(--mdc-switch-selected-pressed-handle-color);
+  }
+
   &__actions-bar {
     padding: 0 30px;
     display: flex;

projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.scss

@@ -1,6 +1,6 @@
 .aca-rule-action-list {
   &__item {
-    padding: 4px 8px;
+    padding: 8px;
     border-radius: 8px;
     display: flex;
 
@@ -10,6 +10,10 @@
 
     &:nth-child(2n) {
       background-color: hsl(0deg, 0%, 95%);
+
+      &:last-of-type {
+        margin-bottom: 8px;
+      }
     }
   }
 }

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">
+  <mat-form-field class="aca-rule-action-full-width" appearance="outline" subscriptSizing="dynamic">
     <mat-select
       formControlName="actionDefinitionId"
       data-automation-id="rule-action-select"

projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.scss

@@ -9,6 +9,7 @@
 
       .adf-property-list {
         padding: 8px;
+        background: unset;
       }
 
       .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {

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" appearance="outline" 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" appearance="outline" 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>

projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss

@@ -21,6 +21,12 @@
       margin: 0.5em 0;
     }
 
+    &__actions {
+      button:not(:disabled) {
+        background-color: unset;
+      }
+    }
+
     &__row {
       display: flex;
       gap: 8px;

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"]`));
 

projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.ts

@@ -68,19 +68,18 @@ export class RuleCompositeConditionUiComponent implements ControlValueAccessor,
   @HostBinding('class.aca-childCompositeCondition')
   @Input()
   childCondition = false;
+  @Input()
+  readOnly = false;
+
+  readonly isOrImplemented = false;
 
   form = new FormGroup({
     inverted: new FormControl(),
-    booleanMode: new FormControl(),
+    booleanMode: new FormControl({ value: 'and', disabled: !this.isOrImplemented || this.readOnly }),
     compositeConditions: new FormArray([]),
     simpleConditions: new FormArray([])
   });
 
-  readonly isOrImplemented = false;
-
-  @Input()
-  public readOnly = false;
-
   private formSubscription = this.form.valueChanges.subscribe((value: any) => {
     this.onChange(value);
     this.onTouch();
@@ -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();
+      }
     }
   }
 }

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" appearance="outline" 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 }" appearance="outline" 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" appearance="outline" [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">

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, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, forwardRef, 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';
@@ -76,7 +76,7 @@ const AUTOCOMPLETE_OPTIONS_DEBOUNCE_TIME = 500;
     }
   ]
 })
-export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAccessor, OnDestroy {
+export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAccessor, OnChanges, OnDestroy {
   form = new FormGroup({
     field: new FormControl('cm:name'),
     comparator: new FormControl('equals'),
@@ -89,17 +89,10 @@ export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAcces
 
   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();
 
@@ -168,16 +161,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');
@@ -218,6 +201,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

projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.html

@@ -11,6 +11,8 @@
     <mat-form-field
       data-automation-id="rule-option-form-field-errorScript"
       floatLabel="always"
+      appearance="outline"
+      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

projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss

@@ -8,10 +8,18 @@
     flex-direction: column;
   }
 
+  &__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;
   }

projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html

@@ -4,7 +4,7 @@
     <div class="aca-rule-details__form__row">
       <label for="rule-details-name-input">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.NAME' | translate }}</label>
       <div>
-        <mat-form-field floatLabel='auto' class="aca-rule-details__form__row__field">
+        <mat-form-field appearance="outline" 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='auto' class="aca-rule-details__form__row__field">
+        <mat-form-field floatLabel='auto' appearance="outline" 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>
 

projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss

@@ -69,7 +69,13 @@
 
     /* stylelint-disable selector-class-pattern */
     &.aca-read-only,
-    .mat-mdc-form-field-disabled {
+    .mat-form-field-disabled {
+      .mdc-notched-outline__leading,
+      .mdc-notched-outline__trailing,
+      .mdc-notched-outline__notch {
+        border: none;
+      }
+
       .mdc-line-ripple {
         &::before,
         &::after {