[ProjectSettings] Refactor with category tabs (#2569)

Also: * Move ProjectUsers out of ProjectSettings folder * Don't show tab for read-only Schedule if no dates have been added
sillsdev · Sep 19, 2023 · e75fe85 · e75fe85
1 parent 84b1645
commit e75fe85
Show file tree

Hide file tree

Showing 24 changed files with 563 additions and 261 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -89,6 +89,7 @@
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/crypto-js": "^4.1.2",
+    "@types/css-mediaquery": "^0.1.2",
     "@types/jest": "^29.5.5",
     "@types/loadable__component": "^5.13.4",
     "@types/node": "^20.5.1",
@@ -105,6 +106,7 @@
     "@types/validator": "^13.11.1",
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.3.0",
+    "css-mediaquery": "^0.1.2",
     "eslint": "^8.44.0",
     "eslint-import-resolver-typescript": "^3.6.0",
     "eslint-plugin-import": "^2.28.1",

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -136,6 +136,14 @@
   },
   "projectSettings": {
     "project": "Project:",
+    "tab": {
+      "basic": "Basic Settings",
+      "export": "Export",
+      "importExport": "Import/Export",
+      "languages": "Languages",
+      "schedule": "Schedule",
+      "users": "Users"
+    },
     "language": {
       "header": "Language",
       "vernacular": "Vernacular",
@@ -144,7 +152,7 @@
       "analysisLanguage": "Analysis Language",
       "semanticDomains": "Semantic Domains",
       "semanticDomainsDefault": "(Default to browser language)",
-      "languages": "Languages",
+      "languages": "Project Languages",
       "bcp47": "BCP 47 Code",
       "name": "Name",
       "font": "Font",

diff --git a/...ts/BaseSettings/BaseSettingsComponent.tsx → src/components/BaseSettings/index.tsx b/...ts/BaseSettings/BaseSettingsComponent.tsx → src/components/BaseSettings/index.tsx
@@ -9,9 +9,7 @@ interface BaseSettingsProps {
   body: ReactNode;
 }
 
-export default function BaseSettingsComponent(
-  props: BaseSettingsProps
-): ReactElement {
+export default function BaseSettings(props: BaseSettingsProps): ReactElement {
   const [isVisible, setIsVisible] = useState(true);
 
   const toggleVisibility = (): void => {

diff --git a/...agement/ProjectButtonWithConfirmation.tsx → ...onents/ProjectSettings/ProjectArchive.tsx b/...agement/ProjectButtonWithConfirmation.tsx → ...onents/ProjectSettings/ProjectArchive.tsx
@@ -1,13 +1,13 @@
 import { Button } from "@mui/material";
 import { ButtonProps } from "@mui/material/Button";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { archiveProject, restoreProject } from "backend";
 import { ButtonConfirmation } from "components/Dialogs";
 import { themeColors } from "types/theme";
 
-interface ProjectButtonWithConfirmationProps {
+interface ProjectArchiveProps extends ButtonProps {
   archive?: boolean;
   projectId: string;
   updateParent: () => void | Promise<void>;
@@ -17,9 +17,7 @@ interface ProjectButtonWithConfirmationProps {
 /**
  * Button for archiving/restoring project (changing isActive)
  */
-export default function ProjectButtonWithConfirmation(
-  props: ButtonProps & ProjectButtonWithConfirmationProps
-) {
+export default function ProjectArchive(props: ProjectArchiveProps) {
   const [open, setOpen] = useState(false);
   const { t } = useTranslation();
 
@@ -41,7 +39,7 @@ export default function ProjectButtonWithConfirmation(
   }
 
   return (
-    <React.Fragment>
+    <>
       <Button
         variant="contained"
         color={props.warn ? "secondary" : "primary"}
@@ -68,6 +66,6 @@ export default function ProjectButtonWithConfirmation(
           props.archive ? "archive" : "restore"
         }-confirm`}
       />
-    </React.Fragment>
+    </>
   );
 }
diff --git a/...tings/ProjectSchedule/ProjectSchedule.tsx → ...ProjectSettings/ProjectSchedule/index.tsx b/...tings/ProjectSchedule/ProjectSchedule.tsx → ...ProjectSettings/ProjectSchedule/index.tsx
diff --git a/...ctSchedule/tests/ProjectSchedule.test.tsx → ...ings/ProjectSchedule/tests/index.test.tsx b/...ctSchedule/tests/ProjectSchedule.test.tsx → ...ings/ProjectSchedule/tests/index.test.tsx
@@ -1,10 +1,10 @@
-import { IconButton } from "@mui/material";
+import { Button, IconButton } from "@mui/material";
 import renderer from "react-test-renderer";
 
 import "tests/reactI18nextMock";
 
 import { Project } from "api/models";
-import ProjectSchedule from "components/ProjectSettings/ProjectSchedule/ProjectSchedule";
+import ProjectSchedule from "components/ProjectSettings/ProjectSchedule";
 import { newProject } from "types/project";
 
 const mockUpdateProject = jest.fn();
@@ -39,6 +39,7 @@ describe("ProjectSchedule", () => {
 
   it("renders readOnly with no buttons", async () => {
     await renderProjSched(undefined, true);
+    expect(projectMaster.root.findAllByType(Button)).toHaveLength(0);
     expect(projectMaster.root.findAllByType(IconButton)).toHaveLength(0);
   });
 });