From 474ddfdc508ce35ec40f69a75ea12e58bfbfa16b Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Tue, 19 Dec 2023 11:21:04 -0500
Subject: [PATCH] ToolStd -> typescript

---
 .../components/Markdown/Elements/ToolStd.vue  | 52 ++++++++++---------
 .../components/Markdown/MarkdownContainer.vue |  6 ++-
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/client/src/components/Markdown/Elements/ToolStd.vue b/client/src/components/Markdown/Elements/ToolStd.vue
index cebf0036e5d9..522d9709ba1e 100644
--- a/client/src/components/Markdown/Elements/ToolStd.vue
+++ b/client/src/components/Markdown/Elements/ToolStd.vue
@@ -1,35 +1,37 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Job {
+    tool_stdout?: string;
+    tool_stderr?: string;
+}
+
+type JobsMap = {
+    [key: string]: Job;
+};
+
+interface ToolStdProps {
+    jobId: string;
+    name: "tool_stderr" | "tool_stdout";
+    jobs: JobsMap;
+}
+
+const props = defineProps<ToolStdProps>();
+
+const jobContent = computed(() => {
+    const job = props.jobs[props.jobId];
+    return job && job[props.name];
+});
+</script>
+
 <template>
     <b-card nobody class="content-height">
-        <div :class="name" :job_id="args.job_id">
+        <div :class="name" :job_id="jobId">
             <pre><code class="word-wrap-normal">{{ jobContent }}</code></pre>
         </div>
     </b-card>
 </template>
 
-<script>
-export default {
-    props: {
-        args: {
-            type: Object,
-            required: true,
-        },
-        name: {
-            type: String,
-            required: true,
-        },
-        jobs: {
-            type: Object,
-            default: null,
-        },
-    },
-    computed: {
-        jobContent() {
-            const job = this.jobs[this.args.job_id];
-            return job && job[this.name];
-        },
-    },
-};
-</script>
 <style scoped>
 .content-height {
     max-height: 15rem;
diff --git a/client/src/components/Markdown/MarkdownContainer.vue b/client/src/components/Markdown/MarkdownContainer.vue
index 9eb19973390c..93db33c4a2df 100644
--- a/client/src/components/Markdown/MarkdownContainer.vue
+++ b/client/src/components/Markdown/MarkdownContainer.vue
@@ -171,7 +171,11 @@ function argToBoolean(args, name, booleanDefault) {
                 v-else-if="name == 'history_dataset_collection_display'"
                 :args="args"
                 :collections="collections" />
-            <ToolStd v-else-if="['tool_stdout', 'tool_stderr'].includes(name)" :args="args" :name="name" :jobs="jobs" />
+            <ToolStd
+                v-else-if="['tool_stdout', 'tool_stderr'].includes(name)"
+                :job-id="args.job_id"
+                :name="name"
+                :jobs="jobs" />
             <HistoryDatasetDisplay
                 v-else-if="['history_dataset_embedded', 'history_dataset_display'].includes(name)"
                 :args="args"