design: Apply New Table Design in Rill Cloud

web-admin/src/features/alerts/CreateAlert.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
   import { Button } from "@rilldata/web-common/components/button";
   import GuardedDialog from "@rilldata/web-common/components/dialog/GuardedDialog.svelte";
   import {
@@ -28,6 +30,24 @@
   $: hasTimeDimension = !!$metricsView?.data?.timeDimension;
 
   let open = false;
+
+  // Auto-open when arriving from the dashboards listing's "Create alert" item.
+  // Strip the query param afterwards so a refresh doesn't reopen the dialog.
+  $: if (
+    !open &&
+    $page.url.searchParams.get("action") === "create-alert" &&
+    hasTimeDimension &&
+    $dashboardStore &&
+    !$isCustomTimeRange
+  ) {
+    open = true;
+    const url = new URL($page.url);
+    url.searchParams.delete("action");
+    void goto(url.pathname + url.search, {
+      replaceState: true,
+      noScroll: true,
+    });
+  }
 </script>
 
 {#if hasTimeDimension && $dashboardStore}

web-admin/src/features/alerts/history/AlertHistoryTable.svelte

@@ -3,7 +3,7 @@
   import NoAlertRunsYet from "@rilldata/web-admin/features/alerts/history/NoAlertRunsYet.svelte";
   import { useAlert } from "@rilldata/web-admin/features/alerts/selectors";
   import ResourceList from "@rilldata/web-common/features/resources/ResourceList.svelte";
-  import type { V1AlertExecution } from "@rilldata/web-common/runtime-client/gen/index.schemas";
+  import { type V1AlertExecution } from "@rilldata/web-common/runtime-client";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import type { ColumnDef } from "tanstack-table-8-svelte-5";
   import { renderComponent } from "tanstack-table-8-svelte-5";
@@ -14,10 +14,11 @@
 
   $: alertQuery = useAlert(runtimeClient, alert);
 
+  $: history = $alertQuery.data?.resource?.alert?.state?.executionHistory ?? [];
+
   /**
    * Table column definitions.
-   * - "composite": Renders all dashboard data in a single cell.
-   * - Others: Used for sorting and filtering but not displayed.
+   * - "composite": Renders all execution data in a single cell.
    */
   const columns: ColumnDef<V1AlertExecution>[] = [
     {
@@ -46,13 +47,13 @@
     </div>
   {:else if $alertQuery.isLoading}
     <div class="text-fg-secondary">Loading...</div>
-  {:else if !$alertQuery.data?.resource.alert.state.executionHistory.length}
+  {:else if !history.length}
     <NoAlertRunsYet />
   {:else}
     <ResourceList
       kind="alert"
       {columns}
-      data={$alertQuery.data?.resource.alert.state.executionHistory}
+      data={history}
       toolbar={false}
       fixedRowHeight={false}
     />

web-admin/src/features/alerts/listing/AlertActionsCell.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { createAdminServiceDeleteAlert } from "@rilldata/web-admin/client";
+  import IconButton from "@rilldata/web-common/components/button/IconButton.svelte";
+  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
+  import ThreeDot from "@rilldata/web-common/components/icons/ThreeDot.svelte";
+  import DeleteConfirmDialog from "@rilldata/web-common/features/resources/DeleteConfirmDialog.svelte";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
+  import { getRuntimeServiceListResourcesQueryKey } from "@rilldata/web-common/runtime-client";
+  import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
+  import { useQueryClient } from "@tanstack/svelte-query";
+  import { Pencil, Trash2Icon } from "lucide-svelte";
+
+  export let organization: string;
+  export let project: string;
+  export let id: string;
+  export let title: string;
+  export let isCreatedByCode: boolean;
+
+  const runtimeClient = useRuntimeClient();
+  const queryClient = useQueryClient();
+  const deleteAlert = createAdminServiceDeleteAlert();
+
+  let isDropdownOpen = false;
+  let isDeleteConfirmOpen = false;
+
+  function handleEdit() {
+    void goto(`/${organization}/${project}/-/alerts/${id}`);
+  }
+
+  async function handleDelete() {
+    try {
+      await $deleteAlert.mutateAsync({
+        org: organization,
+        project,
+        name: id,
+      });
+      await queryClient.invalidateQueries({
+        queryKey: getRuntimeServiceListResourcesQueryKey(
+          runtimeClient.instanceId,
+        ),
+      });
+    } catch {
+      eventBus.emit("notification", {
+        message: "Failed to delete alert",
+        type: "error",
+      });
+    }
+  }
+</script>
+
+{#if !isCreatedByCode}
+  <div class="flex justify-end" data-no-row-click>
+    <DropdownMenu.Root bind:open={isDropdownOpen}>
+      <DropdownMenu.Trigger class="flex-none">
+        <IconButton
+          rounded
+          active={isDropdownOpen}
+          ariaLabel={`Actions for ${title}`}
+        >
+          <ThreeDot size="16px" />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content side="bottom" align="start" class="min-w-[95px]">
+        <DropdownMenu.Item
+          class="font-normal flex items-center"
+          onclick={handleEdit}
+        >
+          <Pencil size="12px" />
+          <span class="ml-2">Edit</span>
+        </DropdownMenu.Item>
+        <DropdownMenu.Item
+          class="font-normal flex items-center"
+          type="destructive"
+          onclick={() => {
+            isDeleteConfirmOpen = true;
+          }}
+        >
+          <Trash2Icon size="12px" />
+          <span class="ml-2">Delete</span>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  </div>
+
+  <DeleteConfirmDialog
+    bind:open={isDeleteConfirmOpen}
+    title="Delete this alert?"
+    onDelete={handleDelete}
+  >
+    The alert "<strong>{title}</strong>" will be permanently deleted and will no
+    longer trigger notifications.
+  </DeleteConfirmDialog>
+{/if}

web-admin/src/features/alerts/listing/AlertOwnerCell.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import ProjectAccessControls from "../../projects/ProjectAccessControls.svelte";
+  import { useAlertOwnerName } from "../selectors";
+
+  export let organization: string;
+  export let project: string;
+  export let ownerId: string;
+
+  $: ownerName = useAlertOwnerName(organization, project, ownerId);
+</script>
+
+<ProjectAccessControls {organization} {project}>
+  <svelte:fragment slot="manage-project">
+    {#if $ownerName.isSuccess}
+      <span class="truncate">
+        {$ownerName.data ?? "Code-defined"}
+      </span>
+    {:else}
+      <span class="text-fg-tertiary">—</span>
+    {/if}
+  </svelte:fragment>
+</ProjectAccessControls>

web-admin/src/features/alerts/listing/AlertStatusCell.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import StatusTextCell from "@rilldata/web-common/features/resources/cells/StatusTextCell.svelte";
+  import {
+    V1AssertionStatus,
+    type V1Resource,
+  } from "@rilldata/web-common/runtime-client";
+
+  export let resource: V1Resource;
+
+  type Tone = "default" | "muted" | "success" | "destructive";
+
+  $: ({ label, tone } = describeStatus(resource));
+
+  function describeStatus(r: V1Resource): { label: string; tone: Tone } {
+    const last = r.alert?.state?.executionHistory?.[0];
+    if (!last) return { label: "Pending", tone: "muted" };
+
+    switch (last.result?.status) {
+      case V1AssertionStatus.ASSERTION_STATUS_FAIL:
+        return { label: "Triggered", tone: "destructive" };
+      case V1AssertionStatus.ASSERTION_STATUS_PASS:
+        return { label: "OK", tone: "success" };
+      case V1AssertionStatus.ASSERTION_STATUS_ERROR:
+        return { label: "Error", tone: "destructive" };
+      default:
+        return { label: "Pending", tone: "muted" };
+    }
+  }
+</script>
+
+<StatusTextCell {label} {tone} />