1
1
import cls from 'classnames' ;
2
2
import React , { useCallback } from 'react' ;
3
3
4
- import { Badge } from '@opensumi/ide-components' ;
4
+ import { Badge , Button , Popover , PopoverTriggerType } from '@opensumi/ide-components' ;
5
5
import { AINativeSettingSectionsId , ILogger , useInjectable } from '@opensumi/ide-core-browser' ;
6
6
import { PreferenceService } from '@opensumi/ide-core-browser/lib/preferences' ;
7
7
import { PreferenceScope , localize } from '@opensumi/ide-core-common' ;
@@ -178,43 +178,60 @@ export const MCPConfigView: React.FC = () => {
178
178
< div key = { server . name } className = { styles . serverItem } >
179
179
< div className = { styles . serverHeader } >
180
180
< div className = { styles . serverTitleRow } >
181
- < h3 className = { styles . serverName } > { server . name } </ h3 >
181
+ < h3 className = { styles . serverName } >
182
+ { server . name }
183
+ < span
184
+ className = { cls ( styles . serverStatusIcon , server . isStarted ? styles . active : styles . inactive ) }
185
+ > </ span >
186
+ </ h3 >
182
187
</ div >
183
188
< div className = { styles . serverActions } >
184
- { server . name !== BUILTIN_MCP_SERVER_NAME && (
185
- < button className = { styles . iconButton } title = 'Edit' onClick = { ( ) => handleEditServer ( server ) } >
186
- < i className = 'codicon codicon-edit' />
187
- </ button >
188
- ) }
189
- < button
190
- className = { styles . iconButton }
191
- title = { server . isStarted ? 'Stop' : 'Start' }
192
- onClick = { ( ) => handleServerControl ( server . name , ! server . isStarted ) }
189
+ < Popover
190
+ id = 'mcp-server-action-popover'
191
+ trigger = { PopoverTriggerType . hover }
192
+ content = {
193
+ server . isStarted ? localize ( 'ai.native.mcp.disable.title' ) : localize ( 'ai.native.mcp.enable.title' )
194
+ }
193
195
>
194
- < i
195
- className = { `codicon ${
196
- loadingServer === server . name
197
- ? 'codicon-loading kt-icon-loading'
198
- : server . isStarted
199
- ? 'codicon-debug-stop'
200
- : 'codicon-debug-start'
201
- } `}
196
+ < Button
197
+ type = 'default'
198
+ className = { cls ( styles . serverActionButton , server . isStarted && styles . active ) }
199
+ onClick = { ( ) => handleServerControl ( server . name , ! server . isStarted ) }
200
+ >
201
+ < i
202
+ className = { `codicon ${
203
+ loadingServer === server . name
204
+ ? 'codicon-loading kt-icon-loading'
205
+ : server . isStarted
206
+ ? 'codicon-check'
207
+ : 'codicon-circle'
208
+ } `}
209
+ />
210
+ < span > { localize ( server . isStarted ? 'ai.native.mcp.enabled' : 'ai.native.mcp.disabled' ) } </ span >
211
+ </ Button >
212
+ </ Popover >
213
+ { server . name !== BUILTIN_MCP_SERVER_NAME && (
214
+ < Button
215
+ type = 'icon'
216
+ iconClass = 'codicon codicon-edit'
217
+ className = { styles . iconButton }
218
+ title = 'Edit'
219
+ onClick = { ( ) => handleEditServer ( server ) }
202
220
/>
203
- </ button >
221
+ ) }
222
+
204
223
{ server . name !== BUILTIN_MCP_SERVER_NAME && (
205
- < button className = { styles . iconButton } title = 'Delete' onClick = { ( ) => handleDeleteServer ( server . name ) } >
206
- < i className = 'codicon codicon-trash' />
207
- </ button >
224
+ < Button
225
+ type = 'icon'
226
+ iconClass = 'codicon codicon-trash'
227
+ className = { styles . iconButton }
228
+ title = 'Delete'
229
+ onClick = { ( ) => handleDeleteServer ( server . name ) }
230
+ />
208
231
) }
209
232
</ div >
210
233
</ div >
211
234
< div className = { styles . serverDetail } >
212
- < div className = { styles . detailRow } >
213
- < span className = { styles . detailLabel } > Status:</ span >
214
- < span className = { `${ styles . serverStatus } ${ server . isStarted ? styles . running : styles . stopped } ` } >
215
- { server . isStarted ? localize ( 'ai.native.mcp.running' ) : localize ( 'ai.native.mcp.stopped' ) }
216
- </ span >
217
- </ div >
218
235
{ server . type && (
219
236
< div className = { styles . detailRow } >
220
237
< span className = { styles . detailLabel } > Type:</ span >
@@ -228,9 +245,9 @@ export const MCPConfigView: React.FC = () => {
228
245
< span className = { styles . detailLabel } > Tools:</ span >
229
246
< span className = { styles . detailContent } >
230
247
{ server . tools . map ( ( tool , index ) => (
231
- < span key = { index } className = { styles . toolTag } >
232
- { tool }
233
- </ span >
248
+ < Badge key = { index } className = { styles . toolTag } title = { tool . description } >
249
+ { tool . name }
250
+ </ Badge >
234
251
) ) }
235
252
</ span >
236
253
</ div >
0 commit comments