From 98f6fbe9fadfe8bbf7196b87d0b65907e1ef09b7 Mon Sep 17 00:00:00 2001
From: David Butenhof <dbutenho@redhat.com>
Date: Fri, 9 Oct 2026 11:41:03 -0400
Subject: [PATCH] Allow attaching issues to closed milestones

Sometimes we encounter an issue that should have been closed against a
milestone that's now closed: allow listing them in the dialog.

Signed-off-by: David Butenhof <dbutenho@redhat.com>
---
 frontend/src/components/IssueCard.jsx      | 236 +++++++++++++++------
 frontend/src/components/IssueCard.test.jsx |  49 +++++
 2 files changed, 224 insertions(+), 61 deletions(-)

diff --git a/frontend/src/components/IssueCard.jsx b/frontend/src/components/IssueCard.jsx
index c9a51dd..0c850dc 100644
--- a/frontend/src/components/IssueCard.jsx
+++ b/frontend/src/components/IssueCard.jsx
@@ -39,6 +39,7 @@ import {
   addLabel,
   removeLabel,
   createLabel,
+  fetchMilestones,
   setIssueMilestone,
   removeIssueMilestone,
   fetchIssueReactions,
@@ -150,6 +151,11 @@ const IssueCard = ({
   const [isCreatingLabel, setIsCreatingLabel] = useState(false);
   const [currentMilestone, setCurrentMilestone] = useState(issue.milestone);
   const [isMilestoneMenuOpen, setIsMilestoneMenuOpen] = useState(false);
+  const [milestoneTab, setMilestoneTab] = useState(0);
+  const [closedMilestones, setClosedMilestones] = useState([]);
+  const [closedMilestonesLoaded, setClosedMilestonesLoaded] = useState(false);
+  const [closedMilestonesLoading, setClosedMilestonesLoading] = useState(false);
+  const [closedMilestonesError, setClosedMilestonesError] = useState(null);
   const milestoneMenuRef = useRef(null);
   const milestoneToggleRef = useRef(null);
   const menuRef = useRef(null);
@@ -825,9 +831,10 @@ const IssueCard = ({
       } else {
         // Set milestone
         await setIssueMilestone(issue.number, milestoneNumber);
-        const newMilestone = milestonesCache.data.find(
-          (m) => m.number === milestoneNumber
-        );
+        const newMilestone = [
+          ...milestonesCache.data,
+          ...closedMilestones,
+        ].find((m) => m.number === milestoneNumber);
         if (newMilestone) {
           setCurrentMilestone(newMilestone);
         }
@@ -845,6 +852,32 @@ const IssueCard = ({
     }
   };
 
+  // Assisted-by: openai-code-assist
+  const loadClosedMilestones = () => {
+    if (closedMilestonesLoaded || closedMilestonesLoading) return;
+
+    setClosedMilestonesLoading(true);
+    setClosedMilestonesError(null);
+    fetchMilestones('closed')
+      .then((data) => {
+        setClosedMilestones(data);
+        setClosedMilestonesLoaded(true);
+        setClosedMilestonesLoading(false);
+      })
+      .catch((err) => {
+        setClosedMilestonesError(err.message);
+        setClosedMilestonesLoading(false);
+      });
+  };
+
+  const handleMilestoneTabSelect = (_event, key) => {
+    const nextTab = Number(key);
+    setMilestoneTab(nextTab);
+    if (nextTab === 1) {
+      loadClosedMilestones();
+    }
+  };
+
   const isLabelSelected = (labelName) => {
     return currentLabels.some((label) => label.name === labelName);
   };
@@ -1903,7 +1936,12 @@ const IssueCard = ({
           >
             <Button
               variant={currentMilestone ? 'primary' : 'secondary'}
-              onClick={() => setIsMilestoneMenuOpen(!isMilestoneMenuOpen)}
+              onClick={() => {
+                setIsMilestoneMenuOpen(!isMilestoneMenuOpen);
+                if (!isMilestoneMenuOpen) {
+                  setMilestoneTab(0);
+                }
+              }}
               style={{
                 padding: '0.25rem 0.75rem',
                 fontSize: '0.75rem',
@@ -1930,64 +1968,140 @@ const IssueCard = ({
                   overflowY: 'auto',
                 }}
               >
-                <div
-                  style={{
-                    padding: '0.5rem',
-                    cursor: 'pointer',
-                    borderBottom: '1px solid #d2d2d2',
-                    backgroundColor:
-                      currentMilestone === null ? '#f0f0f0' : 'transparent',
-                  }}
-                  onClick={() => {
-                    handleMilestoneChange(null);
-                    setIsMilestoneMenuOpen(false);
-                  }}
-                  onMouseEnter={(e) => {
-                    if (currentMilestone !== null) {
-                      e.currentTarget.style.backgroundColor = '#f0f0f0';
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (currentMilestone !== null) {
-                      e.currentTarget.style.backgroundColor = 'transparent';
-                    }
-                  }}
+                <Tabs
+                  activeKey={milestoneTab}
+                  onSelect={handleMilestoneTabSelect}
+                  aria-label={`Milestone state for issue #${issue.number}`}
                 >
-                  <span style={{ fontSize: '0.875rem', fontStyle: 'italic' }}>
-                    No Milestone
-                  </span>
-                </div>
-                {milestonesCache.data.map((milestone) => (
-                  <div
-                    key={milestone.number}
-                    style={{
-                      padding: '0.5rem',
-                      cursor: 'pointer',
-                      backgroundColor:
-                        currentMilestone?.number === milestone.number
-                          ? '#f0f0f0'
-                          : 'transparent',
-                    }}
-                    onClick={() => {
-                      handleMilestoneChange(milestone.number);
-                      setIsMilestoneMenuOpen(false);
-                    }}
-                    onMouseEnter={(e) => {
-                      if (currentMilestone?.number !== milestone.number) {
-                        e.currentTarget.style.backgroundColor = '#f0f0f0';
-                      }
-                    }}
-                    onMouseLeave={(e) => {
-                      if (currentMilestone?.number !== milestone.number) {
-                        e.currentTarget.style.backgroundColor = 'transparent';
-                      }
-                    }}
-                  >
-                    <span style={{ fontSize: '0.875rem' }}>
-                      {milestone.title}
-                    </span>
-                  </div>
-                ))}
+                  <Tab eventKey={0} title={<TabTitleText>Open</TabTitleText>}>
+                    <div>
+                      <div
+                        style={{
+                          padding: '0.5rem',
+                          cursor: 'pointer',
+                          borderBottom: '1px solid #d2d2d2',
+                          backgroundColor:
+                            currentMilestone === null
+                              ? '#f0f0f0'
+                              : 'transparent',
+                        }}
+                        onClick={() => {
+                          handleMilestoneChange(null);
+                          setIsMilestoneMenuOpen(false);
+                        }}
+                        onMouseEnter={(e) => {
+                          if (currentMilestone !== null) {
+                            e.currentTarget.style.backgroundColor = '#f0f0f0';
+                          }
+                        }}
+                        onMouseLeave={(e) => {
+                          if (currentMilestone !== null) {
+                            e.currentTarget.style.backgroundColor =
+                              'transparent';
+                          }
+                        }}
+                      >
+                        <span
+                          style={{ fontSize: '0.875rem', fontStyle: 'italic' }}
+                        >
+                          No Milestone
+                        </span>
+                      </div>
+                      {milestonesCache.data
+                        .filter((milestone) => milestone.number !== 0)
+                        .map((milestone) => (
+                          <div
+                            key={milestone.number}
+                            style={{
+                              padding: '0.5rem',
+                              cursor: 'pointer',
+                              backgroundColor:
+                                currentMilestone?.number === milestone.number
+                                  ? '#f0f0f0'
+                                  : 'transparent',
+                            }}
+                            onClick={() => {
+                              handleMilestoneChange(milestone.number);
+                              setIsMilestoneMenuOpen(false);
+                            }}
+                            onMouseEnter={(e) => {
+                              if (
+                                currentMilestone?.number !== milestone.number
+                              ) {
+                                e.currentTarget.style.backgroundColor =
+                                  '#f0f0f0';
+                              }
+                            }}
+                            onMouseLeave={(e) => {
+                              if (
+                                currentMilestone?.number !== milestone.number
+                              ) {
+                                e.currentTarget.style.backgroundColor =
+                                  'transparent';
+                              }
+                            }}
+                          >
+                            <span style={{ fontSize: '0.875rem' }}>
+                              {milestone.title}
+                            </span>
+                          </div>
+                        ))}
+                    </div>
+                  </Tab>
+                  <Tab eventKey={1} title={<TabTitleText>Closed</TabTitleText>}>
+                    {closedMilestonesLoading && (
+                      <div style={{ padding: '1rem', textAlign: 'center' }}>
+                        <Spinner
+                          size="md"
+                          aria-label="Loading closed milestones"
+                        />
+                      </div>
+                    )}
+                    {closedMilestonesError && (
+                      <Alert
+                        variant="danger"
+                        isInline
+                        title="Error loading closed milestones"
+                      >
+                        {closedMilestonesError}
+                      </Alert>
+                    )}
+                    {!closedMilestonesLoading &&
+                      !closedMilestonesError &&
+                      closedMilestones.map((milestone) => (
+                        <div
+                          key={milestone.number}
+                          style={{
+                            padding: '0.5rem',
+                            cursor: 'pointer',
+                            backgroundColor:
+                              currentMilestone?.number === milestone.number
+                                ? '#f0f0f0'
+                                : 'transparent',
+                          }}
+                          onClick={() => {
+                            handleMilestoneChange(milestone.number);
+                            setIsMilestoneMenuOpen(false);
+                          }}
+                          onMouseEnter={(e) => {
+                            if (currentMilestone?.number !== milestone.number) {
+                              e.currentTarget.style.backgroundColor = '#f0f0f0';
+                            }
+                          }}
+                          onMouseLeave={(e) => {
+                            if (currentMilestone?.number !== milestone.number) {
+                              e.currentTarget.style.backgroundColor =
+                                'transparent';
+                            }
+                          }}
+                        >
+                          <span style={{ fontSize: '0.875rem' }}>
+                            {milestone.title}
+                          </span>
+                        </div>
+                      ))}
+                  </Tab>
+                </Tabs>
               </div>
             )}
           </div>
diff --git a/frontend/src/components/IssueCard.test.jsx b/frontend/src/components/IssueCard.test.jsx
index 13e572d..38d95d4 100644
--- a/frontend/src/components/IssueCard.test.jsx
+++ b/frontend/src/components/IssueCard.test.jsx
@@ -598,6 +598,55 @@ describe('IssueCard', () => {
     });
   });
 
+  it('loads closed milestones in a separate tab and can assign one', async () => {
+    const user = userEvent.setup();
+    const onMilestoneChange = vi.fn();
+    const closedMilestone = {
+      number: 11,
+      title: 'Completed release',
+      state: 'closed',
+    };
+    milestonesCache.data = [{ number: 10, title: 'Next release' }];
+    api.fetchMilestones.mockResolvedValue([closedMilestone]);
+    api.setIssueMilestone.mockResolvedValue({});
+
+    await act(async () => {
+      render(
+        <table>
+          <tbody>
+            <IssueCard
+              issue={mockIssue}
+              onMilestoneChange={onMilestoneChange}
+            />
+          </tbody>
+        </table>
+      );
+    });
+
+    await user.click(screen.getByRole('button', { name: 'No Milestone' }));
+    expect(screen.getByRole('tab', { name: 'Open' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Closed' })).toBeInTheDocument();
+
+    await user.click(screen.getByRole('tab', { name: 'Closed' }));
+
+    await waitFor(() => {
+      expect(api.fetchMilestones).toHaveBeenCalledWith('closed');
+      expect(screen.getByText('Completed release')).toBeInTheDocument();
+    });
+    await user.click(screen.getByText('Completed release'));
+
+    await waitFor(() => {
+      expect(api.setIssueMilestone).toHaveBeenCalledWith(459, 11);
+      expect(onMilestoneChange).toHaveBeenCalledWith({
+        fromMilestoneNumber: null,
+        toMilestoneNumber: 11,
+      });
+      expect(
+        screen.getByRole('button', { name: 'Completed release' })
+      ).toBeInTheDocument();
+    });
+  });
+
   it('calls onMilestoneChange with to null when milestone is removed', async () => {
     const user = userEvent.setup();
     const onMilestoneChange = vi.fn();