Merge pull request #684 from devtron-labs/feat/action-menu

feat: add support for action menu

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.10.15",
+    "version": "1.10.16",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -0,0 +1,54 @@
+import PopupMenu from '@Common/PopupMenu'
+import { ActionMenuProps } from './types'
+import ActionMenuOption from './ActionMenuOption'
+import './actionMenu.scss'
+
+const ActionMenu = ({ options, disableDescriptionEllipsis, children, onClick }: ActionMenuProps) => (
+    <PopupMenu autoClose>
+        <PopupMenu.Button isKebab rootClassName="flex left dc__no-background">
+            {/* TODO: fix the issue with immediate button child */}
+            {children}
+        </PopupMenu.Button>
+        <PopupMenu.Body rootClassName="dc__border mxh-300 dc__mnw-100 dc__mxw-250 dc__hide-hscroll dc__overflow-auto mt-4 mb-4">
+            <div className="py-4">
+                {options.length > 0
+                    ? options.map((groupOrOption) =>
+                          'options' in groupOrOption ? (
+                              <div className="flexbox-col dc__gap-4 py-4 action-menu__group" key={groupOrOption.label}>
+                                  <h4 className="fs-12 lh-18 cn-9 fw-6 py-4 px-12 dc__truncate bg__menu--secondary m-0 dc__top-0 dc__zi-1 dc__position-sticky">
+                                      {groupOrOption.label}
+                                  </h4>
+                                  {/* Added this to contain the options in a container and have gap only b/w heading & container */}
+                                  <div>
+                                      {groupOrOption.options.length > 0 ? (
+                                          groupOrOption.options.map((option) => (
+                                              <ActionMenuOption
+                                                  key={option.value}
+                                                  option={option}
+                                                  onClick={onClick}
+                                                  disableDescriptionEllipsis={disableDescriptionEllipsis}
+                                              />
+                                          ))
+                                      ) : (
+                                          <p className="fs-13 lh-18 fw-4 lh-18 cn-7 py-6 px-12 m-0">
+                                              No options in group
+                                          </p>
+                                      )}
+                                  </div>
+                              </div>
+                          ) : (
+                              <ActionMenuOption
+                                  key={groupOrOption.value}
+                                  option={groupOrOption}
+                                  onClick={onClick}
+                                  disableDescriptionEllipsis={disableDescriptionEllipsis}
+                              />
+                          ),
+                      )
+                    : 'No Options'}
+            </div>
+        </PopupMenu.Body>
+    </PopupMenu>
+)
+
+export default ActionMenu

src/Shared/Components/ActionMenu/ActionMenu.component.tsx

@@ -0,0 +1,46 @@
+import { Tooltip } from '@Common/Tooltip'
+import { ActionMenuOptionProps } from './types'
+import { getTooltipProps } from '../SelectPicker/common'
+
+const ActionMenuOption = ({ option, onClick, disableDescriptionEllipsis }: ActionMenuOptionProps) => {
+    const iconBaseClass = 'dc__no-shrink icon-dim-16 flex dc__fill-available-space'
+    const { description, label, startIcon, endIcon, tooltipProps, type = 'neutral', isDisabled } = option
+    const isNegativeType = type === 'negative'
+
+    const handleClick = () => {
+        onClick(option)
+    }
+
+    return (
+        <Tooltip {...getTooltipProps(tooltipProps)}>
+            <div
+                // Intentionally added margin to the left and right to have the gap on the edges of the options
+                className={`flex left dc__gap-8 ${description ? 'top' : ''} py-6 px-8 ${isDisabled ? 'dc__disabled' : 'cursor'} ${isNegativeType ? 'dc__hover-r50' : 'dc__hover-n50'} mr-4 ml-4 br-4 action-menu__option`}
+                onClick={!isDisabled ? handleClick : undefined}
+                aria-disabled={isDisabled}
+            >
+                {startIcon && <div className={`${iconBaseClass} mt-2`}>{startIcon}</div>}
+                <div className="flex-grow-1">
+                    <Tooltip content={label} placement="right">
+                        <h4 className={`m-0 fs-13 fw-4 lh-20 dc__truncate ${isNegativeType ? 'cr-5' : 'cn-9'}`}>
+                            {label}
+                        </h4>
+                    </Tooltip>
+                    {description &&
+                        (typeof description === 'string' ? (
+                            <p
+                                className={`m-0 fs-12 fw-4 lh-18 cn-7 ${!disableDescriptionEllipsis ? 'dc__ellipsis-right__2nd-line' : 'dc__word-break'}`}
+                            >
+                                {description}
+                            </p>
+                        ) : (
+                            <div className="fs-12 lh-18 cn-7">{description}</div>
+                        ))}
+                </div>
+                {endIcon && <div className={iconBaseClass}>{endIcon}</div>}
+            </div>
+        </Tooltip>
+    )
+}
+
+export default ActionMenuOption

src/Shared/Components/ActionMenu/ActionMenuOption.tsx

@@ -0,0 +1,20 @@
+.action-menu {
+    &__group {
+        border-top: 1px solid var(--border-secondary-translucent);
+
+        &:first-child {
+            border-top: none;
+            padding-top: 0;
+        }
+
+        &:last-child {
+            padding-bottom: 0;
+        }
+    }
+
+    &__option {
+        & + .action-menu__group {
+            margin-top: 4px;
+        }
+    }
+}

src/Shared/Components/ActionMenu/actionMenu.scss

@@ -0,0 +1,2 @@
+export { default as ActionMenu } from './ActionMenu.component'
+export type { ActionMenuProps } from './types'

src/Shared/Components/ActionMenu/index.ts

@@ -0,0 +1,21 @@
+import { ReactElement } from 'react'
+import { GroupBase, OptionsOrGroups } from 'react-select'
+import { SelectPickerOptionType, SelectPickerProps } from '../SelectPicker'
+
+type ActionMenuOptionType = SelectPickerOptionType & {
+    isDisabled?: boolean
+    /**
+     * @default 'neutral'
+     */
+    type?: 'neutral' | 'negative'
+}
+
+export interface ActionMenuProps extends Pick<SelectPickerProps, 'disableDescriptionEllipsis'> {
+    children: ReactElement
+    options: OptionsOrGroups<ActionMenuOptionType, GroupBase<ActionMenuOptionType>>
+    onClick: (option: SelectPickerOptionType) => void
+}
+
+export interface ActionMenuOptionProps extends Pick<ActionMenuProps, 'onClick' | 'disableDescriptionEllipsis'> {
+    option: ActionMenuOptionType
+}

src/Shared/Components/ActionMenu/types.ts

@@ -426,8 +426,12 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                             ...(isMulti
                                 ? {
                                       option: () => 'checkbox__parent-container',
+                                      ...(isGroupHeadingSelectable
+                                          ? { groupHeading: () => 'checkbox__parent-container' }
+                                          : {}),
                                   }
                                 : {}),
+                            group: () => 'select-picker__group',
                         }}
                         name={name || inputId}
                         classNamePrefix={classNamePrefix || inputId}

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -45,7 +45,7 @@ import { getGroupCheckboxValue } from './utils'
 import { Icon } from '../Icon'
 import { Button, ButtonProps, ButtonVariantType } from '../Button'
 
-const getTooltipProps = (tooltipProps: SelectPickerOptionType['tooltipProps'] = {}): TooltipProps => {
+export const getTooltipProps = (tooltipProps: SelectPickerOptionType['tooltipProps'] = {}): TooltipProps => {
     if (tooltipProps) {
         if (Object.hasOwn(tooltipProps, 'shortcutKeyCombo') && 'shortcutKeyCombo' in tooltipProps) {
             return tooltipProps
@@ -55,6 +55,7 @@ const getTooltipProps = (tooltipProps: SelectPickerOptionType['tooltipProps'] =
             // TODO: using some typing somersaults here, clean it up later
             alwaysShowTippyOnHover: !!(tooltipProps as Required<Pick<TooltipProps, 'content'>>)?.content,
             ...(tooltipProps as Required<Pick<TooltipProps, 'content'>>),
+            placement: 'right',
         }
     }
 

src/Shared/Components/SelectPicker/common.tsx

@@ -187,6 +187,9 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
             fontSize: '13px',
             lineHeight: '20px',
             fontWeight: 400,
+            borderRadius: '4px',
+            marginInline: '4px',
+            width: 'auto',
 
             ':active': {
                 backgroundColor: 'var(--N100)',
@@ -200,6 +203,10 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
                 cursor: 'not-allowed',
                 opacity: 0.5,
             }),
+
+            '& + .select-picker__group': {
+                marginTop: '4px',
+            },
         }),
         dropdownIndicator: (base, state) => ({
             ...base,
@@ -288,11 +295,16 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
         }),
         group: (base) => ({
             ...base,
-            paddingTop: '4px',
-            paddingBottom: 0,
+            paddingBlock: '4px',
+            borderTop: '1px solid var(--border-secondary-translucent)',
 
             '&:first-child': {
                 paddingTop: 0,
+                borderTop: 'none',
+            },
+
+            '&:last-child': {
+                paddingBottom: 0,
             },
         }),
         groupHeading: (base) => ({
@@ -301,8 +313,8 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
             fontSize: '12px',
             color: 'var(--N900)',
             backgroundColor: 'var(--bg-menu-secondary)',
-            marginBottom: 0,
-            padding: '4px 8px',
+            marginBottom: '4px',
+            padding: '4px 12px',
             textTransform: 'none',
             overflow: 'hidden',
             textOverflow: 'ellipsis',