From 9012a8470cb0813792c09534ba9f4c4ddcbfe520 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timot=C3=A9=C3=A9?= <mantastores1@gmail.com>
Date: Wed, 27 May 2026 13:22:39 +0100
Subject: [PATCH] feat: add label filtering and sorting to IssueBacklog (#461)

---
 frontend/src/components/IssueBacklog.test.tsx | 182 ++++++++++++++++++
 frontend/src/components/IssueBacklog.tsx      | 180 +++++++++++++++--
 2 files changed, 345 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/IssueBacklog.test.tsx

diff --git a/frontend/src/components/IssueBacklog.test.tsx b/frontend/src/components/IssueBacklog.test.tsx
new file mode 100644
index 0000000..f4f591c
--- /dev/null
+++ b/frontend/src/components/IssueBacklog.test.tsx
@@ -0,0 +1,182 @@
+import React from "react";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { describe, it, expect, afterEach } from "vitest";
+import { IssueBacklog } from "./IssueBacklog";
+import { OpenIssue } from "../types/stream";
+
+const MOCK_ISSUES: OpenIssue[] = [
+  {
+    id: "1",
+    title: "Fix login bug",
+    summary: "Users cannot log in with email",
+    complexity: "Trivial",
+    points: 100,
+    labels: ["bug", "auth"],
+  },
+  {
+    id: "2",
+    title: "Add dark mode",
+    summary: "Support system dark mode preference",
+    complexity: "Medium",
+    points: 150,
+    labels: ["enhancement", "ui"],
+  },
+  {
+    id: "3",
+    title: "Refactor DB layer",
+    summary: "Extract DB calls into a service",
+    complexity: "High",
+    points: 200,
+    labels: ["refactor", "backend"],
+  },
+  {
+    id: "4",
+    title: "Fix typo in README",
+    summary: "Small typo on line 42",
+    complexity: "Trivial",
+    points: 100,
+    labels: ["bug", "docs"],
+  },
+];
+
+afterEach(() => cleanup());
+
+describe("IssueBacklog — label filtering", () => {
+  it("renders all issues when no label filter is active", () => {
+    render(<IssueBacklog issues={MOCK_ISSUES} />);
+    expect(screen.getAllByRole("article")).toHaveLength(4);
+  });
+
+  it("filter by a single label reduces visible issues", () => {
+    render(<IssueBacklog issues={MOCK_ISSUES} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "bug" }));
+
+    const articles = screen.getAllByRole("article");
+    // issues 1 and 4 have the "bug" label
+    expect(articles).toHaveLength(2);
+    expect(screen.getByText("Fix login bug")).toBeInTheDocument();
+    expect(screen.getByText("Fix typo in README")).toBeInTheDocument();
+    expect(screen.queryByText("Add dark mode")).not.toBeInTheDocument();
+    expect(screen.queryByText("Refactor DB layer")).not.toBeInTheDocument();
+  });
+
+  it("OR logic: selecting two labels shows issues matching either", () => {
+    render(<IssueBacklog issues={MOCK_ISSUES} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "bug" }));
+    fireEvent.click(screen.getByRole("button", { name: "ui" }));
+
+    const articles = screen.getAllByRole("article");
+    // bug → issues 1,4 | ui → issue 2
+    expect(articles).toHaveLength(3);
+  });
+
+  it("toggling an active label chip removes it from the filter", () => {
+    render(<IssueBacklog issues={MOCK_ISSUES} />);
+
+    const bugChip = screen.getByRole("button", { name: "bug" });
+    fireEvent.click(bugChip); // activate
+    expect(screen.getAllByRole("article")).toHaveLength(2);
+
+    fireEvent.click(bugChip); // deactivate
+    expect(screen.getAllByRole("article")).toHaveLength(4);
+  });
+
+  it("shows empty state message when no issues match the filter", () => {
+    render(<IssueBacklog issues={MOCK_ISSUES} />);
+
+    // "docs" label only on issue 4; then also filter "backend" — but let's
+    // use a label that exists on no issue by passing a custom set
+    const noMatchIssues: OpenIssue[] = [
+      { id: "x", title: "X", summary: "s", complexity: "Trivial", points: 100, labels: ["alpha"] },
+    ];
+    cleanup();
+    render(<IssueBacklog issues={noMatchIssues} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "alpha" }));
+    // deactivate to get 0 results — use an issue list where filter yields nothing
+    // Easier: render with empty issues and no labels
+    cleanup();
+    render(<IssueBacklog issues={[]} />);
+    expect(screen.getByText(/No issues match/i)).toBeInTheDocument();
+  });
+
+  it("'Clear filters' button resets label selection and shows all issues", () => {
+    render(<IssueBacklog issues={MOCK_ISSUES} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "bug" }));
+    expect(screen.getAllByRole("article")).toHaveLength(2);
+
+    fireEvent.click(screen.getByRole("button", { name: /clear filters/i }));
+    expect(screen.getAllByRole("article")).toHaveLength(4);
+  });
+
+  it("'Clear filters' button is not visible when no filters are active", () => {
+    render(<IssueBacklog issues={MOCK_ISSUES} />);
+    expect(screen.queryByRole("button", { name: /clear filters/i })).not.toBeInTheDocument();
+  });
+
+  it("label chips have aria-pressed reflecting active state", () => {
+    render(<IssueBacklog issues={MOCK_ISSUES} />);
+
+    const bugChip = screen.getByRole("button", { name: "bug" });
+    expect(bugChip).toHaveAttribute("aria-pressed", "false");
+
+    fireEvent.click(bugChip);
+    expect(bugChip).toHaveAttribute("aria-pressed", "true");
+  });
+});
+
+describe("IssueBacklog — sorting", () => {
+  it("sorts by complexity Trivial → High", () => {
+    render(<IssueBacklog issues={MOCK_ISSUES} />);
+
+    const select = screen.getByLabelText(/sort by/i);
+    fireEvent.change(select, { target: { value: "complexity-asc" } });
+
+    const articles = screen.getAllByRole("article");
+    // Trivial issues first (ids 1,4), then Medium (2), then High (3)
+    expect(articles[0]).toHaveTextContent("Fix login bug");
+    expect(articles[articles.length - 1]).toHaveTextContent("Refactor DB layer");
+  });
+
+  it("sorts by points low → high", () => {
+    render(<IssueBacklog issues={MOCK_ISSUES} />);
+
+    fireEvent.change(screen.getByLabelText(/sort by/i), { target: { value: "points-asc" } });
+
+    const articles = screen.getAllByRole("article");
+    // 100, 100, 150, 200
+    expect(articles[articles.length - 1]).toHaveTextContent("Refactor DB layer");
+  });
+
+  it("sorts by points high → low", () => {
+    render(<IssueBacklog issues={MOCK_ISSUES} />);
+
+    fireEvent.change(screen.getByLabelText(/sort by/i), { target: { value: "points-desc" } });
+
+    const articles = screen.getAllByRole("article");
+    expect(articles[0]).toHaveTextContent("Refactor DB layer");
+  });
+
+  it("'Clear filters' also resets sort to default", () => {
+    render(<IssueBacklog issues={MOCK_ISSUES} />);
+
+    const select = screen.getByLabelText(/sort by/i) as HTMLSelectElement;
+    fireEvent.change(select, { target: { value: "points-desc" } });
+    expect(select.value).toBe("points-desc");
+
+    fireEvent.click(screen.getByRole("button", { name: /clear filters/i }));
+    expect(select.value).toBe("none");
+  });
+});
+
+describe("IssueBacklog — loading state", () => {
+  it("renders skeleton items when loading is true", () => {
+    render(<IssueBacklog issues={[]} loading />);
+    expect(screen.queryByRole("article")).not.toBeInTheDocument();
+    // skeletons are divs, not articles — just verify no issue content
+    expect(screen.queryByText(/No issues match/i)).not.toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/components/IssueBacklog.tsx b/frontend/src/components/IssueBacklog.tsx
index f0fa1c6..3c96c49 100644
--- a/frontend/src/components/IssueBacklog.tsx
+++ b/frontend/src/components/IssueBacklog.tsx
@@ -1,18 +1,71 @@
+import { useState, useMemo } from "react";
 import { OpenIssue } from "../types/stream";
 
+type SortKey = "none" | "complexity-asc" | "points-asc" | "points-desc";
+
+const COMPLEXITY_ORDER: Record<OpenIssue["complexity"], number> = {
+  Trivial: 0,
+  Medium: 1,
+  High: 2,
+};
+
 interface IssueBacklogProps {
   issues: OpenIssue[];
   loading?: boolean;
 }
 
 export function IssueBacklog({ issues, loading }: IssueBacklogProps) {
+  const [activeLabels, setActiveLabels] = useState<string[]>([]);
+  const [sortKey, setSortKey] = useState<SortKey>("none");
+
+  const allLabels = useMemo(() => {
+    const set = new Set<string>();
+    issues.forEach((issue) => issue.labels.forEach((l) => set.add(l)));
+    return Array.from(set).sort();
+  }, [issues]);
+
+  const toggleLabel = (label: string) => {
+    setActiveLabels((prev) =>
+      prev.includes(label) ? prev.filter((l) => l !== label) : [...prev, label]
+    );
+  };
+
+  const clearFilters = () => {
+    setActiveLabels([]);
+    setSortKey("none");
+  };
+
+  const hasActiveFilters = activeLabels.length > 0 || sortKey !== "none";
+
+  const visibleIssues = useMemo(() => {
+    let result = issues;
+
+    if (activeLabels.length > 0) {
+      result = result.filter((issue) =>
+        activeLabels.some((label) => issue.labels.includes(label))
+      );
+    }
+
+    if (sortKey === "complexity-asc") {
+      result = [...result].sort(
+        (a, b) => COMPLEXITY_ORDER[a.complexity] - COMPLEXITY_ORDER[b.complexity]
+      );
+    } else if (sortKey === "points-asc") {
+      result = [...result].sort((a, b) => a.points - b.points);
+    } else if (sortKey === "points-desc") {
+      result = [...result].sort((a, b) => b.points - a.points);
+    }
+
+    return result;
+  }, [issues, activeLabels, sortKey]);
+
   if (loading) {
     return (
       <div className="card">
         <h2>Maintainer Backlog</h2>
         <div className="activity-feed">
           {[1, 2, 3].map((i) => (
-            <div key={i} className="skeleton skeleton-item" style={{ height: '100px' }} />
+            <div key={i} className="skeleton skeleton-item" style={{ height: "100px" }} />
           ))}
         </div>
       </div>
@@ -23,23 +76,116 @@ export function IssueBacklog({ issues, loading }: IssueBacklogProps) {
     <div className="card">
       <h2>Maintainer Backlog</h2>
       <p className="muted">Open these as GitHub issues after publishing the repository.</p>
-      <div className="issue-list">
-        {issues.map((issue) => (
-          <article key={issue.id} className="issue-item">
-            <h3>{issue.title}</h3>
-            <p>{issue.summary}</p>
-            <p className="muted">
-              Complexity: {issue.complexity} | Points: {issue.points}
-            </p>
-            <div className="chip-row">
-              {issue.labels.map((label) => (
-                <span key={label} className="chip">
+
+      {/* Controls */}
+      <div
+        className="backlog-controls"
+        style={{ display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center", margin: "1rem 0" }}
+      >
+        {/* Label filter chips */}
+        {allLabels.length > 0 && (
+          <div
+            className="chip-row"
+            role="group"
+            aria-label="Filter by label"
+            style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem" }}
+          >
+            {allLabels.map((label) => {
+              const active = activeLabels.includes(label);
+              return (
+                <button
+                  key={label}
+                  type="button"
+                  onClick={() => toggleLabel(label)}
+                  aria-pressed={active}
+                  className={active ? "chip chip-active" : "chip"}
+                  style={{
+                    cursor: "pointer",
+                    border: active ? "2px solid #6366f1" : "2px solid transparent",
+                    background: active ? "#eef2ff" : undefined,
+                    fontWeight: active ? 600 : undefined,
+                  }}
+                >
                   {label}
-                </span>
-              ))}
-            </div>
-          </article>
-        ))}
+                </button>
+              );
+            })}
+          </div>
+        )}
+
+        {/* Sort select */}
+        <div className="field-group" style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: "0.5rem" }}>
+          <label htmlFor="backlog-sort" style={{ fontSize: "0.85rem", whiteSpace: "nowrap" }}>
+            Sort by:
+          </label>
+          <select
+            id="backlog-sort"
+            value={sortKey}
+            onChange={(e) => setSortKey(e.target.value as SortKey)}
+            style={{
+              border: "1.5px solid #d1d5db",
+              borderRadius: "8px",
+              padding: "0.35rem 0.6rem",
+              fontSize: "0.85rem",
+            }}
+          >
+            <option value="none">Default</option>
+            <option value="complexity-asc">Complexity (Trivial → High)</option>
+            <option value="points-asc">Points (Low → High)</option>
+            <option value="points-desc">Points (High → Low)</option>
+          </select>
+        </div>
+
+        {/* Clear filters */}
+        {hasActiveFilters && (
+          <button
+            type="button"
+            className="btn-ghost"
+            onClick={clearFilters}
+            style={{ fontSize: "0.85rem", color: "#6b7280" }}
+          >
+            Clear filters
+          </button>
+        )}
+      </div>
+
+      {/* Results count when filtering */}
+      {activeLabels.length > 0 && (
+        <p className="muted" style={{ fontSize: "0.85rem", marginBottom: "0.75rem" }}>
+          Showing {visibleIssues.length} of {issues.length} issues
+        </p>
+      )}
+
+      {/* Issue list */}
+      <div className="issue-list">
+        {visibleIssues.length === 0 ? (
+          <p className="muted">No issues match the selected filters.</p>
+        ) : (
+          visibleIssues.map((issue) => (
+            <article key={issue.id} className="issue-item">
+              <h3>{issue.title}</h3>
+              <p>{issue.summary}</p>
+              <p className="muted">
+                Complexity: {issue.complexity} | Points: {issue.points}
+              </p>
+              <div className="chip-row">
+                {issue.labels.map((label) => (
+                  <span
+                    key={label}
+                    className={activeLabels.includes(label) ? "chip chip-active" : "chip"}
+                    style={
+                      activeLabels.includes(label)
+                        ? { background: "#eef2ff", fontWeight: 600 }
+                        : undefined
+                    }
+                  >
+                    {label}
+                  </span>
+                ))}
+              </div>
+            </article>
+          ))
+        )}
       </div>
     </div>
   );