Skip to content

Commit b5b5d2c

Browse files
AnemyAnemy
authored
VSCODE-169: Update Atlas cta on overview page (#181)
1 parent 30a5503 commit b5b5d2c

File tree

9 files changed

+241
-11
lines changed

9 files changed

+241
-11
lines changed

‎.eslintrc

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
"es6": true
55
},
66
"parser": "@typescript-eslint/parser", // Specifies the ESLint parser
7-
"plugins": ["@typescript-eslint"],
7+
"plugins": [
8+
"@typescript-eslint"
9+
],
810
"extends": [
911
"eslint:recommended",
1012
"plugin:@typescript-eslint/eslint-recommended",
@@ -16,7 +18,9 @@
1618
"parserOptions": {
1719
"ecmaVersion": 2018,
1820
"sourceType": "module",
19-
"project": ["./tsconfig.json", "./src/views/webview-app/tsconfig.json"]
21+
"project": [
22+
"./tsconfig.json"
23+
]
2024
},
2125
"globals": {
2226
"acquireVsCodeApi": true
@@ -28,17 +32,26 @@
2832
"space-before-function-paren": 0,
2933
"no-async-promise-executor": 0,
3034
"no-extra-semi": "off",
31-
"@typescript-eslint/no-extra-semi": ["error"],
35+
"@typescript-eslint/no-extra-semi": [
36+
"error"
37+
],
3238
"semi": "off",
33-
"@typescript-eslint/semi": ["error"],
39+
"@typescript-eslint/semi": [
40+
"error"
41+
],
3442
"no-empty-function": "off",
3543
"@typescript-eslint/no-empty-function": [
3644
"error",
3745
{
38-
"allow": ["arrowFunctions"]
46+
"allow": [
47+
"arrowFunctions"
48+
]
3949
}
4050
],
41-
"comma-dangle": ["error", "never"],
51+
"comma-dangle": [
52+
"error",
53+
"never"
54+
],
4255
"no-misused-promises": "off",
4356
"@typescript-eslint/no-misused-promises": "off",
4457
"no-var-requires": "off",

‎.vscodeignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ node_modules/**
55
src/**
66
.gitignore
77
vsc-extension-quickstart.md
8-
**/tsconfig.json
98
**/tslint.json
109
**/*.map
1110
**/*.ts

‎jest.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ module.exports = {
22
roots: ['<rootDir>/src/test/suite/views/webview-app'],
33
transform: {
44
'^.+\\.tsx?$': 'ts-jest',
5-
'.+\\.(less)$': 'jest-transform-stub'
5+
'.+\\.(less|svg)$': 'jest-transform-stub'
66
},
77
reporters: [
88
'default',

‎src/views/webview-app/components/atlas-cta/atlas-cta.less

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.atlas-cta {
2+
display: flex;
3+
text-align: center;
4+
align-items: center;
5+
width: 100%;
6+
margin: 0 auto;
7+
}
8+
9+
.atlas-cta-text {
10+
display: inline-block;
11+
text-align: left;
12+
width: 318px;
13+
margin: 0 32px;
14+
}
15+
16+
.atlas-cta-logo {
17+
display: inline-block;
18+
margin-left: auto;
19+
}
20+
21+
.atlas-cta-button {
22+
margin-right: auto;
23+
display: inline-block;
24+
height: 32px;
25+
min-width: 152px;
26+
line-height: 31px;
27+
border-radius: 3px;
28+
border: 1px solid var(--vscode-editor-foreground);
29+
color: var(--vscode-editor-foreground);
30+
background-color: transparent;
31+
transition: 200ms all;
32+
text-decoration: none;
33+
34+
&:hover {
35+
background-color: var(--vscode-editor-foreground);
36+
color: var(--vscode-editor-background);
37+
cursor: pointer;
38+
}
39+
}

‎src/views/webview-app/components/atlas-cta/atlas-cta.tsx

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import * as React from 'react';
2+
import classnames from 'classnames';
3+
import { connect } from 'react-redux';
4+
5+
import { ActionTypes, LinkClickedAction } from '../../store/actions';
6+
import AtlasLogo from './atlas-logo';
7+
8+
const styles = require('./atlas-cta.less');
9+
10+
type DispatchProps = {
11+
onLinkClicked: (screen: string, linkId: string) => void;
12+
};
13+
14+
type props = DispatchProps;
15+
16+
class AtlasCTA extends React.Component<props> {
17+
onLinkClicked = (screen: string, linkId: string): void => {
18+
this.props.onLinkClicked(screen, linkId);
19+
};
20+
21+
render(): React.ReactNode {
22+
return (
23+
<div className={styles['atlas-cta']}>
24+
<div className={styles['atlas-cta-logo']}>
25+
{<AtlasLogo />}
26+
</div>
27+
<div className={styles['atlas-cta-text']}>
28+
<div>
29+
<strong>New to MongoDB and don't have a cluster?</strong>
30+
</div>
31+
<div>
32+
If you don't already have a cluster you can create one for free
33+
using&nbsp;
34+
<a
35+
target="_blank"
36+
rel="noopener"
37+
href="https://www.mongodb.com/cloud/atlas"
38+
onClick={this.onLinkClicked.bind(
39+
this,
40+
'overviewPage',
41+
'atlasLanding'
42+
)}
43+
>
44+
MongoDB Atlas
45+
</a>
46+
</div>
47+
</div>
48+
<a
49+
className={classnames(styles['atlas-cta-button'])}
50+
target="_blank"
51+
rel="noopener"
52+
href="https://www.mongodb.com/cloud/atlas/register?utm_source=vscode&utm_medium=product&utm_campaign=VS%20code%20extension"
53+
onClick={this.onLinkClicked.bind(
54+
this,
55+
'overviewPage',
56+
'freeClusterCTA'
57+
)}
58+
>
59+
Create free cluster
60+
</a>
61+
</div>
62+
);
63+
}
64+
}
65+
66+
const mapDispatchToProps: DispatchProps = {
67+
onLinkClicked: (screen, linkId): LinkClickedAction => ({
68+
type: ActionTypes.EXTENSION_LINK_CLICKED,
69+
screen,
70+
linkId
71+
})
72+
};
73+
74+
export default connect(() => ({}), mapDispatchToProps)(AtlasCTA);

‎src/views/webview-app/components/atlas-cta/atlas-logo.tsx

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import * as React from 'react';
2+
3+
export default class AtlasLogo extends React.PureComponent {
4+
render(): React.ReactNode {
5+
return (
6+
<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg">
7+
<title>Atlas</title>
8+
<defs>
9+
<linearGradient
10+
x1="28.515977%"
11+
y1="105.584466%"
12+
x2="79.424121%"
13+
y2="-9.67572816%"
14+
id="linearGradient-1"
15+
>
16+
<stop stopColor="#0D6149" offset="0%" />
17+
<stop stopColor="#03AA4F" offset="36.97%" />
18+
<stop stopColor="#00D057" offset="64.96%" />
19+
<stop stopColor="#5FD891" offset="91.18%" />
20+
<stop stopColor="#80DBA5" offset="100%" />
21+
</linearGradient>
22+
<linearGradient
23+
x1="82.3061787%"
24+
y1="109.629126%"
25+
x2="7.44162975%"
26+
y2="-16.1830097%"
27+
id="linearGradient-2"
28+
>
29+
<stop stopColor="#0D6149" offset="0%" />
30+
<stop stopColor="#03AA4F" offset="36.97%" />
31+
<stop stopColor="#00D057" offset="64.96%" />
32+
<stop stopColor="#5FD891" offset="91.18%" />
33+
<stop stopColor="#80DBA5" offset="100%" />
34+
</linearGradient>
35+
<linearGradient
36+
x1="2.43172043%"
37+
y1="82.3204029%"
38+
x2="114.608065%"
39+
y2="-3.16314823%"
40+
id="linearGradient-3"
41+
>
42+
<stop stopColor="#0D6149" offset="0%" />
43+
<stop stopColor="#03AA4F" offset="36.97%" />
44+
<stop stopColor="#00D057" offset="64.96%" />
45+
<stop stopColor="#5FD891" offset="91.18%" />
46+
<stop stopColor="#80DBA5" offset="100%" />
47+
</linearGradient>
48+
<linearGradient
49+
x1="105.040323%"
50+
y1="85.5592964%"
51+
x2="-16.483871%"
52+
y2="-1.59363401%"
53+
id="linearGradient-4"
54+
>
55+
<stop stopColor="#0D6149" offset="0%" />
56+
<stop stopColor="#03AA4F" offset="36.97%" />
57+
<stop stopColor="#00D057" offset="64.96%" />
58+
<stop stopColor="#5FD891" offset="91.18%" />
59+
<stop stopColor="#80DBA5" offset="100%" />
60+
</linearGradient>
61+
</defs>
62+
<g
63+
id="Atlas"
64+
stroke="none"
65+
strokeWidth="1"
66+
fill="none"
67+
fillRule="evenodd"
68+
>
69+
<g id="Color-(1)" fillRule="nonzero">
70+
<path
71+
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"
72+
id="Path"
73+
fill="url(#linearGradient-1)"
74+
/>
75+
<path
76+
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"
77+
id="Path"
78+
fill="#00804B"
79+
/>
80+
<path
81+
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"
82+
id="Path"
83+
fill="url(#linearGradient-2)"
84+
/>
85+
<path
86+
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"
87+
id="Path"
88+
fill="url(#linearGradient-3)"
89+
/>
90+
<path
91+
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"
92+
id="Path"
93+
fill="url(#linearGradient-4)"
94+
/>
95+
<path
96+
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"
97+
id="Path"
98+
fill="#00804B"
99+
/>
100+
</g>
101+
</g>
102+
</svg>
103+
);
104+
}
105+
}

‎src/views/webview-app/components/connect-helper/connect-helper.less

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
}
55

66
.connect-helper-connect-area {
7-
// width: 400px;
87
margin: 0 auto;
98
}
109

‎src/views/webview-app/components/help-panel/help-panel.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
background-color: #ffffff;
2323
background-image: none;
2424
border: 1px solid @green;
25+
text-decoration: none;
2526
box-shadow: none;
2627
color: @green;
2728
padding: 5px 12px 6px;

‎src/views/webview-app/components/overview-page/overview-page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import * as React from 'react';
33
import OverviewHeader from './overview-header';
44
import ConnectHelper from '../connect-helper/connect-helper';
55
import ConnectionStatus from '../connection-status/connection-status';
6-
import HelpPanel from '../help-panel/help-panel';
6+
import AtlasCTA from '../atlas-cta/atlas-cta';
77

88
const styles = require('./overview-page.less');
99

@@ -15,7 +15,7 @@ export class Overview extends React.PureComponent {
1515
<ConnectionStatus />
1616
<ConnectHelper />
1717
<div className={styles['overview-help-panel-container']}>
18-
<HelpPanel />
18+
<AtlasCTA />
1919
</div>
2020
</div>
2121
);

0 commit comments

Comments
 (0)