From 8f6127a41fd49d510137e94bf8606844c48a49b3 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Feb 2023 13:19:05 +0100
Subject: [PATCH 1/9] add configurable gtn integration

---
 client/src/components/Tool/ToolCard.vue       |   7 +
 .../Tool/ToolTutorialRecommendations.vue      |  74 ++++++++
 .../src/composables/toolTrainingMaterial.ts   | 168 ++++++++++++++++++
 client/src/style/scss/ui.scss                 |   4 +
 doc/source/admin/galaxy_options.rst           |  32 ++++
 lib/galaxy/config/sample/galaxy.yml.sample    |  24 ++-
 lib/galaxy/config/schemas/config_schema.yml   |  29 +++
 lib/galaxy/managers/configuration.py          |   3 +
 8 files changed, 335 insertions(+), 6 deletions(-)
 create mode 100644 client/src/components/Tool/ToolTutorialRecommendations.vue
 create mode 100644 client/src/composables/toolTrainingMaterial.ts

diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
index 54770c5590e..692b39faa3a 100644
--- a/client/src/components/Tool/ToolCard.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -9,6 +9,7 @@ import Heading from "components/Common/Heading";
 import ToolSelectPreferredObjectStore from "./ToolSelectPreferredObjectStore";
 import ToolTargetPreferredObjectStorePopover from "./ToolTargetPreferredObjectStorePopover";
 import { getAppRoot } from "onload/loadConfig";
+import ToolTutorialRecommendations from "./ToolTutorialRecommendations.vue";
 
 import { computed, ref, watch } from "vue";
 import { useCurrentUser } from "composables/user";
@@ -165,6 +166,12 @@ function onUpdatePreferredObjectStoreId(selectedToolPreferredObjectStoreId) {
         <slot name="buttons" />
 
         <div>
+            <ToolTutorialRecommendations
+                :id="props.options.id"
+                :name="props.options.name"
+                :version="props.options.version"
+                :repository="props.options.tool_shed_repository?.owner" />
+
             <div class="mt-2 mb-4">
                 <Heading h2 separator bold size="sm"> Help </Heading>
                 <ToolHelp :content="props.options.help" />
diff --git a/client/src/components/Tool/ToolTutorialRecommendations.vue b/client/src/components/Tool/ToolTutorialRecommendations.vue
new file mode 100644
index 00000000000..fb3541cd0f9
--- /dev/null
+++ b/client/src/components/Tool/ToolTutorialRecommendations.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import Heading from "@/components/Common/Heading.vue";
+import { useToolTrainingMaterial } from "@/composables/toolTrainingMaterial";
+import ExternalLink from "../ExternalLink.vue";
+import { BCollapse, BButton } from "bootstrap-vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
+import { useUid } from "@/composables/utils/uid";
+import slugify from "slugify";
+
+const props = defineProps<{
+    name: string;
+    id: string;
+    version: string;
+    repository?: string;
+}>();
+
+//@ts-ignore: bad library types
+library.add(faCaretDown);
+
+const { trainingAvailable, trainingCategories, tutorialDetails, allTutorialsUrl, versionAvailable } =
+    useToolTrainingMaterial(props.id, props.name, props.version, props.repository);
+
+const collapseId = useUid("collapse-");
+
+function idForCategory(category: string) {
+    return `${collapseId.value}-${slugify(category)}`;
+}
+
+function tutorialsInCategory(category: string) {
+    return tutorialDetails.value.filter((tut) => tut.category === category);
+}
+</script>
+
+<template>
+    <div v-if="trainingAvailable" class="mt-2 mb-4">
+        <Heading h2 separator bold size="sm">Tutorials</Heading>
+
+        <p>
+            There are {{ tutorialDetails.length }} tutorials available which use this tool.
+            <span v-if="versionAvailable"> These tutorials include training for the current version of the tool. </span>
+
+            <ExternalLink v-if="allTutorialsUrl" :href="allTutorialsUrl">
+                View all tutorials referencing this tool.
+            </ExternalLink>
+        </p>
+
+        <BButton v-b-toggle="collapseId" class="ui-link">
+            <b>
+                Tutorials available in {{ trainingCategories.length }}
+                {{ trainingCategories.length > 1 ? "categories" : "category" }}
+            </b>
+            <FontAwesomeIcon icon="caret-down" />
+        </BButton>
+        <BCollapse :id="collapseId">
+            <div v-for="category in trainingCategories" :key="category">
+                <BButton v-b-toggle="idForCategory(category)" class="ui-link ml-3">
+                    {{ category }} ({{ tutorialsInCategory(category).length }})
+                    <FontAwesomeIcon icon="caret-down" />
+                </BButton>
+                <BCollapse :id="idForCategory(category)">
+                    <ul class="d-flex flex-column my-1">
+                        <li v-for="tutorial in tutorialsInCategory(category)" :key="tutorial.title">
+                            <ExternalLink :href="tutorial.url.toString()" class="ml-2">
+                                {{ tutorial.title }}
+                            </ExternalLink>
+                        </li>
+                    </ul>
+                </BCollapse>
+            </div>
+        </BCollapse>
+    </div>
+</template>
diff --git a/client/src/composables/toolTrainingMaterial.ts b/client/src/composables/toolTrainingMaterial.ts
new file mode 100644
index 00000000000..3589806bd74
--- /dev/null
+++ b/client/src/composables/toolTrainingMaterial.ts
@@ -0,0 +1,168 @@
+import { useConfig } from "./config";
+import { computed, ref, watch, type Ref } from "vue";
+
+type Name = string;
+type Repo = string;
+type ID = string;
+
+type TrainingId = `${Repo}/${Name}` | ID;
+
+type TrainingDetails = {
+    tool_id: Array<
+        [
+            string, // ID (unused)
+            string // Version
+        ]
+    >;
+    tutorials: Array<
+        [
+            string, // tutorial ID (unused)
+            string, // Title
+            string, // Category
+            string // URL
+        ]
+    >;
+};
+
+type TrainingMaterialResponse = {
+    [id: TrainingId]: TrainingDetails;
+};
+
+type Config = {
+    tool_training_recommendations: boolean;
+    tool_training_recommendations_api_url: string;
+    tool_training_recommendations_link: string;
+};
+
+export type TutorialDetails = {
+    category: string;
+    title: string;
+    url: URL;
+};
+
+const cachedResponse: Ref<TrainingMaterialResponse | null> = ref(null);
+
+export function useToolTrainingMaterial(id: ID, name: Name, version: string, repo?: Repo) {
+    const { config, isLoaded }: { config: Ref<Config>; isLoaded: Ref<boolean> } = useConfig();
+    const apiEnabled = computed(() => {
+        return Boolean(
+            isLoaded.value &&
+                config.value.tool_training_recommendations &&
+                config.value.tool_training_recommendations_api_url
+        );
+    });
+
+    watch(
+        () => isLoaded.value,
+        async () => {
+            if (!isLoaded.value) {
+                return;
+            }
+
+            if (apiEnabled.value) {
+                const res = await fetch(config.value.tool_training_recommendations_api_url);
+
+                if (res.ok) {
+                    cachedResponse.value = await res.json();
+                }
+            }
+        },
+        { immediate: true }
+    );
+
+    const identifier = computed(() => {
+        if (repo) {
+            return `${repo}/${name.toLowerCase()}`;
+        } else {
+            return id;
+        }
+    });
+
+    const trainingAvailable = computed(() => {
+        if (!apiEnabled.value || !cachedResponse.value) {
+            return false;
+        }
+
+        return Object.keys(cachedResponse.value).includes(identifier.value);
+    });
+
+    const trainingDetails = computed(() => {
+        if (!trainingAvailable.value) {
+            return null;
+        }
+
+        return cachedResponse.value?.[identifier.value] ?? null;
+    });
+
+    const trainingCategories = computed<string[]>(() => {
+        if (!trainingDetails.value) {
+            return [];
+        }
+
+        const categories = new Set<string>();
+
+        trainingDetails.value.tutorials.forEach((tutorial) => {
+            categories.add(tutorial[2]);
+        });
+
+        return Array.from(categories);
+    });
+
+    const tutorialDetails = computed<TutorialDetails[]>(() => {
+        if (!trainingDetails.value) {
+            return [];
+        }
+
+        const details: TutorialDetails[] = [];
+
+        trainingDetails.value.tutorials.forEach((tutorial) => {
+            details.push({
+                title: tutorial[1],
+                category: tutorial[2],
+                url: new URL(tutorial[3], config.value.tool_training_recommendations_api_url),
+            });
+        });
+
+        return details;
+    });
+
+    const allTutorialsUrl = computed<string | undefined>(() => {
+        if (!isLoaded.value || !config.value.tool_training_recommendations_link) {
+            return;
+        }
+
+        let url = config.value.tool_training_recommendations_link;
+
+        url = url.replace("{training_tool_identifier}", identifier.value);
+        url = url.replace("{tool_id}", id);
+        url = url.replace("{name}", name);
+        url = url.replace("{repository}", repo ?? "");
+        url = url.replace("{version}", version);
+
+        return url;
+    });
+
+    const versionAvailable = computed<boolean>(() => {
+        if (!trainingDetails.value) {
+            return false;
+        }
+
+        for (let i = 0; i < trainingDetails.value.tool_id.length; i++) {
+            const element = trainingDetails.value.tool_id[i]!;
+
+            if (element[1] === version) {
+                return true;
+            }
+        }
+
+        return false;
+    });
+
+    return {
+        trainingAvailable,
+        trainingCategories,
+        tutorialDetails,
+        allTutorialsUrl,
+        versionAvailable,
+    };
+}
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index 8f2e316092d..244c6cb99b9 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -382,6 +382,10 @@ $ui-margin-horizontal-large: $margin-v * 2;
     column-gap: 0.25rem;
 }
 
+.flex-gapy-1 {
+    row-gap: 0.25rem;
+}
+
 /* Heading Sizes */
 .h-xl {
     font-size: $h1-font-size;
diff --git a/doc/source/admin/galaxy_options.rst b/doc/source/admin/galaxy_options.rst
index 6d75b11385e..d70b3c2290a 100644
--- a/doc/source/admin/galaxy_options.rst
+++ b/doc/source/admin/galaxy_options.rst
@@ -5080,4 +5080,36 @@
 :Type: bool
 
 
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+``tool_training_recommendations``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
+:Description:
+    Displays a link to training material, if any includes the current
+    tool. When activated the following options also need to be set:
+    - tool_training_recommendations_link
+:Default: ``true``
+:Type: bool
+
+
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+``tool_training_recommendations_link``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+:Description:
+    Template URL to display all tutorials containing current tool.
+    Valid template inputs are:   {repository}   {name}   {id}
+    {version}
+:Default: ``https://training.galaxyproject.org/training-material/by-tool/{repository}/{name}.html``
+:Type: str
+
+
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+``tool_training_recommendations_api_url``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+:Description:
+    URL to API describing tutorials containing specific tools. When
+    CORS is used, make sure to add this host.
+:Default: ``https://training.galaxyproject.org/training-material/api/top-tools.json``
+:Type: str
diff --git a/lib/galaxy/config/sample/galaxy.yml.sample b/lib/galaxy/config/sample/galaxy.yml.sample
index 9e34bd51206..e039f198b4a 100644
--- a/lib/galaxy/config/sample/galaxy.yml.sample
+++ b/lib/galaxy/config/sample/galaxy.yml.sample
@@ -1,21 +1,21 @@
 # Galaxy is configured by default to be usable in a single-user development
 # environment.  To tune the application for a multi-user production
 # environment, see the documentation at:
-# 
+#
 #  https://docs.galaxyproject.org/en/master/admin/production.html
-# 
+#
 # Throughout this sample configuration file, except where stated otherwise,
 # uncommented values override the default if left unset, whereas commented
 # values are set to the default value.  Relative paths are relative to the root
 # Galaxy directory.
-# 
+#
 # Examples of many of these options are explained in more detail in the Galaxy
 # Community Hub.
-# 
+#
 #   https://galaxyproject.org/admin/config
-# 
+#
 # Config hackers are encouraged to check there before asking for help.
-# 
+#
 # Configuration for Gravity process manager.
 # ``uwsgi:`` section will be ignored if Galaxy is started via Gravity commands (e.g ``./run.sh``, ``galaxy`` or ``galaxyctl``).
 gravity:
@@ -2710,3 +2710,15 @@ galaxy:
   # integration.
   #enable_beacon_integration: false
 
+  # Displays a link to training material, if any includes the current
+  # tool. When activated the following options also need to be set:   -
+  # tool_training_recommendations_link
+  #tool_training_recommendations: true
+
+  # Template URL to display all tutorials containing current tool. Valid
+  # template inputs are:   {repository}   {name}   {id}   {version}
+  #tool_training_recommendations_link: https://training.galaxyproject.org/training-material/by-tool/{repository}/{name}.html
+
+  # URL to API describing tutorials containing specific tools. When CORS
+  # is used, make sure to add this host.
+  #tool_training_recommendations_api_url: https://training.galaxyproject.org/training-material/api/top-tools.json
diff --git a/lib/galaxy/config/schemas/config_schema.yml b/lib/galaxy/config/schemas/config_schema.yml
index ccc0955444b..befb4e953b6 100644
--- a/lib/galaxy/config/schemas/config_schema.yml
+++ b/lib/galaxy/config/schemas/config_schema.yml
@@ -3698,3 +3698,32 @@ mapping:
         desc: |
           Enables user preferences and api endpoint for the beacon integration.
 
+      tool_training_recommendations:
+        type: bool
+        default: true
+        required: false
+        desc: |
+          Displays a link to training material, if any includes the current tool.
+          When activated the following options also need to be set:
+            - tool_training_recommendations_link
+
+      tool_training_recommendations_link:
+        type: str
+        default: https://training.galaxyproject.org/training-material/by-tool/{training_tool_identifier}.html
+        required: false
+        desc: |
+          Template URL to display all tutorials containing current tool.
+          Valid template inputs are:
+            {repository}
+            {name}
+            {tool_id}
+            {training_tool_identifier}
+            {version}
+
+      tool_training_recommendations_api_url:
+        type: str
+        default: https://training.galaxyproject.org/training-material/api/top-tools.json
+        required: false
+        desc: |
+          URL to API describing tutorials containing specific tools.
+          When CORS is used, make sure to add this host.
diff --git a/lib/galaxy/managers/configuration.py b/lib/galaxy/managers/configuration.py
index dd87c229486..55e3cc018e8 100644
--- a/lib/galaxy/managers/configuration.py
+++ b/lib/galaxy/managers/configuration.py
@@ -203,6 +203,9 @@ class ConfigSerializer(base.ModelSerializer):
             "user_library_import_dir_available": lambda item, key, **context: bool(item.get("user_library_import_dir")),
             "welcome_directory": _use_config,
             "themes": _use_config,
+            "tool_training_recommendations": _use_config,
+            "tool_training_recommendations_link": _use_config,
+            "tool_training_recommendations_api_url": _use_config,
         }
 
 

From 0a26f58bc40954fe234db67fd854061105b77ec3 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Feb 2023 14:32:27 +0100
Subject: [PATCH 2/9] fix config description

---
 doc/source/admin/galaxy_options.rst         |  9 +++++----
 lib/galaxy/config/sample/galaxy.yml.sample  | 10 ++++++----
 lib/galaxy/config/schemas/config_schema.yml |  3 ++-
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/doc/source/admin/galaxy_options.rst b/doc/source/admin/galaxy_options.rst
index d70b3c2290a..30093f71de5 100644
--- a/doc/source/admin/galaxy_options.rst
+++ b/doc/source/admin/galaxy_options.rst
@@ -5087,7 +5087,8 @@
 :Description:
     Displays a link to training material, if any includes the current
     tool. When activated the following options also need to be set:
-    - tool_training_recommendations_link
+    tool_training_recommendations_link,
+    tool_training_recommendations_api_url
 :Default: ``true``
 :Type: bool
 
@@ -5098,9 +5099,9 @@
 
 :Description:
     Template URL to display all tutorials containing current tool.
-    Valid template inputs are:   {repository}   {name}   {id}
-    {version}
-:Default: ``https://training.galaxyproject.org/training-material/by-tool/{repository}/{name}.html``
+    Valid template inputs are:   {repository}   {name}   {tool_id}
+    {training_tool_identifier}   {version}
+:Default: ``https://training.galaxyproject.org/training-material/by-tool/{training_tool_identifier}.html``
 :Type: str
 
 
diff --git a/lib/galaxy/config/sample/galaxy.yml.sample b/lib/galaxy/config/sample/galaxy.yml.sample
index e039f198b4a..02261b95e66 100644
--- a/lib/galaxy/config/sample/galaxy.yml.sample
+++ b/lib/galaxy/config/sample/galaxy.yml.sample
@@ -2711,13 +2711,15 @@ galaxy:
   #enable_beacon_integration: false
 
   # Displays a link to training material, if any includes the current
-  # tool. When activated the following options also need to be set:   -
-  # tool_training_recommendations_link
+  # tool. When activated the following options also need to be set:
+  # tool_training_recommendations_link,
+  # tool_training_recommendations_api_url
   #tool_training_recommendations: true
 
   # Template URL to display all tutorials containing current tool. Valid
-  # template inputs are:   {repository}   {name}   {id}   {version}
-  #tool_training_recommendations_link: https://training.galaxyproject.org/training-material/by-tool/{repository}/{name}.html
+  # template inputs are:   {repository}   {name}   {tool_id}
+  # {training_tool_identifier}   {version}
+  #tool_training_recommendations_link: https://training.galaxyproject.org/training-material/by-tool/{training_tool_identifier}.html
 
   # URL to API describing tutorials containing specific tools. When CORS
   # is used, make sure to add this host.
diff --git a/lib/galaxy/config/schemas/config_schema.yml b/lib/galaxy/config/schemas/config_schema.yml
index befb4e953b6..7035f1e0d7f 100644
--- a/lib/galaxy/config/schemas/config_schema.yml
+++ b/lib/galaxy/config/schemas/config_schema.yml
@@ -3705,7 +3705,8 @@ mapping:
         desc: |
           Displays a link to training material, if any includes the current tool.
           When activated the following options also need to be set:
-            - tool_training_recommendations_link
+            tool_training_recommendations_link,
+            tool_training_recommendations_api_url
 
       tool_training_recommendations_link:
         type: str

From b967fd61a15be1ccefe837bec09d56faee4b2191 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Feb 2023 14:45:45 +0100
Subject: [PATCH 3/9] dont reload cache on tool change

---
 client/src/composables/toolTrainingMaterial.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/composables/toolTrainingMaterial.ts b/client/src/composables/toolTrainingMaterial.ts
index 3589806bd74..5f797c72a6d 100644
--- a/client/src/composables/toolTrainingMaterial.ts
+++ b/client/src/composables/toolTrainingMaterial.ts
@@ -59,7 +59,7 @@ export function useToolTrainingMaterial(id: ID, name: Name, version: string, rep
                 return;
             }
 
-            if (apiEnabled.value) {
+            if (apiEnabled.value && !cachedResponse.value) {
                 const res = await fetch(config.value.tool_training_recommendations_api_url);
 
                 if (res.ok) {

From 0a7ad2a18fca454cfda6d7e9aba0dbb08ba14b50 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Feb 2023 16:45:01 +0100
Subject: [PATCH 4/9] fix text for single tutorial

---
 .../components/Tool/ToolTutorialRecommendations.vue   | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Tool/ToolTutorialRecommendations.vue b/client/src/components/Tool/ToolTutorialRecommendations.vue
index fb3541cd0f9..fbaad52a9fd 100644
--- a/client/src/components/Tool/ToolTutorialRecommendations.vue
+++ b/client/src/components/Tool/ToolTutorialRecommendations.vue
@@ -8,6 +8,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { useUid } from "@/composables/utils/uid";
 import slugify from "slugify";
+import { computed } from "vue";
 
 const props = defineProps<{
     name: string;
@@ -31,6 +32,14 @@ function idForCategory(category: string) {
 function tutorialsInCategory(category: string) {
     return tutorialDetails.value.filter((tut) => tut.category === category);
 }
+
+const tutorialText = computed(() => {
+    if (tutorialDetails.value.length > 1) {
+        return `There are ${tutorialDetails.value.length} tutorials available which use this tool.`;
+    } else {
+        return "There is 1 tutorial available which uses this tool.";
+    }
+});
 </script>
 
 <template>
@@ -38,7 +47,7 @@ function tutorialsInCategory(category: string) {
         <Heading h2 separator bold size="sm">Tutorials</Heading>
 
         <p>
-            There are {{ tutorialDetails.length }} tutorials available which use this tool.
+            {{ tutorialText }}
             <span v-if="versionAvailable"> These tutorials include training for the current version of the tool. </span>
 
             <ExternalLink v-if="allTutorialsUrl" :href="allTutorialsUrl">

From 6854cd10917fc99b7009128b414988b937358051 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Feb 2023 16:47:31 +0100
Subject: [PATCH 5/9] fix user select for ui-link

---
 client/src/style/scss/ui.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index 244c6cb99b9..422f9d70685 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -416,6 +416,7 @@ $ui-margin-horizontal-large: $margin-v * 2;
     display: inline;
     line-height: unset;
     vertical-align: unset;
+    user-select: text;
 
     &:hover {
         text-decoration: underline;

From 568624ce7014bcfd657fdf069091e85b1ff08fda Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 22 Feb 2023 11:41:23 +0100
Subject: [PATCH 6/9] match using tool id rename repository to owner

---
 client/src/components/Tool/ToolCard.vue       |  2 +-
 .../Tool/ToolTutorialRecommendations.vue      |  4 +-
 .../src/composables/toolTrainingMaterial.ts   | 52 ++++++++++++++-----
 client/src/utils/regExp.ts                    | 10 ++++
 doc/source/admin/galaxy_options.rst           |  4 +-
 lib/galaxy/config/sample/galaxy.yml.sample    |  2 +-
 lib/galaxy/config/schemas/config_schema.yml   |  2 +-
 7 files changed, 55 insertions(+), 21 deletions(-)
 create mode 100644 client/src/utils/regExp.ts

diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
index 692b39faa3a..6e89980695a 100644
--- a/client/src/components/Tool/ToolCard.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -170,7 +170,7 @@ function onUpdatePreferredObjectStoreId(selectedToolPreferredObjectStoreId) {
                 :id="props.options.id"
                 :name="props.options.name"
                 :version="props.options.version"
-                :repository="props.options.tool_shed_repository?.owner" />
+                :owner="props.options.tool_shed_repository?.owner" />
 
             <div class="mt-2 mb-4">
                 <Heading h2 separator bold size="sm"> Help </Heading>
diff --git a/client/src/components/Tool/ToolTutorialRecommendations.vue b/client/src/components/Tool/ToolTutorialRecommendations.vue
index fbaad52a9fd..1d8cc5a7979 100644
--- a/client/src/components/Tool/ToolTutorialRecommendations.vue
+++ b/client/src/components/Tool/ToolTutorialRecommendations.vue
@@ -14,14 +14,14 @@ const props = defineProps<{
     name: string;
     id: string;
     version: string;
-    repository?: string;
+    owner?: string;
 }>();
 
 //@ts-ignore: bad library types
 library.add(faCaretDown);
 
 const { trainingAvailable, trainingCategories, tutorialDetails, allTutorialsUrl, versionAvailable } =
-    useToolTrainingMaterial(props.id, props.name, props.version, props.repository);
+    useToolTrainingMaterial(props.id, props.name, props.version, props.owner);
 
 const collapseId = useUid("collapse-");
 
diff --git a/client/src/composables/toolTrainingMaterial.ts b/client/src/composables/toolTrainingMaterial.ts
index 5f797c72a6d..f437d96271e 100644
--- a/client/src/composables/toolTrainingMaterial.ts
+++ b/client/src/composables/toolTrainingMaterial.ts
@@ -1,16 +1,11 @@
 import { useConfig } from "./config";
 import { computed, ref, watch, type Ref } from "vue";
-
-type Name = string;
-type Repo = string;
-type ID = string;
-
-type TrainingId = `${Repo}/${Name}` | ID;
+import { escapeRegExp } from "@/utils/regExp";
 
 type TrainingDetails = {
     tool_id: Array<
         [
-            string, // ID (unused)
+            string, // toolshed tool ID
             string // Version
         ]
     >;
@@ -25,7 +20,7 @@ type TrainingDetails = {
 };
 
 type TrainingMaterialResponse = {
-    [id: TrainingId]: TrainingDetails;
+    [id: string]: TrainingDetails;
 };
 
 type Config = {
@@ -40,9 +35,30 @@ export type TutorialDetails = {
     url: URL;
 };
 
+/** caches the response of the training material api */
 const cachedResponse: Ref<TrainingMaterialResponse | null> = ref(null);
 
-export function useToolTrainingMaterial(id: ID, name: Name, version: string, repo?: Repo) {
+/** maps toolshed tool ids to training tool ids */
+const toolIdMap: Map<string, string> = new Map();
+
+function mapToolIds() {
+    Object.entries(cachedResponse.value ?? {}).forEach(([trainingId, details]) => {
+        details.tool_id.forEach(([id, version]) => {
+            if (id === version) {
+                // built-in tool
+                toolIdMap.set(id, trainingId);
+            } else {
+                const regEx = new RegExp(`${escapeRegExp(version)}$`);
+                const trimmedId = id.replace(regEx, "");
+
+                toolIdMap.set(trimmedId, trainingId);
+            }
+        });
+    });
+}
+
+/** Training information about given tool */
+export function useToolTrainingMaterial(id: string, name: string, version: string, owner?: string) {
     const { config, isLoaded }: { config: Ref<Config>; isLoaded: Ref<boolean> } = useConfig();
     const apiEnabled = computed(() => {
         return Boolean(
@@ -52,6 +68,8 @@ export function useToolTrainingMaterial(id: ID, name: Name, version: string, rep
         );
     });
 
+    const cacheLoaded = ref(false);
+
     watch(
         () => isLoaded.value,
         async () => {
@@ -64,17 +82,23 @@ export function useToolTrainingMaterial(id: ID, name: Name, version: string, rep
 
                 if (res.ok) {
                     cachedResponse.value = await res.json();
+                    mapToolIds();
                 }
             }
+
+            cacheLoaded.value = true;
         },
         { immediate: true }
     );
 
     const identifier = computed(() => {
-        if (repo) {
-            return `${repo}/${name.toLowerCase()}`;
+        const regEx = new RegExp(`${escapeRegExp(version)}$`);
+        const trimmedId = id.replace(regEx, "");
+
+        if (!cacheLoaded.value) {
+            return trimmedId;
         } else {
-            return id;
+            return toolIdMap.get(trimmedId) ?? trimmedId;
         }
     });
 
@@ -127,7 +151,7 @@ export function useToolTrainingMaterial(id: ID, name: Name, version: string, rep
     });
 
     const allTutorialsUrl = computed<string | undefined>(() => {
-        if (!isLoaded.value || !config.value.tool_training_recommendations_link) {
+        if (!cacheLoaded.value || !config.value.tool_training_recommendations_link) {
             return;
         }
 
@@ -136,7 +160,7 @@ export function useToolTrainingMaterial(id: ID, name: Name, version: string, rep
         url = url.replace("{training_tool_identifier}", identifier.value);
         url = url.replace("{tool_id}", id);
         url = url.replace("{name}", name);
-        url = url.replace("{repository}", repo ?? "");
+        url = url.replace("{repository_owner}", owner ?? "");
         url = url.replace("{version}", version);
 
         return url;
diff --git a/client/src/utils/regExp.ts b/client/src/utils/regExp.ts
new file mode 100644
index 00000000000..a9f4d733295
--- /dev/null
+++ b/client/src/utils/regExp.ts
@@ -0,0 +1,10 @@
+/**
+ * Escapes all RegExp control characters from a string, so it can be matched literally
+ * @param string input string
+ * @returns string with all control characters escaped
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
+ */
+export function escapeRegExp(string: string) {
+    return string.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+}
diff --git a/doc/source/admin/galaxy_options.rst b/doc/source/admin/galaxy_options.rst
index 30093f71de5..72ac0c27914 100644
--- a/doc/source/admin/galaxy_options.rst
+++ b/doc/source/admin/galaxy_options.rst
@@ -5099,8 +5099,8 @@
 
 :Description:
     Template URL to display all tutorials containing current tool.
-    Valid template inputs are:   {repository}   {name}   {tool_id}
-    {training_tool_identifier}   {version}
+    Valid template inputs are:   {repository_owner}   {name}
+    {tool_id}   {training_tool_identifier}   {version}
 :Default: ``https://training.galaxyproject.org/training-material/by-tool/{training_tool_identifier}.html``
 :Type: str
 
diff --git a/lib/galaxy/config/sample/galaxy.yml.sample b/lib/galaxy/config/sample/galaxy.yml.sample
index 02261b95e66..0eeee9fe671 100644
--- a/lib/galaxy/config/sample/galaxy.yml.sample
+++ b/lib/galaxy/config/sample/galaxy.yml.sample
@@ -2717,7 +2717,7 @@ galaxy:
   #tool_training_recommendations: true
 
   # Template URL to display all tutorials containing current tool. Valid
-  # template inputs are:   {repository}   {name}   {tool_id}
+  # template inputs are:   {repository_owner}   {name}   {tool_id}
   # {training_tool_identifier}   {version}
   #tool_training_recommendations_link: https://training.galaxyproject.org/training-material/by-tool/{training_tool_identifier}.html
 
diff --git a/lib/galaxy/config/schemas/config_schema.yml b/lib/galaxy/config/schemas/config_schema.yml
index 7035f1e0d7f..16238812eb9 100644
--- a/lib/galaxy/config/schemas/config_schema.yml
+++ b/lib/galaxy/config/schemas/config_schema.yml
@@ -3715,7 +3715,7 @@ mapping:
         desc: |
           Template URL to display all tutorials containing current tool.
           Valid template inputs are:
-            {repository}
+            {repository_owner}
             {name}
             {tool_id}
             {training_tool_identifier}

From fd56a9f1e59ee0af30dd5d32886f396b06706c16 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 22 Feb 2023 11:45:36 +0100
Subject: [PATCH 7/9] move tutorials to bottom show help section conditionally

---
 client/src/components/Tool/ToolCard.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
index 6e89980695a..744453d8642 100644
--- a/client/src/components/Tool/ToolCard.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -166,13 +166,7 @@ function onUpdatePreferredObjectStoreId(selectedToolPreferredObjectStoreId) {
         <slot name="buttons" />
 
         <div>
-            <ToolTutorialRecommendations
-                :id="props.options.id"
-                :name="props.options.name"
-                :version="props.options.version"
-                :owner="props.options.tool_shed_repository?.owner" />
-
-            <div class="mt-2 mb-4">
+            <div v-if="props.options.help" class="mt-2 mb-4">
                 <Heading h2 separator bold size="sm"> Help </Heading>
                 <ToolHelp :content="props.options.help" />
             </div>
@@ -184,6 +178,12 @@ function onUpdatePreferredObjectStoreId(selectedToolPreferredObjectStoreId) {
                 :license="props.options.license"
                 :creators="props.options.creators"
                 :requirements="props.options.requirements" />
+
+            <ToolTutorialRecommendations
+                :id="props.options.id"
+                :name="props.options.name"
+                :version="props.options.version"
+                :owner="props.options.tool_shed_repository?.owner" />
         </div>
     </div>
 </template>

From a8aa365fc007203b5b34f1eb1e28b32b96657898 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 22 Feb 2023 11:46:54 +0100
Subject: [PATCH 8/9] move tutorials above footer

---
 client/src/components/Tool/ToolCard.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
index 744453d8642..4de127fc9db 100644
--- a/client/src/components/Tool/ToolCard.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -171,6 +171,12 @@ function onUpdatePreferredObjectStoreId(selectedToolPreferredObjectStoreId) {
                 <ToolHelp :content="props.options.help" />
             </div>
 
+            <ToolTutorialRecommendations
+                :id="props.options.id"
+                :name="props.options.name"
+                :version="props.options.version"
+                :owner="props.options.tool_shed_repository?.owner" />
+
             <ToolFooter
                 :id="props.id"
                 :has-citations="props.options.citations"
@@ -178,12 +184,6 @@ function onUpdatePreferredObjectStoreId(selectedToolPreferredObjectStoreId) {
                 :license="props.options.license"
                 :creators="props.options.creators"
                 :requirements="props.options.requirements" />
-
-            <ToolTutorialRecommendations
-                :id="props.options.id"
-                :name="props.options.name"
-                :version="props.options.version"
-                :owner="props.options.tool_shed_repository?.owner" />
         </div>
     </div>
 </template>

From 2a3bcf378ef7ca64443094d16180a19317428a84 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 26 Apr 2023 11:54:04 +0200
Subject: [PATCH 9/9] import ExtrenalLink via absolute path

Co-authored-by: Alireza Heidari <itisalirh@gmail.com>
---
 client/src/components/Tool/ToolTutorialRecommendations.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Tool/ToolTutorialRecommendations.vue b/client/src/components/Tool/ToolTutorialRecommendations.vue
index 1d8cc5a7979..e253a108905 100644
--- a/client/src/components/Tool/ToolTutorialRecommendations.vue
+++ b/client/src/components/Tool/ToolTutorialRecommendations.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Heading from "@/components/Common/Heading.vue";
 import { useToolTrainingMaterial } from "@/composables/toolTrainingMaterial";
-import ExternalLink from "../ExternalLink.vue";
+import ExternalLink from "@/components/ExternalLink.vue";
 import { BCollapse, BButton } from "bootstrap-vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";