fix(plugins/plugin-client-common): snapshot doesn't preserve cancelled or empty block

Author: myan9

packages/test/src/api/util.ts

@@ -24,6 +24,7 @@ import * as CLI from './cli'
 import * as Common from './common'
 import * as ReplExpect from './repl-expect'
 import * as SidecarExpect from './sidecar-expect'
+import { keys } from './keys'
 
 export interface AppAndCount {
   app: Application
@@ -397,3 +398,24 @@ export async function clickSidecarButtonCustomized(ctx: Common.ISuite, res: AppA
     await _.click()
   })
 }
+
+export function doCancel(this: Common.ISuite, cmd = '') {
+  return this.app.client
+    .$(Selectors.CURRENT_PROMPT_BLOCK)
+    .then(async _ => {
+      _.waitForExist()
+      return _.getAttribute('data-input-count')
+    })
+    .then(count => parseInt(count, 10))
+    .then(count =>
+      this.app.client
+        .keys(cmd)
+        .then(() => this.app.client.keys(keys.ctrlC))
+        .then(() => ({ app: this.app, count: count }))
+        .then(ReplExpect.blank)
+        .then(() => this.app.client.$(Selectors.PROMPT_N(count))) // make sure the cancelled command text is still there, in the previous block
+        .then(_ => _.getText())
+        .then(input => assert.strictEqual(input, cmd))
+    )
+    .catch(Common.oops(this, true))
+}

plugins/plugin-bash-like/src/test/bash-like/ctrl-c.ts

@@ -14,30 +14,8 @@
  * limitations under the License.
  */
 
-import { strictEqual } from 'assert'
 import { Common, CLI, Keys, ReplExpect, Selectors, Util } from '@kui-shell/test'
 
-function doCancel(this: Common.ISuite, cmd = '') {
-  return this.app.client
-    .$(Selectors.CURRENT_PROMPT_BLOCK)
-    .then(async _ => {
-      _.waitForExist()
-      return _.getAttribute('data-input-count')
-    })
-    .then(count => parseInt(count, 10))
-    .then(count =>
-      this.app.client
-        .keys(cmd)
-        .then(() => this.app.client.keys(Keys.ctrlC))
-        .then(() => ({ app: this.app, count: count }))
-        .then(ReplExpect.blank)
-        .then(() => this.app.client.$(Selectors.PROMPT_N(count))) // make sure the cancelled command text is still there, in the previous block
-        .then(_ => _.getText())
-        .then(input => strictEqual(input, cmd))
-    )
-    .catch(Common.oops(this, true))
-}
-
 function doClear(this: Common.ISuite) {
   it('should clear the terminal', () =>
     CLI.command('clear', this.app).then(() => ReplExpect.consoleToBeClear(this.app)))
@@ -50,7 +28,7 @@ describe(`Cancel via Ctrl+C then clear then execute ${process.env.MOCHA_RUN_TARG
   after(Common.after(this))
 
   const clear = doClear.bind(this)
-  const cancel = doCancel.bind(this)
+  const cancel = Util.doCancel.bind(this)
 
   it('should type a command, but hit ctrl+c before executing it', () => cancel('echo XXXXXXXXXX'))
   clear()
@@ -66,7 +44,7 @@ describe(`Cancel via Ctrl+C ${process.env.MOCHA_RUN_TARGET || ''}`, function(thi
   after(Common.after(this))
 
   const clear = doClear.bind(this)
-  const cancel = doCancel.bind(this)
+  const cancel = Util.doCancel.bind(this)
 
   it('should hit ctrl+c', () => cancel())
   clear()

plugins/plugin-bash-like/src/test/bash-like/pty-copy-paste.ts

@@ -91,28 +91,28 @@ describe(`xterm copy paste ${process.env.MOCHA_RUN_TARGET || ''}`, function(this
       await Common.refresh(this)
 
       // emit some characters to the current prompt
-      console.error('CP2')
-      await this.app.client.keys(text)
+      const emittedText = 'hello'
+      const res1 = await CLI.command(`echo ${emittedText}`, this.app)
 
-      // wait for those characters to appear in the prompt
-      console.error('CP3')
+      // wait for the output to appear
+      await this.app.client.$(rows(res1.count)).then(_ => _.waitForExist())
+
+      let idx1 = 0
       await this.app.client.waitUntil(
         async () => {
-          const actualText = await this.app.client.$(Selectors.CURRENT_PROMPT).then(_ => _.getValue())
-          return actualText === text
+          const actualText = await this.app.client.$(rows(res1.count)).then(_ => _.getText())
+          if (++idx1 > 5) {
+            console.error('still waiting for emitted text', actualText, res1.count)
+          }
+          return actualText === emittedText
         },
         { timeout: CLI.waitTimeout }
       )
 
-      // copy the content of the current prompt
-      console.error('CP4')
-      await this.app.client.$(Selectors.CURRENT_PROMPT).then(_ => _.doubleClick())
-      console.error('CP5')
-      await this.app.client.execute(() => document.execCommand('copy'))
+      console.log('now should copy from xterm output and paste inside of xterm')
 
-      // cancel out the current prompt so we can execute vi
-      console.error('CP6')
-      await this.app.client.keys(Keys.ctrlC)
+      await this.app.client.$(firstRow(res1.count)).then(_ => _.doubleClick())
+      await this.app.client.execute(() => document.execCommand('copy'))
 
       // open vi, so we have an xterm to receive a paste event
       // the last true means don't try to use the copy-paste optimization

plugins/plugin-client-common/src/components/Views/Terminal/ClipboardTransfer.ts

@@ -18,12 +18,12 @@ import { v4 } from 'uuid'
 import { eventBus, CommandStartEvent, CommandCompleteEvent, ScalarResponse, flatten, getTabId } from '@kui-shell/core'
 import ScrollableTerminal, { getSelectionText } from './ScrollableTerminal'
 import { isNotebookImpl } from './Snapshot'
-import { CompleteBlock } from './Block/BlockModel'
+import { FinishedBlock, hasStartEvent, isWithCompleteEvent } from './Block/BlockModel'
 
 interface ClipboardTransfer {
   apiVersion: 'kui-shell/v1'
   kind: 'ClipboardTransfer'
-  blocks: CompleteBlock[]
+  blocks: FinishedBlock[]
 }
 
 function isClipboardTransfer(transfer: Record<string, any>): transfer is ClipboardTransfer {
@@ -99,15 +99,21 @@ export function onPaste(this: ScrollableTerminal, evt: ClipboardEvent) {
         const { uuid, facade } = this.state.splits[target.scrollbackIdx]
 
         // update the events to retarget them to our target split
-        const { startEvent, completeEvent } = transfer.blocks[0]
         const execUUID = v4()
         const retarget = { execUUID, tab: facade }
-        const start = Object.assign(startEvent, retarget)
-        const complete = Object.assign(completeEvent, retarget) as CommandCompleteEvent<ScalarResponse>
 
         // finally, fire the events off
-        this.onExecStart(uuid, false, start, target.insertionIdx)
-        this.onExecEnd(uuid, false, complete, target.insertionIdx)
+        if (hasStartEvent(transfer.blocks[0])) {
+          const { startEvent } = transfer.blocks[0]
+          const start = Object.assign(startEvent, retarget)
+          this.onExecStart(uuid, false, start, target.insertionIdx)
+        }
+
+        if (isWithCompleteEvent(transfer.blocks[0])) {
+          const { completeEvent } = transfer.blocks[0]
+          const complete = Object.assign(completeEvent, retarget) as CommandCompleteEvent<ScalarResponse>
+          this.onExecEnd(uuid, false, complete, target.insertionIdx)
+        }
       }
     } catch (err) {
       // console.error(err)

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

@@ -65,6 +65,7 @@ import {
   Processing,
   isActive,
   isAnnouncement,
+  isEmpty,
   isSectionBreak,
   isWithCompleteEvent,
   isOk,
@@ -240,8 +241,13 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
     const onSnapshot = async (evt: SnapshotRequestEvent) => {
       const splits = this.state.splits.map(({ inverseColors, blocks, uuid }) => {
         const { filter = () => true } = evt
+
+        const isComplete = (block: BlockModel) => {
+          return hasStartEvent(block) && filter(block.startEvent) && block.startEvent.route !== '/split'
+        }
+
         const snapshotBlocks = blocks
-          .filter(_ => hasStartEvent(_) && filter(_.startEvent) && _.startEvent.route !== '/split')
+          .filter(_ => isComplete(_) || isEmpty(_) || isCancelled(_))
           .map(snapshot)
           .filter(_ => _)
 

plugins/plugin-client-common/src/components/Views/Terminal/Snapshot.ts

@@ -30,15 +30,24 @@ import {
   isMultiModalResponse
 } from '@kui-shell/core'
 
-import { CompleteBlock, isAnnouncement, isOk, isOops } from './Block/BlockModel'
+import {
+  FinishedBlock,
+  hasStartEvent,
+  isAnnouncement,
+  isCancelled,
+  isEmpty,
+  isOk,
+  isOops,
+  isWithCompleteEvent
+} from './Block/BlockModel'
 
 /**
  * Split: captures the split uuid and blocks in a split
  *
  */
 export type Split = {
   uuid: string
-  blocks: CompleteBlock[]
+  blocks: FinishedBlock[]
   inverseColors?: boolean
 }
 
@@ -55,7 +64,7 @@ export function isNotebookImpl(raw: Record<string, any>): raw is NotebookImpl {
   return isNotebook(model) && model.spec && Array.isArray(model.spec.splits)
 }
 
-export function snapshot(block: CompleteBlock): CompleteBlock {
+export function snapshot(block: FinishedBlock): FinishedBlock {
   if (!isAnnouncement(block) && (isOops(block) || isOk(block))) {
     const execOptions = Object.assign(
       {},
@@ -103,6 +112,34 @@ export function snapshot(block: CompleteBlock): CompleteBlock {
       startEvent,
       completeEvent
     })
+  } else if (isEmpty(block)) {
+    const execOptions = Object.assign(
+      {},
+      block.completeEvent.execOptions,
+      { block: undefined },
+      {
+        tab:
+          block.completeEvent.execOptions && block.completeEvent.execOptions.tab
+            ? block.completeEvent.execOptions.tab.uuid
+            : undefined
+      }
+    )
+
+    const evaluatorOptions = Object.assign({}, block.completeEvent.evaluatorOptions, {
+      usage: undefined,
+      flags: undefined
+    })
+
+    const tab = block.completeEvent.tab ? block.completeEvent.tab.uuid : undefined
+
+    const completeEvent = Object.assign({}, block.completeEvent, { execOptions, evaluatorOptions }, { tab })
+
+    return Object.assign(block, {
+      isReplay: true,
+      completeEvent
+    })
+  } else if (isCancelled(block)) {
+    return Object.assign(block, { isReplay: true })
   }
 }
 
@@ -111,7 +148,7 @@ export function allocateTab(target: CommandStartEvent | CommandCompleteEvent, ta
 }
 
 /** assign tab to the block */
-export function tabAlignment(block: CompleteBlock, tab: Tab): CompleteBlock {
+export function tabAlignment(block: FinishedBlock, tab: Tab): FinishedBlock {
   const allocateTabForTable = (table: Table) => {
     table.body.forEach(row => {
       const onclickHome = row.onclick ? row : row.attributes.find(_ => _.onclick && _.key === 'NAME')
@@ -122,23 +159,28 @@ export function tabAlignment(block: CompleteBlock, tab: Tab): CompleteBlock {
     })
   }
 
-  if (isMultiModalResponse(block.completeEvent.response)) {
-    block.completeEvent.response.modes.forEach(mode => {
-      if (isScalarContent(mode)) {
-        if (isTable(mode.content)) {
-          allocateTabForTable(mode.content)
+  if (isWithCompleteEvent(block)) {
+    if (isMultiModalResponse(block.completeEvent.response)) {
+      block.completeEvent.response.modes.forEach(mode => {
+        if (isScalarContent(mode)) {
+          if (isTable(mode.content)) {
+            allocateTabForTable(mode.content)
+          }
         }
-      }
-    })
+      })
 
-    block.response = block.completeEvent.response
-  } else if (isTable(block.completeEvent.response)) {
-    allocateTabForTable(block.completeEvent.response)
-    block.response = block.completeEvent.response
+      block.response = block.completeEvent.response
+    } else if (isTable(block.completeEvent.response)) {
+      allocateTabForTable(block.completeEvent.response)
+      block.response = block.completeEvent.response
+    }
+
+    allocateTab(block.completeEvent, tab)
   }
 
-  allocateTab(block.completeEvent, tab)
-  allocateTab(block.startEvent, tab)
+  if (hasStartEvent(block)) {
+    allocateTab(block.startEvent, tab)
+  }
 
   return block
 }
@@ -194,18 +236,20 @@ export class FlightRecorder {
       this.splits.map(split =>
         Promise.all(
           split.blocks.map(async _ => {
-            if (isMultiModalResponse(_.completeEvent.response)) {
-              await Promise.all(
-                _.completeEvent.response.modes.map(async mode => {
-                  if (isScalarContent(mode)) {
-                    if (isTable(mode.content)) {
-                      await this.recordTable(mode.content)
+            if (isWithCompleteEvent(_)) {
+              if (isMultiModalResponse(_.completeEvent.response)) {
+                await Promise.all(
+                  _.completeEvent.response.modes.map(async mode => {
+                    if (isScalarContent(mode)) {
+                      if (isTable(mode.content)) {
+                        await this.recordTable(mode.content)
+                      }
                     }
-                  }
-                })
-              )
-            } else if (isTable(_.completeEvent.response)) {
-              await this.recordTable(_.completeEvent.response)
+                  })
+                )
+              } else if (isTable(_.completeEvent.response)) {
+                await this.recordTable(_.completeEvent.response)
+              }
             }
           })
         )