From 67880a7a273df7f57b0ce6744f7fdbe971d471a8 Mon Sep 17 00:00:00 2001 From: Antoine Fricker Date: Thu, 16 Jun 2022 11:22:00 +0200 Subject: [PATCH 1/4] Hide logout button if irrelevent --- examples/simple/src/Layout.tsx | 1 + examples/simple/src/posts/PostList.tsx | 1 + packages/ra-ui-materialui/src/auth/Logout.tsx | 6 ++++-- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/examples/simple/src/Layout.tsx b/examples/simple/src/Layout.tsx index 3af2caebba8..348963f5734 100644 --- a/examples/simple/src/Layout.tsx +++ b/examples/simple/src/Layout.tsx @@ -8,6 +8,7 @@ import { UserMenu, useLocaleState, useUserMenu, + useAuthState, } from 'react-admin'; import { MenuItem, MenuItemProps, ListItemIcon } from '@mui/material'; import Language from '@mui/icons-material/Language'; diff --git a/examples/simple/src/posts/PostList.tsx b/examples/simple/src/posts/PostList.tsx index 63284b17901..14fd153a8d9 100644 --- a/examples/simple/src/posts/PostList.tsx +++ b/examples/simple/src/posts/PostList.tsx @@ -100,6 +100,7 @@ const PostList = () => { const isSmall = useMediaQuery(theme => theme.breakpoints.down('md')); return ( Date: Thu, 16 Jun 2022 16:00:15 +0200 Subject: [PATCH 2/4] Corrections from PR review --- examples/simple/src/Layout.tsx | 1 - examples/simple/src/posts/PostList.tsx | 1 - packages/ra-ui-materialui/src/auth/Logout.tsx | 4 +++- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/simple/src/Layout.tsx b/examples/simple/src/Layout.tsx index 348963f5734..3af2caebba8 100644 --- a/examples/simple/src/Layout.tsx +++ b/examples/simple/src/Layout.tsx @@ -8,7 +8,6 @@ import { UserMenu, useLocaleState, useUserMenu, - useAuthState, } from 'react-admin'; import { MenuItem, MenuItemProps, ListItemIcon } from '@mui/material'; import Language from '@mui/icons-material/Language'; diff --git a/examples/simple/src/posts/PostList.tsx b/examples/simple/src/posts/PostList.tsx index 14fd153a8d9..63284b17901 100644 --- a/examples/simple/src/posts/PostList.tsx +++ b/examples/simple/src/posts/PostList.tsx @@ -100,7 +100,6 @@ const PostList = () => { const isSmall = useMediaQuery(theme => theme.breakpoints.down('md')); return ( Date: Fri, 17 Jun 2022 07:36:38 +0200 Subject: [PATCH 3/4] Add unit and integration tests --- .../ra-ui-materialui/src/auth/Logout.spec.tsx | 37 +++++++++++++++++++ .../src/auth/Logout.stories.tsx | 29 +++++++++++++++ packages/ra-ui-materialui/src/auth/Logout.tsx | 2 +- 3 files changed, 67 insertions(+), 1 deletion(-) create mode 100644 packages/ra-ui-materialui/src/auth/Logout.spec.tsx create mode 100644 packages/ra-ui-materialui/src/auth/Logout.stories.tsx diff --git a/packages/ra-ui-materialui/src/auth/Logout.spec.tsx b/packages/ra-ui-materialui/src/auth/Logout.spec.tsx new file mode 100644 index 00000000000..49320b4500b --- /dev/null +++ b/packages/ra-ui-materialui/src/auth/Logout.spec.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import { render, screen, waitFor } from '@testing-library/react'; +import { AdminContext } from '../AdminContext'; +import { Logout } from './Logout'; +import { UserAuthenticated, UserUnauthenticated } from './Logout.stories'; + +export default { title: 'ra-ui-materialui/input/AutocompleteArrayInput' }; + +const MinimalAdmin = authProvider => { + return ( + + + + ); +}; + +it('should display logout button if the auth succeeds', async () => { + render(); + + await waitFor(() => { + const logoutButton = screen.queryByText( + 'ra.auth.logout' + ) as HTMLInputElement; + expect(logoutButton).not.toBeNull(); + }); +}); + +it('should not display logout button if the auth fails', async () => { + render(); + + await waitFor(() => { + const logoutButton = screen.queryByText( + 'ra.auth.logout' + ) as HTMLInputElement; + expect(logoutButton).toBeNull(); + }); +}); diff --git a/packages/ra-ui-materialui/src/auth/Logout.stories.tsx b/packages/ra-ui-materialui/src/auth/Logout.stories.tsx new file mode 100644 index 00000000000..a6552839d8c --- /dev/null +++ b/packages/ra-ui-materialui/src/auth/Logout.stories.tsx @@ -0,0 +1,29 @@ +import { Typography } from '@mui/material'; +import * as React from 'react'; +import { AdminContext } from '../AdminContext'; +import { Logout } from './Logout'; + +export default { title: 'ra-ui-materialui/auth/Logout' }; + +const MinimalAdmin = (props: { authenticated: boolean }) => { + const authProvider = { + login: () => Promise.resolve(), + logout: () => Promise.resolve(), + checkAuth: () => + props.authenticated ? Promise.resolve() : Promise.reject(), + checkError: () => Promise.resolve(), + getPermissions: () => Promise.resolve(), + }; + return ( + + + Should {props.authenticated ? '' : 'not '}display logout button + + + + ); +}; + +export const UserAuthenticated = () => ; + +export const UserUnauthenticated = () => ; diff --git a/packages/ra-ui-materialui/src/auth/Logout.tsx b/packages/ra-ui-materialui/src/auth/Logout.tsx index 2684209c1ab..6257c1bf939 100644 --- a/packages/ra-ui-materialui/src/auth/Logout.tsx +++ b/packages/ra-ui-materialui/src/auth/Logout.tsx @@ -24,6 +24,7 @@ export const Logout: FunctionComponent< > = React.forwardRef(function Logout(props, ref) { const { className, redirectTo, icon, ...rest } = props; + const { authenticated } = useAuthState(); const isXSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm') ); @@ -34,7 +35,6 @@ export const Logout: FunctionComponent< redirectTo, logout, ]); - const { authenticated } = useAuthState(); if (!authenticated) return null; From 66786008c230fec3e29619d41166b72d93d28bad Mon Sep 17 00:00:00 2001 From: Antoine Fricker Date: Fri, 17 Jun 2022 09:32:09 +0200 Subject: [PATCH 4/4] Remove unused elements and imports --- packages/ra-ui-materialui/src/auth/Logout.spec.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/packages/ra-ui-materialui/src/auth/Logout.spec.tsx b/packages/ra-ui-materialui/src/auth/Logout.spec.tsx index 49320b4500b..92e4324a61a 100644 --- a/packages/ra-ui-materialui/src/auth/Logout.spec.tsx +++ b/packages/ra-ui-materialui/src/auth/Logout.spec.tsx @@ -1,19 +1,7 @@ import * as React from 'react'; import { render, screen, waitFor } from '@testing-library/react'; -import { AdminContext } from '../AdminContext'; -import { Logout } from './Logout'; import { UserAuthenticated, UserUnauthenticated } from './Logout.stories'; -export default { title: 'ra-ui-materialui/input/AutocompleteArrayInput' }; - -const MinimalAdmin = authProvider => { - return ( - - - - ); -}; - it('should display logout button if the auth succeeds', async () => { render();