Merge pull request #17531 from guerler/enable_activity_bar

Enables activity bar by default

client/src/components/ActivityBar/ActivityBar.test.js

@@ -24,6 +24,7 @@ localVue.use(PiniaVuePlugin);
 
 function testActivity(id, newOptions = {}) {
     const defaultOptions = {
+        anonymous: true,
         id: `test-${id}`,
         description: "test-description",
         icon: "test-icon",

client/src/components/ActivityBar/ActivityBar.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
-import { computed, type Ref, ref } from "vue";
+import { computed, type Ref, ref, watch } from "vue";
 import { useRoute } from "vue-router/composables";
 import draggable from "vuedraggable";
 
 import { useConfig } from "@/composables/config";
+import { useHashedUserId } from "@/composables/hashedUserId";
 import { convertDropData } from "@/stores/activitySetup";
 import { type Activity, useActivityStore } from "@/stores/activityStore";
 import { useEventStore } from "@/stores/eventStore";
@@ -25,15 +26,15 @@ const { config, isConfigLoaded } = useConfig();
 
 const route = useRoute();
 const userStore = useUserStore();
+
+const { hashedUserId } = useHashedUserId();
+
 const eventStore = useEventStore();
 const activityStore = useActivityStore();
 const { isAnonymous } = storeToRefs(userStore);
 
 const emit = defineEmits(["dragstart"]);
 
-// sync built-in activities with cached activities
-activityStore.sync();
-
 // activities from store
 const { activities } = storeToRefs(activityStore);
 
@@ -44,6 +45,9 @@ const dragItem: Ref<Activity | null> = ref(null);
 // drag state
 const isDragging = ref(false);
 
+// sync built-in activities with cached activities
+activityStore.sync();
+
 /**
  * Checks if the route of an activity is currently being visited and panels are collapsed
  */
@@ -114,14 +118,21 @@ function onDragOver(evt: MouseEvent) {
 /**
  * Tracks the state of activities which expand or collapse the sidepanel
  */
-function onToggleSidebar(toggle: string, to: string | null = null) {
+function onToggleSidebar(toggle: string = "", to: string | null = null) {
     // if an activity's dedicated panel/sideBar is already active
     // but the route is different, don't collapse
     if (toggle && to && !(route.path === to) && isActiveSideBar(toggle)) {
         return;
     }
     userStore.toggleSideBar(toggle);
 }
+
+watch(
+    () => hashedUserId.value,
+    () => {
+        activityStore.sync();
+    }
+);
 </script>
 
 <template>
@@ -143,7 +154,7 @@ function onToggleSidebar(toggle: string, to: string | null = null) {
                     @start="isDragging = true"
                     @end="isDragging = false">
                     <div v-for="(activity, activityIndex) in activities" :key="activityIndex">
-                        <div v-if="activity.visible">
+                        <div v-if="activity.visible && (activity.anonymous || !isAnonymous)">
                             <UploadItem
                                 v-if="activity.id === 'upload'"
                                 :id="`activity-${activity.id}`"
@@ -152,7 +163,7 @@ function onToggleSidebar(toggle: string, to: string | null = null) {
                                 :title="activity.title"
                                 :tooltip="activity.tooltip" />
                             <InteractiveItem
-                                v-else-if="activity.id === 'interactivetools'"
+                                v-else-if="activity.to && activity.id === 'interactivetools'"
                                 :id="`activity-${activity.id}`"
                                 :key="activity.id"
                                 :icon="activity.icon"
@@ -169,7 +180,7 @@ function onToggleSidebar(toggle: string, to: string | null = null) {
                                 :is-active="panelActivityIsActive(activity)"
                                 :title="activity.title"
                                 :tooltip="activity.tooltip"
-                                :to="activity.to"
+                                :to="activity.to || ''"
                                 @click="onToggleSidebar(activity.id, activity.to)" />
                             <ActivityItem
                                 v-else-if="activity.to"
@@ -185,9 +196,9 @@ function onToggleSidebar(toggle: string, to: string | null = null) {
                     </div>
                 </draggable>
             </b-nav>
-            <b-nav vertical class="flex-nowrap p-1">
+            <b-nav v-if="!isAnonymous" vertical class="flex-nowrap p-1">
                 <NotificationItem
-                    v-if="!isAnonymous && isConfigLoaded && config.enable_notification_system"
+                    v-if="isConfigLoaded && config.enable_notification_system"
                     id="activity-notifications"
                     icon="bell"
                     :is-active="isActiveSideBar('notifications') || isActiveRoute('/user/notifications')"

client/src/components/Panels/ToolBox.vue

@@ -18,7 +18,6 @@ import { filterTools, getValidPanelItems, getValidToolsInCurrentView, getValidTo
 
 import ToolSearch from "./Common/ToolSearch.vue";
 import ToolSection from "./Common/ToolSection.vue";
-import UploadButton from "@/components/Upload/UploadButton.vue";
 
 const SECTION_IDS_TO_EXCLUDE = ["expression_tools"]; // if this isn't the Workflow Editor panel
 
@@ -253,7 +252,6 @@ function setButtonText() {
                 @onQuery="(q) => (query = q)"
                 @onResults="onResults" />
             <section v-if="!propShowAdvanced">
-                <UploadButton />
                 <div v-if="hasResults && resultPanel" class="pb-2">
                     <b-button size="sm" class="w-100" @click="onToggle">
                         <FontAwesomeIcon :icon="buttonIcon" />

client/src/composables/usePanels.ts

@@ -15,7 +15,7 @@ export function usePanels() {
         return true;
     });
 
-    const showActivityBar = computed(() => showPanels.value && userStore.showActivityBar && !userStore.isAnonymous);
+    const showActivityBar = computed(() => showPanels.value && userStore.showActivityBar);
     const showToolbox = computed(() => showPanels.value && !showActivityBar.value);
 
     return {

client/src/entry/analysis/router.js

@@ -82,7 +82,7 @@ patchRouterPush(VueRouter);
 function redirectAnon() {
     const Galaxy = getGalaxyInstance();
     if (!Galaxy.user || !Galaxy.user.id) {
-        return "/";
+        return "/login/start";
     }
 }
 
@@ -451,9 +451,9 @@ export function getRouter(Galaxy) {
                         path: "user/permissions",
                         component: UserDatasetPermissions,
                         redirect: redirectAnon(),
-                        props: (route) => ({
+                        props: {
                             userId: Galaxy.user.id,
-                        }),
+                        },
                     },
                     {
                         path: "user/:formId",
@@ -520,6 +520,7 @@ export function getRouter(Galaxy) {
                     {
                         path: "workflows/invocations",
                         component: UserInvocations,
+                        redirect: redirectAnon(),
                     },
                     {
                         path: "workflows/invocations/report",

client/src/stores/activitySetup.ts

@@ -6,6 +6,7 @@ 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.",
         icon: "fa-laptop",
         id: "interactivetools",
@@ -17,6 +18,7 @@ export const Activities = [
         visible: true,
     },
     {
+        anonymous: true,
         description: "Opens a data dialog, allowing uploads from URL, pasted content or disk.",
         icon: "upload",
         id: "upload",
@@ -28,6 +30,7 @@ export const Activities = [
         visible: true,
     },
     {
+        anonymous: true,
         description: "Displays the tool panel to search and access all available tools.",
         icon: "wrench",
         id: "tools",
@@ -39,6 +42,7 @@ export const Activities = [
         visible: true,
     },
     {
+        anonymous: false,
         description: "Displays a panel to search and access workflows.",
         icon: "sitemap",
         id: "workflows",
@@ -50,6 +54,7 @@ export const Activities = [
         visible: true,
     },
     {
+        anonymous: false,
         description: "Displays all workflow runs.",
         icon: "fa-list",
         id: "invocation",
@@ -61,6 +66,7 @@ export const Activities = [
         visible: true,
     },
     {
+        anonymous: false,
         description: "Displays the list of available visualizations.",
         icon: "chart-bar",
         id: "visualizations",
@@ -72,6 +78,7 @@ export const Activities = [
         visible: true,
     },
     {
+        anonymous: false,
         description: "Displays the list of all histories.",
         icon: "fa-hdd",
         id: "histories",
@@ -83,6 +90,7 @@ export const Activities = [
         visible: true,
     },
     {
+        anonymous: false,
         description: "Displays the history selector panel and opens History Multiview in the center panel.",
         icon: "fa-columns",
         id: "multiview",
@@ -94,6 +102,7 @@ export const Activities = [
         visible: true,
     },
     {
+        anonymous: false,
         description: "Displays all of your datasets across all histories.",
         icon: "fa-folder",
         id: "datasets",
@@ -109,6 +118,7 @@ export const Activities = [
 export function convertDropData(data: EventData): Activity | null {
     if (data.history_content_type === "dataset") {
         return {
+            anonymous: true,
             description: "Displays this dataset.",
             icon: "fa-file",
             id: `dataset-${data.id}`,
@@ -122,6 +132,7 @@ export function convertDropData(data: EventData): Activity | null {
     }
     if (data.model_class === "StoredWorkflow") {
         return {
+            anonymous: false,
             description: data.description as string,
             icon: "fa-play",
             id: `workflow-${data.id}`,

client/src/stores/activityStore.test.ts

@@ -6,6 +6,7 @@ import { useActivityStore } from "@/stores/activityStore";
 jest.mock("./activitySetup", () => ({
     Activities: [
         {
+            anonymous: false,
             description: "a-description",
             icon: "a-icon",
             id: "a-id",
@@ -21,6 +22,7 @@ jest.mock("./activitySetup", () => ({
 
 const newActivities = [
     {
+        anonymous: false,
         description: "a-description-new",
         icon: "a-icon-new",
         id: "a-id",
@@ -32,6 +34,7 @@ const newActivities = [
         visible: false,
     },
     {
+        anonymous: false,
         description: "b-description-new",
         icon: "b-icon-new",
         id: "b-id",

client/src/stores/activityStore.ts

@@ -10,14 +10,25 @@ import { useUserLocalStorage } from "@/composables/userLocalStorage";
 import { Activities } from "./activitySetup";
 
 export interface Activity {
+    // determine wether an anonymous user can access this activity
+    anonymous: boolean;
+    // description of the activity
     description: string;
+    // unique identifier
     id: string;
+    // icon to be displayed in activity bar
     icon: string;
+    // indicate if this activity can be modified and/or deleted
     mutable: boolean;
+    // indicate wether this activity can be disabled by the user
     optional: boolean;
+    // title to be displayed in the activity bar
     title: string;
+    // route to be executed upon selecting the activity
     to: string | null;
+    // tooltip to be displayed when hovering above the icon
     tooltip: string;
+    // indicate wether the activity should be visible by default
     visible: boolean;
 }
 

client/src/stores/userStore.ts

@@ -43,7 +43,7 @@ export const useUserStore = defineStore("userStore", () => {
 
     // explicitly pass current User, because userStore might not exist yet
     const toggledSideBar = useUserLocalStorage("user-store-toggled-side-bar", "tools", currentUser);
-    const showActivityBar = useUserLocalStorage("user-store-show-activity-bar", false, currentUser);
+    const showActivityBar = useUserLocalStorage("user-store-show-activity-bar", true, currentUser);
     const preferredListViewMode = useUserLocalStorage("user-store-preferred-list-view-mode", "grid", currentUser);
 
     let loadPromise: Promise<void> | null = null;