diff --git a/client/src/api/histories.ts b/client/src/api/histories.ts
index a4da4bb0627f..da0564f0ab43 100644
--- a/client/src/api/histories.ts
+++ b/client/src/api/histories.ts
@@ -7,3 +7,4 @@ export const deleteHistories = fetcher.path("/api/histories/batch/delete").metho
 export const undeleteHistory = fetcher.path("/api/histories/deleted/{history_id}/undelete").method("post").create();
 export const undeleteHistories = fetcher.path("/api/histories/batch/undelete").method("put").create();
 export const historiesQuery = fetcher.path("/api/histories/query").method("get").create();
+export const publishedHistoriesFetcher = fetcher.path("/api/histories/published").method("get").create();
diff --git a/client/src/api/invocations.ts b/client/src/api/invocations.ts
index fe8b8d5da4c7..c604a40998b3 100644
--- a/client/src/api/invocations.ts
+++ b/client/src/api/invocations.ts
@@ -2,7 +2,9 @@ import axios from "axios";
 
 import { getAppRoot } from "@/onload";
 
-import { ApiResponse } from "./schema";
+import { ApiResponse, fetcher } from "./schema";
+
+export const invocationsFetcher = fetcher.path("/api/invocations").method("get").create();
 
 // TODO: Replace these interfaces with real schema models after https://github.com/galaxyproject/galaxy/pull/16707 is merged
 export interface WorkflowInvocation {
diff --git a/client/src/api/jobs.ts b/client/src/api/jobs.ts
index e915a9179098..65399c0beb96 100644
--- a/client/src/api/jobs.ts
+++ b/client/src/api/jobs.ts
@@ -6,3 +6,5 @@ export const jobLockStatus = fetcher.path("/api/job_lock").method("get").create(
 export const jobLockUpdate = fetcher.path("/api/job_lock").method("put").create();
 
 export const fetchJobDestinationParams = fetcher.path("/api/jobs/{job_id}/destination_params").method("get").create();
+
+export const jobsFetcher = fetcher.path("/api/jobs").method("get").create();
diff --git a/client/src/api/workflows.ts b/client/src/api/workflows.ts
new file mode 100644
index 000000000000..168e85ed00c4
--- /dev/null
+++ b/client/src/api/workflows.ts
@@ -0,0 +1,3 @@
+import { fetcher } from "@/api/schema";
+
+export const workflowsFetcher = fetcher.path("/api/workflows").method("get").create();
diff --git a/client/src/components/Markdown/MarkdownDialog.vue b/client/src/components/Markdown/MarkdownDialog.vue
index 648c9696c4f7..4076696f47ee 100644
--- a/client/src/components/Markdown/MarkdownDialog.vue
+++ b/client/src/components/Markdown/MarkdownDialog.vue
@@ -1,3 +1,206 @@
+<script setup lang="ts">
+import BootstrapVue from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import Vue, { computed, ref } from "vue";
+
+import { publishedHistoriesFetcher } from "@/api/histories";
+import { invocationsFetcher } from "@/api/invocations";
+import { jobsFetcher } from "@/api/jobs";
+import { workflowsFetcher } from "@/api/workflows";
+import { useHistoryStore } from "@/stores/historyStore";
+
+import MarkdownSelector from "./MarkdownSelector.vue";
+import MarkdownVisualization from "./MarkdownVisualization.vue";
+import DataDialog from "@/components/DataDialog/DataDialog.vue";
+import BasicSelectionDialog from "@/components/SelectionDialog/BasicSelectionDialog.vue";
+import DatasetCollectionDialog from "@/components/SelectionDialog/DatasetCollectionDialog.vue";
+
+Vue.use(BootstrapVue);
+
+interface MarkdownDialogProps {
+    argumentName?: string;
+    argumentType?: string;
+    argumentPayload?: object;
+    labels?: string[];
+    useLabels: boolean;
+}
+
+const props = withDefaults(defineProps<MarkdownDialogProps>(), {
+    argumentName: undefined,
+    argumentType: undefined,
+    argumentPayload: undefined,
+});
+
+const emit = defineEmits<{
+    (e: "onCancel"): void;
+    (e: "onInsert", value: string): void;
+}>();
+
+interface SelectTitles {
+    labelTitle: string;
+}
+
+type SelectType = "job_id" | "invocation_id" | "history_dataset_id" | "history_dataset_collection_id";
+
+const selectorConfig = {
+    job_id: {
+        labelTitle: "Step",
+    },
+    invocation_id: {
+        labelTitle: "Step",
+    },
+    history_dataset_id: {
+        labelTitle: "Output",
+    },
+    history_dataset_collection_id: {
+        labelTitle: "Output",
+    },
+};
+
+const selectedShow = ref(false);
+const visualizationShow = ref(false);
+const workflowShow = ref(false);
+const historyShow = ref(false);
+const jobShow = ref(false);
+const invocationShow = ref(false);
+const dataShow = ref(false);
+const dataCollectionShow = ref(false);
+const { currentHistoryId } = storeToRefs(useHistoryStore());
+
+const selectedLabelTitle = computed(() => {
+    const config: SelectTitles = selectorConfig[props.argumentType as SelectType] as SelectTitles;
+    return (config && config.labelTitle) || "Select Label";
+});
+
+function getInvocations() {
+    return invocationsFetcher({});
+}
+
+function getJobs() {
+    return jobsFetcher({});
+}
+
+function getWorkflows() {
+    return workflowsFetcher({});
+}
+
+function getHistories() {
+    return publishedHistoriesFetcher({});
+}
+
+function onData(response: string) {
+    dataShow.value = false;
+    emit("onInsert", `${props.argumentName}(history_dataset_id=${response})`);
+}
+
+interface ObjectReference {
+    id: string;
+}
+
+function onDataCollection(response: ObjectReference) {
+    dataCollectionShow.value = false;
+    emit("onInsert", `${props.argumentName}(history_dataset_collection_id=${response.id})`);
+}
+
+function onJob(response: ObjectReference) {
+    jobShow.value = false;
+    emit("onInsert", `${props.argumentName}(job_id=${response.id})`);
+}
+
+function onInvocation(response: ObjectReference) {
+    invocationShow.value = false;
+    emit("onInsert", `${props.argumentName}(invocation_id=${response.id})`);
+}
+
+function onHistory(response: ObjectReference) {
+    historyShow.value = false;
+    emit("onInsert", `history_link(history_id=${response.id})`);
+}
+
+function onWorkflow(response: ObjectReference) {
+    workflowShow.value = false;
+    emit("onInsert", `${props.argumentName}(workflow_id=${response.id})`);
+}
+
+function onVisualization(response: string) {
+    visualizationShow.value = false;
+    emit("onInsert", response);
+}
+
+function onOk(selectedLabel: string) {
+    selectedLabel = selectedLabel || "<ENTER LABEL>";
+    selectedShow.value = false;
+    if (props.argumentType == "history_dataset_id") {
+        if (props.useLabels) {
+            emit("onInsert", `${props.argumentName}(output="${selectedLabel}")`);
+        } else {
+            dataShow.value = true;
+        }
+    } else if (props.argumentType == "history_dataset_collection_id") {
+        if (props.useLabels) {
+            emit("onInsert", `${props.argumentName}(output="${selectedLabel}")`);
+        } else {
+            dataCollectionShow.value = true;
+        }
+    } else if (props.argumentType == "job_id") {
+        if (props.useLabels) {
+            emit("onInsert", `${props.argumentName}(step="${selectedLabel}")`);
+        } else {
+            jobShow.value = true;
+        }
+    } else if (props.argumentType == "invocation_id") {
+        if (props.useLabels) {
+            emit("onInsert", `${props.argumentName}(step="${selectedLabel}")`);
+        } else {
+            invocationShow.value = true;
+        }
+    }
+}
+
+function onCancel() {
+    dataCollectionShow.value = false;
+    selectedShow.value = false;
+    workflowShow.value = false;
+    visualizationShow.value = false;
+    jobShow.value = false;
+    invocationShow.value = false;
+    dataShow.value = false;
+    emit("onCancel");
+}
+
+if (props.argumentType == "workflow_id") {
+    workflowShow.value = true;
+} else if (props.argumentType == "history_id") {
+    historyShow.value = true;
+} else if (props.argumentType == "history_dataset_id") {
+    if (props.useLabels) {
+        selectedShow.value = true;
+    } else {
+        dataShow.value = true;
+    }
+} else if (props.argumentType == "history_dataset_collection_id") {
+    if (props.useLabels) {
+        selectedShow.value = true;
+    } else {
+        dataCollectionShow.value = true;
+    }
+} else if (props.argumentType == "invocation_id") {
+    if (props.useLabels) {
+        selectedShow.value = true;
+    } else {
+        invocationShow.value = true;
+    }
+} else if (props.argumentType == "job_id") {
+    if (props.useLabels) {
+        selectedShow.value = true;
+    } else {
+        jobShow.value = true;
+    }
+} else if (props.argumentType == "visualization_id") {
+    visualizationShow.value = true;
+}
+</script>
+
 <template>
     <span>
         <MarkdownSelector
@@ -14,13 +217,13 @@
             :argument-payload="argumentPayload"
             :labels="labels"
             :use-labels="useLabels"
-            :history="dataHistoryId"
+            :history="currentHistoryId"
             @onOk="onVisualization"
             @onCancel="onCancel" />
-        <DataDialog v-else-if="dataShow" :history="dataHistoryId" format="id" @onOk="onData" @onCancel="onCancel" />
+        <DataDialog v-else-if="dataShow" :history="currentHistoryId" format="id" @onOk="onData" @onCancel="onCancel" />
         <DatasetCollectionDialog
             v-else-if="dataCollectionShow"
-            :history="dataHistoryId"
+            :history="currentHistoryId"
             format="id"
             @onOk="onDataCollection"
             @onCancel="onCancel" />
@@ -57,219 +260,3 @@
             @onCancel="onCancel" />
     </span>
 </template>
-
-<script>
-import axios from "axios";
-import BootstrapVue from "bootstrap-vue";
-import DataDialog from "components/DataDialog/DataDialog";
-import BasicSelectionDialog from "components/SelectionDialog/BasicSelectionDialog";
-import DatasetCollectionDialog from "components/SelectionDialog/DatasetCollectionDialog";
-import { getAppRoot } from "onload/loadConfig";
-import { getCurrentGalaxyHistory } from "utils/data";
-import Vue from "vue";
-
-import MarkdownSelector from "./MarkdownSelector";
-import MarkdownVisualization from "./MarkdownVisualization";
-
-Vue.use(BootstrapVue);
-
-export default {
-    components: {
-        MarkdownSelector,
-        MarkdownVisualization,
-        BasicSelectionDialog,
-        DatasetCollectionDialog,
-        DataDialog,
-    },
-    props: {
-        argumentName: {
-            type: String,
-            default: null,
-        },
-        argumentType: {
-            type: String,
-            default: null,
-        },
-        argumentPayload: {
-            type: Object,
-            default: null,
-        },
-        labels: {
-            type: Array,
-            default: null,
-        },
-        useLabels: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            selectorConfig: {
-                job_id: {
-                    labelTitle: "Step",
-                },
-                invocation_id: {
-                    labelTitle: "Step",
-                },
-                history_dataset_id: {
-                    labelTitle: "Output",
-                },
-                history_dataset_collection_id: {
-                    labelTitle: "Output",
-                },
-            },
-            jobsUrl: `${getAppRoot()}api/jobs`,
-            workflowsUrl: `${getAppRoot()}api/workflows`,
-            invocationsUrl: `${getAppRoot()}api/invocations`,
-            historiesUrl: `${getAppRoot()}api/histories?view=detailed&q=published&qv=True`,
-            selectedShow: false,
-            visualizationShow: false,
-            workflowShow: false,
-            historyShow: false,
-            jobShow: false,
-            invocationShow: false,
-            dataShow: false,
-            dataCollectionShow: false,
-        };
-    },
-    computed: {
-        selectedLabelTitle() {
-            const config = this.selectorConfig[this.argumentType];
-            return (config && config.labelTitle) || "Select Label";
-        },
-    },
-    created() {
-        this.onCreate();
-    },
-    methods: {
-        getInvocations() {
-            return axios.get(this.invocationsUrl);
-        },
-        getJobs() {
-            return axios.get(this.jobsUrl);
-        },
-        getWorkflows() {
-            return axios.get(this.workflowsUrl);
-        },
-        getHistories() {
-            return axios.get(this.historiesUrl);
-        },
-        onData(response) {
-            this.dataShow = false;
-            this.$emit("onInsert", `${this.argumentName}(history_dataset_id=${response})`);
-        },
-        onDataCollection(response) {
-            this.dataCollectionShow = false;
-            this.$emit("onInsert", `${this.argumentName}(history_dataset_collection_id=${response.id})`);
-        },
-        onJob(response) {
-            this.jobShow = false;
-            this.$emit("onInsert", `${this.argumentName}(job_id=${response.id})`);
-        },
-        onInvocation(response) {
-            this.invocationShow = false;
-            this.$emit("onInsert", `${this.argumentName}(invocation_id=${response.id})`);
-        },
-        onHistory(response) {
-            this.historyShow = false;
-            this.$emit("onInsert", `history_link(history_id=${response.id})`);
-        },
-        onWorkflow(response) {
-            this.workflowShow = false;
-            this.$emit("onInsert", `${this.argumentName}(workflow_id=${response.id})`);
-        },
-        onVisualization(response) {
-            this.visualizationShow = false;
-            this.$emit("onInsert", response);
-        },
-        onCreate() {
-            if (this.argumentType == "workflow_id") {
-                this.workflowShow = true;
-            } else if (this.argumentType == "history_id") {
-                this.historyShow = true;
-            } else if (this.argumentType == "history_dataset_id") {
-                if (this.useLabels) {
-                    this.selectedShow = true;
-                } else {
-                    getCurrentGalaxyHistory().then((historyId) => {
-                        this.dataHistoryId = historyId;
-                        this.dataShow = true;
-                    });
-                }
-            } else if (this.argumentType == "history_dataset_collection_id") {
-                if (this.useLabels) {
-                    this.selectedShow = true;
-                } else {
-                    getCurrentGalaxyHistory().then((historyId) => {
-                        this.dataHistoryId = historyId;
-                        this.dataCollectionShow = true;
-                    });
-                }
-            } else if (this.argumentType == "invocation_id") {
-                if (this.useLabels) {
-                    this.selectedShow = true;
-                } else {
-                    this.invocationShow = true;
-                }
-            } else if (this.argumentType == "job_id") {
-                if (this.useLabels) {
-                    this.selectedShow = true;
-                } else {
-                    this.jobShow = true;
-                }
-            } else if (this.argumentType == "visualization_id") {
-                getCurrentGalaxyHistory().then((historyId) => {
-                    this.dataHistoryId = historyId;
-                    this.visualizationShow = true;
-                });
-            }
-        },
-        onOk(selectedLabel) {
-            selectedLabel = selectedLabel || "<ENTER LABEL>";
-            this.selectedShow = false;
-            if (this.argumentType == "history_dataset_id") {
-                if (this.useLabels) {
-                    this.$emit("onInsert", `${this.argumentName}(output="${selectedLabel}")`);
-                } else {
-                    getCurrentGalaxyHistory().then((historyId) => {
-                        this.dataShow = true;
-                        this.dataHistoryId = historyId;
-                    });
-                }
-            } else if (this.argumentType == "history_dataset_collection_id") {
-                if (this.useLabels) {
-                    this.$emit("onInsert", `${this.argumentName}(output="${selectedLabel}")`);
-                } else {
-                    getCurrentGalaxyHistory().then((historyId) => {
-                        this.dataCollectionShow = true;
-                        this.dataHistoryId = historyId;
-                    });
-                }
-            } else if (this.argumentType == "job_id") {
-                if (this.useLabels) {
-                    this.$emit("onInsert", `${this.argumentName}(step="${selectedLabel}")`);
-                } else {
-                    this.jobShow = true;
-                }
-            } else if (this.argumentType == "invocation_id") {
-                if (this.useLabels) {
-                    this.$emit("onInsert", `${this.argumentName}(step="${selectedLabel}")`);
-                } else {
-                    this.invocationShow = true;
-                }
-            }
-        },
-        onCancel() {
-            this.dataCollectionShow = false;
-            this.selectedShow = false;
-            this.workflowShow = false;
-            this.visualizationShow = false;
-            this.jobShow = false;
-            this.invocationShow = false;
-            this.dataShow = false;
-            this.$emit("onCancel");
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Markdown/MarkdownToolBox.vue b/client/src/components/Markdown/MarkdownToolBox.vue
index 2f6e5d027858..c8f7341f6fed 100644
--- a/client/src/components/Markdown/MarkdownToolBox.vue
+++ b/client/src/components/Markdown/MarkdownToolBox.vue
@@ -105,7 +105,7 @@ export default {
         return {
             selectedArgumentName: null,
             selectedType: null,
-            selectedLabels: null,
+            selectedLabels: undefined,
             selectedShow: false,
             selectedPayload: null,
             visualizationIndex: {},