From 3feec2f461cc8e18780bea9e05c854aca960787c Mon Sep 17 00:00:00 2001 From: Priscilla de Roode Date: Mon, 10 Feb 2025 12:03:59 -0300 Subject: [PATCH 1/2] BA-1744: refactor AccountPopover --- .../CurrentProfileMenu/index.tsx | 56 +++++++++++++++++++ .../CurrentProfileMenu/types.ts | 15 +++++ .../AccountPopover/LogoutItem/index.tsx | 30 +++++----- .../AccountPopover/LogoutItem/types.ts | 4 +- .../__tests__/AccountPopover.cy.tsx | 33 ++++------- .../AccountMenu/AccountPopover/index.tsx | 49 ++++++---------- .../AccountMenu/AccountPopover/types.ts | 19 ++----- 7 files changed, 119 insertions(+), 87 deletions(-) create mode 100644 packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/CurrentProfileMenu/index.tsx create mode 100644 packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/CurrentProfileMenu/types.ts diff --git a/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/CurrentProfileMenu/index.tsx b/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/CurrentProfileMenu/index.tsx new file mode 100644 index 00000000..e68ab33a --- /dev/null +++ b/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/CurrentProfileMenu/index.tsx @@ -0,0 +1,56 @@ +import { FC } from 'react' + +import { useCurrentProfile } from '@baseapp-frontend/authentication' + +import { Divider } from '@mui/material' + +import { + CurrentProfile as DefaultCurrentProfile, + SwitchProfileMenu as DefaultSwitchProfileMenu, +} from '../../../../../../profiles/web' +import DefaultCurrentUser from '../CurrentUser' +import DefaultMenuItems from '../MenuItems' +import { CurrentProfileMenuProps } from './types' + +const CurrentProfileMenu: FC = ({ + CurrentUser = DefaultCurrentUser, + CurrentProfile = DefaultCurrentProfile, + SwitchProfileMenu = DefaultSwitchProfileMenu, + SwitchProfileMenuProps = {}, + MenuItems = DefaultMenuItems, + MenuItemsProps = {}, + handlePopoverOnClose, + setOpenProfilesList, +}) => { + const { currentProfile: profile } = useCurrentProfile({ noSSR: false }) + const loadCurrentProfile = Boolean(CurrentProfile) && Boolean(profile) + const loadCurrentUser = !loadCurrentProfile && Boolean(CurrentUser) + const shouldShowDivider = Boolean( + loadCurrentProfile || loadCurrentUser || Boolean(SwitchProfileMenu), + ) + + return ( + <> + {loadCurrentProfile && } + + {loadCurrentUser && } + + {loadCurrentProfile && Boolean(SwitchProfileMenu) && ( + setOpenProfilesList(true)} + {...SwitchProfileMenuProps} + /> + )} + + {Boolean(MenuItemsProps?.menuItems?.length) && ( + <> + {shouldShowDivider && } + + + + )} + + ) +} + +export default CurrentProfileMenu diff --git a/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/CurrentProfileMenu/types.ts b/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/CurrentProfileMenu/types.ts new file mode 100644 index 00000000..672f8a9f --- /dev/null +++ b/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/CurrentProfileMenu/types.ts @@ -0,0 +1,15 @@ +import { FC } from 'react' + +import { SwitchProfileMenuProps } from '../../../../../../profiles/web' +import { MenuItemsProps } from '../MenuItems/types' + +export interface CurrentProfileMenuProps { + CurrentUser?: FC + CurrentProfile?: FC + MenuItems?: FC + MenuItemsProps?: Partial + SwitchProfileMenu?: FC + SwitchProfileMenuProps?: Partial + handlePopoverOnClose: () => void + setOpenProfilesList: (open: boolean) => void +} diff --git a/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/LogoutItem/index.tsx b/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/LogoutItem/index.tsx index 3afe0cc0..76d313f4 100644 --- a/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/LogoutItem/index.tsx +++ b/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/LogoutItem/index.tsx @@ -2,33 +2,29 @@ import { FC } from 'react' import { useLogout } from '@baseapp-frontend/authentication' -import { Box, ButtonBase, MenuItem } from '@mui/material' +import { ButtonBase, MenuItem } from '@mui/material' import { LogoutItemProps } from './types' const LogoutItem: FC = ({ - children, handlePopoverOnClose, logoutButtonLabel = 'Logout', }) => { const { logout } = useLogout() return ( - - {children} - { - handlePopoverOnClose() - logout() - }} - sx={{ fontWeight: 'fontWeightBold', color: 'error.main' }} - > - {logoutButtonLabel} - - + { + handlePopoverOnClose() + logout() + }} + sx={{ fontWeight: 'fontWeightBold', color: 'error.main' }} + > + {logoutButtonLabel} + ) } diff --git a/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/LogoutItem/types.ts b/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/LogoutItem/types.ts index 94aec942..5f15eac9 100644 --- a/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/LogoutItem/types.ts +++ b/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/LogoutItem/types.ts @@ -1,6 +1,4 @@ -import type { PropsWithChildren } from 'react' - -export interface LogoutItemProps extends PropsWithChildren { +export interface LogoutItemProps { handlePopoverOnClose: () => void logoutButtonLabel?: string } diff --git a/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/__tests__/AccountPopover.cy.tsx b/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/__tests__/AccountPopover.cy.tsx index 15bc531e..04207900 100644 --- a/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/__tests__/AccountPopover.cy.tsx +++ b/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/__tests__/AccountPopover.cy.tsx @@ -38,9 +38,8 @@ describe('AccountPopover', () => { cy.findByRole('button').click() - cy.contains(userMockData.firstName).should('exist') - cy.contains(userMockData.lastName).should('exist') - cy.contains(userMockData.email).should('exist') + cy.findByText(userMockData.firstName + ' ' + userMockData.lastName).should('exist') + cy.findByText(userMockData.email).should('exist') cy.findByRole('menuitem', { name: /logout/i }).click() @@ -56,8 +55,8 @@ describe('AccountPopover', () => { cy.findByRole('button').click() - cy.contains(mockUserProfileData.name).should('exist') - cy.contains(mockUserProfileData.urlPath).should('exist') + cy.findByText(mockUserProfileData.name).should('exist') + cy.findByText(mockUserProfileData.urlPath).should('exist') // Step 1. cy.step('should be able to switch profile') @@ -169,23 +168,13 @@ describe('AccountPopover', () => { cy.findByRole('menuitem', { name: /close/i }).should('exist') - cy.findByLabelText('List of available profiles').within(() => { - cy.get('li:visible').each(($li) => { - cy.wrap($li) - .find('.MuiAvatar-root') - .within(($avatar) => { - cy.get('img').then(($img) => { - if ($img.length && $img.attr('width') && $img.attr('height')) { - cy.wrap($img).should('have.attr', 'width', '24') - cy.wrap($img).should('have.attr', 'height', '24') - } else { - cy.wrap($avatar).should('have.attr', 'width', '24') - cy.wrap($avatar).should('have.attr', 'height', '24') - } - }) - }) - }) - }) + cy.findAllByAltText('Profile avatar').should('have.length', 5) + + cy.findAllByAltText('Profile avatar') + .first() + .parent() + .should('have.attr', 'width', '24') + .should('have.attr', 'height', '24') // Step 4. cy.step('should show custom add profile label') diff --git a/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/index.tsx b/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/index.tsx index ec802b9e..ffb8975c 100644 --- a/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/index.tsx +++ b/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/index.tsx @@ -7,6 +7,7 @@ import { ClickableAvatar } from '@baseapp-frontend/design-system/components/web/ import { Popover } from '@baseapp-frontend/design-system/components/web/popovers' import { usePopover } from '@baseapp-frontend/design-system/hooks/common' +import { Box } from '@mui/material' import Divider from '@mui/material/Divider' // TODO: review importing components directly from another module @@ -16,6 +17,7 @@ import { ProfilesList as DefaultProfilesList, SwitchProfileMenu as DefaultSwitchProfileMenu, } from '../../../../../profiles/web' +import CurrentProfileMenu from './CurrentProfileMenu' import DefaultCurrentUser from './CurrentUser' import LogoutItem from './LogoutItem' import DefaultMenuItems from './MenuItems' @@ -62,9 +64,6 @@ const AccountPopover: FC = ({ [timeoutId], ) - const loadCurrentProfile = !!CurrentProfile && !!profile - const loadCurrentUser = !loadCurrentProfile && !!CurrentUser - return ( <> = ({ {...ProfilesListProps} /> ) : ( - <> - {loadCurrentProfile && } - - {loadCurrentUser && } - - {loadCurrentProfile && !!SwitchProfileMenu && ( - setOpenProfilesList(true)} - {...SwitchProfileMenuProps} - /> - )} - - {!!MenuItems && !!MenuItemsProps?.menuItems?.length && ( - <> - {!!(loadCurrentProfile || loadCurrentUser || !!SwitchProfileMenu) && ( - - )} - - - - )} - + )} - {!!LogoutItem && } - - - {openProfilesList && !!AddProfileMenuItem && ( - + {Boolean(LogoutItem) && } + + {openProfilesList && Boolean(AddProfileMenuItem) && ( + )} - + + ) diff --git a/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/types.ts b/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/types.ts index 70948436..3a648168 100644 --- a/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/types.ts +++ b/packages/components/modules/navigations/web/Header/AccountMenu/AccountPopover/types.ts @@ -2,23 +2,14 @@ import type { FC } from 'react' import type { CSSProperties } from '@mui/material/styles/createMixins' -import type { - AddProfileMenuItemProps, - ProfilesListProps, - SwitchProfileMenuProps, -} from '../../../../../profiles/web' +import type { AddProfileMenuItemProps, ProfilesListProps } from '../../../../../profiles/web' +import { CurrentProfileMenuProps } from './CurrentProfileMenu/types' import type { LogoutItemProps } from './LogoutItem/types' -import type { MenuItemsProps } from './MenuItems/types' -export interface AccountPopoverProps { +export interface AccountPopoverProps + extends Omit { PopoverStyles?: CSSProperties - CurrentUser?: FC | null - CurrentProfile?: FC | null - MenuItems?: FC | null - MenuItemsProps?: Partial - SwitchProfileMenu?: FC | null - SwitchProfileMenuProps?: Partial - ProfilesList?: FC | null + ProfilesList?: FC ProfilesListProps?: Partial AddProfileMenuItem?: FC | null AddProfileMenuItemProps?: Partial From 4c3e352883873cde83896c042dd830ffa9df0bcb Mon Sep 17 00:00:00 2001 From: Priscilla de Roode Date: Mon, 17 Mar 2025 16:36:37 -0300 Subject: [PATCH 2/2] BA-1744: increase package version --- packages/components/CHANGELOG.md | 6 ++++++ packages/components/package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index f217ecc4..2dcb3b14 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,11 @@ # @baseapp-frontend/components +## 1.0.23 + +### Patch Changes + +- Refactor AccountPopover and improve some tests + ## 1.0.22 ### Patch Changes diff --git a/packages/components/package.json b/packages/components/package.json index d79186f5..ff3f2e38 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,7 +1,7 @@ { "name": "@baseapp-frontend/components", "description": "BaseApp components modules such as comments, notifications, messages, and more.", - "version": "1.0.22", + "version": "1.0.23", "sideEffects": false, "scripts": { "babel:transpile": "babel modules -d tmp-babel --extensions .ts,.tsx --ignore '**/__tests__/**','**/__storybook__/**'",