Repository: codalab/codalab-worksheets (language: python)

Issue:
Web CLI no longer scrolls
cc @leilenah 

<img width="1212" alt="image" src="https://user-images.githubusercontent.com/1689183/216159449-e3527be9-f8f1-4d83-acbf-059ab55d7fb3.png">




Discussion / hints:
oh lawd have mercy

Fix patch:
diff --git a/frontend/src/components/worksheets/WorksheetTerminal.js b/frontend/src/components/worksheets/WorksheetTerminal.js
index 46ce70f12..6341c937c 100644
--- a/frontend/src/components/worksheets/WorksheetTerminal.js
+++ b/frontend/src/components/worksheets/WorksheetTerminal.js
@@ -6,6 +6,8 @@ import 'jquery.terminal';
 import { withStyles } from '@material-ui/core';
 import { apiWrapper } from '../../util/apiWrapper';
 
+const TERMINAL_MINIMIZE_HEIGHT = 30;
+const TERMINAL_DRAGHEIGHT = 350;
 class WorksheetTerminal extends React.Component {
     /** Constructor. */
 
@@ -16,6 +18,7 @@ class WorksheetTerminal extends React.Component {
 
     componentDidMount() {
         var self = this;
+
         // really hacky way of making it so that the mousemove listener gets removed on mouseup
         $(document).mouseup(function(e) {
             $(document).unbind('mousemove');
@@ -60,6 +63,7 @@ class WorksheetTerminal extends React.Component {
                 greetings:
                     "Click here to enter commands (e.g., help, run '<bash command>', rm <bundle>, kill <bundle>, etc.).",
                 name: 'command_line',
+                height: TERMINAL_MINIMIZE_HEIGHT,
                 prompt: 'CodaLab> ',
                 history: true,
                 keydown: function(event, terminal) {
@@ -80,11 +84,16 @@ class WorksheetTerminal extends React.Component {
                         self.props.handleFocus();
                         return false;
                     }
-                    if (term.enabled()) {
-                        self.props.handleBlur();
-                    }
+                    // TODO: Allow clicking outside Web CLI to close it (https://github.com/codalab/codalab-worksheets/issues/4378).
+                    // if (term.enabled()) {
+                    //     term.resize(term.width(), TERMINAL_MINIMIZE_HEIGHT);
+                    //     self.props.handleBlur();
+                    // }
                 },
                 onFocus: function(term) {
+                    if (!term.data('resizing')) {
+                        term.resize(term.width(), TERMINAL_DRAGHEIGHT);
+                    }
                     self.props.handleFocus();
                 },
                 completion: async function(lastToken, callback) {
@@ -183,7 +192,6 @@ class WorksheetTerminal extends React.Component {
     }
     componentWillUnmount() {}
     componentDidUpdate() {}
-
     render() {
         const { classes, hidden } = this.props;
         const activeClass = !hidden ? classes.terminalActive : '';


Test patch:
diff --git a/frontend/src/__tests__/__snapshots__/Worksheet.test.js.snap b/frontend/src/__tests__/__snapshots__/Worksheet.test.js.snap
index d4fed238c..276316a78 100644
--- a/frontend/src/__tests__/__snapshots__/Worksheet.test.js.snap
+++ b/frontend/src/__tests__/__snapshots__/Worksheet.test.js.snap
@@ -512,7 +512,7 @@ Object {
         <div
           class="terminal"
           id="command_line"
-          style="--terminal-height: 0; --terminal-x: 0; --terminal-y: 0; --terminal-scroll: 0; --terminal-height: 0; --terminal-x: 0; --terminal-y: 0; --terminal-scroll: 0;"
+          style="height: 30px; --terminal-height: 30; --terminal-x: 0; --terminal-y: 0; --terminal-scroll: 0; --terminal-x: 0; --terminal-y: 0; --terminal-scroll: 0;"
         >
           <div
             class="terminal-wrapper"
@@ -1352,7 +1352,7 @@ Object {
       <div
         class="terminal"
         id="command_line"
-        style="--terminal-height: 0; --terminal-x: 0; --terminal-y: 0; --terminal-scroll: 0; --terminal-height: 0; --terminal-x: 0; --terminal-y: 0; --terminal-scroll: 0;"
+        style="height: 30px; --terminal-height: 30; --terminal-x: 0; --terminal-y: 0; --terminal-scroll: 0; --terminal-x: 0; --terminal-y: 0; --terminal-scroll: 0;"
       >
         <div
           class="terminal-wrapper"