Add 'closed' PR state to support closed but not merged PRs

This change addresses issue open-telemetry#7 from the upstream repository.
It adds a 'closed' state to differentiate between PRs that were
closed without merging and PRs that were merged.

- Add 'closed' to ChangelogEntry state type
- Update webhook handler to set state correctly for closed PRs
- Add closed state UI with red icon in FilteredList
- Update test controls to allow creating test entries with different states

Closes open-telemetry#7

Author: austinlparker

src/app/api/test/route.ts

@@ -6,22 +6,27 @@
 import { saveEntry } from "@/lib/store";
 import { ChangelogEntry } from "@/types/entry";
 
-export async function POST() {
+export async function POST(request: Request) {
   // Only allow in development
   if (process.env.NODE_ENV !== "development") {
     return new Response("Test endpoint only available in development", {
       status: 403,
     });
   }
 
+  // Get state from query parameters if provided, default to "opened"
+  const url = new URL(request.url);
+  const state = url.searchParams.get("state") || "opened";
+  const validStates = ["opened", "closed", "merged", "released"];
+  
   const testEntry: ChangelogEntry = {
     id: Date.now(), // Use timestamp as ID for test entries
-    title: `Test Entry ${new Date().toISOString()}`,
+    title: `Test Entry ${new Date().toISOString()} (${state})`,
     description: "This is a test entry with **bold text**, *italic* and a [link text](http://example.com) to verify markdown handling in RSS feed.",
     date: new Date().toISOString(),
     metadata: {
       sourceRepo: "open-telemetry/test-repo",
-      state: "opened",
+      state: validStates.includes(state) ? state as "opened" | "closed" | "merged" | "released" : "opened",
       url: "https://github.com/open-telemetry/test-repo/pull/123",
       author: "test-user",
     },

src/app/api/webhook/route.ts

@@ -62,7 +62,6 @@ export async function POST(request: NextRequest) {
       await saveEntry(entry);
     } else if (
       payload.action === "closed" &&
-      payload.pull_request.merged &&
       payload.pull_request.labels.some(
         (label) => label.name === CHANGELOG_LABEL,
       )
@@ -74,7 +73,7 @@ export async function POST(request: NextRequest) {
         date: payload.pull_request.merged_at || payload.pull_request.updated_at,
         metadata: {
           sourceRepo: payload.repository.full_name,
-          state: "merged",
+          state: payload.pull_request.merged ? "merged" : "closed",
           url: payload.pull_request.html_url,
           author: payload.pull_request.user.login,
         },

src/components/filtered-list.tsx

@@ -61,13 +61,15 @@ const StatusIcon = ({ state, label }: { state: string; label: string }) => {
     merged: RiCheckboxCircleFill,
     opened: RiAddCircleFill,
     released: RiRocketFill,
+    closed: RiCheckboxCircleFill,
   };
 
   const Icon = icons[state as keyof typeof icons];
   const colors = {
     merged: "text-purple-500",
     opened: "text-green-500",
     released: "text-blue-500",
+    closed: "text-red-500",
   };
 
   return Icon ? (
@@ -91,6 +93,7 @@ export function FilteredList({ entries }: { entries: ChangelogEntry[] }) {
   const stateOptions = [
     { value: "all", label: "All States" },
     { value: "opened", label: "Opened" },
+    { value: "closed", label: "Closed" },
     { value: "merged", label: "Merged" },
     { value: "released", label: "Released" },
   ];

src/components/test-controls.tsx

@@ -9,19 +9,20 @@ import { useState } from "react";
 
 export function TestControls() {
   const [status, setStatus] = useState<string>("");
+  const [entryState, setEntryState] = useState<string>("opened");
 
-  const addTestEntry = async () => {
+  const addTestEntry = async (state: string) => {
     try {
-      setStatus("Adding test entry...");
-      const response = await fetch("/api/test", {
+      setStatus(`Adding test entry with state: ${state}...`);
+      const response = await fetch(`/api/test?state=${state}`, {
         method: "POST",
       });
 
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
 
-      setStatus("Test entry added! Check if the page updates.");
+      setStatus(`Test entry (${state}) added! Check if the page updates.`);
 
       // Clear status after 3 seconds
       setTimeout(() => setStatus(""), 3000);
@@ -34,17 +35,31 @@ export function TestControls() {
 
   return (
     <div className="fixed bottom-4 right-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700">
-      <button
-        onClick={addTestEntry}
-        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-      >
-        Add Test Entry
-      </button>
-      {status && (
-        <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
-          {status}
-        </p>
-      )}
+      <div className="flex flex-col gap-2">
+        <div className="flex gap-2">
+          <select 
+            value={entryState}
+            onChange={(e) => setEntryState(e.target.value)}
+            className="px-2 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+          >
+            <option value="opened">Opened</option>
+            <option value="closed">Closed</option>
+            <option value="merged">Merged</option>
+            <option value="released">Released</option>
+          </select>
+          <button
+            onClick={() => addTestEntry(entryState)}
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+          >
+            Add Test Entry
+          </button>
+        </div>
+        {status && (
+          <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
+            {status}
+          </p>
+        )}
+      </div>
     </div>
   );
 }

src/types/entry.ts

@@ -10,7 +10,7 @@ export interface ChangelogEntry {
   date: string;
   metadata: {
     sourceRepo: string;
-    state: "opened" | "merged" | "released";
+    state: "opened" | "merged" | "released" | "closed";
     url: string;
     author: string;
   };