Fix/app components (#566)

packages/ui/__tests__/AppSidebar/AppSidebarFavorites.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import { AppSidebarFavorites } from '../../src/AppSidebar'
+
+describe('AppSidebarFavorites', () => {
+  it('shows no favorites if empty', () => {
+    render(<AppSidebarFavorites>{() => null}</AppSidebarFavorites>)
+
+    expect(screen.getByTestId('sidebar-menu-no-favorites')).toBeInTheDocument()
+  })
+})

packages/ui/src/AppSidebar/AppSidebarItem/AppSidebarItem.module.scss

@@ -40,7 +40,10 @@
     }
   }
 
-  &:hover {
+  &:hover,
+  &:active {
+    color: inherit;
+
     .favorite {
       display: block;
     }

packages/ui/src/AppSidebar/AppSidebarItem/AppSidebarItem.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement, ReactNode, useContext } from 'react'
 import cn from 'classnames'
 import { Icon as FeatherIcon } from 'react-feather'
+import { DataTestProp } from '@hazelcast/helpers'
 
 import { Icon } from '../../Icon'
 import { Tooltip } from '../../Tooltip'
@@ -10,7 +11,6 @@ import { AppSidebarFavoriteButton } from '../AppSidebarFavoriteButton'
 import { appSidebarSectionContext } from '../AppSidebarSection/appSidebarSectionContext'
 
 import styles from './AppSidebarItem.module.scss'
-import { DataTestProp } from '@hazelcast/helpers'
 
 const Component = ({ children }: { children: ReactNode }) => <>{children}</>
 
@@ -60,6 +60,7 @@ export const AppSidebarItem = ({
           disabled={disabled as boolean}
           disabledTooltip={disabledTooltip}
           bodyClassName={styles.content}
+          data-test="sidebar-menu-item-title"
           className={cn(styles.button, { [styles.active]: active }, className)}
         >
           <>

packages/ui/src/AppSidebar/AppSidebarSection/AppSidebarSection.module.scss

@@ -30,7 +30,6 @@ $sideBarMenuSectionTransitionMaxHeight: 1000px;
   display: flex;
   flex-direction: column;
   gap: c.$grid;
-  padding: 0 c.$grid 0 0;
 }
 
 .icon {

packages/ui/src/AppSidebar/AppSidebarSection/AppSidebarSection.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode, useContext } from 'react'
 import cn from 'classnames'
+import { DataTestProp } from '@hazelcast/helpers'
 
 import { appSidebarContext } from '../appSidebarContext'
 import { AppSidebarSectionExpandable, AppSidebarSectionExpandableProps } from './AppSidebarSectionExpandable'
@@ -9,21 +10,22 @@ import styles from './AppSidebarSection.module.scss'
 export type AppSidebarSectionProps = {
   title: string
   children: ReactNode
-} & ({ id?: never; active?: never; icon?: never; ariaLabel?: never } | AppSidebarSectionExpandableProps)
+} & DataTestProp &
+  ({ id?: never; active?: never; icon?: never; ariaLabel?: never } | AppSidebarSectionExpandableProps)
 
-export const AppSidebarSection = ({ id, icon, active, title, children, ariaLabel }: AppSidebarSectionProps) => {
+export const AppSidebarSection = ({ id, icon, active, title, children, ariaLabel, 'data-test': dataTest }: AppSidebarSectionProps) => {
   const { isOpen } = useContext(appSidebarContext)
 
   if (id) {
     return (
-      <AppSidebarSectionExpandable id={id} icon={icon} title={title} active={active} ariaLabel={ariaLabel}>
+      <AppSidebarSectionExpandable data-test={dataTest} id={id} icon={icon} title={title} active={active} ariaLabel={ariaLabel}>
         {children}
       </AppSidebarSectionExpandable>
     )
   }
 
   return (
-    <section className={cn(styles.root, { [styles.collapsed]: !isOpen })}>
+    <section data-test={dataTest} className={cn(styles.root, { [styles.collapsed]: !isOpen })}>
       <h3>{title}</h3>
       {children}
     </section>

packages/ui/src/AppSidebar/AppSidebarSection/AppSidebarSectionExpandable.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode, useContext, useEffect } from 'react'
 import cn from 'classnames'
 import { ChevronDown, ChevronUp, Icon as FeatherIcon } from 'react-feather'
 import createPersistedState from 'use-persisted-state'
+import { DataTestProp } from '@hazelcast/helpers'
 
 import { useRefValue } from '../../hooks'
 import { Icon, IconProps } from '../../Icon'
@@ -11,18 +12,26 @@ import { appSidebarSectionContext } from './appSidebarSectionContext'
 
 import styles from './AppSidebarSection.module.scss'
 
-export interface AppSidebarSectionExpandableProps {
+export type AppSidebarSectionExpandableProps = {
   id: string
   title: string
   active: boolean
   icon: FeatherIcon
   ariaLabel: string
   children: ReactNode
-}
+} & DataTestProp
 
 const kebabCase = (str: string) => str.toLowerCase().split(' ').join('-')
 
-export const AppSidebarSectionExpandable = ({ id, active, icon, title, ariaLabel, children }: AppSidebarSectionExpandableProps) => {
+export const AppSidebarSectionExpandable = ({
+  id,
+  active,
+  icon,
+  title,
+  ariaLabel,
+  children,
+  'data-test': dataTest = 'sidebar-menu-section-title',
+}: AppSidebarSectionExpandableProps) => {
   const { isOpen, open: openSidebar } = useContext(appSidebarContext)
   const usePersistedMenuStorageState = createPersistedState<boolean>(`isOpen::${title}`)
 
@@ -63,7 +72,7 @@ export const AppSidebarSectionExpandable = ({ id, active, icon, title, ariaLabel
         active={active}
         className={styles.toggle}
         adornment={<Icon data-test="sidebar-menu-section-chevron" size="medium" containerClassName={styles.icon} {...chevronButtonProps} />}
-        data-test="sidebar-menu-section-title"
+        data-test={dataTest}
       />
       {/* detect whether an item is in an expandable section or not. */}
       <appSidebarSectionContext.Provider value={{}}>