fix(plugins/plugin-client-common): show input index ui when using a left strip split

We have a simple heuristic that avoids showing this UI whenever we have more than one split. We can improve this with some knowledge of the existence of left or bottom strips

This PR also does some small cleanup of css to remove archaic references to section breaks

Author: starpit

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

@@ -104,9 +104,6 @@ type InputProps = {
   /** Block ordinal to be displayed to user */
   displayedIdx?: number
 
-  /** section index to be displayed to the user */
-  sectionIdx?: string
-
   /** needed temporarily to make pty/client happy */
   _block?: HTMLElement
 
@@ -206,19 +203,11 @@ export abstract class InputProvider<S extends State = State> extends React.PureC
 
   private readonly _cancelReEdit = this.cancelReEdit.bind(this)
 
-  protected contextContent(
-    insideBrackets: React.ReactNode = this.props.displayedIdx || this.props.idx + 1
-  ): React.ReactNode {
+  protected contextContent(insideBrackets: React.ReactNode = this.idx): React.ReactNode {
     return this.state.isReEdit ? (
       <a href="#" className="kui--block-action" title={strings('Cancel edit')} onClick={this._cancelReEdit}>
         <Icons icon="Edit" className="clickable" />
       </a>
-    ) : this.props.sectionIdx !== undefined ? (
-      <span className="repl-context-inner">
-        {' '}
-        {/* Helps with vertical alignment */}
-        &sect;{this.props.sectionIdx}
-      </span>
     ) : (
       <span className="repl-context-inner">
         {' '}
@@ -319,6 +308,18 @@ export abstract class InputProvider<S extends State = State> extends React.PureC
     )
   }
 
+  protected get promptValue() {
+    return hasValue(this.props.model)
+      ? this.props.model.value
+      : hasCommand(this.props.model)
+      ? this.props.model.command
+      : ''
+  }
+
+  protected get idx() {
+    return this.props.displayedIdx || this.props.idx + 1
+  }
+
   public render() {
     return (
       <React.Suspense fallback={<div />}>
@@ -435,11 +436,7 @@ export default class Input extends InputProvider {
 
   private onTextAreaRef(c: HTMLTextAreaElement) {
     if (c && (!this.state.prompt || isHTMLInputElement(this.state.prompt) || this.state.isReEdit)) {
-      let value = hasValue(this.props.model)
-        ? this.props.model.value
-        : hasCommand(this.props.model)
-        ? this.props.model.command
-        : ''
+      let value = this.promptValue
 
       if (isHTMLInputElement(this.state.prompt)) {
         if (endsWithBackSlash(this.state.prompt.value)) {

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

@@ -99,17 +99,6 @@
     }
   }
 
-  @include SectionBreak {
-    height: 1px;
-    background-color: var(--color-sidecar-toolbar-background);
-    padding: 0;
-    margin: $section-break-margin;
-  }
-
-  /*@include FinishedBlockWithInputAndOutput {
-    margin-top: 0.5em;
-  }*/
-
   @include Block {
     @include Context {
       padding: calc(#{$inset} / 0.875 + 1px) 0;
@@ -148,6 +137,10 @@
     flex-direction: column;
     padding: 0.5em 0;
 
+    @include OutputOnly {
+      @include HideContext;
+    }
+
     @include NotOutputOnly {
       @include BlockOutput {
         margin-top: 0.5em;
@@ -263,9 +256,6 @@
         }
       }
     }
-    .repl-output .repl-context {
-      opacity: 0;
-    }
 
     &[data-is-output-only] {
       /* repl right-hand decorations */

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

@@ -51,8 +51,6 @@ $input-padding-right: $input-padding-left;
 $repl-context-min-width: 2em;
 $repl-context-margin-right: 0.5em;
 
-$section-break-margin: 2em 4em 2em 7em;
-
 /** Hover hysteresis for showing action buttons */
 $action-hover-delay: 210ms;
 
@@ -155,14 +153,6 @@ $action-hover-delay: 210ms;
   }
 }
 
-@mixin SectionBreak {
-  @include Block {
-    &[data-is-section-break] {
-      @content;
-    }
-  }
-}
-
 @mixin BlockAfterBlock {
   li.repl-block + li.repl-block {
     @content;
@@ -198,14 +188,16 @@ $action-hover-delay: 210ms;
 
 /** A "T T" layout, i.e. two terminals side-by-side */
 @mixin SideBySide {
-  .repl .kui--terminal-split-container {
-    &[data-split-count='2'],
-    &[data-split-count='4'],
-    &[data-split-count='5'],
-    &[data-split-count='6'],
-    &[data-split-count='7'],
-    &[data-split-count='8'] {
-      @content;
+  .kui-tab-content:not([data-has-bottom-stripe]):not([data-has-left-strip]) {
+    .repl .kui--terminal-split-container {
+      &[data-split-count='2'],
+      &[data-split-count='4'],
+      &[data-split-count='5'],
+      &[data-split-count='6'],
+      &[data-split-count='7'],
+      &[data-split-count='8'] {
+        @content;
+      }
     }
   }
 }
@@ -336,13 +328,16 @@ $action-hover-delay: 210ms;
 }
 
 /** Hide the In[1] bits */
+@mixin HideContext {
+  .repl-context {
+    display: none;
+  }
+}
 @mixin HideIn {
   @include Block {
     &[data-is-output-only],
-    &:not([data-in-sections]):not([data-is-replay]) {
-      .repl-context {
-        display: none;
-      }
+    &:not([data-is-replay]) {
+      @include HideContext;
     }
   }
 }