diff options
author | Kristóf Marussy <kristof@marussy.com> | 2021-10-30 18:41:18 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2021-10-31 19:26:14 +0100 |
commit | c6b2ace61272535e4dfedb97315a406aee7f729c (patch) | |
tree | 0920c645a8b54835bb63dc365c79077923848792 /language-web | |
parent | fix(web): make lint panel readable (diff) | |
download | refinery-c6b2ace61272535e4dfedb97315a406aee7f729c.tar.gz refinery-c6b2ace61272535e4dfedb97315a406aee7f729c.tar.zst refinery-c6b2ace61272535e4dfedb97315a406aee7f729c.zip |
feat(web): show error count on generate button
Diffstat (limited to 'language-web')
-rw-r--r-- | language-web/src/main/js/App.tsx | 11 | ||||
-rw-r--r-- | language-web/src/main/js/editor/EditorButtons.tsx | 2 | ||||
-rw-r--r-- | language-web/src/main/js/editor/GenerateButton.tsx | 44 |
3 files changed, 47 insertions, 10 deletions
diff --git a/language-web/src/main/js/App.tsx b/language-web/src/main/js/App.tsx index d25ac4d3..2567aa9c 100644 --- a/language-web/src/main/js/App.tsx +++ b/language-web/src/main/js/App.tsx | |||
@@ -1,15 +1,14 @@ | |||
1 | import AppBar from '@mui/material/AppBar'; | 1 | import AppBar from '@mui/material/AppBar'; |
2 | import Box from '@mui/material/Box'; | 2 | import Box from '@mui/material/Box'; |
3 | import Button from '@mui/material/Button'; | ||
4 | import IconButton from '@mui/material/IconButton'; | 3 | import IconButton from '@mui/material/IconButton'; |
5 | import Toolbar from '@mui/material/Toolbar'; | 4 | import Toolbar from '@mui/material/Toolbar'; |
6 | import Typography from '@mui/material/Typography'; | 5 | import Typography from '@mui/material/Typography'; |
7 | import MenuIcon from '@mui/icons-material/Menu'; | 6 | import MenuIcon from '@mui/icons-material/Menu'; |
8 | import PlayArrowIcon from '@mui/icons-material/PlayArrow'; | ||
9 | import React from 'react'; | 7 | import React from 'react'; |
10 | 8 | ||
11 | import { EditorArea } from './editor/EditorArea'; | 9 | import { EditorArea } from './editor/EditorArea'; |
12 | import { EditorButtons } from './editor/EditorButtons'; | 10 | import { EditorButtons } from './editor/EditorButtons'; |
11 | import { GenerateButton } from './editor/GenerateButton'; | ||
13 | 12 | ||
14 | export const App = (): JSX.Element => ( | 13 | export const App = (): JSX.Element => ( |
15 | <Box | 14 | <Box |
@@ -46,13 +45,7 @@ export const App = (): JSX.Element => ( | |||
46 | p={1} | 45 | p={1} |
47 | > | 46 | > |
48 | <EditorButtons /> | 47 | <EditorButtons /> |
49 | <Button | 48 | <GenerateButton /> |
50 | variant="outlined" | ||
51 | color="primary" | ||
52 | startIcon={<PlayArrowIcon />} | ||
53 | > | ||
54 | Generate | ||
55 | </Button> | ||
56 | </Box> | 49 | </Box> |
57 | <Box | 50 | <Box |
58 | flexGrow={1} | 51 | flexGrow={1} |
diff --git a/language-web/src/main/js/editor/EditorButtons.tsx b/language-web/src/main/js/editor/EditorButtons.tsx index bd843dfe..9ccc238c 100644 --- a/language-web/src/main/js/editor/EditorButtons.tsx +++ b/language-web/src/main/js/editor/EditorButtons.tsx | |||
@@ -80,7 +80,7 @@ export const EditorButtons = observer(() => { | |||
80 | <ToggleButton | 80 | <ToggleButton |
81 | selected={editorStore.showLintPanel} | 81 | selected={editorStore.showLintPanel} |
82 | onClick={() => editorStore.toggleLintPanel()} | 82 | onClick={() => editorStore.toggleLintPanel()} |
83 | aria-label={`${editorStore.errorCount} errors, ${editorStore.warningCount} warnings, ${editorStore.infoCount} info`} | 83 | aria-label="Show diagnostics panel" |
84 | value="show-lint-panel" | 84 | value="show-lint-panel" |
85 | > | 85 | > |
86 | {getLintIcon(editorStore.highestDiagnosticLevel)} | 86 | {getLintIcon(editorStore.highestDiagnosticLevel)} |
diff --git a/language-web/src/main/js/editor/GenerateButton.tsx b/language-web/src/main/js/editor/GenerateButton.tsx new file mode 100644 index 00000000..3834cec4 --- /dev/null +++ b/language-web/src/main/js/editor/GenerateButton.tsx | |||
@@ -0,0 +1,44 @@ | |||
1 | import { observer } from 'mobx-react-lite'; | ||
2 | import Button from '@mui/material/Button'; | ||
3 | import PlayArrowIcon from '@mui/icons-material/PlayArrow'; | ||
4 | import React from 'react'; | ||
5 | |||
6 | import { useRootStore } from '../RootStore'; | ||
7 | |||
8 | const GENERATE_LABEL = 'Generate'; | ||
9 | |||
10 | export const GenerateButton = observer(() => { | ||
11 | const { editorStore } = useRootStore(); | ||
12 | const { errorCount, warningCount } = editorStore; | ||
13 | |||
14 | const diagnostics: string[] = []; | ||
15 | if (errorCount > 0) { | ||
16 | diagnostics.push(`${errorCount} error${errorCount === 1 ? '' : 's'}`); | ||
17 | } | ||
18 | if (warningCount > 0) { | ||
19 | diagnostics.push(`${warningCount} warning${warningCount === 1 ? '' : 's'}`); | ||
20 | } | ||
21 | const summary = diagnostics.join(' and '); | ||
22 | |||
23 | if (errorCount > 0) { | ||
24 | return ( | ||
25 | <Button | ||
26 | variant="outlined" | ||
27 | color="error" | ||
28 | onClick={() => editorStore.toggleLintPanel()} | ||
29 | > | ||
30 | {summary} | ||
31 | </Button> | ||
32 | ); | ||
33 | } | ||
34 | |||
35 | return ( | ||
36 | <Button | ||
37 | variant="outlined" | ||
38 | color={warningCount > 0 ? 'warning' : 'primary'} | ||
39 | startIcon={<PlayArrowIcon />} | ||
40 | > | ||
41 | {summary === '' ? GENERATE_LABEL : `${GENERATE_LABEL} (${summary})`} | ||
42 | </Button> | ||
43 | ); | ||
44 | }); | ||