Skip to content

Commit e64f457

Browse files
trungutttrungutt
committed
Center catalog content
Signed-off-by: Trung Nguyen <trung.nguyen@docker.com>
1 parent 5959b6b commit e64f457

File tree

1 file changed

+129
-124
lines changed

1 file changed

+129
-124
lines changed

‎src/extension/ui/src/components/CatalogGrid.tsx

+129-124
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({ appProps }) => {
5555
return false;
5656
}
5757
return !Object.keys(registryItems).every((i) =>
58-
catalogItems.some((c: CatalogItemRichened) => c.name === i)
58+
catalogItems.some((c: CatalogItemRichened) => c.name === i),
5959
);
6060
}, [catalogItems, registryItems]);
6161

@@ -103,138 +103,143 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({ appProps }) => {
103103
</Typography>
104104
</Alert>
105105
)}
106-
<Box
107-
sx={{
108-
position: 'sticky',
109-
top: 0,
110-
zIndex: 1000,
111-
backgroundColor: 'background.default',
112-
}}
113-
>
114-
<Tabs
115-
value={tab}
116-
onChange={(_, newValue) => setTab(newValue)}
117-
sx={CATALOG_LAYOUT_SX}
106+
107+
<Stack spacing={2} sx={{ width: 'fit-content', alignSelf: 'center' }}>
108+
<Box
109+
sx={{
110+
position: 'sticky',
111+
top: 0,
112+
zIndex: 1000,
113+
backgroundColor: 'background.default',
114+
}}
118115
>
119-
<Tab label="MCP Servers" />
120-
<Tab label="MCP Clients" />
121-
{/* <Tab label="OAuth Providers" /> */}
122-
</Tabs>
123-
{tab === 0 && (
124-
<Stack
125-
direction="row"
126-
spacing={1}
127-
alignItems="center"
128-
sx={{ mt: 1, py: 1, ...CATALOG_LAYOUT_SX }}
116+
<Tabs
117+
value={tab}
118+
onChange={(_, newValue) => setTab(newValue)}
119+
sx={CATALOG_LAYOUT_SX}
129120
>
130-
<FormGroup>
131-
<Stack
132-
direction="row"
133-
spacing={1}
134-
alignItems="center"
135-
justifyContent="space-evenly"
136-
>
137-
<OutlinedInput
138-
startAdornment={<SearchIcon color="secondary" />}
139-
size="small"
140-
type="search"
141-
placeholder="Search"
142-
sx={{ width: 380 }}
143-
value={search}
144-
onChange={(e) => setSearch(e.target.value)}
145-
/>
146-
<IconButton
147-
size="small"
148-
id="demo-customized-button"
149-
aria-controls={
150-
openMenus['demo-customized-menu']
151-
? 'demo-customized-menu'
152-
: undefined
153-
}
154-
aria-haspopup="true"
155-
aria-expanded={
156-
openMenus['demo-customized-menu'] ? 'true' : undefined
157-
}
158-
onClick={(e) =>
159-
setOpenMenus({
160-
...openMenus,
161-
'demo-customized-menu': {
162-
anchorEl: e.currentTarget,
163-
open: !openMenus['demo-customized-menu'].open,
164-
},
165-
})
166-
}
121+
<Tab label="MCP Servers" />
122+
<Tab label="MCP Clients" />
123+
{/* <Tab label="OAuth Providers" /> */}
124+
</Tabs>
125+
{tab === 0 && (
126+
<Stack
127+
direction="row"
128+
spacing={1}
129+
alignItems="center"
130+
sx={{ mt: 1, py: 1, ...CATALOG_LAYOUT_SX }}
131+
>
132+
<FormGroup>
133+
<Stack
134+
direction="row"
135+
spacing={1}
136+
alignItems="center"
137+
justifyContent="space-evenly"
167138
>
168-
<SwapVert fontSize="small" />
169-
</IconButton>
170-
</Stack>
171-
</FormGroup>
139+
<OutlinedInput
140+
startAdornment={<SearchIcon color="secondary" />}
141+
size="small"
142+
type="search"
143+
placeholder="Search"
144+
sx={{ width: 380 }}
145+
value={search}
146+
onChange={(e) => setSearch(e.target.value)}
147+
/>
148+
<IconButton
149+
size="small"
150+
id="demo-customized-button"
151+
aria-controls={
152+
openMenus['demo-customized-menu']
153+
? 'demo-customized-menu'
154+
: undefined
155+
}
156+
aria-haspopup="true"
157+
aria-expanded={
158+
openMenus['demo-customized-menu'] ? 'true' : undefined
159+
}
160+
onClick={(e) =>
161+
setOpenMenus({
162+
...openMenus,
163+
'demo-customized-menu': {
164+
anchorEl: e.currentTarget,
165+
open: !openMenus['demo-customized-menu'].open,
166+
},
167+
})
168+
}
169+
>
170+
<SwapVert fontSize="small" />
171+
</IconButton>
172+
</Stack>
173+
</FormGroup>
172174

173-
<Menu
174-
id="demo-customized-menu"
175-
MenuListProps={{
176-
'aria-labelledby': 'demo-customized-button',
177-
}}
178-
anchorEl={openMenus['demo-customized-menu'].anchorEl || undefined}
179-
open={openMenus['demo-customized-menu'].open}
180-
onClose={() =>
181-
setOpenMenus({
182-
...openMenus,
183-
'demo-customized-menu': { anchorEl: null, open: false },
184-
})
185-
}
186-
>
187-
<MenuItem
188-
sx={{ fontWeight: sort === 'name-asc' ? 'bold' : 'normal' }}
189-
onClick={() => {
190-
setOpenMenus({
191-
...openMenus,
192-
'demo-customized-menu': { anchorEl: null, open: false },
193-
});
194-
setSort('name-asc');
175+
<Menu
176+
id="demo-customized-menu"
177+
MenuListProps={{
178+
'aria-labelledby': 'demo-customized-button',
195179
}}
196-
disableRipple
197-
>
198-
Name (A-Z)
199-
</MenuItem>
200-
<MenuItem
201-
sx={{ fontWeight: sort === 'name-desc' ? 'bold' : 'normal' }}
202-
onClick={() => {
180+
anchorEl={
181+
openMenus['demo-customized-menu'].anchorEl || undefined
182+
}
183+
open={openMenus['demo-customized-menu'].open}
184+
onClose={() =>
203185
setOpenMenus({
204186
...openMenus,
205187
'demo-customized-menu': { anchorEl: null, open: false },
206-
});
207-
setSort('name-desc');
208-
}}
209-
disableRipple
188+
})
189+
}
210190
>
211-
Name (Z-A)
212-
</MenuItem>
213-
</Menu>
214-
</Stack>
215-
)}
216-
</Box>
217-
<Suspense
218-
fallback={
219-
<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
220-
<CircularProgress />
221-
</Box>
222-
}
223-
>
224-
{tab === 0 && (
225-
<ToolCatalog search={search} client={client} sort={sort} />
226-
)}
227-
{tab === 1 && <YourClients appProps={appProps} />}
228-
</Suspense>
229-
<Suspense
230-
fallback={
231-
<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
232-
<CircularProgress />
233-
</Box>
234-
}
235-
>
236-
{tab === 2 && <OAuthProviders client={client} />}
237-
</Suspense>
191+
<MenuItem
192+
sx={{ fontWeight: sort === 'name-asc' ? 'bold' : 'normal' }}
193+
onClick={() => {
194+
setOpenMenus({
195+
...openMenus,
196+
'demo-customized-menu': { anchorEl: null, open: false },
197+
});
198+
setSort('name-asc');
199+
}}
200+
disableRipple
201+
>
202+
Name (A-Z)
203+
</MenuItem>
204+
<MenuItem
205+
sx={{ fontWeight: sort === 'name-desc' ? 'bold' : 'normal' }}
206+
onClick={() => {
207+
setOpenMenus({
208+
...openMenus,
209+
'demo-customized-menu': { anchorEl: null, open: false },
210+
});
211+
setSort('name-desc');
212+
}}
213+
disableRipple
214+
>
215+
Name (Z-A)
216+
</MenuItem>
217+
</Menu>
218+
</Stack>
219+
)}
220+
</Box>
221+
<Suspense
222+
fallback={
223+
<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
224+
<CircularProgress />
225+
</Box>
226+
}
227+
>
228+
{tab === 0 && (
229+
<ToolCatalog search={search} client={client} sort={sort} />
230+
)}
231+
{tab === 1 && <YourClients appProps={appProps} />}
232+
</Suspense>
233+
<Suspense
234+
fallback={
235+
<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
236+
<CircularProgress />
237+
</Box>
238+
}
239+
>
240+
{tab === 2 && <OAuthProviders client={client} />}
241+
</Suspense>
242+
</Stack>
238243
</Stack>
239244
);
240245
};

0 commit comments

Comments
 (0)