[Task] - Build UI for Request Block Configuration with Shadcn Components (Using React-Hook-Form and Zod)

[c0rtexR]

Task Overview

Develop the UI for configuring the request block using Shadcn components. The configuration should allow users to select HTTP methods, input the route (URL), add headers, query parameters, and body content. Use react-hook-form with Zod for form validation.

This is the UI / editor version of the task, so it's recommended to pick this up after block is created or you will have to mock a lot https://github.com/softflow24/data-river/issues/139

SMART Criteria

• Specific 🎯

  • Implement a user-friendly UI for configuring the request block:
  • HTTP Method: A dropdown menu for selecting GET, POST, PUT, PATCH, DELETE.
  • Route (URL): A text input field for the URL with validation using react-hook-form and Zod.
  • Headers: UI for adding key-value pairs (custom headers).
  • Query Parameters: UI for adding query parameters (key-value pairs).
  • Request Body: A text area with JSON validation for the request body.
  • Form validation should be done using react-hook-form with Zod resolver.

• Measurable 📏

  • Users can configure HTTP methods, URLs, headers, query parameters, and body content.
  • Form validation should ensure valid input (e.g., valid URL, valid JSON body) using react-hook-form and Zod.
  • The form submits successfully only if all fields are valid.

• Achievable 🚀

  • Use Shadcn components for the UI (dropdown, text input, key-value pairs).
  • Set up react-hook-form with Zod and integrate the form validation using the resolver.

• Relevant 🎯

  • This task enables users to configure API requests easily through the UI with form validation, improving usability and robustness of the request block.

• Time-bound ⏳

  • Complete within 3 days.

Subtasks 📝

• [ ] Set up react-hook-form with Zod resolver for form validation.
• [ ] Create a dropdown for HTTP method selection using Shadcn components.
• [ ] Implement a text input field for the route (URL) with basic validation using Zod.
• [ ] Add UI for key-value pairs for headers, integrated with form validation.
• [ ] Add UI for query parameters (key-value pairs).
• [ ] Implement a text area for the request body with JSON validation using Zod.
• [ ] Add basic validation and error messaging for incorrect input.

Acceptance Criteria ✅

• [ ] The request block UI is functional and allows for HTTP method selection, URL input, headers, query parameters, and request body configuration.
• [ ] Input validation is working with react-hook-form and Zod.
• [ ] The UI uses Shadcn components for the form and displays appropriate validation errors.

Additional Notes 🗒

• Resources:
  • Use Shadcn components documentation for dropdowns and inputs.
  • Refer to react-hook-form resolver documentation for integrating Zod validation.

[girl-loves-coding]

closed on #150