UI: Add copy button checksum

@@ -39,7 +39,7 @@ export class OtaPackageService {
   }
 
   public getOtaPackagesInfoByDeviceProfileId(pageLink: PageLink, deviceProfileId: string, type: OtaUpdateType,
-                                             hasData = true, config?: RequestConfig): Observable<PageData<OtaPackageInfo>> {
+                                             config?: RequestConfig): Observable<PageData<OtaPackageInfo>> {
     const url = `/api/otaPackages/${deviceProfileId}/${type}${pageLink.toQuery()}`;
     return this.http.get<PageData<OtaPackageInfo>>(url, defaultHttpOptionsFromConfig(config));
   }

@@ -163,8 +163,34 @@
                         *matCellDef="let entity; let row = index"
                         [matTooltip]="cellTooltip(entity, column, row)"
                         matTooltipPosition="above"
-                        [innerHTML]="cellContent(entity, column, row)"
                         [ngStyle]="cellStyle(entity, column, row)">
+                <span [innerHTML]="cellContent(entity, column, row)"></span>
+                <ng-template [ngIf]="column.actionCell.name">
+                  <ng-container [ngSwitch]="column.actionCell.type">
+                    <ng-template [ngSwitchCase]="cellActionType.COPY_BUTTON">
+                      <tb-copy-button
+                        [disabled]="isLoading$ | async"
+                        [fxShow]="column.actionCell.isEnabled(entity)"
+                        [copyText]="column.actionCell.onAction(null, entity)"
+                        tooltipText="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
+                        tooltipPosition="above"
+                        [icon]="column.actionCell.icon"
+                        [mdiIcon]="column.actionCell.mdiIcon" [style]="column.actionCell.style">
+                      </tb-copy-button>
+                    </ng-template>
+                    <ng-template ngSwitchDefault>
+                      <button mat-icon-button [disabled]="isLoading$ | async"
+                              [fxShow]="column.actionCell.isEnabled(entity)"
+                              matTooltip="{{ column.actionCell.nameFunction ? column.actionCell.nameFunction(entity) : column.actionCell.name }}"
+                              matTooltipPosition="above"
+                              (click)="column.actionCell.onAction($event, entity)">
+                        <mat-icon [svgIcon]="column.actionCell.mdiIcon" [ngStyle]="column.actionCell.style">
+                          {{column.actionCell.icon}}
+                        </mat-icon>
+                      </button>
+                    </ng-template>
+                  </ng-container>
+                </ng-template>
               </mat-cell>
             </ng-container>
             <ng-container [matColumnDef]="column.key" *ngFor="let column of actionColumns; trackBy: trackByColumnKey;">

@@ -43,7 +43,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { BaseData, HasId } from '@shared/models/base-data';
 import { ActivatedRoute } from '@angular/router';
 import {
-  CellActionDescriptor,
+  CellActionDescriptor, CellActionDescriptorType,
   EntityActionTableColumn,
   EntityColumn,
   EntityTableColumn,
@@ -104,6 +104,8 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
   timewindow: Timewindow;
   dataSource: EntitiesDataSource<BaseData<HasId>>;
 
+  cellActionType = CellActionDescriptorType;
+
   isDetailsOpen = false;
   detailsPanelOpened = new EventEmitter<boolean>();
 

@@ -48,6 +48,9 @@ export type CellContentFunction<T extends BaseData<HasId>> = (entity: T, key: st
 export type CellTooltipFunction<T extends BaseData<HasId>> = (entity: T, key: string) => string | undefined;
 export type HeaderCellStyleFunction<T extends BaseData<HasId>> = (key: string) => object;
 export type CellStyleFunction<T extends BaseData<HasId>> = (entity: T, key: string) => object;
+export type CopyCellContent<T extends BaseData<HasId>> = (entity: T, key: string, length: number) => object;
+
+export enum CellActionDescriptorType { 'DEFAULT', 'COPY_BUTTON'}
 
 export interface CellActionDescriptor<T extends BaseData<HasId>> {
   name: string;
@@ -56,7 +59,8 @@ export interface CellActionDescriptor<T extends BaseData<HasId>> {
   mdiIcon?: string;
   style?: any;
   isEnabled: (entity: T) => boolean;
-  onAction: ($event: MouseEvent, entity: T) => void;
+  onAction: ($event: MouseEvent, entity: T) => any;
+  type?: CellActionDescriptorType;
 }
 
 export interface GroupActionDescriptor<T extends BaseData<HasId>> {
@@ -95,7 +99,8 @@ export class EntityTableColumn<T extends BaseData<HasId>> extends BaseEntityTabl
               public sortable: boolean = true,
               public headerCellStyleFunction: HeaderCellStyleFunction<T> = () => ({}),
               public cellTooltipFunction: CellTooltipFunction<T> = () => undefined,
-              public isNumberColumn: boolean = false) {
+              public isNumberColumn: boolean = false,
+              public actionCell: CellActionDescriptor<T> = {isEnabled: () => false, name: null, onAction: () => ({})}) {
     super('content', key, title, width, sortable);
   }
 }
@@ -187,3 +192,7 @@ export class EntityTableConfig<T extends BaseData<HasId>, P extends PageLink = P
 export function checkBoxCell(value: boolean): string {
   return `<mat-icon class="material-icons mat-icon">${value ? 'check_box' : 'check_box_outline_blank'}</mat-icon>`;
 }
+
+export function copyCellContent(value: string): string {
+  return `<mat-icon class="material-icons mat-icon">${value ? 'check_box' : 'check_box_outline_blank'}</mat-icon>`;
+}

@@ -17,6 +17,7 @@
 import { Injectable } from '@angular/core';
 import { Resolve } from '@angular/router';
 import {
+  CellActionDescriptorType,
   DateEntityTableColumn,
   EntityTableColumn,
   EntityTableConfig
@@ -61,27 +62,46 @@ export class OtaUpdateTableConfigResolve implements Resolve<EntityTableConfig<Ot
 
     this.config.columns.push(
       new DateEntityTableColumn<OtaPackageInfo>('createdTime', 'common.created-time', this.datePipe, '150px'),
-      new EntityTableColumn<OtaPackageInfo>('title', 'ota-update.title', '25%'),
-      new EntityTableColumn<OtaPackageInfo>('version', 'ota-update.version', '25%'),
-      new EntityTableColumn<OtaPackageInfo>('type', 'ota-update.package-type', '25%', entity => {
+      new EntityTableColumn<OtaPackageInfo>('title', 'ota-update.title', '20%'),
+      new EntityTableColumn<OtaPackageInfo>('version', 'ota-update.version', '20%'),
+      new EntityTableColumn<OtaPackageInfo>('type', 'ota-update.package-type', '20%', entity => {
         return this.translate.instant(OtaUpdateTypeTranslationMap.get(entity.type));
       }),
-      new EntityTableColumn<OtaPackageInfo>('fileName', 'ota-update.file-name', '25%'),
+      new EntityTableColumn<OtaPackageInfo>('url', 'ota-update.url', '20%', entity => {
+          return entity.url && entity.url.length > 20 ? `${entity.url.slice(0, 20)}…` : '';
+        }, () => ({}), true, () => ({}), () => undefined, false,
+        {
+          name: this.translate.instant('ota-update.copy-checksum'),
+          icon: 'content_paste',
+          style: {
+            'font-size': '16px',
+            color: 'rgba(0,0,0,.87)'
+          },
+          isEnabled: (otaPackage) => !!otaPackage.url,
+          onAction: ($event, entity) => entity.url,
+          type: CellActionDescriptorType.COPY_BUTTON
+        }),
+      new EntityTableColumn<OtaPackageInfo>('fileName', 'ota-update.file-name', '20%'),
       new EntityTableColumn<OtaPackageInfo>('dataSize', 'ota-update.file-size', '70px', entity => {
         return entity.dataSize ? this.fileSize.transform(entity.dataSize) : '';
       }),
-      new EntityTableColumn<OtaPackageInfo>('checksum', 'ota-update.checksum', '540px', entity => {
-        return entity.checksum ? `${ChecksumAlgorithmTranslationMap.get(entity.checksumAlgorithm)}: ${entity.checksum}` : '';
-      }, () => ({}), false)
-    );
-
-    this.config.cellActionDescriptors.push(
+      new EntityTableColumn<OtaPackageInfo>('checksum', 'ota-update.checksum', '220px', entity => {
+        return entity.checksum ? this.checksumText(entity) : '';
+      }, () => ({}), true, () => ({}), () => undefined, false,
       {
         name: this.translate.instant('ota-update.copy-checksum'),
-        icon: 'content_copy',
+        icon: 'content_paste',
+        style: {
+          'font-size': '16px',
+          color: 'rgba(0,0,0,.87)'
+        },
         isEnabled: (otaPackage) => !!otaPackage.checksum,
-        onAction: ($event, entity) => this.copyPackageChecksum($event, entity)
-      },
+        onAction: ($event, entity) => entity.checksum,
+        type: CellActionDescriptorType.COPY_BUTTON
+      })
+    );
+
+    this.config.cellActionDescriptors.push(
       {
         name: this.translate.instant('ota-update.download'),
         icon: 'file_download',
@@ -120,19 +140,12 @@ export class OtaUpdateTableConfigResolve implements Resolve<EntityTableConfig<Ot
     }
   }
 
-  copyPackageChecksum($event: Event, otaPackageInfo: OtaPackageInfo) {
-    if ($event) {
-      $event.stopPropagation();
+  checksumText(entity): string {
+    let text = `${ChecksumAlgorithmTranslationMap.get(entity.checksumAlgorithm)}: ${entity.checksum}`;
+    if (text.length > 20) {
+      text = `${text.slice(0, 20)}…`;
     }
-    this.clipboardService.copy(otaPackageInfo?.checksum);
-    this.store.dispatch(new ActionNotificationShow(
-      {
-        message: this.translate.instant('ota-update.checksum-copied-message'),
-        type: 'success',
-        duration: 750,
-        verticalPosition: 'bottom',
-        horizontalPosition: 'right'
-      }));
+    return text;
   }
 
   onPackageAction(action: EntityAction<OtaPackageInfo>): boolean {
@@ -140,9 +153,6 @@ export class OtaUpdateTableConfigResolve implements Resolve<EntityTableConfig<Ot
       case 'uploadPackage':
         this.exportPackage(action.event, action.entity);
         return true;
-      case 'copyChecksum':
-        this.copyPackageChecksum(action.event, action.entity);
-        return true;
     }
     return false;
   }

@@ -31,7 +31,6 @@
   <div fxLayout="row" fxLayout.xs="column">
     <button mat-raised-button
             ngxClipboard
-            [disabled]="(isLoading$ | async)"
             (cbOnSuccess)="onPackageIdCopied()"
             [cbContent]="entity?.id?.id"
             [fxShow]="!isEdit">
@@ -39,9 +38,10 @@
       <span translate>ota-update.copyId</span>
     </button>
     <button mat-raised-button
-            [disabled]="(isLoading$ | async)"
-            (click)="onEntityAction($event, 'copyChecksum')"
-            [fxShow]="!isEdit && entity?.checksum">
+            ngxClipboard
+            (cbOnSuccess)="onPackageChecksumCopied()"
+            [cbContent]="entity?.checksum"
+            [fxShow]="!isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>ota-update.copy-checksum</span>
     </button>

@@ -149,6 +149,17 @@ export class OtaUpdateComponent extends EntityComponent<OtaPackage> implements O
       }));
   }
 
+  onPackageChecksumCopied() {
+    this.store.dispatch(new ActionNotificationShow(
+      {
+        message: this.translate.instant('ota-update.checksum-copied-message'),
+        type: 'success',
+        duration: 750,
+        verticalPosition: 'bottom',
+        horizontalPosition: 'right'
+      }));
+  }
+
   prepareFormValue(formValue: any): any {
     delete formValue.resource;
     delete formValue.generateChecksum;

+<!--
+
+    Copyright © 2016-2021 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<button mat-icon-button
+        #tooltip
+        [disabled]="disabled"
+        [matTooltip]="matTooltipText"
+        [matTooltipPosition]="matTooltipPosition"
+        (mouseenter)="copied ? $event.stopImmediatePropagation():''"
+        (mouseleave)="copied ? $event.stopImmediatePropagation():''"
+        (click)="copy($event)">
+  <mat-icon [svgIcon]="mdiIconSymbol" [ngStyle]="style" [ngClass]="{'copied': copied}">
+    {{ iconSymbol }}
+  </mat-icon>
+</button>

+/**
+ * Copyright © 2016-2021 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:host {
+  .mat-icon-button{
+    height: 32px;
+    width: 32px;
+    line-height: 32px;
+    .mat-icon.copied{
+      color: #00C851!important;
+    }
+  }
+  &:hover{
+    .mat-icon{
+      color: #28567E !important;
+    }
+  }
+}

+///
+/// Copyright © 2016-2021 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { ChangeDetectorRef, Component, Input, ViewChild } from '@angular/core';
+import { ClipboardService } from 'ngx-clipboard';
+import { MatTooltip, TooltipPosition } from '@angular/material/tooltip/tooltip';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'tb-copy-button',
+  styleUrls: ['copy-button.component.scss'],
+  templateUrl: './copy-button.component.html'
+})
+export class CopyButtonComponent {
+
+  private copedIcon = '';
+  private timer;
+
+  copied = false;
+
+  @Input()
+  copyText: string;
+
+  @Input()
+  disabled = false;
+
+  @Input()
+  mdiIcon: string;
+
+  @Input()
+  icon: string;
+
+  @Input()
+  tooltipText: string;
+
+  @Input()
+  tooltipPosition: TooltipPosition;
+
+  @Input()
+  style: {[key: string]: any} = {};
+
+  constructor(private clipboardService: ClipboardService,
+              private translate: TranslateService,
+              private cd: ChangeDetectorRef) {
+  }
+
+  @ViewChild('tooltip', {static: true}) tooltip: MatTooltip;
+
+  copy($event: Event): void {
+    $event.stopPropagation();
+    $event.preventDefault();
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+    this.clipboardService.copy(this.copyText);
+    this.copedIcon = 'done';
+    this.copied = true;
+    this.tooltip.show();
+    this.timer = setTimeout(() => {
+      this.copedIcon = null;
+      this.copied = false;
+      this.tooltip.hide();
+      this.cd.detectChanges();
+    }, 1500);
+  }
+
+  get iconSymbol(): string {
+    return this.copedIcon || this.icon;
+  }
+
+  get mdiIconSymbol(): string {
+    return this.copedIcon ? '' : this.mdiIcon;
+  }
+
+  get matTooltipText(): string {
+    return this.copied ? this.translate.instant('ota-update.copied') : this.tooltipText;
+  }
+
+  get matTooltipPosition(): TooltipPosition {
+    return this.copied ? 'below' : this.tooltipPosition;
+  }
+}

@@ -216,7 +216,7 @@ export class OtaPackageAutocompleteComponent implements ControlValueAccessor, On
       direction: Direction.ASC
     });
     return this.otaPackageService.getOtaPackagesInfoByDeviceProfileId(pageLink, this.deviceProfileId, this.type,
-                                                          true, {ignoreLoading: true}).pipe(
+                                                                {ignoreLoading: true}).pipe(
       map((data) => data && data.data.length ? data.data : null)
     );
   }

@@ -143,6 +143,7 @@ import { SelectableColumnsPipe } from '@shared/pipe/selectable-columns.pipe';
 import { QuickTimeIntervalComponent } from '@shared/components/time/quick-time-interval.component';
 import { OtaPackageAutocompleteComponent } from '@shared/components/ota-package/ota-package-autocomplete.component';
 import { MAT_DATE_LOCALE } from '@angular/material/core';
+import { CopyButtonComponent } from '@shared/components/button/copy-button.component';
 
 @NgModule({
   providers: [
@@ -240,7 +241,8 @@ import { MAT_DATE_LOCALE } from '@angular/material/core';
     EntityGatewaySelectComponent,
     ContactComponent,
     OtaPackageAutocompleteComponent,
-    WidgetsBundleSearchComponent
+    WidgetsBundleSearchComponent,
+    CopyButtonComponent
   ],
   imports: [
     CommonModule,
@@ -412,7 +414,8 @@ import { MAT_DATE_LOCALE } from '@angular/material/core';
     EntityGatewaySelectComponent,
     ContactComponent,
     OtaPackageAutocompleteComponent,
-    WidgetsBundleSearchComponent
+    WidgetsBundleSearchComponent,
+    CopyButtonComponent
   ]
 })
 export class SharedModule { }

@@ -2166,6 +2166,7 @@
       "content-type": "Content type",
       "copy-checksum": "Copy checksum",
       "copyId": "Copy package Id",
+      "copied": "Copied!",
       "delete": "Delete package",
       "delete-ota-update-text": "Be careful, after the confirmation the OTA update will become unrecoverable.",
       "delete-ota-update-title": "Are you sure you want to delete the OTA update '{{title}}'?",