From 34c8976af6c962409efaadcc7cf7c7410249ca32 Mon Sep 17 00:00:00 2001 From: swapnil-verma-gl <92505353+swapnil-verma-gl@users.noreply.github.com> Date: Wed, 6 Dec 2023 13:36:00 +0530 Subject: [PATCH] [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 --- .../actions/rule-action.ui-component.html | 5 +++-- .../actions/rule-action.ui-component.scss | 2 +- .../actions/rule-action.ui-component.spec.ts | 13 ++++++------- .../actions/rule-action.ui-component.ts | 12 +++++------- .../components/actions-dropdown.component.ts | 2 +- 5 files changed, 16 insertions(+), 18 deletions(-) diff --git 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 index 32119eb02b..1659e66f3b 100644 --- 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 @@
- + diff --git 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 index 7474178d1f..23e4d9b212 100644 --- 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 @@ -11,6 +11,6 @@ } &-full-width { - width: 100%; + flex: 1; } } diff --git a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.spec.ts b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.spec.ts index 9aed9534df..deedd10504 100644 --- a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.spec.ts +++ b/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); diff --git 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 index 04ab305108..92ed59689a 100644 --- 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 @@ -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) ?? '', diff --git a/projects/aca-playwright-shared/src/page-objects/components/actions-dropdown.component.ts b/projects/aca-playwright-shared/src/page-objects/components/actions-dropdown.component.ts index 475c630119..3a663369b9 100644 --- a/projects/aca-playwright-shared/src/page-objects/components/actions-dropdown.component.ts +++ b/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';