Add Workflow mount to bundles

client/galaxy/scripts/bundleEntries.js

@@ -94,6 +94,7 @@ export { mountMakoTags } from "components/Tags";
 export { mountJobMetrics } from "components/JobMetrics";
 export { mountJobParameters } from "components/JobParameters";
 export { mountWorkflowEditor } from "components/Workflow/Editor/mount";
+export { mountToolBoxWorkflow } from "components/Panels/mount";
 export { mountPageDisplay } from "components/PageDisplay";
 
 // Used in common.mako

client/galaxy/scripts/components/Panels/ToolBox.vue

@@ -47,7 +47,7 @@ import ToolSection from "./ToolSection";
 import ToolSearch from "./ToolSearch";
 import UploadButton from "./Buttons/UploadButton";
 import FavoritesButton from "./Buttons/FavoritesButton";
-import { filterToolsLayout } from "./utilities.js";
+import { filterToolsLayout, getToolsLayout } from "./utilities.js";
 import { getGalaxyInstance } from "app";
 
 export default {
@@ -67,9 +67,6 @@ export default {
         tools: {
             type: Array
         },
-        toolsLayout: {
-            type: Array
-        },
         toolSearch: {
             type: Object
         },
@@ -96,6 +93,10 @@ export default {
             }
         }
     },
+    created() {
+        this.toolsLayout = getToolsLayout();
+        console.log(this.toolsLayout);
+    },
     methods: {
         setResults(results) {
             this.results = results;

client/galaxy/scripts/components/Panels/ToolBoxWorkflow.vue

@@ -0,0 +1,113 @@
+<template>
+    <div class="unified-panel">
+        <div class="unified-panel-header" unselectable="on">
+            <div class="unified-panel-header-inner">
+                <div class="panel-header-buttons">
+                </div>
+                <div class="panel-header-text">Tools</div>
+            </div>
+        </div>
+        <div class="unified-panel-controls">
+            <tool-search @results="setResults" />
+        </div>
+        <div class="unified-panel-body">
+            <div class="toolMenuContainer">
+                <div class="toolMenu">
+                    <tool-section
+                        v-for="category in categories"
+                        :category="category"
+                        :isFiltered="isFiltered"
+                        :key="category.id"
+                        @onOpen="onOpen"
+                    />
+                </div>
+                <div class="toolSectionPad" />
+                <div class="toolSectionPad" />
+                <div class="toolSectionTitle" id="title_XXinternalXXworkflow">
+                    <a>{{ workflowsTitle }}</a>
+                </div>
+                <div id="internal-workflows" class="toolSectionBody">
+                    <div class="toolSectionBg"></div>
+
+                    <div class="toolTitle" v-for="workflow in workflows" :key="workflow.id">
+                        <a :href="workflow.href">
+                            {{ workflow.title }}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import ToolSection from "./ToolSection";
+import ToolSearch from "./ToolSearch";
+import { filterToolsLayout, getToolsLayout } from "./utilities.js";
+import { getGalaxyInstance } from "app";
+
+export default {
+    name: "ToolBox",
+    components: {
+        ToolSection,
+        ToolSearch
+    },
+    data() {
+        return {
+            results: null
+        };
+    },
+    props: {
+        tools: {
+            type: Array
+        },
+        toolSearch: {
+            type: Object
+        },
+        workflowsTitle: {
+            type: String
+        },
+        workflows: {
+            type: Array
+        },
+        isUser: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        categories() {
+            return filterToolsLayout(this.toolsLayout, this.results);
+        },
+        isFiltered() {
+            if (this.results) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+    },
+    created() {
+        this.toolsLayout = getToolsLayout();
+        console.log(this.toolsLayout);
+    },
+    methods: {
+        setResults(results) {
+            this.results = results;
+        },
+        onOpen(e, tool) {
+            const Galaxy = getGalaxyInstance();
+            if (tool.id === "upload1") {
+                e.preventDefault();
+                Galaxy.upload.show();
+            } else if (tool.form_style === "regular") {
+                e.preventDefault();
+                Galaxy.router.push("/", {
+                    tool_id: tool.id,
+                    version: tool.version
+                });
+            }
+        }
+    }
+};
+</script>

client/galaxy/scripts/components/Panels/utilities.js

@@ -1,7 +1,20 @@
 import _ from "underscore";
+import Tools from "mvc/tool/tools";
+import { getGalaxyInstance } from "app";
 
-export function getToolsLayout(tool_panel) {
-    return _.map(tool_panel.get("layout").toJSON(), category => {
+// create tool search, tool panel, and tool panel view.
+export function getToolsLayout() {
+    const Galaxy = getGalaxyInstance();
+    const tool_search = new Tools.ToolSearch({
+        hidden: false
+    });
+    const tools = new Tools.ToolCollection(Galaxy.config.toolbox);
+    const toolPanel = new Tools.ToolPanel({
+        tool_search: tool_search,
+        tools: tools,
+        layout: Galaxy.config.toolbox_in_panel
+    });
+    return _.map(toolPanel.get("layout").toJSON(), category => {
         return {
             ...category,
             panel_type: getPanelType(category),

client/galaxy/scripts/entry/panels/tool-panel.js

@@ -1,5 +1,4 @@
 import Backbone from "backbone";
-import Tools from "mvc/tool/tools";
 import Upload from "mvc/upload/upload-view";
 import _l from "utils/localization";
 import { getGalaxyInstance } from "app";
@@ -7,7 +6,6 @@ import { getAppRoot } from "onload";
 import Vue from "vue";
 import ToolBox from "../../components/Panels/ToolBox.vue";
 import SidePanel from "../../components/Panels/SidePanel.vue";
-import { getToolsLayout } from "../../components/Panels/utilities.js";
 import { mountVueComponent } from "../../utils/mountVueComponent";
 
 const ToolPanel = Backbone.View.extend({
@@ -50,24 +48,12 @@ const ToolPanel = Backbone.View.extend({
         /** @type {Object[]} descriptions of user's workflows to be shown in the tool menu */
         const storedWorkflowMenuEntries = Galaxy.config.stored_workflow_menu_entries || [];
 
-        // create tool search, tool panel, and tool panel view.
-        const tool_search = new Tools.ToolSearch({
-            hidden: false
-        });
-        const tools = new Tools.ToolCollection(Galaxy.config.toolbox);
-        const toolPanel = new Tools.ToolPanel({
-            tool_search: tool_search,
-            tools: tools,
-            layout: Galaxy.config.toolbox_in_panel
-        });
-
         return {
             side: "left",
             currentPanel: ToolBox,
             currentPanelProperties: {
                 appRoot: getAppRoot(),
                 toolsTitle: _l("Tools"),
-                toolsLayout: getToolsLayout(toolPanel),
                 isUser: !!(Galaxy.user && Galaxy.user.id),
                 workflowsTitle: _l("Workflows"),
                 workflows: [

templates/webapps/galaxy/workflow/editor.mako

@@ -42,6 +42,7 @@
             var editorConfig = ${h.dumps(self.editor_config)};
             console.log("workflow/editor.mako, editorConfig", editorConfig);
             window.bundleEntries.mountWorkflowEditor(editorConfig);
+            window.bundleEntries.mountToolBoxWorkflow({});
         });
     </script>