feat: Tailcall Config Generator Form

[mehulmathur001]

@tusharmath, Me and @Bhavyajain21 have collaborated on this issue and would love your feedback on the form. Your input is essential for refining the layout and improving the user experience. Please review the changes and share your thoughts. Your feedback will help us ensure the best possible outcome.

/claim #373

[hunxjunedo]

great work there @mehulmathur001 @Bhavyajain21, I had been working on this and was able to make the form very similar to yours using the same npm package, however I couldn't raise a PR as I had a few more things to do after setting up rjfs, which I see missing here as well:

• options have a pretty bad UI by default, they show up as Option 1 and Option 2 which confuses the visitor, rather they should be like setup cache config. / leave cache config or stdout / otlp etc.
• the current version doesn't export to GraphQL format as required.
• glad that you guys noticed that long descriptions are making mess, however the code is commented out idk why
• ajv is being used as a validator, which as far as I remember doesn't support formats like int64 uin32 etc.
• the theme looks a bit off compared to the theme of the website, colors and margins need to be adjusted.
• the form isn't properly integrated with the playground, it doesn't even appear unless the visitor scrolls down, this can be improved.
• the UI for mobile has to be fine-tuned, it doesn't look alright as required (the info icon is added by me for testing):
  
  

it would be great if we could collaborate on this, and work towards a common goal, will be great experience working together.

[mehulmathur16]

@hunxjunedo We have just raised a base PR currently and for moving forward we will require inputs from @tusharmath.

Regarding the points you mentioned above, we also have tried out a few things like using tooltips by modifying templates. But after doing that we observed there's an inconsistency between the fields rendered, as rjsf treats each and every type of field differently. Hence removed tooltips part. Also, if we try to make it consistent by overriding everything then we'll be losing rjsf native form styles which look pretty decent to us.

This is just a base PR and we're aware of the points you've raised. We wanted to raise a PR on the work we have done till now for progress. We have experimented a lot of things on this for making it better and we're still trying to figure out how can this be made more better, so don't take this up as the final UI 😄

[tusharmath]

Moving to draft to reduce noise and improve CI efficiency. Once you are ready just mark it as "ready to review". Feel free to give a shoutout on the #contributors channel on Discord if you want immediate attention.

[mehulmathur16]

@tusharmath Thanks for the review. We'll make the above changes.

[tusharmath]

I have been looking at this project — https://www.youtube.com/watch?v=qV8Cho93oxU

Check it out and see if we can leverage it in someway. The UI looks good.

[mehulmathur16]

Sure @tusharmath

[Bhavyajain21]

Screen.Recording.2024-08-02.at.11.46.51.PM.mov

[Bhavyajain21]

@tusharmath, we have updated the form with the collapsible fields. Please have a look.

[tusharmath]

Closing this PR for now. The UX needs a lot of work. Moving to draft. I will be posting the designs for this page via figma in a few days.

[tusharmath]

/tip $100

For the attempt!

[algora-pbc]

🎉🎈 @mehulmathur001 has been awarded $100! 🎈🎊

• Share on socials
• Give feedback