From 199d31f1cd85efa89ff7c7430ab99975c68edb7d Mon Sep 17 00:00:00 2001 From: MichalKinas <113341662+MichalKinas@users.noreply.github.com> Date: Wed, 8 Oct 2025 13:18:16 +0200 Subject: [PATCH] [ACS-10286] Add label and aria expanded to the rule set header (#4834) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [ACS-10286] Add proper role and aria attributes to rule section header * [ACS-10286] Add unit tests and main rule set coverage * [ACS-10286] Rework component to use material expansion panel * [ACS-10286] CR changes * [ACS-10286] excluded XAT-907 --------- Co-authored-by: Adam Świderski --- .../folder-rules/exclude.tests.json | 3 +- .../folder-rules/assets/i18n/en.json | 3 +- .../manage-rules.smart-component.spec.ts | 2 +- .../rule-list/rule-list.ui-component.html | 160 +++++++++--------- .../rule-list/rule-list.ui-component.scss | 43 ++--- .../rule-list/rule-list.ui-component.ts | 8 +- 6 files changed, 111 insertions(+), 108 deletions(-) diff --git a/e2e/playwright/folder-rules/exclude.tests.json b/e2e/playwright/folder-rules/exclude.tests.json index f8b191b0a..b44c2ae8d 100644 --- a/e2e/playwright/folder-rules/exclude.tests.json +++ b/e2e/playwright/folder-rules/exclude.tests.json @@ -1,3 +1,4 @@ { - "XAT-897": "https://hyland.atlassian.net/browse/ACS-5503" + "XAT-897": "https://hyland.atlassian.net/browse/ACS-5503", + "XAT-907": "https://hyland.atlassian.net/browse/ACS-10486" } diff --git a/projects/aca-content/folder-rules/assets/i18n/en.json b/projects/aca-content/folder-rules/assets/i18n/en.json index 76deda526..37361809d 100644 --- a/projects/aca-content/folder-rules/assets/i18n/en.json +++ b/projects/aca-content/folder-rules/assets/i18n/en.json @@ -126,7 +126,8 @@ "LOADING_RULES": "Loading rules", "TOGGLE_RULE_STATE": "Toggle {{ name }} rule", "INHERITED_RULES_WILL_BE_RUN_FIRST": "Inherited rules will be run first", - "ALL_LINKED_RULES_ARE_DISABLED": "All rules linked from this rule set are disabled" + "ALL_LINKED_RULES_ARE_DISABLED": "All rules linked from this rule set are disabled", + "EDIT_LINK_LABEL": "Link rules from another folder" }, "LINK_RULES_DIALOG": { "TITLE": "Select a folder to link rules from", diff --git a/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.spec.ts b/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.spec.ts index 676d2d31d..b992b4826 100644 --- a/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.spec.ts +++ b/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.spec.ts @@ -172,7 +172,7 @@ describe('ManageRulesSmartComponent', () => { expect(component).toBeTruthy(); expect(folderRuleSetsService.loadRuleSets).toHaveBeenCalledOnceWith(component.nodeId); - const ruleGroupingSections = unitTestingUtils.getAllByCSS(`[data-automation-id="rule-list-item"]`); + const ruleGroupingSections = unitTestingUtils.getAllByCSS('.aca-rule-list__item'); const deleteRuleBtn = unitTestingUtils.getByCSS('#delete-rule-btn'); diff --git a/projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.html b/projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.html index 1a68ab0b5..e7cde4509 100644 --- a/projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.html +++ b/projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.html @@ -1,87 +1,83 @@ -
+ + @if (inheritedRuleSetGroupingItems.length > 0) { + + + + + {{ 'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES' | translate }} + + info + + + + + + + } + @if (mainRuleSetGroupingItems.length > 0 || isMainRuleSetLinked) { + + + + + @if (isMainRuleSetOwned) { + {{ 'ACA_FOLDER_RULES.RULE_LIST.OWNED_RULES' | translate }} + } @else { + {{ 'ACA_FOLDER_RULES.RULE_LIST.LINKED_RULES' | translate }} + } + -
+ @if (!isMainRuleSetOwned) { + + edit + + + link_off + + } + - - {{ 'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES' | translate }} - - info - - - - {{ inheritedRuleSetsExpanded ? 'expand_more' : 'chevron_right' }} - -
- - -
- -
- -
- - - - {{ 'ACA_FOLDER_RULES.RULE_LIST.OWNED_RULES' | translate }} - - - {{ 'ACA_FOLDER_RULES.RULE_LIST.LINKED_RULES' | translate }} - - - - - edit - link_off - - - - {{ mainRuleSetExpanded ? 'expand_more' : 'chevron_right' }} - -
- - - - - + + @if (mainRuleSetGroupingItems.length > 0) { + + } @else {
{{ 'ACA_FOLDER_RULES.RULE_LIST.ALL_LINKED_RULES_ARE_DISABLED' | translate }} - + @if (mainRuleSet?.owningFolder?.id) { + + }
- - - -
+ } + + } + diff --git a/projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.scss b/projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.scss index e95b8d847..44fa1c2c6 100644 --- a/projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.scss +++ b/projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.scss @@ -1,26 +1,33 @@ +/* stylelint-disable selector-class-pattern */ +@use '@angular/material' as mat; + .aca-rule-list { - display: flex; - flex-direction: column; - overflow-y: auto; - gap: 8px; + @include mat.expansion-overrides( + ( + container-background-color: var(--theme-background-color), + header-text-color: var(--theme-text-color), + container-shape: 12px + ) + ); &__item { - display: flex; - flex-direction: column; border: 1px solid var(--theme-border-color); border-radius: 12px; - overflow: hidden; + /* stylelint-disable-next-line declaration-no-important */ + box-shadow: none !important; + + .mat-expansion-panel-body { + padding: 0; + } &__header { - display: flex; - flex-direction: row; - gap: 4px; - align-items: stretch; - cursor: pointer; - color: var(--theme-text-color); - user-select: none; font-size: 0.9em; - padding: 0.5em 1em; + padding: 0 16px; + + &.mat-expanded { + border-bottom: 1px solid var(--theme-border-color); + border-radius: 0; + } & > * { display: flex; @@ -41,12 +48,6 @@ } } - &.aca-expanded { - .aca-rule-list__item__header { - border-bottom: 1px solid var(--theme-border-color); - } - } - &__all-linked-rules-are-disabled { display: flex; flex-direction: column; diff --git a/projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.ts b/projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.ts index 63c5fa210..f13913489 100644 --- a/projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.ts +++ b/projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.ts @@ -31,6 +31,7 @@ import { CommonModule } from '@angular/common'; import { TranslatePipe } from '@ngx-translate/core'; import { MatRippleModule } from '@angular/material/core'; import { MatIconModule } from '@angular/material/icon'; +import { MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle } from '@angular/material/expansion'; import { MatTooltipModule } from '@angular/material/tooltip'; import { RuleListGroupingUiComponent } from '../rule-list-grouping/rule-list-grouping.ui-component'; import { RouterModule } from '@angular/router'; @@ -47,7 +48,11 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; MatTooltipModule, RuleListGroupingUiComponent, RouterModule, - MatButtonModule + MatButtonModule, + MatAccordion, + MatExpansionPanel, + MatExpansionPanelHeader, + MatExpansionPanelTitle ], selector: 'aca-rule-list', templateUrl: './rule-list.ui-component.html', @@ -83,7 +88,6 @@ export class RuleListUiComponent implements OnInit { ruleSetUnlinkClicked = new EventEmitter(); mainRuleSet: RuleSet = null; - inheritedRuleSetsExpanded = true; mainRuleSetExpanded = true; mainRuleSetGroupingItems: RuleGroupingItem[] = []; inheritedRuleSetGroupingItems: RuleGroupingItem[] = [];