plain-purple
plain-purple15mo ago

My layout resource name is not displayed after upgrading to refine v4.

I have upgraded my refine project to v4 and followed the migration guide but after upgrading My menu name in sider is not displayed except the parent name and logout.
No description
21 Replies
kapa.ai
kapa.ai15mo ago
Hey @dipbazz! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave: ---------------------- It looks like you may have missed the step in the Migration Guide (https://refine.dev/docs/migration-guide) to update the label property of your resources in the <Refine> component. The label property is used to display the name of the resource in the menu. By default, the plural form of the resource name is shown. If you want to customize the name, you can set the label property to the desired name. For example, if your resource name is post, you can set the label property to Posts to display Posts in the menu.
import { Refine } from "@pankod/refine-core";
import {
notificationProvider,
Layout,
ErrorComponent,
} from "@pankod/refine-antd";
import dataProvider from "@pankod/refine-simple-rest";
import routerProvider from "@pankod/refine-react-router";

import "@pankod/refine-antd/dist/reset.css";

import { PostList, PostCreate, PostEdit, PostShow } from "pages/posts";

const API_URL = "https://api.fake-rest.refine.dev";

const App: React.FC = () => {
return (
<Refine
authProvider={authProvider}
dataProvider={dataProvider(API_URL)}
routerProvider={routerProvider}
resources={[
{
name: "posts",
list: PostList,
create: PostCreate,
edit: PostEdit,
show: PostShow,
label: "Posts" // <-- Add this line
},
]}
notificationProvider={notificationProvider}
Layout={Layout}
catchAll={<ErrorComponent />}
/>
);
};
import { Refine } from "@pankod/refine-core";
import {
notificationProvider,
Layout,
ErrorComponent,
} from "@pankod/refine-antd";
import dataProvider from "@pankod/refine-simple-rest";
import routerProvider from "@pankod/refine-react-router";

import "@pankod/refine-antd/dist/reset.css";

import { PostList, PostCreate, PostEdit, PostShow } from "pages/posts";

const API_URL = "https://api.fake-rest.refine.dev";

const App: React.FC = () => {
return (
<Refine
authProvider={authProvider}
dataProvider={dataProvider(API_URL)}
routerProvider={routerProvider}
resources={[
{
name: "posts",
list: PostList,
create: PostCreate,
edit: PostEdit,
show: PostShow,
label: "Posts" // <-- Add this line
},
]}
notificationProvider={notificationProvider}
Layout={Layout}
catchAll={<ErrorComponent />}
/>
);
};
For more information, please refer to the <Refine> docs (https://refine.dev/docs/api-reference/core/components/refine-config). ----------------------
kapa.ai
kapa.ai15mo ago
<@494653850632978472> kapa.ai is still learning and improving, please let us how it did by reacting below
rare-sapphire
rare-sapphire15mo ago
Hello @dipbazz , could you send us your App.tsx
plain-purple
plain-purple15mo ago
plain-purple
plain-purple15mo ago
Here is my App.tsx file.
plain-purple
plain-purple15mo ago
Hey @batuhanw, I guess this error is because of my sider component. Can you explain how can I render my sider component. Here is my sider component.
Omer
Omer15mo ago
There's a topic we forgot to mention in the Migration Guide. You should only use useRouterContext() in legacy routers. For new router users, the useLink() hook can be used instead. Therefore, in your 'Sider' component, use useLink instead of useRouterContext: Sider.tsx
import { useLink } from "@refinedev/core";

const Link = useLink();
import { useLink } from "@refinedev/core";

const Link = useLink();
We will send a patch regarding the use of 'label' in Sider. We will keep you informed 🥁
plain-purple
plain-purple15mo ago
After using useLink I get an error as
ERROR in src/components/layout/sider/index.tsx:93:19
TS2322: Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.
<Link to={route}>{label}</Link> ^^
{!collapsed && isSelected && (
<div className="ant-menu-tree-arrow" />
)}
ERROR in src/components/layout/sider/index.tsx:93:19
TS2322: Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.
<Link to={route}>{label}</Link> ^^
{!collapsed && isSelected && (
<div className="ant-menu-tree-arrow" />
)}
rare-sapphire
rare-sapphire15mo ago
I guess route can be undefined, which Link component doesn't like, can you add fallback?
<Link to={route ?? "/"}>{label}</Link>
<Link to={route ?? "/"}>{label}</Link>
Let me know if that fixes your issue We'll check if something is missing
plain-purple
plain-purple15mo ago
Yeah adding a fallback did work.
Omer
Omer15mo ago
Wow cool Have all the issues been resolved?
plain-purple
plain-purple15mo ago
Not yet 😬
rare-sapphire
rare-sapphire15mo ago
👀
plain-purple
plain-purple15mo ago
Now I am facing the issue with my Authorization. I have used cerbos for my authorization and it is working fine with my sider menu. But after upgrading to v4 it now only works for the sider menu and controls the route based on authorization. But whenever I go the page using the url in brower which the user don't have access to it, it is not restricted. Should I use the CanAccess component and wrap the whole route same as Authenticated?
Omer
Omer15mo ago
We missed something, yes you are right, you need to wrap it with the CanAccess component. We will update our documentation accordingly. Thank you for reporting it 💯
extended-salmon
extended-salmon15mo ago
I have the same error with casbin.js
rare-sapphire
rare-sapphire15mo ago
extended-salmon
extended-salmon15mo ago
When I enter in the url line the pages to which access should be closed, they are loaded, but they are not in sider, how should I configure it with casbin?
rare-sapphire
rare-sapphire15mo ago
Hello @RomaY did you try to wrap related pages with <CanAccess> component? https://refine.dev/docs/api-reference/core/providers/accessControl-provider/#canaccess-
Access Control Provider | refine
Access control is a broad topic where there are lots of advanced solutions that provide different set of features. refine is deliberately agnostic for its own API to be able to integrate different methods (RBAC, ABAC, ACL, etc.) and different libraries (Casbin, CASL, Cerbos, AccessControl.js). can method would be the entry point for those soluti...
extended-salmon
extended-salmon15mo ago
Oh yes it works, I just wrapped my element in a router, not in the component itself, or is that a bad idea?
rare-sapphire
rare-sapphire15mo ago
Do you mean, Element prop of the router? If that's so, I think that's a matter of taste. I personally would do like you, so I can see authorized resources in a single page