feat(plugins/plugin-client-common): SourceRef should be default-expanded in Notebooks?

This PR updates SimpleEditor so that, for `simple` props, it is sized to fit, in terms of height.

This PR also fixes a longer-standing problem where reducing the width of the window would not result in a re-layout of monaco for SourceRef; we need a min-width: 0 on flex-fill

Fixes #5866

Author: starpit

plugins/plugin-client-common/src/components/Content/Editor/SimpleEditor.tsx

@@ -118,13 +118,18 @@ export default class SimpleEditor extends React.PureComponent<Props, State> {
       )
       const editor = Monaco.create(state.wrapper, options)
 
+      if (props.simple) {
+        // size to fit
+        state.wrapper.style.height = Math.min(400, editor.getContentHeight()) + 'px'
+      }
+
       state.wrapper['getValueForTests'] = () => {
         return editor.getValue()
       }
 
       editor.onDidChangeModelContent(SimpleEditor.onChange(props, editor))
 
-      if (!props.readonly) {
+      if (!options.readOnly) {
         setTimeout(() => editor.focus())
       }
 

plugins/plugin-client-common/src/components/Content/Editor/lib/defaults.ts

@@ -46,5 +46,6 @@ export default (options: Options): editor.IEditorConstructionOptions => ({
   folding: !options.simple || !/markdown|text|shell/i.test(options.language),
   lineNumbers: options.simple ? 'off' : 'on',
   wordWrap: options.simple ? 'on' : undefined,
+  renderFinalNewline: !options.simple,
   lineDecorationsWidth: options.simple ? 0 : undefined
 })

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

@@ -264,11 +264,14 @@ export abstract class InputProvider<S extends State = State> extends React.PureC
                   className="flex-fill"
                   showMore={strings('Show X', name)}
                   showLess={strings('Hide X', name)}
+                  expanded={this.props.isPartOfNotebook}
                   onToggle={() => eventBus.emitTabLayoutChange(getPrimaryTabId(this.props.tab))}
                 >
                   <SimpleEditor
                     tabUUID={getPrimaryTabId(this.props.tab)}
-                    content={_.data}
+                    content={
+                      _.data.replace(/\n$/, '') /* monaco's renderFinalNewline option doesn't seem to do what we need */
+                    }
                     contentType={_.contentType}
                     className="kui--source-ref-editor kui--inverted-color-context"
                     fontSize={12}
@@ -599,7 +602,12 @@ export default class Input extends InputProvider {
       const replayed = isReplay(this.props.model)
       const completed = this.props.model.startTime && isWithCompleteEvent(this.props.model)
       const showingDate = !replayed && completed && !this.props.isWidthConstrained
-      const noParen = !showingDate
+      const duration =
+        !replayed &&
+        isWithCompleteEvent(this.props.model) &&
+        this.props.model.completeEvent.completeTime &&
+        prettyPrintDuration(this.props.model.completeEvent.completeTime - this.props.model.startTime)
+      const noParen = !showingDate || !duration
       const openParen = noParen ? '' : '('
       const closeParen = noParen ? '' : ')'
 
@@ -609,9 +617,7 @@ export default class Input extends InputProvider {
             {showingDate && new Date(this.props.model.startTime).toLocaleTimeString()}
             <span className="small-left-pad sub-text" ref={c => this.setState({ durationDom: c })}>
               {openParen}
-              {isWithCompleteEvent(this.props.model) &&
-                this.props.model.completeEvent.completeTime &&
-                prettyPrintDuration(this.props.model.completeEvent.completeTime - this.props.model.startTime)}
+              {duration}
               {closeParen}
             </span>
           </span>

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

@@ -38,6 +38,9 @@ export type BlockViewTraits = {
   isPartOfMiniSplit?: boolean
   isWidthConstrained?: boolean
 
+  /** Is this Block being displayed as part of a Notebook? */
+  isPartOfNotebook?: boolean
+
   /** Handler for: User clicked to focus on this block */
   willFocusBlock?: (evt: React.SyntheticEvent) => void
 

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

@@ -141,6 +141,9 @@ type ScrollbackState = ScrollbackOptions & {
 interface State {
   focusedIdx: number
   splits: ScrollbackState[]
+
+  /** Is this Tab showing a Notebook? */
+  isNotebook?: boolean
 }
 
 /** get the selected texts in window */
@@ -180,7 +183,10 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
     this.initClipboardEvents()
     this.state = {
       focusedIdx: 0,
-      splits: this.props.snapshot ? this.replaySnapshot() : [this.scrollbackWithWelcome()]
+      splits: this.props.snapshot ? this.replaySnapshot() : [this.scrollbackWithWelcome()],
+
+      // are we loading a notebook from a snapshot?
+      isNotebook: !!this.props.snapshot
     }
 
     this.initSnapshotEvents()
@@ -1106,6 +1112,7 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
                     willFocusBlock={willFocusBlock}
                     isExperimental={hasCommand(_) && _.isExperimental}
                     isFocused={isFocused}
+                    isPartOfNotebook={this.state.isNotebook}
                     prefersTerminalPresentation={isOk(_) && _.prefersTerminalPresentation}
                     isPartOfMiniSplit={isMiniSplit}
                     isVisibleInMiniSplit={idx === showThisIdxInMiniSplit || idx === nBlocks - 1}

plugins/plugin-client-common/web/css/static/ui.css

@@ -119,6 +119,7 @@ body.still-loading .repl {
 }
 .flex-fill {
   flex: 1;
+  min-width: 0; /* so that reducing the width of the window causes a reflow; sigh */
 }
 .kui--rotate-180 {
   transform: rotate(180deg);