feat: display as a primary button if the actions only has a single item

#4218

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts

@@ -32,7 +32,15 @@ const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExtensibleTableComponent<R = any> implements OnChanges {
-  @Input() actionsText: string;
+  protected _actionsText: string;
+  @Input()
+  set actionsText(value: string) {
+    this._actionsText = value;
+  }
+  get actionsText(): string {
+    return this._actionsText ?? (this.actionList.length > 1 ? 'AbpUi::Actions' : '');
+  }
+
   @Input() data: R[];
   @Input() list: ListService;
   @Input() recordsTotal: number;

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html

@@ -1,4 +1,4 @@
-<div ngbDropdown container="body" class="d-inline-block">
+<div *ngIf="actionList.length !== 1" ngbDropdown container="body" class="d-inline-block">
   <button
     class="btn btn-primary btn-sm dropdown-toggle"
     data-toggle="dropdown"
@@ -8,17 +8,35 @@
     <i [ngClass]="icon" [class.mr-1]="icon"></i>{{ text | abpLocalization }}
   </button>
   <div ngbDropdownMenu>
-    <ng-container *ngFor="let action of actionList; trackBy: trackByFn">
-      <button
-        *ngIf="action.visible(data)"
-        ngbDropdownItem
-        [abpPermission]="action.permission"
-        (click)="action.action(data)"
-        type="button"
-      >
-        <i [ngClass]="action.icon" [class.mr-1]="action.icon"></i>
-        {{ action.text | abpLocalization }}
-      </button>
+    <ng-container
+      *ngFor="let action of actionList; trackBy: trackByFn"
+      [ngTemplateOutlet]="btnItem"
+      [ngTemplateOutletContext]="{ $implicit: action }"
+    >
     </ng-container>
   </div>
 </div>
+
+<ng-container
+  *ngIf="actionList.length === 1"
+  [ngTemplateOutlet]="btnItem"
+  [ngTemplateOutletContext]="{ $implicit: actionList.get(0).value }"
+></ng-container>
+
+<ng-template #btnItem let-action>
+  <button
+    *ngIf="action.visible(data)"
+    ngbDropdownItem
+    [abpPermission]="action.permission"
+    (click)="action.action(data)"
+    type="button"
+    class="{{ actionList.length === 1 ? 'btn btn-primary' : '' }}"
+    [class.text-center]="actionList.length === 1"
+  >
+    <i [ngClass]="action.icon" [class.mr-1]="action.icon"></i>
+    <span *ngIf="action.icon; else ellipsis">{{ action.text | abpLocalization }}</span>
+    <ng-template #ellipsis>
+      <div abpEllipsis>{{ action.text | abpLocalization }}</div>
+    </ng-template>
+  </button>
+</ng-template>