Hide cloud edit entries without access

web-admin/src/features/branches/BranchesSection.svelte

@@ -51,6 +51,7 @@
   } from "lucide-svelte";
   import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import { onMount } from "svelte";
+  import { featureFlags } from "@rilldata/web-common/features/feature-flags";
 
   let { organization, project }: { organization: string; project: string } =
     $props();
@@ -70,7 +71,13 @@
         query: {
           refetchInterval: (query) => {
             const deployments = query.state.data?.deployments;
-            if (deployments?.some((d) => isTransitoryStatus(d.status))) {
+            if (
+              deployments?.some((d) =>
+                isTransitoryStatus(
+                  d.status ?? V1DeploymentStatus.DEPLOYMENT_STATUS_UNSPECIFIED,
+                ),
+              )
+            ) {
               return 2000;
             }
             return false;
@@ -82,12 +89,16 @@
   let projectQuery = $derived(
     createAdminServiceGetProject(organization, project),
   );
+  const { cloudEditing } = featureFlags;
   const startMutation = createAdminServiceStartDeployment();
   const stopMutation = createAdminServiceStopDeployment();
   const deleteMutation = createAdminServiceDeleteDeployment();
 
   let primaryBranch = $derived($projectQuery.data?.project?.primaryBranch);
   let activeBranch = $derived(extractBranchFromPath(page.url.pathname));
+  let canEditProject = $derived(
+    $cloudEditing && !!$projectQuery.data?.projectPermissions?.manageDev,
+  );
 
   let userNameMap = $derived(
     new Map(
@@ -424,7 +435,7 @@
                   </IconButton>
                 </DropdownMenu.Trigger>
                 <DropdownMenu.Content align="start">
-                  {#if deployment.editable}
+                  {#if canEditProject && deployment.editable}
                     <DropdownMenu.Item
                       class="font-normal flex items-center"
                       href={editUrl(deployment.branch)}

web-admin/src/features/projects/ProjectCard.svelte

@@ -11,6 +11,9 @@
   import GuardedDeleteProjectConfirmation from "@rilldata/web-admin/features/projects/settings/GuardedDeleteProjectConfirmation.svelte";
   import ProjectRenameDialog from "@rilldata/web-admin/features/projects/settings/ProjectRenameDialog.svelte";
   import EditBranchDialog from "@rilldata/web-admin/features/edit-session/EditBranchDialog.svelte";
+  import { getFeatureFlags } from "@rilldata/web-common/features/feature-flags";
+  import { getRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
+  import { createQuery } from "@tanstack/svelte-query";
 
   let { organization, project }: { organization: string; project: string } =
     $props();
@@ -28,9 +31,49 @@
   function doesProjectNameIncludeUnderscores(project: string) {
     return project.includes("_");
   }
+
+  let runtimeConfig = $derived.by(() => {
+    const deployment = $proj.data?.deployment;
+    if (!deployment?.runtimeHost || !deployment.runtimeInstanceId) {
+      return undefined;
+    }
+
+    return {
+      host: deployment.runtimeHost,
+      instanceId: deployment.runtimeInstanceId,
+      jwt: $proj.data?.jwt,
+    };
+  });
+
+  let cloudEditingQuery = $derived(
+    createQuery({
+      queryKey: [
+        "project-card-cloud-editing",
+        organization,
+        project,
+        runtimeConfig?.host,
+        runtimeConfig?.instanceId,
+      ],
+      enabled: !!runtimeConfig,
+      queryFn: async () => {
+        if (!runtimeConfig) return false;
+        const flags = await getFeatureFlags(getRuntimeClient(runtimeConfig));
+        return !!flags.cloudEditing;
+      },
+    }),
+  );
+
+  let canEditProject = $derived(
+    !!$cloudEditingQuery.data && !!$proj.data?.projectPermissions?.manageDev,
+  );
+
+  $effect(() => {
+    if (!canEditProject) editProjectOpen = false;
+  });
 </script>
 
-{#if $proj.data}
+{#if $proj.data?.project}
+  {@const projectData = $proj.data.project}
   <Card href="/{organization}/{project}" bind:hovering>
     <!-- Project name -->
     <h2
@@ -49,6 +92,7 @@
           {organization}
           {project}
           bind:open={actionsOpen}
+          canEdit={canEditProject}
           onEdit={() => (editProjectOpen = true)}
           onRename={() => (renameProjectOpen = true)}
           onDelete={() => (deleteProjectOpen = true)}
@@ -65,15 +109,15 @@
     <!-- Public vs Private indicator -->
     <div class="absolute bottom-2.5 right-2.5 text-fg-secondary">
       <Tooltip distance={10}>
-        {#if $proj.data.project.public}
+        {#if projectData.public}
           <Globe size="16px" />
         {:else}
           <Lock size="16px" />
         {/if}
         <TooltipContent slot="tooltip-content">
           <span class="text-xs"
             >This project is
-            {#if $proj.data.project.public}
+            {#if projectData.public}
               <span class="font-medium"> public</span>
             {:else}
               <span class="font-medium"> private</span>
@@ -94,9 +138,11 @@
   button={false}
 />
 
-<EditBranchDialog
-  bind:open={editProjectOpen}
-  {organization}
-  {project}
-  {primaryBranch}
-/>
+{#if canEditProject}
+  <EditBranchDialog
+    bind:open={editProjectOpen}
+    {organization}
+    {project}
+    {primaryBranch}
+  />
+{/if}

web-admin/src/features/projects/ProjectCardActions.svelte

@@ -10,14 +10,16 @@
     organization,
     project,
     open = $bindable(false),
+    canEdit = false,
     onEdit,
     onRename,
     onDelete,
   }: {
     organization: string;
     project: string;
     open?: boolean;
-    onEdit: () => void;
+    canEdit?: boolean;
+    onEdit?: () => void;
     onRename: () => void;
     onDelete: () => void;
   } = $props();
@@ -28,9 +30,11 @@
     <ThreeDot size="16px" />
   </Dropdown.Trigger>
   <Dropdown.Content class="w-48" align="start" side="right">
-    <Dropdown.Item class="text-sm" onclick={onEdit}>
-      <FeatherEditIcon /> Edit
-    </Dropdown.Item>
+    {#if canEdit}
+      <Dropdown.Item class="text-sm" onclick={() => onEdit?.()}>
+        <FeatherEditIcon /> Edit
+      </Dropdown.Item>
+    {/if}
     <Dropdown.Item class="text-sm" onclick={onRename}>
       <PencilIcon /> Rename
     </Dropdown.Item>