fix(plugins/plugin-client-common): add error icon for error blocks

Fixes #4907
kubernetes-sigs · Jun 18, 2020 · c5beb4a · c5beb4a
1 parent c5e576f
commit c5beb4a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 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
@@ -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
@@ -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 {