🚧 Add role deletion

frontend/src/pages/Roles.tsx

@@ -91,6 +91,28 @@ export function RolesPage() {
     onError: (e: Error) => setError(e.message),
   });
 
+  const remove = useMutation({
+    mutationFn: (rolename: string) => api.delete(`/mqtt/roles/${rolename}`),
+    onSuccess: (_data, rolename) => {
+      // The broker's deleteRole removes the role from every client and
+      // group that holds it; refresh those lists so chips disappear.
+      queryClient.invalidateQueries({ queryKey: ["roles"] });
+      queryClient.invalidateQueries({ queryKey: ["clients"] });
+      queryClient.invalidateQueries({ queryKey: ["groups"] });
+      setBanner(
+        `Role ${rolename} deleted and removed from all clients and groups.`,
+      );
+      setError(null);
+      // Close the editor if the deleted role was open — the detail query
+      // would otherwise 404 against a role that no longer exists.
+      if (selected === rolename) {
+        setSelected(null);
+        setDirty(false);
+      }
+    },
+    onError: (e: Error) => setError(e.message),
+  });
+
   const submit = (e: FormEvent) => {
     e.preventDefault();
     if (name) create.mutate(name);
@@ -176,7 +198,21 @@ export function RolesPage() {
             <tr key={r.rolename}>
               <td className="mono">{r.rolename}</td>
               <td>
-                <button onClick={() => startEditing(r.rolename)}>Edit ACLs</button>
+                <button onClick={() => startEditing(r.rolename)}>Edit ACLs</button>{" "}
+                <button
+                  className="danger"
+                  onClick={() => {
+                    if (
+                      confirm(
+                        `Delete role ${r.rolename}? It will be removed from ` +
+                          "every client and group that currently holds it.",
+                      )
+                    )
+                      remove.mutate(r.rolename);
+                  }}
+                >
+                  Delete
+                </button>
               </td>
             </tr>
           ))}