feat(bkn-project): show projects as cards like the knowledge network list

src/modules/bkn-project/components/ProjectCard.module.css

@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) 2026 OpenBKN
+ * SPDX-License-Identifier: LicenseRef-OpenBKN
+ * Licensed under the OpenBKN License, a modified Apache 2.0 with Additional
+ * Conditions. See LICENSE for the full text.
+ */
+
+/* The knowledge network card, so both lists look and behave alike. */
+.card {
+  composes: card from "../../knowledge-network/components/network/KnowledgeNetworkCard.module.css";
+  --network-accent: var(--color-text-link);
+  min-height: 188px;
+}
+
+.archived {
+  --network-accent: var(--color-border);
+  opacity: 0.65;
+}
+
+.header {
+  composes: header from "../../knowledge-network/components/network/KnowledgeNetworkCard.module.css";
+}
+
+.titleRow {
+  composes: titleRow from "../../knowledge-network/components/network/KnowledgeNetworkCard.module.css";
+}
+
+.iconBox {
+  composes: iconBox from "../../knowledge-network/components/network/KnowledgeNetworkCard.module.css";
+  color: var(--color-text-link);
+}
+
+.titleContent {
+  composes: titleContent from "../../knowledge-network/components/network/KnowledgeNetworkCard.module.css";
+}
+
+.titleText {
+  composes: titleText from "../../knowledge-network/components/network/KnowledgeNetworkCard.module.css";
+}
+
+.moreButton {
+  composes: moreButton from "../../knowledge-network/components/network/KnowledgeNetworkCard.module.css";
+}
+
+.cardMenu {
+  composes: cardMenu from "../../knowledge-network/components/network/KnowledgeNetworkCard.module.css";
+}
+
+.footer {
+  composes: footer from "../../knowledge-network/components/network/KnowledgeNetworkCard.module.css";
+}
+
+.footerLeft {
+  composes: footerLeft from "../../knowledge-network/components/network/KnowledgeNetworkCard.module.css";
+}
+
+.metaItem {
+  composes: metaItem from "../../knowledge-network/components/network/KnowledgeNetworkCard.module.css";
+}
+
+.statusRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  min-height: 22px;
+  margin-top: 6px;
+  font-size: 12px;
+}
+
+.statusRow :global(.ant-tag) {
+  margin-inline-end: 0;
+}
+
+.facts {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0;
+  padding: 12px 18px 12px 70px;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.fact {
+  display: flex;
+  gap: 10px;
+  min-width: 0;
+}
+
+.fact dt {
+  flex-shrink: 0;
+  color: var(--color-text-tertiary);
+}
+
+.fact dd {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  margin: 0;
+  color: var(--color-text-secondary);
+}
+
+.ellipsis {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sameNetwork {
+  flex-shrink: 0;
+  margin-inline-end: 0;
+}
+
+.muted {
+  color: var(--color-text-tertiary);
+}

src/modules/bkn-project/components/ProjectCard.test.tsx

@@ -0,0 +1,139 @@
+/**
+ * Copyright (c) 2026 OpenBKN
+ * SPDX-License-Identifier: LicenseRef-OpenBKN
+ * Licensed under the OpenBKN License, a modified Apache 2.0 with Additional
+ * Conditions. See LICENSE for the full text.
+ */
+
+import { render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { Project } from "@/modules/bkn-project/types/project";
+
+const getStatusMock = vi.hoisted(() => vi.fn());
+const translate = vi.hoisted(
+  () => (key: string, options?: Record<string, unknown>) =>
+    options ? `${key}:${JSON.stringify(options)}` : key,
+);
+
+vi.mock("react-i18next", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-i18next")>()),
+  useTranslation: () => ({ t: translate }),
+}));
+
+vi.mock("@/modules/bkn-project/services/publish.service", () => ({
+  getProjectStatus: getStatusMock,
+}));
+
+import { ProjectCard } from "./ProjectCard";
+
+const project: Project = {
+  archived: false,
+  baselineNetworkId: "orders",
+  branch: "project/p1",
+  catalogIds: ["c1", "c2"],
+  createTime: 1,
+  id: "p1",
+  knId: "orders",
+  name: "Orders",
+  otherProjects: 0,
+  owner: { id: "me", type: "user" },
+  updateTime: 1,
+};
+
+const release = {
+  knVersion: 3,
+  networkId: "orders",
+  rolledBack: false,
+  running: null,
+  version: "1.2.0",
+};
+
+function renderCard(overrides: Partial<Project> = {}) {
+  return render(
+    <MemoryRouter>
+      <ProjectCard
+        catalogNames={{ c1: "ERP" }}
+        isOwner
+        networkName="Orders network"
+        onArchive={vi.fn()}
+        onOpen={vi.fn()}
+        onUnarchive={vi.fn()}
+        project={{ ...project, ...overrides }}
+      />
+    </MemoryRouter>,
+  );
+}
+
+describe("ProjectCard", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("shows where the project stands, its network and its data sources", async () => {
+    getStatusMock.mockResolvedValue({ release: null, stage: "check_needs_attention" });
+    renderCard();
+
+    expect(
+      await screen.findByText("bknProject.list.card.stages.check_needs_attention"),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Orders network" })).toHaveAttribute(
+      "href",
+      "/knowledge-network/workspace/orders/overview",
+    );
+    // A catalog the caller cannot read keeps its id.
+    expect(
+      screen.getByText("ERPbknProject.list.card.separatorc2", { normalizer: (text) => text }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("bknProject.list.ownerYou")).toBeInTheDocument();
+  });
+
+  it("names the published version in the stage of a published project", async () => {
+    getStatusMock.mockResolvedValue({ release, stage: "published" });
+    renderCard();
+
+    expect(
+      await screen.findByText('bknProject.release.publish.publishedTag:{"version":"1.2.0"}'),
+    ).toBeInTheDocument();
+    expect(screen.queryByText(/lastRelease/)).toBeNull();
+  });
+
+  it("names the last release of a project that went on after it", async () => {
+    getStatusMock.mockResolvedValue({ release, stage: "deciding" });
+    renderCard();
+
+    expect(await screen.findByText("bknProject.list.card.stages.deciding")).toBeInTheDocument();
+    expect(
+      screen.getByText('bknProject.list.card.lastRelease:{"version":"1.2.0"}'),
+    ).toBeInTheDocument();
+  });
+
+  it("says the network was switched back, with the version it runs", async () => {
+    getStatusMock.mockResolvedValue({
+      release: { ...release, rolledBack: true, running: { knVersion: 2, label: "v1.1.0" } },
+      stage: "published",
+    });
+    renderCard();
+
+    expect(
+      await screen.findByText('bknProject.release.publish.rolledBack:{"version":"v1.1.0"}'),
+    ).toBeInTheDocument();
+  });
+
+  it("shows an archived project as archived without reading its status", async () => {
+    renderCard({ archived: true });
+
+    expect(screen.getByText("bknProject.list.card.stages.archived")).toBeInTheDocument();
+    await waitFor(() => expect(getStatusMock).not.toHaveBeenCalled());
+  });
+
+  it("still shows the card when its status cannot be read", async () => {
+    getStatusMock.mockRejectedValue(new Error("down"));
+    renderCard();
+
+    await waitFor(() => expect(getStatusMock).toHaveBeenCalledWith("p1"));
+    expect(screen.getByText("Orders")).toBeInTheDocument();
+    expect(screen.queryByText(/stages\./)).toBeNull();
+  });
+});