[ProjectSettings] Make read-only variant of proj languages setting (#…

…2373)
sillsdev · Jul 20, 2023 · bc88e66 · bc88e66
1 parent 0b73312
commit bc88e66
Show file tree

Hide file tree

Showing 6 changed files with 168 additions and 119 deletions.
diff --git a/src/components/BaseSettings/BaseSettingsComponent.tsx b/src/components/BaseSettings/BaseSettingsComponent.tsx
@@ -29,7 +29,7 @@ export default function BaseSettingsComponent(
       </Grid>
       <Grid item>
         <Typography
-          variant="h6"
+          variant="h5"
           style={{ marginBottom: isVisible ? theme.spacing(2) : 0 }}
           onClick={() => toggleVisibility()}
         >

diff --git a/src/components/ProjectSettings/ProjectLanguages.tsx b/src/components/ProjectSettings/ProjectLanguages.tsx
@@ -27,6 +27,12 @@ import theme from "types/theme";
 import { newWritingSystem, semDomWritingSystems } from "types/writingSystem";
 import { getAnalysisLangsFromWords } from "utilities/wordUtilities";
 
+const addAnalysisLangButtonId = "analysis-language-new";
+const addAnalysisLangCleanButtonId = "analysis-language-new-clear";
+const addAnalysisLangConfirmButtonId = "analysis-language-new-confirm";
+const getProjAnalysisLangsButtonId = "analysis-language-get";
+const semDomLangSelectId = "semantic-domains-language";
+
 export default function ProjectLanguages(
   props: ProjectSettingPropsWithUpdate
 ): ReactElement {
@@ -89,7 +95,7 @@ export default function ProjectLanguages(
   };
 
   const writingSystemButtons = (index: number): ReactElement => {
-    return index === 0 ? (
+    return index === 0 || props.readOnly ? (
       // The top writing system is default and needs no buttons.
       <Fragment />
     ) : (
@@ -139,16 +145,104 @@ export default function ProjectLanguages(
     setNewLang(newWritingSystem());
   };
 
+  const addAnalysisLangButtons = (): ReactElement => (
+    <>
+      <IconButtonWithTooltip
+        icon={<Add />}
+        textId="projectSettings.language.addAnalysisLanguage"
+        onClick={() => setAdd(true)}
+        buttonId={addAnalysisLangButtonId}
+      />
+      <IconButtonWithTooltip
+        icon={<Search />}
+        textId="projectSettings.language.getGlossLanguages"
+        onClick={() => getActiveAnalysisLangs()}
+        buttonId={getProjAnalysisLangsButtonId}
+      />
+      {langsInProj}
+    </>
+  );
+
+  const addAnalysisLangPicker = (): ReactElement => (
+    <Grid container spacing={1} alignItems="center">
+      <Grid item>
+        <LanguagePicker
+          value={newLang.name}
+          setCode={(bcp47: string) =>
+            setNewLang((prev: WritingSystem) => ({ ...prev, bcp47 }))
+          }
+          name={newLang.bcp47}
+          setName={(name: string) =>
+            setNewLang((prev: WritingSystem) => ({ ...prev, name }))
+          }
+          font={newLang.font}
+          setFont={(font: string) =>
+            setNewLang((prev: WritingSystem) => ({ ...prev, font }))
+          }
+          t={languagePickerStrings_en}
+        />
+      </Grid>{" "}
+      <Grid item>
+        <IconButton
+          disabled={!isNewLang}
+          onClick={() => addAnalysisWritingSystem()}
+          id={addAnalysisLangConfirmButtonId}
+          size="large"
+        >
+          <Done />
+        </IconButton>
+      </Grid>{" "}
+      <Grid item>
+        <IconButton
+          onClick={() => resetState()}
+          id={addAnalysisLangCleanButtonId}
+          size="large"
+        >
+          <Clear />
+        </IconButton>
+      </Grid>
+    </Grid>
+  );
+
+  const semDomLangSelect = (): ReactElement => (
+    <Select
+      variant="standard"
+      id={semDomLangSelectId}
+      value={props.project.semDomWritingSystem.bcp47}
+      onChange={(event: SelectChangeEvent<string>) =>
+        setSemDomWritingSystem(event.target.value as string)
+      }
+      /* Use `displayEmpty` and a conditional `renderValue` function to force
+       * something to appear when the menu is closed and its value is "" */
+      displayEmpty
+      renderValue={
+        props.project.semDomWritingSystem.bcp47
+          ? undefined
+          : () => t("projectSettings.language.semanticDomainsDefault")
+      }
+    >
+      <MenuItem value={""}>
+        {t("projectSettings.language.semanticDomainsDefault")}
+      </MenuItem>
+      {semDomWritingSystems.map((ws) => (
+        <MenuItem key={ws.bcp47} value={ws.bcp47}>
+          {`${ws.bcp47} (${ws.name})`}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+
   return (
     <>
-      <Typography>
+      {/* Vernacular language */}
+      <Typography variant="h6">
         {t("projectSettings.language.vernacular")}
-        {": "}
       </Typography>
       <ImmutableWritingSystem ws={props.project.vernacularWritingSystem} />
-      <Typography style={{ marginTop: theme.spacing(1) }}>
+
+      {/* Analysis languages */}
+      <Typography style={{ marginTop: theme.spacing(1) }} variant="h6">
         {t("projectSettings.language.analysis")}
-        {": "}
       </Typography>
       {props.project.analysisWritingSystems.map((writingSystem, index) => (
         <ImmutableWritingSystem
@@ -158,91 +252,24 @@ export default function ProjectLanguages(
           buttons={writingSystemButtons(index)}
         />
       ))}
-      {add ? (
-        <Grid container spacing={1} alignItems="center">
-          <Grid item>
-            <LanguagePicker
-              value={newLang.name}
-              setCode={(bcp47: string) =>
-                setNewLang((prev: WritingSystem) => ({ ...prev, bcp47 }))
-              }
-              name={newLang.bcp47}
-              setName={(name: string) =>
-                setNewLang((prev: WritingSystem) => ({ ...prev, name }))
-              }
-              font={newLang.font}
-              setFont={(font: string) =>
-                setNewLang((prev: WritingSystem) => ({ ...prev, font }))
-              }
-              t={languagePickerStrings_en}
-            />
-          </Grid>{" "}
-          <Grid item>
-            <IconButton
-              disabled={!isNewLang}
-              onClick={() => addAnalysisWritingSystem()}
-              id="analysis-language-new-confirm"
-              size="large"
-            >
-              <Done />
-            </IconButton>
-          </Grid>{" "}
-          <Grid item>
-            <IconButton
-              onClick={() => resetState()}
-              id="analysis-language-new-clear"
-              size="large"
-            >
-              <Clear />
-            </IconButton>
-          </Grid>
-        </Grid>
-      ) : (
-        <>
-          <IconButtonWithTooltip
-            icon={<Add />}
-            textId="projectSettings.language.addAnalysisLanguage"
-            onClick={() => setAdd(true)}
-            buttonId={"analysis-language-new"}
-          />
-          <IconButtonWithTooltip
-            icon={<Search />}
-            textId="projectSettings.language.getGlossLanguages"
-            onClick={() => getActiveAnalysisLangs()}
-            buttonId={"analysis-language-get"}
-          />
-          {langsInProj}
-        </>
-      )}
-      <Typography>
+      {!props.readOnly &&
+        (add ? addAnalysisLangPicker() : addAnalysisLangButtons())}
+
+      {/* Semantic domains language */}
+      <Typography style={{ marginTop: theme.spacing(1) }} variant="h6">
         {t("projectSettings.language.semanticDomains")}
-        {": "}
       </Typography>
-      <Select
-        variant="standard"
-        id="semantic-domains-language"
-        value={props.project.semDomWritingSystem.bcp47}
-        onChange={(event: SelectChangeEvent<string>) =>
-          setSemDomWritingSystem(event.target.value as string)
-        }
-        /* Use `displayEmpty` and a conditional `renderValue` function to force
-         * something to appear when the menu is closed and its value is "" */
-        displayEmpty
-        renderValue={
-          props.project.semDomWritingSystem.bcp47
-            ? undefined
-            : () => t("projectSettings.language.semanticDomainsDefault")
-        }
-      >
-        <MenuItem value={""}>
-          {t("projectSettings.language.semanticDomainsDefault")}
-        </MenuItem>
-        {semDomWritingSystems.map((ws) => (
-          <MenuItem key={ws.bcp47} value={ws.bcp47}>
-            {`${ws.bcp47} (${ws.name})`}
-          </MenuItem>
-        ))}
-      </Select>
+      {props.readOnly ? (
+        props.project.semDomWritingSystem.bcp47 ? (
+          <ImmutableWritingSystem ws={props.project.semDomWritingSystem} />
+        ) : (
+          <Typography>
+            {t("projectSettings.language.semanticDomainsDefault")}
+          </Typography>
+        )
+      ) : (
+        semDomLangSelect()
+      )}
     </>
   );
 }
@@ -265,25 +292,21 @@ function ImmutableWritingSystem(
           <Typography>{`${props.index + 1}. `}</Typography>
         </Grid>
       )}
-      {!!props.ws.name && (
-        <Grid item>
-          <Typography>
+      <Grid item>
+        {!!props.ws.name && (
+          <Typography display="inline">
             {`${t("projectSettings.language.name")}: ${props.ws.name}, `}
           </Typography>
-        </Grid>
-      )}
-      <Grid item>
-        <Typography>
+        )}
+        <Typography display="inline">
           {`${t("projectSettings.language.bcp47")}: ${props.ws.bcp47}`}
         </Typography>
-      </Grid>
-      {!!props.ws.font && (
-        <Grid item>
-          <Typography>
+        {!!props.ws.font && (
+          <Typography display="inline">
             {`, ${t("projectSettings.language.font")}: ${props.ws.font}`}
           </Typography>
-        </Grid>
-      )}
+        )}
+      </Grid>
       <Grid item>{props.buttons}</Grid>
     </Grid>
   );

diff --git a/src/components/ProjectSettings/ProjectSettingsTypes.ts b/src/components/ProjectSettings/ProjectSettingsTypes.ts
@@ -7,5 +7,6 @@ export interface ProjectSettingPropsWithSet {
 
 export interface ProjectSettingPropsWithUpdate {
   project: Project;
+  readOnly?: boolean;
   updateProject: (project: Project) => Promise<void>;
 }
diff --git a/src/components/ProjectSettings/index.tsx b/src/components/ProjectSettings/index.tsx
@@ -96,16 +96,20 @@ export default function ProjectSettingsComponent() {
         />
       )}
 
-      {/*Project Vernacular and Analysis Languages*/}
-      {permissions.includes(Permission.DeleteEditSettingsAndUsers) && (
-        <BaseSettingsComponent
-          icon={<Language />}
-          title={t("projectSettings.language.languages")}
-          body={
-            <ProjectLanguages project={project} updateProject={updateProject} />
-          }
-        />
-      )}
+      {/*Project languages*/}
+      <BaseSettingsComponent
+        icon={<Language />}
+        title={t("projectSettings.language.languages")}
+        body={
+          <ProjectLanguages
+            project={project}
+            readOnly={
+              !permissions.includes(Permission.DeleteEditSettingsAndUsers)
+            }
+            updateProject={updateProject}
+          />
+        }
+      />
 
       {/* Import Lift file */}
       {permissions.includes(Permission.Import) && (

diff --git a/src/components/ProjectSettings/tests/ProjectLangauges.test.tsx b/src/components/ProjectSettings/tests/ProjectLangauges.test.tsx
@@ -1,3 +1,4 @@
+import { Button, Select } from "@mui/material";
 import { LanguagePicker } from "mui-language-picker";
 import renderer from "react-test-renderer";
 
@@ -22,11 +23,18 @@ function mockProject(systems?: WritingSystem[]) {
   return { ...newProject(), analysisWritingSystems: systems ?? [] };
 }
 
-const renderProjLangs = async (project: Project): Promise<void> => {
+const renderProjLangs = async (
+  project: Project,
+  readOnly = false
+): Promise<void> => {
   mockUpdateProject.mockResolvedValue(undefined);
   await renderer.act(async () => {
     projectMaster = renderer.create(
-      <ProjectLanguages project={project} updateProject={mockUpdateProject} />
+      <ProjectLanguages
+        project={project}
+        readOnly={readOnly}
+        updateProject={mockUpdateProject}
+      />
     );
   });
 };
@@ -43,8 +51,10 @@ const renderAndClickAdd = async (): Promise<void> => {
 };
 
 describe("ProjectLanguages", () => {
-  it("renders", async () => {
-    await renderProjLangs(mockProject([...mockAnalysisWritingSystems]));
+  it("renders readOnly", async () => {
+    await renderProjLangs(mockProject([...mockAnalysisWritingSystems]), true);
+    expect(projectMaster.root.findAllByType(Button)).toHaveLength(0);
+    expect(projectMaster.root.findAllByType(Select)).toHaveLength(0);
   });
 
   it("can add language to project", async () => {