From 3d8ee06ac48200ba27f6c463a3753682b53bfac7 Mon Sep 17 00:00:00 2001 From: christineweng Date: Tue, 4 Feb 2025 13:29:39 -0600 Subject: [PATCH] PR comment: metadata to props --- .../src/__stories__/cell_actions.stories.tsx | 6 ++---- .../src/components/cell_actions.tsx | 4 ++++ .../components/extra_actions_button.test.tsx | 19 +++++------------ .../src/components/extra_actions_button.tsx | 21 +++++++------------ .../src/components/extra_actions_popover.tsx | 19 +++++++++++------ .../src/components/hover_actions_popover.tsx | 10 ++++++--- .../src/components/inline_actions.tsx | 12 ++++++++--- .../shared/kbn-cell-actions/src/types.ts | 13 +++++++++++- .../common/components/cell_actions/index.tsx | 3 +++ .../charts/draggable_legend_item.tsx | 8 +++---- .../alerts_by_rule_panel/alerts_by_rule.tsx | 8 +++---- .../alerts_progress_bar.tsx | 8 +++---- .../severity_level_panel/columns.tsx | 8 +++---- 13 files changed, 75 insertions(+), 64 deletions(-) diff --git a/src/platform/packages/shared/kbn-cell-actions/src/__stories__/cell_actions.stories.tsx b/src/platform/packages/shared/kbn-cell-actions/src/__stories__/cell_actions.stories.tsx index eaaae7facf08d..c0f8f172381d1 100644 --- a/src/platform/packages/shared/kbn-cell-actions/src/__stories__/cell_actions.stories.tsx +++ b/src/platform/packages/shared/kbn-cell-actions/src/__stories__/cell_actions.stories.tsx @@ -104,10 +104,8 @@ export const CellActionInlineCustomStyle = () => ( value: VALUE, }, ]} - metadata={{ - extraActionsIconType: 'boxesVertical', - extraActionsColor: 'text', - }} + extraActionsIconType="boxesVertical" + extraActionsColor="text" > {'Field value'} diff --git a/src/platform/packages/shared/kbn-cell-actions/src/components/cell_actions.tsx b/src/platform/packages/shared/kbn-cell-actions/src/components/cell_actions.tsx index 4ae1c42214289..a8bbc92e2c7f8 100644 --- a/src/platform/packages/shared/kbn-cell-actions/src/components/cell_actions.tsx +++ b/src/platform/packages/shared/kbn-cell-actions/src/components/cell_actions.tsx @@ -25,6 +25,8 @@ export const CellActions: React.FC = ({ disabledActionTypes = [], metadata, className, + extraActionsIconType, + extraActionsColor, }) => { const nodeRef = useRef(null); @@ -83,6 +85,8 @@ export const CellActions: React.FC = ({ showActionTooltips={showActionTooltips} visibleCellActions={visibleCellActions} disabledActionTypes={disabledActionTypes} + extraActionsIconType={extraActionsIconType} + extraActionsColor={extraActionsColor} /> diff --git a/src/platform/packages/shared/kbn-cell-actions/src/components/extra_actions_button.test.tsx b/src/platform/packages/shared/kbn-cell-actions/src/components/extra_actions_button.test.tsx index e022b8f3a0d9f..b767c8024d469 100644 --- a/src/platform/packages/shared/kbn-cell-actions/src/components/extra_actions_button.test.tsx +++ b/src/platform/packages/shared/kbn-cell-actions/src/components/extra_actions_button.test.tsx @@ -10,14 +10,11 @@ import { fireEvent, render } from '@testing-library/react'; import React from 'react'; import { ExtraActionsButton } from './extra_actions_button'; -import type { CellActionExecutionContext } from '../types'; - -const actionContext = {} as CellActionExecutionContext; describe('ExtraActionsButton', () => { it('renders', () => { const { queryByTestId, container } = render( - {}} showTooltip={false} actionContext={actionContext} /> + {}} showTooltip={false} /> ); expect(queryByTestId('showExtraActionsButton')).toBeInTheDocument(); @@ -25,17 +22,13 @@ describe('ExtraActionsButton', () => { }); it('renders tooltip when showTooltip=true is received', () => { - const { container } = render( - {}} showTooltip actionContext={actionContext} /> - ); + const { container } = render( {}} showTooltip />); expect(container.querySelector('.euiToolTipAnchor')).not.toBeNull(); }); it('calls onClick when button is clicked', () => { const onClick = jest.fn(); - const { getByTestId } = render( - - ); + const { getByTestId } = render(); fireEvent.click(getByTestId('showExtraActionsButton')); expect(onClick).toHaveBeenCalled(); @@ -46,10 +39,8 @@ describe('ExtraActionsButton', () => { {}} showTooltip={false} - actionContext={{ - ...actionContext, - metadata: { extraActionsIconType: 'boxesVertical', extraActionsColor: 'text' }, - }} + extraActionsIconType="boxesVertical" + extraActionsColor="text" /> ); diff --git a/src/platform/packages/shared/kbn-cell-actions/src/components/extra_actions_button.tsx b/src/platform/packages/shared/kbn-cell-actions/src/components/extra_actions_button.tsx index bf42c79b71da4..537e651768c05 100644 --- a/src/platform/packages/shared/kbn-cell-actions/src/components/extra_actions_button.tsx +++ b/src/platform/packages/shared/kbn-cell-actions/src/components/extra_actions_button.tsx @@ -10,32 +10,27 @@ import { EuiButtonIcon, EuiToolTip, type EuiButtonIconProps } from '@elastic/eui'; import React from 'react'; import { SHOW_MORE_ACTIONS } from './translations'; -import type { CellActionExecutionContext } from '../types'; interface ExtraActionsButtonProps { onClick: () => void; showTooltip: boolean; - actionContext: CellActionExecutionContext; + extraActionsIconType?: EuiButtonIconProps['iconType']; + extraActionsColor?: EuiButtonIconProps['color']; } export const ExtraActionsButton: React.FC = ({ onClick, showTooltip, - actionContext, + extraActionsIconType, + extraActionsColor, }) => { - const iconType = - (actionContext?.metadata?.extraActionsIconType as EuiButtonIconProps['iconType']) ?? - 'boxesHorizontal'; - const iconColor = - (actionContext?.metadata?.extraActionsColor as EuiButtonIconProps['color']) ?? 'primary'; - return showTooltip ? ( @@ -43,8 +38,8 @@ export const ExtraActionsButton: React.FC = ({ ); diff --git a/src/platform/packages/shared/kbn-cell-actions/src/components/extra_actions_popover.tsx b/src/platform/packages/shared/kbn-cell-actions/src/components/extra_actions_popover.tsx index b400d1fa32200..34371f0c406a6 100644 --- a/src/platform/packages/shared/kbn-cell-actions/src/components/extra_actions_popover.tsx +++ b/src/platform/packages/shared/kbn-cell-actions/src/components/extra_actions_popover.tsx @@ -13,6 +13,7 @@ import { EuiPopover, EuiScreenReaderOnly, EuiWrappingPopover, + type EuiButtonIconProps, } from '@elastic/eui'; import React, { useMemo } from 'react'; import { euiThemeVars } from '@kbn/ui-theme'; @@ -20,8 +21,8 @@ import { css } from '@emotion/react'; import { EXTRA_ACTIONS_ARIA_LABEL, YOU_ARE_IN_A_DIALOG_CONTAINING_OPTIONS } from './translations'; import type { CellAction, CellActionExecutionContext } from '../types'; -const getEuiContextMenuItemCSS = (actionContext: CellActionExecutionContext) => { - if (actionContext.metadata?.extraActionsColor === 'text') { +const getEuiContextMenuItemCSS = (extraActionsColor?: EuiButtonIconProps['color']) => { + if (extraActionsColor && extraActionsColor === 'text') { return undefined; } return css` @@ -36,6 +37,7 @@ interface ActionsPopOverProps { closePopOver: () => void; actions: CellAction[]; button: JSX.Element; + extraActionsColor?: EuiButtonIconProps['color']; } export const ExtraActionsPopOver: React.FC = ({ @@ -45,6 +47,7 @@ export const ExtraActionsPopOver: React.FC = ({ isOpen, closePopOver, button, + extraActionsColor, }) => ( = ({ actions={actions} actionContext={actionContext} closePopOver={closePopOver} + extraActionsColor={extraActionsColor} /> ); @@ -69,7 +73,7 @@ export const ExtraActionsPopOver: React.FC = ({ interface ExtraActionsPopOverWithAnchorProps extends Pick< ActionsPopOverProps, - 'anchorPosition' | 'actionContext' | 'closePopOver' | 'isOpen' | 'actions' + 'anchorPosition' | 'actionContext' | 'closePopOver' | 'isOpen' | 'actions' | 'extraActionsColor' > { anchorRef: React.RefObject; } @@ -81,6 +85,7 @@ export const ExtraActionsPopOverWithAnchor = ({ isOpen, closePopOver, actions, + extraActionsColor, }: ExtraActionsPopOverWithAnchorProps) => { return anchorRef.current ? ( ) : null; @@ -107,19 +113,20 @@ export const ExtraActionsPopOverWithAnchor = ({ type ExtraActionsPopOverContentProps = Pick< ActionsPopOverProps, - 'actionContext' | 'closePopOver' | 'actions' + 'actionContext' | 'closePopOver' | 'actions' | 'extraActionsColor' >; const ExtraActionsPopOverContent: React.FC = ({ actionContext, actions, closePopOver, + extraActionsColor, }) => { const items = useMemo( () => actions.map((action) => ( = ({ {action.getDisplayName(actionContext)} )), - [actionContext, actions, closePopOver] + [actionContext, actions, closePopOver, extraActionsColor] ); return ( diff --git a/src/platform/packages/shared/kbn-cell-actions/src/components/hover_actions_popover.tsx b/src/platform/packages/shared/kbn-cell-actions/src/components/hover_actions_popover.tsx index e7fc53cffd79e..784b2671442ed 100644 --- a/src/platform/packages/shared/kbn-cell-actions/src/components/hover_actions_popover.tsx +++ b/src/platform/packages/shared/kbn-cell-actions/src/components/hover_actions_popover.tsx @@ -7,8 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { EuiPopover, EuiScreenReaderOnly } from '@elastic/eui'; - +import { EuiPopover, EuiScreenReaderOnly, type EuiButtonIconProps } from '@elastic/eui'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { euiThemeVars } from '@kbn/ui-theme'; import { css } from '@emotion/react'; @@ -43,6 +42,8 @@ interface Props { actionContext: CellActionExecutionContext; showActionTooltips: boolean; disabledActionTypes: string[]; + extraActionsIconType?: EuiButtonIconProps['iconType']; + extraActionsColor?: EuiButtonIconProps['color']; } export const HoverActionsPopover: React.FC = ({ @@ -52,6 +53,8 @@ export const HoverActionsPopover: React.FC = ({ actionContext, showActionTooltips, disabledActionTypes, + extraActionsIconType, + extraActionsColor, }) => { const contentRef = useRef(null); const [isExtraActionsPopoverOpen, setIsExtraActionsPopoverOpen] = useState(false); @@ -161,7 +164,8 @@ export const HoverActionsPopover: React.FC = ({ )} diff --git a/src/platform/packages/shared/kbn-cell-actions/src/components/inline_actions.tsx b/src/platform/packages/shared/kbn-cell-actions/src/components/inline_actions.tsx index 928c9690b0f7b..de88d9c2dde97 100644 --- a/src/platform/packages/shared/kbn-cell-actions/src/components/inline_actions.tsx +++ b/src/platform/packages/shared/kbn-cell-actions/src/components/inline_actions.tsx @@ -8,7 +8,7 @@ */ import React, { useCallback, useMemo, useState } from 'react'; -import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, type EuiButtonIconProps } from '@elastic/eui'; import { ActionItem } from './cell_action_item'; import { usePartitionActions } from '../hooks/actions'; import { ExtraActionsPopOver } from './extra_actions_popover'; @@ -22,6 +22,8 @@ interface InlineActionsProps { showActionTooltips: boolean; visibleCellActions: number; disabledActionTypes: string[]; + extraActionsIconType?: EuiButtonIconProps['iconType']; + extraActionsColor?: EuiButtonIconProps['color']; } export const InlineActions: React.FC = ({ @@ -30,6 +32,8 @@ export const InlineActions: React.FC = ({ showActionTooltips, visibleCellActions, disabledActionTypes, + extraActionsIconType, + extraActionsColor, }) => { const { value: actions } = useLoadActions(actionContext, { disabledActionTypes }); const { extraActions, visibleActions } = usePartitionActions(actions ?? [], visibleCellActions); @@ -42,10 +46,11 @@ export const InlineActions: React.FC = ({ ), - [togglePopOver, showActionTooltips, actionContext] + [togglePopOver, showActionTooltips, extraActionsIconType, extraActionsColor] ); return ( @@ -74,6 +79,7 @@ export const InlineActions: React.FC = ({ button={button} closePopOver={closePopOver} isOpen={isPopoverOpen} + extraActionsColor={extraActionsColor} /> ) : null} diff --git a/src/platform/packages/shared/kbn-cell-actions/src/types.ts b/src/platform/packages/shared/kbn-cell-actions/src/types.ts index 9545ea876b8ce..3a8985f36e5cd 100644 --- a/src/platform/packages/shared/kbn-cell-actions/src/types.ts +++ b/src/platform/packages/shared/kbn-cell-actions/src/types.ts @@ -15,6 +15,7 @@ import type { } from '@kbn/ui-actions-plugin/public'; import type { FieldSpec } from '@kbn/data-views-plugin/common'; import type { Serializable } from '@kbn/utility-types'; +import type { EuiButtonIconProps } from '@elastic/eui'; import type { CellActionsMode } from './constants'; export * from './actions/types'; @@ -85,8 +86,18 @@ export type CellActionsProps = PropsWithChildren<{ * This data is sent directly to actions. */ metadata?: Metadata; - + /** + * The class name for the cell actions. + */ className?: string; + /** + * The icon type for the extra actions button. + */ + extraActionsIconType?: EuiButtonIconProps['iconType']; + /** + * The color for the extra actions button. + */ + extraActionsColor?: EuiButtonIconProps['color']; }>; export interface CellActionExecutionContext extends ActionExecutionContext { diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/cell_actions/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/cell_actions/index.tsx index 7b6166928f498..8377a3cc47222 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/cell_actions/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/cell_actions/index.tsx @@ -13,6 +13,7 @@ import type { } from '@kbn/cell-actions'; import React, { useMemo } from 'react'; import type { CellActionFieldValue, CellActionsData } from '@kbn/cell-actions/src/types'; +import type { EuiButtonIconProps } from '@elastic/eui'; import type { SecurityCellActionMetadata } from '../../../app/actions/types'; import { SecurityCellActionsTrigger, SecurityCellActionType } from '../../../app/actions/constants'; import { SourcererScopeName } from '../../../sourcerer/store/model'; @@ -42,6 +43,8 @@ export interface SecurityCellActionsProps triggerId: SecurityCellActionsTrigger; disabledActionTypes?: SecurityCellActionType[]; metadata?: SecurityCellActionMetadata; + extraActionsIconType?: EuiButtonIconProps['iconType']; + extraActionsColor?: EuiButtonIconProps['color']; } export interface UseDataGridColumnsSecurityCellActionsProps diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx index a961cb5e68300..331fe9c0c8a74 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx @@ -115,12 +115,10 @@ const DraggableLegendItemComponent: React.FC<{ triggerId={SecurityCellActionsTrigger.DEFAULT} data={{ field, value }} sourcererScopeId={sourcererScopeId} - metadata={{ - scopeId, - extraActionsIconType: 'boxesVertical', - extraActionsColor: 'text', - }} + metadata={{ scopeId }} disabledActionTypes={[SecurityCellActionType.SHOW_TOP_N]} + extraActionsIconType="boxesVertical" + extraActionsColor="text" /> )} diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_by_rule_panel/alerts_by_rule.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_by_rule_panel/alerts_by_rule.tsx index 29cfcce346d99..4cda599776fa9 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_by_rule_panel/alerts_by_rule.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_by_rule_panel/alerts_by_rule.tsx @@ -74,11 +74,9 @@ const COLUMNS: Array> = [ data={{ field: ALERT_RULE_NAME, value: rule }} sourcererScopeId={getSourcererScopeId(TableId.alertsOnAlertsPage)} disabledActionTypes={[SecurityCellActionType.SHOW_TOP_N]} - metadata={{ - scopeId: TableId.alertsOnAlertsPage, - extraActionsIconType: 'boxesVertical', - extraActionsColor: 'text', - }} + metadata={{ scopeId: TableId.alertsOnAlertsPage }} + extraActionsIconType="boxesVertical" + extraActionsColor="text" /> ), }, diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_progress_bar_panel/alerts_progress_bar.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_progress_bar_panel/alerts_progress_bar.tsx index 8c62113b34a93..bfd5ed32f9021 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_progress_bar_panel/alerts_progress_bar.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_progress_bar_panel/alerts_progress_bar.tsx @@ -198,12 +198,10 @@ export const AlertsProgressBar: React.FC = ({ triggerId={SecurityCellActionsTrigger.DEFAULT} data={{ field: groupBySelection, value: item.key }} sourcererScopeId={sourcererScopeId} - metadata={{ - scopeId: TableId.alertsOnAlertsPage, - extraActionsIconType: 'boxesVertical', - extraActionsColor: 'text', - }} + metadata={{ scopeId: TableId.alertsOnAlertsPage }} disabledActionTypes={[SecurityCellActionType.SHOW_TOP_N]} + extraActionsIconType="boxesVertical" + extraActionsColor="text" /> ) : ( diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/columns.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/columns.tsx index 75ee721dbcfd2..45fea9de370f6 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/columns.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/columns.tsx @@ -63,11 +63,9 @@ export const useGetSeverityTableColumns = (): Array ), },