From 93b5d88cb85f6ec9dc8bc9b683c2218853f64e25 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Fri, 22 Dec 2023 14:30:57 -0500
Subject: [PATCH] Refactor modal logic out of core MarkdownHelp component.

---
 .../components/Markdown/MarkdownEditor.vue    |   6 +-
 .../src/components/Markdown/MarkdownHelp.vue  | 228 ++++++++----------
 .../components/Markdown/MarkdownHelpModal.vue |  37 +++
 3 files changed, 144 insertions(+), 127 deletions(-)
 create mode 100644 client/src/components/Markdown/MarkdownHelpModal.vue

diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index d31f9e15820d..7ffa96365c61 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -33,7 +33,7 @@
                 </div>
             </div>
         </div>
-        <MarkdownHelp ref="help" :mode="mode" />
+        <MarkdownHelpModal ref="help" :mode="mode" />
     </div>
 </template>
 
@@ -46,7 +46,7 @@ import FlexPanel from "components/Panels/FlexPanel";
 import _ from "underscore";
 import Vue from "vue";
 
-import MarkdownHelp from "./MarkdownHelp";
+import MarkdownHelpModal from "./MarkdownHelpModal";
 import MarkdownToolBox from "./MarkdownToolBox";
 
 Vue.use(BootstrapVue);
@@ -60,7 +60,7 @@ export default {
         MarkdownToolBox,
         FlexPanel,
         FontAwesomeIcon,
-        MarkdownHelp,
+        MarkdownHelpModal,
     },
     props: {
         markdownText: {
diff --git a/client/src/components/Markdown/MarkdownHelp.vue b/client/src/components/Markdown/MarkdownHelp.vue
index c6f56a52a865..a74edd971892 100644
--- a/client/src/components/Markdown/MarkdownHelp.vue
+++ b/client/src/components/Markdown/MarkdownHelp.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed } from "vue";
 
 import DirectiveHelpSection from "./DirectiveHelpSection.vue";
 
@@ -9,163 +9,143 @@ interface MarkdownHelpProps {
 
 const props = defineProps<MarkdownHelpProps>();
 
-const show = ref(false);
 const page = computed(() => props.mode == "page");
-const title = computed(() => {
-    if (page.value) {
-        return "Markdown Help for Pages";
-    } else {
-        return "Markdown Help for Invocation Reports";
-    }
-});
-
-function showMarkdownHelp() {
-    show.value = true;
-}
-
-defineExpose({
-    showMarkdownHelp,
-});
 </script>
 
 <template>
-    <b-modal v-model="show" hide-footer>
-        <template v-slot:modal-title>
-            <h2 class="mb-0">{{ title }}</h2>
-        </template>
-        <div>
-            <h3>Overview</h3>
-            <p>
-                <span v-if="page"> This Markdown document will be used to generate your Galaxy Page. </span>
-                <span v-else> This Markdown document will be used to generate your workflow invocation report. </span>
-                This document should be Markdown with embedded commands for extracting and displaying Galaxy objects
-                and/or their metadata.
-            </p>
-
-            <p>
-                For an overview of standard Markdown visit the
-                <a href="https://commonmark.org/help/tutorial/">commonmark.org tutorial</a>.
-            </p>
-
-            <p>
-                The Galaxy extensions to Markdown are represented as code blocks, these blocks start with the line
-                <tt>```galaxy</tt> and end with the line <tt>```</tt> and have a command with arguments between these
-                lines.
-                <span v-if="page">
-                    These arguments reference your Galaxy objects such as datasets, jobs, and workflows.
-                </span>
-                <span v-else>
-                    These arguments reference parts of your workflow such as steps, inputs, and outputs by label in the
-                    middle.
-                </span>
-            </p>
-
-            <h3>History Contents Commands</h3>
-
-            <p>
-                These commands reference a dataset or dataset collection. For instance, the following examples would
-                display the dataset collection metadata and would embed a dataset into the document as an image.
-
-                <span v-if="page">
-                    These elements are referenced by object IDs used by the Galaxy API. The Markdown editor will let you
-                    pick objects graphically but they will be embedded into the Markdown with these IDs.
-                </span>
-
-                <span v-else>
-                    These elements are referenced by input or output labels for the workflow. If a dataset or collection
-                    you'd like to reference is not available for selection in the Markdown editor, be sure to assign a
-                    label to the object in the workflow editor first.
-                </span>
-            </p>
-
-            <pre v-if="page">
+    <div>
+        <h3>Overview</h3>
+        <p>
+            <span v-if="page"> This Markdown document will be used to generate your Galaxy Page. </span>
+            <span v-else> This Markdown document will be used to generate your workflow invocation report. </span>
+            This document should be Markdown with embedded commands for extracting and displaying Galaxy objects and/or
+            their metadata.
+        </p>
+
+        <p>
+            For an overview of standard Markdown visit the
+            <a href="https://commonmark.org/help/tutorial/">commonmark.org tutorial</a>.
+        </p>
+
+        <p>
+            The Galaxy extensions to Markdown are represented as code blocks, these blocks start with the line
+            <tt>```galaxy</tt> and end with the line <tt>```</tt> and have a command with arguments between these lines.
+            <span v-if="page">
+                These arguments reference your Galaxy objects such as datasets, jobs, and workflows.
+            </span>
+            <span v-else>
+                These arguments reference parts of your workflow such as steps, inputs, and outputs by label in the
+                middle.
+            </span>
+        </p>
+
+        <h3>History Contents Commands</h3>
+
+        <p>
+            These commands reference a dataset or dataset collection. For instance, the following examples would display
+            the dataset collection metadata and would embed a dataset into the document as an image.
+
+            <span v-if="page">
+                These elements are referenced by object IDs used by the Galaxy API. The Markdown editor will let you
+                pick objects graphically but they will be embedded into the Markdown with these IDs.
+            </span>
+
+            <span v-else>
+                These elements are referenced by input or output labels for the workflow. If a dataset or collection
+                you'd like to reference is not available for selection in the Markdown editor, be sure to assign a label
+                to the object in the workflow editor first.
+            </span>
+        </p>
+
+        <pre v-if="page">
 ```galaxy
 history_dataset_collection_display(history_dataset_collection_id=33b43b4e7093c91f)
 ```
 </pre
-            >
-            <pre v-else>
+        >
+        <pre v-else>
 ```galaxy
 history_dataset_collection_display(output=mapped_bams)
 ```
 </pre
-            >
+        >
 
-            <pre v-if="page">
+        <pre v-if="page">
 ```galaxy
 history_dataset_as_image(history_dataset_id=33b43b4e7093c91f)
 ```
 </pre
-            >
-            <pre v-else>
+        >
+        <pre v-else>
 ```galaxy
 history_dataset_as_image(output=normalized_result_plot)
 ```
 </pre
-            >
-
-            <DirectiveHelpSection
-                :mode="mode"
-                :directives="[
-                    'history_dataset_display',
-                    'history_dataset_collection_display',
-                    'history_dataset_as_image',
-                    'history_dataset_as_table',
-                    'history_dataset_peek',
-                    'history_dataset_info',
-                ]" />
-
-            <h3>Workflow Commands</h3>
-
-            <p v-if="page">
-                These commands reference a workflow by an object ID. The following example would display a
-                representation of the workflow in the resulting Galaxy Page:
-            </p>
-            <p v-else>These commands reference the current workflow and do not require an input for the most part.</p>
-
-            <pre v-if="page">
+        >
+
+        <DirectiveHelpSection
+            :mode="mode"
+            :directives="[
+                'history_dataset_display',
+                'history_dataset_collection_display',
+                'history_dataset_as_image',
+                'history_dataset_as_table',
+                'history_dataset_peek',
+                'history_dataset_info',
+            ]" />
+
+        <h3>Workflow Commands</h3>
+
+        <p v-if="page">
+            These commands reference a workflow by an object ID. The following example would display a representation of
+            the workflow in the resulting Galaxy Page:
+        </p>
+        <p v-else>These commands reference the current workflow and do not require an input for the most part.</p>
+
+        <pre v-if="page">
 ```galaxy
 workflow_display(workflow_id=33b43b4e7093c91f>)
 ```
 </pre
-            >
-            <pre v-else>
+        >
+        <pre v-else>
 ```galaxy
 workflow_display()
 ```
-            </pre>
-
-            <DirectiveHelpSection
-                :mode="mode"
-                :directives="['workflow_license', 'workflow_display', 'workflow_image', 'invocation_time']" />
-
-            <h3>Job Commands</h3>
-
-            <p v-if="page">
-                These commands reference a Galaxy job. For instance, the following example would show the job parameters
-                the job ID <tt>33b43b4e7093c91f</tt>.
-            </p>
-            <p v-else>
-                These commands reference a Galaxy job or collection of jobs associated with a labeled step in the
-                workflow. For instance, the following example would show the job parameters for the step with the label
-                <tt>mapping</tt>.
-            </p>
-
-            <pre v-if="page">
+            </pre
+        >
+
+        <DirectiveHelpSection
+            :mode="mode"
+            :directives="['workflow_license', 'workflow_display', 'workflow_image', 'invocation_time']" />
+
+        <h3>Job Commands</h3>
+
+        <p v-if="page">
+            These commands reference a Galaxy job. For instance, the following example would show the job parameters the
+            job ID <tt>33b43b4e7093c91f</tt>.
+        </p>
+        <p v-else>
+            These commands reference a Galaxy job or collection of jobs associated with a labeled step in the workflow.
+            For instance, the following example would show the job parameters for the step with the label
+            <tt>mapping</tt>.
+        </p>
+
+        <pre v-if="page">
 ```galaxy
 job_parameters(job_id=33b43b4e7093c91f)
 ```
 </pre
-            >
-            <pre v-else>
+        >
+        <pre v-else>
 ```galaxy
 job_parameters(step=mapping)
 ```
-            </pre>
+            </pre
+        >
 
-            <DirectiveHelpSection
-                :mode="mode"
-                :directives="['tool_stderr', 'tool_stdout', 'job_metrics', 'job_parameters']" />
-        </div>
-    </b-modal>
+        <DirectiveHelpSection
+            :mode="mode"
+            :directives="['tool_stderr', 'tool_stdout', 'job_metrics', 'job_parameters']" />
+    </div>
 </template>
diff --git a/client/src/components/Markdown/MarkdownHelpModal.vue b/client/src/components/Markdown/MarkdownHelpModal.vue
new file mode 100644
index 000000000000..b4e605262c2a
--- /dev/null
+++ b/client/src/components/Markdown/MarkdownHelpModal.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+import MarkdownHelp from "./MarkdownHelp.vue";
+
+interface MarkdownHelpModalProps {
+    mode: "report" | "page";
+}
+
+const props = defineProps<MarkdownHelpModalProps>();
+
+const show = ref(false);
+const title = computed(() => {
+    if (props.mode == "page") {
+        return "Markdown Help for Pages";
+    } else {
+        return "Markdown Help for Invocation Reports";
+    }
+});
+
+function showMarkdownHelp() {
+    show.value = true;
+}
+
+defineExpose({
+    showMarkdownHelp,
+});
+</script>
+
+<template>
+    <b-modal v-model="show" hide-footer>
+        <template v-slot:modal-title>
+            <h2 class="mb-0">{{ title }}</h2>
+        </template>
+        <MarkdownHelp :mode="mode" />
+    </b-modal>
+</template>