Adds hidePanel prop to ActivityBar and integrates MarkdownToolBox in …

…MarkdownEditor Introduces hidePanel prop to conditionally hide the side panel in ActivityBar. Integrates MarkdownToolBox into MarkdownEditor temporary to have MarkdownToolBox in the page editor too.
galaxyproject · Nov 18, 2024 · 83dbab2 · 83dbab2
1 parent d4a8569
commit 83dbab2
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
@@ -38,6 +38,7 @@ const props = withDefaults(
         optionsIcon?: IconDefinition;
         optionsSearchPlaceholder?: string;
         initialActivity?: string;
+        hidePanel?: boolean;
     }>(),
     {
         defaultActivities: undefined,
@@ -50,6 +51,7 @@ const props = withDefaults(
         optionsSearchPlaceholder: "Search Activities",
         optionsTooltip: "View additional activities",
         initialActivity: undefined,
+        hidePanel: false,
     }
 );
 
@@ -314,7 +316,7 @@ defineExpose({
                 </template>
             </b-nav>
         </div>
-        <FlexPanel v-if="isSideBarOpen" side="left" :collapsible="false">
+        <FlexPanel v-if="isSideBarOpen && !hidePanel" side="left" :collapsible="false">
             <ToolPanel v-if="isActiveSideBar('tools')" />
             <InvocationsPanel v-else-if="isActiveSideBar('invocation')" :activity-bar-id="props.activityBarId" />
             <VisualizationPanel v-else-if="isActiveSideBar('visualizations')" />

diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
@@ -1,5 +1,8 @@
 <template>
     <div id="columns" class="d-flex">
+        <FlexPanel side="left">
+            <MarkdownToolBox :steps="steps" @insert="insertMarkdown" />
+        </FlexPanel>
         <div id="center" class="overflow-auto w-100">
             <div class="markdown-editor h-100">
                 <div class="unified-panel-header" unselectable="on">
@@ -39,10 +42,12 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import BootstrapVue from "bootstrap-vue";
+import FlexPanel from "components/Panels/FlexPanel";
 import _ from "underscore";
 import Vue from "vue";
 
 import MarkdownHelpModal from "./MarkdownHelpModal";
+import MarkdownToolBox from "./MarkdownToolBox";
 
 Vue.use(BootstrapVue);
 
@@ -52,8 +57,10 @@ const FENCE = "```";
 
 export default {
     components: {
+        FlexPanel,
         FontAwesomeIcon,
         MarkdownHelpModal,
+        MarkdownToolBox,
     },
     props: {
         markdownText: {

diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
@@ -39,6 +39,7 @@
             options-search-placeholder="Search options"
             initial-activity="workflow-editor-attributes"
             :options-icon="faCog"
+            :hide-panel="reportActive"
             @activityClicked="onActivityClicked">
             <template v-slot:side-panel="{ isActiveSideBar }">
                 <ToolPanel
@@ -87,7 +88,6 @@
                     @creator="onCreator"
                     @update:nameCurrent="setName"
                     @update:annotationCurrent="setAnnotation" />
-                <MarkdownToolBox v-else-if="isActiveSideBar('workflow-editor-report')" @insert="insertMarkdown" />
             </template>
         </ActivityBar>
         <template v-if="reportActive">
@@ -97,6 +97,7 @@
                 mode="report"
                 :title="'Workflow Report: ' + name"
                 :steps="steps"
+                @insert="insertMarkdown"
                 @update="onReportUpdate">
                 <template v-slot:buttons>
                     <b-button
@@ -220,7 +221,6 @@ import WorkflowAttributes from "./WorkflowAttributes.vue";
 import WorkflowGraph from "./WorkflowGraph.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import MarkdownEditor from "@/components/Markdown/MarkdownEditor.vue";
-import MarkdownToolBox from "@/components/Markdown/MarkdownToolBox.vue";
 import ToolPanel from "@/components/Panels/ToolPanel.vue";
 import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
 import UndoRedoStack from "@/components/UndoRedo/UndoRedoStack.vue";
@@ -242,7 +242,6 @@ export default {
         FontAwesomeIcon,
         UndoRedoStack,
         WorkflowPanel,
-        MarkdownToolBox,
         NodeInspector,
     },
     props: {