foreign-sapphire•13mo ago

i want to create a custom page and i want all the permission from its parent

const leads = { name: "leads", list: List, create: Create, edit: Edit, show: Show, archive: Archive, meta: { icon: <Filter9PlusIcon />, }, }; i have added a archive page ,same as list page ,but permission like create,edit stufs not working in archive page . route is leads/archieve.

16 Replies

kapa.ai•13mo ago

Hi @MarcoNix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it seems like you're trying to add a custom page (Archive) to your leads resource and want it to inherit permissions from its parent resource. However, the extracts do not provide specific information on how to inherit permissions from a parent resource to a custom page in refine. The extracts mention the use of the useCan hook for role-based operations, but it doesn't provide details on how to apply this to your specific scenario. Here's an example of how the useCan hook is used in a list page:

const { data: canAccess } = useCan({  
 resource: "posts",  
 action: "field",  
 params: { field: "hit" },  
});

const { data: canAccess } = useCan({  
 resource: "posts",  
 action: "field",  
 params: { field: "hit" },  
});

(Source: refine blog (https://refine.dev/blog/refine-react-ant-design-admin-panel-framework/#add-access-control-to-your-project-with-refine)) You might need to use a similar approach to check permissions in your Archive page. However, without more specific information or examples related to your scenario, it's hard to provide a definitive solution. I would recommend checking the refine documentation (https://refine.dev/docs) or seeking help from the refine community for more specific guidance on your issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

foreign-sapphireOP•13mo ago

@kapa.ai const leads = { name: "leads", list: List, create: Create, edit: Edit, show: Show, archive: Archive, meta: { icon: <Filter9PlusIcon />, }, }; in this page as archive is a part of leads ,its actualy a list page like list component ,but the permission like edit create is not working in archive page ,and also useresource hook give undefiend for resource

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the information provided in the extracts, it seems like you're trying to add a custom page (Archive) to your leads resource and want it to inherit permissions from its parent resource. However, the extracts do not provide specific information on how to inherit permissions from a parent resource to a custom page in refine. The extracts mention the use of the useCan hook for role-based operations, but it doesn't provide details on how to apply this to your specific scenario. Here's an example of how the useCan hook is used in a list page:

const { data: canAccess } = useCan({  
 resource: "posts",  
 action: "field",  
 params: { field: "hit" },  
});

const { data: canAccess } = useCan({  
 resource: "posts",  
 action: "field",  
 params: { field: "hit" },  
});

kapa.ai•13mo ago

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

foreign-sapphireOP•13mo ago

@how to create a custom route and page in same resource @kapa.ai how to create a custom route and page in same resource

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Creating a custom route and page within the same resource in refine involves defining the custom route in your resource configuration and creating a custom component for the page. Here's a general guide on how to do this: 1. Define your resource with the custom route:

const leads = {
  name: "leads",
  list: List,
  create: Create,
  edit: Edit,
  show: Show,
  archive: {
    component: Archive,
    path: "/leads/archive",
  },
  meta: {
    icon: <Filter9PlusIcon />,
  },
};

const leads = {
  name: "leads",
  list: List,
  create: Create,
  edit: Edit,
  show: Show,
  archive: {
    component: Archive,
    path: "/leads/archive",
  },
  meta: {
    icon: <Filter9PlusIcon />,
  },
};

In this example, Archive is the custom component for your custom page, and /leads/archive is the custom route. 2. Create your custom component (Archive):

const Archive: React.FC = () => {
  // Your custom component logic here
  return <div>Archive Page</div>;
};

const Archive: React.FC = () => {
  // Your custom component logic here
  return <div>Archive Page</div>;
};

This is a simple example of a custom component. You can replace the logic inside the Archive component with your own. 3. Include your resource in the resources prop of the Refine component:

<Refine
  dataProvider={dataProvider}
  resources={[leads]}
>
  {/* Your other components */}
</Refine>

<Refine
  dataProvider={dataProvider}
  resources={[leads]}
>
  {/* Your other components */}
</Refine>

In this example, dataProvider is your data provider, and leads is the resource configuration that includes your custom route and page. Remember, your action definitions in the resources can contain additional parameters and nested routes. Passing these parameters when navigating to the pages are handled by the current available parameters and the meta props of the related hooks and components (source (https://discord.com/channels/837692625737613362/1125437830701776967)). For more detailed information on how to create and manage custom pages in refine, you can refer to the Custom Pages documentation (https://refine.dev/docs/examples/customPages/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

foreign-sapphireOP•13mo ago

@kapa.ai i have routes like this <Route path="posts"> <Route index element={<PostList />} /> <Route path="create" element={<PostCreate />} /> <Route path="edit/:id" element={<PostEdit />} /> <Route path="show/:id" element={<PostShow />} /> </Route> <Route path="post-review" element={<PostReview />} /> </Route> but the post preview dont have permission of posts

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the information provided in the extracts, it seems like you're trying to add permissions to the PostReview route, which is a custom route separate from the posts resource. In refine, permissions are typically managed using the accessControlProvider and the CanAccess component. However, the extracts do not provide specific information on how to apply permissions to a custom route that is separate from a resource. Here's an example of how the CanAccess component is used:

<CanAccess  
 resource="posts"  
 action="edit"  
 params={{ id: 1 }}  
 fallback={<CustomFallback />}  
>  
 <YourComponent />  
</CanAccess>

<CanAccess  
 resource="posts"  
 action="edit"  
 params={{ id: 1 }}  
 fallback={<CustomFallback />}  
>  
 <YourComponent />  
</CanAccess>

(Source: refine blog (https://refine.dev/blog/react-admin-vs-refine/#access-control)) You might need to use a similar approach to check permissions in your PostReview component. However, without more specific information or examples related to your scenario, it's hard to provide a definitive solution. I would recommend checking the refine documentation (https://refine.dev/docs) or seeking help from the refine community for more specific guidance on your issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

foreign-sapphireOP•13mo ago

@kapa.ai when i console log useResource hook resource its getting undefiend, i have a archieve page similar to list page i want all the permission from post page to work on archive page

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The useResource hook is used to get the current resource information. If you're getting undefined when using this hook, it might be because the component where you're using the hook is not within a resource route. In your case, you have an archive page that you want to have the same permissions as the posts resource. If your archive page is not defined as a part of the posts resource, useResource might not be able to get the resource information. Here's how you can define your archive page as part of the posts resource:

const posts = {
  name: "posts",
  list: List,
  create: Create,
  edit: Edit,
  show: Show,
  archive: Archive, // Your Archive page
  meta: {
    icon: <Filter9PlusIcon />,
  },
};

const posts = {
  name: "posts",
  list: List,
  create: Create,
  edit: Edit,
  show: Show,
  archive: Archive, // Your Archive page
  meta: {
    icon: <Filter9PlusIcon />,
  },
};

Then, in your Refine component, include posts in the resources prop:

<Refine
  dataProvider={dataProvider}
  resources={[posts]}
>
  {/* Your other components */}
</Refine>

<Refine
  dataProvider={dataProvider}
  resources={[posts]}
>
  {/* Your other components */}
</Refine>

This way, when you use the useResource hook in your Archive component, it should be able to get the posts resource information. If you still encounter issues, I recommend checking the refine documentation (https://refine.dev/docs) or seeking help from the refine community. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

foreign-sapphireOP•13mo ago

@kapa.ai in the archive page the route is /leads/archive but useResource hook return undefiend

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: @MarcoNix That's a great question, but unfortunately I am only capable of responding to a maximum of five questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!