feat(plugins/plugin-client-common): allow users to insert command before a repl block

Fixes #5576

Author: myan9

packages/test/src/api/selectors.ts

@@ -137,6 +137,7 @@ export const PROMPT_BLOCK_FINAL = `${PROMPT_BLOCK}:nth-last-child(1)`
 export const OVERFLOW_MENU = '.kui--repl-block-right-element.kui--toolbar-button-with-icon'
 export const PROMPT_BLOCK_MENU = (N: number) => `${PROMPT_BLOCK_N(N)} ${OVERFLOW_MENU}`
 export const BLOCK_REMOVE_BUTTON = `${OVERFLOW_MENU} button[data-mode="Remove"]` // in carbon, this is a global
+export const BLOCK_INSERT_BUTTON = `${OVERFLOW_MENU} button[data-mode="Insert Command"]` // in carbon, this is a global
 export const COMMAND_COPY_BUTTON = `${OVERFLOW_MENU} button[data-mode="Copy"]` // in carbon, this is a global
 export const COMMAND_RERUN_BUTTON = `${OVERFLOW_MENU} button[data-mode="Rerun"]` // in carbon, this is a global
 export const PROMPT_LAST = `${PROMPT_BLOCK_LAST} .repl-input-element`

plugins/plugin-client-common/i18n/resources_en_US.json

@@ -23,6 +23,7 @@
   "concurrencyColdStartInDurationSplit": "{0}-way concurrency in cold starts with execution time {1}",
   "Copy": "Copy",
   "Rerun": "Rerun",
+  "Insert Command": "Insert Command",
   "Split the Terminal": "Split the Terminal",
   "Output has been pinned to a watch pane": "Output has been **pinned** to a watch pane",
   "No more splits allowed": "No more splits allowed",

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

@@ -93,6 +93,9 @@ export interface InputOptions {
   /** Remove the enclosing block */
   willRemove?: () => void
 
+  /** insert an active block before this block */
+  willInsertBlock?: () => void
+
   /** Capture a screenshot of the enclosing block */
   willScreenshot?: () => void
 
@@ -549,6 +552,17 @@ export default class Input extends InputProvider {
         ]
   }
 
+  private insertAction(): DropDownAction[] {
+    return !this.props.willInsertBlock
+      ? []
+      : [
+          {
+            label: strings('Insert Command'),
+            handler: () => this.props.willInsertBlock()
+          }
+        ]
+  }
+
   private screenshotAction(): DropDownAction[] {
     return !this.props.willScreenshot || inBrowser()
       ? []
@@ -566,7 +580,8 @@ export default class Input extends InputProvider {
       const actions = this.screenshotAction().concat(
         this.copyAction(command),
         this.rerunAction(command),
-        this.removeAction()
+        this.removeAction(),
+        this.insertAction()
       )
       return (
         <DropDown

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

@@ -354,6 +354,16 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
               .concat([Processing(curState.blocks[rerunIdx], event, event.evaluatorOptions.isExperimental, true)])
               .concat(curState.blocks.slice(rerunIdx + 1)) // everything after
           }
+        } else if (this.hasActiveBlock(curState)) {
+          // Transform the active block to Processing
+          const activeBlockIdx = this.findActiveBlock(curState)
+
+          return {
+            blocks: curState.blocks
+              .slice(0, activeBlockIdx)
+              .concat([Processing(curState.blocks[activeBlockIdx], event, event.evaluatorOptions.isExperimental)])
+              .concat(curState.blocks.slice(activeBlockIdx + 1))
+          }
         } else {
           // Transform the last block to Processing
           return {
@@ -406,7 +416,8 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
               .slice(0, inProcessIdx) // everything before
               .concat([Finished(inProcess, event, prefersTerminalPresentation, outputOnly)]) // mark as finished
               .concat(curState.blocks.slice(inProcessIdx + 1)) // everything after
-              .concat(!inProcess.isRerun ? [Active()] : []) // plus a new block!
+              .concat(!inProcess.isRerun && !this.hasActiveBlock(curState) ? [Active()] : []) // plus a new block!
+
             return {
               blocks
             }
@@ -418,13 +429,14 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
           console.error('invalid state: got a command completion event for a block that is not processing', event)
         }
       } else if (event.cancelled) {
-        // we get here if the user just types ctrl+c without having executed any command. add a new block!
-        const inProcessIdx = curState.blocks.length - 1
+        // we get here if the user just types ctrl+c without having executed any command. add a new block if needed!
+        const inProcessIdx = this.hasActiveBlock(curState) ? this.findActiveBlock(curState) : curState.blocks.length - 1
         const inProcess = curState.blocks[inProcessIdx]
         const blocks = curState.blocks
           .slice(0, inProcessIdx)
           .concat([Cancelled(inProcess)]) // mark as cancelled
-          .concat([Active()]) // plus a new block!
+          .concat(curState.blocks.slice(inProcessIdx + 1))
+          .concat(inProcessIdx === curState.blocks.length - 1 ? [Active()] : []) // plus a new block if needed
         return {
           blocks
         }
@@ -640,6 +652,18 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
     })
   }
 
+  /** insert an active block before the given idx */
+  private willInsertBlock(uuid: string, idx: number) {
+    this.splice(uuid, curState => {
+      return {
+        blocks: curState.blocks
+          .slice(0, idx)
+          .concat([Active()])
+          .concat(curState.blocks.slice(idx))
+      }
+    })
+  }
+
   /** remove the block at the given index */
   private willRemoveBlock(uuid: string, idx: number) {
     this.splice(uuid, curState => {
@@ -649,11 +673,21 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
         blocks: curState.blocks
           .slice(0, idx)
           .concat(curState.blocks.slice(idx + 1))
-          .concat(curState.blocks.find(_ => isActive(_)) ? [] : [Active()]) // plus a new block, if needed
+          .concat(this.hasActiveBlock(curState) ? [] : [Active()]) // plus a new block, if needed
       }
     })
   }
 
+  /** whether the given scrollback has Active Block */
+  private hasActiveBlock(scrollback: ScrollbackState) {
+    return scrollback.blocks.findIndex(b => isActive(b)) > -1
+  }
+
+  /** return the index of the Active Block from a scrollback */
+  private findActiveBlock(scrollback: ScrollbackState) {
+    return scrollback.blocks.findIndex(b => isActive(b))
+  }
+
   private tabRefFor(scrollback: ScrollbackState, ref: HTMLElement) {
     if (ref) {
       ref['facade'] = scrollback.facade
@@ -814,17 +848,21 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
                     tab={tab}
                     noActiveInput={this.props.noActiveInput}
                     onOutputRender={this.onOutputRender.bind(this, scrollback)}
+                    willInsertBlock={this.willInsertBlock.bind(this, scrollback.uuid, idx)}
                     willRemove={this.willRemoveBlock.bind(this, scrollback.uuid, idx)}
                     willLoseFocus={() => this.doFocus(scrollback)}
                     isExperimental={hasCommand(_) && _.isExperimental}
-                    isFocused={sbidx === this.state.focusedIdx && isActive(_)}
+                    isFocused={
+                      // grab focus if this is the first active block in the scrollback
+                      sbidx === this.state.focusedIdx && idx === this.findActiveBlock(scrollback)
+                    }
                     prefersTerminalPresentation={isOk(_) && _.prefersTerminalPresentation}
                     isPartOfMiniSplit={isMiniSplit}
                     isVisibleInMiniSplit={idx === showThisIdxInMiniSplit || idx === nBlocks - 1}
                     isWidthConstrained={isWidthConstrained}
                     navigateTo={this.navigateTo.bind(this, scrollback)}
                     ref={c => {
-                      if (isActive(_)) {
+                      if (idx === this.findActiveBlock(scrollback)) {
                         // grab a ref to the active block, to help us maintain focus
                         scrollback._activeBlock = c
                       }

plugins/plugin-core-support/src/test/core-support2/insert.ts

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2020 IBM Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as assert from 'assert'
+
+import { Common, CLI, ReplExpect, Selectors } from '@kui-shell/test'
+
+describe(`insert command ${process.env.MOCHA_RUN_TARGET || ''}`, function(this: Common.ISuite) {
+  before(Common.before(this))
+  after(Common.after(this))
+
+  // here come the tests
+  it(`should show version then insert a block before`, async () => {
+    try {
+      const res1 = await CLI.command('version', this.app)
+      await ReplExpect.okWithCustom({ expect: Common.expectedVersion })(res1)
+
+      const N = res1.count
+      this.app.client.click(Selectors.PROMPT_BLOCK_MENU(N))
+      await this.app.client.waitForVisible(Selectors.BLOCK_INSERT_BUTTON)
+      await this.app.client.click(Selectors.BLOCK_INSERT_BUTTON)
+
+      await CLI.command('# show version', this.app)
+      await this.app.client.waitForVisible(`${Selectors.OUTPUT_N(N)} ${Selectors.TERMINAL_CARD}`)
+      const title: string = await this.app.client.getText(`${Selectors.OUTPUT_N(N)} ${Selectors.TERMINAL_CARD}`)
+      assert.strictEqual(title, 'show version')
+
+      await this.app.client.waitForVisible(`${Selectors.OUTPUT_N(N + 1)}`)
+      const version: string = await this.app.client.getText(`${Selectors.OUTPUT_N(N + 1)}`)
+      assert.strictEqual(version, Common.expectedVersion)
+    } catch (err) {
+      await Common.oops(this, true)(err)
+    }
+  })
+
+  it(`should report proper version`, () =>
+    CLI.command('version', this.app)
+      .then(ReplExpect.okWithCustom({ expect: Common.expectedVersion }))
+      .catch(Common.oops(this, true)))
+})