Function WebhooksPage

frontend/src/pages/WebhooksPage.tsx:68–515

()

const WEBHOOK_BASE_URL = env.VITE_API_URL || 'https://api.shipsec.ai';

export function WebhooksPage() {
  const { toast } = useToast();
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const [workflowOptions, setWorkflowOptions] = useState<WorkflowOption[]>([]);
  const [workflowsLoading, setWorkflowsLoading] = useState(true);
  const [actionState, setActionState] = useState<Record<string, 'delete' | 'regenerate' | 'test'>>(
    {},
  );

  const webhooks = useWebhookStore((state) => state.webhooks);
  const isLoading = useWebhookStore((state) => state.isLoading);
  const error = useWebhookStore((state) => state.error);
  const filters = useWebhookStore((state) => state.filters);
  const fetchWebhooks = useWebhookStore((state) => state.fetchWebhooks);
  const refreshWebhooks = useWebhookStore((state) => state.refreshWebhooks);
  const setFilters = useWebhookStore((state) => state.setFilters);
  const deleteWebhook = useWebhookStore((state) => state.deleteWebhook);
  const regeneratePath = useWebhookStore((state) => state.regeneratePath);

  useEffect(() => {
    const initialWorkflowId = searchParams.get('workflowId');
    if (initialWorkflowId) {
      setFilters({ workflowId: initialWorkflowId });
    }
  }, []);

  useEffect(() => {
    fetchWebhooks({ force: true }).catch(() => {});
  }, [fetchWebhooks]);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const workflowList = await api.workflows.list();
        if (cancelled) return;
        const normalized = workflowList.map((workflow) => ({
          id: workflow.id,
          name: workflow.name ?? 'Untitled workflow',
        }));
        setWorkflowOptions(normalized);
      } catch (_err) {
        console.error('Failed to load workflows', _err);
        toast({
          title: 'Unable to load workflows',
          description: _err instanceof Error ? _err.message : 'Please try refreshing the page.',
          variant: 'destructive',
        });
      } finally {
        if (!cancelled) {
          setWorkflowsLoading(false);
        }
      }
    })();
    return () => {
      cancelled = true;
    };