Create new folder through frontend

web/src/components/settings/folder-settings/FolderDialog.tsx

@@ -0,0 +1,67 @@
+import { useMutation } from "@apollo/client";
+import { Box, Button, FormGroup } from "@mui/material";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
+import {
+  CreateFolderDocument,
+  FindAccessibleFoldersDocument,
+} from "../../../generated/graphqlOperations";
+import ControlledTextField from "../../controls/ControlledTextField";
+import SettingsDialog from "../SettingsDialog";
+
+const FolderDialog = () => {
+  const navigate = useNavigate();
+  const [createFolder] = useMutation(CreateFolderDocument, {
+    refetchQueries: [FindAccessibleFoldersDocument],
+  });
+
+  const { handleSubmit, control } = useForm({
+    defaultValues: {
+      name: "",
+    },
+  });
+
+  const onSubmit: SubmitHandler<{ name: string }> = async ({ name }) => {
+    await createFolder({ variables: { name } });
+    navigate("../folder-options");
+  };
+
+  return (
+    <SettingsDialog title="Create Folder">
+      <form>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            gap: 4,
+            mt: 4,
+            ml: "auto",
+            mr: "auto",
+            width: "20rem",
+          }}
+        >
+          <FormGroup>
+            <ControlledTextField
+              name="name"
+              control={control}
+              label="Name"
+              rules={{
+                required: { value: true, message: "Folder needs a name." },
+              }}
+            />
+          </FormGroup>
+          <Button
+            type="submit"
+            color="secondary"
+            variant="contained"
+            onClick={handleSubmit(onSubmit)}
+          >
+            Create
+          </Button>
+        </Box>
+      </form>
+    </SettingsDialog>
+  );
+};
+
+export default FolderDialog;

web/src/components/settings/folder-settings/FolderSettings.tsx

@@ -1,11 +1,14 @@
 import { useMutation, useQuery } from "@apollo/client";
 import {
+  Button,
   FormControl,
   InputLabel,
   MenuItem,
   Select,
   SelectChangeEvent,
+  Typography,
 } from "@mui/material";
+import { useNavigate } from "react-router-dom";
 import {
   FindAccessibleFoldersDocument,
   GetMyUserPreferencesDocument,
@@ -14,6 +17,7 @@ import {
 import SettingsDialog from "../SettingsDialog";
 
 const FolderSettings = () => {
+  const navigate = useNavigate();
   const { data: folderData } = useQuery(FindAccessibleFoldersDocument);
   const { data: prefsData } = useQuery(GetMyUserPreferencesDocument);
   const [updateActiveFolder] = useMutation(UpdateActiveFolderDocument, {
@@ -45,6 +49,10 @@ const FolderSettings = () => {
           ))}
         </Select>
       </FormControl>
+      <Typography variant="h4">
+        List of manageable folders here, click to navigate to edit view.
+      </Typography>
+      <Button onClick={() => navigate("../new-folder")}>New Folder</Button>
     </SettingsDialog>
   );
 };

web/src/router.tsx

@@ -1,6 +1,7 @@
 import { createBrowserRouter } from "react-router-dom";
 import AppContainer from "./AppContainer";
 import FrontPage from "./components/front-page/FrontPage";
+import FolderDialog from "./components/settings/folder-settings/FolderDialog";
 import FolderSettings from "./components/settings/folder-settings/FolderSettings";
 import MapDialog from "./components/system-view/floating-mapper-controls/map-select/MapDialog";
 import SystemView from "./components/system-view/SystemView";
@@ -21,24 +22,13 @@ const router = createBrowserRouter([
         path: "system/:systemName",
         element: <SystemView />,
         children: [
-          {
-            path: "new-map",
-            element: <MapDialog />,
-          },
-          {
-            path: "edit-map",
-            element: <MapDialog edit />,
-          },
-          {
-            path: "folder-options",
-            element: <FolderSettings />,
-          },
+          { path: "new-map", element: <MapDialog /> },
+          { path: "edit-map", element: <MapDialog edit /> },
+          { path: "folder-options", element: <FolderSettings /> },
+          { path: "new-folder", element: <FolderDialog /> },
         ],
       },
-      {
-        path: "*",
-        element: <NotFoundView />,
-      },
+      { path: "*", element: <NotFoundView /> },
     ],
   },
 ]);