feat(explain-plan, query-history): use leafygreen code in explain and query history, remove global code styles COMPASS-5873 (#3159)

Author: Anemy

.depalignrc.json

@@ -73,7 +73,6 @@
       "^4.5.0"
     ],
     "electron-mocha": ["^8.2.0", "^8.1.2", "^6.0.1", "^8.2.2"],
-    "highlight.js": ["^9.8.0", "^9.12.0", "^8.9.1"],
     "chai-enzyme": [
       "1.0.0-beta.0",
       "1.0.0-beta.1",

package-lock.json

@@ -35,6 +35,7 @@
     "@leafygreen-ui/banner": "^3.0.9",
     "@leafygreen-ui/button": "^12.0.5",
     "@leafygreen-ui/card": "^5.1.4",
+    "@leafygreen-ui/code": "^9.4.0",
     "@leafygreen-ui/checkbox": "^6.0.6",
     "@leafygreen-ui/confirmation-modal": "^2.2.3",
     "@leafygreen-ui/emotion": "^4.0.0",

packages/compass-components/package.json

@@ -11,6 +11,7 @@ import { default as Banner } from '@leafygreen-ui/banner';
 import { default as LeafyGreenButton } from '@leafygreen-ui/button';
 import { default as LeafyGreenCheckbox } from '@leafygreen-ui/checkbox';
 import { default as LeafyGreenCard } from '@leafygreen-ui/card';
+import { default as LeafyGreenCode } from '@leafygreen-ui/code';
 import { default as LeafyGreenConfirmationModal } from '@leafygreen-ui/confirmation-modal';
 import { default as Icon } from '@leafygreen-ui/icon';
 import { default as LeafyGreenIconButton } from '@leafygreen-ui/icon-button';
@@ -81,6 +82,11 @@ const Checkbox = withTheme(
     React.ComponentProps<typeof LeafyGreenCheckbox>
   >
 ) as typeof LeafyGreenCheckbox;
+const Code = withTheme(
+  LeafyGreenCode as React.ComponentType<
+    React.ComponentProps<typeof LeafyGreenCode>
+  >
+) as typeof LeafyGreenCode;
 const ConfirmationModal: typeof LeafyGreenConfirmationModal = withTheme(
   LeafyGreenConfirmationModal as React.ComponentType<
     React.ComponentProps<typeof LeafyGreenConfirmationModal>
@@ -143,6 +149,7 @@ export {
   Button,
   Card,
   Checkbox,
+  Code,
   ConfirmationModal,
   Icon,
   IconButton,

packages/compass-components/src/components/leafygreen.tsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { map, isBoolean, camelCase } from 'lodash';
 import d3 from 'd3';
 import { Button } from 'react-bootstrap';
+import { Code } from '@mongodb-js/compass-components';
 
 import styles from './explain-stage.module.less';
 
@@ -81,27 +82,6 @@ class ExplainStage extends Component {
     return zIndexCounter++;
   }
 
-  /**
-   * Gets details.
-   *
-   * @returns {React.Component}
-   */
-  getDetails() {
-    if (!this.state.detailsOpen) {
-      return null;
-    }
-
-    const detailsJSON = JSON.stringify(this.props.details, null, ' ') || '{}';
-
-    return (
-      <div className={classnames(styles['details-output'])}>
-        <pre>
-          <code>{detailsJSON}</code>
-        </pre>
-      </div>
-    );
-  }
-
   /**
    * Gets highlight sections.
    *
@@ -291,7 +271,7 @@ class ExplainStage extends Component {
         <ul className={classnames(styles.highlighted)}>
           {this.getHighlightSections()}
         </ul>
-        <div className={classnames(styles.details)}>
+        <div className={styles.details}>
           <Button
             bsSize="xsmall"
             bsStyle="default"
@@ -300,7 +280,15 @@ class ExplainStage extends Component {
           >
             Details
           </Button>
-          {this.getDetails()}
+          {this.state.detailsOpen && (
+            <Code
+              className={styles['details-output']}
+              copyable={false}
+              language="json"
+            >
+              {JSON.stringify(this.props.details, null, ' ') || '{}'}
+            </Code>
+          )}
         </div>
       </div>
     );

packages/compass-explain-plan/src/components/explain-stage/explain-stage.jsx

@@ -8,7 +8,7 @@
   margin: 0 auto;
   position: absolute;
   border-radius: 3px;
-  padding: 18px 12px 12px;
+  padding: 18px 12px 6px 12px;
   box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.06);
 
   &:hover {
@@ -131,27 +131,12 @@
     button {
       pointer-events: all;
       margin: 0;
+      margin-bottom: 6px;
     }
   }
 
   .details-output {
     pointer-events: all;
-    padding: 6px;
-    margin-top: 6px;
-    background: @gray8;
-    border-radius: 3px;
-  }
-
-  .details-output pre {
-    background: none;
-    word-break: break-word;
-    border: none;
-    margin: 0;
-    font-size: 11px;
-  }
-
-  .details-output pre code {
-    background: none;
-    margin: 0;
+    max-height: 40vh;
   }
 }

packages/compass-explain-plan/src/components/explain-stage/explain-stage.module.less

@@ -45,11 +45,11 @@
   "dependencies": {
     "@mongodb-js/compass-logging": "^0.12.0",
     "bson": "^4.4.1",
-    "highlight.js": "^9.12.0",
     "lodash": "^4.17.15",
     "mongodb-data-service": "^21.21.0"
   },
   "peerDependencies": {
+    "@mongodb-js/compass-components": "^0.15.0",
     "bson": "^4.4.1",
     "debug": "*",
     "hadron-react-components": "^5.15.0",
@@ -71,6 +71,7 @@
     "@babel/preset-env": "^7.14.2",
     "@babel/preset-react": "^7.13.13",
     "@babel/register": "^7.13.16",
+    "@mongodb-js/compass-components": "^0.15.0",
     "ampersand-model": "^8.0.1",
     "ampersand-rest-collection": "^6.0.0",
     "autoprefixer": "^9.4.6",