Display default icon when error (#566)

eclipse-che · Nov 29, 2019 · 26e75a1 · 26e75a1
1 parent 9c01d69
commit 26e75a1
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/extensions/eclipse-che-theia-plugin-ext/src/browser/plugin/che-plugin-view-list.tsx b/extensions/eclipse-che-theia-plugin-ext/src/browser/plugin/che-plugin-view-list.tsx
@@ -59,6 +59,7 @@ interface ListItemProps {
 
 interface ListItemState {
     pluginStatus: PluginStatus;
+    iconFailed: boolean;
 }
 
 export class ChePluginListItem extends React.Component<ListItemProps, ListItemState> {
@@ -69,7 +70,8 @@ export class ChePluginListItem extends React.Component<ListItemProps, ListItemSt
         const status = props.pluginItem.installed ? 'installed' : 'not_installed';
 
         this.state = {
-            pluginStatus: status
+            pluginStatus: status,
+            iconFailed: false
         };
     }
 
@@ -239,11 +241,22 @@ export class ChePluginListItem extends React.Component<ListItemProps, ListItemSt
         </select>;
     }
 
+    protected onIconFailed = async () => {
+        const plugin = this.props.pluginItem;
+        const metadata = plugin.versionList[plugin.version];
+        if (metadata) {
+            this.setState({
+                pluginStatus: this.state.pluginStatus,
+                iconFailed: true
+            });
+        }
+    }
+
     protected renderIcon(metadata: ChePluginMetadata): React.ReactNode {
-        if (metadata.icon) {
+        if (!this.state.iconFailed && metadata.icon) {
             // return the icon
             return <div className='che-plugin-icon'>
-                <img src={metadata.icon}></img>
+                <img src={metadata.icon} onError={this.onIconFailed}></img>
             </div>;
         }
 
@@ -277,7 +290,8 @@ export class ChePluginListItem extends React.Component<ListItemProps, ListItemSt
 
     protected setStatus(status: PluginStatus): void {
         this.setState({
-            pluginStatus: status
+            pluginStatus: status,
+            iconFailed: this.state.iconFailed
         });
     }