Async nextStep function in Wizard

[logancameo]

Hi!

We've got a multi-step form in which we'd like to asynchronously select the next step to transition to.

As of now, the Wizard nextStep property can be assigned a function (state: { values: FormValues }) => string, but we'd like to return a Promise<string>. [docs]

We have a working proof of concept as selectNext returns the result of the function, and we can await our Promise there, but this breaks types and I'm not sure if this is actually officially supported. [source]

Any ideas would be welcome! Happy to submit a PR to update the NextStep type as well.

[rvsia]

Hello,

I think it would be cool to update it so nextStep could be an async function.

But this requires an additional work as there has to be some better UX to enable it. For example, when users click on the next button and during the async function execution, a loading spinner should be shown. In PF4 mapper we also use selectNext to generate the navigation menu, so there has to be also some indicator - and this feature is currently included in the common Wizard reducer.

As a quick workaround, we could just enable promise in the type definition to unblock you (cc @Hyperkid123) - and you could handle the custom loading behavior in a custom buttons component. Or if you need it quickly, you can implement it in your buttons component, totally ignoring the nextStep function and using a different function. Check example, this feature is supported by all of our mappers.

[logancameo]

Hey,

Thanks for the response! Enabling it in the types would be fantastic - we're using a custom mapper already, and everything we've got implemented is working, just the types are complaining.

Really appreciate the other advice as well.

[rvsia]

In that case - is it possible to just retype the function you use?(as … )? 🤔

[logancameo]

Yeah, we've got it typed as any right now since none of the other NextStep types overlap enough. My only concern is that selectNexts implementation will change for whatever reason to stop returning the result of nextStep and we'll lose the reference to our Promise.

To be honest, I'd defer to you on if the types for ddf can be quickly adjusted to support this - from what I can tell NextStep and selectNext types would need to be changed, but as you mentioned, those are relied on elsewhere. If there isn't a quick clear path to the type changes, it might be best to just implement our own asyncSelectNext function?

[rvsia]

I think we should be fine with just updating the type to accept Promise<string>, the wizard will be still working fine and it makes sense to do so, as it is relies on the buttons implementation anyway (and navSchema is being used only by PF4 now.) Could you please prepare a PR? 🙏 It’s late here, so I can take a look on it tomorrow.

[logancameo]

Sure thing! PR up #1278 - happy to adjust as needed