windmill-components 1.13.27 → 1.22.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (140) hide show
  1. package/components/AppConnect.svelte +281 -0
  2. package/components/AppConnect.svelte.d.ts +22 -0
  3. package/components/ArgInput.svelte +32 -24
  4. package/components/ArgInput.svelte.d.ts +6 -1
  5. package/components/Button.svelte +16 -7
  6. package/components/CenteredModal.svelte +30 -0
  7. package/components/CenteredModal.svelte.d.ts +19 -0
  8. package/components/DisplayResult.svelte +52 -46
  9. package/components/Editor.svelte +69 -64
  10. package/components/Editor.svelte.d.ts +3 -1
  11. package/components/EditorBar.svelte +204 -0
  12. package/components/EditorBar.svelte.d.ts +23 -0
  13. package/components/FlowBuilder.svelte +57 -110
  14. package/components/FlowBuilder.svelte.d.ts +0 -2
  15. package/components/FlowEditor.svelte +183 -65
  16. package/components/FlowEditor.svelte.d.ts +4 -4
  17. package/components/FlowJobResult.svelte +23 -0
  18. package/components/FlowJobResult.svelte.d.ts +17 -0
  19. package/components/FlowPreview.svelte +17 -28
  20. package/components/FlowPreview.svelte.d.ts +7 -1
  21. package/components/FlowStatusViewer.svelte +55 -25
  22. package/components/FlowStatusViewer.svelte.d.ts +1 -1
  23. package/components/FlowViewer.svelte +136 -0
  24. package/components/FlowViewer.svelte.d.ts +24 -0
  25. package/components/IconedResourceType.svelte +6 -4
  26. package/components/JobStatus.svelte +1 -1
  27. package/components/Modal.svelte +5 -3
  28. package/components/ModuleStep.svelte +129 -56
  29. package/components/ModuleStep.svelte.d.ts +4 -8
  30. package/components/ObjectResourceInput.svelte +0 -1
  31. package/components/Path.svelte +55 -9
  32. package/components/Path.svelte.d.ts +2 -0
  33. package/components/RadioButton.svelte +1 -1
  34. package/components/RadioButtonV2.svelte +33 -0
  35. package/components/RadioButtonV2.svelte.d.ts +20 -0
  36. package/components/ResourceEditor.svelte +19 -15
  37. package/components/ResourcePicker.svelte +2 -2
  38. package/components/ResourcePicker.svelte.d.ts +2 -2
  39. package/components/RunForm.svelte +2 -3
  40. package/components/SchemaForm.svelte +119 -121
  41. package/components/SchemaForm.svelte.d.ts +6 -4
  42. package/components/SchemaModal.svelte +1 -1
  43. package/components/SchemaModal.svelte.d.ts +1 -1
  44. package/components/SchemaViewer.svelte +1 -1
  45. package/components/ScriptBuilder.svelte +43 -62
  46. package/components/ScriptEditor.svelte +12 -189
  47. package/components/ScriptPicker.svelte +7 -18
  48. package/components/ScriptPicker.svelte.d.ts +1 -0
  49. package/components/Switch.svelte.d.ts +2 -2
  50. package/components/Toggle.svelte +34 -0
  51. package/components/Toggle.svelte.d.ts +28 -0
  52. package/components/Tooltip.svelte +53 -80
  53. package/components/Tooltip.svelte.d.ts +1 -5
  54. package/components/VariableEditor.svelte +11 -2
  55. package/components/flows/CopyFirstStepSchema.svelte +10 -0
  56. package/components/flows/CopyFirstStepSchema.svelte.d.ts +14 -0
  57. package/components/flows/DynamicInputHelpBox.svelte +72 -0
  58. package/components/flows/DynamicInputHelpBox.svelte.d.ts +14 -0
  59. package/components/flows/FlowInputs.svelte +27 -0
  60. package/components/flows/FlowInputs.svelte.d.ts +19 -0
  61. package/components/flows/FlowModuleHeader.svelte +92 -0
  62. package/components/flows/FlowModuleHeader.svelte.d.ts +22 -0
  63. package/components/flows/flowStore.d.ts +17 -0
  64. package/components/flows/flowStore.js +161 -0
  65. package/components/flows/pickers/FlowScriptPicker.svelte +11 -0
  66. package/components/flows/pickers/FlowScriptPicker.svelte.d.ts +22 -0
  67. package/components/flows/pickers/PickHubScript.svelte +30 -0
  68. package/components/flows/pickers/PickHubScript.svelte.d.ts +18 -0
  69. package/components/flows/pickers/PickScript.svelte +38 -0
  70. package/components/flows/pickers/PickScript.svelte.d.ts +18 -0
  71. package/components/flows/utils.d.ts +17 -0
  72. package/components/flows/utils.js +143 -0
  73. package/components/propertyPicker/ObjectViewer.svelte +113 -0
  74. package/components/propertyPicker/ObjectViewer.svelte.d.ts +21 -0
  75. package/components/propertyPicker/OverlayPropertyPicker.svelte +69 -0
  76. package/components/propertyPicker/OverlayPropertyPicker.svelte.d.ts +21 -0
  77. package/components/propertyPicker/PropPicker.svelte +24 -0
  78. package/components/propertyPicker/PropPicker.svelte.d.ts +18 -0
  79. package/components/propertyPicker/WarningMessage.svelte +43 -0
  80. package/components/propertyPicker/WarningMessage.svelte.d.ts +16 -0
  81. package/components/propertyPicker/utils.d.ts +2 -0
  82. package/components/propertyPicker/utils.js +40 -0
  83. package/gen/core/ApiError.d.ts +3 -1
  84. package/gen/core/ApiError.js +3 -1
  85. package/gen/core/OpenAPI.js +1 -1
  86. package/gen/core/request.js +2 -2
  87. package/gen/index.d.ts +4 -0
  88. package/gen/index.js +1 -0
  89. package/gen/models/CompletedJob.d.ts +3 -1
  90. package/gen/models/CompletedJob.js +1 -0
  91. package/gen/models/CreateResource.d.ts +1 -0
  92. package/gen/models/CreateVariable.d.ts +2 -0
  93. package/gen/models/FlowModule.d.ts +2 -0
  94. package/gen/models/FlowModuleValue.d.ts +14 -2
  95. package/gen/models/FlowModuleValue.js +7 -0
  96. package/gen/models/FlowStatusModule.d.ts +6 -0
  97. package/gen/models/ListableVariable.d.ts +2 -0
  98. package/gen/models/OpenFlow.d.ts +7 -0
  99. package/gen/models/OpenFlow.js +4 -0
  100. package/gen/models/QueuedJob.d.ts +2 -1
  101. package/gen/models/QueuedJob.js +1 -0
  102. package/gen/models/Resource.d.ts +1 -0
  103. package/gen/models/Script.d.ts +1 -0
  104. package/gen/models/SlackToken.d.ts +8 -0
  105. package/gen/models/SlackToken.js +4 -0
  106. package/gen/models/TokenResponse.d.ts +6 -0
  107. package/gen/models/TokenResponse.js +4 -0
  108. package/gen/services/AdminService.d.ts +6 -2
  109. package/gen/services/AuditService.d.ts +24 -8
  110. package/gen/services/FlowService.d.ts +50 -10
  111. package/gen/services/FlowService.js +26 -0
  112. package/gen/services/GranularAclService.d.ts +6 -2
  113. package/gen/services/GroupService.d.ts +18 -6
  114. package/gen/services/JobService.d.ts +167 -46
  115. package/gen/services/JobService.js +26 -2
  116. package/gen/services/OauthService.d.ts +104 -0
  117. package/gen/services/OauthService.js +133 -0
  118. package/gen/services/ResourceService.d.ts +39 -7
  119. package/gen/services/ResourceService.js +30 -0
  120. package/gen/services/ScheduleService.d.ts +36 -6
  121. package/gen/services/ScheduleService.js +30 -0
  122. package/gen/services/ScriptService.d.ts +77 -19
  123. package/gen/services/ScriptService.js +31 -1
  124. package/gen/services/UserService.d.ts +49 -11
  125. package/gen/services/UserService.js +17 -0
  126. package/gen/services/VariableService.d.ts +19 -4
  127. package/gen/services/VariableService.js +15 -0
  128. package/gen/services/WorkerService.d.ts +6 -2
  129. package/gen/services/WorkspaceService.d.ts +29 -24
  130. package/gen/services/WorkspaceService.js +8 -23
  131. package/logout.js +10 -3
  132. package/package.json +52 -23
  133. package/script_helpers.d.ts +4 -0
  134. package/script_helpers.js +70 -0
  135. package/scripts.d.ts +2 -1
  136. package/scripts.js +5 -5
  137. package/stores.d.ts +7 -0
  138. package/stores.js +12 -0
  139. package/utils.d.ts +28 -1
  140. package/utils.js +206 -0
@@ -1,14 +1,19 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
- import { type Flow } from '../gen';
3
2
  import type { Schema } from '../common';
3
+ import { type Flow } from '../gen';
4
+ import type { FlowMode } from './flows/flowStore';
4
5
  declare const __propDef: {
5
6
  props: {
6
7
  i: number;
7
8
  flow: Flow;
8
9
  schemas?: Schema[] | undefined;
10
+ mode: FlowMode;
9
11
  args?: Record<string, any> | undefined;
12
+ runPreview?: ((args: any) => Promise<void>) | undefined;
10
13
  };
11
14
  events: {
15
+ change: CustomEvent<any>;
16
+ } & {
12
17
  [evt: string]: CustomEvent<any>;
13
18
  };
14
19
  slots: {};
@@ -17,5 +22,6 @@ export declare type FlowPreviewProps = typeof __propDef.props;
17
22
  export declare type FlowPreviewEvents = typeof __propDef.events;
18
23
  export declare type FlowPreviewSlots = typeof __propDef.slots;
19
24
  export default class FlowPreview extends SvelteComponentTyped<FlowPreviewProps, FlowPreviewEvents, FlowPreviewSlots> {
25
+ get runPreview(): (args: any) => Promise<void>;
20
26
  }
21
27
  export {};
@@ -1,23 +1,38 @@
1
1
  <script>import { faHourglassHalf, faSpinner, faTimes } from '@fortawesome/free-solid-svg-icons';
2
- import { truncateRev } from '../utils';
2
+ import { scriptPathToHref, truncateRev } from '../utils';
3
3
  import Icon from 'svelte-awesome';
4
4
  import { check } from 'svelte-awesome/icons';
5
5
  import { CompletedJob, FlowModuleValue, FlowStatusModule, JobService, QueuedJob } from '../gen';
6
6
  import { workspaceStore } from '../stores';
7
- import DisplayResult from './DisplayResult.svelte';
8
- import ChevronButton from './ChevronButton.svelte';
9
7
  import JobStatus from './JobStatus.svelte';
8
+ import FlowJobResult from './FlowJobResult.svelte';
10
9
  export let job;
11
- export let jobs;
10
+ export let jobs = [];
11
+ let forloop_selected = '';
12
12
  function loadResults() {
13
13
  job?.flow_status?.modules?.forEach(async (x, i) => {
14
14
  if ((i >= jobs.length && x.type == FlowStatusModule.type.SUCCESS) ||
15
15
  x.type == FlowStatusModule.type.FAILURE) {
16
- jobs.push(undefined);
17
- jobs[i] = await JobService.getCompletedJob({ workspace: $workspaceStore, id: x.job });
16
+ if (x.forloop_jobs) {
17
+ const forloop_jobs = [];
18
+ for (let j of x.forloop_jobs) {
19
+ forloop_jobs.push(await JobService.getCompletedJob({ workspace: $workspaceStore, id: j }));
20
+ }
21
+ jobs.push(forloop_jobs);
22
+ }
23
+ else {
24
+ jobs.push(await JobService.getCompletedJob({ workspace: $workspaceStore, id: x.job }));
25
+ }
26
+ jobs = jobs;
18
27
  }
19
28
  });
20
29
  }
30
+ function toCompletedJob(x) {
31
+ return x;
32
+ }
33
+ function toCompletedJobs(x) {
34
+ return x;
35
+ }
21
36
  $: $workspaceStore && job && loadResults();
22
37
  </script>
23
38
 
@@ -43,7 +58,7 @@ $: $workspaceStore && job && loadResults();
43
58
  out of <span class="font-medium text-gray-900">{job?.raw_flow?.modules.length}</span>
44
59
  <span class="mt-4" />
45
60
  </p>
46
- <ul role="list" class="-mb-8 w-full">
61
+ <ul class="-mb-8 w-full">
47
62
  {#each job?.raw_flow?.modules ?? [] as mod, i}
48
63
  <li class="w-full">
49
64
  <div class="relative pb-8 w-full">
@@ -96,7 +111,8 @@ $: $workspaceStore && job && loadResults();
96
111
  <p class="text-sm text-gray-500">
97
112
  {#if mod.value.type == FlowModuleValue.type.SCRIPT}
98
113
  Script at path <a
99
- href="/scripts/get/{mod.value.path}"
114
+ target="_blank"
115
+ href={scriptPathToHref(mod.value.path ?? '')}
100
116
  class="font-medium text-gray-900">{mod.value.path}</a
101
117
  >
102
118
  {/if}
@@ -104,7 +120,15 @@ $: $workspaceStore && job && loadResults();
104
120
  </div>
105
121
  <div class="text-right text-sm whitespace-nowrap text-gray-500">
106
122
  {job.flow_status?.modules[i].type}
107
- {#if job.flow_status?.modules[i].job}
123
+ {#if job.flow_status?.modules[i].forloop_jobs}
124
+ {#each job.flow_status?.modules[i].forloop_jobs ?? [] as job}
125
+ <div class="flex flex-col">
126
+ <a href="/run/{job}" class="font-medium text-blue-600"
127
+ >{truncateRev(job ?? '', 10)}</a
128
+ >
129
+ </div>
130
+ {/each}
131
+ {:else if job.flow_status?.modules[i].job}
108
132
  <a href="/run/{job.flow_status?.modules[i].job}" class="font-medium text-blue-600"
109
133
  >{truncateRev(job.flow_status?.modules[i].job ?? '', 10)}</a
110
134
  >
@@ -112,23 +136,29 @@ $: $workspaceStore && job && loadResults();
112
136
  </div>
113
137
  </div>
114
138
  </div>
115
- {#if i < jobs.length && jobs[i] != undefined}
116
- <div class="flex flex-col ml-10">
117
- <div>
118
- <ChevronButton text="result" viewOptions={true}>
119
- <div class="text-xs">
120
- <DisplayResult result={jobs[i]?.result} />
121
- </div>
122
- </ChevronButton>
123
- </div>
124
- <div>
125
- <ChevronButton text="logs">
126
- <div class="text-xs p-4 bg-gray-50 overflow-auto max-h-lg">
127
- <pre class="w-full">{jobs[i]?.logs}</pre>
128
- </div>
129
- </ChevronButton>
139
+ {#if jobs[i]}
140
+ {#if Array.isArray(jobs[i])}
141
+ <div class="flex flex-col space-y-2">
142
+ {#each toCompletedJobs(jobs[i]) as job, i}
143
+ <button
144
+ class="underline text-blue-600 hover:text-blue-700"
145
+ on:click={() => {
146
+ if (forloop_selected == job.id) {
147
+ forloop_selected = ''
148
+ } else {
149
+ forloop_selected = job.id
150
+ }
151
+ }}
152
+ >Iteration: #{i}: {job.id} {forloop_selected == job.id ? '(-)' : '(+)'}</button
153
+ >
154
+ {#if forloop_selected == job.id}
155
+ <svelte:self {job} />
156
+ {/if}
157
+ {/each}
130
158
  </div>
131
- </div>
159
+ {:else}
160
+ <FlowJobResult job={toCompletedJob(jobs[i])} />
161
+ {/if}
132
162
  {/if}
133
163
  </div>
134
164
  </li>
@@ -3,7 +3,7 @@ import { CompletedJob, QueuedJob } from '../gen';
3
3
  declare const __propDef: {
4
4
  props: {
5
5
  job: QueuedJob | CompletedJob;
6
- jobs: (CompletedJob | undefined)[];
6
+ jobs?: (CompletedJob | CompletedJob[] | undefined)[] | undefined;
7
7
  };
8
8
  events: {
9
9
  [evt: string]: CustomEvent<any>;
@@ -0,0 +1,136 @@
1
+ <script>import { scriptPathToHref } from '../utils';
2
+ import Highlight from 'svelte-highlight';
3
+ import json from 'svelte-highlight/languages/json';
4
+ import python from 'svelte-highlight/languages/python';
5
+ import typescript from 'svelte-highlight/languages/typescript';
6
+ import { FlowModuleValue } from '../gen';
7
+ import github from 'svelte-highlight/styles/github';
8
+ import { slide } from 'svelte/transition';
9
+ import Tabs from './Tabs.svelte';
10
+ import SchemaViewer from './SchemaViewer.svelte';
11
+ import FieldHeader from './FieldHeader.svelte';
12
+ export let flow;
13
+ let flowFiltered = {
14
+ summary: flow.summary,
15
+ description: flow.description,
16
+ value: flow.value,
17
+ schema: flow.schema
18
+ };
19
+ export let embedded = false;
20
+ export let tab = 'ui';
21
+ let open = {};
22
+ </script>
23
+
24
+ <svelte:head>
25
+ {@html github}
26
+ </svelte:head>
27
+
28
+ {#if !embedded}
29
+ <Tabs
30
+ tabs={[
31
+ ['ui', 'Flow rendered'],
32
+ ['json', 'JSON'],
33
+ ['schema', 'Input schema of the flow']
34
+ ]}
35
+ bind:tab
36
+ />
37
+ {/if}
38
+ {#if tab == 'ui'}
39
+ <div class="flow-root w-full p-4">
40
+ <p class="font-black text-lg w-full ml-2">
41
+ <span>Inputs</span>
42
+ </p>
43
+ {#if flow.schema && flow.schema.properties && Object.keys(flow.schema.properties).length > 0 && flow.schema}
44
+ <ul class="my-4 ml-6">
45
+ {#each Object.entries(flow.schema.properties) as [inp, v]}
46
+ <li class="list-disc flex flex-row">
47
+ <FieldHeader
48
+ label={inp}
49
+ required={flow.schema.required?.includes(inp)}
50
+ type={v?.type}
51
+ contentEncoding={v?.contentEncoding}
52
+ format={v?.format}
53
+ itemsType={v?.itemsType}
54
+ /><span class="ml-4 mt-2 text-xs"
55
+ >{v.default != undefined ? 'default: ' + JSON.stringify(v.default) : ''}</span
56
+ >
57
+ </li>
58
+ {/each}
59
+ </ul>
60
+ {:else}
61
+ <div class="text-gray-700 text-xs italic mb-4">
62
+ This script has no argument or is ill-defined
63
+ </div>
64
+ {/if}
65
+ <p class="font-black text-lg my-6 w-full ml-2">
66
+ <span>{flow?.value?.modules?.length} Steps </span>
67
+ <span class="mt-4" />
68
+ </p>
69
+ <ul class="-mb-8 w-full">
70
+ {#each flow?.value?.modules ?? [] as mod, i}
71
+ <li class="w-full">
72
+ <div class="relative pb-8 w-full">
73
+ {#if i < (flow?.value?.modules ?? []).length - 1}
74
+ <span
75
+ class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
76
+ aria-hidden="true"
77
+ />
78
+ {/if}
79
+ <div class="relative flex space-x-3">
80
+ <div>
81
+ <span
82
+ class="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center ring-8 ring-white text-white"
83
+ >{i + 1}
84
+ </span>
85
+ </div>
86
+ <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 w-full">
87
+ <div class="w-full">
88
+ <p class="text-sm text-gray-500">
89
+ {#if mod?.value?.type == FlowModuleValue.type.SCRIPT}
90
+ Script at path <a
91
+ target="_blank"
92
+ href={scriptPathToHref(mod?.value?.path ?? '')}
93
+ class="font-medium text-gray-900">{mod?.value?.path}</a
94
+ >
95
+ {:else if mod?.value?.type == FlowModuleValue.type.RAWSCRIPT}
96
+ <button
97
+ on:click={() => (open[i] = !open[i])}
98
+ class="mb-2 underline text-black"
99
+ >
100
+ Raw {mod?.value?.language} script {open[i] ? '(-)' : '(+)'}</button
101
+ >
102
+
103
+ {#if open[i]}
104
+ <div transition:slide class="border border-black p-2 bg-gray-50 w-full">
105
+ <Highlight
106
+ language={mod?.value?.language == 'deno' ? typescript : python}
107
+ code={mod?.value?.content}
108
+ />
109
+ </div>
110
+ {/if}
111
+ {:else if mod?.value?.type == FlowModuleValue.type.FLOW}
112
+ Flow at path {mod?.value?.path}
113
+ {:else if mod?.value?.type == FlowModuleValue.type.FORLOOPFLOW}
114
+ For loop over step {i}'s result':
115
+ <svelte:self flow={mod?.value} embedded={true} />
116
+ {/if}
117
+ </p>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </li>
123
+ {/each}
124
+ </ul>
125
+ </div>
126
+ {:else if tab == 'json'}
127
+ <button
128
+ on:click={async () => {
129
+ await navigator.clipboard.writeText(JSON.stringify(flowFiltered, null, 4))
130
+ }}
131
+ class="default-primary-button-v2 float-right my-2 ml-4">copy content</button
132
+ >
133
+ <Highlight language={json} code={JSON.stringify(flowFiltered, null, 4)} />
134
+ {:else if tab == 'schema'}
135
+ <SchemaViewer schema={flow.schema} />
136
+ {/if}
@@ -0,0 +1,24 @@
1
+ import { SvelteComponentTyped } from "svelte";
2
+ import { type FlowValue } from '../gen';
3
+ declare const __propDef: {
4
+ props: {
5
+ flow: {
6
+ summary: string;
7
+ description?: string;
8
+ value: FlowValue;
9
+ schema?: any;
10
+ };
11
+ embedded?: boolean | undefined;
12
+ tab?: "json" | "schema" | "ui" | undefined;
13
+ };
14
+ events: {
15
+ [evt: string]: CustomEvent<any>;
16
+ };
17
+ slots: {};
18
+ };
19
+ export declare type FlowViewerProps = typeof __propDef.props;
20
+ export declare type FlowViewerEvents = typeof __propDef.events;
21
+ export declare type FlowViewerSlots = typeof __propDef.slots;
22
+ export default class FlowViewer extends SvelteComponentTyped<FlowViewerProps, FlowViewerEvents, FlowViewerSlots> {
23
+ }
24
+ export {};
@@ -2,9 +2,9 @@
2
2
  import Mail from './icons/Mail.svelte';
3
3
  import DbIcon from './icons/DbIcon.svelte';
4
4
  import PostgresIcon from './icons/PostgresIcon.svelte';
5
- import Icon from 'svelte-awesome';
6
- import { faSlack } from '@fortawesome/free-brands-svg-icons';
5
+ import { faGithub } from '@fortawesome/free-brands-svg-icons';
7
6
  import Slack from './icons/Slack.svelte';
7
+ import Icon from 'svelte-awesome';
8
8
  export let name;
9
9
  export let after = false;
10
10
  export let height = '24px';
@@ -15,16 +15,18 @@ export let width = '24px';
15
15
  {#if !after}
16
16
  {name}
17
17
  {/if}
18
- {#if name === 'postgres'}
18
+ {#if name === 'postgresql'}
19
19
  <PostgresIcon {height} {width} />
20
20
  {:else if name === 'mysql'}
21
21
  <Mysql {height} {width} />
22
- {:else if name === 'SMTP'}
22
+ {:else if name === 'smtp'}
23
23
  <Mail {height} {width} />
24
24
  {:else if name === 'mongodb'}
25
25
  <DbIcon {height} {width} />
26
26
  {:else if name === 'slack'}
27
27
  <Slack {height} {width} />
28
+ {:else if name === 'github'}
29
+ <Icon data={faGithub} scale={1.4} />
28
30
  {/if}
29
31
  {#if after}
30
32
  {name}
@@ -8,7 +8,7 @@ export let job;
8
8
 
9
9
  {#if job && 'success' in job && job.success}
10
10
  <Icon class="text-green-600" data={check} scale={SMALL_ICON_SCALE} />
11
- <span class="mx-2">Succeeded</span>
11
+ <span class="mx-2">Succeeded {job.is_skipped ? '(Skipped)' : ''}</span>
12
12
  <div>
13
13
  <Icon class="text-gray-700" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span class="mx-2"
14
14
  >Job ran in {job.duration}
@@ -3,10 +3,12 @@ export let open = false;
3
3
  export let z = 'z-30';
4
4
  const dispatch = createEventDispatcher();
5
5
  export function closeModal() {
6
+ document.body.style.overflow = 'auto';
6
7
  open = false;
7
8
  dispatch('close');
8
9
  }
9
10
  export function openModal() {
11
+ document.body.style.overflow = 'hidden';
10
12
  open = true;
11
13
  dispatch('open');
12
14
  }
@@ -23,9 +25,9 @@ function handleKeyUp(event) {
23
25
 
24
26
  <svelte:window on:keyup={handleKeyUp} />
25
27
 
26
- <div class="blurred-background z-0 {open ? '' : 'hidden'}" />
28
+ <div class="blurred-background {open ? '' : 'hidden'}" />
27
29
 
28
- <div class="fixed top-0 w-screen h-screen {open ? '' : 'hidden'} {z}">
30
+ <div class="fixed top-0 w-screen h-screen {open ? '' : 'hidden'} {z}">
29
31
  <div
30
32
  class="fixed right-0 flex flex-col w-3/4 sm:w-2/3 lg:w-1/2 h-screen border border-gray-300 shadow-xl"
31
33
  >
@@ -90,5 +92,5 @@ function handleKeyUp(event) {
90
92
  <style>
91
93
  .blurred-background {
92
94
  /* @apply absolute sm:top-6 lg:top-8 left-28 sm:left-40 md:left-48; */ /* If we wanted to make the navbars visible */ position: fixed; top: 0px; left: 0px; --tw-bg-opacity: 1; background-color: rgb(156 163 175 / var(--tw-bg-opacity)); opacity: 0.75; width: 100vw; height: 100vh;
93
- z-index: 1;
95
+ z-index: 10;
94
96
  }</style>
@@ -1,65 +1,138 @@
1
- <script>import SchemaForm from './SchemaForm.svelte';
2
- import ScriptPicker from './ScriptPicker.svelte';
3
- import { emptySchema } from '../utils';
4
- import { loadSchema as UloadSchema } from '../scripts';
1
+ <script>import { FlowModuleValue } from '../gen';
2
+ import { addPreviewResult, previewResults } from '../stores';
3
+ import { buildExtraLib, objectToTsType, schemaToObject, schemaToTsType } from '../utils';
4
+ import { faRobot } from '@fortawesome/free-solid-svg-icons';
5
+ import Icon from 'svelte-awesome';
6
+ import Editor from './Editor.svelte';
7
+ import EditorBar from './EditorBar.svelte';
5
8
  import FlowPreview from './FlowPreview.svelte';
6
- export let flow;
9
+ import FlowInputs from './flows/FlowInputs.svelte';
10
+ import FlowModuleHeader from './flows/FlowModuleHeader.svelte';
11
+ import { createInlineScriptModule, flowStore, loadSchema, pickScript, schemasStore } from './flows/flowStore';
12
+ import SchemaForm from './SchemaForm.svelte';
13
+ import Tooltip from './Tooltip.svelte';
14
+ export let open;
15
+ export let mode;
7
16
  export let i;
8
17
  export let mod;
9
18
  export let args = {};
10
- export let schemas = [];
11
- export let schemaForms = [];
12
- export async function loadSchema() {
13
- if (mod.value.path) {
14
- let schema = await UloadSchema(mod.value.path);
15
- if (JSON.stringify(Object.keys(schema?.properties ?? {}).sort()) !=
16
- JSON.stringify(Object.keys(mod.input_transform).sort())) {
17
- let it = {};
18
- Object.keys(schema?.properties ?? {}).map((x) => (it[x] = {
19
- type: 'static',
20
- value: ''
21
- }));
22
- schemaForms[i]?.setArgs(it);
23
- }
24
- schemas[i] = schema ?? emptySchema();
25
- }
26
- else {
27
- schemaForms[i]?.setArgs({});
28
- schemas[i] = emptySchema();
29
- }
30
- schemas = schemas;
31
- }
19
+ let editor;
20
+ let websocketAlive = { pyright: false, black: false, deno: false };
21
+ $: schema = $schemasStore[i];
22
+ $: shouldPick = mod.value.path === '' && mod.value.language === undefined;
23
+ $: previousSchema = i === 0 ? schemaToObject($flowStore?.schema) : $previewResults[i];
24
+ $: extraLib = buildExtraLib(i === 0 ? schemaToTsType($flowStore?.schema) : objectToTsType($previewResults[i]));
32
25
  </script>
33
26
 
34
- <li class="flex flex-row flex-shrink max-w-full mx-auto mt-20">
35
- <div class="bg-white border border-gray xl-rounded shadow-lg w-full max-w-3xl mx-4 md:mx-auto">
36
- <div
37
- class="flex items-center justify-between flex-wra px-4 py-5 border-b border-gray-200 sm:px-6"
38
- >
39
- <h3 class="text-lg leading-6 font-medium text-gray-900">Step {i + 1}</h3>
40
- <button
41
- class="text-xs default-button-secondary max-h-6 place-self-end"
42
- on:click={() => {
43
- flow.value.modules.splice(i, 1)
44
- schemas.splice(i, 1)
45
- schemaForms.splice(i, 1)
46
- flow = flow
47
- }}
48
- >Remove this step
49
- </button>
50
- </div>
51
- <div class="p-10">
52
- <h2 class="mb-4">Step script</h2>
53
- <ScriptPicker allowHub={true} bind:scriptPath={mod.value.path} on:select={loadSchema} />
54
- <div class="my-4" />
55
- <h2 class="mb-4">Step inputs</h2>
56
- <SchemaForm
57
- bind:this={schemaForms[i]}
58
- inputTransform={true}
59
- schema={schemas[i]}
60
- bind:args={mod.input_transform}
61
- />
62
- <FlowPreview {flow} {i} bind:args {schemas} />
27
+ <li class="flex flex-row flex-shrink max-w-full mx-auto mt-16">
28
+ <div
29
+ class="bg-white border border-gray xl-rounded shadow-lg w-full max-w-4xl mx-4 md:mx-auto"
30
+ id="module-{i}"
31
+ >
32
+ <div class="flex items-center justify-between flex-wra p-4 sm:px-6 z-10">
33
+ <FlowModuleHeader bind:open {mod} {i} {shouldPick}>
34
+ <div>
35
+ <h3 class="text-lg font-bold text-gray-900">Step {i + 1}</h3>
36
+ {#if i == 0 && mode == 'pull'}
37
+ <h3 class="font-bold">
38
+ Trigger Script <Tooltip
39
+ >When a flow is 'Pull', the first step is a trigger script. Trigger scripts are
40
+ scripts that must return a list which are the new items to be treated one by one by
41
+ the rest of the flow, usually the list of new items since last time the flow was
42
+ run. One can retrieve the item in the next step using `previous_result._value`. To
43
+ easily compute the diff, windmill provides some helpers under the form of
44
+ `getInternalState` and `setInternalState`.</Tooltip
45
+ >
46
+ </h3>{/if}
47
+ <p>
48
+ {#if mod.value.path}
49
+ {mod.value.path}
50
+ {/if}
51
+ {#if mod.value.language}
52
+ Inline {mod.value.language}
53
+ {/if}
54
+ {#if !mod.value.path && !mod.value.language}
55
+ Select a script
56
+ {/if}
57
+ </p>
58
+ </div>
59
+ </FlowModuleHeader>
63
60
  </div>
61
+ <div class="border-b border-gray-200" />
62
+ {#if open == i}
63
+ <div class="p-6">
64
+ {#if shouldPick}
65
+ <FlowInputs
66
+ isTrigger={mode == 'pull' && i == 0}
67
+ on:pick={(e) => pickScript(e.detail.path, i)}
68
+ on:new={(e) => createInlineScriptModule(e.detail.language, i, mode)}
69
+ />
70
+ {/if}
71
+ {#if mod.value.type === FlowModuleValue.type.RAWSCRIPT}
72
+ <div class="p-1 overflow-hidden">
73
+ <EditorBar {editor} {websocketAlive} lang={mod.value.language ?? 'deno'} />
74
+ </div>
75
+ <Editor
76
+ bind:websocketAlive
77
+ bind:this={editor}
78
+ class="h-80 border p-2 rounded"
79
+ bind:code={mod.value.content}
80
+ deno={mod.value.language === FlowModuleValue.language.DENO}
81
+ />
82
+ <div class="mt-2 mb-8">
83
+ <button class="default-primary-button-v2" on:click={() => loadSchema(i)}>
84
+ <Icon data={faRobot} class="w-4 h-4 mr-2 -ml-2" />
85
+
86
+ Infer step inputs from code
87
+ </button>
88
+ </div>
89
+ {/if}
90
+ {#if !shouldPick}
91
+ <p class="text-lg font-bold text-gray-900 mb-2">Step inputs</p>
92
+ <SchemaForm
93
+ inputTransform={true}
94
+ {schema}
95
+ {extraLib}
96
+ {i}
97
+ {previousSchema}
98
+ bind:args={mod.input_transform}
99
+ />
100
+ {/if}
101
+ </div>
102
+
103
+ {#if !shouldPick}
104
+ <div class="border-b border-gray-200" />
105
+ <div class="p-3">
106
+ <FlowPreview
107
+ bind:args
108
+ flow={$flowStore}
109
+ {i}
110
+ {mode}
111
+ schemas={$schemasStore}
112
+ on:change={(e) => {
113
+ addPreviewResult(e.detail.result, i + 1)
114
+ }}
115
+ />
116
+ </div>
117
+ <div>
118
+ <button class="w-full h-full" on:click={() => (open = -1)}>(-)</button>
119
+ </div>
120
+ {:else}
121
+ <div>
122
+ <button class="w-full h-full" on:click={() => (open = i)}>(+)</button>
123
+ </div>
124
+ {/if}
125
+ {/if}
64
126
  </div>
65
127
  </li>
128
+ {#if i == 0 && mode == 'pull'}
129
+ <li class="relative m-20 ">
130
+ <div class="relative flex justify-center bg-white shadow p-2">
131
+ Starting from here, the flow for loop over items from step 1's result above &nbsp;<Tooltip
132
+ >This flow being in 'Pull' mode, the rest of the flow will for loop over the list of items
133
+ returned by the trigger script right above. Retrieve the item value using
134
+ `previous_result._value`</Tooltip
135
+ >
136
+ </div>
137
+ </li>
138
+ {/if}
@@ -1,16 +1,13 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
- import type { Schema } from '../common';
3
- import type { Flow, FlowModule } from '../gen';
4
- import SchemaForm from './SchemaForm.svelte';
2
+ import { type FlowModule } from '../gen';
3
+ import { type FlowMode } from './flows/flowStore';
5
4
  declare const __propDef: {
6
5
  props: {
7
- flow: Flow;
6
+ open: number;
7
+ mode: FlowMode;
8
8
  i: number;
9
9
  mod: FlowModule;
10
10
  args?: Record<string, any> | undefined;
11
- schemas?: Schema[] | undefined;
12
- schemaForms?: (SchemaForm | undefined)[] | undefined;
13
- loadSchema?: (() => Promise<void>) | undefined;
14
11
  };
15
12
  events: {
16
13
  [evt: string]: CustomEvent<any>;
@@ -21,6 +18,5 @@ export declare type ModuleStepProps = typeof __propDef.props;
21
18
  export declare type ModuleStepEvents = typeof __propDef.events;
22
19
  export declare type ModuleStepSlots = typeof __propDef.slots;
23
20
  export default class ModuleStep extends SvelteComponentTyped<ModuleStepProps, ModuleStepEvents, ModuleStepSlots> {
24
- get loadSchema(): () => Promise<void>;
25
21
  }
26
22
  export {};
@@ -11,7 +11,6 @@ function isString(value) {
11
11
  let path = isString(value) && value.length >= '$res:'.length ? value.substr('$res:'.length) : undefined;
12
12
  let args = {};
13
13
  if (!isString(value) && value) {
14
- console.log(value);
15
14
  args = value;
16
15
  }
17
16
  let schema = undefined;