Merge pull request #19316 from dannon/activity-bar-fixes

[24.2] Fix activity-bar-id handling wrt activityStore
galaxyproject · Dec 12, 2024 · 3fec678 · 3fec678
2 parents b2cf660 + 79f663c
commit 3fec678
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 9 deletions.
diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
@@ -230,13 +230,15 @@ defineExpose({
                                 v-if="activity.id === 'upload'"
                                 :id="`${activity.id}`"
                                 :key="activity.id"
+                                :activity-bar-id="props.activityBarId"
                                 :icon="activity.icon"
                                 :title="activity.title"
                                 :tooltip="activity.tooltip" />
                             <InteractiveItem
                                 v-else-if="activity.to && activity.id === 'interactivetools'"
                                 :id="`${activity.id}`"
                                 :key="activity.id"
+                                :activity-bar-id="props.activityBarId"
                                 :icon="activity.icon"
                                 :is-active="isActiveRoute(activity.to)"
                                 :title="activity.title"
@@ -274,6 +276,7 @@ defineExpose({
                 <NotificationItem
                     v-if="isConfigLoaded && config.enable_notification_system"
                     id="notifications"
+                    :activity-bar-id="props.activityBarId"
                     :icon="faBell"
                     :is-active="isActiveSideBar('notifications') || isActiveRoute('/user/notifications')"
                     title="Notifications"

diff --git a/client/src/components/ActivityBar/Items/InteractiveItem.vue b/client/src/components/ActivityBar/Items/InteractiveItem.vue
@@ -17,6 +17,7 @@ export interface Props {
     icon: IconDefinition;
     isActive: boolean;
     to: string;
+    activityBarId: string;
 }
 
 defineProps<Props>();
@@ -27,7 +28,7 @@ const emit = defineEmits<{
 
 const tooltip = computed(() =>
     totalCount.value === 1
-        ? `You currently have 1 active interactive tool`
+        ? "You currently have 1 active interactive tool"
         : `You currently have ${totalCount.value} active interactive tools`
 );
 </script>
@@ -36,7 +37,7 @@ const tooltip = computed(() =>
     <ActivityItem
         v-if="totalCount > 0"
         :id="id"
-        :activity-bar-id="id"
+        :activity-bar-id="activityBarId"
         :icon="icon"
         :indicator="totalCount"
         :is-active="isActive"

diff --git a/client/src/components/ActivityBar/Items/NotificationItem.vue b/client/src/components/ActivityBar/Items/NotificationItem.vue
@@ -11,6 +11,7 @@ const { totalUnreadCount } = storeToRefs(useNotificationsStore());
 
 export interface Props {
     id: string;
+    activityBarId: string;
     title: string;
     icon: IconDefinition;
     isActive: boolean;
@@ -32,7 +33,7 @@ const tooltip = computed(() =>
 <template>
     <ActivityItem
         :id="id"
-        :activity-bar-id="'notifications'"
+        :activity-bar-id="activityBarId"
         :icon="icon"
         :indicator="totalUnreadCount"
         :is-active="isActive"

diff --git a/client/src/components/ActivityBar/Items/UploadItem.vue b/client/src/components/ActivityBar/Items/UploadItem.vue
@@ -14,6 +14,7 @@ export interface Props {
     title: string;
     icon: IconDefinition;
     tooltip: string;
+    activityBarId: string;
 }
 
 defineProps<Props>();
@@ -40,7 +41,7 @@ function onUploadModal() {
 <template>
     <ActivityItem
         :id="id"
-        :activity-bar-id="id"
+        :activity-bar-id="activityBarId"
         :title="title"
         :tooltip="tooltip"
         :icon="icon"

diff --git a/client/src/composables/userLocalStorage.ts b/client/src/composables/userLocalStorage.ts
@@ -13,9 +13,11 @@ import { useHashedUserId } from "./hashedUserId";
 export function useUserLocalStorage<T>(key: string, initialValue: T, user?: Ref<AnyUser>) {
     const { hashedUserId } = useHashedUserId(user);
 
+    let refSyncedRawValue = initialValue;
+
     const storedRef = computed(() => {
         if (hashedUserId.value) {
-            return useLocalStorage(`${key}-${hashedUserId.value}`, initialValue);
+            return useLocalStorage(`${key}-${hashedUserId.value}`, refSyncedRawValue);
         } else {
             return ref(initialValue);
         }
@@ -28,6 +30,7 @@ export function useUserLocalStorage<T>(key: string, initialValue: T, user?: Ref<
         },
         set(newValue) {
             storedRef.value.value = newValue;
+            refSyncedRawValue = newValue as T;
             trigger();
         },
     }));

diff --git a/client/src/stores/activityStore.ts b/client/src/stores/activityStore.ts
@@ -127,10 +127,7 @@ export const useActivityStore = defineScopedStore("activityStore", (scope) => {
             }
         });
 
-        // update activities stored in local cache only if changes were applied
-        if (JSON.stringify(activities.value) !== JSON.stringify(newActivities)) {
-            activities.value = newActivities;
-        }
+        activities.value = newActivities;
 
         // if toggled side-bar does not exist, choose the first option
         if (toggledSideBar.value !== "") {