Skip to content

Commit 580eac5

Browse files
dgageotdgageot
committed
Revert "Fix disabling that closes the Modal"
This reverts commit 441a2cd.
1 parent 793df95 commit 580eac5

File tree

3 files changed

+72
-109
lines changed

3 files changed

+72
-109
lines changed

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

Lines changed: 25 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,21 @@ 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';
119

1210
interface ToolCatalogProps {
1311
search: string;
1412
client: v1.DockerDesktopClient;
1513
sort: 'name-asc' | 'name-desc';
1614
}
1715

18-
const ToolCatalog: React.FC<ToolCatalogProps> = ({ search, client, sort }) => {
16+
const ToolCatalog: React.FC<ToolCatalogProps> = ({
17+
search,
18+
client,
19+
sort,
20+
}) => {
1921
const { catalogItems, registryLoading } = useCatalogAll(client);
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-
);
22+
const [expandedEnabled, setExpandedEnabled] = useState(localStorage.getItem('expandedEnabled') !== 'false');
23+
const [expandedNotEnabled, setExpandedNotEnabled] = useState(localStorage.getItem('expandedNotEnabled') !== 'false');
3124

3225
// Memoize the filtered catalog items to prevent unnecessary recalculations
3326
const all = useMemo(() => {
@@ -37,54 +30,31 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({ search, client, sort }) => {
3730

3831
return sort === 'name-asc'
3932
? filteredItems.sort((a, b) => {
40-
return a.name.localeCompare(b.name);
41-
})
33+
return a.name.localeCompare(b.name);
34+
})
4235
: sort === 'name-desc'
4336
? filteredItems.sort((a, b) => {
44-
return b.name.localeCompare(a.name);
45-
})
37+
return b.name.localeCompare(a.name);
38+
})
4639
: filteredItems;
4740
}, [catalogItems, search, sort]);
4841
const enabled = all.filter((item) => item.registered);
4942

5043
return (
5144
<>
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 && (
45+
{(enabled.length > 0) && (
6246
<>
6347
<Typography
64-
variant="subtitle2"
65-
sx={{
66-
color: 'text.secondary',
67-
display: 'flex',
68-
alignItems: 'center',
69-
cursor: 'pointer',
70-
width: 'fit-content',
71-
}}
48+
variant='subtitle2'
49+
sx={{ color: "text.secondary", display: "flex", alignItems: "center", cursor: "pointer", width: 'fit-content' }}
7250
onClick={() => {
73-
const newExpanded = !expandedEnabled;
51+
const newExpanded = !expandedEnabled
7452
setExpandedEnabled(newExpanded);
75-
localStorage.setItem(
76-
'expandedEnabled',
77-
JSON.stringify(newExpanded),
78-
);
79-
}}
80-
>
53+
localStorage.setItem('expandedEnabled', JSON.stringify(newExpanded));
54+
}}>
8155
{`Enabled (${enabled.length})`}
82-
{expandedEnabled ? (
83-
<KeyboardArrowDownIcon fontSize="small" />
84-
) : (
85-
<KeyboardArrowRightIcon fontSize="small" />
86-
)}
87-
</Typography>
56+
{expandedEnabled ? <KeyboardArrowDownIcon fontSize="small" /> : <KeyboardArrowRightIcon fontSize="small" />}
57+
</Typography >
8858

8959
<Collapse in={expandedEnabled}>
9060
<Grid2 container spacing={1} sx={CATALOG_LAYOUT_SX}>
@@ -95,8 +65,6 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({ search, client, sort }) => {
9565
item={catalogItem}
9666
client={client}
9767
registryLoading={registryLoading}
98-
setSelectedItem={setSelectedItem}
99-
setShowConfigModal={setShowConfigModal}
10068
/>
10169
</Grid2>
10270
);
@@ -107,29 +75,15 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({ search, client, sort }) => {
10775
)}
10876

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

13589
<Collapse in={expandedNotEnabled}>
@@ -141,8 +95,6 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({ search, client, sort }) => {
14195
item={catalogItem}
14296
client={client}
14397
registryLoading={registryLoading}
144-
setSelectedItem={setSelectedItem}
145-
setShowConfigModal={setShowConfigModal}
14698
/>
14799
</Grid2>
148100
);

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

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

88
type BottomProps = {
99
item: CatalogItem;
10+
needsConfiguration: boolean;
1011
};
1112

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

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

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

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

1920
type TileProps = {
2021
item: CatalogItemRichened;
2122
client: v1.DockerDesktopClient;
2223
registryLoading: boolean;
23-
setSelectedItem: (item: CatalogItemRichened) => void;
24-
setShowConfigModal: (show: boolean) => void;
2524
};
2625

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

42+
const unAssignedSecrets = assignedSecrets.filter((s) => !s.assigned);
43+
4744
return (
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);
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);
6461
}
6562
}}
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>
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+
</>
7686
);
7787
};
7888

0 commit comments

Comments
 (0)