add both readme and help to StoredWorkflowDetailed

and show readme in workflow run form.

Author: ahmedhamidawan

client/src/api/schema/schema.ts

@@ -16448,6 +16448,11 @@ export interface components {
              * @description The hash of the email of the creator of this workflow
              */
             email_hash: string | null;
+            /**
+             * Help
+             * @description The detailed help text for how to use the workflow and debug problems with it.
+             */
+            help: string | null;
             /**
              * Hidden
              * @description TODO
@@ -16507,6 +16512,11 @@ export interface components {
              * @description Whether this workflow is currently publicly available to all users.
              */
             published: boolean;
+            /**
+             * Readme
+             * @description The detailed markdown readme of the workflow.
+             */
+            readme: string | null;
             /**
              * Show in Tool Panel
              * @description Whether to display this workflow in the Tools Panel.

client/src/components/Workflow/WorkflowAnnotation.vue

@@ -4,13 +4,15 @@ import { faExclamation, faHdd } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BBadge } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
 import { isRegisteredUser } from "@/api";
+import { useMarkdown } from "@/composables/markdown";
 import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
 import { useHistoryStore } from "@/stores/historyStore";
 import { useUserStore } from "@/stores/userStore";
 
+import Heading from "../Common/Heading.vue";
 import TextSummary from "../Common/TextSummary.vue";
 import SwitchToHistoryLink from "../History/SwitchToHistoryLink.vue";
 import StatelessTags from "../TagsMultiselect/StatelessTags.vue";
@@ -56,6 +58,14 @@ const timeElapsed = computed(() => {
 const workflowTags = computed(() => {
     return workflow.value?.tags || [];
 });
+
+const readmeShown = ref(false);
+
+const { renderMarkdown } = useMarkdown({
+    openLinksInNewPage: true,
+    removeNewlinesAfterList: true,
+    increaseHeadingLevelBy: 1,
+});
 </script>
 
 <template>
@@ -94,7 +104,20 @@ const workflowTags = computed(() => {
         <div v-if="props.showDetails">
             <TextSummary v-if="description" class="my-1" :description="description" one-line-summary component="span" />
             <StatelessTags v-if="workflowTags.length" :value="workflowTags" :disabled="true" />
-            <hr class="mb-0 mt-2" />
+            <div v-if="workflow.readme" class="mt-2">
+                <Heading
+                    h2
+                    separator
+                    bold
+                    size="sm"
+                    :collapse="readmeShown ? 'open' : 'closed'"
+                    @click="readmeShown = !readmeShown">
+                    <span v-localize>Readme</span>
+                </Heading>
+                <!-- eslint-disable-next-line vue/no-v-html -->
+                <p v-if="readmeShown" v-html="renderMarkdown(workflow.readme)" />
+            </div>
+            <hr v-if="!workflow.readme" class="mb-0 mt-2" />
         </div>
     </div>
 </template>

lib/galaxy/schema/workflows.py

@@ -258,6 +258,16 @@ class StoredWorkflowDetailed(StoredWorkflowSummary):
         title="Email Hash",
         description="The hash of the email of the creator of this workflow",
     )
+    readme: Optional[str] = Field(
+        ...,
+        title="Readme",
+        description="The detailed markdown readme of the workflow.",
+    )
+    help: Optional[str] = Field(
+        ...,
+        title="Help",
+        description="The detailed help text for how to use the workflow and debug problems with it.",
+    )
     slug: Optional[str] = Field(
         ...,
         title="Slug",