Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions desktop/playwright.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ export default defineConfig({
"**/project-inbox.spec.ts",
"**/project-issue-comments.spec.ts",
"**/project-pr-review.spec.ts",
"**/projects-empty-create.spec.ts",
"**/persona-model-combobox-screenshots.spec.ts",
"**/drafts-screenshots.spec.ts",
"**/drafts-all-fix-screenshots.spec.ts",
Expand Down
24 changes: 22 additions & 2 deletions desktop/src/features/projects/ui/ProjectCards.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
Folders,
GitCommit,
GitPullRequest,
Plus,
TerminalSquare,
Trash2,
} from "lucide-react";
Expand Down Expand Up @@ -313,16 +314,35 @@ function RepositoryUnavailableIndicator({
);
}

export function EmptyState() {
export function EmptyState({
onCreateProject,
}: {
onCreateProject?: () => void;
} = {}) {
return (
<div className="flex flex-1 flex-col items-center justify-center gap-3 px-4 py-16 text-center">
<div
className="flex flex-1 flex-col items-center justify-center gap-3 px-4 py-16 text-center"
data-testid="projects-empty-state"
>
<Folders className="h-10 w-10 text-muted-foreground/40" />
<div className="space-y-1">
<p className="text-sm font-medium text-foreground">No projects yet</p>
<p className="text-sm text-muted-foreground">
Projects published to this relay will appear here.
</p>
</div>
{onCreateProject ? (
<Button
data-testid="projects-empty-create-project"
onClick={onCreateProject}
size="sm"
type="button"
variant="outline"
>
<Plus className="mr-1 h-4 w-4" />
Create your first project
</Button>
) : null}
</div>
);
}
Expand Down
10 changes: 5 additions & 5 deletions desktop/src/features/projects/ui/ProjectsView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -597,10 +597,6 @@ export function ProjectsView() {
);
}

if (projects.length === 0) {
return <EmptyState />;
}

const projectItems =
visibleProjects.length === 0 ? (
<EmptyFilteredState />
Expand Down Expand Up @@ -859,7 +855,11 @@ export function ProjectsView() {
</div>
<div className="mx-auto w-full max-w-6xl">
<div className="w-full min-w-0 pb-4 pt-4">
{filter === "all" ? (
{projects.length === 0 ? (
<EmptyState
onCreateProject={() => setCreateProjectOpen(true)}
/>
) : filter === "all" ? (
<ProjectsOverviewPanel
metadata={
<ProjectsOverviewRail
Expand Down
68 changes: 68 additions & 0 deletions desktop/tests/e2e/projects-empty-create.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { expect, test } from "@playwright/test";

import { installMockBridge, TEST_IDENTITIES } from "../helpers/bridge";
import { FEATURE_OVERRIDES_STORAGE_KEY } from "../helpers/features";

const DEFAULT_MOCK_PUBKEY = "deadbeef".repeat(8);

// The projects surface is a preview feature — opt in before the app mounts.
// Must run before installMockBridge so React reads the override on mount.
async function enableProjectsFeature(page: import("@playwright/test").Page) {
await page.addInitScript(
({ key }) => {
window.localStorage.setItem(key, JSON.stringify({ projects: true }));
},
{ key: FEATURE_OVERRIDES_STORAGE_KEY },
);
}

/**
* Hide every seeded mock project so Projects renders the true empty state.
*
* Addresses must match MOCK_PROJECT_SEEDS (and the kind:30621 "buzz" project
* announcement) in `desktop/src/testing/e2eBridge.ts`. If a seed is added or
* renamed there without updating this list, the list stays populated and the
* `projects-empty-state` assertion below fails.
*/
async function hideAllMockProjects(page: import("@playwright/test").Page) {
const hiddenCards = [
`30621:${DEFAULT_MOCK_PUBKEY}:buzz`,
`30617:${DEFAULT_MOCK_PUBKEY}:buzz`,
`30617:${TEST_IDENTITIES.alice.pubkey}:relay-tools`,
`30617:${TEST_IDENTITIES.bob.pubkey}:design-system`,
];
await page.addInitScript((cards) => {
window.localStorage.setItem(
"buzz.projects.hidden-cards.v1",
JSON.stringify(cards),
);
}, hiddenCards);
}

test("empty Projects keeps Create controls and offers an empty-state CTA", async ({
page,
}) => {
await enableProjectsFeature(page);
await hideAllMockProjects(page);
await installMockBridge(page);
await page.goto("/", { waitUntil: "domcontentloaded" });
await page.getByTestId("open-projects-view").click();

// The chrome (header + toolbar + create menu) must mount with zero projects.
await expect(page.getByTestId("projects-empty-state")).toBeVisible({
timeout: 10_000,
});
await expect(page.getByTestId("projects-create-menu")).toBeVisible();

// Entry point 1: the toolbar "+" create menu.
await page.getByTestId("projects-create-menu").hover();
await page.getByRole("menuitem", { name: "Project" }).click();
await expect(page.getByTestId("create-project-dialog")).toBeVisible();
await page.keyboard.press("Escape");
await expect(page.getByTestId("create-project-dialog")).toBeHidden();

// Entry point 2: the empty-state CTA.
await page.getByTestId("projects-empty-create-project").click();
await expect(page.getByTestId("create-project-dialog")).toBeVisible();
await expect(page.getByTestId("create-project-name")).toBeVisible();
});