fix(playbooks): handle filtered dropdown specs

The playbook list endpoint can return playbooks that are not visible through the DB playbooks API for the current user. The dropdown merged list results by assuming every listed playbook had a matching spec, which threw and silently hid the menu.\n\nBuild dropdown entries from the DB playbooks response and merge in list metadata only for matching IDs. Surface query errors instead of returning null so failures are visible.

Author: adityathebe

src/api/query-hooks/playbooks.tsx

@@ -72,10 +72,14 @@ export function useGetPlaybooksToRun(
       // this is a bit of a hack, but we need to get the specs because that's
       // where the icon is stored
       const specs = await getPlaybookSpecsByIDs(ids);
-      return res.map((playbook) => ({
-        ...playbook,
-        title: specs.find((spec) => spec.id === playbook.id)!.title,
-        spec: specs.find((spec) => spec.id === playbook.id)!.spec
+      const playbooksByID = new Map(
+        res.map((playbook) => [playbook.id, playbook])
+      );
+
+      return specs.map((playbookSpec) => ({
+        ...playbooksByID.get(playbookSpec.id),
+        title: playbookSpec.title,
+        spec: playbookSpec.spec
       })) as (RunnablePlaybook & {
         spec: any;
       })[];

src/components/Playbooks/Runs/Submit/PlaybooksDropdownMenu.tsx

@@ -1,3 +1,4 @@
+import { getErrorMessage } from "@flanksource-ui/api/types/error";
 import { Icon } from "@flanksource-ui/ui/Icons/Icon";
 import {
   Menu,
@@ -47,7 +48,15 @@ export default function PlaybooksDropdownMenu({
     config_id
   });
 
-  if (error || playbooks?.length === 0 || isLoading) {
+  if (error) {
+    return (
+      <div className={clsx(containerClassName, "text-sm text-red-600")}>
+        Failed to load playbooks: {getErrorMessage(error)}
+      </div>
+    );
+  }
+
+  if (playbooks?.length === 0 || isLoading) {
     return null;
   }