fix(compass-shell): Show mongosh version in help panel, increase panel height, update text COMPASS-4844 (#2333)

* Show mongosh version in help panel, increase size of the panel, tweak type

* remove beta

* update mongosh product naming

* update test for new type

* fix capital letter in description

* fix capital letter in description

* revert uppercase

* revert uppercase

Co-authored-by: Maurizio Casimirri <[email protected]>

Author: Anemy

packages/compass-shell/src/components/compass-shell/compass-shell.jsx

@@ -22,7 +22,7 @@ const resizeableDirections = {
   topLeft: false
 };
 
-const defaultShellHeightClosed = 24;
+const defaultShellHeightClosed = 32;
 const defaultShellHeightOpened = 240;
 
 export class CompassShell extends Component {

packages/compass-shell/src/components/compass-shell/compass-shell.spec.js

@@ -126,7 +126,7 @@ describe('CompassShell', () => {
     });
 
     context('when it is clicked to collapse', () => {
-      it('sets the collapsed height to 24', () => {
+      it('sets the collapsed height to 32', () => {
         const shell = new CompassShell({ isExpanded: true });
         let sizeSetTo = {};
         shell.resizableRef = {
@@ -141,7 +141,7 @@ describe('CompassShell', () => {
 
         expect(sizeSetTo).to.deep.equal({
           width: '100%',
-          height: 24
+          height: 32
         });
       });
 

packages/compass-shell/src/components/info-modal/info-modal.jsx

@@ -3,39 +3,42 @@ import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
 import { Modal } from 'react-bootstrap';
 import { connect } from 'react-redux';
+import packageJson from '../../../package.json';
 
 import { SET_SHOW_INFO_MODAL } from '../../modules/info-modal';
 
+const mongoshVersion = `v${packageJson.dependencies['@mongosh/browser-repl'].replace('^', '')}`;
+
 import styles from './info-modal.less';
 
 const hotkeys = [
   {
     key: 'Ctrl+A',
-    description: 'Moves the cursor to the begining of the line.'
+    description: 'Moves the cursor to the beginning of the line.'
   },
   {
     key: 'Ctrl+B',
-    description: 'Moves the cursor backwards one character.'
+    description: 'Moves the cursor Backward one character.'
   },
   {
     key: 'Ctrl+C',
     description: 'Stop currently running command.'
   },
   {
     key: 'Ctrl+D',
-    description: 'Erases the next character.'
+    description: 'Deletes the next character.'
   },
   {
     key: 'Ctrl+E',
     description: 'Moves the cursor to the end of the line.'
   },
   {
     key: 'Ctrl+F',
-    description: 'Moves the cursor forwards one character.'
+    description: 'Moves the cursor Forward one character.'
   },
   {
     key: 'Ctrl+H',
-    description: 'Erases one character. Similar to hitting backspace.'
+    description: 'Erases one character, similar to hitting backspace.'
   },
   {
     key: 'Ctrl+L',
@@ -47,7 +50,7 @@ const hotkeys = [
   },
   {
     key: 'Ctrl+U',
-    description: 'Changes the line to uppercase.'
+    description: 'Changes the line to Uppercase.'
   }
 ];
 
@@ -74,18 +77,18 @@ export class InfoModal extends PureComponent {
     return (
       <Modal show={isInfoModalVisible}>
         <Modal.Header closeButton onHide={hideInfoModal}>
-          <h4>MongoSH Beta</h4>
+          <h4>mongosh {mongoshVersion}</h4>
         </Modal.Header>
         <Modal.Body>
           <div className={styles['info-modal-banner']}>
-            More information on this release of&nbsp;
+            More information on this release of the&nbsp;
             <a
               className={styles['info-modal-banner-link']}
               id="mongosh-info-link"
               rel="noreopener"
               href="https://docs.mongodb.com/compass/beta/embedded-shell/"
               target="_blank"
-            >MongoSH Beta</a>
+            >MongoDB Shell</a>
           </div>
           <div className={styles['info-modal-shortcuts-title']}>
             Keyboard Shortcuts

packages/compass-shell/src/components/info-modal/info-model.spec.js

@@ -21,9 +21,11 @@ describe('InfoModal [Component]', () => {
   });
 
   it('renders the title text', () => {
-    expect(component.find('h4')).to.have.text(
-      'MongoSH Beta'
-    );
+    const title = component.find('h4').text();
+    const hasVersionZero = title.includes('mongosh v0.');
+    const hasVersionOne = title.includes('mongosh v1.');
+    const titleIsAccurate = hasVersionZero || hasVersionOne;
+    expect(titleIsAccurate).to.equal(true);
   });
 
   it('renders the hotkeys key', () => {
@@ -34,7 +36,7 @@ describe('InfoModal [Component]', () => {
 
   it('renders the hotkeys description', () => {
     expect(component.find(`.${styles['info-modal-shortcuts-hotkey']}`).at(5)).to.have.text(
-      'Ctrl+FMoves the cursor forwards one character.'
+      'Ctrl+FMoves the cursor Forward one character.'
     );
   });
 });

packages/compass-shell/src/components/resize-handle/resize-handle.less

@@ -10,14 +10,14 @@
   left: -@handle-half-width-width-padding;
   margin-left: 50%;
   width: @handle-width-with-padding;
-  height: 24px;
+  height: 32px;
 }
 
 .resize-handle::after {
   content: "";
   position: absolute;
   left: -@handle-half-width;
-  top: 8px;
+  top: 12px;
   margin-left: 50%;
   margin-top: 4px;
   width: @handle-width;

packages/compass-shell/src/components/shell-header/shell-header.jsx

@@ -38,7 +38,7 @@ export class ShellHeader extends Component {
             className={styles['compass-shell-header-toggle']}
             onClick={onShellToggleClicked}
           >
-            >_MongoSH
+            >_MONGOSH
             {!isExpanded && isOperationInProgress && (
               <>
                 <ShellLoader

packages/compass-shell/src/components/shell-header/shell-header.less

@@ -2,7 +2,7 @@
 
 .compass-shell-header {
   width: 100%;
-  height: 24px;
+  height: 32px;
   display: flex;
   color: @leafygreen__gray--light-1;
 
@@ -12,6 +12,8 @@
 
   &-right-actions {
     display: flex;
+    padding-top: 2px;
+    padding-right: 4px;
   }
 
   &-toggle {
@@ -27,7 +29,7 @@
     margin: auto 0;
     font-weight: bold;
     font-size: 12px;
-    line-height: 24px;
+    line-height: 32px;
 
     transition: all 200ms;
     user-select: none;
@@ -51,7 +53,5 @@
 
   &-btn {
     margin-right: 4px;
-    width: 24px;
-    height: 24px;
   }
 }