improvement to readme preview in workflow editor

Uses the `Heading` component to show the workflow name and then the workflow logo (if it exists) _**inline**_ in the readme preview.

Author: ahmedhamidawan

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

@@ -127,7 +127,18 @@
             </div>
         </div>
         <BModal v-model="showReadmePreview" hide-header centered ok-only>
-            <ToolHelpMarkdown :content="readmePreviewMarkdown" />
+            <div class="d-flex justify-content-between align-items-center mb-2">
+                <Heading class="flex-grow-1" truncate separator size="md">
+                    {{ nameCurrent || "Workflow Readme Preview" }}
+                </Heading>
+                <img
+                    v-if="logoUrlCurrent"
+                    :src="logoUrlCurrent"
+                    :alt="`${nameCurrent} workflow logo`"
+                    style="max-height: 30px"
+                    class="ml-2 mb-2" />
+            </div>
+            <ToolHelpMarkdown :content="readmeCurrent" />
         </BModal>
     </ActivityPanel>
 </template>
@@ -148,6 +159,7 @@ import {
 } from "./modules/linting";
 import { UntypedParameters } from "./modules/parameters";
 
+import Heading from "@/components/Common/Heading.vue";
 import LicenseSelector from "@/components/License/LicenseSelector.vue";
 import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
 import CreatorEditor from "@/components/SchemaOrg/CreatorEditor.vue";
@@ -160,6 +172,7 @@ export default {
     name: "WorkflowAttributes",
     components: {
         FontAwesomeIcon,
+        Heading,
         StatelessTags,
         LicenseSelector,
         CreatorEditor,
@@ -253,19 +266,6 @@ 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++) {