Skip to content

Commit 1b07cfd

Browse files
AnemyAnemy
authored
feat(VSCODE-170): Update connect form routes to overview page connect form (#210)
1 parent 153da00 commit 1b07cfd

File tree

11 files changed

+41
-346
lines changed

11 files changed

+41
-346
lines changed

‎src/mdbExtensionController.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,13 +107,13 @@ export default class MDBExtensionController implements vscode.Disposable {
107107
// Register our extension's commands. These are the event handlers and
108108
// control the functionality of our extension.
109109
this.registerCommand(EXTENSION_COMMANDS.MDB_CONNECT, () =>
110-
this._webviewController.showConnectForm(this._context)
110+
this._webviewController.openWebview(this._context)
111111
);
112112
this.registerCommand(EXTENSION_COMMANDS.MDB_CONNECT_WITH_URI, () =>
113113
this._connectionController.connectWithURI()
114114
);
115115
this.registerCommand(EXTENSION_COMMANDS.MDB_OPEN_OVERVIEW_PAGE, () =>
116-
this._webviewController.showOverviewPage(this._context)
116+
this._webviewController.openWebview(this._context)
117117
);
118118

119119
this.registerCommand(EXTENSION_COMMANDS.MDB_DISCONNECT, () =>
@@ -193,7 +193,7 @@ export default class MDBExtensionController implements vscode.Disposable {
193193

194194
registerTreeViewCommands(): void {
195195
this.registerCommand(EXTENSION_COMMANDS.MDB_ADD_CONNECTION, () =>
196-
this._webviewController.showConnectForm(this._context)
196+
this._webviewController.openWebview(this._context)
197197
);
198198
this.registerCommand(EXTENSION_COMMANDS.MDB_ADD_CONNECTION_WITH_URI, () =>
199199
this._connectionController.connectWithURI()

‎src/test/suite/mdbExtensionController.test.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -116,20 +116,20 @@ suite('MDBExtensionController Test Suite', () => {
116116
.then(done, done);
117117
});
118118

119-
test('mdb.addConnection command should call showConnectForm on the webview controller', (done) => {
120-
const mockShowConnectForm = sinon.fake.resolves();
119+
test('mdb.addConnection command should call openWebview on the webview controller', (done) => {
120+
const mockOpenWebview = sinon.fake.resolves();
121121
sinon.replace(
122122
mdbTestExtension.testExtensionController._webviewController,
123-
'showConnectForm',
124-
mockShowConnectForm
123+
'openWebview',
124+
mockOpenWebview
125125
);
126126

127127
vscode.commands
128128
.executeCommand('mdb.addConnection')
129129
.then(() => {
130130
assert(
131-
mockShowConnectForm.called,
132-
'Expected "mockShowConnectForm" to be called on the webview controller.'
131+
mockOpenWebview.called,
132+
'Expected "mockOpenWebview" to be called on the webview controller.'
133133
);
134134
})
135135
.then(done, done);

‎src/test/suite/views/webview-app/components/app.test.tsx‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,34 +12,18 @@ import {
1212
import App, {
1313
App as NotConnectedApp
1414
} from '../../../../../views/webview-app/components/app';
15-
import ConnectionForm from '../../../../../views/webview-app/components/connect-form/connection-form';
1615
import OverviewPage from '../../../../../views/webview-app/components/overview-page/overview-page';
17-
import { CONNECTION_STATUS, MESSAGE_TYPES, WEBVIEW_VIEWS } from '../../../../../views/webview-app/extension-app-message-constants';
16+
import { CONNECTION_STATUS, MESSAGE_TYPES } from '../../../../../views/webview-app/extension-app-message-constants';
1817

1918
describe('App Component Test Suite', () => {
20-
describe('when passed currentView=CONNECT', () => {
21-
test('it shows a connection form', () => {
19+
describe('when rendered', () => {
20+
test('it shows the overview page', () => {
2221
const wrapper = shallow(<NotConnectedApp
23-
currentView={WEBVIEW_VIEWS.CONNECT}
24-
onConnectedEvent={(): void => { }}
25-
onFilePickerEvent={(): void => { }}
26-
setConnectionStatus={(): void => { }}
27-
/>);
28-
assert(wrapper.find(ConnectionForm).exists());
29-
assert(!wrapper.find(OverviewPage).exists());
30-
});
31-
});
32-
33-
describe('when passed currentView=CONNECT', () => {
34-
test('it shows a connection form', () => {
35-
const wrapper = shallow(<NotConnectedApp
36-
currentView={WEBVIEW_VIEWS.OVERVIEW}
3722
onConnectedEvent={(): void => { }}
3823
onFilePickerEvent={(): void => { }}
3924
setConnectionStatus={(): void => { }}
4025
/>);
4126
assert(wrapper.find(OverviewPage).exists());
42-
assert(!wrapper.find(ConnectionForm).exists());
4327
});
4428
});
4529

‎src/test/suite/views/webview-app/components/connect-helper/connect-helper.test.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,7 @@ describe('Connect Helper Component Test Suite', () => {
2828
);
2929

3030
store = createStore(rootReducer, {
31-
...initialState,
32-
currentView: 'OVERVIEW'
31+
...initialState
3332
} as AppState);
3433

3534
wrapper = mount(

‎src/test/suite/views/webviewController.test.ts‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,17 @@ import WebviewController, {
1010
getWebviewContent
1111
} from '../../../views/webviewController';
1212
import { StatusView } from '../../../views';
13-
import { MESSAGE_TYPES, WEBVIEW_VIEWS } from '../../../views/webview-app/extension-app-message-constants';
13+
import {
14+
MESSAGE_TYPES
15+
} from '../../../views/webview-app/extension-app-message-constants';
1416
import { mdbTestExtension } from '../stubbableMdbExtension';
1517
import { TestExtensionContext } from '../stubs';
1618
import { TEST_DATABASE_URI } from '../dbTestHelper';
1719

1820
const fs = require('fs');
1921
const path = require('path');
2022

21-
suite('Connect Form View Test Suite', () => {
23+
suite('Webview Test Suite', () => {
2224
const disposables: vscode.Disposable[] = [];
2325

2426
afterEach(() => {
@@ -50,7 +52,7 @@ suite('Connect Form View Test Suite', () => {
5052
mdbTestExtension.testExtensionController._telemetryController
5153
);
5254

53-
testWebviewController.showConnectForm(
55+
testWebviewController.openWebview(
5456
mdbTestExtension.testExtensionContext
5557
);
5658

@@ -81,7 +83,7 @@ suite('Connect Form View Test Suite', () => {
8183
};
8284

8385
const extensionPath = mdbTestExtension.testExtensionContext.extensionPath;
84-
const htmlString = getWebviewContent(extensionPath, fakeWebview, WEBVIEW_VIEWS.CONNECT);
86+
const htmlString = getWebviewContent(extensionPath, fakeWebview);
8587

8688
assert(htmlString.includes('dist/webviewApp.js'));
8789

@@ -90,7 +92,7 @@ suite('Connect Form View Test Suite', () => {
9092
path.join(extensionPath, webviewAppFileName())
9193
);
9294

93-
assert(`${jsFileString}`.includes('ConnectionForm'));
95+
assert(`${jsFileString}`.includes('OverviewPage'));
9496
});
9597

9698
test('web view listens for a connect message and adds the connection', (done) => {
@@ -143,7 +145,7 @@ suite('Connect Form View Test Suite', () => {
143145
testTelemetryController
144146
);
145147

146-
testWebviewController.showConnectForm(
148+
testWebviewController.openWebview(
147149
mdbTestExtension.testExtensionContext
148150
);
149151

@@ -216,7 +218,7 @@ suite('Connect Form View Test Suite', () => {
216218
testTelemetryController
217219
);
218220

219-
testWebviewController.showConnectForm(
221+
testWebviewController.openWebview(
220222
mdbTestExtension.testExtensionContext
221223
);
222224

@@ -283,7 +285,7 @@ suite('Connect Form View Test Suite', () => {
283285
testTelemetryController
284286
);
285287

286-
testWebviewController.showConnectForm(
288+
testWebviewController.openWebview(
287289
mdbTestExtension.testExtensionContext
288290
);
289291

@@ -343,7 +345,7 @@ suite('Connect Form View Test Suite', () => {
343345
testTelemetryController
344346
);
345347

346-
testWebviewController.showConnectForm(
348+
testWebviewController.openWebview(
347349
mdbTestExtension.testExtensionContext
348350
);
349351

@@ -416,7 +418,7 @@ suite('Connect Form View Test Suite', () => {
416418
testTelemetryController
417419
);
418420

419-
testWebviewController.showConnectForm(
421+
testWebviewController.openWebview(
420422
mdbTestExtension.testExtensionContext
421423
);
422424

@@ -477,7 +479,7 @@ suite('Connect Form View Test Suite', () => {
477479
testTelemetryController
478480
);
479481

480-
testWebviewController.showConnectForm(
482+
testWebviewController.openWebview(
481483
mdbTestExtension.testExtensionContext
482484
);
483485

@@ -526,7 +528,7 @@ suite('Connect Form View Test Suite', () => {
526528
testTelemetryController
527529
);
528530

529-
testWebviewController.showConnectForm(
531+
testWebviewController.openWebview(
530532
mdbTestExtension.testExtensionContext
531533
);
532534

@@ -586,7 +588,7 @@ suite('Connect Form View Test Suite', () => {
586588
testTelemetryController
587589
);
588590

589-
testWebviewController.showOverviewPage(
591+
testWebviewController.openWebview(
590592
mdbTestExtension.testExtensionContext
591593
);
592594

@@ -639,7 +641,7 @@ suite('Connect Form View Test Suite', () => {
639641
testTelemetryController
640642
);
641643

642-
testWebviewController.showOverviewPage(
644+
testWebviewController.openWebview(
643645
mdbTestExtension.testExtensionContext
644646
);
645647

@@ -697,7 +699,7 @@ suite('Connect Form View Test Suite', () => {
697699
testTelemetryController
698700
);
699701

700-
testWebviewController.showOverviewPage(
702+
testWebviewController.openWebview(
701703
mdbTestExtension.testExtensionContext
702704
);
703705

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

Lines changed: 4 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import * as React from 'react';
22
import { connect } from 'react-redux';
33

4-
import ConnectionForm from './connect-form/connection-form';
5-
import HelpPanel from './help-panel/help-panel';
64
import OverviewPage from './overview-page/overview-page';
75
import {
86
ActionTypes,
@@ -11,20 +9,14 @@ import {
119
FilePickerActionTypes,
1210
SetConnectionStatusAction
1311
} from '../store/actions';
14-
import { AppState } from '../store/store';
1512
import {
1613
CONNECTION_STATUS,
1714
MESSAGE_FROM_EXTENSION_TO_WEBVIEW,
18-
MESSAGE_TYPES,
19-
WEBVIEW_VIEWS
15+
MESSAGE_TYPES
2016
} from '../extension-app-message-constants';
2117

2218
const styles = require('../connect.module.less');
2319

24-
type StateProps = {
25-
currentView: WEBVIEW_VIEWS;
26-
};
27-
2820
type DispatchProps = {
2921
onConnectedEvent: (
3022
successfullyConnected: boolean,
@@ -40,7 +32,7 @@ type DispatchProps = {
4032
) => void;
4133
};
4234

43-
export class App extends React.Component<DispatchProps & StateProps> {
35+
export class App extends React.Component<DispatchProps> {
4436
componentDidMount(): void {
4537
window.addEventListener('message', (event) => {
4638
const message: MESSAGE_FROM_EXTENSION_TO_WEBVIEW = event.data;
@@ -71,30 +63,14 @@ export class App extends React.Component<DispatchProps & StateProps> {
7163
}
7264

7365
render(): React.ReactNode {
74-
const { currentView } = this.props;
75-
7666
return (
7767
<div className={styles.page}>
78-
{currentView === WEBVIEW_VIEWS.CONNECT && (
79-
<div className={styles.connect}>
80-
<ConnectionForm />
81-
<div className={styles['connect-form-help-panel']}>
82-
<HelpPanel />
83-
</div>
84-
</div>
85-
)}
86-
{currentView === WEBVIEW_VIEWS.OVERVIEW && <OverviewPage />}
68+
<OverviewPage />
8769
</div>
8870
);
8971
}
9072
}
9173

92-
const mapStateToProps = (state: AppState): StateProps => {
93-
return {
94-
currentView: state.currentView
95-
};
96-
};
97-
9874
const mapDispatchToProps: DispatchProps = {
9975
onConnectedEvent: (
10076
successfullyConnected: boolean,
@@ -121,4 +97,4 @@ const mapDispatchToProps: DispatchProps = {
12197
})
12298
};
12399

124-
export default connect(mapStateToProps, mapDispatchToProps)(App);
100+
export default connect(null, mapDispatchToProps)(App);

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

Lines changed: 0 additions & 58 deletions
This file was deleted.

0 commit comments

Comments
 (0)