Unverified Commit 0d9ae69b authored by Alireza Heidari's avatar Alireza Heidari
Browse files

Renders tool descriptions as markdown in TRS imports 

Improves readability by rendering tool descriptions as markdown with support for links opening in new tabs.
Enhances the user interface by visually limiting description length in tables.
parent 66940cac

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

+18 −0
Original line number Diff line number Diff line
@@ -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

+5 −1
Original line number Diff line number Diff line
@@ -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>