fix(hadron-react-components): fix margin and update collection zero state styles COMPASS-5577

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Button, ButtonSize, ButtonVariant, Link } from '@mongodb-js/compass-components';
 import { ZeroState, StatusRow, ViewSwitcher } from 'hadron-react-components';
-import { TextButton } from 'hadron-react-buttons';
 import { ZeroGraphic } from '../zero-graphic';
 import { ExplainBody } from '../explain-body';
 
@@ -118,13 +118,6 @@ class ExplainStates extends Component {
     );
   }
 
-  /**
-   * Opens the documentation.
-   */
-  openDocumentation() {
-    this.props.openLink(DOCUMENTATION_LINK);
-  }
-
   /**
    * Render banner with information.
    *
@@ -155,23 +148,24 @@ class ExplainStates extends Component {
         <div key="zero-state" className={styles['zero-state-container']}>
           <ZeroGraphic />
           <ZeroState header={HEADER} subtext={SUBTEXT}>
-            <div className={styles['zero-state-action']}>
-              <div>
-                <TextButton
-                  dataTestId="execute-explain-button"
-                  className={
-                    `btn btn-primary btn-lg ${!this.props.isEditable ? 'disabled' : ''}`
-                  }
-                  text="Execute Explain"
-                  clickHandler={this.onExecuteExplainClicked.bind(this)} />
-              </div>
-              <a
-                className={styles['zero-state-link']}
-                onClick={this.openDocumentation.bind(this)}
+            <div>
+              <Button
+                onClick={this.onExecuteExplainClicked.bind(this)}
+                disabled={!this.props.isEditable}
+                data-test-id="execute-explain-button"
+                variant={ButtonVariant.Primary}
+                size={ButtonSize.Large}
               >
-                Learn more about explain plans
-              </a>
+                Execute Explain
+              </Button>
             </div>
+            <Link
+              className={styles['zero-state-link']}
+              href={DOCUMENTATION_LINK}
+              target="_blank"
+            >
+              Learn more about explain plans
+            </Link>
           </ZeroState>
         </div>
       );

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

@@ -32,14 +32,9 @@
 	text-align: center;
 	padding-top: 70px;
 
-	.zero-state-action {
-		display: flex;
-		flex-direction: column;
-
-		.zero-state-link {
-			display: block;
-			padding-top: 20px;
-			font-size: 16px;
-		}
+	.zero-state-link {
+		display: block;
+		margin-top: 20px;
+		font-size: 16px;
 	}
 }

packages/compass-explain-plan/src/components/zero-graphic/zero-graphic.jsx

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import classnames from 'classnames';
 
 import styles from './zero-graphic.module.less';
 
@@ -17,7 +16,7 @@ class ZeroGraphic extends Component {
   render() {
     return (
       <svg
-        className={classnames(styles['zero-graphic'])}
+        className={styles['zero-graphic']}
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 42 48"
       >

packages/compass-explain-plan/test/setup.js

@@ -13,9 +13,6 @@ virtualConsole.sendTo(console, { omitJSDOMErrors: true });
 
 require('jsdom-global')('', {
   virtualConsole: virtualConsole,
-  beforeParse(win) {
-    win.URL = { createObjectURL: () => {} };
-  },
   runScripts: 'dangerously'
 });
 

packages/compass-schema-validation/package.json

@@ -32,6 +32,7 @@
   },
   "license": "SSPL",
   "peerDependencies": {
+    "@mongodb-js/compass-components": "^0.12.0",
     "@mongodb-js/compass-crud": "^12.21.0",
     "bson": "*",
     "hadron-react-buttons": "^5.7.0",
@@ -59,6 +60,7 @@
     "@babel/preset-react": "^7.13.13",
     "@babel/register": "^7.13.16",
     "@hot-loader/react-dom": "^16.9.0",
+    "@mongodb-js/compass-components": "^0.12.0",
     "@mongodb-js/compass-crud": "^12.21.0",
     "@mongodb-js/compass-logging": "^0.9.0",
     "ace-builds": "^1.4.3",

packages/compass-schema-validation/src/components/validation-states/validation-states.jsx

@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
-import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import { Button, ButtonSize, ButtonVariant, Link } from '@mongodb-js/compass-components';
 import { ZeroState, StatusRow } from 'hadron-react-components';
-import { TextButton } from 'hadron-react-buttons';
 import ValidationEditor from '../validation-editor';
 import SampleDocuments from '../sample-documents';
 import { ZeroGraphic } from '../zero-graphic';
@@ -114,7 +113,7 @@ class ValidationStates extends Component {
               {READ_ONLY_WARNING.oldServerReadOnly}
               <div>&nbsp;</div>
               <a
-                className={classnames(styles['upgrade-link'])}
+                className={styles['upgrade-link']}
                 onClick={this.props.openLink.bind(this, DOC_UPGRADE_REVISION)}
               >
                 upgrade to MongoDB 3.2.
@@ -142,25 +141,26 @@ class ValidationStates extends Component {
     }
 
     return (
-      <div className={classnames(styles['zero-state-container'])}>
+      <div className={styles['zero-state-container']}>
         <ZeroGraphic />
         <ZeroState header={HEADER} subtext={SUBTEXT}>
-          <div className={classnames(styles['zero-state-action'])}>
-            <div>
-              <TextButton
-                dataTestId="add-rule-button"
-                className={`btn btn-primary btn-lg ${
-                  !this.isEditable() ? 'disabled' : ''
-                }`}
-                text="Add Rule"
-                clickHandler={this.props.changeZeroState.bind(this, false)} />
-            </div>
-            <a
-              className={classnames(styles['zero-state-link'])}
-              onClick={this.props.openLink.bind(this, DOC_SCHEMA_VALIDATION)}>
-              Learn more about validations
-            </a>
+          <div className={styles['zero-state-action']}>
+            <Button
+              data-test-id="add-rule-button"
+              disabled={!this.isEditable()}
+              onClick={this.props.changeZeroState.bind(this, false)}
+              variant={ButtonVariant.Primary}
+              size={ButtonSize.Large}
+            >
+              Add Rule
+            </Button>
           </div>
+          <Link
+            className={styles['zero-state-link']}
+            onClick={this.props.openLink.bind(this, DOC_SCHEMA_VALIDATION)}
+          >
+            Learn more about validations
+          </Link>
         </ZeroState>
       </div>
     );
@@ -181,7 +181,7 @@ class ValidationStates extends Component {
     }
 
     return (
-      <div className={classnames(styles['content-container'])}>
+      <div className={styles['content-container']}>
         <ValidationEditor {...this.props} isEditable={this.isEditable()} />
         <SampleDocuments {...this.props} />
       </div>
@@ -195,7 +195,7 @@ class ValidationStates extends Component {
    */
   render() {
     return (
-      <div className={classnames(styles['validation-states'])}>
+      <div className={styles['validation-states']}>
         {this.renderBanner()}
         {this.renderZeroState()}
         {this.renderContent()}

packages/compass-schema-validation/src/components/validation-states/validation-states.module.less

@@ -22,15 +22,10 @@
 		text-align: center;
 		padding-top: 135px;
 
-		.zero-state-action {
-			display: flex;
-			flex-direction: column;
-
-			.zero-state-link {
-				display: block;
-				padding-top: 20px;
-				font-size: 16px;
-			}
+		.zero-state-link {
+			display: block;
+			margin-top: 20px;
+			font-size: 16px;
 		}
 	}
 }

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

@@ -2,8 +2,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { StatusRow, ZeroState } from 'hadron-react-components';
-import { TextButton } from 'hadron-react-buttons';
-import { CancelLoader, Link } from '@mongodb-js/compass-components';
+import { Button, ButtonSize, ButtonVariant, CancelLoader, Link } from '@mongodb-js/compass-components';
 import Field from '../field';
 import AnalysisCompleteMessage from '../analysis-complete-message';
 import ZeroGraphic from '../zero-graphic';
@@ -141,14 +140,15 @@ class Schema extends Component {
         <ZeroState
           header={HEADER}
           subtext={SUBTEXT}>
-          <div className={styles['schema-zero-state-action']}>
-            <div>
-              <TextButton
-                dataTestId="analyze-schema-button"
-                className="btn btn-primary btn-lg"
-                text="Analyze Schema"
-                clickHandler={this.onApplyClicked.bind(this)} />
-            </div>
+          <div>
+            <Button
+              onClick={this.onApplyClicked.bind(this)}
+              data-test-id="analyze-schema-button"
+              variant={ButtonVariant.Primary}
+              size={ButtonSize.Large}
+            >
+              Analyze Schema
+            </Button>
           </div>
           <Link
             className={styles['schema-zero-state-link']}

packages/compass-schema/src/components/compass-schema/compass-schema.module.less

@@ -37,11 +37,6 @@
     text-align: center;
     padding-top: 70px;
 
-    &-action {
-      display: flex;
-      flex-direction: column;
-    }
-
     &-link {
       display: block;
       margin-top: 20px;

packages/compass/src/app/styles/zero-state.less

@@ -19,7 +19,9 @@
     font-weight: lighter;
     line-height: 26px;
     max-width: 600px;
-    padding: 0 0 28px 0;
+    padding: 0;
+    padding-top: 16px;
+    padding-bottom: 32px;
     margin: 0 auto;
   }
 

packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options.tsx

@@ -30,9 +30,9 @@ function UrlOptions({
 }): React.ReactElement {
   return (
     <div className={urlOptionsContainerStyles} data-testid="url-options">
-      <Label htmlFor={''}>Url Options</Label>
+      <Label htmlFor={''}>URI Options</Label>
       <Description className={urlOptionsTableDescriptionStyles}>
-        Add additional MongoDB url options to customize your connection.&nbsp;
+        Add additional MongoDB URI options to customize your connection.&nbsp;
         <Link
           href={
             'https://docs.mongodb.com/manual/reference/connection-string/#connection-string-options'

packages/hadron-react-components/src/zero-state.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { H3, Subtitle } from '@mongodb-js/compass-components';
 
 /**
  * Base component CSS class.
@@ -18,8 +19,8 @@ class ZeroState extends React.Component {
   render() {
     return (
       <div className={`${BASE}`}>
-        <p className={`${BASE}-header`}>{this.props.header}</p>
-        <p className={`${BASE}-subheader`}>{this.props.subtext}</p>
+        <H3 className={`${BASE}-header`}>{this.props.header}</H3>
+        <Subtitle className={`${BASE}-subheader`}>{this.props.subtext}</Subtitle>
         <div className={`${BASE}-body`}>
           {this.props.children}
         </div>