[FEAT] Unable to highlight non-CRUD page on menu item
Opened this issue · 4 comments
Is your feature request related to a problem? Please describe.
Hi, I'm having a confusing time on how to highlight non-CURD pages to the left menu items and display the breadcrumb navigation properly?
I now have a usage scenario: there is an order placing function in the member module that is not part of the member's CURD, and this order placing function only requires a create page.
Currently my needs are that I want to highlight this page to the Member menu in the left menu item, and I want that new page to be consistent with the breadcrumb navigation like the one that creates the member, and since I need the member's ID, maybe I should just need an edit page?
Is it now possible to fix the issue in the resources config item? I asked Refine Docs AI and didn't find a solution, if there is a solution please let me know, my code is similar to this:
const resources = [
{
name: 'vip',
list: '/vip',
create: '/vip/create',
edit: '/vip/edit/:id',
meta: {
label: 'Member',
icon: <CrownOutlined />,
},
},
{
name: 'vipOrder',
list: '/vip',
edit: '/vip/order/:id',
meta: {
parent: 'vip',
hide: true,
},
}
]
Thanks, team
Describe alternatives you've considered
No response
Additional context
No response
Describe the thing to improve
Ability to implement non-CURD page highlighting in resources configuration, and to do so in a way that is consistent with the breadcrumb navigation of Create, Edit pages.
Hey @linkscope, thank you for opening an issue here! I think I understand the issue but would love to have some details on what you want this feature to look like.
As a workaround, I think you can define your secondary resource like below:
{
name: "vip",
identifier: "vipOrder", // So same resource name is inferred by the data provider
list: "/vip/order/:id", // To have it listed in the sider menu (I'll explain more on this below)
meta: { parent: "vip" },
}
This will make this page available in the menu, but :id
is required for your page and it will navigate you to a wrong page unfortunately.
We have hideOnMissingParameter
in useMenu
hook that powers the sider components but looks like we've missed this option to be configurable through props of <ThemedSiderV2 />
components.
If you swizzle the <ThemedSiderV2 />
component and set hideOnMissingParameter
to true
, it will be only visible when there's an :id
value present in the routes or meta
.
Let me list what we can do and maybe we can plan this for our next releases:
hideOnMissingParameter
should be configurable through props or Refine options but still, the default value should betrue
anyways, I think we can have this default value issue fixed in the next release- Even if there's no
list
value of a resource, it should still highlight the parents in the sider if it's the active route. - We're discussing on having the ability to define custom actions for a resource and make it work with menus, breadcrumbs etc. but this is not finalized yet so I cannot give an exact time or how it will work on this one.
For now, about the swizzle
workaround, you can swizzle the sider component and use it in your layout, then you can define a custom logic for your highlighted menu items. Or you can use the hideOnMissingParameter
prop like I've mentioned above.
Let us know if the features/fixes I've listed above works for you 🚀
@aliemir Thanks for the detailed answer! I'll try to so if the change fixes the issue, in the same time I also hope that this swizzle
can be reflected in the documentation, I'm sure most admin have many non-CURD pages.
Also I'd like to be able to do this simply by configuring it entirely in resources
, e.g. just like this:
const resources = [
{
name: 'member',
list: '/member',
edit: '/member/edit/:id',
create: '/member/create',
recharge: '/member/recharge/:id' // non-CURD page
}
]
@linkscope, I just want to have your opinion and feedback on this; what do you expect by defining a custom route in your resource definitions (in this case recharge
)? Having it work with menus, breadcrumbs and navigation hooks/buttons maybe? Do you have any other features in mind to work with this?
@aliemir Thanks for your patience in listening! I would expect custom routes (in this case recharge
) to work with menus, breadcrumbs and navigation hooks, of course since it's a custom route the default headerButtons
can be eliminated, and it would be nice if the useDocumentTitle
doesn't need to be set separately, as I did in the previous question, this flow is fully consistent with CURD pages. I hope that the resources
configuration should not be limited to CURD, but can be more rich to configure the custom page, this experience is a bit similar to the vue
of the vue-router
operation process, for example, in this case I only need to add a line of code to achieve the functionality I expect, and at the same time, in the configuration This painless development process is great, and I hope the team will consider doing this if they can, and thanks for the work!