@mongodb-js/compass-shell 3.2.0 → 3.3.0

package/lib/2.js

@@ -1,6 +1,6 @@
 (window["webpackJsonpCompassShellPlugin"] = window["webpackJsonpCompassShellPlugin"] || []).push([[2],{
 
-/***/ 480:
+/***/ 473:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -22,12 +22,12 @@ var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
 var es = __webpack_require__(128);
 
 // EXTERNAL MODULE: /home/runner/work/compass/compass/node_modules/@mongosh/browser-repl/lib/mongosh-browser-repl.js
-var mongosh_browser_repl = __webpack_require__(285);
+var mongosh_browser_repl = __webpack_require__(281);
 
 // EXTERNAL MODULE: external "@mongodb-js/compass-components"
 var compass_components_ = __webpack_require__(242);
 
-// CONCATENATED MODULE: ./src/components/info-modal/keyboard-shortcuts-table.jsx
+// CONCATENATED MODULE: ./src/components/shell-info-modal/keyboard-shortcuts-table.jsx
 
 
 const rowStyles = Object(compass_components_["css"])({
@@ -75,7 +75,6 @@ const hotkeys = [{
   key: '\u2193',
   description: 'Cycle forwards through command history.'
 }];
-
 function KeyboardShortcutsTable() {
   return /*#__PURE__*/external_react_default.a.createElement(compass_components_["Table"], {
     data: hotkeys,
@@ -96,16 +95,12 @@ function KeyboardShortcutsTable() {
   }, datum.key)), /*#__PURE__*/external_react_default.a.createElement(compass_components_["Cell"], null, /*#__PURE__*/external_react_default.a.createElement(compass_components_["Description"], null, datum.description))));
 }
 
-
-// CONCATENATED MODULE: ./src/components/info-modal/info-modal.jsx
+// CONCATENATED MODULE: ./src/components/shell-info-modal/shell-info-modal.jsx
 
 
 
 
-const mongoshVersion = `v${__webpack_require__(476).version}`;
-const modalContentWrapperStyles = Object(compass_components_["css"])({
-  padding: 'initial'
-});
+const mongoshVersion = `v${__webpack_require__(469).version}`;
 const shortcutsTableContainerStyles = Object(compass_components_["css"])({
   marginTop: compass_components_["spacing"][2],
   maxHeight: '50vh',
@@ -114,30 +109,20 @@ const shortcutsTableContainerStyles = Object(compass_components_["css"])({
 const shortcutsTitleStyles = Object(compass_components_["css"])({
   marginTop: compass_components_["spacing"][4]
 });
-const modalContentStyles = Object(compass_components_["css"])({
-  padding: compass_components_["spacing"][5]
-});
-/**
- * Show information on how to use the shell in compass.
- */
-
-function InfoModal({
+function ShellInfoModal({
   hideInfoModal,
   show
 }) {
-  const onSetOpen = Object(external_react_["useCallback"])(open => {
-    if (!open) {
-      hideInfoModal();
-    }
+  const onClose = Object(external_react_["useCallback"])(() => {
+    hideInfoModal();
   }, [hideInfoModal]);
-  return /*#__PURE__*/external_react_default.a.createElement(compass_components_["Modal"], {
+  return /*#__PURE__*/external_react_default.a.createElement(compass_components_["InfoModal"], {
     open: show,
+    title: `mongosh ${mongoshVersion}`,
     trackingId: "shell_info_modal",
-    setOpen: onSetOpen,
-    contentClassName: modalContentWrapperStyles
-  }, /*#__PURE__*/external_react_default.a.createElement("div", {
-    className: modalContentStyles
-  }, /*#__PURE__*/external_react_default.a.createElement(compass_components_["ModalTitle"], null, "mongosh ", mongoshVersion), /*#__PURE__*/external_react_default.a.createElement(compass_components_["Banner"], null, "For more information please visit the\xA0", /*#__PURE__*/external_react_default.a.createElement(compass_components_["Link"], {
+    "data-testid": "shell-info-modal",
+    onClose: onClose
+  }, /*#__PURE__*/external_react_default.a.createElement(compass_components_["Banner"], null, "For more information please visit the\xA0", /*#__PURE__*/external_react_default.a.createElement(compass_components_["Link"], {
     id: "mongosh-info-link",
     href: "https://docs.mongodb.com/compass/beta/embedded-shell/",
     target: "_blank"
@@ -145,39 +130,35 @@ function InfoModal({
     className: shortcutsTitleStyles
   }, "Keyboard Shortcuts"), /*#__PURE__*/external_react_default.a.createElement("div", {
     className: shortcutsTableContainerStyles
-  }, /*#__PURE__*/external_react_default.a.createElement(KeyboardShortcutsTable, null))), /*#__PURE__*/external_react_default.a.createElement(compass_components_["ModalFooter"], null, /*#__PURE__*/external_react_default.a.createElement(compass_components_["Button"], {
-    onClick: hideInfoModal
-  }, "Close")));
+  }, /*#__PURE__*/external_react_default.a.createElement(KeyboardShortcutsTable, null)));
 }
-
-InfoModal.propTypes = {
+ShellInfoModal.propTypes = {
   hideInfoModal: prop_types_default.a.func.isRequired,
   show: prop_types_default.a.bool.isRequired
 };
-/* harmony default export */ var info_modal = (InfoModal);
-// CONCATENATED MODULE: ./src/components/info-modal/index.js
+/* harmony default export */ var shell_info_modal = (ShellInfoModal);
+// CONCATENATED MODULE: ./src/components/shell-info-modal/index.js
 
-/* harmony default export */ var components_info_modal = (info_modal);
+/* harmony default export */ var components_shell_info_modal = (shell_info_modal);
 // CONCATENATED MODULE: ./src/components/shell-header/shell-header.jsx
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 
 
 
-
 const shellHeaderStyles = Object(compass_components_["css"])({
   height: compass_components_["spacing"][5],
   display: 'flex',
-  color: compass_components_["uiColors"].gray.light1
+  color: compass_components_["palette"].gray.light1
 });
 const shellHeaderLeftStyles = Object(compass_components_["css"])({
   flexGrow: 1,
   display: 'flex',
   alignItems: 'center'
 });
-const shellHeaderDefaultColor = compass_components_["uiColors"].gray.light1;
-const shellHeaderFlashColorDark = compass_components_["uiColors"].gray.base;
-const shellHeaderFlashColorLight = compass_components_["uiColors"].gray.light2;
+const shellHeaderDefaultColor = compass_components_["palette"].gray.light1;
+const shellHeaderFlashColorDark = compass_components_["palette"].gray.base;
+const shellHeaderFlashColorLight = compass_components_["palette"].gray.light2;
 const shellLoaderFlash = compass_components_["keyframes"]`
   0% { color: ${shellHeaderDefaultColor}; }
   10% { color: ${shellHeaderFlashColorDark}; }
@@ -210,7 +191,7 @@ const shellHeaderToggleStyles = Object(compass_components_["css"])({
   textTransform: 'uppercase',
   animation: `${shellLoaderFlash} 2s linear`,
   '&:hover': {
-    color: compass_components_["uiColors"].gray.light3
+    color: compass_components_["palette"].gray.light3
   }
 });
 const shellHeaderRightStyles = Object(compass_components_["css"])({
@@ -222,18 +203,16 @@ const infoButtonStyles = Object(compass_components_["css"])({
   marginRight: compass_components_["spacing"][2]
 });
 const operationInProgressStyles = Object(compass_components_["css"])({
-  color: compass_components_["uiColors"].green.light2,
+  color: compass_components_["palette"].green.light2,
   marginLeft: compass_components_["spacing"][2]
 });
 class shell_header_ShellHeader extends external_react_["Component"] {
   componentDidMount() {
     document.addEventListener('keydown', this.handleKeyboardToggle.bind(this));
   }
-
   componentWillUnmount() {
     document.removeEventListener('keydown', this.handleKeyboardToggle.bind(this));
   }
-
   handleKeyboardToggle({
     ctrlKey,
     key
@@ -242,13 +221,12 @@ class shell_header_ShellHeader extends external_react_["Component"] {
       this.props.onShellToggleClicked();
     }
   }
+
   /**
    * Render ShellHeader component.
    *
    * @returns {React.Component} The rendered component.
    */
-
-
   render() {
     const {
       isExpanded,
@@ -261,6 +239,7 @@ class shell_header_ShellHeader extends external_react_["Component"] {
     }, /*#__PURE__*/external_react_default.a.createElement("div", {
       className: shellHeaderLeftStyles
     }, /*#__PURE__*/external_react_default.a.createElement("button", {
+      type: "button",
       "data-testid": "shell-expand-button",
       className: shellHeaderToggleStyles,
       "aria-label": isExpanded ? 'Close Shell' : 'Open Shell',
@@ -273,6 +252,7 @@ class shell_header_ShellHeader extends external_react_["Component"] {
     }), "\xA0Command in progress\u2026"))), /*#__PURE__*/external_react_default.a.createElement("div", {
       className: shellHeaderRightStyles
     }, isExpanded && /*#__PURE__*/external_react_default.a.createElement(compass_components_["IconButton"], {
+      "data-testid": "shell-info-button",
       className: infoButtonStyles,
       variant: "dark",
       "aria-label": "Shell Info",
@@ -291,16 +271,13 @@ class shell_header_ShellHeader extends external_react_["Component"] {
       size: "small"
     }))));
   }
-
 }
-
 _defineProperty(shell_header_ShellHeader, "propTypes", {
   isExpanded: prop_types_default.a.bool.isRequired,
   isOperationInProgress: prop_types_default.a.bool.isRequired,
   onShellToggleClicked: prop_types_default.a.func.isRequired,
   showInfoModal: prop_types_default.a.func.isRequired
 });
-
 /* harmony default export */ var shell_header = (shell_header_ShellHeader);
 // CONCATENATED MODULE: ./src/components/shell-header/index.js
 
@@ -315,22 +292,20 @@ function compass_shell_defineProperty(obj, key, value) { if (key in obj) { Objec
 
 
 
-
 const compassShellStyles = Object(compass_components_["css"])({
-  backgroundColor: compass_components_["uiColors"].gray.dark3,
+  backgroundColor: compass_components_["palette"].gray.dark3,
   display: 'flex',
   flexBasis: 'auto',
   position: 'relative',
-  flexDirection: 'column',
-  maxHeight: '95%'
+  flexDirection: 'column'
 });
 const compassShellContainerStyles = Object(compass_components_["css"])({
   flexGrow: 1,
   display: 'none',
   overflow: 'auto',
-  borderTop: `1px solid ${compass_components_["uiColors"].gray.dark2}`,
+  borderTop: `1px solid ${compass_components_["palette"].gray.dark2}`,
   '*::-webkit-scrollbar-thumb': {
-    background: 'rgba(180, 180, 180, 0.5)'
+    background: Object(compass_components_["rgba"])(compass_components_["palette"].gray.light1, 0.5)
   }
 });
 const compassShellContainerVisibleStyles = Object(compass_components_["css"])({
@@ -339,49 +314,41 @@ const compassShellContainerVisibleStyles = Object(compass_components_["css"])({
 const defaultShellHeightOpened = 240;
 const shellHeightClosed = 32;
 const shellMinHeightOpened = 100;
-
 function getMaxShellHeight() {
   return Math.max(defaultShellHeightOpened, window.innerHeight - 100);
-} // Apply bounds to the shell height when resizing to ensure it's always
-// visible and usable to the user.
-
+}
 
+// Apply bounds to the shell height when resizing to ensure it's always
+// visible and usable to the user.
 function boundShellHeight(attemptedHeight) {
   const maxHeight = getMaxShellHeight();
   return Math.min(maxHeight, Math.max(shellMinHeightOpened, attemptedHeight));
 }
-
 class compass_shell_CompassShell extends external_react_["Component"] {
   constructor(props) {
     super(props);
-
     compass_shell_defineProperty(this, "onShellOutputChanged", output => {
       this.shellOutput = output;
     });
-
     compass_shell_defineProperty(this, "onOperationStarted", () => {
       this.setState({
         isOperationInProgress: true
       });
     });
-
     compass_shell_defineProperty(this, "onOperationEnd", () => {
       this.setState({
         isOperationInProgress: false
       });
     });
-
     compass_shell_defineProperty(this, "terminateRuntime", () => {
       if (this.props.runtime) {
         this.props.runtime.terminate();
       }
     });
-
     compass_shell_defineProperty(this, "saveHistory", async history => {
       if (!this.props.historyStorage) {
         return;
       }
-
       try {
         await this.props.historyStorage.save(history);
       } catch (error) {
@@ -389,12 +356,10 @@ class compass_shell_CompassShell extends external_react_["Component"] {
         console.error(error);
       }
     });
-
     compass_shell_defineProperty(this, "loadHistory", async () => {
       if (!this.props.historyStorage) {
         return;
       }
-
       try {
         const history = await this.props.historyStorage.load();
         this.setState({
@@ -408,7 +373,6 @@ class compass_shell_CompassShell extends external_react_["Component"] {
         });
       }
     });
-
     this.shellRef = /*#__PURE__*/external_react_default.a.createRef();
     this.shellOutput = this.props.shellOutput || [];
     this.state = {
@@ -419,26 +383,21 @@ class compass_shell_CompassShell extends external_react_["Component"] {
       showInfoModal: false
     };
   }
-
   componentDidMount() {
     this.loadHistory();
     window.addEventListener('beforeunload', this.terminateRuntime);
   }
-
   componentDidUpdate(prevProps, prevState) {
     const {
       height
     } = this.state;
-
     if (prevState.height < shellMinHeightOpened && height > shellMinHeightOpened) {
       this.props.emitShellPluginOpened();
     }
   }
-
   componentWillUnmount() {
     window.removeEventListener('beforeunload', this.terminateRuntime);
   }
-
   updateHeight(height) {
     this.setState(height > shellMinHeightOpened ? {
       height,
@@ -449,27 +408,23 @@ class compass_shell_CompassShell extends external_react_["Component"] {
       height
     });
   }
-
   hideInfoModal() {
     this.setState({
       showInfoModal: false
     });
   }
-
   focusEditor() {
     var _window$getSelection;
-
     if (this.shellRef.current && ((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) !== 'Range') {
       this.shellRef.current.focusEditor();
     }
   }
+
   /**
    * Render CompassShell component.
    *
    * @returns {React.Component} The rendered component.
    */
-
-
   render() {
     const {
       height,
@@ -477,14 +432,12 @@ class compass_shell_CompassShell extends external_react_["Component"] {
       isOperationInProgress,
       showInfoModal
     } = this.state;
-
     if (!this.props.runtime || !this.state.initialHistory) {
       return /*#__PURE__*/external_react_default.a.createElement("div", null);
     }
-
     const isExpanded = height > shellMinHeightOpened;
     const renderedHeight = isExpanded ? boundShellHeight(height) : shellHeightClosed;
-    return /*#__PURE__*/external_react_default.a.createElement(external_react_["Fragment"], null, /*#__PURE__*/external_react_default.a.createElement(components_info_modal, {
+    return /*#__PURE__*/external_react_default.a.createElement(external_react_["Fragment"], null, /*#__PURE__*/external_react_default.a.createElement(components_shell_info_modal, {
       show: showInfoModal,
       hideInfoModal: this.hideInfoModal.bind(this)
     }), /*#__PURE__*/external_react_default.a.createElement("div", {
@@ -525,21 +478,17 @@ class compass_shell_CompassShell extends external_react_["Component"] {
       onOperationEnd: this.onOperationEnd
     }))));
   }
-
 }
-
 compass_shell_defineProperty(compass_shell_CompassShell, "propTypes", {
   emitShellPluginOpened: prop_types_default.a.func,
   runtime: prop_types_default.a.object,
   shellOutput: prop_types_default.a.array,
   historyStorage: prop_types_default.a.object
 });
-
 compass_shell_defineProperty(compass_shell_CompassShell, "defaultProps", {
   emitShellPluginOpened: () => {},
   runtime: null
 });
-
 /* harmony default export */ var compass_shell = (Object(es["b" /* connect */])(state => ({
   emitShellPluginOpened: () => {
     if (state.appRegistry && state.appRegistry.globalAppRegistry) {