Merge pull request #20814 from itisAliRH/fix-trs-import-markdown-rendering

[25.0] Render Tool Descriptions in Markdown in TRS imports

Author: davelopez

client/src/components/Workflow/Import/TrsSearch.vue

@@ -9,6 +9,7 @@ import { useRouter } from "vue-router/composables";
 
 import { getRedirectOnImportPath } from "@/components/Workflow/redirectPath";
 import { Services } from "@/components/Workflow/services";
+import { useMarkdown } from "@/composables/markdown";
 import { withPrefix } from "@/utils/redirect";
 
 import type { TrsSelection } from "./types";
@@ -26,6 +27,8 @@ type TrsSearchData = {
     [key: string]: unknown;
 };
 
+const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
+
 const fields = [
     { key: "name", label: "Name" },
     { key: "description", label: "Description" },
@@ -195,7 +198,22 @@ async function importVersion(trsId?: string, toolIdToImport?: string, version?:
                             @onImport="(versionId) => importVersion(trsSelection?.id, row.item.data.id, versionId)" />
                     </BCard>
                 </template>
+
+                <template v-slot:cell(description)="row">
+                    <span class="trs-description" v-html="renderMarkdown(row.item.data.description)" />
+                </template>
             </BTable>
         </div>
     </BCard>
 </template>
+
+<style>
+.trs-description {
+    position: relative;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+}
+</style>

client/src/components/Workflow/Import/TrsTool.vue

@@ -4,6 +4,8 @@ import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 
+import { useMarkdown } from "@/composables/markdown";
+
 import type { TrsTool, TrsToolVersion } from "./types";
 
 library.add(faUpload);
@@ -18,6 +20,8 @@ const emit = defineEmits<{
     (e: "onImport", versionId: string): void;
 }>();
 
+const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
+
 function importVersion(version: TrsToolVersion) {
     const version_id = version.id.includes(`:${version.name}`) ? version.name : version.id;
     emit("onImport", version_id);
@@ -34,7 +38,7 @@ function importVersion(version: TrsToolVersion) {
         <div>
             <b>Description:</b>
 
-            <span>{{ props.trsTool.description }}</span>
+            <span v-html="renderMarkdown(props.trsTool.description)" />
         </div>
         <div>
             <b>Organization</b>

client/src/utils/navigation/navigation.yml

@@ -680,7 +680,7 @@ trs_search:
     search: "#trs-search-query"
     search_result:
       type: xpath
-      selector: "//td[contains(text(), '${workflow_name}')]"
+      selector: "//td[contains(., '${workflow_name}')]"
     import_button: ".workflow-import"
     select_server_button: "#dropdownTrsServer"
     import_version: '[data-version-name*="${version}"]'