From e39050ed97c1277136cde6af9c986acad2a922ac Mon Sep 17 00:00:00 2001
From: hujambo-dunia <“MSavage07@gsb.columbia.edu”>
Date: Thu, 26 May 2022 13:14:02 -0400
Subject: [PATCH 1/6] new Vue file with retained SEO performance considerations
 and test script

---
 client/src/components/Tour/Tour.test.js     | 30 ++++++++
 client/src/components/Tour/TourList.vue     | 80 +++++++++++++++++++++
 client/src/entry/analysis/AnalysisRouter.js |  5 +-
 client/src/layout/menu.js                   |  5 ++
 4 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/Tour/Tour.test.js
 create mode 100644 client/src/components/Tour/TourList.vue

diff --git a/client/src/components/Tour/Tour.test.js b/client/src/components/Tour/Tour.test.js
new file mode 100644
index 00000000000..b1d6eb74b2d
--- /dev/null
+++ b/client/src/components/Tour/Tour.test.js
@@ -0,0 +1,30 @@
+import { shallowMount } from "@vue/test-utils";
+import { getLocalVue } from "jest/helpers";
+import TourList from "./TourList.vue";
+import MockAdapter from "axios-mock-adapter";
+import axios from "axios";
+import flushPromises from "flush-promises";
+
+const localVue = getLocalVue();
+const TEST_TOUR_URI = "/api/tours";
+
+jest.mock("app");
+
+describe("Tour", () => {
+    let axiosMock;
+    let wrapper;
+
+    beforeEach(async () => {
+        axiosMock = new MockAdapter(axios);
+        axiosMock.onGet(TEST_TOUR_URI).reply(200, [{ id: "foo", writable: false }]);
+        wrapper = shallowMount(TourList, {
+            propsData: {},
+            localVue,
+        });
+        await flushPromises();
+    });
+
+    it("test tours", async () => {
+        expect(wrapper.find("#tourList").exists()).toBeTruthy();
+    });
+});
diff --git a/client/src/components/Tour/TourList.vue b/client/src/components/Tour/TourList.vue
new file mode 100644
index 00000000000..57442a54172
--- /dev/null
+++ b/client/src/components/Tour/TourList.vue
@@ -0,0 +1,80 @@
+<template>
+    <div class="ui-thumbnails">
+        <h2>Galaxy Tours</h2>
+        <p>
+            This page presents a list of interactive tours available on this Galaxy server. Select any tour to get
+            started (and remember, you can click 'End Tour' at any time).
+        </p>
+        <h4>Tours</h4>
+        <div v-if="error" class="alert alert-danger">{{ error }}</div>
+        <div v-else>
+            <DelayedInput class="mb-3" :query="search" :placeholder="searchTours" :delay="0" @change="onSearch" />
+            <div v-for="tour in tours" :key="tour.id">
+                <ul v-if="match(tour)" id="tourList" class="list-group">
+                    <li class="list-group-item">
+                        <a :href="`${root}tours/${tour.id}`"> {{ tour.name || tour.id }} </a>&nbsp;&minus;&nbsp;
+                        {{ tour.description }}
+                        <span
+                            v-for="(tag, index) in tour.tags"
+                            :key="index"
+                            class="badge badge-primary text-capitalize">
+                            {{ tag }}
+                        </span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import _l from "utils/localization";
+import { getAppRoot } from "onload/loadConfig";
+import axios from "axios";
+import DelayedInput from "components/Common/DelayedInput";
+
+export default {
+    components: {
+        DelayedInput,
+    },
+    data() {
+        return {
+            tours: [],
+            search: "",
+            error: null,
+            searchTours: _l("search tours"),
+        };
+    },
+    created() {
+        this.root = getAppRoot();
+        const api = `${this.root}api/tours`;
+        axios
+            .get(api)
+            .then((response) => {
+                this.tours = response.data;
+            })
+            .catch((e) => {
+                this.error = this._errorMessage(e);
+            });
+    },
+    methods: {
+        onSearch(newValue) {
+            this.search = newValue;
+        },
+        match(tour) {
+            const query = this.search.toLowerCase();
+            return (
+                !query ||
+                (tour.id && tour.id.toLowerCase().includes(query)) ||
+                (tour.name && tour.name.toLowerCase().includes(query)) ||
+                (tour.description && tour.description.toLowerCase().includes(query)) ||
+                (tour.tags && tour.tags.join().toLowerCase().includes(query))
+            );
+        },
+        _errorMessage(e) {
+            const message = e && e.response && e.response.data && e.response.data.err_msg;
+            return message || "Request failed for an unknown reason.";
+        },
+    },
+};
+</script>
diff --git a/client/src/entry/analysis/AnalysisRouter.js b/client/src/entry/analysis/AnalysisRouter.js
index f5ba3e4648a..002d3764135 100644
--- a/client/src/entry/analysis/AnalysisRouter.js
+++ b/client/src/entry/analysis/AnalysisRouter.js
@@ -23,6 +23,7 @@ import DatasetList from "components/Dataset/DatasetList";
 import { getUserPreferencesModel } from "components/User/UserPreferencesModel";
 import CustomBuilds from "components/User/CustomBuilds";
 import { runTour } from "components/Tour/runTour";
+import TourList from "components/Tour/TourList";
 import GridView from "mvc/grid/grid-view";
 import GridShared from "mvc/grid/grid-shared";
 import JobDetails from "components/JobInformation/JobDetails";
@@ -146,7 +147,9 @@ export const getAnalysisRouter = (Galaxy) => {
 
         show_tours: function (tour_id) {
             this.home();
-            if (tour_id) {
+            if (tour_id === "list" || !tour_id) {
+                this._display_vue_helper(TourList);
+            } else {
                 runTour(tour_id);
             }
         },
diff --git a/client/src/layout/menu.js b/client/src/layout/menu.js
index 0ed3a76019c..4115d2bd69f 100644
--- a/client/src/layout/menu.js
+++ b/client/src/layout/menu.js
@@ -200,6 +200,11 @@ export function fetchMenu(options = {}) {
                 url: options.citation_url,
                 target: "_blank",
             },
+            {
+                title: _l("Interactive Tours"),
+                url: "tours/list",
+                target: "__use_router__",
+            },
             {
                 title: _l("Introduction to Galaxy"),
                 url: "welcome/new",

From c283febcc2d84217d7ab9f6dc0b984ed6a260a97 Mon Sep 17 00:00:00 2001
From: hujambo-dunia <“MSavage07@gsb.columbia.edu”>
Date: Mon, 30 May 2022 15:06:06 -0400
Subject: [PATCH 2/6] api method call adjustment for error logging

---
 client/src/components/Tour/TourList.vue | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Tour/TourList.vue b/client/src/components/Tour/TourList.vue
index 57442a54172..0036993cc44 100644
--- a/client/src/components/Tour/TourList.vue
+++ b/client/src/components/Tour/TourList.vue
@@ -29,8 +29,7 @@
 
 <script>
 import _l from "utils/localization";
-import { getAppRoot } from "onload/loadConfig";
-import axios from "axios";
+import { urlData } from "utils/url";
 import DelayedInput from "components/Common/DelayedInput";
 
 export default {
@@ -46,16 +45,9 @@ export default {
         };
     },
     created() {
-        this.root = getAppRoot();
-        const api = `${this.root}api/tours`;
-        axios
-            .get(api)
-            .then((response) => {
-                this.tours = response.data;
-            })
-            .catch((e) => {
-                this.error = this._errorMessage(e);
-            });
+        urlData({ url: `api/tours` }).then((response) => {
+            this.tours = response;
+        });
     },
     methods: {
         onSearch(newValue) {

From c38d193057f24b5aa771a379a5c40aaf301f841d Mon Sep 17 00:00:00 2001
From: hujambo-dunia <“MSavage07@gsb.columbia.edu”>
Date: Wed, 1 Jun 2022 11:19:57 -0400
Subject: [PATCH 3/6] error message method

---
 client/src/components/Tour/TourList.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Tour/TourList.vue b/client/src/components/Tour/TourList.vue
index 0036993cc44..7f8c204cca2 100644
--- a/client/src/components/Tour/TourList.vue
+++ b/client/src/components/Tour/TourList.vue
@@ -45,9 +45,13 @@ export default {
         };
     },
     created() {
-        urlData({ url: `api/tours` }).then((response) => {
-            this.tours = response;
-        });
+        urlData({ url: `api/tours` })
+            .then((response) => {
+                this.tours = response;
+            })
+            .catch((error) => {
+                this.error = this._errorMessage(error);
+            });
     },
     methods: {
         onSearch(newValue) {

From 24c23a72816a9c5a66310ec8906c28dc87599a4e Mon Sep 17 00:00:00 2001
From: hujambo-dunia <“MSavage07@gsb.columbia.edu”>
Date: Wed, 1 Jun 2022 12:21:13 -0400
Subject: [PATCH 4/6] fix for old url route

---
 client/src/components/Tour/TourList.vue     | 3 +++
 client/src/entry/analysis/AnalysisRouter.js | 9 ++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Tour/TourList.vue b/client/src/components/Tour/TourList.vue
index 7f8c204cca2..a09d520772f 100644
--- a/client/src/components/Tour/TourList.vue
+++ b/client/src/components/Tour/TourList.vue
@@ -29,6 +29,7 @@
 
 <script>
 import _l from "utils/localization";
+import { getAppRoot } from "onload/loadConfig";
 import { urlData } from "utils/url";
 import DelayedInput from "components/Common/DelayedInput";
 
@@ -45,6 +46,8 @@ export default {
         };
     },
     created() {
+        this.root = getAppRoot();
+
         urlData({ url: `api/tours` })
             .then((response) => {
                 this.tours = response;
diff --git a/client/src/entry/analysis/AnalysisRouter.js b/client/src/entry/analysis/AnalysisRouter.js
index 002d3764135..6a49f3207be 100644
--- a/client/src/entry/analysis/AnalysisRouter.js
+++ b/client/src/entry/analysis/AnalysisRouter.js
@@ -68,6 +68,7 @@ export const getAnalysisRouter = (Galaxy) => {
             "(/)login/confirm": "show_new_user_confirmation",
             "(/)tools/view": "show_tools_view",
             "(/)tools/json": "show_tools_json",
+            "(/)tours": "show_tours_default",
             "(/)tours(/)(:tour_id)": "show_tours",
             "(/)user(/)": "show_user",
             "(/)user(/)cloud_auth": "show_cloud_auth",
@@ -147,13 +148,19 @@ export const getAnalysisRouter = (Galaxy) => {
 
         show_tours: function (tour_id) {
             this.home();
-            if (tour_id === "list" || !tour_id) {
+
+            if (tour_id === "list") {
                 this._display_vue_helper(TourList);
             } else {
                 runTour(tour_id);
             }
         },
 
+        show_tours_default: function () {
+            this.home();
+            this._display_vue_helper(TourList);
+        },
+
         show_new_user_confirmation: function () {
             this._display_vue_helper(NewUserConfirmation);
         },

From 260ff5f094e6ec675841f83424c32f48a369839e Mon Sep 17 00:00:00 2001
From: hujambo-dunia <“MSavage07@gsb.columbia.edu”>
Date: Wed, 1 Jun 2022 15:07:48 -0400
Subject: [PATCH 5/6] remove duplicate error method

---
 client/src/components/Tour/TourList.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/client/src/components/Tour/TourList.vue b/client/src/components/Tour/TourList.vue
index a09d520772f..4db4b20f499 100644
--- a/client/src/components/Tour/TourList.vue
+++ b/client/src/components/Tour/TourList.vue
@@ -47,13 +47,12 @@ export default {
     },
     created() {
         this.root = getAppRoot();
-
         urlData({ url: `api/tours` })
             .then((response) => {
                 this.tours = response;
             })
             .catch((error) => {
-                this.error = this._errorMessage(error);
+                this.error = error;
             });
     },
     methods: {
@@ -70,10 +69,6 @@ export default {
                 (tour.tags && tour.tags.join().toLowerCase().includes(query))
             );
         },
-        _errorMessage(e) {
-            const message = e && e.response && e.response.data && e.response.data.err_msg;
-            return message || "Request failed for an unknown reason.";
-        },
     },
 };
 </script>

From 20d4fa4205009c5e2b1c954ffa39e8720a345223 Mon Sep 17 00:00:00 2001
From: hujambo-dunia <“MSavage07@gsb.columbia.edu”>
Date: Wed, 1 Jun 2022 16:03:32 -0400
Subject: [PATCH 6/6] route removal to match new standardization

---
 client/src/entry/analysis/AnalysisRouter.js | 11 +++--------
 client/src/layout/menu.js                   |  2 +-
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/client/src/entry/analysis/AnalysisRouter.js b/client/src/entry/analysis/AnalysisRouter.js
index 6a49f3207be..890ed9628e4 100644
--- a/client/src/entry/analysis/AnalysisRouter.js
+++ b/client/src/entry/analysis/AnalysisRouter.js
@@ -68,7 +68,7 @@ export const getAnalysisRouter = (Galaxy) => {
             "(/)login/confirm": "show_new_user_confirmation",
             "(/)tools/view": "show_tools_view",
             "(/)tools/json": "show_tools_json",
-            "(/)tours": "show_tours_default",
+            "(/)tours": "show_tours_list",
             "(/)tours(/)(:tour_id)": "show_tours",
             "(/)user(/)": "show_user",
             "(/)user(/)cloud_auth": "show_cloud_auth",
@@ -148,15 +148,10 @@ export const getAnalysisRouter = (Galaxy) => {
 
         show_tours: function (tour_id) {
             this.home();
-
-            if (tour_id === "list") {
-                this._display_vue_helper(TourList);
-            } else {
-                runTour(tour_id);
-            }
+            runTour(tour_id);
         },
 
-        show_tours_default: function () {
+        show_tours_list: function () {
             this.home();
             this._display_vue_helper(TourList);
         },
diff --git a/client/src/layout/menu.js b/client/src/layout/menu.js
index 4115d2bd69f..6b847ffa9de 100644
--- a/client/src/layout/menu.js
+++ b/client/src/layout/menu.js
@@ -202,7 +202,7 @@ export function fetchMenu(options = {}) {
             },
             {
                 title: _l("Interactive Tours"),
-                url: "tours/list",
+                url: "tours",
                 target: "__use_router__",
             },
             {