Nested resources with `TabbedForm` with `syncWithLocation` enabled

[mikhail-fedosenko]

Is your feature request related to a problem? Please describe. I'd like to use nested resources with <TabbedForm> and syncWithLocation enabled. This is not possible due to TabbedFormView using splat route:

{syncWithLocation ? (
    <Routes>
        <Route path="/*" element={renderTabHeaders()} />
    </Routes>
) : (
    renderTabHeaders()
)}

The scenario is as follows: I have an edit page for a resource. It renders a TabbedForm. On this edit page I'd like to navigate to a nested resource that is declared similar to this:

<Resource name="parent" edit={EditView}>
  <Route path=":id/child" element={<ChildView />} />
</Resource>

function EditView() {
  return (
    <Edit>
      <TabbedForm>
        <FormTab label="tab1" />
      </TabbedForm>
    </Edit>
}

Describe the solution you'd like I'd like to be able to use nested resources and TabbedForm on a source view. This will be possible if we add some kind of prefix before splat route:

{syncWithLocation ? (
    <Routes>
        <Route path="/tabs/*" element={renderTabHeaders()} />
    </Routes>
) : (
    renderTabHeaders()
)}

Describe alternatives you've considered Probably, as a workaround I can navigate to an intermediary view that does not have a splat route, so it doesn't catch the child view route:

navigate("/parent");
navigate("/parent/123/child");

Additional context

[slax57]

Hi, and thank you for your suggestion.

Unfortunately, I don't think this is technically doable in a backwards compatible way. Changing the splat route in TabbedForm would be a breaking change for all existing apps.

To me, the only option is to build your own TabbedForm to change the default route, in order to avoid this issue.

Besides, I don't know if this use-case is common enough so that we consider this change for v5. Let's wait for some feedback from the community to see if some people would be interested.

@fzaninotto @djhi feel free to share your thoughts as well :wink:

[mikhail-fedosenko]

I believe it's possible to implement in backwards compatible way: add an optional prop that will indicate a route "prefix", and if it's passed - then switch to a new route:

<Route path={routePrefix ? `/${routePrefix}/*` : '/*'} element={...} />

Though the props for TabbedForm may become a little bit complex, imo.

[slax57]

That's a good idea, but I agree the props for TabbedForm may start to become a little complex with this addition. Still, I don't know if this use case is common enough to justify this added complexity. Let's wait for feedback from the community.

[fzaninotto]

i agree with @slax57, this is not basic CRUD and the added complexity wouldn't be worth supporting that use case. I'm -1 for supporting this.