fix(core): ensure consistent casing in resource names for access cont…

…rol (#6021)
refinedev · Jun 20, 2024 · 55cd066 · 55cd066
1 parent 658891c
commit 55cd066
Show file tree

Hide file tree

Showing 21 changed files with 116 additions and 27 deletions.
diff --git a/.changeset/eleven-maps-glow.md b/.changeset/eleven-maps-glow.md
@@ -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
diff --git a/.changeset/ten-eyes-hunt.md b/.changeset/ten-eyes-hunt.md
@@ -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
diff --git a/documentation/docs/advanced-tutorials/real-time.md b/documentation/docs/advanced-tutorials/real-time.md
@@ -285,7 +285,7 @@ export const CustomSider: typeof Sider = ({ render }) => {
       return (
         <CanAccess
           key={route}
-          resource={name.toLowerCase()}
+          resource={name}
           action="list"
           params={{ resource: item }}
         >
@@ -514,7 +514,7 @@ export const CustomSider: typeof Sider = ({ render }) => {
       return (
         <CanAccess
           key={key}
-          resource={name.toLowerCase()}
+          resource={name}
           action="list"
           params={{ resource: item }}
         >

diff --git a/examples/app-crm/src/components/layout/sider.tsx b/examples/app-crm/src/components/layout/sider.tsx
@@ -64,7 +64,7 @@ export const Sider: React.FC = () => {
         return (
           <CanAccess
             key={item.key}
-            resource={name.toLowerCase()}
+            resource={name}
             action="list"
             params={{
               resource: item,
@@ -90,7 +90,7 @@ export const Sider: React.FC = () => {
       return (
         <CanAccess
           key={item.key}
-          resource={name.toLowerCase()}
+          resource={name}
           action="list"
           params={{
             resource: item,

diff --git a/examples/customization-offlayout-area/src/components/sider/index.tsx b/examples/customization-offlayout-area/src/components/sider/index.tsx
@@ -49,7 +49,7 @@ export const FixedSider: React.FC = () => {
       return (
         <CanAccess
           key={route}
-          resource={name.toLowerCase()}
+          resource={name}
           action="list"
           params={{ resource: item }}
         >

diff --git a/examples/customization-sider/src/components/sider/index.tsx b/examples/customization-sider/src/components/sider/index.tsx
@@ -67,7 +67,7 @@ export const CustomSider: typeof Sider = ({ render }) => {
       return (
         <CanAccess
           key={route}
-          resource={name.toLowerCase()}
+          resource={name}
           action="list"
           params={{ resource: item }}
         >

diff --git a/examples/live-provider-ably/src/components/sider/index.tsx b/examples/live-provider-ably/src/components/sider/index.tsx
@@ -76,7 +76,7 @@ export const CustomSider: typeof Sider = ({ render }) => {
       return (
         <CanAccess
           key={key}
-          resource={name.toLowerCase()}
+          resource={name}
           action="list"
           params={{ resource: item }}
         >

diff --git a/examples/mern-dashboard-client/src/components/layout/sider/index.tsx b/examples/mern-dashboard-client/src/components/layout/sider/index.tsx
@@ -86,7 +86,7 @@ export const Sider: typeof DefaultSider = ({ render }) => {
         return (
           <CanAccess
             key={route}
-            resource={name.toLowerCase()}
+            resource={name}
             action="list"
             params={{
               resource: item,
@@ -156,7 +156,7 @@ export const Sider: typeof DefaultSider = ({ render }) => {
       return (
         <CanAccess
           key={route}
-          resource={name.toLowerCase()}
+          resource={name}
           action="list"
           params={{ resource: item }}
         >

diff --git a/packages/antd/src/components/layout/sider/index.tsx b/packages/antd/src/components/layout/sider/index.tsx
@@ -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,
@@ -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,

diff --git a/packages/antd/src/components/themedLayout/sider/index.tsx b/packages/antd/src/components/themedLayout/sider/index.tsx
@@ -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,
@@ -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,

diff --git a/packages/antd/src/components/themedLayoutV2/sider/index.tsx b/packages/antd/src/components/themedLayoutV2/sider/index.tsx
@@ -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,
@@ -122,7 +122,7 @@ export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
       return (
         <CanAccess
           key={item.key}
-          resource={name.toLowerCase()}
+          resource={name}
           action="list"
           params={{
             resource: item,

diff --git a/packages/chakra-ui/src/components/layout/sider/index.tsx b/packages/chakra-ui/src/components/layout/sider/index.tsx
@@ -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,

diff --git a/packages/chakra-ui/src/components/themedLayout/sider/index.tsx b/packages/chakra-ui/src/components/themedLayout/sider/index.tsx
@@ -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,

diff --git a/packages/chakra-ui/src/components/themedLayoutV2/sider/index.tsx b/packages/chakra-ui/src/components/themedLayoutV2/sider/index.tsx
@@ -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,

diff --git a/packages/mantine/src/components/layout/sider/index.tsx b/packages/mantine/src/components/layout/sider/index.tsx
@@ -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,

diff --git a/packages/mantine/src/components/themedLayout/sider/index.tsx b/packages/mantine/src/components/themedLayout/sider/index.tsx
@@ -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,

diff --git a/packages/mantine/src/components/themedLayoutV2/sider/index.tsx b/packages/mantine/src/components/themedLayoutV2/sider/index.tsx
@@ -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,

diff --git a/packages/mui/src/components/layout/sider/index.tsx b/packages/mui/src/components/layout/sider/index.tsx
@@ -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,
@@ -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 }}
         >

diff --git a/packages/mui/src/components/themedLayout/sider/index.tsx b/packages/mui/src/components/themedLayout/sider/index.tsx
@@ -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,
@@ -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 }}
         >

diff --git a/packages/mui/src/components/themedLayoutV2/sider/index.tsx b/packages/mui/src/components/themedLayoutV2/sider/index.tsx
@@ -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,
@@ -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 }}
         >

diff --git a/packages/ui-tests/src/tests/layout/sider.tsx b/packages/ui-tests/src/tests/layout/sider.tsx
@@ -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 () => {
+      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();
+    });
   });
 };