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/src/main/js/editor | |
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/src/main/js/editor')
-rw-r--r-- | language-web/src/main/js/editor/EditorButtons.tsx | 2 | ||||
-rw-r--r-- | language-web/src/main/js/editor/GenerateButton.tsx | 44 |
2 files changed, 45 insertions, 1 deletions
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 | }); | ||