From 6d85b1f2d7c94941a1bbf726024b4e2332dfd323 Mon Sep 17 00:00:00 2001
From: "D. Ror" <imnasnainaec@gmail.com>
Date: Tue, 5 Sep 2023 13:39:17 -0400
Subject: [PATCH] #2328 follow-up (#2545)

---
 .../ProjectSettings/ProjectLanguages.tsx      | 75 ++++++++++---------
 .../ProjectSettings/ProjectName.tsx           |  9 +--
 ...ges.test.tsx => ProjectLanguages.test.tsx} | 32 +++++++-
 3 files changed, 73 insertions(+), 43 deletions(-)
 rename src/components/ProjectSettings/tests/{ProjectLangauges.test.tsx => ProjectLanguages.test.tsx} (74%)

diff --git a/src/components/ProjectSettings/ProjectLanguages.tsx b/src/components/ProjectSettings/ProjectLanguages.tsx
index c414ac3599..94466860b2 100644
--- a/src/components/ProjectSettings/ProjectLanguages.tsx
+++ b/src/components/ProjectSettings/ProjectLanguages.tsx
@@ -33,6 +33,9 @@ import { getAnalysisLangsFromWords } from "utilities/wordUtilities";
 const addAnalysisLangButtonId = "analysis-language-new";
 const addAnalysisLangCleanButtonId = "analysis-language-new-clear";
 const addAnalysisLangConfirmButtonId = "analysis-language-new-confirm";
+export const editVernacularNameButtonId = "vernacular-language-edit";
+export const editVernacularNameFieldId = "vernacular-language-name";
+export const editVernacularNameSaveButtonId = "vernacular-language-save";
 const getProjAnalysisLangsButtonId = "analysis-language-get";
 const semDomLangSelectId = "semantic-domains-language";
 
@@ -54,12 +57,11 @@ export default function ProjectLanguages(
           .map((ws) => ws.bcp47)
           .includes(newLang.bcp47)
     );
+  }, [newLang.bcp47, props.project.analysisWritingSystems]);
+
+  useEffect(() => {
     setNewVernName(props.project.vernacularWritingSystem.name);
-  }, [
-    newLang.bcp47,
-    props.project.analysisWritingSystems,
-    props.project.vernacularWritingSystem.name,
-  ]);
+  }, [props.project.vernacularWritingSystem.name]);
 
   const setNewAnalysisDefault = async (index: number): Promise<void> => {
     const analysisWritingSystems = [...props.project.analysisWritingSystems];
@@ -156,22 +158,26 @@ export default function ProjectLanguages(
   };
 
   const updateVernacularName = async (): Promise<void> => {
-    if (newVernName != props.project.vernacularWritingSystem.name) {
-      var vernacularWritingSystem = props.project.vernacularWritingSystem;
-      vernacularWritingSystem.name = newVernName;
-      await props
-        .updateProject({
-          ...props.project,
-          vernacularWritingSystem,
-        })
-        .then(() => resetState())
-        .catch((err) => {
-          console.error(err);
-          toast.error(
-            t("projectSettings.language.updateVernacularLanguageNameFailed")
-          );
-        });
+    if (
+      !newVernName ||
+      newVernName === props.project.vernacularWritingSystem.name
+    ) {
+      return;
     }
+
+    const vernacularWritingSystem: WritingSystem = {
+      ...props.project.vernacularWritingSystem,
+      name: newVernName,
+    };
+    await props
+      .updateProject({ ...props.project, vernacularWritingSystem })
+      .then(() => resetState())
+      .catch((err) => {
+        console.error(err);
+        toast.error(
+          t("projectSettings.language.updateVernacularLanguageNameFailed")
+        );
+      });
   };
 
   const addAnalysisLangButtons = (): ReactElement => (
@@ -271,15 +277,17 @@ export default function ProjectLanguages(
     <ImmutableWritingSystem
       ws={props.project.vernacularWritingSystem}
       buttons={
-        <IconButtonWithTooltip
-          icon={<BorderColor fontSize="inherit" />}
-          textId={t("projectSettings.language.changeName")}
-          small
-          onClick={() => {
-            setChangeVernName(true);
-          }}
-          buttonId={`vernacular-language-edit`}
-        />
+        props.readOnly ? (
+          <Fragment />
+        ) : (
+          <IconButtonWithTooltip
+            icon={<BorderColor fontSize="inherit" />}
+            textId={"projectSettings.language.changeName"}
+            small
+            onClick={() => setChangeVernName(true)}
+            buttonId={editVernacularNameButtonId}
+          />
+        )
       }
     />
   );
@@ -289,7 +297,7 @@ export default function ProjectLanguages(
       <Grid item xs={12}>
         <TextField
           variant="standard"
-          id="vernacular-name"
+          id={editVernacularNameFieldId}
           value={newVernName}
           onChange={(e) => setNewVernName(e.target.value)}
           onBlur={() => {
@@ -303,10 +311,9 @@ export default function ProjectLanguages(
         <Button
           variant="contained"
           color="primary"
-          id="vernacular-name-save"
-          onMouseDown={() => {
-            updateVernacularName();
-          }}
+          id={editVernacularNameSaveButtonId}
+          onClick={() => updateVernacularName()}
+          onMouseDown={(e) => e.preventDefault()}
         >
           {t("buttons.save")}
         </Button>
diff --git a/src/components/ProjectSettings/ProjectName.tsx b/src/components/ProjectSettings/ProjectName.tsx
index 07caf4cefa..2cd8e3e811 100644
--- a/src/components/ProjectSettings/ProjectName.tsx
+++ b/src/components/ProjectSettings/ProjectName.tsx
@@ -38,16 +38,11 @@ export default function ProjectName(
       </Grid>
       <Grid item>
         <Button
-          // No onClick necessary, as name updates on blur away from TextField.
           variant="contained"
           color="primary"
           id="project-name-save"
-          onMouseDown={(e) => {
-            e.preventDefault();
-          }}
-          onClick={() => {
-            updateProjectName();
-          }}
+          onClick={() => updateProjectName()}
+          onMouseDown={(e) => e.preventDefault()}
         >
           {t("buttons.save")}
         </Button>
diff --git a/src/components/ProjectSettings/tests/ProjectLangauges.test.tsx b/src/components/ProjectSettings/tests/ProjectLanguages.test.tsx
similarity index 74%
rename from src/components/ProjectSettings/tests/ProjectLangauges.test.tsx
rename to src/components/ProjectSettings/tests/ProjectLanguages.test.tsx
index b3198f4daf..dc7b504286 100644
--- a/src/components/ProjectSettings/tests/ProjectLangauges.test.tsx
+++ b/src/components/ProjectSettings/tests/ProjectLanguages.test.tsx
@@ -1,11 +1,15 @@
-import { Button, Select } from "@mui/material";
+import { Button, IconButton, Select } from "@mui/material";
 import { LanguagePicker } from "mui-language-picker";
 import renderer from "react-test-renderer";
 
 import "tests/reactI18nextMock";
 
 import { Project, WritingSystem } from "api/models";
-import ProjectLanguages from "components/ProjectSettings/ProjectLanguages";
+import ProjectLanguages, {
+  editVernacularNameButtonId,
+  editVernacularNameFieldId,
+  editVernacularNameSaveButtonId,
+} from "components/ProjectSettings/ProjectLanguages";
 import { newProject } from "types/project";
 import { newWritingSystem } from "types/writingSystem";
 
@@ -54,9 +58,33 @@ describe("ProjectLanguages", () => {
   it("renders readOnly", async () => {
     await renderProjLangs(mockProject([...mockAnalysisWritingSystems]), true);
     expect(projectMaster.root.findAllByType(Button)).toHaveLength(0);
+    expect(projectMaster.root.findAllByType(IconButton)).toHaveLength(0);
     expect(projectMaster.root.findAllByType(Select)).toHaveLength(0);
   });
 
+  it("can change vernacular language name", async () => {
+    await renderProjLangs(mockProject([...mockAnalysisWritingSystems]));
+    const newName = "Vern Lang";
+    await renderer.act(async () => {
+      projectMaster.root
+        .findByProps({ id: editVernacularNameButtonId })
+        .props.onClick();
+    });
+    await renderer.act(async () => {
+      projectMaster.root
+        .findByProps({ id: editVernacularNameFieldId })
+        .props.onChange({ target: { value: newName } });
+    });
+    await renderer.act(async () => {
+      projectMaster.root
+        .findByProps({ id: editVernacularNameSaveButtonId })
+        .props.onClick();
+    });
+    expect(
+      mockUpdateProject.mock.calls[0][0].vernacularWritingSystem.name
+    ).toEqual(newName);
+  });
+
   it("can add language to project", async () => {
     await renderAndClickAdd();
     pickerHandle = projectMaster.root.findByType(LanguagePicker);