diff --git a/.eslintrc b/.eslintrc index 3d57f723..497f60f1 100644 --- 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 index 1583f867..acf3d8d7 100644 --- 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 index f2658fe5..51a1a597 100644 --- a/jest.config.js +++ b/jest.config.js @@ -2,7 +2,7 @@ module.exports = { roots: ['/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 new file mode 100644 index 00000000..0d795dbf --- /dev/null +++ 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 new file mode 100644 index 00000000..36da7780 --- /dev/null +++ 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 { + onLinkClicked = (screen: string, linkId: string): void => { + this.props.onLinkClicked(screen, linkId); + }; + + render(): React.ReactNode { + return ( +
+
+ {} +
+
+
+ New to MongoDB and don't have a cluster? +
+
+ If you don't already have a cluster you can create one for free + using  + + MongoDB Atlas + +
+
+ + Create free cluster + +
+ ); + } +} + +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 new file mode 100644 index 00000000..1201037b --- /dev/null +++ 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 ( + + Atlas + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); + } +} diff --git a/src/views/webview-app/components/connect-helper/connect-helper.less b/src/views/webview-app/components/connect-helper/connect-helper.less index 03a5207f..cf8f7305 100644 --- 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 index 06d129f0..05c213c8 100644 --- 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 index 030c9999..2a9383b1 100644 --- 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 {
- +
);