[FEATURE] add header and row actions to table (#557)

Signed-off-by: Gabriel Bernal <gbernal@redhat.com>

Author: jgbernalp

table/schemas/table.cue

@@ -26,10 +26,12 @@ spec: close({
 	defaultColumnHeight?: "auto" | number
 	defaultColumnHidden?: bool
 	pagination?:          bool
-	enableFiltering?:    bool
-	columnSettings?: [...#columnSettings]
-	cellSettings?: [...#cellSettings]
-	transforms?: [...common.#transform]
+	enableFiltering?:     bool
+	columnSettings?:      [...#columnSettings]
+	cellSettings?:        [...#cellSettings]
+	transforms?:          [...common.#transform]
+	selection?:           common.#selection
+	actions?:             common.#actions
 })
 
 #columnSettings: {

table/src/Table.ts

@@ -12,16 +12,17 @@
 // limitations under the License.
 
 import { PanelPlugin } from '@perses-dev/plugin-system';
-import { createInitialTableOptions, TableOptions } from './models';
 import {
   getTablePanelQueryOptions,
+  TableCellsEditor,
+  TableColumnsEditor,
   TablePanel,
   TableProps,
-  TableColumnsEditor,
   TableSettingsEditor,
-  TableCellsEditor,
   TableTransformsEditor,
 } from './components';
+import { TableItemSelectionActionsEditor } from './components/TableItemSelectionActionsEditor';
+import { createInitialTableOptions, TableOptions } from './models';
 
 /**
  * The core TimeSeriesTable panel plugin for Perses.
@@ -35,6 +36,7 @@ export const Table: PanelPlugin<TableOptions, TableProps> = {
     { label: 'Column Settings', content: TableColumnsEditor },
     { label: 'Cell Settings', content: TableCellsEditor },
     { label: 'Transforms', content: TableTransformsEditor },
+    { label: 'Item Actions', content: TableItemSelectionActionsEditor },
   ],
   createInitialOptions: createInitialTableOptions,
 };

table/src/components/TableItemSelectionActionsEditor.tsx

@@ -0,0 +1,35 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { ActionOptions, ItemSelectionActionsEditor, SelectionOptions } from '@perses-dev/plugin-system';
+import { ReactElement } from 'react';
+import { TableSettingsEditorProps } from '../models';
+
+export function TableItemSelectionActionsEditor({ value, onChange }: TableSettingsEditorProps): ReactElement {
+  function handleActionsChange(actions: ActionOptions | undefined): void {
+    onChange({ ...value, actions: actions });
+  }
+
+  function handleSelectionChange(selection: SelectionOptions | undefined): void {
+    onChange({ ...value, selection: selection });
+  }
+
+  return (
+    <ItemSelectionActionsEditor
+      actionOptions={value.actions}
+      onChangeActions={handleActionsChange}
+      selectionOptions={value.selection}
+      onChangeSelection={handleSelectionChange}
+    />
+  );
+}

table/src/components/TablePanel.tsx

@@ -11,19 +11,21 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { Box, Theme, Typography, useTheme } from '@mui/material';
+import { Table, TableCellConfigs, TableColumnConfig, useSelection } from '@perses-dev/components';
+import { formatValue, Labels, QueryDataType, TimeSeries, TimeSeriesData, transformData } from '@perses-dev/core';
+import { useSelectionItemActions } from '@perses-dev/dashboards';
 import {
+  ActionOptions,
   PanelData,
   PanelProps,
   replaceVariablesInString,
   useAllVariableValues,
   VariableStateMap,
 } from '@perses-dev/plugin-system';
-import { Table, TableCellConfigs, TableColumnConfig } from '@perses-dev/components';
-import { ReactElement, useEffect, useMemo, useState } from 'react';
-import { formatValue, Labels, QueryDataType, TimeSeries, TimeSeriesData, transformData } from '@perses-dev/core';
-import { PaginationState, SortingState, ColumnFiltersState } from '@tanstack/react-table';
-import { useTheme, Theme, Typography, Box } from '@mui/material';
-import { ColumnSettings, TableOptions, evaluateConditionalFormatting } from '../models';
+import { ColumnFiltersState, PaginationState, RowSelectionState, SortingState } from '@tanstack/react-table';
+import { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ColumnSettings, evaluateConditionalFormatting, TableOptions } from '../models';
 import { EmbeddedPanel } from './EmbeddedPanel';
 
 function generateCellContentConfig(
@@ -211,6 +213,50 @@ export function TablePanel({ contentDimensions, spec, queryResults }: TableProps
   const theme = useTheme();
   const allVariables = useAllVariableValues();
 
+  const selectionEnabled = spec.selection?.enabled ?? false;
+  const { selectionMap, setSelection, clearSelection } = useSelection<Record<string, unknown>, string>();
+
+  const itemActionsConfig = spec.actions ? (spec.actions as ActionOptions) : undefined;
+  const itemActionsListConfig =
+    itemActionsConfig?.enabled && itemActionsConfig.displayWithItem ? itemActionsConfig.actionsList : [];
+
+  const { getItemActionButtons, confirmDialog, actionButtons } = useSelectionItemActions({
+    actions: itemActionsListConfig,
+    variableState: allVariables,
+  });
+
+  const filteredDataRef = useRef<Array<Record<string, unknown>>>([]);
+
+  // Convert selectionMap to TanStack's RowSelectionState format
+  const rowSelection = useMemo((): RowSelectionState => {
+    const result: RowSelectionState = {};
+    selectionMap.forEach((_, id) => {
+      result[id] = true;
+    });
+    return result;
+  }, [selectionMap]);
+
+  const handleRowSelectionChange = useCallback(
+    (newRowSelection: RowSelectionState) => {
+      const newSelection: Array<{ id: string; item: Record<string, unknown> }> = [];
+      for (const [id, isSelected] of Object.entries(newRowSelection)) {
+        if (isSelected) {
+          const index = parseInt(id, 10);
+          if (filteredDataRef.current[index] !== undefined) {
+            newSelection.push({ id, item: filteredDataRef.current[index] });
+          }
+        }
+      }
+
+      if (newSelection.length === 0) {
+        clearSelection();
+      } else {
+        setSelection(newSelection);
+      }
+    },
+    [setSelection, clearSelection]
+  );
+
   // TODO: handle other query types
   const queryMode = getTablePanelQueryOptions(spec).mode;
   const rawData: Array<Record<string, unknown>> = useMemo(() => {
@@ -452,6 +498,9 @@ export function TablePanel({ contentDimensions, spec, queryResults }: TableProps
     return filtered;
   }, [data, columnFilters, spec.enableFiltering]);
 
+  // Keep ref in sync with filtered data for use in selection handler
+  filteredDataRef.current = filteredData;
+
   const [pagination, setPagination] = useState<PaginationState | undefined>(
     spec.pagination ? { pageIndex: 0, pageSize: 10 } : undefined
   );
@@ -486,6 +535,7 @@ export function TablePanel({ contentDimensions, spec, queryResults }: TableProps
 
   return (
     <>
+      {confirmDialog}
       {spec.enableFiltering && (
         <div
           style={{
@@ -592,6 +642,11 @@ export function TablePanel({ contentDimensions, spec, queryResults }: TableProps
         onSortingChange={setSorting}
         pagination={pagination}
         onPaginationChange={setPagination}
+        checkboxSelection={selectionEnabled}
+        rowSelection={rowSelection}
+        onRowSelectionChange={handleRowSelectionChange}
+        getItemActions={({ id, data }) => getItemActionButtons({ id, data: data as Record<string, unknown> })}
+        hasItemActions={actionButtons && actionButtons.length > 0}
       />
     </>
   );

table/src/components/index.ts

@@ -16,6 +16,7 @@ export * from './ColumnsEditor';
 export * from './EmbeddedPanel';
 export * from './TableCellsEditor';
 export * from './TableColumnsEditor';
+export * from './TableItemSelectionActionsEditor';
 export * from './TablePanel';
 export * from './TableSettingsEditor';
 export * from './TableTransformsEditor';

table/src/models/table-model.ts

@@ -13,7 +13,7 @@
 
 import { Definition, FormatOptions, Transform, UnknownSpec } from '@perses-dev/core';
 import { TableDensity, TableCellConfig } from '@perses-dev/components';
-import { OptionsEditorProps } from '@perses-dev/plugin-system';
+import { ActionOptions, OptionsEditorProps, SelectionOptions } from '@perses-dev/plugin-system';
 import React from 'react';
 import { TextField, Stack, MenuItem, Typography } from '@mui/material';
 
@@ -138,6 +138,10 @@ export interface TableOptions {
   pagination?: boolean;
   // Enable filtering for individual columns.
   enableFiltering?: boolean;
+  // Enable row selection.
+  selection?: SelectionOptions;
+  // Customize actions available for selected rows.
+  actions?: ActionOptions;
   // Customize column display and order them by their index in the array.
   columnSettings?: ColumnSettings[];
   // Customize cell display based on their value.