Skip to content

Commit 33fe691

Browse files
ahmedhamidawanahmedhamidawan
committed
(rebase this commit to remove activity) Add README activity to Workflow Editor
- What can we add to the side panel for the README activity (maybe logo url field?) TODO: - [ ] Use a better README editor than just the textarea we are using right now - [ ] Add workflow logo to readme preview - [ ] Add a way to best-practice highlight READMEs - [ ] Do not reset to Attributes activity on undo/redo - [ ] Weird `.editor-top-bar` height change on switching b/w edit and view README markdown
1 parent 0d8e20f commit 33fe691

3 files changed

Lines changed: 71 additions & 61 deletions

File tree

‎client/src/components/Workflow/Editor/Index.vue‎

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,6 @@
9292
:license="license"
9393
:creator="creator"
9494
:logo-url="logoUrl"
95-
:readme="readme"
9695
:help="help"
9796
@version="onVersion"
9897
@tags="setTags"
@@ -101,8 +100,17 @@
101100
@update:nameCurrent="setName"
102101
@update:annotationCurrent="setAnnotation"
103102
@update:logoUrlCurrent="setLogoUrl"
104-
@update:readmeCurrent="setReadme"
105103
@update:helpCurrent="setHelp" />
104+
<ActivityPanel v-else-if="isActiveSideBar('workflow-editor-readme')" title="Workflow Readme">
105+
<b-button-group vertical>
106+
<b-button :pressed="readmeEdit === true" @click="readmeEdit = true">
107+
Edit Readme Markdown
108+
</b-button>
109+
<b-button :pressed="readmeEdit === false" @click="readmeEdit = false">
110+
View Readme Markdown
111+
</b-button>
112+
</b-button-group>
113+
</ActivityPanel>
106114
</template>
107115
</ActivityBar>
108116
<template v-if="reportActive">
@@ -163,8 +171,27 @@
163171
</b-button>
164172
</b-button-group>
165173
</div>
174+
175+
<template v-if="readmeActive">
176+
<div v-if="readmeEdit" class="mt-2 h-100 d-flex flex-column">
177+
<b-textarea
178+
id="workflow-readme"
179+
v-model="readmeCurrent"
180+
size="lg"
181+
class="flex-grow-1"
182+
no-resize
183+
@keyup="setReadme(readmeCurrent)" />
184+
<div v-localize class="form-text text-muted">
185+
A detailed description of what the workflow does. It is best to include descriptions of what
186+
kinds of data are required. Researchers looking for the workflow will see this text.
187+
Markdown is enabled.
188+
</div>
189+
</div>
190+
<ToolHelpMarkdown v-else class="p-2" :content="readmeCurrent" />
191+
</template>
192+
166193
<WorkflowGraph
167-
v-if="!datatypesMapperLoading"
194+
v-else-if="!datatypesMapperLoading"
168195
ref="workflowGraph"
169196
:steps="steps"
170197
:datatypes-mapper="datatypesMapper"
@@ -241,19 +268,23 @@ import WorkflowAttributes from "./WorkflowAttributes.vue";
241268
import WorkflowGraph from "./WorkflowGraph.vue";
242269
import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
243270
import MarkdownEditor from "@/components/Markdown/MarkdownEditor.vue";
271+
import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
244272
import InputPanel from "@/components/Panels/InputPanel.vue";
245273
import ToolPanel from "@/components/Panels/ToolPanel.vue";
246274
import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
275+
import ToolHelpMarkdown from "@/components/Tool/ToolHelpMarkdown.vue";
247276
import UndoRedoStack from "@/components/UndoRedo/UndoRedoStack.vue";
248277
249278
library.add(faArrowLeft, faArrowRight, faHistory);
250279
251280
export default {
252281
components: {
253282
ActivityBar,
283+
ActivityPanel,
254284
MarkdownEditor,
255285
SaveChangesModal,
256286
StateUpgradeModal,
287+
ToolHelpMarkdown,
257288
ToolPanel,
258289
WorkflowAttributes,
259290
WorkflowLint,
@@ -308,6 +339,7 @@ export default {
308339
const activityBar = ref(null);
309340
const workflowGraph = ref(null);
310341
const reportActive = computed(() => activityBar.value?.isActiveSideBar("workflow-editor-report"));
342+
const readmeActive = computed(() => activityBar.value?.isActiveSideBar("workflow-editor-readme"));
311343
312344
const parameters = ref(null);
313345
@@ -392,6 +424,15 @@ export default {
392424
setReadmeHandler.set(readme.value, newReadme);
393425
}
394426
}
427+
// computed with getter and setter
428+
const readmeCurrent = computed({
429+
get() {
430+
return readme.value;
431+
},
432+
set(newReadme) {
433+
setReadme(newReadme);
434+
},
435+
});
395436
396437
const help = ref(null);
397438
const setHelpHandler = new SetValueActionHandler(
@@ -547,6 +588,8 @@ export default {
547588
annotation,
548589
setAnnotation,
549590
readme,
591+
readmeActive,
592+
readmeCurrent,
550593
setReadme,
551594
help,
552595
setHelp,
@@ -599,6 +642,7 @@ export default {
599642
messageBody: null,
600643
messageIsError: false,
601644
version: this.initialVersion,
645+
readmeEdit: true,
602646
saveAsName: null,
603647
saveAsAnnotation: null,
604648
showSaveAsModal: false,

‎client/src/components/Workflow/Editor/WorkflowAttributes.vue‎

Lines changed: 13 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -94,20 +94,6 @@
9494
Apply tags to make it easy to search for and find items with the same tag.
9595
</div>
9696
</div>
97-
<div class="mt-2">
98-
<b
99-
>Readme
100-
<FontAwesomeIcon :icon="faEye" @click="showReadmePreview = true" />
101-
</b>
102-
<b-textarea
103-
id="workflow-readme"
104-
v-model="readmeCurrent"
105-
@keyup="$emit('update:readmeCurrent', readmeCurrent)" />
106-
<div class="form-text text-muted">
107-
A detailed description of what the workflow does. It is best to include descriptions of what kinds of
108-
data are required. Researchers looking for the workflow will see this text. Markdown is enabled.
109-
</div>
110-
</div>
11197
<div class="mt-2">
11298
<b>Help</b>
11399
<b-textarea id="workflow-help" v-model="helpCurrent" @keyup="$emit('update:helpCurrent', helpCurrent)" />
@@ -126,16 +112,10 @@
126112
An logo image used when generating publication artifacts for your workflow. This is completely optional.
127113
</div>
128114
</div>
129-
<BModal v-model="showReadmePreview" hide-header centered ok-only>
130-
<ToolHelpMarkdown :content="readmePreviewMarkdown" />
131-
</BModal>
132115
</ActivityPanel>
133116
</template>
134117

135118
<script>
136-
import { faEye } from "@fortawesome/free-solid-svg-icons";
137-
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
138-
import { BModal } from "bootstrap-vue";
139119
import { format, parseISO } from "date-fns";
140120
141121
import { Services } from "@/components/Workflow/services";
@@ -152,20 +132,16 @@ import LicenseSelector from "@/components/License/LicenseSelector.vue";
152132
import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
153133
import CreatorEditor from "@/components/SchemaOrg/CreatorEditor.vue";
154134
import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
155-
import ToolHelpMarkdown from "@/components/Tool/ToolHelpMarkdown.vue";
156135
157136
const bestPracticeHighlightTime = 10000;
158137
159138
export default {
160139
name: "WorkflowAttributes",
161140
components: {
162-
FontAwesomeIcon,
163141
StatelessTags,
164142
LicenseSelector,
165143
CreatorEditor,
166144
ActivityPanel,
167-
BModal,
168-
ToolHelpMarkdown,
169145
},
170146
props: {
171147
id: {
@@ -200,10 +176,6 @@ export default {
200176
type: String,
201177
default: null,
202178
},
203-
readme: {
204-
type: String,
205-
default: null,
206-
},
207179
help: {
208180
type: String,
209181
default: null,
@@ -231,13 +203,10 @@ export default {
231203
annotationCurrent: this.annotation,
232204
nameCurrent: this.name,
233205
logoUrlCurrent: this.logoUrl,
234-
readmeCurrent: this.readme,
235206
helpCurrent: this.help,
236207
showAnnotationHightlight: false,
237208
showLicenseHightlight: false,
238209
showCreatorHightlight: false,
239-
showReadmePreview: false,
240-
faEye,
241210
};
242211
},
243212
computed: {
@@ -253,19 +222,6 @@ export default {
253222
hasParameters() {
254223
return this.parameters && this.parameters.parameters.length > 0;
255224
},
256-
readmePreviewMarkdown() {
257-
let content = "";
258-
if (this.nameCurrent) {
259-
content += `# ${this.nameCurrent}\n\n`;
260-
}
261-
if (this.logoUrlCurrent) {
262-
content += `![${this.nameCurrent || "workflow"} logo](${this.logoUrlCurrent})\n\n`;
263-
}
264-
if (this.readmeCurrent) {
265-
content += this.readmeCurrent;
266-
}
267-
return content;
268-
},
269225
versionOptions() {
270226
const versions = [];
271227
for (let i = 0; i < this.versions.length; i++) {
@@ -318,9 +274,6 @@ export default {
318274
name() {
319275
this.nameCurrent = this.name;
320276
},
321-
readme() {
322-
this.readmeCurrent = this.readme;
323-
},
324277
help() {
325278
this.helpCurrent = this.help;
326279
},
@@ -337,35 +290,37 @@ export default {
337290
this.showAnnotationHightlight = true;
338291
this.showCreatorHightlight = false;
339292
this.showLicenseHightlight = false;
340-
this.showReadmeHightlight = false;
293+
// this.showReadmeHightlight = false;
341294
setTimeout(() => {
342295
this.showAnnotationHightlight = false;
343296
}, bestPracticeHighlightTime);
344297
} else if (newHighlight == "creator") {
345298
this.showAnnotationHightlight = false;
346299
this.showCreatorHightlight = true;
347300
this.showLicenseHightlight = false;
348-
this.showReadmeHightlight = false;
301+
// this.showReadmeHightlight = false;
349302
setTimeout(() => {
350303
this.showCreatorHightlight = false;
351304
}, bestPracticeHighlightTime);
352305
} else if (newHighlight == "license") {
353306
this.showAnnotationHightlight = false;
354307
this.showCreatorHightlight = false;
355308
this.showLicenseHightlight = true;
356-
this.showReadmeHightlight = false;
309+
// this.showReadmeHightlight = false;
357310
setTimeout(() => {
358311
this.showLicenseHightlight = false;
359312
}, bestPracticeHighlightTime);
360-
} else if (newHighlight == "readme") {
361-
this.showAnnotationHighlight = false;
362-
this.showCreatorHightlight = false;
363-
this.showLicenseHightlight = false;
364-
this.showReadmeHightlight = true;
365-
setTimeout(() => {
366-
this.showReadmeHightlight = false;
367-
}, bestPracticeHighlightTime);
368313
}
314+
// } else if (newHighlight == "readme") {
315+
// this.showAnnotationHighlight = false;
316+
// this.showCreatorHightlight = false;
317+
// this.showLicenseHightlight = false;
318+
// this.showReadmeHightlight = true;
319+
// setTimeout(() => {
320+
// this.showReadmeHightlight = false;
321+
// }, bestPracticeHighlightTime);
322+
// }
323+
// TODO: Add readme highlight in parent Index.vue
369324
},
370325
},
371326
},

‎client/src/components/Workflow/Editor/modules/activities.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { faReadme } from "@fortawesome/free-brands-svg-icons";
12
import { faSave as farSave } from "@fortawesome/free-regular-svg-icons";
23
import {
34
faDownload,
@@ -68,6 +69,16 @@ export const workflowEditorActivities = [
6869
visible: true,
6970
optional: true,
7071
},
72+
{
73+
title: "README",
74+
id: "workflow-editor-readme",
75+
description: "Edit and View the README for this workflow.",
76+
tooltip: "Create/Modify workflow README",
77+
icon: faReadme,
78+
panel: true,
79+
visible: true,
80+
optional: true,
81+
},
7182
{
7283
title: "Best Practices",
7384
id: "workflow-best-practices",

0 commit comments

Comments
 (0)
⚡