diff --git a/modules/ui/src/app/mocks/testrun.mock.ts b/modules/ui/src/app/mocks/testrun.mock.ts index 48321f2d5..0a26600d5 100644 --- a/modules/ui/src/app/mocks/testrun.mock.ts +++ b/modules/ui/src/app/mocks/testrun.mock.ts @@ -81,11 +81,6 @@ export const TEST_DATA_RESULT_WITH_ERROR: IResult[] = [ }, ]; -export const TEST_DATA_TABLE_RESULT: IResult[] = [ - ...TEST_DATA_RESULT, - ...new Array(23).fill(null).map(() => ({}) as IResult), -]; - export const EMPTY_RESULT = new Array(100) .fill(null) .map(() => ({}) as IResult); diff --git a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html index bf4782666..837761710 100644 --- a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html +++ b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html @@ -14,78 +14,80 @@ limitations under the License. --> - -
- Name - Description - Result - Required result - - - -
+ + + + Name + + + {{ element.name }} + + - - - - - -
- - Steps to resolve -
    -
  • {{ point }}
    • -
- -
- - -
- -
- + + + Description + + + {{ element.description }} + - - - - {{ item.name }} - {{ item.description }} - - - {{ item.result }} - - - - - - {{ item.required_result }} - - - + + + Result + + + + {{ element.result }} + + + + + + + Required Result + + + + + {{ element.required_result }} + + + + + + + + + info + + + + + + + + + diff --git a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.scss b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.scss index d7460f2bf..37cf9bebc 100644 --- a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.scss +++ b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.scss @@ -16,184 +16,51 @@ @use 'colors'; @use 'variables'; -$header-row-height: 56px; -$row-height: 48px; -$row-horizontal-padding: 16px; -$expander-button-size: 28px; - -.tests-container { - display: block; - - &:focus-visible { - outline: none; - border: 1px solid colors.$black; - border-radius: 4px; - } - - & > :last-child { - border-bottom: none; - } -} - -.tests-header-row { - height: 57px; - min-height: $header-row-height; -} - -.tests-item-cell, -.tests-header-cell { - font-family: variables.$font-secondary; - font-size: 14px; - line-height: 20px; - overflow: hidden; - word-wrap: break-word; -} - -.tests-header-cell { - font-weight: 500; - letter-spacing: 0.25px; - padding: 16px; -} - -.tests-item-cell { - padding: 16px; - letter-spacing: 0.2px; - vertical-align: top; - font-weight: 400; -} - -.tests-item-cell-result { - min-width: 140px; - width: 140px; - flex: 0; -} - -.expansion-panel-header, -.expansion-panel-header.mat-expansion-panel-header.mat-expanded { - min-height: $row-height; - height: auto; - - &:focus-visible { - outline: 0; - } -} - -.tests-item-row, -.tests-header-row { +mat-row, +mat-header-row { + min-height: 60px; display: grid; - padding: 0 $row-horizontal-padding; - align-items: center; -} - -.tests-item-row { - min-height: $row-height; height: auto; - grid-template-columns: 1fr 2.2fr 150px 226px 20px; - border-bottom: 1px solid colors.$lighter-grey; -} - -.tests-header-row { - grid-template-columns: 1fr 2.2fr 150px 220px $expander-button-size; + grid-template-columns: 1.2fr 2fr 170px 190px 60px; + border-radius: 8px; } -.expansion-panel-header ::ng-deep.mat-content { - display: grid; - grid-template-columns: 1fr 2.2fr 150px 220px; -} - -.expansion-panel-header ::ng-deep .mat-expansion-indicator { - margin-right: 6px; - margin-left: 10px; - margin-top: 10px; - - &::after { - border-width: 0 3px 3px 0; - padding: 3.5px; - color: colors.$dark-grey; - } -} - -.expansion-panel-header.mat-expanded ::ng-deep .mat-expansion-indicator { - margin-top: 16px; -} - -.tests-container { - .expander-button:hover, - .expansion-panel-row:not(.mat-expanded) - .expansion-panel-header:not([aria-disabled='true']):hover, - .expansion-panel-header:hover, - .expansion-panel-header:hover + ::ng-deep.mat-expansion-panel-content { - background: colors.$color-background-grey; - } -} - -.expansion-panel-row ::ng-deep.mat-expansion-panel-body { - display: grid; - grid-template-columns: 1fr 2.2fr 150px 220px 20px; - grid-template-areas: '. description . . .'; -} - -.cel-description { - grid-area: description; +.clickable-row { + background: colors.$error-container; + cursor: pointer; } -.expander-button, -.expander-button-cell { - display: flex; - padding: 0; - width: $expander-button-size; - height: $expander-button-size; - align-items: center; - justify-content: center; -} - -.expander-button { - mat-icon { - width: $expander-button-size; - height: $expander-button-size; - font-size: $expander-button-size; - color: colors.$dark-grey; +.clickable-row:has(.cell-result-text.red) { + .cell-result-text.red { + color: colors.$white; + background: colors.$on-error-container; } } -.tests-container .tests-header-cell.expander-button-cell { - padding: 2px; -} - -.cel-description-list { - padding: 0 0 0 20px; - margin: 4px 0 0 0; - font-weight: normal; -} - -.expansion-panel-header.mat-focus-indicator:focus::before { - content: none; +mat-cell, +mat-header-cell, +.item-cell { + font-size: 16px; + line-height: 24px; + font-weight: 500; + overflow: hidden; + word-wrap: break-word; + border-bottom-color: colors.$white; } -.expansion-panel-header.mat-focus-indicator:focus-visible::before { - content: ''; +mat-header-cell { + font-weight: 700; } -.expansion-panel-header { +.clickable-icon { display: flex; - align-items: flex-start; - padding: 0 $row-horizontal-padding; - box-sizing: border-box; -} - -.tests-header-row, -.expansion-panel-row { - border-bottom: 1px solid colors.$lighter-grey; -} - -.tests-container .expansion-panel-row { - border-radius: 0; - box-shadow: none; + flex-shrink: 0; } .tests-item-cell-required-result { display: flex; align-items: center; + font-size: 12px; .cell-result-required-icon { display: inline-flex; align-items: center; @@ -208,20 +75,20 @@ $expander-button-size: 28px; } } &.roadmap { - color: #00639b; + color: colors.$secondary; .cell-result-required-icon { - background: #00639b; - color: #e1e3e1; + background: colors.$secondary; + color: colors.$surface-variant; &::before { content: 'road'; } } } &.recommended { - color: #146c2e; + color: colors.$tertiary; .cell-result-required-icon { - background: #146c2e; - color: #ffffff; + background: colors.$tertiary; + color: colors.$white; &::before { font-variation-settings: 'FILL' 1, @@ -234,30 +101,30 @@ $expander-button-size: 28px; } } &.informational { - color: #146c2e; + color: colors.$tertiary; .cell-result-required-icon { - background: #146c2e; - color: #ffffff; + background: colors.$tertiary; + color: colors.$white; &::before { content: 'info_i'; } } } &.required { - color: #1f1f1f; + color: colors.$on-surface; .cell-result-required-icon { - background: #1f1f1f; - color: #e1e3e1; + background: colors.$on-surface; + color: colors.$surface-variant; &::before { content: 'asterisk'; } } } &.required-if-applicable { - color: #00639b; + color: colors.$secondary; .cell-result-required-icon { - background: #00639b; - color: #e1e3e1; + background: colors.$secondary; + color: colors.$surface-variant; &::before { content: 'asterisk'; } diff --git a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.spec.ts b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.spec.ts index f9c56aa01..208cb4420 100644 --- a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.spec.ts +++ b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.spec.ts @@ -28,7 +28,6 @@ import { TEST_DATA_RESULT_WITH_RECOMMENDATIONS, } from '../../../../mocks/testrun.mock'; import { TestRunService } from '../../../../services/test-run.service'; -import { MatExpansionModule } from '@angular/material/expansion'; import { Component, Input } from '@angular/core'; import { MatIconModule } from '@angular/material/icon'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @@ -79,14 +78,6 @@ describe('ProgressTableComponent', () => { ); }); - it('#getAriaLabel should return valid message', () => { - component.isAllCollapsed = true; - - const result = component.getAriaLabel(); - - expect(result).toEqual('Expand all rows'); - }); - it('#getRequiredResultClass should return class', () => { const result1 = component.getRequiredResultClass( RequiredResult.Informational @@ -111,7 +102,6 @@ describe('ProgressTableComponent', () => { providers: [{ provide: TestRunService, useValue: testRunServiceMock }], imports: [ BrowserAnimationsModule, - MatExpansionModule, MatIconModule, TestrunTableComponent, ], @@ -129,7 +119,7 @@ describe('ProgressTableComponent', () => { }); it('should be unavailable', () => { - const tests = compiled.querySelector('.tests-container'); + const tests = compiled.querySelector('mat-table'); expect(tests).toBeNull(); }); @@ -142,43 +132,29 @@ describe('ProgressTableComponent', () => { }); it('should be available', () => { - const tests = compiled.querySelector('.tests-container'); + const tests = compiled.querySelector('mat-table'); expect(tests).not.toBeNull(); }); it('should have rows as provided from data', () => { const expectedRowsLength = (TEST_DATA.results as IResult[]).length; - const testsRows = compiled.querySelectorAll('.tests-row'); + const testsRows = compiled.querySelectorAll('mat-row'); expect(testsRows.length).toBe(expectedRowsLength); }); - - it('should not have expand/collapse button', () => { - const button = compiled.querySelector('.expander-button'); - - expect(button).toBeNull(); - }); }); describe('with recommendations', () => { beforeEach(() => { component.dataSource = TEST_DATA_RESULT_WITH_RECOMMENDATIONS; - component.stepsToResolveCount = 1; fixture.detectChanges(); }); - it('should have expand/collapse button', () => { - const button = compiled.querySelector('.expander-button'); - - expect(button).not.toBeNull(); - expect(button?.ariaLabel).toBe('Collapse row'); - }); - - it('#checkAllCollapsed should return isAllCollapsed', () => { - component.checkAllCollapsed(); + it('should have clickable row', () => { + const clickableRow = compiled.querySelector('mat-row.clickable-row'); - expect(component.isAllCollapsed).toBeFalse(); + expect(clickableRow).not.toBeNull(); }); }); }); diff --git a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.ts b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.ts index 5639ab256..9bf4a44fc 100644 --- a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.ts +++ b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.ts @@ -17,15 +17,8 @@ import { ChangeDetectionStrategy, Component, Input, - viewChild, - viewChildren, inject, } from '@angular/core'; -import { - MatAccordion, - MatExpansionModule, - MatExpansionPanel, -} from '@angular/material/expansion'; import { IResult, StatusResultClassName, @@ -37,11 +30,13 @@ import { MatProgressBarModule } from '@angular/material/progress-bar'; import { CommonModule } from '@angular/common'; import { MatIconModule } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; -import { CalloutComponent } from '../../../../components/callout/callout.component'; -import { MatDialogModule } from '@angular/material/dialog'; +import { MatDialog, MatDialogModule } from '@angular/material/dialog'; import { MatTooltipModule } from '@angular/material/tooltip'; import { ReactiveFormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; +import { MatTableModule } from '@angular/material/table'; +import { MatRippleModule } from '@angular/material/core'; +import { SimpleDialogComponent } from '../../../../components/simple-dialog/simple-dialog.component'; @Component({ selector: 'app-testrun-table', @@ -56,25 +51,43 @@ import { MatButtonModule } from '@angular/material/button'; MatProgressBarModule, MatDialogModule, MatInputModule, - MatExpansionModule, + MatTableModule, + MatRippleModule, ReactiveFormsModule, - CalloutComponent, MatTooltipModule, ], }) export class TestrunTableComponent { private readonly testRunService = inject(TestRunService); - - readonly accordion = viewChild.required(MatAccordion); - readonly panels = viewChildren(MatExpansionPanel); public readonly CalloutType = CalloutType; @Input() dataSource!: IResult[] | undefined; - @Input() stepsToResolveCount = 0; - isAllCollapsed!: boolean; - public checkAllCollapsed(): void { - this.isAllCollapsed = this.panels().every(panel => !panel.expanded); + dialog = inject(MatDialog); + + displayedColumns: string[] = [ + 'name', + 'description', + 'result', + 'requiredResult', + 'clickableIcon', + ]; + + onRowSelected(row: IResult) { + // TODO: Will be updated. Testing modal will be implemented in the next ticket + this.dialog.open(SimpleDialogComponent, { + ariaLabel: 'Selected test will be updated', + data: { + title: `${row.name}`, + content: `Selected test info will be updated`, + }, + autoFocus: true, + hasBackdrop: true, + disableClose: true, + panelClass: ['simple-dialog'], + }); } + isClickableRow = (i: number, row: IResult) => row.recommendations; + public getResultClass(result: string): StatusResultClassName { return this.testRunService.getResultClass(result); } @@ -86,12 +99,6 @@ export class TestrunTableComponent { return result.split(' ').join('-').toLowerCase(); } - public getAriaLabel(): string { - const action = this.isAllCollapsed ? 'Expand' : 'Collapse'; - const message = this.stepsToResolveCount === 1 ? 'row' : 'all rows'; - return `${action} ${message}`; - } - public trackTest(index: number, item: IResult) { return item.name + item.result; } diff --git a/modules/ui/src/app/pages/testrun/testrun.component.html b/modules/ui/src/app/pages/testrun/testrun.component.html index b38c0eb3b..a9fd75a2a 100644 --- a/modules/ui/src/app/pages/testrun/testrun.component.html +++ b/modules/ui/src/app/pages/testrun/testrun.component.html @@ -62,9 +62,7 @@ [class.progress-table-progress-empty]=" isTestrunInProgress(data.status) "> - +