Remove legacy code for page loading from mako and helper, mount vue component instead

client/src/bundleEntries.js

@@ -16,7 +16,6 @@ import Circster from "viz/circster";
 export { PhylovizView as phyloviz } from "viz/phyloviz";
 export { SweepsterVisualization, SweepsterVisualizationView } from "viz/sweepster";
 import GalaxyLibrary from "galaxy.library";
-export { default as pages } from "galaxy.pages";
 export { createTabularDatasetChunkedView } from "mvc/dataset/data";
 import { HistoryCollection } from "mvc/history/history-model";
 export { History } from "mvc/history/history-model";
@@ -94,6 +93,7 @@ export { mountMakoTags } from "components/Tags";
 export { mountJobMetrics } from "components/JobMetrics";
 export { mountJobParameters } from "components/JobParameters";
 export { mountWorkflowEditor } from "components/Workflow/Editor/mount";
+export { mountPageEditor } from "components/PageEditor/mount";
 export { mountPageDisplay } from "components/PageDisplay";
 export { mountDestinationParams } from "components/JobDestinationParams";
 

client/src/components/PageEditor/PageEditor.vue

@@ -1,6 +1,7 @@
 <template>
+    <LoadingSpan v-if="loading" message="Loading Page" class="m-3" />
     <page-editor-markdown
-        v-if="contentFormat == 'markdown'"
+        v-else-if="!loading && contentFormat == 'markdown'"
         :title="title"
         :page-id="pageId"
         :public-url="publicUrl"
@@ -11,6 +12,11 @@
 </template>
 
 <script>
+import axios from "axios";
+import { Toast } from "ui/toast";
+import { getAppRoot } from "onload/loadConfig";
+import { rethrowSimple } from "utils/simple-error";
+import LoadingSpan from "components/LoadingSpan";
 import PageEditorHtml from "./PageEditorHtml";
 import PageEditorMarkdown from "./PageEditorMarkdown";
 
@@ -20,30 +26,46 @@ export default {
             required: true,
             type: String,
         },
-        publicUrl: {
-            required: true,
-            type: String,
-        },
-        content: {
-            type: String,
-            default: "",
-        },
-        contentFormat: {
-            type: String,
-            default: "html",
-        },
-        contentData: {
-            type: Object,
-            default: null,
-        },
-        title: {
-            type: String,
-            default: "",
-        },
+    },
+    data() {
+        return {
+            title: null,
+            contentFormat: null,
+            contentData: null,
+            content: null,
+            publicUrl: null,
+            loading: true,
+        };
     },
     components: {
         PageEditorHtml,
         PageEditorMarkdown,
+        LoadingSpan,
+    },
+    created() {
+        this.getPage(this.pageId)
+            .then((data) => {
+                this.publicUrl = `${getAppRoot()}u/${data.username}/p/${data.slug}`;
+                this.content = data.content;
+                this.contentFormat = data.content_format;
+                this.contentData = data;
+                this.title = data.title;
+                this.loading = false;
+            })
+            .catch((error) => {
+                Toast.error(`Failed to load page: ${error}`);
+            });
+    },
+    methods: {
+        /** Page data request helper **/
+        async getPage(id) {
+            try {
+                const { data } = await axios.get(`${getAppRoot()}api/pages/${id}`);
+                return data;
+            } catch (e) {
+                rethrowSimple(e);
+            }
+        },
     },
 };
 </script>

client/src/components/PageEditor/PageEditorMarkdown.vue

@@ -33,7 +33,6 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEye, faSave } from "@fortawesome/free-solid-svg-icons";
 import MarkdownEditor from "components/Markdown/MarkdownEditor";
 import { Toast } from "ui/toast";
-import { getAppRoot } from "onload/loadConfig";
 import { save } from "./util";
 
 Vue.use(BootstrapVue);
@@ -80,7 +79,7 @@ export default {
             save(this.pageId, this.markdownText, !showResult)
                 .then(() => {
                     if (showResult) {
-                        window.location = `${getAppRoot()}${this.publicUrl}`;
+                        window.location = this.publicUrl;
                     }
                 })
                 .catch((error) => {

client/src/components/PageEditor/mount.js

@@ -0,0 +1,13 @@
+/**
+ * Endpoint for mounting WorkflowEditor from non-Vue environment (editor.mako).
+ */
+import Vue from "vue";
+import PageEditor from "./PageEditor";
+
+export const mountPageEditor = (propsData) => {
+    const component = Vue.extend(PageEditor);
+    return new component({
+        propsData: propsData,
+        el: "#columns",
+    });
+};

client/src/galaxy.pages.js

@@ -1,35 +0,0 @@
-import $ from "jquery";
-import axios from "axios";
-import { Toast } from "ui/toast";
-import { getAppRoot } from "onload/loadConfig";
-import { PageEditor } from "components/PageEditor";
-import Vue from "vue";
-
-export default function pagesEditorOnload() {
-    const pageId = $("#page-editor-content").attr("page_id");
-    axios
-        .get(`${getAppRoot()}api/pages/${pageId}`)
-        .then((response) => {
-            const data = response.data;
-            const pageEditorInstance = Vue.extend(PageEditor);
-            new pageEditorInstance({
-                propsData: {
-                    publicUrl: `u/${data.username}/p/${data.slug}`,
-                    pageId: pageId,
-                    content: data.content,
-                    contentFormat: data.content_format,
-                    contentData: data,
-                    title: data.title,
-                },
-                el: "#page-editor-content",
-            });
-        })
-        .catch((e) => {
-            const response = e.response;
-            if (typeof response.responseJSON !== "undefined") {
-                Toast.error(response.responseJSON.err_msg);
-            } else {
-                Toast.error("An error occurred.");
-            }
-        });
-}

templates/webapps/galaxy/page/editor.mako

@@ -1,30 +1,33 @@
 <%inherit file="/webapps/galaxy/base_panels.mako"/>
 
+<%def name="title()">
+    Page Editor
+</%def>
+
 <%def name="init()">
 <%
-    self.has_left_panel=False
-    self.has_right_panel=False
     self.active_view="user"
-    self.overlay_visible=False
 %>
 </%def>
 
 <%def name="javascript_app()">
     ${parent.javascript_app()}
     <script type="text/javascript">
-        // Define global variables needed by galaxy.pages script.
-        // Apparently pages() relies on these variables being defined
-        // in window. 
         config.addInitialization(function(){
             console.log("editor.mako, javascript_app", "define variables needed by galaxy.pages script");
-            window.bundleEntries.pages();
+            window.bundleEntries.mountPageEditor({
+                pageId: "${ trans.security.encode_id(page.id) }",
+            });
         });
     </script>
 </%def>
 
-<%def name="center_panel()">
-
-    <span id="page-editor-content" class="inbound" page_id="${trans.security.encode_id(page.id)}">
-    </span>
-
+<%def name="left_panel()">
 </%def>
+
+<%def name="center_panel()">
+</%def>
+
+<%def name="right_panel()">
+</%def>
+