BA-1744: Technical Debts

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

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<CurrentProfileMenuProps> = ({
+  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 && <CurrentProfile />}
+
+      {loadCurrentUser && <CurrentUser />}
+
+      {loadCurrentProfile && Boolean(SwitchProfileMenu) && (
+        <SwitchProfileMenu
+          openProfilesList={() => setOpenProfilesList(true)}
+          {...SwitchProfileMenuProps}
+        />
+      )}
+
+      {Boolean(MenuItemsProps?.menuItems?.length) && (
+        <>
+          {shouldShowDivider && <Divider sx={{ borderStyle: 'solid' }} />}
+
+          <MenuItems handlePopoverOnClose={handlePopoverOnClose} {...MenuItemsProps} />
+        </>
+      )}
+    </>
+  )
+}
+
+export default CurrentProfileMenu

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>
+  MenuItemsProps?: Partial<MenuItemsProps>
+  SwitchProfileMenu?: FC<SwitchProfileMenuProps>
+  SwitchProfileMenuProps?: Partial<SwitchProfileMenuProps>
+  handlePopoverOnClose: () => void
+  setOpenProfilesList: (open: boolean) => void
+}

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<LogoutItemProps> = ({
-  children,
   handlePopoverOnClose,
   logoutButtonLabel = 'Logout',
 }) => {
   const { logout } = useLogout()
 
   return (
-    <Box margin={1.5} display="flex" flexDirection="column" gap={0.5}>
-      {children}
-      <MenuItem
-        type="button"
-        tabIndex={0}
-        component={ButtonBase}
-        onClick={() => {
-          handlePopoverOnClose()
-          logout()
-        }}
-        sx={{ fontWeight: 'fontWeightBold', color: 'error.main' }}
-      >
-        {logoutButtonLabel}
-      </MenuItem>
-    </Box>
+    <MenuItem
+      type="button"
+      tabIndex={0}
+      component={ButtonBase}
+      onClick={() => {
+        handlePopoverOnClose()
+        logout()
+      }}
+      sx={{ fontWeight: 'fontWeightBold', color: 'error.main' }}
+    >
+      {logoutButtonLabel}
+    </MenuItem>
   )
 }
 

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
 }

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')

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<AccountPopoverProps> = ({
     [timeoutId],
   )
 
-  const loadCurrentProfile = !!CurrentProfile && !!profile
-  const loadCurrentUser = !loadCurrentProfile && !!CurrentUser
-
   return (
     <>
       <ClickableAvatar
@@ -87,37 +86,25 @@ const AccountPopover: FC<AccountPopoverProps> = ({
             {...ProfilesListProps}
           />
         ) : (
-          <>
-            {loadCurrentProfile && <CurrentProfile />}
-
-            {loadCurrentUser && <CurrentUser />}
-
-            {loadCurrentProfile && !!SwitchProfileMenu && (
-              <SwitchProfileMenu
-                openProfilesList={() => setOpenProfilesList(true)}
-                {...SwitchProfileMenuProps}
-              />
-            )}
-
-            {!!MenuItems && !!MenuItemsProps?.menuItems?.length && (
-              <>
-                {!!(loadCurrentProfile || loadCurrentUser || !!SwitchProfileMenu) && (
-                  <Divider sx={{ borderStyle: 'solid' }} />
-                )}
-
-                <MenuItems handlePopoverOnClose={handlePopoverOnClose} {...MenuItemsProps} />
-              </>
-            )}
-          </>
+          <CurrentProfileMenu
+            CurrentUser={CurrentUser}
+            CurrentProfile={CurrentProfile}
+            SwitchProfileMenu={SwitchProfileMenu}
+            SwitchProfileMenuProps={SwitchProfileMenuProps}
+            MenuItems={MenuItems}
+            MenuItemsProps={MenuItemsProps}
+            handlePopoverOnClose={handlePopoverOnClose}
+            setOpenProfilesList={setOpenProfilesList}
+          />
         )}
 
-        {!!LogoutItem && <Divider sx={{ borderStyle: 'solid' }} />}
-
-        <LogoutItem handlePopoverOnClose={handlePopoverOnClose} {...LogoutItemProps}>
-          {openProfilesList && !!AddProfileMenuItem && (
-            <AddProfileMenuItem {...AddProfileMenuItemProps} />
+        {Boolean(LogoutItem) && <Divider sx={{ borderStyle: 'solid' }} />}
+        <Box margin={1.5} display="flex" flexDirection="column" gap={0.5}>
+          {openProfilesList && Boolean(AddProfileMenuItem) && (
+            <DefaultAddProfileMenuItem {...AddProfileMenuItemProps} />
           )}
-        </LogoutItem>
+          <LogoutItem handlePopoverOnClose={handlePopoverOnClose} {...LogoutItemProps} />
+        </Box>
       </Popover>
     </>
   )

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<CurrentProfileMenuProps, 'handlePopoverOnClose' | 'setOpenProfilesList'> {
   PopoverStyles?: CSSProperties
-  CurrentUser?: FC | null
-  CurrentProfile?: FC | null
-  MenuItems?: FC<MenuItemsProps> | null
-  MenuItemsProps?: Partial<MenuItemsProps>
-  SwitchProfileMenu?: FC<SwitchProfileMenuProps> | null
-  SwitchProfileMenuProps?: Partial<SwitchProfileMenuProps>
-  ProfilesList?: FC<ProfilesListProps> | null
+  ProfilesList?: FC<ProfilesListProps>
   ProfilesListProps?: Partial<ProfilesListProps>
   AddProfileMenuItem?: FC<AddProfileMenuItemProps> | null
   AddProfileMenuItemProps?: Partial<AddProfileMenuItemProps>

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__/**'",