-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathhelp.html
More file actions
295 lines (287 loc) · 21.4 KB
/
Copy pathhelp.html
File metadata and controls
295 lines (287 loc) · 21.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlowRunner Help</title>
<link rel="stylesheet" href="help-styles.css">
</head>
<body>
<div class="container">
<header>
<h1>FlowRunner Help</h1>
</header>
<main>
<section id="introduction">
<h2>Introduction</h2>
<p>
Welcome to FlowRunner! This application allows you to visually create, manage, run, and debug sequences of API calls (known as "Flows"). It's designed for tasks like demonstrating API interactions, testing multi-step processes, and understanding data flows.
</p>
<p>
Flows are saved locally as <code>.flow.json</code> files. You can work entirely offline for authoring and visualization; network access is only needed when executing API Request steps that target external endpoints.
</p>
</section>
<section id="getting-started">
<h2>Getting Started</h2>
<p>Here's a quick way to run your first flow:</p>
<ol>
<li>Click <strong>"+ New Flow"</strong> in the Flows drawer on the left.</li>
<li>Press <strong>Tab</strong> (or click <strong>"+ Add Step"</strong>) and choose <strong>"API Request"</strong>.</li>
<li>In the request bar, set the <strong>URL</strong> to <code>https://httpbin.org/get</code> (leave the method on GET), then click <strong>"Save Step"</strong>.</li>
<li>Click the green <strong>"▶ Run"</strong> in the top bar (or press <strong>F5</strong>).</li>
<li>Watch the step highlight, then open the <strong>Results</strong> tab on the right for the response from httpbin.</li>
<li>Save the flow with <strong>Ctrl/Cmd+S</strong>. It becomes a portable <code>.flow.json</code> file.</li>
</ol>
</section>
<section id="interface">
<h2>Interface Overview</h2>
<p>FlowRunner is one window with a few fixed zones.</p>
<div class="subsection">
<h3>The rail (far left)</h3>
<ul>
<li>Toggle the <strong>Flows drawer</strong>, open the <strong>command palette</strong> (Ctrl/Cmd+K), jump to the <strong>Runs</strong> page, switch <strong>theme</strong>, and enter <strong>Present</strong> mode. A badge on the Runs button counts live background runs.</li>
</ul>
</div>
<div class="subsection">
<h3>The top bar</h3>
<ul>
<li><strong>Flow name</strong> and an <strong>UNSAVED</strong> marker; <strong>Save</strong> (brand-blue when you have changes), plus copy, undo/redo, and export controls.</li>
<li><strong>List / Visual</strong> switch for the workspace, and an ambient engine-status dot.</li>
<li><strong>Run cluster</strong> (right): <strong>Step</strong>, <strong>Stop</strong>, <strong>Background</strong>, and the single accent <strong>Run</strong>. The run verdict (Passed / Failed / Running) reads here at projector scale.</li>
</ul>
</div>
<div class="subsection">
<h3>The Flows drawer (left)</h3>
<ul>
<li>Your flow library: <strong>Recent</strong> files plus <strong>folders and subfolders</strong> you arrange yourself (drag a flow onto a folder). New Flow, Open, Import cURL, and Import HAR live here.</li>
<li><strong>Select mode</strong> (the checkbox toggle) reveals checkboxes so you can pick several flows at once and run them in the background together. Shift-click for a range; right-click a flow for its menu.</li>
</ul>
</div>
<div class="subsection">
<h3>The workspace (center)</h3>
<ul>
<li>The flow itself as either the <strong>List</strong> editor (dense, configuration-first, drag the ☰ handle to reorder) or the <strong>Visual</strong> node graph (structure at a glance; drag nodes, zoom, minimap, Tidy Up).</li>
</ul>
</div>
<div class="subsection">
<h3>The inspector (right)</h3>
<ul>
<li><strong>Results:</strong> the run feed, one scannable line per request (name, method, HTTP code, duration, verdict), expandable to full output, extracted values, and warnings. Search, filter, copy, or export to JSON/CSV. Run controls (Continuous, Delay, Clear) live at the top.</li>
<li><strong>Variables:</strong> everything defined and extracted, with where each came from.</li>
<li><strong>Config:</strong> flow name, description, global headers, and static variables.</li>
<li>Use the <strong>expand</strong> control in the inspector header to widen it into a roomy work surface for Variables and Config.</li>
</ul>
</div>
<div class="subsection">
<h3>The Runs page</h3>
<ul>
<li>Open <strong>Runs</strong> from the rail for the full background-run board: each run's verdict, iteration and pass/fail tallies, a streaming feed, and Stop / Remove. Click <strong>New background run</strong> to launch one or many flows from a searchable picker.</li>
</ul>
</div>
</section>
<section id="core-concepts">
<h2>Core Concepts</h2>
<div class="subsection">
<h3>Flows</h3>
<p>A Flow is a sequence of steps saved as a single <code>.flow.json</code> file. You can configure overall flow settings in the <strong>Config</strong> tab of the inspector (right):</p>
<ul>
<li><strong>Name & Description:</strong> Basic identification.</li>
<li><strong>Global Headers:</strong> Headers automatically added to all API Request steps (can be overridden by step-specific headers).</li>
<li><strong>Flow Variables (Static):</strong> Key-value pairs defined once and available throughout the flow execution context. Each variable can be typed as String, Number, Boolean, or JSON. Values may be JSON arrays or objects for loops or complex data.</li>
</ul>
</div>
<div class="subsection">
<h3>Steps</h3>
<p>Flows are built from individual steps. Configure steps by selecting them in the List/Editor view and using the editor panel on the right.</p>
<ul>
<li><strong>API Request:</strong> Makes an HTTP call. Configure Method, URL, Headers, Body (JSON), Extraction rules, and On Failure behavior (Stop/Continue). Use Copy cURL to generate a command with resolved variables when available.</li>
<li><strong>Transform:</strong> Performs ordered operations to compute or modify variables (base64, JWT, math, JSON updates) without custom scripting.</li>
<li><strong>Condition (If/Else):</strong> Executes different branches (Then/Else) based on evaluating a variable against a value using an operator. Add steps to branches via the '+ Add Step' buttons inside the condition step in the List view.</li>
<li><strong>Loop (For Each):</strong> Repeats a sequence of steps (the Loop Body) for each item in a source array variable. Defines an 'Item Variable' (e.g., <code>item</code>) accessible within the loop body. Add steps to the body via the '+ Add Step' button inside the loop step in the List view.</li>
</ul>
<p><em>Example:</em> Define a JSON variable <code>userList</code> in the Flow Info overlay:</p>
<pre><code>[
{ "name": "Alice", "active": true },
{ "name": "Bob", "active": false }
]</code></pre>
<p>Create a Loop step with source <code>{{userList}}</code> and item variable <code>user</code>. Within the loop body reference <code>{{user.name}}</code> or add a Condition step checking <code>user.active</code>.</p>
</div>
<div class="subsection">
<h3>Variables</h3>
<ul>
<li><strong>Definition:</strong> Variables hold data during flow execution. They can be:
<ul>
<li><strong>Static:</strong> Defined in the Config tab.</li>
<li><strong>Extracted:</strong> Created/updated by 'Extract' rules in API Request steps from the response (status, headers, body path).</li>
<li><strong>Loop Item:</strong> Automatically created within a Loop step to hold the current item.</li>
<li><strong>Runtime:</strong> (Not directly definable by user) Variables modified during execution, including Transform outputs.</li>
</ul>
</li>
<li><strong>Substitution:</strong> Use <code>{{variableName}}</code> syntax to insert variable values into URLs, Header values, Request bodies, Condition values, and Loop sources. The runner replaces this at execution time.</li>
<li><strong>Special Variables:</strong> <code>{{RANDOM_IP}}</code> generates a random public IP once per flow run. <code>{{RANDOM_INT(1,1000)}}</code> generates a random integer. <code>{{RANDOM_STRING(16)}}</code> generates a random alphanumeric string.</li>
<li><strong>Insertion Helper (<code>{{…}}</code>):</strong> Click this button next to input fields to get a searchable list of currently defined variables and insert them easily.</li>
<li><strong>Variables tab:</strong> Open the <strong>Variables</strong> tab in the inspector to see every variable the flow's structure defines (Static, Extract, Loop) and where each originates. This shows what is defined, not live runtime values.</li>
<li><strong>Full Body Extraction:</strong> Use <code>body</code> as the JSON Path in an API Request step's Extract tab to store the entire response body for that step.</li>
</ul>
</div>
<div class="subsection">
<h3>Views</h3>
<ul>
<li><strong>List/Editor View:</strong> Default view showing steps hierarchically. Best for detailed configuration using the step editor panel. Supports step reordering via drag-and-drop using the ☰ handle and step search for quick jumps.</li>
<li><strong>Node-Graph View:</strong> Visual representation of the flow structure with connecting lines. Useful for understanding branching and looping. Pan by dragging the background. Drag nodes to rearrange the visual layout (positions are saved with the flow). Select nodes by clicking them. Use zoom controls and the minimap to navigate large graphs, or Tidy Up to auto-arrange.</li>
</ul>
</div>
<div class="subsection">
<h3>Background Runs</h3>
<p>A background run executes a <em>snapshot</em> of a flow independently, so it keeps going while you keep authoring, and later edits never disturb a run already in progress. Launch one from wherever you are:</p>
<ul>
<li><strong>The flow you're editing:</strong> the <strong>Background</strong> button in the top run cluster. A quick popover confirms Continuous and Delay, then it runs from your current (even unsaved) state.</li>
<li><strong>Several at once:</strong> turn on <strong>Select mode</strong> in the Flows drawer, tick the flows, and run the set together.</li>
<li><strong>From a large library:</strong> open <strong>Runs</strong> on the rail and click <strong>New background run</strong> for a searchable picker that scales to thousands of flows (point it at a folder to search them all).</li>
</ul>
<p>Live runs appear as chips in the top bar and a badge on the rail; the <strong>Runs</strong> page shows the full board (verdicts, tallies, streaming feeds, Stop / Remove).</p>
</div>
<div class="subsection">
<h3>Present mode</h3>
<p>Press the presentation icon on the rail (or <strong>Ctrl/Cmd+Shift+D</strong>) for a full-screen, projector-tuned view: bigger type, bolder run state, and less chrome, for showing a live flow to a room.</p>
</div>
</section>
<section id="shortcuts">
<h2>Keyboard Shortcuts</h2>
<p>Note: Most shortcuts are disabled when focused inside an input field, textarea, or editable content, except for <code>Esc</code> to stop execution.</p>
<table>
<thead>
<tr>
<th>Action</th>
<th>Windows / Linux</th>
<th>macOS</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Save Flow</td>
<td><code>Ctrl</code> + <code>S</code></td>
<td><code>Cmd</code> + <code>S</code></td>
<td>Saves the current flow if changes exist and a file path is set.</td>
</tr>
<tr>
<td>Open Flow</td>
<td><code>Ctrl</code> + <code>O</code></td>
<td><code>Cmd</code> + <code>O</code></td>
<td>Opens the file dialog to load a flow.</td>
</tr>
<tr>
<td>Run Flow</td>
<td><code>F5</code></td>
<td><code>F5</code></td>
<td>Starts running the entire flow from the beginning.</td>
</tr>
<tr>
<td>Step Flow</td>
<td><code>F10</code></td>
<td><code>F10</code></td>
<td>Executes the next single step in the flow.</td>
</tr>
<tr>
<td>Stop Flow Execution</td>
<td><code>Esc</code></td>
<td><code>Esc</code></td>
<td>Stops any currently running or stepping execution. Works even if focus is in an input field.</td>
</tr>
<tr>
<td>Config tab</td>
<td><code>Ctrl</code> + <code>1</code></td>
<td><code>Cmd</code> + <code>1</code></td>
<td>Opens the Config tab (flow name, description, headers, static variables).</td>
</tr>
<tr>
<td>Variables tab</td>
<td><code>Ctrl</code> + <code>2</code></td>
<td><code>Cmd</code> + <code>2</code></td>
<td>Opens the Variables tab (everything the flow defines).</td>
</tr>
<tr>
<td>Switch List / Visual</td>
<td><code>Ctrl</code> + <code>3</code></td>
<td><code>Cmd</code> + <code>3</code></td>
<td>Switches between the List editor and the Visual node graph.</td>
</tr>
<tr>
<td>Command palette</td>
<td><code>Ctrl</code> + <code>K</code></td>
<td><code>Cmd</code> + <code>K</code></td>
<td>Search commands and recent flows, including "Run flows in background".</td>
</tr>
<tr>
<td>Add a step</td>
<td><code>Tab</code></td>
<td><code>Tab</code></td>
<td>Opens the step-type picker (when focus is not in a text field).</td>
</tr>
<tr>
<td>Undo / Redo</td>
<td><code>Ctrl</code> + <code>Z</code> / <code>Ctrl</code> + <code>Shift</code> + <code>Z</code></td>
<td><code>Cmd</code> + <code>Z</code> / <code>Cmd</code> + <code>Shift</code> + <code>Z</code></td>
<td>Steps backward and forward through flow edits.</td>
</tr>
<tr>
<td>Present mode</td>
<td><code>Ctrl</code> + <code>Shift</code> + <code>D</code></td>
<td><code>Cmd</code> + <code>Shift</code> + <code>D</code></td>
<td>Enters/exits the full-screen projector view.</td>
</tr>
<tr>
<td>Open Help</td>
<td><code>F1</code></td>
<td><code>F1</code></td>
<td>Opens this help window.</td>
</tr>
<tr>
<td>Zoom In / Out / Reset</td>
<td><code>Ctrl</code> + <code>+</code> / <code>-</code> / <code>0</code></td>
<td><code>Cmd</code> + <code>+</code> / <code>-</code> / <code>0</code></td>
<td>Adjusts the workspace zoom level.</td>
</tr>
<tr>
<td>Toggle Minimap (Graph)</td>
<td><code>M</code></td>
<td><code>M</code></td>
<td>Shows or hides the Node-Graph minimap.</td>
</tr>
</tbody>
</table>
</section>
<section id="troubleshooting">
<h2>Troubleshooting</h2>
<ul>
<li><strong>Windows Installer Warning:</strong> Windows SmartScreen may warn about the unsigned app. Click "More info" then "Run anyway".</li>
<li><strong>macOS "Damaged" Error:</strong> If macOS prevents opening, run this in Terminal: <code>xattr -c /Applications/FlowRunner.app</code> (adjust path if needed), then try opening again (possibly right-click > Open).</li>
<li><strong>Save/Load Issues:</strong> Check file permissions. Ensure the <code>.flow.json</code> isn't corrupted. Look for error messages in the UI.</li>
<li><strong>Request Step Fails:</strong> Verify URL, Method, Headers, Body (use Format button for JSON). Check the Runner Results panel for status codes or network errors. Check the step's 'On Failure' setting.</li>
<li><strong>Variable Issues:</strong> Check spelling in <code>{{varName}}</code>. Ensure variable is defined *before* use (Static, previous Extract/Loop). Use the Variables Panel and the <code>{{…}}</code> helper. Check Extraction warnings in the Results panel.</li>
<li><strong>Condition/Loop Issues:</strong> Verify logic and source variables in the step editor. Check variable values from previous steps in the Results panel.</li>
<li><strong>General/UI Issues:</strong> Restart FlowRunner. Use the <strong>Developer Tools</strong> (View > Toggle Developer Tools) and check the 'Console' tab for errors.</li>
</ul>
</section>
<section id="more-info">
<h2>More Information</h2>
<p>
This help page covers the basics. For comprehensive details on all features, development information, and advanced usage, please consult the full
<a href="https://github.com/Radware/FlowRunner" target="_blank" rel="noopener noreferrer">README.md file</a>
on the FlowRunner GitHub repository.
</p>
<ul>
<li>You can manually check for new releases via <strong>Help > Check for Updates…</strong> (implemented in <code><a href="https://github.com/Radware/FlowRunner/blob/main/main.js#L274" target="_blank" rel="noopener noreferrer">main.js</a></code>).</li>
</ul>
<p>
Application Version: 1.4.1 <!-- Update this manually or find a way to inject it -->
</p>
</section>
</main>
<footer>
<p>© 2024 Radware ASE Team</p>
</footer>
</div>
</body>
</html>