From ecb8820d3a6653fa4dc4f44820327f47c38ce118 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 6 Dec 2024 22:53:58 +0100
Subject: [PATCH] add create button to activity panel

---
 .../src/components/Panels/ActivityPanel.vue   |  6 +++--
 .../src/components/Panels/WorkflowPanel.vue   | 24 +++++++++++++++++++
 .../src/components/Workflow/Editor/Index.vue  |  3 ++-
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Panels/ActivityPanel.vue b/client/src/components/Panels/ActivityPanel.vue
index 20fb01d0d4ca..4e080ad9b1d5 100644
--- a/client/src/components/Panels/ActivityPanel.vue
+++ b/client/src/components/Panels/ActivityPanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BButton } from "bootstrap-vue";
+import { BButton, BButtonGroup } from "bootstrap-vue";
 import { computed } from "vue";
 
 interface Props {
@@ -26,7 +26,9 @@ const hasGoToAll = computed(() => props.goToAllTitle && props.href);
             <nav unselectable="on" class="activity-panel-header-top">
                 <h2 id="activity-panel-heading" v-localize class="activity-panel-heading h-sm">{{ props.title }}</h2>
 
-                <slot name="header-buttons" />
+                <BButtonGroup>
+                    <slot name="header-buttons" />
+                </BButtonGroup>
             </nav>
 
             <slot name="header" class="activity-panel-header-description" />
diff --git a/client/src/components/Panels/WorkflowPanel.vue b/client/src/components/Panels/WorkflowPanel.vue
index d5e56f332d5c..70fb83517776 100644
--- a/client/src/components/Panels/WorkflowPanel.vue
+++ b/client/src/components/Panels/WorkflowPanel.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useMemoize, watchImmediate } from "@vueuse/core";
+import { BButton } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import { loadWorkflows, type Workflow } from "@/components/Workflow/workflows.services";
@@ -19,6 +22,7 @@ const props = defineProps<{
 const emit = defineEmits<{
     (e: "insertWorkflow", id: string, name: string): void;
     (e: "insertWorkflowSteps", id: string, stepCount: number): void;
+    (e: "createWorkflow"): void;
 }>();
 
 const scrollable = ref<HTMLDivElement | null>(null);
@@ -138,11 +142,26 @@ watch(
 function scrollToTop() {
     scrollable.value?.scrollTo({ top: 0, behavior: "smooth" });
 }
+
+function createNew(event: Event) {
+    event.preventDefault();
+    emit("createWorkflow");
+}
 </script>
 
 <template>
     <ActivityPanel title="Workflows">
         <template v-slot:header-buttons>
+            <BButton
+                v-b-tooltip.hover.top.noninteractive
+                size="sm"
+                variant="link"
+                class="create-button"
+                title="Create new workflow"
+                href="/workflows/edit"
+                @click="createNew">
+                <FontAwesomeIcon :icon="faPlus" />
+            </BButton>
             <FavoritesButton v-model="showFavorites" tooltip="Show bookmarked" />
         </template>
 
@@ -189,4 +208,9 @@ function scrollToTop() {
     color: $text-light;
     margin: 0.5rem;
 }
+
+.create-button:hover {
+    background-color: #c8cfd6;
+    border-color: #c1c9d0;
+}
 </style>
diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index 547c2be03a0e..b892ce3ae7d9 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -70,7 +70,8 @@
                     v-else-if="isActiveSideBar('workflow-editor-workflows')"
                     :current-workflow-id="id"
                     @insertWorkflow="onInsertWorkflow"
-                    @insertWorkflowSteps="onInsertWorkflowSteps" />
+                    @insertWorkflowSteps="onInsertWorkflowSteps"
+                    @createWorkflow="createNewWorkflow" />
                 <WorkflowAttributes
                     v-else-if="isActiveSideBar('workflow-editor-attributes')"
                     :id="id"