Add cleanup stuck builds button to versions page (#547)

* Add cleanup stuck builds button to versions page

Adds an admin-only button to the versions page that calls the
cleanUpStuckBuilds backend endpoint. This lets maintainers clean up
all stuck builds directly from the UI with full context, rather than
needing to trigger a GitHub workflow.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Fix lint: rename err to error

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Reject non-OK responses in useAuthenticatedEndpoint

Previously, HTTP error responses (401, 500, etc.) resolved successfully
since response.json() doesn't check status codes. Now throws an Error
for non-OK responses so toast notifications correctly show the error
path. Fixes both the cleanup button and the existing retry button.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: frostebite

src/components/docs/versions/clean-up-stuck-builds-button.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { HiOutlineRefresh } from 'react-icons/hi';
+import { SimpleAuthCheck } from '@site/src/components/auth/safe-auth-check';
+import { useAuthenticatedEndpoint } from '@site/src/core/hooks/use-authenticated-endpoint';
+import { useNotification } from '@site/src/core/hooks/use-notification';
+import Spinner from '@site/src/components/molecules/spinner';
+import Tooltip from '@site/src/components/molecules/tooltip/tooltip';
+
+const CleanUpStuckBuildsButton = () => {
+  const [running, setRunning] = useState(false);
+  const notify = useNotification();
+  const cleanUp = useAuthenticatedEndpoint('cleanUpStuckBuilds', {});
+
+  const onClick = async () => {
+    try {
+      setRunning(true);
+      await notify.promise(cleanUp(), {
+        loading: <Spinner type="spin" />,
+        success: (response) => {
+          const results = response.results || [];
+          return results.length > 0 ? results.join('\n') : response.message;
+        },
+        error: (error) => error.message || 'Cleanup failed',
+      });
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  return (
+    <SimpleAuthCheck fallback={<span />} requiredClaims={{ admin: true }}>
+      <Tooltip content="Clean up all stuck builds (checks DockerHub, marks as published or failed)">
+        <button
+          type="button"
+          onClick={onClick}
+          disabled={running}
+          style={{
+            padding: '4px 12px',
+            border: '1px solid #ccc',
+            borderRadius: 4,
+            cursor: running ? 'wait' : 'pointer',
+            background: 'transparent',
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 6,
+            fontSize: '0.85em',
+          }}
+        >
+          <HiOutlineRefresh color={running ? 'orange' : 'inherit'} />
+          Clean up stuck builds
+        </button>
+      </Tooltip>
+    </SimpleAuthCheck>
+  );
+};
+
+export default CleanUpStuckBuildsButton;

src/components/docs/versions/image-versions.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import SignInSignOutButton from '@site/src/components/auth/sign-in-sign-out-button';
+import CleanUpStuckBuildsButton from './clean-up-stuck-builds-button';
 import UnityVersions from './unity-versions';
 import styles from './unity-version.module.scss';
 
@@ -28,7 +29,10 @@ const ImageVersions = ({ versions }: Props) => {
             );
           })}
         </select>
-        <SignInSignOutButton style={{ float: 'right' }} />
+        <span style={{ float: 'right', display: 'flex', alignItems: 'center', gap: 8 }}>
+          <CleanUpStuckBuildsButton />
+          <SignInSignOutButton />
+        </span>
       </div>
 
       <UnityVersions selectedRepoVersion={selectedVersion} />

src/core/hooks/use-authenticated-endpoint.tsx

@@ -16,6 +16,10 @@ export function useAuthenticatedEndpoint(endpoint: string, payload: { [key: stri
       body: JSON.stringify(payload),
     });
 
-    return response.json();
+    const body = await response.json();
+    if (!response.ok) {
+      throw new Error(body.message || `Request failed (${response.status})`);
+    }
+    return body;
   };
 }