optimistic-gold•2y 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.

21 Replies

kapa.ai•2y 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•2y ago

<@494653850632978472> kapa.ai is still learning and improving, please let us how it did by reacting below

harsh-harlequin•2y ago

Hello @dipbazz , could you send us your App.tsx

optimistic-goldOP•2y ago

App.tsx

optimistic-goldOP•2y ago

Here is my App.tsx file.

optimistic-goldOP•2y 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.

index.tsx

Omer•2y 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 🥁

optimistic-goldOP•2y 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" /> 
)}

harsh-harlequin•2y 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

optimistic-goldOP•2y ago

Yeah adding a fallback did work.

Omer•2y ago

Wow cool Have all the issues been resolved?

optimistic-goldOP•2y ago

Not yet 😬

harsh-harlequin•2y ago

👀

optimistic-goldOP•2y 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•2y 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 💯

rival-black•2y ago

I have the same error with casbin.js

harsh-harlequin•2y ago

Hello @RomaY , please see the updated documentation here https://refine.dev/docs/migration-guide/router-provider/#behavioral-changes-in-routing

Migrating Router Provider from 3.x.x to 4.x.x | refine

Motivation behind the changes

rival-black•2y 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?

harsh-harlequin•2y 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...

rival-black•2y ago

Oh yes it works, I just wrapped my element in a router, not in the component itself, or is that a bad idea?

harsh-harlequin•2y 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