Skip to content

Commit 5f034c0

Browse files
dgageotdgageot
authored
Merge pull request #203 from docker/miscellaneous-fixes-3
Miscellaneous UI fixes
2 parents 40ad83e + afcdb12 commit 5f034c0

File tree

5 files changed

+25
-51
lines changed

5 files changed

+25
-51
lines changed

‎src/extension/ui/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="color-scheme" content="light dark" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
</head>
8-
<body>
8+
<body style="margin: 0; padding: 0;">
99
<div id="root"></div>
1010
<script type="module" src="/src/main.tsx"></script>
1111
</body>

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

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({ appProps }) => {
4949
}>({
5050
'demo-customized-menu': { anchorEl: null, open: false },
5151
});
52-
const [sort, setSort] = useState<'name-asc' | 'name-desc' | 'date-desc'>(
53-
'date-desc'
52+
const [sort, setSort] = useState<'name-asc' | 'name-desc'>(
53+
'name-asc'
5454
);
5555

5656
// Only calculate hasOutOfCatalog when relevant data changes
@@ -77,7 +77,7 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({ appProps }) => {
7777
}
7878

7979
return (
80-
<Stack spacing={2} justifyContent="center" alignItems="center">
80+
<Stack spacing={2} sx={{ padding: 2 }}>
8181
<Stack
8282
direction="column"
8383
spacing={1}
@@ -206,20 +206,6 @@ export const CatalogGrid: React.FC<CatalogGridProps> = ({ appProps }) => {
206206
})
207207
}
208208
>
209-
<MenuItem
210-
sx={{ fontWeight: sort === 'date-desc' ? 'bold' : 'normal' }}
211-
onClick={() => {
212-
setOpenMenus({
213-
...openMenus,
214-
'demo-customized-menu': { anchorEl: null, open: false },
215-
});
216-
setSort('date-desc');
217-
}}
218-
disableRipple
219-
>
220-
⏰ Most Recent
221-
</MenuItem>
222-
<Divider sx={{ my: 0.5 }} />
223209
<MenuItem
224210
sx={{ fontWeight: sort === 'name-asc' ? 'bold' : 'normal' }}
225211
onClick={() => {

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface ToolCatalogProps {
99
search: string;
1010
client: v1.DockerDesktopClient;
1111
showMine: boolean;
12-
sort: 'name-asc' | 'name-desc' | 'date-desc';
12+
sort: 'name-asc' | 'name-desc';
1313
}
1414

1515
const ToolCatalog: React.FC<ToolCatalogProps> = ({
@@ -30,15 +30,13 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({
3030
return matchesSearch && !hideBecauseItsNotMine;
3131
});
3232

33-
return sort !== 'date-desc'
33+
return sort === 'name-asc'
3434
? filteredItems.sort((a, b) => {
35-
if (sort === 'name-asc') {
36-
return a.name.localeCompare(b.name);
37-
}
38-
if (sort === 'name-desc') {
39-
return b.name.localeCompare(a.name);
40-
}
41-
return 0;
35+
return a.name.localeCompare(b.name);
36+
})
37+
: sort === 'name-desc'
38+
? filteredItems.sort((a, b) => {
39+
return b.name.localeCompare(a.name);
4240
})
4341
: filteredItems;
4442
}, [catalogItems, search, showMine, sort]);

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,8 @@ import { v1 } from '@docker/extension-api-client-types';
22
import CheckOutlined from '@mui/icons-material/CheckOutlined';
33
import CloseOutlined from '@mui/icons-material/CloseOutlined';
44
import {
5-
Alert,
65
CircularProgress,
76
IconButton,
8-
OutlinedInput,
97
Stack,
108
TextField,
119
Typography,
@@ -82,18 +80,18 @@ const ConfigEditor = ({
8280
}
8381

8482
return (
85-
<Stack>
86-
<Typography variant="subtitle2">Config</Typography>
83+
<Stack spacing={1}>
84+
<Typography variant="subtitle2">Parameters</Typography>
8785
<Stack direction="column" spacing={2}>
8886
{Object.keys(flattenedConfig).map((key: string) => {
8987
const edited = localConfig[key] !== flattenedConfig[key];
9088
const isSaving = savingKeys.has(key);
9189

9290
return (
9391
<Stack key={key} direction="row" spacing={2}>
94-
<OutlinedInput
92+
<TextField
9593
size="small"
96-
placeholder={key}
94+
label={key}
9795
value={localConfig[key] || ''}
9896
onChange={(e) =>
9997
setLocalConfig({ ...localConfig, [key]: e.target.value })

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

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
Switch,
2222
Tab,
2323
Tabs,
24+
TextField,
2425
Tooltip,
2526
Typography,
2627
useTheme,
@@ -199,7 +200,6 @@ const ConfigurationModal = ({
199200
</Typography>
200201
{catalogItem.readme !== undefined && (
201202
<Typography variant="body2" sx={{ mt: 2, color: 'text.secondary' }}>
202-
Repository:{' '}
203203
<Link
204204
onClick={() => client.host.openExternal(catalogItem.readme || '')}
205205
href={catalogItem.readme || ''}
@@ -280,10 +280,10 @@ const ConfigurationModal = ({
280280
<Stack direction="column" spacing={2}>
281281
<ConfigEditor catalogItem={catalogItem} client={client} />
282282

283-
<Stack>
284-
<Typography variant="subtitle2">Secrets</Typography>
285-
{catalogItem.secrets && catalogItem.secrets?.length > 0 ? (
286-
catalogItem.secrets.map((secret) => {
283+
{catalogItem.secrets?.length > 0 && (
284+
<Stack spacing={1}>
285+
<Typography variant="subtitle2">Secrets</Typography>
286+
{catalogItem.secrets.map((secret) => {
287287
const secretEdited =
288288
(secret.assigned &&
289289
localSecrets[secret.name] !==
@@ -297,10 +297,10 @@ const ConfigurationModal = ({
297297
spacing={2}
298298
alignItems="center"
299299
>
300-
<OutlinedInput
300+
<TextField
301301
size="small"
302302
key={secret.name}
303-
placeholder={secret.name}
303+
label={secret.name}
304304
value={localSecrets[secret.name]}
305305
fullWidth
306306
onChange={(e) => {
@@ -357,20 +357,12 @@ const ConfigurationModal = ({
357357
)}
358358
</Stack>
359359
);
360-
})
361-
) : (
362-
<Alert severity="info">
363-
No secrets available for this item.
364-
</Alert>
365-
)}
366-
</Stack>
360+
})}
361+
</Stack>
362+
)}
367363
</Stack>
368364
</Stack>
369365
</TabPanel>
370-
<TabPanel value={tabValue} index={2}>
371-
<Typography>Examples</Typography>
372-
WIP
373-
</TabPanel>
374366
</>
375367
)}
376368
</DialogContent>

0 commit comments

Comments
 (0)