From 82b2d28663ecccbae7cfd9642222e2590b1ce57b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Hatcher?= <nicolas@theuniverse.today>
Date: Wed, 1 Jan 2025 16:02:19 +0100
Subject: [PATCH] FIX: Set a visual cue when a name is wrong

---
 .../NameManagerDialog/NameManagerDialog.tsx   | 44 ++++++++++++-------
 .../NameManagerDialog/NamedRangeActive.tsx    | 12 ++---
 2 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/webapp/src/components/NameManagerDialog/NameManagerDialog.tsx b/webapp/src/components/NameManagerDialog/NameManagerDialog.tsx
index 0b84a09..40d6dc1 100644
--- a/webapp/src/components/NameManagerDialog/NameManagerDialog.tsx
+++ b/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;
-                    model.updateDefinedName(
-                      definedName.name,
-                      definedName.scope,
-                      newName,
-                      scope,
-                      newFormula,
-                    );
-                    setEditingNameIndex(-2);
-                    onNamesChanged();
+                    try {
+                      model.updateDefinedName(
+                        definedName.name,
+                        definedName.scope,
+                        newName,
+                        scope,
+                        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;
-              model.newDefinedName(name, scope_value, formula);
-              setEditingNameIndex(-2);
-              onNamesChanged();
+              try {
+                model.newDefinedName(name, scope_value, formula);
+                setEditingNameIndex(-2);
+                onNamesChanged();
+              } catch (e) {
+                return `${e}`;
+              }
             }}
             onCancel={() => setEditingNameIndex(-2)}
           />
diff --git a/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx b/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx
index 887ecbe..5f910fb 100644
--- a/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx
+++ b/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} />