From 12df7500dad61b46e08eec1f0427ece083481dbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20Bolbo=C8=99enco?= <alex.bolbosenco@gmail.com>
Date: Tue, 10 Apr 2018 20:27:21 +0300
Subject: [PATCH] [ADF-2455] Fallback thumbnail fix (#3164)

* Show default icon when thumbnail image is broken

* Remove thumbnails prop from demo-shell

* Unit test added
---
 .../components/datatable/datatable.component.html   |  2 +-
 .../datatable/datatable.component.spec.ts           | 11 +++++++++++
 .../components/datatable/datatable.component.ts     | 13 +++++++++++--
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/lib/core/datatable/components/datatable/datatable.component.html b/lib/core/datatable/components/datatable/datatable.component.html
index b93eb22b43..7cc4b304a9 100644
--- a/lib/core/datatable/components/datatable/datatable.component.html
+++ b/lib/core/datatable/components/datatable/datatable.component.html
@@ -99,7 +99,7 @@
                                 <img *ngIf="!isIconValue(row, col) && !row.isSelected"
                                      alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
                                      src="{{ data.getValue(row, col) }}"
-                                     (error)="onImageLoadingError($event)">
+                                     (error)="onImageLoadingError($event, row.obj.entry.content.mimeType)">
                             </div>
                             <div *ngSwitchCase="'icon'" class="cell-value">
                                 <span class="sr-only">{{ iconAltTextKey(data.getValue(row, col)) | translate }}</span>
diff --git a/lib/core/datatable/components/datatable/datatable.component.spec.ts b/lib/core/datatable/components/datatable/datatable.component.spec.ts
index e3c32619ac..2163e93b68 100644
--- a/lib/core/datatable/components/datatable/datatable.component.spec.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.spec.ts
@@ -739,6 +739,17 @@ describe('DataTable', () => {
         expect(event.target.src).toBe(originalSrc);
     });
 
+    it('should replace image source with icon if fallback is not available and mimeType is provided', () => {
+        let event = <any> {
+            target: {
+                src: 'missing-image'
+            }
+        };
+
+        dataTable.onImageLoadingError(event, 'image/png');
+        expect(event.target.src).toBe('./assets/images/ft_ic_raster_image.svg');
+    });
+
     it('should not get cell tooltip when row is not provided', () => {
         const col = <DataColumn> { key: 'name', type: 'text' };
         expect(dataTable.getCellTooltip(null, col)).toBeNull();
diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts
index 77b82304b0..c0c297ab17 100644
--- a/lib/core/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.ts
@@ -29,6 +29,7 @@ import { DataRowEvent } from '../../data/data-row-event.model';
 import { DataRow } from '../../data/data-row.model';
 import { DataSorting } from '../../data/data-sorting.model';
 import { DataTableAdapter } from '../../data/datatable-adapter';
+import { ThumbnailService } from '../../../services';
 
 import { ObjectDataRow } from '../../data/object-datarow.model';
 import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
@@ -161,7 +162,11 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
     private singleClickStreamSub: Subscription;
     private multiClickStreamSub: Subscription;
 
-    constructor(private elementRef: ElementRef, differs: IterableDiffers) {
+    constructor(
+        private elementRef: ElementRef,
+        differs: IterableDiffers,
+        private thumbnailService?: ThumbnailService
+    ) {
         if (differs) {
             this.differ = differs.find([]).create(null);
         }
@@ -421,7 +426,11 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
         this.emitRowSelectionEvent(domEventName, row);
     }
 
-    onImageLoadingError(event: Event) {
+    onImageLoadingError(event: Event, mimeType?: string) {
+        if (mimeType && !this.fallbackThumbnail) {
+            this.fallbackThumbnail = this.thumbnailService.getMimeTypeIcon(mimeType);
+        }
+
         if (event && this.fallbackThumbnail) {
             let element = <any> event.target;
             element.src = this.fallbackThumbnail;