fix: hide magic link tab when disallowed (rilldata#5193)

* init commit * revert file * remove import * permission fix
developgo · Jul 8, 2024 · 1c16a52 · 1c16a52
1 parent 5b6ea23
commit 1c16a52
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 12 deletions.
diff --git a/web-admin/src/features/dashboards/share/ShareDashboardButton.svelte b/web-admin/src/features/dashboards/share/ShareDashboardButton.svelte
@@ -14,6 +14,8 @@
     TabsTrigger,
   } from "@rilldata/web-common/components/tabs";
   import { copyToClipboard } from "@rilldata/web-common/lib/actions/copy-to-clipboard";
+
+  export let createMagicAuthTokens: boolean;
 </script>
 
 <Popover>
@@ -24,7 +26,9 @@
     <Tabs>
       <TabsList>
         <TabsTrigger value="tab1">Copy link</TabsTrigger>
-        <TabsTrigger value="tab2">Create public link</TabsTrigger>
+        {#if createMagicAuthTokens}
+          <TabsTrigger value="tab2">Create public link</TabsTrigger>
+        {/if}
       </TabsList>
       <TabsContent value="tab1" class="mt-0 p-4">
         <div class="flex flex-col gap-y-2">

diff --git a/web-admin/src/features/navigation/TopNavigationBar.svelte b/web-admin/src/features/navigation/TopNavigationBar.svelte
@@ -31,6 +31,8 @@
     isProjectPage,
   } from "./nav-utils";
 
+  export let createMagicAuthTokens: boolean;
+
   const user = createAdminServiceGetCurrentUser();
 
   $: instanceId = $runtime?.instanceId;
@@ -175,7 +177,7 @@
         {#if $user.isSuccess && $user.data.user && !onMagicLinkPage}
           <CreateAlert />
           <Bookmarks />
-          <ShareDashboardButton />
+          <ShareDashboardButton {createMagicAuthTokens} />
         {/if}
       </StateManagersProvider>
     {/if}

diff --git a/web-admin/src/routes/+layout.svelte b/web-admin/src/routes/+layout.svelte
@@ -14,6 +14,10 @@
   import { initPylonWidget } from "../features/help/initPylonWidget";
   import TopNavigationBar from "../features/navigation/TopNavigationBar.svelte";
 
+  export let data;
+
+  $: ({ projectPermissions } = data);
+
   // Motivation:
   // - https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose#a-bad-api
   // - https://tkdodo.eu/blog/react-query-error-handling#the-global-callbacks
@@ -49,7 +53,9 @@
     <main class="flex flex-col min-h-screen h-screen">
       <BannerCenter />
       {#if !isEmbed}
-        <TopNavigationBar />
+        <TopNavigationBar
+          createMagicAuthTokens={projectPermissions?.createMagicAuthTokens}
+        />
       {/if}
       <ErrorBoundary>
         <slot />

diff --git a/web-admin/src/routes/+layout.ts b/web-admin/src/routes/+layout.ts
@@ -4,3 +4,68 @@ app in production. Here, we are setting server-side rendering (SSR) to false to
 ensure the same single-page app behavior in development.
 */
 export const ssr = false;
+
+import type { V1ProjectPermissions } from "@rilldata/web-admin/client";
+import { adminServiceGetProject } from "@rilldata/web-admin/client/index.js";
+import { getAdminServiceGetProjectQueryKey } from "@rilldata/web-admin/client/index.js";
+import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient.js";
+import { error } from "@sveltejs/kit";
+import type { QueryFunction, QueryKey } from "@tanstack/svelte-query";
+import {
+  adminServiceGetProjectWithBearerToken,
+  getAdminServiceGetProjectWithBearerTokenQueryKey,
+} from "../features/shareable-urls/get-project-with-bearer-token.js";
+
+export const load = async ({ params }) => {
+  const { organization, project, token } = params;
+
+  if (!organization || !project) {
+    return {
+      projectPermissions: <V1ProjectPermissions>{},
+    };
+  }
+
+  let queryKey: QueryKey;
+  let queryFn: QueryFunction<
+    Awaited<ReturnType<typeof adminServiceGetProject>>
+  >;
+
+  if (token) {
+    queryKey = getAdminServiceGetProjectWithBearerTokenQueryKey(
+      organization,
+      project,
+      token,
+      {},
+    );
+
+    queryFn = ({ signal }) =>
+      adminServiceGetProjectWithBearerToken(
+        organization,
+        project,
+        token,
+        {},
+        signal,
+      );
+  } else {
+    queryKey = getAdminServiceGetProjectQueryKey(organization, project);
+
+    queryFn = ({ signal }) =>
+      adminServiceGetProject(organization, project, {}, signal);
+  }
+
+  try {
+    const response = await queryClient.fetchQuery({
+      queryFn,
+      queryKey,
+    });
+
+    const { projectPermissions } = response;
+
+    return {
+      projectPermissions,
+    };
+  } catch (e) {
+    console.error(e);
+    throw error(e.response.status, "Error fetching deployment");
+  }
+};
diff --git a/web-admin/src/routes/[organization]/[project]/+layout.svelte b/web-admin/src/routes/[organization]/[project]/+layout.svelte
@@ -76,8 +76,6 @@
       query: baseGetProjectQueryOptions,
     },
   );
-  $: ({ data: cookieProjectData, error: cookieProjectError } =
-    $cookieProjectQuery);
 
   /**
    * `GetProject` with token-based auth.
@@ -93,8 +91,8 @@
       query: baseGetProjectQueryOptions,
     },
   );
-  $: ({ data: tokenProjectData, error: tokenProjectError } =
-    $tokenProjectQuery);
+
+  $: projectQuery = onMagicLinkPage ? tokenProjectQuery : cookieProjectQuery;
 
   /**
    * `GetDeploymentCredentials`
@@ -123,11 +121,10 @@
   $: ({ data: mockedUserDeploymentCredentials } =
     $mockedUserDeploymentCredentialsQuery);
 
-  // Depending on the current page, we use the results from the cookie query or the token query
-  $: error = (
-    onMagicLinkPage ? tokenProjectError : cookieProjectError
-  ) as HTTPError;
-  $: projectData = onMagicLinkPage ? tokenProjectData : cookieProjectData;
+  $: ({ data: projectData, error: projectError } = $projectQuery);
+
+  $: error = projectError as HTTPError;
+
   $: authContext = (
     mockedUserId && mockedUserDeploymentCredentials
       ? "mock"