Why Aren't Pre-configuredProps Registered in Component Form's Internal State Using Connect-React SDK?

Help
1

This topic was automatically generated from Slack. You can find the original thread here.

Need help with connect-react.

We are using the connect-react sdk to display Component Forms for different actions/triggers. Implementation is similar to the One SDK, thousands of API integrations. We store the configuredProps in db in the backend. When we pass the pre-configuredProps back again to the Component Form the values are visible in the form but they aren’t registered in the form’s internal state. Is this a known issue? And is there a workaround for this?

Please refer the screenshot. I’m happy to share sample code if needed.

Other details -
Pipedream workspace - canvasai
Frontend framework - nextjs

image.png
image.png2224×1360 203 KB

1 Like
Why Aren't Pre-configuredProps Registered in Connect-React SDK's Component Form's Internal State?
2

Hey , could you share the code?

3
4

Sometimes the dropdowns are not disabled however, the dropdown options are still not loaded.

I’ve gone through the code of the connect-react library and this is expected because the options fetch is only enabled when internal configuredProps change and not when the props are set on initial mount.

5

, could you share minimal steps (or code) to reproduce if possible?

On your code, it is not immediately visible for me to pinpoint the exact part you’re mentioning

6

You can follow these steps after running the sample app I’ve shared:
• Select action from the component type dropdown
• Search for Google Sheets in the apps dropdown
• Select Google Sheets from the results
• Few actions from Google Sheets will be rendered below.
• Select any one, lets say Update Multiple Rows
• Its Component Form will be rendered underneath.
• Connect your account and fill the form.
• Now select another app from the app dropdown, lets say Slack.
• Select an action - Send Message.
• Its form will be rendered below - connect your slack account and fill the form.
• Now go to the Update Multiple Rows form, you can either follow the same steps to go to it or click on View/Edit in the last section which shows the forms you have filled.
• Now you will notice:
◦ Either the spreadsheetId and worksheetId dropdowns are disabled
◦ Or if they are not then when you click on them no options are available to select in the dropdown.
Note: I’m maintaining the configuredProps in react state against the componentKey. This is to simulate loading the configuredProps from db.

7

Let me know if this helps, else I can share a screen recording.

8

Hey , thank you for the information, I think I understand what you mean.

Maybe this needs the Pipedream internal team to check, since the is the internal behavior.

If you can, could you parse the specific code pieces here to save time for Pipedream internal team to triag?

9

Sure

10

Hi . I have compiled all the issues here - [BUG] Issues with pre-configured props in form state management · Issue #18778 · PipedreamHQ/pipedream · GitHub

I have also fixed them and raised a PR here - fix(connect-react): Fix pre-configured props handling issues by rnijhara · Pull Request #18782 · PipedreamHQ/pipedream · GitHub

It would be a great help if this could be reviewed and merged soon.

11

Thank you ! We’ll take a look

12

Hi @Danny Roosevelt (Pipedream) , :wave:

Just wanted to check in on this PR. I understand you’re tracking this internally and appreciate you triaging it quickly.

We’ve been using these fixes in production via the fork and they’ve been working well. Happy to make any changes or provide additional context if needed to help move this forward.

Is there anything blocking the review, or any way I can help get this merged?

Thanks!