Okay makes sense. Looking into it. Hopefully gadget will have a way to handle this. They have some magic with their web routes that only renders them inside of the app context in the shopify admin.
@airhorns hey do you know the best way to get a gadget route to serve a react frontend with app bridge in there in order to implement this custom configuration UI for a flow action?
We’re getting a little farther. I think now I just need them to make a relatively simple tweak to allow me to load an arbitrary jsx route within their routing logic.
If you take a look at the TitleBar component in the @shopify/app-bridge-react package, you’ll notice that TitleBar doesn’t have props besides “title” and “children”. You need to pass those buttons as child components: TitleBar Component
I would like to point out that our frontends aren’t a black box. The way we built the feature yes, but not the files that are hosted. You have full control over the code and it should will work like any other application built in React/Remix/etc (whatever Vite supports)
From the issue you shared above (unexpected attribute) and the titleBar docs, the issue is definitely that you’re not using the component correctly. I’ve looked at your code in the app and see that you’re passing the props primaryAction and secondaryAction. These are not accepted props on the TitleBar component from @shopify/app-bridge-react
@DevAOC the reason I’m trying to get you to work a little more closely with the flow team here is that all I’m doing is following their docs. If something is broken it’s either in their docs or on the gadget side. I think it would be useful to for gadget to have a simpler path to getting one of these custom flow config UIs up and running, just like you have for other pieces of shopify functionality.
@curzey thanks for looking into this. I went ahead and made my repo public which I was planning to do once it was all working:
I just copied and pasted in that code from the flow docs - should be pulling TitleBar from the app bridge package.
There’s nothing broken on the Gadget side. The error is outdated Shopify docs. I think you should focus less on the example in their docs and more on the package docs that you’re using