simplify welcome redirect flow

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

@@ -1,5 +1,4 @@
 <script lang="ts">
- import { goto } from "$app/navigation";
  import Card from "@rilldata/web-common/components/card/Card.svelte";
  import Globe from "@rilldata/web-common/components/icons/Globe.svelte";
  import Lock from "@rilldata/web-common/components/icons/Lock.svelte";
@@ -21,10 +20,7 @@
 </script>
 
 {#if $proj.data}
- <Card
- on:click={() => goto(`/${organization}/${project}`)}
- bgClasses="bg-gradient-to-b from-white to-slate-50"
- >
+ <Card href="/{organization}/{project}">
  <!-- Project name -->
  <h2
  class="text-gray-700 font-medium text-lg text-center px-4 {doesProjectNameIncludeUnderscores(

web-common/src/components/card/Card.svelte

@@ -1,29 +1,56 @@
 <script lang="ts">
- export let bgClasses = "";
+ import LoadingCircleOutline from "../icons/LoadingCircleOutline.svelte";
+
+ export let disabled = false;
+ export let isLoading = false;
+ export let redirect = false;
+ export let href = "/";
+ export let imageUrl = "";
 </script>
 
-<div
- class="w-[240px] h-[240px] rounded-md
-flex flex-col items-center justify-center gap-y-2
-relative {bgClasses} 
-transition duration-300 ease-out custom-shadow custom-shadow-hover cursor-pointer"
+<a
+ href={href + (redirect ? "?redirect=true" : "")}
+ class={imageUrl ? `bg-[url('${imageUrl}')]` : "gradient"}
  on:click
  on:keydown={(e) => e.key === "Enter" && e.currentTarget.click()}
- role="button"
- tabindex="0"
+ aria-disabled={disabled && !isLoading}
 >
+ {#if isLoading}
+ <div
+ class="absolute z-10 inset-0 flex items-center justify-center backdrop-blur-sm"
+ >
+ <LoadingCircleOutline size="48px" color="var(--color-primary-600)" />
+ </div>
+ {/if}
  <slot />
-</div>
+</a>
+
+<style lang="postcss">
+ a {
+ @apply bg-no-repeat bg-center bg-cover;
+ @apply relative;
+ @apply size-60 rounded-md;
+ @apply flex flex-col items-center justify-center gap-y-2;
+ @apply transition duration-300 ease-out;
+ @apply cursor-pointer overflow-hidden;
 
-<style>
- .custom-shadow {
  box-shadow:
  0px 2px 3px rgba(15, 23, 42, 0.06),
  0px 1px 3px rgba(15, 23, 42, 0.08),
  0px 0px 0px 1px rgba(15, 23, 42, 0.12);
  }
 
- .custom-shadow-hover:hover {
+ .gradient {
+ @apply bg-gradient-to-b from-white to-slate-50;
+ }
+
+ a[aria-disabled="true"] {
+ cursor: not-allowed;
+ opacity: 0.4;
+ pointer-events: none;
+ }
+
+ a:hover {
  box-shadow:
  0px 2px 3px rgba(99, 102, 241, 0.2),
  0px 1px 3px rgba(15, 23, 42, 0.08),

web-common/src/features/welcome/ProjectCards.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
- import { goto } from "$app/navigation";
  import Subheading from "@rilldata/web-common/components/typography/Subheading.svelte";
  import Card from "../../components/card/Card.svelte";
  import CardDescription from "../../components/card/CardDescription.svelte";
@@ -12,65 +11,90 @@
  import { MetricsEventSpace } from "../../metrics/service/MetricsTypes";
  import { createRuntimeServiceUnpackExample } from "../../runtime-client";
  import { runtime } from "../../runtime-client/runtime-store";
- import EmptyProject from "./EmptyProject.svelte";
+ import { EMPTY_PROJECT_TITLE } from "./constants";
+ import AddCircleOutline from "@rilldata/web-common/components/icons/AddCircleOutline.svelte";
+ import { createRuntimeServiceUnpackEmpty } from "../../runtime-client";
+
+ const unpackExampleProject = createRuntimeServiceUnpackExample();
+ const unpackEmptyProject = createRuntimeServiceUnpackEmpty();
 
  const EXAMPLES = [
  {
  name: "rill-cost-monitoring",
  title: "Cost Monitoring",
  description: "Monitoring cloud infrastructure",
- image:
- "bg-[url('$img/welcome-bg-cost-monitoring.png')] bg-no-repeat bg-cover",
- firstPage: "/files/dashboards/customer_margin_dash.yaml",
+ image: "$img/welcome-bg-cost-monitoring.png",
  },
  {
  name: "rill-openrtb-prog-ads",
  title: "OpenRTB Programmatic Ads",
  description: "Real-time Bidding (RTB) advertising",
- image: "bg-[url('$img/welcome-bg-openrtb.png')] bg-no-repeat bg-cover",
- firstPage: "/files/dashboards/auction.yaml",
+ image: "$img/welcome-bg-openrtb.png",
  },
  {
  name: "rill-github-analytics",
  title: "Github Analytics",
  description: "A Git project's commit activity",
- image:
- "bg-[url('$img/welcome-bg-github-analytics.png')] bg-no-repeat bg-cover",
- firstPage: "/files/dashboards/duckdb_commits.yaml",
+ image: "$img/welcome-bg-github-analytics.png",
  },
  ];
 
- const unpackExampleProject = createRuntimeServiceUnpackExample();
+ let selectedProjectName: string | null = null;
+
+ $: ({ instanceId } = $runtime);
+
+ $: ({ mutateAsync: unpackExample } = $unpackExampleProject);
+ $: ({ mutateAsync: unpackEmpty } = $unpackEmptyProject);
+
+ async function unpackProject(example?: (typeof EXAMPLES)[number]) {
+ selectedProjectName = example ? example.name : EMPTY_PROJECT_TITLE;
 
- async function startWithExampleProject(example: (typeof EXAMPLES)[number]) {
  await behaviourEvent?.fireSplashEvent(
- BehaviourEventAction.ExampleAdd,
+ example
+ ? BehaviourEventAction.ExampleAdd
+ : BehaviourEventAction.ProjectEmpty,
  BehaviourEventMedium.Card,
  MetricsEventSpace.Workspace,
- example.name,
+ example?.name,
  );
 
- const firstPage = example.firstPage;
- await $unpackExampleProject.mutateAsync({
- instanceId: $runtime.instanceId,
- data: {
- name: example.name,
- force: true,
- },
- });
- await goto(firstPage);
+ const mutationFunction = example ? unpackExample : unpackEmpty;
+ const key = example ? "name" : "title";
+
+ try {
+ await mutationFunction({
+ instanceId,
+ data: {
+ [key]: selectedProjectName,
+ force: true,
+ },
+ });
+ } catch {
+ selectedProjectName = null;
+ }
  }
 </script>
 
 <section class="flex flex-col items-center gap-y-5">
  <Subheading>Or jump right into a project.</Subheading>
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
- <EmptyProject />
- {#each EXAMPLES as example}
+ <Card
+ disabled={!!selectedProjectName}
+ isLoading={selectedProjectName === EMPTY_PROJECT_TITLE}
+ on:click={() => unpackProject()}
+ >
+ <AddCircleOutline size="2em" className="text-slate-600" />
+ <CardTitle position="middle">Start with an empty project</CardTitle>
+ </Card>
+
+ {#each EXAMPLES as example (example.name)}
  <Card
- bgClasses={example.image}
+ redirect
+ imageUrl={example.image}
+ disabled={!!selectedProjectName}
+ isLoading={selectedProjectName === example.name}
  on:click={async () => {
- await startWithExampleProject(example);
+ await unpackProject(example);
  }}
  >
  <CardTitle>{example.title}</CardTitle>

web-common/src/features/welcome/is-project-initialized.ts

@@ -24,9 +24,7 @@ export async function isProjectInitialized(instanceId: string) {
  }
 }
 
-export async function handleUninitializedProject(
- instanceId: string,
-): Promise<boolean> {
+export async function handleUninitializedProject(instanceId: string) {
  // If the project is not initialized, determine what page to route to dependent on the OLAP connector
  const instance = await runtimeServiceGetInstance(instanceId, {
  sensitive: true,
@@ -38,14 +36,15 @@ export async function handleUninitializedProject(
  }
 
  // DuckDB-backed projects should head to the Welcome page for user-guided initialization
- if (olapConnector === "duckdb") {
- return true;
- } else {
+ if (olapConnector !== "duckdb") {
  // Clickhouse and Druid-backed projects should be initialized immediately
  await runtimeServiceUnpackEmpty(instanceId, {
  title: EMPTY_PROJECT_TITLE,
  force: true,
  });
- return false;
+
+ return true;
  }
+
+ return false;
 }

web-local/src/routes/(application)/(workspace)/+layout.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
  import Navigation from "@rilldata/web-common/layout/navigation/Navigation.svelte";
+
+ export let data;
 </script>
 
 <div class="flex size-full overflow-hidden">
- <Navigation />
+ {#if data.initialized}
+ <Navigation />
+ {/if}
 
  <section class="size-full overflow-hidden">
  <slot />

web-local/src/routes/(application)/(workspace)/+page.svelte

@@ -1,9 +1,42 @@
 <script lang="ts">
  import OnboardingWorkspace from "@rilldata/web-common/features/onboarding/OnboardingWorkspace.svelte";
+ import ProjectCards from "@rilldata/web-common/features/welcome/ProjectCards.svelte";
+ import TitleContent from "@rilldata/web-common/features/welcome/TitleContent.svelte";
+ import UserTestCta from "@rilldata/web-common/features/welcome/UserTestCTA.svelte";
+ import { fly } from "svelte/transition";
+
+ export let data;
 </script>
 
 <svelte:head>
  <title>Rill Developer</title>
 </svelte:head>
 
-<OnboardingWorkspace />
+{#if data.initialized}
+ <OnboardingWorkspace />
+{:else}
+ <div class="scroll" in:fly={{ duration: 1600, delay: 400, y: 8 }}>
+ <div class="wrapper column p-10 2xl:py-16">
+ <TitleContent />
+ <div class="column" in:fly={{ duration: 1600, delay: 1200, y: 4 }}>
+ <ProjectCards />
+ <UserTestCta />
+ </div>
+ </div>
+ </div>
+{/if}
+
+<style lang="postcss">
+ .scroll {
+ @apply size-full overflow-x-hidden overflow-y-auto;
+ }
+
+ .wrapper {
+ @apply w-full h-fit min-h-screen bg-no-repeat bg-cover;
+ background-image: url("$img/welcome-bg-art.png");
+ }
+
+ .column {
+ @apply flex flex-col items-center gap-y-6;
+ }
+</style>

web-local/src/routes/(application)/(workspace)/files/[...file]/+page.ts

@@ -4,7 +4,13 @@ import { featureFlags } from "@rilldata/web-common/features/feature-flags";
 import { error, redirect } from "@sveltejs/kit";
 import { get } from "svelte/store";
 
-export const load = async ({ params: { file } }) => {
+export const load = async ({ params: { file }, parent }) => {
+ const parentData = await parent();
+
+ if (!parentData.initialized) {
+ throw redirect(303, "/");
+ }
+
  const readOnly = get(featureFlags.readOnly);
  const path = addLeadingSlash(file);