fix(plugins/plugin-bash-like): multi-part streaming responses can disappear and reappear

Author: starpit

plugins/plugin-bash-like/src/pty/client.ts

@@ -631,13 +631,16 @@ async function initOnMessage(
           // !! DO NOT CALL xtermContainer.remove() directly !!
           execOptions.stdout(null)
 
-          // respond to the REPL
-          respondToRepl({
+          const response: XtermResponse = {
             apiVersion: 'kui-shell/v1',
             kind: 'XtermResponse',
             rows: copy(terminal),
             code: 0 // to be over-written in the case of an error response
-          })
+          }
+          execOptions.stdout(response)
+
+          // respond to the REPL
+          respondToRepl(response)
         })
       }
 

plugins/plugin-client-common/src/components/Content/Scalar/XtermDom.tsx

@@ -50,10 +50,7 @@ export default class XtermDom extends React.PureComponent<Props> {
     return this.props.response.rows.length === 0 ? (
       <React.Fragment />
     ) : (
-      <div
-        className="kui--xterm-output padding-content scrollable scrollable-auto page-content"
-        style={{ display: 'flex', flex: 1 }}
-      >
+      <div className="kui--xterm-output padding-content scrollable scrollable-auto page-content">
         <div style={{ display: 'flex', flex: 1 }}>
           <div className="xterm-container xterm-terminated">
             <div className="xterm-rows">

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

@@ -132,14 +132,14 @@ export default class Output extends React.PureComponent<Props, State> {
         Events.eventChannelUnsafe.emit(`/command/stdout/done/${tabUUID}/${execUUID}`)
       }
 
-      // part === null: the controller wants to clear any prior output
+      // part === null: the controller wants to clear prior output
       if (part === null) {
-        this.streamingOutput = []
+        // remove last output
+        this.streamingOutput.pop()
+        this.setState(curState => ({
+          nStreamingOutputs: curState.nStreamingOutputs - 1
+        }))
         done()
-        return {
-          // remove all output
-          nStreamingOutputs: 0
-        }
       } else {
         if (isOutputRedirected(this.props.model)) {
           // if we were asked to redirect to a file, then we can
@@ -216,8 +216,24 @@ export default class Output extends React.PureComponent<Props, State> {
 
   private stream() {
     if (this.hasStreamingOutput()) {
-      if (this.streamingOutput.every(_ => typeof _ === 'string')) {
-        const combined = this.streamingOutput.join('')
+      // we may have duplicates in streamingOutput and response
+      // see https://github.com/kubernetes-sigs/kui/pull/8354
+      const response = isWithCompleteEvent(this.props.model) ? this.props.model.response : undefined
+      const streamingOutput = !response
+        ? this.streamingOutput
+        : this.streamingOutput.filter(_ => {
+            if (isMixedResponse(response)) {
+              return !response.find(_2 => _ === _2)
+            } else {
+              return _ !== response
+            }
+          })
+      if (streamingOutput.length < this.streamingOutput.length) {
+        this.streamingOutput = streamingOutput
+      }
+
+      if (streamingOutput.every(_ => typeof _ === 'string')) {
+        const combined = streamingOutput.join('')
         return (
           <div className="repl-result-like result-vertical" data-stream>
             <React.Suspense fallback={<div />}>
@@ -229,7 +245,7 @@ export default class Output extends React.PureComponent<Props, State> {
 
       return (
         <div className="repl-result-like result-vertical" data-stream>
-          {this.streamingOutput.map((part, idx) => (
+          {streamingOutput.map((part, idx) => (
             <React.Suspense fallback={<div />} key={idx}>
               <Scalar
                 tab={this.props.tab}

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

@@ -59,14 +59,14 @@ export default abstract class StreamingConsumer<
       Events.eventChannelUnsafe.emit(`/command/stdout/done/${tab.uuid}/${execUUID}`)
     }
 
-    // part === null: the controller wants to clear any prior output
+    // part === null: the controller wants to clear prior output
     if (part === null) {
-      this._streamingOutput = []
+      // remove last output
+      this._streamingOutput.pop()
+      this.setState(curState => ({
+        nStreamingOutputs: curState.nStreamingOutputs - 1
+      }))
       done()
-      return {
-        // remove all output
-        nStreamingOutputs: 0
-      }
     } else {
       this._streamingOutput.push(Buffer.isBuffer(part) ? part.toString() : part)
 

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

@@ -286,6 +286,10 @@ body[kui-theme-style='light'] {
     flex-direction: column; /* in case of multi-output, e.g. from semicolonInvoke */
     font-size: 0.875rem;
     line-height: initial; /* PatternFly intercepts this for pf-c-content */
+
+    @include Markdown {
+      flex: initial; /* repl-result has flex-direction: column */
+    }
   }
 }
 

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

@@ -557,3 +557,9 @@ $action-hover-delay: 210ms;
     @content;
   }
 }
+
+@mixin Markdown {
+  .page-content {
+    @content;
+  }
+}