RED-6154, added ids to settings > audit page.

apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html

@@ -27,8 +27,12 @@
         <form [formGroup]="form">
             <div class="iqser-input-group w-150 mr-20">
                 <mat-form-field>
-                    <mat-select (selectionChange)="filterChange()" formControlName="category">
-                        <mat-option *ngFor="let category of categories" [value]="category">
+                    <mat-select (selectionChange)="filterChange()" formControlName="category" id="select-category">
+                        <mat-option
+                            *ngFor="let category of categories"
+                            [value]="category"
+                            [id]="'select-category-' + category.toLocaleLowerCase()"
+                        >
                             {{ (translations[category] | translate) || category }}
                         </mat-option>
                     </mat-select>
@@ -37,7 +41,7 @@
 
             <div class="iqser-input-group w-150">
                 <mat-form-field>
-                    <mat-select (selectionChange)="filterChange()" formControlName="userId">
+                    <mat-select (selectionChange)="filterChange()" formControlName="userId" id="select-users">
                         <mat-select-trigger>
                             <iqser-initials-avatar
                                 *ngIf="form.get('userId').value !== ALL_USERS"
@@ -48,7 +52,7 @@
                             <div *ngIf="form.get('userId').value === ALL_USERS" [translate]="ALL_USERS"></div>
                         </mat-select-trigger>
 
-                        <mat-option *ngFor="let userId of userIds" [value]="userId">
+                        <mat-option *ngFor="let userId of userIds" [value]="userId" [id]="'select-user-' + userId">
                             <iqser-initials-avatar *ngIf="userId !== ALL_USERS" [user]="userId" [withName]="true"></iqser-initials-avatar>
 
                             <div *ngIf="userId === ALL_USERS" [translate]="ALL_USERS"></div>
@@ -60,7 +64,13 @@
             <div class="separator">·</div>
 
             <div class="iqser-input-group datepicker-wrapper mr-20">
-                <input (dateChange)="filterChange()" [matDatepicker]="fromPicker" formControlName="from" placeholder="dd/mm/yy" />
+                <input
+                    id="start-date-input"
+                    (dateChange)="filterChange()"
+                    [matDatepicker]="fromPicker"
+                    formControlName="from"
+                    placeholder="dd/mm/yy"
+                />
                 <mat-datepicker-toggle [for]="fromPicker" matSuffix>
                     <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
                 </mat-datepicker-toggle>
@@ -70,7 +80,13 @@
             <div class="mr-20" translate="audit-screen.to"></div>
 
             <div class="iqser-input-group datepicker-wrapper">
-                <input (dateChange)="filterChange()" [matDatepicker]="toPicker" formControlName="to" placeholder="dd/mm/yy" />
+                <input
+                    id="end-date-input"
+                    (dateChange)="filterChange()"
+                    [matDatepicker]="toPicker"
+                    formControlName="to"
+                    placeholder="dd/mm/yy"
+                />
                 <mat-datepicker-toggle [for]="toPicker" matSuffix>
                     <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
                 </mat-datepicker-toggle>

apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.scss

@@ -1,5 +1,11 @@
-:host ::ng-deep iqser-table iqser-table-header .header-item {
-    justify-content: space-between;
+:host ::ng-deep {
+    iqser-table iqser-table-header .header-item {
+        justify-content: space-between;
+    }
+
+    .mat-mdc-form-field .mat-mdc-text-field-wrapper {
+        border-radius: 10px;
+    }
 }
 
 form {

apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.html

@@ -1,4 +1,10 @@
-<div (click)="selectPage(currentPage - 1)" [class.disabled]="currentPage < 1" class="page" translate="pagination.previous"></div>
+<div
+    id="pagination-prev-page-btn"
+    (click)="selectPage(currentPage - 1)"
+    [class.disabled]="currentPage < 1"
+    class="page"
+    translate="pagination.previous"
+></div>
 <span>|</span>
 <div
     (click)="selectPage(page)"
@@ -6,8 +12,15 @@
     [class.active]="page === currentPage"
     [class.dots]="page === '...'"
     class="page"
+    [id]="isNumber(page) ? 'pagination-select-page-' + page + '-btn' : 'pagination-pages-between'"
 >
     {{ displayValue(page) }}
 </div>
 <span>|</span>
-<div (click)="selectPage(currentPage + 1)" [class.disabled]="currentPage === totalPages - 1" class="page" translate="pagination.next"></div>
+<div
+    id="pagination-next-page-btn"
+    (click)="selectPage(currentPage + 1)"
+    [class.disabled]="currentPage === totalPages - 1"
+    class="page"
+    translate="pagination.next"
+></div>

apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.ts

@@ -40,6 +40,10 @@ export class PaginationComponent {
         return page === '...' ? page : (page as number) + 1;
     }
 
+    isNumber(page) {
+        return Number.isInteger(page);
+    }
+
     private _updatePagesArray() {
         this.displayedPages = [0];
         if (Math.max(1, this.currentPage - 1) > 1) {