From 83dbab2ca3d3b1fb0cf56234b880ff90d9931630 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 18 Nov 2024 14:46:22 +0100
Subject: [PATCH] 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.
---
 client/src/components/ActivityBar/ActivityBar.vue | 4 +++-
 client/src/components/Markdown/MarkdownEditor.vue | 7 +++++++
 client/src/components/Workflow/Editor/Index.vue   | 5 ++---
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 7e9cbad7190e..5371d14f84fe 100644
--- 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
index 69a2bec4f265..0ace2e5a3b6d 100644
--- 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
index 8c7ce34dbe42..9c6c7b87ccf3 100644
--- 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: {