feat: add inline config error reporting

src/components/FileFormControl.tsx

@@ -26,6 +26,8 @@ import TextField from "@mui/material/TextField"
 import Tooltip from "@mui/material/Tooltip"
 import styled from "@mui/system/styled"
 
+import { isNil } from "../common"
+
 const HiddenInput = styled("input")({
   display: "none",
 })
@@ -83,6 +85,7 @@ interface IFileFormControlProps {
 
 export const FileFormControl = (props: IFileFormControlProps) => {
   const [fileContent, setFileContent] = React.useState(props.initialFileContent)
+  const [error, setError] = React.useState(false)
 
   return (
     <Grid container spacing={0} direction="row" alignItems="center">
@@ -94,6 +97,7 @@ export const FileFormControl = (props: IFileFormControlProps) => {
           label={props.label}
           helperText={props.helperText}
           disabled={props.disabled ?? false}
+          error={error}
           InputProps={{
             readOnly: props.readOnly ?? false,
           }}
@@ -108,9 +112,10 @@ export const FileFormControl = (props: IFileFormControlProps) => {
           onFileChange={async (event) => {
             let content = (await head(event.target.files)?.text()) ?? ""
             content = props.contentPreprocessor?.(content) ?? content
-            if (props.onFileChange(content)) {
-              setFileContent(content)
-            }
+            const result = props.onFileChange(content)
+            const isSuccessful = isNil(result) || result
+            setFileContent(content)
+            setError(!isSuccessful)
           }}
         />
       </Grid>

src/components/NumberFormControl.tsx

@@ -40,6 +40,7 @@ interface INumberFormControlProps {
 
 export const NumberFormControl = (props: INumberFormControlProps) => {
   const [content, setContent] = React.useState(props.initialContent)
+  const [error, setError] = React.useState(false)
 
   return (
     <TextField
@@ -55,14 +56,15 @@ export const NumberFormControl = (props: INumberFormControlProps) => {
         max: props.max,
       }}
       disabled={props.disabled ?? false}
+      error={error}
       onChange={(event) => {
         const content = isNil(props.contentPreprocessor)
           ? event.target.value
           : props.contentPreprocessor(event.target.value)
-
-        if (props.onChange(content)) {
-          setContent(content)
-        }
+        const result = props.onChange(content)
+        const isSuccessful = isNil(result) || result
+        setContent(content)
+        setError(!isSuccessful)
       }}
     />
   )

src/pages/settings.tsx

@@ -68,7 +68,11 @@ const App = ({ data }: PageProps<Queries.SettingsPageQuery>) => {
   )
 
   const jsonMinifyPreprocessor = (json: string): string => {
-    return JSON.stringify(JSON.parse(json))
+    try {
+      return JSON.stringify(JSON.parse(json))
+    } catch (ex) {
+      return "{}"
+    }
   }
 
   return (