Function WebhookEditorPage

frontend/src/pages/WebhookEditorPage.tsx:62–689

()

}`;

export function WebhookEditorPage() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const location = useLocation();
  const { toast } = useToast();
  const isNew = !id || id === 'new';

  // Get returnTo state for back button (if navigated from workflow webhooks sidebar)
  const navigationState = location.state as {
    returnTo?: { path: string; openWebhooksSidebar?: boolean };
  } | null;
  const returnToPath = navigationState?.returnTo?.path;
  const openWebhooksSidebarOnReturn = navigationState?.returnTo?.openWebhooksSidebar;

  // Derive active tab from URL
  const activeTab = useMemo(() => {
    if (location.pathname.endsWith('/deliveries')) return 'deliveries';
    if (location.pathname.endsWith('/settings')) return 'settings';
    return 'editor';
  }, [location.pathname]);

  const navigateToTab = (tab: string) => {
    if (isNew) return; // Don't navigate for new webhooks
    const basePath = `/webhooks/${id}`;
    if (tab === 'editor') {
      navigate(basePath);
    } else {
      navigate(`${basePath}/${tab}`);
    }
  };

  const [isLoading, setIsLoading] = useState(!isNew);
  const [isSaving, setIsSaving] = useState(false);
  const [webhook, setWebhook] = useState<WebhookConfiguration | null>(null);

  // Form State
  const [form, setForm] = useState<WebhookFormState>({
    workflowId: '',
    name: 'New Webhook',
    description: '',
    parsingScript: DEFAULT_PARSING_SCRIPT,
    expectedInputs: [],
  });

  const [initialForm, setInitialForm] = useState<WebhookFormState | null>(
    isNew
      ? {
          workflowId: '',
          name: 'New Webhook',
          description: '',
          parsingScript: DEFAULT_PARSING_SCRIPT,
          expectedInputs: [],
        }
      : null,
  );

  const isDirty = useMemo(() => {
    if (!initialForm) return false;