feat(lightspeed): add MCP servers settings panel

workspaces/lightspeed/.changeset/sixty-chefs-refuse.md

@@ -0,0 +1,13 @@
+---
+'@red-hat-developer-hub/backstage-plugin-lightspeed': minor
+'@red-hat-developer-hub/backstage-plugin-lightspeed-backend': minor
+---
+
+Added the MCP servers selector/settings feature in Lightspeed with backend
+integration for listing servers, per-user token updates, and validation.
+
+In the settings panel, users can review server status, enable or disable
+eligible servers, configure personal tokens, and get inline token validation
+feedback. Token validation now runs automatically after typing stops and shows
+success (`Connection successful`) or error (`Authorization failed. Try again.`)
+before save.

workspaces/lightspeed/packages/app-legacy/e2e-tests/fixtures/mcpServerMocks.ts

@@ -14,6 +14,9 @@
  * limitations under the License.
  */
 
+import type { LightspeedMessages } from '../utils/translations';
+import { formatMcpToolCountStatus } from '../utils/translations';
+
 /**
  * GET /api/lightspeed/mcp-servers body shape (see McpServersSettings McpServerResponse).
  * Use {@link mcpServer} for defaults; override fields per scenario.
@@ -49,20 +52,33 @@ export function mcpServer(
   };
 }
 
+/**
+ * Expected MCP header “selected” line — mirrors McpServersSettings `selectedCount` useMemo
+ * (`enabled && !failed && !tokenRequired`).
+ */
+export function getExpectedMcpSelectedCountForMock(
+  mcpList: McpServersListMock,
+): { selectedCount: number; totalCount: number } {
+  const totalCount = mcpList.servers.length;
+  const selectedCount = mcpList.servers.filter(
+    server => server.enabled && server.hasToken && server.status !== 'error',
+  ).length;
+  return { selectedCount, totalCount };
+}
+
 /**
  * Expected Status column text for a mock row — mirrors McpServersSettings getDisplayStatus +
  * getDisplayDetail.
  */
 export function getExpectedMcpStatusDetailForMock(
   server: McpServerMockEntry,
+  t: LightspeedMessages,
 ): string {
-  // Same branch order as McpServersSettings getDisplayStatus + getDisplayDetail.
-  if (!server.hasToken) return 'Token required';
-  if (!server.enabled) return 'Disabled';
-  if (server.status === 'error') return 'Failed';
-  if (server.status === 'unknown') return 'Unknown';
-  const suffix = server.toolCount === 1 ? 'tool' : 'tools';
-  return `${server.toolCount} ${suffix}`;
+  if (!server.hasToken) return t['mcp.settings.status.tokenRequired'];
+  if (!server.enabled) return t['mcp.settings.status.disabled'];
+  if (server.status === 'error') return t['mcp.settings.status.failed'];
+  if (server.status === 'unknown') return t['mcp.settings.status.unknown'];
+  return formatMcpToolCountStatus(t, server.toolCount);
 }
 
 /** Named presets for Playwright `mockMcpServers(page, scenario)` and panel assertions. */
@@ -155,3 +171,32 @@ export const mcpServerScenarios = {
 
 export const mockedMcpServersResponse: McpServersListMock =
   mcpServerScenarios.default;
+
+/**
+ * Token accepted by e2e route mocks for `POST .../mcp-servers/validate`
+ * (credential check before PATCH).
+ */
+export const E2E_MCP_VALID_TOKEN = 'e2e-mcp-valid-token';
+
+/** One row with `url` set so the configure modal runs credential + server validation. */
+export const tokenCredentialValidationScenario = {
+  servers: [
+    mcpServer('credential-test-mcp', {
+      hasToken: false,
+      toolCount: 0,
+      status: 'unknown',
+      url: 'http://127.0.0.1:7777/mcp',
+    }),
+  ],
+} satisfies McpServersListMock;
+
+/** Token required but no `url` — UI must not call credential validate (shows URL error). */
+export const tokenCredentialNoUrlScenario = {
+  servers: [
+    mcpServer('no-url-mcp', {
+      hasToken: false,
+      toolCount: 0,
+      status: 'unknown',
+    }),
+  ],
+} satisfies McpServersListMock;

workspaces/lightspeed/packages/app-legacy/e2e-tests/fixtures/responses.ts

@@ -94,10 +94,14 @@ export const mockedShields = [
 ];
 
 export {
+  E2E_MCP_VALID_TOKEN,
+  getExpectedMcpSelectedCountForMock,
   getExpectedMcpStatusDetailForMock,
   mcpServer,
   mcpServerScenarios,
   mockedMcpServersResponse,
+  tokenCredentialNoUrlScenario,
+  tokenCredentialValidationScenario,
   type McpServerMockEntry,
   type McpServersListMock,
 } from './mcpServerMocks';

workspaces/lightspeed/packages/app-legacy/e2e-tests/lightspeed.test.ts

@@ -23,7 +23,10 @@
   botResponse,
   moreConversations,
   mockedShields,
+  E2E_MCP_VALID_TOKEN,
   mcpServerScenarios,
+  tokenCredentialNoUrlScenario,
+  tokenCredentialValidationScenario,
   type McpServersListMock,
   thinkingContent,
   assistantResponse,
@@ -59,7 +62,9 @@
   clickMcpServersStatusColumn,
   clickMcpServersNameColumn,
   mcpServersTableBodyRows,
+  type DisplayMode,
 } from './pages/LightspeedPage';
+import { McpConfigureTokenPage } from './pages/McpConfigureTokenPage';
 import {
   uploadFiles,
   uploadAndAssertDuplicate,
@@ -128,10 +133,10 @@
 import {
   LightspeedMessages,
   evaluateMessage,
+  formatMcpToolCountStatus,
   getTranslations,
 } from './utils/translations';
 import { runAccessibilityTests } from './utils/accessibility';
-import { skipUnlessLocales } from './utils/localeSkip';
 
 test.describe('Lightspeed tests', () => {
   const botQuery = 'Please respond';
@@ -213,12 +218,13 @@
       await verifyMcpSettingsPanel(sharedPage, translations, mcpList);
     }
 
-    test.beforeEach(async ({}, testInfo) => {
-      skipUnlessLocales(
-        testInfo,
-        ['en'],
-        'Chatbot MCP settings uses English-only UI strings.',
-      );
+    /** Opens the chatbot and sets display mode before MCP configure-server token flows. */
+    async function openChatbotInDisplayMode(mode: DisplayMode) {
+      await openChatbot(sharedPage);
+      await selectDisplayMode(sharedPage, translations, mode);
+    }
+
+    test.beforeEach(async () => {
       await sharedPage.goto('/');
     });
 
@@ -271,31 +277,172 @@
       await openChatbot(sharedPage);
       await openMcpSettingsPanel(sharedPage, translations);
 
-      const rows = mcpServersTableBodyRows(sharedPage);
+      const rows = mcpServersTableBodyRows(sharedPage, translations);
       await expect(rows.nth(0)).toContainText('alpha-mcp');
       await expect(rows.nth(1)).toContainText('beta-mcp');
 
-      await clickMcpServersNameColumn(sharedPage);
+      await clickMcpServersNameColumn(sharedPage, translations);
       await expect(rows.nth(0)).toContainText('beta-mcp');
       await expect(rows.nth(1)).toContainText('alpha-mcp');
 
-      await closeMcpSettingsPanel(sharedPage);
+      await closeMcpSettingsPanel(sharedPage, translations);
     });
 
     test('Toggle works as expected', async () => {
       const serverName = 'mcp-integration-tools';
       await openChatbot(sharedPage);
       await openMcpSettingsPanel(sharedPage, translations);
 
-      const row = mcpServerRow(sharedPage, serverName);
-      await clickMcpServersStatusColumn(sharedPage);
-      await mcpServerToggle(sharedPage, serverName).click();
-      await expect(row.getByText('Disabled', { exact: true })).toBeVisible();
+      const row = mcpServerRow(sharedPage, serverName, translations);
+      await clickMcpServersStatusColumn(sharedPage, translations);
+      await mcpServerToggle(sharedPage, serverName, translations).click();
+      await expect(
+        row.getByText(translations['mcp.settings.status.disabled'], {
+          exact: true,
+        }),
+      ).toBeVisible();
 
-      await mcpServerToggle(sharedPage, serverName).click();
-      await expect(row.getByText('14 tools', { exact: true })).toBeVisible();
+      await mcpServerToggle(sharedPage, serverName, translations).click();
+      await expect(
+        row.getByText(formatMcpToolCountStatus(translations, 14), {
+          exact: true,
+        }),
+      ).toBeVisible();
 
-      await closeMcpSettingsPanel(sharedPage);
+      await closeMcpSettingsPanel(sharedPage, translations);
+    });
+
+    test.describe('Configure MCP server token', () => {
+      let mcpToken: McpConfigureTokenPage;
+
+      test.beforeEach(() => {
+        mcpToken = new McpConfigureTokenPage(sharedPage, translations);
+      });
+
+      test('Valid token saves and row shows tools — Overlay', async () => {
+        await mcpToken.gotoMcpSettings(
+          tokenCredentialValidationScenario,
+          'Overlay',
+        );
+
+        const serverName = 'credential-test-mcp';
+        await mcpToken.seeRowStatus(
+          serverName,
+          translations['mcp.settings.status.tokenRequired'],
+        );
+
+        await mcpToken.openEditServer(serverName);
+        await mcpToken.typeToken(E2E_MCP_VALID_TOKEN);
+        await mcpToken.save();
+
+        await mcpToken.seeTokenHidden();
+        await mcpToken.seeRowStatus(
+          serverName,
+          formatMcpToolCountStatus(translations, 5),
+        );
+
+        await mcpToken.closeMcpPanel();
+      });
+
+      test('Invalid token then valid token — Dock to window', async () => {
+        await mcpToken.gotoMcpSettings(
+          tokenCredentialValidationScenario,
+          'Dock to window',
+        );
+
+        const serverName = 'credential-test-mcp';
+        await mcpToken.openEditServer(serverName);
+
+        await mcpToken.typeToken('bad-token');
+        await mcpToken.save();
+        await mcpToken.seeMessage(
+          translations['mcp.settings.token.invalidCredentials'],
+        );
+
+        await mcpToken.typeToken(E2E_MCP_VALID_TOKEN);
+        await mcpToken.save();
+        await mcpToken.seeTokenHidden();
+        await mcpToken.seeRowStatus(
+          serverName,
+          formatMcpToolCountStatus(translations, 5),
+        );
+
+        await mcpToken.closeMcpPanel();
+      });
+
+      test('Cancel discards without saving — Fullscreen', async () => {
+        await mcpToken.gotoMcpSettings(
+          tokenCredentialValidationScenario,
+          'Fullscreen',
+        );
+
+        const serverName = 'credential-test-mcp';
+        await mcpToken.openEditServer(serverName);
+        await mcpToken.typeToken('draft-token');
+        await mcpToken.cancel();
+
+        await mcpToken.seeModalClosed();
+        await mcpToken.seeRowStatus(
+          serverName,
+          translations['mcp.settings.status.tokenRequired'],
+        );
+
+        await mcpToken.closeMcpPanel();
+      });
+
+      test('Server validation failure shows error — Overlay', async () => {
+        await mcpToken.gotoMcpSettings(
+          tokenCredentialValidationScenario,
+          'Overlay',
+          {
+            failServerValidateFor: 'credential-test-mcp',
+            failServerValidateError:
+              translations['mcp.settings.token.validationFailed'],
+          },
+        );
+
+        const serverName = 'credential-test-mcp';
+        await mcpToken.openEditServer(serverName);
+        await mcpToken.typeToken(E2E_MCP_VALID_TOKEN);
+        await mcpToken.save();
+
+        await mcpToken.seeMessage(
+          translations['mcp.settings.token.validationFailed'],
+        );
+        await mcpToken.cancel();
+        await mcpToken.closeMcpPanel();
+      });
+
+      test('Missing server URL shows error — Dock to window', async () => {
+        await mcpToken.gotoMcpSettings(
+          tokenCredentialNoUrlScenario,
+          'Dock to window',
+        );
+
+        const serverName = 'no-url-mcp';
+        await mcpToken.openEditServer(serverName);
+        await mcpToken.typeToken(E2E_MCP_VALID_TOKEN);
+        await mcpToken.save();
+
+        await mcpToken.seeMessage(
+          translations['mcp.settings.token.urlUnavailableForValidation'],
+        );
+        await mcpToken.cancel();
+        await mcpToken.closeMcpPanel();
+      });
+
+      test('Clear token input empties PAT — Fullscreen', async () => {
+        await mcpToken.gotoMcpSettings(
+          tokenCredentialNoUrlScenario,
+          'Fullscreen',
+        );
+
+        await mcpToken.openEditServer('no-url-mcp');
+        await mcpToken.typeThenClearToken('e2e-draft-personal-access-token');
+
+        await mcpToken.cancel();
+        await mcpToken.closeMcpPanel();
+      });
     });
   });