Skip to content

Commit 6403039

Browse files
trungutttrungutt
authored
Merge pull request #256 from docker/fix-dsiable-that-closes-modal
Fix disabling that closes the Modal
2 parents 7669d98 + 441a2cd commit 6403039

File tree

3 files changed

+109
-72
lines changed

3 files changed

+109
-72
lines changed

‎src/extension/ui/src/components/tabs/ToolCatalog.tsx‎

Lines changed: 73 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,28 @@ import React, { useEffect, useMemo, useState } from 'react';
66
import { CATALOG_LAYOUT_SX } from '../../Constants';
77
import { useCatalogAll } from '../../queries/useCatalog';
88
import Tile from '../tile/Index';
9+
import ConfigurationModal from '../tile/Modal';
10+
import { CatalogItemRichened } from '../../types';
911

1012
interface ToolCatalogProps {
1113
search: string;
1214
client: v1.DockerDesktopClient;
1315
sort: 'name-asc' | 'name-desc';
1416
}
1517

16-
const ToolCatalog: React.FC<ToolCatalogProps> = ({
17-
search,
18-
client,
19-
sort,
20-
}) => {
18+
const ToolCatalog: React.FC<ToolCatalogProps> = ({ search, client, sort }) => {
2119
const { catalogItems, registryLoading } = useCatalogAll(client);
22-
const [expandedEnabled, setExpandedEnabled] = useState(localStorage.getItem('expandedEnabled') !== 'false');
23-
const [expandedNotEnabled, setExpandedNotEnabled] = useState(localStorage.getItem('expandedNotEnabled') !== 'false');
20+
const [expandedEnabled, setExpandedEnabled] = useState(
21+
localStorage.getItem('expandedEnabled') !== 'false',
22+
);
23+
const [expandedNotEnabled, setExpandedNotEnabled] = useState(
24+
localStorage.getItem('expandedNotEnabled') !== 'false',
25+
);
26+
27+
const [showConfigModal, setShowConfigModal] = useState(false);
28+
const [selectedItem, setSelectedItem] = useState<CatalogItemRichened | null>(
29+
null,
30+
);
2431

2532
// Memoize the filtered catalog items to prevent unnecessary recalculations
2633
const all = useMemo(() => {
@@ -30,31 +37,54 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({
3037

3138
return sort === 'name-asc'
3239
? filteredItems.sort((a, b) => {
33-
return a.name.localeCompare(b.name);
34-
})
40+
return a.name.localeCompare(b.name);
41+
})
3542
: sort === 'name-desc'
3643
? filteredItems.sort((a, b) => {
37-
return b.name.localeCompare(a.name);
38-
})
44+
return b.name.localeCompare(a.name);
45+
})
3946
: filteredItems;
4047
}, [catalogItems, search, sort]);
4148
const enabled = all.filter((item) => item.registered);
4249

4350
return (
4451
<>
45-
{(enabled.length > 0) && (
52+
{selectedItem !== null && (
53+
<ConfigurationModal
54+
open={showConfigModal}
55+
onClose={() => setShowConfigModal(false)}
56+
catalogItem={selectedItem}
57+
client={client}
58+
registryLoading={registryLoading}
59+
/>
60+
)}
61+
{enabled.length > 0 && (
4662
<>
4763
<Typography
48-
variant='subtitle2'
49-
sx={{ color: "text.secondary", display: "flex", alignItems: "center", cursor: "pointer", width: 'fit-content' }}
64+
variant="subtitle2"
65+
sx={{
66+
color: 'text.secondary',
67+
display: 'flex',
68+
alignItems: 'center',
69+
cursor: 'pointer',
70+
width: 'fit-content',
71+
}}
5072
onClick={() => {
51-
const newExpanded = !expandedEnabled
73+
const newExpanded = !expandedEnabled;
5274
setExpandedEnabled(newExpanded);
53-
localStorage.setItem('expandedEnabled', JSON.stringify(newExpanded));
54-
}}>
75+
localStorage.setItem(
76+
'expandedEnabled',
77+
JSON.stringify(newExpanded),
78+
);
79+
}}
80+
>
5581
{`Enabled (${enabled.length})`}
56-
{expandedEnabled ? <KeyboardArrowDownIcon fontSize="small" /> : <KeyboardArrowRightIcon fontSize="small" />}
57-
</Typography >
82+
{expandedEnabled ? (
83+
<KeyboardArrowDownIcon fontSize="small" />
84+
) : (
85+
<KeyboardArrowRightIcon fontSize="small" />
86+
)}
87+
</Typography>
5888

5989
<Collapse in={expandedEnabled}>
6090
<Grid2 container spacing={1} sx={CATALOG_LAYOUT_SX}>
@@ -65,6 +95,8 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({
6595
item={catalogItem}
6696
client={client}
6797
registryLoading={registryLoading}
98+
setSelectedItem={setSelectedItem}
99+
setShowConfigModal={setShowConfigModal}
68100
/>
69101
</Grid2>
70102
);
@@ -75,15 +107,29 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({
75107
)}
76108

77109
<Typography
78-
variant='subtitle2'
79-
sx={{ color: "text.secondary", display: "flex", alignItems: "center", cursor: "pointer", width: 'fit-content' }}
110+
variant="subtitle2"
111+
sx={{
112+
color: 'text.secondary',
113+
display: 'flex',
114+
alignItems: 'center',
115+
cursor: 'pointer',
116+
width: 'fit-content',
117+
}}
80118
onClick={() => {
81-
const newExpanded = !expandedNotEnabled
119+
const newExpanded = !expandedNotEnabled;
82120
setExpandedNotEnabled(newExpanded);
83-
localStorage.setItem('expandedNotEnabled', JSON.stringify(newExpanded));
84-
}}>
121+
localStorage.setItem(
122+
'expandedNotEnabled',
123+
JSON.stringify(newExpanded),
124+
);
125+
}}
126+
>
85127
{`All (${all.length})`}
86-
{expandedNotEnabled ? <KeyboardArrowDownIcon fontSize="small" /> : <KeyboardArrowRightIcon fontSize="small" />}
128+
{expandedNotEnabled ? (
129+
<KeyboardArrowDownIcon fontSize="small" />
130+
) : (
131+
<KeyboardArrowRightIcon fontSize="small" />
132+
)}
87133
</Typography>
88134

89135
<Collapse in={expandedNotEnabled}>
@@ -95,6 +141,8 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({
95141
item={catalogItem}
96142
client={client}
97143
registryLoading={registryLoading}
144+
setSelectedItem={setSelectedItem}
145+
setShowConfigModal={setShowConfigModal}
98146
/>
99147
</Grid2>
100148
);

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import hammerIcon from './hammer.svg';
77

88
type BottomProps = {
99
item: CatalogItem;
10-
needsConfiguration: boolean;
1110
};
1211

1312
const Bottom = ({ item }: BottomProps) => {

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

Lines changed: 36 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,26 @@ import { useState } from 'react';
1111

1212
import { useCatalogOperations } from '../../queries/useCatalog';
1313
import { useSecrets } from '../../queries/useSecrets';
14-
import { CatalogItemRichened } from '../../types/catalog';
14+
import type { CatalogItemRichened } from '../../types/catalog';
1515
import Bottom from './Bottom';
1616
import Center from './Center';
17-
import ConfigurationModal from './Modal';
1817
import Top from './Top';
1918

2019
type TileProps = {
2120
item: CatalogItemRichened;
2221
client: v1.DockerDesktopClient;
2322
registryLoading: boolean;
23+
setSelectedItem: (item: CatalogItemRichened) => void;
24+
setShowConfigModal: (show: boolean) => void;
2425
};
2526

26-
const Tile = ({ item, client, registryLoading }: TileProps) => {
27-
const [assignedSecrets] = useState<{ name: string; assigned: boolean }[]>([]);
28-
const [showConfigModal, setShowConfigModal] = useState(false);
27+
const Tile = ({
28+
item,
29+
client,
30+
registryLoading,
31+
setSelectedItem,
32+
setShowConfigModal,
33+
}: TileProps) => {
2934
const { isLoading: secretsLoading } = useSecrets(client);
3035
const { registerCatalogItem, unregisterCatalogItem } =
3136
useCatalogOperations(client);
@@ -39,50 +44,35 @@ const Tile = ({ item, client, registryLoading }: TileProps) => {
3944
);
4045
}
4146

42-
const unAssignedSecrets = assignedSecrets.filter((s) => !s.assigned);
43-
4447
return (
45-
<>
46-
{showConfigModal && (
47-
<ConfigurationModal
48-
open={showConfigModal}
49-
onClose={() => setShowConfigModal(false)}
50-
catalogItem={item}
51-
client={client}
52-
registryLoading={registryLoading}
53-
/>
54-
)}
55-
<Card>
56-
<CardActionArea
57-
sx={{ padding: 1.5 }}
58-
onClick={(e) => {
59-
if ((e.target as HTMLElement).tagName !== 'INPUT') {
60-
setShowConfigModal(true);
48+
<Card>
49+
<CardActionArea
50+
sx={{ padding: 1.5 }}
51+
onClick={(e) => {
52+
if ((e.target as HTMLElement).tagName !== 'INPUT') {
53+
setShowConfigModal(true);
54+
setSelectedItem(item);
55+
}
56+
}}
57+
>
58+
<Top
59+
onToggleRegister={(checked) => {
60+
if (checked) {
61+
registerCatalogItem(item);
62+
} else {
63+
unregisterCatalogItem(item);
6164
}
6265
}}
63-
>
64-
<Top
65-
onToggleRegister={(checked) => {
66-
if (checked) {
67-
registerCatalogItem(item);
68-
} else {
69-
unregisterCatalogItem(item);
70-
}
71-
}}
72-
item={item}
73-
/>
74-
<CardContent sx={(th) => ({ padding: th.spacing(2, 0, 0) })}>
75-
<Stack spacing={2} sx={{ alignItems: 'flex-start' }}>
76-
<Center item={item} />
77-
<Bottom
78-
item={item}
79-
needsConfiguration={Boolean(unAssignedSecrets.length)}
80-
/>
81-
</Stack>
82-
</CardContent>
83-
</CardActionArea>
84-
</Card>
85-
</>
66+
item={item}
67+
/>
68+
<CardContent sx={(th) => ({ padding: th.spacing(2, 0, 0) })}>
69+
<Stack spacing={2} sx={{ alignItems: 'flex-start' }}>
70+
<Center item={item} />
71+
<Bottom item={item} />
72+
</Stack>
73+
</CardContent>
74+
</CardActionArea>
75+
</Card>
8676
);
8777
};
8878

0 commit comments

Comments
 (0)