[ACS-6211] Resolved UI alignment issue in create rule dialog (#3505)

* [ACS-6211] Resolved UI alignment issue in create rule dialog

* [ACS-6211] Changed appearance of mat-select form field to standard to match with other action form fields

* [ACS-6211] Fixed unit tests

* [ACS-6138] Updating ADW Styling after ACA changes for angular material - Expansion panel items

* [ACS-6211] Fixed failing E2E

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>
+  <mat-form-field class="aca-rule-action-full-width" appearance="standard">
     <mat-select
       formControlName="actionDefinitionId"
       data-automation-id="rule-action-select"
@@ -14,9 +14,10 @@
   </mat-form-field>
 
   <adf-card-view
+    *ngIf="cardViewItems?.length > 0"
     data-automation-id="rule-action-card-view"
     [properties]="cardViewItems"
-    [ngClass]="{ 'aca-rule-action-full-width': isFullWidth }"
+    class="aca-rule-action-full-width"
     [editable]="!readOnly">
   </adf-card-view>
 

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

@@ -11,6 +11,6 @@
   }
 
   &-full-width {
-    width: 100%;
+    flex: 1;
   }
 }

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

@@ -74,11 +74,10 @@ describe('RuleActionUiComponent', () => {
     component.parameterConstraints = dummyConstraints;
     fixture.detectChanges();
 
-    const cardView = getPropertiesCardView();
-    expect(cardView.properties.length).toBe(0);
-
     changeMatSelectValue('mock-action-1-definition');
 
+    const cardView = getPropertiesCardView();
+
     expect(cardView.properties.length).toBe(5);
     expect(cardView.properties[0]).toBeInstanceOf(CardViewTextItemModel);
     expect(cardView.properties[1]).toBeInstanceOf(CardViewBoolItemModel);
@@ -87,7 +86,7 @@ describe('RuleActionUiComponent', () => {
     expect(cardView.properties[4]).toBeInstanceOf(CardViewSelectItemModel);
 
     changeMatSelectValue('mock-action-2-definition');
-    expect(cardView.properties.length).toBe(0);
+    expect(fixture.debugElement.query(By.directive(CardViewComponent))).toBeNull();
   });
 
   it('should create category-value action parameter as a text box rather than node picker', () => {
@@ -95,11 +94,11 @@ describe('RuleActionUiComponent', () => {
     component.parameterConstraints = dummyConstraints;
     fixture.detectChanges();
 
-    const cardView = getPropertiesCardView();
-    expect(cardView.properties.length).toBe(0);
-
     changeMatSelectValue('mock-action-3-definition');
 
+    const cardView = getPropertiesCardView();
+
+    expect(cardView.properties.length).toBe(1);
     expect(cardView.properties[0].icon).toBeFalsy();
     expect(cardView.properties[0].value).toBeFalsy();
     expect(cardView.properties[0]).toBeInstanceOf(CardViewTextItemModel);

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

@@ -84,8 +84,12 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
   get parameterConstraints(): ActionParameterConstraint[] {
     return this._parameterConstraints;
   }
+
   set parameterConstraints(value) {
-    this._parameterConstraints = value.map((obj) => ({ ...obj, constraints: this.parseConstraintsToSelectOptions(obj.constraints) }));
+    this._parameterConstraints = value.map((obj) => ({
+      ...obj,
+      constraints: this.parseConstraintsToSelectOptions(obj.constraints)
+    }));
   }
 
   private readonly tagsRelatedPropertiesAndAspects = ['cm:tagscope', 'cm:tagScopeCache', 'cm:taggable'];
@@ -109,10 +113,6 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
     return this.actionDefinitions.find((actionDefinition: ActionDefinitionTransformed) => actionDefinition.id === this.selectedActionDefinitionId);
   }
 
-  get cardViewStyle() {
-    return this.isFullWidth ? { width: '100%' } : {};
-  }
-
   onChange: (action: RuleAction) => void = () => undefined;
   onTouch: () => void = () => undefined;
 
@@ -188,7 +188,6 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
     const disabledTags = !this.tagService.areTagsEnabled();
     const disabledCategories = !this.categoryService.areCategoriesEnabled();
     this.cardViewItems = (this.selectedActionDefinition?.parameterDefinitions ?? []).map((paramDef) => {
-      this.isFullWidth = false;
       const constraintsForDropdownBox = this._parameterConstraints.find((obj) => obj.name === paramDef.name);
       const cardViewPropertiesModel = {
         label: paramDef.displayLabel + (paramDef.mandatory ? ' *' : ''),
@@ -225,7 +224,6 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
         //  falls through
         default:
           if (constraintsForDropdownBox && !this.readOnly) {
-            this.isFullWidth = true;
             return new CardViewSelectItemModel({
               ...cardViewPropertiesModel,
               value: (this.parameters[paramDef.name] as string) ?? '',

projects/aca-playwright-shared/src/page-objects/components/actions-dropdown.component.ts

@@ -53,7 +53,7 @@ export class ActionsDropdownComponent extends BaseComponent {
   private static rootElement = 'aca-rule-action-list';
 
   private getOptionLocator = (optionName: string): Locator => this.page.locator('.mat-select-panel .mat-option-text', { hasText: optionName }).first();
-  private ruleActionLocator = this.getChild('aca-rule-action [data-automation-id="rule-action-card-view"]');
+  private ruleActionLocator = this.getChild('aca-rule-action');
   private addActionButtonLocator = this.getChild('[data-automation-id="rule-action-list-add-action-button"]');
   private actionDropdownLocator = this.getChild('[data-automation-id="rule-action-select"]');
   private actionAspectNameLocator = '[data-automation-id="header-aspect-name"] mat-select';