feat(web): show error count on generate button

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(() => {
         <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>
+  );
+});