From c5beb4ae56b005c6a05eb38f3230f82826da54db Mon Sep 17 00:00:00 2001
From: Mengting Yan <mengting.yan1@ibm.com>
Date: Wed, 17 Jun 2020 10:38:19 -0400
Subject: [PATCH] fix(plugins/plugin-client-common): add error icon for error
 blocks

Fixes #4907
---
 .../components/Views/Terminal/Block/Input.tsx | 21 ++++++++++++++++++-
 .../web/css/static/repl.scss                  | 13 ++++--------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/plugins/plugin-client-common/src/components/Views/Terminal/Block/Input.tsx b/plugins/plugin-client-common/src/components/Views/Terminal/Block/Input.tsx
index 86066ebbc7d..48641e6ca1e 100644
--- a/plugins/plugin-client-common/src/components/Views/Terminal/Block/Input.tsx
+++ b/plugins/plugin-client-common/src/components/Views/Terminal/Block/Input.tsx
@@ -24,10 +24,21 @@ import onKeyPress from './OnKeyPress'
 import KuiContext from '../../../Client/context'
 import { TabCompletionState } from './TabCompletion'
 import ActiveISearch, { onKeyUp } from './ActiveISearch'
-import { BlockModel, isActive, isProcessing, isFinished, hasCommand, isEmpty, hasUUID, hasValue } from './BlockModel'
+import {
+  BlockModel,
+  isActive,
+  isProcessing,
+  isFinished,
+  hasCommand,
+  isEmpty,
+  isOops,
+  hasUUID,
+  hasValue
+} from './BlockModel'
 import { BlockViewTraits } from './'
 
 import DropDown, { DropDownAction } from '../../../spi/DropDown'
+import Icons from '../../../spi/Icons'
 
 const strings = i18n('plugin-client-common')
 const strings2 = i18n('plugin-client-common', 'screenshot')
@@ -375,6 +386,13 @@ export default class Input extends InputProvider {
     }
   }
 
+  /** error icon for error blocks */
+  private errorIcon() {
+    if (isOops(this.props.model)) {
+      return <Icons className="kui--repl-block-error-icon" icon="Error" data-mode="error" />
+    }
+  }
+
   private removeAction(): DropDownAction[] {
     return !this.props.willRemove
       ? []
@@ -435,6 +453,7 @@ export default class Input extends InputProvider {
     return (
       <span className="repl-prompt-right-elements">
         {this.spinner()}
+        {this.errorIcon()}
         {this.timestamp()}
         {this.dropdown()}
       </span>
diff --git a/plugins/plugin-client-common/web/css/static/repl.scss b/plugins/plugin-client-common/web/css/static/repl.scss
index 16bee802b0b..44347a4f122 100644
--- a/plugins/plugin-client-common/web/css/static/repl.scss
+++ b/plugins/plugin-client-common/web/css/static/repl.scss
@@ -37,15 +37,6 @@
     filter: grayscale(20%);
   }
 
-  .repl-block.error {
-    .repl-prompt,
-    .repl-prompt-right-elements,
-    .kui--repl-block-timestamp {
-      color: var(--color-error);
-      font-weight: 700;
-    }
-  }
-
   .repl-prompt-righty {
     font-weight: 700;
     text-shadow: 0 0 1px var(--color-text-02);
@@ -77,6 +68,10 @@
     font-size: 1em;
     font-weight: 700;
   }
+  .kui--repl-block-error-icon {
+    fill: var(--color-error);
+    margin-right: 0.5em;
+  }
 }
 
 [kui-theme-style] .kui--repl-block-right-element {