feat(web): show error count on generate button

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 @@
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import MenuIcon from '@mui/icons-material/Menu';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import React from 'react';
 
 import { EditorArea } from './editor/EditorArea';
 import { EditorButtons } from './editor/EditorButtons';
+import { GenerateButton } from './editor/GenerateButton';
 
 export const App = (): JSX.Element => (
   <Box
@@ -46,13 +45,7 @@ export const App = (): JSX.Element => (
       p={1}
     >
       <EditorButtons />
-      <Button
-        variant="outlined"
-        color="primary"
-        startIcon={<PlayArrowIcon />}
-      >
-        Generate
-      </Button>
+      <GenerateButton />
     </Box>
     <Box
       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(() => {
         <ToggleButton
           selected={editorStore.showLintPanel}
           onClick={() => editorStore.toggleLintPanel()}
-          aria-label={`${editorStore.errorCount} errors, ${editorStore.warningCount} warnings, ${editorStore.infoCount} info`}
+          aria-label="Show diagnostics panel"
           value="show-lint-panel"
         >
           {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 @@
+import { observer } from 'mobx-react-lite';
+import Button from '@mui/material/Button';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import React from 'react';
+
+import { useRootStore } from '../RootStore';
+
+const GENERATE_LABEL = 'Generate';
+
+export const GenerateButton = observer(() => {
+  const { editorStore } = useRootStore();
+  const { errorCount, warningCount } = editorStore;
+
+  const diagnostics: string[] = [];
+  if (errorCount > 0) {
+    diagnostics.push(`${errorCount} error${errorCount === 1 ? '' : 's'}`);
+  }
+  if (warningCount > 0) {
+    diagnostics.push(`${warningCount} warning${warningCount === 1 ? '' : 's'}`);
+  }
+  const summary = diagnostics.join(' and ');
+
+  if (errorCount > 0) {
+    return (
+      <Button
+        variant="outlined"
+        color="error"
+        onClick={() => editorStore.toggleLintPanel()}
+      >
+        {summary}
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      variant="outlined"
+      color={warningCount > 0 ? 'warning' : 'primary'}
+      startIcon={<PlayArrowIcon />}
+    >
+      {summary === '' ? GENERATE_LABEL : `${GENERATE_LABEL} (${summary})`}
+    </Button>
+  );
+});