[FEATURE] Selection provider and Item actions #40

jgbernalp · 2026-01-20T11:11:11Z

Description

This PR adds a new Actions and selection features. perses/perses#3788. This allows to define actions based on selected data, for example calling an HTTP request with the interpolated data from multiple rows selection.

Two new Providers were added to the main Panel component, yes we have more providers but users don't have to configure these two, plugin developers can just use the hooks without any issue as they are resilient to undefined context:

SelectionContext: allows to share the selected items between the plugin panel and the panel header. This will allow in the future to use selections from time series or other panel plugins.
ItemActionsContext: allows to execute the actions configured in the plugin spec, either from the table row or the panel header.

I split into 3 commits so is easier to review:

b33ab5d adds the selection provider, adding a selection configuration option to common cue package
43747e2 Improves the interpolation formats and moves the functions to the components package, re exporting in plugins for backwards compatibility
9c52f39 Adds the item actions provider, connecting the selections and actions, adds an actions configuration option to common cue package. The actions and selections integration was added to the table component for plugins to use. Other plugin integrations will follow.

Screenshots

Screen.Recording.2026-01-23.at.20.41.34.mov

Checklist

Pull request has a descriptive title and context useful to a reviewer.
Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
All commits have DCO signoffs.

UI Changes

Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
Code follows the UI guidelines.
E2E tests are stable and unlikely to be flaky.
See e2e docs for more details. Common issues include:
- Is the data inconsistent? You need to mock API requests.
- Does the time change? You need to use consistent time values or mock time utilities.
- Does it have loading states? You need to wait for loading to complete.

…mers Signed-off-by: Gabriel Bernal <[email protected]>

…erpolation Signed-off-by: Gabriel Bernal <[email protected]>

Signed-off-by: Gabriel Bernal <[email protected]>

AntoineThebaud

Review of the CUE part

AntoineThebaud · 2026-01-28T11:19:31Z

cue/common/actions.cue

+#httpMethod: "GET" | "POST" | "PUT" | "PATCH" | "DELETE"
+
+#batchMode: "batch" | "individual"
+
+#contentType: "none" | "json" | "text"
+
+#baseAction: {
+	name:            string
+	icon?:           string
+	confirmMessage?: string
+	enabled:        bool | *true
+	bodyTemplate?: string
+	batchMode:     #batchMode | *"individual"
+}
+
+#eventAction: {
+	#baseAction
+	type:      "event"
+	eventName: string
+}
+
+#webhookAction: {
+	#baseAction
+	type:   "webhook"
+	url:    string
+	method: #httpMethod | *"POST"
+	contentType: #contentType | *"none"
+	headers?: [string]: string
+}


Some defs can be merged up imho:

Suggested change

#httpMethod: "GET" | "POST" | "PUT" | "PATCH" | "DELETE"

#batchMode: "batch" | "individual"

#contentType: "none" | "json" | "text"

#baseAction: {

name: string

icon?: string

confirmMessage?: string

enabled: bool | *true

bodyTemplate?: string

batchMode: #batchMode | *"individual"

}

#eventAction: {

#baseAction

type: "event"

eventName: string

}

#webhookAction: {

#baseAction

type: "webhook"

url: string

method: #httpMethod | *"POST"

contentType: #contentType | *"none"

headers?: [string]: string

}

#baseAction: {

name: string

icon?: string

confirmMessage?: string

enabled: bool | *true

bodyTemplate?: string

batchMode: "batch" | *"individual"

}

#eventAction: {

#baseAction

type: "event"

eventName: string

}

#webhookAction: {

#baseAction

type: "webhook"

url: string

method: "GET" | *"POST" | "PUT" | "PATCH" | "DELETE"

contentType: *"none" | "json" | "text"

headers?: [string]: string

}

AntoineThebaud · 2026-01-28T11:20:23Z

cue/common/actions.cue

+#itemAction: 
+    (#eventAction & {type: "event"}) |
+    (#webhookAction & {type: "webhook"})


Can be simplified to

Suggested change

#itemAction:

(#eventAction & {type: "event"}) |

(#webhookAction & {type: "webhook"})

#itemAction: #eventAction | #webhookAction

AntoineThebaud · 2026-01-28T11:21:51Z

cue/common/actions.cue

+
+#actions: {
+	enabled: bool | *true
+	actionsList: [#itemAction, ...]


Suggested change

actionsList: [#itemAction, ...]

actionsList: [...#itemAction]

[#itemAction, ...] actually means "a list starting by an itemAction followed by any structs"

AntoineThebaud · 2026-01-28T11:23:15Z

cue/common/actions.cue

+	displayInHeader?: bool | *true
+	displayWithItem?: bool | *true


Do we really want/need to define default values for these optional attributes?

Gladorme

I think item actions are super interesting for embedded usage, maybe a little less for Perses App.

Idea for the future, add a provider for adding supported custom events, it will be useful for autocomplete (who can know all custom events :p) and remove the "custom event" option if there is no custom event supported (like currently in Perses App).

About the webhook, I did not test it, but can we have some CORS issues due to this? Maybe we want to allow to pass by the proxy too (like datasources) at some point?

Gladorme · 2026-01-28T14:28:12Z

plugin-system/src/utils/variables.ts

-  }
-  return matches;
-}
+// Re-export all variable interpolation utilities from @perses-dev/components for backwards compatibility


Any reason(s) to move everything to @perses-dev/components? Circular deps?
Look like more runtime stuff than components to me 👀

And ItemActionsOptionsEditor + SelectionOptionsEditor, I would see them in @perses-dev/components instead.

Gladorme · 2026-01-28T14:38:11Z

plugin-system/src/components/ItemActionsOptionsEditor/ItemActionsOptionsEditor.tsx

+          />
+
+          <Stack direction="row" spacing={2}>
+            <TextField


When I tested manually, when I type something, I lose focus after 1 char. Same issue on all fields of this components :/

Gladorme · 2026-01-28T14:44:04Z

components/src/context/SelectionProvider.tsx

+): SelectionState<T, Id> & { hasContext: boolean } {
+  const ctx = useContext(SelectionContext);
+
+  useEffect(() => {


Not fan of this useEffect, but I guess no others choices. This provider is complex to understand, some comments would be welcomed 😅

Gladorme · 2026-01-28T14:56:53Z

plugin-system/src/components/ItemActionsOptionsEditor/ItemActionsOptionsEditor.tsx

+            {isCollapsed ? <ChevronRight /> : <ChevronDown />}
+          </IconButton>
+
+          <Typography variant="subtitle2">{eventAction.name ?? 'Event Action'}</Typography>


I have the feeling the typo is huge. Can we use the same as colum settings / cell settings?

jgbernalp changed the title ~~Selection provider~~ Selection provider and Selection actions Jan 20, 2026

jgbernalp changed the title ~~Selection provider and Selection actions~~ [FEATURE] Selection provider and Selection actions Jan 20, 2026

jgbernalp changed the title ~~[FEATURE] Selection provider and Selection actions~~ [FEATURE] Selection provider and Item actions Jan 23, 2026

jgbernalp force-pushed the selection-provider branch 4 times, most recently from 249c863 to 9c52f39 Compare January 23, 2026 20:04

jgbernalp marked this pull request as ready for review January 23, 2026 20:10

jgbernalp requested review from a team and AntoineThebaud as code owners January 23, 2026 20:10

jgbernalp requested a review from Gladorme January 23, 2026 20:10

jgbernalp mentioned this pull request Jan 23, 2026

[FEATURE] Selection provider perses/plugins#539

Draft

5 tasks

jgbernalp added 3 commits January 27, 2026 17:43

[FEATURE] add selection provider to panel and optional hook for consu…

80933f0

…mers Signed-off-by: Gabriel Bernal <[email protected]>

[ENHANCEMENT] refactor data fields replacements to support format int…

e0e4326

…erpolation Signed-off-by: Gabriel Bernal <[email protected]>

[FEATURE] add item actions to panel header and table component

dbf69c7

Signed-off-by: Gabriel Bernal <[email protected]>

jgbernalp force-pushed the selection-provider branch from 9c52f39 to dbf69c7 Compare January 27, 2026 16:43

AntoineThebaud reviewed Jan 28, 2026

View reviewed changes

Gladorme reviewed Jan 28, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FEATURE] Selection provider and Item actions #40

[FEATURE] Selection provider and Item actions #40

Uh oh!

jgbernalp commented Jan 20, 2026 •

edited

Loading

Uh oh!

AntoineThebaud left a comment

Uh oh!

AntoineThebaud Jan 28, 2026

Uh oh!

AntoineThebaud Jan 28, 2026

Uh oh!

AntoineThebaud Jan 28, 2026

Uh oh!

AntoineThebaud Jan 28, 2026

Uh oh!

Gladorme left a comment •

edited

Loading

Uh oh!

Gladorme Jan 28, 2026

Uh oh!

Gladorme Jan 28, 2026 •

edited

Loading

Uh oh!

Gladorme Jan 28, 2026

Uh oh!

Gladorme Jan 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	actionsList: [#itemAction, ...]
	actionsList: [...#itemAction]

		displayInHeader?: bool \| *true
		displayWithItem?: bool \| *true

[FEATURE] Selection provider and Item actions #40

Are you sure you want to change the base?

[FEATURE] Selection provider and Item actions #40

Uh oh!

Conversation

jgbernalp commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots

Checklist

UI Changes

Uh oh!

AntoineThebaud left a comment

Choose a reason for hiding this comment

Uh oh!

AntoineThebaud Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

AntoineThebaud Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

AntoineThebaud Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

AntoineThebaud Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Gladorme left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Gladorme Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Gladorme Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Gladorme Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Gladorme Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jgbernalp commented Jan 20, 2026 •

edited

Loading

Gladorme left a comment •

edited

Loading

Gladorme Jan 28, 2026 •

edited

Loading