Merge pull request #16371 from ElectronicBlueberry/remove-persist

Replace Persistedstate Pinia Plugin with User-Scoped Composable
galaxyproject · Jul 7, 2023 · 0c7c968 · 0c7c968
2 parents dbc2b9b + 74ec2e2
commit 0c7c968
Show file tree

Hide file tree

Showing 9 changed files with 222 additions and 249 deletions.
diff --git a/client/package.json b/client/package.json
@@ -76,7 +76,6 @@
     "openapi-typescript": "^6.1.0",
     "openapi-typescript-fetch": "^1.1.3",
     "pinia": "^2.0.36",
-    "pinia-plugin-persistedstate": "^2.4.0",
     "popper.js": "^1.16.1",
     "pretty-bytes": "^6.0.0",
     "pyre-to-regexp": "^0.0.5",

diff --git a/client/src/composables/__mocks__/userLocalStorage.ts b/client/src/composables/__mocks__/userLocalStorage.ts
@@ -0,0 +1,6 @@
+import { ref } from "vue";
+
+// set to always mock in jest.setup.js
+export function useUserLocalStorage<T>(_key: string, initialValue: T) {
+    return ref(initialValue);
+}
diff --git a/client/src/entry/analysis/index.ts b/client/src/entry/analysis/index.ts
@@ -1,5 +1,4 @@
 import { createPinia, PiniaVuePlugin } from "pinia";
-import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 import Vue, { provide } from "vue";
 
 import { addInitialization, standardInit } from "@/onload";
@@ -11,7 +10,6 @@ import App from "./App.vue";
 
 Vue.use(PiniaVuePlugin);
 const pinia = createPinia();
-pinia.use(piniaPluginPersistedstate);
 
 addInitialization((Galaxy: any) => {
     console.log("App setup");

diff --git a/client/src/stores/activityStore.ts b/client/src/stores/activityStore.ts
@@ -3,7 +3,9 @@
  */
 
 import { defineStore } from "pinia";
-import { type Ref, ref } from "vue";
+import { type Ref } from "vue";
+
+import { useUserLocalStorage } from "@/composables/userLocalStorage";
 
 import { Activities } from "./activitySetup";
 
@@ -19,80 +21,72 @@ export interface Activity {
     visible: boolean;
 }
 
-export const useActivityStore = defineStore(
-    "activityStore",
-    () => {
-        const activities: Ref<Array<Activity>> = ref([]);
+export const useActivityStore = defineStore("activityStore", () => {
+    const activities: Ref<Array<Activity>> = useUserLocalStorage("activity-store-activities", []);
 
-        /**
-         * The set of built-in activities is defined in activitySetup.js.
-         * This helper function applies changes of the built-in activities,
-         * to the user stored activities which are persisted in local cache.
-         */
-        function sync() {
-            // create a map of built-in activities
-            const activitiesMap: Record<string, Activity> = {};
-            Activities.forEach((a) => {
-                activitiesMap[a.id] = a;
-            });
-            // create an updated array of activities
-            const newActivities: Array<Activity> = [];
-            const foundActivity = new Set();
-            activities.value.forEach((a: Activity) => {
-                if (a.mutable) {
-                    // existing custom activity
-                    newActivities.push({ ...a });
-                } else {
-                    // update existing built-in activity attributes
-                    // skip legacy built-in activities
-                    const sourceActivity = activitiesMap[a.id];
-                    if (sourceActivity) {
-                        foundActivity.add(a.id);
-                        newActivities.push({
-                            ...sourceActivity,
-                            visible: a.visible,
-                        });
-                    }
-                }
-            });
-            // add new built-in activities
-            Activities.forEach((a) => {
-                if (!foundActivity.has(a.id)) {
-                    newActivities.push({ ...a });
+    /**
+     * The set of built-in activities is defined in activitySetup.js.
+     * This helper function applies changes of the built-in activities,
+     * to the user stored activities which are persisted in local cache.
+     */
+    function sync() {
+        // create a map of built-in activities
+        const activitiesMap: Record<string, Activity> = {};
+        Activities.forEach((a) => {
+            activitiesMap[a.id] = a;
+        });
+        // create an updated array of activities
+        const newActivities: Array<Activity> = [];
+        const foundActivity = new Set();
+        activities.value.forEach((a: Activity) => {
+            if (a.mutable) {
+                // existing custom activity
+                newActivities.push({ ...a });
+            } else {
+                // update existing built-in activity attributes
+                // skip legacy built-in activities
+                const sourceActivity = activitiesMap[a.id];
+                if (sourceActivity) {
+                    foundActivity.add(a.id);
+                    newActivities.push({
+                        ...sourceActivity,
+                        visible: a.visible,
+                    });
                 }
-            });
-            // update activities stored in local cache only if changes were applied
-            if (JSON.stringify(activities.value) !== JSON.stringify(newActivities)) {
-                activities.value = newActivities;
             }
+        });
+        // add new built-in activities
+        Activities.forEach((a) => {
+            if (!foundActivity.has(a.id)) {
+                newActivities.push({ ...a });
+            }
+        });
+        // update activities stored in local cache only if changes were applied
+        if (JSON.stringify(activities.value) !== JSON.stringify(newActivities)) {
+            activities.value = newActivities;
         }
+    }
 
-        function getAll() {
-            return activities.value;
-        }
+    function getAll() {
+        return activities.value;
+    }
 
-        function setAll(newActivities: Array<Activity>) {
-            activities.value = newActivities;
-        }
+    function setAll(newActivities: Array<Activity>) {
+        activities.value = newActivities;
+    }
 
-        function remove(activityId: string) {
-            const findIndex = activities.value.findIndex((a: Activity) => a.id === activityId);
-            if (findIndex !== -1) {
-                activities.value.splice(findIndex, 1);
-            }
+    function remove(activityId: string) {
+        const findIndex = activities.value.findIndex((a: Activity) => a.id === activityId);
+        if (findIndex !== -1) {
+            activities.value.splice(findIndex, 1);
         }
-
-        return {
-            activities,
-            getAll,
-            remove,
-            setAll,
-            sync,
-        };
-    },
-    {
-        persist: {
-            paths: ["activities"],
-        },
     }
-);
+
+    return {
+        activities,
+        getAll,
+        remove,
+        setAll,
+        sync,
+    };
+});
diff --git a/client/src/stores/broadcastsStore.ts b/client/src/stores/broadcastsStore.ts
@@ -1,78 +1,71 @@
 import { defineStore } from "pinia";
 import Vue, { computed, ref } from "vue";
 
+import { useUserLocalStorage } from "@/composables/userLocalStorage";
 import type { components } from "@/schema";
 import { loadBroadcastsFromServer } from "@/stores/services/broadcasts.service";
 import { mergeObjectListsById } from "@/utils/utils";
 
 export type BroadcastNotification = components["schemas"]["BroadcastNotificationResponse"];
 type Expirable = Pick<BroadcastNotification, "expiration_time">;
 
-export const useBroadcastsStore = defineStore(
-    "broadcastsStore",
-    () => {
-        const broadcasts = ref<BroadcastNotification[]>([]);
+export const useBroadcastsStore = defineStore("broadcastsStore", () => {
+    const broadcasts = ref<BroadcastNotification[]>([]);
 
-        const loadingBroadcasts = ref<boolean>(false);
-        const dismissedBroadcasts = ref<{ [key: string]: Expirable }>({});
+    const loadingBroadcasts = ref<boolean>(false);
+    const dismissedBroadcasts = useUserLocalStorage<{ [key: string]: Expirable }>("dismissed-broadcasts", {});
 
-        const activeBroadcasts = computed(() => {
-            return broadcasts.value.filter((b) => !dismissedBroadcasts.value[b.id]);
-        });
+    const activeBroadcasts = computed(() => {
+        return broadcasts.value.filter((b) => !dismissedBroadcasts.value[b.id]);
+    });
 
-        async function loadBroadcasts() {
-            loadingBroadcasts.value = true;
-            await loadBroadcastsFromServer()
-                .then((data) => {
-                    broadcasts.value = mergeObjectListsById(data, [], "create_time", "desc");
-                })
-                .finally(() => {
-                    loadingBroadcasts.value = false;
-                });
-        }
+    async function loadBroadcasts() {
+        loadingBroadcasts.value = true;
+        await loadBroadcastsFromServer()
+            .then((data) => {
+                broadcasts.value = mergeObjectListsById(data, [], "create_time", "desc");
+            })
+            .finally(() => {
+                loadingBroadcasts.value = false;
+            });
+    }
 
-        function updateBroadcasts(broadcastList: BroadcastNotification[]) {
-            broadcasts.value = mergeObjectListsById(broadcasts.value, broadcastList, "create_time", "desc").filter(
-                (b) => !hasExpired(b.expiration_time)
-            );
-        }
+    function updateBroadcasts(broadcastList: BroadcastNotification[]) {
+        broadcasts.value = mergeObjectListsById(broadcasts.value, broadcastList, "create_time", "desc").filter(
+            (b) => !hasExpired(b.expiration_time)
+        );
+    }
 
-        function dismissBroadcast(broadcast: BroadcastNotification) {
-            Vue.set(dismissedBroadcasts.value, broadcast.id, { expiration_time: broadcast.expiration_time });
-        }
+    function dismissBroadcast(broadcast: BroadcastNotification) {
+        Vue.set(dismissedBroadcasts.value, broadcast.id, { expiration_time: broadcast.expiration_time });
+    }
 
-        function hasExpired(expirationTimeStr?: string) {
-            if (!expirationTimeStr) {
-                return false;
-            }
-            const expirationTime = new Date(`${expirationTimeStr}Z`);
-            const now = new Date();
-            return now > expirationTime;
+    function hasExpired(expirationTimeStr?: string) {
+        if (!expirationTimeStr) {
+            return false;
         }
+        const expirationTime = new Date(`${expirationTimeStr}Z`);
+        const now = new Date();
+        return now > expirationTime;
+    }
 
-        function clearExpiredDismissedBroadcasts() {
-            for (const key in dismissedBroadcasts.value) {
-                if (hasExpired(dismissedBroadcasts.value[key]?.expiration_time)) {
-                    delete dismissedBroadcasts.value[key];
-                }
+    function clearExpiredDismissedBroadcasts() {
+        for (const key in dismissedBroadcasts.value) {
+            if (hasExpired(dismissedBroadcasts.value[key]?.expiration_time)) {
+                delete dismissedBroadcasts.value[key];
             }
         }
+    }
 
-        clearExpiredDismissedBroadcasts();
+    clearExpiredDismissedBroadcasts();
 
-        return {
-            broadcasts,
-            dismissedBroadcasts,
-            loadingBroadcasts,
-            activeBroadcasts,
-            dismissBroadcast,
-            loadBroadcasts,
-            updateBroadcasts,
-        };
-    },
-    {
-        persist: {
-            paths: ["dismissedBroadcasts"],
-        },
-    }
-);
+    return {
+        broadcasts,
+        dismissedBroadcasts,
+        loadingBroadcasts,
+        activeBroadcasts,
+        dismissBroadcast,
+        loadBroadcasts,
+        updateBroadcasts,
+    };
+});
diff --git a/client/src/stores/userFlagsStore.ts b/client/src/stores/userFlagsStore.ts
@@ -1,21 +1,16 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
 
-export const useUserFlagsStore = defineStore(
-    "userFlagsStore",
-    () => {
-        const showSelectionQueryBreakWarning = ref(true);
+import { useUserLocalStorage } from "@/composables/userLocalStorage";
 
-        function ignoreSelectionQueryBreakWarning() {
-            showSelectionQueryBreakWarning.value = false;
-        }
+export const useUserFlagsStore = defineStore("userFlagsStore", () => {
+    const showSelectionQueryBreakWarning = useUserLocalStorage("user-flags-store-show-break-warning", true);
 
-        return {
-            showSelectionQueryBreakWarning,
-            ignoreSelectionQueryBreakWarning,
-        };
-    },
-    {
-        persist: true,
+    function ignoreSelectionQueryBreakWarning() {
+        showSelectionQueryBreakWarning.value = false;
     }
-);
+
+    return {
+        showSelectionQueryBreakWarning,
+        ignoreSelectionQueryBreakWarning,
+    };
+});