feat(lightspeed): add MCP servers settings panel#2582
Open
ciiay wants to merge 12 commits intoredhat-developer:mainfrom
Open
feat(lightspeed): add MCP servers settings panel#2582ciiay wants to merge 12 commits intoredhat-developer:mainfrom
ciiay wants to merge 12 commits intoredhat-developer:mainfrom
Conversation
Missing ChangesetsThe following package(s) are changed by this PR but do not have a changeset:
See CONTRIBUTING.md for more information about how to add changesets. Changed Packages
|
ciiay
force-pushed
the
rhidp-12076-add-mcp-servers-page
branch
3 times, most recently
from
4d9b9ea to
dec2e83
Compare
ciiay
requested review from
a team,
karthikjeeyar,
rohitkrai03 and
yangcao77
as code owners
Review Summary by QodoAdd MCP servers settings panel with management UI
WalkthroughsDescription• Add MCP servers settings panel with table UI for managing servers • Implement network error handling with detailed error messages • Add Bearer token validation and formatting in MCP server validator • Support fullscreen and embedded layout modes for settings panel • Add PatternFly React Table dependency for server list display Diagramflowchart LR
A["MCP Server Validator"] -->|Enhanced Error Handling| B["Network Error Messages"]
A -->|Token Formatting| C["Bearer Token Validation"]
D["LightspeedChat Component"] -->|Settings State| E["MCP Settings Panel"]
E -->|Display| F["MCP Servers Table"]
D -->|Layout Modes| G["Fullscreen/Embedded View"]
H["LightspeedChatBoxHeader"] -->|Settings Click| E
File Changes1. workspaces/lightspeed/plugins/lightspeed-backend/src/service/mcp-server-validator.ts
|
Code Review by Qodo
1.
|
![rhdh-qodo-merge[bot]](https://avatars.githubusercontent.com/in/1961108?s=60&v=4){kind=small}
Comment on lines
+211
to
+216
| const getDisplayStatus = (server: McpServer): ServerStatus => { | ||
| if (!server.enabled) return 'disabled'; | ||
| if (!server.hasToken) return 'tokenRequired'; | ||
| if (server.status === 'error') return 'failed'; | ||
| if (server.status === 'connected') return 'ok'; | ||
| return 'unknown'; |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Comment on lines
+478
to
+565
| <Tbody> | ||
| {isLoading && ( | ||
| <Tr> | ||
| <Td colSpan={4}>Loading MCP servers...</Td> | ||
| </Tr> | ||
| )} | ||
| {sortedServers.map(server => { | ||
| const displayStatus = getDisplayStatus(server); | ||
| const displayDetail = getDisplayDetail(server, displayStatus); | ||
| let statusClass = classes.statusWarn; | ||
| if (displayStatus === 'ok') { | ||
| statusClass = classes.statusOk; | ||
| } else if (displayStatus === 'tokenRequired') { | ||
| statusClass = classes.statusToken; | ||
| } else if (displayStatus === 'disabled') { | ||
| statusClass = classes.statusDisabled; | ||
| } | ||
|
|
||
| return ( | ||
| <Tr key={server.id}> | ||
| <Td width={10} className={classes.toggleCell}> | ||
| {(() => { | ||
| const isUnavailable = | ||
| displayStatus === 'failed' || | ||
| displayStatus === 'tokenRequired'; | ||
| const isChecked = isUnavailable ? false : server.enabled; | ||
| const isRowSaving = Boolean(isSaving[server.name]); | ||
|
|
||
| return ( | ||
| <Switch | ||
| id={`mcp-switch-${server.id}`} | ||
| aria-label={`Toggle ${server.name}`} | ||
| isChecked={isChecked} | ||
| isDisabled={isUnavailable || isRowSaving} | ||
| onChange={(_event, checked) => { | ||
| patchServer(server.name, { enabled: checked }); | ||
| }} | ||
| /> | ||
| ); | ||
| })()} | ||
| </Td> | ||
| <Td | ||
| width={35} | ||
| className={`${classes.rowName} ${classes.nameCell}`} | ||
| > | ||
| <Typography component="span" className={classes.nameValue}> | ||
| {server.name} | ||
| </Typography> | ||
| </Td> | ||
| <Td width={40} className={classes.statusColumnCell}> | ||
| <div className={classes.statusCell}> | ||
| {getStatusIcon(displayStatus, statusClass)} | ||
| {displayStatus === 'failed' ? ( | ||
| <Tooltip | ||
| content={ | ||
| server.validationError ?? | ||
| 'Validation failed. Check server URL and token.' | ||
| } | ||
| > | ||
| <Typography | ||
| component="span" | ||
| className={classes.statusValue} | ||
| > | ||
| {displayDetail} | ||
| </Typography> | ||
| </Tooltip> | ||
| ) : ( | ||
| <Typography | ||
| component="span" | ||
| className={classes.statusValue} | ||
| > | ||
| {displayDetail} | ||
| </Typography> | ||
| )} | ||
| </div> | ||
| </Td> | ||
| <Td width={15} isActionCell style={{ textAlign: 'right' }}> | ||
| <Button | ||
| aria-label={`Edit ${server.name}`} | ||
| icon={<ModeEditOutlineOutlinedIcon fontSize="small" />} | ||
| variant="plain" | ||
| className={classes.actionButton} | ||
| onClick={onEditClick} | ||
| /> | ||
| </Td> | ||
| </Tr> | ||
| ); | ||
| })} |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Comment on lines
+109
to
116
| const trimmedToken = token.trim(); | ||
| const authorizationHeader = /^Bearer\s+/i.test(trimmedToken) | ||
| ? trimmedToken | ||
| : `Bearer ${trimmedToken}`; | ||
| const headers: Record<string, string> = { | ||
| 'Content-Type': 'application/json', | ||
| Authorization: `${token}`, | ||
| Authorization: authorizationHeader, | ||
| Accept: 'application/json, text/event-stream', |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Comment on lines
+291
to
+346
| const validateServer = useCallback( | ||
| async (serverName: string) => { | ||
| const baseUrl = getBaseUrl(); | ||
| const data = await fetchJson<McpServersValidateResponse>( | ||
| `${baseUrl}/mcp-servers/${encodeURIComponent(serverName)}/validate`, | ||
| { | ||
| method: 'POST', | ||
| }, | ||
| ); | ||
|
|
||
| setServers(prev => | ||
| prev.map(server => | ||
| server.name === serverName | ||
| ? { | ||
| ...server, | ||
| status: data.status, | ||
| toolCount: data.toolCount, | ||
| validationError: | ||
| data.status === 'error' | ||
| ? (data.validation?.error ?? 'Validation failed') | ||
| : undefined, | ||
| } | ||
| : server, | ||
| ), | ||
| ); | ||
| }, | ||
| [fetchJson, getBaseUrl], | ||
| ); | ||
|
|
||
| const loadServers = useCallback(async () => { | ||
| setIsLoading(true); | ||
| setError(null); | ||
| try { | ||
| const baseUrl = getBaseUrl(); | ||
| const data = await fetchJson<McpServersListResponse>( | ||
| `${baseUrl}/mcp-servers`, | ||
| ); | ||
| const uiServers = (data.servers ?? []).map(server => toUiServer(server)); | ||
| setServers(uiServers); | ||
|
|
||
| const serversToValidate = uiServers.filter(server => server.hasToken); | ||
| void Promise.allSettled( | ||
| serversToValidate.map(async server => { | ||
| try { | ||
| await validateServer(server.name); | ||
| } catch (validationError) { | ||
| setError( | ||
| prev => | ||
| prev ?? | ||
| (validationError instanceof Error | ||
| ? validationError.message | ||
| : `Failed to validate ${server.name}`), | ||
| ); | ||
| } | ||
| }), | ||
| ); |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
ciiay
force-pushed
the
rhidp-12076-add-mcp-servers-page
branch
from
aa21675 to
50cbb36
Compare
debsmita1
requested changes
Apr 2, 2026
workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedChatBoxHeader.tsx
Outdated
Show resolved
Hide resolved
This comment was marked as resolved.
This comment was marked as resolved.
maysunfaisal
reviewed
Apr 2, 2026
| jest.clearAllMocks(); | ||
| }); | ||
|
|
||
| it('tries raw token first, then falls back to Bearer on 401/403', async () => { |
Contributor
There was a problem hiding this comment.
I have added tests related to the Bearer issue on MCP Server Validation with #2671
We are always prepending Bearer, so raw token will never be used to auth with a MCP Server, you can see the comment on my PR here https://github.com/redhat-developer/rhdh-plugins/pull/2671/changes#diff-8573ea31dc3990a1eab86a5f321d47a7b95b4c7574c7092b90ca1c5203cf1178R35
ciiay
force-pushed
the
rhidp-12076-add-mcp-servers-page
branch
from
455ea69 to
a213278
Compare
Member
Author
|
Hi @debsmita1 , thanks for the review. Good callout, currently the reason is displayed in the Status cell, but it's kind of far from the toggle button, so I added a tooltip to display the same. The Edit button will be ready in my very next PR(#2657 ) for RHIDP-12079. |
Signed-off-by: Yi Cai <yicai@redhat.com>
Signed-off-by: Yi Cai <yicai@redhat.com>
Signed-off-by: Yi Cai <yicai@redhat.com>
Signed-off-by: Yi Cai <yicai@redhat.com>
Signed-off-by: Yi Cai <yicai@redhat.com>
Signed-off-by: Yi Cai <yicai@redhat.com>
Signed-off-by: Yi Cai <yicai@redhat.com>
Signed-off-by: Yi Cai <yicai@redhat.com>
Signed-off-by: Yi Cai <yicai@redhat.com>
Signed-off-by: Yi Cai <yicai@redhat.com>
Signed-off-by: Yi Cai <yicai@redhat.com>
ciiay
force-pushed
the
rhidp-12076-add-mcp-servers-page
branch
from
ef30077 to
98a7a23
Compare
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Hey, I just made a Pull Request!
For RHIDP-12076
Changeset and documentation updates will be included in the following pr for RHIDP-12079.
✔️ Checklist
rhidp_12076.mp4
How to test
run.yamllightspeed-stack.yamlas following: