Merge pull request galaxyproject#20026 from ahmedhamidawan/move_readme_to_split_view

Show workflow README in split view next to the form inputs

Author: dannon

client/src/components/Workflow/Run/WorkflowHelpDisplay.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { BAlert, BCard } from "bootstrap-vue";
+
+import type { StoredWorkflowDetailed } from "@/api/workflows";
+import { useMarkdown } from "@/composables/markdown";
+
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+const props = defineProps<{
+    workflow?: StoredWorkflowDetailed;
+    loading?: boolean;
+}>();
+
+const { renderMarkdown } = useMarkdown({
+    openLinksInNewPage: true,
+    removeNewlinesAfterList: true,
+    increaseHeadingLevelBy: 2,
+});
+</script>
+
+<template>
+    <BAlert v-if="props.loading" variant="info" show>
+        <LoadingSpan message="Loading workflow help" />
+    </BAlert>
+    <BCard v-else-if="props.workflow" class="mx-1 flex-grow-1 overflow-auto">
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <p v-if="props.workflow.readme" class="container" v-html="renderMarkdown(props.workflow.readme)" />
+        <template v-if="props.workflow.help">
+            <hr v-if="props.workflow.readme" class="w-100" />
+            <h4 class="text-center">Workflow Help</h4>
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <p class="container" v-html="renderMarkdown(props.workflow.help)" />
+        </template>
+        <div class="py-2 text-center">- End of help -</div>
+    </BCard>
+</template>

client/src/components/Workflow/Run/WorkflowRunFormSimple.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import { faArrowRight, faCog, faInfoCircle, faSitemap } from "@fortawesome/free-solid-svg-icons";
+import { faReadme } from "@fortawesome/free-brands-svg-icons";
+import { faArrowRight, faCog, faSitemap } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BButtonGroup, BCard, BFormCheckbox, BOverlay } from "bootstrap-vue";
+import { BAlert, BButton, BButtonGroup, BFormCheckbox, BOverlay } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
 import { isWorkflowInput } from "@/components/Workflow/constants";
 import { useConfig } from "@/composables/config";
-import { useMarkdown } from "@/composables/markdown";
 import { usePersistentToggle } from "@/composables/persistentToggle";
 import { usePanels } from "@/composables/usePanels";
+import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
 import { provideScopedWorkflowStores } from "@/composables/workflowStores";
 import { useHistoryStore } from "@/stores/historyStore";
 import { errorMessageAsString } from "@/utils/simple-error";
@@ -18,6 +19,7 @@ import { invokeWorkflow } from "./services";
 
 import WorkflowAnnotation from "../WorkflowAnnotation.vue";
 import WorkflowNavigationTitle from "../WorkflowNavigationTitle.vue";
+import WorkflowHelpDisplay from "./WorkflowHelpDisplay.vue";
 import WorkflowRunGraph from "./WorkflowRunGraph.vue";
 import WorkflowStorageConfiguration from "./WorkflowStorageConfiguration.vue";
 import Heading from "@/components/Common/Heading.vue";
@@ -60,22 +62,29 @@ const splitObjectStore = ref(false);
 const preferredObjectStoreId = ref<string | null>(null);
 const preferredIntermediateObjectStoreId = ref<string | null>(null);
 const waitingForRequest = ref(false);
-const showRightPanel = ref<"help" | "graph" | null>(!showPanels.value && props.model.runData.help ? "help" : null);
+const showRightPanel = ref<"help" | "graph" | null>(null);
 
 const showGraph = computed(() => showRightPanel.value === "graph");
 const showHelp = computed(() => showRightPanel.value === "help");
 
-const { renderMarkdown } = useMarkdown({
-    openLinksInNewPage: true,
-    removeNewlinesAfterList: true,
-    increaseHeadingLevelBy: 2,
-});
-
 const { toggled: showRuntimeSettingsPanel, toggle: toggleRuntimeSettings } =
     usePersistentToggle("workflow-run-settings-panel");
 
 const { changingCurrentHistory } = storeToRefs(useHistoryStore());
 
+// Workflow REAME/help panel setup
+const { workflow, loading: workflowLoading } = useWorkflowInstance(props.model.runData.workflow_id);
+watch(
+    () => workflow.value,
+    (workflow) => {
+        if (workflow) {
+            // once the workflow loads, and if we are not showing panels, show the help if it exists by default
+            showRightPanel.value = !showPanels.value && workflow.readme ? "help" : null;
+        }
+    },
+    { immediate: true }
+);
+
 watch(
     () => showGraph.value,
     (show) => {
@@ -233,14 +242,14 @@ async function onExecute() {
                                 <FontAwesomeIcon :icon="faSitemap" fixed-width />
                             </BButton>
                             <BButton
-                                v-if="model.runData.help"
+                                v-if="workflow?.readme || workflow?.help"
                                 v-b-tooltip.hover.noninteractive.html
                                 size="sm"
                                 :title="!showHelp ? 'Show workflow help' : 'Hide workflow help'"
                                 variant="link"
                                 :pressed="showHelp"
                                 @click="showRightPanel = showHelp ? null : 'help'">
-                                <FontAwesomeIcon :icon="faInfoCircle" fixed-width />
+                                <FontAwesomeIcon :icon="faReadme" fixed-width />
                             </BButton>
                             <BButton
                                 v-b-tooltip.hover.noninteractive
@@ -312,7 +321,11 @@ async function onExecute() {
             </div>
         </div>
 
-        <WorkflowAnnotation :workflow-id="model.runData.workflow_id" :history-id="model.historyId" show-details />
+        <WorkflowAnnotation
+            :workflow-id="model.runData.workflow_id"
+            :history-id="model.historyId"
+            show-details
+            :hide-hr="Boolean(showRightPanel)" />
 
         <div class="overflow-auto h-100">
             <div class="d-flex h-100">
@@ -347,11 +360,7 @@ async function onExecute() {
                         :form-inputs="formInputs" />
                     <div v-else-if="showHelp" class="d-flex flex-column">
                         <Heading class="sticky-top" h2 separator bold size="sm"> Help </Heading>
-                        <BCard class="mx-1 flex-grow-1 overflow-auto">
-                            <!-- eslint-disable-next-line vue/no-v-html -->
-                            <p class="container" v-html="renderMarkdown(model.runData.help)" />
-                            <div class="py-2 text-center">- End of help -</div>
-                        </BCard>
+                        <WorkflowHelpDisplay :workflow="workflow" :loading="workflowLoading" />
                     </div>
                 </div>
             </div>

client/src/components/Workflow/WorkflowAnnotation.vue

@@ -3,13 +3,11 @@ import { faClock } from "@fortawesome/free-regular-svg-icons";
 import { faExclamation, faHdd } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BBadge } from "bootstrap-vue";
-import { computed, ref } from "vue";
+import { computed } from "vue";
 
-import { useMarkdown } from "@/composables/markdown";
 import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
 import { useHistoryStore } from "@/stores/historyStore";
 
-import Heading from "../Common/Heading.vue";
 import TextSummary from "../Common/TextSummary.vue";
 import SwitchToHistoryLink from "../History/SwitchToHistoryLink.vue";
 import StatelessTags from "../TagsMultiselect/StatelessTags.vue";
@@ -22,6 +20,7 @@ interface Props {
     invocationUpdateTime?: string;
     historyId: string;
     showDetails?: boolean;
+    hideHr?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -45,14 +44,6 @@ 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>
@@ -91,20 +82,7 @@ const { renderMarkdown } = useMarkdown({
         <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" />
-            <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" />
+            <hr v-if="!props.hideHr" class="mb-0 mt-2" />
         </div>
     </div>
 </template>