[FEATURE] Add test datasource connection button by adrianSepiol · Pull Request #99 · perses/shared

adrianSepiol · 2026-04-07T08:04:04Z

…Button for testing datasource connections

Related pull requests (in order):

Description

Adds a Test Connection button to the datasource editor that validates connectivity before saving. The button is wired through the editor component chain (DatasourceEditorForm → PluginEditor → PluginSpecEditor) where the connection logic is bound to the plugin's healthCheckPath and the current project/dashboard context. As part of this, buildProxyUrl is also migrated to @perses-dev/client, replacing the local implementation in perses/ui/app that will be removed in a companion PR.

Screenshots

In perses/plugins#620

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.

jgbernalp · 2026-07-28T06:43:30Z

+            const existing = draft.proxy.spec.allowedEndpoints ?? [];
+            const alreadyAllowed = existing.some((e) => e.endpointPattern === healthCheckPath && e.method === 'GET');
+            if (!alreadyAllowed) {
+              draft.proxy.spec.allowedEndpoints = [...existing, { endpointPattern: healthCheckPath, method: 'GET' }];


This is inserted as a regex, would it fail it the dots or other reserved characters are not escaped?

jgbernalp · 2026-07-28T06:46:19Z

+  }, [testConnection, successSnackbar, exceptionSnackbar]);
+
+  return (
+    <Button onClick={handleClick} color="info" variant="outlined" {...buttonProps}>


We probably should have a testing... state and block the button while is testing, otherwise rapid clicks can cause multiple snackbars.

jgbernalp · 2026-07-28T06:47:52Z

+    const pluginSpec = spec.plugin.spec;
+
+    if (hasDirectUrl(pluginSpec)) {
+      await fetch(`${pluginSpec.directUrl}${normalizedPath}`, {


should we sanitize this url?, it seems it might contain double slash // if directUrl ends with slash

jgbernalp · 2026-07-28T06:52:17Z

  value: Spec;
  onChange: (next: Spec) => void;
  isReadonly?: boolean;
+  testConnection?: () => Promise<void>;


This seems to apply for all plugins, is there a more concrete interface for the datasources editors?

jgbernalp · 2026-08-11T14:50:32Z

+  );
+}
+
+function hasHTTPProxy(


It seems this function is duplicated in the plugin-system. Should we export it here and re use it?

jgbernalp · 2026-08-11T15:35:11Z

+      const escapedPattern = escapeRegExp(healthCheckPath);
+      const augmentedPluginSpec = hasHTTPProxy(value)
+        ? produce(value, (draft) => {
+            const existing = draft.proxy.spec.allowedEndpoints ?? [];


can draft.proxy.spec be undefined? it seems the guard is only checking the proxy.kind

added additional checks to guard

jgbernalp · 2026-08-11T15:42:09Z

+  testConnection,
+  ...others
+}: DatasourceSpecEditorProps): ReactElement | null {
+  const healthCheckPath = plugin.healthCheckPath;


should we normalize the healthCheckPath before same as is being done when creating the connection function: https://github.com/perses/shared/pull/99/changes#diff-213ce5cb395fb15fbbfba8fc2d90021672b0bc625e22d683f35faf7341cec040R79

I don't think so, we normalize it there because we concatenate it with first part of url, here we just pass it to test function (the one that normalizes)

jgbernalp · 2026-08-11T15:44:09Z

+    const pluginSpec = spec.plugin.spec;
+
+    if (hasDirectUrl(pluginSpec)) {
+      await fetch(`${pluginSpec.directUrl.replace(/\/$/, '')}${normalizedPath}`, {


We should check that the normalized path is not empty, otherwise we will be hitting the current UI which might lead to a successful connection check with an empty url

Changed this code to URL, this way if this is not valid url we will get exception

jgbernalp · 2026-08-11T15:44:52Z

+  it('does not pass testConnection when plugin has no healthCheckPath', async () => {
+    const testConnection = jest.fn();
+    renderComponent({
+      pluginSelection: { type: 'Variable', kind: 'ErnieVariable1' },


This test is not testing the correct plugin, in this case is a Variable plugin

I've added another datasource test plugin without healthcheck path

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

…ht to prevent duplicate calls Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

…h check path Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

…ceSpecEditor component Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

…serting into allowedEndpoints endpointPattern Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

…on validation Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

adrianSepiol marked this pull request as ready for review April 7, 2026 09:30

adrianSepiol requested a review from a team as a code owner April 7, 2026 09:30

adrianSepiol requested a review from AntoineThebaud as a code owner July 27, 2026 12:20

adrianSepiol marked this pull request as draft July 27, 2026 12:51

adrianSepiol force-pushed the add-test-connection-button branch 3 times, most recently from 3df35e7 to 6e06d51 Compare July 27, 2026 14:19

adrianSepiol marked this pull request as ready for review July 27, 2026 14:23

adrianSepiol force-pushed the add-test-connection-button branch from 6e06d51 to bcda582 Compare July 27, 2026 14:31

adrianSepiol changed the title ~~[ENHANCEMENT] Add UnsavedDatasourceStore and DatasourceTestConnection…~~ [FEATURE] Add test datasource connection button Jul 27, 2026

adrianSepiol mentioned this pull request Jul 27, 2026

[BREAKINGCHANGE] Replace local buildProxyUrl with shared implementation from @perses-dev/client perses/perses#4302

Draft

6 tasks

jgbernalp reviewed Jul 28, 2026

View reviewed changes

adrianSepiol force-pushed the add-test-connection-button branch from 45bba07 to 3dc45bf Compare July 28, 2026 16:17

adrianSepiol requested a review from jgbernalp August 11, 2026 08:11

jgbernalp reviewed Aug 11, 2026

View reviewed changes

adrianSepiol added 4 commits August 12, 2026 13:57

[FEATURE] Add test datasource connection button

27391a5

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

[ENHANCEMENT] Disable test connection button while request is in flig…

54a5476

…ht to prevent duplicate calls Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

[BUGFIX] Normalize trailing slash in directUrl before appending healt…

050ec23

…h check path Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

[ENHANCEMENT] Extract datasource testConnection binding into Datasour…

4648d0f

…ceSpecEditor component Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

adrianSepiol added 2 commits August 12, 2026 13:57

[BUGFIX] Escape regex special characters in healthCheckPath before in…

f0a7276

…serting into allowedEndpoints endpointPattern Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

[FEATURE] Add hasHTTPProxy function and tests for datasource connecti…

45c6b62

…on validation Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

adrianSepiol force-pushed the add-test-connection-button branch from 3dc45bf to 45c6b62 Compare August 12, 2026 13:31

Navigation Menu

Uh oh!

[FEATURE] Add test datasource connection button - #99

[FEATURE] Add test datasource connection button#99
adrianSepiol wants to merge 6 commits into
perses:mainfrom
adrianSepiol:add-test-connection-button

adrianSepiol commented Apr 7, 2026 •

edited

Loading

Uh oh!

jgbernalp Jul 28, 2026

Uh oh!

jgbernalp Jul 28, 2026

Uh oh!

jgbernalp Jul 28, 2026

Uh oh!

jgbernalp Jul 28, 2026

Uh oh!

jgbernalp Aug 11, 2026

Uh oh!

jgbernalp Aug 11, 2026

Uh oh!

adrianSepiol Aug 12, 2026

Uh oh!

jgbernalp Aug 11, 2026

Uh oh!

adrianSepiol Aug 12, 2026

Uh oh!

jgbernalp Aug 11, 2026

Uh oh!

adrianSepiol Aug 12, 2026

Uh oh!

jgbernalp Aug 11, 2026

Uh oh!

adrianSepiol Aug 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

adrianSepiol commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots

Checklist

UI Changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

adrianSepiol commented Apr 7, 2026 •

edited

Loading