From f3a43776f6ccab0450eb19a6e32f411305a693d3 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 May 2024 14:36:09 +0300
Subject: [PATCH] Only display optional activities when user clicks on more

---
 .../components/ActivityBar/ActivityBar.vue    |  8 ++-----
 .../ActivityBar/ActivitySettings.vue          | 15 +++++++------
 .../src/components/Panels/SettingsPanel.vue   |  2 +-
 client/src/composables/useActivityAction.ts   | 21 +++++++++++++++++++
 client/src/stores/activitySetup.ts            | 14 ++++++++++++-
 client/src/stores/activityStore.ts            |  2 ++
 6 files changed, 48 insertions(+), 14 deletions(-)
 create mode 100644 client/src/composables/useActivityAction.ts

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 4a26b363cf91..cde4d7b190ad 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -179,11 +179,7 @@ watch(
                                 :to="activity.to"
                                 @click="onToggleSidebar()" />
                             <ActivityItem
-                                v-else-if="
-                                    ['admin', 'tools', 'visualizations', 'multiview', 'invocation'].includes(
-                                        activity.id
-                                    )
-                                "
+                                v-else-if="activity.id === 'admin' || activity.panel"
                                 :id="`activity-${activity.id}`"
                                 :key="activity.id"
                                 :icon="activity.icon"
@@ -219,7 +215,7 @@ watch(
                     icon="ellipsis-h"
                     :is-active="isActiveSideBar('settings')"
                     title="More"
-                    tooltip="Edit preferences"
+                    tooltip="View additional activities"
                     @click="onToggleSidebar('settings')" />
                 <ActivityItem
                     v-if="isAdmin"
diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
index 081fe091dc09..544daf508072 100644
--- a/client/src/components/ActivityBar/ActivitySettings.vue
+++ b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
 import { computed, type ComputedRef, type Ref, ref } from "vue";
 
+import { useActivityAction } from "@/composables/useActivityAction";
 import { type Activity, useActivityStore } from "@/stores/activityStore";
 
 import DelayedInput from "@/components/Common/DelayedInput.vue";
@@ -20,6 +21,7 @@ library.add({
 
 const activityStore = useActivityStore();
 const { activities } = storeToRefs(activityStore);
+const activityAction = useActivityAction();
 const query: Ref<string> = ref("");
 
 const filteredActivities = computed(() => {
@@ -44,8 +46,6 @@ const foundActivities: ComputedRef<boolean> = computed(() => {
     return filteredActivities.value.length > 0;
 });
 
-function onClick(activity: Activity) {}
-
 function onFavorite(activity: Activity) {
     if (activity.optional) {
         activity.visible = !activity.visible;
@@ -66,7 +66,10 @@ function onQuery(newQuery: string) {
         <DelayedInput :delay="100" placeholder="Search activities" @change="onQuery" />
         <div v-if="foundActivities" class="activity-settings-content mt-2">
             <div v-for="activity in filteredActivities" :key="activity.id">
-                <button class="activity-settings-item p-2 cursor-pointer" @click="onClick(activity)">
+                <button
+                    v-if="activity.optional"
+                    class="activity-settings-item p-2 cursor-pointer"
+                    @click="activityAction.executeActivity(activity)">
                     <div class="d-flex justify-content-between align-items-start">
                         <span class="d-flex justify-content-between w-100">
                             <span>
@@ -75,7 +78,7 @@ function onQuery(newQuery: string) {
                                     activity.title || "No title available"
                                 }}</span>
                             </span>
-                            <div v-if="activity.optional">
+                            <div>
                                 <BButton
                                     v-if="activity.mutable"
                                     v-b-tooltip.hover
@@ -92,7 +95,7 @@ function onQuery(newQuery: string) {
                                     size="sm"
                                     title="Hide in Activity Bar"
                                     variant="link"
-                                    @click="onFavorite(activity)">
+                                    @click.stop="onFavorite(activity)">
                                     <FontAwesomeIcon icon="fas fa-star" fa-fw />
                                 </BButton>
                                 <BButton
@@ -101,7 +104,7 @@ function onQuery(newQuery: string) {
                                     size="sm"
                                     title="Show in Activity Bar"
                                     variant="link"
-                                    @click="onFavorite(activity)">
+                                    @click.stop="onFavorite(activity)">
                                     <FontAwesomeIcon icon="far fa-star" fa-fw />
                                 </BButton>
                             </div>
diff --git a/client/src/components/Panels/SettingsPanel.vue b/client/src/components/Panels/SettingsPanel.vue
index b1b3eacdc8a9..3473a92df1fc 100644
--- a/client/src/components/Panels/SettingsPanel.vue
+++ b/client/src/components/Panels/SettingsPanel.vue
@@ -4,7 +4,7 @@ import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
 </script>
 
 <template>
-    <ActivityPanel title="All Activities">
+    <ActivityPanel title="Additional Activities">
         <ActivitySettings />
     </ActivityPanel>
 </template>
diff --git a/client/src/composables/useActivityAction.ts b/client/src/composables/useActivityAction.ts
new file mode 100644
index 000000000000..3dc1babc7f84
--- /dev/null
+++ b/client/src/composables/useActivityAction.ts
@@ -0,0 +1,21 @@
+import { useRouter } from "vue-router/composables";
+
+import { type Activity } from "@/stores/activityStore";
+import { useUserStore } from "@/stores/userStore";
+
+export function useActivityAction() {
+    const router = useRouter();
+    const userStore = useUserStore();
+    const executeActivity = (activity: Activity) => {
+        if (activity.panel) {
+            userStore.toggleSideBar(activity.id);
+        }
+        if (activity.to) {
+            router.push(activity.to);
+        }
+    };
+
+    return {
+        executeActivity,
+    };
+}
diff --git a/client/src/stores/activitySetup.ts b/client/src/stores/activitySetup.ts
index ed03211f5306..724921368c9a 100644
--- a/client/src/stores/activitySetup.ts
+++ b/client/src/stores/activitySetup.ts
@@ -7,11 +7,12 @@ import { type EventData } from "@/stores/eventStore";
 export const Activities = [
     {
         anonymous: false,
-        description: "Displays currently active interactive tools (ITs), if these are enabled by the administrator.",
+        description: "Displays currently running interactive tools (ITs), if these are enabled by the administrator.",
         icon: "fa-laptop",
         id: "interactivetools",
         mutable: false,
         optional: false,
+        panel: false,
         title: "Interactive Tools",
         tooltip: "Show active interactive tools",
         to: "/interactivetool_entry_points/list",
@@ -24,6 +25,7 @@ export const Activities = [
         id: "upload",
         mutable: false,
         optional: false,
+        panel: false,
         title: "Upload",
         to: null,
         tooltip: "Download from URL or upload files from disk",
@@ -36,6 +38,7 @@ export const Activities = [
         id: "tools",
         mutable: false,
         optional: false,
+        panel: true,
         title: "Tools",
         to: null,
         tooltip: "Search and run tools",
@@ -48,6 +51,7 @@ export const Activities = [
         id: "workflows",
         mutable: false,
         optional: true,
+        panel: false,
         title: "Workflows",
         to: "/workflows/list",
         tooltip: "Search and run workflows",
@@ -60,6 +64,7 @@ export const Activities = [
         id: "invocation",
         mutable: false,
         optional: true,
+        panel: true,
         title: "Workflow Invocations",
         tooltip: "Show all workflow runs",
         to: null,
@@ -72,6 +77,7 @@ export const Activities = [
         id: "visualizations",
         mutable: false,
         optional: true,
+        panel: true,
         title: "Visualization",
         to: null,
         tooltip: "Visualize datasets",
@@ -84,6 +90,7 @@ export const Activities = [
         id: "histories",
         mutable: false,
         optional: true,
+        panel: false,
         title: "Histories",
         tooltip: "Show all histories",
         to: "/histories/list",
@@ -96,6 +103,7 @@ export const Activities = [
         id: "multiview",
         mutable: false,
         optional: true,
+        panel: true,
         title: "History Multiview",
         tooltip: "Select histories to show in History Multiview",
         to: "/histories/view_multiple",
@@ -108,6 +116,7 @@ export const Activities = [
         id: "datasets",
         mutable: false,
         optional: true,
+        panel: false,
         title: "Datasets",
         tooltip: "Show all datasets",
         to: "/datasets/list",
@@ -120,6 +129,7 @@ export const Activities = [
         id: "pages",
         mutable: false,
         optional: true,
+        panel: false,
         title: "Pages",
         tooltip: "Show all pages",
         to: "/pages/list",
@@ -136,6 +146,7 @@ export function convertDropData(data: EventData): Activity | null {
             id: `dataset-${data.id}`,
             mutable: true,
             optional: true,
+            panel: false,
             title: data.name as string,
             tooltip: "View your dataset",
             to: `/datasets/${data.id}/preview`,
@@ -150,6 +161,7 @@ export function convertDropData(data: EventData): Activity | null {
             id: `workflow-${data.id}`,
             mutable: true,
             optional: true,
+            panel: false,
             title: data.name as string,
             tooltip: data.name as string,
             to: `/workflows/run?id=${data.id}`,
diff --git a/client/src/stores/activityStore.ts b/client/src/stores/activityStore.ts
index c7435f2ad10a..ed99ec67b2f7 100644
--- a/client/src/stores/activityStore.ts
+++ b/client/src/stores/activityStore.ts
@@ -22,6 +22,8 @@ export interface Activity {
     mutable: boolean;
     // indicate wether this activity can be disabled by the user
     optional: boolean;
+    // specifiy wether this activity utilizes the side panel
+    panel: boolean;
     // title to be displayed in the activity bar
     title: string;
     // route to be executed upon selecting the activity