Skip to content

Commit f6fa18c

Browse files
zonia3000zonia3000
committed
Enabled task info tab and rendered docs info from markdown - close #252 
1 parent 7976e4c commit f6fa18c

File tree

6 files changed

+117
-10
lines changed

6 files changed

+117
-10
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
# Unreleased
55

6+
* Enabled task info tab and rendered docs info from markdown (\#271).
67
* Update import-workflow feature (\#269).
78
* Revamp home page and user-related layout (\#259).
89
* Review logout action (\#259).

‎package-lock.json‎

Lines changed: 37 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"@sveltejs/adapter-auto": "^2.0.0",
1919
"@sveltejs/adapter-node": "^1.2.4",
2020
"@sveltejs/kit": "^1.15.7",
21+
"@types/dompurify": "^3.0.2",
2122
"eslint": "^8.38.0",
2223
"eslint-config-prettier": "^8.3.0",
2324
"eslint-plugin-svelte3": "^4.0.0",
@@ -34,7 +35,9 @@
3435
"dependencies": {
3536
"@vincjo/datatables": "^1.6.0",
3637
"ajv": "^8.12.0",
38+
"dompurify": "^3.0.5",
3739
"jose": "^4.14.4",
40+
"marked": "^7.0.4",
3841
"slim-select": "^2.5.1"
3942
}
4043
}

‎src/lib/common/component_utilities.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { marked } from 'marked';
2+
import DOMPurify from 'dompurify';
13
import semver from 'semver';
24

35
export function greatestVersionAsc(t1, t2) {
@@ -102,3 +104,10 @@ export function unsetEmptyStrings(inputValues) {
102104
}
103105
return clearedValues;
104106
}
107+
108+
export function formatMarkdown(markdownValue) {
109+
if (!markdownValue) {
110+
return '';
111+
}
112+
return DOMPurify.sanitize(marked.parse(markdownValue));
113+
}

‎src/lib/components/tasks/TaskInfoModal.svelte‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script>
2+
import { formatMarkdown } from '$lib/common/component_utilities';
3+
24
// TaskInfoModal component
35
import { taskStore } from '$lib/stores/taskStores';
46
@@ -38,11 +40,11 @@
3840
<li class='list-group-item'><code>{task?.source}</code></li>
3941
<li class='list-group-item list-group-item-light fw-bold'>Input Type</li>
4042
<li class='list-group-item'>
41-
<pre>{task?.input_type}</pre>
43+
<code>{task?.input_type}</code>
4244
</li>
4345
<li class='list-group-item list-group-item-light fw-bold'>Output Type</li>
4446
<li class='list-group-item'>
45-
<pre>{task?.output_type}</pre>
47+
<code>{task?.output_type}</code>
4648
</li>
4749
<li class='list-group-item list-group-item-light fw-bold'>Args Schema Version</li>
4850
<li class='list-group-item'>{task?.args_schema_version || '-'}</li>
@@ -67,9 +69,7 @@
6769
<li class='list-group-item list-group-item-light fw-bold'>Docs Info</li>
6870
<li class='list-group-item'>
6971
{#if task?.docs_info}
70-
<code>
71-
<pre>{task?.docs_info}</pre>
72-
</code>
72+
{@html formatMarkdown(task?.docs_info)}
7373
{:else}
7474
-
7575
{/if}

‎src/routes/projects/[projectId]/workflows/[workflowId]/+page.svelte‎

Lines changed: 62 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
import MetaPropertiesForm from '$lib/components/workflow/MetaPropertiesForm.svelte';
1111
import ArgumentsSchema from '$lib/components/workflow/ArgumentsSchema.svelte';
1212
import WorkflowTaskSelection from '$lib/components/workflow/WorkflowTaskSelection.svelte';
13+
import { formatMarkdown } from '$lib/common/component_utilities';
1314
1415
// Workflow
1516
let workflow = undefined;
@@ -436,7 +437,12 @@
436437
</button>
437438
</li>
438439
<li class='nav-item'>
439-
<span class='nav-link disabled'>Info</span>
440+
<button
441+
data-bs-toggle='tab'
442+
data-bs-target='#info-tab'
443+
class="nav-link {workflowTabContextId === 2 ? 'active' : ''}"
444+
>Info
445+
</button>
440446
</li>
441447
</ul>
442448
<ConfirmActionButton
@@ -503,6 +509,60 @@
503509
{/if}
504510
</div>
505511
</div>
512+
<div id="info-tab" class="tab-pane">
513+
<div class="card-body">
514+
{#if selectedWorkflowTask}
515+
<ul class="list-group">
516+
<li class="list-group-item list-group-item-light fw-bold">Name</li>
517+
<li class="list-group-item">{selectedWorkflowTask.task.name}</li>
518+
<li class="list-group-item list-group-item-light fw-bold">Version</li>
519+
<li class="list-group-item">{selectedWorkflowTask.task.version || '-'}</li>
520+
<li class='list-group-item list-group-item-light fw-bold'>Docs Link</li>
521+
<li class='list-group-item'>
522+
{#if selectedWorkflowTask.task.docs_link}
523+
<a href="{selectedWorkflowTask.task.docs_link}" target="_blank">{selectedWorkflowTask.task.docs_link}</a>
524+
{:else}
525+
-
526+
{/if}
527+
</li>
528+
<li class='list-group-item list-group-item-light fw-bold'>Docs Info</li>
529+
<li class='list-group-item'>
530+
{#if selectedWorkflowTask.task.docs_info}
531+
{@html formatMarkdown(selectedWorkflowTask.task.docs_info)}
532+
{:else}
533+
-
534+
{/if}
535+
</li>
536+
<li class="list-group-item list-group-item-light fw-bold">Owner</li>
537+
<li class="list-group-item">{selectedWorkflowTask.task.owner || '-'}</li>
538+
<li class="list-group-item list-group-item-light fw-bold">Command</li>
539+
<li class='list-group-item'><code>{selectedWorkflowTask.task.command}</code></li>
540+
<li class='list-group-item list-group-item-light fw-bold'>Source</li>
541+
<li class='list-group-item'><code>{selectedWorkflowTask.task.source}</code></li>
542+
<li class='list-group-item list-group-item-light fw-bold'>Input Type</li>
543+
<li class='list-group-item'>
544+
<code>{selectedWorkflowTask.task.input_type}</code>
545+
</li>
546+
<li class='list-group-item list-group-item-light fw-bold'>Output Type</li>
547+
<li class='list-group-item'>
548+
<code>{selectedWorkflowTask.task.output_type}</code>
549+
</li>
550+
<li class='list-group-item list-group-item-light fw-bold'>Args Schema Version</li>
551+
<li class='list-group-item'>{selectedWorkflowTask.task.args_schema_version || '-'}</li>
552+
<li class='list-group-item list-group-item-light fw-bold'>Args Schema</li>
553+
<li class='list-group-item'>
554+
{#if selectedWorkflowTask.task.args_schema}
555+
<code>
556+
<pre>{JSON.stringify(selectedWorkflowTask.task.args_schema, null, 2)}</pre>
557+
</code>
558+
{:else}
559+
-
560+
{/if}
561+
</li>
562+
</ul>
563+
{/if}
564+
</div>
565+
</div>
506566
</div>
507567
</div>
508568
</div>
@@ -755,7 +815,7 @@
755815
<button type='button' class='btn-close' data-bs-dismiss='modal' aria-label='Close'></button>
756816
</div>
757817
<div class='modal-body'>
758-
<p>Do you want to save the changes made to the arguments of the current selected workflow task?</p>
818+
<p>Do you want to save the changes made to the arguments of the current selected workflow selectedWorkflowTask.task</p>
759819
</div>
760820
<div class='modal-footer'>
761821
<button type='button' class='btn btn-secondary' data-bs-dismiss='modal'>Cancel</button>

0 commit comments

Comments
 (0)