Readme preview button in workflow attributes.

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

@@ -95,7 +95,10 @@
             </div>
         </div>
         <div class="mt-2">
-            <b>Readme</b>
+            <b
+                >Readme
+                <FontAwesomeIcon :icon="faEye" @click="showReadmePreview = true" />
+            </b>
             <b-textarea
                 id="workflow-readme"
                 v-model="readmeCurrent"
@@ -123,10 +126,16 @@
                 An logo image used when generating publication artifacts for your workflow. This is completely optional.
             </div>
         </div>
+        <BModal v-model="showReadmePreview" hide-header centered ok-only>
+            <ToolHelpMarkdown :content="readmePreviewMarkdown" />
+        </BModal>
     </ActivityPanel>
 </template>
 
 <script>
+import { faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BModal } from "bootstrap-vue";
 import { format, parseISO } from "date-fns";
 
 import { Services } from "@/components/Workflow/services";
@@ -143,16 +152,20 @@ import LicenseSelector from "@/components/License/LicenseSelector.vue";
 import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
 import CreatorEditor from "@/components/SchemaOrg/CreatorEditor.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
+import ToolHelpMarkdown from "@/components/Tool/ToolHelpMarkdown.vue";
 
 const bestPracticeHighlightTime = 10000;
 
 export default {
     name: "WorkflowAttributes",
     components: {
+        FontAwesomeIcon,
         StatelessTags,
         LicenseSelector,
         CreatorEditor,
         ActivityPanel,
+        BModal,
+        ToolHelpMarkdown,
     },
     props: {
         id: {
@@ -223,6 +236,8 @@ export default {
             showAnnotationHightlight: false,
             showLicenseHightlight: false,
             showCreatorHightlight: false,
+            showReadmePreview: false,
+            faEye,
         };
     },
     computed: {
@@ -238,6 +253,19 @@ export default {
         hasParameters() {
             return this.parameters && this.parameters.parameters.length > 0;
         },
+        readmePreviewMarkdown() {
+            let content = "";
+            if (this.nameCurrent) {
+                content += `# ${this.nameCurrent}\n\n`;
+            }
+            if (this.logoUrlCurrent) {
+                content += `![${this.nameCurrent || "workflow"} logo](${this.logoUrlCurrent})\n\n`;
+            }
+            if (this.readmeCurrent) {
+                content += this.readmeCurrent;
+            }
+            return content;
+        },
         versionOptions() {
             const versions = [];
             for (let i = 0; i < this.versions.length; i++) {