Move Markdown components to subdirectory for modularity

client/src/api/datasets.ts

@@ -1,9 +1,30 @@
 import axios from "axios";
 
-import { type components, GalaxyApi, type GalaxyApiPaths, type HDADetailed } from "@/api";
+import {
+    type components,
+    type DatasetTextContentDetails,
+    GalaxyApi,
+    type GalaxyApiPaths,
+    type HDADetailed,
+} from "@/api";
 import { withPrefix } from "@/utils/redirect";
 import { rethrowSimple } from "@/utils/simple-error";
 
+export async function fetchDatasetTextContentDetails(params: { id: string }): Promise<DatasetTextContentDetails> {
+    const { data, error } = await GalaxyApi().GET("/api/datasets/{dataset_id}/get_content_as_text", {
+        params: {
+            path: {
+                dataset_id: params.id,
+            },
+        },
+    });
+
+    if (error) {
+        rethrowSimple(error);
+    }
+    return data;
+}
+
 export async function fetchDatasetDetails(params: { id: string }): Promise<HDADetailed> {
     const { data, error } = await GalaxyApi().GET("/api/datasets/{dataset_id}", {
         params: {

client/src/api/index.ts

@@ -5,6 +5,11 @@ import { type components, type GalaxyApiPaths } from "@/api/schema";
 
 export { type components, GalaxyApi, type GalaxyApiPaths };
 
+/**
+ * Contains a dataset's text content and details
+ */
+export type DatasetTextContentDetails = components["schemas"]["DatasetTextContentDetails"];
+
 /**
  * Contains minimal information about a History.
  */

client/src/components/Dataset/DatasetAsImage/DatasetAsImage.vue

@@ -33,15 +33,15 @@ const isImage = computedAsync(async () => {
     const res = await fetch(imageUrl.value);
     const buff = await res.blob();
     return buff.type.startsWith("image/");
-}, null);
+}, true);
 </script>
 
 <template>
     <div>
         <div v-if="imageUrl" class="w-100 p-2">
             <b-card nobody body-class="p-1">
-                <b-img :src="imageUrl" fluid />
                 <span v-if="!isImage" class="text-danger">This dataset does not appear to be an image.</span>
+                <b-img v-else :src="imageUrl" fluid />
             </b-card>
         </div>
         <div v-else>

client/src/components/License/License.vue

@@ -18,10 +18,10 @@
 </template>
 
 <script>
-import axios from "axios";
 import ExternalLink from "components/ExternalLink";
 import LoadingSpan from "components/LoadingSpan";
-import { getAppRoot } from "onload/loadConfig";
+
+import { GalaxyApi } from "@/api";
 
 export default {
     components: {
@@ -62,9 +62,14 @@ export default {
     methods: {
         fetchLicense() {
             this.license = null;
-            const url = `${getAppRoot()}api/licenses/${this.licenseId}`;
-            axios
-                .get(url)
+            GalaxyApi()
+                .GET("/api/licenses/{license_id}", {
+                    params: {
+                        path: {
+                            license_id: this.licenseId,
+                        },
+                    },
+                })
                 .then((response) => response.data)
                 .then((data) => {
                     this.license = data;

client/src/components/Markdown/Editor/TextEditor.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="d-flex h-100 w-100">
+        <FlexPanel side="left">
+            <MarkdownToolBox :steps="steps" @insert="insertMarkdown" />
+        </FlexPanel>
+        <textarea
+            id="workflow-report-editor"
+            ref="textArea"
+            v-model="content"
+            class="markdown-textarea w-100 p-4"
+            @input="onUpdate" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { debounce } from "lodash";
+import { defineEmits, defineProps, nextTick, ref, watch } from "vue";
+
+import MarkdownToolBox from "@/components/Markdown/MarkdownToolBox.vue";
+import FlexPanel from "@/components/Panels/FlexPanel.vue";
+
+const props = defineProps<{
+    markdownText: string;
+    mode: "report" | "page";
+    steps?: Record<string, any>;
+    title: string;
+}>();
+
+const emit = defineEmits<{
+    (e: "update", value: string): void;
+}>();
+
+const content = ref<string>(props.markdownText);
+const textArea = ref<HTMLTextAreaElement | null>(null);
+
+const FENCE = "```";
+
+watch(
+    () => props.markdownText,
+    (newValue) => {
+        const textCursor = textArea.value?.selectionEnd || 0;
+        content.value = newValue;
+        nextTick(() => {
+            if (textArea.value) {
+                textArea.value.selectionEnd = textCursor;
+                textArea.value.focus();
+            }
+        });
+    }
+);
+
+function insertMarkdown(markdown: string) {
+    markdown = markdown.replace(")(", ", ");
+    markdown = `${FENCE}galaxy\n${markdown}\n${FENCE}\n`;
+    if (textArea.value) {
+        textArea.value.focus();
+        const cursorPosition = textArea.value.selectionStart;
+        const newContent =
+            content.value?.substr(0, cursorPosition) +
+            `\r\n${markdown.trim()}\r\n` +
+            content.value?.substr(cursorPosition);
+
+        emit("update", newContent || "");
+    }
+}
+
+const onUpdate = debounce((e: Event) => {
+    emit("update", content.value || "");
+}, 300);
+</script>
+
+<style scoped>
+.markdown-textarea {
+    border: none;
+    resize: none;
+    outline: none;
+    font: 14px/1.7 Menlo, Consolas, Monaco, "Andale Mono", monospace;
+}
+</style>