Skip to content

Commit b537662

Browse files
alexey-utkinalexey-utkin
authoredNov 7, 2022
Possible UI/UX improvements of UTBot Wizard #494 (#525)
- checks presence of SFTP and SARIF plugins - configures SFTP by writing `sftp.conf` - runs SFTP sync for local project with server copy Signed-off-by: Alexey Utkin <[email protected]> Signed-off-by: Alexey Utkin <[email protected]>
·
2024.03.02022.10.7
1 parent 1bc27f7 commit b537662

14 files changed

+819
-555
lines changed
 

‎vscode-plugin/media/wizard.html

+101-76
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<script>
5+
const GRPC_TIMEOUT = 500;
6+
const SFTP_TIMEOUT = 500;
7+
const GRPC_PREFIX = "GRPC_";
8+
const SFTP_PREFIX = "SFTP_";
9+
</script>
10+
411
<meta charset="UTF-8">
512
<meta name="viewport" content="width=device-width, initial-scale=1.0">
613

@@ -13,47 +20,45 @@
1320
<div class="utbot-vars"
1421
os="{{os}}"
1522
projectDir="{{projectDir}}"
16-
defaultPort="{{defaultPort}}"
17-
sftpHost="{{sftpHost}}"
18-
sftpDir="{{sftpDir}}"
19-
></div>
20-
<div class="utbot-modal">
21-
<article class="content-wrapper">
22-
<span class="utbot-modal__close-button" onclick="closeModal()"></span>
23-
<header class="utbot-modal__header modal-header">
24-
<h2>❌ Server is unreachable!</h2>
25-
</header>
26-
<div class="utbot-modal__content content">
27-
<p>
28-
UTBot failed to establish connection with specified server.
29-
If you wish to continue anyway, press "Continue" button.
30-
</p>
31-
<p> In any case, you will need to specify correct port and host of UTBot server to use the extension.
32-
You can do it via Visual Studio Code Settings. </p>
33-
</div>
34-
<footer class="utbot-modal__footer modal-footer">
35-
<button
36-
class="utbot-modal__footer_action-button cancel-button"
37-
onclick="closeModal();this.blur();">Cancel
38-
</button>
39-
<button
40-
class="utbot-modal__footer_action-button continue-button"
41-
onclick="closeModalAndGoToNextStep();this.blur();">Continue
42-
</button>
43-
</footer>
44-
</article>
23+
defaultGRPCPort="{{defaultGRPCPort}}"
24+
defaultSFTPPort="{{defaultSFTPPort}}"
25+
serverHost="{{serverHost}}"
26+
serverDir="{{serverDir}}">
4527
</div>
4628

4729
<form id="utbotForm" class="utbot-form" action="">
4830
<h1>UTBot: Quickstart</h1>
4931

50-
<div class="utbot-form__tab">
32+
<div class="utbot-form__tab start-tab">
5133
<h2>👋 Welcome to "UTBot: Quickstart" Wizard! </h2>
5234
<p> UTBot discovered that this is the first time you use it with this project.
53-
The Wizard will help you to configure the extension appropriatly.
35+
The Wizard will help you to configure the extension appropriately.
5436
In case you don't wish to proceed, you can close this wizard at any time. </p>
5537
<p> In order to learn more about UTBot C/C++, please, refer to this
56-
<a href="https://github.com/UnitTestBot/UTBotCpp/wiki">manual</a>. </p>
38+
<a href="https://github.com/UnitTestBot/UTBotCpp/wiki">manual</a>.</p>
39+
<p> To work correctly, UTBot need the external plugins
40+
<table>
41+
<tr style="display: grid; grid-template-columns: auto 1fr">
42+
<td>
43+
<a id="SFTP_ref" href="https://marketplace.visualstudio.com/items?itemName=Natizyskunk.sftp">SFTP </a>
44+
</td>
45+
<td>
46+
<span id="SFTP_installed"> ✔️SFTP plugin is configured</span>
47+
<span id="SFTP_not_installed"> ❌ Please, install or enable the SFTP plugin and restart the wizard!</span>
48+
</td>
49+
</tr>
50+
<tr style="display: grid; grid-template-columns: auto 1fr">
51+
<td>
52+
<a id="SARIF_ref" href="https://marketplace.visualstudio.com/items?itemName=MS-SarifVSCode.sarif-viewer">Sarif Viewer </a>
53+
</td>
54+
<td>
55+
<span id="SARIF_installed"> ✔️SARIF plugin is configured</span>
56+
<span id="SARIF_not_installed"> ❌ Please, install or enable the SARIF plugin and restart the wizard!</span>
57+
</td>
58+
</tr>
59+
</table>
60+
Please, install or activate the plugins before continuing.
61+
</p>
5762
</div>
5863

5964
<div class="utbot-form__tab installer-tab">
@@ -86,18 +91,10 @@ <h2>🖥️ Server Setup</h2>
8691

8792
<span style="display: grid; grid-template-columns: auto auto">
8893
<b>📶 Connection</b>
89-
<span>
90-
<span id="connection_loader">⏳ Connecting...</span>
91-
<span id="connection_success">✔️ Successfully pinged server! </span>
92-
<span id="connection_warning" format="⚠️ Warning! Versions are different: "></span>
93-
<span id="connection_failure">❌ Failed to establish connection! </span>
94-
</span>
9594
</span>
9695
<div>
9796
Fill the parameters below accordingly to the ones specified during the
98-
<a href="https://github.com/UnitTestBot/UTBotCpp/wiki/install-server">UTBot Server installation</a>.
99-
Please make sure that in case of remote host the SFTP plugin
100-
has a consistent <a href="about:SFTP host" onclick="openSFTPSettings('host');">host</a>.
97+
<a href="https://github.com/UnitTestBot/UTBotCpp/wiki/install-server">UTBot Server installation</a>. <br/>
10198
</div>
10299
<div class="utbot-form__tab_item" style="display: grid; grid-template-columns: auto 1fr">
103100
<label class="utbot-form__tab_label"
@@ -106,47 +103,75 @@ <h2>🖥️ Server Setup</h2>
106103
id="hostInput"
107104
value="{{predictedHost}}"
108105
placeholder="Ex. localhost"
109-
oninput="restartCheckingConnection();"
110-
onchange="restartCheckingConnection();">
106+
oninput="restartCheckingConnection(GRPC_PREFIX, GRPC_TIMEOUT);restartCheckingConnection(SFTP_PREFIX, SFTP_TIMEOUT);"
107+
onchange="restartCheckingConnection(GRPC_PREFIX, GRPC_TIMEOUT);restartCheckingConnection(SFTP_PREFIX, SFTP_TIMEOUT);"/>
111108
</div>
112-
<div class="utbot-form__tab_item">
113-
<label class="utbot-form__tab_label"
114-
for="portInput">GRPC port</label>
115-
<input class="utbot-form__tab_input"
116-
style="width: auto; display: inline;"
117-
type="number"
118-
width="5"
119-
min="0" max="65535"
120-
id="portInput"
121-
value="{{predictedPort}}"
122-
placeholder="Ex. 2121"
123-
oninput="restartCheckingConnection();"
124-
onchange="restartCheckingConnection();">
109+
<table>
110+
<tr style="display: grid; grid-template-columns: auto 1fr">
111+
<td>
112+
<label
113+
class="utbot-form__tab_label"
114+
style="width: auto; display: inline;"
115+
for="portGRPCInput">GRPC port</label>
116+
<input class="utbot-form__tab_input"
117+
style="width: auto; display: inline;"
118+
type="number"
119+
width="5"
120+
min="0" max="65535"
121+
id="portGRPCInput"
122+
value="{{predictedGRPCPort}}"
123+
placeholder="Ex. 2121"
124+
oninput="restartCheckingConnection(GRPC_PREFIX, GRPC_TIMEOUT);"
125+
onchange="restartCheckingConnection(GRPC_PREFIX, GRPC_TIMEOUT);"/>
126+
</td>
127+
<td>
128+
<span id="GRPC_connection_loader">⏳ Connecting...</span>
129+
<span id="GRPC_connection_success">✔️ Successfully pinged GRPC server! </span>
130+
<span id="GRPC_connection_warning" format="⚠️ Warning! Versions are different: "></span>
131+
<span id="GRPC_connection_failure">❌ Failed to establish GRPC connection! </span>
132+
</td>
133+
</tr>
134+
<tr style="display: grid; grid-template-columns: auto 1fr">
135+
<td>
136+
<label class="utbot-form__tab_label"
137+
style="width: auto; display: inline;"
138+
for="portSFTPInput">SFTP port</label>
139+
<input class="utbot-form__tab_input"
140+
style="width: auto; display: inline;"
141+
type="number"
142+
width="5"
143+
min="0" max="65535"
144+
id="portSFTPInput"
145+
value="{{predictedSFTPPort}}"
146+
placeholder="Ex. 2020"
147+
oninput="restartCheckingConnection(SFTP_PREFIX, SFTP_TIMEOUT);"
148+
onchange="restartCheckingConnection(SFTP_PREFIX, SFTP_TIMEOUT);"/>
149+
</td>
150+
<td>
151+
<span id="SFTP_connection_loader">⏳ Connecting SFTP...</span>
152+
<span id="SFTP_connection_success">✔️ Successfully pinged SFTP server! </span>
153+
<span id="SFTP_connection_warning">SFTP synchronization is not used.</span>
154+
<span id="SFTP_connection_failure">❌ Failed to establish SFTP connection! </span>
155+
</td>
156+
</tr>
157+
</table>
158+
<div>
159+
<b>ATTENTION!</b> Please leave the <b>SFTP port field empty</b> if you do not want to synchronize
160+
the project file system between client and server. By clicking the <b>"Next"</b> button with
161+
the SFTP port field filled in, you will start the synchronization of the project file system
162+
between the client and the server.
125163
</div>
126164
<br>
127165

128-
<span style="display: grid; grid-template-columns: auto auto">
129-
<span><b>📁 Project Path On Server</b></span>
130-
<span>
131-
<!-- <span class="utbot-form__tab_connection_loader">Checking...</span>-->
132-
<!-- <span class="utbot-form__tab_connection_success">🟢️ The path contains CMakeList.txt</span>-->
133-
<!-- <span class="utbot-form__tab_connection_failure">🟡 The path does not contain CMakeList.txt</span>-->
134-
<!-- <span class="utbot-form__tab_connection_failure">🔴 The path does not exists</span>-->
135-
</span>
136-
</span>
137-
<div>
138-
Project path on server specifies the path to the project on a server host.
139-
<b>On the remote server</b> the path need to be synchronized with the project path on the client (local) by
140-
<a href="https://marketplace.visualstudio.com/items?itemName=Natizyskunk.sftp">SFTP plugin</a>.
141-
Please make sure that the SFTP plugin has a consistent <a href="about:SFTP remote path" onclick="openSFTPSettings('remotePath');">remotePath</a>.
142-
<b>The <code>localhost</code> server</b> don't need the synchronization.
143-
</div>
144166
<div>
145-
<label class="utbot-form__tab_label" for="mappingInput">Project Path On Server</label>
167+
<label class="utbot-form__tab_label" for="serverPath">Project Path On Server</label>
146168
<input class="utbot-form__tab_input"
147-
id="mappingInput"
169+
id="serverPath"
148170
value="{{predictedRemotePath}}"
149171
placeholder="/tmp/XXXX">
172+
Project path on server specifies the path to the project's copy on the server host.
173+
May point to a directory shared by the client and server. In this case, SFTP synchronization
174+
must be disabled by leaving the <b>SFTP port field empty</b>.
150175
</div>
151176
</div>
152177

@@ -186,12 +211,12 @@ <h2>📑️ Project Setup</h2>
186211
<button type="button"
187212
class="button_previous utbot-form__navigation_button"
188213
id="prevBtn"
189-
onclick="prevButtonHandler();this.blur();">Previous
214+
onclick="prevStep();this.blur();">Previous
190215
</button>
191216
<button type="button"
192217
class="button_next utbot-form__navigation_button"
193218
id="nextBtn"
194-
onclick="nextButtonHandler();this.blur();">Next
219+
onclick="nextStep();this.blur();">Next
195220
</button>
196221
</div>
197222

0 commit comments

Comments
 (0)
Please sign in to comment.