From 3c41bfc3613482fa0dd18543519f26accb724439 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 25 Dec 2022 10:54:55 -0500
Subject: [PATCH 01/10] Add shared arguments for shared markdown features

---
 lib/galaxy/managers/markdown_parse.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/galaxy/managers/markdown_parse.py b/lib/galaxy/managers/markdown_parse.py
index 7b2d4c0cdb97..0e1b75311e41 100644
--- a/lib/galaxy/managers/markdown_parse.py
+++ b/lib/galaxy/managers/markdown_parse.py
@@ -24,6 +24,7 @@ class DynamicArguments:
 
 
 DYNAMIC_ARGUMENTS = DynamicArguments()
+SHARED_ARGUMENTS: List[str] = ["collapsed"]
 VALID_ARGUMENTS: Dict[str, Union[List[str], DynamicArguments]] = {
     "history_link": ["history_id"],
     "history_dataset_display": ["input", "output", "history_dataset_id"],
@@ -73,7 +74,7 @@ def invalid_line(template, line_no, **kwd):
     def _validate_arg(arg_str, valid_args, line_no):
         if arg_str is not None:
             arg_name = arg_str.split("=", 1)[0].strip()
-            if arg_name not in valid_args:
+            if arg_name not in valid_args and arg_name not in SHARED_ARGUMENTS:
                 invalid_line("Invalid argument to Galaxy directive [{argument}]", line_no, argument=arg_name)
 
     expecting_container_close_for = None

From dd287fe5e2566648d3e55bf88818f6f190a01c4a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 25 Dec 2022 11:15:44 -0500
Subject: [PATCH 02/10] Separate out elements into sub component

---
 client/src/components/Markdown/Markdown.vue   |  82 +++-----------
 .../components/Markdown/MarkdownElement.vue   | 107 ++++++++++++++++++
 2 files changed, 122 insertions(+), 67 deletions(-)
 create mode 100644 client/src/components/Markdown/MarkdownElement.vue

diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index 41b1d47ed641..1eeaecf0309e 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -41,47 +41,20 @@
             </div>
             <div v-for="(obj, index) in markdownObjects" :key="index" class="markdown-components">
                 <p v-if="obj.name == 'default'" class="text-justify m-2" v-html="obj.content" />
-                <div v-else-if="obj.name == 'generate_galaxy_version'" class="galaxy-version">
-                    <pre><code>{{ getVersion }}</code></pre>
-                </div>
-                <div v-else-if="obj.name == 'generate_time'" class="galaxy-time">
-                    <pre><code>{{ getTime }}</code></pre>
+                <div v-else>
+                    <div v-if="obj.args.collapsed !== undefined">
+                        COLLAPSIBLE
+                    </div>
+                    <markdown-element
+                        :obj="obj"
+                        :datasets="historyDatasets"
+                        :collections="historyDatasetCollections"
+                        :histories="histories"
+                        :invocations="invocations"
+                        :jobs="jobs"
+                        :workflows="workflows"
+                    />
                 </div>
-                <HistoryLink v-else-if="obj.name == 'history_link'" :args="obj.args" :histories="histories" />
-                <HistoryDatasetAsImage v-else-if="obj.name == 'history_dataset_as_image'" :args="obj.args" />
-                <HistoryDatasetLink v-else-if="obj.name == 'history_dataset_link'" :args="obj.args" />
-                <HistoryDatasetIndex v-else-if="obj.name == 'history_dataset_index'" :args="obj.args" />
-                <InvocationTime v-else-if="obj.name == 'invocation_time'" :args="obj.args" :invocations="invocations" />
-                <JobMetrics v-else-if="obj.name == 'job_metrics'" :args="obj.args" />
-                <JobParameters v-else-if="obj.name == 'job_parameters'" :args="obj.args" />
-                <WorkflowDisplay v-else-if="obj.name == 'workflow_display'" :args="obj.args" :workflows="workflows" />
-                <Visualization v-else-if="obj.name == 'visualization'" :args="obj.args" />
-                <HistoryDatasetCollectionDisplay
-                    v-else-if="obj.name == 'history_dataset_collection_display'"
-                    :args="obj.args"
-                    :collections="historyDatasetCollections" />
-                <ToolStd
-                    v-else-if="['tool_stdout', 'tool_stderr'].includes(obj.name)"
-                    :args="obj.args"
-                    :name="obj.name"
-                    :jobs="jobs" />
-                <HistoryDatasetDisplay
-                    v-else-if="['history_dataset_embedded', 'history_dataset_display'].includes(obj.name)"
-                    :args="obj.args"
-                    :datasets="historyDatasets"
-                    :embedded="obj.name == 'history_dataset_embedded'" />
-                <HistoryDatasetDetails
-                    v-else-if="
-                        [
-                            'history_dataset_name',
-                            'history_dataset_info',
-                            'history_dataset_peek',
-                            'history_dataset_type',
-                        ].includes(obj.name)
-                    "
-                    :name="obj.name"
-                    :args="obj.args"
-                    :datasets="historyDatasets" />
             </div>
         </div>
     </div>
@@ -98,20 +71,8 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faDownload, faEdit } from "@fortawesome/free-solid-svg-icons";
 
 import LoadingSpan from "components/LoadingSpan";
-import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage";
-import HistoryDatasetDisplay from "./Elements/HistoryDatasetDisplay";
-import HistoryDatasetLink from "./Elements/HistoryDatasetLink";
-import HistoryDatasetIndex from "./Elements/HistoryDatasetIndex";
-import HistoryDatasetCollectionDisplay from "./Elements/HistoryDatasetCollection/CollectionDisplay";
-import HistoryDatasetDetails from "./Elements/HistoryDatasetDetails";
-import HistoryLink from "./Elements/HistoryLink";
-import InvocationTime from "./Elements/InvocationTime";
-import JobMetrics from "./Elements/JobMetrics";
-import JobParameters from "./Elements/JobParameters";
-import ToolStd from "./Elements/ToolStd";
-import WorkflowDisplay from "./Elements/Workflow/WorkflowDisplay";
-import Visualization from "./Elements/Visualization";
 import StsDownloadButton from "components/StsDownloadButton";
+import MarkdownElement from "./MarkdownElement.vue";
 
 const FUNCTION_VALUE_REGEX = `\\s*(?:[\\w_\\-]+|\\"[^\\"]+\\"|\\'[^\\']+\\')\\s*`;
 const FUNCTION_CALL = `\\s*[\\w\\|]+\\s*=` + FUNCTION_VALUE_REGEX;
@@ -132,20 +93,7 @@ library.add(faDownload, faEdit);
 export default {
     store: store,
     components: {
-        HistoryDatasetDetails,
-        HistoryDatasetAsImage,
-        HistoryDatasetCollectionDisplay,
-        HistoryDatasetDisplay,
-        HistoryDatasetIndex,
-        HistoryDatasetLink,
-        HistoryLink,
-        JobMetrics,
-        JobParameters,
-        LoadingSpan,
-        ToolStd,
-        WorkflowDisplay,
-        Visualization,
-        InvocationTime,
+        MarkdownElement,
         FontAwesomeIcon,
         StsDownloadButton,
     },
diff --git a/client/src/components/Markdown/MarkdownElement.vue b/client/src/components/Markdown/MarkdownElement.vue
new file mode 100644
index 000000000000..fd53da69737b
--- /dev/null
+++ b/client/src/components/Markdown/MarkdownElement.vue
@@ -0,0 +1,107 @@
+<template>
+    <div v-if="obj.name == 'generate_galaxy_version'" class="galaxy-version">
+        <pre><code>{{ getVersion }}</code></pre>
+    </div>
+    <div v-else-if="obj.name == 'generate_time'" class="galaxy-time">
+        <pre><code>{{ getTime }}</code></pre>
+    </div>
+    <HistoryLink v-else-if="obj.name == 'history_link'" :args="obj.args" :histories="histories" />
+    <HistoryDatasetAsImage v-else-if="obj.name == 'history_dataset_as_image'" :args="obj.args" />
+    <HistoryDatasetLink v-else-if="obj.name == 'history_dataset_link'" :args="obj.args" />
+    <HistoryDatasetIndex v-else-if="obj.name == 'history_dataset_index'" :args="obj.args" />
+    <InvocationTime v-else-if="obj.name == 'invocation_time'" :args="obj.args" :invocations="invocations" />
+    <JobMetrics v-else-if="obj.name == 'job_metrics'" :args="obj.args" />
+    <JobParameters v-else-if="obj.name == 'job_parameters'" :args="obj.args" />
+    <WorkflowDisplay v-else-if="obj.name == 'workflow_display'" :args="obj.args" :workflows="workflows" />
+    <Visualization v-else-if="obj.name == 'visualization'" :args="obj.args" />
+    <HistoryDatasetCollectionDisplay
+        v-else-if="obj.name == 'history_dataset_collection_display'"
+        :args="obj.args"
+        :collections="collections" />
+    <ToolStd
+        v-else-if="['tool_stdout', 'tool_stderr'].includes(obj.name)"
+        :args="obj.args"
+        :name="obj.name"
+        :jobs="jobs" />
+    <HistoryDatasetDisplay
+        v-else-if="['history_dataset_embedded', 'history_dataset_display'].includes(obj.name)"
+        :args="obj.args"
+        :datasets="datasets"
+        :embedded="obj.name == 'history_dataset_embedded'" />
+    <HistoryDatasetDetails
+        v-else-if="
+            [
+                'history_dataset_name',
+                'history_dataset_info',
+                'history_dataset_peek',
+                'history_dataset_type',
+            ].includes(obj.name)
+        "
+        :name="obj.name"
+        :args="obj.args"
+        :datasets="datasets" />
+</template>
+
+<script>
+import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage";
+import HistoryDatasetDisplay from "./Elements/HistoryDatasetDisplay";
+import HistoryDatasetLink from "./Elements/HistoryDatasetLink";
+import HistoryDatasetIndex from "./Elements/HistoryDatasetIndex";
+import HistoryDatasetCollectionDisplay from "./Elements/HistoryDatasetCollection/CollectionDisplay";
+import HistoryDatasetDetails from "./Elements/HistoryDatasetDetails";
+import HistoryLink from "./Elements/HistoryLink";
+import InvocationTime from "./Elements/InvocationTime";
+import JobMetrics from "./Elements/JobMetrics";
+import JobParameters from "./Elements/JobParameters";
+import ToolStd from "./Elements/ToolStd";
+import WorkflowDisplay from "./Elements/Workflow/WorkflowDisplay";
+import Visualization from "./Elements/Visualization";
+
+export default {
+    components: {
+        HistoryDatasetDetails,
+        HistoryDatasetAsImage,
+        HistoryDatasetCollectionDisplay,
+        HistoryDatasetDisplay,
+        HistoryDatasetIndex,
+        HistoryDatasetLink,
+        HistoryLink,
+        InvocationTime,
+        JobMetrics,
+        JobParameters,
+        WorkflowDisplay,
+        ToolStd,
+        Visualization,
+    },
+    props: {
+        obj: {
+            type: Object,
+            default: null,
+        },
+        datasets: {
+            type: Object,
+            default: null,
+        },
+        collections: {
+            type: Object,
+            default: null,
+        },
+        histories: {
+            type: Object,
+            default: null,
+        },
+        invocations: {
+            type: Object,
+            default: null,
+        },
+        jobs: {
+            type: Object,
+            default: null,
+        },
+        workflows: {
+            type: Object,
+            default: null,
+        },
+    },
+};
+</script>

From a6f6de0a21df3bba86694cce061bc4387bf0d82d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 25 Dec 2022 11:34:15 -0500
Subject: [PATCH 03/10] Add wrappers to accommodate collapsible

---
 client/src/components/Markdown/Markdown.vue   | 36 +++++-----
 .../components/Markdown/MarkdownContainer.vue | 67 +++++++++++++++++++
 2 files changed, 83 insertions(+), 20 deletions(-)
 create mode 100644 client/src/components/Markdown/MarkdownContainer.vue

diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index 1eeaecf0309e..a80b76a37d60 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -41,20 +41,16 @@
             </div>
             <div v-for="(obj, index) in markdownObjects" :key="index" class="markdown-components">
                 <p v-if="obj.name == 'default'" class="text-justify m-2" v-html="obj.content" />
-                <div v-else>
-                    <div v-if="obj.args.collapsed !== undefined">
-                        COLLAPSIBLE
-                    </div>
-                    <markdown-element
-                        :obj="obj"
-                        :datasets="historyDatasets"
-                        :collections="historyDatasetCollections"
-                        :histories="histories"
-                        :invocations="invocations"
-                        :jobs="jobs"
-                        :workflows="workflows"
-                    />
-                </div>
+                <markdown-container
+                    v-else
+                    :obj="obj"
+                    :datasets="datasets"
+                    :collections="collections"
+                    :histories="histories"
+                    :invocations="invocations"
+                    :jobs="jobs"
+                    :workflows="workflows"
+                />
             </div>
         </div>
     </div>
@@ -72,7 +68,7 @@ import { faDownload, faEdit } from "@fortawesome/free-solid-svg-icons";
 
 import LoadingSpan from "components/LoadingSpan";
 import StsDownloadButton from "components/StsDownloadButton";
-import MarkdownElement from "./MarkdownElement.vue";
+import MarkdownContainer from "./MarkdownContainer.vue";
 
 const FUNCTION_VALUE_REGEX = `\\s*(?:[\\w_\\-]+|\\"[^\\"]+\\"|\\'[^\\']+\\')\\s*`;
 const FUNCTION_CALL = `\\s*[\\w\\|]+\\s*=` + FUNCTION_VALUE_REGEX;
@@ -93,7 +89,7 @@ library.add(faDownload, faEdit);
 export default {
     store: store,
     components: {
-        MarkdownElement,
+        MarkdownContainer,
         FontAwesomeIcon,
         StsDownloadButton,
     },
@@ -123,9 +119,9 @@ export default {
         return {
             markdownObjects: [],
             markdownErrors: [],
-            historyDatasets: {},
+            datasets: {},
             histories: {},
-            historyDatasetCollections: {},
+            collections: {},
             workflows: {},
             jobs: {},
             invocations: {},
@@ -169,9 +165,9 @@ export default {
                 const markdown = config.content || config.markdown;
                 this.markdownErrors = config.errors || [];
                 this.markdownObjects = this.splitMarkdown(markdown);
-                this.historyDatasets = config.history_datasets || {};
+                this.datasets = config.history_datasets || {};
                 this.histories = config.histories || {};
-                this.historyDatasetCollections = config.history_dataset_collections || {};
+                this.collections = config.history_dataset_collections || {};
                 this.workflows = config.workflows || {};
                 this.jobs = config.jobs || {};
                 this.invocations = config.invocations || {};
diff --git a/client/src/components/Markdown/MarkdownContainer.vue b/client/src/components/Markdown/MarkdownContainer.vue
new file mode 100644
index 000000000000..1c7461df75f6
--- /dev/null
+++ b/client/src/components/Markdown/MarkdownContainer.vue
@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <b-button v-if="isCollapsible" class="m-1" @click="toggle != toggle">
+            Toggle Collapse
+        </b-button>
+        <b-collapsible v-model="toggle">
+            <markdown-element
+                :obj="obj"
+                :datasets="datasets"
+                :collections="collections"
+                :histories="histories"
+                :invocations="invocations"
+                :jobs="jobs"
+                :workflows="workflows"
+            />
+        </b-collapsible>
+    </div>
+</template>
+
+<script>
+import MarkdownElement from "./MarkdownElement.vue";
+export default {
+    components: {
+        MarkdownElement,
+    },
+    props: {
+        obj: {
+            type: Object,
+            default: null,
+        },
+        datasets: {
+            type: Object,
+            default: null,
+        },
+        collections: {
+            type: Object,
+            default: null,
+        },
+        histories: {
+            type: Object,
+            default: null,
+        },
+        invocations: {
+            type: Object,
+            default: null,
+        },
+        jobs: {
+            type: Object,
+            default: null,
+        },
+        workflows: {
+            type: Object,
+            default: null,
+        },
+    },
+    data() {
+        return {
+            toggle: false,
+        }
+    },
+    computed: {
+        isCollapsible() {
+            return this.obj.args.collapsed !== undefined;
+        },
+    },
+};
+</script>

From c64f31ebf092cfaddafded40eb1a7f9d9348c6f2 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 25 Dec 2022 11:49:27 -0500
Subject: [PATCH 04/10] Use consistent naming, parse collapse title as shared
 markdown attribute

---
 client/src/components/Markdown/Markdown.vue   |  3 +--
 .../components/Markdown/MarkdownContainer.vue | 20 ++++++++++---------
 .../components/Markdown/MarkdownElement.vue   |  9 +++------
 lib/galaxy/managers/markdown_parse.py         |  2 +-
 4 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index a80b76a37d60..11b544fd569b 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -49,8 +49,7 @@
                     :histories="histories"
                     :invocations="invocations"
                     :jobs="jobs"
-                    :workflows="workflows"
-                />
+                    :workflows="workflows" />
             </div>
         </div>
     </div>
diff --git a/client/src/components/Markdown/MarkdownContainer.vue b/client/src/components/Markdown/MarkdownContainer.vue
index 1c7461df75f6..821acf2cfe40 100644
--- a/client/src/components/Markdown/MarkdownContainer.vue
+++ b/client/src/components/Markdown/MarkdownContainer.vue
@@ -1,9 +1,9 @@
 <template>
     <div>
-        <b-button v-if="isCollapsible" class="m-1" @click="toggle != toggle">
-            Toggle Collapse
-        </b-button>
-        <b-collapsible v-model="toggle">
+        <b-link v-if="isCollapsible" class="font-weight-bold" @click="toggle = !toggle">
+            {{ obj.args.collapse }}
+        </b-link>
+        <b-collapse :visible="isVisible">
             <markdown-element
                 :obj="obj"
                 :datasets="datasets"
@@ -11,9 +11,8 @@
                 :histories="histories"
                 :invocations="invocations"
                 :jobs="jobs"
-                :workflows="workflows"
-            />
-        </b-collapsible>
+                :workflows="workflows" />
+        </b-collapse>
     </div>
 </template>
 
@@ -56,11 +55,14 @@ export default {
     data() {
         return {
             toggle: false,
-        }
+        };
     },
     computed: {
+        isVisible() {
+            return !this.isCollapsible || this.toggle;
+        },
         isCollapsible() {
-            return this.obj.args.collapsed !== undefined;
+            return this.obj.args.collapse !== undefined;
         },
     },
 };
diff --git a/client/src/components/Markdown/MarkdownElement.vue b/client/src/components/Markdown/MarkdownElement.vue
index fd53da69737b..0b0f60063d64 100644
--- a/client/src/components/Markdown/MarkdownElement.vue
+++ b/client/src/components/Markdown/MarkdownElement.vue
@@ -30,12 +30,9 @@
         :embedded="obj.name == 'history_dataset_embedded'" />
     <HistoryDatasetDetails
         v-else-if="
-            [
-                'history_dataset_name',
-                'history_dataset_info',
-                'history_dataset_peek',
-                'history_dataset_type',
-            ].includes(obj.name)
+            ['history_dataset_name', 'history_dataset_info', 'history_dataset_peek', 'history_dataset_type'].includes(
+                obj.name
+            )
         "
         :name="obj.name"
         :args="obj.args"
diff --git a/lib/galaxy/managers/markdown_parse.py b/lib/galaxy/managers/markdown_parse.py
index 0e1b75311e41..a9b61ddb73ca 100644
--- a/lib/galaxy/managers/markdown_parse.py
+++ b/lib/galaxy/managers/markdown_parse.py
@@ -24,7 +24,7 @@ class DynamicArguments:
 
 
 DYNAMIC_ARGUMENTS = DynamicArguments()
-SHARED_ARGUMENTS: List[str] = ["collapsed"]
+SHARED_ARGUMENTS: List[str] = ["collapse"]
 VALID_ARGUMENTS: Dict[str, Union[List[str], DynamicArguments]] = {
     "history_link": ["history_id"],
     "history_dataset_display": ["input", "output", "history_dataset_id"],

From bf7d153f9af550d0023c9d40a274f8accc73bfdf Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 25 Dec 2022 11:56:25 -0500
Subject: [PATCH 05/10] Consolidate components

---
 .../components/Markdown/MarkdownContainer.vue |  72 ++++++++++--
 .../components/Markdown/MarkdownElement.vue   | 104 ------------------
 2 files changed, 63 insertions(+), 113 deletions(-)
 delete mode 100644 client/src/components/Markdown/MarkdownElement.vue

diff --git a/client/src/components/Markdown/MarkdownContainer.vue b/client/src/components/Markdown/MarkdownContainer.vue
index 821acf2cfe40..1a6d81e0afa3 100644
--- a/client/src/components/Markdown/MarkdownContainer.vue
+++ b/client/src/components/Markdown/MarkdownContainer.vue
@@ -4,23 +4,77 @@
             {{ obj.args.collapse }}
         </b-link>
         <b-collapse :visible="isVisible">
-            <markdown-element
-                :obj="obj"
+            <div v-if="obj.name == 'generate_galaxy_version'" class="galaxy-version">
+                <pre><code>{{ getVersion }}</code></pre>
+            </div>
+            <div v-else-if="obj.name == 'generate_time'" class="galaxy-time">
+                <pre><code>{{ getTime }}</code></pre>
+            </div>
+            <HistoryLink v-else-if="obj.name == 'history_link'" :args="obj.args" :histories="histories" />
+            <HistoryDatasetAsImage v-else-if="obj.name == 'history_dataset_as_image'" :args="obj.args" />
+            <HistoryDatasetLink v-else-if="obj.name == 'history_dataset_link'" :args="obj.args" />
+            <HistoryDatasetIndex v-else-if="obj.name == 'history_dataset_index'" :args="obj.args" />
+            <InvocationTime v-else-if="obj.name == 'invocation_time'" :args="obj.args" :invocations="invocations" />
+            <JobMetrics v-else-if="obj.name == 'job_metrics'" :args="obj.args" />
+            <JobParameters v-else-if="obj.name == 'job_parameters'" :args="obj.args" />
+            <WorkflowDisplay v-else-if="obj.name == 'workflow_display'" :args="obj.args" :workflows="workflows" />
+            <Visualization v-else-if="obj.name == 'visualization'" :args="obj.args" />
+            <HistoryDatasetCollectionDisplay
+                v-else-if="obj.name == 'history_dataset_collection_display'"
+                :args="obj.args"
+                :collections="collections" />
+            <ToolStd
+                v-else-if="['tool_stdout', 'tool_stderr'].includes(obj.name)"
+                :args="obj.args"
+                :name="obj.name"
+                :jobs="jobs" />
+            <HistoryDatasetDisplay
+                v-else-if="['history_dataset_embedded', 'history_dataset_display'].includes(obj.name)"
+                :args="obj.args"
                 :datasets="datasets"
-                :collections="collections"
-                :histories="histories"
-                :invocations="invocations"
-                :jobs="jobs"
-                :workflows="workflows" />
+                :embedded="obj.name == 'history_dataset_embedded'" />
+            <HistoryDatasetDetails
+                v-else-if="
+                    ['history_dataset_name', 'history_dataset_info', 'history_dataset_peek', 'history_dataset_type'].includes(
+                        obj.name
+                    )
+                "
+                :name="obj.name"
+                :args="obj.args"
+                :datasets="datasets" />
         </b-collapse>
     </div>
 </template>
 
 <script>
-import MarkdownElement from "./MarkdownElement.vue";
+import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage";
+import HistoryDatasetDisplay from "./Elements/HistoryDatasetDisplay";
+import HistoryDatasetLink from "./Elements/HistoryDatasetLink";
+import HistoryDatasetIndex from "./Elements/HistoryDatasetIndex";
+import HistoryDatasetCollectionDisplay from "./Elements/HistoryDatasetCollection/CollectionDisplay";
+import HistoryDatasetDetails from "./Elements/HistoryDatasetDetails";
+import HistoryLink from "./Elements/HistoryLink";
+import InvocationTime from "./Elements/InvocationTime";
+import JobMetrics from "./Elements/JobMetrics";
+import JobParameters from "./Elements/JobParameters";
+import ToolStd from "./Elements/ToolStd";
+import WorkflowDisplay from "./Elements/Workflow/WorkflowDisplay";
+import Visualization from "./Elements/Visualization";
 export default {
     components: {
-        MarkdownElement,
+        HistoryDatasetDetails,
+        HistoryDatasetAsImage,
+        HistoryDatasetCollectionDisplay,
+        HistoryDatasetDisplay,
+        HistoryDatasetIndex,
+        HistoryDatasetLink,
+        HistoryLink,
+        InvocationTime,
+        JobMetrics,
+        JobParameters,
+        WorkflowDisplay,
+        ToolStd,
+        Visualization,
     },
     props: {
         obj: {
diff --git a/client/src/components/Markdown/MarkdownElement.vue b/client/src/components/Markdown/MarkdownElement.vue
deleted file mode 100644
index 0b0f60063d64..000000000000
--- a/client/src/components/Markdown/MarkdownElement.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-    <div v-if="obj.name == 'generate_galaxy_version'" class="galaxy-version">
-        <pre><code>{{ getVersion }}</code></pre>
-    </div>
-    <div v-else-if="obj.name == 'generate_time'" class="galaxy-time">
-        <pre><code>{{ getTime }}</code></pre>
-    </div>
-    <HistoryLink v-else-if="obj.name == 'history_link'" :args="obj.args" :histories="histories" />
-    <HistoryDatasetAsImage v-else-if="obj.name == 'history_dataset_as_image'" :args="obj.args" />
-    <HistoryDatasetLink v-else-if="obj.name == 'history_dataset_link'" :args="obj.args" />
-    <HistoryDatasetIndex v-else-if="obj.name == 'history_dataset_index'" :args="obj.args" />
-    <InvocationTime v-else-if="obj.name == 'invocation_time'" :args="obj.args" :invocations="invocations" />
-    <JobMetrics v-else-if="obj.name == 'job_metrics'" :args="obj.args" />
-    <JobParameters v-else-if="obj.name == 'job_parameters'" :args="obj.args" />
-    <WorkflowDisplay v-else-if="obj.name == 'workflow_display'" :args="obj.args" :workflows="workflows" />
-    <Visualization v-else-if="obj.name == 'visualization'" :args="obj.args" />
-    <HistoryDatasetCollectionDisplay
-        v-else-if="obj.name == 'history_dataset_collection_display'"
-        :args="obj.args"
-        :collections="collections" />
-    <ToolStd
-        v-else-if="['tool_stdout', 'tool_stderr'].includes(obj.name)"
-        :args="obj.args"
-        :name="obj.name"
-        :jobs="jobs" />
-    <HistoryDatasetDisplay
-        v-else-if="['history_dataset_embedded', 'history_dataset_display'].includes(obj.name)"
-        :args="obj.args"
-        :datasets="datasets"
-        :embedded="obj.name == 'history_dataset_embedded'" />
-    <HistoryDatasetDetails
-        v-else-if="
-            ['history_dataset_name', 'history_dataset_info', 'history_dataset_peek', 'history_dataset_type'].includes(
-                obj.name
-            )
-        "
-        :name="obj.name"
-        :args="obj.args"
-        :datasets="datasets" />
-</template>
-
-<script>
-import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage";
-import HistoryDatasetDisplay from "./Elements/HistoryDatasetDisplay";
-import HistoryDatasetLink from "./Elements/HistoryDatasetLink";
-import HistoryDatasetIndex from "./Elements/HistoryDatasetIndex";
-import HistoryDatasetCollectionDisplay from "./Elements/HistoryDatasetCollection/CollectionDisplay";
-import HistoryDatasetDetails from "./Elements/HistoryDatasetDetails";
-import HistoryLink from "./Elements/HistoryLink";
-import InvocationTime from "./Elements/InvocationTime";
-import JobMetrics from "./Elements/JobMetrics";
-import JobParameters from "./Elements/JobParameters";
-import ToolStd from "./Elements/ToolStd";
-import WorkflowDisplay from "./Elements/Workflow/WorkflowDisplay";
-import Visualization from "./Elements/Visualization";
-
-export default {
-    components: {
-        HistoryDatasetDetails,
-        HistoryDatasetAsImage,
-        HistoryDatasetCollectionDisplay,
-        HistoryDatasetDisplay,
-        HistoryDatasetIndex,
-        HistoryDatasetLink,
-        HistoryLink,
-        InvocationTime,
-        JobMetrics,
-        JobParameters,
-        WorkflowDisplay,
-        ToolStd,
-        Visualization,
-    },
-    props: {
-        obj: {
-            type: Object,
-            default: null,
-        },
-        datasets: {
-            type: Object,
-            default: null,
-        },
-        collections: {
-            type: Object,
-            default: null,
-        },
-        histories: {
-            type: Object,
-            default: null,
-        },
-        invocations: {
-            type: Object,
-            default: null,
-        },
-        jobs: {
-            type: Object,
-            default: null,
-        },
-        workflows: {
-            type: Object,
-            default: null,
-        },
-    },
-};
-</script>

From f778a4230af988d2545f032a905ff6474f104f4e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 26 Dec 2022 05:46:21 -0500
Subject: [PATCH 06/10] Resolve loading span

---
 client/src/components/Markdown/Markdown.vue          | 7 ++++---
 client/src/components/Markdown/MarkdownContainer.vue | 9 ++++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index 11b544fd569b..fcd2006fba98 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="markdown-wrapper">
-        <LoadingSpan v-if="loading" />
+        <loading-span v-if="loading" />
         <div v-else>
             <div>
                 <sts-download-button
@@ -65,8 +65,8 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faDownload, faEdit } from "@fortawesome/free-solid-svg-icons";
 
-import LoadingSpan from "components/LoadingSpan";
-import StsDownloadButton from "components/StsDownloadButton";
+import LoadingSpan from "components/LoadingSpan.vue";
+import StsDownloadButton from "components/StsDownloadButton.vue";
 import MarkdownContainer from "./MarkdownContainer.vue";
 
 const FUNCTION_VALUE_REGEX = `\\s*(?:[\\w_\\-]+|\\"[^\\"]+\\"|\\'[^\\']+\\')\\s*`;
@@ -90,6 +90,7 @@ export default {
     components: {
         MarkdownContainer,
         FontAwesomeIcon,
+        LoadingSpan,
         StsDownloadButton,
     },
     props: {
diff --git a/client/src/components/Markdown/MarkdownContainer.vue b/client/src/components/Markdown/MarkdownContainer.vue
index 1a6d81e0afa3..01731ec47f20 100644
--- a/client/src/components/Markdown/MarkdownContainer.vue
+++ b/client/src/components/Markdown/MarkdownContainer.vue
@@ -35,9 +35,12 @@
                 :embedded="obj.name == 'history_dataset_embedded'" />
             <HistoryDatasetDetails
                 v-else-if="
-                    ['history_dataset_name', 'history_dataset_info', 'history_dataset_peek', 'history_dataset_type'].includes(
-                        obj.name
-                    )
+                    [
+                        'history_dataset_name',
+                        'history_dataset_info',
+                        'history_dataset_peek',
+                        'history_dataset_type',
+                    ].includes(obj.name)
                 "
                 :name="obj.name"
                 :args="obj.args"

From 4ec1590643cbaf3f64b9d901f6aab1e70e5f7e8f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 4 Jan 2023 12:05:10 -0500
Subject: [PATCH 07/10] Pass name and args separately, add tests

---
 client/src/components/Markdown/Markdown.vue   | 17 +++--
 .../Markdown/MarkdownContainer.test.js        | 63 ++++++++++++++++++
 .../components/Markdown/MarkdownContainer.vue | 66 +++++++++++--------
 3 files changed, 110 insertions(+), 36 deletions(-)
 create mode 100644 client/src/components/Markdown/MarkdownContainer.test.js

diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index fcd2006fba98..659b2b61c736 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -28,7 +28,7 @@
                 </span>
             </div>
             <b-badge variant="info" class="w-100 rounded mb-3">
-                <div class="float-left m-1">Published with Galaxy {{ getVersion }} on {{ getTime }}</div>
+                <div class="float-left m-1">Published with Galaxy {{ version }} on {{ timeStamp }}</div>
                 <div class="float-right m-1">Identifier {{ markdownConfig.id }}</div>
             </b-badge>
             <div>
@@ -43,12 +43,15 @@
                 <p v-if="obj.name == 'default'" class="text-justify m-2" v-html="obj.content" />
                 <markdown-container
                     v-else
-                    :obj="obj"
+                    :name="obj.name"
+                    :args="obj.args"
                     :datasets="datasets"
                     :collections="collections"
                     :histories="histories"
                     :invocations="invocations"
                     :jobs="jobs"
+                    :time="time"
+                    :version="version"
                     :workflows="workflows" />
             </div>
         </div>
@@ -129,10 +132,10 @@ export default {
         };
     },
     computed: {
-        getVersion() {
-            return this.markdownConfig.generate_version || "Unknown Galaxy Version";
+        effectiveExportLink() {
+            return this.enable_beta_markdown_export ? this.exportLink : null;
         },
-        getTime() {
+        time() {
             const generateTime = this.markdownConfig.generate_time;
             if (generateTime) {
                 const date = new Date(generateTime);
@@ -146,8 +149,8 @@ export default {
             }
             return "unavailable";
         },
-        effectiveExportLink() {
-            return this.enable_beta_markdown_export ? this.exportLink : null;
+        version() {
+            return this.markdownConfig.generate_version || "Unknown Galaxy Version";
         },
     },
     watch: {
diff --git a/client/src/components/Markdown/MarkdownContainer.test.js b/client/src/components/Markdown/MarkdownContainer.test.js
new file mode 100644
index 000000000000..ae2bb8ad9748
--- /dev/null
+++ b/client/src/components/Markdown/MarkdownContainer.test.js
@@ -0,0 +1,63 @@
+import axios from "axios";
+import { mount } from "@vue/test-utils";
+import { getLocalVue } from "tests/jest/helpers";
+import MockAdapter from "axios-mock-adapter";
+import TargetComponent from "./MarkdownContainer.vue";
+
+const localVue = getLocalVue();
+
+async function mountComponent(propsData, apiMap = {}) {
+    const axiosMock = new MockAdapter(axios);
+    for (const [path, response] of Object.entries(apiMap)) {
+        axiosMock.onGet(path).reply(200, response);
+    }
+    return mount(TargetComponent, {
+        localVue,
+        propsData,
+    });
+}
+
+async function testCollapse(wrapper) {
+    const nolink = wrapper.find("a");
+    expect(nolink.exists()).toBe(false);
+    const collapse = "Click here to expand/collapse";
+    await wrapper.setProps({
+        args: {
+            collapse,
+        },
+    });
+    const link = wrapper.find("a");
+    expect(link.text()).toBe(collapse);
+    const container = wrapper.find(".collapse");
+    expect(container.attributes("style")).toBe("display: none;");
+    await link.trigger("click");
+    expect(container.attributes("style")).toBe("");
+}
+
+describe("MarkdownContainer", () => {
+    it("Should render version", async () => {
+        const version = "test_version";
+        const wrapper = await mountComponent({
+            name: "generate_galaxy_version",
+            args: {},
+            version,
+        });
+        const versionEl = wrapper.find(".galaxy-version");
+        expect(versionEl.exists()).toBe(true);
+        expect(versionEl.find("code").text()).toBe(version);
+        testCollapse(wrapper);
+    });
+
+    it("Should render time stamp", async () => {
+        const time = "test_time";
+        const wrapper = await mountComponent({
+            name: "generate_time",
+            args: {},
+            time,
+        });
+        const version = wrapper.find(".galaxy-time");
+        expect(version.exists()).toBe(true);
+        expect(version.find("code").text()).toBe(time);
+        testCollapse(wrapper);
+    });
+});
diff --git a/client/src/components/Markdown/MarkdownContainer.vue b/client/src/components/Markdown/MarkdownContainer.vue
index 01731ec47f20..c26e3b89b5f7 100644
--- a/client/src/components/Markdown/MarkdownContainer.vue
+++ b/client/src/components/Markdown/MarkdownContainer.vue
@@ -1,38 +1,34 @@
 <template>
     <div>
         <b-link v-if="isCollapsible" class="font-weight-bold" @click="toggle = !toggle">
-            {{ obj.args.collapse }}
+            {{ args.collapse }}
         </b-link>
         <b-collapse :visible="isVisible">
-            <div v-if="obj.name == 'generate_galaxy_version'" class="galaxy-version">
-                <pre><code>{{ getVersion }}</code></pre>
+            <div v-if="name == 'generate_galaxy_version'" class="galaxy-version">
+                <pre><code>{{ version }}</code></pre>
             </div>
-            <div v-else-if="obj.name == 'generate_time'" class="galaxy-time">
-                <pre><code>{{ getTime }}</code></pre>
+            <div v-else-if="name == 'generate_time'" class="galaxy-time">
+                <pre><code>{{ time }}</code></pre>
             </div>
-            <HistoryLink v-else-if="obj.name == 'history_link'" :args="obj.args" :histories="histories" />
-            <HistoryDatasetAsImage v-else-if="obj.name == 'history_dataset_as_image'" :args="obj.args" />
-            <HistoryDatasetLink v-else-if="obj.name == 'history_dataset_link'" :args="obj.args" />
-            <HistoryDatasetIndex v-else-if="obj.name == 'history_dataset_index'" :args="obj.args" />
-            <InvocationTime v-else-if="obj.name == 'invocation_time'" :args="obj.args" :invocations="invocations" />
-            <JobMetrics v-else-if="obj.name == 'job_metrics'" :args="obj.args" />
-            <JobParameters v-else-if="obj.name == 'job_parameters'" :args="obj.args" />
-            <WorkflowDisplay v-else-if="obj.name == 'workflow_display'" :args="obj.args" :workflows="workflows" />
-            <Visualization v-else-if="obj.name == 'visualization'" :args="obj.args" />
+            <HistoryLink v-else-if="name == 'history_link'" :args="args" :histories="histories" />
+            <HistoryDatasetAsImage v-else-if="name == 'history_dataset_as_image'" :args="args" />
+            <HistoryDatasetLink v-else-if="name == 'history_dataset_link'" :args="args" />
+            <HistoryDatasetIndex v-else-if="name == 'history_dataset_index'" :args="args" />
+            <InvocationTime v-else-if="name == 'invocation_time'" :args="args" :invocations="invocations" />
+            <JobMetrics v-else-if="name == 'job_metrics'" :args="args" />
+            <JobParameters v-else-if="name == 'job_parameters'" :args="args" />
+            <WorkflowDisplay v-else-if="name == 'workflow_display'" :args="args" :workflows="workflows" />
+            <Visualization v-else-if="name == 'visualization'" :args="args" />
             <HistoryDatasetCollectionDisplay
-                v-else-if="obj.name == 'history_dataset_collection_display'"
-                :args="obj.args"
+                v-else-if="name == 'history_dataset_collection_display'"
+                :args="args"
                 :collections="collections" />
-            <ToolStd
-                v-else-if="['tool_stdout', 'tool_stderr'].includes(obj.name)"
-                :args="obj.args"
-                :name="obj.name"
-                :jobs="jobs" />
+            <ToolStd v-else-if="['tool_stdout', 'tool_stderr'].includes(name)" :args="args" :name="name" :jobs="jobs" />
             <HistoryDatasetDisplay
-                v-else-if="['history_dataset_embedded', 'history_dataset_display'].includes(obj.name)"
-                :args="obj.args"
+                v-else-if="['history_dataset_embedded', 'history_dataset_display'].includes(name)"
+                :args="args"
                 :datasets="datasets"
-                :embedded="obj.name == 'history_dataset_embedded'" />
+                :embedded="name == 'history_dataset_embedded'" />
             <HistoryDatasetDetails
                 v-else-if="
                     [
@@ -40,10 +36,10 @@
                         'history_dataset_info',
                         'history_dataset_peek',
                         'history_dataset_type',
-                    ].includes(obj.name)
+                    ].includes(name)
                 "
-                :name="obj.name"
-                :args="obj.args"
+                :name="name"
+                :args="args"
                 :datasets="datasets" />
         </b-collapse>
     </div>
@@ -80,7 +76,11 @@ export default {
         Visualization,
     },
     props: {
-        obj: {
+        name: {
+            type: String,
+            default: null,
+        },
+        args: {
             type: Object,
             default: null,
         },
@@ -104,6 +104,14 @@ export default {
             type: Object,
             default: null,
         },
+        time: {
+            type: String,
+            default: null,
+        },
+        version: {
+            type: String,
+            default: null,
+        },
         workflows: {
             type: Object,
             default: null,
@@ -119,7 +127,7 @@ export default {
             return !this.isCollapsible || this.toggle;
         },
         isCollapsible() {
-            return this.obj.args.collapse !== undefined;
+            return this.args.collapse !== undefined;
         },
     },
 };

From 4d67d553e6692d4bb274f224469fb680440dad2d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 4 Jan 2023 13:18:23 -0500
Subject: [PATCH 08/10] Add additional markdown container tests

---
 .../Markdown/Elements/HistoryLink.vue         |  4 +-
 client/src/components/Markdown/Markdown.vue   |  2 +-
 .../Markdown/MarkdownContainer.test.js        | 67 +++++++++++++++----
 3 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Markdown/Elements/HistoryLink.vue b/client/src/components/Markdown/Elements/HistoryLink.vue
index 6974fb7cea1e..4581ed6d677e 100644
--- a/client/src/components/Markdown/Elements/HistoryLink.vue
+++ b/client/src/components/Markdown/Elements/HistoryLink.vue
@@ -15,11 +15,11 @@
 
 <script>
 import axios from "axios";
-import { getAppRoot } from "onload/loadConfig";
 import Vue from "vue";
 import BootstrapVue from "bootstrap-vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { errorMessageAsString } from "utils/simple-error";
+import { safePath } from "utils/redirect";
 
 Vue.use(BootstrapVue);
 
@@ -54,7 +54,7 @@ export default {
     methods: {
         onClick() {
             axios
-                .post(`${getAppRoot()}api/histories`, { history_id: this.args.history_id })
+                .post(safePath("/api/histories"), { history_id: this.args.history_id })
                 .then(() => {
                     this.imported = true;
                 })
diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index 659b2b61c736..6f43fef2bffd 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -28,7 +28,7 @@
                 </span>
             </div>
             <b-badge variant="info" class="w-100 rounded mb-3">
-                <div class="float-left m-1">Published with Galaxy {{ version }} on {{ timeStamp }}</div>
+                <div class="float-left m-1">Published with Galaxy {{ version }} on {{ time }}</div>
                 <div class="float-right m-1">Identifier {{ markdownConfig.id }}</div>
             </b-badge>
             <div>
diff --git a/client/src/components/Markdown/MarkdownContainer.test.js b/client/src/components/Markdown/MarkdownContainer.test.js
index ae2bb8ad9748..9aa36dd0bcc8 100644
--- a/client/src/components/Markdown/MarkdownContainer.test.js
+++ b/client/src/components/Markdown/MarkdownContainer.test.js
@@ -1,19 +1,31 @@
 import axios from "axios";
+import flushPromises from "flush-promises";
 import { mount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
 import MockAdapter from "axios-mock-adapter";
-import TargetComponent from "./MarkdownContainer.vue";
+import { safePath } from "utils/redirect";
+import MountTarget from "./MarkdownContainer.vue";
+
+// mock routes
+jest.mock("utils/redirect");
+safePath.mockImplementation((url) => url);
 
 const localVue = getLocalVue();
+const axiosMock = new MockAdapter(axios);
 
 async function mountComponent(propsData, apiMap = {}) {
-    const axiosMock = new MockAdapter(axios);
-    for (const [path, response] of Object.entries(apiMap)) {
-        axiosMock.onGet(path).reply(200, response);
+    axiosMock.reset();
+    for (const [method, apiDetails] of Object.entries(apiMap)) {
+        for (const [path, response] of Object.entries(apiDetails)) {
+            axiosMock[method](path).reply(200, response);
+        }
     }
-    return mount(TargetComponent, {
+    return mount(MountTarget, {
         localVue,
         propsData,
+        stubs: {
+            FontAwesomeIcon: true,
+        },
     });
 }
 
@@ -21,11 +33,7 @@ async function testCollapse(wrapper) {
     const nolink = wrapper.find("a");
     expect(nolink.exists()).toBe(false);
     const collapse = "Click here to expand/collapse";
-    await wrapper.setProps({
-        args: {
-            collapse,
-        },
-    });
+    await wrapper.setProps({ args: { collapse } });
     const link = wrapper.find("a");
     expect(link.text()).toBe(collapse);
     const container = wrapper.find(".collapse");
@@ -35,7 +43,7 @@ async function testCollapse(wrapper) {
 }
 
 describe("MarkdownContainer", () => {
-    it("Should render version", async () => {
+    it("Renders version", async () => {
         const version = "test_version";
         const wrapper = await mountComponent({
             name: "generate_galaxy_version",
@@ -48,7 +56,7 @@ describe("MarkdownContainer", () => {
         testCollapse(wrapper);
     });
 
-    it("Should render time stamp", async () => {
+    it("Renders time stamp", async () => {
         const time = "test_time";
         const wrapper = await mountComponent({
             name: "generate_time",
@@ -60,4 +68,39 @@ describe("MarkdownContainer", () => {
         expect(version.find("code").text()).toBe(time);
         testCollapse(wrapper);
     });
+
+    it("Renders history link", async () => {
+        const wrapper = await mountComponent(
+            {
+                name: "history_link",
+                args: { history_id: "test_history_id" },
+                histories: { test_history_id: { name: "history_name" } },
+            },
+            {
+                onPost: { "/api/histories": {} },
+            }
+        );
+        const link = wrapper.find("a");
+        expect(link.text()).toBe("Click to Import History: history_name.");
+        await link.trigger("click");
+        const postedData = JSON.parse(axiosMock.history.post[0].data);
+        expect(postedData.history_id).toBe("test_history_id");
+        await flushPromises();
+        const error = wrapper.find(".text-success");
+        const message = error.find("span");
+        expect(message.text()).toBe("Successfully Imported History: history_name!");
+    });
+
+    it("Renders history link (with failing import error message)", async () => {
+        const wrapper = await mountComponent({
+            name: "history_link",
+            args: { history_id: "test_history_id" },
+            histories: { test_history_id: { name: "history_name" } },
+        });
+        await wrapper.find("a").trigger("click");
+        await flushPromises();
+        const error = wrapper.find(".text-danger");
+        const message = error.find("span");
+        expect(message.text()).toBe("Failed to Import History: history_name!");
+    });
 });

From a3e218d94a76633428e0ea0a4ede1642f1fe5937 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 4 Jan 2023 13:33:20 -0500
Subject: [PATCH 09/10] Convert markdown container to composables

---
 .../components/Markdown/MarkdownContainer.vue | 152 ++++++++----------
 1 file changed, 64 insertions(+), 88 deletions(-)

diff --git a/client/src/components/Markdown/MarkdownContainer.vue b/client/src/components/Markdown/MarkdownContainer.vue
index c26e3b89b5f7..6fa1fb9a4f3a 100644
--- a/client/src/components/Markdown/MarkdownContainer.vue
+++ b/client/src/components/Markdown/MarkdownContainer.vue
@@ -1,3 +1,67 @@
+<script setup>
+import { computed, ref } from "vue";
+import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage";
+import HistoryDatasetDisplay from "./Elements/HistoryDatasetDisplay";
+import HistoryDatasetLink from "./Elements/HistoryDatasetLink";
+import HistoryDatasetIndex from "./Elements/HistoryDatasetIndex";
+import HistoryDatasetCollectionDisplay from "./Elements/HistoryDatasetCollection/CollectionDisplay";
+import HistoryDatasetDetails from "./Elements/HistoryDatasetDetails";
+import HistoryLink from "./Elements/HistoryLink";
+import InvocationTime from "./Elements/InvocationTime";
+import JobMetrics from "./Elements/JobMetrics";
+import JobParameters from "./Elements/JobParameters";
+import ToolStd from "./Elements/ToolStd";
+import WorkflowDisplay from "./Elements/Workflow/WorkflowDisplay";
+import Visualization from "./Elements/Visualization";
+
+const toggle = ref(false);
+const props = defineProps({
+    name: {
+        type: String,
+        default: null,
+    },
+    args: {
+        type: Object,
+        default: null,
+    },
+    datasets: {
+        type: Object,
+        default: null,
+    },
+    collections: {
+        type: Object,
+        default: null,
+    },
+    histories: {
+        type: Object,
+        default: null,
+    },
+    invocations: {
+        type: Object,
+        default: null,
+    },
+    jobs: {
+        type: Object,
+        default: null,
+    },
+    time: {
+        type: String,
+        default: null,
+    },
+    version: {
+        type: String,
+        default: null,
+    },
+    workflows: {
+        type: Object,
+        default: null,
+    },
+});
+
+const isCollapsible = computed(() => props.args.collapse !== undefined);
+const isVisible = computed(() => !isCollapsible.value || toggle.value);
+</script>
+
 <template>
     <div>
         <b-link v-if="isCollapsible" class="font-weight-bold" @click="toggle = !toggle">
@@ -44,91 +108,3 @@
         </b-collapse>
     </div>
 </template>
-
-<script>
-import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage";
-import HistoryDatasetDisplay from "./Elements/HistoryDatasetDisplay";
-import HistoryDatasetLink from "./Elements/HistoryDatasetLink";
-import HistoryDatasetIndex from "./Elements/HistoryDatasetIndex";
-import HistoryDatasetCollectionDisplay from "./Elements/HistoryDatasetCollection/CollectionDisplay";
-import HistoryDatasetDetails from "./Elements/HistoryDatasetDetails";
-import HistoryLink from "./Elements/HistoryLink";
-import InvocationTime from "./Elements/InvocationTime";
-import JobMetrics from "./Elements/JobMetrics";
-import JobParameters from "./Elements/JobParameters";
-import ToolStd from "./Elements/ToolStd";
-import WorkflowDisplay from "./Elements/Workflow/WorkflowDisplay";
-import Visualization from "./Elements/Visualization";
-export default {
-    components: {
-        HistoryDatasetDetails,
-        HistoryDatasetAsImage,
-        HistoryDatasetCollectionDisplay,
-        HistoryDatasetDisplay,
-        HistoryDatasetIndex,
-        HistoryDatasetLink,
-        HistoryLink,
-        InvocationTime,
-        JobMetrics,
-        JobParameters,
-        WorkflowDisplay,
-        ToolStd,
-        Visualization,
-    },
-    props: {
-        name: {
-            type: String,
-            default: null,
-        },
-        args: {
-            type: Object,
-            default: null,
-        },
-        datasets: {
-            type: Object,
-            default: null,
-        },
-        collections: {
-            type: Object,
-            default: null,
-        },
-        histories: {
-            type: Object,
-            default: null,
-        },
-        invocations: {
-            type: Object,
-            default: null,
-        },
-        jobs: {
-            type: Object,
-            default: null,
-        },
-        time: {
-            type: String,
-            default: null,
-        },
-        version: {
-            type: String,
-            default: null,
-        },
-        workflows: {
-            type: Object,
-            default: null,
-        },
-    },
-    data() {
-        return {
-            toggle: false,
-        };
-    },
-    computed: {
-        isVisible() {
-            return !this.isCollapsible || this.toggle;
-        },
-        isCollapsible() {
-            return this.args.collapse !== undefined;
-        },
-    },
-};
-</script>

From 409276d2ed9c367b2d89c1e99e058a98e2abd783 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 4 Jan 2023 13:35:18 -0500
Subject: [PATCH 10/10] Apply coding convention, require main props

---
 .../components/Markdown/MarkdownContainer.vue | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Markdown/MarkdownContainer.vue b/client/src/components/Markdown/MarkdownContainer.vue
index 6fa1fb9a4f3a..38ccbb72b2c9 100644
--- a/client/src/components/Markdown/MarkdownContainer.vue
+++ b/client/src/components/Markdown/MarkdownContainer.vue
@@ -1,28 +1,28 @@
 <script setup>
 import { computed, ref } from "vue";
-import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage";
-import HistoryDatasetDisplay from "./Elements/HistoryDatasetDisplay";
-import HistoryDatasetLink from "./Elements/HistoryDatasetLink";
-import HistoryDatasetIndex from "./Elements/HistoryDatasetIndex";
-import HistoryDatasetCollectionDisplay from "./Elements/HistoryDatasetCollection/CollectionDisplay";
-import HistoryDatasetDetails from "./Elements/HistoryDatasetDetails";
-import HistoryLink from "./Elements/HistoryLink";
-import InvocationTime from "./Elements/InvocationTime";
-import JobMetrics from "./Elements/JobMetrics";
-import JobParameters from "./Elements/JobParameters";
-import ToolStd from "./Elements/ToolStd";
-import WorkflowDisplay from "./Elements/Workflow/WorkflowDisplay";
-import Visualization from "./Elements/Visualization";
+import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage.vue";
+import HistoryDatasetDisplay from "./Elements/HistoryDatasetDisplay.vue";
+import HistoryDatasetLink from "./Elements/HistoryDatasetLink.vue";
+import HistoryDatasetIndex from "./Elements/HistoryDatasetIndex.vue";
+import HistoryDatasetCollectionDisplay from "./Elements/HistoryDatasetCollection/CollectionDisplay.vue";
+import HistoryDatasetDetails from "./Elements/HistoryDatasetDetails.vue";
+import HistoryLink from "./Elements/HistoryLink.vue";
+import InvocationTime from "./Elements/InvocationTime.vue";
+import JobMetrics from "./Elements/JobMetrics.vue";
+import JobParameters from "./Elements/JobParameters.vue";
+import ToolStd from "./Elements/ToolStd.vue";
+import WorkflowDisplay from "./Elements/Workflow/WorkflowDisplay.vue";
+import Visualization from "./Elements/Visualization.vue";
 
 const toggle = ref(false);
 const props = defineProps({
     name: {
         type: String,
-        default: null,
+        required: true,
     },
     args: {
         type: Object,
-        default: null,
+        required: true,
     },
     datasets: {
         type: Object,