904 allow folder renaming (#915)

* backend patch endpoint and test

* codegen

* redux reducer

* rename is working

* temp

* default name works now

* black formatter

* add auth wrapper to only allow delete edit when it's uer

* fix default renaming

Author: longshuicy

backend/app/models/folders.py

@@ -12,6 +12,11 @@ class FolderBase(BaseModel):
     name: str = "N/A"
 
 
+class FolderPatch(BaseModel):
+    name: Optional[str]
+    parent_folder: Optional[PydanticObjectId]
+
+
 class FolderIn(FolderBase):
     parent_folder: Optional[PydanticObjectId]
 

backend/app/routers/datasets.py

@@ -55,7 +55,13 @@
     StorageType,
 )
 from app.models.folder_and_file import FolderFileViewList
-from app.models.folders import FolderOut, FolderIn, FolderDB, FolderDBViewList
+from app.models.folders import (
+    FolderOut,
+    FolderIn,
+    FolderDB,
+    FolderDBViewList,
+    FolderPatch,
+)
 from app.models.metadata import MetadataDB
 from app.models.pages import Paged, _get_page_query, _construct_page_metadata
 from app.models.thumbnails import ThumbnailDB
@@ -600,6 +606,48 @@ async def _delete_nested_folders(parent_folder_id):
     raise HTTPException(status_code=404, detail=f"Dataset {dataset_id} not found")
 
 
+@router.get("/{dataset_id}/folders/{folder_id}")
+async def get_folder(
+    dataset_id: str,
+    folder_id: str,
+    allow: bool = Depends(Authorization("viewer")),
+):
+    if (dataset := await DatasetDB.get(PydanticObjectId(dataset_id))) is not None:
+        if (folder := await FolderDB.get(PydanticObjectId(folder_id))) is not None:
+            return folder.dict()
+        else:
+            raise HTTPException(status_code=404, detail=f"Folder {folder_id} not found")
+    raise HTTPException(status_code=404, detail=f"Dataset {dataset_id} not found")
+
+
+@router.patch("/{dataset_id}/folders/{folder_id}", response_model=FolderOut)
+async def patch_folder(
+    dataset_id: str,
+    folder_id: str,
+    folder_info: FolderPatch,
+    user=Depends(get_current_user),
+    allow: bool = Depends(Authorization("editor")),
+):
+    if await DatasetDB.get(PydanticObjectId(dataset_id)) is not None:
+        if (folder := await FolderDB.get(PydanticObjectId(folder_id))) is not None:
+            # update folder
+            if folder_info.name is not None:
+                folder.name = folder_info.name
+            # allow moving folder around within the hierarchy
+            if folder_info.parent_folder is not None:
+                if (
+                    await FolderDB.get(PydanticObjectId(folder_info.parent_folder))
+                    is not None
+                ):
+                    folder.parent_folder = folder_info.parent_folder
+            folder.modified = datetime.datetime.utcnow()
+            await folder.save()
+            return folder.dict()
+        else:
+            raise HTTPException(status_code=404, detail=f"Folder {folder_id} not found")
+    raise HTTPException(status_code=404, detail=f"Dataset {dataset_id} not found")
+
+
 # new endpoint for /{dataset_id}/local_files
 # new endpoint for /{dataset_id}/remote_files
 

backend/app/tests/test_folders.py

@@ -30,3 +30,20 @@ def test_create_nested(client: TestClient, headers: dict):
     )
     assert response.status_code == 200
     assert len(response.json()["data"]) == 1
+
+
+def test_rename_folder(client: TestClient, headers: dict):
+    dataset_id = create_dataset(client, headers).get("id")
+
+    # create folder
+    folder_id = create_folder(client, headers, dataset_id, "original name").get("id")
+
+    # rename
+    response = client.patch(
+        f"{settings.API_V2_STR}/datasets/{dataset_id}/folders/{folder_id}",
+        json={"name": "edited name"},
+        headers=headers,
+    )
+    assert response.status_code == 200
+    assert response.json().get("id") is not None
+    assert response.json().get("name") == "edited name"

frontend/src/actions/dataset.js

@@ -293,6 +293,51 @@ export function folderAdded(datasetId, folderName, parentFolder = null) {
 	};
 }
 
+export const FOLDER_UPDATED = "FOLDER_UPDATED";
+
+export function updateFolder(datasetId, folderId, formData) {
+	return (dispatch) => {
+		return V2.DatasetsService.patchFolderApiV2DatasetsDatasetIdFoldersFolderIdPatch(
+			datasetId,
+			folderId,
+			formData
+		)
+			.then((json) => {
+				dispatch({
+					type: FOLDER_UPDATED,
+					folder: json,
+					receivedAt: Date.now(),
+				});
+			})
+			.catch((reason) => {
+				dispatch(
+					handleErrors(reason, updateFolder(datasetId, folderId, formData))
+				);
+			});
+	};
+}
+
+export const GET_FOLDER = "GET_FOLDER";
+
+export function getFolder(datasetId, folderId) {
+	return (dispatch) => {
+		return V2.DatasetsService.getFolderApiV2DatasetsDatasetIdFoldersFolderIdGet(
+			datasetId,
+			folderId
+		)
+			.then((json) => {
+				dispatch({
+					type: GET_FOLDER,
+					folder: json,
+					receivedAt: Date.now(),
+				});
+			})
+			.catch((reason) => {
+				dispatch(handleErrors(reason, getFolder(datasetId, folderId)));
+			});
+	};
+}
+
 export const GET_FOLDER_PATH = "GET_FOLDER_PATH";
 
 export function fetchFolderPath(folderId) {

frontend/src/actions/folder.js

@@ -1,30 +1,6 @@
 import { V2 } from "../openapi";
 import { handleErrors } from "./common";
 
-export const FOLDER_ADDED = "FOLDER_ADDED";
-
-export function folderAdded(datasetId, folderName, parentFolder = null) {
-	return (dispatch) => {
-		const folder = { name: folderName, parent_folder: parentFolder };
-		return V2.DatasetsService.addFolderApiV2DatasetsDatasetIdFoldersPost(
-			datasetId,
-			folder
-		)
-			.then((json) => {
-				dispatch({
-					type: FOLDER_ADDED,
-					folder: json,
-					receivedAt: Date.now(),
-				});
-			})
-			.catch((reason) => {
-				dispatch(
-					handleErrors(reason, folderAdded(datasetId, folderName, parentFolder))
-				);
-			});
-	};
-}
-
 export const GET_FOLDER_PATH = "GET_FOLDER_PATH";
 
 export function fetchFolderPath(folderId) {

frontend/src/components/datasets/EditNameModal.tsx

@@ -1,72 +1,69 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 
 import {
 	Button,
 	Container,
 	Dialog,
-	DialogActions, DialogContent,
-	DialogTitle, TextField
+	DialogActions,
+	DialogContent,
+	DialogTitle,
+	TextField,
 } from "@mui/material";
 
 import LoadingOverlay from "react-loading-overlay-ts";
 
-import {useDispatch, useSelector,} from "react-redux";
-import {DatasetIn} from "../../openapi/v2";
-import {updateDataset} from "../../actions/dataset";
-import {RootState} from "../../types/data";
-
+import { useDispatch, useSelector } from "react-redux";
+import { DatasetIn } from "../../openapi/v2";
+import { updateDataset } from "../../actions/dataset";
+import { RootState } from "../../types/data";
 
 type EditNameModalProps = {
-	datasetId: string
-	handleClose:(open:boolean) => void,
+	datasetId: string;
+	handleClose: (open: boolean) => void;
 	open: boolean;
-}
+};
 
 export default function EditNameModal(props: EditNameModalProps) {
-	const {datasetId, open, handleClose} = props;
+	const { datasetId, open, handleClose } = props;
 	const dispatch = useDispatch();
-	const editDataset = (datasetId: string | undefined, formData: DatasetIn) => dispatch(updateDataset(datasetId, formData));
-
+	const editDataset = (datasetId: string | undefined, formData: DatasetIn) =>
+		dispatch(updateDataset(datasetId, formData));
 
 	const about = useSelector((state: RootState) => state.dataset.about);
 
 	const [loading, setLoading] = useState(false);
 	const [name, setName] = useState(about["name"]);
 
-
-
 	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
 		setName(event.target.value);
 	};
 
 	const onSave = async () => {
 		setLoading(true);
-		editDataset(datasetId, {"name": name});
+		editDataset(datasetId, { name: name });
 		setName("");
 		setLoading(false);
 		handleClose(true);
 	};
 
 	return (
 		<Container>
-			<LoadingOverlay
-				active={loading}
-				spinner
-				text="Saving..."
-			>
+			<LoadingOverlay active={loading} spinner text="Saving...">
 				<Dialog open={open} onClose={handleClose} fullWidth={true}>
 					<DialogTitle>Rename Dataset</DialogTitle>
 					<DialogContent>
-							<TextField
-								id="outlined-name"
-								variant="standard"
-								fullWidth
-								defaultValue={about["name"]}
-								onChange={handleChange}
-							/>
+						<TextField
+							id="outlined-name"
+							variant="standard"
+							fullWidth
+							defaultValue={about["name"]}
+							onChange={handleChange}
+						/>
 					</DialogContent>
 					<DialogActions>
-						<Button variant="contained" onClick={onSave} disabled={name == ""}>Save</Button>
+						<Button variant="contained" onClick={onSave} disabled={name == ""}>
+							Save
+						</Button>
 						<Button onClick={handleClose}>Cancel</Button>
 					</DialogActions>
 				</Dialog>

frontend/src/components/files/EditFolderNameModal.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+
+import {
+	Button,
+	Container,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogTitle,
+	TextField,
+} from "@mui/material";
+
+import LoadingOverlay from "react-loading-overlay-ts";
+
+import { useDispatch } from "react-redux";
+import { updateFolder as updateFolderAction } from "../../actions/dataset";
+import { FolderPatch } from "../../openapi/v2";
+
+type EditNameModalProps = {
+	datasetId: string;
+	folderId: string;
+	initialFolderName: string;
+	handleClose: () => void;
+	open: boolean;
+};
+
+export default function EditFolderNameModal(props: EditNameModalProps) {
+	const { datasetId, folderId, initialFolderName, open, handleClose } = props;
+	const dispatch = useDispatch();
+	const updateFolder = (
+		datasetId: string | undefined,
+		folderId: string | undefined,
+		formData: FolderPatch
+	) => dispatch(updateFolderAction(datasetId, folderId, formData));
+
+	const [loading, setLoading] = useState(false);
+	const [name, setName] = useState();
+	const [defaultName, setDefaultName] = useState(initialFolderName);
+
+	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		setName(event.target.value);
+	};
+
+	const onSave = async () => {
+		setLoading(true);
+		updateFolder(datasetId, folderId, { name: name });
+		setName("");
+		setDefaultName(name);
+		setLoading(false);
+		handleClose();
+	};
+
+	return (
+		<Container>
+			<LoadingOverlay active={loading} spinner text="Saving...">
+				<Dialog open={open} onClose={handleClose} fullWidth={true}>
+					<DialogTitle>Rename Folder</DialogTitle>
+					<DialogContent>
+						<TextField
+							id="outlined-name"
+							variant="standard"
+							fullWidth
+							defaultValue={defaultName}
+							onChange={handleChange}
+						/>
+					</DialogContent>
+					<DialogActions>
+						<Button variant="contained" onClick={onSave} disabled={name == ""}>
+							Save
+						</Button>
+						<Button onClick={handleClose}>Cancel</Button>
+					</DialogActions>
+				</Dialog>
+			</LoadingOverlay>
+		</Container>
+	);
+}

frontend/src/components/files/FilesTable.tsx

@@ -12,8 +12,11 @@ import FolderIcon from "@mui/icons-material/Folder";
 import { theme } from "../../theme";
 import { parseDate } from "../../utils/common";
 import { FilesTableFileEntry } from "./FilesTableFileEntry";
-import FolderMenu from "./FolderMenu";
 import { FileOut, FolderOut } from "../../openapi/v2";
+import { useSelector } from "react-redux";
+import { RootState } from "../../types/data";
+import FolderMenu from "./FolderMenu";
+import { AuthWrapper } from "../auth/AuthWrapper";
 
 type FilesTableProps = {
 	datasetId: string | undefined;
@@ -70,6 +73,10 @@ export default function FilesTable(props: FilesTableProps) {
 		history(`/public/datasets/${datasetId}?folder=${selectedFolderId}`);
 	};
 
+	const datasetRole = useSelector(
+		(state: RootState) => state.dataset.datasetRole
+	);
+
 	return (
 		<TableContainer component={Paper}>
 			<Table sx={{ minWidth: 650 }} aria-label="simple table">
@@ -107,7 +114,13 @@ export default function FilesTable(props: FilesTableProps) {
 								<TableCell align="right">&nbsp;</TableCell>
 								<TableCell align="right">&nbsp;</TableCell>
 								<TableCell align="right">
-									<FolderMenu folder={item} />
+									{/*owner, editor can delete and edit folder*/}
+									<AuthWrapper
+										currRole={datasetRole.role}
+										allowedRoles={["owner", "editor"]}
+									>
+										<FolderMenu folder={item} />
+									</AuthWrapper>
 								</TableCell>
 							</TableRow>
 						) : (