feat: show placeholder text to explain that ctrl+d closes split

part of kubernetes-sigs#7060

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

@@ -4,6 +4,7 @@
   "Cancel edit": "Currently in edit mode. Click to cancel.",
   "Remove": "Remove",
   "ok": "ok",
+  "Use Ctrl+D to close this split": "Use Ctrl+D to close this split",
 
   "Done": "Done",
   "Revert": "Revert",

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

@@ -456,6 +456,28 @@ export default class Input extends InputProvider {
     })
   })
 
+  /**
+   * The current logic here is to obey any `promptPlaceholder`
+   * property from the `<Kui/>` top-level property first. If that
+   * hasn't been set, then we fall back on using a "this is how to
+   * close this split" message, but only if there is more than one split,
+   * and even then only if the block is currently focused.
+   *
+   * @return placeholder text for input elements within Active blocks
+   *
+   */
+  private placeholderForActiveBlocks(): string {
+    return (
+      this.props.promptPlaceholder ||
+      (this.props.isFocused && // block is focused
+      typeof this.props.nSplits === 'number' &&
+      this.props.nSplits > 1 && // more than one split
+      this.props.idx <= 1 // only for the first few blocks
+        ? strings('Use Ctrl+D to close this split')
+        : '')
+    )
+  }
+
   /** the element that represents the command being/having been/going to be executed */
   protected input() {
     const active = isActive(this.props.model) || this.state.isReEdit
@@ -492,7 +514,7 @@ export default class Input extends InputProvider {
             className={'repl-input-element' + (this.state.isearch ? ' repl-input-hidden' : '')}
             aria-label="Command Input"
             tabIndex={1}
-            placeholder={this.props.promptPlaceholder}
+            placeholder={this.placeholderForActiveBlocks()}
             data-scrollback-uuid={this.props.uuid}
             data-input-count={this.props.idx}
             onBlur={this._onBlur}

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

@@ -33,6 +33,9 @@ import {
 } from './BlockModel'
 
 export type BlockViewTraits = {
+  /** number of splits currently in this tab */
+  nSplits?: number
+
   isExperimental?: boolean
   isFocused?: boolean
   isPartOfMiniSplit?: boolean

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

@@ -1256,6 +1256,7 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
                     isBeingRerun={isBeingRerun(_)}
                     uuid={scrollback.uuid}
                     tab={tab}
+                    nSplits={this.state.splits.length}
                     noActiveInput={this.props.noActiveInput || isOfflineClient()}
                     onFocus={scrollback.onFocus}
                     willRemove={scrollback.willRemoveBlock}

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

@@ -38,6 +38,15 @@ $focus-color: var(--color-brand-01);
   }
 }
 
+/** Placeholder text styling */
+@include Input {
+  &::placeholder {
+    opacity: 0.3;
+    font-size: 0.875em;
+    color: var(--color-text-02);
+  }
+}
+
 /** We are using <li> for the blocks, but don't want any standard browser styling */
 @include Block {
   list-style: none;