only show status remove warning if it is being used

packages/frontend/src/components/organisations-dialog.tsx

@@ -52,6 +52,7 @@ function OrganisationsDialog({
     const [newStatusColour, setNewStatusColour] = useState(DEFAULT_STATUS_COLOUR);
     const [statusError, setStatusError] = useState<string | null>(null);
     const [statusToRemove, setStatusToRemove] = useState<string | null>(null);
+    const [issuesUsingStatus, setIssuesUsingStatus] = useState<number>(0);
     const [reassignToStatus, setReassignToStatus] = useState<string>("");
 
     const [confirmDialog, setConfirmDialog] = useState<{
@@ -218,11 +219,34 @@ function OrganisationsDialog({
         setStatusError(null);
     };
 
-    const handleRemoveStatusClick = (status: string) => {
-        if (Object.keys(statuses).length <= 1) return;
-        setStatusToRemove(status);
-        const remaining = Object.keys(statuses).filter((s) => s !== status);
-        setReassignToStatus(remaining[0] || "");
+    const handleRemoveStatusClick = async (status: string) => {
+        if (Object.keys(statuses).length <= 1 || !selectedOrganisation) return;
+        try {
+            await issue.statusCount({
+                organisationId: selectedOrganisation.Organisation.id,
+                status,
+                onSuccess: (data) => {
+                    const count = (data as { count?: number }).count ?? 0;
+                    if (count > 0) {
+                        setStatusToRemove(status);
+                        setIssuesUsingStatus(count);
+                        const remaining = Object.keys(statuses).filter((s) => s !== status);
+                        setReassignToStatus(remaining[0] || "");
+                        return;
+                    }
+
+                    const nextStatuses = Object.keys(statuses).filter((s) => s !== status);
+                    void updateStatuses(
+                        Object.fromEntries(nextStatuses.map((statusKey) => [statusKey, statuses[statusKey]])),
+                    );
+                },
+                onError: (error) => {
+                    console.error("error checking status usage:", error);
+                },
+            });
+        } catch (err) {
+            console.error("error checking status usage:", err);
+        }
     };
 
     const moveStatus = async (status: string, direction: "up" | "down") => {
@@ -276,7 +300,7 @@ function OrganisationsDialog({
                 )}
             </DialogTrigger>
 
-            <DialogContent className="sm:max-w-md w-full max-w-[calc(100vw-2rem)]">
+            <DialogContent className="max-w-lg w-full max-w-[calc(100vw-2rem)]">
                 <DialogHeader>
                     <DialogTitle>Organisations</DialogTitle>
                 </DialogHeader>
@@ -471,7 +495,7 @@ function OrganisationsDialog({
                                                                         Object.keys(statuses).length <= 1
                                                                     }
                                                                     onSelect={() =>
-                                                                        handleRemoveStatusClick(status)
+                                                                        void handleRemoveStatusClick(status)
                                                                     }
                                                                     className="hover:bg-destructive/10"
                                                                 >
@@ -587,7 +611,7 @@ function OrganisationsDialog({
                             }
                         }}
                     >
-                        <DialogContent className="sm:max-w-lg">
+                        <DialogContent className="w-md">
                             <DialogHeader>
                                 <DialogTitle>Remove Status</DialogTitle>
                             </DialogHeader>
@@ -596,7 +620,8 @@ function OrganisationsDialog({
                                 {statusToRemove ? (
                                     <StatusTag status={statusToRemove} colour={statuses[statusToRemove]} />
                                 ) : null}{" "}
-                                status? Which status would you like issues with this status to be set to?
+                                status? <span className="font-700 text-foreground">{issuesUsingStatus}</span>{" "}
+                                issues are using it. Which status would you like these issues to use instead?
                             </p>
                             <Select value={reassignToStatus} onValueChange={setReassignToStatus}>
                                 <SelectTrigger className="w-min">

packages/frontend/src/components/status-tag.tsx

@@ -1,3 +1,4 @@
+import { DEFAULT_STATUS_COLOUR } from "@issue/shared";
 import { cn } from "@/lib/utils";
 
 const DARK_TEXT_COLOUR = "#0a0a0a";
@@ -14,7 +15,7 @@ const isLight = (hex: string): boolean => {
 
 export default function StatusTag({
     status,
-    colour,
+    colour = DEFAULT_STATUS_COLOUR,
     className,
 }: {
     status: string;

packages/frontend/src/lib/server/issue/index.ts

@@ -1,4 +1,5 @@
 export { byProject } from "@/lib/server/issue/byProject";
 export { create } from "@/lib/server/issue/create";
 export { replaceStatus } from "@/lib/server/issue/replaceStatus";
+export { statusCount } from "@/lib/server/issue/statusCount";
 export { update } from "@/lib/server/issue/update";

packages/frontend/src/lib/server/issue/statusCount.ts

@@ -0,0 +1,28 @@
+import { getServerURL } from "@/lib/utils";
+import type { ServerQueryInput } from "..";
+
+export async function statusCount({
+    organisationId,
+    status,
+    onSuccess,
+    onError,
+}: {
+    organisationId: number;
+    status: string;
+} & ServerQueryInput) {
+    const url = new URL(`${getServerURL()}/issues/status-count`);
+    url.searchParams.set("organisationId", `${organisationId}`);
+    url.searchParams.set("status", status);
+
+    const res = await fetch(url.toString(), {
+        credentials: "include",
+    });
+
+    if (!res.ok) {
+        const error = await res.text();
+        onError?.(error || `failed to get issue status count (${res.status})`);
+    } else {
+        const data = await res.json();
+        onSuccess?.(data, res);
+    }
+}