FIX: Set a visual cue when a name is wrong

webapp/src/components/NameManagerDialog/NameManagerDialog.tsx

@@ -83,20 +83,28 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
                   scope={scopeName}
                   formula={definedName.formula}
                   key={definedName.name + definedName.scope}
-                  onSave={(newName, newScope, newFormula) => {
+                  onSave={(
+                    newName,
+                    newScope,
+                    newFormula
+                  ): string | undefined => {
                     const scope_index = worksheets.findIndex(
-                      (s) => s.name === newScope,
+                      (s) => s.name === newScope
                     );
                     const scope = scope_index > 0 ? scope_index : undefined;
+                    try {
                       model.updateDefinedName(
                         definedName.name,
                         definedName.scope,
                         newName,
                         scope,
-                      newFormula,
+                        newFormula
                       );
                       setEditingNameIndex(-2);
                       onNamesChanged();
+                    } catch (e) {
+                      return `${e}`;
+                    }
                   }}
                   onCancel={() => setEditingNameIndex(-2)}
                 />
@@ -124,13 +132,17 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
             worksheets={worksheets}
             name={""}
             formula={formatFormula()}
-            scope={t("name_manager_dialog.global")}
-            onSave={(name, scope, formula) => {
+            scope={"[global]"}
+            onSave={(name, scope, formula): string | undefined => {
               const scope_index = worksheets.findIndex((s) => s.name === scope);
               const scope_value = scope_index > 0 ? scope_index : undefined;
+              try {
                 model.newDefinedName(name, scope_value, formula);
                 setEditingNameIndex(-2);
                 onNamesChanged();
+              } catch (e) {
+                return `${e}`;
+              }
             }}
             onCancel={() => setEditingNameIndex(-2)}
           />

webapp/src/components/NameManagerDialog/NamedRangeActive.tsx

@@ -17,7 +17,7 @@ interface NamedRangeProperties {
   name: string;
   scope: string;
   formula: string;
-  onSave: (name: string, scope: string, formula: string) => void;
+  onSave: (name: string, scope: string, formula: string) => string | undefined;
   onCancel: () => void;
 }
 
@@ -27,8 +27,6 @@ function NamedRangeActive(properties: NamedRangeProperties) {
   const [scope, setScope] = useState(properties.scope);
   const [formula, setFormula] = useState(properties.formula);
 
-  // TODO: add error messages for validations
-  const [nameError, setNameError] = useState(false);
   const [formulaError, setFormulaError] = useState(false);
 
   return (
@@ -40,7 +38,7 @@ function NamedRangeActive(properties: NamedRangeProperties) {
           size="small"
           margin="none"
           fullWidth
-          error={nameError}
+          error={formulaError}
           value={name}
           onChange={(event) => setName(event.target.value)}
           onKeyDown={(event) => {
@@ -55,6 +53,7 @@ function NamedRangeActive(properties: NamedRangeProperties) {
           size="small"
           margin="none"
           fullWidth
+          error={formulaError}
           value={scope}
           onChange={(event) => {
             setScope(event.target.value);
@@ -88,7 +87,10 @@ function NamedRangeActive(properties: NamedRangeProperties) {
         <IconsWrapper>
           <IconButton
             onClick={() => {
-              onSave(name, scope, formula);
+              const error = onSave(name, scope, formula);
+              if (error) {
+                setFormulaError(true);
+              }
             }}
           >
             <StyledCheck size={12} />