VSCODE-169: Update Atlas cta on overview page (#181)

mongodb-js · Oct 12, 2020 · b5b5d2c · b5b5d2c
1 parent 30a5503
commit b5b5d2c
Show file tree

Hide file tree

Showing 9 changed files with 241 additions and 11 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -4,7 +4,9 @@
     "es6": true
   },
   "parser": "@typescript-eslint/parser", // Specifies the ESLint parser
-  "plugins": ["@typescript-eslint"],
+  "plugins": [
+    "@typescript-eslint"
+  ],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
@@ -16,7 +18,9 @@
   "parserOptions": {
     "ecmaVersion": 2018,
     "sourceType": "module",
-    "project": ["./tsconfig.json", "./src/views/webview-app/tsconfig.json"]
+    "project": [
+      "./tsconfig.json"
+    ]
   },
   "globals": {
     "acquireVsCodeApi": true
@@ -28,17 +32,26 @@
     "space-before-function-paren": 0,
     "no-async-promise-executor": 0,
     "no-extra-semi": "off",
-    "@typescript-eslint/no-extra-semi": ["error"],
+    "@typescript-eslint/no-extra-semi": [
+      "error"
+    ],
     "semi": "off",
-    "@typescript-eslint/semi": ["error"],
+    "@typescript-eslint/semi": [
+      "error"
+    ],
     "no-empty-function": "off",
     "@typescript-eslint/no-empty-function": [
       "error",
       {
-        "allow": ["arrowFunctions"]
+        "allow": [
+          "arrowFunctions"
+        ]
       }
     ],
-    "comma-dangle": ["error", "never"],
+    "comma-dangle": [
+      "error",
+      "never"
+    ],
     "no-misused-promises": "off",
     "@typescript-eslint/no-misused-promises": "off",
     "no-var-requires": "off",

diff --git a/.vscodeignore b/.vscodeignore
@@ -5,7 +5,6 @@ node_modules/**
 src/**
 .gitignore
 vsc-extension-quickstart.md
-**/tsconfig.json
 **/tslint.json
 **/*.map
 **/*.ts

diff --git a/jest.config.js b/jest.config.js
@@ -2,7 +2,7 @@ module.exports = {
   roots: ['<rootDir>/src/test/suite/views/webview-app'],
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
-    '.+\\.(less)$': 'jest-transform-stub'
+    '.+\\.(less|svg)$': 'jest-transform-stub'
   },
   reporters: [
     'default',

diff --git a/src/views/webview-app/components/atlas-cta/atlas-cta.less b/src/views/webview-app/components/atlas-cta/atlas-cta.less
@@ -0,0 +1,39 @@
+.atlas-cta {
+  display: flex;
+  text-align: center;
+  align-items: center;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.atlas-cta-text {
+  display: inline-block;
+  text-align: left;
+  width: 318px;
+  margin: 0 32px;
+}
+
+.atlas-cta-logo {
+  display: inline-block;
+  margin-left: auto;
+}
+
+.atlas-cta-button {
+  margin-right: auto;
+  display: inline-block;
+  height: 32px;
+  min-width: 152px;
+  line-height: 31px;
+  border-radius: 3px;
+  border: 1px solid var(--vscode-editor-foreground);
+  color: var(--vscode-editor-foreground);
+  background-color: transparent;
+  transition: 200ms all;
+  text-decoration: none;
+
+  &:hover {
+    background-color: var(--vscode-editor-foreground);
+    color: var(--vscode-editor-background);
+    cursor: pointer;
+  }
+}
diff --git a/src/views/webview-app/components/atlas-cta/atlas-cta.tsx b/src/views/webview-app/components/atlas-cta/atlas-cta.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import { connect } from 'react-redux';
+
+import { ActionTypes, LinkClickedAction } from '../../store/actions';
+import AtlasLogo from './atlas-logo';
+
+const styles = require('./atlas-cta.less');
+
+type DispatchProps = {
+  onLinkClicked: (screen: string, linkId: string) => void;
+};
+
+type props = DispatchProps;
+
+class AtlasCTA extends React.Component<props> {
+  onLinkClicked = (screen: string, linkId: string): void => {
+    this.props.onLinkClicked(screen, linkId);
+  };
+
+  render(): React.ReactNode {
+    return (
+      <div className={styles['atlas-cta']}>
+        <div className={styles['atlas-cta-logo']}>
+          {<AtlasLogo />}
+        </div>
+        <div className={styles['atlas-cta-text']}>
+          <div>
+            <strong>New to MongoDB and don't have a cluster?</strong>
+          </div>
+          <div>
+            If you don't already have a cluster you can create one for free
+            using&nbsp;
+            <a
+              target="_blank"
+              rel="noopener"
+              href="https://www.mongodb.com/cloud/atlas"
+              onClick={this.onLinkClicked.bind(
+                this,
+                'overviewPage',
+                'atlasLanding'
+              )}
+            >
+              MongoDB Atlas
+            </a>
+          </div>
+        </div>
+        <a
+          className={classnames(styles['atlas-cta-button'])}
+          target="_blank"
+          rel="noopener"
+          href="https://www.mongodb.com/cloud/atlas/register?utm_source=vscode&utm_medium=product&utm_campaign=VS%20code%20extension"
+          onClick={this.onLinkClicked.bind(
+            this,
+            'overviewPage',
+            'freeClusterCTA'
+          )}
+        >
+          Create free cluster
+        </a>
+      </div>
+    );
+  }
+}
+
+const mapDispatchToProps: DispatchProps = {
+  onLinkClicked: (screen, linkId): LinkClickedAction => ({
+    type: ActionTypes.EXTENSION_LINK_CLICKED,
+    screen,
+    linkId
+  })
+};
+
+export default connect(() => ({}), mapDispatchToProps)(AtlasCTA);
diff --git a/src/views/webview-app/components/atlas-cta/atlas-logo.tsx b/src/views/webview-app/components/atlas-cta/atlas-logo.tsx
@@ -0,0 +1,105 @@
+import * as React from 'react';
+
+export default class AtlasLogo extends React.PureComponent {
+  render(): React.ReactNode {
+    return (
+      <svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg">
+        <title>Atlas</title>
+        <defs>
+          <linearGradient
+            x1="28.515977%"
+            y1="105.584466%"
+            x2="79.424121%"
+            y2="-9.67572816%"
+            id="linearGradient-1"
+          >
+            <stop stopColor="#0D6149" offset="0%" />
+            <stop stopColor="#03AA4F" offset="36.97%" />
+            <stop stopColor="#00D057" offset="64.96%" />
+            <stop stopColor="#5FD891" offset="91.18%" />
+            <stop stopColor="#80DBA5" offset="100%" />
+          </linearGradient>
+          <linearGradient
+            x1="82.3061787%"
+            y1="109.629126%"
+            x2="7.44162975%"
+            y2="-16.1830097%"
+            id="linearGradient-2"
+          >
+            <stop stopColor="#0D6149" offset="0%" />
+            <stop stopColor="#03AA4F" offset="36.97%" />
+            <stop stopColor="#00D057" offset="64.96%" />
+            <stop stopColor="#5FD891" offset="91.18%" />
+            <stop stopColor="#80DBA5" offset="100%" />
+          </linearGradient>
+          <linearGradient
+            x1="2.43172043%"
+            y1="82.3204029%"
+            x2="114.608065%"
+            y2="-3.16314823%"
+            id="linearGradient-3"
+          >
+            <stop stopColor="#0D6149" offset="0%" />
+            <stop stopColor="#03AA4F" offset="36.97%" />
+            <stop stopColor="#00D057" offset="64.96%" />
+            <stop stopColor="#5FD891" offset="91.18%" />
+            <stop stopColor="#80DBA5" offset="100%" />
+          </linearGradient>
+          <linearGradient
+            x1="105.040323%"
+            y1="85.5592964%"
+            x2="-16.483871%"
+            y2="-1.59363401%"
+            id="linearGradient-4"
+          >
+            <stop stopColor="#0D6149" offset="0%" />
+            <stop stopColor="#03AA4F" offset="36.97%" />
+            <stop stopColor="#00D057" offset="64.96%" />
+            <stop stopColor="#5FD891" offset="91.18%" />
+            <stop stopColor="#80DBA5" offset="100%" />
+          </linearGradient>
+        </defs>
+        <g
+          id="Atlas"
+          stroke="none"
+          strokeWidth="1"
+          fill="none"
+          fillRule="evenodd"
+        >
+          <g id="Color-(1)" fillRule="nonzero">
+            <path
+              d="M23.6571428,21.6857142 C27.6,19.0285714 31.8,18.3428571 35.3142858,18.4285714 C35.3142858,18.1714286 35.3142858,17.9142857 35.3142858,17.6571429 C35.3142858,14.3142857 34.3714286,11.2285714 32.7428572,8.57142858 C30.2571428,8.82857142 27.6,9.51428572 25.0285714,11.3142857 C21.7714286,13.5428571 19.9714286,16.5428571 19.0285714,18.7714286 L19.0285714,26.2285714 C20.2285714,24.6857142 21.6857142,23.0571428 23.6571428,21.6857142 Z"
+              id="Path"
+              fill="url(#linearGradient-1)"
+            />
+            <path
+              d="M19.0285714,13.8 C20.1428572,12.2571429 21.6857142,10.6285714 23.6571428,9.25714286 C26.1428572,7.54285714 28.6285714,6.68571428 31.1142858,6.25714286 C28.2,2.82857142 23.9142858,0.514285714 19.1142857,0.171428571 L19.1142857,13.8 L19.0285714,13.8 Z"
+              id="Path"
+              fill="#00804B"
+            />
+            <path
+              d="M12,21.6857142 C13.9714286,23.0571428 15.4285714,24.6 16.6285714,26.2285714 L16.6285714,18.7714286 C15.6857143,16.5428571 13.8857143,13.5428571 10.6285714,11.3142857 C8.05714286,9.6 5.4,8.82857142 2.91428572,8.57142858 C1.28571429,11.2285714 0.342857142,14.3142857 0.342857142,17.6571429 C0.342857142,17.9142857 0.342857142,18.1714286 0.342857142,18.4285714 C3.85714286,18.3428571 8.05714286,19.0285714 12,21.6857142 Z"
+              id="Path"
+              fill="url(#linearGradient-2)"
+            />
+            <path
+              d="M25.0285714,23.7428572 C21.7714286,25.9714286 19.9714286,28.9714286 19.0285714,31.2 L19.0285714,35.2285714 C27,34.7142858 33.5142858,28.7142858 34.9714286,21 C31.9714286,20.9142858 28.3714286,21.4285714 25.0285714,23.7428572 Z"
+              id="Path"
+              fill="url(#linearGradient-3)"
+            />
+            <path
+              d="M16.6285714,31.2 C15.6857143,28.9714286 13.8857143,25.9714286 10.6285714,23.7428572 C7.28571428,21.4285714 3.68571429,20.9142858 0.685714286,21 C2.14285714,28.7142858 8.65714286,34.6285714 16.6285714,35.2285714 L16.6285714,31.2 Z"
+              id="Path"
+              fill="url(#linearGradient-4)"
+            />
+            <path
+              d="M12,9.34285714 C13.9714286,10.7142857 15.4285714,12.2571429 16.6285714,13.8857143 L16.6285714,0.342857142 C11.8285714,0.685714286 7.54285714,2.91428572 4.62857142,6.42857142 C7.02857142,6.77142858 9.6,7.62857142 12,9.34285714 Z"
+              id="Path"
+              fill="#00804B"
+            />
+          </g>
+        </g>
+      </svg>
+    );
+  }
+}
diff --git a/src/views/webview-app/components/connect-helper/connect-helper.less b/src/views/webview-app/components/connect-helper/connect-helper.less
@@ -4,7 +4,6 @@
 }
 
 .connect-helper-connect-area {
-  // width: 400px;
   margin: 0 auto;
 }
 

diff --git a/src/views/webview-app/components/help-panel/help-panel.less b/src/views/webview-app/components/help-panel/help-panel.less
@@ -22,6 +22,7 @@
       background-color: #ffffff;
       background-image: none;
       border: 1px solid @green;
+      text-decoration: none;
       box-shadow: none;
       color: @green;
       padding: 5px 12px 6px;

diff --git a/src/views/webview-app/components/overview-page/overview-page.tsx b/src/views/webview-app/components/overview-page/overview-page.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import OverviewHeader from './overview-header';
 import ConnectHelper from '../connect-helper/connect-helper';
 import ConnectionStatus from '../connection-status/connection-status';
-import HelpPanel from '../help-panel/help-panel';
+import AtlasCTA from '../atlas-cta/atlas-cta';
 
 const styles = require('./overview-page.less');
 
@@ -15,7 +15,7 @@ export class Overview extends React.PureComponent {
         <ConnectionStatus />
         <ConnectHelper />
         <div className={styles['overview-help-panel-container']}>
-          <HelpPanel />
+          <AtlasCTA />
         </div>
       </div>
     );
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,6 @@ @@
     }
     .connect-helper-connect-area {
-      // width: 400px;
       margin: 0 auto;
     }
@@ Expand Down @@