AAE-28454 Improve datatable actions display (#10445)

* AAE-28454 Improve datatable actions display

* AAE-28454 Improve datatable style

lib/core/src/lib/datatable/components/datatable/datatable.component.html

@@ -31,12 +31,15 @@
                 <mat-checkbox [indeterminate]="isSelectAllIndeterminate" [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)" class="adf-checkbox-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate }}</mat-checkbox>
             </div>
 
-            <div
+            <ng-container
-                class="adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-header adf-datatable-cell-data"
                 *ngFor="
                 let col of getVisibleColumns();
                 let columnIndex = index
                 let lastColumn = last"
+            >
+            <div
+            class="adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-header adf-datatable-cell-data"
+            *ngIf="col.title || !showProvidedActions"
             [attr.data-automation-id]="'auto_id_' + col.key"
             [ngClass]="{
                 'adf-sortable': col.sortable,
@@ -120,12 +123,14 @@
             </div>
             <div class="adf-drop-header-cell-placeholder" *cdkDragPlaceholder></div>
         </div>
+            </ng-container>
 
             <!-- Header actions (right) -->
             <div
                 *ngIf="(actions && actionsPosition === 'right') ||
                        (mainActionTemplate && showMainDatatableActions)"
                 class="adf-actions-column adf-datatable-actions-menu adf-datatable-cell-header adf-datatable__actions-cell"
+                [class.adf-datatable-actions-menu-provided]="showProvidedActions"
             >
                 <ng-container *ngIf="mainActionTemplate">
                     <button
@@ -367,8 +372,9 @@
 
                 <!-- Row actions (right) -->
                 <div *ngIf="
-                        (actions && actionsPosition === 'right') ||
+                        !showProvidedActions &&
-                        (mainActionTemplate && showMainDatatableActions)"
+                        ((actions && actionsPosition === 'right') ||
+                        (mainActionTemplate && showMainDatatableActions))"
                      role="gridcell"
                      tabindex="0"
                      class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-center-actions-column-ie adf-datatable-actions-menu">

lib/core/src/lib/datatable/components/datatable/datatable.component.scss

@@ -324,6 +324,12 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
         margin-left: auto;
         justify-content: end;
         padding-right: 15px;
+
+        &-provided {
+            max-width: 100px !important;
+            justify-content: center;
+            padding-right: 0;
+        }
     }
 
     .adf-datatable-checkbox {

lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts

@@ -2188,4 +2188,95 @@ describe('Column Resizing', () => {
         dataTable.onDragDrop(data as CdkDragDrop<any>);
         expect(dataTable.dragDropped.emit).toHaveBeenCalledWith(data);
     });
+
+    describe('show correct column count', () => {
+        it('should display 2 columns for no provided actions and no default actions', () => {
+            dataTable.data = new ObjectDataTableAdapter(
+                [{ name: '1' }],
+                [new ObjectDataColumn({ key: 'name', title: 'Name', sortable: true }), new ObjectDataColumn({ key: 'other', title: 'Other', sortable: true })]
+            );
+
+            fixture.detectChanges();
+    
+            const visibleColumns = dataTable.getVisibleColumns();
+    
+            const datatableCellHeaders = fixture.debugElement.queryAll(By.css('.adf-datatable-cell-header'));
+            const datatableCells = fixture.debugElement.queryAll(By.css('.adf-datatable-cell'));
+    
+            expect(visibleColumns.length).toBe(2);
+
+            const expectedNumberOfColumns = 2;
+
+            expect(datatableCellHeaders.length).toBe(expectedNumberOfColumns);
+            expect(datatableCells.length).toBe(expectedNumberOfColumns);
+        });
+
+        it('should display 2 columns if last column has no title and there are no provided actions and no default actions', () => {
+            dataTable.data = new ObjectDataTableAdapter(
+                [{ name: '1' }],
+                [new ObjectDataColumn({ key: 'name', title: 'Name', sortable: true }), new ObjectDataColumn({ key: 'other', sortable: true })]
+            );
+            
+            fixture.detectChanges();
+    
+            const visibleColumns = dataTable.getVisibleColumns();
+    
+            const datatableCellHeaders = fixture.debugElement.queryAll(By.css('.adf-datatable-cell-header'));
+            const datatableCells = fixture.debugElement.queryAll(By.css('.adf-datatable-cell'));
+    
+            expect(visibleColumns.length).toBe(2);
+
+            const expectedNumberOfColumns = 2;
+
+            expect(datatableCellHeaders.length).toBe(expectedNumberOfColumns);
+            expect(datatableCells.length).toBe(expectedNumberOfColumns);
+        });
+
+        it('should display 3 columns if there are default actions', () => {
+            dataTable.data = new ObjectDataTableAdapter(
+                [{ name: '1' }],
+                [new ObjectDataColumn({ key: 'name', title: 'Name', sortable: true }), new ObjectDataColumn({ key: 'other', title: 'Other', sortable: true })]
+            );
+
+            dataTable.actions = true;
+            
+            fixture.detectChanges();
+    
+            const visibleColumns = dataTable.getVisibleColumns();
+    
+            const datatableCellHeaders = fixture.debugElement.queryAll(By.css('.adf-datatable-cell-header'));
+            const datatableCells = fixture.debugElement.queryAll(By.css('.adf-datatable-cell'));
+    
+            expect(visibleColumns.length).toBe(2);
+
+            const expectedNumberOfColumns = 3;
+
+            expect(datatableCellHeaders.length).toBe(expectedNumberOfColumns);
+            expect(datatableCells.length).toBe(expectedNumberOfColumns);
+        });
+
+        it('should display 2 columns if there are default actions and provided actions', () => {
+            dataTable.data = new ObjectDataTableAdapter(
+                [{ name: '1' }],
+                [new ObjectDataColumn({ key: 'name', title: 'Name', sortable: true }), new ObjectDataColumn({ key: 'other', sortable: true })]
+            );
+
+            dataTable.actions = true;
+            dataTable.showProvidedActions = true;
+            
+            fixture.detectChanges();
+    
+            const visibleColumns = dataTable.getVisibleColumns();
+    
+            const datatableCellHeaders = fixture.debugElement.queryAll(By.css('.adf-datatable-cell-header'));
+            const datatableCells = fixture.debugElement.queryAll(By.css('.adf-datatable-cell'));
+    
+            expect(visibleColumns.length).toBe(2);
+
+            const expectedNumberOfColumns = 2;
+
+            expect(datatableCellHeaders.length).toBe(expectedNumberOfColumns);
+            expect(datatableCells.length).toBe(expectedNumberOfColumns);
+        });
+    });
 });

lib/core/src/lib/datatable/components/datatable/datatable.component.ts

@@ -178,6 +178,10 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
     @Input()
     showMainDatatableActions: boolean = false;
 
+    /** Toggles the provided actions. */
+    @Input()
+    showProvidedActions: boolean = false;
+
     /** Position of the actions dropdown menu. Can be "left" or "right". */
     @Input()
     actionsPosition: string = 'right'; // left|right

lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html

@@ -11,6 +11,7 @@
         [actionsPosition]="actionsPosition"
         [contextMenu]="showContextMenu"
         [showMainDatatableActions]="showMainDatatableActions"
+        [showProvidedActions]="showProvidedActions"
         [isResizingEnabled]="isResizingEnabled"
         (showRowActionsMenu)="onShowRowActionsMenu($event)"
         (showRowContextMenu)="onShowRowContextMenu($event)"

lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts

@@ -192,6 +192,10 @@ export class ProcessListCloudComponent
     @Input()
     showActions: boolean = false;
 
+    /** Toggles the provided actions. */
+    @Input()
+    showProvidedActions: boolean = false;
+
     /** Position of the actions dropdown menu. Can be "left" or "right". */
     @Input()
     actionsPosition: string = 'right'; // left|right