More reliable user fetching

Author: Meldiron

src/lib/flags.ts

@@ -1,32 +1,31 @@
 import { env } from '$env/dynamic/public';
-import { get } from 'svelte/store';
-import { user } from '$lib/stores/user';
-import { organization } from '$lib/stores/organization';
+import type { Organization } from './stores/organization';
+import type { Account } from './stores/user';
 
 export const PUBLIC_CONSOLE_FEATURE_FLAGS = env.PUBLIC_CONSOLE_FEATURE_FLAGS ?? '';
 
 function setupFlag(name: string, _description: string) {
     // TODO: Use flags library that provides visual component during development
 
-    if (PUBLIC_CONSOLE_FEATURE_FLAGS.includes(name)) {
-        return true;
-    }
+    return (user: Account, organization: Organization) => {
+        if (PUBLIC_CONSOLE_FEATURE_FLAGS.includes(name)) {
+            return true;
+        }
 
-    const userInstance = get(user);
-    const userPrefs = userInstance?.prefs ?? {};
-    const userFlag = userPrefs[`flags-${name}`] ?? null;
-    if (userFlag) {
-        return true;
-    }
+        const userPrefs = user?.prefs ?? {};
+        const userFlag = userPrefs[`flags-${name}`] ?? null;
+        if (userFlag) {
+            return true;
+        }
 
-    const organizationInstance = get(organization);
-    const organizationPrefs = organizationInstance?.prefs ?? {};
-    const organizationFlag = organizationPrefs[`flags-${name}`] ?? null;
-    if (organizationFlag) {
-        return true;
-    }
+        const organizationPrefs = organization?.prefs ?? {};
+        const organizationFlag = organizationPrefs[`flags-${name}`] ?? null;
+        if (organizationFlag) {
+            return true;
+        }
 
-    return false;
+        return false;
+    };
 }
 
 export const flags = {

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte

@@ -100,7 +100,7 @@
                     analyticsSource="database_documents" />
                 <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
                     <ViewSelector view={data.view} {columns} hideView />
-                    {#if flags.showCsvImport}
+                    {#if flags.showCsvImport(data.account, data.organization)}
                         <Button
                             secondary
                             event={Click.DatabaseImportCsv}

src/routes/(console)/project-[region]-[project]/sites/+page.ts

@@ -4,15 +4,17 @@ import { getLimit, getPage, getSearch, getView, pageToOffset, View } from '$lib/
 import { CARD_LIMIT, Dependencies } from '$lib/constants';
 import { flags } from '$lib/flags';
 
-export const load = async ({ url, depends, route, params }) => {
+export const load = async ({ url, depends, route, params, parent }) => {
+    const data = await parent();
+
     depends(Dependencies.SITES);
     const page = getPage(url);
     const search = getSearch(url);
     const limit = getLimit(url, route, CARD_LIMIT);
     const offset = pageToOffset(page, limit);
     const view = getView(url, route, View.Grid, View.Grid);
 
-    if (!flags.showSites) {
+    if (!flags.showSites(data.account, data.organization)) {
         return {
             sitesLive: false,
             offset,