fix(plugins/plugin-client-common): improve rendering of output only blocks

don't show the left-hand block stripe; this also improves the css a bit, by introducing a Scrollback mixin

Fixes #5467

Author: starpit

plugins/plugin-client-common/src/components/Views/Terminal/Block/index.tsx

@@ -164,6 +164,7 @@ export default class Block extends React.PureComponent<Props, State> {
       (!this.props.noActiveInput || !isActive(this.props.model)) && (
         <div
           className={'repl-block kui--maximize-candidate ' + this.props.model.state.toString()}
+          data-is-output-only={isOutputOnly(this.props.model) || undefined}
           data-announcement={isAnnouncement(this.props.model) || undefined}
           data-uuid={hasUUID(this.props.model) && this.props.model.execUUID}
           data-input-count={this.props.idx}

plugins/plugin-client-common/web/css/static/repl.scss

@@ -70,38 +70,6 @@
     }
   } */
 
-  /** Coloring the context border by status of the block */
-  .repl-block {
-    position: relative;
-
-    &:before {
-      background-color: var(--color-table-border2);
-      border-left: none;
-      border-right: none;
-      border-radius: 1px;
-      opacity: 0.375;
-      content: '';
-      left: 0;
-      position: absolute;
-      top: 0.1875rem;
-      bottom: 0.1875rem;
-      width: 4px;
-    }
-    &[data-is-focused]:before {
-      opacity: 1;
-    }
-    &.error:before {
-      opacity: 1;
-      background-color: var(--color-error);
-    }
-    &[data-is-focused] .repl-context {
-      opacity: 1;
-    }
-    &:hover .repl-output .repl-context:after {
-      border-color: var(--color-base03);
-    }
-  }
-
   .repl-prompt-righty {
     font-weight: 700;
     text-shadow: 0 0 1px var(--color-text-02);

plugins/plugin-client-common/web/scss/components/Terminal/Block.scss

@@ -14,6 +14,42 @@
  * limitations under the License.
  */
 
+@import '_mixins';
+
 .repl-output {
   padding-right: calc(1rem - 6px);
 }
+
+/** Coloring the context border by status of the block */
+@include Scrollback {
+  .repl-block:not([data-is-output-only]) {
+    position: relative;
+
+    &:before {
+      background-color: var(--color-table-border2);
+      border-left: none;
+      border-right: none;
+      border-radius: 1px;
+      opacity: 0.375;
+      content: '';
+      left: 0;
+      position: absolute;
+      top: 0.1875rem;
+      bottom: 0.1875rem;
+      width: 4px;
+    }
+    &[data-is-focused]:before {
+      opacity: 1;
+    }
+    &.error:before {
+      opacity: 1;
+      background-color: var(--color-error);
+    }
+    &[data-is-focused] .repl-context {
+      opacity: 1;
+    }
+    &:hover .repl-output .repl-context:after {
+      border-color: var(--color-base03);
+    }
+  }
+}

plugins/plugin-client-common/web/scss/components/Terminal/_mixins.scss

@@ -14,14 +14,24 @@
  * limitations under the License.
  */
 
-@mixin MiniSplit {
-  .kui--scrollback[data-is-minisplit] {
+@mixin Scrollback {
+  .kui--scrollback {
     @content;
   }
 }
 
+@mixin MiniSplit {
+  @include Scrollback {
+    &[data-is-minisplit] {
+      @content;
+    }
+  }
+}
+
 @mixin PlainTerminal {
-  .kui--scrollback:not([data-is-minisplit]):not([data-is-width-constrained]) {
-    @content;
+  @include Scrollback {
+    &:not([data-is-minisplit]):not([data-is-width-constrained]) {
+      @content;
+    }
   }
 }