Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(core): ensure consistent casing in resource names for access control #6021

12 changes: 12 additions & 0 deletions .changeset/eleven-maps-glow.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
"@refinedev/chakra-ui": patch
"@refinedev/mantine": patch
"@refinedev/antd": patch
"@refinedev/mui": patch
---

fix: ensure Sider component handles various resource name formats correctly

Updated Sider component to correctly handle lowercase and camelcased resource names, enhancing usability and functionality.

Fixes #6004
9 changes: 9 additions & 0 deletions .changeset/ten-eyes-hunt.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
"@refinedev/ui-tests": patch
---

fix: update tests to handle lowercase and camelcased resource names correctly

This update ensures that resource names are correctly handled in both lowercase and camelcased formats, improving test coverage and accuracy.

Fixes #6004
4 changes: 2 additions & 2 deletions documentation/docs/advanced-tutorials/real-time.md
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,7 @@ export const CustomSider: typeof Sider = ({ render }) => {
return (
<CanAccess
key={route}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{ resource: item }}
>
Expand Down Expand Up @@ -514,7 +514,7 @@ export const CustomSider: typeof Sider = ({ render }) => {
return (
<CanAccess
key={key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{ resource: item }}
>
Expand Down
4 changes: 2 additions & 2 deletions examples/app-crm/src/components/layout/sider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export const Sider: React.FC = () => {
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{
resource: item,
Expand All @@ -90,7 +90,7 @@ export const Sider: React.FC = () => {
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{
resource: item,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const FixedSider: React.FC = () => {
return (
<CanAccess
key={route}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{ resource: item }}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const CustomSider: typeof Sider = ({ render }) => {
return (
<CanAccess
key={route}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{ resource: item }}
>
Expand Down
2 changes: 1 addition & 1 deletion examples/live-provider-ably/src/components/sider/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export const CustomSider: typeof Sider = ({ render }) => {
return (
<CanAccess
key={key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{ resource: item }}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export const Sider: typeof DefaultSider = ({ render }) => {
return (
<CanAccess
key={route}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{
resource: item,
Expand Down Expand Up @@ -156,7 +156,7 @@ export const Sider: typeof DefaultSider = ({ render }) => {
return (
<CanAccess
key={route}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{ resource: item }}
>
Expand Down
4 changes: 2 additions & 2 deletions packages/antd/src/components/layout/sider/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{
resource: item,
Expand All @@ -99,7 +99,7 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{
resource: item,
Expand Down
4 changes: 2 additions & 2 deletions packages/antd/src/components/themedLayout/sider/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{
resource: item,
Expand All @@ -106,7 +106,7 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{
resource: item,
Expand Down
4 changes: 2 additions & 2 deletions packages/antd/src/components/themedLayoutV2/sider/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{
resource: item,
Expand Down Expand Up @@ -113,7 +113,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{
resource: item,
Expand Down
2 changes: 1 addition & 1 deletion packages/chakra-ui/src/components/layout/sider/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{
resource: item,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{
resource: item,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{
resource: item,
Expand Down
2 changes: 1 addition & 1 deletion packages/mantine/src/components/layout/sider/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{
resource: item,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{
resource: item,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{
resource: item,
Expand Down
4 changes: 2 additions & 2 deletions packages/mui/src/components/layout/sider/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{
resource: item,
Expand Down Expand Up @@ -182,7 +182,7 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{ resource: item }}
>
Expand Down
4 changes: 2 additions & 2 deletions packages/mui/src/components/themedLayout/sider/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{
resource: item,
Expand Down Expand Up @@ -193,7 +193,7 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{ resource: item }}
>
Expand Down
4 changes: 2 additions & 2 deletions packages/mui/src/components/themedLayoutV2/sider/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{
resource: item,
Expand Down Expand Up @@ -195,7 +195,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
resource={name}
action="list"
params={{ resource: item }}
>
Expand Down
68 changes: 68 additions & 0 deletions packages/ui-tests/src/tests/layout/sider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -235,5 +235,73 @@ export const layoutSiderTests = (
return expect(postLink).toHaveStyle("pointer-events: none");
});
});

it("should handle lowercase resource names correctly", async () => {
const { getByText, getAllByText } = render(<SiderElement />, {
wrapper: TestWrapper({
resources: [
{
name: "posts",
list: "/posts",
},
{
name: "users",
list: "/users",
},
],
accessControlProvider: {
can: ({ action, resource }) => {
if (action === "list" && resource === "posts") {
return Promise.resolve({ can: true });
}
if (action === "list" && resource === "users") {
return Promise.resolve({ can: false });
}
return Promise.resolve({ can: false });
},
},
}),
});

const postsElements = await waitFor(() => getAllByText("Posts"));
postsElements.forEach((element) => {
expect(element).toBeInTheDocument();
});
expect(() => getByText("Users")).toThrow();
});

it("should handle camelcased resource names correctly", async () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tests looks great and nice to see you've implemented them in ui-tests 🤝

const { getByText, getAllByText } = render(<SiderElement />, {
wrapper: TestWrapper({
resources: [
{
name: "blogPosts",
list: "/blog-posts",
},
{
name: "userProfiles",
list: "/user-profiles",
},
],
accessControlProvider: {
can: ({ action, resource }) => {
if (action === "list" && resource === "blogPosts") {
return Promise.resolve({ can: true });
}
if (action === "list" && resource === "userProfiles") {
return Promise.resolve({ can: false });
}
return Promise.resolve({ can: false });
},
},
}),
});

const blogPostsElements = await waitFor(() => getAllByText("Blog posts"));
blogPostsElements.forEach((element) => {
expect(element).toBeInTheDocument();
});
expect(() => getByText("User profiles")).toThrow();
});
});
};
Loading