feat: Constants, ActionMenu, ProfileMenu - add LOGIN URL constant; update ActionMenuItem to use NumbersCount component; refactor useActionMenu hook for improved performance

Author: RohitRaj011

src/Common/Constants.ts

@@ -47,6 +47,7 @@ export const PATTERNS = {
 const GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP = '/global-config/templates/devtron-apps'
 
 export const URLS = {
+    LOGIN: '/login',
     LOGIN_SSO: '/login/sso',
     PERMISSION_GROUPS: '/global-config/auth/groups',
     APP: '/app',

src/Shared/Components/ActionMenu/ActionMenuItem.tsx

@@ -6,6 +6,7 @@ import { ComponentSizeType } from '@Shared/constants'
 
 import { Button, ButtonProps, ButtonVariantType } from '../Button'
 import { Icon } from '../Icon'
+import { NumbersCount } from '../NumbersCount'
 import { getTooltipProps } from '../SelectPicker/common'
 import { DTSwitch, DTSwitchProps } from '../Switch'
 import { ActionMenuItemProps, ActionMenuItemType } from './types'
@@ -93,7 +94,7 @@ export const ActionMenuItem = <T extends string | number>({
                 )
             }
             case 'counter':
-                return <span className="icon-dim-20 flex px-6 bcn-1 cn-7 br-12 fs-13 lh-20 fw-6">{config.value}</span>
+                return <NumbersCount count={config.value} />
             case 'switch':
                 return (
                     <DTSwitch

src/Shared/Components/ActionMenu/types.ts

@@ -5,6 +5,7 @@ import { OmitNever } from '@Shared/types'
 
 import { ButtonProps } from '../Button'
 import { IconsProps } from '../Icon'
+import { NumbersCountProps } from '../NumbersCount'
 import { PopoverProps, UsePopoverProps } from '../Popover'
 import { SelectPickerOptionType, SelectPickerProps } from '../SelectPicker'
 import { DTSwitchProps } from '../Switch'
@@ -51,7 +52,7 @@ type TrailingItemType =
     | {
           type: 'counter'
           config: {
-              value: string | number
+              value: NumbersCountProps['count']
           }
       }
     | {

src/Shared/Components/ActionMenu/useActionMenu.hook.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, createRef, RefObject, useEffect, useMemo, useRef, useState } from 'react'
+import { ChangeEvent, createRef, RefObject, useEffect, useRef, useState } from 'react'
 
 import { usePopover, UsePopoverProps } from '../Popover'
 import { UseActionMenuProps } from './types'
@@ -17,13 +17,9 @@ export const useActionMenu = <T extends string | number>({
     const [focusedIndex, setFocusedIndex] = useState(-1)
     const [searchTerm, setSearchTerm] = useState('')
 
-    // MEMOIZED CONSTANTS
-    const filteredOptions = useMemo(
-        () => (isSearchable ? filterActionMenuOptions(options, searchTerm) : options),
-        [isSearchable, options, searchTerm],
-    )
-
-    const flatOptions = useMemo(() => getActionMenuFlatOptions(filteredOptions), [filteredOptions])
+    // CONSTANTS
+    const filteredOptions = isSearchable ? filterActionMenuOptions(options, searchTerm) : options
+    const flatOptions = getActionMenuFlatOptions(filteredOptions)
 
     // REFS
     const itemsRef = useRef<RefObject<HTMLAnchorElement | HTMLButtonElement>[]>(

src/Shared/Components/Header/ProfileMenu.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react'
 import { Link } from 'react-router-dom'
 
+import { URLS } from '@Common/Constants'
 import { getAlphabetIcon } from '@Common/Helper'
 import { clearCookieOnLogout } from '@Shared/Helpers'
 import { useMainContext } from '@Shared/Providers'
@@ -66,7 +67,7 @@ export const ProfileMenu = ({ user, onClick }: ProfileMenuProps) => {
                     {viewIsPipelineRBACConfiguredNode}
                 </div>
                 <div className="p-4">
-                    <Link to="/login" className="flex dc__gap-8 px-8 py-6 br-4 dc__hover-r50" onClick={onLogout}>
+                    <Link to={URLS.LOGIN} className="flex dc__gap-8 px-8 py-6 br-4 dc__hover-r50" onClick={onLogout}>
                         <span className="flex-grow-1 fs-13 lh-1-5 fw-4 cr-5">Logout</span>
                         <Icon name="ic-logout" color="R500" />
                     </Link>

src/Shared/Components/NumbersCount/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { default as NumbersCount } from './NumbersCount.component'
+export * from './types'

src/Shared/Components/Popover/usePopover.hook.ts

@@ -50,7 +50,7 @@ export const usePopover = ({
         onTriggerKeyDown?.(e, open, closePopover)
     }
 
-    const handlePopoverKeyDown = (e: React.KeyboardEvent) => onPopoverKeyDown(e, open, closePopover)
+    const handlePopoverKeyDown = (e: React.KeyboardEvent) => onPopoverKeyDown?.(e, open, closePopover)
 
     const handleOverlayClick = (e: MouseEvent<HTMLDivElement>) => {
         if (!popover.current?.contains(e.target as Node)) {