feat: projects page improvements for cloud editing support

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

@@ -53,6 +53,10 @@
   } from "lucide-svelte";
   import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
   import { onMount } from "svelte";
+  import {
+    deploymentStatusFilterMatches,
+    getDeploymentStatusFilterGroup,
+  } from "@rilldata/web-admin/features/branches/deployment-filter-utils.ts";
 
   let { organization, project }: { organization: string; project: string } =
     $props();
@@ -149,52 +153,15 @@
   });
 
   let filterGroups = $derived([
-    {
-      label: "Status",
-      key: "status",
-      options: [
-        { label: "Ready", value: "running" },
-        { label: "Pending", value: "pending" },
-        { label: "Error", value: "errored" },
-        { label: "Stopped", value: "stopped" },
-      ],
-      selected: statusFilter,
-      defaultValue: [],
-      multiSelect: true,
-    },
+    getDeploymentStatusFilterGroup(statusFilter),
   ] satisfies FilterGroup[]);
 
-  function statusMatches(d: V1Deployment): boolean {
-    if (statusFilter.length === 0) return true;
-    const s = d.status;
-    return statusFilter.some((sel) => {
-      switch (sel) {
-        case "running":
-          return s === V1DeploymentStatus.DEPLOYMENT_STATUS_RUNNING;
-        case "pending":
-          return (
-            s === V1DeploymentStatus.DEPLOYMENT_STATUS_PENDING ||
-            s === V1DeploymentStatus.DEPLOYMENT_STATUS_UPDATING
-          );
-        case "errored":
-          return s === V1DeploymentStatus.DEPLOYMENT_STATUS_ERRORED;
-        case "stopped":
-          return (
-            s === V1DeploymentStatus.DEPLOYMENT_STATUS_STOPPED ||
-            s === V1DeploymentStatus.DEPLOYMENT_STATUS_STOPPING
-          );
-        default:
-          return false;
-      }
-    });
-  }
-
   let visibleDeployments = $derived.by(() => {
     const q = searchText.trim().toLowerCase();
     const active = ($allDeployments.data?.deployments ?? []).filter(
       (d: V1Deployment) =>
         d.status !== V1DeploymentStatus.DEPLOYMENT_STATUS_DELETED &&
-        statusMatches(d) &&
+        deploymentStatusFilterMatches(statusFilter, d) &&
         (q === "" || (d.branch ?? "").toLowerCase().includes(q)),
     );
     return [...active].sort((a, b) => {

web-admin/src/features/branches/deployment-filter-utils.ts

@@ -0,0 +1,57 @@
+import {
+  type V1Deployment,
+  V1DeploymentStatus,
+} from "@rilldata/web-admin/client";
+import type { FilterGroup } from "@rilldata/web-common/components/table-toolbar";
+
+export function getDeploymentStatusFilterGroup(
+  statusFilter: string[],
+  includeUnpublished = false,
+) {
+  return {
+    label: "Status",
+    key: "status",
+    options: [
+      { label: "Ready", value: "running" },
+      { label: "Pending", value: "pending" },
+      { label: "Error", value: "errored" },
+      { label: "Stopped", value: "stopped" },
+      ...(includeUnpublished
+        ? [{ label: "Unpublished", value: "unpublished" }]
+        : []),
+    ],
+    selected: statusFilter,
+    defaultValue: [],
+    multiSelect: true,
+  } satisfies FilterGroup;
+}
+
+export function deploymentStatusFilterMatches(
+  statusFilter: string[],
+  d: V1Deployment | undefined,
+): boolean {
+  if (statusFilter.length === 0) return true;
+  const s = d?.status ?? V1DeploymentStatus.DEPLOYMENT_STATUS_UNSPECIFIED;
+  return statusFilter.some((sel) => {
+    switch (sel) {
+      case "running":
+        return s === V1DeploymentStatus.DEPLOYMENT_STATUS_RUNNING;
+      case "pending":
+        return (
+          s === V1DeploymentStatus.DEPLOYMENT_STATUS_PENDING ||
+          s === V1DeploymentStatus.DEPLOYMENT_STATUS_UPDATING
+        );
+      case "errored":
+        return s === V1DeploymentStatus.DEPLOYMENT_STATUS_ERRORED;
+      case "stopped":
+        return (
+          s === V1DeploymentStatus.DEPLOYMENT_STATUS_STOPPED ||
+          s === V1DeploymentStatus.DEPLOYMENT_STATUS_STOPPING
+        );
+      case "unpublished":
+        return s === V1DeploymentStatus.DEPLOYMENT_STATUS_UNSPECIFIED;
+      default:
+        return false;
+    }
+  });
+}

web-admin/src/features/branches/deployment-utils.ts

@@ -59,7 +59,7 @@ export async function maybeRedirectToEditableDeployment(
   const isActiveEditableDeployment =
     editableDeployment && isActiveDeployment(editableDeployment);
   // Editable deployment is inactive as well, project is probably hibernating, skip redirect.
-  if (!isActiveEditableDeployment) return;
+  if (!isActiveEditableDeployment && prodDeployment) return;
 
   // If user is already in a specific deployment do not redirect.
   // This method is meant as a convenience for direct links to unpublished project.

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

@@ -7,20 +7,32 @@
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
   import { createAdminServiceGetProject } from "../../client";
   import ProjectAccessControls from "./ProjectAccessControls.svelte";
+  import DeploymentStatusChip from "@rilldata/web-admin/features/projects/status/DeploymentStatusChip.svelte";
+  import ProjectCardActions from "@rilldata/web-admin/features/projects/ProjectCardActions.svelte";
+  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";
 
-  export let organization: string;
-  export let project: string;
+  let { organization, project }: { organization: string; project: string } =
+    $props();
 
   // Check whether project is public or private
-  $: proj = createAdminServiceGetProject(organization, project);
+  let proj = $derived(createAdminServiceGetProject(organization, project));
+  let primaryBranch = $derived($proj.data?.project?.primaryBranch);
+
+  let hovering = $state(false);
+  let actionsOpen = $state(false);
+  let editProjectOpen = $state(false);
+  let renameProjectOpen = $state(false);
+  let deleteProjectOpen = $state(false);
 
   function doesProjectNameIncludeUnderscores(project: string) {
     return project.includes("_");
   }
 </script>
 
 {#if $proj.data}
-  <Card href="/{organization}/{project}">
+  <Card href="/{organization}/{project}" bind:hovering>
     <!-- Project name -->
     <h2
       class="text-fg-primary font-medium text-lg text-center px-4 {doesProjectNameIncludeUnderscores(
@@ -31,6 +43,23 @@
     >
       {project}
     </h2>
+    <!-- Project deployment status -->
+    <div class="absolute top-2.5 left-2.5 text-fg-secondary">
+      <DeploymentStatusChip {organization} {project} />
+    </div>
+    <!-- Project actions -->
+    {#if hovering || actionsOpen}
+      <div class="absolute top-2.5 right-2.5 text-fg-secondary">
+        <ProjectCardActions
+          {organization}
+          {project}
+          bind:open={actionsOpen}
+          onEdit={() => (editProjectOpen = true)}
+          onRename={() => (renameProjectOpen = true)}
+          onDelete={() => (deleteProjectOpen = true)}
+        />
+      </div>
+    {/if}
     <!-- Permissions tag -->
     <Tag>
       <ProjectAccessControls {organization} {project}>
@@ -60,3 +89,19 @@
     </div>
   </Card>
 {/if}
+
+<ProjectRenameDialog {organization} {project} bind:open={renameProjectOpen} />
+
+<GuardedDeleteProjectConfirmation
+  {organization}
+  {project}
+  bind:open={deleteProjectOpen}
+  button={false}
+/>
+
+<EditBranchDialog
+  bind:open={editProjectOpen}
+  {organization}
+  {project}
+  {primaryBranch}
+/>

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import * as Dropdown from "@rilldata/web-common/components/dropdown-menu";
+  import ThreeDot from "@rilldata/web-common/components/icons/ThreeDot.svelte";
+  import FeatherEditIcon from "@rilldata/web-common/components/icons/FeatherEditIcon.svelte";
+  import PencilIcon from "@rilldata/web-common/components/icons/PencilIcon.svelte";
+  import Trash from "@rilldata/web-common/components/icons/Trash.svelte";
+  import { ShareIcon } from "lucide-svelte";
+
+  let {
+    organization,
+    project,
+    open = $bindable(false),
+    onEdit,
+    onRename,
+    onDelete,
+  }: {
+    organization: string;
+    project: string;
+    open?: boolean;
+    onEdit: () => void;
+    onRename: () => void;
+    onDelete: () => void;
+  } = $props();
+</script>
+
+<Dropdown.Root bind:open>
+  <Dropdown.Trigger>
+    <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>
+    <Dropdown.Item class="text-sm" onclick={onRename}>
+      <PencilIcon /> Rename
+    </Dropdown.Item>
+    <Dropdown.Item
+      href="/{organization}/{project}/-/dashboards?share=true"
+      class="text-sm"
+    >
+      <ShareIcon size={14} /> Share
+    </Dropdown.Item>
+    <Dropdown.Item class="text-sm text-destructive" onclick={onDelete}>
+      <Trash /> Delete
+    </Dropdown.Item>
+  </Dropdown.Content>
+</Dropdown.Root>

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

@@ -3,37 +3,111 @@
   import ProjectCard from "./ProjectCard.svelte";
   import { Button } from "@rilldata/web-common/components/button";
   import { projectWelcomeEnabled } from "@rilldata/web-admin/features/welcome/project/welcome-status.ts";
+  import {
+    type FilterGroup,
+    type SortDirection,
+    TableToolbar,
+  } from "@rilldata/web-common/components/table-toolbar";
+  import {
+    deploymentStatusFilterMatches,
+    getDeploymentStatusFilterGroup,
+  } from "@rilldata/web-admin/features/branches/deployment-filter-utils.ts";
+  import { createQueries } from "@tanstack/svelte-query";
+  import { getAdminServiceGetProjectQueryOptions } from "@rilldata/web-admin/client/index.ts";
 
-  export let organization: string;
+  let {
+    organization,
+    createProjectsPermission,
+  }: { organization: string; createProjectsPermission: boolean } = $props();
 
-  $: projs = createAdminServiceListProjectsForOrganization(organization, {
-    pageSize: 1000,
+  let projectsQuery = $derived(
+    createAdminServiceListProjectsForOrganization(organization, {
+      pageSize: 1000,
+    }),
+  );
+  let projectDetailsQuery = $derived(
+    createQueries({
+      queries:
+        $projectsQuery.data?.projects.map((p) =>
+          getAdminServiceGetProjectQueryOptions(organization, p.name, {}),
+        ) ?? [],
+      combine: (queries) => {
+        return queries.map((q) => q.data);
+      },
+    }),
+  );
+
+  let searchText = $state("");
+  let sortDirection = $state<SortDirection>("newest");
+  let statusFilter = $state<string[]>([]);
+
+  let filterGroups = $derived([
+    getDeploymentStatusFilterGroup(statusFilter, true),
+  ] satisfies FilterGroup[]);
+
+  let resolvedProjects = $derived.by(() => {
+    const q = searchText.trim().toLowerCase();
+    const projects =
+      $projectsQuery.data?.projects?.filter((p) => {
+        if (!p.name?.toLowerCase().includes(q)) return false;
+        const deployment = $projectDetailsQuery.find(
+          (q) => q?.project?.name === p.name,
+        )?.deployment;
+        return deploymentStatusFilterMatches(statusFilter, deployment);
+      }) ?? [];
+    return projects.sort((a, b) => {
+      const aAfterB = a.createdOn > b.createdOn;
+      if (sortDirection === "newest") {
+        return aAfterB ? -1 : 1;
+      } else {
+        return aAfterB ? 1 : -1;
+      }
+    });
   });
+
+  let showNewProject = $derived(
+    projectWelcomeEnabled && createProjectsPermission,
+  );
+
+  function onFilterChange(key: string, selected: string[]) {
+    if (key === "status") statusFilter = selected;
+  }
 </script>
 
 <div class="flex flex-col gap-y-4">
   <span
     class="flex flex-row items-center text-fg-secondary text-base font-normal leading-normal"
   >
     <span class="grow">Check out your projects below.</span>
-    {#if projectWelcomeEnabled}
-      <Button type="primary" href="/{organization}/-/create-project">
-        Create new
+    {#if showNewProject}
+      <Button type="secondary" href="/{organization}/-/create-project">
+        + New project
       </Button>
     {/if}
   </span>
 
-  {#if $projs.data && $projs.data.projects?.length === 0}
-    <p class="text-fg-secondary text-xs">
-      This organization has no projects yet.
-    </p>
-  {:else if $projs.data && $projs.data.projects?.length > 0}
-    <ol class="flex gap-6 flex-wrap">
-      {#each $projs.data.projects as proj}
-        <li>
-          <ProjectCard {organization} project={proj.name} />
-        </li>
-      {/each}
-    </ol>
-  {/if}
+  <TableToolbar
+    bind:searchText
+    searchDisabled={!$projectsQuery.data?.projects?.length}
+    showSort
+    bind:sortDirection
+    {filterGroups}
+    {onFilterChange}
+    onClearAllFilters={() => {
+      statusFilter = [];
+      searchText = "";
+    }}
+  />
+
+  <ol class="flex gap-6 flex-wrap">
+    {#each resolvedProjects as proj (proj.name)}
+      <li>
+        <ProjectCard {organization} project={proj.name} />
+      </li>
+    {:else}
+      <p class="text-fg-secondary text-xs">
+        This organization has no projects yet.
+      </p>
+    {/each}
+  </ol>
 </div>