Skip to content

Commit 96b597f

Browse files
trungutttrungutt
committed
Fix spacing
Signed-off-by: Trung Nguyen <[email protected]>
1 parent 7b67bb0 commit 96b597f

File tree

2 files changed

+88
-88
lines changed

2 files changed

+88
-88
lines changed

‎src/extension/ui/src/components/tile/ConfigEditor.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ const ConfigEditor = ({
8181
}
8282

8383
return (
84-
<Stack spacing={2}>
84+
<Stack spacing={1}>
8585
<Typography variant="subtitle2">Parameters</Typography>
8686
<Stack>
8787
{Object.keys(flattenedConfig).map((key: string) => {

‎src/extension/ui/src/components/tile/Modal.tsx‎

Lines changed: 87 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import {
3030
TextField,
3131
Tooltip,
3232
Typography,
33-
useTheme
33+
useTheme,
3434
} from '@mui/material';
3535
import { useEffect, useRef, useState } from 'react';
3636
import {
@@ -299,7 +299,8 @@ const ConfigurationModal = ({
299299
<Link
300300
onClick={() =>
301301
client.host.openExternal(
302-
`${catalogItem.readme
302+
`${
303+
catalogItem.readme
303304
}#tool-${tool.name.replaceAll(' ', '-')}` || ''
304305
)
305306
}
@@ -328,7 +329,7 @@ const ConfigurationModal = ({
328329
>
329330
<Stack direction="column" spacing={2}>
330331
<ConfigEditor catalogItem={catalogItem} client={client} />
331-
<Stack>
332+
<Stack spacing={1}>
332333
<Typography variant="subtitle2">Secrets</Typography>
333334
{!ddInfo && !ddInfoLoading && (
334335
<Alert severity="error">
@@ -340,105 +341,104 @@ const ConfigurationModal = ({
340341
{getUnsupportedSecretMessage(ddInfo?.parsedVersion)}
341342
</Alert>
342343
)}
343-
{ddInfo?.hasSecretSupport &&
344-
catalogItem.secrets &&
345-
catalogItem.secrets?.length > 0 ? (
346-
catalogItem.secrets.map((secret, index) => {
347-
const secretEdited =
348-
(secret.assigned &&
349-
localSecrets[secret.name] !==
350-
ASSIGNED_SECRET_PLACEHOLDER) ||
351-
(!secret.assigned &&
352-
localSecrets[secret.name] !== '');
353-
return (
354-
<Stack
355-
key={secret.name}
356-
direction="row"
357-
spacing={2}
358-
sx={{
359-
alignItems: 'center',
360-
}}
361-
>
362-
<TextField
363-
size="small"
364-
inputRef={(element) =>
365-
(inputRefs.current[index] = element)
366-
}
367-
disabled={secret.assigned}
344+
<Stack>
345+
{ddInfo?.hasSecretSupport &&
346+
catalogItem.secrets &&
347+
catalogItem.secrets?.length > 0 &&
348+
catalogItem.secrets.map((secret, index) => {
349+
const secretEdited =
350+
(secret.assigned &&
351+
localSecrets[secret.name] !==
352+
ASSIGNED_SECRET_PLACEHOLDER) ||
353+
(!secret.assigned &&
354+
localSecrets[secret.name] !== '');
355+
return (
356+
<Stack
368357
key={secret.name}
369-
label={secret.name}
370-
value={localSecrets[secret.name]}
371-
fullWidth
372-
onChange={(e) => {
373-
setLocalSecrets({
374-
...localSecrets,
375-
[secret.name]: e.target.value,
376-
});
358+
direction="row"
359+
spacing={2}
360+
sx={{
361+
alignItems: 'center',
377362
}}
378-
type="password"
379-
/>
380-
{secret.assigned && !secretEdited && (
381-
<IconButton
363+
>
364+
<TextField
382365
size="small"
383-
onClick={() => {
366+
inputRef={(element) =>
367+
(inputRefs.current[index] = element)
368+
}
369+
disabled={secret.assigned}
370+
key={secret.name}
371+
label={secret.name}
372+
value={localSecrets[secret.name]}
373+
fullWidth
374+
onChange={(e) => {
384375
setLocalSecrets({
385376
...localSecrets,
386-
[secret.name]: '',
387-
});
388-
// We need to enable the input to be able to focus on it
389-
inputRefs.current[index].disabled = false;
390-
inputRefs.current[index].focus();
391-
mutateSecret.mutateAsync({
392-
name: secret.name,
393-
value: undefined,
394-
policies: [MCP_POLICY_NAME],
377+
[secret.name]: e.target.value,
395378
});
396379
}}
397-
>
398-
<EditOutlinedIcon fontSize="small" />
399-
</IconButton>
400-
)}
401-
{secretEdited && (
402-
<Stack direction="row" spacing={1}>
403-
<IconButton
404-
size="small"
405-
onClick={async () => {
406-
await mutateSecret.mutateAsync({
407-
name: secret.name,
408-
value: localSecrets[secret.name]!,
409-
policies: [MCP_POLICY_NAME],
410-
});
411-
}}
412-
>
413-
<CheckOutlined
414-
fontSize="small"
415-
sx={{ color: 'success.main' }}
416-
/>
417-
</IconButton>
380+
type="password"
381+
/>
382+
{secret.assigned && !secretEdited && (
418383
<IconButton
419384
size="small"
420-
onClick={async () => {
385+
onClick={() => {
421386
setLocalSecrets({
422387
...localSecrets,
423-
[secret.name]: secret.assigned
424-
? ASSIGNED_SECRET_PLACEHOLDER
425-
: '',
388+
[secret.name]: '',
389+
});
390+
// We need to enable the input to be able to focus on it
391+
inputRefs.current[index].disabled = false;
392+
inputRefs.current[index].focus();
393+
mutateSecret.mutateAsync({
394+
name: secret.name,
395+
value: undefined,
396+
policies: [MCP_POLICY_NAME],
426397
});
427398
}}
428399
>
429-
<CloseOutlined
430-
fontSize="small"
431-
sx={{ color: 'error.main' }}
432-
/>
400+
<EditOutlinedIcon fontSize="small" />
433401
</IconButton>
434-
</Stack>
435-
)}
436-
</Stack>
437-
);
438-
})
439-
) : (
440-
<Typography>No secrets available.</Typography>
441-
)}
402+
)}
403+
{secretEdited && (
404+
<Stack direction="row" spacing={1}>
405+
<IconButton
406+
size="small"
407+
onClick={async () => {
408+
await mutateSecret.mutateAsync({
409+
name: secret.name,
410+
value: localSecrets[secret.name]!,
411+
policies: [MCP_POLICY_NAME],
412+
});
413+
}}
414+
>
415+
<CheckOutlined
416+
fontSize="small"
417+
sx={{ color: 'success.main' }}
418+
/>
419+
</IconButton>
420+
<IconButton
421+
size="small"
422+
onClick={async () => {
423+
setLocalSecrets({
424+
...localSecrets,
425+
[secret.name]: secret.assigned
426+
? ASSIGNED_SECRET_PLACEHOLDER
427+
: '',
428+
});
429+
}}
430+
>
431+
<CloseOutlined
432+
fontSize="small"
433+
sx={{ color: 'error.main' }}
434+
/>
435+
</IconButton>
436+
</Stack>
437+
)}
438+
</Stack>
439+
);
440+
})}
441+
</Stack>
442442
</Stack>
443443
</Stack>
444444
</Stack>

0 commit comments

Comments
 (0)