Skip to content

Commit c063e58

Browse files
author
iberdinsky-skilld
committed
Common Context
1 parent 719bce9 commit c063e58

File tree

15 files changed

+357
-218
lines changed

15 files changed

+357
-218
lines changed

‎client/src/App.tsx‎

Lines changed: 37 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -34,45 +34,46 @@ const apiUrl = getApiUrl()
3434
export function App() {
3535
const [isLoading, setLoading] = useState(true)
3636

37-
const setTitle = useDocumentTitle();
37+
const setTitle = useDocumentTitle()
3838
useEffect(() => {
39-
(async () => {
40-
const data = await setCustomisation();
41-
const customisation: { plasmactl_web_ui_platform_page_name?: string } = data;
42-
setTitle(customisation?.plasmactl_web_ui_platform_page_name ?? 'Platform');
43-
setLoading(false);
44-
})();
39+
;(async () => {
40+
const data = await setCustomisation()
41+
const customisation: { plasmactl_web_ui_platform_page_name?: string } =
42+
data
43+
setTitle(customisation?.plasmactl_web_ui_platform_page_name ?? 'Platform')
44+
setLoading(false)
45+
})()
4546
}, [])
4647

4748
if (isLoading) {
48-
return null;
49+
return null
4950
}
5051

5152
return (
52-
<ActionProvider>
53-
<BrowserRouter>
54-
<ThemeProvider>
55-
<Refine
56-
dataProvider={{
57-
default: launchrDataProvider(apiUrl),
58-
}}
59-
liveProvider={liveProvider}
60-
notificationProvider={useNotificationProvider}
61-
routerProvider={routerBindings}
62-
resources={[
63-
{
64-
name: 'actions',
65-
list: '/actions',
66-
show: '/actions/:id/show',
67-
meta: {
68-
canDelete: false,
69-
},
53+
<BrowserRouter>
54+
<ThemeProvider>
55+
<Refine
56+
dataProvider={{
57+
default: launchrDataProvider(apiUrl),
58+
}}
59+
liveProvider={liveProvider}
60+
notificationProvider={useNotificationProvider}
61+
routerProvider={routerBindings}
62+
resources={[
63+
{
64+
name: 'actions',
65+
list: '/actions',
66+
show: '/actions/:id/show',
67+
meta: {
68+
canDelete: false,
7069
},
71-
]}
72-
options={{
73-
liveMode: 'manual',
74-
}}
75-
>
70+
},
71+
]}
72+
options={{
73+
liveMode: 'manual',
74+
}}
75+
>
76+
<ActionProvider>
7677
<GlobalKBarProvider>
7778
<Routes>
7879
<Route
@@ -105,9 +106,9 @@ export function App() {
105106
<UnsavedChangesNotifier />
106107
<RefineKbar />
107108
</GlobalKBarProvider>
108-
</Refine>
109-
</ThemeProvider>
110-
</BrowserRouter>
111-
</ActionProvider>
109+
</ActionProvider>
110+
</Refine>
111+
</ThemeProvider>
112+
</BrowserRouter>
112113
)
113-
}
114+
}

‎client/src/components/ActionsListFlow.tsx‎

Lines changed: 4 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import ListItem from '@mui/material/ListItem'
77
import ListItemIcon from '@mui/material/ListItemIcon'
88
import Typography from '@mui/material/Typography'
99
import { type FC, Fragment } from 'react'
10-
import { useDebouncedCallback } from 'use-debounce'
1110

1211
import ArrowRightIcon from '/images/arrow-right.svg'
1312

@@ -26,16 +25,10 @@ export const ActionsListFlow: FC<ActionsListFlowProps> = ({ actionsGroup }) => {
2625
label: string
2726
items: components['schemas']['ActionShort'][]
2827
}[] = []
29-
30-
const breadcrumbs = actionsGroup.id.includes('.')
31-
? actionsGroup.id
32-
.split('.')
33-
.slice(0, -1)
34-
.map((a) => sentenceCase(a))
35-
: []
36-
const title = actionsGroup.id.includes('.')
37-
? actionsGroup.id.split('.').pop()
38-
: actionsGroup.id
28+
const { levels, id } = splitActionId(actionsGroup.id)
29+
const breadcrumbs =
30+
levels.length > 0 ? levels.map((a) => sentenceCase(a)) : []
31+
const title = id
3932

4033
if (actionsGroup.list.length > 0) {
4134
const attachedActions = actionsGroup.list.filter((a) =>
@@ -105,27 +98,6 @@ export const ActionsListFlow: FC<ActionsListFlowProps> = ({ actionsGroup }) => {
10598
}
10699
}
107100

108-
const debounced = useDebouncedCallback((id = false) => {
109-
if (id) {
110-
dispatch?.({
111-
type: 'set-hover-action',
112-
id,
113-
})
114-
} else {
115-
dispatch?.({
116-
type: 'set-hover-action',
117-
})
118-
}
119-
}, 25)
120-
121-
const wrappedHandleMouseEnter = (id: string) => {
122-
debounced(id)
123-
}
124-
125-
const wrappedHandleMouseLeave = () => {
126-
debounced()
127-
}
128-
129101
const actionClickHandler = (id: string) => {
130102
dispatch?.({
131103
type: 'set-active-action',
@@ -222,8 +194,6 @@ export const ActionsListFlow: FC<ActionsListFlowProps> = ({ actionsGroup }) => {
222194
>
223195
<Box
224196
className={'action-button'}
225-
onMouseEnter={() => wrappedHandleMouseEnter(item.id)}
226-
onMouseLeave={() => wrappedHandleMouseLeave()}
227197
onClick={() => actionClickHandler(item.id)}
228198
sx={{
229199
display: 'flex',

‎client/src/components/AnimatedFab.tsx‎

Lines changed: 62 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,74 @@
1+
import SpeedDial from '@mui/material/SpeedDial'
2+
import SpeedDialAction from '@mui/material/SpeedDialAction'
3+
import AutorenewIcon from '@mui/icons-material/Autorenew';
4+
import DoneIcon from '@mui/icons-material/Done';
15
import TerminalIcon from '@mui/icons-material/Terminal'
2-
import Badge from '@mui/material/Badge'
3-
import Fab from '@mui/material/Fab'
4-
import { styled } from '@mui/system'
5-
import { useEffect, useState } from 'react'
6-
7-
const AnimatedBadge = styled(Badge)(() => ({
8-
transition: 'transform 0.3s ease-in-out',
9-
'&.animate': {
10-
transform: 'scale(1.5)',
11-
},
12-
}))
13-
6+
import ErrorIcon from '@mui/icons-material/Error';
7+
import BoltIcon from '@mui/icons-material/Bolt'
148
interface IAnimatedFabProps {
15-
badgeLength: number
9+
startedLength?: number
10+
runningLength?: number
11+
errorLength?: number
12+
finishedLength?: number
1613
handleOpen: () => void
1714
}
1815

19-
const AnimatedFab = ({ badgeLength, handleOpen }: IAnimatedFabProps) => {
20-
const [animate, setAnimate] = useState(false)
21-
const [prevBadgeLength, setPrevBadgeLength] = useState(badgeLength)
22-
23-
useEffect(() => {
24-
if (badgeLength !== prevBadgeLength && badgeLength > 0) {
25-
setAnimate(true)
26-
const timeout = setTimeout(() => setAnimate(false), 300)
27-
return () => clearTimeout(timeout)
28-
}
29-
setPrevBadgeLength(badgeLength)
30-
}, [badgeLength, prevBadgeLength])
16+
const AnimatedFab = ({
17+
startedLength,
18+
runningLength,
19+
errorLength,
20+
finishedLength,
21+
handleOpen,
22+
}: IAnimatedFabProps) => {
3123

3224
return (
33-
<Fab
34-
color="primary"
35-
aria-label="status"
25+
<SpeedDial
26+
ariaLabel="Actions state"
27+
sx={{ position: 'absolute', bottom: 16, right: 16 }}
28+
icon={<TerminalIcon />}
3629
onClick={handleOpen}
37-
style={{ position: 'fixed', bottom: 16, right: 16, zIndex: 1000 }}
3830
>
39-
<AnimatedBadge
40-
badgeContent={badgeLength}
41-
color="secondary"
42-
className={animate ? 'animate' : ''}
43-
>
44-
<TerminalIcon />
45-
</AnimatedBadge>
46-
</Fab>
31+
<SpeedDialAction
32+
icon={<BoltIcon />}
33+
onClick={handleOpen}
34+
slotProps={{
35+
tooltip: {
36+
title: `${startedLength} launched`,
37+
open: true,
38+
},
39+
}}
40+
/>
41+
<SpeedDialAction
42+
icon={<AutorenewIcon />}
43+
onClick={handleOpen}
44+
slotProps={{
45+
tooltip: {
46+
title: `${runningLength} running`,
47+
open: true,
48+
},
49+
}}
50+
/>
51+
<SpeedDialAction
52+
icon={<ErrorIcon />}
53+
onClick={handleOpen}
54+
slotProps={{
55+
tooltip: {
56+
title: `${errorLength} errors`,
57+
open: true,
58+
},
59+
}}
60+
/>
61+
<SpeedDialAction
62+
icon={<DoneIcon />}
63+
onClick={handleOpen}
64+
slotProps={{
65+
tooltip: {
66+
title: `${finishedLength} finished`,
67+
open: true,
68+
},
69+
}}
70+
/>
71+
</SpeedDial>
4772
)
4873
}
4974

0 commit comments

Comments
 (0)