Skip to content

Commit 4ff3ff3

Browse files
ahmedhamidawanahmedhamidawan
committed
just add a button toggle for readme preview and editor
1 parent 7c5f2d5 commit 4ff3ff3

4 files changed

Lines changed: 117 additions & 55 deletions

File tree

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

Lines changed: 12 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@
9393
:creator="creator"
9494
:logo-url="logoUrl"
9595
:help="help"
96+
:readme-active.sync="readmeActive"
9697
@version="onVersion"
9798
@tags="setTags"
9899
@license="onLicense"
@@ -101,16 +102,6 @@
101102
@update:annotationCurrent="setAnnotation"
102103
@update:logoUrlCurrent="setLogoUrl"
103104
@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>
114105
</template>
115106
</ActivityBar>
116107
<template v-if="reportActive">
@@ -172,23 +163,14 @@
172163
</b-button-group>
173164
</div>
174165

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>
166+
<ReadmeEditor
167+
v-if="readmeActive"
168+
class="p-2"
169+
:readme="readme"
170+
:name="name"
171+
:logo-url="logoUrl"
172+
@exit="readmeActive = false"
173+
@update:readmeCurrent="setReadme" />
192174

193175
<WorkflowGraph
194176
v-else-if="!datatypesMapperLoading"
@@ -261,30 +243,28 @@ import reportDefault from "./reportDefault";
261243
import WorkflowLint from "./Lint.vue";
262244
import MessagesModal from "./MessagesModal.vue";
263245
import NodeInspector from "./NodeInspector.vue";
246+
import ReadmeEditor from "./ReadmeEditor.vue";
264247
import RefactorConfirmationModal from "./RefactorConfirmationModal.vue";
265248
import SaveChangesModal from "./SaveChangesModal.vue";
266249
import StateUpgradeModal from "./StateUpgradeModal.vue";
267250
import WorkflowAttributes from "./WorkflowAttributes.vue";
268251
import WorkflowGraph from "./WorkflowGraph.vue";
269252
import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
270253
import MarkdownEditor from "@/components/Markdown/MarkdownEditor.vue";
271-
import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
272254
import InputPanel from "@/components/Panels/InputPanel.vue";
273255
import ToolPanel from "@/components/Panels/ToolPanel.vue";
274256
import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
275-
import ToolHelpMarkdown from "@/components/Tool/ToolHelpMarkdown.vue";
276257
import UndoRedoStack from "@/components/UndoRedo/UndoRedoStack.vue";
277258
278259
library.add(faArrowLeft, faArrowRight, faHistory);
279260
280261
export default {
281262
components: {
282263
ActivityBar,
283-
ActivityPanel,
284264
MarkdownEditor,
285265
SaveChangesModal,
286266
StateUpgradeModal,
287-
ToolHelpMarkdown,
267+
ReadmeEditor,
288268
ToolPanel,
289269
WorkflowAttributes,
290270
WorkflowLint,
@@ -339,7 +319,6 @@ export default {
339319
const activityBar = ref(null);
340320
const workflowGraph = ref(null);
341321
const reportActive = computed(() => activityBar.value?.isActiveSideBar("workflow-editor-report"));
342-
const readmeActive = computed(() => activityBar.value?.isActiveSideBar("workflow-editor-readme"));
343322
344323
const parameters = ref(null);
345324
@@ -424,15 +403,6 @@ export default {
424403
setReadmeHandler.set(readme.value, newReadme);
425404
}
426405
}
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-
});
436406
437407
const help = ref(null);
438408
const setHelpHandler = new SetValueActionHandler(
@@ -588,8 +558,6 @@ export default {
588558
annotation,
589559
setAnnotation,
590560
readme,
591-
readmeActive,
592-
readmeCurrent,
593561
setReadme,
594562
help,
595563
setHelp,
@@ -642,7 +610,7 @@ export default {
642610
messageBody: null,
643611
messageIsError: false,
644612
version: this.initialVersion,
645-
readmeEdit: true,
613+
readmeActive: false,
646614
saveAsName: null,
647615
saveAsAnnotation: null,
648616
showSaveAsModal: false,

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<script setup lang="ts">
2+
import { faEdit, faEye, faTimes } from "@fortawesome/free-solid-svg-icons";
3+
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
4+
import { BButton, BButtonGroup, BFormTextarea } from "bootstrap-vue";
5+
import { computed, ref, watch } from "vue";
6+
7+
import Heading from "@/components/Common/Heading.vue";
8+
import ToolHelpMarkdown from "@/components/Tool/ToolHelpMarkdown.vue";
9+
10+
const PLACEHOLDER_TEXT = [
11+
"The README is a markdown detailed description of what the workflow does.",
12+
"It is best to include descriptions of what kinds of data are required.",
13+
"Researchers looking for the workflow will see this text.",
14+
"Markdown is enabled.",
15+
].join(" ");
16+
17+
const props = defineProps<{
18+
readme: string;
19+
name: string;
20+
logoUrl: string | null;
21+
}>();
22+
23+
const emit = defineEmits<{
24+
(e: "update:readmeCurrent", readme: string): void;
25+
(e: "exit"): void;
26+
}>();
27+
28+
const readmeEdit = ref(true);
29+
const readmeCurrent = ref(props.readme || "");
30+
31+
const readmePreviewMarkdown = computed(() => {
32+
let content = "";
33+
if (props.logoUrl) {
34+
content += `![${props.name || "workflow"} logo](${props.logoUrl})\n\n`;
35+
}
36+
if (readmeCurrent.value) {
37+
content += readmeCurrent.value;
38+
}
39+
return content;
40+
});
41+
42+
watch(
43+
() => props.readme,
44+
(newValue) => {
45+
readmeCurrent.value = newValue;
46+
},
47+
{ immediate: true }
48+
);
49+
</script>
50+
51+
<template>
52+
<div class="h-100 d-flex flex-column">
53+
<div class="d-flex flex-gapx-1">
54+
<Heading h3 separator inline size="sm" class="flex-grow-1 m-0">
55+
<span v-localize>Workflow Readme</span>
56+
</Heading>
57+
<BButtonGroup>
58+
<BButton size="sm" variant="outline-primary" :disabled="readmeEdit" @click="readmeEdit = true">
59+
<FontAwesomeIcon :icon="faEdit" />
60+
<span v-localize>Edit</span>
61+
</BButton>
62+
<BButton size="sm" variant="outline-primary" :disabled="!readmeEdit" @click="readmeEdit = false">
63+
<FontAwesomeIcon :icon="faEye" />
64+
<span v-localize>Preview</span>
65+
</BButton>
66+
</BButtonGroup>
67+
<BButton size="sm" variant="outline-danger" :disabled="!readmeEdit" @click="emit('exit')">
68+
<FontAwesomeIcon :icon="faTimes" />
69+
<span v-localize>Exit</span>
70+
</BButton>
71+
</div>
72+
<div v-if="readmeEdit" class="mt-2 d-flex flex-column">
73+
<BFormTextarea
74+
id="workflow-readme"
75+
v-model="readmeCurrent"
76+
size="lg"
77+
class="flex-grow-1"
78+
no-resize
79+
:placeholder="PLACEHOLDER_TEXT"
80+
@keyup="emit('update:readmeCurrent', readmeCurrent)" />
81+
</div>
82+
<ToolHelpMarkdown v-else class="mt-2 overflow-auto" :content="readmePreviewMarkdown" />
83+
</div>
84+
</template>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,23 @@
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+
<div>
99+
<b>Readme</b>
100+
</div>
101+
<b-button
102+
id="workflow-readme"
103+
class="w-100"
104+
size="sm"
105+
:pressed="readmeActive"
106+
@click="$emit('update:readme-active', !readmeActive)">
107+
{{ readmeActive ? "Hide" : "Show" }} Readme
108+
</b-button>
109+
<div class="form-text text-muted">
110+
A detailed description of what the workflow does. It is best to include descriptions of what kinds of
111+
data are required. Researchers looking for the workflow will see this text. Markdown is enabled.
112+
</div>
113+
</div>
97114
<div class="mt-2">
98115
<b>Help</b>
99116
<b-textarea id="workflow-help" v-model="helpCurrent" @keyup="$emit('update:helpCurrent', helpCurrent)" />
@@ -176,6 +193,10 @@ export default {
176193
type: String,
177194
default: null,
178195
},
196+
readmeActive: {
197+
type: Boolean,
198+
default: false,
199+
},
179200
help: {
180201
type: String,
181202
default: null,

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

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { faReadme } from "@fortawesome/free-brands-svg-icons";
21
import { faSave as farSave } from "@fortawesome/free-regular-svg-icons";
32
import {
43
faDownload,
@@ -69,16 +68,6 @@ export const workflowEditorActivities = [
6968
visible: true,
7069
optional: true,
7170
},
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-
},
8271
{
8372
title: "Best Practices",
8473
id: "workflow-best-practices",

0 commit comments

Comments
 (0)
⚡