Skip to content

Commit bedae69

Browse files
vredchenkoVal Redchenko
vredchenko
authored and
Val Redchenko
committed
feat(webui): add artefacts dropdown menu to header
Adds a new dropdown menu in the header for downloading SmartEM artefacts: - SmartEM Dev Workspace (Python CLI tool) - SmartEM Backend (Container image) - SmartEM Agent (Win10 executable) - FSRecorder (Win10 executable) - SmartEM Frontend (Web UI package) URLs are placeholders for now.
1 parent 49f3154 commit bedae69

File tree

5 files changed

+186
-3
lines changed

5 files changed

+186
-3
lines changed

‎core/webui-config.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,31 @@ export interface HeaderConfig {
4141
homeButton: HeaderButtonConfig
4242
docsButton: HeaderButtonConfig
4343
boardButton: HeaderButtonConfig
44+
artefactsButton: HeaderButtonConfig
4445
menuButton: HeaderButtonConfig
4546
omniboxPlaceholder: string
4647
repoSelectorLabel: string
4748
}
4849

50+
// =============================================================================
51+
// Artefacts Configuration
52+
// =============================================================================
53+
54+
export interface ArtefactItem {
55+
id: string
56+
label: string
57+
url: string
58+
description?: string
59+
}
60+
61+
export interface ArtefactsConfig {
62+
items: ArtefactItem[]
63+
}
64+
4965
export interface WebUiConfig {
5066
appTitle: string
5167
header: HeaderConfig
68+
artefacts: ArtefactsConfig
5269
}
5370

5471
export const webUiConfig: WebUiConfig = {
@@ -57,10 +74,20 @@ export const webUiConfig: WebUiConfig = {
5774
homeButton: { tooltip: 'Navigate to dashboard home' },
5875
docsButton: { text: 'docs', tooltip: 'Open project documentation' },
5976
boardButton: { text: 'board', tooltip: 'Open GitHub project board' },
77+
artefactsButton: { text: 'artefacts', tooltip: 'Download artefacts and releases' },
6078
menuButton: { tooltip: 'Open settings menu' },
6179
omniboxPlaceholder: 'search..',
6280
repoSelectorLabel: 'repos / codebases',
6381
},
82+
artefacts: {
83+
items: [
84+
{ id: 'workspace', label: 'SmartEM Dev Workspace', url: '#', description: 'Python CLI tool' },
85+
{ id: 'backend', label: 'SmartEM Backend (Container)', url: '#', description: 'Docker container image' },
86+
{ id: 'agent', label: 'SmartEM Agent (Win10)', url: '#', description: 'Windows 10 executable' },
87+
{ id: 'fsrecorder', label: 'FSRecorder (Win10)', url: '#', description: 'Windows 10 executable' },
88+
{ id: 'frontend', label: 'SmartEM Frontend', url: '#', description: 'Web UI package' },
89+
],
90+
},
6491
}
6592

6693
export default webUiConfig

‎webui/src/components/header/ArtefactsMenu.tsx‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import { Box, ListItemText, Menu, MenuItem } from '@mui/material'
2+
import { useState } from 'react'
3+
import { AppTooltip } from '~/components/common'
4+
import { webUiAppContents } from '~/config'
5+
6+
const ICON_DOWNLOAD = '\uf019'
7+
const ICON_CHEVRON_DOWN = '\uf078'
8+
9+
export function ArtefactsMenu() {
10+
const { text, tooltip } = webUiAppContents.config.header.artefactsButton
11+
const { items } = webUiAppContents.config.artefacts
12+
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
13+
const open = Boolean(anchorEl)
14+
15+
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
16+
setAnchorEl(event.currentTarget)
17+
}
18+
19+
const handleClose = () => {
20+
setAnchorEl(null)
21+
}
22+
23+
return (
24+
<>
25+
<AppTooltip title={tooltip} arrow placement="bottom">
26+
<Box
27+
component="button"
28+
onClick={handleClick}
29+
sx={{
30+
display: 'flex',
31+
alignItems: 'center',
32+
gap: 0.75,
33+
textDecoration: 'none',
34+
color: 'inherit',
35+
px: 1.5,
36+
py: 0.75,
37+
borderRadius: 1,
38+
border: '1px solid rgba(255, 255, 255, 0.3)',
39+
backgroundColor: open ? 'rgba(255, 255, 255, 0.15)' : 'rgba(255, 255, 255, 0.1)',
40+
transition: 'background-color 0.2s ease',
41+
cursor: 'pointer',
42+
'&:hover': {
43+
backgroundColor: 'rgba(255, 255, 255, 0.15)',
44+
},
45+
}}
46+
>
47+
<Box
48+
component="span"
49+
sx={{
50+
fontFamily: '"JetBrainsMono NF"',
51+
fontSize: 20,
52+
lineHeight: 1,
53+
color: 'inherit',
54+
}}
55+
>
56+
{ICON_DOWNLOAD}
57+
</Box>
58+
<Box component="span" sx={{ fontSize: 14 }}>
59+
{text}
60+
</Box>
61+
<Box
62+
component="span"
63+
sx={{
64+
fontFamily: '"JetBrainsMono NF"',
65+
fontSize: 10,
66+
lineHeight: 1,
67+
color: 'inherit',
68+
opacity: 0.7,
69+
ml: 0.25,
70+
}}
71+
>
72+
{ICON_CHEVRON_DOWN}
73+
</Box>
74+
</Box>
75+
</AppTooltip>
76+
<Menu
77+
anchorEl={anchorEl}
78+
open={open}
79+
onClose={handleClose}
80+
anchorOrigin={{
81+
vertical: 'bottom',
82+
horizontal: 'left',
83+
}}
84+
transformOrigin={{
85+
vertical: 'top',
86+
horizontal: 'left',
87+
}}
88+
sx={{
89+
mt: 1,
90+
'& .MuiPaper-root': {
91+
backgroundColor: '#2c2c2c',
92+
border: '1px solid rgba(255, 255, 255, 0.2)',
93+
minWidth: 220,
94+
},
95+
}}
96+
>
97+
{items.map((item) => (
98+
<MenuItem
99+
key={item.id}
100+
component="a"
101+
href={item.url}
102+
target="_blank"
103+
rel="noopener noreferrer"
104+
onClick={handleClose}
105+
sx={{
106+
color: 'white',
107+
'&:hover': {
108+
backgroundColor: 'rgba(255, 255, 255, 0.1)',
109+
},
110+
}}
111+
>
112+
<ListItemText
113+
primary={item.label}
114+
secondary={item.description}
115+
primaryTypographyProps={{ fontSize: 14 }}
116+
secondaryTypographyProps={{
117+
fontSize: 12,
118+
sx: { color: 'rgba(255, 255, 255, 0.6)' },
119+
}}
120+
/>
121+
</MenuItem>
122+
))}
123+
</Menu>
124+
</>
125+
)
126+
}

‎webui/src/components/header/Header.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { AppBar, Box, Toolbar } from '@mui/material'
2+
import { ArtefactsMenu } from './ArtefactsMenu'
23
import { DocsButton } from './DocsButton'
34
import { LogoHomeButton } from './LogoHomeButton'
45
import { MenuButton } from './MenuButton'
@@ -20,6 +21,7 @@ export function Header() {
2021
<LogoHomeButton />
2122
<DocsButton />
2223
<ProjectBoardButton />
24+
<ArtefactsMenu />
2325
</Box>
2426
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
2527
<RepoListBar />

‎webui/src/components/header/index.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
export { ArtefactsMenu } from './ArtefactsMenu'
2+
export { DocsButton } from './DocsButton'
13
export { Header } from './Header'
24
export { LogoHomeButton } from './LogoHomeButton'
3-
export { DocsButton } from './DocsButton'
5+
export { MenuButton } from './MenuButton'
6+
export { OmniBoxBar } from './OmniBoxBar'
47
export { ProjectBoardButton } from './ProjectBoardButton'
58
export { RepoListBar } from './RepoListBar'
6-
export { OmniBoxBar } from './OmniBoxBar'
7-
export { MenuButton } from './MenuButton'

‎webui/src/config/webui-app-contents.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -612,14 +612,31 @@ interface HeaderConfig {
612612
homeButton: HeaderButtonConfig
613613
docsButton: HeaderButtonConfig
614614
boardButton: HeaderButtonConfig
615+
artefactsButton: HeaderButtonConfig
615616
menuButton: HeaderButtonConfig
616617
omniboxPlaceholder: string
617618
repoSelectorLabel: string
618619
}
619620

621+
// =============================================================================
622+
// Artefacts Configuration
623+
// =============================================================================
624+
625+
interface ArtefactItem {
626+
id: string
627+
label: string
628+
url: string
629+
description?: string
630+
}
631+
632+
interface ArtefactsConfig {
633+
items: ArtefactItem[]
634+
}
635+
620636
interface WebUiConfig {
621637
appTitle: string
622638
header: HeaderConfig
639+
artefacts: ArtefactsConfig
623640
}
624641

625642
const webUiConfig: WebUiConfig = {
@@ -628,10 +645,20 @@ const webUiConfig: WebUiConfig = {
628645
homeButton: { tooltip: 'Navigate to dashboard home' },
629646
docsButton: { text: 'docs', tooltip: 'Open project documentation' },
630647
boardButton: { text: 'board', tooltip: 'Open GitHub project board' },
648+
artefactsButton: { text: 'artefacts', tooltip: 'Download artefacts and releases' },
631649
menuButton: { tooltip: 'Open settings menu' },
632650
omniboxPlaceholder: 'search..',
633651
repoSelectorLabel: 'repos / codebases',
634652
},
653+
artefacts: {
654+
items: [
655+
{ id: 'workspace', label: 'SmartEM Dev Workspace', url: '#', description: 'Python CLI tool' },
656+
{ id: 'backend', label: 'SmartEM Backend (Container)', url: '#', description: 'Docker container image' },
657+
{ id: 'agent', label: 'SmartEM Agent (Win10)', url: '#', description: 'Windows 10 executable' },
658+
{ id: 'fsrecorder', label: 'FSRecorder (Win10)', url: '#', description: 'Windows 10 executable' },
659+
{ id: 'frontend', label: 'SmartEM Frontend', url: '#', description: 'Web UI package' },
660+
],
661+
},
635662
}
636663

637664
// =============================================================================

0 commit comments

Comments
 (0)