Table: Add actions support (#94578)

Author: adela-almasan

packages/grafana-ui/src/components/Button/Button.tsx

@@ -402,6 +402,7 @@ export const clearLinkButtonStyles = (theme: GrafanaTheme2) => {
     fontFamily: 'inherit',
     color: 'inherit',
     height: '100%',
+    cursor: 'context-menu',
     '&:hover': {
       background: 'transparent',
       color: 'inherit',

packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.test.tsx

@@ -6,7 +6,7 @@ import { DataLinksContextMenu } from './DataLinksContextMenu';
 
 const fakeAriaLabel = 'fake aria label';
 describe('DataLinksContextMenu', () => {
-  it('renders context menu when there are more than one data links', () => {
+  it('renders context menu when there are more than one data links or actions', () => {
     render(
       <DataLinksContextMenu
         links={() => [
@@ -23,6 +23,7 @@ describe('DataLinksContextMenu', () => {
             origin: {},
           },
         ]}
+        actions={[{ title: 'Action1', onClick: () => {} }]}
       >
         {() => {
           return <div aria-label="fake aria label" />;
@@ -34,7 +35,43 @@ describe('DataLinksContextMenu', () => {
     expect(screen.queryAllByLabelText(selectors.components.DataLinksContextMenu.singleLink)).toHaveLength(0);
   });
 
-  it('renders link when there is a single data link', () => {
+  it('renders context menu when there are actions and one data link', () => {
+    render(
+      <DataLinksContextMenu
+        links={() => [
+          {
+            href: '/link1',
+            title: 'Link1',
+            target: '_blank',
+            origin: {},
+          },
+        ]}
+        actions={[{ title: 'Action1', onClick: () => {} }]}
+      >
+        {() => {
+          return <div aria-label="fake aria label" />;
+        }}
+      </DataLinksContextMenu>
+    );
+
+    expect(screen.getByLabelText(fakeAriaLabel)).toBeInTheDocument();
+    expect(screen.queryAllByLabelText(selectors.components.DataLinksContextMenu.singleLink)).toHaveLength(0);
+  });
+
+  it('renders context menu when there are only actions', () => {
+    render(
+      <DataLinksContextMenu links={() => []} actions={[{ title: 'Action1', onClick: () => {} }]}>
+        {() => {
+          return <div aria-label="fake aria label" />;
+        }}
+      </DataLinksContextMenu>
+    );
+
+    expect(screen.getByLabelText(fakeAriaLabel)).toBeInTheDocument();
+    expect(screen.queryAllByLabelText(selectors.components.DataLinksContextMenu.singleLink)).toHaveLength(0);
+  });
+
+  it('renders link when there is a single data link and no actions', () => {
     render(
       <DataLinksContextMenu
         links={() => [

packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx

@@ -2,10 +2,11 @@ import { css } from '@emotion/css';
 import { CSSProperties } from 'react';
 import * as React from 'react';
 
-import { LinkModel } from '@grafana/data';
+import { ActionModel, GrafanaTheme2, LinkModel } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { linkModelToContextMenuItems } from '../../utils/dataLinks';
+import { useStyles2 } from '../../themes';
+import { actionModelToContextMenuItems, linkModelToContextMenuItems } from '../../utils/dataLinks';
 import { WithContextMenu } from '../ContextMenu/WithContextMenu';
 import { MenuGroup, MenuItemsGroup } from '../Menu/MenuGroup';
 import { MenuItem } from '../Menu/MenuItem';
@@ -14,15 +15,25 @@ export interface DataLinksContextMenuProps {
   children: (props: DataLinksContextMenuApi) => JSX.Element;
   links: () => LinkModel[];
   style?: CSSProperties;
+  actions?: ActionModel[];
 }
 
 export interface DataLinksContextMenuApi {
   openMenu?: React.MouseEventHandler<HTMLOrSVGElement>;
   targetClassName?: string;
 }
 
-export const DataLinksContextMenu = ({ children, links, style }: DataLinksContextMenuProps) => {
-  const itemsGroup: MenuItemsGroup[] = [{ items: linkModelToContextMenuItems(links), label: 'Data links' }];
+export const DataLinksContextMenu = ({ children, links, actions, style }: DataLinksContextMenuProps) => {
+  const styles = useStyles2(getStyles);
+
+  const itemsGroup: MenuItemsGroup[] = [
+    { items: linkModelToContextMenuItems(links), label: Boolean(links().length) ? 'Data links' : '' },
+  ];
+  const hasActions = Boolean(actions?.length);
+  if (hasActions) {
+    itemsGroup.push({ items: actionModelToContextMenuItems(actions!), label: 'Actions' });
+  }
+
   const linksCounter = itemsGroup[0].items.length;
   const renderMenuGroupItems = () => {
     return itemsGroup.map((group, groupIdx) => (
@@ -36,6 +47,7 @@ export const DataLinksContextMenu = ({ children, links, style }: DataLinksContex
             icon={item.icon}
             active={item.active}
             onClick={item.onClick}
+            className={styles.itemWrapper}
           />
         ))}
       </MenuGroup>
@@ -47,7 +59,7 @@ export const DataLinksContextMenu = ({ children, links, style }: DataLinksContex
     cursor: 'context-menu',
   });
 
-  if (linksCounter > 1) {
+  if (linksCounter > 1 || hasActions) {
     return (
       <WithContextMenu renderMenuItems={renderMenuGroupItems}>
         {({ openMenu }) => {
@@ -71,3 +83,9 @@ export const DataLinksContextMenu = ({ children, links, style }: DataLinksContex
     );
   }
 };
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  itemWrapper: css({
+    fontSize: 12,
+  }),
+});

packages/grafana-ui/src/components/Table/BarGaugeCell.tsx

@@ -24,7 +24,7 @@ const defaultScale: ThresholdsConfig = {
 };
 
 export const BarGaugeCell = (props: TableCellProps) => {
-  const { field, innerWidth, tableStyles, cell, cellProps, row } = props;
+  const { field, innerWidth, tableStyles, cell, cellProps, row, actions } = props;
   const displayValue = field.display!(cell.value);
   const cellOptions = getCellOptions(field);
 
@@ -56,6 +56,7 @@ export const BarGaugeCell = (props: TableCellProps) => {
   };
 
   const hasLinks = Boolean(getLinks().length);
+  const hasActions = Boolean(actions?.length);
   const alignmentFactors = getAlignmentFactor(field, displayValue, cell.row.index);
 
   const renderComponent = (menuProps: DataLinksContextMenuApi) => {
@@ -84,12 +85,13 @@ export const BarGaugeCell = (props: TableCellProps) => {
 
   return (
     <div {...cellProps} className={tableStyles.cellContainer}>
-      {hasLinks && (
-        <DataLinksContextMenu links={getLinks} style={{ display: 'flex', width: '100%' }}>
+      {hasLinks || hasActions ? (
+        <DataLinksContextMenu links={getLinks} actions={actions} style={{ display: 'flex', width: '100%' }}>
           {(api) => renderComponent(api)}
         </DataLinksContextMenu>
+      ) : (
+        renderComponent({})
       )}
-      {!hasLinks && renderComponent({})}
     </div>
   );
 };

packages/grafana-ui/src/components/Table/DefaultCell.tsx

@@ -17,15 +17,16 @@ import { TableCellProps, CustomCellRendererProps, TableCellOptions } from './typ
 import { getCellColors, getCellOptions } from './utils';
 
 export const DefaultCell = (props: TableCellProps) => {
-  const { field, cell, tableStyles, row, cellProps, frame, rowStyled, rowExpanded, textWrapped, height } = props;
-
+  const { field, cell, tableStyles, row, cellProps, frame, rowStyled, rowExpanded, textWrapped, height, actions } =
+    props;
   const inspectEnabled = Boolean(field.config.custom?.inspect);
   const displayValue = field.display!(cell.value);
 
   const showFilters = props.onCellFilterAdded && field.config.filterable;
   const showActions = (showFilters && cell.value !== undefined) || inspectEnabled;
   const cellOptions = getCellOptions(field);
   const hasLinks = Boolean(getCellLinks(field, row)?.length);
+  const hasActions = Boolean(actions?.length);
   const clearButtonStyle = useStyles2(clearLinkButtonStyles);
   const [hover, setHover] = useState(false);
   let value: string | ReactElement;
@@ -94,10 +95,8 @@ export const DefaultCell = (props: TableCellProps) => {
       onMouseLeave={showActions ? onMouseLeave : undefined}
       className={cellStyle}
     >
-      {!hasLinks && (isStringValue ? `${value}` : <div className={tableStyles.cellText}>{value}</div>)}
-
-      {hasLinks && (
-        <DataLinksContextMenu links={() => getCellLinks(field, row) || []}>
+      {hasLinks || hasActions ? (
+        <DataLinksContextMenu links={() => getCellLinks(field, row) || []} actions={actions}>
           {(api) => {
             if (api.openMenu) {
               return (
@@ -113,6 +112,10 @@ export const DefaultCell = (props: TableCellProps) => {
             }
           }}
         </DataLinksContextMenu>
+      ) : isStringValue ? (
+        `${value}`
+      ) : (
+        <div className={tableStyles.cellText}>{value}</div>
       )}
 
       {hover && showActions && (

packages/grafana-ui/src/components/Table/ImageCell.tsx

@@ -9,12 +9,13 @@ import { getCellOptions } from './utils';
 const DATALINKS_HEIGHT_OFFSET = 10;
 
 export const ImageCell = (props: TableCellProps) => {
-  const { field, cell, tableStyles, row, cellProps } = props;
+  const { field, cell, tableStyles, row, cellProps, actions } = props;
   const cellOptions = getCellOptions(field);
   const { title, alt } =
     cellOptions.type === TableCellDisplayMode.Image ? cellOptions : { title: undefined, alt: undefined };
   const displayValue = field.display!(cell.value);
   const hasLinks = Boolean(getCellLinks(field, row)?.length);
+  const hasActions = Boolean(actions?.length);
 
   // The image element
   const img = (
@@ -29,13 +30,13 @@ export const ImageCell = (props: TableCellProps) => {
 
   return (
     <div {...cellProps} className={tableStyles.cellContainer}>
-      {/* If there are no links we simply render the image */}
-      {!hasLinks && img}
-      {/* Otherwise render data links with image */}
-      {hasLinks && (
+      {/* If there are data links/actions, we render them with image */}
+      {/* Otherwise we simply render the image */}
+      {hasLinks || hasActions ? (
         <DataLinksContextMenu
           style={{ height: tableStyles.cellHeight - DATALINKS_HEIGHT_OFFSET, width: 'auto' }}
           links={() => getCellLinks(field, row) || []}
+          actions={actions}
         >
           {(api) => {
             if (api.openMenu) {
@@ -59,6 +60,8 @@ export const ImageCell = (props: TableCellProps) => {
             }
           }}
         </DataLinksContextMenu>
+      ) : (
+        img
       )}
     </div>
   );

packages/grafana-ui/src/components/Table/JSONViewCell.tsx

@@ -11,7 +11,7 @@ import { TableCellInspectorMode } from './TableCellInspector';
 import { TableCellProps } from './types';
 
 export function JSONViewCell(props: TableCellProps): JSX.Element {
-  const { cell, tableStyles, cellProps, field, row } = props;
+  const { cell, tableStyles, cellProps, field, row, actions } = props;
   const inspectEnabled = Boolean(field.config.custom?.inspect);
   const txt = css({
     cursor: 'pointer',
@@ -30,14 +30,14 @@ export function JSONViewCell(props: TableCellProps): JSX.Element {
   }
 
   const hasLinks = Boolean(getCellLinks(field, row)?.length);
+  const hasActions = Boolean(actions?.length);
   const clearButtonStyle = useStyles2(clearLinkButtonStyles);
 
   return (
     <div {...cellProps} className={inspectEnabled ? tableStyles.cellContainerNoOverflow : tableStyles.cellContainer}>
       <div className={cx(tableStyles.cellText, txt)}>
-        {!hasLinks && <div className={tableStyles.cellText}>{displayValue}</div>}
-        {hasLinks && (
-          <DataLinksContextMenu links={() => getCellLinks(field, row) || []}>
+        {hasLinks || hasActions ? (
+          <DataLinksContextMenu links={() => getCellLinks(field, row) || []} actions={actions}>
             {(api) => {
               if (api.openMenu) {
                 return (
@@ -50,6 +50,8 @@ export function JSONViewCell(props: TableCellProps): JSX.Element {
               }
             }}
           </DataLinksContextMenu>
+        ) : (
+          <div className={tableStyles.cellText}>{displayValue}</div>
         )}
       </div>
       {inspectEnabled && <CellActions {...props} previewMode={TableCellInspectorMode.code} />}

packages/grafana-ui/src/components/Table/RowsList.tsx

@@ -23,7 +23,7 @@ import { usePanelContext } from '../PanelChrome';
 import { ExpandedRow, getExpandedRowHeight } from './ExpandedRow';
 import { TableCell } from './TableCell';
 import { TableStyles } from './styles';
-import { CellColors, TableFieldOptions, TableFilterActionCallback } from './types';
+import { CellColors, GetActionsFunction, TableFieldOptions, TableFilterActionCallback } from './types';
 import {
   calculateAroundPointThreshold,
   getCellColors,
@@ -54,6 +54,7 @@ interface RowsListProps {
   headerGroups: HeaderGroup[];
   longestField?: Field;
   textWrapField?: Field;
+  getActions?: GetActionsFunction;
 }
 
 export const RowsList = (props: RowsListProps) => {
@@ -80,6 +81,7 @@ export const RowsList = (props: RowsListProps) => {
     headerGroups,
     longestField,
     textWrapField,
+    getActions,
   } = props;
 
   const [rowHighlightIndex, setRowHighlightIndex] = useState<number | undefined>(initialRowIndex);
@@ -334,32 +336,34 @@ export const RowsList = (props: RowsListProps) => {
               rowExpanded={rowExpanded}
               textWrapped={textWrapFinal !== undefined}
               height={Number(style.height)}
+              getActions={getActions}
             />
           ))}
         </div>
       );
     },
     [
-      cellHeight,
-      data,
-      nestedDataField,
-      onCellFilterAdded,
-      onRowHover,
-      onRowLeave,
-      prepareRow,
       rowIndexForPagination,
       rows,
+      prepareRow,
       tableState.expanded,
-      tableStyles,
+      nestedDataField,
+      rowBg,
       textWrapFinal,
+      tableStyles,
+      onRowLeave,
+      width,
+      cellHeight,
       theme.components.table.rowSelected,
-      theme.typography.fontSize,
       theme.typography.body.lineHeight,
-      timeRange,
-      width,
-      rowBg,
+      theme.typography.fontSize,
+      data,
       headerGroups,
       osContext,
+      onRowHover,
+      onCellFilterAdded,
+      timeRange,
+      getActions,
     ]
   );
 

packages/grafana-ui/src/components/Table/Table.tsx

@@ -59,6 +59,7 @@ export const Table = memo((props: Props) => {
     enableSharedCrosshair = false,
     initialRowIndex = undefined,
     fieldConfig,
+    getActions,
   } = props;
 
   const listRef = useRef<VariableSizeList>(null);
@@ -117,7 +118,7 @@ export const Table = memo((props: Props) => {
   // React-table column definitions
   const memoizedColumns = useMemo(
     () => getColumns(data, width, columnMinWidth, hasNestedData, footerItems, isCountRowsSet),
-    [data, width, columnMinWidth, footerItems, hasNestedData, isCountRowsSet]
+    [data, width, columnMinWidth, hasNestedData, footerItems, isCountRowsSet]
   );
 
   // we need a ref to later store the `toggleAllRowsExpanded` function, returned by `useTable`.
@@ -355,6 +356,7 @@ export const Table = memo((props: Props) => {
                 initialRowIndex={initialRowIndex}
                 longestField={longestField}
                 textWrapField={textWrapField}
+                getActions={getActions}
               />
             </div>
           ) : (