PR comment: metadata to props

elastic · Feb 6, 2025 · 3d8ee06 · 3d8ee06
1 parent b03e9a1
commit 3d8ee06
Show file tree

Hide file tree

Showing 13 changed files with 75 additions and 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
@@ -104,10 +104,8 @@ export const CellActionInlineCustomStyle = () => (
         value: VALUE,
       },
     ]}
-    metadata={{
-      extraActionsIconType: 'boxesVertical',
-      extraActionsColor: 'text',
-    }}
+    extraActionsIconType="boxesVertical"
+    extraActionsColor="text"
   >
     {'Field value'}
   </CellActions>

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
@@ -25,6 +25,8 @@ export const CellActions: React.FC<CellActionsProps> = ({
   disabledActionTypes = [],
   metadata,
   className,
+  extraActionsIconType,
+  extraActionsColor,
 }) => {
   const nodeRef = useRef<HTMLDivElement | null>(null);
 
@@ -83,6 +85,8 @@ export const CellActions: React.FC<CellActionsProps> = ({
           showActionTooltips={showActionTooltips}
           visibleCellActions={visibleCellActions}
           disabledActionTypes={disabledActionTypes}
+          extraActionsIconType={extraActionsIconType}
+          extraActionsColor={extraActionsColor}
         />
       </EuiFlexItem>
     </EuiFlexGroup>

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
@@ -10,32 +10,25 @@
 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(
-      <ExtraActionsButton onClick={() => {}} showTooltip={false} actionContext={actionContext} />
+      <ExtraActionsButton onClick={() => {}} showTooltip={false} />
     );
 
     expect(queryByTestId('showExtraActionsButton')).toBeInTheDocument();
     expect(container.querySelector('[data-euiicon-type="boxesHorizontal"]')).toBeInTheDocument();
   });
 
   it('renders tooltip when showTooltip=true is received', () => {
-    const { container } = render(
-      <ExtraActionsButton onClick={() => {}} showTooltip actionContext={actionContext} />
-    );
+    const { container } = render(<ExtraActionsButton onClick={() => {}} showTooltip />);
     expect(container.querySelector('.euiToolTipAnchor')).not.toBeNull();
   });
 
   it('calls onClick when button is clicked', () => {
     const onClick = jest.fn();
-    const { getByTestId } = render(
-      <ExtraActionsButton onClick={onClick} showTooltip actionContext={actionContext} />
-    );
+    const { getByTestId } = render(<ExtraActionsButton onClick={onClick} showTooltip />);
 
     fireEvent.click(getByTestId('showExtraActionsButton'));
     expect(onClick).toHaveBeenCalled();
@@ -46,10 +39,8 @@ describe('ExtraActionsButton', () => {
       <ExtraActionsButton
         onClick={() => {}}
         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
@@ -10,41 +10,36 @@
 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<ExtraActionsButtonProps> = ({
   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 ? (
     <EuiToolTip content={SHOW_MORE_ACTIONS}>
       <EuiButtonIcon
         data-test-subj="showExtraActionsButton"
         aria-label={SHOW_MORE_ACTIONS}
-        iconType={iconType}
-        color={iconColor}
+        iconType={extraActionsIconType ?? 'boxesHorizontal'}
+        color={extraActionsColor}
         onClick={onClick}
       />
     </EuiToolTip>
   ) : (
     <EuiButtonIcon
       data-test-subj="showExtraActionsButton"
       aria-label={SHOW_MORE_ACTIONS}
-      iconType={iconType ?? 'boxesHorizontal'}
-      color={iconColor}
+      iconType={extraActionsIconType ?? 'boxesHorizontal'}
+      color={extraActionsColor}
       onClick={onClick}
     />
   );

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
@@ -13,15 +13,16 @@ import {
   EuiPopover,
   EuiScreenReaderOnly,
   EuiWrappingPopover,
+  type EuiButtonIconProps,
 } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { euiThemeVars } from '@kbn/ui-theme';
 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<ActionsPopOverProps> = ({
@@ -45,6 +47,7 @@ export const ExtraActionsPopOver: React.FC<ActionsPopOverProps> = ({
   isOpen,
   closePopOver,
   button,
+  extraActionsColor,
 }) => (
   <EuiPopover
     button={button}
@@ -62,14 +65,15 @@ export const ExtraActionsPopOver: React.FC<ActionsPopOverProps> = ({
       actions={actions}
       actionContext={actionContext}
       closePopOver={closePopOver}
+      extraActionsColor={extraActionsColor}
     />
   </EuiPopover>
 );
 
 interface ExtraActionsPopOverWithAnchorProps
   extends Pick<
     ActionsPopOverProps,
-    'anchorPosition' | 'actionContext' | 'closePopOver' | 'isOpen' | 'actions'
+    'anchorPosition' | 'actionContext' | 'closePopOver' | 'isOpen' | 'actions' | 'extraActionsColor'
   > {
   anchorRef: React.RefObject<HTMLElement>;
 }
@@ -81,6 +85,7 @@ export const ExtraActionsPopOverWithAnchor = ({
   isOpen,
   closePopOver,
   actions,
+  extraActionsColor,
 }: ExtraActionsPopOverWithAnchorProps) => {
   return anchorRef.current ? (
     <EuiWrappingPopover
@@ -100,26 +105,28 @@ export const ExtraActionsPopOverWithAnchor = ({
         actions={actions}
         actionContext={actionContext}
         closePopOver={closePopOver}
+        extraActionsColor={extraActionsColor}
       />
     </EuiWrappingPopover>
   ) : null;
 };
 
 type ExtraActionsPopOverContentProps = Pick<
   ActionsPopOverProps,
-  'actionContext' | 'closePopOver' | 'actions'
+  'actionContext' | 'closePopOver' | 'actions' | 'extraActionsColor'
 >;
 
 const ExtraActionsPopOverContent: React.FC<ExtraActionsPopOverContentProps> = ({
   actionContext,
   actions,
   closePopOver,
+  extraActionsColor,
 }) => {
   const items = useMemo(
     () =>
       actions.map((action) => (
         <EuiContextMenuItem
-          css={getEuiContextMenuItemCSS(actionContext)}
+          css={getEuiContextMenuItemCSS(extraActionsColor)}
           key={action.id}
           icon={action.getIconType(actionContext)}
           aria-label={action.getDisplayName(actionContext)}
@@ -132,7 +139,7 @@ const ExtraActionsPopOverContent: React.FC<ExtraActionsPopOverContentProps> = ({
           {action.getDisplayName(actionContext)}
         </EuiContextMenuItem>
       )),
-    [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
@@ -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<Props> = ({
@@ -52,6 +53,8 @@ export const HoverActionsPopover: React.FC<Props> = ({
   actionContext,
   showActionTooltips,
   disabledActionTypes,
+  extraActionsIconType,
+  extraActionsColor,
 }) => {
   const contentRef = useRef<HTMLDivElement>(null);
   const [isExtraActionsPopoverOpen, setIsExtraActionsPopoverOpen] = useState(false);
@@ -161,7 +164,8 @@ export const HoverActionsPopover: React.FC<Props> = ({
                 <ExtraActionsButton
                   onClick={onShowExtraActionsClick}
                   showTooltip={showActionTooltips}
-                  actionContext={actionContext}
+                  extraActionsIconType={extraActionsIconType}
+                  extraActionsColor={extraActionsColor}
                 />
               )}
             </div>

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
@@ -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<InlineActionsProps> = ({
@@ -30,6 +32,8 @@ export const InlineActions: React.FC<InlineActionsProps> = ({
   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<InlineActionsProps> = ({
       <ExtraActionsButton
         onClick={togglePopOver}
         showTooltip={showActionTooltips}
-        actionContext={actionContext}
+        extraActionsIconType={extraActionsIconType}
+        extraActionsColor={extraActionsColor}
       />
     ),
-    [togglePopOver, showActionTooltips, actionContext]
+    [togglePopOver, showActionTooltips, extraActionsIconType, extraActionsColor]
   );
 
   return (
@@ -74,6 +79,7 @@ export const InlineActions: React.FC<InlineActionsProps> = ({
             button={button}
             closePopOver={closePopOver}
             isOpen={isPopoverOpen}
+            extraActionsColor={extraActionsColor}
           />
         </EuiFlexItem>
       ) : 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
@@ -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/...utions/security/plugins/security_solution/public/common/components/cell_actions/index.tsx b/...utions/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/...urity/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx b/...urity/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"
             />
           </EuiFlexItem>
         )}

diff --git a/...solution/public/detections/components/alerts_kpis/alerts_by_rule_panel/alerts_by_rule.tsx b/...solution/public/detections/components/alerts_kpis/alerts_by_rule_panel/alerts_by_rule.tsx
@@ -74,11 +74,9 @@ const COLUMNS: Array<EuiBasicTableColumn<AlertsByRuleData>> = [
         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"
       />
     ),
   },