feat(plugins/plugin-client-common): allow users to reorder blocks by MoveUp and MoveDown buttons

Fixes #5589

Author: myan9

packages/test/src/api/selectors.ts

@@ -137,6 +137,10 @@ 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 = `.kui--block-action [icon="WindowClose"]`
+export const BLOCK_UP_BUTTON = `.kui--block-action [icon="MoveUp"]`
+export const BLOCK_UP_BUTTON_N = (N: number) => `${PROMPT_BLOCK_N(N)} .kui--block-action [icon="MoveUp"]`
+export const BLOCK_DOWN_BUTTON = `.kui--block-action [icon="MoveDown"]`
+export const BLOCK_DOWN_BUTTON_N = (N: number) => `${PROMPT_BLOCK_N(N)} .kui--block-action [icon="MoveDown"]`
 export const COMMAND_COPY_BUTTON = `.kui--block-action [icon="Copy"]`
 export const COMMAND_COPY_DONE_BUTTON = `.kui--block-action [icon="Checkmark"]`
 export const COMMAND_RERUN_BUTTON = `.kui--block-action [icon="Retry"]`

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

@@ -87,12 +87,34 @@ export default class Actions extends React.PureComponent<Props> {
     )
   }
 
+  private upwardAction() {
+    return (
+      this.props.hasBlockBefore &&
+      this.props.willMoveUpward && (
+        <Action icon="MoveUp" onClick={() => this.props.willMoveUpward()} title="Move this block up" />
+      )
+    )
+  }
+
+  private downwardAction() {
+    return (
+      this.props.hasBlockAfter &&
+      this.props.willMoveDownward && (
+        <Action icon="MoveDown" onClick={() => this.props.willMoveDownward()} title="Move this block down" />
+      )
+    )
+  }
+
   public render() {
     return (
       <React.Fragment>
-        {this.copyAction()}
-        {this.rerunAction()}
-        {this.screenshotAction()}
+        <div className="kui-block-actions-others">
+          {this.copyAction()}
+          {this.rerunAction()}
+          {this.screenshotAction()}
+        </div>
+        {this.upwardAction()}
+        {this.downwardAction()}
         {this.removeAction()}
       </React.Fragment>
     )

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

@@ -37,7 +37,7 @@ import {
   hasUUID,
   hasValue
 } from './BlockModel'
-import { BlockViewTraits } from './'
+import { BlockViewTraits, BlockOperationTraits } from './'
 
 import Tag from '../../../spi/Tag'
 import ExpandableSection from '../../../spi/ExpandableSection'
@@ -46,7 +46,7 @@ const SimpleEditor = React.lazy(() => import('../../../Content/Editor/SimpleEdit
 
 const strings = i18n('plugin-client-common')
 
-export interface InputOptions {
+export interface InputOptions extends BlockOperationTraits {
   /** Optional: placeholder value for prompt */
   promptPlaceholder?: string // was: from '@kui-shell/client/config.d/style.json'
 
@@ -80,9 +80,6 @@ export interface InputOptions {
   /** Optional: onFocus handler */
   onInputFocus?: (event: React.FocusEvent<HTMLInputElement>) => void
 
-  /** Remove the enclosing block */
-  willRemove?: () => void
-
   /** insert an active block before this block */
   willInsertBlock?: () => void
 

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

@@ -32,7 +32,7 @@ import {
   Streamable
 } from '@kui-shell/core'
 
-import { BlockViewTraits } from './'
+import { BlockViewTraits, BlockOperationTraits } from './'
 
 import {
   BlockModel,
@@ -68,12 +68,10 @@ type Props = {
   /** Block ordinal to be displayed to user */
   displayedIdx?: number
 
-  /** Remove the enclosing block */
-  willRemove?: () => void
-
   model: ProcessingBlock | FinishedBlock
   onRender: () => void
-} & BlockViewTraits
+} & BlockViewTraits &
+  BlockOperationTraits
 
 interface State {
   alreadyListen: boolean

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

@@ -42,6 +42,23 @@ export type BlockViewTraits = {
   willFocusBlock?: (evt: React.SyntheticEvent) => void
 }
 
+export interface BlockOperationTraits {
+  /** Remove the enclosing block */
+  willRemove?: () => void
+
+  /** is there any block before the give block? */
+  hasBlockBefore?: boolean
+
+  /** is there any block after the give block? */
+  hasBlockAfter?: boolean
+
+  /** move a given block upward */
+  willMoveUpward?: () => void
+
+  /** move a given block downward */
+  willMoveDownward?: () => void
+}
+
 type Props = InputOptions & {
   /** block ordinal index */
   idx: number
@@ -107,6 +124,10 @@ export default class Block extends React.PureComponent<Props, State> {
           model={this.props.model}
           isFocused={this.props.isFocused}
           willRemove={this.props.willRemove}
+          hasBlockAfter={this.props.hasBlockAfter}
+          hasBlockBefore={this.props.hasBlockBefore}
+          willMoveUpward={this.props.willMoveUpward}
+          willMoveDownward={this.props.willMoveDownward}
           onRender={this.props.onOutputRender && (() => this.props.onOutputRender(this.props.idx))}
           prefersTerminalPresentation={this.props.prefersTerminalPresentation}
           isPartOfMiniSplit={this.props.isPartOfMiniSplit}

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

@@ -248,6 +248,42 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
     return []
   }
 
+  /** is there any block before the given block index */
+  private hasBlockBefore(idx: number): boolean {
+    return idx > 0
+  }
+
+  /** is there any block (except the active input block) after the given block index */
+  private hasBlockAfter(blocks: BlockModel[], idx: number): boolean {
+    return idx < blocks.length - 2
+  }
+
+  /** move the given block upward */
+  private willMoveUpward(sbuuid: string, idx: number) {
+    this.splice(sbuuid, curState => {
+      return {
+        blocks: curState.blocks
+          .slice(0, idx - 1)
+          .concat(curState.blocks[idx])
+          .concat(curState.blocks[idx - 1])
+          .concat(curState.blocks.slice(idx + 1))
+      }
+    })
+  }
+
+  /** move the given block downward */
+  private willMoveDownward(sbuuid: string, idx: number) {
+    this.splice(sbuuid, curState => {
+      return {
+        blocks: curState.blocks
+          .slice(0, idx)
+          .concat(curState.blocks[idx + 1])
+          .concat(curState.blocks[idx])
+          .concat(curState.blocks.slice(idx + 2))
+      }
+    })
+  }
+
   private scrollback(
     capturedValue?: string,
     sbuuid = this.allocateUUIDForScrollback(),
@@ -890,6 +926,10 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
                     onOutputRender={this.onOutputRender.bind(this, scrollback)}
                     willInsertBlock={this.willInsertBlock.bind(this, scrollback.uuid, idx)}
                     willRemove={this.willRemoveBlock.bind(this, scrollback.uuid, idx)}
+                    hasBlockAfter={this.hasBlockAfter(scrollback.blocks, idx)}
+                    hasBlockBefore={this.hasBlockBefore(idx)}
+                    willMoveUpward={this.willMoveUpward.bind(this, scrollback.uuid, idx)}
+                    willMoveDownward={this.willMoveDownward.bind(this, scrollback.uuid, idx)}
                     willLoseFocus={() => this.doFocus(scrollback)}
                     willFocusBlock={evt => this.doFocusBlock(evt, scrollback.uuid, idx)}
                     isExperimental={hasCommand(_) && _.isExperimental}

plugins/plugin-client-common/src/components/spi/Icons/impl/Carbon.tsx

@@ -33,6 +33,8 @@ import {
   SettingsAdjust20 as Settings,
   TrashCan16 as Trash,
   JumpLink16 as Up,
+  ArrowUp16 as MoveUp,
+  ArrowDown16 as MoveDown,
   Location16 as Location,
   VirtualMachine16 as Server,
   At16 as At,
@@ -74,6 +76,8 @@ const icons: Record<Exclude<SupportedIcon, 'Up'>, CarbonIconType> = {
   Grid,
   Info,
   List,
+  MoveUp,
+  MoveDown,
   Location,
   Network,
   NextPage,

plugins/plugin-client-common/src/components/spi/Icons/impl/PatternFly.tsx

@@ -32,6 +32,8 @@ import {
   QuestionCircleIcon /* ToolsIcon */ as Settings,
   TrashAltIcon as Trash,
   LevelUpAltIcon as Up,
+  ArrowUpIcon as MoveUp,
+  ArrowDownIcon as MoveDown,
   MapMarkerAltIcon as Location,
   ServerIcon as Server,
   AtIcon as At,
@@ -100,6 +102,10 @@ export default function PatternFly4Icons(props: Props) {
       return <List {...props} />
     case 'Location':
       return <Location {...props} />
+    case 'MoveUp':
+      return <MoveUp {...props} />
+    case 'MoveDown':
+      return <MoveDown {...props} />
     case 'Pause':
       return <Pause {...props} />
     case 'Play':

plugins/plugin-client-common/src/components/spi/Icons/index.tsx

@@ -36,6 +36,8 @@ export type SupportedIcon =
   | 'Info'
   | 'List'
   | 'Location'
+  | 'MoveUp'
+  | 'MoveDown'
   | 'Network'
   | 'NextPage'
   | 'Notification'

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

@@ -108,6 +108,11 @@ $action-padding: 3px;
       }
     }
 
+    .kui-block-actions-others {
+      display: flex;
+      border-right: 1px solid var(--color-table-border2);
+    }
+
     .repl-input .kui--block-action:hover {
       background-color: var(--color-base04);
     }