Skip to content

Commit 29029c0

Browse files
trungutttrungutt
committed
Hide configuration if there is no configuration
Signed-off-by: Trung Nguyen <[email protected]>
1 parent 2a7cdea commit 29029c0

File tree

1 file changed

+112
-106
lines changed
  • src/extension/ui/src/components/tile

1 file changed

+112
-106
lines changed

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

Lines changed: 112 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import useDDInfo from '../../queries/useDDInfo';
4444
import { useSecrets } from '../../queries/useSecrets';
4545
import { CatalogItemRichened } from '../../types/catalog';
4646
import ConfigEditor from './ConfigEditor';
47+
import { isEmpty } from 'lodash-es';
4748

4849
interface TabPanelProps {
4950
children?: React.ReactNode;
@@ -141,8 +142,7 @@ const ConfigurationModal = ({
141142
};
142143

143144
const contributesNoConfigOrSecrets =
144-
(!catalogItem.configSchema || catalogItem.configSchema.length === 0) &&
145-
(!catalogItem.secrets || catalogItem.secrets.length === 0);
145+
isEmpty(catalogItem.configSchema) && isEmpty(catalogItem.secrets);
146146

147147
if (secretsLoading || registryLoading || configLoading || !localSecrets) {
148148
return null;
@@ -305,7 +305,8 @@ const ConfigurationModal = ({
305305
<Link
306306
onClick={() =>
307307
client.host.openExternal(
308-
`${catalogItem.readme
308+
`${
309+
catalogItem.readme
309310
}#tool-${tool.name.replaceAll(' ', '-')}` || ''
310311
)
311312
}
@@ -335,117 +336,122 @@ const ConfigurationModal = ({
335336
>
336337
<Stack direction="column" spacing={2}>
337338
<ConfigEditor catalogItem={catalogItem} client={client} />
338-
<Stack spacing={1}>
339-
<Typography variant="subtitle2">Secrets</Typography>
340-
{!ddInfo && !ddInfoLoading && (
341-
<Alert severity="error">
342-
Failed to get Docker Desktop version
343-
</Alert>
344-
)}
345-
{ddInfo && !ddInfo?.hasSecretSupport && (
346-
<Alert severity="error">
347-
{getUnsupportedSecretMessage(ddInfo?.parsedVersion)}
348-
</Alert>
349-
)}
350-
<Stack>
351-
{ddInfo?.hasSecretSupport &&
352-
catalogItem.secrets &&
353-
catalogItem.secrets?.length > 0 &&
354-
catalogItem.secrets.map((secret, index) => {
355-
const secretEdited =
356-
(secret.assigned &&
357-
localSecrets[secret.name] !==
358-
ASSIGNED_SECRET_PLACEHOLDER) ||
359-
(!secret.assigned &&
360-
localSecrets[secret.name] !== '');
361-
return (
362-
<Stack
363-
key={secret.name}
364-
direction="row"
365-
spacing={2}
366-
sx={{
367-
alignItems: 'center',
368-
}}
369-
>
370-
<TextField
371-
size="small"
372-
inputRef={(element) =>
373-
(inputRefs.current[index] = element)
374-
}
375-
disabled={secret.assigned}
376-
key={secret.name}
377-
label={secret.name}
378-
value={localSecrets[secret.name]}
379-
fullWidth
380-
onChange={(e) => {
381-
setLocalSecrets({
382-
...localSecrets,
383-
[secret.name]: e.target.value,
384-
});
385-
}}
386-
type="password"
387-
/>
388-
{secret.assigned && !secretEdited && (
389-
<IconButton
390-
size="small"
391-
onClick={() => {
392-
setLocalSecrets({
393-
...localSecrets,
394-
[secret.name]: '',
395-
});
396-
// We need to enable the input to be able to focus on it
397-
inputRefs.current[index].disabled = false;
398-
inputRefs.current[index].focus();
399-
mutateSecret.mutateAsync({
400-
name: secret.name,
401-
value: undefined,
402-
policies: [MCP_POLICY_NAME],
403-
});
339+
{ddInfo?.hasSecretSupport &&
340+
catalogItem.secrets &&
341+
catalogItem.secrets?.length > 0 && (
342+
<Stack spacing={1}>
343+
<Typography variant="subtitle2">Secrets</Typography>
344+
{!ddInfo && !ddInfoLoading && (
345+
<Alert severity="error">
346+
Failed to get Docker Desktop version
347+
</Alert>
348+
)}
349+
{ddInfo && !ddInfo?.hasSecretSupport && (
350+
<Alert severity="error">
351+
{getUnsupportedSecretMessage(ddInfo?.parsedVersion)}
352+
</Alert>
353+
)}
354+
<Stack>
355+
{ddInfo?.hasSecretSupport &&
356+
catalogItem.secrets &&
357+
catalogItem.secrets?.length > 0 &&
358+
catalogItem.secrets.map((secret, index) => {
359+
const secretEdited =
360+
(secret.assigned &&
361+
localSecrets[secret.name] !==
362+
ASSIGNED_SECRET_PLACEHOLDER) ||
363+
(!secret.assigned &&
364+
localSecrets[secret.name] !== '');
365+
return (
366+
<Stack
367+
key={secret.name}
368+
direction="row"
369+
spacing={2}
370+
sx={{
371+
alignItems: 'center',
404372
}}
405373
>
406-
<EditOutlinedIcon fontSize="small" />
407-
</IconButton>
408-
)}
409-
{secretEdited && (
410-
<Stack direction="row" spacing={1}>
411-
<IconButton
412-
size="small"
413-
onClick={async () => {
414-
await mutateSecret.mutateAsync({
415-
name: secret.name,
416-
value: localSecrets[secret.name]!,
417-
policies: [MCP_POLICY_NAME],
418-
});
419-
}}
420-
>
421-
<CheckOutlined
422-
fontSize="small"
423-
sx={{ color: 'success.main' }}
424-
/>
425-
</IconButton>
426-
<IconButton
374+
<TextField
427375
size="small"
428-
onClick={async () => {
376+
inputRef={(element) =>
377+
(inputRefs.current[index] = element)
378+
}
379+
disabled={secret.assigned}
380+
key={secret.name}
381+
label={secret.name}
382+
value={localSecrets[secret.name]}
383+
fullWidth
384+
onChange={(e) => {
429385
setLocalSecrets({
430386
...localSecrets,
431-
[secret.name]: secret.assigned
432-
? ASSIGNED_SECRET_PLACEHOLDER
433-
: '',
387+
[secret.name]: e.target.value,
434388
});
435389
}}
436-
>
437-
<CloseOutlined
438-
fontSize="small"
439-
sx={{ color: 'error.main' }}
440-
/>
441-
</IconButton>
390+
type="password"
391+
/>
392+
{secret.assigned && !secretEdited && (
393+
<IconButton
394+
size="small"
395+
onClick={() => {
396+
setLocalSecrets({
397+
...localSecrets,
398+
[secret.name]: '',
399+
});
400+
// We need to enable the input to be able to focus on it
401+
inputRefs.current[index].disabled =
402+
false;
403+
inputRefs.current[index].focus();
404+
mutateSecret.mutateAsync({
405+
name: secret.name,
406+
value: undefined,
407+
policies: [MCP_POLICY_NAME],
408+
});
409+
}}
410+
>
411+
<EditOutlinedIcon fontSize="small" />
412+
</IconButton>
413+
)}
414+
{secretEdited && (
415+
<Stack direction="row" spacing={1}>
416+
<IconButton
417+
size="small"
418+
onClick={async () => {
419+
await mutateSecret.mutateAsync({
420+
name: secret.name,
421+
value: localSecrets[secret.name]!,
422+
policies: [MCP_POLICY_NAME],
423+
});
424+
}}
425+
>
426+
<CheckOutlined
427+
fontSize="small"
428+
sx={{ color: 'success.main' }}
429+
/>
430+
</IconButton>
431+
<IconButton
432+
size="small"
433+
onClick={async () => {
434+
setLocalSecrets({
435+
...localSecrets,
436+
[secret.name]: secret.assigned
437+
? ASSIGNED_SECRET_PLACEHOLDER
438+
: '',
439+
});
440+
}}
441+
>
442+
<CloseOutlined
443+
fontSize="small"
444+
sx={{ color: 'error.main' }}
445+
/>
446+
</IconButton>
447+
</Stack>
448+
)}
442449
</Stack>
443-
)}
444-
</Stack>
445-
);
446-
})}
447-
</Stack>
448-
</Stack>
450+
);
451+
})}
452+
</Stack>
453+
</Stack>
454+
)}
449455
</Stack>
450456
</Stack>
451457
</TabPanel>

0 commit comments

Comments
 (0)